@zendir/ui 0.6.2 → 0.7.0

package/dist/react/visualizations/ThermalHeatmapCard.js

@@ -0,0 +1,371 @@
+import { useTheme } from "../theme/ThemeProvider.js";
+import { classNames, formatTemperature, safeNumber } from "../utils/index.js";
+import { memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/visualizations/ThermalHeatmapCard.tsx
+/**
+* @zendir/ui - ThermalHeatmapCard Component
+*
+* Spacecraft thermal visualization with "paper doll" view showing
+* temperature of each component with color-coded ranges.
+*
+* AstroUXDS Compliance:
+* - Uses status colors appropriately (temperature = status indicator)
+* - Standby (cyan) = Too cold
+* - Normal (green) = Within cool range
+* - Caution (yellow) = Within warm range
+* - Critical (red) = Too hot
+* - Heater indicators use caution color per status semantics
+*
+* Features:
+* - Full null-safety with graceful fallbacks
+* - Color-coded temperature display
+* - Heater status indicators
+* - Loading and empty states
+*/
+/**
+* Get status text and level
+*/
+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"
+	};
+}
+/**
+* ThermalHeatmapCard - Displays spacecraft thermal status
+*
+* @example
+* ```tsx
+* <ThermalHeatmapCard
+*   components={thermalComponents}
+*   averageTemperature={22.5}
+* />
+* ```
+*/
+var ThermalHeatmapCard = memo(function ThermalHeatmapCard({ 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: .5,
+				marginBottom: 8
+			},
+			children: /* @__PURE__ */ jsx("path", {
+				fillRule: "evenodd",
+				clipRule: "evenodd",
+				d: "M10.5 2C12.433 2 14 3.567 14 5.5L14.0005 12.2576C15.2217 13.2664 16 14.7923 16 16.5C16 19.5376 13.5376 22 10.5 22C7.46243 22 5 19.5376 5 16.5C5 14.7919 5.77868 13.2656 7.00044 12.2568L7 5.5C7 3.567 8.567 2 10.5 2ZM10.5 4C9.7203 4 9.07955 4.59489 9.00687 5.35543L9 5.49987L9.0005 13.199L8.27384 13.799C7.47135 14.4616 7 15.4402 7 16.5C7 18.433 8.567 20 10.5 20C12.433 20 14 18.433 14 16.5C14 15.5111 13.5896 14.593 12.8828 13.9362L12.7268 13.7995L12.0006 13.1997L12 5.5C12 4.7203 11.4051 4.07955 10.6445 4.00687L10.5 4ZM11 5.5C11 5.22386 10.7761 5 10.5 5C10.2239 5 10 5.22386 10 5.5L10.0006 14.0499C8.85917 14.2813 8 15.2903 8 16.5C8 17.8807 9.11929 19 10.5 19C11.8807 19 13 17.8807 13 16.5C13 15.2907 12.1413 14.2819 11.0004 14.0501L11 5.5ZM20 11C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H17C16.4477 13 16 12.5523 16 12C16 11.4477 16.4477 11 17 11H20ZM19 9C19 8.44772 18.5523 8 18 8H17C16.4477 8 16 8.44772 16 9C16 9.55228 16.4477 10 17 10H18C18.5523 10 19 9.55228 19 9ZM20 5C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7H17C16.4477 7 16 6.55228 16 6C16 5.44772 16.4477 5 17 5H20ZM19 3C19 2.44772 18.5523 2 18 2H17C16.4477 2 16 2.44772 16 3C16 3.55228 16.4477 4 17 4H18C18.5523 4 19 3.55228 19 3Z"
+			})
+		}), /* @__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) * .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,
+						fontWeight: tokens.typography.fontWeight.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,
+									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,
+									fontWeight: tokens.typography.fontWeight.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
+					},
+					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; }
+        }
+      ` })
+		]
+	});
+});
+//#endregion
+export { ThermalHeatmapCard };
+
+//# sourceMappingURL=ThermalHeatmapCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThermalHeatmapCard.js","names":[],"sources":["../../../src/react/visualizations/ThermalHeatmapCard.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - ThermalHeatmapCard Component\r\n *\r\n * Spacecraft thermal visualization with \"paper doll\" view showing\r\n * temperature of each component with color-coded ranges.\r\n *\r\n * AstroUXDS Compliance:\r\n * - Uses status colors appropriately (temperature = status indicator)\r\n * - Standby (cyan) = Too cold\r\n * - Normal (green) = Within cool range\r\n * - Caution (yellow) = Within warm range\r\n * - Critical (red) = Too hot\r\n * - Heater indicators use caution color per status semantics\r\n *\r\n * Features:\r\n * - Full null-safety with graceful fallbacks\r\n * - Color-coded temperature display\r\n * - Heater status indicators\r\n * - Loading and empty states\r\n */\r\n\r\nimport React, { memo, useMemo } from \"react\";\r\nimport { useTheme } from \"../theme\";\r\nimport {\r\n  safeNumber,\r\n  formatTemperature,\r\n  classNames,\r\n  type StatusLevel,\r\n} from \"../utils\";\r\n\r\nexport interface ComponentThermal {\r\n  id: string;\r\n  name: string;\r\n  /** Temperature in Celsius */\r\n  temperatureCelsius: number;\r\n  /** Minimum safe temperature */\r\n  minSafeCelsius: number;\r\n  /** Maximum safe temperature */\r\n  maxSafeCelsius: number;\r\n  /** Heater active status */\r\n  heaterActive?: boolean;\r\n}\r\n\r\nexport interface ThermalHeatmapCardProps {\r\n  /** Component thermal data */\r\n  components?: ComponentThermal[];\r\n  /** Average spacecraft temperature */\r\n  averageTemperature?: number;\r\n  /** Compact mode (fewer items) */\r\n  compact?: boolean;\r\n  /** Loading state */\r\n  loading?: boolean;\r\n  /** Custom class name */\r\n  className?: string;\r\n}\r\n\r\n/**\r\n * Get status text and level\r\n */\r\nfunction getThermalStatus(\r\n  temp: number | undefined,\r\n  min: number,\r\n  max: number,\r\n): { text: string; level: StatusLevel } {\r\n  if (temp === undefined || !Number.isFinite(temp))\r\n    return { text: \"--\", level: \"off\" };\r\n  if (temp < min) return { text: \"COLD\", level: \"standby\" };\r\n  if (temp > max) return { text: \"HOT\", level: \"critical\" };\r\n  return { text: \"OK\", level: \"normal\" };\r\n}\r\n\r\n/**\r\n * ThermalHeatmapCard - Displays spacecraft thermal status\r\n *\r\n * @example\r\n * ```tsx\r\n * <ThermalHeatmapCard\r\n *   components={thermalComponents}\r\n *   averageTemperature={22.5}\r\n * />\r\n * ```\r\n */\r\nexport const ThermalHeatmapCard = memo(function ThermalHeatmapCard({\r\n  components,\r\n  averageTemperature,\r\n  compact = false,\r\n  loading = false,\r\n  className = \"\",\r\n}: ThermalHeatmapCardProps): React.ReactElement {\r\n  const { tokens, theme, prefersReducedMotion } = useTheme();\r\n  const isTransparentTheme =\r\n    theme === \"transparent\" ||\r\n    theme === \"transparent-bold\" ||\r\n    theme === \"transparent-minimal\";\r\n  // Use transparent background with blur for transparent themes (matching Timeline)\r\n  const cardBg = isTransparentTheme\r\n    ? \"transparent\"\r\n    : tokens.colors.background.surface;\r\n  const cardGlass = isTransparentTheme\r\n    ? {\r\n        backdropFilter: \"blur(12px)\" as const,\r\n        WebkitBackdropFilter: \"blur(12px)\" as const,\r\n      }\r\n    : {};\r\n\r\n  // Sort components by name\r\n  const sortedComponents = useMemo(() => {\r\n    if (!components) return [];\r\n    return [...components].sort((a, b) => a.name.localeCompare(b.name));\r\n  }, [components]);\r\n\r\n  // Calculate overall status\r\n  const hasWarning = useMemo(() => {\r\n    if (!components) return false;\r\n    return components.some((c) => {\r\n      const temp = c.temperatureCelsius;\r\n      return (\r\n        Number.isFinite(temp) &&\r\n        (temp < c.minSafeCelsius || temp > c.maxSafeCelsius)\r\n      );\r\n    });\r\n  }, [components]);\r\n\r\n  // Count active heaters\r\n  const activeHeaterCount = useMemo(() => {\r\n    if (!components) return 0;\r\n    return components.filter((c) => c.heaterActive).length;\r\n  }, [components]);\r\n\r\n  const transitionDuration = prefersReducedMotion ? \"0ms\" : \"200ms\";\r\n  // Medium-soft status colors (readable, not too pale)\r\n  const statusColors: Record<StatusLevel, string> = {\r\n    normal: \"#6ed86e\",\r\n    caution: \"#ffd54f\",\r\n    serious: \"#ffa726\",\r\n    critical: \"#e57373\",\r\n    off: \"#90a4ae\",\r\n    standby: \"#4fc3f7\",\r\n  };\r\n\r\n  // Loading state\r\n  if (loading) {\r\n    return (\r\n      <div\r\n        className={classNames(\r\n          \"zendir-thermal-heatmap-card\",\r\n          \"loading\",\r\n          className,\r\n        )}\r\n        role=\"article\"\r\n        aria-busy=\"true\"\r\n        aria-label=\"Loading thermal data\"\r\n        style={{\r\n          backgroundColor: cardBg,\r\n          ...cardGlass,\r\n          border: \"none\",\r\n          borderRadius: tokens.borderRadius.lg,\r\n          padding: tokens.spacing.md,\r\n          minHeight: 200,\r\n        }}\r\n      >\r\n        <div\r\n          style={{\r\n            display: \"flex\",\r\n            justifyContent: \"space-between\",\r\n            marginBottom: 16,\r\n          }}\r\n        >\r\n          <div\r\n            style={{\r\n              height: 24,\r\n              width: \"40%\",\r\n              backgroundColor: \"rgba(255,255,255,0.1)\",\r\n              borderRadius: 4,\r\n            }}\r\n          />\r\n          <div\r\n            style={{\r\n              height: 24,\r\n              width: 60,\r\n              backgroundColor: \"rgba(255,255,255,0.1)\",\r\n              borderRadius: 4,\r\n            }}\r\n          />\r\n        </div>\r\n        <div\r\n          style={{\r\n            display: \"grid\",\r\n            gridTemplateColumns: \"repeat(3, 1fr)\",\r\n            gap: 8,\r\n          }}\r\n        >\r\n          {[1, 2, 3, 4, 5, 6].map((i) => (\r\n            <div\r\n              key={i}\r\n              style={{\r\n                height: 64,\r\n                backgroundColor: \"rgba(255,255,255,0.06)\",\r\n                borderRadius: 8,\r\n              }}\r\n            />\r\n          ))}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  // Empty state\r\n  if (!components || components.length === 0) {\r\n    return (\r\n      <div\r\n        className={classNames(\r\n          \"zendir-thermal-heatmap-card\",\r\n          \"empty\",\r\n          className,\r\n        )}\r\n        role=\"article\"\r\n        aria-label=\"No thermal data\"\r\n        style={{\r\n          backgroundColor: cardBg,\r\n          ...cardGlass,\r\n          border: \"none\",\r\n          borderRadius: tokens.borderRadius.lg,\r\n          padding: tokens.spacing.lg,\r\n          textAlign: \"center\",\r\n          color: tokens.colors.text.tertiary,\r\n        }}\r\n      >\r\n        <svg\r\n          width=\"32\"\r\n          height=\"32\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"currentColor\"\r\n          style={{ opacity: 0.5, marginBottom: 8 }}\r\n        >\r\n          <path\r\n            fillRule=\"evenodd\"\r\n            clipRule=\"evenodd\"\r\n            d=\"M10.5 2C12.433 2 14 3.567 14 5.5L14.0005 12.2576C15.2217 13.2664 16 14.7923 16 16.5C16 19.5376 13.5376 22 10.5 22C7.46243 22 5 19.5376 5 16.5C5 14.7919 5.77868 13.2656 7.00044 12.2568L7 5.5C7 3.567 8.567 2 10.5 2ZM10.5 4C9.7203 4 9.07955 4.59489 9.00687 5.35543L9 5.49987L9.0005 13.199L8.27384 13.799C7.47135 14.4616 7 15.4402 7 16.5C7 18.433 8.567 20 10.5 20C12.433 20 14 18.433 14 16.5C14 15.5111 13.5896 14.593 12.8828 13.9362L12.7268 13.7995L12.0006 13.1997L12 5.5C12 4.7203 11.4051 4.07955 10.6445 4.00687L10.5 4ZM11 5.5C11 5.22386 10.7761 5 10.5 5C10.2239 5 10 5.22386 10 5.5L10.0006 14.0499C8.85917 14.2813 8 15.2903 8 16.5C8 17.8807 9.11929 19 10.5 19C11.8807 19 13 17.8807 13 16.5C13 15.2907 12.1413 14.2819 11.0004 14.0501L11 5.5ZM20 11C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H17C16.4477 13 16 12.5523 16 12C16 11.4477 16.4477 11 17 11H20ZM19 9C19 8.44772 18.5523 8 18 8H17C16.4477 8 16 8.44772 16 9C16 9.55228 16.4477 10 17 10H18C18.5523 10 19 9.55228 19 9ZM20 5C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7H17C16.4477 7 16 6.55228 16 6C16 5.44772 16.4477 5 17 5H20ZM19 3C19 2.44772 18.5523 2 18 2H17C16.4477 2 16 2.44772 16 3C16 3.55228 16.4477 4 17 4H18C18.5523 4 19 3.55228 19 3Z\"\r\n          />\r\n        </svg>\r\n        <p style={{ margin: 0, fontSize: tokens.typography.body[2].fontSize }}>\r\n          No thermal data available\r\n        </p>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  const getTempColor = (temp: number | undefined, min: number, max: number) => {\r\n    if (temp === undefined || !Number.isFinite(temp)) return statusColors.off;\r\n    const mid = (max + min) / 2;\r\n    if (temp < min) return statusColors.standby;\r\n    if (temp > max) return statusColors.critical;\r\n    if (temp > mid + (max - mid) * 0.5) return statusColors.caution;\r\n    return statusColors.normal;\r\n  };\r\n  const overallStatusColor = hasWarning\r\n    ? statusColors.critical\r\n    : statusColors.normal;\r\n\r\n  return (\r\n    <article\r\n      className={classNames(\"zendir-thermal-heatmap-card\", className)}\r\n      aria-label=\"Spacecraft thermal status\"\r\n      style={{\r\n        backgroundColor: cardBg,\r\n        ...cardGlass,\r\n        border: \"none\",\r\n        borderRadius: tokens.borderRadius.lg,\r\n        padding: tokens.spacing.md,\r\n        fontFamily: tokens.typography.fontFamily.primary,\r\n        color: tokens.colors.text.primary,\r\n      }}\r\n    >\r\n      {/* Header */}\r\n      {!compact && (\r\n        <header\r\n          style={{\r\n            display: \"flex\",\r\n            justifyContent: \"space-between\",\r\n            alignItems: \"flex-start\",\r\n            marginBottom: tokens.spacing.md,\r\n          }}\r\n        >\r\n          <div>\r\n            <h3\r\n              style={{\r\n                margin: 0,\r\n                fontSize: tokens.typography.fontSize.md,\r\n                fontWeight: tokens.typography.fontWeight.semibold,\r\n              }}\r\n            >\r\n              Thermal Status\r\n            </h3>\r\n            <p\r\n              style={{\r\n                margin: \"2px 0 0 0\",\r\n                fontSize: tokens.typography.fontSize.xs,\r\n                color: tokens.colors.text.tertiary,\r\n              }}\r\n            >\r\n              {components.length} zones • Avg{\" \"}\r\n              <span style={{ fontFamily: tokens.typography.fontFamily.mono }}>\r\n                {formatTemperature(averageTemperature)}\r\n              </span>\r\n            </p>\r\n          </div>\r\n          <span\r\n            role=\"status\"\r\n            style={{\r\n              padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\r\n              borderRadius: tokens.borderRadius.sm,\r\n              fontSize: tokens.typography.fontSize.xxs, // 0.625rem / 10px (AstroUXDS compact)\r\n              fontWeight: tokens.typography.fontWeight.medium, // 500 (AstroUXDS medium)\r\n              backgroundColor: `${overallStatusColor}20`,\r\n              color: overallStatusColor,\r\n            }}\r\n          >\r\n            {hasWarning ? \"Warning\" : \"Nominal\"}\r\n          </span>\r\n        </header>\r\n      )}\r\n\r\n      {/* Thermal Grid */}\r\n      <div\r\n        style={{\r\n          display: \"grid\",\r\n          gridTemplateColumns: \"repeat(3, 1fr)\",\r\n          gap: tokens.spacing.sm,\r\n        }}\r\n      >\r\n        {sortedComponents.slice(0, compact ? 6 : 9).map((component) => {\r\n          const color = getTempColor(\r\n            component.temperatureCelsius,\r\n            component.minSafeCelsius,\r\n            component.maxSafeCelsius,\r\n          );\r\n          const status = getThermalStatus(\r\n            component.temperatureCelsius,\r\n            component.minSafeCelsius,\r\n            component.maxSafeCelsius,\r\n          );\r\n\r\n          return (\r\n            <div\r\n              key={component.id}\r\n              style={{\r\n                position: \"relative\",\r\n                borderRadius: tokens.borderRadius.md,\r\n                padding: tokens.spacing.sm,\r\n                textAlign: \"center\",\r\n                transition: `transform ${transitionDuration}`,\r\n                backgroundColor: `${color}22`,\r\n                borderLeft: `3px solid ${color}`,\r\n              }}\r\n            >\r\n              {/* Heater indicator */}\r\n              {component.heaterActive && (\r\n                <div\r\n                  title=\"Heater Active\"\r\n                  style={{\r\n                    position: \"absolute\",\r\n                    top: 4,\r\n                    right: 4,\r\n                    width: 8,\r\n                    height: 8,\r\n                    backgroundColor: statusColors.caution,\r\n                    borderRadius: \"50%\",\r\n                    animation: prefersReducedMotion\r\n                      ? \"none\"\r\n                      : \"heaterPulse 1s ease-in-out infinite\",\r\n                  }}\r\n                />\r\n              )}\r\n\r\n              {/* Component name */}\r\n              <div\r\n                style={{\r\n                  fontSize: tokens.typography.fontSize.xxs, // 0.625rem / 10px (AstroUXDS compact)\r\n                  color: tokens.colors.text.tertiary,\r\n                  overflow: \"hidden\",\r\n                  textOverflow: \"ellipsis\",\r\n                  whiteSpace: \"nowrap\",\r\n                  marginBottom: 2,\r\n                }}\r\n              >\r\n                {component.name}\r\n              </div>\r\n\r\n              {/* Temperature */}\r\n              <div\r\n                style={{\r\n                  fontSize: tokens.typography.fontSize.lg,\r\n                  fontWeight: tokens.typography.fontWeight.bold,\r\n                  fontFamily: tokens.typography.fontFamily.mono,\r\n                  fontVariantNumeric: \"tabular-nums\",\r\n                  color,\r\n                }}\r\n              >\r\n                {safeNumber(component.temperatureCelsius, 0)}°\r\n              </div>\r\n\r\n              {/* Status */}\r\n              <div\r\n                style={{\r\n                  fontSize: tokens.typography.fontSize.micro, // 0.5625rem / 9px (AstroUXDS micro)\r\n                  fontWeight: tokens.typography.fontWeight.medium, // 500 (AstroUXDS medium)\r\n                  color: statusColors[status.level] || statusColors.off,\r\n                }}\r\n              >\r\n                {status.text}\r\n              </div>\r\n            </div>\r\n          );\r\n        })}\r\n      </div>\r\n\r\n      {/* Legend */}\r\n      <div\r\n        style={{\r\n          marginTop: tokens.spacing.md,\r\n          paddingTop: tokens.spacing.md,\r\n          borderTop: `1px solid ${tokens.colors.border.muted}`,\r\n        }}\r\n      >\r\n        <div\r\n          style={{\r\n            display: \"flex\",\r\n            alignItems: \"center\",\r\n            justifyContent: \"space-between\",\r\n            fontSize: tokens.typography.fontSize.xxs, // 0.625rem / 10px (AstroUXDS compact)\r\n          }}\r\n        >\r\n          <span style={{ color: statusColors.standby }}>Cold</span>\r\n          <div\r\n            style={{\r\n              flex: 1,\r\n              margin: `0 ${tokens.spacing.sm}`,\r\n              height: 8,\r\n              borderRadius: 4,\r\n              background: `linear-gradient(to right, ${statusColors.standby}, ${statusColors.normal}, ${statusColors.caution}, ${statusColors.critical})`,\r\n            }}\r\n          />\r\n          <span style={{ color: statusColors.critical }}>Hot</span>\r\n        </div>\r\n\r\n        {/* Active heaters */}\r\n        {activeHeaterCount > 0 && (\r\n          <div\r\n            style={{\r\n              display: \"flex\",\r\n              justifyContent: \"space-between\",\r\n              alignItems: \"center\",\r\n              fontSize: tokens.typography.fontSize.xs,\r\n              marginTop: tokens.spacing.sm,\r\n            }}\r\n          >\r\n            <span style={{ color: tokens.colors.text.tertiary }}>\r\n              Active Heaters\r\n            </span>\r\n            <span\r\n              style={{\r\n                color: statusColors.caution,\r\n                fontFamily: tokens.typography.fontFamily.mono,\r\n              }}\r\n            >\r\n              {activeHeaterCount}/{components.length}\r\n            </span>\r\n          </div>\r\n        )}\r\n      </div>\r\n\r\n      {/* Keyframe animation */}\r\n      <style>{`\r\n        @keyframes heaterPulse {\r\n          0%, 100% { opacity: 1; }\r\n          50% { opacity: 0.5; }\r\n        }\r\n      `}</style>\r\n    </article>\r\n  );\r\n});\r\n"],"mappings":"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"}

