@buoy-gg/storage 7.0.40 → 7.0.42

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

@@ -1,577 +1 @@
-"use strict";
-
-/**
- * One storage key, on a screen of its own — the React Query detail-screen
- * shape (and the Zustand tool's twin), pointed at a stored value.
- *
- * Tapping a key card opens this instead of expanding in place. Top to bottom:
- *
- *   1. VALUE EDITOR — the shared LiveExplorer. No draft, no Save: an edit
- *      re-serializes the whole value and writes it as you make it. Typing
- *      commits on a short debounce (~300ms, flushed on blur) so a word is one
- *      storage write, not one per keystroke — storage writes hit disk and
- *      land in the events timeline, which is the one way this tool differs
- *      from RQ's unlogged cache writes. A scalar key is just the root leaf's
- *      input; a boolean key is a one-tap toggle.
- *   2. KEY DETAILS — what the expanded card used to say: status, backend,
- *      MMKV instance, updates (with the road to history), schema diagnostics.
- *   3. RAW VALUE — the serialized string exactly as the backend holds it.
- *   4. The card's housekeeping actions: pin, hide, delete.
- *
- * THE ROUND-TRIP WRINKLE zustand doesn't have: a storage write is async —
- * write, device event, snapshot, refreshed prop. Between an edit and its
- * echo, `storageKey.value` is STALE, so basing the next edit on the prop
- * would silently revert the previous one (edit qty, then name, and qty snaps
- * back). `lastWrittenRef` holds the most recent written document and is the
- * base for every edit until the prop catches up to it — last-write-wins
- * against the app, exactly once, and never against the editor itself.
- */
-
-import { useCallback, useMemo, useRef, useState } from "react";
-import { Alert, ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { EyeOff, FileJson, HardDrive, night, macOSColors, Pin, PillBadge, Trash2, TypeBadge, useSafeAreaInsets, monoFont } from "@buoy-gg/shared-ui";
-import { DataViewer, LiveExplorer, ValueEditModal, updateNestedDataByPath, deleteNestedDataByPath } from "@buoy-gg/shared-ui/dataViewer";
-import { getStorageTypeLabel } from "../utils/storageQueryUtils";
-import { getValueTypeLabel, parseStorageValue } from "../utils/valueType";
-import { getStatusConfig, getStorageTypeColor } from "./StorageKeyRow";
-
-/** How long typed edits coalesce before the single write fires. */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const TYPING_COMMIT_MS = 300;
-const DETAIL_ID = "buoy-storage-detail";
-function detailExplorerTestID(dataPath) {
-  const slug = part => part.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
-  return dataPath.length === 0 ? `${DETAIL_ID}-explorer-root` : `${DETAIL_ID}-explorer-${dataPath.map(slug).filter(Boolean).join("-")}`;
-}
-
-/** Same MMKV instance-color rule the card uses. */
-const INSTANCE_COLORS = [macOSColors.semantic.info, macOSColors.semantic.success, macOSColors.semantic.warning, macOSColors.semantic.debug, "#FF6B9D", "#00D9FF"];
-function getInstanceColor(instanceId) {
-  const hash = instanceId.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
-  return INSTANCE_COLORS[hash % INSTANCE_COLORS.length];
-}
-export function StorageKeyDetailScreen({
-  storageKey,
-  editBlockedReason,
-  eventCount,
-  onSave,
-  onViewHistory,
-  onDeleteKey,
-  onHideKey,
-  isPinned = false,
-  onTogglePin,
-  applySafeAreaInset
-}) {
-  const insets = useSafeAreaInsets();
-  const bottomInset = applySafeAreaInset ? insets.bottom : 0;
-  const canEdit = editBlockedReason == null;
-  const config = getStatusConfig(storageKey.status);
-  const storageTypeLabel = getStorageTypeLabel(storageKey.storageType);
-  const [rawOpen, setRawOpen] = useState(false);
-  // Force the explorer to re-sync focused inputs after a Raw-hatch apply.
-  const [rawVersion, setRawVersion] = useState(0);
-
-  /**
-   * The most recent document THIS screen wrote, until the refreshed prop
-   * catches up to it — see the module docstring's round-trip wrinkle. Held
-   * as its serialized form so "caught up" is one string compare against the
-   * same serialization the write used.
-   */
-  const lastWrittenRef = useRef(null);
-  const propParsed = useMemo(() => parseStorageValue(storageKey.value), [storageKey.value]);
-  const propRaw = typeof storageKey.value === "string" ? storageKey.value : JSON.stringify(storageKey.value);
-  if (lastWrittenRef.current && lastWrittenRef.current.raw === propRaw) {
-    // The device echoed our write back — the prop is current again.
-    lastWrittenRef.current = null;
-  }
-  const baseValue = lastWrittenRef.current ? lastWrittenRef.current.value : propParsed;
-  const write = useCallback(next => {
-    // A string is stored AS ITSELF. `JSON.stringify` on a string adds
-    // quotes the backend keeps (AsyncStorage) or shows natively (MMKV), and
-    // they compound on every edit: "hello" → "\"hello\"" → ... The old
-    // scalar editor had this rule (serializeScalar); the live editor must
-    // keep it, and it matches propRaw above, so an echo still reads as
-    // caught up.
-    const raw = typeof next === "string" ? next : JSON.stringify(next);
-    lastWrittenRef.current = {
-      raw,
-      value: next
-    };
-    onSave(raw).catch(e => {
-      // The write was refused (the Pro gate, a dead backend) — the base
-      // must fall back to what's actually stored, or the tree keeps
-      // showing an edit that never landed.
-      lastWrittenRef.current = null;
-      Alert.alert("Couldn't save", e instanceof Error ? e.message : String(e));
-    });
-  }, [onSave]);
-  const baseRef = useRef(baseValue);
-  baseRef.current = baseValue;
-  const writer = useMemo(() => {
-    if (!canEdit) return undefined;
-    return {
-      update: (path, value) => {
-        const next = path.length === 0 ? value : updateNestedDataByPath(baseRef.current, path, value);
-        write(next);
-      },
-      remove: path => {
-        if (path.length === 0) return;
-        write(deleteNestedDataByPath(baseRef.current, path));
-      }
-      // Storage replaces the whole key on every write, so any node may go.
-    };
-  }, [canEdit, write]);
-  const showHousekeeping = onTogglePin || onHideKey || canEdit && onDeleteKey;
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.screen,
-    children: [/*#__PURE__*/_jsx(View, {
-      testID: `${DETAIL_ID}-key`,
-      accessibilityLabel: storageKey.key
-    }), /*#__PURE__*/_jsxs(ScrollView, {
-      testID: `${DETAIL_ID}-scroll`,
-      style: styles.scroll,
-      contentContainerStyle: [styles.scrollContent, {
-        paddingBottom: 24 + bottomInset
-      }],
-      keyboardShouldPersistTaps: "handled",
-      children: [/*#__PURE__*/_jsx(View, {
-        style: styles.section,
-        children: /*#__PURE__*/_jsxs(View, {
-          style: styles.editorContainer,
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.sectionHeaderRow,
-            children: [/*#__PURE__*/_jsx(Text, {
-              testID: `${DETAIL_ID}-editor-header`,
-              style: styles.sectionHeaderAccentText,
-              children: "Value Editor"
-            }), canEdit ? /*#__PURE__*/_jsxs(TouchableOpacity, {
-              onPress: () => setRawOpen(true),
-              testID: `${DETAIL_ID}-raw`,
-              accessibilityRole: "button",
-              accessibilityLabel: "Edit raw JSON",
-              style: styles.rawButton,
-              hitSlop: {
-                top: 6,
-                bottom: 6,
-                left: 6,
-                right: 6
-              },
-              children: [/*#__PURE__*/_jsx(FileJson, {
-                size: 13,
-                color: night.color.accent
-              }), /*#__PURE__*/_jsx(Text, {
-                style: styles.rawButtonText,
-                children: "Raw"
-              })]
-            }) : null]
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.sectionBody,
-            children: [/*#__PURE__*/_jsx(LiveExplorer, {
-              editable: canEdit,
-              label: "Value",
-              value: baseValue,
-              defaultExpanded: ["Value"],
-              writer: writer,
-              dataVersion: rawVersion,
-              testIDForPath: detailExplorerTestID,
-              debounceMs: TYPING_COMMIT_MS
-            }), canEdit ? /*#__PURE__*/_jsx(Text, {
-              style: styles.editorHint,
-              children: "Edits write to the device as you make them \u2014 undo lives in the key's history."
-            }) : /*#__PURE__*/_jsx(Text, {
-              style: styles.blockedText,
-              testID: `${DETAIL_ID}-edit-blocked`,
-              children: editBlockedReason
-            })]
-          })]
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.section,
-        children: /*#__PURE__*/_jsxs(View, {
-          style: styles.infoContainer,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.sectionHeaderPlain,
-            children: "Key Details"
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.infoBody,
-            children: [/*#__PURE__*/_jsxs(View, {
-              style: styles.infoRow,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.infoLabel,
-                children: "Status:"
-              }), /*#__PURE__*/_jsx(PillBadge, {
-                color: config.color,
-                testID: `${DETAIL_ID}-status`,
-                children: config.label
-              }), /*#__PURE__*/_jsx(Text, {
-                style: styles.infoDim,
-                children: config.sublabel
-              })]
-            }), /*#__PURE__*/_jsxs(View, {
-              style: styles.infoRow,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.infoLabel,
-                children: "Storage:"
-              }), /*#__PURE__*/_jsx(PillBadge, {
-                color: getStorageTypeColor(storageKey.storageType),
-                testID: `${DETAIL_ID}-backend`,
-                children: storageTypeLabel
-              }), /*#__PURE__*/_jsx(Text, {
-                style: styles.infoDim,
-                children: getValueTypeLabel(storageKey.value)
-              })]
-            }), storageKey.storageType === "mmkv" && storageKey.instanceId && /*#__PURE__*/_jsxs(View, {
-              style: styles.infoRow,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.infoLabel,
-                children: "Instance:"
-              }), /*#__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(View, {
-              style: styles.infoRow,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.infoLabel,
-                children: "Updates:"
-              }), /*#__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.inlineLinkButton,
-                hitSlop: {
-                  top: 6,
-                  bottom: 6,
-                  left: 6,
-                  right: 6
-                },
-                children: /*#__PURE__*/_jsx(Text, {
-                  style: styles.inlineLinkText,
-                  children: "view history \u2192"
-                })
-              })]
-            }), storageKey.status === "required_wrong_type" && storageKey.expectedType && /*#__PURE__*/_jsxs(View, {
-              style: styles.infoRow,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.infoLabel,
-                children: "Expected:"
-              }), /*#__PURE__*/_jsx(TypeBadge, {
-                type: storageKey.expectedType
-              }), /*#__PURE__*/_jsxs(Text, {
-                style: styles.infoDim,
-                children: ["got ", getValueTypeLabel(storageKey.value)]
-              })]
-            }), storageKey.status === "required_wrong_value" && storageKey.expectedValue && /*#__PURE__*/_jsxs(View, {
-              style: styles.infoRow,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.infoLabel,
-                children: "Expected:"
-              }), /*#__PURE__*/_jsx(Text, {
-                style: styles.infoExpected,
-                children: String(storageKey.expectedValue)
-              })]
-            }), storageKey.description ? /*#__PURE__*/_jsxs(View, {
-              style: styles.infoRow,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.infoLabel,
-                children: "Info:"
-              }), /*#__PURE__*/_jsx(Text, {
-                style: styles.infoDescription,
-                children: storageKey.description
-              })]
-            }) : null]
-          })]
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.section,
-        children: /*#__PURE__*/_jsxs(View, {
-          style: styles.infoContainer,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.sectionHeaderPlain,
-            children: "Value Explorer"
-          }), /*#__PURE__*/_jsx(View, {
-            style: styles.viewerBody,
-            testID: `${DETAIL_ID}-viewer`,
-            children: baseValue !== null && typeof baseValue === "object" ? /*#__PURE__*/_jsx(DataViewer, {
-              title: "",
-              data: baseValue,
-              showTypeFilter: true,
-              rawMode: true,
-              initialExpanded: false
-            }) : /*#__PURE__*/_jsx(Text, {
-              style: styles.rawValueText,
-              selectable: true,
-              children: propRaw ?? "undefined"
-            })
-          })]
-        })
-      }), showHousekeeping ? /*#__PURE__*/_jsxs(View, {
-        style: styles.actionRow,
-        children: [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]
-    }), rawOpen && canEdit ? /*#__PURE__*/_jsx(ValueEditModal, {
-      path: [],
-      value: baseValue,
-      onSave: next => {
-        write(next);
-        setRawVersion(v => v + 1);
-        setRawOpen(false);
-      },
-      onCancel: () => setRawOpen(false),
-      saveLabel: "Apply",
-      testIDPrefix: "buoy-storage-value"
-    }) : null]
-  });
-}
-const styles = StyleSheet.create({
-  screen: {
-    flex: 1,
-    minHeight: 0
-    // Transparent — this is the modal's body, and the modal paints its own
-    // background (the same contract as the Zustand detail screen).
-  },
-  scroll: {
-    flex: 1
-  },
-  scrollContent: {
-    paddingHorizontal: 8,
-    paddingTop: 8
-  },
-  section: {
-    marginBottom: 16
-  },
-  editorContainer: {
-    minWidth: 200,
-    backgroundColor: night.color.surface,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: night.color.accent + "4D",
-    overflow: "hidden",
-    shadowColor: night.color.accent,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 6
-  },
-  sectionHeaderRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    backgroundColor: night.color.accent + "1A",
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: night.color.accent + "33"
-  },
-  sectionHeaderAccentText: {
-    fontWeight: "600",
-    fontSize: 12,
-    color: night.color.accent,
-    letterSpacing: 0.5,
-    textTransform: "uppercase",
-    fontFamily: monoFont
-  },
-  rawButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4
-  },
-  rawButtonText: {
-    color: night.color.accent,
-    fontSize: 11,
-    fontWeight: "700"
-  },
-  sectionBody: {
-    padding: 8
-  },
-  editorHint: {
-    color: night.color.textTertiary,
-    fontSize: 10,
-    paddingTop: 8,
-    paddingHorizontal: 4,
-    lineHeight: 14
-  },
-  blockedText: {
-    color: night.color.textSecondary,
-    fontSize: 12,
-    padding: 12,
-    lineHeight: 18
-  },
-  infoContainer: {
-    minWidth: 200,
-    backgroundColor: night.color.surface,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    overflow: "hidden"
-  },
-  sectionHeaderPlain: {
-    backgroundColor: night.color.surfaceElevated,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    fontWeight: "600",
-    fontSize: 12,
-    color: night.color.textSecondary,
-    borderBottomWidth: 1,
-    borderBottomColor: night.color.border,
-    letterSpacing: 0.5,
-    textTransform: "uppercase",
-    fontFamily: monoFont
-  },
-  infoBody: {
-    padding: 12,
-    gap: 10
-  },
-  infoRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  infoLabel: {
-    fontSize: 10,
-    color: night.color.textTertiary,
-    fontWeight: "600",
-    minWidth: 64,
-    fontFamily: monoFont
-  },
-  infoDim: {
-    color: night.color.textTertiary,
-    fontSize: 10,
-    fontFamily: monoFont
-  },
-  infoExpected: {
-    fontSize: 11,
-    color: macOSColors.semantic.warning,
-    fontFamily: monoFont,
-    flex: 1
-  },
-  infoDescription: {
-    fontSize: 11,
-    color: night.color.textSecondary,
-    flex: 1
-  },
-  rawValueText: {
-    color: night.color.textSecondary,
-    fontSize: 11,
-    fontFamily: monoFont,
-    lineHeight: 16,
-    padding: 12
-  },
-  viewerBody: {
-    backgroundColor: night.color.bg,
-    minHeight: 48
-  },
-  inlineLinkButton: {
-    marginLeft: 4
-  },
-  inlineLinkText: {
-    fontSize: 10,
-    fontWeight: "600",
-    fontFamily: monoFont,
-    color: night.color.accent
-  },
-  actionRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    flexWrap: "wrap",
-    gap: 8,
-    paddingHorizontal: 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
-  },
-  actionChipText: {
-    fontSize: 11,
-    fontWeight: "600",
-    fontFamily: monoFont
-  }
-});
+"use strict";import{useCallback as q,useMemo as B,useRef as H,useState as V}from"react";import{Alert as G,ScrollView as Y,StyleSheet as Q,Text as n,TouchableOpacity as m,View as l}from"react-native";import{EyeOff as X,FileJson as Z,HardDrive as K,night as i,macOSColors as b,Pin as ee,PillBadge as C,Trash2 as te,TypeBadge as oe,useSafeAreaInsets as ie,monoFont as h}from"@buoy-gg/shared-ui";import{DataViewer as ne,LiveExplorer as re,ValueEditModal as le,updateNestedDataByPath as ce,deleteNestedDataByPath as ae}from"@buoy-gg/shared-ui/dataViewer";import{getStorageTypeLabel as se}from"../utils/storageQueryUtils";import{getValueTypeLabel as E,parseStorageValue as de}from"../utils/valueType";import{getStatusConfig as he,getStorageTypeColor as fe}from"./StorageKeyRow";import{jsx as t,jsxs as r}from"react/jsx-runtime";const ue=300;const a="buoy-storage-detail";function pe(o){const y=s=>s.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"");return o.length===0?`${a}-explorer-root`:`${a}-explorer-${o.map(y).filter(Boolean).join("-")}`}const $=[b.semantic.info,b.semantic.success,b.semantic.warning,b.semantic.debug,"#FF6B9D","#00D9FF"];function F(o){const y=o.split("").reduce((s,w)=>s+w.charCodeAt(0),0);return $[y%$.length]}export function StorageKeyDetailScreen({storageKey:o,editBlockedReason:y,eventCount:s,onSave:w,onViewHistory:L,onDeleteKey:T,onHideKey:D,isPinned:x=false,onTogglePin:k,applySafeAreaInset:W}){const O=ie();const P=W?O.bottom:0;const d=y==null;const I=he(o.status);const A=se(o.storageType);const[_,R]=V(false);const[N,j]=V(0);const f=H(null);const M=B(()=>de(o.value),[o.value]);const z=typeof o.value==="string"?o.value:JSON.stringify(o.value);if(f.current&&f.current.raw===z){f.current=null}const u=f.current?f.current.value:M;const S=q(c=>{const p=typeof c==="string"?c:JSON.stringify(c);f.current={raw:p,value:c};w(p).catch(g=>{f.current=null;G.alert("Couldn't save",g instanceof Error?g.message:String(g))})},[w]);const v=H(u);v.current=u;const J=B(()=>{if(!d)return void 0;return{update:(c,p)=>{const g=c.length===0?p:ce(v.current,c,p);S(g)},remove:c=>{if(c.length===0)return;S(ae(v.current,c))}}},[d,S]);const U=k||D||d&&T;return r(l,{style:e.screen,children:[t(l,{testID:`${a}-key`,accessibilityLabel:o.key}),r(Y,{testID:`${a}-scroll`,style:e.scroll,contentContainerStyle:[e.scrollContent,{paddingBottom:24+P}],keyboardShouldPersistTaps:"handled",children:[t(l,{style:e.section,children:r(l,{style:e.editorContainer,children:[r(l,{style:e.sectionHeaderRow,children:[t(n,{testID:`${a}-editor-header`,style:e.sectionHeaderAccentText,children:"Value Editor"}),d?r(m,{onPress:()=>R(true),testID:`${a}-raw`,accessibilityRole:"button",accessibilityLabel:"Edit raw JSON",style:e.rawButton,hitSlop:{top:6,bottom:6,left:6,right:6},children:[t(Z,{size:13,color:i.color.accent}),t(n,{style:e.rawButtonText,children:"Raw"})]}):null]}),r(l,{style:e.sectionBody,children:[t(re,{editable:d,label:"Value",value:u,defaultExpanded:["Value"],writer:J,dataVersion:N,testIDForPath:pe,debounceMs:ue}),d?t(n,{style:e.editorHint,children:"Edits write to the device as you make them \u2014 undo lives in the key's history."}):t(n,{style:e.blockedText,testID:`${a}-edit-blocked`,children:y})]})]})}),t(l,{style:e.section,children:r(l,{style:e.infoContainer,children:[t(n,{style:e.sectionHeaderPlain,children:"Key Details"}),r(l,{style:e.infoBody,children:[r(l,{style:e.infoRow,children:[t(n,{style:e.infoLabel,children:"Status:"}),t(C,{color:I.color,testID:`${a}-status`,children:I.label}),t(n,{style:e.infoDim,children:I.sublabel})]}),r(l,{style:e.infoRow,children:[t(n,{style:e.infoLabel,children:"Storage:"}),t(C,{color:fe(o.storageType),testID:`${a}-backend`,children:A}),t(n,{style:e.infoDim,children:E(o.value)})]}),o.storageType==="mmkv"&&o.instanceId&&r(l,{style:e.infoRow,children:[t(n,{style:e.infoLabel,children:"Instance:"}),t(C,{color:F(o.instanceId),icon:t(K,{size:9,color:F(o.instanceId)}),children:o.instanceId})]}),s!=null&&s>0&&r(l,{style:e.infoRow,children:[t(n,{style:e.infoLabel,children:"Updates:"}),t(C,{color:b.semantic.warning,children:String(s)}),s>1&&L&&t(m,{onPress:L,testID:"buoy-storage-key-history",accessibilityLabel:`View history for ${o.key}`,accessibilityRole:"button",style:e.inlineLinkButton,hitSlop:{top:6,bottom:6,left:6,right:6},children:t(n,{style:e.inlineLinkText,children:"view history \u2192"})})]}),o.status==="required_wrong_type"&&o.expectedType&&r(l,{style:e.infoRow,children:[t(n,{style:e.infoLabel,children:"Expected:"}),t(oe,{type:o.expectedType}),r(n,{style:e.infoDim,children:["got ",E(o.value)]})]}),o.status==="required_wrong_value"&&o.expectedValue&&r(l,{style:e.infoRow,children:[t(n,{style:e.infoLabel,children:"Expected:"}),t(n,{style:e.infoExpected,children:String(o.expectedValue)})]}),o.description?r(l,{style:e.infoRow,children:[t(n,{style:e.infoLabel,children:"Info:"}),t(n,{style:e.infoDescription,children:o.description})]}):null]})]})}),t(l,{style:e.section,children:r(l,{style:e.infoContainer,children:[t(n,{style:e.sectionHeaderPlain,children:"Value Explorer"}),t(l,{style:e.viewerBody,testID:`${a}-viewer`,children:u!==null&&typeof u==="object"?t(ne,{title:"",data:u,showTypeFilter:true,rawMode:true,initialExpanded:false}):t(n,{style:e.rawValueText,selectable:true,children:z??"undefined"})})]})}),U?r(l,{style:e.actionRow,children:[k?r(m,{style:[e.actionChip,x&&e.actionChipActive],testID:"buoy-storage-key-pin",accessibilityLabel:x?`Unpin ${o.key}`:`Pin ${o.key} to top`,accessibilityRole:"button",onPress:()=>k(o.key),hitSlop:{top:6,bottom:6,left:6,right:6},children:[t(ee,{size:12,active:x,color:i.color.accent}),t(n,{style:[e.actionChipText,{color:i.color.accent}],children:x?"Unpin":"Pin to top"})]}):null,D?r(m,{style:e.actionChip,testID:"buoy-storage-key-hide",accessibilityLabel:`Hide ${o.key} from list`,accessibilityRole:"button",onPress:()=>D(o),hitSlop:{top:6,bottom:6,left:6,right:6},children:[t(X,{size:12,color:i.color.warning}),t(n,{style:[e.actionChipText,{color:i.color.warning}],children:"Hide from list"})]}):null,d&&T?r(m,{style:[e.actionChip,e.dangerChip],testID:"buoy-storage-key-delete",accessibilityLabel:`Delete key ${o.key}`,accessibilityRole:"button",onPress:()=>T(o),hitSlop:{top:6,bottom:6,left:6,right:6},children:[t(te,{size:12,color:i.color.danger}),t(n,{style:[e.actionChipText,{color:i.color.danger}],children:"Delete key"})]}):null]}):null]}),_&&d?t(le,{path:[],value:u,onSave:c=>{S(c);j(p=>p+1);R(false)},onCancel:()=>R(false),saveLabel:"Apply",testIDPrefix:"buoy-storage-value"}):null]})}const e=Q.create({screen:{flex:1,minHeight:0},scroll:{flex:1},scrollContent:{paddingHorizontal:8,paddingTop:8},section:{marginBottom:16},editorContainer:{minWidth:200,backgroundColor:i.color.surface,borderRadius:6,borderWidth:1,borderColor:i.color.accent+"4D",overflow:"hidden",shadowColor:i.color.accent,shadowOffset:{width:0,height:0},shadowOpacity:.1,shadowRadius:6},sectionHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:i.color.accent+"1A",paddingHorizontal:12,paddingVertical:8,borderBottomWidth:1,borderBottomColor:i.color.accent+"33"},sectionHeaderAccentText:{fontWeight:"600",fontSize:12,color:i.color.accent,letterSpacing:.5,textTransform:"uppercase",fontFamily:h},rawButton:{flexDirection:"row",alignItems:"center",gap:4},rawButtonText:{color:i.color.accent,fontSize:11,fontWeight:"700"},sectionBody:{padding:8},editorHint:{color:i.color.textTertiary,fontSize:10,paddingTop:8,paddingHorizontal:4,lineHeight:14},blockedText:{color:i.color.textSecondary,fontSize:12,padding:12,lineHeight:18},infoContainer:{minWidth:200,backgroundColor:i.color.surface,borderRadius:6,borderWidth:1,borderColor:i.color.border,overflow:"hidden"},sectionHeaderPlain:{backgroundColor:i.color.surfaceElevated,paddingHorizontal:12,paddingVertical:8,fontWeight:"600",fontSize:12,color:i.color.textSecondary,borderBottomWidth:1,borderBottomColor:i.color.border,letterSpacing:.5,textTransform:"uppercase",fontFamily:h},infoBody:{padding:12,gap:10},infoRow:{flexDirection:"row",alignItems:"center",gap:8},infoLabel:{fontSize:10,color:i.color.textTertiary,fontWeight:"600",minWidth:64,fontFamily:h},infoDim:{color:i.color.textTertiary,fontSize:10,fontFamily:h},infoExpected:{fontSize:11,color:b.semantic.warning,fontFamily:h,flex:1},infoDescription:{fontSize:11,color:i.color.textSecondary,flex:1},rawValueText:{color:i.color.textSecondary,fontSize:11,fontFamily:h,lineHeight:16,padding:12},viewerBody:{backgroundColor:i.color.bg,minHeight:48},inlineLinkButton:{marginLeft:4},inlineLinkText:{fontSize:10,fontWeight:"600",fontFamily:h,color:i.color.accent},actionRow:{flexDirection:"row",alignItems:"center",flexWrap:"wrap",gap:8,paddingHorizontal:4},actionChip:{flexDirection:"row",alignItems:"center",gap:6,paddingVertical:6,paddingHorizontal:10,borderRadius:6,backgroundColor:i.color.surface,borderWidth:1,borderColor:i.color.border},dangerChip:{borderColor:i.color.danger+"55"},actionChipActive:{backgroundColor:i.color.accentSoft,borderColor:i.color.accentBorderStrong},actionChipText:{fontSize:11,fontWeight:"600",fontFamily:h}});