@zendir/ui 0.4.1 → 0.6.0

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":["/**\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 =\n  | \"BLUE\"\n  | \"GREEN\"\n  | \"YELLOW\"\n  | \"YELLOW_LOW\"\n  | \"YELLOW_HIGH\"\n  | \"RED\"\n  | \"RED_LOW\"\n  | \"RED_HIGH\"\n  | \"STALE\"\n  | 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(\n  state: PacketItemLimitsState,\n  tokens: ReturnType<typeof useTheme>[\"tokens\"],\n): string {\n  switch (state) {\n    case \"RED\":\n    case \"RED_LOW\":\n    case \"RED_HIGH\":\n      return tokens.colors.status.critical;\n    case \"YELLOW\":\n    case \"YELLOW_LOW\":\n    case \"YELLOW_HIGH\":\n      return tokens.colors.status.caution;\n    case \"GREEN\":\n      return tokens.colors.status.normal;\n    case \"BLUE\":\n      return tokens.colors.status.standby;\n    case \"STALE\":\n      return tokens.colors.status.off;\n    default:\n      return tokens.colors.text.primary;\n  }\n}\n\nfunction getLimitsBg(\n  state: PacketItemLimitsState,\n  tokens: ReturnType<typeof useTheme>[\"tokens\"],\n): 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(\n  state: PacketItemLimitsState,\n  color: string,\n): React.CSSProperties {\n  const base: React.CSSProperties = {\n    width: 8,\n    height: 8,\n    display: \"inline-block\",\n    background: color,\n    boxShadow: `0 0 4px ${color}66`,\n  };\n  switch (state) {\n    case \"GREEN\":\n      return { ...base, borderRadius: \"50%\" }; // normal → circle\n    case \"YELLOW\":\n    case \"YELLOW_LOW\":\n    case \"YELLOW_HIGH\":\n      return { ...base, borderRadius: \"1px\" }; // caution → square\n    case \"RED\":\n    case \"RED_LOW\":\n    case \"RED_HIGH\":\n      return {\n        ...base,\n        borderRadius: 0, // critical → triangle down\n        clipPath: \"polygon(50% 100%, 0% 0%, 100% 0%)\",\n      };\n    case \"BLUE\":\n      return {\n        ...base,\n        borderRadius: \"50%\",\n        width: 6,\n        height: 6, // standby → hollow ring\n        background: \"transparent\",\n        border: `2px solid ${color}`,\n        boxShadow: \"none\",\n      };\n    case \"STALE\":\n      return {\n        ...base,\n        borderRadius: \"50%\",\n        width: 5,\n        height: 5, // off → small dot\n        opacity: 0.6,\n      };\n    default:\n      return { ...base, borderRadius: \"50%\" };\n  }\n}\n\nfunction getDisplayValue(item: PacketItem, mode: PacketViewMode): string {\n  switch (mode) {\n    case \"raw\":\n      return String(item.value);\n    case \"converted\":\n      return String(item.convertedValue ?? item.value);\n    case \"formatted\":\n      return item.formattedValue ?? String(item.convertedValue ?? item.value);\n    case \"with_units\": {\n      const val =\n        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\" ||\n    theme === \"transparent-bold\" ||\n    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(\n        (i) =>\n          i.name.toLowerCase().includes(q) ||\n          (i.description && i.description.toLowerCase().includes(q)),\n      );\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(\n    (item: PacketItem) => {\n      setSelectedItem(item);\n      setShowDetails(true);\n      onItemClick?.(item);\n    },\n    [onItemClick],\n  );\n\n  const rowHeight = compact ? 26 : 32;\n  const overscanRows = 12;\n  const totalRows = sortedItems.length;\n  const startRow = Math.max(\n    0,\n    Math.floor(scrollTop / rowHeight) - overscanRows,\n  );\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 = () =>\n      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\n          ? (tokens.colors.border.cardStyle ?? {\n              border: `1px solid ${tokens.colors.border.muted}`,\n            })\n          : { 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\n        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      >\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n          {target && (\n            <span\n              style={{\n                background: `${tokens.colors.interactive.default}22`,\n                color: tokens.colors.interactive.default,\n                padding: \"2px 8px\",\n                borderRadius: tokens.borderRadius.md,\n                fontSize: tokens.typography.fontSize.xxs,\n                fontWeight: 600,\n              }}\n            >\n              {target}\n            </span>\n          )}\n          {packet && (\n            <span\n              style={{\n                fontWeight: 600,\n                fontSize: tokens.typography.fontSize.sm,\n              }}\n            >\n              {packet}\n            </span>\n          )}\n          <span\n            style={{\n              fontSize: tokens.typography.fontSize.xxs,\n              color: tokens.colors.text.muted,\n            }}\n          >\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,\n                padding: \"3px 8px\",\n                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,\n                padding: \"3px 8px\",\n                fontSize: tokens.typography.fontSize.xxs,\n                outline: \"none\",\n                minWidth: 120,\n              }}\n            />\n          )}\n        </div>\n      </div>\n\n      {/* Column headers */}\n      <div\n        role=\"row\"\n        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      >\n        <span role=\"columnheader\">Item</span>\n        <span role=\"columnheader\" style={{ textAlign: \"right\" }}>\n          Value\n        </span>\n        <span role=\"columnheader\" style={{ minWidth: 50, textAlign: \"center\" }}>\n          Limits\n        </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\n            style={{\n              position: \"absolute\",\n              top: startRow * rowHeight,\n              left: 0,\n              right: 0,\n            }}\n          >\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) => {\n                    if (e.key === \"Enter\" || e.key === \" \") {\n                      e.preventDefault();\n                      handleItemClick(item);\n                    }\n                  }}\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\n                      ? `${tokens.colors.background.surface}44`\n                      : \"transparent\",\n                  }}\n                  onMouseEnter={(e) => {\n                    (e.currentTarget as HTMLDivElement).style.background =\n                      tokens.colors.background.surface;\n                  }}\n                  onMouseLeave={(e) => {\n                    (e.currentTarget as HTMLDivElement).style.background =\n                      item.derived\n                        ? `${tokens.colors.background.surface}44`\n                        : \"transparent\";\n                  }}\n                >\n                  {/* Item name */}\n                  <span\n                    style={{\n                      fontSize: compact\n                        ? tokens.typography.fontSize.xxs\n                        : tokens.typography.fontSize.xs,\n                      fontWeight: 500,\n                      color: item.derived\n                        ? tokens.colors.text.muted\n                        : tokens.colors.text.primary,\n                      fontStyle: item.derived ? \"italic\" : \"normal\",\n                      overflow: \"hidden\",\n                      textOverflow: \"ellipsis\",\n                      whiteSpace: \"nowrap\",\n                    }}\n                  >\n                    {item.name}\n                  </span>\n\n                  {/* Value */}\n                  <span\n                    style={{\n                      textAlign: \"right\",\n                      fontFamily: tokens.typography.fontFamily.mono,\n                      fontSize: compact\n                        ? tokens.typography.fontSize.xxs\n                        : 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                  >\n                    {getDisplayValue(item, viewMode)}\n                  </span>\n\n                  {/* Limits indicator — Astro UX status shape */}\n                  <div\n                    style={{\n                      minWidth: 50,\n                      display: \"flex\",\n                      justifyContent: \"center\",\n                    }}\n                  >\n                    {item.limits?.state && (\n                      <div\n                        style={{\n                          display: \"flex\",\n                          alignItems: \"center\",\n                          gap: 3,\n                        }}\n                      >\n                        <span\n                          style={getLimitsShapeStyle(\n                            item.limits.state,\n                            limitsColor,\n                          )}\n                        />\n                        <span\n                          style={{\n                            fontSize: tokens.typography.fontSize.micro,\n                            color: limitsColor,\n                            fontWeight: 600,\n                          }}\n                        >\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\n          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        >\n          <div\n            style={{\n              display: \"flex\",\n              justifyContent: \"space-between\",\n              alignItems: \"center\",\n              marginBottom: tokens.spacing.sm,\n            }}\n          >\n            <span\n              style={{\n                fontWeight: tokens.typography.fontWeight.bold,\n                fontSize: tokens.typography.fontSize.sm,\n              }}\n            >\n              {selectedItem.name}\n            </span>\n            <button\n              onClick={() => setShowDetails(false)}\n              aria-label=\"Close details panel\"\n              style={{\n                background: \"none\",\n                border: \"none\",\n                color: tokens.colors.text.muted,\n                cursor: \"pointer\",\n                fontSize: tokens.typography.fontSize.lg,\n                padding: tokens.spacing.xs,\n                lineHeight: 1,\n              }}\n            >\n              &#x2715;\n            </button>\n          </div>\n          {selectedItem.description && (\n            <p\n              style={{\n                color: tokens.colors.text.secondary,\n                fontSize: tokens.typography.fontSize.xs,\n                marginBottom: 8,\n              }}\n            >\n              {selectedItem.description}\n            </p>\n          )}\n          <div\n            style={{\n              display: \"grid\",\n              gridTemplateColumns: \"auto 1fr\",\n              gap: \"4px 12px\",\n              fontSize: tokens.typography.fontSize.xxs,\n              fontFamily: tokens.typography.fontFamily.mono,\n            }}\n          >\n            <span style={{ color: tokens.colors.text.muted }}>Raw:</span>\n            <span>{String(selectedItem.value)}</span>\n            {selectedItem.convertedValue !== undefined && (\n              <>\n                <span style={{ color: tokens.colors.text.muted }}>\n                  Converted:\n                </span>\n                <span>{String(selectedItem.convertedValue)}</span>\n              </>\n            )}\n            {selectedItem.units && (\n              <>\n                <span style={{ color: tokens.colors.text.muted }}>Units:</span>\n                <span>{selectedItem.units}</span>\n              </>\n            )}\n            {selectedItem.dataType && (\n              <>\n                <span style={{ color: tokens.colors.text.muted }}>Type:</span>\n                <span>{selectedItem.dataType}</span>\n              </>\n            )}\n            {selectedItem.bitSize !== undefined && (\n              <>\n                <span style={{ color: tokens.colors.text.muted }}>\n                  Bit Size:\n                </span>\n                <span>{selectedItem.bitSize}</span>\n              </>\n            )}\n            {selectedItem.bitOffset !== undefined && (\n              <>\n                <span style={{ color: tokens.colors.text.muted }}>\n                  Bit Offset:\n                </span>\n                <span>{selectedItem.bitOffset}</span>\n              </>\n            )}\n            {selectedItem.conversion && (\n              <>\n                <span style={{ color: tokens.colors.text.muted }}>\n                  Conversion:\n                </span>\n                <span>{selectedItem.conversion}</span>\n              </>\n            )}\n            {selectedItem.limits && (\n              <>\n                <span style={{ color: tokens.colors.text.muted }}>\n                  Limits State:\n                </span>\n                <span\n                  style={{\n                    color: getLimitsColor(selectedItem.limits.state, tokens),\n                  }}\n                >\n                  {selectedItem.limits.state}\n                </span>\n                {selectedItem.limits.redLow !== undefined && (\n                  <>\n                    <span style={{ color: tokens.colors.text.muted }}>\n                      Red Low:\n                    </span>\n                    <span>{selectedItem.limits.redLow}</span>\n                  </>\n                )}\n                {selectedItem.limits.yellowLow !== undefined && (\n                  <>\n                    <span style={{ color: tokens.colors.text.muted }}>\n                      Yellow Low:\n                    </span>\n                    <span>{selectedItem.limits.yellowLow}</span>\n                  </>\n                )}\n                {selectedItem.limits.greenHigh !== undefined && (\n                  <>\n                    <span style={{ color: tokens.colors.text.muted }}>\n                      Green High:\n                    </span>\n                    <span>{selectedItem.limits.greenHigh}</span>\n                  </>\n                )}\n                {selectedItem.limits.yellowHigh !== undefined && (\n                  <>\n                    <span style={{ color: tokens.colors.text.muted }}>\n                      Yellow High:\n                    </span>\n                    <span>{selectedItem.limits.yellowHigh}</span>\n                  </>\n                )}\n                {selectedItem.limits.redHigh !== undefined && (\n                  <>\n                    <span style={{ color: tokens.colors.text.muted }}>\n                      Red High:\n                    </span>\n                    <span>{selectedItem.limits.redHigh}</span>\n                  </>\n                )}\n              </>\n            )}\n            {selectedItem.states && (\n              <>\n                <span style={{ color: tokens.colors.text.muted }}>States:</span>\n                <span>\n                  {Object.entries(selectedItem.states)\n                    .map(([k, v]) => `${k}=${v}`)\n                    .join(\", \")}\n                </span>\n              </>\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default PacketViewer;\n"],"mappings":"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"}