package/dist/react.js

@@ -1,6 +1,7 @@
 import { ThemeProvider, useScrollbarStyles, useTheme, useThemeTokens } from "./react/theme/ThemeProvider.js";
 import { CARD_ACCENT_COLORS, CardAccentProvider, SPACE_SYSTEM_COLORS, getAccentColorOptions, getSystemAccentColor, useCardAccent } from "./react/theme/cardAccent.js";
 import { Icon, getIconNames, isValidIconName } from "./react/core/display/Icon.js";
+import { Logo } from "./react/core/display/Logo.js";
 import { CategoryPalette } from "./react/utils/categoryPalette.js";
 import { STATUS_COLORS, addAlpha, clamp, classNames, focusRingStyle, formatAltitude, formatCoordinate, formatCountdown, formatDataRate, formatDecibels, formatDegrees, formatDistance, formatDuration, formatFrequency, formatLatLon, formatNumber, formatPercentage, formatPower, formatTabular, formatTemperature, formatTime, formatUTC, formatVelocity, getStatusColor, getStatusFromValue, getStatusSeverity, getWorstStatus, isStatusLevel, isValidNumber, lerp, mapRange, normalizeStatus, safeAccentText, safeNumber, tabularNumsStyle, transitions, withNullSafety } from "./react/utils/index.js";
 import { Button } from "./react/core/inputs/Button.js";
