@zendir/ui 0.1.0

package/dist/react/core/HexViewer.js

@@ -0,0 +1,1106 @@
+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)"
+};
+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)"
+};
+function toUint8Array(data) {
+  return data instanceof Uint8Array ? data : new Uint8Array(data);
+}
+function byteToHex(byte) {
+  return byte.toString(16).padStart(2, "0").toUpperCase();
+}
+function byteToAscii(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, " ");
+}
+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 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 })
+    ] })
+  ] });
+});
+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)
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  HexViewer,
+  REGION_BORDER_COLORS,
+  REGION_COLORS
+};
+//# sourceMappingURL=HexViewer.js.map