hdrify-react 1.3.0 → 2.1.0

package/README.md

@@ -1,18 +1,34 @@
+<p align="center">
+  <a href="https://hdrify.ben3d.ca" target="_blank" rel="noopener noreferrer">
+    <img alt="hdrify-react logo" src="https://raw.githubusercontent.com/bhouston/hdrify/main/packages/hdrify-vscode-extension/images/icon.png" height="96">
+  </a>
+</p>
+<br/>
+<p align="center">
+  <a href="https://npmjs.com/package/hdrify-react"><img src="https://img.shields.io/npm/v/hdrify-react.svg" alt="npm package"></a>
+  <a href="https://www.npmtrends.com/hdrify-react"><img src="https://img.shields.io/npm/dw/hdrify-react.svg" alt="npm downloads"></a>
+  <a href="https://codecov.io/gh/bhouston/hdrify"><img src="https://codecov.io/gh/bhouston/hdrify/branch/main/graph/badge.svg" alt="coverage"></a>
+  <a href="https://discord.gg/5J5Ur3F6Z2"><img src="https://img.shields.io/badge/chat-discord-blue?style=flat&logo=discord" alt="discord chat"></a>
+  <a href="https://hdrify.ben3d.ca"><img src="https://img.shields.io/badge/docs-read-blue?style=flat" alt="documentation"></a>
+</p>
+<br/>
+
 # hdrify-react
 
-<img src="https://hdrify.ben3d.ca/logo192.png" alt="HDRify logo" width="192" height="192">
+> Display HDR images in React with configurable tone mapping.
 
-[![NPM Package][npm]][npm-url]
-[![NPM Downloads][npm-downloads]][npmtrends-url]
-[![Tests][tests-badge]][tests-url]
-[![Coverage][coverage-badge]][coverage-url]
-[![Discord][discord-badge]][discord-url]
+- 🖼️ `<image-viewer>` Web Component and `ImageViewer` React Component
+- ⚛️ React Canvas Component
+- 🎨 Four Tone Mappers
+- ☀️ Adjustable Exposure
+- 🖼️ 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.
+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
 
