@crimson_dev/use-resize-observer 0.1.1

package/dist/index.js

@@ -0,0 +1,386 @@
+'use client';
+'use client';
+
+import { createContext, startTransition, useEffect, useRef, useState } from "react";
+
+//#region src/context.ts
+/**
+* Context for injecting a custom `ResizeObserver` constructor.
+*
+* Useful for:
+* - **Testing**: Inject a mock `ResizeObserver` for deterministic tests.
+* - **SSR**: Inject a no-op implementation to avoid `ReferenceError`.
+* - **Polyfills**: Inject a polyfill without modifying `globalThis`.
+*
+* @example
+* ```tsx
+* // In tests:
+* <ResizeObserverContext.Provider value={MockResizeObserver}>
+*   <ComponentThatUsesResize />
+* </ResizeObserverContext.Provider>
+* ```
+*/
+const ResizeObserverContext = createContext(null);
+ResizeObserverContext.displayName = "ResizeObserverContext";
+
+//#endregion
+//#region src/scheduler.ts
+/**
+* Batching scheduler that coalesces all ResizeObserver callbacks into a single
+* `requestAnimationFrame` flush, wrapped in React `startTransition` for
+* non-urgent update scheduling.
+*
+* Uses a `Map<Element, FlushEntry>` with last-write-wins semantics so that
+* 100 simultaneous resize events produce exactly 1 React render cycle.
+*
+* Implements `Disposable` for ES2026 `using` declarations.
+*
+* @internal
+*/
+var RafScheduler = class {
+	#queue = /* @__PURE__ */ new Map();
+	#rafId = null;
+	/** Enqueue a resize observation for the next rAF flush. */
+	schedule(target, entry, cbs) {
+		this.#queue.set(target, {
+			callbacks: cbs,
+			entry
+		});
+		this.#requestFlush();
+	}
+	#requestFlush() {
+		if (this.#rafId !== null) return;
+		this.#rafId = requestAnimationFrame(() => {
+			this.#rafId = null;
+			this.#flush();
+		});
+	}
+	#flush() {
+		const snapshot = new Map(this.#queue);
+		this.#queue.clear();
+		startTransition(() => {
+			for (const { callbacks, entry } of snapshot.values()) for (const cb of callbacks) cb(entry);
+		});
+	}
+	/** Cancel any pending rAF and clear the queue. */
+	cancel() {
+		if (this.#rafId !== null) {
+			cancelAnimationFrame(this.#rafId);
+			this.#rafId = null;
+		}
+		this.#queue.clear();
+	}
+	/** Disposable contract (ES2026 explicit resource management). */
+	[Symbol.dispose]() {
+		this.cancel();
+	}
+};
+/** Create a new scheduler instance. @internal */
+const createScheduler = () => new RafScheduler();
+
+//#endregion
+//#region src/pool.ts
+/**
+* Shared observer pool that multiplexes many element observations through a
+* single `ResizeObserver` instance per document root.
+*
+* Uses `WeakMap` + `FinalizationRegistry` for GC-backed cleanup of detached
+* elements, and `RafScheduler` for batched, non-urgent React state updates.
+*
+* Implements `Disposable` for ES2026 `using` declarations.
+*
+* @internal
+*/
+var ObserverPool = class {
+	#scheduler;
+	#registry = /* @__PURE__ */ new WeakMap();
+	#finalizer = new FinalizationRegistry((ref) => {
+		const el = ref.deref();
+		if (el) {
+			this.#observer.unobserve(el);
+			this.#size--;
+		}
+	});
+	#observer;
+	#size = 0;
+	constructor(scheduler) {
+		this.#scheduler = scheduler ?? createScheduler();
+		this.#observer = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const callbacks = this.#registry.get(entry.target);
+				if (callbacks?.size) this.#scheduler.schedule(entry.target, entry, callbacks);
+			}
+		});
+	}
+	/** Begin observing an element with the given options and callback. */
+	observe(target, options, cb) {
+		let callbacks = this.#registry.get(target);
+		if (!callbacks) {
+			callbacks = /* @__PURE__ */ new Set();
+			this.#registry.set(target, callbacks);
+			this.#finalizer.register(target, new WeakRef(target), target);
+			this.#observer.observe(target, options);
+			this.#size++;
+		}
+		callbacks.add(cb);
+	}
+	/** Stop a specific callback from observing the target. */
+	unobserve(target, cb) {
+		const callbacks = this.#registry.get(target);
+		if (!callbacks) return;
+		callbacks.delete(cb);
+		if (callbacks.size === 0) {
+			this.#registry.delete(target);
+			this.#finalizer.unregister(target);
+			this.#observer.unobserve(target);
+			this.#size--;
+		}
+	}
+	/** Number of currently observed elements. */
+	get observedCount() {
+		return this.#size;
+	}
+	/** Disposable contract (ES2026 explicit resource management). */
+	[Symbol.dispose]() {
+		this.#observer.disconnect();
+		this.#scheduler.cancel();
+		this.#size = 0;
+	}
+};
+/**
+* Module-level weak registry of pools per document/shadow root.
+* Ensures a single shared pool per root context.
+*/
+const poolRegistry = /* @__PURE__ */ new WeakMap();
+/**
+* Get or create the shared observer pool for the given root.
+* Uses `Promise.try()` (ES2026) for safe async-context creation
+* with synchronous return path.
+*
+* @param root - Document or ShadowRoot to scope the pool to.
+* @returns The shared `ObserverPool` for the given root.
+* @internal
+*/
+const getSharedPool = (root) => {
+	const existing = poolRegistry.get(root);
+	if (existing) return existing;
+	Promise.try(() => {
+		if (typeof globalThis.ResizeObserver === "undefined") throw new Error("[@crimson_dev/use-resize-observer] ResizeObserver is not available. Import the /shim entry or use the /server entry for SSR.");
+	}).catch((error) => {
+		console.error(error);
+	});
+	const pool = new ObserverPool();
+	poolRegistry.set(root, pool);
+	return pool;
+};
+
+//#endregion
+//#region src/factory.ts
+/**
+* Framework-agnostic factory for creating a ResizeObserver subscription
+* using the shared pool architecture.
+*
+* Uses the same pool and scheduler as the React hook — no duplicate observers.
+* Implements cleanup tracking with `Map` for efficient iteration.
+*
+* @param options - Configuration options.
+* @returns An object with `observe`, `unobserve`, and `disconnect` methods.
+*
+* @example
+* ```ts
+* using observer = createResizeObserver({ box: 'border-box' });
+* observer.observe(element, (entry) => {
+*   console.log(entry.contentRect.width);
+* });
+* ```
+*/
+const createResizeObserver = (options = {}) => {
+	const { box = "content-box", root = globalThis.document } = options;
+	const pool = getSharedPool(root);
+	const tracked = /* @__PURE__ */ new Map();
+	const observe = (target, callback) => {
+		pool.observe(target, { box }, callback);
+		let cbs = tracked.get(target);
+		if (!cbs) {
+			cbs = /* @__PURE__ */ new Set();
+			tracked.set(target, cbs);
+		}
+		cbs.add(callback);
+	};
+	const unobserve = (target, callback) => {
+		pool.unobserve(target, callback);
+		const cbs = tracked.get(target);
+		if (cbs) {
+			cbs.delete(callback);
+			if (cbs.size === 0) tracked.delete(target);
+		}
+	};
+	const disconnect = () => {
+		for (const [target, cbs] of tracked) for (const cb of cbs) pool.unobserve(target, cb);
+		tracked.clear();
+	};
+	return {
+		observe,
+		unobserve,
+		disconnect,
+		[Symbol.dispose]() {
+			disconnect();
+		}
+	};
+};
+
+//#endregion
+//#region src/hook.ts
+/**
+* Extract width/height from a ResizeObserverEntry based on the selected box model.
+* Uses destructuring with fallback for Safari's missing `devicePixelContentBoxSize`.
+* @internal
+*/
+const extractDimensions = (entry, box) => {
+	switch (box) {
+		case "border-box": {
+			const size = entry.borderBoxSize[0];
+			return {
+				width: size?.inlineSize ?? 0,
+				height: size?.blockSize ?? 0
+			};
+		}
+		case "device-pixel-content-box": {
+			const size = (entry.devicePixelContentBoxSize ?? entry.contentBoxSize)[0];
+			return {
+				width: size?.inlineSize ?? 0,
+				height: size?.blockSize ?? 0
+			};
+		}
+		default: {
+			const size = entry.contentBoxSize[0];
+			return {
+				width: size?.inlineSize ?? 0,
+				height: size?.blockSize ?? 0
+			};
+		}
+	}
+};
+/**
+* Primary React hook for observing element resize events.
+*
+* Features:
+* - Single shared `ResizeObserver` per document root (pool architecture)
+* - `requestAnimationFrame` batching with `startTransition` wrapping
+* - GC-backed cleanup via `FinalizationRegistry`
+* - React Compiler-safe (stable callback identity via ref pattern)
+* - Sub-300B gzip bundle contribution
+*
+* @param options - Configuration options.
+* @returns Ref, width, height, and raw entry.
+*
+* @example
+* ```tsx
+* const { ref, width, height } = useResizeObserver<HTMLDivElement>();
+* return <div ref={ref}>Size: {width} x {height}</div>;
+* ```
+*/
+const useResizeObserver = (options = {}) => {
+	const { ref: externalRef, box = "content-box", root, onResize } = options;
+	const internalRef = useRef(null);
+	const targetRef = externalRef ?? internalRef;
+	const [width, setWidth] = useState(void 0);
+	const [height, setHeight] = useState(void 0);
+	const [entry, setEntry] = useState(void 0);
+	const onResizeRef = useRef(onResize);
+	onResizeRef.current = onResize;
+	const boxRef = useRef(box);
+	boxRef.current = box;
+	useEffect(() => {
+		const element = targetRef.current;
+		if (!element) return;
+		const pool = getSharedPool(root ?? element.ownerDocument);
+		const callback = (resizeEntry) => {
+			const { width: w, height: h } = extractDimensions(resizeEntry, boxRef.current);
+			setWidth(w);
+			setHeight(h);
+			setEntry(resizeEntry);
+			onResizeRef.current?.(resizeEntry);
+		};
+		pool.observe(element, { box }, callback);
+		return () => {
+			pool.unobserve(element, callback);
+		};
+	}, [
+		targetRef,
+		box,
+		root
+	]);
+	return {
+		ref: targetRef,
+		width,
+		height,
+		entry
+	};
+};
+
+//#endregion
+//#region src/hook-multi.ts
+/**
+* Extract the first size entry for the given box model.
+* @internal
+*/
+const extractSize = (entry, box) => {
+	switch (box) {
+		case "border-box": return entry.borderBoxSize[0];
+		case "device-pixel-content-box": return (entry.devicePixelContentBoxSize ?? entry.contentBoxSize)[0];
+		default: return entry.contentBoxSize[0];
+	}
+};
+/**
+* Multi-element variant: observe multiple elements simultaneously through
+* a single pool subscription.
+*
+* @param refs - Array of refs pointing to elements to observe.
+* @param options - Configuration options.
+* @returns A `Map<Element, ResizeEntry>` keyed by observed element.
+*
+* @example
+* ```tsx
+* const ref1 = useRef<HTMLDivElement>(null);
+* const ref2 = useRef<HTMLDivElement>(null);
+* const entries = useResizeObserverEntries([ref1, ref2]);
+* ```
+*/
+const useResizeObserverEntries = (refs, options = {}) => {
+	const { box = "content-box", root } = options;
+	const [entries, setEntries] = useState(/* @__PURE__ */ new Map());
+	const boxRef = useRef(box);
+	boxRef.current = box;
+	useEffect(() => {
+		const cleanups = [];
+		for (const ref of refs) {
+			const element = ref.current;
+			if (!element) continue;
+			const pool = getSharedPool(root ?? element.ownerDocument);
+			const currentBox = boxRef.current;
+			const callback = (resizeEntry) => {
+				const sizeEntry = extractSize(resizeEntry, currentBox);
+				setEntries((prev) => {
+					const next = new Map(prev);
+					next.set(element, {
+						width: sizeEntry?.inlineSize ?? 0,
+						height: sizeEntry?.blockSize ?? 0,
+						entry: resizeEntry
+					});
+					return next;
+				});
+			};
+			pool.observe(element, { box: currentBox }, callback);
+			cleanups.push(() => pool.unobserve(element, callback));
+		}
+		return () => {
+			for (const cleanup of cleanups) cleanup();
+		};
+	}, [refs, root]);
+	return entries;
+};
+
+//#endregion
+export { ResizeObserverContext, createResizeObserver, useResizeObserver, useResizeObserverEntries };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["#queue","#requestFlush","#rafId","#flush","#scheduler","#registry","#finalizer","#observer","#size"],"sources":["../src/context.ts","../src/scheduler.ts","../src/pool.ts","../src/factory.ts","../src/hook.ts","../src/hook-multi.ts"],"sourcesContent":["'use client';\n\nimport type React from 'react';\nimport { createContext, useContext } from 'react';\n\n/**\n * Context for injecting a custom `ResizeObserver` constructor.\n *\n * Useful for:\n * - **Testing**: Inject a mock `ResizeObserver` for deterministic tests.\n * - **SSR**: Inject a no-op implementation to avoid `ReferenceError`.\n * - **Polyfills**: Inject a polyfill without modifying `globalThis`.\n *\n * @example\n * ```tsx\n * // In tests:\n * <ResizeObserverContext.Provider value={MockResizeObserver}>\n *   <ComponentThatUsesResize />\n * </ResizeObserverContext.Provider>\n * ```\n */\nexport const ResizeObserverContext: React.Context<typeof ResizeObserver | null> = createContext<\n  typeof ResizeObserver | null\n>(null);\n\nResizeObserverContext.displayName = 'ResizeObserverContext';\n\n/**\n * Access the injected ResizeObserver constructor, falling back to the global.\n * @internal\n */\nexport const useResizeObserverConstructor = (): typeof ResizeObserver => {\n  const contextValue = useContext(ResizeObserverContext);\n  return contextValue ?? globalThis.ResizeObserver;\n};\n","'use client';\n\nimport { startTransition } from 'react';\n\nimport type { ResizeCallback } from './types.js';\n\n/**\n * Per-frame flush entry — snapshot of callbacks + latest entry for one element.\n * @internal\n */\ninterface FlushEntry {\n  readonly callbacks: ReadonlySet<ResizeCallback>;\n  readonly entry: ResizeObserverEntry;\n}\n\n/**\n * Batching scheduler that coalesces all ResizeObserver callbacks into a single\n * `requestAnimationFrame` flush, wrapped in React `startTransition` for\n * non-urgent update scheduling.\n *\n * Uses a `Map<Element, FlushEntry>` with last-write-wins semantics so that\n * 100 simultaneous resize events produce exactly 1 React render cycle.\n *\n * Implements `Disposable` for ES2026 `using` declarations.\n *\n * @internal\n */\nexport class RafScheduler implements Disposable {\n  readonly #queue = new Map<Element, FlushEntry>();\n  #rafId: number | null = null;\n\n  /** Enqueue a resize observation for the next rAF flush. */\n  schedule(target: Element, entry: ResizeObserverEntry, cbs: ReadonlySet<ResizeCallback>): void {\n    this.#queue.set(target, { callbacks: cbs, entry });\n    this.#requestFlush();\n  }\n\n  #requestFlush(): void {\n    if (this.#rafId !== null) return;\n    this.#rafId = requestAnimationFrame(() => {\n      this.#rafId = null;\n      this.#flush();\n    });\n  }\n\n  #flush(): void {\n    // Snapshot and clear before dispatching to avoid re-entrant mutations\n    const snapshot = new Map(this.#queue);\n    this.#queue.clear();\n\n    startTransition(() => {\n      for (const { callbacks, entry } of snapshot.values()) {\n        for (const cb of callbacks) {\n          cb(entry);\n        }\n      }\n    });\n  }\n\n  /** Cancel any pending rAF and clear the queue. */\n  cancel(): void {\n    if (this.#rafId !== null) {\n      cancelAnimationFrame(this.#rafId);\n      this.#rafId = null;\n    }\n    this.#queue.clear();\n  }\n\n  /** Disposable contract (ES2026 explicit resource management). */\n  [Symbol.dispose](): void {\n    this.cancel();\n  }\n}\n\n/** Create a new scheduler instance. @internal */\nexport const createScheduler = (): RafScheduler => new RafScheduler();\n","import { createScheduler, type RafScheduler } from './scheduler.js';\nimport type { ResizeCallback } from './types.js';\n\n/**\n * Shared observer pool that multiplexes many element observations through a\n * single `ResizeObserver` instance per document root.\n *\n * Uses `WeakMap` + `FinalizationRegistry` for GC-backed cleanup of detached\n * elements, and `RafScheduler` for batched, non-urgent React state updates.\n *\n * Implements `Disposable` for ES2026 `using` declarations.\n *\n * @internal\n */\nexport class ObserverPool implements Disposable {\n  readonly #scheduler: RafScheduler;\n  readonly #registry = new WeakMap<Element, Set<ResizeCallback>>();\n  readonly #finalizer = new FinalizationRegistry<WeakRef<Element>>((ref) => {\n    const el = ref.deref();\n    if (el) {\n      this.#observer.unobserve(el);\n      this.#size--;\n    }\n  });\n  readonly #observer: ResizeObserver;\n  #size = 0;\n\n  constructor(scheduler?: RafScheduler) {\n    this.#scheduler = scheduler ?? createScheduler();\n    this.#observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        const callbacks = this.#registry.get(entry.target);\n        if (callbacks?.size) {\n          this.#scheduler.schedule(entry.target, entry, callbacks);\n        }\n      }\n    });\n  }\n\n  /** Begin observing an element with the given options and callback. */\n  observe(target: Element, options: ResizeObserverOptions, cb: ResizeCallback): void {\n    let callbacks = this.#registry.get(target);\n    if (!callbacks) {\n      callbacks = new Set();\n      this.#registry.set(target, callbacks);\n      this.#finalizer.register(target, new WeakRef(target), target);\n      this.#observer.observe(target, options);\n      this.#size++;\n    }\n    callbacks.add(cb);\n  }\n\n  /** Stop a specific callback from observing the target. */\n  unobserve(target: Element, cb: ResizeCallback): void {\n    const callbacks = this.#registry.get(target);\n    if (!callbacks) return;\n    callbacks.delete(cb);\n    if (callbacks.size === 0) {\n      this.#registry.delete(target);\n      this.#finalizer.unregister(target);\n      this.#observer.unobserve(target);\n      this.#size--;\n    }\n  }\n\n  /** Number of currently observed elements. */\n  get observedCount(): number {\n    return this.#size;\n  }\n\n  /** Disposable contract (ES2026 explicit resource management). */\n  [Symbol.dispose](): void {\n    this.#observer.disconnect();\n    this.#scheduler.cancel();\n    this.#size = 0;\n  }\n}\n\n/**\n * Module-level weak registry of pools per document/shadow root.\n * Ensures a single shared pool per root context.\n */\nconst poolRegistry = new WeakMap<Document | ShadowRoot, ObserverPool>();\n\n/**\n * Get or create the shared observer pool for the given root.\n * Uses `Promise.try()` (ES2026) for safe async-context creation\n * with synchronous return path.\n *\n * @param root - Document or ShadowRoot to scope the pool to.\n * @returns The shared `ObserverPool` for the given root.\n * @internal\n */\nexport const getSharedPool = (root: Document | ShadowRoot): ObserverPool => {\n  const existing = poolRegistry.get(root);\n  if (existing) return existing;\n\n  // Promise.try() (ES2026) — safely wraps synchronous pool creation in a\n  // microtask-aware context, catching any constructor exceptions into a\n  // rejected promise for diagnostics while returning synchronously.\n  Promise.try(() => {\n    if (typeof globalThis.ResizeObserver === 'undefined') {\n      throw new Error(\n        '[@crimson_dev/use-resize-observer] ResizeObserver is not available. ' +\n          'Import the /shim entry or use the /server entry for SSR.',\n      );\n    }\n  }).catch((error: unknown) => {\n    console.error(error);\n  });\n\n  const pool = new ObserverPool();\n  poolRegistry.set(root, pool);\n  return pool;\n};\n","import { getSharedPool } from './pool.js';\nimport type {\n  CreateResizeObserverOptions,\n  ResizeCallback,\n  ResizeObserverFactory,\n} from './types.js';\n\n/**\n * Framework-agnostic factory for creating a ResizeObserver subscription\n * using the shared pool architecture.\n *\n * Uses the same pool and scheduler as the React hook — no duplicate observers.\n * Implements cleanup tracking with `Map` for efficient iteration.\n *\n * @param options - Configuration options.\n * @returns An object with `observe`, `unobserve`, and `disconnect` methods.\n *\n * @example\n * ```ts\n * using observer = createResizeObserver({ box: 'border-box' });\n * observer.observe(element, (entry) => {\n *   console.log(entry.contentRect.width);\n * });\n * ```\n */\nexport const createResizeObserver = (\n  options: CreateResizeObserverOptions = {},\n): ResizeObserverFactory & Disposable => {\n  const { box = 'content-box', root = globalThis.document } = options;\n  const pool = getSharedPool(root);\n  const tracked = new Map<Element, Set<ResizeCallback>>();\n\n  const observe = (target: Element, callback: ResizeCallback): void => {\n    pool.observe(target, { box }, callback);\n\n    let cbs = tracked.get(target);\n    if (!cbs) {\n      cbs = new Set();\n      tracked.set(target, cbs);\n    }\n    cbs.add(callback);\n  };\n\n  const unobserve = (target: Element, callback: ResizeCallback): void => {\n    pool.unobserve(target, callback);\n    const cbs = tracked.get(target);\n    if (cbs) {\n      cbs.delete(callback);\n      if (cbs.size === 0) tracked.delete(target);\n    }\n  };\n\n  const disconnect = (): void => {\n    for (const [target, cbs] of tracked) {\n      for (const cb of cbs) {\n        pool.unobserve(target, cb);\n      }\n    }\n    tracked.clear();\n  };\n\n  return {\n    observe,\n    unobserve,\n    disconnect,\n    [Symbol.dispose](): void {\n      disconnect();\n    },\n  };\n};\n","'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport { getSharedPool } from './pool.js';\nimport type {\n  ResizeCallback,\n  ResizeObserverBoxOptions,\n  UseResizeObserverOptions,\n  UseResizeObserverResult,\n} from './types.js';\n\n/**\n * Extract width/height from a ResizeObserverEntry based on the selected box model.\n * Uses destructuring with fallback for Safari's missing `devicePixelContentBoxSize`.\n * @internal\n */\nconst extractDimensions = (\n  entry: ResizeObserverEntry,\n  box: ResizeObserverBoxOptions,\n): { readonly width: number; readonly height: number } => {\n  switch (box) {\n    case 'border-box': {\n      const size = entry.borderBoxSize[0];\n      return { width: size?.inlineSize ?? 0, height: size?.blockSize ?? 0 };\n    }\n    case 'device-pixel-content-box': {\n      const size = (entry.devicePixelContentBoxSize ?? entry.contentBoxSize)[0];\n      return { width: size?.inlineSize ?? 0, height: size?.blockSize ?? 0 };\n    }\n    default: {\n      const size = entry.contentBoxSize[0];\n      return { width: size?.inlineSize ?? 0, height: size?.blockSize ?? 0 };\n    }\n  }\n};\n\n/**\n * Primary React hook for observing element resize events.\n *\n * Features:\n * - Single shared `ResizeObserver` per document root (pool architecture)\n * - `requestAnimationFrame` batching with `startTransition` wrapping\n * - GC-backed cleanup via `FinalizationRegistry`\n * - React Compiler-safe (stable callback identity via ref pattern)\n * - Sub-300B gzip bundle contribution\n *\n * @param options - Configuration options.\n * @returns Ref, width, height, and raw entry.\n *\n * @example\n * ```tsx\n * const { ref, width, height } = useResizeObserver<HTMLDivElement>();\n * return <div ref={ref}>Size: {width} x {height}</div>;\n * ```\n */\nexport const useResizeObserver = <T extends Element = Element>(\n  options: UseResizeObserverOptions<T> = {},\n): UseResizeObserverResult<T> => {\n  const { ref: externalRef, box = 'content-box', root, onResize } = options;\n\n  const internalRef = useRef<T | null>(null);\n  const targetRef = externalRef ?? internalRef;\n\n  const [width, setWidth] = useState<number | undefined>(undefined);\n  const [height, setHeight] = useState<number | undefined>(undefined);\n  const [entry, setEntry] = useState<ResizeObserverEntry | undefined>(undefined);\n\n  // Stable callback ref — survives re-renders without triggering re-observation.\n  // Follows useEffectEvent semantics: latest closure captured, identity stable.\n  const onResizeRef = useRef(onResize);\n  onResizeRef.current = onResize;\n\n  const boxRef = useRef(box);\n  boxRef.current = box;\n\n  useEffect(() => {\n    const element = targetRef.current;\n    if (!element) return;\n\n    const observerRoot = root ?? element.ownerDocument;\n    const pool = getSharedPool(observerRoot);\n\n    const callback: ResizeCallback = (resizeEntry) => {\n      const { width: w, height: h } = extractDimensions(resizeEntry, boxRef.current);\n      setWidth(w);\n      setHeight(h);\n      setEntry(resizeEntry);\n      onResizeRef.current?.(resizeEntry);\n    };\n\n    pool.observe(element, { box }, callback);\n\n    return () => {\n      pool.unobserve(element, callback);\n    };\n  }, [targetRef, box, root]);\n\n  return { ref: targetRef, width, height, entry };\n};\n\nexport type { ResizeObserverBoxOptions, UseResizeObserverOptions, UseResizeObserverResult };\n","'use client';\n\nimport type { RefObject } from 'react';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { getSharedPool } from './pool.js';\nimport type { ResizeCallback, ResizeObserverBoxOptions } from './types.js';\n\n/** Entry data for a single observed element in the multi-element hook. */\nexport interface ResizeEntry {\n  readonly width: number;\n  readonly height: number;\n  readonly entry: ResizeObserverEntry;\n}\n\n/** Options for `useResizeObserverEntries`. */\nexport interface UseResizeObserverEntriesOptions {\n  /** Which box model to report. @default 'content-box' */\n  box?: ResizeObserverBoxOptions;\n  /** Document or ShadowRoot scoping the pool. @default document */\n  root?: Document | ShadowRoot;\n}\n\n/**\n * Extract the first size entry for the given box model.\n * @internal\n */\nconst extractSize = (\n  entry: ResizeObserverEntry,\n  box: ResizeObserverBoxOptions,\n): ResizeObserverSize | undefined => {\n  switch (box) {\n    case 'border-box':\n      return entry.borderBoxSize[0];\n    case 'device-pixel-content-box':\n      return (entry.devicePixelContentBoxSize ?? entry.contentBoxSize)[0];\n    default:\n      return entry.contentBoxSize[0];\n  }\n};\n\n/**\n * Multi-element variant: observe multiple elements simultaneously through\n * a single pool subscription.\n *\n * @param refs - Array of refs pointing to elements to observe.\n * @param options - Configuration options.\n * @returns A `Map<Element, ResizeEntry>` keyed by observed element.\n *\n * @example\n * ```tsx\n * const ref1 = useRef<HTMLDivElement>(null);\n * const ref2 = useRef<HTMLDivElement>(null);\n * const entries = useResizeObserverEntries([ref1, ref2]);\n * ```\n */\nexport const useResizeObserverEntries = (\n  refs: ReadonlyArray<RefObject<Element | null>>,\n  options: UseResizeObserverEntriesOptions = {},\n): Map<Element, ResizeEntry> => {\n  const { box = 'content-box', root } = options;\n  const [entries, setEntries] = useState<Map<Element, ResizeEntry>>(new Map());\n  const boxRef = useRef(box);\n  boxRef.current = box;\n\n  useEffect(() => {\n    const cleanups: Array<() => void> = [];\n\n    for (const ref of refs) {\n      const element = ref.current;\n      if (!element) continue;\n\n      const observerRoot = root ?? element.ownerDocument;\n      const pool = getSharedPool(observerRoot);\n      const currentBox = boxRef.current;\n\n      const callback: ResizeCallback = (resizeEntry) => {\n        const sizeEntry = extractSize(resizeEntry, currentBox);\n\n        setEntries((prev) => {\n          const next = new Map(prev);\n          next.set(element, {\n            width: sizeEntry?.inlineSize ?? 0,\n            height: sizeEntry?.blockSize ?? 0,\n            entry: resizeEntry,\n          });\n          return next;\n        });\n      };\n\n      pool.observe(element, { box: currentBox }, callback);\n      cleanups.push(() => pool.unobserve(element, callback));\n    }\n\n    return () => {\n      for (const cleanup of cleanups) {\n        cleanup();\n      }\n    };\n  }, [refs, root]);\n\n  return entries;\n};\n"],"mappings":"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"}

