@substrate-system/blur-hash 0.0.9 → 0.0.13

package/dist/index.cjs

@@ -105,6 +105,7 @@ class BlurHash extends import_web_component.WebComponent.create("blur-hash") {
     const width = this.getAttribute("width");
     const height = this.getAttribute("height");
     const time = this.getAttribute("time");
+    const classes = this.classList.toString();
     const placeholder = this.getAttribute("placeholder");
     this.time = time ? parseInt(time) : 800;
     const src = this.getAttribute("src");
@@ -113,7 +114,7 @@ class BlurHash extends import_web_component.WebComponent.create("blur-hash") {
     if (!width || !height) throw new Error("not width or not height");
     if (!src) throw new Error("Not src");
     if (!alt) throw new Error("Not alt");
-    return BlurHash.html({ srcset, width, height, src, alt, placeholder });
+    return BlurHash.html({ classes, srcset, width, height, src, alt, placeholder });
   }
 }
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["import { WebComponent } from '@substrate-system/web-component'\nimport { decode } from 'blurhash'\nimport { 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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",
+  "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 & { classes?:string }) {\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 classes = this.classList.toString()\n        const placeholder = this.getAttribute('placeholder')\n        this.time = time ? parseInt(time) : 800\n        const src = this.getAttribute('src')\n        const alt = this.getAttribute('alt')\n        if (!placeholder) throw new Error('not placeholder')\n        if (!width || !height) throw new Error('not width or not height')\n        if (!src) throw new Error('Not src')\n        if (!alt) throw new Error('Not alt')\n\n        return BlurHash.html({ classes, srcset, width, height, src, alt, placeholder })\n    }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/index.d.ts

@@ -397,7 +397,9 @@ export declare class BlurHash extends BlurHash_base {
         height?: string | number;
     })): void;
     connectedCallback(): void;
-    static html(attrs: ImgAttrs): string;
+    static html(attrs: ImgAttrs & {
+        classes?: string;
+    }): string;
     /**
      * Use the attributes to create HTML.
      */

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;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"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAmCgD,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;;;;;AAjHnimB,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,GAAG;QAAE,OAAO,CAAC,EAAC,MAAM,CAAA;KAAE;IAIjD;;OAEG;IACH,MAAM,IAAI,MAAM;CAiBnB"}

package/dist/index.js

