@zendir/ui 0.5.0 → 0.6.1

package/dist/react/theme/types.d.ts

@@ -0,0 +1,332 @@
+import { default as React } from 'react';
+export type ThemeVariant = "astro" | "purple-hue" | "hybrid" | "nebula" | "transparent" | "transparent-bold" | "transparent-minimal";
+export type ThemeMode = "light" | "dark";
+export interface ThemeColors {
+    background: {
+        base: string;
+        surface: string;
+        elevated: string;
+        overlay: string;
+    };
+    border: {
+        default: string;
+        muted: string;
+        focus: string;
+        /** Transparent theme: thin faded top-to-bottom border (box-shadow, use with border: 'none') */
+        fadedBoxShadow?: string;
+        /** Card border style (computed from theme – solid or transparent faded). Use ...tokens.colors.border.cardStyle */
+        cardStyle?: React.CSSProperties;
+        /** Card border for dashed/empty state. Use ...tokens.colors.border.cardStyleDashed */
+        cardStyleDashed?: React.CSSProperties;
+        /** Card border using default color (e.g. NavBall, EclipseTimer). Use ...tokens.colors.border.cardStyleDefault */
+        cardStyleDefault?: React.CSSProperties;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        /** Muted/placeholder text (alias for tertiary when not set) */
+        muted?: string;
+        inverse: string;
+    };
+    status: {
+        normal: string;
+        standby: string;
+        caution: string;
+        serious: string;
+        critical: string;
+        off: string;
+    };
+    semantic: {
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+    };
+    accent: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+    interactive: {
+        default: string;
+        hover: string;
+        active: string;
+        disabled: string;
+        /** Transparent theme: button/control bg (low opacity purple) when not hovered */
+        transparentDefault?: string;
+        /** Transparent theme: button/control bg on hover (higher opacity purple) */
+        transparentHover?: string;
+        /** Transparent theme: input field bg (semi-transparent purple tint) */
+        transparentInputBg?: string;
+    };
+}
+export interface ThemeAnimation {
+    /** Fast transitions (hover states) - 150ms */
+    fast: string;
+    /** Normal transitions (most interactions) - 250ms */
+    normal: string;
+    /** Slow transitions (page/mode changes) - 400ms */
+    slow: string;
+    /** Spring animation for playful interactions */
+    spring: string;
+    /** Easing function */
+    easing: {
+        default: string;
+        in: string;
+        out: string;
+        inOut: string;
+    };
+    /** Duration values in milliseconds */
+    duration: {
+        instant: number;
+        fast: number;
+        normal: number;
+        slow: number;
+    };
+}
+export interface ThemeFocus {
+    /** Focus ring color */
+    color: string;
+    /** Focus ring width */
+    width: string;
+    /** Focus ring offset */
+    offset: string;
+    /** Full focus ring CSS */
+    ring: string;
+    /** Focus ring style object */
+    style: React.CSSProperties;
+}
+/**
+ * Astro UX Typography Style Token
+ * Based on https://www.astrouxds.com/foundations/typography/
+ */
+export interface TypographyStyle {
+    fontSize: string;
+    fontWeight: number;
+    letterSpacing: string;
+    lineHeight: string;
+}
+export interface ThemeTokens {
+    colors: ThemeColors;
+    spacing: {
+        /** 2px — micro adjustments, decorative offsets */
+        xxs: string;
+        /** 4px — tight gaps, icon padding */
+        xs: string;
+        /** 8px — compact spacing, small gaps */
+        sm: string;
+        /** 12px — form fields, compact cards (between sm and md) */
+        smd: string;
+        /** 16px — default card padding, section gaps */
+        md: string;
+        /** 20px — slightly generous spacing */
+        mdl: string;
+        /** 24px — generous spacing, content area padding */
+        lg: string;
+        /** 32px — large section gaps */
+        xl: string;
+        /** 48px — extra large spacing */
+        xxl: string;
+    };
+    borderRadius: {
+        none: string;
+        /** 1px — very subtle rounding */
+        xs: string;
+        /** 2px — small elements, badges, tooltips */
+        sm: string;
+        /** 4px — inputs, selects, standard controls */
+        md: string;
+        /** 8px — cards, containers */
+        lg: string;
+        /** 12px — prominent surfaces, modals */
+        xl: string;
+        /** 9999px — pills, fully rounded */
+        full: string;
+    };
+    /** Standardised element heights for interactive controls */
+    elementSize: {
+        /** 28px — compact controls */
+        sm: string;
+        /** 36px — default controls */
+        md: string;
+        /** 44px — prominent controls, touch targets */
+        lg: string;
+    };
+    typography: {
+        fontFamily: {
+            primary: string;
+            /** Heading stack (Sora → fallbacks); set by every theme. */
+            heading: string;
+            mono: string;
+        };
+        display: {
+            1: TypographyStyle;
+            2: TypographyStyle;
+        };
+        heading: {
+            1: TypographyStyle;
+            "1Bold": TypographyStyle;
+            2: TypographyStyle;
+            3: TypographyStyle;
+            4: TypographyStyle;
+            5: TypographyStyle;
+            6: TypographyStyle;
+        };
+        body: {
+            1: TypographyStyle;
+            "1Bold": TypographyStyle;
+            2: TypographyStyle;
+            "2Bold": TypographyStyle;
+            3: TypographyStyle;
+            "3Bold": TypographyStyle;
+        };
+        control: {
+            1: TypographyStyle;
+            "1Bold": TypographyStyle;
+        };
+        fontSize: {
+            micro: string;
+            xxs: string;
+            xs: string;
+            sm: string;
+            base: string;
+            md: string;
+            lg: string;
+            xl: string;
+            xxl: string;
+            xxxl: string;
+        };
+        fontWeight: {
+            light: number;
+            normal: number;
+            medium: number;
+            semibold: number;
+            bold: number;
+        };
+        lineHeight: {
+            tight: string;
+            normal: string;
+            relaxed: string;
+        };
+        letterSpacing: {
+            tight: string;
+            normal: string;
+            wide: string;
+        };
+    };
+    shadows: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        glow: (color: string) => string;
+    };
+    animation: ThemeAnimation;
+    focus: ThemeFocus;
+    /** Semantic layout tokens for consistent spacing across cards, forms, and sections */
+    layout: LayoutTokens;
+    /** Semantic border tokens for consistent element styling (derived from theme colors) */
+    borders: BorderTokens;
+}
+export interface LayoutTokens {
+    /** Card / panel container spacing */
+    card: {
+        /** Internal padding of card containers */
+        padding: string;
+        /** Gap between cards in grid layouts (desktop) */
+        gap: string;
+        /** Gap between cards in grid layouts (mobile / compact) */
+        gapCompact: string;
+        /** Card heading: icon size, title typography, gap — single system for all cards/charts */
+        heading: {
+            iconSize: number;
+            iconSizeCompact: number;
+            titleFontSize: string;
+            /** Smaller title for chart headers (e.g. Power Trends) so they match card visual weight */
+            titleFontSizeChart: string;
+            titleFontWeight: number;
+            gap: number;
+        };
+    };
+    /** Section heading spacing (heading + divider + content) */
+    section: {
+        /** Padding below heading text, above the divider border */
+        headerPaddingBottom: string;
+        /** Margin below the divider border, before content */
+        headerMarginBottom: string;
+        /** Padding above the first content element after heading */
+        contentPaddingTop: string;
+    };
+    /** Form and input field spacing */
+    form: {
+        /** Vertical gap between stacked form fields */
+        fieldGap: string;
+        /** Horizontal gap between side-by-side inline fields */
+        inlineGap: string;
+        /** Padding inside grouped / nested field containers */
+        groupPadding: string;
+        /** Gap between items within a field group */
+        groupGap: string;
+        /** Gap between label text and helper icons (e.g. tooltip) */
+        labelGap: string;
+    };
+    /** Nested surface / panel spacing (e.g. grouped fields within a card) */
+    surface: {
+        /** Internal padding of nested surfaces */
+        padding: string;
+        /** Border radius of nested surfaces */
+        borderRadius: string;
+        /** Gap between items in compact nested surfaces */
+        gap: string;
+    };
+}
+export interface BorderTokens {
+    /** Border widths — standardised across all interactive elements */
+    width: {
+        /** Thin (1px) — inputs, cards, dividers, dropdowns */
+        thin: string;
+        /** Medium (1.5px) — secondary buttons, emphasised inputs */
+        medium: string;
+        /** Thick (2px) — checkboxes, accent borders, active tabs */
+        thick: string;
+    };
+    /** Pre-computed input / control borders (width + style + color) */
+    input: {
+        /** Default resting state */
+        default: string;
+        /** Hover state (accent at 50% opacity) */
+        hover: string;
+        /** Focused state (full accent) */
+        focus: string;
+        /** Error / critical state */
+        error: string;
+    };
+    /** Focus ring box-shadow values for interactive elements */
+    focusRing: {
+        /** Standard ring for inputs and selects */
+        default: string;
+        /** Ring for buttons (double-ring pattern) */
+        button: string;
+        /** Subtle ring for checkboxes, tabs, toggles */
+        subtle: string;
+    };
+    /** Section divider border (headings, dialog headers/footers, tab bars) */
+    divider: string;
+    /** Dropdown / popover container border */
+    dropdown: string;
+    /** Separator line inside elements (unit separators, table rows) */
+    separator: string;
+}
+/**
+ * Derives border tokens from a theme's resolved colors.
+ * Called once per theme change inside the ThemeProvider useMemo.
+ */
+export declare function computeBorderTokens(colors: ThemeColors): BorderTokens;
+/**
+ * Base theme type used for static theme definitions.
+ * `borders` is omitted because it is derived from colors at runtime
+ * inside the ThemeProvider useMemo (see computeBorderTokens).
+ */
+export type ThemeTokensBase = Omit<ThemeTokens, "borders">;

