@mks2508/mks-ui 0.2.0 → 0.3.1

package/dist/react-ui/primitives/waapi/Morph/index.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+import type { IMorphProps, IMorphContextValue } from './Morph.types';
+/**
+ * Morph - Container component for morphable elements.
+ *
+ * Provides morphing capabilities to child components through context.
+ * Supports FLIP + clip-path, CSS Grid, and View Transitions techniques.
+ *
+ * @example
+ * ```tsx
+ * <Morph technique="flip-clip-path" duration={300}>
+ *   <button onClick={() => morph(fromRef.current, toRef.current)}>
+ *     Morph
+ *   </button>
+ * </Morph>
+ * ```
+ */
+export declare function Morph({ children, technique, duration, easing, className, onMorphStart, onMorphEnd }: IMorphProps): ReactNode;
+export declare namespace Morph {
+    var displayName: string;
+}
+export type { IMorphProps, IMorphContextValue };
+//# sourceMappingURL=index.d.ts.map

package/dist/react-ui/primitives/waapi/Morph/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Morph/index.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGrE;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,SAA4B,EAC5B,QAAQ,EACR,MAAM,EACN,SAAc,EACd,YAAY,EACZ,UAAU,EACX,EAAE,WAAW,GAAG,SAAS,CAoBzB;yBA5Be,KAAK;;;AAgCrB,YAAY,EAAE,WAAW,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/react-ui/primitives/waapi/Morph/index.js

@@ -0,0 +1,45 @@
+"use client";
+
+import { cn } from "../../../lib/utils.js";
+import { MorphContext } from "./MorphContext.js";
+import { useMorph } from "./useMorph.js";
+import React, { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/primitives/waapi/Morph/index.tsx
+/**
+* Morph - Container component for morphable elements.
+*
+* Provides morphing capabilities to child components through context.
+* Supports FLIP + clip-path, CSS Grid, and View Transitions techniques.
+*
+* @example
+* ```tsx
+* <Morph technique="flip-clip-path" duration={300}>
+*   <button onClick={() => morph(fromRef.current, toRef.current)}>
+*     Morph
+*   </button>
+* </Morph>
+* ```
+*/
+function Morph({ children, technique = "flip-clip-path", duration, easing, className = "", onMorphStart, onMorphEnd }) {
+	const morph = useMorph({
+		technique,
+		duration,
+		easing,
+		onMorphStart,
+		onMorphEnd
+	});
+	const contextValue = useMemo(() => ({ morph }), [morph]);
+	return /* @__PURE__ */ jsx(MorphContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("morph-container", className),
+			children
+		})
+	});
+}
+Morph.displayName = "Morph";
+
+//#endregion
+export { Morph };

package/dist/react-ui/primitives/waapi/Morph/techniques/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Morph techniques.
+ *
+ * Individual morphing implementations that can be used
+ * standalone or composed through useMorph.
+ *
+ * @module primitives/waapi/Morph/techniques
+ */
+export { useFLIPClipPath } from './useFLIPClipPath';
+export { useCSSGridMorph } from './useCSSGridMorph';
+export { useViewTransitions } from './useViewTransitions';
+//# sourceMappingURL=index.d.ts.map

package/dist/react-ui/primitives/waapi/Morph/techniques/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/primitives/waapi/Morph/techniques/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/react-ui/primitives/waapi/Morph/techniques/useCSSGridMorph.d.ts

@@ -0,0 +1,38 @@
+import type { ICSSGridMorphOptions, ICSSGridMorphAPI } from '../Morph.types';
+/**
+ * Hook for CSS Grid-based expand/collapse animations.
+ *
+ * Uses the `grid-template-rows: 0fr/1fr` technique for smooth height
+ * animations without needing to know the content height in advance.
+ *
+ * CSS required on container:
+ * ```css
+ * .morph-container {
+ *   display: grid;
+ *   grid-template-rows: 0fr;
+ *   transition: grid-template-rows 300ms ease;
+ * }
+ * .morph-container.expanded {
+ *   grid-template-rows: 1fr;
+ * }
+ * .morph-content {
+ *   overflow: hidden;
+ * }
+ * ```
+ *
+ * @param options - Duration and easing overrides
+ * @returns Grid morph API with expand, collapse, toggle, and container ref
+ *
+ * @example
+ * ```tsx
+ * const { isExpanded, toggle, containerRef } = useCSSGridMorph();
+ *
+ * return (
+ *   <div ref={containerRef} className={isExpanded ? 'expanded' : ''}>
+ *     <div className="morph-content">Collapsible content</div>
+ *   </div>
+ * );
+ * ```
+ */
+export declare function useCSSGridMorph(options?: ICSSGridMorphOptions): ICSSGridMorphAPI;
+//# sourceMappingURL=useCSSGridMorph.d.ts.map