@@ -83,6 +83,7 @@ class BlurHash extends WebComponent.create("blur-hash") {
     const width = this.getAttribute("width");
     const height = this.getAttribute("height");
     const time = this.getAttribute("time");
+    const classes = this.classList.toString();
     const placeholder = this.getAttribute("placeholder");
     this.time = time ? parseInt(time) : 800;
     const src = this.getAttribute("src");
@@ -91,7 +92,7 @@ class BlurHash extends WebComponent.create("blur-hash") {
     if (!width || !height) throw new Error("not width or not height");
     if (!src) throw new Error("Not src");
     if (!alt) throw new Error("Not alt");
-    return BlurHash.html({ srcset, width, height, src, alt, placeholder });
+    return BlurHash.html({ classes, srcset, width, height, src, alt, placeholder });
   }
 }
 export {

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["import { WebComponent } from '@substrate-system/web-component'\nimport { decode } from 'blurhash'\nimport { 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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",
+  "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 & { classes?:string }) {\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 classes = this.classList.toString()\n        const placeholder = this.getAttribute('placeholder')\n        this.time = time ? parseInt(time) : 800\n        const src = this.getAttribute('src')\n        const alt = this.getAttribute('alt')\n        if (!placeholder) throw new Error('not placeholder')\n        if (!width || !height) throw new Error('not width or not height')\n        if (!src) throw new Error('Not src')\n        if (!alt) throw new Error('Not alt')\n\n        return BlurHash.html({ classes, srcset, width, height, src, alt, placeholder })\n    }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/index.min.js

@@ -1,4 +1,7 @@
-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
+var D=Object.defineProperty;var i=(e,t)=>D(e,"name",{value:t,configurable:!0});var V=Object.defineProperty,v=i((e,t)=>V(e,"name",{value:t,configurable:!0}),"__name"),w=class e extends window.HTMLElement{static{i(this,"WebComponent")}static{v(this,"WebComponent")}static NAME="";NAME="";static create(t){return class extends e{static NAME=t;NAME=t;render(){}}}static define(){L(this.NAME)||window.customElements.define(this.NAME,this)}async attributeChangedCallback(t,r,s){let n=this[`handleChange_${t}`];n&&await n.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 T(this.NAME,t)}emit(t,r={}){let s=this.NAME,n=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(n)}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 T(e,t){return`${e}:${t}`}i(T,"eventName");v(T,"eventName");function L(e){return document.createElement(e).constructor!==window.HTMLElement}i(L,"isRegistered");v(L,"isRegistered");var R=["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=i(e=>{let t=0;for(let r=0;r<e.length;r++){let s=e[r],n=R.indexOf(s);t=t*83+n}return t},"x");var A=i(e=>{let t=e/255;return t<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)},"f"),x=i(e=>{let t=Math.max(0,Math.min(1,e));return t<=.0031308?Math.trunc(t*12.92*255+.5):Math.trunc((1.055*Math.pow(t,.4166666666666667)-.055)*255+.5)},"h"),B=i(e=>e<0?-1:1,"F"),E=i((e,t)=>B(e)*Math.pow(Math.abs(e),t),"M"),S=class extends Error{static{i(this,"d")}constructor(e){super(e),this.name="ValidationError",this.message=e}},F=i(e=>{if(!e||e.length<6)throw new S("The blurhash string must be at least 6 characters");let t=b(e[0]),r=Math.floor(t/9)+1,s=t%9+1;if(e.length!==4+2*s*r)throw new S(`blurhash length mismatch: length is ${e.length} but it should be ${4+2*s*r}`)},"C");var U=i(e=>{let t=e>>16,r=e>>8&255,s=e&255;return[A(t),A(r),A(s)]},"z"),W=i((e,t)=>{let r=Math.floor(e/361),s=Math.floor(e/19)%19,n=e%19;return[E((r-9)/9,2)*t,E((s-9)/9,2)*t,E((n-9)/9,2)*t]},"L"),G=i((e,t,r,s)=>{F(e),s=s|1;let n=b(e[0]),l=Math.floor(n/9)+1,h=n%9+1,d=(b(e[1])+1)/166,o=new Array(h*l);for(let a=0;a<o.length;a++)if(a===0){let u=b(e.substring(2,6));o[a]=U(u)}else{let u=b(e.substring(4+a*2,6+a*2));o[a]=W(u,d*s)}let m=t*4,c=new Uint8ClampedArray(m*r);for(let a=0;a<r;a++)for(let u=0;u<t;u++){let _=0,P=0,j=0;for(let f=0;f<l;f++)for(let p=0;p<h;p++){let M=Math.cos(Math.PI*u*p/t)*Math.cos(Math.PI*a*f/r),y=o[p+f*h];_+=y[0]*M,P+=y[1]*M,j+=y[2]*M}let H=x(_),q=x(P),z=x(j);c[4*u+0+a*m]=H,c[4*u+1+a*m]=q,c[4*u+2+a*m]=z,c[4*u+3+a*m]=255}return c},"U"),$=G;var J=Object.defineProperty,K=i((e,t)=>J(e,"name",{value:t,configurable:!0}),"__name"),C=class{static{i(this,"Queue")}static{K(this,"Queue")}_inProgress=Promise.resolve();add(t){return this._inProgress=this._inProgress.then(()=>t()),this._inProgress}};var Q=Object.defineProperty,X=i((e,t)=>Q(e,"name",{value:t,configurable:!0}),"__name");function I(e){return Object.keys(e).reduce((t,r)=>{let s=e[r];return s?typeof s=="boolean"?s?(t+` ${r}`).trim():t:Array.isArray(s)?t+` ${r}="${s.join(" ")}"`:(t+` ${r}="${s}"`).trim():t},"")}i(I,"attributes");X(I,"attributes");var Y=Object.defineProperty,g=i((e,t)=>Y(e,"name",{value:t,configurable:!0}),"__name");function Z(e){return e.map(t=>t.name+(t.value===""?"":`="${t.value}"`)).join(" ")}i(Z,"attributesToString");g(Z,"attributesToString");function k(e){return new Promise(t=>{e?setTimeout(t,e):setTimeout(t,0)})}i(k,"sleep");g(k,"sleep");function tt(e){let t=new FormData(e),r={};return t.forEach((s,n)=>{if(Reflect.has(r,n)){let l=r[n];Array.isArray(l)?l.push(s):r[n]=[r[n],s]}else r[n]=s}),r}i(tt,"parseForm");g(tt,"parseForm");function et(e){return e.reduce((t,r)=>(t[r.name]=r.value||!0,t),{})}i(et,"attributesAsObject");g(et,"attributesAsObject");function rt(e){return Object.keys(e).map(t=>t+(e[t]===!0?"":`="${e[t]}"`)).join(" ")}i(rt,"objectToString");g(rt,"objectToString");function st(e,t){for(let r in t){let s=t[r];s===!1?e.removeAttribute(r):e.setAttribute(r,s===!0?"":s)}}i(st,"setAttributes");g(st,"setAttributes");function O(e){let{width:t,height:r,alt:s,contentVisibility:n,placeholder:l,decoding:h,loading:d,srcset:o,sizes:m,src:c}=e;if(!l)throw new Error("not placeholder");let a=`<canvas
+        alt="${s}"
+        width=${t}
+        height=${r}
         class="blurry"
         width=${t}
         height=${r}
@@ -6,12 +9,13 @@ var D=Object.defineProperty;var n=(e,t)=>D(e,"name",{value:t,configurable:!0});v
 
     <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};
+        content-visibility="${n||"auto"}"
+        decoding="${h||"async"}"
+        loading="${d||"lazy"}"
+        ${o?`srcset="${o}"`:""}
+        ${m?`sizes="${m}"`:""}
+        src="${c}"
+    />`,u=I(e);return typeof window>"u"?`<blur-hash ${u}>
+            ${a}
+        </blur-hash>`:a}i(O,"html");var N=class e extends w.create("blur-hash"){static{i(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:n,src:l}=t,h=$(n,r,s),d=this.querySelector("canvas"),o=d.getContext("2d"),m=o.createImageData(r,s);m.data.set(h),o.putImageData(m,0,0),this.setAttribute("src",l),this.setAttribute("placeholder",n);let c=this.querySelector("img");t.srcset&&c.setAttribute("srcset",t.srcset),t.sizes&&c.setAttribute("sizes",t.sizes),c.addEventListener("load",()=>{d.style.display="none",c.classList.remove("blurry"),c.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 n=$(s,t,r),l=this.querySelector("canvas"),h=l.getContext("2d"),d=h.createImageData(t,r);d.data.set(n),h.putImageData(d,0,0);let o=this.querySelector("img");o.addEventListener("load",()=>{l.style.display="none",o.classList.remove("blurry"),o.classList.add("sharp")})}static html(t){return O(t)}render(){let t=this.getAttribute("srcset"),r=this.getAttribute("width"),s=this.getAttribute("height"),n=this.getAttribute("time"),l=this.classList.toString(),h=this.getAttribute("placeholder");this.time=n?parseInt(n):800;let d=this.getAttribute("src"),o=this.getAttribute("alt");if(!h)throw new Error("not placeholder");if(!r||!s)throw new Error("not width or not height");if(!d)throw new Error("Not src");if(!o)throw new Error("Not alt");return e.html({classes:l,srcset:t,width:r,height:s,src:d,alt:o,placeholder:h})}};export{N 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/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"]
+  "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", "../node_modules/@substrate-system/util/src/queue.ts", "../node_modules/@substrate-system/util/src/to-string.ts", "../node_modules/@substrate-system/util/src/index.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", "export class Queue<T> {\n    _inProgress:Promise<T|void> = Promise.resolve()\n\n    add (createP:()=>Promise<T>):Promise<T|void> {\n        this._inProgress = this._inProgress.then(() => {\n            return createP()\n        })\n\n        return this._inProgress\n    }\n}\n", "/**\n * Transform an object into an HTML attributes string. The object should be\n * like `{ attributeName: value }`.\n *\n * @param attrs An object for the attributes.\n * @returns {string} A string suitable for use as HTML attributes.\n */\nexport function attributes (\n    attrs:Record<string, undefined|null|string|number|boolean|(string|number)[]>\n):string {\n    return Object.keys(attrs).reduce((acc, k) => {\n        const value = attrs[k]\n        if (!value) return acc\n\n        if (typeof value === 'boolean') {\n            if (value) return (acc + ` ${k}`).trim()\n            return acc\n        }\n\n        if (Array.isArray(value)) {\n            return (acc + ` ${k}=\"${value.join(' ')}\"`)\n        }\n\n        return (acc + ` ${k}=\"${value}\"`).trim()\n    }, '')\n}\n", "export * from './queue.js'\nexport * from './classes.js'\nexport * from './to-string.js'\n\n/**\n * Get attributes from an HTMLElement, and return them as a string.\n * like `key=val`.\n * @param {Attr[]} attrs An array of the attributes, where attributes are like\n *                       `{ name: 'aaa', value: 'bbb' }`\n * @returns {string} The attributes as a string like `key=val`\n */\nexport function attributesToString (attrs:Attr[]):string {\n    return attrs.map(attr => attr.name + (attr.value === '' ?\n        '' :\n        `=\"${attr.value}\"`))\n        .join(' ')\n}\n\n/**\n * Wait for `ms` milliseconds.\n *\n * @param {number} [ms]\n * @return {Promise<void>}\n */\nexport function sleep (ms?:number):Promise<void> {\n    return new Promise(resolve => {\n        if (!ms) {\n            setTimeout(resolve, 0)\n        } else {\n            setTimeout(resolve, ms)\n        }\n    })\n}\n\n/**\n * Serialize a form and return a plain object.\n * If a form control with the same name appears more than once, the\n * property will be converted to an array.\n */\nexport function parseForm (form:HTMLFormElement):Record<string, unknown> {\n    const formData = new FormData(form)\n    const object:Record<string, unknown> = {}\n\n    formData.forEach((value, key) => {\n        if (Reflect.has(object, key)) {\n            const entry = object[key]\n            if (Array.isArray(entry)) {\n                entry.push(value)\n            } else {\n                object[key] = [object[key], value]\n            }\n        } else {\n            object[key] = value\n        }\n    })\n\n    return object\n}\n\n/**\n * Return a new object of key value pairs given an array of attributes.\n *\n * @param attrs An array of attributes\n * @returns {Record<string, string|true>} An object of key value pairs, or\n * key -> true for boolean attributes\n */\nexport function attributesAsObject (attrs:Attr[]):Record<string, string|true> {\n    return attrs.reduce((acc, attr) => {\n        acc[attr.name] = attr.value || true\n        return acc\n    }, {})\n}\n\nexport function objectToString (obj:Record<string, string|true>):string {\n    return Object.keys(obj).map(k => {\n        return k + (obj[k] === true ? '' : `=\"${obj[k]}\"`)\n    }).join(' ')\n}\n\nexport default {\n    attributesToString,\n    attributesAsObject,\n    setAttributes\n}\n\nexport function setAttributes (el:HTMLElement, attrs:Record<string, string|boolean>) {\n    for (const key in attrs) {\n        const val = attrs[key]\n        if (val === false) {\n            el.removeAttribute(key)\n        } else {\n            el.setAttribute(key, (val === true ? '' : val))\n        }\n    }\n}\n", "import { attributes } from '@substrate-system/util'\nimport type { ImgAttrs } from './index.js'\n\nexport function html (attrs:ImgAttrs & { classes?:string }) {\n    const {\n        width,\n        height,\n        alt,\n        contentVisibility,\n        placeholder,\n        decoding,\n        loading,\n        srcset,\n        sizes,\n        src\n    } = attrs\n\n    if (!placeholder) throw new Error('not placeholder')\n\n    const htmlString = `<canvas\n        alt=\"${alt}\"\n        width=${width}\n        height=${height}\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        ${srcset ? `srcset=\"${srcset}\"` : ''}\n        ${sizes ? `sizes=\"${sizes}\"` : ''}\n        src=\"${src}\"\n    />`\n\n    const attributeString = attributes(attrs)\n\n    // running in node?\n    return typeof window === 'undefined' ?\n        `<blur-hash ${attributeString}>\n            ${htmlString}\n        </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 & { classes?:string }) {\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 classes = this.classList.toString()\n        const placeholder = this.getAttribute('placeholder')\n        this.time = time ? parseInt(time) : 800\n        const src = this.getAttribute('src')\n        const alt = this.getAttribute('alt')\n        if (!placeholder) throw new Error('not placeholder')\n        if (!width || !height) throw new Error('not width or not height')\n        if (!src) throw new Error('Not src')\n        if (!alt) throw new Error('Not alt')\n\n        return BlurHash.html({ classes, srcset, width, height, src, alt, placeholder })\n    }\n}\n"],
+  "mappings": "sKAAsBA,EAAf,MAAeC,UAAqB,OAAO,WAAY,OAAA,CAAAC,EAAA,qBAA9D,MAA8D,CAAAA,EAAA,KAAA,cAAA,CAAA,CAC1D,OAAO,KAAc,GACrB,KAAc,GAEd,OAAO,OAAQC,EAAoB,CAC/B,OAAO,cAAcF,CAAa,CAC9B,OAAO,KAAOE,EACd,KAAOA,EACP,QAAU,CAAC,CACf,CACJ,CAEA,OAAO,QAA4E,CAC1EC,EAAa,KAAK,IAAI,GACvB,OAAO,eAAe,OAAO,KAAK,KAAM,IAAI,CAEpD,CAaA,MAAM,yBAA0BC,EAAaC,EAAiBC,EAAiB,CAC3E,IAAMC,EAAU,KAAK,gBAAgBH,CAAI,EAAE,EACvCG,GACA,MAAMA,EAAQ,KAAK,KAAMF,EAAUC,CAAQ,EAE/C,KAAK,OAAO,CAChB,CAEA,mBAAqB,CACjB,KAAK,OAAO,CAChB,CAMA,GAAIE,EAA8B,CAC9B,OAAO,KAAK,cAAcA,CAAQ,CACtC,CAIA,IAAKA,EAAqC,CACtC,OAAO,KAAK,iBAAiBA,CAAQ,CACzC,CAQA,OAAO,MAAOC,EAAsB,CAChC,OAAOC,EAAU,KAAK,KAAMD,CAAM,CACtC,CAUA,KAAeE,EAAaC,EAIvB,CAAC,EAAW,CACb,IAAMC,EAAY,KAAK,KACjBC,EAAQ,IAAI,YAAe,GAAGD,CAAS,IAAIF,CAAI,GAAI,CACrD,QAAUC,EAAK,UAAY,OAAa,GAAOA,EAAK,QACpD,WAAaA,EAAK,aAAe,OAAa,GAAOA,EAAK,WAC1D,OAAQA,EAAK,MACjB,CAAC,EAED,OAAO,KAAK,cAAcE,CAAK,CACnC,CAKA,SAAaH,EAAaC,EAIrB,CAAC,EAAW,CACb,IAAME,EAAQ,IAAI,YAAYH,EAAM,CAChC,QAAUC,EAAK,UAAY,OAAa,GAAOA,EAAK,QACpD,WAAaA,EAAK,aAAe,OAAa,GAAOA,EAAK,WAC1D,OAAQA,EAAK,MACjB,CAAC,EAED,OAAO,KAAK,cAAcE,CAAK,CACnC,CACJ,EAEA,SAASJ,EAAWG,EAAkBJ,EAAe,CACjD,MAAO,GAAGI,CAAS,IAAIJ,CAAM,EACjC,CAFSR,EAAAS,EAAA,aAAAT,EAAAS,EAAA,WAAA,EAWF,SAASP,EAAcY,EAAuB,CACjD,OAAO,SAAS,cAAcA,CAAM,EAAE,cAAgB,OAAO,WACjE,CAFgBd,EAAAE,EAAA,gBAAAF,EAAAE,EAAA,cAAA,ECrHhB,IAAMa,EAAkB,CACtB,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,GACF,EAEaC,EAAYC,EAAAC,GAAgB,CACvC,IAAIC,EAAQ,EACZ,QAAS,EAAI,EAAG,EAAID,EAAI,OAAQ,IAAK,CACnC,IAAME,EAAIF,EAAI,CAAA,EACRG,EAAQN,EAAgB,QAAQK,CAAC,EACvCD,EAAQA,EAAQ,GAAKE,CACvB,CACA,OAAOF,CACT,EARyB,KCtFlB,IAAMG,EAAgBC,EAAAC,GAAkB,CAC7C,IAAIC,EAAID,EAAQ,IAChB,OAAIC,GAAK,OACAA,EAAI,MAEJ,KAAK,KAAKA,EAAI,MAAS,MAAO,GAAG,CAE5C,EAP6B,KAShBC,EAAgBH,EAAAC,GAAkB,CAC7C,IAAIC,EAAI,KAAK,IAAI,EAAG,KAAK,IAAI,EAAGD,CAAK,CAAC,EACtC,OAAIC,GAAK,SACA,KAAK,MAAMA,EAAI,MAAQ,IAAM,EAAG,EAEhC,KAAK,OAAO,MAAQ,KAAK,IAAIA,EAAG,iBAAO,EAAI,MAAS,IAAM,EAAG,CAExE,EAP6B,KAShBE,EAAQJ,EAAAC,GAAeA,EAAI,EAAI,GAAK,EAA5B,KAERI,EAAUL,EAAA,CAACC,EAAaC,IACnCE,EAAKH,CAAG,EAAI,KAAK,IAAI,KAAK,IAAIA,CAAG,EAAGC,CAAG,EADlB,KCpBVI,EAAN,cAA8B,KAAM,CFA3C,MEA2C,CAAAN,EAAA,UACzC,YAAY,EAAiB,CAC3B,MAAM,CAAO,EACb,KAAK,KAAO,kBACZ,KAAK,QAAU,CACjB,CACF,ECEMO,EAAoBP,EAAAC,GAAqB,CAC7C,GAAI,CAACA,GAAYA,EAAS,OAAS,EACjC,MAAM,IAAIK,EACR,mDACF,EAGF,IAAMJ,EAAWM,EAASP,EAAS,CAAA,CAAE,EAC/B,EAAO,KAAK,MAAMC,EAAW,CAAC,EAAI,EAClCO,EAAQP,EAAW,EAAK,EAE9B,GAAID,EAAS,SAAW,EAAI,EAAIQ,EAAO,EACrC,MAAM,IAAIH,EACR,uCACEL,EAAS,MAAA,qBACU,EAAI,EAAIQ,EAAO,CAAA,EACtC,CAEJ,EAlB0B,KAA1B,IAgCMC,EAAYC,EAAAC,GAAkB,CAClC,IAAMC,EAAOD,GAAS,GAChB,EAAQA,GAAS,EAAK,IACtBE,EAAOF,EAAQ,IACrB,MAAO,CAACG,EAAaF,CAAI,EAAGE,EAAa,CAAI,EAAGA,EAAaD,CAAI,CAAC,CACpE,EALkB,KAOZE,EAAWL,EAAA,CAACC,EAAeC,IAAyB,CACxD,IAAM,EAAS,KAAK,MAAMD,EAAS,GAAQ,EACrCE,EAAS,KAAK,MAAMF,EAAQ,EAAE,EAAI,GAClCK,EAASL,EAAQ,GAQvB,MANY,CACVM,GAAS,EAAS,GAAK,EAAG,CAAG,EAAIL,EACjCK,GAASJ,EAAS,GAAK,EAAG,CAAG,EAAID,EACjCK,GAASD,EAAS,GAAK,EAAG,CAAG,EAAIJ,CACnC,CAGF,EAZiB,KAcXM,EAASR,EAAA,CACbC,EACAC,EACA,EACAC,IACG,CACHM,EAAiBR,CAAQ,EAEzBE,EAAQA,EAAQ,EAEhB,IAAMG,EAAWI,EAAST,EAAS,CAAA,CAAE,EAC/BU,EAAO,KAAK,MAAML,EAAW,CAAC,EAAI,EAClCM,EAAQN,EAAW,EAAK,EAGxBO,GADwBH,EAAST,EAAS,CAAA,CAAE,EACJ,GAAK,IAE7Ca,EAAS,IAAI,MAAMF,EAAOD,CAAI,EAEpC,QAASI,EAAI,EAAGA,EAAID,EAAO,OAAQC,IACjC,GAAIA,IAAM,EAAG,CACX,IAAMC,EAAQN,EAAST,EAAS,UAAU,EAAG,CAAC,CAAC,EAC/Ca,EAAOC,CAAA,EAAKhB,EAASiB,CAAK,CAC5B,KAAO,CACL,IAAMA,EAAQN,EAAST,EAAS,UAAU,EAAIc,EAAI,EAAG,EAAIA,EAAI,CAAC,CAAC,EAC/DD,EAAOC,CAAA,EAAKV,EAASW,EAAOH,EAAeV,CAAK,CAClD,CAGF,IAAMc,EAAcf,EAAQ,EACtBgB,EAAS,IAAI,kBAAkBD,EAAc,CAAM,EAEzD,QAASF,EAAI,EAAGA,EAAI,EAAQA,IAC1B,QAASC,EAAI,EAAGA,EAAId,EAAOc,IAAK,CAC9B,IAAIG,EAAI,EACJC,EAAI,EACJC,EAAI,EAER,QAASC,EAAI,EAAGA,EAAIX,EAAMW,IACxB,QAASC,EAAI,EAAGA,EAAIX,EAAMW,IAAK,CAC7B,IAAMC,EACJ,KAAK,IAAK,KAAK,GAAKR,EAAIO,EAAKrB,CAAK,EAClC,KAAK,IAAK,KAAK,GAAKa,EAAIO,EAAK,CAAM,EACjCG,EAAQX,EAAOS,EAAID,EAAIV,CAAA,EAC3BO,GAAKM,EAAM,CAAA,EAAKD,EAChBJ,GAAKK,EAAM,CAAA,EAAKD,EAChBH,GAAKI,EAAM,CAAA,EAAKD,CAClB,CAGF,IAAIE,EAAOC,EAAaR,CAAC,EACrBS,EAAOD,EAAaP,CAAC,EACrBS,EAAOF,EAAaN,CAAC,EAEzBH,EAAO,EAAIF,EAAI,EAAID,EAAIE,CAAA,EAAeS,EACtCR,EAAO,EAAIF,EAAI,EAAID,EAAIE,CAAA,EAAeW,EACtCV,EAAO,EAAIF,EAAI,EAAID,EAAIE,CAAA,EAAeY,EACtCX,EAAO,EAAIF,EAAI,EAAID,EAAIE,CAAA,EAAe,GACxC,CAEF,OAAOC,CACT,EA7De,KA+DRY,EAAQtB,yFE5HFuB,EAAN,KAAe,OAAA,CAAAC,EAAA,cAAtB,MAAsB,CAAAA,EAAA,KAAA,OAAA,CAAA,CAClB,YAA8B,QAAQ,QAAQ,EAE9C,IAAKC,EAAwC,CACzC,YAAK,YAAc,KAAK,YAAY,KAAK,IAC9BA,EAAQ,CAClB,EAEM,KAAK,WAChB,CACJ,yFCHO,SAASC,EACZC,EACK,CACL,OAAO,OAAO,KAAKA,CAAK,EAAE,OAAO,CAACC,EAAKC,IAAM,CACzC,IAAMC,EAAQH,EAAME,CAAC,EACrB,OAAKC,EAED,OAAOA,GAAU,UACbA,GAAeF,EAAM,IAAIC,CAAC,IAAI,KAAK,EAChCD,EAGP,MAAM,QAAQE,CAAK,EACXF,EAAM,IAAIC,CAAC,KAAKC,EAAM,KAAK,GAAG,CAAC,KAGnCF,EAAM,IAAIC,CAAC,KAAKC,CAAK,KAAK,KAAK,EAXpBF,CAYvB,EAAG,EAAE,CACT,CAlBgBG,EAAAL,EAAA,cAAAK,EAAAL,EAAA,YAAA,yFCIT,SAASM,EAAoBC,EAAqB,CACrD,OAAOA,EAAM,IAAIC,GAAQA,EAAK,MAAQA,EAAK,QAAU,GACjD,GACA,KAAKA,EAAK,KAAK,IAAI,EAClB,KAAK,GAAG,CACjB,CALgBC,EAAAH,EAAA,sBAAAG,EAAAH,EAAA,oBAAA,EAaT,SAASI,EAAOC,EAA0B,CAC7C,OAAO,IAAI,QAAQC,GAAW,CACrBD,EAGD,WAAWC,EAASD,CAAE,EAFtB,WAAWC,EAAS,CAAC,CAI7B,CAAC,CACL,CARgBH,EAAAC,EAAA,SAAAD,EAAAC,EAAA,OAAA,EAeT,SAASG,GAAWC,EAA8C,CACrE,IAAMC,EAAW,IAAI,SAASD,CAAI,EAC5BE,EAAiC,CAAC,EAExC,OAAAD,EAAS,QAAQ,CAACE,EAAOC,IAAQ,CAC7B,GAAI,QAAQ,IAAIF,EAAQE,CAAG,EAAG,CAC1B,IAAMC,EAAQH,EAAOE,CAAG,EACpB,MAAM,QAAQC,CAAK,EACnBA,EAAM,KAAKF,CAAK,EAEhBD,EAAOE,CAAG,EAAI,CAACF,EAAOE,CAAG,EAAGD,CAAK,CAEzC,MACID,EAAOE,CAAG,EAAID,CAEtB,CAAC,EAEMD,CACX,CAlBgBP,EAAAI,GAAA,aAAAJ,EAAAI,GAAA,WAAA,EA2BT,SAASO,GAAoBb,EAA0C,CAC1E,OAAOA,EAAM,OAAO,CAACc,EAAKb,KACtBa,EAAIb,EAAK,IAAI,EAAIA,EAAK,OAAS,GACxBa,GACR,CAAC,CAAC,CACT,CALgBZ,EAAAW,GAAA,sBAAAX,EAAAW,GAAA,oBAAA,EAOT,SAASE,GAAgBC,EAAwC,CACpE,OAAO,OAAO,KAAKA,CAAG,EAAE,IAAIC,GACjBA,GAAKD,EAAIC,CAAC,IAAM,GAAO,GAAK,KAAKD,EAAIC,CAAC,CAAC,IACjD,EAAE,KAAK,GAAG,CACf,CAJgBf,EAAAa,GAAA,kBAAAb,EAAAa,GAAA,gBAAA,EAYT,SAASG,GAAeC,EAAgBC,EAAsC,CACjF,QAAWC,KAAOD,EAAO,CACrB,IAAME,EAAMF,EAAMC,CAAG,EACjBC,IAAQ,GACRH,EAAG,gBAAgBE,CAAG,EAEtBF,EAAG,aAAaE,EAAMC,IAAQ,GAAO,GAAKA,CAAI,CAEtD,CACJ,CATgBC,EAAAL,GAAA,iBAAAK,EAAAL,GAAA,eAAA,EClFT,SAASM,EAAMC,EAAsC,CACxD,GAAM,CACF,MAAAC,EACA,OAAAC,EACA,IAAAC,EACA,kBAAAC,EACA,YAAAC,EACA,SAAAC,EACA,QAAAC,EACA,OAAAC,EACA,MAAAC,EACA,IAAAC,CACJ,EAAIV,EAEJ,GAAI,CAACK,EAAa,MAAM,IAAI,MAAM,iBAAiB,EAEnD,IAAMM,EAAa;AAAA,eACRR,CAAG;AAAA,gBACFF,CAAK;AAAA,iBACJC,CAAM;AAAA;AAAA,gBAEPD,CAAK;AAAA,iBACJC,CAAM;AAAA;AAAA;AAAA;AAAA,eAIRC,CAAG;AAAA,8BACYC,GAAqB,MAAM;AAAA,oBACrCE,GAAY,OAAO;AAAA,mBACpBC,GAAW,MAAM;AAAA,UAC1BC,EAAS,WAAWA,CAAM,IAAM,EAAE;AAAA,UAClCC,EAAQ,UAAUA,CAAK,IAAM,EAAE;AAAA,eAC1BC,CAAG;AAAA,QAGRE,EAAkBC,EAAWb,CAAK,EAGxC,OAAO,OAAO,OAAW,IACrB,cAAcY,CAAe;AAAA,cACvBD,CAAU;AAAA,sBAEhBA,CACR,CA3CgBG,EAAAf,EAAA,QCsBT,IAAMgB,EAAN,MAAMC,UAAiBC,EAAa,OAAO,WAAW,CAAE,CAzB/D,MAyB+D,CAAAC,EAAA,iBAC3D,KAEA,aAAe,CACX,MAAM,EACN,IAAMC,EAAI,KAAK,aAAa,OAAO,EAC7BC,EAAI,KAAK,aAAa,QAAQ,EAC9BC,EAAO,KAAK,aAAa,MAAM,EACrC,KAAK,KAAOA,EAAO,SAASA,CAAI,EAAI,IAEpC,KAAK,MAAM,MAAQ,GAAKF,EACxB,KAAK,MAAM,OAAS,GAAKC,EAEzB,SAAS,KAAK,MAAM,YAAY,mBAC5BC,EAAO,KAAO,SAASA,CAAI,EAAI,IAAO,KAAO,MAAM,CAC3D,CAMA,MAAOC,EAGE,CACDA,EAAM,QAAO,KAAK,MAAM,MAAQ,GAAKA,EAAM,OAC3CA,EAAM,SAAQ,KAAK,MAAM,OAAS,GAAKA,EAAM,QAEjD,IAAMC,EAASD,EAAM,MAChB,OAAOA,EAAM,OAAU,SAAW,SAASA,EAAM,KAAK,EAAIA,EAAM,MACjE,SAAS,KAAK,MAAM,KAAK,EACvBE,EAAUF,EAAM,OACjB,OAAOA,EAAM,QAAW,SAAW,SAASA,EAAM,MAAM,EAAIA,EAAM,OACnE,SAAS,KAAK,MAAM,MAAM,EAE9B,KAAK,UAAYN,EAAS,KAAK,OAAO,OAAOM,EAAO,CAAE,MAAAC,EAAO,OAAAC,CAAO,CAAC,CAAC,EAEtE,GAAM,CAAE,YAAAC,EAAa,IAAKC,CAAO,EAAIJ,EAE/BK,EAASC,EAAOH,EAAaF,EAAOC,CAAM,EAC1CK,EAAS,KAAK,cAAc,QAAQ,EACpCC,EAAMD,EAAO,WAAW,IAAI,EAC5BE,EAAYD,EAAI,gBAAgBP,EAAOC,CAAM,EACnDO,EAAU,KAAK,IAAIJ,CAAM,EACzBG,EAAI,aAAaC,EAAW,EAAG,CAAC,EAEhC,KAAK,aAAa,MAAOL,CAAM,EAC/B,KAAK,aAAa,cAAeD,CAAW,EAE5C,IAAMO,EAAM,KAAK,cAAc,KAAK,EAChCV,EAAM,QAAQU,EAAI,aAAa,SAAUV,EAAM,MAAM,EACrDA,EAAM,OAAOU,EAAI,aAAa,QAASV,EAAM,KAAK,EAEtDU,EAAI,iBAAiB,OAAQ,IAAM,CAC/BH,EAAO,MAAM,QAAU,OACvBG,EAAI,UAAU,OAAO,QAAQ,EAC7BA,EAAI,UAAU,IAAI,OAAO,CAC7B,CAAC,CACL,CAEA,mBAAqB,CACjB,IAAMT,EAAQ,SAAS,KAAK,aAAa,OAAO,GAAK,EAAE,EACjDC,EAAS,SAAS,KAAK,aAAa,QAAQ,GAAK,EAAE,EACnDC,EAAc,KAAK,aAAa,aAAa,EACnD,GAAI,CAACA,GAAe,CAACF,GAAS,CAACC,EAC3B,MAAM,IAAI,MAAM,oBAAoB,EAInC,KAAK,YACN,KAAK,UAAY,KAAK,OAAO,GAGjC,IAAMG,EAASC,EAAOH,EAAaF,EAAOC,CAAM,EAC1CK,EAAS,KAAK,cAAc,QAAQ,EACpCC,EAAMD,EAAO,WAAW,IAAI,EAC5BE,EAAYD,EAAI,gBAAgBP,EAAOC,CAAM,EACnDO,EAAU,KAAK,IAAIJ,CAAM,EACzBG,EAAI,aAAaC,EAAW,EAAG,CAAC,EAEhC,IAAMC,EAAM,KAAK,cAAc,KAAK,EACpCA,EAAI,iBAAiB,OAAQ,IAAM,CAC/BH,EAAO,MAAM,QAAU,OACvBG,EAAI,UAAU,OAAO,QAAQ,EAC7BA,EAAI,UAAU,IAAI,OAAO,CAC7B,CAAC,CACL,CAEA,OAAO,KAAMV,EAAsC,CAC/C,OAAOW,EAAKX,CAAK,CACrB,CAKA,QAAiB,CACb,IAAMY,EAAS,KAAK,aAAa,QAAQ,EACnCX,EAAQ,KAAK,aAAa,OAAO,EACjCC,EAAS,KAAK,aAAa,QAAQ,EACnCH,EAAO,KAAK,aAAa,MAAM,EAC/Bc,EAAU,KAAK,UAAU,SAAS,EAClCV,EAAc,KAAK,aAAa,aAAa,EACnD,KAAK,KAAOJ,EAAO,SAASA,CAAI,EAAI,IACpC,IAAMe,EAAM,KAAK,aAAa,KAAK,EAC7BC,EAAM,KAAK,aAAa,KAAK,EACnC,GAAI,CAACZ,EAAa,MAAM,IAAI,MAAM,iBAAiB,EACnD,GAAI,CAACF,GAAS,CAACC,EAAQ,MAAM,IAAI,MAAM,yBAAyB,EAChE,GAAI,CAACY,EAAK,MAAM,IAAI,MAAM,SAAS,EACnC,GAAI,CAACC,EAAK,MAAM,IAAI,MAAM,SAAS,EAEnC,OAAOrB,EAAS,KAAK,CAAE,QAAAmB,EAAS,OAAAD,EAAQ,MAAAX,EAAO,OAAAC,EAAQ,IAAAY,EAAK,IAAAC,EAAK,YAAAZ,CAAY,CAAC,CAClF,CACJ",
+  "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", "U", "C", "x", "m", "b", "i", "u", "o", "a", "c", "s", "y", "B", "R", "w", "P", "G", "T", "V", "h", "I", "E", "j", "Queue", "__name", "createP", "attributes", "attrs", "acc", "k", "value", "__name", "attributesToString", "attrs", "attr", "__name", "sleep", "ms", "resolve", "parseForm", "form", "formData", "object", "value", "key", "entry", "attributesAsObject", "acc", "objectToString", "obj", "k", "setAttributes", "el", "attrs", "key", "val", "__name", "html", "attrs", "width", "height", "alt", "contentVisibility", "placeholder", "decoding", "loading", "srcset", "sizes", "src", "htmlString", "attributeString", "attributes", "__name", "BlurHash", "_BlurHash", "WebComponent", "__name", "w", "h", "time", "attrs", "width", "height", "placeholder", "newSrc", "pixels", "j", "canvas", "ctx", "imageData", "img", "html", "srcset", "classes", "src", "alt"]
 }

