@flightdev/transitions 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-2026 Flight Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,86 @@
+# @flight-framework/transitions
+
+View transition utilities for Flight Framework. Smooth page transitions with the View Transitions API.
+
+## Installation
+
+```bash
+npm install @flight-framework/transitions
+```
+
+## Quick Start
+
+```typescript
+import { createTransition } from '@flight-framework/transitions';
+
+const transition = createTransition();
+
+// Wrap navigation with transition
+await transition.navigate('/new-page', async () => {
+    await router.push('/new-page');
+});
+```
+
+## React Integration
+
+```tsx
+import { TransitionProvider, useTransition } from '@flight-framework/transitions/react';
+
+function App() {
+    return (
+        <TransitionProvider>
+            <Routes />
+        </TransitionProvider>
+    );
+}
+
+function Navigation() {
+    const { navigate, isPending } = useTransition();
+    
+    return (
+        <nav>
+            <button 
+                onClick={() => navigate('/about')}
+                disabled={isPending}
+            >
+                About
+            </button>
+        </nav>
+    );
+}
+```
+
+## Named Transitions
+
+```css
+/* Shared element transitions */
+.hero-image {
+    view-transition-name: hero;
+}
+```
+
+```tsx
+<img 
+    src="/hero.jpg" 
+    style={{ viewTransitionName: 'hero' }}
+/>
+```
+
+## Configuration
+
+```typescript
+createTransition({
+    // Fallback for browsers without View Transitions
+    fallback: 'fade',
+    
+    // Transition duration
+    duration: 300,
+    
+    // Easing function
+    easing: 'ease-out',
+});
+```
+
+## License
+
+MIT

package/dist/adapters/react/index.d.ts

