@buoy-gg/storage 1.7.2

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

@@ -0,0 +1,257 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MMKVInstanceInfoPanel = MMKVInstanceInfoPanel;
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _useMMKVInstances = require("../hooks/useMMKVInstances");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * MMKVInstanceInfoPanel Component
+ *
+ * Displays detailed information about a selected MMKV instance:
+ * - Instance ID and path
+ * - Encryption status
+ * - Read-only status
+ * - Key count
+ * - Size (if available)
+ *
+ * Used in GameUIStorageBrowser below the instance selector.
+ */
+
+/**
+ * MMKV Instance Info Panel
+ *
+ * Shows metadata and statistics for a selected MMKV instance.
+ *
+ * @example
+ * ```typescript
+ * function MyStorageUI() {
+ *   const [selectedInstance, setSelectedInstance] = useState('mmkv.default');
+ *
+ *   return (
+ *     <View>
+ *       <MMKVInstanceSelector
+ *         selectedInstanceId={selectedInstance}
+ *         onSelectInstance={setSelectedInstance}
+ *       />
+ *       {selectedInstance && (
+ *         <MMKVInstanceInfoPanel instanceId={selectedInstance} />
+ *       )}
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+function MMKVInstanceInfoPanel({
+  instanceId
+}) {
+  const instance = (0, _useMMKVInstances.useMMKVInstance)(instanceId);
+  if (!instance) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.container,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.errorState,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: styles.errorText,
+          children: ["Instance not found: ", instanceId]
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.container,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.panel,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.header,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.headerTitle,
+          children: "Instance Details"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.infoGrid,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(InfoItem, {
+          label: "Instance ID",
+          value: instance.id,
+          valueStyle: styles.monoValue
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoItem, {
+          label: "Keys",
+          value: `${instance.keyCount} ${instance.keyCount === 1 ? 'key' : 'keys'}`,
+          highlight: true
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoItem, {
+          label: "Encryption",
+          value: instance.encrypted ? '🔒 Encrypted' : '🔓 Not encrypted',
+          valueColor: instance.encrypted ? _sharedUi.macOSColors.semantic.success : _sharedUi.macOSColors.text.muted
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoItem, {
+          label: "Access",
+          value: instance.readOnly ? '👁️ Read-only' : '✏️ Read-write',
+          valueColor: instance.readOnly ? _sharedUi.macOSColors.semantic.warning : _sharedUi.macOSColors.text.muted
+        }), instance.size !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoItem, {
+          label: "Size",
+          value: formatBytes(instance.size),
+          valueStyle: styles.monoValue
+        })]
+      }), instance.encrypted && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.notice,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.noticeIcon,
+          children: "\uD83D\uDD12"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.noticeText,
+          children: "This instance is encrypted. Values are protected at rest."
+        })]
+      }), instance.readOnly && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [styles.notice, styles.noticeWarning],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.noticeIcon,
+          children: "\uD83D\uDC41\uFE0F"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.noticeText, styles.noticeTextWarning],
+          children: "Read-only mode. Cannot modify values in this instance."
+        })]
+      })]
+    })
+  });
+}
+
+/**
+ * InfoItem Component - Displays a label-value pair
+ */
+function InfoItem({
+  label,
+  value,
+  valueStyle,
+  valueColor,
+  highlight
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.infoItem,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.infoLabel,
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.infoValue, valueStyle, valueColor && {
+        color: valueColor
+      }, highlight && styles.infoValueHighlight],
+      children: value
+    })]
+  });
+}
+
+/**
+ * Format bytes to human-readable string
+ */
+function formatBytes(bytes) {
+  if (bytes === 0) return '0 Bytes';
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    marginBottom: 12
+  },
+  // Error state
+  errorState: {
+    backgroundColor: _sharedUi.macOSColors.semantic.error + '15',
+    borderRadius: 12,
+    padding: 12,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.semantic.error + '40'
+  },
+  errorText: {
+    fontSize: 12,
+    color: _sharedUi.macOSColors.semantic.error,
+    textAlign: 'center'
+  },
+  // Panel
+  panel: {
+    backgroundColor: _sharedUi.macOSColors.background.card,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.default + '50',
+    overflow: 'hidden',
+    shadowColor: '#000000',
+    shadowOpacity: 0.03,
+    shadowRadius: 8,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    }
+  },
+  // Header
+  header: {
+    padding: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.macOSColors.border.default + '30'
+  },
+  headerTitle: {
+    fontSize: 11,
+    fontWeight: '600',
+    color: _sharedUi.macOSColors.text.primary,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5
+  },
+  // Info grid
+  infoGrid: {
+    padding: 12,
+    gap: 10
+  },
+  infoItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 4
+  },
+  infoLabel: {
+    fontSize: 12,
+    color: _sharedUi.macOSColors.text.muted,
+    fontWeight: '500'
+  },
+  infoValue: {
+    fontSize: 12,
+    color: _sharedUi.macOSColors.text.primary,
+    fontWeight: '500'
+  },
+  infoValueHighlight: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: _sharedUi.macOSColors.semantic.info
+  },
+  monoValue: {
+    fontFamily: 'monospace'
+  },
+  // Notices
+  notice: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    padding: 10,
+    margin: 12,
+    marginTop: 0,
+    backgroundColor: _sharedUi.macOSColors.semantic.success + '10',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.semantic.success + '30'
+  },
+  noticeWarning: {
+    backgroundColor: _sharedUi.macOSColors.semantic.warning + '10',
+    borderColor: _sharedUi.macOSColors.semantic.warning + '30'
+  },
+  noticeIcon: {
+    fontSize: 14
+  },
+  noticeText: {
+    flex: 1,
+    fontSize: 11,
+    color: _sharedUi.macOSColors.semantic.success,
+    lineHeight: 16
+  },
+  noticeTextWarning: {
+    color: _sharedUi.macOSColors.semantic.warning
+  }
+});

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

