@rozenite/storage-plugin 1.13.0 → 2.0.0

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

@@ -1,36 +1,20 @@
-import { X, Info, Edit3 } from 'lucide-react';
-import { JSONTree } from 'react-json-tree';
-import { StorageEntry } from '../shared/types';
+import { Badge, Button, Dialog, JsonInspector } from '@rozenite/ui';
 import { useMemo } from 'react';
-import { bytesToHexdump } from './binary';
+import { Edit3, Info } from 'lucide-react';
+import type { StorageEntry } from '../shared/types';
+import { formatValue } from './format-value';
+import { HexdumpValueViewer, TextValueViewer } from './large-value-viewer';
 
 export type EntryDetailDialogProps = {
-  isOpen: boolean;
-  onClose: () => void;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
   onEdit?: (entry: StorageEntry) => void;
   entry: StorageEntry | null;
 };
 
-const jsonTreeTheme = {
-  base00: 'transparent',
-  base01: '#374151', // bg-gray-700
-  base02: '#4b5563', // bg-gray-600
-  base03: '#6b7280', // text-gray-500
-  base04: '#9ca3af', // text-gray-400
-  base05: '#d1d5db', // text-gray-300
-  base06: '#e5e7eb', // text-gray-200
-  base07: '#f9fafb', // text-gray-100
-  base08: '#ef4444', // text-red-500
-  base09: '#f59e0b', // text-yellow-500
-  base0A: '#10b981', // text-green-500
-  base0B: '#3b82f6', // text-blue-500
-  base0C: '#06b6d4', // text-cyan-500
-  base0D: '#8b5cf6', // text-purple-500
-  base0E: '#ec4899', // text-pink-500
-  base0F: '#f97316', // text-orange-500
-};
+const MAX_AUTO_JSON_INSPECTION_LENGTH = 50_000;
 
