@flight-framework/transitions 0.1.0

package/dist/presets/index.d.ts

@@ -0,0 +1,192 @@
+import { C as CustomTransition, T as TransitionPreset } from '../types-BT3SCjiY.js';
+
+/**
+ * @flight-framework/transitions - Fade Presets
+ *
+ * Fade transition presets for smooth opacity-based animations.
+ */
+
+/**
+ * Simple fade transition
+ * Elements fade in/out with opacity only
+ */
+declare const fade: CustomTransition;
+/**
+ * Fade with subtle scale
+ * Elements fade and slightly shrink on exit, grow on enter
+ */
+declare const fadeScale: CustomTransition;
+/**
+ * Fade with blur effect
+ * Elements fade and blur on exit, unblur on enter
+ */
+declare const fadeBlur: CustomTransition;
+/**
+ * Slow fade for dramatic effect
+ * Longer duration for hero sections or important content
+ */
+declare const fadeSlow: CustomTransition;
+/**
+ * Fast fade for snappy UI
+ * Quick transitions for responsive feel
+ */
+declare const fadeFast: CustomTransition;
+
+/**
+ * @flight-framework/transitions - Slide Presets
+ *
+ * Slide transition presets for directional page animations.
+ */
+
+/**
+ * Slide from left
+ * New content slides in from the left, old slides out to the right
+ */
+declare const slideLeft: CustomTransition;
+/**
+ * Slide from right
+ * New content slides in from the right, old slides out to the left
+ */
+declare const slideRight: CustomTransition;
+/**
+ * Slide from top
+ * New content slides in from the top, old slides out to the bottom
+ */
+declare const slideUp: CustomTransition;
+/**
+ * Slide from bottom
+ * New content slides in from the bottom, old slides out to the top
+ * Common for modals and bottom sheets
+ */
+declare const slideDown: CustomTransition;
+/**
+ * Slide with fade (subtle offset)
+ * Elements slide a small distance while fading
+ * Less dramatic than full slide
+ */
+declare const slideFade: CustomTransition;
+/**
+ * Slide with scale (iOS-like)
+ * Elements slide and scale slightly for depth effect
+ */
+declare const slideScale: CustomTransition;
+/**
+ * Slide overlay (modal-like)
+ * New content slides over old content which stays in place
+ */
+declare const slideOverlay: CustomTransition;
+
+/**
+ * @flight-framework/transitions - Scale Presets
+ *
+ * Scale transition presets for zoom-based animations.
+ */
+
+/**
+ * Scale in/out
+ * Elements grow on enter, shrink on exit
+ */
+declare const scale: CustomTransition;
+/**
+ * Scale up (zoom in effect)
+ * Elements scale from smaller to normal
+ */
+declare const scaleUp: CustomTransition;
+/**
+ * Scale down (zoom out effect)
+ * Elements scale from larger to normal
+ */
+declare const scaleDown: CustomTransition;
+/**
+ * Scale fade (subtle)
+ * Very subtle scale with fade for refined UI
+ */
+declare const scaleFade: CustomTransition;
+/**
+ * Pop (bouncy scale)
+ * Elements pop in with overshoot for playful UI
+ */
+declare const pop: CustomTransition;
+/**
+ * Expand from center
+ * Elements expand from center point
+ */
+declare const expand: CustomTransition;
+
+/**
+ * @flight-framework/transitions - Special Presets
+ *
+ * Special transition presets for advanced effects.
+ */
+
+/**
+ * No transition (instant swap)
+ * Use when you want to disable transitions for specific pages
+ */
+declare const none: CustomTransition;
+/**
+ * Flip horizontal (3D rotation)
+ * Elements flip like a card horizontally
+ */
+declare const flipX: CustomTransition;
+/**
+ * Flip vertical (3D rotation)
+ * Elements flip like a card vertically
+ */
+declare const flipY: CustomTransition;
+/**
+ * Rotate in/out
+ * Elements rotate while fading
+ */
+declare const rotate: CustomTransition;
+/**
+ * Swing in (pendulum effect)
+ * Elements swing in from the top
+ */
+declare const swing: CustomTransition;
+/**
+ * Morph placeholder
+ * Actual morph is handled by shared element transitions
+ */
+declare const morph: CustomTransition;
+/**
+ * Wipe left (reveal effect)
+ * Content is revealed from right to left using clip-path
+ */
+declare const wipeLeft: CustomTransition;
+/**
+ * Wipe up (reveal effect)
+ * Content is revealed from bottom to top using clip-path
+ */
+declare const wipeUp: CustomTransition;
+/**
+ * Circle reveal
+ * Content is revealed in a circular pattern from center
+ */
+declare const circleReveal: CustomTransition;
+
+/**
+ * @flight-framework/transitions - Presets Module
+ *
+ * All transition presets exported for easy consumption.
+ */
+
+/**
+ * Map of preset names to transition definitions
+ * Used by resolveTransition to look up presets by name
+ */
+declare const presetMap: Record<TransitionPreset, CustomTransition>;
+/**
+ * Get a preset transition by name
+ */
+declare function getPreset(name: TransitionPreset): CustomTransition | undefined;
+/**
+ * Check if a string is a valid preset name
+ */
+declare function isPresetName(name: string): name is TransitionPreset;
+/**
+ * Get all available preset names
+ */
+declare function getPresetNames(): TransitionPreset[];
+
+export { circleReveal, expand, fade, fadeBlur, fadeFast, fadeScale, fadeSlow, flipX, flipY, getPreset, getPresetNames, isPresetName, morph, none, pop, presetMap, rotate, scale, scaleDown, scaleFade, scaleUp, slideDown, slideFade, slideLeft, slideOverlay, slideRight, slideScale, slideUp, swing, wipeLeft, wipeUp };

