@vjdesigns/vjdesigns-ui 0.0.0-stage → 1.5.0

package/dist/hooks/useOverlayLayer.mjs

@@ -0,0 +1,163 @@
+import { resolveElement as e } from "./elementSource.mjs";
+import { createContext as t, createElement as n, useCallback as r, useContext as i, useId as a, useLayoutEffect as o, useMemo as s, useRef as c, useSyncExternalStore as l } from "react";
+//#region src/hooks/useOverlayLayer.ts
+var u = [], d = /* @__PURE__ */ new Map(), f = /* @__PURE__ */ new Set();
+function p() {
+	f.forEach((e) => e());
+}
+function m(e) {
+	return f.add(e), () => {
+		f.delete(e);
+	};
+}
+function h(e) {
+	return e === null ? void 0 : u.find((t) => t.id === e);
+}
+function g(e, t) {
+	let n = e, r = /* @__PURE__ */ new Set();
+	for (; n && !r.has(n.id);) {
+		if (n.id === t || n.parentId === t) return !0;
+		r.add(n.id), n = h(n.parentId);
+	}
+	return !1;
+}
+function _(e) {
+	let t = /* @__PURE__ */ new Set(), n = [], r = new Map(e.map((e) => [e.id, e])), i = (e, a) => {
+		if (t.has(e.id) || a.has(e.id)) return;
+		a.add(e.id);
+		let o = e.parentId ? r.get(e.parentId) : void 0;
+		o && i(o, a), t.add(e.id), n.push(e);
+	};
+	return e.forEach((e) => i(e, /* @__PURE__ */ new Set())), n;
+}
+function v(t, n) {
+	let r = d.get(t);
+	if (!r) return !1;
+	for (let t of r) {
+		let r = t.current.elements?.() ?? [];
+		for (let t of r) if (e(t)?.contains(n)) return !0;
+	}
+	return !1;
+}
+function y(t) {
+	let n = [];
+	for (let r of d.get(t) ?? []) for (let t of r.current.elements?.() ?? []) {
+		let r = e(t);
+		r && !n.includes(r) && n.push(r);
+	}
+	return n;
+}
+function b(e) {
+	return u.filter((t) => t.id !== e && g(t, e)).flatMap((e) => y(e.id));
+}
+function x(e) {
+	let t = u.findIndex((t) => t.id === e);
+	return t === -1 ? [] : u.slice(t + 1).flatMap((e) => y(e.id));
+}
+function S(e) {
+	return m(e);
+}
+function C(e, t) {
+	return t ? u.some((n) => n.id !== e && g(n, e) && v(n.id, t)) : !1;
+}
+function w(e, t) {
+	return t ? v(e, t) || C(e, t) : !1;
+}
+function T(e) {
+	return Array.from(d.get(e) ?? [], (e) => e.current);
+}
+function E(e) {
+	if (e.key !== "Escape" || e.defaultPrevented || e.isComposing) return;
+	let t = u[u.length - 1];
+	if (t) for (let n of T(t.id)) n.onEscape?.(e);
+}
+function D(e) {
+	if (e.defaultPrevented) return;
+	let t = e.target instanceof Node ? e.target : null;
+	if (!t) return;
+	let n = [...u];
+	for (let r = n.length - 1; r >= 0; --r) {
+		let i = n[r];
+		if (w(i.id, t)) break;
+		for (let t of T(i.id)) t.onOutsidePress?.(e);
+		if (i.modal) break;
+	}
+}
+var O = !1;
+function k() {
+	typeof document > "u" || (u.length > 0 && !O ? (document.addEventListener("keydown", E), document.addEventListener("pointerdown", D), O = !0) : u.length === 0 && O && (document.removeEventListener("keydown", E), document.removeEventListener("pointerdown", D), O = !1));
+}
+function A(e) {
+	return u = _([...u.filter((t) => t.id !== e.id), e]), k(), p(), () => {
+		u = u.filter((t) => t !== e), k(), p();
+	};
+}
+function j(e, t) {
+	let n = d.get(e);
+	return n || (n = /* @__PURE__ */ new Set(), d.set(e, n)), n.add(t), () => {
+		let n = d.get(e);
+		n?.delete(t), n && n.size === 0 && d.delete(e);
+	};
+}
+function M(e) {
+	return u.length > 0 && u[u.length - 1].id === e;
+}
+function N(e) {
+	let t = u.findIndex((t) => t.id === e);
+	return t !== -1 && u.slice(t + 1).some((e) => e.modal);
+}
+function P() {
+	return u.map(({ id: e, parentId: t, modal: n }) => ({
+		id: e,
+		parentId: t,
+		modal: n
+	}));
+}
+var F = t(null);
+function I() {
+	return i(F);
+}
+function L({ layer: e, children: t }) {
+	return n(F.Provider, { value: e.id }, t);
+}
+function R({ active: e, modal: t = !1, parentId: n, onEscape: u, onOutsidePress: d, elements: f }) {
+	let p = `layer-${a()}`, h = i(F), g = n === void 0 ? h : n, _ = c({});
+	_.current = {
+		onEscape: u,
+		onOutsidePress: d,
+		elements: f
+	}, o(() => j(p, _), [p]), o(() => {
+		if (e) return A({
+			id: p,
+			parentId: g ?? null,
+			modal: t
+		});
+	}, [
+		e,
+		p,
+		g,
+		t
+	]);
+	let v = l(m, () => e && M(p), () => !1), y = l(m, () => e && N(p), () => !1), b = r(() => M(p), [p]), x = r((e) => w(p, e), [p]), S = r((e) => C(p, e), [p]), T = r((e) => j(p, e), [p]);
+	return s(() => ({
+		id: p,
+		parentId: g ?? null,
+		isTopmost: v,
+		hasModalAbove: y,
+		getIsTopmost: b,
+		contains: x,
+		childContains: S,
+		addHandlers: T
+	}), [
+		p,
+		g,
+		v,
+		y,
+		b,
+		x,
+		S,
+		T
+	]);
+}
+//#endregion
+export { L as OverlayLayerProvider, C as childLayerContains, b as getChildLayerElements, x as getLayerElementsAbove, P as getOverlayLayerStack, w as layerContains, S as subscribeOverlayLayers, R as useOverlayLayer, I as useParentOverlayLayer };