-const jsonSafeParse = (
+export const jsonSafeParse = (
   value: string,
 ): Record<string, unknown> | unknown[] | null => {
   try {
@@ -50,179 +34,85 @@ const jsonSafeParse = (
   }
 };
 
-const getTypeColorClass = (type: string) => {
-  switch (type) {
-    case 'string':
-      return 'bg-green-600';
-    case 'number':
-      return 'bg-blue-600';
-    case 'boolean':
-      return 'bg-yellow-600';
-    case 'buffer':
-      return 'bg-purple-600';
-    default:
-      return 'bg-gray-600';
-  }
-};
-
-const formatValue = (entry: StorageEntry) => {
-  switch (entry.type) {
-    case 'string':
-      return (
-        <span className="text-green-300 font-mono break-all">
-          "{entry.value as string}"
-        </span>
-      );
-    case 'number':
-      return (
-        <span className="text-blue-300 font-mono">{entry.value as number}</span>
-      );
-    case 'boolean':
-      return (
-        <span
-          className={`font-mono ${
-            entry.value ? 'text-green-400' : 'text-red-400'
-          }`}
-        >
-          {entry.value ? 'true' : 'false'}
-        </span>
-      );
-    case 'buffer': {
-      const bufferArray = entry.value as number[];
-      return (
-        <div className="space-y-2">
-          <div className="text-xs text-gray-400">
-            {bufferArray.length} {bufferArray.length === 1 ? 'byte' : 'bytes'}
-          </div>
-          <pre className="text-purple-200 font-mono text-xs whitespace-pre overflow-auto leading-snug">
-            {bytesToHexdump(bufferArray)}
-          </pre>
-        </div>
-      );
-    }
-    default:
-      return <span className="text-gray-400">Unknown</span>;
-  }
-};
-
 export const EntryDetailDialog = ({
-  isOpen,
-  onClose,
+  open,
+  onOpenChange,
   onEdit,
   entry,
 }: EntryDetailDialogProps) => {
   const isStringValue = entry?.type === 'string';
-  const stringValue = isStringValue ? (entry.value as string) : '';
-  const jsonValue = useMemo(
-    () => (isStringValue ? jsonSafeParse(stringValue) : null),
-    [isStringValue, stringValue],
-  );
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Escape') {
-      onClose();
+  const stringValue = isStringValue ? entry.value : '';
+  const jsonValue = useMemo(() => {
+    if (!isStringValue || stringValue.length > MAX_AUTO_JSON_INSPECTION_LENGTH) {
+      return null;
     }
-  };
 
-  if (!isOpen || !entry) return null;
+    return jsonSafeParse(stringValue);
+  }, [isStringValue, stringValue]);
 
   return (
-    <div
-      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-      onClick={onClose}
-    >
-      <div
-        className="bg-gray-800 rounded-lg p-6 w-[90vw] max-w-2xl max-h-[90vh] flex flex-col"
-        onClick={(e) => e.stopPropagation()}
-        onKeyDown={handleKeyDown}
-      >
-        <div className="flex items-center justify-between mb-4">
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <Dialog.Content className="max-w-2xl">
+        <Dialog.Header>
           <div className="flex items-center gap-2">
-            <Info className="h-5 w-5 text-blue-400" />
-            <h2 className="text-lg font-semibold text-gray-100">
-              Entry Details
-            </h2>
+            <Info className="h-4 w-4 text-muted-foreground" />
+            <Dialog.Title>Entry Details</Dialog.Title>
           </div>
-          <button
-            onClick={onClose}
-            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 flex-1 overflow-auto">
-          {/* Key Display */}
-          <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 break-all">
-              {entry.key}
+        </Dialog.Header>
+
+        {entry && (
+          <div className="flex max-h-[70vh] flex-col gap-4 overflow-auto">
+            <div>
+              <div className="mb-1 text-sm font-medium text-foreground">
+                Key
+              </div>
+              <div className="w-full break-all rounded-md border border-input bg-muted px-3 py-2 font-mono text-sm text-foreground">
+                {entry.key}
+              </div>
             </div>
-          </div>
 
-          {/* Type Display */}
-          <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>
+              <div className="mb-1 text-sm font-medium text-foreground">
+                Type
+              </div>
+              <Badge variant="outline">{entry.type}</Badge>
             </div>
-          </div>
 
-          {/* Value Display */}
-          <div className="flex-1 min-h-0 flex flex-col">
-            <label className="block text-sm font-medium text-gray-200 mb-1">
-              Value
-            </label>
-            <div className="max-h-96 overflow-auto bg-gray-700 border border-gray-600 rounded p-3">
-              {jsonValue ? (
-                <JSONTree
-                  data={jsonValue}
-                  theme={jsonTreeTheme}
-                  invertTheme={false}
-                  shouldExpandNodeInitially={(keyPath) => keyPath.length <= 2}
-                />
-              ) : (
-                <div className="text-sm">{formatValue(entry)}</div>
-              )}
+            <div className="flex min-h-0 flex-1 flex-col">
+              <div className="mb-1 text-sm font-medium text-foreground">
+                Value
+              </div>
+              <div className="max-h-96 overflow-auto rounded-md border border-input bg-muted p-3">
+                {jsonValue ? (
+                  <JsonInspector data={jsonValue} />
+                ) : entry.type === 'buffer' ? (
+                  <div className="flex flex-col gap-2">
+                    <div className="text-xs text-muted-foreground">
+                      {entry.value.length}{' '}
+                      {entry.value.length === 1 ? 'byte' : 'bytes'}
+                    </div>
+                    <HexdumpValueViewer bytes={entry.value} />
+                  </div>
+                ) : entry.type === 'string' ? (
+                  <TextValueViewer value={entry.value} />
+                ) : (
+                  <div className="text-sm">{formatValue(entry)}</div>
+                )}
+              </div>
             </div>
           </div>
-        </div>
+        )}
 
-        {/* Dialog Actions */}
-        <div className="flex items-center justify-end gap-2 mt-6">
-          {onEdit && (
-            <button
-              onClick={() => {
-                if (entry && onEdit) {
-                  onEdit(entry);
-                }
-              }}
-              className="flex items-center gap-2 px-4 py-2 text-sm bg-gray-700 hover:bg-gray-600 text-white rounded transition-colors"
-            >
-              <Edit3 className="h-4 w-4" />
+        <Dialog.Footer>
+          {entry && onEdit && (
+            <Button variant="outline" onClick={() => onEdit(entry)}>
+              <Edit3 className="h-3.5 w-3.5" />
               Edit
-            </button>
+            </Button>
           )}
-          <button
-            onClick={onClose}
-            className="px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors"
-            autoFocus
-          >
-            Close
-          </button>
-        </div>
-      </div>
-    </div>
+          <Dialog.Close render={<Button />}>Close</Dialog.Close>
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog>
   );
 };

package/src/ui/format-value.tsx

@@ -0,0 +1,32 @@
+import { cn } from '@rozenite/ui';
+import type { StorageEntry } from '../shared/types';
+import { compactBufferPreview } from './binary';
+
+export const formatValue = (entry: StorageEntry) => {
+  if (entry.type === 'string') {
+    return <span className="font-mono text-foreground">"{entry.value}"</span>;
+  }
+
+  if (entry.type === 'number') {
+    return <span className="font-mono text-foreground">{entry.value}</span>;
+  }
+
+  if (entry.type === 'boolean') {
+    return (
+      <span
+        className={cn(
+          'font-mono',
+          entry.value ? 'text-primary' : 'text-destructive',
+        )}
+      >
+        {entry.value ? 'true' : 'false'}
+      </span>
+    );
+  }
+
+  return (
+    <span className="font-mono text-muted-foreground">
+      {compactBufferPreview(entry.value)}
+    </span>
+  );
+};

package/src/ui/globals.css

@@ -1,123 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-
-  .wrap-anywhere {
-    overflow-wrap: anywhere;
-  }
-}
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-/* Custom scrollbar styles to match plugin theme */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: #1f2937; /* gray-800 */
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #374151; /* gray-700 */
-  border-radius: 4px;
-  border: 1px solid #1f2937; /* gray-800 */
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #4b5563; /* gray-600 */
-}
-
-::-webkit-scrollbar-thumb:active {
-  background: #6b7280; /* gray-500 */
-}
-
-::-webkit-scrollbar-corner {
-  background: #1f2937; /* gray-800 */
-}
+@import '@rozenite/ui/styles.css';