@@ -0,0 +1,210 @@
+import React, { FC, ReactNode, CSSProperties } from 'react';
+import { i as TransitionsConfig, j as TransitionState, P as PageTransitionConfig, T as TransitionPreset, C as CustomTransition } from '../../types-BA4L37s4.js';
+import { T as TransitionManager } from '../../transition-manager-QWm4OSFw.js';
+
+/**
+ * @flightdev/transitions - React Adapter
+ *
+ * React components and hooks for Flight Transitions.
+ */
+
+interface TransitionContextValue {
+    /** Current transition state */
+    state: TransitionState;
+    /** Transition manager instance */
+    manager: TransitionManager;
+    /** Whether transitions are enabled */
+    isEnabled: boolean;
+    /** Whether View Transitions API is supported */
+    isViewTransitionSupported: boolean;
+    /** Start a page transition programmatically */
+    startTransition: (to: string, config?: PageTransitionConfig) => Promise<void>;
+    /** Skip the current transition */
+    skipTransition: () => void;
+}
+interface TransitionProviderProps {
+    children: ReactNode;
+    /** Initial transition configuration */
+    config?: TransitionsConfig;
+    /** Use a custom transition manager */
+    manager?: TransitionManager;
+}
+/**
+ * TransitionProvider - Provides transition context to the app
+ *
+ * @example
+ * ```tsx
+ * // In your root layout
+ * import { TransitionProvider } from '@flightdev/transitions/react';
+ *
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <TransitionProvider config={{ pageTransition: 'fade' }}>
+ *       {children}
+ *     </TransitionProvider>
+ *   );
+ * }
+ * ```
+ */
+declare const TransitionProvider: FC<TransitionProviderProps>;
+/**
+ * useTransition - Access the transition context
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { state, startTransition } = useTransition();
+ *
+ *   return (
+ *     <div>
+ *       {state.isTransitioning && <LoadingSpinner />}
+ *       <button onClick={() => startTransition('/about')}>
+ *         Go to About
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useTransition(): TransitionContextValue;
+/**
+ * useTransitionState - Get just the transition state
+ */
+declare function useTransitionState(): TransitionState;
+/**
+ * useIsTransitioning - Check if a transition is in progress
+ */
+declare function useIsTransitioning(): boolean;
+/**
+ * useTransitionDirection - Get the current transition direction
+ */
+declare function useTransitionDirection(): 'forward' | 'back' | 'auto';
+/**
+ * useReducedMotion - Check if user prefers reduced motion
+ */
+declare function useReducedMotion(): boolean;
+interface PageTransitionProps {
+    children: ReactNode;
+    /** Transition type (overrides context config) */
+    type?: TransitionPreset | CustomTransition;
+    /** Duration override */
+    duration?: number;
+    /** Mode for sequencing enter/leave */
+    mode?: 'in-out' | 'out-in' | 'simultaneous';
+    /** Callback when transition starts */
+    onStart?: () => void;
+    /** Callback when transition ends */
+    onEnd?: () => void;
+    /** CSS class for the wrapper */
+    className?: string;
+    /** Inline styles for the wrapper */
+    style?: CSSProperties;
+}
+/**
+ * PageTransition - Wraps page content with transition animations
+ *
+ * @example
+ * ```tsx
+ * // In a layout
+ * export default function Layout({ children }) {
+ *   return (
+ *     <PageTransition type="slide-left">
+ *       {children}
+ *     </PageTransition>
+ *   );
+ * }
+ * ```
+ */
+declare const PageTransition: FC<PageTransitionProps>;
+interface TransitionElementProps {
+    children: ReactNode;
+    /** Show or hide the element */
+    show: boolean;
+    /** Transition type */
+    type?: TransitionPreset | CustomTransition;
+    /** Duration override */
+    duration?: number;
+    /** Animate on initial mount */
+    appear?: boolean;
+    /** Unmount when hidden */
+    unmountOnHide?: boolean;
+    /** Callbacks */
+    onEnter?: () => void;
+    onEnterComplete?: () => void;
+    onLeave?: () => void;
+    onLeaveComplete?: () => void;
+    /** Wrapper element tag name */
+    as?: 'div' | 'span' | 'section' | 'article' | 'main' | 'aside' | 'header' | 'footer' | 'nav';
+    /** CSS class */
+    className?: string;
+    /** Inline styles */
+    style?: CSSProperties;
+}
+/**
+ * Transition - Animate element enter/leave
+ *
+ * @example
+ * ```tsx
+ * function Modal({ isOpen, onClose, children }) {
+ *   return (
+ *     <Transition show={isOpen} type="fade-scale">
+ *       <div className="modal">
+ *         {children}
+ *       </div>
+ *     </Transition>
+ *   );
+ * }
+ * ```
+ */
+declare const Transition: FC<TransitionElementProps>;
+interface SharedElementProps {
+    children: ReactNode;
+    /** Unique name for matching across pages */
+    name: string;
+    /** Wrapper element tag name */
+    as?: 'div' | 'span' | 'section' | 'article' | 'main' | 'aside' | 'header' | 'footer' | 'img';
+    /** CSS class */
+    className?: string;
+    /** Inline styles */
+    style?: CSSProperties;
+}
+/**
+ * SharedElement - Mark an element for shared element transitions
+ *
+ * @example
+ * ```tsx
+ * // On list page
+ * <SharedElement name={`product-${product.id}`}>
+ *   <img src={product.image} />
+ * </SharedElement>
+ *
+ * // On detail page
+ * <SharedElement name={`product-${product.id}`}>
+ *   <img src={product.image} />
+ * </SharedElement>
+ * ```
+ */
+declare const SharedElement: FC<SharedElementProps>;
+interface TransitionLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Transition type for this navigation */
+    transition?: TransitionPreset | CustomTransition | false;
+    /** Replace instead of push */
+    replace?: boolean;
+    /** Prefetch on hover */
+    prefetch?: boolean;
+}
+/**
+ * TransitionLink - Link component with transition support
+ *
+ * Use with @flightdev/router or wrap your router's Link component.
+ *
+ * @example
+ * ```tsx
+ * <TransitionLink href="/about" transition="slide-left">
+ *   About Us
+ * </TransitionLink>
+ * ```
+ */
+declare const TransitionLink: FC<TransitionLinkProps>;
+
+export { PageTransition, type PageTransitionProps, SharedElement, type SharedElementProps, Transition, type TransitionElementProps, TransitionLink, type TransitionLinkProps, TransitionProvider, type TransitionProviderProps, useIsTransitioning, useReducedMotion, useTransition, useTransitionDirection, useTransitionState };

package/dist/adapters/react/index.js