package/dist/hooks/useResponsiveValue.cjs.js

@@ -0,0 +1 @@
+const e=require("../utils/responsive.cjs.js");let t=require("react");var n=()=>typeof window<`u`&&typeof window.matchMedia==`function`,r=e.RESPONSIVE_KEYS.filter(e=>e!==`base`);function i(i,a){let o=e.isResponsiveObject(i),s=(0,t.useCallback)(t=>{if(!o||!n())return()=>{};let i=r.map(t=>window.matchMedia(e.breakpointQuery(t)));return i.forEach(e=>e.addEventListener(`change`,t)),()=>i.forEach(e=>e.removeEventListener(`change`,t))},[o]),c=()=>e.resolveResponsive(i,a,t=>n()&&window.matchMedia(e.breakpointQuery(t)).matches),l=e.isResponsiveObject(i)?i.base??a:i;return(0,t.useSyncExternalStore)(s,c,()=>l)}exports.useResponsiveValue=i;

package/dist/hooks/useResponsiveValue.d.ts

@@ -0,0 +1,10 @@
+import { Responsive } from '../types/common';
+/**
+ * Resolves a `Responsive<T>` value (a single value, or `{ base, sm, md, ... }`)
+ * for the current viewport, mobile first, and re-renders when a breakpoint
+ * is crossed. Use it for responsive props that change behavior or markup;
+ * for pure styling, prefer CSS (see `responsiveVars` in src/utils).
+ *
+ * During server rendering it returns `base` (or `fallback`).
+ */
+export declare function useResponsiveValue<T>(value: Responsive<T>, fallback: T): T;

package/dist/hooks/useResponsiveValue.mjs

@@ -0,0 +1,14 @@
+import { RESPONSIVE_KEYS as e, breakpointQuery as t, isResponsiveObject as n, resolveResponsive as r } from "../utils/responsive.mjs";
+import { useCallback as i, useSyncExternalStore as a } from "react";
+//#region src/hooks/useResponsiveValue.ts
+var o = () => typeof window < "u" && typeof window.matchMedia == "function", s = e.filter((e) => e !== "base");
+function c(e, c) {
+	let l = n(e), u = i((e) => {
+		if (!l || !o()) return () => {};
+		let n = s.map((e) => window.matchMedia(t(e)));
+		return n.forEach((t) => t.addEventListener("change", e)), () => n.forEach((t) => t.removeEventListener("change", e));
+	}, [l]), d = () => r(e, c, (e) => o() && window.matchMedia(t(e)).matches), f = n(e) ? e.base ?? c : e;
+	return a(u, d, () => f);
+}
+//#endregion
+export { c as useResponsiveValue };

