@buoy-gg/storage 1.7.7 → 2.1.1

package/lib/commonjs/index.js

@@ -3,32 +3,235 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  storageToolPreset: true,
-  createStorageTool: true
-};
+Object.defineProperty(exports, "MMKVInstanceInfoPanel", {
+  enumerable: true,
+  get: function () {
+    return _MMKVInstanceInfoPanel.MMKVInstanceInfoPanel;
+  }
+});
+Object.defineProperty(exports, "MMKVInstanceSelector", {
+  enumerable: true,
+  get: function () {
+    return _MMKVInstanceSelector.MMKVInstanceSelector;
+  }
+});
+Object.defineProperty(exports, "StorageBrowserMode", {
+  enumerable: true,
+  get: function () {
+    return _StorageBrowserMode.StorageBrowserMode;
+  }
+});
+Object.defineProperty(exports, "StorageEventCard", {
+  enumerable: true,
+  get: function () {
+    return _StorageEventCard.StorageEventCard;
+  }
+});
+Object.defineProperty(exports, "StorageEventDetailContent", {
+  enumerable: true,
+  get: function () {
+    return _StorageEventDetailContent.StorageEventDetailContent;
+  }
+});
+Object.defineProperty(exports, "StorageEventDetailFooter", {
+  enumerable: true,
+  get: function () {
+    return _StorageEventDetailContent.StorageEventDetailFooter;
+  }
+});
+Object.defineProperty(exports, "StorageEventsSection", {
+  enumerable: true,
+  get: function () {
+    return _StorageEventsSection.StorageEventsSection;
+  }
+});
+Object.defineProperty(exports, "StorageKeyCard", {
+  enumerable: true,
+  get: function () {
+    return _StorageKeyCard.StorageKeyCard;
+  }
+});
+Object.defineProperty(exports, "StorageKeySection", {
+  enumerable: true,
+  get: function () {
+    return _StorageKeySection.StorageKeySection;
+  }
+});
+Object.defineProperty(exports, "StorageKeyStatsSection", {
+  enumerable: true,
+  get: function () {
+    return _StorageKeyStats.StorageKeyStatsSection;
+  }
+});
+Object.defineProperty(exports, "StorageModalWithTabs", {
+  enumerable: true,
+  get: function () {
+    return _StorageModalWithTabs.StorageModalWithTabs;
+  }
+});
+Object.defineProperty(exports, "StorageSection", {
+  enumerable: true,
+  get: function () {
+    return _StorageSection.StorageSection;
+  }
+});
+Object.defineProperty(exports, "canUndo", {
+  enumerable: true,
+  get: function () {
+    return _storageTimeTravelUtils.canUndo;
+  }
+});
+Object.defineProperty(exports, "clearAllAppStorage", {
+  enumerable: true,
+  get: function () {
+    return _clearAllStorage.clearAllAppStorage;
+  }
+});
 Object.defineProperty(exports, "createStorageTool", {
   enumerable: true,
   get: function () {
     return _preset.createStorageTool;
   }
 });
