hdrify-react 1.2.2 → 1.4.0

package/dist/index.d.ts

@@ -1,3 +1,8 @@
-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';
 //# 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"}

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/package.json

@@ -1,15 +1,19 @@
 {
   "name": "hdrify-react",
-  "version": "1.2.2",
-  "description": "React component for displaying HDR HdrifyImage with tone mapping and exposure",
+  "version": "1.4.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,53 @@
     "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"
+  },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "hdrify": "1.2.2"
+    "hdrify": "1.4.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.0",
-    "@types/react-dom": "^19.2.0"
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "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": ">=26.0.0"
+    "node": ">=22"
   },
   "scripts": {
-    "build": "tsc",
-    "tsc": "tsc",
+    "build": "tsc && node scripts/build-element.mjs",
+    "tsc": "tsc --noEmit",
     "dev": "tsc --watch"
   }
 }