@zendir/ui 0.5.0 → 0.6.1

package/dist/react/astro/SimulationControls.js

@@ -1,668 +1,614 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { memo, useMemo, useCallback, useState } from "react";
 import { useTheme } from "../theme/ThemeProvider.js";
-import { tabularNumsStyle, safeAccentText, classNames } from "../utils/index.js";
-import { AstroIcon } from "../core/display/AstroIcon.js";
+import { classNames, safeAccentText, tabularNumsStyle } from "../utils/index.js";
 import { Tooltip } from "../core/overlays/Tooltip.js";
-const DEFAULT_TIME_SCALE_PRESETS = [0.1, 0.25, 0.5, 1, 2, 5, 10, 60, 3600];
-const DEFAULT_STEP_SIZE_PRESETS = [1, 5, 10, 30, 60, 300, 600, 3600];
+import { AstroIcon } from "../core/display/AstroIcon.js";
+import { memo, useCallback, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/astro/SimulationControls.tsx
+/**
+* @zendir/ui - SimulationControls Component
+*
+* Space operations simulation playback controls following Astro UX patterns.
+* Provides play/pause/stop/step controls for simulation time management.
+*
+* Features:
+* - Play/Pause toggle with visual state feedback
+* - Stop (reset) functionality
+* - Step forward/backward controls
+* - Time scale (playback rate) adjustment
+* - Simulation time display integration
+* - AOS/LOS timer integration
+* - Keyboard accessibility
+* - AstroUXDS compliant styling
+*
+* Space Operations Terminology:
+* - SIM: Simulation mode indicator
+* - MET: Mission Elapsed Time
+* - Epoch: Simulation start time (t=0)
+* - Time Scale: Playback speed multiplier
+*
+* @example
+* ```tsx
+* import { SimulationControls } from '@zendir/ui/react';
+*
+* <SimulationControls
+*   isPlaying={isPlaying}
+*   onPlay={handlePlay}
+*   onPause={handlePause}
+*   onStop={handleStop}
+*   timeScale={1}
+*   onTimeScaleChange={setTimeScale}
+*   currentTime={simulationTime}
+*   epoch={epoch}
+* />
+* ```
+*/
+var DEFAULT_TIME_SCALE_PRESETS = [
+	.1,
+	.25,
+	.5,
+	1,
+	2,
+	5,
+	10,
+	60,
+	3600
+];
+var DEFAULT_STEP_SIZE_PRESETS = [
+	1,
+	5,
+	10,
+	30,
+	60,
+	300,
+	600,
+	3600
+];
+/**
+* Format elapsed time as DD:HH:MM:SS
+*/
 function formatElapsedTime(seconds) {
-  const absSeconds = Math.abs(seconds);
-  const days = Math.floor(absSeconds / 86400);
-  const hours = Math.floor(absSeconds % 86400 / 3600);
-  const mins = Math.floor(absSeconds % 3600 / 60);
-  const secs = Math.floor(absSeconds % 60);
-  const sign = seconds < 0 ? "-" : "";
-  if (days > 0) {
-    return `${sign}${days}:${hours.toString().padStart(2, "0")}:${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
-  }
-  return `${sign}${hours.toString().padStart(2, "0")}:${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+	const absSeconds = Math.abs(seconds);
+	const days = Math.floor(absSeconds / 86400);
+	const hours = Math.floor(absSeconds % 86400 / 3600);
+	const mins = Math.floor(absSeconds % 3600 / 60);
+	const secs = Math.floor(absSeconds % 60);
+	const sign = seconds < 0 ? "-" : "";
+	if (days > 0) return `${sign}${days}:${hours.toString().padStart(2, "0")}:${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+	return `${sign}${hours.toString().padStart(2, "0")}:${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
 }
+/**
+* Format time scale for display
+*/
 function formatTimeScale(scale) {
-  if (scale >= 3600) return `${scale / 3600}h/s`;
-  if (scale >= 60) return `${scale / 60}m/s`;
-  if (scale === 1) return "1×";
-  if (scale < 1) return `${scale}×`;
-  return `${scale}×`;
+	if (scale >= 3600) return `${scale / 3600}h/s`;
+	if (scale >= 60) return `${scale / 60}m/s`;
+	if (scale === 1) return "1×";
+	if (scale < 1) return `${scale}×`;
+	return `${scale}×`;
 }
+/**
+* Format step size for display
+*/
 function formatStepSize(seconds) {
-  if (seconds >= 3600) return `${seconds / 3600}h`;
-  if (seconds >= 60) return `${seconds / 60}m`;
-  return `${seconds}s`;
+	if (seconds >= 3600) return `${seconds / 3600}h`;
+	if (seconds >= 60) return `${seconds / 60}m`;
+	return `${seconds}s`;
 }
+/**
+* Format time for display
+*/
 function formatTimeDisplay(date) {
-  const hours = date.getUTCHours().toString().padStart(2, "0");
-  const mins = date.getUTCMinutes().toString().padStart(2, "0");
-  const secs = date.getUTCSeconds().toString().padStart(2, "0");
-  return `${hours}:${mins}:${secs}`;
+	return `${date.getUTCHours().toString().padStart(2, "0")}:${date.getUTCMinutes().toString().padStart(2, "0")}:${date.getUTCSeconds().toString().padStart(2, "0")}`;
 }
+/**
+* Format date for display
+*/
 function formatDateDisplay(date) {
-  const year = date.getUTCFullYear();
-  const month = (date.getUTCMonth() + 1).toString().padStart(2, "0");
-  const day = date.getUTCDate().toString().padStart(2, "0");
-  return `${year}-${month}-${day}`;
+	return `${date.getUTCFullYear()}-${(date.getUTCMonth() + 1).toString().padStart(2, "0")}-${date.getUTCDate().toString().padStart(2, "0")}`;
 }
-const ControlButton = memo(function ControlButton2({
-  icon,
-  label,
-  onClick,
-  active = false,
-  disabled = false,
-  danger = false,
-  tokens,
-  small = false
-}) {
-  const size = small ? 28 : 32;
-  const iconSize = small ? 14 : 16;
-  const baseColor = danger ? tokens.colors.status.critical : active ? tokens.colors.status.normal : tokens.colors.text.primary;
-  const bgColor = active ? `${tokens.colors.status.normal}25` : "rgba(255,255,255,0.14)";
-  return /* @__PURE__ */ jsx(Tooltip, { content: label, placement: "bottom", children: /* @__PURE__ */ jsx(
-    "button",
-    {
-      onClick,
-      disabled,
-      "aria-label": label,
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: size,
-        height: size,
-        padding: 0,
-        border: "none",
-        borderRadius: tokens.borderRadius.md,
-        backgroundColor: disabled ? "rgba(255,255,255,0.06)" : bgColor,
-        color: disabled ? tokens.colors.text.tertiary : baseColor,
-        cursor: disabled ? "not-allowed" : "pointer",
-        transition: "all 0.15s ease",
-        opacity: disabled ? 0.5 : 1
-      },
-      onMouseEnter: (e) => {
-        if (!disabled) {
-          e.currentTarget.style.backgroundColor = active ? `${tokens.colors.status.normal}35` : "rgba(255,255,255,0.22)";
-        }
-      },
-      onMouseLeave: (e) => {
-        if (!disabled) {
-          e.currentTarget.style.backgroundColor = bgColor;
-        }
-      },
-      children: /* @__PURE__ */ jsx(
-        AstroIcon,
-        {
-          name: icon,
-          size: iconSize,
-          color: disabled ? tokens.colors.text.tertiary : baseColor
-        }
-      )
-    }
-  ) });
+var ControlButton = memo(function ControlButton({ icon, label, onClick, active = false, disabled = false, danger = false, tokens, small = false }) {
+	const size = small ? 28 : 32;
+	const iconSize = small ? 14 : 16;
+	const baseColor = danger ? tokens.colors.status.critical : active ? tokens.colors.status.normal : tokens.colors.text.primary;
+	const bgColor = active ? `${tokens.colors.status.normal}25` : "rgba(255,255,255,0.14)";
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: label,
+		placement: "bottom",
+		children: /* @__PURE__ */ jsx("button", {
+			onClick,
+			disabled,
+			"aria-label": label,
+			style: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				width: size,
+				height: size,
+				padding: 0,
+				border: "none",
+				borderRadius: tokens.borderRadius.md,
+				backgroundColor: disabled ? "rgba(255,255,255,0.06)" : bgColor,
+				color: disabled ? tokens.colors.text.tertiary : baseColor,
+				cursor: disabled ? "not-allowed" : "pointer",
+				transition: "all 0.15s ease",
+				opacity: disabled ? .5 : 1
+			},
+			onMouseEnter: (e) => {
+				if (!disabled) e.currentTarget.style.backgroundColor = active ? `${tokens.colors.status.normal}35` : "rgba(255,255,255,0.22)";
+			},
+			onMouseLeave: (e) => {
+				if (!disabled) e.currentTarget.style.backgroundColor = bgColor;
+			},
+			children: /* @__PURE__ */ jsx(AstroIcon, {
+				name: icon,
+				size: iconSize,
+				color: disabled ? tokens.colors.text.tertiary : baseColor
+			})
+		})
+	});
 });
-const TimeScaleSelector = memo(function TimeScaleSelector2({
-  value,
-  presets,
-  onChange,
-  disabled = false,
-  tokens,
-  small = false
-}) {
-  const [isOpen, setIsOpen] = useState(false);
-  return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx(Tooltip, { content: "Time Scale / Playback Speed", placement: "bottom", children: /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: () => !disabled && setIsOpen(!isOpen),
-        disabled,
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: 4,
-          padding: small ? "4px 8px" : "6px 10px",
-          border: "none",
-          borderRadius: tokens.borderRadius.sm,
-          backgroundColor: "rgba(255,255,255,0.08)",
-          color: value !== 1 ? tokens.colors.status.caution : tokens.colors.text.secondary,
-          fontSize: small ? tokens.typography.fontSize.xxs : "0.6875rem",
-          // 10px/11px in rem
-          fontWeight: 700,
-          // AstroUXDS bold for time display (critical info)
-          fontFamily: tokens.typography.fontFamily.mono,
-          cursor: disabled ? "not-allowed" : "pointer",
-          transition: "all 0.15s ease",
-          opacity: disabled ? 0.5 : 1,
-          ...tabularNumsStyle
-        },
-        children: [
-          /* @__PURE__ */ jsx(AstroIcon, { name: "fast-forward", size: small ? 10 : 12, color: "inherit" }),
-          formatTimeScale(value)
-        ]
-      }
-    ) }),
-    isOpen && !disabled && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            position: "fixed",
-            inset: 0,
-            zIndex: 99
-          },
-          onClick: () => setIsOpen(false)
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            top: "100%",
-            left: "50%",
-            transform: "translateX(-50%)",
-            marginTop: 4,
-            padding: 4,
-            backgroundColor: tokens.colors.background.elevated,
-            border: `1px solid ${tokens.colors.border.default}`,
-            borderRadius: tokens.borderRadius.md,
-            boxShadow: tokens.shadows.lg,
-            zIndex: 100,
-            minWidth: 80
-          },
-          children: presets.map((scale) => /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => {
-                onChange == null ? void 0 : onChange(scale);
-                setIsOpen(false);
-              },
-              style: {
-                display: "block",
-                width: "100%",
-                padding: "6px 12px",
-                border: "none",
-                borderRadius: tokens.borderRadius.sm,
-                backgroundColor: value === scale ? tokens.colors.accent.primary : "transparent",
-                color: value === scale ? "#ffffff" : tokens.colors.text.secondary,
-                fontSize: "0.6875rem",
-                // 11px in rem
-                fontWeight: value === scale ? 500 : 400,
-                // AstroUXDS: 500 (medium) not 600
-                fontFamily: tokens.typography.fontFamily.mono,
-                textAlign: "center",
-                cursor: "pointer",
-                transition: "all 0.1s ease",
-                ...tabularNumsStyle
-              },
-              onMouseEnter: (e) => {
-                if (value !== scale) {
-                  e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.1)";
-                }
-              },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.backgroundColor = value === scale ? tokens.colors.accent.primary : "transparent";
-              },
-              children: formatTimeScale(scale)
-            },
-            scale
-          ))
-        }
-      )
-    ] })
-  ] });
+var TimeScaleSelector = memo(function TimeScaleSelector({ value, presets, onChange, disabled = false, tokens, small = false }) {
+	const [isOpen, setIsOpen] = useState(false);
+	return /* @__PURE__ */ jsxs("div", {
+		style: { position: "relative" },
+		children: [/* @__PURE__ */ jsx(Tooltip, {
+			content: "Time Scale / Playback Speed",
+			placement: "bottom",
+			children: /* @__PURE__ */ jsxs("button", {
+				onClick: () => !disabled && setIsOpen(!isOpen),
+				disabled,
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 4,
+					padding: small ? "4px 8px" : "6px 10px",
+					border: "none",
+					borderRadius: tokens.borderRadius.sm,
+					backgroundColor: "rgba(255,255,255,0.08)",
+					color: value !== 1 ? tokens.colors.status.caution : tokens.colors.text.secondary,
+					fontSize: small ? tokens.typography.fontSize.xxs : "0.6875rem",
+					fontWeight: 700,
+					fontFamily: tokens.typography.fontFamily.mono,
+					cursor: disabled ? "not-allowed" : "pointer",
+					transition: "all 0.15s ease",
+					opacity: disabled ? .5 : 1,
+					...tabularNumsStyle
+				},
+				children: [/* @__PURE__ */ jsx(AstroIcon, {
+					name: "fast-forward",
+					size: small ? 10 : 12,
+					color: "inherit"
+				}), formatTimeScale(value)]
+			})
+		}), isOpen && !disabled && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			style: {
+				position: "fixed",
+				inset: 0,
+				zIndex: 99
+			},
+			onClick: () => setIsOpen(false)
+		}), /* @__PURE__ */ jsx("div", {
+			style: {
+				position: "absolute",
+				top: "100%",
+				left: "50%",
+				transform: "translateX(-50%)",
+				marginTop: 4,
+				padding: 4,
+				backgroundColor: tokens.colors.background.elevated,
+				border: `1px solid ${tokens.colors.border.default}`,
+				borderRadius: tokens.borderRadius.md,
+				boxShadow: tokens.shadows.lg,
+				zIndex: 100,
+				minWidth: 80
+			},
+			children: presets.map((scale) => /* @__PURE__ */ jsx("button", {
+				onClick: () => {
+					onChange?.(scale);
+					setIsOpen(false);
+				},
+				style: {
+					display: "block",
+					width: "100%",
+					padding: "6px 12px",
+					border: "none",
+					borderRadius: tokens.borderRadius.sm,
+					backgroundColor: value === scale ? tokens.colors.accent.primary : "transparent",
+					color: value === scale ? "#ffffff" : tokens.colors.text.secondary,
+					fontSize: "0.6875rem",
+					fontWeight: value === scale ? 500 : 400,
+					fontFamily: tokens.typography.fontFamily.mono,
+					textAlign: "center",
+					cursor: "pointer",
+					transition: "all 0.1s ease",
+					...tabularNumsStyle
+				},
+				onMouseEnter: (e) => {
+					if (value !== scale) e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.1)";
+				},
+				onMouseLeave: (e) => {
+					e.currentTarget.style.backgroundColor = value === scale ? tokens.colors.accent.primary : "transparent";
+				},
+				children: formatTimeScale(scale)
+			}, scale))
+		})] })]
+	});
 });
