@crimson_dev/use-resize-observer 0.1.1

package/CHANGELOG.md

@@ -0,0 +1,52 @@
+# Changelog
+
+All notable changes to `@crimson_dev/use-resize-observer` will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.1] - 2026-03-06
+
+### Fixed
+- API reference page returning 404 on GitHub Pages (`docs/api/` was gitignored)
+- Pre-commit hook failing on non-processable file types (yml, md, gitignore)
+
+### Changed
+- GitHub Actions updated to latest versions: checkout v6, setup-node v6, upload-pages-artifact v4, github-script v8
+- VitePress theme enhanced with frosted-glass navigation, feature card hover effects, gradient hero text, animated entrance, custom scrollbar, and oklch color system
+
+## [0.1.0] - 2026-03-05
+
+### Added
+- `useResizeObserver` — primary React hook with shared observer pool
+- `useResizeObserverEntries` — multi-element observation hook
+- `createResizeObserver` — framework-agnostic imperative factory
+- `createResizeObservable` — EventTarget-based observable (`/core`)
+- `createServerResizeObserverMock` — SSR/RSC safe mock (`/server`)
+- `useResizeObserverWorker` — SharedArrayBuffer worker mode (`/worker`)
+- ResizeObserver polyfill shim (`/shim`)
+- `ResizeObserverContext` for dependency injection
+- `ObserverPool` — single shared ResizeObserver per document root
+- `RafScheduler` — requestAnimationFrame batching with `startTransition`
+- `FinalizationRegistry` for automatic GC cleanup of detached elements
+- ES2026 `using` / `Symbol.dispose` support on pool, scheduler, and factory
+- All 3 box models: `content-box`, `border-box`, `device-pixel-content-box`
+- TypeScript 6 strict configuration with `isolatedDeclarations`
+- ESM-only build via tsdown (Rolldown)
+- Biome 2.4.5 linting and formatting
+- Vitest 4 test infrastructure (72 unit tests)
+- Size-limit bundle size guards
+- VitePress 2 documentation site
+- GitHub Actions CI/CD pipeline
+- Changeset-based release pipeline
+- Performance benchmarks with tinybench
+
+### Architecture
+- Shared observer pool eliminates per-component ResizeObserver overhead
+- rAF + startTransition batching: 100 elements → 1 render cycle
+- WeakMap-based pool registry scoped per document/shadow root
+- Stable callback identity via ref pattern (React Compiler safe)
+- Worker mode: SharedArrayBuffer + Float16Array + Atomics for off-main-thread
+
+[0.1.1]: https://github.com/ABCrimson/use-resize-observer/releases/tag/v0.1.1
+[0.1.0]: https://github.com/ABCrimson/use-resize-observer/releases/tag/v0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Crimson Dev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,188 @@
+<div align="center">
+
+<br />
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ABCrimson/use-resize-observer/main/.github/assets/logo-dark.svg">
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ABCrimson/use-resize-observer/main/.github/assets/logo-light.svg">
+  <img alt="@crimson_dev/use-resize-observer" src="https://raw.githubusercontent.com/ABCrimson/use-resize-observer/main/.github/assets/logo-light.svg" width="480">
+</picture>
+
+<br />
+
+**Zero-dependency, Worker-native, ESNext-first React 19 ResizeObserver hook**
+
+<br />
+
+[![npm version][npm-badge]][npm-url]
+[![bundle size][size-badge]][size-url]
+[![CI][ci-badge]][ci-url]
+[![license][license-badge]][license-url]
+[![TypeScript][ts-badge]][ts-url]
+[![docs][docs-badge]][docs-url]
+
+[npm-badge]: https://img.shields.io/npm/v/@crimson_dev/use-resize-observer?style=flat-square&color=DC143C&labelColor=0D1117
+[npm-url]: https://npmjs.com/package/@crimson_dev/use-resize-observer
+[size-badge]: https://img.shields.io/bundlephobia/minzip/@crimson_dev/use-resize-observer?style=flat-square&color=DC143C&labelColor=0D1117&label=gzip
+[size-url]: https://bundlephobia.com/package/@crimson_dev/use-resize-observer
+[ci-badge]: https://img.shields.io/github/actions/workflow/status/ABCrimson/use-resize-observer/ci.yml?style=flat-square&labelColor=0D1117&label=CI
+[ci-url]: https://github.com/ABCrimson/use-resize-observer/actions/workflows/ci.yml
+[license-badge]: https://img.shields.io/npm/l/@crimson_dev/use-resize-observer?style=flat-square&color=DC143C&labelColor=0D1117
+[license-url]: https://github.com/ABCrimson/use-resize-observer/blob/main/LICENSE
+[ts-badge]: https://img.shields.io/badge/TypeScript-6.0-3178C6?style=flat-square&labelColor=0D1117
+[ts-url]: https://www.typescriptlang.org/
+[docs-badge]: https://img.shields.io/badge/docs-GitHub%20Pages-DC143C?style=flat-square&labelColor=0D1117
+[docs-url]: https://abcrimson.github.io/use-resize-observer/
+
+</div>
+
+---
+
+## Quick Start
+
+```bash
+npm install @crimson_dev/use-resize-observer
+```
+
+```tsx
+import { useResizeObserver } from '@crimson_dev/use-resize-observer';
+
+function ResponsiveCard() {
+  const { ref, width, height } = useResizeObserver<HTMLDivElement>();
+
+  return (
+    <div ref={ref}>
+      {width} × {height}
+    </div>
+  );
+}
+```
+
+## Why This Exists
+
+Most resize hooks create **one `ResizeObserver` per component**. At scale, that means hundreds of observers competing for the main thread. This library uses a **shared observer pool** — one `ResizeObserver` per document root — with `requestAnimationFrame` batching and React `startTransition` wrapping. The result: **100 elements resizing = 1 render cycle**.
+
+## Highlights
+
+<table>
+<tr><td>📦</td><td><strong>&lt; 1.1kB</strong> gzip &middot; zero dependencies</td></tr>
+<tr><td>⚡</td><td>Shared <code>ResizeObserver</code> pool &middot; rAF batching &middot; <code>startTransition</code></td></tr>
+<tr><td>🧵</td><td>Worker mode via <code>SharedArrayBuffer</code> + <code>Float16Array</code></td></tr>
+<tr><td>🎯</td><td>All 3 box models: <code>content-box</code>, <code>border-box</code>, <code>device-pixel-content-box</code></td></tr>
+<tr><td>🧹</td><td><code>FinalizationRegistry</code> for automatic GC cleanup</td></tr>
+<tr><td>🏗️</td><td>ES2026: <code>using</code> / <code>Symbol.dispose</code>, <code>Promise.try()</code></td></tr>
+<tr><td>⚛️</td><td>React 19.3+ &middot; React Compiler verified</td></tr>
+<tr><td>📝</td><td>TypeScript 6 strict &middot; <code>isolatedDeclarations</code></td></tr>
+<tr><td>🌐</td><td>SSR/RSC safe &middot; server entry with mock result</td></tr>
+</table>
+
+## Entry Points
+
+```typescript
+// Main — primary hook
+import { useResizeObserver } from '@crimson_dev/use-resize-observer';
+
+// Multi-element — observe N elements with 1 hook
+import { useResizeObserverEntries } from '@crimson_dev/use-resize-observer';
+
+// Factory — framework-agnostic, imperative API
+import { createResizeObserver } from '@crimson_dev/use-resize-observer';
+
+// Worker — off-main-thread via SharedArrayBuffer
+import { useResizeObserverWorker } from '@crimson_dev/use-resize-observer/worker';
+
+// Core — EventTarget-based, any framework
+import { createResizeObservable } from '@crimson_dev/use-resize-observer/core';
+
+// Server — SSR/RSC safe
+import { createServerResizeObserverMock } from '@crimson_dev/use-resize-observer/server';
+
+// Shim — polyfill for legacy browsers
+import '@crimson_dev/use-resize-observer/shim';
+```
+
+## API
+
+### `useResizeObserver<T>(options?)`
+
+```typescript
+const { ref, width, height, entry } = useResizeObserver<HTMLDivElement>({
+  box: 'content-box',        // 'content-box' | 'border-box' | 'device-pixel-content-box'
+  ref: externalRef,           // optional external ref
+  root: shadowRoot,           // optional Document | ShadowRoot
+  onResize: (entry) => {},    // stable callback (no useCallback needed)
+});
+```
+
+| Return | Type | Description |
+|--------|------|-------------|
+| `ref` | `RefObject<T \| null>` | Attach to the element to observe |
+| `width` | `number \| undefined` | Inline size of the observed box |
+| `height` | `number \| undefined` | Block size of the observed box |
+| `entry` | `ResizeObserverEntry \| undefined` | Raw entry from the observer |
+
+### `useResizeObserverEntries(refs, options?)`
+
+```typescript
+const entries = useResizeObserverEntries([ref1, ref2, ref3], {
+  box: 'border-box',
+});
+// entries: Map<Element, { width, height, entry }>
+```
+
+### `createResizeObserver(options?)`
+
+```typescript
+using observer = createResizeObserver({ box: 'border-box' });
+observer.observe(element, (entry) => console.log(entry));
+// Automatically cleaned up via Symbol.dispose
+```
+
+## Architecture
+
+```
+┌─────────────────────────────────────────────────┐
+│                  Your Components                 │
+│  useResizeObserver()  useResizeObserverEntries() │
+└──────────────────────┬──────────────────────────┘
+                       │
+              ┌────────▼────────┐
+              │   ObserverPool  │  1 per document root
+              │   (WeakMap)     │  FinalizationRegistry
+              └────────┬────────┘
+                       │
+              ┌────────▼────────┐
+              │  RafScheduler   │  Map<Element, FlushEntry>
+              │  last-write-wins│  requestAnimationFrame
+              └────────┬────────┘
+                       │
+              ┌────────▼────────┐
+              │ startTransition │  Non-urgent batched update
+              │   setState()    │  1 render per frame
+              └─────────────────┘
+```
+
+## Comparison
+
+| | `use-resize-observer@9` | `@crimson_dev/use-resize-observer` |
+|---|---|---|
+| Bundle | ~800B | **< 1.1kB** (pool + scheduler + hook) |
+| React | 16.8+ | **19.3+** with Compiler |
+| Module | CJS + ESM | **ESM only** |
+| TypeScript | 4.x | **6.0 strict** |
+| Observer model | 1 per component | **Shared pool** |
+| Worker mode | — | **SharedArrayBuffer** |
+| Box models | content-box only | **All 3** |
+| GC cleanup | Manual | **Automatic** |
+| Batching | None | **rAF + startTransition** |
+
+## Requirements
+
+- **Node** ≥ 25.0.0
+- **React** ≥ 19.3.0
+- **TypeScript** ≥ 6.0 (recommended)
+- **Browser** with native `ResizeObserver` (or use the `/shim` entry)
+
+## License
+
+[MIT](./LICENSE) — Crimson Dev