package/dist/presets/index.js

@@ -0,0 +1,3 @@
+export { circleReveal, expand, fade, fadeBlur, fadeFast, fadeScale, fadeSlow, flipX, flipY, getPreset, getPresetNames, isPresetName, morph, none, pop, presetMap, rotate, scale, scaleDown, scaleFade, scaleUp, slideDown, slideFade, slideLeft, slideOverlay, slideRight, slideScale, slideUp, swing, wipeLeft, wipeUp } from '../chunk-ZBJ6FSAK.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/presets/index.js.map

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

package/dist/router/index.d.ts

@@ -0,0 +1,104 @@
+import { T as TransitionPreset, C as CustomTransition, c as TransitionDirection, P as PageTransitionConfig } from '../types-BT3SCjiY.js';
+
+/**
+ * @flight-framework/transitions - Router Integration
+ *
+ * Integration with @flight-framework/router for seamless page transitions.
+ */
+
+/**
+ * Options for navigating with transitions
+ */
+interface NavigateWithTransitionOptions {
+    /** Replace current history entry instead of push */
+    replace?: boolean;
+    /** Scroll to top after navigation */
+    scroll?: boolean;
+    /** State to pass to the new route */
+    state?: Record<string, unknown>;
+    /** Transition to use (overrides page default) */
+    transition?: TransitionPreset | CustomTransition | false;
+    /** Force transition even if globally disabled */
+    forceTransition?: boolean;
+    /** Direction hint for the transition */
+    direction?: TransitionDirection;
+}
+/**
+ * Navigate to a URL with transition support
+ *
+ * This function wraps the standard navigation with View Transitions API
+ * support and integrates with the Flight transitions system.
+ *
+ * @example
+ * ```typescript
+ * import { navigateWithTransition } from '@flight-framework/transitions/router';
+ *
+ * // Simple navigation
+ * await navigateWithTransition('/about');
+ *
+ * // With options
+ * await navigateWithTransition('/dashboard', {
+ *   transition: 'slide-left',
+ *   replace: false,
+ * });
+ * ```
+ */
+declare function navigateWithTransition(to: string, options?: NavigateWithTransitionOptions): Promise<void>;
+/**
+ * Set up history navigation listeners for back/forward transitions
+ *
+ * Call this once during app initialization to enable transitions
+ * for browser back/forward navigation.
+ *
+ * @example
+ * ```typescript
+ * import { setupHistoryTransitions } from '@flight-framework/transitions/router';
+ *
+ * // In your app initialization
+ * setupHistoryTransitions();
+ * ```
+ */
+declare function setupHistoryTransitions(): () => void;
+/**
+ * Prefetch a route's assets for faster transitions
+ *
+ * @example
+ * ```typescript
+ * // Prefetch on hover
+ * element.addEventListener('mouseenter', () => {
+ *   prefetchRoute('/about');
+ * });
+ * ```
+ */
+declare function prefetchRoute(url: string): void;
+/**
+ * Check if a route has been prefetched
+ */
+declare function isRoutePrefetched(url: string): boolean;
+/**
+ * Configure transitions based on route patterns
+ */
+interface RouteTransitionConfig {
+    /** Route pattern (supports wildcards) */
+    pattern: string;
+    /** Transition configuration for this route */
+    transition: PageTransitionConfig;
+}
+/**
+ * Register transition configs for route patterns
+ *
+ * @example
+ * ```typescript
+ * registerRouteTransitions([
+ *   { pattern: '/dashboard/*', transition: { default: 'slide-left' } },
+ *   { pattern: '/settings', transition: { default: 'fade' } },
+ * ]);
+ * ```
+ */
+declare function registerRouteTransitions(configs: RouteTransitionConfig[]): void;
+/**
+ * Get transition config for a route based on registered patterns
+ */
+declare function getRouteTransitionConfig(path: string): PageTransitionConfig | undefined;
+
+export { type NavigateWithTransitionOptions, type RouteTransitionConfig, getRouteTransitionConfig, isRoutePrefetched, navigateWithTransition, prefetchRoute, registerRouteTransitions, setupHistoryTransitions };

