@zendir/ui 0.1.0

package/dist/react/visualizations/ThermalHeatmapCard.js

@@ -0,0 +1,372 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { classNames, formatTemperature, safeNumber } from "../utils/index.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+function getThermalStatus(temp, min, max) {
+  if (temp === void 0 || !Number.isFinite(temp)) return { text: "--", level: "off" };
+  if (temp < min) return { text: "COLD", level: "standby" };
+  if (temp > max) return { text: "HOT", level: "critical" };
+  return { text: "OK", level: "normal" };
+}
+const ThermalHeatmapCard = memo(function ThermalHeatmapCard2({
+  components,
+  averageTemperature,
+  compact = false,
+  loading = false,
+  className = ""
+}) {
+  const { tokens, theme, prefersReducedMotion } = useTheme();
+  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+  const cardBg = isTransparentTheme ? "transparent" : tokens.colors.background.surface;
+  const cardGlass = isTransparentTheme ? {
+    backdropFilter: "blur(12px)",
+    WebkitBackdropFilter: "blur(12px)"
+  } : {};
+  const sortedComponents = useMemo(() => {
+    if (!components) return [];
+    return [...components].sort((a, b) => a.name.localeCompare(b.name));
+  }, [components]);
+  const hasWarning = useMemo(() => {
+    if (!components) return false;
+    return components.some((c) => {
+      const temp = c.temperatureCelsius;
+      return Number.isFinite(temp) && (temp < c.minSafeCelsius || temp > c.maxSafeCelsius);
+    });
+  }, [components]);
+  const activeHeaterCount = useMemo(() => {
+    if (!components) return 0;
+    return components.filter((c) => c.heaterActive).length;
+  }, [components]);
+  const transitionDuration = prefersReducedMotion ? "0ms" : "200ms";
+  const statusColors = {
+    normal: "#6ed86e",
+    caution: "#ffd54f",
+    serious: "#ffa726",
+    critical: "#e57373",
+    off: "#90a4ae",
+    standby: "#4fc3f7"
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classNames("zendir-thermal-heatmap-card", "loading", className),
+        role: "article",
+        "aria-busy": "true",
+        "aria-label": "Loading thermal data",
+        style: {
+          backgroundColor: cardBg,
+          ...cardGlass,
+          border: "none",
+          borderRadius: tokens.borderRadius.lg,
+          padding: tokens.spacing.md,
+          minHeight: 200
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 16 }, children: [
+            /* @__PURE__ */ jsx("div", { style: { height: 24, width: "40%", backgroundColor: "rgba(255,255,255,0.1)", borderRadius: 4 } }),
+            /* @__PURE__ */ jsx("div", { style: { height: 24, width: 60, backgroundColor: "rgba(255,255,255,0.1)", borderRadius: 4 } })
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8 }, children: [1, 2, 3, 4, 5, 6].map((i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                height: 64,
+                backgroundColor: "rgba(255,255,255,0.06)",
+                borderRadius: 8
+              }
+            },
+            i
+          )) })
+        ]
+      }
+    );
+  }
+  if (!components || components.length === 0) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classNames("zendir-thermal-heatmap-card", "empty", className),
+        role: "article",
+        "aria-label": "No thermal data",
+        style: {
+          backgroundColor: cardBg,
+          ...cardGlass,
+          border: "none",
+          borderRadius: tokens.borderRadius.lg,
+          padding: tokens.spacing.lg,
+          textAlign: "center",
+          color: tokens.colors.text.tertiary
+        },
+        children: [
+          /* @__PURE__ */ jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "currentColor", style: { opacity: 0.5, marginBottom: 8 }, children: /* @__PURE__ */ jsx("path", { d: "M15 13V5c0-1.66-1.34-3-3-3S9 3.34 9 5v8c-1.21.91-2 2.37-2 4 0 2.76 2.24 5 5 5s5-2.24 5-5c0-1.63-.79-3.09-2-4zm-4-8c0-.55.45-1 1-1s1 .45 1 1h-1v1h1v2h-1v1h1v2h-2V5z" }) }),
+          /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: tokens.typography.body[2].fontSize }, children: "No thermal data available" })
+        ]
+      }
+    );
+  }
+  const getTempColor = (temp, min, max) => {
+    if (temp === void 0 || !Number.isFinite(temp)) return statusColors.off;
+    const mid = (max + min) / 2;
+    if (temp < min) return statusColors.standby;
+    if (temp > max) return statusColors.critical;
+    if (temp > mid + (max - mid) * 0.5) return statusColors.caution;
+    return statusColors.normal;
+  };
+  const overallStatusColor = hasWarning ? statusColors.critical : statusColors.normal;
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: classNames("zendir-thermal-heatmap-card", className),
+      "aria-label": "Spacecraft thermal status",
+      style: {
+        backgroundColor: cardBg,
+        ...cardGlass,
+        border: "none",
+        borderRadius: tokens.borderRadius.lg,
+        padding: tokens.spacing.md,
+        fontFamily: tokens.typography.fontFamily.primary,
+        color: tokens.colors.text.primary
+      },
+      children: [
+        !compact && /* @__PURE__ */ jsxs(
+          "header",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "flex-start",
+              marginBottom: tokens.spacing.md
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(
+                  "h3",
+                  {
+                    style: {
+                      margin: 0,
+                      fontSize: tokens.typography.fontSize.md,
+                      fontWeight: tokens.typography.fontWeight.semibold
+                    },
+                    children: "Thermal Status"
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "p",
+                  {
+                    style: {
+                      margin: "2px 0 0 0",
+                      fontSize: tokens.typography.fontSize.xs,
+                      color: tokens.colors.text.tertiary
+                    },
+                    children: [
+                      components.length,
+                      " zones • Avg",
+                      " ",
+                      /* @__PURE__ */ jsx("span", { style: { fontFamily: tokens.typography.fontFamily.mono }, children: formatTemperature(averageTemperature) })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  role: "status",
+                  style: {
+                    padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
+                    borderRadius: tokens.borderRadius.sm,
+                    fontSize: tokens.typography.fontSize.xxs,
+                    // 0.625rem / 10px (AstroUXDS compact)
+                    fontWeight: tokens.typography.fontWeight.medium,
+                    // 500 (AstroUXDS medium)
+                    backgroundColor: `${overallStatusColor}20`,
+                    color: overallStatusColor
+                  },
+                  children: hasWarning ? "Warning" : "Nominal"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "repeat(3, 1fr)",
+              gap: tokens.spacing.sm
+            },
+            children: sortedComponents.slice(0, compact ? 6 : 9).map((component) => {
+              const color = getTempColor(
+                component.temperatureCelsius,
+                component.minSafeCelsius,
+                component.maxSafeCelsius
+              );
+              const status = getThermalStatus(
+                component.temperatureCelsius,
+                component.minSafeCelsius,
+                component.maxSafeCelsius
+              );
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    position: "relative",
+                    borderRadius: tokens.borderRadius.md,
+                    padding: tokens.spacing.sm,
+                    textAlign: "center",
+                    transition: `transform ${transitionDuration}`,
+                    backgroundColor: `${color}22`,
+                    borderLeft: `3px solid ${color}`
+                  },
+                  children: [
+                    component.heaterActive && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        title: "Heater Active",
+                        style: {
+                          position: "absolute",
+                          top: 4,
+                          right: 4,
+                          width: 8,
+                          height: 8,
+                          backgroundColor: statusColors.caution,
+                          borderRadius: "50%",
+                          animation: prefersReducedMotion ? "none" : "heaterPulse 1s ease-in-out infinite"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          fontSize: tokens.typography.fontSize.xxs,
+                          // 0.625rem / 10px (AstroUXDS compact)
+                          color: tokens.colors.text.tertiary,
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap",
+                          marginBottom: 2
+                        },
+                        children: component.name
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          fontSize: tokens.typography.fontSize.lg,
+                          fontWeight: tokens.typography.fontWeight.bold,
+                          fontFamily: tokens.typography.fontFamily.mono,
+                          fontVariantNumeric: "tabular-nums",
+                          color
+                        },
+                        children: [
+                          safeNumber(component.temperatureCelsius, 0),
+                          "°"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          fontSize: tokens.typography.fontSize.micro,
+                          // 0.5625rem / 9px (AstroUXDS micro)
+                          fontWeight: tokens.typography.fontWeight.medium,
+                          // 500 (AstroUXDS medium)
+                          color: statusColors[status.level] || statusColors.off
+                        },
+                        children: status.text
+                      }
+                    )
+                  ]
+                },
+                component.id
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              marginTop: tokens.spacing.md,
+              paddingTop: tokens.spacing.md,
+              borderTop: `1px solid ${tokens.colors.border.muted}`
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    fontSize: tokens.typography.fontSize.xxs
+                    // 0.625rem / 10px (AstroUXDS compact)
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { style: { color: statusColors.standby }, children: "Cold" }),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          flex: 1,
+                          margin: `0 ${tokens.spacing.sm}`,
+                          height: 8,
+                          borderRadius: 4,
+                          background: `linear-gradient(to right, ${statusColors.standby}, ${statusColors.normal}, ${statusColors.caution}, ${statusColors.critical})`
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { style: { color: statusColors.critical }, children: "Hot" })
+                  ]
+                }
+              ),
+              activeHeaterCount > 0 && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    fontSize: tokens.typography.fontSize.xs,
+                    marginTop: tokens.spacing.sm
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "Active Heaters" }),
+                    /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        style: {
+                          color: statusColors.caution,
+                          fontFamily: tokens.typography.fontFamily.mono
+                        },
+                        children: [
+                          activeHeaterCount,
+                          "/",
+                          components.length
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes heaterPulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.5; }
+        }
+      ` })
+      ]
+    }
+  );
+});
+export {
+  ThermalHeatmapCard
+};
+//# sourceMappingURL=ThermalHeatmapCard.js.map

package/dist/react/visualizations/ThermalHeatmapCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThermalHeatmapCard.js","sources":["../../../src/react/visualizations/ThermalHeatmapCard.tsx"],"sourcesContent":["/**\n * @zendir/ui - ThermalHeatmapCard Component\n * \n * Spacecraft thermal visualization with \"paper doll\" view showing\n * temperature of each component with color-coded ranges.\n * \n * AstroUXDS Compliance:\n * - Uses status colors appropriately (temperature = status indicator)\n * - Standby (cyan) = Too cold\n * - Normal (green) = Within cool range\n * - Caution (yellow) = Within warm range  \n * - Critical (red) = Too hot\n * - Heater indicators use caution color per status semantics\n * \n * Features:\n * - Full null-safety with graceful fallbacks\n * - Color-coded temperature display\n * - Heater status indicators\n * - Loading and empty states\n */\n\nimport React, { memo, useMemo } from 'react';\nimport { useTheme } from '../theme';\nimport {\n  safeNumber,\n  formatTemperature,\n  classNames,\n  type StatusLevel,\n} from '../utils';\n\nexport interface ComponentThermal {\n  id: string;\n  name: string;\n  /** Temperature in Celsius */\n  temperatureCelsius: number;\n  /** Minimum safe temperature */\n  minSafeCelsius: number;\n  /** Maximum safe temperature */\n  maxSafeCelsius: number;\n  /** Heater active status */\n  heaterActive?: boolean;\n}\n\nexport interface ThermalHeatmapCardProps {\n  /** Component thermal data */\n  components?: ComponentThermal[];\n  /** Average spacecraft temperature */\n  averageTemperature?: number;\n  /** Compact mode (fewer items) */\n  compact?: boolean;\n  /** Loading state */\n  loading?: boolean;\n  /** Custom class name */\n  className?: string;\n}\n\n\n/**\n * Get status text and level\n */\nfunction getThermalStatus(\n  temp: number | undefined,\n  min: number,\n  max: number\n): { text: string; level: StatusLevel } {\n  if (temp === undefined || !Number.isFinite(temp)) return { text: '--', level: 'off' };\n  if (temp < min) return { text: 'COLD', level: 'standby' };\n  if (temp > max) return { text: 'HOT', level: 'critical' };\n  return { text: 'OK', level: 'normal' };\n}\n\n/**\n * ThermalHeatmapCard - Displays spacecraft thermal status\n * \n * @example\n * ```tsx\n * <ThermalHeatmapCard\n *   components={thermalComponents}\n *   averageTemperature={22.5}\n * />\n * ```\n */\nexport const ThermalHeatmapCard = memo(function ThermalHeatmapCard({\n  components,\n  averageTemperature,\n  compact = false,\n  loading = false,\n  className = '',\n}: ThermalHeatmapCardProps): React.ReactElement {\n  const { tokens, theme, prefersReducedMotion } = useTheme();\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  // Use transparent background with blur for transparent themes (matching Timeline)\n  const cardBg = isTransparentTheme ? 'transparent' : tokens.colors.background.surface;\n  const cardGlass = isTransparentTheme ? { \n    backdropFilter: 'blur(12px)' as const, \n    WebkitBackdropFilter: 'blur(12px)' as const,\n  } : {};\n\n  // Sort components by name\n  const sortedComponents = useMemo(() => {\n    if (!components) return [];\n    return [...components].sort((a, b) => a.name.localeCompare(b.name));\n  }, [components]);\n\n  // Calculate overall status\n  const hasWarning = useMemo(() => {\n    if (!components) return false;\n    return components.some((c) => {\n      const temp = c.temperatureCelsius;\n      return Number.isFinite(temp) && (temp < c.minSafeCelsius || temp > c.maxSafeCelsius);\n    });\n  }, [components]);\n\n  // Count active heaters\n  const activeHeaterCount = useMemo(() => {\n    if (!components) return 0;\n    return components.filter((c) => c.heaterActive).length;\n  }, [components]);\n\n  const transitionDuration = prefersReducedMotion ? '0ms' : '200ms';\n  // Medium-soft status colors (readable, not too pale)\n  const statusColors: Record<StatusLevel, string> = {\n    normal: '#6ed86e',\n    caution: '#ffd54f',\n    serious: '#ffa726',\n    critical: '#e57373',\n    off: '#90a4ae',\n    standby: '#4fc3f7',\n  };\n\n  // Loading state\n  if (loading) {\n    return (\n      <div\n        className={classNames('zendir-thermal-heatmap-card', 'loading', className)}\n        role=\"article\"\n        aria-busy=\"true\"\n        aria-label=\"Loading thermal data\"\n        style={{\n          backgroundColor: cardBg,\n          ...cardGlass,\n          border: 'none',\n          borderRadius: tokens.borderRadius.lg,\n          padding: tokens.spacing.md,\n          minHeight: 200,\n        }}\n      >\n        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>\n          <div style={{ height: 24, width: '40%', backgroundColor: 'rgba(255,255,255,0.1)', borderRadius: 4 }} />\n          <div style={{ height: 24, width: 60, backgroundColor: 'rgba(255,255,255,0.1)', borderRadius: 4 }} />\n        </div>\n        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>\n          {[1, 2, 3, 4, 5, 6].map((i) => (\n            <div\n              key={i}\n              style={{\n                height: 64,\n                backgroundColor: 'rgba(255,255,255,0.06)',\n                borderRadius: 8,\n              }}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  // Empty state\n  if (!components || components.length === 0) {\n    return (\n      <div\n        className={classNames('zendir-thermal-heatmap-card', 'empty', className)}\n        role=\"article\"\n        aria-label=\"No thermal data\"\n        style={{\n          backgroundColor: cardBg,\n          ...cardGlass,\n          border: 'none',\n          borderRadius: tokens.borderRadius.lg,\n          padding: tokens.spacing.lg,\n          textAlign: 'center',\n          color: tokens.colors.text.tertiary,\n        }}\n      >\n        <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"currentColor\" style={{ opacity: 0.5, marginBottom: 8 }}>\n          <path d=\"M15 13V5c0-1.66-1.34-3-3-3S9 3.34 9 5v8c-1.21.91-2 2.37-2 4 0 2.76 2.24 5 5 5s5-2.24 5-5c0-1.63-.79-3.09-2-4zm-4-8c0-.55.45-1 1-1s1 .45 1 1h-1v1h1v2h-1v1h1v2h-2V5z\" />\n        </svg>\n        <p style={{ margin: 0, fontSize: tokens.typography.body[2].fontSize }}>No thermal data available</p>\n      </div>\n    );\n  }\n\n  const getTempColor = (temp: number | undefined, min: number, max: number) => {\n    if (temp === undefined || !Number.isFinite(temp)) return statusColors.off;\n    const mid = (max + min) / 2;\n    if (temp < min) return statusColors.standby;\n    if (temp > max) return statusColors.critical;\n    if (temp > mid + (max - mid) * 0.5) return statusColors.caution;\n    return statusColors.normal;\n  };\n  const overallStatusColor = hasWarning ? statusColors.critical : statusColors.normal;\n\n  return (\n    <article\n      className={classNames('zendir-thermal-heatmap-card', className)}\n      aria-label=\"Spacecraft thermal status\"\n      style={{\n        backgroundColor: cardBg,\n        ...cardGlass,\n        border: 'none',\n        borderRadius: tokens.borderRadius.lg,\n        padding: tokens.spacing.md,\n        fontFamily: tokens.typography.fontFamily.primary,\n        color: tokens.colors.text.primary,\n      }}\n    >\n      {/* Header */}\n      {!compact && (\n        <header\n          style={{\n            display: 'flex',\n            justifyContent: 'space-between',\n            alignItems: 'flex-start',\n            marginBottom: tokens.spacing.md,\n          }}\n        >\n          <div>\n            <h3\n              style={{\n                margin: 0,\n                fontSize: tokens.typography.fontSize.md,\n                fontWeight: tokens.typography.fontWeight.semibold,\n              }}\n            >\n              Thermal Status\n            </h3>\n            <p\n              style={{\n                margin: '2px 0 0 0',\n                fontSize: tokens.typography.fontSize.xs,\n                color: tokens.colors.text.tertiary,\n              }}\n            >\n              {components.length} zones • Avg{' '}\n              <span style={{ fontFamily: tokens.typography.fontFamily.mono }}>\n                {formatTemperature(averageTemperature)}\n              </span>\n            </p>\n          </div>\n          <span\n            role=\"status\"\n            style={{\n              padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\n              borderRadius: tokens.borderRadius.sm,\n              fontSize: tokens.typography.fontSize.xxs, // 0.625rem / 10px (AstroUXDS compact)\n              fontWeight: tokens.typography.fontWeight.medium, // 500 (AstroUXDS medium)\n              backgroundColor: `${overallStatusColor}20`,\n              color: overallStatusColor,\n            }}\n          >\n            {hasWarning ? 'Warning' : 'Nominal'}\n          </span>\n        </header>\n      )}\n\n      {/* Thermal Grid */}\n      <div\n        style={{\n          display: 'grid',\n          gridTemplateColumns: 'repeat(3, 1fr)',\n          gap: tokens.spacing.sm,\n        }}\n      >\n        {sortedComponents.slice(0, compact ? 6 : 9).map((component) => {\n          const color = getTempColor(\n            component.temperatureCelsius,\n            component.minSafeCelsius,\n            component.maxSafeCelsius\n          );\n          const status = getThermalStatus(\n            component.temperatureCelsius,\n            component.minSafeCelsius,\n            component.maxSafeCelsius\n          );\n\n          return (\n            <div\n              key={component.id}\n              style={{\n                position: 'relative',\n                borderRadius: tokens.borderRadius.md,\n                padding: tokens.spacing.sm,\n                textAlign: 'center',\n                transition: `transform ${transitionDuration}`,\n                backgroundColor: `${color}22`,\n                borderLeft: `3px solid ${color}`,\n              }}\n            >\n              {/* Heater indicator */}\n              {component.heaterActive && (\n                <div\n                  title=\"Heater Active\"\n                  style={{\n                    position: 'absolute',\n                    top: 4,\n                    right: 4,\n                    width: 8,\n                    height: 8,\n                    backgroundColor: statusColors.caution,\n                    borderRadius: '50%',\n                    animation: prefersReducedMotion ? 'none' : 'heaterPulse 1s ease-in-out infinite',\n                  }}\n                />\n              )}\n\n              {/* Component name */}\n              <div\n                style={{\n                  fontSize: tokens.typography.fontSize.xxs, // 0.625rem / 10px (AstroUXDS compact)\n                  color: tokens.colors.text.tertiary,\n                  overflow: 'hidden',\n                  textOverflow: 'ellipsis',\n                  whiteSpace: 'nowrap',\n                  marginBottom: 2,\n                }}\n              >\n                {component.name}\n              </div>\n\n              {/* Temperature */}\n              <div\n                style={{\n                  fontSize: tokens.typography.fontSize.lg,\n                  fontWeight: tokens.typography.fontWeight.bold,\n                  fontFamily: tokens.typography.fontFamily.mono,\n                  fontVariantNumeric: 'tabular-nums',\n                  color,\n                }}\n              >\n                {safeNumber(component.temperatureCelsius, 0)}°\n              </div>\n\n              {/* Status */}\n              <div\n                style={{\n                  fontSize: tokens.typography.fontSize.micro, // 0.5625rem / 9px (AstroUXDS micro)\n                  fontWeight: tokens.typography.fontWeight.medium, // 500 (AstroUXDS medium)\n                  color: statusColors[status.level] || statusColors.off,\n                }}\n              >\n                {status.text}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n\n      {/* Legend */}\n      <div\n        style={{\n          marginTop: tokens.spacing.md,\n          paddingTop: tokens.spacing.md,\n          borderTop: `1px solid ${tokens.colors.border.muted}`,\n        }}\n      >\n        <div\n          style={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'space-between',\n            fontSize: tokens.typography.fontSize.xxs, // 0.625rem / 10px (AstroUXDS compact)\n          }}\n        >\n          <span style={{ color: statusColors.standby }}>Cold</span>\n          <div\n            style={{\n              flex: 1,\n              margin: `0 ${tokens.spacing.sm}`,\n              height: 8,\n              borderRadius: 4,\n              background: `linear-gradient(to right, ${statusColors.standby}, ${statusColors.normal}, ${statusColors.caution}, ${statusColors.critical})`,\n            }}\n          />\n          <span style={{ color: statusColors.critical }}>Hot</span>\n        </div>\n\n        {/* Active heaters */}\n        {activeHeaterCount > 0 && (\n          <div\n            style={{\n              display: 'flex',\n              justifyContent: 'space-between',\n              alignItems: 'center',\n              fontSize: tokens.typography.fontSize.xs,\n              marginTop: tokens.spacing.sm,\n            }}\n          >\n            <span style={{ color: tokens.colors.text.tertiary }}>Active Heaters</span>\n            <span\n              style={{\n                color: statusColors.caution,\n                fontFamily: tokens.typography.fontFamily.mono,\n              }}\n            >\n              {activeHeaterCount}/{components.length}\n            </span>\n          </div>\n        )}\n      </div>\n\n      {/* Keyframe animation */}\n      <style>{`\n        @keyframes heaterPulse {\n          0%, 100% { opacity: 1; }\n          50% { opacity: 0.5; }\n        }\n      `}</style>\n    </article>\n  );\n});\n"],"names":["ThermalHeatmapCard"],"mappings":"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"}

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

@@ -0,0 +1,17 @@
+/**
+ * @zendir/ui - React Visualization Components
+ *
+ * Creative, interactive visualizations for spacecraft telemetry and mission data.
+ */
+export { EclipseTimerCard } from './EclipseTimerCard';
+export type { EclipseTimerCardProps } from './EclipseTimerCard';
+export { NavBallCard } from './NavBallCard';
+export type { NavBallCardProps } from './NavBallCard';
+export { LinkBudgetCard } from './LinkBudgetCard';
+export type { LinkBudgetCardProps, LinkBudgetData } from './LinkBudgetCard';
+export { ThermalHeatmapCard } from './ThermalHeatmapCard';
+export type { ThermalHeatmapCardProps, ComponentThermal } from './ThermalHeatmapCard';
+export { PropulsionCard } from './PropulsionCard';
+export type { PropulsionCardProps, PropulsionTankData, ManeuverFeasibility } from './PropulsionCard';
+export { SensorFootprintCard } from './SensorFootprintCard';
+export type { SensorFootprintCardProps, FootprintSensorConfig } from './SensorFootprintCard';

package/dist/react.d.ts

@@ -0,0 +1 @@
+export * from './react/index'