@johnfmorton/some-shade 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [Unreleased]
+
+## [1.2.0] - 2026-04-16
+
+### Changed
+
+- Render at display size instead of full natural resolution — a 4000 px image shown at 800 CSS px now renders at ≤1600 px (at 2× DPR) instead of 8000 px
+- Replace PNG blob round-trip with direct canvas copy (`drawImage`) — eliminates PNG encoding and decoding overhead entirely
+
 ## 1.1.0 - 2026-03-01
 
 - Add `reference-width` attribute (default 1024) — normalizes `u_gridSize` and `u_dotRadius` by source image width so the dot pattern looks visually consistent regardless of image resolution
@@ -69,3 +78,5 @@
 - WebGL fallback to plain `<img>` when unavailable
 - React playground with live controls and code export
 - GitHub Pages deployment for playground
+
+[1.2.0]: https://github.com/johnfmorton/some-shade-web-component/releases/tag/v1.2.0

package/dist/index.d.ts

@@ -44,10 +44,8 @@ export declare class SomeShadeImage extends LitElement {
     coolColor: string;
     blendMode: number;
     referenceWidth: number;
-    loadingBlur: number;
     private _webglAvailable;
-    private _snapshotUrl;
-    private _snapshotLoaded;
+    private _snapshotReady;
     private _image;
     private _observer;
     private _visible;
@@ -59,11 +57,9 @@ export declare class SomeShadeImage extends LitElement {
     private _loadImage;
     private _scheduleRender;
     private _renderEffect;
-    private _onSnapshotLoad;
     /** Hide the rendered snapshot momentarily, then fade it back in.
      *  Useful for previewing the loading-blur transition. */
     replayTransition(delay?: number): void;
-    private _revokeSnapshot;
     private _getUniformValues;
     private _parseHexColor;
 }

package/dist/some-shade.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("lit"),s=require("lit/decorators.js");function U(e){return e.getContext("webgl",{alpha:!0,premultipliedAlpha:!1,preserveDrawingBuffer:!0})}function S(e,o,a){const t=e.createShader(o);if(!t)throw new Error("Failed to create shader");if(e.shaderSource(t,a),e.compileShader(t),!e.getShaderParameter(t,e.COMPILE_STATUS)){const u=e.getShaderInfoLog(t);throw e.deleteShader(t),new Error(`Shader compile error: ${u}`)}return t}function K(e,o,a){const t=S(e,e.VERTEX_SHADER,o),u=S(e,e.FRAGMENT_SHADER,a),n=e.createProgram();if(!n)throw new Error("Failed to create program");if(e.attachShader(n,t),e.attachShader(n,u),e.linkProgram(n),!e.getProgramParameter(n,e.LINK_STATUS)){const d=e.getProgramInfoLog(n);throw e.deleteProgram(n),new Error(`Program link error: ${d}`)}e.deleteShader(t),e.deleteShader(u);const r=new Map,g=e.getProgramParameter(n,e.ACTIVE_ATTRIBUTES);for(let d=0;d<g;d++){const f=e.getActiveAttrib(n,d);f&&r.set(f.name,e.getAttribLocation(n,f.name))}const c=new Map,m=e.getProgramParameter(n,e.ACTIVE_UNIFORMS);for(let d=0;d<m;d++){const f=e.getActiveUniform(n,d);if(f){const h=e.getUniformLocation(n,f.name);h&&c.set(f.name,h)}}return{program:n,attribLocations:r,uniformLocations:c}}function k(e,o,a){for(const[t,u]of Object.entries(a)){const n=o.uniformLocations.get(t);if(n){if(typeof u=="number")e.uniform1f(n,u);else if(Array.isArray(u))switch(u.length){case 2:e.uniform2fv(n,u);break;case 3:e.uniform3fv(n,u);break;case 4:e.uniform4fv(n,u);break}}}}function D(e,o){const a=e.createTexture();if(!a)throw new Error("Failed to create texture");return e.bindTexture(e.TEXTURE_2D,a),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,o),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),{texture:a,width:o.naturalWidth,height:o.naturalHeight}}function L(e,o){const a=new Float32Array([-1,-1,0,1,1,-1,1,1,-1,1,0,0,1,1,1,0]),t=e.createBuffer();if(!t)throw new Error("Failed to create buffer");e.bindBuffer(e.ARRAY_BUFFER,t),e.bufferData(e.ARRAY_BUFFER,a,e.STATIC_DRAW);const u=4*Float32Array.BYTES_PER_ELEMENT,n=o.attribLocations.get("a_position");n!==void 0&&n!==-1&&(e.enableVertexAttribArray(n),e.vertexAttribPointer(n,2,e.FLOAT,!1,u,0));const r=o.attribLocations.get("a_texCoord");return r!==void 0&&r!==-1&&(e.enableVertexAttribArray(r),e.vertexAttribPointer(r,2,e.FLOAT,!1,u,2*Float32Array.BYTES_PER_ELEMENT)),t}function M(e){e.drawArrays(e.TRIANGLE_STRIP,0,4)}const z=`precision mediump float;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("lit"),l=require("lit/decorators.js");function M(e){return e.getContext("webgl",{alpha:!0,premultipliedAlpha:!1,preserveDrawingBuffer:!0})}function K(e,o,n){const i=e.createShader(o);if(!i)throw new Error("Failed to create shader");if(e.shaderSource(i,n),e.compileShader(i),!e.getShaderParameter(i,e.COMPILE_STATUS)){const t=e.getShaderInfoLog(i);throw e.deleteShader(i),new Error(`Shader compile error: ${t}`)}return i}function U(e,o,n){const i=K(e,e.VERTEX_SHADER,o),t=K(e,e.FRAGMENT_SHADER,n),r=e.createProgram();if(!r)throw new Error("Failed to create program");if(e.attachShader(r,i),e.attachShader(r,t),e.linkProgram(r),!e.getProgramParameter(r,e.LINK_STATUS)){const f=e.getProgramInfoLog(r);throw e.deleteProgram(r),new Error(`Program link error: ${f}`)}e.deleteShader(i),e.deleteShader(t);const d=new Map,h=e.getProgramParameter(r,e.ACTIVE_ATTRIBUTES);for(let f=0;f<h;f++){const c=e.getActiveAttrib(r,f);c&&d.set(c.name,e.getAttribLocation(r,c.name))}const m=new Map,s=e.getProgramParameter(r,e.ACTIVE_UNIFORMS);for(let f=0;f<s;f++){const c=e.getActiveUniform(r,f);if(c){const p=e.getUniformLocation(r,c.name);p&&m.set(c.name,p)}}return{program:r,attribLocations:d,uniformLocations:m}}function z(e,o,n){for(const[i,t]of Object.entries(n)){const r=o.uniformLocations.get(i);if(r){if(typeof t=="number")e.uniform1f(r,t);else if(Array.isArray(t))switch(t.length){case 2:e.uniform2fv(r,t);break;case 3:e.uniform3fv(r,t);break;case 4:e.uniform4fv(r,t);break}}}}function P(e,o){const n=e.createTexture();if(!n)throw new Error("Failed to create texture");return e.bindTexture(e.TEXTURE_2D,n),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,o),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),{texture:n,width:o.naturalWidth,height:o.naturalHeight}}function I(e,o){const n=new Float32Array([-1,-1,0,1,1,-1,1,1,-1,1,0,0,1,1,1,0]),i=e.createBuffer();if(!i)throw new Error("Failed to create buffer");e.bindBuffer(e.ARRAY_BUFFER,i),e.bufferData(e.ARRAY_BUFFER,n,e.STATIC_DRAW);const t=4*Float32Array.BYTES_PER_ELEMENT,r=o.attribLocations.get("a_position");r!==void 0&&r!==-1&&(e.enableVertexAttribArray(r),e.vertexAttribPointer(r,2,e.FLOAT,!1,t,0));const d=o.attribLocations.get("a_texCoord");return d!==void 0&&d!==-1&&(e.enableVertexAttribArray(d),e.vertexAttribPointer(d,2,e.FLOAT,!1,t,2*Float32Array.BYTES_PER_ELEMENT)),i}function L(e){e.drawArrays(e.TRIANGLE_STRIP,0,4)}const V=`precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -84,7 +84,7 @@ void main() {
 
   gl_FragColor = vec4(outR, outG, outB, texture2D(u_image, v_texCoord).a);
 }
-`,y=`attribute vec2 a_position;
+`,w=`attribute vec2 a_position;
 attribute vec2 a_texCoord;
 varying vec2 v_texCoord;
 
@@ -92,7 +92,7 @@ void main() {
   gl_Position = vec4(a_position, 0.0, 1.0);
   v_texCoord = a_texCoord;
 }
-`,P={name:"halftone-cmyk",fragmentShader:z,vertexShader:y,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_angleC",type:"float",default:15,attribute:"angle-c"},{name:"u_angleM",type:"float",default:75,attribute:"angle-m"},{name:"u_angleY",type:"float",default:0,attribute:"angle-y"},{name:"u_angleK",type:"float",default:45,attribute:"angle-k"},{name:"u_showC",type:"float",default:1,attribute:"show-c"},{name:"u_showM",type:"float",default:1,attribute:"show-m"},{name:"u_showY",type:"float",default:1,attribute:"show-y"},{name:"u_showK",type:"float",default:1,attribute:"show-k"},{name:"u_intensityK",type:"float",default:1,attribute:"intensity-k"}]},I=`precision mediump float;
+`,N={name:"halftone-cmyk",fragmentShader:V,vertexShader:w,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_angleC",type:"float",default:15,attribute:"angle-c"},{name:"u_angleM",type:"float",default:75,attribute:"angle-m"},{name:"u_angleY",type:"float",default:0,attribute:"angle-y"},{name:"u_angleK",type:"float",default:45,attribute:"angle-k"},{name:"u_showC",type:"float",default:1,attribute:"show-c"},{name:"u_showM",type:"float",default:1,attribute:"show-m"},{name:"u_showY",type:"float",default:1,attribute:"show-y"},{name:"u_showK",type:"float",default:1,attribute:"show-k"},{name:"u_intensityK",type:"float",default:1,attribute:"intensity-k"}]},W=`precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -134,7 +134,7 @@ void main() {
 
   gl_FragColor = vec4(result, color.a);
 }
-`,V={name:"halftone-duotone",fragmentShader:I,vertexShader:y,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_duotoneColor",type:"vec3",default:[0,.6,.8],attribute:"duotone-color"},{name:"u_angle",type:"float",default:0,attribute:"angle"}]},N=`precision mediump float;
+`,O={name:"halftone-duotone",fragmentShader:W,vertexShader:w,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_duotoneColor",type:"vec3",default:[0,.6,.8],attribute:"duotone-color"},{name:"u_angle",type:"float",default:0,attribute:"angle"}]},F=`precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -190,7 +190,7 @@ void main() {
 
   gl_FragColor = vec4(result, 1.0);
 }
-`,O={name:"dot-grid",fragmentShader:N,vertexShader:y,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_dotOffset",type:"vec2",default:[.5,.5],attribute:"dot-offset"},{name:"u_bgColor",type:"vec3",default:[1,1,1],attribute:"bg-color"},{name:"u_angle",type:"float",default:0,attribute:"angle"}]},F=`precision mediump float;
+`,Y={name:"dot-grid",fragmentShader:F,vertexShader:w,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_dotOffset",type:"vec2",default:[.5,.5],attribute:"dot-offset"},{name:"u_bgColor",type:"vec3",default:[1,1,1],attribute:"bg-color"},{name:"u_angle",type:"float",default:0,attribute:"angle"}]},B=`precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -273,14 +273,12 @@ void main() {
 
   gl_FragColor = vec4(clamp(result, 0.0, 1.0), color.a);
 }