package/dist/hooks/useScrollLock.cjs.js

@@ -0,0 +1 @@
+let e=require("react");var t=0,n=null;function r(){if(typeof document>`u`)return()=>{};let e=document.body;if(t===0){let t=window.innerWidth-document.documentElement.clientWidth;if(n={overflow:e.style.overflow,paddingInlineEnd:e.style.paddingInlineEnd},t>0){let n=parseFloat(window.getComputedStyle(e).paddingInlineEnd)||0;e.style.paddingInlineEnd=`${n+t}px`}e.style.overflow=`hidden`}t+=1;let r=!1;return()=>{r||(r=!0,--t,t===0&&n&&(e.style.overflow=n.overflow,e.style.paddingInlineEnd=n.paddingInlineEnd,n=null))}}function i(t){(0,e.useLayoutEffect)(()=>{if(t)return r()},[t])}exports.lockScroll=r,exports.useScrollLock=i;

package/dist/hooks/useScrollLock.d.ts

@@ -0,0 +1,4 @@
+/** Locks page scrolling. Returns a function that releases this lock (safe to call twice). */
+export declare function lockScroll(): () => void;
+/** Locks page scrolling while `active`. */
+export declare function useScrollLock(active: boolean): void;

package/dist/hooks/useScrollLock.mjs

@@ -0,0 +1,30 @@
+import { useLayoutEffect as e } from "react";
+//#region src/hooks/useScrollLock.ts
+var t = 0, n = null;
+function r() {
+	if (typeof document > "u") return () => {};
+	let e = document.body;
+	if (t === 0) {
+		let t = window.innerWidth - document.documentElement.clientWidth;
+		if (n = {
+			overflow: e.style.overflow,
+			paddingInlineEnd: e.style.paddingInlineEnd
+		}, t > 0) {
+			let n = parseFloat(window.getComputedStyle(e).paddingInlineEnd) || 0;
+			e.style.paddingInlineEnd = `${n + t}px`;
+		}
+		e.style.overflow = "hidden";
+	}
+	t += 1;
+	let r = !1;
+	return () => {
+		r || (r = !0, --t, t === 0 && n && (e.style.overflow = n.overflow, e.style.paddingInlineEnd = n.paddingInlineEnd, n = null));
+	};
+}
+function i(t) {
+	e(() => {
+		if (t) return r();
+	}, [t]);
+}
+//#endregion
+export { r as lockScroll, i as useScrollLock };

package/dist/hooks/useStorage.cjs.js

@@ -0,0 +1 @@
+let e=require("react");var t={local:new Set,session:new Set},n=e=>{try{return typeof window>`u`?void 0:e===`local`?window.localStorage:window.sessionStorage}catch{return}},r=(e,t)=>{try{return n(e)?.getItem(t)??null}catch{return null}},i=e=>t[e].forEach(e=>e());function a(e,r){t[e].add(r);let i=t=>{t.storageArea===n(e)&&r()};return typeof window<`u`&&window.addEventListener(`storage`,i),()=>{t[e].delete(r),typeof window<`u`&&window.removeEventListener(`storage`,i)}}function o(t,o,s,{serialize:c=JSON.stringify,deserialize:l=JSON.parse}={}){let u=(0,e.useCallback)(e=>a(t,e),[t]),d=(0,e.useSyncExternalStore)(u,()=>r(t,o),()=>null);return[(0,e.useMemo)(()=>{if(d===null)return s;try{return l(d)}catch{return s}},[d,l]),(0,e.useCallback)(e=>{let a=r(t,o),u=s;if(a!==null)try{u=l(a)}catch{}let d=typeof e==`function`?e(u):e;try{n(t)?.setItem(o,c(d))}catch{}i(t)},[t,o,c,l]),(0,e.useCallback)(()=>{try{n(t)?.removeItem(o)}catch{}i(t)},[t,o])]}function s(e,t,n){return o(`local`,e,t,n)}function c(e,t,n){return o(`session`,e,t,n)}exports.useLocalStorage=s,exports.useSessionStorage=c;

