@buoy-gg/shared-ui 7.0.40 → 7.0.42

package/lib/module/ui/components/EventStepperFooter.js

@@ -1,180 +1 @@
-"use strict";
-
-/**
- * EventStepperFooter
- *
- * A reusable footer component for stepping through events/items.
- * Used in storage event details, render history, and other event-based views.
- * This is a "dumb" component with no internal logic - all state is controlled externally.
- */
-
-import React, { memo } from "react";
-import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
-import { ChevronLeft, ChevronRight } from "../../icons/lucide-icons.js";
-import { macOSColors } from "../gameUI/constants/macOSDesignSystemColors.js";
-import { night } from "../night/nightTheme.js";
-import { useSafeAreaInsets } from "../../hooks/useSafeAreaInsets.js";
-import { monoFont } from "../fonts.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * A footer component for navigating through a list of events/items.
- * Shows Previous/Next buttons with a counter in the middle.
- */
-export const EventStepperFooter = /*#__PURE__*/memo(function EventStepperFooter({
-  currentIndex,
-  totalItems,
-  onPrevious,
-  onNext,
-  itemLabel = "Event",
-  subtitle,
-  absolute = false,
-  applySafeAreaInset = true,
-  variant = "night"
-}) {
-  const insets = useSafeAreaInsets();
-
-  // Don't render if there's only one or no items
-  if (totalItems <= 1) return null;
-  const isNight = variant === "night";
-  const isFirstItem = currentIndex === 0;
-  const isLastItem = currentIndex === totalItems - 1;
-  const bottomPadding = applySafeAreaInset ? 12 + insets.bottom : 12;
-  // Night buttons are the plate-with-accent-label style — chevrons match.
-  const enabledInk = isNight ? night.color.accent : macOSColors.text.primary;
-  const disabledInk = isNight ? night.color.textTertiary : macOSColors.text.muted;
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.footer, isNight && styles.nightFooter, absolute && styles.footerAbsolute, {
-      paddingBottom: bottomPadding
-    }],
-    children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-      onPress: onPrevious,
-      disabled: isFirstItem,
-      testID: "tool-stepper-previous",
-      accessibilityRole: "button",
-      accessibilityLabel: "Previous",
-      style: [styles.navButton, isNight && styles.nightNavButton, isFirstItem && styles.navButtonDisabled],
-      activeOpacity: 0.7,
-      children: [/*#__PURE__*/_jsx(ChevronLeft, {
-        size: 20,
-        color: isFirstItem ? disabledInk : enabledInk
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.navButtonText, isNight && styles.nightNavButtonText, isFirstItem && styles.navButtonTextDisabled, isFirstItem && isNight && styles.nightNavButtonTextDisabled],
-        children: "Previous"
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.counterContainer,
-      children: [/*#__PURE__*/_jsxs(Text, {
-        testID: "tool-stepper-counter",
-        style: [styles.counterText, isNight && styles.nightCounterText],
-        children: [itemLabel, " ", currentIndex + 1, " of ", totalItems]
-      }), subtitle && /*#__PURE__*/_jsx(Text, {
-        testID: "tool-stepper-subtitle",
-        style: [styles.subtitleText, isNight && styles.nightSubtitleText],
-        children: subtitle
-      })]
-    }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-      onPress: onNext,
-      disabled: isLastItem,
-      testID: "tool-stepper-next",
-      accessibilityRole: "button",
-      accessibilityLabel: "Next",
-      style: [styles.navButton, isNight && styles.nightNavButton, isLastItem && styles.navButtonDisabled],
-      activeOpacity: 0.7,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.navButtonText, isNight && styles.nightNavButtonText, isLastItem && styles.navButtonTextDisabled, isLastItem && isNight && styles.nightNavButtonTextDisabled],
-        children: "Next"
-      }), /*#__PURE__*/_jsx(ChevronRight, {
-        size: 20,
-        color: isLastItem ? disabledInk : enabledInk
-      })]
-    })]
-  });
-});
-const styles = StyleSheet.create({
-  footer: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 16,
-    paddingTop: 12,
-    backgroundColor: macOSColors.background.base,
-    borderTopWidth: 1,
-    borderTopColor: macOSColors.border.default,
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: -2
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 5
-  },
-  footerAbsolute: {
-    position: "absolute",
-    bottom: 0,
-    left: 0,
-    right: 0
-  },
-  navButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 6,
-    backgroundColor: macOSColors.background.card,
-    minWidth: 100,
-    justifyContent: "center"
-  },
-  navButtonDisabled: {
-    opacity: 0.3
-  },
-  navButtonText: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: macOSColors.text.primary,
-    fontFamily: monoFont,
-    textTransform: "uppercase"
-  },
-  navButtonTextDisabled: {
-    color: macOSColors.text.muted
-  },
-  counterContainer: {
-    alignItems: "center"
-  },
-  counterText: {
-    fontSize: 14,
-    fontWeight: "700",
-    color: macOSColors.text.primary,
-    fontFamily: monoFont,
-    textTransform: "uppercase"
-  },
-  subtitleText: {
-    fontSize: 11,
-    color: macOSColors.text.secondary,
-    fontFamily: monoFont,
-    marginTop: 2
-  },
-  // ── Night variant (see ui/night/nightTheme.ts): near-black glass bar with
-  // hairline top border, plate buttons, night text hierarchy.
-  nightFooter: {
-    backgroundColor: "rgba(5, 5, 5, 0.92)",
-    borderTopColor: night.color.border
-  },
-  nightNavButton: {
-    backgroundColor: night.color.button,
-    borderRadius: 15
-  },
-  nightNavButtonText: {
-    color: night.color.accent
-  },
-  nightNavButtonTextDisabled: {
-    color: night.color.textTertiary
-  },
-  nightCounterText: {
-    color: night.color.text
-  },
-  nightSubtitleText: {
-    color: night.color.textSecondary
-  }
-});
+"use strict";import R,{memo as N}from"react";import{View as g,Text as l,TouchableOpacity as x,StyleSheet as S}from"react-native";import{ChevronLeft as w,ChevronRight as F}from"../../icons/lucide-icons.js";import{macOSColors as e}from"../gameUI/constants/macOSDesignSystemColors.js";import{night as n}from"../night/nightTheme.js";import{useSafeAreaInsets as k}from"../../hooks/useSafeAreaInsets";import{monoFont as u}from"../fonts.js";import{jsx as a,jsxs as s}from"react/jsx-runtime";export const EventStepperFooter=N(function I({currentIndex:c,totalItems:d,onPrevious:m,onNext:f,itemLabel:v="Event",subtitle:b,absolute:y=false,applySafeAreaInset:T=true,variant:B="night"}){const C=k();if(d<=1)return null;const o=B==="night";const r=c===0;const i=c===d-1;const D=T?12+C.bottom:12;const p=o?n.color.accent:e.text.primary;const h=o?n.color.textTertiary:e.text.muted;return s(g,{style:[t.footer,o&&t.nightFooter,y&&t.footerAbsolute,{paddingBottom:D}],children:[s(x,{onPress:m,disabled:r,testID:"tool-stepper-previous",accessibilityRole:"button",accessibilityLabel:"Previous",style:[t.navButton,o&&t.nightNavButton,r&&t.navButtonDisabled],activeOpacity:.7,children:[a(w,{size:20,color:r?h:p}),a(l,{style:[t.navButtonText,o&&t.nightNavButtonText,r&&t.navButtonTextDisabled,r&&o&&t.nightNavButtonTextDisabled],children:"Previous"})]}),s(g,{style:t.counterContainer,children:[s(l,{testID:"tool-stepper-counter",style:[t.counterText,o&&t.nightCounterText],children:[v," ",c+1," of ",d]}),b&&a(l,{testID:"tool-stepper-subtitle",style:[t.subtitleText,o&&t.nightSubtitleText],children:b})]}),s(x,{onPress:f,disabled:i,testID:"tool-stepper-next",accessibilityRole:"button",accessibilityLabel:"Next",style:[t.navButton,o&&t.nightNavButton,i&&t.navButtonDisabled],activeOpacity:.7,children:[a(l,{style:[t.navButtonText,o&&t.nightNavButtonText,i&&t.navButtonTextDisabled,i&&o&&t.nightNavButtonTextDisabled],children:"Next"}),a(F,{size:20,color:i?h:p})]})]})});const t=S.create({footer:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:16,paddingTop:12,backgroundColor:e.background.base,borderTopWidth:1,borderTopColor:e.border.default,shadowColor:"#000",shadowOffset:{width:0,height:-2},shadowOpacity:.1,shadowRadius:4,elevation:5},footerAbsolute:{position:"absolute",bottom:0,left:0,right:0},navButton:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:12,paddingVertical:8,borderRadius:6,backgroundColor:e.background.card,minWidth:100,justifyContent:"center"},navButtonDisabled:{opacity:.3},navButtonText:{fontSize:12,fontWeight:"600",color:e.text.primary,fontFamily:u,textTransform:"uppercase"},navButtonTextDisabled:{color:e.text.muted},counterContainer:{alignItems:"center"},counterText:{fontSize:14,fontWeight:"700",color:e.text.primary,fontFamily:u,textTransform:"uppercase"},subtitleText:{fontSize:11,color:e.text.secondary,fontFamily:u,marginTop:2},nightFooter:{backgroundColor:"rgba(5, 5, 5, 0.92)",borderTopColor:n.color.border},nightNavButton:{backgroundColor:n.color.button,borderRadius:15},nightNavButtonText:{color:n.color.accent},nightNavButtonTextDisabled:{color:n.color.textTertiary},nightCounterText:{color:n.color.text},nightSubtitleText:{color:n.color.textSecondary}});