package/dist/router/index.js

@@ -0,0 +1,7 @@
+export { getRouteTransitionConfig, isRoutePrefetched, navigateWithTransition, prefetchRoute, registerRouteTransitions, setupHistoryTransitions } from '../chunk-JRRJMJDL.js';
+import '../chunk-ITLC6KJ4.js';
+import '../chunk-ZBJ6FSAK.js';
+import '../chunk-7R3FXL3A.js';
+import '../chunk-4SF4GHDQ.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/router/index.js.map

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

package/dist/transition-manager-CuO0S_Yn.d.ts

@@ -0,0 +1,62 @@
+import { i as TransitionsConfig, j as TransitionState, k as TransitionListener, P as PageTransitionConfig, c as TransitionDirection } from './types-BT3SCjiY.js';
+
+/**
+ * @flight-framework/transitions - Transition Manager
+ *
+ * Central orchestrator for all transition operations.
+ * Manages state, configuration, and coordinates between different
+ * transition types (page, layout, component).
+ */
+
+/**
+ * Create a new transition manager instance
+ *
+ * @example
+ * ```typescript
+ * const manager = createTransitionManager({
+ *   pageTransition: 'fade',
+ *   duration: 200,
+ * });
+ *
+ * // Subscribe to state changes
+ * manager.subscribe((state) => {
+ *   console.log('Transition state:', state);
+ * });
+ *
+ * // Start a transition
+ * await manager.startPageTransition('/new-page');
+ * ```
+ */
+declare function createTransitionManager(initialConfig?: TransitionsConfig): TransitionManager;
+interface TransitionManager {
+    /** Get current transition state (readonly copy) */
+    getState(): TransitionState;
+    /** Get current configuration (readonly copy) */
+    getConfig(): TransitionsConfig;
+    /** Update configuration */
+    configure(config: TransitionsConfig): void;
+    /** Subscribe to state changes, returns unsubscribe function */
+    subscribe(listener: TransitionListener): () => void;
+    /** Start a page transition */
+    startPageTransition(to: string, config?: PageTransitionConfig): Promise<void>;
+    /** Skip the current transition immediately */
+    skipTransition(): void;
+    /** Check if transitions are enabled */
+    isEnabled(): boolean;
+    /** Check if View Transitions API is supported */
+    isViewTransitionSupported(): boolean;
+    /** Set the navigation direction */
+    setDirection(direction: TransitionDirection): void;
+    /** Clean up resources */
+    destroy(): void;
+}
+/**
+ * Get or create the global transition manager instance
+ */
+declare function getTransitionManager(): TransitionManager;
+/**
+ * Initialize the global transition manager with configuration
+ */
+declare function initTransitions(config: TransitionsConfig): TransitionManager;
+
+export { type TransitionManager as T, createTransitionManager as c, getTransitionManager as g, initTransitions as i };

package/dist/types-BT3SCjiY.d.ts