package/dist/hooks/useStorage.d.ts

@@ -0,0 +1,21 @@
+export interface UseStorageOptions<T> {
+    /** Converts the value to the stored string. @default JSON.stringify */
+    serialize?: (value: T) => string;
+    /** Converts the stored string back. A string that fails to parse gives `defaultValue`. @default JSON.parse */
+    deserialize?: (raw: string) => T;
+}
+/**
+ * State saved in `localStorage` under `key`: it survives reloads and stays in
+ * sync across every component using the key and across browser tabs. Values
+ * are JSON by default. Returns `defaultValue` during server rendering, when
+ * nothing is stored, or when storage is blocked (it never throws).
+ *
+ * ```tsx
+ * const [density, setDensity] = useLocalStorage("table-density", "comfortable");
+ * ```
+ */
+export declare function useLocalStorage<T>(key: string, defaultValue: T, options?: UseStorageOptions<T>): [value: T, setValue: (value: T | ((current: T) => T)) => void, remove: () => void];
+/**
+ * Like `useLocalStorage`, in `sessionStorage`: kept until the tab closes.
+ */
+export declare function useSessionStorage<T>(key: string, defaultValue: T, options?: UseStorageOptions<T>): [value: T, setValue: (value: T | ((current: T) => T)) => void, remove: () => void];

package/dist/hooks/useStorage.mjs

@@ -0,0 +1,70 @@
+import { useCallback as e, useMemo as t, useSyncExternalStore as n } from "react";
+//#region src/hooks/useStorage.ts
+var r = {
+	local: /* @__PURE__ */ new Set(),
+	session: /* @__PURE__ */ new Set()
+}, i = (e) => {
+	try {
+		return typeof window > "u" ? void 0 : e === "local" ? window.localStorage : window.sessionStorage;
+	} catch {
+		return;
+	}
+}, a = (e, t) => {
+	try {
+		return i(e)?.getItem(t) ?? null;
+	} catch {
+		return null;
+	}
+}, o = (e) => r[e].forEach((e) => e());
+function s(e, t) {
+	r[e].add(t);
+	let n = (n) => {
+		n.storageArea === i(e) && t();
+	};
+	return typeof window < "u" && window.addEventListener("storage", n), () => {
+		r[e].delete(t), typeof window < "u" && window.removeEventListener("storage", n);
+	};
+}
+function c(r, c, l, { serialize: u = JSON.stringify, deserialize: d = JSON.parse } = {}) {
+	let f = e((e) => s(r, e), [r]), p = n(f, () => a(r, c), () => null);
+	return [
+		t(() => {
+			if (p === null) return l;
+			try {
+				return d(p);
+			} catch {
+				return l;
+			}
+		}, [p, d]),
+		e((e) => {
+			let t = a(r, c), n = l;
+			if (t !== null) try {
+				n = d(t);
+			} catch {}
+			let s = typeof e == "function" ? e(n) : e;
+			try {
+				i(r)?.setItem(c, u(s));
+			} catch {}
+			o(r);
+		}, [
+			r,
+			c,
+			u,
+			d
+		]),
+		e(() => {
+			try {
+				i(r)?.removeItem(c);
+			} catch {}
+			o(r);
+		}, [r, c])
+	];
+}
+function l(e, t, n) {
+	return c("local", e, t, n);
+}
+function u(e, t, n) {
+	return c("session", e, t, n);
+}
+//#endregion
+export { l as useLocalStorage, u as useSessionStorage };

package/dist/hooks/useTiming.cjs.js