package/lib/module/ui/components/ExpandablePopover.js

@@ -1,378 +1 @@
-"use strict";
-
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { Animated, TouchableOpacity, View, Text, StyleSheet } from "react-native";
-import { ChevronUp } from "../../icons/index.js";
-import { buoyColors } from "../gameUI/constants/gameUIColors.js";
-
-// ============================================================================
-// Types
-// ============================================================================
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// ============================================================================
-// Constants
-// ============================================================================
-
-const DEFAULT_PEEK_HEIGHT = 28;
-const DEFAULT_WIDTH = 44;
-
-// ============================================================================
-// Collapsed Peek Component
-// ============================================================================
-
-function CollapsedPeek({
-  count,
-  showCount,
-  onPress,
-  progress,
-  width,
-  height,
-  customContent,
-  label,
-  testID,
-  attention
-}) {
-  // When progress=0 (collapsed): peek is visible (opacity=1, scale=1)
-  // When progress=1 (expanded): peek is hidden (opacity=0, scale=0.9)
-  const opacity = progress.interpolate({
-    inputRange: [0, 0.5, 1],
-    outputRange: [1, 0.5, 0]
-  });
-  const scale = progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [1, 0.9]
-  });
-  return /*#__PURE__*/_jsx(Animated.View, {
-    style: [styles.peekContainer, {
-      width,
-      opacity,
-      transform: [{
-        scale
-      }]
-    }],
-    children: /*#__PURE__*/_jsxs(TouchableOpacity, {
-      onPress: onPress,
-      activeOpacity: 0.8,
-      style: [styles.peekButton, {
-        width,
-        height
-      }],
-      accessibilityLabel: attention?.label ? `${label || "Expand options"} — ${attention.label}` : label || `Expand options`,
-      accessibilityRole: "button",
-      testID: testID,
-      children: [customContent || /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(ChevronUp, {
-          size: 12,
-          color: buoyColors.textMuted,
-          strokeWidth: 2
-        }), showCount && count !== undefined && count > 1 && /*#__PURE__*/_jsx(Text, {
-          style: styles.peekCount,
-          children: count
-        })]
-      }), attention ? /*#__PURE__*/_jsx(View, {
-        pointerEvents: "none",
-        testID: testID ? `${testID}-attention` : undefined,
-        style: [styles.peekAttention, {
-          backgroundColor: attention.color
-        }],
-        children: attention.glyph ? /*#__PURE__*/_jsx(Text, {
-          style: styles.peekAttentionGlyph,
-          children: attention.glyph
-        }) : null
-      }) : null]
-    })
-  });
-}
-
-// ============================================================================
-// Expanded Content Wrapper
-// ============================================================================
-
-function ExpandedWrapper({
-  children,
-  onCollapse,
-  progress,
-  width,
-  expandedHeight,
-  isExpanded,
-  style,
-  collapseTestID
-}) {
-  // Animate height from 0 to full height
-  const animatedHeight = progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, expandedHeight]
-  });
-  return /*#__PURE__*/_jsx(Animated.View, {
-    style: [styles.expandedContainer, {
-      width,
-      height: animatedHeight,
-      overflow: "hidden"
-    }, style],
-    children: /*#__PURE__*/_jsxs(View, {
-      style: [styles.expandedInner, {
-        height: expandedHeight
-      }],
-      children: [isExpanded && children, /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: onCollapse,
-        activeOpacity: 0.6,
-        style: styles.collapseButton,
-        accessibilityLabel: "Collapse",
-        accessibilityRole: "button",
-        testID: collapseTestID,
-        children: /*#__PURE__*/_jsx(ChevronUp, {
-          size: 12,
-          color: buoyColors.textMuted,
-          style: {
-            transform: [{
-              rotate: "180deg"
-            }]
-          }
-        })
-      })]
-    })
-  });
-}
-
-// ============================================================================
-// Main Component
-// ============================================================================
-
-export function ExpandablePopover({
-  hasItems,
-  itemCount,
-  showCount = true,
-  width = DEFAULT_WIDTH,
-  children,
-  expandedHeight,
-  onExpandedChange,
-  defaultExpanded = false,
-  collapsedContent,
-  collapsedLabel,
-  attention = null,
-  expandedStyle,
-  persistState = false,
-  storageKey,
-  peekHeight = DEFAULT_PEEK_HEIGHT,
-  testID,
-  collapseTestID
-}) {
-  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
-  const [isStateRestored, setIsStateRestored] = useState(!persistState);
-  const progress = useRef(new Animated.Value(defaultExpanded ? 1 : 0)).current;
-  const hasInitialized = useRef(false);
-
-  // Restore expanded state on mount if persistence is enabled
-  useEffect(() => {
-    if (!persistState || !storageKey) {
-      setIsStateRestored(true);
-      return;
-    }
-    const restoreState = async () => {
-      try {
-        // Dynamic import to avoid circular dependency
-        const {
-          persistentStorage
-        } = await import("../../utils/persistentStorage");
-        const saved = await persistentStorage.getItem(storageKey);
-        if (saved === "true") {
-          setIsExpanded(true);
-          progress.setValue(1);
-        }
-      } catch {
-        // Ignore errors
-      }
-      setIsStateRestored(true);
-    };
-    restoreState();
-  }, [persistState, storageKey, progress]);
-
-  // Persist expanded state when it changes
-  useEffect(() => {
-    if (!persistState || !storageKey || !isStateRestored) return;
-    const persistExpanded = async () => {
-      try {
-        const {
-          persistentStorage
-        } = await import("../../utils/persistentStorage");
-        await persistentStorage.setItem(storageKey, isExpanded ? "true" : "false");
-      } catch {
-        // Ignore errors
-      }
-    };
-    persistExpanded();
-  }, [isExpanded, persistState, storageKey, isStateRestored]);
-
-  // Notify parent of expansion state changes
-  useEffect(() => {
-    onExpandedChange?.(isExpanded);
-  }, [isExpanded, onExpandedChange]);
-
-  // Expand handler
-  const handleExpand = useCallback(() => {
-    setIsExpanded(true);
-    Animated.timing(progress, {
-      toValue: 1,
-      duration: 200,
-      useNativeDriver: false
-    }).start();
-  }, [progress]);
-
-  // Collapse handler
-  const handleCollapse = useCallback(() => {
-    Animated.timing(progress, {
-      toValue: 0,
-      duration: 200,
-      useNativeDriver: false
-    }).start(() => {
-      setIsExpanded(false);
-    });
-  }, [progress]);
-
-  // Initialize animation when items first appear
-  useEffect(() => {
-    if (!isStateRestored) return;
-    if (hasItems && !hasInitialized.current) {
-      hasInitialized.current = true;
-      if (isExpanded) {
-        progress.setValue(1);
-      } else {
-        progress.setValue(0);
-      }
-    } else if (!hasItems) {
-      hasInitialized.current = false;
-      setIsExpanded(false);
-      progress.setValue(0);
-    }
-  }, [hasItems, progress, isStateRestored, isExpanded]);
-
-  // Don't render if no items
-  if (!hasItems) {
-    return null;
-  }
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.container, {
-      height: peekHeight
-    }],
-    children: [/*#__PURE__*/_jsx(View, {
-      style: styles.expandedWrapper,
-      pointerEvents: isExpanded ? "box-none" : "none",
-      children: /*#__PURE__*/_jsx(ExpandedWrapper, {
-        collapseTestID: collapseTestID,
-        onCollapse: handleCollapse,
-        progress: progress,
-        width: width,
-        expandedHeight: expandedHeight,
-        isExpanded: isExpanded,
-        style: expandedStyle,
-        children: children
-      })
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.peekWrapper,
-      pointerEvents: isExpanded ? "none" : "box-none",
-      children: /*#__PURE__*/_jsx(CollapsedPeek, {
-        count: itemCount,
-        showCount: showCount,
-        onPress: handleExpand,
-        progress: progress,
-        width: width,
-        height: peekHeight,
-        customContent: collapsedContent,
-        label: collapsedLabel,
-        testID: testID,
-        attention: attention
-      })
-    })]
-  });
-}
-
-// ============================================================================
-// Styles
-// ============================================================================
-
-const styles = StyleSheet.create({
-  peekAttention: {
-    position: "absolute",
-    top: 2,
-    right: 2,
-    minWidth: 11,
-    height: 11,
-    borderRadius: 6,
-    paddingHorizontal: 2,
-    alignItems: "center",
-    justifyContent: "center",
-    borderWidth: 1.5,
-    borderColor: "#0C0C0C"
-  },
-  peekAttentionGlyph: {
-    color: "#000",
-    fontSize: 8,
-    fontWeight: "800",
-    lineHeight: 9
-  },
-  container: {
-    overflow: "visible",
-    zIndex: 1000
-  },
-  expandedWrapper: {
-    position: "absolute",
-    bottom: 0,
-    left: 0,
-    right: 0,
-    overflow: "visible"
-  },
-  peekWrapper: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
-  },
-  peekContainer: {},
-  peekButton: {
-    borderTopLeftRadius: 6,
-    borderTopRightRadius: 6,
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-    backgroundColor: buoyColors.card,
-    borderTopWidth: 1,
-    borderLeftWidth: 1,
-    borderRightWidth: 1,
-    borderBottomWidth: 0,
-    borderColor: buoyColors.textMuted + "66",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 2
-  },
-  peekCount: {
-    fontSize: 9,
-    fontWeight: "600",
-    color: buoyColors.textMuted,
-    marginLeft: 1
-  },
-  expandedContainer: {
-    backgroundColor: buoyColors.card,
-    borderTopLeftRadius: 6,
-    borderTopRightRadius: 6,
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-    borderTopWidth: 1,
-    borderLeftWidth: 1,
-    borderRightWidth: 1,
-    borderBottomWidth: 0,
-    borderColor: buoyColors.textMuted + "66"
-  },
-  expandedInner: {
-    alignItems: "center",
-    paddingTop: 8,
-    gap: 6
-  },
-  collapseButton: {
-    width: "100%",
-    height: 24,
-    alignItems: "center",
-    justifyContent: "center",
-    marginTop: 3
-  }
-});
+"use strict";import J,{useCallback as B,useEffect as C,useRef as V,useState as D}from"react";import{Animated as m,TouchableOpacity as j,View as y,Text as z,StyleSheet as F}from"react-native";import{ChevronUp as A}from"../../icons/index.js";import{buoyColors as p}from"../gameUI/constants/gameUIColors.js";import{jsx as t,Fragment as G,jsxs as W}from"react/jsx-runtime";const O=28;const U=44;function $({count:r,showCount:h,onPress:f,progress:s,width:a,height:b,customContent:c,label:l,testID:d,attention:i}){const k=s.interpolate({inputRange:[0,.5,1],outputRange:[1,.5,0]});const v=s.interpolate({inputRange:[0,1],outputRange:[1,.9]});return t(m.View,{style:[o.peekContainer,{width:a,opacity:k,transform:[{scale:v}]}],children:W(j,{onPress:f,activeOpacity:.8,style:[o.peekButton,{width:a,height:b}],accessibilityLabel:i?.label?`${l||"Expand options"} \u2014 ${i.label}`:l||`Expand options`,accessibilityRole:"button",testID:d,children:[c||W(G,{children:[t(A,{size:12,color:p.textMuted,strokeWidth:2}),h&&r!==void 0&&r>1&&t(z,{style:o.peekCount,children:r})]}),i?t(y,{pointerEvents:"none",testID:d?`${d}-attention`:void 0,style:[o.peekAttention,{backgroundColor:i.color}],children:i.glyph?t(z,{style:o.peekAttentionGlyph,children:i.glyph}):null}):null]})})}function N({children:r,onCollapse:h,progress:f,width:s,expandedHeight:a,isExpanded:b,style:c,collapseTestID:l}){const d=f.interpolate({inputRange:[0,1],outputRange:[0,a]});return t(m.View,{style:[o.expandedContainer,{width:s,height:d,overflow:"hidden"},c],children:W(y,{style:[o.expandedInner,{height:a}],children:[b&&r,t(j,{onPress:h,activeOpacity:.6,style:o.collapseButton,accessibilityLabel:"Collapse",accessibilityRole:"button",testID:l,children:t(A,{size:12,color:p.textMuted,style:{transform:[{rotate:"180deg"}]}})})]})})}export function ExpandablePopover({hasItems:r,itemCount:h,showCount:f=true,width:s=U,children:a,expandedHeight:b,onExpandedChange:c,defaultExpanded:l=false,collapsedContent:d,collapsedLabel:i,attention:k=null,expandedStyle:v,persistState:g=false,storageKey:u,peekHeight:I=O,testID:P,collapseTestID:S}){const[n,x]=D(l);const[R,L]=D(!g);const e=V(new m.Value(l?1:0)).current;const E=V(false);C(()=>{if(!g||!u){L(true);return}const T=async()=>{try{const{persistentStorage:w}=await import("../../utils/persistentStorage");const M=await w.getItem(u);if(M==="true"){x(true);e.setValue(1)}}catch{}L(true)};T()},[g,u,e]);C(()=>{if(!g||!u||!R)return;const T=async()=>{try{const{persistentStorage:w}=await import("../../utils/persistentStorage");await w.setItem(u,n?"true":"false")}catch{}};T()},[n,g,u,R]);C(()=>{c?.(n)},[n,c]);const _=B(()=>{x(true);m.timing(e,{toValue:1,duration:200,useNativeDriver:false}).start()},[e]);const H=B(()=>{m.timing(e,{toValue:0,duration:200,useNativeDriver:false}).start(()=>{x(false)})},[e]);C(()=>{if(!R)return;if(r&&!E.current){E.current=true;if(n){e.setValue(1)}else{e.setValue(0)}}else if(!r){E.current=false;x(false);e.setValue(0)}},[r,e,R,n]);if(!r){return null}return W(y,{style:[o.container,{height:I}],children:[t(y,{style:o.expandedWrapper,pointerEvents:n?"box-none":"none",children:t(N,{collapseTestID:S,onCollapse:H,progress:e,width:s,expandedHeight:b,isExpanded:n,style:v,children:a})}),t(y,{style:o.peekWrapper,pointerEvents:n?"none":"box-none",children:t($,{count:h,showCount:f,onPress:_,progress:e,width:s,height:I,customContent:d,label:i,testID:P,attention:k})})]})}const o=F.create({peekAttention:{position:"absolute",top:2,right:2,minWidth:11,height:11,borderRadius:6,paddingHorizontal:2,alignItems:"center",justifyContent:"center",borderWidth:1.5,borderColor:"#0C0C0C"},peekAttentionGlyph:{color:"#000",fontSize:8,fontWeight:"800",lineHeight:9},container:{overflow:"visible",zIndex:1e3},expandedWrapper:{position:"absolute",bottom:0,left:0,right:0,overflow:"visible"},peekWrapper:{position:"absolute",top:0,left:0,right:0,bottom:0},peekContainer:{},peekButton:{borderTopLeftRadius:6,borderTopRightRadius:6,borderBottomLeftRadius:0,borderBottomRightRadius:0,backgroundColor:p.card,borderTopWidth:1,borderLeftWidth:1,borderRightWidth:1,borderBottomWidth:0,borderColor:p.textMuted+"66",flexDirection:"row",alignItems:"center",justifyContent:"center",gap:2},peekCount:{fontSize:9,fontWeight:"600",color:p.textMuted,marginLeft:1},expandedContainer:{backgroundColor:p.card,borderTopLeftRadius:6,borderTopRightRadius:6,borderBottomLeftRadius:0,borderBottomRightRadius:0,borderTopWidth:1,borderLeftWidth:1,borderRightWidth:1,borderBottomWidth:0,borderColor:p.textMuted+"66"},expandedInner:{alignItems:"center",paddingTop:8,gap:6},collapseButton:{width:"100%",height:24,alignItems:"center",justifyContent:"center",marginTop:3}});

