useblysh 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 RISHABH MISHRA
+
+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.md

@@ -0,0 +1,100 @@
+# ⚡ useblysh
+
+**High-performance visual hashing for seamless image loading.** The unified toolkit for Python and JavaScript to turn heavy images into elegant, byte-sized blurs.
+
+[![npm version](https://img.shields.io/npm/v/useblysh?color=blue&style=flat-square)](https://www.npmjs.com/package/useblysh)
+[![pypi version](https://img.shields.io/pypi/v/useblysh?color=green&style=flat-square)](https://pypi.org/project/useblysh)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)
+
+---
+
+## 🌟 Why useblysh?
+
+Standard `loading="lazy"` leaves users staring at empty white boxes. **useblysh** eliminates this "broken" feel by encoding your images into tiny strings that can be sent inside your JSON API response.
+
+* **Full-Stack:** Identical hashing logic for Python (Backend) and React (Frontend).
+* **Zero Layout Shift:** Reserve image space instantly to prevent page jumping.
+* **Performance:** Replace 1MB images with 20-byte strings during the initial load.
+* **Modern:** Fully typed with TypeScript and optimized for React 18/19.
+  
+<img width="1441" height="387" alt="image" src="https://github.com/user-attachments/assets/3e9df482-5872-49d8-8fcf-f63fdaacde56" />
+
+<img width="1441" height="387" alt="image" src="https://github.com/user-attachments/assets/50292c6d-f475-49ca-88bb-1fbeb74307be" />
+
+---
+
+## 🛠️ Installation
+
+### Frontend (React/NPM)
+```bash
+npm install useblysh
+```
+
+
+---
+
+## 🚀 Simple Examples
+
+
+### **Generate Hash**
+Generate hashes directly in the browser during an image upload.
+
+```tsx
+import { encodeImage } from 'useblysh';
+
+const handleUpload = (event) => {
+  const file = event.target.files[0];
+  const img = new Image();
+  img.src = URL.createObjectURL(file);
+  
+  img.onload = () => {
+    // Generate the hash from the image element
+    const hash = encodeImage(img);
+    console.log("Generated Hash:", hash);
+    
+    // Send { file, hash } to your server
+  };
+};
+```
+
+### **Frontend: Display Placeholder (React)**
+The `ImageHash` component handles everything: it shows the blur immediately and fades in the real image once it's ready.
+
+```tsx
+import { ImageHash } from 'useblysh';
+
+const MyGallery = ({ storedHash, imageUrl }) => (
+  <ImageHash 
+    hash={storedHash}        // The short string from your DB
+    src={imageUrl}          // The real high-quality image URL
+    className="w-full h-64 rounded-xl"
+  />
+);
+```
+
+
+
+---
+
+## 💡 Use Cases
+
+### 1. Progressive Image Loading
+Instead of showing a spinner or a blank box, show a beautiful blurred version of the actual image. This keeps users engaged and makes the site feel faster.
+
+### 2. Social Media Feeds
+For infinite scroll feeds (like Instagram or Pinterest), send the `useblysh` string in your initial JSON request. The app can render the entire feed layout with placeholders before a single byte of actual image data is even downloaded.
+
+### 3. SEO & Layout Stability (CLS)
+Prevent "layout shift" where content jumps around as images load. `useblysh` reserves the correct aspect ratio and space immediately.
+
+---
+
+## 📖 How it Works
+
+**Blysh** uses a Discrete Cosine Transform (DCT) to extract the most important color frequencies from an image.
+1. **Encoding:** The image is downsampled and converted into a set of mathematical factors, then compressed into a **Base83** string.
+2. **Decoding:** The frontend takes that string and reconstructs a low-resolution version of the original image, applying a smooth blur filter for an elegant look.
+
+---
+
+**Built with ❤️ for the modern web.**

package/dist/decoder.d.ts

@@ -0,0 +1 @@
+export declare const decode: (hash: string, width: number, height: number, punch?: number) => Uint8ClampedArray;

package/dist/encoder.d.ts

@@ -0,0 +1,5 @@
+export declare const encode: (pixels: Uint8ClampedArray, width: number, height: number, componentsX?: number, componentsY?: number) => string;
+/**
+ * Encodes an HTMLImageElement into a hash string.
+ */
+export declare const encodeImage: (image: HTMLImageElement, componentsX?: number, componentsY?: number) => string;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './utils';
+export * from './encoder';
+export * from './decoder';
+export * from './react';

package/dist/react.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export interface ImageHashCanvasProps extends React.CanvasHTMLAttributes<HTMLCanvasElement> {
+    hash: string;
+    width?: number;
+    height?: number;
+    punch?: number;
+}
+export declare const ImageHashCanvas: React.ForwardRefExoticComponent<ImageHashCanvasProps & React.RefAttributes<HTMLCanvasElement>>;
+export interface ImageHashProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    hash: string;
+    src: string;
+}
+/**
+ * A smart image component that shows a blurred placeholder (hash)
+ * until the actual image (src) loads.
+ */
+export declare const ImageHash: React.FC<ImageHashProps>;

package/dist/useblysh.js

@@ -0,0 +1,22 @@
+(function(m,T){typeof exports=="object"&&typeof module<"u"?T(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],T):(m=typeof globalThis<"u"?globalThis:m||self,T(m.UseBlysh={},m.React))})(this,(function(m,T){"use strict";const H="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~",O=(r,t)=>{let s="";for(let c=1;c<=t;c++){const o=Math.floor(r/Math.pow(83,t-c))%83;s+=H[o]}return s},I=r=>{let t=0;for(let s=0;s<r.length;s++){const c=r[s],o=H.indexOf(c);t=t*83+o}return t},S=r=>{const t=r/255;return t<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)},P=r=>{const t=Math.max(0,Math.min(1,r));return t<=.0031308?Math.round(t*12.92*255):Math.round((1.055*Math.pow(t,.4166666666666667)-.055)*255)},C=(r,t)=>Math.sign(r)*Math.pow(Math.abs(r),t),G=(r,t,s,c=4,o=3)=>{if(c<1||c>9||o<1||o>9)throw new Error("Components must be between 1 and 9");const i=[];for(let a=0;a<o;a++)for(let l=0;l<c;l++){const R=(l===0?1:2)*(a===0?1:2);let h=0,y=0,w=0;for(let M=0;M<s;M++)for(let x=0;x<t;x++){const k=Math.cos(Math.PI*l*x/t)*Math.cos(Math.PI*a*M/s),Y=(M*t+x)*4;h+=k*S(r[Y]),y+=k*S(r[Y+1]),w+=k*S(r[Y+2])}const A=R/(t*s);i.push([h*A,y*A,w*A])}const b=i[0],v=i.slice(1);let E="";E+=O(c-1+(o-1)*9,1);let _=1;if(v.length>0){const a=Math.max(...v.map(R=>Math.max(Math.abs(R[0]),Math.abs(R[1]),Math.abs(R[2])))),l=Math.max(0,Math.min(82,Math.floor(a*166-.5)));E+=O(l,1),_=(l+1)/166}else E+=O(0,1);E+=O((a=>{const l=P(a[0]),R=P(a[1]),h=P(a[2]);return(l<<16)+(R<<8)+h})(b),4);const p=(a,l)=>{const R=Math.max(0,Math.min(18,Math.floor(C(a[0]/l,.5)*9+9.5))),h=Math.max(0,Math.min(18,Math.floor(C(a[1]/l,.5)*9+9.5))),y=Math.max(0,Math.min(18,Math.floor(C(a[2]/l,.5)*9+9.5)));return R*19*19+h*19+y};for(const a of v)E+=O(p(a,_),2);return E},oe=(r,t=4,s=3)=>{const c=document.createElement("canvas");c.width=32,c.height=32;const o=c.getContext("2d");if(!o)throw new Error("Could not create canvas context");o.drawImage(r,0,0,32,32);const i=o.getImageData(0,0,32,32);return G(i.data,32,32,t,s)},X=(r,t,s,c=1)=>{if(!r||r.length<6)throw new Error("The hash is invalid.");const o=I(r[0]),i=o%9+1,b=Math.floor(o/9)+1,E=(I(r[1])+1)/166,_=[],g=I(r.substring(2,6));_.push([S(g>>16&255),S(g>>8&255),S(g&255)]);for(let a=1;a<i*b;a++){const l=I(r.substring(6+(a-1)*2,6+a*2));_.push([C((Math.floor(l/361)-9)/9,2)*E*c,C((Math.floor(l/19%19)-9)/9,2)*E*c,C((l%19-9)/9,2)*E*c])}const p=new Uint8ClampedArray(t*s*4);for(let a=0;a<s;a++)for(let l=0;l<t;l++){let R=0,h=0,y=0;for(let A=0;A<b;A++)for(let M=0;M<i;M++){const x=Math.cos(Math.PI*M*l/t)*Math.cos(Math.PI*A*a/s),k=_[A*i+M];R+=k[0]*x,h+=k[1]*x,y+=k[2]*x}const w=(a*t+l)*4;p[w]=P(R),p[w+1]=P(h),p[w+2]=P(y),p[w+3]=255}return p};var F={exports:{}},N={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var Z;function se(){if(Z)return N;Z=1;var r=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function s(c,o,i){var b=null;if(i!==void 0&&(b=""+i),o.key!==void 0&&(b=""+o.key),"key"in o){i={};for(var v in o)v!=="key"&&(i[v]=o[v])}else i=o;return o=i.ref,{$$typeof:r,type:c,key:b,ref:o!==void 0?o:null,props:i}}return N.Fragment=t,N.jsx=s,N.jsxs=s,N}var D={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var Q;function ce(){return Q||(Q=1,process.env.NODE_ENV!=="production"&&(function(){function r(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===me?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case y:return"Fragment";case A:return"Profiler";case w:return"StrictMode";case Y:return"Suspense";case ue:return"SuspenseList";case de:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case h:return"Portal";case x:return e.displayName||"Context";case M:return(e._context.displayName||"Context")+".Consumer";case k:var n=e.render;return e=e.displayName,e||(e=n.displayName||n.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case fe:return n=e.displayName||null,n!==null?n:r(e.type)||"Memo";case V:n=e._payload,e=e._init;try{return r(e(n))}catch{}}return null}function t(e){return""+e}function s(e){try{t(e);var n=!1}catch{n=!0}if(n){n=console;var u=n.error,f=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return u.call(n,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",f),t(e)}}function c(e){if(e===y)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===V)return"<...>";try{var n=r(e);return n?"<"+n+">":"<...>"}catch{return"<...>"}}function o(){var e=z.A;return e===null?null:e.getOwner()}function i(){return Error("react-stack-top-frame")}function b(e){if(K.call(e,"key")){var n=Object.getOwnPropertyDescriptor(e,"key").get;if(n&&n.isReactWarning)return!1}return e.key!==void 0}function v(e,n){function u(){ee||(ee=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",n))}u.isReactWarning=!0,Object.defineProperty(e,"key",{get:u,configurable:!0})}function E(){var e=r(this.type);return te[e]||(te[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function _(e,n,u,f,U,J){var d=u.ref;return e={$$typeof:R,type:e,key:n,props:u,_owner:f},(d!==void 0?d:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:E}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:U}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:J}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function g(e,n,u,f,U,J){var d=n.children;if(d!==void 0)if(f)if(be(d)){for(f=0;f<d.length;f++)p(d[f]);Object.freeze&&Object.freeze(d)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else p(d);if(K.call(n,"key")){d=r(e);var j=Object.keys(n).filter(function(Ee){return Ee!=="key"});f=0<j.length?"{key: someKey, "+j.join(": ..., ")+": ...}":"{key: someKey}",ae[d+f]||(j=0<j.length?"{"+j.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,f,d,j,d),ae[d+f]=!0)}if(d=null,u!==void 0&&(s(u),d=""+u),b(n)&&(s(n.key),d=""+n.key),"key"in n){u={};for(var q in n)q!=="key"&&(u[q]=n[q])}else u=n;return d&&v(u,typeof e=="function"?e.displayName||e.name||"Unknown":e),_(e,d,u,o(),U,J)}function p(e){a(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===V&&(e._payload.status==="fulfilled"?a(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function a(e){return typeof e=="object"&&e!==null&&e.$$typeof===R}var l=T,R=Symbol.for("react.transitional.element"),h=Symbol.for("react.portal"),y=Symbol.for("react.fragment"),w=Symbol.for("react.strict_mode"),A=Symbol.for("react.profiler"),M=Symbol.for("react.consumer"),x=Symbol.for("react.context"),k=Symbol.for("react.forward_ref"),Y=Symbol.for("react.suspense"),ue=Symbol.for("react.suspense_list"),fe=Symbol.for("react.memo"),V=Symbol.for("react.lazy"),de=Symbol.for("react.activity"),me=Symbol.for("react.client.reference"),z=l.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,K=Object.prototype.hasOwnProperty,be=Array.isArray,B=console.createTask?console.createTask:function(){return null};l={react_stack_bottom_frame:function(e){return e()}};var ee,te={},re=l.react_stack_bottom_frame.bind(l,i)(),ne=B(c(i)),ae={};D.Fragment=y,D.jsx=function(e,n,u){var f=1e4>z.recentlyCreatedOwnerStacks++;return g(e,n,u,!1,f?Error("react-stack-top-frame"):re,f?B(c(e)):ne)},D.jsxs=function(e,n,u){var f=1e4>z.recentlyCreatedOwnerStacks++;return g(e,n,u,!0,f?Error("react-stack-top-frame"):re,f?B(c(e)):ne)}})()),D}var $;function le(){return $||($=1,process.env.NODE_ENV==="production"?F.exports=se():F.exports=ce()),F.exports}var L=le();const W=T.forwardRef(({hash:r,width:t=32,height:s=32,punch:c=1,...o},i)=>{const b=T.useRef(null),[v,E]=T.useState(!1);return T.useImperativeHandle(i,()=>b.current),T.useEffect(()=>{const _=b.current;if(!_)return;const g=new IntersectionObserver(p=>{p[0].isIntersecting&&(E(!0),g.disconnect())},{rootMargin:"100px"});return g.observe(_),()=>g.disconnect()},[]),T.useEffect(()=>{const _=b.current;if(!_||!r||!v)return;const g=_.getContext("2d");if(!g)return;const p=setTimeout(()=>{try{const a=X(r,t,s,c),l=new ImageData(a,t,s);g.putImageData(l,0,0)}catch(a){console.error("Failed to render ImageHash:",a)}},0);return()=>clearTimeout(p)},[r,t,s,c,v]),L.jsx("canvas",{ref:b,width:t,height:s,style:{imageRendering:"pixelated",...o.style},...o})});W.displayName="ImageHashCanvas";const ie=({hash:r,src:t,className:s,style:c,...o})=>{const[i,b]=T.useState(!1),{style:v,...E}=o;return L.jsxs("div",{className:s,style:{position:"relative",overflow:"hidden",display:"inline-block",...c},children:[L.jsx(W,{hash:r,style:{position:"absolute",inset:0,width:"100%",height:"100%",opacity:i?0:1,transition:"opacity 0.5s ease-in-out",pointerEvents:"none"}}),L.jsx("img",{...E,src:t,loading:"lazy",onLoad:()=>b(!0),style:{display:"block",width:"100%",height:"100%",opacity:i?1:0,transition:"opacity 0.5s ease-in-out",...v}})]})};m.CHARACTERS=H,m.ImageHash=ie,m.ImageHashCanvas=W,m.decode=X,m.decodeBase83=I,m.encode=G,m.encodeBase83=O,m.encodeImage=oe,m.linearToSrgb=P,m.signPow=C,m.srgbToLinear=S,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));

package/dist/useblysh.mjs

@@ -0,0 +1,478 @@
+import ee, { forwardRef as ie, useRef as ue, useState as fe, useImperativeHandle as de, useEffect as X } from "react";
+const te = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~", C = (r, t) => {
+  let s = "";
+  for (let c = 1; c <= t; c++) {
+    const o = Math.floor(r / Math.pow(83, t - c)) % 83;
+    s += te[o];
+  }
+  return s;
+}, D = (r) => {
+  let t = 0;
+  for (let s = 0; s < r.length; s++) {
+    const c = r[s], o = te.indexOf(c);
+    t = t * 83 + o;
+  }
+  return t;
+}, w = (r) => {
+  const t = r / 255;
+  return t <= 0.04045 ? t / 12.92 : Math.pow((t + 0.055) / 1.055, 2.4);
+}, O = (r) => {
+  const t = Math.max(0, Math.min(1, r));
+  return t <= 31308e-7 ? Math.round(t * 12.92 * 255) : Math.round((1.055 * Math.pow(t, 1 / 2.4) - 0.055) * 255);
+}, P = (r, t) => Math.sign(r) * Math.pow(Math.abs(r), t), me = (r, t, s, c = 4, o = 3) => {
+  if (c < 1 || c > 9 || o < 1 || o > 9)
+    throw new Error("Components must be between 1 and 9");
+  const i = [];
+  for (let a = 0; a < o; a++)
+    for (let l = 0; l < c; l++) {
+      const v = (l === 0 ? 1 : 2) * (a === 0 ? 1 : 2);
+      let g = 0, T = 0, M = 0;
+      for (let x = 0; x < s; x++)
+        for (let y = 0; y < t; y++) {
+          const A = Math.cos(Math.PI * l * y / t) * Math.cos(Math.PI * a * x / s), S = (x * t + y) * 4;
+          g += A * w(r[S]), T += A * w(r[S + 1]), M += A * w(r[S + 2]);
+        }
+      const h = v / (t * s);
+      i.push([g * h, T * h, M * h]);
+    }
+  const m = i[0], E = i.slice(1);
+  let b = "";
+  b += C(c - 1 + (o - 1) * 9, 1);
+  let p = 1;
+  if (E.length > 0) {
+    const a = Math.max(...E.map((v) => Math.max(Math.abs(v[0]), Math.abs(v[1]), Math.abs(v[2])))), l = Math.max(0, Math.min(82, Math.floor(a * 166 - 0.5)));
+    b += C(l, 1), p = (l + 1) / 166;
+  } else
+    b += C(0, 1);
+  b += C(((a) => {
+    const l = O(a[0]), v = O(a[1]), g = O(a[2]);
+    return (l << 16) + (v << 8) + g;
+  })(m), 4);
+  const R = (a, l) => {
+    const v = Math.max(0, Math.min(18, Math.floor(P(a[0] / l, 0.5) * 9 + 9.5))), g = Math.max(0, Math.min(18, Math.floor(P(a[1] / l, 0.5) * 9 + 9.5))), T = Math.max(0, Math.min(18, Math.floor(P(a[2] / l, 0.5) * 9 + 9.5)));
+    return v * 19 * 19 + g * 19 + T;
+  };
+  for (const a of E)
+    b += C(R(a, p), 2);
+  return b;
+}, Re = (r, t = 4, s = 3) => {
+  const c = document.createElement("canvas");
+  c.width = 32, c.height = 32;
+  const o = c.getContext("2d");
+  if (!o) throw new Error("Could not create canvas context");
+  o.drawImage(r, 0, 0, 32, 32);
+  const i = o.getImageData(0, 0, 32, 32);
+  return me(i.data, 32, 32, t, s);
+}, be = (r, t, s, c = 1) => {
+  if (!r || r.length < 6)
+    throw new Error("The hash is invalid.");
+  const o = D(r[0]), i = o % 9 + 1, m = Math.floor(o / 9) + 1, b = (D(r[1]) + 1) / 166, p = [], _ = D(r.substring(2, 6));
+  p.push([
+    w(_ >> 16 & 255),
+    w(_ >> 8 & 255),
+    w(_ & 255)
+  ]);
+  for (let a = 1; a < i * m; a++) {
+    const l = D(r.substring(6 + (a - 1) * 2, 6 + a * 2));
+    p.push([
+      P((Math.floor(l / 361) - 9) / 9, 2) * b * c,
+      P((Math.floor(l / 19 % 19) - 9) / 9, 2) * b * c,
+      P((l % 19 - 9) / 9, 2) * b * c
+    ]);
+  }
+  const R = new Uint8ClampedArray(t * s * 4);
+  for (let a = 0; a < s; a++)
+    for (let l = 0; l < t; l++) {
+      let v = 0, g = 0, T = 0;
+      for (let h = 0; h < m; h++)
+        for (let x = 0; x < i; x++) {
+          const y = Math.cos(Math.PI * x * l / t) * Math.cos(Math.PI * h * a / s), A = p[h * i + x];
+          v += A[0] * y, g += A[1] * y, T += A[2] * y;
+        }
+      const M = (a * t + l) * 4;
+      R[M] = O(v), R[M + 1] = O(g), R[M + 2] = O(T), R[M + 3] = 255;
+    }
+  return R;
+};
+var Y = { exports: {} }, j = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var Z;
+function Ee() {
+  if (Z) return j;
+  Z = 1;
+  var r = Symbol.for("react.transitional.element"), t = Symbol.for("react.fragment");
+  function s(c, o, i) {
+    var m = null;
+    if (i !== void 0 && (m = "" + i), o.key !== void 0 && (m = "" + o.key), "key" in o) {
+      i = {};
+      for (var E in o)
+        E !== "key" && (i[E] = o[E]);
+    } else i = o;
+    return o = i.ref, {
+      $$typeof: r,
+      type: c,
+      key: m,
+      ref: o !== void 0 ? o : null,
+      props: i
+    };
+  }
+  return j.Fragment = t, j.jsx = s, j.jsxs = s, j;
+}
+var I = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var Q;
+function ve() {
+  return Q || (Q = 1, process.env.NODE_ENV !== "production" && (function() {
+    function r(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === se ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case T:
+          return "Fragment";
+        case h:
+          return "Profiler";
+        case M:
+          return "StrictMode";
+        case S:
+          return "Suspense";
+        case ne:
+          return "SuspenseList";
+        case oe:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case g:
+            return "Portal";
+          case y:
+            return e.displayName || "Context";
+          case x:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case A:
+            var n = e.render;
+            return e = e.displayName, e || (e = n.displayName || n.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case ae:
+            return n = e.displayName || null, n !== null ? n : r(e.type) || "Memo";
+          case F:
+            n = e._payload, e = e._init;
+            try {
+              return r(e(n));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function t(e) {
+      return "" + e;
+    }
+    function s(e) {
+      try {
+        t(e);
+        var n = !1;
+      } catch {
+        n = !0;
+      }
+      if (n) {
+        n = console;
+        var u = n.error, f = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return u.call(
+          n,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          f
+        ), t(e);
+      }
+    }
+    function c(e) {
+      if (e === T) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === F)
+        return "<...>";
+      try {
+        var n = r(e);
+        return n ? "<" + n + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function o() {
+      var e = q.A;
+      return e === null ? null : e.getOwner();
+    }
+    function i() {
+      return Error("react-stack-top-frame");
+    }
+    function m(e) {
+      if (V.call(e, "key")) {
+        var n = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (n && n.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function E(e, n) {
+      function u() {
+        z || (z = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          n
+        ));
+      }
+      u.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: u,
+        configurable: !0
+      });
+    }
+    function b() {
+      var e = r(this.type);
+      return H[e] || (H[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function p(e, n, u, f, N, U) {
+      var d = u.ref;
+      return e = {
+        $$typeof: v,
+        type: e,
+        key: n,
+        props: u,
+        _owner: f
+      }, (d !== void 0 ? d : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: b
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: N
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: U
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function _(e, n, u, f, N, U) {
+      var d = n.children;
+      if (d !== void 0)
+        if (f)
+          if (ce(d)) {
+            for (f = 0; f < d.length; f++)
+              R(d[f]);
+            Object.freeze && Object.freeze(d);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else R(d);
+      if (V.call(n, "key")) {
+        d = r(e);
+        var k = Object.keys(n).filter(function(le) {
+          return le !== "key";
+        });
+        f = 0 < k.length ? "{key: someKey, " + k.join(": ..., ") + ": ...}" : "{key: someKey}", B[d + f] || (k = 0 < k.length ? "{" + k.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          f,
+          d,
+          k,
+          d
+        ), B[d + f] = !0);
+      }
+      if (d = null, u !== void 0 && (s(u), d = "" + u), m(n) && (s(n.key), d = "" + n.key), "key" in n) {
+        u = {};
+        for (var W in n)
+          W !== "key" && (u[W] = n[W]);
+      } else u = n;
+      return d && E(
+        u,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), p(
+        e,
+        d,
+        u,
+        o(),
+        N,
+        U
+      );
+    }
+    function R(e) {
+      a(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === F && (e._payload.status === "fulfilled" ? a(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function a(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === v;
+    }
+    var l = ee, v = Symbol.for("react.transitional.element"), g = Symbol.for("react.portal"), T = Symbol.for("react.fragment"), M = Symbol.for("react.strict_mode"), h = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), y = Symbol.for("react.context"), A = Symbol.for("react.forward_ref"), S = Symbol.for("react.suspense"), ne = Symbol.for("react.suspense_list"), ae = Symbol.for("react.memo"), F = Symbol.for("react.lazy"), oe = Symbol.for("react.activity"), se = Symbol.for("react.client.reference"), q = l.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, V = Object.prototype.hasOwnProperty, ce = Array.isArray, L = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    l = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var z, H = {}, J = l.react_stack_bottom_frame.bind(
+      l,
+      i
+    )(), G = L(c(i)), B = {};
+    I.Fragment = T, I.jsx = function(e, n, u) {
+      var f = 1e4 > q.recentlyCreatedOwnerStacks++;
+      return _(
+        e,
+        n,
+        u,
+        !1,
+        f ? Error("react-stack-top-frame") : J,
+        f ? L(c(e)) : G
+      );
+    }, I.jsxs = function(e, n, u) {
+      var f = 1e4 > q.recentlyCreatedOwnerStacks++;
+      return _(
+        e,
+        n,
+        u,
+        !0,
+        f ? Error("react-stack-top-frame") : J,
+        f ? L(c(e)) : G
+      );
+    };
+  })()), I;
+}
+var K;
+function pe() {
+  return K || (K = 1, process.env.NODE_ENV === "production" ? Y.exports = Ee() : Y.exports = ve()), Y.exports;
+}
+var $ = pe();
+const re = ie(
+  ({ hash: r, width: t = 32, height: s = 32, punch: c = 1, ...o }, i) => {
+    const m = ue(null), [E, b] = fe(!1);
+    return de(i, () => m.current), X(() => {
+      const p = m.current;
+      if (!p) return;
+      const _ = new IntersectionObserver(
+        (R) => {
+          R[0].isIntersecting && (b(!0), _.disconnect());
+        },
+        { rootMargin: "100px" }
+        // Start decoding 100px before it enters the screen
+      );
+      return _.observe(p), () => _.disconnect();
+    }, []), X(() => {
+      const p = m.current;
+      if (!p || !r || !E) return;
+      const _ = p.getContext("2d");
+      if (!_) return;
+      const R = setTimeout(() => {
+        try {
+          const a = be(r, t, s, c), l = new ImageData(a, t, s);
+          _.putImageData(l, 0, 0);
+        } catch (a) {
+          console.error("Failed to render ImageHash:", a);
+        }
+      }, 0);
+      return () => clearTimeout(R);
+    }, [r, t, s, c, E]), /* @__PURE__ */ $.jsx(
+      "canvas",
+      {
+        ref: m,
+        width: t,
+        height: s,
+        style: { imageRendering: "pixelated", ...o.style },
+        ...o
+      }
+    );
+  }
+);
+re.displayName = "ImageHashCanvas";
+const ge = ({ hash: r, src: t, className: s, style: c, ...o }) => {
+  const [i, m] = ee.useState(!1), { style: E, ...b } = o;
+  return /* @__PURE__ */ $.jsxs(
+    "div",
+    {
+      className: s,
+      style: {
+        position: "relative",
+        overflow: "hidden",
+        display: "inline-block",
+        ...c
+      },
+      children: [
+        /* @__PURE__ */ $.jsx(
+          re,
+          {
+            hash: r,
+            style: {
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%",
+              opacity: i ? 0 : 1,
+              transition: "opacity 0.5s ease-in-out",
+              pointerEvents: "none"
+              // Prevent canvas from blocking right-clicks on the image
+            }
+          }
+        ),
+        /* @__PURE__ */ $.jsx(
+          "img",
+          {
+            ...b,
+            src: t,
+            loading: "lazy",
+            onLoad: () => m(!0),
+            style: {
+              display: "block",
+              width: "100%",
+              height: "100%",
+              opacity: i ? 1 : 0,
+              transition: "opacity 0.5s ease-in-out",
+              ...E
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  te as CHARACTERS,
+  ge as ImageHash,
+  re as ImageHashCanvas,
+  be as decode,
+  D as decodeBase83,
+  me as encode,
+  C as encodeBase83,
+  Re as encodeImage,
+  O as linearToSrgb,
+  P as signPow,
+  w as srgbToLinear
+};

package/dist/utils.d.ts

@@ -0,0 +1,6 @@
+export declare const CHARACTERS = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~";
+export declare const encodeBase83: (value: number, length: number) => string;
+export declare const decodeBase83: (str: string) => number;
+export declare const srgbToLinear: (value: number) => number;
+export declare const linearToSrgb: (value: number) => number;
+export declare const signPow: (value: number, exp: number) => number;

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "useblysh",
+  "version": "1.0.1",
+  "description": "High-performance visual hashing for seamless image loading. Encode images into tiny strings and decode into beautiful, fast-loading blurs.",
+  "main": "./dist/useblysh.js",
+  "module": "./dist/useblysh.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/useblysh.mjs",
+      "require": "./dist/useblysh.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "preview": "vite preview",
+    "test": "vitest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/R1SH4BH81/Blysh.git"
+  },
+  "homepage": "https://useblysh.vercel.app",
+  "bugs": {
+    "url": "https://useblysh.vercel.app/report-issue"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.0.0",
+    "vitest": "^2.1.8"
+  },
+  "keywords": [
+    "useblysh",
+    "placeholder",
+    "progressive-loading",
+    "image-performance",
+    "react",
+    "typescript",
+    "nextjs"
+  ],
+  "author": "Rishabh Mishra <rishabhmishra.81@gmail.com>",
+  "license": "MIT"
+}