@venizia/ardor-react 0.4.8-1 → 0.4.8-11

package/README.md

@@ -4,9 +4,11 @@ The React bindings of [ARDOR](https://github.com/VENIZIA-AI/ardor): the applicat
 hooks that resolve out of it, and the UI hooks. No react-admin.
 
 ```bash
-bun add @venizia/ardor-react @venizia/ardor-kernel @venizia/ignis-inversion @venizia/ignis-filter @venizia/ignis-kernel @venizia/ignis-helpers reflect-metadata
+bun add @venizia/ardor-react @venizia/ardor-kernel @venizia/ignis-inversion @venizia/ignis-filter @venizia/ignis-kernel @venizia/ignis-helpers reflect-metadata react react-redux
 ```
 
+`@reduxjs/toolkit` is an optional peer: only the types of `DispatchHooks` use it.
+
 Most applications install [`@venizia/ardor`](https://www.npmjs.com/package/@venizia/ardor) instead,
 which re-exports this package.
 
@@ -15,15 +17,14 @@ which re-exports this package.
 | Area | Exports |
 |---|---|
 | Context | `ApplicationContext`, `useApplicationContext`, `useApplicationLogger` |
-| Injection | `useInjectable` - resolve a binding by key or by class |
+| Injection | `useInjectable` - resolve a binding by key or by class; the artifact hooks `useApplicationContainer`, `useService`, `useProvider`, `useComponent`, `useConfiguration`, `useRepository` |
 | Redux | `DispatchHooks.create`, `SelectorHooks.create` - factories that bind your `RootState` and `AppDispatch` (the old `createAppDispatch` and `createAppSelectors` are removed; `bun run ardor codemod namespace` moves your code) |
-| UI hooks | `useDebounce`, `useAutosave`, `useConfirm`, `useBeforeUnload`, `useCopyToClipboard`, `useWindowDimensions` |
+| UI hooks | `useDebounce`, `useAutosave`, `useConfirm`, `useBeforeUnload`, `useCopyToClipboard`, `useWindowDimensions`, `useElementSize`, `useResizeEffect`, `useIntersection`, `useStoredState`, `useMediaQuery`, `useDocumentVisibility`, `useOnlineStatus` |
 | Types | `TUseInjectableKeys` |
 
 ## Typing your own binding keys
 
-`IUseInjectableKeysOverrides` is declared here, so augment this package - an interface merges only
-into the module that declares it, never through a re-export:
+`IUseInjectableKeysOverrides` is declared here, so augment this package when it is the one you depend on:
 
 ```typescript
 declare module '@venizia/ardor-react' {
@@ -33,6 +34,8 @@ declare module '@venizia/ardor-react' {
 }
 ```
 
+With `@venizia/ardor`, write `declare module '@venizia/ardor'` instead.
+
 ## License
 
 MIT - see [LICENSE.md](./LICENSE.md).

package/dist/contexts/application.d.ts

@@ -1,9 +1,13 @@
 import React from 'react';
 import type { Container } from '@venizia/ignis-inversion';
 import type { ILogger } from '@venizia/ignis-helpers/core';
+/** What `ApplicationContext` carries; both are `null` outside a provider. */
 export interface IApplicationContextValue {
+    /** The application's container. */
     container: Container | null;
+    /** The application's logger. */
     logger: ILogger | null;
 }
+/** Read through `useApplicationContext` and `useApplicationLogger`; the default value holds `null`s. */
 export declare const ApplicationContext: React.Context<IApplicationContextValue>;
 //# sourceMappingURL=application.d.ts.map

package/dist/contexts/application.js

@@ -1,4 +1,5 @@
 import React from 'react';
+/** Read through `useApplicationContext` and `useApplicationLogger`; the default value holds `null`s. */
 export const ApplicationContext = React.createContext({
     container: null,
     logger: null,

package/dist/hooks/redux/use-app-dispatch.d.ts

@@ -1,6 +1,10 @@
 import type { Dispatch, UnknownAction } from '@reduxjs/toolkit';
+/** Builds the typed dispatch hooks of a store. */
 export declare class DispatchHooks {
-    /** The typed dispatch hooks of a store: bind your `AppDispatch` once, and export what comes back. */
+    /**
+     * The typed dispatch hooks of a store: bind your `AppDispatch` once, and export what comes back.
+     * `useMultipleAppDispatch` returns a function that dispatches each action in order and skips falsy ones.
+     */
     static create<TDispatch extends Dispatch<UnknownAction> = Dispatch<UnknownAction>>(): {
         useAppDispatch: import("react-redux").UseDispatch<TDispatch>;
         useMultipleAppDispatch: () => (...actions: Parameters<TDispatch>[0][]) => void;

package/dist/hooks/redux/use-app-dispatch.js

@@ -1,7 +1,11 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
+/** Builds the typed dispatch hooks of a store. */
 export class DispatchHooks {
-    /** The typed dispatch hooks of a store: bind your `AppDispatch` once, and export what comes back. */
+    /**
+     * The typed dispatch hooks of a store: bind your `AppDispatch` once, and export what comes back.
+     * `useMultipleAppDispatch` returns a function that dispatches each action in order and skips falsy ones.
+     */
     static create() {
         const useAppDispatch = useDispatch.withTypes();
         const useMultipleAppDispatch = () => {

package/dist/hooks/redux/use-app-selector.d.ts

@@ -1,3 +1,4 @@
+/** Builds the typed selector hooks of a Redux store. */
 export declare class SelectorHooks {
     /** The three typed selector hooks of a store: bind your `RootState` once, and export what comes back. */
     static create<TState>(): {

package/dist/hooks/redux/use-app-selector.js

@@ -25,6 +25,7 @@ const deepEqual = (a, b) => {
             return Object.hasOwn(b, key) && deepEqual(Reflect.get(a, key), Reflect.get(b, key));
         }));
 };
+/** Builds the typed selector hooks of a Redux store. */
 export class SelectorHooks {
     /** The three typed selector hooks of a store: bind your `RootState` once, and export what comes back. */
     static create() {

package/dist/hooks/resize-observation.d.ts

@@ -2,9 +2,11 @@
 export type TResizeBox = Exclude<ResizeObserverBoxOptions, 'device-pixel-content-box'>;
 export interface IResizeObservationOptions {
     box: TResizeBox;
-    /** Also observe the direct children of each target, and again whenever they change. */
+    /** Also observe the direct children of each target, and again whenever they change. @default false */
     children?: boolean;
-    /** Called at most once per animation frame, with the latest entry of each element that resized. */
+    /** Call `onFrame` inside the `ResizeObserver` callback, after layout and before paint, instead of on the next animation frame. */
+    beforePaint?: boolean;
+    /** Called with the latest entry of each element that resized: at most once per animation frame, or once per observer callback with `beforePaint`. */
     onFrame: (entries: ResizeObserverEntry[]) => void;
 }
 export interface IResizeObservation {

package/dist/hooks/resize-observation.js

@@ -1,7 +1,7 @@
 export class ResizeObservation {
     /** Does nothing without `ResizeObserver`. */
     static observe(opts) {
-        const { box, children = false, onFrame } = opts;
+        const { box, children = false, beforePaint = false, onFrame } = opts;
         if (typeof ResizeObserver === 'undefined') {
             return { sync: () => { }, stop: () => { } };
         }
@@ -9,24 +9,37 @@ export class ResizeObservation {
         let watched = new Set();
         let current = [];
         let frame;
-        const observer = new ResizeObserver((entries) => {
+        const flush = () => {
+            const batch = [...latest.values()];
+            latest.clear();
+            if (batch.length > 0) {
+                onFrame(batch);
+            }
+        };
+        let observer;
+        const onEntries = (entries) => {
             for (const entry of entries) {
                 latest.set(entry.target, entry);
             }
+            if (beforePaint) {
+                flush();
+                return;
+            }
             if (frame !== undefined) {
                 return;
             }
             frame = requestAnimationFrame(() => {
                 frame = undefined;
-                const batch = [...latest.values()];
-                latest.clear();
-                if (batch.length > 0) {
-                    onFrame(batch);
-                }
+                flush();
             });
-        });
+        };
         const update = (targets) => {
             const wanted = new Set(children ? targets.flatMap((target) => [target, ...target.children]) : targets);
+            // No target and no observer yet: there is nothing to watch, so none is made.
+            if (!observer && wanted.size === 0) {
+                return;
+            }
+            observer ??= new ResizeObserver(onEntries);
             for (const element of watched) {
                 if (!wanted.has(element)) {
                     observer.unobserve(element);
@@ -40,7 +53,7 @@ export class ResizeObservation {
             }
             watched = wanted;
         };
-        const mutations = children ? new MutationObserver(() => update(current)) : undefined;
+        let mutations;
         return {
             sync: (targets) => {
                 if (targets.length === current.length &&
@@ -50,13 +63,16 @@ export class ResizeObservation {
                 current = targets;
                 update(targets);
                 // A removed target stays registered on `mutations` until `stop`; its callback only updates the current targets.
-                for (const target of targets) {
-                    mutations?.observe(target, { childList: true });
+                if (children && targets.length > 0) {
+                    mutations ??= new MutationObserver(() => update(current));
+                    for (const target of targets) {
+                        mutations.observe(target, { childList: true });
+                    }
                 }
             },
             stop: () => {
                 mutations?.disconnect();
-                observer.disconnect();
+                observer?.disconnect();
                 if (frame !== undefined) {
                     cancelAnimationFrame(frame);
                 }

package/dist/hooks/use-application-context.d.ts

@@ -1,3 +1,5 @@
+/** The application's `Container`. Throws when there is no `ApplicationContext` provider above. */
 export declare const useApplicationContext: () => import("@venizia/ignis-inversion").Container;
+/** The application's logger. Throws when there is no `ApplicationContext` provider above. */
 export declare const useApplicationLogger: () => import("@venizia/ignis-helpers/core").ILogger;
 //# sourceMappingURL=use-application-context.d.ts.map

package/dist/hooks/use-application-context.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { getError } from '@venizia/ignis-inversion';
 import { ApplicationContext } from '../contexts/application.js';
+/** The application's `Container`. Throws when there is no `ApplicationContext` provider above. */
 export const useApplicationContext = () => {
     const context = React.useContext(ApplicationContext);
     if (!context?.container) {
@@ -10,6 +11,7 @@ export const useApplicationContext = () => {
     }
     return context.container;
 };
+/** The application's logger. Throws when there is no `ApplicationContext` provider above. */
 export const useApplicationLogger = () => {
     const context = React.useContext(ApplicationContext);
     if (!context?.logger) {

package/dist/hooks/use-artifact.d.ts

@@ -2,19 +2,45 @@ import { type Container, type TClass } from '@venizia/ignis-inversion';
 import { type TUseInjectableKeys } from './use-injectable.js';
 /** By class: the return type is inferred from the target. */
 export interface IUseArtifactByTarget<TInstance> {
+    /** The container to resolve from. @default The application's container (`ApplicationContext`) */
     container?: Container;
+    /** The class to resolve; its recorded binding key is used. */
     target: TClass<TInstance>;
     key?: never;
 }
 /** By key: the caller supplies the type. */
 export interface IUseArtifactByKey {
+    /** The container to resolve from. @default The application's container (`ApplicationContext`) */
     container?: Container;
+    /** The binding key to resolve. */
     key: TUseInjectableKeys;
     target?: never;
 }
+/** Resolves the instance bound under the `service` namespace by `target` or `key`. A `target` bound under another namespace throws. */
 export declare const useService: <TInstance = unknown>(opts: IUseArtifactByTarget<TInstance> | IUseArtifactByKey) => TInstance;
+/** Resolves the instance bound under the `provider` namespace by `target` or `key`. A `target` bound under another namespace throws. */
 export declare const useProvider: <TInstance = unknown>(opts: IUseArtifactByTarget<TInstance> | IUseArtifactByKey) => TInstance;
+/** Resolves the instance bound under the `component` namespace by `target` or `key`. A `target` bound under another namespace throws. */
 export declare const useComponent: <TInstance = unknown>(opts: IUseArtifactByTarget<TInstance> | IUseArtifactByKey) => TInstance;
+/** Resolves the instance bound under the `configuration` namespace by `target` or `key`. A `target` bound under another namespace throws. */
 export declare const useConfiguration: <TInstance = unknown>(opts: IUseArtifactByTarget<TInstance> | IUseArtifactByKey) => TInstance;
+/**
+ * Resolves the instance bound under the `repository` namespace by `target` or `key`. A `target` bound under another namespace throws.
+ *
+ * @example
+ * ```tsx
+ * import { repository, useRepository } from '@venizia/ardor';
+ *
+ * @repository()
+ * class ProductRepository {
+ *   findStock(productId: string) { return productId ? 42 : 0; }
+ * }
+ *
+ * export function StockDisplay() {
+ *   const productRepository = useRepository({ target: ProductRepository });
+ *   return <span>Stock: {productRepository.findStock('p1')}</span>;
+ * }
+ * ```
+ */
 export declare const useRepository: <TInstance = unknown>(opts: IUseArtifactByTarget<TInstance> | IUseArtifactByKey) => TInstance;
 //# sourceMappingURL=use-artifact.d.ts.map

package/dist/hooks/use-artifact.js

@@ -22,26 +22,48 @@ const useArtifactInNamespace = (opts) => {
     }
     return useInjectable(options);
 };
+/** Resolves the instance bound under the `service` namespace by `target` or `key`. A `target` bound under another namespace throws. */
 export const useService = (opts) => useArtifactInNamespace({
     options: opts,
     namespace: BindingNamespaces.SERVICE,
     hook: 'useService',
 });
+/** Resolves the instance bound under the `provider` namespace by `target` or `key`. A `target` bound under another namespace throws. */
 export const useProvider = (opts) => useArtifactInNamespace({
     options: opts,
     namespace: BindingNamespaces.PROVIDER,
     hook: 'useProvider',
 });
+/** Resolves the instance bound under the `component` namespace by `target` or `key`. A `target` bound under another namespace throws. */
 export const useComponent = (opts) => useArtifactInNamespace({
     options: opts,
     namespace: BindingNamespaces.COMPONENT,
     hook: 'useComponent',
 });
+/** Resolves the instance bound under the `configuration` namespace by `target` or `key`. A `target` bound under another namespace throws. */
 export const useConfiguration = (opts) => useArtifactInNamespace({
     options: opts,
     namespace: BindingNamespaces.CONFIGURATION,
     hook: 'useConfiguration',
 });
+/**
+ * Resolves the instance bound under the `repository` namespace by `target` or `key`. A `target` bound under another namespace throws.
+ *
+ * @example
+ * ```tsx
+ * import { repository, useRepository } from '@venizia/ardor';
+ *
+ * @repository()
+ * class ProductRepository {
+ *   findStock(productId: string) { return productId ? 42 : 0; }
+ * }
+ *
+ * export function StockDisplay() {
+ *   const productRepository = useRepository({ target: ProductRepository });
+ *   return <span>Stock: {productRepository.findStock('p1')}</span>;
+ * }
+ * ```
+ */
 export const useRepository = (opts) => useArtifactInNamespace({
     options: opts,
     namespace: BindingNamespaces.REPOSITORY,

package/dist/hooks/use-autosave.d.ts

@@ -1,11 +1,19 @@
+/** What `useAutosave` saves, through which callback, and when. */
 export interface IUseAutosaveOptions<TData, TReturn> {
+    /** The value to save; a change starts the `interval` wait. */
     data: TData;
+    /** Called with the latest `data` once it has been still for `interval`. A rejection is logged, not thrown. */
     onSave: (data: TData) => Promise<TReturn> | TReturn | void;
     /** @default 2000 */
     interval?: number;
+    /** Save the latest `data` on unmount. */
     enableSaveOnUnmount?: boolean;
     /** @default true */
     enabled?: boolean;
 }
+/**
+ * Calls `onSave` with `data` after it has stopped changing for `interval` milliseconds. The first
+ * render does not save. The latest `onSave` is always the one called.
+ */
 export declare const useAutosave: <TData, TReturn>(opts: IUseAutosaveOptions<TData, TReturn>) => void;
 //# sourceMappingURL=use-autosave.d.ts.map

package/dist/hooks/use-autosave.js

@@ -2,6 +2,10 @@ import React from 'react';
 import { LoggerFactory } from '@venizia/ignis-helpers/core';
 import { useDebounce } from './use-debounce.js';
 const logger = LoggerFactory.getLogger(['useAutosave']);
+/**
+ * Calls `onSave` with `data` after it has stopped changing for `interval` milliseconds. The first
+ * render does not save. The latest `onSave` is always the one called.
+ */
 export const useAutosave = (opts) => {
     const { data, onSave, interval = 2000, enableSaveOnUnmount, enabled = true } = opts;
     const valueOnCleanup = React.useRef(data);

package/dist/hooks/use-before-unload.d.ts

@@ -1,7 +1,10 @@
+/** When `useBeforeUnload` asks, and the text it sets. */
 export interface IUseBeforeUnloadOptions {
     /** @default true */
     enabled?: boolean;
+    /** Set as the `returnValue` of the event; browsers may show their own text instead. */
     message?: string;
 }
+/** While `enabled`, asks the browser to confirm before the page is left or reloaded. */
 export declare const useBeforeUnload: (opts: IUseBeforeUnloadOptions) => void;
 //# sourceMappingURL=use-before-unload.d.ts.map

package/dist/hooks/use-before-unload.js

@@ -1,4 +1,5 @@
 import React from 'react';
+/** While `enabled`, asks the browser to confirm before the page is left or reloaded. */
 export const useBeforeUnload = (opts) => {
     const { enabled = true, message } = opts;
     const handleBeforeUnload = React.useCallback((event) => {

package/dist/hooks/use-confirm.d.ts

@@ -1,11 +1,18 @@
+/** The state of one confirmation prompt, and the handlers that settle it. */
 export interface IUseConfirmReturn {
+    /** The pending prompt text; `undefined` when none is open. */
     message?: string;
+    /** Opens a prompt. Resolves `true` on `handleConfirm`, `false` on `handleAbort` or when another `confirm` replaces it. */
     confirm: (opts: {
         message: string;
     }) => Promise<boolean>;
+    /** Closes the prompt without settling it. */
     handleClose: () => void;
+    /** Resolves the pending `confirm` with `true` and closes. */
     handleConfirm: () => void;
+    /** Resolves the pending `confirm` with `false` and closes. */
     handleAbort: () => void;
 }
+/** State for a confirmation prompt: `confirm` returns a promise that the prompt's buttons settle. */
 export declare const useConfirm: () => IUseConfirmReturn;
 //# sourceMappingURL=use-confirm.d.ts.map

package/dist/hooks/use-confirm.js

@@ -1,4 +1,5 @@
 import React from 'react';
+/** State for a confirmation prompt: `confirm` returns a promise that the prompt's buttons settle. */
 export const useConfirm = () => {
     const settle = React.useRef(undefined);
     const [message, setMessage] = React.useState();

package/dist/hooks/use-copy-to-clipboard.d.ts

@@ -1,7 +1,9 @@
+/** How long `useCopyToClipboard` keeps `isCopied` set. */
 export interface IUseCopyToClipboardOptions {
     /** Set `isCopied` back to `false` this many milliseconds after a copy; 0 or less never resets. @default 0 */
     resetMs?: number;
 }
+/** The copy function of `useCopyToClipboard` and the result of its last call. */
 export interface IUseCopyToClipboardReturn {
     /** Resolves `true` when the text is on the clipboard and `false` otherwise, and never throws. */
     copy: (opts: {
@@ -10,5 +12,18 @@ export interface IUseCopyToClipboardReturn {
     /** The result of the last copy, until `resetMs` has passed. */
     isCopied: boolean;
 }
+/**
+ * Copies text with `BrowserClipboard`; `isCopied` is the result of the last copy.
+ *
+ * @example
+ * ```tsx
+ * import { useCopyToClipboard } from '@venizia/ardor';
+ *
+ * export function CopyButton() {
+ *   const { copy, isCopied } = useCopyToClipboard({ resetMs: 2000 });
+ *   return <button onClick={() => copy({ value: 'hello' })}>{isCopied ? 'Copied' : 'Copy'}</button>;
+ * }
+ * ```
+ */
 export declare const useCopyToClipboard: (opts?: IUseCopyToClipboardOptions) => IUseCopyToClipboardReturn;
 //# sourceMappingURL=use-copy-to-clipboard.d.ts.map

package/dist/hooks/use-copy-to-clipboard.js

@@ -10,6 +10,19 @@ const copyToClipboard = async (opts) => {
     }
     return isCopied;
 };
+/**
+ * Copies text with `BrowserClipboard`; `isCopied` is the result of the last copy.
+ *
+ * @example
+ * ```tsx
+ * import { useCopyToClipboard } from '@venizia/ardor';
+ *
+ * export function CopyButton() {
+ *   const { copy, isCopied } = useCopyToClipboard({ resetMs: 2000 });
+ *   return <button onClick={() => copy({ value: 'hello' })}>{isCopied ? 'Copied' : 'Copy'}</button>;
+ * }
+ * ```
+ */
 export const useCopyToClipboard = (opts = {}) => {
     const { resetMs = 0 } = opts;
     const [isCopied, setCopied] = React.useState(false);

package/dist/hooks/use-debounce.d.ts

@@ -1,11 +1,17 @@
+/** The value `useDebounce` follows, how long it waits, and when it runs. */
 export interface IUseDebounceOptions<TValue> {
+    /** The value to follow; the output changes once it has been still for `delay`. */
     value: TValue;
+    /** Milliseconds to wait after the last change. @default 500 */
     delay?: number;
     /** @default true */
     enabled?: boolean;
 }
+/** The settled value of `useDebounce`. */
 export interface IUseDebounceReturn<TValue> {
+    /** The last `value` that stayed unchanged for `delay`; the first `value` until then. */
     debouncedValue: TValue;
 }
+/** Follows `value` after it has stopped changing for `delay`. Outside a browser, or when not `enabled`, it never updates. */
 export declare const useDebounce: <TValue>(opts: IUseDebounceOptions<TValue>) => IUseDebounceReturn<TValue>;
 //# sourceMappingURL=use-debounce.d.ts.map

package/dist/hooks/use-debounce.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { App, BrowserUtility } from '@venizia/ardor-kernel';
+/** Follows `value` after it has stopped changing for `delay`. Outside a browser, or when not `enabled`, it never updates. */
 export const useDebounce = (opts) => {
     const { value, delay, enabled = true } = opts;
     const [debouncedValue, setDebouncedValue] = React.useState(value);

package/dist/hooks/use-element-size.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type TResizeBox } from './resize-observation.js';
+/** Which element `useElementSize` measures, which box it reads, and how it rounds. */
 export interface IUseElementSizeOptions {
     /** The element to measure. Leave it out to measure the element the returned `ref` is given to. */
     ref?: React.RefObject<Element | null>;
@@ -8,13 +9,16 @@ export interface IUseElementSizeOptions {
     /** Round width and height to whole pixels, so a fractional size does not render again. @default false */
     round?: boolean;
 }
+/** The size `useElementSize` read, in CSS pixels. */
 export interface IUseElementSizeReturn {
     width: number;
     height: number;
     /** `false` until the first size is read, so 0 by 0 can be told from a measured empty element. */
     measured: boolean;
 }
+/** The size of `useElementSize` called without a `ref` option, with the ref to give an element. */
 export interface IUseElementSizeRefReturn extends IUseElementSizeReturn {
+    /** Give it to the element to measure. */
     ref: React.RefCallback<Element>;
 }
 /**
@@ -24,6 +28,16 @@ export interface IUseElementSizeRefReturn extends IUseElementSizeReturn {
  * is read when the effect runs, so it follows a new `ref`, `box` or `round`, not a `ref.current`
  * that is replaced later; pass a stable `ref`. A new element, `box` or `round` starts again from
  * 0 by 0 with `measured` false.
+ *
+ * @example
+ * ```tsx
+ * import { useElementSize } from '@venizia/ardor';
+ *
+ * export function Panel() {
+ *   const { ref, width, height, measured } = useElementSize();
+ *   return <div ref={ref}>{measured ? `${width} x ${height}` : '...'}</div>;
+ * }
+ * ```
  */
 export declare function useElementSize(opts: IUseElementSizeOptions & {
     ref: React.RefObject<Element | null>;

package/dist/hooks/use-injectable.d.ts

@@ -1,14 +1,31 @@
 import { type Container, type TClass } from '@venizia/ignis-inversion';
 import type { CoreBindings, ValueOf } from '@venizia/ardor-kernel';
+/** Declaration-merge string keys into this interface to make them valid `key` values of the injectable hooks. */
 export interface IUseInjectableKeysOverrides {
 }
+/** The binding keys the kernel defines (the string values of `CoreBindings`). */
 export type TUseInjectableKeysDefault = Extract<ValueOf<typeof CoreBindings>, string>;
+/** A key the injectable hooks accept: a kernel binding key or one added to `IUseInjectableKeysOverrides`. */
 export type TUseInjectableKeys = TUseInjectableKeysDefault | keyof IUseInjectableKeysOverrides;
+/**
+ * Resolve by `key` or by `target` class, never both.
+ *
+ * @example
+ * ```ts
+ * import { CoreBindings, type TUseInjectableOptions } from '@venizia/ardor';
+ *
+ * const byKey: TUseInjectableOptions = { key: CoreBindings.DEFAULT_REST_DATA_PROVIDER };
+ * class Greeter {}
+ * const byTarget: TUseInjectableOptions = { target: Greeter };
+ * ```
+ */
 export type TUseInjectableOptions = {
+    /** The container to resolve from. @default The application's container (`ApplicationContext`) */
     container?: Container;
     key: TUseInjectableKeys;
     target?: never;
 } | {
+    /** The container to resolve from. @default The application's container (`ApplicationContext`) */
     container?: Container;
     key?: never;
     target: TClass<unknown>;
@@ -16,9 +33,23 @@ export type TUseInjectableOptions = {
 /**
  * The container an injectable hook resolves from: the one passed in, else the application's. Shared,
  * so a hook never checks one container and resolves from another.
+ *
+ * @example
+ * ```tsx
+ * import { CoreBindings, useApplicationContainer } from '@venizia/ardor';
+ *
+ * export function BindingCheck() {
+ *   const container = useApplicationContainer();
+ *   return <span>{container.isBound({ key: CoreBindings.DEFAULT_REST_DATA_PROVIDER }) ? 'bound' : 'unbound'}</span>;
+ * }
+ * ```
  */
 export declare const useApplicationContainer: (opts?: {
     container?: Container;
 }) => Container;
+/**
+ * Resolves an instance from the container by `key` or by `target` class. Throws when the key is not
+ * bound, when the class has no recorded binding key, or when neither `key` nor `target` is given.
+ */
 export declare const useInjectable: <TInstance>(opts: TUseInjectableOptions) => TInstance;
 //# sourceMappingURL=use-injectable.d.ts.map

package/dist/hooks/use-injectable.js

@@ -4,6 +4,16 @@ import { ApplicationContext } from '../contexts/application.js';
 /**
  * The container an injectable hook resolves from: the one passed in, else the application's. Shared,
  * so a hook never checks one container and resolves from another.
+ *
+ * @example
+ * ```tsx
+ * import { CoreBindings, useApplicationContainer } from '@venizia/ardor';
+ *
+ * export function BindingCheck() {
+ *   const container = useApplicationContainer();
+ *   return <span>{container.isBound({ key: CoreBindings.DEFAULT_REST_DATA_PROVIDER }) ? 'bound' : 'unbound'}</span>;
+ * }
+ * ```
  */
 export const useApplicationContainer = (opts) => {
     const applicationContext = React.useContext(ApplicationContext);
@@ -15,6 +25,10 @@ export const useApplicationContainer = (opts) => {
     }
     return container;
 };
+/**
+ * Resolves an instance from the container by `key` or by `target` class. Throws when the key is not
+ * bound, when the class has no recorded binding key, or when neither `key` nor `target` is given.
+ */
 export const useInjectable = (opts) => {
     const container = useApplicationContainer({ container: opts?.container });
     const { key, target } = opts;

package/dist/hooks/use-intersection.d.ts

@@ -1,16 +1,45 @@
 import { type TElementTarget } from './element-target.js';
+/** The element or elements `useIntersection` watches, against which root, and when it delivers an entry. */
 export interface IUseIntersectionOptions {
-    /** Read after every render: an element, a ref to one, or `null`. */
-    target: TElementTarget;
+    /** Read after every render: an element, a ref to one, or `null`; or a list of them to watch several. */
+    target: TElementTarget | TElementTarget[];
+    /**
+     * The scrolling container the target is measured against. A ref is read after every render, and nothing is
+     * observed while its `current` is `null`. A literal `null`, or leaving it out, is the viewport.
+     */
+    root?: TElementTarget;
     /** @default '0px' */
     rootMargin?: string;
-    /** The ratio of the element in view at which an entry is delivered. @default 0 */
-    threshold?: number;
+    /** The ratio of the element in view at which an entry is delivered; a number or a list of them. @default 0 */
+    threshold?: number | number[];
 }
+type TEntry = IntersectionObserverEntry | undefined;
 /**
- * The latest `IntersectionObserverEntry` of the target, or `undefined` before the first one and
- * where there is no `IntersectionObserver`. The state changes only when `isIntersecting` or the
- * ratio changed. A new element, `rootMargin` or `threshold` starts again from `undefined`.
+ * The latest `IntersectionObserverEntry` of the target, or `undefined` before the first one and where there is
+ * no `IntersectionObserver`. The state changes only when `isIntersecting` or the ratio changed.
+ *
+ * With a list as `target` it returns an array in target order: the latest entry of each target, `undefined` for
+ * one with no element or not reported yet. A new element, `root`, `rootMargin` or `threshold` starts again from
+ * `undefined` for every target; the browser reports each target again at once.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { useIntersection } from '@venizia/ardor';
+ *
+ * export function Lazy() {
+ *   const ref = React.useRef<HTMLDivElement>(null);
+ *   const entry = useIntersection({ target: ref, threshold: 0.5 });
+ *   return <div ref={ref}>{entry?.isIntersecting ? 'visible' : 'hidden'}</div>;
+ * }
+ * ```
  */
-export declare const useIntersection: (opts: IUseIntersectionOptions) => IntersectionObserverEntry | undefined;
+export declare function useIntersection(opts: IUseIntersectionOptions & {
+    target: TElementTarget[];
+}): TEntry[];
+export declare function useIntersection(opts: IUseIntersectionOptions & {
+    target: TElementTarget;
+}): TEntry;
+export declare function useIntersection(opts: IUseIntersectionOptions): TEntry | TEntry[];
+export {};
 //# sourceMappingURL=use-intersection.d.ts.map

package/dist/hooks/use-intersection.js

@@ -1,38 +1,74 @@
 import React from 'react';
 import { ElementTargets } from './element-target.js';
-/**
- * The latest `IntersectionObserverEntry` of the target, or `undefined` before the first one and
- * where there is no `IntersectionObserver`. The state changes only when `isIntersecting` or the
- * ratio changed. A new element, `rootMargin` or `threshold` starts again from `undefined`.
- */
-export const useIntersection = (opts) => {
-    const { target, rootMargin, threshold } = opts;
-    const [element, setElement] = React.useState(null);
-    const [entry, setEntry] = React.useState();
-    // oxlint-disable-next-line react-hooks/exhaustive-deps -- the target is read after every render, and a state set to the same element renders nothing
+const EMPTY_SCOPE = { elements: [], root: null, isRootPending: false };
+const NO_ENTRIES = new Map();
+const resolveScope = (opts) => {
+    const { target, root } = opts;
+    const targets = Array.isArray(target) ? target : [target];
+    const rootElement = root === undefined ? null : ElementTargets.resolve({ target: root });
+    return {
+        elements: targets.map((item) => ElementTargets.resolve({ target: item })),
+        root: rootElement,
+        isRootPending: rootElement === null && root !== undefined && root !== null,
+    };
+};
+const sameScope = (a, b) => {
+    return (a.root === b.root &&
+        a.isRootPending === b.isRootPending &&
+        a.elements.length === b.elements.length &&
+        a.elements.every((element, index) => element === b.elements[index]));
+};
+export function useIntersection(opts) {
+    const { target, root, rootMargin, threshold } = opts;
+    const isList = Array.isArray(target);
+    const count = isList ? target.length : 1;
+    // A number list is compared by value, so a list made anew in each render observes nothing again.
+    const thresholdKey = threshold === undefined ? undefined : JSON.stringify(threshold);
+    const [scope, setScope] = React.useState(EMPTY_SCOPE);
+    const [entries, setEntries] = React.useState(NO_ENTRIES);
+    // oxlint-disable-next-line react-hooks/exhaustive-deps -- the target and root are read after every render, and a state set to an equal scope renders nothing
     React.useEffect(() => {
-        setElement(ElementTargets.resolve({ target }));
+        const next = resolveScope({ target, root });
+        setScope((current) => (sameScope(current, next) ? current : next));
     });
     React.useEffect(() => {
-        setEntry(undefined);
-        if (!element || typeof IntersectionObserver === 'undefined') {
+        setEntries((current) => (current.size === 0 ? current : NO_ENTRIES));
+        const watched = new Set(scope.elements.filter((element) => element !== null));
+        if (watched.size === 0 || scope.isRootPending || typeof IntersectionObserver === 'undefined') {
             return () => { };
         }
-        const observer = new IntersectionObserver((entries) => {
-            const latest = entries.at(-1);
-            if (!latest) {
-                return;
-            }
-            setEntry((current) => {
-                return current?.isIntersecting === latest.isIntersecting &&
-                    current.intersectionRatio === latest.intersectionRatio
-                    ? current
-                    : latest;
+        const observer = new IntersectionObserver((delivered) => {
+            setEntries((current) => {
+                let next = current;
+                for (const entry of delivered) {
+                    const known = next.get(entry.target);
+                    if (known?.isIntersecting === entry.isIntersecting &&
+                        known.intersectionRatio === entry.intersectionRatio) {
+                        continue;
+                    }
+                    if (next === current) {
+                        next = new Map(current);
+                    }
+                    next.set(entry.target, entry);
+                }
+                return next;
             });
-        }, { rootMargin, threshold });
-        observer.observe(element);
+        }, {
+            root: scope.root ?? undefined,
+            rootMargin,
+            threshold: thresholdKey === undefined ? undefined : JSON.parse(thresholdKey),
+        });
+        for (const element of watched) {
+            observer.observe(element);
+        }
         return () => observer.disconnect();
-    }, [element, rootMargin, threshold]);
-    return entry;
-};
+    }, [scope, rootMargin, thresholdKey]);
+    return React.useMemo(() => {
+        const read = Array.from({ length: count }, (_, index) => {
+            const element = scope.elements[index];
+            return element ? entries.get(element) : undefined;
+        });
+        return isList ? read : read[0];
+    }, [count, isList, scope, entries]);
+}
 //# sourceMappingURL=use-intersection.js.map

package/dist/hooks/use-resize-effect.d.ts

@@ -1,5 +1,6 @@
 import { type TElementTarget } from './element-target.js';
 import { type TResizeBox } from './resize-observation.js';
+/** What `useResizeEffect` watches and the callback it calls. */
 export interface IUseResizeEffectOptions {
     /** Read after every render: an element, a ref to one, or `null`, which is skipped. */
     targets: TElementTarget[];
@@ -9,11 +10,32 @@ export interface IUseResizeEffectOptions {
     box?: TResizeBox;
     /** Also observe the direct children of each target, and again whenever they change. @default false */
     children?: boolean;
+    /**
+     * Call `onResize` inside the `ResizeObserver` callback, after layout and before paint, instead of on
+     * the next animation frame, once per observer callback. What `onResize` draws or styles directly
+     * shows in the frame that resized; a state update renders later. Resizing an observed element from
+     * it can report "ResizeObserver loop completed with undelivered notifications".
+     * @default false
+     */
+    beforePaint?: boolean;
 }
 /**
- * Calls `onResize` at most once per animation frame when any of the targets resizes. A new
- * `onResize` is used without observing again, and the targets are read after every render, so an
- * element held in state, a ref whose element changed and a list that grows or shrinks are followed.
+ * Calls `onResize` at most once per animation frame when any of the targets resizes, or inside the
+ * observer callback with `beforePaint`. A new `onResize` is used without observing again, and the
+ * targets are read after every render, so an element held in state, a ref whose element changed and
+ * a list that grows or shrinks are followed.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { useResizeEffect } from '@venizia/ardor';
+ *
+ * export function Panel() {
+ *   const ref = React.useRef<HTMLDivElement>(null);
+ *   useResizeEffect({ targets: [ref], onResize: (entries) => console.log(entries.length) });
+ *   return <div ref={ref} />;
+ * }
+ * ```
  */
 export declare const useResizeEffect: (opts: IUseResizeEffectOptions) => void;
 //# sourceMappingURL=use-resize-effect.d.ts.map

package/dist/hooks/use-resize-effect.js

@@ -2,12 +2,25 @@ import React from 'react';
 import { ElementTargets } from './element-target.js';
 import { ResizeObservation } from './resize-observation.js';
 /**
- * Calls `onResize` at most once per animation frame when any of the targets resizes. A new
- * `onResize` is used without observing again, and the targets are read after every render, so an
- * element held in state, a ref whose element changed and a list that grows or shrinks are followed.
+ * Calls `onResize` at most once per animation frame when any of the targets resizes, or inside the
+ * observer callback with `beforePaint`. A new `onResize` is used without observing again, and the
+ * targets are read after every render, so an element held in state, a ref whose element changed and
+ * a list that grows or shrinks are followed.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { useResizeEffect } from '@venizia/ardor';
+ *
+ * export function Panel() {
+ *   const ref = React.useRef<HTMLDivElement>(null);
+ *   useResizeEffect({ targets: [ref], onResize: (entries) => console.log(entries.length) });
+ *   return <div ref={ref} />;
+ * }
+ * ```
  */
 export const useResizeEffect = (opts) => {
-    const { targets, onResize, box = 'content-box', children = false } = opts;
+    const { targets, onResize, box = 'content-box', children = false, beforePaint = false } = opts;
     const handleResize = React.useRef(onResize);
     const observation = React.useRef(undefined);
     React.useEffect(() => {
@@ -18,11 +31,12 @@ export const useResizeEffect = (opts) => {
         const created = ResizeObservation.observe({
             box,
             children,
+            beforePaint,
             onFrame: (entries) => handleResize.current(entries),
         });
         observation.current = created;
         return created.stop;
-    }, [box, children]);
+    }, [box, children, beforePaint]);
     React.useEffect(() => {
         observation.current?.sync(targets.flatMap((target) => ElementTargets.resolve({ target }) ?? []));
     });

package/dist/hooks/use-stored-state.d.ts

@@ -1,19 +1,27 @@
 import { type IStorageCodec, type TStorageArea } from '@venizia/ardor-kernel';
+/** What `useStoredState` stores, where and how. */
 export interface IUseStoredStateOptions<TValue> {
-    key: string;
+    /** The storage key. `null` turns the storage off: nothing is read, written or watched, `value` starts from `defaultValue` and `setValue` keeps it in memory only, as `useState` does. */
+    key: string | null;
+    /** The value while the key holds nothing. */
     defaultValue: TValue;
     /** @default 'local' */
     storage?: TStorageArea;
     /** @default JSON */
     codec?: IStorageCodec<TValue>;
-    /** Write storage once, this many milliseconds after the last `setValue`; `value` changes at once. @default 0 */
+    /** Write storage once, this many milliseconds after the last `setValue`; `value` changes at once. Above 0, also pass a stable `codec`. @default 0 */
     writeDelayMs?: number;
 }
+/** The value `useStoredState` holds, and how to change or remove it. */
 export interface IUseStoredStateReturn<TValue> {
+    /** The stored value, or `defaultValue` when the key holds nothing. */
     value: TValue;
+    /** Stores a value, or the result of an updater called with the current one. */
     setValue: (next: TValue | ((current: TValue) => TValue)) => void;
+    /** Removes the key, so `value` is `defaultValue` again. */
     remove: () => void;
 }
+/** The call signatures of `useStoredState`. */
 export interface IUseStoredState {
     /** With a codec, the value type is the codec's: a literal `defaultValue` is checked against it, not widened past it. */
     <TValue>(opts: Omit<IUseStoredStateOptions<TValue>, 'defaultValue' | 'codec'> & {
@@ -27,7 +35,17 @@ export interface IUseStoredState {
  * that writes through `BrowserStorage`, and with other tabs. Pass a stable `codec` and `defaultValue`.
  * A write or a removal that the storage refuses is kept in this hook until the storage next changes.
  * With `writeDelayMs` the value waits in the same place for the delay: a change of the storage from
- * outside drops it, and an unmount or a new key or storage writes it at once.
+ * outside drops it, and an unmount, a new key or storage, a `pagehide` event or a hidden page writes it at once.
+ *
+ * @example
+ * ```tsx
+ * import { useStoredState } from '@venizia/ardor';
+ *
+ * export function ThemeToggle() {
+ *   const { value, setValue } = useStoredState({ key: '@app/prefs/theme', defaultValue: 'light' });
+ *   return <button onClick={() => setValue(value === 'light' ? 'dark' : 'light')}>{value}</button>;
+ * }
+ * ```
  */
 export declare const useStoredState: IUseStoredState;
 //# sourceMappingURL=use-stored-state.d.ts.map

package/dist/hooks/use-stored-state.js

@@ -7,7 +7,17 @@ const isUpdater = (next) => typeof next === 'function';
  * that writes through `BrowserStorage`, and with other tabs. Pass a stable `codec` and `defaultValue`.
  * A write or a removal that the storage refuses is kept in this hook until the storage next changes.
  * With `writeDelayMs` the value waits in the same place for the delay: a change of the storage from
- * outside drops it, and an unmount or a new key or storage writes it at once.
+ * outside drops it, and an unmount, a new key or storage, a `pagehide` event or a hidden page writes it at once.
+ *
+ * @example
+ * ```tsx
+ * import { useStoredState } from '@venizia/ardor';
+ *
+ * export function ThemeToggle() {
+ *   const { value, setValue } = useStoredState({ key: '@app/prefs/theme', defaultValue: 'light' });
+ *   return <button onClick={() => setValue(value === 'light' ? 'dark' : 'light')}>{value}</button>;
+ * }
+ * ```
  */
 export const useStoredState = (opts) => {
     const { key, defaultValue, storage, codec, writeDelayMs = 0 } = opts;
@@ -25,15 +35,39 @@ export const useStoredState = (opts) => {
     const write = React.useCallback((entry) => {
         keep(BrowserStorage.set(entry) ? undefined : entry);
     }, [keep]);
-    // A new key or storage, and an unmount, write the pending value to the key it was set for.
+    const isDelayed = writeDelayMs > 0;
+    const flush = React.useCallback(() => {
+        const pending = keptRef.current;
+        if (timerRef.current !== undefined && pending?.key != null) {
+            write({ ...pending, key: pending.key });
+        }
+    }, [write]);
+    // A new key or storage, an unmount, and a page that closes or hides write the pending value to the
+    // key it was set for: closing a tab does not unmount.
     React.useEffect(() => {
-        return () => {
-            if (timerRef.current !== undefined && keptRef.current) {
-                write(keptRef.current);
+        const onHide = () => {
+            if (document.visibilityState === 'hidden') {
+                flush();
             }
         };
-    }, [key, storage, write]);
+        // The value kept in memory under a `null` key does not follow the hook to a real key, or back to a later `null`.
+        if (key !== null && keptRef.current?.key === null) {
+            keep(undefined);
+        }
+        if (isDelayed) {
+            window.addEventListener('pagehide', flush);
+            document.addEventListener('visibilitychange', onHide);
+        }
+        return () => {
+            window.removeEventListener('pagehide', flush);
+            document.removeEventListener('visibilitychange', onHide);
+            flush();
+        };
+    }, [key, storage, isDelayed, flush, keep]);
     const subscribe = React.useCallback((listener) => {
+        if (key === null) {
+            return () => { };
+        }
         return BrowserStorage.subscribe({
             key,
             storage,
@@ -44,6 +78,9 @@ export const useStoredState = (opts) => {
         });
     }, [key, storage, keep]);
     const getSnapshot = React.useCallback(() => {
+        if (key === null) {
+            return defaultValue;
+        }
         const text = BrowserStorage.get({ key, storage, fallback: null, codec: RAW_TEXT });
         if (text === null) {
             return defaultValue;
@@ -61,7 +98,12 @@ export const useStoredState = (opts) => {
     const setValue = React.useCallback((next) => {
         const hit = keptRef.current;
         const current = hit?.key === key && hit.storage === storage ? hit.value : getSnapshot();
-        const entry = { key, storage, codec, value: isUpdater(next) ? next(current) : next };
+        const nextValue = isUpdater(next) ? next(current) : next;
+        if (key === null) {
+            keep({ key, storage, codec, value: nextValue });
+            return;
+        }
+        const entry = { key, storage, codec, value: nextValue };
         if (!(writeDelayMs > 0)) {
             write(entry);
             return;
@@ -70,6 +112,10 @@ export const useStoredState = (opts) => {
         timerRef.current = setTimeout(() => write(entry), writeDelayMs);
     }, [key, storage, codec, writeDelayMs, getSnapshot, keep, write]);
     const remove = React.useCallback(() => {
+        if (key === null) {
+            keep(undefined);
+            return;
+        }
         const isRemoved = BrowserStorage.remove({ key, storage });
         keep(isRemoved ? undefined : { key, storage, value: defaultValue });
     }, [key, storage, defaultValue, keep]);

package/dist/hooks/use-window-dimensions.d.ts

@@ -1,3 +1,4 @@
+/** The window's `innerWidth` and `innerHeight`, updated on resize; 0 x 0 where there is no window. */
 export declare const useWindowDimensions: () => {
     width: number;
     height: number;

package/dist/hooks/use-window-dimensions.js

@@ -6,6 +6,7 @@ const readWindowDimensions = () => {
         ? { width: window.innerWidth, height: window.innerHeight }
         : { width: 0, height: 0 };
 };
+/** The window's `innerWidth` and `innerHeight`, updated on resize; 0 x 0 where there is no window. */
 export const useWindowDimensions = () => {
     const [windowDimensions, setWindowDimensions] = React.useState(readWindowDimensions);
     React.useEffect(() => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@venizia/ardor-react",
-  "version": "0.4.8-1",
-  "description": "ARDOR React bindings - the application context, the injectable and logger hooks that read it, typed Redux hook factories, and the framework-agnostic UI hooks (debounce, autosave, confirm, clipboard, sizer, window dimensions). No react-admin.",
+  "version": "0.4.8-11",
+  "description": "ARDOR React bindings - the application context, the injectable and logger hooks that read it, typed Redux hook factories, and the framework-agnostic UI hooks (debounce, autosave, confirm, clipboard, element size, window dimensions). No react-admin.",
   "keywords": [
     "ardor",
     "ardor-react",
@@ -55,11 +55,10 @@
     "access": "public"
   },
   "scripts": {
-    "force-update": "sh ../../scripts/build/force-update.sh",
     "prepublishOnly": "make rebuild"
   },
   "dependencies": {
-    "@venizia/ardor-kernel": "0.4.8-1"
+    "@venizia/ardor-kernel": "0.4.8-11"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^21.0.4",
@@ -69,11 +68,11 @@
     "@types/bun": "^1.4.3",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@venizia/dev-configs": "^0.4.8-0",
-    "@venizia/ignis-filter": "^0.4.7-0",
-    "@venizia/ignis-helpers": "^0.4.8-0",
-    "@venizia/ignis-inversion": "^0.4.7-0",
-    "@venizia/ignis-kernel": "^0.4.8-0",
+    "@venizia/dev-configs": "^0.4.8-7",
+    "@venizia/ignis-filter": "^0.4.7-4",
+    "@venizia/ignis-helpers": "^0.4.8-9",
+    "@venizia/ignis-inversion": "^0.4.7-3",
+    "@venizia/ignis-kernel": "^0.4.8-11",
     "eslint": "^10.13.0",
     "oxlint": "1.89.0",
     "oxlint-tsgolint": "7.0.2004",
@@ -87,10 +86,10 @@
   },
   "peerDependencies": {
     "@reduxjs/toolkit": ">=2.13.0",
-    "@venizia/ignis-filter": "^0.4.7-0",
-    "@venizia/ignis-helpers": "^0.4.8-0",
-    "@venizia/ignis-inversion": "^0.4.7-0",
-    "@venizia/ignis-kernel": "^0.4.8-0",
+    "@venizia/ignis-filter": "^0.4.7-4",
+    "@venizia/ignis-helpers": "^0.4.8-9",
+    "@venizia/ignis-inversion": "^0.4.7-3",
+    "@venizia/ignis-kernel": "^0.4.8-11",
     "react": ">=19.3.1",
     "react-redux": ">=9.3.0",
     "reflect-metadata": ">=0.2.2"
@@ -111,7 +110,7 @@
         "react",
         "react-redux"
       ],
-      "limit": "3450 B"
+      "limit": "3875 B"
     }
   ],
   "engines": {