package/dist/meta.json

@@ -1,12 +1,12 @@
 {
   "inputs": {
     "src/index.ts": {
-      "bytes": 4627,
+      "bytes": 4708,
       "imports": [],
       "format": "esm"
     },
     "src/ssr.ts": {
-      "bytes": 856,
+      "bytes": 1131,
       "imports": [],
       "format": "esm"
     }
@@ -16,7 +16,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 7460
+      "bytes": 7578
     },
     "dist/index.js": {
       "imports": [
@@ -42,29 +42,35 @@
       "entryPoint": "src/index.ts",
       "inputs": {
         "src/index.ts": {
-          "bytesInOutput": 3640
+          "bytesInOutput": 3696
         }
       },
-      "bytes": 3826
+      "bytes": 3882
     },
     "dist/ssr.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 1462
+      "bytes": 1911
     },
     "dist/ssr.js": {
-      "imports": [],
+      "imports": [
+        {
+          "path": "@substrate-system/util",
+          "kind": "import-statement",
+          "external": true
+        }
+      ],
       "exports": [
         "html"
       ],
       "entryPoint": "src/ssr.ts",
       "inputs": {
         "src/ssr.ts": {
-          "bytesInOutput": 734
+          "bytesInOutput": 980
         }
       },
-      "bytes": 914
+      "bytes": 1160
     }
   }
 }

