@mks2508/mks-ui 0.2.1 → 0.3.1

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 };

package/dist/react-ui/primitives/waapi/Reorder/Reorder.types.d.ts

@@ -0,0 +1,168 @@
+import type { ReactNode } from 'react';
+import type { IAnimationOrchestratorAPI, FLIPBehavior, ExitPositionStrategy } from '../core/types';
+export type { FLIPBehavior, ExitPositionStrategy } from '../core/types';
+/**
+ * Layout direction for reorder items.
+ *
+ * - `auto`: No layout applied (consumer handles positioning)
+ * - `horizontal`: Flexbox row layout with wrapping
+ * - `inline-horizontal`: Inline-flexbox row layout without wrapping
+ * - `vertical`: Flexbox column layout
+ * - `grid`: CSS Grid with auto-fill columns
+ */
+export type ReorderLayout = 'auto' | 'horizontal' | 'inline-horizontal' | 'vertical' | 'grid';
+/**
+ * Stagger configuration for animations.
+ * A single number applies to both enter/exit; an object allows separate values.
+ */
+export type StaggerConfig = number | {
+    enter: number;
+    exit: number;
+};
+/**
+ * Duration configuration for animations.
+ * A single number applies to both enter/exit; an object allows separate values.
+ */
+export type DurationConfig = number | {
+    enter: number;
+    exit: number;
+};
+/**
+ * Animation state for individual reorder items.
+ */
+export interface IReorderItemState {
+    /** True when the item is currently animating out */
+    isExiting: boolean;
+    /** True when the item is currently animating in */
+    isEntering: boolean;
+}
+/**
+ * Props for Reorder container component.
+ * Agnostic primitive for animated list reordering using FLIP technique.
+ */
+export interface IReorderProps {
+    /** Child elements to be animated. Each child should have a unique `key` prop */
+    children: ReactNode;
+    /** Layout arrangement for child elements */
+    layout?: ReorderLayout;
+    /** Stagger delay between item animations */
+    stagger?: StaggerConfig;
+    /** Animation duration in milliseconds */
+    duration?: DurationConfig;
+    /** Additional CSS class name for the container */
+    className?: string;
+    /** FLIP animation behavior strategy */
+    flipBehavior?: FLIPBehavior;
+    /** Strategy for positioning elements during exit animation */
+    exitPositionStrategy?: ExitPositionStrategy;
+    /** Callback fired when an item starts its exit animation */
+    onItemExit?: (id: string) => void;
+    /** Callback fired when an item completes its enter animation */
+    onItemEnter?: (id: string) => void;
+}
+/**
+ * Configuration options for useReorder hook.
+ * All timing values are in milliseconds.
+ */
+export interface IUseReorderConfig {
+    /** Duration of enter animation in milliseconds. @default 200 */
+    enterDuration?: number;
+    /** Duration of exit animation in milliseconds. @default 180 */
+    exitDuration?: number;
+    /** Duration of FLIP animation in milliseconds. @default 300 */
+    flipDuration?: number;
+    /** Easing function for enter animation */
+    enterEasing?: string;
+    /** Easing function for exit animation */
+    exitEasing?: string;
+    /** Easing function for FLIP animation */
+    flipEasing?: string;
+    /** FLIP animation behavior strategy. @default 'all' */
+    flipBehavior?: FLIPBehavior;
+    /** Strategy for positioning elements during exit animation. @default 'absolute-fixed' */
+    exitPositionStrategy?: ExitPositionStrategy;
+    /** Callback called when an item's exit animation completes */
+    onComplete?: (id: string) => void;
+}
+/**
+ * Return type for useReorder hook.
+ * Extends the full AnimationOrchestratorAPI with semantic aliases.
+ */
+export interface IUseReorderReturn extends IAnimationOrchestratorAPI {
+    /** Start exit animation for an item (alias for startExit) */
+    startItemExit: (id: string) => Promise<void>;
+    /** Start enter animation for an item (alias for startEnter) */
+    startItemEnter: (id: string) => Promise<void>;
+}
+/**
+ * Context value passed to Reorder children.
+ * @internal Consumed by ReorderItem component.
+ */
+export interface IReorderContextValue {
+    /** Reorder instance with animation methods */
+    reorder: IUseReorderReturn;
+    /** Current layout setting */
+    layout: ReorderLayout;
+    /** Check if an item is currently exiting */
+    isExiting: (id: string) => boolean;
+    /** Check if an item is currently entering */
+    isEntering: (id: string) => boolean;
+    /** Array of item IDs currently exiting */
+    exitingIds: string[];
+    /** Array of item IDs currently entering */
+    enteringIds: string[];
+}
+/**
+ * Configuration for useReorderPresence hook.
+ * An alternative to the Reorder component giving full control
+ * over rendering while handling animation orchestration.
+ */
+export interface IUseReorderPresenceConfig {
+    /** Enable automatic enter animations for new children. @default true */
+    autoAnimate?: boolean;
+    /** Stagger delay between item animations */
+    stagger?: StaggerConfig;
+    /** Duration of enter animation in milliseconds */
+    enterDuration?: number;
+    /** Duration of exit animation in milliseconds */
+    exitDuration?: number;
+    /** Duration of FLIP animation in milliseconds */
+    flipDuration?: number;
+    /** Easing function for enter animation */
+    enterEasing?: string;
+    /** Easing function for exit animation */
+    exitEasing?: string;
+    /** Easing function for FLIP animation */
+    flipEasing?: string;
+    /** FLIP animation behavior strategy */
+    flipBehavior?: FLIPBehavior;
+    /** Strategy for positioning elements during exit animation */
+    exitPositionStrategy?: ExitPositionStrategy;
+    /** Callback fired when an item starts its exit animation */
+    onItemExit?: (id: string) => void;
+    /** Callback fired when an item completes its enter animation */
+    onItemEnter?: (id: string) => void;
+    /** Callback fired when an item's exit animation completes */
+    onAnimationComplete?: (id: string) => void;
+}
+/**
+ * Return type for useReorderPresence hook.
+ * Provides rendered children and methods for triggering animations.
+ */
+export interface IUseReorderPresenceReturn {
+    /** Rendered children with animation data attributes applied */
+    presentChildren: ReactNode;
+    /** Trigger exit animation for an item */
+    triggerExit: (id: string) => void;
+    /** Check if an item is currently exiting */
+    isExiting: (id: string) => boolean;
+    /** Check if an item is currently entering */
+    isEntering: (id: string) => boolean;
+    /** Array of item IDs currently exiting */
+    exitingIds: string[];
+    /** Array of item IDs currently entering */
+    enteringIds: string[];
+    /** Underlying reorder instance */
+    reorder: IUseReorderReturn;
+}
+//# sourceMappingURL=Reorder.types.d.ts.map

