@rozenite/storage-plugin 1.9.0 → 1.10.0

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

@@ -0,0 +1,168 @@
+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';
+
+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' },
+  },
+  { dark: true },
+);
+
+const ModeButton = ({
+  label,
+  active,
+  onClick,
+}: {
+  label: string;
+  active: boolean;
+  onClick: () => void;
+}) => (
+  <button
+    type="button"
+    onClick={onClick}
+    className={`rounded px-2 py-1 text-xs transition-colors ${
+      active
+        ? 'bg-blue-600 text-white'
+        : 'bg-gray-700 text-gray-200 hover:bg-gray-600'
+    }`}
+  >
+    {label}
+  </button>
+);
+
+export const BinaryValueEditor = ({
+  initialBytes,
+  onChange,
+}: BinaryValueEditorProps) => {
+  const [state, dispatch] = useReducer(reduce, undefined, () =>
+    initialState({ initialBytes }),
+  );
+
+  const hostRef = useRef<HTMLDivElement | null>(null);
+  const viewRef = useRef<EditorView | null>(null);
+  const stateRef = useRef(state);
+  stateRef.current = state;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  // 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.
+  useEffect(() => {
+    if (!hostRef.current) {
+      return;
+    }
+    const view = new EditorView({
+      state: CMEditorState.create({
+        doc: stateRef.current.text,
+        extensions: [
+          history(),
+          keymap.of([...defaultKeymap, ...historyKeymap]),
+          darkTheme,
+          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'),
+            );
+            dispatch({
+              type: isPaste ? 'normalize-paste' : 'set-text',
+              text: newText,
+            });
+          }),
+        ],
+      }),
+      parent: hostRef.current,
+    });
+    viewRef.current = view;
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+  }, []);
+
+  // Push reducer text into CodeMirror only when they diverge.
+  // This fires for paste normalization and mode switches.
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    const current = view.state.doc.toString();
+    if (current === state.text) return;
+    view.dispatch({
+      changes: { from: 0, to: current.length, insert: state.text },
+    });
+  }, [state.text]);
+
+  useEffect(() => {
+    onChangeRef.current(state.bytes);
+  }, [state.bytes]);
+
+  const byteCount = state.bytes?.length ?? 0;
+  const asciiPreview = state.bytes ? bytesToAsciiPreview(state.bytes) : '';
+
+  const handleModeChange = (mode: EditorMode) => {
+    if (state.mode === mode) return;
+    dispatch({ type: 'switch-mode', mode });
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center gap-1">
+        <ModeButton
+          label="Hex"
+          active={state.mode === 'hex'}
+          onClick={() => handleModeChange('hex')}
+        />
+        <ModeButton
+          label="Base64"
+          active={state.mode === 'base64'}
+          onClick={() => handleModeChange('base64')}
+        />
+      </div>
+
+      <div
+        ref={hostRef}
+        className="min-h-[120px] max-h-[300px] overflow-auto rounded border border-gray-700 bg-gray-900"
+      />
+
+      <div className="flex flex-col gap-1 text-xs">
+        <div className="text-gray-400">{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>
+        )}
+        {state.error && <div className="text-red-400">{state.error}</div>}
+      </div>
+    </div>
+  );
+};

package/src/ui/binary.ts