package/dist/ssr.cjs

@@ -22,19 +22,25 @@ __export(ssr_exports, {
   html: () => html
 });
 module.exports = __toCommonJS(ssr_exports);
+var import_util = require("@substrate-system/util");
 function html(attrs) {
   const {
     width,
     height,
     alt,
     contentVisibility,
+    placeholder,
     decoding,
     loading,
     srcset,
     sizes,
     src
   } = attrs;
+  if (!placeholder) throw new Error("not placeholder");
   const htmlString = `<canvas
+        alt="${alt}"
+        width=${width}
+        height=${height}
         class="blurry"
         width=${width}
         height=${height}
@@ -45,12 +51,14 @@ function html(attrs) {
         content-visibility="${contentVisibility || "auto"}"
         decoding="${decoding || "async"}"
         loading="${loading || "lazy"}"
-        class="image-element blurry"
         ${srcset ? `srcset="${srcset}"` : ""}
-        ${sizes ? `sizes=${sizes}` : ""}
+        ${sizes ? `sizes="${sizes}"` : ""}
         src="${src}"
     />`;
-  return typeof window === "undefined" ? `<blur-hash>${htmlString}</blur-hash>` : htmlString;
+  const attributeString = (0, import_util.attributes)(attrs);
+  return typeof window === "undefined" ? `<blur-hash ${attributeString}>
+            ${htmlString}
+        </blur-hash>` : htmlString;
 }
 __name(html, "html");
 //# sourceMappingURL=ssr.cjs.map