package/lib/module/ui/components/ExpandedInfoRow.js

@@ -1,103 +1 @@
-"use strict";
-
-/**
- * ExpandedInfoRow
- *
- * Shared primitive for the `label: [badge]` rows inside expanded DevTools cards.
- * Used by both @buoy-gg/storage and @buoy-gg/zustand to keep expanded content
- * visually consistent across tools.
- *
- * @example
- * ```tsx
- * <ExpandedInfoRow label="Storage">
- *   <PillBadge color={color}>MMKV</PillBadge>
- * </ExpandedInfoRow>
- * ```
- */
-
-import { View, Text, StyleSheet } from "react-native";
-import { macOSColors } from "../gameUI/constants/macOSDesignSystemColors.js";
-import { monoFont } from "../fonts.js";
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-export function ExpandedInfoRow({
-  label,
-  children
-}) {
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.row,
-    children: [/*#__PURE__*/_jsxs(Text, {
-      style: styles.label,
-      children: [label, ":"]
-    }), children]
-  });
-}
-
-/**
- * PillBadge — the pill-shaped badge used in expanded card rows.
- * Matches the storage card badge style (rounded-full, with border).
- */
-
-export function PillBadge({
-  color,
-  children,
-  icon,
-  size = "md",
-  testID
-}) {
-  const isSm = size === "sm";
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.pill, isSm && styles.pillSm, {
-      backgroundColor: color + "20",
-      borderColor: color + "40"
-    }],
-    children: [icon && /*#__PURE__*/_jsx(View, {
-      style: styles.pillIcon,
-      children: icon
-    }), /*#__PURE__*/_jsx(Text, {
-      style: [styles.pillText, isSm && styles.pillTextSm, {
-        color
-      }],
-      testID: testID,
-      children: children
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10
-  },
-  label: {
-    fontSize: 10,
-    color: macOSColors.text.muted,
-    fontWeight: "600",
-    minWidth: 70,
-    fontFamily: monoFont
-  },
-  pill: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 999,
-    borderWidth: 1
-  },
-  pillSm: {
-    paddingHorizontal: 5,
-    paddingVertical: 1
-  },
-  pillIcon: {
-    marginRight: 4
-  },
-  pillText: {
-    fontSize: 10,
-    fontWeight: "700",
-    fontFamily: monoFont,
-    letterSpacing: 0.5
-  },
-  pillTextSm: {
-    fontSize: 9,
-    letterSpacing: 0.3
-  }
-});
+"use strict";import{View as l,Text as a,StyleSheet as c}from"react-native";import{macOSColors as f}from"../gameUI/constants/macOSDesignSystemColors.js";import{monoFont as s}from"../fonts.js";import{jsxs as o,jsx as d}from"react/jsx-runtime";export function ExpandedInfoRow({label:e,children:i}){return o(l,{style:t.row,children:[o(a,{style:t.label,children:[e,":"]}),i]})}export function PillBadge({color:e,children:i,icon:r,size:m="md",testID:p}){const n=m==="sm";return o(l,{style:[t.pill,n&&t.pillSm,{backgroundColor:e+"20",borderColor:e+"40"}],children:[r&&d(l,{style:t.pillIcon,children:r}),d(a,{style:[t.pillText,n&&t.pillTextSm,{color:e}],testID:p,children:i})]})}const t=c.create({row:{flexDirection:"row",alignItems:"center",gap:10},label:{fontSize:10,color:f.text.muted,fontWeight:"600",minWidth:70,fontFamily:s},pill:{flexDirection:"row",alignItems:"center",paddingHorizontal:8,paddingVertical:3,borderRadius:999,borderWidth:1},pillSm:{paddingHorizontal:5,paddingVertical:1},pillIcon:{marginRight:4},pillText:{fontSize:10,fontWeight:"700",fontFamily:s,letterSpacing:.5},pillTextSm:{fontSize:9,letterSpacing:.3}});