@rozenite/storage-plugin 1.13.0 → 2.1.0

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';
 
@@ -17,11 +12,10 @@ export type EditorState = {
 export type EditorAction =
   | { type: 'set-text'; text: string }
   | { type: 'normalize-paste'; text: string }
-  | { type: 'switch-mode'; mode: EditorMode };
+  | { 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);
@@ -29,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 {
@@ -60,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 {
@@ -108,6 +91,14 @@ export const reduce = (
         error: null,
       };
     }
+    case 'replace-bytes': {
+      return {
+        mode: state.mode,
+        text: encode(action.bytes, state.mode),
+        bytes: action.bytes,
+        error: null,
+      };
+    }
   }
 };
 

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

@@ -1,38 +1,34 @@
 import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
 import { EditorState as CMEditorState } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
-import { useEffect, useReducer, useRef } from 'react';
-import { bytesToAsciiPreview } from './binary';
-import {
-  initialState,
-  reduce,
-  type EditorMode,
-} from './binary-value-editor-state';
+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';
 
 export type BinaryValueEditorProps = {
   initialBytes?: number[];
   onChange: (bytes: number[] | null) => void;
 };
 
-const darkTheme = EditorView.theme(
-  {
-    '&': {
-      color: '#e5e7eb',
-      backgroundColor: '#111827',
-      fontSize: '12px',
-    },
-    '.cm-content': {
-      caretColor: '#60a5fa',
-      fontFamily:
-        'ui-monospace, "Cascadia Mono", "Fira Code", Menlo, monospace',
-      padding: '8px',
-    },
-    '.cm-focused': { outline: 'none' },
-    '.cm-gutters': { display: 'none' },
-    '.cm-scroller': { overflow: 'auto' },
+// Pulls colors from the shared design tokens (set by `PluginShell` on its
+// root as CSS custom properties) so the editor follows the active
+// light/dark theme instead of being locked to one palette.
+const editorTheme = EditorView.theme({
+  '&': {
+    color: 'var(--foreground)',
+    backgroundColor: 'transparent',
+    fontSize: '12px',
   },
-  { dark: true },
-);
+  '.cm-content': {
+    caretColor: 'var(--ring)',
+    fontFamily: 'ui-monospace, "Cascadia Mono", "Fira Code", Menlo, monospace',
+    padding: '8px',
+  },
+  '.cm-focused': { outline: 'none' },
+  '.cm-gutters': { display: 'none' },
+  '.cm-scroller': { overflow: 'auto' },
+});
 
 const ModeButton = ({
   label,
@@ -46,22 +42,22 @@ const ModeButton = ({
   <button
     type="button"
     onClick={onClick}
-    className={`rounded px-2 py-1 text-xs transition-colors ${
+    className={cn(
+      'rounded-md px-2 py-1 text-xs font-medium transition-colors',
       active
-        ? 'bg-blue-600 text-white'
-        : 'bg-gray-700 text-gray-200 hover:bg-gray-600'
-    }`}
+        ? 'bg-primary text-primary-foreground'
+        : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+    )}
   >
     {label}
   </button>
 );
 
-export const BinaryValueEditor = ({
-  initialBytes,
-  onChange,
-}: BinaryValueEditorProps) => {
-  const [state, dispatch] = useReducer(reduce, undefined, () =>
-    initialState({ initialBytes }),
+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),
   );
 
   const hostRef = useRef<HTMLDivElement | null>(null);
@@ -71,6 +67,19 @@ export const BinaryValueEditor = ({
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
 
+  // Formatting a complete binary editor document is unavoidable when editing,
+  // but not when the dialog first opens. Yield once so the dialog can paint a
+  // size-aware loading state before constructing a potentially huge document.
+  useEffect(() => {
+    const initialBytes = initialBytesRef.current;
+    if (!initialBytes?.length) return;
+    const timeout = window.setTimeout(() => {
+      dispatch({ type: 'replace-bytes', bytes: initialBytes });
+      setIsPreparing(false);
+    }, 0);
+    return () => window.clearTimeout(timeout);
+  }, []);
+
   // Mount the CodeMirror view once. The update listener compares the
   // doc to the latest reducer text (via stateRef) so paste-or-type
   // events round-trip through the reducer instead of looping back.
@@ -84,15 +93,13 @@ export const BinaryValueEditor = ({
         extensions: [
           history(),
           keymap.of([...defaultKeymap, ...historyKeymap]),
-          darkTheme,
+          editorTheme,
           EditorView.lineWrapping,
           EditorView.updateListener.of((update) => {
             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,
@@ -125,8 +132,8 @@ export const BinaryValueEditor = ({
     onChangeRef.current(state.bytes);
   }, [state.bytes]);
 
-  const byteCount = state.bytes?.length ?? 0;
-  const asciiPreview = state.bytes ? bytesToAsciiPreview(state.bytes) : '';
+  const byteCount = state.bytes?.length ?? initialBytes?.length ?? 0;
+  const asciiPreview = state.bytes ? compactAsciiPreview(state.bytes) : '';
 
   const handleModeChange = (mode: EditorMode) => {
     if (state.mode === mode) return;
@@ -150,18 +157,23 @@ export const BinaryValueEditor = ({
 
       <div
         ref={hostRef}
-        className="min-h-[120px] max-h-[300px] overflow-auto rounded border border-gray-700 bg-gray-900"
+        className="min-h-[120px] max-h-[300px] overflow-auto rounded-md border border-input bg-muted"
       />
 
+      {isPreparing ? (
+        <div className="text-xs text-muted-foreground">
+          Preparing editor for {initialBytes?.length ?? 0} bytes…
+        </div>
+      ) : null}
+
       <div className="flex flex-col gap-1 text-xs">
-        <div className="text-gray-400">{byteCount} bytes</div>
+        <div className="text-muted-foreground">{byteCount} bytes</div>
         {asciiPreview && (
-          <div className="overflow-hidden text-ellipsis whitespace-nowrap text-gray-400">
-            ASCII:{' '}
-            <span className="font-mono text-gray-300">{asciiPreview}</span>
+          <div className="overflow-hidden text-ellipsis whitespace-nowrap text-muted-foreground">
+            ASCII: <span className="font-mono text-foreground">{asciiPreview}</span>
           </div>
         )}
-        {state.error && <div className="text-red-400">{state.error}</div>}
+        {state.error && <div className="text-destructive">{state.error}</div>}
       </div>
     </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(' ');
@@ -25,6 +20,37 @@ const formatHexLine = (slice: readonly number[]): string => {
   return right ? `${left}  ${right}` : left;
 };
 
+export type HexdumpRow = {
+  offset: string;
+  hex: string;
+  ascii: string;
+};
+
+// 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 => {
+  let left = '';
+  let right = '';
+  let ascii = '';
+  const rowEnd = Math.min(rowStart + BYTES_PER_LINE, bytes.length);
+
+  for (let index = rowStart; index < rowEnd; index++) {
+    const hex = toHexPair(bytes[index]);
+    if (index < rowStart + BYTES_PER_GROUP) {
+      left += left ? ` ${hex}` : hex;
+    } else {
+      right += right ? ` ${hex}` : hex;
+    }
+    ascii += toAsciiChar(bytes[index]);
+  }
+
+  return {
+    offset: rowStart.toString(16).padStart(OFFSET_WIDTH, '0'),
+    hex: right ? `${left}  ${right}` : left,
+    ascii,
+  };
+};
+
 export const bytesToGroupedHex = (bytes: readonly number[]): string => {
   const lines: string[] = [];
   for (let i = 0; i < bytes.length; i += BYTES_PER_LINE) {
@@ -48,12 +74,27 @@ 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 => {
+  let preview = '';
+  const limit = Math.min(bytes.length, maxBytes);
+  for (let index = 0; index < limit; index++) {
+    preview += toAsciiChar(bytes[index]);
+  }
+  return bytes.length > maxBytes ? `${preview}…` : preview;
+};
+
 export const bytesToBase64 = (bytes: readonly number[]): string => {
-  let binary = '';
-  for (const byte of bytes) {
-    binary += String.fromCharCode(byte);
+  const chunks: string[] = [];
+  const chunkSize = 8_192;
+  for (let start = 0; start < bytes.length; start += chunkSize) {
+    let chunk = '';
+    const end = Math.min(start + chunkSize, bytes.length);
+    for (let index = start; index < end; index++) {
+      chunk += String.fromCharCode(bytes[index]);
+    }
+    chunks.push(chunk);
   }
-  return btoa(binary);
+  return btoa(chunks.join(''));
 };
 
 export const compactBufferPreview = (
@@ -81,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,11 +1,6 @@
-import { useEffect, useState } from 'react';
-import { X, Edit3 } from 'lucide-react';
-import type {
-  StorageEntry,
-  StorageEntryType,
-  StorageEntryValue,
-} from '../shared/types';
-import { ConfirmDialog } from './confirm-dialog';
+import { Button, ConfirmDialog, Dialog, Field } from '@rozenite/ui';
+import { useEffect, useRef, useState } from 'react';
+import type { StorageEntry, StorageEntryType, StorageEntryValue } from '../shared/types';
 import { TypedValueEditor } from './typed-value-editor';
 import { defaultValueForType } from './type-conversion';
 
@@ -28,23 +23,23 @@ export const EditEntryDialog = ({
   entry,
   supportedTypes,
 }: EditEntryDialogProps) => {
+  const lastEntryRef = useRef<StorageEntry | null>(entry);
   const [currentType, setCurrentType] = useState<StorageEntryType>('string');
   const [currentValue, setCurrentValue] = useState<StorageEntryValue | null>(
     defaultValueForType('string'),
   );
-  const [confirmDialog, setConfirmDialog] = useState<{
-    isOpen: boolean;
-    title: string;
-    message: string;
-  }>({ isOpen: false, title: '', message: '' });
+  const [alert, setAlert] = useState<{ title: string; message: string } | null>(null);
 
   useEffect(() => {
     if (entry && isOpen) {
+      lastEntryRef.current = entry;
       setCurrentType(entry.type);
       setCurrentValue(entry.value);
     }
   }, [entry, isOpen]);
 
+  const entryForDisplay = entry ?? lastEntryRef.current;
+
   const isCurrentTypeSupported = supportedTypes.includes(currentType);
 
   const resetAndClose = () => {
@@ -57,8 +52,7 @@ export const EditEntryDialog = ({
     if (!entry || currentValue === null) return;
 
     if (!isCurrentTypeSupported) {
-      setConfirmDialog({
-        isOpen: true,
+      setAlert({
         title: 'Unsupported Type',
         message: 'This storage does not support the selected type.',
       });
@@ -70,16 +64,12 @@ export const EditEntryDialog = ({
   };
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (event.key === 'Escape') {
-      resetAndClose();
-      return;
-    }
     if (event.key === 'Enter' && currentType !== 'buffer') {
       handleSave();
     }
   };
 
-  if (!isOpen || !entry) {
+  if (!entryForDisplay) {
     return null;
   }
 
@@ -89,95 +79,69 @@ export const EditEntryDialog = ({
   const isSaveDisabled = !isCurrentTypeSupported || currentValue === null;
 
   return (
-    <div
-      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-      onClick={resetAndClose}
-    >
-      <div
-        className="bg-gray-800 rounded-lg p-6 w-[32rem] max-w-full mx-4"
-        onClick={(event) => event.stopPropagation()}
-        onKeyDown={handleKeyDown}
+    <>
+      <Dialog
+        open={isOpen}
+        onOpenChange={(open) => {
+          if (!open) resetAndClose();
+        }}
       >
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center gap-2">
-            <Edit3 className="h-5 w-5 text-blue-400" />
-            <h2 className="text-lg font-semibold text-gray-100">Edit Entry</h2>
-          </div>
-          <button
-            onClick={resetAndClose}
-            className="p-1 text-gray-400 hover:text-gray-200 hover:bg-gray-700 rounded transition-colors"
-            title="Close dialog"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        </div>
-
-        <div className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium text-gray-200 mb-1">
-              Key
-            </label>
-            <div className="w-full px-3 py-2 text-sm bg-gray-700 border border-gray-600 rounded text-gray-100 font-mono">
-              {entry.key}
-            </div>
-            <p className="text-xs text-gray-400 mt-1">
-              Key cannot be changed during editing
-            </p>
+        <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>
 
-          <div>
-            <label
-              htmlFor="edit-entry-value"
-              className="block text-sm font-medium text-gray-200 mb-1"
-            >
-              Value
-            </label>
-            <TypedValueEditor
-              supportedTypes={supportedTypes}
-              type={currentType}
-              value={currentValue}
-              onChange={(nextType, nextValue) => {
-                setCurrentType(nextType);
-                setCurrentValue(nextValue);
-              }}
-              inputId="edit-entry-value"
-              autoFocus
-            />
-            {!isCurrentTypeSupported && (
-              <p className="text-xs text-amber-400 mt-1">
-                This storage does not support {currentType} values.
-              </p>
-            )}
-          </div>
-        </div>
-
-        <div className="flex items-center justify-end gap-2 mt-6">
-          <button
-            onClick={resetAndClose}
-            className="px-4 py-2 text-sm text-gray-300 hover:text-white hover:bg-gray-700 rounded transition-colors"
-          >
-            Cancel
-          </button>
-          <button
-            onClick={handleSave}
-            disabled={isSaveDisabled}
-            className="px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded transition-colors"
-          >
-            Save Changes
-          </button>
-        </div>
-      </div>
+          <Dialog.Footer>
+            <Button variant="outline" onClick={resetAndClose}>
+              Cancel
+            </Button>
+            <Button onClick={handleSave} disabled={isSaveDisabled}>
+              Save Changes
+            </Button>
+          </Dialog.Footer>
+        </Dialog.Content>
+      </Dialog>
 
       <ConfirmDialog
-        isOpen={confirmDialog.isOpen}
-        onClose={() =>
-          setConfirmDialog((previous) => ({ ...previous, isOpen: false }))
-        }
-        onConfirm={() => {}}
-        title={confirmDialog.title}
-        message={confirmDialog.message}
-        type="alert"
+        open={alert !== null}
+        onOpenChange={(open) => {
+          if (!open) setAlert(null);
+        }}
+        variant="alert"
+        title={alert?.title ?? ''}
+        description={alert?.message}
       />
-    </div>
+    </>
   );
 };

package/src/ui/editor-switcher.tsx

@@ -1,3 +1,4 @@
+import { cn } from '@rozenite/ui';
 import type { StorageEntryType } from '../shared/types';
 
 const TYPE_LABELS: Record<StorageEntryType, string> = {
@@ -9,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[];
@@ -22,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
@@ -39,7 +31,7 @@ export const EditorSwitcher = ({
     <div
       role="tablist"
       aria-label="Edit as"
-      className="inline-flex rounded border border-gray-600 overflow-hidden"
+      className="inline-flex overflow-hidden rounded-md border border-border"
     >
       {available.map((type) => (
         <button
@@ -48,11 +40,12 @@ export const EditorSwitcher = ({
           role="tab"
           aria-selected={value === type}
           onClick={() => onChange(type)}
-          className={`px-3 py-1 text-xs transition-colors ${
+          className={cn(
+            'px-3 py-1 text-xs font-medium transition-colors',
             value === type
-              ? 'bg-blue-600 text-white'
-              : 'text-gray-300 hover:bg-gray-700'
-          }`}
+              ? 'bg-primary text-primary-foreground'
+              : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+          )}
         >
           {TYPE_LABELS[type]}
         </button>