package/dist/core.d.ts

@@ -0,0 +1,38 @@
+
+import { r as ResizeObserverBoxOptions } from "./types-ASPFw2w_.js";
+
+//#region src/core.d.ts
+/** Detail payload for resize events dispatched by the observable. */
+interface ResizeEventDetail {
+  readonly width: number;
+  readonly height: number;
+  readonly entry: ResizeObserverEntry;
+}
+/** Custom event type for resize observations. */
+declare class ResizeEvent extends CustomEvent<ResizeEventDetail> {
+  constructor(detail: ResizeEventDetail);
+}
+/** Options for the framework-agnostic observable. */
+interface CreateResizeObservableOptions {
+  /** Which box model to report. @default 'content-box' */
+  box?: ResizeObserverBoxOptions;
+}
+/** Framework-agnostic resize observable with EventTarget-based dispatching. */
+interface ResizeObservable extends EventTarget, Disposable {
+  /** Stop observing and clean up resources. */
+  disconnect(): void;
+}
+/**
+* Create a framework-agnostic resize observable for an element.
+*
+* Wraps a `ResizeObserver` with `EventTarget` dispatching — consumers
+* subscribe via `addEventListener('resize', handler)`.
+*
+* @param target - The DOM element to observe.
+* @param options - Configuration options.
+* @returns A `ResizeObservable` with `addEventListener` and `disconnect`.
+*/
+declare const createResizeObservable: (target: Element, options?: CreateResizeObservableOptions) => ResizeObservable;
+//#endregion
+export { CreateResizeObservableOptions, ResizeEvent, ResizeEventDetail, ResizeObservable, createResizeObservable };
+//# sourceMappingURL=core.d.ts.map