package/dist/ssr.cjs.map

@@ -1,7 +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;",
+  "sourcesContent": ["import { attributes } from '@substrate-system/util'\nimport type { ImgAttrs } from './index.js'\n\nexport function html (attrs:ImgAttrs & { classes?:string }) {\n    const {\n        width,\n        height,\n        alt,\n        contentVisibility,\n        placeholder,\n        decoding,\n        loading,\n        srcset,\n        sizes,\n        src\n    } = attrs\n\n    if (!placeholder) throw new Error('not placeholder')\n\n    const htmlString = `<canvas\n        alt=\"${alt}\"\n        width=${width}\n        height=${height}\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        ${srcset ? `srcset=\"${srcset}\"` : ''}\n        ${sizes ? `sizes=\"${sizes}\"` : ''}\n        src=\"${src}\"\n    />`\n\n    const attributeString = attributes(attrs)\n\n    // running in node?\n    return typeof window === 'undefined' ?\n        `<blur-hash ${attributeString}>\n            ${htmlString}\n        </blur-hash>` :\n        htmlString\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA2B;AAGpB,SAAS,KAAM,OAAsC;AACxD,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,IAAI;AAEJ,MAAI,CAAC,YAAa,OAAM,IAAI,MAAM,iBAAiB;AAEnD,QAAM,aAAa;AAAA,eACR,GAAG;AAAA,gBACF,KAAK;AAAA,iBACJ,MAAM;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,UAC1B,SAAS,WAAW,MAAM,MAAM,EAAE;AAAA,UAClC,QAAQ,UAAU,KAAK,MAAM,EAAE;AAAA,eAC1B,GAAG;AAAA;AAGd,QAAM,sBAAkB,wBAAW,KAAK;AAGxC,SAAO,OAAO,WAAW,cACrB,cAAc,eAAe;AAAA,cACvB,UAAU;AAAA,wBAEhB;AACR;AA3CgB;",
   "names": []
 }

