@jbpark/use-hooks 2.10.0 → 3.0.0

package/dist/hooks/use-file-drop.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-file-drop.mjs","names":[],"sources":["../../src/hooks/use-file-drop.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\ninterface Options {\n  onDrop?: (files: File[]) => void;\n  // Comma-separated list, same format as the native <input accept>\n  // attribute: extensions ('.png'), MIME types ('image/png'), or\n  // wildcard subtypes ('image/*'). Unset accepts everything.\n  accept?: string;\n  multiple?: boolean;\n  disabled?: boolean;\n}\n\nconst matchesAccept = (file: File, accept?: string): boolean => {\n  if (!accept) {\n    return true;\n  }\n\n  const patterns = accept\n    .split(',')\n    .map(pattern => pattern.trim())\n    .filter(Boolean);\n\n  if (patterns.length === 0) {\n    return true;\n  }\n\n  return patterns.some(pattern => {\n    if (pattern.startsWith('.')) {\n      return file.name.toLowerCase().endsWith(pattern.toLowerCase());\n    }\n\n    if (pattern.endsWith('/*')) {\n      return file.type.startsWith(pattern.slice(0, -1));\n    }\n\n    return file.type === pattern;\n  });\n};\n\n// Pairs with useFileToDataUrl to cover a drag-and-drop upload area\n// end to end: this gets from \"user dropped something\" to a filtered\n// File[], useFileToDataUrl takes it from there to a data URL.\nconst useFileDrop = <T extends HTMLElement = HTMLElement>(\n  options: Options = {},\n) => {\n  const { onDrop, accept, multiple = true, disabled = false } = options;\n\n  const [isDragging, setIsDragging] = useState(false);\n  // `dragleave` also fires when the pointer moves onto a child element\n  // (which re-fires `dragenter` on the way back out), not just when it\n  // truly leaves the drop target — an enter/leave counter (rather than a\n  // plain boolean) is what avoids `isDragging` flickering off and back on\n  // as the pointer crosses child element boundaries.\n  const dragCounterRef = useRef(0);\n\n  const onDropRef = useRef(onDrop);\n  const acceptRef = useRef(accept);\n  const multipleRef = useRef(multiple);\n  const disabledRef = useRef(disabled);\n\n  useEffect(() => {\n    onDropRef.current = onDrop;\n    acceptRef.current = accept;\n    multipleRef.current = multiple;\n    disabledRef.current = disabled;\n  });\n\n  useEffect(() => {\n    if (disabled) {\n      dragCounterRef.current = 0;\n      setIsDragging(false);\n    }\n  }, [disabled]);\n\n  const cleanupRef = useRef<(() => void) | null>(null);\n\n  const dropRef = useCallback((node: T | null) => {\n    cleanupRef.current?.();\n    cleanupRef.current = null;\n\n    if (!node) {\n      return;\n    }\n\n    const onDragEnter = (event: DragEvent) => {\n      if (disabledRef.current) {\n        return;\n      }\n      event.preventDefault();\n      dragCounterRef.current += 1;\n      if (dragCounterRef.current === 1) {\n        setIsDragging(true);\n      }\n    };\n\n    const onDragLeave = (event: DragEvent) => {\n      if (disabledRef.current) {\n        return;\n      }\n      event.preventDefault();\n      dragCounterRef.current = Math.max(0, dragCounterRef.current - 1);\n      if (dragCounterRef.current === 0) {\n        setIsDragging(false);\n      }\n    };\n\n    // `preventDefault` here is what tells the browser this is a valid\n    // drop target at all — without it, `drop` never fires.\n    const onDragOver = (event: DragEvent) => {\n      if (disabledRef.current) {\n        return;\n      }\n      event.preventDefault();\n    };\n\n    const onDrop = (event: DragEvent) => {\n      if (disabledRef.current) {\n        return;\n      }\n      event.preventDefault();\n      dragCounterRef.current = 0;\n      setIsDragging(false);\n\n      const fileList = event.dataTransfer?.files;\n\n      if (!fileList || fileList.length === 0) {\n        return;\n      }\n\n      let files = Array.from(fileList).filter(file =>\n        matchesAccept(file, acceptRef.current),\n      );\n\n      if (!multipleRef.current) {\n        files = files.slice(0, 1);\n      }\n\n      if (files.length > 0) {\n        onDropRef.current?.(files);\n      }\n    };\n\n    node.addEventListener('dragenter', onDragEnter);\n    node.addEventListener('dragleave', onDragLeave);\n    node.addEventListener('dragover', onDragOver);\n    node.addEventListener('drop', onDrop);\n\n    cleanupRef.current = () => {\n      node.removeEventListener('dragenter', onDragEnter);\n      node.removeEventListener('dragleave', onDragLeave);\n      node.removeEventListener('dragover', onDragOver);\n      node.removeEventListener('drop', onDrop);\n      dragCounterRef.current = 0;\n    };\n  }, []);\n\n  return { dropRef, isDragging };\n};\n\nexport default useFileDrop;\n"],"mappings":";;;AAYA,MAAM,iBAAiB,MAAY,WAA6B;AAC9D,KAAI,CAAC,OACH,QAAO;CAGT,MAAM,WAAW,OACd,MAAM,IAAI,CACV,KAAI,YAAW,QAAQ,MAAM,CAAC,CAC9B,OAAO,QAAQ;AAElB,KAAI,SAAS,WAAW,EACtB,QAAO;AAGT,QAAO,SAAS,MAAK,YAAW;AAC9B,MAAI,QAAQ,WAAW,IAAI,CACzB,QAAO,KAAK,KAAK,aAAa,CAAC,SAAS,QAAQ,aAAa,CAAC;AAGhE,MAAI,QAAQ,SAAS,KAAK,CACxB,QAAO,KAAK,KAAK,WAAW,QAAQ,MAAM,GAAG,GAAG,CAAC;AAGnD,SAAO,KAAK,SAAS;GACrB;;AAMJ,MAAM,eACJ,UAAmB,EAAE,KAClB;CACH,MAAM,EAAE,QAAQ,QAAQ,WAAW,MAAM,WAAW,UAAU;CAE9D,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAMnD,MAAM,iBAAiB,OAAO,EAAE;CAEhC,MAAM,YAAY,OAAO,OAAO;CAChC,MAAM,YAAY,OAAO,OAAO;CAChC,MAAM,cAAc,OAAO,SAAS;CACpC,MAAM,cAAc,OAAO,SAAS;AAEpC,iBAAgB;AACd,YAAU,UAAU;AACpB,YAAU,UAAU;AACpB,cAAY,UAAU;AACtB,cAAY,UAAU;GACtB;AAEF,iBAAgB;AACd,MAAI,UAAU;AACZ,kBAAe,UAAU;AACzB,iBAAc,MAAM;;IAErB,CAAC,SAAS,CAAC;CAEd,MAAM,aAAa,OAA4B,KAAK;AAkFpD,QAAO;EAAE,SAhFO,aAAa,SAAmB;AAC9C,cAAW,WAAW;AACtB,cAAW,UAAU;AAErB,OAAI,CAAC,KACH;GAGF,MAAM,eAAe,UAAqB;AACxC,QAAI,YAAY,QACd;AAEF,UAAM,gBAAgB;AACtB,mBAAe,WAAW;AAC1B,QAAI,eAAe,YAAY,EAC7B,eAAc,KAAK;;GAIvB,MAAM,eAAe,UAAqB;AACxC,QAAI,YAAY,QACd;AAEF,UAAM,gBAAgB;AACtB,mBAAe,UAAU,KAAK,IAAI,GAAG,eAAe,UAAU,EAAE;AAChE,QAAI,eAAe,YAAY,EAC7B,eAAc,MAAM;;GAMxB,MAAM,cAAc,UAAqB;AACvC,QAAI,YAAY,QACd;AAEF,UAAM,gBAAgB;;GAGxB,MAAM,UAAU,UAAqB;AACnC,QAAI,YAAY,QACd;AAEF,UAAM,gBAAgB;AACtB,mBAAe,UAAU;AACzB,kBAAc,MAAM;IAEpB,MAAM,WAAW,MAAM,cAAc;AAErC,QAAI,CAAC,YAAY,SAAS,WAAW,EACnC;IAGF,IAAI,QAAQ,MAAM,KAAK,SAAS,CAAC,QAAO,SACtC,cAAc,MAAM,UAAU,QAAQ,CACvC;AAED,QAAI,CAAC,YAAY,QACf,SAAQ,MAAM,MAAM,GAAG,EAAE;AAG3B,QAAI,MAAM,SAAS,EACjB,WAAU,UAAU,MAAM;;AAI9B,QAAK,iBAAiB,aAAa,YAAY;AAC/C,QAAK,iBAAiB,aAAa,YAAY;AAC/C,QAAK,iBAAiB,YAAY,WAAW;AAC7C,QAAK,iBAAiB,QAAQ,OAAO;AAErC,cAAW,gBAAgB;AACzB,SAAK,oBAAoB,aAAa,YAAY;AAClD,SAAK,oBAAoB,aAAa,YAAY;AAClD,SAAK,oBAAoB,YAAY,WAAW;AAChD,SAAK,oBAAoB,QAAQ,OAAO;AACxC,mBAAe,UAAU;;KAE1B,EAAE,CAAC;EAEY;EAAY"}

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

@@ -5,9 +5,10 @@ interface Options {
 }
 declare const useImage: (src: string, options?: Options) => {
   loading: boolean;
-  error: string | Event | null;
+  error: Error | null;
   loaded: boolean;
   retry: () => void;
+  attemptCount: number;
 };
 //#endregion
 export { useImage };

package/dist/hooks/use-image.mjs

@@ -26,11 +26,11 @@ const useImage = (src, options = {}) => {
 			setLoaded(true);
 			setError(null);
 		};
-		img.onerror = (err) => {
+		img.onerror = (event) => {
 			if (cancelled) return;
 			setLoading(false);
 			setLoaded(false);
-			setError(err);
+			setError(new Error(`Failed to load image: ${src}`, { cause: event }));
 			if (attemptCount < retryCount) retryTimeoutId = setTimeout(() => {
 				if (!cancelled) setAttemptCount((prev) => prev + 1);
 			}, retryDelay);
@@ -55,7 +55,8 @@ const useImage = (src, options = {}) => {
 		retry: useCallback(() => {
 			setAttemptCount(0);
 			setReloadToken((token) => token + 1);
-		}, [])
+		}, []),
+		attemptCount
 	};
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"use-image.mjs","names":[],"sources":["../../src/hooks/use-image.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\n\ninterface Options {\n  retryCount?: number;\n  retryDelay?: number;\n}\n\nconst useImage = (src: string, options: Options = {}) => {\n  const { retryCount = 0, retryDelay = 1000 } = options;\n\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | Event | null>(null);\n  const [loaded, setLoaded] = useState(false);\n  const [attemptCount, setAttemptCount] = useState(0);\n  const [reloadToken, setReloadToken] = useState(0);\n\n  useEffect(() => {\n    if (!src) {\n      setLoading(false);\n      setLoaded(false);\n      return;\n    }\n\n    let cancelled = false;\n    let retryTimeoutId: ReturnType<typeof setTimeout> | undefined;\n\n    setLoading(true);\n    setError(null);\n\n    const img = new Image();\n    img.src = src;\n\n    img.onload = () => {\n      if (cancelled) {\n        return;\n      }\n      setLoading(false);\n      setLoaded(true);\n      setError(null);\n    };\n\n    img.onerror = err => {\n      if (cancelled) {\n        return;\n      }\n      setLoading(false);\n      setLoaded(false);\n      setError(err);\n\n      if (attemptCount < retryCount) {\n        retryTimeoutId = setTimeout(() => {\n          if (!cancelled) {\n            setAttemptCount(prev => prev + 1);\n          }\n        }, retryDelay);\n      }\n    };\n\n    return () => {\n      cancelled = true;\n      img.onload = null;\n      img.onerror = null;\n      if (retryTimeoutId) {\n        clearTimeout(retryTimeoutId);\n      }\n    };\n  }, [src, attemptCount, retryCount, retryDelay, reloadToken]);\n\n  const retry = useCallback(() => {\n    setAttemptCount(0);\n    setReloadToken(token => token + 1);\n  }, []);\n\n  return {\n    loading,\n    error,\n    loaded,\n    retry,\n  };\n};\n\nexport default useImage;\n"],"mappings":";;;AAOA,MAAM,YAAY,KAAa,UAAmB,EAAE,KAAK;CACvD,MAAM,EAAE,aAAa,GAAG,aAAa,QAAS;CAE9C,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,CAAC,OAAO,YAAY,SAAgC,KAAK;CAC/D,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,CAAC,cAAc,mBAAmB,SAAS,EAAE;CACnD,MAAM,CAAC,aAAa,kBAAkB,SAAS,EAAE;AAEjD,iBAAgB;AACd,MAAI,CAAC,KAAK;AACR,cAAW,MAAM;AACjB,aAAU,MAAM;AAChB;;EAGF,IAAI,YAAY;EAChB,IAAI;AAEJ,aAAW,KAAK;AAChB,WAAS,KAAK;EAEd,MAAM,MAAM,IAAI,OAAO;AACvB,MAAI,MAAM;AAEV,MAAI,eAAe;AACjB,OAAI,UACF;AAEF,cAAW,MAAM;AACjB,aAAU,KAAK;AACf,YAAS,KAAK;;AAGhB,MAAI,WAAU,QAAO;AACnB,OAAI,UACF;AAEF,cAAW,MAAM;AACjB,aAAU,MAAM;AAChB,YAAS,IAAI;AAEb,OAAI,eAAe,WACjB,kBAAiB,iBAAiB;AAChC,QAAI,CAAC,UACH,kBAAgB,SAAQ,OAAO,EAAE;MAElC,WAAW;;AAIlB,eAAa;AACX,eAAY;AACZ,OAAI,SAAS;AACb,OAAI,UAAU;AACd,OAAI,eACF,cAAa,eAAe;;IAG/B;EAAC;EAAK;EAAc;EAAY;EAAY;EAAY,CAAC;AAO5D,QAAO;EACL;EACA;EACA;EACA,OATY,kBAAkB;AAC9B,mBAAgB,EAAE;AAClB,mBAAe,UAAS,QAAQ,EAAE;KACjC,EAAE,CAAC;EAOL"}
+{"version":3,"file":"use-image.mjs","names":[],"sources":["../../src/hooks/use-image.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\n\ninterface Options {\n  retryCount?: number;\n  retryDelay?: number;\n}\n\nconst useImage = (src: string, options: Options = {}) => {\n  const { retryCount = 0, retryDelay = 1000 } = options;\n\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n  const [loaded, setLoaded] = useState(false);\n  const [attemptCount, setAttemptCount] = useState(0);\n  const [reloadToken, setReloadToken] = useState(0);\n\n  useEffect(() => {\n    if (!src) {\n      setLoading(false);\n      setLoaded(false);\n      return;\n    }\n\n    let cancelled = false;\n    let retryTimeoutId: ReturnType<typeof setTimeout> | undefined;\n\n    setLoading(true);\n    setError(null);\n\n    const img = new Image();\n    img.src = src;\n\n    img.onload = () => {\n      if (cancelled) {\n        return;\n      }\n      setLoading(false);\n      setLoaded(true);\n      setError(null);\n    };\n\n    img.onerror = event => {\n      if (cancelled) {\n        return;\n      }\n      setLoading(false);\n      setLoaded(false);\n      // `img.onerror`'s handler type is `OnErrorEventHandler`, so `event`\n      // is typed `Event | string` even though the browser only ever\n      // passes an `Event` here — that `Event` carries no useful failure\n      // reason itself, so it's kept as `cause` rather than surfaced\n      // directly as `error`.\n      setError(new Error(`Failed to load image: ${src}`, { cause: event }));\n\n      if (attemptCount < retryCount) {\n        retryTimeoutId = setTimeout(() => {\n          if (!cancelled) {\n            setAttemptCount(prev => prev + 1);\n          }\n        }, retryDelay);\n      }\n    };\n\n    return () => {\n      cancelled = true;\n      img.onload = null;\n      img.onerror = null;\n      if (retryTimeoutId) {\n        clearTimeout(retryTimeoutId);\n      }\n    };\n  }, [src, attemptCount, retryCount, retryDelay, reloadToken]);\n\n  const retry = useCallback(() => {\n    setAttemptCount(0);\n    setReloadToken(token => token + 1);\n  }, []);\n\n  return {\n    loading,\n    error,\n    loaded,\n    retry,\n    attemptCount,\n  };\n};\n\nexport default useImage;\n"],"mappings":";;;AAOA,MAAM,YAAY,KAAa,UAAmB,EAAE,KAAK;CACvD,MAAM,EAAE,aAAa,GAAG,aAAa,QAAS;CAE9C,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,CAAC,OAAO,YAAY,SAAuB,KAAK;CACtD,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,CAAC,cAAc,mBAAmB,SAAS,EAAE;CACnD,MAAM,CAAC,aAAa,kBAAkB,SAAS,EAAE;AAEjD,iBAAgB;AACd,MAAI,CAAC,KAAK;AACR,cAAW,MAAM;AACjB,aAAU,MAAM;AAChB;;EAGF,IAAI,YAAY;EAChB,IAAI;AAEJ,aAAW,KAAK;AAChB,WAAS,KAAK;EAEd,MAAM,MAAM,IAAI,OAAO;AACvB,MAAI,MAAM;AAEV,MAAI,eAAe;AACjB,OAAI,UACF;AAEF,cAAW,MAAM;AACjB,aAAU,KAAK;AACf,YAAS,KAAK;;AAGhB,MAAI,WAAU,UAAS;AACrB,OAAI,UACF;AAEF,cAAW,MAAM;AACjB,aAAU,MAAM;AAMhB,YAAS,IAAI,MAAM,yBAAyB,OAAO,EAAE,OAAO,OAAO,CAAC,CAAC;AAErE,OAAI,eAAe,WACjB,kBAAiB,iBAAiB;AAChC,QAAI,CAAC,UACH,kBAAgB,SAAQ,OAAO,EAAE;MAElC,WAAW;;AAIlB,eAAa;AACX,eAAY;AACZ,OAAI,SAAS;AACb,OAAI,UAAU;AACd,OAAI,eACF,cAAa,eAAe;;IAG/B;EAAC;EAAK;EAAc;EAAY;EAAY;EAAY,CAAC;AAO5D,QAAO;EACL;EACA;EACA;EACA,OATY,kBAAkB;AAC9B,mBAAgB,EAAE;AAClB,mBAAe,UAAS,QAAQ,EAAE;KACjC,EAAE,CAAC;EAOJ;EACD"}

