@zendir/ui 0.1.0

package/dist/react/astro/SimulationControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimulationControls.js","sources":["../../../src/react/astro/SimulationControls.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - SimulationControls Component\r\n * \r\n * Space operations simulation playback controls following Astro UX patterns.\r\n * Provides play/pause/stop/step controls for simulation time management.\r\n * \r\n * Features:\r\n * - Play/Pause toggle with visual state feedback\r\n * - Stop (reset) functionality\r\n * - Step forward/backward controls\r\n * - Time scale (playback rate) adjustment\r\n * - Simulation time display integration\r\n * - AOS/LOS timer integration\r\n * - Keyboard accessibility\r\n * - AstroUXDS compliant styling\r\n * \r\n * Space Operations Terminology:\r\n * - SIM: Simulation mode indicator\r\n * - MET: Mission Elapsed Time\r\n * - Epoch: Simulation start time (t=0)\r\n * - Time Scale: Playback speed multiplier\r\n * \r\n * @example\r\n * ```tsx\r\n * import { SimulationControls } from '@zendir/ui/react';\r\n * \r\n * <SimulationControls\r\n *   isPlaying={isPlaying}\r\n *   onPlay={handlePlay}\r\n *   onPause={handlePause}\r\n *   onStop={handleStop}\r\n *   timeScale={1}\r\n *   onTimeScaleChange={setTimeScale}\r\n *   currentTime={simulationTime}\r\n *   epoch={epoch}\r\n * />\r\n * ```\r\n */\r\n\r\nimport React, { memo, useState, useCallback, useMemo } from 'react';\r\nimport { useTheme } from '../theme';\r\nimport { classNames, tabularNumsStyle, safeAccentText } from '../utils';\r\nimport { AstroIcon } from '../core/AstroIcon';\r\nimport { Tooltip } from '../core/Tooltip';\r\n\r\n// ============================================================================\r\n// Types\r\n// ============================================================================\r\n\r\nexport type SimulationState = 'stopped' | 'playing' | 'paused';\r\n\r\nexport interface SimulationControlsProps {\r\n  /** Current simulation state */\r\n  state?: SimulationState;\r\n  /** Whether simulation is playing (alternative to state) */\r\n  isPlaying?: boolean;\r\n  /** Whether simulation is paused (used with isPlaying for 3-state) */\r\n  isPaused?: boolean;\r\n  \r\n  // === Playback Callbacks ===\r\n  /** Called when play is triggered */\r\n  onPlay?: () => void;\r\n  /** Called when pause is triggered */\r\n  onPause?: () => void;\r\n  /** Called when stop (reset) is triggered */\r\n  onStop?: () => void;\r\n  /** Called when step forward is triggered */\r\n  onStepForward?: () => void;\r\n  /** Called when step backward is triggered */\r\n  onStepBackward?: () => void;\r\n  \r\n  // === Time Display ===\r\n  /** Current simulation time */\r\n  currentTime?: Date | string;\r\n  /** Simulation epoch (t=0) */\r\n  epoch?: Date | string;\r\n  /** Current elapsed seconds from epoch */\r\n  elapsedSeconds?: number;\r\n  /** Show elapsed time display */\r\n  showElapsedTime?: boolean;\r\n  /** Show current time display */\r\n  showCurrentTime?: boolean;\r\n  /** Show date in time display */\r\n  showDate?: boolean;\r\n  \r\n  // === Time Scale ===\r\n  /** Current time scale factor (1 = realtime) */\r\n  timeScale?: number;\r\n  /** Callback when time scale changes */\r\n  onTimeScaleChange?: (scale: number) => void;\r\n  /** Available time scale presets */\r\n  timeScalePresets?: number[];\r\n  /** Show time scale controls */\r\n  showTimeScale?: boolean;\r\n  \r\n  // === Step Size ===\r\n  /** Step size in seconds */\r\n  stepSize?: number;\r\n  /** Callback when step size changes */\r\n  onStepSizeChange?: (size: number) => void;\r\n  /** Available step size presets in seconds */\r\n  stepSizePresets?: number[];\r\n  /** Show step controls */\r\n  showStepControls?: boolean;\r\n  \r\n  // === Appearance ===\r\n  /** Compact display mode */\r\n  compact?: boolean;\r\n  /** Small size variant */\r\n  small?: boolean;\r\n  /** Custom className */\r\n  className?: string;\r\n  /** Disabled state */\r\n  disabled?: boolean;\r\n  /** Show simulation status indicator */\r\n  showStatus?: boolean;\r\n  /** Custom label for simulation mode */\r\n  label?: string;\r\n}\r\n\r\n// ============================================================================\r\n// Constants\r\n// ============================================================================\r\n\r\nconst DEFAULT_TIME_SCALE_PRESETS = [0.1, 0.25, 0.5, 1, 2, 5, 10, 60, 3600];\r\nconst DEFAULT_STEP_SIZE_PRESETS = [1, 5, 10, 30, 60, 300, 600, 3600];\r\n\r\n// ============================================================================\r\n// Utility Functions\r\n// ============================================================================\r\n\r\n/**\r\n * Format elapsed time as DD:HH:MM:SS\r\n */\r\nfunction formatElapsedTime(seconds: number): string {\r\n  const absSeconds = Math.abs(seconds);\r\n  const days = Math.floor(absSeconds / 86400);\r\n  const hours = Math.floor((absSeconds % 86400) / 3600);\r\n  const mins = Math.floor((absSeconds % 3600) / 60);\r\n  const secs = Math.floor(absSeconds % 60);\r\n  \r\n  const sign = seconds < 0 ? '-' : '';\r\n  \r\n  if (days > 0) {\r\n    return `${sign}${days}:${hours.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;\r\n  }\r\n  return `${sign}${hours.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;\r\n}\r\n\r\n/**\r\n * Format time scale for display\r\n */\r\nfunction formatTimeScale(scale: number): string {\r\n  if (scale >= 3600) return `${scale / 3600}h/s`;\r\n  if (scale >= 60) return `${scale / 60}m/s`;\r\n  if (scale === 1) return '1×';\r\n  if (scale < 1) return `${scale}×`;\r\n  return `${scale}×`;\r\n}\r\n\r\n/**\r\n * Format step size for display\r\n */\r\nfunction formatStepSize(seconds: number): string {\r\n  if (seconds >= 3600) return `${seconds / 3600}h`;\r\n  if (seconds >= 60) return `${seconds / 60}m`;\r\n  return `${seconds}s`;\r\n}\r\n\r\n/**\r\n * Format time for display\r\n */\r\nfunction formatTimeDisplay(date: Date): string {\r\n  const hours = date.getUTCHours().toString().padStart(2, '0');\r\n  const mins = date.getUTCMinutes().toString().padStart(2, '0');\r\n  const secs = date.getUTCSeconds().toString().padStart(2, '0');\r\n  return `${hours}:${mins}:${secs}`;\r\n}\r\n\r\n/**\r\n * Format date for display\r\n */\r\nfunction formatDateDisplay(date: Date): string {\r\n  const year = date.getUTCFullYear();\r\n  const month = (date.getUTCMonth() + 1).toString().padStart(2, '0');\r\n  const day = date.getUTCDate().toString().padStart(2, '0');\r\n  return `${year}-${month}-${day}`;\r\n}\r\n\r\n// ============================================================================\r\n// Sub-components\r\n// ============================================================================\r\n\r\ninterface ControlButtonProps {\r\n  icon: string;\r\n  label: string;\r\n  onClick?: () => void;\r\n  active?: boolean;\r\n  disabled?: boolean;\r\n  danger?: boolean;\r\n  tokens: ReturnType<typeof useTheme>['tokens'];\r\n  small?: boolean;\r\n}\r\n\r\nconst ControlButton = memo(function ControlButton({\r\n  icon,\r\n  label,\r\n  onClick,\r\n  active = false,\r\n  disabled = false,\r\n  danger = false,\r\n  tokens,\r\n  small = false,\r\n}: ControlButtonProps) {\r\n  const size = small ? 28 : 32;\r\n  const iconSize = small ? 14 : 16;\r\n  \r\n  const baseColor = danger \r\n    ? tokens.colors.status.critical \r\n    : active \r\n      ? tokens.colors.status.normal \r\n      : tokens.colors.text.primary;\r\n  \r\n  const bgColor = active \r\n    ? `${tokens.colors.status.normal}25`\r\n    : 'rgba(255,255,255,0.08)';\r\n  \r\n  return (\r\n    <Tooltip content={label} placement=\"bottom\">\r\n      <button\r\n        onClick={onClick}\r\n        disabled={disabled}\r\n        aria-label={label}\r\n        style={{\r\n          display: 'flex',\r\n          alignItems: 'center',\r\n          justifyContent: 'center',\r\n          width: size,\r\n          height: size,\r\n          padding: 0,\r\n          border: 'none',\r\n          borderRadius: tokens.borderRadius.md,\r\n          backgroundColor: disabled ? 'rgba(255,255,255,0.03)' : bgColor,\r\n          color: disabled ? tokens.colors.text.tertiary : baseColor,\r\n          cursor: disabled ? 'not-allowed' : 'pointer',\r\n          transition: 'all 0.15s ease',\r\n          opacity: disabled ? 0.5 : 1,\r\n        }}\r\n        onMouseEnter={(e) => {\r\n          if (!disabled) {\r\n            e.currentTarget.style.backgroundColor = active \r\n              ? `${tokens.colors.status.normal}35`\r\n              : 'rgba(255,255,255,0.15)';\r\n          }\r\n        }}\r\n        onMouseLeave={(e) => {\r\n          if (!disabled) {\r\n            e.currentTarget.style.backgroundColor = bgColor;\r\n          }\r\n        }}\r\n      >\r\n        <AstroIcon \r\n          name={icon as any} \r\n          size={iconSize} \r\n          color={disabled ? tokens.colors.text.tertiary : baseColor}\r\n        />\r\n      </button>\r\n    </Tooltip>\r\n  );\r\n});\r\n\r\ninterface TimeScaleSelectorProps {\r\n  value: number;\r\n  presets: number[];\r\n  onChange?: (scale: number) => void;\r\n  disabled?: boolean;\r\n  tokens: ReturnType<typeof useTheme>['tokens'];\r\n  small?: boolean;\r\n}\r\n\r\nconst TimeScaleSelector = memo(function TimeScaleSelector({\r\n  value,\r\n  presets,\r\n  onChange,\r\n  disabled = false,\r\n  tokens,\r\n  small = false,\r\n}: TimeScaleSelectorProps) {\r\n  const [isOpen, setIsOpen] = useState(false);\r\n  \r\n  return (\r\n    <div style={{ position: 'relative' }}>\r\n      <Tooltip content=\"Time Scale / Playback Speed\" placement=\"bottom\">\r\n        <button\r\n          onClick={() => !disabled && setIsOpen(!isOpen)}\r\n          disabled={disabled}\r\n          style={{\r\n            display: 'flex',\r\n            alignItems: 'center',\r\n            gap: 4,\r\n            padding: small ? '4px 8px' : '6px 10px',\r\n            border: 'none',\r\n            borderRadius: tokens.borderRadius.sm,\r\n            backgroundColor: 'rgba(255,255,255,0.08)',\r\n            color: value !== 1 ? tokens.colors.status.caution : tokens.colors.text.secondary,\r\n            fontSize: small ? tokens.typography.fontSize.xxs : '0.6875rem', // 10px/11px in rem\r\n            fontWeight: 700, // AstroUXDS bold for time display (critical info)\r\n            fontFamily: tokens.typography.fontFamily.mono,\r\n            cursor: disabled ? 'not-allowed' : 'pointer',\r\n            transition: 'all 0.15s ease',\r\n            opacity: disabled ? 0.5 : 1,\r\n            ...tabularNumsStyle,\r\n          }}\r\n        >\r\n          <AstroIcon name=\"fast-forward\" size={small ? 10 : 12} color=\"inherit\" />\r\n          {formatTimeScale(value)}\r\n        </button>\r\n      </Tooltip>\r\n      \r\n      {isOpen && !disabled && (\r\n        <>\r\n          <div \r\n            style={{ \r\n              position: 'fixed', \r\n              inset: 0, \r\n              zIndex: 99 \r\n            }} \r\n            onClick={() => setIsOpen(false)} \r\n          />\r\n          <div\r\n            style={{\r\n              position: 'absolute',\r\n              top: '100%',\r\n              left: '50%',\r\n              transform: 'translateX(-50%)',\r\n              marginTop: 4,\r\n              padding: 4,\r\n              backgroundColor: tokens.colors.background.elevated,\r\n              border: `1px solid ${tokens.colors.border.default}`,\r\n              borderRadius: tokens.borderRadius.md,\r\n              boxShadow: tokens.shadows.lg,\r\n              zIndex: 100,\r\n              minWidth: 80,\r\n            }}\r\n          >\r\n            {presets.map((scale) => (\r\n              <button\r\n                key={scale}\r\n                onClick={() => {\r\n                  onChange?.(scale);\r\n                  setIsOpen(false);\r\n                }}\r\n                style={{\r\n                  display: 'block',\r\n                  width: '100%',\r\n                  padding: '6px 12px',\r\n                  border: 'none',\r\n                  borderRadius: tokens.borderRadius.sm,\r\n                  backgroundColor: value === scale ? tokens.colors.accent.primary : 'transparent',\r\n                  color: value === scale ? '#ffffff' : tokens.colors.text.secondary,\r\n                  fontSize: '0.6875rem', // 11px in rem\r\n                  fontWeight: value === scale ? 500 : 400, // AstroUXDS: 500 (medium) not 600\r\n                  fontFamily: tokens.typography.fontFamily.mono,\r\n                  textAlign: 'center',\r\n                  cursor: 'pointer',\r\n                  transition: 'all 0.1s ease',\r\n                  ...tabularNumsStyle,\r\n                }}\r\n                onMouseEnter={(e) => {\r\n                  if (value !== scale) {\r\n                    e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.1)';\r\n                  }\r\n                }}\r\n                onMouseLeave={(e) => {\r\n                  e.currentTarget.style.backgroundColor = value === scale \r\n                    ? tokens.colors.accent.primary \r\n                    : 'transparent';\r\n                }}\r\n              >\r\n                {formatTimeScale(scale)}\r\n              </button>\r\n            ))}\r\n          </div>\r\n        </>\r\n      )}\r\n    </div>\r\n  );\r\n});\r\n\r\ninterface SimulationTimeDisplayProps {\r\n  currentTime?: Date;\r\n  elapsedSeconds?: number;\r\n  showElapsed?: boolean;\r\n  showCurrent?: boolean;\r\n  showDate?: boolean;\r\n  isPlaying?: boolean;\r\n  tokens: ReturnType<typeof useTheme>['tokens'];\r\n  small?: boolean;\r\n}\r\n\r\nconst SimulationTimeDisplay = memo(function SimulationTimeDisplay({\r\n  currentTime,\r\n  elapsedSeconds,\r\n  showElapsed = true,\r\n  showCurrent = true,\r\n  showDate = false,\r\n  isPlaying = false,\r\n  tokens,\r\n  small = false,\r\n}: SimulationTimeDisplayProps) {\r\n  return (\r\n    <div\r\n      style={{\r\n        display: 'flex',\r\n        flexDirection: 'column',\r\n        alignItems: 'center',\r\n        gap: 2,\r\n        padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\r\n      }}\r\n    >\r\n      {showDate && currentTime && (\r\n        <span\r\n          style={{\r\n            fontSize: tokens.typography.fontSize.xs,\r\n            fontFamily: tokens.typography.fontFamily.mono,\r\n            color: tokens.colors.text.tertiary,\r\n            ...tabularNumsStyle,\r\n          }}\r\n        >\r\n          {formatDateDisplay(currentTime)}\r\n        </span>\r\n      )}\r\n      \r\n      {showCurrent && currentTime && (\r\n        <span\r\n          style={{\r\n            fontSize: small ? tokens.typography.fontSize.lg : tokens.typography.fontSize.xl,\r\n            fontWeight: tokens.typography.fontWeight.bold, // Bold (700) to match MissionClock\r\n            fontFamily: tokens.typography.fontFamily.mono,\r\n            color: tokens.colors.text.primary,\r\n            ...tabularNumsStyle,\r\n          }}\r\n        >\r\n          {formatTimeDisplay(currentTime)}\r\n        </span>\r\n      )}\r\n      \r\n      {showElapsed && elapsedSeconds !== undefined && (\r\n        <span\r\n          style={{\r\n            fontSize: tokens.typography.fontSize.sm,\r\n            fontFamily: tokens.typography.fontFamily.mono,\r\n            color: tokens.colors.status.caution,\r\n            ...tabularNumsStyle,\r\n          }}\r\n        >\r\n          T{elapsedSeconds >= 0 ? '+' : ''}{formatElapsedTime(elapsedSeconds)}\r\n        </span>\r\n      )}\r\n      \r\n      <span\r\n        style={{\r\n          fontSize: tokens.typography.fontSize.xs,\r\n          fontWeight: tokens.typography.fontWeight.medium,\r\n          color: isPlaying ? safeAccentText(tokens.colors.accent.primary) : tokens.colors.status.standby,\r\n          textTransform: 'uppercase',\r\n          letterSpacing: tokens.typography.letterSpacing.wide,\r\n          display: 'flex',\r\n          alignItems: 'center',\r\n          gap: 4,\r\n        }}\r\n      >\r\n        {isPlaying && (\r\n          <span\r\n            style={{\r\n              width: 6,\r\n              height: 6,\r\n              borderRadius: '50%',\r\n              backgroundColor: tokens.colors.accent.primary,\r\n              animation: 'pulse 1.5s ease-in-out infinite',\r\n            }}\r\n          />\r\n        )}\r\n        SIM\r\n      </span>\r\n    </div>\r\n  );\r\n});\r\n\r\n// ============================================================================\r\n// Main Component\r\n// ============================================================================\r\n\r\n/**\r\n * SimulationControls - Playback controls for space simulation\r\n * \r\n * Provides comprehensive simulation time control following Astro UX patterns.\r\n * Designed for mission control and space operations applications.\r\n * \r\n * @example\r\n * ```tsx\r\n * // Basic usage\r\n * <SimulationControls\r\n *   isPlaying={isPlaying}\r\n *   onPlay={() => setIsPlaying(true)}\r\n *   onPause={() => setIsPlaying(false)}\r\n *   onStop={handleReset}\r\n * />\r\n * \r\n * // Full featured\r\n * <SimulationControls\r\n *   isPlaying={isPlaying}\r\n *   onPlay={handlePlay}\r\n *   onPause={handlePause}\r\n *   onStop={handleStop}\r\n *   onStepForward={handleStepForward}\r\n *   onStepBackward={handleStepBackward}\r\n *   currentTime={simulationTime}\r\n *   epoch={epoch}\r\n *   elapsedSeconds={elapsed}\r\n *   timeScale={timeScale}\r\n *   onTimeScaleChange={setTimeScale}\r\n *   showTimeScale\r\n *   showStepControls\r\n *   showElapsedTime\r\n * />\r\n * \r\n * // In AppBar center slot\r\n * <AppBar\r\n *   appName=\"Mission Control\"\r\n *   centerSlot={\r\n *     <SimulationControls\r\n *       compact\r\n *       isPlaying={isPlaying}\r\n *       onPlay={handlePlay}\r\n *       onPause={handlePause}\r\n *       currentTime={simTime}\r\n *     />\r\n *   }\r\n * />\r\n * ```\r\n */\r\nexport const SimulationControls = memo(function SimulationControls({\r\n  state,\r\n  isPlaying: isPlayingProp,\r\n  isPaused,\r\n  onPlay,\r\n  onPause,\r\n  onStop,\r\n  onStepForward,\r\n  onStepBackward,\r\n  currentTime: currentTimeProp,\r\n  epoch,\r\n  elapsedSeconds: elapsedSecondsProp,\r\n  showElapsedTime = true,\r\n  showCurrentTime = true,\r\n  showDate = true,\r\n  timeScale = 1,\r\n  onTimeScaleChange,\r\n  timeScalePresets = DEFAULT_TIME_SCALE_PRESETS,\r\n  showTimeScale = true,\r\n  stepSize = 60,\r\n  onStepSizeChange: _onStepSizeChange,\r\n  stepSizePresets: _stepSizePresets = DEFAULT_STEP_SIZE_PRESETS,\r\n  showStepControls = true,\r\n  compact = false,\r\n  small = false,\r\n  className = '',\r\n  disabled = false,\r\n  showStatus = true,\r\n  label,\r\n}: SimulationControlsProps): React.ReactElement {\r\n  const { tokens, theme } = useTheme();\r\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\r\n  \r\n  // Derive playing state from props\r\n  const isPlaying = useMemo(() => {\r\n    if (state) return state === 'playing';\r\n    return isPlayingProp ?? false;\r\n  }, [state, isPlayingProp]);\r\n  \r\n  const isStopped = useMemo(() => {\r\n    if (state) return state === 'stopped';\r\n    return !isPlayingProp && !isPaused;\r\n  }, [state, isPlayingProp, isPaused]);\r\n  \r\n  // Parse current time\r\n  const currentTime = useMemo(() => {\r\n    if (!currentTimeProp) return undefined;\r\n    return typeof currentTimeProp === 'string' ? new Date(currentTimeProp) : currentTimeProp;\r\n  }, [currentTimeProp]);\r\n  \r\n  // Calculate elapsed seconds\r\n  const elapsedSeconds = useMemo(() => {\r\n    if (elapsedSecondsProp !== undefined) return elapsedSecondsProp;\r\n    if (currentTime && epoch) {\r\n      const epochDate = typeof epoch === 'string' ? new Date(epoch) : epoch;\r\n      return (currentTime.getTime() - epochDate.getTime()) / 1000;\r\n    }\r\n    return undefined;\r\n  }, [elapsedSecondsProp, currentTime, epoch]);\r\n  \r\n  // Handle play/pause toggle\r\n  const handlePlayPause = useCallback(() => {\r\n    if (isPlaying) {\r\n      onPause?.();\r\n    } else {\r\n      onPlay?.();\r\n    }\r\n  }, [isPlaying, onPlay, onPause]);\r\n  \r\n  // Handle keyboard shortcuts\r\n  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {\r\n    if (disabled) return;\r\n    \r\n    switch (e.key) {\r\n      case ' ':\r\n        e.preventDefault();\r\n        handlePlayPause();\r\n        break;\r\n      case 'Escape':\r\n        e.preventDefault();\r\n        onStop?.();\r\n        break;\r\n      case 'ArrowRight':\r\n        e.preventDefault();\r\n        onStepForward?.();\r\n        break;\r\n      case 'ArrowLeft':\r\n        e.preventDefault();\r\n        onStepBackward?.();\r\n        break;\r\n    }\r\n  }, [disabled, handlePlayPause, onStop, onStepForward, onStepBackward]);\r\n  \r\n  return (\r\n    <div\r\n      className={classNames('zendir-simulation-controls', className)}\r\n      role=\"group\"\r\n      aria-label={label || 'Simulation Controls'}\r\n      onKeyDown={handleKeyDown}\r\n      tabIndex={0}\r\n      style={{\r\n        display: 'flex',\r\n        alignItems: 'center',\r\n        gap: compact ? tokens.spacing.sm : tokens.spacing.md,\r\n        padding: compact \r\n          ? `${tokens.spacing.xs} ${tokens.spacing.sm}`\r\n          : `${tokens.spacing.sm} ${tokens.spacing.md}`,\r\n        backgroundColor: isTransparentTheme \r\n          ? 'rgba(0,0,0,0.3)' \r\n          : tokens.colors.background.surface,\r\n        ...(isTransparentTheme && { \r\n          backdropFilter: 'blur(12px)', \r\n          WebkitBackdropFilter: 'blur(12px)' as const \r\n        }),\r\n        ...(tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` }),\r\n        borderRadius: tokens.borderRadius.lg,\r\n        outline: 'none',\r\n        transition: tokens.animation.fast,\r\n      }}\r\n    >\r\n      {/* Time Display (if showing time) */}\r\n      {(showCurrentTime || showElapsedTime) && !compact && (\r\n        <SimulationTimeDisplay\r\n          currentTime={currentTime}\r\n          elapsedSeconds={elapsedSeconds}\r\n          showElapsed={showElapsedTime}\r\n          showCurrent={showCurrentTime}\r\n          showDate={showDate}\r\n          isPlaying={isPlaying}\r\n          tokens={tokens}\r\n          small={small}\r\n        />\r\n      )}\r\n      \r\n      {/* Compact time display */}\r\n      {compact && currentTime && (\r\n        <div\r\n          style={{\r\n            display: 'flex',\r\n            alignItems: 'center',\r\n            gap: 8,\r\n          }}\r\n        >\r\n          {showDate && (\r\n            <span\r\n              style={{\r\n                fontSize: tokens.typography.fontSize.xs,\r\n                fontFamily: tokens.typography.fontFamily.mono,\r\n                color: tokens.colors.text.tertiary,\r\n                ...tabularNumsStyle,\r\n              }}\r\n            >\r\n              {formatDateDisplay(currentTime)}\r\n            </span>\r\n          )}\r\n          <span\r\n            style={{\r\n              fontSize: tokens.typography.fontSize.lg,\r\n              fontWeight: tokens.typography.fontWeight.bold, // Bold (700) to match MissionClock\r\n              fontFamily: tokens.typography.fontFamily.mono,\r\n              color: tokens.colors.text.primary,\r\n              ...tabularNumsStyle,\r\n            }}\r\n          >\r\n            {formatTimeDisplay(currentTime)}\r\n          </span>\r\n          {showStatus && (\r\n            <span\r\n              style={{\r\n                fontSize: tokens.typography.fontSize.xs,\r\n                fontWeight: tokens.typography.fontWeight.medium,\r\n                color: isPlaying ? safeAccentText(tokens.colors.accent.primary) : tokens.colors.status.standby,\r\n                textTransform: 'uppercase',\r\n                display: 'flex',\r\n                alignItems: 'center',\r\n                gap: 4,\r\n              }}\r\n            >\r\n              {isPlaying && (\r\n                <span\r\n                  style={{\r\n                    width: 6,\r\n                    height: 6,\r\n                    borderRadius: '50%',\r\n                    backgroundColor: tokens.colors.accent.primary,\r\n                  }}\r\n                />\r\n              )}\r\n              SIM\r\n            </span>\r\n          )}\r\n        </div>\r\n      )}\r\n      \r\n      {/* Separator */}\r\n      {((showCurrentTime || showElapsedTime) || (compact && currentTime)) && (\r\n        <div\r\n          style={{\r\n            width: 1,\r\n            height: 24,\r\n            backgroundColor: tokens.colors.border.muted,\r\n          }}\r\n        />\r\n      )}\r\n      \r\n      {/* Transport Controls */}\r\n      <div\r\n        style={{\r\n          display: 'flex',\r\n          alignItems: 'center',\r\n          gap: 4,\r\n        }}\r\n      >\r\n        {/* Step Backward */}\r\n        {showStepControls && (\r\n          <ControlButton\r\n            icon=\"skip-previous\"\r\n            label={`Step backward ${formatStepSize(stepSize)}`}\r\n            onClick={onStepBackward}\r\n            disabled={disabled || !onStepBackward}\r\n            tokens={tokens}\r\n            small={small}\r\n          />\r\n        )}\r\n        \r\n        {/* Stop */}\r\n        <ControlButton\r\n          icon=\"stop\"\r\n          label=\"Stop / Reset\"\r\n          onClick={onStop}\r\n          disabled={disabled || !onStop}\r\n          danger={!isStopped}\r\n          tokens={tokens}\r\n          small={small}\r\n        />\r\n        \r\n        {/* Play/Pause */}\r\n        <Tooltip content={isPlaying ? 'Pause (Space)' : 'Play (Space)'} placement=\"bottom\">\r\n          <button\r\n            onClick={handlePlayPause}\r\n            disabled={disabled}\r\n            aria-label={isPlaying ? 'Pause simulation' : 'Play simulation'}\r\n            style={{\r\n              display: 'flex',\r\n              alignItems: 'center',\r\n              justifyContent: 'center',\r\n              width: small ? 36 : 44,\r\n              height: small ? 36 : 44,\r\n              padding: 0,\r\n              border: isPlaying ? `2px solid ${tokens.colors.accent.primary}` : 'none',\r\n              borderRadius: '50%',\r\n              // Use accent primary for both states - playing has outline style\r\n              backgroundColor: isPlaying \r\n                ? 'rgba(138, 43, 226, 0.15)' // Subtle purple fill when playing\r\n                : tokens.colors.accent.primary,\r\n              color: isPlaying ? safeAccentText(tokens.colors.accent.primary) : '#ffffff',\r\n              cursor: disabled ? 'not-allowed' : 'pointer',\r\n              transition: 'all 0.15s ease',\r\n              opacity: disabled ? 0.5 : 1,\r\n              boxShadow: isPlaying \r\n                ? `0 0 16px ${tokens.colors.accent.primary}50`\r\n                : `0 0 8px ${tokens.colors.accent.primary}40`,\r\n            }}\r\n            onMouseEnter={(e) => {\r\n              if (!disabled) {\r\n                e.currentTarget.style.transform = 'scale(1.05)';\r\n              }\r\n            }}\r\n            onMouseLeave={(e) => {\r\n              e.currentTarget.style.transform = 'scale(1)';\r\n            }}\r\n          >\r\n            <AstroIcon \r\n              name={isPlaying ? 'pause' : 'play-arrow'} \r\n              size={small ? 18 : 22} \r\n              color={isPlaying ? tokens.colors.accent.primary : '#ffffff'}\r\n            />\r\n          </button>\r\n        </Tooltip>\r\n        \r\n        {/* Step Forward */}\r\n        {showStepControls && (\r\n          <ControlButton\r\n            icon=\"skip-next\"\r\n            label={`Step forward ${formatStepSize(stepSize)}`}\r\n            onClick={onStepForward}\r\n            disabled={disabled || !onStepForward}\r\n            tokens={tokens}\r\n            small={small}\r\n          />\r\n        )}\r\n      </div>\r\n      \r\n      {/* Time Scale */}\r\n      {showTimeScale && (\r\n        <>\r\n          <div\r\n            style={{\r\n              width: 1,\r\n              height: 24,\r\n              backgroundColor: tokens.colors.border.muted,\r\n            }}\r\n          />\r\n          <TimeScaleSelector\r\n            value={timeScale}\r\n            presets={timeScalePresets}\r\n            onChange={onTimeScaleChange}\r\n            disabled={disabled || !onTimeScaleChange}\r\n            tokens={tokens}\r\n            small={small}\r\n          />\r\n        </>\r\n      )}\r\n    </div>\r\n  );\r\n});\r\n\r\n// ============================================================================\r\n// Convenience Components\r\n// ============================================================================\r\n\r\n/**\r\n * MiniSimulationControls - Ultra-compact controls for AppBar\r\n */\r\nexport interface MiniSimulationControlsProps {\r\n  isPlaying?: boolean;\r\n  onPlay?: () => void;\r\n  onPause?: () => void;\r\n  onStop?: () => void;\r\n  timeScale?: number;\r\n  onTimeScaleChange?: (scale: number) => void;\r\n  disabled?: boolean;\r\n  className?: string;\r\n}\r\n\r\nexport const MiniSimulationControls = memo(function MiniSimulationControls({\r\n  isPlaying = false,\r\n  onPlay,\r\n  onPause,\r\n  onStop,\r\n  timeScale = 1,\r\n  onTimeScaleChange,\r\n  disabled = false,\r\n  className = '',\r\n}: MiniSimulationControlsProps): React.ReactElement {\r\n  return (\r\n    <SimulationControls\r\n      isPlaying={isPlaying}\r\n      onPlay={onPlay}\r\n      onPause={onPause}\r\n      onStop={onStop}\r\n      timeScale={timeScale}\r\n      onTimeScaleChange={onTimeScaleChange}\r\n      disabled={disabled}\r\n      compact\r\n      small\r\n      showCurrentTime={false}\r\n      showElapsedTime={false}\r\n      showDate={false}\r\n      showStepControls={false}\r\n      showTimeScale={Boolean(onTimeScaleChange)}\r\n      className={className}\r\n    />\r\n  );\r\n});\r\n\r\n/**\r\n * SimulationControlsWithClock - Controls combined with MissionClock\r\n */\r\nexport interface SimulationControlsWithClockProps extends Omit<SimulationControlsProps, 'showCurrentTime' | 'showElapsedTime'> {\r\n  /** Clock format */\r\n  clockFormat?: '12h' | '24h';\r\n  /** Timezone label */\r\n  timezone?: string;\r\n}\r\n\r\nexport const SimulationControlsWithClock = memo(function SimulationControlsWithClock({\r\n  clockFormat: _clockFormat = '24h',\r\n  timezone = 'SIM',\r\n  ...props\r\n}: SimulationControlsWithClockProps): React.ReactElement {\r\n  return (\r\n    <SimulationControls\r\n      {...props}\r\n      showCurrentTime\r\n      showElapsedTime\r\n      showDate\r\n      label={`Simulation Controls - ${timezone}`}\r\n    />\r\n  );\r\n});\r\n\r\nexport default SimulationControls;\r\n"],"names":["ControlButton","TimeScaleSelector","SimulationTimeDisplay","SimulationControls","MiniSimulationControls","SimulationControlsWithClock"],"mappings":"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"}