package/dist/ssr.d.ts

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

package/dist/ssr.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"ssr.d.ts","sourceRoot":"","sources":["../src/ssr.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAE1C,wBAAgB,IAAI,CAAE,KAAK,EAAC,QAAQ,GAAG;IAAE,OAAO,CAAC,EAAC,MAAM,CAAA;CAAE,UA2CzD"}

package/dist/ssr.js

@@ -1,18 +1,24 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { attributes } from "@substrate-system/util";
 function html(attrs) {
   const {
     width,
     height,
     alt,
     contentVisibility,
+    placeholder,
     decoding,
     loading,
     srcset,
     sizes,
     src
   } = attrs;
+  if (!placeholder) throw new Error("not placeholder");
   const htmlString = `<canvas
+        alt="${alt}"
+        width=${width}
+        height=${height}
         class="blurry"
         width=${width}
         height=${height}
@@ -23,12 +29,14 @@ function html(attrs) {
         content-visibility="${contentVisibility || "auto"}"
         decoding="${decoding || "async"}"
         loading="${loading || "lazy"}"
-        class="image-element blurry"
         ${srcset ? `srcset="${srcset}"` : ""}
-        ${sizes ? `sizes=${sizes}` : ""}
+        ${sizes ? `sizes="${sizes}"` : ""}
         src="${src}"
     />`;
-  return typeof window === "undefined" ? `<blur-hash>${htmlString}</blur-hash>` : htmlString;
+  const attributeString = attributes(attrs);
+  return typeof window === "undefined" ? `<blur-hash ${attributeString}>
+            ${htmlString}
+        </blur-hash>` : htmlString;
 }
 __name(html, "html");
 export {

package/dist/ssr.js.map

@@ -1,7 +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;",
+  "sourcesContent": ["import { attributes } from '@substrate-system/util'\nimport type { ImgAttrs } from './index.js'\n\nexport function html (attrs:ImgAttrs & { classes?:string }) {\n    const {\n        width,\n        height,\n        alt,\n        contentVisibility,\n        placeholder,\n        decoding,\n        loading,\n        srcset,\n        sizes,\n        src\n    } = attrs\n\n    if (!placeholder) throw new Error('not placeholder')\n\n    const htmlString = `<canvas\n        alt=\"${alt}\"\n        width=${width}\n        height=${height}\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        ${srcset ? `srcset=\"${srcset}\"` : ''}\n        ${sizes ? `sizes=\"${sizes}\"` : ''}\n        src=\"${src}\"\n    />`\n\n    const attributeString = attributes(attrs)\n\n    // running in node?\n    return typeof window === 'undefined' ?\n        `<blur-hash ${attributeString}>\n            ${htmlString}\n        </blur-hash>` :\n        htmlString\n}\n"],
+  "mappings": ";;AAAA,SAAS,kBAAkB;AAGpB,SAAS,KAAM,OAAsC;AACxD,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,IAAI;AAEJ,MAAI,CAAC,YAAa,OAAM,IAAI,MAAM,iBAAiB;AAEnD,QAAM,aAAa;AAAA,eACR,GAAG;AAAA,gBACF,KAAK;AAAA,iBACJ,MAAM;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,UAC1B,SAAS,WAAW,MAAM,MAAM,EAAE;AAAA,UAClC,QAAQ,UAAU,KAAK,MAAM,EAAE;AAAA,eAC1B,GAAG;AAAA;AAGd,QAAM,kBAAkB,WAAW,KAAK;AAGxC,SAAO,OAAO,WAAW,cACrB,cAAc,eAAe;AAAA,cACvB,UAAU;AAAA,wBAEhB;AACR;AA3CgB;",
   "names": []
 }

