@substrate-system/blur-hash 0.0.0

package/LICENSE

@@ -0,0 +1,20 @@
+THE MIT LICENSE (MIT)
+
+Copyright © 2024 Nick Thomas <nichoth@nichoth.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the “Software”), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so, 
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.example.md

@@ -0,0 +1,84 @@
+# package name here
+![tests](https://github.com/substrate-system/icons/actions/workflows/nodejs.yml/badge.svg)
+[![types](https://img.shields.io/npm/types/@substrate-system/icons?style=flat-square)](README.md)
+[![module](https://img.shields.io/badge/module-ESM%2FCJS-blue?style=flat-square)](README.md)
+[![semantic versioning](https://img.shields.io/badge/semver-2.0.0-blue?logo=semver&style=flat-square)](https://semver.org/)
+[![dependencies](https://img.shields.io/badge/dependencies-zero-brightgreen.svg?style=flat-square)](package.json)
+[![license](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE)
+
+`<package description goes here>`
+
+[See a live demo](https://namespace.github.io/package-name/)
+
+## install
+
+Installation instructions
+
+```sh
+npm i -S @namespace/package
+```
+
+## API
+
+This exposes ESM and common JS via [package.json `exports` field](https://nodejs.org/api/packages.html#exports).
+
+### ESM
+```js
+import '@namespace/package/module'
+```
+
+### Common JS
+```js
+require('@namespace/package/module')
+```
+
+## CSS
+
+### Import CSS
+
+```js
+import '@namespace/package-name/css'
+```
+
+Or minified:
+```js
+import '@namespace/package-name/css/min'
+```
+
+### Customize CSS via some variables
+
+```css
+component-name {
+    --example: pink;
+}
+```
+
+## use
+This calls the global function `customElements.define`. Just import, then use
+the tag in your HTML.
+
+### JS
+```js
+import '@namespace/package/module'
+```
+
+### HTML
+```html
+<div>
+    <example-component></example-component>
+</div>
+```
+
+### pre-built JS
+This package exposes minified JS files too. Copy them to a location that is
+accessible to your web server, then link to them in HTML.
+
+#### copy
+```sh
+cp ./node_modules/@namespace/package/dist/module.min.js ./public
+```
+
+#### HTML
+```html
+<script type="module" src="./module.min.js"></script>
+```

package/README.md

@@ -0,0 +1,112 @@
+# blur hash
+![tests](https://github.com/substrate-system/icons/actions/workflows/nodejs.yml/badge.svg)
+[![types](https://img.shields.io/npm/types/@substrate-system/icons?style=flat-square)](README.md)
+[![module](https://img.shields.io/badge/module-ESM%2FCJS-blue?style=flat-square)](README.md)
+[![semantic versioning](https://img.shields.io/badge/semver-2.0.0-blue?logo=semver&style=flat-square)](https://semver.org/)
+[![dependencies](https://img.shields.io/badge/dependencies-zero-brightgreen.svg?style=flat-square)](package.json)
+[![license](https://img.shields.io/badge/license-MIT-brightgreen.svg?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).
+
+[See a live demonstration](https://substrate-system.github.io/blur-hash/)
+
+> [!TIP]
+> Throttle the internet speed with the dev tools.
+
+## install
+
+```sh
+npm i -S @substrate-system/blur-hash
+```
+
+## API
+
+This exposes ESM and common JS via [package.json `exports` field](https://nodejs.org/api/packages.html#exports).
+
+### ESM
+```js
+import '@substrate-system/blur-hash'
+```
+
+### Common JS
+```js
+require('@substrate-system/blur-hash')
+```
+
+## CSS
+
+### Import CSS
+
+```js
+import '@substrate-system/blur-hash/css'
+```
+
+Or minified:
+```js
+import '@substrate-system/blur-hash/css/min'
+```
+
+## use
+This calls the global function `customElements.define`. Just import, then use
+the tag in your HTML.
+
+### JS
+```js
+import '@substrate-system/blur-hash'
+```
+
+### HTML
+```html
+<div>
+    <blur-hash
+        time="0.6s"
+        placeholder="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
+        src="..."
+        width=100
+        height=100
+    >
+    </blur-hash>
+</div>
+```
+
+### attributes
+Takes the following attributes
+
+#### time
+The time for css transitions and animation. This is set as a CSS variable.
+
+#### placeholder
+The string created by the blurhash algorithm. See [node example](#create-the-string).
+
+#### width & height
+The dimensions of the image
+
+## pre-built JS
+This package exposes minified JS files too. Copy them to a location that is
+accessible to your web server, then link to them in HTML.
+
+### copy
+```sh
+cp ./node_modules/@substrate-system/blur-hash/dist/blur-hash.min.js ./public
+```
+
+### HTML
+```html
+<script type="module" src="./blur-hash.min.js"></script>
+```
+
+## Create the string
+This package includes a CLI tool to create the placeholder string. After installing this as a dependency,
+
+```sh
+npx blur ./my-file.jpg
+```
+
+Will print a string to stdout that can be used as a placeholder attribute.
+
+### Print to system clipboard
+On mac os,
+
+```sh
+npx blur ./my-file.jpg | pbcopy
+```

package/dist/index.cjs

@@ -0,0 +1,81 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var src_exports = {};
+__export(src_exports, {
+  BlurHash: () => BlurHash
+});
+module.exports = __toCommonJS(src_exports);
+var import_blurhash = require("blurhash");
+var import_debug = require("@bicycle-codes/debug");
+const debug = (0, import_debug.createDebug)();
+class BlurHash extends HTMLElement {
+  static {
+    __name(this, "BlurHash");
+  }
+  constructor() {
+    super();
+    const srcset = this.getAttribute("srcset");
+    const placeholder = this.getAttribute("placeholder");
+    if (!placeholder) throw new Error("not placeholder");
+    document.body.style.setProperty(
+      "--blur-hash-time",
+      this.getAttribute("time") || "0.6s"
+    );
+    this.innerHTML = `<canvas
+            class="blurry"
+            width=${this.getAttribute("width")}
+            height=${this.getAttribute("height")}
+        ></canvas>
+        <img class="blurry"
+            ${srcset ? `srcset="${srcset}"` : ""}
+            alt="${this.getAttribute("alt")}"
+            content-visibility="${this.getAttribute("content-visibility") || "auto"}"
+            decoding="${this.getAttribute("decoding") || "async"}"
+            loading="${this.getAttribute("loading") || "lazy"}"
+            class="image-element blurry"
+            src="${this.getAttribute("src")}"
+        />
+        `;
+  }
+  connectedCallback() {
+    const width = parseInt(this.getAttribute("width") ?? "");
+    const height = parseInt(this.getAttribute("height") ?? "");
+    const placeholder = this.getAttribute("placeholder");
+    if (!placeholder || !width || !height) {
+      throw new Error("Missing attributes");
+    }
+    const pixels = (0, import_blurhash.decode)(placeholder, width, height);
+    const canvas = this.querySelector("canvas");
+    const ctx = canvas.getContext("2d");
+    const imageData = ctx.createImageData(width, height);
+    imageData.data.set(pixels);
+    ctx.putImageData(imageData, 0, 0);
+    const img = this.querySelector("img");
+    img.addEventListener("load", () => {
+      debug("loaded");
+      canvas.style.display = "none";
+      img.classList.remove("blurry");
+      img.classList.add("sharp");
+    });
+    debug("the image", img);
+  }
+}
+customElements.define("blur-hash", BlurHash);
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["import { decode } from 'blurhash'\nimport { createDebug } from '@bicycle-codes/debug'\nconst debug = createDebug()\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'blur-hash': BlurHash\n    }\n}\n\nexport class BlurHash extends HTMLElement {\n    constructor () {\n        super()\n        const srcset = this.getAttribute('srcset')\n        const placeholder = this.getAttribute('placeholder')\n        if (!placeholder) throw new Error('not placeholder')\n\n        document.body.style.setProperty('--blur-hash-time',\n            this.getAttribute('time') || '0.6s')\n\n        this.innerHTML = `<canvas\n            class=\"blurry\"\n            width=${this.getAttribute('width')}\n            height=${this.getAttribute('height')}\n        ></canvas>\n        <img class=\"blurry\"\n            ${srcset ? `srcset=\"${srcset}\"` : ''}\n            alt=\"${this.getAttribute('alt')}\"\n            content-visibility=\"${this.getAttribute('content-visibility') || 'auto'}\"\n            decoding=\"${this.getAttribute('decoding') || 'async'}\"\n            loading=\"${this.getAttribute('loading') || 'lazy'}\"\n            class=\"image-element blurry\"\n            src=\"${this.getAttribute('src')}\"\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 || !width || !height) {\n            throw new Error('Missing attributes')\n        }\n\n        const pixels = decode(placeholder, width, height)\n        const canvas = this.querySelector('canvas') as HTMLCanvasElement\n        const ctx = canvas.getContext('2d')!\n        const imageData = ctx.createImageData(width, height)\n        imageData.data.set(pixels)\n        ctx.putImageData(imageData, 0, 0)\n\n        const img = this.querySelector('img')!\n\n        img.addEventListener('load', () => {\n            debug('loaded')\n            canvas.style.display = 'none'\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\n        })\n\n        debug('the image', img)\n    }\n}\n\ncustomElements.define('blur-hash', BlurHash)\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAuB;AACvB,mBAA4B;AAC5B,MAAM,YAAQ,0BAAY;AASnB,MAAM,iBAAiB,YAAY;AAAA,EAX1C,OAW0C;AAAA;AAAA;AAAA,EACtC,cAAe;AACX,UAAM;AACN,UAAM,SAAS,KAAK,aAAa,QAAQ;AACzC,UAAM,cAAc,KAAK,aAAa,aAAa;AACnD,QAAI,CAAC,YAAa,OAAM,IAAI,MAAM,iBAAiB;AAEnD,aAAS,KAAK,MAAM;AAAA,MAAY;AAAA,MAC5B,KAAK,aAAa,MAAM,KAAK;AAAA,IAAM;AAEvC,SAAK,YAAY;AAAA;AAAA,oBAEL,KAAK,aAAa,OAAO,CAAC;AAAA,qBACzB,KAAK,aAAa,QAAQ,CAAC;AAAA;AAAA;AAAA,cAGlC,SAAS,WAAW,MAAM,MAAM,EAAE;AAAA,mBAC7B,KAAK,aAAa,KAAK,CAAC;AAAA,kCACT,KAAK,aAAa,oBAAoB,KAAK,MAAM;AAAA,wBAC3D,KAAK,aAAa,UAAU,KAAK,OAAO;AAAA,uBACzC,KAAK,aAAa,SAAS,KAAK,MAAM;AAAA;AAAA,mBAE1C,KAAK,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,EAGvC;AAAA,EAEA,oBAAqB;AACjB,UAAM,QAAQ,SAAS,KAAK,aAAa,OAAO,KAAK,EAAE;AACvD,UAAM,SAAS,SAAS,KAAK,aAAa,QAAQ,KAAK,EAAE;AACzD,UAAM,cAAc,KAAK,aAAa,aAAa;AACnD,QAAI,CAAC,eAAe,CAAC,SAAS,CAAC,QAAQ;AACnC,YAAM,IAAI,MAAM,oBAAoB;AAAA,IACxC;AAEA,UAAM,aAAS,wBAAO,aAAa,OAAO,MAAM;AAChD,UAAM,SAAS,KAAK,cAAc,QAAQ;AAC1C,UAAM,MAAM,OAAO,WAAW,IAAI;AAClC,UAAM,YAAY,IAAI,gBAAgB,OAAO,MAAM;AACnD,cAAU,KAAK,IAAI,MAAM;AACzB,QAAI,aAAa,WAAW,GAAG,CAAC;AAEhC,UAAM,MAAM,KAAK,cAAc,KAAK;AAEpC,QAAI,iBAAiB,QAAQ,MAAM;AAC/B,YAAM,QAAQ;AACd,aAAO,MAAM,UAAU;AACvB,UAAI,UAAU,OAAO,QAAQ;AAC7B,UAAI,UAAU,IAAI,OAAO;AAAA,IAC7B,CAAC;AAED,UAAM,aAAa,GAAG;AAAA,EAC1B;AACJ;AAEA,eAAe,OAAO,aAAa,QAAQ;",
+  "names": []
+}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        'blur-hash': BlurHash;
+    }
+}
+export declare class BlurHash extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAA;KACxB;CACJ;AAED,qBAAa,QAAS,SAAQ,WAAW;;IA2BrC,iBAAiB;CA0BpB"}

package/dist/index.js

@@ -0,0 +1,62 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { decode } from "blurhash";
+import { createDebug } from "@bicycle-codes/debug";
+const debug = createDebug();
+class BlurHash extends HTMLElement {
+  static {
+    __name(this, "BlurHash");
+  }
+  constructor() {
+    super();
+    const srcset = this.getAttribute("srcset");
+    const placeholder = this.getAttribute("placeholder");
+    if (!placeholder) throw new Error("not placeholder");
+    document.body.style.setProperty(
+      "--blur-hash-time",
+      this.getAttribute("time") || "0.6s"
+    );
+    this.innerHTML = `<canvas
+            class="blurry"
+            width=${this.getAttribute("width")}
+            height=${this.getAttribute("height")}
+        ></canvas>
+        <img class="blurry"
+            ${srcset ? `srcset="${srcset}"` : ""}
+            alt="${this.getAttribute("alt")}"
+            content-visibility="${this.getAttribute("content-visibility") || "auto"}"
+            decoding="${this.getAttribute("decoding") || "async"}"
+            loading="${this.getAttribute("loading") || "lazy"}"
+            class="image-element blurry"
+            src="${this.getAttribute("src")}"
+        />
+        `;
+  }
+  connectedCallback() {
+    const width = parseInt(this.getAttribute("width") ?? "");
+    const height = parseInt(this.getAttribute("height") ?? "");
+    const placeholder = this.getAttribute("placeholder");
+    if (!placeholder || !width || !height) {
+      throw new Error("Missing attributes");
+    }
+    const pixels = decode(placeholder, width, height);
+    const canvas = this.querySelector("canvas");
+    const ctx = canvas.getContext("2d");
+    const imageData = ctx.createImageData(width, height);
+    imageData.data.set(pixels);
+    ctx.putImageData(imageData, 0, 0);
+    const img = this.querySelector("img");
+    img.addEventListener("load", () => {
+      debug("loaded");
+      canvas.style.display = "none";
+      img.classList.remove("blurry");
+      img.classList.add("sharp");
+    });
+    debug("the image", img);
+  }
+}
+customElements.define("blur-hash", BlurHash);
+export {
+  BlurHash
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["import { decode } from 'blurhash'\nimport { createDebug } from '@bicycle-codes/debug'\nconst debug = createDebug()\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'blur-hash': BlurHash\n    }\n}\n\nexport class BlurHash extends HTMLElement {\n    constructor () {\n        super()\n        const srcset = this.getAttribute('srcset')\n        const placeholder = this.getAttribute('placeholder')\n        if (!placeholder) throw new Error('not placeholder')\n\n        document.body.style.setProperty('--blur-hash-time',\n            this.getAttribute('time') || '0.6s')\n\n        this.innerHTML = `<canvas\n            class=\"blurry\"\n            width=${this.getAttribute('width')}\n            height=${this.getAttribute('height')}\n        ></canvas>\n        <img class=\"blurry\"\n            ${srcset ? `srcset=\"${srcset}\"` : ''}\n            alt=\"${this.getAttribute('alt')}\"\n            content-visibility=\"${this.getAttribute('content-visibility') || 'auto'}\"\n            decoding=\"${this.getAttribute('decoding') || 'async'}\"\n            loading=\"${this.getAttribute('loading') || 'lazy'}\"\n            class=\"image-element blurry\"\n            src=\"${this.getAttribute('src')}\"\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 || !width || !height) {\n            throw new Error('Missing attributes')\n        }\n\n        const pixels = decode(placeholder, width, height)\n        const canvas = this.querySelector('canvas') as HTMLCanvasElement\n        const ctx = canvas.getContext('2d')!\n        const imageData = ctx.createImageData(width, height)\n        imageData.data.set(pixels)\n        ctx.putImageData(imageData, 0, 0)\n\n        const img = this.querySelector('img')!\n\n        img.addEventListener('load', () => {\n            debug('loaded')\n            canvas.style.display = 'none'\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\n        })\n\n        debug('the image', img)\n    }\n}\n\ncustomElements.define('blur-hash', BlurHash)\n"],
+  "mappings": ";;AAAA,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,MAAM,QAAQ,YAAY;AASnB,MAAM,iBAAiB,YAAY;AAAA,EAX1C,OAW0C;AAAA;AAAA;AAAA,EACtC,cAAe;AACX,UAAM;AACN,UAAM,SAAS,KAAK,aAAa,QAAQ;AACzC,UAAM,cAAc,KAAK,aAAa,aAAa;AACnD,QAAI,CAAC,YAAa,OAAM,IAAI,MAAM,iBAAiB;AAEnD,aAAS,KAAK,MAAM;AAAA,MAAY;AAAA,MAC5B,KAAK,aAAa,MAAM,KAAK;AAAA,IAAM;AAEvC,SAAK,YAAY;AAAA;AAAA,oBAEL,KAAK,aAAa,OAAO,CAAC;AAAA,qBACzB,KAAK,aAAa,QAAQ,CAAC;AAAA;AAAA;AAAA,cAGlC,SAAS,WAAW,MAAM,MAAM,EAAE;AAAA,mBAC7B,KAAK,aAAa,KAAK,CAAC;AAAA,kCACT,KAAK,aAAa,oBAAoB,KAAK,MAAM;AAAA,wBAC3D,KAAK,aAAa,UAAU,KAAK,OAAO;AAAA,uBACzC,KAAK,aAAa,SAAS,KAAK,MAAM;AAAA;AAAA,mBAE1C,KAAK,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,EAGvC;AAAA,EAEA,oBAAqB;AACjB,UAAM,QAAQ,SAAS,KAAK,aAAa,OAAO,KAAK,EAAE;AACvD,UAAM,SAAS,SAAS,KAAK,aAAa,QAAQ,KAAK,EAAE;AACzD,UAAM,cAAc,KAAK,aAAa,aAAa;AACnD,QAAI,CAAC,eAAe,CAAC,SAAS,CAAC,QAAQ;AACnC,YAAM,IAAI,MAAM,oBAAoB;AAAA,IACxC;AAEA,UAAM,SAAS,OAAO,aAAa,OAAO,MAAM;AAChD,UAAM,SAAS,KAAK,cAAc,QAAQ;AAC1C,UAAM,MAAM,OAAO,WAAW,IAAI;AAClC,UAAM,YAAY,IAAI,gBAAgB,OAAO,MAAM;AACnD,cAAU,KAAK,IAAI,MAAM;AACzB,QAAI,aAAa,WAAW,GAAG,CAAC;AAEhC,UAAM,MAAM,KAAK,cAAc,KAAK;AAEpC,QAAI,iBAAiB,QAAQ,MAAM;AAC/B,YAAM,QAAQ;AACd,aAAO,MAAM,UAAU;AACvB,UAAI,UAAU,OAAO,QAAQ;AAC7B,UAAI,UAAU,IAAI,OAAO;AAAA,IAC7B,CAAC;AAED,UAAM,aAAa,GAAG;AAAA,EAC1B;AACJ;AAEA,eAAe,OAAO,aAAa,QAAQ;",
+  "names": []
+}

package/dist/index.min.js

@@ -0,0 +1,16 @@
+var W=Object.create;var w=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var a=(e,t)=>w(e,"name",{value:t,configurable:!0});var ee=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports);var te=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of Q(t))!Y.call(e,o)&&o!==r&&w(e,o,{get:()=>t[o],enumerable:!(n=K(t,o))||n.enumerable});return e};var re=(e,t,r)=>(r=e!=null?W(X(e)):{},te(t||!e||!e.__esModule?w(r,"default",{value:e,enumerable:!0}):r,e));var H=ee((De,G)=>{"use strict";var d=1e3,g=d*60,p=g*60,C=p*24,le=C*7,ue=C*365.25;G.exports=function(e,t){t=t||{};var r=typeof e;if(r==="string"&&e.length>0)return he(e);if(r==="number"&&isFinite(e))return t.long?fe(e):me(e);throw new Error("val is not a non-empty string or a valid number. val="+JSON.stringify(e))};function he(e){if(e=String(e),!(e.length>100)){var t=/^(-?(?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|weeks?|w|years?|yrs?|y)?$/i.exec(e);if(t){var r=parseFloat(t[1]),n=(t[2]||"ms").toLowerCase();switch(n){case"years":case"year":case"yrs":case"yr":case"y":return r*ue;case"weeks":case"week":case"w":return r*le;case"days":case"day":case"d":return r*C;case"hours":case"hour":case"hrs":case"hr":case"h":return r*p;case"minutes":case"minute":case"mins":case"min":case"m":return r*g;case"seconds":case"second":case"secs":case"sec":case"s":return r*d;case"milliseconds":case"millisecond":case"msecs":case"msec":case"ms":return r;default:return}}}}a(he,"parse");function me(e){var t=Math.abs(e);return t>=C?Math.round(e/C)+"d":t>=p?Math.round(e/p)+"h":t>=g?Math.round(e/g)+"m":t>=d?Math.round(e/d)+"s":e+"ms"}a(me,"fmtShort");function fe(e){var t=Math.abs(e);return t>=C?v(e,t,C,"day"):t>=p?v(e,t,p,"hour"):t>=g?v(e,t,g,"minute"):t>=d?v(e,t,d,"second"):e+" ms"}a(fe,"fmtLong");function v(e,t,r,n){var o=t>=r*1.5;return Math.round(e/r)+" "+n+(o?"s":"")}a(v,"plural")});var ne=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","#","$","%","*","+",",","-",".",":",";","=","?","@","[","]","^","_","{","|","}","~"],F=a(e=>{let t=0;for(let r=0;r<e.length;r++){let n=e[r],o=ne.indexOf(n);t=t*83+o}return t},"x");var x=a(e=>{let t=e/255;return t<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)},"f"),A=a(e=>{let t=Math.max(0,Math.min(1,e));return t<=.0031308?Math.trunc(t*12.92*255+.5):Math.trunc((1.055*Math.pow(t,.4166666666666667)-.055)*255+.5)},"h"),ae=a(e=>e<0?-1:1,"F"),D=a((e,t)=>ae(e)*Math.pow(Math.abs(e),t),"M"),B=class extends Error{static{a(this,"d")}constructor(e){super(e),this.name="ValidationError",this.message=e}},oe=a(e=>{if(!e||e.length<6)throw new B("The blurhash string must be at least 6 characters");let t=F(e[0]),r=Math.floor(t/9)+1,n=t%9+1;if(e.length!==4+2*n*r)throw new B(`blurhash length mismatch: length is ${e.length} but it should be ${4+2*n*r}`)},"C");var se=a(e=>{let t=e>>16,r=e>>8&255,n=e&255;return[x(t),x(r),x(n)]},"z"),ie=a((e,t)=>{let r=Math.floor(e/361),n=Math.floor(e/19)%19,o=e%19;return[D((r-9)/9,2)*t,D((n-9)/9,2)*t,D((o-9)/9,2)*t]},"L"),ce=a((e,t,r,n)=>{oe(e),n=n|1;let o=F(e[0]),l=Math.floor(o/9)+1,h=o%9+1,u=(F(e[1])+1)/166,i=new Array(h*l);for(let s=0;s<i.length;s++)if(s===0){let c=F(e.substring(2,6));i[s]=se(c)}else{let c=F(e.substring(4+s*2,6+s*2));i[s]=ie(c,u*n)}let m=t*4,f=new Uint8ClampedArray(m*r);for(let s=0;s<r;s++)for(let c=0;c<t;c++){let T=0,_=0,O=0;for(let M=0;M<l;M++)for(let b=0;b<h;b++){let y=Math.cos(Math.PI*c*b/t)*Math.cos(Math.PI*s*M/r),E=i[b+M*h];T+=E[0]*y,_+=E[1]*y,O+=E[2]*y}let J=A(T),j=A(_),Z=A(O);f[4*c+0+s*m]=J,f[4*c+1+s*m]=j,f[4*c+2+s*m]=Z,f[4*c+3+s*m]=255}return f},"U"),U=ce;function N(e){return e instanceof Error?e.stack||e.message:String(e)}a(N,"coerce");function P(e,t){let r=0;for(let n=0;n<e.length;n++)r=(r<<5)-r+e.charCodeAt(n),r|=0;return t[Math.abs(r)%t.length]}a(P,"selectColor");function R(e){return e.split(/[\s,]+/).filter(Boolean).map(n=>n.replace(/\*/g,".*?")).map(n=>new RegExp("^"+n+"$"))}a(R,"createRegexFromEnvVar");function k(e=6){return Math.random().toString(20).substring(2,e)}a(k,"generateRandomString");var z=re(H(),1);var Ce=["#0000CC","#0000FF","#0033CC","#0033FF","#0066CC","#0066FF","#0099CC","#0099FF","#00CC00","#00CC33","#00CC66","#00CC99","#00CCCC","#00CCFF","#3300CC","#3300FF","#3333CC","#3333FF","#3366CC","#3366FF","#3399CC","#3399FF","#33CC00","#33CC33","#33CC66","#33CC99","#33CCCC","#33CCFF","#6600CC","#6600FF","#6633CC","#6633FF","#66CC00","#66CC33","#9900CC","#9900FF","#9933CC","#9933FF","#99CC00","#99CC33","#CC0000","#CC0033","#CC0066","#CC0099","#CC00CC","#CC00FF","#CC3300","#CC3333","#CC3366","#CC3399","#CC33CC","#CC33FF","#CC6600","#CC6633","#CC9900","#CC9933","#CCCC00","#CCCC33","#FF0000","#FF0033","#FF0066","#FF0099","#FF00CC","#FF00FF","#FF3300","#FF3333","#FF3366","#FF3399","#FF33CC","#FF33FF","#FF6600","#FF6633","#FF9900","#FF9933","#FFCC00","#FFCC33"],de=console.log||(()=>{}),V="",L=a(e=>(...t)=>{},"createDebug"),I=import.meta?.env?.VITE_DEBUG_MODE||"",$=[];I&&($=(I&&I.split(",")).map(e=>e.trim())||[]);(import.meta?.env?.DEV||import.meta?.env?.VITE_DEBUG||$.length&&$.includes(import.meta.env.MODE))&&(L=a(function(t){let r=Number(new Date);V||(V=k(10));let n=P(t||V,Ce);return a(function(...l){if(ge(t))return Fe(t||"DEV",l,{prevTime:r,color:n})},"debug")},"createDebug"));function ge(e){return e===void 0&&(import.meta&&import.meta.env?.DEV||import.meta.env?.VITE_DEBUG_MODE&&import.meta&&import.meta.env&&import.meta.env.MODE===import.meta.env.VITE_DEBUG_MODE)?!0:!e||!import.meta.env||!import.meta.env.VITE_DEBUG?!1:R(import.meta.env?.VITE_DEBUG).some(r=>r.test(e))}a(ge,"isEnabled");function pe(){return{j:a(function(e){try{return JSON.stringify(e)}catch(t){return"[UnexpectedJSONParseError]: "+String(t)}},"j")}}a(pe,"createFormatters");function Fe(e,t,{prevTime:r,color:n}){let o=Number(new Date),l=o-(r||o);r=o,t[0]=N(t[0]);let h=pe();typeof t[0]!="string"&&t.unshift("%O");let u=0;t[0]=t[0].replace(/%([a-zA-Z%])/g,(m,f)=>{if(m==="%%")return"%";u++;let s=h[f];if(typeof s=="function"){let c=t[u];m=s.call(self,c),t.splice(u,1),u--}return m});let i=be({diff:l,color:n,useColors:Me(),namespace:e},t);de(...i)}a(Fe,"logger");function Me(){return typeof navigator<"u"&&navigator.userAgent&&navigator.userAgent.toLowerCase().match(/(edge|trident)\/(\d+)/)?!1:!!(typeof document<"u"&&document.documentElement&&document.documentElement.style&&document.documentElement.style.webkitAppearance||typeof navigator<"u"&&navigator.userAgent&&navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/)&&parseInt(RegExp.$1,10)>=31||typeof navigator<"u"&&navigator.userAgent&&navigator.userAgent.toLowerCase().match(/applewebkit\/(\d+)/))}a(Me,"shouldUseColors");function be({diff:e,color:t,namespace:r,useColors:n},o){if(o[0]=(n?"%c":"")+r+(n?" %c":" ")+o[0]+(n?"%c ":" ")+"+"+(0,z.default)(e),!n)return;let l="color: "+t;o.splice(1,0,l,"color: inherit");let h=0,u=0;return o[0].replace(/%[a-zA-Z%]/g,i=>{i!=="%%"&&(h++,i==="%c"&&(u=h))}),o.splice(u,0,l),o}a(be,"formatArgs");var q=L(),S=class extends HTMLElement{static{a(this,"BlurHash")}constructor(){super();let t=this.getAttribute("srcset");if(!this.getAttribute("placeholder"))throw new Error("not placeholder");document.body.style.setProperty("--blur-hash-time",this.getAttribute("time")||"0.6s"),this.innerHTML=`<canvas
+            class="blurry"
+            width=${this.getAttribute("width")}
+            height=${this.getAttribute("height")}
+        ></canvas>
+        <img class="blurry"
+            ${t?`srcset="${t}"`:""}
+            alt="${this.getAttribute("alt")}"
+            content-visibility="${this.getAttribute("content-visibility")||"auto"}"
+            decoding="${this.getAttribute("decoding")||"async"}"
+            loading="${this.getAttribute("loading")||"lazy"}"
+            class="image-element blurry"
+            src="${this.getAttribute("src")}"
+        />
+        `}connectedCallback(){let t=parseInt(this.getAttribute("width")??""),r=parseInt(this.getAttribute("height")??""),n=this.getAttribute("placeholder");if(!n||!t||!r)throw new Error("Missing attributes");let o=U(n,t,r),l=this.querySelector("canvas"),h=l.getContext("2d"),u=h.createImageData(t,r);u.data.set(o),h.putImageData(u,0,0);let i=this.querySelector("img");i.addEventListener("load",()=>{q("loaded"),l.style.display="none",i.classList.remove("blurry"),i.classList.add("sharp")}),q("the image",i)}};customElements.define("blur-hash",S);export{S as BlurHash};
+//# sourceMappingURL=index.min.js.map

package/dist/index.min.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../node_modules/ms/index.js", "../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/@bicycle-codes/debug/src/common.ts", "../node_modules/@bicycle-codes/debug/src/browser.ts", "../src/index.ts"],
+  "sourcesContent": ["/**\n * Helpers.\n */\n\nvar s = 1000;\nvar m = s * 60;\nvar h = m * 60;\nvar d = h * 24;\nvar w = d * 7;\nvar y = d * 365.25;\n\n/**\n * Parse or format the given `val`.\n *\n * Options:\n *\n *  - `long` verbose formatting [false]\n *\n * @param {String|Number} val\n * @param {Object} [options]\n * @throws {Error} throw an error if val is not a non-empty string or a number\n * @return {String|Number}\n * @api public\n */\n\nmodule.exports = function (val, options) {\n  options = options || {};\n  var type = typeof val;\n  if (type === 'string' && val.length > 0) {\n    return parse(val);\n  } else if (type === 'number' && isFinite(val)) {\n    return options.long ? fmtLong(val) : fmtShort(val);\n  }\n  throw new Error(\n    'val is not a non-empty string or a valid number. val=' +\n      JSON.stringify(val)\n  );\n};\n\n/**\n * Parse the given `str` and return milliseconds.\n *\n * @param {String} str\n * @return {Number}\n * @api private\n */\n\nfunction parse(str) {\n  str = String(str);\n  if (str.length > 100) {\n    return;\n  }\n  var match = /^(-?(?:\\d+)?\\.?\\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|weeks?|w|years?|yrs?|y)?$/i.exec(\n    str\n  );\n  if (!match) {\n    return;\n  }\n  var n = parseFloat(match[1]);\n  var type = (match[2] || 'ms').toLowerCase();\n  switch (type) {\n    case 'years':\n    case 'year':\n    case 'yrs':\n    case 'yr':\n    case 'y':\n      return n * y;\n    case 'weeks':\n    case 'week':\n    case 'w':\n      return n * w;\n    case 'days':\n    case 'day':\n    case 'd':\n      return n * d;\n    case 'hours':\n    case 'hour':\n    case 'hrs':\n    case 'hr':\n    case 'h':\n      return n * h;\n    case 'minutes':\n    case 'minute':\n    case 'mins':\n    case 'min':\n    case 'm':\n      return n * m;\n    case 'seconds':\n    case 'second':\n    case 'secs':\n    case 'sec':\n    case 's':\n      return n * s;\n    case 'milliseconds':\n    case 'millisecond':\n    case 'msecs':\n    case 'msec':\n    case 'ms':\n      return n;\n    default:\n      return undefined;\n  }\n}\n\n/**\n * Short format for `ms`.\n *\n * @param {Number} ms\n * @return {String}\n * @api private\n */\n\nfunction fmtShort(ms) {\n  var msAbs = Math.abs(ms);\n  if (msAbs >= d) {\n    return Math.round(ms / d) + 'd';\n  }\n  if (msAbs >= h) {\n    return Math.round(ms / h) + 'h';\n  }\n  if (msAbs >= m) {\n    return Math.round(ms / m) + 'm';\n  }\n  if (msAbs >= s) {\n    return Math.round(ms / s) + 's';\n  }\n  return ms + 'ms';\n}\n\n/**\n * Long format for `ms`.\n *\n * @param {Number} ms\n * @return {String}\n * @api private\n */\n\nfunction fmtLong(ms) {\n  var msAbs = Math.abs(ms);\n  if (msAbs >= d) {\n    return plural(ms, msAbs, d, 'day');\n  }\n  if (msAbs >= h) {\n    return plural(ms, msAbs, h, 'hour');\n  }\n  if (msAbs >= m) {\n    return plural(ms, msAbs, m, 'minute');\n  }\n  if (msAbs >= s) {\n    return plural(ms, msAbs, s, 'second');\n  }\n  return ms + ' ms';\n}\n\n/**\n * Pluralization helper.\n */\n\nfunction plural(ms, msAbs, n, name) {\n  var isPlural = msAbs >= n * 1.5;\n  return Math.round(ms / n) + ' ' + name + (isPlural ? 's' : '');\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", null, null, "import { decode } from 'blurhash'\nimport { createDebug } from '@bicycle-codes/debug'\nconst debug = createDebug()\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'blur-hash': BlurHash\n    }\n}\n\nexport class BlurHash extends HTMLElement {\n    constructor () {\n        super()\n        const srcset = this.getAttribute('srcset')\n        const placeholder = this.getAttribute('placeholder')\n        if (!placeholder) throw new Error('not placeholder')\n\n        document.body.style.setProperty('--blur-hash-time',\n            this.getAttribute('time') || '0.6s')\n\n        this.innerHTML = `<canvas\n            class=\"blurry\"\n            width=${this.getAttribute('width')}\n            height=${this.getAttribute('height')}\n        ></canvas>\n        <img class=\"blurry\"\n            ${srcset ? `srcset=\"${srcset}\"` : ''}\n            alt=\"${this.getAttribute('alt')}\"\n            content-visibility=\"${this.getAttribute('content-visibility') || 'auto'}\"\n            decoding=\"${this.getAttribute('decoding') || 'async'}\"\n            loading=\"${this.getAttribute('loading') || 'lazy'}\"\n            class=\"image-element blurry\"\n            src=\"${this.getAttribute('src')}\"\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 || !width || !height) {\n            throw new Error('Missing attributes')\n        }\n\n        const pixels = decode(placeholder, width, height)\n        const canvas = this.querySelector('canvas') as HTMLCanvasElement\n        const ctx = canvas.getContext('2d')!\n        const imageData = ctx.createImageData(width, height)\n        imageData.data.set(pixels)\n        ctx.putImageData(imageData, 0, 0)\n\n        const img = this.querySelector('img')!\n\n        img.addEventListener('load', () => {\n            debug('loaded')\n            canvas.style.display = 'none'\n            img.classList.remove('blurry')\n            img.classList.add('sharp')\n        })\n\n        debug('the image', img)\n    }\n}\n\ncustomElements.define('blur-hash', BlurHash)\n"],
+  "mappings": "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",
+  "names": ["require_ms", "__commonJSMin", "exports", "module", "s", "m", "h", "d", "w", "y", "val", "options", "type", "parse", "fmtLong", "fmtShort", "str", "match", "n", "__name", "ms", "msAbs", "plural", "name", "isPlural", "q", "x", "__name", "t", "e", "l", "f", "__name", "t", "e", "h", "F", "M", "d", "C", "x", "z", "__name", "t", "e", "f", "L", "l", "M", "U", "C", "x", "m", "b", "i", "u", "o", "a", "c", "s", "y", "B", "R", "w", "P", "G", "T", "V", "h", "I", "E", "j", "coerce", "val", "__name", "selectColor", "namespace", "colors", "hash", "i", "createRegexFromEnvVar", "names", "word", "r", "generateRandomString", "length", "import_ms", "colors", "log", "randomNamespace", "createDebug", "__name", "_", "_args", "modeVar", "modes", "mode", "namespace", "prevTime", "generateRandomString", "color", "selectColor", "args", "isEnabled", "logger", "isEnabled", "namespace", "createRegexFromEnvVar", "regex", "__name", "createFormatters", "v", "error", "logger", "args", "prevTime", "color", "curr", "diff", "coerce", "formatters", "index", "match", "format", "formatter", "val", "_args", "formatArgs", "shouldUseColors", "log", "useColors", "humanize", "c", "lastC", "debug", "createDebug", "BlurHash", "__name", "srcset", "width", "height", "placeholder", "pixels", "j", "canvas", "ctx", "imageData", "img"]
+}

package/dist/meta.json

@@ -0,0 +1,41 @@
+{
+  "inputs": {
+    "src/index.ts": {
+      "bytes": 2226,
+      "imports": [],
+      "format": "esm"
+    }
+  },
+  "outputs": {
+    "dist/index.js.map": {
+      "imports": [],
+      "exports": [],
+      "inputs": {},
+      "bytes": 3699
+    },
+    "dist/index.js": {
+      "imports": [
+        {
+          "path": "blurhash",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "@bicycle-codes/debug",
+          "kind": "import-statement",
+          "external": true
+        }
+      ],
+      "exports": [
+        "BlurHash"
+      ],
+      "entryPoint": "src/index.ts",
+      "inputs": {
+        "src/index.ts": {
+          "bytesInOutput": 2016
+        }
+      },
+      "bytes": 2202
+    }
+  }
+}

package/dist/style.css

@@ -0,0 +1,33 @@
+blur-hash {
+    overflow: hidden;
+}
+
+blur-hash canvas {
+        opacity: 0.6;
+        filter: blur(30px);
+    }
+
+blur-hash img {
+        transition: opacity 0.6s;
+    }
+
+blur-hash img.blurry {
+            opacity: 0.6;
+            filter: blur(30px);
+        }
+
+blur-hash img.sharp {
+            opacity: 1;
+            animation: sharpen 0.8s both;
+        }
+
+@keyframes sharpen {
+    from {
+        filter: blur(30px);
+    }
+    to {
+        filter: blur(0px)
+    }
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7SUFDSSxnQkFBZ0I7QUFvQnBCOztBQWxCSTtRQUNJLFlBQVk7UUFDWixrQkFBa0I7SUFDdEI7O0FBRUE7UUFDSSx3QkFBd0I7SUFXNUI7O0FBVEk7WUFDSSxZQUFZO1lBQ1osa0JBQWtCO1FBQ3RCOztBQUVBO1lBQ0ksVUFBVTtZQUNWLDRCQUE0QjtRQUNoQzs7QUFJUjtJQUNJO1FBQ0ksa0JBQWtCO0lBQ3RCO0lBQ0E7UUFDSTtJQUNKO0FBQ0oiLCJmaWxlIjoic3JjL2luZGV4LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImJsdXItaGFzaCB7XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcblxuICAgICYgY2FudmFzIHtcbiAgICAgICAgb3BhY2l0eTogMC42O1xuICAgICAgICBmaWx0ZXI6IGJsdXIoMzBweCk7XG4gICAgfVxuXG4gICAgJiBpbWcge1xuICAgICAgICB0cmFuc2l0aW9uOiBvcGFjaXR5IDAuNnM7XG5cbiAgICAgICAgJi5ibHVycnkge1xuICAgICAgICAgICAgb3BhY2l0eTogMC42O1xuICAgICAgICAgICAgZmlsdGVyOiBibHVyKDMwcHgpO1xuICAgICAgICB9XG5cbiAgICAgICAgJi5zaGFycCB7XG4gICAgICAgICAgICBvcGFjaXR5OiAxO1xuICAgICAgICAgICAgYW5pbWF0aW9uOiBzaGFycGVuIDAuOHMgYm90aDtcbiAgICAgICAgfVxuICAgIH1cbn1cblxuQGtleWZyYW1lcyBzaGFycGVuIHtcbiAgICBmcm9tIHtcbiAgICAgICAgZmlsdGVyOiBibHVyKDMwcHgpO1xuICAgIH1cbiAgICB0byB7XG4gICAgICAgIGZpbHRlcjogYmx1cigwcHgpXG4gICAgfVxufVxuIl19 */

package/dist/style.min.css

@@ -0,0 +1,2 @@
+blur-hash{overflow:hidden}blur-hash canvas{filter:blur(30px);opacity:.6}blur-hash img{transition:opacity .6s}blur-hash img.blurry{filter:blur(30px);opacity:.6}blur-hash img.sharp{animation:sharpen .8s both;opacity:1}@keyframes sharpen{0%{filter:blur(30px)}to{filter:blur(0)}}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsVUFDSSxlQW9CSixDQWxCSSxpQkFFSSxpQkFBa0IsQ0FEbEIsVUFFSixDQUVBLGNBQ0ksc0JBV0osQ0FUSSxxQkFFSSxpQkFBa0IsQ0FEbEIsVUFFSixDQUVBLG9CQUVJLDBCQUE0QixDQUQ1QixTQUVKLENBSVIsbUJBQ0ksR0FDSSxpQkFDSixDQUNBLEdBQ0ksY0FDSixDQUNKIiwiZmlsZSI6InNyYy9pbmRleC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJibHVyLWhhc2gge1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG5cbiAgICAmIGNhbnZhcyB7XG4gICAgICAgIG9wYWNpdHk6IDAuNjtcbiAgICAgICAgZmlsdGVyOiBibHVyKDMwcHgpO1xuICAgIH1cblxuICAgICYgaW1nIHtcbiAgICAgICAgdHJhbnNpdGlvbjogb3BhY2l0eSAwLjZzO1xuXG4gICAgICAgICYuYmx1cnJ5IHtcbiAgICAgICAgICAgIG9wYWNpdHk6IDAuNjtcbiAgICAgICAgICAgIGZpbHRlcjogYmx1cigzMHB4KTtcbiAgICAgICAgfVxuXG4gICAgICAgICYuc2hhcnAge1xuICAgICAgICAgICAgb3BhY2l0eTogMTtcbiAgICAgICAgICAgIGFuaW1hdGlvbjogc2hhcnBlbiAwLjhzIGJvdGg7XG4gICAgICAgIH1cbiAgICB9XG59XG5cbkBrZXlmcmFtZXMgc2hhcnBlbiB7XG4gICAgZnJvbSB7XG4gICAgICAgIGZpbHRlcjogYmx1cigzMHB4KTtcbiAgICB9XG4gICAgdG8ge1xuICAgICAgICBmaWx0ZXI6IGJsdXIoMHB4KVxuICAgIH1cbn1cbiJdfQ== */

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@substrate-system/blur-hash",
+  "version": "0.0.0",
+  "description": "A blurry placeholder image web component",
+  "type": "module",
+  "main": "dist/index.js",
+  "bin": {
+    "blur": "dist/bin/index.js"
+  },
+  "files": [
+    "./dist/*"
+  ],
+  "scripts": {
+    "lint": "eslint \"./**/*.{ts,js}\"",
+    "build-tests": "esbuild test/index.ts --target=es2020 --bundle --keep-names > test/test-bundle.js",
+    "test": "npm run lint && npm run build && npm run build-tests && npm run test-tape-run && npm run test-bin",
+    "test-bin": "npm run build-bin && esbuild ./test/bin.ts > ./test/bin.js && node ./test/bin.js | tap-spec",
+    "test-tape-run": "cat test/index.html | tape-run --input=html --static=test | tap-spec",
+    "build-css": "postcss src/index.css --use postcss-nesting > dist/style.css",
+    "build-css:min": "postcss src/index.css --use cssnano postcss-nesting > dist/style.min.css",
+    "build-cjs": "esbuild src/*.ts --format=cjs --keep-names --tsconfig=tsconfig.build.json --outdir=./dist --out-extension:.js=.cjs --sourcemap",
+    "build-esm": "esbuild src/*.ts --format=esm --metafile=dist/meta.json --keep-names --tsconfig=tsconfig.build.json --outdir=./dist --sourcemap && tsc --emitDeclarationOnly --project tsconfig.build.json --outDir dist",
+    "build-esm:min": "esbuild ./src/*.ts --format=esm --keep-names --bundle --tsconfig=tsconfig.build.json --minify --out-extension:.js=.min.js --outdir=./dist --sourcemap",
+    "build-example": "mkdir -p ./public && rm -rf ./public/* && vite --base=\"/blur-hash\" build",
+    "build-docs": "typedoc --tsconfig tsconfig.build.json ./src/index.ts",
+    "build": "mkdir -p ./dist && rm -rf ./dist/* && npm run build-cjs && npm run build-esm && npm run build-esm:min && npm run build-css && npm run build-css:min",
+    "build-bin": "mkdir -p dist/bin && esbuild ./bin/index.ts > ./dist/bin/index.js",
+    "start": "vite",
+    "preversion": "npm run lint",
+    "version": "auto-changelog -p --template keepachangelog --breaking-pattern 'BREAKING CHANGE:' && git add CHANGELOG.md",
+    "postversion": "git push --follow-tags && npm publish",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "blurhash": "^2.0.5",
+    "image-size": "^1.1.1",
+    "yargs": "^17.7.2"
+  },
+  "devDependencies": {
+    "@bicycle-codes/debug": "^0.6.13",
+    "@bicycle-codes/dom": "^0.0.23",
+    "@bicycle-codes/tapzero": "^0.10.0",
+    "@typescript-eslint/eslint-plugin": "^7.9.0",
+    "@typescript-eslint/parser": "^7.9.0",
+    "auto-changelog": "^2.4.0",
+    "cssnano": "^7.0.3",
+    "esbuild": "^0.23.0",
+    "eslint": "^8.57.0",
+    "eslint-config-standard": "^17.1.0",
+    "inkjet": "^3.0.0",
+    "postcss": "^8.4.38",
+    "postcss-cli": "^11.0.0",
+    "postcss-nesting": "^12.1.5",
+    "tap-spec": "^5.0.0",
+    "tape-run": "^11.0.0",
+    "typedoc": "^0.26.2",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./*": {
+      "import": [
+        "./dist/*.js",
+        "./dist/*"
+      ],
+      "require": [
+        "./dist/*.cjs",
+        "./dist/*"
+      ]
+    }
+  },
+  "author": "nichoth <nichoth@nichoth.com> (https://nichoth.com)",
+  "license": "MIT",
+  "types": "./dist/index.d.ts",
+  "directories": {
+    "example": "example",
+    "test": "test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/substrate-system/blur-hash.git"
+  },
+  "keywords": [
+    "blurhash",
+    "blur",
+    "up",
+    "image",
+    "component"
+  ],
+  "bugs": {
+    "url": "https://github.com/substrate-system/blur-hash/issues"
+  },
+  "homepage": "https://github.com/substrate-system/blur-hash#readme"
+}