hdrify-react 1.3.0 → 1.4.0

package/README.md

@@ -1,12 +1,28 @@
+<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.
 
@@ -14,6 +30,8 @@ React component for displaying HDR images from [hdrify](https://www.npmjs.com/pa
 
 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/).
+
 ## Installation
 
 ```sh
@@ -31,7 +49,28 @@ const hdrifyImage: HdrifyImage = readExr(buffer);
 <HdrifyCanvas hdrifyImage={hdrifyImage} toneMapping="neutral" exposure={1.0} className="max-w-full" />;
 ```
 
-### 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:
+
+```tsx
+import { ImageViewer } from 'hdrify-react';
+
+<ImageViewer src="/images/memorial.exr" exposureControl toneMapping="agx" style={{ height: 600 }} />;
+```
+
+The same viewer is available as a web component for plain HTML and other frameworks:
+
+```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>
+```
+
+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.
+
+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.
+
+### HdrifyCanvas props
 
 | Prop           | Type                                         | Description                                           |
 | -------------- | -------------------------------------------- | ----------------------------------------------------- |
@@ -41,21 +80,14 @@ const hdrifyImage: HdrifyImage = readExr(buffer);
 | `className`    | `string`                                     | Optional CSS class for the canvas                     |
 | `forwardedRef` | `RefObject<HTMLCanvasElement \| null>`       | Optional ref for canvas access (e.g. `toBlob`)        |
 
+## Contribution
+
+See [Contributing Guide](https://github.com/bhouston/hdrify/blob/main/CONTRIBUTING.md).
+
 ## License
 
 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).

package/dist/HdrifyCanvas.d.ts

@@ -1,4 +1,4 @@
-import { type HdrifyImage, type ToneMappingType } from 'hdrify';
+import type { HdrifyImage, ToneMappingType } from 'hdrify';
 import type * as React from 'react';
 export interface HdrifyCanvasProps {
     hdrifyImage: HdrifyImage;

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,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"}

package/dist/HdrifyCanvas.js

@@ -1,44 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { applyToneMapping } from 'hdrify';
 import { useCallback, useEffect, useRef } from 'react';
+import { drawToneMapped } from './capture.js';
 export function HdrifyCanvas({ hdrifyImage, toneMapping, exposure, className, forwardedRef, }) {
     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 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;
-        }
-        ctx.putImageData(canvasImageData, 0, 0);
-    }, []);
     useEffect(() => {
-        renderToCanvas(hdrifyImage, exposure, toneMapping);
-    }, [hdrifyImage, exposure, toneMapping, renderToCanvas]);
+        if (canvasRef.current)
+            drawToneMapped(canvasRef.current, hdrifyImage, toneMapping, exposure);
+    }, [hdrifyImage, exposure, toneMapping]);
     return _jsx("canvas", { className: className, ref: setRef });
 }
 //# 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":";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"}

package/dist/ImageViewer.d.ts

@@ -0,0 +1,75 @@
+import type { HdrifyImage, ToneMappingType } from 'hdrify';
+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 {
+    toneMapping: ToneMappingType;
+    /** 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;
+    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}, then encode the tone-mapped image with the current settings; no viewer controls. */
+    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. */
+    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}.
+ *
+ * @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":"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"}

package/dist/ImageViewer.js