package/dist/react-ui/primitives/waapi/Morph/techniques/useCSSGridMorph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCSSGridMorph.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/primitives/waapi/Morph/techniques/useCSSGridMorph.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAK7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,eAAe,CAAC,OAAO,CAAC,EAAE,oBAAoB,GAAG,gBAAgB,CA6ChF"}

package/dist/react-ui/primitives/waapi/Morph/techniques/useCSSGridMorph.js

@@ -0,0 +1,78 @@
+import { EASINGS, TIMING } from "../../core/animationConstants.js";
+import { useCallback, useRef, useState } from "react";
+
+//#region src/react-ui/primitives/waapi/Morph/techniques/useCSSGridMorph.ts
+const DEFAULT_DURATION = TIMING.FLIP_DURATION;
+const DEFAULT_EASING = EASINGS.MATERIAL_STANDARD;
+/**
+* Hook for CSS Grid-based expand/collapse animations.
+*
+* Uses the `grid-template-rows: 0fr/1fr` technique for smooth height
+* animations without needing to know the content height in advance.
+*
+* CSS required on container:
+* ```css
+* .morph-container {
+*   display: grid;
+*   grid-template-rows: 0fr;
+*   transition: grid-template-rows 300ms ease;
+* }
+* .morph-container.expanded {
+*   grid-template-rows: 1fr;
+* }
+* .morph-content {
+*   overflow: hidden;
+* }
+* ```
+*
+* @param options - Duration and easing overrides
+* @returns Grid morph API with expand, collapse, toggle, and container ref
+*
+* @example
+* ```tsx
+* const { isExpanded, toggle, containerRef } = useCSSGridMorph();
+*
+* return (
+*   <div ref={containerRef} className={isExpanded ? 'expanded' : ''}>
+*     <div className="morph-content">Collapsible content</div>
+*   </div>
+* );
+* ```
+*/
+function useCSSGridMorph(options) {
+	const [isExpanded, setIsExpanded] = useState(false);
+	const containerRef = useRef(null);
+	const optionsRef = useRef(options);
+	const duration = optionsRef.current?.duration ?? DEFAULT_DURATION;
+	const easing = optionsRef.current?.easing ?? DEFAULT_EASING;
+	const applyTransition = useCallback(() => {
+		if (containerRef.current) containerRef.current.style.transition = `grid-template-rows ${duration}ms ${easing}`;
+	}, [duration, easing]);
+	const expand = useCallback(() => {
+		applyTransition();
+		if (containerRef.current) containerRef.current.style.gridTemplateRows = "1fr";
+		setIsExpanded(true);
+	}, [applyTransition]);
+	const collapse = useCallback(() => {
+		applyTransition();
+		if (containerRef.current) containerRef.current.style.gridTemplateRows = "0fr";
+		setIsExpanded(false);
+	}, [applyTransition]);
+	return {
+		isExpanded,
+		expand,
+		collapse,
+		toggle: useCallback(() => {
+			if (isExpanded) collapse();
+			else expand();
+		}, [
+			isExpanded,
+			expand,
+			collapse
+		]),
+		containerRef
+	};
+}
+
+//#endregion
+export { useCSSGridMorph };

package/dist/react-ui/primitives/waapi/Morph/techniques/useFLIPClipPath.d.ts

@@ -0,0 +1,23 @@
+import type { IFLIPClipPathOptions, IFLIPClipPathAPI } from '../Morph.types';
+/**
+ * Hook for FLIP + clip-path morphing technique.
+ *
+ * Combines:
+ * 1. FLIP for position/size transitions
+ * 2. clip-path for shape morphing
+ * 3. Opacity crossfade for smooth visual transition
+ *
+ * @param options - Duration, easing, and clip-path overrides
+ * @returns API with morph trigger, cancel, and morphing state
+ *
+ * @example
+ * ```tsx
+ * const { isMorphing, morph, cancel } = useFLIPClipPath({ duration: 300 });
+ *
+ * const handleMorph = async () => {
+ *   await morph(fromRef.current, toRef.current);
+ * };
+ * ```
+ */
+export declare function useFLIPClipPath(options?: IFLIPClipPathOptions): IFLIPClipPathAPI;
+//# sourceMappingURL=useFLIPClipPath.d.ts.map

package/dist/react-ui/primitives/waapi/Morph/techniques/useFLIPClipPath.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFLIPClipPath.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/primitives/waapi/Morph/techniques/useFLIPClipPath.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAK7E;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,eAAe,CAAC,OAAO,CAAC,EAAE,oBAAoB,GAAG,gBAAgB,CAsIhF"}