package/dist/server.d.ts

@@ -0,0 +1,28 @@
+
+import { o as UseResizeObserverResult } from "./types-ASPFw2w_.js";
+
+//#region src/server.d.ts
+/**
+* Server-safe mock result for SSR/RSC environments.
+*
+* Returns `undefined` for all measurement values and a no-op ref,
+* preventing `ReferenceError` when `ResizeObserver` is unavailable.
+*
+* @example
+* ```tsx
+* // In an RSC or SSR context:
+* const result = createServerResizeObserverMock<HTMLDivElement>();
+* // result.width === undefined
+* // result.height === undefined
+* // result.entry === undefined
+* ```
+*/
+declare const createServerResizeObserverMock: <T extends Element = Element>() => UseResizeObserverResult<T>;
+/**
+* Check whether the current environment supports ResizeObserver.
+* Safe to call on server — returns `false` without throwing.
+*/
+declare const isResizeObserverSupported: () => boolean;
+//#endregion
+export { createServerResizeObserverMock, isResizeObserverSupported };
+//# sourceMappingURL=server.d.ts.map

package/dist/server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.d.ts","names":[],"sources":["../src/server.ts"],"mappings":";;;;;;AAiBA;;;;;;;;;;;;;cAAa,8BAAA,aACD,OAAA,GAAU,OAAA,OACjB,uBAAA,CAAwB,CAAA;;;AAW7B;;cAAa,yBAAA"}