@@ -0,0 +1,199 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useImperativeHandle, useRef, useState } from 'react';
+import { captureImage } from './capture.js';
+import { decodeHdrifyImage } from './decode.js';
+import { HdrifyCanvas } from './HdrifyCanvas.js';
+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',
+    exposure: 0,
+    fit: 'contain',
+};
+export const TONE_MAPPING_OPTIONS = [
+    { value: 'neutral', label: 'Neutral' },
+    { value: 'agx', label: 'AgX' },
+    { value: 'aces', label: 'ACES' },
+    { value: 'reinhard', label: 'Reinhard' },
+];
+/** Range of the exposure slider, in stops. The options panel accepts any value. */
+export const EXPOSURE_SLIDER_RANGE = { min: -10, max: 10 };
+function definedSettings(settings) {
+    return Object.fromEntries(Object.entries(settings).filter(([, value]) => value !== undefined));
+}
+function formatStops(stops) {
+    return `${stops > 0 ? '+' : ''}${Number(stops.toFixed(1))} EV`;
+}
+/** Wait until the browser has painted, so the progress bar shows before decoding blocks the main thread. */
+const afterPaint = () => new Promise((resolve) => requestAnimationFrame(() => setTimeout(resolve, 0)));
+/** Share of the progress bar for the download; decoding and drawing take the rest. */
+const DOWNLOAD_SHARE = 0.8;
+const NO_DOWNLOAD = { loaded: 0, total: null, progress: null };
+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}.
+ *
+ * @example
+ * ```tsx
+ * <ImageViewer src="/images/memorial.exr" exposureControl toneMapping="agx" style={{ height: 600 }} />
+ * ```
+ */
+export function ImageViewer({ src, data, image, toneMapping, exposure, fit, settingsPanel = 'closed', exposureControl = false, className, style, onLoad, onError, onProgress, onSettingsChange, onSettingsPanelChange, ref, }) {
+    const callbacks = useRef({ onLoad, onError, onProgress, onSettingsChange, onSettingsPanelChange });
+    useEffect(() => {
+        callbacks.current = { onLoad, onError, onProgress, onSettingsChange, onSettingsPanelChange };
+    });
+    // Props seed the state and override it whenever they change; the user can change it in between.
+    const [settings, setSettings] = useState(() => ({
+        ...DEFAULT_IMAGE_VIEWER_SETTINGS,
+        ...definedSettings({ toneMapping, exposure, fit }),
+    }));
+    const [provided, setProvided] = useState({ toneMapping, exposure, fit, settingsPanel });
+    const [panelMode, setPanelMode] = useState(settingsPanel);
+    if (provided.toneMapping !== toneMapping ||
+        provided.exposure !== exposure ||
+        provided.fit !== fit ||
+        provided.settingsPanel !== settingsPanel) {
+        setProvided({ toneMapping, exposure, fit, settingsPanel });
+        setSettings((current) => ({ ...current, ...definedSettings({ toneMapping, exposure, fit }) }));
+        if (provided.settingsPanel !== settingsPanel)
+            setPanelMode(settingsPanel);
+    }
+    const change = (patch) => {
+        const next = { ...settings, ...patch };
+        setSettings(next);
+        callbacks.current.onSettingsChange?.(next);
+    };
+    const changePanel = (mode) => {
+        setPanelMode(mode);
+        callbacks.current.onSettingsPanelChange?.(mode);
+    };
+    const [readiness] = useState(() => new ViewerReadiness());
+    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);
+    const [loaded, setLoaded] = useState({});
+    // Progress of the current load; `id` remounts the bar so it never animates backwards into a new load.
+    const [bar, setBar] = useState(null);
+    const download = useRef(NO_DOWNLOAD);
+    useEffect(() => {
+        readiness.pending();
+        download.current = NO_DOWNLOAD;
+        if (image)
+            return; // Drawn below.
+        if (!source) {
+            readiness.finish();
+            return;
+        }
+        const controller = new AbortController();
+        const { signal } = controller;
+        const id = ++loadCount;
+        let overall = 0;
+        const report = (stage, totalProgress) => {
+            if (signal.aborted)
+                return;
+            overall = Math.max(overall, totalProgress);
+            setBar({ id, value: overall });
+            callbacks.current.onProgress?.({ ...download.current, totalProgress: overall, stage });
+        };
+        const fetchWithProgress = async (url) => {
+            report('download', 0);
+            const response = await fetch(url, { signal });
+            if (!response.ok)
+                throw new Error(`Failed to load ${url}: HTTP ${response.status}`);
+            return readResponse(response, signal, (progress) => {
+                download.current = progress;
+                report('download', DOWNLOAD_SHARE * (progress.progress ?? 0));
+            });
+        };
+        (async () => {
+            const bytes = typeof source === 'string' ? await fetchWithProgress(source) : source;
+            report('decode', typeof source === 'string' ? DOWNLOAD_SHARE : 0);
+            await afterPaint();
+            signal.throwIfAborted();
+            const decoded = await decodeHdrifyImage(bytes);
+            signal.throwIfAborted();
+            setLoaded({ source, image: decoded });
+        })().catch((reason) => {
+            if (signal.aborted)
+                return;
+            const error = reason instanceof Error ? reason : new Error(String(reason));
+            readiness.finish(error);
+            setBar(null);
+            setLoaded({ source, error: error.message });
+            callbacks.current.onError?.(error);
+        });
+        return () => controller.abort();
+    }, [image, source, readiness]);
+    const loading = source !== undefined && loaded.source !== source;
+    // 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.
+    const drawn = loading ? undefined : shownImage;
+    const latest = useRef({ image: drawn, settings });
+    useEffect(() => {
+        latest.current = { image: drawn, settings };
+    });
+    useEffect(() => {
+        if (!drawn)
+            return;
+        readiness.finish();
+        callbacks.current.onProgress?.({ ...download.current, totalProgress: 1, stage: 'render' });
+        callbacks.current.onLoad?.(drawn);
+    }, [drawn, readiness]);
+    useImperativeHandle(ref, () => ({
+        whenReady: () => readiness.whenReady(),
+        toBlob: async (options) => {
+            await readiness.whenReady();
+            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);
+        },
+    }), [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", 
+                        // 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') }))] }));
+}
+function OptionsPanel({ settings, image, open, onChange, onOpenChange }) {
+    const id = useId();
+    const button = useRef(null);
+    const panel = useRef(null);
+    const close = useRef(() => onOpenChange(false));
+    useEffect(() => {
+        close.current = () => onOpenChange(false);
+    });
+    // Close on Escape or a pointer press outside; composedPath sees through the element's shadow root.
+    useEffect(() => {
+        const document = button.current?.ownerDocument;
+        if (!open || !document)
+            return;
+        const outside = (event) => {
+            const path = event.composedPath();
+            if (!path.includes(panel.current) && !path.includes(button.current))
+                close.current();
+        };
+        const escape = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            close.current();
+            button.current?.focus();
+        };
+        document.addEventListener('pointerdown', outside);
+        document.addEventListener('keydown', escape);
+        return () => {
+            document.removeEventListener('pointerdown', outside);
+            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) => {
+                                    const value = event.currentTarget.valueAsNumber;
+                                    if (Number.isFinite(value))
+                                        onChange({ exposure: value });
+                                } })] }), _jsxs("label", { children: ["Size", _jsxs("select", { value: settings.fit, onChange: (event) => onChange({ fit: event.currentTarget.value }), children: [_jsx("option", { value: "contain", children: "Fit to view" }), _jsx("option", { value: "actual", children: "Actual size" })] })] }), image && (_jsxs("dl", { children: [_jsx("dt", { children: "Dimensions" }), _jsxs("dd", { children: [image.width, " \u00D7 ", image.height] }), _jsx("dt", { children: "Color space" }), _jsx("dd", { children: image.linearColorSpace }), typeof image.metadata?.format === 'string' && (_jsxs(_Fragment, { children: [_jsx("dt", { children: "Format" }), _jsx("dd", { children: image.metadata.format })] }))] }))] })] }));
+}
+//# sourceMappingURL=ImageViewer.js.map

