@flight-framework/transitions 0.1.0

package/dist/view-transition-Hp-Q9vWJ.d.ts

@@ -0,0 +1,97 @@
+import { V as ViewTransition, a as ViewTransitionOptions, b as ViewTransitionResult } from './types-BT3SCjiY.js';
+
+/**
+ * @flight-framework/transitions - View Transition API Wrapper
+ *
+ * Provides a cross-browser wrapper for the View Transitions API with
+ * automatic fallback for unsupported browsers.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
+ */
+
+/**
+ * Check if the browser supports the View Transitions API
+ * @returns true if startViewTransition is available
+ */
+declare function isViewTransitionSupported(): boolean;
+/**
+ * Check if cross-document view transitions are supported
+ * @returns true if @view-transition CSS at-rule is supported
+ */
+declare function isCrossDocumentTransitionSupported(): boolean;
+/**
+ * Start a view transition with automatic fallback
+ *
+ * Uses the native View Transitions API when available, otherwise
+ * provides a compatible fallback that executes the callback immediately.
+ *
+ * @example
+ * ```typescript
+ * const transition = startViewTransition(() => {
+ *   // Update the DOM
+ *   document.getElementById('content').innerHTML = newContent;
+ * });
+ *
+ * // Wait for animation to be ready
+ * await transition.ready;
+ *
+ * // Wait for animation to complete
+ * await transition.finished;
+ * ```
+ */
+declare function startViewTransition(updateCallback: () => void | Promise<void>, options?: ViewTransitionOptions): ViewTransitionResult;
+/**
+ * Options for cross-document (MPA) transitions
+ */
+interface CrossDocumentTransitionOptions {
+    /** Enable transitions for same-origin navigations */
+    enabled?: boolean;
+    /** Types to apply to the transition */
+    types?: string[];
+}
+/**
+ * Enable cross-document view transitions for MPA navigations
+ *
+ * This injects the necessary CSS and sets up event listeners for
+ * pagereveal and pageswap events.
+ *
+ * @example
+ * ```typescript
+ * enableCrossDocumentTransitions({
+ *   enabled: true,
+ *   types: ['slide-left']
+ * });
+ * ```
+ */
+declare function enableCrossDocumentTransitions(options?: CrossDocumentTransitionOptions): () => void;
+interface PageRevealEvent extends Event {
+    readonly viewTransition: ViewTransition | null;
+}
+interface PageSwapEvent extends Event {
+    readonly viewTransition: ViewTransition | null;
+    readonly activation: NavigationActivation | null;
+}
+interface NavigationActivation {
+    readonly entry: NavigationHistoryEntry;
+    readonly from: NavigationHistoryEntry | null;
+    readonly navigationType: NavigationHistoryEntryType;
+}
+interface NavigationHistoryEntry {
+    readonly id: string;
+    readonly index: number;
+    readonly key: string;
+    readonly sameDocument: boolean;
+    readonly url: string | null;
+}
+type NavigationHistoryEntryType = 'push' | 'replace' | 'reload' | 'traverse';
+declare global {
+    interface Document {
+        startViewTransition(callback: () => void | Promise<void>): ViewTransition;
+    }
+    interface WindowEventMap {
+        pagereveal: PageRevealEvent;
+        pageswap: PageSwapEvent;
+    }
+}
+
+export { type CrossDocumentTransitionOptions as C, isCrossDocumentTransitionSupported as a, enableCrossDocumentTransitions as e, isViewTransitionSupported as i, startViewTransition as s };

package/package.json

@@ -0,0 +1,110 @@
+{
+    "name": "@flight-framework/transitions",
+    "version": "0.1.0",
+    "description": "Smooth page, layout, and component transitions for Flight Framework",
+    "keywords": [
+        "flight",
+        "transitions",
+        "view-transitions",
+        "animation",
+        "page-transition",
+        "layout-transition"
+    ],
+    "license": "MIT",
+    "author": "Flight Contributors",
+    "type": "module",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js"
+        },
+        "./core": {
+            "types": "./dist/core/index.d.ts",
+            "import": "./dist/core/index.js"
+        },
+        "./page": {
+            "types": "./dist/page/index.d.ts",
+            "import": "./dist/page/index.js"
+        },
+        "./layout": {
+            "types": "./dist/layout/index.d.ts",
+            "import": "./dist/layout/index.js"
+        },
+        "./component": {
+            "types": "./dist/component/index.d.ts",
+            "import": "./dist/component/index.js"
+        },
+        "./presets": {
+            "types": "./dist/presets/index.d.ts",
+            "import": "./dist/presets/index.js"
+        },
+        "./css": "./dist/css/transitions.css",
+        "./css/view-transitions": "./dist/css/view-transitions.css",
+        "./react": {
+            "types": "./dist/adapters/react/index.d.ts",
+            "import": "./dist/adapters/react/index.js"
+        },
+        "./vue": {
+            "types": "./dist/adapters/vue/index.d.ts",
+            "import": "./dist/adapters/vue/index.js"
+        },
+        "./svelte": {
+            "types": "./dist/adapters/svelte/index.d.ts",
+            "import": "./dist/adapters/svelte/index.js"
+        },
+        "./solid": {
+            "types": "./dist/adapters/solid/index.d.ts",
+            "import": "./dist/adapters/solid/index.js"
+        },
+        "./router": {
+            "types": "./dist/router/index.d.ts",
+            "import": "./dist/router/index.js"
+        },
+        "./config": {
+            "types": "./dist/config/index.d.ts",
+            "import": "./dist/config/index.js"
+        }
+    },
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "tsup",
+        "dev": "tsup --watch",
+        "test": "vitest run",
+        "test:watch": "vitest",
+        "typecheck": "tsc --noEmit",
+        "lint": "eslint src/",
+        "clean": "rimraf dist"
+    },
+    "devDependencies": {
+        "@types/node": "^22.0.0",
+        "@types/react": "^19.0.0",
+        "rimraf": "^6.0.0",
+        "tsup": "^8.0.0",
+        "typescript": "^5.7.0",
+        "vitest": "^2.0.0"
+    },
+    "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "vue": "^3.0.0",
+        "svelte": "^4.0.0 || ^5.0.0",
+        "solid-js": "^1.0.0"
+    },
+    "peerDependenciesMeta": {
+        "react": {
+            "optional": true
+        },
+        "vue": {
+            "optional": true
+        },
+        "svelte": {
+            "optional": true
+        },
+        "solid-js": {
+            "optional": true
+        }
+    }
+}