@rozenite/storage-plugin 2.1.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozenite/storage-plugin",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "Generic Storage Inspector for Rozenite.",
   "homepage": "https://github.com/callstackincubator/rozenite#readme",
   "bugs": {
@@ -12,20 +12,19 @@
     "url": "https://github.com/callstackincubator/rozenite.git"
   },
   "type": "module",
-  "main": "./dist/react-native/index.cjs",
-  "module": "./dist/react-native/index.js",
-  "types": "./dist/react-native/index.d.ts",
+  "main": "./dist/react-native/cjs/react-native.js",
+  "module": "./dist/react-native/react-native.js",
+  "types": "./dist/react-native/react-native.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/react-native/index.d.ts",
-      "import": "./dist/react-native/index.js",
-      "require": "./dist/react-native/index.cjs"
+      "types": "./dist/react-native/react-native.d.ts",
+      "import": "./dist/react-native/react-native.js",
+      "require": "./dist/react-native/cjs/react-native.js"
     },
     "./sdk": {
       "development": "./sdk.ts",
-      "types": "./dist/sdk/index.d.ts",
-      "import": "./dist/sdk/index.js",
-      "require": "./dist/sdk/index.cjs"
+      "types": "./dist/sdk/sdk.d.ts",
+      "default": "./dist/sdk/sdk.js"
     },
     "./package.json": "./package.json"
   },