package/dist/ImageViewer.js.map

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

package/dist/capture.d.ts

@@ -0,0 +1,21 @@
+import { type HdrifyImage, type ToneMappingType } from 'hdrify';
+/** Options for `toBlob()` on `<image-viewer>` and the {@link ImageViewer} handle. */
+export interface ImageViewerCaptureOptions {
+    /** `image/png` (default), `image/jpeg` or `image/webp`. Browsers that cannot encode a type return a PNG. */
+    type?: 'image/png' | 'image/jpeg' | 'image/webp';
+    /** Encoding quality from 0 to 1 for JPEG and WebP. */
+    quality?: number;
+    /** Output size in pixels. Without either, the image's own size; with one, the other keeps the aspect ratio. */
+    width?: number;
+    height?: number;
+}
+/** Tone map `image` into `canvas`, resizing the canvas to the image. The result is opaque sRGB. */
+export declare function drawToneMapped(canvas: HTMLCanvasElement, image: HdrifyImage, toneMapping: ToneMappingType, exposure: number): void;
+/** Output size for a capture; throws on sizes that are not positive integers up to 16384 pixels. */
+export declare function captureSize(options: ImageViewerCaptureOptions, imageWidth: number, imageHeight: number): {
+    width: number;
+    height: number;
+};
+/** Encode `image` tone mapped with the given settings, independently of what is on screen. */
+export declare function captureImage(image: HdrifyImage, toneMapping: ToneMappingType, exposure: number, options?: ImageViewerCaptureOptions): Promise<Blob>;
+//# sourceMappingURL=capture.d.ts.map

