@zendir/ui 0.5.0 → 0.6.1

package/dist/react/cards/TelemetryStreamCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"TelemetryStreamCard.js","sources":["../../../src/react/cards/TelemetryStreamCard.tsx"],"sourcesContent":["/**\n * @zendir/ui - TelemetryStreamCard Component\n * \n * Compact streaming telemetry card showing individual metric channels.\n * Designed for real-time data display with configurable metrics.\n * \n * Features:\n * - Configurable metric channels\n * - Streaming status indicator\n * - Color-coded values based on thresholds\n * - WCAG 2.1 AA accessibility\n */\n\nimport React, { memo, useMemo } from 'react';\nimport { useTheme } from '../theme';\nimport { Icon } from '../core/display/Icon';\nimport { CardHeader } from '../core/display/CardHeader';\nimport { useCompactMode } from '../hooks';\nimport { classNames, type StatusLevel } from '../utils';\n\nexport interface TelemetryMetric {\n  /** Unique identifier */\n  id: string;\n  /** Display label */\n  label: string;\n  /** Current value */\n  value: number | string;\n  /** Unit suffix */\n  unit?: string;\n  /** Status level for color coding */\n  status?: StatusLevel;\n  /** Format function for value display */\n  format?: (value: number) => string;\n}\n\nexport interface TelemetryStreamCardProps {\n  /** Card title */\n  title?: string;\n  /** Number of channels */\n  channelCount?: number;\n  /** Update frequency (Hz) */\n  frequency?: number;\n  /** Streaming status */\n  isStreaming?: boolean;\n  /** Metric channels to display */\n  metrics?: TelemetryMetric[];\n  /** Loading state */\n  loading?: boolean;\n  /** Custom className */\n  className?: string;\n  /** Enable compact mode - shows condensed view that expands on hover/click */\n  compact?: boolean;\n  /** Start expanded when in compact mode (pinned state) */\n  defaultExpanded?: boolean;\n  /** Callback when pin state changes in compact mode */\n  onPinChange?: (isPinned: boolean) => void;\n}\n\n/**\n * Get status color for a metric value\n */\nfunction getMetricColor(status: StatusLevel | undefined, tokens: any): string {\n  if (!status || status === 'normal') return tokens.colors.status.normal;\n  if (status === 'caution') return tokens.colors.status.caution;\n  if (status === 'critical') return tokens.colors.status.critical;\n  if (status === 'standby') return tokens.colors.status.standby;\n  return tokens.colors.text.primary;\n}\n\n/**\n * TelemetryStreamCard - Compact streaming telemetry display\n * \n * @example\n * ```tsx\n * <TelemetryStreamCard\n *   title=\"Telemetry\"\n *   channelCount={12}\n *   frequency={1}\n *   isStreaming={true}\n *   metrics={[\n *     { id: 'cpu', label: 'CPU Temp', value: 42, unit: '°C', status: 'normal' },\n *     { id: 'voltage', label: 'Bus Voltage', value: 28.4, unit: 'V' },\n *     { id: 'wheel', label: 'Wheel Speed', value: 2450, unit: 'rpm' },\n *     { id: 'memory', label: 'Memory', value: 78, unit: '%', status: 'caution' },\n *   ]}\n * />\n * ```\n */\nexport const TelemetryStreamCard = memo(function TelemetryStreamCard({\n  title = 'Telemetry',\n  channelCount = 12,\n  frequency = 1,\n  isStreaming = true,\n  metrics = [],\n  loading = false,\n  className = '',\n  compact = false,\n  defaultExpanded = false,\n  onPinChange,\n}: TelemetryStreamCardProps): React.ReactElement {\n  const { tokens, theme, prefersReducedMotion } = useTheme();\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const isBoldVariant = theme === 'transparent-bold';\n  const isMinimalVariant = theme === 'transparent-minimal';\n  const useGlassMode = isBoldVariant || isMinimalVariant;\n  \n  // Glass accent colors for bold/minimal themes (matching Container/AstroChart)\n  const glassAccentColor = tokens.colors.accent.primary;\n  const glassAccentMuted = `${glassAccentColor}66`;\n\n  // Compact mode state management\n  const { expanded, isPinned, handlers, transitionDuration } = useCompactMode({\n    compact,\n    defaultExpanded,\n    onPinChange,\n  });\n  \n  // Glass mode container style (matching Container/AstroChart for bold/minimal)\n  const glassContainerStyle: React.CSSProperties = useGlassMode ? {\n    backgroundColor: 'rgba(10, 15, 25, 0.35)',\n    backdropFilter: 'blur(12px)',\n    WebkitBackdropFilter: 'blur(12px)',\n    border: `1px solid ${glassAccentMuted}`,\n    borderTop: isBoldVariant ? `2px solid ${glassAccentColor}` : `1px solid ${glassAccentColor}`,\n  } : {};\n\n  // Card styles - Use transparent background with blur for transparent themes (matching Timeline)\n  const cardStyle = useMemo(() => ({\n    position: 'relative' as const,\n    overflow: 'hidden' as const,\n    ...(useGlassMode ? glassContainerStyle : {\n      backgroundColor: isTransparentTheme ? 'transparent' : tokens.colors.background.surface,\n      ...(isTransparentTheme && { \n        backdropFilter: 'blur(12px)' as const, \n        WebkitBackdropFilter: 'blur(12px)' as const,\n      }),\n      ...(tokens.colors.border.cardStyleDefault ?? { border: `1px solid ${tokens.colors.border.default}` }),\n    }),\n    borderRadius: tokens.borderRadius.lg,\n    padding: tokens.spacing.md,\n  }), [tokens, isTransparentTheme, useGlassMode, glassContainerStyle]);\n\n  // Metric box styles\n  const metricBoxStyle = useMemo(() => ({\n    backgroundColor: tokens.colors.background.elevated,\n    borderRadius: tokens.borderRadius.md,\n    padding: tokens.spacing.sm,\n  }), [tokens]);\n\n  // Loading state\n  if (loading) {\n    return (\n      <article\n        className={classNames('zendir-telemetry-stream-card', className)}\n        style={cardStyle}\n        aria-busy=\"true\"\n        aria-label=\"Loading telemetry stream\"\n      >\n        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>\n          <div>\n            <div style={{\n              height: 16,\n              width: 80,\n              backgroundColor: tokens.colors.background.elevated,\n              borderRadius: 4,\n              marginBottom: 4,\n            }} />\n            <div style={{\n              height: 12,\n              width: 100,\n              backgroundColor: tokens.colors.background.elevated,\n              borderRadius: 4,\n            }} />\n          </div>\n          <div style={{\n            height: 24,\n            width: 70,\n            backgroundColor: tokens.colors.background.elevated,\n            borderRadius: 12,\n          }} />\n        </div>\n        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>\n          {[1, 2, 3, 4].map((i) => (\n            <div key={i} style={metricBoxStyle}>\n              <div style={{\n                height: 10,\n                width: 60,\n                backgroundColor: tokens.colors.background.base,\n                borderRadius: 4,\n                marginBottom: 8,\n              }} />\n              <div style={{\n                height: 20,\n                width: 80,\n                backgroundColor: tokens.colors.background.base,\n                borderRadius: 4,\n              }} />\n            </div>\n          ))}\n        </div>\n      </article>\n    );\n  }\n\n  // Compact view - shows streaming status and first few metrics\n  if (compact && !expanded) {\n    return (\n      <article\n        className={classNames('zendir-telemetry-stream-card', 'compact', className)}\n        {...handlers}\n        style={{\n          ...cardStyle,\n          padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,\n          cursor: 'pointer',\n          transition: `all ${transitionDuration} ease-out`,\n        }}\n        onMouseEnter={(e) => {\n          handlers.onMouseEnter();\n          if (!prefersReducedMotion) {\n            (e.currentTarget as HTMLElement).style.transform = 'scale(1.01)';\n            (e.currentTarget as HTMLElement).style.boxShadow = `0 4px 12px ${tokens.colors.accent.primary}20`;\n          }\n        }}\n        onMouseLeave={(e) => {\n          handlers.onMouseLeave();\n          (e.currentTarget as HTMLElement).style.transform = 'scale(1)';\n          (e.currentTarget as HTMLElement).style.boxShadow = '';\n        }}\n        aria-label={`${title} (compact)`}\n      >\n        {/* Glass gradient overlay for bold/minimal themes */}\n        {useGlassMode && (\n          <div\n            style={{\n              position: 'absolute',\n              inset: 0,\n              background: 'linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)',\n              pointerEvents: 'none',\n              zIndex: 0,\n            }}\n          />\n        )}\n        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: tokens.spacing.md, position: 'relative', zIndex: 1 }}>\n          {/* Left side: Status indicator + Title + Accent line */}\n          <div style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.sm, flex: 1, minWidth: 0 }}>\n            <div\n              style={{\n                width: 8,\n                height: 8,\n                borderRadius: '50%',\n                backgroundColor: isStreaming ? tokens.colors.status.normal : tokens.colors.status.off,\n                boxShadow: isStreaming ? `0 0 6px ${tokens.colors.status.normal}` : 'none',\n                flexShrink: 0,\n              }}\n            />\n            <span style={{ \n              fontWeight: tokens.typography.fontWeight.medium,\n              color: useGlassMode ? glassAccentColor : undefined,\n              textShadow: useGlassMode ? `0 0 16px ${glassAccentMuted}` : undefined,\n            }}>\n              {title.split(' ')[0]}\n            </span>\n            {useGlassMode && (\n              <div style={{\n                flex: 1,\n                height: isBoldVariant ? '2px' : '1px',\n                minWidth: 20,\n                background: `linear-gradient(90deg, ${glassAccentColor} 0%, ${glassAccentMuted} 60%, transparent 100%)`,\n                boxShadow: isBoldVariant ? `0 0 8px ${glassAccentMuted}` : undefined,\n              }} />\n            )}\n          </div>\n          \n          {/* Right side: Channel count badge + Metrics + Pin */}\n          <div style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.sm, flexShrink: 0 }}>\n            <span style={{ \n              color: tokens.colors.text.tertiary, \n              fontSize: tokens.typography.fontSize.xs,\n              backgroundColor: useGlassMode ? `${glassAccentColor}20` : undefined,\n              padding: useGlassMode ? '1px 6px' : undefined,\n              borderRadius: tokens.borderRadius.sm,\n            }}>\n              {channelCount}ch\n            </span>\n            {metrics.slice(0, 2).map(metric => (\n              <span\n                key={metric.id}\n                style={{\n                  fontVariantNumeric: 'tabular-nums',\n                  fontFamily: tokens.typography.fontFamily.mono,\n                  fontSize: tokens.typography.fontSize.xs,\n                  color: getMetricColor(metric.status, tokens),\n                }}\n              >\n                {metric.value}{metric.unit ? metric.unit : ''}\n              </span>\n            ))}\n            {isPinned && (\n              <Icon name=\"lock\" size={12} color={tokens.colors.accent.primary} />\n            )}\n          </div>\n        </div>\n      </article>\n    );\n  }\n\n  return (\n    <article\n      className={classNames('zendir-telemetry-stream-card', compact ? 'expanded' : '', className)}\n      {...(compact ? handlers : {})}\n      role={compact ? handlers.role : 'article'}\n      tabIndex={compact ? handlers.tabIndex : undefined}\n      aria-expanded={compact ? handlers['aria-expanded'] : undefined}\n      style={{\n        ...cardStyle,\n        cursor: compact ? 'pointer' : undefined,\n        transition: compact ? `all ${transitionDuration} ease-out` : undefined,\n      }}\n      aria-label={`${title} - ${isStreaming ? 'Streaming' : 'Paused'}`}\n      aria-live=\"polite\"\n    >\n      {/* Glass gradient overlay for bold/minimal themes */}\n      {useGlassMode && (\n        <div\n          style={{\n            position: 'absolute',\n            inset: 0,\n            background: 'linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)',\n            pointerEvents: 'none',\n            zIndex: 0,\n          }}\n        />\n      )}\n      \n      {/* Unified Card Header - handles all theme variants */}\n      <CardHeader\n        icon=\"antenna-receive\"\n        title={title}\n        subtitle={`${channelCount} channels • ${frequency} Hz`}\n        status={isStreaming ? 'normal' : 'standby'}\n        badge={isStreaming ? 'Streaming' : 'Paused'}\n        badgeColor={isStreaming ? tokens.colors.status.normal : tokens.colors.status.standby}\n      />\n\n      {/* Metrics Grid */}\n      <div style={{\n        display: 'grid',\n        gridTemplateColumns: 'repeat(2, 1fr)',\n        gap: 12,\n      }}>\n        {metrics.map((metric) => (\n          <div\n            key={metric.id}\n            style={metricBoxStyle}\n            role=\"group\"\n            aria-label={`${metric.label}: ${metric.value}${metric.unit || ''}`}\n          >\n            <div style={{\n              fontSize: tokens.typography.fontSize.xxs, // 0.625rem / 10px (AstroUXDS compact)\n              fontWeight: tokens.typography.fontWeight.medium, // 500 (AstroUXDS medium)\n              textTransform: 'uppercase',\n              letterSpacing: '0.05em',\n              color: tokens.colors.text.tertiary,\n              marginBottom: 4,\n            }}>\n              {metric.label}\n            </div>\n            <div style={{\n              fontSize: tokens.typography.fontSize.lg,\n              fontWeight: tokens.typography.fontWeight.bold, // 700 (AstroUXDS bold)\n              fontFamily: tokens.typography.fontFamily.mono,\n              fontVariantNumeric: 'tabular-nums',\n              color: getMetricColor(metric.status, tokens),\n            }}>\n              {typeof metric.value === 'number'\n                ? metric.format\n                  ? metric.format(metric.value)\n                  : metric.value.toLocaleString()\n                : metric.value}\n              {metric.unit && (\n                <span style={{\n                  fontSize: tokens.typography.fontSize.sm,\n                  fontWeight: tokens.typography.fontWeight.normal, // 400 (AstroUXDS normal)\n                  marginLeft: 2,\n                }}>\n                  {metric.unit}\n                </span>\n              )}\n            </div>\n          </div>\n        ))}\n      </div>\n\n      {/* Pulse animation */}\n      <style>{`\n        @keyframes pulse {\n          0%, 100% { opacity: 1; }\n          50% { opacity: 0.5; }\n        }\n      `}</style>\n    </article>\n  );\n});\n"],"names":["TelemetryStreamCard"],"mappings":"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"}
+{"version":3,"file":"TelemetryStreamCard.js","names":[],"sources":["../../../src/react/cards/TelemetryStreamCard.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - TelemetryStreamCard Component\r\n *\r\n * Compact streaming telemetry card showing individual metric channels.\r\n * Designed for real-time data display with configurable metrics.\r\n *\r\n * Features:\r\n * - Configurable metric channels\r\n * - Streaming status indicator\r\n * - Color-coded values based on thresholds\r\n * - WCAG 2.1 AA accessibility\r\n */\r\n\r\nimport React, { memo, useMemo } from \"react\";\r\nimport { useTheme } from \"../theme\";\r\nimport { Icon } from \"../core/display/Icon\";\r\nimport { CardHeader } from \"../core/display/CardHeader\";\r\nimport { useCompactMode } from \"../hooks\";\r\nimport { classNames, type StatusLevel } from \"../utils\";\r\n\r\nexport interface TelemetryMetric {\r\n  /** Unique identifier */\r\n  id: string;\r\n  /** Display label */\r\n  label: string;\r\n  /** Current value */\r\n  value: number | string;\r\n  /** Unit suffix */\r\n  unit?: string;\r\n  /** Status level for color coding */\r\n  status?: StatusLevel;\r\n  /** Format function for value display */\r\n  format?: (value: number) => string;\r\n}\r\n\r\nexport interface TelemetryStreamCardProps {\r\n  /** Card title */\r\n  title?: string;\r\n  /** Number of channels */\r\n  channelCount?: number;\r\n  /** Update frequency (Hz) */\r\n  frequency?: number;\r\n  /** Streaming status */\r\n  isStreaming?: boolean;\r\n  /** Metric channels to display */\r\n  metrics?: TelemetryMetric[];\r\n  /** Loading state */\r\n  loading?: boolean;\r\n  /** Custom className */\r\n  className?: string;\r\n  /** Enable compact mode - shows condensed view that expands on hover/click */\r\n  compact?: boolean;\r\n  /** Start expanded when in compact mode (pinned state) */\r\n  defaultExpanded?: boolean;\r\n  /** Callback when pin state changes in compact mode */\r\n  onPinChange?: (isPinned: boolean) => void;\r\n}\r\n\r\n/**\r\n * Get status color for a metric value\r\n */\r\nfunction getMetricColor(status: StatusLevel | undefined, tokens: any): string {\r\n  if (!status || status === \"normal\") return tokens.colors.status.normal;\r\n  if (status === \"caution\") return tokens.colors.status.caution;\r\n  if (status === \"critical\") return tokens.colors.status.critical;\r\n  if (status === \"standby\") return tokens.colors.status.standby;\r\n  return tokens.colors.text.primary;\r\n}\r\n\r\n/**\r\n * TelemetryStreamCard - Compact streaming telemetry display\r\n *\r\n * @example\r\n * ```tsx\r\n * <TelemetryStreamCard\r\n *   title=\"Telemetry\"\r\n *   channelCount={12}\r\n *   frequency={1}\r\n *   isStreaming={true}\r\n *   metrics={[\r\n *     { id: 'cpu', label: 'CPU Temp', value: 42, unit: '°C', status: 'normal' },\r\n *     { id: 'voltage', label: 'Bus Voltage', value: 28.4, unit: 'V' },\r\n *     { id: 'wheel', label: 'Wheel Speed', value: 2450, unit: 'rpm' },\r\n *     { id: 'memory', label: 'Memory', value: 78, unit: '%', status: 'caution' },\r\n *   ]}\r\n * />\r\n * ```\r\n */\r\nexport const TelemetryStreamCard = memo(function TelemetryStreamCard({\r\n  title = \"Telemetry\",\r\n  channelCount = 12,\r\n  frequency = 1,\r\n  isStreaming = true,\r\n  metrics = [],\r\n  loading = false,\r\n  className = \"\",\r\n  compact = false,\r\n  defaultExpanded = false,\r\n  onPinChange,\r\n}: TelemetryStreamCardProps): React.ReactElement {\r\n  const { tokens, theme, prefersReducedMotion } = useTheme();\r\n  const isTransparentTheme =\r\n    theme === \"transparent\" ||\r\n    theme === \"transparent-bold\" ||\r\n    theme === \"transparent-minimal\";\r\n  const isBoldVariant = theme === \"transparent-bold\";\r\n  const isMinimalVariant = theme === \"transparent-minimal\";\r\n  const useGlassMode = isBoldVariant || isMinimalVariant;\r\n\r\n  // Glass accent colors for bold/minimal themes (matching Container/AstroChart)\r\n  const glassAccentColor = tokens.colors.accent.primary;\r\n  const glassAccentMuted = `${glassAccentColor}66`;\r\n\r\n  // Compact mode state management\r\n  const { expanded, isPinned, handlers, transitionDuration } = useCompactMode({\r\n    compact,\r\n    defaultExpanded,\r\n    onPinChange,\r\n  });\r\n\r\n  // Glass mode container style (matching Container/AstroChart for bold/minimal)\r\n  const glassContainerStyle: React.CSSProperties = useGlassMode\r\n    ? {\r\n        backgroundColor: \"rgba(10, 15, 25, 0.35)\",\r\n        backdropFilter: \"blur(12px)\",\r\n        WebkitBackdropFilter: \"blur(12px)\",\r\n        border: `1px solid ${glassAccentMuted}`,\r\n        borderTop: isBoldVariant\r\n          ? `2px solid ${glassAccentColor}`\r\n          : `1px solid ${glassAccentColor}`,\r\n      }\r\n    : {};\r\n\r\n  // Card styles - Use transparent background with blur for transparent themes (matching Timeline)\r\n  const cardStyle = useMemo(\r\n    () => ({\r\n      position: \"relative\" as const,\r\n      overflow: \"hidden\" as const,\r\n      ...(useGlassMode\r\n        ? glassContainerStyle\r\n        : {\r\n            backgroundColor: isTransparentTheme\r\n              ? \"transparent\"\r\n              : tokens.colors.background.surface,\r\n            ...(isTransparentTheme && {\r\n              backdropFilter: \"blur(12px)\" as const,\r\n              WebkitBackdropFilter: \"blur(12px)\" as const,\r\n            }),\r\n            ...(tokens.colors.border.cardStyleDefault ?? {\r\n              border: `1px solid ${tokens.colors.border.default}`,\r\n            }),\r\n          }),\r\n      borderRadius: tokens.borderRadius.lg,\r\n      padding: tokens.spacing.md,\r\n    }),\r\n    [tokens, isTransparentTheme, useGlassMode, glassContainerStyle],\r\n  );\r\n\r\n  // Metric box styles\r\n  const metricBoxStyle = useMemo(\r\n    () => ({\r\n      backgroundColor: tokens.colors.background.elevated,\r\n      borderRadius: tokens.borderRadius.md,\r\n      padding: tokens.spacing.sm,\r\n    }),\r\n    [tokens],\r\n  );\r\n\r\n  // Loading state\r\n  if (loading) {\r\n    return (\r\n      <article\r\n        className={classNames(\"zendir-telemetry-stream-card\", className)}\r\n        style={cardStyle}\r\n        aria-busy=\"true\"\r\n        aria-label=\"Loading telemetry stream\"\r\n      >\r\n        <div\r\n          style={{\r\n            display: \"flex\",\r\n            justifyContent: \"space-between\",\r\n            marginBottom: 16,\r\n          }}\r\n        >\r\n          <div>\r\n            <div\r\n              style={{\r\n                height: 16,\r\n                width: 80,\r\n                backgroundColor: tokens.colors.background.elevated,\r\n                borderRadius: 4,\r\n                marginBottom: 4,\r\n              }}\r\n            />\r\n            <div\r\n              style={{\r\n                height: 12,\r\n                width: 100,\r\n                backgroundColor: tokens.colors.background.elevated,\r\n                borderRadius: 4,\r\n              }}\r\n            />\r\n          </div>\r\n          <div\r\n            style={{\r\n              height: 24,\r\n              width: 70,\r\n              backgroundColor: tokens.colors.background.elevated,\r\n              borderRadius: 12,\r\n            }}\r\n          />\r\n        </div>\r\n        <div\r\n          style={{\r\n            display: \"grid\",\r\n            gridTemplateColumns: \"repeat(2, 1fr)\",\r\n            gap: 12,\r\n          }}\r\n        >\r\n          {[1, 2, 3, 4].map((i) => (\r\n            <div key={i} style={metricBoxStyle}>\r\n              <div\r\n                style={{\r\n                  height: 10,\r\n                  width: 60,\r\n                  backgroundColor: tokens.colors.background.base,\r\n                  borderRadius: 4,\r\n                  marginBottom: 8,\r\n                }}\r\n              />\r\n              <div\r\n                style={{\r\n                  height: 20,\r\n                  width: 80,\r\n                  backgroundColor: tokens.colors.background.base,\r\n                  borderRadius: 4,\r\n                }}\r\n              />\r\n            </div>\r\n          ))}\r\n        </div>\r\n      </article>\r\n    );\r\n  }\r\n\r\n  // Compact view - shows streaming status and first few metrics\r\n  if (compact && !expanded) {\r\n    return (\r\n      <article\r\n        className={classNames(\r\n          \"zendir-telemetry-stream-card\",\r\n          \"compact\",\r\n          className,\r\n        )}\r\n        {...handlers}\r\n        style={{\r\n          ...cardStyle,\r\n          padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,\r\n          cursor: \"pointer\",\r\n          transition: `all ${transitionDuration} ease-out`,\r\n        }}\r\n        onMouseEnter={(e) => {\r\n          handlers.onMouseEnter();\r\n          if (!prefersReducedMotion) {\r\n            (e.currentTarget as HTMLElement).style.transform = \"scale(1.01)\";\r\n            (e.currentTarget as HTMLElement).style.boxShadow =\r\n              `0 4px 12px ${tokens.colors.accent.primary}20`;\r\n          }\r\n        }}\r\n        onMouseLeave={(e) => {\r\n          handlers.onMouseLeave();\r\n          (e.currentTarget as HTMLElement).style.transform = \"scale(1)\";\r\n          (e.currentTarget as HTMLElement).style.boxShadow = \"\";\r\n        }}\r\n        aria-label={`${title} (compact)`}\r\n      >\r\n        {/* Glass gradient overlay for bold/minimal themes */}\r\n        {useGlassMode && (\r\n          <div\r\n            style={{\r\n              position: \"absolute\",\r\n              inset: 0,\r\n              background:\r\n                \"linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)\",\r\n              pointerEvents: \"none\",\r\n              zIndex: 0,\r\n            }}\r\n          />\r\n        )}\r\n        <div\r\n          style={{\r\n            display: \"flex\",\r\n            alignItems: \"center\",\r\n            justifyContent: \"space-between\",\r\n            gap: tokens.spacing.md,\r\n            position: \"relative\",\r\n            zIndex: 1,\r\n          }}\r\n        >\r\n          {/* Left side: Status indicator + Title + Accent line */}\r\n          <div\r\n            style={{\r\n              display: \"flex\",\r\n              alignItems: \"center\",\r\n              gap: tokens.spacing.sm,\r\n              flex: 1,\r\n              minWidth: 0,\r\n            }}\r\n          >\r\n            <div\r\n              style={{\r\n                width: 8,\r\n                height: 8,\r\n                borderRadius: \"50%\",\r\n                backgroundColor: isStreaming\r\n                  ? tokens.colors.status.normal\r\n                  : tokens.colors.status.off,\r\n                boxShadow: isStreaming\r\n                  ? `0 0 6px ${tokens.colors.status.normal}`\r\n                  : \"none\",\r\n                flexShrink: 0,\r\n              }}\r\n            />\r\n            <span\r\n              style={{\r\n                fontWeight: tokens.typography.fontWeight.medium,\r\n                color: useGlassMode ? glassAccentColor : undefined,\r\n                textShadow: useGlassMode\r\n                  ? `0 0 16px ${glassAccentMuted}`\r\n                  : undefined,\r\n              }}\r\n            >\r\n              {title.split(\" \")[0]}\r\n            </span>\r\n            {useGlassMode && (\r\n              <div\r\n                style={{\r\n                  flex: 1,\r\n                  height: isBoldVariant ? \"2px\" : \"1px\",\r\n                  minWidth: 20,\r\n                  background: `linear-gradient(90deg, ${glassAccentColor} 0%, ${glassAccentMuted} 60%, transparent 100%)`,\r\n                  boxShadow: isBoldVariant\r\n                    ? `0 0 8px ${glassAccentMuted}`\r\n                    : undefined,\r\n                }}\r\n              />\r\n            )}\r\n          </div>\r\n\r\n          {/* Right side: Channel count badge + Metrics + Pin */}\r\n          <div\r\n            style={{\r\n              display: \"flex\",\r\n              alignItems: \"center\",\r\n              gap: tokens.spacing.sm,\r\n              flexShrink: 0,\r\n            }}\r\n          >\r\n            <span\r\n              style={{\r\n                color: tokens.colors.text.tertiary,\r\n                fontSize: tokens.typography.fontSize.xs,\r\n                backgroundColor: useGlassMode\r\n                  ? `${glassAccentColor}20`\r\n                  : undefined,\r\n                padding: useGlassMode ? \"1px 6px\" : undefined,\r\n                borderRadius: tokens.borderRadius.sm,\r\n              }}\r\n            >\r\n              {channelCount}ch\r\n            </span>\r\n            {metrics.slice(0, 2).map((metric) => (\r\n              <span\r\n                key={metric.id}\r\n                style={{\r\n                  fontVariantNumeric: \"tabular-nums\",\r\n                  fontFamily: tokens.typography.fontFamily.mono,\r\n                  fontSize: tokens.typography.fontSize.xs,\r\n                  color: getMetricColor(metric.status, tokens),\r\n                }}\r\n              >\r\n                {metric.value}\r\n                {metric.unit ? metric.unit : \"\"}\r\n              </span>\r\n            ))}\r\n            {isPinned && (\r\n              <Icon\r\n                name=\"lock\"\r\n                size={12}\r\n                color={tokens.colors.accent.primary}\r\n              />\r\n            )}\r\n          </div>\r\n        </div>\r\n      </article>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <article\r\n      className={classNames(\r\n        \"zendir-telemetry-stream-card\",\r\n        compact ? \"expanded\" : \"\",\r\n        className,\r\n      )}\r\n      {...(compact ? handlers : {})}\r\n      role={compact ? handlers.role : \"article\"}\r\n      tabIndex={compact ? handlers.tabIndex : undefined}\r\n      aria-expanded={compact ? handlers[\"aria-expanded\"] : undefined}\r\n      style={{\r\n        ...cardStyle,\r\n        cursor: compact ? \"pointer\" : undefined,\r\n        transition: compact ? `all ${transitionDuration} ease-out` : undefined,\r\n      }}\r\n      aria-label={`${title} - ${isStreaming ? \"Streaming\" : \"Paused\"}`}\r\n      aria-live=\"polite\"\r\n    >\r\n      {/* Glass gradient overlay for bold/minimal themes */}\r\n      {useGlassMode && (\r\n        <div\r\n          style={{\r\n            position: \"absolute\",\r\n            inset: 0,\r\n            background:\r\n              \"linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)\",\r\n            pointerEvents: \"none\",\r\n            zIndex: 0,\r\n          }}\r\n        />\r\n      )}\r\n\r\n      {/* Unified Card Header - handles all theme variants */}\r\n      <CardHeader\r\n        icon=\"antenna-receive\"\r\n        title={title}\r\n        subtitle={`${channelCount} channels • ${frequency} Hz`}\r\n        status={isStreaming ? \"normal\" : \"standby\"}\r\n        badge={isStreaming ? \"Streaming\" : \"Paused\"}\r\n        badgeColor={\r\n          isStreaming\r\n            ? tokens.colors.status.normal\r\n            : tokens.colors.status.standby\r\n        }\r\n      />\r\n\r\n      {/* Metrics Grid */}\r\n      <div\r\n        style={{\r\n          display: \"grid\",\r\n          gridTemplateColumns: \"repeat(2, 1fr)\",\r\n          gap: 12,\r\n        }}\r\n      >\r\n        {metrics.map((metric) => (\r\n          <div\r\n            key={metric.id}\r\n            style={metricBoxStyle}\r\n            role=\"group\"\r\n            aria-label={`${metric.label}: ${metric.value}${metric.unit || \"\"}`}\r\n          >\r\n            <div\r\n              style={{\r\n                fontSize: tokens.typography.fontSize.xxs, // 0.625rem / 10px (AstroUXDS compact)\r\n                fontWeight: tokens.typography.fontWeight.medium, // 500 (AstroUXDS medium)\r\n                textTransform: \"uppercase\",\r\n                letterSpacing: \"0.05em\",\r\n                color: tokens.colors.text.tertiary,\r\n                marginBottom: 4,\r\n              }}\r\n            >\r\n              {metric.label}\r\n            </div>\r\n            <div\r\n              style={{\r\n                fontSize: tokens.typography.fontSize.lg,\r\n                fontWeight: tokens.typography.fontWeight.bold, // 700 (AstroUXDS bold)\r\n                fontFamily: tokens.typography.fontFamily.mono,\r\n                fontVariantNumeric: \"tabular-nums\",\r\n                color: getMetricColor(metric.status, tokens),\r\n              }}\r\n            >\r\n              {typeof metric.value === \"number\"\r\n                ? metric.format\r\n                  ? metric.format(metric.value)\r\n                  : metric.value.toLocaleString()\r\n                : metric.value}\r\n              {metric.unit && (\r\n                <span\r\n                  style={{\r\n                    fontSize: tokens.typography.fontSize.sm,\r\n                    fontWeight: tokens.typography.fontWeight.normal, // 400 (AstroUXDS normal)\r\n                    marginLeft: 2,\r\n                  }}\r\n                >\r\n                  {metric.unit}\r\n                </span>\r\n              )}\r\n            </div>\r\n          </div>\r\n        ))}\r\n      </div>\r\n\r\n      {/* Pulse animation */}\r\n      <style>{`\r\n        @keyframes pulse {\r\n          0%, 100% { opacity: 1; }\r\n          50% { opacity: 0.5; }\r\n        }\r\n      `}</style>\r\n    </article>\r\n  );\r\n});\r\n"],"mappings":"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"}