@@ -28,18 +44,39 @@ 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, 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';
+
+<ImageViewer src="/images/memorial.exr" exposureControl toneMapping="agx" style={{ height: 600 }} />;
 ```
 
-### Props
+The same viewer is available as a web component for plain HTML and other frameworks:
 
-| 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`)        |
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/hdrify-react/dist/image-viewer.js"></script>
+<image-viewer src="/images/memorial.exr" exposure-control></image-viewer>
+```
+
+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'` to register the web component.
+
+## Documentation
+
+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
+
+See [Contributing Guide](https://github.com/bhouston/hdrify/blob/main/CONTRIBUTING.md).
 
 ## License
 
@@ -47,15 +84,6 @@ MIT
 
 ## Author
 
-[Ben Houston](https://ben3d.ca), Sponsored by [Land of Assets](https://landofassets.com)
-
-[npm]: https://img.shields.io/npm/v/hdrify-react
-[npm-url]: https://www.npmjs.com/package/hdrify-react
-[npm-downloads]: https://img.shields.io/npm/dw/hdrify-react
-[npmtrends-url]: https://www.npmtrends.com/hdrify-react
-[tests-badge]: https://github.com/bhouston/hdrify/workflows/Tests/badge.svg
-[tests-url]: https://github.com/bhouston/hdrify/actions/workflows/test.yml
-[coverage-badge]: https://codecov.io/gh/bhouston/hdrify/branch/main/graph/badge.svg
-[coverage-url]: https://codecov.io/gh/bhouston/hdrify
-[discord-badge]: https://img.shields.io/badge/Discord-Join-5865F2?logo=discord&logoColor=white
-[discord-url]: https://discord.gg/5J5Ur3F6Z2
+[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, type 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","sourceRoot":"","sources":["../src/HdrifyCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,WAAW,EAAE,KAAK,eAAe,EAAE,MAAM,QAAQ,CAAC;AAClF,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,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,CAiDxC"}
+{"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,44 +1,203 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { applyToneMapping } from 'hdrify';
-import { useCallback, useEffect, useRef } from 'react';
-export function HdrifyCanvas({ hdrifyImage, toneMapping, exposure, className, forwardedRef, }) {
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { drawToneMapped } from './capture.js';
+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) {
-            forwardedRef.current = el;
+    const latest = useRef(props);
+    const redraw = useRef(() => { });
+    useEffect(() => {
+        latest.current = props;
+    });
+    useEffect(() => {
+        redraw.current();
+    }, [props.hdrifyImage, props.toneMapping, props.exposure]);
+    useEffect(() => {
+        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' });
         }
-    }, [forwardedRef]);
-    const renderToCanvas = useCallback((data, exp, tone) => {
-        const canvas = canvasRef.current;
-        if (!canvas)
-            return;
-        const { width, height } = data;
-        canvas.width = width;
-        canvas.height = height;
-        // LDR from applyToneMapping is sRGB; use srgb canvas so it displays correctly
-        const ctx = canvas.getContext('2d', { colorSpace: 'srgb' }) ?? canvas.getContext('2d');
-        if (!ctx)
-            return;
-        const ldrRgb = applyToneMapping(data.data, width, height, {
-            toneMapping: tone,
-            exposure: exp,
-            sourceColorSpace: data.linearColorSpace,
-        });
-        const canvasImageData = ctx.createImageData(width, height);
-        const pixels = canvasImageData.data;
-        const sourceLength = width * height * 3;
-        for (let destIndex = 0, sourceIndex = 0; sourceIndex < sourceLength; destIndex += 4, sourceIndex += 3) {
-            pixels[destIndex] = ldrRgb[sourceIndex];
-            pixels[destIndex + 1] = ldrRgb[sourceIndex + 1];
-            pixels[destIndex + 2] = ldrRgb[sourceIndex + 2];
-            pixels[destIndex + 3] = 255;
+        catch {
+            observer.observe(host);
         }
-        ctx.putImageData(canvasImageData, 0, 0);
+        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();
+        };
     }, []);
-    useEffect(() => {
-        renderToCanvas(hdrifyImage, exposure, toneMapping);
-    }, [hdrifyImage, exposure, toneMapping, renderToCanvas]);
-    return _jsx("canvas", { className: className, ref: setRef });
+    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","sourceRoot":"","sources":["../src/HdrifyCanvas.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAA0C,MAAM,QAAQ,CAAC;AAElF,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAWvD,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;QAC9B,SAA8D,CAAC,OAAO,GAAG,EAAE,CAAC;QAC7E,IAAI,YAAY,EAAE,CAAC;YAChB,YAAiE,CAAC,OAAO,GAAG,EAAE,CAAC;QAClF,CAAC;IACH,CAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,IAAiB,EAAE,GAAW,EAAE,IAAqB,EAAQ,EAAE;QACjG,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC;QACjC,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QAC/B,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;QACrB,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;QACvB,8EAA8E;QAC9E,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,CAAC,IAAI,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QAEvF,IAAI,CAAC,GAAG;YAAE,OAAO;QAEjB,MAAM,MAAM,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE;YACxD,WAAW,EAAE,IAAI;YACjB,QAAQ,EAAE,GAAG;YACb,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;SACxC,CAAC,CAAC;QAEH,MAAM,eAAe,GAAG,GAAG,CAAC,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QAC3D,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC;QACpC,MAAM,YAAY,GAAG,KAAK,GAAG,MAAM,GAAG,CAAC,CAAC;QACxC,KAAK,IAAI,SAAS,GAAG,CAAC,EAAE,WAAW,GAAG,CAAC,EAAE,WAAW,GAAG,YAAY,EAAE,SAAS,IAAI,CAAC,EAAE,WAAW,IAAI,CAAC,EAAE,CAAC;YACtG,MAAM,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC,WAAW,CAAE,CAAC;YACzC,MAAM,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,WAAW,GAAG,CAAC,CAAE,CAAC;YACjD,MAAM,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,WAAW,GAAG,CAAC,CAAE,CAAC;YACjD,MAAM,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;QAC9B,CAAC;QAED,GAAG,CAAC,YAAY,CAAC,eAAe,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAC1C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,CAAC,WAAW,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;IACrD,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC;IAEzD,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

@@ -0,0 +1,86 @@
+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';
+/** `open` shows the options panel, `closed` shows only its gear button, and `hidden` shows neither. */
+export type SettingsPanelMode = 'open' | 'closed' | 'hidden';
+/** `contain` scales the image to fit the viewer; `actual` shows one image pixel per CSS pixel, scrolling if needed. */
+export type ImageFit = 'contain' | 'actual';
+/** User-adjustable display settings. */
+export interface ImageViewerSettings {
+    /** 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: ViewerToneMapping;
+    label: string;
+}[];
+/** Range of the exposure slider, in stops. The options panel accepts any value. */
+export declare const EXPOSURE_SLIDER_RANGE: {
+    readonly min: -10;
+    readonly max: 10;
+};
+/** Imperative handle for {@link ImageViewer}, received through its `ref` (React 19). */
+export interface ImageViewerHandle {
+    /**
+     * Resolve once the current source is loaded and drawn (immediately with no source). If the source changes first,
+     * 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}, 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, 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;
+    /** An already decoded image; takes precedence over `data` and `src`. */
+    image?: HdrifyImage;
+    /** Initial state of the options panel. Defaults to `closed`. */
+    settingsPanel?: SettingsPanelMode;
+    /** Show the vertical exposure slider over the left edge. */
+    exposureControl?: boolean;
+    /** Wrapper class name. */
+    className?: string;
+    /** Wrapper style; the default height is 480 pixels. */
+    style?: CSSProperties;
+    /** Called after each image loads and is drawn. */
+    onLoad?: (image: HdrifyImage) => void;
+    /** Called with fetch and decode errors; they are also shown in the viewer. */
+    onError?: (error: Error) => void;
+    /** Called as the image downloads, decodes and is drawn. */
+    onProgress?: (progress: ImageViewerProgress) => void;
+    /** Called when the user changes a setting with the slider or the options panel. */
+    onSettingsChange?: (settings: ImageViewerSettings) => void;
+    /** Called when the user opens or closes the options panel. */
+    onSettingsPanelChange?: (mode: SettingsPanelMode) => void;
+    /** Receives an {@link ImageViewerHandle} for readiness and image capture. */
+    ref?: Ref<ImageViewerHandle>;
+}
+/**
+ * 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
+ * <ImageViewer src="/images/memorial.exr" exposureControl toneMapping="agx" style={{ height: 600 }} />
+ * ```
+ */
+export declare function ImageViewer({ src, data, image, toneMapping, exposure, fit, settingsPanel, exposureControl, className, style, onLoad, onError, onProgress, onSettingsChange, onSettingsPanelChange, ref, }: ImageViewerProps): import("react").JSX.Element;
+//# sourceMappingURL=ImageViewer.d.ts.map

package/dist/ImageViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageViewer.d.ts","sources":["../src/ImageViewer.tsx"],"names":[],"mappings":"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"}