chore(deps): react 19, react-window 2, globals 17

package.json

@@ -28,28 +28,27 @@
     "prepublishOnly": "npm run cli:build"
   },
   "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "react-resizable-panels": "^2.1.7",
-    "react-window": "^1.8.10",
+    "react-window": "^2.3.0",
     "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@playwright/test": "^1.60.0",
     "@testcontainers/clickhouse": "^12.0.1",
     "@types/node": "^25.9.3",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "@types/react-window": "^1.8.8",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
     "@vitejs/plugin-react": "^6.0.2",
     "electron": "^42.4.0",
     "electron-builder": "^26.7.0",
     "esbuild": "^0.28.1",
     "eslint": "^10.4.1",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.3",
-    "globals": "^15.14.0",
+    "globals": "^17.11.0",
     "testcontainers": "^12.0.1",
     "tsx": "^4.22.4",
     "typescript": "~5.6.2",

src/components/HexViewer/HexViewer.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useCallback, useRef, useEffect } from 'react';
-import { FixedSizeList as List, FixedSizeList } from 'react-window';
+import { List, useListRef, type RowComponentProps } from 'react-window';
 import { useStore } from '../../store/store';
 import { AstNode } from '../../core/types/ast';
 import '../../styles/hex-viewer.css';
@@ -171,18 +171,19 @@ function getTypeColor(typeName: string): string {
   return colors[baseType] || '#9e9e9e';
 }
 
-interface HexRowProps {
-  index: number;
-  style: React.CSSProperties;
-  data: {
-    bytes: Uint8Array;
-    highlightMap: Map<number, HighlightInfo>;
-    onByteClick: (offset: number) => void;
-  };
+interface HexRowData {
+  bytes: Uint8Array;
+  highlightMap: Map<number, HighlightInfo>;
+  onByteClick: (offset: number) => void;
 }
 
-function HexRow({ index, style, data }: HexRowProps) {
-  const { bytes, highlightMap, onByteClick } = data;
+function HexRow({
+  index,
+  style,
+  bytes,
+  highlightMap,
+  onByteClick,
+}: RowComponentProps<HexRowData>) {
   const startOffset = index * BYTES_PER_ROW;
   const rowBytes = bytes.slice(startOffset, startOffset + BYTES_PER_ROW);
 
@@ -263,18 +264,18 @@ export function HexViewer() {
   const scrollRequest = useStore((s) => s.scrollRequest);
   const clearScrollTarget = useStore((s) => s.clearScrollTarget);
 
-  const listRef = useRef<FixedSizeList>(null);
+  const listRef = useListRef(null);
   const lastScrollId = useRef<number | null>(null);
 
   // Scroll to byte offset when requested
   useEffect(() => {
     if (scrollRequest && listRef.current && scrollRequest.id !== lastScrollId.current) {
       lastScrollId.current = scrollRequest.id;
       const rowIndex = Math.floor(scrollRequest.byteOffset / BYTES_PER_ROW);
-      listRef.current.scrollToItem(rowIndex, 'center');
+      listRef.current.scrollToRow({ index: rowIndex, align: 'center' });
       clearScrollTarget();
     }
-  }, [scrollRequest, clearScrollTarget]);
+  }, [scrollRequest, clearScrollTarget, listRef]);
 
   const highlightMap = useMemo(
     () => buildHighlightMap(parsedData, activeNodeId, hoveredNodeId),
@@ -332,20 +333,16 @@ export function HexViewer() {
   return (
     <div className="hex-viewer">
       <List
-        ref={listRef}
-        height={window.innerHeight - 150} // Approximate, will be resized by parent
-        itemCount={rowCount}
-        itemSize={22}
-        width="100%"
-        itemData={{
+        listRef={listRef}
+        rowComponent={HexRow}
+        rowCount={rowCount}
+        rowHeight={22}
+        rowProps={{
           bytes: rawData,
           highlightMap,
           onByteClick: handleByteClick,
         }}
-        style={{ height: '100%' }}
-      >
-        {HexRow}
-      </List>
+      />
     </div>
   );
 }

src/components/QueryInput.tsx

@@ -26,7 +26,7 @@ export function QueryInput() {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [shareLabel, setShareLabel] = useState('Share');
   const [hostUrl, setHostUrl] = useState('http://localhost:8123');
-  const saveTimerRef = useRef<ReturnType<typeof setTimeout>>();
+  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
 
   // Load connection config in Electron mode
   useEffect(() => {

src/styles/hex-viewer.css

@@ -1,9 +1,11 @@
 .hex-viewer {
+  display: flex;
+  flex-direction: column;
   font-family: var(--font-mono);
   font-size: 13px;
   line-height: 1.6;
   height: 100%;
-  overflow: auto;
+  overflow: hidden;
   background: var(--bg-secondary);
 }