@zendir/ui 0.6.3 → 0.7.1

package/dist/react/index.d.ts

@@ -14,11 +14,11 @@
  * Note: `zendir-ts` (the Zendir TypeScript SDK) is optional. All types are
  * provided locally. Install `zendir-ts` for API client functionality.
  */
-export { Icon, getIconNames, isValidIconName, Button, Input, Select, Toggle, Checkbox, Tooltip, Dialog, Badge, Container, Tabs, Pagination, GlassCard, GLASS_COLOR_OVERLAYS, DataValue, DataValueGroup, MessageStream, AppBar, ColorPickerPanel, getPropertyConfig, formatPropertyLabel, deriveStatus, deriveBatteryStatus, formatPropertyValue, createPropertyConfig, getPropertiesByCategory, PROPERTY_PRESETS, CATEGORY_ICONS, CATEGORY_LABELS, NumberInput, SideNav, SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX, ToastProvider, useToast, useToastManager, Popover, Menu, Box, Flex, Grid, Stack, HStack, VStack, Center, Spacer, Divider, useBreakpoint, BREAKPOINTS, resolveResponsive, resolveSpacing, ConfirmDialog, ConfirmProvider, useConfirm, PinInput, CopyButton, useCopyToClipboard, DataTable, DataTableRowDetail, ImageGallery, ImageFrame, decodeImage, ImagePanel, ChatPanel, parseChatResponse, createChatResponseParser, parseMcpToolResult, CHAT_RESPONSE_TOOL_SCHEMA, CHAT_RESPONSE_MCP_TOOL, CHAT_RESPONSE_JSON_PROMPT, CHAT_RESPONSE_YAML_PROMPT, CHAT_STATUS_RULES_PROMPT, ConnectionForm, SidePanel, HexViewer, REGION_COLORS, REGION_BORDER_COLORS, LimitsBar, LogViewer, PacketViewer, CommandBuilder, FileExplorer, MissionCalendar, ActivityPlanner, Typography, Display1, Display2, H1, H2, H3, H4, H5, H6, Body1, Body2, Body3, Compact, Micro, Mono, DataText, Label, FONT_FAMILY_PRIMARY, FONT_FAMILY_MONO, FONT_WEIGHTS, CardHeader, HeaderIconWithStatus, Capture, useCapture, loadCapturePlaceholderImage, } from './core';
+export { Icon, getIconNames, isValidIconName, Logo, Button, Input, Select, Toggle, Checkbox, Tooltip, Dialog, Badge, Container, Tabs, Pagination, GlassCard, GLASS_COLOR_OVERLAYS, DataValue, DataValueGroup, MessageStream, AppBar, ColorPickerPanel, getPropertyConfig, formatPropertyLabel, deriveStatus, deriveBatteryStatus, formatPropertyValue, createPropertyConfig, getPropertiesByCategory, PROPERTY_PRESETS, CATEGORY_ICONS, CATEGORY_LABELS, NumberInput, SideNav, SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX, ToastProvider, useToast, useToastManager, Popover, Menu, Box, Flex, Grid, Stack, HStack, VStack, Center, Spacer, Divider, useBreakpoint, BREAKPOINTS, resolveResponsive, resolveSpacing, ConfirmDialog, ConfirmProvider, useConfirm, PinInput, CopyButton, useCopyToClipboard, DataTable, DataTableRowDetail, ImageGallery, ImageFrame, decodeImage, ImagePanel, ChatPanel, parseChatResponse, createChatResponseParser, parseMcpToolResult, CHAT_RESPONSE_TOOL_SCHEMA, CHAT_RESPONSE_MCP_TOOL, CHAT_RESPONSE_JSON_PROMPT, CHAT_RESPONSE_YAML_PROMPT, CHAT_STATUS_RULES_PROMPT, ConnectionForm, SidePanel, HexViewer, REGION_COLORS, REGION_BORDER_COLORS, LimitsBar, LogViewer, PacketViewer, CommandBuilder, FileExplorer, MissionCalendar, ActivityPlanner, Typography, Display1, Display2, H1, H2, H3, H4, H5, H6, Body1, Body2, Body3, Compact, Micro, Mono, DataText, Label, FONT_FAMILY_PRIMARY, FONT_FAMILY_MONO, FONT_WEIGHTS, CardHeader, HeaderIconWithStatus, Capture, useCapture, loadCapturePlaceholderImage, } from './core';
 export { ecefMetersToSdkPosition, ecefEulerXyzToHpr } from './3d';
 export { ZenSpace3D, useSimulationScene } from './3d';
 export type { ZenSpace3DProps, ZenSpace3DHandle, UseSimulationSceneOptions, UseSimulationSceneResult, SimulationSceneClient, SimulationSceneObject, StructureDiag, PositionTickDiag, } from './3d';
-export type { NumberInputProps, NumberInputSize, SliderStatus, StatusThresholds, SideNavProps, SideNavHeaderProps, SideNavItemProps, SideNavSectionProps, SideNavFooterProps, ToastOptions, ToastStatus, ToastPosition, ToastProviderProps, PopoverProps, PopoverPlacement, MenuProps, MenuItemProps, BoxProps, FlexProps, GridProps, StackProps, CenterProps, SpacerProps, DividerProps, Breakpoint, ResponsiveValue, SpacingToken, ConfirmDialogProps, ConfirmOptions, ConfirmStatus, PinInputProps, CopyButtonProps, UseCopyToClipboardReturn, DataTableProps, DataTableColumn, DataTableRowDetailProps, DataTableRowDetailField, ImageGalleryProps, GalleryImage, ImageFrameProps, ImageColormap, ImagePanelProps, ChatPanelProps, ChatMessage, ChatBlock, ChatBlockEvent, ChatBlockAlert, ChatBlockTelemetry, ChatBlockProgress, ChatBlockTable, ChatBlockActions, ChatBlockChoice, ChatBlockConfirm, ChatBlockCommand, ChatBlockKV, ChatResponseFormat, ChatResponsePayload, ChatResponseParserOptions, McpToolContent, McpToolResult, ConnectionFormProps, ConnectionConfig, SidePanelProps, SidePanelPosition, HexViewerProps, HexHighlight, HexRegion, DecodedField, PacketHeaderEntry, ByteGrouping, OffsetBase, Endianness, LimitsBarProps, LimitsState, LogViewerProps, LogEntry, LogSeverity, PacketViewerProps, PacketItem, PacketItemLimits, PacketItemLimitsState, PacketViewMode, CommandBuilderProps, CommandParameter, CommandParamType, CommandHistoryEntry, FileExplorerProps, FileNode, FileViewMode, FileSortBy, MissionCalendarProps, CalendarEvent, CalendarTimeline, CalendarViewMode, ActivityStatus, ActivityType, ActivityPlannerProps, ActivityFormData, TypographyProps, TypographyVariant, TypographyElement, TypographyColor, CardHeaderProps, HeaderIconWithStatusProps, IconProps, IconName, ButtonProps, ButtonVariant, ButtonSize, InputProps, InputSize, LabelPlacement, SelectProps, SelectOption, ToggleProps, CheckboxProps, TooltipProps, TooltipPlacement, DialogProps, DialogActionsProps, DialogSize, BadgeProps, BadgeVariant, BadgeSize, ContainerProps, ContainerVariant, ContainerPadding, TabsProps, TabsListProps, TabProps, TabsPanelProps, PaginationProps, GlassCardProps, GlassColorOverlay, DataValueProps, DataValueGroupProps, DataValueVariant, DataValueSize, MessageStreamProps, StreamMessage, AppBarProps, AppBarBranding, ColorPickerPanelProps, PropertyConfig, PropertyKey, PropertyCategory, GlassAccentPosition, CaptureProps, CaptureHandle, CaptureRequest, CaptureArgs, CapturedImage, UseCaptureOptions, UseCaptureResult, } from './core';
+export type { NumberInputProps, NumberInputSize, SliderStatus, StatusThresholds, SideNavProps, SideNavHeaderProps, SideNavItemProps, SideNavSectionProps, SideNavFooterProps, ToastOptions, ToastStatus, ToastPosition, ToastProviderProps, PopoverProps, PopoverPlacement, MenuProps, MenuItemProps, BoxProps, FlexProps, GridProps, StackProps, CenterProps, SpacerProps, DividerProps, Breakpoint, ResponsiveValue, SpacingToken, ConfirmDialogProps, ConfirmOptions, ConfirmStatus, PinInputProps, CopyButtonProps, UseCopyToClipboardReturn, DataTableProps, DataTableColumn, DataTableRowDetailProps, DataTableRowDetailField, ImageGalleryProps, GalleryImage, ImageFrameProps, ImageColormap, ImagePanelProps, ChatPanelProps, ChatMessage, ChatBlock, ChatBlockEvent, ChatBlockAlert, ChatBlockTelemetry, ChatBlockProgress, ChatBlockTable, ChatBlockActions, ChatBlockChoice, ChatBlockConfirm, ChatBlockCommand, ChatBlockKV, ChatResponseFormat, ChatResponsePayload, ChatResponseParserOptions, McpToolContent, McpToolResult, ConnectionFormProps, ConnectionConfig, SidePanelProps, SidePanelPosition, HexViewerProps, HexHighlight, HexRegion, DecodedField, PacketHeaderEntry, ByteGrouping, OffsetBase, Endianness, LimitsBarProps, LimitsState, LogViewerProps, LogEntry, LogSeverity, PacketViewerProps, PacketItem, PacketItemLimits, PacketItemLimitsState, PacketViewMode, CommandBuilderProps, CommandParameter, CommandParamType, CommandHistoryEntry, FileExplorerProps, FileNode, FileViewMode, FileSortBy, MissionCalendarProps, CalendarEvent, CalendarTimeline, CalendarViewMode, ActivityStatus, ActivityType, ActivityPlannerProps, ActivityFormData, TypographyProps, TypographyVariant, TypographyElement, TypographyColor, CardHeaderProps, HeaderIconWithStatusProps, IconProps, IconName, LogoProps, LogoSubBrand, ButtonProps, ButtonVariant, ButtonSize, InputProps, InputSize, LabelPlacement, SelectProps, SelectOption, ToggleProps, CheckboxProps, TooltipProps, TooltipPlacement, DialogProps, DialogActionsProps, DialogSize, BadgeProps, BadgeVariant, BadgeSize, ContainerProps, ContainerVariant, ContainerPadding, TabsProps, TabsListProps, TabProps, TabsPanelProps, PaginationProps, GlassCardProps, GlassColorOverlay, DataValueProps, DataValueGroupProps, DataValueVariant, DataValueSize, MessageStreamProps, StreamMessage, AppBarProps, AppBarBranding, ColorPickerPanelProps, PropertyConfig, PropertyKey, PropertyCategory, GlassAccentPosition, CaptureProps, CaptureHandle, CaptureRequest, CaptureArgs, CapturedImage, UseCaptureOptions, UseCaptureResult, } from './core';
 export { ThemeProvider, useTheme, useThemeTokens, useScrollbarStyles, CardAccentProvider, useCardAccent, getSystemAccentColor, getAccentColorOptions, CARD_ACCENT_COLORS, SPACE_SYSTEM_COLORS, } from './theme';
 export type { ThemeProviderProps, ThemeContextValue, ThemeVariant, ThemeMode, ThemeTokens, ThemeColors, ThemeAnimation, ThemeFocus, LayoutTokens, BorderTokens, CardAccentKey, CardAccentColor, CardAccentContextValue, CardAccentProviderProps, } from './theme';
 export { DisplaySettingsProvider, useDisplaySettings, useDisplaySettingsOptional, getEffectiveCompactMode, PRESET_COLORS, GLASS_TINTS, } from './context';
@@ -43,3 +43,6 @@ export { ObjectInventoryPanel, LayerControlPanel, recommendedFlyDistance, } from
 export type { ObjectInventoryPanelProps, ObjectInventoryKind, LayerControlPanelProps, RenderLayers, GroupVisibility, GroupCounts, } from './panels';
 export type { SpacecraftPosition, Spacecraft, GroundStation, GroundTrackPoint, AccessData, AccessWindow, TelemetryData, OrbitalElements, Quaternion, EulerAngles, AngularVelocity, AttitudeData, PointingMode, EclipseInfo, DetailedLinkBudget, ThermalZone, ThermalData, ThrusterStatus, PropulsionSummary, ReactionWheelData, LVLHVector, LVLHState, ThrusterFireEvent, PlanetId, PlanetInfo, CategoryDef, } from './types';
 export { estimateOrbitalPeriod, estimateOrbitalVelocity, auToKm, normalizePlanetName, getPlanet, PLANETS, } from './types';