package/dist/ssr.min.js

@@ -1,17 +1,21 @@
-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
+var g=Object.defineProperty;var i=(t,e)=>g(t,"name",{value:e,configurable:!0});var $=Object.defineProperty,_=i((t,e)=>$(t,"name",{value:e,configurable:!0}),"__name"),m=class{static{i(this,"Queue")}static{_(this,"Queue")}_inProgress=Promise.resolve();add(e){return this._inProgress=this._inProgress.then(()=>e()),this._inProgress}};var y=Object.defineProperty,v=i((t,e)=>y(t,"name",{value:e,configurable:!0}),"__name");function u(t){return Object.keys(t).reduce((e,r)=>{let n=t[r];return n?typeof n=="boolean"?n?(e+` ${r}`).trim():e:Array.isArray(n)?e+` ${r}="${n.join(" ")}"`:(e+` ${r}="${n}"`).trim():e},"")}i(u,"attributes");v(u,"attributes");var j=Object.defineProperty,o=i((t,e)=>j(t,"name",{value:e,configurable:!0}),"__name");function P(t){return t.map(e=>e.name+(e.value===""?"":`="${e.value}"`)).join(" ")}i(P,"attributesToString");o(P,"attributesToString");function A(t){return new Promise(e=>{t?setTimeout(e,t):setTimeout(e,0)})}i(A,"sleep");o(A,"sleep");function w(t){let e=new FormData(t),r={};return e.forEach((n,s)=>{if(Reflect.has(r,s)){let a=r[s];Array.isArray(a)?a.push(n):r[s]=[r[s],n]}else r[s]=n}),r}i(w,"parseForm");o(w,"parseForm");function x(t){return t.reduce((e,r)=>(e[r.name]=r.value||!0,e),{})}i(x,"attributesAsObject");o(x,"attributesAsObject");function O(t){return Object.keys(t).map(e=>e+(t[e]===!0?"":`="${t[e]}"`)).join(" ")}i(O,"objectToString");o(O,"objectToString");function S(t,e){for(let r in e){let n=e[r];n===!1?t.removeAttribute(r):t.setAttribute(r,n===!0?"":n)}}i(S,"setAttributes");o(S,"setAttributes");function J(t){let{width:e,height:r,alt:n,contentVisibility:s,placeholder:a,decoding:b,loading:p,srcset:c,sizes:f,src:d}=t;if(!a)throw new Error("not placeholder");let l=`<canvas
+        alt="${n}"
+        width=${e}
+        height=${r}
         class="blurry"
-        width=${s}
-        height=${l}
+        width=${e}
+        height=${r}
     ></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};
+        alt="${n}"
+        content-visibility="${s||"auto"}"
+        decoding="${b||"async"}"
+        loading="${p||"lazy"}"
+        ${c?`srcset="${c}"`:""}
+        ${f?`sizes="${f}"`:""}
+        src="${d}"
+    />`,h=u(t);return typeof window>"u"?`<blur-hash ${h}>
+            ${l}
+        </blur-hash>`:l}i(J,"html");export{J as html};
 //# sourceMappingURL=ssr.min.js.map