@@ -0,0 +1,418 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MMKVInstanceSelector = MMKVInstanceSelector;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _useMMKVInstances = require("../hooks/useMMKVInstances");
+var _mmkvAvailability = require("../utils/mmkvAvailability");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * MMKVInstanceSelector Component
+ *
+ * Dropdown selector for choosing between multiple MMKV instances.
+ * Shows instance ID, key count, and metadata badges (encrypted, read-only).
+ *
+ * Used in GameUIStorageBrowser when storage type filter is set to "mmkv".
+ */
+
+/**
+ * MMKV Instance Selector Component
+ *
+ * Displays a dropdown to select between registered MMKV instances.
+ *
+ * @example
+ * ```typescript
+ * function MyStorageUI() {
+ *   const [selectedInstance, setSelectedInstance] = useState('mmkv.default');
+ *
+ *   return (
+ *     <MMKVInstanceSelector
+ *       selectedInstanceId={selectedInstance}
+ *       onSelectInstance={setSelectedInstance}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+function MMKVInstanceSelector({
+  selectedInstanceId,
+  onSelectInstance,
+  showRefreshButton = true
+}) {
+  const [isDropdownOpen, setIsDropdownOpen] = (0, _react.useState)(false);
+  const {
+    instances,
+    instanceCount,
+    refresh
+  } = (0, _useMMKVInstances.useMMKVInstances)(false);
+
+  // Find the selected instance
+  const selectedInstance = instances.find(inst => inst.id === selectedInstanceId);
+
+  // Handle instance selection
+  const handleSelectInstance = instanceId => {
+    onSelectInstance(instanceId);
+    setIsDropdownOpen(false);
+  };
+
+  // If MMKV is not available, show unavailable message
+  if (!(0, _mmkvAvailability.isMMKVAvailable)()) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.container,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.unavailableState,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.unavailableTitle,
+          children: "MMKV Not Available"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.unavailableDescription,
+          children: (0, _mmkvAvailability.getMMKVUnavailableMessage)()
+        })]
+      })
+    });
+  }
+
+  // If no instances registered, show message
+  if (instanceCount === 0) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.container,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.emptyState,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.emptyStateTitle,
+          children: "No MMKV Instances Registered"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.emptyStateDescription,
+          children: "Register MMKV instances using registerMMKVInstance() to monitor them in dev tools."
+        }), showRefreshButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          style: styles.refreshButton,
+          onPress: refresh,
+          activeOpacity: 0.7,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.refreshButtonText,
+            children: "\u21BB Refresh"
+          })
+        })]
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.container,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      style: styles.selectorButton,
+      onPress: () => setIsDropdownOpen(true),
+      activeOpacity: 0.7,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.selectorContent,
+        children: selectedInstance ? /*#__PURE__*/(0, _jsxRuntime.jsx)(InstanceRow, {
+          instance: selectedInstance,
+          isSelected: true
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.placeholderText,
+          children: "Select MMKV Instance"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.dropdownArrow,
+        children: "\u25BC"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+      visible: isDropdownOpen,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: () => setIsDropdownOpen(false),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: styles.modalOverlay,
+        activeOpacity: 1,
+        onPress: () => setIsDropdownOpen(false),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.dropdownContainer,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.dropdownHeader,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+              style: styles.dropdownTitle,
+              children: ["Select MMKV Instance (", instanceCount, ")"]
+            }), showRefreshButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+              style: styles.headerRefreshButton,
+              onPress: refresh,
+              activeOpacity: 0.7,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.headerRefreshText,
+                children: "\u21BB"
+              })
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+            style: styles.dropdownList,
+            children: instances.map(instance => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+              style: [styles.dropdownItem, instance.id === selectedInstanceId && styles.dropdownItemSelected],
+              onPress: () => handleSelectInstance(instance.id),
+              activeOpacity: 0.7,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InstanceRow, {
+                instance: instance,
+                isSelected: instance.id === selectedInstanceId
+              })
+            }, instance.id))
+          })]
+        })
+      })
+    })]
+  });
+}
+
+/**
+ * Instance Row Component
+ *
+ * Displays a single MMKV instance with its metadata.
+ */
+function InstanceRow({
+  instance,
+  isSelected
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.instanceRow,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.instanceLeft,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.instanceId, isSelected && styles.instanceIdSelected],
+        numberOfLines: 1,
+        children: instance.id
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.instanceBadges,
+        children: [instance.encrypted && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.badge, styles.badgeEncrypted],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.badgeText,
+            children: "\uD83D\uDD12 Encrypted"
+          })
+        }), instance.readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.badge, styles.badgeReadOnly],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.badgeText,
+            children: "\uD83D\uDC41\uFE0F Read-only"
+          })
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.instanceRight,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.keyCount,
+        children: instance.keyCount
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.keyCountLabel,
+        children: "keys"
+      })]
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    marginBottom: 12
+  },
+  // Unavailable state
+  unavailableState: {
+    backgroundColor: _sharedUi.macOSColors.semantic.warning + '15',
+    borderRadius: 12,
+    padding: 20,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.semantic.warning + '40',
+    alignItems: 'center',
+    gap: 12
+  },
+  unavailableTitle: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: _sharedUi.macOSColors.semantic.warning
+  },
+  unavailableDescription: {
+    fontSize: 12,
+    color: _sharedUi.macOSColors.text.secondary,
+    textAlign: 'center',
+    lineHeight: 18
+  },
+  // Empty state
+  emptyState: {
+    backgroundColor: _sharedUi.macOSColors.background.card,
+    borderRadius: 12,
+    padding: 20,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.default + '50',
+    alignItems: 'center',
+    gap: 12
+  },
+  emptyStateTitle: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: _sharedUi.macOSColors.text.primary
+  },
+  emptyStateDescription: {
+    fontSize: 12,
+    color: _sharedUi.macOSColors.text.muted,
+    textAlign: 'center',
+    lineHeight: 18
+  },
+  refreshButton: {
+    marginTop: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    backgroundColor: _sharedUi.macOSColors.semantic.info + '20',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.semantic.info + '40'
+  },
+  refreshButtonText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: _sharedUi.macOSColors.semantic.info
+  },
+  // Selector button
+  selectorButton: {
+    backgroundColor: _sharedUi.macOSColors.background.card,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.default + '50',
+    padding: 12,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    shadowColor: '#000000',
+    shadowOpacity: 0.03,
+    shadowRadius: 8,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    }
+  },
+  selectorContent: {
+    flex: 1
+  },
+  placeholderText: {
+    fontSize: 13,
+    color: _sharedUi.macOSColors.text.muted,
+    fontStyle: 'italic'
+  },
+  dropdownArrow: {
+    fontSize: 10,
+    color: _sharedUi.macOSColors.text.muted,
+    marginLeft: 8
+  },
+  // Modal overlay
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20
+  },
+  // Dropdown container
+  dropdownContainer: {
+    backgroundColor: _sharedUi.macOSColors.background.card,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.default,
+    width: '100%',
+    maxWidth: 500,
+    maxHeight: '70%',
+    shadowColor: '#000000',
+    shadowOpacity: 0.2,
+    shadowRadius: 20,
+    shadowOffset: {
+      width: 0,
+      height: 10
+    },
+    overflow: 'hidden'
+  },
+  dropdownHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.macOSColors.border.default + '50'
+  },
+  dropdownTitle: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: _sharedUi.macOSColors.text.primary
+  },
+  headerRefreshButton: {
+    padding: 4
+  },
+  headerRefreshText: {
+    fontSize: 18,
+    color: _sharedUi.macOSColors.semantic.info
+  },
+  dropdownList: {
+    maxHeight: 400
+  },
+  dropdownItem: {
+    padding: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.macOSColors.border.default + '30'
+  },
+  dropdownItemSelected: {
+    backgroundColor: _sharedUi.macOSColors.semantic.info + '10'
+  },
+  // Instance row
+  instanceRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 12
+  },
+  instanceLeft: {
+    flex: 1,
+    gap: 6
+  },
+  instanceId: {
+    fontSize: 13,
+    fontWeight: '500',
+    color: _sharedUi.macOSColors.text.primary,
+    fontFamily: 'monospace'
+  },
+  instanceIdSelected: {
+    fontWeight: '600',
+    color: _sharedUi.macOSColors.semantic.info
+  },
+  instanceBadges: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 6
+  },
+  badge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
+    borderWidth: 1
+  },
+  badgeEncrypted: {
+    backgroundColor: _sharedUi.macOSColors.semantic.success + '15',
+    borderColor: _sharedUi.macOSColors.semantic.success + '40'
+  },
+  badgeReadOnly: {
+    backgroundColor: _sharedUi.macOSColors.semantic.warning + '15',
+    borderColor: _sharedUi.macOSColors.semantic.warning + '40'
+  },
+  badgeText: {
+    fontSize: 9,
+    fontWeight: '500',
+    color: _sharedUi.macOSColors.text.secondary
+  },
+  instanceRight: {
+    alignItems: 'flex-end'
+  },
+  keyCount: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: _sharedUi.macOSColors.text.primary,
+    fontFamily: 'monospace'
+  },
+  keyCountLabel: {
+    fontSize: 9,
+    color: _sharedUi.macOSColors.text.muted,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5
+  }
+});