@@ -72,9 +73,28 @@ import { MonitoringIcon } from "./react/astro/MonitoringIcon.js";
 import { Progress } from "./react/astro/Progress.js";
 import { Notification } from "./react/astro/Notification.js";
 import { UnifiedTimeline } from "./react/astro/UnifiedTimeline.js";
+import { ASTRO_DATA_VIZ_COLORS, OFFICIAL_ASTRO_DATA_VIZ_COLORS, ZENDIR_BRAND_COLORS, calculateAxisBounds, createAreaGradient, createAstroEChartsTheme, formatTimeLabel, formatValueWithUnit, getPaletteForDataType, getSeriesColor } from "./react/charts/unified/theme.js";
 import { AstroChart } from "./react/charts/unified/AstroChart.js";
+import { AreaChart, BarChart, BoxPlotChart, BubbleChart, CandlestickChart, DonutChart, DualAxisChart, GaugeChart, GraphChart, HeatmapChart, HistogramChart, LineChart, ParallelChart, PieChart, RadarChart, SankeyChart, ScatterChart, StackedAreaChart, StackedBarChart, SunburstChart, TimeSeriesChart, TreemapChart } from "./react/charts/unified/presets.js";
+import { AntennaPattern3DChart, AttitudeChart, AttitudeHistory3DChart, Bar3DChart, ConjunctionAssessment3DChart, ConjunctionChart, ConstellationCoverageChart, ContactWindowChart, DopplerTrackChart, EclipseTimelineChart, HeliocentricOrbitPlot, LaunchCorridor3DChart, Lines3DChart, LinkBudgetChart, LinkMarginChart, ManeuverBudgetChart, OrbitChart, PowerChart, RoseDiagram, Scatter3DChart, SpectrumChart, SphericalRadar3DChart, SubsystemGauge, Surface3DChart, ThermalHeatmapChart, TransferOrbit3DChart, WaterfallChart } from "./react/charts/unified/domain.js";
+import { generateAttitudeData, generateConjunctionEvents, generateConstellationCoverage, generateContactWindows, generateDopplerData, generateEclipseTimeline, generateHeliocentricOrbits, generatePowerData, generateSpectrum, generateWaterfallData } from "./react/charts/unified/generators.js";
+import { PowerOverviewChart, generateSamplePowerData } from "./react/charts/unified/PowerOverviewChart.js";
+import { useChartStream, useWebSocketStream } from "./react/charts/unified/useChartStream.js";
+import { dispatchToGroup, exportGroupAsCSV, exportGroupAsImages, getGroupCharts, hideGroupTooltip, resetGroupZoom, showGroupTooltip, syncZoomRange, useChartSync } from "./react/charts/unified/sync.js";
 import { GroundTrackMap } from "./react/charts/GroundTrackMap.js";
