@rozenite/storage-plugin 1.12.0 → 2.0.0

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

@@ -1,8 +1,9 @@
 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 { cn } from '@rozenite/ui';
+import { useEffect, useReducer, useRef, useState } from 'react';
+import { compactAsciiPreview } from './binary';
 import {
   initialState,
   reduce,
@@ -14,25 +15,24 @@ export type BinaryValueEditorProps = {
   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,11 +46,12 @@ 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>
@@ -61,7 +62,11 @@ export const BinaryValueEditor = ({
   onChange,
 }: BinaryValueEditorProps) => {
   const [state, dispatch] = useReducer(reduce, undefined, () =>
-    initialState({ initialBytes }),
+    initialState({}),
+  );
+  const initialBytesRef = useRef(initialBytes);
+  const [isPreparing, setIsPreparing] = useState(
+    Boolean(initialBytesRef.current && initialBytesRef.current.length > 0),
   );
 
   const hostRef = useRef<HTMLDivElement | null>(null);
@@ -71,6 +76,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,7 +102,7 @@ export const BinaryValueEditor = ({
         extensions: [
           history(),
           keymap.of([...defaultKeymap, ...historyKeymap]),
-          darkTheme,
+          editorTheme,
           EditorView.lineWrapping,
           EditorView.updateListener.of((update) => {
             if (!update.docChanged) return;
@@ -125,8 +143,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 +168,24 @@ 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">
+          <div className="overflow-hidden text-ellipsis whitespace-nowrap text-muted-foreground">
             ASCII:{' '}
-            <span className="font-mono text-gray-300">{asciiPreview}</span>
+            <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

@@ -25,6 +25,40 @@ 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 +82,30 @@ 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 = (

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

@@ -1,11 +1,10 @@
-import { useEffect, useState } from 'react';
-import { X, Edit3 } from 'lucide-react';
+import { Button, ConfirmDialog, Dialog, Field } from '@rozenite/ui';
+import { useEffect, useRef, useState } from 'react';
 import type {
   StorageEntry,
   StorageEntryType,
   StorageEntryValue,
 } from '../shared/types';
-import { ConfirmDialog } from './confirm-dialog';
 import { TypedValueEditor } from './typed-value-editor';
 import { defaultValueForType } from './type-conversion';
 
@@ -28,23 +27,25 @@ 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 +58,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 +70,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 +85,71 @@ 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> = {
@@ -39,7 +40,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 +49,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>