@@ -0,0 +1 @@
+let e=require("react");function t(t,n,{leading:r=!1,maxWait:i}={}){let a=(0,e.useRef)(t);a.current=t;let o=(0,e.useRef)({}),s=(0,e.useMemo)(()=>{let e=()=>{let{args:e}=o.current;clearTimeout(o.current.timer),o.current={},e&&a.current(...e)},t=((...t)=>{let s=o.current,c=Date.now();if(s.timer===void 0&&r){a.current(...t),o.current={firstCall:c,timer:setTimeout(()=>o.current={},n)};return}if(clearTimeout(s.timer),s.args=t,s.firstCall??=c,i!==void 0&&c-s.firstCall>=i)return e();s.timer=setTimeout(e,n)});return t.cancel=()=>{clearTimeout(o.current.timer),o.current={}},t.flush=()=>{o.current.args&&e()},t.isPending=()=>o.current.args!==void 0,t},[n,r,i]);return(0,e.useEffect)(()=>()=>s.cancel(),[s]),s}function n(t,n){let r=(0,e.useRef)(t);r.current=t;let i=(0,e.useRef)({}),a=(0,e.useMemo)(()=>{let e=()=>{let{args:e}=i.current;i.current.args=void 0,i.current.timer=void 0,e&&(i.current.last=Date.now(),r.current(...e))},t=((...t)=>{let a=i.current,o=a.last===void 0?1/0:Date.now()-a.last;if(o>=n&&a.timer===void 0){a.last=Date.now(),r.current(...t);return}a.args=t,a.timer??=setTimeout(e,Math.max(0,n-o))});return t.cancel=()=>{clearTimeout(i.current.timer),i.current={last:i.current.last}},t.flush=()=>{clearTimeout(i.current.timer),e()},t.isPending=()=>i.current.args!==void 0,t},[n]);return(0,e.useEffect)(()=>()=>a.cancel(),[a]),a}function r(n,r){let[i,a]=(0,e.useState)(n),o=t(a,r),s=(0,e.useRef)(n);s.current=n,(0,e.useEffect)(()=>{o(n)},[n,o]);let c=(0,e.useCallback)(()=>{o.cancel(),a(s.current)},[o]);return[i,{cancel:o.cancel,flush:c}]}function i(t,n){let r=(0,e.useRef)(t);r.current=t,(0,e.useEffect)(()=>{if(n===null)return;let e=setInterval(()=>r.current(),n);return()=>clearInterval(e)},[n])}function a(t,n){let r=(0,e.useRef)(t);r.current=t;let i=(0,e.useRef)(void 0),a=(0,e.useCallback)(()=>clearTimeout(i.current),[]),o=(0,e.useCallback)(()=>{clearTimeout(i.current),n!==null&&(i.current=setTimeout(()=>r.current(),n))},[n]);return(0,e.useEffect)(()=>(o(),a),[o,a]),{clear:a,reset:o}}function o(t){let[n,r]=(0,e.useState)({current:t,previous:void 0});return Object.is(n.current,t)||r({current:t,previous:n.current}),Object.is(n.current,t)?n.previous:n.current}exports.useDebouncedCallback=t,exports.useDebouncedValue=r,exports.useInterval=i,exports.usePrevious=o,exports.useThrottledCallback=n,exports.useTimeout=a;

package/dist/hooks/useTiming.d.ts

@@ -0,0 +1,78 @@
+/** A debounced or throttled function, with controls for the pending call. */
+export type ControlledCallback<A extends unknown[]> = ((...args: A) => void) & {
+    /** Drops the pending call. */
+    cancel: () => void;
+    /** Runs the pending call now (if there is one). */
+    flush: () => void;
+    /** True while a call is waiting. */
+    isPending: () => boolean;
+};
+/**
+ * A function that waits until calls stop for `wait` ms, then runs once with
+ * the last arguments. Always calls the latest `callback`; a pending call is
+ * dropped on unmount. Use it to save, search, or validate after typing pauses.
+ *
+ * ```tsx
+ * const save = useDebouncedCallback((text: string) => api.saveDraft(text), 500);
+ * <Textarea onChange={(e) => save(e.target.value)} />
+ * ```
+ */
+export declare function useDebouncedCallback<A extends unknown[]>(callback: (...args: A) => void, wait: number, { leading, maxWait }?: {
+    leading?: boolean;
+    maxWait?: number;
+}): ControlledCallback<A>;
+/**
+ * A function that runs at most once every `wait` ms: the first call runs
+ * right away, and the last call made during the wait runs when it ends.
+ * Use it for scroll, resize, or pointer-move handlers.
+ *
+ * ```tsx
+ * const track = useThrottledCallback((x: number) => setPosition(x), 100);
+ * ```
+ */
+export declare function useThrottledCallback<A extends unknown[]>(callback: (...args: A) => void, wait: number): ControlledCallback<A>;
+/**
+ * The value, updated only after it stops changing for `wait` ms. Use it to
+ * search or fetch as someone types, without a request per keystroke.
+ *
+ * ```tsx
+ * const [query, setQuery] = useState("");
+ * const [debouncedQuery] = useDebouncedValue(query, 300);
+ * useEffect(() => { search(debouncedQuery); }, [debouncedQuery]);
+ * ```
+ */
+export declare function useDebouncedValue<T>(value: T, wait: number): [debounced: T, controls: {
+    cancel: () => void;
+    flush: () => void;
+}];
+/**
+ * Calls `callback` every `delay` ms while `delay` is a number; pass `null`
+ * to pause. Always calls the latest `callback`, and stops on unmount.
+ *
+ * ```tsx
+ * const [running, setRunning] = useState(true);
+ * useInterval(() => setSeconds((s) => s + 1), running ? 1000 : null);
+ * ```
+ */
+export declare function useInterval(callback: () => void, delay: number | null): void;
+/**
+ * Calls `callback` once, `delay` ms after mount (or after `delay` changes);
+ * pass `null` to not schedule it. Returns `clear` and `reset` (restart the
+ * wait).
+ *
+ * ```tsx
+ * const { reset } = useTimeout(() => setSaved(false), 2000);
+ * ```
+ */
+export declare function useTimeout(callback: () => void, delay: number | null): {
+    clear: () => void;
+    reset: () => void;
+};
+/**
+ * The value from before its last change (undefined until it first changes).
+ *
+ * ```tsx
+ * const previousCount = usePrevious(count);
+ * ```
+ */
+export declare function usePrevious<T>(value: T): T | undefined;

