@rozenite/storage-plugin 2.0.0 → 2.2.0

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

@@ -14,9 +14,7 @@ export type EntryDetailDialogProps = {
 
 const MAX_AUTO_JSON_INSPECTION_LENGTH = 50_000;
 
-export const jsonSafeParse = (
-  value: string,
-): Record<string, unknown> | unknown[] | null => {
+export const jsonSafeParse = (value: string): Record<string, unknown> | unknown[] | null => {
   try {
     const parsed = JSON.parse(value) as unknown;
 
@@ -63,33 +61,28 @@ export const EntryDetailDialog = ({
         {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="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>
-              <div className="mb-1 text-sm font-medium text-foreground">
-                Type
-              </div>
-              <Badge variant="outline">{entry.type}</Badge>
+              <div className="mb-1 text-sm font-medium text-foreground">Type</div>
+              <Badge tone="neutral" variant="outline">
+                {entry.type}
+              </Badge>
             </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="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'}
+                      {entry.value.length} {entry.value.length === 1 ? 'byte' : 'bytes'}
                     </div>
                     <HexdumpValueViewer bytes={entry.value} />
                   </div>
@@ -105,7 +98,7 @@ export const EntryDetailDialog = ({
 
         <Dialog.Footer>
           {entry && onEdit && (
-            <Button variant="outline" onClick={() => onEdit(entry)}>
+            <Button tone="neutral" variant="outline" onClick={() => onEdit(entry)}>
               <Edit3 className="h-3.5 w-3.5" />
               Edit
             </Button>

package/src/ui/format-value.tsx

@@ -13,20 +13,13 @@ export const formatValue = (entry: StorageEntry) => {
 
   if (entry.type === 'boolean') {
     return (
-      <span
-        className={cn(
-          'font-mono',
-          entry.value ? 'text-primary' : 'text-destructive',
-        )}
-      >
+      <span className={cn('font-mono', entry.value ? 'text-primary' : 'text-danger')}>
         {entry.value ? 'true' : 'false'}
       </span>
     );
   }
 
   return (
-    <span className="font-mono text-muted-foreground">
-      {compactBufferPreview(entry.value)}
-    </span>
+    <span className="font-mono text-muted-foreground">{compactBufferPreview(entry.value)}</span>
   );
 };

package/src/ui/import-dialog.tsx

@@ -82,26 +82,21 @@ const PreviewBody = ({
           <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>.
+              This file was exported from <strong>{sourceLabel}</strong>. You are importing into{' '}
+              <strong>{targetLabel}</strong>.
             </div>
           </div>
         )}
 
         {hasUnsupported && (
-          <div className="flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/10 p-2 text-xs text-destructive">
+          <div className="flex items-start gap-2 rounded-md border border-danger/40 bg-danger/10 p-2 text-xs text-danger">
             <XCircle className="mt-0.5 h-4 w-4 shrink-0" />
             <div>
               {preview.unsupportedTypes.length}{' '}
-              {preview.unsupportedTypes.length === 1
-                ? 'entry has a type'
-                : 'entries have types'}{' '}
-              not supported by this storage. Remove them from the file and try
-              again.
+              {preview.unsupportedTypes.length === 1 ? 'entry has a type' : '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-md bg-muted px-2 py-1 font-mono text-xs">
-                {preview.unsupportedTypes
-                  .map((u) => `${u.key} (${u.type})`)
-                  .join(', ')}
+                {preview.unsupportedTypes.map((u) => `${u.key} (${u.type})`).join(', ')}
               </div>
             </div>
           </div>
@@ -122,7 +117,7 @@ const PreviewBody = ({
       </div>
 
       <Dialog.Footer>
-        <Button variant="outline" onClick={onCancel}>
+        <Button tone="neutral" variant="outline" onClick={onCancel}>
           Cancel
         </Button>
         <Button onClick={onApply} disabled={hasUnsupported}>
@@ -163,7 +158,7 @@ const ResultBody = ({
       </div>
     ) : (
       <div className="flex flex-col gap-2 py-2">
-        <div className="flex items-center gap-2 text-destructive">
+        <div className="flex items-center gap-2 text-danger">
           <XCircle className="h-5 w-5" />
           <div className="text-sm font-medium">
             Import failed after {state.written} of {state.total}.
@@ -172,12 +167,12 @@ const ResultBody = ({
         {state.failedKey && (
           <div className="text-xs text-muted-foreground">
             Failed at key:{' '}
-            <Badge variant="outline" className="font-mono">
+            <Badge tone="neutral" variant="outline" className="font-mono">
               {state.failedKey}
             </Badge>
           </div>
         )}
-        <div className="rounded-md bg-muted px-2 py-1 font-mono text-xs text-destructive">
+        <div className="rounded-md bg-muted px-2 py-1 font-mono text-xs text-danger">
           {state.error}
         </div>
       </div>
@@ -191,12 +186,7 @@ const ResultBody = ({
   </>
 );
 
-export const ImportDialog = ({
-  state,
-  onApply,
-  onCancel,
-  onClose,
-}: ImportDialogProps) => {
+export const ImportDialog = ({ state, onApply, onCancel, onClose }: ImportDialogProps) => {
   const title =
     state === null
       ? ''
@@ -227,9 +217,7 @@ export const ImportDialog = ({
           <PreviewBody state={state} onApply={onApply} onCancel={onCancel} />
         )}
         {state?.phase === 'importing' && <ImportingBody state={state} />}
-        {state?.phase === 'result' && (
-          <ResultBody state={state} onClose={onClose} />
-        )}
+        {state?.phase === 'result' && <ResultBody state={state} onClose={onClose} />}
       </Dialog.Content>
     </Dialog>
   );

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

@@ -14,15 +14,8 @@ export const textRowRanges = (text: string): TextRange[] => {
     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),
-      ]);
+    for (let chunkStart = start; chunkStart < lineEnd; chunkStart += TEXT_CHUNK_SIZE) {
+      ranges.push([chunkStart, Math.min(chunkStart + TEXT_CHUNK_SIZE, lineEnd)]);
     }
 
     start = lineEnd;

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

@@ -1,15 +1,11 @@
 import { useMemo } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 import { formatHexdumpRow } from './binary';
-import {
-  textRowRanges,
-  VIRTUALIZED_TEXT_THRESHOLD,
-} from './large-value-viewer-state';
+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.length > VIRTUALIZED_TEXT_THRESHOLD ? textRowRanges(value) : null),
     [value],
   );
 
@@ -45,9 +41,7 @@ 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 <div className="text-xs text-muted italic">No bytes to display.</div>;
   }
 
   return (