+import { CARTO_ATTRIBUTION, ESRI_WORLD_IMAGERY_ATTRIBUTION, OSM_ATTRIBUTION, TILE_PRESETS, getBasemapAttribution } from "./react/charts/groundTrackMapLeafletTiles.js";
 import { ObjectInventoryPanel, recommendedFlyDistance } from "./react/panels/ObjectInventoryPanel.js";
 import { LayerControlPanel } from "./react/panels/LayerControlPanel.js";
 import { PLANETS, auToKm, estimateOrbitalPeriod, estimateOrbitalVelocity, getPlanet, normalizePlanetName } from "./react/types.js";
-export { ActivityPlanner, AppBar, AstroChart, BREAKPOINTS, Badge, Body1, Body2, Body3, Box, Button, CARD_ACCENT_COLORS, CATEGORY_ICONS, CATEGORY_LABELS, CHAT_RESPONSE_JSON_PROMPT, CHAT_RESPONSE_MCP_TOOL, CHAT_RESPONSE_TOOL_SCHEMA, CHAT_RESPONSE_YAML_PROMPT, CHAT_STATUS_RULES_PROMPT, Capture, CardAccentProvider, CardHeader, CategoryPalette, CategoryProvider, Center, ChatPanel, Checkbox, ClassificationBanner, ColorPickerPanel, CommandBuilder, Compact, ConfirmDialog, ConfirmProvider, ConnectionForm, Container, CopyButton, DataTable, DataTableRowDetail, DataText, DataValue, DataValueGroup, Dialog, Display1, Display2, DisplaySettingsProvider, Divider, ErrorBoundary, FONT_FAMILY_MONO, FONT_FAMILY_PRIMARY, FONT_WEIGHTS, FileExplorer, Flex, GLASS_COLOR_OVERLAYS, GLASS_TINTS, GlassCard, GlobalStatusBar, Grid, GroundTrackMap, H1, H2, H3, H4, H5, H6, HStack, HeaderIconWithStatus, HexViewer, Icon, ImageFrame, ImageGallery, ImagePanel, Input, Label, LayerControlPanel, LimitsBar, LogViewer, Menu, MessageStream, Micro, MiniSimulationControls, MissionCalendar, MissionClock, MonitoringIcon, Mono, Notification, NumberInput, ObjectInventoryPanel, PLANETS, PRESET_COLORS, PROPERTY_PRESETS, PacketViewer, Pagination, PinInput, Popover, Progress, REGION_BORDER_COLORS, REGION_COLORS, SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX, SPACE_SYSTEM_COLORS, STATUS_COLORS, Select, SideNav, SidePanel, SimulationControls, SimulationControlsWithClock, Skeleton3D, SkeletonBox, SkeletonCard, SkeletonChart, SkeletonCircle, SkeletonText, Spacer, Stack, StatusIndicator, Tabs, ThemeProvider, UnifiedTimeline as Timeline, ToastProvider, Toggle, Tooltip, Typography, VStack, ZenSpace3D, addAlpha, auToKm, clamp, classNames, createChatResponseParser, createPropertyConfig, decodeImage, deriveBatteryStatus, deriveStatus, ecefEulerXyzToHpr, ecefMetersToSdkPosition, estimateOrbitalPeriod, estimateOrbitalVelocity, focusRingStyle, formatAltitude, formatCoordinate, formatCountdown, formatDataRate, formatDecibels, formatDegrees, formatDistance, formatDuration, formatFrequency, formatLatLon, formatNumber, formatPercentage, formatPower, formatPropertyLabel, formatPropertyValue, formatTabular, formatTemperature, formatTime, formatUTC, formatVelocity, getAccentColorOptions, getEffectiveCompactMode, getIconNames, getPlanet, getPropertiesByCategory, getPropertyConfig, getStatusColor, getStatusFromValue, getStatusSeverity, getSystemAccentColor, getWorstStatus, isStatusLevel, isValidIconName, isValidNumber, lerp, loadCapturePlaceholderImage, mapRange, normalizePlanetName, normalizeStatus, parseChatResponse, parseMcpToolResult, recommendedFlyDistance, resolveResponsive, resolveSpacing, safeAccentText, safeNumber, tabularNumsStyle, transitions, useBreakpoint, useCapture, useCardAccent, useCategoryPalette, useCategoryPaletteRequired, useCompactMode, useConfirm, useCopyToClipboard, useDisplaySettings, useDisplaySettingsOptional, useScrollbarStyles, useSimulationScene, useTheme, useThemeTokens, useToast, useToastManager, withErrorBoundary, withNullSafety };
+import { SpacecraftCard } from "./react/cards/SpacecraftCard.js";
+import { TelemetryCard } from "./react/cards/TelemetryCard.js";
+import { AccessCard } from "./react/cards/AccessCard.js";
+import { OrbitCard } from "./react/cards/OrbitCard.js";
+import { TelemetryStreamCard } from "./react/cards/TelemetryStreamCard.js";
+import { EclipseTimerCard } from "./react/visualizations/EclipseTimerCard.js";
+import { NavBallCard } from "./react/visualizations/NavBallCard.js";
+import { LinkBudgetCard } from "./react/visualizations/LinkBudgetCard.js";
+import { ThermalHeatmapCard } from "./react/visualizations/ThermalHeatmapCard.js";
+import { PropulsionCard } from "./react/visualizations/PropulsionCard.js";
+import { SensorFootprintCard } from "./react/visualizations/SensorFootprintCard.js";
+export { ASTRO_DATA_VIZ_COLORS, AccessCard, ActivityPlanner, AntennaPattern3DChart, AppBar, AreaChart, AstroChart, AttitudeChart, AttitudeHistory3DChart, BREAKPOINTS, Badge, Bar3DChart, BarChart, Body1, Body2, Body3, Box, BoxPlotChart, BubbleChart, Button, CARD_ACCENT_COLORS, CARTO_ATTRIBUTION, CATEGORY_ICONS, CATEGORY_LABELS, CHAT_RESPONSE_JSON_PROMPT, CHAT_RESPONSE_MCP_TOOL, CHAT_RESPONSE_TOOL_SCHEMA, CHAT_RESPONSE_YAML_PROMPT, CHAT_STATUS_RULES_PROMPT, CandlestickChart, Capture, CardAccentProvider, CardHeader, CategoryPalette, CategoryProvider, Center, ChatPanel, Checkbox, ClassificationBanner, ColorPickerPanel, CommandBuilder, Compact, ConfirmDialog, ConfirmProvider, ConjunctionAssessment3DChart, ConjunctionChart, ConnectionForm, ConstellationCoverageChart, ContactWindowChart, Container, CopyButton, DataTable, DataTableRowDetail, DataText, DataValue, DataValueGroup, Dialog, Display1, Display2, DisplaySettingsProvider, Divider, DonutChart, DopplerTrackChart, DualAxisChart, ESRI_WORLD_IMAGERY_ATTRIBUTION, EclipseTimelineChart, EclipseTimerCard, ErrorBoundary, FONT_FAMILY_MONO, FONT_FAMILY_PRIMARY, FONT_WEIGHTS, FileExplorer, Flex, GLASS_COLOR_OVERLAYS, GLASS_TINTS, GaugeChart, GlassCard, GlobalStatusBar, GraphChart, Grid, GroundTrackMap, H1, H2, H3, H4, H5, H6, HStack, HeaderIconWithStatus, HeatmapChart, HeliocentricOrbitPlot, HexViewer, HistogramChart, Icon, ImageFrame, ImageGallery, ImagePanel, Input, Label, LaunchCorridor3DChart, LayerControlPanel, LimitsBar, LineChart, Lines3DChart, LinkBudgetCard, LinkBudgetChart, LinkMarginChart, LogViewer, Logo, ManeuverBudgetChart, Menu, MessageStream, Micro, MiniSimulationControls, MissionCalendar, MissionClock, MonitoringIcon, Mono, NavBallCard, Notification, NumberInput, OFFICIAL_ASTRO_DATA_VIZ_COLORS, OSM_ATTRIBUTION, ObjectInventoryPanel, OrbitCard, OrbitChart, PLANETS, PRESET_COLORS, PROPERTY_PRESETS, PacketViewer, Pagination, ParallelChart, PieChart, PinInput, Popover, PowerChart, PowerOverviewChart, Progress, PropulsionCard, REGION_BORDER_COLORS, REGION_COLORS, RadarChart, RoseDiagram, SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX, SPACE_SYSTEM_COLORS, STATUS_COLORS, SankeyChart, Scatter3DChart, ScatterChart, Select, SensorFootprintCard, SideNav, SidePanel, SimulationControls, SimulationControlsWithClock, Skeleton3D, SkeletonBox, SkeletonCard, SkeletonChart, SkeletonCircle, SkeletonText, SpacecraftCard, Spacer, SpectrumChart, SphericalRadar3DChart, Stack, StackedAreaChart, StackedBarChart, StatusIndicator, SubsystemGauge, SunburstChart, Surface3DChart, TILE_PRESETS, Tabs, TelemetryCard, TelemetryStreamCard, ThemeProvider, ThermalHeatmapCard, ThermalHeatmapChart, TimeSeriesChart, UnifiedTimeline as Timeline, ToastProvider, Toggle, Tooltip, TransferOrbit3DChart, TreemapChart, Typography, VStack, WaterfallChart, ZENDIR_BRAND_COLORS, ZenSpace3D, addAlpha, auToKm, calculateAxisBounds, clamp, classNames, createAreaGradient, createAstroEChartsTheme, createChatResponseParser, createPropertyConfig, decodeImage, deriveBatteryStatus, deriveStatus, dispatchToGroup, ecefEulerXyzToHpr, ecefMetersToSdkPosition, estimateOrbitalPeriod, estimateOrbitalVelocity, exportGroupAsCSV, exportGroupAsImages, focusRingStyle, formatAltitude, formatCoordinate, formatCountdown, formatDataRate, formatDecibels, formatDegrees, formatDistance, formatDuration, formatFrequency, formatLatLon, formatNumber, formatPercentage, formatPower, formatPropertyLabel, formatPropertyValue, formatTabular, formatTemperature, formatTime, formatTimeLabel, formatUTC, formatValueWithUnit, formatVelocity, generateAttitudeData, generateConjunctionEvents, generateConstellationCoverage, generateContactWindows, generateDopplerData, generateEclipseTimeline, generateHeliocentricOrbits, generatePowerData, generateSamplePowerData, generateSpectrum, generateWaterfallData, getAccentColorOptions, getBasemapAttribution, getEffectiveCompactMode, getGroupCharts, getIconNames, getPaletteForDataType, getPlanet, getPropertiesByCategory, getPropertyConfig, getSeriesColor, getStatusColor, getStatusFromValue, getStatusSeverity, getSystemAccentColor, getWorstStatus, hideGroupTooltip, isStatusLevel, isValidIconName, isValidNumber, lerp, loadCapturePlaceholderImage, mapRange, normalizePlanetName, normalizeStatus, parseChatResponse, parseMcpToolResult, recommendedFlyDistance, resetGroupZoom, resolveResponsive, resolveSpacing, safeAccentText, safeNumber, showGroupTooltip, syncZoomRange, tabularNumsStyle, transitions, useBreakpoint, useCapture, useCardAccent, useCategoryPalette, useCategoryPaletteRequired, useChartStream, useChartSync, useCompactMode, useConfirm, useCopyToClipboard, useDisplaySettings, useDisplaySettingsOptional, useScrollbarStyles, useSimulationScene, useTheme, useThemeTokens, useToast, useToastManager, useWebSocketStream, withErrorBoundary, withNullSafety };