+Object.defineProperty(exports, "detectMMKVType", {
+  enumerable: true,
+  get: function () {
+    return _mmkvTypeDetection.detectMMKVType;
+  }
+});
+Object.defineProperty(exports, "formatMMKVValue", {
+  enumerable: true,
+  get: function () {
+    return _mmkvTypeDetection.formatMMKVValue;
+  }
+});
+Object.defineProperty(exports, "getMMKVClass", {
+  enumerable: true,
+  get: function () {
+    return _mmkvAvailability.getMMKVClass;
+  }
+});
+Object.defineProperty(exports, "getMMKVUnavailableMessage", {
+  enumerable: true,
+  get: function () {
+    return _mmkvAvailability.getMMKVUnavailableMessage;
+  }
+});
+Object.defineProperty(exports, "getValueType", {
+  enumerable: true,
+  get: function () {
+    return _StorageEventCard.getValueType;
+  }
+});
+Object.defineProperty(exports, "isMMKVAvailable", {
+  enumerable: true,
+  get: function () {
+    return _mmkvAvailability.isMMKVAvailable;
+  }
+});
+Object.defineProperty(exports, "isTypeMatch", {
+  enumerable: true,
+  get: function () {
+    return _mmkvTypeDetection.isTypeMatch;
+  }
+});
+Object.defineProperty(exports, "jumpToState", {
+  enumerable: true,
+  get: function () {
+    return _storageTimeTravelUtils.jumpToState;
+  }
+});
+Object.defineProperty(exports, "registerMMKVInstance", {
+  enumerable: true,
+  get: function () {
+    return _MMKVInstanceRegistry.registerMMKVInstance;
+  }
+});
+Object.defineProperty(exports, "storageEventStore", {
+  enumerable: true,
+  get: function () {
+    return _storageEventStore.storageEventStore;
+  }
+});
 Object.defineProperty(exports, "storageToolPreset", {
   enumerable: true,
   get: function () {
     return _preset.storageToolPreset;
   }
 });
+Object.defineProperty(exports, "undoOperation", {
+  enumerable: true,
+  get: function () {
+    return _storageTimeTravelUtils.undoOperation;
+  }
+});
+Object.defineProperty(exports, "unregisterMMKVInstance", {
+  enumerable: true,
+  get: function () {
+    return _MMKVInstanceRegistry.unregisterMMKVInstance;
+  }
+});
+Object.defineProperty(exports, "useAsyncStorageKeys", {
+  enumerable: true,
+  get: function () {
+    return _useAsyncStorageKeys.useAsyncStorageKeys;
+  }
+});
+Object.defineProperty(exports, "useMMKVInstance", {
+  enumerable: true,
+  get: function () {
+    return _useMMKVInstances.useMMKVInstance;
+  }
+});
+Object.defineProperty(exports, "useMMKVInstanceExists", {
+  enumerable: true,
+  get: function () {
+    return _useMMKVInstances.useMMKVInstanceExists;
+  }
+});
+Object.defineProperty(exports, "useMMKVInstances", {
+  enumerable: true,
+  get: function () {
+    return _useMMKVInstances.useMMKVInstances;
+  }
+});
+Object.defineProperty(exports, "useMMKVKeys", {
+  enumerable: true,
+  get: function () {
+    return _useMMKVKeys.useMMKVKeys;
+  }
+});
+Object.defineProperty(exports, "useMultiMMKVKeys", {
+  enumerable: true,
+  get: function () {
+    return _useMMKVKeys.useMultiMMKVKeys;
+  }
+});
+Object.defineProperty(exports, "useStorageEvents", {
+  enumerable: true,
+  get: function () {
+    return _useStorageEvents.useStorageEvents;
+  }
+});
 var _preset = require("./preset");
-var _storage = require("./storage");
-Object.keys(_storage).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _storage[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _storage[key];
-    }
-  });
-});
+var _StorageSection = require("./storage/components/StorageSection");
+var _StorageModalWithTabs = require("./storage/components/StorageModalWithTabs");
+var _StorageKeyCard = require("./storage/components/StorageKeyCard");
+var _StorageKeyStats = require("./storage/components/StorageKeyStats");
+var _StorageKeySection = require("./storage/components/StorageKeySection");
+var _StorageBrowserMode = require("./storage/components/StorageBrowserMode");
+var _StorageEventsSection = require("./storage/components/StorageEventsSection");
+var _StorageEventCard = require("./storage/components/StorageEventCard");
+var _StorageEventDetailContent = require("./storage/components/StorageEventDetailContent");
+var _MMKVInstanceSelector = require("./storage/components/MMKVInstanceSelector");
+var _MMKVInstanceInfoPanel = require("./storage/components/MMKVInstanceInfoPanel");
+var _useAsyncStorageKeys = require("./storage/hooks/useAsyncStorageKeys");
+var _useMMKVKeys = require("./storage/hooks/useMMKVKeys");
+var _useMMKVInstances = require("./storage/hooks/useMMKVInstances");
+var _useStorageEvents = require("./storage/hooks/useStorageEvents");
+var _clearAllStorage = require("./storage/utils/clearAllStorage");
+var _mmkvAvailability = require("./storage/utils/mmkvAvailability");
+var _mmkvTypeDetection = require("./storage/utils/mmkvTypeDetection");
+var _storageTimeTravelUtils = require("./storage/utils/storageTimeTravelUtils");
+var _MMKVInstanceRegistry = require("./storage/utils/MMKVInstanceRegistry");
+var _storageEventStore = require("./storage/stores/storageEventStore");

