@buoy-gg/storage 7.0.40 → 7.0.42

package/lib/module/storage/components/StorageKeyRow.js

@@ -1,554 +1 @@
-"use strict";
-
-import { memo } from "react";
-import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
-import { macOSColors, night, CompactRow, TypeBadge, HardDrive, Square, CheckSquare, Edit3, EyeOff, Pin, Trash2, ExpandedInfoRow, PillBadge, monoFont } from "@buoy-gg/shared-ui";
-import { getStorageTypeLabel } from "../utils/storageQueryUtils";
-import { getValueTypeLabel, getValueTypeWithPreview, parseStorageValue } from "../utils/valueType";
-import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
-
-// MMKV Instance color palette - consistent colors per instance
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const INSTANCE_COLORS = [macOSColors.semantic.info,
-// Blue
-macOSColors.semantic.success,
-// Green
-macOSColors.semantic.warning,
-// Orange
-macOSColors.semantic.debug,
-// Purple
-'#FF6B9D',
-// Pink
-'#00D9FF' // Cyan
-];
-
-/**
- * Get consistent color for an MMKV instance based on its ID
- * Uses simple hash to ensure same instance always gets same color
- */
-function getInstanceColor(instanceId) {
-  const hash = instanceId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
-  return INSTANCE_COLORS[hash % INSTANCE_COLORS.length];
-}
-/** Exported for the key DETAIL screen, so card and detail can't disagree
- * about what a status is called or what color it wears. */
-export const getStatusConfig = status => {
-  switch (status) {
-    case "required_present":
-      return {
-        label: "Valid",
-        color: macOSColors.semantic.success,
-        sublabel: "Required"
-      };
-    case "required_missing":
-      return {
-        label: "Missing",
-        color: macOSColors.semantic.error,
-        sublabel: "Required"
-      };
-    case "required_wrong_value":
-      return {
-        label: "Wrong",
-        color: macOSColors.semantic.warning,
-        sublabel: "Invalid value"
-      };
-    case "required_wrong_type":
-      return {
-        label: "Type Error",
-        color: macOSColors.semantic.info,
-        sublabel: "Wrong type"
-      };
-    case "optional_present":
-      return {
-        label: "Set",
-        color: macOSColors.semantic.debug,
-        sublabel: "Optional"
-      };
-    // Runtime data can carry a status the union doesn't know (a stale
-    // snapshot, a newer adapter) — a devtool must render it, not redbox.
-    default:
-      return {
-        label: "Set",
-        color: macOSColors.text.secondary,
-        sublabel: String(status)
-      };
-  }
-};
-const formatValue = value => {
-  if (value === undefined || value === null) {
-    return "undefined";
-  }
-  const str = typeof value === "string" ? value : JSON.stringify(value);
-  return str;
-};
-
-// Memo justified by profiling (tool-bench 2026-07-06): the browser tab
-// renders every key row on each parent render (ScrollView, no
-// virtualization) — memo keeps unchanged keys from re-rendering.
-export const StorageKeyRow = /*#__PURE__*/memo(function StorageKeyRow({
-  storageKey,
-  isExpanded,
-  onPress,
-  isSelectMode = false,
-  isSelected = false,
-  onSelectionChange,
-  eventCount,
-  onViewHistory,
-  onHideKey,
-  isPinned = false,
-  onTogglePin,
-  onEditKey,
-  onToggleKey,
-  onDeleteKey,
-  editBlockedReason
-}) {
-  const canEdit = onEditKey != null && editBlockedReason == null;
-  const config = getStatusConfig(storageKey.status);
-  const hasValue = storageKey.value !== undefined && storageKey.value !== null;
-
-  // Booleans get a dedicated colored badge instead of an inline text preview so
-  // their value is scannable at a glance.
-  const isBoolean = hasValue && typeof storageKey.value === "boolean";
-
-  // Format primary text - show the key
-  const primaryText = storageKey.key;
-
-  // Show storage type as secondary text
-  const storageTypeLabel = getStorageTypeLabel(storageKey.storageType);
-
-  // Shared with the editor screen, so the card and the thing it opens can't
-  // disagree about whether a key holds a container.
-  const parsedValue = parseStorageValue(storageKey.value);
-
-  /** The tree only renders for containers. */
-  const showsTree = parsedValue !== null && typeof parsedValue === "object";
-
-  // Create expanded content for value and storage details
-  const expandedContent = /*#__PURE__*/_jsxs(View, {
-    style: styles.expandedContainer,
-    children: [/*#__PURE__*/_jsx(ExpandedInfoRow, {
-      label: "Storage",
-      children: /*#__PURE__*/_jsx(PillBadge, {
-        color: getStorageTypeColor(storageKey.storageType),
-        children: storageTypeLabel
-      })
-    }), storageKey.storageType === 'mmkv' && storageKey.instanceId && /*#__PURE__*/_jsx(ExpandedInfoRow, {
-      label: "Instance",
-      children: /*#__PURE__*/_jsx(PillBadge, {
-        color: getInstanceColor(storageKey.instanceId),
-        icon: /*#__PURE__*/_jsx(HardDrive, {
-          size: 9,
-          color: getInstanceColor(storageKey.instanceId)
-        }),
-        children: storageKey.instanceId
-      })
-    }), eventCount != null && eventCount > 0 && /*#__PURE__*/_jsxs(ExpandedInfoRow, {
-      label: "Updates",
-      children: [/*#__PURE__*/_jsx(PillBadge, {
-        color: macOSColors.semantic.warning,
-        children: String(eventCount)
-      }), eventCount > 1 && onViewHistory && /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: onViewHistory,
-        testID: "buoy-storage-key-history",
-        accessibilityLabel: `View history for ${storageKey.key}`,
-        accessibilityRole: "button",
-        style: styles.viewHistoryButton,
-        hitSlop: {
-          top: 6,
-          bottom: 6,
-          left: 6,
-          right: 6
-        },
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.viewHistoryText,
-          children: "view history \u2192"
-        })
-      })]
-    }), showsTree ? /*#__PURE__*/_jsx(View, {
-      style: styles.dataViewerContainer,
-      children: /*#__PURE__*/_jsx(DataViewer, {
-        data: parsedValue,
-        title: "",
-        showTypeFilter: true,
-        rawMode: true,
-        initialExpanded: true
-      })
-    }) : /*#__PURE__*/_jsxs(View, {
-      style: styles.expandedRow,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.expandedLabel,
-        children: "Value:"
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.expandedValue,
-        numberOfLines: 3,
-        children: formatValue(storageKey.value) || "undefined"
-      })]
-    }), storageKey.status === "required_wrong_type" && storageKey.expectedType && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.expandedRow,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.expandedLabel,
-          children: "Type:"
-        }), /*#__PURE__*/_jsx(TypeBadge, {
-          type: getValueTypeLabel(storageKey.value)
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.expandedRow,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.expandedLabel,
-          children: "Expected:"
-        }), /*#__PURE__*/_jsx(TypeBadge, {
-          type: storageKey.expectedType
-        })]
-      })]
-    }), storageKey.status === "required_wrong_value" && storageKey.expectedValue && /*#__PURE__*/_jsxs(View, {
-      style: styles.expandedRow,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.expandedLabel,
-        children: "Expected:"
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.expandedExpected,
-        children: String(storageKey.expectedValue)
-      })]
-    }), storageKey.description ? /*#__PURE__*/_jsxs(View, {
-      style: styles.expandedRow,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.expandedLabel,
-        children: "Info:"
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.expandedDescription,
-        children: storageKey.description
-      })]
-    }) : null, editBlockedReason ? /*#__PURE__*/_jsxs(View, {
-      style: styles.expandedRow,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.expandedLabel,
-        children: "Edit:"
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.expandedDescription,
-        children: editBlockedReason
-      })]
-    }) : null, onTogglePin || onHideKey || canEdit ? /*#__PURE__*/_jsxs(View, {
-      style: styles.actionRow,
-      children: [canEdit ? /*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: styles.editButton
-        // One handle for both jobs on purpose: this is the card's single
-        // "change it" affordance, and which of the two it performs is the
-        // key's type, not a different control.
-        ,
-        testID: "buoy-storage-key-edit",
-        accessibilityLabel: isBoolean && onToggleKey ? `Toggle ${storageKey.key}` : `Edit ${storageKey.key}`,
-        accessibilityRole: "button",
-        onPress: () => isBoolean && onToggleKey ? onToggleKey(storageKey) : onEditKey?.(storageKey),
-        hitSlop: {
-          top: 6,
-          bottom: 6,
-          left: 6,
-          right: 6
-        },
-        children: [/*#__PURE__*/_jsx(Edit3, {
-          size: 13,
-          color: night.color.onAccent
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.editButtonText,
-          children: isBoolean && onToggleKey ? "Toggle" : "Edit"
-        })]
-      }) : null, onTogglePin ? /*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: [styles.actionChip, isPinned && styles.actionChipActive],
-        testID: "buoy-storage-key-pin",
-        accessibilityLabel: isPinned ? `Unpin ${storageKey.key}` : `Pin ${storageKey.key} to top`,
-        accessibilityRole: "button",
-        onPress: () => onTogglePin(storageKey.key),
-        hitSlop: {
-          top: 6,
-          bottom: 6,
-          left: 6,
-          right: 6
-        },
-        children: [/*#__PURE__*/_jsx(Pin, {
-          size: 12,
-          active: isPinned,
-          color: night.color.accent
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.actionChipText, {
-            color: night.color.accent
-          }],
-          children: isPinned ? "Unpin" : "Pin to top"
-        })]
-      }) : null, onHideKey ? /*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: styles.actionChip,
-        testID: "buoy-storage-key-hide",
-        accessibilityLabel: `Hide ${storageKey.key} from list`,
-        accessibilityRole: "button",
-        onPress: () => onHideKey(storageKey),
-        hitSlop: {
-          top: 6,
-          bottom: 6,
-          left: 6,
-          right: 6
-        },
-        children: [/*#__PURE__*/_jsx(EyeOff, {
-          size: 12,
-          color: night.color.warning
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.actionChipText, {
-            color: night.color.warning
-          }],
-          children: "Hide from list"
-        })]
-      }) : null, canEdit && onDeleteKey ? /*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: [styles.actionChip, styles.dangerChip],
-        testID: "buoy-storage-key-delete",
-        accessibilityLabel: `Delete key ${storageKey.key}`,
-        accessibilityRole: "button",
-        onPress: () => onDeleteKey(storageKey),
-        hitSlop: {
-          top: 6,
-          bottom: 6,
-          left: 6,
-          right: 6
-        },
-        children: [/*#__PURE__*/_jsx(Trash2, {
-          size: 12,
-          color: night.color.danger
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.actionChipText, {
-            color: night.color.danger
-          }],
-          children: "Delete key"
-        })]
-      }) : null]
-    }) : null]
-  });
-
-  // Handle checkbox press in select mode
-  const handleCheckboxPress = () => {
-    onSelectionChange?.(storageKey, !isSelected);
-  };
-
-  // Create checkbox element for select mode
-  const selectionCheckbox = isSelectMode ? /*#__PURE__*/_jsx(TouchableOpacity, {
-    onPress: handleCheckboxPress,
-    testID: `buoy-storage-checkbox-${storageKey.storageType}-${storageKey.key}`,
-    accessibilityLabel: `Select ${storageKey.key}`,
-    accessibilityRole: "checkbox",
-    accessibilityState: {
-      checked: isSelected
-    },
-    style: styles.checkboxContainer,
-    hitSlop: {
-      top: 8,
-      bottom: 8,
-      left: 8,
-      right: 8
-    },
-    children: isSelected ? /*#__PURE__*/_jsx(CheckSquare, {
-      size: 18,
-      color: night.color.accent
-    }) : /*#__PURE__*/_jsx(Square, {
-      size: 18,
-      color: night.color.textTertiary
-    })
-  }) : null;
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.rowContainer, isSelected && styles.rowContainerSelected],
-    children: [selectionCheckbox, /*#__PURE__*/_jsxs(View, {
-      style: styles.compactRowWrapper,
-      children: [/*#__PURE__*/_jsx(CompactRow, {
-        statusDotColor: config.color,
-        statusLabel: config.label,
-        statusSublabel: config.sublabel,
-        primaryText: primaryText,
-        secondaryText: hasValue ? isBoolean ? getValueTypeLabel(storageKey.value) : getValueTypeWithPreview(storageKey.value) : undefined,
-        secondaryAccessory: isBoolean ? /*#__PURE__*/_jsx(PillBadge, {
-          size: "sm",
-          color: storageKey.value ? macOSColors.semantic.success : macOSColors.semantic.error,
-          children: storageKey.value ? "true" : "false"
-        }) : undefined,
-        expandedContent: expandedContent,
-        isExpanded: isExpanded,
-        expandedGlowColor: config.color,
-        customBadge: /*#__PURE__*/_jsxs(View, {
-          style: styles.badgeRow,
-          children: [isPinned && /*#__PURE__*/_jsx(Pin, {
-            size: 12,
-            active: true,
-            color: night.color.accent
-          }), /*#__PURE__*/_jsx(PillBadge, {
-            color: getStorageTypeColor(storageKey.storageType),
-            children: storageTypeLabel
-          })]
-        }),
-        showChevron: !isSelectMode,
-        onPress: isSelectMode ? handleCheckboxPress : onPress ? () => onPress(storageKey) : undefined,
-        testID: `buoy-storage-row-${storageKey.storageType}-${storageKey.key}`,
-        accessibilityLabel: `${storageKey.storageType} ${storageKey.key}`
-      }), eventCount != null && eventCount > 1 && /*#__PURE__*/_jsx(View, {
-        style: [styles.absCountBadge, isExpanded && styles.absCountBadgeExpanded, {
-          backgroundColor: macOSColors.semantic.warning + "22",
-          borderColor: macOSColors.semantic.warning + "55"
-        }],
-        pointerEvents: "none",
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.absCountText, {
-            color: macOSColors.semantic.warning
-          }],
-          children: String(eventCount)
-        })
-      })]
-    })]
-  });
-});
-
-/** Exported for the key DETAIL screen — same reason as getStatusConfig. */
-export const getStorageTypeColor = storageType => {
-  switch (storageType) {
-    case "mmkv":
-      return macOSColors.semantic.info;
-    case "async":
-      return macOSColors.semantic.warning;
-    case "secure":
-      return macOSColors.semantic.success;
-    default:
-      return macOSColors.text.secondary;
-  }
-};
-const styles = StyleSheet.create({
-  badgeRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  expandedContainer: {
-    gap: 8
-  },
-  expandedRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10
-  },
-  expandedLabel: {
-    fontSize: 10,
-    color: night.color.textTertiary,
-    fontWeight: "600",
-    minWidth: 70,
-    fontFamily: monoFont
-  },
-  expandedValue: {
-    fontSize: 11,
-    color: night.color.textSecondary,
-    fontFamily: monoFont,
-    flex: 1
-  },
-  expandedExpected: {
-    fontSize: 11,
-    color: macOSColors.semantic.warning,
-    fontFamily: monoFont,
-    flex: 1
-  },
-  expandedDescription: {
-    fontSize: 11,
-    color: night.color.textSecondary,
-    flex: 1
-  },
-  dataViewerContainer: {
-    marginTop: 6,
-    marginBottom: 6,
-    backgroundColor: night.color.bg,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    padding: 6
-  },
-  rowContainer: {
-    flexDirection: "row",
-    alignItems: "flex-start"
-  },
-  rowContainerSelected: {
-    backgroundColor: night.color.accentSoft,
-    borderRadius: 8
-  },
-  checkboxContainer: {
-    paddingLeft: 4,
-    paddingRight: 8,
-    paddingTop: 10,
-    alignSelf: "flex-start"
-  },
-  compactRowWrapper: {
-    flex: 1
-  },
-  absCountBadge: {
-    position: "absolute",
-    top: 4,
-    right: 10,
-    paddingHorizontal: 5,
-    paddingVertical: 1,
-    borderRadius: 4,
-    borderWidth: 1,
-    zIndex: 1
-  },
-  // The expanded CompactRow grows its wrapper margin from 3 to 12, so the
-  // badge has to drop with it or it floats above the card border.
-  absCountBadgeExpanded: {
-    top: 13
-  },
-  absCountText: {
-    fontSize: 9,
-    fontWeight: "700",
-    fontFamily: monoFont
-  },
-  actionRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    flexWrap: "wrap",
-    gap: 8,
-    marginTop: 4
-  },
-  actionChip: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    paddingVertical: 6,
-    paddingHorizontal: 10,
-    borderRadius: 6,
-    backgroundColor: night.color.surface,
-    borderWidth: 1,
-    borderColor: night.color.border
-  },
-  dangerChip: {
-    borderColor: night.color.danger + "55"
-  },
-  actionChipActive: {
-    backgroundColor: night.color.accentSoft,
-    borderColor: night.color.accentBorderStrong
-  },
-  /** Filled, and first — the one action in this row that changes anything. */
-  editButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    paddingVertical: 8,
-    paddingHorizontal: 14,
-    borderRadius: 8,
-    backgroundColor: night.color.accent
-  },
-  editButtonText: {
-    color: night.color.onAccent,
-    fontSize: 12,
-    fontWeight: "700"
-  },
-  actionChipText: {
-    fontSize: 11,
-    fontWeight: "600",
-    fontFamily: monoFont
-  },
-  viewHistoryButton: {
-    marginLeft: 4
-  },
-  viewHistoryText: {
-    fontSize: 10,
-    fontWeight: "600",
-    fontFamily: monoFont,
-    color: night.color.accent
-  }
-});
+"use strict";import{memo as j}from"react";import{View as a,Text as l,StyleSheet as N,TouchableOpacity as s}from"react-native";import{macOSColors as r,night as n,CompactRow as U,TypeBadge as B,HardDrive as G,Square as J,CheckSquare as M,Edit3 as Q,EyeOff as X,Pin as W,Trash2 as Y,ExpandedInfoRow as I,PillBadge as h,monoFont as p}from"@buoy-gg/shared-ui";import{getStorageTypeLabel as Z}from"../utils/storageQueryUtils";import{getValueTypeLabel as _,getValueTypeWithPreview as K,parseStorageValue as ee}from"../utils/valueType";import{DataViewer as te}from"@buoy-gg/shared-ui/dataViewer";import{jsx as t,jsxs as i,Fragment as oe}from"react/jsx-runtime";const F=[r.semantic.info,r.semantic.success,r.semantic.warning,r.semantic.debug,"#FF6B9D","#00D9FF"];function $(c){const e=c.split("").reduce((f,x)=>f+x.charCodeAt(0),0);return F[e%F.length]}export const getStatusConfig=c=>{switch(c){case"required_present":return{label:"Valid",color:r.semantic.success,sublabel:"Required"};case"required_missing":return{label:"Missing",color:r.semantic.error,sublabel:"Required"};case"required_wrong_value":return{label:"Wrong",color:r.semantic.warning,sublabel:"Invalid value"};case"required_wrong_type":return{label:"Type Error",color:r.semantic.info,sublabel:"Wrong type"};case"optional_present":return{label:"Set",color:r.semantic.debug,sublabel:"Optional"};default:return{label:"Set",color:r.text.secondary,sublabel:String(c)}}};const ne=c=>{if(c===void 0||c===null){return"undefined"}const e=typeof c==="string"?c:JSON.stringify(c);return e};export const StorageKeyRow=j(function c({storageKey:e,isExpanded:f,onPress:x,isSelectMode:w=false,isSelected:m=false,onSelectionChange:q,eventCount:d,onViewHistory:D,onHideKey:C,isPinned:u=false,onTogglePin:S,onEditKey:L,onToggleKey:y,onDeleteKey:z,editBlockedReason:T}){const k=L!=null&&T==null;const g=getStatusConfig(e.status);const v=e.value!==void 0&&e.value!==null;const b=v&&typeof e.value==="boolean";const O=e.key;const V=Z(e.storageType);const R=ee(e.value);const A=R!==null&&typeof R==="object";const H=i(a,{style:o.expandedContainer,children:[t(I,{label:"Storage",children:t(h,{color:getStorageTypeColor(e.storageType),children:V})}),e.storageType==="mmkv"&&e.instanceId&&t(I,{label:"Instance",children:t(h,{color:$(e.instanceId),icon:t(G,{size:9,color:$(e.instanceId)}),children:e.instanceId})}),d!=null&&d>0&&i(I,{label:"Updates",children:[t(h,{color:r.semantic.warning,children:String(d)}),d>1&&D&&t(s,{onPress:D,testID:"buoy-storage-key-history",accessibilityLabel:`View history for ${e.key}`,accessibilityRole:"button",style:o.viewHistoryButton,hitSlop:{top:6,bottom:6,left:6,right:6},children:t(l,{style:o.viewHistoryText,children:"view history \u2192"})})]}),A?t(a,{style:o.dataViewerContainer,children:t(te,{data:R,title:"",showTypeFilter:true,rawMode:true,initialExpanded:true})}):i(a,{style:o.expandedRow,children:[t(l,{style:o.expandedLabel,children:"Value:"}),t(l,{style:o.expandedValue,numberOfLines:3,children:ne(e.value)||"undefined"})]}),e.status==="required_wrong_type"&&e.expectedType&&i(oe,{children:[i(a,{style:o.expandedRow,children:[t(l,{style:o.expandedLabel,children:"Type:"}),t(B,{type:_(e.value)})]}),i(a,{style:o.expandedRow,children:[t(l,{style:o.expandedLabel,children:"Expected:"}),t(B,{type:e.expectedType})]})]}),e.status==="required_wrong_value"&&e.expectedValue&&i(a,{style:o.expandedRow,children:[t(l,{style:o.expandedLabel,children:"Expected:"}),t(l,{style:o.expandedExpected,children:String(e.expectedValue)})]}),e.description?i(a,{style:o.expandedRow,children:[t(l,{style:o.expandedLabel,children:"Info:"}),t(l,{style:o.expandedDescription,children:e.description})]}):null,T?i(a,{style:o.expandedRow,children:[t(l,{style:o.expandedLabel,children:"Edit:"}),t(l,{style:o.expandedDescription,children:T})]}):null,S||C||k?i(a,{style:o.actionRow,children:[k?i(s,{style:o.editButton,testID:"buoy-storage-key-edit",accessibilityLabel:b&&y?`Toggle ${e.key}`:`Edit ${e.key}`,accessibilityRole:"button",onPress:()=>b&&y?y(e):L?.(e),hitSlop:{top:6,bottom:6,left:6,right:6},children:[t(Q,{size:13,color:n.color.onAccent}),t(l,{style:o.editButtonText,children:b&&y?"Toggle":"Edit"})]}):null,S?i(s,{style:[o.actionChip,u&&o.actionChipActive],testID:"buoy-storage-key-pin",accessibilityLabel:u?`Unpin ${e.key}`:`Pin ${e.key} to top`,accessibilityRole:"button",onPress:()=>S(e.key),hitSlop:{top:6,bottom:6,left:6,right:6},children:[t(W,{size:12,active:u,color:n.color.accent}),t(l,{style:[o.actionChipText,{color:n.color.accent}],children:u?"Unpin":"Pin to top"})]}):null,C?i(s,{style:o.actionChip,testID:"buoy-storage-key-hide",accessibilityLabel:`Hide ${e.key} from list`,accessibilityRole:"button",onPress:()=>C(e),hitSlop:{top:6,bottom:6,left:6,right:6},children:[t(X,{size:12,color:n.color.warning}),t(l,{style:[o.actionChipText,{color:n.color.warning}],children:"Hide from list"})]}):null,k&&z?i(s,{style:[o.actionChip,o.dangerChip],testID:"buoy-storage-key-delete",accessibilityLabel:`Delete key ${e.key}`,accessibilityRole:"button",onPress:()=>z(e),hitSlop:{top:6,bottom:6,left:6,right:6},children:[t(Y,{size:12,color:n.color.danger}),t(l,{style:[o.actionChipText,{color:n.color.danger}],children:"Delete key"})]}):null]}):null]});const E=()=>{q?.(e,!m)};const P=w?t(s,{onPress:E,testID:`buoy-storage-checkbox-${e.storageType}-${e.key}`,accessibilityLabel:`Select ${e.key}`,accessibilityRole:"checkbox",accessibilityState:{checked:m},style:o.checkboxContainer,hitSlop:{top:8,bottom:8,left:8,right:8},children:m?t(M,{size:18,color:n.color.accent}):t(J,{size:18,color:n.color.textTertiary})}):null;return i(a,{style:[o.rowContainer,m&&o.rowContainerSelected],children:[P,i(a,{style:o.compactRowWrapper,children:[t(U,{statusDotColor:g.color,statusLabel:g.label,statusSublabel:g.sublabel,primaryText:O,secondaryText:v?b?_(e.value):K(e.value):void 0,secondaryAccessory:b?t(h,{size:"sm",color:e.value?r.semantic.success:r.semantic.error,children:e.value?"true":"false"}):void 0,expandedContent:H,isExpanded:f,expandedGlowColor:g.color,customBadge:i(a,{style:o.badgeRow,children:[u&&t(W,{size:12,active:true,color:n.color.accent}),t(h,{color:getStorageTypeColor(e.storageType),children:V})]}),showChevron:!w,onPress:w?E:x?()=>x(e):void 0,testID:`buoy-storage-row-${e.storageType}-${e.key}`,accessibilityLabel:`${e.storageType} ${e.key}`}),d!=null&&d>1&&t(a,{style:[o.absCountBadge,f&&o.absCountBadgeExpanded,{backgroundColor:r.semantic.warning+"22",borderColor:r.semantic.warning+"55"}],pointerEvents:"none",children:t(l,{style:[o.absCountText,{color:r.semantic.warning}],children:String(d)})})]})]})});export const getStorageTypeColor=c=>{switch(c){case"mmkv":return r.semantic.info;case"async":return r.semantic.warning;case"secure":return r.semantic.success;default:return r.text.secondary}};const o=N.create({badgeRow:{flexDirection:"row",alignItems:"center",gap:6},expandedContainer:{gap:8},expandedRow:{flexDirection:"row",alignItems:"center",gap:10},expandedLabel:{fontSize:10,color:n.color.textTertiary,fontWeight:"600",minWidth:70,fontFamily:p},expandedValue:{fontSize:11,color:n.color.textSecondary,fontFamily:p,flex:1},expandedExpected:{fontSize:11,color:r.semantic.warning,fontFamily:p,flex:1},expandedDescription:{fontSize:11,color:n.color.textSecondary,flex:1},dataViewerContainer:{marginTop:6,marginBottom:6,backgroundColor:n.color.bg,borderRadius:6,borderWidth:1,borderColor:n.color.border,padding:6},rowContainer:{flexDirection:"row",alignItems:"flex-start"},rowContainerSelected:{backgroundColor:n.color.accentSoft,borderRadius:8},checkboxContainer:{paddingLeft:4,paddingRight:8,paddingTop:10,alignSelf:"flex-start"},compactRowWrapper:{flex:1},absCountBadge:{position:"absolute",top:4,right:10,paddingHorizontal:5,paddingVertical:1,borderRadius:4,borderWidth:1,zIndex:1},absCountBadgeExpanded:{top:13},absCountText:{fontSize:9,fontWeight:"700",fontFamily:p},actionRow:{flexDirection:"row",alignItems:"center",flexWrap:"wrap",gap:8,marginTop:4},actionChip:{flexDirection:"row",alignItems:"center",gap:6,paddingVertical:6,paddingHorizontal:10,borderRadius:6,backgroundColor:n.color.surface,borderWidth:1,borderColor:n.color.border},dangerChip:{borderColor:n.color.danger+"55"},actionChipActive:{backgroundColor:n.color.accentSoft,borderColor:n.color.accentBorderStrong},editButton:{flexDirection:"row",alignItems:"center",gap:6,paddingVertical:8,paddingHorizontal:14,borderRadius:8,backgroundColor:n.color.accent},editButtonText:{color:n.color.onAccent,fontSize:12,fontWeight:"700"},actionChipText:{fontSize:11,fontWeight:"600",fontFamily:p},viewHistoryButton:{marginLeft:4},viewHistoryText:{fontSize:10,fontWeight:"600",fontFamily:p,color:n.color.accent}});