package/dist/react/astro/StatusIndicator.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+import { StatusLevel } from '../utils';
+
+export type StatusVariant = StatusLevel;
+export interface StatusIndicatorProps {
+    /** Status variant - determines color and shape */
+    status: StatusVariant;
+    /** Status label text */
+    label?: string;
+    /** Smaller size variant */
+    small?: boolean;
+    /** Show pulse animation for active states */
+    pulse?: boolean;
+    /** Show border (required for light theme per Astro UX) */
+    bordered?: boolean;
+    /** Custom className */
+    className?: string;
+    /** Click handler */
+    onClick?: () => void;
+}
+/**
+ * StatusIndicator - Pure React status component
+ *
+ * Displays standardized status symbols following Astro UX design patterns.
+ * Uses dual-coding (color + shape) for WCAG 2.1 AA accessibility compliance.
+ *
+ * @example
+ * ```tsx
+ * <StatusIndicator status="normal" label="Power System" />
+ * <StatusIndicator status="caution" label="Battery Low" />
+ * <StatusIndicator status="critical" label="Comm Loss" pulse />
+ * ```
+ */
+export declare const StatusIndicator: React.NamedExoticComponent<StatusIndicatorProps>;

package/dist/react/astro/StatusIndicator.js

@@ -0,0 +1,189 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { classNames } from "../utils/index.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+const STATUS_COLORS_DARK = {
+  off: "#a4abb6",
+  standby: "#2dccff",
+  normal: "#56f000",
+  caution: "#fce83a",
+  serious: "#ffb302",
+  critical: "#ff3838"
+};
+const STATUS_COLORS_LIGHT_FILL = {
+  off: "#7b8089",
+  standby: "#64d9ff",
+  normal: "#00e200",
+  caution: "#fad800",
+  serious: "#ffaf3d",
+  critical: "#ff2a04"
+};
+const STATUS_COLORS_LIGHT_BORDER = {
+  off: "#3c3e42",
+  standby: "#285766",
+  normal: "#005a00",
+  caution: "#645600",
+  serious: "#664618",
+  critical: "#661102"
+};
+const STATUS_ARIA_LABELS = {
+  off: "Status: Off",
+  standby: "Status: Standby",
+  normal: "Status: Normal",
+  caution: "Status: Caution",
+  serious: "Status: Serious",
+  critical: "Status: Critical"
+};
+const renderStatusShape = (status, size, fillColor, borderColor) => {
+  const hasBorder = !!borderColor;
+  const strokeWidth = hasBorder ? 1.5 : 0;
+  switch (status) {
+    case "off":
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: hasBorder ? 2.5 : 3, fill: fillColor, stroke: borderColor, strokeWidth }) });
+    case "standby":
+      return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 12 12", width: size, height: size, children: [
+        /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3.5", fill: "none", stroke: fillColor, strokeWidth: "2" }),
+        hasBorder && /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "4.75", fill: "none", stroke: borderColor, strokeWidth })
+      ] });
+    case "normal":
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: hasBorder ? 4.5 : 5, fill: fillColor, stroke: borderColor, strokeWidth }) });
+    case "caution":
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, children: /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: hasBorder ? 1.5 : 1,
+          y: hasBorder ? 1.5 : 1,
+          width: hasBorder ? 9 : 10,
+          height: hasBorder ? 9 : 10,
+          fill: fillColor,
+          stroke: borderColor,
+          strokeWidth
+        }
+      ) });
+    case "serious":
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, children: /* @__PURE__ */ jsx(
+        "polygon",
+        {
+          points: "6,1 11,6 6,11 1,6",
+          fill: fillColor,
+          stroke: borderColor,
+          strokeWidth
+        }
+      ) });
+    case "critical":
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, children: /* @__PURE__ */ jsx(
+        "polygon",
+        {
+          points: "6,11 1,2 11,2",
+          fill: fillColor,
+          stroke: borderColor,
+          strokeWidth
+        }
+      ) });
+    default:
+      return null;
+  }
+};
+const StatusIndicator = memo(function StatusIndicator2({
+  status,
+  label,
+  small = false,
+  pulse = false,
+  bordered,
+  className = "",
+  onClick
+}) {
+  const { tokens, mode } = useTheme();
+  const isLightTheme = mode === "light";
+  const showBorder = bordered ?? isLightTheme;
+  const fillColor = isLightTheme ? STATUS_COLORS_LIGHT_FILL[status] : tokens.colors.status[status] || STATUS_COLORS_DARK[status];
+  const borderColor = showBorder ? STATUS_COLORS_LIGHT_BORDER[status] : void 0;
+  const size = small ? 10 : 14;
+  const shouldPulse = pulse || status === "critical";
+  const isCircle = status === "off" || status === "standby" || status === "normal";
+  const handleKeyDown = (e) => {
+    if (onClick && (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      onClick();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames("zendir-status-indicator", className),
+      onClick,
+      onKeyDown: onClick ? handleKeyDown : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      role: "status",
+      "aria-label": `${STATUS_ARIA_LABELS[status]}${label ? `: ${label}` : ""}`,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: small ? 4 : 6,
+        cursor: onClick ? "pointer" : "default",
+        outline: "none"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            style: {
+              position: "relative",
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: size,
+              height: size,
+              flexShrink: 0
+            },
+            children: [
+              shouldPulse && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    position: "absolute",
+                    inset: -3,
+                    borderRadius: isCircle ? "50%" : 0,
+                    backgroundColor: fillColor,
+                    opacity: 0.3,
+                    animation: "statusPulse 2s ease-out infinite"
+                  }
+                }
+              ),
+              renderStatusShape(status, size, fillColor, borderColor)
+            ]
+          }
+        ),
+        label && /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: small ? tokens.typography.fontSize.xs : tokens.typography.fontSize.sm,
+              fontWeight: tokens.typography.fontWeight.medium,
+              color: "inherit",
+              whiteSpace: "nowrap",
+              letterSpacing: tokens.typography.letterSpacing.normal
+            },
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes statusPulse {
+          0% { transform: scale(1); opacity: 0.3; }
+          50% { transform: scale(1.5); opacity: 0; }
+          100% { transform: scale(1); opacity: 0; }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .zendir-status-indicator span[style*="statusPulse"] {
+            animation: none !important;
+          }
+        }
+      ` })
+      ]
+    }
+  );
+});
+export {
+  StatusIndicator
+};
+//# sourceMappingURL=StatusIndicator.js.map

package/dist/react/astro/StatusIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIndicator.js","sources":["../../../src/react/astro/StatusIndicator.tsx"],"sourcesContent":["/**\n * @zendir/ui - StatusIndicator Component (Pure React)\n * \n * Displays status symbols following Astro UX Design System patterns.\n * Uses the same 6-level status system: off, standby, normal, caution, serious, critical.\n * \n * Shapes per Astro UX (https://www.astrouxds.com/patterns/status-system/):\n * - Off: Circle (grey)\n * - Standby: Ring (cyan)\n * - Normal: Circle (green)\n * - Caution: Square (yellow)\n * - Serious: Diamond (orange)\n * - Critical: Triangle pointing down (red)\n * \n * Features:\n * - Dual coding (color + shape) for accessibility (WCAG 2.1 AA)\n * - Animated pulse for active states\n * - Light theme border support\n * - Theme-connected via useTheme()\n * - Keyboard accessible\n * - Screen reader support\n */\n\nimport React, { memo } from 'react';\nimport { useTheme } from '../theme';\nimport { classNames, type StatusLevel } from '../utils';\n\nexport type StatusVariant = StatusLevel;\n\nexport interface StatusIndicatorProps {\n  /** Status variant - determines color and shape */\n  status: StatusVariant;\n  /** Status label text */\n  label?: string;\n  /** Smaller size variant */\n  small?: boolean;\n  /** Show pulse animation for active states */\n  pulse?: boolean;\n  /** Show border (required for light theme per Astro UX) */\n  bordered?: boolean;\n  /** Custom className */\n  className?: string;\n  /** Click handler */\n  onClick?: () => void;\n}\n\n/**\n * Astro UX Status Colors (Dark Theme)\n * https://www.astrouxds.com/patterns/status-system/\n */\nconst STATUS_COLORS_DARK: Record<StatusVariant, string> = {\n  off: '#a4abb6',\n  standby: '#2dccff',\n  normal: '#56f000',\n  caution: '#fce83a',\n  serious: '#ffb302',\n  critical: '#ff3838',\n};\n\n/**\n * Astro UX Status Colors (Light Theme - Fill)\n * Requires border for WCAG AA compliance\n */\nconst STATUS_COLORS_LIGHT_FILL: Record<StatusVariant, string> = {\n  off: '#7b8089',\n  standby: '#64d9ff',\n  normal: '#00e200',\n  caution: '#fad800',\n  serious: '#ffaf3d',\n  critical: '#ff2a04',\n};\n\n/**\n * Astro UX Status Colors (Light Theme - Border)\n * Required for light backgrounds per Astro UX\n */\nconst STATUS_COLORS_LIGHT_BORDER: Record<StatusVariant, string> = {\n  off: '#3c3e42',\n  standby: '#285766',\n  normal: '#005a00',\n  caution: '#645600',\n  serious: '#664618',\n  critical: '#661102',\n};\n\nconst STATUS_ARIA_LABELS: Record<StatusVariant, string> = {\n  off: 'Status: Off',\n  standby: 'Status: Standby',\n  normal: 'Status: Normal',\n  caution: 'Status: Caution',\n  serious: 'Status: Serious',\n  critical: 'Status: Critical',\n};\n\n/**\n * Render Astro-compliant status shape\n * Shapes per https://www.astrouxds.com/patterns/status-system/\n */\nconst renderStatusShape = (\n  status: StatusVariant,\n  size: number,\n  fillColor: string,\n  borderColor?: string,\n): React.ReactNode => {\n  const hasBorder = !!borderColor;\n  const strokeWidth = hasBorder ? 1.5 : 0;\n  \n  switch (status) {\n    // Small filled circle: off\n    case 'off':\n      return (\n        <svg viewBox=\"0 0 12 12\" width={size} height={size}>\n          <circle cx=\"6\" cy=\"6\" r={hasBorder ? 2.5 : 3} fill={fillColor} stroke={borderColor} strokeWidth={strokeWidth} />\n        </svg>\n      );\n    \n    // Ring (donut): standby\n    case 'standby':\n      return (\n        <svg viewBox=\"0 0 12 12\" width={size} height={size}>\n          <circle cx=\"6\" cy=\"6\" r=\"3.5\" fill=\"none\" stroke={fillColor} strokeWidth=\"2\" />\n          {hasBorder && <circle cx=\"6\" cy=\"6\" r=\"4.75\" fill=\"none\" stroke={borderColor} strokeWidth={strokeWidth} />}\n        </svg>\n      );\n    \n    // Filled circle: normal\n    case 'normal':\n      return (\n        <svg viewBox=\"0 0 12 12\" width={size} height={size}>\n          <circle cx=\"6\" cy=\"6\" r={hasBorder ? 4.5 : 5} fill={fillColor} stroke={borderColor} strokeWidth={strokeWidth} />\n        </svg>\n      );\n    \n    // Square shape: caution\n    case 'caution':\n      return (\n        <svg viewBox=\"0 0 12 12\" width={size} height={size}>\n          <rect\n            x={hasBorder ? 1.5 : 1}\n            y={hasBorder ? 1.5 : 1}\n            width={hasBorder ? 9 : 10}\n            height={hasBorder ? 9 : 10}\n            fill={fillColor}\n            stroke={borderColor}\n            strokeWidth={strokeWidth}\n          />\n        </svg>\n      );\n    \n    // Diamond shape: serious (rotated square)\n    case 'serious':\n      return (\n        <svg viewBox=\"0 0 12 12\" width={size} height={size}>\n          <polygon\n            points=\"6,1 11,6 6,11 1,6\"\n            fill={fillColor}\n            stroke={borderColor}\n            strokeWidth={strokeWidth}\n          />\n        </svg>\n      );\n    \n    // Triangle pointing down: critical\n    case 'critical':\n      return (\n        <svg viewBox=\"0 0 12 12\" width={size} height={size}>\n          <polygon\n            points=\"6,11 1,2 11,2\"\n            fill={fillColor}\n            stroke={borderColor}\n            strokeWidth={strokeWidth}\n          />\n        </svg>\n      );\n    \n    default:\n      return null;\n  }\n};\n\n/**\n * StatusIndicator - Pure React status component\n * \n * Displays standardized status symbols following Astro UX design patterns.\n * Uses dual-coding (color + shape) for WCAG 2.1 AA accessibility compliance.\n * \n * @example\n * ```tsx\n * <StatusIndicator status=\"normal\" label=\"Power System\" />\n * <StatusIndicator status=\"caution\" label=\"Battery Low\" />\n * <StatusIndicator status=\"critical\" label=\"Comm Loss\" pulse />\n * ```\n */\nexport const StatusIndicator = memo(function StatusIndicator({\n  status,\n  label,\n  small = false,\n  pulse = false,\n  bordered,\n  className = '',\n  onClick,\n}: StatusIndicatorProps): React.ReactElement {\n  const { tokens, mode } = useTheme();\n  \n  // Determine if we need borders (light theme or explicitly requested)\n  const isLightTheme = mode === 'light';\n  const showBorder = bordered ?? isLightTheme;\n  \n  // Get colors from theme or use Astro defaults\n  const fillColor = isLightTheme \n    ? STATUS_COLORS_LIGHT_FILL[status]\n    : (tokens.colors.status[status] || STATUS_COLORS_DARK[status]);\n  const borderColor = showBorder ? STATUS_COLORS_LIGHT_BORDER[status] : undefined;\n  \n  const size = small ? 10 : 14;\n  const shouldPulse = pulse || status === 'critical';\n  const isCircle = status === 'off' || status === 'standby' || status === 'normal';\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (onClick && (e.key === 'Enter' || e.key === ' ')) {\n      e.preventDefault();\n      onClick();\n    }\n  };\n\n  return (\n    <div\n      className={classNames('zendir-status-indicator', className)}\n      onClick={onClick}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n      tabIndex={onClick ? 0 : undefined}\n      role=\"status\"\n      aria-label={`${STATUS_ARIA_LABELS[status]}${label ? `: ${label}` : ''}`}\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: small ? 4 : 6,\n        cursor: onClick ? 'pointer' : 'default',\n        outline: 'none',\n      }}\n    >\n      {/* Status symbol with dual-coding */}\n      <span\n        style={{\n          position: 'relative',\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          width: size,\n          height: size,\n          flexShrink: 0,\n        }}\n      >\n        {/* Pulse animation ring */}\n        {shouldPulse && (\n          <span\n            style={{\n              position: 'absolute',\n              inset: -3,\n              borderRadius: isCircle ? '50%' : 0,\n              backgroundColor: fillColor,\n              opacity: 0.3,\n              animation: 'statusPulse 2s ease-out infinite',\n            }}\n          />\n        )}\n        \n        {/* Astro-compliant status shape */}\n        {renderStatusShape(status, size, fillColor, borderColor)}\n      </span>\n\n      {/* Label with theme typography */}\n      {label && (\n        <span\n          style={{\n            fontSize: small ? tokens.typography.fontSize.xs : tokens.typography.fontSize.sm,\n            fontWeight: tokens.typography.fontWeight.medium,\n            color: 'inherit',\n            whiteSpace: 'nowrap',\n            letterSpacing: tokens.typography.letterSpacing.normal,\n          }}\n        >\n          {label}\n        </span>\n      )}\n\n      {/* Keyframe animation — paused when prefers-reduced-motion is active */}\n      <style>{`\n        @keyframes statusPulse {\n          0% { transform: scale(1); opacity: 0.3; }\n          50% { transform: scale(1.5); opacity: 0; }\n          100% { transform: scale(1); opacity: 0; }\n        }\n        @media (prefers-reduced-motion: reduce) {\n          .zendir-status-indicator span[style*=\"statusPulse\"] {\n            animation: none !important;\n          }\n        }\n      `}</style>\n    </div>\n  );\n});\n"],"names":["StatusIndicator"],"mappings":"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"}