package/dist/server.js

@@ -0,0 +1,32 @@
+'use client';
+//#region src/server.ts
+/**
+* Server-safe mock result for SSR/RSC environments.
+*
+* Returns `undefined` for all measurement values and a no-op ref,
+* preventing `ReferenceError` when `ResizeObserver` is unavailable.
+*
+* @example
+* ```tsx
+* // In an RSC or SSR context:
+* const result = createServerResizeObserverMock<HTMLDivElement>();
+* // result.width === undefined
+* // result.height === undefined
+* // result.entry === undefined
+* ```
+*/
+const createServerResizeObserverMock = () => ({
+	ref: { current: null },
+	width: void 0,
+	height: void 0,
+	entry: void 0
+});
+/**
+* Check whether the current environment supports ResizeObserver.
+* Safe to call on server — returns `false` without throwing.
+*/
+const isResizeObserverSupported = () => typeof globalThis !== "undefined" && typeof globalThis.ResizeObserver !== "undefined";
+
+//#endregion
+export { createServerResizeObserverMock, isResizeObserverSupported };
+//# sourceMappingURL=server.js.map

package/dist/server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.js","names":[],"sources":["../src/server.ts"],"sourcesContent":["import type { UseResizeObserverResult } from './types.js';\n\n/**\n * Server-safe mock result for SSR/RSC environments.\n *\n * Returns `undefined` for all measurement values and a no-op ref,\n * preventing `ReferenceError` when `ResizeObserver` is unavailable.\n *\n * @example\n * ```tsx\n * // In an RSC or SSR context:\n * const result = createServerResizeObserverMock<HTMLDivElement>();\n * // result.width === undefined\n * // result.height === undefined\n * // result.entry === undefined\n * ```\n */\nexport const createServerResizeObserverMock = <\n  T extends Element = Element,\n>(): UseResizeObserverResult<T> => ({\n  ref: { current: null },\n  width: undefined,\n  height: undefined,\n  entry: undefined,\n});\n\n/**\n * Check whether the current environment supports ResizeObserver.\n * Safe to call on server — returns `false` without throwing.\n */\nexport const isResizeObserverSupported = (): boolean =>\n  typeof globalThis !== 'undefined' && typeof globalThis.ResizeObserver !== 'undefined';\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,MAAa,wCAEuB;CAClC,KAAK,EAAE,SAAS,MAAM;CACtB,OAAO;CACP,QAAQ;CACR,OAAO;CACR;;;;;AAMD,MAAa,kCACX,OAAO,eAAe,eAAe,OAAO,WAAW,mBAAmB"}