@@ -0,0 +1,123 @@
+export type ParseResult<T> =
+  | { ok: true; value: T }
+  | { ok: false; error: string };
+
+const BYTES_PER_LINE = 16;
+const BYTES_PER_GROUP = 8;
+// 16 bytes × 2 hex chars + 14 single inter-byte spaces + 1 extra
+// space between groups = 32 + 14 + 2 = 48
+const HEX_SECTION_WIDTH = 48;
+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 toAsciiChar = (byte: number): string =>
+  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(' ');
+  const right = slice.slice(BYTES_PER_GROUP).map(toHexPair).join(' ');
+  return right ? `${left}  ${right}` : left;
+};
+
+export const bytesToGroupedHex = (bytes: readonly number[]): string => {
+  const lines: string[] = [];
+  for (let i = 0; i < bytes.length; i += BYTES_PER_LINE) {
+    lines.push(formatHexLine(bytes.slice(i, i + BYTES_PER_LINE)));
+  }
+  return lines.join('\n');
+};
+
+export const bytesToHexdump = (bytes: readonly number[]): string => {
+  const lines: string[] = [];
+  for (let i = 0; i < bytes.length; i += BYTES_PER_LINE) {
+    const slice = bytes.slice(i, i + BYTES_PER_LINE);
+    const offset = i.toString(16).padStart(OFFSET_WIDTH, '0');
+    const hex = formatHexLine(slice).padEnd(HEX_SECTION_WIDTH, ' ');
+    const ascii = slice.map(toAsciiChar).join('');
+    lines.push(`${offset}  ${hex}  |${ascii}|`);
+  }
+  return lines.join('\n');
+};
+
+export const bytesToAsciiPreview = (bytes: readonly number[]): string =>
+  bytes.map(toAsciiChar).join('');
+
+export const bytesToBase64 = (bytes: readonly number[]): string => {
+  let binary = '';
+  for (const byte of bytes) {
+    binary += String.fromCharCode(byte);
+  }
+  return btoa(binary);
+};
+
+export const compactBufferPreview = (
+  bytes: readonly number[],
+  options: { maxBytes?: number } = {},
+): string => {
+  const maxBytes = options.maxBytes ?? BYTES_PER_GROUP;
+  const sizeLabel = `${bytes.length} B`;
+  if (bytes.length === 0) {
+    return sizeLabel;
+  }
+  const shown = bytes.slice(0, maxBytes).map(toHexPair).join(' ');
+  if (bytes.length <= maxBytes) {
+    return `${shown} ${sizeLabel}`;
+  }
+  return `${shown} … ${sizeLabel}`;
+};
+
+// Matches a 4+ hex-digit offset followed by either a colon-space or
+// at least two spaces. Avoids false-positives on grouped-hex lines
+// where bytes are separated by single spaces.
+const HEXDUMP_OFFSET_RE = /^[0-9a-fA-F]{4,16}(?::\s+|\s{2,})/;
+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, ''),
+    )
+    .join('')
+    .replace(/0x/gi, '')
+    .replace(/\s+/g, '');
+
+  if (cleaned.length === 0) {
+    return { ok: false, error: 'Enter at least one byte.' };
+  }
+  if (!/^[0-9a-fA-F]+$/.test(cleaned)) {
+    return { ok: false, error: 'Hex input contains invalid characters.' };
+  }
+  if (cleaned.length % 2 !== 0) {
+    return { ok: false, error: 'Hex input must contain complete bytes.' };
+  }
+  const bytes: number[] = [];
+  for (let i = 0; i < cleaned.length; i += 2) {
+    bytes.push(parseInt(cleaned.slice(i, i + 2), 16));
+  }
+  return { ok: true, value: bytes };
+};
+
+export const base64ToBytes = (input: string): ParseResult<number[]> => {
+  const cleaned = input.replace(/\s+/g, '');
+  if (cleaned.length === 0) {
+    return { ok: false, error: 'Enter at least one byte.' };
+  }
+  let binary: string;
+  try {
+    binary = atob(cleaned);
+  } catch {
+    return { ok: false, error: 'Base64 input is invalid.' };
+  }
+  const bytes: number[] = [];
+  for (let i = 0; i < binary.length; i++) {
+    bytes.push(binary.charCodeAt(i));
+  }
+  return { ok: true, value: bytes };
+};

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { X, Edit3 } from 'lucide-react';
 import type {
   StorageEntry,
@@ -6,10 +6,16 @@ import type {
   StorageEntryValue,
 } from '../shared/types';
 import { ConfirmDialog } from './confirm-dialog';
+import { TypedValueEditor } from './typed-value-editor';
+import { defaultValueForType } from './type-conversion';
 
 export type EditEntryDialogProps = {
   isOpen: boolean;
   onClose: () => void;
+  // Called with the runtime value in its native JS shape — the caller
+  // infers the storage type from `typeof newValue`. Lets the dialog
+  // change the entry's stored type (e.g. string → buffer) without a
+  // dedicated prop for the new type.
   onEditEntry: (key: string, newValue: StorageEntryValue) => void;
   entry: StorageEntry | null;
   supportedTypes: StorageEntryType[];
@@ -22,147 +28,73 @@ export const EditEntryDialog = ({
   entry,
   supportedTypes,
 }: EditEntryDialogProps) => {
-  const [editValue, setEditValue] = useState('');
+  const [currentType, setCurrentType] = useState<StorageEntryType>('string');
+  const [currentValue, setCurrentValue] = useState<StorageEntryValue | null>(
+    defaultValueForType('string'),
+  );
   const [confirmDialog, setConfirmDialog] = useState<{
     isOpen: boolean;
     title: string;
     message: string;
-    type: 'confirm' | 'alert';
-    onConfirm?: () => void;
-  }>({ isOpen: false, title: '', message: '', type: 'alert' });
+  }>({ isOpen: false, title: '', message: '' });
 
   useEffect(() => {
     if (entry && isOpen) {
-      setEditValue(Array.isArray(entry.value) ? JSON.stringify(entry.value) : String(entry.value));
+      setCurrentType(entry.type);
+      setCurrentValue(entry.value);
     }
   }, [entry, isOpen]);
 
-  const isTypeSupported = useMemo(
-    () => !!entry && supportedTypes.includes(entry.type),
-    [entry, supportedTypes]
-  );
+  const isCurrentTypeSupported = supportedTypes.includes(currentType);
 
-  const resetForm = () => {
-    setEditValue('');
+  const resetAndClose = () => {
+    setCurrentType('string');
+    setCurrentValue(defaultValueForType('string'));
     onClose();
   };
 
-  const handleEditEntry = () => {
-    if (!entry) return;
+  const handleSave = () => {
+    if (!entry || currentValue === null) return;
 
-    if (!isTypeSupported) {
+    if (!isCurrentTypeSupported) {
       setConfirmDialog({
         isOpen: true,
         title: 'Unsupported Type',
-        message: 'This storage does not support the current entry type.',
-        type: 'alert',
-      });
-      return;
-    }
-
-    let newValue: StorageEntryValue;
-
-    try {
-      switch (entry.type) {
-        case 'string':
-          newValue = editValue;
-          break;
-        case 'number':
-          newValue = Number(editValue);
-          if (Number.isNaN(newValue)) {
-            throw new Error('Invalid number');
-          }
-          break;
-        case 'boolean':
-          if (editValue !== 'true' && editValue !== 'false') {
-            throw new Error('Boolean value must be "true" or "false"');
-          }
-          newValue = editValue === 'true';
-          break;
-        case 'buffer':
-          newValue = JSON.parse(editValue);
-          if (!Array.isArray(newValue) || !newValue.every((v) => typeof v === 'number')) {
-            throw new Error('Buffer must be an array of numbers');
-          }
-          break;
-        default:
-          throw new Error('Invalid type');
-      }
-    } catch (error) {
-      setConfirmDialog({
-        isOpen: true,
-        title: 'Invalid Value',
-        message: `Invalid value for ${entry.type}: ${
-          error instanceof Error ? error.message : 'Unknown error'
-        }`,
-        type: 'alert',
+        message: 'This storage does not support the selected type.',
       });
       return;
     }
 
-    onEditEntry(entry.key, newValue);
-    resetForm();
+    onEditEntry(entry.key, currentValue);
+    resetAndClose();
   };
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
     if (event.key === 'Escape') {
-      resetForm();
-    } else if (event.key === 'Enter' && editValue.trim()) {
-      handleEditEntry();
-    }
-  };
-
-  const getInputType = (type: StorageEntryType) => {
-    if (type === 'number') {
-      return 'number';
-    }
-
-    return 'text';
-  };
-
-  const getPlaceholder = (type: StorageEntryType) => {
-    if (type === 'string') {
-      return 'Enter string value';
-    }
-
-    if (type === 'number') {
-      return 'Enter number value';
-    }
-
-    if (type === 'boolean') {
-      return 'Enter true or false';
-    }
-
-    return 'Enter array as JSON, e.g., [1, 2, 3]';
-  };
-
-  const getTypeColorClass = (type: StorageEntryType) => {
-    if (type === 'string') {
-      return 'bg-green-600';
-    }
-
-    if (type === 'number') {
-      return 'bg-blue-600';
+      resetAndClose();
+      return;
     }
-
-    if (type === 'boolean') {
-      return 'bg-yellow-600';
+    if (event.key === 'Enter' && currentType !== 'buffer') {
+      handleSave();
     }
-
-    return 'bg-purple-600';
   };
 
   if (!isOpen || !entry) {
     return null;
   }
 
+  // Unsavable when the type isn't supported, or when the current value
+  // is null (the hex editor signals invalid / empty hex as null —
+  // empty bytes are not a meaningful entry to save).
+  const isSaveDisabled = !isCurrentTypeSupported || currentValue === null;
+
   return (
     <div
       className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-      onClick={resetForm}
+      onClick={resetAndClose}
     >
       <div
-        className="bg-gray-800 rounded-lg p-6 w-96 max-w-full mx-4"
+        className="bg-gray-800 rounded-lg p-6 w-[32rem] max-w-full mx-4"
         onClick={(event) => event.stopPropagation()}
         onKeyDown={handleKeyDown}
       >
@@ -172,7 +104,7 @@ export const EditEntryDialog = ({
             <h2 className="text-lg font-semibold text-gray-100">Edit Entry</h2>
           </div>
           <button
-            onClick={resetForm}
+            onClick={resetAndClose}
             className="p-1 text-gray-400 hover:text-gray-200 hover:bg-gray-700 rounded transition-colors"
             title="Close dialog"
           >
@@ -182,31 +114,15 @@ export const EditEntryDialog = ({
 
         <div className="space-y-4">
           <div>
-            <label className="block text-sm font-medium text-gray-200 mb-1">Key</label>
+            <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>
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-200 mb-1">Type</label>
-            <div className="flex items-center">
-              <span
-                className={`px-2 py-1 text-xs font-medium rounded text-white ${getTypeColorClass(
-                  entry.type
-                )}`}
-              >
-                {entry.type}
-              </span>
-            </div>
-            {!isTypeSupported ? (
-              <p className="text-xs text-amber-400 mt-1">
-                This storage does not support {entry.type} values.
-              </p>
-            ) : (
-              <p className="text-xs text-gray-400 mt-1">Type cannot be changed during editing</p>
-            )}
+            <p className="text-xs text-gray-400 mt-1">
+              Key cannot be changed during editing
+            </p>
           </div>
 
           <div>
@@ -216,31 +132,20 @@ export const EditEntryDialog = ({
             >
               Value
             </label>
-            {entry.type === 'boolean' ? (
-              <select
-                id="edit-entry-value"
-                value={editValue}
-                onChange={(event) => setEditValue(event.target.value)}
-                className="w-full px-3 py-2 text-sm bg-gray-700 border border-gray-600 rounded text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                autoFocus
-              >
-                <option value="true">true</option>
-                <option value="false">false</option>
-              </select>
-            ) : (
-              <input
-                id="edit-entry-value"
-                type={getInputType(entry.type)}
-                value={editValue}
-                onChange={(event) => setEditValue(event.target.value)}
-                placeholder={getPlaceholder(entry.type)}
-                className="w-full px-3 py-2 text-sm bg-gray-700 border border-gray-600 rounded text-gray-100 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                autoFocus
-              />
-            )}
-            {entry.type === 'buffer' && (
-              <p className="text-xs text-gray-400 mt-1">
-                Enter as JSON array of numbers, e.g., [1, 2, 3, 255]
+            <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>
@@ -248,14 +153,14 @@ export const EditEntryDialog = ({
 
         <div className="flex items-center justify-end gap-2 mt-6">
           <button
-            onClick={resetForm}
+            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={handleEditEntry}
-            disabled={!editValue.trim() || !isTypeSupported}
+            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
@@ -265,15 +170,13 @@ export const EditEntryDialog = ({
 
       <ConfirmDialog
         isOpen={confirmDialog.isOpen}
-        onClose={() => setConfirmDialog((previous) => ({ ...previous, isOpen: false }))}
-        onConfirm={() => {
-          if (confirmDialog.onConfirm) {
-            confirmDialog.onConfirm();
-          }
-        }}
+        onClose={() =>
+          setConfirmDialog((previous) => ({ ...previous, isOpen: false }))
+        }
+        onConfirm={() => {}}
         title={confirmDialog.title}
         message={confirmDialog.message}
-        type={confirmDialog.type}
+        type="alert"
       />
     </div>
   );

package/src/ui/editable-table.tsx

@@ -15,6 +15,7 @@ import type {
   StorageEntryType,
   StorageEntryValue,
 } from '../shared/types';
+import { compactBufferPreview } from './binary';
 import { ConfirmDialog } from './confirm-dialog';
 import { EditEntryDialog } from './edit-entry-dialog';
 
@@ -64,7 +65,7 @@ export const EditableTable = ({
             <div className="flex items-center">
               <span
                 className={`px-2 py-1 text-xs font-medium rounded text-white ${getTypeColorClass(
-                  type
+                  type,
                 )}`}
               >
                 {type}
@@ -110,7 +111,7 @@ export const EditableTable = ({
         ),
       }),
     ],
-    [onDeleteEntry]
+    [onDeleteEntry],
   );
 
   const table = useReactTable({
@@ -186,7 +187,7 @@ export const EditableTable = ({
                       ? null
                       : flexRender(
                           header.column.columnDef.header,
-                          header.getContext()
+                          header.getContext(),
                         )}
                     {header.column.getCanSort() && (
                       <span className="text-gray-500">
@@ -283,16 +284,17 @@ const formatValue = (entry: StorageEntry) => {
 
   if (entry.type === 'boolean') {
     return (
-      <span className={`font-mono ${entry.value ? 'text-green-400' : 'text-red-400'}`}>
+      <span
+        className={`font-mono ${entry.value ? 'text-green-400' : 'text-red-400'}`}
+      >
         {entry.value ? 'true' : 'false'}
       </span>
     );
   }
 
-  const displayValue =
-    entry.value.length > 5
-      ? `[${entry.value.slice(0, 5).join(', ')}, ...${entry.value.length - 5} more]`
-      : `[${entry.value.join(', ')}]`;
-
-  return <span className="text-purple-300 font-mono">{displayValue}</span>;
+  return (
+    <span className="text-purple-300 font-mono">
+      {compactBufferPreview(entry.value)}
+    </span>
+  );
 };