@rozenite/storage-plugin 1.9.0 → 1.11.0

package/src/ui/__tests__/type-conversion.test.ts

@@ -0,0 +1,123 @@
+import { describe, expect, it } from 'vitest';
+import { convertValue, defaultValueForType } from '../type-conversion';
+
+describe('convertValue', () => {
+  it('returns the same value when from === to', () => {
+    expect(convertValue('string', 'string', 'hello')).toBe('hello');
+    expect(convertValue('number', 'number', 42)).toBe(42);
+    expect(convertValue('boolean', 'boolean', true)).toBe(true);
+    expect(convertValue('buffer', 'buffer', [1, 2, 3])).toEqual([1, 2, 3]);
+  });
+
+  describe('from string', () => {
+    it('parses a numeric string to a number, falls back to 0 on NaN', () => {
+      expect(convertValue('string', 'number', '42')).toBe(42);
+      expect(convertValue('string', 'number', '-3.14')).toBe(-3.14);
+      expect(convertValue('string', 'number', 'abc')).toBe(0);
+      expect(convertValue('string', 'number', '')).toBe(0);
+    });
+
+    it('parses "true" / anything-else to a boolean', () => {
+      expect(convertValue('string', 'boolean', 'true')).toBe(true);
+      expect(convertValue('string', 'boolean', 'false')).toBe(false);
+      expect(convertValue('string', 'boolean', 'anything')).toBe(false);
+      expect(convertValue('string', 'boolean', '')).toBe(false);
+    });
+
+    it('UTF-8 encodes a string to a byte array', () => {
+      expect(convertValue('string', 'buffer', 'hello')).toEqual([
+        0x68, 0x65, 0x6c, 0x6c, 0x6f,
+      ]);
+      // 'é' is two bytes in UTF-8: 0xC3 0xA9.
+      expect(convertValue('string', 'buffer', 'café')).toEqual([
+        0x63, 0x61, 0x66, 0xc3, 0xa9,
+      ]);
+      expect(convertValue('string', 'buffer', '')).toEqual([]);
+    });
+  });
+
+  describe('from number', () => {
+    it('stringifies a number when converting to string', () => {
+      expect(convertValue('number', 'string', 42)).toBe('42');
+      expect(convertValue('number', 'string', -3.14)).toBe('-3.14');
+      expect(convertValue('number', 'string', 0)).toBe('0');
+    });
+
+    it('non-zero is truthy, zero is falsy for boolean conversion', () => {
+      expect(convertValue('number', 'boolean', 1)).toBe(true);
+      expect(convertValue('number', 'boolean', -1)).toBe(true);
+      expect(convertValue('number', 'boolean', 0)).toBe(false);
+    });
+
+    it('UTF-8 encodes the stringified number to buffer', () => {
+      expect(convertValue('number', 'buffer', 42)).toEqual([0x34, 0x32]);
+    });
+  });
+
+  describe('from boolean', () => {
+    it('stringifies to "true" / "false"', () => {
+      expect(convertValue('boolean', 'string', true)).toBe('true');
+      expect(convertValue('boolean', 'string', false)).toBe('false');
+    });
+
+    it('true → 1, false → 0 for number conversion', () => {
+      expect(convertValue('boolean', 'number', true)).toBe(1);
+      expect(convertValue('boolean', 'number', false)).toBe(0);
+    });
+
+    it('encodes the literal "true" / "false" bytes for buffer conversion', () => {
+      expect(convertValue('boolean', 'buffer', true)).toEqual([
+        0x74, 0x72, 0x75, 0x65,
+      ]);
+      expect(convertValue('boolean', 'buffer', false)).toEqual([
+        0x66, 0x61, 0x6c, 0x73, 0x65,
+      ]);
+    });
+  });
+
+  describe('from buffer', () => {
+    it('UTF-8 decodes bytes back to a string (the headline round-trip)', () => {
+      expect(
+        convertValue('buffer', 'string', [0x68, 0x65, 0x6c, 0x6c, 0x6f]),
+      ).toBe('hello');
+    });
+
+    it('returns an empty string when bytes are not valid UTF-8', () => {
+      expect(convertValue('buffer', 'string', [0xff, 0xfe, 0xfd])).toBe('');
+    });
+
+    it('decodes then parses to number, falls back to 0 on failure', () => {
+      expect(convertValue('buffer', 'number', [0x34, 0x32])).toBe(42); // "42"
+      expect(
+        convertValue('buffer', 'number', [0x68, 0x65, 0x6c, 0x6c, 0x6f]),
+      ).toBe(0); // "hello" → NaN → 0
+      expect(convertValue('buffer', 'number', [0xff])).toBe(0); // invalid UTF-8 → 0
+    });
+
+    it('decodes then matches "true" for boolean conversion', () => {
+      expect(convertValue('buffer', 'boolean', [0x74, 0x72, 0x75, 0x65])).toBe(
+        true,
+      );
+      expect(
+        convertValue('buffer', 'boolean', [0x66, 0x61, 0x6c, 0x73, 0x65]),
+      ).toBe(false);
+      expect(convertValue('buffer', 'boolean', [0xff])).toBe(false);
+    });
+  });
+
+  it('round-trips string ↔ buffer faithfully', () => {
+    const original = 'Hello, world! — 你好';
+    const bytes = convertValue('string', 'buffer', original) as number[];
+    const back = convertValue('buffer', 'string', bytes);
+    expect(back).toBe(original);
+  });
+});
+
+describe('defaultValueForType', () => {
+  it('returns sensible zero values', () => {
+    expect(defaultValueForType('string')).toBe('');
+    expect(defaultValueForType('number')).toBe(0);
+    expect(defaultValueForType('boolean')).toBe(false);
+    expect(defaultValueForType('buffer')).toEqual([]);
+  });
+});

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

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { X } from 'lucide-react';
 import type {
   StorageEntry,
@@ -6,13 +6,8 @@ import type {
   StorageEntryValue,
 } from '../shared/types';
 import { ConfirmDialog } from './confirm-dialog';
-
-const TYPE_OPTIONS: Array<{ value: StorageEntryType; label: string }> = [
-  { value: 'string', label: 'String' },
-  { value: 'number', label: 'Number' },
-  { value: 'boolean', label: 'Boolean' },
-  { value: 'buffer', label: 'Buffer (Array)' },
-];
+import { TypedValueEditor } from './typed-value-editor';
+import { defaultValueForType } from './type-conversion';
 
 export type AddEntryDialogProps = {
   isOpen: boolean;
@@ -22,6 +17,23 @@ export type AddEntryDialogProps = {
   supportedTypes: StorageEntryType[];
 };
 
+const buildEntry = (
+  key: string,
+  type: StorageEntryType,
+  value: StorageEntryValue,
+): StorageEntry => {
+  switch (type) {
+    case 'string':
+      return { key, type: 'string', value: value as string };
+    case 'number':
+      return { key, type: 'number', value: value as number };
+    case 'boolean':
+      return { key, type: 'boolean', value: value as boolean };
+    case 'buffer':
+      return { key, type: 'buffer', value: value as number[] };
+  }
+};
+
 export const AddEntryDialog = ({
   isOpen,
   onClose,
@@ -29,42 +41,48 @@ export const AddEntryDialog = ({
   existingKeys,
   supportedTypes,
 }: AddEntryDialogProps) => {
+  const initialType: StorageEntryType = supportedTypes.includes('string')
+    ? 'string'
+    : (supportedTypes[0] ?? 'string');
+
   const [newEntryKey, setNewEntryKey] = useState('');
-  const [newEntryType, setNewEntryType] = useState<StorageEntryType>('string');
-  const [newEntryValue, setNewEntryValue] = useState('');
+  const [currentType, setCurrentType] = useState<StorageEntryType>(initialType);
+  const [currentValue, setCurrentValue] = useState<StorageEntryValue | null>(
+    defaultValueForType(initialType),
+  );
   const [confirmDialog, setConfirmDialog] = useState<{
     isOpen: boolean;
     title: string;
     message: string;
-    type: 'confirm' | 'alert';
-    onConfirm?: () => void;
-  }>({ isOpen: false, title: '', message: '', type: 'alert' });
-
-  const enabledTypes = useMemo(
-    () => TYPE_OPTIONS.filter((option) => supportedTypes.includes(option.value)),
-    [supportedTypes]
-  );
-
-  const firstSupportedType = enabledTypes[0]?.value;
+  }>({ isOpen: false, title: '', message: '' });
+
+  // Reset state every time the dialog opens, so a previous session's
+  // type / value doesn't bleed in.
+  useEffect(() => {
+    if (isOpen) {
+      setNewEntryKey('');
+      setCurrentType(initialType);
+      setCurrentValue(defaultValueForType(initialType));
+    }
+  }, [isOpen, initialType]);
 
-  const selectedTypeSupported = supportedTypes.includes(newEntryType);
+  const isCurrentTypeSupported = supportedTypes.includes(currentType);
 
-  const resetForm = () => {
+  const resetAndClose = () => {
     setNewEntryKey('');
-    setNewEntryType(firstSupportedType ?? 'string');
-    setNewEntryValue('');
+    setCurrentType(initialType);
+    setCurrentValue(defaultValueForType(initialType));
     onClose();
   };
 
-  const handleAddEntry = () => {
-    if (!newEntryKey.trim()) return;
+  const handleAdd = () => {
+    if (!newEntryKey.trim() || currentValue === null) return;
 
-    if (!selectedTypeSupported) {
+    if (!isCurrentTypeSupported) {
       setConfirmDialog({
         isOpen: true,
         title: 'Unsupported Type',
         message: 'Selected type is not supported by this storage.',
-        type: 'alert',
       });
       return;
     }
@@ -74,77 +92,25 @@ export const AddEntryDialog = ({
         isOpen: true,
         title: 'Key Already Exists',
         message: 'An entry with this key already exists.',
-        type: 'alert',
       });
       return;
     }
 
-    let parsedValue: StorageEntryValue;
-    try {
-      switch (newEntryType) {
-        case 'string':
-          parsedValue = newEntryValue;
-          break;
-        case 'number':
-          parsedValue = Number(newEntryValue);
-          if (Number.isNaN(parsedValue)) {
-            throw new Error('Invalid number');
-          }
-          break;
-        case 'boolean':
-          if (newEntryValue !== 'true' && newEntryValue !== 'false') {
-            throw new Error('Boolean value must be true or false');
-          }
-          parsedValue = newEntryValue === 'true';
-          break;
-        case 'buffer':
-          parsedValue = JSON.parse(newEntryValue);
-          if (
-            !Array.isArray(parsedValue) ||
-            !parsedValue.every((value) => typeof value === '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 ${newEntryType}: ${
-          error instanceof Error ? error.message : 'Unknown error'
-        }`,
-        type: 'alert',
-      });
-      return;
-    }
-
-    let entry: StorageEntry;
-    if (newEntryType === 'string') {
-      entry = { key: newEntryKey, type: 'string', value: parsedValue as string };
-    } else if (newEntryType === 'number') {
-      entry = { key: newEntryKey, type: 'number', value: parsedValue as number };
-    } else if (newEntryType === 'boolean') {
-      entry = { key: newEntryKey, type: 'boolean', value: parsedValue as boolean };
-    } else {
-      entry = { key: newEntryKey, type: 'buffer', value: parsedValue as number[] };
-    }
-
-    onAddEntry(entry);
-
-    resetForm();
+    onAddEntry(buildEntry(newEntryKey, currentType, currentValue));
+    resetAndClose();
   };
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
     if (event.key === 'Escape') {
-      resetForm();
+      resetAndClose();
       return;
     }
-
-    if (event.key === 'Enter' && newEntryKey.trim() && newEntryValue.trim()) {
-      handleAddEntry();
+    if (
+      event.key === 'Enter' &&
+      newEntryKey.trim() &&
+      currentType !== 'buffer'
+    ) {
+      handleAdd();
     }
   };
 
@@ -152,20 +118,25 @@ export const AddEntryDialog = ({
     return null;
   }
 
+  // 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;
+
   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}
       >
         <div className="flex items-center justify-between mb-4">
           <h2 className="text-lg font-semibold text-gray-100">Add New Entry</h2>
           <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"
           >
@@ -194,98 +165,39 @@ export const AddEntryDialog = ({
 
           <div>
             <label
-              htmlFor="new-entry-type"
+              htmlFor="new-entry-value"
               className="block text-sm font-medium text-gray-200 mb-1"
             >
-              Type
+              Value
             </label>
-            <select
-              id="new-entry-type"
-              value={newEntryType}
-              onChange={(event) => {
-                setNewEntryType(event.target.value as StorageEntryType);
-                setNewEntryValue('');
+            <TypedValueEditor
+              supportedTypes={supportedTypes}
+              type={currentType}
+              value={currentValue}
+              onChange={(nextType, nextValue) => {
+                setCurrentType(nextType);
+                setCurrentValue(nextValue);
               }}
-              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"
-            >
-              {TYPE_OPTIONS.map((option) => {
-                const isSupported = supportedTypes.includes(option.value);
-                return (
-                  <option
-                    key={option.value}
-                    value={option.value}
-                    disabled={!isSupported}
-                    title={
-                      isSupported ? option.label : 'Not supported by this storage'
-                    }
-                  >
-                    {option.label}
-                    {!isSupported ? ' (Not supported)' : ''}
-                  </option>
-                );
-              })}
-            </select>
-            {!selectedTypeSupported && (
+              inputId="new-entry-value"
+            />
+            {!isCurrentTypeSupported && (
               <p className="text-xs text-amber-400 mt-1">
                 Selected type is not supported by this storage.
               </p>
             )}
           </div>
-
-          <div>
-            <label
-              htmlFor="new-entry-value"
-              className="block text-sm font-medium text-gray-200 mb-1"
-            >
-              Value
-            </label>
-            {newEntryType === 'boolean' ? (
-              <select
-                id="new-entry-value"
-                value={newEntryValue}
-                onChange={(event) => setNewEntryValue(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"
-              >
-                <option value="">Select value</option>
-                <option value="true">true</option>
-                <option value="false">false</option>
-              </select>
-            ) : (
-              <input
-                id="new-entry-value"
-                type={newEntryType === 'number' ? 'number' : 'text'}
-                value={newEntryValue}
-                onChange={(event) => setNewEntryValue(event.target.value)}
-                placeholder={
-                  newEntryType === 'string'
-                    ? 'Enter string value'
-                    : newEntryType === 'number'
-                    ? 'Enter number value'
-                    : newEntryType === 'buffer'
-                    ? 'Enter array as JSON, e.g., [1, 2, 3]'
-                    : 'Enter value'
-                }
-                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"
-              />
-            )}
-            {newEntryType === 'buffer' && (
-              <p className="text-xs text-gray-400 mt-1">
-                Enter as JSON array of numbers, e.g., [1, 2, 3, 255]
-              </p>
-            )}
-          </div>
         </div>
 
         <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={handleAddEntry}
-            disabled={!newEntryKey.trim() || !newEntryValue.trim() || !selectedTypeSupported}
+            onClick={handleAdd}
+            disabled={isAddDisabled}
             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"
           >
             Add Entry
@@ -295,15 +207,13 @@ export const AddEntryDialog = ({
 
       <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/binary-value-editor-state.ts

@@ -0,0 +1,125 @@
+import {
+  base64ToBytes,
+  bytesToBase64,
+  bytesToGroupedHex,
+  hexInputToBytes,
+} from './binary';
+
+export type EditorMode = 'hex' | 'base64';
+
+export type EditorState = {
+  mode: EditorMode;
+  text: string;
+  bytes: number[] | null;
+  error: string | null;
+};
+
+export type EditorAction =
+  | { type: 'set-text'; text: string }
+  | { type: 'normalize-paste'; text: string }
+  | { type: 'switch-mode'; mode: EditorMode };
+
+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);
+
+const parse = (text: string, mode: EditorMode) =>
+  mode === 'hex' ? hexInputToBytes(text) : base64ToBytes(text);
+
+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 };
+};
+
+export const initialState = (args: {
+  initialBytes?: number[];
+  mode?: EditorMode;
+}): EditorState => {
+  const mode = args.mode ?? 'hex';
+  if (args.initialBytes && args.initialBytes.length > 0) {
+    return {
+      mode,
+      text: encode(args.initialBytes, mode),
+      bytes: args.initialBytes,
+      error: null,
+    };
+  }
+  return {
+    mode,
+    text: '',
+    bytes: null,
+    error: null,
+  };
+};
+
+export const reduce = (
+  state: EditorState,
+  action: EditorAction,
+): EditorState => {
+  switch (action.type) {
+    case 'set-text': {
+      return {
+        ...state,
+        text: action.text,
+        ...parsedToState(action.text, state.mode),
+      };
+    }
+    case 'normalize-paste': {
+      const result = parse(action.text, state.mode);
+      if (result.ok) {
+        return {
+          ...state,
+          text: encode(result.value, state.mode),
+          bytes: result.value,
+          error: null,
+        };
+      }
+      return {
+        ...state,
+        text: action.text,
+        bytes: null,
+        error: result.error,
+      };
+    }
+    case 'switch-mode': {
+      if (state.mode === action.mode) {
+        return state;
+      }
+      if (state.bytes !== null) {
+        return {
+          mode: action.mode,
+          text: encode(state.bytes, action.mode),
+          bytes: state.bytes,
+          error: null,
+        };
+      }
+      return {
+        mode: action.mode,
+        text: '',
+        bytes: null,
+        error: null,
+      };
+    }
+  }
+};
+
+export const validate = (state: EditorState): Validation => {
+  if (state.bytes === null) {
+    return {
+      ok: false,
+      reason: state.error ?? 'Enter at least one byte.',
+    };
+  }
+  if (state.bytes.length === 0) {
+    return { ok: false, reason: 'Enter at least one byte.' };
+  }
+  return { ok: true, bytes: state.bytes };
+};