package/dist/react-ui/primitives/waapi/Reorder/Reorder.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Reorder.types.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Reorder/Reorder.types.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { IReorderProps } from './Reorder.types';
+/**
+ * Reorder - Agnostic container for reorderable items with FLIP animations
+ *
+ * @example
+ * ```tsx
+ * <Reorder
+ *   layout="horizontal"
+ *   onItemExit={(id) => handleRemove(id)}
+ * >
+ *   {items.map(item => (
+ *     <div key={item.id}>{item.name}</div>
+ *   ))}
+ * </Reorder>
+ * ```
+ */
+declare const ReorderRoot: React.ForwardRefExoticComponent<IReorderProps & React.RefAttributes<{
+    startItemExit: (id: string) => Promise<void>;
+    startItemEnter: (id: string) => Promise<void>;
+    isAnimating: (id?: string) => boolean;
+}>>;
+export { ReorderRoot as Reorder };
+export type { IReorderProps, ReorderLayout, DurationConfig, StaggerConfig, IUseReorderReturn, IUseReorderConfig, IReorderItemState, IReorderContextValue, IUseReorderPresenceConfig, IUseReorderPresenceReturn, FLIPBehavior, ExitPositionStrategy, } from './Reorder.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Reorder/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4L,MAAM,OAAO,CAAC;AAEjN,OAAO,KAAK,EAAE,aAAa,EAAiC,MAAM,iBAAiB,CAAC;AAsBpF;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,WAAW;mBACA,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC;oBAC5B,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC;iBAChC,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,OAAO;GAqMrC,CAAC;AAIH,OAAO,EAAE,WAAW,IAAI,OAAO,EAAE,CAAC;AAClC,YAAY,EACV,aAAa,EACb,aAAa,EACb,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,yBAAyB,EACzB,yBAAyB,EACzB,YAAY,EACZ,oBAAoB,GACrB,MAAM,iBAAiB,CAAC"}

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