package/dist/capture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"capture.d.ts","sources":["../src/capture.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,WAAW,EAAE,KAAK,eAAe,EAAE,MAAM,QAAQ,CAAC;AAElF,qFAAqF;AACrF,MAAM,WAAW,yBAAyB;IACxC,4GAA4G;IAC5G,IAAI,CAAC,EAAE,WAAW,GAAG,YAAY,GAAG,YAAY,CAAC;IACjD,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+GAA+G;IAC/G,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,mGAAmG;AACnG,wBAAgB,cAAc,CAC5B,MAAM,EAAE,iBAAiB,EACzB,KAAK,EAAE,WAAW,EAClB,WAAW,EAAE,eAAe,EAC5B,QAAQ,EAAE,MAAM,GACf,IAAI,CAqBN;AAED,oGAAoG;AACpG,wBAAgB,WAAW,CAAC,OAAO,EAAE,yBAAyB,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM;;;EAMtG;AAED,8FAA8F;AAC9F,wBAAsB,YAAY,CAChC,KAAK,EAAE,WAAW,EAClB,WAAW,EAAE,eAAe,EAC5B,QAAQ,EAAE,MAAM,EAChB,OAAO,GAAE,yBAA8B,GACtC,OAAO,CAAC,IAAI,CAAC,CAoBf"}

package/dist/capture.js

@@ -0,0 +1,50 @@
+import { applyToneMapping } from 'hdrify';
+/** Tone map `image` into `canvas`, resizing the canvas to the image. The result is opaque sRGB. */
+export function drawToneMapped(canvas, image, toneMapping, exposure) {
+    const { width, height } = image;
+    canvas.width = width;
+    canvas.height = height;
+    // LDR from applyToneMapping is sRGB; use an srgb canvas so it displays correctly.
+    const ctx = canvas.getContext('2d', { colorSpace: 'srgb' }) ?? canvas.getContext('2d');
+    if (!ctx)
+        return;
+    const ldrRgb = applyToneMapping(image.data, width, height, {
+        toneMapping,
+        exposure,
+        sourceColorSpace: image.linearColorSpace,
+    });
+    const imageData = ctx.createImageData(width, height);
+    const pixels = imageData.data;
+    for (let destIndex = 0, sourceIndex = 0; sourceIndex < ldrRgb.length; destIndex += 4, sourceIndex += 3) {
+        pixels[destIndex] = ldrRgb[sourceIndex];
+        pixels[destIndex + 1] = ldrRgb[sourceIndex + 1];
+        pixels[destIndex + 2] = ldrRgb[sourceIndex + 2];
+        pixels[destIndex + 3] = 255;
+    }
+    ctx.putImageData(imageData, 0, 0);
+}
+/** Output size for a capture; throws on sizes that are not positive integers up to 16384 pixels. */
+export function captureSize(options, imageWidth, imageHeight) {
+    const width = options.width ?? Math.round(((options.height ?? imageHeight) * imageWidth) / imageHeight);
+    const height = options.height ?? Math.round((width * imageHeight) / imageWidth);
+    if (![width, height].every((value) => Number.isInteger(value) && value > 0 && value <= 16384))
+        throw new RangeError('Capture width and height must be positive integers up to 16384.');
+    return { width, height };
+}
+/** Encode `image` tone mapped with the given settings, independently of what is on screen. */
+export async function captureImage(image, toneMapping, exposure, options = {}) {
+    const { width, height } = captureSize(options, image.width, image.height);
+    let canvas = document.createElement('canvas');
+    drawToneMapped(canvas, image, toneMapping, exposure);
+    if (width !== image.width || height !== image.height) {
+        const scaled = document.createElement('canvas');
+        scaled.width = width;
+        scaled.height = height;
+        const ctx = scaled.getContext('2d');
+        ctx.imageSmoothingQuality = 'high';
+        ctx.drawImage(canvas, 0, 0, width, height);
+        canvas = scaled;
+    }
+    return new Promise((resolve, reject) => canvas.toBlob((blob) => (blob ? resolve(blob) : reject(new Error('The browser could not encode the image.'))), options.type ?? 'image/png', options.quality));
+}
+//# sourceMappingURL=capture.js.map