-`,W={name:"technicolor-2strip",fragmentShader:F,vertexShader:y,uniforms:[{name:"u_dotRadius",type:"float",default:7,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:10,attribute:"grid-size"},{name:"u_angleWarm",type:"float",default:15,attribute:"angle-warm"},{name:"u_angleCool",type:"float",default:75,attribute:"angle-cool"},{name:"u_angleK",type:"float",default:45,attribute:"angle-k"},{name:"u_showWarm",type:"float",default:1,attribute:"show-warm"},{name:"u_showCool",type:"float",default:1,attribute:"show-cool"},{name:"u_showK",type:"float",default:1,attribute:"show-k"},{name:"u_warmColor",type:"vec3",default:[.85,.25,.06],attribute:"warm-color"},{name:"u_coolColor",type:"vec3",default:[.05,.65,.6],attribute:"cool-color"},{name:"u_blendMode",type:"float",default:1,attribute:"blend-mode"},{name:"u_intensityK",type:"float",default:1,attribute:"intensity-k"}]},w=new Map;function _(e){w.set(e.name,e)}function T(e){return w.get(e)}function B(){return Array.from(w.keys())}_(P);_(V);_(O);_(W);var Y=Object.defineProperty,l=(e,o,a,t)=>{for(var u=void 0,n=e.length-1,r;n>=0;n--)(r=e[n])&&(u=r(o,a,u)||u);return u&&Y(o,a,u),u};const X=2;let E=Promise.resolve();function x(e){const o=E.then(e,e);return E=o,o}const $=new Set(["effect","dotRadius","gridSize","angleC","angleM","angleY","angleK","showC","showM","showY","showK","intensityK","duotoneColor","angle","dotOffsetX","dotOffsetY","bgColor","angleWarm","angleCool","showWarm","showCool","warmColor","coolColor","blendMode","referenceWidth"]),C=class C extends p.LitElement{constructor(){super(...arguments),this.src="",this.effect="halftone-cmyk",this.dotRadius=4,this.gridSize=8,this.angleC=15,this.angleM=75,this.angleY=0,this.angleK=45,this.showC=1,this.showM=1,this.showY=1,this.showK=1,this.intensityK=1,this.duotoneColor="#0099cc",this.angle=0,this.dotOffsetX=.5,this.dotOffsetY=.5,this.bgColor="#ffffff",this.angleWarm=15,this.angleCool=75,this.showWarm=1,this.showCool=1,this.warmColor="#d94010",this.coolColor="#0da699",this.blendMode=1,this.referenceWidth=1024,this.loadingBlur=0,this._webglAvailable=!0,this._snapshotUrl="",this._snapshotLoaded=!1,this._image=null,this._observer=null,this._visible=!1,this._needsRender=!1}render(){if(!this._webglAvailable)return p.html`<img src=${this.src} alt="" />`;const o=this.loadingBlur>0?`filter: blur(${this.loadingBlur}px)`:"";return p.html`
-      <img src=${this.src} alt="" style=${o} />
-      ${this._snapshotUrl?p.html`<img
-            class="snapshot${this._snapshotLoaded?" loaded":""}"
-            src=${this._snapshotUrl}
-            @load=${this._onSnapshotLoad}
-            alt="" />`:""}
-    `}connectedCallback(){super.connectedCallback(),this._observer=new IntersectionObserver(o=>{var t;const a=this._visible;this._visible=((t=o[0])==null?void 0:t.isIntersecting)??!1,this._visible&&!a&&this._needsRender&&(this._needsRender=!1,x(()=>this._renderEffect()))},{rootMargin:"200px"}),this._observer.observe(this)}updated(o){if(o.has("src")&&this.src){this._loadImage(this.src);return}if(!this._image)return;[...o.keys()].some(t=>$.has(t))&&this._scheduleRender()}disconnectedCallback(){var o;super.disconnectedCallback(),(o=this._observer)==null||o.disconnect(),this._revokeSnapshot()}_loadImage(o){const a=new Image;a.crossOrigin="anonymous",a.onload=()=>{this._image=a,this._scheduleRender()},a.onerror=()=>{console.warn(`[some-shade] Failed to load image: ${o}`)},a.src=o}_scheduleRender(){this._visible?x(()=>this._renderEffect()):this._needsRender=!0}async _renderEffect(){var g;if(!this._image)return;const o=T(this.effect);if(!o){console.warn(`[some-shade] Unknown effect: ${this.effect}`);return}const a=Math.min(window.devicePixelRatio||1,X),t=this._image.naturalWidth,u=this._image.naturalHeight,n=document.createElement("canvas");n.width=t*a,n.height=u*a;const r=U(n);if(!r){this._webglAvailable=!1;return}try{const c=K(r,o.vertexShader,o.fragmentShader);r.useProgram(c.program);const m=D(r,this._image),d=L(r,c);r.viewport(0,0,n.width,n.height),r.clearColor(0,0,0,0),r.clear(r.COLOR_BUFFER_BIT),r.activeTexture(r.TEXTURE0),r.bindTexture(r.TEXTURE_2D,m.texture);const f=c.uniformLocations.get("u_image");f&&r.uniform1i(f,0),k(r,c,this._getUniformValues(m,a)),r.bindBuffer(r.ARRAY_BUFFER,d);const h=4*Float32Array.BYTES_PER_ELEMENT,b=c.attribLocations.get("a_position");b!==void 0&&b!==-1&&(r.enableVertexAttribArray(b),r.vertexAttribPointer(b,2,r.FLOAT,!1,h,0));const v=c.attribLocations.get("a_texCoord");v!==void 0&&v!==-1&&(r.enableVertexAttribArray(v),r.vertexAttribPointer(v,2,r.FLOAT,!1,h,2*Float32Array.BYTES_PER_ELEMENT)),M(r);const R=await new Promise(A=>n.toBlob(A));r.deleteTexture(m.texture),r.deleteProgram(c.program),r.deleteBuffer(d),R&&(this._snapshotLoaded=!1,this._revokeSnapshot(),this._snapshotUrl=URL.createObjectURL(R))}finally{(g=r.getExtension("WEBGL_lose_context"))==null||g.loseContext()}}_onSnapshotLoad(){this._snapshotLoaded=!0}replayTransition(o=500){this._snapshotUrl&&(this._snapshotLoaded=!1,this.updateComplete.then(()=>{setTimeout(()=>{this._snapshotLoaded=!0},o)}))}_revokeSnapshot(){this._snapshotUrl&&(URL.revokeObjectURL(this._snapshotUrl),this._snapshotUrl="")}_getUniformValues(o,a){const t={};t.u_resolution=[o.width*a,o.height*a];const u=o.width/this.referenceWidth;return t.u_dotRadius=this.dotRadius*u,t.u_gridSize=this.gridSize*u,this.effect==="halftone-cmyk"?(t.u_angleC=this.angleC,t.u_angleM=this.angleM,t.u_angleY=this.angleY,t.u_angleK=this.angleK,t.u_showC=this.showC,t.u_showM=this.showM,t.u_showY=this.showY,t.u_showK=this.showK,t.u_intensityK=this.intensityK):this.effect==="halftone-duotone"?(t.u_duotoneColor=this._parseHexColor(this.duotoneColor),t.u_angle=this.angle):this.effect==="dot-grid"?(t.u_dotOffset=[this.dotOffsetX,this.dotOffsetY],t.u_bgColor=this._parseHexColor(this.bgColor),t.u_angle=this.angle):this.effect==="technicolor-2strip"&&(t.u_angleWarm=this.angleWarm,t.u_angleCool=this.angleCool,t.u_angleK=this.angleK,t.u_showWarm=this.showWarm,t.u_showCool=this.showCool,t.u_showK=this.showK,t.u_warmColor=this._parseHexColor(this.warmColor),t.u_coolColor=this._parseHexColor(this.coolColor),t.u_blendMode=this.blendMode,t.u_intensityK=this.intensityK),t}_parseHexColor(o){const a=o.replace("#",""),t=parseInt(a.substring(0,2),16)/255,u=parseInt(a.substring(2,4),16)/255,n=parseInt(a.substring(4,6),16)/255;return[t,u,n]}};C.styles=p.css`
+`,X={name:"technicolor-2strip",fragmentShader:B,vertexShader:w,uniforms:[{name:"u_dotRadius",type:"float",default:7,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:10,attribute:"grid-size"},{name:"u_angleWarm",type:"float",default:15,attribute:"angle-warm"},{name:"u_angleCool",type:"float",default:75,attribute:"angle-cool"},{name:"u_angleK",type:"float",default:45,attribute:"angle-k"},{name:"u_showWarm",type:"float",default:1,attribute:"show-warm"},{name:"u_showCool",type:"float",default:1,attribute:"show-cool"},{name:"u_showK",type:"float",default:1,attribute:"show-k"},{name:"u_warmColor",type:"vec3",default:[.85,.25,.06],attribute:"warm-color"},{name:"u_coolColor",type:"vec3",default:[.05,.65,.6],attribute:"cool-color"},{name:"u_blendMode",type:"float",default:1,attribute:"blend-mode"},{name:"u_intensityK",type:"float",default:1,attribute:"intensity-k"}]},R=new Map;function _(e){R.set(e.name,e)}function D(e){return R.get(e)}function G(){return Array.from(R.keys())}_(N);_(O);_(Y);_(X);var H=Object.defineProperty,u=(e,o,n,i)=>{for(var t=void 0,r=e.length-1,d;r>=0;r--)(d=e[r])&&(t=d(o,n,t)||t);return t&&H(o,n,t),t};const $=2;let k=Promise.resolve();function C(e){const o=k.then(e,e);return k=o,o}const q=new Set(["effect","dotRadius","gridSize","angleC","angleM","angleY","angleK","showC","showM","showY","showK","intensityK","duotoneColor","angle","dotOffsetX","dotOffsetY","bgColor","angleWarm","angleCool","showWarm","showCool","warmColor","coolColor","blendMode","referenceWidth"]),S=class S extends y.LitElement{constructor(){super(...arguments),this.src="",this.effect="halftone-cmyk",this.dotRadius=4,this.gridSize=8,this.angleC=15,this.angleM=75,this.angleY=0,this.angleK=45,this.showC=1,this.showM=1,this.showY=1,this.showK=1,this.intensityK=1,this.duotoneColor="#0099cc",this.angle=0,this.dotOffsetX=.5,this.dotOffsetY=.5,this.bgColor="#ffffff",this.angleWarm=15,this.angleCool=75,this.showWarm=1,this.showCool=1,this.warmColor="#d94010",this.coolColor="#0da699",this.blendMode=1,this.referenceWidth=1024,this._webglAvailable=!0,this._snapshotReady=!1,this._image=null,this._observer=null,this._visible=!1,this._needsRender=!1}render(){return this._webglAvailable?y.html`
+      <img class="base" src=${this.src} alt="" />
+      <canvas
+        class="snapshot${this._snapshotReady?" ready":""}"
+      ></canvas>
+    `:y.html`<img src=${this.src} alt="" />`}connectedCallback(){super.connectedCallback(),this._observer=new IntersectionObserver(o=>{var i;const n=this._visible;this._visible=((i=o[0])==null?void 0:i.isIntersecting)??!1,this._visible&&!n&&(this._needsRender||this._image&&!this._snapshotReady)&&(this._needsRender=!1,C(()=>this._renderEffect()))},{rootMargin:"200px"}),this._observer.observe(this)}updated(o){if(o.has("src")&&this.src){this._loadImage(this.src);return}if(!this._image)return;[...o.keys()].some(i=>q.has(i))&&this._scheduleRender()}disconnectedCallback(){var o;super.disconnectedCallback(),(o=this._observer)==null||o.disconnect()}_loadImage(o){const n=new Image;n.crossOrigin="anonymous",n.onload=()=>{this._image=n,this._scheduleRender()},n.onerror=()=>{console.warn(`[some-shade] Failed to load image: ${o}`)},n.src=o}_scheduleRender(){this._visible?C(()=>this._renderEffect()):(this._needsRender=!0,requestAnimationFrame(()=>{if(this._needsRender&&!this._visible){const o=this.getBoundingClientRect();o.bottom>=0&&o.top<window.innerHeight&&(this._visible=!0,this._needsRender=!1,C(()=>this._renderEffect()))}}))}async _renderEffect(){var f;if(!this._image)return;const o=D(this.effect);if(!o){console.warn(`[some-shade] Unknown effect: ${this.effect}`);return}this._snapshotReady=!1;const n=Math.min(window.devicePixelRatio||1,$),i=this._image.naturalWidth,t=this._image.naturalHeight,r=this.clientWidth||i,d=Math.min(Math.round(r*n),i),h=Math.round(d*(t/i)),m=document.createElement("canvas");m.width=d,m.height=h;const s=M(m);if(!s){this._webglAvailable=!1;return}try{const c=U(s,o.vertexShader,o.fragmentShader);s.useProgram(c.program);const p=P(s,this._image),x=I(s,c);s.viewport(0,0,m.width,m.height),s.clearColor(0,0,0,0),s.clear(s.COLOR_BUFFER_BIT),s.activeTexture(s.TEXTURE0),s.bindTexture(s.TEXTURE_2D,p.texture);const E=c.uniformLocations.get("u_image");E&&s.uniform1i(E,0),z(s,c,this._getUniformValues(d,h,n)),s.bindBuffer(s.ARRAY_BUFFER,x);const T=4*Float32Array.BYTES_PER_ELEMENT,g=c.attribLocations.get("a_position");g!==void 0&&g!==-1&&(s.enableVertexAttribArray(g),s.vertexAttribPointer(g,2,s.FLOAT,!1,T,0));const b=c.attribLocations.get("a_texCoord");b!==void 0&&b!==-1&&(s.enableVertexAttribArray(b),s.vertexAttribPointer(b,2,s.FLOAT,!1,T,2*Float32Array.BYTES_PER_ELEMENT)),L(s);const v=this.renderRoot.querySelector(".snapshot");if(v){v.width=d,v.height=h;const A=v.getContext("2d");A&&(A.drawImage(m,0,0),this._snapshotReady=!0)}s.deleteTexture(p.texture),s.deleteProgram(c.program),s.deleteBuffer(x)}finally{(f=s.getExtension("WEBGL_lose_context"))==null||f.loseContext()}}replayTransition(o=500){this._snapshotReady&&(this._snapshotReady=!1,this.updateComplete.then(()=>{setTimeout(()=>{this._snapshotReady=!0},o)}))}_getUniformValues(o,n,i){const t={};t.u_resolution=[o,n];const r=o/(this.referenceWidth*i);return t.u_dotRadius=this.dotRadius*r,t.u_gridSize=this.gridSize*r,this.effect==="halftone-cmyk"?(t.u_angleC=this.angleC,t.u_angleM=this.angleM,t.u_angleY=this.angleY,t.u_angleK=this.angleK,t.u_showC=this.showC,t.u_showM=this.showM,t.u_showY=this.showY,t.u_showK=this.showK,t.u_intensityK=this.intensityK):this.effect==="halftone-duotone"?(t.u_duotoneColor=this._parseHexColor(this.duotoneColor),t.u_angle=this.angle):this.effect==="dot-grid"?(t.u_dotOffset=[this.dotOffsetX,this.dotOffsetY],t.u_bgColor=this._parseHexColor(this.bgColor),t.u_angle=this.angle):this.effect==="technicolor-2strip"&&(t.u_angleWarm=this.angleWarm,t.u_angleCool=this.angleCool,t.u_angleK=this.angleK,t.u_showWarm=this.showWarm,t.u_showCool=this.showCool,t.u_showK=this.showK,t.u_warmColor=this._parseHexColor(this.warmColor),t.u_coolColor=this._parseHexColor(this.coolColor),t.u_blendMode=this.blendMode,t.u_intensityK=this.intensityK),t}_parseHexColor(o){const n=o.replace("#",""),i=parseInt(n.substring(0,2),16)/255,t=parseInt(n.substring(2,4),16)/255,r=parseInt(n.substring(4,6),16)/255;return[i,t,r]}};S.styles=y.css`
     :host {
       display: block;
       position: relative;
@@ -292,7 +290,10 @@ void main() {
       width: 100%;
       height: auto;
     }
-    img.snapshot {
+    img.base {
+      opacity: 0;
+    }
+    canvas.snapshot {
       position: absolute;
       inset: 0;
       width: 100%;
@@ -300,7 +301,7 @@ void main() {
       opacity: 0;
       transition: opacity 0.3s ease;
     }
-    img.snapshot.loaded {
+    canvas.snapshot.ready {
       opacity: 1;
     }
-  `;let i=C;l([s.property()],i.prototype,"src");l([s.property()],i.prototype,"effect");l([s.property({type:Number,attribute:"dot-radius"})],i.prototype,"dotRadius");l([s.property({type:Number,attribute:"grid-size"})],i.prototype,"gridSize");l([s.property({type:Number,attribute:"angle-c"})],i.prototype,"angleC");l([s.property({type:Number,attribute:"angle-m"})],i.prototype,"angleM");l([s.property({type:Number,attribute:"angle-y"})],i.prototype,"angleY");l([s.property({type:Number,attribute:"angle-k"})],i.prototype,"angleK");l([s.property({type:Number,attribute:"show-c"})],i.prototype,"showC");l([s.property({type:Number,attribute:"show-m"})],i.prototype,"showM");l([s.property({type:Number,attribute:"show-y"})],i.prototype,"showY");l([s.property({type:Number,attribute:"show-k"})],i.prototype,"showK");l([s.property({type:Number,attribute:"intensity-k"})],i.prototype,"intensityK");l([s.property({attribute:"duotone-color"})],i.prototype,"duotoneColor");l([s.property({type:Number})],i.prototype,"angle");l([s.property({type:Number,attribute:"dot-offset-x"})],i.prototype,"dotOffsetX");l([s.property({type:Number,attribute:"dot-offset-y"})],i.prototype,"dotOffsetY");l([s.property({attribute:"bg-color"})],i.prototype,"bgColor");l([s.property({type:Number,attribute:"angle-warm"})],i.prototype,"angleWarm");l([s.property({type:Number,attribute:"angle-cool"})],i.prototype,"angleCool");l([s.property({type:Number,attribute:"show-warm"})],i.prototype,"showWarm");l([s.property({type:Number,attribute:"show-cool"})],i.prototype,"showCool");l([s.property({attribute:"warm-color"})],i.prototype,"warmColor");l([s.property({attribute:"cool-color"})],i.prototype,"coolColor");l([s.property({type:Number,attribute:"blend-mode"})],i.prototype,"blendMode");l([s.property({type:Number,attribute:"reference-width"})],i.prototype,"referenceWidth");l([s.property({type:Number,attribute:"loading-blur"})],i.prototype,"loadingBlur");l([s.state()],i.prototype,"_webglAvailable");l([s.state()],i.prototype,"_snapshotUrl");l([s.state()],i.prototype,"_snapshotLoaded");customElements.get("some-shade-image")||customElements.define("some-shade-image",i);exports.SomeShadeImage=i;exports.get=T;exports.list=B;exports.register=_;
+  `;let a=S;u([l.property()],a.prototype,"src");u([l.property()],a.prototype,"effect");u([l.property({type:Number,attribute:"dot-radius"})],a.prototype,"dotRadius");u([l.property({type:Number,attribute:"grid-size"})],a.prototype,"gridSize");u([l.property({type:Number,attribute:"angle-c"})],a.prototype,"angleC");u([l.property({type:Number,attribute:"angle-m"})],a.prototype,"angleM");u([l.property({type:Number,attribute:"angle-y"})],a.prototype,"angleY");u([l.property({type:Number,attribute:"angle-k"})],a.prototype,"angleK");u([l.property({type:Number,attribute:"show-c"})],a.prototype,"showC");u([l.property({type:Number,attribute:"show-m"})],a.prototype,"showM");u([l.property({type:Number,attribute:"show-y"})],a.prototype,"showY");u([l.property({type:Number,attribute:"show-k"})],a.prototype,"showK");u([l.property({type:Number,attribute:"intensity-k"})],a.prototype,"intensityK");u([l.property({attribute:"duotone-color"})],a.prototype,"duotoneColor");u([l.property({type:Number})],a.prototype,"angle");u([l.property({type:Number,attribute:"dot-offset-x"})],a.prototype,"dotOffsetX");u([l.property({type:Number,attribute:"dot-offset-y"})],a.prototype,"dotOffsetY");u([l.property({attribute:"bg-color"})],a.prototype,"bgColor");u([l.property({type:Number,attribute:"angle-warm"})],a.prototype,"angleWarm");u([l.property({type:Number,attribute:"angle-cool"})],a.prototype,"angleCool");u([l.property({type:Number,attribute:"show-warm"})],a.prototype,"showWarm");u([l.property({type:Number,attribute:"show-cool"})],a.prototype,"showCool");u([l.property({attribute:"warm-color"})],a.prototype,"warmColor");u([l.property({attribute:"cool-color"})],a.prototype,"coolColor");u([l.property({type:Number,attribute:"blend-mode"})],a.prototype,"blendMode");u([l.property({type:Number,attribute:"reference-width"})],a.prototype,"referenceWidth");u([l.state()],a.prototype,"_webglAvailable");u([l.state()],a.prototype,"_snapshotReady");customElements.get("some-shade-image")||customElements.define("some-shade-image",a);exports.SomeShadeImage=a;exports.get=D;exports.list=G;exports.register=_;

package/dist/some-shade.es.js

@@ -1,72 +1,72 @@
-import { LitElement as U, css as K, html as y } from "lit";
-import { property as u, state as w } from "lit/decorators.js";
-function k(e) {
+import { LitElement as U, css as M, html as A } from "lit";
+import { property as u, state as D } from "lit/decorators.js";
+function z(e) {
   return e.getContext("webgl", {
     alpha: !0,
     premultipliedAlpha: !1,
     preserveDrawingBuffer: !0
   });
 }
-function x(e, o, a) {
-  const t = e.createShader(o);
-  if (!t) throw new Error("Failed to create shader");
-  if (e.shaderSource(t, a), e.compileShader(t), !e.getShaderParameter(t, e.COMPILE_STATUS)) {
-    const l = e.getShaderInfoLog(t);
-    throw e.deleteShader(t), new Error(`Shader compile error: ${l}`);
+function K(e, o, r) {
+  const i = e.createShader(o);
+  if (!i) throw new Error("Failed to create shader");
+  if (e.shaderSource(i, r), e.compileShader(i), !e.getShaderParameter(i, e.COMPILE_STATUS)) {
+    const t = e.getShaderInfoLog(i);
+    throw e.deleteShader(i), new Error(`Shader compile error: ${t}`);
   }
-  return t;
+  return i;
 }
-function D(e, o, a) {
-  const t = x(e, e.VERTEX_SHADER, o), l = x(e, e.FRAGMENT_SHADER, a), r = e.createProgram();
-  if (!r) throw new Error("Failed to create program");
-  if (e.attachShader(r, t), e.attachShader(r, l), e.linkProgram(r), !e.getProgramParameter(r, e.LINK_STATUS)) {
-    const d = e.getProgramInfoLog(r);
-    throw e.deleteProgram(r), new Error(`Program link error: ${d}`);
+function P(e, o, r) {
+  const i = K(e, e.VERTEX_SHADER, o), t = K(e, e.FRAGMENT_SHADER, r), n = e.createProgram();
+  if (!n) throw new Error("Failed to create program");
+  if (e.attachShader(n, i), e.attachShader(n, t), e.linkProgram(n), !e.getProgramParameter(n, e.LINK_STATUS)) {
+    const f = e.getProgramInfoLog(n);
+    throw e.deleteProgram(n), new Error(`Program link error: ${f}`);
   }
-  e.deleteShader(t), e.deleteShader(l);
-  const n = /* @__PURE__ */ new Map(), _ = e.getProgramParameter(r, e.ACTIVE_ATTRIBUTES);
-  for (let d = 0; d < _; d++) {
-    const c = e.getActiveAttrib(r, d);
-    c && n.set(c.name, e.getAttribLocation(r, c.name));
+  e.deleteShader(i), e.deleteShader(t);
+  const d = /* @__PURE__ */ new Map(), h = e.getProgramParameter(n, e.ACTIVE_ATTRIBUTES);
+  for (let f = 0; f < h; f++) {
+    const c = e.getActiveAttrib(n, f);
+    c && d.set(c.name, e.getAttribLocation(n, c.name));
   }
-  const f = /* @__PURE__ */ new Map(), m = e.getProgramParameter(r, e.ACTIVE_UNIFORMS);
-  for (let d = 0; d < m; d++) {
-    const c = e.getActiveUniform(r, d);
+  const m = /* @__PURE__ */ new Map(), s = e.getProgramParameter(n, e.ACTIVE_UNIFORMS);
+  for (let f = 0; f < s; f++) {
+    const c = e.getActiveUniform(n, f);
     if (c) {
-      const h = e.getUniformLocation(r, c.name);
-      h && f.set(c.name, h);
+      const _ = e.getUniformLocation(n, c.name);
+      _ && m.set(c.name, _);
     }
   }
-  return { program: r, attribLocations: n, uniformLocations: f };
+  return { program: n, attribLocations: d, uniformLocations: m };
 }
-function L(e, o, a) {
-  for (const [t, l] of Object.entries(a)) {
-    const r = o.uniformLocations.get(t);
-    if (r) {
-      if (typeof l == "number")
-        e.uniform1f(r, l);
-      else if (Array.isArray(l))
-        switch (l.length) {
+function I(e, o, r) {
+  for (const [i, t] of Object.entries(r)) {
+    const n = o.uniformLocations.get(i);
+    if (n) {
+      if (typeof t == "number")
+        e.uniform1f(n, t);
+      else if (Array.isArray(t))
+        switch (t.length) {
           case 2:
-            e.uniform2fv(r, l);
+            e.uniform2fv(n, t);
             break;
           case 3:
-            e.uniform3fv(r, l);
+            e.uniform3fv(n, t);
             break;
           case 4:
-            e.uniform4fv(r, l);
+            e.uniform4fv(n, t);
             break;
         }
     }
   }
 }
-function M(e, o) {
-  const a = e.createTexture();
-  if (!a) throw new Error("Failed to create texture");
-  return e.bindTexture(e.TEXTURE_2D, a), e.texImage2D(e.TEXTURE_2D, 0, e.RGBA, e.RGBA, e.UNSIGNED_BYTE, o), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.LINEAR), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.LINEAR), { texture: a, width: o.naturalWidth, height: o.naturalHeight };
+function L(e, o) {
+  const r = e.createTexture();
+  if (!r) throw new Error("Failed to create texture");
+  return e.bindTexture(e.TEXTURE_2D, r), e.texImage2D(e.TEXTURE_2D, 0, e.RGBA, e.RGBA, e.UNSIGNED_BYTE, o), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.LINEAR), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.LINEAR), { texture: r, width: o.naturalWidth, height: o.naturalHeight };
 }
-function z(e, o) {
-  const a = new Float32Array([
+function V(e, o) {
+  const r = new Float32Array([
     // pos.x  pos.y  tex.s  tex.t
     -1,
     -1,
@@ -84,18 +84,18 @@ function z(e, o) {
     1,
     1,
     0
-  ]), t = e.createBuffer();
-  if (!t) throw new Error("Failed to create buffer");
-  e.bindBuffer(e.ARRAY_BUFFER, t), e.bufferData(e.ARRAY_BUFFER, a, e.STATIC_DRAW);
-  const l = 4 * Float32Array.BYTES_PER_ELEMENT, r = o.attribLocations.get("a_position");
-  r !== void 0 && r !== -1 && (e.enableVertexAttribArray(r), e.vertexAttribPointer(r, 2, e.FLOAT, !1, l, 0));
-  const n = o.attribLocations.get("a_texCoord");
-  return n !== void 0 && n !== -1 && (e.enableVertexAttribArray(n), e.vertexAttribPointer(n, 2, e.FLOAT, !1, l, 2 * Float32Array.BYTES_PER_ELEMENT)), t;
+  ]), i = e.createBuffer();
+  if (!i) throw new Error("Failed to create buffer");
+  e.bindBuffer(e.ARRAY_BUFFER, i), e.bufferData(e.ARRAY_BUFFER, r, e.STATIC_DRAW);
+  const t = 4 * Float32Array.BYTES_PER_ELEMENT, n = o.attribLocations.get("a_position");
+  n !== void 0 && n !== -1 && (e.enableVertexAttribArray(n), e.vertexAttribPointer(n, 2, e.FLOAT, !1, t, 0));
+  const d = o.attribLocations.get("a_texCoord");
+  return d !== void 0 && d !== -1 && (e.enableVertexAttribArray(d), e.vertexAttribPointer(d, 2, e.FLOAT, !1, t, 2 * Float32Array.BYTES_PER_ELEMENT)), i;
 }
-function P(e) {
+function N(e) {
   e.drawArrays(e.TRIANGLE_STRIP, 0, 4);
 }
-const I = `precision mediump float;
+const W = `precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -181,7 +181,7 @@ void main() {
 
   gl_FragColor = vec4(outR, outG, outB, texture2D(u_image, v_texCoord).a);
 }
-`, b = `attribute vec2 a_position;
+`, v = `attribute vec2 a_position;
 attribute vec2 a_texCoord;
 varying vec2 v_texCoord;
 
@@ -189,10 +189,10 @@ void main() {
   gl_Position = vec4(a_position, 0.0, 1.0);
   v_texCoord = a_texCoord;
 }
-`, V = {
+`, F = {
   name: "halftone-cmyk",
-  fragmentShader: I,
-  vertexShader: b,
+  fragmentShader: W,
+  vertexShader: v,
   uniforms: [
     { name: "u_dotRadius", type: "float", default: 4, attribute: "dot-radius" },
     { name: "u_gridSize", type: "float", default: 8, attribute: "grid-size" },
@@ -206,7 +206,7 @@ void main() {
     { name: "u_showK", type: "float", default: 1, attribute: "show-k" },
     { name: "u_intensityK", type: "float", default: 1, attribute: "intensity-k" }
   ]
-}, N = `precision mediump float;
+}, O = `precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -248,17 +248,17 @@ void main() {
 
   gl_FragColor = vec4(result, color.a);
 }
-`, O = {
+`, Y = {
   name: "halftone-duotone",
-  fragmentShader: N,
-  vertexShader: b,
+  fragmentShader: O,
+  vertexShader: v,
   uniforms: [
     { name: "u_dotRadius", type: "float", default: 4, attribute: "dot-radius" },
     { name: "u_gridSize", type: "float", default: 8, attribute: "grid-size" },
     { name: "u_duotoneColor", type: "vec3", default: [0, 0.6, 0.8], attribute: "duotone-color" },
     { name: "u_angle", type: "float", default: 0, attribute: "angle" }
   ]
-}, F = `precision mediump float;
+}, B = `precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -314,10 +314,10 @@ void main() {
 
   gl_FragColor = vec4(result, 1.0);
 }
-`, W = {
+`, X = {
   name: "dot-grid",
-  fragmentShader: F,
-  vertexShader: b,
+  fragmentShader: B,
+  vertexShader: v,
   uniforms: [
     { name: "u_dotRadius", type: "float", default: 4, attribute: "dot-radius" },
     { name: "u_gridSize", type: "float", default: 8, attribute: "grid-size" },
@@ -325,7 +325,7 @@ void main() {
     { name: "u_bgColor", type: "vec3", default: [1, 1, 1], attribute: "bg-color" },
     { name: "u_angle", type: "float", default: 0, attribute: "angle" }
   ]
-}, B = `precision mediump float;
+}, G = `precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -408,10 +408,10 @@ void main() {
 
   gl_FragColor = vec4(clamp(result, 0.0, 1.0), color.a);
 }
-`, Y = {
+`, H = {
   name: "technicolor-2strip",
-  fragmentShader: B,
-  vertexShader: b,
+  fragmentShader: G,
+  vertexShader: v,
   uniforms: [
     { name: "u_dotRadius", type: "float", default: 7, attribute: "dot-radius" },
     { name: "u_gridSize", type: "float", default: 10, attribute: "grid-size" },
@@ -427,31 +427,31 @@ void main() {
     { name: "u_intensityK", type: "float", default: 1, attribute: "intensity-k" }
   ]
 }, C = /* @__PURE__ */ new Map();
-function v(e) {
+function y(e) {
   C.set(e.name, e);
 }
-function X(e) {
+function $(e) {
   return C.get(e);
 }
-function Q() {
+function ee() {
   return Array.from(C.keys());
 }
-v(V);
-v(O);
-v(W);
-v(Y);
-var $ = Object.defineProperty, s = (e, o, a, t) => {
-  for (var l = void 0, r = e.length - 1, n; r >= 0; r--)
-    (n = e[r]) && (l = n(o, a, l) || l);
-  return l && $(o, a, l), l;
+y(F);
+y(Y);
+y(X);
+y(H);
+var q = Object.defineProperty, l = (e, o, r, i) => {
+  for (var t = void 0, n = e.length - 1, d; n >= 0; n--)
+    (d = e[n]) && (t = d(o, r, t) || t);
+  return t && q(o, r, t), t;
 };
-const G = 2;
-let E = Promise.resolve();
-function T(e) {
-  const o = E.then(e, e);
-  return E = o, o;
+const Q = 2;
+let k = Promise.resolve();
+function w(e) {
+  const o = k.then(e, e);
+  return k = o, o;
 }
-const H = /* @__PURE__ */ new Set([
+const j = /* @__PURE__ */ new Set([
   "effect",
   "dotRadius",
   "gridSize",
@@ -479,27 +479,22 @@ const H = /* @__PURE__ */ new Set([
   "referenceWidth"
 ]), R = class R extends U {
   constructor() {
-    super(...arguments), this.src = "", this.effect = "halftone-cmyk", this.dotRadius = 4, this.gridSize = 8, this.angleC = 15, this.angleM = 75, this.angleY = 0, this.angleK = 45, this.showC = 1, this.showM = 1, this.showY = 1, this.showK = 1, this.intensityK = 1, this.duotoneColor = "#0099cc", this.angle = 0, this.dotOffsetX = 0.5, this.dotOffsetY = 0.5, this.bgColor = "#ffffff", this.angleWarm = 15, this.angleCool = 75, this.showWarm = 1, this.showCool = 1, this.warmColor = "#d94010", this.coolColor = "#0da699", this.blendMode = 1, this.referenceWidth = 1024, this.loadingBlur = 0, this._webglAvailable = !0, this._snapshotUrl = "", this._snapshotLoaded = !1, this._image = null, this._observer = null, this._visible = !1, this._needsRender = !1;
+    super(...arguments), this.src = "", this.effect = "halftone-cmyk", this.dotRadius = 4, this.gridSize = 8, this.angleC = 15, this.angleM = 75, this.angleY = 0, this.angleK = 45, this.showC = 1, this.showM = 1, this.showY = 1, this.showK = 1, this.intensityK = 1, this.duotoneColor = "#0099cc", this.angle = 0, this.dotOffsetX = 0.5, this.dotOffsetY = 0.5, this.bgColor = "#ffffff", this.angleWarm = 15, this.angleCool = 75, this.showWarm = 1, this.showCool = 1, this.warmColor = "#d94010", this.coolColor = "#0da699", this.blendMode = 1, this.referenceWidth = 1024, this._webglAvailable = !0, this._snapshotReady = !1, this._image = null, this._observer = null, this._visible = !1, this._needsRender = !1;
   }
   render() {
-    if (!this._webglAvailable)
-      return y`<img src=${this.src} alt="" />`;
-    const o = this.loadingBlur > 0 ? `filter: blur(${this.loadingBlur}px)` : "";
-    return y`
-      <img src=${this.src} alt="" style=${o} />
-      ${this._snapshotUrl ? y`<img
-            class="snapshot${this._snapshotLoaded ? " loaded" : ""}"
-            src=${this._snapshotUrl}
-            @load=${this._onSnapshotLoad}
-            alt="" />` : ""}
-    `;
+    return this._webglAvailable ? A`
+      <img class="base" src=${this.src} alt="" />
+      <canvas
+        class="snapshot${this._snapshotReady ? " ready" : ""}"
+      ></canvas>
+    ` : A`<img src=${this.src} alt="" />`;
   }
   connectedCallback() {
     super.connectedCallback(), this._observer = new IntersectionObserver(
       (o) => {
-        var t;
-        const a = this._visible;
-        this._visible = ((t = o[0]) == null ? void 0 : t.isIntersecting) ?? !1, this._visible && !a && this._needsRender && (this._needsRender = !1, T(() => this._renderEffect()));
+        var i;
+        const r = this._visible;
+        this._visible = ((i = o[0]) == null ? void 0 : i.isIntersecting) ?? !1, this._visible && !r && (this._needsRender || this._image && !this._snapshotReady) && (this._needsRender = !1, w(() => this._renderEffect()));
       },
       // Start rendering slightly before the element scrolls into view.
       { rootMargin: "200px" }
@@ -512,115 +507,115 @@ const H = /* @__PURE__ */ new Set([
     }
     if (!this._image) return;
     [...o.keys()].some(
-      (t) => H.has(t)
+      (i) => j.has(i)
     ) && this._scheduleRender();
   }
   disconnectedCallback() {
     var o;
-    super.disconnectedCallback(), (o = this._observer) == null || o.disconnect(), this._revokeSnapshot();
+    super.disconnectedCallback(), (o = this._observer) == null || o.disconnect();
   }
   // ---------------------------------------------------------------------------
   // Image loading
   // ---------------------------------------------------------------------------
   _loadImage(o) {
-    const a = new Image();
-    a.crossOrigin = "anonymous", a.onload = () => {
-      this._image = a, this._scheduleRender();
-    }, a.onerror = () => {
+    const r = new Image();
+    r.crossOrigin = "anonymous", r.onload = () => {
+      this._image = r, this._scheduleRender();
+    }, r.onerror = () => {
       console.warn(`[some-shade] Failed to load image: ${o}`);
-    }, a.src = o;
+    }, r.src = o;
   }
   // ---------------------------------------------------------------------------
   // Render scheduling
   // ---------------------------------------------------------------------------
   _scheduleRender() {
-    this._visible ? T(() => this._renderEffect()) : this._needsRender = !0;
+    this._visible ? w(() => this._renderEffect()) : (this._needsRender = !0, requestAnimationFrame(() => {
+      if (this._needsRender && !this._visible) {
+        const o = this.getBoundingClientRect();
+        o.bottom >= 0 && o.top < window.innerHeight && (this._visible = !0, this._needsRender = !1, w(() => this._renderEffect()));
+      }
+    }));
   }
   // ---------------------------------------------------------------------------
   // WebGL render → snapshot → tear-down
   // ---------------------------------------------------------------------------
   async _renderEffect() {
-    var _;
+    var f;
     if (!this._image) return;
-    const o = X(this.effect);
+    const o = $(this.effect);
     if (!o) {
       console.warn(`[some-shade] Unknown effect: ${this.effect}`);
       return;
     }
-    const a = Math.min(window.devicePixelRatio || 1, G), t = this._image.naturalWidth, l = this._image.naturalHeight, r = document.createElement("canvas");
-    r.width = t * a, r.height = l * a;
-    const n = k(r);
-    if (!n) {
+    this._snapshotReady = !1;
+    const r = Math.min(window.devicePixelRatio || 1, Q), i = this._image.naturalWidth, t = this._image.naturalHeight, n = this.clientWidth || i, d = Math.min(Math.round(n * r), i), h = Math.round(d * (t / i)), m = document.createElement("canvas");
+    m.width = d, m.height = h;
+    const s = z(m);
+    if (!s) {
       this._webglAvailable = !1;
       return;
     }
     try {
-      const f = D(
-        n,
+      const c = P(
+        s,
         o.vertexShader,
         o.fragmentShader
       );
-      n.useProgram(f.program);
-      const m = M(n, this._image), d = z(n, f);
-      n.viewport(0, 0, r.width, r.height), n.clearColor(0, 0, 0, 0), n.clear(n.COLOR_BUFFER_BIT), n.activeTexture(n.TEXTURE0), n.bindTexture(n.TEXTURE_2D, m.texture);
-      const c = f.uniformLocations.get("u_image");
-      c && n.uniform1i(c, 0), L(
-        n,
-        f,
-        this._getUniformValues(m, a)
-      ), n.bindBuffer(n.ARRAY_BUFFER, d);
-      const h = 4 * Float32Array.BYTES_PER_ELEMENT, g = f.attribLocations.get("a_position");
-      g !== void 0 && g !== -1 && (n.enableVertexAttribArray(g), n.vertexAttribPointer(g, 2, n.FLOAT, !1, h, 0));
-      const p = f.attribLocations.get("a_texCoord");
-      p !== void 0 && p !== -1 && (n.enableVertexAttribArray(p), n.vertexAttribPointer(
+      s.useProgram(c.program);
+      const _ = L(s, this._image), x = V(s, c);
+      s.viewport(0, 0, m.width, m.height), s.clearColor(0, 0, 0, 0), s.clear(s.COLOR_BUFFER_BIT), s.activeTexture(s.TEXTURE0), s.bindTexture(s.TEXTURE_2D, _.texture);
+      const S = c.uniformLocations.get("u_image");
+      S && s.uniform1i(S, 0), I(
+        s,
+        c,
+        this._getUniformValues(d, h, r)
+      ), s.bindBuffer(s.ARRAY_BUFFER, x);
+      const E = 4 * Float32Array.BYTES_PER_ELEMENT, g = c.attribLocations.get("a_position");
+      g !== void 0 && g !== -1 && (s.enableVertexAttribArray(g), s.vertexAttribPointer(g, 2, s.FLOAT, !1, E, 0));
+      const p = c.attribLocations.get("a_texCoord");
+      p !== void 0 && p !== -1 && (s.enableVertexAttribArray(p), s.vertexAttribPointer(
         p,
         2,
-        n.FLOAT,
+        s.FLOAT,
         !1,
-        h,
+        E,
         2 * Float32Array.BYTES_PER_ELEMENT
-      )), P(n);
-      const S = await new Promise(
-        (A) => r.toBlob(A)
-      );
-      n.deleteTexture(m.texture), n.deleteProgram(f.program), n.deleteBuffer(d), S && (this._snapshotLoaded = !1, this._revokeSnapshot(), this._snapshotUrl = URL.createObjectURL(S));
+      )), N(s);
+      const b = this.renderRoot.querySelector(".snapshot");
+      if (b) {
+        b.width = d, b.height = h;
+        const T = b.getContext("2d");
+        T && (T.drawImage(m, 0, 0), this._snapshotReady = !0);
+      }
+      s.deleteTexture(_.texture), s.deleteProgram(c.program), s.deleteBuffer(x);
     } finally {
-      (_ = n.getExtension("WEBGL_lose_context")) == null || _.loseContext();
+      (f = s.getExtension("WEBGL_lose_context")) == null || f.loseContext();
     }
   }
   // ---------------------------------------------------------------------------
   // Helpers
   // ---------------------------------------------------------------------------
-  _onSnapshotLoad() {
-    this._snapshotLoaded = !0;
-  }
   /** Hide the rendered snapshot momentarily, then fade it back in.
    *  Useful for previewing the loading-blur transition. */
   replayTransition(o = 500) {
-    this._snapshotUrl && (this._snapshotLoaded = !1, this.updateComplete.then(() => {
+    this._snapshotReady && (this._snapshotReady = !1, this.updateComplete.then(() => {
       setTimeout(() => {
-        this._snapshotLoaded = !0;
+        this._snapshotReady = !0;
       }, o);
     }));
   }
-  _revokeSnapshot() {
-    this._snapshotUrl && (URL.revokeObjectURL(this._snapshotUrl), this._snapshotUrl = "");
-  }
-  _getUniformValues(o, a) {
+  _getUniformValues(o, r, i) {
     const t = {};
-    t.u_resolution = [
-      o.width * a,
-      o.height * a
-    ];
-    const l = o.width / this.referenceWidth;
-    return t.u_dotRadius = this.dotRadius * l, t.u_gridSize = this.gridSize * l, this.effect === "halftone-cmyk" ? (t.u_angleC = this.angleC, t.u_angleM = this.angleM, t.u_angleY = this.angleY, t.u_angleK = this.angleK, t.u_showC = this.showC, t.u_showM = this.showM, t.u_showY = this.showY, t.u_showK = this.showK, t.u_intensityK = this.intensityK) : this.effect === "halftone-duotone" ? (t.u_duotoneColor = this._parseHexColor(this.duotoneColor), t.u_angle = this.angle) : this.effect === "dot-grid" ? (t.u_dotOffset = [this.dotOffsetX, this.dotOffsetY], t.u_bgColor = this._parseHexColor(this.bgColor), t.u_angle = this.angle) : this.effect === "technicolor-2strip" && (t.u_angleWarm = this.angleWarm, t.u_angleCool = this.angleCool, t.u_angleK = this.angleK, t.u_showWarm = this.showWarm, t.u_showCool = this.showCool, t.u_showK = this.showK, t.u_warmColor = this._parseHexColor(this.warmColor), t.u_coolColor = this._parseHexColor(this.coolColor), t.u_blendMode = this.blendMode, t.u_intensityK = this.intensityK), t;
+    t.u_resolution = [o, r];
+    const n = o / (this.referenceWidth * i);
+    return t.u_dotRadius = this.dotRadius * n, t.u_gridSize = this.gridSize * n, this.effect === "halftone-cmyk" ? (t.u_angleC = this.angleC, t.u_angleM = this.angleM, t.u_angleY = this.angleY, t.u_angleK = this.angleK, t.u_showC = this.showC, t.u_showM = this.showM, t.u_showY = this.showY, t.u_showK = this.showK, t.u_intensityK = this.intensityK) : this.effect === "halftone-duotone" ? (t.u_duotoneColor = this._parseHexColor(this.duotoneColor), t.u_angle = this.angle) : this.effect === "dot-grid" ? (t.u_dotOffset = [this.dotOffsetX, this.dotOffsetY], t.u_bgColor = this._parseHexColor(this.bgColor), t.u_angle = this.angle) : this.effect === "technicolor-2strip" && (t.u_angleWarm = this.angleWarm, t.u_angleCool = this.angleCool, t.u_angleK = this.angleK, t.u_showWarm = this.showWarm, t.u_showCool = this.showCool, t.u_showK = this.showK, t.u_warmColor = this._parseHexColor(this.warmColor), t.u_coolColor = this._parseHexColor(this.coolColor), t.u_blendMode = this.blendMode, t.u_intensityK = this.intensityK), t;
   }
   _parseHexColor(o) {
-    const a = o.replace("#", ""), t = parseInt(a.substring(0, 2), 16) / 255, l = parseInt(a.substring(2, 4), 16) / 255, r = parseInt(a.substring(4, 6), 16) / 255;
-    return [t, l, r];
+    const r = o.replace("#", ""), i = parseInt(r.substring(0, 2), 16) / 255, t = parseInt(r.substring(2, 4), 16) / 255, n = parseInt(r.substring(4, 6), 16) / 255;
+    return [i, t, n];
   }
 };
-R.styles = K`
+R.styles = M`
     :host {
       display: block;
       position: relative;
@@ -632,7 +627,10 @@ R.styles = K`
       width: 100%;
       height: auto;
     }
-    img.snapshot {
+    img.base {
+      opacity: 0;
+    }
+    canvas.snapshot {
       position: absolute;
       inset: 0;
       width: 100%;
@@ -640,105 +638,99 @@ R.styles = K`
       opacity: 0;
       transition: opacity 0.3s ease;
     }
-    img.snapshot.loaded {
+    canvas.snapshot.ready {
       opacity: 1;
     }
   `;
-let i = R;
-s([
+let a = R;
+l([
   u()
-], i.prototype, "src");
-s([
+], a.prototype, "src");
+l([
   u()
-], i.prototype, "effect");
-s([
+], a.prototype, "effect");
+l([
   u({ type: Number, attribute: "dot-radius" })
-], i.prototype, "dotRadius");
-s([
+], a.prototype, "dotRadius");
+l([
   u({ type: Number, attribute: "grid-size" })
-], i.prototype, "gridSize");
-s([
+], a.prototype, "gridSize");
+l([
   u({ type: Number, attribute: "angle-c" })
-], i.prototype, "angleC");
-s([
+], a.prototype, "angleC");
+l([
   u({ type: Number, attribute: "angle-m" })
-], i.prototype, "angleM");
-s([
+], a.prototype, "angleM");
+l([
   u({ type: Number, attribute: "angle-y" })
-], i.prototype, "angleY");
-s([
+], a.prototype, "angleY");
+l([
   u({ type: Number, attribute: "angle-k" })
-], i.prototype, "angleK");
-s([
+], a.prototype, "angleK");
+l([
   u({ type: Number, attribute: "show-c" })
-], i.prototype, "showC");
-s([
+], a.prototype, "showC");
+l([
   u({ type: Number, attribute: "show-m" })
-], i.prototype, "showM");
-s([
+], a.prototype, "showM");
+l([
   u({ type: Number, attribute: "show-y" })
-], i.prototype, "showY");
-s([
+], a.prototype, "showY");
+l([
   u({ type: Number, attribute: "show-k" })
-], i.prototype, "showK");
-s([
+], a.prototype, "showK");
+l([
   u({ type: Number, attribute: "intensity-k" })
-], i.prototype, "intensityK");
-s([
+], a.prototype, "intensityK");
+l([
   u({ attribute: "duotone-color" })
-], i.prototype, "duotoneColor");
-s([
+], a.prototype, "duotoneColor");
+l([
   u({ type: Number })
-], i.prototype, "angle");
-s([
+], a.prototype, "angle");
+l([
   u({ type: Number, attribute: "dot-offset-x" })
-], i.prototype, "dotOffsetX");
-s([
+], a.prototype, "dotOffsetX");
+l([
   u({ type: Number, attribute: "dot-offset-y" })
-], i.prototype, "dotOffsetY");
-s([
+], a.prototype, "dotOffsetY");
+l([
   u({ attribute: "bg-color" })
-], i.prototype, "bgColor");
-s([
+], a.prototype, "bgColor");
+l([
   u({ type: Number, attribute: "angle-warm" })
-], i.prototype, "angleWarm");
-s([
+], a.prototype, "angleWarm");
+l([
   u({ type: Number, attribute: "angle-cool" })
-], i.prototype, "angleCool");
-s([
+], a.prototype, "angleCool");
+l([
   u({ type: Number, attribute: "show-warm" })
-], i.prototype, "showWarm");
-s([
+], a.prototype, "showWarm");
+l([
   u({ type: Number, attribute: "show-cool" })
-], i.prototype, "showCool");
-s([
+], a.prototype, "showCool");
+l([
   u({ attribute: "warm-color" })
-], i.prototype, "warmColor");
-s([
+], a.prototype, "warmColor");
+l([
   u({ attribute: "cool-color" })
-], i.prototype, "coolColor");
-s([
+], a.prototype, "coolColor");
+l([
   u({ type: Number, attribute: "blend-mode" })
-], i.prototype, "blendMode");
-s([
+], a.prototype, "blendMode");
+l([
   u({ type: Number, attribute: "reference-width" })
-], i.prototype, "referenceWidth");
-s([
-  u({ type: Number, attribute: "loading-blur" })
-], i.prototype, "loadingBlur");
-s([
-  w()
-], i.prototype, "_webglAvailable");
-s([
-  w()
-], i.prototype, "_snapshotUrl");
-s([
-  w()
-], i.prototype, "_snapshotLoaded");
-customElements.get("some-shade-image") || customElements.define("some-shade-image", i);
+], a.prototype, "referenceWidth");
+l([
+  D()
+], a.prototype, "_webglAvailable");
+l([
+  D()
+], a.prototype, "_snapshotReady");
+customElements.get("some-shade-image") || customElements.define("some-shade-image", a);
 export {
-  i as SomeShadeImage,
-  X as get,
-  Q as list,
-  v as register
+  a as SomeShadeImage,
+  $ as get,
+  ee as list,
+  y as register
 };

package/dist/some-shade.umd.js

@@ -1,4 +1,4 @@
-(function(f,h){typeof exports=="object"&&typeof module<"u"?h(exports,require("lit"),require("lit/decorators.js")):typeof define=="function"&&define.amd?define(["exports","lit","lit/decorators.js"],h):(f=typeof globalThis<"u"?globalThis:f||self,h(f.SomeShade={},f.Lit,f.LitDecorators))})(this,(function(f,h,l){"use strict";function U(e){return e.getContext("webgl",{alpha:!0,premultipliedAlpha:!1,preserveDrawingBuffer:!0})}function S(e,o,i){const t=e.createShader(o);if(!t)throw new Error("Failed to create shader");if(e.shaderSource(t,i),e.compileShader(t),!e.getShaderParameter(t,e.COMPILE_STATUS)){const u=e.getShaderInfoLog(t);throw e.deleteShader(t),new Error(`Shader compile error: ${u}`)}return t}function K(e,o,i){const t=S(e,e.VERTEX_SHADER,o),u=S(e,e.FRAGMENT_SHADER,i),r=e.createProgram();if(!r)throw new Error("Failed to create program");if(e.attachShader(r,t),e.attachShader(r,u),e.linkProgram(r),!e.getProgramParameter(r,e.LINK_STATUS)){const d=e.getProgramInfoLog(r);throw e.deleteProgram(r),new Error(`Program link error: ${d}`)}e.deleteShader(t),e.deleteShader(u);const n=new Map,v=e.getProgramParameter(r,e.ACTIVE_ATTRIBUTES);for(let d=0;d<v;d++){const m=e.getActiveAttrib(r,d);m&&n.set(m.name,e.getAttribLocation(r,m.name))}const c=new Map,g=e.getProgramParameter(r,e.ACTIVE_UNIFORMS);for(let d=0;d<g;d++){const m=e.getActiveUniform(r,d);if(m){const _=e.getUniformLocation(r,m.name);_&&c.set(m.name,_)}}return{program:r,attribLocations:n,uniformLocations:c}}function k(e,o,i){for(const[t,u]of Object.entries(i)){const r=o.uniformLocations.get(t);if(r){if(typeof u=="number")e.uniform1f(r,u);else if(Array.isArray(u))switch(u.length){case 2:e.uniform2fv(r,u);break;case 3:e.uniform3fv(r,u);break;case 4:e.uniform4fv(r,u);break}}}}function D(e,o){const i=e.createTexture();if(!i)throw new Error("Failed to create texture");return e.bindTexture(e.TEXTURE_2D,i),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,o),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),{texture:i,width:o.naturalWidth,height:o.naturalHeight}}function L(e,o){const i=new Float32Array([-1,-1,0,1,1,-1,1,1,-1,1,0,0,1,1,1,0]),t=e.createBuffer();if(!t)throw new Error("Failed to create buffer");e.bindBuffer(e.ARRAY_BUFFER,t),e.bufferData(e.ARRAY_BUFFER,i,e.STATIC_DRAW);const u=4*Float32Array.BYTES_PER_ELEMENT,r=o.attribLocations.get("a_position");r!==void 0&&r!==-1&&(e.enableVertexAttribArray(r),e.vertexAttribPointer(r,2,e.FLOAT,!1,u,0));const n=o.attribLocations.get("a_texCoord");return n!==void 0&&n!==-1&&(e.enableVertexAttribArray(n),e.vertexAttribPointer(n,2,e.FLOAT,!1,u,2*Float32Array.BYTES_PER_ELEMENT)),t}function M(e){e.drawArrays(e.TRIANGLE_STRIP,0,4)}const z=`precision mediump float;
+(function(m,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("lit"),require("lit/decorators.js")):typeof define=="function"&&define.amd?define(["exports","lit","lit/decorators.js"],p):(m=typeof globalThis<"u"?globalThis:m||self,p(m.SomeShade={},m.Lit,m.LitDecorators))})(this,(function(m,p,l){"use strict";function U(e){return e.getContext("webgl",{alpha:!0,premultipliedAlpha:!1,preserveDrawingBuffer:!0})}function E(e,o,r){const i=e.createShader(o);if(!i)throw new Error("Failed to create shader");if(e.shaderSource(i,r),e.compileShader(i),!e.getShaderParameter(i,e.COMPILE_STATUS)){const t=e.getShaderInfoLog(i);throw e.deleteShader(i),new Error(`Shader compile error: ${t}`)}return i}function z(e,o,r){const i=E(e,e.VERTEX_SHADER,o),t=E(e,e.FRAGMENT_SHADER,r),n=e.createProgram();if(!n)throw new Error("Failed to create program");if(e.attachShader(n,i),e.attachShader(n,t),e.linkProgram(n),!e.getProgramParameter(n,e.LINK_STATUS)){const c=e.getProgramInfoLog(n);throw e.deleteProgram(n),new Error(`Program link error: ${c}`)}e.deleteShader(i),e.deleteShader(t);const f=new Map,_=e.getProgramParameter(n,e.ACTIVE_ATTRIBUTES);for(let c=0;c<_;c++){const d=e.getActiveAttrib(n,c);d&&f.set(d.name,e.getAttribLocation(n,d.name))}const h=new Map,s=e.getProgramParameter(n,e.ACTIVE_UNIFORMS);for(let c=0;c<s;c++){const d=e.getActiveUniform(n,c);if(d){const b=e.getUniformLocation(n,d.name);b&&h.set(d.name,b)}}return{program:n,attribLocations:f,uniformLocations:h}}function P(e,o,r){for(const[i,t]of Object.entries(r)){const n=o.uniformLocations.get(i);if(n){if(typeof t=="number")e.uniform1f(n,t);else if(Array.isArray(t))switch(t.length){case 2:e.uniform2fv(n,t);break;case 3:e.uniform3fv(n,t);break;case 4:e.uniform4fv(n,t);break}}}}function I(e,o){const r=e.createTexture();if(!r)throw new Error("Failed to create texture");return e.bindTexture(e.TEXTURE_2D,r),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,o),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),{texture:r,width:o.naturalWidth,height:o.naturalHeight}}function L(e,o){const r=new Float32Array([-1,-1,0,1,1,-1,1,1,-1,1,0,0,1,1,1,0]),i=e.createBuffer();if(!i)throw new Error("Failed to create buffer");e.bindBuffer(e.ARRAY_BUFFER,i),e.bufferData(e.ARRAY_BUFFER,r,e.STATIC_DRAW);const t=4*Float32Array.BYTES_PER_ELEMENT,n=o.attribLocations.get("a_position");n!==void 0&&n!==-1&&(e.enableVertexAttribArray(n),e.vertexAttribPointer(n,2,e.FLOAT,!1,t,0));const f=o.attribLocations.get("a_texCoord");return f!==void 0&&f!==-1&&(e.enableVertexAttribArray(f),e.vertexAttribPointer(f,2,e.FLOAT,!1,t,2*Float32Array.BYTES_PER_ELEMENT)),i}function V(e){e.drawArrays(e.TRIANGLE_STRIP,0,4)}const N=`precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -84,7 +84,7 @@ void main() {
 
   gl_FragColor = vec4(outR, outG, outB, texture2D(u_image, v_texCoord).a);
 }
-`,b=`attribute vec2 a_position;
+`,v=`attribute vec2 a_position;
 attribute vec2 a_texCoord;
 varying vec2 v_texCoord;
 
@@ -92,7 +92,7 @@ void main() {
   gl_Position = vec4(a_position, 0.0, 1.0);
   v_texCoord = a_texCoord;
 }
-`,P={name:"halftone-cmyk",fragmentShader:z,vertexShader:b,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_angleC",type:"float",default:15,attribute:"angle-c"},{name:"u_angleM",type:"float",default:75,attribute:"angle-m"},{name:"u_angleY",type:"float",default:0,attribute:"angle-y"},{name:"u_angleK",type:"float",default:45,attribute:"angle-k"},{name:"u_showC",type:"float",default:1,attribute:"show-c"},{name:"u_showM",type:"float",default:1,attribute:"show-m"},{name:"u_showY",type:"float",default:1,attribute:"show-y"},{name:"u_showK",type:"float",default:1,attribute:"show-k"},{name:"u_intensityK",type:"float",default:1,attribute:"intensity-k"}]},I={name:"halftone-duotone",fragmentShader:`precision mediump float;
+`,W={name:"halftone-cmyk",fragmentShader:N,vertexShader:v,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_angleC",type:"float",default:15,attribute:"angle-c"},{name:"u_angleM",type:"float",default:75,attribute:"angle-m"},{name:"u_angleY",type:"float",default:0,attribute:"angle-y"},{name:"u_angleK",type:"float",default:45,attribute:"angle-k"},{name:"u_showC",type:"float",default:1,attribute:"show-c"},{name:"u_showM",type:"float",default:1,attribute:"show-m"},{name:"u_showY",type:"float",default:1,attribute:"show-y"},{name:"u_showK",type:"float",default:1,attribute:"show-k"},{name:"u_intensityK",type:"float",default:1,attribute:"intensity-k"}]},O={name:"halftone-duotone",fragmentShader:`precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -134,7 +134,7 @@ void main() {
 
   gl_FragColor = vec4(result, color.a);
 }
-`,vertexShader:b,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_duotoneColor",type:"vec3",default:[0,.6,.8],attribute:"duotone-color"},{name:"u_angle",type:"float",default:0,attribute:"angle"}]},V={name:"dot-grid",fragmentShader:`precision mediump float;
+`,vertexShader:v,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_duotoneColor",type:"vec3",default:[0,.6,.8],attribute:"duotone-color"},{name:"u_angle",type:"float",default:0,attribute:"angle"}]},F={name:"dot-grid",fragmentShader:`precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -190,7 +190,7 @@ void main() {
 
   gl_FragColor = vec4(result, 1.0);
 }
-`,vertexShader:b,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_dotOffset",type:"vec2",default:[.5,.5],attribute:"dot-offset"},{name:"u_bgColor",type:"vec3",default:[1,1,1],attribute:"bg-color"},{name:"u_angle",type:"float",default:0,attribute:"angle"}]},N={name:"technicolor-2strip",fragmentShader:`precision mediump float;
+`,vertexShader:v,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_dotOffset",type:"vec2",default:[.5,.5],attribute:"dot-offset"},{name:"u_bgColor",type:"vec3",default:[1,1,1],attribute:"bg-color"},{name:"u_angle",type:"float",default:0,attribute:"angle"}]},Y={name:"technicolor-2strip",fragmentShader:`precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -273,14 +273,12 @@ void main() {
 
   gl_FragColor = vec4(clamp(result, 0.0, 1.0), color.a);
 }
-`,vertexShader:b,uniforms:[{name:"u_dotRadius",type:"float",default:7,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:10,attribute:"grid-size"},{name:"u_angleWarm",type:"float",default:15,attribute:"angle-warm"},{name:"u_angleCool",type:"float",default:75,attribute:"angle-cool"},{name:"u_angleK",type:"float",default:45,attribute:"angle-k"},{name:"u_showWarm",type:"float",default:1,attribute:"show-warm"},{name:"u_showCool",type:"float",default:1,attribute:"show-cool"},{name:"u_showK",type:"float",default:1,attribute:"show-k"},{name:"u_warmColor",type:"vec3",default:[.85,.25,.06],attribute:"warm-color"},{name:"u_coolColor",type:"vec3",default:[.05,.65,.6],attribute:"cool-color"},{name:"u_blendMode",type:"float",default:1,attribute:"blend-mode"},{name:"u_intensityK",type:"float",default:1,attribute:"intensity-k"}]},C=new Map;function p(e){C.set(e.name,e)}function E(e){return C.get(e)}function O(){return Array.from(C.keys())}p(P),p(I),p(V),p(N);var F=Object.defineProperty,s=(e,o,i,t)=>{for(var u=void 0,r=e.length-1,n;r>=0;r--)(n=e[r])&&(u=n(o,i,u)||u);return u&&F(o,i,u),u};const W=2;let x=Promise.resolve();function T(e){const o=x.then(e,e);return x=o,o}const B=new Set(["effect","dotRadius","gridSize","angleC","angleM","angleY","angleK","showC","showM","showY","showK","intensityK","duotoneColor","angle","dotOffsetX","dotOffsetY","bgColor","angleWarm","angleCool","showWarm","showCool","warmColor","coolColor","blendMode","referenceWidth"]),R=class R extends h.LitElement{constructor(){super(...arguments),this.src="",this.effect="halftone-cmyk",this.dotRadius=4,this.gridSize=8,this.angleC=15,this.angleM=75,this.angleY=0,this.angleK=45,this.showC=1,this.showM=1,this.showY=1,this.showK=1,this.intensityK=1,this.duotoneColor="#0099cc",this.angle=0,this.dotOffsetX=.5,this.dotOffsetY=.5,this.bgColor="#ffffff",this.angleWarm=15,this.angleCool=75,this.showWarm=1,this.showCool=1,this.warmColor="#d94010",this.coolColor="#0da699",this.blendMode=1,this.referenceWidth=1024,this.loadingBlur=0,this._webglAvailable=!0,this._snapshotUrl="",this._snapshotLoaded=!1,this._image=null,this._observer=null,this._visible=!1,this._needsRender=!1}render(){if(!this._webglAvailable)return h.html`<img src=${this.src} alt="" />`;const o=this.loadingBlur>0?`filter: blur(${this.loadingBlur}px)`:"";return h.html`
-      <img src=${this.src} alt="" style=${o} />
-      ${this._snapshotUrl?h.html`<img
-            class="snapshot${this._snapshotLoaded?" loaded":""}"
-            src=${this._snapshotUrl}
-            @load=${this._onSnapshotLoad}
-            alt="" />`:""}
-    `}connectedCallback(){super.connectedCallback(),this._observer=new IntersectionObserver(o=>{var t;const i=this._visible;this._visible=((t=o[0])==null?void 0:t.isIntersecting)??!1,this._visible&&!i&&this._needsRender&&(this._needsRender=!1,T(()=>this._renderEffect()))},{rootMargin:"200px"}),this._observer.observe(this)}updated(o){if(o.has("src")&&this.src){this._loadImage(this.src);return}if(!this._image)return;[...o.keys()].some(t=>B.has(t))&&this._scheduleRender()}disconnectedCallback(){var o;super.disconnectedCallback(),(o=this._observer)==null||o.disconnect(),this._revokeSnapshot()}_loadImage(o){const i=new Image;i.crossOrigin="anonymous",i.onload=()=>{this._image=i,this._scheduleRender()},i.onerror=()=>{console.warn(`[some-shade] Failed to load image: ${o}`)},i.src=o}_scheduleRender(){this._visible?T(()=>this._renderEffect()):this._needsRender=!0}async _renderEffect(){var v;if(!this._image)return;const o=E(this.effect);if(!o){console.warn(`[some-shade] Unknown effect: ${this.effect}`);return}const i=Math.min(window.devicePixelRatio||1,W),t=this._image.naturalWidth,u=this._image.naturalHeight,r=document.createElement("canvas");r.width=t*i,r.height=u*i;const n=U(r);if(!n){this._webglAvailable=!1;return}try{const c=K(n,o.vertexShader,o.fragmentShader);n.useProgram(c.program);const g=D(n,this._image),d=L(n,c);n.viewport(0,0,r.width,r.height),n.clearColor(0,0,0,0),n.clear(n.COLOR_BUFFER_BIT),n.activeTexture(n.TEXTURE0),n.bindTexture(n.TEXTURE_2D,g.texture);const m=c.uniformLocations.get("u_image");m&&n.uniform1i(m,0),k(n,c,this._getUniformValues(g,i)),n.bindBuffer(n.ARRAY_BUFFER,d);const _=4*Float32Array.BYTES_PER_ELEMENT,y=c.attribLocations.get("a_position");y!==void 0&&y!==-1&&(n.enableVertexAttribArray(y),n.vertexAttribPointer(y,2,n.FLOAT,!1,_,0));const w=c.attribLocations.get("a_texCoord");w!==void 0&&w!==-1&&(n.enableVertexAttribArray(w),n.vertexAttribPointer(w,2,n.FLOAT,!1,_,2*Float32Array.BYTES_PER_ELEMENT)),M(n);const A=await new Promise(Y=>r.toBlob(Y));n.deleteTexture(g.texture),n.deleteProgram(c.program),n.deleteBuffer(d),A&&(this._snapshotLoaded=!1,this._revokeSnapshot(),this._snapshotUrl=URL.createObjectURL(A))}finally{(v=n.getExtension("WEBGL_lose_context"))==null||v.loseContext()}}_onSnapshotLoad(){this._snapshotLoaded=!0}replayTransition(o=500){this._snapshotUrl&&(this._snapshotLoaded=!1,this.updateComplete.then(()=>{setTimeout(()=>{this._snapshotLoaded=!0},o)}))}_revokeSnapshot(){this._snapshotUrl&&(URL.revokeObjectURL(this._snapshotUrl),this._snapshotUrl="")}_getUniformValues(o,i){const t={};t.u_resolution=[o.width*i,o.height*i];const u=o.width/this.referenceWidth;return t.u_dotRadius=this.dotRadius*u,t.u_gridSize=this.gridSize*u,this.effect==="halftone-cmyk"?(t.u_angleC=this.angleC,t.u_angleM=this.angleM,t.u_angleY=this.angleY,t.u_angleK=this.angleK,t.u_showC=this.showC,t.u_showM=this.showM,t.u_showY=this.showY,t.u_showK=this.showK,t.u_intensityK=this.intensityK):this.effect==="halftone-duotone"?(t.u_duotoneColor=this._parseHexColor(this.duotoneColor),t.u_angle=this.angle):this.effect==="dot-grid"?(t.u_dotOffset=[this.dotOffsetX,this.dotOffsetY],t.u_bgColor=this._parseHexColor(this.bgColor),t.u_angle=this.angle):this.effect==="technicolor-2strip"&&(t.u_angleWarm=this.angleWarm,t.u_angleCool=this.angleCool,t.u_angleK=this.angleK,t.u_showWarm=this.showWarm,t.u_showCool=this.showCool,t.u_showK=this.showK,t.u_warmColor=this._parseHexColor(this.warmColor),t.u_coolColor=this._parseHexColor(this.coolColor),t.u_blendMode=this.blendMode,t.u_intensityK=this.intensityK),t}_parseHexColor(o){const i=o.replace("#",""),t=parseInt(i.substring(0,2),16)/255,u=parseInt(i.substring(2,4),16)/255,r=parseInt(i.substring(4,6),16)/255;return[t,u,r]}};R.styles=h.css`
+`,vertexShader:v,uniforms:[{name:"u_dotRadius",type:"float",default:7,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:10,attribute:"grid-size"},{name:"u_angleWarm",type:"float",default:15,attribute:"angle-warm"},{name:"u_angleCool",type:"float",default:75,attribute:"angle-cool"},{name:"u_angleK",type:"float",default:45,attribute:"angle-k"},{name:"u_showWarm",type:"float",default:1,attribute:"show-warm"},{name:"u_showCool",type:"float",default:1,attribute:"show-cool"},{name:"u_showK",type:"float",default:1,attribute:"show-k"},{name:"u_warmColor",type:"vec3",default:[.85,.25,.06],attribute:"warm-color"},{name:"u_coolColor",type:"vec3",default:[.05,.65,.6],attribute:"cool-color"},{name:"u_blendMode",type:"float",default:1,attribute:"blend-mode"},{name:"u_intensityK",type:"float",default:1,attribute:"intensity-k"}]},R=new Map;function g(e){R.set(e.name,e)}function T(e){return R.get(e)}function B(){return Array.from(R.keys())}g(W),g(O),g(F),g(Y);var X=Object.defineProperty,u=(e,o,r,i)=>{for(var t=void 0,n=e.length-1,f;n>=0;n--)(f=e[n])&&(t=f(o,r,t)||t);return t&&X(o,r,t),t};const G=2;let A=Promise.resolve();function S(e){const o=A.then(e,e);return A=o,o}const H=new Set(["effect","dotRadius","gridSize","angleC","angleM","angleY","angleK","showC","showM","showY","showK","intensityK","duotoneColor","angle","dotOffsetX","dotOffsetY","bgColor","angleWarm","angleCool","showWarm","showCool","warmColor","coolColor","blendMode","referenceWidth"]),x=class x extends p.LitElement{constructor(){super(...arguments),this.src="",this.effect="halftone-cmyk",this.dotRadius=4,this.gridSize=8,this.angleC=15,this.angleM=75,this.angleY=0,this.angleK=45,this.showC=1,this.showM=1,this.showY=1,this.showK=1,this.intensityK=1,this.duotoneColor="#0099cc",this.angle=0,this.dotOffsetX=.5,this.dotOffsetY=.5,this.bgColor="#ffffff",this.angleWarm=15,this.angleCool=75,this.showWarm=1,this.showCool=1,this.warmColor="#d94010",this.coolColor="#0da699",this.blendMode=1,this.referenceWidth=1024,this._webglAvailable=!0,this._snapshotReady=!1,this._image=null,this._observer=null,this._visible=!1,this._needsRender=!1}render(){return this._webglAvailable?p.html`
+      <img class="base" src=${this.src} alt="" />
+      <canvas
+        class="snapshot${this._snapshotReady?" ready":""}"
+      ></canvas>
+    `:p.html`<img src=${this.src} alt="" />`}connectedCallback(){super.connectedCallback(),this._observer=new IntersectionObserver(o=>{var i;const r=this._visible;this._visible=((i=o[0])==null?void 0:i.isIntersecting)??!1,this._visible&&!r&&(this._needsRender||this._image&&!this._snapshotReady)&&(this._needsRender=!1,S(()=>this._renderEffect()))},{rootMargin:"200px"}),this._observer.observe(this)}updated(o){if(o.has("src")&&this.src){this._loadImage(this.src);return}if(!this._image)return;[...o.keys()].some(i=>H.has(i))&&this._scheduleRender()}disconnectedCallback(){var o;super.disconnectedCallback(),(o=this._observer)==null||o.disconnect()}_loadImage(o){const r=new Image;r.crossOrigin="anonymous",r.onload=()=>{this._image=r,this._scheduleRender()},r.onerror=()=>{console.warn(`[some-shade] Failed to load image: ${o}`)},r.src=o}_scheduleRender(){this._visible?S(()=>this._renderEffect()):(this._needsRender=!0,requestAnimationFrame(()=>{if(this._needsRender&&!this._visible){const o=this.getBoundingClientRect();o.bottom>=0&&o.top<window.innerHeight&&(this._visible=!0,this._needsRender=!1,S(()=>this._renderEffect()))}}))}async _renderEffect(){var c;if(!this._image)return;const o=T(this.effect);if(!o){console.warn(`[some-shade] Unknown effect: ${this.effect}`);return}this._snapshotReady=!1;const r=Math.min(window.devicePixelRatio||1,G),i=this._image.naturalWidth,t=this._image.naturalHeight,n=this.clientWidth||i,f=Math.min(Math.round(n*r),i),_=Math.round(f*(t/i)),h=document.createElement("canvas");h.width=f,h.height=_;const s=U(h);if(!s){this._webglAvailable=!1;return}try{const d=z(s,o.vertexShader,o.fragmentShader);s.useProgram(d.program);const b=I(s,this._image),K=L(s,d);s.viewport(0,0,h.width,h.height),s.clearColor(0,0,0,0),s.clear(s.COLOR_BUFFER_BIT),s.activeTexture(s.TEXTURE0),s.bindTexture(s.TEXTURE_2D,b.texture);const D=d.uniformLocations.get("u_image");D&&s.uniform1i(D,0),P(s,d,this._getUniformValues(f,_,r)),s.bindBuffer(s.ARRAY_BUFFER,K);const k=4*Float32Array.BYTES_PER_ELEMENT,y=d.attribLocations.get("a_position");y!==void 0&&y!==-1&&(s.enableVertexAttribArray(y),s.vertexAttribPointer(y,2,s.FLOAT,!1,k,0));const w=d.attribLocations.get("a_texCoord");w!==void 0&&w!==-1&&(s.enableVertexAttribArray(w),s.vertexAttribPointer(w,2,s.FLOAT,!1,k,2*Float32Array.BYTES_PER_ELEMENT)),V(s);const C=this.renderRoot.querySelector(".snapshot");if(C){C.width=f,C.height=_;const M=C.getContext("2d");M&&(M.drawImage(h,0,0),this._snapshotReady=!0)}s.deleteTexture(b.texture),s.deleteProgram(d.program),s.deleteBuffer(K)}finally{(c=s.getExtension("WEBGL_lose_context"))==null||c.loseContext()}}replayTransition(o=500){this._snapshotReady&&(this._snapshotReady=!1,this.updateComplete.then(()=>{setTimeout(()=>{this._snapshotReady=!0},o)}))}_getUniformValues(o,r,i){const t={};t.u_resolution=[o,r];const n=o/(this.referenceWidth*i);return t.u_dotRadius=this.dotRadius*n,t.u_gridSize=this.gridSize*n,this.effect==="halftone-cmyk"?(t.u_angleC=this.angleC,t.u_angleM=this.angleM,t.u_angleY=this.angleY,t.u_angleK=this.angleK,t.u_showC=this.showC,t.u_showM=this.showM,t.u_showY=this.showY,t.u_showK=this.showK,t.u_intensityK=this.intensityK):this.effect==="halftone-duotone"?(t.u_duotoneColor=this._parseHexColor(this.duotoneColor),t.u_angle=this.angle):this.effect==="dot-grid"?(t.u_dotOffset=[this.dotOffsetX,this.dotOffsetY],t.u_bgColor=this._parseHexColor(this.bgColor),t.u_angle=this.angle):this.effect==="technicolor-2strip"&&(t.u_angleWarm=this.angleWarm,t.u_angleCool=this.angleCool,t.u_angleK=this.angleK,t.u_showWarm=this.showWarm,t.u_showCool=this.showCool,t.u_showK=this.showK,t.u_warmColor=this._parseHexColor(this.warmColor),t.u_coolColor=this._parseHexColor(this.coolColor),t.u_blendMode=this.blendMode,t.u_intensityK=this.intensityK),t}_parseHexColor(o){const r=o.replace("#",""),i=parseInt(r.substring(0,2),16)/255,t=parseInt(r.substring(2,4),16)/255,n=parseInt(r.substring(4,6),16)/255;return[i,t,n]}};x.styles=p.css`
     :host {
       display: block;
       position: relative;
@@ -292,7 +290,10 @@ void main() {
       width: 100%;
       height: auto;
     }
-    img.snapshot {
+    img.base {
+      opacity: 0;
+    }
+    canvas.snapshot {
       position: absolute;
       inset: 0;
       width: 100%;
@@ -300,7 +301,7 @@ void main() {
       opacity: 0;
       transition: opacity 0.3s ease;
     }
-    img.snapshot.loaded {
+    canvas.snapshot.ready {
       opacity: 1;
     }
-  `;let a=R;s([l.property()],a.prototype,"src"),s([l.property()],a.prototype,"effect"),s([l.property({type:Number,attribute:"dot-radius"})],a.prototype,"dotRadius"),s([l.property({type:Number,attribute:"grid-size"})],a.prototype,"gridSize"),s([l.property({type:Number,attribute:"angle-c"})],a.prototype,"angleC"),s([l.property({type:Number,attribute:"angle-m"})],a.prototype,"angleM"),s([l.property({type:Number,attribute:"angle-y"})],a.prototype,"angleY"),s([l.property({type:Number,attribute:"angle-k"})],a.prototype,"angleK"),s([l.property({type:Number,attribute:"show-c"})],a.prototype,"showC"),s([l.property({type:Number,attribute:"show-m"})],a.prototype,"showM"),s([l.property({type:Number,attribute:"show-y"})],a.prototype,"showY"),s([l.property({type:Number,attribute:"show-k"})],a.prototype,"showK"),s([l.property({type:Number,attribute:"intensity-k"})],a.prototype,"intensityK"),s([l.property({attribute:"duotone-color"})],a.prototype,"duotoneColor"),s([l.property({type:Number})],a.prototype,"angle"),s([l.property({type:Number,attribute:"dot-offset-x"})],a.prototype,"dotOffsetX"),s([l.property({type:Number,attribute:"dot-offset-y"})],a.prototype,"dotOffsetY"),s([l.property({attribute:"bg-color"})],a.prototype,"bgColor"),s([l.property({type:Number,attribute:"angle-warm"})],a.prototype,"angleWarm"),s([l.property({type:Number,attribute:"angle-cool"})],a.prototype,"angleCool"),s([l.property({type:Number,attribute:"show-warm"})],a.prototype,"showWarm"),s([l.property({type:Number,attribute:"show-cool"})],a.prototype,"showCool"),s([l.property({attribute:"warm-color"})],a.prototype,"warmColor"),s([l.property({attribute:"cool-color"})],a.prototype,"coolColor"),s([l.property({type:Number,attribute:"blend-mode"})],a.prototype,"blendMode"),s([l.property({type:Number,attribute:"reference-width"})],a.prototype,"referenceWidth"),s([l.property({type:Number,attribute:"loading-blur"})],a.prototype,"loadingBlur"),s([l.state()],a.prototype,"_webglAvailable"),s([l.state()],a.prototype,"_snapshotUrl"),s([l.state()],a.prototype,"_snapshotLoaded"),customElements.get("some-shade-image")||customElements.define("some-shade-image",a),f.SomeShadeImage=a,f.get=E,f.list=O,f.register=p,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));
+  `;let a=x;u([l.property()],a.prototype,"src"),u([l.property()],a.prototype,"effect"),u([l.property({type:Number,attribute:"dot-radius"})],a.prototype,"dotRadius"),u([l.property({type:Number,attribute:"grid-size"})],a.prototype,"gridSize"),u([l.property({type:Number,attribute:"angle-c"})],a.prototype,"angleC"),u([l.property({type:Number,attribute:"angle-m"})],a.prototype,"angleM"),u([l.property({type:Number,attribute:"angle-y"})],a.prototype,"angleY"),u([l.property({type:Number,attribute:"angle-k"})],a.prototype,"angleK"),u([l.property({type:Number,attribute:"show-c"})],a.prototype,"showC"),u([l.property({type:Number,attribute:"show-m"})],a.prototype,"showM"),u([l.property({type:Number,attribute:"show-y"})],a.prototype,"showY"),u([l.property({type:Number,attribute:"show-k"})],a.prototype,"showK"),u([l.property({type:Number,attribute:"intensity-k"})],a.prototype,"intensityK"),u([l.property({attribute:"duotone-color"})],a.prototype,"duotoneColor"),u([l.property({type:Number})],a.prototype,"angle"),u([l.property({type:Number,attribute:"dot-offset-x"})],a.prototype,"dotOffsetX"),u([l.property({type:Number,attribute:"dot-offset-y"})],a.prototype,"dotOffsetY"),u([l.property({attribute:"bg-color"})],a.prototype,"bgColor"),u([l.property({type:Number,attribute:"angle-warm"})],a.prototype,"angleWarm"),u([l.property({type:Number,attribute:"angle-cool"})],a.prototype,"angleCool"),u([l.property({type:Number,attribute:"show-warm"})],a.prototype,"showWarm"),u([l.property({type:Number,attribute:"show-cool"})],a.prototype,"showCool"),u([l.property({attribute:"warm-color"})],a.prototype,"warmColor"),u([l.property({attribute:"cool-color"})],a.prototype,"coolColor"),u([l.property({type:Number,attribute:"blend-mode"})],a.prototype,"blendMode"),u([l.property({type:Number,attribute:"reference-width"})],a.prototype,"referenceWidth"),u([l.state()],a.prototype,"_webglAvailable"),u([l.state()],a.prototype,"_snapshotReady"),customElements.get("some-shade-image")||customElements.define("some-shade-image",a),m.SomeShadeImage=a,m.get=T,m.list=B,m.register=g,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnfmorton/some-shade",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "ISC",
   "homepage": "https://johnfmorton.github.io/some-shade-web-component/",
   "repository": {
@@ -27,16 +27,16 @@
     "README.md",
     "CHANGELOG.md"
   ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build"
+  },
   "dependencies": {
     "lit": "^3.2.0"
   },
   "devDependencies": {
     "typescript": "^5.5.0",
-    "vite": "^6.0.0",
+    "vite": "^6.4.2",
     "vite-plugin-dts": "^4.0.0"
-  },
-  "scripts": {
-    "dev": "vite build --watch",
-    "build": "vite build"
   }
-}
+}