package/dist/shaders/atmosphere.frag.js

@@ -1,5 +1,5 @@
 //#region src/shaders/atmosphere.frag
-var atmosphere_default = "uniform vec3 uSunDirection;\r\n\r\nvarying vec3 vNormal;\r\nvarying vec3 vPosition;\r\nvarying vec3 vWorldPosition;\r\n\r\nvoid main() {\r\n  // Base atmospheric scattering\r\n  float viewIntensity = pow(0.65 - dot(vNormal, vec3(0.0, 0.0, 1.0)), 2.0);\r\n  \r\n  // Sun-facing glow (brighter on the side facing the sun)\r\n  vec3 worldNormal = normalize(vWorldPosition);\r\n  float sunFacing = dot(worldNormal, normalize(uSunDirection));\r\n  float sunGlow = max(0.0, sunFacing) * 0.6 + 0.4; // 0.4-1.0 range\r\n  \r\n  // Terminator enhancement (glow at day/night boundary)\r\n  float terminator = 1.0 - abs(sunFacing);\r\n  float terminatorGlow = pow(terminator, 3.0) * 0.3;\r\n  \r\n  // Combine effects\r\n  float totalIntensity = viewIntensity * sunGlow + terminatorGlow;\r\n  \r\n  // Atmosphere color (blue with slight orange on sun side)\r\n  vec3 dayColor = vec3(0.3, 0.6, 1.0);\r\n  vec3 sunsetColor = vec3(1.0, 0.5, 0.2);\r\n  vec3 atmosphereColor = mix(dayColor, sunsetColor, pow(max(0.0, terminator), 4.0) * 0.3);\r\n  \r\n  gl_FragColor = vec4(atmosphereColor, 1.0) * totalIntensity;\r\n}\r\n";
+var atmosphere_default = "uniform vec3 uSunDirection;\n\nvarying vec3 vNormal;\nvarying vec3 vPosition;\nvarying vec3 vWorldPosition;\n\nvoid main() {\n  // Base atmospheric scattering\n  float viewIntensity = pow(0.65 - dot(vNormal, vec3(0.0, 0.0, 1.0)), 2.0);\n  \n  // Sun-facing glow (brighter on the side facing the sun)\n  vec3 worldNormal = normalize(vWorldPosition);\n  float sunFacing = dot(worldNormal, normalize(uSunDirection));\n  float sunGlow = max(0.0, sunFacing) * 0.6 + 0.4; // 0.4-1.0 range\n  \n  // Terminator enhancement (glow at day/night boundary)\n  float terminator = 1.0 - abs(sunFacing);\n  float terminatorGlow = pow(terminator, 3.0) * 0.3;\n  \n  // Combine effects\n  float totalIntensity = viewIntensity * sunGlow + terminatorGlow;\n  \n  // Atmosphere color (blue with slight orange on sun side)\n  vec3 dayColor = vec3(0.3, 0.6, 1.0);\n  vec3 sunsetColor = vec3(1.0, 0.5, 0.2);\n  vec3 atmosphereColor = mix(dayColor, sunsetColor, pow(max(0.0, terminator), 4.0) * 0.3);\n  \n  gl_FragColor = vec4(atmosphereColor, 1.0) * totalIntensity;\n}\n";
 //#endregion
 export { atmosphere_default as default };
 

package/dist/shaders/atmosphere.frag.js.map

@@ -1 +1 @@
-{"version":3,"file":"atmosphere.frag.js","names":[],"sources":["../../src/shaders/atmosphere.frag"],"sourcesContent":["export default \"uniform vec3 uSunDirection;\\r\\n\\r\\nvarying vec3 vNormal;\\r\\nvarying vec3 vPosition;\\r\\nvarying vec3 vWorldPosition;\\r\\n\\r\\nvoid main() {\\r\\n  // Base atmospheric scattering\\r\\n  float viewIntensity = pow(0.65 - dot(vNormal, vec3(0.0, 0.0, 1.0)), 2.0);\\r\\n  \\r\\n  // Sun-facing glow (brighter on the side facing the sun)\\r\\n  vec3 worldNormal = normalize(vWorldPosition);\\r\\n  float sunFacing = dot(worldNormal, normalize(uSunDirection));\\r\\n  float sunGlow = max(0.0, sunFacing) * 0.6 + 0.4; // 0.4-1.0 range\\r\\n  \\r\\n  // Terminator enhancement (glow at day/night boundary)\\r\\n  float terminator = 1.0 - abs(sunFacing);\\r\\n  float terminatorGlow = pow(terminator, 3.0) * 0.3;\\r\\n  \\r\\n  // Combine effects\\r\\n  float totalIntensity = viewIntensity * sunGlow + terminatorGlow;\\r\\n  \\r\\n  // Atmosphere color (blue with slight orange on sun side)\\r\\n  vec3 dayColor = vec3(0.3, 0.6, 1.0);\\r\\n  vec3 sunsetColor = vec3(1.0, 0.5, 0.2);\\r\\n  vec3 atmosphereColor = mix(dayColor, sunsetColor, pow(max(0.0, terminator), 4.0) * 0.3);\\r\\n  \\r\\n  gl_FragColor = vec4(atmosphereColor, 1.0) * totalIntensity;\\r\\n}\\r\\n\";"],"mappings":";AAAA,IAAA,qBAAe"}
+{"version":3,"file":"atmosphere.frag.js","names":[],"sources":["../../src/shaders/atmosphere.frag"],"sourcesContent":["export default \"uniform vec3 uSunDirection;\\n\\nvarying vec3 vNormal;\\nvarying vec3 vPosition;\\nvarying vec3 vWorldPosition;\\n\\nvoid main() {\\n  // Base atmospheric scattering\\n  float viewIntensity = pow(0.65 - dot(vNormal, vec3(0.0, 0.0, 1.0)), 2.0);\\n  \\n  // Sun-facing glow (brighter on the side facing the sun)\\n  vec3 worldNormal = normalize(vWorldPosition);\\n  float sunFacing = dot(worldNormal, normalize(uSunDirection));\\n  float sunGlow = max(0.0, sunFacing) * 0.6 + 0.4; // 0.4-1.0 range\\n  \\n  // Terminator enhancement (glow at day/night boundary)\\n  float terminator = 1.0 - abs(sunFacing);\\n  float terminatorGlow = pow(terminator, 3.0) * 0.3;\\n  \\n  // Combine effects\\n  float totalIntensity = viewIntensity * sunGlow + terminatorGlow;\\n  \\n  // Atmosphere color (blue with slight orange on sun side)\\n  vec3 dayColor = vec3(0.3, 0.6, 1.0);\\n  vec3 sunsetColor = vec3(1.0, 0.5, 0.2);\\n  vec3 atmosphereColor = mix(dayColor, sunsetColor, pow(max(0.0, terminator), 4.0) * 0.3);\\n  \\n  gl_FragColor = vec4(atmosphereColor, 1.0) * totalIntensity;\\n}\\n\";"],"mappings":";AAAA,IAAA,qBAAe"}