package/dist/react-ui/primitives/waapi/Morph/techniques/useFLIPClipPath.js

@@ -0,0 +1,140 @@
+import { EASINGS, TIMING } from "../../core/animationConstants.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+//#region src/react-ui/primitives/waapi/Morph/techniques/useFLIPClipPath.ts
+const DEFAULT_DURATION = TIMING.FLIP_DURATION;
+const DEFAULT_EASING = EASINGS.EASE_OUT_CUBIC;
+/**
+* Hook for FLIP + clip-path morphing technique.
+*
+* Combines:
+* 1. FLIP for position/size transitions
+* 2. clip-path for shape morphing
+* 3. Opacity crossfade for smooth visual transition
+*
+* @param options - Duration, easing, and clip-path overrides
+* @returns API with morph trigger, cancel, and morphing state
+*
+* @example
+* ```tsx
+* const { isMorphing, morph, cancel } = useFLIPClipPath({ duration: 300 });
+*
+* const handleMorph = async () => {
+*   await morph(fromRef.current, toRef.current);
+* };
+* ```
+*/
+function useFLIPClipPath(options) {
+	const [isMorphing, setIsMorphing] = useState(false);
+	const activeAnimationsRef = useRef([]);
+	const optionsRef = useRef(options);
+	useEffect(() => {
+		optionsRef.current = options;
+	}, [options]);
+	const cancel = useCallback(() => {
+		activeAnimationsRef.current.forEach((anim) => anim.cancel());
+		activeAnimationsRef.current = [];
+		setIsMorphing(false);
+	}, []);
+	const morph = useCallback(async (fromElement, toElement) => {
+		if (isMorphing) cancel();
+		setIsMorphing(true);
+		const duration = optionsRef.current?.duration ?? DEFAULT_DURATION;
+		const easing = optionsRef.current?.easing ?? DEFAULT_EASING;
+		const fromRect = fromElement.getBoundingClientRect();
+		const toRect = toElement.getBoundingClientRect();
+		const deltaX = fromRect.left - toRect.left;
+		const deltaY = fromRect.top - toRect.top;
+		const scaleX = fromRect.width / toRect.width;
+		const scaleY = fromRect.height / toRect.height;
+		const fromBorderRadius = getComputedStyle(fromElement).borderRadius;
+		const toBorderRadius = getComputedStyle(toElement).borderRadius;
+		const fromClipPath = optionsRef.current?.clipPathStart || borderRadiusToInset(fromBorderRadius, fromRect);
+		const toClipPath = optionsRef.current?.clipPathEnd || borderRadiusToInset(toBorderRadius, toRect);
+		const originalFromStyles = {
+			position: fromElement.style.position,
+			opacity: fromElement.style.opacity,
+			pointerEvents: fromElement.style.pointerEvents
+		};
+		const originalToStyles = {
+			position: toElement.style.position,
+			opacity: toElement.style.opacity,
+			transform: toElement.style.transform,
+			clipPath: toElement.style.clipPath
+		};
+		fromElement.style.position = "absolute";
+		fromElement.style.pointerEvents = "none";
+		toElement.style.position = "relative";
+		toElement.style.transform = `translate(${deltaX}px, ${deltaY}px) scale(${scaleX}, ${scaleY})`;
+		toElement.style.clipPath = fromClipPath;
+		toElement.style.opacity = "0";
+		const fromFadeOut = fromElement.animate([{ opacity: 1 }, { opacity: 0 }], {
+			duration: duration * .5,
+			easing,
+			fill: "forwards"
+		});
+		const toFadeIn = toElement.animate([{ opacity: 0 }, { opacity: 1 }], {
+			duration: duration * .5,
+			delay: duration * .25,
+			easing,
+			fill: "forwards"
+		});
+		const toTransform = toElement.animate([{
+			transform: `translate(${deltaX}px, ${deltaY}px) scale(${scaleX}, ${scaleY})`,
+			clipPath: fromClipPath
+		}, {
+			transform: "translate(0, 0) scale(1, 1)",
+			clipPath: toClipPath
+		}], {
+			duration,
+			easing,
+			fill: "forwards"
+		});
+		activeAnimationsRef.current = [
+			fromFadeOut,
+			toFadeIn,
+			toTransform
+		];
+		try {
+			await Promise.all([
+				fromFadeOut.finished,
+				toFadeIn.finished,
+				toTransform.finished
+			]);
+		} catch {
+			Object.assign(fromElement.style, originalFromStyles);
+			Object.assign(toElement.style, originalToStyles);
+			setIsMorphing(false);
+			return;
+		}
+		Object.assign(fromElement.style, originalFromStyles);
+		toElement.style.transform = "";
+		toElement.style.clipPath = "";
+		toElement.style.opacity = "1";
+		activeAnimationsRef.current = [];
+		setIsMorphing(false);
+	}, [isMorphing, cancel]);
+	useEffect(() => {
+		return () => {
+			cancel();
+		};
+	}, [cancel]);
+	return {
+		isMorphing,
+		morph,
+		cancel
+	};
+}
+/**
+* Convert a CSS border-radius value to an inset() clip-path with rounded corners.
+* @param borderRadius - CSS border-radius string
+* @param rect - Bounding rect of the element
+* @returns inset() clip-path string
+*/
+function borderRadiusToInset(borderRadius, rect) {
+	const radius = parseFloat(borderRadius) || 0;
+	return `inset(0 round ${radius / rect.width * 100}% ${radius / rect.height * 100}%)`;
+}
+
+//#endregion
+export { useFLIPClipPath };