@@ -0,0 +1,272 @@
+/**
+ * @flight-framework/transitions - Core Types
+ *
+ * Type definitions for the Flight Transitions system.
+ * Following 2026 best practices with strict TypeScript.
+ */
+/**
+ * Native ViewTransition interface (matches browser API)
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition
+ */
+interface ViewTransition {
+    /** Promise that resolves when the DOM update callback completes */
+    readonly updateCallbackDone: Promise<void>;
+    /** Promise that resolves when pseudo-element tree is ready to animate */
+    readonly ready: Promise<void>;
+    /** Promise that resolves when animation completes and new view is interactive */
+    readonly finished: Promise<void>;
+    /** Skip the transition animation */
+    skipTransition(): void;
+}
+/**
+ * Options for starting a view transition
+ */
+interface ViewTransitionOptions {
+    /** Unique name for CSS targeting via view-transition-name */
+    name?: string;
+    /** Skip the transition entirely (instant swap) */
+    skipTransition?: boolean;
+    /** Custom CSS classes applied during transition phases */
+    classes?: {
+        /** Class added to old (leaving) snapshot */
+        old?: string;
+        /** Class added to new (entering) snapshot */
+        new?: string;
+    };
+    /** Types for the transition (used with @view-transition types) */
+    types?: string[];
+}
+/**
+ * Result from startViewTransition wrapper
+ */
+interface ViewTransitionResult {
+    /** Promise resolving when ready to animate */
+    readonly ready: Promise<void>;
+    /** Promise resolving when animation finishes */
+    readonly finished: Promise<void>;
+    /** Promise resolving when DOM update callback completes */
+    readonly updateCallbackDone: Promise<void>;
+    /** Skip the remaining animation */
+    skipTransition(): void;
+    /** Whether native API was used */
+    readonly isNative: boolean;
+}
+/** Built-in transition preset names */
+type TransitionPreset = 'fade' | 'fade-scale' | 'slide-left' | 'slide-right' | 'slide-up' | 'slide-down' | 'scale' | 'scale-fade' | 'morph' | 'flip' | 'none';
+/** Direction for directional transitions */
+type TransitionDirection = 'forward' | 'back' | 'auto';
+/** CSS properties that can be animated */
+type AnimatableProperty = 'opacity' | 'transform' | 'clip-path' | 'filter' | 'background-color' | 'color' | string;
+/**
+ * Keyframe definition for a transition phase
+ */
+interface TransitionKeyframe {
+    /** Starting CSS values */
+    from: Partial<Record<AnimatableProperty, string>>;
+    /** Ending CSS values */
+    to: Partial<Record<AnimatableProperty, string>>;
+}
+/**
+ * Custom transition definition
+ */
+interface CustomTransition {
+    /** Name identifier for the transition */
+    name?: string;
+    /** Animation for the leaving element */
+    leave?: TransitionKeyframe;
+    /** Animation for the entering element */
+    enter?: TransitionKeyframe;
+    /** Duration in milliseconds */
+    duration?: number | {
+        leave?: number;
+        enter?: number;
+    };
+    /** Easing function(s) */
+    easing?: string | {
+        leave?: string;
+        enter?: string;
+    };
+    /** Delay before animation starts */
+    delay?: number | {
+        leave?: number;
+        enter?: number;
+    };
+    /** CSS fill mode */
+    fill?: FillMode;
+}
+/** Animation fill mode */
+type FillMode = 'none' | 'forwards' | 'backwards' | 'both';
+/**
+ * Resolved transition (preset or custom normalized to common format)
+ */
+interface ResolvedTransition {
+    name: string;
+    leave: {
+        keyframes: Keyframe[];
+        options: KeyframeAnimationOptions;
+    };
+    enter: {
+        keyframes: Keyframe[];
+        options: KeyframeAnimationOptions;
+    };
+}
+/**
+ * Configuration for page-level transitions
+ */
+interface PageTransitionConfig {
+    /** Default transition for all navigations */
+    default?: TransitionPreset | CustomTransition | false;
+    /** Transition for back navigation (overrides default) */
+    backTransition?: TransitionPreset | CustomTransition | false;
+    /** Duration override */
+    duration?: number;
+    /** Easing override */
+    easing?: string;
+    /** How to handle prefers-reduced-motion */
+    reduceMotion?: ReduceMotionBehavior;
+    /** Callback before transition starts */
+    onStart?: (context: TransitionContext) => void;
+    /** Callback after transition completes */
+    onComplete?: (context: TransitionContext) => void;
+}
+/** Behavior for users with reduced motion preference */
+type ReduceMotionBehavior = 'respect-system' | 'always-reduce' | 'ignore';
+/**
+ * Context passed to transition callbacks
+ */
+interface TransitionContext {
+    /** The URL being navigated from */
+    from: string;
+    /** The URL being navigated to */
+    to: string;
+    /** Navigation direction */
+    direction: TransitionDirection;
+    /** The transition being used */
+    transition: ResolvedTransition;
+    /** Timestamp when transition started */
+    startTime: number;
+}
+/**
+ * Configuration for layout-level transitions
+ */
+interface LayoutTransitionConfig {
+    /** Default layout transition */
+    default?: TransitionPreset | CustomTransition | false;
+    /** Whether layout persists during page transitions */
+    persist?: boolean;
+    /** Shared elements configuration */
+    sharedElements?: SharedElementConfig[];
+}
+/**
+ * Shared element transition configuration
+ */
+interface SharedElementConfig {
+    /** Unique identifier matching elements across pages */
+    name: string;
+    /** Animation type for the shared element */
+    animation?: 'morph' | 'crossfade' | 'none';
+    /** Duration for the shared element animation */
+    duration?: number;
+    /** Easing for the shared element animation */
+    easing?: string;
+}
+/**
+ * Props for component-level transitions
+ */
+interface TransitionProps {
+    /** Whether the child should be shown */
+    show?: boolean;
+    /** Transition type */
+    type?: TransitionPreset | CustomTransition;
+    /** Duration override */
+    duration?: number;
+    /** Appear on initial mount */
+    appear?: boolean;
+    /** Mode for enter/leave sequencing */
+    mode?: 'in-out' | 'out-in' | 'simultaneous';
+    /** Callback when enter transition starts */
+    onEnterStart?: () => void;
+    /** Callback when enter transition completes */
+    onEnterComplete?: () => void;
+    /** Callback when leave transition starts */
+    onLeaveStart?: () => void;
+    /** Callback when leave transition completes */
+    onLeaveComplete?: () => void;
+}
+/**
+ * Props for transition groups (list animations)
+ */
+interface TransitionGroupProps {
+    /** Tag to render as container */
+    as?: keyof HTMLElementTagNameMap;
+    /** Transition for items */
+    type?: TransitionPreset | CustomTransition;
+    /** Duration for each item */
+    duration?: number;
+    /** Stagger delay between items */
+    stagger?: number;
+    /** Whether to animate on initial render */
+    appear?: boolean;
+}
+/**
+ * Global transitions configuration (for flight.config.ts)
+ */
+interface TransitionsConfig {
+    /** Enable transitions globally */
+    enabled?: boolean;
+    /** Use native View Transitions API when available */
+    viewTransitions?: boolean;
+    /** Default page transition */
+    pageTransition?: TransitionPreset | CustomTransition | false;
+    /** Default layout transition */
+    layoutTransition?: TransitionPreset | CustomTransition | false;
+    /** Global duration default */
+    duration?: number;
+    /** Global easing default */
+    easing?: string;
+    /** Reduced motion behavior */
+    reduceMotion?: ReduceMotionBehavior;
+    /** Enable cross-document (MPA) transitions */
+    crossDocument?: boolean;
+}
+/**
+ * Internal transition state
+ */
+interface TransitionState {
+    isTransitioning: boolean;
+    direction: TransitionDirection;
+    phase: 'idle' | 'leaving' | 'entering' | 'complete';
+    currentTransition: ResolvedTransition | null;
+    fromPath: string | null;
+    toPath: string | null;
+}
+/** Listener for transition state changes */
+type TransitionListener = (state: TransitionState) => void;
+/** Extract the resolved transition type from preset or custom */
+type TransitionInput = TransitionPreset | CustomTransition | false;
+/** Navigation options extended with transition support */
+interface NavigateWithTransitionOptions {
+    /** Replace current history entry */
+    replace?: boolean;
+    /** Scroll to top after navigation */
+    scroll?: boolean;
+    /** State to pass to new route */
+    state?: Record<string, unknown>;
+    /** Transition to use (overrides page default) */
+    transition?: TransitionInput;
+    /** Force transition even if globally disabled */
+    forceTransition?: boolean;
+}
+/** Link props extended with transition support */
+interface LinkWithTransitionProps {
+    /** Target URL */
+    href: string;
+    /** Transition for this link */
+    transition?: TransitionInput;
+    /** Prefetch transition assets on hover */
+    prefetchTransition?: boolean;
+    /** Replace instead of push */
+    replace?: boolean;
+}
+
+export type { AnimatableProperty as A, CustomTransition as C, FillMode as F, LayoutTransitionConfig as L, NavigateWithTransitionOptions as N, PageTransitionConfig as P, ResolvedTransition as R, SharedElementConfig as S, TransitionPreset as T, ViewTransition as V, ViewTransitionOptions as a, ViewTransitionResult as b, TransitionDirection as c, TransitionKeyframe as d, ReduceMotionBehavior as e, TransitionContext as f, TransitionProps as g, TransitionGroupProps as h, TransitionsConfig as i, TransitionState as j, TransitionListener as k, TransitionInput as l, LinkWithTransitionProps as m };