@zendir/ui 0.5.0 → 0.6.1

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

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