@capgo/capacitor-transitions 8.0.1

package/dist/index.d.ts

@@ -0,0 +1,734 @@
+/**
+ * Core types for @capgo/capacitor-transitions
+ * Framework-agnostic page transitions for Capacitor apps
+ */
+/** Direction of the navigation transition */
+type TransitionDirection = 'forward' | 'back' | 'root' | 'none';
+/** Platform-specific animation styles */
+type TransitionPlatform = 'ios' | 'android' | 'auto';
+/** Runtime platform reported by Capacitor when available */
+type NativePlatform = 'ios' | 'android' | 'web' | 'unknown';
+/** Whether the edge swipe-back gesture is enabled, disabled, or native-detected */
+type SwipeGestureOption = boolean | 'auto';
+/** Which parts of the page to animate */
+type TransitionTarget = 'header' | 'content' | 'footer' | 'all';
+/** Animation easing presets */
+type TransitionEasing = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'ios' | 'android' | string;
+/** Configuration for a single transition animation */
+interface TransitionConfig {
+    /** Duration in milliseconds (default: 540 for iOS, 280/200 for Android forward/back) */
+    duration?: number;
+    /** Easing function (default: 'ios' or 'android' based on platform) */
+    easing?: TransitionEasing;
+    /** Direction of transition */
+    direction?: TransitionDirection;
+    /** Which elements to animate (default: 'all') */
+    targets?: TransitionTarget[];
+    /** Custom animation keyframes for entering element */
+    enterKeyframes?: Keyframe[];
+    /** Custom animation keyframes for leaving element */
+    leaveKeyframes?: Keyframe[];
+    /** Callback before animation starts */
+    onStart?: () => void;
+    /** Callback after animation completes */
+    onComplete?: () => void;
+    /** Whether to use View Transitions API when available (default: false) */
+    useViewTransitions?: boolean;
+}
+/** Capacitor native runtime detection result */
+interface NativePlatformInfo {
+    /** Platform name from Capacitor.getPlatform() when available */
+    platform: NativePlatform;
+    /** Whether Capacitor reports a native installed app runtime */
+    isNative: boolean;
+}
+/** Resolved platform type (excludes 'auto') */
+type ResolvedPlatform = 'ios' | 'android';
+/** Global configuration for the transition system */
+interface TransitionGlobalConfig {
+    /** Default platform style (default: 'auto') */
+    platform?: TransitionPlatform;
+    /** Default duration in ms */
+    duration?: number;
+    /** Default easing */
+    easing?: TransitionEasing;
+    /** Whether to use View Transitions API (default: false) */
+    useViewTransitions?: boolean;
+    /** Custom platform detection function */
+    detectPlatform?: () => ResolvedPlatform;
+}
+/** State of a page in the navigation stack */
+interface PageState {
+    /** Unique identifier for the page */
+    id: string;
+    /** The page element */
+    element: HTMLElement;
+    /** Header element if present */
+    header?: HTMLElement;
+    /** Content element if present */
+    content?: HTMLElement;
+    /** Footer element if present */
+    footer?: HTMLElement;
+    /** Whether this page is currently visible */
+    isActive: boolean;
+    /** Scroll position to restore */
+    scrollPosition?: {
+        x: number;
+        y: number;
+    };
+    /** Any custom data attached to this page */
+    data?: Record<string, unknown>;
+}
+/** Navigation event details */
+interface NavigationEvent {
+    /** Direction of navigation */
+    direction: TransitionDirection;
+    /** Page being navigated from */
+    from?: PageState;
+    /** Page being navigated to */
+    to: PageState;
+    /** Whether animation should be skipped */
+    skipAnimation?: boolean;
+}
+/** Lifecycle hooks for page transitions */
+interface TransitionLifecycle {
+    /** Called before the page becomes visible (before animation) */
+    onWillEnter?: (event: NavigationEvent) => void | Promise<void>;
+    /** Called after the page becomes visible (after animation) */
+    onDidEnter?: (event: NavigationEvent) => void | Promise<void>;
+    /** Called before the page leaves (before animation) */
+    onWillLeave?: (event: NavigationEvent) => void | Promise<void>;
+    /** Called after the page leaves (after animation) */
+    onDidLeave?: (event: NavigationEvent) => void | Promise<void>;
+}
+/** Animation builder function signature (similar to Ionic) */
+type AnimationBuilder = (baseElement: HTMLElement, options: TransitionAnimationOptions) => Animation | Animation[];
+/** Options passed to animation builders */
+interface TransitionAnimationOptions {
+    /** Element entering the view */
+    enteringEl: HTMLElement;
+    /** Element leaving the view */
+    leavingEl?: HTMLElement;
+    /** Direction of the transition */
+    direction: TransitionDirection;
+    /** Duration in ms */
+    duration: number;
+    /** Easing function */
+    easing: string;
+    /** Whether this is a back navigation */
+    isBack: boolean;
+}
+/** Result of a transition animation */
+interface TransitionResult {
+    /** Whether the transition completed successfully */
+    success: boolean;
+    /** Duration of the transition in ms */
+    duration: number;
+    /** Any error that occurred */
+    error?: Error;
+}
+/** Router outlet options */
+interface RouterOutletOptions {
+    /** Keep pages in DOM after navigating away (default: true) */
+    keepInDom?: boolean;
+    /** Maximum number of pages to keep in DOM (default: 10) */
+    maxCachedPages?: number;
+    /** Custom animation builder */
+    animation?: AnimationBuilder;
+    /** Transition configuration */
+    transition?: TransitionConfig;
+    /** Edge swipe-back gesture support (default: 'auto', native iOS only) */
+    swipeGesture?: SwipeGestureOption;
+}
+/** Page component options */
+interface PageOptions {
+    /** Unique key for this page (used for caching) */
+    key?: string;
+    /** Whether to cache scroll position (default: true) */
+    cacheScroll?: boolean;
+    /** Lifecycle hooks */
+    lifecycle?: TransitionLifecycle;
+}
+
+/**
+ * Transition Controller
+ * Orchestrates page transitions and manages the navigation stack
+ */
+
+/**
+ * Transition Controller
+ * Central manager for all page transitions
+ */
+declare class TransitionController {
+    private config;
+    private pageStack;
+    private currentAnimations;
+    private isAnimating;
+    private interactiveBackTransition;
+    private lifecycleCallbacks;
+    constructor(config?: TransitionGlobalConfig);
+    /**
+     * Get the resolved platform
+     */
+    get platform(): 'ios' | 'android';
+    /**
+     * Get the current page state
+     */
+    get currentPage(): PageState | undefined;
+    /**
+     * Get the page stack
+     */
+    get stack(): readonly PageState[];
+    /**
+     * Check if an animation is in progress
+     */
+    get animating(): boolean;
+    /**
+     * Update global configuration
+     */
+    configure(config: Partial<TransitionGlobalConfig>): void;
+    /**
+     * Register lifecycle callbacks for a page
+     */
+    registerLifecycle(pageId: string, lifecycle: TransitionLifecycle): void;
+    /**
+     * Unregister lifecycle callbacks for a page
+     */
+    unregisterLifecycle(pageId: string): void;
+    /**
+     * Create a page state from an element
+     */
+    createPageState(element: HTMLElement, options?: {
+        id?: string;
+        data?: Record<string, unknown>;
+    }): PageState;
+    /**
+     * Navigate to a new page (push)
+     */
+    push(enteringEl: HTMLElement, config?: TransitionConfig): Promise<TransitionResult>;
+    /**
+     * Navigate back (pop)
+     */
+    pop(config?: TransitionConfig): Promise<TransitionResult>;
+    /**
+     * Start an interactive iOS-style back transition using the cached previous page.
+     */
+    beginInteractiveBack(config?: TransitionConfig): boolean;
+    /**
+     * Move the current interactive back transition to a progress step from 0 to 1.
+     */
+    stepInteractiveBack(step: number): void;
+    /**
+     * Complete or cancel the current interactive back transition.
+     */
+    endInteractiveBack(shouldComplete: boolean, releaseDuration: number, commitStack: boolean): Promise<void>;
+    /**
+     * Cancel the current interactive back transition immediately.
+     */
+    cancelInteractiveBack(): void;
+    /**
+     * Replace all pages with a new root
+     */
+    setRoot(enteringEl: HTMLElement, config?: TransitionConfig): Promise<TransitionResult>;
+    /**
+     * Main navigation method
+     */
+    navigate(enteringEl: HTMLElement, config?: TransitionConfig): Promise<TransitionResult>;
+    /**
+     * Navigate between two known page states
+     */
+    private navigateWithStates;
+    /**
+     * Update page visibility after animation
+     */
+    private updatePageVisibility;
+    private getAnimationDuration;
+    private playInteractiveAnimationsTo;
+    /**
+     * Resolve configured easing presets after platform/direction are known.
+     */
+    private resolveTransitionEasing;
+    /**
+     * Remove styles that should only exist while a page is actively transitioning.
+     */
+    private clearTransitionOnlyStyles;
+    private clearPagePartTransitionStyles;
+    /**
+     * Prepare entering/leaving elements for a View Transition capture.
+     * Entering page must be hidden in the "old" snapshot.
+     */
+    private prepareViewTransitionElements;
+    /**
+     * Assign view transition names to a page's layout parts.
+     */
+    private applyViewTransitionNames;
+    /**
+     * Clear view transition names for one or more page states.
+     */
+    private clearViewTransitionNames;
+    /**
+     * Clear view transition names from all known pages plus transient states.
+     */
+    private clearAllKnownViewTransitionNames;
+    /**
+     * Resolve page parts lazily to avoid timing issues with custom-element setup.
+     */
+    private resolvePageParts;
+    /**
+     * Save scroll position for a page
+     */
+    saveScrollPosition(pageId: string): void;
+    /**
+     * Restore scroll position for a page
+     */
+    restoreScrollPosition(pageId: string): void;
+    /**
+     * Remove a page from the stack (used when cleaning up)
+     */
+    removePage(pageId: string): void;
+    /**
+     * Clear all pages
+     */
+    clear(): void;
+}
+/**
+ * Get or create the default transition controller
+ */
+declare function getTransitionController(config?: TransitionGlobalConfig): TransitionController;
+/**
+ * Create a new transition controller
+ */
+declare function createTransitionController(config?: TransitionGlobalConfig): TransitionController;
+
+/**
+ * Cap Router Outlet
+ * A web component that manages page transitions
+ * Works with any framework's router
+ */
+
+/**
+ * Custom element for managing page transitions
+ * Usage: <cap-router-outlet></cap-router-outlet>
+ */
+declare class CapRouterOutlet extends HTMLElement {
+    private controller;
+    private options;
+    private observer;
+    private pendingPage;
+    private ignoredNodes;
+    private swipeGesturePointer;
+    private swipeGestureListenersActive;
+    private skipNextHistoryBackTransition;
+    private swipeBackDepth;
+    private lastNavigationHref;
+    private readonly swipeGestureEdgeWidth;
+    private readonly swipeGestureThreshold;
+    private readonly swipeGestureMinimumVelocity;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+    /**
+     * Handle DOM mutations (child additions/removals)
+     */
+    private handleMutations;
+    /**
+     * Initialize the first page without animation
+     */
+    private initializeFirstPage;
+    /**
+     * Handle a new page being added
+     */
+    private handleNewPage;
+    /**
+     * Clean up pages that are no longer needed
+     */
+    private cleanupOldPages;
+    /**
+     * Enforce the cache limit
+     */
+    private enforceCacheLimit;
+    /**
+     * Programmatic navigation - push a new page
+     */
+    push(page: HTMLElement, config?: TransitionConfig): Promise<void>;
+    /**
+     * Programmatic navigation - pop current page
+     */
+    pop(config?: TransitionConfig): Promise<void>;
+    /**
+     * Programmatic navigation - set root page
+     */
+    setRoot(page: HTMLElement, config?: TransitionConfig): Promise<void>;
+    /**
+     * Get the current page stack length
+     */
+    get stackLength(): number;
+    /**
+     * Check if we can go back
+     */
+    get canGoBack(): boolean;
+    /**
+     * Get whether edge swipe-back gesture is enabled.
+     */
+    get swipeGesture(): SwipeGestureOption;
+    /**
+     * Enable, disable, or auto-detect edge swipe-back gesture.
+     */
+    set swipeGesture(value: SwipeGestureOption);
+    /**
+     * Enable, disable, or auto-detect edge swipe-back gesture.
+     */
+    setSwipeGesture(value: SwipeGestureOption): void;
+    /**
+     * Get the transition controller for advanced usage
+     */
+    getController(): TransitionController;
+    /**
+     * Apply layout styles required for transition animations.
+     */
+    private stylePageForTransition;
+    private parseSwipeGestureAttribute;
+    private serializeSwipeGesture;
+    private updateSwipeGestureListeners;
+    private removeSwipeGestureListeners;
+    private isSwipeGestureEnabled;
+    private getCurrentNavigationHref;
+    private recordCompletedNavigation;
+    private canStartSwipeGesture;
+    private isRTL;
+    private getSwipeGestureDeltaX;
+    private isInteractiveSwipeTarget;
+    private hasScrollableInlineAncestor;
+    private handleSwipeGesturePointerDown;
+    private handleSwipeGesturePointerMove;
+    private handleSwipeGesturePointerEnd;
+    private handleSwipeGesturePointerCancel;
+    private cancelSwipeGesturePointer;
+    private releaseSwipeGesturePointer;
+    private cancelSwipeGesture;
+    private finishSwipeGestureBack;
+}
+
+/**
+ * Cap Page
+ * A container for page content with header, content, and footer slots
+ * Integrates with cap-router-outlet for transitions
+ */
+
+/**
+ * Custom element for a page container
+ * Usage:
+ * <cap-page>
+ *   <cap-header slot="header">...</cap-header>
+ *   <cap-content slot="content">...</cap-content>
+ *   <cap-footer slot="footer">...</cap-footer>
+ * </cap-page>
+ */
+declare class CapPage extends HTMLElement {
+    private _lifecycle;
+    private _isActive;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Mark child elements for transition controller
+     */
+    private markTransitionElements;
+    /**
+     * Set lifecycle callbacks
+     */
+    set lifecycle(callbacks: TransitionLifecycle);
+    get lifecycle(): TransitionLifecycle;
+    /**
+     * Check if page is active
+     */
+    get isActive(): boolean;
+    /**
+     * Called when page will enter view
+     */
+    willEnter(event: NavigationEvent): Promise<void>;
+    /**
+     * Called when page has entered view
+     */
+    didEnter(event: NavigationEvent): Promise<void>;
+    /**
+     * Called when page will leave view
+     */
+    willLeave(event: NavigationEvent): Promise<void>;
+    /**
+     * Called when page has left view
+     */
+    didLeave(event: NavigationEvent): Promise<void>;
+    /**
+     * Get the header element
+     */
+    get headerElement(): HTMLElement | null;
+    /**
+     * Get the content element
+     */
+    get contentElement(): HTMLElement | null;
+    /**
+     * Get the footer element
+     */
+    get footerElement(): HTMLElement | null;
+    /**
+     * Save scroll position
+     */
+    saveScrollPosition(): {
+        x: number;
+        y: number;
+    } | null;
+    /**
+     * Restore scroll position
+     */
+    restoreScrollPosition(position: {
+        x: number;
+        y: number;
+    }): void;
+}
+
+/**
+ * Cap Header
+ * A header container that participates in page transitions
+ * No styling opinions - just transition awareness
+ */
+/**
+ * Custom element for header content
+ * Usage: <cap-header>Your header content</cap-header>
+ */
+declare class CapHeader extends HTMLElement {
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+    /**
+     * Get the current height of the header
+     */
+    get height(): number;
+}
+
+/**
+ * Cap Content
+ * Main scrollable content area that participates in page transitions
+ * No styling opinions - just transition awareness and scroll management
+ */
+/**
+ * Custom element for main content
+ * Usage: <cap-content>Your content here</cap-content>
+ */
+declare class CapContent extends HTMLElement {
+    private _scrollPosition;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+    /**
+     * Handle scroll events
+     */
+    private handleScroll;
+    /**
+     * Get current scroll position
+     */
+    get scrollPosition(): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Save current scroll position
+     */
+    saveScrollPosition(): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Restore scroll position
+     */
+    restoreScrollPosition(position?: {
+        x: number;
+        y: number;
+    }): void;
+    /**
+     * Scroll to top
+     */
+    scrollToTop(smooth?: boolean): void;
+    /**
+     * Scroll to bottom
+     */
+    scrollToBottom(smooth?: boolean): void;
+    /**
+     * Scroll to element
+     */
+    scrollToElement(element: HTMLElement, smooth?: boolean): void;
+}
+
+/**
+ * Cap Footer
+ * A footer container that participates in page transitions
+ * No styling opinions - just transition awareness
+ */
+/**
+ * Custom element for footer content
+ * Usage: <cap-footer>Your footer content</cap-footer>
+ */
+declare class CapFooter extends HTMLElement {
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+    /**
+     * Get the current height of the footer
+     */
+    get height(): number;
+}
+
+/**
+ * Core animation system using Web Animations API
+ * Provides iOS and Android style page transitions
+ */
+
+/** iOS easing curve - matches UIKit spring animation feel */
+declare const IOS_EASING = "cubic-bezier(0.32, 0.72, 0, 1)";
+/** Android Material Design forward easing */
+declare const ANDROID_EASING = "cubic-bezier(0.36, 0.66, 0.04, 1)";
+/** Default iOS transition duration */
+declare const IOS_DURATION = 540;
+/** Default Android forward transition duration */
+declare const ANDROID_DURATION = 280;
+/**
+ * Resolve easing string to CSS value
+ */
+declare function resolveEasing(easing: TransitionEasing): string;
+/**
+ * Detect platform from user agent
+ */
+declare function detectPlatform(): ResolvedPlatform;
+/**
+ * Get default duration for platform
+ */
+declare function getDefaultDuration(platform: TransitionPlatform, direction?: 'forward' | 'back' | 'root' | 'none'): number;
+/**
+ * Get default easing for platform
+ */
+declare function getDefaultEasing(platform: TransitionPlatform, direction?: 'forward' | 'back' | 'root' | 'none'): string;
+/**
+ * iOS-style horizontal slide transition
+ * Forward: new page slides in from right
+ * Back: old page slides out to right
+ */
+declare function createIOSTransition(options: TransitionAnimationOptions): Animation[];
+/**
+ * Android-style vertical slide transition
+ * Forward: new page slides up from bottom
+ * Back: old page slides down to bottom
+ */
+declare function createAndroidTransition(options: TransitionAnimationOptions): Animation[];
+/**
+ * No animation - instant transition
+ */
+declare function createNoneTransition(options: TransitionAnimationOptions): Animation[];
+/**
+ * Create platform-appropriate transition
+ */
+declare function createTransition(options: TransitionAnimationOptions, platform?: TransitionPlatform): Animation[];
+/**
+ * Wait for all animations to complete
+ */
+declare function waitForAnimations(animations: Animation[]): Promise<void>;
+/**
+ * Cancel all animations
+ */
+declare function cancelAnimations(animations: Animation[]): void;
+/**
+ * Create header-specific animation
+ * Headers can have different animations (e.g., title changes, back button appears)
+ */
+declare function createHeaderTransition(options: TransitionAnimationOptions & {
+    enteringHeader?: HTMLElement;
+    leavingHeader?: HTMLElement;
+}): Animation[];
+/**
+ * Create footer-specific animation
+ * Footers typically stay in place or fade
+ */
+declare function createFooterTransition(options: TransitionAnimationOptions & {
+    enteringFooter?: HTMLElement;
+    leavingFooter?: HTMLElement;
+}): Animation[];
+
+/**
+ * View Transitions API support
+ * Progressive enhancement for browsers that support it
+ */
+
+/** Check if View Transitions API is supported */
+declare function supportsViewTransitions(): boolean;
+/** View transition options */
+interface ViewTransitionOptions {
+    /** Callback to update the DOM */
+    update: () => void | Promise<void>;
+    /** Direction for animation classes */
+    direction?: TransitionDirection;
+    /** Custom view transition names to apply */
+    names?: {
+        header?: string;
+        content?: string;
+        footer?: string;
+    };
+    /** Skip animation */
+    skipAnimation?: boolean;
+}
+/**
+ * Run a transition with View Transitions API if available
+ * Falls back to immediate update if not supported
+ */
+declare function runViewTransition(options: ViewTransitionOptions): Promise<void>;
+/**
+ * Apply view transition name to an element
+ */
+declare function setViewTransitionName(element: HTMLElement, name: string): void;
+/**
+ * Remove view transition name from an element
+ */
+declare function clearViewTransitionName(element: HTMLElement): void;
+/**
+ * CSS for View Transitions API integration
+ * This can be injected into the page to enable smooth transitions
+ */
+declare const VIEW_TRANSITIONS_CSS = "\n/* View Transitions API base styles */\n::view-transition-old(root),\n::view-transition-new(root) {\n  animation-duration: 0.4s;\n  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);\n}\n\n/* iOS-style forward navigation */\n[data-transition-direction=\"forward\"]::view-transition-old(root) {\n  animation-name: cap-slide-out-left;\n}\n\n[data-transition-direction=\"forward\"]::view-transition-new(root) {\n  animation-name: cap-slide-in-right;\n}\n\n/* iOS-style back navigation */\n[data-transition-direction=\"back\"]::view-transition-old(root) {\n  animation-name: cap-slide-out-right;\n}\n\n[data-transition-direction=\"back\"]::view-transition-new(root) {\n  animation-name: cap-slide-in-left;\n}\n\n/* Root/replace navigation - fade */\n[data-transition-direction=\"root\"]::view-transition-old(root) {\n  animation-name: cap-fade-out;\n}\n\n[data-transition-direction=\"root\"]::view-transition-new(root) {\n  animation-name: cap-fade-in;\n}\n\n/* Header transitions */\n::view-transition-old(cap-header),\n::view-transition-new(cap-header) {\n  animation-duration: 0.3s;\n}\n\n[data-transition-direction=\"forward\"]::view-transition-old(cap-header) {\n  animation-name: cap-header-out-left;\n}\n\n[data-transition-direction=\"forward\"]::view-transition-new(cap-header) {\n  animation-name: cap-header-in-right;\n}\n\n[data-transition-direction=\"back\"]::view-transition-old(cap-header) {\n  animation-name: cap-header-out-right;\n}\n\n[data-transition-direction=\"back\"]::view-transition-new(cap-header) {\n  animation-name: cap-header-in-left;\n}\n\n/* Content transitions */\n::view-transition-old(cap-content),\n::view-transition-new(cap-content) {\n  animation-duration: 0.4s;\n  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);\n}\n\n[data-transition-direction=\"forward\"]::view-transition-old(cap-content) {\n  animation-name: cap-slide-out-left;\n}\n\n[data-transition-direction=\"forward\"]::view-transition-new(cap-content) {\n  animation-name: cap-slide-in-right;\n}\n\n[data-transition-direction=\"back\"]::view-transition-old(cap-content) {\n  animation-name: cap-slide-out-right;\n}\n\n[data-transition-direction=\"back\"]::view-transition-new(cap-content) {\n  animation-name: cap-slide-in-left;\n}\n\n/* Animation keyframes */\n@keyframes cap-slide-in-right {\n  from {\n    transform: translateX(100%);\n    opacity: 1;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n@keyframes cap-slide-out-left {\n  from {\n    transform: translateX(0);\n    opacity: 1;\n  }\n  to {\n    transform: translateX(-30%);\n    opacity: 0.8;\n  }\n}\n\n@keyframes cap-slide-in-left {\n  from {\n    transform: translateX(-30%);\n    opacity: 0.8;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n@keyframes cap-slide-out-right {\n  from {\n    transform: translateX(0);\n    opacity: 1;\n  }\n  to {\n    transform: translateX(100%);\n    opacity: 1;\n  }\n}\n\n@keyframes cap-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes cap-fade-out {\n  from { opacity: 1; }\n  to { opacity: 0; }\n}\n\n@keyframes cap-header-in-right {\n  from {\n    transform: translateX(20px);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n@keyframes cap-header-out-left {\n  from {\n    transform: translateX(0);\n    opacity: 1;\n  }\n  to {\n    transform: translateX(-20px);\n    opacity: 0;\n  }\n}\n\n@keyframes cap-header-in-left {\n  from {\n    transform: translateX(-20px);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n@keyframes cap-header-out-right {\n  from {\n    transform: translateX(0);\n    opacity: 1;\n  }\n  to {\n    transform: translateX(20px);\n    opacity: 0;\n  }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n  ::view-transition-old(root),\n  ::view-transition-new(root),\n  ::view-transition-old(cap-header),\n  ::view-transition-new(cap-header),\n  ::view-transition-old(cap-content),\n  ::view-transition-new(cap-content) {\n    animation-duration: 0.01ms !important;\n  }\n}\n";
+/**
+ * Inject View Transitions CSS into the page
+ */
+declare function injectViewTransitionsCSS(): void;
+
+declare function detectNativePlatform(): NativePlatformInfo;
+declare function isNativeSwipeGesturePlatform(): boolean;
+
+/**
+ * @capgo/capacitor-transitions
+ * Framework-agnostic page transitions for Capacitor apps
+ *
+ * Features:
+ * - iOS and Android style transitions
+ * - Works with any framework (React, Vue, Angular, Svelte, Solid, etc.)
+ * - Uses Web Animations API for smooth, GPU-accelerated transitions
+ * - Supports View Transitions API as optional progressive enhancement
+ * - No styling opinions - just transition logic
+ * - Coordinates header, content, and footer animations
+ */
+
+declare function initCapTransitions(): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'cap-router-outlet': CapRouterOutlet;
+        'cap-page': CapPage;
+        'cap-header': CapHeader;
+        'cap-content': CapContent;
+        'cap-footer': CapFooter;
+    }
+}
+
+export { ANDROID_DURATION, ANDROID_EASING, type AnimationBuilder, CapContent, CapFooter, CapHeader, CapPage, CapRouterOutlet, IOS_DURATION, IOS_EASING, type NativePlatform, type NativePlatformInfo, type NavigationEvent, type PageOptions, type PageState, type ResolvedPlatform, type RouterOutletOptions, type SwipeGestureOption, type TransitionAnimationOptions, type TransitionConfig, TransitionController, type TransitionDirection, type TransitionEasing, type TransitionGlobalConfig, type TransitionLifecycle, type TransitionPlatform, type TransitionResult, type TransitionTarget, VIEW_TRANSITIONS_CSS, cancelAnimations, clearViewTransitionName, createAndroidTransition, createFooterTransition, createHeaderTransition, createIOSTransition, createNoneTransition, createTransition, createTransitionController, detectNativePlatform, detectPlatform, getDefaultDuration, getDefaultEasing, getTransitionController, initCapTransitions, injectViewTransitionsCSS, isNativeSwipeGesturePlatform, resolveEasing, runViewTransition, setViewTransitionName, supportsViewTransitions, waitForAnimations };