hdrify-react 1.4.0 → 2.2.0

package/README.md

@@ -24,13 +24,11 @@
 - 🖼️ Works With hdrify Readers
 - 🔷 Typed Props
 
-React component for displaying HDR images from [hdrify](https://www.npmjs.com/package/hdrify). Accepts `HdrifyImage` (returned by `readHdr`, `readExr`, `readJpegGainMap`) and renders with configurable tone mapping and exposure.
+React component for displaying HDR images from [hdrify](https://www.npmjs.com/package/hdrify). Accepts `HdrifyImage` (returned by `readHdr`, `readExr`, `readJxl`, `readJpegGainMap`) and renders with configurable tone mapping and exposure.
 
 **Related packages:** [hdrify](https://www.npmjs.com/package/hdrify) (core library) · [hdrify-cli](https://www.npmjs.com/package/hdrify-cli) (CLI tool)
 
-An **online demo** is available at **[https://hdrify.ben3d.ca](https://hdrify.ben3d.ca)** — HDR, EXR, and Ultra HDR viewer and converter built with this component; try it in your browser.
-
-[Read the Docs to Learn More](https://hdrify.ben3d.ca/).
+Try the **[online demo](https://hdrify.ben3d.ca/demo/)** — HDR, EXR, and Ultra HDR viewer and converter built with this component; try it in your browser.
 
 ## Installation
 
@@ -46,12 +44,14 @@ import { readExr } from 'hdrify';
 
 const hdrifyImage: HdrifyImage = readExr(buffer);
 
-<HdrifyCanvas hdrifyImage={hdrifyImage} toneMapping="neutral" exposure={1.0} className="max-w-full" />;
+<HdrifyCanvas hdrifyImage={hdrifyImage} exposure={1.0} className="max-w-full" />;
 ```
 
+See [`HdrifyCanvas`](https://hdrify.ben3d.ca/docs/api/react/functions/HdrifyCanvas/) and [`HdrifyCanvasProps`](https://hdrify.ben3d.ca/docs/api/react/interfaces/HdrifyCanvasProps/) for rendering behavior and props.
+
 ### Image viewer
 
-`ImageViewer` loads an EXR, HDR or gain map JPEG (detected from its content, gzip allowed) and adds an options panel and an optional vertical exposure slider:
+`ImageViewer` loads an EXR, HDR, JPEG XL or gain map JPEG (detected from its content, gzip allowed) and adds an options panel and an optional vertical exposure slider:
 
 ```tsx
 import { ImageViewer } from 'hdrify-react';
@@ -66,19 +66,13 @@ The same viewer is available as a web component for plain HTML and other framewo
 <image-viewer src="/images/memorial.exr" exposure-control></image-viewer>
 ```
 
-While loading, a progress bar fills across the top (`onProgress` / the `progress` event report it). `whenReady()` and `toBlob()` (on the element, or on the component's `ref`) wait for the image and export the tone-mapped result.
+API reference: [`ImageViewer`](https://hdrify.ben3d.ca/docs/api/react/functions/ImageViewer/) · [`ImageViewerProps`](https://hdrify.ben3d.ca/docs/api/react/interfaces/ImageViewerProps/) · [`ImageViewerHandle`](https://hdrify.ben3d.ca/docs/api/react/interfaces/ImageViewerHandle/).
 
-With a bundler, `import 'hdrify-react/element'` instead. See the [`<image-viewer>` documentation](https://hdrify.ben3d.ca/docs/image-viewer/) for all attributes, events and theming.
+With a bundler, `import 'hdrify-react/element'` to register the web component.
 
-### HdrifyCanvas props
+## Documentation
 
-| Prop           | Type                                         | Description                                           |
-| -------------- | -------------------------------------------- | ----------------------------------------------------- |
-| `hdrifyImage`  | `HdrifyImage`                                | Image from `readHdr`, `readExr`, or `readJpegGainMap` |
-| `toneMapping`  | `'aces' \| 'reinhard' \| 'neutral' \| 'agx'` | Tone mapper to use                                    |
-| `exposure`     | `number`                                     | Exposure value (1.0 = nominal)                        |
-| `className`    | `string`                                     | Optional CSS class for the canvas                     |
-| `forwardedRef` | `RefObject<HTMLCanvasElement \| null>`       | Optional ref for canvas access (e.g. `toBlob`)        |
+Full documentation for the React components is available [on the HDRify documentation website](https://hdrify.ben3d.ca/docs/react/). See the [React guide](https://hdrify.ben3d.ca/docs/react/) and [`<image-viewer>` documentation](https://hdrify.ben3d.ca/docs/image-viewer/) for loading, capture, attributes, events, and theming.
 
 ## Contribution
 
@@ -91,3 +85,5 @@ MIT
 ## Author
 
 [Ben Houston](https://ben3d.ca), Sponsored by [Land of Assets](https://landofassets.com).
+
+Compare browser behavior at [hdr-capabilities.ben3d.ca](https://hdr-capabilities.ben3d.ca), maintained in the separate [hdr-capabilities repository](https://github.com/bhouston/hdr-capabilities).

package/dist/HdrifyCanvas.d.ts

@@ -1,12 +1,39 @@
-import type { HdrifyImage, ToneMappingType } from 'hdrify';
+import type { HdrifyImage } from 'hdrify';
 import type * as React from 'react';
+import { type DisplayMode, type ViewerToneMapping } from './display.js';
 export interface HdrifyCanvasProps {
+    /** Decoded floating-point RGBA image from a hdrify reader. */
     hdrifyImage: HdrifyImage;
-    toneMapping: ToneMappingType;
+    /** Omit to use None on HDR displays and Neutral on SDR displays. */
+    toneMapping?: ViewerToneMapping;
+    /** Linear exposure multiplier: 1 is nominal, 2 adds one stop. */
     exposure: number;
+    /** CSS class applied to the canvas wrapper. */
     className?: string;
-    /** Optional ref so parent can access the canvas (e.g. for toBlob). */
+    /** Ref to the active canvas, updated when HDR/SDR fallback replaces it. */
     forwardedRef?: React.RefObject<HTMLCanvasElement | null>;
+    /** Called after the current image has finished rendering. */
+    onDraw?: (image: HdrifyImage, mode: DisplayMode) => void;
+    onError?: (error: Error) => void;
 }
-export declare function HdrifyCanvas({ hdrifyImage, toneMapping, exposure, className, forwardedRef, }: HdrifyCanvasProps): React.ReactElement;
+/**
+ * Display a decoded HDR image with exposure and tone mapping.
+ * Uses native WebGPU only when an HDR-capable display and extended `rgba16float`
+ * presentation succeed. The capability probe caches success or failure per page;
+ * each mounted canvas owns its rendering resources. Otherwise a 2D SDR canvas is used.
+ * GPU resources are disposed on unmount; device loss falls back to SDR.
+ *
+ * Omitting `toneMapping` selects None for HDR and Neutral for SDR. Explicit `none`
+ * also falls back to Neutral on SDR; other explicit mappers are preserved.
+ * Display size follows the viewport and device pixel ratio. Pass a new image object
+ * after editing pixels to trigger a redraw. `onDraw` reports a completed render.
+ * Use {@link captureImage} for portable SDR export rather than serializing the GPU canvas.
+ *
+ * @param props - Image, display settings, and rendering callbacks.
+ * @example
+ * ```tsx
+ * <HdrifyCanvas hdrifyImage={image} exposure={1} toneMapping="agx" />
+ * ```
+ */
+export declare function HdrifyCanvas(props: HdrifyCanvasProps): React.ReactElement;
 //# sourceMappingURL=HdrifyCanvas.d.ts.map

package/dist/HdrifyCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HdrifyCanvas.d.ts","sources":["../src/HdrifyCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAC3D,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,eAAe,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CAC1D;AAED,wBAAgB,YAAY,CAAC,EAC3B,WAAW,EACX,WAAW,EACX,QAAQ,EACR,SAAS,EACT,YAAY,GACb,EAAE,iBAAiB,GAAG,KAAK,CAAC,YAAY,CAmBxC"}
+{"version":3,"file":"HdrifyCanvas.d.ts","sources":["../src/HdrifyCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAC1C,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,OAAO,EAAsB,KAAK,WAAW,EAAqB,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAE/G,MAAM,WAAW,iBAAiB;IAChC,8DAA8D;IAC9D,WAAW,EAAE,WAAW,CAAC;IACzB,oEAAoE;IACpE,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,iEAAiE;IACjE,QAAQ,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACzD,6DAA6D;IAC7D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAKD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,KAAK,CAAC,YAAY,CAiLzE"}

package/dist/HdrifyCanvas.js

@@ -1,19 +1,203 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef } from 'react';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
 import { drawToneMapped } from './capture.js';
-export function HdrifyCanvas({ hdrifyImage, toneMapping, exposure, className, forwardedRef, }) {
+import { resolveToneMapping } from './display.js';
+const CSS = '.hdrify-canvas{display:grid;place-items:center;width:var(--hdrify-image-width);height:auto;aspect-ratio:var(--hdrify-image-aspect);min-height:0;flex:none;margin:auto;min-width:0}.hdrify-canvas>canvas{display:block;dynamic-range-limit:no-limit}';
+/**
+ * Display a decoded HDR image with exposure and tone mapping.
+ * Uses native WebGPU only when an HDR-capable display and extended `rgba16float`
+ * presentation succeed. The capability probe caches success or failure per page;
+ * each mounted canvas owns its rendering resources. Otherwise a 2D SDR canvas is used.
+ * GPU resources are disposed on unmount; device loss falls back to SDR.
+ *
+ * Omitting `toneMapping` selects None for HDR and Neutral for SDR. Explicit `none`
+ * also falls back to Neutral on SDR; other explicit mappers are preserved.
+ * Display size follows the viewport and device pixel ratio. Pass a new image object
+ * after editing pixels to trigger a redraw. `onDraw` reports a completed render.
+ * Use {@link captureImage} for portable SDR export rather than serializing the GPU canvas.
+ *
+ * @param props - Image, display settings, and rendering callbacks.
+ * @example
+ * ```tsx
+ * <HdrifyCanvas hdrifyImage={image} exposure={1} toneMapping="agx" />
+ * ```
+ */
+export function HdrifyCanvas(props) {
+    const hostRef = useRef(null);
     const canvasRef = useRef(null);
-    const setRef = useCallback((el) => {
-        canvasRef.current = el;
-        if (forwardedRef) {
-            // oxlint-disable-next-line react/immutability -- forwarding the element into the parent-owned ref
-            forwardedRef.current = el;
-        }
-    }, [forwardedRef]);
+    const latest = useRef(props);
+    const redraw = useRef(() => { });
+    useEffect(() => {
+        latest.current = props;
+    });
+    useEffect(() => {
+        redraw.current();
+    }, [props.hdrifyImage, props.toneMapping, props.exposure]);
     useEffect(() => {
-        if (canvasRef.current)
-            drawToneMapped(canvasRef.current, hdrifyImage, toneMapping, exposure);
-    }, [hdrifyImage, exposure, toneMapping]);
-    return _jsx("canvas", { className: className, ref: setRef });
+        const forwardedRef = props.forwardedRef;
+        if (!forwardedRef)
+            return undefined;
+        // oxlint-disable-next-line react/immutability -- forward the active canvas into the caller-owned ref
+        forwardedRef.current = canvasRef.current;
+        return () => {
+            // oxlint-disable-next-line react/immutability -- clear the caller-owned ref on replacement or unmount
+            forwardedRef.current = null;
+        };
+    }, [props.forwardedRef]);
+    useEffect(() => {
+        const host = hostRef.current;
+        const view = host.ownerDocument.defaultView;
+        const media = view.matchMedia('(dynamic-range: high)');
+        let active;
+        let canvas;
+        let disposed = false;
+        let generation = 0;
+        let drawRevision = 0;
+        let fallbackDrawing = '';
+        let fallbackImage;
+        const mount = (next) => {
+            canvas = next;
+            canvasRef.current = canvas;
+            // oxlint-disable-next-line react/immutability -- forwarding the internally created canvas
+            if (latest.current.forwardedRef)
+                latest.current.forwardedRef.current = canvas;
+            host.replaceChildren(canvas);
+        };
+        const draw = () => {
+            if (disposed || !active)
+                return;
+            const display = active;
+            const { hdrifyImage: image, toneMapping, exposure, onDraw, onError } = latest.current;
+            const mapper = resolveToneMapping(toneMapping, display.mode);
+            const revision = ++drawRevision;
+            try {
+                const scale = Math.min((host.clientWidth || image.width) / image.width, (host.clientHeight || image.height) / image.height);
+                const width = Math.max(1, image.width * scale);
+                const height = Math.max(1, image.height * scale);
+                canvas.style.width = `${width}px`;
+                canvas.style.height = `${height}px`;
+                display.resize(width, height, view.devicePixelRatio || 1);
+                display.draw(image, mapper, exposure);
+                canvas.dataset.displayMode = display.mode;
+                canvas.dataset.toneMapping = mapper;
+                void display
+                    .complete()
+                    .then(() => {
+                    if (!disposed && revision === drawRevision && active === display)
+                        onDraw?.(image, display.mode);
+                })
+                    .catch((error) => {
+                    if (!disposed && active === display) {
+                        if (display.mode === 'hdr') {
+                            fallback();
+                        }
+                        else
+                            onError?.(error instanceof Error ? error : new Error(String(error)));
+                    }
+                });
+            }
+            catch (error) {
+                if (display.mode === 'hdr') {
+                    fallback();
+                }
+                else
+                    onError?.(error instanceof Error ? error : new Error(String(error)));
+            }
+        };
+        const fallback = () => {
+            if (disposed)
+                return;
+            ++generation;
+            active?.dispose();
+            mount(host.ownerDocument.createElement('canvas'));
+            fallbackImage = undefined;
+            fallbackDrawing = '';
+            active = {
+                mode: 'sdr',
+                draw(image, mapper, exposure) {
+                    const key = `${mapper}:${exposure}`;
+                    if (fallbackImage === image && fallbackDrawing === key)
+                        return;
+                    drawToneMapped(canvas, image, mapper, exposure);
+                    fallbackImage = image;
+                    fallbackDrawing = key;
+                },
+                resize() { },
+                complete: () => Promise.resolve(),
+                dispose() { },
+            };
+            draw();
+        };
+        const select = async () => {
+            const request = ++generation;
+            if (!media.matches || !view.navigator.gpu) {
+                fallback();
+                return;
+            }
+            let next;
+            try {
+                const { createWebGPUDisplay } = await import('./webgpuDisplay.js');
+                if (disposed || request !== generation)
+                    return;
+                const candidate = host.ownerDocument.createElement('canvas');
+                next = await createWebGPUDisplay(candidate, () => {
+                    if (!disposed && request === generation)
+                        fallback();
+                });
+                if (disposed || request !== generation) {
+                    next.dispose();
+                    return;
+                }
+                active?.dispose();
+                active = next;
+                mount(candidate);
+                draw();
+            }
+            catch {
+                next?.dispose();
+                if (!disposed && request === generation)
+                    fallback();
+            }
+        };
+        redraw.current = draw;
+        const observer = new ResizeObserver(draw);
+        try {
+            observer.observe(host, { box: 'device-pixel-content-box' });
+        }
+        catch {
+            observer.observe(host);
+        }
+        const onMediaChange = () => {
+            void select();
+        };
+        media.addEventListener('change', onMediaChange);
+        view.addEventListener('resize', draw);
+        let resolution = view.matchMedia(`(resolution: ${view.devicePixelRatio}dppx)`);
+        const onResolutionChange = () => {
+            resolution.removeEventListener('change', onResolutionChange);
+            resolution = view.matchMedia(`(resolution: ${view.devicePixelRatio}dppx)`);
+            resolution.addEventListener('change', onResolutionChange);
+            draw();
+        };
+        resolution.addEventListener('change', onResolutionChange);
+        void select();
+        return () => {
+            disposed = true;
+            ++generation;
+            ++drawRevision;
+            observer.disconnect();
+            media.removeEventListener('change', onMediaChange);
+            view.removeEventListener('resize', draw);
+            resolution.removeEventListener('change', onResolutionChange);
+            active?.dispose();
+            canvasRef.current = null;
+            redraw.current = () => { };
+            host.replaceChildren();
+        };
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: CSS }), _jsx("div", { ref: hostRef, className: `hdrify-canvas${props.className ? ` ${props.className}` : ''}`, style: {
+                    '--hdrify-image-width': `${props.hdrifyImage.width}px`,
+                    '--hdrify-image-aspect': `${props.hdrifyImage.width}/${props.hdrifyImage.height}`,
+                } })] }));
 }
 //# sourceMappingURL=HdrifyCanvas.js.map

package/dist/HdrifyCanvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"HdrifyCanvas.js","sources":["../src/HdrifyCanvas.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAW9C,MAAM,UAAU,YAAY,CAAC,EAC3B,WAAW,EACX,WAAW,EACX,QAAQ,EACR,SAAS,EACT,YAAY,GACM;IAClB,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAElD,MAAM,MAAM,GAAG,WAAW,CACxB,CAAC,EAA4B,EAAE,EAAE;QAC/B,SAAS,CAAC,OAAO,GAAG,EAAE,CAAC;QACvB,IAAI,YAAY,EAAE,CAAC;YACjB,kGAAkG;YAClG,YAAY,CAAC,OAAO,GAAG,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,CAAC,OAAO;YAAE,cAAc,CAAC,SAAS,CAAC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC;IAC/F,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;IAEzC,OAAO,iBAAQ,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,GAAI,CAAC;AACvD,CAAC"}
+{"version":3,"file":"HdrifyCanvas.js","sources":["../src/HdrifyCanvas.tsx"],"names":[],"mappings":"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"}

package/dist/ImageViewer.d.ts

@@ -1,4 +1,5 @@
-import type { HdrifyImage, ToneMappingType } from 'hdrify';
+import type { HdrifyImage } from 'hdrify';
+import { type ViewerToneMapping } from './display.js';
 import { type CSSProperties, type Ref } from 'react';
 import { type ImageViewerCaptureOptions } from './capture.js';
 import { type ImageViewerProgress } from './progress.js';
@@ -8,14 +9,15 @@ export type SettingsPanelMode = 'open' | 'closed' | 'hidden';
 export type ImageFit = 'contain' | 'actual';
 /** User-adjustable display settings. */
 export interface ImageViewerSettings {
-    toneMapping: ToneMappingType;
+    /** Omit for None on HDR displays and Neutral on SDR; explicit None falls back to Neutral on SDR. */
+    toneMapping?: ViewerToneMapping;
     /** Exposure in stops (EV): `0` is unchanged, `+1` doubles the brightness. */
     exposure: number;
     fit: ImageFit;
 }
 export declare const DEFAULT_IMAGE_VIEWER_SETTINGS: Readonly<ImageViewerSettings>;
 export declare const TONE_MAPPING_OPTIONS: readonly {
-    value: ToneMappingType;
+    value: ViewerToneMapping;
     label: string;
 }[];
 /** Range of the exposure slider, in stops. The options panel accepts any value. */
@@ -30,12 +32,16 @@ export interface ImageViewerHandle {
      * it waits for the new source instead. Rejects with the load's error, or if the component unmounts.
      */
     whenReady(): Promise<void>;
-    /** Wait for {@link whenReady}, then encode the tone-mapped image with the current settings; no viewer controls. */
+    /**
+     * Wait for {@link whenReady}, including the first completed render, then export
+     * an SDR PNG/JPEG/WebP without viewer controls. Capture is independent of display
+     * output: an omitted mapper uses Neutral; explicit `none` clips above-white values.
+     */
     toBlob(options?: ImageViewerCaptureOptions): Promise<Blob>;
 }
 /** Props for {@link ImageViewer}. Settings props override the user's choice whenever they change. */
 export interface ImageViewerProps extends Partial<ImageViewerSettings> {
-    /** URL of an EXR, HDR or gain map JPEG (optionally gzipped). Fetching is cancelled when it changes. */
+    /** URL of an EXR, HDR, JPEG XL or gain map JPEG (optionally gzipped). Fetching is cancelled when it changes. */
     src?: string;
     /** Encoded file bytes; takes precedence over `src`. */
     data?: ArrayBuffer | Uint8Array;
@@ -65,6 +71,11 @@ export interface ImageViewerProps extends Partial<ImageViewerSettings> {
 /**
  * Loads and displays an HDR image with tone mapping, a loading bar, an optional options panel and an optional
  * exposure slider. Accepts every format hdrify reads; see {@link decodeHdrifyImage}.
+ * Uses {@link HdrifyCanvas} for HDR presentation and SDR fallback. None is offered
+ * and selected by default only after extended FP16 presentation succeeds; otherwise
+ * Neutral is the default and None is hidden. There is no Automatic menu item.
+ * `fit="actual"` shows one source pixel per CSS pixel. Loading progress is reported
+ * through `onProgress`; the imperative handle exposes readiness and SDR capture.
  *
  * @example
  * ```tsx

package/dist/ImageViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageViewer.d.ts","sources":["../src/ImageViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAC3D,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,GAAG,EAA2D,MAAM,OAAO,CAAC;AAC9G,OAAO,EAAgB,KAAK,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAG5E,OAAO,EAAyB,KAAK,mBAAmB,EAAgB,MAAM,eAAe,CAAC;AAI9F,uGAAuG;AACvG,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC7D,uHAAuH;AACvH,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE5C,wCAAwC;AACxC,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,eAAe,CAAC;IAC7B,6EAA6E;IAC7E,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,QAAQ,CAAC;CACf;AAED,eAAO,MAAM,6BAA6B,EAAE,QAAQ,CAAC,mBAAmB,CAIvE,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,SAAS;IAAE,KAAK,EAAE,eAAe,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAKpF,CAAC;AAEF,mFAAmF;AACnF,eAAO,MAAM,qBAAqB;aAAK,GAAG,EAAE,CAAC,EAAE;aAAE,GAAG,EAAE,EAAE;CAAW,CAAC;AAEpE,wFAAwF;AACxF,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3B,mHAAmH;IACnH,MAAM,CAAC,OAAO,CAAC,EAAE,yBAAyB,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5D;AAED,qGAAqG;AACrG,MAAM,WAAW,gBAAiB,SAAQ,OAAO,CAAC,mBAAmB,CAAC;IACpE,uGAAuG;IACvG,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uDAAuD;IACvD,IAAI,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC;IAChC,wEAAwE;IACxE,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,gEAAgE;IAChE,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,4DAA4D;IAC5D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,kDAAkD;IAClD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,8EAA8E;IAC9E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,2DAA2D;IAC3D,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACrD,mFAAmF;IACnF,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC3D,8DAA8D;IAC9D,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC1D,6EAA6E;IAC7E,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAwBD;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,GAAG,EACH,aAAwB,EACxB,eAAuB,EACvB,SAAS,EACT,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAU,EACV,gBAAgB,EAChB,qBAAqB,EACrB,GAAG,GACJ,EAAE,gBAAgB,+BA8LlB"}
+{"version":3,"file":"ImageViewer.d.ts","sources":["../src/ImageViewer.tsx"],"names":[],"mappings":"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"}

package/dist/ImageViewer.js

@@ -1,4 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveToneMapping } from './display.js';
 import { useEffect, useId, useImperativeHandle, useRef, useState } from 'react';
 import { captureImage } from './capture.js';
 import { decodeHdrifyImage } from './decode.js';
@@ -7,11 +8,12 @@ import { readResponse } from './progress.js';
 import { ViewerReadiness } from './readiness.js';
 import { IMAGE_VIEWER_CSS } from './styles.js';
 export const DEFAULT_IMAGE_VIEWER_SETTINGS = {
-    toneMapping: 'neutral',
+    toneMapping: undefined,
     exposure: 0,
     fit: 'contain',
 };
 export const TONE_MAPPING_OPTIONS = [
+    { value: 'none', label: 'None' },
     { value: 'neutral', label: 'Neutral' },
     { value: 'agx', label: 'AgX' },
     { value: 'aces', label: 'ACES' },
@@ -34,6 +36,11 @@ let loadCount = 0;
 /**
  * Loads and displays an HDR image with tone mapping, a loading bar, an optional options panel and an optional
  * exposure slider. Accepts every format hdrify reads; see {@link decodeHdrifyImage}.
+ * Uses {@link HdrifyCanvas} for HDR presentation and SDR fallback. None is offered
+ * and selected by default only after extended FP16 presentation succeeds; otherwise
+ * Neutral is the default and None is hidden. There is no Automatic menu item.
+ * `fit="actual"` shows one source pixel per CSS pixel. Loading progress is reported
+ * through `onProgress`; the imperative handle exposes readiness and SDR capture.
  *
  * @example
  * ```tsx
@@ -57,7 +64,11 @@ export function ImageViewer({ src, data, image, toneMapping, exposure, fit, sett
         provided.fit !== fit ||
         provided.settingsPanel !== settingsPanel) {
         setProvided({ toneMapping, exposure, fit, settingsPanel });
-        setSettings((current) => ({ ...current, ...definedSettings({ toneMapping, exposure, fit }) }));
+        setSettings((current) => ({
+            ...current,
+            ...definedSettings({ exposure, fit }),
+            ...(provided.toneMapping !== toneMapping ? { toneMapping } : {}),
+        }));
         if (provided.settingsPanel !== settingsPanel)
             setPanelMode(settingsPanel);
     }
@@ -71,6 +82,9 @@ export function ImageViewer({ src, data, image, toneMapping, exposure, fit, sett
         callbacks.current.onSettingsPanelChange?.(mode);
     };
     const [readiness] = useState(() => new ViewerReadiness());
+    const [rendered, setRendered] = useState();
+    const [renderError, setRenderError] = useState();
+    const announced = useRef(undefined);
     useEffect(() => () => readiness.disconnect(), [readiness]);
     // The latest fetch/decode result, tagged with the source it came from; the rest is derived during render.
     const source = image ? undefined : (data ?? src);
@@ -80,6 +94,7 @@ export function ImageViewer({ src, data, image, toneMapping, exposure, fit, sett
     const download = useRef(NO_DOWNLOAD);
     useEffect(() => {
         readiness.pending();
+        announced.current = undefined;
         download.current = NO_DOWNLOAD;
         if (image)
             return; // Drawn below.
@@ -131,20 +146,41 @@ export function ImageViewer({ src, data, image, toneMapping, exposure, fit, sett
     // While a new source loads, keep showing the previous image.
     const shownImage = image ?? (source === undefined ? undefined : loaded.image);
     const error = !loading && source !== undefined ? loaded.error : undefined;
-    const barValue = bar && !loading ? 1 : bar?.value;
-    // HdrifyCanvas (a child) draws in its effect, which runs before this one: the new image is on screen here.
+    // Readiness follows the asynchronous renderer, including its first completed GPU draw.
     const drawn = loading ? undefined : shownImage;
+    const displayMode = rendered?.mode ?? 'sdr';
+    const renderReady = !!drawn &&
+        rendered?.image === drawn &&
+        rendered.exposure === settings.exposure &&
+        rendered.toneMapping === settings.toneMapping;
+    const barValue = bar && !loading && renderReady ? 1 : bar?.value;
+    if (!shownImage && rendered)
+        setRendered(undefined);
     const latest = useRef({ image: drawn, settings });
     useEffect(() => {
         latest.current = { image: drawn, settings };
     });
+    const handleDraw = (current, mode) => {
+        setRenderError(undefined);
+        if (mode === 'sdr' && settings.toneMapping === 'none')
+            change({ toneMapping: 'neutral' });
+        if (current === drawn)
+            setBar((currentBar) => (currentBar && currentBar.value < 1 ? { ...currentBar, value: 1 } : currentBar));
+        setRendered((previous) => previous?.image === current &&
+            previous.mode === mode &&
+            previous.exposure === settings.exposure &&
+            previous.toneMapping === settings.toneMapping
+            ? previous
+            : { image: current, mode, exposure: settings.exposure, toneMapping: settings.toneMapping });
+    };
     useEffect(() => {
-        if (!drawn)
+        if (!drawn || !renderReady || announced.current === drawn)
             return;
+        announced.current = drawn;
         readiness.finish();
         callbacks.current.onProgress?.({ ...download.current, totalProgress: 1, stage: 'render' });
         callbacks.current.onLoad?.(drawn);
-    }, [drawn, readiness]);
+    }, [drawn, renderReady, readiness]);
     useImperativeHandle(ref, () => ({
         whenReady: () => readiness.whenReady(),
         toBlob: async (options) => {
@@ -152,14 +188,18 @@ export function ImageViewer({ src, data, image, toneMapping, exposure, fit, sett
             const { image: current, settings: currentSettings } = latest.current;
             if (!current)
                 throw new Error('No image is loaded.');
-            return captureImage(current, currentSettings.toneMapping, 2 ** currentSettings.exposure, options);
+            return captureImage(current, currentSettings.toneMapping ?? 'neutral', 2 ** currentSettings.exposure, options);
         },
     }), [readiness]);
-    return (_jsxs("div", { className: className ? `hdrify-viewer ${className}` : 'hdrify-viewer', style: { height: 480, ...style }, "data-fit": settings.fit, "aria-busy": loading, children: [_jsx("style", { children: IMAGE_VIEWER_CSS }), _jsx("div", { className: "hdrify-viewer-viewport", children: shownImage && (_jsx(HdrifyCanvas, { hdrifyImage: shownImage, toneMapping: settings.toneMapping, exposure: 2 ** settings.exposure, className: "hdrify-viewer-canvas" })) }), _jsx("div", { className: "hdrify-viewer-progress", hidden: barValue === undefined, children: _jsx("slot", { name: "progress-bar", children: bar && barValue !== undefined && (_jsx("div", { className: barValue === 1 ? 'hdrify-viewer-progress-fill complete' : 'hdrify-viewer-progress-fill', part: "default-progress-bar", 
+    return (_jsxs("div", { className: className ? `hdrify-viewer ${className}` : 'hdrify-viewer', style: { height: 480, ...style }, "data-fit": settings.fit, "data-display-mode": displayMode, "aria-busy": loading || (!!drawn && !renderReady), children: [_jsx("style", { children: IMAGE_VIEWER_CSS }), _jsx("div", { className: "hdrify-viewer-viewport", children: shownImage && (_jsx(HdrifyCanvas, { hdrifyImage: shownImage, toneMapping: settings.toneMapping, exposure: 2 ** settings.exposure, className: "hdrify-viewer-canvas", onDraw: handleDraw, onError: (failure) => {
+                        readiness.finish(failure);
+                        setRenderError(failure.message);
+                        callbacks.current.onError?.(failure);
+                    } })) }), _jsx("div", { className: "hdrify-viewer-progress", hidden: barValue === undefined, children: _jsx("slot", { name: "progress-bar", children: bar && barValue !== undefined && (_jsx("div", { className: barValue === 1 ? 'hdrify-viewer-progress-fill complete' : 'hdrify-viewer-progress-fill', part: "default-progress-bar", 
                         // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- a scaled fill, styleable via ::part like <material-viewer>'s
-                        role: "progressbar", "aria-label": "Loading image", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(barValue * 100), "aria-hidden": barValue === 1, style: { transform: `scaleX(${Math.max(0.02, barValue)})` } }, bar.id)) }) }), error && (_jsx("p", { role: "alert", className: "hdrify-viewer-error", children: error })), exposureControl && (_jsxs("div", { className: "hdrify-viewer-exposure hdrify-viewer-surface", title: "Exposure (double-click to reset)", children: [_jsx("output", { children: formatStops(settings.exposure) }), _jsx("input", { type: "range", "aria-label": "Exposure in stops", min: EXPOSURE_SLIDER_RANGE.min, max: EXPOSURE_SLIDER_RANGE.max, step: 0.1, value: settings.exposure, onChange: (event) => change({ exposure: event.currentTarget.valueAsNumber }), onDoubleClick: () => change({ exposure: 0 }) })] })), panelMode !== 'hidden' && (_jsx(OptionsPanel, { settings: settings, image: shownImage, open: panelMode === 'open', onChange: change, onOpenChange: (open) => changePanel(open ? 'open' : 'closed') }))] }));
+                        role: "progressbar", "aria-label": "Loading image", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(barValue * 100), "aria-hidden": barValue === 1, style: { transform: `scaleX(${Math.max(0.02, barValue)})` } }, bar.id)) }) }), (error || renderError) && (_jsx("p", { role: "alert", className: "hdrify-viewer-error", children: error || renderError })), exposureControl && (_jsxs("div", { className: "hdrify-viewer-exposure hdrify-viewer-surface", title: "Exposure (double-click to reset)", children: [_jsx("output", { children: formatStops(settings.exposure) }), _jsx("input", { type: "range", "aria-label": "Exposure in stops", min: EXPOSURE_SLIDER_RANGE.min, max: EXPOSURE_SLIDER_RANGE.max, step: 0.1, value: settings.exposure, onChange: (event) => change({ exposure: event.currentTarget.valueAsNumber }), onDoubleClick: () => change({ exposure: 0 }) })] })), panelMode !== 'hidden' && (_jsx(OptionsPanel, { settings: settings, image: shownImage, displayMode: displayMode, open: panelMode === 'open', onChange: change, onOpenChange: (open) => changePanel(open ? 'open' : 'closed') }))] }));
 }
-function OptionsPanel({ settings, image, open, onChange, onOpenChange }) {
+function OptionsPanel({ settings, image, displayMode, open, onChange, onOpenChange }) {
     const id = useId();
     const button = useRef(null);
     const panel = useRef(null);
@@ -190,7 +230,9 @@ function OptionsPanel({ settings, image, open, onChange, onOpenChange }) {
             document.removeEventListener('keydown', escape);
         };
     }, [open]);
-    return (_jsxs(_Fragment, { children: [_jsx("button", { ref: button, type: "button", className: "hdrify-viewer-toggle hdrify-viewer-surface", "aria-label": "Viewer options", title: "Viewer options", "aria-controls": id, "aria-expanded": open, onClick: () => onOpenChange(!open), children: _jsxs("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: "1.6", "aria-hidden": "true", children: [_jsx("path", { d: "m9 3-.8 2.2-2 .9L4 5.5 2.5 8l1.6 1.7-.2 2.3L2 13.5 3.5 16l2.3-.4 1.8 1.4.4 2.4h3l.8-2.2 2-.9 2.2.6 1.5-2.5-1.6-1.7.2-2.3L18 8.5 16.5 6l-2.3.4-1.8-1.4L12 3Z", transform: "translate(2 1)" }), _jsx("circle", { cx: "12", cy: "12", r: "3" })] }) }), _jsxs("section", { ref: panel, id: id, className: "hdrify-viewer-panel hdrify-viewer-surface", "aria-label": "Viewer options", hidden: !open, children: [_jsxs("header", { children: [_jsx("strong", { children: "Viewer options" }), _jsx("button", { type: "button", "aria-label": "Close viewer options", onClick: () => onOpenChange(false), children: "\u00D7" })] }), _jsxs("label", { children: ["Tone mapping", _jsx("select", { value: settings.toneMapping, onChange: (event) => onChange({ toneMapping: event.currentTarget.value }), children: TONE_MAPPING_OPTIONS.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) })] }), _jsxs("label", { children: ["Exposure (EV)", _jsx("input", { type: "number", step: 0.1, value: Number(settings.exposure.toFixed(2)), onChange: (event) => {
+    return (_jsxs(_Fragment, { children: [_jsx("button", { ref: button, type: "button", className: "hdrify-viewer-toggle hdrify-viewer-surface", "aria-label": "Viewer options", title: "Viewer options", "aria-controls": id, "aria-expanded": open, onClick: () => onOpenChange(!open), children: _jsxs("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: "1.6", "aria-hidden": "true", children: [_jsx("path", { d: "m9 3-.8 2.2-2 .9L4 5.5 2.5 8l1.6 1.7-.2 2.3L2 13.5 3.5 16l2.3-.4 1.8 1.4.4 2.4h3l.8-2.2 2-.9 2.2.6 1.5-2.5-1.6-1.7.2-2.3L18 8.5 16.5 6l-2.3.4-1.8-1.4L12 3Z", transform: "translate(2 1)" }), _jsx("circle", { cx: "12", cy: "12", r: "3" })] }) }), _jsxs("section", { ref: panel, id: id, className: "hdrify-viewer-panel hdrify-viewer-surface", "aria-label": "Viewer options", hidden: !open, children: [_jsxs("header", { children: [_jsx("strong", { children: "Viewer options" }), _jsx("button", { type: "button", "aria-label": "Close viewer options", onClick: () => onOpenChange(false), children: "\u00D7" })] }), _jsxs("label", { children: ["Tone mapping", _jsx("select", { "aria-label": "Tone mapping", value: resolveToneMapping(settings.toneMapping, displayMode), onChange: (event) => onChange({
+                                    toneMapping: event.currentTarget.value ? event.currentTarget.value : undefined,
+                                }), children: TONE_MAPPING_OPTIONS.filter((option) => option.value !== 'none' || displayMode === 'hdr').map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) })] }), _jsxs("label", { children: ["Exposure (EV)", _jsx("input", { type: "number", step: 0.1, value: Number(settings.exposure.toFixed(2)), onChange: (event) => {
                                     const value = event.currentTarget.valueAsNumber;
                                     if (Number.isFinite(value))
                                         onChange({ exposure: value });