package/dist/shim.d.ts

@@ -0,0 +1,38 @@
+
+//#region src/shim.d.ts
+/**
+* Polyfill shim entry — provides a ResizeObserver polyfill for
+* environments without native support.
+*
+* Installs `globalThis.ResizeObserver` if it's missing.
+* Uses rAF polling as the observation mechanism.
+*
+* For sub-pixel normalization, uses `Math.sumPrecise()` (ES2026)
+* with fallback to iterative addition.
+*
+* @example
+* ```ts
+* // Ensure ResizeObserver exists before using the hook:
+* import '@crimson_dev/use-resize-observer/shim';
+* import { useResizeObserver } from '@crimson_dev/use-resize-observer';
+* ```
+*/
+/** Minimal ResizeObserver polyfill for environments without native support. */
+declare class ResizeObserverShim {
+  #private;
+  constructor(callback: ResizeObserverCallback);
+  observe(target: Element, _options?: ResizeObserverOptions): void;
+  unobserve(target: Element): void;
+  disconnect(): void;
+}
+/**
+* Normalize sub-pixel coordinates using `Math.sumPrecise()` (ES2026).
+* Falls back to simple addition if unavailable.
+*
+* @param values - Array of numbers to sum precisely.
+* @returns The precise sum.
+*/
+declare const sumPrecise: (values: number[]) => number;
+//#endregion
+export { ResizeObserverShim, sumPrecise };
+//# sourceMappingURL=shim.d.ts.map