package/dist/hooks/useTiming.mjs

@@ -0,0 +1,100 @@
+import { useCallback as e, useEffect as t, useMemo as n, useRef as r, useState as i } from "react";
+//#region src/hooks/useTiming.ts
+function a(e, i, { leading: a = !1, maxWait: o } = {}) {
+	let s = r(e);
+	s.current = e;
+	let c = r({}), l = n(() => {
+		let e = () => {
+			let { args: e } = c.current;
+			clearTimeout(c.current.timer), c.current = {}, e && s.current(...e);
+		}, t = ((...t) => {
+			let n = c.current, r = Date.now();
+			if (n.timer === void 0 && a) {
+				s.current(...t), c.current = {
+					firstCall: r,
+					timer: setTimeout(() => c.current = {}, i)
+				};
+				return;
+			}
+			if (clearTimeout(n.timer), n.args = t, n.firstCall ??= r, o !== void 0 && r - n.firstCall >= o) return e();
+			n.timer = setTimeout(e, i);
+		});
+		return t.cancel = () => {
+			clearTimeout(c.current.timer), c.current = {};
+		}, t.flush = () => {
+			c.current.args && e();
+		}, t.isPending = () => c.current.args !== void 0, t;
+	}, [
+		i,
+		a,
+		o
+	]);
+	return t(() => () => l.cancel(), [l]), l;
+}
+function o(e, i) {
+	let a = r(e);
+	a.current = e;
+	let o = r({}), s = n(() => {
+		let e = () => {
+			let { args: e } = o.current;
+			o.current.args = void 0, o.current.timer = void 0, e && (o.current.last = Date.now(), a.current(...e));
+		}, t = ((...t) => {
+			let n = o.current, r = n.last === void 0 ? Infinity : Date.now() - n.last;
+			if (r >= i && n.timer === void 0) {
+				n.last = Date.now(), a.current(...t);
+				return;
+			}
+			n.args = t, n.timer ??= setTimeout(e, Math.max(0, i - r));
+		});
+		return t.cancel = () => {
+			clearTimeout(o.current.timer), o.current = { last: o.current.last };
+		}, t.flush = () => {
+			clearTimeout(o.current.timer), e();
+		}, t.isPending = () => o.current.args !== void 0, t;
+	}, [i]);
+	return t(() => () => s.cancel(), [s]), s;
+}
+function s(n, o) {
+	let [s, c] = i(n), l = a(c, o), u = r(n);
+	u.current = n, t(() => {
+		l(n);
+	}, [n, l]);
+	let d = e(() => {
+		l.cancel(), c(u.current);
+	}, [l]);
+	return [s, {
+		cancel: l.cancel,
+		flush: d
+	}];
+}
+function c(e, n) {
+	let i = r(e);
+	i.current = e, t(() => {
+		if (n === null) return;
+		let e = setInterval(() => i.current(), n);
+		return () => clearInterval(e);
+	}, [n]);
+}
+function l(n, i) {
+	let a = r(n);
+	a.current = n;
+	let o = r(void 0), s = e(() => clearTimeout(o.current), []), c = e(() => {
+		clearTimeout(o.current), i !== null && (o.current = setTimeout(() => a.current(), i));
+	}, [i]);
+	return t(() => (c(), s), [c, s]), {
+		clear: s,
+		reset: c
+	};
+}
+function u(e) {
+	let [t, n] = i({
+		current: e,
+		previous: void 0
+	});
+	return Object.is(t.current, e) || n({
+		current: e,
+		previous: t.current
+	}), Object.is(t.current, e) ? t.previous : t.current;
+}
+//#endregion
+export { a as useDebouncedCallback, s as useDebouncedValue, c as useInterval, u as usePrevious, o as useThrottledCallback, l as useTimeout };

