@zendir/ui 0.5.0 → 0.6.0

package/dist/react/core/widgets/HexViewer.js

@@ -1,1106 +1,1368 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import React, { useMemo, useState, useCallback, useRef, useEffect, memo } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
-const REGION_COLORS = {
-  primary: "rgba(96, 165, 250, 0.15)",
-  secondary: "rgba(168, 85, 247, 0.15)",
-  tertiary: "rgba(251, 191, 36, 0.15)",
-  userData: "rgba(34, 197, 94, 0.15)",
-  error: "rgba(255, 56, 56, 0.15)"
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/widgets/HexViewer.tsx
+/**
+* @zendir/ui - HexViewer Component
+*
+* Displays raw binary data in a hex viewer format for telemetry packet analysis.
+* Shows offset, hex bytes, and ASCII representation side by side.
+*
+* Features:
+* - Hex + ASCII view with configurable bytes per row (8, 16, 32)
+* - Byte highlighting with custom colors (for field boundaries, errors, etc.)
+* - Click-to-select bytes and ranges
+* - Search by hex pattern or ASCII string
+* - Offset display in hex or decimal
+* - Live data streaming support (auto-scroll)
+* - Copy selection as hex, decimal, or ASCII
+* - Byte grouping (1, 2, 4, 8)
+* - Endianness toggle for multi-byte interpretation
+* - Status bar showing cursor position, selection info, data interpretation
+*
+* Astro UX Compliance:
+* - Dark theme with monospace font
+* - Status colors for highlighting
+* - Accessible keyboard navigation
+*
+* @example
+* ```tsx
+* <HexViewer
+*   data={new Uint8Array([0x48, 0x65, 0x6C, 0x6C, 0x6F])}
+*   bytesPerRow={16}
+*   highlights={[{ start: 0, end: 4, color: '#4CAF50', label: 'Header' }]}
+* />
+* ```
+*/
+/** Pre-defined region color palette for space packet headers */
+var REGION_COLORS = {
+	primary: "rgba(96, 165, 250, 0.15)",
+	secondary: "rgba(168, 85, 247, 0.15)",
+	tertiary: "rgba(251, 191, 36, 0.15)",
+	userData: "rgba(34, 197, 94, 0.15)",
+	error: "rgba(255, 56, 56, 0.15)"
 };
-const REGION_BORDER_COLORS = {
-  primary: "rgba(96, 165, 250, 0.5)",
-  secondary: "rgba(168, 85, 247, 0.5)",
-  tertiary: "rgba(251, 191, 36, 0.5)",
-  userData: "rgba(34, 197, 94, 0.5)",
-  error: "rgba(255, 56, 56, 0.5)"
+var REGION_BORDER_COLORS = {
+	primary: "rgba(96, 165, 250, 0.5)",
+	secondary: "rgba(168, 85, 247, 0.5)",
+	tertiary: "rgba(251, 191, 36, 0.5)",
+	userData: "rgba(34, 197, 94, 0.5)",
+	error: "rgba(255, 56, 56, 0.5)"
 };
 function toUint8Array(data) {
-  return data instanceof Uint8Array ? data : new Uint8Array(data);
+	return data instanceof Uint8Array ? data : new Uint8Array(data);
 }
 function byteToHex(byte) {
-  return byte.toString(16).padStart(2, "0").toUpperCase();
+	return byte.toString(16).padStart(2, "0").toUpperCase();
 }
 function byteToAscii(byte) {
-  return byte >= 32 && byte <= 126 ? String.fromCharCode(byte) : ".";
+	return byte >= 32 && byte <= 126 ? String.fromCharCode(byte) : ".";
 }
 function formatOffset(offset, base, totalBytes) {
-  if (base === "hex") {
-    const width2 = Math.max(4, Math.ceil(Math.log2(Math.max(totalBytes, 1)) / 4) * 1);
-    return offset.toString(16).padStart(Math.max(width2, 4), "0").toUpperCase();
-  }
-  const width = Math.max(4, totalBytes.toString().length);
-  return offset.toString().padStart(width, " ");
+	if (base === "hex") {
+		const width = Math.max(4, Math.ceil(Math.log2(Math.max(totalBytes, 1)) / 4) * 1);
+		return offset.toString(16).padStart(Math.max(width, 4), "0").toUpperCase();
+	}
+	const width = Math.max(4, totalBytes.toString().length);
+	return offset.toString().padStart(width, " ");
 }
 function interpretBytes(data, offset, endianness) {
-  const result = {
-    u8: data[offset],
-    i8: data[offset] > 127 ? data[offset] - 256 : data[offset]
-  };
-  if (offset + 1 < data.length) {
-    const view = new DataView(data.buffer, data.byteOffset + offset, Math.min(8, data.length - offset));
-    const be = endianness === "big";
-    result.u16 = view.getUint16(0, !be);
-    result.i16 = view.getInt16(0, !be);
-    if (offset + 3 < data.length) {
-      result.u32 = view.getUint32(0, !be);
-      result.i32 = view.getInt32(0, !be);
-      result.f32 = view.getFloat32(0, !be);
-    }
-    if (offset + 7 < data.length) {
-      result.f64 = view.getFloat64(0, !be);
-    }
-  }
-  return result;
+	const result = {
+		u8: data[offset],
+		i8: data[offset] > 127 ? data[offset] - 256 : data[offset]
+	};
+	if (offset + 1 < data.length) {
+		const view = new DataView(data.buffer, data.byteOffset + offset, Math.min(8, data.length - offset));
+		const be = endianness === "big";
+		result.u16 = view.getUint16(0, !be);
+		result.i16 = view.getInt16(0, !be);
+		if (offset + 3 < data.length) {
+			result.u32 = view.getUint32(0, !be);
+			result.i32 = view.getInt32(0, !be);
+			result.f32 = view.getFloat32(0, !be);
+		}
+		if (offset + 7 < data.length) result.f64 = view.getFloat64(0, !be);
+	}
+	return result;
 }
-const HEX_ROW_HEIGHT = 22;
-const HEX_OVERSCAN_ROWS = 16;
-const MAX_RENDERED_SEARCH_HIGHLIGHTS = 400;
-const HexRow = memo(function HexRow2({
-  offset,
-  bytes,
-  bytesPerRow,
-  byteGrouping,
-  offsetBase,
-  totalBytes,
-  showAscii,
-  showOffset,
-  highlights,
-  regions,
-  effectiveHighlight,
-  selectedStart,
-  selectedEnd,
-  cursorOffset,
-  onByteMouseDown,
-  onByteMouseEnter,
-  onByteClick,
-  handleByteHoverInternal,
-  handleByteLeaveInternal,
-  tokens
-}) {
-  const hexCells = [];
-  const asciiCells = [];
-  for (let i = 0; i < bytesPerRow; i++) {
-    const byteIdx = offset + i;
-    const isValid = i < bytes.length;
-    const byte = isValid ? bytes[i] : 0;
-    let bgColor = "transparent";
-    let fgColor = tokens.colors.text.primary;
-    let borderBottom = "2px solid transparent";
-    const isSelected = byteIdx >= Math.min(selectedStart, selectedEnd) && byteIdx <= Math.max(selectedStart, selectedEnd) && selectedStart >= 0;
-    const isCursor = byteIdx === cursorOffset;
-    let regionColor = null;
-    for (let r = 0; r < regions.length; r++) {
-      const region = regions[r];
-      if (byteIdx < region.start) break;
-      if (byteIdx >= region.start && byteIdx < region.end) {
-        regionColor = region.color;
-        break;
-      }
-    }
-    if (regionColor) {
-      bgColor = regionColor;
-    }
-    for (const h of highlights) {
-      if (byteIdx >= h.start && byteIdx <= h.end) {
-        bgColor = `${h.color}33`;
-        fgColor = h.color;
-        break;
-      }
-    }
-    if (effectiveHighlight && byteIdx >= effectiveHighlight.start && byteIdx < effectiveHighlight.end) {
-      bgColor = `${tokens.colors.status.caution}4D`;
-      borderBottom = `2px solid ${tokens.colors.status.caution}`;
-    }
-    if (isSelected) {
-      bgColor = `${tokens.colors.interactive.default}4D`;
-      fgColor = tokens.colors.interactive.default;
-    }
-    const needsGroupSpace = i > 0 && i % byteGrouping === 0;
-    hexCells.push(
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          role: "button",
-          tabIndex: isValid ? 0 : -1,
-          onMouseDown: () => isValid && onByteMouseDown(byteIdx),
-          onMouseEnter: () => {
-            isValid && onByteMouseEnter(byteIdx);
-            isValid && handleByteHoverInternal(byteIdx);
-          },
-          onMouseLeave: () => isValid && handleByteLeaveInternal(),
-          onClick: () => isValid && onByteClick(byteIdx),
-          onKeyDown: (e) => {
-            if (isValid && (e.key === "Enter" || e.key === " ")) {
-              e.preventDefault();
-              onByteClick(byteIdx);
-            }
-          },
-          style: {
-            padding: "0 2px",
-            marginLeft: needsGroupSpace ? 6 : 0,
-            background: bgColor,
-            color: isValid ? fgColor : `${tokens.colors.text.muted}26`,
-            cursor: isValid ? "pointer" : "default",
-            borderBottom: isCursor ? `2px solid ${tokens.colors.status.normal}` : borderBottom,
-            borderRadius: tokens.borderRadius.sm,
-            userSelect: "none",
-            transition: "background 0.1s ease"
-          },
-          children: isValid ? byteToHex(byte) : "  "
-        },
-        `hex-${i}`
-      )
-    );
-    if (showAscii) {
-      asciiCells.push(
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            role: "button",
-            tabIndex: isValid ? 0 : -1,
-            onMouseDown: () => isValid && onByteMouseDown(byteIdx),
-            onMouseEnter: () => {
-              isValid && onByteMouseEnter(byteIdx);
-              isValid && handleByteHoverInternal(byteIdx);
-            },
-            onMouseLeave: () => isValid && handleByteLeaveInternal(),
-            onClick: () => isValid && onByteClick(byteIdx),
-            onKeyDown: (e) => {
-              if (isValid && (e.key === "Enter" || e.key === " ")) {
-                e.preventDefault();
-                onByteClick(byteIdx);
-              }
-            },
-            style: {
-              background: bgColor,
-              color: isValid ? byte >= 32 && byte <= 126 ? fgColor : `${tokens.colors.text.muted}33` : "transparent",
-              cursor: isValid ? "pointer" : "default",
-              borderBottom: isCursor ? `2px solid ${tokens.colors.status.normal}` : borderBottom,
-              borderRadius: tokens.borderRadius.sm,
-              userSelect: "none",
-              width: 8,
-              textAlign: "center"
-            },
-            children: isValid ? byteToAscii(byte) : " "
-          },
-          `ascii-${i}`
-        )
-      );
-    }
-  }
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", height: HEX_ROW_HEIGHT, lineHeight: `${HEX_ROW_HEIGHT}px` }, children: [
-    showOffset && /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted, marginRight: 12, minWidth: 60, textAlign: "right" }, children: formatOffset(offset, offsetBase, totalBytes) }),
-    /* @__PURE__ */ jsx("span", { style: { display: "flex", gap: 1, marginRight: showAscii ? 16 : 0, letterSpacing: "0.5px" }, children: hexCells }),
-    showAscii && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("span", { style: { color: `${tokens.colors.border.muted}`, marginRight: 8 }, children: "│" }),
-      /* @__PURE__ */ jsx("span", { style: { display: "flex", letterSpacing: "1px" }, children: asciiCells })
-    ] })
-  ] });
+var HEX_ROW_HEIGHT = 22;
+var HEX_OVERSCAN_ROWS = 16;
+var MAX_RENDERED_SEARCH_HIGHLIGHTS = 400;
+var HexRow = memo(function HexRow({ offset, bytes, bytesPerRow, byteGrouping, offsetBase, totalBytes, showAscii, showOffset, highlights, regions, effectiveHighlight, selectedStart, selectedEnd, cursorOffset, onByteMouseDown, onByteMouseEnter, onByteClick, handleByteHoverInternal, handleByteLeaveInternal, tokens }) {
+	const hexCells = [];
+	const asciiCells = [];
+	for (let i = 0; i < bytesPerRow; i++) {
+		const byteIdx = offset + i;
+		const isValid = i < bytes.length;
+		const byte = isValid ? bytes[i] : 0;
+		let bgColor = "transparent";
+		let fgColor = tokens.colors.text.primary;
+		let borderBottom = "2px solid transparent";
+		const isSelected = byteIdx >= Math.min(selectedStart, selectedEnd) && byteIdx <= Math.max(selectedStart, selectedEnd) && selectedStart >= 0;
+		const isCursor = byteIdx === cursorOffset;
+		let regionColor = null;
+		for (let r = 0; r < regions.length; r++) {
+			const region = regions[r];
+			if (byteIdx < region.start) break;
+			if (byteIdx >= region.start && byteIdx < region.end) {
+				regionColor = region.color;
+				break;
+			}
+		}
+		if (regionColor) bgColor = regionColor;
+		for (const h of highlights) if (byteIdx >= h.start && byteIdx <= h.end) {
+			bgColor = `${h.color}33`;
+			fgColor = h.color;
+			break;
+		}
+		if (effectiveHighlight && byteIdx >= effectiveHighlight.start && byteIdx < effectiveHighlight.end) {
+			bgColor = `${tokens.colors.status.caution}4D`;
+			borderBottom = `2px solid ${tokens.colors.status.caution}`;
+		}
+		if (isSelected) {
+			bgColor = `${tokens.colors.interactive.default}4D`;
+			fgColor = tokens.colors.interactive.default;
+		}
+		const needsGroupSpace = i > 0 && i % byteGrouping === 0;
+		hexCells.push(/* @__PURE__ */ jsx("span", {
+			role: "button",
+			tabIndex: isValid ? 0 : -1,
+			onMouseDown: () => isValid && onByteMouseDown(byteIdx),
+			onMouseEnter: () => {
+				isValid && onByteMouseEnter(byteIdx);
+				isValid && handleByteHoverInternal(byteIdx);
+			},
+			onMouseLeave: () => isValid && handleByteLeaveInternal(),
+			onClick: () => isValid && onByteClick(byteIdx),
+			onKeyDown: (e) => {
+				if (isValid && (e.key === "Enter" || e.key === " ")) {
+					e.preventDefault();
+					onByteClick(byteIdx);
+				}
+			},
+			style: {
+				padding: "0 2px",
+				marginLeft: needsGroupSpace ? 6 : 0,
+				background: bgColor,
+				color: isValid ? fgColor : `${tokens.colors.text.muted}26`,
+				cursor: isValid ? "pointer" : "default",
+				borderBottom: isCursor ? `2px solid ${tokens.colors.status.normal}` : borderBottom,
+				borderRadius: tokens.borderRadius.sm,
+				userSelect: "none",
+				transition: "background 0.1s ease"
+			},
+			children: isValid ? byteToHex(byte) : "  "
+		}, `hex-${i}`));
+		if (showAscii) asciiCells.push(/* @__PURE__ */ jsx("span", {
+			role: "button",
+			tabIndex: isValid ? 0 : -1,
+			onMouseDown: () => isValid && onByteMouseDown(byteIdx),
+			onMouseEnter: () => {
+				isValid && onByteMouseEnter(byteIdx);
+				isValid && handleByteHoverInternal(byteIdx);
+			},
+			onMouseLeave: () => isValid && handleByteLeaveInternal(),
+			onClick: () => isValid && onByteClick(byteIdx),
+			onKeyDown: (e) => {
+				if (isValid && (e.key === "Enter" || e.key === " ")) {
+					e.preventDefault();
+					onByteClick(byteIdx);
+				}
+			},
+			style: {
+				background: bgColor,
+				color: isValid ? byte >= 32 && byte <= 126 ? fgColor : `${tokens.colors.text.muted}33` : "transparent",
+				cursor: isValid ? "pointer" : "default",
+				borderBottom: isCursor ? `2px solid ${tokens.colors.status.normal}` : borderBottom,
+				borderRadius: tokens.borderRadius.sm,
+				userSelect: "none",
+				width: 8,
+				textAlign: "center"
+			},
+			children: isValid ? byteToAscii(byte) : " "
+		}, `ascii-${i}`));
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			height: HEX_ROW_HEIGHT,
+			lineHeight: `${HEX_ROW_HEIGHT}px`
+		},
+		children: [
+			showOffset && /* @__PURE__ */ jsx("span", {
+				style: {
+					color: tokens.colors.text.muted,
+					marginRight: 12,
+					minWidth: 60,
+					textAlign: "right"
+				},
+				children: formatOffset(offset, offsetBase, totalBytes)
+			}),
+			/* @__PURE__ */ jsx("span", {
+				style: {
+					display: "flex",
+					gap: 1,
+					marginRight: showAscii ? 16 : 0,
+					letterSpacing: "0.5px"
+				},
+				children: hexCells
+			}),
+			showAscii && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				style: {
+					color: `${tokens.colors.border.muted}`,
+					marginRight: 8
+				},
+				children: "│"
+			}), /* @__PURE__ */ jsx("span", {
+				style: {
+					display: "flex",
+					letterSpacing: "1px"
+				},
+				children: asciiCells
+			})] })
+		]
+	});
 });