@@ -0,0 +1,261 @@
+import { createTransitionManager, getTransitionManager } from '../../chunk-X2A7XWYR.js';
+import { prefersReducedMotion } from '../../chunk-OV3U5STU.js';
+import { createContext, useRef, useState, useEffect, useMemo, useContext, createElement, useCallback } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var TransitionContext = createContext(null);
+var TransitionProvider = ({
+  children,
+  config,
+  manager: customManager
+}) => {
+  const managerRef = useRef(null);
+  if (!managerRef.current) {
+    managerRef.current = customManager ?? createTransitionManager(config);
+  }
+  const manager = managerRef.current;
+  const [state, setState] = useState(manager.getState());
+  useEffect(() => {
+    const unsubscribe = manager.subscribe((newState) => {
+      setState(newState);
+    });
+    return unsubscribe;
+  }, [manager]);
+  useEffect(() => {
+    if (config) {
+      manager.configure(config);
+    }
+  }, [config, manager]);
+  useEffect(() => {
+    return () => {
+      if (!customManager) {
+        manager.destroy();
+      }
+    };
+  }, [manager, customManager]);
+  const value = useMemo(() => ({
+    state,
+    manager,
+    isEnabled: manager.isEnabled(),
+    isViewTransitionSupported: manager.isViewTransitionSupported(),
+    startTransition: (to, pageConfig) => manager.startPageTransition(to, pageConfig),
+    skipTransition: () => manager.skipTransition()
+  }), [state, manager]);
+  return /* @__PURE__ */ jsx(TransitionContext.Provider, { value, children });
+};
+function useTransition() {
+  const context = useContext(TransitionContext);
+  if (!context) {
+    const manager = getTransitionManager();
+    return {
+      state: manager.getState(),
+      manager,
+      isEnabled: manager.isEnabled(),
+      isViewTransitionSupported: manager.isViewTransitionSupported(),
+      startTransition: (to, config) => manager.startPageTransition(to, config),
+      skipTransition: () => manager.skipTransition()
+    };
+  }
+  return context;
+}
+function useTransitionState() {
+  const { state } = useTransition();
+  return state;
+}
+function useIsTransitioning() {
+  const { state } = useTransition();
+  return state.isTransitioning;
+}
+function useTransitionDirection() {
+  const { state } = useTransition();
+  return state.direction;
+}
+function useReducedMotion() {
+  const [reduced, setReduced] = useState(() => prefersReducedMotion());
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handler = (event) => {
+      setReduced(event.matches);
+    };
+    mediaQuery.addEventListener("change", handler);
+    return () => mediaQuery.removeEventListener("change", handler);
+  }, []);
+  return reduced;
+}
+var PageTransition = ({
+  children,
+  type,
+  duration,
+  mode = "out-in",
+  onStart,
+  onEnd,
+  className,
+  style
+}) => {
+  const { state } = useTransition();
+  const containerRef = useRef(null);
+  useEffect(() => {
+    if (state.isTransitioning && state.phase === "leaving") {
+      onStart?.();
+    }
+    if (!state.isTransitioning && state.phase === "idle") {
+      onEnd?.();
+    }
+  }, [state.isTransitioning, state.phase, onStart, onEnd]);
+  const transitionClass = useMemo(() => {
+    const classes = ["flight-page-transition"];
+    if (className) {
+      classes.push(className);
+    }
+    if (state.isTransitioning) {
+      classes.push("flight-transitioning");
+      classes.push(`flight-transition-${state.phase}`);
+      classes.push(`flight-direction-${state.direction}`);
+    }
+    return classes.join(" ");
+  }, [className, state.isTransitioning, state.phase, state.direction]);
+  const inlineStyle = useMemo(() => {
+    const styles = { ...style };
+    if (duration !== void 0) {
+      styles["--flight-transition-duration"] = `${duration}ms`;
+    }
+    if (type && typeof type === "string") {
+      styles["--flight-transition-type"] = type;
+    }
+    return styles;
+  }, [style, duration, type]);
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: transitionClass, style: inlineStyle, children });
+};
+var Transition = ({
+  children,
+  show,
+  type = "fade",
+  duration,
+  appear = false,
+  unmountOnHide = true,
+  onEnter,
+  onEnterComplete,
+  onLeave,
+  onLeaveComplete,
+  as: Component = "div",
+  className,
+  style
+}) => {
+  const [shouldRender, setShouldRender] = useState(show);
+  const [phase, setPhase] = useState(
+    show ? "entered" : "left"
+  );
+  const isInitialMount = useRef(true);
+  useEffect(() => {
+    const isMount = isInitialMount.current;
+    isInitialMount.current = false;
+    if (show) {
+      setShouldRender(true);
+      if (!isMount || appear) {
+        setPhase("entering");
+        onEnter?.();
+        const timer = setTimeout(() => {
+          setPhase("entered");
+          onEnterComplete?.();
+        }, duration ?? 200);
+        return () => clearTimeout(timer);
+      } else {
+        setPhase("entered");
+      }
+    } else {
+      setPhase("leaving");
+      onLeave?.();
+      const timer = setTimeout(() => {
+        setPhase("left");
+        onLeaveComplete?.();
+        if (unmountOnHide) {
+          setShouldRender(false);
+        }
+      }, duration ?? 200);
+      return () => clearTimeout(timer);
+    }
+  }, [show, appear, duration, unmountOnHide, onEnter, onEnterComplete, onLeave, onLeaveComplete]);
+  if (!shouldRender) {
+    return null;
+  }
+  const transitionClass = [
+    "flight-transition",
+    `flight-transition-${phase}`,
+    typeof type === "string" ? `flight-transition-${type}` : void 0,
+    className
+  ].filter(Boolean).join(" ");
+  const inlineStyle = {
+    ...style
+  };
+  if (duration !== void 0) {
+    inlineStyle["--flight-transition-duration"] = `${duration}ms`;
+  }
+  return createElement(
+    Component,
+    { className: transitionClass, style: inlineStyle },
+    children
+  );
+};
+var SharedElement = ({
+  children,
+  name,
+  as: Component = "div",
+  className,
+  style
+}) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    const element = ref.current;
+    if (element) {
+      element.style.viewTransitionName = name;
+      return () => {
+        element.style.viewTransitionName = "";
+      };
+    }
+  }, [name]);
+  return createElement(
+    Component,
+    {
+      ref,
+      className,
+      style,
+      "data-transition-name": name
+    },
+    children
+  );
+};
+var TransitionLink = ({
+  children,
+  href,
+  transition,
+  replace = false,
+  prefetch = false,
+  onClick,
+  ...props
+}) => {
+  const { startTransition, manager } = useTransition();
+  const handleClick = useCallback(async (e) => {
+    onClick?.(e);
+    if (e.defaultPrevented) return;
+    if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+      return;
+    }
+    if (href && !href.startsWith("/") && !href.startsWith(window.location.origin)) {
+      return;
+    }
+    e.preventDefault();
+    const targetPath = href?.startsWith("/") ? href : new URL(href ?? "", window.location.origin).pathname;
+    await startTransition(targetPath, transition !== void 0 ? { default: transition } : void 0);
+    if (replace) {
+      window.history.replaceState({}, "", targetPath);
+    } else {
+      window.history.pushState({}, "", targetPath);
+    }
+    window.dispatchEvent(new PopStateEvent("popstate"));
+  }, [href, transition, replace, onClick, startTransition]);
+  return /* @__PURE__ */ jsx("a", { href, onClick: handleClick, ...props, children });
+};
+
+export { PageTransition, SharedElement, Transition, TransitionLink, TransitionProvider, useIsTransitioning, useReducedMotion, useTransition, useTransitionDirection, useTransitionState };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/adapters/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/adapters/react/components.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\r\n * @flightdev/transitions - React Adapter\r\n * \r\n * React components and hooks for Flight Transitions.\r\n */\r\n\r\n'use client';\r\n\r\nimport React, {\r\n    createContext,\r\n    useContext,\r\n    useState,\r\n    useEffect,\r\n    useCallback,\r\n    useRef,\r\n    useMemo,\r\n    createElement,\r\n    type ReactNode,\r\n    type FC,\r\n    type CSSProperties,\r\n    type ElementType,\r\n} from 'react';\r\n\r\nimport type {\r\n    TransitionsConfig,\r\n    TransitionState,\r\n    TransitionPreset,\r\n    CustomTransition,\r\n    PageTransitionConfig,\r\n} from '../../core/types';\r\nimport {\r\n    createTransitionManager,\r\n    getTransitionManager,\r\n    type TransitionManager,\r\n} from '../../core/transition-manager';\r\nimport { prefersReducedMotion } from '../../core/animation-engine';\r\n\r\n// =============================================================================\r\n// CONTEXT\r\n// =============================================================================\r\n\r\ninterface TransitionContextValue {\r\n    /** Current transition state */\r\n    state: TransitionState;\r\n    /** Transition manager instance */\r\n    manager: TransitionManager;\r\n    /** Whether transitions are enabled */\r\n    isEnabled: boolean;\r\n    /** Whether View Transitions API is supported */\r\n    isViewTransitionSupported: boolean;\r\n    /** Start a page transition programmatically */\r\n    startTransition: (to: string, config?: PageTransitionConfig) => Promise<void>;\r\n    /** Skip the current transition */\r\n    skipTransition: () => void;\r\n}\r\n\r\nconst TransitionContext = createContext<TransitionContextValue | null>(null);\r\n\r\n// =============================================================================\r\n// PROVIDER\r\n// =============================================================================\r\n\r\nexport interface TransitionProviderProps {\r\n    children: ReactNode;\r\n    /** Initial transition configuration */\r\n    config?: TransitionsConfig;\r\n    /** Use a custom transition manager */\r\n    manager?: TransitionManager;\r\n}\r\n\r\n/**\r\n * TransitionProvider - Provides transition context to the app\r\n * \r\n * @example\r\n * ```tsx\r\n * // In your root layout\r\n * import { TransitionProvider } from '@flightdev/transitions/react';\r\n * \r\n * export default function RootLayout({ children }) {\r\n *   return (\r\n *     <TransitionProvider config={{ pageTransition: 'fade' }}>\r\n *       {children}\r\n *     </TransitionProvider>\r\n *   );\r\n * }\r\n * ```\r\n */\r\nexport const TransitionProvider: FC<TransitionProviderProps> = ({\r\n    children,\r\n    config,\r\n    manager: customManager,\r\n}) => {\r\n    // Create or use provided manager\r\n    const managerRef = useRef<TransitionManager | null>(null);\r\n\r\n    if (!managerRef.current) {\r\n        managerRef.current = customManager ?? createTransitionManager(config);\r\n    }\r\n\r\n    const manager = managerRef.current;\r\n\r\n    // Track transition state\r\n    const [state, setState] = useState<TransitionState>(manager.getState());\r\n\r\n    // Subscribe to state changes\r\n    useEffect(() => {\r\n        const unsubscribe = manager.subscribe((newState) => {\r\n            setState(newState);\r\n        });\r\n        return unsubscribe;\r\n    }, [manager]);\r\n\r\n    // Update config when it changes\r\n    useEffect(() => {\r\n        if (config) {\r\n            manager.configure(config);\r\n        }\r\n    }, [config, manager]);\r\n\r\n    // Cleanup on unmount\r\n    useEffect(() => {\r\n        return () => {\r\n            if (!customManager) {\r\n                manager.destroy();\r\n            }\r\n        };\r\n    }, [manager, customManager]);\r\n\r\n    const value = useMemo<TransitionContextValue>(() => ({\r\n        state,\r\n        manager,\r\n        isEnabled: manager.isEnabled(),\r\n        isViewTransitionSupported: manager.isViewTransitionSupported(),\r\n        startTransition: (to, pageConfig) => manager.startPageTransition(to, pageConfig),\r\n        skipTransition: () => manager.skipTransition(),\r\n    }), [state, manager]);\r\n\r\n    return (\r\n        <TransitionContext.Provider value={value}>\r\n            {children}\r\n        </TransitionContext.Provider>\r\n    );\r\n};\r\n\r\n// =============================================================================\r\n// HOOKS\r\n// =============================================================================\r\n\r\n/**\r\n * useTransition - Access the transition context\r\n * \r\n * @example\r\n * ```tsx\r\n * function MyComponent() {\r\n *   const { state, startTransition } = useTransition();\r\n *   \r\n *   return (\r\n *     <div>\r\n *       {state.isTransitioning && <LoadingSpinner />}\r\n *       <button onClick={() => startTransition('/about')}>\r\n *         Go to About\r\n *       </button>\r\n *     </div>\r\n *   );\r\n * }\r\n * ```\r\n */\r\nexport function useTransition(): TransitionContextValue {\r\n    const context = useContext(TransitionContext);\r\n\r\n    if (!context) {\r\n        // Return a fallback for components outside provider\r\n        const manager = getTransitionManager();\r\n        return {\r\n            state: manager.getState(),\r\n            manager,\r\n            isEnabled: manager.isEnabled(),\r\n            isViewTransitionSupported: manager.isViewTransitionSupported(),\r\n            startTransition: (to, config) => manager.startPageTransition(to, config),\r\n            skipTransition: () => manager.skipTransition(),\r\n        };\r\n    }\r\n\r\n    return context;\r\n}\r\n\r\n/**\r\n * useTransitionState - Get just the transition state\r\n */\r\nexport function useTransitionState(): TransitionState {\r\n    const { state } = useTransition();\r\n    return state;\r\n}\r\n\r\n/**\r\n * useIsTransitioning - Check if a transition is in progress\r\n */\r\nexport function useIsTransitioning(): boolean {\r\n    const { state } = useTransition();\r\n    return state.isTransitioning;\r\n}\r\n\r\n/**\r\n * useTransitionDirection - Get the current transition direction\r\n */\r\nexport function useTransitionDirection(): 'forward' | 'back' | 'auto' {\r\n    const { state } = useTransition();\r\n    return state.direction;\r\n}\r\n\r\n/**\r\n * useReducedMotion - Check if user prefers reduced motion\r\n */\r\nexport function useReducedMotion(): boolean {\r\n    const [reduced, setReduced] = useState(() => prefersReducedMotion());\r\n\r\n    useEffect(() => {\r\n        const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');\r\n\r\n        const handler = (event: MediaQueryListEvent) => {\r\n            setReduced(event.matches);\r\n        };\r\n\r\n        mediaQuery.addEventListener('change', handler);\r\n        return () => mediaQuery.removeEventListener('change', handler);\r\n    }, []);\r\n\r\n    return reduced;\r\n}\r\n\r\n// =============================================================================\r\n// PAGE TRANSITION COMPONENT\r\n// =============================================================================\r\n\r\nexport interface PageTransitionProps {\r\n    children: ReactNode;\r\n    /** Transition type (overrides context config) */\r\n    type?: TransitionPreset | CustomTransition;\r\n    /** Duration override */\r\n    duration?: number;\r\n    /** Mode for sequencing enter/leave */\r\n    mode?: 'in-out' | 'out-in' | 'simultaneous';\r\n    /** Callback when transition starts */\r\n    onStart?: () => void;\r\n    /** Callback when transition ends */\r\n    onEnd?: () => void;\r\n    /** CSS class for the wrapper */\r\n    className?: string;\r\n    /** Inline styles for the wrapper */\r\n    style?: CSSProperties;\r\n}\r\n\r\n/**\r\n * PageTransition - Wraps page content with transition animations\r\n * \r\n * @example\r\n * ```tsx\r\n * // In a layout\r\n * export default function Layout({ children }) {\r\n *   return (\r\n *     <PageTransition type=\"slide-left\">\r\n *       {children}\r\n *     </PageTransition>\r\n *   );\r\n * }\r\n * ```\r\n */\r\nexport const PageTransition: FC<PageTransitionProps> = ({\r\n    children,\r\n    type,\r\n    duration,\r\n    mode = 'out-in',\r\n    onStart,\r\n    onEnd,\r\n    className,\r\n    style,\r\n}) => {\r\n    const { state } = useTransition();\r\n    const containerRef = useRef<HTMLDivElement>(null);\r\n\r\n    // Call callbacks\r\n    useEffect(() => {\r\n        if (state.isTransitioning && state.phase === 'leaving') {\r\n            onStart?.();\r\n        }\r\n        if (!state.isTransitioning && state.phase === 'idle') {\r\n            onEnd?.();\r\n        }\r\n    }, [state.isTransitioning, state.phase, onStart, onEnd]);\r\n\r\n    // Build transition class\r\n    const transitionClass = useMemo(() => {\r\n        const classes = ['flight-page-transition'];\r\n\r\n        if (className) {\r\n            classes.push(className);\r\n        }\r\n\r\n        if (state.isTransitioning) {\r\n            classes.push('flight-transitioning');\r\n            classes.push(`flight-transition-${state.phase}`);\r\n            classes.push(`flight-direction-${state.direction}`);\r\n        }\r\n\r\n        return classes.join(' ');\r\n    }, [className, state.isTransitioning, state.phase, state.direction]);\r\n\r\n    // Build inline styles with CSS custom properties\r\n    const inlineStyle = useMemo<CSSProperties>(() => {\r\n        const styles: CSSProperties = { ...style };\r\n\r\n        if (duration !== undefined) {\r\n            (styles as Record<string, unknown>)['--flight-transition-duration'] = `${duration}ms`;\r\n        }\r\n\r\n        if (type && typeof type === 'string') {\r\n            (styles as Record<string, unknown>)['--flight-transition-type'] = type;\r\n        }\r\n\r\n        return styles;\r\n    }, [style, duration, type]);\r\n\r\n    return (\r\n        <div ref={containerRef} className={transitionClass} style={inlineStyle}>\r\n            {children}\r\n        </div>\r\n    );\r\n};\r\n\r\n// =============================================================================\r\n// TRANSITION COMPONENT (for elements)\r\n// =============================================================================\r\n\r\nexport interface TransitionElementProps {\r\n    children: ReactNode;\r\n    /** Show or hide the element */\r\n    show: boolean;\r\n    /** Transition type */\r\n    type?: TransitionPreset | CustomTransition;\r\n    /** Duration override */\r\n    duration?: number;\r\n    /** Animate on initial mount */\r\n    appear?: boolean;\r\n    /** Unmount when hidden */\r\n    unmountOnHide?: boolean;\r\n    /** Callbacks */\r\n    onEnter?: () => void;\r\n    onEnterComplete?: () => void;\r\n    onLeave?: () => void;\r\n    onLeaveComplete?: () => void;\r\n    /** Wrapper element tag name */\r\n    as?: 'div' | 'span' | 'section' | 'article' | 'main' | 'aside' | 'header' | 'footer' | 'nav';\r\n    /** CSS class */\r\n    className?: string;\r\n    /** Inline styles */\r\n    style?: CSSProperties;\r\n}\r\n\r\n/**\r\n * Transition - Animate element enter/leave\r\n * \r\n * @example\r\n * ```tsx\r\n * function Modal({ isOpen, onClose, children }) {\r\n *   return (\r\n *     <Transition show={isOpen} type=\"fade-scale\">\r\n *       <div className=\"modal\">\r\n *         {children}\r\n *       </div>\r\n *     </Transition>\r\n *   );\r\n * }\r\n * ```\r\n */\r\nexport const Transition: FC<TransitionElementProps> = ({\r\n    children,\r\n    show,\r\n    type = 'fade',\r\n    duration,\r\n    appear = false,\r\n    unmountOnHide = true,\r\n    onEnter,\r\n    onEnterComplete,\r\n    onLeave,\r\n    onLeaveComplete,\r\n    as: Component = 'div',\r\n    className,\r\n    style,\r\n}) => {\r\n    const [shouldRender, setShouldRender] = useState(show);\r\n    const [phase, setPhase] = useState<'entering' | 'entered' | 'leaving' | 'left'>(\r\n        show ? 'entered' : 'left'\r\n    );\r\n    const isInitialMount = useRef(true);\r\n\r\n    useEffect(() => {\r\n        const isMount = isInitialMount.current;\r\n        isInitialMount.current = false;\r\n\r\n        if (show) {\r\n            setShouldRender(true);\r\n\r\n            if (!isMount || appear) {\r\n                setPhase('entering');\r\n                onEnter?.();\r\n\r\n                const timer = setTimeout(() => {\r\n                    setPhase('entered');\r\n                    onEnterComplete?.();\r\n                }, duration ?? 200);\r\n\r\n                return () => clearTimeout(timer);\r\n            } else {\r\n                setPhase('entered');\r\n            }\r\n        } else {\r\n            setPhase('leaving');\r\n            onLeave?.();\r\n\r\n            const timer = setTimeout(() => {\r\n                setPhase('left');\r\n                onLeaveComplete?.();\r\n                if (unmountOnHide) {\r\n                    setShouldRender(false);\r\n                }\r\n            }, duration ?? 200);\r\n\r\n            return () => clearTimeout(timer);\r\n        }\r\n    }, [show, appear, duration, unmountOnHide, onEnter, onEnterComplete, onLeave, onLeaveComplete]);\r\n\r\n    if (!shouldRender) {\r\n        return null;\r\n    }\r\n\r\n    const transitionClass = [\r\n        'flight-transition',\r\n        `flight-transition-${phase}`,\r\n        typeof type === 'string' ? `flight-transition-${type}` : undefined,\r\n        className,\r\n    ].filter(Boolean).join(' ');\r\n\r\n    const inlineStyle: CSSProperties = {\r\n        ...style,\r\n    };\r\n\r\n    if (duration !== undefined) {\r\n        (inlineStyle as Record<string, unknown>)['--flight-transition-duration'] = `${duration}ms`;\r\n    }\r\n\r\n    return createElement(\r\n        Component,\r\n        { className: transitionClass, style: inlineStyle },\r\n        children\r\n    );\r\n};\r\n\r\n// =============================================================================\r\n// SHARED ELEMENT\r\n// =============================================================================\r\n\r\nexport interface SharedElementProps {\r\n    children: ReactNode;\r\n    /** Unique name for matching across pages */\r\n    name: string;\r\n    /** Wrapper element tag name */\r\n    as?: 'div' | 'span' | 'section' | 'article' | 'main' | 'aside' | 'header' | 'footer' | 'img';\r\n    /** CSS class */\r\n    className?: string;\r\n    /** Inline styles */\r\n    style?: CSSProperties;\r\n}\r\n\r\n/**\r\n * SharedElement - Mark an element for shared element transitions\r\n * \r\n * @example\r\n * ```tsx\r\n * // On list page\r\n * <SharedElement name={`product-${product.id}`}>\r\n *   <img src={product.image} />\r\n * </SharedElement>\r\n * \r\n * // On detail page\r\n * <SharedElement name={`product-${product.id}`}>\r\n *   <img src={product.image} />\r\n * </SharedElement>\r\n * ```\r\n */\r\nexport const SharedElement: FC<SharedElementProps> = ({\r\n    children,\r\n    name,\r\n    as: Component = 'div',\r\n    className,\r\n    style,\r\n}) => {\r\n    const ref = useRef<HTMLElement>(null);\r\n\r\n    useEffect(() => {\r\n        const element = ref.current;\r\n        if (element) {\r\n            // Set view-transition-name for native View Transitions API\r\n            element.style.viewTransitionName = name;\r\n\r\n            return () => {\r\n                element.style.viewTransitionName = '';\r\n            };\r\n        }\r\n    }, [name]);\r\n\r\n    return createElement(\r\n        Component,\r\n        {\r\n            ref: ref as React.Ref<HTMLDivElement>,\r\n            className,\r\n            style,\r\n            'data-transition-name': name,\r\n        },\r\n        children\r\n    );\r\n};\r\n\r\n// =============================================================================\r\n// ANIMATED LINK\r\n// =============================================================================\r\n\r\nexport interface TransitionLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\r\n    /** Transition type for this navigation */\r\n    transition?: TransitionPreset | CustomTransition | false;\r\n    /** Replace instead of push */\r\n    replace?: boolean;\r\n    /** Prefetch on hover */\r\n    prefetch?: boolean;\r\n}\r\n\r\n/**\r\n * TransitionLink - Link component with transition support\r\n * \r\n * Use with @flightdev/router or wrap your router's Link component.\r\n * \r\n * @example\r\n * ```tsx\r\n * <TransitionLink href=\"/about\" transition=\"slide-left\">\r\n *   About Us\r\n * </TransitionLink>\r\n * ```\r\n */\r\nexport const TransitionLink: FC<TransitionLinkProps> = ({\r\n    children,\r\n    href,\r\n    transition,\r\n    replace = false,\r\n    prefetch = false,\r\n    onClick,\r\n    ...props\r\n}) => {\r\n    const { startTransition, manager } = useTransition();\r\n\r\n    const handleClick = useCallback(async (e: React.MouseEvent<HTMLAnchorElement>) => {\r\n        // Call original onClick if provided\r\n        onClick?.(e);\r\n\r\n        // If default prevented, don't handle\r\n        if (e.defaultPrevented) return;\r\n\r\n        // Only handle left clicks without modifiers\r\n        if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {\r\n            return;\r\n        }\r\n\r\n        // Only handle same-origin links\r\n        if (href && !href.startsWith('/') && !href.startsWith(window.location.origin)) {\r\n            return;\r\n        }\r\n\r\n        // Prevent default navigation\r\n        e.preventDefault();\r\n\r\n        const targetPath = href?.startsWith('/')\r\n            ? href\r\n            : new URL(href ?? '', window.location.origin).pathname;\r\n\r\n        // Start transition\r\n        await startTransition(targetPath, transition !== undefined ? { default: transition } : undefined);\r\n\r\n        // Perform actual navigation\r\n        if (replace) {\r\n            window.history.replaceState({}, '', targetPath);\r\n        } else {\r\n            window.history.pushState({}, '', targetPath);\r\n        }\r\n\r\n        // Dispatch popstate for router to pick up\r\n        window.dispatchEvent(new PopStateEvent('popstate'));\r\n    }, [href, transition, replace, onClick, startTransition]);\r\n\r\n    return (\r\n        <a href={href} onClick={handleClick} {...props}>\r\n            {children}\r\n        </a>\r\n    );\r\n};\r\n"]}