package/dist/hooks/useVirtualizer.cjs.js

@@ -0,0 +1 @@
+const e=require("./elementSource.cjs.js");let t=require("react");function n(e,t){let n=0,r=e.length-1;for(;n<r;){let i=n+r>>1;e[i]<=t?n=i+1:r=i}return n}function r({count:r,scrollElement:i,estimateSize:a,overscan:o=6,gap:s=0,paddingStart:c=0,paddingEnd:l=0,initialCount:u=10}){let d=e.useResolvedElement(i),[f,p]=(0,t.useState)({offset:0,height:0}),m=(0,t.useRef)(new Map),[h,g]=(0,t.useState)(0),_=(0,t.useRef)(a);_.current=a;let v=(0,t.useMemo)(()=>{let e=Array(r),t=Array(r),n=c;for(let i=0;i<r;i++){let a=_.current,o=m.current.get(i)??(typeof a==`number`?a:a(i));e[i]=n,t[i]=n+o,n+=o+(i<r-1?s:0)}return{starts:e,ends:t,total:n+l}},[r,s,c,l,h,typeof a==`number`?a:-1]);(0,t.useLayoutEffect)(()=>{if(!d)return;let e=0,t=()=>{e=0,p(e=>e.offset===d.scrollTop&&e.height===d.clientHeight?e:{offset:d.scrollTop,height:d.clientHeight})};t();let n=()=>{e||=requestAnimationFrame(t)};d.addEventListener(`scroll`,n,{passive:!0});let r=typeof ResizeObserver<`u`?new ResizeObserver(t):null;return r?.observe(d),()=>{d.removeEventListener(`scroll`,n),r?.disconnect(),e&&cancelAnimationFrame(e)}},[d]);let y=(0,t.useMemo)(()=>{if(r===0)return[];let e,t;f.height===0?(e=0,t=Math.min(r,u)-1):(e=n(v.ends,f.offset),t=n(v.ends,f.offset+f.height),e=Math.max(0,e-o),t=Math.min(r-1,t+o));let i=[];for(let n=e;n<=t;n++)i.push({index:n,start:v.starts[n],end:v.ends[n],size:v.ends[n]-v.starts[n]});return i},[r,v,f,o,u]),b=(0,t.useRef)(new Map),x=(0,t.useRef)(null),S=(0,t.useRef)(!1),C=(0,t.useCallback)(e=>{let t=Number(e.getAttribute(`data-index`));if(!Number.isFinite(t))return;let n=e.getBoundingClientRect().height;n>0&&m.current.get(t)!==n&&(m.current.set(t,n),S.current||(S.current=!0,queueMicrotask(()=>{S.current=!1,g(e=>e+1)})))},[]),w=(0,t.useCallback)(e=>{e&&(!x.current&&typeof ResizeObserver<`u`&&(x.current=new ResizeObserver(e=>{for(let t of e)t.target.isConnected?C(t.target):(x.current?.unobserve(t.target),b.current.delete(t.target))})),b.current.has(e)||(b.current.set(e,Number(e.getAttribute(`data-index`))),x.current?.observe(e)),C(e))},[C]),T=(0,t.useRef)(r);if(T.current!==r){T.current=r;for(let e of Array.from(m.current.keys()))e>=r&&m.current.delete(e)}(0,t.useLayoutEffect)(()=>()=>x.current?.disconnect(),[]);let E=(0,t.useRef)(v);E.current=v;let D=(0,t.useCallback)((t,{align:n=`auto`,behavior:r}={})=>{let a=e.resolveElement(i),{starts:o,ends:s}=E.current;if(!a||t<0||t>=o.length)return;let c=a.scrollTop,l=a.clientHeight,u=o[t],d=s[t],f;if(n===`start`)f=u;else if(n===`end`)f=d-l;else if(n===`center`)f=u-(l-(d-u))/2;else if(u<c)f=u;else if(d>c+l)f=d-l;else return;a.scrollTo({top:Math.max(0,f),behavior:r})},[i]);return{virtualItems:y,totalSize:v.total,measureElement:w,scrollToIndex:D}}exports.useVirtualizer=r;

