@substrate-system/blur-hash 0.0.39 → 0.0.42

package/README.md

@@ -9,9 +9,12 @@
 [![license](https://img.shields.io/badge/license-Big_Time-blue?style=flat-square)](LICENSE)
 
 
-This is the ["blur-up" image loading technique](https://css-tricks.com/the-blur-up-technique-for-loading-background-images/),
-with the [blur-hash algorithm](https://blurha.sh/),
-as a [web component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components).
+This is the
+["blur-up" image loading technique](https://css-tricks.com/the-blur-up-technique-for-loading-background-images/),
+with the
+[blur-hash algorithm](https://blurha.sh/),
+as a
+[web component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components).
 
 [See a live demonstration](https://substrate-system.github.io/blur-hash/)
 
@@ -37,7 +40,9 @@ as a [web component](https://developer.mozilla.org/en-US/docs/Web/API/Web_compon
   * [Import CSS](#import-css)
   * [variables](#variables)
 - [Create the blur-hash string](#create-the-blur-hash-string)
+  * [1. Install the peer dependency](#1-install-the-peer-dependency)
   * [JS API](#js-api)
+  * [From raw bytes (Cloudflare Workers)](#from-raw-bytes-cloudflare-workers)
   * [CLI](#cli)
 
 <!-- tocstop -->
@@ -101,6 +106,7 @@ Use the tag in HTML.
 ```
 
 ## Use
+
 Call the static method `.define` in JS, then use the tag in HTML.
 
 ```js
@@ -120,8 +126,9 @@ BlurHash.define()
 ```
 
 ### Server-side rendering
-Following convention, this module exposes `render` function at `/html`. It
-returns a plain string of markup.
+
+This module exposes a `render` function at `/html`. It returns a plain string
+of HTML.
 
 ```js
 import { render } from '@substrate-system/blur-hash/html'
@@ -130,7 +137,7 @@ const htmlString = render({
     alt: 'hello',
     width: 30,
     height: 30,
-    placeholder: 'UHGIM_X900xC~XWFE0xt00o3%1oz-;t7i|IV',
+    placeholder: 'UQGudvt700t3~XbIE1xt9Hazs:of.8s:V[Rj',
     src: 'abc.jpg'
 })
 ```
@@ -162,18 +169,19 @@ type Attrs = {
 #### other attributes
 
 #### time
+
 The time for css transitions and animation. This is set as a CSS variable.
 
 #### width & height
+
 The dimensions for the image
 
 ----------------------------------------------
 
 ### `.reset`
 
-Change the image, and do the blur-up thing again.
-
-Takes a new `src` string, new placeholder string, and all other attributes.
+Change the image, and do the blur-up thing again. Takes a new `src` string,
+new placeholder string, and all other attributes.
 
 If `width` and `height` are not passed in, it will keep the existing width
 and height.
@@ -237,20 +245,60 @@ __CSS variables__
 * `--blur-hash-opactiy` -- the opacity to use for the placeholder image,
   default is `0.4`
 
+
+---
+
+
 ## Create the blur-hash string
 
 Use Node to create the `placeholder` attribute, the string consumed
 by blur-hash.
 
+### 1. Install the peer dependency
+
+The hash generator uses [`@cf-wasm/photon`][photon], a WASM build of the
+Photon image library, to decode and resize images. It is an *optional* peer
+dependency, so it is not installed automatically. Add it to your project to
+use the `./hash` or `./photon` entrypoints:
+
+```sh
+npm i @cf-wasm/photon
+```
+
+Browser-only consumers of the `<blur-hash>` component do not need it.
+
+[photon]: https://github.com/fineshopdesign/cf-wasm/tree/main/packages/photon
+
 ### JS API
 
+Read an image file from disk (Node only) and get back the blurhash plus the
+original image's dimensions:
+
 ```js
-import { createString } from '@substrate-system/blur-hash/hash'
+import { createBlurhash } from '@substrate-system/blur-hash/hash'
 
-const hash = await createString('../example/100.jpg')
-// => 'UHGIM_X900xC~XWFE0xt00o3%1oz-;t7i|IV'
+const { hash, width, height } = await createBlurhash('./example/100.jpg')
+// hash   => 'UQGudvt700t3~XbIE1xt9Hazs:of.8s:V[Rj'
+// width  => 750
+// height => 600
 ```
 
+
+### From raw bytes (Cloudflare Workers)
+
+If you already have the image bytes in memory -- for example inside a
+Cloudflare Worker -- use the `./photon` entrypoint, which takes a `Uint8Array`
+and runs in `workerd`:
+
+```js
+import { encodeImage } from '@substrate-system/blur-hash/photon'
+
+const { hash, width, height } = await encodeImage(bytes)
+```
+
+Both entrypoints run under plain Node and Cloudflare Workers -- the correct
+`@cf-wasm/photon` build resolves automatically per runtime.
+
 ### CLI
 
 This package includes a CLI tool to create the placeholder string. After
@@ -269,3 +317,7 @@ On mac os,
 ```sh
 npx blur ./my-file.jpg | pbcopy
 ```
+
+```
+/ed3d-plan-and-execute:execute-implementation-plan /Users/nick/code/blur-hash/docs/implementation-plans/2026-07-04-photon-blurhash-generation/ /Users/nick/code/blur-hash/
+```

package/dist/bin/index.d.ts

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+import { type BlurhashResult } from './photon.js';
+/**
+ * Create a blur-hash from a local image file.
+ */
+export declare function createBlurhash(filepath: string): Promise<BlurhashResult>;
+//# sourceMappingURL=index.d.ts.map

package/dist/bin/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../bin/index.ts"],"names":[],"mappings":";AAaA,OAAO,EAAe,KAAK,cAAc,EAAE,MAAM,aAAa,CAAA;AAE9D;;GAEG;AACH,wBAAsB,cAAc,CAChC,QAAQ,EAAC,MAAM,GACjB,OAAO,CAAC,cAAc,CAAC,CAGxB"}

package/dist/bin/index.js

@@ -1,15 +1,17 @@
 #!/usr/bin/env node
-"use strict";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import yargs from "yargs";
-import sharp from "sharp";
 import { hideBin } from "yargs/helpers";
-import { encode } from "blurhash";
+import { readFile } from "node:fs/promises";
 import { resolve } from "node:path";
 import { fileURLToPath } from "node:url";
-export const createString = async (filepath) => {
-  const { data, info } = await sharp(filepath).raw().ensureAlpha().toBuffer({ resolveWithObject: true });
-  return encode(new Uint8ClampedArray(data.buffer), info.width, info.height, 4, 4);
-};
+import { encodeImage } from "./photon.js";
+async function createBlurhash(filepath) {
+  const bytes = await readFile(filepath);
+  return encodeImage(new Uint8Array(bytes));
+}
+__name(createBlurhash, "createBlurhash");
 const pathToThisFile = resolve(fileURLToPath(import.meta.url));
 const pathPassedToNode = resolve(process.argv[1]);
 const isThisFileBeingRunViaCLI = pathToThisFile.includes(pathPassedToNode);
@@ -18,7 +20,10 @@ if (isThisFileBeingRunViaCLI) {
     "`npx blur my-fiile.jpg`",
     "Create a small placeholder string from a local file"
   ).usage("Usage: blur <filename>").argv;
-  const filename = args._[0];
-  const hash = await createString(filename);
-  process.stdout.write(hash + "\n");
+  const filename = String(args._[0]);
+  const result = await createBlurhash(filename);
+  process.stdout.write(result.hash + "\n");
 }
+export {
+  createBlurhash
+};

package/dist/bin/photon.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The result of blurhash encoding: the hash string and original image
+ * dimensions.
+ */
+export type BlurhashResult = {
+    hash: string;
+    width: number;
+    height: number;
+};
+/**
+ * Decode raw image bytes and produce a blurhash string plus the original
+ * image's dimensions. Runtime-agnostic: the plain `@cf-wasm/photon` specifier
+ * resolves to the `node` build under Node and the `workerd` build under
+ * wrangler, so this runs unchanged in both.
+ *
+ * Throws if the bytes cannot be decoded as an image.
+ */
+export declare function encodeImage(bytes: Uint8Array): Promise<BlurhashResult>;
+//# sourceMappingURL=photon.d.ts.map

package/dist/bin/photon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"photon.d.ts","sourceRoot":"","sources":["../../bin/photon.ts"],"names":[],"mappings":"AAcA;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG;IACzB,IAAI,EAAC,MAAM,CAAC;IACZ,KAAK,EAAC,MAAM,CAAC;IACb,MAAM,EAAC,MAAM,CAAC;CACjB,CAAA;AAED;;;;;;;GAOG;AACH,wBAAsB,WAAW,CAC7B,KAAK,EAAC,UAAU,GAClB,OAAO,CAAC,cAAc,CAAC,CA4CxB"}

package/dist/bin/photon.js

@@ -0,0 +1,46 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { encode } from "blurhash";
+import {
+  PhotonImage,
+  SamplingFilter,
+  resize
+} from "@cf-wasm/photon";
+const BLURHASH_SIZE = 32;
+const COMPONENTS = 4;
+async function encodeImage(bytes) {
+  let original = null;
+  let resized = null;
+  try {
+    original = PhotonImage.new_from_byteslice(bytes);
+    const width = original.get_width();
+    const height = original.get_height();
+    resized = resize(
+      original,
+      BLURHASH_SIZE,
+      BLURHASH_SIZE,
+      SamplingFilter.Nearest
+    );
+    const raw = resized.get_raw_pixels();
+    const pixels = new Uint8ClampedArray(
+      raw.buffer,
+      raw.byteOffset,
+      raw.byteLength
+    );
+    const hash = encode(
+      pixels,
+      BLURHASH_SIZE,
+      BLURHASH_SIZE,
+      COMPONENTS,
+      COMPONENTS
+    );
+    return { hash, width, height };
+  } finally {
+    resized?.free();
+    original?.free();
+  }
+}
+__name(encodeImage, "encodeImage");
+export {
+  encodeImage
+};

package/dist/index.cjs

@@ -94,14 +94,14 @@ class BlurHash extends import_web_component.WebComponent.create("blur-hash") {
   }
   sharpen() {
     const img = this.qs("img");
-    if (img.complete && img.naturalWidth > 0) {
+    const toSharp = /* @__PURE__ */ __name(() => {
       img.classList.remove("blurry");
       img.classList.add("sharp");
+    }, "toSharp");
+    if (img.complete && img.naturalWidth > 0) {
+      requestAnimationFrame(() => requestAnimationFrame(toSharp));
     } else {
-      img.addEventListener("load", () => {
-        img.classList.remove("blurry");
-        img.classList.add("sharp");
-      });
+      img.addEventListener("load", toSharp);
     }
   }
   connectedCallback() {
@@ -137,7 +137,15 @@ class BlurHash extends import_web_component.WebComponent.create("blur-hash") {
     if (!width || !height) throw new Error("not width or not height");
     if (!src) throw new Error("Not src");
     if (!alt) throw new Error("Not alt");
-    return BlurHash.html({ classes, srcset, width, height, src, alt, placeholder });
+    return BlurHash.html({
+      classes,
+      srcset,
+      width,
+      height,
+      src,
+      alt,
+      placeholder
+    });
   }
 }
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["import { WebComponent } from '@substrate-system/web-component'\nimport { decode } from 'blurhash'\nimport { render } from './html.js'\nimport { decodeDimensions } from './decode-dimensions.js'\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'blur-hash': BlurHash\n    }\n}\n\nexport type ImgAttrs = {\n    alt:string;\n    width:string|number;\n    height:string|number;\n    placeholder:string;\n    src:string;\n    srcset?:string|null;\n    sizes?:string|null;\n    time?:number;\n    contentVisibility?:'visible'|'auto'|'hidden'|null;\n    decoding?:'sync'|'async'|'auto'|null;\n    loading?:'lazy'|'eager'|'auto'|null;\n}\n\nexport class BlurHash extends WebComponent.create('blur-hash') {\n    time:number\n    rafId:number|null = null\n\n    constructor () {\n        super()\n        const w = this.getAttribute('width')\n        const h = this.getAttribute('height')\n        const time = this.getAttribute('time')\n        this.time = time ? parseInt(time) : 800\n\n        this.style.width = '' + w\n        this.style.height = '' + h\n\n        document.body.style.setProperty('--blur-hash-time',\n            time ? '.' + (parseInt(time) / 1000 + 's') : '0.8s')\n    }\n\n    /**\n     * Change the image, and do the blur-up thing again.\n     * Will use the existing width & height if they are not passed in.\n     */\n    reset (attrs:(Omit<Omit<ImgAttrs, 'width'>, 'height'> & {\n        width?:string|number;\n        height?:string|number;\n    })):void {\n        if (attrs.width) this.style.width = '' + attrs.width\n        if (attrs.height) this.style.height = '' + attrs.height\n\n        const width = (attrs.width ?\n            (typeof attrs.width === 'string' ? parseInt(attrs.width, 10) : attrs.width) :\n            parseInt(this.style.width, 10))\n        const height = (attrs.height ?\n            (typeof attrs.height === 'string' ? parseInt(attrs.height, 10) : attrs.height) :\n            parseInt(this.style.height, 10))\n\n        this.innerHTML = BlurHash.html(Object.assign(attrs, { width, height }))\n\n        const { placeholder, src: newSrc } = attrs\n\n        this.scheduleDecode(placeholder, width, height)\n\n        this.setAttribute('src', newSrc)\n        this.setAttribute('placeholder', placeholder)\n\n        const img = this.querySelector('img')!\n        if (attrs.srcset) img.setAttribute('srcset', attrs.srcset)\n        if (attrs.sizes) img.setAttribute('sizes', attrs.sizes)\n\n        this.sharpen()\n    }\n\n    /**\n     * Decode the placeholder and paint it to the canvas on the next frame.\n     * Cancels any pending frame first, so a rapid re-call (e.g. a second\n     * `reset`) never leaves a stale decode running. Bails if the element has\n     * detached before the frame fires.\n     */\n    scheduleDecode (placeholder:string, width:number, height:number):void {\n        if (this.rafId !== null) cancelAnimationFrame(this.rafId)\n\n        const { width: dw, height: dh } = decodeDimensions(width, height)\n\n        this.rafId = requestAnimationFrame(() => {\n            this.rafId = null\n            if (!this.isConnected) return\n            const canvas = this.querySelector<HTMLCanvasElement>('canvas')\n            if (!canvas) return\n            const ctx = canvas.getContext('2d')\n            if (!ctx) return\n            const pixels = decode(placeholder, dw, dh)\n            const imageData = ctx.createImageData(dw, dh)\n            imageData.data.set(pixels)\n            ctx.putImageData(imageData, 0, 0)\n        })\n    }\n\n    disconnectedCallback ():void {\n        if (this.rafId !== null) {\n            cancelAnimationFrame(this.rafId)\n            this.rafId = null\n        }\n    }\n\n    sharpen () {\n        const img = this.qs('img')!\n        if (img.complete && img.naturalWidth > 0) {\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\n        } else {\n            img.addEventListener('load', () => {\n                img.classList.remove('blurry')\n                img.classList.add('sharp')\n            })\n        }\n    }\n\n    connectedCallback () {\n        const width = parseInt(this.getAttribute('width') ?? '')\n        const height = parseInt(this.getAttribute('height') ?? '')\n        const placeholder = this.getAttribute('placeholder')\n        if (!placeholder) throw new Error('Missing placeholder')\n        if (!width) throw new Error('Missing width')\n        if (!height) throw new Error('Missing height')\n\n        // don't render again if we dont have to\n        if (!this.innerHTML) {\n            this.innerHTML = this.render()\n        }\n\n        this.scheduleDecode(placeholder, width, height)\n        this.sharpen()\n    }\n\n    static html (attrs:ImgAttrs & { classes?:string }) {\n        return render(attrs)\n    }\n\n    /**\n     * Use the attributes to create HTML.\n     */\n    render ():string {\n        const srcset = this.getAttribute('srcset')\n        const width = this.getAttribute('width')\n        const height = this.getAttribute('height')\n        const time = this.getAttribute('time')\n        const classes = this.classList.toString()\n        const placeholder = this.getAttribute('placeholder')\n        this.time = time ? parseInt(time) : 800\n        const src = this.getAttribute('src')\n        const alt = this.getAttribute('alt')\n        if (!placeholder) throw new Error('not placeholder')\n        if (!width || !height) throw new Error('not width or not height')\n        if (!src) throw new Error('Not src')\n        if (!alt) throw new Error('Not alt')\n\n        return BlurHash.html({ classes, srcset, width, height, src, alt, placeholder })\n    }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { WebComponent } from '@substrate-system/web-component'\nimport { decode } from 'blurhash'\nimport { render } from './html.js'\nimport { decodeDimensions } from './decode-dimensions.js'\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'blur-hash': BlurHash\n    }\n}\n\nexport type ImgAttrs = {\n    alt:string;\n    width:string|number;\n    height:string|number;\n    placeholder:string;\n    src:string;\n    srcset?:string|null;\n    sizes?:string|null;\n    time?:number;\n    contentVisibility?:'visible'|'auto'|'hidden'|null;\n    decoding?:'sync'|'async'|'auto'|null;\n    loading?:'lazy'|'eager'|'auto'|null;\n}\n\nexport class BlurHash extends WebComponent.create('blur-hash') {\n    time:number\n    rafId:number|null = null\n\n    constructor () {\n        super()\n        const w = this.getAttribute('width')\n        const h = this.getAttribute('height')\n        const time = this.getAttribute('time')\n        this.time = time ? parseInt(time) : 800\n\n        this.style.width = '' + w\n        this.style.height = '' + h\n\n        document.body.style.setProperty('--blur-hash-time',\n            time ? '.' + (parseInt(time) / 1000 + 's') : '0.8s')\n    }\n\n    /**\n     * Change the image, and do the blur-up thing again.\n     * Will use the existing width & height if they are not passed in.\n     */\n    reset (attrs:(Omit<Omit<ImgAttrs, 'width'>, 'height'> & {\n        width?:string|number;\n        height?:string|number;\n    })):void {\n        if (attrs.width) this.style.width = '' + attrs.width\n        if (attrs.height) this.style.height = '' + attrs.height\n\n        const width = (attrs.width ?\n            (typeof attrs.width === 'string' ? parseInt(attrs.width, 10) : attrs.width) :\n            parseInt(this.style.width, 10))\n        const height = (attrs.height ?\n            (typeof attrs.height === 'string' ? parseInt(attrs.height, 10) : attrs.height) :\n            parseInt(this.style.height, 10))\n\n        this.innerHTML = BlurHash.html(Object.assign(attrs, { width, height }))\n\n        const { placeholder, src: newSrc } = attrs\n\n        this.scheduleDecode(placeholder, width, height)\n\n        this.setAttribute('src', newSrc)\n        this.setAttribute('placeholder', placeholder)\n\n        const img = this.querySelector('img')!\n        if (attrs.srcset) img.setAttribute('srcset', attrs.srcset)\n        if (attrs.sizes) img.setAttribute('sizes', attrs.sizes)\n\n        this.sharpen()\n    }\n\n    /**\n     * Decode the placeholder and paint it to the canvas on the next frame.\n     * Cancels any pending frame first, so a rapid re-call (e.g. a second\n     * `reset`) never leaves a stale decode running. Bails if the element has\n     * detached before the frame fires.\n     */\n    scheduleDecode (placeholder:string, width:number, height:number):void {\n        if (this.rafId !== null) cancelAnimationFrame(this.rafId)\n\n        const { width: dw, height: dh } = decodeDimensions(width, height)\n\n        this.rafId = requestAnimationFrame(() => {\n            this.rafId = null\n            if (!this.isConnected) return\n            const canvas = this.querySelector<HTMLCanvasElement>('canvas')\n            if (!canvas) return\n            const ctx = canvas.getContext('2d')\n            if (!ctx) return\n            const pixels = decode(placeholder, dw, dh)\n            const imageData = ctx.createImageData(dw, dh)\n            imageData.data.set(pixels)\n            ctx.putImageData(imageData, 0, 0)\n        })\n    }\n\n    disconnectedCallback ():void {\n        if (this.rafId !== null) {\n            cancelAnimationFrame(this.rafId)\n            this.rafId = null\n        }\n    }\n\n    sharpen () {\n        const img = this.qs('img')!\n        const toSharp = () => {\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\n        }\n\n        if (img.complete && img.naturalWidth > 0) {\n            // The image is already decoded, so the class swap would run in\n            // this same task -- before the browser ever paints the .blurry\n            // (opacity:0) frame, and a CSS transition needs that start frame\n            // to have painted or it does not run. Defer behind a double rAF\n            // so one .blurry frame is rendered first; then the opacity fade\n            // runs. A single rAF is not enough: it fires before the current\n            // frame paints.\n            requestAnimationFrame(() => requestAnimationFrame(toSharp))\n        } else {\n            // Still loading: the swap is deferred to `load`, which fires in a\n            // later task after the .blurry frame has already painted.\n            img.addEventListener('load', toSharp)\n        }\n    }\n\n    connectedCallback () {\n        const width = parseInt(this.getAttribute('width') ?? '')\n        const height = parseInt(this.getAttribute('height') ?? '')\n        const placeholder = this.getAttribute('placeholder')\n        if (!placeholder) throw new Error('Missing placeholder')\n        if (!width) throw new Error('Missing width')\n        if (!height) throw new Error('Missing height')\n\n        // don't render again if we dont have to\n        if (!this.innerHTML) {\n            this.innerHTML = this.render()\n        }\n\n        this.scheduleDecode(placeholder, width, height)\n        this.sharpen()\n    }\n\n    static html (attrs:ImgAttrs & { classes?:string }) {\n        return render(attrs)\n    }\n\n    /**\n     * Use the attributes to create HTML.\n     */\n    render ():string {\n        const srcset = this.getAttribute('srcset')\n        const width = this.getAttribute('width')\n        const height = this.getAttribute('height')\n        const time = this.getAttribute('time')\n        const classes = this.classList.toString()\n        const placeholder = this.getAttribute('placeholder')\n        this.time = time ? parseInt(time) : 800\n        const src = this.getAttribute('src')\n        const alt = this.getAttribute('alt')\n        if (!placeholder) throw new Error('not placeholder')\n        if (!width || !height) throw new Error('not width or not height')\n        if (!src) throw new Error('Not src')\n        if (!alt) throw new Error('Not alt')\n\n        return BlurHash.html({\n            classes,\n            srcset,\n            width,\n            height,\n            src,\n            alt,\n            placeholder\n        })\n    }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/index.js

@@ -72,14 +72,14 @@ class BlurHash extends WebComponent.create("blur-hash") {
   }
   sharpen() {
     const img = this.qs("img");
-    if (img.complete && img.naturalWidth > 0) {
+    const toSharp = /* @__PURE__ */ __name(() => {
       img.classList.remove("blurry");
       img.classList.add("sharp");
+    }, "toSharp");
+    if (img.complete && img.naturalWidth > 0) {
+      requestAnimationFrame(() => requestAnimationFrame(toSharp));
     } else {
-      img.addEventListener("load", () => {
-        img.classList.remove("blurry");
-        img.classList.add("sharp");
-      });
+      img.addEventListener("load", toSharp);
     }
   }
   connectedCallback() {
@@ -115,7 +115,15 @@ class BlurHash extends WebComponent.create("blur-hash") {
     if (!width || !height) throw new Error("not width or not height");
     if (!src) throw new Error("Not src");
     if (!alt) throw new Error("Not alt");
-    return BlurHash.html({ classes, srcset, width, height, src, alt, placeholder });
+    return BlurHash.html({
+      classes,
+      srcset,
+      width,
+      height,
+      src,
+      alt,
+      placeholder
+    });
   }
 }
 export {

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["import { WebComponent } from '@substrate-system/web-component'\nimport { decode } from 'blurhash'\nimport { render } from './html.js'\nimport { decodeDimensions } from './decode-dimensions.js'\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'blur-hash': BlurHash\n    }\n}\n\nexport type ImgAttrs = {\n    alt:string;\n    width:string|number;\n    height:string|number;\n    placeholder:string;\n    src:string;\n    srcset?:string|null;\n    sizes?:string|null;\n    time?:number;\n    contentVisibility?:'visible'|'auto'|'hidden'|null;\n    decoding?:'sync'|'async'|'auto'|null;\n    loading?:'lazy'|'eager'|'auto'|null;\n}\n\nexport class BlurHash extends WebComponent.create('blur-hash') {\n    time:number\n    rafId:number|null = null\n\n    constructor () {\n        super()\n        const w = this.getAttribute('width')\n        const h = this.getAttribute('height')\n        const time = this.getAttribute('time')\n        this.time = time ? parseInt(time) : 800\n\n        this.style.width = '' + w\n        this.style.height = '' + h\n\n        document.body.style.setProperty('--blur-hash-time',\n            time ? '.' + (parseInt(time) / 1000 + 's') : '0.8s')\n    }\n\n    /**\n     * Change the image, and do the blur-up thing again.\n     * Will use the existing width & height if they are not passed in.\n     */\n    reset (attrs:(Omit<Omit<ImgAttrs, 'width'>, 'height'> & {\n        width?:string|number;\n        height?:string|number;\n    })):void {\n        if (attrs.width) this.style.width = '' + attrs.width\n        if (attrs.height) this.style.height = '' + attrs.height\n\n        const width = (attrs.width ?\n            (typeof attrs.width === 'string' ? parseInt(attrs.width, 10) : attrs.width) :\n            parseInt(this.style.width, 10))\n        const height = (attrs.height ?\n            (typeof attrs.height === 'string' ? parseInt(attrs.height, 10) : attrs.height) :\n            parseInt(this.style.height, 10))\n\n        this.innerHTML = BlurHash.html(Object.assign(attrs, { width, height }))\n\n        const { placeholder, src: newSrc } = attrs\n\n        this.scheduleDecode(placeholder, width, height)\n\n        this.setAttribute('src', newSrc)\n        this.setAttribute('placeholder', placeholder)\n\n        const img = this.querySelector('img')!\n        if (attrs.srcset) img.setAttribute('srcset', attrs.srcset)\n        if (attrs.sizes) img.setAttribute('sizes', attrs.sizes)\n\n        this.sharpen()\n    }\n\n    /**\n     * Decode the placeholder and paint it to the canvas on the next frame.\n     * Cancels any pending frame first, so a rapid re-call (e.g. a second\n     * `reset`) never leaves a stale decode running. Bails if the element has\n     * detached before the frame fires.\n     */\n    scheduleDecode (placeholder:string, width:number, height:number):void {\n        if (this.rafId !== null) cancelAnimationFrame(this.rafId)\n\n        const { width: dw, height: dh } = decodeDimensions(width, height)\n\n        this.rafId = requestAnimationFrame(() => {\n            this.rafId = null\n            if (!this.isConnected) return\n            const canvas = this.querySelector<HTMLCanvasElement>('canvas')\n            if (!canvas) return\n            const ctx = canvas.getContext('2d')\n            if (!ctx) return\n            const pixels = decode(placeholder, dw, dh)\n            const imageData = ctx.createImageData(dw, dh)\n            imageData.data.set(pixels)\n            ctx.putImageData(imageData, 0, 0)\n        })\n    }\n\n    disconnectedCallback ():void {\n        if (this.rafId !== null) {\n            cancelAnimationFrame(this.rafId)\n            this.rafId = null\n        }\n    }\n\n    sharpen () {\n        const img = this.qs('img')!\n        if (img.complete && img.naturalWidth > 0) {\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\n        } else {\n            img.addEventListener('load', () => {\n                img.classList.remove('blurry')\n                img.classList.add('sharp')\n            })\n        }\n    }\n\n    connectedCallback () {\n        const width = parseInt(this.getAttribute('width') ?? '')\n        const height = parseInt(this.getAttribute('height') ?? '')\n        const placeholder = this.getAttribute('placeholder')\n        if (!placeholder) throw new Error('Missing placeholder')\n        if (!width) throw new Error('Missing width')\n        if (!height) throw new Error('Missing height')\n\n        // don't render again if we dont have to\n        if (!this.innerHTML) {\n            this.innerHTML = this.render()\n        }\n\n        this.scheduleDecode(placeholder, width, height)\n        this.sharpen()\n    }\n\n    static html (attrs:ImgAttrs & { classes?:string }) {\n        return render(attrs)\n    }\n\n    /**\n     * Use the attributes to create HTML.\n     */\n    render ():string {\n        const srcset = this.getAttribute('srcset')\n        const width = this.getAttribute('width')\n        const height = this.getAttribute('height')\n        const time = this.getAttribute('time')\n        const classes = this.classList.toString()\n        const placeholder = this.getAttribute('placeholder')\n        this.time = time ? parseInt(time) : 800\n        const src = this.getAttribute('src')\n        const alt = this.getAttribute('alt')\n        if (!placeholder) throw new Error('not placeholder')\n        if (!width || !height) throw new Error('not width or not height')\n        if (!src) throw new Error('Not src')\n        if (!alt) throw new Error('Not alt')\n\n        return BlurHash.html({ classes, srcset, width, height, src, alt, placeholder })\n    }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { WebComponent } from '@substrate-system/web-component'\nimport { decode } from 'blurhash'\nimport { render } from './html.js'\nimport { decodeDimensions } from './decode-dimensions.js'\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'blur-hash': BlurHash\n    }\n}\n\nexport type ImgAttrs = {\n    alt:string;\n    width:string|number;\n    height:string|number;\n    placeholder:string;\n    src:string;\n    srcset?:string|null;\n    sizes?:string|null;\n    time?:number;\n    contentVisibility?:'visible'|'auto'|'hidden'|null;\n    decoding?:'sync'|'async'|'auto'|null;\n    loading?:'lazy'|'eager'|'auto'|null;\n}\n\nexport class BlurHash extends WebComponent.create('blur-hash') {\n    time:number\n    rafId:number|null = null\n\n    constructor () {\n        super()\n        const w = this.getAttribute('width')\n        const h = this.getAttribute('height')\n        const time = this.getAttribute('time')\n        this.time = time ? parseInt(time) : 800\n\n        this.style.width = '' + w\n        this.style.height = '' + h\n\n        document.body.style.setProperty('--blur-hash-time',\n            time ? '.' + (parseInt(time) / 1000 + 's') : '0.8s')\n    }\n\n    /**\n     * Change the image, and do the blur-up thing again.\n     * Will use the existing width & height if they are not passed in.\n     */\n    reset (attrs:(Omit<Omit<ImgAttrs, 'width'>, 'height'> & {\n        width?:string|number;\n        height?:string|number;\n    })):void {\n        if (attrs.width) this.style.width = '' + attrs.width\n        if (attrs.height) this.style.height = '' + attrs.height\n\n        const width = (attrs.width ?\n            (typeof attrs.width === 'string' ? parseInt(attrs.width, 10) : attrs.width) :\n            parseInt(this.style.width, 10))\n        const height = (attrs.height ?\n            (typeof attrs.height === 'string' ? parseInt(attrs.height, 10) : attrs.height) :\n            parseInt(this.style.height, 10))\n\n        this.innerHTML = BlurHash.html(Object.assign(attrs, { width, height }))\n\n        const { placeholder, src: newSrc } = attrs\n\n        this.scheduleDecode(placeholder, width, height)\n\n        this.setAttribute('src', newSrc)\n        this.setAttribute('placeholder', placeholder)\n\n        const img = this.querySelector('img')!\n        if (attrs.srcset) img.setAttribute('srcset', attrs.srcset)\n        if (attrs.sizes) img.setAttribute('sizes', attrs.sizes)\n\n        this.sharpen()\n    }\n\n    /**\n     * Decode the placeholder and paint it to the canvas on the next frame.\n     * Cancels any pending frame first, so a rapid re-call (e.g. a second\n     * `reset`) never leaves a stale decode running. Bails if the element has\n     * detached before the frame fires.\n     */\n    scheduleDecode (placeholder:string, width:number, height:number):void {\n        if (this.rafId !== null) cancelAnimationFrame(this.rafId)\n\n        const { width: dw, height: dh } = decodeDimensions(width, height)\n\n        this.rafId = requestAnimationFrame(() => {\n            this.rafId = null\n            if (!this.isConnected) return\n            const canvas = this.querySelector<HTMLCanvasElement>('canvas')\n            if (!canvas) return\n            const ctx = canvas.getContext('2d')\n            if (!ctx) return\n            const pixels = decode(placeholder, dw, dh)\n            const imageData = ctx.createImageData(dw, dh)\n            imageData.data.set(pixels)\n            ctx.putImageData(imageData, 0, 0)\n        })\n    }\n\n    disconnectedCallback ():void {\n        if (this.rafId !== null) {\n            cancelAnimationFrame(this.rafId)\n            this.rafId = null\n        }\n    }\n\n    sharpen () {\n        const img = this.qs('img')!\n        const toSharp = () => {\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\n        }\n\n        if (img.complete && img.naturalWidth > 0) {\n            // The image is already decoded, so the class swap would run in\n            // this same task -- before the browser ever paints the .blurry\n            // (opacity:0) frame, and a CSS transition needs that start frame\n            // to have painted or it does not run. Defer behind a double rAF\n            // so one .blurry frame is rendered first; then the opacity fade\n            // runs. A single rAF is not enough: it fires before the current\n            // frame paints.\n            requestAnimationFrame(() => requestAnimationFrame(toSharp))\n        } else {\n            // Still loading: the swap is deferred to `load`, which fires in a\n            // later task after the .blurry frame has already painted.\n            img.addEventListener('load', toSharp)\n        }\n    }\n\n    connectedCallback () {\n        const width = parseInt(this.getAttribute('width') ?? '')\n        const height = parseInt(this.getAttribute('height') ?? '')\n        const placeholder = this.getAttribute('placeholder')\n        if (!placeholder) throw new Error('Missing placeholder')\n        if (!width) throw new Error('Missing width')\n        if (!height) throw new Error('Missing height')\n\n        // don't render again if we dont have to\n        if (!this.innerHTML) {\n            this.innerHTML = this.render()\n        }\n\n        this.scheduleDecode(placeholder, width, height)\n        this.sharpen()\n    }\n\n    static html (attrs:ImgAttrs & { classes?:string }) {\n        return render(attrs)\n    }\n\n    /**\n     * Use the attributes to create HTML.\n     */\n    render ():string {\n        const srcset = this.getAttribute('srcset')\n        const width = this.getAttribute('width')\n        const height = this.getAttribute('height')\n        const time = this.getAttribute('time')\n        const classes = this.classList.toString()\n        const placeholder = this.getAttribute('placeholder')\n        this.time = time ? parseInt(time) : 800\n        const src = this.getAttribute('src')\n        const alt = this.getAttribute('alt')\n        if (!placeholder) throw new Error('not placeholder')\n        if (!width || !height) throw new Error('not width or not height')\n        if (!src) throw new Error('Not src')\n        if (!alt) throw new Error('Not alt')\n\n        return BlurHash.html({\n            classes,\n            srcset,\n            width,\n            height,\n            src,\n            alt,\n            placeholder\n        })\n    }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/index.min.js

@@ -1,19 +1,19 @@
-var B=Object.defineProperty;var s=(e,t)=>B(e,"name",{value:t,configurable:!0});var R=Object.defineProperty,V=s((e,t)=>R(e,"name",{value:t,configurable:!0}),"__name");function M(e){return Object.keys(e).reduce((t,r)=>{let i=e[r];return i?typeof i=="boolean"?i?(t+` ${r}`).trim():t:Array.isArray(i)?t+` ${r}="${i.join(" ")}"`:(t+` ${r}="${i}"`).trim():t},"")}s(M,"toAttributes");V(M,"toAttributes");var k=Object.defineProperty,I=s((e,t)=>k(e,"name",{value:t,configurable:!0}),"__name");function _(e){return document.createElement(e).constructor!==window.HTMLElement}s(_,"isRegistered");I(_,"isRegistered");function F(e,t){window&&"customElements"in window&&(_(e)||window.customElements.define(e,t))}s(F,"define");I(F,"define");var nt=document.querySelector.bind(document),st=document.querySelectorAll.bind(document);function $(e,t){return e.matches||(e=e.parentElement),e.matches(t)?e:e.closest(t)}s($,"match");I($,"match");var U=Object.defineProperty,g=s((e,t)=>U(e,"name",{value:t,configurable:!0}),"__name"),v=class e extends window.HTMLElement{static{s(this,"WebComponent")}static{g(this,"WebComponent")}static TAG="";TAG="";static reflectedBooleanAttributes=[];static reflectedStringAttributes=[];static get observedAttributes(){return[...new Set([...this.reflectedBooleanAttributes,...this.reflectedStringAttributes])]}static match(t){return $(t,this.TAG)}_globalWildcardListeners=new Set;_namespacedWildcardListeners=new Set;static create(t){let r=class extends e{static{s(this,"CreatedClass")}static{g(this,"CreatedClass")}static TAG=t;TAG=t;render(){throw new Error("`render` should be implemented by children")}};return r.define=function(){return e.define.call(this)},r.event=function(i){return e.event.call(this,i)},r}static define(){O(this.TAG,this)}async attributeChangedCallback(t,r,i){let n=this[`handleChange_${t}`];n&&await n.call(this,r,i)}addEventListener(t,r,i){t===e.event.call(this,"*")?this._namespacedWildcardListeners.add({listener:r,options:i}):t==="*"?r&&this._globalWildcardListeners.add({listener:r,options:i}):super.addEventListener(t,r,i)}_notifyNamespacedWildcardListeners(t){if(this._namespacedWildcardListeners.size===0)return;let r=this.TAG;!r||!t.type.startsWith(`${r}:`)||this._namespacedWildcardListeners.forEach(({listener:i})=>{try{typeof i=="function"?i.call(this,t):i&&typeof i.handleEvent=="function"&&i.handleEvent(t)}catch(n){console.error("Error in namespaced wildcard event listener:",n)}})}_notifyGlobalWildcardListeners(t){this._globalWildcardListeners.size!==0&&this._globalWildcardListeners.forEach(({listener:r})=>{try{typeof r=="function"?r.call(this,t):r&&typeof r.handleEvent=="function"&&r.handleEvent(t)}catch(i){console.error("Error in global wildcard event listener:",i)}})}connectedCallback(){this.render()}qs(t){return this.querySelector(t)}qsa(t){return this.querySelectorAll(t)}static event(t){return C(this.TAG,t)}emit(t,r={}){if(t==="*")throw new Error('Do not emit the literal "*"');let{bubbles:i=!0,cancelable:n=!0,detail:a}=r,o=`${this.TAG}:${t}`,l=new CustomEvent(o,{bubbles:i,cancelable:n,detail:a}),c=this.dispatchEvent(l);return this._notifyNamespacedWildcardListeners(l),c}dispatchEvent(t){let r=super.dispatchEvent(t);return this._notifyGlobalWildcardListeners(t),r}dispatch(t,r={}){let i=new CustomEvent(t,{bubbles:r.bubbles===void 0?!0:r.bubbles,cancelable:r.cancelable===void 0?!0:r.cancelable,detail:r.detail});return this.dispatchEvent(i)}on(t,r,i){let n=e.event.call(this,t);this.addEventListener(n,r,i)}off(t,r,i){let n=e.event.call(this,t);this.removeEventListener(n,r,i)}removeEventListener(t,r,i){if(t===e.event.call(this,"*")){if(r&&this._namespacedWildcardListeners){for(let n of this._namespacedWildcardListeners)if(n.listener===r){this._namespacedWildcardListeners.delete(n);break}}}else if(t==="*"){if(r&&this._globalWildcardListeners){for(let n of this._globalWildcardListeners)if(n.listener===r){this._globalWildcardListeners.delete(n);break}}}else super.removeEventListener(t,r,i)}};function C(e,t){return`${e}:${t}`}s(C,"eventName");g(C,"eventName");function P(e){return document.createElement(e).constructor!==window.HTMLElement}s(P,"isRegistered");g(P,"isRegistered");function O(e,t){if(typeof window>"u"||!("customElements"in window)||P(e))return;let r=t,i=r.reflectedBooleanAttributes??[],n=r.reflectedStringAttributes??[],a=t.prototype;for(let o of i)o in HTMLElement.prototype||Object.getOwnPropertyDescriptor(a,o)||Object.defineProperty(a,o,{get(){return this.hasAttribute(o)},set(l){this.toggleAttribute(o,!!l)},configurable:!0,enumerable:!0});for(let o of n){if(i.includes(o)){console.warn(`[web-component] "${o}" appears in both reflectedBooleanAttributes and reflectedStringAttributes on <${e}>. Boolean wins.`);continue}o in HTMLElement.prototype||Object.getOwnPropertyDescriptor(a,o)||Object.defineProperty(a,o,{get(){return this.getAttribute(o)},set(l){l==null?this.removeAttribute(o):this.setAttribute(o,String(l))},configurable:!0,enumerable:!0})}window.customElements.define(e,t)}s(O,"define");g(O,"define");var J=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","#","$","%","*","+",",","-",".",":",";","=","?","@","[","]","^","_","{","|","}","~"],p=s(e=>{let t=0;for(let r=0;r<e.length;r++){let i=e[r],n=J.indexOf(i);t=t*83+n}return t},"x");var S=s(e=>{let t=e/255;return t<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)},"f"),T=s(e=>{let t=Math.max(0,Math.min(1,e));return t<=.0031308?Math.trunc(t*12.92*255+.5):Math.trunc((1.055*Math.pow(t,.4166666666666667)-.055)*255+.5)},"h"),K=s(e=>e<0?-1:1,"F"),W=s((e,t)=>K(e)*Math.pow(Math.abs(e),t),"M"),H=class extends Error{static{s(this,"d")}constructor(e){super(e),this.name="ValidationError",this.message=e}},Q=s(e=>{if(!e||e.length<6)throw new H("The blurhash string must be at least 6 characters");let t=p(e[0]),r=Math.floor(t/9)+1,i=t%9+1;if(e.length!==4+2*i*r)throw new H(`blurhash length mismatch: length is ${e.length} but it should be ${4+2*i*r}`)},"C");var X=s(e=>{let t=e>>16,r=e>>8&255,i=e&255;return[S(t),S(r),S(i)]},"z"),Y=s((e,t)=>{let r=Math.floor(e/361),i=Math.floor(e/19)%19,n=e%19;return[W((r-9)/9,2)*t,W((i-9)/9,2)*t,W((n-9)/9,2)*t]},"L"),Z=s((e,t,r,i)=>{Q(e),i=i|1;let n=p(e[0]),a=Math.floor(n/9)+1,o=n%9+1,l=(p(e[1])+1)/166,c=new Array(o*a);for(let h=0;h<c.length;h++)if(h===0){let d=p(e.substring(2,6));c[h]=X(d)}else{let d=p(e.substring(4+h*2,6+h*2));c[h]=Y(d,l*i)}let u=t*4,f=new Uint8ClampedArray(u*r);for(let h=0;h<r;h++)for(let d=0;d<t;d++){let m=0,b=0,w=0;for(let y=0;y<a;y++)for(let A=0;A<o;A++){let L=Math.cos(Math.PI*d*A/t)*Math.cos(Math.PI*h*y/r),x=c[A+y*o];m+=x[0]*L,b+=x[1]*L,w+=x[2]*L}let z=T(m),G=T(b),N=T(w);f[4*d+0+h*u]=z,f[4*d+1+h*u]=G,f[4*d+2+h*u]=N,f[4*d+3+h*u]=255}return f},"U"),q=Z;function E(e,t,r=32){let i=Math.max(e,t);if(i<=r)return{width:e,height:t};let n=r/i;return{width:Math.max(1,Math.round(e*n)),height:Math.max(1,Math.round(t*n))}}s(E,"decodeDimensions");function D(e){let{width:t,height:r,alt:i,contentVisibility:n,placeholder:a,decoding:o,loading:l,srcset:c,sizes:u,src:f}=e;if(!a)throw new Error("not placeholder");let h=typeof t=="string"?parseInt(t,10):t,d=typeof r=="string"?parseInt(r,10):r,m=E(h,d),b=`<canvas
-        alt="${i}"
-        width=${m.width}
-        height=${m.height}
+var V=Object.defineProperty;var i=(e,t)=>V(e,"name",{value:t,configurable:!0});var W=Object.defineProperty,K=i((e,t)=>W(e,"name",{value:t,configurable:!0}),"__name");function y(e){return Object.keys(e).reduce((t,r)=>{let n=e[r];return n?typeof n=="boolean"?n?(t+` ${r}`).trim():t:Array.isArray(n)?t+` ${r}="${n.join(" ")}"`:(t+` ${r}="${n}"`).trim():t},"")}i(y,"toAttributes");K(y,"toAttributes");var k=Object.defineProperty,$=i((e,t)=>k(e,"name",{value:t,configurable:!0}),"__name");function O(e){return document.createElement(e).constructor!==window.HTMLElement}i(O,"isRegistered");$(O,"isRegistered");function U(e,t){window&&"customElements"in window&&(O(e)||window.customElements.define(e,t))}i(U,"define");$(U,"define");var ot=document.querySelector.bind(document),at=document.querySelectorAll.bind(document);function S(e,t){return e.matches||(e=e.parentElement),e.matches(t)?e:e.closest(t)}i(S,"match");$(S,"match");var J=Object.defineProperty,f=i((e,t)=>J(e,"name",{value:t,configurable:!0}),"__name"),v=class e extends window.HTMLElement{static{i(this,"WebComponent")}static{f(this,"WebComponent")}static TAG="";TAG="";static reflectedBooleanAttributes=[];static reflectedStringAttributes=[];static get observedAttributes(){return[...new Set([...this.reflectedBooleanAttributes,...this.reflectedStringAttributes])]}static match(t){return S(t,this.TAG)}static create(t){let r=class extends e{static{i(this,"CreatedClass")}static{f(this,"CreatedClass")}static TAG=t;TAG=t;render(){throw new Error("`render` should be implemented by children")}};return r.define=function(){return e.define.call(this)},r.event=function(n){return e.event.call(this,n)},r}static define(){D(this.TAG,this)}attributeChangedCallback(t,r,n){let s=this[H(t)];s&&s.call(this,r,n)}connectedCallback(){this.render()}qs(t){return this.querySelector(t)}qsa(t){return this.querySelectorAll(t)}static event(t){return q(this.TAG,t)}emit(t,r={}){if(t==="*")throw new Error('Do not emit the literal "*"');let{bubbles:n=!0,cancelable:s=!0,detail:a}=r,o=`${this.TAG}:${t}`,h=new CustomEvent(o,{bubbles:n,cancelable:s,detail:a});return this.dispatchEvent(h)}dispatch(t,r={}){let n=new CustomEvent(t,{bubbles:r.bubbles===void 0?!0:r.bubbles,cancelable:r.cancelable===void 0?!0:r.cancelable,detail:r.detail});return this.dispatchEvent(n)}on(t,r,n){let s=e.event.call(this,t);this.addEventListener(s,r,n)}off(t,r,n){let s=e.event.call(this,t);this.removeEventListener(s,r,n)}};function q(e,t){return`${e}:${t}`}i(q,"eventName");f(q,"eventName");var P=Object.create(null);function H(e){return P[e]||(P[e]=`handleChange_${e}`)}i(H,"handlerKey");f(H,"handlerKey");function j(e){return document.createElement(e).constructor!==window.HTMLElement}i(j,"isRegistered");f(j,"isRegistered");function D(e,t){if(typeof window>"u"||!("customElements"in window)||j(e))return;let r=t,n=r.reflectedBooleanAttributes??[],s=r.reflectedStringAttributes??[],a=t.prototype;for(let o of n)o in HTMLElement.prototype||Object.getOwnPropertyDescriptor(a,o)||Object.defineProperty(a,o,{get(){return this.hasAttribute(o)},set(h){this.toggleAttribute(o,!!h)},configurable:!0,enumerable:!0});for(let o of s){if(n.includes(o)){console.warn(`[web-component] "${o}" appears in both reflectedBooleanAttributes and reflectedStringAttributes on <${e}>. Boolean wins.`);continue}o in HTMLElement.prototype||Object.getOwnPropertyDescriptor(a,o)||Object.defineProperty(a,o,{get(){return this.getAttribute(o)},set(h){h==null?this.removeAttribute(o):this.setAttribute(o,String(h))},configurable:!0,enumerable:!0})}window.customElements.define(e,t)}i(D,"define");f(D,"define");var Q=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","#","$","%","*","+",",","-",".",":",";","=","?","@","[","]","^","_","{","|","}","~"],p=i(e=>{let t=0;for(let r=0;r<e.length;r++){let n=e[r],s=Q.indexOf(n);t=t*83+s}return t},"x");var T=i(e=>{let t=e/255;return t<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)},"f"),C=i(e=>{let t=Math.max(0,Math.min(1,e));return t<=.0031308?Math.trunc(t*12.92*255+.5):Math.trunc((1.055*Math.pow(t,.4166666666666667)-.055)*255+.5)},"h"),X=i(e=>e<0?-1:1,"F"),L=i((e,t)=>X(e)*Math.pow(Math.abs(e),t),"M"),z=class extends Error{static{i(this,"d")}constructor(e){super(e),this.name="ValidationError",this.message=e}},Y=i(e=>{if(!e||e.length<6)throw new z("The blurhash string must be at least 6 characters");let t=p(e[0]),r=Math.floor(t/9)+1,n=t%9+1;if(e.length!==4+2*n*r)throw new z(`blurhash length mismatch: length is ${e.length} but it should be ${4+2*n*r}`)},"C");var Z=i(e=>{let t=e>>16,r=e>>8&255,n=e&255;return[T(t),T(r),T(n)]},"z"),tt=i((e,t)=>{let r=Math.floor(e/361),n=Math.floor(e/19)%19,s=e%19;return[L((r-9)/9,2)*t,L((n-9)/9,2)*t,L((s-9)/9,2)*t]},"L"),et=i((e,t,r,n)=>{Y(e),n=n|1;let s=p(e[0]),a=Math.floor(s/9)+1,o=s%9+1,h=(p(e[1])+1)/166,u=new Array(o*a);for(let l=0;l<u.length;l++)if(l===0){let c=p(e.substring(2,6));u[l]=Z(c)}else{let c=p(e.substring(4+l*2,6+l*2));u[l]=tt(c,h*n)}let d=t*4,m=new Uint8ClampedArray(d*r);for(let l=0;l<r;l++)for(let c=0;c<t;c++){let g=0,b=0,w=0;for(let A=0;A<a;A++)for(let M=0;M<o;M++){let x=Math.cos(Math.PI*c*M/t)*Math.cos(Math.PI*l*A/r),I=u[M+A*o];g+=I[0]*x,b+=I[1]*x,w+=I[2]*x}let N=C(g),_=C(b),F=C(w);m[4*c+0+l*d]=N,m[4*c+1+l*d]=_,m[4*c+2+l*d]=F,m[4*c+3+l*d]=255}return m},"U"),B=et;function E(e,t,r=32){let n=Math.max(e,t);if(n<=r)return{width:e,height:t};let s=r/n;return{width:Math.max(1,Math.round(e*s)),height:Math.max(1,Math.round(t*s))}}i(E,"decodeDimensions");function G(e){let{width:t,height:r,alt:n,contentVisibility:s,placeholder:a,decoding:o,loading:h,srcset:u,sizes:d,src:m}=e;if(!a)throw new Error("not placeholder");let l=typeof t=="string"?parseInt(t,10):t,c=typeof r=="string"?parseInt(r,10):r,g=E(l,c),b=`<canvas
+        alt="${n}"
+        width=${g.width}
+        height=${g.height}
         class="blurry"
     ></canvas>
 
     <img class="blurry"
-        alt="${i}"
-        content-visibility="${n||"auto"}"
+        alt="${n}"
+        content-visibility="${s||"auto"}"
         decoding="${o||"async"}"
-        loading="${l||"lazy"}"
-        ${c?`srcset="${c}"`:""}
-        ${u?`sizes="${u}"`:""}
-        src="${f}"
-    />`,w=M(e);return typeof window>"u"?`<blur-hash ${w}>
+        loading="${h||"lazy"}"
+        ${u?`srcset="${u}"`:""}
+        ${d?`sizes="${d}"`:""}
+        src="${m}"
+    />`,w=y(e);return typeof window>"u"?`<blur-hash ${w}>
             ${b}
-        </blur-hash>`:b}s(D,"render");var j=class e extends v.create("blur-hash"){static{s(this,"BlurHash")}time;rafId=null;constructor(){super();let t=this.getAttribute("width"),r=this.getAttribute("height"),i=this.getAttribute("time");this.time=i?parseInt(i):800,this.style.width=""+t,this.style.height=""+r,document.body.style.setProperty("--blur-hash-time",i?"."+(parseInt(i)/1e3+"s"):"0.8s")}reset(t){t.width&&(this.style.width=""+t.width),t.height&&(this.style.height=""+t.height);let r=t.width?typeof t.width=="string"?parseInt(t.width,10):t.width:parseInt(this.style.width,10),i=t.height?typeof t.height=="string"?parseInt(t.height,10):t.height:parseInt(this.style.height,10);this.innerHTML=e.html(Object.assign(t,{width:r,height:i}));let{placeholder:n,src:a}=t;this.scheduleDecode(n,r,i),this.setAttribute("src",a),this.setAttribute("placeholder",n);let o=this.querySelector("img");t.srcset&&o.setAttribute("srcset",t.srcset),t.sizes&&o.setAttribute("sizes",t.sizes),this.sharpen()}scheduleDecode(t,r,i){this.rafId!==null&&cancelAnimationFrame(this.rafId);let{width:n,height:a}=E(r,i);this.rafId=requestAnimationFrame(()=>{if(this.rafId=null,!this.isConnected)return;let o=this.querySelector("canvas");if(!o)return;let l=o.getContext("2d");if(!l)return;let c=q(t,n,a),u=l.createImageData(n,a);u.data.set(c),l.putImageData(u,0,0)})}disconnectedCallback(){this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null)}sharpen(){let t=this.qs("img");t.complete&&t.naturalWidth>0?(t.classList.remove("blurry"),t.classList.add("sharp")):t.addEventListener("load",()=>{t.classList.remove("blurry"),t.classList.add("sharp")})}connectedCallback(){let t=parseInt(this.getAttribute("width")??""),r=parseInt(this.getAttribute("height")??""),i=this.getAttribute("placeholder");if(!i)throw new Error("Missing placeholder");if(!t)throw new Error("Missing width");if(!r)throw new Error("Missing height");this.innerHTML||(this.innerHTML=this.render()),this.scheduleDecode(i,t,r),this.sharpen()}static html(t){return D(t)}render(){let t=this.getAttribute("srcset"),r=this.getAttribute("width"),i=this.getAttribute("height"),n=this.getAttribute("time"),a=this.classList.toString(),o=this.getAttribute("placeholder");this.time=n?parseInt(n):800;let l=this.getAttribute("src"),c=this.getAttribute("alt");if(!o)throw new Error("not placeholder");if(!r||!i)throw new Error("not width or not height");if(!l)throw new Error("Not src");if(!c)throw new Error("Not alt");return e.html({classes:a,srcset:t,width:r,height:i,src:l,alt:c,placeholder:o})}};export{j as BlurHash};
+        </blur-hash>`:b}i(G,"render");var R=class e extends v.create("blur-hash"){static{i(this,"BlurHash")}time;rafId=null;constructor(){super();let t=this.getAttribute("width"),r=this.getAttribute("height"),n=this.getAttribute("time");this.time=n?parseInt(n):800,this.style.width=""+t,this.style.height=""+r,document.body.style.setProperty("--blur-hash-time",n?"."+(parseInt(n)/1e3+"s"):"0.8s")}reset(t){t.width&&(this.style.width=""+t.width),t.height&&(this.style.height=""+t.height);let r=t.width?typeof t.width=="string"?parseInt(t.width,10):t.width:parseInt(this.style.width,10),n=t.height?typeof t.height=="string"?parseInt(t.height,10):t.height:parseInt(this.style.height,10);this.innerHTML=e.html(Object.assign(t,{width:r,height:n}));let{placeholder:s,src:a}=t;this.scheduleDecode(s,r,n),this.setAttribute("src",a),this.setAttribute("placeholder",s);let o=this.querySelector("img");t.srcset&&o.setAttribute("srcset",t.srcset),t.sizes&&o.setAttribute("sizes",t.sizes),this.sharpen()}scheduleDecode(t,r,n){this.rafId!==null&&cancelAnimationFrame(this.rafId);let{width:s,height:a}=E(r,n);this.rafId=requestAnimationFrame(()=>{if(this.rafId=null,!this.isConnected)return;let o=this.querySelector("canvas");if(!o)return;let h=o.getContext("2d");if(!h)return;let u=B(t,s,a),d=h.createImageData(s,a);d.data.set(u),h.putImageData(d,0,0)})}disconnectedCallback(){this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null)}sharpen(){let t=this.qs("img"),r=i(()=>{t.classList.remove("blurry"),t.classList.add("sharp")},"toSharp");t.complete&&t.naturalWidth>0?requestAnimationFrame(()=>requestAnimationFrame(r)):t.addEventListener("load",r)}connectedCallback(){let t=parseInt(this.getAttribute("width")??""),r=parseInt(this.getAttribute("height")??""),n=this.getAttribute("placeholder");if(!n)throw new Error("Missing placeholder");if(!t)throw new Error("Missing width");if(!r)throw new Error("Missing height");this.innerHTML||(this.innerHTML=this.render()),this.scheduleDecode(n,t,r),this.sharpen()}static html(t){return G(t)}render(){let t=this.getAttribute("srcset"),r=this.getAttribute("width"),n=this.getAttribute("height"),s=this.getAttribute("time"),a=this.classList.toString(),o=this.getAttribute("placeholder");this.time=s?parseInt(s):800;let h=this.getAttribute("src"),u=this.getAttribute("alt");if(!o)throw new Error("not placeholder");if(!r||!n)throw new Error("not width or not height");if(!h)throw new Error("Not src");if(!u)throw new Error("Not alt");return e.html({classes:a,srcset:t,width:r,height:n,src:h,alt:u,placeholder:o})}};export{R as BlurHash};
 //# sourceMappingURL=index.min.js.map

package/dist/index.min.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../node_modules/@substrate-system/web-component/src/attributes.ts", "../node_modules/@substrate-system/web-component/src/util.ts", "../node_modules/@substrate-system/web-component/src/index.ts", "../node_modules/blurhash/src/base83.ts", "../node_modules/blurhash/src/utils.ts", "../node_modules/blurhash/src/error.ts", "../node_modules/blurhash/src/decode.ts", "../node_modules/blurhash/src/encode.ts", "../src/decode-dimensions.ts", "../src/html.ts", "../src/index.ts"],
-  "sourcesContent": ["export type Attrs = Record<string, undefined|null|string|number|boolean|(string|number)[]>\n\n/**\n * Transform an object into an HTML attributes string. The object should be\n * like `{ attributeName: value }`.\n *\n * @param attrs An object for the attributes.\n * @returns {string} A string suitable for use as HTML attributes.\n */\nexport function toAttributes (attrs:Attrs):string {\n    return Object.keys(attrs).reduce((acc, k) => {\n        const value = attrs[k]\n        if (!value) return acc\n\n        if (typeof value === 'boolean') {\n            if (value) return (acc + ` ${k}`).trim()\n            return acc\n        }\n\n        if (Array.isArray(value)) {\n            return (acc + ` ${k}=\"${value.join(' ')}\"`)\n        }\n\n        return (acc + ` ${k}=\"${value}\"`).trim()\n    }, '')\n}\n", "export { toAttributes } from './attributes.js'\n\n/**\n * Check if the given tag name has been registered.\n *\n * @see {@link https://stackoverflow.com/a/28210364 stackoverflow}\n * @param {string} elName The custom element tag name.\n * @returns {boolean} True if the given name has been registered already.\n */\nexport function isRegistered (elName:string):boolean {\n    return document.createElement(elName).constructor !== window.HTMLElement\n}\n\nexport function define (name:string, element:CustomElementConstructor) {\n    if (!window) return\n    if (!('customElements' in window)) return\n\n    if (!isRegistered(name)) {\n        window.customElements.define(name, element)\n    }\n}\n\nexport const qs = document.querySelector.bind(document)\nexport const qsa = document.querySelectorAll.bind(document)\n\n/**\n * Get the closes parent element matching the given selector.\n * @param el Element to start from\n * @param s Selector for an element\n * @returns {HTMLElement|null} The closes parent element that matches.\n */\nexport function match (el:HTMLElement, s:string):HTMLElement|null {\n    if (!el.matches) el = el.parentElement!\n    return el.matches(s) ? el : el.closest(s)\n}\n", "import { match as _match } from './util.js'\n\ninterface WildcardListenerEntry {\n    listener:EventListenerOrEventListenerObject\n    options?:boolean|AddEventListenerOptions\n}\n\nexport abstract class WebComponent extends window.HTMLElement {\n    static TAG:string = ''\n    TAG:string = ''\n\n    /**\n     * Declare boolean attributes that should be reflected as properties.\n     * The base class auto-generates getters/setters and includes these in\n     * `observedAttributes`. Framework property assignment (e.g. Preact's\n     * `el.disabled = true`) will then correctly set the attribute.\n     */\n    static reflectedBooleanAttributes:string[] = []\n\n    /**\n     * Declare string attributes that should be reflected as properties.\n     * Getter returns `string|null` (null when attribute is absent).\n     * Setting `null` or `undefined` removes the attribute.\n     */\n    static reflectedStringAttributes:string[] = []\n\n    /**\n     * Auto-derived from `reflectedBooleanAttributes` and\n     * `reflectedStringAttributes`. Override with `super.observedAttributes`\n     * to add non-reflected observed attributes:\n     *\n     * ```ts\n     * static get observedAttributes () {\n     *     return [...super.observedAttributes, 'aria-label']\n     * }\n     * ```\n     */\n    static get observedAttributes ():string[] {\n        return [...new Set([\n            ...this.reflectedBooleanAttributes,\n            ...this.reflectedStringAttributes,\n        ])]\n    }\n\n    static match (el:HTMLElement):HTMLElement|null {\n        return _match(el, this.TAG)\n    }\n\n    /**\n     * Store global wildcard listeners (listen to all events)\n     * Triggered by ALL events dispatched through this element\n     * @private\n     */\n    private _globalWildcardListeners:Set<WildcardListenerEntry> = new Set()\n\n    /**\n     * Store namespaced wildcard listeners (listen to 'component-name:*')\n     * Triggered by events from emit() that match this component's namespace\n     * @private\n     */\n    private _namespacedWildcardListeners:Set<WildcardListenerEntry> = new Set()\n\n    static create (elementName:string):typeof WebComponent & {\n        new (...args:any[]):WebComponent;\n        TAG:string;\n        define: typeof WebComponent.define;\n        event: typeof WebComponent.event;\n    } {\n        const CreatedClass = class extends WebComponent {\n            static TAG = elementName\n            TAG = elementName\n            render () {\n                throw new Error('`render` should be implemented by children')\n            }\n        }\n\n        // Copy static methods with proper binding\n        CreatedClass.define = function () {\n            return WebComponent.define.call(this)\n        }\n        CreatedClass.event = function (evType:string) {\n            return WebComponent.event.call(this, evType)\n        }\n\n        return CreatedClass\n    }\n\n    static define<T extends {\n        new (...args:any[]):WebComponent;\n        TAG:string;\n    }>(this:T) {\n        define(this.TAG, this)\n    }\n\n    /**\n     * Runs when the value of an attribute is changed.\n     *\n     * Depends on `static observedAttributes`.\n     *\n     * Should name methods like `handleChange_disabled`.\n     *\n     * @param  {string} name     The attribute name\n     * @param  {string} oldValue The old attribute value\n     * @param  {string} newValue The new attribute value\n     */\n    async attributeChangedCallback (\n        name:string,\n        oldValue:string,\n        newValue:string\n    ):Promise<void> {\n        const handler = this[`handleChange_${name}`]\n        if (handler) {\n            await handler.call(this, oldValue, newValue)\n        }\n    }\n\n    /**\n     * Enhanced addEventListener that supports wildcards:\n     * - Component.event('*') - Listen to all namespaced events for this\n     *   component (e.g., 'my-component:*')\n     * - '*' - Listen to ALL events (namespaced and non-namespaced, including\n     *   normal DOM events)\n     *\n     * @param type - Event type, Component.event('*') for namespaced wildcard,\n     *   or '*' for global wildcard\n     * @param listener - Event listener function or object\n     * @param options - Event listener options\n     */\n    addEventListener (\n        type:string,\n        listener:EventListenerOrEventListenerObject,\n        options?:boolean|AddEventListenerOptions\n    ): void {\n        if (type === WebComponent.event.call(this, '*')) {\n            // Handle namespaced wildcard listener (component-name:*)\n            this._namespacedWildcardListeners.add({ listener, options })\n        } else if (type === '*') {\n            // Handle global wildcard listener (all events)\n            if (listener) {\n                this._globalWildcardListeners.add({ listener, options })\n            }\n        } else {\n            // Normal event listener - delegate to native implementation\n            super.addEventListener(type, listener, options)\n        }\n    }\n\n    /**\n     * Notify namespaced wildcard listeners of an event\n     * Only fires for events that match this component's namespace\n     *\n     * @param event - The event to dispatch to namespaced wildcard listeners\n     * @private\n     */\n    private _notifyNamespacedWildcardListeners (event: Event): void {\n        if (this._namespacedWildcardListeners.size === 0) {\n            return\n        }\n\n        const componentName = this.TAG\n\n        // Only trigger for events in this component's namespace\n        if (!componentName || !event.type.startsWith(`${componentName}:`)) {\n            return\n        }\n\n        // Call each namespaced wildcard listener\n        this._namespacedWildcardListeners.forEach(({ listener }) => {\n            try {\n                if (typeof listener === 'function') {\n                    listener.call(this, event)\n                } else if (listener && typeof listener.handleEvent === 'function') {\n                    listener.handleEvent(event)\n                }\n            } catch (error) {\n                // Log errors but don't let one listener break others\n                console.error(\n                    'Error in namespaced wildcard event listener:',\n                    error\n                )\n            }\n        })\n    }\n\n    /**\n     * Notify global wildcard listeners of an event\n     * Fires for ALL events dispatched through this element\n     *\n     * @param event - The event to dispatch to global wildcard listeners\n     * @private\n     */\n    private _notifyGlobalWildcardListeners (event: Event): void {\n        if (this._globalWildcardListeners.size === 0) {\n            return\n        }\n\n        // Call each global wildcard listener\n        this._globalWildcardListeners.forEach(({ listener }) => {\n            try {\n                if (typeof listener === 'function') {\n                    listener.call(this, event)\n                } else if (listener && typeof listener.handleEvent === 'function') {\n                    listener.handleEvent(event)\n                }\n            } catch (error) {\n            // Log errors but don't let one listener break others\n                console.error('Error in global wildcard event listener:', error)\n            }\n        })\n    }\n\n    connectedCallback () {\n        this.render()\n    }\n\n    abstract render ():any\n\n    qs<K extends keyof HTMLElementTagNameMap>(\n        selector:K\n    ):HTMLElementTagNameMap[K]|null;\n\n    qs<E extends Element = Element>(selector:string):E|null;\n    qs (selector:string):Element|null {\n        return this.querySelector(selector)\n    }\n\n    qsa<K extends keyof HTMLElementTagNameMap>(\n        selector:K\n    ):HTMLElementTagNameMap[K]|null;\n\n    qsa<E extends Element = Element>(selector:string):E|null;\n    qsa (selector:string):NodeListOf<Element> {\n        return this.querySelectorAll(selector)\n    }\n\n    /**\n     * Take a non-namepsaced event name, return namespace event name.\n     *\n     * @param {string} evType The non-namespace event name\n     * @returns {string} Namespaced event name, eg, `my-component:click`\n     */\n    static event (evType:string):string {\n        return eventName(this.TAG, evType)\n    }\n\n    /**\n     * Emit a namespaced event.\n     *\n     * @param type (non-namespaced) event type string\n     * @param opts `bubbles`, `detail`, and `cancelable`. Default is\n     * `{ bubbles: true, cancelable: true }`\n     * @returns {boolean}\n     */\n    emit<T = any> (type:string, opts:Partial<{\n        bubbles:boolean,\n        cancelable:boolean,\n        detail:CustomEvent<T>['detail']\n    }> = {}):boolean {\n        if (type === '*') throw new Error('Do not emit the literal \"*\"')\n\n        const { bubbles = true, cancelable = true, detail } = opts\n        const namespacedType = `${this.TAG}:${type}`\n\n        const event = new CustomEvent(namespacedType, {\n            bubbles,\n            cancelable,\n            detail\n        })\n\n        // This will trigger both specific listeners and global wildcard\n        // listeners (**)\n        const result = this.dispatchEvent(event)\n\n        // Notify namespaced wildcard listeners (*)\n        this._notifyNamespacedWildcardListeners(event)\n\n        return result\n    }\n\n    /**\n     * Override dispatchEvent to notify global wildcard listeners\n     * This ensures that '**' listeners catch ALL events\n     *\n     * @param event - The event to dispatch\n     * @returns true if the event was not cancelled\n     */\n    dispatchEvent (event: Event): boolean {\n        const result = super.dispatchEvent(event)\n\n        // Notify global wildcard listeners for ALL events\n        this._notifyGlobalWildcardListeners(event)\n\n        return result\n    }\n\n    /**\n     * Create and emit an event, no namespacing.\n     */\n    dispatch<T> (type:string, opts:Partial<{\n        bubbles:boolean,\n        cancelable:boolean,\n        detail:CustomEvent<T>['detail']\n    }> = {}):boolean {\n        const event = new CustomEvent(type, {\n            bubbles: (opts.bubbles === undefined) ? true : opts.bubbles,\n            cancelable: (opts.cancelable === undefined) ? true : opts.cancelable,\n            detail: opts.detail\n        })\n\n        return this.dispatchEvent(event)\n    }\n\n    /**\n     * Listen for namespaced events.\n     */\n    on<T extends Event = Event> (\n        evName:string,\n        handler:(ev:T)=>any,\n        options?:boolean|AddEventListenerOptions\n    ):void;\n\n    on (\n        evName:string,\n        handler:EventListenerObject,\n        options?:boolean|AddEventListenerOptions\n    ):void;\n\n    on (\n        evName:string,\n        handler:((ev:Event)=>any)|EventListenerObject,\n        options?:boolean|AddEventListenerOptions\n    ):void {\n        const fullEvName = WebComponent.event.call(this, evName)\n        this.addEventListener(fullEvName, handler as EventListenerOrEventListenerObject, options)\n    }\n\n    /**\n     * Remove a namespaced event listener.\n     */\n    off<T extends Event = Event> (\n        evName:string,\n        handler:(ev:T)=>any,\n        options?:boolean|EventListenerOptions\n    ):void;\n\n    off (\n        evName:string,\n        handler:EventListenerObject,\n        options?:boolean|EventListenerOptions\n    ):void;\n\n    off (\n        evName:string,\n        handler:((ev:Event)=>any)|EventListenerObject,\n        options?:boolean|EventListenerOptions\n    ):void {\n        const fullEvName = WebComponent.event.call(this, evName)\n        this.removeEventListener(fullEvName, handler as EventListenerOrEventListenerObject, options)\n    }\n\n    /**\n     * Enhanced removeEventListener that supports wildcards:\n     * - Component.event('*') - Remove namespaced wildcard listener\n     * - '*' - Remove global wildcard listener\n     *\n     * @param type - Event type, Component.event('*') for namespaced, or '*'\n     *   for global\n     * @param listener - Event listener function or object to remove\n     * @param options - Event listener options\n     */\n    removeEventListener (\n        type:string,\n        listener:EventListenerOrEventListenerObject,\n        options?: boolean | EventListenerOptions\n    ): void {\n        if (type === WebComponent.event.call(this, '*')) {\n            // Remove namespaced wildcard listener\n            if (listener && this._namespacedWildcardListeners) {\n                for (const entry of this._namespacedWildcardListeners) {\n                    if (entry.listener === listener) {\n                        this._namespacedWildcardListeners.delete(entry)\n                        break\n                    }\n                }\n            }\n        } else if (type === '*') {\n            // Remove global wildcard listener\n            if (listener && this._globalWildcardListeners) {\n                for (const entry of this._globalWildcardListeners) {\n                    if (entry.listener === listener) {\n                        this._globalWildcardListeners.delete(entry)\n                        break\n                    }\n                }\n            }\n        } else {\n            // Normal event listener - delegate to native implementation\n            super.removeEventListener(type, listener, options)\n        }\n    }\n}\n\nfunction eventName (namespace:string, evType:string) {\n    return `${namespace}:${evType}`\n}\n\n/**\n * Check if the given tag name has been registered.\n *\n * @see {@link https://stackoverflow.com/a/28210364 stackoverflow}\n * @param {string} elName The custom element tag name.\n * @returns {boolean} True if the given name has been registered already.\n */\nexport function isRegistered (elName:string):boolean {\n    return document.createElement(elName).constructor !== window.HTMLElement\n}\n\nexport function define (name:string, element:CustomElementConstructor) {\n    if (typeof window === 'undefined') return\n    if (!('customElements' in window)) return\n    if (isRegistered(name)) return\n\n    const ctor = element as unknown as typeof WebComponent\n    const boolAttrs:string[] = ctor.reflectedBooleanAttributes ?? []\n    const strAttrs:string[] = ctor.reflectedStringAttributes ?? []\n    const proto = (element as any).prototype\n\n    for (const attr of boolAttrs) {\n        // Skip built-in IDL attributes on HTMLElement and ancestors\n        // (covers Element.prototype, Node.prototype, etc.)\n        if (attr in HTMLElement.prototype) continue\n        // Skip if the subclass already defines an own-property accessor\n        if (Object.getOwnPropertyDescriptor(proto, attr)) continue\n        Object.defineProperty(proto, attr, {\n            get (this:HTMLElement):boolean {\n                return this.hasAttribute(attr)\n            },\n            set (this:HTMLElement, v:unknown) {\n                this.toggleAttribute(attr, Boolean(v))\n            },\n            configurable: true,\n            enumerable: true,\n        })\n    }\n\n    for (const attr of strAttrs) {\n        if (boolAttrs.includes(attr)) {\n            console.warn(\n                `[web-component] \"${attr}\" appears in both ` +\n                'reflectedBooleanAttributes and reflectedStringAttributes ' +\n                `on <${name}>. Boolean wins.`\n            )\n            continue\n        }\n        if (attr in HTMLElement.prototype) continue\n        if (Object.getOwnPropertyDescriptor(proto, attr)) continue\n        Object.defineProperty(proto, attr, {\n            get (this:HTMLElement):string|null {\n                return this.getAttribute(attr)\n            },\n            set (this:HTMLElement, v:unknown) {\n                // null and undefined both remove the attribute\n                if (v == null) {\n                    this.removeAttribute(attr)\n                } else {\n                    this.setAttribute(attr, String(v))\n                }\n            },\n            configurable: true,\n            enumerable: true,\n        })\n    }\n\n    window.customElements.define(name, element)\n}\n", "const digitCharacters = [\n  \"0\",\n  \"1\",\n  \"2\",\n  \"3\",\n  \"4\",\n  \"5\",\n  \"6\",\n  \"7\",\n  \"8\",\n  \"9\",\n  \"A\",\n  \"B\",\n  \"C\",\n  \"D\",\n  \"E\",\n  \"F\",\n  \"G\",\n  \"H\",\n  \"I\",\n  \"J\",\n  \"K\",\n  \"L\",\n  \"M\",\n  \"N\",\n  \"O\",\n  \"P\",\n  \"Q\",\n  \"R\",\n  \"S\",\n  \"T\",\n  \"U\",\n  \"V\",\n  \"W\",\n  \"X\",\n  \"Y\",\n  \"Z\",\n  \"a\",\n  \"b\",\n  \"c\",\n  \"d\",\n  \"e\",\n  \"f\",\n  \"g\",\n  \"h\",\n  \"i\",\n  \"j\",\n  \"k\",\n  \"l\",\n  \"m\",\n  \"n\",\n  \"o\",\n  \"p\",\n  \"q\",\n  \"r\",\n  \"s\",\n  \"t\",\n  \"u\",\n  \"v\",\n  \"w\",\n  \"x\",\n  \"y\",\n  \"z\",\n  \"#\",\n  \"$\",\n  \"%\",\n  \"*\",\n  \"+\",\n  \",\",\n  \"-\",\n  \".\",\n  \":\",\n  \";\",\n  \"=\",\n  \"?\",\n  \"@\",\n  \"[\",\n  \"]\",\n  \"^\",\n  \"_\",\n  \"{\",\n  \"|\",\n  \"}\",\n  \"~\",\n];\n\nexport const decode83 = (str: String) => {\n  let value = 0;\n  for (let i = 0; i < str.length; i++) {\n    const c = str[i];\n    const digit = digitCharacters.indexOf(c);\n    value = value * 83 + digit;\n  }\n  return value;\n};\n\nexport const encode83 = (n: number, length: number): string => {\n  var result = \"\";\n  for (let i = 1; i <= length; i++) {\n    let digit = (Math.floor(n) / Math.pow(83, length - i)) % 83;\n    result += digitCharacters[Math.floor(digit)];\n  }\n  return result;\n};\n", "export const sRGBToLinear = (value: number) => {\n  let v = value / 255;\n  if (v <= 0.04045) {\n    return v / 12.92;\n  } else {\n    return Math.pow((v + 0.055) / 1.055, 2.4);\n  }\n};\n\nexport const linearTosRGB = (value: number) => {\n  let v = Math.max(0, Math.min(1, value));\n  if (v <= 0.0031308) {\n    return Math.trunc(v * 12.92 * 255 + 0.5);\n  } else {\n    return Math.trunc((1.055 * Math.pow(v, 1 / 2.4) - 0.055) * 255 + 0.5);\n  }\n};\n\nexport const sign = (n: number) => (n < 0 ? -1 : 1);\n\nexport const signPow = (val: number, exp: number) =>\n  sign(val) * Math.pow(Math.abs(val), exp);\n", "export class ValidationError extends Error {\n  constructor(message: string) {\n    super(message);\n    this.name = \"ValidationError\";\n    this.message = message;\n  }\n}\n", "import { decode83 } from \"./base83\";\nimport { sRGBToLinear, signPow, linearTosRGB } from \"./utils\";\nimport { ValidationError } from \"./error\";\n\n/**\n * Returns an error message if invalid or undefined if valid\n * @param blurhash\n */\nconst validateBlurhash = (blurhash: string) => {\n  if (!blurhash || blurhash.length < 6) {\n    throw new ValidationError(\n      \"The blurhash string must be at least 6 characters\"\n    );\n  }\n\n  const sizeFlag = decode83(blurhash[0]);\n  const numY = Math.floor(sizeFlag / 9) + 1;\n  const numX = (sizeFlag % 9) + 1;\n\n  if (blurhash.length !== 4 + 2 * numX * numY) {\n    throw new ValidationError(\n      `blurhash length mismatch: length is ${\n        blurhash.length\n      } but it should be ${4 + 2 * numX * numY}`\n    );\n  }\n};\n\nexport const isBlurhashValid = (\n  blurhash: string\n): { result: boolean; errorReason?: string } => {\n  try {\n    validateBlurhash(blurhash);\n  } catch (error) {\n    return { result: false, errorReason: error.message };\n  }\n\n  return { result: true };\n};\n\nconst decodeDC = (value: number) => {\n  const intR = value >> 16;\n  const intG = (value >> 8) & 255;\n  const intB = value & 255;\n  return [sRGBToLinear(intR), sRGBToLinear(intG), sRGBToLinear(intB)];\n};\n\nconst decodeAC = (value: number, maximumValue: number) => {\n  const quantR = Math.floor(value / (19 * 19));\n  const quantG = Math.floor(value / 19) % 19;\n  const quantB = value % 19;\n\n  const rgb = [\n    signPow((quantR - 9) / 9, 2.0) * maximumValue,\n    signPow((quantG - 9) / 9, 2.0) * maximumValue,\n    signPow((quantB - 9) / 9, 2.0) * maximumValue,\n  ];\n\n  return rgb;\n};\n\nconst decode = (\n  blurhash: string,\n  width: number,\n  height: number,\n  punch?: number\n) => {\n  validateBlurhash(blurhash);\n\n  punch = punch | 1;\n\n  const sizeFlag = decode83(blurhash[0]);\n  const numY = Math.floor(sizeFlag / 9) + 1;\n  const numX = (sizeFlag % 9) + 1;\n\n  const quantisedMaximumValue = decode83(blurhash[1]);\n  const maximumValue = (quantisedMaximumValue + 1) / 166;\n\n  const colors = new Array(numX * numY);\n\n  for (let i = 0; i < colors.length; i++) {\n    if (i === 0) {\n      const value = decode83(blurhash.substring(2, 6));\n      colors[i] = decodeDC(value);\n    } else {\n      const value = decode83(blurhash.substring(4 + i * 2, 6 + i * 2));\n      colors[i] = decodeAC(value, maximumValue * punch);\n    }\n  }\n\n  const bytesPerRow = width * 4;\n  const pixels = new Uint8ClampedArray(bytesPerRow * height);\n\n  for (let y = 0; y < height; y++) {\n    for (let x = 0; x < width; x++) {\n      let r = 0;\n      let g = 0;\n      let b = 0;\n\n      for (let j = 0; j < numY; j++) {\n        for (let i = 0; i < numX; i++) {\n          const basis =\n            Math.cos((Math.PI * x * i) / width) *\n            Math.cos((Math.PI * y * j) / height);\n          let color = colors[i + j * numX];\n          r += color[0] * basis;\n          g += color[1] * basis;\n          b += color[2] * basis;\n        }\n      }\n\n      let intR = linearTosRGB(r);\n      let intG = linearTosRGB(g);\n      let intB = linearTosRGB(b);\n\n      pixels[4 * x + 0 + y * bytesPerRow] = intR;\n      pixels[4 * x + 1 + y * bytesPerRow] = intG;\n      pixels[4 * x + 2 + y * bytesPerRow] = intB;\n      pixels[4 * x + 3 + y * bytesPerRow] = 255; // alpha\n    }\n  }\n  return pixels;\n};\n\nexport default decode;\n", "import { encode83 } from \"./base83\";\nimport { sRGBToLinear, signPow, linearTosRGB } from \"./utils\";\nimport { ValidationError } from \"./error\";\n\ntype NumberTriplet = [number, number, number];\n\nconst bytesPerPixel = 4;\n\nconst multiplyBasisFunction = (\n  pixels: Uint8ClampedArray,\n  width: number,\n  height: number,\n  basisFunction: (i: number, j: number) => number\n): NumberTriplet => {\n  let r = 0;\n  let g = 0;\n  let b = 0;\n  const bytesPerRow = width * bytesPerPixel;\n\n  for (let x = 0; x < width; x++) {\n    const bytesPerPixelX = bytesPerPixel * x;\n\n    for (let y = 0; y < height; y++) {\n      const basePixelIndex = bytesPerPixelX + y * bytesPerRow;\n      const basis = basisFunction(x, y);\n      r +=\n        basis * sRGBToLinear(pixels[basePixelIndex]);\n      g +=\n        basis * sRGBToLinear(pixels[basePixelIndex + 1]);\n      b +=\n        basis * sRGBToLinear(pixels[basePixelIndex + 2]);\n    }\n  }\n\n  let scale = 1 / (width * height);\n\n  return [r * scale, g * scale, b * scale];\n};\n\nconst encodeDC = (value: NumberTriplet): number => {\n  const roundedR = linearTosRGB(value[0]);\n  const roundedG = linearTosRGB(value[1]);\n  const roundedB = linearTosRGB(value[2]);\n  return (roundedR << 16) + (roundedG << 8) + roundedB;\n};\n\nconst encodeAC = (value: NumberTriplet, maximumValue: number): number => {\n  let quantR = Math.floor(\n    Math.max(\n      0,\n      Math.min(18, Math.floor(signPow(value[0] / maximumValue, 0.5) * 9 + 9.5))\n    )\n  );\n  let quantG = Math.floor(\n    Math.max(\n      0,\n      Math.min(18, Math.floor(signPow(value[1] / maximumValue, 0.5) * 9 + 9.5))\n    )\n  );\n  let quantB = Math.floor(\n    Math.max(\n      0,\n      Math.min(18, Math.floor(signPow(value[2] / maximumValue, 0.5) * 9 + 9.5))\n    )\n  );\n\n  return quantR * 19 * 19 + quantG * 19 + quantB;\n};\n\nconst encode = (\n  pixels: Uint8ClampedArray,\n  width: number,\n  height: number,\n  componentX: number,\n  componentY: number\n): string => {\n  if (componentX < 1 || componentX > 9 || componentY < 1 || componentY > 9) {\n    throw new ValidationError(\"BlurHash must have between 1 and 9 components\");\n  }\n  if (width * height * 4 !== pixels.length) {\n    throw new ValidationError(\"Width and height must match the pixels array\");\n  }\n\n  let factors: Array<[number, number, number]> = [];\n  for (let y = 0; y < componentY; y++) {\n    for (let x = 0; x < componentX; x++) {\n      const normalisation = x == 0 && y == 0 ? 1 : 2;\n      const factor = multiplyBasisFunction(\n        pixels,\n        width,\n        height,\n        (i: number, j: number) =>\n          normalisation *\n          Math.cos((Math.PI * x * i) / width) *\n          Math.cos((Math.PI * y * j) / height)\n      );\n      factors.push(factor);\n    }\n  }\n\n  const dc = factors[0];\n  const ac = factors.slice(1);\n\n  let hash = \"\";\n\n  let sizeFlag = componentX - 1 + (componentY - 1) * 9;\n  hash += encode83(sizeFlag, 1);\n\n  let maximumValue: number;\n  if (ac.length > 0) {\n    let actualMaximumValue = Math.max(...ac.map((val) => Math.max(...val)));\n    let quantisedMaximumValue = Math.floor(\n      Math.max(0, Math.min(82, Math.floor(actualMaximumValue * 166 - 0.5)))\n    );\n    maximumValue = (quantisedMaximumValue + 1) / 166;\n    hash += encode83(quantisedMaximumValue, 1);\n  } else {\n    maximumValue = 1;\n    hash += encode83(0, 1);\n  }\n\n  hash += encode83(encodeDC(dc), 4);\n\n  ac.forEach((factor) => {\n    hash += encode83(encodeAC(factor, maximumValue), 2);\n  });\n\n  return hash;\n};\n\nexport default encode;\n", "/**\n * Compute the resolution to decode a BlurHash placeholder at.\n *\n * A placeholder is a low-frequency blur, and decode cost is\n * O(width * height * componentsX * componentsY). Decoding above a small\n * size wastes work with no visible benefit, because the canvas is stretched\n * to fill its host via CSS (`blur-hash canvas { width:100%; height:100% }`).\n *\n * This caps the long edge to `cap` pixels, preserves the aspect ratio, floors\n * each edge at 1px, and never upscales a source that is already small.\n *\n * @param width The layout/source width in pixels.\n * @param height The layout/source height in pixels.\n * @param cap Maximum pixels on the long edge. Default 32.\n * @returns The decode dimensions to pass to `decode` and `createImageData`.\n */\nexport function decodeDimensions (\n    width:number,\n    height:number,\n    cap:number = 32\n):{ width:number; height:number } {\n    const longEdge = Math.max(width, height)\n\n    // Never upscale: a source at or below the cap decodes as-is.\n    if (longEdge <= cap) {\n        return { width, height }\n    }\n\n    const scale = cap / longEdge\n    return {\n        width: Math.max(1, Math.round(width * scale)),\n        height: Math.max(1, Math.round(height * scale))\n    }\n}\n", "import { toAttributes } from '@substrate-system/web-component/attributes'\nimport type { ImgAttrs } from './index.js'\nimport { decodeDimensions } from './decode-dimensions.js'\n\nexport type SSRAttrs = ImgAttrs & { classes?:string }\n\nexport function render (attrs:SSRAttrs) {\n    const {\n        width,\n        height,\n        alt,\n        contentVisibility,\n        placeholder,\n        decoding,\n        loading,\n        srcset,\n        sizes,\n        src\n    } = attrs\n\n    if (!placeholder) throw new Error('not placeholder')\n\n    const decodeWidth = typeof width === 'string' ? parseInt(width, 10) : width\n    const decodeHeight = typeof height === 'string' ?\n        parseInt(height, 10) :\n        height\n    const decodeSize = decodeDimensions(decodeWidth, decodeHeight)\n\n    const htmlString = `<canvas\n        alt=\"${alt}\"\n        width=${decodeSize.width}\n        height=${decodeSize.height}\n        class=\"blurry\"\n    ></canvas>\n\n    <img class=\"blurry\"\n        alt=\"${alt}\"\n        content-visibility=\"${contentVisibility || 'auto'}\"\n        decoding=\"${decoding || 'async'}\"\n        loading=\"${loading || 'lazy'}\"\n        ${srcset ? `srcset=\"${srcset}\"` : ''}\n        ${sizes ? `sizes=\"${sizes}\"` : ''}\n        src=\"${src}\"\n    />`\n\n    const attributeString = toAttributes(attrs)\n\n    // running in node?\n    return typeof window === 'undefined' ?\n        `<blur-hash ${attributeString}>\n            ${htmlString}\n        </blur-hash>` :\n        htmlString\n}\n\nexport const outerHTML = (attrs:SSRAttrs) => {\n    return `<blur-hash>${render(attrs)}</blur-hash>`\n}\n", "import { WebComponent } from '@substrate-system/web-component'\nimport { decode } from 'blurhash'\nimport { render } from './html.js'\nimport { decodeDimensions } from './decode-dimensions.js'\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'blur-hash': BlurHash\n    }\n}\n\nexport type ImgAttrs = {\n    alt:string;\n    width:string|number;\n    height:string|number;\n    placeholder:string;\n    src:string;\n    srcset?:string|null;\n    sizes?:string|null;\n    time?:number;\n    contentVisibility?:'visible'|'auto'|'hidden'|null;\n    decoding?:'sync'|'async'|'auto'|null;\n    loading?:'lazy'|'eager'|'auto'|null;\n}\n\nexport class BlurHash extends WebComponent.create('blur-hash') {\n    time:number\n    rafId:number|null = null\n\n    constructor () {\n        super()\n        const w = this.getAttribute('width')\n        const h = this.getAttribute('height')\n        const time = this.getAttribute('time')\n        this.time = time ? parseInt(time) : 800\n\n        this.style.width = '' + w\n        this.style.height = '' + h\n\n        document.body.style.setProperty('--blur-hash-time',\n            time ? '.' + (parseInt(time) / 1000 + 's') : '0.8s')\n    }\n\n    /**\n     * Change the image, and do the blur-up thing again.\n     * Will use the existing width & height if they are not passed in.\n     */\n    reset (attrs:(Omit<Omit<ImgAttrs, 'width'>, 'height'> & {\n        width?:string|number;\n        height?:string|number;\n    })):void {\n        if (attrs.width) this.style.width = '' + attrs.width\n        if (attrs.height) this.style.height = '' + attrs.height\n\n        const width = (attrs.width ?\n            (typeof attrs.width === 'string' ? parseInt(attrs.width, 10) : attrs.width) :\n            parseInt(this.style.width, 10))\n        const height = (attrs.height ?\n            (typeof attrs.height === 'string' ? parseInt(attrs.height, 10) : attrs.height) :\n            parseInt(this.style.height, 10))\n\n        this.innerHTML = BlurHash.html(Object.assign(attrs, { width, height }))\n\n        const { placeholder, src: newSrc } = attrs\n\n        this.scheduleDecode(placeholder, width, height)\n\n        this.setAttribute('src', newSrc)\n        this.setAttribute('placeholder', placeholder)\n\n        const img = this.querySelector('img')!\n        if (attrs.srcset) img.setAttribute('srcset', attrs.srcset)\n        if (attrs.sizes) img.setAttribute('sizes', attrs.sizes)\n\n        this.sharpen()\n    }\n\n    /**\n     * Decode the placeholder and paint it to the canvas on the next frame.\n     * Cancels any pending frame first, so a rapid re-call (e.g. a second\n     * `reset`) never leaves a stale decode running. Bails if the element has\n     * detached before the frame fires.\n     */\n    scheduleDecode (placeholder:string, width:number, height:number):void {\n        if (this.rafId !== null) cancelAnimationFrame(this.rafId)\n\n        const { width: dw, height: dh } = decodeDimensions(width, height)\n\n        this.rafId = requestAnimationFrame(() => {\n            this.rafId = null\n            if (!this.isConnected) return\n            const canvas = this.querySelector<HTMLCanvasElement>('canvas')\n            if (!canvas) return\n            const ctx = canvas.getContext('2d')\n            if (!ctx) return\n            const pixels = decode(placeholder, dw, dh)\n            const imageData = ctx.createImageData(dw, dh)\n            imageData.data.set(pixels)\n            ctx.putImageData(imageData, 0, 0)\n        })\n    }\n\n    disconnectedCallback ():void {\n        if (this.rafId !== null) {\n            cancelAnimationFrame(this.rafId)\n            this.rafId = null\n        }\n    }\n\n    sharpen () {\n        const img = this.qs('img')!\n        if (img.complete && img.naturalWidth > 0) {\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\n        } else {\n            img.addEventListener('load', () => {\n                img.classList.remove('blurry')\n                img.classList.add('sharp')\n            })\n        }\n    }\n\n    connectedCallback () {\n        const width = parseInt(this.getAttribute('width') ?? '')\n        const height = parseInt(this.getAttribute('height') ?? '')\n        const placeholder = this.getAttribute('placeholder')\n        if (!placeholder) throw new Error('Missing placeholder')\n        if (!width) throw new Error('Missing width')\n        if (!height) throw new Error('Missing height')\n\n        // don't render again if we dont have to\n        if (!this.innerHTML) {\n            this.innerHTML = this.render()\n        }\n\n        this.scheduleDecode(placeholder, width, height)\n        this.sharpen()\n    }\n\n    static html (attrs:ImgAttrs & { classes?:string }) {\n        return render(attrs)\n    }\n\n    /**\n     * Use the attributes to create HTML.\n     */\n    render ():string {\n        const srcset = this.getAttribute('srcset')\n        const width = this.getAttribute('width')\n        const height = this.getAttribute('height')\n        const time = this.getAttribute('time')\n        const classes = this.classList.toString()\n        const placeholder = this.getAttribute('placeholder')\n        this.time = time ? parseInt(time) : 800\n        const src = this.getAttribute('src')\n        const alt = this.getAttribute('alt')\n        if (!placeholder) throw new Error('not placeholder')\n        if (!width || !height) throw new Error('not width or not height')\n        if (!src) throw new Error('Not src')\n        if (!alt) throw new Error('Not alt')\n\n        return BlurHash.html({ classes, srcset, width, height, src, alt, placeholder })\n    }\n}\n"],
-  "mappings": "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",
-  "names": ["toAttributes", "attrs", "acc", "k", "value", "__name", "isRegistered", "elName", "__name", "define", "name", "element", "qs", "qsa", "match", "el", "s", "WebComponent", "_WebComponent", "__name", "el", "match", "elementName", "CreatedClass", "evType", "define", "name", "oldValue", "newValue", "handler", "type", "listener", "options", "event", "componentName", "error", "selector", "eventName", "opts", "bubbles", "cancelable", "detail", "namespacedType", "result", "evName", "fullEvName", "entry", "namespace", "isRegistered", "elName", "element", "ctor", "boolAttrs", "strAttrs", "proto", "attr", "v", "q", "x", "__name", "t", "e", "n", "l", "f", "__name", "t", "e", "h", "F", "M", "d", "C", "x", "n", "z", "__name", "t", "e", "n", "f", "L", "l", "M", "U", "C", "x", "m", "b", "i", "u", "o", "a", "c", "s", "y", "B", "R", "w", "P", "G", "T", "V", "h", "I", "E", "j", "decodeDimensions", "width", "height", "cap", "longEdge", "scale", "__name", "render", "attrs", "width", "height", "alt", "contentVisibility", "placeholder", "decoding", "loading", "srcset", "sizes", "src", "decodeWidth", "decodeHeight", "decodeSize", "decodeDimensions", "htmlString", "attributeString", "toAttributes", "__name", "BlurHash", "_BlurHash", "WebComponent", "__name", "w", "h", "time", "attrs", "width", "height", "placeholder", "newSrc", "img", "dw", "dh", "decodeDimensions", "canvas", "ctx", "pixels", "j", "imageData", "render", "srcset", "classes", "src", "alt"]
+  "sourcesContent": ["export type Attrs = Record<string, undefined|null|string|number|boolean|(string|number)[]>\n\n/**\n * Transform an object into an HTML attributes string. The object should be\n * like `{ attributeName: value }`.\n *\n * @param attrs An object for the attributes.\n * @returns {string} A string suitable for use as HTML attributes.\n */\nexport function toAttributes (attrs:Attrs):string {\n    return Object.keys(attrs).reduce((acc, k) => {\n        const value = attrs[k]\n        if (!value) return acc\n\n        if (typeof value === 'boolean') {\n            if (value) return (acc + ` ${k}`).trim()\n            return acc\n        }\n\n        if (Array.isArray(value)) {\n            return (acc + ` ${k}=\"${value.join(' ')}\"`)\n        }\n\n        return (acc + ` ${k}=\"${value}\"`).trim()\n    }, '')\n}\n", "export { toAttributes } from './attributes.js'\n\n/**\n * Check if the given tag name has been registered.\n *\n * @see {@link https://stackoverflow.com/a/28210364 stackoverflow}\n * @param {string} elName The custom element tag name.\n * @returns {boolean} True if the given name has been registered already.\n */\nexport function isRegistered (elName:string):boolean {\n    return document.createElement(elName).constructor !== window.HTMLElement\n}\n\nexport function define (name:string, element:CustomElementConstructor) {\n    if (!window) return\n    if (!('customElements' in window)) return\n\n    if (!isRegistered(name)) {\n        window.customElements.define(name, element)\n    }\n}\n\nexport const qs = document.querySelector.bind(document)\nexport const qsa = document.querySelectorAll.bind(document)\n\n/**\n * Get the closes parent element matching the given selector.\n * @param el Element to start from\n * @param s Selector for an element\n * @returns {HTMLElement|null} The closes parent element that matches.\n */\nexport function match (el:HTMLElement, s:string):HTMLElement|null {\n    if (!el.matches) el = el.parentElement!\n    return el.matches(s) ? el : el.closest(s)\n}\n", "import { match as _match } from './util.js'\n\nexport abstract class WebComponent extends window.HTMLElement {\n    static TAG:string = ''\n    TAG:string = ''\n\n    /**\n     * Declare boolean attributes that should be reflected as properties.\n     * The base class auto-generates getters/setters and includes these in\n     * `observedAttributes`. Framework property assignment (e.g. Preact's\n     * `el.disabled = true`) will then correctly set the attribute.\n     */\n    static reflectedBooleanAttributes:string[] = []\n\n    /**\n     * Declare string attributes that should be reflected as properties.\n     * Getter returns `string|null` (null when attribute is absent).\n     * Setting `null` or `undefined` removes the attribute.\n     */\n    static reflectedStringAttributes:string[] = []\n\n    /**\n     * Auto-derived from `reflectedBooleanAttributes` and\n     * `reflectedStringAttributes`. Override with `super.observedAttributes`\n     * to add non-reflected observed attributes:\n     *\n     * ```ts\n     * static get observedAttributes () {\n     *     return [...super.observedAttributes, 'aria-label']\n     * }\n     * ```\n     */\n    static get observedAttributes ():string[] {\n        return [...new Set([\n            ...this.reflectedBooleanAttributes,\n            ...this.reflectedStringAttributes,\n        ])]\n    }\n\n    static match (el:HTMLElement):HTMLElement|null {\n        return _match(el, this.TAG)\n    }\n\n    static create (elementName:string):typeof WebComponent & {\n        new (...args:any[]):WebComponent;\n        TAG:string;\n        define: typeof WebComponent.define;\n        event: typeof WebComponent.event;\n    } {\n        const CreatedClass = class extends WebComponent {\n            static TAG = elementName\n            TAG = elementName\n            render () {\n                throw new Error('`render` should be implemented by children')\n            }\n        }\n\n        // Copy static methods with proper binding\n        CreatedClass.define = function () {\n            return WebComponent.define.call(this)\n        }\n        CreatedClass.event = function (evType:string) {\n            return WebComponent.event.call(this, evType)\n        }\n\n        return CreatedClass\n    }\n\n    static define<T extends {\n        new (...args:any[]):WebComponent;\n        TAG:string;\n    }>(this:T) {\n        define(this.TAG, this)\n    }\n\n    /**\n     * Runs when the value of an attribute is changed.\n     *\n     * Depends on `static observedAttributes`.\n     *\n     * Should name methods like `handleChange_disabled`.\n     *\n     * @param  {string} name     The attribute name\n     * @param  {string} oldValue The old attribute value\n     * @param  {string} newValue The new attribute value\n     */\n    attributeChangedCallback (\n        name:string,\n        oldValue:string,\n        newValue:string\n    ):void {\n        const handler = this[handlerKey(name)]\n        if (handler) {\n            handler.call(this, oldValue, newValue)\n        }\n    }\n\n    connectedCallback () {\n        this.render()\n    }\n\n    abstract render ():any\n\n    qs<K extends keyof HTMLElementTagNameMap>(\n        selector:K\n    ):HTMLElementTagNameMap[K]|null;\n\n    qs<E extends Element = Element>(selector:string):E|null;\n    qs (selector:string):Element|null {\n        return this.querySelector(selector)\n    }\n\n    qsa<K extends keyof HTMLElementTagNameMap>(\n        selector:K\n    ):HTMLElementTagNameMap[K]|null;\n\n    qsa<E extends Element = Element>(selector:string):E|null;\n    qsa (selector:string):NodeListOf<Element> {\n        return this.querySelectorAll(selector)\n    }\n\n    /**\n     * Take a non-namepsaced event name, return namespace event name.\n     *\n     * @param {string} evType The non-namespace event name\n     * @returns {string} Namespaced event name, eg, `my-component:click`\n     */\n    static event (evType:string):string {\n        return eventName(this.TAG, evType)\n    }\n\n    /**\n     * Emit a namespaced event.\n     *\n     * @param type (non-namespaced) event type string\n     * @param opts `bubbles`, `detail`, and `cancelable`. Default is\n     * `{ bubbles: true, cancelable: true }`\n     * @returns {boolean}\n     */\n    emit<T = any> (type:string, opts:Partial<{\n        bubbles:boolean,\n        cancelable:boolean,\n        detail:CustomEvent<T>['detail']\n    }> = {}):boolean {\n        if (type === '*') throw new Error('Do not emit the literal \"*\"')\n\n        const { bubbles = true, cancelable = true, detail } = opts\n        const namespacedType = `${this.TAG}:${type}`\n\n        const event = new CustomEvent(namespacedType, {\n            bubbles,\n            cancelable,\n            detail\n        })\n\n        return this.dispatchEvent(event)\n    }\n\n    /**\n     * Create and emit an event, no namespacing.\n     */\n    dispatch<T> (type:string, opts:Partial<{\n        bubbles:boolean,\n        cancelable:boolean,\n        detail:CustomEvent<T>['detail']\n    }> = {}):boolean {\n        const event = new CustomEvent(type, {\n            bubbles: (opts.bubbles === undefined) ? true : opts.bubbles,\n            cancelable: (opts.cancelable === undefined) ? true : opts.cancelable,\n            detail: opts.detail\n        })\n\n        return this.dispatchEvent(event)\n    }\n\n    /**\n     * Listen for namespaced events.\n     */\n    on<T extends Event = Event> (\n        evName:string,\n        handler:(ev:T)=>any,\n        options?:boolean|AddEventListenerOptions\n    ):void;\n\n    on (\n        evName:string,\n        handler:EventListenerObject,\n        options?:boolean|AddEventListenerOptions\n    ):void;\n\n    on (\n        evName:string,\n        handler:((ev:Event)=>any)|EventListenerObject,\n        options?:boolean|AddEventListenerOptions\n    ):void {\n        const fullEvName = WebComponent.event.call(this, evName)\n        this.addEventListener(fullEvName, handler as EventListenerOrEventListenerObject, options)\n    }\n\n    /**\n     * Remove a namespaced event listener.\n     */\n    off<T extends Event = Event> (\n        evName:string,\n        handler:(ev:T)=>any,\n        options?:boolean|EventListenerOptions\n    ):void;\n\n    off (\n        evName:string,\n        handler:EventListenerObject,\n        options?:boolean|EventListenerOptions\n    ):void;\n\n    off (\n        evName:string,\n        handler:((ev:Event)=>any)|EventListenerObject,\n        options?:boolean|EventListenerOptions\n    ):void {\n        const fullEvName = WebComponent.event.call(this, evName)\n        this.removeEventListener(fullEvName, handler as EventListenerOrEventListenerObject, options)\n    }\n}\n\nfunction eventName (namespace:string, evType:string) {\n    return `${namespace}:${evType}`\n}\n\n/**\n * Cache of attribute name -> handler method name (`handleChange_<attr>`).\n * Building the lookup string once per attribute avoids re-allocating it on\n * every `attributeChangedCallback`.\n */\nconst handlerKeys:Record<string, string> = Object.create(null)\nfunction handlerKey (name:string):string {\n    return handlerKeys[name] || (handlerKeys[name] = `handleChange_${name}`)\n}\n\n/**\n * Check if the given tag name has been registered.\n *\n * @see {@link https://stackoverflow.com/a/28210364 stackoverflow}\n * @param {string} elName The custom element tag name.\n * @returns {boolean} True if the given name has been registered already.\n */\nexport function isRegistered (elName:string):boolean {\n    return document.createElement(elName).constructor !== window.HTMLElement\n}\n\nexport function define (name:string, element:CustomElementConstructor) {\n    if (typeof window === 'undefined') return\n    if (!('customElements' in window)) return\n    if (isRegistered(name)) return\n\n    const ctor = element as unknown as typeof WebComponent\n    const boolAttrs:string[] = ctor.reflectedBooleanAttributes ?? []\n    const strAttrs:string[] = ctor.reflectedStringAttributes ?? []\n    const proto = (element as any).prototype\n\n    for (const attr of boolAttrs) {\n        // Skip built-in IDL attributes on HTMLElement and ancestors\n        // (covers Element.prototype, Node.prototype, etc.)\n        if (attr in HTMLElement.prototype) continue\n        // Skip if the subclass already defines an own-property accessor\n        if (Object.getOwnPropertyDescriptor(proto, attr)) continue\n        Object.defineProperty(proto, attr, {\n            get (this:HTMLElement):boolean {\n                return this.hasAttribute(attr)\n            },\n            set (this:HTMLElement, v:unknown) {\n                this.toggleAttribute(attr, Boolean(v))\n            },\n            configurable: true,\n            enumerable: true,\n        })\n    }\n\n    for (const attr of strAttrs) {\n        if (boolAttrs.includes(attr)) {\n            console.warn(\n                `[web-component] \"${attr}\" appears in both ` +\n                'reflectedBooleanAttributes and reflectedStringAttributes ' +\n                `on <${name}>. Boolean wins.`\n            )\n            continue\n        }\n        if (attr in HTMLElement.prototype) continue\n        if (Object.getOwnPropertyDescriptor(proto, attr)) continue\n        Object.defineProperty(proto, attr, {\n            get (this:HTMLElement):string|null {\n                return this.getAttribute(attr)\n            },\n            set (this:HTMLElement, v:unknown) {\n                // null and undefined both remove the attribute\n                if (v == null) {\n                    this.removeAttribute(attr)\n                } else {\n                    this.setAttribute(attr, String(v))\n                }\n            },\n            configurable: true,\n            enumerable: true,\n        })\n    }\n\n    window.customElements.define(name, element)\n}\n", "const digitCharacters = [\n  \"0\",\n  \"1\",\n  \"2\",\n  \"3\",\n  \"4\",\n  \"5\",\n  \"6\",\n  \"7\",\n  \"8\",\n  \"9\",\n  \"A\",\n  \"B\",\n  \"C\",\n  \"D\",\n  \"E\",\n  \"F\",\n  \"G\",\n  \"H\",\n  \"I\",\n  \"J\",\n  \"K\",\n  \"L\",\n  \"M\",\n  \"N\",\n  \"O\",\n  \"P\",\n  \"Q\",\n  \"R\",\n  \"S\",\n  \"T\",\n  \"U\",\n  \"V\",\n  \"W\",\n  \"X\",\n  \"Y\",\n  \"Z\",\n  \"a\",\n  \"b\",\n  \"c\",\n  \"d\",\n  \"e\",\n  \"f\",\n  \"g\",\n  \"h\",\n  \"i\",\n  \"j\",\n  \"k\",\n  \"l\",\n  \"m\",\n  \"n\",\n  \"o\",\n  \"p\",\n  \"q\",\n  \"r\",\n  \"s\",\n  \"t\",\n  \"u\",\n  \"v\",\n  \"w\",\n  \"x\",\n  \"y\",\n  \"z\",\n  \"#\",\n  \"$\",\n  \"%\",\n  \"*\",\n  \"+\",\n  \",\",\n  \"-\",\n  \".\",\n  \":\",\n  \";\",\n  \"=\",\n  \"?\",\n  \"@\",\n  \"[\",\n  \"]\",\n  \"^\",\n  \"_\",\n  \"{\",\n  \"|\",\n  \"}\",\n  \"~\",\n];\n\nexport const decode83 = (str: String) => {\n  let value = 0;\n  for (let i = 0; i < str.length; i++) {\n    const c = str[i];\n    const digit = digitCharacters.indexOf(c);\n    value = value * 83 + digit;\n  }\n  return value;\n};\n\nexport const encode83 = (n: number, length: number): string => {\n  var result = \"\";\n  for (let i = 1; i <= length; i++) {\n    let digit = (Math.floor(n) / Math.pow(83, length - i)) % 83;\n    result += digitCharacters[Math.floor(digit)];\n  }\n  return result;\n};\n", "export const sRGBToLinear = (value: number) => {\n  let v = value / 255;\n  if (v <= 0.04045) {\n    return v / 12.92;\n  } else {\n    return Math.pow((v + 0.055) / 1.055, 2.4);\n  }\n};\n\nexport const linearTosRGB = (value: number) => {\n  let v = Math.max(0, Math.min(1, value));\n  if (v <= 0.0031308) {\n    return Math.trunc(v * 12.92 * 255 + 0.5);\n  } else {\n    return Math.trunc((1.055 * Math.pow(v, 1 / 2.4) - 0.055) * 255 + 0.5);\n  }\n};\n\nexport const sign = (n: number) => (n < 0 ? -1 : 1);\n\nexport const signPow = (val: number, exp: number) =>\n  sign(val) * Math.pow(Math.abs(val), exp);\n", "export class ValidationError extends Error {\n  constructor(message: string) {\n    super(message);\n    this.name = \"ValidationError\";\n    this.message = message;\n  }\n}\n", "import { decode83 } from \"./base83\";\nimport { sRGBToLinear, signPow, linearTosRGB } from \"./utils\";\nimport { ValidationError } from \"./error\";\n\n/**\n * Returns an error message if invalid or undefined if valid\n * @param blurhash\n */\nconst validateBlurhash = (blurhash: string) => {\n  if (!blurhash || blurhash.length < 6) {\n    throw new ValidationError(\n      \"The blurhash string must be at least 6 characters\"\n    );\n  }\n\n  const sizeFlag = decode83(blurhash[0]);\n  const numY = Math.floor(sizeFlag / 9) + 1;\n  const numX = (sizeFlag % 9) + 1;\n\n  if (blurhash.length !== 4 + 2 * numX * numY) {\n    throw new ValidationError(\n      `blurhash length mismatch: length is ${\n        blurhash.length\n      } but it should be ${4 + 2 * numX * numY}`\n    );\n  }\n};\n\nexport const isBlurhashValid = (\n  blurhash: string\n): { result: boolean; errorReason?: string } => {\n  try {\n    validateBlurhash(blurhash);\n  } catch (error) {\n    return { result: false, errorReason: error.message };\n  }\n\n  return { result: true };\n};\n\nconst decodeDC = (value: number) => {\n  const intR = value >> 16;\n  const intG = (value >> 8) & 255;\n  const intB = value & 255;\n  return [sRGBToLinear(intR), sRGBToLinear(intG), sRGBToLinear(intB)];\n};\n\nconst decodeAC = (value: number, maximumValue: number) => {\n  const quantR = Math.floor(value / (19 * 19));\n  const quantG = Math.floor(value / 19) % 19;\n  const quantB = value % 19;\n\n  const rgb = [\n    signPow((quantR - 9) / 9, 2.0) * maximumValue,\n    signPow((quantG - 9) / 9, 2.0) * maximumValue,\n    signPow((quantB - 9) / 9, 2.0) * maximumValue,\n  ];\n\n  return rgb;\n};\n\nconst decode = (\n  blurhash: string,\n  width: number,\n  height: number,\n  punch?: number\n) => {\n  validateBlurhash(blurhash);\n\n  punch = punch | 1;\n\n  const sizeFlag = decode83(blurhash[0]);\n  const numY = Math.floor(sizeFlag / 9) + 1;\n  const numX = (sizeFlag % 9) + 1;\n\n  const quantisedMaximumValue = decode83(blurhash[1]);\n  const maximumValue = (quantisedMaximumValue + 1) / 166;\n\n  const colors = new Array(numX * numY);\n\n  for (let i = 0; i < colors.length; i++) {\n    if (i === 0) {\n      const value = decode83(blurhash.substring(2, 6));\n      colors[i] = decodeDC(value);\n    } else {\n      const value = decode83(blurhash.substring(4 + i * 2, 6 + i * 2));\n      colors[i] = decodeAC(value, maximumValue * punch);\n    }\n  }\n\n  const bytesPerRow = width * 4;\n  const pixels = new Uint8ClampedArray(bytesPerRow * height);\n\n  for (let y = 0; y < height; y++) {\n    for (let x = 0; x < width; x++) {\n      let r = 0;\n      let g = 0;\n      let b = 0;\n\n      for (let j = 0; j < numY; j++) {\n        for (let i = 0; i < numX; i++) {\n          const basis =\n            Math.cos((Math.PI * x * i) / width) *\n            Math.cos((Math.PI * y * j) / height);\n          let color = colors[i + j * numX];\n          r += color[0] * basis;\n          g += color[1] * basis;\n          b += color[2] * basis;\n        }\n      }\n\n      let intR = linearTosRGB(r);\n      let intG = linearTosRGB(g);\n      let intB = linearTosRGB(b);\n\n      pixels[4 * x + 0 + y * bytesPerRow] = intR;\n      pixels[4 * x + 1 + y * bytesPerRow] = intG;\n      pixels[4 * x + 2 + y * bytesPerRow] = intB;\n      pixels[4 * x + 3 + y * bytesPerRow] = 255; // alpha\n    }\n  }\n  return pixels;\n};\n\nexport default decode;\n", "import { encode83 } from \"./base83\";\nimport { sRGBToLinear, signPow, linearTosRGB } from \"./utils\";\nimport { ValidationError } from \"./error\";\n\ntype NumberTriplet = [number, number, number];\n\nconst bytesPerPixel = 4;\n\nconst multiplyBasisFunction = (\n  pixels: Uint8ClampedArray,\n  width: number,\n  height: number,\n  basisFunction: (i: number, j: number) => number\n): NumberTriplet => {\n  let r = 0;\n  let g = 0;\n  let b = 0;\n  const bytesPerRow = width * bytesPerPixel;\n\n  for (let x = 0; x < width; x++) {\n    const bytesPerPixelX = bytesPerPixel * x;\n\n    for (let y = 0; y < height; y++) {\n      const basePixelIndex = bytesPerPixelX + y * bytesPerRow;\n      const basis = basisFunction(x, y);\n      r +=\n        basis * sRGBToLinear(pixels[basePixelIndex]);\n      g +=\n        basis * sRGBToLinear(pixels[basePixelIndex + 1]);\n      b +=\n        basis * sRGBToLinear(pixels[basePixelIndex + 2]);\n    }\n  }\n\n  let scale = 1 / (width * height);\n\n  return [r * scale, g * scale, b * scale];\n};\n\nconst encodeDC = (value: NumberTriplet): number => {\n  const roundedR = linearTosRGB(value[0]);\n  const roundedG = linearTosRGB(value[1]);\n  const roundedB = linearTosRGB(value[2]);\n  return (roundedR << 16) + (roundedG << 8) + roundedB;\n};\n\nconst encodeAC = (value: NumberTriplet, maximumValue: number): number => {\n  let quantR = Math.floor(\n    Math.max(\n      0,\n      Math.min(18, Math.floor(signPow(value[0] / maximumValue, 0.5) * 9 + 9.5))\n    )\n  );\n  let quantG = Math.floor(\n    Math.max(\n      0,\n      Math.min(18, Math.floor(signPow(value[1] / maximumValue, 0.5) * 9 + 9.5))\n    )\n  );\n  let quantB = Math.floor(\n    Math.max(\n      0,\n      Math.min(18, Math.floor(signPow(value[2] / maximumValue, 0.5) * 9 + 9.5))\n    )\n  );\n\n  return quantR * 19 * 19 + quantG * 19 + quantB;\n};\n\nconst encode = (\n  pixels: Uint8ClampedArray,\n  width: number,\n  height: number,\n  componentX: number,\n  componentY: number\n): string => {\n  if (componentX < 1 || componentX > 9 || componentY < 1 || componentY > 9) {\n    throw new ValidationError(\"BlurHash must have between 1 and 9 components\");\n  }\n  if (width * height * 4 !== pixels.length) {\n    throw new ValidationError(\"Width and height must match the pixels array\");\n  }\n\n  let factors: Array<[number, number, number]> = [];\n  for (let y = 0; y < componentY; y++) {\n    for (let x = 0; x < componentX; x++) {\n      const normalisation = x == 0 && y == 0 ? 1 : 2;\n      const factor = multiplyBasisFunction(\n        pixels,\n        width,\n        height,\n        (i: number, j: number) =>\n          normalisation *\n          Math.cos((Math.PI * x * i) / width) *\n          Math.cos((Math.PI * y * j) / height)\n      );\n      factors.push(factor);\n    }\n  }\n\n  const dc = factors[0];\n  const ac = factors.slice(1);\n\n  let hash = \"\";\n\n  let sizeFlag = componentX - 1 + (componentY - 1) * 9;\n  hash += encode83(sizeFlag, 1);\n\n  let maximumValue: number;\n  if (ac.length > 0) {\n    let actualMaximumValue = Math.max(...ac.map((val) => Math.max(...val)));\n    let quantisedMaximumValue = Math.floor(\n      Math.max(0, Math.min(82, Math.floor(actualMaximumValue * 166 - 0.5)))\n    );\n    maximumValue = (quantisedMaximumValue + 1) / 166;\n    hash += encode83(quantisedMaximumValue, 1);\n  } else {\n    maximumValue = 1;\n    hash += encode83(0, 1);\n  }\n\n  hash += encode83(encodeDC(dc), 4);\n\n  ac.forEach((factor) => {\n    hash += encode83(encodeAC(factor, maximumValue), 2);\n  });\n\n  return hash;\n};\n\nexport default encode;\n", "/**\n * Compute the resolution to decode a BlurHash placeholder at.\n *\n * A placeholder is a low-frequency blur, and decode cost is\n * O(width * height * componentsX * componentsY). Decoding above a small\n * size wastes work with no visible benefit, because the canvas is stretched\n * to fill its host via CSS (`blur-hash canvas { width:100%; height:100% }`).\n *\n * This caps the long edge to `cap` pixels, preserves the aspect ratio, floors\n * each edge at 1px, and never upscales a source that is already small.\n *\n * @param width The layout/source width in pixels.\n * @param height The layout/source height in pixels.\n * @param cap Maximum pixels on the long edge. Default 32.\n * @returns The decode dimensions to pass to `decode` and `createImageData`.\n */\nexport function decodeDimensions (\n    width:number,\n    height:number,\n    cap:number = 32\n):{ width:number; height:number } {\n    const longEdge = Math.max(width, height)\n\n    // Never upscale: a source at or below the cap decodes as-is.\n    if (longEdge <= cap) {\n        return { width, height }\n    }\n\n    const scale = cap / longEdge\n    return {\n        width: Math.max(1, Math.round(width * scale)),\n        height: Math.max(1, Math.round(height * scale))\n    }\n}\n", "import { toAttributes } from '@substrate-system/web-component/attributes'\nimport type { ImgAttrs } from './index.js'\nimport { decodeDimensions } from './decode-dimensions.js'\n\nexport type SSRAttrs = ImgAttrs & { classes?:string }\n\nexport function render (attrs:SSRAttrs) {\n    const {\n        width,\n        height,\n        alt,\n        contentVisibility,\n        placeholder,\n        decoding,\n        loading,\n        srcset,\n        sizes,\n        src\n    } = attrs\n\n    if (!placeholder) throw new Error('not placeholder')\n\n    const decodeWidth = typeof width === 'string' ? parseInt(width, 10) : width\n    const decodeHeight = typeof height === 'string' ?\n        parseInt(height, 10) :\n        height\n    const decodeSize = decodeDimensions(decodeWidth, decodeHeight)\n\n    const htmlString = `<canvas\n        alt=\"${alt}\"\n        width=${decodeSize.width}\n        height=${decodeSize.height}\n        class=\"blurry\"\n    ></canvas>\n\n    <img class=\"blurry\"\n        alt=\"${alt}\"\n        content-visibility=\"${contentVisibility || 'auto'}\"\n        decoding=\"${decoding || 'async'}\"\n        loading=\"${loading || 'lazy'}\"\n        ${srcset ? `srcset=\"${srcset}\"` : ''}\n        ${sizes ? `sizes=\"${sizes}\"` : ''}\n        src=\"${src}\"\n    />`\n\n    const attributeString = toAttributes(attrs)\n\n    // running in node?\n    return typeof window === 'undefined' ?\n        `<blur-hash ${attributeString}>\n            ${htmlString}\n        </blur-hash>` :\n        htmlString\n}\n\nexport const outerHTML = (attrs:SSRAttrs) => {\n    return `<blur-hash>${render(attrs)}</blur-hash>`\n}\n", "import { WebComponent } from '@substrate-system/web-component'\nimport { decode } from 'blurhash'\nimport { render } from './html.js'\nimport { decodeDimensions } from './decode-dimensions.js'\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'blur-hash': BlurHash\n    }\n}\n\nexport type ImgAttrs = {\n    alt:string;\n    width:string|number;\n    height:string|number;\n    placeholder:string;\n    src:string;\n    srcset?:string|null;\n    sizes?:string|null;\n    time?:number;\n    contentVisibility?:'visible'|'auto'|'hidden'|null;\n    decoding?:'sync'|'async'|'auto'|null;\n    loading?:'lazy'|'eager'|'auto'|null;\n}\n\nexport class BlurHash extends WebComponent.create('blur-hash') {\n    time:number\n    rafId:number|null = null\n\n    constructor () {\n        super()\n        const w = this.getAttribute('width')\n        const h = this.getAttribute('height')\n        const time = this.getAttribute('time')\n        this.time = time ? parseInt(time) : 800\n\n        this.style.width = '' + w\n        this.style.height = '' + h\n\n        document.body.style.setProperty('--blur-hash-time',\n            time ? '.' + (parseInt(time) / 1000 + 's') : '0.8s')\n    }\n\n    /**\n     * Change the image, and do the blur-up thing again.\n     * Will use the existing width & height if they are not passed in.\n     */\n    reset (attrs:(Omit<Omit<ImgAttrs, 'width'>, 'height'> & {\n        width?:string|number;\n        height?:string|number;\n    })):void {\n        if (attrs.width) this.style.width = '' + attrs.width\n        if (attrs.height) this.style.height = '' + attrs.height\n\n        const width = (attrs.width ?\n            (typeof attrs.width === 'string' ? parseInt(attrs.width, 10) : attrs.width) :\n            parseInt(this.style.width, 10))\n        const height = (attrs.height ?\n            (typeof attrs.height === 'string' ? parseInt(attrs.height, 10) : attrs.height) :\n            parseInt(this.style.height, 10))\n\n        this.innerHTML = BlurHash.html(Object.assign(attrs, { width, height }))\n\n        const { placeholder, src: newSrc } = attrs\n\n        this.scheduleDecode(placeholder, width, height)\n\n        this.setAttribute('src', newSrc)\n        this.setAttribute('placeholder', placeholder)\n\n        const img = this.querySelector('img')!\n        if (attrs.srcset) img.setAttribute('srcset', attrs.srcset)\n        if (attrs.sizes) img.setAttribute('sizes', attrs.sizes)\n\n        this.sharpen()\n    }\n\n    /**\n     * Decode the placeholder and paint it to the canvas on the next frame.\n     * Cancels any pending frame first, so a rapid re-call (e.g. a second\n     * `reset`) never leaves a stale decode running. Bails if the element has\n     * detached before the frame fires.\n     */\n    scheduleDecode (placeholder:string, width:number, height:number):void {\n        if (this.rafId !== null) cancelAnimationFrame(this.rafId)\n\n        const { width: dw, height: dh } = decodeDimensions(width, height)\n\n        this.rafId = requestAnimationFrame(() => {\n            this.rafId = null\n            if (!this.isConnected) return\n            const canvas = this.querySelector<HTMLCanvasElement>('canvas')\n            if (!canvas) return\n            const ctx = canvas.getContext('2d')\n            if (!ctx) return\n            const pixels = decode(placeholder, dw, dh)\n            const imageData = ctx.createImageData(dw, dh)\n            imageData.data.set(pixels)\n            ctx.putImageData(imageData, 0, 0)\n        })\n    }\n\n    disconnectedCallback ():void {\n        if (this.rafId !== null) {\n            cancelAnimationFrame(this.rafId)\n            this.rafId = null\n        }\n    }\n\n    sharpen () {\n        const img = this.qs('img')!\n        const toSharp = () => {\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\n        }\n\n        if (img.complete && img.naturalWidth > 0) {\n            // The image is already decoded, so the class swap would run in\n            // this same task -- before the browser ever paints the .blurry\n            // (opacity:0) frame, and a CSS transition needs that start frame\n            // to have painted or it does not run. Defer behind a double rAF\n            // so one .blurry frame is rendered first; then the opacity fade\n            // runs. A single rAF is not enough: it fires before the current\n            // frame paints.\n            requestAnimationFrame(() => requestAnimationFrame(toSharp))\n        } else {\n            // Still loading: the swap is deferred to `load`, which fires in a\n            // later task after the .blurry frame has already painted.\n            img.addEventListener('load', toSharp)\n        }\n    }\n\n    connectedCallback () {\n        const width = parseInt(this.getAttribute('width') ?? '')\n        const height = parseInt(this.getAttribute('height') ?? '')\n        const placeholder = this.getAttribute('placeholder')\n        if (!placeholder) throw new Error('Missing placeholder')\n        if (!width) throw new Error('Missing width')\n        if (!height) throw new Error('Missing height')\n\n        // don't render again if we dont have to\n        if (!this.innerHTML) {\n            this.innerHTML = this.render()\n        }\n\n        this.scheduleDecode(placeholder, width, height)\n        this.sharpen()\n    }\n\n    static html (attrs:ImgAttrs & { classes?:string }) {\n        return render(attrs)\n    }\n\n    /**\n     * Use the attributes to create HTML.\n     */\n    render ():string {\n        const srcset = this.getAttribute('srcset')\n        const width = this.getAttribute('width')\n        const height = this.getAttribute('height')\n        const time = this.getAttribute('time')\n        const classes = this.classList.toString()\n        const placeholder = this.getAttribute('placeholder')\n        this.time = time ? parseInt(time) : 800\n        const src = this.getAttribute('src')\n        const alt = this.getAttribute('alt')\n        if (!placeholder) throw new Error('not placeholder')\n        if (!width || !height) throw new Error('not width or not height')\n        if (!src) throw new Error('Not src')\n        if (!alt) throw new Error('Not alt')\n\n        return BlurHash.html({\n            classes,\n            srcset,\n            width,\n            height,\n            src,\n            alt,\n            placeholder\n        })\n    }\n}\n"],
+  "mappings": "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",
+  "names": ["toAttributes", "attrs", "acc", "k", "value", "__name", "isRegistered", "elName", "__name", "define", "name", "element", "qs", "qsa", "match", "el", "s", "WebComponent", "_WebComponent", "__name", "el", "match", "elementName", "CreatedClass", "evType", "define", "name", "oldValue", "newValue", "handler", "handlerKey", "selector", "eventName", "type", "opts", "bubbles", "cancelable", "detail", "namespacedType", "event", "evName", "options", "fullEvName", "namespace", "handlerKeys", "isRegistered", "elName", "element", "ctor", "boolAttrs", "strAttrs", "proto", "attr", "v", "q", "x", "__name", "t", "e", "l", "f", "__name", "t", "e", "h", "F", "M", "d", "C", "x", "z", "__name", "t", "e", "f", "L", "l", "M", "U", "C", "x", "m", "b", "i", "o", "a", "c", "s", "y", "B", "R", "w", "P", "G", "T", "V", "h", "I", "E", "j", "decodeDimensions", "width", "height", "cap", "longEdge", "scale", "__name", "render", "attrs", "width", "height", "alt", "contentVisibility", "placeholder", "decoding", "loading", "srcset", "sizes", "src", "decodeWidth", "decodeHeight", "decodeSize", "decodeDimensions", "htmlString", "attributeString", "toAttributes", "__name", "BlurHash", "_BlurHash", "WebComponent", "__name", "w", "h", "time", "attrs", "width", "height", "placeholder", "newSrc", "img", "dw", "dh", "decodeDimensions", "canvas", "ctx", "pixels", "j", "imageData", "toSharp", "render", "srcset", "classes", "src", "alt"]
 }

package/dist/meta.json

@@ -11,7 +11,7 @@
       "format": "esm"
     },
     "src/index.ts": {
-      "bytes": 5564,
+      "bytes": 6307,
       "imports": [],
       "format": "esm"
     }
@@ -71,7 +71,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 8871
+      "bytes": 9679
     },
     "dist/index.js": {
       "imports": [
@@ -102,10 +102,10 @@
       "entryPoint": "src/index.ts",
       "inputs": {
         "src/index.ts": {
-          "bytesInOutput": 4447
+          "bytesInOutput": 4546
         }
       },
-      "bytes": 4633
+      "bytes": 4732
     }
   }
 }

package/dist/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAM9D,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAA;KACxB;CACJ;AAED,MAAM,MAAM,QAAQ,GAAG;IACnB,GAAG,EAAC,MAAM,CAAC;IACX,KAAK,EAAC,MAAM,GAAC,MAAM,CAAC;IACpB,MAAM,EAAC,MAAM,GAAC,MAAM,CAAC;IACrB,WAAW,EAAC,MAAM,CAAC;IACnB,GAAG,EAAC,MAAM,CAAC;IACX,MAAM,CAAC,EAAC,MAAM,GAAC,IAAI,CAAC;IACpB,KAAK,CAAC,EAAC,MAAM,GAAC,IAAI,CAAC;IACnB,IAAI,CAAC,EAAC,MAAM,CAAC;IACb,iBAAiB,CAAC,EAAC,SAAS,GAAC,MAAM,GAAC,QAAQ,GAAC,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAC,MAAM,GAAC,OAAO,GAAC,MAAM,GAAC,IAAI,CAAC;IACrC,OAAO,CAAC,EAAC,MAAM,GAAC,OAAO,GAAC,MAAM,GAAC,IAAI,CAAC;CACvC,CAAA;;;;;;;AAED,qBAAa,QAAS,SAAQ,aAAgC;IAC1D,IAAI,EAAC,MAAM,CAAA;IACX,KAAK,EAAC,MAAM,GAAC,IAAI,CAAO;;IAgBxB;;;OAGG;IACH,KAAK,CAAE,KAAK,EAAC,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE,QAAQ,CAAC,GAAG;QACpD,KAAK,CAAC,EAAC,MAAM,GAAC,MAAM,CAAC;QACrB,MAAM,CAAC,EAAC,MAAM,GAAC,MAAM,CAAC;KACzB,CAAC,GAAE,IAAI;IA2BR;;;;;OAKG;IACH,cAAc,CAAE,WAAW,EAAC,MAAM,EAAE,KAAK,EAAC,MAAM,EAAE,MAAM,EAAC,MAAM,GAAE,IAAI;IAmBrE,oBAAoB,IAAI,IAAI;IAO5B,OAAO;IAaP,iBAAiB;IAiBjB,MAAM,CAAC,IAAI,CAAE,KAAK,EAAC,QAAQ,GAAG;QAAE,OAAO,CAAC,EAAC,MAAM,CAAA;KAAE;IAIjD;;OAEG;IACH,MAAM,IAAI,MAAM;CAiBnB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAM9D,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAA;KACxB;CACJ;AAED,MAAM,MAAM,QAAQ,GAAG;IACnB,GAAG,EAAC,MAAM,CAAC;IACX,KAAK,EAAC,MAAM,GAAC,MAAM,CAAC;IACpB,MAAM,EAAC,MAAM,GAAC,MAAM,CAAC;IACrB,WAAW,EAAC,MAAM,CAAC;IACnB,GAAG,EAAC,MAAM,CAAC;IACX,MAAM,CAAC,EAAC,MAAM,GAAC,IAAI,CAAC;IACpB,KAAK,CAAC,EAAC,MAAM,GAAC,IAAI,CAAC;IACnB,IAAI,CAAC,EAAC,MAAM,CAAC;IACb,iBAAiB,CAAC,EAAC,SAAS,GAAC,MAAM,GAAC,QAAQ,GAAC,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAC,MAAM,GAAC,OAAO,GAAC,MAAM,GAAC,IAAI,CAAC;IACrC,OAAO,CAAC,EAAC,MAAM,GAAC,OAAO,GAAC,MAAM,GAAC,IAAI,CAAC;CACvC,CAAA;;;;;;;AAED,qBAAa,QAAS,SAAQ,aAAgC;IAC1D,IAAI,EAAC,MAAM,CAAA;IACX,KAAK,EAAC,MAAM,GAAC,IAAI,CAAO;;IAgBxB;;;OAGG;IACH,KAAK,CAAE,KAAK,EAAC,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE,QAAQ,CAAC,GAAG;QACpD,KAAK,CAAC,EAAC,MAAM,GAAC,MAAM,CAAC;QACrB,MAAM,CAAC,EAAC,MAAM,GAAC,MAAM,CAAC;KACzB,CAAC,GAAE,IAAI;IA2BR;;;;;OAKG;IACH,cAAc,CAAE,WAAW,EAAC,MAAM,EAAE,KAAK,EAAC,MAAM,EAAE,MAAM,EAAC,MAAM,GAAE,IAAI;IAmBrE,oBAAoB,IAAI,IAAI;IAO5B,OAAO;IAuBP,iBAAiB;IAiBjB,MAAM,CAAC,IAAI,CAAE,KAAK,EAAC,QAAQ,GAAG;QAAE,OAAO,CAAC,EAAC,MAAM,CAAA;KAAE;IAIjD;;OAEG;IACH,MAAM,IAAI,MAAM;CAyBnB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@substrate-system/blur-hash",
-  "version": "0.0.39",
+  "version": "0.0.42",
   "type": "module",
   "description": "A blurry placeholder image web component",
   "browserslist": ">= 0.25%",
@@ -23,6 +23,7 @@
       "require": "./dist/render.cjs"
     },
     "./hash": "./dist/bin/index.js",
+    "./photon": "./dist/bin/photon.js",
     "./*": {
       "import": [
         "./dist/*.js",
@@ -39,7 +40,7 @@
     "build-tests": "esbuild test/index.ts --target=es2020 --bundle --keep-names > test/test-bundle.js",
     "test": "npm run build && npm run build-tests && npm run test-gui && npm run test-bin && npm run test-api && npm run test-ssr",
     "test-bin": "npm run build-bin && esbuild ./test/bin.ts > ./test/bin.js && node ./test/bin.js | tap-spec",
-    "test-api": "esbuild ./test/api.ts --format=esm --platform=node > test/api.js && esbuild ./bin/index.ts --platform=node > bin/index.js && node ./test/api.js | tap-spec",
+    "test-api": "esbuild ./test/api.ts --format=esm --platform=node > test/api.js && esbuild bin/*.ts --platform=node --format=esm --keep-names --outdir=bin && node ./test/api.js | tap-spec",
     "test-ssr": "esbuild ./test/ssr.ts --bundle --platform=node | node --input-type=module | tap-spec",
     "test-gui": "esbuild ./test/index.ts --bundle | tapout | tap-spec",
     "build-css": "lightningcss --browserslist src/index.css -o dist/style.css",
@@ -50,7 +51,7 @@
     "build-example": "mkdir -p ./public && rm -rf ./public/* && vite --base=\"/blur-hash\" build",
     "build-docs": "typedoc --tsconfig tsconfig.build.json ./src/index.ts",
     "build": "mkdir -p ./dist && rm -rf ./dist/* && npm run build-cjs && npm run build-esm && npm run build-esm:min && npm run build-bin && npm run build-css && npm run build-css:min",
-    "build-bin": "mkdir -p dist/bin && esbuild --platform=node ./bin/index.ts > ./dist/bin/index.js",
+    "build-bin": "mkdir -p dist/bin && esbuild bin/*.ts --platform=node --format=esm --keep-names --outdir=dist/bin",
     "start": "vite",
     "toc": "markdown-toc --maxdepth 3 -i README.md",
     "preversion": "npm run lint",
@@ -59,25 +60,28 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@substrate-system/web-component": "^0.0.51",
+    "@substrate-system/web-component": "^0.0.56",
     "blurhash": "^2.0.5",
     "image-size": "^2.0.2",
     "inkjet": "^3.0.0",
-    "sharp": "^0.34.5",
     "yargs": "^18.0.0"
   },
   "devDependencies": {
+    "@cf-wasm/photon": "^0.3.5",
     "@substrate-system/dom": "^0.1.13",
     "@substrate-system/tapout": "^0.0.38",
     "@substrate-system/tapzero": "^0.10.16",
-    "@types/sharp": "^0.31.1",
+    "@types/node": "^25.0.0",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
     "auto-changelog": "^2.4.0",
     "browserslist": "^4.24.0",
-    "esbuild": "^0.27.2",
+    "esbuild": "^0.28.0",
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-n": "^18.2.1",
+    "eslint-plugin-promise": "^7.3.0",
     "lightningcss": "^1.32.0",
     "lightningcss-cli": "^1.32.0",
     "markdown-toc": "^1.2.0",
@@ -87,6 +91,14 @@
     "typescript": "^6.0.2",
     "vite": "^8.0.5"
   },
+  "peerDependencies": {
+    "@cf-wasm/photon": "^0.3.5"
+  },
+  "peerDependenciesMeta": {
+    "@cf-wasm/photon": {
+      "optional": true
+    }
+  },
   "author": "nichoth <nichoth@nichoth.com> (https://nichoth.com)",
   "license": "SEE LICENSE IN LICENSE",
   "types": "./dist/index.d.ts",