@@ -33,10 +32,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@rozenite/agent-bridge": "2.1.0",
-    "@rozenite/agent-shared": "2.1.0",
-    "@rozenite/plugin-bridge": "2.1.0",
-    "@rozenite/ui": "2.1.0"
+    "@rozenite/agent-shared": "2.3.0",
+    "@rozenite/plugin-bridge": "2.3.0",
+    "@rozenite/ui": "2.3.0",
+    "@rozenite/agent-bridge": "2.3.0"
   },
   "devDependencies": {
     "@codemirror/commands": "^6.10.3",
@@ -57,8 +56,9 @@
     "react-virtuoso": "^4.14.1",
     "typescript": "~5.9.3",
     "vite": "^7.3.1",
-    "@rozenite/vite-plugin": "2.1.0",
-    "rozenite": "2.1.0"
+    "@rozenite/test-utils": "2.3.0",
+    "@rozenite/vite-plugin": "2.3.0",
+    "rozenite": "2.3.0"
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": "*",

package/react-native.ts

@@ -26,8 +26,15 @@ export let createMMKVStorageAdapter: typeof import('./src/react-native/adapters'
 export let useRozeniteStoragePlugin: typeof import('./src/react-native/useRozeniteStoragePlugin').useRozeniteStoragePlugin;
 
 const isWeb = typeof window !== 'undefined' && window.navigator.product !== 'ReactNative';
+// Neither Lynx runtime has a `window`, so `typeof window` alone reported
+// every Lynx app as a server and installed the no-op stub below. `lynx` is
+// a free binding in module scope, not a property of `globalThis`. Kept
+// inline rather than imported so this stays a foldable expression and the
+// `require`s below can still be dropped from production bundles.
+declare const lynx: unknown;
+
 const isDev = process.env.NODE_ENV !== 'production';
-const isServer = typeof window === 'undefined';
+const isServer = typeof window === 'undefined' && typeof lynx === 'undefined';
 
 const createNoopStorageAdapter = (
   options: { adapterId?: string; adapterName?: string } | undefined,

package/rozenite.config.ts

@@ -51,6 +51,7 @@ const storageFixtures = [
 ];
 
 export default {
+  integrations: ['react-native'],
   panels: [
     {
       name: 'Storage',

package/src/__tests__/release-bundle.test.ts

@@ -0,0 +1,32 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { bundleForRelease, RELEASE_BUNDLE_TIMEOUT } from '@rozenite/test-utils';
+import { describe, expect, it } from 'vitest';
+
+// An app importing this plugin ships its React Native code -- that much is
+// the app's own choice. What must never follow it into the bundle is the
+// panel: the DevTools UI, its React DOM tree and `@rozenite/ui`.
+// See docs/agents/release-bundle-testing.md.
+const packageRoot = path.resolve(fileURLToPath(import.meta.url), '../../..');
+const reactNativeEntry = path.join(packageRoot, 'dist/react-native/cjs/react-native.js');
+
+describe('@rozenite/storage-plugin in a release bundle', () => {
+  it(
+    'ships no panel code when an app imports it',
+    async () => {
+      const result = await bundleForRelease({
+        resolveFrom: packageRoot,
+        files: {
+          'index.js': `require(${JSON.stringify(reactNativeEntry)});\n`,
+        },
+      });
+
+      // Keeps the check below honest: the entry really did get bundled.
+      expect(result.rozeniteModules).toContain(
+        'packages/storage-plugin/dist/react-native/cjs/react-native.js',
+      );
+      expect(result.panelModules).toEqual([]);
+    },
+    RELEASE_BUNDLE_TIMEOUT,
+  );
+});

package/src/ui/__tests__/panel.test.tsx

@@ -93,9 +93,23 @@ vi.mock('@rozenite/ui', async () => {
     Button: ({ children, onClick }: { children?: ReactNode; onClick?: () => void }) => (
       <button onClick={onClick}>{children}</button>
     ),
+    IconButton: ({
+      children,
+      onClick,
+      label,
+    }: {
+      children?: ReactNode;
+      onClick?: () => void;
+      label: string;
+    }) => (
+      <button onClick={onClick} aria-label={label}>
+        {children}
+      </button>
+    ),
     ConfirmDialog: () => null,
     EmptyState: () => <div />,
     PluginShell,
+    useConfirmDialog: () => async () => true,
     SearchField: ({
       value,
       onChange,

package/src/ui/add-entry-dialog.tsx

@@ -1,4 +1,4 @@
-import { Button, ConfirmDialog, Dialog, Field, Input } from '@rozenite/ui';
+import { Button, Dialog, Field, Input, useConfirmDialog } from '@rozenite/ui';
 import { useEffect, useState } from 'react';
 import type { StorageEntry, StorageEntryType, StorageEntryValue } from '../shared/types';
 import { TypedValueEditor } from './typed-value-editor';
@@ -45,7 +45,7 @@ export const AddEntryDialog = ({
   const [currentValue, setCurrentValue] = useState<StorageEntryValue | null>(
     defaultValueForType(initialType),
   );
-  const [alert, setAlert] = useState<{ title: string; message: string } | null>(null);
+  const confirm = useConfirmDialog();
 
   // Reset state every time the dialog opens, so a previous session's
   // type / value doesn't bleed in.
@@ -66,21 +66,23 @@ export const AddEntryDialog = ({
     onClose();
   };
 
-  const handleAdd = () => {
+  const handleAdd = async () => {
     if (!newEntryKey.trim() || currentValue === null) return;
 
     if (!isCurrentTypeSupported) {
-      setAlert({
+      await confirm({
+        variant: 'alert',
         title: 'Unsupported Type',
-        message: 'Selected type is not supported by this storage.',
+        description: 'Selected type is not supported by this storage.',
       });
       return;
     }
 
     if (existingKeys.includes(newEntryKey)) {
-      setAlert({
+      await confirm({
+        variant: 'alert',
         title: 'Key Already Exists',
-        message: 'An entry with this key already exists.',
+        description: 'An entry with this key already exists.',
       });
       return;
     }
@@ -91,7 +93,7 @@ export const AddEntryDialog = ({
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
     if (event.key === 'Enter' && newEntryKey.trim() && currentType !== 'buffer') {
-      handleAdd();
+      void handleAdd();
     }
   };
 
@@ -100,70 +102,58 @@ export const AddEntryDialog = ({
   const isAddDisabled = !newEntryKey.trim() || !isCurrentTypeSupported || currentValue === null;
 
   return (
-    <>
-      <Dialog
-        open={isOpen}
-        onOpenChange={(open) => {
-          if (!open) resetAndClose();
-        }}
-      >
-        <Dialog.Content onKeyDown={handleKeyDown}>
-          <Dialog.Header>
-            <Dialog.Title>Add New Entry</Dialog.Title>
-          </Dialog.Header>
-
-          <div className="flex flex-col gap-4">
-            <Field>
-              <Field.Label htmlFor="new-entry-key">Key</Field.Label>
-              <Input
-                id="new-entry-key"
-                value={newEntryKey}
-                onChange={(event) => setNewEntryKey(event.target.value)}
-                placeholder="Enter key name"
-                autoFocus
-              />
-            </Field>
-
-            <Field>
-              <Field.Label htmlFor="new-entry-value">Value</Field.Label>
-              <TypedValueEditor
-                supportedTypes={supportedTypes}
-                type={currentType}
-                value={currentValue}
-                onChange={(nextType, nextValue) => {
-                  setCurrentType(nextType);
-                  setCurrentValue(nextValue);
-                }}
-                inputId="new-entry-value"
-              />
-              {!isCurrentTypeSupported && (
-                <Field.Description className="text-destructive">
-                  Selected type is not supported by this storage.
-                </Field.Description>
-              )}
-            </Field>
-          </div>
-
-          <Dialog.Footer>
-            <Button variant="outline" onClick={resetAndClose}>
-              Cancel
-            </Button>
-            <Button onClick={handleAdd} disabled={isAddDisabled}>
-              Add Entry
-            </Button>
-          </Dialog.Footer>
-        </Dialog.Content>
-      </Dialog>
-
-      <ConfirmDialog
-        open={alert !== null}
-        onOpenChange={(open) => {
-          if (!open) setAlert(null);
-        }}
-        variant="alert"
-        title={alert?.title ?? ''}
-        description={alert?.message}
-      />
-    </>
+    <Dialog
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) resetAndClose();
+      }}
+    >
+      <Dialog.Content onKeyDown={handleKeyDown}>
+        <Dialog.Header>
+          <Dialog.Title>Add New Entry</Dialog.Title>
+        </Dialog.Header>
+
+        <div className="flex flex-col gap-4">
+          <Field>
+            <Field.Label htmlFor="new-entry-key">Key</Field.Label>
+            <Input
+              id="new-entry-key"
+              value={newEntryKey}
+              onChange={(event) => setNewEntryKey(event.target.value)}
+              placeholder="Enter key name"
+              autoFocus
+            />
+          </Field>
+
+          <Field>
+            <Field.Label htmlFor="new-entry-value">Value</Field.Label>
+            <TypedValueEditor
+              supportedTypes={supportedTypes}
+              type={currentType}
+              value={currentValue}
+              onChange={(nextType, nextValue) => {
+                setCurrentType(nextType);
+                setCurrentValue(nextValue);
+              }}
+              inputId="new-entry-value"
+            />
+            {!isCurrentTypeSupported && (
+              <Field.Description className="text-danger">
+                Selected type is not supported by this storage.
+              </Field.Description>
+            )}
+          </Field>
+        </div>
+
+        <Dialog.Footer>
+          <Button tone="neutral" variant="outline" onClick={resetAndClose}>
+            Cancel
+          </Button>
+          <Button onClick={() => void handleAdd()} disabled={isAddDisabled}>
+            Add Entry
+          </Button>
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog>
   );
 };

package/src/ui/binary-value-editor.tsx

@@ -173,7 +173,7 @@ export const BinaryValueEditor = ({ initialBytes, onChange }: BinaryValueEditorP
             ASCII: <span className="font-mono text-foreground">{asciiPreview}</span>
           </div>
         )}
-        {state.error && <div className="text-destructive">{state.error}</div>}
+        {state.error && <div className="text-danger">{state.error}</div>}
       </div>
     </div>
   );

package/src/ui/edit-entry-dialog.tsx

@@ -1,4 +1,4 @@
-import { Button, ConfirmDialog, Dialog, Field } from '@rozenite/ui';
+import { Button, Dialog, Field, useConfirmDialog } from '@rozenite/ui';
 import { useEffect, useRef, useState } from 'react';
 import type { StorageEntry, StorageEntryType, StorageEntryValue } from '../shared/types';
 import { TypedValueEditor } from './typed-value-editor';
@@ -28,7 +28,7 @@ export const EditEntryDialog = ({
   const [currentValue, setCurrentValue] = useState<StorageEntryValue | null>(
     defaultValueForType('string'),
   );
-  const [alert, setAlert] = useState<{ title: string; message: string } | null>(null);
+  const confirm = useConfirmDialog();
 
   useEffect(() => {
     if (entry && isOpen) {
@@ -48,13 +48,14 @@ export const EditEntryDialog = ({
     onClose();
   };
 
-  const handleSave = () => {
+  const handleSave = async () => {
     if (!entry || currentValue === null) return;
 
     if (!isCurrentTypeSupported) {
-      setAlert({
+      await confirm({
+        variant: 'alert',
         title: 'Unsupported Type',
-        message: 'This storage does not support the selected type.',
+        description: 'This storage does not support the selected type.',
       });
       return;
     }
@@ -65,7 +66,7 @@ export const EditEntryDialog = ({
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
     if (event.key === 'Enter' && currentType !== 'buffer') {
-      handleSave();
+      void handleSave();
     }
   };
 
@@ -79,69 +80,57 @@ export const EditEntryDialog = ({
   const isSaveDisabled = !isCurrentTypeSupported || currentValue === null;
 
   return (
-    <>
-      <Dialog
-        open={isOpen}
-        onOpenChange={(open) => {
-          if (!open) resetAndClose();
-        }}
-      >
-        <Dialog.Content onKeyDown={handleKeyDown}>
-          <Dialog.Header>
-            <Dialog.Title>Edit Entry</Dialog.Title>
-          </Dialog.Header>
-
-          <div className="flex flex-col gap-4">
-            <Field>
-              <Field.Label>Key</Field.Label>
-              <div className="h-8 w-full truncate rounded-md border border-input bg-muted px-3 py-1.5 font-mono text-sm text-foreground">
-                {entryForDisplay.key}
-              </div>
-              <Field.Description>Key cannot be changed during editing</Field.Description>
-            </Field>
-
-            <Field>
-              <Field.Label htmlFor="edit-entry-value">Value</Field.Label>
-              <TypedValueEditor
-                key={entryForDisplay.key}
-                supportedTypes={supportedTypes}
-                type={currentType}
-                value={currentValue}
-                onChange={(nextType, nextValue) => {
-                  setCurrentType(nextType);
-                  setCurrentValue(nextValue);
-                }}
-                inputId="edit-entry-value"
-                autoFocus
-              />
-              {!isCurrentTypeSupported && (
-                <Field.Description className="text-destructive">
-                  This storage does not support {currentType} values.
-                </Field.Description>
-              )}
-            </Field>
-          </div>
-
-          <Dialog.Footer>
-            <Button variant="outline" onClick={resetAndClose}>
-              Cancel
-            </Button>
-            <Button onClick={handleSave} disabled={isSaveDisabled}>
-              Save Changes
-            </Button>
-          </Dialog.Footer>
-        </Dialog.Content>
-      </Dialog>
-
-      <ConfirmDialog
-        open={alert !== null}
-        onOpenChange={(open) => {
-          if (!open) setAlert(null);
-        }}
-        variant="alert"
-        title={alert?.title ?? ''}
-        description={alert?.message}
-      />
-    </>
+    <Dialog
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) resetAndClose();
+      }}
+    >
+      <Dialog.Content onKeyDown={handleKeyDown}>
+        <Dialog.Header>
+          <Dialog.Title>Edit Entry</Dialog.Title>
+        </Dialog.Header>
+
+        <div className="flex flex-col gap-4">
+          <Field>
+            <Field.Label>Key</Field.Label>
+            <div className="h-8 w-full truncate rounded-md border border-input bg-muted px-3 py-1.5 font-mono text-sm text-foreground">
+              {entryForDisplay.key}
+            </div>
+            <Field.Description>Key cannot be changed during editing</Field.Description>
+          </Field>
+
+          <Field>
+            <Field.Label htmlFor="edit-entry-value">Value</Field.Label>
+            <TypedValueEditor
+              key={entryForDisplay.key}
+              supportedTypes={supportedTypes}
+              type={currentType}
+              value={currentValue}
+              onChange={(nextType, nextValue) => {
+                setCurrentType(nextType);
+                setCurrentValue(nextValue);
+              }}
+              inputId="edit-entry-value"
+              autoFocus
+            />
+            {!isCurrentTypeSupported && (
+              <Field.Description className="text-danger">
+                This storage does not support {currentType} values.
+              </Field.Description>
+            )}
+          </Field>
+        </div>
+
+        <Dialog.Footer>
+          <Button tone="neutral" variant="outline" onClick={resetAndClose}>
+            Cancel
+          </Button>
+          <Button onClick={() => void handleSave()} disabled={isSaveDisabled}>
+            Save Changes
+          </Button>
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog>
   );
 };

package/src/ui/entry-detail-dialog.tsx

@@ -69,7 +69,9 @@ export const EntryDetailDialog = ({
 
             <div>
               <div className="mb-1 text-sm font-medium text-foreground">Type</div>
-              <Badge variant="outline">{entry.type}</Badge>
+              <Badge tone="neutral" variant="outline">
+                {entry.type}
+              </Badge>
             </div>
 
             <div className="flex min-h-0 flex-1 flex-col">
@@ -96,7 +98,7 @@ export const EntryDetailDialog = ({
 
         <Dialog.Footer>
           {entry && onEdit && (
-            <Button variant="outline" onClick={() => onEdit(entry)}>
+            <Button tone="neutral" variant="outline" onClick={() => onEdit(entry)}>
               <Edit3 className="h-3.5 w-3.5" />
               Edit
             </Button>

package/src/ui/format-value.tsx

@@ -13,7 +13,7 @@ export const formatValue = (entry: StorageEntry) => {
 
   if (entry.type === 'boolean') {
     return (
-      <span className={cn('font-mono', entry.value ? 'text-primary' : 'text-destructive')}>
+      <span className={cn('font-mono', entry.value ? 'text-primary' : 'text-danger')}>
         {entry.value ? 'true' : 'false'}
       </span>
     );

package/src/ui/import-dialog.tsx

@@ -89,7 +89,7 @@ const PreviewBody = ({
         )}
 
         {hasUnsupported && (
-          <div className="flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/10 p-2 text-xs text-destructive">
+          <div className="flex items-start gap-2 rounded-md border border-danger/40 bg-danger/10 p-2 text-xs text-danger">
             <XCircle className="mt-0.5 h-4 w-4 shrink-0" />
             <div>
               {preview.unsupportedTypes.length}{' '}
@@ -117,7 +117,7 @@ const PreviewBody = ({
       </div>
 
       <Dialog.Footer>
-        <Button variant="outline" onClick={onCancel}>
+        <Button tone="neutral" variant="outline" onClick={onCancel}>
           Cancel
         </Button>
         <Button onClick={onApply} disabled={hasUnsupported}>
@@ -158,7 +158,7 @@ const ResultBody = ({
       </div>
     ) : (
       <div className="flex flex-col gap-2 py-2">
-        <div className="flex items-center gap-2 text-destructive">
+        <div className="flex items-center gap-2 text-danger">
           <XCircle className="h-5 w-5" />
           <div className="text-sm font-medium">
             Import failed after {state.written} of {state.total}.
@@ -167,12 +167,12 @@ const ResultBody = ({
         {state.failedKey && (
           <div className="text-xs text-muted-foreground">
             Failed at key:{' '}
-            <Badge variant="outline" className="font-mono">
+            <Badge tone="neutral" variant="outline" className="font-mono">
               {state.failedKey}
             </Badge>
           </div>
         )}
-        <div className="rounded-md bg-muted px-2 py-1 font-mono text-xs text-destructive">
+        <div className="rounded-md bg-muted px-2 py-1 font-mono text-xs text-danger">
           {state.error}
         </div>
       </div>