@@ -0,0 +1,186 @@
+"use client";
+
+import { cn } from "../../../lib/utils.js";
+import { useReorder } from "./useReorder.js";
+import React, { Children, cloneElement, forwardRef, isValidElement, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/primitives/waapi/Reorder/index.tsx
+function getDuration(config, type) {
+	if (config === void 0) return void 0;
+	if (typeof config === "number") return config;
+	return config[type];
+}
+const layoutStyles = {
+	auto: { position: "relative" },
+	horizontal: {
+		display: "flex",
+		flexDirection: "row",
+		flexWrap: "wrap",
+		alignItems: "center",
+		position: "relative"
+	},
+	"inline-horizontal": {
+		display: "inline-flex",
+		flexDirection: "row",
+		flexWrap: "nowrap",
+		alignItems: "center",
+		position: "relative"
+	},
+	vertical: {
+		display: "flex",
+		flexDirection: "column",
+		position: "relative"
+	},
+	grid: {
+		display: "grid",
+		gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))",
+		gap: "8px",
+		position: "relative"
+	}
+};
+/**
+* Reorder - Agnostic container for reorderable items with FLIP animations
+*
+* @example
+* ```tsx
+* <Reorder
+*   layout="horizontal"
+*   onItemExit={(id) => handleRemove(id)}
+* >
+*   {items.map(item => (
+*     <div key={item.id}>{item.name}</div>
+*   ))}
+* </Reorder>
+* ```
+*/
+const ReorderRoot = forwardRef(({ children, stagger, duration, layout = "auto", className = "", flipBehavior, exitPositionStrategy, onItemExit, onItemEnter }, ref) => {
+	const handleAnimationComplete = useCallback((id) => {
+		setDisplayChildren((prev) => prev.filter((child) => child.key !== id));
+	}, []);
+	const reorder = useReorder({
+		enterDuration: getDuration(duration, "enter"),
+		exitDuration: getDuration(duration, "exit"),
+		flipBehavior,
+		exitPositionStrategy,
+		onComplete: handleAnimationComplete
+	});
+	useImperativeHandle(ref, () => ({
+		startItemExit: reorder.startItemExit,
+		startItemEnter: reorder.startItemEnter,
+		isAnimating: reorder.isAnimating
+	}), [
+		reorder.startItemExit,
+		reorder.startItemEnter,
+		reorder.isAnimating
+	]);
+	const startExitRef = useRef(reorder.startItemExit);
+	const startEnterRef = useRef(reorder.startItemEnter);
+	useEffect(() => {
+		startExitRef.current = reorder.startItemExit;
+		startEnterRef.current = reorder.startItemEnter;
+	}, [reorder.startItemExit, reorder.startItemEnter]);
+	const currentChildren = useMemo(() => {
+		const records = [];
+		Children.forEach(children, (child) => {
+			if (isValidElement(child) && child.key != null) records.push({
+				key: String(child.key),
+				element: child
+			});
+		});
+		return records;
+	}, [children]);
+	const [displayChildren, setDisplayChildren] = useState(currentChildren);
+	const exitingKeysRef = useRef(/* @__PURE__ */ new Set());
+	const getStaggerDelay = useCallback((index, type) => {
+		if (!stagger) return 0;
+		if (typeof stagger === "number") return stagger * index;
+		return (stagger[type] ?? 0) * index;
+	}, [stagger]);
+	useEffect(() => {
+		const currentKeys = new Set(currentChildren.map((c) => c.key));
+		const displayKeys = new Set(displayChildren.map((c) => c.key));
+		const removed = displayChildren.filter((c) => !currentKeys.has(c.key) && !exitingKeysRef.current.has(c.key));
+		const added = currentChildren.filter((c) => !displayKeys.has(c.key));
+		if (removed.length === 0 && added.length === 0) {
+			if (currentChildren.some((c) => {
+				const displayChild = displayChildren.find((dc) => dc.key === c.key);
+				return displayChild && displayChild.element !== c.element;
+			})) setDisplayChildren((prev) => prev.map((dc) => {
+				if (exitingKeysRef.current.has(dc.key)) return dc;
+				return currentChildren.find((c) => c.key === dc.key) ?? dc;
+			}));
+			return;
+		}
+		removed.forEach((child, index) => {
+			const delay = getStaggerDelay(index, "exit");
+			exitingKeysRef.current.add(child.key);
+			const processExit = () => {
+				onItemExit?.(child.key);
+				startExitRef.current(child.key).finally(() => {
+					exitingKeysRef.current.delete(child.key);
+				});
+			};
+			if (delay > 0) setTimeout(processExit, delay);
+			else processExit();
+		});
+		if (added.length > 0) {
+			const exitingChildren = displayChildren.filter((c) => !currentKeys.has(c.key));
+			let result = [...currentChildren];
+			exitingChildren.forEach((ec) => {
+				const oldIdx = displayChildren.findIndex((c) => c.key === ec.key);
+				if (oldIdx !== -1 && oldIdx <= result.length) result.splice(oldIdx, 0, ec);
+			});
+			setDisplayChildren(result);
+			added.forEach((child, index) => {
+				const delay = getStaggerDelay(index, "enter");
+				const processEnter = () => {
+					onItemEnter?.(child.key);
+				};
+				if (delay > 0) setTimeout(processEnter, delay);
+				else processEnter();
+			});
+		}
+	}, [
+		currentChildren,
+		displayChildren,
+		getStaggerDelay,
+		onItemExit,
+		onItemEnter
+	]);
+	const presentChildren = useMemo(() => {
+		const currentKeys = new Set(currentChildren.map((c) => c.key));
+		return displayChildren.map(({ key, element }) => {
+			const isNewElement = currentKeys.has(key);
+			const isExiting = exitingKeysRef.current.has(key);
+			return cloneElement(element, {
+				ref: (el) => {
+					if (el) {
+						reorder.registerElement(key, el);
+						if (!el.dataset.reorderState && isNewElement && !isExiting) {
+							el.dataset.reorderState = "entering";
+							startEnterRef.current(key);
+						}
+					} else reorder.registerElement(key, null);
+					const originalRef = element.ref;
+					if (typeof originalRef === "function") originalRef(el);
+					else if (originalRef && typeof originalRef === "object") originalRef.current = el;
+				},
+				"data-reorder-id": key
+			});
+		});
+	}, [
+		displayChildren,
+		currentChildren,
+		reorder.registerElement
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("waapi-reorder-container", "reorder", layout !== "auto" ? `reorder--${layout}` : "", className),
+		style: layoutStyles[layout],
+		children: presentChildren
+	});
+});
+ReorderRoot.displayName = "Reorder";
+
+//#endregion
+export { ReorderRoot };