package/dist/hooks/use-intersection-observer.d.mts

@@ -1,5 +1,12 @@
 //#region src/hooks/use-intersection-observer.d.ts
-declare const useIntersectionObserver: <T extends Element = Element>(options?: IntersectionObserverInit) => [(node: T | null) => void, IntersectionObserverEntry | null];
+interface Options extends IntersectionObserverInit {
+  freezeOnceVisible?: boolean;
+}
+interface Result {
+  entry: IntersectionObserverEntry | null;
+  isIntersecting: boolean;
+}
+declare const useIntersectionObserver: <T extends Element = Element>(options?: Options) => [(node: T | null) => void, Result];
 //#endregion
 export { useIntersectionObserver };
 //# sourceMappingURL=use-intersection-observer.d.mts.map

package/dist/hooks/use-intersection-observer.mjs

@@ -1,21 +1,53 @@
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 //#region src/hooks/use-intersection-observer.ts
 const useIntersectionObserver = (options) => {
+	const { freezeOnceVisible = false, ...observerInit } = options ?? {};
 	const [entry, setEntry] = useState(null);
 	const observerRef = useRef(null);
-	return [useCallback((node) => {
+	const nodeRef = useRef(null);
+	const frozenRef = useRef(false);
+	const observerInitKey = JSON.stringify(observerInit);
+	const observerInitRef = useRef(observerInit);
+	const freezeRef = useRef(freezeOnceVisible);
+	useEffect(() => {
+		observerInitRef.current = observerInit;
+		freezeRef.current = freezeOnceVisible;
+	});
+	const connect = useCallback(() => {
 		if (observerRef.current) {
 			observerRef.current.disconnect();
 			observerRef.current = null;
 		}
-		if (!node || typeof IntersectionObserver === "undefined") return;
+		const node = nodeRef.current;
+		if (!node || typeof IntersectionObserver === "undefined" || frozenRef.current) return;
 		const observer = new IntersectionObserver(([observedEntry]) => {
+			if (!observedEntry) return;
 			setEntry(observedEntry);
-		}, options);
+			if (observedEntry.isIntersecting && freezeRef.current) {
+				frozenRef.current = true;
+				observer.disconnect();
+			}
+		}, observerInitRef.current);
 		observer.observe(node);
 		observerRef.current = observer;
-	}, []), entry];
+	}, []);
+	const ref = useCallback((node) => {
+		nodeRef.current = node;
+		connect();
+	}, []);
+	useEffect(() => {
+		connect();
+	}, [observerInitKey]);
+	useEffect(() => {
+		return () => {
+			observerRef.current?.disconnect();
+		};
+	}, []);
+	return [ref, {
+		entry,
+		isIntersecting: entry?.isIntersecting ?? false
+	}];
 };
 
 //#endregion