package/dist/shaders/atmosphere.vert.js

@@ -1,5 +1,5 @@
 //#region src/shaders/atmosphere.vert
-var atmosphere_default = "varying vec3 vNormal;\r\nvarying vec3 vPosition;\r\nvarying vec3 vWorldPosition;\r\n\r\nvoid main() {\r\n  vNormal = normalize(mat3(modelViewMatrix) * normal);\r\n  vPosition = position;\r\n  vWorldPosition = (modelMatrix * vec4(position, 1.0)).xyz;\r\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\r\n}\r\n";
+var atmosphere_default = "varying vec3 vNormal;\nvarying vec3 vPosition;\nvarying vec3 vWorldPosition;\n\nvoid main() {\n  vNormal = normalize(mat3(modelViewMatrix) * normal);\n  vPosition = position;\n  vWorldPosition = (modelMatrix * vec4(position, 1.0)).xyz;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n";
 //#endregion
 export { atmosphere_default as default };
 

package/dist/shaders/atmosphere.vert.js.map

@@ -1 +1 @@
-{"version":3,"file":"atmosphere.vert.js","names":[],"sources":["../../src/shaders/atmosphere.vert"],"sourcesContent":["export default \"varying vec3 vNormal;\\r\\nvarying vec3 vPosition;\\r\\nvarying vec3 vWorldPosition;\\r\\n\\r\\nvoid main() {\\r\\n  vNormal = normalize(mat3(modelViewMatrix) * normal);\\r\\n  vPosition = position;\\r\\n  vWorldPosition = (modelMatrix * vec4(position, 1.0)).xyz;\\r\\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\\r\\n}\\r\\n\";"],"mappings":";AAAA,IAAA,qBAAe"}
+{"version":3,"file":"atmosphere.vert.js","names":[],"sources":["../../src/shaders/atmosphere.vert"],"sourcesContent":["export default \"varying vec3 vNormal;\\nvarying vec3 vPosition;\\nvarying vec3 vWorldPosition;\\n\\nvoid main() {\\n  vNormal = normalize(mat3(modelViewMatrix) * normal);\\n  vPosition = position;\\n  vWorldPosition = (modelMatrix * vec4(position, 1.0)).xyz;\\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\\n}\\n\";"],"mappings":";AAAA,IAAA,qBAAe"}

package/dist/tokens/css-vars.d.ts

@@ -4,11 +4,11 @@
  * AUTO-GENERATED from src/tokens/tokens.css. DO NOT EDIT BY HAND.
  * Regenerate with: npm run build:tokens
  *
- * Use these instead of writing `var('--zendir-…')` literally — typos
+ * Use these instead of writing `var("--zendir-…")` literally — typos
  * become compile errors, refactors are safe, and renames propagate.
  *
  * Example:
- *   import { CSS_VAR_FONT_PRIMARY } from '@zendir/ui/tokens/css-vars';
+ *   import { CSS_VAR_FONT_PRIMARY } from "@zendir/ui/tokens/css-vars";
  *   const style = { fontFamily: `var(${CSS_VAR_FONT_PRIMARY})` };
  */
 export declare const CSS_VAR_ACCENT_PRIMARY: "--zendir-accent-primary";
@@ -297,6 +297,6 @@ export declare const CSS_VAR_UV_800: "--zendir-uv-800";
 export declare const CSS_VAR_UV_900: "--zendir-uv-900";
 export declare const CSS_VAR_UV_950: "--zendir-uv-950";
 /** Union of every Zendir CSS variable name. Useful for `as ZendirCSSVar`. */