package/dist/react/cards/index.d.ts

@@ -10,4 +10,4 @@ export type { AccessCardProps } from './AccessCard';
 export { OrbitCard } from './OrbitCard';
 export type { OrbitCardProps } from './OrbitCard';
 export { TelemetryStreamCard } from './TelemetryStreamCard';
-export type { TelemetryStreamCardProps, TelemetryMetric } from './TelemetryStreamCard';
+export type { TelemetryStreamCardProps, TelemetryMetric, } from './TelemetryStreamCard';

package/dist/react/cards/index.js

@@ -3,11 +3,4 @@ import { TelemetryCard } from "./TelemetryCard.js";
 import { AccessCard } from "./AccessCard.js";
 import { OrbitCard } from "./OrbitCard.js";
 import { TelemetryStreamCard } from "./TelemetryStreamCard.js";
-export {
-  AccessCard,
-  OrbitCard,
-  SpacecraftCard,
-  TelemetryCard,
-  TelemetryStreamCard
-};
-//# sourceMappingURL=index.js.map
+export { AccessCard, OrbitCard, SpacecraftCard, TelemetryCard, TelemetryStreamCard };

package/dist/react/charts/GroundTrackMap.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
 import { GroundTrackPoint, GroundStation, LayerDef as MapLayerDef } from '../types';
