@zendir/ui 0.5.0 → 0.6.0

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

@@ -1,431 +1,560 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import React, { memo, useState, useMemo, useCallback } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
+import React, { memo, useCallback, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/widgets/PacketViewer.tsx
+/**
+* @zendir/ui - PacketViewer Component
+*
+* Live telemetry packet viewer for spacecraft data analysis and monitoring.
+* Displays telemetry items with limits coloring, raw/converted/formatted views,
+* item details, and search filtering.
+*
+* Features:
+* - Table of telemetry items with name, value, limits status
+* - Limits coloring (blue, green, yellow, red) on values
+* - View modes: raw, converted, formatted, with-units
+* - Item search/filter
+* - Item details on click (type, conversion, limits, description)
+* - Stale data detection
+* - Configurable refresh rate display
+* - Compact mode for high-density displays
+*
+* @example
+* ```tsx
+* <PacketViewer
+*   target="INST"
+*   packet="HEALTH_STATUS"
+*   items={[
+*     { name: 'TEMP1', value: 72.5, limits: { state: 'GREEN', redLow: 0, yellowLow: 20, greenLow: 40, greenHigh: 80, yellowHigh: 90, redHigh: 100 } },
+*     { name: 'VOLTAGE', value: 28.1, units: 'V' },
+*   ]}
+* />
+* ```
+*/
 function getLimitsColor(state, tokens) {
-  switch (state) {
-    case "RED":
-    case "RED_LOW":
-    case "RED_HIGH":
-      return tokens.colors.status.critical;
-    case "YELLOW":
-    case "YELLOW_LOW":
-    case "YELLOW_HIGH":
-      return tokens.colors.status.caution;
-    case "GREEN":
-      return tokens.colors.status.normal;
-    case "BLUE":
-      return tokens.colors.status.standby;
-    case "STALE":
-      return tokens.colors.status.off;
-    default:
-      return tokens.colors.text.primary;
-  }
+	switch (state) {
+		case "RED":
+		case "RED_LOW":
+		case "RED_HIGH": return tokens.colors.status.critical;
+		case "YELLOW":
+		case "YELLOW_LOW":
+		case "YELLOW_HIGH": return tokens.colors.status.caution;
+		case "GREEN": return tokens.colors.status.normal;
+		case "BLUE": return tokens.colors.status.standby;
+		case "STALE": return tokens.colors.status.off;
+		default: return tokens.colors.text.primary;
+	}
 }
 function getLimitsBg(state, tokens) {
-  const color = getLimitsColor(state, tokens);
-  return state ? `${color}18` : "transparent";
+	const color = getLimitsColor(state, tokens);
+	return state ? `${color}18` : "transparent";
 }
+/**
+* Return Astro UX-compliant status shape style for a limits state.
+* Maps packet limits levels to the canonical Astro status shapes:
+*   BLUE/STALE → off (small circle), GREEN → normal (filled circle),
+*   YELLOW → caution (square), RED → critical (triangle down via clip-path)
+*/
 function getLimitsShapeStyle(state, color) {
-  const base = {
-    width: 8,
-    height: 8,
-    display: "inline-block",
-    background: color,
-    boxShadow: `0 0 4px ${color}66`
-  };
-  switch (state) {
-    case "GREEN":
-      return { ...base, borderRadius: "50%" };
-    case "YELLOW":
-    case "YELLOW_LOW":
-    case "YELLOW_HIGH":
-      return { ...base, borderRadius: "1px" };
-    case "RED":
-    case "RED_LOW":
-    case "RED_HIGH":
-      return {
-        ...base,
-        borderRadius: 0,
-        // critical → triangle down
-        clipPath: "polygon(50% 100%, 0% 0%, 100% 0%)"
-      };
-    case "BLUE":
-      return {
-        ...base,
-        borderRadius: "50%",
-        width: 6,
-        height: 6,
-        // standby → hollow ring
-        background: "transparent",
-        border: `2px solid ${color}`,
-        boxShadow: "none"
-      };
-    case "STALE":
-      return {
-        ...base,
-        borderRadius: "50%",
-        width: 5,
-        height: 5,
-        // off → small dot
-        opacity: 0.6
-      };
-    default:
-      return { ...base, borderRadius: "50%" };
-  }
+	const base = {
+		width: 8,
+		height: 8,
+		display: "inline-block",
+		background: color,
+		boxShadow: `0 0 4px ${color}66`
+	};
+	switch (state) {
+		case "GREEN": return {
+			...base,
+			borderRadius: "50%"
+		};
+		case "YELLOW":
+		case "YELLOW_LOW":
+		case "YELLOW_HIGH": return {
+			...base,
+			borderRadius: "1px"
+		};
+		case "RED":
+		case "RED_LOW":
+		case "RED_HIGH": return {
+			...base,
+			borderRadius: 0,
+			clipPath: "polygon(50% 100%, 0% 0%, 100% 0%)"
+		};
+		case "BLUE": return {
+			...base,
+			borderRadius: "50%",
+			width: 6,
+			height: 6,
+			background: "transparent",
+			border: `2px solid ${color}`,
+			boxShadow: "none"
+		};
+		case "STALE": return {
+			...base,
+			borderRadius: "50%",
+			width: 5,
+			height: 5,
+			opacity: .6
+		};
+		default: return {
+			...base,
+			borderRadius: "50%"
+		};
+	}
 }
 function getDisplayValue(item, mode) {
-  switch (mode) {
-    case "raw":
-      return String(item.value);
-    case "converted":
-      return String(item.convertedValue ?? item.value);
-    case "formatted":
-      return item.formattedValue ?? String(item.convertedValue ?? item.value);
-    case "with_units": {
-      const val = item.formattedValue ?? String(item.convertedValue ?? item.value);
-      return item.units ? `${val} ${item.units}` : val;
-    }
-  }
+	switch (mode) {
+		case "raw": return String(item.value);
+		case "converted": return String(item.convertedValue ?? item.value);
+		case "formatted": return item.formattedValue ?? String(item.convertedValue ?? item.value);
+		case "with_units": {
+			const val = item.formattedValue ?? String(item.convertedValue ?? item.value);
+			return item.units ? `${val} ${item.units}` : val;
+		}
+	}
 }
-const PacketViewer = memo(function PacketViewer2({
-  target,
-  packet,
-  items,
-  viewMode: initialViewMode = "converted",
-  height = 500,
-  derivedLast = true,
-  showSearch = true,
-  showViewMode = true,
-  compact = false,
-  onItemClick,
-  className = "",
-  bordered = true,
-  style: styleProp
-}) {
-  const { tokens, theme } = useTheme();
-  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  const [searchQuery, setSearchQuery] = useState("");
-  const [viewMode, setViewMode] = useState(initialViewMode);
-  const [selectedItem, setSelectedItem] = useState(null);
-  const [showDetails, setShowDetails] = useState(false);
-  const [scrollTop, setScrollTop] = useState(0);
-  const [viewportHeight, setViewportHeight] = useState(240);
-  const listRef = React.useRef(null);
-  const sortedItems = useMemo(() => {
-    let filtered = items;
-    if (searchQuery.trim()) {
-      const q = searchQuery.toLowerCase();
-      filtered = items.filter((i) => i.name.toLowerCase().includes(q) || i.description && i.description.toLowerCase().includes(q));
-    }
-    if (derivedLast) {
-      const regular = filtered.filter((i) => !i.derived);
-      const derived = filtered.filter((i) => i.derived);
-      return [...regular, ...derived];
-    }
-    return filtered;
-  }, [items, searchQuery, derivedLast]);
-  const handleItemClick = useCallback((item) => {
-    setSelectedItem(item);
-    setShowDetails(true);
-    onItemClick == null ? void 0 : onItemClick(item);
-  }, [onItemClick]);
-  const rowHeight = compact ? 26 : 32;
-  const overscanRows = 12;
-  const totalRows = sortedItems.length;
-  const startRow = Math.max(0, Math.floor(scrollTop / rowHeight) - overscanRows);
-  const visibleRows = Math.ceil(viewportHeight / rowHeight) + overscanRows * 2;
-  const endRow = Math.min(totalRows, startRow + visibleRows);
-  const visibleItems = useMemo(
-    () => sortedItems.slice(startRow, endRow),
-    [sortedItems, startRow, endRow]
-  );
-  React.useEffect(() => {
-    const el = listRef.current;
-    if (!el) return void 0;
-    const updateHeight = () => setViewportHeight(Math.max(rowHeight * 4, el.clientHeight || 240));
-    updateHeight();
-    if (typeof ResizeObserver !== "undefined") {
-      const observer = new ResizeObserver(updateHeight);
-      observer.observe(el);
-      return () => observer.disconnect();
-    }
-    window.addEventListener("resize", updateHeight);
-    return () => window.removeEventListener("resize", updateHeight);
-  }, [rowHeight]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `packet-viewer ${className}`,
-      style: {
-        height: typeof height === "number" ? height : void 0,
-        background: tokens.colors.background.base,
-        ...bordered ? tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` } : { border: "none" },
-        borderRadius: tokens.borderRadius.lg,
-        overflow: "hidden",
-        display: "flex",
-        flexDirection: "column",
-        fontFamily: tokens.typography.fontFamily.primary,
-        color: tokens.colors.text.primary,
-        backdropFilter: isTransparentTheme ? "blur(10px)" : void 0,
-        WebkitBackdropFilter: isTransparentTheme ? "blur(10px)" : void 0,
-        ...styleProp
-      },
-      children: [
-        /* @__PURE__ */ jsxs("div", { style: {
-          padding: "8px 12px",
-          borderBottom: `1px solid ${tokens.colors.border.muted}`,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          background: tokens.colors.background.surface,
-          backdropFilter: "blur(8px)",
-          flexWrap: "wrap",
-          gap: 8
-        }, children: [
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-            target && /* @__PURE__ */ jsx("span", { style: {
-              background: `${tokens.colors.interactive.default}22`,
-              color: tokens.colors.interactive.default,
-              padding: "2px 8px",
-              borderRadius: tokens.borderRadius.md,
-              fontSize: tokens.typography.fontSize.xxs,
-              fontWeight: 600
-            }, children: target }),
-            packet && /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: tokens.typography.fontSize.sm }, children: packet }),
-            /* @__PURE__ */ jsxs("span", { style: { fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.text.muted }, children: [
-              sortedItems.length,
-              " items"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-            showViewMode && /* @__PURE__ */ jsxs(
-              "select",
-              {
-                value: viewMode,
-                onChange: (e) => setViewMode(e.target.value),
-                "aria-label": "Packet view mode",
-                style: {
-                  background: tokens.colors.background.base,
-                  color: tokens.colors.text.primary,
-                  border: `1px solid ${tokens.colors.border.muted}`,
-                  borderRadius: tokens.borderRadius.md,
-                  padding: "3px 8px",
-                  fontSize: tokens.typography.fontSize.xxs
-                },
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "raw", children: "Raw" }),
-                  /* @__PURE__ */ jsx("option", { value: "converted", children: "Converted" }),
-                  /* @__PURE__ */ jsx("option", { value: "formatted", children: "Formatted" }),
-                  /* @__PURE__ */ jsx("option", { value: "with_units", children: "With Units" })
-                ]
-              }
-            ),
-            showSearch && /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "text",
-                value: searchQuery,
-                onChange: (e) => setSearchQuery(e.target.value),
-                placeholder: "Filter items...",
-                "aria-label": "Filter packet items",
-                style: {
-                  background: tokens.colors.background.base,
-                  color: tokens.colors.text.primary,
-                  border: `1px solid ${tokens.colors.border.muted}`,
-                  borderRadius: tokens.borderRadius.md,
-                  padding: "3px 8px",
-                  fontSize: tokens.typography.fontSize.xxs,
-                  outline: "none",
-                  minWidth: 120
-                }
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { role: "row", style: {
-          display: "grid",
-          gridTemplateColumns: "1fr 1fr auto",
-          padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
-          borderBottom: `1px solid ${tokens.colors.border.muted}`,
-          background: tokens.colors.background.surface,
-          fontSize: tokens.typography.fontSize.xxs,
-          color: tokens.colors.text.muted,
-          textTransform: "uppercase",
-          letterSpacing: "0.5px",
-          fontWeight: tokens.typography.fontWeight.medium
-        }, children: [
-          /* @__PURE__ */ jsx("span", { role: "columnheader", children: "Item" }),
-          /* @__PURE__ */ jsx("span", { role: "columnheader", style: { textAlign: "right" }, children: "Value" }),
-          /* @__PURE__ */ jsx("span", { role: "columnheader", style: { minWidth: 50, textAlign: "center" }, children: "Limits" })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: listRef,
-            role: "rowgroup",
-            onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
-            style: { flex: 1, overflow: "auto" },
-            children: /* @__PURE__ */ jsx("div", { style: { height: totalRows * rowHeight, position: "relative" }, children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: startRow * rowHeight, left: 0, right: 0 }, children: visibleItems.map((item, visibleIdx) => {
-              var _a, _b, _c, _d;
-              const idx = startRow + visibleIdx;
-              const limitsColor = item.stale ? tokens.colors.status.off : getLimitsColor(((_a = item.limits) == null ? void 0 : _a.state) ?? null, tokens);
-              const limitsBg = item.stale ? `${tokens.colors.status.off}14` : getLimitsBg(((_b = item.limits) == null ? void 0 : _b.state) ?? null, tokens);
-              return /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  role: "row",
-                  tabIndex: 0,
-                  onClick: () => handleItemClick(item),
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      handleItemClick(item);
-                    }
-                  },
-                  "aria-label": `${item.name}: ${getDisplayValue(item, viewMode)}${((_c = item.limits) == null ? void 0 : _c.state) ? `, ${item.limits.state}` : ""}`,
-                  style: {
-                    display: "grid",
-                    gridTemplateColumns: "1fr 1fr auto",
-                    padding: `0 ${tokens.spacing.smd}`,
-                    height: rowHeight,
-                    alignItems: "center",
-                    borderBottom: `1px solid ${tokens.colors.border.muted}`,
-                    cursor: "pointer",
-                    transition: "background 150ms ease",
-                    background: item.derived ? `${tokens.colors.background.surface}44` : "transparent"
-                  },
-                  onMouseEnter: (e) => {
-                    e.currentTarget.style.background = tokens.colors.background.surface;
-                  },
-                  onMouseLeave: (e) => {
-                    e.currentTarget.style.background = item.derived ? `${tokens.colors.background.surface}44` : "transparent";
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx("span", { style: {
-                      fontSize: compact ? tokens.typography.fontSize.xxs : tokens.typography.fontSize.xs,
-                      fontWeight: 500,
-                      color: item.derived ? tokens.colors.text.muted : tokens.colors.text.primary,
-                      fontStyle: item.derived ? "italic" : "normal",
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                      whiteSpace: "nowrap"
-                    }, children: item.name }),
-                    /* @__PURE__ */ jsx("span", { style: {
-                      textAlign: "right",
-                      fontFamily: tokens.typography.fontFamily.mono,
-                      fontSize: compact ? tokens.typography.fontSize.xxs : tokens.typography.fontSize.xs,
-                      fontWeight: 600,
-                      color: limitsColor,
-                      background: limitsBg,
-                      padding: "2px 8px",
-                      borderRadius: tokens.borderRadius.sm,
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                      whiteSpace: "nowrap"
-                    }, children: getDisplayValue(item, viewMode) }),
-                    /* @__PURE__ */ jsx("div", { style: { minWidth: 50, display: "flex", justifyContent: "center" }, children: ((_d = item.limits) == null ? void 0 : _d.state) && /* @__PURE__ */ jsxs("div", { style: {
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 3
-                    }, children: [
-                      /* @__PURE__ */ jsx("span", { style: getLimitsShapeStyle(item.limits.state, limitsColor) }),
-                      /* @__PURE__ */ jsx("span", { style: { fontSize: tokens.typography.fontSize.micro, color: limitsColor, fontWeight: 600 }, children: item.limits.state.replace(/_/g, " ") })
-                    ] }) })
-                  ]
-                },
-                item.name + idx
-              );
-            }) }) })
-          }
-        ),
-        showDetails && selectedItem && /* @__PURE__ */ jsxs("div", { style: {
-          borderTop: `1px solid ${tokens.colors.border.muted}`,
-          background: tokens.colors.background.surface,
-          padding: 12,
-          maxHeight: 200,
-          overflow: "auto"
-        }, children: [
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: tokens.spacing.sm }, children: [
-            /* @__PURE__ */ jsx("span", { style: { fontWeight: tokens.typography.fontWeight.bold, fontSize: tokens.typography.fontSize.sm }, children: selectedItem.name }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => setShowDetails(false),
-                "aria-label": "Close details panel",
-                style: { background: "none", border: "none", color: tokens.colors.text.muted, cursor: "pointer", fontSize: tokens.typography.fontSize.lg, padding: tokens.spacing.xs, lineHeight: 1 },
-                children: "✕"
-              }
-            )
-          ] }),
-          selectedItem.description && /* @__PURE__ */ jsx("p", { style: { color: tokens.colors.text.secondary, fontSize: tokens.typography.fontSize.xs, marginBottom: 8 }, children: selectedItem.description }),
-          /* @__PURE__ */ jsxs("div", { style: {
-            display: "grid",
-            gridTemplateColumns: "auto 1fr",
-            gap: "4px 12px",
-            fontSize: tokens.typography.fontSize.xxs,
-            fontFamily: tokens.typography.fontFamily.mono
-          }, children: [
-            /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "Raw:" }),
-            /* @__PURE__ */ jsx("span", { children: String(selectedItem.value) }),
-            selectedItem.convertedValue !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "Converted:" }),
-              /* @__PURE__ */ jsx("span", { children: String(selectedItem.convertedValue) })
-            ] }),
-            selectedItem.units && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "Units:" }),
-              /* @__PURE__ */ jsx("span", { children: selectedItem.units })
-            ] }),
-            selectedItem.dataType && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "Type:" }),
-              /* @__PURE__ */ jsx("span", { children: selectedItem.dataType })
-            ] }),
-            selectedItem.bitSize !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "Bit Size:" }),
-              /* @__PURE__ */ jsx("span", { children: selectedItem.bitSize })
-            ] }),
-            selectedItem.bitOffset !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "Bit Offset:" }),
-              /* @__PURE__ */ jsx("span", { children: selectedItem.bitOffset })
-            ] }),
-            selectedItem.conversion && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "Conversion:" }),
-              /* @__PURE__ */ jsx("span", { children: selectedItem.conversion })
-            ] }),
-            selectedItem.limits && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "Limits State:" }),
-              /* @__PURE__ */ jsx("span", { style: { color: getLimitsColor(selectedItem.limits.state, tokens) }, children: selectedItem.limits.state }),
-              selectedItem.limits.redLow !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "Red Low:" }),
-                /* @__PURE__ */ jsx("span", { children: selectedItem.limits.redLow })
-              ] }),
-              selectedItem.limits.yellowLow !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "Yellow Low:" }),
-                /* @__PURE__ */ jsx("span", { children: selectedItem.limits.yellowLow })
-              ] }),
-              selectedItem.limits.greenHigh !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "Green High:" }),
-                /* @__PURE__ */ jsx("span", { children: selectedItem.limits.greenHigh })
-              ] }),
-              selectedItem.limits.yellowHigh !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "Yellow High:" }),
-                /* @__PURE__ */ jsx("span", { children: selectedItem.limits.yellowHigh })
-              ] }),
-              selectedItem.limits.redHigh !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "Red High:" }),
-                /* @__PURE__ */ jsx("span", { children: selectedItem.limits.redHigh })
-              ] })
-            ] }),
-            selectedItem.states && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "States:" }),
-              /* @__PURE__ */ jsx("span", { children: Object.entries(selectedItem.states).map(([k, v]) => `${k}=${v}`).join(", ") })
-            ] })
-          ] })
-        ] })
-      ]
-    }
-  );
+var PacketViewer = memo(function PacketViewer({ target, packet, items, viewMode: initialViewMode = "converted", height = 500, derivedLast = true, showSearch = true, showViewMode = true, compact = false, onItemClick, className = "", bordered = true, style: styleProp }) {
+	const { tokens, theme } = useTheme();
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	const [searchQuery, setSearchQuery] = useState("");
+	const [viewMode, setViewMode] = useState(initialViewMode);
+	const [selectedItem, setSelectedItem] = useState(null);
+	const [showDetails, setShowDetails] = useState(false);
+	const [scrollTop, setScrollTop] = useState(0);
+	const [viewportHeight, setViewportHeight] = useState(240);
+	const listRef = React.useRef(null);
+	const sortedItems = useMemo(() => {
+		let filtered = items;
+		if (searchQuery.trim()) {
+			const q = searchQuery.toLowerCase();
+			filtered = items.filter((i) => i.name.toLowerCase().includes(q) || i.description && i.description.toLowerCase().includes(q));
+		}
+		if (derivedLast) {
+			const regular = filtered.filter((i) => !i.derived);
+			const derived = filtered.filter((i) => i.derived);
+			return [...regular, ...derived];
+		}
+		return filtered;
+	}, [
+		items,
+		searchQuery,
+		derivedLast
+	]);
+	const handleItemClick = useCallback((item) => {
+		setSelectedItem(item);
+		setShowDetails(true);
+		onItemClick?.(item);
+	}, [onItemClick]);
+	const rowHeight = compact ? 26 : 32;
+	const overscanRows = 12;
+	const totalRows = sortedItems.length;
+	const startRow = Math.max(0, Math.floor(scrollTop / rowHeight) - overscanRows);
+	const visibleRows = Math.ceil(viewportHeight / rowHeight) + overscanRows * 2;
+	const endRow = Math.min(totalRows, startRow + visibleRows);
+	const visibleItems = useMemo(() => sortedItems.slice(startRow, endRow), [
+		sortedItems,
+		startRow,
+		endRow
+	]);
+	React.useEffect(() => {
+		const el = listRef.current;
+		if (!el) return void 0;
+		const updateHeight = () => setViewportHeight(Math.max(rowHeight * 4, el.clientHeight || 240));
+		updateHeight();
+		if (typeof ResizeObserver !== "undefined") {
+			const observer = new ResizeObserver(updateHeight);
+			observer.observe(el);
+			return () => observer.disconnect();
+		}
+		window.addEventListener("resize", updateHeight);
+		return () => window.removeEventListener("resize", updateHeight);
+	}, [rowHeight]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: `packet-viewer ${className}`,
+		style: {
+			height: typeof height === "number" ? height : void 0,
+			background: tokens.colors.background.base,
+			...bordered ? tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` } : { border: "none" },
+			borderRadius: tokens.borderRadius.lg,
+			overflow: "hidden",
+			display: "flex",
+			flexDirection: "column",
+			fontFamily: tokens.typography.fontFamily.primary,
+			color: tokens.colors.text.primary,
+			backdropFilter: isTransparentTheme ? "blur(10px)" : void 0,
+			WebkitBackdropFilter: isTransparentTheme ? "blur(10px)" : void 0,
+			...styleProp
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					padding: "8px 12px",
+					borderBottom: `1px solid ${tokens.colors.border.muted}`,
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between",
+					background: tokens.colors.background.surface,
+					backdropFilter: "blur(8px)",
+					flexWrap: "wrap",
+					gap: 8
+				},
+				children: [/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: 8
+					},
+					children: [
+						target && /* @__PURE__ */ jsx("span", {
+							style: {
+								background: `${tokens.colors.interactive.default}22`,
+								color: tokens.colors.interactive.default,
+								padding: "2px 8px",
+								borderRadius: tokens.borderRadius.md,
+								fontSize: tokens.typography.fontSize.xxs,
+								fontWeight: 600
+							},
+							children: target
+						}),
+						packet && /* @__PURE__ */ jsx("span", {
+							style: {
+								fontWeight: 600,
+								fontSize: tokens.typography.fontSize.sm
+							},
+							children: packet
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							style: {
+								fontSize: tokens.typography.fontSize.xxs,
+								color: tokens.colors.text.muted
+							},
+							children: [sortedItems.length, " items"]
+						})
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: 8
+					},
+					children: [showViewMode && /* @__PURE__ */ jsxs("select", {
+						value: viewMode,
+						onChange: (e) => setViewMode(e.target.value),
+						"aria-label": "Packet view mode",
+						style: {
+							background: tokens.colors.background.base,
+							color: tokens.colors.text.primary,
+							border: `1px solid ${tokens.colors.border.muted}`,
+							borderRadius: tokens.borderRadius.md,
+							padding: "3px 8px",
+							fontSize: tokens.typography.fontSize.xxs
+						},
+						children: [
+							/* @__PURE__ */ jsx("option", {
+								value: "raw",
+								children: "Raw"
+							}),
+							/* @__PURE__ */ jsx("option", {
+								value: "converted",
+								children: "Converted"
+							}),
+							/* @__PURE__ */ jsx("option", {
+								value: "formatted",
+								children: "Formatted"
+							}),
+							/* @__PURE__ */ jsx("option", {
+								value: "with_units",
+								children: "With Units"
+							})
+						]
+					}), showSearch && /* @__PURE__ */ jsx("input", {
+						type: "text",
+						value: searchQuery,
+						onChange: (e) => setSearchQuery(e.target.value),
+						placeholder: "Filter items...",
+						"aria-label": "Filter packet items",
+						style: {
+							background: tokens.colors.background.base,
+							color: tokens.colors.text.primary,
+							border: `1px solid ${tokens.colors.border.muted}`,
+							borderRadius: tokens.borderRadius.md,
+							padding: "3px 8px",
+							fontSize: tokens.typography.fontSize.xxs,
+							outline: "none",
+							minWidth: 120
+						}
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				role: "row",
+				style: {
+					display: "grid",
+					gridTemplateColumns: "1fr 1fr auto",
+					padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
+					borderBottom: `1px solid ${tokens.colors.border.muted}`,
+					background: tokens.colors.background.surface,
+					fontSize: tokens.typography.fontSize.xxs,
+					color: tokens.colors.text.muted,
+					textTransform: "uppercase",
+					letterSpacing: "0.5px",
+					fontWeight: tokens.typography.fontWeight.medium
+				},
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						role: "columnheader",
+						children: "Item"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						role: "columnheader",
+						style: { textAlign: "right" },
+						children: "Value"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						role: "columnheader",
+						style: {
+							minWidth: 50,
+							textAlign: "center"
+						},
+						children: "Limits"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: listRef,
+				role: "rowgroup",
+				onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
+				style: {
+					flex: 1,
+					overflow: "auto"
+				},
+				children: /* @__PURE__ */ jsx("div", {
+					style: {
+						height: totalRows * rowHeight,
+						position: "relative"
+					},
+					children: /* @__PURE__ */ jsx("div", {
+						style: {
+							position: "absolute",
+							top: startRow * rowHeight,
+							left: 0,
+							right: 0
+						},
+						children: visibleItems.map((item, visibleIdx) => {
+							const idx = startRow + visibleIdx;
+							const limitsColor = item.stale ? tokens.colors.status.off : getLimitsColor(item.limits?.state ?? null, tokens);
+							const limitsBg = item.stale ? `${tokens.colors.status.off}14` : getLimitsBg(item.limits?.state ?? null, tokens);
+							return /* @__PURE__ */ jsxs("div", {
+								role: "row",
+								tabIndex: 0,
+								onClick: () => handleItemClick(item),
+								onKeyDown: (e) => {
+									if (e.key === "Enter" || e.key === " ") {
+										e.preventDefault();
+										handleItemClick(item);
+									}
+								},
+								"aria-label": `${item.name}: ${getDisplayValue(item, viewMode)}${item.limits?.state ? `, ${item.limits.state}` : ""}`,
+								style: {
+									display: "grid",
+									gridTemplateColumns: "1fr 1fr auto",
+									padding: `0 ${tokens.spacing.smd}`,
+									height: rowHeight,
+									alignItems: "center",
+									borderBottom: `1px solid ${tokens.colors.border.muted}`,
+									cursor: "pointer",
+									transition: "background 150ms ease",
+									background: item.derived ? `${tokens.colors.background.surface}44` : "transparent"
+								},
+								onMouseEnter: (e) => {
+									e.currentTarget.style.background = tokens.colors.background.surface;
+								},
+								onMouseLeave: (e) => {
+									e.currentTarget.style.background = item.derived ? `${tokens.colors.background.surface}44` : "transparent";
+								},
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										style: {
+											fontSize: compact ? tokens.typography.fontSize.xxs : tokens.typography.fontSize.xs,
+											fontWeight: 500,
+											color: item.derived ? tokens.colors.text.muted : tokens.colors.text.primary,
+											fontStyle: item.derived ? "italic" : "normal",
+											overflow: "hidden",
+											textOverflow: "ellipsis",
+											whiteSpace: "nowrap"
+										},
+										children: item.name
+									}),
+									/* @__PURE__ */ jsx("span", {
+										style: {
+											textAlign: "right",
+											fontFamily: tokens.typography.fontFamily.mono,
+											fontSize: compact ? tokens.typography.fontSize.xxs : tokens.typography.fontSize.xs,
+											fontWeight: 600,
+											color: limitsColor,
+											background: limitsBg,
+											padding: "2px 8px",
+											borderRadius: tokens.borderRadius.sm,
+											overflow: "hidden",
+											textOverflow: "ellipsis",
+											whiteSpace: "nowrap"
+										},
+										children: getDisplayValue(item, viewMode)
+									}),
+									/* @__PURE__ */ jsx("div", {
+										style: {
+											minWidth: 50,
+											display: "flex",
+											justifyContent: "center"
+										},
+										children: item.limits?.state && /* @__PURE__ */ jsxs("div", {
+											style: {
+												display: "flex",
+												alignItems: "center",
+												gap: 3
+											},
+											children: [/* @__PURE__ */ jsx("span", { style: getLimitsShapeStyle(item.limits.state, limitsColor) }), /* @__PURE__ */ jsx("span", {
+												style: {
+													fontSize: tokens.typography.fontSize.micro,
+													color: limitsColor,
+													fontWeight: 600
+												},
+												children: item.limits.state.replace(/_/g, " ")
+											})]
+										})
+									})
+								]
+							}, item.name + idx);
+						})
+					})
+				})
+			}),
+			showDetails && selectedItem && /* @__PURE__ */ jsxs("div", {
+				style: {
+					borderTop: `1px solid ${tokens.colors.border.muted}`,
+					background: tokens.colors.background.surface,
+					padding: 12,
+					maxHeight: 200,
+					overflow: "auto"
+				},
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							justifyContent: "space-between",
+							alignItems: "center",
+							marginBottom: tokens.spacing.sm
+						},
+						children: [/* @__PURE__ */ jsx("span", {
+							style: {
+								fontWeight: tokens.typography.fontWeight.bold,
+								fontSize: tokens.typography.fontSize.sm
+							},
+							children: selectedItem.name
+						}), /* @__PURE__ */ jsx("button", {
+							onClick: () => setShowDetails(false),
+							"aria-label": "Close details panel",
+							style: {
+								background: "none",
+								border: "none",
+								color: tokens.colors.text.muted,
+								cursor: "pointer",
+								fontSize: tokens.typography.fontSize.lg,
+								padding: tokens.spacing.xs,
+								lineHeight: 1
+							},
+							children: "✕"
+						})]
+					}),
+					selectedItem.description && /* @__PURE__ */ jsx("p", {
+						style: {
+							color: tokens.colors.text.secondary,
+							fontSize: tokens.typography.fontSize.xs,
+							marginBottom: 8
+						},
+						children: selectedItem.description
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "grid",
+							gridTemplateColumns: "auto 1fr",
+							gap: "4px 12px",
+							fontSize: tokens.typography.fontSize.xxs,
+							fontFamily: tokens.typography.fontFamily.mono
+						},
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								style: { color: tokens.colors.text.muted },
+								children: "Raw:"
+							}),
+							/* @__PURE__ */ jsx("span", { children: String(selectedItem.value) }),
+							selectedItem.convertedValue !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+								style: { color: tokens.colors.text.muted },
+								children: "Converted:"
+							}), /* @__PURE__ */ jsx("span", { children: String(selectedItem.convertedValue) })] }),
+							selectedItem.units && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+								style: { color: tokens.colors.text.muted },
+								children: "Units:"
+							}), /* @__PURE__ */ jsx("span", { children: selectedItem.units })] }),
+							selectedItem.dataType && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+								style: { color: tokens.colors.text.muted },
+								children: "Type:"
+							}), /* @__PURE__ */ jsx("span", { children: selectedItem.dataType })] }),
+							selectedItem.bitSize !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+								style: { color: tokens.colors.text.muted },
+								children: "Bit Size:"
+							}), /* @__PURE__ */ jsx("span", { children: selectedItem.bitSize })] }),
+							selectedItem.bitOffset !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+								style: { color: tokens.colors.text.muted },
+								children: "Bit Offset:"
+							}), /* @__PURE__ */ jsx("span", { children: selectedItem.bitOffset })] }),
+							selectedItem.conversion && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+								style: { color: tokens.colors.text.muted },
+								children: "Conversion:"
+							}), /* @__PURE__ */ jsx("span", { children: selectedItem.conversion })] }),
+							selectedItem.limits && /* @__PURE__ */ jsxs(Fragment, { children: [
+								/* @__PURE__ */ jsx("span", {
+									style: { color: tokens.colors.text.muted },
+									children: "Limits State:"
+								}),
+								/* @__PURE__ */ jsx("span", {
+									style: { color: getLimitsColor(selectedItem.limits.state, tokens) },
+									children: selectedItem.limits.state
+								}),
+								selectedItem.limits.redLow !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+									style: { color: tokens.colors.text.muted },
+									children: "Red Low:"
+								}), /* @__PURE__ */ jsx("span", { children: selectedItem.limits.redLow })] }),
+								selectedItem.limits.yellowLow !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+									style: { color: tokens.colors.text.muted },
+									children: "Yellow Low:"
+								}), /* @__PURE__ */ jsx("span", { children: selectedItem.limits.yellowLow })] }),
+								selectedItem.limits.greenHigh !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+									style: { color: tokens.colors.text.muted },
+									children: "Green High:"
+								}), /* @__PURE__ */ jsx("span", { children: selectedItem.limits.greenHigh })] }),
+								selectedItem.limits.yellowHigh !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+									style: { color: tokens.colors.text.muted },
+									children: "Yellow High:"
+								}), /* @__PURE__ */ jsx("span", { children: selectedItem.limits.yellowHigh })] }),
+								selectedItem.limits.redHigh !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+									style: { color: tokens.colors.text.muted },
+									children: "Red High:"
+								}), /* @__PURE__ */ jsx("span", { children: selectedItem.limits.redHigh })] })
+							] }),
+							selectedItem.states && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+								style: { color: tokens.colors.text.muted },
+								children: "States:"
+							}), /* @__PURE__ */ jsx("span", { children: Object.entries(selectedItem.states).map(([k, v]) => `${k}=${v}`).join(", ") })] })
+						]
+					})
+				]
+			})
+		]
+	});
 });
-export {
-  PacketViewer
-};
-//# sourceMappingURL=PacketViewer.js.map
+//#endregion
+export { PacketViewer, PacketViewer as default };
+
+//# sourceMappingURL=PacketViewer.js.map