hdrify-react 1.3.0 → 2.1.0

package/dist/index.d.ts

@@ -1,3 +1,9 @@
-export type { ToneMappingType } from 'hdrify';
+export type { HdrifyImage, ToneMappingType } from 'hdrify';
+export { captureImage, type ImageViewerCaptureOptions } from './capture.js';
+export { decodeHdrifyImage } from './decode.js';
 export { HdrifyCanvas, type HdrifyCanvasProps } from './HdrifyCanvas.js';
+export { DEFAULT_IMAGE_VIEWER_SETTINGS, EXPOSURE_SLIDER_RANGE, type ImageFit, ImageViewer, type ImageViewerHandle, type ImageViewerProps, type ImageViewerSettings, type SettingsPanelMode, TONE_MAPPING_OPTIONS, } from './ImageViewer.js';
+export type { DownloadProgress, ImageViewerProgress } from './progress.js';
+export { IMAGE_VIEWER_CSS } from './styles.js';
+export type { DisplayMode, ViewerToneMapping } from './display.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,KAAK,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EACL,6BAA6B,EAC7B,qBAAqB,EACrB,KAAK,QAAQ,EACb,WAAW,EACX,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACtB,oBAAoB,GACrB,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC"}

package/dist/index.js

@@ -1,2 +1,6 @@
+export { captureImage } from './capture.js';
+export { decodeHdrifyImage } from './decode.js';
 export { HdrifyCanvas } from './HdrifyCanvas.js';
+export { DEFAULT_IMAGE_VIEWER_SETTINGS, EXPOSURE_SLIDER_RANGE, ImageViewer, TONE_MAPPING_OPTIONS, } from './ImageViewer.js';
+export { IMAGE_VIEWER_CSS } from './styles.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAA0B,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAkC,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,YAAY,EAA0B,MAAM,mBAAmB,CAAC;AACzE,OAAO,EACL,6BAA6B,EAC7B,qBAAqB,EAErB,WAAW,EAKX,oBAAoB,GACrB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC"}

package/dist/progress.d.ts

@@ -0,0 +1,19 @@
+/** Download progress for the image file. */
+export interface DownloadProgress {
+    /** Bytes received so far. */
+    loaded: number;
+    /** File size in bytes, or null when the server does not provide a usable Content-Length. */
+    total: number | null;
+    /** Fraction from 0 to 1, or null while the file size is unknown. */
+    progress: number | null;
+}
+/** Overall loading progress reported by {@link ImageViewer}'s `onProgress` and `<image-viewer>`'s `progress` event. */
+export interface ImageViewerProgress extends DownloadProgress {
+    /** Fraction from 0 to 1 across downloading, decoding and drawing. Never moves backwards within a load. */
+    totalProgress: number;
+    /** The current step: `download`, then `decode`, then `render` (reported once, with `totalProgress` 1). */
+    stage: 'download' | 'decode' | 'render';
+}
+/** Read a response body, reporting immediately, then at most every 100 ms, and on completion. */
+export declare function readResponse(response: Response, signal: AbortSignal, onProgress: (progress: DownloadProgress) => void): Promise<Uint8Array>;
+//# sourceMappingURL=progress.d.ts.map

package/dist/progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sources":["../src/progress.ts"],"names":[],"mappings":"AAAA,4CAA4C;AAC5C,MAAM,WAAW,gBAAgB;IAC/B,6BAA6B;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,4FAA4F;IAC5F,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,oEAAoE;IACpE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED,uHAAuH;AACvH,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IAC3D,0GAA0G;IAC1G,aAAa,EAAE,MAAM,CAAC;IACtB,0GAA0G;IAC1G,KAAK,EAAE,UAAU,GAAG,QAAQ,GAAG,QAAQ,CAAC;CACzC;AAED,iGAAiG;AACjG,wBAAsB,YAAY,CAChC,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,WAAW,EACnB,UAAU,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,IAAI,GAC/C,OAAO,CAAC,UAAU,CAAC,CA0CrB"}

package/dist/progress.js