package/dist/shim.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shim.d.ts","names":[],"sources":["../src/shim.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;cAmBM,kBAAA;EAAA;EAMJ,WAAA,CAAY,QAAA,EAAU,sBAAA;EAItB,OAAA,CAAQ,MAAA,EAAQ,OAAA,EAAS,QAAA,GAAW,qBAAA;EAKpC,SAAA,CAAU,MAAA,EAAQ,OAAA;EAKlB,UAAA,CAAA;AAAA;AAgEF;;;;;;;AAAA,cAAa,UAAA,GAAc,MAAA"}

package/dist/shim.js

@@ -0,0 +1,108 @@
+'use client';
+//#region src/shim.ts
+/**
+* Polyfill shim entry — provides a ResizeObserver polyfill for
+* environments without native support.
+*
+* Installs `globalThis.ResizeObserver` if it's missing.
+* Uses rAF polling as the observation mechanism.
+*
+* For sub-pixel normalization, uses `Math.sumPrecise()` (ES2026)
+* with fallback to iterative addition.
+*
+* @example
+* ```ts
+* // Ensure ResizeObserver exists before using the hook:
+* import '@crimson_dev/use-resize-observer/shim';
+* import { useResizeObserver } from '@crimson_dev/use-resize-observer';
+* ```
+*/
+/** Minimal ResizeObserver polyfill for environments without native support. */
+var ResizeObserverShim = class {
+	#callback;
+	#targets = /* @__PURE__ */ new Set();
+	#rafId = null;
+	#lastSizes = /* @__PURE__ */ new WeakMap();
+	constructor(callback) {
+		this.#callback = callback;
+	}
+	observe(target, _options) {
+		this.#targets.add(target);
+		this.#startPolling();
+	}
+	unobserve(target) {
+		this.#targets.delete(target);
+		if (this.#targets.size === 0) this.#stopPolling();
+	}
+	disconnect() {
+		this.#targets.clear();
+		this.#stopPolling();
+	}
+	#startPolling() {
+		if (this.#rafId !== null) return;
+		const poll = () => {
+			this.#checkForChanges();
+			this.#rafId = requestAnimationFrame(poll);
+		};
+		this.#rafId = requestAnimationFrame(poll);
+	}
+	#stopPolling() {
+		if (this.#rafId !== null) {
+			cancelAnimationFrame(this.#rafId);
+			this.#rafId = null;
+		}
+	}
+	#checkForChanges() {
+		const entries = [];
+		const dpr = globalThis.devicePixelRatio ?? 1;
+		for (const target of this.#targets) {
+			const rect = target.getBoundingClientRect();
+			const last = this.#lastSizes.get(target);
+			if (!last || last.width !== rect.width || last.height !== rect.height) {
+				this.#lastSizes.set(target, {
+					width: rect.width,
+					height: rect.height
+				});
+				entries.push({
+					target,
+					contentRect: rect,
+					borderBoxSize: [{
+						inlineSize: rect.width,
+						blockSize: rect.height
+					}],
+					contentBoxSize: [{
+						inlineSize: rect.width,
+						blockSize: rect.height
+					}],
+					devicePixelContentBoxSize: [{
+						inlineSize: rect.width * dpr,
+						blockSize: rect.height * dpr
+					}]
+				});
+			}
+		}
+		if (entries.length > 0) this.#callback(entries, this);
+	}
+};
+/**
+* Normalize sub-pixel coordinates using `Math.sumPrecise()` (ES2026).
+* Falls back to simple addition if unavailable.
+*
+* @param values - Array of numbers to sum precisely.
+* @returns The precise sum.
+*/
+const sumPrecise = (values) => {
+	if (typeof Math.sumPrecise === "function") return Math.sumPrecise(values);
+	let sum = 0;
+	for (const v of values) sum += v;
+	return sum;
+};
+if (typeof globalThis.ResizeObserver === "undefined") Object.defineProperty(globalThis, "ResizeObserver", {
+	value: ResizeObserverShim,
+	writable: true,
+	configurable: true
+});
+
+//#endregion
+export { ResizeObserverShim, sumPrecise };
+//# sourceMappingURL=shim.js.map

