@intlayer/design-system 9.3.3 → 9.4.0

package/dist/esm/hooks/useScrollY.mjs

@@ -1,7 +1,9 @@
 'use client';
 
+import { observeScrollExtent } from "../utils/observeScrollExtent.mjs";
+import { scheduleFrameTask } from "../utils/scheduleFrameTask.mjs";
 import { useGetElementOrWindow } from "./useGetElementOrWindow.mjs";
-import { useCallback, useSyncExternalStore } from "react";
+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/providers/ThemeProvider.mjs

@@ -0,0 +1,143 @@
+'use client';
+
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/providers/ThemeProvider.tsx
+/** Attribute mirrored on `<html>`; the Tailwind dark variant keys on it. */
+const THEME_ATTRIBUTE = "data-theme";
+/** Media query resolving the OS colour scheme. */
+const DARK_MEDIA_QUERY = "(prefers-color-scheme: dark)";
+const isServer = typeof window === "undefined";
+/**
+* Inline bootstrap applying the persisted theme before the first paint.
+*
+* Serialized through `Function.prototype.toString()` and injected as an inline
+* `<script>`, so it must stay self-contained: no import, no module-scope
+* binding, no reference the bundler could rewrite into a helper call. Every
+* value it needs is passed as an argument.
+*/
+const themeScript = (storageKey, themeAttribute, darkMediaQuery) => {
+	let storedTheme = null;
+	try {
+		storedTheme = localStorage.getItem(storageKey);
+	} catch {}
+	const theme = storedTheme === "light" || storedTheme === "dark" ? storedTheme : window.matchMedia(darkMediaQuery).matches ? "dark" : "light";
+	const element = document.documentElement;
+	element.setAttribute(themeAttribute, theme);
+	element.style.colorScheme = theme;
+};
+/** Serializes the bootstrap and its arguments into inline script source. */
+const buildBootstrap = (storageKey) => `(${themeScript})(${JSON.stringify(storageKey)},${JSON.stringify(THEME_ATTRIBUTE)},${JSON.stringify(DARK_MEDIA_QUERY)})`;
+/** Reads the persisted preference, discarding unknown values. */
+const getStoredTheme = (storageKey) => {
+	try {
+		const storedTheme = localStorage.getItem(storageKey);
+		if (storedTheme === "light" || storedTheme === "dark" || storedTheme === "system") return storedTheme;
+	} catch {}
+	return "system";
+};
+/**
+* Suppresses CSS transitions while the theme attribute flips, so every themed
+* element repaints at once instead of animating between palettes.
+*
+* @returns Callback restoring transitions, to call once the theme is applied.
+*/
+const suppressTransitions = (nonce) => {
+	const style = document.createElement("style");
+	if (nonce) style.setAttribute("nonce", nonce);
+	style.appendChild(document.createTextNode("*,*::before,*::after{transition:none!important}"));
+	document.head.appendChild(style);
+	return () => {
+		getComputedStyle(document.body).getPropertyValue("transition");
+		style.remove();
+	};
+};
+const useIsomorphicLayoutEffect = isServer ? useEffect : useLayoutEffect;
+const ThemeContext = createContext(void 0);
+/** Served outside of a provider, so consumers render light instead of crashing. */
+const fallbackThemeContext = {
+	theme: "system",
+	resolvedTheme: void 0,
+	setTheme: () => void 0
+};
+/**
+* Reads and updates the current theme.
+*
+* @example
+* ```tsx
+* const { resolvedTheme, setTheme } = useTheme();
+* ```
+*/
+const useTheme = () => useContext(ThemeContext) ?? fallbackThemeContext;
+const Theme = ({ storageKey = "theme", nonce, children }) => {
+	const [theme, setThemeState] = useState("system");
+	const [systemTheme, setSystemTheme] = useState(void 0);
+	const resolvedTheme = theme === "system" ? systemTheme : theme;
+	useIsomorphicLayoutEffect(() => {
+		const media = window.matchMedia(DARK_MEDIA_QUERY);
+		setThemeState(getStoredTheme(storageKey));
+		setSystemTheme(media.matches ? "dark" : "light");
+		const handleSystemChange = (event) => setSystemTheme(event.matches ? "dark" : "light");
+		const handleStorageChange = (event) => {
+			if (event.key !== storageKey) return;
+			setThemeState(getStoredTheme(storageKey));
+		};
+		media.addEventListener("change", handleSystemChange);
+		window.addEventListener("storage", handleStorageChange);
+		return () => {
+			media.removeEventListener("change", handleSystemChange);
+			window.removeEventListener("storage", handleStorageChange);
+		};
+	}, [storageKey]);
+	useIsomorphicLayoutEffect(() => {
+		if (!resolvedTheme) return;
+		const element = document.documentElement;
+		if (element.getAttribute(THEME_ATTRIBUTE) === resolvedTheme) return;
+		const restoreTransitions = suppressTransitions(nonce);
+		element.setAttribute(THEME_ATTRIBUTE, resolvedTheme);
+		element.style.colorScheme = resolvedTheme;
+		restoreTransitions();
+	}, [resolvedTheme, nonce]);
+	const setTheme = useCallback((nextTheme) => {
+		setThemeState(nextTheme);
+		try {
+			localStorage.setItem(storageKey, nextTheme);
+		} catch {}
+	}, [storageKey]);
+	const value = useMemo(() => ({
+		theme,
+		resolvedTheme,
+		setTheme
+	}), [
+		theme,
+		resolvedTheme,
+		setTheme
+	]);
+	return /* @__PURE__ */ jsxs(ThemeContext.Provider, {
+		value,
+		children: [/* @__PURE__ */ jsx("script", {
+			nonce: isServer ? nonce : "",
+			dangerouslySetInnerHTML: { __html: buildBootstrap(storageKey) }
+		}), children]
+	});
+};
+/**
+* Applies the persisted theme to `<html>` before the first paint, keeps it in
+* sync with the OS preference and with the other tabs, and exposes it through
+* {@link useTheme}.
+*
+* Nested providers pass through, so a layout can mount one without fighting an
+* outer provider over the `<html>` attribute.
+*/
+const ThemeProvider = ({ children, ...props }) => {
+	if (useContext(ThemeContext)) return /* @__PURE__ */ jsx(Fragment$1, { children });
+	return /* @__PURE__ */ jsx(Theme, {
+		...props,
+		children
+	});
+};
+
+//#endregion
+export { ThemeProvider, useTheme };
+//# sourceMappingURL=ThemeProvider.mjs.map