@@ -0,0 +1,47 @@
+/** Read a response body, reporting immediately, then at most every 100 ms, and on completion. */
+export async function readResponse(response, signal, onProgress) {
+    const length = Number(response.headers.get('content-length') ?? NaN);
+    // Fetch decodes compressed responses; their Content-Length describes different bytes.
+    const encoding = response.headers.get('content-encoding');
+    const total = Number.isSafeInteger(length) && length >= 0 && (!encoding || encoding === 'identity') ? length : null;
+    let loaded = 0;
+    const publish = () => onProgress({ loaded, total, progress: total ? Math.min(loaded / total, 1) : null });
+    publish();
+    const reader = response.body?.getReader();
+    if (!reader) {
+        const bytes = new Uint8Array(await response.arrayBuffer());
+        loaded = bytes.byteLength;
+        onProgress({ loaded, total: loaded, progress: 1 });
+        return bytes;
+    }
+    const cancel = () => void reader.cancel().catch(() => { });
+    signal.addEventListener('abort', cancel, { once: true });
+    try {
+        const chunks = [];
+        let published = performance.now();
+        while (true) {
+            const { done, value } = await reader.read();
+            signal.throwIfAborted();
+            if (done)
+                break;
+            chunks.push(value);
+            loaded += value.byteLength;
+            if (performance.now() - published >= 100) {
+                published = performance.now();
+                publish();
+            }
+        }
+        const bytes = new Uint8Array(loaded);
+        let offset = 0;
+        for (const chunk of chunks) {
+            bytes.set(chunk, offset);
+            offset += chunk.byteLength;
+        }
+        onProgress({ loaded, total: loaded, progress: 1 });
+        return bytes;
+    }
+    finally {
+        signal.removeEventListener('abort', cancel);
+    }
+}
+//# sourceMappingURL=progress.js.map

package/dist/progress.js.map

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

package/dist/readiness.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Readiness shared by `<image-viewer>` and the React `ImageViewer` (the ies-tools `<light-viewer>` design). The host
+ * marks each load with {@link pending} and {@link finish}, and teardown with {@link disconnect}.
+ */
+export declare class ViewerReadiness {
+    #private;
+    /** Resolve once the latest load has settled, following any newer load that starts while waiting. */
+    whenReady(): Promise<void>;
+    /** Start waiting for a load. A superseded load resolves its promise so waiters move on to the new one. */
+    pending(): void;
+    /** Settle the current load: resolve, or reject with `error`. Without a pending load, mark the viewer ready. */
+    finish(error?: unknown): void;
+    disconnect(): void;
+}
+//# sourceMappingURL=readiness.d.ts.map

package/dist/readiness.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"readiness.d.ts","sources":["../src/readiness.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,qBAAa,eAAe;;IAK1B,oGAAoG;IAC9F,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC,CAM/B;IACD,0GAA0G;IAC1G,OAAO,IAAI,IAAI,CAQd;IACD,+GAA+G;IAC/G,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAI5B;IACD,UAAU,IAAI,IAAI,CAIjB;CACF"}

package/dist/readiness.js

