@rozenite/storage-plugin 2.0.0 → 2.1.0

package/src/ui/__tests__/use-storage-entries.test.tsx

@@ -97,11 +97,8 @@ describe('storage entry query hooks', () => {
       if (payload.cursor === undefined)
         return Promise.resolve(response(undefined, { next: 'next' }));
       if (payload.cursor === 'next')
-        return Promise.resolve(
-          response('next', { next: 'last', previous: 'first' }),
-        );
-      if (payload.cursor === 'last')
-        return Promise.resolve(response('last', { previous: 'next' }));
+        return Promise.resolve(response('next', { next: 'last', previous: 'first' }));
+      if (payload.cursor === 'last') return Promise.resolve(response('last', { previous: 'next' }));
       return Promise.resolve(response('first', { next: 'next' }));
     });
     const hook = await renderPreviewHook({
@@ -117,9 +114,11 @@ describe('storage entry query hooks', () => {
     });
     await act(async () => hook.result.fetchNextPage());
     await act(async () => hook.result.fetchNextPage());
-    expect(
-      request.mock.calls.map(([options]) => options.payload.cursor),
-    ).toEqual([undefined, 'next', 'last']);
+    expect(request.mock.calls.map(([options]) => options.payload.cursor)).toEqual([
+      undefined,
+      'next',
+      'last',
+    ]);
     const queryKey = storageEntryPreviewQueryKey(target, '', 'ascending');
     const pageKeys = () =>
       hook.queryClient
@@ -134,9 +133,7 @@ describe('storage entry query hooks', () => {
 
   it('cancels stale target requests and starts a new sequence at the first page', async () => {
     globalThis.IS_REACT_ACT_ENVIRONMENT = true;
-    let resolveFirst:
-      | ((value: ReturnType<typeof response>) => void)
-      | undefined;
+    let resolveFirst: ((value: ReturnType<typeof response>) => void) | undefined;
     const request = vi.fn(({ payload }) => {
       if (payload.target === target) {
         return new Promise((resolve) => {
@@ -171,8 +168,7 @@ describe('storage entry query hooks', () => {
       expect(
         hook.queryClient.getQueryData<{
           pages: Array<ReturnType<typeof response>>;
-        }>(storageEntryPreviewQueryKey(otherTarget, 'two', 'descending'))
-          ?.pages[0].target,
+        }>(storageEntryPreviewQueryKey(otherTarget, 'two', 'descending'))?.pages[0].target,
       ).toEqual(otherTarget),
     );
     await hook.unmount();
@@ -243,9 +239,7 @@ describe('storage entry query hooks', () => {
 
   it('resets every selected-storage preview variant but refetches only the active first page', async () => {
     globalThis.IS_REACT_ACT_ENVIRONMENT = true;
-    const request = vi.fn(({ payload }) =>
-      Promise.resolve(response(payload.cursor)),
-    );
+    const request = vi.fn(({ payload }) => Promise.resolve(response(payload.cursor)));
     const hook = await renderPreviewHook({
       client: asClient(request),
       target,
@@ -255,28 +249,22 @@ describe('storage entry query hooks', () => {
     await act(async () => {
       await vi.waitFor(() => expect(hook.result.isSuccess).toBe(true));
     });
-    hook.queryClient.setQueryData(
-      storageEntryPreviewQueryKey(target, 'inactive', 'ascending'),
-      { pages: [response(undefined)], pageParams: [undefined] },
-    );
+    hook.queryClient.setQueryData(storageEntryPreviewQueryKey(target, 'inactive', 'ascending'), {
+      pages: [response(undefined)],
+      pageParams: [undefined],
+    });
 
-    await act(async () =>
-      resetSelectedStorageQueries(hook.queryClient, target),
-    );
+    await act(async () => resetSelectedStorageQueries(hook.queryClient, target));
     expect(request).toHaveBeenCalledTimes(2);
     expect(
-      hook.queryClient.getQueryData(
-        storageEntryPreviewQueryKey(target, 'inactive', 'ascending'),
-      ),
+      hook.queryClient.getQueryData(storageEntryPreviewQueryKey(target, 'inactive', 'ascending')),
     ).toBeUndefined();
     await hook.unmount();
   });
 
   it('invalidates only the changed storage preview prefix and drops its stale full value', async () => {
     globalThis.IS_REACT_ACT_ENVIRONMENT = true;
-    const request = vi.fn(({ payload }) =>
-      Promise.resolve(response(payload.cursor)),
-    );
+    const request = vi.fn(({ payload }) => Promise.resolve(response(payload.cursor)));
     const hook = await renderPreviewHook({
       client: asClient(request),
       target,
@@ -286,11 +274,7 @@ describe('storage entry query hooks', () => {
     await act(async () => {
       await vi.waitFor(() => expect(hook.result.isSuccess).toBe(true));
     });
-    const otherQueryKey = storageEntryPreviewQueryKey(
-      otherTarget,
-      'other',
-      'ascending',
-    );
+    const otherQueryKey = storageEntryPreviewQueryKey(otherTarget, 'other', 'ascending');
     hook.queryClient.setQueryDefaults(otherQueryKey, { gcTime: Infinity });
     hook.queryClient.setQueryData(otherQueryKey, {
       pages: [response(undefined)],

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

@@ -1,10 +1,6 @@
 import { Button, ConfirmDialog, Dialog, Field, Input } from '@rozenite/ui';
 import { useEffect, useState } from 'react';
-import type {
-  StorageEntry,
-  StorageEntryType,
-  StorageEntryValue,
-} from '../shared/types';
+import type { StorageEntry, StorageEntryType, StorageEntryValue } from '../shared/types';
 import { TypedValueEditor } from './typed-value-editor';
 import { defaultValueForType } from './type-conversion';
 
@@ -49,9 +45,7 @@ export const AddEntryDialog = ({
   const [currentValue, setCurrentValue] = useState<StorageEntryValue | null>(
     defaultValueForType(initialType),
   );
-  const [alert, setAlert] = useState<{ title: string; message: string } | null>(
-    null,
-  );
+  const [alert, setAlert] = useState<{ title: string; message: string } | null>(null);
 
   // Reset state every time the dialog opens, so a previous session's
   // type / value doesn't bleed in.
@@ -96,19 +90,14 @@ export const AddEntryDialog = ({
   };
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (
-      event.key === 'Enter' &&
-      newEntryKey.trim() &&
-      currentType !== 'buffer'
-    ) {
+    if (event.key === 'Enter' && newEntryKey.trim() && currentType !== 'buffer') {
       handleAdd();
     }
   };
 
   // Unsavable when no key, no supported type, or when the value is
   // null — the hex editor signals invalid / empty hex via null.
-  const isAddDisabled =
-    !newEntryKey.trim() || !isCurrentTypeSupported || currentValue === null;
+  const isAddDisabled = !newEntryKey.trim() || !isCurrentTypeSupported || currentValue === null;
 
   return (
     <>

package/src/ui/binary-value-editor-state.ts

@@ -1,9 +1,4 @@
-import {
-  base64ToBytes,
-  bytesToBase64,
-  bytesToGroupedHex,
-  hexInputToBytes,
-} from './binary';
+import { base64ToBytes, bytesToBase64, bytesToGroupedHex, hexInputToBytes } from './binary';
 
 export type EditorMode = 'hex' | 'base64';
 
@@ -20,9 +15,7 @@ export type EditorAction =
   | { type: 'switch-mode'; mode: EditorMode }
   | { type: 'replace-bytes'; bytes: number[] };
 
-export type Validation =
-  | { ok: true; bytes: number[] }
-  | { ok: false; reason: string };
+export type Validation = { ok: true; bytes: number[] } | { ok: false; reason: string };
 
 const encode = (bytes: readonly number[], mode: EditorMode): string =>
   mode === 'hex' ? bytesToGroupedHex(bytes) : bytesToBase64(bytes);
@@ -30,20 +23,12 @@ const encode = (bytes: readonly number[], mode: EditorMode): string =>
 const parse = (text: string, mode: EditorMode) =>
   mode === 'hex' ? hexInputToBytes(text) : base64ToBytes(text);
 
-const parsedToState = (
-  text: string,
-  mode: EditorMode,
-): Pick<EditorState, 'bytes' | 'error'> => {
+const parsedToState = (text: string, mode: EditorMode): Pick<EditorState, 'bytes' | 'error'> => {
   const result = parse(text, mode);
-  return result.ok
-    ? { bytes: result.value, error: null }
-    : { bytes: null, error: result.error };
+  return result.ok ? { bytes: result.value, error: null } : { bytes: null, error: result.error };
 };
 
-export const initialState = (args: {
-  initialBytes?: number[];
-  mode?: EditorMode;
-}): EditorState => {
+export const initialState = (args: { initialBytes?: number[]; mode?: EditorMode }): EditorState => {
   const mode = args.mode ?? 'hex';
   if (args.initialBytes && args.initialBytes.length > 0) {
     return {
@@ -61,10 +46,7 @@ export const initialState = (args: {
   };
 };
 
-export const reduce = (
-  state: EditorState,
-  action: EditorAction,
-): EditorState => {
+export const reduce = (state: EditorState, action: EditorAction): EditorState => {
   switch (action.type) {
     case 'set-text': {
       return {

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

@@ -4,11 +4,7 @@ import { EditorView, keymap } from '@codemirror/view';
 import { cn } from '@rozenite/ui';
 import { useEffect, useReducer, useRef, useState } from 'react';
 import { compactAsciiPreview } from './binary';
-import {
-  initialState,
-  reduce,
-  type EditorMode,
-} from './binary-value-editor-state';
+import { initialState, reduce, type EditorMode } from './binary-value-editor-state';
 
 export type BinaryValueEditorProps = {
   initialBytes?: number[];
@@ -57,13 +53,8 @@ const ModeButton = ({
   </button>
 );
 
-export const BinaryValueEditor = ({
-  initialBytes,
-  onChange,
-}: BinaryValueEditorProps) => {
-  const [state, dispatch] = useReducer(reduce, undefined, () =>
-    initialState({}),
-  );
+export const BinaryValueEditor = ({ initialBytes, onChange }: BinaryValueEditorProps) => {
+  const [state, dispatch] = useReducer(reduce, undefined, () => initialState({}));
   const initialBytesRef = useRef(initialBytes);
   const [isPreparing, setIsPreparing] = useState(
     Boolean(initialBytesRef.current && initialBytesRef.current.length > 0),
@@ -108,9 +99,7 @@ export const BinaryValueEditor = ({
             if (!update.docChanged) return;
             const newText = update.state.doc.toString();
             if (newText === stateRef.current.text) return;
-            const isPaste = update.transactions.some((tr) =>
-              tr.isUserEvent('input.paste'),
-            );
+            const isPaste = update.transactions.some((tr) => tr.isUserEvent('input.paste'));
             dispatch({
               type: isPaste ? 'normalize-paste' : 'set-text',
               text: newText,
@@ -181,8 +170,7 @@ export const BinaryValueEditor = ({
         <div className="text-muted-foreground">{byteCount} bytes</div>
         {asciiPreview && (
           <div className="overflow-hidden text-ellipsis whitespace-nowrap text-muted-foreground">
-            ASCII:{' '}
-            <span className="font-mono text-foreground">{asciiPreview}</span>
+            ASCII: <span className="font-mono text-foreground">{asciiPreview}</span>
           </div>
         )}
         {state.error && <div className="text-destructive">{state.error}</div>}

package/src/ui/binary.ts

@@ -1,6 +1,4 @@
-export type ParseResult<T> =
-  | { ok: true; value: T }
-  | { ok: false; error: string };
+export type ParseResult<T> = { ok: true; value: T } | { ok: false; error: string };
 
 const BYTES_PER_LINE = 16;
 const BYTES_PER_GROUP = 8;
@@ -11,13 +9,10 @@ const OFFSET_WIDTH = 8;
 const ASCII_PRINTABLE_MIN = 0x20;
 const ASCII_PRINTABLE_MAX = 0x7e;
 
-const toHexPair = (byte: number): string =>
-  byte.toString(16).toUpperCase().padStart(2, '0');
+const toHexPair = (byte: number): string => byte.toString(16).toUpperCase().padStart(2, '0');
 
 const toAsciiChar = (byte: number): string =>
-  byte >= ASCII_PRINTABLE_MIN && byte <= ASCII_PRINTABLE_MAX
-    ? String.fromCharCode(byte)
-    : '.';
+  byte >= ASCII_PRINTABLE_MIN && byte <= ASCII_PRINTABLE_MAX ? String.fromCharCode(byte) : '.';
 
 const formatHexLine = (slice: readonly number[]): string => {
   const left = slice.slice(0, BYTES_PER_GROUP).map(toHexPair).join(' ');
@@ -33,10 +28,7 @@ export type HexdumpRow = {
 
 // Produces one visible hexdump row. Unlike bytesToHexdump this never builds a
 // representation for bytes outside the requested row.
-export const formatHexdumpRow = (
-  bytes: readonly number[],
-  rowStart: number,
-): HexdumpRow => {
+export const formatHexdumpRow = (bytes: readonly number[], rowStart: number): HexdumpRow => {
   let left = '';
   let right = '';
   let ascii = '';
@@ -82,10 +74,7 @@ export const bytesToHexdump = (bytes: readonly number[]): string => {
 export const bytesToAsciiPreview = (bytes: readonly number[]): string =>
   bytes.map(toAsciiChar).join('');
 
-export const compactAsciiPreview = (
-  bytes: readonly number[],
-  maxBytes = 64,
-): string => {
+export const compactAsciiPreview = (bytes: readonly number[], maxBytes = 64): string => {
   let preview = '';
   const limit = Math.min(bytes.length, maxBytes);
   for (let index = 0; index < limit; index++) {
@@ -133,9 +122,7 @@ const TRAILING_ASCII_COLUMN_RE = /\|[^|]*\|\s*$/;
 export const hexInputToBytes = (input: string): ParseResult<number[]> => {
   const cleaned = input
     .split(/\r?\n/)
-    .map((line) =>
-      line.replace(TRAILING_ASCII_COLUMN_RE, '').replace(HEXDUMP_OFFSET_RE, ''),
-    )
+    .map((line) => line.replace(TRAILING_ASCII_COLUMN_RE, '').replace(HEXDUMP_OFFSET_RE, ''))
     .join('')
     .replace(/0x/gi, '')
     .replace(/\s+/g, '');

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

@@ -1,10 +1,6 @@
 import { Button, ConfirmDialog, Dialog, Field } from '@rozenite/ui';
 import { useEffect, useRef, useState } from 'react';
-import type {
-  StorageEntry,
-  StorageEntryType,
-  StorageEntryValue,
-} from '../shared/types';
+import type { StorageEntry, StorageEntryType, StorageEntryValue } from '../shared/types';
 import { TypedValueEditor } from './typed-value-editor';
 import { defaultValueForType } from './type-conversion';
 
@@ -32,9 +28,7 @@ export const EditEntryDialog = ({
   const [currentValue, setCurrentValue] = useState<StorageEntryValue | null>(
     defaultValueForType('string'),
   );
-  const [alert, setAlert] = useState<{ title: string; message: string } | null>(
-    null,
-  );
+  const [alert, setAlert] = useState<{ title: string; message: string } | null>(null);
 
   useEffect(() => {
     if (entry && isOpen) {
@@ -103,9 +97,7 @@ export const EditEntryDialog = ({
               <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.Description>Key cannot be changed during editing</Field.Description>
             </Field>
 
             <Field>

package/src/ui/editor-switcher.tsx

@@ -10,12 +10,7 @@ const TYPE_LABELS: Record<StorageEntryType, string> = {
 
 // Visual ordering of the pills. Keep `string` first because it's the
 // most common landing type after a fresh read on an MMKV key.
-const TYPE_ORDER: StorageEntryType[] = [
-  'string',
-  'number',
-  'boolean',
-  'buffer',
-];
+const TYPE_ORDER: StorageEntryType[] = ['string', 'number', 'boolean', 'buffer'];
 
 export type EditorSwitcherProps = {
   supportedTypes: StorageEntryType[];
@@ -23,11 +18,7 @@ export type EditorSwitcherProps = {
   onChange: (type: StorageEntryType) => void;
 };
 
-export const EditorSwitcher = ({
-  supportedTypes,
-  value,
-  onChange,
-}: EditorSwitcherProps) => {
+export const EditorSwitcher = ({ supportedTypes, value, onChange }: EditorSwitcherProps) => {
   const available = TYPE_ORDER.filter((type) => supportedTypes.includes(type));
 
   // Adaptive hide: the switcher is meaningless when the backend only

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

@@ -14,9 +14,7 @@ export type EntryDetailDialogProps = {
 
 const MAX_AUTO_JSON_INSPECTION_LENGTH = 50_000;
 
-export const jsonSafeParse = (
-  value: string,
-): Record<string, unknown> | unknown[] | null => {
+export const jsonSafeParse = (value: string): Record<string, unknown> | unknown[] | null => {
   try {
     const parsed = JSON.parse(value) as unknown;
 
@@ -63,33 +61,26 @@ export const EntryDetailDialog = ({
         {entry && (
           <div className="flex max-h-[70vh] flex-col gap-4 overflow-auto">
             <div>
-              <div className="mb-1 text-sm font-medium text-foreground">
-                Key
-              </div>
+              <div className="mb-1 text-sm font-medium text-foreground">Key</div>
               <div className="w-full break-all rounded-md border border-input bg-muted px-3 py-2 font-mono text-sm text-foreground">
                 {entry.key}
               </div>
             </div>
 
             <div>
-              <div className="mb-1 text-sm font-medium text-foreground">
-                Type
-              </div>
+              <div className="mb-1 text-sm font-medium text-foreground">Type</div>
               <Badge variant="outline">{entry.type}</Badge>
             </div>
 
             <div className="flex min-h-0 flex-1 flex-col">
-              <div className="mb-1 text-sm font-medium text-foreground">
-                Value
-              </div>
+              <div className="mb-1 text-sm font-medium text-foreground">Value</div>
               <div className="max-h-96 overflow-auto rounded-md border border-input bg-muted p-3">
                 {jsonValue ? (
                   <JsonInspector data={jsonValue} />
                 ) : entry.type === 'buffer' ? (
                   <div className="flex flex-col gap-2">
                     <div className="text-xs text-muted-foreground">
-                      {entry.value.length}{' '}
-                      {entry.value.length === 1 ? 'byte' : 'bytes'}
+                      {entry.value.length} {entry.value.length === 1 ? 'byte' : 'bytes'}
                     </div>
                     <HexdumpValueViewer bytes={entry.value} />
                   </div>

package/src/ui/format-value.tsx

@@ -13,20 +13,13 @@ 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-destructive')}>
         {entry.value ? 'true' : 'false'}
       </span>
     );
   }
 
   return (
-    <span className="font-mono text-muted-foreground">
-      {compactBufferPreview(entry.value)}
-    </span>
+    <span className="font-mono text-muted-foreground">{compactBufferPreview(entry.value)}</span>
   );
 };

package/src/ui/import-dialog.tsx

@@ -82,8 +82,8 @@ const PreviewBody = ({
           <div className="flex items-start gap-2 rounded-md border border-border bg-muted p-2 text-xs text-foreground">
             <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
             <div>
-              This file was exported from <strong>{sourceLabel}</strong>. You
-              are importing into <strong>{targetLabel}</strong>.
+              This file was exported from <strong>{sourceLabel}</strong>. You are importing into{' '}
+              <strong>{targetLabel}</strong>.
             </div>
           </div>
         )}
@@ -93,15 +93,10 @@ const PreviewBody = ({
             <XCircle className="mt-0.5 h-4 w-4 shrink-0" />
             <div>
               {preview.unsupportedTypes.length}{' '}
-              {preview.unsupportedTypes.length === 1
-                ? 'entry has a type'
-                : 'entries have types'}{' '}
-              not supported by this storage. Remove them from the file and try
-              again.
+              {preview.unsupportedTypes.length === 1 ? 'entry has a type' : 'entries have types'}{' '}
+              not supported by this storage. Remove them from the file and try again.
               <div className="mt-1 max-h-20 overflow-auto rounded-md bg-muted px-2 py-1 font-mono text-xs">
-                {preview.unsupportedTypes
-                  .map((u) => `${u.key} (${u.type})`)
-                  .join(', ')}
+                {preview.unsupportedTypes.map((u) => `${u.key} (${u.type})`).join(', ')}
               </div>
             </div>
           </div>
@@ -191,12 +186,7 @@ const ResultBody = ({
   </>
 );
 
-export const ImportDialog = ({
-  state,
-  onApply,
-  onCancel,
-  onClose,
-}: ImportDialogProps) => {
+export const ImportDialog = ({ state, onApply, onCancel, onClose }: ImportDialogProps) => {
   const title =
     state === null
       ? ''
@@ -227,9 +217,7 @@ export const ImportDialog = ({
           <PreviewBody state={state} onApply={onApply} onCancel={onCancel} />
         )}
         {state?.phase === 'importing' && <ImportingBody state={state} />}
-        {state?.phase === 'result' && (
-          <ResultBody state={state} onClose={onClose} />
-        )}
+        {state?.phase === 'result' && <ResultBody state={state} onClose={onClose} />}
       </Dialog.Content>
     </Dialog>
   );

package/src/ui/large-value-viewer-state.ts

@@ -14,15 +14,8 @@ export const textRowRanges = (text: string): TextRange[] => {
     const newline = text.indexOf('\n', start);
     const lineEnd = newline === -1 ? text.length : newline + 1;
 
-    for (
-      let chunkStart = start;
-      chunkStart < lineEnd;
-      chunkStart += TEXT_CHUNK_SIZE
-    ) {
-      ranges.push([
-        chunkStart,
-        Math.min(chunkStart + TEXT_CHUNK_SIZE, lineEnd),
-      ]);
+    for (let chunkStart = start; chunkStart < lineEnd; chunkStart += TEXT_CHUNK_SIZE) {
+      ranges.push([chunkStart, Math.min(chunkStart + TEXT_CHUNK_SIZE, lineEnd)]);
     }
 
     start = lineEnd;

package/src/ui/large-value-viewer.tsx

@@ -1,15 +1,11 @@
 import { useMemo } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 import { formatHexdumpRow } from './binary';
-import {
-  textRowRanges,
-  VIRTUALIZED_TEXT_THRESHOLD,
-} from './large-value-viewer-state';
+import { textRowRanges, VIRTUALIZED_TEXT_THRESHOLD } from './large-value-viewer-state';
 
 export const TextValueViewer = ({ value }: { value: string }) => {
   const ranges = useMemo(
-    () =>
-      value.length > VIRTUALIZED_TEXT_THRESHOLD ? textRowRanges(value) : null,
+    () => (value.length > VIRTUALIZED_TEXT_THRESHOLD ? textRowRanges(value) : null),
     [value],
   );
 
@@ -45,9 +41,7 @@ export const HexdumpValueViewer = ({ bytes }: { bytes: readonly number[] }) => {
   const totalCount = Math.ceil(bytes.length / 16);
 
   if (totalCount === 0) {
-    return (
-      <div className="text-xs text-muted italic">No bytes to display.</div>
-    );
+    return <div className="text-xs text-muted italic">No bytes to display.</div>;
   }
 
   return (