package/dist/react/theme/types.js

@@ -0,0 +1,39 @@
+//#region src/react/theme/types.ts
+/**
+* Derives border tokens from a theme's resolved colors.
+* Called once per theme change inside the ThemeProvider useMemo.
+*/
+function computeBorderTokens(colors) {
+	const thin = "1px";
+	const medium = "1.5px";
+	const thick = "2px";
+	const accent = colors.accent.primary;
+	const muted = colors.border.muted;
+	const critical = colors.status.critical;
+	const bgBase = colors.background.base;
+	return {
+		width: {
+			thin,
+			medium,
+			thick
+		},
+		input: {
+			default: `${thin} solid ${muted}`,
+			hover: `${thin} solid ${accent}80`,
+			focus: `${thin} solid ${accent}`,
+			error: `${thin} solid ${critical}`
+		},
+		focusRing: {
+			default: `0 0 0 3px ${accent}50, 0 0 20px ${accent}15`,
+			button: `0 0 0 2px ${bgBase}, 0 0 0 4px ${accent}`,
+			subtle: `0 0 0 2px ${accent}60`
+		},
+		divider: `${thin} solid ${muted}`,
+		dropdown: `${thin} solid ${accent}30`,
+		separator: `${thin} solid ${muted}`
+	};
+}
+//#endregion
+export { computeBorderTokens };
+
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/react/theme/types.ts"],"sourcesContent":["/**\r\n * @zendir/ui — Theme type definitions and derived-token helpers.\r\n *\r\n * Shared home for the theme token shapes so both the runtime provider\r\n * (ThemeProvider) and the static theme definitions (src/tokens/themes.ts)\r\n * reference one set of types. Isolating these here keeps the token-build\r\n * script (which imports the theme definitions) free of the full React\r\n * provider module.\r\n */\r\n\r\nimport React from \"react\";\r\n\r\nexport type ThemeVariant =\r\n  | \"astro\"\r\n  | \"purple-hue\"\r\n  | \"hybrid\"\r\n  | \"nebula\"\r\n  | \"transparent\"\r\n  | \"transparent-bold\"\r\n  | \"transparent-minimal\";\r\nexport type ThemeMode = \"light\" | \"dark\";\r\n\r\nexport interface ThemeColors {\r\n  background: {\r\n    base: string;\r\n    surface: string;\r\n    elevated: string;\r\n    overlay: string;\r\n  };\r\n  border: {\r\n    default: string;\r\n    muted: string;\r\n    focus: string;\r\n    /** Transparent theme: thin faded top-to-bottom border (box-shadow, use with border: 'none') */\r\n    fadedBoxShadow?: string;\r\n    /** Card border style (computed from theme – solid or transparent faded). Use ...tokens.colors.border.cardStyle */\r\n    cardStyle?: React.CSSProperties;\r\n    /** Card border for dashed/empty state. Use ...tokens.colors.border.cardStyleDashed */\r\n    cardStyleDashed?: React.CSSProperties;\r\n    /** Card border using default color (e.g. NavBall, EclipseTimer). Use ...tokens.colors.border.cardStyleDefault */\r\n    cardStyleDefault?: React.CSSProperties;\r\n  };\r\n  text: {\r\n    primary: string;\r\n    secondary: string;\r\n    tertiary: string;\r\n    /** Muted/placeholder text (alias for tertiary when not set) */\r\n    muted?: string;\r\n    inverse: string;\r\n  };\r\n  status: {\r\n    normal: string;\r\n    standby: string;\r\n    caution: string;\r\n    serious: string;\r\n    critical: string;\r\n    off: string;\r\n  };\r\n  semantic: {\r\n    success: string;\r\n    warning: string;\r\n    error: string;\r\n    info: string;\r\n  };\r\n  accent: {\r\n    primary: string;\r\n    secondary: string;\r\n    tertiary: string;\r\n  };\r\n  interactive: {\r\n    default: string;\r\n    hover: string;\r\n    active: string;\r\n    disabled: string;\r\n    /** Transparent theme: button/control bg (low opacity purple) when not hovered */\r\n    transparentDefault?: string;\r\n    /** Transparent theme: button/control bg on hover (higher opacity purple) */\r\n    transparentHover?: string;\r\n    /** Transparent theme: input field bg (semi-transparent purple tint) */\r\n    transparentInputBg?: string;\r\n  };\r\n}\r\n\r\nexport interface ThemeAnimation {\r\n  /** Fast transitions (hover states) - 150ms */\r\n  fast: string;\r\n  /** Normal transitions (most interactions) - 250ms */\r\n  normal: string;\r\n  /** Slow transitions (page/mode changes) - 400ms */\r\n  slow: string;\r\n  /** Spring animation for playful interactions */\r\n  spring: string;\r\n  /** Easing function */\r\n  easing: {\r\n    default: string;\r\n    in: string;\r\n    out: string;\r\n    inOut: string;\r\n  };\r\n  /** Duration values in milliseconds */\r\n  duration: {\r\n    instant: number;\r\n    fast: number;\r\n    normal: number;\r\n    slow: number;\r\n  };\r\n}\r\n\r\nexport interface ThemeFocus {\r\n  /** Focus ring color */\r\n  color: string;\r\n  /** Focus ring width */\r\n  width: string;\r\n  /** Focus ring offset */\r\n  offset: string;\r\n  /** Full focus ring CSS */\r\n  ring: string;\r\n  /** Focus ring style object */\r\n  style: React.CSSProperties;\r\n}\r\n\r\n/**\r\n * Astro UX Typography Style Token\r\n * Based on https://www.astrouxds.com/foundations/typography/\r\n */\r\nexport interface TypographyStyle {\r\n  fontSize: string;\r\n  fontWeight: number;\r\n  letterSpacing: string;\r\n  lineHeight: string;\r\n}\r\n\r\nexport interface ThemeTokens {\r\n  colors: ThemeColors;\r\n  spacing: {\r\n    /** 2px — micro adjustments, decorative offsets */\r\n    xxs: string;\r\n    /** 4px — tight gaps, icon padding */\r\n    xs: string;\r\n    /** 8px — compact spacing, small gaps */\r\n    sm: string;\r\n    /** 12px — form fields, compact cards (between sm and md) */\r\n    smd: string;\r\n    /** 16px — default card padding, section gaps */\r\n    md: string;\r\n    /** 20px — slightly generous spacing */\r\n    mdl: string;\r\n    /** 24px — generous spacing, content area padding */\r\n    lg: string;\r\n    /** 32px — large section gaps */\r\n    xl: string;\r\n    /** 48px — extra large spacing */\r\n    xxl: string;\r\n  };\r\n  borderRadius: {\r\n    none: string;\r\n    /** 1px — very subtle rounding */\r\n    xs: string;\r\n    /** 2px — small elements, badges, tooltips */\r\n    sm: string;\r\n    /** 4px — inputs, selects, standard controls */\r\n    md: string;\r\n    /** 8px — cards, containers */\r\n    lg: string;\r\n    /** 12px — prominent surfaces, modals */\r\n    xl: string;\r\n    /** 9999px — pills, fully rounded */\r\n    full: string;\r\n  };\r\n  /** Standardised element heights for interactive controls */\r\n  elementSize: {\r\n    /** 28px — compact controls */\r\n    sm: string;\r\n    /** 36px — default controls */\r\n    md: string;\r\n    /** 44px — prominent controls, touch targets */\r\n    lg: string;\r\n  };\r\n  typography: {\r\n    fontFamily: {\r\n      primary: string;\r\n      /** Heading stack (Sora → fallbacks); set by every theme. */\r\n      heading: string;\r\n      mono: string;\r\n    };\r\n    // Astro UX Typography Tokens (rem-based)\r\n    // https://www.astrouxds.com/foundations/typography/\r\n    display: {\r\n      1: TypographyStyle;\r\n      2: TypographyStyle;\r\n    };\r\n    heading: {\r\n      1: TypographyStyle;\r\n      \"1Bold\": TypographyStyle;\r\n      2: TypographyStyle;\r\n      3: TypographyStyle;\r\n      4: TypographyStyle;\r\n      5: TypographyStyle;\r\n      6: TypographyStyle;\r\n    };\r\n    body: {\r\n      1: TypographyStyle;\r\n      \"1Bold\": TypographyStyle;\r\n      2: TypographyStyle;\r\n      \"2Bold\": TypographyStyle;\r\n      3: TypographyStyle;\r\n      \"3Bold\": TypographyStyle;\r\n    };\r\n    control: {\r\n      1: TypographyStyle;\r\n      \"1Bold\": TypographyStyle;\r\n    };\r\n    // Legacy/convenience tokens (keeping for backward compatibility)\r\n    fontSize: {\r\n      micro: string; // 9px - very tight spaces\r\n      xxs: string; // 10px - compact labels\r\n      xs: string;\r\n      sm: string;\r\n      base: string;\r\n      md: string;\r\n      lg: string;\r\n      xl: string;\r\n      xxl: string;\r\n      xxxl: string;\r\n    };\r\n    fontWeight: {\r\n      light: number;\r\n      normal: number;\r\n      medium: number;\r\n      semibold: number;\r\n      bold: number;\r\n    };\r\n    lineHeight: {\r\n      tight: string;\r\n      normal: string;\r\n      relaxed: string;\r\n    };\r\n    letterSpacing: {\r\n      tight: string;\r\n      normal: string;\r\n      wide: string;\r\n    };\r\n  };\r\n  shadows: {\r\n    none: string;\r\n    sm: string;\r\n    md: string;\r\n    lg: string;\r\n    xl: string;\r\n    glow: (color: string) => string;\r\n  };\r\n  animation: ThemeAnimation;\r\n  focus: ThemeFocus;\r\n  /** Semantic layout tokens for consistent spacing across cards, forms, and sections */\r\n  layout: LayoutTokens;\r\n  /** Semantic border tokens for consistent element styling (derived from theme colors) */\r\n  borders: BorderTokens;\r\n}\r\n\r\n// ============================================================================\r\n// Layout Tokens Interface\r\n// Semantic spacing for cards, sections, forms, and nested surfaces.\r\n// These decouple layout intent from raw pixel values, enabling consistent\r\n// spacing across all consuming applications.\r\n// ============================================================================\r\n\r\nexport interface LayoutTokens {\r\n  /** Card / panel container spacing */\r\n  card: {\r\n    /** Internal padding of card containers */\r\n    padding: string;\r\n    /** Gap between cards in grid layouts (desktop) */\r\n    gap: string;\r\n    /** Gap between cards in grid layouts (mobile / compact) */\r\n    gapCompact: string;\r\n    /** Card heading: icon size, title typography, gap — single system for all cards/charts */\r\n    heading: {\r\n      iconSize: number;\r\n      iconSizeCompact: number;\r\n      titleFontSize: string;\r\n      /** Smaller title for chart headers (e.g. Power Trends) so they match card visual weight */\r\n      titleFontSizeChart: string;\r\n      titleFontWeight: number;\r\n      gap: number;\r\n    };\r\n  };\r\n  /** Section heading spacing (heading + divider + content) */\r\n  section: {\r\n    /** Padding below heading text, above the divider border */\r\n    headerPaddingBottom: string;\r\n    /** Margin below the divider border, before content */\r\n    headerMarginBottom: string;\r\n    /** Padding above the first content element after heading */\r\n    contentPaddingTop: string;\r\n  };\r\n  /** Form and input field spacing */\r\n  form: {\r\n    /** Vertical gap between stacked form fields */\r\n    fieldGap: string;\r\n    /** Horizontal gap between side-by-side inline fields */\r\n    inlineGap: string;\r\n    /** Padding inside grouped / nested field containers */\r\n    groupPadding: string;\r\n    /** Gap between items within a field group */\r\n    groupGap: string;\r\n    /** Gap between label text and helper icons (e.g. tooltip) */\r\n    labelGap: string;\r\n  };\r\n  /** Nested surface / panel spacing (e.g. grouped fields within a card) */\r\n  surface: {\r\n    /** Internal padding of nested surfaces */\r\n    padding: string;\r\n    /** Border radius of nested surfaces */\r\n    borderRadius: string;\r\n    /** Gap between items in compact nested surfaces */\r\n    gap: string;\r\n  };\r\n}\r\n\r\n// ============================================================================\r\n// Border Tokens Interface\r\n// Standardised border widths, element borders, focus rings, and dividers.\r\n// These are DERIVED from theme colors at runtime via computeBorderTokens().\r\n// ============================================================================\r\n\r\nexport interface BorderTokens {\r\n  /** Border widths — standardised across all interactive elements */\r\n  width: {\r\n    /** Thin (1px) — inputs, cards, dividers, dropdowns */\r\n    thin: string;\r\n    /** Medium (1.5px) — secondary buttons, emphasised inputs */\r\n    medium: string;\r\n    /** Thick (2px) — checkboxes, accent borders, active tabs */\r\n    thick: string;\r\n  };\r\n  /** Pre-computed input / control borders (width + style + color) */\r\n  input: {\r\n    /** Default resting state */\r\n    default: string;\r\n    /** Hover state (accent at 50% opacity) */\r\n    hover: string;\r\n    /** Focused state (full accent) */\r\n    focus: string;\r\n    /** Error / critical state */\r\n    error: string;\r\n  };\r\n  /** Focus ring box-shadow values for interactive elements */\r\n  focusRing: {\r\n    /** Standard ring for inputs and selects */\r\n    default: string;\r\n    /** Ring for buttons (double-ring pattern) */\r\n    button: string;\r\n    /** Subtle ring for checkboxes, tabs, toggles */\r\n    subtle: string;\r\n  };\r\n  /** Section divider border (headings, dialog headers/footers, tab bars) */\r\n  divider: string;\r\n  /** Dropdown / popover container border */\r\n  dropdown: string;\r\n  /** Separator line inside elements (unit separators, table rows) */\r\n  separator: string;\r\n}\r\n\r\n/**\r\n * Derives border tokens from a theme's resolved colors.\r\n * Called once per theme change inside the ThemeProvider useMemo.\r\n */\r\nexport function computeBorderTokens(colors: ThemeColors): BorderTokens {\r\n  const thin = \"1px\";\r\n  const medium = \"1.5px\";\r\n  const thick = \"2px\";\r\n  const accent = colors.accent.primary;\r\n  const muted = colors.border.muted;\r\n  const critical = colors.status.critical;\r\n  const bgBase = colors.background.base;\r\n\r\n  return {\r\n    width: { thin, medium, thick },\r\n    input: {\r\n      default: `${thin} solid ${muted}`,\r\n      hover: `${thin} solid ${accent}80`,\r\n      focus: `${thin} solid ${accent}`,\r\n      error: `${thin} solid ${critical}`,\r\n    },\r\n    focusRing: {\r\n      // WCAG 2.4.13: focus indicators ≥ 3:1 contrast — raised from 20%/30% to 50%/60%\r\n      default: `0 0 0 3px ${accent}50, 0 0 20px ${accent}15`,\r\n      button: `0 0 0 2px ${bgBase}, 0 0 0 4px ${accent}`,\r\n      subtle: `0 0 0 2px ${accent}60`,\r\n    },\r\n    divider: `${thin} solid ${muted}`,\r\n    dropdown: `${thin} solid ${accent}30`,\r\n    separator: `${thin} solid ${muted}`,\r\n  };\r\n}\r\n\r\n/**\r\n * Base theme type used for static theme definitions.\r\n * `borders` is omitted because it is derived from colors at runtime\r\n * inside the ThemeProvider useMemo (see computeBorderTokens).\r\n */\r\nexport type ThemeTokensBase = Omit<ThemeTokens, \"borders\">;\r\n"],"mappings":";;;;;AA+WA,SAAgB,oBAAoB,QAAmC;CACrE,MAAM,OAAO;CACb,MAAM,SAAS;CACf,MAAM,QAAQ;CACd,MAAM,SAAS,OAAO,OAAO;CAC7B,MAAM,QAAQ,OAAO,OAAO;CAC5B,MAAM,WAAW,OAAO,OAAO;CAC/B,MAAM,SAAS,OAAO,WAAW;CAEjC,OAAO;EACL,OAAO;GAAE;GAAM;GAAQ;EAAM;EAC7B,OAAO;GACL,SAAS,GAAG,KAAK,SAAS;GAC1B,OAAO,GAAG,KAAK,SAAS,OAAO;GAC/B,OAAO,GAAG,KAAK,SAAS;GACxB,OAAO,GAAG,KAAK,SAAS;EAC1B;EACA,WAAW;GAET,SAAS,aAAa,OAAO,eAAe,OAAO;GACnD,QAAQ,aAAa,OAAO,cAAc;GAC1C,QAAQ,aAAa,OAAO;EAC9B;EACA,SAAS,GAAG,KAAK,SAAS;EAC1B,UAAU,GAAG,KAAK,SAAS,OAAO;EAClC,WAAW,GAAG,KAAK,SAAS;CAC9B;AACF"}

