@zendir/ui 0.1.8 → 0.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +0 -169
- package/dist/index.js.map +1 -1
- package/dist/react/context/DisplaySettingsContext.js +0 -12
- package/dist/react/context/DisplaySettingsContext.js.map +1 -1
- package/dist/react/core/AstroIcon.js +1 -816
- package/dist/react/core/AstroIcon.js.map +1 -1
- package/dist/react/core/index.d.ts +0 -1
- package/dist/react/index.d.ts +2 -42
- package/dist/react/utils/index.js +0 -8
- package/dist/react/utils/index.js.map +1 -1
- package/dist/react.js +0 -169
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
- package/dist/react/3d/EarthViewer.js +0 -836
- package/dist/react/3d/EarthViewer.js.map +0 -1
- package/dist/react/3d/SolarSystemViewer.js +0 -372
- package/dist/react/3d/SolarSystemViewer.js.map +0 -1
- package/dist/react/3d/ZenSpace3D.js +0 -1253
- package/dist/react/3d/ZenSpace3D.js.map +0 -1
- package/dist/react/3d/ZenSpace3DCesium.js +0 -186
- package/dist/react/3d/ZenSpace3DCesium.js.map +0 -1
- package/dist/react/3d/ZenSpace3DShaders.js +0 -94
- package/dist/react/3d/ZenSpace3DShaders.js.map +0 -1
- package/dist/react/3d/ZenSpace3DUtils.js +0 -213
- package/dist/react/3d/ZenSpace3DUtils.js.map +0 -1
- package/dist/react/3d/threeLoader.js +0 -18
- package/dist/react/3d/threeLoader.js.map +0 -1
- package/dist/react/cards/AccessCard.js +0 -410
- package/dist/react/cards/AccessCard.js.map +0 -1
- package/dist/react/cards/OrbitCard.js +0 -372
- package/dist/react/cards/OrbitCard.js.map +0 -1
- package/dist/react/cards/SpacecraftCard.js +0 -941
- package/dist/react/cards/SpacecraftCard.js.map +0 -1
- package/dist/react/cards/TelemetryCard.js +0 -742
- package/dist/react/cards/TelemetryCard.js.map +0 -1
- package/dist/react/cards/TelemetryStreamCard.js +0 -309
- package/dist/react/cards/TelemetryStreamCard.js.map +0 -1
- package/dist/react/charts/GroundTrackMap.js +0 -1123
- package/dist/react/charts/GroundTrackMap.js.map +0 -1
- package/dist/react/charts/GroundTrackMapLeaflet.js +0 -571
- package/dist/react/charts/GroundTrackMapLeaflet.js.map +0 -1
- package/dist/react/charts/groundTrackMapLeafletTiles.js +0 -11
- package/dist/react/charts/groundTrackMapLeafletTiles.js.map +0 -1
- package/dist/react/charts/groundTrackMapLeafletUtils.js +0 -109
- package/dist/react/charts/groundTrackMapLeafletUtils.js.map +0 -1
- package/dist/react/charts/unified/AstroChart.js +0 -1405
- package/dist/react/charts/unified/AstroChart.js.map +0 -1
- package/dist/react/charts/unified/PowerOverviewChart.js +0 -488
- package/dist/react/charts/unified/PowerOverviewChart.js.map +0 -1
- package/dist/react/charts/unified/domain.js +0 -3168
- package/dist/react/charts/unified/domain.js.map +0 -1
- package/dist/react/charts/unified/generators.js +0 -518
- package/dist/react/charts/unified/generators.js.map +0 -1
- package/dist/react/charts/unified/presets.js +0 -999
- package/dist/react/charts/unified/presets.js.map +0 -1
- package/dist/react/charts/unified/sync.js +0 -219
- package/dist/react/charts/unified/sync.js.map +0 -1
- package/dist/react/charts/unified/theme.js +0 -562
- package/dist/react/charts/unified/theme.js.map +0 -1
- package/dist/react/charts/unified/useChartStream.js +0 -226
- package/dist/react/charts/unified/useChartStream.js.map +0 -1
- package/dist/react/chatgpt/AppCard.js +0 -306
- package/dist/react/chatgpt/AppCard.js.map +0 -1
- package/dist/react/chatgpt/index.js +0 -166
- package/dist/react/chatgpt/index.js.map +0 -1
- package/dist/react/hooks/useSpacecraftPosition.js +0 -89
- package/dist/react/hooks/useSpacecraftPosition.js.map +0 -1
- package/dist/react/hooks/useTelemetry.js +0 -73
- package/dist/react/hooks/useTelemetry.js.map +0 -1
- package/dist/react/hooks/useZendirSession.js +0 -148
- package/dist/react/hooks/useZendirSession.js.map +0 -1
- package/dist/react/visualizations/EclipseTimerCard.js +0 -250
- package/dist/react/visualizations/EclipseTimerCard.js.map +0 -1
- package/dist/react/visualizations/LinkBudgetCard.js +0 -444
- package/dist/react/visualizations/LinkBudgetCard.js.map +0 -1
- package/dist/react/visualizations/NavBallCard.js +0 -243
- package/dist/react/visualizations/NavBallCard.js.map +0 -1
- package/dist/react/visualizations/PropulsionCard.js +0 -298
- package/dist/react/visualizations/PropulsionCard.js.map +0 -1
- package/dist/react/visualizations/SensorFootprintCard.js +0 -326
- package/dist/react/visualizations/SensorFootprintCard.js.map +0 -1
- package/dist/react/visualizations/ThermalHeatmapCard.js +0 -372
- package/dist/react/visualizations/ThermalHeatmapCard.js.map +0 -1
- package/dist/shaders/atmosphere.frag.js +0 -5
- package/dist/shaders/atmosphere.frag.js.map +0 -1
- package/dist/shaders/atmosphere.vert.js +0 -5
- package/dist/shaders/atmosphere.vert.js.map +0 -1
- package/dist/shaders/stars.frag.js +0 -5
- package/dist/shaders/stars.frag.js.map +0 -1
- package/dist/shaders/stars.vert.js +0 -5
- package/dist/shaders/stars.vert.js.map +0 -1
- package/dist/style.css +0 -143
|
@@ -1,250 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useMemo } from "react";
|
|
3
|
-
import { useTheme } from "../theme/ThemeProvider.js";
|
|
4
|
-
const EclipseTimerCard = ({
|
|
5
|
-
eclipse,
|
|
6
|
-
orbitalPeriodMinutes,
|
|
7
|
-
orbitPhase = 0,
|
|
8
|
-
compact = false,
|
|
9
|
-
className = ""
|
|
10
|
-
}) => {
|
|
11
|
-
const { tokens, theme } = useTheme();
|
|
12
|
-
const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
|
|
13
|
-
const cardBg = isTransparentTheme ? "transparent" : tokens.colors.background.surface;
|
|
14
|
-
const cardGlass = isTransparentTheme ? {
|
|
15
|
-
backdropFilter: "blur(12px)",
|
|
16
|
-
WebkitBackdropFilter: "blur(12px)"
|
|
17
|
-
} : {};
|
|
18
|
-
const ECLIPSE_COLORS = {
|
|
19
|
-
sunlight: "#ffd54f",
|
|
20
|
-
penumbra: "#78909c"
|
|
21
|
-
};
|
|
22
|
-
const { sunlightArc, penumbraArc, umbraArc } = useMemo(() => {
|
|
23
|
-
const totalPeriod = orbitalPeriodMinutes * 60;
|
|
24
|
-
const sunlight = eclipse.sunlightDuration / totalPeriod;
|
|
25
|
-
const umbraSec = eclipse.umbraDuration ?? eclipse.eclipseDuration * 0.5;
|
|
26
|
-
const penumbraSec = eclipse.penumbraDuration ?? eclipse.eclipseDuration * 0.5;
|
|
27
|
-
const umbra = umbraSec / totalPeriod;
|
|
28
|
-
const penumbra = penumbraSec / totalPeriod;
|
|
29
|
-
return {
|
|
30
|
-
sunlightArc: sunlight * 100,
|
|
31
|
-
penumbraArc: penumbra * 100,
|
|
32
|
-
umbraArc: umbra * 100
|
|
33
|
-
};
|
|
34
|
-
}, [eclipse, orbitalPeriodMinutes]);
|
|
35
|
-
const formatTime = (seconds) => {
|
|
36
|
-
if (seconds < 0) return "--:--";
|
|
37
|
-
const mins = Math.floor(seconds / 60);
|
|
38
|
-
const secs = Math.floor(seconds % 60);
|
|
39
|
-
return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
|
|
40
|
-
};
|
|
41
|
-
const radius = 45;
|
|
42
|
-
const circumference = 2 * Math.PI * radius;
|
|
43
|
-
const sunlightDash = sunlightArc / 100 * circumference;
|
|
44
|
-
const penumbraDash = penumbraArc / 100 * circumference;
|
|
45
|
-
const umbraDash = umbraArc / 100 * circumference;
|
|
46
|
-
const cursorRotation = orbitPhase * 360 - 90;
|
|
47
|
-
const sizeStyle = compact ? { width: "128px", height: "128px" } : { width: "192px", height: "192px" };
|
|
48
|
-
const cardStyle = {
|
|
49
|
-
backgroundColor: cardBg,
|
|
50
|
-
...cardGlass,
|
|
51
|
-
border: "none",
|
|
52
|
-
borderRadius: tokens.borderRadius.lg,
|
|
53
|
-
padding: tokens.spacing.md,
|
|
54
|
-
fontFamily: tokens.typography.fontFamily.primary,
|
|
55
|
-
color: tokens.colors.text.primary
|
|
56
|
-
};
|
|
57
|
-
return /* @__PURE__ */ jsxs("div", { className, style: cardStyle, children: [
|
|
58
|
-
!compact && /* @__PURE__ */ jsxs("div", { style: {
|
|
59
|
-
display: "flex",
|
|
60
|
-
alignItems: "center",
|
|
61
|
-
justifyContent: "space-between",
|
|
62
|
-
marginBottom: tokens.spacing.md
|
|
63
|
-
}, children: [
|
|
64
|
-
/* @__PURE__ */ jsxs("div", { children: [
|
|
65
|
-
/* @__PURE__ */ jsx("h3", { style: {
|
|
66
|
-
fontWeight: tokens.typography.fontWeight.semibold,
|
|
67
|
-
color: tokens.colors.text.primary,
|
|
68
|
-
fontSize: tokens.typography.fontSize.md,
|
|
69
|
-
margin: 0
|
|
70
|
-
}, children: "Eclipse timer" }),
|
|
71
|
-
/* @__PURE__ */ jsx("p", { style: {
|
|
72
|
-
color: tokens.colors.text.tertiary,
|
|
73
|
-
fontSize: tokens.typography.fontSize.xs,
|
|
74
|
-
margin: 0,
|
|
75
|
-
marginTop: tokens.spacing.xs
|
|
76
|
-
}, children: "Orbit phase" })
|
|
77
|
-
] }),
|
|
78
|
-
/* @__PURE__ */ jsx("span", { style: {
|
|
79
|
-
padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
|
|
80
|
-
borderRadius: tokens.borderRadius.sm,
|
|
81
|
-
fontSize: tokens.typography.fontSize.xxs,
|
|
82
|
-
// 0.625rem / 10px (AstroUXDS compact)
|
|
83
|
-
fontWeight: tokens.typography.fontWeight.medium,
|
|
84
|
-
letterSpacing: "0.5px",
|
|
85
|
-
backgroundColor: eclipse.inEclipse ? `${tokens.colors.status.off}20` : `${tokens.colors.status.caution}20`,
|
|
86
|
-
color: eclipse.inEclipse ? tokens.colors.status.off : tokens.colors.status.caution
|
|
87
|
-
}, children: eclipse.inEclipse ? "Eclipse" : "Sunlit" })
|
|
88
|
-
] }),
|
|
89
|
-
/* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsxs("div", { style: { position: "relative", ...sizeStyle }, children: [
|
|
90
|
-
/* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 100", style: { width: "100%", height: "100%", transform: "rotate(-90deg)" }, children: [
|
|
91
|
-
/* @__PURE__ */ jsx(
|
|
92
|
-
"circle",
|
|
93
|
-
{
|
|
94
|
-
cx: "50",
|
|
95
|
-
cy: "50",
|
|
96
|
-
r: radius,
|
|
97
|
-
fill: "none",
|
|
98
|
-
stroke: tokens.colors.border.muted,
|
|
99
|
-
strokeWidth: "8"
|
|
100
|
-
}
|
|
101
|
-
),
|
|
102
|
-
/* @__PURE__ */ jsx(
|
|
103
|
-
"circle",
|
|
104
|
-
{
|
|
105
|
-
cx: "50",
|
|
106
|
-
cy: "50",
|
|
107
|
-
r: radius,
|
|
108
|
-
fill: "none",
|
|
109
|
-
stroke: ECLIPSE_COLORS.sunlight,
|
|
110
|
-
strokeWidth: "8",
|
|
111
|
-
strokeDasharray: `${sunlightDash} ${circumference}`,
|
|
112
|
-
strokeDashoffset: "0",
|
|
113
|
-
strokeLinecap: "round",
|
|
114
|
-
style: { filter: `drop-shadow(0 0 8px ${ECLIPSE_COLORS.sunlight}40)` }
|
|
115
|
-
}
|
|
116
|
-
),
|
|
117
|
-
/* @__PURE__ */ jsx(
|
|
118
|
-
"circle",
|
|
119
|
-
{
|
|
120
|
-
cx: "50",
|
|
121
|
-
cy: "50",
|
|
122
|
-
r: radius,
|
|
123
|
-
fill: "none",
|
|
124
|
-
stroke: ECLIPSE_COLORS.penumbra,
|
|
125
|
-
strokeWidth: "8",
|
|
126
|
-
strokeDasharray: `${penumbraDash} ${circumference}`,
|
|
127
|
-
strokeDashoffset: `${-sunlightDash}`,
|
|
128
|
-
strokeLinecap: "round"
|
|
129
|
-
}
|
|
130
|
-
),
|
|
131
|
-
/* @__PURE__ */ jsx(
|
|
132
|
-
"circle",
|
|
133
|
-
{
|
|
134
|
-
cx: "50",
|
|
135
|
-
cy: "50",
|
|
136
|
-
r: radius,
|
|
137
|
-
fill: "none",
|
|
138
|
-
stroke: tokens.colors.background.base,
|
|
139
|
-
strokeWidth: "8",
|
|
140
|
-
strokeDasharray: `${umbraDash} ${circumference}`,
|
|
141
|
-
strokeDashoffset: `${-(sunlightDash + penumbraDash)}`,
|
|
142
|
-
strokeLinecap: "round"
|
|
143
|
-
}
|
|
144
|
-
)
|
|
145
|
-
] }),
|
|
146
|
-
/* @__PURE__ */ jsx(
|
|
147
|
-
"div",
|
|
148
|
-
{
|
|
149
|
-
style: {
|
|
150
|
-
position: "absolute",
|
|
151
|
-
inset: 0,
|
|
152
|
-
transition: "transform 1s",
|
|
153
|
-
transform: `rotate(${cursorRotation}deg)`
|
|
154
|
-
},
|
|
155
|
-
children: /* @__PURE__ */ jsx("div", { style: {
|
|
156
|
-
position: "absolute",
|
|
157
|
-
top: 0,
|
|
158
|
-
left: "50%",
|
|
159
|
-
transform: "translate(-50%, -4px)"
|
|
160
|
-
}, children: /* @__PURE__ */ jsx("div", { style: {
|
|
161
|
-
width: compact ? "12px" : "16px",
|
|
162
|
-
height: compact ? "12px" : "16px",
|
|
163
|
-
backgroundColor: "#fff",
|
|
164
|
-
borderRadius: "50%",
|
|
165
|
-
border: `2px solid ${tokens.colors.status.standby}`,
|
|
166
|
-
boxShadow: `0 0 12px ${tokens.colors.status.standby}`
|
|
167
|
-
} }) })
|
|
168
|
-
}
|
|
169
|
-
),
|
|
170
|
-
/* @__PURE__ */ jsxs("div", { style: {
|
|
171
|
-
position: "absolute",
|
|
172
|
-
inset: 0,
|
|
173
|
-
display: "flex",
|
|
174
|
-
flexDirection: "column",
|
|
175
|
-
alignItems: "center",
|
|
176
|
-
justifyContent: "center"
|
|
177
|
-
}, children: [
|
|
178
|
-
/* @__PURE__ */ jsx("span", { style: {
|
|
179
|
-
fontSize: compact ? "8px" : tokens.typography.fontSize.xs,
|
|
180
|
-
color: tokens.colors.text.tertiary,
|
|
181
|
-
letterSpacing: "0.5px"
|
|
182
|
-
}, children: eclipse.inEclipse ? "Sunlight in" : "Eclipse in" }),
|
|
183
|
-
/* @__PURE__ */ jsx("span", { style: {
|
|
184
|
-
fontSize: compact ? tokens.typography.fontSize.lg : tokens.typography.fontSize.xxl,
|
|
185
|
-
fontFamily: tokens.typography.fontFamily.mono,
|
|
186
|
-
fontWeight: tokens.typography.fontWeight.bold,
|
|
187
|
-
fontVariantNumeric: "tabular-nums",
|
|
188
|
-
color: eclipse.inEclipse ? tokens.colors.status.caution : tokens.colors.text.tertiary
|
|
189
|
-
}, children: formatTime(eclipse.inEclipse ? eclipse.timeToSunlight ?? 0 : eclipse.timeToEclipse) }),
|
|
190
|
-
!compact && /* @__PURE__ */ jsxs("span", { style: {
|
|
191
|
-
fontSize: tokens.typography.fontSize.xxs,
|
|
192
|
-
// 0.625rem / 10px (AstroUXDS compact)
|
|
193
|
-
color: tokens.colors.text.tertiary,
|
|
194
|
-
marginTop: tokens.spacing.xs
|
|
195
|
-
}, children: [
|
|
196
|
-
"Period: ",
|
|
197
|
-
orbitalPeriodMinutes.toFixed(1),
|
|
198
|
-
"m"
|
|
199
|
-
] })
|
|
200
|
-
] })
|
|
201
|
-
] }) }),
|
|
202
|
-
/* @__PURE__ */ jsxs("div", { style: {
|
|
203
|
-
display: "grid",
|
|
204
|
-
gridTemplateColumns: "repeat(2, 1fr)",
|
|
205
|
-
gap: tokens.spacing.sm,
|
|
206
|
-
marginTop: tokens.spacing.md,
|
|
207
|
-
fontSize: compact ? tokens.typography.fontSize.xxs : tokens.typography.fontSize.xs
|
|
208
|
-
// AstroUXDS compliant
|
|
209
|
-
}, children: [
|
|
210
|
-
/* @__PURE__ */ jsxs("div", { style: {
|
|
211
|
-
backgroundColor: tokens.colors.background.base,
|
|
212
|
-
borderRadius: tokens.borderRadius.md,
|
|
213
|
-
padding: tokens.spacing.sm,
|
|
214
|
-
textAlign: "center"
|
|
215
|
-
}, children: [
|
|
216
|
-
/* @__PURE__ */ jsxs("div", { style: {
|
|
217
|
-
color: tokens.colors.status.caution,
|
|
218
|
-
fontWeight: tokens.typography.fontWeight.bold,
|
|
219
|
-
fontFamily: tokens.typography.fontFamily.mono,
|
|
220
|
-
fontVariantNumeric: "tabular-nums"
|
|
221
|
-
}, children: [
|
|
222
|
-
Math.round(eclipse.sunlightDuration / 60),
|
|
223
|
-
"m"
|
|
224
|
-
] }),
|
|
225
|
-
/* @__PURE__ */ jsx("div", { style: { color: tokens.colors.text.tertiary }, children: "Daylight" })
|
|
226
|
-
] }),
|
|
227
|
-
/* @__PURE__ */ jsxs("div", { style: {
|
|
228
|
-
backgroundColor: tokens.colors.background.base,
|
|
229
|
-
borderRadius: tokens.borderRadius.md,
|
|
230
|
-
padding: tokens.spacing.sm,
|
|
231
|
-
textAlign: "center"
|
|
232
|
-
}, children: [
|
|
233
|
-
/* @__PURE__ */ jsxs("div", { style: {
|
|
234
|
-
color: tokens.colors.text.tertiary,
|
|
235
|
-
fontWeight: tokens.typography.fontWeight.bold,
|
|
236
|
-
fontFamily: tokens.typography.fontFamily.mono,
|
|
237
|
-
fontVariantNumeric: "tabular-nums"
|
|
238
|
-
}, children: [
|
|
239
|
-
Math.round(((eclipse.umbraDuration ?? 0) + (eclipse.penumbraDuration ?? 0)) / 60),
|
|
240
|
-
"m"
|
|
241
|
-
] }),
|
|
242
|
-
/* @__PURE__ */ jsx("div", { style: { color: tokens.colors.text.tertiary }, children: "Eclipse" })
|
|
243
|
-
] })
|
|
244
|
-
] })
|
|
245
|
-
] });
|
|
246
|
-
};
|
|
247
|
-
export {
|
|
248
|
-
EclipseTimerCard
|
|
249
|
-
};
|
|
250
|
-
//# sourceMappingURL=EclipseTimerCard.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"EclipseTimerCard.js","sources":["../../../src/react/visualizations/EclipseTimerCard.tsx"],"sourcesContent":["/**\n * EclipseTimerCard - Circular orbit phase visualization\n * \n * Shows the spacecraft's position in its orbital day/night cycle with\n * visual sectors for sunlight, penumbra, and umbra (eclipse).\n * \n * Astro UX Compliance:\n * - Uses official Astro status colors\n * - Sentence-case labels\n * - Tabular numbers for data\n * - Roboto/Roboto Mono typography\n * - 4px-based spacing\n */\n\nimport React, { useMemo } from 'react';\nimport type { EclipseInfo } from '../types';\nimport { useTheme } from '../theme';\n\nexport interface EclipseTimerCardProps {\n /** Eclipse information from API */\n eclipse: EclipseInfo;\n /** Orbital period in minutes */\n orbitalPeriodMinutes: number;\n /** Current phase in orbit (0-1) */\n orbitPhase?: number;\n /** Compact mode for smaller displays */\n compact?: boolean;\n /** Custom class name */\n className?: string;\n}\n\nexport const EclipseTimerCard: React.FC<EclipseTimerCardProps> = ({\n eclipse,\n orbitalPeriodMinutes,\n orbitPhase = 0,\n compact = false,\n className = '',\n}) => {\n const { tokens, theme } = 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 // Medium-soft colors for eclipse phases (readable, not too pale)\n const ECLIPSE_COLORS = {\n sunlight: '#ffd54f',\n penumbra: '#78909c',\n umbra: '#546e7a',\n };\n const { sunlightArc, penumbraArc, umbraArc } = useMemo(() => {\n const totalPeriod = orbitalPeriodMinutes * 60; // seconds\n const sunlight = eclipse.sunlightDuration / totalPeriod;\n const umbraSec = eclipse.umbraDuration ?? eclipse.eclipseDuration * 0.5;\n const penumbraSec = eclipse.penumbraDuration ?? eclipse.eclipseDuration * 0.5;\n const umbra = umbraSec / totalPeriod;\n const penumbra = penumbraSec / totalPeriod;\n return {\n sunlightArc: sunlight * 100,\n penumbraArc: penumbra * 100,\n umbraArc: umbra * 100,\n };\n }, [eclipse, orbitalPeriodMinutes]);\n\n // Format time for display (Astro: tabular numbers)\n const formatTime = (seconds: number): string => {\n if (seconds < 0) return '--:--';\n const mins = Math.floor(seconds / 60);\n const secs = Math.floor(seconds % 60);\n return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;\n };\n\n // Calculate SVG arc parameters\n const radius = 45;\n const circumference = 2 * Math.PI * radius;\n \n const sunlightDash = (sunlightArc / 100) * circumference;\n const penumbraDash = (penumbraArc / 100) * circumference;\n const umbraDash = (umbraArc / 100) * circumference;\n\n // Cursor rotation based on orbit phase\n const cursorRotation = orbitPhase * 360 - 90; // -90 to start at top\n\n const sizeStyle: React.CSSProperties = compact \n ? { width: '128px', height: '128px' } \n : { width: '192px', height: '192px' };\n\n // Astro UX compliant card styling (transparent theme: glass background)\n const cardStyle: React.CSSProperties = {\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 return (\n <div className={className} style={cardStyle}>\n {!compact && (\n <div style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n marginBottom: tokens.spacing.md,\n }}>\n <div>\n {/* Astro: Sentence-case labels */}\n <h3 style={{ \n fontWeight: tokens.typography.fontWeight.semibold, \n color: tokens.colors.text.primary, \n fontSize: tokens.typography.fontSize.md,\n margin: 0,\n }}>\n Eclipse timer\n </h3>\n <p style={{ \n color: tokens.colors.text.tertiary, \n fontSize: tokens.typography.fontSize.xs,\n margin: 0,\n marginTop: tokens.spacing.xs,\n }}>\n Orbit phase\n </p>\n </div>\n {/* Status badge - Astro style */}\n <span 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,\n letterSpacing: '0.5px',\n backgroundColor: eclipse.inEclipse \n ? `${tokens.colors.status.off}20` \n : `${tokens.colors.status.caution}20`,\n color: eclipse.inEclipse \n ? tokens.colors.status.off \n : tokens.colors.status.caution,\n }}>\n {eclipse.inEclipse ? 'Eclipse' : 'Sunlit'}\n </span>\n </div>\n )}\n\n <div style={{ display: 'flex', justifyContent: 'center' }}>\n <div style={{ position: 'relative', ...sizeStyle }}>\n {/* SVG Ring */}\n <svg viewBox=\"0 0 100 100\" style={{ width: '100%', height: '100%', transform: 'rotate(-90deg)' }}>\n {/* Background ring */}\n <circle \n cx=\"50\" cy=\"50\" r={radius} \n fill=\"none\" \n stroke={tokens.colors.border.muted}\n strokeWidth=\"8\"\n />\n \n {/* Sunlight sector - soft amber */}\n <circle \n cx=\"50\" cy=\"50\" r={radius}\n fill=\"none\"\n stroke={ECLIPSE_COLORS.sunlight}\n strokeWidth=\"8\"\n strokeDasharray={`${sunlightDash} ${circumference}`}\n strokeDashoffset=\"0\"\n strokeLinecap=\"round\"\n style={{ filter: `drop-shadow(0 0 8px ${ECLIPSE_COLORS.sunlight}40)` }}\n />\n \n {/* Penumbra sector */}\n <circle \n cx=\"50\" cy=\"50\" r={radius}\n fill=\"none\"\n stroke={ECLIPSE_COLORS.penumbra}\n strokeWidth=\"8\"\n strokeDasharray={`${penumbraDash} ${circumference}`}\n strokeDashoffset={`${-sunlightDash}`}\n strokeLinecap=\"round\"\n />\n \n {/* Umbra sector - dark */}\n <circle \n cx=\"50\" cy=\"50\" r={radius}\n fill=\"none\"\n stroke={tokens.colors.background.base}\n strokeWidth=\"8\"\n strokeDasharray={`${umbraDash} ${circumference}`}\n strokeDashoffset={`${-(sunlightDash + penumbraDash)}`}\n strokeLinecap=\"round\"\n />\n </svg>\n\n {/* Position cursor */}\n <div \n style={{ \n position: 'absolute',\n inset: 0,\n transition: 'transform 1s',\n transform: `rotate(${cursorRotation}deg)`,\n }}\n >\n <div style={{\n position: 'absolute',\n top: 0,\n left: '50%',\n transform: 'translate(-50%, -4px)',\n }}>\n <div style={{\n width: compact ? '12px' : '16px',\n height: compact ? '12px' : '16px',\n backgroundColor: '#fff',\n borderRadius: '50%',\n border: `2px solid ${tokens.colors.status.standby}`,\n boxShadow: `0 0 12px ${tokens.colors.status.standby}`,\n }} />\n </div>\n </div>\n\n {/* Center content */}\n <div style={{\n position: 'absolute',\n inset: 0,\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n }}>\n {/* Astro: Sentence-case labels (Tier 3 compliance) */}\n <span style={{ \n fontSize: compact ? '8px' : tokens.typography.fontSize.xs, \n color: tokens.colors.text.tertiary,\n letterSpacing: '0.5px',\n }}>\n {eclipse.inEclipse ? 'Sunlight in' : 'Eclipse in'}\n </span>\n {/* Astro: Tabular numbers */}\n <span style={{ \n fontSize: compact ? tokens.typography.fontSize.lg : tokens.typography.fontSize.xxl, \n fontFamily: tokens.typography.fontFamily.mono,\n fontWeight: tokens.typography.fontWeight.bold,\n fontVariantNumeric: 'tabular-nums',\n color: eclipse.inEclipse ? tokens.colors.status.caution : tokens.colors.text.tertiary,\n }}>\n {formatTime(eclipse.inEclipse ? (eclipse.timeToSunlight ?? 0) : eclipse.timeToEclipse)}\n </span>\n {!compact && (\n <span style={{ \n fontSize: tokens.typography.fontSize.xxs, // 0.625rem / 10px (AstroUXDS compact)\n color: tokens.colors.text.tertiary,\n marginTop: tokens.spacing.xs,\n }}>\n Period: {orbitalPeriodMinutes.toFixed(1)}m\n </span>\n )}\n </div>\n </div>\n </div>\n\n {/* Stats row - Astro: Sentence-case, tabular numbers */}\n <div style={{\n display: 'grid',\n gridTemplateColumns: 'repeat(2, 1fr)',\n gap: tokens.spacing.sm,\n marginTop: tokens.spacing.md,\n fontSize: compact ? tokens.typography.fontSize.xxs : tokens.typography.fontSize.xs, // AstroUXDS compliant\n }}>\n <div style={{\n backgroundColor: tokens.colors.background.base,\n borderRadius: tokens.borderRadius.md,\n padding: tokens.spacing.sm,\n textAlign: 'center',\n }}>\n <div style={{ \n color: tokens.colors.status.caution, \n fontWeight: tokens.typography.fontWeight.bold,\n fontFamily: tokens.typography.fontFamily.mono,\n fontVariantNumeric: 'tabular-nums',\n }}>\n {Math.round(eclipse.sunlightDuration / 60)}m\n </div>\n <div style={{ color: tokens.colors.text.tertiary }}>Daylight</div>\n </div>\n <div style={{\n backgroundColor: tokens.colors.background.base,\n borderRadius: tokens.borderRadius.md,\n padding: tokens.spacing.sm,\n textAlign: 'center',\n }}>\n <div style={{ \n color: tokens.colors.text.tertiary, \n fontWeight: tokens.typography.fontWeight.bold,\n fontFamily: tokens.typography.fontFamily.mono,\n fontVariantNumeric: 'tabular-nums',\n }}>\n {Math.round(((eclipse.umbraDuration ?? 0) + (eclipse.penumbraDuration ?? 0)) / 60)}m\n </div>\n <div style={{ color: tokens.colors.text.tertiary }}>Eclipse</div>\n </div>\n </div>\n </div>\n );\n};\n\nexport default EclipseTimerCard;\n\n\n\n\n"],"names":[],"mappings":"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"}
|