package/dist/adapters/solid/index.d.ts

@@ -0,0 +1,5 @@
+export { i as isViewTransitionSupported, s as startViewTransition } from '../../view-transition-LSN_PSbm.js';
+export { c as createTransitionManager, g as getTransitionManager } from '../../transition-manager-QWm4OSFw.js';
+export { definePageTransition, executePageTransition } from '../../page/index.js';
+export { registerSharedElement, unregisterSharedElement } from '../../layout/index.js';
+import '../../types-BA4L37s4.js';

package/dist/adapters/solid/index.js

@@ -0,0 +1,9 @@
+import '../../chunk-W7HSR35B.js';
+import '../../chunk-XLVYHPII.js';
+export { definePageTransition, executePageTransition } from '../../chunk-SPUGO5I5.js';
+export { registerSharedElement, unregisterSharedElement } from '../../chunk-ZI6E7GNQ.js';
+import '../../chunk-QSB65CTV.js';
+export { createTransitionManager, getTransitionManager, isViewTransitionSupported, startViewTransition } from '../../chunk-X2A7XWYR.js';
+import '../../chunk-OV3U5STU.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/adapters/solid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/adapters/svelte/index.d.ts

@@ -0,0 +1,5 @@
+export { i as isViewTransitionSupported, s as startViewTransition } from '../../view-transition-LSN_PSbm.js';
+export { c as createTransitionManager, g as getTransitionManager } from '../../transition-manager-QWm4OSFw.js';
+export { definePageTransition, executePageTransition } from '../../page/index.js';
+export { registerSharedElement, unregisterSharedElement } from '../../layout/index.js';
+import '../../types-BA4L37s4.js';

package/dist/adapters/svelte/index.js

@@ -0,0 +1,9 @@
+import '../../chunk-W7HSR35B.js';
+import '../../chunk-XLVYHPII.js';
+export { definePageTransition, executePageTransition } from '../../chunk-SPUGO5I5.js';
+export { registerSharedElement, unregisterSharedElement } from '../../chunk-ZI6E7GNQ.js';
+import '../../chunk-QSB65CTV.js';
+export { createTransitionManager, getTransitionManager, isViewTransitionSupported, startViewTransition } from '../../chunk-X2A7XWYR.js';
+import '../../chunk-OV3U5STU.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/adapters/svelte/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}