package/dist/react-ui/primitives/waapi/Reorder/useReorder.d.ts

@@ -0,0 +1,26 @@
+import type { IUseReorderReturn, IUseReorderConfig } from './Reorder.types';
+/**
+ * Hook for managing reorderable lists with FLIP animations.
+ *
+ * Architecture: Thin wrapper around useAnimationOrchestrator.
+ * Delegates all animation logic to the orchestrator and provides
+ * a stable API surface for the Reorder component.
+ *
+ * @param config - Optional reorder configuration (timing, easing, callbacks)
+ * @returns Reorder API with register, exit, enter, and query methods
+ *
+ * @example
+ * ```tsx
+ * const reorder = useReorder({
+ *   onComplete: (id) => removeFromList(id)
+ * });
+ *
+ * <div ref={el => reorder.registerElement('item-1', el)}>
+ *   Item 1
+ * </div>
+ *
+ * await reorder.startItemExit('item-1');
+ * ```
+ */
+export declare function useReorder(config?: IUseReorderConfig): IUseReorderReturn;
+//# sourceMappingURL=useReorder.d.ts.map

package/dist/react-ui/primitives/waapi/Reorder/useReorder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReorder.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Reorder/useReorder.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAE5E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,UAAU,CAAC,MAAM,CAAC,EAAE,iBAAiB,GAAG,iBAAiB,CAmBxE"}

