@rozenite/storage-plugin 1.13.0 → 2.0.0

package/src/ui/import-dialog.tsx

@@ -1,4 +1,5 @@
-import { AlertTriangle, CheckCircle2, Loader2, X, XCircle } from 'lucide-react';
+import { Badge, Button, Dialog } from '@rozenite/ui';
+import { AlertTriangle, CheckCircle2, Loader2, XCircle } from 'lucide-react';
 import type { StorageEntry, StorageTarget } from '../shared/types';
 import type { ImportPreview, StorageSnapshotV1 } from '../shared/snapshot';
 
@@ -13,6 +14,7 @@ export type ImportFlightState =
     }
   | {
       phase: 'importing';
+      requestId: string;
       target: StorageTarget;
       total: number;
       written: number;
@@ -42,10 +44,10 @@ const KeyList = ({ title, items }: { title: string; items: string[] }) => {
   if (items.length === 0) return null;
   return (
     <div>
-      <div className="text-xs font-medium text-gray-300">
+      <div className="text-xs font-medium text-foreground">
         {title} ({items.length})
       </div>
-      <div className="mt-1 max-h-24 overflow-auto rounded bg-gray-900 px-2 py-1 font-mono text-xs text-gray-200">
+      <div className="mt-1 max-h-24 overflow-auto rounded-md bg-muted px-2 py-1 font-mono text-xs text-muted-foreground">
         {items.slice(0, 50).join(', ')}
         {items.length > 50 ? `, +${items.length - 50} more` : ''}
       </div>
@@ -53,6 +55,13 @@ const KeyList = ({ title, items }: { title: string; items: string[] }) => {
   );
 };
 
+const StatTile = ({ label, value }: { label: string; value: number }) => (
+  <div className="rounded-md bg-muted p-2">
+    <div className="text-muted-foreground">{label}</div>
+    <div className="text-base font-semibold text-foreground">{value}</div>
+  </div>
+);
+
 const PreviewBody = ({
   state,
   onApply,
@@ -68,10 +77,10 @@ const PreviewBody = ({
 
   return (
     <>
-      <div className="space-y-3">
+      <div className="flex flex-col gap-3">
         {preview.metadataMismatch && (
-          <div className="flex items-start gap-2 rounded border border-yellow-700 bg-yellow-900/30 p-2 text-xs text-yellow-200">
-            <AlertTriangle className="mt-0.5 h-4 w-4 flex-shrink-0" />
+          <div className="flex items-start gap-2 rounded-md border border-border bg-muted p-2 text-xs text-foreground">
+            <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
             <div>
               This file was exported from <strong>{sourceLabel}</strong>. You
               are importing into <strong>{targetLabel}</strong>.
@@ -80,8 +89,8 @@ const PreviewBody = ({
         )}
 
         {hasUnsupported && (
-          <div className="flex items-start gap-2 rounded border border-red-700 bg-red-900/30 p-2 text-xs text-red-200">
-            <XCircle className="mt-0.5 h-4 w-4 flex-shrink-0" />
+          <div className="flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/10 p-2 text-xs text-destructive">
+            <XCircle className="mt-0.5 h-4 w-4 shrink-0" />
             <div>
               {preview.unsupportedTypes.length}{' '}
               {preview.unsupportedTypes.length === 1
@@ -89,7 +98,7 @@ const PreviewBody = ({
                 : 'entries have types'}{' '}
               not supported by this storage. Remove them from the file and try
               again.
-              <div className="mt-1 max-h-20 overflow-auto rounded bg-gray-900 px-2 py-1 font-mono text-xs text-red-100">
+              <div className="mt-1 max-h-20 overflow-auto rounded-md bg-muted px-2 py-1 font-mono text-xs">
                 {preview.unsupportedTypes
                   .map((u) => `${u.key} (${u.type})`)
                   .join(', ')}
@@ -99,24 +108,9 @@ const PreviewBody = ({
         )}
 
         <div className="grid grid-cols-3 gap-2 text-xs">
-          <div className="rounded bg-gray-900 p-2">
-            <div className="text-gray-400">New</div>
-            <div className="text-base font-semibold text-green-400">
-              {preview.newKeys.length}
-            </div>
-          </div>
-          <div className="rounded bg-gray-900 p-2">
-            <div className="text-gray-400">Overwrite</div>
-            <div className="text-base font-semibold text-yellow-400">
-              {preview.overwriteKeys.length}
-            </div>
-          </div>
-          <div className="rounded bg-gray-900 p-2">
-            <div className="text-gray-400">Skipped</div>
-            <div className="text-base font-semibold text-gray-400">
-              {preview.skippedKeys.length}
-            </div>
-          </div>
+          <StatTile label="New" value={preview.newKeys.length} />
+          <StatTile label="Overwrite" value={preview.overwriteKeys.length} />
+          <StatTile label="Skipped" value={preview.skippedKeys.length} />
         </div>
 
         <KeyList title="New keys" items={preview.newKeys} />
@@ -127,21 +121,14 @@ const PreviewBody = ({
         />
       </div>
 
-      <div className="mt-6 flex items-center justify-end gap-2">
-        <button
-          onClick={onCancel}
-          className="rounded px-4 py-2 text-sm text-gray-300 transition-colors hover:bg-gray-700 hover:text-white"
-        >
+      <Dialog.Footer>
+        <Button variant="outline" onClick={onCancel}>
           Cancel
-        </button>
-        <button
-          onClick={onApply}
-          disabled={hasUnsupported}
-          className="rounded bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-gray-600"
-        >
+        </Button>
+        <Button onClick={onApply} disabled={hasUnsupported}>
           Apply ({entriesToWrite.length})
-        </button>
-      </div>
+        </Button>
+      </Dialog.Footer>
     </>
   );
 };
@@ -152,8 +139,8 @@ const ImportingBody = ({
   state: Extract<ImportFlightState, { phase: 'importing' }>;
 }) => (
   <div className="flex flex-col items-center gap-3 py-6">
-    <Loader2 className="h-6 w-6 animate-spin text-blue-400" />
-    <div className="text-sm text-gray-200">
+    <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+    <div className="text-sm text-foreground">
       Importing… {state.written} / {state.total}
     </div>
   </div>
@@ -169,40 +156,38 @@ const ResultBody = ({
   <>
     {state.ok ? (
       <div className="flex flex-col items-center gap-3 py-4">
-        <CheckCircle2 className="h-8 w-8 text-green-400" />
-        <div className="text-sm text-gray-200">
+        <CheckCircle2 className="h-8 w-8 text-primary" />
+        <div className="text-sm text-foreground">
           Imported {state.written} {state.written === 1 ? 'entry' : 'entries'}.
         </div>
       </div>
     ) : (
-      <div className="space-y-2 py-2">
-        <div className="flex items-center gap-2 text-red-300">
+      <div className="flex flex-col gap-2 py-2">
+        <div className="flex items-center gap-2 text-destructive">
           <XCircle className="h-5 w-5" />
           <div className="text-sm font-medium">
             Import failed after {state.written} of {state.total}.
           </div>
         </div>
         {state.failedKey && (
-          <div className="text-xs text-gray-300">
+          <div className="text-xs text-muted-foreground">
             Failed at key:{' '}
-            <span className="font-mono text-gray-100">{state.failedKey}</span>
+            <Badge variant="outline" className="font-mono">
+              {state.failedKey}
+            </Badge>
           </div>
         )}
-        <div className="rounded bg-gray-900 px-2 py-1 font-mono text-xs text-red-200">
+        <div className="rounded-md bg-muted px-2 py-1 font-mono text-xs text-destructive">
           {state.error}
         </div>
       </div>
     )}
 
-    <div className="mt-4 flex items-center justify-end">
-      <button
-        onClick={onClose}
-        autoFocus
-        className="rounded bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
-      >
+    <Dialog.Footer>
+      <Button onClick={onClose} autoFocus>
         Close
-      </button>
-    </div>
+      </Button>
+    </Dialog.Footer>
   </>
 );
 
@@ -212,50 +197,40 @@ export const ImportDialog = ({
   onCancel,
   onClose,
 }: ImportDialogProps) => {
-  if (!state) return null;
-
   const title =
-    state.phase === 'preview'
-      ? 'Import snapshot'
-      : state.phase === 'importing'
-        ? 'Importing…'
-        : state.ok
-          ? 'Import complete'
-          : 'Import failed';
+    state === null
+      ? ''
+      : state.phase === 'preview'
+        ? 'Import snapshot'
+        : state.phase === 'importing'
+          ? 'Importing…'
+          : state.ok
+            ? 'Import complete'
+            : 'Import failed';
 
   // Importing phase: dialog is locked; only the success/failure transition closes it.
-  const isDismissible = state.phase !== 'importing';
+  const isDismissible = state !== null && state.phase !== 'importing';
 
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
-      onClick={isDismissible ? onClose : undefined}
+    <Dialog
+      open={state !== null}
+      onOpenChange={(open) => {
+        if (!open && isDismissible) onClose();
+      }}
     >
-      <div
-        className="mx-4 w-[28rem] max-w-full rounded-lg bg-gray-800 p-6"
-        onClick={(event) => event.stopPropagation()}
-      >
-        <div className="mb-4 flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-gray-100">{title}</h2>
-          {isDismissible && (
-            <button
-              onClick={onClose}
-              className="rounded p-1 text-gray-400 transition-colors hover:bg-gray-700 hover:text-gray-200"
-              title="Close dialog"
-            >
-              <X className="h-4 w-4" />
-            </button>
-          )}
-        </div>
+      <Dialog.Content showCloseButton={isDismissible}>
+        <Dialog.Header>
+          <Dialog.Title>{title}</Dialog.Title>
+        </Dialog.Header>
 
-        {state.phase === 'preview' && (
+        {state?.phase === 'preview' && (
           <PreviewBody state={state} onApply={onApply} onCancel={onCancel} />
         )}
-        {state.phase === 'importing' && <ImportingBody state={state} />}
-        {state.phase === 'result' && (
+        {state?.phase === 'importing' && <ImportingBody state={state} />}
+        {state?.phase === 'result' && (
           <ResultBody state={state} onClose={onClose} />
         )}
-      </div>
-    </div>
+      </Dialog.Content>
+    </Dialog>
   );
 };

package/src/ui/large-value-viewer-state.ts

@@ -0,0 +1,32 @@
+export const VIRTUALIZED_TEXT_THRESHOLD = 50_000;
+export const TEXT_CHUNK_SIZE = 2_000;
+
+export type TextRange = readonly [start: number, end: number];
+
+// Keep an index of row boundaries instead of splitting the complete value.
+// This lets the virtualizer create text only for visible rows, including a
+// single pathological line with no newline boundaries.
+export const textRowRanges = (text: string): TextRange[] => {
+  const ranges: TextRange[] = [];
+  let start = 0;
+
+  while (start < text.length) {
+    const newline = text.indexOf('\n', start);
+    const lineEnd = newline === -1 ? text.length : newline + 1;
+
+    for (
+      let chunkStart = start;
+      chunkStart < lineEnd;
+      chunkStart += TEXT_CHUNK_SIZE
+    ) {
+      ranges.push([
+        chunkStart,
+        Math.min(chunkStart + TEXT_CHUNK_SIZE, lineEnd),
+      ]);
+    }
+
+    start = lineEnd;
+  }
+
+  return ranges.length === 0 ? [[0, 0]] : ranges;
+};

package/src/ui/large-value-viewer.tsx

@@ -0,0 +1,71 @@
+import { useMemo } from 'react';
+import { Virtuoso } from 'react-virtuoso';
+import { formatHexdumpRow } from './binary';
+import {
+  textRowRanges,
+  VIRTUALIZED_TEXT_THRESHOLD,
+} from './large-value-viewer-state';
+
+export const TextValueViewer = ({ value }: { value: string }) => {
+  const ranges = useMemo(
+    () =>
+      value.length > VIRTUALIZED_TEXT_THRESHOLD ? textRowRanges(value) : null,
+    [value],
+  );
+
+  if (!ranges) {
+    return (
+      <pre className="font-mono text-sm text-success whitespace-pre-wrap wrap-anywhere">
+        "{value}"
+      </pre>
+    );
+  }
+
+  return (
+    <Virtuoso
+      aria-label="Large string value"
+      className="font-mono text-sm text-success"
+      style={{ height: 384 }}
+      totalCount={ranges.length}
+      itemContent={(index) => {
+        const [start, end] = ranges[index];
+        return (
+          <div className="whitespace-pre-wrap wrap-anywhere">
+            {index === 0 ? '"' : ''}
+            {value.slice(start, end)}
+            {index === ranges.length - 1 ? '"' : ''}
+          </div>
+        );
+      }}
+    />
+  );
+};
+
+export const HexdumpValueViewer = ({ bytes }: { bytes: readonly number[] }) => {
+  const totalCount = Math.ceil(bytes.length / 16);
+
+  if (totalCount === 0) {
+    return (
+      <div className="text-xs text-muted italic">No bytes to display.</div>
+    );
+  }
+
+  return (
+    <Virtuoso
+      aria-label="Buffer hexdump"
+      className="font-mono text-xs text-accent"
+      style={{ height: 384 }}
+      totalCount={totalCount}
+      itemContent={(index) => {
+        const row = formatHexdumpRow(bytes, index * 16);
+        return (
+          <div className="flex gap-4 leading-snug whitespace-pre">
+            <span className="text-muted">{row.offset}</span>
+            <span>{row.hex}</span>
+            <span className="text-muted">|{row.ascii}|</span>
+          </div>
+        );
+      }}
+    />
+  );
+};