package/dist/core.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"core.d.ts","names":[],"sources":["../src/core.ts"],"mappings":";;;;;UAoBiB,iBAAA;EAAA,SACN,KAAA;EAAA,SACA,MAAA;EAAA,SACA,KAAA,EAAO,mBAAA;AAAA;;cAIL,WAAA,SAAoB,WAAA,CAAY,iBAAA;EAC3C,WAAA,CAAY,MAAA,EAAQ,iBAAA;AAAA;;UAML,6BAAA;EAAA;EAEf,GAAA,GAAM,wBAAA;AAAA;;UAIS,gBAAA,SAAyB,WAAA,EAAa,UAAA;EAAtC;EAEf,UAAA;AAAA;;;;;;AA+BF;;;;;cAAa,sBAAA,GACX,MAAA,EAAQ,OAAA,EACR,OAAA,GAAS,6BAAA,KACR,gBAAA"}

package/dist/core.js

@@ -0,0 +1,58 @@
+'use client';
+//#region src/core.ts
+/** Custom event type for resize observations. */
+var ResizeEvent = class extends CustomEvent {
+	constructor(detail) {
+		super("resize", { detail });
+	}
+};
+/**
+* Extract the first size entry for the given box model.
+* @internal
+*/
+const extractBoxSize = (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];
+	}
+};
+/**
+* Create a framework-agnostic resize observable for an element.
+*
+* Wraps a `ResizeObserver` with `EventTarget` dispatching — consumers
+* subscribe via `addEventListener('resize', handler)`.
+*
+* @param target - The DOM element to observe.
+* @param options - Configuration options.
+* @returns A `ResizeObservable` with `addEventListener` and `disconnect`.
+*/
+const createResizeObservable = (target, options = {}) => {
+	const { box = "content-box" } = options;
+	const eventTarget = new EventTarget();
+	const observer = new ResizeObserver((entries) => {
+		for (const entry of entries) {
+			const sizeEntry = extractBoxSize(entry, box);
+			const detail = {
+				width: sizeEntry?.inlineSize ?? 0,
+				height: sizeEntry?.blockSize ?? 0,
+				entry
+			};
+			eventTarget.dispatchEvent(new ResizeEvent(detail));
+		}
+	});
+	observer.observe(target, { box });
+	const disconnect = () => {
+		observer.disconnect();
+	};
+	return Object.assign(eventTarget, {
+		disconnect,
+		[Symbol.dispose]() {
+			disconnect();
+		}
+	});
+};
+
+//#endregion
+export { ResizeEvent, createResizeObservable };
+//# sourceMappingURL=core.js.map