+export * from './cards';
+export * from './charts';
+export * from './visualizations';

package/dist/react/theme/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","names":[],"sources":["../../../src/react/theme/ThemeProvider.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Theme Provider\r\n *\r\n * Enterprise-grade theming system supporting Astro UX Design System and Zendir themes.\r\n * Full Tier 3 compliance with official Astro tokens (dark + light themes).\r\n *\r\n * Features:\r\n * - Multiple theme variants (Zen Hybrid default, astro, purple-hue, transparent)\r\n * - Light and dark modes\r\n * - Animation tokens with reduced-motion support\r\n * - Focus ring styles for accessibility\r\n * - CSS variable injection\r\n * - Local storage persistence\r\n */\r\n\r\nimport React, {\r\n  createContext,\r\n  useContext,\r\n  useState,\r\n  useEffect,\r\n  useMemo,\r\n  ReactNode,\r\n} from \"react\";\r\nimport {\r\n  astroThemeDark,\r\n  astroThemeLight,\r\n  hybridTheme,\r\n  purpleHueTheme,\r\n  nebulaTheme,\r\n  transparentTheme,\r\n  transparentMinimalTheme,\r\n} from \"../../tokens/themes\";\r\nimport {\r\n  computeBorderTokens,\r\n  type ThemeVariant,\r\n  type ThemeMode,\r\n  type ThemeColors,\r\n  type ThemeTokens,\r\n  type ThemeAnimation,\r\n  type ThemeFocus,\r\n  type LayoutTokens,\r\n  type BorderTokens,\r\n} from \"./types\";\r\n\r\n// Theme type shapes and derived-token helpers live in ./types so the token\r\n// build (which imports the theme definitions) never pulls in this provider.\r\n// Re-exported here to preserve the long-standing `@zendir/ui` import surface.\r\nexport type {\r\n  ThemeVariant,\r\n  ThemeMode,\r\n  ThemeColors,\r\n  ThemeTokens,\r\n  ThemeAnimation,\r\n  ThemeFocus,\r\n  LayoutTokens,\r\n  BorderTokens,\r\n};\r\n\r\nfunction adjustHexBrightness(hex: string, factor: number): string {\r\n  const normalized = hex.replace(\"#\", \"\").trim();\r\n  const expanded =\r\n    normalized.length === 3\r\n      ? normalized\r\n          .split(\"\")\r\n          .map((ch) => ch + ch)\r\n          .join(\"\")\r\n      : normalized;\r\n\r\n  if (!/^[0-9a-fA-F]{6}$/.test(expanded)) {\r\n    return hex;\r\n  }\r\n\r\n  const clamp = (value: number) =>\r\n    Math.max(0, Math.min(255, Math.round(value)));\r\n  const r = clamp(parseInt(expanded.slice(0, 2), 16) * factor);\r\n  const g = clamp(parseInt(expanded.slice(2, 4), 16) * factor);\r\n  const b = clamp(parseInt(expanded.slice(4, 6), 16) * factor);\r\n\r\n  const toHex = (value: number) => value.toString(16).padStart(2, \"0\");\r\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\r\n}\r\n\r\n// ============================================================================\r\n// Theme Context\r\n// ============================================================================\r\n\r\nexport interface ThemeContextValue {\r\n  theme: ThemeVariant;\r\n  mode: ThemeMode;\r\n  tokens: ThemeTokens;\r\n  prefersReducedMotion: boolean;\r\n  /** Custom accent color override (null = use theme default) */\r\n  accentColor: string | null;\r\n  setTheme: (theme: ThemeVariant) => void;\r\n  setMode: (mode: ThemeMode) => void;\r\n  toggleMode: () => void;\r\n  /** Override the accent color for the current theme */\r\n  setAccentColor: (color: string | null) => void;\r\n}\r\n\r\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\r\n\r\nexport interface ThemeProviderProps {\r\n  children: ReactNode;\r\n  /** Default theme variant */\r\n  theme?: ThemeVariant;\r\n  /** Alias for `theme` */\r\n  defaultVariant?: ThemeVariant;\r\n  /** Default color mode */\r\n  mode?: ThemeMode;\r\n  /** Alias for `mode` */\r\n  defaultMode?: ThemeMode;\r\n  /** Persist preferences to localStorage */\r\n  persist?: boolean;\r\n}\r\n\r\n// ============================================================================\r\n// Scrollbar Styling System\r\n// ============================================================================\r\n// Generates global CSS for thin, elegant, theme-aware scrollbars.\r\n//\r\n// Features:\r\n// - Ultra-thin (6px) scrollbar tracks with soft border radius\r\n// - Accent-colored thumb with hover/active brightness shifts\r\n// - Semi-transparent track that blends into the surface\r\n// - Auto-hide behaviour on modern browsers (overlay mode)\r\n// - Firefox support via scrollbar-width / scrollbar-color\r\n// - WCAG 2.1 AA compliant: sufficient contrast, respects reduced-motion\r\n// - Smooth transitions (disabled when prefers-reduced-motion)\r\n// - Scoped .zendir-scroll utility class for individual containers\r\n// ============================================================================\r\n\r\n/**\r\n * Converts a hex color to an rgba string helper.\r\n * Accepts 3/6/8-char hex codes (#rgb, #rrggbb, #rrggbbaa).\r\n */\r\nfunction hexToRgba(hex: string, alpha: number): string {\r\n  const clean = hex.replace(\"#\", \"\");\r\n  let r: number, g: number, b: number;\r\n  if (clean.length === 3) {\r\n    r = parseInt(clean[0] + clean[0], 16);\r\n    g = parseInt(clean[1] + clean[1], 16);\r\n    b = parseInt(clean[2] + clean[2], 16);\r\n  } else {\r\n    r = parseInt(clean.slice(0, 2), 16);\r\n    g = parseInt(clean.slice(2, 4), 16);\r\n    b = parseInt(clean.slice(4, 6), 16);\r\n  }\r\n  return `rgba(${r}, ${g}, ${b}, ${alpha})`;\r\n}\r\n\r\nfunction buildScrollbarCSS(\r\n  tokens: ThemeTokens,\r\n  mode: ThemeMode,\r\n  reducedMotion: boolean,\r\n): string {\r\n  const accent = tokens.colors.accent.primary;\r\n  const _surface = tokens.colors.background.surface; // eslint-disable-line @typescript-eslint/no-unused-vars -- reserved for future scrollbar track customisation\r\n  const _base = tokens.colors.background.base; // eslint-disable-line @typescript-eslint/no-unused-vars -- reserved for future scrollbar corner styling\r\n  const isLight = mode === \"light\";\r\n\r\n  // Thumb colors: accent-tinted, low opacity at rest, stronger on hover/active\r\n  const thumbRest = isLight ? hexToRgba(accent, 0.28) : hexToRgba(accent, 0.35);\r\n  const thumbHover = isLight\r\n    ? hexToRgba(accent, 0.48)\r\n    : hexToRgba(accent, 0.55);\r\n  const thumbActive = isLight\r\n    ? hexToRgba(accent, 0.64)\r\n    : hexToRgba(accent, 0.72);\r\n\r\n  // Track: nearly invisible surface blend\r\n  const trackColor = isLight\r\n    ? hexToRgba(accent, 0.04)\r\n    : hexToRgba(accent, 0.06);\r\n  const trackHover = isLight ? hexToRgba(accent, 0.08) : hexToRgba(accent, 0.1);\r\n\r\n  const transition = reducedMotion\r\n    ? \"none\"\r\n    : \"background-color 200ms ease, width 200ms ease, opacity 200ms ease\";\r\n  const thumbRadius = \"9999px\"; // pill shape\r\n\r\n  // Firefox colors (two-value syntax: thumb track)\r\n  const ffThumb = thumbRest;\r\n  const ffTrack = trackColor;\r\n\r\n  return `\r\n/* ═══════════════════════════════════════════════════════════════════════════\r\n   Zendir Scrollbar System — Thin · Elegant · Theme-Connected\r\n   ═══════════════════════════════════════════════════════════════════════════ */\r\n\r\n/* ── Firefox ────────────────────────────────────────────────────────────── */\r\n*,\r\n.zendir-scroll {\r\n  scrollbar-width: thin;\r\n  scrollbar-color: ${ffThumb} ${ffTrack};\r\n}\r\n\r\n/* ── Webkit / Blink (Chrome, Edge, Safari, Opera) ───────────────────────── */\r\n\r\n/* Global thin scrollbar */\r\n::-webkit-scrollbar {\r\n  width: 6px;\r\n  height: 6px;\r\n  background: transparent;\r\n}\r\n\r\n/* Track — nearly invisible, subtle on hover */\r\n::-webkit-scrollbar-track {\r\n  background: ${trackColor};\r\n  border-radius: ${thumbRadius};\r\n  margin: 2px;\r\n}\r\n::-webkit-scrollbar-track:hover {\r\n  background: ${trackHover};\r\n}\r\n\r\n/* Thumb — accent-tinted pill */\r\n::-webkit-scrollbar-thumb {\r\n  background: ${thumbRest};\r\n  border-radius: ${thumbRadius};\r\n  border: 1px solid transparent;\r\n  background-clip: padding-box;\r\n  transition: ${transition};\r\n  min-height: 32px;\r\n}\r\n::-webkit-scrollbar-thumb:hover {\r\n  background: ${thumbHover};\r\n  border-color: transparent;\r\n  background-clip: padding-box;\r\n}\r\n::-webkit-scrollbar-thumb:active {\r\n  background: ${thumbActive};\r\n  border-color: transparent;\r\n  background-clip: padding-box;\r\n}\r\n\r\n/* Corner — where horizontal & vertical scrollbars meet */\r\n::-webkit-scrollbar-corner {\r\n  background: transparent;\r\n}\r\n\r\n/* ── Utility class: zendir-scroll ────────────────────────────────────────\r\n   Apply to individual containers for scoped thin scrollbar.\r\n   Also enables overlay behaviour where supported.\r\n   e.g. <div className=\"zendir-scroll\" style={{overflow:'auto'}}>…</div>\r\n   ─────────────────────────────────────────────────────────────────────── */\r\n.zendir-scroll {\r\n  overflow: auto;\r\n  overflow: overlay; /* Chrome / Edge: auto-hide scrollbar */\r\n}\r\n.zendir-scroll::-webkit-scrollbar {\r\n  width: 5px;\r\n  height: 5px;\r\n}\r\n.zendir-scroll::-webkit-scrollbar-track {\r\n  background: transparent;\r\n  border-radius: ${thumbRadius};\r\n}\r\n.zendir-scroll::-webkit-scrollbar-thumb {\r\n  background: ${thumbRest};\r\n  border-radius: ${thumbRadius};\r\n  transition: ${transition};\r\n}\r\n.zendir-scroll::-webkit-scrollbar-thumb:hover {\r\n  background: ${thumbHover};\r\n}\r\n.zendir-scroll::-webkit-scrollbar-thumb:active {\r\n  background: ${thumbActive};\r\n}\r\n\r\n/* ── Utility: zendir-scroll--hidden ─────────────────────────────────────\r\n   Hides scrollbar visually but keeps scroll behaviour (accessible).\r\n   Content remains scrollable via mouse wheel / touch / keyboard.\r\n   ─────────────────────────────────────────────────────────────────────── */\r\n.zendir-scroll--hidden {\r\n  overflow: auto;\r\n  -ms-overflow-style: none;\r\n  scrollbar-width: none;\r\n}\r\n.zendir-scroll--hidden::-webkit-scrollbar {\r\n  display: none;\r\n}\r\n\r\n/* ── Focus-visible: keyboard users can still scroll with focus ─────────── */\r\n.zendir-scroll:focus-visible {\r\n  outline: 2px solid ${accent};\r\n  outline-offset: -2px;\r\n  border-radius: ${tokens.borderRadius.md};\r\n}\r\n\r\n/* ── Reduced Motion: disable scrollbar transitions ─────────────────────── */\r\n@media (prefers-reduced-motion: reduce) {\r\n  ::-webkit-scrollbar-thumb,\r\n  .zendir-scroll::-webkit-scrollbar-thumb {\r\n    transition: none !important;\r\n  }\r\n}\r\n\r\n/* ── High Contrast Mode: ensure scrollbar is visible ───────────────────── */\r\n@media (forced-colors: active) {\r\n  ::-webkit-scrollbar-thumb {\r\n    background: ButtonText !important;\r\n  }\r\n  ::-webkit-scrollbar-track {\r\n    background: Canvas !important;\r\n  }\r\n}\r\n`.trim();\r\n}\r\n\r\n/**\r\n * useScrollbarStyles — returns inline React.CSSProperties for a\r\n * scrollable container that matches the current Zendir theme.\r\n *\r\n * Use when you need programmatic control rather than the\r\n * `zendir-scroll` CSS class.\r\n *\r\n * @example\r\n * ```tsx\r\n * const scrollStyle = useScrollbarStyles();\r\n * <div style={{ maxHeight: 400, ...scrollStyle }}>…</div>\r\n * ```\r\n */\r\nexport function useScrollbarStyles(): React.CSSProperties {\r\n  const { tokens, mode } = useTheme();\r\n  return useMemo((): React.CSSProperties => {\r\n    const accent = tokens.colors.accent.primary;\r\n    const isLight = mode === \"light\";\r\n    const thumbColor = isLight\r\n      ? hexToRgba(accent, 0.28)\r\n      : hexToRgba(accent, 0.35);\r\n    const trackColor = isLight\r\n      ? hexToRgba(accent, 0.04)\r\n      : hexToRgba(accent, 0.06);\r\n    return {\r\n      // Firefox\r\n      scrollbarWidth: \"thin\" as const,\r\n      scrollbarColor: `${thumbColor} ${trackColor}`,\r\n      overflow: \"auto\",\r\n    };\r\n  }, [tokens, mode]);\r\n}\r\n\r\n/**\r\n * ThemeProvider - Enterprise theme context provider\r\n *\r\n * Provides theme tokens, mode switching, and accessibility features\r\n * to all child components.\r\n *\r\n * @example\r\n * ```tsx\r\n * <ThemeProvider theme=\"hybrid\" mode=\"dark\">  // Zen (Hybrid) is the default\r\n *   <App />\r\n * </ThemeProvider>\r\n * ```\r\n */\r\nexport function ThemeProvider({\r\n  children,\r\n  theme: themeProp,\r\n  defaultVariant,\r\n  mode: modeProp,\r\n  defaultMode: defaultModeProp,\r\n  persist = true,\r\n}: ThemeProviderProps): React.ReactElement {\r\n  const defaultTheme = themeProp ?? defaultVariant ?? \"hybrid\";\r\n  const defaultMode = modeProp ?? defaultModeProp ?? \"dark\";\r\n  // Initialize theme from localStorage or defaults\r\n  const [theme, setThemeState] = useState<ThemeVariant>(() => {\r\n    if (persist && typeof window !== \"undefined\") {\r\n      const saved = localStorage.getItem(\"zendir-ui-theme\");\r\n      if (\r\n        saved === \"astro\" ||\r\n        saved === \"zendir\" ||\r\n        saved === \"hybrid\" ||\r\n        saved === \"nebula\" ||\r\n        saved === \"purple-hue\" ||\r\n        saved === \"transparent\" ||\r\n        saved === \"transparent-bold\" ||\r\n        saved === \"transparent-minimal\"\r\n      ) {\r\n        return saved as ThemeVariant;\r\n      }\r\n    }\r\n    return defaultTheme;\r\n  });\r\n\r\n  const [mode, setModeState] = useState<ThemeMode>(() => {\r\n    if (persist && typeof window !== \"undefined\") {\r\n      const saved = localStorage.getItem(\"zendir-ui-mode\");\r\n      if (saved === \"light\" || saved === \"dark\") {\r\n        return saved;\r\n      }\r\n    }\r\n    return defaultMode;\r\n  });\r\n\r\n  // Detect reduced motion preference\r\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\r\n\r\n  useEffect(() => {\r\n    if (typeof window === \"undefined\") return;\r\n\r\n    const mediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\r\n    setPrefersReducedMotion(mediaQuery.matches);\r\n\r\n    const handler = (e: MediaQueryListEvent) =>\r\n      setPrefersReducedMotion(e.matches);\r\n    mediaQuery.addEventListener(\"change\", handler);\r\n    return () => mediaQuery.removeEventListener(\"change\", handler);\r\n  }, []);\r\n\r\n  // Theme setters\r\n  const setTheme = (newTheme: ThemeVariant) => {\r\n    setThemeState(newTheme);\r\n    if (persist && typeof window !== \"undefined\") {\r\n      localStorage.setItem(\"zendir-ui-theme\", newTheme);\r\n    }\r\n  };\r\n\r\n  const setMode = (newMode: ThemeMode) => {\r\n    setModeState(newMode);\r\n    if (persist && typeof window !== \"undefined\") {\r\n      localStorage.setItem(\"zendir-ui-mode\", newMode);\r\n    }\r\n  };\r\n\r\n  const toggleMode = () => {\r\n    setMode(mode === \"dark\" ? \"light\" : \"dark\");\r\n  };\r\n\r\n  // Accent color override\r\n  const [accentColor, setAccentColorState] = useState<string | null>(() => {\r\n    if (persist && typeof window !== \"undefined\") {\r\n      return localStorage.getItem(\"zendir-ui-accent\") || null;\r\n    }\r\n    return null;\r\n  });\r\n\r\n  const setAccentColor = (color: string | null) => {\r\n    setAccentColorState(color);\r\n    if (persist && typeof window !== \"undefined\") {\r\n      if (color) {\r\n        localStorage.setItem(\"zendir-ui-accent\", color);\r\n      } else {\r\n        localStorage.removeItem(\"zendir-ui-accent\");\r\n      }\r\n    }\r\n  };\r\n\r\n  // Get theme tokens (card border styles computed so all cards use theme-driven borders)\r\n  const tokens = useMemo((): ThemeTokens => {\r\n    // If light mode is selected, always use Astro Light theme (unified light mode)\r\n    // regardless of the selected theme variant\r\n    const base =\r\n      mode === \"light\"\r\n        ? astroThemeLight\r\n        : theme === \"astro\"\r\n          ? astroThemeDark\r\n          : theme === \"hybrid\"\r\n            ? hybridTheme\r\n            : theme === \"nebula\"\r\n              ? nebulaTheme\r\n              : theme === \"transparent\" || theme === \"transparent-bold\"\r\n                ? transparentTheme\r\n                : theme === \"transparent-minimal\"\r\n                  ? transparentMinimalTheme\r\n                  : purpleHueTheme;\r\n    const isTransparent =\r\n      theme === \"transparent\" ||\r\n      theme === \"transparent-bold\" ||\r\n      theme === \"transparent-minimal\";\r\n    const isMinimal = theme === \"transparent-minimal\";\r\n\r\n    // For transparent-minimal: use visible accent-colored borders.\r\n    // For other transparent themes: use subtle fadedBoxShadow.\r\n    // Accent overrides are intentionally scoped to transparent variants only,\r\n    // so switching to Astro/Hybrid/Purple-Hue restores each theme's native accent.\r\n    const resolvedAccent =\r\n      isTransparent && accentColor\r\n        ? {\r\n            primary: accentColor,\r\n            secondary: adjustHexBrightness(accentColor, 1.2),\r\n            tertiary: adjustHexBrightness(accentColor, 0.85),\r\n          }\r\n        : base.colors.accent;\r\n\r\n    const accentPrimary = resolvedAccent.primary;\r\n    const accentBorderMuted = `${accentPrimary}40`; // 25% opacity\r\n    const accentBorderDefault = `${accentPrimary}66`; // 40% opacity\r\n    const accentFadedBoxShadow = `inset 0 1px 0 ${hexToRgba(accentPrimary, 0.12)}, inset 0 -1px 0 rgba(0, 0, 0, 0.05), inset 1px 0 0 ${hexToRgba(accentPrimary, 0.06)}, inset -1px 0 0 ${hexToRgba(accentPrimary, 0.06)}`;\r\n\r\n    const cardStyle = isMinimal\r\n      ? { border: `1px solid ${accentBorderMuted}` }\r\n      : isTransparent\r\n        ? { border: \"none\" as const, boxShadow: accentFadedBoxShadow }\r\n        : { border: `1px solid ${base.colors.border.muted}` };\r\n    const cardStyleDashed = isMinimal\r\n      ? { border: `1px dashed ${accentBorderMuted}` }\r\n      : isTransparent\r\n        ? { border: \"none\" as const, boxShadow: accentFadedBoxShadow }\r\n        : { border: `1px dashed ${base.colors.border.muted}` };\r\n    const cardStyleDefault = isMinimal\r\n      ? { border: `1px solid ${accentBorderDefault}` }\r\n      : isTransparent\r\n        ? { border: \"none\" as const, boxShadow: accentFadedBoxShadow }\r\n        : { border: `1px solid ${base.colors.border.default}` };\r\n    // Compute border tokens from the resolved theme colors\r\n    const resolvedColors: ThemeColors = {\r\n      ...base.colors,\r\n      accent: resolvedAccent,\r\n      border: {\r\n        ...base.colors.border,\r\n        cardStyle,\r\n        cardStyleDashed,\r\n        cardStyleDefault,\r\n      },\r\n    };\r\n\r\n    return {\r\n      ...base,\r\n      colors: resolvedColors,\r\n      borders: computeBorderTokens(resolvedColors),\r\n    } as ThemeTokens;\r\n  }, [theme, mode, accentColor]);\r\n\r\n  // Apply CSS variables to document\r\n  useEffect(() => {\r\n    if (typeof document === \"undefined\") return;\r\n\r\n    const root = document.documentElement;\r\n    const {\r\n      colors,\r\n      typography,\r\n      spacing,\r\n      borderRadius,\r\n      animation,\r\n      focus,\r\n      shadows,\r\n    } = tokens;\r\n\r\n    // Theme attributes. tokens.css keys its variable blocks on the VARIANT\r\n    // via [data-theme=\"<variant>\"] and the mode via [data-mode=\"light\"], so\r\n    // data-theme must carry the variant and data-mode the light/dark mode —\r\n    // otherwise the static --zendir-* CSS variables never leave the default\r\n    // (hybrid) block. data-variant is retained for backward compatibility.\r\n    root.setAttribute(\"data-theme\", theme);\r\n    root.setAttribute(\"data-mode\", mode);\r\n    root.setAttribute(\"data-variant\", theme);\r\n\r\n    // Background colors\r\n    root.style.setProperty(\"--color-background-base\", colors.background.base);\r\n    root.style.setProperty(\r\n      \"--color-background-surface\",\r\n      colors.background.surface,\r\n    );\r\n    root.style.setProperty(\r\n      \"--color-background-elevated\",\r\n      colors.background.elevated,\r\n    );\r\n    root.style.setProperty(\r\n      \"--color-background-overlay\",\r\n      colors.background.overlay,\r\n    );\r\n\r\n    // Border colors\r\n    root.style.setProperty(\"--color-border\", colors.border.default);\r\n    root.style.setProperty(\"--color-border-muted\", colors.border.muted);\r\n    root.style.setProperty(\"--color-border-focus\", colors.border.focus);\r\n\r\n    // Text colors\r\n    root.style.setProperty(\"--color-text-primary\", colors.text.primary);\r\n    root.style.setProperty(\"--color-text-secondary\", colors.text.secondary);\r\n    root.style.setProperty(\"--color-text-tertiary\", colors.text.tertiary);\r\n    root.style.setProperty(\"--color-text-inverse\", colors.text.inverse);\r\n\r\n    // Status colors\r\n    root.style.setProperty(\"--color-status-normal\", colors.status.normal);\r\n    root.style.setProperty(\"--color-status-standby\", colors.status.standby);\r\n    root.style.setProperty(\"--color-status-caution\", colors.status.caution);\r\n    root.style.setProperty(\"--color-status-serious\", colors.status.serious);\r\n    root.style.setProperty(\"--color-status-critical\", colors.status.critical);\r\n    root.style.setProperty(\"--color-status-off\", colors.status.off);\r\n\r\n    // Interactive colors\r\n    root.style.setProperty(\r\n      \"--color-interactive-default\",\r\n      colors.interactive.default,\r\n    );\r\n    root.style.setProperty(\r\n      \"--color-interactive-hover\",\r\n      colors.interactive.hover,\r\n    );\r\n    root.style.setProperty(\r\n      \"--color-interactive-active\",\r\n      colors.interactive.active,\r\n    );\r\n    root.style.setProperty(\r\n      \"--color-interactive-disabled\",\r\n      colors.interactive.disabled,\r\n    );\r\n\r\n    // Accent colors\r\n    root.style.setProperty(\"--color-accent-primary\", colors.accent.primary);\r\n    root.style.setProperty(\"--color-accent-secondary\", colors.accent.secondary);\r\n    root.style.setProperty(\"--color-accent-tertiary\", colors.accent.tertiary);\r\n\r\n    // Typography\r\n    root.style.setProperty(\r\n      \"--font-family-heading\",\r\n      typography.fontFamily.heading || typography.fontFamily.primary,\r\n    );\r\n    root.style.setProperty(\r\n      \"--font-family-primary\",\r\n      typography.fontFamily.primary,\r\n    );\r\n    root.style.setProperty(\"--font-family-mono\", typography.fontFamily.mono);\r\n\r\n    // Spacing (full scale so CSS and layout can pull from SDK)\r\n    root.style.setProperty(\"--spacing-xxs\", spacing.xxs);\r\n    root.style.setProperty(\"--spacing-xs\", spacing.xs);\r\n    root.style.setProperty(\"--spacing-sm\", spacing.sm);\r\n    root.style.setProperty(\"--spacing-smd\", spacing.smd);\r\n    root.style.setProperty(\"--spacing-md\", spacing.md);\r\n    root.style.setProperty(\"--spacing-mdl\", spacing.mdl);\r\n    root.style.setProperty(\"--spacing-lg\", spacing.lg);\r\n    root.style.setProperty(\"--spacing-xl\", spacing.xl);\r\n    root.style.setProperty(\"--spacing-xxl\", spacing.xxl);\r\n\r\n    // Border radius\r\n    root.style.setProperty(\"--radius-sm\", borderRadius.sm);\r\n    root.style.setProperty(\"--radius-md\", borderRadius.md);\r\n    root.style.setProperty(\"--radius-lg\", borderRadius.lg);\r\n    root.style.setProperty(\"--radius-xl\", borderRadius.xl);\r\n\r\n    // Animation (respect reduced motion)\r\n    const motionMultiplier = prefersReducedMotion ? 0 : 1;\r\n    root.style.setProperty(\r\n      \"--animation-fast\",\r\n      prefersReducedMotion ? \"none\" : animation.fast,\r\n    );\r\n    root.style.setProperty(\r\n      \"--animation-normal\",\r\n      prefersReducedMotion ? \"none\" : animation.normal,\r\n    );\r\n    root.style.setProperty(\r\n      \"--animation-slow\",\r\n      prefersReducedMotion ? \"none\" : animation.slow,\r\n    );\r\n    root.style.setProperty(\r\n      \"--duration-fast\",\r\n      `${animation.duration.fast * motionMultiplier}ms`,\r\n    );\r\n    root.style.setProperty(\r\n      \"--duration-normal\",\r\n      `${animation.duration.normal * motionMultiplier}ms`,\r\n    );\r\n    root.style.setProperty(\r\n      \"--duration-slow\",\r\n      `${animation.duration.slow * motionMultiplier}ms`,\r\n    );\r\n\r\n    // Focus\r\n    root.style.setProperty(\"--focus-ring-color\", focus.color);\r\n    root.style.setProperty(\"--focus-ring-width\", focus.width);\r\n    root.style.setProperty(\"--focus-ring-offset\", focus.offset);\r\n\r\n    // Shadows\r\n    root.style.setProperty(\"--shadow-sm\", shadows.sm);\r\n    root.style.setProperty(\"--shadow-md\", shadows.md);\r\n    root.style.setProperty(\"--shadow-lg\", shadows.lg);\r\n    root.style.setProperty(\"--shadow-xl\", shadows.xl);\r\n\r\n    // Apply base styles to body\r\n    document.body.style.backgroundColor = colors.background.base;\r\n    document.body.style.color = colors.text.primary;\r\n    document.body.style.fontFamily = typography.fontFamily.primary;\r\n  }, [tokens, theme, mode, prefersReducedMotion]);\r\n\r\n  // ──────────────────────────────────────────────────────────────────────────\r\n  // Scrollbar Styles — thin, elegant, theme-connected, fully accessible\r\n  // ──────────────────────────────────────────────────────────────────────────\r\n  const scrollbarCSS = useMemo(\r\n    () => buildScrollbarCSS(tokens, mode, prefersReducedMotion),\r\n    [tokens, mode, prefersReducedMotion],\r\n  );\r\n\r\n  const value: ThemeContextValue = useMemo(\r\n    () => ({\r\n      theme,\r\n      mode,\r\n      tokens,\r\n      prefersReducedMotion,\r\n      accentColor,\r\n      setTheme,\r\n      setMode,\r\n      toggleMode,\r\n      setAccentColor,\r\n    }),\r\n    [theme, mode, tokens, prefersReducedMotion, accentColor],\r\n  );\r\n\r\n  // Global reduced-motion rule — ensures ALL animations and transitions across\r\n  // every Zendir component respect the OS preference (WCAG 2.3.3).\r\n  // Uses 0.01ms (not 0) so animation-end events still fire correctly.\r\n  const reducedMotionCSS = `@media (prefers-reduced-motion: reduce) {\r\n  *, *::before, *::after {\r\n    animation-duration: 0.01ms !important;\r\n    animation-iteration-count: 1 !important;\r\n    transition-duration: 0.01ms !important;\r\n    scroll-behavior: auto !important;\r\n  }\r\n}`;\r\n\r\n  return (\r\n    <ThemeContext.Provider value={value}>\r\n      <style\r\n        data-zendir-scrollbar=\"\"\r\n        dangerouslySetInnerHTML={{ __html: scrollbarCSS }}\r\n      />\r\n      <style\r\n        data-zendir-reduced-motion=\"\"\r\n        dangerouslySetInnerHTML={{ __html: reducedMotionCSS }}\r\n      />\r\n      {children}\r\n    </ThemeContext.Provider>\r\n  );\r\n}\r\n\r\n/**\r\n * useTheme - Access theme context\r\n *\r\n * @throws Error if used outside ThemeProvider\r\n *\r\n * @example\r\n * ```tsx\r\n * const { tokens, mode, toggleMode } = useTheme();\r\n * ```\r\n */\r\nexport function useTheme(): ThemeContextValue {\r\n  const context = useContext(ThemeContext);\r\n  if (!context) {\r\n    throw new Error(\"useTheme must be used within a ThemeProvider\");\r\n  }\r\n  return context;\r\n}\r\n\r\n/**\r\n * useThemeTokens - Access only theme tokens (for memoization)\r\n */\r\nexport function useThemeTokens(): ThemeTokens {\r\n  return useTheme().tokens;\r\n}\r\n"],"mappings":"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"}
+{"version":3,"file":"ThemeProvider.js","names":[],"sources":["../../../src/react/theme/ThemeProvider.tsx"],"sourcesContent":["/**\n * @zendir/ui - Theme Provider\n *\n * Enterprise-grade theming system supporting Astro UX Design System and Zendir themes.\n * Full Tier 3 compliance with official Astro tokens (dark + light themes).\n *\n * Features:\n * - Multiple theme variants (Zen Hybrid default, astro, purple-hue, transparent)\n * - Light and dark modes\n * - Animation tokens with reduced-motion support\n * - Focus ring styles for accessibility\n * - CSS variable injection\n * - Local storage persistence\n */\n\nimport React, {\n  createContext,\n  useContext,\n  useState,\n  useEffect,\n  useMemo,\n  ReactNode,\n} from \"react\";\nimport {\n  astroThemeDark,\n  astroThemeLight,\n  hybridTheme,\n  purpleHueTheme,\n  nebulaTheme,\n  transparentTheme,\n  transparentMinimalTheme,\n} from \"../../tokens/themes\";\nimport {\n  computeBorderTokens,\n  type ThemeVariant,\n  type ThemeMode,\n  type ThemeColors,\n  type ThemeTokens,\n  type ThemeAnimation,\n  type ThemeFocus,\n  type LayoutTokens,\n  type BorderTokens,\n} from \"./types\";\n\n// Theme type shapes and derived-token helpers live in ./types so the token\n// build (which imports the theme definitions) never pulls in this provider.\n// Re-exported here to preserve the long-standing `@zendir/ui` import surface.\nexport type {\n  ThemeVariant,\n  ThemeMode,\n  ThemeColors,\n  ThemeTokens,\n  ThemeAnimation,\n  ThemeFocus,\n  LayoutTokens,\n  BorderTokens,\n};\n\nfunction adjustHexBrightness(hex: string, factor: number): string {\n  const normalized = hex.replace(\"#\", \"\").trim();\n  const expanded =\n    normalized.length === 3\n      ? normalized\n          .split(\"\")\n          .map((ch) => ch + ch)\n          .join(\"\")\n      : normalized;\n\n  if (!/^[0-9a-fA-F]{6}$/.test(expanded)) {\n    return hex;\n  }\n\n  const clamp = (value: number) =>\n    Math.max(0, Math.min(255, Math.round(value)));\n  const r = clamp(parseInt(expanded.slice(0, 2), 16) * factor);\n  const g = clamp(parseInt(expanded.slice(2, 4), 16) * factor);\n  const b = clamp(parseInt(expanded.slice(4, 6), 16) * factor);\n\n  const toHex = (value: number) => value.toString(16).padStart(2, \"0\");\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\n// ============================================================================\n// Theme Context\n// ============================================================================\n\nexport interface ThemeContextValue {\n  theme: ThemeVariant;\n  mode: ThemeMode;\n  tokens: ThemeTokens;\n  prefersReducedMotion: boolean;\n  /** Custom accent color override (null = use theme default) */\n  accentColor: string | null;\n  setTheme: (theme: ThemeVariant) => void;\n  setMode: (mode: ThemeMode) => void;\n  toggleMode: () => void;\n  /** Override the accent color for the current theme */\n  setAccentColor: (color: string | null) => void;\n}\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\n\nexport interface ThemeProviderProps {\n  children: ReactNode;\n  /** Default theme variant */\n  theme?: ThemeVariant;\n  /** Alias for `theme` */\n  defaultVariant?: ThemeVariant;\n  /** Default color mode */\n  mode?: ThemeMode;\n  /** Alias for `mode` */\n  defaultMode?: ThemeMode;\n  /** Persist preferences to localStorage */\n  persist?: boolean;\n}\n\n// ============================================================================\n// Scrollbar Styling System\n// ============================================================================\n// Generates global CSS for thin, elegant, theme-aware scrollbars.\n//\n// Features:\n// - Ultra-thin (6px) scrollbar tracks with soft border radius\n// - Accent-colored thumb with hover/active brightness shifts\n// - Semi-transparent track that blends into the surface\n// - Auto-hide behaviour on modern browsers (overlay mode)\n// - Firefox support via scrollbar-width / scrollbar-color\n// - WCAG 2.1 AA compliant: sufficient contrast, respects reduced-motion\n// - Smooth transitions (disabled when prefers-reduced-motion)\n// - Scoped .zendir-scroll utility class for individual containers\n// ============================================================================\n\n/**\n * Converts a hex color to an rgba string helper.\n * Accepts 3/6/8-char hex codes (#rgb, #rrggbb, #rrggbbaa).\n */\nfunction hexToRgba(hex: string, alpha: number): string {\n  const clean = hex.replace(\"#\", \"\");\n  let r: number, g: number, b: number;\n  if (clean.length === 3) {\n    r = parseInt(clean[0] + clean[0], 16);\n    g = parseInt(clean[1] + clean[1], 16);\n    b = parseInt(clean[2] + clean[2], 16);\n  } else {\n    r = parseInt(clean.slice(0, 2), 16);\n    g = parseInt(clean.slice(2, 4), 16);\n    b = parseInt(clean.slice(4, 6), 16);\n  }\n  return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n}\n\nfunction buildScrollbarCSS(\n  tokens: ThemeTokens,\n  mode: ThemeMode,\n  reducedMotion: boolean,\n): string {\n  const accent = tokens.colors.accent.primary;\n  const _surface = tokens.colors.background.surface; // eslint-disable-line @typescript-eslint/no-unused-vars -- reserved for future scrollbar track customisation\n  const _base = tokens.colors.background.base; // eslint-disable-line @typescript-eslint/no-unused-vars -- reserved for future scrollbar corner styling\n  const isLight = mode === \"light\";\n\n  // Thumb colors: accent-tinted, low opacity at rest, stronger on hover/active\n  const thumbRest = isLight ? hexToRgba(accent, 0.28) : hexToRgba(accent, 0.35);\n  const thumbHover = isLight\n    ? hexToRgba(accent, 0.48)\n    : hexToRgba(accent, 0.55);\n  const thumbActive = isLight\n    ? hexToRgba(accent, 0.64)\n    : hexToRgba(accent, 0.72);\n\n  // Track: nearly invisible surface blend\n  const trackColor = isLight\n    ? hexToRgba(accent, 0.04)\n    : hexToRgba(accent, 0.06);\n  const trackHover = isLight ? hexToRgba(accent, 0.08) : hexToRgba(accent, 0.1);\n\n  const transition = reducedMotion\n    ? \"none\"\n    : \"background-color 200ms ease, width 200ms ease, opacity 200ms ease\";\n  const thumbRadius = \"9999px\"; // pill shape\n\n  // Firefox colors (two-value syntax: thumb track)\n  const ffThumb = thumbRest;\n  const ffTrack = trackColor;\n\n  return `\n/* ═══════════════════════════════════════════════════════════════════════════\n   Zendir Scrollbar System — Thin · Elegant · Theme-Connected\n   ═══════════════════════════════════════════════════════════════════════════ */\n\n/* ── Firefox ────────────────────────────────────────────────────────────── */\n*,\n.zendir-scroll {\n  scrollbar-width: thin;\n  scrollbar-color: ${ffThumb} ${ffTrack};\n}\n\n/* ── Webkit / Blink (Chrome, Edge, Safari, Opera) ───────────────────────── */\n\n/* Global thin scrollbar */\n::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n  background: transparent;\n}\n\n/* Track — nearly invisible, subtle on hover */\n::-webkit-scrollbar-track {\n  background: ${trackColor};\n  border-radius: ${thumbRadius};\n  margin: 2px;\n}\n::-webkit-scrollbar-track:hover {\n  background: ${trackHover};\n}\n\n/* Thumb — accent-tinted pill */\n::-webkit-scrollbar-thumb {\n  background: ${thumbRest};\n  border-radius: ${thumbRadius};\n  border: 1px solid transparent;\n  background-clip: padding-box;\n  transition: ${transition};\n  min-height: 32px;\n}\n::-webkit-scrollbar-thumb:hover {\n  background: ${thumbHover};\n  border-color: transparent;\n  background-clip: padding-box;\n}\n::-webkit-scrollbar-thumb:active {\n  background: ${thumbActive};\n  border-color: transparent;\n  background-clip: padding-box;\n}\n\n/* Corner — where horizontal & vertical scrollbars meet */\n::-webkit-scrollbar-corner {\n  background: transparent;\n}\n\n/* ── Utility class: zendir-scroll ────────────────────────────────────────\n   Apply to individual containers for scoped thin scrollbar.\n   Also enables overlay behaviour where supported.\n   e.g. <div className=\"zendir-scroll\" style={{overflow:'auto'}}>…</div>\n   ─────────────────────────────────────────────────────────────────────── */\n.zendir-scroll {\n  overflow: auto;\n  overflow: overlay; /* Chrome / Edge: auto-hide scrollbar */\n}\n.zendir-scroll::-webkit-scrollbar {\n  width: 5px;\n  height: 5px;\n}\n.zendir-scroll::-webkit-scrollbar-track {\n  background: transparent;\n  border-radius: ${thumbRadius};\n}\n.zendir-scroll::-webkit-scrollbar-thumb {\n  background: ${thumbRest};\n  border-radius: ${thumbRadius};\n  transition: ${transition};\n}\n.zendir-scroll::-webkit-scrollbar-thumb:hover {\n  background: ${thumbHover};\n}\n.zendir-scroll::-webkit-scrollbar-thumb:active {\n  background: ${thumbActive};\n}\n\n/* ── Utility: zendir-scroll--hidden ─────────────────────────────────────\n   Hides scrollbar visually but keeps scroll behaviour (accessible).\n   Content remains scrollable via mouse wheel / touch / keyboard.\n   ─────────────────────────────────────────────────────────────────────── */\n.zendir-scroll--hidden {\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n.zendir-scroll--hidden::-webkit-scrollbar {\n  display: none;\n}\n\n/* ── Focus-visible: keyboard users can still scroll with focus ─────────── */\n.zendir-scroll:focus-visible {\n  outline: 2px solid ${accent};\n  outline-offset: -2px;\n  border-radius: ${tokens.borderRadius.md};\n}\n\n/* ── Reduced Motion: disable scrollbar transitions ─────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  ::-webkit-scrollbar-thumb,\n  .zendir-scroll::-webkit-scrollbar-thumb {\n    transition: none !important;\n  }\n}\n\n/* ── High Contrast Mode: ensure scrollbar is visible ───────────────────── */\n@media (forced-colors: active) {\n  ::-webkit-scrollbar-thumb {\n    background: ButtonText !important;\n  }\n  ::-webkit-scrollbar-track {\n    background: Canvas !important;\n  }\n}\n`.trim();\n}\n\n/**\n * useScrollbarStyles — returns inline React.CSSProperties for a\n * scrollable container that matches the current Zendir theme.\n *\n * Use when you need programmatic control rather than the\n * `zendir-scroll` CSS class.\n *\n * @example\n * ```tsx\n * const scrollStyle = useScrollbarStyles();\n * <div style={{ maxHeight: 400, ...scrollStyle }}>…</div>\n * ```\n */\nexport function useScrollbarStyles(): React.CSSProperties {\n  const { tokens, mode } = useTheme();\n  return useMemo((): React.CSSProperties => {\n    const accent = tokens.colors.accent.primary;\n    const isLight = mode === \"light\";\n    const thumbColor = isLight\n      ? hexToRgba(accent, 0.28)\n      : hexToRgba(accent, 0.35);\n    const trackColor = isLight\n      ? hexToRgba(accent, 0.04)\n      : hexToRgba(accent, 0.06);\n    return {\n      // Firefox\n      scrollbarWidth: \"thin\" as const,\n      scrollbarColor: `${thumbColor} ${trackColor}`,\n      overflow: \"auto\",\n    };\n  }, [tokens, mode]);\n}\n\n/**\n * ThemeProvider - Enterprise theme context provider\n *\n * Provides theme tokens, mode switching, and accessibility features\n * to all child components.\n *\n * @example\n * ```tsx\n * <ThemeProvider theme=\"hybrid\" mode=\"dark\">  // Zen (Hybrid) is the default\n *   <App />\n * </ThemeProvider>\n * ```\n */\nexport function ThemeProvider({\n  children,\n  theme: themeProp,\n  defaultVariant,\n  mode: modeProp,\n  defaultMode: defaultModeProp,\n  persist = true,\n}: ThemeProviderProps): React.ReactElement {\n  const defaultTheme = themeProp ?? defaultVariant ?? \"hybrid\";\n  const defaultMode = modeProp ?? defaultModeProp ?? \"dark\";\n  // Initialize theme from localStorage or defaults\n  const [theme, setThemeState] = useState<ThemeVariant>(() => {\n    if (persist && typeof window !== \"undefined\") {\n      const saved = localStorage.getItem(\"zendir-ui-theme\");\n      if (\n        saved === \"astro\" ||\n        saved === \"zendir\" ||\n        saved === \"hybrid\" ||\n        saved === \"nebula\" ||\n        saved === \"purple-hue\" ||\n        saved === \"transparent\" ||\n        saved === \"transparent-bold\" ||\n        saved === \"transparent-minimal\"\n      ) {\n        return saved as ThemeVariant;\n      }\n    }\n    return defaultTheme;\n  });\n\n  const [mode, setModeState] = useState<ThemeMode>(() => {\n    if (persist && typeof window !== \"undefined\") {\n      const saved = localStorage.getItem(\"zendir-ui-mode\");\n      if (saved === \"light\" || saved === \"dark\") {\n        return saved;\n      }\n    }\n    return defaultMode;\n  });\n\n  // Detect reduced motion preference\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n\n    const mediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n    setPrefersReducedMotion(mediaQuery.matches);\n\n    const handler = (e: MediaQueryListEvent) =>\n      setPrefersReducedMotion(e.matches);\n    mediaQuery.addEventListener(\"change\", handler);\n    return () => mediaQuery.removeEventListener(\"change\", handler);\n  }, []);\n\n  // Theme setters\n  const setTheme = (newTheme: ThemeVariant) => {\n    setThemeState(newTheme);\n    if (persist && typeof window !== \"undefined\") {\n      localStorage.setItem(\"zendir-ui-theme\", newTheme);\n    }\n  };\n\n  const setMode = (newMode: ThemeMode) => {\n    setModeState(newMode);\n    if (persist && typeof window !== \"undefined\") {\n      localStorage.setItem(\"zendir-ui-mode\", newMode);\n    }\n  };\n\n  const toggleMode = () => {\n    setMode(mode === \"dark\" ? \"light\" : \"dark\");\n  };\n\n  // Accent color override\n  const [accentColor, setAccentColorState] = useState<string | null>(() => {\n    if (persist && typeof window !== \"undefined\") {\n      return localStorage.getItem(\"zendir-ui-accent\") || null;\n    }\n    return null;\n  });\n\n  const setAccentColor = (color: string | null) => {\n    setAccentColorState(color);\n    if (persist && typeof window !== \"undefined\") {\n      if (color) {\n        localStorage.setItem(\"zendir-ui-accent\", color);\n      } else {\n        localStorage.removeItem(\"zendir-ui-accent\");\n      }\n    }\n  };\n\n  // Get theme tokens (card border styles computed so all cards use theme-driven borders)\n  const tokens = useMemo((): ThemeTokens => {\n    // If light mode is selected, always use Astro Light theme (unified light mode)\n    // regardless of the selected theme variant\n    const base =\n      mode === \"light\"\n        ? astroThemeLight\n        : theme === \"astro\"\n          ? astroThemeDark\n          : theme === \"hybrid\"\n            ? hybridTheme\n            : theme === \"nebula\"\n              ? nebulaTheme\n              : theme === \"transparent\" || theme === \"transparent-bold\"\n                ? transparentTheme\n                : theme === \"transparent-minimal\"\n                  ? transparentMinimalTheme\n                  : purpleHueTheme;\n    const isTransparent =\n      theme === \"transparent\" ||\n      theme === \"transparent-bold\" ||\n      theme === \"transparent-minimal\";\n    const isMinimal = theme === \"transparent-minimal\";\n\n    // For transparent-minimal: use visible accent-colored borders.\n    // For other transparent themes: use subtle fadedBoxShadow.\n    // Accent overrides are intentionally scoped to transparent variants only,\n    // so switching to Astro/Hybrid/Purple-Hue restores each theme's native accent.\n    const resolvedAccent =\n      isTransparent && accentColor\n        ? {\n            primary: accentColor,\n            secondary: adjustHexBrightness(accentColor, 1.2),\n            tertiary: adjustHexBrightness(accentColor, 0.85),\n          }\n        : base.colors.accent;\n\n    const accentPrimary = resolvedAccent.primary;\n    const accentBorderMuted = `${accentPrimary}40`; // 25% opacity\n    const accentBorderDefault = `${accentPrimary}66`; // 40% opacity\n    const accentFadedBoxShadow = `inset 0 1px 0 ${hexToRgba(accentPrimary, 0.12)}, inset 0 -1px 0 rgba(0, 0, 0, 0.05), inset 1px 0 0 ${hexToRgba(accentPrimary, 0.06)}, inset -1px 0 0 ${hexToRgba(accentPrimary, 0.06)}`;\n\n    const cardStyle = isMinimal\n      ? { border: `1px solid ${accentBorderMuted}` }\n      : isTransparent\n        ? { border: \"none\" as const, boxShadow: accentFadedBoxShadow }\n        : { border: `1px solid ${base.colors.border.muted}` };\n    const cardStyleDashed = isMinimal\n      ? { border: `1px dashed ${accentBorderMuted}` }\n      : isTransparent\n        ? { border: \"none\" as const, boxShadow: accentFadedBoxShadow }\n        : { border: `1px dashed ${base.colors.border.muted}` };\n    const cardStyleDefault = isMinimal\n      ? { border: `1px solid ${accentBorderDefault}` }\n      : isTransparent\n        ? { border: \"none\" as const, boxShadow: accentFadedBoxShadow }\n        : { border: `1px solid ${base.colors.border.default}` };\n    // Compute border tokens from the resolved theme colors\n    const resolvedColors: ThemeColors = {\n      ...base.colors,\n      accent: resolvedAccent,\n      border: {\n        ...base.colors.border,\n        cardStyle,\n        cardStyleDashed,\n        cardStyleDefault,\n      },\n    };\n\n    return {\n      ...base,\n      colors: resolvedColors,\n      borders: computeBorderTokens(resolvedColors),\n    } as ThemeTokens;\n  }, [theme, mode, accentColor]);\n\n  // Apply CSS variables to document\n  useEffect(() => {\n    if (typeof document === \"undefined\") return;\n\n    const root = document.documentElement;\n    const {\n      colors,\n      typography,\n      spacing,\n      borderRadius,\n      animation,\n      focus,\n      shadows,\n    } = tokens;\n\n    // Theme attributes. tokens.css keys its variable blocks on the VARIANT\n    // via [data-theme=\"<variant>\"] and the mode via [data-mode=\"light\"], so\n    // data-theme must carry the variant and data-mode the light/dark mode —\n    // otherwise the static --zendir-* CSS variables never leave the default\n    // (hybrid) block. data-variant is retained for backward compatibility.\n    root.setAttribute(\"data-theme\", theme);\n    root.setAttribute(\"data-mode\", mode);\n    root.setAttribute(\"data-variant\", theme);\n\n    // Background colors\n    root.style.setProperty(\"--color-background-base\", colors.background.base);\n    root.style.setProperty(\n      \"--color-background-surface\",\n      colors.background.surface,\n    );\n    root.style.setProperty(\n      \"--color-background-elevated\",\n      colors.background.elevated,\n    );\n    root.style.setProperty(\n      \"--color-background-overlay\",\n      colors.background.overlay,\n    );\n\n    // Border colors\n    root.style.setProperty(\"--color-border\", colors.border.default);\n    root.style.setProperty(\"--color-border-muted\", colors.border.muted);\n    root.style.setProperty(\"--color-border-focus\", colors.border.focus);\n\n    // Text colors\n    root.style.setProperty(\"--color-text-primary\", colors.text.primary);\n    root.style.setProperty(\"--color-text-secondary\", colors.text.secondary);\n    root.style.setProperty(\"--color-text-tertiary\", colors.text.tertiary);\n    root.style.setProperty(\"--color-text-inverse\", colors.text.inverse);\n\n    // Status colors\n    root.style.setProperty(\"--color-status-normal\", colors.status.normal);\n    root.style.setProperty(\"--color-status-standby\", colors.status.standby);\n    root.style.setProperty(\"--color-status-caution\", colors.status.caution);\n    root.style.setProperty(\"--color-status-serious\", colors.status.serious);\n    root.style.setProperty(\"--color-status-critical\", colors.status.critical);\n    root.style.setProperty(\"--color-status-off\", colors.status.off);\n\n    // Interactive colors\n    root.style.setProperty(\n      \"--color-interactive-default\",\n      colors.interactive.default,\n    );\n    root.style.setProperty(\n      \"--color-interactive-hover\",\n      colors.interactive.hover,\n    );\n    root.style.setProperty(\n      \"--color-interactive-active\",\n      colors.interactive.active,\n    );\n    root.style.setProperty(\n      \"--color-interactive-disabled\",\n      colors.interactive.disabled,\n    );\n\n    // Accent colors\n    root.style.setProperty(\"--color-accent-primary\", colors.accent.primary);\n    root.style.setProperty(\"--color-accent-secondary\", colors.accent.secondary);\n    root.style.setProperty(\"--color-accent-tertiary\", colors.accent.tertiary);\n\n    // Typography\n    root.style.setProperty(\n      \"--font-family-heading\",\n      typography.fontFamily.heading || typography.fontFamily.primary,\n    );\n    root.style.setProperty(\n      \"--font-family-primary\",\n      typography.fontFamily.primary,\n    );\n    root.style.setProperty(\"--font-family-mono\", typography.fontFamily.mono);\n\n    // Spacing (full scale so CSS and layout can pull from SDK)\n    root.style.setProperty(\"--spacing-xxs\", spacing.xxs);\n    root.style.setProperty(\"--spacing-xs\", spacing.xs);\n    root.style.setProperty(\"--spacing-sm\", spacing.sm);\n    root.style.setProperty(\"--spacing-smd\", spacing.smd);\n    root.style.setProperty(\"--spacing-md\", spacing.md);\n    root.style.setProperty(\"--spacing-mdl\", spacing.mdl);\n    root.style.setProperty(\"--spacing-lg\", spacing.lg);\n    root.style.setProperty(\"--spacing-xl\", spacing.xl);\n    root.style.setProperty(\"--spacing-xxl\", spacing.xxl);\n\n    // Border radius\n    root.style.setProperty(\"--radius-sm\", borderRadius.sm);\n    root.style.setProperty(\"--radius-md\", borderRadius.md);\n    root.style.setProperty(\"--radius-lg\", borderRadius.lg);\n    root.style.setProperty(\"--radius-xl\", borderRadius.xl);\n\n    // Animation (respect reduced motion)\n    const motionMultiplier = prefersReducedMotion ? 0 : 1;\n    root.style.setProperty(\n      \"--animation-fast\",\n      prefersReducedMotion ? \"none\" : animation.fast,\n    );\n    root.style.setProperty(\n      \"--animation-normal\",\n      prefersReducedMotion ? \"none\" : animation.normal,\n    );\n    root.style.setProperty(\n      \"--animation-slow\",\n      prefersReducedMotion ? \"none\" : animation.slow,\n    );\n    root.style.setProperty(\n      \"--duration-fast\",\n      `${animation.duration.fast * motionMultiplier}ms`,\n    );\n    root.style.setProperty(\n      \"--duration-normal\",\n      `${animation.duration.normal * motionMultiplier}ms`,\n    );\n    root.style.setProperty(\n      \"--duration-slow\",\n      `${animation.duration.slow * motionMultiplier}ms`,\n    );\n\n    // Focus\n    root.style.setProperty(\"--focus-ring-color\", focus.color);\n    root.style.setProperty(\"--focus-ring-width\", focus.width);\n    root.style.setProperty(\"--focus-ring-offset\", focus.offset);\n\n    // Shadows\n    root.style.setProperty(\"--shadow-sm\", shadows.sm);\n    root.style.setProperty(\"--shadow-md\", shadows.md);\n    root.style.setProperty(\"--shadow-lg\", shadows.lg);\n    root.style.setProperty(\"--shadow-xl\", shadows.xl);\n\n    // Apply base styles to body\n    document.body.style.backgroundColor = colors.background.base;\n    document.body.style.color = colors.text.primary;\n    document.body.style.fontFamily = typography.fontFamily.primary;\n  }, [tokens, theme, mode, prefersReducedMotion]);\n\n  // ──────────────────────────────────────────────────────────────────────────\n  // Scrollbar Styles — thin, elegant, theme-connected, fully accessible\n  // ──────────────────────────────────────────────────────────────────────────\n  const scrollbarCSS = useMemo(\n    () => buildScrollbarCSS(tokens, mode, prefersReducedMotion),\n    [tokens, mode, prefersReducedMotion],\n  );\n\n  const value: ThemeContextValue = useMemo(\n    () => ({\n      theme,\n      mode,\n      tokens,\n      prefersReducedMotion,\n      accentColor,\n      setTheme,\n      setMode,\n      toggleMode,\n      setAccentColor,\n    }),\n    [theme, mode, tokens, prefersReducedMotion, accentColor],\n  );\n\n  // Global reduced-motion rule — ensures ALL animations and transitions across\n  // every Zendir component respect the OS preference (WCAG 2.3.3).\n  // Uses 0.01ms (not 0) so animation-end events still fire correctly.\n  const reducedMotionCSS = `@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}`;\n\n  return (\n    <ThemeContext.Provider value={value}>\n      <style\n        data-zendir-scrollbar=\"\"\n        dangerouslySetInnerHTML={{ __html: scrollbarCSS }}\n      />\n      <style\n        data-zendir-reduced-motion=\"\"\n        dangerouslySetInnerHTML={{ __html: reducedMotionCSS }}\n      />\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n\n/**\n * useTheme - Access theme context\n *\n * @throws Error if used outside ThemeProvider\n *\n * @example\n * ```tsx\n * const { tokens, mode, toggleMode } = useTheme();\n * ```\n */\nexport function useTheme(): ThemeContextValue {\n  const context = useContext(ThemeContext);\n  if (!context) {\n    throw new Error(\"useTheme must be used within a ThemeProvider\");\n  }\n  return context;\n}\n\n/**\n * useThemeTokens - Access only theme tokens (for memoization)\n */\nexport function useThemeTokens(): ThemeTokens {\n  return useTheme().tokens;\n}\n"],"mappings":"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"}