package/dist/react-ui/primitives/waapi/Morph/techniques/useViewTransitions.d.ts

@@ -0,0 +1,28 @@
+import type { IViewTransitionsOptions, IViewTransitionsAPI } from '../Morph.types';
+/**
+ * Hook for the View Transitions API.
+ *
+ * Provides a wrapper around the native View Transitions API
+ * with automatic feature detection and fallback handling.
+ *
+ * Browser support:
+ * - Chrome 111+
+ * - Firefox 144+
+ * - Safari latest
+ *
+ * @param options - Optional view transition name and types
+ * @returns View Transitions API with support detection and transition trigger
+ *
+ * @example
+ * ```tsx
+ * const { isSupported, startTransition } = useViewTransitions({ name: 'hero' });
+ *
+ * const handleTransition = async () => {
+ *   await startTransition(() => {
+ *     setActiveImage(nextImage);
+ *   });
+ * };
+ * ```
+ */
+export declare function useViewTransitions(options?: IViewTransitionsOptions): IViewTransitionsAPI;
+//# sourceMappingURL=useViewTransitions.d.ts.map

package/dist/react-ui/primitives/waapi/Morph/techniques/useViewTransitions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useViewTransitions.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/primitives/waapi/Morph/techniques/useViewTransitions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAEnF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,CAAC,EAAE,uBAAuB,GAAG,mBAAmB,CAyDzF"}

package/dist/react-ui/primitives/waapi/Morph/techniques/useViewTransitions.js

@@ -0,0 +1,77 @@
+import { useCallback, useMemo, useRef } from "react";
+
+//#region src/react-ui/primitives/waapi/Morph/techniques/useViewTransitions.ts
+/**
+* Hook for the View Transitions API.
+*
+* Provides a wrapper around the native View Transitions API
+* with automatic feature detection and fallback handling.
+*
+* Browser support:
+* - Chrome 111+
+* - Firefox 144+
+* - Safari latest
+*
+* @param options - Optional view transition name and types
+* @returns View Transitions API with support detection and transition trigger
+*
+* @example
+* ```tsx
+* const { isSupported, startTransition } = useViewTransitions({ name: 'hero' });
+*
+* const handleTransition = async () => {
+*   await startTransition(() => {
+*     setActiveImage(nextImage);
+*   });
+* };
+* ```
+*/
+function useViewTransitions(options) {
+	const optionsRef = useRef(options);
+	const typesRef = useRef(options?.types || []);
+	const isSupported = useMemo(() => {
+		if (typeof document === "undefined") return false;
+		return "startViewTransition" in document;
+	}, []);
+	const setTypes = useCallback((types) => {
+		typesRef.current = types;
+	}, []);
+	return {
+		isSupported,
+		startTransition: useCallback(async (callback) => {
+			if (!document.startViewTransition) {
+				await callback();
+				return;
+			}
+			const viewTransitionName = optionsRef.current?.name;
+			const setupStyles = () => {
+				if (viewTransitionName) {
+					const styleEl = document.createElement("style");
+					styleEl.id = `view-transition-${viewTransitionName}`;
+					styleEl.textContent = `
+          ::view-transition-old(${viewTransitionName}),
+          ::view-transition-new(${viewTransitionName}) {
+            animation-duration: 300ms;
+            animation-timing-function: ease-out;
+          }
+        `;
+					document.head.appendChild(styleEl);
+					return () => {
+						styleEl.remove();
+					};
+				}
+				return () => {};
+			};
+			const cleanup = setupStyles();
+			try {
+				await document.startViewTransition(callback).finished;
+			} finally {
+				cleanup();
+			}
+		}, []),
+		setTypes
+	};
+}
+
+//#endregion
+export { useViewTransitions };