package/dist/ssr.min.js.map

@@ -1,7 +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"]
+  "sources": ["../node_modules/@substrate-system/util/src/queue.ts", "../node_modules/@substrate-system/util/src/to-string.ts", "../node_modules/@substrate-system/util/src/index.ts", "../src/ssr.ts"],
+  "sourcesContent": ["export class Queue<T> {\n    _inProgress:Promise<T|void> = Promise.resolve()\n\n    add (createP:()=>Promise<T>):Promise<T|void> {\n        this._inProgress = this._inProgress.then(() => {\n            return createP()\n        })\n\n        return this._inProgress\n    }\n}\n", "/**\n * Transform an object into an HTML attributes string. The object should be\n * like `{ attributeName: value }`.\n *\n * @param attrs An object for the attributes.\n * @returns {string} A string suitable for use as HTML attributes.\n */\nexport function attributes (\n    attrs:Record<string, undefined|null|string|number|boolean|(string|number)[]>\n):string {\n    return Object.keys(attrs).reduce((acc, k) => {\n        const value = attrs[k]\n        if (!value) return acc\n\n        if (typeof value === 'boolean') {\n            if (value) return (acc + ` ${k}`).trim()\n            return acc\n        }\n\n        if (Array.isArray(value)) {\n            return (acc + ` ${k}=\"${value.join(' ')}\"`)\n        }\n\n        return (acc + ` ${k}=\"${value}\"`).trim()\n    }, '')\n}\n", "export * from './queue.js'\nexport * from './classes.js'\nexport * from './to-string.js'\n\n/**\n * Get attributes from an HTMLElement, and return them as a string.\n * like `key=val`.\n * @param {Attr[]} attrs An array of the attributes, where attributes are like\n *                       `{ name: 'aaa', value: 'bbb' }`\n * @returns {string} The attributes as a string like `key=val`\n */\nexport function attributesToString (attrs:Attr[]):string {\n    return attrs.map(attr => attr.name + (attr.value === '' ?\n        '' :\n        `=\"${attr.value}\"`))\n        .join(' ')\n}\n\n/**\n * Wait for `ms` milliseconds.\n *\n * @param {number} [ms]\n * @return {Promise<void>}\n */\nexport function sleep (ms?:number):Promise<void> {\n    return new Promise(resolve => {\n        if (!ms) {\n            setTimeout(resolve, 0)\n        } else {\n            setTimeout(resolve, ms)\n        }\n    })\n}\n\n/**\n * Serialize a form and return a plain object.\n * If a form control with the same name appears more than once, the\n * property will be converted to an array.\n */\nexport function parseForm (form:HTMLFormElement):Record<string, unknown> {\n    const formData = new FormData(form)\n    const object:Record<string, unknown> = {}\n\n    formData.forEach((value, key) => {\n        if (Reflect.has(object, key)) {\n            const entry = object[key]\n            if (Array.isArray(entry)) {\n                entry.push(value)\n            } else {\n                object[key] = [object[key], value]\n            }\n        } else {\n            object[key] = value\n        }\n    })\n\n    return object\n}\n\n/**\n * Return a new object of key value pairs given an array of attributes.\n *\n * @param attrs An array of attributes\n * @returns {Record<string, string|true>} An object of key value pairs, or\n * key -> true for boolean attributes\n */\nexport function attributesAsObject (attrs:Attr[]):Record<string, string|true> {\n    return attrs.reduce((acc, attr) => {\n        acc[attr.name] = attr.value || true\n        return acc\n    }, {})\n}\n\nexport function objectToString (obj:Record<string, string|true>):string {\n    return Object.keys(obj).map(k => {\n        return k + (obj[k] === true ? '' : `=\"${obj[k]}\"`)\n    }).join(' ')\n}\n\nexport default {\n    attributesToString,\n    attributesAsObject,\n    setAttributes\n}\n\nexport function setAttributes (el:HTMLElement, attrs:Record<string, string|boolean>) {\n    for (const key in attrs) {\n        const val = attrs[key]\n        if (val === false) {\n            el.removeAttribute(key)\n        } else {\n            el.setAttribute(key, (val === true ? '' : val))\n        }\n    }\n}\n", "import { attributes } from '@substrate-system/util'\nimport type { ImgAttrs } from './index.js'\n\nexport function html (attrs:ImgAttrs & { classes?:string }) {\n    const {\n        width,\n        height,\n        alt,\n        contentVisibility,\n        placeholder,\n        decoding,\n        loading,\n        srcset,\n        sizes,\n        src\n    } = attrs\n\n    if (!placeholder) throw new Error('not placeholder')\n\n    const htmlString = `<canvas\n        alt=\"${alt}\"\n        width=${width}\n        height=${height}\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        ${srcset ? `srcset=\"${srcset}\"` : ''}\n        ${sizes ? `sizes=\"${sizes}\"` : ''}\n        src=\"${src}\"\n    />`\n\n    const attributeString = attributes(attrs)\n\n    // running in node?\n    return typeof window === 'undefined' ?\n        `<blur-hash ${attributeString}>\n            ${htmlString}\n        </blur-hash>` :\n        htmlString\n}\n"],
+  "mappings": "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",
+  "names": ["Queue", "__name", "createP", "attributes", "attrs", "acc", "k", "value", "__name", "attributesToString", "attrs", "attr", "__name", "sleep", "ms", "resolve", "parseForm", "form", "formData", "object", "value", "key", "entry", "attributesAsObject", "acc", "objectToString", "obj", "k", "setAttributes", "el", "attrs", "key", "val", "__name", "html", "attrs", "width", "height", "alt", "contentVisibility", "placeholder", "decoding", "loading", "srcset", "sizes", "src", "htmlString", "attributeString", "attributes", "__name"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@substrate-system/blur-hash",
-  "version": "0.0.9",
+  "version": "0.0.13",
   "type": "module",
   "description": "A blurry placeholder image web component",
   "main": "dist/index.js",
@@ -56,6 +56,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
+    "@substrate-system/util": "^0.1.31",
     "@substrate-system/web-component": "^0.0.22",
     "blurhash": "^2.0.5",
     "image-size": "^2.0.2",