-function HexViewer({
-  data: rawData,
-  bytesPerRow = 16,
-  byteGrouping = 1,
-  offsetBase = "hex",
-  highlights = [],
-  regions = [],
-  decodedFields,
-  packetHeaders,
-  externalHighlight,
-  showAscii = true,
-  showOffset = true,
-  showStatusBar = true,
-  showSearch = true,
-  showToolbar = true,
-  showFieldsTable,
-  showHeaderSummary,
-  height = 400,
-  title,
-  streaming = false,
-  endianness = "big",
-  onSelectionChange,
-  onByteClick,
-  onByteHover,
-  onByteLeave,
-  className = "",
-  bordered = true,
-  style: styleProp
-}) {
-  const { tokens } = useTheme();
-  const data = useMemo(() => toUint8Array(rawData), [rawData]);
-  const [hoveredFieldIdx, setHoveredFieldIdx] = useState(null);
-  const [fieldHighlight, setFieldHighlight] = useState(null);
-  const [showHeaders, setShowHeaders] = useState(true);
-  const [showFields, setShowFields] = useState(true);
-  const sortedRegions = useMemo(
-    () => [...regions].sort((a, b) => a.start - b.start),
-    [regions]
-  );
-  const fieldByteRanges = useMemo(() => {
-    if (!decodedFields) return [];
-    return decodedFields.map((f) => ({
-      start: f.byteOffset ?? 0,
-      end: (f.byteOffset ?? 0) + Math.ceil((f.sizeBits ?? 0) / 8),
-      name: f.name
-    }));
-  }, [decodedFields]);
-  const handleFieldHover = useCallback((fieldIdx) => {
-    setHoveredFieldIdx(fieldIdx);
-    const range = fieldByteRanges[fieldIdx];
-    if (range && range.end > range.start) setFieldHighlight(range);
-  }, [fieldByteRanges]);
-  const handleFieldLeave = useCallback(() => {
-    setHoveredFieldIdx(null);
-    setFieldHighlight(null);
-  }, []);
-  const handleByteHoverInternal = useCallback((byteIdx) => {
-    onByteHover == null ? void 0 : onByteHover(byteIdx);
-    const fi = fieldByteRanges.findIndex((r) => byteIdx >= r.start && byteIdx < r.end);
-    if (fi >= 0) {
-      setHoveredFieldIdx(fi);
-      setFieldHighlight(fieldByteRanges[fi]);
-    } else {
-      setHoveredFieldIdx(null);
-      setFieldHighlight({ start: byteIdx, end: byteIdx + 1 });
-    }
-  }, [fieldByteRanges, onByteHover]);
-  const handleByteLeaveInternal = useCallback(() => {
-    onByteLeave == null ? void 0 : onByteLeave();
-    setHoveredFieldIdx(null);
-    setFieldHighlight(null);
-  }, [onByteLeave]);
-  const effectiveHighlight = externalHighlight || fieldHighlight;
-  const shouldShowFieldsTable = showFieldsTable ?? (decodedFields && decodedFields.length > 0);
-  const shouldShowHeaderSummary = showHeaderSummary ?? (packetHeaders && packetHeaders.length > 0);
-  const scrollRef = useRef(null);
-  const hasConstrainedHeight = useMemo(() => {
-    if (height === void 0 || height === null) return false;
-    if (typeof height === "string") return height.trim().toLowerCase() !== "auto";
-    return true;
-  }, [height]);
-  const decodedFieldsMaxHeight = useMemo(() => {
-    if (typeof height === "number") {
-      return Math.min(220, Math.max(120, Math.floor(height * 0.32)));
-    }
-    return 200;
-  }, [height]);
-  const [cursorOffset, setCursorOffset] = useState(-1);
-  const [selectStart, setSelectStart] = useState(-1);
-  const [selectEnd, setSelectEnd] = useState(-1);
-  const [isDragging, setIsDragging] = useState(false);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [searchType, setSearchType] = useState("hex");
-  const [searchResults, setSearchResults] = useState([]);
-  const [currentSearchIdx, setCurrentSearchIdx] = useState(-1);
-  const [localBytesPerRow, setLocalBytesPerRow] = useState(bytesPerRow);
-  const [localGrouping, setLocalGrouping] = useState(byteGrouping);
-  const [localOffsetBase, setLocalOffsetBase] = useState(offsetBase);
-  const [localEndianness, setLocalEndianness] = useState(endianness);
-  const [localShowAscii, setLocalShowAscii] = useState(showAscii);
-  const [scrollTop, setScrollTop] = useState(0);
-  const [viewportHeight, setViewportHeight] = useState(160);
-  useEffect(() => {
-    if (streaming && scrollRef.current) {
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-    }
-  }, [data, streaming]);
-  useEffect(() => {
-    const el = scrollRef.current;
-    if (!el) return void 0;
-    const updateViewportHeight = () => {
-      setViewportHeight(Math.max(120, el.clientHeight || 160));
-    };
-    updateViewportHeight();
-    if (typeof ResizeObserver !== "undefined") {
-      const observer = new ResizeObserver(updateViewportHeight);
-      observer.observe(el);
-      return () => observer.disconnect();
-    }
-    window.addEventListener("resize", updateViewportHeight);
-    return () => window.removeEventListener("resize", updateViewportHeight);
-  }, []);
-  const totalRows = Math.max(1, Math.ceil(data.length / localBytesPerRow));
-  const startRow = Math.max(0, Math.floor(scrollTop / HEX_ROW_HEIGHT) - HEX_OVERSCAN_ROWS);
-  const visibleRowCount = Math.ceil(viewportHeight / HEX_ROW_HEIGHT) + HEX_OVERSCAN_ROWS * 2;
-  const endRow = Math.min(totalRows, startRow + visibleRowCount);
-  const virtualRows = useMemo(() => {
-    const result = [];
-    for (let row = startRow; row < endRow; row++) {
-      const offset = row * localBytesPerRow;
-      const bytes = data.subarray(offset, Math.min(data.length, offset + localBytesPerRow));
-      result.push({ offset, bytes });
-    }
-    if (result.length === 0) {
-      result.push({ offset: 0, bytes: new Uint8Array(0) });
-    }
-    return result;
-  }, [data, localBytesPerRow, startRow, endRow]);
-  const doSearch = useCallback(() => {
-    if (!searchQuery.trim()) {
-      setSearchResults([]);
-      setCurrentSearchIdx(-1);
-      return;
-    }
-    const results = [];
-    if (searchType === "hex") {
-      const hexStr = searchQuery.replace(/\s+/g, "");
-      if (hexStr.length % 2 !== 0 || !/^[0-9a-fA-F]+$/.test(hexStr)) return;
-      const searchBytes = new Uint8Array(hexStr.length / 2);
-      for (let i = 0; i < searchBytes.length; i++) {
-        searchBytes[i] = parseInt(hexStr.slice(i * 2, i * 2 + 2), 16);
-      }
-      for (let i = 0; i <= data.length - searchBytes.length; i++) {
-        let match = true;
-        for (let j = 0; j < searchBytes.length; j++) {
-          if (data[i + j] !== searchBytes[j]) {
-            match = false;
-            break;
-          }
-        }
-        if (match) results.push(i);
-      }
-    } else {
-      const encoder = new TextEncoder();
-      const searchBytes = encoder.encode(searchQuery);
-      for (let i = 0; i <= data.length - searchBytes.length; i++) {
-        let match = true;
-        for (let j = 0; j < searchBytes.length; j++) {
-          if (data[i + j] !== searchBytes[j]) {
-            match = false;
-            break;
-          }
-        }
-        if (match) results.push(i);
-      }
-    }
-    setSearchResults(results);
-    setCurrentSearchIdx(results.length > 0 ? 0 : -1);
-    if (results.length > 0) {
-      setCursorOffset(results[0]);
-      if (scrollRef.current) {
-        const rowIdx = Math.floor(results[0] / localBytesPerRow);
-        scrollRef.current.scrollTop = Math.max(0, rowIdx * HEX_ROW_HEIGHT - 100);
-      }
-    }
-  }, [searchQuery, searchType, data, localBytesPerRow]);
-  const scrollToOffset = useCallback((offset) => {
-    if (!scrollRef.current) return;
-    const rowIdx = Math.floor(offset / localBytesPerRow);
-    scrollRef.current.scrollTop = Math.max(0, rowIdx * HEX_ROW_HEIGHT - 100);
-  }, [localBytesPerRow]);
-  const handleHexScroll = useCallback((event) => {
-    setScrollTop(event.currentTarget.scrollTop);
-  }, []);
-  const nextSearchResult = useCallback(() => {
-    if (searchResults.length === 0) return;
-    const nextIdx = (currentSearchIdx + 1) % searchResults.length;
-    setCurrentSearchIdx(nextIdx);
-    setCursorOffset(searchResults[nextIdx]);
-    scrollToOffset(searchResults[nextIdx]);
-  }, [searchResults, currentSearchIdx, scrollToOffset]);
-  const prevSearchResult = useCallback(() => {
-    if (searchResults.length === 0) return;
-    const prevIdx = (currentSearchIdx - 1 + searchResults.length) % searchResults.length;
-    setCurrentSearchIdx(prevIdx);
-    setCursorOffset(searchResults[prevIdx]);
-    scrollToOffset(searchResults[prevIdx]);
-  }, [searchResults, currentSearchIdx, scrollToOffset]);
-  const handleByteMouseDown = useCallback((idx) => {
-    setSelectStart(idx);
-    setSelectEnd(idx);
-    setCursorOffset(idx);
-    setIsDragging(true);
-  }, []);
-  const handleByteMouseEnter = useCallback((idx) => {
-    if (isDragging) {
-      setSelectEnd(idx);
-    }
-  }, [isDragging]);
-  const handleMouseUp = useCallback(() => {
-    if (isDragging) {
-      setIsDragging(false);
-      if (onSelectionChange && selectStart >= 0 && selectEnd >= 0) {
-        onSelectionChange(Math.min(selectStart, selectEnd), Math.max(selectStart, selectEnd));
-      }
-    }
-  }, [isDragging, selectStart, selectEnd, onSelectionChange]);
-  useEffect(() => {
-    window.addEventListener("mouseup", handleMouseUp);
-    return () => window.removeEventListener("mouseup", handleMouseUp);
-  }, [handleMouseUp]);
-  const handleByteClickCb = useCallback((idx) => {
-    setCursorOffset(idx);
-    if (onByteClick) {
-      onByteClick(idx, data[idx]);
-    }
-  }, [data, onByteClick]);
-  const copySelection = useCallback((format) => {
-    var _a;
-    if (selectStart < 0 || selectEnd < 0) return;
-    const start = Math.min(selectStart, selectEnd);
-    const end = Math.max(selectStart, selectEnd);
-    const selected = data.slice(start, end + 1);
-    let text;
-    if (format === "hex") {
-      text = Array.from(selected).map((b) => byteToHex(b)).join(" ");
-    } else if (format === "decimal") {
-      text = Array.from(selected).join(", ");
-    } else {
-      text = Array.from(selected).map((b) => byteToAscii(b)).join("");
-    }
-    (_a = navigator.clipboard) == null ? void 0 : _a.writeText(text);
-  }, [data, selectStart, selectEnd]);
-  const interpretation = useMemo(() => {
-    if (cursorOffset < 0 || cursorOffset >= data.length) return null;
-    return interpretBytes(data, cursorOffset, localEndianness);
-  }, [data, cursorOffset, localEndianness]);
-  const renderedSearchResultEntries = useMemo(() => {
-    if (searchResults.length <= MAX_RENDERED_SEARCH_HIGHLIGHTS) {
-      return searchResults.map((pos, idx) => ({ pos, idx }));
-    }
-    const halfWindow = Math.floor(MAX_RENDERED_SEARCH_HIGHLIGHTS / 2);
-    const anchor = currentSearchIdx >= 0 ? currentSearchIdx : 0;
-    const start = Math.max(0, anchor - halfWindow);
-    const end = Math.min(searchResults.length, start + MAX_RENDERED_SEARCH_HIGHLIGHTS);
-    const adjustedStart = Math.max(0, end - MAX_RENDERED_SEARCH_HIGHLIGHTS);
-    return searchResults.slice(adjustedStart, end).map((pos, i) => ({ pos, idx: adjustedStart + i }));
-  }, [searchResults, currentSearchIdx]);
-  const allHighlights = useMemo(() => {
-    const h = [...highlights];
-    const searchLen = searchType === "hex" ? searchQuery.replace(/\s+/g, "").length / 2 : searchQuery.length;
-    renderedSearchResultEntries.forEach(({ pos, idx }) => {
-      h.push({
-        start: pos,
-        end: pos + Math.max(0, searchLen - 1),
-        color: idx === currentSearchIdx ? tokens.colors.status.serious : tokens.colors.status.caution,
-        label: `Search match ${idx + 1}`
-      });
-    });
-    return h;
-  }, [highlights, renderedSearchResultEntries, currentSearchIdx, searchQuery, searchType, tokens]);
-  const containerStyle = {
-    fontFamily: tokens.typography.fontFamily.mono,
-    fontSize: 13,
-    lineHeight: "22px",
-    background: tokens.colors.background.base,
-    border: bordered ? `1px solid ${tokens.colors.border.muted}` : "none",
-    borderRadius: tokens.borderRadius.lg,
-    overflowX: "hidden",
-    overflowY: hasConstrainedHeight ? "auto" : "visible",
-    display: "flex",
-    flexDirection: "column",
-    minHeight: 0,
-    height: hasConstrainedHeight ? height : void 0,
-    color: tokens.colors.text.primary,
-    ...styleProp
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `hex-viewer ${className}`,
-      style: containerStyle,
-      children: [
-        /* @__PURE__ */ jsxs("div", { style: {
-          position: "sticky",
-          top: 0,
-          zIndex: 10,
-          background: tokens.colors.background.surface,
-          flexShrink: 0
-        }, children: [
-          title && /* @__PURE__ */ jsxs("div", { style: {
-            padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,
-            borderBottom: `1px solid ${tokens.colors.border.muted}`,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between"
-          }, children: [
-            /* @__PURE__ */ jsx("span", { style: { fontWeight: tokens.typography.fontWeight.medium, fontSize: tokens.typography.fontSize.base, fontFamily: tokens.typography.fontFamily.primary }, children: title }),
-            /* @__PURE__ */ jsxs("span", { style: { fontSize: tokens.typography.fontSize.sm, color: tokens.colors.text.muted }, children: [
-              data.length.toLocaleString(),
-              " bytes"
-            ] })
-          ] }),
-          showToolbar && /* @__PURE__ */ jsxs("div", { role: "toolbar", "aria-label": "Hex viewer controls", style: {
-            padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,
-            borderBottom: `1px solid ${tokens.colors.border.muted}`,
-            display: "flex",
-            alignItems: "center",
-            gap: tokens.spacing.sm,
-            flexWrap: "wrap",
-            fontSize: tokens.typography.fontSize.sm
-          }, children: [
-            /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 4, color: tokens.colors.text.muted }, children: [
-              "Bytes/Row:",
-              /* @__PURE__ */ jsxs(
-                "select",
-                {
-                  "aria-label": "Bytes per row",
-                  value: localBytesPerRow,
-                  onChange: (e) => setLocalBytesPerRow(Number(e.target.value)),
-                  style: {
-                    background: tokens.colors.background.base,
-                    color: tokens.colors.text.primary,
-                    border: `1px solid ${tokens.colors.border.muted}`,
-                    borderRadius: tokens.borderRadius.md,
-                    padding: "2px 4px",
-                    fontSize: 11
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx("option", { value: 8, children: "8" }),
-                    /* @__PURE__ */ jsx("option", { value: 16, children: "16" }),
-                    /* @__PURE__ */ jsx("option", { value: 32, children: "32" })
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 4, color: tokens.colors.text.muted }, children: [
-              "Group:",
-              /* @__PURE__ */ jsxs(
-                "select",
-                {
-                  "aria-label": "Byte grouping",
-                  value: localGrouping,
-                  onChange: (e) => setLocalGrouping(Number(e.target.value)),
-                  style: {
-                    background: tokens.colors.background.base,
-                    color: tokens.colors.text.primary,
-                    border: `1px solid ${tokens.colors.border.muted}`,
-                    borderRadius: tokens.borderRadius.md,
-                    padding: "2px 4px",
-                    fontSize: 11
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx("option", { value: 1, children: "1" }),
-                    /* @__PURE__ */ jsx("option", { value: 2, children: "2" }),
-                    /* @__PURE__ */ jsx("option", { value: 4, children: "4" }),
-                    /* @__PURE__ */ jsx("option", { value: 8, children: "8" })
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 4, color: tokens.colors.text.muted }, children: [
-              "Offset:",
-              /* @__PURE__ */ jsxs(
-                "select",
-                {
-                  "aria-label": "Offset format",
-                  value: localOffsetBase,
-                  onChange: (e) => setLocalOffsetBase(e.target.value),
-                  style: {
-                    background: tokens.colors.background.base,
-                    color: tokens.colors.text.primary,
-                    border: `1px solid ${tokens.colors.border.muted}`,
-                    borderRadius: tokens.borderRadius.md,
-                    padding: "2px 4px",
-                    fontSize: 11
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx("option", { value: "hex", children: "Hex" }),
-                    /* @__PURE__ */ jsx("option", { value: "decimal", children: "Dec" })
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 4, color: tokens.colors.text.muted }, children: [
-              "Endian:",
-              /* @__PURE__ */ jsxs(
-                "select",
-                {
-                  "aria-label": "Endianness",
-                  value: localEndianness,
-                  onChange: (e) => setLocalEndianness(e.target.value),
-                  style: {
-                    background: tokens.colors.background.base,
-                    color: tokens.colors.text.primary,
-                    border: `1px solid ${tokens.colors.border.muted}`,
-                    borderRadius: tokens.borderRadius.md,
-                    padding: "2px 4px",
-                    fontSize: 11
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx("option", { value: "big", children: "Big" }),
-                    /* @__PURE__ */ jsx("option", { value: "little", children: "Little" })
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 4, color: tokens.colors.text.muted, cursor: "pointer" }, children: [
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "checkbox",
-                  checked: localShowAscii,
-                  onChange: (e) => setLocalShowAscii(e.target.checked),
-                  style: { accentColor: tokens.colors.interactive.default }
-                }
-              ),
-              "ASCII"
-            ] }),
-            /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
-            selectStart >= 0 && selectEnd >= 0 && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 4 }, children: ["hex", "decimal", "ascii"].map((fmt) => /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: () => copySelection(fmt),
-                style: {
-                  background: tokens.colors.background.base,
-                  color: tokens.colors.text.secondary,
-                  border: `1px solid ${tokens.colors.border.muted}`,
-                  borderRadius: tokens.borderRadius.md,
-                  padding: "2px 8px",
-                  fontSize: 10,
-                  cursor: "pointer"
-                },
-                children: [
-                  "Copy ",
-                  fmt
-                ]
-              },
-              fmt
-            )) })
-          ] }),
-          showSearch && /* @__PURE__ */ jsxs("div", { role: "search", style: {
-            padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,
-            borderBottom: `1px solid ${tokens.colors.border.muted}`,
-            display: "flex",
-            alignItems: "center",
-            gap: tokens.spacing.sm
-          }, children: [
-            /* @__PURE__ */ jsx(
-              "label",
-              {
-                htmlFor: "hex-search-type",
-                style: { position: "absolute", width: 1, height: 1, padding: 0, margin: -1, overflow: "hidden", clip: "rect(0, 0, 0, 0)", border: 0 },
-                children: "Search type"
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "select",
-              {
-                id: "hex-search-type",
-                value: searchType,
-                onChange: (e) => setSearchType(e.target.value),
-                style: {
-                  background: tokens.colors.background.base,
-                  color: tokens.colors.text.primary,
-                  border: `1px solid ${tokens.colors.border.muted}`,
-                  borderRadius: tokens.borderRadius.md,
-                  padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
-                  fontSize: tokens.typography.fontSize.sm
-                },
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "hex", children: "Hex" }),
-                  /* @__PURE__ */ jsx("option", { value: "ascii", children: "ASCII" })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "text",
-                value: searchQuery,
-                onChange: (e) => setSearchQuery(e.target.value),
-                onKeyDown: (e) => {
-                  if (e.key === "Enter") doSearch();
-                },
-                placeholder: searchType === "hex" ? "e.g. 48 65 6C 6C 6F" : "Search ASCII...",
-                "aria-label": "Search hex data",
-                style: {
-                  flex: 1,
-                  background: tokens.colors.background.base,
-                  color: tokens.colors.text.primary,
-                  border: `1px solid ${tokens.colors.border.muted}`,
-                  borderRadius: tokens.borderRadius.md,
-                  padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
-                  fontSize: tokens.typography.fontSize.sm,
-                  outline: "none",
-                  fontFamily: "inherit"
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx("button", { onClick: doSearch, "aria-label": "Find matches", style: {
-              background: tokens.colors.interactive.default,
-              color: tokens.colors.text.inverse,
-              border: "none",
-              borderRadius: tokens.borderRadius.md,
-              padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
-              fontSize: tokens.typography.fontSize.sm,
-              cursor: "pointer",
-              fontWeight: tokens.typography.fontWeight.medium
-            }, children: "Find" }),
-            searchResults.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsxs("span", { style: { fontSize: tokens.typography.fontSize.sm, color: tokens.colors.text.muted }, "aria-live": "polite", children: [
-                currentSearchIdx + 1,
-                "/",
-                searchResults.length
-              ] }),
-              /* @__PURE__ */ jsx("button", { onClick: prevSearchResult, "aria-label": "Previous match", style: { background: "none", border: "none", color: tokens.colors.text.secondary, cursor: "pointer", fontSize: tokens.typography.fontSize.base, padding: tokens.spacing.xs }, children: "▲" }),
-              /* @__PURE__ */ jsx("button", { onClick: nextSearchResult, "aria-label": "Next match", style: { background: "none", border: "none", color: tokens.colors.text.secondary, cursor: "pointer", fontSize: tokens.typography.fontSize.base, padding: tokens.spacing.xs }, children: "▼" })
-            ] })
-          ] })
-        ] }),
-        shouldShowHeaderSummary && packetHeaders && packetHeaders.length > 0 && /* @__PURE__ */ jsxs("div", { style: { flexShrink: 0 }, children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              role: "button",
-              tabIndex: 0,
-              "aria-expanded": showHeaders,
-              "aria-label": "Toggle packet headers",
-              onClick: () => setShowHeaders(!showHeaders),
-              onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  setShowHeaders(!showHeaders);
-                }
-              },
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: tokens.spacing.sm,
-                padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,
-                background: tokens.colors.background.surface,
-                cursor: "pointer",
-                borderBottom: `1px solid ${tokens.colors.border.muted}`,
-                userSelect: "none"
-              },
-              children: [
-                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { fontSize: tokens.typography.fontSize.micro, color: tokens.colors.text.muted, transition: "transform 150ms ease", transform: showHeaders ? "rotate(0deg)" : "rotate(-90deg)" }, children: "▼" }),
-                /* @__PURE__ */ jsx("span", { style: { fontSize: tokens.typography.fontSize.sm, color: tokens.colors.text.secondary, fontWeight: tokens.typography.fontWeight.medium }, children: "Packet Headers" })
-              ]
-            }
-          ),
-          showHeaders && /* @__PURE__ */ jsx("div", { style: {
-            padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,
-            borderBottom: `1px solid ${tokens.colors.border.muted}`,
-            background: tokens.colors.background.base
-          }, children: /* @__PURE__ */ jsx("div", { style: {
-            display: "grid",
-            gridTemplateColumns: "auto 1fr",
-            gap: `${tokens.spacing.xxs} ${tokens.spacing.md}`,
-            fontSize: tokens.typography.fontSize.sm,
-            lineHeight: tokens.typography.lineHeight.tight
-          }, children: packetHeaders.map((entry, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: entry.label }),
-            /* @__PURE__ */ jsx("span", { style: {
-              color: tokens.colors.text.primary,
-              fontWeight: tokens.typography.fontWeight.medium,
-              fontFamily: entry.mono ? tokens.typography.fontFamily.mono : "inherit"
-            }, children: entry.value })
-          ] }, i)) }) })
-        ] }),
-        shouldShowFieldsTable && decodedFields && decodedFields.length > 0 && /* @__PURE__ */ jsxs("div", { style: { flexShrink: 0 }, children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              role: "button",
-              tabIndex: 0,
-              "aria-expanded": showFields,
-              "aria-label": "Toggle decoded fields",
-              onClick: () => setShowFields(!showFields),
-              onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  setShowFields(!showFields);
-                }
-              },
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: tokens.spacing.sm,
-                padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,
-                background: tokens.colors.background.surface,
-                cursor: "pointer",
-                borderBottom: `1px solid ${tokens.colors.border.muted}`,
-                userSelect: "none"
-              },
-              children: [
-                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { fontSize: tokens.typography.fontSize.micro, color: tokens.colors.text.muted, transition: "transform 150ms ease", transform: showFields ? "rotate(0deg)" : "rotate(-90deg)" }, children: "▼" }),
-                /* @__PURE__ */ jsxs("span", { style: { fontSize: tokens.typography.fontSize.sm, color: tokens.colors.text.secondary, fontWeight: tokens.typography.fontWeight.medium }, children: [
-                  "Decoded Fields (",
-                  decodedFields.length,
-                  ")"
-                ] })
-              ]
-            }
-          ),
-          showFields && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              role: "table",
-              "aria-label": "Decoded packet fields",
-              style: {
-                borderBottom: `1px solid ${tokens.colors.border.muted}`,
-                maxHeight: decodedFieldsMaxHeight,
-                overflowY: "auto"
-              },
-              children: [
-                /* @__PURE__ */ jsxs("div", { role: "row", style: {
-                  display: "flex",
-                  alignItems: "center",
-                  padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
-                  borderBottom: `1px solid ${tokens.colors.border.muted}`,
-                  gap: tokens.spacing.sm,
-                  position: "sticky",
-                  top: 0,
-                  background: tokens.colors.background.surface,
-                  zIndex: 1
-                }, children: [
-                  /* @__PURE__ */ jsx("span", { role: "columnheader", style: { flex: 2, fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.text.muted, textTransform: "uppercase", letterSpacing: "0.5px" }, children: "Field" }),
-                  /* @__PURE__ */ jsx("span", { role: "columnheader", style: { flex: 2, fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.text.muted, textTransform: "uppercase", letterSpacing: "0.5px", textAlign: "right" }, children: "Value" }),
-                  /* @__PURE__ */ jsx("span", { role: "columnheader", style: { flex: 1, fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.text.muted, textTransform: "uppercase", letterSpacing: "0.5px", textAlign: "right" }, children: "Unit" }),
-                  /* @__PURE__ */ jsx("span", { role: "columnheader", style: { flex: 1, fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.text.muted, textTransform: "uppercase", letterSpacing: "0.5px", textAlign: "right" }, children: "Offset" }),
-                  /* @__PURE__ */ jsx("span", { role: "columnheader", style: { flex: 1, fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.text.muted, textTransform: "uppercase", letterSpacing: "0.5px", textAlign: "right" }, children: "Size" })
-                ] }),
-                decodedFields.map((field, fi) => {
-                  const isHovered = hoveredFieldIdx === fi;
-                  return /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      onMouseEnter: () => handleFieldHover(fi),
-                      onMouseLeave: handleFieldLeave,
-                      title: field.description,
-                      style: {
-                        display: "flex",
-                        alignItems: "center",
-                        padding: `3px ${tokens.spacing.smd}`,
-                        gap: tokens.spacing.sm,
-                        background: isHovered ? `${tokens.colors.status.caution}14` : fi % 2 === 0 ? tokens.colors.background.base : "transparent",
-                        transition: "background 0.15s ease",
-                        cursor: "default",
-                        minHeight: tokens.elementSize.sm
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx("span", { role: "cell", style: {
-                          flex: 2,
-                          fontSize: tokens.typography.fontSize.sm,
-                          color: tokens.colors.text.secondary,
-                          overflow: "hidden",
-                          textOverflow: "ellipsis",
-                          whiteSpace: "nowrap"
-                        }, children: field.name }),
-                        /* @__PURE__ */ jsx("span", { role: "cell", style: {
-                          flex: 2,
-                          fontSize: tokens.typography.fontSize.sm,
-                          color: tokens.colors.text.primary,
-                          fontWeight: tokens.typography.fontWeight.medium,
-                          fontFamily: tokens.typography.fontFamily.mono,
-                          textAlign: "right"
-                        }, children: field.value === null || field.value === void 0 ? "—" : String(field.value) }),
-                        /* @__PURE__ */ jsx("span", { role: "cell", style: {
-                          flex: 1,
-                          fontSize: tokens.typography.fontSize.xxs,
-                          color: tokens.colors.text.muted,
-                          textAlign: "right"
-                        }, children: field.unit || "" }),
-                        /* @__PURE__ */ jsx("span", { role: "cell", style: {
-                          flex: 1,
-                          fontSize: tokens.typography.fontSize.xxs,
-                          color: tokens.colors.text.muted,
-                          textAlign: "right",
-                          fontFamily: tokens.typography.fontFamily.mono
-                        }, children: field.byteOffset !== void 0 ? field.byteOffset : "" }),
-                        /* @__PURE__ */ jsx("span", { role: "cell", style: {
-                          flex: 1,
-                          fontSize: tokens.typography.fontSize.xxs,
-                          color: tokens.colors.text.muted,
-                          textAlign: "right",
-                          fontFamily: tokens.typography.fontFamily.mono
-                        }, children: field.sizeBits ? `${field.sizeBits}b` : "" })
-                      ]
-                    },
-                    fi
-                  );
-                })
-              ]
-            }
-          )
-        ] }),
-        regions.length > 0 && /* @__PURE__ */ jsx(
-          "div",
-          {
-            role: "group",
-            "aria-label": "Packet structure regions",
-            style: {
-              padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
-              borderBottom: `1px solid ${tokens.colors.border.muted}`,
-              display: "flex",
-              alignItems: "center",
-              gap: tokens.spacing.smd,
-              flexWrap: "wrap",
-              fontSize: tokens.typography.fontSize.xxs,
-              background: tokens.colors.background.surface
-            },
-            children: regions.map((r, i) => /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: tokens.spacing.xs }, children: [
-              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: {
-                display: "inline-block",
-                width: 10,
-                height: 10,
-                borderRadius: tokens.borderRadius.sm,
-                background: r.color,
-                border: `1px solid ${r.borderColor || "transparent"}`
-              } }),
-              /* @__PURE__ */ jsxs("span", { style: { color: tokens.colors.text.muted }, children: [
-                r.label,
-                " (",
-                r.end - r.start,
-                "B)"
-              ] })
-            ] }, i))
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { role: "row", "aria-label": "Column headers", style: {
-          padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
-          borderBottom: `1px solid ${tokens.colors.border.muted}`,
-          display: "flex",
-          alignItems: "center",
-          fontSize: tokens.typography.fontSize.xxs,
-          color: tokens.colors.text.muted,
-          textTransform: "uppercase",
-          letterSpacing: "0.5px",
-          fontWeight: tokens.typography.fontWeight.medium,
-          background: tokens.colors.background.surface
-        }, children: [
-          showOffset && /* @__PURE__ */ jsx("span", { style: { marginRight: tokens.spacing.smd, minWidth: 60, textAlign: "right" }, children: "Offset" }),
-          /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: "Hex" }),
-          localShowAscii && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { color: `${tokens.colors.border.muted}`, marginRight: tokens.spacing.sm }, children: "|" }),
-            /* @__PURE__ */ jsx("span", { children: "ASCII" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: scrollRef,
-            role: "grid",
-            "aria-label": "Hex data",
-            tabIndex: 0,
-            onScroll: handleHexScroll,
-            style: {
-              flex: "1 1 160px",
-              minHeight: 160,
-              overflow: "auto",
-              padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`
-            },
-            children: /* @__PURE__ */ jsx("div", { style: { height: totalRows * HEX_ROW_HEIGHT, position: "relative" }, children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: startRow * HEX_ROW_HEIGHT, left: 0, right: 0 }, children: virtualRows.map((row) => /* @__PURE__ */ jsx(
-              HexRow,
-              {
-                offset: row.offset,
-                bytes: row.bytes,
-                bytesPerRow: localBytesPerRow,
-                byteGrouping: localGrouping,
-                offsetBase: localOffsetBase,
-                totalBytes: data.length,
-                showAscii: localShowAscii,
-                showOffset,
-                highlights: allHighlights,
-                regions: sortedRegions,
-                effectiveHighlight,
-                selectedStart: selectStart,
-                selectedEnd: selectEnd,
-                cursorOffset,
-                onByteMouseDown: handleByteMouseDown,
-                onByteMouseEnter: handleByteMouseEnter,
-                onByteClick: handleByteClickCb,
-                handleByteHoverInternal,
-                handleByteLeaveInternal,
-                tokens
-              },
-              row.offset
-            )) }) })
-          }
-        ),
-        highlights.length > 0 && /* @__PURE__ */ jsx("div", { role: "group", "aria-label": "Search highlights", style: {
-          padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
-          borderTop: `1px solid ${tokens.colors.border.muted}`,
-          display: "flex",
-          alignItems: "center",
-          gap: tokens.spacing.smd,
-          flexWrap: "wrap",
-          fontSize: tokens.typography.fontSize.xxs,
-          background: tokens.colors.background.surface
-        }, children: highlights.filter((h) => h.label).map((h, i) => /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.xs }, children: [
-          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { width: 10, height: 10, borderRadius: tokens.borderRadius.sm, background: h.color, display: "inline-block" } }),
-          /* @__PURE__ */ jsxs("span", { style: { color: tokens.colors.text.muted }, children: [
-            h.label,
-            " (0x",
-            h.start.toString(16),
-            "-0x",
-            h.end.toString(16),
-            ")"
-          ] })
-        ] }, i)) }),
-        showStatusBar && /* @__PURE__ */ jsxs("div", { role: "status", "aria-live": "polite", style: {
-          padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,
-          borderTop: `1px solid ${tokens.colors.border.muted}`,
-          display: "flex",
-          alignItems: "center",
-          gap: tokens.spacing.md,
-          fontSize: tokens.typography.fontSize.sm,
-          background: tokens.colors.background.surface,
-          color: tokens.colors.text.muted,
-          flexWrap: "wrap"
-        }, children: [
-          /* @__PURE__ */ jsxs("span", { children: [
-            "Size: ",
-            data.length.toLocaleString(),
-            " bytes"
-          ] }),
-          cursorOffset >= 0 && cursorOffset < data.length && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs("span", { children: [
-              "Offset: 0x",
-              cursorOffset.toString(16).toUpperCase(),
-              " (",
-              cursorOffset,
-              ")"
-            ] }),
-            /* @__PURE__ */ jsxs("span", { children: [
-              "Value: 0x",
-              byteToHex(data[cursorOffset]),
-              " (",
-              data[cursorOffset],
-              ")"
-            ] })
-          ] }),
-          selectStart >= 0 && selectEnd >= 0 && selectStart !== selectEnd && /* @__PURE__ */ jsxs("span", { children: [
-            "Selection: ",
-            Math.abs(selectEnd - selectStart) + 1,
-            " bytes (0x",
-            Math.min(selectStart, selectEnd).toString(16).toUpperCase(),
-            "-0x",
-            Math.max(selectStart, selectEnd).toString(16).toUpperCase(),
-            ")"
-          ] }),
-          interpretation && /* @__PURE__ */ jsxs("span", { style: { display: "flex", gap: tokens.spacing.sm, color: tokens.colors.text.secondary }, children: [
-            /* @__PURE__ */ jsxs("span", { children: [
-              "U8: ",
-              interpretation.u8
-            ] }),
-            /* @__PURE__ */ jsxs("span", { children: [
-              "I8: ",
-              interpretation.i8
-            ] }),
-            interpretation.u16 !== void 0 && /* @__PURE__ */ jsxs("span", { children: [
-              "U16: ",
-              interpretation.u16
-            ] }),
-            interpretation.u32 !== void 0 && /* @__PURE__ */ jsxs("span", { children: [
-              "U32: ",
-              interpretation.u32
-            ] }),
-            interpretation.f32 !== void 0 && /* @__PURE__ */ jsxs("span", { children: [
-              "F32: ",
-              interpretation.f32.toFixed(6)
-            ] })
-          ] })
-        ] })
-      ]
-    }
-  );
+function HexViewer({ data: rawData, bytesPerRow = 16, byteGrouping = 1, offsetBase = "hex", highlights = [], regions = [], decodedFields, packetHeaders, externalHighlight, showAscii = true, showOffset = true, showStatusBar = true, showSearch = true, showToolbar = true, showFieldsTable, showHeaderSummary, height = 400, title, streaming = false, endianness = "big", onSelectionChange, onByteClick, onByteHover, onByteLeave, className = "", bordered = true, style: styleProp }) {
+	const { tokens } = useTheme();
+	const data = useMemo(() => toUint8Array(rawData), [rawData]);
+	const [hoveredFieldIdx, setHoveredFieldIdx] = useState(null);
+	const [fieldHighlight, setFieldHighlight] = useState(null);
+	const [showHeaders, setShowHeaders] = useState(true);
+	const [showFields, setShowFields] = useState(true);
+	const sortedRegions = useMemo(() => [...regions].sort((a, b) => a.start - b.start), [regions]);
+	const fieldByteRanges = useMemo(() => {
+		if (!decodedFields) return [];
+		return decodedFields.map((f) => ({
+			start: f.byteOffset ?? 0,
+			end: (f.byteOffset ?? 0) + Math.ceil((f.sizeBits ?? 0) / 8),
+			name: f.name
+		}));
+	}, [decodedFields]);
+	const handleFieldHover = useCallback((fieldIdx) => {
+		setHoveredFieldIdx(fieldIdx);
+		const range = fieldByteRanges[fieldIdx];
+		if (range && range.end > range.start) setFieldHighlight(range);
+	}, [fieldByteRanges]);
+	const handleFieldLeave = useCallback(() => {
+		setHoveredFieldIdx(null);
+		setFieldHighlight(null);
+	}, []);
+	const handleByteHoverInternal = useCallback((byteIdx) => {
+		onByteHover?.(byteIdx);
+		const fi = fieldByteRanges.findIndex((r) => byteIdx >= r.start && byteIdx < r.end);
+		if (fi >= 0) {
+			setHoveredFieldIdx(fi);
+			setFieldHighlight(fieldByteRanges[fi]);
+		} else {
+			setHoveredFieldIdx(null);
+			setFieldHighlight({
+				start: byteIdx,
+				end: byteIdx + 1
+			});
+		}
+	}, [fieldByteRanges, onByteHover]);
+	const handleByteLeaveInternal = useCallback(() => {
+		onByteLeave?.();
+		setHoveredFieldIdx(null);
+		setFieldHighlight(null);
+	}, [onByteLeave]);
+	const effectiveHighlight = externalHighlight || fieldHighlight;
+	const shouldShowFieldsTable = showFieldsTable ?? (decodedFields && decodedFields.length > 0);
+	const shouldShowHeaderSummary = showHeaderSummary ?? (packetHeaders && packetHeaders.length > 0);
+	const scrollRef = useRef(null);
+	const hasConstrainedHeight = useMemo(() => {
+		if (height === void 0 || height === null) return false;
+		if (typeof height === "string") return height.trim().toLowerCase() !== "auto";
+		return true;
+	}, [height]);
+	const decodedFieldsMaxHeight = useMemo(() => {
+		if (typeof height === "number") return Math.min(220, Math.max(120, Math.floor(height * .32)));
+		return 200;
+	}, [height]);
+	const [cursorOffset, setCursorOffset] = useState(-1);
+	const [selectStart, setSelectStart] = useState(-1);
+	const [selectEnd, setSelectEnd] = useState(-1);
+	const [isDragging, setIsDragging] = useState(false);
+	const [searchQuery, setSearchQuery] = useState("");
+	const [searchType, setSearchType] = useState("hex");
+	const [searchResults, setSearchResults] = useState([]);
+	const [currentSearchIdx, setCurrentSearchIdx] = useState(-1);
+	const [localBytesPerRow, setLocalBytesPerRow] = useState(bytesPerRow);
+	const [localGrouping, setLocalGrouping] = useState(byteGrouping);
+	const [localOffsetBase, setLocalOffsetBase] = useState(offsetBase);
+	const [localEndianness, setLocalEndianness] = useState(endianness);
+	const [localShowAscii, setLocalShowAscii] = useState(showAscii);
+	const [scrollTop, setScrollTop] = useState(0);
+	const [viewportHeight, setViewportHeight] = useState(160);
+	useEffect(() => {
+		if (streaming && scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+	}, [data, streaming]);
+	useEffect(() => {
+		const el = scrollRef.current;
+		if (!el) return void 0;
+		const updateViewportHeight = () => {
+			setViewportHeight(Math.max(120, el.clientHeight || 160));
+		};
+		updateViewportHeight();
+		if (typeof ResizeObserver !== "undefined") {
+			const observer = new ResizeObserver(updateViewportHeight);
+			observer.observe(el);
+			return () => observer.disconnect();
+		}
+		window.addEventListener("resize", updateViewportHeight);
+		return () => window.removeEventListener("resize", updateViewportHeight);
+	}, []);
+	const totalRows = Math.max(1, Math.ceil(data.length / localBytesPerRow));
+	const startRow = Math.max(0, Math.floor(scrollTop / HEX_ROW_HEIGHT) - HEX_OVERSCAN_ROWS);
+	const visibleRowCount = Math.ceil(viewportHeight / HEX_ROW_HEIGHT) + HEX_OVERSCAN_ROWS * 2;
+	const endRow = Math.min(totalRows, startRow + visibleRowCount);
+	const virtualRows = useMemo(() => {
+		const result = [];
+		for (let row = startRow; row < endRow; row++) {
+			const offset = row * localBytesPerRow;
+			const bytes = data.subarray(offset, Math.min(data.length, offset + localBytesPerRow));
+			result.push({
+				offset,
+				bytes
+			});
+		}
+		if (result.length === 0) result.push({
+			offset: 0,
+			bytes: /* @__PURE__ */ new Uint8Array(0)
+		});
+		return result;
+	}, [
+		data,
+		localBytesPerRow,
+		startRow,
+		endRow
+	]);
+	const doSearch = useCallback(() => {
+		if (!searchQuery.trim()) {
+			setSearchResults([]);
+			setCurrentSearchIdx(-1);
+			return;
+		}
+		const results = [];
+		if (searchType === "hex") {
+			const hexStr = searchQuery.replace(/\s+/g, "");
+			if (hexStr.length % 2 !== 0 || !/^[0-9a-fA-F]+$/.test(hexStr)) return;
+			const searchBytes = new Uint8Array(hexStr.length / 2);
+			for (let i = 0; i < searchBytes.length; i++) searchBytes[i] = parseInt(hexStr.slice(i * 2, i * 2 + 2), 16);
+			for (let i = 0; i <= data.length - searchBytes.length; i++) {
+				let match = true;
+				for (let j = 0; j < searchBytes.length; j++) if (data[i + j] !== searchBytes[j]) {
+					match = false;
+					break;
+				}
+				if (match) results.push(i);
+			}
+		} else {
+			const searchBytes = new TextEncoder().encode(searchQuery);
+			for (let i = 0; i <= data.length - searchBytes.length; i++) {
+				let match = true;
+				for (let j = 0; j < searchBytes.length; j++) if (data[i + j] !== searchBytes[j]) {
+					match = false;
+					break;
+				}
+				if (match) results.push(i);
+			}
+		}
+		setSearchResults(results);
+		setCurrentSearchIdx(results.length > 0 ? 0 : -1);
+		if (results.length > 0) {
+			setCursorOffset(results[0]);
+			if (scrollRef.current) {
+				const rowIdx = Math.floor(results[0] / localBytesPerRow);
+				scrollRef.current.scrollTop = Math.max(0, rowIdx * HEX_ROW_HEIGHT - 100);
+			}
+		}
+	}, [
+		searchQuery,
+		searchType,
+		data,
+		localBytesPerRow
+	]);
+	const scrollToOffset = useCallback((offset) => {
+		if (!scrollRef.current) return;
+		const rowIdx = Math.floor(offset / localBytesPerRow);
+		scrollRef.current.scrollTop = Math.max(0, rowIdx * HEX_ROW_HEIGHT - 100);
+	}, [localBytesPerRow]);
+	const handleHexScroll = useCallback((event) => {
+		setScrollTop(event.currentTarget.scrollTop);
+	}, []);
+	const nextSearchResult = useCallback(() => {
+		if (searchResults.length === 0) return;
+		const nextIdx = (currentSearchIdx + 1) % searchResults.length;
+		setCurrentSearchIdx(nextIdx);
+		setCursorOffset(searchResults[nextIdx]);
+		scrollToOffset(searchResults[nextIdx]);
+	}, [
+		searchResults,
+		currentSearchIdx,
+		scrollToOffset
+	]);
+	const prevSearchResult = useCallback(() => {
+		if (searchResults.length === 0) return;
+		const prevIdx = (currentSearchIdx - 1 + searchResults.length) % searchResults.length;
+		setCurrentSearchIdx(prevIdx);
+		setCursorOffset(searchResults[prevIdx]);
+		scrollToOffset(searchResults[prevIdx]);
+	}, [
+		searchResults,
+		currentSearchIdx,
+		scrollToOffset
+	]);
+	const handleByteMouseDown = useCallback((idx) => {
+		setSelectStart(idx);
+		setSelectEnd(idx);
+		setCursorOffset(idx);
+		setIsDragging(true);
+	}, []);
+	const handleByteMouseEnter = useCallback((idx) => {
+		if (isDragging) setSelectEnd(idx);
+	}, [isDragging]);
+	const handleMouseUp = useCallback(() => {
+		if (isDragging) {
+			setIsDragging(false);
+			if (onSelectionChange && selectStart >= 0 && selectEnd >= 0) onSelectionChange(Math.min(selectStart, selectEnd), Math.max(selectStart, selectEnd));
+		}
+	}, [
+		isDragging,
+		selectStart,
+		selectEnd,
+		onSelectionChange
+	]);
+	useEffect(() => {
+		window.addEventListener("mouseup", handleMouseUp);
+		return () => window.removeEventListener("mouseup", handleMouseUp);
+	}, [handleMouseUp]);
+	const handleByteClickCb = useCallback((idx) => {
+		setCursorOffset(idx);
+		if (onByteClick) onByteClick(idx, data[idx]);
+	}, [data, onByteClick]);
+	const copySelection = useCallback((format) => {
+		if (selectStart < 0 || selectEnd < 0) return;
+		const start = Math.min(selectStart, selectEnd);
+		const end = Math.max(selectStart, selectEnd);
+		const selected = data.slice(start, end + 1);
+		let text;
+		if (format === "hex") text = Array.from(selected).map((b) => byteToHex(b)).join(" ");
+		else if (format === "decimal") text = Array.from(selected).join(", ");
+		else text = Array.from(selected).map((b) => byteToAscii(b)).join("");
+		navigator.clipboard?.writeText(text);
+	}, [
+		data,
+		selectStart,
+		selectEnd
+	]);
+	const interpretation = useMemo(() => {
+		if (cursorOffset < 0 || cursorOffset >= data.length) return null;
+		return interpretBytes(data, cursorOffset, localEndianness);
+	}, [
+		data,
+		cursorOffset,
+		localEndianness
+	]);
+	const renderedSearchResultEntries = useMemo(() => {
+		if (searchResults.length <= MAX_RENDERED_SEARCH_HIGHLIGHTS) return searchResults.map((pos, idx) => ({
+			pos,
+			idx
+		}));
+		const start = Math.max(0, (currentSearchIdx >= 0 ? currentSearchIdx : 0) - Math.floor(MAX_RENDERED_SEARCH_HIGHLIGHTS / 2));
+		const end = Math.min(searchResults.length, start + MAX_RENDERED_SEARCH_HIGHLIGHTS);
+		const adjustedStart = Math.max(0, end - MAX_RENDERED_SEARCH_HIGHLIGHTS);
+		return searchResults.slice(adjustedStart, end).map((pos, i) => ({
+			pos,
+			idx: adjustedStart + i
+		}));
+	}, [searchResults, currentSearchIdx]);
+	const allHighlights = useMemo(() => {
+		const h = [...highlights];
+		const searchLen = searchType === "hex" ? searchQuery.replace(/\s+/g, "").length / 2 : searchQuery.length;
+		renderedSearchResultEntries.forEach(({ pos, idx }) => {
+			h.push({
+				start: pos,
+				end: pos + Math.max(0, searchLen - 1),
+				color: idx === currentSearchIdx ? tokens.colors.status.serious : tokens.colors.status.caution,
+				label: `Search match ${idx + 1}`
+			});
+		});
+		return h;
+	}, [
+		highlights,
+		renderedSearchResultEntries,
+		currentSearchIdx,
+		searchQuery,
+		searchType,
+		tokens
+	]);
+	const containerStyle = {
+		fontFamily: tokens.typography.fontFamily.mono,
+		fontSize: 13,
+		lineHeight: "22px",
+		background: tokens.colors.background.base,
+		border: bordered ? `1px solid ${tokens.colors.border.muted}` : "none",
+		borderRadius: tokens.borderRadius.lg,
+		overflowX: "hidden",
+		overflowY: hasConstrainedHeight ? "auto" : "visible",
+		display: "flex",
+		flexDirection: "column",
+		minHeight: 0,
+		height: hasConstrainedHeight ? height : void 0,
+		color: tokens.colors.text.primary,
+		...styleProp
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: `hex-viewer ${className}`,
+		style: containerStyle,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					position: "sticky",
+					top: 0,
+					zIndex: 10,
+					background: tokens.colors.background.surface,
+					flexShrink: 0
+				},
+				children: [
+					title && /* @__PURE__ */ jsxs("div", {
+						style: {
+							padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,
+							borderBottom: `1px solid ${tokens.colors.border.muted}`,
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "space-between"
+						},
+						children: [/* @__PURE__ */ jsx("span", {
+							style: {
+								fontWeight: tokens.typography.fontWeight.medium,
+								fontSize: tokens.typography.fontSize.base,
+								fontFamily: tokens.typography.fontFamily.primary
+							},
+							children: title
+						}), /* @__PURE__ */ jsxs("span", {
+							style: {
+								fontSize: tokens.typography.fontSize.sm,
+								color: tokens.colors.text.muted
+							},
+							children: [data.length.toLocaleString(), " bytes"]
+						})]
+					}),
+					showToolbar && /* @__PURE__ */ jsxs("div", {
+						role: "toolbar",
+						"aria-label": "Hex viewer controls",
+						style: {
+							padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,
+							borderBottom: `1px solid ${tokens.colors.border.muted}`,
+							display: "flex",
+							alignItems: "center",
+							gap: tokens.spacing.sm,
+							flexWrap: "wrap",
+							fontSize: tokens.typography.fontSize.sm
+						},
+						children: [
+							/* @__PURE__ */ jsxs("label", {
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: 4,
+									color: tokens.colors.text.muted
+								},
+								children: ["Bytes/Row:", /* @__PURE__ */ jsxs("select", {
+									"aria-label": "Bytes per row",
+									value: localBytesPerRow,
+									onChange: (e) => setLocalBytesPerRow(Number(e.target.value)),
+									style: {
+										background: tokens.colors.background.base,
+										color: tokens.colors.text.primary,
+										border: `1px solid ${tokens.colors.border.muted}`,
+										borderRadius: tokens.borderRadius.md,
+										padding: "2px 4px",
+										fontSize: 11
+									},
+									children: [
+										/* @__PURE__ */ jsx("option", {
+											value: 8,
+											children: "8"
+										}),
+										/* @__PURE__ */ jsx("option", {
+											value: 16,
+											children: "16"
+										}),
+										/* @__PURE__ */ jsx("option", {
+											value: 32,
+											children: "32"
+										})
+									]
+								})]
+							}),
+							/* @__PURE__ */ jsxs("label", {
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: 4,
+									color: tokens.colors.text.muted
+								},
+								children: ["Group:", /* @__PURE__ */ jsxs("select", {
+									"aria-label": "Byte grouping",
+									value: localGrouping,
+									onChange: (e) => setLocalGrouping(Number(e.target.value)),
+									style: {
+										background: tokens.colors.background.base,
+										color: tokens.colors.text.primary,
+										border: `1px solid ${tokens.colors.border.muted}`,
+										borderRadius: tokens.borderRadius.md,
+										padding: "2px 4px",
+										fontSize: 11
+									},
+									children: [
+										/* @__PURE__ */ jsx("option", {
+											value: 1,
+											children: "1"
+										}),
+										/* @__PURE__ */ jsx("option", {
+											value: 2,
+											children: "2"
+										}),
+										/* @__PURE__ */ jsx("option", {
+											value: 4,
+											children: "4"
+										}),
+										/* @__PURE__ */ jsx("option", {
+											value: 8,
+											children: "8"
+										})
+									]
+								})]
+							}),
+							/* @__PURE__ */ jsxs("label", {
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: 4,
+									color: tokens.colors.text.muted
+								},
+								children: ["Offset:", /* @__PURE__ */ jsxs("select", {
+									"aria-label": "Offset format",
+									value: localOffsetBase,
+									onChange: (e) => setLocalOffsetBase(e.target.value),
+									style: {
+										background: tokens.colors.background.base,
+										color: tokens.colors.text.primary,
+										border: `1px solid ${tokens.colors.border.muted}`,
+										borderRadius: tokens.borderRadius.md,
+										padding: "2px 4px",
+										fontSize: 11
+									},
+									children: [/* @__PURE__ */ jsx("option", {
+										value: "hex",
+										children: "Hex"
+									}), /* @__PURE__ */ jsx("option", {
+										value: "decimal",
+										children: "Dec"
+									})]
+								})]
+							}),
+							/* @__PURE__ */ jsxs("label", {
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: 4,
+									color: tokens.colors.text.muted
+								},
+								children: ["Endian:", /* @__PURE__ */ jsxs("select", {
+									"aria-label": "Endianness",
+									value: localEndianness,
+									onChange: (e) => setLocalEndianness(e.target.value),
+									style: {
+										background: tokens.colors.background.base,
+										color: tokens.colors.text.primary,
+										border: `1px solid ${tokens.colors.border.muted}`,
+										borderRadius: tokens.borderRadius.md,
+										padding: "2px 4px",
+										fontSize: 11
+									},
+									children: [/* @__PURE__ */ jsx("option", {
+										value: "big",
+										children: "Big"
+									}), /* @__PURE__ */ jsx("option", {
+										value: "little",
+										children: "Little"
+									})]
+								})]
+							}),
+							/* @__PURE__ */ jsxs("label", {
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: 4,
+									color: tokens.colors.text.muted,
+									cursor: "pointer"
+								},
+								children: [/* @__PURE__ */ jsx("input", {
+									type: "checkbox",
+									checked: localShowAscii,
+									onChange: (e) => setLocalShowAscii(e.target.checked),
+									style: { accentColor: tokens.colors.interactive.default }
+								}), "ASCII"]
+							}),
+							/* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
+							selectStart >= 0 && selectEnd >= 0 && /* @__PURE__ */ jsx("div", {
+								style: {
+									display: "flex",
+									gap: 4
+								},
+								children: [
+									"hex",
+									"decimal",
+									"ascii"
+								].map((fmt) => /* @__PURE__ */ jsxs("button", {
+									onClick: () => copySelection(fmt),
+									style: {
+										background: tokens.colors.background.base,
+										color: tokens.colors.text.secondary,
+										border: `1px solid ${tokens.colors.border.muted}`,
+										borderRadius: tokens.borderRadius.md,
+										padding: "2px 8px",
+										fontSize: 10,
+										cursor: "pointer"
+									},
+									children: ["Copy ", fmt]
+								}, fmt))
+							})
+						]
+					}),
+					showSearch && /* @__PURE__ */ jsxs("div", {
+						role: "search",
+						style: {
+							padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,
+							borderBottom: `1px solid ${tokens.colors.border.muted}`,
+							display: "flex",
+							alignItems: "center",
+							gap: tokens.spacing.sm
+						},
+						children: [
+							/* @__PURE__ */ jsx("label", {
+								htmlFor: "hex-search-type",
+								style: {
+									position: "absolute",
+									width: 1,
+									height: 1,
+									padding: 0,
+									margin: -1,
+									overflow: "hidden",
+									clip: "rect(0, 0, 0, 0)",
+									border: 0
+								},
+								children: "Search type"
+							}),
+							/* @__PURE__ */ jsxs("select", {
+								id: "hex-search-type",
+								value: searchType,
+								onChange: (e) => setSearchType(e.target.value),
+								style: {
+									background: tokens.colors.background.base,
+									color: tokens.colors.text.primary,
+									border: `1px solid ${tokens.colors.border.muted}`,
+									borderRadius: tokens.borderRadius.md,
+									padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
+									fontSize: tokens.typography.fontSize.sm
+								},
+								children: [/* @__PURE__ */ jsx("option", {
+									value: "hex",
+									children: "Hex"
+								}), /* @__PURE__ */ jsx("option", {
+									value: "ascii",
+									children: "ASCII"
+								})]
+							}),
+							/* @__PURE__ */ jsx("input", {
+								type: "text",
+								value: searchQuery,
+								onChange: (e) => setSearchQuery(e.target.value),
+								onKeyDown: (e) => {
+									if (e.key === "Enter") doSearch();
+								},
+								placeholder: searchType === "hex" ? "e.g. 48 65 6C 6C 6F" : "Search ASCII...",
+								"aria-label": "Search hex data",
+								style: {
+									flex: 1,
+									background: tokens.colors.background.base,
+									color: tokens.colors.text.primary,
+									border: `1px solid ${tokens.colors.border.muted}`,
+									borderRadius: tokens.borderRadius.md,
+									padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
+									fontSize: tokens.typography.fontSize.sm,
+									outline: "none",
+									fontFamily: "inherit"
+								}
+							}),
+							/* @__PURE__ */ jsx("button", {
+								onClick: doSearch,
+								"aria-label": "Find matches",
+								style: {
+									background: tokens.colors.interactive.default,
+									color: tokens.colors.text.inverse,
+									border: "none",
+									borderRadius: tokens.borderRadius.md,
+									padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
+									fontSize: tokens.typography.fontSize.sm,
+									cursor: "pointer",
+									fontWeight: tokens.typography.fontWeight.medium
+								},
+								children: "Find"
+							}),
+							searchResults.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+								/* @__PURE__ */ jsxs("span", {
+									style: {
+										fontSize: tokens.typography.fontSize.sm,
+										color: tokens.colors.text.muted
+									},
+									"aria-live": "polite",
+									children: [
+										currentSearchIdx + 1,
+										"/",
+										searchResults.length
+									]
+								}),
+								/* @__PURE__ */ jsx("button", {
+									onClick: prevSearchResult,
+									"aria-label": "Previous match",
+									style: {
+										background: "none",
+										border: "none",
+										color: tokens.colors.text.secondary,
+										cursor: "pointer",
+										fontSize: tokens.typography.fontSize.base,
+										padding: tokens.spacing.xs
+									},
+									children: "▲"
+								}),
+								/* @__PURE__ */ jsx("button", {
+									onClick: nextSearchResult,
+									"aria-label": "Next match",
+									style: {
+										background: "none",
+										border: "none",
+										color: tokens.colors.text.secondary,
+										cursor: "pointer",
+										fontSize: tokens.typography.fontSize.base,
+										padding: tokens.spacing.xs
+									},
+									children: "▼"
+								})
+							] })
+						]
+					})
+				]
+			}),
+			shouldShowHeaderSummary && packetHeaders && packetHeaders.length > 0 && /* @__PURE__ */ jsxs("div", {
+				style: { flexShrink: 0 },
+				children: [/* @__PURE__ */ jsxs("div", {
+					role: "button",
+					tabIndex: 0,
+					"aria-expanded": showHeaders,
+					"aria-label": "Toggle packet headers",
+					onClick: () => setShowHeaders(!showHeaders),
+					onKeyDown: (e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							setShowHeaders(!showHeaders);
+						}
+					},
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: tokens.spacing.sm,
+						padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,
+						background: tokens.colors.background.surface,
+						cursor: "pointer",
+						borderBottom: `1px solid ${tokens.colors.border.muted}`,
+						userSelect: "none"
+					},
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						style: {
+							fontSize: tokens.typography.fontSize.micro,
+							color: tokens.colors.text.muted,
+							transition: "transform 150ms ease",
+							transform: showHeaders ? "rotate(0deg)" : "rotate(-90deg)"
+						},
+						children: "▼"
+					}), /* @__PURE__ */ jsx("span", {
+						style: {
+							fontSize: tokens.typography.fontSize.sm,
+							color: tokens.colors.text.secondary,
+							fontWeight: tokens.typography.fontWeight.medium
+						},
+						children: "Packet Headers"
+					})]
+				}), showHeaders && /* @__PURE__ */ jsx("div", {
+					style: {
+						padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,
+						borderBottom: `1px solid ${tokens.colors.border.muted}`,
+						background: tokens.colors.background.base
+					},
+					children: /* @__PURE__ */ jsx("div", {
+						style: {
+							display: "grid",
+							gridTemplateColumns: "auto 1fr",
+							gap: `${tokens.spacing.xxs} ${tokens.spacing.md}`,
+							fontSize: tokens.typography.fontSize.sm,
+							lineHeight: tokens.typography.lineHeight.tight
+						},
+						children: packetHeaders.map((entry, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx("span", {
+							style: { color: tokens.colors.text.muted },
+							children: entry.label
+						}), /* @__PURE__ */ jsx("span", {
+							style: {
+								color: tokens.colors.text.primary,
+								fontWeight: tokens.typography.fontWeight.medium,
+								fontFamily: entry.mono ? tokens.typography.fontFamily.mono : "inherit"
+							},
+							children: entry.value
+						})] }, i))
+					})
+				})]
+			}),
+			shouldShowFieldsTable && decodedFields && decodedFields.length > 0 && /* @__PURE__ */ jsxs("div", {
+				style: { flexShrink: 0 },
+				children: [/* @__PURE__ */ jsxs("div", {
+					role: "button",
+					tabIndex: 0,
+					"aria-expanded": showFields,
+					"aria-label": "Toggle decoded fields",
+					onClick: () => setShowFields(!showFields),
+					onKeyDown: (e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							setShowFields(!showFields);
+						}
+					},
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: tokens.spacing.sm,
+						padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,
+						background: tokens.colors.background.surface,
+						cursor: "pointer",
+						borderBottom: `1px solid ${tokens.colors.border.muted}`,
+						userSelect: "none"
+					},
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						style: {
+							fontSize: tokens.typography.fontSize.micro,
+							color: tokens.colors.text.muted,
+							transition: "transform 150ms ease",
+							transform: showFields ? "rotate(0deg)" : "rotate(-90deg)"
+						},
+						children: "▼"
+					}), /* @__PURE__ */ jsxs("span", {
+						style: {
+							fontSize: tokens.typography.fontSize.sm,
+							color: tokens.colors.text.secondary,
+							fontWeight: tokens.typography.fontWeight.medium
+						},
+						children: [
+							"Decoded Fields (",
+							decodedFields.length,
+							")"
+						]
+					})]
+				}), showFields && /* @__PURE__ */ jsxs("div", {
+					role: "table",
+					"aria-label": "Decoded packet fields",
+					style: {
+						borderBottom: `1px solid ${tokens.colors.border.muted}`,
+						maxHeight: decodedFieldsMaxHeight,
+						overflowY: "auto"
+					},
+					children: [/* @__PURE__ */ jsxs("div", {
+						role: "row",
+						style: {
+							display: "flex",
+							alignItems: "center",
+							padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
+							borderBottom: `1px solid ${tokens.colors.border.muted}`,
+							gap: tokens.spacing.sm,
+							position: "sticky",
+							top: 0,
+							background: tokens.colors.background.surface,
+							zIndex: 1
+						},
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								role: "columnheader",
+								style: {
+									flex: 2,
+									fontSize: tokens.typography.fontSize.xxs,
+									color: tokens.colors.text.muted,
+									textTransform: "uppercase",
+									letterSpacing: "0.5px"
+								},
+								children: "Field"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								role: "columnheader",
+								style: {
+									flex: 2,
+									fontSize: tokens.typography.fontSize.xxs,
+									color: tokens.colors.text.muted,
+									textTransform: "uppercase",
+									letterSpacing: "0.5px",
+									textAlign: "right"
+								},
+								children: "Value"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								role: "columnheader",
+								style: {
+									flex: 1,
+									fontSize: tokens.typography.fontSize.xxs,
+									color: tokens.colors.text.muted,
+									textTransform: "uppercase",
+									letterSpacing: "0.5px",
+									textAlign: "right"
+								},
+								children: "Unit"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								role: "columnheader",
+								style: {
+									flex: 1,
+									fontSize: tokens.typography.fontSize.xxs,
+									color: tokens.colors.text.muted,
+									textTransform: "uppercase",
+									letterSpacing: "0.5px",
+									textAlign: "right"
+								},
+								children: "Offset"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								role: "columnheader",
+								style: {
+									flex: 1,
+									fontSize: tokens.typography.fontSize.xxs,
+									color: tokens.colors.text.muted,
+									textTransform: "uppercase",
+									letterSpacing: "0.5px",
+									textAlign: "right"
+								},
+								children: "Size"
+							})
+						]
+					}), decodedFields.map((field, fi) => {
+						const isHovered = hoveredFieldIdx === fi;
+						return /* @__PURE__ */ jsxs("div", {
+							onMouseEnter: () => handleFieldHover(fi),
+							onMouseLeave: handleFieldLeave,
+							title: field.description,
+							style: {
+								display: "flex",
+								alignItems: "center",
+								padding: `3px ${tokens.spacing.smd}`,
+								gap: tokens.spacing.sm,
+								background: isHovered ? `${tokens.colors.status.caution}14` : fi % 2 === 0 ? tokens.colors.background.base : "transparent",
+								transition: "background 0.15s ease",
+								cursor: "default",
+								minHeight: tokens.elementSize.sm
+							},
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									role: "cell",
+									style: {
+										flex: 2,
+										fontSize: tokens.typography.fontSize.sm,
+										color: tokens.colors.text.secondary,
+										overflow: "hidden",
+										textOverflow: "ellipsis",
+										whiteSpace: "nowrap"
+									},
+									children: field.name
+								}),
+								/* @__PURE__ */ jsx("span", {
+									role: "cell",
+									style: {
+										flex: 2,
+										fontSize: tokens.typography.fontSize.sm,
+										color: tokens.colors.text.primary,
+										fontWeight: tokens.typography.fontWeight.medium,
+										fontFamily: tokens.typography.fontFamily.mono,
+										textAlign: "right"
+									},
+									children: field.value === null || field.value === void 0 ? "—" : String(field.value)
+								}),
+								/* @__PURE__ */ jsx("span", {
+									role: "cell",
+									style: {
+										flex: 1,
+										fontSize: tokens.typography.fontSize.xxs,
+										color: tokens.colors.text.muted,
+										textAlign: "right"
+									},
+									children: field.unit || ""
+								}),
+								/* @__PURE__ */ jsx("span", {
+									role: "cell",
+									style: {
+										flex: 1,
+										fontSize: tokens.typography.fontSize.xxs,
+										color: tokens.colors.text.muted,
+										textAlign: "right",
+										fontFamily: tokens.typography.fontFamily.mono
+									},
+									children: field.byteOffset !== void 0 ? field.byteOffset : ""
+								}),
+								/* @__PURE__ */ jsx("span", {
+									role: "cell",
+									style: {
+										flex: 1,
+										fontSize: tokens.typography.fontSize.xxs,
+										color: tokens.colors.text.muted,
+										textAlign: "right",
+										fontFamily: tokens.typography.fontFamily.mono
+									},
+									children: field.sizeBits ? `${field.sizeBits}b` : ""
+								})
+							]
+						}, fi);
+					})]
+				})]
+			}),
+			regions.length > 0 && /* @__PURE__ */ jsx("div", {
+				role: "group",
+				"aria-label": "Packet structure regions",
+				style: {
+					padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
+					borderBottom: `1px solid ${tokens.colors.border.muted}`,
+					display: "flex",
+					alignItems: "center",
+					gap: tokens.spacing.smd,
+					flexWrap: "wrap",
+					fontSize: tokens.typography.fontSize.xxs,
+					background: tokens.colors.background.surface
+				},
+				children: regions.map((r, i) => /* @__PURE__ */ jsxs("span", {
+					style: {
+						display: "inline-flex",
+						alignItems: "center",
+						gap: tokens.spacing.xs
+					},
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						style: {
+							display: "inline-block",
+							width: 10,
+							height: 10,
+							borderRadius: tokens.borderRadius.sm,
+							background: r.color,
+							border: `1px solid ${r.borderColor || "transparent"}`
+						}
+					}), /* @__PURE__ */ jsxs("span", {
+						style: { color: tokens.colors.text.muted },
+						children: [
+							r.label,
+							" (",
+							r.end - r.start,
+							"B)"
+						]
+					})]
+				}, i))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				role: "row",
+				"aria-label": "Column headers",
+				style: {
+					padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
+					borderBottom: `1px solid ${tokens.colors.border.muted}`,
+					display: "flex",
+					alignItems: "center",
+					fontSize: tokens.typography.fontSize.xxs,
+					color: tokens.colors.text.muted,
+					textTransform: "uppercase",
+					letterSpacing: "0.5px",
+					fontWeight: tokens.typography.fontWeight.medium,
+					background: tokens.colors.background.surface
+				},
+				children: [
+					showOffset && /* @__PURE__ */ jsx("span", {
+						style: {
+							marginRight: tokens.spacing.smd,
+							minWidth: 60,
+							textAlign: "right"
+						},
+						children: "Offset"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						style: { flex: 1 },
+						children: "Hex"
+					}),
+					localShowAscii && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						style: {
+							color: `${tokens.colors.border.muted}`,
+							marginRight: tokens.spacing.sm
+						},
+						children: "|"
+					}), /* @__PURE__ */ jsx("span", { children: "ASCII" })] })
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: scrollRef,
+				role: "grid",
+				"aria-label": "Hex data",
+				tabIndex: 0,
+				onScroll: handleHexScroll,
+				style: {
+					flex: "1 1 160px",
+					minHeight: 160,
+					overflow: "auto",
+					padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`
+				},
+				children: /* @__PURE__ */ jsx("div", {
+					style: {
+						height: totalRows * HEX_ROW_HEIGHT,
+						position: "relative"
+					},
+					children: /* @__PURE__ */ jsx("div", {
+						style: {
+							position: "absolute",
+							top: startRow * HEX_ROW_HEIGHT,
+							left: 0,
+							right: 0
+						},
+						children: virtualRows.map((row) => /* @__PURE__ */ jsx(HexRow, {
+							offset: row.offset,
+							bytes: row.bytes,
+							bytesPerRow: localBytesPerRow,
+							byteGrouping: localGrouping,
+							offsetBase: localOffsetBase,
+							totalBytes: data.length,
+							showAscii: localShowAscii,
+							showOffset,
+							highlights: allHighlights,
+							regions: sortedRegions,
+							effectiveHighlight,
+							selectedStart: selectStart,
+							selectedEnd: selectEnd,
+							cursorOffset,
+							onByteMouseDown: handleByteMouseDown,
+							onByteMouseEnter: handleByteMouseEnter,
+							onByteClick: handleByteClickCb,
+							handleByteHoverInternal,
+							handleByteLeaveInternal,
+							tokens
+						}, row.offset))
+					})
+				})
+			}),
+			highlights.length > 0 && /* @__PURE__ */ jsx("div", {
+				role: "group",
+				"aria-label": "Search highlights",
+				style: {
+					padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
+					borderTop: `1px solid ${tokens.colors.border.muted}`,
+					display: "flex",
+					alignItems: "center",
+					gap: tokens.spacing.smd,
+					flexWrap: "wrap",
+					fontSize: tokens.typography.fontSize.xxs,
+					background: tokens.colors.background.surface
+				},
+				children: highlights.filter((h) => h.label).map((h, i) => /* @__PURE__ */ jsxs("span", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: tokens.spacing.xs
+					},
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						style: {
+							width: 10,
+							height: 10,
+							borderRadius: tokens.borderRadius.sm,
+							background: h.color,
+							display: "inline-block"
+						}
+					}), /* @__PURE__ */ jsxs("span", {
+						style: { color: tokens.colors.text.muted },
+						children: [
+							h.label,
+							" (0x",
+							h.start.toString(16),
+							"-0x",
+							h.end.toString(16),
+							")"
+						]
+					})]
+				}, i))
+			}),
+			showStatusBar && /* @__PURE__ */ jsxs("div", {
+				role: "status",
+				"aria-live": "polite",
+				style: {
+					padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,
+					borderTop: `1px solid ${tokens.colors.border.muted}`,
+					display: "flex",
+					alignItems: "center",
+					gap: tokens.spacing.md,
+					fontSize: tokens.typography.fontSize.sm,
+					background: tokens.colors.background.surface,
+					color: tokens.colors.text.muted,
+					flexWrap: "wrap"
+				},
+				children: [
+					/* @__PURE__ */ jsxs("span", { children: [
+						"Size: ",
+						data.length.toLocaleString(),
+						" bytes"
+					] }),
+					cursorOffset >= 0 && cursorOffset < data.length && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", { children: [
+						"Offset: 0x",
+						cursorOffset.toString(16).toUpperCase(),
+						" (",
+						cursorOffset,
+						")"
+					] }), /* @__PURE__ */ jsxs("span", { children: [
+						"Value: 0x",
+						byteToHex(data[cursorOffset]),
+						" (",
+						data[cursorOffset],
+						")"
+					] })] }),
+					selectStart >= 0 && selectEnd >= 0 && selectStart !== selectEnd && /* @__PURE__ */ jsxs("span", { children: [
+						"Selection: ",
+						Math.abs(selectEnd - selectStart) + 1,
+						" bytes (0x",
+						Math.min(selectStart, selectEnd).toString(16).toUpperCase(),
+						"-0x",
+						Math.max(selectStart, selectEnd).toString(16).toUpperCase(),
+						")"
+					] }),
+					interpretation && /* @__PURE__ */ jsxs("span", {
+						style: {
+							display: "flex",
+							gap: tokens.spacing.sm,
+							color: tokens.colors.text.secondary
+						},
+						children: [
+							/* @__PURE__ */ jsxs("span", { children: ["U8: ", interpretation.u8] }),
+							/* @__PURE__ */ jsxs("span", { children: ["I8: ", interpretation.i8] }),
+							interpretation.u16 !== void 0 && /* @__PURE__ */ jsxs("span", { children: ["U16: ", interpretation.u16] }),
+							interpretation.u32 !== void 0 && /* @__PURE__ */ jsxs("span", { children: ["U32: ", interpretation.u32] }),
+							interpretation.f32 !== void 0 && /* @__PURE__ */ jsxs("span", { children: ["F32: ", interpretation.f32.toFixed(6)] })
+						]
+					})
+				]
+			})
+		]
+	});
 }
-export {
-  HexViewer,
-  REGION_BORDER_COLORS,
-  REGION_COLORS
-};
-//# sourceMappingURL=HexViewer.js.map
+//#endregion
+export { HexViewer, HexViewer as default, REGION_BORDER_COLORS, REGION_COLORS };
+
+//# sourceMappingURL=HexViewer.js.map