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

package/README.md

@@ -2,6 +2,13 @@
 
 React theme switching with smooth view transition animations, multi-theme support, and synchronized state management.
 
+## Module support
+
+This package ships ESM only. Use `import` or dynamic `import()` instead of
+`require()`. TypeScript declarations are included. The package does not ship
+source maps. Both built-in controls and their required dependencies remain
+available through the existing exports.
+
 ## Spaceman React Theme Animation v2 release
 
 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.
@@ -12,7 +19,17 @@ Highlights in this release:
 - 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
+- build and packaging updates for ESM and declaration output
+
+## Required dependencies
+
+Radix Select, Motion, React, and React DOM remain required peer dependencies. `clsx` remains a direct dependency. Keep compatible peers installed even when the application uses only hooks. The controls remain included in this package.
+
+The planned v3 release requires React and React DOM 18 or newer, Motion 12 or newer, and Radix Select 2 or newer. React 17 is no longer supported. Extracted-package checks cover React 18.0, Motion 12.0, and Radix 2.0 together, plus the current development versions. See the [readiness audit](https://github.com/tonyedgal/spaceman-react-theme-animation/blob/main/docs/release-readiness.md) for release evidence.
+
+Storage is optional persistence. Blocked reads use the configured defaults. Failed writes still update the theme for the current page. Saved preferences become visible after hydration, so the first client render matches the server HTML.
+
+`ThemeSelector` applies `className`, `placeholder`, and `colorThemeLabel`. The label is linked to the dropdown trigger. Its `onColorThemeChange` callback also runs inside a provider. `themeLabel` is deprecated because this control selects palettes; use `ThemeSwitcher` for light, dark, and system modes.
 
 ## Installation
 
@@ -43,7 +60,7 @@ import {
 } from '@space-man/react-theme-animation'
 ```
 
-Compatibility subpath exports still exist for migration safety, but the package root is the documented public API.
+The root is the documented client API. Existing subpath exports remain. Use `/tanstack` for server cookie helpers and `/core` for server utilities. The root entry also imports the React controls and Motion; it is not a server-only entry.
 
 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
@@ -83,7 +100,7 @@ import {
 
 function App() {
   return (
-    <SpacemanThemeProvider defaultTheme="system" defaultColorTheme="default">
+    <SpacemanThemeProvider defaultTheme='system' defaultColorTheme='default'>
       <YourApp />
     </SpacemanThemeProvider>
   )
@@ -112,24 +129,24 @@ Repository documentation, framework guides, migration notes, and examples are li
 
 All providers expose the same core hook interface:
 
-| Property               | Type                                                    | Description                        |
-| ---------------------- | ------------------------------------------------------- | ---------------------------------- |
-| theme                  | Theme                                                   | Current theme                      |
-| colorTheme             | ColorTheme                                              | Current color theme                |
-| resolvedTheme          | 'light' \| 'dark'                                       | Resolved theme (system → actual)   |
-| systemTheme            | 'light' \| 'dark'                                       | OS theme preference                |
-| ref                    | RefObject<HTMLElement>                                  | Ref for animation origin           |
-| setTheme               | (theme: Theme) => void                                  | Set theme instantly                |
-| setColorTheme          | (colorTheme: ColorTheme) => void                        | Set color theme                    |
-| switchTheme            | (theme: Theme, animationOff?: boolean) => Promise<void> | Switch with animation              |
-| switchColorTheme       | (colorTheme: string) => void                            | Switch color theme with animation  |
-| toggleTheme            | (animationOff?: boolean) => Promise<void>               | Toggle light/dark                  |
-| toggleLightTheme       | (animationOff?: boolean) => Promise<void>               | Toggle to light                    |
-| toggleDarkTheme        | (animationOff?: boolean) => Promise<void>               | Toggle to dark                     |
-| toggleColorTheme       | () => void                                              | Toggle between color themes        |
-| createColorThemeToggle | (colorTheme: string) => () => void                      | Create color theme toggle          |
-| isColorThemeActive     | (colorTheme: string) => boolean                         | Check if color theme active        |
-| switchThemeFromElement | (theme: Theme, element: HTMLElement) => Promise<void>   | Switch with animation from element |
+| Property               | Type                                                                  | Description                        |
+| ---------------------- | --------------------------------------------------------------------- | ---------------------------------- |
+| theme                  | Theme                                                                 | Current theme                      |
+| colorTheme             | ColorTheme                                                            | Current color theme                |
+| resolvedTheme          | 'light' \| 'dark'                                                     | Resolved theme (system → actual)   |
+| systemTheme            | 'light' \| 'dark'                                                     | OS theme preference                |
+| ref                    | RefObject<HTMLButtonElement \| null>                                  | Ref for animation origin           |
+| setTheme               | (theme: Theme) => void                                                | Set theme instantly                |
+| setColorTheme          | (colorTheme: ColorTheme) => void                                      | Set color theme                    |
+| switchTheme            | (theme: Theme, options?: ThemeTransitionInput) => Promise<void>       | Switch with animation              |
+| switchColorTheme       | (colorTheme: string, options?: ThemeTransitionInput) => Promise<void> | Switch color theme with animation  |
+| toggleTheme            | (options?: ThemeTransitionInput) => Promise<void>                     | Toggle light/dark                  |
+| toggleLightTheme       | (options?: ThemeTransitionInput) => Promise<void>                     | Toggle to light                    |
+| toggleDarkTheme        | (options?: ThemeTransitionInput) => Promise<void>                     | Toggle to dark                     |
+| toggleColorTheme       | ColorThemeToggle                                                      | Toggle between color themes        |
+| createColorThemeToggle | (colorTheme: string) => ColorThemeToggle                              | Create color theme toggle          |
+| isColorThemeActive     | (colorTheme: string) => boolean                                       | Check if color theme active        |
+| switchThemeFromElement | (theme: Theme, element: HTMLButtonElement) => Promise<void>           | Switch with animation from element |
 
 ### Root Exports
 
@@ -146,3 +163,7 @@ See the repository docs hub for provider-specific setup guides and examples.
 ## License
 
 MIT
+
+## Additional transition effects
+
+See [Theme transitions](https://github.com/tonyedgal/spaceman-react-theme-animation/blob/main/packages/react-theme-animation/docs/theme-transitions.md) for animated palettes, explicit origins, directional polygon wipes, triangles, and stationary SVG logos with destination assets and automatic sizing.

package/dist/animations-CaaRrn3-.d.ts

@@ -0,0 +1,208 @@
+import { RefObject } from 'react';
+
+declare enum ThemeAnimationType {
+    CIRCLE = "circle",
+    BLUR_CIRCLE = "blur-circle",
+    SLIDE = "slide",
+    CLIP_PATH = "clip-path",
+    POLYGON_GRADIENT = "polygon-gradient",
+    TRIANGLE = "triangle",
+    SVG_LOGO = "svg-logo"
+}
+type SlideDirection = 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/** Clockwise from the top-left corner. */
+declare const TRANSITION_DIRECTIONS: readonly ["top-left", "top", "top-right", "right", "bottom-right", "bottom", "bottom-left", "left"];
+type TransitionDirection = (typeof TRANSITION_DIRECTIONS)[number];
+type AnimationPosition = TransitionDirection | 'center' | 'trigger';
+interface ThemeAnimationSettings {
+    /** Starting edge/corner for polygon wipes. Defaults to top-left. */
+    readonly clipPathDirection?: TransitionDirection;
+    /** Fixed circle/triangle origin; SVG_LOGO always uses the viewport center. */
+    readonly animationPosition?: AnimationPosition;
+    /** Stationary logo width in CSS pixels or auto; default is 96 when both are omitted. */
+    readonly logoWidth?: number | 'auto';
+    /** Logo height in CSS pixels or auto; omitted dimensions preserve the SVG aspect ratio. */
+    readonly logoHeight?: number | 'auto';
+    /** Gradient wipe feather in CSS pixels; defaults to 80. */
+    readonly gradientWidth?: number;
+}
+/** Choose one shared asset, or both destination-specific assets. */
+type ThemeLogoOptions = {
+    readonly logo?: string;
+    readonly logoLight?: never;
+    readonly logoDark?: never;
+} | {
+    readonly logo?: never;
+    readonly logoLight: string;
+    readonly logoDark: string;
+};
+type ThemeAnimationOptions = ThemeAnimationSettings & ThemeLogoOptions;
+interface AnimationConfig extends ThemeAnimationSettings {
+    /** Asset already selected for the destination theme before capture. */
+    readonly logo?: string;
+    readonly a?: number;
+    readonly b?: number;
+    readonly x: number;
+    readonly y: number;
+    readonly duration: number;
+    readonly easing: string;
+    readonly animationType: ThemeAnimationType;
+    readonly blurAmount: number;
+    readonly styleId: string;
+}
+type Theme = 'light' | 'dark' | 'system';
+type ColorTheme = string;
+type SystemThemeMode = 'css' | 'js';
+type UseThemeAnimationProps = ThemeAnimationOptions & {
+    readonly duration?: number;
+    readonly easing?: string;
+    readonly animationType?: ThemeAnimationType;
+    readonly blurAmount?: number;
+    readonly styleId?: string;
+    readonly themes?: readonly Theme[];
+    readonly colorThemes?: readonly ColorTheme[];
+    readonly defaultTheme?: Theme;
+    readonly defaultColorTheme?: ColorTheme;
+    readonly globalClassName?: string;
+    readonly colorThemePrefix?: string;
+    readonly attribute?: 'class' | 'data-theme';
+    readonly value?: Record<string, string>;
+    readonly enableColorScheme?: boolean;
+    readonly storageKey?: string;
+    readonly colorStorageKey?: string;
+    readonly theme?: Theme;
+    readonly colorTheme?: ColorTheme;
+    readonly onThemeChange?: (theme: Theme) => void;
+    readonly onColorThemeChange?: (colorTheme: ColorTheme) => void;
+    readonly initialTheme?: Theme;
+    readonly initialColorTheme?: ColorTheme;
+    readonly systemThemeMode?: SystemThemeMode;
+    readonly slideDirection?: SlideDirection;
+    readonly slideFromX?: number;
+    readonly slideFromY?: number;
+    readonly slideToX?: number;
+    readonly slideToY?: number;
+};
+/** Per-call animation controls shared by all providers. */
+interface ThemeTransitionOptions {
+    /** Skip the view transition (also automatically skipped for reduced motion). */
+    readonly animationOff?: boolean;
+    /** Trigger element; its viewport rectangle is read synchronously. */
+    readonly element?: Element | null;
+    /** Viewport-relative CSS pixels. Never multiply these coordinates by DPR. */
+    readonly origin?: {
+        readonly x: number;
+        readonly y: number;
+    };
+}
+/** Boolean arguments remain supported for backward compatibility. */
+type ThemeTransitionInput = boolean | ThemeTransitionOptions;
+type ColorThemeToggle = (options?: ThemeTransitionInput | Pick<React.MouseEvent<HTMLElement>, 'currentTarget' | 'detail'>) => Promise<void>;
+interface UseThemeAnimationReturn {
+    readonly ref: RefObject<HTMLButtonElement | null>;
+    readonly theme: Theme;
+    readonly colorTheme: ColorTheme;
+    readonly resolvedTheme: 'light' | 'dark';
+    readonly systemTheme: 'light' | 'dark';
+    readonly setTheme: (theme: Theme) => void;
+    readonly setColorTheme: (colorTheme: ColorTheme) => void;
+    readonly switchTheme: (theme: Theme, options?: ThemeTransitionInput) => Promise<void>;
+    readonly switchColorTheme: (colorTheme: string, options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleLightTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleDarkTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleColorTheme: ColorThemeToggle;
+    readonly createColorThemeToggle: (targetColorTheme: string) => ColorThemeToggle;
+    readonly isColorThemeActive: (targetColorTheme: string) => boolean;
+}
+type ThemeSwitcherProps = ThemeAnimationOptions & {
+    readonly themes?: readonly Theme[];
+    readonly currentTheme?: Theme;
+    readonly onThemeChange?: (theme: Theme) => void;
+    readonly animationType?: ThemeAnimationType;
+    readonly duration?: number;
+    readonly className?: string;
+    readonly size?: 'sm' | 'md' | 'lg';
+    readonly variant?: 'default' | 'outline' | 'ghost';
+    readonly icons?: {
+        readonly light?: React.ReactNode;
+        readonly dark?: React.ReactNode;
+        readonly system?: React.ReactNode;
+    };
+};
+type ThemeSelectorProps = ThemeAnimationOptions & {
+    readonly themes?: readonly Theme[];
+    readonly colorThemes?: readonly ColorTheme[];
+    readonly currentTheme?: Theme;
+    readonly currentColorTheme?: ColorTheme;
+    readonly onThemeChange?: (theme: Theme) => void;
+    readonly onColorThemeChange?: (colorTheme: ColorTheme) => void;
+    readonly animationType?: ThemeAnimationType;
+    readonly duration?: number;
+    readonly className?: string;
+    readonly placeholder?: string;
+    /** @deprecated This selector changes palettes only. Use ThemeSwitcher for mode controls. */
+    readonly themeLabel?: string;
+    readonly colorThemeLabel?: string;
+};
+
+/** Injects styles scoped to transitions owned by this library. */
+declare const injectBaseStyles: () => void;
+/**
+ * Gets the system theme preference
+ * @returns 'light' or 'dark' based on system preference
+ */
+declare const getSystemTheme: () => "light" | "dark";
+/**
+ * Resolves a theme value to its actual light/dark value
+ * @param theme - Theme to resolve ('light', 'dark', or 'system')
+ * @returns Resolved theme ('light' or 'dark')
+ */
+declare const resolveTheme: (theme: string) => "light" | "dark";
+/**
+ * Resolves a stored theme to the server-side class to apply on <html>.
+ * CSS mode uses the 'system' class so media queries can respond before hydration.
+ */
+declare const resolveThemeForServer: (theme: string) => "light" | "dark" | "system";
+/**
+ * Checks if the browser supports View Transitions API
+ * @returns true if view transitions are supported
+ */
+declare const supportsViewTransitions: () => boolean;
+/**
+ * Checks if user prefers reduced motion
+ * @returns true if user prefers reduced motion
+ */
+declare const prefersReducedMotion: () => boolean;
+/**
+ * Converts a slide direction to from coordinates
+ * @param direction - Slide direction
+ * @returns Object with a (x) and b (y) coordinates
+ */
+interface SlideCoordinates {
+    readonly a: number;
+    readonly b: number;
+}
+declare const getSlideFromCoords: (direction: SlideDirection) => SlideCoordinates;
+/** Viewport CSS coordinates for fixed origins; button origins stay in the hook. */
+declare const getAnimationPosition: (position: Exclude<AnimationPosition, "trigger">) => NonNullable<ThemeTransitionOptions["origin"]>;
+/** A half-plane wipe, including diagonals, with compatible four-point polygons. */
+declare const createClipPathAnimation: (config: AnimationConfig) => Animation;
+/** Feathered polygon/edge mask, without Gaussian filtering or scaling content. */
+declare const createPolygonGradientAnimation: (config: AnimationConfig) => Animation;
+/** Upright triangle; its final incircle contains all four snapshot corners. */
+declare const createTriangleAnimation: (config: AnimationConfig) => Animation;
+/** The fixed logo has its own snapshot; only the page reveal grows beneath it. */
+declare const createSvgLogoAnimation: (config: AnimationConfig) => Animation;
+/** Native circular clip; browser compositor support varies by engine. */
+declare const createCircleAnimation: (config: AnimationConfig) => Animation;
+/** Predetermined translation uses WAAPI rather than a timer-owned stylesheet. */
+declare const createSlideAnimation: (config: AnimationConfig) => Animation;
+/**
+ * A bounded radial gradient feathers only the reveal edge. Unlike the old SVG
+ * Gaussian mask, it needs no huge filtered surface or animation on the old view.
+ * Mask animation can still paint; this is not a compositor-only guarantee.
+ */
+declare const createBlurCircleAnimation: (config: AnimationConfig) => Animation;
+
+export { type AnimationPosition as A, getAnimationPosition as B, type ColorTheme as C, getSlideFromCoords as D, type SlideDirection as S, TRANSITION_DIRECTIONS as T, type UseThemeAnimationProps as U, type ColorThemeToggle as a, type SystemThemeMode as b, type Theme as c, type ThemeAnimationOptions as d, ThemeAnimationType as e, type ThemeLogoOptions as f, type ThemeSelectorProps as g, type ThemeSwitcherProps as h, type ThemeTransitionInput as i, type ThemeTransitionOptions as j, type TransitionDirection as k, type UseThemeAnimationReturn as l, getSystemTheme as m, injectBaseStyles as n, resolveThemeForServer as o, prefersReducedMotion as p, type AnimationConfig as q, resolveTheme as r, supportsViewTransitions as s, createBlurCircleAnimation as t, createCircleAnimation as u, createClipPathAnimation as v, createPolygonGradientAnimation as w, createSlideAnimation as x, createSvgLogoAnimation as y, createTriangleAnimation as z };

package/dist/chunk-FNL7ZHF4.js

@@ -0,0 +1,44 @@
+import {a as a$1,b as b$1,e}from'./chunk-X6UEG7WG.js';import {a,b,c,d}from'./chunk-QYUMCBTQ.js';import {a as a$2,b as b$2,c as c$1,g,h}from'./chunk-I3T2QXRT.js';import*as Je from'react';import Je__default,{createContext,useSyncExternalStore,useEffect,useState,useRef,useCallback,useMemo,useContext,useId}from'react';import {flushSync}from'react-dom';import {jsxs,jsx}from'react/jsx-runtime';import {clsx}from'clsx';import {motion}from'motion/react';import*as ie from'@radix-ui/react-select';function Zt(){return ()=>{}}function jt(){return  true}function eo(){return  false}function q(){return useSyncExternalStore(Zt,jt,eo)}function De(e){try{return "window"in globalThis?window.localStorage.getItem(e):null}catch{return null}}function re(e,o){try{"window"in globalThis&&window.localStorage.setItem(e,o);}catch{return}}function he(e){return e===void 0||e===true||e===false?e:"currentTarget"in e?{element:e.currentTarget,animationOff:e.detail===0}:e}var ne="window"in globalThis,ro=["light","dark","system"],no=["default"],O=(e$1={})=>{let{duration:o=400,easing:r="cubic-bezier(0.32, 0.72, 0, 1)",animationType:n="circle",blurAmount:i=2,styleId:l="spaceman-theme-style",clipPathDirection:T="top-left",animationPosition:a,logo:s,logoLight:m,logoDark:h$1,logoWidth:f,logoHeight:P,gradientWidth:A,themes:p=ro,colorThemes:g$1=no,defaultTheme:J="system",defaultColorTheme:x="default",globalClassName:D="dark",colorThemePrefix:E="theme-",attribute:V="class",value:H,enableColorScheme:c=true,storageKey:y="theme",colorStorageKey:v="color-theme",theme:k,colorTheme:b,onThemeChange:u,onColorThemeChange:R,initialTheme:N,initialColorTheme:$,systemThemeMode:X="js",slideDirection:U="left",slideFromX:C,slideFromY:L,slideToX:z=0,slideToY:d=0}=e$1;a$1({logo:s,logoLight:m,logoDark:h$1});let I=o;useEffect(()=>{if(n==="svg-logo")for(let t of [s,m,h$1])t!==void 0&&t!==""&&b$1(t);},[n,s,m,h$1]);let ae=q();useEffect(()=>{a$2();},[]);let[Kt,Ut]=useState(()=>{if(N!==void 0)return N;if(!ne)return J;let t=De(y);return t!==null&&(t==="light"||t==="dark"||t==="system")&&p.includes(t)?t:J}),[Gt,Yt]=useState(()=>{if($!==void 0)return $;if(!ne)return x;let t=De(v);return t!==null&&t!==""&&g$1.includes(t)?t:x}),_=k??(ae?Kt:N??J),F=b??(ae?Gt:$??x),[,qt]=useState(()=>b$2()),Oe=ae?b$2():"light",j=_==="system"?Oe:c$1(_);useEffect(()=>{if(!ne)return;let t=window.matchMedia("(prefers-color-scheme: dark)"),S=()=>{qt(b$2());};return t.addEventListener("change",S),()=>{t.removeEventListener("change",S);}},[]),useEffect(()=>{if(!ne||!ae)return;let t=document.documentElement,S=H?.light,W=H?.dark??D,Q=H?.system??"system";V==="data-theme"?X==="css"&&_==="system"?t.setAttribute("data-theme",Q):t.setAttribute("data-theme",j==="dark"?W:S??"light"):(S!==void 0&&S!==""&&t.classList.remove(S),t.classList.remove(W,Q,"auto"),X==="css"&&_==="system"?t.classList.add(Q):j==="dark"?t.classList.add(W):S!==void 0&&S!==""?t.classList.add(S):t.classList.remove(W)),c?t.style.colorScheme=X==="css"&&_==="system"?"":j:t.style.removeProperty("color-scheme"),g$1.forEach(te=>{t.classList.remove(`${E}${te}`);}),t.classList.add(`${E}${F}`);},[j,_,F,D,E,g$1,V,H,c,ae,X]);let Be=useRef(null),G=useRef(_),le=useRef(F),Te=useRef(0);useEffect(()=>{Te.current===0&&(G.current=_,le.current=F);},[_,F]);let ue=useCallback(t=>{ne&&re(y,t),k===void 0&&Ut(t),u&&u(t);},[u,k,y]),pe=useCallback(t=>{ne&&re(v,t),b===void 0&&Yt(t),R&&R(t);},[R,b,v]),qe=useCallback(t=>{G.current=t,ue(t);},[ue]),Qe=useCallback(t=>{le.current=t,pe(t);},[pe]),ge=useCallback(async(t,S=false)=>{let W=S===true||S===false?{animationOff:S}:S,Q=null;if(W.animationOff!==true&&I>0)if(n==="slide")Q={...C!==void 0&&L!==void 0?{a:C,b:L}:g(U),x:z,y:d,duration:I,easing:r,animationType:n,blurAmount:i,styleId:l};else {let te=W.element??Be.current,se=W.origin?null:te?.getBoundingClientRect(),ye=(n==="svg-logo"?h("center"):null)??W.origin??(a&&a!=="trigger"?h(a):null)??(se?{x:se.left+se.width/2,y:se.top+se.height/2}:n==="circle"||n==="blur-circle"?null:h("center"));ye&&Number.isFinite(ye.x)&&Number.isFinite(ye.y)&&(Q={...ye,duration:I,easing:r,animationType:n,blurAmount:i,styleId:l,clipPathDirection:T,animationPosition:a,logo:m!==void 0?c$1(G.current)==="light"?m:h$1:s,logoWidth:f,logoHeight:P,gradientWidth:A});}Te.current++;try{await e(()=>{flushSync(t);},Q),Te.current--;}catch(te){throw Te.current--,te}},[I,r,n,i,l,U,C,L,z,d,T,a,s,m,h$1,f,P,A]),Y=useCallback(async(t,S)=>{t!==G.current&&(G.current=t,await ge(()=>{ue(t);},S));},[ge,ue]),ee=useCallback(async(t,S)=>{if(!g$1.includes(t)){console.warn(`Color theme "${t}" not found in available themes`);return}t!==le.current&&(le.current=t,await ge(()=>{pe(t);},S));},[g$1,ge,pe]),Ze=useCallback(async t=>{await Y(c$1(G.current)==="dark"?"light":"dark",t);},[Y]),je=useCallback(async t=>{c$1(G.current)!=="light"&&await Y("light",t);},[Y]),et=useCallback(async t=>{c$1(G.current)!=="dark"&&await Y("dark",t);},[Y]),tt=useCallback(async t=>{if(g$1.length===0)return;let S=g$1.indexOf(le.current);await ee(g$1[(S+1)%g$1.length],he(t));},[g$1,ee]),ot=useCallback(t=>async S=>ee(t,he(S)),[ee]),rt=useCallback(t=>F===t,[F]);return useMemo(()=>({ref:Be,theme:_,colorTheme:F,resolvedTheme:j,systemTheme:Oe,setTheme:qe,setColorTheme:Qe,switchTheme:Y,switchColorTheme:ee,toggleTheme:Ze,toggleLightTheme:je,toggleDarkTheme:et,toggleColorTheme:tt,createColorThemeToggle:ot,isColorThemeActive:rt}),[Be,_,F,j,Oe,qe,Qe,Y,ee,Ze,je,et,tt,ot,rt])};var K=createContext(null),ke=()=>useContext(K);function st(){return jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("rect",{width:"20",height:"14",x:"2",y:"3",rx:"2"}),jsx("line",{x1:"8",x2:"16",y1:"21",y2:"21"}),jsx("line",{x1:"12",x2:"12",y1:"17",y2:"21"})]})}function ct(){return jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"})})}function Tt(){return jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("circle",{cx:"12",cy:"12",r:"5"}),jsx("path",{d:"M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"})]})}var Re=["light","dark","system"],ut=[{icon:Je__default.createElement(st),value:"system"},{icon:Je__default.createElement(Tt),value:"light"},{icon:Je__default.createElement(ct),value:"dark"}];function pt({icon:e,value:o,isActive:r,isHovered:n,onClick:i,onMouseEnter:l,onMouseLeave:T,buttonRef:a}){return jsxs("button",{type:"button",ref:r===true?a:void 0,className:clsx("relative flex h-9 w-12 cursor-pointer items-center justify-center","text-muted-foreground hover:text-foreground",r===true&&"text-foreground font-medium"),"aria-pressed":r===true,"aria-label":`Switch to ${o} theme`,onClick:s=>{i(o,s);},onMouseEnter:l,onMouseLeave:T,style:{borderRadius:"var(--radius)"},children:[n===true&&jsx(motion.div,{layoutId:"theme-hover",className:"bg-muted absolute inset-0",style:{borderRadius:"var(--radius)"},transition:{type:"spring",bounce:0,stiffness:100,damping:10,duration:.3}}),jsx("div",{className:"relative z-10 flex items-center justify-center",children:jsx("div",{className:"[&_svg]:size-4",children:e})}),r===true&&jsx("div",{className:"absolute bottom-0 left-1/2 h-0.5 w-6 -translate-x-1/2 rounded-full",style:{backgroundColor:"hsl(var(--primary))"}})]})}function Ee({className:e,onSwitchTheme:o,theme:r,themes:n,themeRef:i}){let l=q(),[T,a]=useState(null),s=async(h,f)=>{await o(h,f);},m=ut.filter(h=>n.includes(h.value));return jsx("fieldset",{className:clsx("bg-background border-border m-0 inline-flex h-9 min-w-0 items-center overflow-hidden border p-0 shadow-sm",l?"opacity-100":"opacity-0",e),style:{borderRadius:"var(--radius)",backgroundColor:"hsl(var(--background))"},"aria-label":"Theme",children:m.map(h=>jsx(pt,{icon:h.icon,value:h.value,isActive:r===h.value,isHovered:T===h.value,onClick:(f,P)=>{s(f,P).catch(console.error);},onMouseEnter:()=>{a(h.value);},onMouseLeave:()=>{a(null);},buttonRef:r===h.value?i:void 0},h.value))})}function yt({themes:e=Re,currentTheme:o,onThemeChange:r,animationType:n,duration:i,className:l,...T}){let a=O({...T,animationType:n,duration:i,themes:e,...o!==void 0&&{theme:o},onThemeChange:r});return jsx(Ee,{className:l,onSwitchTheme:async(m,h)=>{await a.switchTheme(m,{element:h?.currentTarget,animationOff:h?.detail===0});},theme:a.theme,themes:e,themeRef:a.ref})}function ft({className:e,contextTheme:o,themes:r=Re}){return jsx(Ee,{className:e,onSwitchTheme:async(i,l)=>{if(l?.detail===0){await o.switchTheme(i,true);return}if(o.switchThemeFromElement&&l){await o.switchThemeFromElement(i,l.currentTarget);return}await o.switchTheme(i);},theme:o.theme,themes:r,themeRef:o.ref})}function on(e){let o=ke();return o?jsx(ft,{...e,contextTheme:o}):jsx(yt,{...e})}var Le=["default"],Ct=["light","dark","system"];function $e({...e}){return jsx(ie.Root,{"data-slot":"select",...e})}function Fe({className:e,children:o,position:r="popper",...n}){return jsx(ie.Portal,{children:jsx(ie.Content,{"data-slot":"select-content",className:clsx("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",r==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",e),position:r,...n,children:jsx(ie.Viewport,{className:clsx("p-1",r==="popper"&&"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),children:o})})})}function xt(){return jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:"M20 6 9 17l-5-5"})})}function We({className:e,children:o,...r}){return jsxs(ie.Item,{"data-slot":"select-item",className:clsx("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",e),...r,children:[jsx("span",{className:"absolute left-2 flex h-3.5 w-3.5 items-center justify-center",children:jsx(ie.ItemIndicator,{children:jsx(xt,{})})}),jsx(ie.ItemText,{children:o})]})}function Rt(){return jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:"m6 9 6 6 6-6"})})}var Ae=Je.forwardRef(function({className:e,size:o="default",children:r,...n},i){return jsxs(ie.Trigger,{ref:i,"data-slot":"select-trigger","data-size":o,className:clsx("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",e),...n,children:[r,jsx(ie.Icon,{asChild:true,children:jsx(Rt,{})})]})});Ae.displayName="SelectTrigger";function Ke({...e}){return jsx(ie.Value,{"data-slot":"select-value",...e})}function Ve({className:e,placeholder:o="Choose a color theme",colorThemeLabel:r,colorTheme:n,colorThemes:i,onSelectColorTheme:l}){let T=useId(),a=useRef(null),s=useRef("keyboard");return i.length>1?jsxs("div",{className:["flex flex-col gap-2",e].filter(Boolean).join(" "),children:[r!==void 0&&r!==""?jsx("label",{htmlFor:T,children:r}):null,jsxs($e,{value:n,onValueChange:m=>{l(m,{element:a.current,animationOff:s.current==="keyboard"}).catch(console.error);},children:[jsx(Ae,{id:T,ref:a,onPointerDownCapture:()=>{s.current="pointer";},onKeyDownCapture:()=>{s.current="keyboard";},className:"capitalize",children:jsx(Ke,{placeholder:o})}),jsx(Fe,{onPointerDownCapture:()=>{s.current="pointer";},onKeyDownCapture:()=>{s.current="keyboard";},children:i.map(m=>jsx(We,{className:"capitalize",value:m,children:m},m))})]})]}):null}function At({className:e,placeholder:o,colorThemeLabel:r,themes:n=Ct,colorThemes:i=Le,currentColorTheme:l,onColorThemeChange:T,animationType:a,duration:s,...m}){let h=O({...m,animationType:a,duration:s,themes:n,colorThemes:i,...l!==void 0&&{colorTheme:l},onColorThemeChange:T}),f=h.switchColorTheme;return jsx(Ve,{className:e,placeholder:o,colorThemeLabel:r,colorTheme:h.colorTheme,colorThemes:i,onSelectColorTheme:f})}function Vt({className:e,placeholder:o,colorThemeLabel:r,onColorThemeChange:n,colorThemes:i=Le,contextTheme:l}){let T=async(a,s)=>{a!==l.colorTheme&&(await l.switchColorTheme(a,s),n?.(a));};return jsx(Ve,{className:e,placeholder:o,colorThemeLabel:r,colorTheme:l.colorTheme,colorThemes:i,onSelectColorTheme:T})}function Yn(e){let o=ke();return o?jsx(Vt,{...e,contextTheme:o}):jsx(At,{...e})}var Io=["light","dark","system"],Mo=["default"],Ot=createContext(void 0);function ri({children:e,themes:o=Io,colorThemes:r=Mo,defaultTheme:n="system",defaultColorTheme:i="default",animationType:l="circle",duration:T=400,...a}){let s=q(),m=O({...a,themes:o,colorThemes:r,defaultTheme:n,defaultColorTheme:i,animationType:l,duration:T}),h=useCallback(async(P,A)=>{await m.switchTheme(P,{element:A});},[m]),f=useMemo(()=>s?{ref:m.ref,theme:m.theme,colorTheme:m.colorTheme,resolvedTheme:m.resolvedTheme,setTheme:m.setTheme,setColorTheme:m.setColorTheme,switchTheme:m.switchTheme,switchThemeFromElement:h,switchColorTheme:m.switchColorTheme,toggleTheme:m.toggleTheme,toggleLightTheme:m.toggleLightTheme,toggleDarkTheme:m.toggleDarkTheme,toggleColorTheme:m.toggleColorTheme,createColorThemeToggle:m.createColorThemeToggle,isColorThemeActive:m.isColorThemeActive}:{ref:{current:null},theme:n,colorTheme:i,resolvedTheme:n==="dark"?"dark":"light",setTheme:()=>{},setColorTheme:()=>{},switchTheme:async()=>Promise.resolve(),switchThemeFromElement:async()=>Promise.resolve(),switchColorTheme:async()=>Promise.resolve(),toggleTheme:async()=>Promise.resolve(),toggleLightTheme:async()=>Promise.resolve(),toggleDarkTheme:async()=>Promise.resolve(),toggleColorTheme:async()=>Promise.resolve(),createColorThemeToggle:()=>async()=>Promise.resolve(),isColorThemeActive:()=>false},[s,n,i,m,h]);return jsx(Ot.Provider,{value:f,children:jsx(K.Provider,{value:f,children:e})})}var ni=()=>{let e=useContext(Ot);if(e===void 0)throw new Error("useSpacemanTheme must be used within a SpacemanThemeProvider");return e};function w(e){return JSON.stringify(e).replaceAll("<","\\u003c").replaceAll(">","\\u003e").replaceAll("&","\\u0026").replaceAll("\u2028","\\u2028").replaceAll("\u2029","\\u2029")}var Vo=({attribute:e,colorStorageKey:o,colorThemePrefix:r,defaultColorTheme:n,defaultTheme:i,enableColorScheme:l,enableSystem:T,globalClassName:a,storageKey:s,value:m})=>{let h=m?.light??"light",f=m?.dark??a,P=m?.system??"system";return `(function(){try{var d=document.documentElement;var theme=localStorage.getItem(${w(s)})||${w(i)};var colorTheme=localStorage.getItem(${w(o)})||${w(n)};if(!${JSON.stringify(T)}&&theme==='system'){theme=${w(i==="system"?"light":i)};}var resolved=theme==='system'?(window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'):theme;var attr=${w(e)};var lightValue=${w(h)};var darkValue=${w(f)};var systemValue=${w(P)};if(attr==='data-theme'){d.setAttribute('data-theme',theme==='system'?systemValue:(resolved==='dark'?darkValue:lightValue));}else{d.classList.remove(lightValue,darkValue,systemValue,'auto');d.classList.add(theme==='system'?systemValue:(resolved==='dark'?darkValue:lightValue));}if(${JSON.stringify(l)}){d.style.colorScheme=theme==='system'?'':resolved;}else{d.style.removeProperty('color-scheme');}d.classList.add(${w(r)}+colorTheme);}catch(e){console.warn('Theme pre-hydration script failed:',e);}})();`},Ue=Je__default.memo(function({attribute:e,colorStorageKey:o,colorThemePrefix:r,defaultColorTheme:n,defaultTheme:i,enableColorScheme:l,enableSystem:T,globalClassName:a,nonce:s,scriptProps:m,storageKey:h,value:f}){return jsx("script",{...m,nonce:s,suppressHydrationWarning:true,dangerouslySetInnerHTML:{__html:Vo({attribute:e,colorStorageKey:o,colorThemePrefix:r,defaultColorTheme:n,defaultTheme:i,enableColorScheme:l,enableSystem:T,globalClassName:a,storageKey:h,value:f})}})});Ue.displayName="ThemePreHydrationScript";var Bo=["default"],Dt=createContext(void 0),Do=()=>{let e=document.createElement("style");return e.textContent="*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}",document.head.appendChild(e),window.getComputedStyle(document.body),()=>{setTimeout(()=>{e.parentNode&&e.parentNode.removeChild(e);},1);}};function Xo({attribute:e="class",children:o,colorStorageKey:r="color-theme",colorThemePrefix:n="theme-",colorThemes:i=Bo,defaultColorTheme:l="default",defaultTheme:T="system",disableAnimationOnInit:a=true,disablePreHydrationScript:s=false,disableTransitionOnChange:m=false,duration:h=400,enableColorScheme:f=true,enableSystem:P=true,forcedTheme:A,globalClassName:p="dark",nonce:g,onColorThemeChange:J,onThemeChange:x,scriptProps:D,storageKey:E="theme",themes:V,value:H,animationType:c="circle",...y}){let v=useMemo(()=>V&&V.length>0?V:P?["light","dark","system"]:["light","dark"],[P,V]),k=useMemo(()=>T==="system"&&!P?"light":T,[T,P]),b=q(),u=O({...y,animationType:c,attribute:e,colorStorageKey:r,colorTheme:void 0,colorThemePrefix:n,colorThemes:i,defaultColorTheme:l,defaultTheme:k,duration:h,enableColorScheme:f,globalClassName:p,onColorThemeChange:J,onThemeChange:x,storageKey:E,theme:A,themes:v,value:H}),R=useCallback(async C=>{let L=m?Do():void 0;try{let z=await C();return L?.(),z}catch(z){throw L?.(),z}},[m]),N=useCallback(C=>{R(()=>{u.setTheme(C);});},[u,R]),$=useCallback(async(C,L=false)=>{await R(async()=>{if(!b&&a){u.setTheme(C);return}await u.switchTheme(C,L);});},[a,b,u,R]),X=useCallback(async(C,L)=>{await R(async()=>{if(!b&&a){u.setTheme(C);return}await u.switchTheme(C,{element:L});});},[a,b,u,R]),U=useMemo(()=>({ref:u.ref,theme:u.theme,colorTheme:u.colorTheme,resolvedTheme:u.resolvedTheme,systemTheme:u.systemTheme,setTheme:N,setColorTheme:u.setColorTheme,switchTheme:$,switchColorTheme:u.switchColorTheme,toggleTheme:async(C=false)=>R(async()=>u.toggleTheme(C)),toggleLightTheme:async(C=false)=>R(async()=>u.toggleLightTheme(C)),toggleDarkTheme:async(C=false)=>R(async()=>u.toggleDarkTheme(C)),toggleColorTheme:u.toggleColorTheme,createColorThemeToggle:u.createColorThemeToggle,isColorThemeActive:u.isColorThemeActive,switchThemeFromElement:X}),[N,$,X,u,R]);return jsx(Dt.Provider,{value:U,children:jsxs(K.Provider,{value:U,children:[!s&&!A?jsx(Ue,{attribute:e,colorStorageKey:r,colorThemePrefix:n,defaultColorTheme:l,defaultTheme:k,enableColorScheme:f,enableSystem:P,globalClassName:p,nonce:g,scriptProps:D,storageKey:E,value:H}):null,o]})})}var fi=Xo,_o=()=>{let e=useContext(Dt);if(e===void 0)throw new Error("useNextTheme must be used within a NextThemeProvider");return e},vi=_o;var zo=(e,o,r,n,i,l,T)=>`
+(function() {
+  try {
+    var theme = localStorage.getItem(${w(e)}) || ${w(r)};
+    var colorTheme = localStorage.getItem(${w(o)}) || ${w(n)};
+    var el = document.documentElement;
+    var resolved;
+    if (theme === 'system') {
+      if (${w(T)} === 'css') {
+        el.classList.remove(${w(i)});
+        el.classList.remove('auto');
+        el.classList.remove('system');
+        el.classList.add('system');
+        el.style.colorScheme = '';
+      } else {
+        resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        if (resolved === 'dark') {
+          el.classList.add(${w(i)});
+        } else {
+          el.classList.remove(${w(i)});
+        }
+        el.classList.remove('system');
+        el.classList.remove('auto');
+        el.style.colorScheme = resolved;
+      }
+    } else {
+      resolved = theme;
+      el.classList.remove('system');
+      el.classList.remove('auto');
+      if (resolved === 'dark') {
+        el.classList.add(${w(i)});
+      } else {
+        el.classList.remove(${w(i)});
+      }
+      el.style.colorScheme = resolved;
+    }
+    if (colorTheme && colorTheme !== 'default') {
+      el.classList.add(${w(l)} + colorTheme);
+    }
+  } catch (e) {
+    console.warn('Theme pre-hydration script failed:', e);
+  }
+})();
+`,Xt=Je__default.memo(function({storageKey:e=a,colorStorageKey:o=b,defaultTheme:r="system",defaultColorTheme:n="default",globalClassName:i=c,colorThemePrefix:l=d,nonce:T,systemThemeMode:a$1="js"}){let s=zo(e,o,r,n,i,l,a$1);return jsx("script",{nonce:T,suppressHydrationWarning:true,dangerouslySetInnerHTML:{__html:s}})});Xt.displayName="TanStackStartThemeScript";var Ko="window"in globalThis,_t=({enabled:e,theme:o,colorTheme:r,storageKey:n,colorStorageKey:i})=>{useEffect(()=>{!e||!Ko||(o&&re(n,o),r!==void 0&&r!==""&&re(i,r));},[e,o,r,n,i]);};var Ne=()=>"window"in globalThis&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light",Jt=e=>e==="dark"?"light":"dark";function Ye(e,o){let r=e?.(o);r instanceof Promise&&r.catch(console.error);}var Qo=["light","dark","system"],Zo=["default"],zt=createContext(void 0),jo=()=>useSyncExternalStore(()=>()=>{},()=>true,()=>false);function Ji({children:e,themes:o=Qo,colorThemes:r=Zo,defaultTheme:n="system",defaultColorTheme:i="default",animationType:l="circle",duration:T=400,storageKey:a$1=a,colorStorageKey:s=b,globalClassName:m=c,colorThemePrefix:h=d,serverTheme:f,serverColorTheme:P,systemThemeMode:A="css",onServerThemeChange:p,onServerColorThemeChange:g,...J}){let x=jo(),D=f!==void 0,E=D?f:void 0,V=useCallback(d=>{Ye(p,d);},[p]),H=useCallback(d=>{Ye(g,d);},[g]),c=O({...J,onThemeChange:V,onColorThemeChange:H,themes:o,colorThemes:r,defaultTheme:n,defaultColorTheme:i,animationType:l,duration:T,storageKey:a$1,colorStorageKey:s,globalClassName:m,colorThemePrefix:h,initialTheme:E,initialColorTheme:P,systemThemeMode:A});_t({enabled:D,theme:E,colorTheme:P,storageKey:a$1,colorStorageKey:s});let y=useCallback(d=>{c.setTheme(d);},[c]),v=useCallback(d=>{c.setColorTheme(d);},[c]),k=useCallback(async(d,I=false)=>{if(!x){y(d);return}await c.switchTheme(d,I);},[x,c,y]),b=useCallback(async(d=false)=>{let I=Jt(c.resolvedTheme);if(!x){y(I);return}await c.toggleTheme(d);},[x,c,y]),u=useCallback(async(d=false)=>{if(!x){y("light");return}await c.toggleLightTheme(d);},[x,c,y]),R=useCallback(async(d=false)=>{if(!x){y("dark");return}await c.toggleDarkTheme(d);},[x,c,y]),N=useCallback(async(d,I)=>{r.includes(d)&&await c.switchColorTheme(d,I);},[r,c]),$=useCallback(async d=>{await c.toggleColorTheme(d);},[c]),X=useCallback(d=>async I=>N(d,he(I)),[N]),U=useCallback(async(d,I)=>{if(!x){y(d);return}await c.switchTheme(d,{element:I});},[x,c,y]),C=Ne(),L=D?f==="dark"?"dark":f==="system"?C:"light":n==="dark"?"dark":"light",z=useMemo(()=>x?{ref:c.ref,theme:c.theme,colorTheme:c.colorTheme,resolvedTheme:c.resolvedTheme,systemTheme:C,isHydrated:true,setTheme:y,setColorTheme:v,switchTheme:k,switchThemeFromElement:U,switchColorTheme:N,toggleTheme:b,toggleLightTheme:u,toggleDarkTheme:R,toggleColorTheme:$,createColorThemeToggle:X,isColorThemeActive:c.isColorThemeActive}:{ref:{current:null},theme:E??n,colorTheme:P??i,resolvedTheme:L,systemTheme:"light",isHydrated:false,setTheme:y,setColorTheme:v,switchTheme:async d=>(y(d),Promise.resolve()),switchThemeFromElement:async d=>(y(d),Promise.resolve()),switchColorTheme:N,toggleTheme:async()=>(y(L==="dark"?"light":"dark"),Promise.resolve()),toggleLightTheme:async()=>(y("light"),Promise.resolve()),toggleDarkTheme:async()=>(y("dark"),Promise.resolve()),toggleColorTheme:$,createColorThemeToggle:X,isColorThemeActive:c.isColorThemeActive},[x,E,n,P,i,L,y,v,N,$,X,c,C,k,U,b,u,R]);return jsx(zt.Provider,{value:z,children:jsx(K.Provider,{value:z,children:e})})}var $i=()=>{let e=useContext(zt);if(e===void 0)throw new Error("useTanStackTheme must be used within a TanStackThemeProvider");return e};var rr=["light","dark","system"],nr=["default"],Wt=createContext(void 0);function Qi({children:e,themes:o=rr,colorThemes:r=nr,defaultTheme:n="system",defaultColorTheme:i="default",animationType:l="circle",duration:T=400,attribute:a="class",disableTransitionOnChange:s=false,storageKey:m="vite-theme",colorStorageKey:h="vite-color-theme",globalClassName:f="dark",colorThemePrefix:P="theme-",...A}){let p=O({...A,themes:o,colorThemes:r,defaultTheme:n,defaultColorTheme:i,animationType:l,duration:T,storageKey:m,colorStorageKey:h,globalClassName:a==="class"?f:void 0,colorThemePrefix:P}),g=useCallback(()=>{if(!s)return ()=>{};let v=document.createElement("style");return v.textContent="*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}",document.head.appendChild(v),window.getComputedStyle(document.body),()=>{setTimeout(()=>{document.head.removeChild(v);},1);}},[s]),J=useCallback(v=>{let k=g();p.setTheme(v),k();},[p,g]),x=useCallback(async(v,k=false)=>{let b=g();await p.switchTheme(v,k),b();},[p,g]),D=useCallback(async(v=false)=>{let k=g();await p.toggleTheme(v),k();},[p,g]),E=useCallback(async(v=false)=>{let k=g();await p.toggleLightTheme(v),k();},[p,g]),V=useCallback(async(v=false)=>{let k=g();await p.toggleDarkTheme(v),k();},[p,g]),H=useCallback(async(v,k)=>{let b=g();try{await p.switchTheme(v,{element:k}),b();}catch(u){throw b(),u}},[p,g]),c=Ne(),y=useMemo(()=>({ref:p.ref,theme:p.theme,colorTheme:p.colorTheme,resolvedTheme:p.resolvedTheme,systemTheme:c,setTheme:J,setColorTheme:p.setColorTheme,switchTheme:x,switchThemeFromElement:H,switchColorTheme:p.switchColorTheme,toggleTheme:D,toggleLightTheme:E,toggleDarkTheme:V,toggleColorTheme:p.toggleColorTheme,createColorThemeToggle:p.createColorThemeToggle,isColorThemeActive:p.isColorThemeActive}),[p,c,J,x,H,D,E,V]);return jsx(Wt.Provider,{value:y,children:jsx(K.Provider,{value:y,children:e})})}var Zi=()=>{let e=useContext(Wt);if(e===void 0)throw new Error("useViteTheme must be used within a ViteThemeProvider");return e};export{q as a,O as b,on as c,Yn as d,ri as e,ni as f,Xo as g,fi as h,_o as i,vi as j,Xt as k,Ji as l,$i as m,Qi as n,Zi as o};

package/dist/chunk-I3T2QXRT.js

@@ -0,0 +1,18 @@
+var x=typeof window<"u",k=()=>{if(!x||document.getElementById("spaceman-theme-base-style"))return;let t=document.createElement("style");t.id="spaceman-theme-base-style",t.textContent=`
+    html[data-spaceman-theme-transition]::view-transition-group(root),
+    html[data-spaceman-theme-transition]::view-transition-old(root),
+    html[data-spaceman-theme-transition]::view-transition-new(root) {
+      animation: none;
+    }
+    html[data-spaceman-theme-transition]::view-transition-old(root),
+    html[data-spaceman-theme-transition]::view-transition-new(root) {
+      mix-blend-mode: normal;
+    }
+    html[data-spaceman-theme-transition],
+    html[data-spaceman-theme-transition] *,
+    html[data-spaceman-theme-transition] *::before,
+    html[data-spaceman-theme-transition] *::after {
+      transition: none !important;
+    }
+  `,document.head.appendChild(t);};var C=()=>x&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light",M=t=>t==="system"?C():t==="dark"?"dark":"light",P=t=>t==="system"?"system":t==="dark"?"dark":"light",R=()=>x&&document.startViewTransition instanceof Function,T=()=>x&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,E=t=>{switch(t){case "left":return {a:-100,b:0};case "right":return {a:100,b:0};case "top":return {a:0,b:-100};case "bottom":return {a:0,b:100};case "top-left":return {a:-100,b:-100};case "top-right":return {a:100,b:-100};case "bottom-left":return {a:-100,b:100};case "bottom-right":return {a:100,b:100};default:return {a:-100,b:0}}},$=()=>{let t=getComputedStyle(document.documentElement,"::view-transition-new(root)"),n=Math.max(window.innerWidth,parseFloat(t.width)||0),e=Math.max(window.innerHeight,parseFloat(t.height)||0);return {width:n,height:e}},w=(t,n)=>{let{width:e,height:o}=$();return Math.hypot(Math.max(Math.abs(t),Math.abs(e-t)),Math.max(Math.abs(n),Math.abs(o-n)))+1},B=t=>{let n=t.includes("left")?0:t.includes("right")?window.innerWidth:window.innerWidth/2,e=t.includes("top")?0:t.includes("bottom")?window.innerHeight:window.innerHeight/2;return {x:n,y:e}},S=0,u=(t,n)=>{let e=document.documentElement.animate(n,{duration:t.duration,easing:t.easing,fill:"both",pseudoElement:"::view-transition-new(root)"}),o=e.effect;if(!(o instanceof KeyframeEffect))return e;let i=o.getKeyframes(),d=i.some(m=>"clipPath"in m)?"clipPath":i.some(m=>"maskImage"in m)?"maskImage":"transform";if(getComputedStyle(document.documentElement,"::view-transition-new(root)")[d]!=="none")return e;let c=e.playState==="paused",s=e.currentTime;e.cancel(),e.finished.catch(()=>{});let r=`spaceman-theme-reveal-${++S}`,a=document.createElement("style"),l=i.map(m=>{let y=Object.entries(m).filter(([h])=>!["offset","computedOffset","easing","composite"].includes(h)).map(([h,v])=>`${h.replace(/[A-Z]/g,A=>`-${A.toLowerCase()}`)}:${v};`).join("");return `${m.computedOffset*100}%{${y}}`}).join("");a.textContent=`@keyframes ${r}{${l}}html[data-spaceman-theme-transition]::view-transition-new(root){animation:${r} ${t.duration}ms ${t.easing} both;}`,document.head.appendChild(a);let f=getComputedStyle(document.documentElement,"::view-transition-new(root)").animationName,p=document.getAnimations().find(m=>m instanceof CSSAnimation&&m.animationName===f);if(!p)throw a.remove(),new Error("Transition pseudo animations are unavailable");return c&&(p.pause(),p.currentTime=s),p.finished.then(()=>{a.remove();},()=>{a.remove();}),p},I=t=>{let n=t.clipPathDirection??"top-left",e={"top-left":"polygon(-1% -1%, 101% -101%, -101% 101%, -1% -1%)",top:"polygon(-1% -1%, 101% -1%, 101% -1%, -1% -1%)","top-right":"polygon(101% -1%, 201% 101%, -1% -101%, 101% -1%)",right:"polygon(101% -1%, 101% 101%, 101% 101%, 101% -1%)","bottom-right":"polygon(101% 101%, -1% 201%, 201% -1%, 101% 101%)",bottom:"polygon(101% 101%, -1% 101%, -1% 101%, 101% 101%)","bottom-left":"polygon(-1% 101%, -101% -1%, 101% 201%, -1% 101%)",left:"polygon(-1% 101%, -1% -1%, -1% -1%, -1% 101%)"},o={"top-left":"polygon(-1% -1%, 201% -1%, -1% 201%, -1% -1%)",top:"polygon(-1% -1%, 101% -1%, 101% 101%, -1% 101%)","top-right":"polygon(101% -1%, 101% 201%, -101% -1%, 101% -1%)",right:"polygon(101% -1%, 101% 101%, -1% 101%, -1% -1%)","bottom-right":"polygon(101% 101%, -101% 101%, 101% -101%, 101% 101%)",bottom:"polygon(101% 101%, -1% 101%, -1% -1%, 101% -1%)","bottom-left":"polygon(-1% 101%, -1% -101%, 201% 101%, -1% 101%)",left:"polygon(-1% 101%, -1% -1%, 101% -1%, 101% 101%)"};return u(t,{clipPath:[e[n],o[n]]})},D=t=>{let n=t.clipPathDirection??"top-left",{width:e,height:o}=$(),i=n.includes("-"),d=n.includes("left"),g=n.includes("top"),c=n==="left"||n==="right",s=d?0:n.includes("right")?1:.5,r=g?0:n.includes("bottom")?1:.5,a=i||c?e*3:e,l=i||!c?o*3:o,f=i?`${s*100},${r*100} ${(1-s)*100},${r*100} ${s*100},${(1-r)*100}`:"0,0 100,0 100,100 0,100",p=i?a*l/Math.hypot(a,l):c?a:l,y=1-Math.max(0,Math.min(t.gradientWidth??80,p*.2))/p,h=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><defs><linearGradient id="edge" x1="${s*100}" y1="${r*100}" x2="${100*(i?.5:c?1-s:s)}" y2="${100*(i?.5:c?r:1-r)}" gradientUnits="userSpaceOnUse"><stop offset="${y}" stop-color="black"/><stop offset="1" stop-color="black" stop-opacity="0"/></linearGradient></defs><polygon points="${f}" fill="url(#edge)"/></svg>`;return u(t,{maskImage:[`url("data:image/svg+xml,${encodeURIComponent(h)}")`,`url("data:image/svg+xml,${encodeURIComponent(h)}")`],maskMode:["alpha","alpha"],maskRepeat:["no-repeat","no-repeat"],maskSize:[i?"0px 0px":c?`0px ${l}px`:`${a}px 0px`,`${a}px ${l}px`],maskPosition:[`${s*e}px ${r*o}px`,`${s*(e-a)}px ${r*(o-l)}px`]})},F=t=>{let{x:n,y:e}=t,o=w(n,e),i=Math.sqrt(3)*o;return u(t,{clipPath:[`polygon(${n}px ${e}px, ${n}px ${e}px, ${n}px ${e}px)`,`polygon(${n}px ${e-2*o}px, ${n+i}px ${e+o}px, ${n-i}px ${e+o}px)`]})},z=t=>{let{width:n,height:e}=$();return b({...t,x:n/2,y:e/2})},b=t=>{let{x:n,y:e}=t;return u(t,{clipPath:[`circle(0px at ${n}px ${e}px)`,`circle(${w(n,e)}px at ${n}px ${e}px)`]})},O=t=>{let{a:n=-100,b:e=0,x:o,y:i}=t;return u(t,{transform:[`translate(${n}%, ${e}%)`,`translate(${o}%, ${i}%)`]})},N=t=>{let{x:n,y:e,blurAmount:o}=t;if(o<=0)return b(t);let i=Math.min(o,20),d=w(n,e)+i,g=d*2;return u(t,{maskImage:[`radial-gradient(closest-side, #000 calc(100% - ${i}px), transparent 100%)`,`radial-gradient(closest-side, #000 calc(100% - ${i}px), transparent 100%)`],maskRepeat:["no-repeat","no-repeat"],maskSize:["0px 0px",`${g}px ${g}px`],maskPosition:[`${n}px ${e}px`,`${n-d}px ${e-d}px`]})};
+export{k as a,C as b,M as c,P as d,R as e,T as f,E as g,B as h,I as i,D as j,F as k,z as l,b as m,O as n,N as o};

package/dist/chunk-QYUMCBTQ.js

@@ -0,0 +1 @@
+import {d as d$1}from'./chunk-I3T2QXRT.js';var a="theme",d="color-theme",s="dark",c="theme-";function f(e,o,m={}){let{defaultTheme:h="system",defaultColorTheme:l="default"}=m,r=e==="light"||e==="dark"||e==="system"?e:h,n=o??l;return {theme:d$1(r),themePreference:r,colorTheme:n}}export{a,d as b,s as c,c as d,f as e};

package/dist/chunk-X6UEG7WG.js

@@ -0,0 +1,12 @@
+import {e,f,a,n,o,i,j,k as k$1,l,m}from'./chunk-I3T2QXRT.js';var I=e=>{if(e.logoLight!==void 0||e.logoDark!==void 0){if(e.logoLight===void 0||e.logoLight===""||e.logoDark===void 0||e.logoDark==="")throw new Error("logoLight and logoDark must both be provided.");if(e.logo!==void 0)throw new Error("Use logo or the logoLight/logoDark pair, not both.");return {logoLight:e.logoLight,logoDark:e.logoDark}}return {logo:e.logo}},x=0,v=e=>{let o=w(e.logo);if(!o)return;let i=e.logoWidth!=="auto"&&e.logoWidth!==void 0&&Number.isFinite(e.logoWidth)&&e.logoWidth>0?e.logoWidth:void 0,t=e.logoHeight!=="auto"&&e.logoHeight!==void 0&&Number.isFinite(e.logoHeight)&&e.logoHeight>0?e.logoHeight:void 0,a=i??(t!==void 0?t*o.aspectRatio:e.logoWidth==="auto"||e.logoHeight==="auto"?o.naturalWidth:96),n=t??a/o.aspectRatio,l=`spaceman-theme-logo-${++x}`,r=document.createElement("img");r.src=o.image,r.alt="",r.setAttribute("aria-hidden","true"),r.setAttribute("data-spaceman-theme-logo",""),r.style.cssText=`position:fixed;left:calc(50% - ${a/2}px);top:calc(50% - ${n/2}px);width:${a}px;height:${n}px;max-width:none;max-height:none;object-fit:contain;display:block;margin:0;padding:0;border:0;transform:none;pointer-events:none;z-index:2147483647;view-transition-name:${l};`;let m=document.createElement("style");return m.setAttribute("data-spaceman-theme-logo-style",""),m.textContent=`
+    @keyframes ${l}-fade { 0%, 85% { opacity:1; } 100% { opacity:0; } }
+    html[data-spaceman-theme-transition]::view-transition-group(${l}) {
+      z-index:2;
+      animation:${l}-fade ${e.duration}ms linear both;
+    }
+    html[data-spaceman-theme-transition]::view-transition-old(${l}) { display:none; }
+    html[data-spaceman-theme-transition]::view-transition-new(${l}) {
+      animation:none; mix-blend-mode:normal;
+    }
+  `,document.head.appendChild(m),document.documentElement.appendChild(r),{element:r,style:m}},h=new Map,R=async e=>{if(typeof window>"u")return Promise.resolve();let o=h.get(e);if(o)return o.loading;let i={loading:Promise.resolve()};return h.set(e,i),i.loading=(async()=>{let t=new AbortController,a=setTimeout(()=>{t.abort();},2e3);try{let n=await fetch(e,{signal:t.signal});if(!n.ok)return;let l=await n.text(),r=new DOMParser().parseFromString(l,"image/svg+xml");if(r.querySelector("parsererror")||r.documentElement.localName!=="svg"||r.documentElement.namespaceURI!=="http://www.w3.org/2000/svg")return;let m=`data:image/svg+xml,${encodeURIComponent(l)}`,d=new Image;d.src=m,await d.decode(),d.naturalWidth>0&&d.naturalHeight>0&&(i.ready={image:m,naturalWidth:d.naturalWidth,aspectRatio:d.naturalWidth/d.naturalHeight});}catch{}finally{clearTimeout(a);}})(),i.loading},w=e=>e!==void 0&&e!==""?h.get(e)?.ready:void 0;var A=(r=>(r.CIRCLE="circle",r.BLUR_CIRCLE="blur-circle",r.SLIDE="slide",r.CLIP_PATH="clip-path",r.POLYGON_GRADIENT="polygon-gradient",r.TRIANGLE="triangle",r.SVG_LOGO="svg-logo",r))(A||{}),D=["top-left","top","top-right","right","bottom-right","bottom","bottom-left","left"];var s=new WeakMap,k=async(e$1,o$1)=>{if(!("document"in globalThis)){e$1();return}let i$1=s.get(document);i$1?.transition?.skipTransition(),i$1?.animation?.cancel(),i$1?.logo?.element.remove(),i$1?.logo?.style.remove();let t={updateDone:Promise.resolve()};s.set(document,t);let a$1=()=>{t.animation?.cancel(),t.logo?.element.remove(),t.logo?.style.remove(),s.get(document)===t&&(s.delete(document),document.documentElement.removeAttribute("data-spaceman-theme-transition"));};t.updateDone=(async()=>{if(i$1&&await i$1.updateDone.catch(()=>{}),s.get(document)!==t||!o$1||!e()||f()||document.visibilityState==="hidden"){e$1();return}a(),document.documentElement.setAttribute("data-spaceman-theme-transition",""),o$1.animationType==="svg-logo"&&(t.logo=v(o$1));let n;try{n=document.startViewTransition(e$1);}catch{e$1();return}t.transition=n,n.ready.catch(()=>{}),n.finished.then(a$1,a$1),await n.updateCallbackDone;})();try{await t.updateDone;let n$1=t.transition;if(!n$1){a$1();return}try{await n$1.ready;}catch{a$1();return}if(s.get(document)!==t){n$1.skipTransition();return}if(!o$1)return;try{t.animation=o$1.animationType==="slide"?n(o$1):o$1.animationType==="blur-circle"?o(o$1):o$1.animationType==="clip-path"?i(o$1):o$1.animationType==="polygon-gradient"?j(o$1):o$1.animationType==="triangle"?k$1(o$1):o$1.animationType==="svg-logo"?l(o$1):m(o$1),t.animation.finished.catch(()=>{});let l$1=t.animation.effect;!(t.animation instanceof CSSAnimation)&&(!(l$1 instanceof KeyframeEffect)||l$1.pseudoElement!=="::view-transition-new(root)")&&(n$1.skipTransition(),a$1());}catch{n$1.skipTransition(),a$1();}}catch(n){throw a$1(),n}};
+export{I as a,R as b,A as c,D as d,k as e};

package/dist/core/index.d.ts

@@ -1,96 +1,9 @@
-import { RefObject } from 'react';
+import { q as AnimationConfig } from '../animations-CaaRrn3-.js';
+export { A as AnimationPosition, C as ColorTheme, a as ColorThemeToggle, S as SlideDirection, b as SystemThemeMode, T as TRANSITION_DIRECTIONS, c as Theme, d as ThemeAnimationOptions, e as ThemeAnimationType, f as ThemeLogoOptions, g as ThemeSelectorProps, h as ThemeSwitcherProps, i as ThemeTransitionInput, j as ThemeTransitionOptions, k as TransitionDirection, U as UseThemeAnimationProps, l as UseThemeAnimationReturn, t as createBlurCircleAnimation, u as createCircleAnimation, v as createClipPathAnimation, w as createPolygonGradientAnimation, x as createSlideAnimation, y as createSvgLogoAnimation, z as createTriangleAnimation, B as getAnimationPosition, D as getSlideFromCoords, m as getSystemTheme, n as injectBaseStyles, p as prefersReducedMotion, r as resolveTheme, o as resolveThemeForServer, s as supportsViewTransitions } from '../animations-CaaRrn3-.js';
+export { p as preloadThemeLogo } from '../logo-DtwtRv4y.js';
+import 'react';
 
-declare enum ThemeAnimationType {
-    CIRCLE = "circle",
-    BLUR_CIRCLE = "blur-circle",
-    SLIDE = "slide"
-}
-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;
-    blurAmount?: number;
-    styleId?: string;
-    themes?: Theme[];
-    colorThemes?: ColorTheme[];
-    defaultTheme?: Theme;
-    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;
-}
-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>;
-    switchColorTheme: (colorTheme: string) => void;
-    toggleTheme: (animationOff?: boolean) => Promise<void>;
-    toggleLightTheme: (animationOff?: boolean) => Promise<void>;
-    toggleDarkTheme: (animationOff?: boolean) => Promise<void>;
-    toggleColorTheme: () => void;
-    createColorThemeToggle: (targetColorTheme: string) => () => void;
-    isColorThemeActive: (targetColorTheme: string) => boolean;
-}
-interface ThemeSwitcherProps {
-    themes?: Theme[];
-    currentTheme?: Theme;
-    onThemeChange?: (theme: Theme) => void;
-    animationType?: ThemeAnimationType;
-    duration?: number;
-    className?: string;
-    size?: 'sm' | 'md' | 'lg';
-    variant?: 'default' | 'outline' | 'ghost';
-    icons?: {
-        light?: React.ReactNode;
-        dark?: React.ReactNode;
-        system?: React.ReactNode;
-    };
-}
-interface ThemeSelectorProps {
-    themes?: Theme[];
-    colorThemes?: ColorTheme[];
-    currentTheme?: Theme;
-    currentColorTheme?: ColorTheme;
-    onThemeChange?: (theme: Theme) => void;
-    onColorThemeChange?: (colorTheme: ColorTheme) => void;
-    animationType?: ThemeAnimationType;
-    duration?: number;
-    className?: string;
-    placeholder?: string;
-    themeLabel?: string;
-    colorThemeLabel?: string;
-}
+/** Latest request wins visually; every requested state update still runs once. */
+declare const runThemeTransition: (update: () => void, config: AnimationConfig | null) => Promise<void>;
 
-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 };
+export { AnimationConfig, runThemeTransition };