-export type ZendirCSSVar = '--zendir-accent-primary' | '--zendir-accent-secondary' | '--zendir-accent-tertiary' | '--zendir-animation-fast' | '--zendir-animation-normal' | '--zendir-animation-slow' | '--zendir-astro-amber-400' | '--zendir-astro-amber-500' | '--zendir-astro-amber-600' | '--zendir-astro-amber-700' | '--zendir-astro-amber-800' | '--zendir-astro-amber-900' | '--zendir-astro-cyan-400' | '--zendir-astro-cyan-500' | '--zendir-astro-cyan-600' | '--zendir-astro-cyan-700' | '--zendir-astro-cyan-800' | '--zendir-astro-cyan-900' | '--zendir-astro-green-400' | '--zendir-astro-green-500' | '--zendir-astro-green-600' | '--zendir-astro-green-700' | '--zendir-astro-green-800' | '--zendir-astro-green-900' | '--zendir-astro-red-400' | '--zendir-astro-red-500' | '--zendir-astro-red-600' | '--zendir-astro-red-700' | '--zendir-astro-red-800' | '--zendir-astro-red-900' | '--zendir-astro-yellow-400' | '--zendir-astro-yellow-500' | '--zendir-astro-yellow-600' | '--zendir-astro-yellow-700' | '--zendir-astro-yellow-800' | '--zendir-astro-yellow-900' | '--zendir-bg-base' | '--zendir-bg-elevated' | '--zendir-bg-overlay' | '--zendir-bg-surface' | '--zendir-border-default' | '--zendir-border-focus' | '--zendir-border-muted' | '--zendir-eb-100' | '--zendir-eb-200' | '--zendir-eb-300' | '--zendir-eb-400' | '--zendir-eb-50' | '--zendir-eb-500' | '--zendir-eb-600' | '--zendir-eb-700' | '--zendir-eb-800' | '--zendir-eb-900' | '--zendir-eb-950' | '--zendir-font-heading' | '--zendir-font-mono' | '--zendir-font-primary' | '--zendir-font-size-base' | '--zendir-font-size-display' | '--zendir-font-size-lg' | '--zendir-font-size-md' | '--zendir-font-size-micro' | '--zendir-font-size-sm' | '--zendir-font-size-xl' | '--zendir-font-size-xs' | '--zendir-font-size-xxl' | '--zendir-font-size-xxs' | '--zendir-font-size-xxxl' | '--zendir-font-weight-bold' | '--zendir-font-weight-light' | '--zendir-font-weight-medium' | '--zendir-font-weight-normal' | '--zendir-font-weight-semibold' | '--zendir-line-height-normal' | '--zendir-line-height-relaxed' | '--zendir-line-height-tight' | '--zendir-neutral-100' | '--zendir-neutral-200' | '--zendir-neutral-300' | '--zendir-neutral-400' | '--zendir-neutral-50' | '--zendir-neutral-500' | '--zendir-neutral-600' | '--zendir-neutral-700' | '--zendir-neutral-800' | '--zendir-neutral-900' | '--zendir-neutral-950' | '--zendir-pb-100' | '--zendir-pb-200' | '--zendir-pb-300' | '--zendir-pb-400' | '--zendir-pb-50' | '--zendir-pb-500' | '--zendir-pb-600' | '--zendir-pb-700' | '--zendir-pb-800' | '--zendir-pb-900' | '--zendir-pb-950' | '--zendir-radius-full' | '--zendir-radius-lg' | '--zendir-radius-md' | '--zendir-radius-none' | '--zendir-radius-sm' | '--zendir-radius-xl' | '--zendir-semantic-error' | '--zendir-semantic-info' | '--zendir-semantic-success' | '--zendir-semantic-warning' | '--zendir-shadow-glow' | '--zendir-shadow-lg' | '--zendir-shadow-md' | '--zendir-shadow-none' | '--zendir-shadow-sm' | '--zendir-shadow-xl' | '--zendir-spacing-lg' | '--zendir-spacing-md' | '--zendir-spacing-sm' | '--zendir-spacing-xl' | '--zendir-spacing-xs' | '--zendir-spacing-xxl' | '--zendir-status-caution' | '--zendir-status-caution-border' | '--zendir-status-caution-light' | '--zendir-status-critical' | '--zendir-status-critical-border' | '--zendir-status-critical-light' | '--zendir-status-normal' | '--zendir-status-normal-border' | '--zendir-status-normal-light' | '--zendir-status-off' | '--zendir-status-off-border' | '--zendir-status-off-light' | '--zendir-status-serious' | '--zendir-status-serious-border' | '--zendir-status-serious-light' | '--zendir-status-standby' | '--zendir-status-standby-border' | '--zendir-status-standby-light' | '--zendir-text-muted' | '--zendir-text-primary' | '--zendir-text-secondary' | '--zendir-text-tertiary' | '--zendir-tw-blue-100' | '--zendir-tw-blue-200' | '--zendir-tw-blue-300' | '--zendir-tw-blue-400' | '--zendir-tw-blue-50' | '--zendir-tw-blue-500' | '--zendir-tw-blue-600' | '--zendir-tw-blue-700' | '--zendir-tw-blue-800' | '--zendir-tw-blue-900' | '--zendir-tw-blue-950' | '--zendir-tw-green-100' | '--zendir-tw-green-200' | '--zendir-tw-green-300' | '--zendir-tw-green-400' | '--zendir-tw-green-50' | '--zendir-tw-green-500' | '--zendir-tw-green-600' | '--zendir-tw-green-700' | '--zendir-tw-green-800' | '--zendir-tw-green-900' | '--zendir-tw-green-950' | '--zendir-tw-indigo-100' | '--zendir-tw-indigo-200' | '--zendir-tw-indigo-300' | '--zendir-tw-indigo-400' | '--zendir-tw-indigo-50' | '--zendir-tw-indigo-500' | '--zendir-tw-indigo-600' | '--zendir-tw-indigo-700' | '--zendir-tw-indigo-800' | '--zendir-tw-indigo-900' | '--zendir-tw-indigo-950' | '--zendir-tw-neutral-100' | '--zendir-tw-neutral-200' | '--zendir-tw-neutral-300' | '--zendir-tw-neutral-400' | '--zendir-tw-neutral-50' | '--zendir-tw-neutral-500' | '--zendir-tw-neutral-600' | '--zendir-tw-neutral-700' | '--zendir-tw-neutral-800' | '--zendir-tw-neutral-900' | '--zendir-tw-neutral-950' | '--zendir-tw-orange-100' | '--zendir-tw-orange-200' | '--zendir-tw-orange-300' | '--zendir-tw-orange-400' | '--zendir-tw-orange-50' | '--zendir-tw-orange-500' | '--zendir-tw-orange-600' | '--zendir-tw-orange-700' | '--zendir-tw-orange-800' | '--zendir-tw-orange-900' | '--zendir-tw-orange-950' | '--zendir-tw-pink-100' | '--zendir-tw-pink-200' | '--zendir-tw-pink-300' | '--zendir-tw-pink-400' | '--zendir-tw-pink-50' | '--zendir-tw-pink-500' | '--zendir-tw-pink-600' | '--zendir-tw-pink-700' | '--zendir-tw-pink-800' | '--zendir-tw-pink-900' | '--zendir-tw-pink-950' | '--zendir-tw-purple-100' | '--zendir-tw-purple-200' | '--zendir-tw-purple-300' | '--zendir-tw-purple-400' | '--zendir-tw-purple-50' | '--zendir-tw-purple-500' | '--zendir-tw-purple-600' | '--zendir-tw-purple-700' | '--zendir-tw-purple-800' | '--zendir-tw-purple-900' | '--zendir-tw-purple-950' | '--zendir-tw-red-100' | '--zendir-tw-red-200' | '--zendir-tw-red-300' | '--zendir-tw-red-400' | '--zendir-tw-red-50' | '--zendir-tw-red-500' | '--zendir-tw-red-600' | '--zendir-tw-red-700' | '--zendir-tw-red-800' | '--zendir-tw-red-900' | '--zendir-tw-red-950' | '--zendir-tw-rose-100' | '--zendir-tw-rose-200' | '--zendir-tw-rose-300' | '--zendir-tw-rose-400' | '--zendir-tw-rose-50' | '--zendir-tw-rose-500' | '--zendir-tw-rose-600' | '--zendir-tw-rose-700' | '--zendir-tw-rose-800' | '--zendir-tw-rose-900' | '--zendir-tw-rose-950' | '--zendir-tw-sky-100' | '--zendir-tw-sky-200' | '--zendir-tw-sky-300' | '--zendir-tw-sky-400' | '--zendir-tw-sky-50' | '--zendir-tw-sky-500' | '--zendir-tw-sky-600' | '--zendir-tw-sky-700' | '--zendir-tw-sky-800' | '--zendir-tw-sky-900' | '--zendir-tw-sky-950' | '--zendir-tw-slate-100' | '--zendir-tw-slate-200' | '--zendir-tw-slate-300' | '--zendir-tw-slate-400' | '--zendir-tw-slate-50' | '--zendir-tw-slate-500' | '--zendir-tw-slate-600' | '--zendir-tw-slate-700' | '--zendir-tw-slate-800' | '--zendir-tw-slate-900' | '--zendir-tw-slate-950' | '--zendir-tw-yellow-100' | '--zendir-tw-yellow-200' | '--zendir-tw-yellow-300' | '--zendir-tw-yellow-400' | '--zendir-tw-yellow-50' | '--zendir-tw-yellow-500' | '--zendir-tw-yellow-600' | '--zendir-tw-yellow-700' | '--zendir-tw-yellow-800' | '--zendir-tw-yellow-900' | '--zendir-tw-yellow-950' | '--zendir-uv-100' | '--zendir-uv-200' | '--zendir-uv-300' | '--zendir-uv-400' | '--zendir-uv-50' | '--zendir-uv-500' | '--zendir-uv-600' | '--zendir-uv-700' | '--zendir-uv-800' | '--zendir-uv-900' | '--zendir-uv-950';
+export type ZendirCSSVar = "--zendir-accent-primary" | "--zendir-accent-secondary" | "--zendir-accent-tertiary" | "--zendir-animation-fast" | "--zendir-animation-normal" | "--zendir-animation-slow" | "--zendir-astro-amber-400" | "--zendir-astro-amber-500" | "--zendir-astro-amber-600" | "--zendir-astro-amber-700" | "--zendir-astro-amber-800" | "--zendir-astro-amber-900" | "--zendir-astro-cyan-400" | "--zendir-astro-cyan-500" | "--zendir-astro-cyan-600" | "--zendir-astro-cyan-700" | "--zendir-astro-cyan-800" | "--zendir-astro-cyan-900" | "--zendir-astro-green-400" | "--zendir-astro-green-500" | "--zendir-astro-green-600" | "--zendir-astro-green-700" | "--zendir-astro-green-800" | "--zendir-astro-green-900" | "--zendir-astro-red-400" | "--zendir-astro-red-500" | "--zendir-astro-red-600" | "--zendir-astro-red-700" | "--zendir-astro-red-800" | "--zendir-astro-red-900" | "--zendir-astro-yellow-400" | "--zendir-astro-yellow-500" | "--zendir-astro-yellow-600" | "--zendir-astro-yellow-700" | "--zendir-astro-yellow-800" | "--zendir-astro-yellow-900" | "--zendir-bg-base" | "--zendir-bg-elevated" | "--zendir-bg-overlay" | "--zendir-bg-surface" | "--zendir-border-default" | "--zendir-border-focus" | "--zendir-border-muted" | "--zendir-eb-100" | "--zendir-eb-200" | "--zendir-eb-300" | "--zendir-eb-400" | "--zendir-eb-50" | "--zendir-eb-500" | "--zendir-eb-600" | "--zendir-eb-700" | "--zendir-eb-800" | "--zendir-eb-900" | "--zendir-eb-950" | "--zendir-font-heading" | "--zendir-font-mono" | "--zendir-font-primary" | "--zendir-font-size-base" | "--zendir-font-size-display" | "--zendir-font-size-lg" | "--zendir-font-size-md" | "--zendir-font-size-micro" | "--zendir-font-size-sm" | "--zendir-font-size-xl" | "--zendir-font-size-xs" | "--zendir-font-size-xxl" | "--zendir-font-size-xxs" | "--zendir-font-size-xxxl" | "--zendir-font-weight-bold" | "--zendir-font-weight-light" | "--zendir-font-weight-medium" | "--zendir-font-weight-normal" | "--zendir-font-weight-semibold" | "--zendir-line-height-normal" | "--zendir-line-height-relaxed" | "--zendir-line-height-tight" | "--zendir-neutral-100" | "--zendir-neutral-200" | "--zendir-neutral-300" | "--zendir-neutral-400" | "--zendir-neutral-50" | "--zendir-neutral-500" | "--zendir-neutral-600" | "--zendir-neutral-700" | "--zendir-neutral-800" | "--zendir-neutral-900" | "--zendir-neutral-950" | "--zendir-pb-100" | "--zendir-pb-200" | "--zendir-pb-300" | "--zendir-pb-400" | "--zendir-pb-50" | "--zendir-pb-500" | "--zendir-pb-600" | "--zendir-pb-700" | "--zendir-pb-800" | "--zendir-pb-900" | "--zendir-pb-950" | "--zendir-radius-full" | "--zendir-radius-lg" | "--zendir-radius-md" | "--zendir-radius-none" | "--zendir-radius-sm" | "--zendir-radius-xl" | "--zendir-semantic-error" | "--zendir-semantic-info" | "--zendir-semantic-success" | "--zendir-semantic-warning" | "--zendir-shadow-glow" | "--zendir-shadow-lg" | "--zendir-shadow-md" | "--zendir-shadow-none" | "--zendir-shadow-sm" | "--zendir-shadow-xl" | "--zendir-spacing-lg" | "--zendir-spacing-md" | "--zendir-spacing-sm" | "--zendir-spacing-xl" | "--zendir-spacing-xs" | "--zendir-spacing-xxl" | "--zendir-status-caution" | "--zendir-status-caution-border" | "--zendir-status-caution-light" | "--zendir-status-critical" | "--zendir-status-critical-border" | "--zendir-status-critical-light" | "--zendir-status-normal" | "--zendir-status-normal-border" | "--zendir-status-normal-light" | "--zendir-status-off" | "--zendir-status-off-border" | "--zendir-status-off-light" | "--zendir-status-serious" | "--zendir-status-serious-border" | "--zendir-status-serious-light" | "--zendir-status-standby" | "--zendir-status-standby-border" | "--zendir-status-standby-light" | "--zendir-text-muted" | "--zendir-text-primary" | "--zendir-text-secondary" | "--zendir-text-tertiary" | "--zendir-tw-blue-100" | "--zendir-tw-blue-200" | "--zendir-tw-blue-300" | "--zendir-tw-blue-400" | "--zendir-tw-blue-50" | "--zendir-tw-blue-500" | "--zendir-tw-blue-600" | "--zendir-tw-blue-700" | "--zendir-tw-blue-800" | "--zendir-tw-blue-900" | "--zendir-tw-blue-950" | "--zendir-tw-green-100" | "--zendir-tw-green-200" | "--zendir-tw-green-300" | "--zendir-tw-green-400" | "--zendir-tw-green-50" | "--zendir-tw-green-500" | "--zendir-tw-green-600" | "--zendir-tw-green-700" | "--zendir-tw-green-800" | "--zendir-tw-green-900" | "--zendir-tw-green-950" | "--zendir-tw-indigo-100" | "--zendir-tw-indigo-200" | "--zendir-tw-indigo-300" | "--zendir-tw-indigo-400" | "--zendir-tw-indigo-50" | "--zendir-tw-indigo-500" | "--zendir-tw-indigo-600" | "--zendir-tw-indigo-700" | "--zendir-tw-indigo-800" | "--zendir-tw-indigo-900" | "--zendir-tw-indigo-950" | "--zendir-tw-neutral-100" | "--zendir-tw-neutral-200" | "--zendir-tw-neutral-300" | "--zendir-tw-neutral-400" | "--zendir-tw-neutral-50" | "--zendir-tw-neutral-500" | "--zendir-tw-neutral-600" | "--zendir-tw-neutral-700" | "--zendir-tw-neutral-800" | "--zendir-tw-neutral-900" | "--zendir-tw-neutral-950" | "--zendir-tw-orange-100" | "--zendir-tw-orange-200" | "--zendir-tw-orange-300" | "--zendir-tw-orange-400" | "--zendir-tw-orange-50" | "--zendir-tw-orange-500" | "--zendir-tw-orange-600" | "--zendir-tw-orange-700" | "--zendir-tw-orange-800" | "--zendir-tw-orange-900" | "--zendir-tw-orange-950" | "--zendir-tw-pink-100" | "--zendir-tw-pink-200" | "--zendir-tw-pink-300" | "--zendir-tw-pink-400" | "--zendir-tw-pink-50" | "--zendir-tw-pink-500" | "--zendir-tw-pink-600" | "--zendir-tw-pink-700" | "--zendir-tw-pink-800" | "--zendir-tw-pink-900" | "--zendir-tw-pink-950" | "--zendir-tw-purple-100" | "--zendir-tw-purple-200" | "--zendir-tw-purple-300" | "--zendir-tw-purple-400" | "--zendir-tw-purple-50" | "--zendir-tw-purple-500" | "--zendir-tw-purple-600" | "--zendir-tw-purple-700" | "--zendir-tw-purple-800" | "--zendir-tw-purple-900" | "--zendir-tw-purple-950" | "--zendir-tw-red-100" | "--zendir-tw-red-200" | "--zendir-tw-red-300" | "--zendir-tw-red-400" | "--zendir-tw-red-50" | "--zendir-tw-red-500" | "--zendir-tw-red-600" | "--zendir-tw-red-700" | "--zendir-tw-red-800" | "--zendir-tw-red-900" | "--zendir-tw-red-950" | "--zendir-tw-rose-100" | "--zendir-tw-rose-200" | "--zendir-tw-rose-300" | "--zendir-tw-rose-400" | "--zendir-tw-rose-50" | "--zendir-tw-rose-500" | "--zendir-tw-rose-600" | "--zendir-tw-rose-700" | "--zendir-tw-rose-800" | "--zendir-tw-rose-900" | "--zendir-tw-rose-950" | "--zendir-tw-sky-100" | "--zendir-tw-sky-200" | "--zendir-tw-sky-300" | "--zendir-tw-sky-400" | "--zendir-tw-sky-50" | "--zendir-tw-sky-500" | "--zendir-tw-sky-600" | "--zendir-tw-sky-700" | "--zendir-tw-sky-800" | "--zendir-tw-sky-900" | "--zendir-tw-sky-950" | "--zendir-tw-slate-100" | "--zendir-tw-slate-200" | "--zendir-tw-slate-300" | "--zendir-tw-slate-400" | "--zendir-tw-slate-50" | "--zendir-tw-slate-500" | "--zendir-tw-slate-600" | "--zendir-tw-slate-700" | "--zendir-tw-slate-800" | "--zendir-tw-slate-900" | "--zendir-tw-slate-950" | "--zendir-tw-yellow-100" | "--zendir-tw-yellow-200" | "--zendir-tw-yellow-300" | "--zendir-tw-yellow-400" | "--zendir-tw-yellow-50" | "--zendir-tw-yellow-500" | "--zendir-tw-yellow-600" | "--zendir-tw-yellow-700" | "--zendir-tw-yellow-800" | "--zendir-tw-yellow-900" | "--zendir-tw-yellow-950" | "--zendir-uv-100" | "--zendir-uv-200" | "--zendir-uv-300" | "--zendir-uv-400" | "--zendir-uv-50" | "--zendir-uv-500" | "--zendir-uv-600" | "--zendir-uv-700" | "--zendir-uv-800" | "--zendir-uv-900" | "--zendir-uv-950";
 /** Array of every Zendir CSS variable name (alphabetised). */
 export declare const ALL_ZENDIR_CSS_VARS: readonly ZendirCSSVar[];

package/dist/tokens/css-vars.js

@@ -5,11 +5,11 @@
 * AUTO-GENERATED from src/tokens/tokens.css. DO NOT EDIT BY HAND.
 * Regenerate with: npm run build:tokens
 *
-* Use these instead of writing `var('--zendir-…')` literally — typos
+* Use these instead of writing `var("--zendir-…")` literally — typos
 * become compile errors, refactors are safe, and renames propagate.
 *
 * Example:
-*   import { CSS_VAR_FONT_PRIMARY } from '@zendir/ui/tokens/css-vars';
+*   import { CSS_VAR_FONT_PRIMARY } from "@zendir/ui/tokens/css-vars";
 *   const style = { fontFamily: `var(${CSS_VAR_FONT_PRIMARY})` };
 */
 var CSS_VAR_ACCENT_PRIMARY = "--zendir-accent-primary";