@jbpark/use-hooks 2.10.0 → 3.0.0

package/dist/hooks/use-window-scroll.mjs

@@ -11,47 +11,69 @@ const useWindowScroll = (targetRef) => {
 		}
 	});
 	useEffect(() => {
-		const target = targetRef?.current?.ownerDocument.defaultView ?? window;
-		const doc = target.document;
-		const calculate = () => {
-			const x = target.scrollX || 0;
-			const y = target.scrollY || 0;
-			const isIOS = /iPad|iPhone|iPod/.test(target.navigator.userAgent);
-			const visualViewport = target.visualViewport;
-			const viewportWidth = isIOS && visualViewport ? visualViewport.width : target.innerWidth;
-			const viewportHeight = isIOS && visualViewport ? visualViewport.height : target.innerHeight;
-			const maxScrollX = Math.max(0, doc.documentElement.scrollWidth - viewportWidth);
-			const maxScrollY = Math.max(0, doc.documentElement.scrollHeight - viewportHeight);
-			const percentX = maxScrollX === 0 ? 0 : Math.min(100, x / maxScrollX * 100);
-			const percentY = maxScrollY === 0 ? 0 : Math.min(100, y / maxScrollY * 100);
-			setState({
-				x,
-				y,
-				percent: {
-					x: Math.floor(Math.max(0, percentX)),
-					y: Math.floor(Math.max(0, percentY))
-				}
-			});
-		};
-		calculate();
-		const onScroll = () => {
+		let cancelled = false;
+		let rafId;
+		let cleanup;
+		const attach = () => {
+			if (cancelled) return;
+			if (targetRef && !targetRef.current) {
+				rafId = requestAnimationFrame(attach);
+				return;
+			}
+			const target = targetRef?.current?.ownerDocument.defaultView ?? window;
+			const doc = target.document;
+			const calculate = () => {
+				const x = target.scrollX || 0;
+				const y = target.scrollY || 0;
+				const isIOS = /iPad|iPhone|iPod/.test(target.navigator.userAgent);
+				const visualViewport = target.visualViewport;
+				const viewportWidth = isIOS && visualViewport ? visualViewport.width : target.innerWidth;
+				const viewportHeight = isIOS && visualViewport ? visualViewport.height : target.innerHeight;
+				const maxScrollX = Math.max(0, doc.documentElement.scrollWidth - viewportWidth);
+				const maxScrollY = Math.max(0, doc.documentElement.scrollHeight - viewportHeight);
+				const percentX = maxScrollX === 0 ? 0 : Math.min(100, x / maxScrollX * 100);
+				const percentY = maxScrollY === 0 ? 0 : Math.min(100, y / maxScrollY * 100);
+				setState({
+					x,
+					y,
+					percent: {
+						x: Math.round(Math.max(0, percentX)),
+						y: Math.round(Math.max(0, percentY))
+					}
+				});
+			};
 			calculate();
+			const onScroll = () => {
+				calculate();
+			};
+			const onResize = () => {
+				setTimeout(calculate, 100);
+			};
+			const onVisualViewportChange = () => {
+				setTimeout(calculate, 50);
+			};
+			target.addEventListener("scroll", onScroll, { passive: true });
+			target.addEventListener("resize", onResize);
+			target.addEventListener("orientationchange", onResize);
+			if (target.visualViewport) target.visualViewport.addEventListener("resize", onVisualViewportChange);
+			let resizeObserver;
+			if (typeof ResizeObserver !== "undefined") {
+				resizeObserver = new ResizeObserver(() => calculate());
+				resizeObserver.observe(doc.documentElement);
+			}
+			cleanup = () => {
+				target.removeEventListener("scroll", onScroll);
+				target.removeEventListener("resize", onResize);
+				target.removeEventListener("orientationchange", onResize);
+				if (target.visualViewport) target.visualViewport.removeEventListener("resize", onVisualViewportChange);
+				resizeObserver?.disconnect();
+			};
 		};
-		const onResize = () => {
-			setTimeout(calculate, 100);
-		};
-		const onVisualViewportChange = () => {
-			setTimeout(calculate, 50);
-		};
-		target.addEventListener("scroll", onScroll, { passive: true });
-		target.addEventListener("resize", onResize);
-		target.addEventListener("orientationchange", onResize);
-		if (target.visualViewport) target.visualViewport.addEventListener("resize", onVisualViewportChange);
+		attach();
 		return () => {
-			target.removeEventListener("scroll", onScroll);
-			target.removeEventListener("resize", onResize);
-			target.removeEventListener("orientationchange", onResize);
-			if (target.visualViewport) target.visualViewport.removeEventListener("resize", onVisualViewportChange);
+			cancelled = true;
+			if (rafId !== void 0) cancelAnimationFrame(rafId);
+			cleanup?.();
 		};
 	}, [targetRef]);
 	return state;

package/dist/hooks/use-window-scroll.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-window-scroll.mjs","names":[],"sources":["../../src/hooks/use-window-scroll.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from 'react';\n\n// Pass a ref to an element rendered inside the window you actually want to\n// track (e.g. a node portaled into an iframe). Without one, this defaults\n// to the host `window`, which is wrong whenever the caller doesn't live in\n// the top-level document. Resolved once per mount from `targetRef.current`.\nconst useWindowScroll = (targetRef?: RefObject<Element | null>) => {\n  const [state, setState] = useState({\n    x: 0,\n    y: 0,\n    percent: {\n      x: 0,\n      y: 0,\n    },\n  });\n\n  useEffect(() => {\n    const target = targetRef?.current?.ownerDocument.defaultView ?? window;\n    const doc = target.document;\n\n    const calculate = () => {\n      const x = target.scrollX || 0;\n      const y = target.scrollY || 0;\n\n      const isIOS = /iPad|iPhone|iPod/.test(target.navigator.userAgent);\n      const visualViewport = target.visualViewport;\n\n      const viewportWidth =\n        isIOS && visualViewport ? visualViewport.width : target.innerWidth;\n\n      const viewportHeight =\n        isIOS && visualViewport ? visualViewport.height : target.innerHeight;\n\n      const maxScrollX = Math.max(\n        0,\n        doc.documentElement.scrollWidth - viewportWidth,\n      );\n      const maxScrollY = Math.max(\n        0,\n        doc.documentElement.scrollHeight - viewportHeight,\n      );\n\n      const percentX =\n        maxScrollX === 0 ? 0 : Math.min(100, (x / maxScrollX) * 100);\n      const percentY =\n        maxScrollY === 0 ? 0 : Math.min(100, (y / maxScrollY) * 100);\n\n      setState({\n        x,\n        y,\n        percent: {\n          x: Math.floor(Math.max(0, percentX)),\n          y: Math.floor(Math.max(0, percentY)),\n        },\n      });\n    };\n\n    calculate();\n\n    const onScroll = () => {\n      calculate();\n    };\n\n    const onResize = () => {\n      setTimeout(calculate, 100);\n    };\n\n    const onVisualViewportChange = () => {\n      setTimeout(calculate, 50);\n    };\n\n    target.addEventListener('scroll', onScroll, { passive: true });\n    target.addEventListener('resize', onResize);\n    target.addEventListener('orientationchange', onResize);\n\n    if (target.visualViewport) {\n      target.visualViewport.addEventListener('resize', onVisualViewportChange);\n    }\n\n    return () => {\n      target.removeEventListener('scroll', onScroll);\n      target.removeEventListener('resize', onResize);\n      target.removeEventListener('orientationchange', onResize);\n\n      if (target.visualViewport) {\n        target.visualViewport.removeEventListener(\n          'resize',\n          onVisualViewportChange,\n        );\n      }\n    };\n  }, [targetRef]);\n\n  return state;\n};\n\nexport default useWindowScroll;\n"],"mappings":";;;AAMA,MAAM,mBAAmB,cAA0C;CACjE,MAAM,CAAC,OAAO,YAAY,SAAS;EACjC,GAAG;EACH,GAAG;EACH,SAAS;GACP,GAAG;GACH,GAAG;GACJ;EACF,CAAC;AAEF,iBAAgB;EACd,MAAM,SAAS,WAAW,SAAS,cAAc,eAAe;EAChE,MAAM,MAAM,OAAO;EAEnB,MAAM,kBAAkB;GACtB,MAAM,IAAI,OAAO,WAAW;GAC5B,MAAM,IAAI,OAAO,WAAW;GAE5B,MAAM,QAAQ,mBAAmB,KAAK,OAAO,UAAU,UAAU;GACjE,MAAM,iBAAiB,OAAO;GAE9B,MAAM,gBACJ,SAAS,iBAAiB,eAAe,QAAQ,OAAO;GAE1D,MAAM,iBACJ,SAAS,iBAAiB,eAAe,SAAS,OAAO;GAE3D,MAAM,aAAa,KAAK,IACtB,GACA,IAAI,gBAAgB,cAAc,cACnC;GACD,MAAM,aAAa,KAAK,IACtB,GACA,IAAI,gBAAgB,eAAe,eACpC;GAED,MAAM,WACJ,eAAe,IAAI,IAAI,KAAK,IAAI,KAAM,IAAI,aAAc,IAAI;GAC9D,MAAM,WACJ,eAAe,IAAI,IAAI,KAAK,IAAI,KAAM,IAAI,aAAc,IAAI;AAE9D,YAAS;IACP;IACA;IACA,SAAS;KACP,GAAG,KAAK,MAAM,KAAK,IAAI,GAAG,SAAS,CAAC;KACpC,GAAG,KAAK,MAAM,KAAK,IAAI,GAAG,SAAS,CAAC;KACrC;IACF,CAAC;;AAGJ,aAAW;EAEX,MAAM,iBAAiB;AACrB,cAAW;;EAGb,MAAM,iBAAiB;AACrB,cAAW,WAAW,IAAI;;EAG5B,MAAM,+BAA+B;AACnC,cAAW,WAAW,GAAG;;AAG3B,SAAO,iBAAiB,UAAU,UAAU,EAAE,SAAS,MAAM,CAAC;AAC9D,SAAO,iBAAiB,UAAU,SAAS;AAC3C,SAAO,iBAAiB,qBAAqB,SAAS;AAEtD,MAAI,OAAO,eACT,QAAO,eAAe,iBAAiB,UAAU,uBAAuB;AAG1E,eAAa;AACX,UAAO,oBAAoB,UAAU,SAAS;AAC9C,UAAO,oBAAoB,UAAU,SAAS;AAC9C,UAAO,oBAAoB,qBAAqB,SAAS;AAEzD,OAAI,OAAO,eACT,QAAO,eAAe,oBACpB,UACA,uBACD;;IAGJ,CAAC,UAAU,CAAC;AAEf,QAAO"}
+{"version":3,"file":"use-window-scroll.mjs","names":[],"sources":["../../src/hooks/use-window-scroll.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from 'react';\n\n// Pass a ref to an element rendered inside the window you actually want to\n// track (e.g. a node portaled into an iframe). Without one, this defaults\n// to the host `window`, which is wrong whenever the caller doesn't live in\n// the top-level document.\nconst useWindowScroll = (targetRef?: RefObject<Element | null>) => {\n  const [state, setState] = useState({\n    x: 0,\n    y: 0,\n    percent: {\n      x: 0,\n      y: 0,\n    },\n  });\n\n  useEffect(() => {\n    let cancelled = false;\n    let rafId: number | undefined;\n    let cleanup: (() => void) | undefined;\n\n    const attach = () => {\n      if (cancelled) {\n        return;\n      }\n\n      // `targetRef.current` can still be null right after mount (e.g. a\n      // conditionally-rendered or portaled node) — retry every frame\n      // until it's populated instead of permanently falling back to the\n      // host `window`.\n      if (targetRef && !targetRef.current) {\n        rafId = requestAnimationFrame(attach);\n        return;\n      }\n\n      const target = targetRef?.current?.ownerDocument.defaultView ?? window;\n      const doc = target.document;\n\n      const calculate = () => {\n        const x = target.scrollX || 0;\n        const y = target.scrollY || 0;\n\n        const isIOS = /iPad|iPhone|iPod/.test(target.navigator.userAgent);\n        const visualViewport = target.visualViewport;\n\n        const viewportWidth =\n          isIOS && visualViewport ? visualViewport.width : target.innerWidth;\n\n        const viewportHeight =\n          isIOS && visualViewport ? visualViewport.height : target.innerHeight;\n\n        const maxScrollX = Math.max(\n          0,\n          doc.documentElement.scrollWidth - viewportWidth,\n        );\n        const maxScrollY = Math.max(\n          0,\n          doc.documentElement.scrollHeight - viewportHeight,\n        );\n\n        const percentX =\n          maxScrollX === 0 ? 0 : Math.min(100, (x / maxScrollX) * 100);\n        const percentY =\n          maxScrollY === 0 ? 0 : Math.min(100, (y / maxScrollY) * 100);\n\n        setState({\n          x,\n          y,\n          percent: {\n            // Rounded (not floored) so reaching the true bottom/right edge\n            // reads as 100 instead of falling just short of it.\n            x: Math.round(Math.max(0, percentX)),\n            y: Math.round(Math.max(0, percentY)),\n          },\n        });\n      };\n\n      calculate();\n\n      const onScroll = () => {\n        calculate();\n      };\n\n      const onResize = () => {\n        setTimeout(calculate, 100);\n      };\n\n      const onVisualViewportChange = () => {\n        setTimeout(calculate, 50);\n      };\n\n      target.addEventListener('scroll', onScroll, { passive: true });\n      target.addEventListener('resize', onResize);\n      target.addEventListener('orientationchange', onResize);\n\n      if (target.visualViewport) {\n        target.visualViewport.addEventListener(\n          'resize',\n          onVisualViewportChange,\n        );\n      }\n\n      // `resize`/`orientationchange` only fire for the viewport itself —\n      // content that grows/shrinks the document height without resizing\n      // the window (images loading, dynamic content) needs its own\n      // observer to keep maxScrollY accurate.\n      let resizeObserver: ResizeObserver | undefined;\n      if (typeof ResizeObserver !== 'undefined') {\n        resizeObserver = new ResizeObserver(() => calculate());\n        resizeObserver.observe(doc.documentElement);\n      }\n\n      cleanup = () => {\n        target.removeEventListener('scroll', onScroll);\n        target.removeEventListener('resize', onResize);\n        target.removeEventListener('orientationchange', onResize);\n\n        if (target.visualViewport) {\n          target.visualViewport.removeEventListener(\n            'resize',\n            onVisualViewportChange,\n          );\n        }\n\n        resizeObserver?.disconnect();\n      };\n    };\n\n    attach();\n\n    return () => {\n      cancelled = true;\n      if (rafId !== undefined) {\n        cancelAnimationFrame(rafId);\n      }\n      cleanup?.();\n    };\n  }, [targetRef]);\n\n  return state;\n};\n\nexport default useWindowScroll;\n"],"mappings":";;;AAMA,MAAM,mBAAmB,cAA0C;CACjE,MAAM,CAAC,OAAO,YAAY,SAAS;EACjC,GAAG;EACH,GAAG;EACH,SAAS;GACP,GAAG;GACH,GAAG;GACJ;EACF,CAAC;AAEF,iBAAgB;EACd,IAAI,YAAY;EAChB,IAAI;EACJ,IAAI;EAEJ,MAAM,eAAe;AACnB,OAAI,UACF;AAOF,OAAI,aAAa,CAAC,UAAU,SAAS;AACnC,YAAQ,sBAAsB,OAAO;AACrC;;GAGF,MAAM,SAAS,WAAW,SAAS,cAAc,eAAe;GAChE,MAAM,MAAM,OAAO;GAEnB,MAAM,kBAAkB;IACtB,MAAM,IAAI,OAAO,WAAW;IAC5B,MAAM,IAAI,OAAO,WAAW;IAE5B,MAAM,QAAQ,mBAAmB,KAAK,OAAO,UAAU,UAAU;IACjE,MAAM,iBAAiB,OAAO;IAE9B,MAAM,gBACJ,SAAS,iBAAiB,eAAe,QAAQ,OAAO;IAE1D,MAAM,iBACJ,SAAS,iBAAiB,eAAe,SAAS,OAAO;IAE3D,MAAM,aAAa,KAAK,IACtB,GACA,IAAI,gBAAgB,cAAc,cACnC;IACD,MAAM,aAAa,KAAK,IACtB,GACA,IAAI,gBAAgB,eAAe,eACpC;IAED,MAAM,WACJ,eAAe,IAAI,IAAI,KAAK,IAAI,KAAM,IAAI,aAAc,IAAI;IAC9D,MAAM,WACJ,eAAe,IAAI,IAAI,KAAK,IAAI,KAAM,IAAI,aAAc,IAAI;AAE9D,aAAS;KACP;KACA;KACA,SAAS;MAGP,GAAG,KAAK,MAAM,KAAK,IAAI,GAAG,SAAS,CAAC;MACpC,GAAG,KAAK,MAAM,KAAK,IAAI,GAAG,SAAS,CAAC;MACrC;KACF,CAAC;;AAGJ,cAAW;GAEX,MAAM,iBAAiB;AACrB,eAAW;;GAGb,MAAM,iBAAiB;AACrB,eAAW,WAAW,IAAI;;GAG5B,MAAM,+BAA+B;AACnC,eAAW,WAAW,GAAG;;AAG3B,UAAO,iBAAiB,UAAU,UAAU,EAAE,SAAS,MAAM,CAAC;AAC9D,UAAO,iBAAiB,UAAU,SAAS;AAC3C,UAAO,iBAAiB,qBAAqB,SAAS;AAEtD,OAAI,OAAO,eACT,QAAO,eAAe,iBACpB,UACA,uBACD;GAOH,IAAI;AACJ,OAAI,OAAO,mBAAmB,aAAa;AACzC,qBAAiB,IAAI,qBAAqB,WAAW,CAAC;AACtD,mBAAe,QAAQ,IAAI,gBAAgB;;AAG7C,mBAAgB;AACd,WAAO,oBAAoB,UAAU,SAAS;AAC9C,WAAO,oBAAoB,UAAU,SAAS;AAC9C,WAAO,oBAAoB,qBAAqB,SAAS;AAEzD,QAAI,OAAO,eACT,QAAO,eAAe,oBACpB,UACA,uBACD;AAGH,oBAAgB,YAAY;;;AAIhC,UAAQ;AAER,eAAa;AACX,eAAY;AACZ,OAAI,UAAU,OACZ,sBAAqB,MAAM;AAE7B,cAAW;;IAEZ,CAAC,UAAU,CAAC;AAEf,QAAO"}

package/dist/index.d.mts

@@ -1,21 +1,32 @@
 import { useDebounce } from "./hooks/use-debounce.mjs";
+import { useDebouncedValue } from "./hooks/use-debounced-value.mjs";
 import { useBodyScrollLock } from "./hooks/use-body-scroll-lock.mjs";
 import { useClickOutside } from "./hooks/use-click-outside.mjs";
 import { useControllableState } from "./hooks/use-controllable-state.mjs";
 import { useElementPosition } from "./hooks/use-element-position.mjs";
 import { useElementScroll } from "./hooks/use-element-scroll.mjs";
+import { useEventListener } from "./hooks/use-event-listener.mjs";
+import { useFileDrop } from "./hooks/use-file-drop.mjs";
 import { useFileToDataUrl } from "./hooks/use-file-to-data-url.mjs";
 import { useHistoryState } from "./hooks/use-history-state.mjs";
 import { useIntersectionObserver } from "./hooks/use-intersection-observer.mjs";
+import { useInterval } from "./hooks/use-interval.mjs";
 import { useResponsiveSize } from "./hooks/use-responsive-size.mjs";
 import { useImage } from "./hooks/use-image.mjs";
+import { useKeyPress } from "./hooks/use-key-press.mjs";
 import { useLocalStorage } from "./hooks/use-local-storage.mjs";
+import { useMergedRef } from "./hooks/use-merged-ref.mjs";
 import { useMultiSelect } from "./hooks/use-multi-select.mjs";
+import { useMutationObserver } from "./hooks/use-mutation-observer.mjs";
+import { usePrevious } from "./hooks/use-previous.mjs";
 import { useRecursiveTimeout } from "./hooks/use-recursive-timeout.mjs";
+import { useResizeObserver } from "./hooks/use-resize-observer.mjs";
 import { useScrollToElements } from "./hooks/use-scroll-to-elements.mjs";
 import { useThrottle } from "./hooks/use-throttle.mjs";
-import { useTimeline } from "./hooks/use-timeline.mjs";
+import { useThrottledCallback } from "./hooks/use-throttled-callback.mjs";
+import { useTimeout } from "./hooks/use-timeout.mjs";
+import { useToggle } from "./hooks/use-toggle.mjs";
 import { useWindowScroll } from "./hooks/use-window-scroll.mjs";
 import { useViewport } from "./hooks/use-viewport.mjs";
 import "./hooks/index.mjs";
-export { useBodyScrollLock, useClickOutside, useControllableState, useDebounce, useElementPosition, useElementScroll, useFileToDataUrl, useHistoryState, useImage, useIntersectionObserver, useLocalStorage, useMultiSelect, useRecursiveTimeout, useResponsiveSize, useScrollToElements, useThrottle, useTimeline, useViewport, useWindowScroll };
+export { useBodyScrollLock, useClickOutside, useControllableState, useDebounce, useDebouncedValue, useElementPosition, useElementScroll, useEventListener, useFileDrop, useFileToDataUrl, useHistoryState, useImage, useIntersectionObserver, useInterval, useKeyPress, useLocalStorage, useMergedRef, useMultiSelect, useMutationObserver, usePrevious, useRecursiveTimeout, useResizeObserver, useResponsiveSize, useScrollToElements, useThrottle, useThrottledCallback, useTimeout, useToggle, useViewport, useWindowScroll };

package/dist/index.mjs

@@ -1,22 +1,33 @@
 import useDebounce from "./hooks/use-debounce.mjs";
+import useDebouncedValue from "./hooks/use-debounced-value.mjs";
 import useBodyScrollLock from "./hooks/use-body-scroll-lock.mjs";
 import useClickOutside from "./hooks/use-click-outside.mjs";
 import useControllableState from "./hooks/use-controllable-state.mjs";
 import useElementPosition from "./hooks/use-element-position.mjs";
 import useElementScroll from "./hooks/use-element-scroll.mjs";
+import useEventListener from "./hooks/use-event-listener.mjs";
+import useFileDrop from "./hooks/use-file-drop.mjs";
 import useFileToDataUrl from "./hooks/use-file-to-data-url.mjs";
 import useHistoryState from "./hooks/use-history-state.mjs";
 import useIntersectionObserver from "./hooks/use-intersection-observer.mjs";
+import useInterval from "./hooks/use-interval.mjs";
 import useResponsiveSize from "./hooks/use-responsive-size.mjs";
 import useImage from "./hooks/use-image.mjs";
+import useKeyPress from "./hooks/use-key-press.mjs";
 import useLocalStorage from "./hooks/use-local-storage.mjs";
+import useMergedRef from "./hooks/use-merged-ref.mjs";
 import useMultiSelect from "./hooks/use-multi-select.mjs";
+import useMutationObserver from "./hooks/use-mutation-observer.mjs";
+import usePrevious from "./hooks/use-previous.mjs";
 import useRecursiveTimeout from "./hooks/use-recursive-timeout.mjs";
+import useResizeObserver from "./hooks/use-resize-observer.mjs";
 import useScrollToElements from "./hooks/use-scroll-to-elements.mjs";
+import useThrottledCallback from "./hooks/use-throttled-callback.mjs";
 import useThrottle from "./hooks/use-throttle.mjs";
-import useTimeline from "./hooks/use-timeline.mjs";
+import useTimeout from "./hooks/use-timeout.mjs";
+import useToggle from "./hooks/use-toggle.mjs";
 import useWindowScroll from "./hooks/use-window-scroll.mjs";
 import useViewport from "./hooks/use-viewport.mjs";
 import "./hooks/index.mjs";
 
-export { useBodyScrollLock, useClickOutside, useControllableState, useDebounce, useElementPosition, useElementScroll, useFileToDataUrl, useHistoryState, useImage, useIntersectionObserver, useLocalStorage, useMultiSelect, useRecursiveTimeout, useResponsiveSize, useScrollToElements, useThrottle, useTimeline, useViewport, useWindowScroll };
+export { useBodyScrollLock, useClickOutside, useControllableState, useDebounce, useDebouncedValue, useElementPosition, useElementScroll, useEventListener, useFileDrop, useFileToDataUrl, useHistoryState, useImage, useIntersectionObserver, useInterval, useKeyPress, useLocalStorage, useMergedRef, useMultiSelect, useMutationObserver, usePrevious, useRecursiveTimeout, useResizeObserver, useResponsiveSize, useScrollToElements, useThrottle, useThrottledCallback, useTimeout, useToggle, useViewport, useWindowScroll };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/use-hooks",
-  "version": "2.10.0",
+  "version": "3.0.0",
   "description": "A collection of reusable React 19 hooks for common UI and interaction patterns",
   "keywords": [
     "react",

package/dist/hooks/use-timeline.d.mts

@@ -1,50 +0,0 @@
-import * as react from "react";
-
-//#region src/hooks/use-timeline.d.ts
-interface TimelineStep {
-  scale?: number;
-  rotate?: {
-    x?: number;
-    y?: number;
-    z?: number;
-  };
-  position?: {
-    x?: number;
-    y?: number;
-  };
-  top?: number;
-  left?: number;
-  width?: number;
-  height?: number;
-  zIndex?: number;
-  filter?: string;
-  backgroundColor?: string;
-  opacity?: number;
-  selector: string;
-  transition: Transition;
-}
-interface Transition {
-  duration: number;
-  ease?: string;
-  delay?: number;
-  easeX?: string;
-  easeY?: string;
-}
-interface Options {
-  steps?: TimelineStep[];
-  loading?: boolean;
-  immediate?: boolean;
-  loop?: boolean;
-}
-declare const useTimeline: ({
-  steps,
-  loading,
-  immediate,
-  loop
-}: Options) => {
-  ref: react.RefObject<HTMLDivElement | null>;
-  completed: boolean;
-};
-//#endregion
-export { useTimeline };
-//# sourceMappingURL=use-timeline.d.mts.map

package/dist/hooks/use-timeline.mjs

@@ -1,176 +0,0 @@
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-
-//#region src/hooks/use-timeline.ts
-const registeredProperties = /* @__PURE__ */ new Set();
-const registerCSSProperty = (name, syntax = "<length>", initialValue = "0px") => {
-	if (registeredProperties.has(name) || typeof CSS === "undefined" || !CSS.registerProperty) return;
-	try {
-		CSS.registerProperty({
-			name,
-			syntax,
-			inherits: false,
-			initialValue
-		});
-		registeredProperties.add(name);
-	} catch {}
-};
-const buildTimeline = (steps) => {
-	const groups = [];
-	for (const step of steps) if (step.transition.delay === 0 && groups.length > 0) groups[groups.length - 1]?.push(step);
-	else groups.push([step]);
-	return groups;
-};
-const buildTransform = (step) => {
-	const parts = [];
-	if (step.position?.x != null || step.position?.y != null) parts.push(`translate(${step.position.x ?? 0}px, ${step.position.y ?? 0}px)`);
-	if (step.scale != null) parts.push(`scale(${step.scale})`);
-	if (step.rotate?.x != null) parts.push(`rotateX(${step.rotate.x}deg)`);
-	if (step.rotate?.y != null) parts.push(`rotateY(${step.rotate.y}deg)`);
-	if (step.rotate?.z != null) parts.push(`rotateZ(${step.rotate.z}deg)`);
-	return parts.join(" ") || void 0;
-};
-const applyStep = (container, step, skipTransition) => {
-	const elements = container.matches(step.selector) ? [container] : Array.from(container.querySelectorAll(step.selector));
-	if (!elements.length) return;
-	const dur = `${step.transition.duration}ms`;
-	const eas = step.transition.ease ?? "ease-out";
-	const easX = step.transition.easeX;
-	const easY = step.transition.easeY;
-	const hasCurve = !!(easX || easY);
-	const timers = [];
-	elements.forEach((el) => {
-		if (skipTransition) el.style.transition = "none";
-		else if (hasCurve) {
-			const xEase = easX ?? eas;
-			const yEase = easY ?? eas;
-			el.style.transition = [
-				`--tx ${dur} ${xEase}`,
-				`--ty ${dur} ${yEase}`,
-				`--s ${dur} ${eas}`,
-				`rotate ${dur} ${eas}`,
-				`width ${dur} ${eas}`,
-				`height ${dur} ${eas}`,
-				`filter ${dur} ${eas}`,
-				`opacity ${dur} ${eas}`
-			].join(", ");
-		} else el.style.transition = `all ${dur} ${eas}`;
-		if (step.backgroundColor) el.style.backgroundColor = step.backgroundColor;
-		if (step.opacity !== void 0) el.style.opacity = String(step.opacity);
-		if (step.top !== void 0) el.style.top = `${step.top}px`;
-		if (step.left !== void 0) el.style.left = `${step.left}px`;
-		if (step.width !== void 0) el.style.width = `${step.width}px`;
-		if (step.height !== void 0) el.style.height = `${step.height}px`;
-		if (step.zIndex !== void 0) if (skipTransition) el.style.zIndex = String(step.zIndex);
-		else {
-			const timerId = setTimeout(() => {
-				el.style.zIndex = String(step.zIndex);
-			}, step.transition.duration / 2);
-			timers.push(timerId);
-		}
-		if (step.filter !== void 0) el.style.filter = step.filter;
-		if (step.rotate?.z !== void 0) el.style.rotate = `${step.rotate.z}deg`;
-		if (hasCurve) {
-			if (step.position?.x != null || step.position?.y != null) {
-				el.style.setProperty("--tx", `${step.position.x ?? 0}px`);
-				el.style.setProperty("--ty", `${step.position.y ?? 0}px`);
-			}
-			if (step.scale != null) el.style.setProperty("--s", String(step.scale));
-			el.style.transform = `translate(var(--tx), var(--ty)) scale(var(--s, 1))`;
-		} else {
-			const transform = buildTransform(step);
-			if (transform) el.style.transform = transform;
-		}
-	});
-	return timers;
-};
-const useTimeline = ({ steps = [], loading, immediate, loop }) => {
-	const [slotIndex, setSlotIndex] = useState(-1);
-	const [completed, setCompleted] = useState(() => !!immediate);
-	const ref = useRef(null);
-	const timeline = useMemo(() => buildTimeline(steps), [steps]);
-	const hasCurveSteps = useMemo(() => steps.some((s) => s.transition.easeX || s.transition.easeY), [steps]);
-	useLayoutEffect(() => {
-		if (hasCurveSteps) {
-			registerCSSProperty("--tx");
-			registerCSSProperty("--ty");
-			registerCSSProperty("--s", "<number>", "1");
-		}
-	}, [hasCurveSteps]);
-	useLayoutEffect(() => {
-		if (!immediate || !ref.current || !steps.length) return;
-		const container = ref.current;
-		steps.forEach((step) => applyStep(container, step, true));
-	}, [immediate, steps]);
-	useEffect(() => {
-		if (immediate || loading || !timeline.length) return;
-		const firstDelay = timeline[0]?.[0]?.transition.delay ?? 0;
-		const timerId = window.setTimeout(() => {
-			requestAnimationFrame(() => setSlotIndex(0));
-		}, firstDelay);
-		return () => clearTimeout(timerId);
-	}, [
-		loading,
-		timeline,
-		immediate
-	]);
-	useEffect(() => {
-		if (immediate || loading || slotIndex < 0) return;
-		const isLast = slotIndex >= timeline.length - 1;
-		if (isLast && !loop) return;
-		const currentSlot = timeline[slotIndex];
-		const maxDuration = Math.max(...currentSlot?.map((s) => s.transition.duration) ?? [0]);
-		const nextIndex = isLast ? 0 : slotIndex + 1;
-		const nextDelay = timeline[nextIndex]?.[0]?.transition.delay ?? 0;
-		const timerId = window.setTimeout(() => {
-			setSlotIndex(nextIndex);
-		}, maxDuration + nextDelay);
-		return () => clearTimeout(timerId);
-	}, [
-		loading,
-		slotIndex,
-		timeline,
-		immediate,
-		loop
-	]);
-	useEffect(() => {
-		if (immediate || slotIndex < 0 || !ref.current) return;
-		const container = ref.current;
-		const timers = [];
-		const rafId = requestAnimationFrame(() => {
-			timeline[slotIndex]?.forEach((step) => {
-				const stepTimers = applyStep(container, step);
-				if (stepTimers) timers.push(...stepTimers);
-			});
-		});
-		return () => {
-			cancelAnimationFrame(rafId);
-			timers.forEach(clearTimeout);
-		};
-	}, [
-		immediate,
-		slotIndex,
-		timeline
-	]);
-	useEffect(() => {
-		if (immediate || loop || slotIndex < 0 || slotIndex < timeline.length - 1 || !timeline.length) return;
-		const lastSlot = timeline[slotIndex];
-		const maxDuration = Math.max(...lastSlot?.map((s) => s.transition.duration) ?? [0]);
-		const timerId = window.setTimeout(() => {
-			setCompleted(true);
-		}, maxDuration);
-		return () => clearTimeout(timerId);
-	}, [
-		slotIndex,
-		timeline,
-		immediate,
-		loop
-	]);
-	return {
-		ref,
-		completed
-	};
-};
-
-//#endregion
-export { useTimeline as default };
-//# sourceMappingURL=use-timeline.mjs.map

package/dist/hooks/use-timeline.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-timeline.mjs","names":[],"sources":["../../src/hooks/use-timeline.ts"],"sourcesContent":["import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nconst registeredProperties = new Set<string>();\n\nconst registerCSSProperty = (\n  name: string,\n  syntax = '<length>',\n  initialValue = '0px',\n) => {\n  if (\n    registeredProperties.has(name) ||\n    typeof CSS === 'undefined' ||\n    !CSS.registerProperty\n  ) {\n    return;\n  }\n\n  try {\n    CSS.registerProperty({\n      name,\n      syntax,\n      inherits: false,\n      initialValue,\n    });\n    registeredProperties.add(name);\n  } catch {\n    // 이미 등록된 경우 무시\n  }\n};\n\nexport interface TimelineStep {\n  scale?: number;\n  rotate?: { x?: number; y?: number; z?: number };\n  position?: { x?: number; y?: number };\n  top?: number;\n  left?: number;\n  width?: number;\n  height?: number;\n  zIndex?: number;\n  filter?: string;\n  backgroundColor?: string;\n  opacity?: number;\n  selector: string;\n  transition: Transition;\n}\n\ninterface Transition {\n  duration: number;\n  ease?: string;\n  delay?: number;\n  easeX?: string;\n  easeY?: string;\n}\n\ninterface Options {\n  steps?: TimelineStep[];\n  loading?: boolean;\n  immediate?: boolean;\n  loop?: boolean;\n}\n\nconst buildTimeline = (steps: TimelineStep[]): TimelineStep[][] => {\n  const groups: TimelineStep[][] = [];\n\n  for (const step of steps) {\n    if (step.transition.delay === 0 && groups.length > 0) {\n      groups[groups.length - 1]?.push(step);\n    } else {\n      groups.push([step]);\n    }\n  }\n\n  return groups;\n};\n\nconst buildTransform = (step: TimelineStep) => {\n  const parts: string[] = [];\n\n  if (step.position?.x != null || step.position?.y != null) {\n    parts.push(\n      `translate(${step.position.x ?? 0}px, ${step.position.y ?? 0}px)`,\n    );\n  }\n\n  if (step.scale != null) {\n    parts.push(`scale(${step.scale})`);\n  }\n\n  if (step.rotate?.x != null) {\n    parts.push(`rotateX(${step.rotate.x}deg)`);\n  }\n\n  if (step.rotate?.y != null) {\n    parts.push(`rotateY(${step.rotate.y}deg)`);\n  }\n\n  if (step.rotate?.z != null) {\n    parts.push(`rotateZ(${step.rotate.z}deg)`);\n  }\n\n  return parts.join(' ') || undefined;\n};\n\nconst applyStep = (\n  container: HTMLElement,\n  step: TimelineStep,\n  skipTransition?: boolean,\n) => {\n  const elements = container.matches(step.selector)\n    ? [container]\n    : Array.from(container.querySelectorAll<HTMLElement>(step.selector));\n\n  if (!elements.length) {\n    return;\n  }\n\n  const dur = `${step.transition.duration}ms`;\n  const eas = step.transition.ease ?? 'ease-out';\n  const easX = step.transition.easeX;\n  const easY = step.transition.easeY;\n  const hasCurve = !!(easX || easY);\n  const timers: ReturnType<typeof setTimeout>[] = [];\n\n  elements.forEach(el => {\n    if (skipTransition) {\n      el.style.transition = 'none';\n    } else if (hasCurve) {\n      const xEase = easX ?? eas;\n      const yEase = easY ?? eas;\n      el.style.transition = [\n        `--tx ${dur} ${xEase}`,\n        `--ty ${dur} ${yEase}`,\n        `--s ${dur} ${eas}`,\n        `rotate ${dur} ${eas}`,\n        `width ${dur} ${eas}`,\n        `height ${dur} ${eas}`,\n        `filter ${dur} ${eas}`,\n        `opacity ${dur} ${eas}`,\n      ].join(', ');\n    } else {\n      el.style.transition = `all ${dur} ${eas}`;\n    }\n\n    if (step.backgroundColor) {\n      el.style.backgroundColor = step.backgroundColor;\n    }\n\n    if (step.opacity !== undefined) {\n      el.style.opacity = String(step.opacity);\n    }\n\n    if (step.top !== undefined) {\n      el.style.top = `${step.top}px`;\n    }\n\n    if (step.left !== undefined) {\n      el.style.left = `${step.left}px`;\n    }\n\n    if (step.width !== undefined) {\n      el.style.width = `${step.width}px`;\n    }\n\n    if (step.height !== undefined) {\n      el.style.height = `${step.height}px`;\n    }\n\n    if (step.zIndex !== undefined) {\n      if (skipTransition) {\n        el.style.zIndex = String(step.zIndex);\n      } else {\n        const timerId = setTimeout(() => {\n          el.style.zIndex = String(step.zIndex);\n        }, step.transition.duration / 2);\n        timers.push(timerId);\n      }\n    }\n\n    if (step.filter !== undefined) {\n      el.style.filter = step.filter;\n    }\n\n    if (step.rotate?.z !== undefined) {\n      el.style.rotate = `${step.rotate.z}deg`;\n    }\n\n    if (hasCurve) {\n      if (step.position?.x != null || step.position?.y != null) {\n        el.style.setProperty('--tx', `${step.position.x ?? 0}px`);\n        el.style.setProperty('--ty', `${step.position.y ?? 0}px`);\n      }\n      if (step.scale != null) {\n        el.style.setProperty('--s', String(step.scale));\n      }\n      el.style.transform = `translate(var(--tx), var(--ty)) scale(var(--s, 1))`;\n    } else {\n      const transform = buildTransform(step);\n\n      if (transform) {\n        el.style.transform = transform;\n      }\n    }\n  });\n\n  return timers;\n};\n\nconst useTimeline = ({ steps = [], loading, immediate, loop }: Options) => {\n  const [slotIndex, setSlotIndex] = useState(-1);\n  const [completed, setCompleted] = useState(() => !!immediate);\n\n  const ref = useRef<HTMLDivElement>(null);\n  const timeline = useMemo(() => buildTimeline(steps), [steps]);\n  const hasCurveSteps = useMemo(\n    () => steps.some(s => s.transition.easeX || s.transition.easeY),\n    [steps],\n  );\n\n  useLayoutEffect(() => {\n    if (hasCurveSteps) {\n      registerCSSProperty('--tx');\n      registerCSSProperty('--ty');\n      registerCSSProperty('--s', '<number>', '1');\n    }\n  }, [hasCurveSteps]);\n\n  useLayoutEffect(() => {\n    if (!immediate || !ref.current || !steps.length) {\n      return;\n    }\n\n    const container = ref.current;\n    steps.forEach(step => applyStep(container, step, true));\n  }, [immediate, steps]);\n\n  useEffect(() => {\n    if (immediate || loading || !timeline.length) {\n      return;\n    }\n\n    const firstDelay = timeline[0]?.[0]?.transition.delay ?? 0;\n    const timerId = window.setTimeout(() => {\n      requestAnimationFrame(() => setSlotIndex(0));\n    }, firstDelay);\n\n    return () => clearTimeout(timerId);\n  }, [loading, timeline, immediate]);\n\n  useEffect(() => {\n    if (immediate || loading || slotIndex < 0) {\n      return;\n    }\n\n    const isLast = slotIndex >= timeline.length - 1;\n\n    if (isLast && !loop) {\n      return;\n    }\n\n    const currentSlot = timeline[slotIndex];\n    const maxDuration = Math.max(\n      ...(currentSlot?.map(s => s.transition.duration) ?? [0]),\n    );\n\n    const nextIndex = isLast ? 0 : slotIndex + 1;\n    const nextDelay = timeline[nextIndex]?.[0]?.transition.delay ?? 0;\n\n    const timerId = window.setTimeout(() => {\n      setSlotIndex(nextIndex);\n    }, maxDuration + nextDelay);\n\n    return () => clearTimeout(timerId);\n  }, [loading, slotIndex, timeline, immediate, loop]);\n\n  useEffect(() => {\n    if (immediate || slotIndex < 0 || !ref.current) {\n      return;\n    }\n\n    const container = ref.current;\n    const timers: ReturnType<typeof setTimeout>[] = [];\n\n    const rafId = requestAnimationFrame(() => {\n      timeline[slotIndex]?.forEach(step => {\n        const stepTimers = applyStep(container, step);\n\n        if (stepTimers) {\n          timers.push(...stepTimers);\n        }\n      });\n    });\n\n    return () => {\n      cancelAnimationFrame(rafId);\n      timers.forEach(clearTimeout);\n    };\n  }, [immediate, slotIndex, timeline]);\n\n  useEffect(() => {\n    if (\n      immediate ||\n      loop ||\n      slotIndex < 0 ||\n      slotIndex < timeline.length - 1 ||\n      !timeline.length\n    ) {\n      return;\n    }\n\n    const lastSlot = timeline[slotIndex];\n    const maxDuration = Math.max(\n      ...(lastSlot?.map(s => s.transition.duration) ?? [0]),\n    );\n\n    const timerId = window.setTimeout(() => {\n      setCompleted(true);\n    }, maxDuration);\n\n    return () => clearTimeout(timerId);\n  }, [slotIndex, timeline, immediate, loop]);\n\n  return { ref, completed };\n};\n\nexport default useTimeline;\n"],"mappings":";;;AAEA,MAAM,uCAAuB,IAAI,KAAa;AAE9C,MAAM,uBACJ,MACA,SAAS,YACT,eAAe,UACZ;AACH,KACE,qBAAqB,IAAI,KAAK,IAC9B,OAAO,QAAQ,eACf,CAAC,IAAI,iBAEL;AAGF,KAAI;AACF,MAAI,iBAAiB;GACnB;GACA;GACA,UAAU;GACV;GACD,CAAC;AACF,uBAAqB,IAAI,KAAK;SACxB;;AAoCV,MAAM,iBAAiB,UAA4C;CACjE,MAAM,SAA2B,EAAE;AAEnC,MAAK,MAAM,QAAQ,MACjB,KAAI,KAAK,WAAW,UAAU,KAAK,OAAO,SAAS,EACjD,QAAO,OAAO,SAAS,IAAI,KAAK,KAAK;KAErC,QAAO,KAAK,CAAC,KAAK,CAAC;AAIvB,QAAO;;AAGT,MAAM,kBAAkB,SAAuB;CAC7C,MAAM,QAAkB,EAAE;AAE1B,KAAI,KAAK,UAAU,KAAK,QAAQ,KAAK,UAAU,KAAK,KAClD,OAAM,KACJ,aAAa,KAAK,SAAS,KAAK,EAAE,MAAM,KAAK,SAAS,KAAK,EAAE,KAC9D;AAGH,KAAI,KAAK,SAAS,KAChB,OAAM,KAAK,SAAS,KAAK,MAAM,GAAG;AAGpC,KAAI,KAAK,QAAQ,KAAK,KACpB,OAAM,KAAK,WAAW,KAAK,OAAO,EAAE,MAAM;AAG5C,KAAI,KAAK,QAAQ,KAAK,KACpB,OAAM,KAAK,WAAW,KAAK,OAAO,EAAE,MAAM;AAG5C,KAAI,KAAK,QAAQ,KAAK,KACpB,OAAM,KAAK,WAAW,KAAK,OAAO,EAAE,MAAM;AAG5C,QAAO,MAAM,KAAK,IAAI,IAAI;;AAG5B,MAAM,aACJ,WACA,MACA,mBACG;CACH,MAAM,WAAW,UAAU,QAAQ,KAAK,SAAS,GAC7C,CAAC,UAAU,GACX,MAAM,KAAK,UAAU,iBAA8B,KAAK,SAAS,CAAC;AAEtE,KAAI,CAAC,SAAS,OACZ;CAGF,MAAM,MAAM,GAAG,KAAK,WAAW,SAAS;CACxC,MAAM,MAAM,KAAK,WAAW,QAAQ;CACpC,MAAM,OAAO,KAAK,WAAW;CAC7B,MAAM,OAAO,KAAK,WAAW;CAC7B,MAAM,WAAW,CAAC,EAAE,QAAQ;CAC5B,MAAM,SAA0C,EAAE;AAElD,UAAS,SAAQ,OAAM;AACrB,MAAI,eACF,IAAG,MAAM,aAAa;WACb,UAAU;GACnB,MAAM,QAAQ,QAAQ;GACtB,MAAM,QAAQ,QAAQ;AACtB,MAAG,MAAM,aAAa;IACpB,QAAQ,IAAI,GAAG;IACf,QAAQ,IAAI,GAAG;IACf,OAAO,IAAI,GAAG;IACd,UAAU,IAAI,GAAG;IACjB,SAAS,IAAI,GAAG;IAChB,UAAU,IAAI,GAAG;IACjB,UAAU,IAAI,GAAG;IACjB,WAAW,IAAI,GAAG;IACnB,CAAC,KAAK,KAAK;QAEZ,IAAG,MAAM,aAAa,OAAO,IAAI,GAAG;AAGtC,MAAI,KAAK,gBACP,IAAG,MAAM,kBAAkB,KAAK;AAGlC,MAAI,KAAK,YAAY,OACnB,IAAG,MAAM,UAAU,OAAO,KAAK,QAAQ;AAGzC,MAAI,KAAK,QAAQ,OACf,IAAG,MAAM,MAAM,GAAG,KAAK,IAAI;AAG7B,MAAI,KAAK,SAAS,OAChB,IAAG,MAAM,OAAO,GAAG,KAAK,KAAK;AAG/B,MAAI,KAAK,UAAU,OACjB,IAAG,MAAM,QAAQ,GAAG,KAAK,MAAM;AAGjC,MAAI,KAAK,WAAW,OAClB,IAAG,MAAM,SAAS,GAAG,KAAK,OAAO;AAGnC,MAAI,KAAK,WAAW,OAClB,KAAI,eACF,IAAG,MAAM,SAAS,OAAO,KAAK,OAAO;OAChC;GACL,MAAM,UAAU,iBAAiB;AAC/B,OAAG,MAAM,SAAS,OAAO,KAAK,OAAO;MACpC,KAAK,WAAW,WAAW,EAAE;AAChC,UAAO,KAAK,QAAQ;;AAIxB,MAAI,KAAK,WAAW,OAClB,IAAG,MAAM,SAAS,KAAK;AAGzB,MAAI,KAAK,QAAQ,MAAM,OACrB,IAAG,MAAM,SAAS,GAAG,KAAK,OAAO,EAAE;AAGrC,MAAI,UAAU;AACZ,OAAI,KAAK,UAAU,KAAK,QAAQ,KAAK,UAAU,KAAK,MAAM;AACxD,OAAG,MAAM,YAAY,QAAQ,GAAG,KAAK,SAAS,KAAK,EAAE,IAAI;AACzD,OAAG,MAAM,YAAY,QAAQ,GAAG,KAAK,SAAS,KAAK,EAAE,IAAI;;AAE3D,OAAI,KAAK,SAAS,KAChB,IAAG,MAAM,YAAY,OAAO,OAAO,KAAK,MAAM,CAAC;AAEjD,MAAG,MAAM,YAAY;SAChB;GACL,MAAM,YAAY,eAAe,KAAK;AAEtC,OAAI,UACF,IAAG,MAAM,YAAY;;GAGzB;AAEF,QAAO;;AAGT,MAAM,eAAe,EAAE,QAAQ,EAAE,EAAE,SAAS,WAAW,WAAoB;CACzE,MAAM,CAAC,WAAW,gBAAgB,SAAS,GAAG;CAC9C,MAAM,CAAC,WAAW,gBAAgB,eAAe,CAAC,CAAC,UAAU;CAE7D,MAAM,MAAM,OAAuB,KAAK;CACxC,MAAM,WAAW,cAAc,cAAc,MAAM,EAAE,CAAC,MAAM,CAAC;CAC7D,MAAM,gBAAgB,cACd,MAAM,MAAK,MAAK,EAAE,WAAW,SAAS,EAAE,WAAW,MAAM,EAC/D,CAAC,MAAM,CACR;AAED,uBAAsB;AACpB,MAAI,eAAe;AACjB,uBAAoB,OAAO;AAC3B,uBAAoB,OAAO;AAC3B,uBAAoB,OAAO,YAAY,IAAI;;IAE5C,CAAC,cAAc,CAAC;AAEnB,uBAAsB;AACpB,MAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,MAAM,OACvC;EAGF,MAAM,YAAY,IAAI;AACtB,QAAM,SAAQ,SAAQ,UAAU,WAAW,MAAM,KAAK,CAAC;IACtD,CAAC,WAAW,MAAM,CAAC;AAEtB,iBAAgB;AACd,MAAI,aAAa,WAAW,CAAC,SAAS,OACpC;EAGF,MAAM,aAAa,SAAS,KAAK,IAAI,WAAW,SAAS;EACzD,MAAM,UAAU,OAAO,iBAAiB;AACtC,+BAA4B,aAAa,EAAE,CAAC;KAC3C,WAAW;AAEd,eAAa,aAAa,QAAQ;IACjC;EAAC;EAAS;EAAU;EAAU,CAAC;AAElC,iBAAgB;AACd,MAAI,aAAa,WAAW,YAAY,EACtC;EAGF,MAAM,SAAS,aAAa,SAAS,SAAS;AAE9C,MAAI,UAAU,CAAC,KACb;EAGF,MAAM,cAAc,SAAS;EAC7B,MAAM,cAAc,KAAK,IACvB,GAAI,aAAa,KAAI,MAAK,EAAE,WAAW,SAAS,IAAI,CAAC,EAAE,CACxD;EAED,MAAM,YAAY,SAAS,IAAI,YAAY;EAC3C,MAAM,YAAY,SAAS,aAAa,IAAI,WAAW,SAAS;EAEhE,MAAM,UAAU,OAAO,iBAAiB;AACtC,gBAAa,UAAU;KACtB,cAAc,UAAU;AAE3B,eAAa,aAAa,QAAQ;IACjC;EAAC;EAAS;EAAW;EAAU;EAAW;EAAK,CAAC;AAEnD,iBAAgB;AACd,MAAI,aAAa,YAAY,KAAK,CAAC,IAAI,QACrC;EAGF,MAAM,YAAY,IAAI;EACtB,MAAM,SAA0C,EAAE;EAElD,MAAM,QAAQ,4BAA4B;AACxC,YAAS,YAAY,SAAQ,SAAQ;IACnC,MAAM,aAAa,UAAU,WAAW,KAAK;AAE7C,QAAI,WACF,QAAO,KAAK,GAAG,WAAW;KAE5B;IACF;AAEF,eAAa;AACX,wBAAqB,MAAM;AAC3B,UAAO,QAAQ,aAAa;;IAE7B;EAAC;EAAW;EAAW;EAAS,CAAC;AAEpC,iBAAgB;AACd,MACE,aACA,QACA,YAAY,KACZ,YAAY,SAAS,SAAS,KAC9B,CAAC,SAAS,OAEV;EAGF,MAAM,WAAW,SAAS;EAC1B,MAAM,cAAc,KAAK,IACvB,GAAI,UAAU,KAAI,MAAK,EAAE,WAAW,SAAS,IAAI,CAAC,EAAE,CACrD;EAED,MAAM,UAAU,OAAO,iBAAiB;AACtC,gBAAa,KAAK;KACjB,YAAY;AAEf,eAAa,aAAa,QAAQ;IACjC;EAAC;EAAW;EAAU;EAAW;EAAK,CAAC;AAE1C,QAAO;EAAE;EAAK;EAAW"}