package/dist/core.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"core.js","names":[],"sources":["../src/core.ts"],"sourcesContent":["/**\n * Framework-agnostic core observable for ResizeObserver events.\n *\n * Uses the `EventTarget` API for zero-dependency event dispatching.\n * Can be adapted by any framework (React, Solid, Vue, Svelte, vanilla).\n *\n * Implements `Disposable` for ES2026 `using` declarations.\n *\n * @example\n * ```ts\n * using observable = createResizeObservable(element, { box: 'content-box' });\n * observable.addEventListener('resize', (e) => {\n *   console.log(e.detail.width, e.detail.height);\n * });\n * ```\n */\n\nimport type { ResizeObserverBoxOptions } from './types.js';\n\n/** Detail payload for resize events dispatched by the observable. */\nexport interface ResizeEventDetail {\n  readonly width: number;\n  readonly height: number;\n  readonly entry: ResizeObserverEntry;\n}\n\n/** Custom event type for resize observations. */\nexport class ResizeEvent extends CustomEvent<ResizeEventDetail> {\n  constructor(detail: ResizeEventDetail) {\n    super('resize', { detail });\n  }\n}\n\n/** Options for the framework-agnostic observable. */\nexport interface CreateResizeObservableOptions {\n  /** Which box model to report. @default 'content-box' */\n  box?: ResizeObserverBoxOptions;\n}\n\n/** Framework-agnostic resize observable with EventTarget-based dispatching. */\nexport interface ResizeObservable extends EventTarget, Disposable {\n  /** Stop observing and clean up resources. */\n  disconnect(): void;\n}\n\n/**\n * Extract the first size entry for the given box model.\n * @internal\n */\nconst extractBoxSize = (\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 * Create a framework-agnostic resize observable for an element.\n *\n * Wraps a `ResizeObserver` with `EventTarget` dispatching — consumers\n * subscribe via `addEventListener('resize', handler)`.\n *\n * @param target - The DOM element to observe.\n * @param options - Configuration options.\n * @returns A `ResizeObservable` with `addEventListener` and `disconnect`.\n */\nexport const createResizeObservable = (\n  target: Element,\n  options: CreateResizeObservableOptions = {},\n): ResizeObservable => {\n  const { box = 'content-box' } = options;\n  const eventTarget = new EventTarget();\n\n  const observer = new ResizeObserver((entries) => {\n    for (const entry of entries) {\n      const sizeEntry = extractBoxSize(entry, box);\n\n      const detail: ResizeEventDetail = {\n        width: sizeEntry?.inlineSize ?? 0,\n        height: sizeEntry?.blockSize ?? 0,\n        entry,\n      };\n\n      eventTarget.dispatchEvent(new ResizeEvent(detail));\n    }\n  });\n\n  observer.observe(target, { box });\n\n  const disconnect = (): void => {\n    observer.disconnect();\n  };\n\n  return Object.assign(eventTarget, {\n    disconnect,\n    [Symbol.dispose](): void {\n      disconnect();\n    },\n  });\n};\n"],"mappings":";;;AA2BA,IAAa,cAAb,cAAiC,YAA+B;CAC9D,YAAY,QAA2B;AACrC,QAAM,UAAU,EAAE,QAAQ,CAAC;;;;;;;AAoB/B,MAAM,kBACJ,OACA,QACmC;AACnC,SAAQ,KAAR;EACE,KAAK,aACH,QAAO,MAAM,cAAc;EAC7B,KAAK,2BACH,SAAQ,MAAM,6BAA6B,MAAM,gBAAgB;EACnE,QACE,QAAO,MAAM,eAAe;;;;;;;;;;;;;AAclC,MAAa,0BACX,QACA,UAAyC,EAAE,KACtB;CACrB,MAAM,EAAE,MAAM,kBAAkB;CAChC,MAAM,cAAc,IAAI,aAAa;CAErC,MAAM,WAAW,IAAI,gBAAgB,YAAY;AAC/C,OAAK,MAAM,SAAS,SAAS;GAC3B,MAAM,YAAY,eAAe,OAAO,IAAI;GAE5C,MAAM,SAA4B;IAChC,OAAO,WAAW,cAAc;IAChC,QAAQ,WAAW,aAAa;IAChC;IACD;AAED,eAAY,cAAc,IAAI,YAAY,OAAO,CAAC;;GAEpD;AAEF,UAAS,QAAQ,QAAQ,EAAE,KAAK,CAAC;CAEjC,MAAM,mBAAyB;AAC7B,WAAS,YAAY;;AAGvB,QAAO,OAAO,OAAO,aAAa;EAChC;EACA,CAAC,OAAO,WAAiB;AACvB,eAAY;;EAEf,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,99 @@
+
+import { a as UseResizeObserverOptions, i as ResizeObserverFactory, n as ResizeCallback, o as UseResizeObserverResult, r as ResizeObserverBoxOptions, t as CreateResizeObserverOptions } from "./types-ASPFw2w_.js";
+import React, { RefObject } from "react";
+
+//#region src/context.d.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>
+* ```
+*/
+declare const ResizeObserverContext: React.Context<typeof ResizeObserver | null>;
+//#endregion
+//#region src/factory.d.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);
+* });
+* ```
+*/
+declare const createResizeObserver: (options?: CreateResizeObserverOptions) => ResizeObserverFactory & Disposable;
+//#endregion
+//#region src/hook.d.ts
+/**
+* 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>;
+* ```
+*/
+declare const useResizeObserver: <T extends Element = Element>(options?: UseResizeObserverOptions<T>) => UseResizeObserverResult<T>;
+//#endregion
+//#region src/hook-multi.d.ts
+/** Entry data for a single observed element in the multi-element hook. */
+interface ResizeEntry {
+  readonly width: number;
+  readonly height: number;
+  readonly entry: ResizeObserverEntry;
+}
+/** Options for `useResizeObserverEntries`. */
+interface UseResizeObserverEntriesOptions {
+  /** Which box model to report. @default 'content-box' */
+  box?: ResizeObserverBoxOptions;
+  /** Document or ShadowRoot scoping the pool. @default document */
+  root?: Document | ShadowRoot;
+}
+/**
+* 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]);
+* ```
+*/
+declare const useResizeObserverEntries: (refs: ReadonlyArray<RefObject<Element | null>>, options?: UseResizeObserverEntriesOptions) => Map<Element, ResizeEntry>;
+//#endregion
+export { type CreateResizeObserverOptions, type ResizeCallback, type ResizeEntry, type ResizeObserverBoxOptions, ResizeObserverContext, type ResizeObserverFactory, type UseResizeObserverEntriesOptions, type UseResizeObserverOptions, type UseResizeObserverResult, createResizeObserver, useResizeObserver, useResizeObserverEntries };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/context.ts","../src/factory.ts","../src/hook.ts","../src/hook-multi.ts"],"mappings":";;;;;;;;AAqBA;;;;;;;;;;;;ACIA;cDJa,qBAAA,EAAuB,KAAA,CAAM,OAAA,QAAe,cAAA;;;;;;AAAzD;;;;;;;;;;;;ACIA;;;cAAa,oBAAA,GACX,OAAA,GAAS,2BAAA,KACR,qBAAA,GAAwB,UAAA;;;;;;ADN3B;;;;;;;;;;;;ACIA;;;;cC+Ba,iBAAA,aAA+B,OAAA,GAAU,OAAA,EACpD,OAAA,GAAS,wBAAA,CAAyB,CAAA,MACjC,uBAAA,CAAwB,CAAA;;;;UCjDV,WAAA;EAAA,SACN,KAAA;EAAA,SACA,MAAA;EAAA,SACA,KAAA,EAAO,mBAAA;AAAA;;UAID,+BAAA;;EAEf,GAAA,GAAM,wBAAA;EHGiD;EGDvD,IAAA,GAAO,QAAA,GAAW,UAAA;AAAA;;AFKpB;;;;;;;;;;;;;;cE+Ba,wBAAA,GACX,IAAA,EAAM,aAAA,CAAc,SAAA,CAAU,OAAA,WAC9B,OAAA,GAAS,+BAAA,KACR,GAAA,CAAI,OAAA,EAAS,WAAA"}