@substrate-system/blur-hash 0.0.25 → 0.0.27

package/README.md

@@ -5,18 +5,21 @@
 [![Common Changelog](https://nichoth.github.io/badge/common-changelog.svg)](https://common-changelog.org)
 [![semantic versioning](https://img.shields.io/badge/semver-2.0.0-blue?logo=semver&style=flat-square)](https://semver.org/)
 [![install size](https://flat.badgen.net/packagephobia/install/@substrate-system/blur-hash?cache-control=no-cache)](https://packagephobia.com/result?p=@substrate-system/blur-hash)
-[![GZip size](https://flat.badgen.net/bundlephobia/minzip/@substrate-system/blur-hash?color=green)](https://bundlephobia.com/package/@substrate-system/blur-hash)
+[![GZip size](https://flat.badgen.net/bundlephobia/minzip/@substrate-system/blur-hash)](https://bundlephobia.com/package/@substrate-system/blur-hash)
 [![license](https://img.shields.io/badge/license-Big_Time-blue?style=flat-square)](LICENSE)
 
 
 This is the ["blur-up" image loading technique](https://css-tricks.com/the-blur-up-technique-for-loading-background-images/),
-with the [blur-hash algorithm](https://blurha.sh/), as a [web component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components).
+with the [blur-hash algorithm](https://blurha.sh/),
+as a [web component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components).
 
 [See a live demonstration](https://substrate-system.github.io/blur-hash/)
 
 > [!TIP]
 > Throttle the internet speed with the dev tools.
 
+<details><summary><h2>Contents</h2></summary>
+
 <!-- toc -->
 
 - [Install](#install)
@@ -39,6 +42,9 @@ with the [blur-hash algorithm](https://blurha.sh/), as a [web component](https:/
 
 <!-- tocstop -->
 
+</details>
+
+
 ## Install
 
 ```sh
@@ -47,7 +53,8 @@ npm i -S @substrate-system/blur-hash
 
 ## Modules
 
-This exposes ESM and common JS via [package.json `exports` field](https://nodejs.org/api/packages.html#exports).
+This exposes ESM and common JS via
+[package.json `exports` field](https://nodejs.org/api/packages.html#exports).
 
 ### ESM
 ```js
@@ -85,9 +92,9 @@ Use the tag in HTML.
         time="0.6s"
         alt="cool cat"
         placeholder="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
-        src="..."
-        width=100
-        height=100
+        src="/example/cat.png"
+        width="100"
+        height="100"
     >
     </blur-hash>
 </div>
@@ -108,18 +115,18 @@ BlurHash.define()
   placeholder="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
   width=100
   height=100
-  src="..."
+  src="/example/cat.png"
 ></blur-hash>
 ```
 
 ### Server-side rendering
-Following convention, this module exposes an `html` function at `/ssr`. It
+Following convention, this module exposes `render` function at `/html`. It
 returns a plain string of appropriate markup in Node.
 
 ```js
-import { html } from '@substrate-system/blur-hash/ssr'
+import { render } from '@substrate-system/blur-hash/html'
 
-const htmlString = html({
+const htmlString = render({
     alt: 'hello',
     width: 30,
     height: 30,

package/dist/{ssr.cjs → html.cjs}

@@ -17,14 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var ssr_exports = {};
-__export(ssr_exports, {
-  html: () => html,
-  outerHTML: () => outerHTML
+var html_exports = {};
+__export(html_exports, {
+  outerHTML: () => outerHTML,
+  render: () => render
 });
-module.exports = __toCommonJS(ssr_exports);
+module.exports = __toCommonJS(html_exports);
 var import_util = require("@substrate-system/util");
-function html(attrs) {
+function render(attrs) {
   const {
     width,
     height,
@@ -61,8 +61,8 @@ function html(attrs) {
             ${htmlString}
         </blur-hash>` : htmlString;
 }
-__name(html, "html");
+__name(render, "render");
 const outerHTML = /* @__PURE__ */ __name((attrs) => {
-  return `<blur-hash>${html(attrs)}</blur-hash>`;
+  return `<blur-hash>${render(attrs)}</blur-hash>`;
 }, "outerHTML");
-//# sourceMappingURL=ssr.cjs.map
+//# sourceMappingURL=html.cjs.map

package/dist/html.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/html.ts"],
+  "sourcesContent": ["import { attributes } from '@substrate-system/util'\nimport type { ImgAttrs } from './index.js'\n\nexport type SSRAttrs = ImgAttrs & { classes?:string }\n\nexport function render (attrs:SSRAttrs) {\n    const {\n        width,\n        height,\n        alt,\n        contentVisibility,\n        placeholder,\n        decoding,\n        loading,\n        srcset,\n        sizes,\n        src\n    } = attrs\n\n    if (!placeholder) throw new Error('not placeholder')\n\n    const 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\nexport const outerHTML = (attrs:SSRAttrs) => {\n    return `<blur-hash>${render(attrs)}</blur-hash>`\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA2B;AAKpB,SAAS,OAAQ,OAAgB;AACpC,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;AA6CT,MAAM,YAAY,wBAAC,UAAmB;AACzC,SAAO,cAAc,OAAO,KAAK,CAAC;AACtC,GAFyB;",
+  "names": []
+}

package/dist/{ssr.d.ts → html.d.ts}

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

package/dist/html.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../src/html.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAE1C,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG;IAAE,OAAO,CAAC,EAAC,MAAM,CAAA;CAAE,CAAA;AAErD,wBAAgB,MAAM,CAAE,KAAK,EAAC,QAAQ,UA2CrC;AAED,eAAO,MAAM,SAAS,UAAU,QAAQ,WAEvC,CAAA"}

package/dist/{ssr.js → html.js}

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { attributes } from "@substrate-system/util";
-function html(attrs) {
+function render(attrs) {
   const {
     width,
     height,
@@ -38,12 +38,12 @@ function html(attrs) {
             ${htmlString}
         </blur-hash>` : htmlString;
 }
-__name(html, "html");
+__name(render, "render");
 const outerHTML = /* @__PURE__ */ __name((attrs) => {
-  return `<blur-hash>${html(attrs)}</blur-hash>`;
+  return `<blur-hash>${render(attrs)}</blur-hash>`;
 }, "outerHTML");
 export {
-  html,
-  outerHTML
+  outerHTML,
+  render
 };
-//# sourceMappingURL=ssr.js.map
+//# sourceMappingURL=html.js.map

package/dist/html.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/html.ts"],
+  "sourcesContent": ["import { attributes } from '@substrate-system/util'\nimport type { ImgAttrs } from './index.js'\n\nexport type SSRAttrs = ImgAttrs & { classes?:string }\n\nexport function render (attrs:SSRAttrs) {\n    const {\n        width,\n        height,\n        alt,\n        contentVisibility,\n        placeholder,\n        decoding,\n        loading,\n        srcset,\n        sizes,\n        src\n    } = attrs\n\n    if (!placeholder) throw new Error('not placeholder')\n\n    const 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\nexport const outerHTML = (attrs:SSRAttrs) => {\n    return `<blur-hash>${render(attrs)}</blur-hash>`\n}\n"],
+  "mappings": ";;AAAA,SAAS,kBAAkB;AAKpB,SAAS,OAAQ,OAAgB;AACpC,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;AA6CT,MAAM,YAAY,wBAAC,UAAmB;AACzC,SAAO,cAAc,OAAO,KAAK,CAAC;AACtC,GAFyB;",
+  "names": []
+}

package/dist/html.min.js

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

package/dist/{ssr.min.js.map → html.min.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "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\ntype SSRAttrs = ImgAttrs & { classes?:string }\n\nexport function html (attrs:SSRAttrs) {\n    const {\n        width,\n        height,\n        alt,\n        contentVisibility,\n        placeholder,\n        decoding,\n        loading,\n        srcset,\n        sizes,\n        src\n    } = attrs\n\n    if (!placeholder) throw new Error('not placeholder')\n\n    const 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\nexport const outerHTML = (attrs:SSRAttrs) => {\n    return `<blur-hash>${html(attrs)}</blur-hash>`\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", "outerHTML"]
+  "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/html.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 type SSRAttrs = ImgAttrs & { classes?:string }\n\nexport function render (attrs:SSRAttrs) {\n    const {\n        width,\n        height,\n        alt,\n        contentVisibility,\n        placeholder,\n        decoding,\n        loading,\n        srcset,\n        sizes,\n        src\n    } = attrs\n\n    if (!placeholder) throw new Error('not placeholder')\n\n    const 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\nexport const outerHTML = (attrs:SSRAttrs) => {\n    return `<blur-hash>${render(attrs)}</blur-hash>`\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", "render", "attrs", "width", "height", "alt", "contentVisibility", "placeholder", "decoding", "loading", "srcset", "sizes", "src", "htmlString", "attributeString", "attributes", "__name", "outerHTML"]
 }

package/dist/index.cjs

@@ -24,7 +24,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 var import_web_component = require("@substrate-system/web-component");
 var import_blurhash = require("blurhash");
-var import_ssr = require("./ssr.js");
+var import_html = require("./html.js");
 class BlurHash extends import_web_component.WebComponent.create("blur-hash") {
   static {
     __name(this, "BlurHash");
@@ -98,7 +98,7 @@ class BlurHash extends import_web_component.WebComponent.create("blur-hash") {
     this.sharpen();
   }
   static html(attrs) {
-    return (0, import_ssr.html)(attrs);
+    return (0, import_html.render)(attrs);
   }
   /**
    * Use the attributes to create HTML.

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        this.sharpen()\n    }\n\n    sharpen () {\n        const img = this.qs('img')!\n        if (img.complete && img.naturalWidth > 0) {\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\n        } else {\n            img.addEventListener('load', () => {\n                img.classList.remove('blurry')\n                img.classList.add('sharp')\n            })\n        }\n    }\n\n    connectedCallback () {\n        const width = parseInt(this.getAttribute('width') ?? '')\n        const height = parseInt(this.getAttribute('height') ?? '')\n        const placeholder = this.getAttribute('placeholder')\n        if (!placeholder) throw new Error('Missing placeholder')\n        if (!width) throw new Error('Missing width')\n        if (!height) throw new Error('Missing height')\n\n        // don't render again if we dont have to\n        if (!this.innerHTML) {\n            this.innerHTML = this.render()\n        }\n\n        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.sharpen()\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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",
+  "sourcesContent": ["import { WebComponent } from '@substrate-system/web-component'\nimport { decode } from 'blurhash'\nimport { render } from './html.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        this.sharpen()\n    }\n\n    sharpen () {\n        const img = this.qs('img')!\n        if (img.complete && img.naturalWidth > 0) {\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\n        } else {\n            img.addEventListener('load', () => {\n                img.classList.remove('blurry')\n                img.classList.add('sharp')\n            })\n        }\n    }\n\n    connectedCallback () {\n        const width = parseInt(this.getAttribute('width') ?? '')\n        const height = parseInt(this.getAttribute('height') ?? '')\n        const placeholder = this.getAttribute('placeholder')\n        if (!placeholder) throw new Error('Missing placeholder')\n        if (!width) throw new Error('Missing width')\n        if (!height) throw new Error('Missing height')\n\n        // don't render again if we dont have to\n        if (!this.innerHTML) {\n            this.innerHTML = this.render()\n        }\n\n        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.sharpen()\n    }\n\n    static html (attrs:ImgAttrs & { classes?:string }) {\n        return render(attrs)\n    }\n\n    /**\n     * Use the attributes to create HTML.\n     */\n    render ():string {\n        const srcset = this.getAttribute('srcset')\n        const width = this.getAttribute('width')\n        const height = this.getAttribute('height')\n        const time = this.getAttribute('time')\n        const classes = this.classList.toString()\n        const placeholder = this.getAttribute('placeholder')\n        this.time = time ? parseInt(time) : 800\n        const src = this.getAttribute('src')\n        const alt = this.getAttribute('alt')\n        if (!placeholder) throw new Error('not placeholder')\n        if (!width || !height) throw new Error('not width or not height')\n        if (!src) throw new Error('Not src')\n        if (!alt) throw new Error('Not alt')\n\n        return BlurHash.html({ classes, srcset, width, height, src, alt, placeholder })\n    }\n}\n"],
+  "mappings": "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",
   "names": []
 }

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BA8BF,CAAZ;gJAOoB,CAAC;4FAEQ,CAAC;mJAGgB,CAAC;+FAO3C,CAAN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAgC4E,CAAC;;;;;;;;;;;;;;;;;;;;;;;uBAGsjE,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;;;;;AArHr9lB,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;IAgCR,OAAO;IAaP,iBAAiB;IAuBjB,MAAM,CAAC,IAAI,CAAE,KAAK,EAAC,QAAQ,GAAG;QAAE,OAAO,CAAC,EAAC,MAAM,CAAA;KAAE;IAIjD;;OAEG;IACH,MAAM,IAAI,MAAM;CAiBnB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;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;;;;;;;;;;;wCA8Ba,CAAC;;;;;sCAKD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BA8BC,CAAf;gJAOqB,CAAA;4FAEQ,CAAC;mJAGgB,CAAC;+FAOxC,CADR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAiCyE,CAAC;;;;;;;;;;;;;;;;;;;;;;;uBAGsjE,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;;;;;AArHh9lB,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;IAgCR,OAAO;IAaP,iBAAiB;IAuBjB,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

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { WebComponent } from "@substrate-system/web-component";
 import { decode } from "blurhash";
-import { html } from "./ssr.js";
+import { render } from "./html.js";
 class BlurHash extends WebComponent.create("blur-hash") {
   static {
     __name(this, "BlurHash");
@@ -76,7 +76,7 @@ class BlurHash extends WebComponent.create("blur-hash") {
     this.sharpen();
   }
   static html(attrs) {
-    return html(attrs);
+    return render(attrs);
   }
   /**
    * Use the attributes to create HTML.

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        this.sharpen()\n    }\n\n    sharpen () {\n        const img = this.qs('img')!\n        if (img.complete && img.naturalWidth > 0) {\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\n        } else {\n            img.addEventListener('load', () => {\n                img.classList.remove('blurry')\n                img.classList.add('sharp')\n            })\n        }\n    }\n\n    connectedCallback () {\n        const width = parseInt(this.getAttribute('width') ?? '')\n        const height = parseInt(this.getAttribute('height') ?? '')\n        const placeholder = this.getAttribute('placeholder')\n        if (!placeholder) throw new Error('Missing placeholder')\n        if (!width) throw new Error('Missing width')\n        if (!height) throw new Error('Missing height')\n\n        // don't render again if we dont have to\n        if (!this.innerHTML) {\n            this.innerHTML = this.render()\n        }\n\n        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.sharpen()\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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",
+  "sourcesContent": ["import { WebComponent } from '@substrate-system/web-component'\nimport { decode } from 'blurhash'\nimport { render } from './html.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        this.sharpen()\n    }\n\n    sharpen () {\n        const img = this.qs('img')!\n        if (img.complete && img.naturalWidth > 0) {\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\n        } else {\n            img.addEventListener('load', () => {\n                img.classList.remove('blurry')\n                img.classList.add('sharp')\n            })\n        }\n    }\n\n    connectedCallback () {\n        const width = parseInt(this.getAttribute('width') ?? '')\n        const height = parseInt(this.getAttribute('height') ?? '')\n        const placeholder = this.getAttribute('placeholder')\n        if (!placeholder) throw new Error('Missing placeholder')\n        if (!width) throw new Error('Missing width')\n        if (!height) throw new Error('Missing height')\n\n        // don't render again if we dont have to\n        if (!this.innerHTML) {\n            this.innerHTML = this.render()\n        }\n\n        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.sharpen()\n    }\n\n    static html (attrs:ImgAttrs & { classes?:string }) {\n        return render(attrs)\n    }\n\n    /**\n     * Use the attributes to create HTML.\n     */\n    render ():string {\n        const srcset = this.getAttribute('srcset')\n        const width = this.getAttribute('width')\n        const height = this.getAttribute('height')\n        const time = this.getAttribute('time')\n        const classes = this.classList.toString()\n        const placeholder = this.getAttribute('placeholder')\n        this.time = time ? parseInt(time) : 800\n        const src = this.getAttribute('src')\n        const alt = this.getAttribute('alt')\n        if (!placeholder) throw new Error('not placeholder')\n        if (!width || !height) throw new Error('not width or not height')\n        if (!src) throw new Error('Not src')\n        if (!alt) throw new Error('Not alt')\n\n        return BlurHash.html({ classes, srcset, width, height, src, alt, placeholder })\n    }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/index.min.js

@@ -17,5 +17,5 @@ var D=Object.defineProperty;var i=(e,t)=>D(e,"name",{value:t,configurable:!0});v
         src="${m}"
     />`,l=I(e);return typeof window>"u"?`<blur-hash ${l}>
             ${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:c}=t,o=$(n,r,s),h=this.querySelector("canvas").getContext("2d"),u=h.createImageData(r,s);u.data.set(o),h.putImageData(u,0,0),this.setAttribute("src",c),this.setAttribute("placeholder",n);let m=this.querySelector("img");t.srcset&&m.setAttribute("srcset",t.srcset),t.sizes&&m.setAttribute("sizes",t.sizes),this.sharpen()}sharpen(){let t=this.qs("img");t.complete&&t.naturalWidth>0?(t.classList.remove("blurry"),t.classList.add("sharp")):t.addEventListener("load",()=>{t.classList.remove("blurry"),t.classList.add("sharp")})}connectedCallback(){let t=parseInt(this.getAttribute("width")??""),r=parseInt(this.getAttribute("height")??""),s=this.getAttribute("placeholder");if(!s)throw new Error("Missing placeholder");if(!t)throw new Error("Missing width");if(!r)throw new Error("Missing height");this.innerHTML||(this.innerHTML=this.render());let n=$(s,t,r),o=this.querySelector("canvas").getContext("2d"),d=o.createImageData(t,r);d.data.set(n),o.putImageData(d,0,0),this.sharpen()}static html(t){return O(t)}render(){let t=this.getAttribute("srcset"),r=this.getAttribute("width"),s=this.getAttribute("height"),n=this.getAttribute("time"),c=this.classList.toString(),o=this.getAttribute("placeholder");this.time=n?parseInt(n):800;let d=this.getAttribute("src"),h=this.getAttribute("alt");if(!o)throw new Error("not placeholder");if(!r||!s)throw new Error("not width or not height");if(!d)throw new Error("Not src");if(!h)throw new Error("Not alt");return e.html({classes:c,srcset:t,width:r,height:s,src:d,alt:h,placeholder:o})}};export{N as BlurHash};
+        </blur-hash>`:a}i(O,"render");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:c}=t,o=$(n,r,s),h=this.querySelector("canvas").getContext("2d"),u=h.createImageData(r,s);u.data.set(o),h.putImageData(u,0,0),this.setAttribute("src",c),this.setAttribute("placeholder",n);let m=this.querySelector("img");t.srcset&&m.setAttribute("srcset",t.srcset),t.sizes&&m.setAttribute("sizes",t.sizes),this.sharpen()}sharpen(){let t=this.qs("img");t.complete&&t.naturalWidth>0?(t.classList.remove("blurry"),t.classList.add("sharp")):t.addEventListener("load",()=>{t.classList.remove("blurry"),t.classList.add("sharp")})}connectedCallback(){let t=parseInt(this.getAttribute("width")??""),r=parseInt(this.getAttribute("height")??""),s=this.getAttribute("placeholder");if(!s)throw new Error("Missing placeholder");if(!t)throw new Error("Missing width");if(!r)throw new Error("Missing height");this.innerHTML||(this.innerHTML=this.render());let n=$(s,t,r),o=this.querySelector("canvas").getContext("2d"),d=o.createImageData(t,r);d.data.set(n),o.putImageData(d,0,0),this.sharpen()}static html(t){return O(t)}render(){let t=this.getAttribute("srcset"),r=this.getAttribute("width"),s=this.getAttribute("height"),n=this.getAttribute("time"),c=this.classList.toString(),o=this.getAttribute("placeholder");this.time=n?parseInt(n):800;let d=this.getAttribute("src"),h=this.getAttribute("alt");if(!o)throw new Error("not placeholder");if(!r||!s)throw new Error("not width or not height");if(!d)throw new Error("Not src");if(!h)throw new Error("Not alt");return e.html({classes:c,srcset:t,width:r,height:s,src:d,alt:h,placeholder:o})}};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", "../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\ntype SSRAttrs = ImgAttrs & { classes?:string }\n\nexport function html (attrs:SSRAttrs) {\n    const {\n        width,\n        height,\n        alt,\n        contentVisibility,\n        placeholder,\n        decoding,\n        loading,\n        srcset,\n        sizes,\n        src\n    } = attrs\n\n    if (!placeholder) throw new Error('not placeholder')\n\n    const 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\nexport const outerHTML = (attrs:SSRAttrs) => {\n    return `<blur-hash>${html(attrs)}</blur-hash>`\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        this.sharpen()\n    }\n\n    sharpen () {\n        const img = this.qs('img')!\n        if (img.complete && img.naturalWidth > 0) {\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\n        } else {\n            img.addEventListener('load', () => {\n                img.classList.remove('blurry')\n                img.classList.add('sharp')\n            })\n        }\n    }\n\n    connectedCallback () {\n        const width = parseInt(this.getAttribute('width') ?? '')\n        const height = parseInt(this.getAttribute('height') ?? '')\n        const placeholder = this.getAttribute('placeholder')\n        if (!placeholder) throw new Error('Missing placeholder')\n        if (!width) throw new Error('Missing width')\n        if (!height) throw new Error('Missing height')\n\n        // don't render again if we dont have to\n        if (!this.innerHTML) {\n            this.innerHTML = this.render()\n        }\n\n        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.sharpen()\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": ["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", "ctx", "imageData", "img", "html", "srcset", "classes", "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/html.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 type SSRAttrs = ImgAttrs & { classes?:string }\n\nexport function render (attrs:SSRAttrs) {\n    const {\n        width,\n        height,\n        alt,\n        contentVisibility,\n        placeholder,\n        decoding,\n        loading,\n        srcset,\n        sizes,\n        src\n    } = attrs\n\n    if (!placeholder) throw new Error('not placeholder')\n\n    const 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\nexport const outerHTML = (attrs:SSRAttrs) => {\n    return `<blur-hash>${render(attrs)}</blur-hash>`\n}\n", "import { WebComponent } from '@substrate-system/web-component'\nimport { decode } from 'blurhash'\nimport { render } from './html.js'\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        this.sharpen()\n    }\n\n    sharpen () {\n        const img = this.qs('img')!\n        if (img.complete && img.naturalWidth > 0) {\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\n        } else {\n            img.addEventListener('load', () => {\n                img.classList.remove('blurry')\n                img.classList.add('sharp')\n            })\n        }\n    }\n\n    connectedCallback () {\n        const width = parseInt(this.getAttribute('width') ?? '')\n        const height = parseInt(this.getAttribute('height') ?? '')\n        const placeholder = this.getAttribute('placeholder')\n        if (!placeholder) throw new Error('Missing placeholder')\n        if (!width) throw new Error('Missing width')\n        if (!height) throw new Error('Missing height')\n\n        // don't render again if we dont have to\n        if (!this.innerHTML) {\n            this.innerHTML = this.render()\n        }\n\n        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.sharpen()\n    }\n\n    static html (attrs:ImgAttrs & { classes?:string }) {\n        return render(attrs)\n    }\n\n    /**\n     * Use the attributes to create HTML.\n     */\n    render ():string {\n        const srcset = this.getAttribute('srcset')\n        const width = this.getAttribute('width')\n        const height = this.getAttribute('height')\n        const time = this.getAttribute('time')\n        const classes = this.classList.toString()\n        const placeholder = this.getAttribute('placeholder')\n        this.time = time ? parseInt(time) : 800\n        const src = this.getAttribute('src')\n        const alt = this.getAttribute('alt')\n        if (!placeholder) throw new Error('not placeholder')\n        if (!width || !height) throw new Error('not width or not height')\n        if (!src) throw new Error('Not src')\n        if (!alt) throw new Error('Not alt')\n\n        return BlurHash.html({ classes, srcset, width, height, src, alt, placeholder })\n    }\n}\n"],
+  "mappings": "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,EChFT,SAASM,EAAQC,EAAgB,CACpC,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,UCoBT,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,EAE1CK,EADS,KAAK,cAAc,QAAQ,EACvB,WAAW,IAAI,EAC5BC,EAAYD,EAAI,gBAAgBN,EAAOC,CAAM,EACnDM,EAAU,KAAK,IAAIH,CAAM,EACzBE,EAAI,aAAaC,EAAW,EAAG,CAAC,EAEhC,KAAK,aAAa,MAAOJ,CAAM,EAC/B,KAAK,aAAa,cAAeD,CAAW,EAE5C,IAAMM,EAAM,KAAK,cAAc,KAAK,EAChCT,EAAM,QAAQS,EAAI,aAAa,SAAUT,EAAM,MAAM,EACrDA,EAAM,OAAOS,EAAI,aAAa,QAAST,EAAM,KAAK,EAEtD,KAAK,QAAQ,CACjB,CAEA,SAAW,CACP,IAAMS,EAAM,KAAK,GAAG,KAAK,EACrBA,EAAI,UAAYA,EAAI,aAAe,GACnCA,EAAI,UAAU,OAAO,QAAQ,EAC7BA,EAAI,UAAU,IAAI,OAAO,GAEzBA,EAAI,iBAAiB,OAAQ,IAAM,CAC/BA,EAAI,UAAU,OAAO,QAAQ,EAC7BA,EAAI,UAAU,IAAI,OAAO,CAC7B,CAAC,CAET,CAEA,mBAAqB,CACjB,IAAMR,EAAQ,SAAS,KAAK,aAAa,OAAO,GAAK,EAAE,EACjDC,EAAS,SAAS,KAAK,aAAa,QAAQ,GAAK,EAAE,EACnDC,EAAc,KAAK,aAAa,aAAa,EACnD,GAAI,CAACA,EAAa,MAAM,IAAI,MAAM,qBAAqB,EACvD,GAAI,CAACF,EAAO,MAAM,IAAI,MAAM,eAAe,EAC3C,GAAI,CAACC,EAAQ,MAAM,IAAI,MAAM,gBAAgB,EAGxC,KAAK,YACN,KAAK,UAAY,KAAK,OAAO,GAGjC,IAAMG,EAASC,EAAOH,EAAaF,EAAOC,CAAM,EAE1CK,EADS,KAAK,cAAc,QAAQ,EACvB,WAAW,IAAI,EAC5BC,EAAYD,EAAI,gBAAgBN,EAAOC,CAAM,EACnDM,EAAU,KAAK,IAAIH,CAAM,EACzBE,EAAI,aAAaC,EAAW,EAAG,CAAC,EAEhC,KAAK,QAAQ,CACjB,CAEA,OAAO,KAAMR,EAAsC,CAC/C,OAAOU,EAAOV,CAAK,CACvB,CAKA,QAAiB,CACb,IAAMW,EAAS,KAAK,aAAa,QAAQ,EACnCV,EAAQ,KAAK,aAAa,OAAO,EACjCC,EAAS,KAAK,aAAa,QAAQ,EACnCH,EAAO,KAAK,aAAa,MAAM,EAC/Ba,EAAU,KAAK,UAAU,SAAS,EAClCT,EAAc,KAAK,aAAa,aAAa,EACnD,KAAK,KAAOJ,EAAO,SAASA,CAAI,EAAI,IACpC,IAAMc,EAAM,KAAK,aAAa,KAAK,EAC7BC,EAAM,KAAK,aAAa,KAAK,EACnC,GAAI,CAACX,EAAa,MAAM,IAAI,MAAM,iBAAiB,EACnD,GAAI,CAACF,GAAS,CAACC,EAAQ,MAAM,IAAI,MAAM,yBAAyB,EAChE,GAAI,CAACW,EAAK,MAAM,IAAI,MAAM,SAAS,EACnC,GAAI,CAACC,EAAK,MAAM,IAAI,MAAM,SAAS,EAEnC,OAAOpB,EAAS,KAAK,CAAE,QAAAkB,EAAS,OAAAD,EAAQ,MAAAV,EAAO,OAAAC,EAAQ,IAAAW,EAAK,IAAAC,EAAK,YAAAX,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", "render", "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", "ctx", "imageData", "img", "render", "srcset", "classes", "src", "alt"]
 }

package/dist/meta.json

@@ -1,77 +1,77 @@
 {
   "inputs": {
-    "src/index.ts": {
-      "bytes": 4786,
+    "src/html.ts": {
+      "bytes": 1269,
       "imports": [],
       "format": "esm"
     },
-    "src/ssr.ts": {
-      "bytes": 1258,
+    "src/index.ts": {
+      "bytes": 4791,
       "imports": [],
       "format": "esm"
     }
   },
   "outputs": {
-    "dist/index.js.map": {
+    "dist/html.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 7741
+      "bytes": 2127
     },
-    "dist/index.js": {
+    "dist/html.js": {
       "imports": [
         {
-          "path": "@substrate-system/web-component",
-          "kind": "import-statement",
-          "external": true
-        },
-        {
-          "path": "blurhash",
-          "kind": "import-statement",
-          "external": true
-        },
-        {
-          "path": "./ssr.js",
+          "path": "@substrate-system/util",
           "kind": "import-statement",
           "external": true
         }
       ],
       "exports": [
-        "BlurHash"
+        "outerHTML",
+        "render"
       ],
-      "entryPoint": "src/index.ts",
+      "entryPoint": "src/html.ts",
       "inputs": {
-        "src/index.ts": {
-          "bytesInOutput": 3763
+        "src/html.ts": {
+          "bytesInOutput": 1109
         }
       },
-      "bytes": 3949
+      "bytes": 1305
     },
-    "dist/ssr.js.map": {
+    "dist/index.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 2115
+      "bytes": 7747
     },
-    "dist/ssr.js": {
+    "dist/index.js": {
       "imports": [
         {
-          "path": "@substrate-system/util",
+          "path": "@substrate-system/web-component",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "blurhash",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "./html.js",
           "kind": "import-statement",
           "external": true
         }
       ],
       "exports": [
-        "html",
-        "outerHTML"
+        "BlurHash"
       ],
-      "entryPoint": "src/ssr.ts",
+      "entryPoint": "src/index.ts",
       "inputs": {
-        "src/ssr.ts": {
-          "bytesInOutput": 1101
+        "src/index.ts": {
+          "bytesInOutput": 3768
         }
       },
-      "bytes": 1294
+      "bytes": 3954
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@substrate-system/blur-hash",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "type": "module",
   "description": "A blurry placeholder image web component",
   "main": "dist/index.js",
@@ -57,7 +57,7 @@
   },
   "dependencies": {
     "@substrate-system/util": "^0.1.31",
-    "@substrate-system/web-component": "^0.0.24",
+    "@substrate-system/web-component": "^0.0.28",
     "blurhash": "^2.0.5",
     "image-size": "^2.0.2",
     "inkjet": "^3.0.0",
@@ -82,7 +82,7 @@
     "tape-run": "^11.0.0",
     "typedoc": "^0.28.1",
     "typescript": "^5.4.5",
-    "vite": "^6.0.1"
+    "vite": "^7.0.2"
   },
   "author": "nichoth <nichoth@nichoth.com> (https://nichoth.com)",
   "license": "SEE LICENSE IN LICENSE",

package/dist/ssr.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/ssr.ts"],
-  "sourcesContent": ["import { attributes } from '@substrate-system/util'\nimport type { ImgAttrs } from './index.js'\n\ntype SSRAttrs = ImgAttrs & { classes?:string }\n\nexport function html (attrs:SSRAttrs) {\n    const {\n        width,\n        height,\n        alt,\n        contentVisibility,\n        placeholder,\n        decoding,\n        loading,\n        srcset,\n        sizes,\n        src\n    } = attrs\n\n    if (!placeholder) throw new Error('not placeholder')\n\n    const 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\nexport const outerHTML = (attrs:SSRAttrs) => {\n    return `<blur-hash>${html(attrs)}</blur-hash>`\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA2B;AAKpB,SAAS,KAAM,OAAgB;AAClC,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;AA6CT,MAAM,YAAY,wBAAC,UAAmB;AACzC,SAAO,cAAc,KAAK,KAAK,CAAC;AACpC,GAFyB;",
-  "names": []
-}

package/dist/ssr.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ssr.d.ts","sourceRoot":"","sources":["../src/ssr.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAE1C,KAAK,QAAQ,GAAG,QAAQ,GAAG;IAAE,OAAO,CAAC,EAAC,MAAM,CAAA;CAAE,CAAA;AAE9C,wBAAgB,IAAI,CAAE,KAAK,EAAC,QAAQ,UA2CnC;AAED,eAAO,MAAM,SAAS,UAAU,QAAQ,WAEvC,CAAA"}

package/dist/ssr.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/ssr.ts"],
-  "sourcesContent": ["import { attributes } from '@substrate-system/util'\nimport type { ImgAttrs } from './index.js'\n\ntype SSRAttrs = ImgAttrs & { classes?:string }\n\nexport function html (attrs:SSRAttrs) {\n    const {\n        width,\n        height,\n        alt,\n        contentVisibility,\n        placeholder,\n        decoding,\n        loading,\n        srcset,\n        sizes,\n        src\n    } = attrs\n\n    if (!placeholder) throw new Error('not placeholder')\n\n    const 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\nexport const outerHTML = (attrs:SSRAttrs) => {\n    return `<blur-hash>${html(attrs)}</blur-hash>`\n}\n"],
-  "mappings": ";;AAAA,SAAS,kBAAkB;AAKpB,SAAS,KAAM,OAAgB;AAClC,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;AA6CT,MAAM,YAAY,wBAAC,UAAmB;AACzC,SAAO,cAAc,KAAK,KAAK,CAAC;AACpC,GAFyB;",
-  "names": []
-}

package/dist/ssr.min.js

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