-const SimulationTimeDisplay = memo(function SimulationTimeDisplay2({
-  currentTime,
-  elapsedSeconds,
-  showElapsed = true,
-  showCurrent = true,
-  showDate = false,
-  isPlaying = false,
-  tokens,
-  small = false
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        gap: 2,
-        padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`
-      },
-      children: [
-        showDate && currentTime && /* @__PURE__ */ jsx(
-          "span",
-          {
-            style: {
-              fontSize: tokens.typography.fontSize.xs,
-              fontFamily: tokens.typography.fontFamily.mono,
-              color: tokens.colors.text.tertiary,
-              ...tabularNumsStyle
-            },
-            children: formatDateDisplay(currentTime)
-          }
-        ),
-        showCurrent && currentTime && /* @__PURE__ */ jsx(
-          "span",
-          {
-            style: {
-              fontSize: small ? tokens.typography.fontSize.lg : tokens.typography.fontSize.xl,
-              fontWeight: tokens.typography.fontWeight.bold,
-              // Bold (700) to match MissionClock
-              fontFamily: tokens.typography.fontFamily.mono,
-              color: tokens.colors.text.primary,
-              ...tabularNumsStyle
-            },
-            children: formatTimeDisplay(currentTime)
-          }
-        ),
-        showElapsed && elapsedSeconds !== void 0 && /* @__PURE__ */ jsxs(
-          "span",
-          {
-            style: {
-              fontSize: tokens.typography.fontSize.sm,
-              fontFamily: tokens.typography.fontFamily.mono,
-              color: tokens.colors.status.caution,
-              ...tabularNumsStyle
-            },
-            children: [
-              "T",
-              elapsedSeconds >= 0 ? "+" : "",
-              formatElapsedTime(elapsedSeconds)
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "span",
-          {
-            style: {
-              fontSize: tokens.typography.fontSize.xs,
-              fontWeight: tokens.typography.fontWeight.medium,
-              color: isPlaying ? safeAccentText(tokens.colors.accent.primary) : tokens.colors.status.standby,
-              textTransform: "uppercase",
-              letterSpacing: tokens.typography.letterSpacing.wide,
-              display: "flex",
-              alignItems: "center",
-              gap: 4
-            },
-            children: [
-              isPlaying && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    width: 6,
-                    height: 6,
-                    borderRadius: "50%",
-                    backgroundColor: tokens.colors.accent.primary,
-                    animation: "pulse 1.5s ease-in-out infinite"
-                  }
-                }
-              ),
-              "SIM"
-            ]
-          }
-        )
-      ]
-    }
-  );
+var SimulationTimeDisplay = memo(function SimulationTimeDisplay({ currentTime, elapsedSeconds, showElapsed = true, showCurrent = true, showDate = false, isPlaying = false, tokens, small = false }) {
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			gap: 2,
+			padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`
+		},
+		children: [
+			showDate && currentTime && /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: tokens.typography.fontSize.xs,
+					fontFamily: tokens.typography.fontFamily.mono,
+					color: tokens.colors.text.tertiary,
+					...tabularNumsStyle
+				},
+				children: formatDateDisplay(currentTime)
+			}),
+			showCurrent && currentTime && /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: small ? tokens.typography.fontSize.lg : tokens.typography.fontSize.xl,
+					fontWeight: tokens.typography.fontWeight.bold,
+					fontFamily: tokens.typography.fontFamily.mono,
+					color: tokens.colors.text.primary,
+					...tabularNumsStyle
+				},
+				children: formatTimeDisplay(currentTime)
+			}),
+			showElapsed && elapsedSeconds !== void 0 && /* @__PURE__ */ jsxs("span", {
+				style: {
+					fontSize: tokens.typography.fontSize.sm,
+					fontFamily: tokens.typography.fontFamily.mono,
+					color: tokens.colors.status.caution,
+					...tabularNumsStyle
+				},
+				children: [
+					"T",
+					elapsedSeconds >= 0 ? "+" : "",
+					formatElapsedTime(elapsedSeconds)
+				]
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				style: {
+					fontSize: tokens.typography.fontSize.xs,
+					fontWeight: tokens.typography.fontWeight.medium,
+					color: isPlaying ? safeAccentText(tokens.colors.accent.primary) : tokens.colors.status.standby,
+					textTransform: "uppercase",
+					letterSpacing: tokens.typography.letterSpacing.wide,
+					display: "flex",
+					alignItems: "center",
+					gap: 4
+				},
+				children: [isPlaying && /* @__PURE__ */ jsx("span", { style: {
+					width: 6,
+					height: 6,
+					borderRadius: "50%",
+					backgroundColor: tokens.colors.accent.primary,
+					animation: "pulse 1.5s ease-in-out infinite"
+				} }), "SIM"]
+			})
+		]
+	});
 });