package/dist/react/theme/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","names":[],"sources":["../../../src/react/theme/config.ts"],"sourcesContent":["/**\r\n * @zendir/ui - Theme Configuration\r\n *\r\n * Easy configuration for default theme settings.\r\n * Import and use in your app root to set defaults.\r\n */\r\n\r\nimport type { ThemeVariant, ThemeMode } from \"./ThemeProvider\";\r\n\r\nexport interface ThemeConfig {\r\n  /** Default theme variant */\r\n  defaultTheme?: ThemeVariant;\r\n  /** Default theme mode */\r\n  defaultMode?: ThemeMode;\r\n  /** Persist theme selection to localStorage */\r\n  persist?: boolean;\r\n}\r\n\r\n/**\r\n * Default theme configuration\r\n *\r\n * Available themes:\r\n * - 'hybrid' - Zen (Hybrid): default; Astro status colors with purple accents\r\n * - 'astro' - Astro UX (U.S. Space Force) compliant theme\r\n * - 'purple-hue' - Zen (Purple Hue) theme with modern aesthetics\r\n * - 'transparent' / 'transparent-bold' / 'transparent-minimal' - Glassmorphic themes\r\n */\r\nexport const DEFAULT_THEME_CONFIG: ThemeConfig = {\r\n  defaultTheme: \"hybrid\", // Zen (Hybrid) is the default\r\n  defaultMode: \"dark\",\r\n  persist: true,\r\n};\r\n\r\n/**\r\n * Get theme configuration from environment or use defaults\r\n */\r\nexport function getThemeConfig(): ThemeConfig {\r\n  // Allow override via environment variable or build-time config\r\n  if (typeof window !== \"undefined\") {\r\n    const envTheme = (window as any).__ZENDIR_UI_THEME__;\r\n    if (\r\n      envTheme === \"astro\" ||\r\n      envTheme === \"purple-hue\" ||\r\n      envTheme === \"hybrid\" ||\r\n      envTheme === \"nebula\"\r\n    ) {\r\n      return {\r\n        ...DEFAULT_THEME_CONFIG,\r\n        defaultTheme: envTheme,\r\n      };\r\n    }\r\n  }\r\n\r\n  return DEFAULT_THEME_CONFIG;\r\n}\r\n\r\n/**\r\n * Set default theme at build/runtime\r\n *\r\n * @example\r\n * ```tsx\r\n * // In your app root\r\n * import { setDefaultTheme } from '@zendir/ui/react/theme/config';\r\n *\r\n * // Zen (Hybrid) is the default; override if needed:\r\n * setDefaultTheme('hybrid');\r\n * setDefaultTheme('purple-hue');\r\n * setDefaultTheme('astro');\r\n * ```\r\n */\r\nexport function setDefaultTheme(theme: ThemeVariant): void {\r\n  if (typeof window !== \"undefined\") {\r\n    (window as any).__ZENDIR_UI_THEME__ = theme;\r\n    // Also update localStorage if persist is enabled\r\n    localStorage.setItem(\"zendir-ui-theme\", theme);\r\n  }\r\n}\r\n"],"mappings":";;;;;;;;;;AA2BA,IAAa,uBAAoC;CAC/C,cAAc;CACd,aAAa;CACb,SAAS;AACX;;;;AAKA,SAAgB,iBAA8B;CAE5C,IAAI,OAAO,WAAW,aAAa;EACjC,MAAM,WAAY,OAAe;EACjC,IACE,aAAa,WACb,aAAa,gBACb,aAAa,YACb,aAAa,UAEb,OAAO;GACL,GAAG;GACH,cAAc;EAChB;CAEJ;CAEA,OAAO;AACT;;;;;;;;;;;;;;;AAgBA,SAAgB,gBAAgB,OAA2B;CACzD,IAAI,OAAO,WAAW,aAAa;EACjC,OAAgB,sBAAsB;EAEtC,aAAa,QAAQ,mBAAmB,KAAK;CAC/C;AACF"}
+{"version":3,"file":"config.js","names":[],"sources":["../../../src/react/theme/config.ts"],"sourcesContent":["/**\n * @zendir/ui - Theme Configuration\n *\n * Easy configuration for default theme settings.\n * Import and use in your app root to set defaults.\n */\n\nimport type { ThemeVariant, ThemeMode } from \"./ThemeProvider\";\n\nexport interface ThemeConfig {\n  /** Default theme variant */\n  defaultTheme?: ThemeVariant;\n  /** Default theme mode */\n  defaultMode?: ThemeMode;\n  /** Persist theme selection to localStorage */\n  persist?: boolean;\n}\n\n/**\n * Default theme configuration\n *\n * Available themes:\n * - 'hybrid' - Zen (Hybrid): default; Astro status colors with purple accents\n * - 'astro' - Astro UX (U.S. Space Force) compliant theme\n * - 'purple-hue' - Zen (Purple Hue) theme with modern aesthetics\n * - 'transparent' / 'transparent-bold' / 'transparent-minimal' - Glassmorphic themes\n */\nexport const DEFAULT_THEME_CONFIG: ThemeConfig = {\n  defaultTheme: \"hybrid\", // Zen (Hybrid) is the default\n  defaultMode: \"dark\",\n  persist: true,\n};\n\n/**\n * Get theme configuration from environment or use defaults\n */\nexport function getThemeConfig(): ThemeConfig {\n  // Allow override via environment variable or build-time config\n  if (typeof window !== \"undefined\") {\n    const envTheme = (window as any).__ZENDIR_UI_THEME__;\n    if (\n      envTheme === \"astro\" ||\n      envTheme === \"purple-hue\" ||\n      envTheme === \"hybrid\" ||\n      envTheme === \"nebula\"\n    ) {\n      return {\n        ...DEFAULT_THEME_CONFIG,\n        defaultTheme: envTheme,\n      };\n    }\n  }\n\n  return DEFAULT_THEME_CONFIG;\n}\n\n/**\n * Set default theme at build/runtime\n *\n * @example\n * ```tsx\n * // In your app root\n * import { setDefaultTheme } from '@zendir/ui/react/theme/config';\n *\n * // Zen (Hybrid) is the default; override if needed:\n * setDefaultTheme('hybrid');\n * setDefaultTheme('purple-hue');\n * setDefaultTheme('astro');\n * ```\n */\nexport function setDefaultTheme(theme: ThemeVariant): void {\n  if (typeof window !== \"undefined\") {\n    (window as any).__ZENDIR_UI_THEME__ = theme;\n    // Also update localStorage if persist is enabled\n    localStorage.setItem(\"zendir-ui-theme\", theme);\n  }\n}\n"],"mappings":";;;;;;;;;;AA2BA,IAAa,uBAAoC;CAC/C,cAAc;CACd,aAAa;CACb,SAAS;AACX;;;;AAKA,SAAgB,iBAA8B;CAE5C,IAAI,OAAO,WAAW,aAAa;EACjC,MAAM,WAAY,OAAe;EACjC,IACE,aAAa,WACb,aAAa,gBACb,aAAa,YACb,aAAa,UAEb,OAAO;GACL,GAAG;GACH,cAAc;EAChB;CAEJ;CAEA,OAAO;AACT;;;;;;;;;;;;;;;AAgBA,SAAgB,gBAAgB,OAA2B;CACzD,IAAI,OAAO,WAAW,aAAa;EACjC,OAAgB,sBAAsB;EAEtC,aAAa,QAAQ,mBAAmB,KAAK;CAC/C;AACF"}