-
 export interface SatelliteTrack {
     /** Unique satellite identifier */
     id: string;
@@ -11,7 +10,7 @@ export interface SatelliteTrack {
     /** Track color */
     color?: string;
     /** Satellite status for icon coloring */
-    status?: 'normal' | 'caution' | 'serious' | 'critical' | 'standby' | 'off';
+    status?: "normal" | "caution" | "serious" | "critical" | "standby" | "off";
     /** Access mask (true = in contact) */
     accessMask?: boolean[];
     /** Show this satellite's sensor footprint */
@@ -22,7 +21,7 @@ export interface SatelliteTrack {
     futureTrackIndex?: number;
     /** AOS/LOS markers */
     passMarkers?: Array<{
-        type: 'aos' | 'los';
+        type: "aos" | "los";
         latitude: number;
         longitude: number;
         label?: string;
@@ -30,13 +29,13 @@ export interface SatelliteTrack {
 }
 export interface GroundStationEnhanced extends GroundStation {
     /** Station status */
-    status?: 'normal' | 'caution' | 'serious' | 'critical' | 'standby' | 'off';
+    status?: "normal" | "caution" | "serious" | "critical" | "standby" | "off";
     /** Show coverage circle */
     showCoverage?: boolean;
     /** Coverage radius in degrees (visibility horizon) */
     coverageRadius?: number;
     /** Station type (affects icon) */
-    type?: 'dish' | 'phased-array' | 'omni' | 'relay';
+    type?: "dish" | "phased-array" | "omni" | "relay";
 }
 /**
  * SRO-compatible team path format (space-range-operator CustomMap data shape).
@@ -155,7 +154,7 @@ export interface GroundTrackMapProps {
     /** Click handler for ground stations */
     onStationClick?: (stationId: string) => void;
     /** Map backend: 'leaflet' (default, requires leaflet peer) or 'canvas' */
-    mapProvider?: 'leaflet' | 'canvas';
+    mapProvider?: "leaflet" | "canvas";
     /** Tile URL for Leaflet (default: CartoDB dark). Ignored when mapProvider is 'canvas'. */
     tileUrl?: string;
     /**
@@ -186,7 +185,7 @@ export interface GroundTrackMapProps {
      */
     pinsEditable?: boolean;
     /** Called when the user places a new pin (provides lat/lon; consumer assigns id and persists) */
-    onPinAdd?: (pin: Omit<MapPin, 'id'>) => void;
+    onPinAdd?: (pin: Omit<MapPin, "id">) => void;
     /** Called when the user edits an existing pin (label, color, description change) */
     onPinUpdate?: (pin: MapPin) => void;
     /** Called when the user removes a pin */