-const SimulationControls = memo(function SimulationControls2({
-  state,
-  isPlaying: isPlayingProp,
-  isPaused,
-  onPlay,
-  onPause,
-  onStop,
-  onStepForward,
-  onStepBackward,
-  currentTime: currentTimeProp,
-  epoch,
-  elapsedSeconds: elapsedSecondsProp,
-  showElapsedTime = true,
-  showCurrentTime = true,
-  showDate = true,
-  timeScale = 1,
-  onTimeScaleChange,
-  timeScalePresets = DEFAULT_TIME_SCALE_PRESETS,
-  showTimeScale = true,
-  stepSize = 60,
-  onStepSizeChange: _onStepSizeChange,
-  stepSizePresets: _stepSizePresets = DEFAULT_STEP_SIZE_PRESETS,
-  showStepControls = true,
-  compact = false,
-  small = false,
-  className = "",
-  disabled = false,
-  showStatus = true,
-  label
-}) {
-  const { tokens, theme } = useTheme();
-  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  const isPlaying = useMemo(() => {
-    if (state) return state === "playing";
-    return isPlayingProp ?? false;
-  }, [state, isPlayingProp]);
-  const isStopped = useMemo(() => {
-    if (state) return state === "stopped";
-    return !isPlayingProp && !isPaused;
-  }, [state, isPlayingProp, isPaused]);
-  const currentTime = useMemo(() => {
-    if (!currentTimeProp) return void 0;
-    return typeof currentTimeProp === "string" ? new Date(currentTimeProp) : currentTimeProp;
-  }, [currentTimeProp]);
-  const elapsedSeconds = useMemo(() => {
-    if (elapsedSecondsProp !== void 0) return elapsedSecondsProp;
-    if (currentTime && epoch) {
-      const epochDate = typeof epoch === "string" ? new Date(epoch) : epoch;
-      return (currentTime.getTime() - epochDate.getTime()) / 1e3;
-    }
-    return void 0;
-  }, [elapsedSecondsProp, currentTime, epoch]);
-  const handlePlayPause = useCallback(() => {
-    if (isPlaying) {
-      onPause == null ? void 0 : onPause();
-    } else {
-      onPlay == null ? void 0 : onPlay();
-    }
-  }, [isPlaying, onPlay, onPause]);
-  const handleKeyDown = useCallback((e) => {
-    if (disabled) return;
-    switch (e.key) {
-      case " ":
-        e.preventDefault();
-        handlePlayPause();
-        break;
-      case "Escape":
-        e.preventDefault();
-        onStop == null ? void 0 : onStop();
-        break;
-      case "ArrowRight":
-        e.preventDefault();
-        onStepForward == null ? void 0 : onStepForward();
-        break;
-      case "ArrowLeft":
-        e.preventDefault();
-        onStepBackward == null ? void 0 : onStepBackward();
-        break;
-    }
-  }, [disabled, handlePlayPause, onStop, onStepForward, onStepBackward]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classNames("zendir-simulation-controls", className),
-      role: "group",
-      "aria-label": label || "Simulation Controls",
-      onKeyDown: handleKeyDown,
-      tabIndex: 0,
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: compact ? tokens.spacing.sm : tokens.spacing.md,
-        padding: compact ? `${tokens.spacing.xs} ${tokens.spacing.sm}` : `${tokens.spacing.sm} ${tokens.spacing.md}`,
-        backgroundColor: isTransparentTheme ? "rgba(0,0,0,0.3)" : tokens.colors.background.surface,
-        ...isTransparentTheme && {
-          backdropFilter: "blur(12px)",
-          WebkitBackdropFilter: "blur(12px)"
-        },
-        ...tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` },
-        borderRadius: tokens.borderRadius.lg,
-        outline: "none",
-        transition: tokens.animation.fast
-      },
-      children: [
-        (showCurrentTime || showElapsedTime) && !compact && /* @__PURE__ */ jsx(
-          SimulationTimeDisplay,
-          {
-            currentTime,
-            elapsedSeconds,
-            showElapsed: showElapsedTime,
-            showCurrent: showCurrentTime,
-            showDate,
-            isPlaying,
-            tokens,
-            small
-          }
-        ),
-        compact && currentTime && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: 8
-            },
-            children: [
-              showDate && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    fontSize: tokens.typography.fontSize.xs,
-                    fontFamily: tokens.typography.fontFamily.mono,
-                    color: tokens.colors.text.tertiary,
-                    ...tabularNumsStyle
-                  },
-                  children: formatDateDisplay(currentTime)
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    fontSize: tokens.typography.fontSize.lg,
-                    fontWeight: tokens.typography.fontWeight.bold,
-                    // Bold (700) to match MissionClock
-                    fontFamily: tokens.typography.fontFamily.mono,
-                    color: tokens.colors.text.primary,
-                    ...tabularNumsStyle
-                  },
-                  children: formatTimeDisplay(currentTime)
-                }
-              ),
-              showStatus && /* @__PURE__ */ jsxs(
-                "span",
-                {
-                  style: {
-                    fontSize: tokens.typography.fontSize.xs,
-                    fontWeight: tokens.typography.fontWeight.medium,
-                    color: isPlaying ? safeAccentText(tokens.colors.accent.primary) : tokens.colors.status.standby,
-                    textTransform: "uppercase",
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 4
-                  },
-                  children: [
-                    isPlaying && /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        style: {
-                          width: 6,
-                          height: 6,
-                          borderRadius: "50%",
-                          backgroundColor: tokens.colors.accent.primary
-                        }
-                      }
-                    ),
-                    "SIM"
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        (showCurrentTime || showElapsedTime || compact && currentTime) && /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              width: 1,
-              height: 24,
-              backgroundColor: tokens.colors.border.muted
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: 4
-            },
-            children: [
-              showStepControls && /* @__PURE__ */ jsx(
-                ControlButton,
-                {
-                  icon: "skip-previous",
-                  label: `Step backward ${formatStepSize(stepSize)}`,
-                  onClick: onStepBackward,
-                  disabled: disabled || !onStepBackward,
-                  tokens,
-                  small
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ControlButton,
-                {
-                  icon: "stop",
-                  label: "Stop / Reset",
-                  onClick: onStop,
-                  disabled: disabled || !onStop,
-                  danger: !isStopped,
-                  tokens,
-                  small
-                }
-              ),
-              /* @__PURE__ */ jsx(Tooltip, { content: isPlaying ? "Pause (Space)" : "Play (Space)", placement: "bottom", children: /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: handlePlayPause,
-                  disabled,
-                  "aria-label": isPlaying ? "Pause simulation" : "Play simulation",
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    width: small ? 36 : 44,
-                    height: small ? 36 : 44,
-                    padding: 0,
-                    border: isPlaying ? `2px solid ${tokens.colors.accent.primary}` : "none",
-                    borderRadius: "50%",
-                    // Use accent primary for both states - playing has outline style
-                    backgroundColor: isPlaying ? "rgba(138, 43, 226, 0.15)" : tokens.colors.accent.primary,
-                    color: isPlaying ? safeAccentText(tokens.colors.accent.primary) : "#ffffff",
-                    cursor: disabled ? "not-allowed" : "pointer",
-                    transition: "all 0.15s ease",
-                    opacity: disabled ? 0.5 : 1,
-                    boxShadow: isPlaying ? `0 0 16px ${tokens.colors.accent.primary}50` : `0 0 8px ${tokens.colors.accent.primary}40`
-                  },
-                  onMouseEnter: (e) => {
-                    if (!disabled) {
-                      e.currentTarget.style.transform = "scale(1.05)";
-                    }
-                  },
-                  onMouseLeave: (e) => {
-                    e.currentTarget.style.transform = "scale(1)";
-                  },
-                  children: /* @__PURE__ */ jsx(
-                    AstroIcon,
-                    {
-                      name: isPlaying ? "pause" : "play-arrow",
-                      size: small ? 18 : 22,
-                      color: isPlaying ? tokens.colors.accent.primary : "#ffffff"
-                    }
-                  )
-                }
-              ) }),
-              showStepControls && /* @__PURE__ */ jsx(
-                ControlButton,
-                {
-                  icon: "skip-next",
-                  label: `Step forward ${formatStepSize(stepSize)}`,
-                  onClick: onStepForward,
-                  disabled: disabled || !onStepForward,
-                  tokens,
-                  small
-                }
-              )
-            ]
-          }
-        ),
-        showTimeScale && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                width: 1,
-                height: 24,
-                backgroundColor: tokens.colors.border.muted
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            TimeScaleSelector,
-            {
-              value: timeScale,
-              presets: timeScalePresets,
-              onChange: onTimeScaleChange,
-              disabled: disabled || !onTimeScaleChange,
-              tokens,
-              small
-            }
-          )
-        ] })
-      ]
-    }
-  );
+/**
+* SimulationControls - Playback controls for space simulation
+*
+* Provides comprehensive simulation time control following Astro UX patterns.
+* Designed for mission control and space operations applications.
+*
+* @example
+* ```tsx
+* // Basic usage
+* <SimulationControls
+*   isPlaying={isPlaying}
+*   onPlay={() => setIsPlaying(true)}
+*   onPause={() => setIsPlaying(false)}
+*   onStop={handleReset}
+* />
+*
+* // Full featured
+* <SimulationControls
+*   isPlaying={isPlaying}
+*   onPlay={handlePlay}
+*   onPause={handlePause}
+*   onStop={handleStop}
+*   onStepForward={handleStepForward}
+*   onStepBackward={handleStepBackward}
+*   currentTime={simulationTime}
+*   epoch={epoch}
+*   elapsedSeconds={elapsed}
+*   timeScale={timeScale}
+*   onTimeScaleChange={setTimeScale}
+*   showTimeScale
+*   showStepControls
+*   showElapsedTime
+* />
+*
+* // In AppBar center slot
+* <AppBar
+*   appName="Mission Control"
+*   centerSlot={
+*     <SimulationControls
+*       compact
+*       isPlaying={isPlaying}
+*       onPlay={handlePlay}
+*       onPause={handlePause}
+*       currentTime={simTime}
+*     />
+*   }
+* />
+* ```
+*/
+var SimulationControls = memo(function SimulationControls({ state, isPlaying: isPlayingProp, isPaused, onPlay, onPause, onStop, onStepForward, onStepBackward, currentTime: currentTimeProp, epoch, elapsedSeconds: elapsedSecondsProp, showElapsedTime = true, showCurrentTime = true, showDate = true, timeScale = 1, onTimeScaleChange, timeScalePresets = DEFAULT_TIME_SCALE_PRESETS, showTimeScale = true, stepSize = 60, onStepSizeChange: _onStepSizeChange, stepSizePresets: _stepSizePresets = DEFAULT_STEP_SIZE_PRESETS, showStepControls = true, compact = false, small = false, className = "", disabled = false, showStatus = true, label }) {
+	const { tokens, theme } = useTheme();
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	const isPlaying = useMemo(() => {
+		if (state) return state === "playing";
+		return isPlayingProp ?? false;
+	}, [state, isPlayingProp]);
+	const isStopped = useMemo(() => {
+		if (state) return state === "stopped";
+		return !isPlayingProp && !isPaused;
+	}, [
+		state,
+		isPlayingProp,
+		isPaused
+	]);
+	const currentTime = useMemo(() => {
+		if (!currentTimeProp) return void 0;
+		return typeof currentTimeProp === "string" ? new Date(currentTimeProp) : currentTimeProp;
+	}, [currentTimeProp]);
+	const elapsedSeconds = useMemo(() => {
+		if (elapsedSecondsProp !== void 0) return elapsedSecondsProp;
+		if (currentTime && epoch) {
+			const epochDate = typeof epoch === "string" ? new Date(epoch) : epoch;
+			return (currentTime.getTime() - epochDate.getTime()) / 1e3;
+		}
+	}, [
+		elapsedSecondsProp,
+		currentTime,
+		epoch
+	]);
+	const handlePlayPause = useCallback(() => {
+		if (isPlaying) onPause?.();
+		else onPlay?.();
+	}, [
+		isPlaying,
+		onPlay,
+		onPause
+	]);
+	const handleKeyDown = useCallback((e) => {
+		if (disabled) return;
+		switch (e.key) {
+			case " ":
+				e.preventDefault();
+				handlePlayPause();
+				break;
+			case "Escape":
+				e.preventDefault();
+				onStop?.();
+				break;
+			case "ArrowRight":
+				e.preventDefault();
+				onStepForward?.();
+				break;
+			case "ArrowLeft":
+				e.preventDefault();
+				onStepBackward?.();
+				break;
+		}
+	}, [
+		disabled,
+		handlePlayPause,
+		onStop,
+		onStepForward,
+		onStepBackward
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames("zendir-simulation-controls", className),
+		role: "group",
+		"aria-label": label || "Simulation Controls",
+		onKeyDown: handleKeyDown,
+		tabIndex: 0,
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: compact ? tokens.spacing.sm : tokens.spacing.md,
+			padding: compact ? `${tokens.spacing.xs} ${tokens.spacing.sm}` : `${tokens.spacing.sm} ${tokens.spacing.md}`,
+			backgroundColor: isTransparentTheme ? "rgba(0,0,0,0.3)" : tokens.colors.background.surface,
+			...isTransparentTheme && {
+				backdropFilter: "blur(12px)",
+				WebkitBackdropFilter: "blur(12px)"
+			},
+			...tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` },
+			borderRadius: tokens.borderRadius.lg,
+			outline: "none",
+			transition: tokens.animation.fast
+		},
+		children: [
+			(showCurrentTime || showElapsedTime) && !compact && /* @__PURE__ */ jsx(SimulationTimeDisplay, {
+				currentTime,
+				elapsedSeconds,
+				showElapsed: showElapsedTime,
+				showCurrent: showCurrentTime,
+				showDate,
+				isPlaying,
+				tokens,
+				small
+			}),
+			compact && currentTime && /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 8
+				},
+				children: [
+					showDate && /* @__PURE__ */ jsx("span", {
+						style: {
+							fontSize: tokens.typography.fontSize.xs,
+							fontFamily: tokens.typography.fontFamily.mono,
+							color: tokens.colors.text.tertiary,
+							...tabularNumsStyle
+						},
+						children: formatDateDisplay(currentTime)
+					}),
+					/* @__PURE__ */ jsx("span", {
+						style: {
+							fontSize: tokens.typography.fontSize.lg,
+							fontWeight: tokens.typography.fontWeight.bold,
+							fontFamily: tokens.typography.fontFamily.mono,
+							color: tokens.colors.text.primary,
+							...tabularNumsStyle
+						},
+						children: formatTimeDisplay(currentTime)
+					}),
+					showStatus && /* @__PURE__ */ jsxs("span", {
+						style: {
+							fontSize: tokens.typography.fontSize.xs,
+							fontWeight: tokens.typography.fontWeight.medium,
+							color: isPlaying ? safeAccentText(tokens.colors.accent.primary) : tokens.colors.status.standby,
+							textTransform: "uppercase",
+							display: "flex",
+							alignItems: "center",
+							gap: 4
+						},
+						children: [isPlaying && /* @__PURE__ */ jsx("span", { style: {
+							width: 6,
+							height: 6,
+							borderRadius: "50%",
+							backgroundColor: tokens.colors.accent.primary
+						} }), "SIM"]
+					})
+				]
+			}),
+			(showCurrentTime || showElapsedTime || compact && currentTime) && /* @__PURE__ */ jsx("div", { style: {
+				width: 1,
+				height: 24,
+				backgroundColor: tokens.colors.border.muted
+			} }),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 4
+				},
+				children: [
+					showStepControls && /* @__PURE__ */ jsx(ControlButton, {
+						icon: "skip-previous",
+						label: `Step backward ${formatStepSize(stepSize)}`,
+						onClick: onStepBackward,
+						disabled: disabled || !onStepBackward,
+						tokens,
+						small
+					}),
+					/* @__PURE__ */ jsx(ControlButton, {
+						icon: "stop",
+						label: "Stop / Reset",
+						onClick: onStop,
+						disabled: disabled || !onStop,
+						danger: !isStopped,
+						tokens,
+						small
+					}),
+					/* @__PURE__ */ jsx(Tooltip, {
+						content: isPlaying ? "Pause (Space)" : "Play (Space)",
+						placement: "bottom",
+						children: /* @__PURE__ */ jsx("button", {
+							onClick: handlePlayPause,
+							disabled,
+							"aria-label": isPlaying ? "Pause simulation" : "Play simulation",
+							style: {
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "center",
+								width: small ? 36 : 44,
+								height: small ? 36 : 44,
+								padding: 0,
+								border: isPlaying ? `2px solid ${tokens.colors.accent.primary}` : "none",
+								borderRadius: "50%",
+								backgroundColor: isPlaying ? "rgba(138, 43, 226, 0.15)" : tokens.colors.accent.primary,
+								color: isPlaying ? safeAccentText(tokens.colors.accent.primary) : "#ffffff",
+								cursor: disabled ? "not-allowed" : "pointer",
+								transition: "all 0.15s ease",
+								opacity: disabled ? .5 : 1,
+								boxShadow: isPlaying ? `0 0 16px ${tokens.colors.accent.primary}50` : `0 0 8px ${tokens.colors.accent.primary}40`
+							},
+							onMouseEnter: (e) => {
+								if (!disabled) e.currentTarget.style.transform = "scale(1.05)";
+							},
+							onMouseLeave: (e) => {
+								e.currentTarget.style.transform = "scale(1)";
+							},
+							children: /* @__PURE__ */ jsx(AstroIcon, {
+								name: isPlaying ? "pause" : "play-arrow",
+								size: small ? 18 : 22,
+								color: isPlaying ? tokens.colors.accent.primary : "#ffffff"
+							})
+						})
+					}),
+					showStepControls && /* @__PURE__ */ jsx(ControlButton, {
+						icon: "skip-next",
+						label: `Step forward ${formatStepSize(stepSize)}`,
+						onClick: onStepForward,
+						disabled: disabled || !onStepForward,
+						tokens,
+						small
+					})
+				]
+			}),
+			showTimeScale && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { style: {
+				width: 1,
+				height: 24,
+				backgroundColor: tokens.colors.border.muted
+			} }), /* @__PURE__ */ jsx(TimeScaleSelector, {
+				value: timeScale,
+				presets: timeScalePresets,
+				onChange: onTimeScaleChange,
+				disabled: disabled || !onTimeScaleChange,
+				tokens,
+				small
+			})] })
+		]
+	});
 });
