@intlayer/design-system 9.3.2 → 9.4.0-canary.0

package/dist/esm/hooks/useItemSelector.mjs

@@ -1,161 +1,159 @@
 'use client';
 
-import { useLayoutEffect, useRef, useState } from "react";
+import { scheduleFrameTask } from "../utils/scheduleFrameTask.mjs";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 //#region src/hooks/useItemSelector.ts
 const selectorDefault = (option) => option?.getAttribute("aria-selected") === "true";
+/** Attributes whose change moves the indicator to another option. */
+const WATCHED_ATTRIBUTES = [
+	"aria-selected",
+	"data-active",
+	"data-indicator"
+];
+/** Delay before the indicator leaves the option the pointer just left. */
+const HOVER_RELEASE_DELAY = 150;
 const useItemSelector = (optionsRefs, { selector = selectorDefault, isHoverable = false, orientation = "horizontal" } = {
 	selector: selectorDefault,
 	isHoverable: false,
 	orientation: "horizontal"
 }) => {
 	const [choiceIndicatorPosition, setChoiceIndicatorPosition] = useState(null);
-	const [hoveredItem, setHoveredItem] = useState(null);
+	const hoveredItemRef = useRef(null);
 	const hideTimeoutRef = useRef(null);
 	const lastPositionRef = useRef(null);
+	const cancelMeasurementRef = useRef(null);
+	const selectorRef = useRef(selector);
+	selectorRef.current = selector;
+	const orientationRef = useRef(orientation);
+	orientationRef.current = orientation;
 	const itemsLength = optionsRefs.current.length;
-	const calculatePosition = () => {
-		let targetElement = null;
-		if (hoveredItem) {
-			targetElement = hoveredItem;
-			if (hideTimeoutRef.current) {
-				clearTimeout(hideTimeoutRef.current);
-				hideTimeoutRef.current = null;
-			}
-		} else targetElement = optionsRefs.current.find(selector) ?? null;
+	const calculatePosition = useCallback(() => {
+		const targetElement = hoveredItemRef.current ?? optionsRefs.current.find(selectorRef.current) ?? null;
+		if (hoveredItemRef.current && hideTimeoutRef.current) {
+			clearTimeout(hideTimeoutRef.current);
+			hideTimeoutRef.current = null;
+		}
+		const isVertical = orientationRef.current === "vertical";
 		if (!targetElement) {
-			if (orientation === "vertical") {
-				const verticalPrev = lastPositionRef.current;
-				const newPosition = {
-					top: verticalPrev?.top ?? 0,
-					height: verticalPrev?.height ?? 0,
-					opacity: 0
-				};
-				if (verticalPrev?.opacity !== 0) {
-					setChoiceIndicatorPosition(newPosition);
-					lastPositionRef.current = newPosition;
-				}
-			} else {
-				const horizontalPrev = lastPositionRef.current;
-				const newPosition = {
-					left: horizontalPrev?.left ?? 0,
-					width: horizontalPrev?.width ?? 0,
-					opacity: 0
-				};
-				if (horizontalPrev?.opacity !== 0) {
-					setChoiceIndicatorPosition(newPosition);
-					lastPositionRef.current = newPosition;
-				}
-			}
+			if (lastPositionRef.current?.opacity === 0) return;
+			const newPosition = isVertical ? {
+				top: lastPositionRef.current?.top ?? 0,
+				height: lastPositionRef.current?.height ?? 0,
+				opacity: 0
+			} : {
+				left: lastPositionRef.current?.left ?? 0,
+				width: lastPositionRef.current?.width ?? 0,
+				opacity: 0
+			};
+			setChoiceIndicatorPosition(newPosition);
+			lastPositionRef.current = newPosition;
 			return;
 		}
-		if (orientation === "vertical") {
+		if (isVertical) {
 			const top = targetElement.offsetTop;
 			const height = targetElement.offsetHeight;
+			const previous = lastPositionRef.current;
+			if (previous?.top === top && previous.height === height && previous.opacity === 1) return;
 			const newPosition = {
 				top,
 				height,
 				opacity: 1
 			};
-			const prev = lastPositionRef.current;
-			if (!prev || prev.top !== top || prev.height !== height || prev.opacity !== 1) {
-				setChoiceIndicatorPosition(newPosition);
-				lastPositionRef.current = newPosition;
-			}
-		} else {
-			const left = targetElement.offsetLeft;
-			const width = targetElement.offsetWidth;
-			const newPosition = {
-				left,
-				width,
-				opacity: 1
-			};
-			const prev = lastPositionRef.current;
-			if (!prev || prev.left !== left || prev.width !== width || prev.opacity !== 1) {
-				setChoiceIndicatorPosition(newPosition);
-				lastPositionRef.current = newPosition;
-			}
+			setChoiceIndicatorPosition(newPosition);
+			lastPositionRef.current = newPosition;
+			return;
 		}
-	};
-	useLayoutEffect(() => {
-		calculatePosition();
-		window.addEventListener("resize", calculatePosition);
-		window.addEventListener("DOMContentLoaded", calculatePosition);
-		const mutationObservers = [];
-		optionsRefs.current.forEach((option) => {
-			if (option) {
-				const observer = new MutationObserver((mutations) => {
-					for (const mutation of mutations) if (mutation.type === "attributes" && (mutation.attributeName === "aria-selected" || mutation.attributeName === "data-active" || mutation.attributeName === "data-indicator")) {
-						calculatePosition();
-						break;
-					}
-				});
-				observer.observe(option, {
-					attributes: true,
-					attributeFilter: [
-						"aria-selected",
-						"data-active",
-						"data-indicator"
-					]
-				});
-				mutationObservers.push(observer);
-			}
-		});
-		const resizeObservers = [];
-		const observeSize = (element) => {
-			if (!element) return;
-			const resizeObserver = new ResizeObserver(() => {
-				calculatePosition();
-			});
-			resizeObserver.observe(element);
-			resizeObservers.push(resizeObserver);
+		const left = targetElement.offsetLeft;
+		const width = targetElement.offsetWidth;
+		const previous = lastPositionRef.current;
+		if (previous?.left === left && previous.width === width && previous.opacity === 1) return;
+		const newPosition = {
+			left,
+			width,
+			opacity: 1
 		};
-		const selectedItem = optionsRefs.current.find(selector) ?? null;
-		if (selectedItem) observeSize(selectedItem);
-		if (hoveredItem) observeSize(hoveredItem);
+		setChoiceIndicatorPosition(newPosition);
+		lastPositionRef.current = newPosition;
+	}, [optionsRefs]);
+	/**
+	* Defers the measurement to the next frame, and to a single one however many
+	* observers fire.
+	*
+	* Reading `offsetLeft` straight from a mutation, resize or scroll callback
+	* forces a synchronous reflow, and a documentation page mounts one selector
+	* per tab group and one per code block. The frame is shared with every other
+	* selector on the page, so React commits their positions in one pass instead
+	* of invalidating layout between two measurements.
+	*/
+	const scheduleMeasurement = useCallback(() => {
+		if (cancelMeasurementRef.current !== null) return;
+		cancelMeasurementRef.current = scheduleFrameTask(() => {
+			cancelMeasurementRef.current = null;
+			calculatePosition();
+		});
+	}, [calculatePosition]);
+	useEffect(() => {
+		scheduleMeasurement();
+		window.addEventListener("resize", scheduleMeasurement, { passive: true });
+		window.addEventListener("DOMContentLoaded", scheduleMeasurement);
+		const options = optionsRefs.current.filter(Boolean);
+		const mutationObserver = new MutationObserver(scheduleMeasurement);
+		const resizeObserver = new ResizeObserver(scheduleMeasurement);
 		const handleMouseEnter = (event) => {
 			if (hideTimeoutRef.current) {
 				clearTimeout(hideTimeoutRef.current);
 				hideTimeoutRef.current = null;
 			}
-			setHoveredItem(event.currentTarget);
+			hoveredItemRef.current = event.currentTarget;
+			scheduleMeasurement();
 		};
 		const handleMouseLeave = () => {
 			if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
 			hideTimeoutRef.current = setTimeout(() => {
-				setHoveredItem(null);
-			}, 150);
+				hoveredItemRef.current = null;
+				scheduleMeasurement();
+			}, HOVER_RELEASE_DELAY);
 		};
-		if (isHoverable) optionsRefs.current.forEach((option) => {
-			option?.addEventListener("mouseenter", handleMouseEnter, { passive: true });
-			option?.addEventListener("mouseleave", handleMouseLeave, { passive: true });
-		});
-		return () => {
-			if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
-			window.removeEventListener("resize", calculatePosition);
-			window.removeEventListener("DOMContentLoaded", calculatePosition);
-			mutationObservers.forEach((observer) => {
-				observer.disconnect();
-			});
-			resizeObservers.forEach((observer) => {
-				observer.disconnect();
-			});
-			optionsRefs.current.forEach((option) => {
-				option?.removeEventListener("mouseenter", handleMouseEnter);
-				option?.removeEventListener("mouseleave", handleMouseLeave);
+		for (const option of options) {
+			mutationObserver.observe(option, {
+				attributes: true,
+				attributeFilter: WATCHED_ATTRIBUTES
 			});
+			resizeObserver.observe(option);
+			if (isHoverable) {
+				option.addEventListener("mouseenter", handleMouseEnter, { passive: true });
+				option.addEventListener("mouseleave", handleMouseLeave, { passive: true });
+			}
+		}
+		return () => {
+			cancelMeasurementRef.current?.();
+			cancelMeasurementRef.current = null;
+			if (hideTimeoutRef.current) {
+				clearTimeout(hideTimeoutRef.current);
+				hideTimeoutRef.current = null;
+			}
+			window.removeEventListener("resize", scheduleMeasurement);
+			window.removeEventListener("DOMContentLoaded", scheduleMeasurement);
+			mutationObserver.disconnect();
+			resizeObserver.disconnect();
+			if (isHoverable) for (const option of options) {
+				option.removeEventListener("mouseenter", handleMouseEnter);
+				option.removeEventListener("mouseleave", handleMouseLeave);
+			}
 		};
 	}, [
 		optionsRefs,
-		selector,
-		hoveredItem,
 		itemsLength,
+		isHoverable,
 		orientation,
-		isHoverable
+		scheduleMeasurement
 	]);
 	return {
 		choiceIndicatorPosition,
+		/** Measures immediately. Prefer `scheduleMeasurement`, which does not force a reflow. */
 		calculatePosition,
+		scheduleMeasurement,
 		orientation
 	};
 };

package/dist/esm/hooks/useItemSelector.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useItemSelector.mjs","names":[],"sources":["../../../src/hooks/useItemSelector.ts"],"sourcesContent":["'use client';\n\nimport { type RefObject, useLayoutEffect, useRef, useState } from 'react';\n\nexport type ItemSelectorOrientation = 'horizontal' | 'vertical';\n\ntype HorizontalStyleState = {\n  left: number;\n  width: number;\n  opacity: number;\n};\n\ntype VerticalStyleState = {\n  top: number;\n  height: number;\n  opacity: number;\n};\n\ntype StyleState = HorizontalStyleState | VerticalStyleState;\n\nconst selectorDefault = (option: HTMLElement) =>\n  option?.getAttribute('aria-selected') === 'true';\n\ntype Options = {\n  selector?: (option: HTMLElement, index: number) => boolean;\n  isHoverable?: boolean;\n  orientation?: ItemSelectorOrientation;\n};\n\nexport const useItemSelector = (\n  optionsRefs: RefObject<HTMLElement[]>,\n  {\n    selector = selectorDefault,\n    isHoverable = false,\n    orientation = 'horizontal',\n  }: Options = {\n    selector: selectorDefault,\n    isHoverable: false,\n    orientation: 'horizontal',\n  }\n) => {\n  const [choiceIndicatorPosition, setChoiceIndicatorPosition] =\n    useState<StyleState | null>(null);\n\n  const [hoveredItem, setHoveredItem] = useState<HTMLElement | null>(null);\n  const hideTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n  const lastPositionRef = useRef<StyleState | null>(null);\n\n  const itemsLength = optionsRefs.current.length;\n\n  const calculatePosition = () => {\n    let targetElement: HTMLElement | null = null;\n\n    if (hoveredItem) {\n      targetElement = hoveredItem;\n      // Clear any pending hide timeout when hovering over an item\n      if (hideTimeoutRef.current) {\n        clearTimeout(hideTimeoutRef.current);\n        hideTimeoutRef.current = null;\n      }\n    } else {\n      targetElement = optionsRefs.current.find(selector) ?? null;\n    }\n\n    if (!targetElement) {\n      // Keep previous position but set opacity to 0\n      if (orientation === 'vertical') {\n        const verticalPrev =\n          lastPositionRef.current as VerticalStyleState | null;\n        const newPosition: VerticalStyleState = {\n          top: verticalPrev?.top ?? 0,\n          height: verticalPrev?.height ?? 0,\n          opacity: 0,\n        };\n\n        if (verticalPrev?.opacity !== 0) {\n          setChoiceIndicatorPosition(newPosition);\n          lastPositionRef.current = newPosition;\n        }\n      } else {\n        const horizontalPrev =\n          lastPositionRef.current as HorizontalStyleState | null;\n        const newPosition: HorizontalStyleState = {\n          left: horizontalPrev?.left ?? 0,\n          width: horizontalPrev?.width ?? 0,\n          opacity: 0,\n        };\n\n        if (horizontalPrev?.opacity !== 0) {\n          setChoiceIndicatorPosition(newPosition);\n          lastPositionRef.current = newPosition;\n        }\n      }\n      return;\n    }\n\n    if (orientation === 'vertical') {\n      const top = targetElement.offsetTop;\n      const height = targetElement.offsetHeight;\n\n      const newPosition = {\n        top,\n        height,\n        opacity: 1,\n      };\n\n      const prev = lastPositionRef.current as VerticalStyleState | null;\n\n      if (\n        !prev ||\n        prev.top !== top ||\n        prev.height !== height ||\n        prev.opacity !== 1\n      ) {\n        setChoiceIndicatorPosition(newPosition);\n        lastPositionRef.current = newPosition;\n      }\n    } else {\n      const left = targetElement.offsetLeft;\n      const width = targetElement.offsetWidth;\n\n      const newPosition = {\n        left,\n        width,\n        opacity: 1,\n      };\n\n      const prev = lastPositionRef.current as HorizontalStyleState | null;\n\n      if (\n        !prev ||\n        prev.left !== left ||\n        prev.width !== width ||\n        prev.opacity !== 1\n      ) {\n        setChoiceIndicatorPosition(newPosition);\n        lastPositionRef.current = newPosition;\n      }\n    }\n  };\n\n  useLayoutEffect(() => {\n    calculatePosition();\n\n    // Event listeners for window events\n    window.addEventListener('resize', calculatePosition);\n    window.addEventListener('DOMContentLoaded', calculatePosition);\n\n    // MutationObserver to watch for 'aria-selected' changes\n    const mutationObservers: MutationObserver[] = [];\n\n    optionsRefs.current.forEach((option) => {\n      if (option) {\n        const observer = new MutationObserver((mutations) => {\n          for (const mutation of mutations) {\n            if (\n              mutation.type === 'attributes' &&\n              (mutation.attributeName === 'aria-selected' ||\n                mutation.attributeName === 'data-active' ||\n                mutation.attributeName === 'data-indicator')\n            ) {\n              calculatePosition();\n              break;\n            }\n          }\n        });\n\n        observer.observe(option, {\n          attributes: true,\n          attributeFilter: ['aria-selected', 'data-active', 'data-indicator'],\n        });\n\n        mutationObservers.push(observer);\n      }\n    });\n\n    // ResizeObserver to watch for size changes\n    const resizeObservers: ResizeObserver[] = [];\n\n    const observeSize = (element: HTMLElement) => {\n      if (!element) return;\n      const resizeObserver = new ResizeObserver(() => {\n        calculatePosition();\n      });\n      resizeObserver.observe(element);\n      resizeObservers.push(resizeObserver);\n    };\n\n    // Observe the selected item\n    const selectedItem = optionsRefs.current.find(selector) ?? null;\n\n    if (selectedItem) {\n      observeSize(selectedItem);\n    }\n\n    // Observe the hovered item\n    if (hoveredItem) {\n      observeSize(hoveredItem);\n    }\n\n    // Add hover event listeners\n    const handleMouseEnter = (event: Event) => {\n      // Clear any pending hide timeout\n      if (hideTimeoutRef.current) {\n        clearTimeout(hideTimeoutRef.current);\n        hideTimeoutRef.current = null;\n      }\n      setHoveredItem(event.currentTarget as HTMLElement);\n    };\n\n    const handleMouseLeave = () => {\n      // Clear any existing timeout\n      if (hideTimeoutRef.current) {\n        clearTimeout(hideTimeoutRef.current);\n      }\n\n      // Keep the indicator at its current position for 150ms\n      // before removing the hovered item\n      hideTimeoutRef.current = setTimeout(() => {\n        setHoveredItem(null);\n      }, 150); // 150ms delay before hiding\n    };\n\n    if (isHoverable) {\n      optionsRefs.current.forEach((option) => {\n        option?.addEventListener('mouseenter', handleMouseEnter, {\n          passive: true,\n        });\n        option?.addEventListener('mouseleave', handleMouseLeave, {\n          passive: true,\n        });\n      });\n    }\n\n    return () => {\n      // Clear any pending hide timeout\n      if (hideTimeoutRef.current) {\n        clearTimeout(hideTimeoutRef.current);\n      }\n\n      // Cleanup window event listeners\n      window.removeEventListener('resize', calculatePosition);\n      window.removeEventListener('DOMContentLoaded', calculatePosition);\n\n      // Disconnect MutationObservers\n      mutationObservers.forEach((observer) => {\n        observer.disconnect();\n      });\n\n      // Disconnect ResizeObservers\n      resizeObservers.forEach((observer) => {\n        observer.disconnect();\n      });\n\n      // Remove hover event listeners\n      optionsRefs.current.forEach((option) => {\n        option?.removeEventListener('mouseenter', handleMouseEnter);\n        option?.removeEventListener('mouseleave', handleMouseLeave);\n      });\n    };\n  }, [\n    optionsRefs,\n    selector,\n    hoveredItem,\n    itemsLength,\n    orientation,\n    isHoverable,\n  ]);\n\n  return { choiceIndicatorPosition, calculatePosition, orientation };\n};\n"],"mappings":";;;;;AAoBA,MAAM,mBAAmB,WACvB,QAAQ,aAAa,eAAe,MAAM;AAQ5C,MAAa,mBACX,aACA,EACE,WAAW,iBACX,cAAc,OACd,cAAc,iBACH;CACX,UAAU;CACV,aAAa;CACb,aAAa;AACf,MACG;CACH,MAAM,CAAC,yBAAyB,8BAC9B,SAA4B,IAAI;CAElC,MAAM,CAAC,aAAa,kBAAkB,SAA6B,IAAI;CACvE,MAAM,iBAAiB,OAA8B,IAAI;CACzD,MAAM,kBAAkB,OAA0B,IAAI;CAEtD,MAAM,cAAc,YAAY,QAAQ;CAExC,MAAM,0BAA0B;EAC9B,IAAI,gBAAoC;EAExC,IAAI,aAAa;GACf,gBAAgB;GAEhB,IAAI,eAAe,SAAS;IAC1B,aAAa,eAAe,OAAO;IACnC,eAAe,UAAU;GAC3B;EACF,OACE,gBAAgB,YAAY,QAAQ,KAAK,QAAQ,KAAK;EAGxD,IAAI,CAAC,eAAe;GAElB,IAAI,gBAAgB,YAAY;IAC9B,MAAM,eACJ,gBAAgB;IAClB,MAAM,cAAkC;KACtC,KAAK,cAAc,OAAO;KAC1B,QAAQ,cAAc,UAAU;KAChC,SAAS;IACX;IAEA,IAAI,cAAc,YAAY,GAAG;KAC/B,2BAA2B,WAAW;KACtC,gBAAgB,UAAU;IAC5B;GACF,OAAO;IACL,MAAM,iBACJ,gBAAgB;IAClB,MAAM,cAAoC;KACxC,MAAM,gBAAgB,QAAQ;KAC9B,OAAO,gBAAgB,SAAS;KAChC,SAAS;IACX;IAEA,IAAI,gBAAgB,YAAY,GAAG;KACjC,2BAA2B,WAAW;KACtC,gBAAgB,UAAU;IAC5B;GACF;GACA;EACF;EAEA,IAAI,gBAAgB,YAAY;GAC9B,MAAM,MAAM,cAAc;GAC1B,MAAM,SAAS,cAAc;GAE7B,MAAM,cAAc;IAClB;IACA;IACA,SAAS;GACX;GAEA,MAAM,OAAO,gBAAgB;GAE7B,IACE,CAAC,QACD,KAAK,QAAQ,OACb,KAAK,WAAW,UAChB,KAAK,YAAY,GACjB;IACA,2BAA2B,WAAW;IACtC,gBAAgB,UAAU;GAC5B;EACF,OAAO;GACL,MAAM,OAAO,cAAc;GAC3B,MAAM,QAAQ,cAAc;GAE5B,MAAM,cAAc;IAClB;IACA;IACA,SAAS;GACX;GAEA,MAAM,OAAO,gBAAgB;GAE7B,IACE,CAAC,QACD,KAAK,SAAS,QACd,KAAK,UAAU,SACf,KAAK,YAAY,GACjB;IACA,2BAA2B,WAAW;IACtC,gBAAgB,UAAU;GAC5B;EACF;CACF;CAEA,sBAAsB;EACpB,kBAAkB;EAGlB,OAAO,iBAAiB,UAAU,iBAAiB;EACnD,OAAO,iBAAiB,oBAAoB,iBAAiB;EAG7D,MAAM,oBAAwC,CAAC;EAE/C,YAAY,QAAQ,SAAS,WAAW;GACtC,IAAI,QAAQ;IACV,MAAM,WAAW,IAAI,kBAAkB,cAAc;KACnD,KAAK,MAAM,YAAY,WACrB,IACE,SAAS,SAAS,iBACjB,SAAS,kBAAkB,mBAC1B,SAAS,kBAAkB,iBAC3B,SAAS,kBAAkB,mBAC7B;MACA,kBAAkB;MAClB;KACF;IAEJ,CAAC;IAED,SAAS,QAAQ,QAAQ;KACvB,YAAY;KACZ,iBAAiB;MAAC;MAAiB;MAAe;KAAgB;IACpE,CAAC;IAED,kBAAkB,KAAK,QAAQ;GACjC;EACF,CAAC;EAGD,MAAM,kBAAoC,CAAC;EAE3C,MAAM,eAAe,YAAyB;GAC5C,IAAI,CAAC,SAAS;GACd,MAAM,iBAAiB,IAAI,qBAAqB;IAC9C,kBAAkB;GACpB,CAAC;GACD,eAAe,QAAQ,OAAO;GAC9B,gBAAgB,KAAK,cAAc;EACrC;EAGA,MAAM,eAAe,YAAY,QAAQ,KAAK,QAAQ,KAAK;EAE3D,IAAI,cACF,YAAY,YAAY;EAI1B,IAAI,aACF,YAAY,WAAW;EAIzB,MAAM,oBAAoB,UAAiB;GAEzC,IAAI,eAAe,SAAS;IAC1B,aAAa,eAAe,OAAO;IACnC,eAAe,UAAU;GAC3B;GACA,eAAe,MAAM,aAA4B;EACnD;EAEA,MAAM,yBAAyB;GAE7B,IAAI,eAAe,SACjB,aAAa,eAAe,OAAO;GAKrC,eAAe,UAAU,iBAAiB;IACxC,eAAe,IAAI;GACrB,GAAG,GAAG;EACR;EAEA,IAAI,aACF,YAAY,QAAQ,SAAS,WAAW;GACtC,QAAQ,iBAAiB,cAAc,kBAAkB,EACvD,SAAS,KACX,CAAC;GACD,QAAQ,iBAAiB,cAAc,kBAAkB,EACvD,SAAS,KACX,CAAC;EACH,CAAC;EAGH,aAAa;GAEX,IAAI,eAAe,SACjB,aAAa,eAAe,OAAO;GAIrC,OAAO,oBAAoB,UAAU,iBAAiB;GACtD,OAAO,oBAAoB,oBAAoB,iBAAiB;GAGhE,kBAAkB,SAAS,aAAa;IACtC,SAAS,WAAW;GACtB,CAAC;GAGD,gBAAgB,SAAS,aAAa;IACpC,SAAS,WAAW;GACtB,CAAC;GAGD,YAAY,QAAQ,SAAS,WAAW;IACtC,QAAQ,oBAAoB,cAAc,gBAAgB;IAC1D,QAAQ,oBAAoB,cAAc,gBAAgB;GAC5D,CAAC;EACH;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OAAO;EAAE;EAAyB;EAAmB;CAAY;AACnE"}
+{"version":3,"file":"useItemSelector.mjs","names":[],"sources":["../../../src/hooks/useItemSelector.ts"],"sourcesContent":["'use client';\n\nimport { scheduleFrameTask } from '@utils/scheduleFrameTask';\nimport {\n  type RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nexport type ItemSelectorOrientation = 'horizontal' | 'vertical';\n\ntype HorizontalStyleState = {\n  left: number;\n  width: number;\n  opacity: number;\n};\n\ntype VerticalStyleState = {\n  top: number;\n  height: number;\n  opacity: number;\n};\n\ntype StyleState = HorizontalStyleState | VerticalStyleState;\n\nconst selectorDefault = (option: HTMLElement) =>\n  option?.getAttribute('aria-selected') === 'true';\n\n/** Attributes whose change moves the indicator to another option. */\nconst WATCHED_ATTRIBUTES = ['aria-selected', 'data-active', 'data-indicator'];\n\n/** Delay before the indicator leaves the option the pointer just left. */\nconst HOVER_RELEASE_DELAY = 150;\n\ntype Options = {\n  selector?: (option: HTMLElement, index: number) => boolean;\n  isHoverable?: boolean;\n  orientation?: ItemSelectorOrientation;\n};\n\nexport const useItemSelector = (\n  optionsRefs: RefObject<HTMLElement[]>,\n  {\n    selector = selectorDefault,\n    isHoverable = false,\n    orientation = 'horizontal',\n  }: Options = {\n    selector: selectorDefault,\n    isHoverable: false,\n    orientation: 'horizontal',\n  }\n) => {\n  const [choiceIndicatorPosition, setChoiceIndicatorPosition] =\n    useState<StyleState | null>(null);\n\n  const hoveredItemRef = useRef<HTMLElement | null>(null);\n  const hideTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n  const lastPositionRef = useRef<StyleState | null>(null);\n  const cancelMeasurementRef = useRef<(() => void) | null>(null);\n\n  /*\n   * Callers build their options object inline, so `selector` and `orientation`\n   * are new values on every render. Reading them from refs keeps the observers\n   * below from being torn down and rebuilt each time — a switch selector used\n   * to re-subscribe one MutationObserver per option per render.\n   */\n  const selectorRef = useRef(selector);\n  selectorRef.current = selector;\n\n  const orientationRef = useRef(orientation);\n  orientationRef.current = orientation;\n\n  const itemsLength = optionsRefs.current.length;\n\n  const calculatePosition = useCallback(() => {\n    const targetElement =\n      hoveredItemRef.current ??\n      optionsRefs.current.find(selectorRef.current) ??\n      null;\n\n    if (hoveredItemRef.current && hideTimeoutRef.current) {\n      // Clear any pending hide timeout when hovering over an item\n      clearTimeout(hideTimeoutRef.current);\n      hideTimeoutRef.current = null;\n    }\n\n    const isVertical = orientationRef.current === 'vertical';\n\n    if (!targetElement) {\n      // Keep previous position but set opacity to 0\n      if (lastPositionRef.current?.opacity === 0) return;\n\n      const newPosition: StyleState = isVertical\n        ? {\n            top:\n              (lastPositionRef.current as VerticalStyleState | null)?.top ?? 0,\n            height:\n              (lastPositionRef.current as VerticalStyleState | null)?.height ??\n              0,\n            opacity: 0,\n          }\n        : {\n            left:\n              (lastPositionRef.current as HorizontalStyleState | null)?.left ??\n              0,\n            width:\n              (lastPositionRef.current as HorizontalStyleState | null)?.width ??\n              0,\n            opacity: 0,\n          };\n\n      setChoiceIndicatorPosition(newPosition);\n      lastPositionRef.current = newPosition;\n      return;\n    }\n\n    if (isVertical) {\n      const top = targetElement.offsetTop;\n      const height = targetElement.offsetHeight;\n      const previous = lastPositionRef.current as VerticalStyleState | null;\n\n      if (\n        previous?.top === top &&\n        previous.height === height &&\n        previous.opacity === 1\n      ) {\n        return;\n      }\n\n      const newPosition: VerticalStyleState = { top, height, opacity: 1 };\n\n      setChoiceIndicatorPosition(newPosition);\n      lastPositionRef.current = newPosition;\n      return;\n    }\n\n    const left = targetElement.offsetLeft;\n    const width = targetElement.offsetWidth;\n    const previous = lastPositionRef.current as HorizontalStyleState | null;\n\n    if (\n      previous?.left === left &&\n      previous.width === width &&\n      previous.opacity === 1\n    ) {\n      return;\n    }\n\n    const newPosition: HorizontalStyleState = { left, width, opacity: 1 };\n\n    setChoiceIndicatorPosition(newPosition);\n    lastPositionRef.current = newPosition;\n  }, [optionsRefs]);\n\n  /**\n   * Defers the measurement to the next frame, and to a single one however many\n   * observers fire.\n   *\n   * Reading `offsetLeft` straight from a mutation, resize or scroll callback\n   * forces a synchronous reflow, and a documentation page mounts one selector\n   * per tab group and one per code block. The frame is shared with every other\n   * selector on the page, so React commits their positions in one pass instead\n   * of invalidating layout between two measurements.\n   */\n  const scheduleMeasurement = useCallback(() => {\n    if (cancelMeasurementRef.current !== null) return;\n\n    cancelMeasurementRef.current = scheduleFrameTask(() => {\n      cancelMeasurementRef.current = null;\n      calculatePosition();\n    });\n  }, [calculatePosition]);\n\n  useEffect(() => {\n    scheduleMeasurement();\n\n    window.addEventListener('resize', scheduleMeasurement, { passive: true });\n    window.addEventListener('DOMContentLoaded', scheduleMeasurement);\n\n    const options = optionsRefs.current.filter(Boolean);\n\n    // One observer of each kind covers every option: both accept repeated\n    // `observe` calls, so a group of ten options costs two observers, not\n    // twenty.\n    const mutationObserver = new MutationObserver(scheduleMeasurement);\n    const resizeObserver = new ResizeObserver(scheduleMeasurement);\n\n    const handleMouseEnter = (event: Event) => {\n      if (hideTimeoutRef.current) {\n        clearTimeout(hideTimeoutRef.current);\n        hideTimeoutRef.current = null;\n      }\n\n      hoveredItemRef.current = event.currentTarget as HTMLElement;\n      scheduleMeasurement();\n    };\n\n    const handleMouseLeave = () => {\n      if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);\n\n      // Keep the indicator where it is for a moment, so moving between two\n      // neighbouring options does not make it blink out and back in.\n      hideTimeoutRef.current = setTimeout(() => {\n        hoveredItemRef.current = null;\n        scheduleMeasurement();\n      }, HOVER_RELEASE_DELAY);\n    };\n\n    for (const option of options) {\n      mutationObserver.observe(option, {\n        attributes: true,\n        attributeFilter: WATCHED_ATTRIBUTES,\n      });\n      resizeObserver.observe(option);\n\n      if (isHoverable) {\n        option.addEventListener('mouseenter', handleMouseEnter, {\n          passive: true,\n        });\n        option.addEventListener('mouseleave', handleMouseLeave, {\n          passive: true,\n        });\n      }\n    }\n\n    return () => {\n      cancelMeasurementRef.current?.();\n      cancelMeasurementRef.current = null;\n\n      if (hideTimeoutRef.current) {\n        clearTimeout(hideTimeoutRef.current);\n        hideTimeoutRef.current = null;\n      }\n\n      window.removeEventListener('resize', scheduleMeasurement);\n      window.removeEventListener('DOMContentLoaded', scheduleMeasurement);\n\n      mutationObserver.disconnect();\n      resizeObserver.disconnect();\n\n      if (isHoverable) {\n        for (const option of options) {\n          option.removeEventListener('mouseenter', handleMouseEnter);\n          option.removeEventListener('mouseleave', handleMouseLeave);\n        }\n      }\n    };\n  }, [optionsRefs, itemsLength, isHoverable, orientation, scheduleMeasurement]);\n\n  return {\n    choiceIndicatorPosition,\n    /** Measures immediately. Prefer `scheduleMeasurement`, which does not force a reflow. */\n    calculatePosition,\n    scheduleMeasurement,\n    orientation,\n  };\n};\n"],"mappings":"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"}

package/dist/esm/hooks/useScrollY.mjs

@@ -1,7 +1,9 @@
 'use client';
 
+import { scheduleFrameTask } from "../utils/scheduleFrameTask.mjs";
 import { useGetElementOrWindow } from "./useGetElementOrWindow.mjs";
-import { useCallback, useSyncExternalStore } from "react";
+import { observeScrollExtent } from "../utils/observeScrollExtent.mjs";
+import { useEffect, useState } from "react";
 
 //#region src/hooks/useScrollY.ts
 const INITIAL_SCROLL_STATE = {
@@ -9,59 +11,76 @@ const INITIAL_SCROLL_STATE = {
 	scrollPercentage: 0,
 	scrollYMax: 0
 };
-let lastSnapshot = INITIAL_SCROLL_STATE;
+/**
+* Tracks the vertical scroll of an element — or of the page — as a position and
+* a 0-to-1 progress.
+*
+* @param props.element - Scrollable element. Defaults to the document.
+* @returns The current offset, its maximum, and the ratio between the two.
+*
+* @example
+* const { scrollPercentage } = useScrollY({ element: contentElement });
+*/
 const useScrollY = (props) => {
 	const { element } = props ?? {};
 	const containerElement = useGetElementOrWindow(element);
-	const subscribe = useCallback((onChange) => {
-		if (typeof window === "undefined" || !containerElement) return () => {};
-		let raf = 0;
-		const handler = () => {
-			if (raf) return;
-			raf = window.requestAnimationFrame(() => {
-				raf = 0;
-				onChange();
-			});
-		};
-		containerElement.addEventListener("scroll", handler, { passive: true });
-		return () => {
-			containerElement.removeEventListener("scroll", handler);
-			if (raf) window.cancelAnimationFrame(raf);
+	const [scrollState, setScrollState] = useState(INITIAL_SCROLL_STATE);
+	useEffect(() => {
+		if (typeof window === "undefined" || !containerElement) return;
+		const isElementScroll = containerElement instanceof HTMLElement;
+		/**
+		* Travel available to the scroll, cached between layout changes.
+		*
+		* `scrollHeight` and `clientHeight` both flush pending layout, so reading
+		* them on every scroll frame would recompute the whole page while the user
+		* scrolls. Only `scrollTop` is read per frame; the rest is refreshed when
+		* the content or the viewport actually resizes.
+		*/
+		let scrollYMax = 0;
+		const measureScrollRange = () => {
+			const scrollHeight = isElementScroll ? containerElement.scrollHeight : document.documentElement?.scrollHeight ?? document.body?.scrollHeight ?? 0;
+			const clientHeight = isElementScroll ? containerElement.clientHeight : document.documentElement?.clientHeight ?? window.innerHeight ?? 0;
+			scrollYMax = Math.max(0, scrollHeight - clientHeight);
 		};
-	}, [containerElement]);
-	const getSnapshot = () => {
-		if (typeof window === "undefined" || !containerElement) return INITIAL_SCROLL_STATE;
-		if (containerElement instanceof HTMLElement) {
-			const scrollY = containerElement.scrollTop;
-			const scrollHeight = containerElement.scrollHeight;
-			const clientHeight = containerElement.clientHeight;
-			const scrollYMax = Math.max(0, scrollHeight - clientHeight);
+		const updateScrollState = () => {
+			const scrollY = isElementScroll ? containerElement.scrollTop : window.scrollY ?? document.documentElement?.scrollTop ?? 0;
 			const scrollPercentage = scrollYMax > 0 ? scrollY / scrollYMax : 0;
-			if (lastSnapshot.scrollY === scrollY && lastSnapshot.scrollPercentage === scrollPercentage && lastSnapshot.scrollYMax === scrollYMax) return lastSnapshot;
-			lastSnapshot = {
+			setScrollState((previousState) => previousState.scrollY === scrollY && previousState.scrollPercentage === scrollPercentage && previousState.scrollYMax === scrollYMax ? previousState : {
 				scrollY,
 				scrollPercentage,
 				scrollYMax
-			};
-			return lastSnapshot;
-		}
-		const doc = document.documentElement;
-		const body = document.body;
-		const scrollY = window.scrollY ?? window.pageYOffset ?? doc?.scrollTop ?? body?.scrollTop ?? 0;
-		const scrollHeight = doc?.scrollHeight ?? body?.scrollHeight ?? 0;
-		const clientHeight = doc?.clientHeight ?? window.innerHeight ?? 0;
-		const scrollYMax = Math.max(0, scrollHeight - clientHeight);
-		const scrollPercentage = scrollYMax > 0 ? scrollY / scrollYMax : 0;
-		if (lastSnapshot.scrollY === scrollY && lastSnapshot.scrollPercentage === scrollPercentage && lastSnapshot.scrollYMax === scrollYMax) return lastSnapshot;
-		lastSnapshot = {
-			scrollY,
-			scrollPercentage,
-			scrollYMax
+			});
+		};
+		let cancelScheduledRead = null;
+		const scheduleScrollRead = () => {
+			if (cancelScheduledRead) return;
+			cancelScheduledRead = scheduleFrameTask(() => {
+				cancelScheduledRead = null;
+				updateScrollState();
+			});
+		};
+		let cancelScheduledRangeRead = null;
+		const scheduleRangeRead = () => {
+			if (cancelScheduledRangeRead) return;
+			cancelScheduledRangeRead = scheduleFrameTask(() => {
+				cancelScheduledRangeRead = null;
+				measureScrollRange();
+				updateScrollState();
+			});
 		};
-		return lastSnapshot;
-	};
-	const getServerSnapshot = () => INITIAL_SCROLL_STATE;
-	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+		scheduleRangeRead();
+		const stopObservingScrollExtent = observeScrollExtent(isElementScroll ? containerElement : document.documentElement, scheduleRangeRead);
+		containerElement.addEventListener("scroll", scheduleScrollRead, { passive: true });
+		window.addEventListener("resize", scheduleRangeRead, { passive: true });
+		return () => {
+			cancelScheduledRead?.();
+			cancelScheduledRangeRead?.();
+			stopObservingScrollExtent();
+			containerElement.removeEventListener("scroll", scheduleScrollRead);
+			window.removeEventListener("resize", scheduleRangeRead);
+		};
+	}, [containerElement]);
+	return scrollState;
 };
 
 //#endregion

package/dist/esm/hooks/useScrollY.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollY.mjs","names":[],"sources":["../../../src/hooks/useScrollY.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useSyncExternalStore } from 'react';\nimport { useGetElementOrWindow } from './useGetElementOrWindow';\n\ntype UseScrollYProps = {\n  element?: HTMLElement;\n};\n\ntype UseScrollYResult = {\n  scrollY: number;\n  scrollPercentage: number;\n  scrollYMax: number;\n};\n\nconst INITIAL_SCROLL_STATE: UseScrollYResult = {\n  scrollY: 0,\n  scrollPercentage: 0,\n  scrollYMax: 0,\n};\n\nlet lastSnapshot: UseScrollYResult = INITIAL_SCROLL_STATE;\n\nexport const useScrollY = (props?: UseScrollYProps): UseScrollYResult => {\n  const { element } = props ?? {};\n\n  const containerElement = useGetElementOrWindow(element);\n\n  const subscribe = useCallback(\n    (onChange: () => void) => {\n      if (typeof window === 'undefined' || !containerElement) return () => {};\n      let raf = 0;\n\n      const handler = () => {\n        if (raf) return;\n        raf = window.requestAnimationFrame(() => {\n          raf = 0;\n          onChange();\n        });\n      };\n\n      containerElement.addEventListener('scroll', handler, { passive: true });\n\n      return () => {\n        containerElement.removeEventListener('scroll', handler);\n        if (raf) window.cancelAnimationFrame(raf);\n      };\n    },\n    [containerElement]\n  );\n\n  const getSnapshot = (): UseScrollYResult => {\n    if (typeof window === 'undefined' || !containerElement) {\n      return INITIAL_SCROLL_STATE; // SSR/hydration-safe\n    }\n\n    // Handle custom element\n    if (containerElement instanceof HTMLElement) {\n      const scrollY = containerElement.scrollTop;\n      const scrollHeight = containerElement.scrollHeight;\n      const clientHeight = containerElement.clientHeight;\n      const scrollYMax = Math.max(0, scrollHeight - clientHeight);\n      const scrollPercentage = scrollYMax > 0 ? scrollY / scrollYMax : 0;\n\n      if (\n        lastSnapshot.scrollY === scrollY &&\n        lastSnapshot.scrollPercentage === scrollPercentage &&\n        lastSnapshot.scrollYMax === scrollYMax\n      ) {\n        return lastSnapshot;\n      }\n\n      lastSnapshot = { scrollY, scrollPercentage, scrollYMax };\n      return lastSnapshot;\n    }\n\n    // Handle window\n    const doc = document.documentElement;\n    const body = document.body;\n\n    const scrollY =\n      window.scrollY ??\n      window.pageYOffset ??\n      doc?.scrollTop ??\n      body?.scrollTop ??\n      0;\n\n    const scrollHeight = doc?.scrollHeight ?? body?.scrollHeight ?? 0;\n    const clientHeight = doc?.clientHeight ?? window.innerHeight ?? 0;\n    const scrollYMax = Math.max(0, scrollHeight - clientHeight);\n    const scrollPercentage = scrollYMax > 0 ? scrollY / scrollYMax : 0;\n\n    if (\n      lastSnapshot.scrollY === scrollY &&\n      lastSnapshot.scrollPercentage === scrollPercentage &&\n      lastSnapshot.scrollYMax === scrollYMax\n    ) {\n      return lastSnapshot;\n    }\n\n    lastSnapshot = { scrollY, scrollPercentage, scrollYMax };\n    return lastSnapshot;\n  };\n\n  const getServerSnapshot = (): UseScrollYResult => INITIAL_SCROLL_STATE;\n\n  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n};\n"],"mappings":";;;;;;AAeA,MAAM,uBAAyC;CAC7C,SAAS;CACT,kBAAkB;CAClB,YAAY;AACd;AAEA,IAAI,eAAiC;AAErC,MAAa,cAAc,UAA8C;CACvE,MAAM,EAAE,YAAY,SAAS,CAAC;CAE9B,MAAM,mBAAmB,sBAAsB,OAAO;CAEtD,MAAM,YAAY,aACf,aAAyB;EACxB,IAAI,OAAO,WAAW,eAAe,CAAC,kBAAkB,aAAa,CAAC;EACtE,IAAI,MAAM;EAEV,MAAM,gBAAgB;GACpB,IAAI,KAAK;GACT,MAAM,OAAO,4BAA4B;IACvC,MAAM;IACN,SAAS;GACX,CAAC;EACH;EAEA,iBAAiB,iBAAiB,UAAU,SAAS,EAAE,SAAS,KAAK,CAAC;EAEtE,aAAa;GACX,iBAAiB,oBAAoB,UAAU,OAAO;GACtD,IAAI,KAAK,OAAO,qBAAqB,GAAG;EAC1C;CACF,GACA,CAAC,gBAAgB,CACnB;CAEA,MAAM,oBAAsC;EAC1C,IAAI,OAAO,WAAW,eAAe,CAAC,kBACpC,OAAO;EAIT,IAAI,4BAA4B,aAAa;GAC3C,MAAM,UAAU,iBAAiB;GACjC,MAAM,eAAe,iBAAiB;GACtC,MAAM,eAAe,iBAAiB;GACtC,MAAM,aAAa,KAAK,IAAI,GAAG,eAAe,YAAY;GAC1D,MAAM,mBAAmB,aAAa,IAAI,UAAU,aAAa;GAEjE,IACE,aAAa,YAAY,WACzB,aAAa,qBAAqB,oBAClC,aAAa,eAAe,YAE5B,OAAO;GAGT,eAAe;IAAE;IAAS;IAAkB;GAAW;GACvD,OAAO;EACT;EAGA,MAAM,MAAM,SAAS;EACrB,MAAM,OAAO,SAAS;EAEtB,MAAM,UACJ,OAAO,WACP,OAAO,eACP,KAAK,aACL,MAAM,aACN;EAEF,MAAM,eAAe,KAAK,gBAAgB,MAAM,gBAAgB;EAChE,MAAM,eAAe,KAAK,gBAAgB,OAAO,eAAe;EAChE,MAAM,aAAa,KAAK,IAAI,GAAG,eAAe,YAAY;EAC1D,MAAM,mBAAmB,aAAa,IAAI,UAAU,aAAa;EAEjE,IACE,aAAa,YAAY,WACzB,aAAa,qBAAqB,oBAClC,aAAa,eAAe,YAE5B,OAAO;EAGT,eAAe;GAAE;GAAS;GAAkB;EAAW;EACvD,OAAO;CACT;CAEA,MAAM,0BAA4C;CAElD,OAAO,qBAAqB,WAAW,aAAa,iBAAiB;AACvE"}
+{"version":3,"file":"useScrollY.mjs","names":[],"sources":["../../../src/hooks/useScrollY.ts"],"sourcesContent":["'use client';\n\nimport { observeScrollExtent } from '@utils/observeScrollExtent';\nimport { scheduleFrameTask } from '@utils/scheduleFrameTask';\nimport { useEffect, useState } from 'react';\nimport { useGetElementOrWindow } from './useGetElementOrWindow';\n\ntype UseScrollYProps = {\n  element?: HTMLElement;\n};\n\ntype UseScrollYResult = {\n  scrollY: number;\n  scrollPercentage: number;\n  scrollYMax: number;\n};\n\nconst INITIAL_SCROLL_STATE: UseScrollYResult = {\n  scrollY: 0,\n  scrollPercentage: 0,\n  scrollYMax: 0,\n};\n\n/**\n * Tracks the vertical scroll of an element — or of the page — as a position and\n * a 0-to-1 progress.\n *\n * @param props.element - Scrollable element. Defaults to the document.\n * @returns The current offset, its maximum, and the ratio between the two.\n *\n * @example\n * const { scrollPercentage } = useScrollY({ element: contentElement });\n */\nexport const useScrollY = (props?: UseScrollYProps): UseScrollYResult => {\n  const { element } = props ?? {};\n  const containerElement = useGetElementOrWindow(element);\n  const [scrollState, setScrollState] =\n    useState<UseScrollYResult>(INITIAL_SCROLL_STATE);\n\n  useEffect(() => {\n    if (typeof window === 'undefined' || !containerElement) return;\n\n    const isElementScroll = containerElement instanceof HTMLElement;\n\n    /**\n     * Travel available to the scroll, cached between layout changes.\n     *\n     * `scrollHeight` and `clientHeight` both flush pending layout, so reading\n     * them on every scroll frame would recompute the whole page while the user\n     * scrolls. Only `scrollTop` is read per frame; the rest is refreshed when\n     * the content or the viewport actually resizes.\n     */\n    let scrollYMax = 0;\n\n    const measureScrollRange = () => {\n      const scrollHeight = isElementScroll\n        ? containerElement.scrollHeight\n        : (document.documentElement?.scrollHeight ??\n          document.body?.scrollHeight ??\n          0);\n\n      const clientHeight = isElementScroll\n        ? containerElement.clientHeight\n        : (document.documentElement?.clientHeight ?? window.innerHeight ?? 0);\n\n      scrollYMax = Math.max(0, scrollHeight - clientHeight);\n    };\n\n    const updateScrollState = () => {\n      const scrollY = isElementScroll\n        ? containerElement.scrollTop\n        : (window.scrollY ?? document.documentElement?.scrollTop ?? 0);\n\n      const scrollPercentage = scrollYMax > 0 ? scrollY / scrollYMax : 0;\n\n      setScrollState((previousState) =>\n        previousState.scrollY === scrollY &&\n        previousState.scrollPercentage === scrollPercentage &&\n        previousState.scrollYMax === scrollYMax\n          ? previousState\n          : { scrollY, scrollPercentage, scrollYMax }\n      );\n    };\n\n    let cancelScheduledRead: (() => void) | null = null;\n\n    const scheduleScrollRead = () => {\n      if (cancelScheduledRead) return;\n\n      cancelScheduledRead = scheduleFrameTask(() => {\n        cancelScheduledRead = null;\n        updateScrollState();\n      });\n    };\n\n    let cancelScheduledRangeRead: (() => void) | null = null;\n\n    const scheduleRangeRead = () => {\n      if (cancelScheduledRangeRead) return;\n\n      cancelScheduledRangeRead = scheduleFrameTask(() => {\n        cancelScheduledRangeRead = null;\n        measureScrollRange();\n        updateScrollState();\n      });\n    };\n\n    // Initial measurement, deferred so that it shares the frame of every other\n    // measurement the page schedules while mounting.\n    scheduleRangeRead();\n\n    const stopObservingScrollExtent = observeScrollExtent(\n      isElementScroll ? containerElement : document.documentElement,\n      scheduleRangeRead\n    );\n\n    containerElement.addEventListener('scroll', scheduleScrollRead, {\n      passive: true,\n    });\n    window.addEventListener('resize', scheduleRangeRead, { passive: true });\n\n    return () => {\n      cancelScheduledRead?.();\n      cancelScheduledRangeRead?.();\n      stopObservingScrollExtent();\n      containerElement.removeEventListener('scroll', scheduleScrollRead);\n      window.removeEventListener('resize', scheduleRangeRead);\n    };\n  }, [containerElement]);\n\n  return scrollState;\n};\n"],"mappings":";;;;;;;;AAiBA,MAAM,uBAAyC;CAC7C,SAAS;CACT,kBAAkB;CAClB,YAAY;AACd;;;;;;;;;;;AAYA,MAAa,cAAc,UAA8C;CACvE,MAAM,EAAE,YAAY,SAAS,CAAC;CAC9B,MAAM,mBAAmB,sBAAsB,OAAO;CACtD,MAAM,CAAC,aAAa,kBAClB,SAA2B,oBAAoB;CAEjD,gBAAgB;EACd,IAAI,OAAO,WAAW,eAAe,CAAC,kBAAkB;EAExD,MAAM,kBAAkB,4BAA4B;;;;;;;;;EAUpD,IAAI,aAAa;EAEjB,MAAM,2BAA2B;GAC/B,MAAM,eAAe,kBACjB,iBAAiB,eAChB,SAAS,iBAAiB,gBAC3B,SAAS,MAAM,gBACf;GAEJ,MAAM,eAAe,kBACjB,iBAAiB,eAChB,SAAS,iBAAiB,gBAAgB,OAAO,eAAe;GAErE,aAAa,KAAK,IAAI,GAAG,eAAe,YAAY;EACtD;EAEA,MAAM,0BAA0B;GAC9B,MAAM,UAAU,kBACZ,iBAAiB,YAChB,OAAO,WAAW,SAAS,iBAAiB,aAAa;GAE9D,MAAM,mBAAmB,aAAa,IAAI,UAAU,aAAa;GAEjE,gBAAgB,kBACd,cAAc,YAAY,WAC1B,cAAc,qBAAqB,oBACnC,cAAc,eAAe,aACzB,gBACA;IAAE;IAAS;IAAkB;GAAW,CAC9C;EACF;EAEA,IAAI,sBAA2C;EAE/C,MAAM,2BAA2B;GAC/B,IAAI,qBAAqB;GAEzB,sBAAsB,wBAAwB;IAC5C,sBAAsB;IACtB,kBAAkB;GACpB,CAAC;EACH;EAEA,IAAI,2BAAgD;EAEpD,MAAM,0BAA0B;GAC9B,IAAI,0BAA0B;GAE9B,2BAA2B,wBAAwB;IACjD,2BAA2B;IAC3B,mBAAmB;IACnB,kBAAkB;GACpB,CAAC;EACH;EAIA,kBAAkB;EAElB,MAAM,4BAA4B,oBAChC,kBAAkB,mBAAmB,SAAS,iBAC9C,iBACF;EAEA,iBAAiB,iBAAiB,UAAU,oBAAoB,EAC9D,SAAS,KACX,CAAC;EACD,OAAO,iBAAiB,UAAU,mBAAmB,EAAE,SAAS,KAAK,CAAC;EAEtE,aAAa;GACX,sBAAsB;GACtB,2BAA2B;GAC3B,0BAA0B;GAC1B,iBAAiB,oBAAoB,UAAU,kBAAkB;GACjE,OAAO,oBAAoB,UAAU,iBAAiB;EACxD;CACF,GAAG,CAAC,gBAAgB,CAAC;CAErB,OAAO;AACT"}

package/dist/esm/hooks/useStickToBottom.mjs

@@ -0,0 +1,69 @@
+'use client';
+
+import { useCallback, useEffect, useRef } from "react";
+
+//#region src/hooks/useStickToBottom.ts
+/**
+* Distance from the bottom, in pixels, under which the list still counts as
+* pinned. Sub-pixel scroll positions and zoom levels never land exactly on the
+* bottom, so an exact comparison would unpin a list the user never moved.
+*/
+const PIN_THRESHOLD = 32;
+/**
+* Keeps a scrolling container pinned to its bottom edge as its content grows,
+* and releases the pin as soon as the user scrolls away from the bottom.
+*
+* Growth is detected with a `ResizeObserver` rather than from a render effect,
+* so a message streaming in token by token follows without the component
+* having to describe what changed. Both the read and the write happen inside
+* the observer callback, which the browser runs once layout is already
+* computed — neither forces a reflow, unlike measuring the same container from
+* an effect that has just committed new nodes.
+*
+* @returns The refs to attach to the container and to its content wrapper.
+*
+* @example
+* const { scrollRef, contentRef } = useStickToBottom<HTMLDivElement, HTMLUListElement>();
+*
+* return (
+*   <div ref={scrollRef} className="overflow-auto">
+*     <ul ref={contentRef}>{items}</ul>
+*   </div>
+* );
+*/
+const useStickToBottom = () => {
+	const scrollRef = useRef(null);
+	const contentRef = useRef(null);
+	const isPinnedRef = useRef(true);
+	useEffect(() => {
+		const scrollElement = scrollRef.current;
+		const contentElement = contentRef.current;
+		if (!scrollElement || !contentElement) return;
+		const getDistanceFromBottom = () => scrollElement.scrollHeight - scrollElement.scrollTop - scrollElement.clientHeight;
+		const handleScroll = () => {
+			isPinnedRef.current = getDistanceFromBottom() <= PIN_THRESHOLD;
+		};
+		const resizeObserver = new ResizeObserver(() => {
+			if (!isPinnedRef.current) return;
+			if (getDistanceFromBottom() <= 0) return;
+			scrollElement.scrollTop = scrollElement.scrollHeight - scrollElement.clientHeight;
+		});
+		resizeObserver.observe(contentElement);
+		scrollElement.addEventListener("scroll", handleScroll, { passive: true });
+		return () => {
+			resizeObserver.disconnect();
+			scrollElement.removeEventListener("scroll", handleScroll);
+		};
+	}, []);
+	return {
+		scrollRef,
+		contentRef,
+		unpin: useCallback(() => {
+			isPinnedRef.current = false;
+		}, [])
+	};
+};
+
+//#endregion
+export { useStickToBottom };
+//# sourceMappingURL=useStickToBottom.mjs.map

package/dist/esm/hooks/useStickToBottom.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStickToBottom.mjs","names":[],"sources":["../../../src/hooks/useStickToBottom.ts"],"sourcesContent":["'use client';\n\nimport { type RefObject, useCallback, useEffect, useRef } from 'react';\n\n/**\n * Distance from the bottom, in pixels, under which the list still counts as\n * pinned. Sub-pixel scroll positions and zoom levels never land exactly on the\n * bottom, so an exact comparison would unpin a list the user never moved.\n */\nconst PIN_THRESHOLD = 32;\n\nexport type StickToBottomRefs<\n  ScrollElement extends HTMLElement,\n  ContentElement extends HTMLElement,\n> = {\n  /** Attach to the scrolling container. */\n  scrollRef: RefObject<ScrollElement | null>;\n  /** Attach to the element wrapping the items, whose growth triggers the follow. */\n  contentRef: RefObject<ContentElement | null>;\n  /**\n   * Releases the pin until the user scrolls back down to the bottom.\n   *\n   * Call it before growing the content upwards — prepending older items to a\n   * pinned list would otherwise scroll straight past what was just revealed.\n   */\n  unpin: () => void;\n};\n\n/**\n * Keeps a scrolling container pinned to its bottom edge as its content grows,\n * and releases the pin as soon as the user scrolls away from the bottom.\n *\n * Growth is detected with a `ResizeObserver` rather than from a render effect,\n * so a message streaming in token by token follows without the component\n * having to describe what changed. Both the read and the write happen inside\n * the observer callback, which the browser runs once layout is already\n * computed — neither forces a reflow, unlike measuring the same container from\n * an effect that has just committed new nodes.\n *\n * @returns The refs to attach to the container and to its content wrapper.\n *\n * @example\n * const { scrollRef, contentRef } = useStickToBottom<HTMLDivElement, HTMLUListElement>();\n *\n * return (\n *   <div ref={scrollRef} className=\"overflow-auto\">\n *     <ul ref={contentRef}>{items}</ul>\n *   </div>\n * );\n */\nexport const useStickToBottom = <\n  ScrollElement extends HTMLElement,\n  ContentElement extends HTMLElement,\n>(): StickToBottomRefs<ScrollElement, ContentElement> => {\n  const scrollRef = useRef<ScrollElement>(null);\n  const contentRef = useRef<ContentElement>(null);\n  const isPinnedRef = useRef(true);\n\n  useEffect(() => {\n    const scrollElement = scrollRef.current;\n    const contentElement = contentRef.current;\n\n    if (!scrollElement || !contentElement) return;\n\n    const getDistanceFromBottom = () =>\n      scrollElement.scrollHeight -\n      scrollElement.scrollTop -\n      scrollElement.clientHeight;\n\n    /*\n     * Scroll events are dispatched after the browser has laid the page out, so\n     * reading the geometry here is free — deferring it to an animation frame\n     * would move the read *before* the next layout and force one instead.\n     */\n    const handleScroll = () => {\n      isPinnedRef.current = getDistanceFromBottom() <= PIN_THRESHOLD;\n    };\n\n    const resizeObserver = new ResizeObserver(() => {\n      if (!isPinnedRef.current) return;\n      if (getDistanceFromBottom() <= 0) return;\n\n      // Jumping rather than animating: a streamed answer resizes on nearly\n      // every frame, and a smooth scroll restarted that often never reaches\n      // the bottom.\n      scrollElement.scrollTop =\n        scrollElement.scrollHeight - scrollElement.clientHeight;\n    });\n\n    resizeObserver.observe(contentElement);\n    scrollElement.addEventListener('scroll', handleScroll, { passive: true });\n\n    return () => {\n      resizeObserver.disconnect();\n      scrollElement.removeEventListener('scroll', handleScroll);\n    };\n  }, []);\n\n  const unpin = useCallback(() => {\n    isPinnedRef.current = false;\n  }, []);\n\n  return { scrollRef, contentRef, unpin };\n};\n"],"mappings":";;;;;;;;;;AASA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;AAyCtB,MAAa,yBAG4C;CACvD,MAAM,YAAY,OAAsB,IAAI;CAC5C,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,cAAc,OAAO,IAAI;CAE/B,gBAAgB;EACd,MAAM,gBAAgB,UAAU;EAChC,MAAM,iBAAiB,WAAW;EAElC,IAAI,CAAC,iBAAiB,CAAC,gBAAgB;EAEvC,MAAM,8BACJ,cAAc,eACd,cAAc,YACd,cAAc;EAOhB,MAAM,qBAAqB;GACzB,YAAY,UAAU,sBAAsB,KAAK;EACnD;EAEA,MAAM,iBAAiB,IAAI,qBAAqB;GAC9C,IAAI,CAAC,YAAY,SAAS;GAC1B,IAAI,sBAAsB,KAAK,GAAG;GAKlC,cAAc,YACZ,cAAc,eAAe,cAAc;EAC/C,CAAC;EAED,eAAe,QAAQ,cAAc;EACrC,cAAc,iBAAiB,UAAU,cAAc,EAAE,SAAS,KAAK,CAAC;EAExE,aAAa;GACX,eAAe,WAAW;GAC1B,cAAc,oBAAoB,UAAU,YAAY;EAC1D;CACF,GAAG,CAAC,CAAC;CAML,OAAO;EAAE;EAAW;EAAY,OAJlB,kBAAkB;GAC9B,YAAY,UAAU;EACxB,GAAG,CAAC,CAEgC;CAAE;AACxC"}

package/dist/esm/libs/auth.mjs

@@ -3,7 +3,7 @@ import { ssoClient } from "@better-auth/sso/client";
 import { editor } from "@intlayer/config/built";
 import { BACKEND_URL } from "@intlayer/config/defaultValues";
 import { createAuthClient } from "better-auth/client";
-import { magicLinkClient, twoFactorClient } from "better-auth/client/plugins";
+import { magicLinkClient, multiSessionClient, twoFactorClient } from "better-auth/client/plugins";
 
 //#region src/libs/auth.ts
 const getAuthClient = (backendURL) => createAuthClient({
@@ -17,7 +17,8 @@ const getAuthClient = (backendURL) => createAuthClient({
 		} }),
 		passkeyClient(),
 		magicLinkClient(),
-		ssoClient()
+		ssoClient(),
+		multiSessionClient()
 	]
 });
 const getAuthAPI = (intlayerConfig) => {
@@ -138,6 +139,15 @@ const getAuthAPI = (intlayerConfig) => {
 	const deleteSSOProvider = async (args) => {
 		return client.sso.deleteProvider({ providerId: args.providerId });
 	};
+	const listDeviceSessions = async (...args) => {
+		return client.multiSession.listDeviceSessions(...args);
+	};
+	const setActiveSession = async (...args) => {
+		return client.multiSession.setActive(...args);
+	};
+	const revokeDeviceSession = async (...args) => {
+		return client.multiSession.revoke(...args);
+	};
 	return {
 		getAuthClient: () => client,
 		signInEmail,
@@ -176,7 +186,10 @@ const getAuthAPI = (intlayerConfig) => {
 		signInSSO,
 		registerSSO,
 		listSSOProviders,
-		deleteSSOProvider
+		deleteSSOProvider,
+		listDeviceSessions,
+		revokeDeviceSession,
+		setActiveSession
 	};
 };