@buoy-gg/storage 1.7.2

package/lib/commonjs/preset.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createStorageTool = createStorageTool;
+exports.storageToolPreset = void 0;
+var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
+var _StorageModalWithTabs = require("./storage/components/StorageModalWithTabs");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Pre-configured AsyncStorage browser tool for FloatingDevTools
+ *
+ * This preset provides a zero-config way to add AsyncStorage inspection to your dev tools.
+ * Just import and add it to your apps array!
+ *
+ * @example
+ * ```tsx
+ * import { storageToolPreset } from '@buoy-gg/storage';
+ *
+ * const installedApps = [
+ *   storageToolPreset, // That's it!
+ *   // ...other tools
+ * ];
+ * ```
+ */
+
+/**
+ * Pre-configured AsyncStorage browser tool for FloatingDevTools.
+ * Includes:
+ * - Browse all AsyncStorage keys and values
+ * - Edit, delete, and add storage items
+ * - Live storage event monitoring
+ * - Required key validation
+ */
+const storageToolPreset = exports.storageToolPreset = {
+  id: "storage",
+  name: "STORAGE",
+  description: "AsyncStorage browser",
+  slot: "both",
+  icon: ({
+    size
+  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.StorageIcon, {
+    size: size
+  }),
+  component: _StorageModalWithTabs.StorageModalWithTabs,
+  props: {
+    requiredStorageKeys: [],
+    enableSharedModalDimensions: false
+  }
+};
+
+/**
+ * Create a custom AsyncStorage browser tool configuration.
+ * Use this if you want to override default settings or provide required storage keys.
+ *
+ * @example
+ * ```tsx
+ * import { createStorageTool } from '@buoy-gg/storage';
+ *
+ * const requiredStorageKeys = [
+ *   {
+ *     key: "@app/session",
+ *     expectedType: "string",
+ *     description: "User session token",
+ *     storageType: "async",
+ *   },
+ * ];
+ *
+ * const myStorageTool = createStorageTool({
+ *   requiredStorageKeys,
+ *   colorPreset: "purple",
+ *   enableSharedModalDimensions: true,
+ * });
+ * ```
+ */
+function createStorageTool(options) {
+  return {
+    id: options?.id || "storage",
+    name: options?.name || "STORAGE",
+    description: options?.description || "AsyncStorage browser",
+    slot: "both",
+    icon: ({
+      size
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.StorageIcon, {
+      size: size
+    }),
+    component: _StorageModalWithTabs.StorageModalWithTabs,
+    props: {
+      requiredStorageKeys: options?.requiredStorageKeys || [],
+      enableSharedModalDimensions: options?.enableSharedModalDimensions !== undefined ? options.enableSharedModalDimensions : false
+    }
+  };
+}

package/lib/commonjs/storage/components/DiffViewer/DiffOptionsPanel.js

@@ -0,0 +1,356 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DiffOptionsPanel = DiffOptionsPanel;
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+const COMPARE_METHODS = [{
+  id: "chars",
+  label: "Chars",
+  description: "Shows every single character change. Best for spotting typos or small edits in strings."
+}, {
+  id: "words",
+  label: "Words",
+  description: "Highlights changed words while preserving context. Default mode, ideal for most text changes."
+}, {
+  id: "lines",
+  label: "Lines",
+  description: "Shows entire line as changed without word-level detail. Good for completely rewritten lines."
+}, {
+  id: "trimmedLines",
+  label: "Trim",
+  description: "Ignores leading/trailing spaces when comparing. Useful when indentation changes."
+}];
+const CONTEXT_OPTIONS = [0, 1, 3, 5, 10];
+function DiffOptionsPanel({
+  options,
+  onOptionsChange,
+  isExpanded,
+  onToggleExpanded
+}) {
+  const updateOption = (key, value) => {
+    onOptionsChange({
+      ...options,
+      [key]: value
+    });
+  };
+
+  // Check if any non-default options are active
+  const hasActiveFilters = options.hideLineNumbers || options.disableWordDiff || options.showDiffOnly || options.compareMethod !== "words";
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.container,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      style: styles.toggleButton,
+      onPress: onToggleExpanded,
+      activeOpacity: 0.7,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Settings, {
+        size: 12,
+        color: _sharedUi.macOSColors.semantic.info
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.toggleText,
+        children: "Options"
+      }), hasActiveFilters && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.activeIndicator,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.activeIndicatorText,
+          children: [options.hideLineNumbers && "No#", options.disableWordDiff && "NoWord", options.showDiffOnly && `Diff${options.contextLines}`, options.compareMethod !== "words" && options.compareMethod].filter(Boolean).join(" ")
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.toggleIndicator,
+        children: isExpanded ? "▼" : "▶"
+      })]
+    }), isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.optionsContent,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.section,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.sectionTitle,
+          children: "DISPLAY"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.optionContainer,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.option,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.optionLeft,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Hash, {
+                size: 11,
+                color: _sharedUi.macOSColors.text.secondary
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.optionLabel,
+                children: "Line Numbers"
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Switch, {
+              value: !options.hideLineNumbers,
+              onValueChange: value => updateOption("hideLineNumbers", !value),
+              trackColor: {
+                false: _sharedUi.macOSColors.border.default,
+                true: _sharedUi.macOSColors.semantic.success + "60"
+              },
+              thumbColor: !options.hideLineNumbers ? _sharedUi.macOSColors.semantic.success : _sharedUi.macOSColors.text.muted,
+              style: styles.switch
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.optionDescription,
+            children: !options.hideLineNumbers ? "Shows line numbers for easier navigation and reference" : "Line numbers hidden for cleaner view"
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.optionContainer,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.option,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.optionLeft,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.FileText, {
+                size: 11,
+                color: _sharedUi.macOSColors.text.secondary
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.optionLabel,
+                children: "Word Diff"
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Switch, {
+              value: !options.disableWordDiff,
+              onValueChange: value => updateOption("disableWordDiff", !value),
+              trackColor: {
+                false: _sharedUi.macOSColors.border.default,
+                true: _sharedUi.macOSColors.semantic.success + "60"
+              },
+              thumbColor: !options.disableWordDiff ? _sharedUi.macOSColors.semantic.success : _sharedUi.macOSColors.text.muted,
+              style: styles.switch
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.optionDescription,
+            children: !options.disableWordDiff ? "Highlights specific words/characters that changed within modified lines" : "Shows entire lines as changed without detailed highlighting"
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.optionContainer,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.option,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.optionLeft,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
+                size: 11,
+                color: _sharedUi.macOSColors.text.secondary
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.optionLabel,
+                children: "Diff Only"
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Switch, {
+              value: options.showDiffOnly,
+              onValueChange: value => updateOption("showDiffOnly", value),
+              trackColor: {
+                false: _sharedUi.macOSColors.border.default,
+                true: _sharedUi.macOSColors.semantic.success + "60"
+              },
+              thumbColor: options.showDiffOnly ? _sharedUi.macOSColors.semantic.success : _sharedUi.macOSColors.text.muted,
+              style: styles.switch
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.optionDescription,
+            children: options.showDiffOnly ? `Shows only changed lines with ${options.contextLines} lines of context around them` : "Shows complete content with all lines visible"
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.section,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.sectionTitle,
+          children: "COMPARE METHOD"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.methodButtons,
+          children: COMPARE_METHODS.map(method => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            style: [styles.methodButton, options.compareMethod === method.id && styles.methodButtonActive],
+            onPress: () => updateOption("compareMethod", method.id),
+            activeOpacity: 0.7,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.methodButtonText, options.compareMethod === method.id && styles.methodButtonTextActive],
+              children: method.label
+            })
+          }, method.id))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.methodDescription,
+          children: COMPARE_METHODS.find(m => m.id === options.compareMethod)?.description
+        })]
+      }), options.showDiffOnly && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.section,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.sectionTitle,
+          children: "CONTEXT LINES"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.contextButtons,
+          children: CONTEXT_OPTIONS.map(lines => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            style: [styles.contextButton, options.contextLines === lines && styles.contextButtonActive],
+            onPress: () => updateOption("contextLines", lines),
+            activeOpacity: 0.7,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.contextButtonText, options.contextLines === lines && styles.contextButtonTextActive],
+              children: lines
+            })
+          }, lines))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.contextDescription,
+          children: options.contextLines === 0 ? "Shows only the exact lines that changed with no surrounding context" : `Shows ${options.contextLines} unchanged line${options.contextLines === 1 ? "" : "s"} before and after each change for context`
+        })]
+      })]
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    marginVertical: 8
+  },
+  toggleButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: _sharedUi.macOSColors.background.card,
+    paddingVertical: 6,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    gap: 6
+  },
+  toggleText: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: _sharedUi.macOSColors.semantic.info,
+    fontFamily: "monospace",
+    flex: 1
+  },
+  toggleIndicator: {
+    fontSize: 8,
+    color: _sharedUi.macOSColors.text.muted,
+    fontFamily: "monospace"
+  },
+  optionsContent: {
+    marginTop: 8,
+    backgroundColor: _sharedUi.macOSColors.background.input,
+    borderRadius: 6,
+    padding: 12,
+    gap: 16
+  },
+  section: {
+    gap: 8
+  },
+  sectionTitle: {
+    fontSize: 9,
+    fontWeight: "700",
+    color: _sharedUi.macOSColors.semantic.info,
+    fontFamily: "monospace",
+    letterSpacing: 0.5,
+    marginBottom: 4
+  },
+  optionContainer: {
+    marginBottom: 12
+  },
+  option: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: 4
+  },
+  optionLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  optionLabel: {
+    fontSize: 11,
+    color: _sharedUi.macOSColors.text.primary,
+    fontFamily: "monospace"
+  },
+  optionDescription: {
+    fontSize: 9,
+    color: _sharedUi.macOSColors.text.muted,
+    fontFamily: "monospace",
+    marginTop: 4,
+    marginLeft: 19,
+    lineHeight: 12
+  },
+  switch: {
+    transform: [{
+      scaleX: 0.8
+    }, {
+      scaleY: 0.8
+    }]
+  },
+  methodButtons: {
+    flexDirection: "row",
+    gap: 4,
+    flexWrap: "wrap"
+  },
+  methodButton: {
+    paddingVertical: 6,
+    paddingHorizontal: 10,
+    backgroundColor: _sharedUi.macOSColors.background.input,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.default
+  },
+  methodButtonActive: {
+    backgroundColor: _sharedUi.macOSColors.semantic.infoBackground,
+    borderColor: _sharedUi.macOSColors.semantic.info + "40"
+  },
+  methodButtonText: {
+    fontSize: 9,
+    fontFamily: "monospace",
+    color: _sharedUi.macOSColors.text.muted,
+    fontWeight: "600"
+  },
+  methodButtonTextActive: {
+    color: _sharedUi.macOSColors.semantic.info
+  },
+  methodDescription: {
+    fontSize: 9,
+    color: _sharedUi.macOSColors.text.muted,
+    fontFamily: "monospace",
+    marginTop: 8,
+    lineHeight: 12
+  },
+  contextButtons: {
+    flexDirection: "row",
+    gap: 6
+  },
+  contextButton: {
+    width: 32,
+    height: 28,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: _sharedUi.macOSColors.background.input,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.default
+  },
+  contextButtonActive: {
+    backgroundColor: _sharedUi.macOSColors.semantic.warningBackground,
+    borderColor: _sharedUi.macOSColors.semantic.warning + "40"
+  },
+  contextButtonText: {
+    fontSize: 10,
+    fontFamily: "monospace",
+    color: _sharedUi.macOSColors.text.muted,
+    fontWeight: "600"
+  },
+  contextButtonTextActive: {
+    color: _sharedUi.macOSColors.semantic.warning
+  },
+  contextDescription: {
+    fontSize: 9,
+    color: _sharedUi.macOSColors.text.muted,
+    fontFamily: "monospace",
+    marginTop: 8,
+    lineHeight: 12
+  },
+  activeIndicator: {
+    backgroundColor: _sharedUi.macOSColors.semantic.warningBackground,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 3,
+    marginLeft: "auto",
+    marginRight: 4
+  },
+  activeIndicatorText: {
+    fontSize: 8,
+    fontFamily: "monospace",
+    color: _sharedUi.macOSColors.semantic.warning,
+    fontWeight: "600"
+  }
+});