package/dist/react-ui/primitives/waapi/Morph/useMorph.d.ts

@@ -0,0 +1,27 @@
+import type { IUseMorphReturn, IUseMorphConfig } from './Morph.types';
+/**
+ * Unified hook for morphing animations.
+ *
+ * Provides access to multiple morphing techniques:
+ * - FLIP + clip-path (default): Best for element-to-element transitions
+ * - CSS Grid: Best for expand/collapse animations
+ * - View Transitions: Best for page/route transitions (requires browser support)
+ *
+ * Falls back to FLIP + clip-path when View Transitions API is unsupported.
+ *
+ * @param options - Technique selection, timing, and callbacks
+ * @returns Unified morph API with access to individual techniques
+ *
+ * @example
+ * ```tsx
+ * const morph = useMorph({ technique: 'flip-clip-path' });
+ *
+ * // Unified API:
+ * await morph.morph(fromElement, toElement);
+ *
+ * // Or individual techniques:
+ * morph.cssGrid.toggle();
+ * ```
+ */
+export declare function useMorph(options?: IUseMorphConfig): IUseMorphReturn;
+//# sourceMappingURL=useMorph.d.ts.map

package/dist/react-ui/primitives/waapi/Morph/useMorph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMorph.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Morph/useMorph.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAkB,MAAM,eAAe,CAAC;AAEtF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,QAAQ,CAAC,OAAO,CAAC,EAAE,eAAe,GAAG,eAAe,CAqEnE"}

package/dist/react-ui/primitives/waapi/Morph/useMorph.js

@@ -0,0 +1,86 @@
+import { useFLIPClipPath } from "./techniques/useFLIPClipPath.js";
+import { useCSSGridMorph } from "./techniques/useCSSGridMorph.js";
+import { useViewTransitions } from "./techniques/useViewTransitions.js";
+import { useCallback, useEffect, useRef } from "react";
+
+//#region src/react-ui/primitives/waapi/Morph/useMorph.ts
+/**
+* Unified hook for morphing animations.
+*
+* Provides access to multiple morphing techniques:
+* - FLIP + clip-path (default): Best for element-to-element transitions
+* - CSS Grid: Best for expand/collapse animations
+* - View Transitions: Best for page/route transitions (requires browser support)
+*
+* Falls back to FLIP + clip-path when View Transitions API is unsupported.
+*
+* @param options - Technique selection, timing, and callbacks
+* @returns Unified morph API with access to individual techniques
+*
+* @example
+* ```tsx
+* const morph = useMorph({ technique: 'flip-clip-path' });
+*
+* // Unified API:
+* await morph.morph(fromElement, toElement);
+*
+* // Or individual techniques:
+* morph.cssGrid.toggle();
+* ```
+*/
+function useMorph(options) {
+	const technique = options?.technique ?? "flip-clip-path";
+	const optionsRef = useRef(options);
+	useEffect(() => {
+		optionsRef.current = options;
+	}, [options]);
+	const flipClipPath = useFLIPClipPath({
+		duration: options?.duration,
+		easing: options?.easing
+	});
+	const cssGrid = useCSSGridMorph({
+		duration: options?.duration,
+		easing: options?.easing
+	});
+	const viewTransitions = useViewTransitions();
+	const isMorphing = flipClipPath.isMorphing;
+	const morph = useCallback(async (fromElement, toElement) => {
+		optionsRef.current?.onMorphStart?.();
+		switch (optionsRef.current?.technique ?? "flip-clip-path") {
+			case "flip-clip-path":
+				await flipClipPath.morph(fromElement, toElement);
+				break;
+			case "view-transitions":
+				if (viewTransitions.isSupported) await viewTransitions.startTransition(() => {
+					fromElement.style.opacity = "0";
+					toElement.style.opacity = "1";
+				});
+				else await flipClipPath.morph(fromElement, toElement);
+				break;
+			case "css-grid":
+				cssGrid.toggle();
+				break;
+		}
+		optionsRef.current?.onMorphEnd?.();
+	}, [
+		flipClipPath,
+		viewTransitions,
+		cssGrid
+	]);
+	const cancel = useCallback(() => {
+		flipClipPath.cancel();
+	}, [flipClipPath]);
+	return {
+		isMorphing,
+		technique,
+		isViewTransitionsSupported: viewTransitions.isSupported,
+		morph,
+		cancel,
+		flipClipPath,
+		cssGrid,
+		viewTransitions
+	};
+}
+
+//#endregion
+export { useMorph };