@substrate-system/blur-hash 0.0.5 → 0.0.7

package/README.md

@@ -19,25 +19,26 @@ with the [blur-hash algorithm](https://blurha.sh/), as a [web component](https:/
 
 <!-- toc -->
 
-- [install](#install)
+- [Install](#install)
 - [Modules](#modules)
   * [ESM](#esm)
-  * [Common JS](#common-js)
+  * [CJS](#cjs)
+  * [Bundler](#bundler)
+  * [pre-built JS](#pre-built-js)
+- [use](#use)
 - [API](#api)
-  * [attributes](#attributes)
+  * [Attributes](#attributes)
   * [`.reset`](#reset)
 - [CSS](#css)
   * [Import CSS](#import-css)
   * [variables](#variables)
-- [use](#use)
-  * [Bundler](#bundler)
-  * [pre-built JS](#pre-built-js)
-- [Create the string](#create-the-string)
-  * [Print to system clipboard](#print-to-system-clipboard)
+- [Create the blur-hash string](#create-the-blur-hash-string)
+  * [JS API](#js-api)
+  * [CLI](#cli)
 
 <!-- tocstop -->
 
-## install
+## Install
 
 ```sh
 npm i -S @substrate-system/blur-hash
@@ -49,56 +50,142 @@ This exposes ESM and common JS via [package.json `exports` field](https://nodejs
 
 ### ESM
 ```js
-import '@substrate-system/blur-hash'
+import { BlurHash } from '@substrate-system/blur-hash'
 ```
 
-### Common JS
+### CJS
 ```js
-require('@substrate-system/blur-hash')
+const blurHash = require('@substrate-system/blur-hash')
+```
+
+### Bundler
+
+Just import like normal.
+
+### pre-built JS
+This package exposes minified JS files too. Copy them to a location that is
+accessible to your web server, then link to them in HTML.
+
+#### copy
+```sh
+cp ./node_modules/@substrate-system/blur-hash/dist/index.min.js ./public/blur-hash.min.js
+```
+
+#### HTML
+```html
+<script type="module" src="./blur-hash.min.js"></script>
+```
+
+Use the tag in HTML.
+
+```html
+<div>
+    <blur-hash
+        time="0.6s"
+        alt="cool cat"
+        placeholder="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
+        src="..."
+        width=100
+        height=100
+    >
+    </blur-hash>
+</div>
+```
+
+## use
+Call the static method `.define` in JS, then use the tag in HTML.
+
+```js
+import { BlurHash } from '@substrate-system/blur-hash'
+
+BlurHash.define()
+```
+
+```html
+<blur-hash
+  alt="cool cat"
+  placeholder="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
+  width=100
+  height=100
+  src="..."
+></blur-hash>
 ```
 
 ## API
 
-### attributes
-Takes the following attributes
+### Attributes
+
+The required attributes are `alt`, `src`, `placeholder`, `width`, and `height`.
+
+```ts
+type Attrs = {
+  alt:string;
+  width:string|number;
+  height:string|number;
+  placeholder:string;
+  src:string;
+  srcset?:string|null;
+  sizes?:string|null;
+  time?:number;
+  contentVisibility?:'visible'|'auto'|'hidden'|null;
+  decoding?:'sync'|'async'|'auto'|null;
+  loading?:'lazy'|'eager'|'auto'|null;
+}
+```
+
+--------------------------------------
+
+#### other attributes
 
 #### time
 The time for css transitions and animation. This is set as a CSS variable.
 
-#### placeholder
-The string created by the blurhash algorithm. See [node example](#create-the-string).
-
 #### 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.
+
+If `width` and `height` are not passed in, it will keep the existing width
+and height.
+
 ```ts
-reset (
-    newSrc:string,
-    alt:string,
-    placeholder:string,
-    newSrcset?:string|null,
-    newSizes?:string|null,
-    attrs:Partial<{
-        srcset:string|null;
-        width:string|null;
-        height:string|null;
-        time:number|null;
-    }> = {}
-):void
-```
-
-#### example
+reset (attributes:{
+  src:string;
+  alt:string;
+  placeholder:string;
+  width?:string;
+  height?:string;
+  srcset?:string|null;
+  sizes?:string|null;
+  time?:number;
+  contentVisibility?:'visible'|'auto'|'hidden'|null;
+  decoding?:'sync'|'async'|'auto'|null;
+  loading?:'lazy'|'eager'|'auto'|null;
+}):void
+```
+
+#### `.reset` example
+
+The `reset` method will be on the element once you call `define`.
 
 ```js
-document.querySelector('blur-hash')?.reset(
-    'llamas.jpg',
-    'some llamas',
-    'UgI}q#%O%eNa?^I?awaf?aIVs*WBxZxaRjR*'
-)
+import { BlurHash } from '@substrate-system/blur-hash'
+
+BlurHash.define()
+
+const el = document.querySelector('blur-hash')
+
+el?.reset({
+  src: 'llamas.jpg',
+  alt: 'some llamas',
+  placeholder: 'UgI}q#%O%eNa?^I?awaf?aIVs*WBxZxaRjR*'
+})
 ```
 
 -------------------------------------------------
@@ -126,47 +213,24 @@ __CSS variables__
 * `--blur-hash-opactiy` -- the opacity to use for the placeholder image,
   default is `0.2`
 
-## use
-This calls the global function `customElements.define`. Just import, then use
-the tag in your HTML.
+## Create the blur-hash string
 
-### Bundler
+Use Node to create the `placeholder` attribute, the string consumed
+by blur-hash.
 
-#### JS
-```js
-import '@substrate-system/blur-hash'
-```
+### JS API
 
-#### HTML
-```html
-<div>
-    <blur-hash
-        time="0.6s"
-        placeholder="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
-        src="..."
-        width=100
-        height=100
-    >
-    </blur-hash>
-</div>
-```
-
-### pre-built JS
-This package exposes minified JS files too. Copy them to a location that is
-accessible to your web server, then link to them in HTML.
+```js
+import { createString } from '@substrate-system/blur-hash/hash'
 
-#### copy
-```sh
-cp ./node_modules/@substrate-system/blur-hash/dist/blur-hash.min.js ./public
+const hash = await createString('../example/100.jpg')
+// => 'UHGIM_X900xC~XWFE0xt00o3%1oz-;t7i|IV'
 ```
 
-#### HTML
-```html
-<script type="module" src="./blur-hash.min.js"></script>
-```
+### CLI
 
-## Create the string
-This package includes a CLI tool to create the placeholder string. After installing this as a dependency,
+This package includes a CLI tool to create the placeholder string. After
+installing this as a dependency,
 
 ```sh
 npx blur ./my-file.jpg
@@ -174,7 +238,8 @@ npx blur ./my-file.jpg
 
 Will print a string to stdout that can be used as a placeholder attribute.
 
-### Print to system clipboard
+#### Print to system clipboard
+
 On mac os,
 
 ```sh

package/dist/bin/index.js

@@ -7,8 +7,9 @@ import fs from "node:fs/promises";
 import { resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import { imageSizeFromFile } from "image-size/fromFile";
-export const encodeImageToBlurhash = async (filepath, width, height) => {
+export const createString = async (filepath) => {
   const data = await fs.readFile(filepath);
+  const { width, height } = await imageSizeFromFile(filepath);
   return new Promise((resolve2, reject) => {
     inkjet.decode(data, function(err, decoded) {
       if (err) return reject(err);
@@ -25,7 +26,6 @@ if (isThisFileBeingRunViaCLI) {
     "Create a small placeholder string from a local file"
   ).usage("Usage: blur <filename>").argv;
   const filename = args._[0];
-  const { width, height } = await imageSizeFromFile(filename);
-  const hash = await encodeImageToBlurhash(filename, width, height);
+  const hash = await createString(filename);
   process.stdout.write(hash + "\n");
 }

package/dist/index.cjs

@@ -24,6 +24,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 var import_web_component = require("@substrate-system/web-component");
 var import_blurhash = require("blurhash");
+var import_ssr = require("./ssr.js");
 class BlurHash extends import_web_component.WebComponent.create("blur-hash") {
   static {
     __name(this, "BlurHash");
@@ -44,19 +45,15 @@ class BlurHash extends import_web_component.WebComponent.create("blur-hash") {
   }
   /**
    * Change the image, and do the blur-up thing again.
+   * Will use the existing width & height if they are not passed in.
    */
-  reset(newSrc, alt, placeholder, newSrcset, newSizes, attrs = {}) {
-    if (attrs.width) this.style.width = attrs.width;
-    if (attrs.height) this.style.height = attrs.height;
-    const width = attrs.width ? parseInt(attrs.width) : parseInt(this.style.width);
-    const height = attrs.height ? parseInt(attrs.height) : parseInt(this.style.height);
-    this.innerHTML = BlurHash.html({
-      srcset: attrs.srcset,
-      w: "" + width,
-      h: "" + height,
-      src: newSrc,
-      alt
-    });
+  reset(attrs) {
+    if (attrs.width) this.style.width = "" + attrs.width;
+    if (attrs.height) this.style.height = "" + attrs.height;
+    const width = attrs.width ? typeof attrs.width === "string" ? parseInt(attrs.width) : attrs.width : parseInt(this.style.width);
+    const height = attrs.height ? typeof attrs.height === "string" ? parseInt(attrs.height) : attrs.height : parseInt(this.style.height);
+    this.innerHTML = BlurHash.html(Object.assign(attrs, { width, height }));
+    const { placeholder, src: newSrc } = attrs;
     const pixels = (0, import_blurhash.decode)(placeholder, width, height);
     const canvas = this.querySelector("canvas");
     const ctx = canvas.getContext("2d");
@@ -66,8 +63,8 @@ class BlurHash extends import_web_component.WebComponent.create("blur-hash") {
     this.setAttribute("src", newSrc);
     this.setAttribute("placeholder", placeholder);
     const img = this.querySelector("img");
-    if (newSrcset) img.setAttribute("srcset", newSrcset);
-    if (newSizes) img.setAttribute("sizes", newSizes);
+    if (attrs.srcset) img.setAttribute("srcset", attrs.srcset);
+    if (attrs.sizes) img.setAttribute("sizes", attrs.sizes);
     img.addEventListener("load", () => {
       canvas.style.display = "none";
       img.classList.remove("blurry");
@@ -81,7 +78,9 @@ class BlurHash extends import_web_component.WebComponent.create("blur-hash") {
     if (!placeholder || !width || !height) {
       throw new Error("Missing attributes");
     }
-    this.innerHTML = this.render();
+    if (!this.innerHTML) {
+      this.innerHTML = this.render();
+    }
     const pixels = (0, import_blurhash.decode)(placeholder, width, height);
     const canvas = this.querySelector("canvas");
     const ctx = canvas.getContext("2d");
@@ -96,44 +95,25 @@ class BlurHash extends import_web_component.WebComponent.create("blur-hash") {
     });
   }
   static html(attrs) {
-    const {
-      srcset,
-      w,
-      h,
-      alt,
-      contentVisibility,
-      decoding,
-      loading,
-      src
-    } = attrs;
-    return `<canvas
-            class="blurry"
-            width=${w}
-            height=${h}
-        ></canvas>
-
-        <img class="blurry"
-            ${srcset ? `srcset="${srcset}"` : ""}
-            alt="${alt}"
-            content-visibility="${contentVisibility || "auto"}"
-            decoding="${decoding || "async"}"
-            loading="${loading || "lazy"}"
-            class="image-element blurry"
-            src="${src}"
-        />`;
+    return (0, import_ssr.html)(attrs);
   }
+  /**
+   * Use the attributes to create HTML.
+   */
   render() {
     const srcset = this.getAttribute("srcset");
-    const w = this.getAttribute("width");
-    const h = this.getAttribute("height");
+    const width = this.getAttribute("width");
+    const height = this.getAttribute("height");
     const time = this.getAttribute("time");
+    const placeholder = this.getAttribute("placeholder");
     this.time = time ? parseInt(time) : 800;
     const src = this.getAttribute("src");
     const alt = this.getAttribute("alt");
+    if (!placeholder) throw new Error("not placeholder");
+    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({ srcset, w, h, src, alt });
+    return BlurHash.html({ srcset, width, height, src, alt, placeholder });
   }
 }
-customElements.define("blur-hash", BlurHash);
 //# 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'\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'blur-hash': BlurHash\n    }\n}\n\nexport class BlurHash extends WebComponent.create('blur-hash') {\n    time:number\n\n    constructor () {\n        super()\n        // const srcset = this.getAttribute('srcset')\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     */\n    reset (\n        newSrc:string,\n        alt:string,\n        placeholder:string,\n        newSrcset?:string|null,\n        newSizes?:string|null,\n        attrs:Partial<{\n            srcset:string|null;\n            width:string|null;\n            height:string|null;\n            time:number|null;\n        }> = {}\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            parseInt(attrs.width) :\n            parseInt(this.style.width))\n        const height = (attrs.height ?\n            parseInt(attrs.height) :\n            parseInt(this.style.height))\n\n        this.innerHTML = BlurHash.html({\n            srcset: attrs.srcset,\n            w: '' + width,\n            h: '' + height,\n            src: newSrc,\n            alt\n        })\n\n        const pixels = decode(placeholder, width, height)\n        const canvas = this.querySelector('canvas') as HTMLCanvasElement\n        const ctx = canvas.getContext('2d')!\n        const imageData = ctx.createImageData(width, height)\n        imageData.data.set(pixels)\n        ctx.putImageData(imageData, 0, 0)\n\n        this.setAttribute('src', newSrc)\n        this.setAttribute('placeholder', placeholder)\n\n        const img = this.querySelector('img')!\n        if (newSrcset) img.setAttribute('srcset', newSrcset)\n        if (newSizes) img.setAttribute('sizes', newSizes)\n\n        img.addEventListener('load', () => {\n            canvas.style.display = 'none'\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\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 || !width || !height) {\n            throw new Error('Missing attributes')\n        }\n\n        this.innerHTML = this.render()\n        const pixels = decode(placeholder, width, height)\n        const canvas = this.querySelector('canvas') as HTMLCanvasElement\n        const ctx = canvas.getContext('2d')!\n        const imageData = ctx.createImageData(width, height)\n        imageData.data.set(pixels)\n        ctx.putImageData(imageData, 0, 0)\n\n        const img = this.querySelector('img')!\n\n        img.addEventListener('load', () => {\n            canvas.style.display = 'none'\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\n        })\n    }\n\n    static html (attrs:{\n        alt:string;\n        srcset?:string|null;\n        w?:string|null;\n        h?:string|null;\n        time?:number;\n        contentVisibility?:'visible'|'auto'|'hidden'|null;\n        decoding?:'sync'|'async'|'auto'|null;\n        loading?:'lazy'|'eager'|'auto'|null;\n        src:string;\n    }) {\n        const {\n            srcset,\n            w,\n            h,\n            alt,\n            contentVisibility,\n            decoding,\n            loading,\n            src\n        } = attrs\n\n        return `<canvas\n            class=\"blurry\"\n            width=${w}\n            height=${h}\n        ></canvas>\n\n        <img class=\"blurry\"\n            ${srcset ? `srcset=\"${srcset}\"` : ''}\n            alt=\"${alt}\"\n            content-visibility=\"${contentVisibility || 'auto'}\"\n            decoding=\"${decoding || 'async'}\"\n            loading=\"${loading || 'lazy'}\"\n            class=\"image-element blurry\"\n            src=\"${src}\"\n        />`\n    }\n\n    render ():string {\n        const srcset = this.getAttribute('srcset')\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        const src = this.getAttribute('src')\n        const alt = this.getAttribute('alt')\n        if (!src) throw new Error('Not src')\n        if (!alt) throw new Error('Not alt')\n\n        return BlurHash.html({ srcset, w, h, src, alt })\n    }\n}\n\ncustomElements.define('blur-hash', BlurHash)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { WebComponent } from '@substrate-system/web-component'\nimport { decode } from 'blurhash'\nimport { html } from './ssr.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\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) : attrs.width) :\n            parseInt(this.style.width))\n        const height = (attrs.height ?\n            (typeof attrs.height === 'string' ? parseInt(attrs.height) : attrs.height) :\n            parseInt(this.style.height))\n\n        this.innerHTML = BlurHash.html(Object.assign(attrs, { width, height }))\n\n        const { placeholder, src: newSrc } = attrs\n\n        const pixels = decode(placeholder, width, height)\n        const canvas = this.querySelector('canvas') as HTMLCanvasElement\n        const ctx = canvas.getContext('2d')!\n        const imageData = ctx.createImageData(width, height)\n        imageData.data.set(pixels)\n        ctx.putImageData(imageData, 0, 0)\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        img.addEventListener('load', () => {\n            canvas.style.display = 'none'\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\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 || !width || !height) {\n            throw new Error('Missing attributes')\n        }\n\n        // don't render again if we dont have to\n        if (!this.innerHTML) {\n            this.innerHTML = this.render()\n        }\n\n        const pixels = decode(placeholder, width, height)\n        const canvas = this.querySelector('canvas') as HTMLCanvasElement\n        const ctx = canvas.getContext('2d')!\n        const imageData = ctx.createImageData(width, height)\n        imageData.data.set(pixels)\n        ctx.putImageData(imageData, 0, 0)\n\n        const img = this.querySelector('img')!\n        img.addEventListener('load', () => {\n            canvas.style.display = 'none'\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\n        })\n    }\n\n    static html (attrs:ImgAttrs) {\n        return html(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 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({ srcset, width, height, src, alt, placeholder })\n    }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/index.d.ts

@@ -4,6 +4,19 @@ declare global {
         'blur-hash': BlurHash;
     }
 }
+export type ImgAttrs = {
+    alt: string;
+    width: string | number;
+    height: string | number;
+    placeholder: string;
+    src: string;
+    srcset?: string | null;
+    sizes?: string | null;
+    time?: number;
+    contentVisibility?: 'visible' | 'auto' | 'hidden' | null;
+    decoding?: 'sync' | 'async' | 'auto' | null;
+    loading?: 'lazy' | 'eager' | 'auto' | null;
+};
 declare const BlurHash_base: {
     new (): {
         NAME: string;
@@ -377,25 +390,17 @@ export declare class BlurHash extends BlurHash_base {
     constructor();
     /**
      * Change the image, and do the blur-up thing again.
+     * Will use the existing width & height if they are not passed in.
      */
-    reset(newSrc: string, alt: string, placeholder: string, newSrcset?: string | null, newSizes?: string | null, attrs?: Partial<{
-        srcset: string | null;
-        width: string | null;
-        height: string | null;
-        time: number | null;
-    }>): void;
+    reset(attrs: (Omit<Omit<ImgAttrs, 'width'>, 'height'> & {
+        width?: string | number;
+        height?: string | number;
+    })): void;
     connectedCallback(): void;
-    static html(attrs: {
-        alt: string;
-        srcset?: string | null;
-        w?: string | null;
-        h?: string | null;
-        time?: number;
-        contentVisibility?: 'visible' | 'auto' | 'hidden' | null;
-        decoding?: 'sync' | 'async' | 'auto' | null;
-        loading?: 'lazy' | 'eager' | 'auto' | null;
-        src: string;
-    }): string;
+    static html(attrs: ImgAttrs): string;
+    /**
+     * Use the attributes to create HTML.
+     */
     render(): string;
 }
 export {};

package/dist/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;AAI9D,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAA;KACxB;CACJ;;;;;;;;;;;wCA8CO,CAAR;;;;;sCASiD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BA6B1C,CAAA;gJAGA,CAAN;4FAIM,CAAJ;mJAKiB,CAAC;+FAQd,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BA4CA,CAAJ;;;;;;;;;;;;;;;;;;;;;;;uBAOy/D,CAAC,EAAC,cAAe;;;;;;;;;;;;;iCAAg0B,CAAC;kCAA2E,CAAC,EAAC,kBAAmB;sBAA4C,CAAC;;wBAAsG,CAAC;;0BAA0G,CAAC;wBAAsE,CAAC;;;;;;;;oDAAmgB,CAAC;;;;;;;;;;;;;;;;yBAAwwB,CAAC;;;2BAA8J,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gFAAu4G,CAAC;6BAAkF,CAAC;cAAwD,GAAG;eAAoD,GAAG;;oBAAqF,GAAG;;;;;;;eAAwX,GAAG;gBAAqD,GAAG;;;;;;;;;;;wBAAmsC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA4tO,CAAC;kBAAiG,CAAC;mBAAkG,CAAC;oBAAmG,CAAC;;;;;;;;;;;;;;aAA+oC,CAAC;;;qBAA2F,CAAC;;;;;aAAyJ,GAAG;;;;;AAzJ70lB,qBAAa,QAAS,SAAQ,aAAgC;IAC1D,IAAI,EAAC,MAAM,CAAA;;IAiBX;;OAEG;IACH,KAAK,CACD,MAAM,EAAC,MAAM,EACb,GAAG,EAAC,MAAM,EACV,WAAW,EAAC,MAAM,EAClB,SAAS,CAAC,EAAC,MAAM,GAAC,IAAI,EACtB,QAAQ,CAAC,EAAC,MAAM,GAAC,IAAI,EACrB,KAAK,GAAC,OAAO,CAAC;QACV,MAAM,EAAC,MAAM,GAAC,IAAI,CAAC;QACnB,KAAK,EAAC,MAAM,GAAC,IAAI,CAAC;QAClB,MAAM,EAAC,MAAM,GAAC,IAAI,CAAC;QACnB,IAAI,EAAC,MAAM,GAAC,IAAI,CAAC;KACpB,CAAM,GACT,IAAI;IAwCN,iBAAiB;IAyBjB,MAAM,CAAC,IAAI,CAAE,KAAK,EAAC;QACf,GAAG,EAAC,MAAM,CAAC;QACX,MAAM,CAAC,EAAC,MAAM,GAAC,IAAI,CAAC;QACpB,CAAC,CAAC,EAAC,MAAM,GAAC,IAAI,CAAC;QACf,CAAC,CAAC,EAAC,MAAM,GAAC,IAAI,CAAC;QACf,IAAI,CAAC,EAAC,MAAM,CAAC;QACb,iBAAiB,CAAC,EAAC,SAAS,GAAC,MAAM,GAAC,QAAQ,GAAC,IAAI,CAAC;QAClD,QAAQ,CAAC,EAAC,MAAM,GAAC,OAAO,GAAC,MAAM,GAAC,IAAI,CAAC;QACrC,OAAO,CAAC,EAAC,MAAM,GAAC,OAAO,GAAC,MAAM,GAAC,IAAI,CAAC;QACpC,GAAG,EAAC,MAAM,CAAC;KACd;IA6BD,MAAM,IAAI,MAAM;CAanB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAK9D,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;;;;;;;;;;;wCA8BgB,CAAC;;;;;sCAKD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BA6BV,CAAA;gJAGI,CAAX;4FAKW,CAAX;mJAKU,CAAC;+FAGD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAkCiI,CAAC;;;;;;;;;;;;;;;;;;;;;;;uBAAspE,CAAC,EAAC,cAAe;;;;;;;;;;;;;iCAAg0B,CAAC;kCAA2E,CAAC,EAAC,kBAAmB;sBAA4C,CAAC;;wBAAsG,CAAC;;0BAA0G,CAAC;wBAAsE,CAAC;;;;;;;;oDAAmgB,CAAC;;;;;;;;;;;;;;;;yBAAwwB,CAAC;;;2BAA8J,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gFAAu4G,CAAC;6BAAkF,CAAC;cAAwD,GAAG;eAAoD,GAAG;;oBAAqF,GAAG;;;;;;;eAAwX,GAAG;gBAAqD,GAAG;;;;;;;;;;;wBAAmsC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA4tO,CAAC;kBAAiG,CAAC;mBAAkG,CAAC;oBAAmG,CAAC;;;;;;;;;;;;;;aAA+oC,CAAC;;;qBAA2F,CAAC;;;;;aAAyJ,GAAG;;;;;AAhHpnmB,qBAAa,QAAS,SAAQ,aAAgC;IAC1D,IAAI,EAAC,MAAM,CAAA;;IAgBX;;;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;IAoCR,iBAAiB;IA4BjB,MAAM,CAAC,IAAI,CAAE,KAAK,EAAC,QAAQ;IAI3B;;OAEG;IACH,MAAM,IAAI,MAAM;CAgBnB"}

package/dist/index.js

@@ -2,6 +2,7 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { WebComponent } from "@substrate-system/web-component";
 import { decode } from "blurhash";
+import { html } from "./ssr.js";
 class BlurHash extends WebComponent.create("blur-hash") {
   static {
     __name(this, "BlurHash");
@@ -22,19 +23,15 @@ class BlurHash extends WebComponent.create("blur-hash") {
   }
   /**
    * Change the image, and do the blur-up thing again.
+   * Will use the existing width & height if they are not passed in.
    */
-  reset(newSrc, alt, placeholder, newSrcset, newSizes, attrs = {}) {
-    if (attrs.width) this.style.width = attrs.width;
-    if (attrs.height) this.style.height = attrs.height;
-    const width = attrs.width ? parseInt(attrs.width) : parseInt(this.style.width);
-    const height = attrs.height ? parseInt(attrs.height) : parseInt(this.style.height);
-    this.innerHTML = BlurHash.html({
-      srcset: attrs.srcset,
-      w: "" + width,
-      h: "" + height,
-      src: newSrc,
-      alt
-    });
+  reset(attrs) {
+    if (attrs.width) this.style.width = "" + attrs.width;
+    if (attrs.height) this.style.height = "" + attrs.height;
+    const width = attrs.width ? typeof attrs.width === "string" ? parseInt(attrs.width) : attrs.width : parseInt(this.style.width);
+    const height = attrs.height ? typeof attrs.height === "string" ? parseInt(attrs.height) : attrs.height : parseInt(this.style.height);
+    this.innerHTML = BlurHash.html(Object.assign(attrs, { width, height }));
+    const { placeholder, src: newSrc } = attrs;
     const pixels = decode(placeholder, width, height);
     const canvas = this.querySelector("canvas");
     const ctx = canvas.getContext("2d");
@@ -44,8 +41,8 @@ class BlurHash extends WebComponent.create("blur-hash") {
     this.setAttribute("src", newSrc);
     this.setAttribute("placeholder", placeholder);
     const img = this.querySelector("img");
-    if (newSrcset) img.setAttribute("srcset", newSrcset);
-    if (newSizes) img.setAttribute("sizes", newSizes);
+    if (attrs.srcset) img.setAttribute("srcset", attrs.srcset);
+    if (attrs.sizes) img.setAttribute("sizes", attrs.sizes);
     img.addEventListener("load", () => {
       canvas.style.display = "none";
       img.classList.remove("blurry");
@@ -59,7 +56,9 @@ class BlurHash extends WebComponent.create("blur-hash") {
     if (!placeholder || !width || !height) {
       throw new Error("Missing attributes");
     }
-    this.innerHTML = this.render();
+    if (!this.innerHTML) {
+      this.innerHTML = this.render();
+    }
     const pixels = decode(placeholder, width, height);
     const canvas = this.querySelector("canvas");
     const ctx = canvas.getContext("2d");
@@ -74,46 +73,27 @@ class BlurHash extends WebComponent.create("blur-hash") {
     });
   }
   static html(attrs) {
-    const {
-      srcset,
-      w,
-      h,
-      alt,
-      contentVisibility,
-      decoding,
-      loading,
-      src
-    } = attrs;
-    return `<canvas
-            class="blurry"
-            width=${w}
-            height=${h}
-        ></canvas>
-
-        <img class="blurry"
-            ${srcset ? `srcset="${srcset}"` : ""}
-            alt="${alt}"
-            content-visibility="${contentVisibility || "auto"}"
-            decoding="${decoding || "async"}"
-            loading="${loading || "lazy"}"
-            class="image-element blurry"
-            src="${src}"
-        />`;
+    return html(attrs);
   }
+  /**
+   * Use the attributes to create HTML.
+   */
   render() {
     const srcset = this.getAttribute("srcset");
-    const w = this.getAttribute("width");
-    const h = this.getAttribute("height");
+    const width = this.getAttribute("width");
+    const height = this.getAttribute("height");
     const time = this.getAttribute("time");
+    const placeholder = this.getAttribute("placeholder");
     this.time = time ? parseInt(time) : 800;
     const src = this.getAttribute("src");
     const alt = this.getAttribute("alt");
+    if (!placeholder) throw new Error("not placeholder");
+    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({ srcset, w, h, src, alt });
+    return BlurHash.html({ srcset, width, height, src, alt, placeholder });
   }
 }
-customElements.define("blur-hash", BlurHash);
 export {
   BlurHash
 };

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'\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'blur-hash': BlurHash\n    }\n}\n\nexport class BlurHash extends WebComponent.create('blur-hash') {\n    time:number\n\n    constructor () {\n        super()\n        // const srcset = this.getAttribute('srcset')\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     */\n    reset (\n        newSrc:string,\n        alt:string,\n        placeholder:string,\n        newSrcset?:string|null,\n        newSizes?:string|null,\n        attrs:Partial<{\n            srcset:string|null;\n            width:string|null;\n            height:string|null;\n            time:number|null;\n        }> = {}\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            parseInt(attrs.width) :\n            parseInt(this.style.width))\n        const height = (attrs.height ?\n            parseInt(attrs.height) :\n            parseInt(this.style.height))\n\n        this.innerHTML = BlurHash.html({\n            srcset: attrs.srcset,\n            w: '' + width,\n            h: '' + height,\n            src: newSrc,\n            alt\n        })\n\n        const pixels = decode(placeholder, width, height)\n        const canvas = this.querySelector('canvas') as HTMLCanvasElement\n        const ctx = canvas.getContext('2d')!\n        const imageData = ctx.createImageData(width, height)\n        imageData.data.set(pixels)\n        ctx.putImageData(imageData, 0, 0)\n\n        this.setAttribute('src', newSrc)\n        this.setAttribute('placeholder', placeholder)\n\n        const img = this.querySelector('img')!\n        if (newSrcset) img.setAttribute('srcset', newSrcset)\n        if (newSizes) img.setAttribute('sizes', newSizes)\n\n        img.addEventListener('load', () => {\n            canvas.style.display = 'none'\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\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 || !width || !height) {\n            throw new Error('Missing attributes')\n        }\n\n        this.innerHTML = this.render()\n        const pixels = decode(placeholder, width, height)\n        const canvas = this.querySelector('canvas') as HTMLCanvasElement\n        const ctx = canvas.getContext('2d')!\n        const imageData = ctx.createImageData(width, height)\n        imageData.data.set(pixels)\n        ctx.putImageData(imageData, 0, 0)\n\n        const img = this.querySelector('img')!\n\n        img.addEventListener('load', () => {\n            canvas.style.display = 'none'\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\n        })\n    }\n\n    static html (attrs:{\n        alt:string;\n        srcset?:string|null;\n        w?:string|null;\n        h?:string|null;\n        time?:number;\n        contentVisibility?:'visible'|'auto'|'hidden'|null;\n        decoding?:'sync'|'async'|'auto'|null;\n        loading?:'lazy'|'eager'|'auto'|null;\n        src:string;\n    }) {\n        const {\n            srcset,\n            w,\n            h,\n            alt,\n            contentVisibility,\n            decoding,\n            loading,\n            src\n        } = attrs\n\n        return `<canvas\n            class=\"blurry\"\n            width=${w}\n            height=${h}\n        ></canvas>\n\n        <img class=\"blurry\"\n            ${srcset ? `srcset=\"${srcset}\"` : ''}\n            alt=\"${alt}\"\n            content-visibility=\"${contentVisibility || 'auto'}\"\n            decoding=\"${decoding || 'async'}\"\n            loading=\"${loading || 'lazy'}\"\n            class=\"image-element blurry\"\n            src=\"${src}\"\n        />`\n    }\n\n    render ():string {\n        const srcset = this.getAttribute('srcset')\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        const src = this.getAttribute('src')\n        const alt = this.getAttribute('alt')\n        if (!src) throw new Error('Not src')\n        if (!alt) throw new Error('Not alt')\n\n        return BlurHash.html({ srcset, w, h, src, alt })\n    }\n}\n\ncustomElements.define('blur-hash', BlurHash)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { WebComponent } from '@substrate-system/web-component'\nimport { decode } from 'blurhash'\nimport { html } from './ssr.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\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) : attrs.width) :\n            parseInt(this.style.width))\n        const height = (attrs.height ?\n            (typeof attrs.height === 'string' ? parseInt(attrs.height) : attrs.height) :\n            parseInt(this.style.height))\n\n        this.innerHTML = BlurHash.html(Object.assign(attrs, { width, height }))\n\n        const { placeholder, src: newSrc } = attrs\n\n        const pixels = decode(placeholder, width, height)\n        const canvas = this.querySelector('canvas') as HTMLCanvasElement\n        const ctx = canvas.getContext('2d')!\n        const imageData = ctx.createImageData(width, height)\n        imageData.data.set(pixels)\n        ctx.putImageData(imageData, 0, 0)\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        img.addEventListener('load', () => {\n            canvas.style.display = 'none'\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\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 || !width || !height) {\n            throw new Error('Missing attributes')\n        }\n\n        // don't render again if we dont have to\n        if (!this.innerHTML) {\n            this.innerHTML = this.render()\n        }\n\n        const pixels = decode(placeholder, width, height)\n        const canvas = this.querySelector('canvas') as HTMLCanvasElement\n        const ctx = canvas.getContext('2d')!\n        const imageData = ctx.createImageData(width, height)\n        imageData.data.set(pixels)\n        ctx.putImageData(imageData, 0, 0)\n\n        const img = this.querySelector('img')!\n        img.addEventListener('load', () => {\n            canvas.style.display = 'none'\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\n        })\n    }\n\n    static html (attrs:ImgAttrs) {\n        return html(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 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({ srcset, width, height, src, alt, placeholder })\n    }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/index.min.js

@@ -1,16 +1,17 @@
-var V=Object.defineProperty;var l=(e,t)=>V(e,"name",{value:t,configurable:!0});var R=Object.defineProperty,v=l((e,t)=>R(e,"name",{value:t,configurable:!0}),"__name"),w=class e extends window.HTMLElement{static{l(this,"WebComponent")}static{v(this,"WebComponent")}static NAME="";NAME="";static create(t){return class extends e{static NAME=t;NAME=t;render(){}}}static define(){T(this.NAME)||window.customElements.define(this.NAME,this)}async attributeChangedCallback(t,s,r){let a=this[`handleChange_${t}`];a&&await a.call(this,s,r),this.render()}connectedCallback(){this.render()}qs(t){return this.querySelector(t)}qsa(t){return this.querySelectorAll(t)}static event(t){return N(this.NAME,t)}emit(t,s={}){let r=this.NAME,a=new CustomEvent(`${r}:${t}`,{bubbles:s.bubbles===void 0?!0:s.bubbles,cancelable:s.cancelable===void 0?!0:s.cancelable,detail:s.detail});return this.dispatchEvent(a)}dispatch(t,s={}){let r=new CustomEvent(t,{bubbles:s.bubbles===void 0?!0:s.bubbles,cancelable:s.cancelable===void 0?!0:s.cancelable,detail:s.detail});return this.dispatchEvent(r)}};function N(e,t){return`${e}:${t}`}l(N,"eventName");v(N,"eventName");function T(e){return document.createElement(e).constructor!==window.HTMLElement}l(T,"isRegistered");v(T,"isRegistered");var S=["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","#","$","%","*","+",",","-",".",":",";","=","?","@","[","]","^","_","{","|","}","~"],b=l(e=>{let t=0;for(let s=0;s<e.length;s++){let r=e[s],a=S.indexOf(r);t=t*83+a}return t},"x");var E=l(e=>{let t=e/255;return t<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)},"f"),A=l(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=l(e=>e<0?-1:1,"F"),x=l((e,t)=>k(e)*Math.pow(Math.abs(e),t),"M"),q=class extends Error{static{l(this,"d")}constructor(e){super(e),this.name="ValidationError",this.message=e}},z=l(e=>{if(!e||e.length<6)throw new q("The blurhash string must be at least 6 characters");let t=b(e[0]),s=Math.floor(t/9)+1,r=t%9+1;if(e.length!==4+2*r*s)throw new q(`blurhash length mismatch: length is ${e.length} but it should be ${4+2*r*s}`)},"C");var B=l(e=>{let t=e>>16,s=e>>8&255,r=e&255;return[E(t),E(s),E(r)]},"z"),O=l((e,t)=>{let s=Math.floor(e/361),r=Math.floor(e/19)%19,a=e%19;return[x((s-9)/9,2)*t,x((r-9)/9,2)*t,x((a-9)/9,2)*t]},"L"),j=l((e,t,s,r)=>{z(e),r=r|1;let a=b(e[0]),c=Math.floor(a/9)+1,i=a%9+1,u=(b(e[1])+1)/166,h=new Array(i*c);for(let n=0;n<h.length;n++)if(n===0){let o=b(e.substring(2,6));h[n]=B(o)}else{let o=b(e.substring(4+n*2,6+n*2));h[n]=O(o,u*r)}let d=t*4,g=new Uint8ClampedArray(d*s);for(let n=0;n<s;n++)for(let o=0;o<t;o++){let m=0,C=0,L=0;for(let M=0;M<c;M++)for(let f=0;f<i;f++){let y=Math.cos(Math.PI*o*f/t)*Math.cos(Math.PI*n*M/s),p=h[f+M*i];m+=p[0]*y,C+=p[1]*y,L+=p[2]*y}let H=A(m),P=A(C),D=A(L);g[4*o+0+n*d]=H,g[4*o+1+n*d]=P,g[4*o+2+n*d]=D,g[4*o+3+n*d]=255}return g},"U"),I=j;var $=class e extends w.create("blur-hash"){static{l(this,"BlurHash")}time;constructor(){super();let t=this.getAttribute("width"),s=this.getAttribute("height"),r=this.getAttribute("time");this.time=r?parseInt(r):800,this.style.width=""+t,this.style.height=""+s,document.body.style.setProperty("--blur-hash-time",r?"."+(parseInt(r)/1e3+"s"):"0.8s")}reset(t,s,r,a,c,i={}){i.width&&(this.style.width=i.width),i.height&&(this.style.height=i.height);let u=i.width?parseInt(i.width):parseInt(this.style.width),h=i.height?parseInt(i.height):parseInt(this.style.height);this.innerHTML=e.html({srcset:i.srcset,w:""+u,h:""+h,src:t,alt:s});let d=I(r,u,h),g=this.querySelector("canvas"),n=g.getContext("2d"),o=n.createImageData(u,h);o.data.set(d),n.putImageData(o,0,0),this.setAttribute("src",t),this.setAttribute("placeholder",r);let m=this.querySelector("img");a&&m.setAttribute("srcset",a),c&&m.setAttribute("sizes",c),m.addEventListener("load",()=>{g.style.display="none",m.classList.remove("blurry"),m.classList.add("sharp")})}connectedCallback(){let t=parseInt(this.getAttribute("width")??""),s=parseInt(this.getAttribute("height")??""),r=this.getAttribute("placeholder");if(!r||!t||!s)throw new Error("Missing attributes");this.innerHTML=this.render();let a=I(r,t,s),c=this.querySelector("canvas"),i=c.getContext("2d"),u=i.createImageData(t,s);u.data.set(a),i.putImageData(u,0,0);let h=this.querySelector("img");h.addEventListener("load",()=>{c.style.display="none",h.classList.remove("blurry"),h.classList.add("sharp")})}static html(t){let{srcset:s,w:r,h:a,alt:c,contentVisibility:i,decoding:u,loading:h,src:d}=t;return`<canvas
-            class="blurry"
-            width=${r}
-            height=${a}
-        ></canvas>
+var D=Object.defineProperty;var n=(e,t)=>D(e,"name",{value:t,configurable:!0});var O=Object.defineProperty,y=n((e,t)=>O(e,"name",{value:t,configurable:!0}),"__name"),w=class e extends window.HTMLElement{static{n(this,"WebComponent")}static{y(this,"WebComponent")}static NAME="";NAME="";static create(t){return class extends e{static NAME=t;NAME=t;render(){}}}static define(){N(this.NAME)||window.customElements.define(this.NAME,this)}async attributeChangedCallback(t,r,s){let i=this[`handleChange_${t}`];i&&await i.call(this,r,s),this.render()}connectedCallback(){this.render()}qs(t){return this.querySelector(t)}qsa(t){return this.querySelectorAll(t)}static event(t){return C(this.NAME,t)}emit(t,r={}){let s=this.NAME,i=new CustomEvent(`${s}:${t}`,{bubbles:r.bubbles===void 0?!0:r.bubbles,cancelable:r.cancelable===void 0?!0:r.cancelable,detail:r.detail});return this.dispatchEvent(i)}dispatch(t,r={}){let s=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(s)}};function C(e,t){return`${e}:${t}`}n(C,"eventName");y(C,"eventName");function N(e){return document.createElement(e).constructor!==window.HTMLElement}n(N,"isRegistered");y(N,"isRegistered");var V=["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","#","$","%","*","+",",","-",".",":",";","=","?","@","[","]","^","_","{","|","}","~"],m=n(e=>{let t=0;for(let r=0;r<e.length;r++){let s=e[r],i=V.indexOf(s);t=t*83+i}return t},"x");var v=n(e=>{let t=e/255;return t<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)},"f"),A=n(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"),j=n(e=>e<0?-1:1,"F"),E=n((e,t)=>j(e)*Math.pow(Math.abs(e),t),"M"),T=class extends Error{static{n(this,"d")}constructor(e){super(e),this.name="ValidationError",this.message=e}},R=n(e=>{if(!e||e.length<6)throw new T("The blurhash string must be at least 6 characters");let t=m(e[0]),r=Math.floor(t/9)+1,s=t%9+1;if(e.length!==4+2*s*r)throw new T(`blurhash length mismatch: length is ${e.length} but it should be ${4+2*s*r}`)},"C");var k=n(e=>{let t=e>>16,r=e>>8&255,s=e&255;return[v(t),v(r),v(s)]},"z"),B=n((e,t)=>{let r=Math.floor(e/361),s=Math.floor(e/19)%19,i=e%19;return[E((r-9)/9,2)*t,E((s-9)/9,2)*t,E((i-9)/9,2)*t]},"L"),U=n((e,t,r,s)=>{R(e),s=s|1;let i=m(e[0]),u=Math.floor(i/9)+1,o=i%9+1,c=(m(e[1])+1)/166,h=new Array(o*u);for(let a=0;a<h.length;a++)if(a===0){let d=m(e.substring(2,6));h[a]=k(d)}else{let d=m(e.substring(4+a*2,6+a*2));h[a]=B(d,c*s)}let g=t*4,l=new Uint8ClampedArray(g*r);for(let a=0;a<r;a++)for(let d=0;d<t;d++){let I=0,$=0,L=0;for(let b=0;b<u;b++)for(let f=0;f<o;f++){let M=Math.cos(Math.PI*d*f/t)*Math.cos(Math.PI*a*b/r),p=h[f+b*o];I+=p[0]*M,$+=p[1]*M,L+=p[2]*M}let z=A(I),S=A($),P=A(L);l[4*d+0+a*g]=z,l[4*d+1+a*g]=S,l[4*d+2+a*g]=P,l[4*d+3+a*g]=255}return l},"U"),x=U;function H(e){let{width:t,height:r,alt:s,contentVisibility:i,decoding:u,loading:o,srcset:c,sizes:h,src:g}=e,l=`<canvas
+        class="blurry"
+        width=${t}
+        height=${r}
+    ></canvas>
 
-        <img class="blurry"
-            ${s?`srcset="${s}"`:""}
-            alt="${c}"
-            content-visibility="${i||"auto"}"
-            decoding="${u||"async"}"
-            loading="${h||"lazy"}"
-            class="image-element blurry"
-            src="${d}"
-        />`}render(){let t=this.getAttribute("srcset"),s=this.getAttribute("width"),r=this.getAttribute("height"),a=this.getAttribute("time");this.time=a?parseInt(a):800;let c=this.getAttribute("src"),i=this.getAttribute("alt");if(!c)throw new Error("Not src");if(!i)throw new Error("Not alt");return e.html({srcset:t,w:s,h:r,src:c,alt:i})}};customElements.define("blur-hash",$);export{$ as BlurHash};
+    <img class="blurry"
+        alt="${s}"
+        content-visibility="${i||"auto"}"
+        decoding="${u||"async"}"
+        loading="${o||"lazy"}"
+        class="image-element blurry"
+        ${c?`srcset="${c}"`:""}
+        ${h?`sizes=${h}`:""}
+        src="${g}"
+    />`;return typeof window>"u"?`<blur-hash>${l}</blur-hash>`:l}n(H,"html");var q=class e extends w.create("blur-hash"){static{n(this,"BlurHash")}time;constructor(){super();let t=this.getAttribute("width"),r=this.getAttribute("height"),s=this.getAttribute("time");this.time=s?parseInt(s):800,this.style.width=""+t,this.style.height=""+r,document.body.style.setProperty("--blur-hash-time",s?"."+(parseInt(s)/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):t.width:parseInt(this.style.width),s=t.height?typeof t.height=="string"?parseInt(t.height):t.height:parseInt(this.style.height);this.innerHTML=e.html(Object.assign(t,{width:r,height:s}));let{placeholder:i,src:u}=t,o=x(i,r,s),c=this.querySelector("canvas"),h=c.getContext("2d"),g=h.createImageData(r,s);g.data.set(o),h.putImageData(g,0,0),this.setAttribute("src",u),this.setAttribute("placeholder",i);let l=this.querySelector("img");t.srcset&&l.setAttribute("srcset",t.srcset),t.sizes&&l.setAttribute("sizes",t.sizes),l.addEventListener("load",()=>{c.style.display="none",l.classList.remove("blurry"),l.classList.add("sharp")})}connectedCallback(){let t=parseInt(this.getAttribute("width")??""),r=parseInt(this.getAttribute("height")??""),s=this.getAttribute("placeholder");if(!s||!t||!r)throw new Error("Missing attributes");this.innerHTML||(this.innerHTML=this.render());let i=x(s,t,r),u=this.querySelector("canvas"),o=u.getContext("2d"),c=o.createImageData(t,r);c.data.set(i),o.putImageData(c,0,0);let h=this.querySelector("img");h.addEventListener("load",()=>{u.style.display="none",h.classList.remove("blurry"),h.classList.add("sharp")})}static html(t){return H(t)}render(){let t=this.getAttribute("srcset"),r=this.getAttribute("width"),s=this.getAttribute("height"),i=this.getAttribute("time"),u=this.getAttribute("placeholder");this.time=i?parseInt(i):800;let o=this.getAttribute("src"),c=this.getAttribute("alt");if(!u)throw new Error("not placeholder");if(!r||!s)throw new Error("not width or not height");if(!o)throw new Error("Not src");if(!c)throw new Error("Not alt");return e.html({srcset:t,width:r,height:s,src:o,alt:c,placeholder:u})}};export{q 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/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/index.ts"],
-  "sourcesContent": ["export abstract class WebComponent extends window.HTMLElement {\n    static NAME:string = ''\n    NAME:string = ''\n\n    static create (elementName:string) {\n        return class extends WebComponent {\n            static NAME = elementName\n            NAME = elementName\n            render () {}\n        }\n    }\n\n    static define<T extends { new (...args:any[]):WebComponent; NAME:string }>(this:T) {\n        if (!isRegistered(this.NAME)) {\n            window.customElements.define(this.NAME, this)\n        }\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 (name:string, oldValue:string, newValue:string) {\n        const handler = this[`handleChange_${name}`]\n        if (handler) {\n            await handler.call(this, oldValue, newValue)\n        }\n        this.render()\n    }\n\n    connectedCallback () {\n        this.render()\n    }\n\n    abstract render ():any\n\n    qs<K extends keyof HTMLElementTagNameMap>(selector:K):HTMLElementTagNameMap[K]|null;\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>(selector:K):HTMLElementTagNameMap[K]|null;\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.NAME, 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        const namespace = this.NAME\n        const event = new CustomEvent<T>(`${namespace}:${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     * 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\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", "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", "import { WebComponent } from '@substrate-system/web-component'\nimport { decode } from 'blurhash'\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'blur-hash': BlurHash\n    }\n}\n\nexport class BlurHash extends WebComponent.create('blur-hash') {\n    time:number\n\n    constructor () {\n        super()\n        // const srcset = this.getAttribute('srcset')\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     */\n    reset (\n        newSrc:string,\n        alt:string,\n        placeholder:string,\n        newSrcset?:string|null,\n        newSizes?:string|null,\n        attrs:Partial<{\n            srcset:string|null;\n            width:string|null;\n            height:string|null;\n            time:number|null;\n        }> = {}\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            parseInt(attrs.width) :\n            parseInt(this.style.width))\n        const height = (attrs.height ?\n            parseInt(attrs.height) :\n            parseInt(this.style.height))\n\n        this.innerHTML = BlurHash.html({\n            srcset: attrs.srcset,\n            w: '' + width,\n            h: '' + height,\n            src: newSrc,\n            alt\n        })\n\n        const pixels = decode(placeholder, width, height)\n        const canvas = this.querySelector('canvas') as HTMLCanvasElement\n        const ctx = canvas.getContext('2d')!\n        const imageData = ctx.createImageData(width, height)\n        imageData.data.set(pixels)\n        ctx.putImageData(imageData, 0, 0)\n\n        this.setAttribute('src', newSrc)\n        this.setAttribute('placeholder', placeholder)\n\n        const img = this.querySelector('img')!\n        if (newSrcset) img.setAttribute('srcset', newSrcset)\n        if (newSizes) img.setAttribute('sizes', newSizes)\n\n        img.addEventListener('load', () => {\n            canvas.style.display = 'none'\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\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 || !width || !height) {\n            throw new Error('Missing attributes')\n        }\n\n        this.innerHTML = this.render()\n        const pixels = decode(placeholder, width, height)\n        const canvas = this.querySelector('canvas') as HTMLCanvasElement\n        const ctx = canvas.getContext('2d')!\n        const imageData = ctx.createImageData(width, height)\n        imageData.data.set(pixels)\n        ctx.putImageData(imageData, 0, 0)\n\n        const img = this.querySelector('img')!\n\n        img.addEventListener('load', () => {\n            canvas.style.display = 'none'\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\n        })\n    }\n\n    static html (attrs:{\n        alt:string;\n        srcset?:string|null;\n        w?:string|null;\n        h?:string|null;\n        time?:number;\n        contentVisibility?:'visible'|'auto'|'hidden'|null;\n        decoding?:'sync'|'async'|'auto'|null;\n        loading?:'lazy'|'eager'|'auto'|null;\n        src:string;\n    }) {\n        const {\n            srcset,\n            w,\n            h,\n            alt,\n            contentVisibility,\n            decoding,\n            loading,\n            src\n        } = attrs\n\n        return `<canvas\n            class=\"blurry\"\n            width=${w}\n            height=${h}\n        ></canvas>\n\n        <img class=\"blurry\"\n            ${srcset ? `srcset=\"${srcset}\"` : ''}\n            alt=\"${alt}\"\n            content-visibility=\"${contentVisibility || 'auto'}\"\n            decoding=\"${decoding || 'async'}\"\n            loading=\"${loading || 'lazy'}\"\n            class=\"image-element blurry\"\n            src=\"${src}\"\n        />`\n    }\n\n    render ():string {\n        const srcset = this.getAttribute('srcset')\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        const src = this.getAttribute('src')\n        const alt = this.getAttribute('alt')\n        if (!src) throw new Error('Not src')\n        if (!alt) throw new Error('Not alt')\n\n        return BlurHash.html({ srcset, w, h, src, alt })\n    }\n}\n\ncustomElements.define('blur-hash', BlurHash)\n"],
-  "mappings": "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",
-  "names": ["WebComponent", "_WebComponent", "__name", "elementName", "isRegistered", "name", "oldValue", "newValue", "handler", "selector", "evType", "eventName", "type", "opts", "namespace", "event", "elName", "q", "x", "__name", "t", "e", "r", "n", "l", "f", "__name", "t", "e", "h", "F", "M", "d", "C", "x", "r", "n", "z", "__name", "t", "e", "r", "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", "BlurHash", "_BlurHash", "WebComponent", "__name", "w", "h", "time", "newSrc", "alt", "placeholder", "newSrcset", "newSizes", "attrs", "width", "height", "pixels", "j", "canvas", "ctx", "imageData", "img", "srcset", "contentVisibility", "decoding", "loading", "src"]
+  "sources": ["../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/ssr.ts", "../src/index.ts"],
+  "sourcesContent": ["export abstract class WebComponent extends window.HTMLElement {\n    static NAME:string = ''\n    NAME:string = ''\n\n    static create (elementName:string) {\n        return class extends WebComponent {\n            static NAME = elementName\n            NAME = elementName\n            render () {}\n        }\n    }\n\n    static define<T extends { new (...args:any[]):WebComponent; NAME:string }>(this:T) {\n        if (!isRegistered(this.NAME)) {\n            window.customElements.define(this.NAME, this)\n        }\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 (name:string, oldValue:string, newValue:string) {\n        const handler = this[`handleChange_${name}`]\n        if (handler) {\n            await handler.call(this, oldValue, newValue)\n        }\n        this.render()\n    }\n\n    connectedCallback () {\n        this.render()\n    }\n\n    abstract render ():any\n\n    qs<K extends keyof HTMLElementTagNameMap>(selector:K):HTMLElementTagNameMap[K]|null;\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>(selector:K):HTMLElementTagNameMap[K]|null;\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.NAME, 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        const namespace = this.NAME\n        const event = new CustomEvent<T>(`${namespace}:${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     * 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\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", "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", "import type { ImgAttrs } from './index.js'\n\nexport function html (attrs:ImgAttrs) {\n    const {\n        width,\n        height,\n        alt,\n        contentVisibility,\n        decoding,\n        loading,\n        srcset,\n        sizes,\n        src\n    } = attrs\n\n    const htmlString = `<canvas\n        class=\"blurry\"\n        width=${width}\n        height=${height}\n    ></canvas>\n\n    <img class=\"blurry\"\n        alt=\"${alt}\"\n        content-visibility=\"${contentVisibility || 'auto'}\"\n        decoding=\"${decoding || 'async'}\"\n        loading=\"${loading || 'lazy'}\"\n        class=\"image-element blurry\"\n        ${srcset ? `srcset=\"${srcset}\"` : ''}\n        ${sizes ? `sizes=${sizes}` : ''}\n        src=\"${src}\"\n    />`\n\n    // running in node?\n    return typeof window === 'undefined' ?\n        `<blur-hash>${htmlString}</blur-hash>` :\n        htmlString\n}\n", "import { WebComponent } from '@substrate-system/web-component'\nimport { decode } from 'blurhash'\nimport { html } from './ssr.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\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) : attrs.width) :\n            parseInt(this.style.width))\n        const height = (attrs.height ?\n            (typeof attrs.height === 'string' ? parseInt(attrs.height) : attrs.height) :\n            parseInt(this.style.height))\n\n        this.innerHTML = BlurHash.html(Object.assign(attrs, { width, height }))\n\n        const { placeholder, src: newSrc } = attrs\n\n        const pixels = decode(placeholder, width, height)\n        const canvas = this.querySelector('canvas') as HTMLCanvasElement\n        const ctx = canvas.getContext('2d')!\n        const imageData = ctx.createImageData(width, height)\n        imageData.data.set(pixels)\n        ctx.putImageData(imageData, 0, 0)\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        img.addEventListener('load', () => {\n            canvas.style.display = 'none'\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\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 || !width || !height) {\n            throw new Error('Missing attributes')\n        }\n\n        // don't render again if we dont have to\n        if (!this.innerHTML) {\n            this.innerHTML = this.render()\n        }\n\n        const pixels = decode(placeholder, width, height)\n        const canvas = this.querySelector('canvas') as HTMLCanvasElement\n        const ctx = canvas.getContext('2d')!\n        const imageData = ctx.createImageData(width, height)\n        imageData.data.set(pixels)\n        ctx.putImageData(imageData, 0, 0)\n\n        const img = this.querySelector('img')!\n        img.addEventListener('load', () => {\n            canvas.style.display = 'none'\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\n        })\n    }\n\n    static html (attrs:ImgAttrs) {\n        return html(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 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({ srcset, width, height, src, alt, placeholder })\n    }\n}\n"],
+  "mappings": "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",
+  "names": ["WebComponent", "_WebComponent", "__name", "elementName", "isRegistered", "name", "oldValue", "newValue", "handler", "selector", "evType", "eventName", "type", "opts", "namespace", "event", "elName", "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", "C", "x", "m", "b", "i", "u", "o", "a", "c", "s", "y", "B", "R", "w", "P", "G", "T", "V", "h", "I", "E", "j", "html", "attrs", "width", "height", "alt", "contentVisibility", "decoding", "loading", "srcset", "sizes", "src", "htmlString", "__name", "BlurHash", "_BlurHash", "WebComponent", "__name", "w", "h", "time", "attrs", "width", "height", "placeholder", "newSrc", "pixels", "j", "canvas", "ctx", "imageData", "img", "html", "srcset", "src", "alt"]
 }

package/dist/meta.json

@@ -1,7 +1,12 @@
 {
   "inputs": {
     "src/index.ts": {
-      "bytes": 4922,
+      "bytes": 4627,
+      "imports": [],
+      "format": "esm"
+    },
+    "src/ssr.ts": {
+      "bytes": 856,
       "imports": [],
       "format": "esm"
     }
@@ -11,7 +16,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 7878
+      "bytes": 7460
     },
     "dist/index.js": {
       "imports": [
@@ -24,6 +29,11 @@
           "path": "blurhash",
           "kind": "import-statement",
           "external": true
+        },
+        {
+          "path": "./ssr.js",
+          "kind": "import-statement",
+          "external": true
         }
       ],
       "exports": [
@@ -32,10 +42,29 @@
       "entryPoint": "src/index.ts",
       "inputs": {
         "src/index.ts": {
-          "bytesInOutput": 3792
+          "bytesInOutput": 3640
+        }
+      },
+      "bytes": 3826
+    },
+    "dist/ssr.js.map": {
+      "imports": [],
+      "exports": [],
+      "inputs": {},
+      "bytes": 1462
+    },
+    "dist/ssr.js": {
+      "imports": [],
+      "exports": [
+        "html"
+      ],
+      "entryPoint": "src/ssr.ts",
+      "inputs": {
+        "src/ssr.ts": {
+          "bytesInOutput": 734
         }
       },
-      "bytes": 3978
+      "bytes": 914
     }
   }
 }

package/dist/ssr.cjs

@@ -0,0 +1,56 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ssr_exports = {};
+__export(ssr_exports, {
+  html: () => html
+});
+module.exports = __toCommonJS(ssr_exports);
+function html(attrs) {
+  const {
+    width,
+    height,
+    alt,
+    contentVisibility,
+    decoding,
+    loading,
+    srcset,
+    sizes,
+    src
+  } = attrs;
+  const htmlString = `<canvas
+        class="blurry"
+        width=${width}
+        height=${height}
+    ></canvas>
+
+    <img class="blurry"
+        alt="${alt}"
+        content-visibility="${contentVisibility || "auto"}"
+        decoding="${decoding || "async"}"
+        loading="${loading || "lazy"}"
+        class="image-element blurry"
+        ${srcset ? `srcset="${srcset}"` : ""}
+        ${sizes ? `sizes=${sizes}` : ""}
+        src="${src}"
+    />`;
+  return typeof window === "undefined" ? `<blur-hash>${htmlString}</blur-hash>` : htmlString;
+}
+__name(html, "html");
+//# sourceMappingURL=ssr.cjs.map

package/dist/ssr.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/ssr.ts"],
+  "sourcesContent": ["import type { ImgAttrs } from './index.js'\n\nexport function html (attrs:ImgAttrs) {\n    const {\n        width,\n        height,\n        alt,\n        contentVisibility,\n        decoding,\n        loading,\n        srcset,\n        sizes,\n        src\n    } = attrs\n\n    const htmlString = `<canvas\n        class=\"blurry\"\n        width=${width}\n        height=${height}\n    ></canvas>\n\n    <img class=\"blurry\"\n        alt=\"${alt}\"\n        content-visibility=\"${contentVisibility || 'auto'}\"\n        decoding=\"${decoding || 'async'}\"\n        loading=\"${loading || 'lazy'}\"\n        class=\"image-element blurry\"\n        ${srcset ? `srcset=\"${srcset}\"` : ''}\n        ${sizes ? `sizes=${sizes}` : ''}\n        src=\"${src}\"\n    />`\n\n    // running in node?\n    return typeof window === 'undefined' ?\n        `<blur-hash>${htmlString}</blur-hash>` :\n        htmlString\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,SAAS,KAAM,OAAgB;AAClC,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,IAAI;AAEJ,QAAM,aAAa;AAAA;AAAA,gBAEP,KAAK;AAAA,iBACJ,MAAM;AAAA;AAAA;AAAA;AAAA,eAIR,GAAG;AAAA,8BACY,qBAAqB,MAAM;AAAA,oBACrC,YAAY,OAAO;AAAA,mBACpB,WAAW,MAAM;AAAA;AAAA,UAE1B,SAAS,WAAW,MAAM,MAAM,EAAE;AAAA,UAClC,QAAQ,SAAS,KAAK,KAAK,EAAE;AAAA,eACxB,GAAG;AAAA;AAId,SAAO,OAAO,WAAW,cACrB,cAAc,UAAU,iBACxB;AACR;AAlCgB;",
+  "names": []
+}

package/dist/ssr.d.ts

@@ -0,0 +1,3 @@
+import type { ImgAttrs } from './index.js';
+export declare function html(attrs: ImgAttrs): string;
+//# sourceMappingURL=ssr.d.ts.map

package/dist/ssr.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ssr.d.ts","sourceRoot":"","sources":["../src/ssr.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAE1C,wBAAgB,IAAI,CAAE,KAAK,EAAC,QAAQ,UAkCnC"}

package/dist/ssr.js

@@ -0,0 +1,37 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function html(attrs) {
+  const {
+    width,
+    height,
+    alt,
+    contentVisibility,
+    decoding,
+    loading,
+    srcset,
+    sizes,
+    src
+  } = attrs;
+  const htmlString = `<canvas
+        class="blurry"
+        width=${width}
+        height=${height}
+    ></canvas>
+
+    <img class="blurry"
+        alt="${alt}"
+        content-visibility="${contentVisibility || "auto"}"
+        decoding="${decoding || "async"}"
+        loading="${loading || "lazy"}"
+        class="image-element blurry"
+        ${srcset ? `srcset="${srcset}"` : ""}
+        ${sizes ? `sizes=${sizes}` : ""}
+        src="${src}"
+    />`;
+  return typeof window === "undefined" ? `<blur-hash>${htmlString}</blur-hash>` : htmlString;
+}
+__name(html, "html");
+export {
+  html
+};
+//# sourceMappingURL=ssr.js.map

package/dist/ssr.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/ssr.ts"],
+  "sourcesContent": ["import type { ImgAttrs } from './index.js'\n\nexport function html (attrs:ImgAttrs) {\n    const {\n        width,\n        height,\n        alt,\n        contentVisibility,\n        decoding,\n        loading,\n        srcset,\n        sizes,\n        src\n    } = attrs\n\n    const htmlString = `<canvas\n        class=\"blurry\"\n        width=${width}\n        height=${height}\n    ></canvas>\n\n    <img class=\"blurry\"\n        alt=\"${alt}\"\n        content-visibility=\"${contentVisibility || 'auto'}\"\n        decoding=\"${decoding || 'async'}\"\n        loading=\"${loading || 'lazy'}\"\n        class=\"image-element blurry\"\n        ${srcset ? `srcset=\"${srcset}\"` : ''}\n        ${sizes ? `sizes=${sizes}` : ''}\n        src=\"${src}\"\n    />`\n\n    // running in node?\n    return typeof window === 'undefined' ?\n        `<blur-hash>${htmlString}</blur-hash>` :\n        htmlString\n}\n"],
+  "mappings": ";;AAEO,SAAS,KAAM,OAAgB;AAClC,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,IAAI;AAEJ,QAAM,aAAa;AAAA;AAAA,gBAEP,KAAK;AAAA,iBACJ,MAAM;AAAA;AAAA;AAAA;AAAA,eAIR,GAAG;AAAA,8BACY,qBAAqB,MAAM;AAAA,oBACrC,YAAY,OAAO;AAAA,mBACpB,WAAW,MAAM;AAAA;AAAA,UAE1B,SAAS,WAAW,MAAM,MAAM,EAAE;AAAA,UAClC,QAAQ,SAAS,KAAK,KAAK,EAAE;AAAA,eACxB,GAAG;AAAA;AAId,SAAO,OAAO,WAAW,cACrB,cAAc,UAAU,iBACxB;AACR;AAlCgB;",
+  "names": []
+}

package/dist/ssr.min.js

@@ -0,0 +1,17 @@
+var $=Object.defineProperty;var r=(t,s)=>$(t,"name",{value:s,configurable:!0});function m(t){let{width:s,height:l,alt:a,contentVisibility:c,decoding:o,loading:d,srcset:i,sizes:n,src:h}=t,e=`<canvas
+        class="blurry"
+        width=${s}
+        height=${l}
+    ></canvas>
+
+    <img class="blurry"
+        alt="${a}"
+        content-visibility="${c||"auto"}"
+        decoding="${o||"async"}"
+        loading="${d||"lazy"}"
+        class="image-element blurry"
+        ${i?`srcset="${i}"`:""}
+        ${n?`sizes=${n}`:""}
+        src="${h}"
+    />`;return typeof window>"u"?`<blur-hash>${e}</blur-hash>`:e}r(m,"html");export{m as html};
+//# sourceMappingURL=ssr.min.js.map

package/dist/ssr.min.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/ssr.ts"],
+  "sourcesContent": ["import type { ImgAttrs } from './index.js'\n\nexport function html (attrs:ImgAttrs) {\n    const {\n        width,\n        height,\n        alt,\n        contentVisibility,\n        decoding,\n        loading,\n        srcset,\n        sizes,\n        src\n    } = attrs\n\n    const htmlString = `<canvas\n        class=\"blurry\"\n        width=${width}\n        height=${height}\n    ></canvas>\n\n    <img class=\"blurry\"\n        alt=\"${alt}\"\n        content-visibility=\"${contentVisibility || 'auto'}\"\n        decoding=\"${decoding || 'async'}\"\n        loading=\"${loading || 'lazy'}\"\n        class=\"image-element blurry\"\n        ${srcset ? `srcset=\"${srcset}\"` : ''}\n        ${sizes ? `sizes=${sizes}` : ''}\n        src=\"${src}\"\n    />`\n\n    // running in node?\n    return typeof window === 'undefined' ?\n        `<blur-hash>${htmlString}</blur-hash>` :\n        htmlString\n}\n"],
+  "mappings": "+EAEO,SAASA,EAAMC,EAAgB,CAClC,GAAM,CACF,MAAAC,EACA,OAAAC,EACA,IAAAC,EACA,kBAAAC,EACA,SAAAC,EACA,QAAAC,EACA,OAAAC,EACA,MAAAC,EACA,IAAAC,CACJ,EAAIT,EAEEU,EAAa;AAAA;AAAA,gBAEPT,CAAK;AAAA,iBACJC,CAAM;AAAA;AAAA;AAAA;AAAA,eAIRC,CAAG;AAAA,8BACYC,GAAqB,MAAM;AAAA,oBACrCC,GAAY,OAAO;AAAA,mBACpBC,GAAW,MAAM;AAAA;AAAA,UAE1BC,EAAS,WAAWA,CAAM,IAAM,EAAE;AAAA,UAClCC,EAAQ,SAASA,CAAK,GAAK,EAAE;AAAA,eACxBC,CAAG;AAAA,QAId,OAAO,OAAO,OAAW,IACrB,cAAcC,CAAU,eACxBA,CACR,CAlCgBC,EAAAZ,EAAA",
+  "names": ["html", "attrs", "width", "height", "alt", "contentVisibility", "decoding", "loading", "srcset", "sizes", "src", "htmlString", "__name"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@substrate-system/blur-hash",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "type": "module",
   "description": "A blurry placeholder image web component",
   "main": "dist/index.js",
@@ -10,11 +10,34 @@
   "files": [
     "./dist/*"
   ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./ssr": {
+      "import": "./dist/ssr.js",
+      "require": "./dist/ssr.cjs"
+    },
+    "./hash": "./dist/bin/index.js",
+    "./*": {
+      "import": [
+        "./dist/*.js",
+        "./dist/*"
+      ],
+      "require": [
+        "./dist/*.cjs",
+        "./dist/*"
+      ]
+    }
+  },
   "scripts": {
-    "lint": "eslint \"./**/*.{ts,js}\"",
+    "lint": "eslint \"./**/*.ts\"",
     "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-tape-run && npm run test-bin",
+    "test": "npm run build && npm run build-tests && npm run test-tape-run && 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-ssr": "esbuild ./test/ssr.ts --bundle --platform=node | node --input-type=module | tap-spec",
     "test-tape-run": "cat test/index.html | tape-run --input=html --static=test | tap-spec",
     "build-css": "postcss src/index.css --use postcss-nesting > dist/style.css",
     "build-css:min": "postcss src/index.css --use cssnano postcss-nesting > dist/style.min.css",
@@ -59,22 +82,6 @@
     "typescript": "^5.4.5",
     "vite": "^6.0.1"
   },
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    },
-    "./*": {
-      "import": [
-        "./dist/*.js",
-        "./dist/*"
-      ],
-      "require": [
-        "./dist/*.cjs",
-        "./dist/*"
-      ]
-    }
-  },
   "author": "nichoth <nichoth@nichoth.com> (https://nichoth.com)",
   "license": "SEE LICENSE IN LICENSE",
   "types": "./dist/index.d.ts",