package/lib/commonjs/storage/components/DiffViewer/TreeDiffViewer.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeDiffViewer = TreeDiffViewer;
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
+var _jsxRuntime = require("react/jsx-runtime");
+function TreeDiffViewer({
+  oldValue,
+  newValue
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.container,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.TreeDiffViewer, {
+      oldValue: oldValue,
+      newValue: newValue,
+      theme: "dark"
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: _sharedUi.gameUIColors.background
+  }
+});

package/lib/commonjs/storage/components/DiffViewer/components/DiffSummary.js

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DiffSummary = DiffSummary;
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+function DiffSummary({
+  added,
+  removed,
+  modified,
+  theme,
+  style
+}) {
+  const hasChanges = added > 0 || removed > 0 || modified > 0;
+  if (!hasChanges) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, {
+      backgroundColor: theme.summaryBackground,
+      borderTopColor: theme.borderColor
+    }, style],
+    children: [added > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.badge, {
+        backgroundColor: theme.addedBackground
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.icon, {
+          color: theme.summaryAddedText
+        }],
+        children: "+"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.count, {
+          color: theme.summaryAddedText
+        }],
+        children: added
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.label, {
+          color: theme.summaryAddedText
+        }],
+        children: "new"
+      })]
+    }), removed > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.badge, {
+        backgroundColor: theme.removedBackground
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.icon, {
+          color: theme.summaryRemovedText
+        }],
+        children: "\u2212"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.count, {
+          color: theme.summaryRemovedText
+        }],
+        children: removed
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.label, {
+          color: theme.summaryRemovedText
+        }],
+        children: "gone"
+      })]
+    }), modified > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.badge, {
+        backgroundColor: theme.modifiedBackground
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.icon, {
+          color: theme.summaryModifiedText
+        }],
+        children: "\u2248"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.count, {
+          color: theme.summaryModifiedText
+        }],
+        children: modified
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.label, {
+          color: theme.summaryModifiedText
+        }],
+        children: "modified"
+      })]
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 12,
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    borderTopWidth: 1
+  },
+  badge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 3,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 10
+  },
+  icon: {
+    fontSize: 11,
+    fontFamily: "monospace",
+    fontWeight: "700"
+  },
+  count: {
+    fontSize: 10,
+    fontFamily: "monospace",
+    fontWeight: "600"
+  },
+  label: {
+    fontSize: 9,
+    fontFamily: "monospace",
+    opacity: 0.9
+  }
+});