package/dist/react/visualizations/EclipseTimerCard.js

@@ -0,0 +1,297 @@
+import { useTheme } from "../theme/ThemeProvider.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/visualizations/EclipseTimerCard.tsx
+/**
+* EclipseTimerCard - Circular orbit phase visualization
+*
+* Shows the spacecraft's position in its orbital day/night cycle with
+* visual sectors for sunlight, penumbra, and umbra (eclipse).
+*
+* Astro UX Compliance:
+* - Uses official Astro status colors
+* - Sentence-case labels
+* - Tabular numbers for data
+* - Roboto/Roboto Mono typography
+* - 4px-based spacing
+*/
+var EclipseTimerCard = ({ eclipse, orbitalPeriodMinutes, orbitPhase = 0, compact = false, className = "" }) => {
+	const { tokens, theme } = 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 ECLIPSE_COLORS = {
+		sunlight: "#ffd54f",
+		penumbra: "#78909c",
+		umbra: "#546e7a"
+	};
+	const { sunlightArc, penumbraArc, umbraArc } = useMemo(() => {
+		const totalPeriod = orbitalPeriodMinutes * 60;
+		const sunlight = eclipse.sunlightDuration / totalPeriod;
+		const umbraSec = eclipse.umbraDuration ?? eclipse.eclipseDuration * .5;
+		const penumbraSec = eclipse.penumbraDuration ?? eclipse.eclipseDuration * .5;
+		const umbra = umbraSec / totalPeriod;
+		const penumbra = penumbraSec / totalPeriod;
+		return {
+			sunlightArc: sunlight * 100,
+			penumbraArc: penumbra * 100,
+			umbraArc: umbra * 100
+		};
+	}, [eclipse, orbitalPeriodMinutes]);
+	const formatTime = (seconds) => {
+		if (seconds < 0) return "--:--";
+		const mins = Math.floor(seconds / 60);
+		const secs = Math.floor(seconds % 60);
+		return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+	};
+	const radius = 45;
+	const circumference = 2 * Math.PI * radius;
+	const sunlightDash = sunlightArc / 100 * circumference;
+	const penumbraDash = penumbraArc / 100 * circumference;
+	const umbraDash = umbraArc / 100 * circumference;
+	const cursorRotation = orbitPhase * 360 - 90;
+	const sizeStyle = compact ? {
+		width: "128px",
+		height: "128px"
+	} : {
+		width: "192px",
+		height: "192px"
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		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("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between",
+					marginBottom: tokens.spacing.md
+				},
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+					style: {
+						fontWeight: tokens.typography.fontWeight.semibold,
+						color: tokens.colors.text.primary,
+						fontSize: tokens.typography.fontSize.md,
+						margin: 0
+					},
+					children: "Eclipse timer"
+				}), /* @__PURE__ */ jsx("p", {
+					style: {
+						color: tokens.colors.text.tertiary,
+						fontSize: tokens.typography.fontSize.xs,
+						margin: 0,
+						marginTop: tokens.spacing.xs
+					},
+					children: "Orbit phase"
+				})] }), /* @__PURE__ */ jsx("span", {
+					style: {
+						padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
+						borderRadius: tokens.borderRadius.sm,
+						fontSize: tokens.typography.fontSize.xxs,
+						fontWeight: tokens.typography.fontWeight.medium,
+						letterSpacing: "0.5px",
+						backgroundColor: eclipse.inEclipse ? `${tokens.colors.status.off}20` : `${tokens.colors.status.caution}20`,
+						color: eclipse.inEclipse ? tokens.colors.status.off : tokens.colors.status.caution
+					},
+					children: eclipse.inEclipse ? "Eclipse" : "Sunlit"
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					display: "flex",
+					justifyContent: "center"
+				},
+				children: /* @__PURE__ */ jsxs("div", {
+					style: {
+						position: "relative",
+						...sizeStyle
+					},
+					children: [
+						/* @__PURE__ */ jsxs("svg", {
+							viewBox: "0 0 100 100",
+							style: {
+								width: "100%",
+								height: "100%",
+								transform: "rotate(-90deg)"
+							},
+							children: [
+								/* @__PURE__ */ jsx("circle", {
+									cx: "50",
+									cy: "50",
+									r: radius,
+									fill: "none",
+									stroke: tokens.colors.border.muted,
+									strokeWidth: "8"
+								}),
+								/* @__PURE__ */ jsx("circle", {
+									cx: "50",
+									cy: "50",
+									r: radius,
+									fill: "none",
+									stroke: ECLIPSE_COLORS.sunlight,
+									strokeWidth: "8",
+									strokeDasharray: `${sunlightDash} ${circumference}`,
+									strokeDashoffset: "0",
+									strokeLinecap: "round",
+									style: { filter: `drop-shadow(0 0 8px ${ECLIPSE_COLORS.sunlight}40)` }
+								}),
+								/* @__PURE__ */ jsx("circle", {
+									cx: "50",
+									cy: "50",
+									r: radius,
+									fill: "none",
+									stroke: ECLIPSE_COLORS.penumbra,
+									strokeWidth: "8",
+									strokeDasharray: `${penumbraDash} ${circumference}`,
+									strokeDashoffset: `${-sunlightDash}`,
+									strokeLinecap: "round"
+								}),
+								/* @__PURE__ */ jsx("circle", {
+									cx: "50",
+									cy: "50",
+									r: radius,
+									fill: "none",
+									stroke: tokens.colors.background.base,
+									strokeWidth: "8",
+									strokeDasharray: `${umbraDash} ${circumference}`,
+									strokeDashoffset: `${-(sunlightDash + penumbraDash)}`,
+									strokeLinecap: "round"
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							style: {
+								position: "absolute",
+								inset: 0,
+								transition: "transform 1s",
+								transform: `rotate(${cursorRotation}deg)`
+							},
+							children: /* @__PURE__ */ jsx("div", {
+								style: {
+									position: "absolute",
+									top: 0,
+									left: "50%",
+									transform: "translate(-50%, -4px)"
+								},
+								children: /* @__PURE__ */ jsx("div", { style: {
+									width: compact ? "12px" : "16px",
+									height: compact ? "12px" : "16px",
+									backgroundColor: tokens.colors.text.primary,
+									borderRadius: "50%",
+									border: `2px solid ${tokens.colors.status.standby}`,
+									boxShadow: `0 0 12px ${tokens.colors.status.standby}`
+								} })
+							})
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							style: {
+								position: "absolute",
+								inset: 0,
+								display: "flex",
+								flexDirection: "column",
+								alignItems: "center",
+								justifyContent: "center"
+							},
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									style: {
+										fontSize: compact ? "8px" : tokens.typography.fontSize.xs,
+										color: tokens.colors.text.tertiary,
+										letterSpacing: "0.5px"
+									},
+									children: eclipse.inEclipse ? "Sunlight in" : "Eclipse in"
+								}),
+								/* @__PURE__ */ jsx("span", {
+									style: {
+										fontSize: compact ? tokens.typography.fontSize.lg : tokens.typography.fontSize.xxl,
+										fontFamily: tokens.typography.fontFamily.mono,
+										fontWeight: tokens.typography.fontWeight.bold,
+										fontVariantNumeric: "tabular-nums",
+										color: eclipse.inEclipse ? tokens.colors.status.caution : tokens.colors.text.tertiary
+									},
+									children: formatTime(eclipse.inEclipse ? eclipse.timeToSunlight ?? 0 : eclipse.timeToEclipse)
+								}),
+								!compact && /* @__PURE__ */ jsxs("span", {
+									style: {
+										fontSize: tokens.typography.fontSize.xxs,
+										color: tokens.colors.text.tertiary,
+										marginTop: tokens.spacing.xs
+									},
+									children: [
+										"Period: ",
+										orbitalPeriodMinutes.toFixed(1),
+										"m"
+									]
+								})
+							]
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "grid",
+					gridTemplateColumns: "repeat(2, 1fr)",
+					gap: tokens.spacing.sm,
+					marginTop: tokens.spacing.md,
+					fontSize: compact ? tokens.typography.fontSize.xxs : tokens.typography.fontSize.xs
+				},
+				children: [/* @__PURE__ */ jsxs("div", {
+					style: {
+						backgroundColor: tokens.colors.background.base,
+						borderRadius: tokens.borderRadius.md,
+						padding: tokens.spacing.sm,
+						textAlign: "center"
+					},
+					children: [/* @__PURE__ */ jsxs("div", {
+						style: {
+							color: tokens.colors.status.caution,
+							fontWeight: tokens.typography.fontWeight.bold,
+							fontFamily: tokens.typography.fontFamily.mono,
+							fontVariantNumeric: "tabular-nums"
+						},
+						children: [Math.round(eclipse.sunlightDuration / 60), "m"]
+					}), /* @__PURE__ */ jsx("div", {
+						style: { color: tokens.colors.text.tertiary },
+						children: "Daylight"
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					style: {
+						backgroundColor: tokens.colors.background.base,
+						borderRadius: tokens.borderRadius.md,
+						padding: tokens.spacing.sm,
+						textAlign: "center"
+					},
+					children: [/* @__PURE__ */ jsxs("div", {
+						style: {
+							color: tokens.colors.text.tertiary,
+							fontWeight: tokens.typography.fontWeight.bold,
+							fontFamily: tokens.typography.fontFamily.mono,
+							fontVariantNumeric: "tabular-nums"
+						},
+						children: [Math.round(((eclipse.umbraDuration ?? 0) + (eclipse.penumbraDuration ?? 0)) / 60), "m"]
+					}), /* @__PURE__ */ jsx("div", {
+						style: { color: tokens.colors.text.tertiary },
+						children: "Eclipse"
+					})]
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { EclipseTimerCard, EclipseTimerCard as default };
+
+//# sourceMappingURL=EclipseTimerCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EclipseTimerCard.js","names":[],"sources":["../../../src/react/visualizations/EclipseTimerCard.tsx"],"sourcesContent":["/**\r\n * EclipseTimerCard - Circular orbit phase visualization\r\n *\r\n * Shows the spacecraft's position in its orbital day/night cycle with\r\n * visual sectors for sunlight, penumbra, and umbra (eclipse).\r\n *\r\n * Astro UX Compliance:\r\n * - Uses official Astro status colors\r\n * - Sentence-case labels\r\n * - Tabular numbers for data\r\n * - Roboto/Roboto Mono typography\r\n * - 4px-based spacing\r\n */\r\n\r\nimport React, { useMemo } from \"react\";\r\nimport type { EclipseInfo } from \"../types\";\r\nimport { useTheme } from \"../theme\";\r\n\r\nexport interface EclipseTimerCardProps {\r\n  /** Eclipse information from API */\r\n  eclipse: EclipseInfo;\r\n  /** Orbital period in minutes */\r\n  orbitalPeriodMinutes: number;\r\n  /** Current phase in orbit (0-1) */\r\n  orbitPhase?: number;\r\n  /** Compact mode for smaller displays */\r\n  compact?: boolean;\r\n  /** Custom class name */\r\n  className?: string;\r\n}\r\n\r\nexport const EclipseTimerCard: React.FC<EclipseTimerCardProps> = ({\r\n  eclipse,\r\n  orbitalPeriodMinutes,\r\n  orbitPhase = 0,\r\n  compact = false,\r\n  className = \"\",\r\n}) => {\r\n  const { tokens, theme } = 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  // Medium-soft colors for eclipse phases (readable, not too pale)\r\n  const ECLIPSE_COLORS = {\r\n    sunlight: \"#ffd54f\",\r\n    penumbra: \"#78909c\",\r\n    umbra: \"#546e7a\",\r\n  };\r\n  const { sunlightArc, penumbraArc, umbraArc } = useMemo(() => {\r\n    const totalPeriod = orbitalPeriodMinutes * 60; // seconds\r\n    const sunlight = eclipse.sunlightDuration / totalPeriod;\r\n    const umbraSec = eclipse.umbraDuration ?? eclipse.eclipseDuration * 0.5;\r\n    const penumbraSec =\r\n      eclipse.penumbraDuration ?? eclipse.eclipseDuration * 0.5;\r\n    const umbra = umbraSec / totalPeriod;\r\n    const penumbra = penumbraSec / totalPeriod;\r\n    return {\r\n      sunlightArc: sunlight * 100,\r\n      penumbraArc: penumbra * 100,\r\n      umbraArc: umbra * 100,\r\n    };\r\n  }, [eclipse, orbitalPeriodMinutes]);\r\n\r\n  // Format time for display (Astro: tabular numbers)\r\n  const formatTime = (seconds: number): string => {\r\n    if (seconds < 0) return \"--:--\";\r\n    const mins = Math.floor(seconds / 60);\r\n    const secs = Math.floor(seconds % 60);\r\n    return `${mins.toString().padStart(2, \"0\")}:${secs.toString().padStart(2, \"0\")}`;\r\n  };\r\n\r\n  // Calculate SVG arc parameters\r\n  const radius = 45;\r\n  const circumference = 2 * Math.PI * radius;\r\n\r\n  const sunlightDash = (sunlightArc / 100) * circumference;\r\n  const penumbraDash = (penumbraArc / 100) * circumference;\r\n  const umbraDash = (umbraArc / 100) * circumference;\r\n\r\n  // Cursor rotation based on orbit phase\r\n  const cursorRotation = orbitPhase * 360 - 90; // -90 to start at top\r\n\r\n  const sizeStyle: React.CSSProperties = compact\r\n    ? { width: \"128px\", height: \"128px\" }\r\n    : { width: \"192px\", height: \"192px\" };\r\n\r\n  // Astro UX compliant card styling (transparent theme: glass background)\r\n  const cardStyle: React.CSSProperties = {\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  return (\r\n    <div className={className} style={cardStyle}>\r\n      {!compact && (\r\n        <div\r\n          style={{\r\n            display: \"flex\",\r\n            alignItems: \"center\",\r\n            justifyContent: \"space-between\",\r\n            marginBottom: tokens.spacing.md,\r\n          }}\r\n        >\r\n          <div>\r\n            {/* Astro: Sentence-case labels */}\r\n            <h3\r\n              style={{\r\n                fontWeight: tokens.typography.fontWeight.semibold,\r\n                color: tokens.colors.text.primary,\r\n                fontSize: tokens.typography.fontSize.md,\r\n                margin: 0,\r\n              }}\r\n            >\r\n              Eclipse timer\r\n            </h3>\r\n            <p\r\n              style={{\r\n                color: tokens.colors.text.tertiary,\r\n                fontSize: tokens.typography.fontSize.xs,\r\n                margin: 0,\r\n                marginTop: tokens.spacing.xs,\r\n              }}\r\n            >\r\n              Orbit phase\r\n            </p>\r\n          </div>\r\n          {/* Status badge - Astro style */}\r\n          <span\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,\r\n              letterSpacing: \"0.5px\",\r\n              backgroundColor: eclipse.inEclipse\r\n                ? `${tokens.colors.status.off}20`\r\n                : `${tokens.colors.status.caution}20`,\r\n              color: eclipse.inEclipse\r\n                ? tokens.colors.status.off\r\n                : tokens.colors.status.caution,\r\n            }}\r\n          >\r\n            {eclipse.inEclipse ? \"Eclipse\" : \"Sunlit\"}\r\n          </span>\r\n        </div>\r\n      )}\r\n\r\n      <div style={{ display: \"flex\", justifyContent: \"center\" }}>\r\n        <div style={{ position: \"relative\", ...sizeStyle }}>\r\n          {/* SVG Ring */}\r\n          <svg\r\n            viewBox=\"0 0 100 100\"\r\n            style={{\r\n              width: \"100%\",\r\n              height: \"100%\",\r\n              transform: \"rotate(-90deg)\",\r\n            }}\r\n          >\r\n            {/* Background ring */}\r\n            <circle\r\n              cx=\"50\"\r\n              cy=\"50\"\r\n              r={radius}\r\n              fill=\"none\"\r\n              stroke={tokens.colors.border.muted}\r\n              strokeWidth=\"8\"\r\n            />\r\n\r\n            {/* Sunlight sector - soft amber */}\r\n            <circle\r\n              cx=\"50\"\r\n              cy=\"50\"\r\n              r={radius}\r\n              fill=\"none\"\r\n              stroke={ECLIPSE_COLORS.sunlight}\r\n              strokeWidth=\"8\"\r\n              strokeDasharray={`${sunlightDash} ${circumference}`}\r\n              strokeDashoffset=\"0\"\r\n              strokeLinecap=\"round\"\r\n              style={{\r\n                filter: `drop-shadow(0 0 8px ${ECLIPSE_COLORS.sunlight}40)`,\r\n              }}\r\n            />\r\n\r\n            {/* Penumbra sector */}\r\n            <circle\r\n              cx=\"50\"\r\n              cy=\"50\"\r\n              r={radius}\r\n              fill=\"none\"\r\n              stroke={ECLIPSE_COLORS.penumbra}\r\n              strokeWidth=\"8\"\r\n              strokeDasharray={`${penumbraDash} ${circumference}`}\r\n              strokeDashoffset={`${-sunlightDash}`}\r\n              strokeLinecap=\"round\"\r\n            />\r\n\r\n            {/* Umbra sector - dark */}\r\n            <circle\r\n              cx=\"50\"\r\n              cy=\"50\"\r\n              r={radius}\r\n              fill=\"none\"\r\n              stroke={tokens.colors.background.base}\r\n              strokeWidth=\"8\"\r\n              strokeDasharray={`${umbraDash} ${circumference}`}\r\n              strokeDashoffset={`${-(sunlightDash + penumbraDash)}`}\r\n              strokeLinecap=\"round\"\r\n            />\r\n          </svg>\r\n\r\n          {/* Position cursor */}\r\n          <div\r\n            style={{\r\n              position: \"absolute\",\r\n              inset: 0,\r\n              transition: \"transform 1s\",\r\n              transform: `rotate(${cursorRotation}deg)`,\r\n            }}\r\n          >\r\n            <div\r\n              style={{\r\n                position: \"absolute\",\r\n                top: 0,\r\n                left: \"50%\",\r\n                transform: \"translate(-50%, -4px)\",\r\n              }}\r\n            >\r\n              <div\r\n                style={{\r\n                  width: compact ? \"12px\" : \"16px\",\r\n                  height: compact ? \"12px\" : \"16px\",\r\n                  backgroundColor: tokens.colors.text.primary,\r\n                  borderRadius: \"50%\",\r\n                  border: `2px solid ${tokens.colors.status.standby}`,\r\n                  boxShadow: `0 0 12px ${tokens.colors.status.standby}`,\r\n                }}\r\n              />\r\n            </div>\r\n          </div>\r\n\r\n          {/* Center content */}\r\n          <div\r\n            style={{\r\n              position: \"absolute\",\r\n              inset: 0,\r\n              display: \"flex\",\r\n              flexDirection: \"column\",\r\n              alignItems: \"center\",\r\n              justifyContent: \"center\",\r\n            }}\r\n          >\r\n            {/* Astro: Sentence-case labels (Tier 3 compliance) */}\r\n            <span\r\n              style={{\r\n                fontSize: compact ? \"8px\" : tokens.typography.fontSize.xs,\r\n                color: tokens.colors.text.tertiary,\r\n                letterSpacing: \"0.5px\",\r\n              }}\r\n            >\r\n              {eclipse.inEclipse ? \"Sunlight in\" : \"Eclipse in\"}\r\n            </span>\r\n            {/* Astro: Tabular numbers */}\r\n            <span\r\n              style={{\r\n                fontSize: compact\r\n                  ? tokens.typography.fontSize.lg\r\n                  : tokens.typography.fontSize.xxl,\r\n                fontFamily: tokens.typography.fontFamily.mono,\r\n                fontWeight: tokens.typography.fontWeight.bold,\r\n                fontVariantNumeric: \"tabular-nums\",\r\n                color: eclipse.inEclipse\r\n                  ? tokens.colors.status.caution\r\n                  : tokens.colors.text.tertiary,\r\n              }}\r\n            >\r\n              {formatTime(\r\n                eclipse.inEclipse\r\n                  ? (eclipse.timeToSunlight ?? 0)\r\n                  : eclipse.timeToEclipse,\r\n              )}\r\n            </span>\r\n            {!compact && (\r\n              <span\r\n                style={{\r\n                  fontSize: tokens.typography.fontSize.xxs, // 0.625rem / 10px (AstroUXDS compact)\r\n                  color: tokens.colors.text.tertiary,\r\n                  marginTop: tokens.spacing.xs,\r\n                }}\r\n              >\r\n                Period: {orbitalPeriodMinutes.toFixed(1)}m\r\n              </span>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      {/* Stats row - Astro: Sentence-case, tabular numbers */}\r\n      <div\r\n        style={{\r\n          display: \"grid\",\r\n          gridTemplateColumns: \"repeat(2, 1fr)\",\r\n          gap: tokens.spacing.sm,\r\n          marginTop: tokens.spacing.md,\r\n          fontSize: compact\r\n            ? tokens.typography.fontSize.xxs\r\n            : tokens.typography.fontSize.xs, // AstroUXDS compliant\r\n        }}\r\n      >\r\n        <div\r\n          style={{\r\n            backgroundColor: tokens.colors.background.base,\r\n            borderRadius: tokens.borderRadius.md,\r\n            padding: tokens.spacing.sm,\r\n            textAlign: \"center\",\r\n          }}\r\n        >\r\n          <div\r\n            style={{\r\n              color: tokens.colors.status.caution,\r\n              fontWeight: tokens.typography.fontWeight.bold,\r\n              fontFamily: tokens.typography.fontFamily.mono,\r\n              fontVariantNumeric: \"tabular-nums\",\r\n            }}\r\n          >\r\n            {Math.round(eclipse.sunlightDuration / 60)}m\r\n          </div>\r\n          <div style={{ color: tokens.colors.text.tertiary }}>Daylight</div>\r\n        </div>\r\n        <div\r\n          style={{\r\n            backgroundColor: tokens.colors.background.base,\r\n            borderRadius: tokens.borderRadius.md,\r\n            padding: tokens.spacing.sm,\r\n            textAlign: \"center\",\r\n          }}\r\n        >\r\n          <div\r\n            style={{\r\n              color: tokens.colors.text.tertiary,\r\n              fontWeight: tokens.typography.fontWeight.bold,\r\n              fontFamily: tokens.typography.fontFamily.mono,\r\n              fontVariantNumeric: \"tabular-nums\",\r\n            }}\r\n          >\r\n            {Math.round(\r\n              ((eclipse.umbraDuration ?? 0) + (eclipse.penumbraDuration ?? 0)) /\r\n                60,\r\n            )}\r\n            m\r\n          </div>\r\n          <div style={{ color: tokens.colors.text.tertiary }}>Eclipse</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default EclipseTimerCard;\r\n"],"mappings":"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"}