@@ -0,0 +1,46 @@
+const notConnected = () => settled(Promise.reject(new Error('The viewer is not connected to a document')));
+/**
+ * Readiness shared by `<image-viewer>` and the React `ImageViewer` (the ies-tools `<light-viewer>` design). The host
+ * marks each load with {@link pending} and {@link finish}, and teardown with {@link disconnect}.
+ */
+export class ViewerReadiness {
+    /** Settles when the latest load settles; replaced by every load, so a superseded load never settles a waiter. */
+    #ready = notConnected();
+    #settle;
+    /** Resolve once the latest load has settled, following any newer load that starts while waiting. */
+    async whenReady() {
+        let ready;
+        do {
+            ready = this.#ready;
+            await ready;
+        } while (ready !== this.#ready);
+    }
+    /** Start waiting for a load. A superseded load resolves its promise so waiters move on to the new one. */
+    pending() {
+        let settle;
+        const next = new Promise((resolve, reject) => {
+            settle = (error) => (error === undefined ? resolve() : reject(error));
+        });
+        this.#settle?.();
+        this.#settle = settle;
+        this.#ready = settled(next);
+    }
+    /** Settle the current load: resolve, or reject with `error`. Without a pending load, mark the viewer ready. */
+    finish(error) {
+        if (!this.#settle)
+            this.pending();
+        this.#settle(error);
+        this.#settle = undefined;
+    }
+    disconnect() {
+        this.#settle?.(new Error('The viewer was disconnected'));
+        this.#settle = undefined;
+        this.#ready = notConnected();
+    }
+}
+/** Mark a stored promise handled, so an unawaited rejection is not reported; awaiting it still rejects. */
+function settled(promise) {
+    promise.catch(() => { });
+    return promise;
+}
+//# sourceMappingURL=readiness.js.map

package/dist/readiness.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"readiness.js","sources":["../src/readiness.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC,CAAC,CAAC;AAE3G;;;GAGG;AACH,MAAM,OAAO,eAAe;IAC1B,iHAAiH;IACjH,MAAM,GAAG,YAAY,EAAE,CAAC;IACxB,OAAO,CAA6B;IAEpC,oGAAoG;IACpG,KAAK,CAAC,SAAS;QACb,IAAI,KAAoB,CAAC;QACzB,GAAG,CAAC;YACF,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC;YACpB,MAAM,KAAK,CAAC;QACd,CAAC,QAAQ,KAAK,KAAK,IAAI,CAAC,MAAM,EAAE;IAClC,CAAC;IACD,0GAA0G;IAC1G,OAAO;QACL,IAAI,MAAkC,CAAC;QACvC,MAAM,IAAI,GAAG,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;YACjD,MAAM,GAAG,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QACxE,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;QACjB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QACtB,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC;IACD,+GAA+G;IAC/G,MAAM,CAAC,KAAe;QACpB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,OAAO,EAAE,CAAC;QAClC,IAAI,CAAC,OAAQ,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;IAC3B,CAAC;IACD,UAAU;QACR,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,KAAK,CAAC,6BAA6B,CAAC,CAAC,CAAC;QACzD,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;QACzB,IAAI,CAAC,MAAM,GAAG,YAAY,EAAE,CAAC;IAC/B,CAAC;CACF;AAED,2GAA2G;AAC3G,SAAS,OAAO,CAAC,OAAsB;IACrC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;IACxB,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/dist/styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Styles for {@link ImageViewer}, rendered inline by the component so it needs no CSS loader. Re-theme it by setting
+ * `--hdrify-viewer-*` custom properties on the viewer or an ancestor; they inherit into the element's shadow root.
+ */
+export declare const IMAGE_VIEWER_CSS = "\n.hdrify-viewer {\n  --hv-bg: var(--hdrify-viewer-background, #000);\n  --hv-fg: var(--hdrify-viewer-foreground, #e5e7eb);\n  --hv-muted: var(--hdrify-viewer-muted-foreground, #a3adba);\n  --hv-popover: var(--hdrify-viewer-popover, rgb(17 24 32 / 92%));\n  --hv-border: var(--hdrify-viewer-border, #49515e);\n  --hv-input: var(--hdrify-viewer-input, #20252e);\n  --hv-primary: var(--hdrify-viewer-primary, #7dd3fc);\n  --hv-ring: var(--hdrify-viewer-ring, #7dd3fc);\n  --hv-error: var(--hdrify-viewer-destructive, #f87171);\n  --hv-radius: var(--hdrify-viewer-radius, 6px);\n  position: relative;\n  overflow: hidden;\n  box-sizing: border-box;\n  min-width: 0;\n  background: var(--hv-bg);\n  color: var(--hv-fg);\n  font: var(--hdrify-viewer-font-size, var(--vscode-font-size, 13px)) / 1.4\n    var(--hdrify-viewer-font-family, var(--vscode-font-family, system-ui, sans-serif));\n}\n.hdrify-viewer *, .hdrify-viewer *::before, .hdrify-viewer *::after { box-sizing: inherit; }\n.hdrify-viewer :is(button, input, select) { font: inherit; color: inherit; }\n.hdrify-viewer :is(button, input, select):focus-visible { outline: 2px solid var(--hv-ring); outline-offset: 1px; }\n.hdrify-viewer [hidden] { display: none !important; }\n.hdrify-viewer-viewport { position: absolute; inset: 0; display: flex; overflow: auto; }\n.hdrify-viewer-canvas { display: block; flex: none; margin: auto; }\n.hdrify-viewer[data-fit='contain'] .hdrify-viewer-canvas { width: 100%; height: 100%; object-fit: contain; }\n.hdrify-viewer-progress { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }\n.hdrify-viewer-progress-fill {\n  position: absolute; top: 0; left: 0; width: 100%; height: var(--progress-bar-height, 5px);\n  background-color: var(--progress-bar-color, rgb(255 255 255 / 50%));\n  transform-origin: top left; transition: transform 0.09s;\n}\n.hdrify-viewer-progress-fill.complete { opacity: 0; transition: transform 0.09s, opacity 0.3s 1s; }\n@media (prefers-reduced-motion: reduce) { .hdrify-viewer-progress-fill { transition: none; } }\n.hdrify-viewer-error {\n  position: absolute; top: 12px; left: 12px; right: 12px; max-width: 460px; margin: 0; padding: 10px 14px;\n  border: 1px solid color-mix(in srgb, var(--hv-error) 40%, transparent); border-radius: var(--hv-radius);\n  background: rgb(24 18 22 / 90%); color: var(--hv-error); overflow-wrap: anywhere;\n}\n.hdrify-viewer-surface {\n  border: 1px solid var(--hv-border); border-radius: var(--hv-radius); background: var(--hv-popover);\n  box-shadow: 0 6px 20px rgb(0 0 0 / 30%); backdrop-filter: blur(12px);\n}\n.hdrify-viewer-exposure {\n  position: absolute; left: 12px; top: 50%; transform: translateY(-50%); height: min(260px, calc(100% - 24px));\n  width: 52px; padding: 8px 0; display: flex; flex-direction: column; align-items: center; gap: 6px;\n}\n.hdrify-viewer-exposure output { font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }\n.hdrify-viewer-exposure input {\n  flex: 1; min-height: 0; width: 20px; margin: 0; writing-mode: vertical-lr; direction: rtl;\n  accent-color: var(--hv-primary); cursor: pointer;\n}\n.hdrify-viewer-toggle {\n  position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 36px; height: 36px;\n  padding: 0; cursor: pointer;\n}\n.hdrify-viewer-panel {\n  position: absolute; right: 12px; bottom: 56px; width: min(280px, calc(100% - 24px));\n  max-height: calc(100% - 68px); overflow: auto; padding: 12px 14px;\n}\n.hdrify-viewer-panel header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }\n.hdrify-viewer-panel header button {\n  width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--hv-radius); background: transparent;\n  font-size: 18px; line-height: 1; cursor: pointer;\n}\n.hdrify-viewer-panel label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0; }\n.hdrify-viewer-panel :is(select, input) {\n  width: 128px; padding: 3px 6px; border: 1px solid var(--hv-border); border-radius: var(--hv-radius);\n  background: var(--hv-input);\n}\n.hdrify-viewer-panel dl {\n  display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 12px 0 0; padding-top: 10px;\n  border-top: 1px solid var(--hv-border); color: var(--hv-muted); font-size: 12px;\n}\n.hdrify-viewer-panel dt { color: var(--hv-fg); }\n.hdrify-viewer-panel dd { margin: 0; overflow-wrap: anywhere; }\n";
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,gBAAgB,q3IA8E5B,CAAC"}

package/dist/styles.js

@@ -0,0 +1,84 @@
+/**
+ * Styles for {@link ImageViewer}, rendered inline by the component so it needs no CSS loader. Re-theme it by setting
+ * `--hdrify-viewer-*` custom properties on the viewer or an ancestor; they inherit into the element's shadow root.
+ */
+export const IMAGE_VIEWER_CSS = `
+.hdrify-viewer {
+  --hv-bg: var(--hdrify-viewer-background, #000);
+  --hv-fg: var(--hdrify-viewer-foreground, #e5e7eb);
+  --hv-muted: var(--hdrify-viewer-muted-foreground, #a3adba);
+  --hv-popover: var(--hdrify-viewer-popover, rgb(17 24 32 / 92%));
+  --hv-border: var(--hdrify-viewer-border, #49515e);
+  --hv-input: var(--hdrify-viewer-input, #20252e);
+  --hv-primary: var(--hdrify-viewer-primary, #7dd3fc);
+  --hv-ring: var(--hdrify-viewer-ring, #7dd3fc);
+  --hv-error: var(--hdrify-viewer-destructive, #f87171);
+  --hv-radius: var(--hdrify-viewer-radius, 6px);
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  min-width: 0;
+  background: var(--hv-bg);
+  color: var(--hv-fg);
+  font: var(--hdrify-viewer-font-size, var(--vscode-font-size, 13px)) / 1.4
+    var(--hdrify-viewer-font-family, var(--vscode-font-family, system-ui, sans-serif));
+}
+.hdrify-viewer *, .hdrify-viewer *::before, .hdrify-viewer *::after { box-sizing: inherit; }
+.hdrify-viewer :is(button, input, select) { font: inherit; color: inherit; }
+.hdrify-viewer :is(button, input, select):focus-visible { outline: 2px solid var(--hv-ring); outline-offset: 1px; }
+.hdrify-viewer [hidden] { display: none !important; }
+.hdrify-viewer-viewport { position: absolute; inset: 0; display: flex; overflow: auto; }
+.hdrify-viewer-canvas { display: block; flex: none; margin: auto; }
+.hdrify-viewer[data-fit='contain'] .hdrify-viewer-canvas { width: 100%; height: 100%; object-fit: contain; }
+.hdrify-viewer-progress { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
+.hdrify-viewer-progress-fill {
+  position: absolute; top: 0; left: 0; width: 100%; height: var(--progress-bar-height, 5px);
+  background-color: var(--progress-bar-color, rgb(255 255 255 / 50%));
+  transform-origin: top left; transition: transform 0.09s;
+}
+.hdrify-viewer-progress-fill.complete { opacity: 0; transition: transform 0.09s, opacity 0.3s 1s; }
+@media (prefers-reduced-motion: reduce) { .hdrify-viewer-progress-fill { transition: none; } }
+.hdrify-viewer-error {
+  position: absolute; top: 12px; left: 12px; right: 12px; max-width: 460px; margin: 0; padding: 10px 14px;
+  border: 1px solid color-mix(in srgb, var(--hv-error) 40%, transparent); border-radius: var(--hv-radius);
+  background: rgb(24 18 22 / 90%); color: var(--hv-error); overflow-wrap: anywhere;
+}
+.hdrify-viewer-surface {
+  border: 1px solid var(--hv-border); border-radius: var(--hv-radius); background: var(--hv-popover);
+  box-shadow: 0 6px 20px rgb(0 0 0 / 30%); backdrop-filter: blur(12px);
+}
+.hdrify-viewer-exposure {
+  position: absolute; left: 12px; top: 50%; transform: translateY(-50%); height: min(260px, calc(100% - 24px));
+  width: 52px; padding: 8px 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
+}
+.hdrify-viewer-exposure output { font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.hdrify-viewer-exposure input {
+  flex: 1; min-height: 0; width: 20px; margin: 0; writing-mode: vertical-lr; direction: rtl;
+  accent-color: var(--hv-primary); cursor: pointer;
+}
+.hdrify-viewer-toggle {
+  position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 36px; height: 36px;
+  padding: 0; cursor: pointer;
+}
+.hdrify-viewer-panel {
+  position: absolute; right: 12px; bottom: 56px; width: min(280px, calc(100% - 24px));
+  max-height: calc(100% - 68px); overflow: auto; padding: 12px 14px;
+}
+.hdrify-viewer-panel header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
+.hdrify-viewer-panel header button {
+  width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--hv-radius); background: transparent;
+  font-size: 18px; line-height: 1; cursor: pointer;
+}
+.hdrify-viewer-panel label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0; }
+.hdrify-viewer-panel :is(select, input) {
+  width: 128px; padding: 3px 6px; border: 1px solid var(--hv-border); border-radius: var(--hv-radius);
+  background: var(--hv-input);
+}
+.hdrify-viewer-panel dl {
+  display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 12px 0 0; padding-top: 10px;
+  border-top: 1px solid var(--hv-border); color: var(--hv-muted); font-size: 12px;
+}
+.hdrify-viewer-panel dt { color: var(--hv-fg); }
+.hdrify-viewer-panel dd { margin: 0; overflow-wrap: anywhere; }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8E/B,CAAC"}

package/dist/webgpuDisplay.d.ts

@@ -0,0 +1,4 @@
+import { type ImageDisplay } from './display.js';
+/** A single FP16 texture drawn directly with WebGPU; unsupported presentation falls back to SDR. */
+export declare function createWebGPUDisplay(canvas: HTMLCanvasElement, onFailure: () => void): Promise<ImageDisplay>;
+//# sourceMappingURL=webgpuDisplay.d.ts.map

package/dist/webgpuDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"webgpuDisplay.d.ts","sources":["../src/webgpuDisplay.ts"],"names":[],"mappings":"AAEA,OAAO,EAAiB,KAAK,YAAY,EAA0B,MAAM,cAAc,CAAC;AAkExF,oGAAoG;AACpG,wBAAsB,mBAAmB,CAAC,MAAM,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,YAAY,CAAC,CAoIjH"}

package/dist/webgpuDisplay.js

@@ -0,0 +1,208 @@
+import { displayPixels } from './display.js';
+// One full-screen triangle. UVs keep the source's first row at the top of the canvas.
+// The canvas is tagged sRGB, so encode linear Rec.709 explicitly, preserving signed HDR values.
+const SHADER = `
+struct Vertex { @builtin(position) position: vec4f, @location(0) uv: vec2f };
+@vertex fn vertex(@builtin(vertex_index) index: u32) -> Vertex {
+  let uv = vec2f(f32((index << 1u) & 2u), f32(index & 2u));
+  return Vertex(vec4f(uv.x * 2.0 - 1.0, 1.0 - uv.y * 2.0, 0.0, 1.0), uv);
+}
+@group(0) @binding(0) var imageSampler: sampler;
+@group(0) @binding(1) var image: texture_2d<f32>;
+@group(0) @binding(2) var<uniform> exposure: f32;
+@fragment fn fragment(input: Vertex) -> @location(0) vec4f {
+  let rgb = textureSample(image, imageSampler, input.uv).rgb * exposure;
+  let magnitude = abs(rgb);
+  let encoded = select(1.055 * pow(magnitude, vec3f(1.0 / 2.4)) - 0.055,
+    magnitude * 12.92, magnitude <= vec3f(0.0031308));
+  return vec4f(sign(rgb) * encoded, 1.0);
+}`;
+// Saturating float32 -> binary16, including subnormals and round-to-nearest-even.
+const float = new Float32Array(1);
+const bits = new Uint32Array(float.buffer);
+function toHalfFloat(value) {
+    float[0] = Math.max(-65504, Math.min(65504, value));
+    const word = bits[0];
+    const sign = (word >>> 16) & 0x8000;
+    const exponent = ((word >>> 23) & 0xff) - 127;
+    if (exponent < -25)
+        return sign;
+    const mantissa = (word & 0x7fffff) | 0x800000;
+    const shift = exponent < -14 ? -exponent - 1 : 13;
+    const rounded = (mantissa + (2 ** (shift - 1) - 1) + ((mantissa >>> shift) & 1)) >>> shift;
+    return sign | (exponent < -14 ? rounded : ((exponent + 14) << 10) + rounded);
+}
+// One capability probe shared by every viewer in this page. Cache failure too.
+let hdrCapability;
+async function probeHdrCapability(document) {
+    const adapter = await document.defaultView?.navigator.gpu?.requestAdapter();
+    if (!adapter)
+        return false;
+    const device = await adapter.requestDevice();
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('webgpu');
+    try {
+        if (!context)
+            return false;
+        context.configure({
+            device,
+            format: 'rgba16float',
+            colorSpace: 'srgb',
+            alphaMode: 'opaque',
+            toneMapping: { mode: 'extended' },
+        });
+        const configuration = context.getConfiguration();
+        return (configuration?.format === 'rgba16float' &&
+            configuration.toneMapping?.mode === 'extended' &&
+            configuration.colorSpace === 'srgb');
+    }
+    finally {
+        context?.unconfigure();
+        device.destroy();
+    }
+}
+/** A single FP16 texture drawn directly with WebGPU; unsupported presentation falls back to SDR. */
+export async function createWebGPUDisplay(canvas, onFailure) {
+    const supported = await (hdrCapability ??= probeHdrCapability(canvas.ownerDocument).catch(() => false));
+    if (!supported)
+        throw new Error('WebGPU extended FP16 presentation is not supported');
+    // Adapters can create only one device; each viewer acquires its own rendering resources.
+    const adapter = await canvas.ownerDocument.defaultView?.navigator.gpu?.requestAdapter();
+    if (!adapter)
+        throw new Error('WebGPU is not available');
+    const device = await adapter.requestDevice({
+        requiredLimits: { maxTextureDimension2D: adapter.limits.maxTextureDimension2D },
+    });
+    let disposed = false;
+    let map;
+    let exposureBuffer;
+    let context = null;
+    const fail = () => {
+        if (!disposed)
+            onFailure();
+    };
+    const dispose = () => {
+        if (disposed)
+            return;
+        disposed = true;
+        device.removeEventListener('uncapturederror', fail);
+        context?.unconfigure();
+        map?.destroy();
+        exposureBuffer?.destroy();
+        device.destroy();
+    };
+    try {
+        device.addEventListener('uncapturederror', fail);
+        void device.lost.then(fail);
+        context = canvas.getContext('webgpu');
+        if (!context)
+            throw new Error('WebGPU canvas is not available');
+        context.configure({
+            device,
+            format: 'rgba16float',
+            colorSpace: 'srgb',
+            alphaMode: 'opaque',
+            toneMapping: { mode: 'extended' },
+        });
+        const surface = context;
+        const module = device.createShaderModule({ code: SHADER });
+        const pipeline = await device.createRenderPipelineAsync({
+            layout: 'auto',
+            vertex: { module, entryPoint: 'vertex' },
+            fragment: { module, entryPoint: 'fragment', targets: [{ format: 'rgba16float' }] },
+            primitive: { topology: 'triangle-list' },
+        });
+        const uniformBuffer = device.createBuffer({ size: 16, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+        exposureBuffer = uniformBuffer;
+        const exposureValue = new Float32Array(1);
+        const sampler = device.createSampler({ magFilter: 'linear', minFilter: 'linear' });
+        let bindings;
+        let previousImage;
+        let previousToneMapping;
+        let previousExposure;
+        let wideSource = false;
+        let size = '';
+        return {
+            mode: 'hdr',
+            draw(image, toneMapping, exposure) {
+                if (disposed)
+                    return;
+                // Ordinary exposure-only changes are a uniform update. Explicit tone mappers use the same HDRify
+                // operators as SDR, retaining float output rather than quantizing through an 8-bit preview.
+                if (previousImage !== image ||
+                    previousToneMapping !== toneMapping ||
+                    ((toneMapping !== 'none' || wideSource) && previousExposure !== exposure)) {
+                    const pixels = displayPixels(image, toneMapping, toneMapping === 'none' ? 1 : exposure);
+                    wideSource =
+                        toneMapping === 'none' && pixels.some((value, index) => index % 4 !== 3 && Math.abs(value) > 65504);
+                    // Bake exposure for values outside FP16's range, so lowering exposure can recover bright
+                    // float32 source highlights rather than magnifying an already-clipped upload.
+                    if (wideSource)
+                        for (let i = 0; i < pixels.length; i++)
+                            if (i % 4 !== 3)
+                                pixels[i] = pixels[i] * exposure;
+                    const halves = new Uint16Array(pixels.length);
+                    for (let i = 0; i < pixels.length; i++)
+                        halves[i] = toHalfFloat(pixels[i]);
+                    if (!map || map.width !== image.width || map.height !== image.height) {
+                        map?.destroy();
+                        map = device.createTexture({
+                            size: [image.width, image.height],
+                            format: 'rgba16float',
+                            usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
+                        });
+                        bindings = device.createBindGroup({
+                            layout: pipeline.getBindGroupLayout(0),
+                            entries: [
+                                { binding: 0, resource: sampler },
+                                { binding: 1, resource: map.createView() },
+                                { binding: 2, resource: { buffer: uniformBuffer } },
+                            ],
+                        });
+                    }
+                    device.queue.writeTexture({ texture: map }, halves, { bytesPerRow: image.width * 8 }, [
+                        image.width,
+                        image.height,
+                    ]);
+                    previousImage = image;
+                    previousToneMapping = toneMapping;
+                }
+                previousExposure = exposure;
+                exposureValue[0] = toneMapping === 'none' && !wideSource ? exposure : 1;
+                device.queue.writeBuffer(uniformBuffer, 0, exposureValue);
+                const encoder = device.createCommandEncoder();
+                const pass = encoder.beginRenderPass({
+                    colorAttachments: [
+                        {
+                            view: surface.getCurrentTexture().createView(),
+                            loadOp: 'clear',
+                            storeOp: 'store',
+                            clearValue: { r: 0, g: 0, b: 0, a: 1 },
+                        },
+                    ],
+                });
+                pass.setPipeline(pipeline);
+                pass.setBindGroup(0, bindings);
+                pass.draw(3);
+                pass.end();
+                device.queue.submit([encoder.finish()]);
+            },
+            resize(width, height, pixelRatio) {
+                const ratio = Math.min(pixelRatio, device.limits.maxTextureDimension2D / Math.max(width, height));
+                const next = `${width}:${height}:${ratio}`;
+                if (next === size)
+                    return;
+                size = next;
+                canvas.width = Math.max(1, Math.floor(width * ratio));
+                canvas.height = Math.max(1, Math.floor(height * ratio));
+            },
+            complete: () => device.queue.onSubmittedWorkDone(),
+            dispose,
+        };
+    }
+    catch (error) {
+        dispose();
+        throw error;
+    }
+}
+//# sourceMappingURL=webgpuDisplay.js.map

package/dist/webgpuDisplay.js.map

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

package/package.json

@@ -1,15 +1,19 @@
 {
   "name": "hdrify-react",
-  "version": "1.3.0",
-  "description": "React component for displaying HDR HdrifyImage with tone mapping and exposure",
+  "version": "2.1.0",
+  "description": "React component and <image-viewer> web component for displaying HDR images with tone mapping and exposure",
   "keywords": [
     "exr",
     "float-image",
     "gainmap",
     "hdr",
+    "image-viewer",
+    "openexr",
+    "radiance",
     "react",
     "tone-mapping",
-    "ultra-hdr"
+    "ultra-hdr",
+    "web-component"
   ],
   "bugs": {
     "url": "https://github.com/bhouston/hdrify/issues"
@@ -22,33 +26,58 @@
     "directory": "packages/hdrify-react"
   },
   "files": [
-    "dist"
+    "dist",
+    "!dist/**/*.tsbuildinfo"
   ],
   "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "sideEffects": [
+    "./dist/element.js",
+    "./dist/image-viewer.js"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./element": {
+      "types": "./dist/element.d.ts",
+      "default": "./dist/element.js"
+    },
+    "./image-viewer.js": "./dist/image-viewer.js",
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json",
+    "./decode": {
+      "types": "./dist/decode.d.ts",
+      "default": "./dist/decode.js"
+    }
+  },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "hdrify": "1.3.0"
+    "hdrify": "2.1.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.0",
-    "@types/react-dom": "^19.2.0"
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@webgpu/types": "^0.1.74",
+    "esbuild": "^0.27.3",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "engines": {
-    "node": ">=22.0.0"
+    "node": ">=22"
   },
   "scripts": {
-    "build": "tsc",
-    "tsc": "tsc",
+    "build": "tsc && node scripts/build-element.mjs",
+    "tsc": "tsc --noEmit",
     "dev": "tsc --watch"
   }
 }