package/dist/react-ui/primitives/waapi/Reorder/useReorder.js

@@ -0,0 +1,48 @@
+import { useAnimationOrchestrator } from "../core/useAnimationOrchestrator.js";
+
+//#region src/react-ui/primitives/waapi/Reorder/useReorder.ts
+/**
+* Hook for managing reorderable lists with FLIP animations.
+*
+* Architecture: Thin wrapper around useAnimationOrchestrator.
+* Delegates all animation logic to the orchestrator and provides
+* a stable API surface for the Reorder component.
+*
+* @param config - Optional reorder configuration (timing, easing, callbacks)
+* @returns Reorder API with register, exit, enter, and query methods
+*
+* @example
+* ```tsx
+* const reorder = useReorder({
+*   onComplete: (id) => removeFromList(id)
+* });
+*
+* <div ref={el => reorder.registerElement('item-1', el)}>
+*   Item 1
+* </div>
+*
+* await reorder.startItemExit('item-1');
+* ```
+*/
+function useReorder(config) {
+	const orchestrator = useAnimationOrchestrator({
+		enterDuration: config?.enterDuration,
+		exitDuration: config?.exitDuration,
+		flipDuration: config?.flipDuration,
+		enterEasing: config?.enterEasing,
+		exitEasing: config?.exitEasing,
+		flipEasing: config?.flipEasing,
+		flipBehavior: config?.flipBehavior,
+		exitPositionStrategy: config?.exitPositionStrategy,
+		onExitComplete: config?.onComplete
+	});
+	return {
+		...orchestrator,
+		registerElement: orchestrator.registerElement,
+		startItemExit: orchestrator.startExit,
+		startItemEnter: orchestrator.startEnter
+	};
+}
+
+//#endregion
+export { useReorder };

package/dist/react-ui/primitives/waapi/Reorder/useReorderPresence.d.ts

@@ -0,0 +1,33 @@
+import { type ReactNode } from 'react';
+import type { IUseReorderPresenceConfig, IUseReorderPresenceReturn } from './Reorder.types';
+/**
+ * Hook for managing presence animations in reorderable lists.
+ *
+ * Follows the pattern where elements stay in DOM until animation completes.
+ * Consumer must keep items in their state until onAnimationComplete fires.
+ * No "ghost" cloning — animations run on actual DOM elements.
+ *
+ * @param children - React children with unique keys
+ * @param config - Presence animation configuration
+ * @returns Presence API with presentChildren, triggerExit, and state queries
+ *
+ * @example
+ * ```tsx
+ * const [items, setItems] = useState(INITIAL_ITEMS);
+ *
+ * const { presentChildren, triggerExit } = useReorderPresence(
+ *   items.map(item => <div key={item.id}>{item.name}</div>),
+ *   {
+ *     onAnimationComplete: (id) => {
+ *       setItems(prev => prev.filter(item => item.id !== id));
+ *     }
+ *   }
+ * );
+ *
+ * const handleDelete = (id: string) => {
+ *   triggerExit(id);
+ * };
+ * ```
+ */
+export declare function useReorderPresence(children: ReactNode, config?: IUseReorderPresenceConfig): IUseReorderPresenceReturn;
+//# sourceMappingURL=useReorderPresence.d.ts.map

package/dist/react-ui/primitives/waapi/Reorder/useReorderPresence.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReorderPresence.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Reorder/useReorderPresence.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EACV,yBAAyB,EACzB,yBAAyB,EAC1B,MAAM,iBAAiB,CAAC;AAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,SAAS,EACnB,MAAM,GAAE,yBAA8B,GACrC,yBAAyB,CA6J3B"}