@zendir/ui 0.1.0

package/dist/react/astro/SimulationControls.js

@@ -0,0 +1,668 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { memo, useMemo, useCallback, useState } from "react";
+import { tabularNumsStyle, safeAccentText, classNames } from "../utils/index.js";
+import { AstroIcon } from "../core/AstroIcon.js";
+import { Tooltip } from "../core/Tooltip.js";
+import { useTheme } from "../theme/ThemeProvider.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];
+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")}`;
+}
+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}×`;
+}
+function formatStepSize(seconds) {
+  if (seconds >= 3600) return `${seconds / 3600}h`;
+  if (seconds >= 60) return `${seconds / 60}m`;
+  return `${seconds}s`;
+}
+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}`;
+}
+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}`;
+}
+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.08)";
+  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.03)" : 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.15)";
+        }
+      },
+      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
+          ))
+        }
+      )
+    ] })
+  ] });
+});
+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"
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+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
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+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
+    }
+  );
+});
+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}`
+    }
+  );
+});
+export {
+  MiniSimulationControls,
+  SimulationControls,
+  SimulationControlsWithClock
+};
+//# sourceMappingURL=SimulationControls.js.map