package/dist/react/astro/UnifiedTimeline.d.ts

@@ -0,0 +1,106 @@
+import { default as React } from 'react';
+
+export type TimelineViewMode = 'list' | 'chart' | 'scatter';
+export interface TimelineEvent {
+    /** Unique identifier */
+    id: string;
+    /** Event title */
+    title: string;
+    /** Start time */
+    start: Date;
+    /** End time (optional for point events) */
+    end?: Date;
+    /** Track/category this event belongs to */
+    track?: string;
+    /** Status for coloring */
+    status?: 'off' | 'standby' | 'normal' | 'caution' | 'serious' | 'critical';
+    /** Badge text */
+    badge?: string;
+    /** Badge variant - uses AstroUXDS status terms */
+    badgeVariant?: 'default' | 'primary' | 'normal' | 'caution' | 'serious' | 'critical';
+    /** Subtitle/description */
+    subtitle?: string;
+    /** Additional timestamps to display in list view */
+    timestamps?: {
+        label: string;
+        value: string;
+        status?: 'normal' | 'standby' | 'caution' | 'serious' | 'critical' | 'off';
+    }[];
+    /** Arguments/metadata */
+    arguments?: Record<string, string | number | boolean>;
+    /** Custom metadata */
+    metadata?: Record<string, unknown>;
+}
+export interface TimelineTrackDef {
+    /** Track identifier */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Track height in pixels */
+    height?: number;
+}
+export type TimeFormat = 'relative' | 'absolute' | 'utc';
+export interface TimelineFilter {
+    /** Filter by track IDs */
+    tracks?: string[];
+    /** Filter by status */
+    status?: TimelineEvent['status'][];
+    /** Search query */
+    search?: string;
+}
+export interface UnifiedTimelineProps {
+    /** Timeline title */
+    title?: string;
+    /** Events to display */
+    events: TimelineEvent[];
+    /** Track definitions for chart view */
+    tracks?: TimelineTrackDef[];
+    /** Start time for chart view (auto-calculated if not provided) */
+    start?: Date;
+    /** End time for chart view (auto-calculated if not provided) */
+    end?: Date;
+    /** Default view mode */
+    defaultView?: TimelineViewMode;
+    /** Controlled view mode */
+    viewMode?: TimelineViewMode;
+    /** View mode change handler */
+    onViewModeChange?: (mode: TimelineViewMode) => void;
+    /** Event click handler */
+    onEventClick?: (event: TimelineEvent) => void;
+    /** Show view toggle */
+    showViewToggle?: boolean;
+    /** Max height for scrollable container */
+    maxHeight?: string | number;
+    /** Track height for chart view */
+    trackHeight?: number;
+    /** Custom className */
+    className?: string;
+    /** Time format for axis labels */
+    timeFormat?: TimeFormat;
+    /** Enable zoom controls */
+    zoomable?: boolean;
+    /** Initial zoom level (1 = 100%) */
+    initialZoom?: number;
+    /** Show filter controls */
+    showFilters?: boolean;
+    /** Controlled filter state */
+    filter?: TimelineFilter;
+    /** Filter change handler */
+    onFilterChange?: (filter: TimelineFilter) => void;
+    /** Show event count badge */
+    showCount?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Reference time for relative format (defaults to start of range) */
+    referenceTime?: Date;
+    /** Show playhead indicator at current time */
+    showPlayhead?: boolean;
+    /** Custom playhead time (for simulation mode) */
+    playheadTime?: Date;
+    /** Callback when playhead time changes (for interactive playhead) */
+    onPlayheadChange?: (time: Date) => void;
+    /** Show day markers at midnight */
+    showDayMarkers?: boolean;
+}
+export declare const UnifiedTimeline: React.NamedExoticComponent<UnifiedTimelineProps>;
+export default UnifiedTimeline;