@rozenite/storage-plugin 1.8.1 → 1.10.0

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 };
+};

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>
+  );
+};