package/dist/capture.js.map

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

package/dist/decode.d.ts

@@ -0,0 +1,7 @@
+import { type HdrifyImage } from 'hdrify';
+/**
+ * Decode an OpenEXR, Radiance HDR or JPEG gain map (Ultra HDR / Adobe) file, detected from its content, not its
+ * name. Gzip-compressed files (such as `.hdr.gz`) are decompressed first.
+ */
+export declare function decodeHdrifyImage(input: ArrayBuffer | Uint8Array): Promise<HdrifyImage>;
+//# sourceMappingURL=decode.d.ts.map

package/dist/decode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"decode.d.ts","sources":["../src/decode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAqC,MAAM,QAAQ,CAAC;AAS7E;;;GAGG;AACH,wBAAsB,iBAAiB,CAAC,KAAK,EAAE,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC,WAAW,CAAC,CAO7F"}

package/dist/decode.js

@@ -0,0 +1,23 @@
+import { readExr, readHdr, readJpegGainMap } from 'hdrify';
+const startsWith = (bytes, magic) => magic.every((byte, i) => bytes[i] === byte);
+async function gunzip(bytes) {
+    const stream = new Blob([bytes]).stream().pipeThrough(new DecompressionStream('gzip'));
+    return new Uint8Array(await new Response(stream).arrayBuffer());
+}
+/**
+ * Decode an OpenEXR, Radiance HDR or JPEG gain map (Ultra HDR / Adobe) file, detected from its content, not its
+ * name. Gzip-compressed files (such as `.hdr.gz`) are decompressed first.
+ */
+export async function decodeHdrifyImage(input) {
+    let bytes = input instanceof Uint8Array ? input : new Uint8Array(input);
+    if (startsWith(bytes, [0x1f, 0x8b]))
+        bytes = await gunzip(bytes);
+    if (startsWith(bytes, [0x76, 0x2f, 0x31, 0x01]))
+        return readExr(bytes);
+    if (startsWith(bytes, [0x23, 0x3f]))
+        return readHdr(bytes); // "#?RADIANCE" / "#?RGBE"
+    if (startsWith(bytes, [0xff, 0xd8]))
+        return readJpegGainMap(bytes);
+    throw new Error('Unsupported image: expected OpenEXR, Radiance HDR or a JPEG gain map');
+}
+//# sourceMappingURL=decode.js.map

package/dist/decode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"decode.js","sources":["../src/decode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAE7E,MAAM,UAAU,GAAG,CAAC,KAAiB,EAAE,KAAe,EAAW,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC;AAEhH,KAAK,UAAU,MAAM,CAAC,KAAiB;IACrC,MAAM,MAAM,GAAG,IAAI,IAAI,CAAC,CAAC,KAAgC,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,WAAW,CAAC,IAAI,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC;IAClH,OAAO,IAAI,UAAU,CAAC,MAAM,IAAI,QAAQ,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC;AAClE,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,KAAK,UAAU,iBAAiB,CAAC,KAA+B;IACrE,IAAI,KAAK,GAAG,KAAK,YAAY,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,UAAU,CAAC,KAAK,CAAC,CAAC;IACxE,IAAI,UAAU,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAAE,KAAK,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC;IACjE,IAAI,UAAU,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAAE,OAAO,OAAO,CAAC,KAAK,CAAC,CAAC;IACvE,IAAI,UAAU,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAAE,OAAO,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,0BAA0B;IACtF,IAAI,UAAU,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAAE,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC;IACnE,MAAM,IAAI,KAAK,CAAC,sEAAsE,CAAC,CAAC;AAC1F,CAAC"}