package/dist/hooks/useVirtualizer.d.ts

@@ -0,0 +1,77 @@
+import { ElementSource } from './elementSource';
+/** One item the virtualizer wants rendered. */
+export interface VirtualItem {
+    /** Index in the full list. */
+    index: number;
+    /** Distance from the top of the list to the item, in px. */
+    start: number;
+    /** Measured (or estimated) height, in px. */
+    size: number;
+    /** Distance from the top to the item's bottom edge, in px. */
+    end: number;
+}
+/** How `scrollToIndex` aligns the item in the viewport. */
+export type VirtualAlign = "start" | "center" | "end" | "auto";
+export interface UseVirtualizerOptions {
+    /** Number of items in the list. */
+    count: number;
+    /** The scrolling element (or a ref to it). */
+    scrollElement: ElementSource;
+    /**
+     * Height of an item before it is measured, in px, or a function of its
+     * index. Rendered items are then measured (with `measureElement`), so
+     * variable heights work; a closer estimate means less jumping.
+     */
+    estimateSize: number | ((index: number) => number);
+    /** Extra items rendered above and below the viewport, so fast scrolling and Tab never hit a blank edge. @default 6 */
+    overscan?: number;
+    /** Space between items, in px. @default 0 */
+    gap?: number;
+    /** Space before the first item (a sticky header, padding), in px. @default 0 */
+    paddingStart?: number;
+    /** Space after the last item, in px. @default 0 */
+    paddingEnd?: number;
+    /** Items rendered during server rendering and before the viewport is measured. @default 10 */
+    initialCount?: number;
+}
+export interface Virtualizer {
+    /** The items to render: those in view plus the overscan. */
+    virtualItems: VirtualItem[];
+    /** Height of the whole list, in px. Give the inner list element this height. */
+    totalSize: number;
+    /**
+     * Ref callback for each rendered item's element (which must carry
+     * `data-index`). Measures its height now and whenever it resizes.
+     */
+    measureElement: (element: HTMLElement | null) => void;
+    /** Scrolls so the item at `index` is visible. `auto` scrolls only as far as needed. */
+    scrollToIndex: (index: number, options?: {
+        align?: VirtualAlign;
+        behavior?: ScrollBehavior;
+    }) => void;
+}
+/**
+ * Headless list virtualization: renders only the items in view (plus
+ * `overscan`), so lists of 100,000 rows stay fast. Works with variable
+ * heights by measuring rendered items, and is SSR-safe (the server renders
+ * the first `initialCount` items). `VirtualList` is built on it; use the
+ * hook directly for custom layouts.
+ *
+ * ```tsx
+ * const scrollRef = useRef<HTMLDivElement>(null);
+ * const { virtualItems, totalSize, measureElement } = useVirtualizer({
+ *   count: rows.length, scrollElement: scrollRef, estimateSize: 48,
+ * });
+ * <div ref={scrollRef} style={{ overflow: "auto", height: 400 }}>
+ *   <div style={{ position: "relative", height: totalSize }}>
+ *     {virtualItems.map((item) => (
+ *       <div key={item.index} data-index={item.index} ref={measureElement}
+ *         style={{ position: "absolute", top: 0, width: "100%", transform: `translateY(${item.start}px)` }}>
+ *         {rows[item.index].name}
+ *       </div>
+ *     ))}
+ *   </div>
+ * </div>
+ * ```
+ */
+export declare function useVirtualizer({ count, scrollElement, estimateSize, overscan, gap, paddingStart, paddingEnd, initialCount, }: UseVirtualizerOptions): Virtualizer;