package/dist/esm/providers/ThemeProvider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.mjs","names":[],"sources":["../../../src/providers/ThemeProvider.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  type FC,\n  type PropsWithChildren,\n  useCallback,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useState,\n} from 'react';\n\n/** Theme actually painted — the OS preference once `system` is resolved. */\nexport type ResolvedTheme = 'light' | 'dark';\n\n/** Theme stored as the user preference. `system` follows the OS setting. */\nexport type Theme = ResolvedTheme | 'system';\n\n/** Attribute mirrored on `<html>`; the Tailwind dark variant keys on it. */\nconst THEME_ATTRIBUTE = 'data-theme';\n\n/** Media query resolving the OS colour scheme. */\nconst DARK_MEDIA_QUERY = '(prefers-color-scheme: dark)';\n\nconst isServer = typeof window === 'undefined';\n\n/**\n * Inline bootstrap applying the persisted theme before the first paint.\n *\n * Serialized through `Function.prototype.toString()` and injected as an inline\n * `<script>`, so it must stay self-contained: no import, no module-scope\n * binding, no reference the bundler could rewrite into a helper call. Every\n * value it needs is passed as an argument.\n */\nconst themeScript = (\n  storageKey: string,\n  themeAttribute: string,\n  darkMediaQuery: string\n): void => {\n  let storedTheme: string | null = null;\n\n  try {\n    storedTheme = localStorage.getItem(storageKey);\n  } catch {\n    // Storage can throw (private mode, blocked cookies) — fall back to the OS.\n  }\n\n  const theme =\n    storedTheme === 'light' || storedTheme === 'dark'\n      ? storedTheme\n      : window.matchMedia(darkMediaQuery).matches\n        ? 'dark'\n        : 'light';\n\n  const element = document.documentElement;\n\n  element.setAttribute(themeAttribute, theme);\n  element.style.colorScheme = theme;\n};\n\n/** Serializes the bootstrap and its arguments into inline script source. */\nconst buildBootstrap = (storageKey: string): string =>\n  `(${themeScript})(${JSON.stringify(storageKey)},${JSON.stringify(THEME_ATTRIBUTE)},${JSON.stringify(DARK_MEDIA_QUERY)})`;\n\n/** Reads the persisted preference, discarding unknown values. */\nconst getStoredTheme = (storageKey: string): Theme => {\n  try {\n    const storedTheme = localStorage.getItem(storageKey);\n\n    if (\n      storedTheme === 'light' ||\n      storedTheme === 'dark' ||\n      storedTheme === 'system'\n    ) {\n      return storedTheme;\n    }\n  } catch {\n    // Storage can throw (private mode, blocked cookies).\n  }\n\n  return 'system';\n};\n\n/**\n * Suppresses CSS transitions while the theme attribute flips, so every themed\n * element repaints at once instead of animating between palettes.\n *\n * @returns Callback restoring transitions, to call once the theme is applied.\n */\nconst suppressTransitions = (nonce?: string): (() => void) => {\n  const style = document.createElement('style');\n\n  if (nonce) style.setAttribute('nonce', nonce);\n\n  style.appendChild(\n    document.createTextNode('*,*::before,*::after{transition:none!important}')\n  );\n  document.head.appendChild(style);\n\n  return () => {\n    // Reading a computed value forces a synchronous style recalculation, so\n    // the new theme is committed while transitions are still suppressed.\n    getComputedStyle(document.body).getPropertyValue('transition');\n    style.remove();\n  };\n};\n\nconst useIsomorphicLayoutEffect = isServer ? useEffect : useLayoutEffect;\n\ntype ThemeContextValue = {\n  /** Persisted preference — `system` while following the OS. */\n  theme: Theme;\n  /** Theme applied to `<html>`. `undefined` until the client resolves it. */\n  resolvedTheme: ResolvedTheme | undefined;\n  /** Persists a preference and applies it. */\n  setTheme: (theme: Theme) => void;\n};\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\n\n/** Served outside of a provider, so consumers render light instead of crashing. */\nconst fallbackThemeContext: ThemeContextValue = {\n  theme: 'system',\n  resolvedTheme: undefined,\n  setTheme: () => undefined,\n};\n\n/**\n * Reads and updates the current theme.\n *\n * @example\n * ```tsx\n * const { resolvedTheme, setTheme } = useTheme();\n * ```\n */\nexport const useTheme = (): ThemeContextValue =>\n  useContext(ThemeContext) ?? fallbackThemeContext;\n\nexport type ThemeProviderProps = {\n  /** `localStorage` key holding the preference. Defaults to `theme`. */\n  storageKey?: string;\n  /** CSP nonce, required when the page forbids unsafe inline scripts. */\n  nonce?: string;\n};\n\nconst Theme: FC<PropsWithChildren<ThemeProviderProps>> = ({\n  storageKey = 'theme',\n  nonce,\n  children,\n}) => {\n  // Both the server render and the first client one start from `system`, so\n  // the hydrated markup matches; the browser state is read back before paint.\n  const [theme, setThemeState] = useState<Theme>('system');\n  const [systemTheme, setSystemTheme] = useState<ResolvedTheme | undefined>(\n    undefined\n  );\n\n  const resolvedTheme = theme === 'system' ? systemTheme : theme;\n\n  // Read the browser state back before the first paint, then keep following\n  // the OS preference and the other tabs.\n  useIsomorphicLayoutEffect(() => {\n    const media = window.matchMedia(DARK_MEDIA_QUERY);\n\n    setThemeState(getStoredTheme(storageKey));\n    setSystemTheme(media.matches ? 'dark' : 'light');\n\n    const handleSystemChange = (event: MediaQueryListEvent) =>\n      setSystemTheme(event.matches ? 'dark' : 'light');\n\n    const handleStorageChange = (event: StorageEvent) => {\n      if (event.key !== storageKey) return;\n\n      setThemeState(getStoredTheme(storageKey));\n    };\n\n    media.addEventListener('change', handleSystemChange);\n    window.addEventListener('storage', handleStorageChange);\n\n    return () => {\n      media.removeEventListener('change', handleSystemChange);\n      window.removeEventListener('storage', handleStorageChange);\n    };\n  }, [storageKey]);\n\n  // Mirror the resolved theme onto `<html>`.\n  useIsomorphicLayoutEffect(() => {\n    if (!resolvedTheme) return;\n\n    const element = document.documentElement;\n\n    // The inline bootstrap already applied it on the initial load.\n    if (element.getAttribute(THEME_ATTRIBUTE) === resolvedTheme) return;\n\n    const restoreTransitions = suppressTransitions(nonce);\n\n    element.setAttribute(THEME_ATTRIBUTE, resolvedTheme);\n    element.style.colorScheme = resolvedTheme;\n\n    restoreTransitions();\n  }, [resolvedTheme, nonce]);\n\n  const setTheme = useCallback(\n    (nextTheme: Theme) => {\n      setThemeState(nextTheme);\n\n      try {\n        localStorage.setItem(storageKey, nextTheme);\n      } catch {\n        // Storage can throw — the choice then only lasts for this page.\n      }\n    },\n    [storageKey]\n  );\n\n  const value = useMemo<ThemeContextValue>(\n    () => ({ theme, resolvedTheme, setTheme }),\n    [theme, resolvedTheme, setTheme]\n  );\n\n  return (\n    <ThemeContext.Provider value={value}>\n      <script\n        // Browsers hide the nonce value from the DOM API, so echoing it while\n        // hydrating would mismatch the server markup.\n        nonce={isServer ? nonce : ''}\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: the bootstrap has to run before hydration, and its content is built from literals\n        dangerouslySetInnerHTML={{ __html: buildBootstrap(storageKey) }}\n      />\n      {children}\n    </ThemeContext.Provider>\n  );\n};\n\n/**\n * Applies the persisted theme to `<html>` before the first paint, keeps it in\n * sync with the OS preference and with the other tabs, and exposes it through\n * {@link useTheme}.\n *\n * Nested providers pass through, so a layout can mount one without fighting an\n * outer provider over the `<html>` attribute.\n */\nexport const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({\n  children,\n  ...props\n}) => {\n  const parentTheme = useContext(ThemeContext);\n\n  if (parentTheme) return <>{children}</>;\n\n  return <Theme {...props}>{children}</Theme>;\n};\n"],"mappings":";;;;;;;AAqBA,MAAM,kBAAkB;;AAGxB,MAAM,mBAAmB;AAEzB,MAAM,WAAW,OAAO,WAAW;;;;;;;;;AAUnC,MAAM,eACJ,YACA,gBACA,mBACS;CACT,IAAI,cAA6B;CAEjC,IAAI;EACF,cAAc,aAAa,QAAQ,UAAU;CAC/C,QAAQ,CAER;CAEA,MAAM,QACJ,gBAAgB,WAAW,gBAAgB,SACvC,cACA,OAAO,WAAW,cAAc,CAAC,CAAC,UAChC,SACA;CAER,MAAM,UAAU,SAAS;CAEzB,QAAQ,aAAa,gBAAgB,KAAK;CAC1C,QAAQ,MAAM,cAAc;AAC9B;;AAGA,MAAM,kBAAkB,eACtB,IAAI,YAAY,IAAI,KAAK,UAAU,UAAU,EAAE,GAAG,KAAK,UAAU,eAAe,EAAE,GAAG,KAAK,UAAU,gBAAgB,EAAE;;AAGxH,MAAM,kBAAkB,eAA8B;CACpD,IAAI;EACF,MAAM,cAAc,aAAa,QAAQ,UAAU;EAEnD,IACE,gBAAgB,WAChB,gBAAgB,UAChB,gBAAgB,UAEhB,OAAO;CAEX,QAAQ,CAER;CAEA,OAAO;AACT;;;;;;;AAQA,MAAM,uBAAuB,UAAiC;CAC5D,MAAM,QAAQ,SAAS,cAAc,OAAO;CAE5C,IAAI,OAAO,MAAM,aAAa,SAAS,KAAK;CAE5C,MAAM,YACJ,SAAS,eAAe,iDAAiD,CAC3E;CACA,SAAS,KAAK,YAAY,KAAK;CAE/B,aAAa;EAGX,iBAAiB,SAAS,IAAI,CAAC,CAAC,iBAAiB,YAAY;EAC7D,MAAM,OAAO;CACf;AACF;AAEA,MAAM,4BAA4B,WAAW,YAAY;AAWzD,MAAM,eAAe,cAA6C,MAAS;;AAG3E,MAAM,uBAA0C;CAC9C,OAAO;CACP,eAAe;CACf,gBAAgB;AAClB;;;;;;;;;AAUA,MAAa,iBACX,WAAW,YAAY,KAAK;AAS9B,MAAM,SAAoD,EACxD,aAAa,SACb,OACA,eACI;CAGJ,MAAM,CAAC,OAAO,iBAAiB,SAAgB,QAAQ;CACvD,MAAM,CAAC,aAAa,kBAAkB,SACpC,MACF;CAEA,MAAM,gBAAgB,UAAU,WAAW,cAAc;CAIzD,gCAAgC;EAC9B,MAAM,QAAQ,OAAO,WAAW,gBAAgB;EAEhD,cAAc,eAAe,UAAU,CAAC;EACxC,eAAe,MAAM,UAAU,SAAS,OAAO;EAE/C,MAAM,sBAAsB,UAC1B,eAAe,MAAM,UAAU,SAAS,OAAO;EAEjD,MAAM,uBAAuB,UAAwB;GACnD,IAAI,MAAM,QAAQ,YAAY;GAE9B,cAAc,eAAe,UAAU,CAAC;EAC1C;EAEA,MAAM,iBAAiB,UAAU,kBAAkB;EACnD,OAAO,iBAAiB,WAAW,mBAAmB;EAEtD,aAAa;GACX,MAAM,oBAAoB,UAAU,kBAAkB;GACtD,OAAO,oBAAoB,WAAW,mBAAmB;EAC3D;CACF,GAAG,CAAC,UAAU,CAAC;CAGf,gCAAgC;EAC9B,IAAI,CAAC,eAAe;EAEpB,MAAM,UAAU,SAAS;EAGzB,IAAI,QAAQ,aAAa,eAAe,MAAM,eAAe;EAE7D,MAAM,qBAAqB,oBAAoB,KAAK;EAEpD,QAAQ,aAAa,iBAAiB,aAAa;EACnD,QAAQ,MAAM,cAAc;EAE5B,mBAAmB;CACrB,GAAG,CAAC,eAAe,KAAK,CAAC;CAEzB,MAAM,WAAW,aACd,cAAqB;EACpB,cAAc,SAAS;EAEvB,IAAI;GACF,aAAa,QAAQ,YAAY,SAAS;EAC5C,QAAQ,CAER;CACF,GACA,CAAC,UAAU,CACb;CAEA,MAAM,QAAQ,eACL;EAAE;EAAO;EAAe;CAAS,IACxC;EAAC;EAAO;EAAe;CAAQ,CACjC;CAEA,OACE,qBAAC,aAAa,UAAd;EAA8B;YAA9B,CACE,oBAAC,UAAD;GAGE,OAAO,WAAW,QAAQ;GAE1B,yBAAyB,EAAE,QAAQ,eAAe,UAAU,EAAE;EAC/D,IACA,QACoB;;AAE3B;;;;;;;;;AAUA,MAAa,iBAA4D,EACvE,UACA,GAAG,YACC;CAGJ,IAFoB,WAAW,YAEjB,GAAG,OAAO,kCAAG,SAAW;CAEtC,OAAO,oBAAC,OAAD;EAAO,GAAI;EAAQ;CAAgB;AAC5C"}

package/dist/esm/providers/index.mjs

@@ -1,5 +1,6 @@
 import { DeferredAuthProvider, useIsAuthFetchEnabled } from "./DeferredAuthProvider.mjs";
+import { ThemeProvider, useTheme } from "./ThemeProvider.mjs";
 import { ReactQueryProvider, getQueryClient } from "./ReactQueryProvider.mjs";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
-export { DeferredAuthProvider, ReactQueryDevtools, ReactQueryProvider, getQueryClient, useIsAuthFetchEnabled };
+export { DeferredAuthProvider, ReactQueryDevtools, ReactQueryProvider, ThemeProvider, getQueryClient, useIsAuthFetchEnabled, useTheme };

package/dist/esm/routes.mjs

@@ -27,6 +27,8 @@ const App_ReviewerMarketplace_Reviewer_Path = "/find-reviewer/$reviewerId";
 const App_ReviewerMarketplace_Dashboard_Mission_Path = "/find-reviewer/dashboard/mission/$missionId";
 const getAppReviewerProfileRoute = (reviewerId) => `/find-reviewer/${reviewerId}`;
 const getAppReviewerMissionRoute = (missionId) => `/find-reviewer/dashboard/mission/${missionId}`;
+/** Root of the authentication section, usable as a `Disallow` prefix. */
+const App_Auth_Path = "/auth";
 const App_Auth_SignIn_Path = "/auth/login";
 const App_Auth_SignUp_Path = "/auth/register";
 const App_Auth_TwoFactor_Path = "/auth/2fa";
@@ -274,6 +276,7 @@ const Backend_OAuth2_Token = `https://${Backend_Domain}/oauth2/token`;
 const Mcp_Root = `https://${Mcp_Domain}`;
 const Mcp_Sse = `https://${Mcp_Domain}/sse`;
 const WellKnown_ApiCatalog_Path = "/.well-known/api-catalog";
+const WellKnown_AiCatalog_Path = "/.well-known/ai-catalog.json";
 const WellKnown_OAuthProtectedResource_Path = "/.well-known/oauth-protected-resource";
 const WellKnown_OAuthAuthorizationServer_Path = "/.well-known/oauth-authorization-server";
 const WellKnown_McpServerCard_Path = "/.well-known/mcp/server-card.json";
@@ -300,5 +303,5 @@ const External_ExampleIntlayerWithReactNative = "https://github.com/aymericzip/i
 const External_ExampleIntlayerWithExpress = "https://github.com/aymericzip/intlayer/tree/main/examples/express-app";
 
 //#endregion
-export { App_Admin, App_Admin_Affiliate, App_Admin_Affiliate_Path, App_Admin_Dashboard, App_Admin_Dashboard_Path, App_Admin_Discussions, App_Admin_Discussions_Path, App_Admin_Management, App_Admin_Management_Path, App_Admin_Organizations, App_Admin_Organizations_Path, App_Admin_Path, App_Admin_Projects, App_Admin_Projects_Path, App_Admin_PromoCodes, App_Admin_PromoCodes_Path, App_Admin_Reviewers, App_Admin_Reviewers_Path, App_Admin_Users, App_Admin_Users_Path, App_Affiliation, App_Affiliation_Path, App_Auth_AskResetPassword, App_Auth_AskResetPassword_Path, App_Auth_ChangePassword, App_Auth_ChangePassword_Path, App_Auth_Demo_Path, App_Auth_ResetPassword, App_Auth_ResetPassword_Path, App_Auth_SignIn, App_Auth_SignIn_Path, App_Auth_SignUp, App_Auth_SignUp_Path, App_Auth_TwoFactor, App_Auth_TwoFactor_Path, App_Dashboard, App_Dashboard_Analytics, App_Dashboard_Analytics_Path, App_Dashboard_Assets_Path, App_Dashboard_Dictionaries, App_Dashboard_Dictionaries_Path, App_Dashboard_Editor, App_Dashboard_Editor_Path, App_Dashboard_IDE, App_Dashboard_IDE_Path, App_Dashboard_Organization, App_Dashboard_Organization_Path, App_Dashboard_Profile, App_Dashboard_Profile_Path, App_Dashboard_Projects, App_Dashboard_Projects_Path, App_Dashboard_Scanner, App_Dashboard_Scanner_Path, App_Dashboard_Tags, App_Dashboard_Tags_Path, App_Dashboard_Translate, App_Dashboard_Translate_Path, App_Demo, App_Demo_Path, App_Domain, App_Home_Path, App_Init_Path, App_NotFound_Path, App_Onboarding, App_Onboarding_Path, App_Pricing, App_Pricing_Path, App_ReviewerMarketplace, App_ReviewerMarketplace_Dashboard, App_ReviewerMarketplace_Dashboard_Mission_Path, App_ReviewerMarketplace_Dashboard_Path, App_ReviewerMarketplace_Path, App_ReviewerMarketplace_Reviewer_Path, AuthMd_Path, Backend_Domain, Backend_Health, Backend_OAuth2_Token, Backend_Root, Doc_Blog_Path, Doc_Blog_Root_Path, Doc_Blog_Search_Path, Doc_Blog_What_is_i18n_Path, Doc_CLI_Fill_Path, Doc_CLI_Review_Path, Doc_CLI_Translate_Path, Doc_Chat_Path, Doc_Contributors_Path, Doc_Environment_Adonis_Path, Doc_Environment_Angular_Path, Doc_Environment_Astro_Path, Doc_Environment_CRA_Path, Doc_Environment_Express_Path, Doc_Environment_Fastify_Path, Doc_Environment_Hono_Path, Doc_Environment_Lit_Path, Doc_Environment_Lynx_Path, Doc_Environment_NestJS_Path, Doc_Environment_NextJS_14_Path, Doc_Environment_NextJS_15_Path, Doc_Environment_NextJS_16_Path, Doc_Environment_NextJS_Path, Doc_Environment_Nodejs_Path, Doc_Environment_NuxtAndVue_Path, Doc_Environment_ReactNativeAndExpo_Path, Doc_Environment_Tanstack_Path, Doc_Environment_ViteAndPreact_Path, Doc_Environment_ViteAndReact_Path, Doc_Environment_ViteAndReact_ReactRouterV7_FSRoutes_Path, Doc_Environment_ViteAndReact_ReactRouterV7_Path, Doc_Environment_ViteAndSolid_Path, Doc_Environment_ViteAndSvelte_Path, Doc_Environment_ViteAndVue_Path, Doc_FrequentQuestions_Path, Doc_IntlayerCMS_Path, Doc_IntlayerVisualEditor_Path, Doc_Intlayer_with_Lynx_and_React_Path, Doc_MCP_Path, Doc_Path, Doc_PrivacyPolicy_Path, Doc_ReleasesV6_Path, Doc_ReleasesV7_Path, Doc_ReleasesV8_Path, Doc_Root_Path, Doc_Search_Path, Doc_ShowcaseSubmit_Path, Doc_Showcase_Path, Doc_TermsOfService_Path, Doc_Why_Path, External_AI_Landing_Page, External_Discord, External_DockerHub_SelfHost, External_ExampleIntlayerWithExpress, External_ExampleIntlayerWithNextjs, External_ExampleIntlayerWithReactJS, External_ExampleIntlayerWithReactNative, External_ExampleIntlayerWithViteAndPreact, External_ExampleIntlayerWithViteAndReact, External_ExampleIntlayerWithViteAndSolid, External_ExampleIntlayerWithViteAndSvelte, External_ExampleIntlayerWithViteAndVue, External_Examples, External_Github, External_Github_i18n_benchmark, External_LinkedIn, External_ShowcaseApp, LlmsTxt_Path, Mcp_Domain, Mcp_Root, Mcp_Sse, Showcase_Domain, Showcase_Root, Showcase_Root_Path, Showcase_Submit, Showcase_Submit_Path, Website_Benchmark, Website_Benchmark_NextJS, Website_Benchmark_NextJS_Path, Website_Benchmark_Path, Website_Benchmark_Tanstack, Website_Benchmark_Tanstack_Path, Website_Blog, Website_Blog_Path, Website_Blog_Root, Website_Blog_Root_Path, Website_Blog_Search, Website_Blog_Search_Path, Website_Blog_What_is_i18n, Website_Blog_What_is_i18n_Path, Website_CMS, Website_CMS_Path, Website_Changelog, Website_Changelog_Path, Website_Contributors, Website_Contributors_Path, Website_Demo, Website_Demo_Path, Website_Doc, Website_Doc_CLI_Fill, Website_Doc_CLI_Fill_Path, Website_Doc_CLI_Review, Website_Doc_CLI_Review_Path, Website_Doc_CLI_Translate, Website_Doc_CLI_Translate_Path, Website_Doc_Chat, Website_Doc_Chat_Path, Website_Doc_Environment_Adonis, Website_Doc_Environment_Adonis_Path, Website_Doc_Environment_Angular, Website_Doc_Environment_Angular_Path, Website_Doc_Environment_Astro, Website_Doc_Environment_Astro_Path, Website_Doc_Environment_CRA, Website_Doc_Environment_CRA_Path, Website_Doc_Environment_Express, Website_Doc_Environment_Express_Path, Website_Doc_Environment_Fastify, Website_Doc_Environment_Fastify_Path, Website_Doc_Environment_Hono, Website_Doc_Environment_Hono_Path, Website_Doc_Environment_Lit, Website_Doc_Environment_Lit_Path, Website_Doc_Environment_Lynx, Website_Doc_Environment_Lynx_Path, Website_Doc_Environment_NestJS, Website_Doc_Environment_NestJS_Path, Website_Doc_Environment_NextJS, Website_Doc_Environment_NextJS_14, Website_Doc_Environment_NextJS_14_Path, Website_Doc_Environment_NextJS_15, Website_Doc_Environment_NextJS_15_Path, Website_Doc_Environment_NextJS_16, Website_Doc_Environment_NextJS_16_Path, Website_Doc_Environment_NextJS_Path, Website_Doc_Environment_Nodejs, Website_Doc_Environment_Nodejs_Path, Website_Doc_Environment_NuxtAndVue, Website_Doc_Environment_NuxtAndVue_Path, Website_Doc_Environment_ReactNativeAndExpo, Website_Doc_Environment_ReactNativeAndExpo_Path, Website_Doc_Environment_Tanstack, Website_Doc_Environment_Tanstack_Path, Website_Doc_Environment_ViteAndPreact, Website_Doc_Environment_ViteAndPreact_Path, Website_Doc_Environment_ViteAndReact, Website_Doc_Environment_ViteAndReact_Path, Website_Doc_Environment_ViteAndReact_ReactRouterV7, Website_Doc_Environment_ViteAndReact_ReactRouterV7_FSRoutes, Website_Doc_Environment_ViteAndReact_ReactRouterV7_FSRoutes_Path, Website_Doc_Environment_ViteAndReact_ReactRouterV7_Path, Website_Doc_Environment_ViteAndSolid, Website_Doc_Environment_ViteAndSolid_Path, Website_Doc_Environment_ViteAndSvelte, Website_Doc_Environment_ViteAndSvelte_Path, Website_Doc_Environment_ViteAndVue, Website_Doc_Environment_ViteAndVue_Path, Website_Doc_IntlayerCMS, Website_Doc_IntlayerCMS_Path, Website_Doc_IntlayerVisualEditor, Website_Doc_IntlayerVisualEditor_Path, Website_Doc_Intlayer_with_Lynx_and_React, Website_Doc_Intlayer_with_Lynx_and_React_Path, Website_Doc_MCP, Website_Doc_MCP_Path, Website_Doc_Path, Website_Doc_Root, Website_Doc_Root_Path, Website_Doc_Search, Website_Doc_Search_Path, Website_Doc_SelfHosting, Website_Doc_SelfHosting_Path, Website_Doc_Why, Website_Doc_Why_Path, Website_Domain, Website_FrequentQuestions, Website_FrequentQuestions_Path, Website_Home, Website_Home_Path, Website_Markdown_Preview, Website_Markdown_Preview_Path, Website_NotFound, Website_NotFound_Path, Website_Playground, Website_Playground_Path, Website_PrivacyPolicy, Website_PrivacyPolicy_Path, Website_ReleasesV6, Website_ReleasesV6_Path, Website_ReleasesV7, Website_ReleasesV7_Path, Website_ReleasesV8, Website_ReleasesV8_Path, Website_ReleasesV9_Path, Website_Scanner, Website_Scanner_Path, Website_TMS, Website_TMS_Path, Website_TermsOfService, Website_TermsOfService_Path, Website_Translate, Website_Translate_Path, WellKnown_AgentSkillsIndex_Path, WellKnown_AgentSkills_Path, WellKnown_ApiCatalog_Path, WellKnown_McpServerCard_Path, WellKnown_OAuthAuthorizationServer_Path, WellKnown_OAuthProtectedResource_Path, getAppAdminAffiliateRoute, getAppAdminOrganizationAbsoluteRoute, getAppAdminOrganizationRoute, getAppAdminProjectAbsoluteRoute, getAppAdminProjectRoute, getAppAdminPromoCodeRoute, getAppAdminReviewerRoute, getAppAdminUserAbsoluteRoute, getAppAdminUserRoute, getAppOnboardingFlowAbsoluteRoute, getAppOnboardingFlowRoute, getAppReviewerMissionRoute, getAppReviewerProfileRoute };
+export { App_Admin, App_Admin_Affiliate, App_Admin_Affiliate_Path, App_Admin_Dashboard, App_Admin_Dashboard_Path, App_Admin_Discussions, App_Admin_Discussions_Path, App_Admin_Management, App_Admin_Management_Path, App_Admin_Organizations, App_Admin_Organizations_Path, App_Admin_Path, App_Admin_Projects, App_Admin_Projects_Path, App_Admin_PromoCodes, App_Admin_PromoCodes_Path, App_Admin_Reviewers, App_Admin_Reviewers_Path, App_Admin_Users, App_Admin_Users_Path, App_Affiliation, App_Affiliation_Path, App_Auth_AskResetPassword, App_Auth_AskResetPassword_Path, App_Auth_ChangePassword, App_Auth_ChangePassword_Path, App_Auth_Demo_Path, App_Auth_Path, App_Auth_ResetPassword, App_Auth_ResetPassword_Path, App_Auth_SignIn, App_Auth_SignIn_Path, App_Auth_SignUp, App_Auth_SignUp_Path, App_Auth_TwoFactor, App_Auth_TwoFactor_Path, App_Dashboard, App_Dashboard_Analytics, App_Dashboard_Analytics_Path, App_Dashboard_Assets_Path, App_Dashboard_Dictionaries, App_Dashboard_Dictionaries_Path, App_Dashboard_Editor, App_Dashboard_Editor_Path, App_Dashboard_IDE, App_Dashboard_IDE_Path, App_Dashboard_Organization, App_Dashboard_Organization_Path, App_Dashboard_Profile, App_Dashboard_Profile_Path, App_Dashboard_Projects, App_Dashboard_Projects_Path, App_Dashboard_Scanner, App_Dashboard_Scanner_Path, App_Dashboard_Tags, App_Dashboard_Tags_Path, App_Dashboard_Translate, App_Dashboard_Translate_Path, App_Demo, App_Demo_Path, App_Domain, App_Home_Path, App_Init_Path, App_NotFound_Path, App_Onboarding, App_Onboarding_Path, App_Pricing, App_Pricing_Path, App_ReviewerMarketplace, App_ReviewerMarketplace_Dashboard, App_ReviewerMarketplace_Dashboard_Mission_Path, App_ReviewerMarketplace_Dashboard_Path, App_ReviewerMarketplace_Path, App_ReviewerMarketplace_Reviewer_Path, AuthMd_Path, Backend_Domain, Backend_Health, Backend_OAuth2_Token, Backend_Root, Doc_Blog_Path, Doc_Blog_Root_Path, Doc_Blog_Search_Path, Doc_Blog_What_is_i18n_Path, Doc_CLI_Fill_Path, Doc_CLI_Review_Path, Doc_CLI_Translate_Path, Doc_Chat_Path, Doc_Contributors_Path, Doc_Environment_Adonis_Path, Doc_Environment_Angular_Path, Doc_Environment_Astro_Path, Doc_Environment_CRA_Path, Doc_Environment_Express_Path, Doc_Environment_Fastify_Path, Doc_Environment_Hono_Path, Doc_Environment_Lit_Path, Doc_Environment_Lynx_Path, Doc_Environment_NestJS_Path, Doc_Environment_NextJS_14_Path, Doc_Environment_NextJS_15_Path, Doc_Environment_NextJS_16_Path, Doc_Environment_NextJS_Path, Doc_Environment_Nodejs_Path, Doc_Environment_NuxtAndVue_Path, Doc_Environment_ReactNativeAndExpo_Path, Doc_Environment_Tanstack_Path, Doc_Environment_ViteAndPreact_Path, Doc_Environment_ViteAndReact_Path, Doc_Environment_ViteAndReact_ReactRouterV7_FSRoutes_Path, Doc_Environment_ViteAndReact_ReactRouterV7_Path, Doc_Environment_ViteAndSolid_Path, Doc_Environment_ViteAndSvelte_Path, Doc_Environment_ViteAndVue_Path, Doc_FrequentQuestions_Path, Doc_IntlayerCMS_Path, Doc_IntlayerVisualEditor_Path, Doc_Intlayer_with_Lynx_and_React_Path, Doc_MCP_Path, Doc_Path, Doc_PrivacyPolicy_Path, Doc_ReleasesV6_Path, Doc_ReleasesV7_Path, Doc_ReleasesV8_Path, Doc_Root_Path, Doc_Search_Path, Doc_ShowcaseSubmit_Path, Doc_Showcase_Path, Doc_TermsOfService_Path, Doc_Why_Path, External_AI_Landing_Page, External_Discord, External_DockerHub_SelfHost, External_ExampleIntlayerWithExpress, External_ExampleIntlayerWithNextjs, External_ExampleIntlayerWithReactJS, External_ExampleIntlayerWithReactNative, External_ExampleIntlayerWithViteAndPreact, External_ExampleIntlayerWithViteAndReact, External_ExampleIntlayerWithViteAndSolid, External_ExampleIntlayerWithViteAndSvelte, External_ExampleIntlayerWithViteAndVue, External_Examples, External_Github, External_Github_i18n_benchmark, External_LinkedIn, External_ShowcaseApp, LlmsTxt_Path, Mcp_Domain, Mcp_Root, Mcp_Sse, Showcase_Domain, Showcase_Root, Showcase_Root_Path, Showcase_Submit, Showcase_Submit_Path, Website_Benchmark, Website_Benchmark_NextJS, Website_Benchmark_NextJS_Path, Website_Benchmark_Path, Website_Benchmark_Tanstack, Website_Benchmark_Tanstack_Path, Website_Blog, Website_Blog_Path, Website_Blog_Root, Website_Blog_Root_Path, Website_Blog_Search, Website_Blog_Search_Path, Website_Blog_What_is_i18n, Website_Blog_What_is_i18n_Path, Website_CMS, Website_CMS_Path, Website_Changelog, Website_Changelog_Path, Website_Contributors, Website_Contributors_Path, Website_Demo, Website_Demo_Path, Website_Doc, Website_Doc_CLI_Fill, Website_Doc_CLI_Fill_Path, Website_Doc_CLI_Review, Website_Doc_CLI_Review_Path, Website_Doc_CLI_Translate, Website_Doc_CLI_Translate_Path, Website_Doc_Chat, Website_Doc_Chat_Path, Website_Doc_Environment_Adonis, Website_Doc_Environment_Adonis_Path, Website_Doc_Environment_Angular, Website_Doc_Environment_Angular_Path, Website_Doc_Environment_Astro, Website_Doc_Environment_Astro_Path, Website_Doc_Environment_CRA, Website_Doc_Environment_CRA_Path, Website_Doc_Environment_Express, Website_Doc_Environment_Express_Path, Website_Doc_Environment_Fastify, Website_Doc_Environment_Fastify_Path, Website_Doc_Environment_Hono, Website_Doc_Environment_Hono_Path, Website_Doc_Environment_Lit, Website_Doc_Environment_Lit_Path, Website_Doc_Environment_Lynx, Website_Doc_Environment_Lynx_Path, Website_Doc_Environment_NestJS, Website_Doc_Environment_NestJS_Path, Website_Doc_Environment_NextJS, Website_Doc_Environment_NextJS_14, Website_Doc_Environment_NextJS_14_Path, Website_Doc_Environment_NextJS_15, Website_Doc_Environment_NextJS_15_Path, Website_Doc_Environment_NextJS_16, Website_Doc_Environment_NextJS_16_Path, Website_Doc_Environment_NextJS_Path, Website_Doc_Environment_Nodejs, Website_Doc_Environment_Nodejs_Path, Website_Doc_Environment_NuxtAndVue, Website_Doc_Environment_NuxtAndVue_Path, Website_Doc_Environment_ReactNativeAndExpo, Website_Doc_Environment_ReactNativeAndExpo_Path, Website_Doc_Environment_Tanstack, Website_Doc_Environment_Tanstack_Path, Website_Doc_Environment_ViteAndPreact, Website_Doc_Environment_ViteAndPreact_Path, Website_Doc_Environment_ViteAndReact, Website_Doc_Environment_ViteAndReact_Path, Website_Doc_Environment_ViteAndReact_ReactRouterV7, Website_Doc_Environment_ViteAndReact_ReactRouterV7_FSRoutes, Website_Doc_Environment_ViteAndReact_ReactRouterV7_FSRoutes_Path, Website_Doc_Environment_ViteAndReact_ReactRouterV7_Path, Website_Doc_Environment_ViteAndSolid, Website_Doc_Environment_ViteAndSolid_Path, Website_Doc_Environment_ViteAndSvelte, Website_Doc_Environment_ViteAndSvelte_Path, Website_Doc_Environment_ViteAndVue, Website_Doc_Environment_ViteAndVue_Path, Website_Doc_IntlayerCMS, Website_Doc_IntlayerCMS_Path, Website_Doc_IntlayerVisualEditor, Website_Doc_IntlayerVisualEditor_Path, Website_Doc_Intlayer_with_Lynx_and_React, Website_Doc_Intlayer_with_Lynx_and_React_Path, Website_Doc_MCP, Website_Doc_MCP_Path, Website_Doc_Path, Website_Doc_Root, Website_Doc_Root_Path, Website_Doc_Search, Website_Doc_Search_Path, Website_Doc_SelfHosting, Website_Doc_SelfHosting_Path, Website_Doc_Why, Website_Doc_Why_Path, Website_Domain, Website_FrequentQuestions, Website_FrequentQuestions_Path, Website_Home, Website_Home_Path, Website_Markdown_Preview, Website_Markdown_Preview_Path, Website_NotFound, Website_NotFound_Path, Website_Playground, Website_Playground_Path, Website_PrivacyPolicy, Website_PrivacyPolicy_Path, Website_ReleasesV6, Website_ReleasesV6_Path, Website_ReleasesV7, Website_ReleasesV7_Path, Website_ReleasesV8, Website_ReleasesV8_Path, Website_ReleasesV9_Path, Website_Scanner, Website_Scanner_Path, Website_TMS, Website_TMS_Path, Website_TermsOfService, Website_TermsOfService_Path, Website_Translate, Website_Translate_Path, WellKnown_AgentSkillsIndex_Path, WellKnown_AgentSkills_Path, WellKnown_AiCatalog_Path, WellKnown_ApiCatalog_Path, WellKnown_McpServerCard_Path, WellKnown_OAuthAuthorizationServer_Path, WellKnown_OAuthProtectedResource_Path, getAppAdminAffiliateRoute, getAppAdminOrganizationAbsoluteRoute, getAppAdminOrganizationRoute, getAppAdminProjectAbsoluteRoute, getAppAdminProjectRoute, getAppAdminPromoCodeRoute, getAppAdminReviewerRoute, getAppAdminUserAbsoluteRoute, getAppAdminUserRoute, getAppOnboardingFlowAbsoluteRoute, getAppOnboardingFlowRoute, getAppReviewerMissionRoute, getAppReviewerProfileRoute };
 //# sourceMappingURL=routes.mjs.map