package/dist/shim.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shim.js","names":["#callback","#targets","#lastSizes","#startPolling","#stopPolling","#rafId","#checkForChanges"],"sources":["../src/shim.ts"],"sourcesContent":["/**\n * Polyfill shim entry — provides a ResizeObserver polyfill for\n * environments without native support.\n *\n * Installs `globalThis.ResizeObserver` if it's missing.\n * Uses rAF polling as the observation mechanism.\n *\n * For sub-pixel normalization, uses `Math.sumPrecise()` (ES2026)\n * with fallback to iterative addition.\n *\n * @example\n * ```ts\n * // Ensure ResizeObserver exists before using the hook:\n * import '@crimson_dev/use-resize-observer/shim';\n * import { useResizeObserver } from '@crimson_dev/use-resize-observer';\n * ```\n */\n\n/** Minimal ResizeObserver polyfill for environments without native support. */\nclass ResizeObserverShim {\n  readonly #callback: ResizeObserverCallback;\n  readonly #targets = new Set<Element>();\n  #rafId: number | null = null;\n  readonly #lastSizes = new WeakMap<Element, { width: number; height: number }>();\n\n  constructor(callback: ResizeObserverCallback) {\n    this.#callback = callback;\n  }\n\n  observe(target: Element, _options?: ResizeObserverOptions): void {\n    this.#targets.add(target);\n    this.#startPolling();\n  }\n\n  unobserve(target: Element): void {\n    this.#targets.delete(target);\n    if (this.#targets.size === 0) this.#stopPolling();\n  }\n\n  disconnect(): void {\n    this.#targets.clear();\n    this.#stopPolling();\n  }\n\n  #startPolling(): void {\n    if (this.#rafId !== null) return;\n    const poll = (): void => {\n      this.#checkForChanges();\n      this.#rafId = requestAnimationFrame(poll);\n    };\n    this.#rafId = requestAnimationFrame(poll);\n  }\n\n  #stopPolling(): void {\n    if (this.#rafId !== null) {\n      cancelAnimationFrame(this.#rafId);\n      this.#rafId = null;\n    }\n  }\n\n  #checkForChanges(): void {\n    const entries: ResizeObserverEntry[] = [];\n    const dpr = globalThis.devicePixelRatio ?? 1;\n\n    for (const target of this.#targets) {\n      const rect = target.getBoundingClientRect();\n      const last = this.#lastSizes.get(target);\n\n      if (!last || last.width !== rect.width || last.height !== rect.height) {\n        this.#lastSizes.set(target, { width: rect.width, height: rect.height });\n\n        entries.push({\n          target,\n          contentRect: rect,\n          borderBoxSize: [\n            { inlineSize: rect.width, blockSize: rect.height },\n          ] as unknown as ReadonlyArray<ResizeObserverSize>,\n          contentBoxSize: [\n            { inlineSize: rect.width, blockSize: rect.height },\n          ] as unknown as ReadonlyArray<ResizeObserverSize>,\n          devicePixelContentBoxSize: [\n            {\n              inlineSize: rect.width * dpr,\n              blockSize: rect.height * dpr,\n            },\n          ] as unknown as ReadonlyArray<ResizeObserverSize>,\n        } satisfies ResizeObserverEntry);\n      }\n    }\n\n    if (entries.length > 0) {\n      this.#callback(entries, this as unknown as ResizeObserver);\n    }\n  }\n}\n\n/**\n * Normalize sub-pixel coordinates using `Math.sumPrecise()` (ES2026).\n * Falls back to simple addition if unavailable.\n *\n * @param values - Array of numbers to sum precisely.\n * @returns The precise sum.\n */\nexport const sumPrecise = (values: number[]): number => {\n  if (typeof Math.sumPrecise === 'function') {\n    return Math.sumPrecise(values);\n  }\n  let sum = 0;\n  for (const v of values) sum += v;\n  return sum;\n};\n\n// Install shim if native ResizeObserver is unavailable\nif (typeof globalThis.ResizeObserver === 'undefined') {\n  Object.defineProperty(globalThis, 'ResizeObserver', {\n    value: ResizeObserverShim,\n    writable: true,\n    configurable: true,\n  });\n}\n\nexport { ResizeObserverShim };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,IAAM,qBAAN,MAAyB;CACvB,CAASA;CACT,CAASC,0BAAW,IAAI,KAAc;CACtC,SAAwB;CACxB,CAASC,4BAAa,IAAI,SAAqD;CAE/E,YAAY,UAAkC;AAC5C,QAAKF,WAAY;;CAGnB,QAAQ,QAAiB,UAAwC;AAC/D,QAAKC,QAAS,IAAI,OAAO;AACzB,QAAKE,cAAe;;CAGtB,UAAU,QAAuB;AAC/B,QAAKF,QAAS,OAAO,OAAO;AAC5B,MAAI,MAAKA,QAAS,SAAS,EAAG,OAAKG,aAAc;;CAGnD,aAAmB;AACjB,QAAKH,QAAS,OAAO;AACrB,QAAKG,aAAc;;CAGrB,gBAAsB;AACpB,MAAI,MAAKC,UAAW,KAAM;EAC1B,MAAM,aAAmB;AACvB,SAAKC,iBAAkB;AACvB,SAAKD,QAAS,sBAAsB,KAAK;;AAE3C,QAAKA,QAAS,sBAAsB,KAAK;;CAG3C,eAAqB;AACnB,MAAI,MAAKA,UAAW,MAAM;AACxB,wBAAqB,MAAKA,MAAO;AACjC,SAAKA,QAAS;;;CAIlB,mBAAyB;EACvB,MAAM,UAAiC,EAAE;EACzC,MAAM,MAAM,WAAW,oBAAoB;AAE3C,OAAK,MAAM,UAAU,MAAKJ,SAAU;GAClC,MAAM,OAAO,OAAO,uBAAuB;GAC3C,MAAM,OAAO,MAAKC,UAAW,IAAI,OAAO;AAExC,OAAI,CAAC,QAAQ,KAAK,UAAU,KAAK,SAAS,KAAK,WAAW,KAAK,QAAQ;AACrE,UAAKA,UAAW,IAAI,QAAQ;KAAE,OAAO,KAAK;KAAO,QAAQ,KAAK;KAAQ,CAAC;AAEvE,YAAQ,KAAK;KACX;KACA,aAAa;KACb,eAAe,CACb;MAAE,YAAY,KAAK;MAAO,WAAW,KAAK;MAAQ,CACnD;KACD,gBAAgB,CACd;MAAE,YAAY,KAAK;MAAO,WAAW,KAAK;MAAQ,CACnD;KACD,2BAA2B,CACzB;MACE,YAAY,KAAK,QAAQ;MACzB,WAAW,KAAK,SAAS;MAC1B,CACF;KACF,CAA+B;;;AAIpC,MAAI,QAAQ,SAAS,EACnB,OAAKF,SAAU,SAAS,KAAkC;;;;;;;;;;AAYhE,MAAa,cAAc,WAA6B;AACtD,KAAI,OAAO,KAAK,eAAe,WAC7B,QAAO,KAAK,WAAW,OAAO;CAEhC,IAAI,MAAM;AACV,MAAK,MAAM,KAAK,OAAQ,QAAO;AAC/B,QAAO;;AAIT,IAAI,OAAO,WAAW,mBAAmB,YACvC,QAAO,eAAe,YAAY,kBAAkB;CAClD,OAAO;CACP,UAAU;CACV,cAAc;CACf,CAAC"}