@space-man/react-theme-animation 2.1.0 → 2.3.0

package/README.md

@@ -1,32 +1,18 @@
 # @space-man/react-theme-animation
 
-https://github.com/user-attachments/assets/2819cf70-c474-478e-b821-6b26457c8d4a
-
 React theme switching with smooth view transition animations, multi-theme support, and synchronized state management.
 
-## What's New in v2.1
-
-- **animationOff Parameter**: Instantly switch themes without animation via optional parameter on all toggle functions
-- **Universal SSR Support**: Pre-hydration script prevents flash in Next.js, Remix, and SSR frameworks
-- **Three Framework-Specific Providers**: NextThemeProvider (SSR/Next.js), TanStackThemeProvider (TanStack Start), ViteThemeProvider (Vite SPAs)
-- **Consistent Hook API**: All providers expose identical hook interface with 15+ methods
-- **Enhanced Theme Control**: Direct functions for toggleLightTheme(), toggleDarkTheme(), createColorThemeToggle()
+## Spaceman React Theme Animation v2 release
 
-## Live Demo
+Version 2 moves the library into a workspace-friendly monorepo, keeps the published package name stable, and standardizes the public API around flat root imports.
 
-[View Live Demo](https://spaceman-rta-vite.netlify.app/)
+Highlights in this release:
 
-## Features
-
-- Smooth view transition animations with customizable origins
-- Multi-theme support (light, dark, system)
-- Color theme variants (brand colors, custom themes)
-- Three framework-optimized providers
-- Powerful useThemeAnimation hook for custom implementations
-- Ready-to-use ThemeSwitcher and ThemeSelector components
-- State synchronization across components
-- Full TypeScript support
-- Performance optimized with reduced motion support
+- root-first public API via `@space-man/react-theme-animation`
+- framework-specific providers for Next.js, TanStack Start, and Vite
+- TanStack SSR helpers exposed from the root package
+- workspace examples for Next.js, TanStack Start, and TanStack Start SSR
+- build and packaging updates for ESM, CJS, and declaration output
 
 ## Installation
 
@@ -34,22 +20,66 @@ React theme switching with smooth view transition animations, multi-theme suppor
 npm install @space-man/react-theme-animation
 ```
 
+```bash
+pnpm add @space-man/react-theme-animation
+```
+
+```bash
+yarn add @space-man/react-theme-animation
+```
+
+## Imports
+
+Import everything from the package root:
+
+```tsx
+import {
+  NextThemeProvider,
+  TanStackThemeProvider,
+  ViteThemeProvider,
+  ThemeSwitcher,
+  ThemeSelector,
+  useThemeAnimation,
+} from '@space-man/react-theme-animation'
+```
+
+Compatibility subpath exports still exist for migration safety, but the package root is the documented public API.
+
+For Next.js App Router, import providers/hooks from the package root inside client components. A
+typical setup is a local `app/providers.tsx` file with `'use client'`, rendered by the server
+`app/layout.tsx`.
+
+## Tailwind Setup For Prebuilt Components
+
+`ThemeSwitcher`, `ThemeSelector`, and the bundled select primitives use Tailwind utility classes. The package does not ship a compiled stylesheet for those components, so the consuming app must include the installed package in Tailwind's source scan.
+
+For Tailwind v4, add an `@source` directive next to your Tailwind import:
+
+```css
+@import 'tailwindcss';
+@source '../node_modules/@space-man/react-theme-animation/dist';
+```
+
+Adjust the relative path to match your app structure.
+
 ## Provider Selection
 
 Choose the right provider for your framework:
 
-| Provider              | Best For                       | Key Features                                     |
-| --------------------- | ------------------------------ | ------------------------------------------------ |
-| NextThemeProvider     | Next.js, Remix, SSR frameworks | Pre-hydration script, CSP support, animations    |
-| TanStackThemeProvider | TanStack Start apps            | Isomorphic rendering, useHydrated() integration  |
-| ViteThemeProvider     | Vite React SPAs                | Lightweight, transition control, no SSR overhead |
+| Provider              | Best For                       | Key Features                                      |
+| --------------------- | ------------------------------ | ------------------------------------------------- |
+| SpacemanThemeProvider | General React apps             | Universal provider with synchronized theme state  |
+| NextThemeProvider     | Next.js, Remix, SSR frameworks | Pre-hydration script, CSP support, animations     |
+| TanStackThemeProvider | TanStack Start apps            | Cookie SSR, pre-hydration script, system CSS mode |
+| ViteThemeProvider     | Vite React SPAs                | Lightweight, transition control, no SSR overhead  |
 
 ## Quick Start
 
-Basic pattern that works across all providers:
-
 ```tsx
-import { SpacemanThemeProvider, useSpacemanTheme } from '@space-man/react-theme-animation'
+import {
+  SpacemanThemeProvider,
+  useSpacemanTheme,
+} from '@space-man/react-theme-animation'
 
 function App() {
   return (
@@ -70,19 +100,17 @@ function ThemeToggle() {
 }
 ```
 
-**Choose your framework setup guide:**
+## Documentation
 
-- **[Next.js / SSR Setup Guide](./docs/nextjs-setup.md)** - Complete guide with App Router, Pages Router, CSP support
-- **[TanStack Start Setup Guide](./docs/tanstack-start-setup.md)** - Isomorphic rendering, hydration-safe patterns
-- **[Vite React SPA Setup Guide](./docs/vite-setup.md)** - Client-side setup, flash prevention, routing
+Repository documentation, framework guides, migration notes, and examples are linked from the GitHub docs hub:
 
-**[View Complete Examples](./example/)** - Next.js implementation with both hook and provider patterns
+- https://github.com/tonyedgal/spaceman-react-theme-animation#documentation
 
 ## API Reference
 
 ### Shared Hook Return (All Providers)
 
-All providers expose the same hook interface:
+All providers expose the same core hook interface:
 
 | Property               | Type                                                    | Description                        |
 | ---------------------- | ------------------------------------------------------- | ---------------------------------- |
@@ -103,115 +131,17 @@ All providers expose the same hook interface:
 | isColorThemeActive     | (colorTheme: string) => boolean                         | Check if color theme active        |
 | switchThemeFromElement | (theme: Theme, element: HTMLElement) => Promise<void>   | Switch with animation from element |
 
-### Provider Props
-
-| Prop                      | Spaceman | NextTheme | TanStack | Vite | Type               | Default                     |
-| ------------------------- | -------- | --------- | -------- | ---- | ------------------ | --------------------------- |
-| defaultTheme              | ✓        | ✓         | ✓        | ✓    | Theme              | 'system'                    |
-| defaultColorTheme         | ✓        | ✓         | ✓        | ✓    | ColorTheme         | 'default'                   |
-| themes                    | ✓        | ✓         | ✓        | ✓    | Theme[]            | ['light', 'dark', 'system'] |
-| colorThemes               | ✓        | ✓         | ✓        | ✓    | ColorTheme[]       | ['default']                 |
-| animationType             | ✓        | ✓         | ✓        | ✓    | ThemeAnimationType | CIRCLE                      |
-| duration                  | ✓        | ✓         | ✓        | ✓    | number             | 500                         |
-| storageKey                | ✓        | ✓         | ✓        | ✓    | string             | varies                      |
-| colorStorageKey           | ✓        | ✓         | ✓        | ✓    | string             | varies                      |
-| nonce                     | ✗        | ✓         | ✗        | ✗    | string             | -                           |
-| disablePreHydrationScript | ✗        | ✓         | ✗        | ✗    | boolean            | false                       |
-| disableTransitionOnChange | ✗        | ✗         | ✗        | ✓    | boolean            | false                       |
-| onThemeChange             | ✓        | ✓         | ✓        | ✓    | function           | -                           |
-| onColorThemeChange        | ✓        | ✓         | ✓        | ✓    | function           | -                           |
-
-### Components
-
-**ThemeSwitcher**: Pre-built theme toggle buttons with animations  
-**ThemeSelector**: Dropdown selector for color themes
-
-See framework-specific guides for component usage examples.
-
----
-
-<details>
-<summary>CSS Variables Setup</summary>
-
-Define theme variables in your global CSS file:
-
-```css
-:root {
-  --background: 0 0% 100%;
-  --foreground: 222.2 84% 4.9%;
-  --primary: 221.2 83.2% 53.3%;
-}
-
-.dark {
-  --background: 222.2 84% 4.9%;
-  --foreground: 210 40% 98%;
-  --primary: 217.2 91.2% 59.8%;
-}
-
-/* Color theme variants */
-.theme-blue {
-  --primary: 221.2 83.2% 53.3%;
-}
-
-.theme-blue.dark {
-  --primary: 217.2 91.2% 59.8%;
-}
-
-.theme-green {
-  --primary: 142.1 76.2% 36.3%;
-}
-
-.theme-green.dark {
-  --primary: 142.1 70.6% 45.3%;
-}
-```
-
-</details>
-
-<details>
-<summary>Browser Support</summary>
-
-- View Transitions API: Chrome 111+, Edge 111+
-- Fallback: All modern browsers with CSS transitions
-- Reduced Motion: Respects prefers-reduced-motion
-- Framework Support: React 16.8+ (hooks required)
-
-</details>
-
-<details>
-<summary>Advanced Configuration</summary>
-
-### Animation Control
-
-```tsx
-const { switchTheme, toggleTheme } = useSpacemanTheme()
-
-// With animation (default)
-await switchTheme('dark')
-
-// Without animation
-await switchTheme('dark', true)
-await toggleTheme(true)
-```
-
-### Custom Hook Usage
-
-```tsx
-import { useThemeAnimation } from '@space-man/react-theme-animation'
-
-const { theme, toggleTheme, ref } = useThemeAnimation({
-  animationType: ThemeAnimationType.BLUR_CIRCLE,
-  duration: 750,
-  colorThemes: ['default', 'blue', 'green'],
-  onThemeChange: theme => console.log('Theme:', theme),
-})
-```
+### Root Exports
 
-</details>
+The root package exports:
 
-## Contributing
+- providers and framework hooks
+- prebuilt `ThemeSwitcher` and `ThemeSelector`
+- `useThemeAnimation`
+- shared types and animation utilities
+- TanStack server helpers such as `buildServerThemeData`, `STORAGE_KEY`, and `COLOR_STORAGE_KEY`
 
-Fork the repository, make your changes, and submit a merge request for review.
+See the repository docs hub for provider-specific setup guides and examples.
 
 ## License
 

package/dist/core/index.cjs

@@ -0,0 +1,74 @@
+'use strict';
+
+// src/core/types/index.ts
+var ThemeAnimationType = /* @__PURE__ */ ((ThemeAnimationType2) => {
+  ThemeAnimationType2["CIRCLE"] = "circle";
+  ThemeAnimationType2["BLUR_CIRCLE"] = "blur-circle";
+  ThemeAnimationType2["SLIDE"] = "slide";
+  return ThemeAnimationType2;
+})(ThemeAnimationType || {});
+
+// src/core/utils/animations.ts
+var isBrowser = typeof window !== "undefined";
+var injectBaseStyles = () => {
+  if (isBrowser) {
+    const styleId = "spaceman-theme-base-style";
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      const isHighResolution = window.innerWidth >= 3e3 || window.innerHeight >= 2e3;
+      style.textContent = `
+        ::view-transition-old(root),
+        ::view-transition-new(root) {
+          animation: none;
+          mix-blend-mode: normal;
+          ${isHighResolution ? "transform: translateZ(0);" : ""}
+        }
+        
+        ${isHighResolution ? `
+        ::view-transition-group(root),
+        ::view-transition-image-pair(root),
+        ::view-transition-old(root),
+        ::view-transition-new(root) {
+          backface-visibility: hidden;
+          perspective: 1000px;
+          transform: translate3d(0, 0, 0);
+        }
+        ` : ""}
+      `;
+      document.head.appendChild(style);
+    }
+  }
+};
+var getSystemTheme = () => {
+  if (!isBrowser) return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+};
+var resolveTheme = (theme) => {
+  if (theme === "system") {
+    return getSystemTheme();
+  }
+  return theme === "dark" ? "dark" : "light";
+};
+var resolveThemeForServer = (theme) => {
+  if (theme === "system") {
+    return "system";
+  }
+  return theme === "dark" ? "dark" : "light";
+};
+var supportsViewTransitions = () => {
+  return isBrowser && "startViewTransition" in document;
+};
+var prefersReducedMotion = () => {
+  return isBrowser && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+};
+
+exports.ThemeAnimationType = ThemeAnimationType;
+exports.getSystemTheme = getSystemTheme;
+exports.injectBaseStyles = injectBaseStyles;
+exports.prefersReducedMotion = prefersReducedMotion;
+exports.resolveTheme = resolveTheme;
+exports.resolveThemeForServer = resolveThemeForServer;
+exports.supportsViewTransitions = supportsViewTransitions;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/core/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/core/types/index.ts","../../src/core/utils/animations.ts"],"names":["ThemeAnimationType"],"mappings":";;;AAEO,IAAK,kBAAA,qBAAAA,mBAAAA,KAAL;AACL,EAAAA,oBAAA,QAAA,CAAA,GAAS,QAAA;AACT,EAAAA,oBAAA,aAAA,CAAA,GAAc,aAAA;AACd,EAAAA,oBAAA,OAAA,CAAA,GAAQ,OAAA;AAHE,EAAA,OAAAA,mBAAAA;AAAA,CAAA,EAAA,kBAAA,IAAA,EAAA;;;ACAZ,IAAM,SAAA,GAAY,OAAO,MAAA,KAAW,WAAA;AAE7B,IAAM,mBAAmB,MAAY;AAC1C,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,MAAM,OAAA,GAAU,2BAAA;AAChB,IAAA,IAAI,CAAC,QAAA,CAAS,cAAA,CAAe,OAAO,CAAA,EAAG;AACrC,MAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,aAAA,CAAc,OAAO,CAAA;AAC5C,MAAA,KAAA,CAAM,EAAA,GAAK,OAAA;AACX,MAAA,MAAM,gBAAA,GACJ,MAAA,CAAO,UAAA,IAAc,GAAA,IAAQ,OAAO,WAAA,IAAe,GAAA;AAErD,MAAA,KAAA,CAAM,WAAA,GAAc;AAAA;AAAA;AAAA;AAAA;AAAA,UAAA,EAKd,gBAAA,GAAmB,8BAA8B,EAAE;AAAA;AAAA;AAAA,QAAA,EAIrD,gBAAA,GACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAAA,CAAA,GAUA,EACN;AAAA,MAAA,CAAA;AAEF,MAAA,QAAA,CAAS,IAAA,CAAK,YAAY,KAAK,CAAA;AAAA,IACjC;AAAA,EACF;AACF;AAYO,IAAM,iBAAiB,MAAwB;AACpD,EAAA,IAAI,CAAC,WAAW,OAAO,OAAA;AACvB,EAAA,OAAO,MAAA,CAAO,UAAA,CAAW,8BAA8B,CAAA,CAAE,UACrD,MAAA,GACA,OAAA;AACN;AAEO,IAAM,YAAA,GAAe,CAAC,KAAA,KAAoC;AAC/D,EAAA,IAAI,UAAU,QAAA,EAAU;AACtB,IAAA,OAAO,cAAA,EAAe;AAAA,EACxB;AACA,EAAA,OAAO,KAAA,KAAU,SAAS,MAAA,GAAS,OAAA;AACrC;AAEO,IAAM,qBAAA,GAAwB,CACnC,KAAA,KACgC;AAChC,EAAA,IAAI,UAAU,QAAA,EAAU;AACtB,IAAA,OAAO,QAAA;AAAA,EACT;AACA,EAAA,OAAO,KAAA,KAAU,SAAS,MAAA,GAAS,OAAA;AACrC;AAEO,IAAM,0BAA0B,MAAe;AACpD,EAAA,OAAO,aAAa,qBAAA,IAAyB,QAAA;AAC/C;AAEO,IAAM,uBAAuB,MAAe;AACjD,EAAA,OACE,SAAA,IAAa,MAAA,CAAO,UAAA,CAAW,kCAAkC,CAAA,CAAE,OAAA;AAEvE","file":"index.cjs","sourcesContent":["import { RefObject } from 'react'\n\nexport enum ThemeAnimationType {\n  CIRCLE = 'circle',\n  BLUR_CIRCLE = 'blur-circle',\n  SLIDE = 'slide',\n}\n\nexport type SlideDirection =\n  | 'left'\n  | 'right'\n  | 'top'\n  | 'bottom'\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-right'\n\nexport type Theme = 'light' | 'dark' | 'system'\nexport type ColorTheme = string\nexport type SystemThemeMode = 'css' | 'js'\n\nexport interface UseThemeAnimationProps {\n  duration?: number\n  easing?: string\n  animationType?: ThemeAnimationType\n  blurAmount?: number\n  styleId?: string\n\n  themes?: Theme[]\n  colorThemes?: ColorTheme[]\n  defaultTheme?: Theme\n  defaultColorTheme?: ColorTheme\n\n  globalClassName?: string\n  colorThemePrefix?: string\n  attribute?: 'class' | 'data-theme'\n  value?: Record<string, string>\n  enableColorScheme?: boolean\n\n  storageKey?: string\n  colorStorageKey?: string\n\n  theme?: Theme\n  colorTheme?: ColorTheme\n\n  onThemeChange?: (theme: Theme) => void\n  onColorThemeChange?: (colorTheme: ColorTheme) => void\n\n  initialTheme?: Theme\n  initialColorTheme?: ColorTheme\n  systemThemeMode?: SystemThemeMode\n\n  // Slide animation options (only valid when animationType is SLIDE)\n  slideDirection?: SlideDirection\n  slideFromX?: number // custom from translate X (%)\n  slideFromY?: number // custom from translate Y (%)\n  slideToX?: number // custom to translate X (%)\n  slideToY?: number // custom to translate Y (%)\n}\n\nexport interface UseThemeAnimationReturn {\n  ref: RefObject<HTMLButtonElement | null>\n\n  theme: Theme\n  colorTheme: ColorTheme\n  resolvedTheme: 'light' | 'dark'\n  systemTheme: 'light' | 'dark'\n\n  setTheme: (theme: Theme) => void\n  setColorTheme: (colorTheme: ColorTheme) => void\n\n  switchTheme: (theme: Theme, animationOff?: boolean) => Promise<void>\n  switchColorTheme: (colorTheme: string) => void\n\n  toggleTheme: (animationOff?: boolean) => Promise<void>\n  toggleLightTheme: (animationOff?: boolean) => Promise<void>\n  toggleDarkTheme: (animationOff?: boolean) => Promise<void>\n  toggleColorTheme: () => void\n\n  createColorThemeToggle: (targetColorTheme: string) => () => void\n  isColorThemeActive: (targetColorTheme: string) => boolean\n}\n\nexport interface ThemeSwitcherProps {\n  themes?: Theme[]\n  currentTheme?: Theme\n  onThemeChange?: (theme: Theme) => void\n\n  animationType?: ThemeAnimationType\n  duration?: number\n\n  className?: string\n  size?: 'sm' | 'md' | 'lg'\n  variant?: 'default' | 'outline' | 'ghost'\n\n  icons?: {\n    light?: React.ReactNode\n    dark?: React.ReactNode\n    system?: React.ReactNode\n  }\n}\n\nexport interface ThemeSelectorProps {\n  themes?: Theme[]\n  colorThemes?: ColorTheme[]\n  currentTheme?: Theme\n  currentColorTheme?: ColorTheme\n\n  onThemeChange?: (theme: Theme) => void\n  onColorThemeChange?: (colorTheme: ColorTheme) => void\n\n  animationType?: ThemeAnimationType\n  duration?: number\n\n  className?: string\n  placeholder?: string\n\n  themeLabel?: string\n  colorThemeLabel?: string\n}\n","import { ThemeAnimationType } from '../types'\n\nconst isBrowser = typeof window !== 'undefined'\n\nexport const injectBaseStyles = (): void => {\n  if (isBrowser) {\n    const styleId = 'spaceman-theme-base-style'\n    if (!document.getElementById(styleId)) {\n      const style = document.createElement('style')\n      style.id = styleId\n      const isHighResolution =\n        window.innerWidth >= 3000 || window.innerHeight >= 2000\n\n      style.textContent = `\n        ::view-transition-old(root),\n        ::view-transition-new(root) {\n          animation: none;\n          mix-blend-mode: normal;\n          ${isHighResolution ? 'transform: translateZ(0);' : ''}\n        }\n        \n        ${\n          isHighResolution\n            ? `\n        ::view-transition-group(root),\n        ::view-transition-image-pair(root),\n        ::view-transition-old(root),\n        ::view-transition-new(root) {\n          backface-visibility: hidden;\n          perspective: 1000px;\n          transform: translate3d(0, 0, 0);\n        }\n        `\n            : ''\n        }\n      `\n      document.head.appendChild(style)\n    }\n  }\n}\n\nexport const createBlurCircleMask = (blur: number): string => {\n  const isHighResolution =\n    isBrowser && (window.innerWidth >= 3000 || window.innerHeight >= 2000)\n\n  const blurFilter = `<filter id=\"blur\"><feGaussianBlur stdDeviation=\"${blur}\" /></filter>`\n  const circleRadius = isHighResolution ? 20 : 25\n\n  return `url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-50 -50 100 100\"><defs>${blurFilter}</defs><circle cx=\"0\" cy=\"0\" r=\"${circleRadius}\" fill=\"white\" filter=\"url(%23blur)\"/></svg>')`\n}\n\nexport const getSystemTheme = (): 'light' | 'dark' => {\n  if (!isBrowser) return 'light'\n  return window.matchMedia('(prefers-color-scheme: dark)').matches\n    ? 'dark'\n    : 'light'\n}\n\nexport const resolveTheme = (theme: string): 'light' | 'dark' => {\n  if (theme === 'system') {\n    return getSystemTheme()\n  }\n  return theme === 'dark' ? 'dark' : 'light'\n}\n\nexport const resolveThemeForServer = (\n  theme: string\n): 'light' | 'dark' | 'system' => {\n  if (theme === 'system') {\n    return 'system'\n  }\n  return theme === 'dark' ? 'dark' : 'light'\n}\n\nexport const supportsViewTransitions = (): boolean => {\n  return isBrowser && 'startViewTransition' in document\n}\n\nexport const prefersReducedMotion = (): boolean => {\n  return (\n    isBrowser && window.matchMedia('(prefers-reduced-motion: reduce)').matches\n  )\n}\n\nexport interface AnimationConfig {\n  a?: number\n  b?: number\n  x: number\n  y: number\n  duration: number\n  easing: string\n  animationType: ThemeAnimationType\n  blurAmount: number\n  styleId: string\n}\n\nexport const createCircleAnimation = (config: AnimationConfig): void => {\n  const { x, y, duration, easing } = config\n\n  // Calculate the distance to each corner of the viewport\n  const topLeft = Math.hypot(x, y)\n  const topRight = Math.hypot(window.innerWidth - x, y)\n  const bottomLeft = Math.hypot(x, window.innerHeight - y)\n  const bottomRight = Math.hypot(window.innerWidth - x, window.innerHeight - y)\n\n  // Find the maximum distance to ensure animation covers the entire viewport\n  const maxRadius = Math.max(topLeft, topRight, bottomLeft, bottomRight)\n\n  document.documentElement.animate(\n    {\n      clipPath: [\n        `circle(0px at ${x}px ${y}px)`,\n        `circle(${maxRadius}px at ${x}px ${y}px)`,\n      ],\n    },\n    {\n      duration,\n      easing,\n      pseudoElement: '::view-transition-new(root)',\n    }\n  )\n}\n\nexport const createSlideAnimation = (config: AnimationConfig): void => {\n  const { a = -100, b = 0, x = 0, y = 0, duration, styleId } = config\n\n  const styleElement = document.createElement('style')\n  styleElement.id = styleId\n\n  styleElement.textContent = `\n    ::view-transition-old(root) {\n      animation-delay: ${duration}ms;\n    }\n    \n    ::view-transition-new(root) {\n      animation: move-in ${duration}ms;\n      animation-timing-function: cubic-bezier(0.66, 0, 0.34, 1);\n    }\n    \n    @keyframes move-in {\n      from {\n        translate: ${a}% ${b}%;\n      }\n      to {\n        translate: ${x}% ${y}%;\n      }\n    }\n  `\n\n  document.head.appendChild(styleElement)\n\n  // Clean up after animation\n  setTimeout(() => {\n    const styleElement = document.getElementById(styleId)\n    if (styleElement) {\n      styleElement.remove()\n    }\n  }, duration)\n}\n\nexport const createBlurCircleAnimation = (config: AnimationConfig): void => {\n  const { x, y, duration, easing, blurAmount, styleId } = config\n\n  const existingStyle = document.getElementById(styleId)\n  if (existingStyle) {\n    existingStyle.remove()\n  }\n\n  const viewportSize = Math.max(window.innerWidth, window.innerHeight) + 200\n  const isHighResolution =\n    window.innerWidth >= 3000 || window.innerHeight >= 2000\n  const scaleFactor = isHighResolution ? 2.5 : 4\n  const optimalMaskSize = isHighResolution\n    ? Math.min(viewportSize * scaleFactor, 5000)\n    : viewportSize * scaleFactor\n\n  const topLeft = Math.hypot(x, y)\n  const topRight = Math.hypot(window.innerWidth - x, y)\n  const bottomLeft = Math.hypot(x, window.innerHeight - y)\n  const bottomRight = Math.hypot(window.innerWidth - x, window.innerHeight - y)\n  const maxRadius = Math.max(topLeft, topRight, bottomLeft, bottomRight)\n\n  const styleElement = document.createElement('style')\n  styleElement.id = styleId\n\n  const blurFactor = isHighResolution ? 1.5 : 1.2\n  const finalMaskSize = Math.max(optimalMaskSize, maxRadius * 2.5)\n\n  styleElement.textContent = `\n    ::view-transition-group(root) {\n      animation-duration: ${duration}ms;\n      animation-timing-function: ${\n        isHighResolution\n          ? 'cubic-bezier(0.2, 0, 0.2, 1)'\n          : 'linear(' +\n            '0 0%, 0.2342 12.49%, 0.4374 24.99%,' +\n            '0.6093 37.49%, 0.6835 43.74%,' +\n            '0.7499 49.99%, 0.8086 56.25%,' +\n            '0.8593 62.5%, 0.9023 68.75%, 0.9375 75%,' +\n            '0.9648 81.25%, 0.9844 87.5%,' +\n            '0.9961 93.75%, 1 100%' +\n            ')'\n      };\n      will-change: transform;\n    }\n    \n    ::view-transition-new(root) {\n      mask: ${createBlurCircleMask(blurAmount * blurFactor)} 0 0 / 100% 100% no-repeat;\n      mask-position: ${x}px ${y}px;\n      animation: spaceman-mask-scale ${duration}ms ${easing};\n      transform-origin: ${x}px ${y}px;\n      will-change: mask-size, mask-position;\n    }\n    \n    ::view-transition-old(root),\n    .dark::view-transition-old(root) {\n      animation: spaceman-mask-scale ${duration}ms ${easing};\n      transform-origin: ${x}px ${y}px;\n      z-index: -1;\n      will-change: mask-size, mask-position;\n    }\n    \n    @keyframes spaceman-mask-scale {\n      0% {\n        mask-size: 0px;\n        mask-position: ${x}px ${y}px;\n      }\n      100% {\n        mask-size: ${finalMaskSize}px;\n        mask-position: ${x - finalMaskSize / 2}px ${y - finalMaskSize / 2}px;\n      }\n    }\n  `\n\n  document.head.appendChild(styleElement)\n\n  setTimeout(() => {\n    const styleElement = document.getElementById(styleId)\n    if (styleElement) {\n      styleElement.remove()\n    }\n  }, duration)\n}\n"]}

package/dist/{esm/types/index.d.ts → core/index.d.cts}

@@ -1,13 +1,15 @@
 import { RefObject } from 'react';
-export declare enum ThemeAnimationType {
+
+declare enum ThemeAnimationType {
     CIRCLE = "circle",
     BLUR_CIRCLE = "blur-circle",
     SLIDE = "slide"
 }
-export type SlideDirection = 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-export type Theme = 'light' | 'dark' | 'system';
-export type ColorTheme = string;
-export interface UseThemeAnimationProps {
+type SlideDirection = 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+type Theme = 'light' | 'dark' | 'system';
+type ColorTheme = string;
+type SystemThemeMode = 'css' | 'js';
+interface UseThemeAnimationProps {
     duration?: number;
     easing?: string;
     animationType?: ThemeAnimationType;
@@ -19,23 +21,30 @@ export interface UseThemeAnimationProps {
     defaultColorTheme?: ColorTheme;
     globalClassName?: string;
     colorThemePrefix?: string;
+    attribute?: 'class' | 'data-theme';
+    value?: Record<string, string>;
+    enableColorScheme?: boolean;
     storageKey?: string;
     colorStorageKey?: string;
     theme?: Theme;
     colorTheme?: ColorTheme;
     onThemeChange?: (theme: Theme) => void;
     onColorThemeChange?: (colorTheme: ColorTheme) => void;
+    initialTheme?: Theme;
+    initialColorTheme?: ColorTheme;
+    systemThemeMode?: SystemThemeMode;
     slideDirection?: SlideDirection;
     slideFromX?: number;
     slideFromY?: number;
     slideToX?: number;
     slideToY?: number;
 }
-export interface UseThemeAnimationReturn {
+interface UseThemeAnimationReturn {
     ref: RefObject<HTMLButtonElement | null>;
     theme: Theme;
     colorTheme: ColorTheme;
     resolvedTheme: 'light' | 'dark';
+    systemTheme: 'light' | 'dark';
     setTheme: (theme: Theme) => void;
     setColorTheme: (colorTheme: ColorTheme) => void;
     switchTheme: (theme: Theme, animationOff?: boolean) => Promise<void>;
@@ -47,7 +56,7 @@ export interface UseThemeAnimationReturn {
     createColorThemeToggle: (targetColorTheme: string) => () => void;
     isColorThemeActive: (targetColorTheme: string) => boolean;
 }
-export interface ThemeSwitcherProps {
+interface ThemeSwitcherProps {
     themes?: Theme[];
     currentTheme?: Theme;
     onThemeChange?: (theme: Theme) => void;
@@ -62,7 +71,7 @@ export interface ThemeSwitcherProps {
         system?: React.ReactNode;
     };
 }
-export interface ThemeSelectorProps {
+interface ThemeSelectorProps {
     themes?: Theme[];
     colorThemes?: ColorTheme[];
     currentTheme?: Theme;
@@ -76,3 +85,12 @@ export interface ThemeSelectorProps {
     themeLabel?: string;
     colorThemeLabel?: string;
 }
+
+declare const injectBaseStyles: () => void;
+declare const getSystemTheme: () => "light" | "dark";
+declare const resolveTheme: (theme: string) => "light" | "dark";
+declare const resolveThemeForServer: (theme: string) => "light" | "dark" | "system";
+declare const supportsViewTransitions: () => boolean;
+declare const prefersReducedMotion: () => boolean;
+
+export { type ColorTheme, type SlideDirection, type SystemThemeMode, type Theme, ThemeAnimationType, type ThemeSelectorProps, type ThemeSwitcherProps, type UseThemeAnimationProps, type UseThemeAnimationReturn, getSystemTheme, injectBaseStyles, prefersReducedMotion, resolveTheme, resolveThemeForServer, supportsViewTransitions };

package/dist/{cjs/types → core}/index.d.ts

@@ -1,13 +1,15 @@
 import { RefObject } from 'react';
-export declare enum ThemeAnimationType {
+
+declare enum ThemeAnimationType {
     CIRCLE = "circle",
     BLUR_CIRCLE = "blur-circle",
     SLIDE = "slide"
 }
-export type SlideDirection = 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-export type Theme = 'light' | 'dark' | 'system';
-export type ColorTheme = string;
-export interface UseThemeAnimationProps {
+type SlideDirection = 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+type Theme = 'light' | 'dark' | 'system';
+type ColorTheme = string;
+type SystemThemeMode = 'css' | 'js';
+interface UseThemeAnimationProps {
     duration?: number;
     easing?: string;
     animationType?: ThemeAnimationType;
@@ -19,23 +21,30 @@ export interface UseThemeAnimationProps {
     defaultColorTheme?: ColorTheme;
     globalClassName?: string;
     colorThemePrefix?: string;
+    attribute?: 'class' | 'data-theme';
+    value?: Record<string, string>;
+    enableColorScheme?: boolean;
     storageKey?: string;
     colorStorageKey?: string;
     theme?: Theme;
     colorTheme?: ColorTheme;
     onThemeChange?: (theme: Theme) => void;
     onColorThemeChange?: (colorTheme: ColorTheme) => void;
+    initialTheme?: Theme;
+    initialColorTheme?: ColorTheme;
+    systemThemeMode?: SystemThemeMode;
     slideDirection?: SlideDirection;
     slideFromX?: number;
     slideFromY?: number;
     slideToX?: number;
     slideToY?: number;
 }
-export interface UseThemeAnimationReturn {
+interface UseThemeAnimationReturn {
     ref: RefObject<HTMLButtonElement | null>;
     theme: Theme;
     colorTheme: ColorTheme;
     resolvedTheme: 'light' | 'dark';
+    systemTheme: 'light' | 'dark';
     setTheme: (theme: Theme) => void;
     setColorTheme: (colorTheme: ColorTheme) => void;
     switchTheme: (theme: Theme, animationOff?: boolean) => Promise<void>;
@@ -47,7 +56,7 @@ export interface UseThemeAnimationReturn {
     createColorThemeToggle: (targetColorTheme: string) => () => void;
     isColorThemeActive: (targetColorTheme: string) => boolean;
 }
-export interface ThemeSwitcherProps {
+interface ThemeSwitcherProps {
     themes?: Theme[];
     currentTheme?: Theme;
     onThemeChange?: (theme: Theme) => void;
@@ -62,7 +71,7 @@ export interface ThemeSwitcherProps {
         system?: React.ReactNode;
     };
 }
-export interface ThemeSelectorProps {
+interface ThemeSelectorProps {
     themes?: Theme[];
     colorThemes?: ColorTheme[];
     currentTheme?: Theme;
@@ -76,3 +85,12 @@ export interface ThemeSelectorProps {
     themeLabel?: string;
     colorThemeLabel?: string;
 }
+
+declare const injectBaseStyles: () => void;
+declare const getSystemTheme: () => "light" | "dark";
+declare const resolveTheme: (theme: string) => "light" | "dark";
+declare const resolveThemeForServer: (theme: string) => "light" | "dark" | "system";
+declare const supportsViewTransitions: () => boolean;
+declare const prefersReducedMotion: () => boolean;
+
+export { type ColorTheme, type SlideDirection, type SystemThemeMode, type Theme, ThemeAnimationType, type ThemeSelectorProps, type ThemeSwitcherProps, type UseThemeAnimationProps, type UseThemeAnimationReturn, getSystemTheme, injectBaseStyles, prefersReducedMotion, resolveTheme, resolveThemeForServer, supportsViewTransitions };

package/dist/core/index.js

@@ -0,0 +1,66 @@
+// src/core/types/index.ts
+var ThemeAnimationType = /* @__PURE__ */ ((ThemeAnimationType2) => {
+  ThemeAnimationType2["CIRCLE"] = "circle";
+  ThemeAnimationType2["BLUR_CIRCLE"] = "blur-circle";
+  ThemeAnimationType2["SLIDE"] = "slide";
+  return ThemeAnimationType2;
+})(ThemeAnimationType || {});
+
+// src/core/utils/animations.ts
+var isBrowser = typeof window !== "undefined";
+var injectBaseStyles = () => {
+  if (isBrowser) {
+    const styleId = "spaceman-theme-base-style";
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      const isHighResolution = window.innerWidth >= 3e3 || window.innerHeight >= 2e3;
+      style.textContent = `
+        ::view-transition-old(root),
+        ::view-transition-new(root) {
+          animation: none;
+          mix-blend-mode: normal;
+          ${isHighResolution ? "transform: translateZ(0);" : ""}
+        }
+        
+        ${isHighResolution ? `
+        ::view-transition-group(root),
+        ::view-transition-image-pair(root),
+        ::view-transition-old(root),
+        ::view-transition-new(root) {
+          backface-visibility: hidden;
+          perspective: 1000px;
+          transform: translate3d(0, 0, 0);
+        }
+        ` : ""}
+      `;
+      document.head.appendChild(style);
+    }
+  }
+};
+var getSystemTheme = () => {
+  if (!isBrowser) return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+};
+var resolveTheme = (theme) => {
+  if (theme === "system") {
+    return getSystemTheme();
+  }
+  return theme === "dark" ? "dark" : "light";
+};
+var resolveThemeForServer = (theme) => {
+  if (theme === "system") {
+    return "system";
+  }
+  return theme === "dark" ? "dark" : "light";
+};
+var supportsViewTransitions = () => {
+  return isBrowser && "startViewTransition" in document;
+};
+var prefersReducedMotion = () => {
+  return isBrowser && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+};
+
+export { ThemeAnimationType, getSystemTheme, injectBaseStyles, prefersReducedMotion, resolveTheme, resolveThemeForServer, supportsViewTransitions };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/core/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/core/types/index.ts","../../src/core/utils/animations.ts"],"names":["ThemeAnimationType"],"mappings":";AAEO,IAAK,kBAAA,qBAAAA,mBAAAA,KAAL;AACL,EAAAA,oBAAA,QAAA,CAAA,GAAS,QAAA;AACT,EAAAA,oBAAA,aAAA,CAAA,GAAc,aAAA;AACd,EAAAA,oBAAA,OAAA,CAAA,GAAQ,OAAA;AAHE,EAAA,OAAAA,mBAAAA;AAAA,CAAA,EAAA,kBAAA,IAAA,EAAA;;;ACAZ,IAAM,SAAA,GAAY,OAAO,MAAA,KAAW,WAAA;AAE7B,IAAM,mBAAmB,MAAY;AAC1C,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,MAAM,OAAA,GAAU,2BAAA;AAChB,IAAA,IAAI,CAAC,QAAA,CAAS,cAAA,CAAe,OAAO,CAAA,EAAG;AACrC,MAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,aAAA,CAAc,OAAO,CAAA;AAC5C,MAAA,KAAA,CAAM,EAAA,GAAK,OAAA;AACX,MAAA,MAAM,gBAAA,GACJ,MAAA,CAAO,UAAA,IAAc,GAAA,IAAQ,OAAO,WAAA,IAAe,GAAA;AAErD,MAAA,KAAA,CAAM,WAAA,GAAc;AAAA;AAAA;AAAA;AAAA;AAAA,UAAA,EAKd,gBAAA,GAAmB,8BAA8B,EAAE;AAAA;AAAA;AAAA,QAAA,EAIrD,gBAAA,GACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAAA,CAAA,GAUA,EACN;AAAA,MAAA,CAAA;AAEF,MAAA,QAAA,CAAS,IAAA,CAAK,YAAY,KAAK,CAAA;AAAA,IACjC;AAAA,EACF;AACF;AAYO,IAAM,iBAAiB,MAAwB;AACpD,EAAA,IAAI,CAAC,WAAW,OAAO,OAAA;AACvB,EAAA,OAAO,MAAA,CAAO,UAAA,CAAW,8BAA8B,CAAA,CAAE,UACrD,MAAA,GACA,OAAA;AACN;AAEO,IAAM,YAAA,GAAe,CAAC,KAAA,KAAoC;AAC/D,EAAA,IAAI,UAAU,QAAA,EAAU;AACtB,IAAA,OAAO,cAAA,EAAe;AAAA,EACxB;AACA,EAAA,OAAO,KAAA,KAAU,SAAS,MAAA,GAAS,OAAA;AACrC;AAEO,IAAM,qBAAA,GAAwB,CACnC,KAAA,KACgC;AAChC,EAAA,IAAI,UAAU,QAAA,EAAU;AACtB,IAAA,OAAO,QAAA;AAAA,EACT;AACA,EAAA,OAAO,KAAA,KAAU,SAAS,MAAA,GAAS,OAAA;AACrC;AAEO,IAAM,0BAA0B,MAAe;AACpD,EAAA,OAAO,aAAa,qBAAA,IAAyB,QAAA;AAC/C;AAEO,IAAM,uBAAuB,MAAe;AACjD,EAAA,OACE,SAAA,IAAa,MAAA,CAAO,UAAA,CAAW,kCAAkC,CAAA,CAAE,OAAA;AAEvE","file":"index.js","sourcesContent":["import { RefObject } from 'react'\n\nexport enum ThemeAnimationType {\n  CIRCLE = 'circle',\n  BLUR_CIRCLE = 'blur-circle',\n  SLIDE = 'slide',\n}\n\nexport type SlideDirection =\n  | 'left'\n  | 'right'\n  | 'top'\n  | 'bottom'\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-right'\n\nexport type Theme = 'light' | 'dark' | 'system'\nexport type ColorTheme = string\nexport type SystemThemeMode = 'css' | 'js'\n\nexport interface UseThemeAnimationProps {\n  duration?: number\n  easing?: string\n  animationType?: ThemeAnimationType\n  blurAmount?: number\n  styleId?: string\n\n  themes?: Theme[]\n  colorThemes?: ColorTheme[]\n  defaultTheme?: Theme\n  defaultColorTheme?: ColorTheme\n\n  globalClassName?: string\n  colorThemePrefix?: string\n  attribute?: 'class' | 'data-theme'\n  value?: Record<string, string>\n  enableColorScheme?: boolean\n\n  storageKey?: string\n  colorStorageKey?: string\n\n  theme?: Theme\n  colorTheme?: ColorTheme\n\n  onThemeChange?: (theme: Theme) => void\n  onColorThemeChange?: (colorTheme: ColorTheme) => void\n\n  initialTheme?: Theme\n  initialColorTheme?: ColorTheme\n  systemThemeMode?: SystemThemeMode\n\n  // Slide animation options (only valid when animationType is SLIDE)\n  slideDirection?: SlideDirection\n  slideFromX?: number // custom from translate X (%)\n  slideFromY?: number // custom from translate Y (%)\n  slideToX?: number // custom to translate X (%)\n  slideToY?: number // custom to translate Y (%)\n}\n\nexport interface UseThemeAnimationReturn {\n  ref: RefObject<HTMLButtonElement | null>\n\n  theme: Theme\n  colorTheme: ColorTheme\n  resolvedTheme: 'light' | 'dark'\n  systemTheme: 'light' | 'dark'\n\n  setTheme: (theme: Theme) => void\n  setColorTheme: (colorTheme: ColorTheme) => void\n\n  switchTheme: (theme: Theme, animationOff?: boolean) => Promise<void>\n  switchColorTheme: (colorTheme: string) => void\n\n  toggleTheme: (animationOff?: boolean) => Promise<void>\n  toggleLightTheme: (animationOff?: boolean) => Promise<void>\n  toggleDarkTheme: (animationOff?: boolean) => Promise<void>\n  toggleColorTheme: () => void\n\n  createColorThemeToggle: (targetColorTheme: string) => () => void\n  isColorThemeActive: (targetColorTheme: string) => boolean\n}\n\nexport interface ThemeSwitcherProps {\n  themes?: Theme[]\n  currentTheme?: Theme\n  onThemeChange?: (theme: Theme) => void\n\n  animationType?: ThemeAnimationType\n  duration?: number\n\n  className?: string\n  size?: 'sm' | 'md' | 'lg'\n  variant?: 'default' | 'outline' | 'ghost'\n\n  icons?: {\n    light?: React.ReactNode\n    dark?: React.ReactNode\n    system?: React.ReactNode\n  }\n}\n\nexport interface ThemeSelectorProps {\n  themes?: Theme[]\n  colorThemes?: ColorTheme[]\n  currentTheme?: Theme\n  currentColorTheme?: ColorTheme\n\n  onThemeChange?: (theme: Theme) => void\n  onColorThemeChange?: (colorTheme: ColorTheme) => void\n\n  animationType?: ThemeAnimationType\n  duration?: number\n\n  className?: string\n  placeholder?: string\n\n  themeLabel?: string\n  colorThemeLabel?: string\n}\n","import { ThemeAnimationType } from '../types'\n\nconst isBrowser = typeof window !== 'undefined'\n\nexport const injectBaseStyles = (): void => {\n  if (isBrowser) {\n    const styleId = 'spaceman-theme-base-style'\n    if (!document.getElementById(styleId)) {\n      const style = document.createElement('style')\n      style.id = styleId\n      const isHighResolution =\n        window.innerWidth >= 3000 || window.innerHeight >= 2000\n\n      style.textContent = `\n        ::view-transition-old(root),\n        ::view-transition-new(root) {\n          animation: none;\n          mix-blend-mode: normal;\n          ${isHighResolution ? 'transform: translateZ(0);' : ''}\n        }\n        \n        ${\n          isHighResolution\n            ? `\n        ::view-transition-group(root),\n        ::view-transition-image-pair(root),\n        ::view-transition-old(root),\n        ::view-transition-new(root) {\n          backface-visibility: hidden;\n          perspective: 1000px;\n          transform: translate3d(0, 0, 0);\n        }\n        `\n            : ''\n        }\n      `\n      document.head.appendChild(style)\n    }\n  }\n}\n\nexport const createBlurCircleMask = (blur: number): string => {\n  const isHighResolution =\n    isBrowser && (window.innerWidth >= 3000 || window.innerHeight >= 2000)\n\n  const blurFilter = `<filter id=\"blur\"><feGaussianBlur stdDeviation=\"${blur}\" /></filter>`\n  const circleRadius = isHighResolution ? 20 : 25\n\n  return `url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-50 -50 100 100\"><defs>${blurFilter}</defs><circle cx=\"0\" cy=\"0\" r=\"${circleRadius}\" fill=\"white\" filter=\"url(%23blur)\"/></svg>')`\n}\n\nexport const getSystemTheme = (): 'light' | 'dark' => {\n  if (!isBrowser) return 'light'\n  return window.matchMedia('(prefers-color-scheme: dark)').matches\n    ? 'dark'\n    : 'light'\n}\n\nexport const resolveTheme = (theme: string): 'light' | 'dark' => {\n  if (theme === 'system') {\n    return getSystemTheme()\n  }\n  return theme === 'dark' ? 'dark' : 'light'\n}\n\nexport const resolveThemeForServer = (\n  theme: string\n): 'light' | 'dark' | 'system' => {\n  if (theme === 'system') {\n    return 'system'\n  }\n  return theme === 'dark' ? 'dark' : 'light'\n}\n\nexport const supportsViewTransitions = (): boolean => {\n  return isBrowser && 'startViewTransition' in document\n}\n\nexport const prefersReducedMotion = (): boolean => {\n  return (\n    isBrowser && window.matchMedia('(prefers-reduced-motion: reduce)').matches\n  )\n}\n\nexport interface AnimationConfig {\n  a?: number\n  b?: number\n  x: number\n  y: number\n  duration: number\n  easing: string\n  animationType: ThemeAnimationType\n  blurAmount: number\n  styleId: string\n}\n\nexport const createCircleAnimation = (config: AnimationConfig): void => {\n  const { x, y, duration, easing } = config\n\n  // Calculate the distance to each corner of the viewport\n  const topLeft = Math.hypot(x, y)\n  const topRight = Math.hypot(window.innerWidth - x, y)\n  const bottomLeft = Math.hypot(x, window.innerHeight - y)\n  const bottomRight = Math.hypot(window.innerWidth - x, window.innerHeight - y)\n\n  // Find the maximum distance to ensure animation covers the entire viewport\n  const maxRadius = Math.max(topLeft, topRight, bottomLeft, bottomRight)\n\n  document.documentElement.animate(\n    {\n      clipPath: [\n        `circle(0px at ${x}px ${y}px)`,\n        `circle(${maxRadius}px at ${x}px ${y}px)`,\n      ],\n    },\n    {\n      duration,\n      easing,\n      pseudoElement: '::view-transition-new(root)',\n    }\n  )\n}\n\nexport const createSlideAnimation = (config: AnimationConfig): void => {\n  const { a = -100, b = 0, x = 0, y = 0, duration, styleId } = config\n\n  const styleElement = document.createElement('style')\n  styleElement.id = styleId\n\n  styleElement.textContent = `\n    ::view-transition-old(root) {\n      animation-delay: ${duration}ms;\n    }\n    \n    ::view-transition-new(root) {\n      animation: move-in ${duration}ms;\n      animation-timing-function: cubic-bezier(0.66, 0, 0.34, 1);\n    }\n    \n    @keyframes move-in {\n      from {\n        translate: ${a}% ${b}%;\n      }\n      to {\n        translate: ${x}% ${y}%;\n      }\n    }\n  `\n\n  document.head.appendChild(styleElement)\n\n  // Clean up after animation\n  setTimeout(() => {\n    const styleElement = document.getElementById(styleId)\n    if (styleElement) {\n      styleElement.remove()\n    }\n  }, duration)\n}\n\nexport const createBlurCircleAnimation = (config: AnimationConfig): void => {\n  const { x, y, duration, easing, blurAmount, styleId } = config\n\n  const existingStyle = document.getElementById(styleId)\n  if (existingStyle) {\n    existingStyle.remove()\n  }\n\n  const viewportSize = Math.max(window.innerWidth, window.innerHeight) + 200\n  const isHighResolution =\n    window.innerWidth >= 3000 || window.innerHeight >= 2000\n  const scaleFactor = isHighResolution ? 2.5 : 4\n  const optimalMaskSize = isHighResolution\n    ? Math.min(viewportSize * scaleFactor, 5000)\n    : viewportSize * scaleFactor\n\n  const topLeft = Math.hypot(x, y)\n  const topRight = Math.hypot(window.innerWidth - x, y)\n  const bottomLeft = Math.hypot(x, window.innerHeight - y)\n  const bottomRight = Math.hypot(window.innerWidth - x, window.innerHeight - y)\n  const maxRadius = Math.max(topLeft, topRight, bottomLeft, bottomRight)\n\n  const styleElement = document.createElement('style')\n  styleElement.id = styleId\n\n  const blurFactor = isHighResolution ? 1.5 : 1.2\n  const finalMaskSize = Math.max(optimalMaskSize, maxRadius * 2.5)\n\n  styleElement.textContent = `\n    ::view-transition-group(root) {\n      animation-duration: ${duration}ms;\n      animation-timing-function: ${\n        isHighResolution\n          ? 'cubic-bezier(0.2, 0, 0.2, 1)'\n          : 'linear(' +\n            '0 0%, 0.2342 12.49%, 0.4374 24.99%,' +\n            '0.6093 37.49%, 0.6835 43.74%,' +\n            '0.7499 49.99%, 0.8086 56.25%,' +\n            '0.8593 62.5%, 0.9023 68.75%, 0.9375 75%,' +\n            '0.9648 81.25%, 0.9844 87.5%,' +\n            '0.9961 93.75%, 1 100%' +\n            ')'\n      };\n      will-change: transform;\n    }\n    \n    ::view-transition-new(root) {\n      mask: ${createBlurCircleMask(blurAmount * blurFactor)} 0 0 / 100% 100% no-repeat;\n      mask-position: ${x}px ${y}px;\n      animation: spaceman-mask-scale ${duration}ms ${easing};\n      transform-origin: ${x}px ${y}px;\n      will-change: mask-size, mask-position;\n    }\n    \n    ::view-transition-old(root),\n    .dark::view-transition-old(root) {\n      animation: spaceman-mask-scale ${duration}ms ${easing};\n      transform-origin: ${x}px ${y}px;\n      z-index: -1;\n      will-change: mask-size, mask-position;\n    }\n    \n    @keyframes spaceman-mask-scale {\n      0% {\n        mask-size: 0px;\n        mask-position: ${x}px ${y}px;\n      }\n      100% {\n        mask-size: ${finalMaskSize}px;\n        mask-position: ${x - finalMaskSize / 2}px ${y - finalMaskSize / 2}px;\n      }\n    }\n  `\n\n  document.head.appendChild(styleElement)\n\n  setTimeout(() => {\n    const styleElement = document.getElementById(styleId)\n    if (styleElement) {\n      styleElement.remove()\n    }\n  }, duration)\n}\n"]}