package/dist/react/types.d.ts

@@ -59,7 +59,7 @@ export interface SpacecraftPosition {
     /** Orbital inclination in degrees */
     inclination?: number;
     /** Health/operational status using AstroUXDS 6-level system */
-    status?: 'off' | 'standby' | 'normal' | 'caution' | 'serious' | 'critical';
+    status?: "off" | "standby" | "normal" | "caution" | "serious" | "critical";
 }
 export interface Spacecraft {
     id: string;
@@ -67,7 +67,7 @@ export interface Spacecraft {
     noradId?: number;
     type?: string;
     /** Status using AstroUXDS 6-level system */
-    status?: 'off' | 'standby' | 'normal' | 'caution' | 'serious' | 'critical';
+    status?: "off" | "standby" | "normal" | "caution" | "serious" | "critical";
 }
 export interface GroundStation {
     id: string;
@@ -257,7 +257,7 @@ export interface AttitudeData {
     /** Target direction vector [x, y, z] */
     targetDirection?: [number, number, number];
 }
-export type PointingMode = 'nadir' | 'sun' | 'target' | 'inertial' | 'velocity';
+export type PointingMode = "nadir" | "sun" | "target" | "inertial" | "velocity";
 export interface EclipseInfo {
     inEclipse: boolean;
     timeToEclipse: number;
@@ -307,7 +307,7 @@ export interface ThermalData {
 export interface ThrusterStatus {
     id: string;
     name: string;
-    status: 'ready' | 'firing' | 'disabled' | 'error';
+    status: "ready" | "firing" | "disabled" | "error";
     fuelFlow?: number;
 }
 export interface PropulsionSummary {
@@ -324,7 +324,7 @@ export interface ReactionWheelData {
     /** Display name (e.g. "RW-X", "RW-1") */
     name: string;
     /** Mounted axis */
-    axis: 'X' | 'Y' | 'Z' | 'skew';
+    axis: "X" | "Y" | "Z" | "skew";
     /** Current stored angular momentum in N·m·s */
     momentumNms: number;
     /** Maximum momentum capacity in N·m·s */
@@ -334,7 +334,7 @@ export interface ReactionWheelData {
     /** Maximum wheel speed in RPM */
     maxSpeedRpm: number;
     /** Operational status */
-    status: 'nominal' | 'saturated' | 'desaturating' | 'off' | 'error';
+    status: "nominal" | "saturated" | "desaturating" | "off" | "error";
     /** Power consumption in Watts */
     powerW?: number;
     /** Bearing temperature in °C */
@@ -373,9 +373,9 @@ export interface ThrusterFireEvent {
     /** Burn duration in seconds */
     durationSeconds: number;
     /** Event type */
-    type: 'impulsive' | 'finite' | 'continuous';
+    type: "impulsive" | "finite" | "continuous";
 }
-export type PlanetId = 'sun' | 'mercury' | 'venus' | 'earth' | 'moon' | 'mars' | 'jupiter' | 'saturn' | 'uranus' | 'neptune' | 'pluto';
+export type PlanetId = "sun" | "mercury" | "venus" | "earth" | "moon" | "mars" | "jupiter" | "saturn" | "uranus" | "neptune" | "pluto";
 export interface PlanetInfo {
     id: PlanetId;
     name: string;

package/dist/react/types.js

@@ -1,58 +1,158 @@
+//#region src/react/types.ts
+/**
+* Estimate orbital period from altitude (simplified)
+*/
 function estimateOrbitalPeriod(altitudeKm) {
-  const earthRadiusKm = 6371;
-  const mu = 398600.4418;
-  const semiMajorAxis = earthRadiusKm + altitudeKm;
-  const period = 2 * Math.PI * Math.sqrt(Math.pow(semiMajorAxis, 3) / mu);
-  return period / 60;
+	const earthRadiusKm = 6371;
+	const mu = 398600.4418;
+	const semiMajorAxis = earthRadiusKm + altitudeKm;
+	return 2 * Math.PI * Math.sqrt(Math.pow(semiMajorAxis, 3) / mu) / 60;
 }
+/**
+* Estimate orbital velocity from altitude (simplified)
+*/
 function estimateOrbitalVelocity(altitudeKm) {
-  const earthRadiusKm = 6371;
-  const mu = 398600.4418;
-  const radius = earthRadiusKm + altitudeKm;
-  return Math.sqrt(mu / radius);
+	const earthRadiusKm = 6371;
+	const mu = 398600.4418;
+	const radius = earthRadiusKm + altitudeKm;
+	return Math.sqrt(mu / radius);
 }
+/**
+* Convert AU to kilometers
+*/
 function auToKm(au) {
-  return au * 1495978707e-1;
+	return au * 149597870.7;
 }
+/**
+* Normalize planet name to PlanetId
+*/
 function normalizePlanetName(name) {
-  const normalized = name.toLowerCase().trim();
-  const validPlanets = [
-    "sun",
-    "mercury",
-    "venus",
-    "earth",
-    "moon",
-    "mars",
-    "jupiter",
-    "saturn",
-    "uranus",
-    "neptune",
-    "pluto"
-  ];
-  return validPlanets.includes(normalized) ? normalized : null;
+	const normalized = name.toLowerCase().trim();
+	return [
+		"sun",
+		"mercury",
+		"venus",
+		"earth",
+		"moon",
+		"mars",
+		"jupiter",
+		"saturn",
+		"uranus",
+		"neptune",
+		"pluto"
+	].includes(normalized) ? normalized : null;
 }
+/**
+* Get planet info by ID
+*/
 function getPlanet(id) {
-  return PLANETS.find((p) => p.id === id);
+	return PLANETS.find((p) => p.id === id);
 }
-const PLANETS = [
-  { id: "sun", name: "Sun", radius: 696340, mass: 1989e27, semiMajorAxis: 0, orbitalPeriod: 0, color: "#ffcc00" },
-  { id: "mercury", name: "Mercury", radius: 2439.7, mass: 33011e19, semiMajorAxis: 0.387, orbitalPeriod: 88, color: "#b5b5b5" },
-  { id: "venus", name: "Venus", radius: 6051.8, mass: 48675e20, semiMajorAxis: 0.723, orbitalPeriod: 225, color: "#e6c87a" },
-  { id: "earth", name: "Earth", radius: 6371, mass: 5972e21, semiMajorAxis: 1, orbitalPeriod: 365, color: "#4da6ff" },
-  { id: "moon", name: "Moon", radius: 1737.4, mass: 7342e19, semiMajorAxis: 257e-5, orbitalPeriod: 27.3, color: "#c0c0c0" },
-  { id: "mars", name: "Mars", radius: 3389.5, mass: 64171e19, semiMajorAxis: 1.524, orbitalPeriod: 687, color: "#e07b4a" },
-  { id: "jupiter", name: "Jupiter", radius: 69911, mass: 18982e23, semiMajorAxis: 5.203, orbitalPeriod: 4333, color: "#d8ca9d" },
-  { id: "saturn", name: "Saturn", radius: 58232, mass: 56834e22, semiMajorAxis: 9.537, orbitalPeriod: 10759, color: "#f4d59e" },
-  { id: "uranus", name: "Uranus", radius: 25362, mass: 8681e22, semiMajorAxis: 19.19, orbitalPeriod: 30687, color: "#b3e0e6" },
-  { id: "neptune", name: "Neptune", radius: 24622, mass: 102413e21, semiMajorAxis: 30.07, orbitalPeriod: 60190, color: "#5b7fff" },
-  { id: "pluto", name: "Pluto", radius: 1188.3, mass: 1303e19, semiMajorAxis: 39.48, orbitalPeriod: 90560, color: "#c9b79c" }
+/**
+* Planet data (simplified)
+*/
+var PLANETS = [
+	{
+		id: "sun",
+		name: "Sun",
+		radius: 696340,
+		mass: 1989e27,
+		semiMajorAxis: 0,
+		orbitalPeriod: 0,
+		color: "#ffcc00"
+	},
+	{
+		id: "mercury",
+		name: "Mercury",
+		radius: 2439.7,
+		mass: 33011e19,
+		semiMajorAxis: .387,
+		orbitalPeriod: 88,
+		color: "#b5b5b5"
+	},
+	{
+		id: "venus",
+		name: "Venus",
+		radius: 6051.8,
+		mass: 48675e20,
+		semiMajorAxis: .723,
+		orbitalPeriod: 225,
+		color: "#e6c87a"
+	},
+	{
+		id: "earth",
+		name: "Earth",
+		radius: 6371,
+		mass: 5972e21,
+		semiMajorAxis: 1,
+		orbitalPeriod: 365,
+		color: "#4da6ff"
+	},
+	{
+		id: "moon",
+		name: "Moon",
+		radius: 1737.4,
+		mass: 7342e19,
+		semiMajorAxis: .00257,
+		orbitalPeriod: 27.3,
+		color: "#c0c0c0"
+	},
+	{
+		id: "mars",
+		name: "Mars",
+		radius: 3389.5,
+		mass: 64171e19,
+		semiMajorAxis: 1.524,
+		orbitalPeriod: 687,
+		color: "#e07b4a"
+	},
+	{
+		id: "jupiter",
+		name: "Jupiter",
+		radius: 69911,
+		mass: 18982e23,
+		semiMajorAxis: 5.203,
+		orbitalPeriod: 4333,
+		color: "#d8ca9d"
+	},
+	{
+		id: "saturn",
+		name: "Saturn",
+		radius: 58232,
+		mass: 56834e22,
+		semiMajorAxis: 9.537,
+		orbitalPeriod: 10759,
+		color: "#f4d59e"
+	},
+	{
+		id: "uranus",
+		name: "Uranus",
+		radius: 25362,
+		mass: 8681e22,
+		semiMajorAxis: 19.19,
+		orbitalPeriod: 30687,
+		color: "#b3e0e6"
+	},
+	{
+		id: "neptune",
+		name: "Neptune",
+		radius: 24622,
+		mass: 102413e21,
+		semiMajorAxis: 30.07,
+		orbitalPeriod: 60190,
+		color: "#5b7fff"
+	},
+	{
+		id: "pluto",
+		name: "Pluto",
+		radius: 1188.3,
+		mass: 1303e19,
+		semiMajorAxis: 39.48,
+		orbitalPeriod: 90560,
+		color: "#c9b79c"
+	}
 ];
-export {
-  PLANETS,
-  auToKm,
-  estimateOrbitalPeriod,
-  estimateOrbitalVelocity,
-  getPlanet,
-  normalizePlanetName
-};
-//# sourceMappingURL=types.js.map
+//#endregion
+export { PLANETS, auToKm, estimateOrbitalPeriod, estimateOrbitalVelocity, getPlanet, normalizePlanetName };
+
+//# sourceMappingURL=types.js.map