package/lib/commonjs/storage/components/DiffViewer/themes/diffThemes.js

@@ -54,63 +54,54 @@ const gitClassicTheme = exports.gitClassicTheme = {
 
 /**
  * Dev Tools Default Theme
- * Clean dark theme using our gameUIColors
+ * Clean dark theme matching Buoy website brand colors
  */
 const devToolsDefaultTheme = exports.devToolsDefaultTheme = {
   name: "Dev Tools Default",
-  description: "Clean dark theme with our game UI colors",
-  // Use our gameUIColors-inspired dark theme
-  background: "#0A0E1A",
-  // Dark background
-  panelBackground: "#0F1420",
-  // Slightly lighter panel
-  headerBackground: "#141925",
-  // Header background
-
-  // Diff colors with our cyan/yellow/red scheme
-  addedBackground: "rgba(74, 255, 159, 0.1)",
-  // Green-cyan for additions
-  removedBackground: "rgba(255, 82, 82, 0.1)",
-  // Red for removals
-  modifiedBackground: "rgba(0, 184, 230, 0.1)",
-  // Cyan for modifications
+  description: "Clean dark theme with Buoy brand colors",
+  // Surface colors (matching website dark theme)
+  background: "#121212",
+  panelBackground: "#1A1A1A",
+  headerBackground: "#1A1A1A",
+  // Diff colors using website's semantic colors
+  // Added: Primary teal (#20C997)
+  // Removed: Error red (#EF4444)
+  // Modified: Secondary purple (#9B70E0)
+  addedBackground: "rgba(32, 201, 151, 0.12)",
+  removedBackground: "rgba(239, 68, 68, 0.12)",
+  modifiedBackground: "rgba(155, 112, 224, 0.12)",
   unchangedBackground: "transparent",
   contextBackground: "rgba(255, 255, 255, 0.02)",
   // Text colors
-  addedText: "#4AFF9F",
-  // Bright green-cyan
-  removedText: "#FF5252",
-  // Bright red
-  modifiedText: "#00B8E6",
-  // Bright cyan
-  unchangedText: "#B8BFC9",
-  // Muted text
-
+  addedText: "#20C997",
+  removedText: "#EF4444",
+  modifiedText: "#9B70E0",
+  unchangedText: "#E0E0E0",
   // Word-level highlights
-  addedWordHighlight: "rgba(74, 255, 159, 0.3)",
-  removedWordHighlight: "rgba(255, 82, 82, 0.3)",
+  addedWordHighlight: "rgba(32, 201, 151, 0.3)",
+  removedWordHighlight: "rgba(239, 68, 68, 0.3)",
   // UI elements
-  lineNumberBackground: "#0A0E1A",
-  lineNumberText: "#7A8599",
-  lineNumberBorder: "#1F2937",
+  lineNumberBackground: "#121212",
+  lineNumberText: "#A0A0A0",
+  lineNumberBorder: "#333333",
   // Markers
-  markerAddedBackground: "rgba(74, 255, 159, 0.2)",
-  markerRemovedBackground: "rgba(255, 82, 82, 0.2)",
-  markerModifiedBackground: "rgba(0, 184, 230, 0.2)",
-  markerText: "#7A8599",
+  markerAddedBackground: "rgba(32, 201, 151, 0.2)",
+  markerRemovedBackground: "rgba(239, 68, 68, 0.2)",
+  markerModifiedBackground: "rgba(155, 112, 224, 0.2)",
+  markerText: "#A0A0A0",
   // Borders and dividers
-  borderColor: "#1F2937",
-  dividerColor: "#1F2937",
+  borderColor: "#333333",
+  dividerColor: "#333333",
   // Summary bar
-  summaryBackground: "#0F1420",
-  summaryAddedText: "#4AFF9F",
-  summaryRemovedText: "#FF5252",
-  summaryModifiedText: "#00B8E6",
+  summaryBackground: "#1A1A1A",
+  summaryAddedText: "#20C997",
+  summaryRemovedText: "#EF4444",
+  summaryModifiedText: "#9B70E0",
   // Empty state
-  emptyStateText: "#7A8599",
+  emptyStateText: "#888888",
   // Separator
-  separatorBackground: "#141925",
-  separatorText: "#7A8599"
+  separatorBackground: "#1A1A1A",
+  separatorText: "#A0A0A0"
 };
 
 /**

package/lib/commonjs/storage/components/GameUIStorageBrowser.js

@@ -17,6 +17,7 @@ var _useMMKVInstances = require("../hooks/useMMKVInstances");
 var _mmkvAvailability = require("../utils/mmkvAvailability");
 var _StorageActionButtons = require("./StorageActionButtons");
 var _SelectionActionBar = require("./SelectionActionBar");
+var _license = require("@buoy-gg/license");
 var _jsxRuntime = require("react/jsx-runtime");
 // Conditionally import MMKV listener
 let addMMKVListener;
@@ -27,26 +28,6 @@ if ((0, _mmkvAvailability.isMMKVAvailable)()) {
 
 // Import shared Game UI components
 
-// Lazy load the license hooks to avoid circular dependencies
-let _useIsPro = null;
-let _licenseLoadAttempted = false;
-function loadLicenseModule() {
-  if (_licenseLoadAttempted) return;
-  _licenseLoadAttempted = true;
-  try {
-    const mod = require("@buoy-gg/license");
-    if (mod) {
-      _useIsPro = mod.useIsPro ?? null;
-    }
-  } catch {
-    // License package not available
-  }
-}
-function getUseIsPro() {
-  loadLicenseModule();
-  return _useIsPro ?? (() => false);
-}
-
 // MMKV Instance color palette - consistent colors per instance
 const INSTANCE_COLORS = [_sharedUi.macOSColors.semantic.info,
 // Blue
@@ -81,10 +62,15 @@ function GameUIStorageBrowser({
   searchQuery = "",
   storageDataRef
 }) {
-  // Check Pro status internally
-  const useIsPro = getUseIsPro();
-  const isPro = useIsPro();
+  const isPro = (0, _license.useIsPro)();
   const [showUpgradeModal, setShowUpgradeModal] = (0, _react.useState)(false);
+
+  // Auto-close upgrade modal when user becomes Pro
+  (0, _react.useEffect)(() => {
+    if (showUpgradeModal && isPro) {
+      setShowUpgradeModal(false);
+    }
+  }, [showUpgradeModal, isPro]);
   const [activeFilter, setActiveFilter] = (0, _react.useState)("all");
   const [activeStorageType, setActiveStorageType] = (0, _react.useState)("all");
   const [selectedMMKVInstance, setSelectedMMKVInstance] = (0, _react.useState)(null);

package/lib/commonjs/storage/components/SelectionActionBar.js

@@ -7,28 +7,10 @@ exports.SelectionActionBar = SelectionActionBar;
 var _react = require("react");
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
+var _license = require("@buoy-gg/license");
 var _asyncStorage = _interopRequireDefault(require("@react-native-async-storage/async-storage"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// Lazy load the license hooks to avoid circular dependencies
-let _useIsPro = null;
-let _licenseLoadAttempted = false;
-function loadLicenseModule() {
-  if (_licenseLoadAttempted) return;
-  _licenseLoadAttempted = true;
-  try {
-    const mod = require("@buoy-gg/license");
-    if (mod) {
-      _useIsPro = mod.useIsPro ?? null;
-    }
-  } catch {
-    // License package not available
-  }
-}
-function getUseIsPro() {
-  loadLicenseModule();
-  return _useIsPro ?? (() => false);
-}
 function SelectionActionBar({
   selectedKeys,
   mmkvInstances,
@@ -38,10 +20,14 @@ function SelectionActionBar({
   totalVisibleKeys
 }) {
   const [showUpgradeModal, setShowUpgradeModal] = (0, _react.useState)(false);
+  const isPro = (0, _license.useIsPro)();
 
-  // Check Pro status internally
-  const useIsPro = getUseIsPro();
-  const isPro = useIsPro();
+  // Auto-close upgrade modal when user becomes Pro
+  (0, _react.useEffect)(() => {
+    if (showUpgradeModal && isPro) {
+      setShowUpgradeModal(false);
+    }
+  }, [showUpgradeModal, isPro]);
   const selectedCount = selectedKeys.length;
   const allSelected = selectedCount === totalVisibleKeys && totalVisibleKeys > 0;
 

package/lib/commonjs/storage/components/StorageActionButtons.js

@@ -7,28 +7,10 @@ exports.StorageActionButtons = StorageActionButtons;
 var _react = require("react");
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
+var _license = require("@buoy-gg/license");
 var _asyncStorage = _interopRequireDefault(require("@react-native-async-storage/async-storage"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// Lazy load the license hooks to avoid circular dependencies
-let _useIsPro = null;
-let _licenseLoadAttempted = false;
-function loadLicenseModule() {
-  if (_licenseLoadAttempted) return;
-  _licenseLoadAttempted = true;
-  try {
-    const mod = require("@buoy-gg/license");
-    if (mod) {
-      _useIsPro = mod.useIsPro ?? null;
-    }
-  } catch {
-    // License package not available
-  }
-}
-function getUseIsPro() {
-  loadLicenseModule();
-  return _useIsPro ?? (() => false);
-}
 function StorageActionButtons({
   copyValue,
   mmkvInstances = [],
@@ -39,10 +21,14 @@ function StorageActionButtons({
   selectedCount = 0
 }) {
   const [showUpgradeModal, setShowUpgradeModal] = (0, _react.useState)(false);
+  const isPro = (0, _license.useIsPro)();
 
-  // Check Pro status internally
-  const useIsPro = getUseIsPro();
-  const isPro = useIsPro();
+  // Auto-close upgrade modal when user becomes Pro
+  (0, _react.useEffect)(() => {
+    if (showUpgradeModal && isPro) {
+      setShowUpgradeModal(false);
+    }
+  }, [showUpgradeModal, isPro]);
   const handleClearAsyncStorage = () => {
     // Gate clear behind Pro
     if (!isPro) {

package/lib/commonjs/storage/components/StorageActions.js

@@ -8,26 +8,8 @@ var _reactNative = require("react-native");
 var _react = require("react");
 var _clearAllStorage = require("../utils/clearAllStorage");
 var _sharedUi = require("@buoy-gg/shared-ui");
+var _license = require("@buoy-gg/license");
 var _jsxRuntime = require("react/jsx-runtime");
-// Lazy load the license hooks to avoid circular dependencies
-let _useIsPro = null;
-let _licenseLoadAttempted = false;
-function loadLicenseModule() {
-  if (_licenseLoadAttempted) return;
-  _licenseLoadAttempted = true;
-  try {
-    const mod = require("@buoy-gg/license");
-    if (mod) {
-      _useIsPro = mod.useIsPro ?? null;
-    }
-  } catch {
-    // License package not available
-  }
-}
-function getUseIsPro() {
-  loadLicenseModule();
-  return _useIsPro ?? (() => false);
-}
 function StorageActions({
   storageKeys,
   onClearAll,
@@ -36,10 +18,14 @@ function StorageActions({
 }) {
   const [isRefreshing, setIsRefreshing] = (0, _react.useState)(false);
   const [showUpgradeModal, setShowUpgradeModal] = (0, _react.useState)(false);
+  const isPro = (0, _license.useIsPro)();
 
-  // Check Pro status internally
-  const useIsPro = getUseIsPro();
-  const isPro = useIsPro();
+  // Auto-close upgrade modal when user becomes Pro
+  (0, _react.useEffect)(() => {
+    if (showUpgradeModal && isPro) {
+      setShowUpgradeModal(false);
+    }
+  }, [showUpgradeModal, isPro]);
   const handleRefresh = (0, _react.useCallback)(async () => {
     setIsRefreshing(true);
     try {

package/lib/commonjs/storage/components/StorageEventActionButton.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StorageEventActionButton = StorageEventActionButton;
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * StorageEventActionButton
+ *
+ * Action button for Storage DevTools detail view
+ * Matches Redux DevTools ActionButton styling
+ */
+
+// Button color configurations matching Redux/React Query pattern
+const buttonConfigs = {
+  copy: {
+    color: _sharedUi.buoyColors.primary,
+    backgroundColor: _sharedUi.buoyColors.primary + "15",
+    borderColor: _sharedUi.buoyColors.primary + "40",
+    textColor: _sharedUi.buoyColors.primary
+  },
+  jump: {
+    color: _sharedUi.buoyColors.warning,
+    backgroundColor: _sharedUi.buoyColors.warning + "15",
+    borderColor: _sharedUi.buoyColors.warning + "40",
+    textColor: _sharedUi.buoyColors.warning
+  },
+  undo: {
+    color: _sharedUi.buoyColors.info,
+    backgroundColor: _sharedUi.buoyColors.info + "15",
+    borderColor: _sharedUi.buoyColors.info + "40",
+    textColor: _sharedUi.buoyColors.info
+  }
+};
+function StorageEventActionButton({
+  onPress,
+  text,
+  type,
+  disabled = false,
+  locked = false
+}) {
+  const config = buttonConfigs[type];
+  const isDisabledOrLocked = disabled || locked;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    disabled: isDisabledOrLocked,
+    onPress: onPress,
+    style: [styles.button, {
+      backgroundColor: isDisabledOrLocked ? _sharedUi.buoyColors.textMuted + "1A" : config.backgroundColor,
+      borderColor: isDisabledOrLocked ? _sharedUi.buoyColors.textMuted + "33" : config.borderColor,
+      opacity: disabled ? 0.5 : 1
+    }],
+    activeOpacity: 0.7,
+    accessibilityRole: "button",
+    accessibilityLabel: text,
+    accessibilityState: {
+      disabled: isDisabledOrLocked
+    },
+    children: [locked ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Lock, {
+      size: 10,
+      color: _sharedUi.buoyColors.textMuted,
+      style: styles.lockIcon
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.dot, {
+        backgroundColor: isDisabledOrLocked ? _sharedUi.buoyColors.textMuted : config.color
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.text, {
+        color: isDisabledOrLocked ? _sharedUi.buoyColors.textMuted : config.textColor
+      }],
+      children: text
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 6,
+    borderWidth: 1,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    height: 25,
+    minWidth: 70,
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+    elevation: 2
+  },
+  dot: {
+    width: 5,
+    height: 5,
+    borderRadius: 3,
+    marginRight: 6,
+    shadowColor: _sharedUi.buoyColors.text,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.6,
+    shadowRadius: 2
+  },
+  lockIcon: {
+    marginRight: 4
+  },
+  text: {
+    fontSize: 10,
+    fontWeight: "600",
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    fontFamily: "monospace",
+    height: 12
+  }
+});