-const MiniSimulationControls = memo(function MiniSimulationControls2({
-  isPlaying = false,
-  onPlay,
-  onPause,
-  onStop,
-  timeScale = 1,
-  onTimeScaleChange,
-  disabled = false,
-  className = ""
-}) {
-  return /* @__PURE__ */ jsx(
-    SimulationControls,
-    {
-      isPlaying,
-      onPlay,
-      onPause,
-      onStop,
-      timeScale,
-      onTimeScaleChange,
-      disabled,
-      compact: true,
-      small: true,
-      showCurrentTime: false,
-      showElapsedTime: false,
-      showDate: false,
-      showStepControls: false,
-      showTimeScale: Boolean(onTimeScaleChange),
-      className
-    }
-  );
+var MiniSimulationControls = memo(function MiniSimulationControls({ isPlaying = false, onPlay, onPause, onStop, timeScale = 1, onTimeScaleChange, disabled = false, className = "" }) {
+	return /* @__PURE__ */ jsx(SimulationControls, {
+		isPlaying,
+		onPlay,
+		onPause,
+		onStop,
+		timeScale,
+		onTimeScaleChange,
+		disabled,
+		compact: true,
+		small: true,
+		showCurrentTime: false,
+		showElapsedTime: false,
+		showDate: false,
+		showStepControls: false,
+		showTimeScale: Boolean(onTimeScaleChange),
+		className
+	});
 });
-const SimulationControlsWithClock = memo(function SimulationControlsWithClock2({
-  clockFormat: _clockFormat = "24h",
-  timezone = "SIM",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    SimulationControls,
-    {
-      ...props,
-      showCurrentTime: true,
-      showElapsedTime: true,
-      showDate: true,
-      label: `Simulation Controls - ${timezone}`
-    }
-  );
+var SimulationControlsWithClock = memo(function SimulationControlsWithClock({ clockFormat: _clockFormat = "24h", timezone = "SIM", ...props }) {
+	return /* @__PURE__ */ jsx(SimulationControls, {
+		...props,
+		showCurrentTime: true,
+		showElapsedTime: true,
+		showDate: true,
+		label: `Simulation Controls - ${timezone}`
+	});
 });
-export {
-  MiniSimulationControls,
-  SimulationControls,
-  SimulationControlsWithClock
-};
-//# sourceMappingURL=SimulationControls.js.map
+//#endregion
+export { MiniSimulationControls, SimulationControls, SimulationControls as default, SimulationControlsWithClock };
+
+//# sourceMappingURL=SimulationControls.js.map