package/dist/hooks/use-intersection-observer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-intersection-observer.mjs","names":[],"sources":["../../src/hooks/use-intersection-observer.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nconst useIntersectionObserver = <T extends Element = Element>(\n  options?: IntersectionObserverInit,\n): [(node: T | null) => void, IntersectionObserverEntry | null] => {\n  const [entry, setEntry] = useState<IntersectionObserverEntry | null>(null);\n  const observerRef = useRef<IntersectionObserver | null>(null);\n\n  // `options` is typically re-created as a fresh object on every render by\n  // callers (e.g. spreading caller-provided overrides into defaults), so it\n  // intentionally isn't a dependency here — that would tear down and\n  // recreate the observer on every render. The ref callback only re-runs\n  // when the observed node itself changes, capturing whatever `options`\n  // was current at that time (matching the common useIntersectionObserver\n  // convention, e.g. @uidotdev/usehooks).\n  const ref = useCallback((node: T | null) => {\n    if (observerRef.current) {\n      observerRef.current.disconnect();\n      observerRef.current = null;\n    }\n\n    if (!node || typeof IntersectionObserver === 'undefined') {\n      return;\n    }\n\n    const observer = new IntersectionObserver(([observedEntry]) => {\n      setEntry(observedEntry);\n    }, options);\n\n    observer.observe(node);\n    observerRef.current = observer;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return [ref, entry];\n};\n\nexport default useIntersectionObserver;\n"],"mappings":";;;AAEA,MAAM,2BACJ,YACiE;CACjE,MAAM,CAAC,OAAO,YAAY,SAA2C,KAAK;CAC1E,MAAM,cAAc,OAAoC,KAAK;AA4B7D,QAAO,CAnBK,aAAa,SAAmB;AAC1C,MAAI,YAAY,SAAS;AACvB,eAAY,QAAQ,YAAY;AAChC,eAAY,UAAU;;AAGxB,MAAI,CAAC,QAAQ,OAAO,yBAAyB,YAC3C;EAGF,MAAM,WAAW,IAAI,sBAAsB,CAAC,mBAAmB;AAC7D,YAAS,cAAc;KACtB,QAAQ;AAEX,WAAS,QAAQ,KAAK;AACtB,cAAY,UAAU;IAErB,EAAE,CAAC,EAEO,MAAM"}
+{"version":3,"file":"use-intersection-observer.mjs","names":[],"sources":["../../src/hooks/use-intersection-observer.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\ninterface Options extends IntersectionObserverInit {\n  // Disconnects for good the first time the target becomes intersecting\n  // — the common \"seen once, that's enough\" case (lazy loading, entrance\n  // animations, infinite-scroll triggers) that otherwise needs the\n  // consumer to track their own \"already fired\" flag.\n  freezeOnceVisible?: boolean;\n}\n\ninterface Result {\n  entry: IntersectionObserverEntry | null;\n  isIntersecting: boolean;\n}\n\nconst useIntersectionObserver = <T extends Element = Element>(\n  options?: Options,\n): [(node: T | null) => void, Result] => {\n  const { freezeOnceVisible = false, ...observerInit } = options ?? {};\n\n  const [entry, setEntry] = useState<IntersectionObserverEntry | null>(null);\n  const observerRef = useRef<IntersectionObserver | null>(null);\n  const nodeRef = useRef<T | null>(null);\n  const frozenRef = useRef(false);\n\n  // `options` is typically a fresh object literal at the call site —\n  // serialize the IntersectionObserverInit part into a stable key so\n  // reconnecting only happens when it actually changes, not on every\n  // render (the previous version didn't reconnect on options changes at\n  // all, so threshold/rootMargin could never be updated at runtime).\n  const observerInitKey = JSON.stringify(observerInit);\n  const observerInitRef = useRef(observerInit);\n  const freezeRef = useRef(freezeOnceVisible);\n\n  useEffect(() => {\n    observerInitRef.current = observerInit;\n    freezeRef.current = freezeOnceVisible;\n  });\n\n  const connect = useCallback(() => {\n    if (observerRef.current) {\n      observerRef.current.disconnect();\n      observerRef.current = null;\n    }\n\n    const node = nodeRef.current;\n\n    if (\n      !node ||\n      typeof IntersectionObserver === 'undefined' ||\n      frozenRef.current\n    ) {\n      return;\n    }\n\n    const observer = new IntersectionObserver(([observedEntry]) => {\n      if (!observedEntry) {\n        return;\n      }\n\n      setEntry(observedEntry);\n\n      if (observedEntry.isIntersecting && freezeRef.current) {\n        frozenRef.current = true;\n        observer.disconnect();\n      }\n    }, observerInitRef.current);\n\n    observer.observe(node);\n    observerRef.current = observer;\n  }, []);\n\n  const ref = useCallback((node: T | null) => {\n    nodeRef.current = node;\n    connect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    connect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [observerInitKey]);\n\n  useEffect(() => {\n    return () => {\n      observerRef.current?.disconnect();\n    };\n  }, []);\n\n  return [ref, { entry, isIntersecting: entry?.isIntersecting ?? false }];\n};\n\nexport default useIntersectionObserver;\n"],"mappings":";;;AAeA,MAAM,2BACJ,YACuC;CACvC,MAAM,EAAE,oBAAoB,OAAO,GAAG,iBAAiB,WAAW,EAAE;CAEpE,MAAM,CAAC,OAAO,YAAY,SAA2C,KAAK;CAC1E,MAAM,cAAc,OAAoC,KAAK;CAC7D,MAAM,UAAU,OAAiB,KAAK;CACtC,MAAM,YAAY,OAAO,MAAM;CAO/B,MAAM,kBAAkB,KAAK,UAAU,aAAa;CACpD,MAAM,kBAAkB,OAAO,aAAa;CAC5C,MAAM,YAAY,OAAO,kBAAkB;AAE3C,iBAAgB;AACd,kBAAgB,UAAU;AAC1B,YAAU,UAAU;GACpB;CAEF,MAAM,UAAU,kBAAkB;AAChC,MAAI,YAAY,SAAS;AACvB,eAAY,QAAQ,YAAY;AAChC,eAAY,UAAU;;EAGxB,MAAM,OAAO,QAAQ;AAErB,MACE,CAAC,QACD,OAAO,yBAAyB,eAChC,UAAU,QAEV;EAGF,MAAM,WAAW,IAAI,sBAAsB,CAAC,mBAAmB;AAC7D,OAAI,CAAC,cACH;AAGF,YAAS,cAAc;AAEvB,OAAI,cAAc,kBAAkB,UAAU,SAAS;AACrD,cAAU,UAAU;AACpB,aAAS,YAAY;;KAEtB,gBAAgB,QAAQ;AAE3B,WAAS,QAAQ,KAAK;AACtB,cAAY,UAAU;IACrB,EAAE,CAAC;CAEN,MAAM,MAAM,aAAa,SAAmB;AAC1C,UAAQ,UAAU;AAClB,WAAS;IAER,EAAE,CAAC;AAEN,iBAAgB;AACd,WAAS;IAER,CAAC,gBAAgB,CAAC;AAErB,iBAAgB;AACd,eAAa;AACX,eAAY,SAAS,YAAY;;IAElC,EAAE,CAAC;AAEN,QAAO,CAAC,KAAK;EAAE;EAAO,gBAAgB,OAAO,kBAAkB;EAAO,CAAC"}

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

@@ -0,0 +1,5 @@
+//#region src/hooks/use-interval.d.ts
+declare const useInterval: (callback: () => void, delay: number | null) => void;
+//#endregion
+export { useInterval };
+//# sourceMappingURL=use-interval.d.mts.map

package/dist/hooks/use-interval.mjs

@@ -0,0 +1,20 @@
+import { useEffect, useRef } from "react";
+
+//#region src/hooks/use-interval.ts
+const useInterval = (callback, delay) => {
+	const callbackRef = useRef(callback);
+	useEffect(() => {
+		callbackRef.current = callback;
+	});
+	useEffect(() => {
+		if (delay === null) return;
+		const id = setInterval(() => {
+			callbackRef.current();
+		}, delay);
+		return () => clearInterval(id);
+	}, [delay]);
+};
+
+//#endregion
+export { useInterval as default };
+//# sourceMappingURL=use-interval.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-interval.mjs","names":[],"sources":["../../src/hooks/use-interval.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\n// Dan Abramov's useInterval pattern: the callback lives in a ref so a\n// fresh function every render doesn't reset the interval — only `delay`\n// actually changing does that. `delay === null` pauses it (same rule as\n// useTimeout/useRecursiveTimeout); toggling back to a number resumes on\n// a fresh interval rather than trying to pick up mid-tick.\nconst useInterval = (callback: () => void, delay: number | null) => {\n  const callbackRef = useRef(callback);\n\n  useEffect(() => {\n    callbackRef.current = callback;\n  });\n\n  useEffect(() => {\n    if (delay === null) {\n      return;\n    }\n\n    const id = setInterval(() => {\n      callbackRef.current();\n    }, delay);\n\n    return () => clearInterval(id);\n  }, [delay]);\n};\n\nexport default useInterval;\n"],"mappings":";;;AAOA,MAAM,eAAe,UAAsB,UAAyB;CAClE,MAAM,cAAc,OAAO,SAAS;AAEpC,iBAAgB;AACd,cAAY,UAAU;GACtB;AAEF,iBAAgB;AACd,MAAI,UAAU,KACZ;EAGF,MAAM,KAAK,kBAAkB;AAC3B,eAAY,SAAS;KACpB,MAAM;AAET,eAAa,cAAc,GAAG;IAC7B,CAAC,MAAM,CAAC"}

package/dist/hooks/use-key-press.d.mts

@@ -0,0 +1,14 @@
+import { RefObject } from "react";
+
+//#region src/hooks/use-key-press.d.ts
+type KeyPressTarget = RefObject<HTMLElement | null> | Window | Document | HTMLElement | null | undefined;
+interface Options {
+  target?: KeyPressTarget;
+  enabled?: boolean;
+  preventDefault?: boolean;
+  ignore?: string;
+}
+declare const useKeyPress: (combo: string | string[], handler: (event: KeyboardEvent) => void, options?: Options) => void;
+//#endregion
+export { useKeyPress };
+//# sourceMappingURL=use-key-press.d.mts.map

package/dist/hooks/use-key-press.mjs

@@ -0,0 +1,63 @@
+import { useEffect, useRef } from "react";
+
+//#region src/hooks/use-key-press.ts
+const isMac = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
+const parseCombo = (combo) => {
+	const parts = combo.split("+").map((part) => part.trim().toLowerCase());
+	const key = parts[parts.length - 1] ?? "";
+	const modifiers = parts.slice(0, -1);
+	let ctrl = modifiers.includes("ctrl");
+	let meta = modifiers.includes("meta") || modifiers.includes("cmd");
+	const shift = modifiers.includes("shift");
+	const alt = modifiers.includes("alt") || modifiers.includes("option");
+	if (modifiers.includes("mod")) if (isMac()) meta = true;
+	else ctrl = true;
+	return {
+		key,
+		ctrl,
+		meta,
+		shift,
+		alt
+	};
+};
+const matchesCombo = (event, combo) => event.key.toLowerCase() === combo.key && event.ctrlKey === combo.ctrl && event.metaKey === combo.meta && event.shiftKey === combo.shift && event.altKey === combo.alt;
+const resolveTarget = (target) => {
+	if (!target) return typeof window === "undefined" ? null : window;
+	return "current" in target ? target.current : target;
+};
+const useKeyPress = (combo, handler, options = {}) => {
+	const { target, enabled = true, preventDefault = false, ignore } = options;
+	const handlerRef = useRef(handler);
+	useEffect(() => {
+		handlerRef.current = handler;
+	});
+	const combos = Array.isArray(combo) ? combo : [combo];
+	const parsedCombos = combos.map(parseCombo);
+	useEffect(() => {
+		if (!enabled) return;
+		const resolvedTarget = resolveTarget(target);
+		if (!resolvedTarget) return;
+		const onKeyDown = (event) => {
+			const keyboardEvent = event;
+			const eventTarget = keyboardEvent.target;
+			if (ignore && eventTarget?.closest(ignore)) return;
+			if (!parsedCombos.some((parsed) => matchesCombo(keyboardEvent, parsed))) return;
+			if (preventDefault) keyboardEvent.preventDefault();
+			handlerRef.current(keyboardEvent);
+		};
+		resolvedTarget.addEventListener("keydown", onKeyDown);
+		return () => {
+			resolvedTarget.removeEventListener("keydown", onKeyDown);
+		};
+	}, [
+		enabled,
+		combos.join(","),
+		target,
+		preventDefault,
+		ignore
+	]);
+};
+
+//#endregion
+export { useKeyPress as default };
+//# sourceMappingURL=use-key-press.mjs.map

package/dist/hooks/use-key-press.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-key-press.mjs","names":[],"sources":["../../src/hooks/use-key-press.ts"],"sourcesContent":["import { type RefObject, useEffect, useRef } from 'react';\n\ntype KeyPressTarget =\n  | RefObject<HTMLElement | null>\n  | Window\n  | Document\n  | HTMLElement\n  | null\n  | undefined;\n\ninterface Options {\n  target?: KeyPressTarget;\n  enabled?: boolean;\n  preventDefault?: boolean;\n  // CSS selector — a keydown whose target is inside a matching element is\n  // ignored (e.g. don't hijack Cmd+Z while the user is typing in a code\n  // editor that has its own undo).\n  ignore?: string;\n}\n\ninterface ParsedCombo {\n  key: string;\n  ctrl: boolean;\n  meta: boolean;\n  shift: boolean;\n  alt: boolean;\n}\n\nconst isMac = () =>\n  typeof navigator !== 'undefined' &&\n  /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);\n\n// `mod` normalizes to the platform's usual \"primary\" modifier (Cmd on\n// macOS, Ctrl elsewhere) so a single combo string covers both without the\n// caller branching on platform themselves.\nconst parseCombo = (combo: string): ParsedCombo => {\n  const parts = combo.split('+').map(part => part.trim().toLowerCase());\n  const key = parts[parts.length - 1] ?? '';\n  const modifiers = parts.slice(0, -1);\n\n  let ctrl = modifiers.includes('ctrl');\n  let meta = modifiers.includes('meta') || modifiers.includes('cmd');\n  const shift = modifiers.includes('shift');\n  const alt = modifiers.includes('alt') || modifiers.includes('option');\n\n  if (modifiers.includes('mod')) {\n    if (isMac()) {\n      meta = true;\n    } else {\n      ctrl = true;\n    }\n  }\n\n  return { key, ctrl, meta, shift, alt };\n};\n\n// Modifiers not named in the combo are required to be *absent*, not just\n// ignored — otherwise 'mod+z' and 'mod+shift+z' registered as separate\n// bindings (the exact motivating case for this hook) would both fire on\n// the same Cmd+Shift+Z keypress instead of only the latter.\nconst matchesCombo = (event: KeyboardEvent, combo: ParsedCombo) =>\n  event.key.toLowerCase() === combo.key &&\n  event.ctrlKey === combo.ctrl &&\n  event.metaKey === combo.meta &&\n  event.shiftKey === combo.shift &&\n  event.altKey === combo.alt;\n\nconst resolveTarget = (target: KeyPressTarget): EventTarget | null => {\n  if (!target) {\n    return typeof window === 'undefined' ? null : window;\n  }\n  return 'current' in target ? target.current : target;\n};\n\nconst useKeyPress = (\n  combo: string | string[],\n  handler: (event: KeyboardEvent) => void,\n  options: Options = {},\n) => {\n  const { target, enabled = true, preventDefault = false, ignore } = options;\n\n  const handlerRef = useRef(handler);\n\n  useEffect(() => {\n    handlerRef.current = handler;\n  });\n\n  const combos = Array.isArray(combo) ? combo : [combo];\n  const parsedCombos = combos.map(parseCombo);\n  // `combos` is typically a fresh array literal at the call site — depend\n  // on a stable string proxy instead so this doesn't tear down and\n  // re-register the listener on every render. `target` itself (a\n  // RefObject, or window/document/an element variable) is normally\n  // already stable across renders, so it's used directly below.\n  const comboKey = combos.join(',');\n\n  useEffect(() => {\n    if (!enabled) {\n      return;\n    }\n\n    const resolvedTarget = resolveTarget(target);\n\n    if (!resolvedTarget) {\n      return;\n    }\n\n    const onKeyDown = (event: Event) => {\n      const keyboardEvent = event as KeyboardEvent;\n      const eventTarget = keyboardEvent.target as HTMLElement | null;\n\n      if (ignore && eventTarget?.closest(ignore)) {\n        return;\n      }\n\n      if (!parsedCombos.some(parsed => matchesCombo(keyboardEvent, parsed))) {\n        return;\n      }\n\n      if (preventDefault) {\n        keyboardEvent.preventDefault();\n      }\n\n      handlerRef.current(keyboardEvent);\n    };\n\n    resolvedTarget.addEventListener('keydown', onKeyDown);\n\n    return () => {\n      resolvedTarget.removeEventListener('keydown', onKeyDown);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [enabled, comboKey, target, preventDefault, ignore]);\n};\n\nexport default useKeyPress;\n"],"mappings":";;;AA4BA,MAAM,cACJ,OAAO,cAAc,eACrB,uBAAuB,KAAK,UAAU,UAAU;AAKlD,MAAM,cAAc,UAA+B;CACjD,MAAM,QAAQ,MAAM,MAAM,IAAI,CAAC,KAAI,SAAQ,KAAK,MAAM,CAAC,aAAa,CAAC;CACrE,MAAM,MAAM,MAAM,MAAM,SAAS,MAAM;CACvC,MAAM,YAAY,MAAM,MAAM,GAAG,GAAG;CAEpC,IAAI,OAAO,UAAU,SAAS,OAAO;CACrC,IAAI,OAAO,UAAU,SAAS,OAAO,IAAI,UAAU,SAAS,MAAM;CAClE,MAAM,QAAQ,UAAU,SAAS,QAAQ;CACzC,MAAM,MAAM,UAAU,SAAS,MAAM,IAAI,UAAU,SAAS,SAAS;AAErE,KAAI,UAAU,SAAS,MAAM,CAC3B,KAAI,OAAO,CACT,QAAO;KAEP,QAAO;AAIX,QAAO;EAAE;EAAK;EAAM;EAAM;EAAO;EAAK;;AAOxC,MAAM,gBAAgB,OAAsB,UAC1C,MAAM,IAAI,aAAa,KAAK,MAAM,OAClC,MAAM,YAAY,MAAM,QACxB,MAAM,YAAY,MAAM,QACxB,MAAM,aAAa,MAAM,SACzB,MAAM,WAAW,MAAM;AAEzB,MAAM,iBAAiB,WAA+C;AACpE,KAAI,CAAC,OACH,QAAO,OAAO,WAAW,cAAc,OAAO;AAEhD,QAAO,aAAa,SAAS,OAAO,UAAU;;AAGhD,MAAM,eACJ,OACA,SACA,UAAmB,EAAE,KAClB;CACH,MAAM,EAAE,QAAQ,UAAU,MAAM,iBAAiB,OAAO,WAAW;CAEnE,MAAM,aAAa,OAAO,QAAQ;AAElC,iBAAgB;AACd,aAAW,UAAU;GACrB;CAEF,MAAM,SAAS,MAAM,QAAQ,MAAM,GAAG,QAAQ,CAAC,MAAM;CACrD,MAAM,eAAe,OAAO,IAAI,WAAW;AAQ3C,iBAAgB;AACd,MAAI,CAAC,QACH;EAGF,MAAM,iBAAiB,cAAc,OAAO;AAE5C,MAAI,CAAC,eACH;EAGF,MAAM,aAAa,UAAiB;GAClC,MAAM,gBAAgB;GACtB,MAAM,cAAc,cAAc;AAElC,OAAI,UAAU,aAAa,QAAQ,OAAO,CACxC;AAGF,OAAI,CAAC,aAAa,MAAK,WAAU,aAAa,eAAe,OAAO,CAAC,CACnE;AAGF,OAAI,eACF,eAAc,gBAAgB;AAGhC,cAAW,QAAQ,cAAc;;AAGnC,iBAAe,iBAAiB,WAAW,UAAU;AAErD,eAAa;AACX,kBAAe,oBAAoB,WAAW,UAAU;;IAGzD;EAAC;EAtCa,OAAO,KAAK,IAAI;EAsCV;EAAQ;EAAgB;EAAO,CAAC"}

package/dist/hooks/use-merged-ref.d.mts

@@ -0,0 +1,8 @@
+import { RefObject } from "react";
+
+//#region src/hooks/use-merged-ref.d.ts
+type MergeableRef<T> = ((node: T | null) => void | (() => void)) | RefObject<T | null> | null | undefined;
+declare const useMergedRef: <T>(...refs: MergeableRef<T>[]) => (node: T | null) => (() => void) | undefined;
+//#endregion
+export { useMergedRef };
+//# sourceMappingURL=use-merged-ref.d.mts.map

package/dist/hooks/use-merged-ref.mjs

@@ -0,0 +1,25 @@
+import { useCallback } from "react";
+
+//#region src/hooks/use-merged-ref.ts
+const useMergedRef = (...refs) => {
+	return useCallback((node) => {
+		const cleanups = [];
+		refs.forEach((ref) => {
+			if (!ref) return;
+			if (typeof ref === "function") {
+				const cleanup = ref(node);
+				if (typeof cleanup === "function") cleanups.push(cleanup);
+				return;
+			}
+			ref.current = node;
+		});
+		if (cleanups.length === 0) return;
+		return () => {
+			cleanups.forEach((cleanup) => cleanup());
+		};
+	}, refs);
+};
+
+//#endregion
+export { useMergedRef as default };
+//# sourceMappingURL=use-merged-ref.mjs.map

package/dist/hooks/use-merged-ref.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-merged-ref.mjs","names":[],"sources":["../../src/hooks/use-merged-ref.ts"],"sourcesContent":["import { type RefObject, useCallback } from 'react';\n\ntype MergeableRef<T> =\n  | ((node: T | null) => void | (() => void))\n  | RefObject<T | null>\n  | null\n  | undefined;\n\n// Merges any number of refs (forwarded function refs, RefObjects, or\n// either left null/undefined) into one callback ref that updates all of\n// them. Collects React 19's optional per-ref cleanup return values and\n// runs them together when the node detaches.\nconst useMergedRef = <T>(...refs: MergeableRef<T>[]) => {\n  return useCallback((node: T | null) => {\n    const cleanups: (() => void)[] = [];\n\n    refs.forEach(ref => {\n      if (!ref) {\n        return;\n      }\n\n      if (typeof ref === 'function') {\n        const cleanup = ref(node);\n\n        if (typeof cleanup === 'function') {\n          cleanups.push(cleanup);\n        }\n        return;\n      }\n\n      ref.current = node;\n    });\n\n    if (cleanups.length === 0) {\n      return;\n    }\n\n    return () => {\n      cleanups.forEach(cleanup => cleanup());\n    };\n    // The number of refs passed at a given call site is stable across\n    // renders even though this array literal isn't — same pattern every\n    // ref-merging hook of this shape relies on.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, refs);\n};\n\nexport default useMergedRef;\n"],"mappings":";;;AAYA,MAAM,gBAAmB,GAAG,SAA4B;AACtD,QAAO,aAAa,SAAmB;EACrC,MAAM,WAA2B,EAAE;AAEnC,OAAK,SAAQ,QAAO;AAClB,OAAI,CAAC,IACH;AAGF,OAAI,OAAO,QAAQ,YAAY;IAC7B,MAAM,UAAU,IAAI,KAAK;AAEzB,QAAI,OAAO,YAAY,WACrB,UAAS,KAAK,QAAQ;AAExB;;AAGF,OAAI,UAAU;IACd;AAEF,MAAI,SAAS,WAAW,EACtB;AAGF,eAAa;AACX,YAAS,SAAQ,YAAW,SAAS,CAAC;;IAMvC,KAAK"}

package/dist/hooks/use-multi-select.mjs

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
 //#region src/hooks/use-multi-select.ts
 const useMultiSelect = (count) => {
@@ -8,27 +8,36 @@ const useMultiSelect = (count) => {
 		const next = new Set([...rawSelected].filter((index) => index < count));
 		return next.size === rawSelected.size ? rawSelected : next;
 	}, [rawSelected, count]);
+	useEffect(() => {
+		setRawSelected((prev) => {
+			const next = new Set([...prev].filter((index) => index < count));
+			return next.size === prev.size ? prev : next;
+		});
+		setAnchor((prev) => prev !== null && prev >= count ? null : prev);
+	}, [count]);
 	const toggle = useCallback((index, shiftKey = false) => {
+		if (index < 0 || index >= count) return;
 		setRawSelected((prev) => {
-			const next = new Set(prev);
 			if (shiftKey && anchor !== null) {
 				const [start, end] = anchor < index ? [anchor, index] : [index, anchor];
+				const next = /* @__PURE__ */ new Set();
 				for (let i = start; i <= end; i++) next.add(i);
 				return next;
 			}
+			const next = new Set(prev);
 			if (next.has(index)) next.delete(index);
 			else next.add(index);
 			return next;
 		});
 		setAnchor(index);
-	}, [anchor]);
+	}, [anchor, count]);
 	const clear = useCallback(() => {
 		setRawSelected(/* @__PURE__ */ new Set());
 		setAnchor(null);
 	}, []);
 	const replace = useCallback((indices) => {
-		setRawSelected(indices);
-	}, []);
+		setRawSelected(new Set([...indices].filter((index) => index >= 0 && index < count)));
+	}, [count]);
 	return {
 		selected,
 		isSelected: useCallback((index) => selected.has(index), [selected]),

package/dist/hooks/use-multi-select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-multi-select.mjs","names":[],"sources":["../../src/hooks/use-multi-select.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\n\nconst useMultiSelect = (count: number) => {\n  const [rawSelected, setRawSelected] = useState<Set<number>>(new Set());\n  const [anchor, setAnchor] = useState<number | null>(null);\n\n  // Indices can outlive the item they pointed to (e.g. after the backing\n  // list shrinks) — clamp against the current count on every render\n  // instead of syncing state back via an effect.\n  const selected = useMemo(() => {\n    const next = new Set([...rawSelected].filter(index => index < count));\n    return next.size === rawSelected.size ? rawSelected : next;\n  }, [rawSelected, count]);\n\n  const toggle = useCallback(\n    (index: number, shiftKey = false) => {\n      setRawSelected(prev => {\n        const next = new Set(prev);\n\n        if (shiftKey && anchor !== null) {\n          const [start, end] =\n            anchor < index ? [anchor, index] : [index, anchor];\n\n          for (let i = start; i <= end; i++) {\n            next.add(i);\n          }\n          return next;\n        }\n\n        if (next.has(index)) {\n          next.delete(index);\n        } else {\n          next.add(index);\n        }\n        return next;\n      });\n      setAnchor(index);\n    },\n    [anchor],\n  );\n\n  const clear = useCallback(() => {\n    setRawSelected(new Set());\n    setAnchor(null);\n  }, []);\n\n  const replace = useCallback((indices: Set<number>) => {\n    setRawSelected(indices);\n  }, []);\n\n  const isSelected = useCallback(\n    (index: number) => selected.has(index),\n    [selected],\n  );\n\n  return {\n    selected,\n    isSelected,\n    toggle,\n    clear,\n    replace,\n  } as const;\n};\n\nexport default useMultiSelect;\n"],"mappings":";;;AAEA,MAAM,kBAAkB,UAAkB;CACxC,MAAM,CAAC,aAAa,kBAAkB,yBAAsB,IAAI,KAAK,CAAC;CACtE,MAAM,CAAC,QAAQ,aAAa,SAAwB,KAAK;CAKzD,MAAM,WAAW,cAAc;EAC7B,MAAM,OAAO,IAAI,IAAI,CAAC,GAAG,YAAY,CAAC,QAAO,UAAS,QAAQ,MAAM,CAAC;AACrE,SAAO,KAAK,SAAS,YAAY,OAAO,cAAc;IACrD,CAAC,aAAa,MAAM,CAAC;CAExB,MAAM,SAAS,aACZ,OAAe,WAAW,UAAU;AACnC,kBAAe,SAAQ;GACrB,MAAM,OAAO,IAAI,IAAI,KAAK;AAE1B,OAAI,YAAY,WAAW,MAAM;IAC/B,MAAM,CAAC,OAAO,OACZ,SAAS,QAAQ,CAAC,QAAQ,MAAM,GAAG,CAAC,OAAO,OAAO;AAEpD,SAAK,IAAI,IAAI,OAAO,KAAK,KAAK,IAC5B,MAAK,IAAI,EAAE;AAEb,WAAO;;AAGT,OAAI,KAAK,IAAI,MAAM,CACjB,MAAK,OAAO,MAAM;OAElB,MAAK,IAAI,MAAM;AAEjB,UAAO;IACP;AACF,YAAU,MAAM;IAElB,CAAC,OAAO,CACT;CAED,MAAM,QAAQ,kBAAkB;AAC9B,iCAAe,IAAI,KAAK,CAAC;AACzB,YAAU,KAAK;IACd,EAAE,CAAC;CAEN,MAAM,UAAU,aAAa,YAAyB;AACpD,iBAAe,QAAQ;IACtB,EAAE,CAAC;AAON,QAAO;EACL;EACA,YAPiB,aAChB,UAAkB,SAAS,IAAI,MAAM,EACtC,CAAC,SAAS,CACX;EAKC;EACA;EACA;EACD"}
+{"version":3,"file":"use-multi-select.mjs","names":[],"sources":["../../src/hooks/use-multi-select.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\n\nconst useMultiSelect = (count: number) => {\n  const [rawSelected, setRawSelected] = useState<Set<number>>(new Set());\n  const [anchor, setAnchor] = useState<number | null>(null);\n\n  const selected = useMemo(() => {\n    const next = new Set([...rawSelected].filter(index => index < count));\n    return next.size === rawSelected.size ? rawSelected : next;\n  }, [rawSelected, count]);\n\n  // Clamp `rawSelected`/`anchor` themselves (not just the derived\n  // `selected` view above) whenever `count` shrinks — otherwise\n  // out-of-range indices and a stale anchor keep accumulating in state\n  // indefinitely instead of actually being dropped.\n  useEffect(() => {\n    setRawSelected(prev => {\n      const next = new Set([...prev].filter(index => index < count));\n      return next.size === prev.size ? prev : next;\n    });\n    setAnchor(prev => (prev !== null && prev >= count ? null : prev));\n  }, [count]);\n\n  const toggle = useCallback(\n    (index: number, shiftKey = false) => {\n      if (index < 0 || index >= count) {\n        return;\n      }\n\n      setRawSelected(prev => {\n        if (shiftKey && anchor !== null) {\n          const [start, end] =\n            anchor < index ? [anchor, index] : [index, anchor];\n\n          // Range-select replaces the previous selection, matching the\n          // usual file-explorer/table convention, instead of adding to\n          // it — otherwise repeated shift-clicks just accumulate every\n          // range ever selected rather than re-anchoring to the new one.\n          const next = new Set<number>();\n          for (let i = start; i <= end; i++) {\n            next.add(i);\n          }\n          return next;\n        }\n\n        const next = new Set(prev);\n        if (next.has(index)) {\n          next.delete(index);\n        } else {\n          next.add(index);\n        }\n        return next;\n      });\n      setAnchor(index);\n    },\n    [anchor, count],\n  );\n\n  const clear = useCallback(() => {\n    setRawSelected(new Set());\n    setAnchor(null);\n  }, []);\n\n  const replace = useCallback(\n    (indices: Set<number>) => {\n      setRawSelected(\n        new Set([...indices].filter(index => index >= 0 && index < count)),\n      );\n    },\n    [count],\n  );\n\n  const isSelected = useCallback(\n    (index: number) => selected.has(index),\n    [selected],\n  );\n\n  return {\n    selected,\n    isSelected,\n    toggle,\n    clear,\n    replace,\n  } as const;\n};\n\nexport default useMultiSelect;\n"],"mappings":";;;AAEA,MAAM,kBAAkB,UAAkB;CACxC,MAAM,CAAC,aAAa,kBAAkB,yBAAsB,IAAI,KAAK,CAAC;CACtE,MAAM,CAAC,QAAQ,aAAa,SAAwB,KAAK;CAEzD,MAAM,WAAW,cAAc;EAC7B,MAAM,OAAO,IAAI,IAAI,CAAC,GAAG,YAAY,CAAC,QAAO,UAAS,QAAQ,MAAM,CAAC;AACrE,SAAO,KAAK,SAAS,YAAY,OAAO,cAAc;IACrD,CAAC,aAAa,MAAM,CAAC;AAMxB,iBAAgB;AACd,kBAAe,SAAQ;GACrB,MAAM,OAAO,IAAI,IAAI,CAAC,GAAG,KAAK,CAAC,QAAO,UAAS,QAAQ,MAAM,CAAC;AAC9D,UAAO,KAAK,SAAS,KAAK,OAAO,OAAO;IACxC;AACF,aAAU,SAAS,SAAS,QAAQ,QAAQ,QAAQ,OAAO,KAAM;IAChE,CAAC,MAAM,CAAC;CAEX,MAAM,SAAS,aACZ,OAAe,WAAW,UAAU;AACnC,MAAI,QAAQ,KAAK,SAAS,MACxB;AAGF,kBAAe,SAAQ;AACrB,OAAI,YAAY,WAAW,MAAM;IAC/B,MAAM,CAAC,OAAO,OACZ,SAAS,QAAQ,CAAC,QAAQ,MAAM,GAAG,CAAC,OAAO,OAAO;IAMpD,MAAM,uBAAO,IAAI,KAAa;AAC9B,SAAK,IAAI,IAAI,OAAO,KAAK,KAAK,IAC5B,MAAK,IAAI,EAAE;AAEb,WAAO;;GAGT,MAAM,OAAO,IAAI,IAAI,KAAK;AAC1B,OAAI,KAAK,IAAI,MAAM,CACjB,MAAK,OAAO,MAAM;OAElB,MAAK,IAAI,MAAM;AAEjB,UAAO;IACP;AACF,YAAU,MAAM;IAElB,CAAC,QAAQ,MAAM,CAChB;CAED,MAAM,QAAQ,kBAAkB;AAC9B,iCAAe,IAAI,KAAK,CAAC;AACzB,YAAU,KAAK;IACd,EAAE,CAAC;CAEN,MAAM,UAAU,aACb,YAAyB;AACxB,iBACE,IAAI,IAAI,CAAC,GAAG,QAAQ,CAAC,QAAO,UAAS,SAAS,KAAK,QAAQ,MAAM,CAAC,CACnE;IAEH,CAAC,MAAM,CACR;AAOD,QAAO;EACL;EACA,YAPiB,aAChB,UAAkB,SAAS,IAAI,MAAM,EACtC,CAAC,SAAS,CACX;EAKC;EACA;EACA;EACD"}

package/dist/hooks/use-mutation-observer.d.mts

@@ -0,0 +1,11 @@
+import { RefObject } from "react";
+
+//#region src/hooks/use-mutation-observer.d.ts
+type Target<T extends Node> = RefObject<T | null> | T | null | undefined;
+interface Options extends MutationObserverInit {
+  enabled?: boolean;
+}
+declare const useMutationObserver: <T extends Node>(target: Target<T>, callback: MutationCallback, options?: Options) => void;
+//#endregion
+export { useMutationObserver };
+//# sourceMappingURL=use-mutation-observer.d.mts.map

package/dist/hooks/use-mutation-observer.mjs

@@ -0,0 +1,33 @@
+import { useEffect, useRef } from "react";
+
+//#region src/hooks/use-mutation-observer.ts
+const resolveTarget = (target) => {
+	if (!target) return null;
+	return "current" in target ? target.current : target;
+};
+const useMutationObserver = (target, callback, options = {}) => {
+	const { enabled = true, ...mutationOptions } = options;
+	const callbackRef = useRef(callback);
+	useEffect(() => {
+		callbackRef.current = callback;
+	});
+	useEffect(() => {
+		const node = resolveTarget(target);
+		if (!enabled || !node || typeof MutationObserver === "undefined") return;
+		const observer = new MutationObserver((mutations, obs) => {
+			callbackRef.current(mutations, obs);
+		});
+		observer.observe(node, mutationOptions);
+		return () => {
+			observer.disconnect();
+		};
+	}, [
+		target,
+		enabled,
+		JSON.stringify(mutationOptions)
+	]);
+};
+
+//#endregion
+export { useMutationObserver as default };
+//# sourceMappingURL=use-mutation-observer.mjs.map

package/dist/hooks/use-mutation-observer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mutation-observer.mjs","names":[],"sources":["../../src/hooks/use-mutation-observer.ts"],"sourcesContent":["import { type RefObject, useEffect, useRef } from 'react';\n\ntype Target<T extends Node> = RefObject<T | null> | T | null | undefined;\n\ninterface Options extends MutationObserverInit {\n  enabled?: boolean;\n}\n\nconst resolveTarget = <T extends Node>(target: Target<T>): T | null => {\n  if (!target) {\n    return null;\n  }\n  return 'current' in target ? target.current : target;\n};\n\n// Takes the target directly (a RefObject, or a plain Node like\n// document.head that isn't behind any React ref at all) rather than\n// producing its own — this and useResizeObserver together replace the\n// ResizeObserver+MutationObserver pair live-editor's iframe hand-rolls\n// for auto-sizing its preview content.\nconst useMutationObserver = <T extends Node>(\n  target: Target<T>,\n  callback: MutationCallback,\n  options: Options = {},\n) => {\n  const { enabled = true, ...mutationOptions } = options;\n\n  const callbackRef = useRef(callback);\n\n  useEffect(() => {\n    callbackRef.current = callback;\n  });\n\n  // `mutationOptions` is typically a fresh object literal at the call\n  // site — serialize it into a stable key instead of depending on the\n  // object itself, which would tear down and recreate the observer on\n  // every render.\n  const optionsKey = JSON.stringify(mutationOptions);\n\n  useEffect(() => {\n    const node = resolveTarget(target);\n\n    if (!enabled || !node || typeof MutationObserver === 'undefined') {\n      return;\n    }\n\n    const observer = new MutationObserver((mutations, obs) => {\n      callbackRef.current(mutations, obs);\n    });\n\n    observer.observe(node, mutationOptions);\n\n    return () => {\n      observer.disconnect();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [target, enabled, optionsKey]);\n};\n\nexport default useMutationObserver;\n"],"mappings":";;;AAQA,MAAM,iBAAiC,WAAgC;AACrE,KAAI,CAAC,OACH,QAAO;AAET,QAAO,aAAa,SAAS,OAAO,UAAU;;AAQhD,MAAM,uBACJ,QACA,UACA,UAAmB,EAAE,KAClB;CACH,MAAM,EAAE,UAAU,MAAM,GAAG,oBAAoB;CAE/C,MAAM,cAAc,OAAO,SAAS;AAEpC,iBAAgB;AACd,cAAY,UAAU;GACtB;AAQF,iBAAgB;EACd,MAAM,OAAO,cAAc,OAAO;AAElC,MAAI,CAAC,WAAW,CAAC,QAAQ,OAAO,qBAAqB,YACnD;EAGF,MAAM,WAAW,IAAI,kBAAkB,WAAW,QAAQ;AACxD,eAAY,QAAQ,WAAW,IAAI;IACnC;AAEF,WAAS,QAAQ,MAAM,gBAAgB;AAEvC,eAAa;AACX,YAAS,YAAY;;IAGtB;EAAC;EAAQ;EAnBO,KAAK,UAAU,gBAAgB;EAmBlB,CAAC"}

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

@@ -0,0 +1,5 @@
+//#region src/hooks/use-previous.d.ts
+declare const usePrevious: <T>(value: T) => T | undefined;
+//#endregion
+export { usePrevious };
+//# sourceMappingURL=use-previous.d.mts.map

package/dist/hooks/use-previous.mjs

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from "react";
+
+//#region src/hooks/use-previous.ts
+const usePrevious = (value) => {
+	const ref = useRef(void 0);
+	useEffect(() => {
+		ref.current = value;
+	});
+	return ref.current;
+};
+
+//#endregion
+export { usePrevious as default };
+//# sourceMappingURL=use-previous.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-previous.mjs","names":[],"sources":["../../src/hooks/use-previous.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\n// Returns the value from the *previous* render. Updated in an effect\n// (which runs after render/paint) rather than during render, so the\n// current render still reads whatever was current one render ago.\nconst usePrevious = <T>(value: T): T | undefined => {\n  const ref = useRef<T | undefined>(undefined);\n\n  useEffect(() => {\n    ref.current = value;\n  });\n\n  return ref.current;\n};\n\nexport default usePrevious;\n"],"mappings":";;;AAKA,MAAM,eAAkB,UAA4B;CAClD,MAAM,MAAM,OAAsB,OAAU;AAE5C,iBAAgB;AACd,MAAI,UAAU;GACd;AAEF,QAAO,IAAI"}

package/dist/hooks/use-resize-observer.d.mts

@@ -0,0 +1,12 @@
+//#region src/hooks/use-resize-observer.d.ts
+interface Size {
+  width: number;
+  height: number;
+}
+interface Options {
+  box?: ResizeObserverBoxOptions;
+}
+declare const useResizeObserver: <T extends Element = Element>(options?: Options) => [(node: T | null) => void, Size | null];
+//#endregion
+export { useResizeObserver };
+//# sourceMappingURL=use-resize-observer.d.mts.map

package/dist/hooks/use-resize-observer.mjs

@@ -0,0 +1,29 @@
+import { useCallback, useRef, useState } from "react";
+
+//#region src/hooks/use-resize-observer.ts
+const useResizeObserver = (options) => {
+	const [size, setSize] = useState(null);
+	const observerRef = useRef(null);
+	return [useCallback((node) => {
+		if (observerRef.current) {
+			observerRef.current.disconnect();
+			observerRef.current = null;
+		}
+		if (!node || typeof ResizeObserver === "undefined") return;
+		const box = options?.box ?? "content-box";
+		const observer = new ResizeObserver(([entry]) => {
+			if (!entry) return;
+			const [{ inlineSize, blockSize }] = box === "border-box" ? entry.borderBoxSize : entry.contentBoxSize;
+			setSize({
+				width: inlineSize,
+				height: blockSize
+			});
+		});
+		observer.observe(node, { box });
+		observerRef.current = observer;
+	}, []), size];
+};
+
+//#endregion
+export { useResizeObserver as default };
+//# sourceMappingURL=use-resize-observer.mjs.map

package/dist/hooks/use-resize-observer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-resize-observer.mjs","names":[],"sources":["../../src/hooks/use-resize-observer.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\ninterface Size {\n  width: number;\n  height: number;\n}\n\ninterface Options {\n  box?: ResizeObserverBoxOptions;\n}\n\n// The unprocessed version of useResponsiveSize/useElementScroll/\n// useElementPosition — those each return values shaped for their own\n// purpose (breakpoints, scroll position, a viewport-relative DOMRect).\n// This one just reports an element's own width/height.\nconst useResizeObserver = <T extends Element = Element>(\n  options?: Options,\n): [(node: T | null) => void, Size | null] => {\n  const [size, setSize] = useState<Size | null>(null);\n  const observerRef = useRef<ResizeObserver | null>(null);\n\n  // Same convention as useIntersectionObserver: `options` is typically a\n  // fresh object literal at the call site, so it isn't a dependency here\n  // — that would tear down and recreate the observer on every render. The\n  // ref callback only re-runs when the observed node itself changes,\n  // capturing whatever `options` was current at that time.\n  const ref = useCallback((node: T | null) => {\n    if (observerRef.current) {\n      observerRef.current.disconnect();\n      observerRef.current = null;\n    }\n\n    if (!node || typeof ResizeObserver === 'undefined') {\n      return;\n    }\n\n    const box = options?.box ?? 'content-box';\n\n    const observer = new ResizeObserver(([entry]) => {\n      if (!entry) {\n        return;\n      }\n\n      const [{ inlineSize, blockSize }] =\n        box === 'border-box' ? entry.borderBoxSize : entry.contentBoxSize;\n\n      setSize({ width: inlineSize, height: blockSize });\n    });\n\n    observer.observe(node, { box });\n    observerRef.current = observer;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return [ref, size];\n};\n\nexport default useResizeObserver;\n"],"mappings":";;;AAeA,MAAM,qBACJ,YAC4C;CAC5C,MAAM,CAAC,MAAM,WAAW,SAAsB,KAAK;CACnD,MAAM,cAAc,OAA8B,KAAK;AAmCvD,QAAO,CA5BK,aAAa,SAAmB;AAC1C,MAAI,YAAY,SAAS;AACvB,eAAY,QAAQ,YAAY;AAChC,eAAY,UAAU;;AAGxB,MAAI,CAAC,QAAQ,OAAO,mBAAmB,YACrC;EAGF,MAAM,MAAM,SAAS,OAAO;EAE5B,MAAM,WAAW,IAAI,gBAAgB,CAAC,WAAW;AAC/C,OAAI,CAAC,MACH;GAGF,MAAM,CAAC,EAAE,YAAY,eACnB,QAAQ,eAAe,MAAM,gBAAgB,MAAM;AAErD,WAAQ;IAAE,OAAO;IAAY,QAAQ;IAAW,CAAC;IACjD;AAEF,WAAS,QAAQ,MAAM,EAAE,KAAK,CAAC;AAC/B,cAAY,UAAU;IAErB,EAAE,CAAC,EAEO,KAAK"}

package/dist/hooks/use-responsive-size.d.mts

@@ -12,6 +12,7 @@ interface BreakpointInfo {
 interface Options {
   delay?: number;
   container?: HTMLElement | null;
+  viewport?: boolean;
 }
 declare const useResponsiveSize: <T extends HTMLElement>(options?: Options) => {
   size: {