@johnfmorton/some-shade 0.1.0-beta.7 → 0.1.0-beta.8

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.1.0-beta.8
+
+- Fix mobile crashes when using multiple instances on one page
+- Render-then-snapshot architecture: WebGL context is created, used, and torn down per render instead of held persistently
+- Cap devicePixelRatio at 2 to reduce canvas memory on 3×+ mobile screens
+- Global render queue serialises WebGL across all instances (at most one context at a time)
+- IntersectionObserver defers rendering for off-screen instances until they scroll into view
+
+## 0.1.0-beta.7
+
+- Guard custom element registration against double-define
+
 ## 0.1.0-beta.6
 
 - Publish as `latest` dist-tag to fix missing sidebar links (Repository, Homepage, Issues) on npmjs.com

package/dist/index.d.ts

@@ -35,27 +35,21 @@ export declare class SomeShadeImage extends LitElement {
     dotOffsetY: number;
     bgColor: string;
     private _webglAvailable;
-    private _canvas;
-    private _gl;
-    private _programInfo;
-    private _textureInfo;
-    private _quadBuffer;
-    private _currentEffect;
+    private _snapshotUrl;
     private _image;
-    private _resizeObserver;
+    private _observer;
+    private _visible;
+    private _needsRender;
     render(): TemplateResult<1>;
-    firstUpdated(): void;
+    connectedCallback(): void;
     updated(changed: PropertyValues): void;
     disconnectedCallback(): void;
     private _loadImage;
-    private _uploadTexture;
-    private _sizeCanvas;
-    private _handleResize;
-    private _setupProgram;
+    private _scheduleRender;
+    private _renderEffect;
+    private _revokeSnapshot;
     private _getUniformValues;
     private _parseHexColor;
-    private _renderFrame;
-    private _cleanup;
 }
 
 export declare interface UniformDefinition {

package/dist/some-shade.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("lit"),s=require("lit/decorators.js");function C(t){return t.getContext("webgl",{alpha:!0,premultipliedAlpha:!1,preserveDrawingBuffer:!0})}function b(t,e,o){const a=t.createShader(e);if(!a)throw new Error("Failed to create shader");if(t.shaderSource(a,o),t.compileShader(a),!t.getShaderParameter(a,t.COMPILE_STATUS)){const n=t.getShaderInfoLog(a);throw t.deleteShader(a),new Error(`Shader compile error: ${n}`)}return a}function R(t,e,o){const a=b(t,t.VERTEX_SHADER,e),n=b(t,t.FRAGMENT_SHADER,o),r=t.createProgram();if(!r)throw new Error("Failed to create program");if(t.attachShader(r,a),t.attachShader(r,n),t.linkProgram(r),!t.getProgramParameter(r,t.LINK_STATUS)){const l=t.getProgramInfoLog(r);throw t.deleteProgram(r),new Error(`Program link error: ${l}`)}t.deleteShader(a),t.deleteShader(n);const f=new Map,x=t.getProgramParameter(r,t.ACTIVE_ATTRIBUTES);for(let l=0;l<x;l++){const d=t.getActiveAttrib(r,l);d&&f.set(d.name,t.getAttribLocation(r,d.name))}const g=new Map,E=t.getProgramParameter(r,t.ACTIVE_UNIFORMS);for(let l=0;l<E;l++){const d=t.getActiveUniform(r,l);if(d){const v=t.getUniformLocation(r,d.name);v&&g.set(d.name,v)}}return{program:r,attribLocations:f,uniformLocations:g}}function S(t,e,o){for(const[a,n]of Object.entries(o)){const r=e.uniformLocations.get(a);if(r){if(typeof n=="number")t.uniform1f(r,n);else if(Array.isArray(n))switch(n.length){case 2:t.uniform2fv(r,n);break;case 3:t.uniform3fv(r,n);break;case 4:t.uniform4fv(r,n);break}}}}function T(t,e){const o=t.createTexture();if(!o)throw new Error("Failed to create texture");return t.bindTexture(t.TEXTURE_2D,o),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,e),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),{texture:o,width:e.naturalWidth,height:e.naturalHeight}}function A(t,e){const o=new Float32Array([-1,-1,0,1,1,-1,1,1,-1,1,0,0,1,1,1,0]),a=t.createBuffer();if(!a)throw new Error("Failed to create buffer");t.bindBuffer(t.ARRAY_BUFFER,a),t.bufferData(t.ARRAY_BUFFER,o,t.STATIC_DRAW);const n=4*Float32Array.BYTES_PER_ELEMENT,r=e.attribLocations.get("a_position");r!==void 0&&r!==-1&&(t.enableVertexAttribArray(r),t.vertexAttribPointer(r,2,t.FLOAT,!1,n,0));const f=e.attribLocations.get("a_texCoord");return f!==void 0&&f!==-1&&(t.enableVertexAttribArray(f),t.vertexAttribPointer(f,2,t.FLOAT,!1,n,2*Float32Array.BYTES_PER_ELEMENT)),a}function w(t){t.drawArrays(t.TRIANGLE_STRIP,0,4)}const I=`precision mediump float;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("lit"),u=require("lit/decorators.js");function k(e){return e.getContext("webgl",{alpha:!0,premultipliedAlpha:!1,preserveDrawingBuffer:!0})}function S(e,r,a){const t=e.createShader(r);if(!t)throw new Error("Failed to create shader");if(e.shaderSource(t,a),e.compileShader(t),!e.getShaderParameter(t,e.COMPILE_STATUS)){const i=e.getShaderInfoLog(t);throw e.deleteShader(t),new Error(`Shader compile error: ${i}`)}return t}function w(e,r,a){const t=S(e,e.VERTEX_SHADER,r),i=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,i),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(i);const o=new Map,_=e.getProgramParameter(n,e.ACTIVE_ATTRIBUTES);for(let f=0;f<_;f++){const c=e.getActiveAttrib(n,f);c&&o.set(c.name,e.getAttribLocation(n,c.name))}const d=new Map,m=e.getProgramParameter(n,e.ACTIVE_UNIFORMS);for(let f=0;f<m;f++){const c=e.getActiveUniform(n,f);if(c){const h=e.getUniformLocation(n,c.name);h&&d.set(c.name,h)}}return{program:n,attribLocations:o,uniformLocations:d}}function D(e,r,a){for(const[t,i]of Object.entries(a)){const n=r.uniformLocations.get(t);if(n){if(typeof i=="number")e.uniform1f(n,i);else if(Array.isArray(i))switch(i.length){case 2:e.uniform2fv(n,i);break;case 3:e.uniform3fv(n,i);break;case 4:e.uniform4fv(n,i);break}}}}function L(e,r){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,r),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:r.naturalWidth,height:r.naturalHeight}}function P(e,r){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 i=4*Float32Array.BYTES_PER_ELEMENT,n=r.attribLocations.get("a_position");n!==void 0&&n!==-1&&(e.enableVertexAttribArray(n),e.vertexAttribPointer(n,2,e.FLOAT,!1,i,0));const o=r.attribLocations.get("a_texCoord");return o!==void 0&&o!==-1&&(e.enableVertexAttribArray(o),e.vertexAttribPointer(o,2,e.FLOAT,!1,i,2*Float32Array.BYTES_PER_ELEMENT)),t}function V(e){e.drawArrays(e.TRIANGLE_STRIP,0,4)}const O=`precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -54,7 +54,7 @@ void main() {
 
   gl_FragColor = vec4(outR, outG, outB, color.a);
 }
-`,h=`attribute vec2 a_position;
+`,y=`attribute vec2 a_position;
 attribute vec2 a_texCoord;
 varying vec2 v_texCoord;
 
@@ -62,7 +62,7 @@ void main() {
   gl_Position = vec4(a_position, 0.0, 1.0);
   v_texCoord = a_texCoord;
 }
-`,U={name:"halftone-cmyk",fragmentShader:I,vertexShader:h,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"}]},k=`precision mediump float;
+`,F={name:"halftone-cmyk",fragmentShader:O,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"}]},z=`precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -97,7 +97,7 @@ void main() {
 
   gl_FragColor = vec4(result, color.a);
 }
-`,P={name:"halftone-duotone",fragmentShader:k,vertexShader:h,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"}]},D=`precision mediump float;
+`,M={name:"halftone-duotone",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_duotoneColor",type:"vec3",default:[0,.6,.8],attribute:"duotone-color"},{name:"u_angle",type:"float",default:0,attribute:"angle"}]},I=`precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -166,7 +166,7 @@ void main() {
   vec2 sortedUV = spanStartUV + step * float(rank);
   gl_FragColor = texture2D(u_image, sortedUV);
 }
-`,L={name:"pixel-sort",fragmentShader:D,vertexShader:h,uniforms:[{name:"u_threshold",type:"float",default:.5,attribute:"threshold"},{name:"u_direction",type:"float",default:0,attribute:"sort-direction"},{name:"u_span",type:"float",default:64,attribute:"sort-span"}]},z=`precision mediump float;
+`,N={name:"pixel-sort",fragmentShader:I,vertexShader:y,uniforms:[{name:"u_threshold",type:"float",default:.5,attribute:"threshold"},{name:"u_direction",type:"float",default:0,attribute:"sort-direction"},{name:"u_span",type:"float",default:64,attribute:"sort-span"}]},B=`precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -211,15 +211,15 @@ void main() {
 
   gl_FragColor = vec4(result, 1.0);
 }
-`,F={name:"dot-grid",fragmentShader:z,vertexShader:h,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"}]},m=new Map;function c(t){m.set(t.name,t)}function y(t){return m.get(t)}function V(){return Array.from(m.keys())}c(U);c(P);c(L);c(F);var O=Object.defineProperty,u=(t,e,o,a)=>{for(var n=void 0,r=t.length-1,f;r>=0;r--)(f=t[r])&&(n=f(e,o,n)||n);return n&&O(e,o,n),n};const p=class p extends _.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.duotoneColor="#0099cc",this.angle=0,this.threshold=.5,this.sortDirection=0,this.sortSpan=64,this.dotOffsetX=.5,this.dotOffsetY=.5,this.bgColor="#ffffff",this._webglAvailable=!0,this._canvas=null,this._gl=null,this._programInfo=null,this._textureInfo=null,this._quadBuffer=null,this._currentEffect=null,this._image=null,this._resizeObserver=null}render(){return this._webglAvailable?_.html`<canvas></canvas>`:_.html`<img .src=${this.src} alt="" />`}firstUpdated(){if(this._webglAvailable&&(this._canvas=this.shadowRoot.querySelector("canvas"),!!this._canvas)){if(this._gl=C(this._canvas),!this._gl){this._webglAvailable=!1,this.classList.add("webgl-unavailable");return}this._resizeObserver=new ResizeObserver(()=>this._handleResize()),this._resizeObserver.observe(this),this.src&&this._loadImage(this.src)}}updated(e){if(this._gl){if(e.has("src")&&this.src){this._loadImage(this.src);return}if(e.has("effect")){this._setupProgram(),this._renderFrame();return}this._renderFrame()}}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this._resizeObserver)==null||e.disconnect(),this._cleanup()}_loadImage(e){const o=new Image;o.crossOrigin="anonymous",o.onload=()=>{this._image=o,this._uploadTexture(),this._sizeCanvas(),this._setupProgram(),this._renderFrame()},o.onerror=()=>{console.warn(`[some-shade] Failed to load image: ${e}`)},o.src=e}_uploadTexture(){!this._gl||!this._image||(this._textureInfo&&this._gl.deleteTexture(this._textureInfo.texture),this._textureInfo=T(this._gl,this._image))}_sizeCanvas(){if(!this._canvas||!this._textureInfo)return;const e=window.devicePixelRatio||1,o=this._textureInfo.width,a=this._textureInfo.height;this._canvas.width=o*e,this._canvas.height=a*e,this._canvas.style.aspectRatio=`${o} / ${a}`}_handleResize(){this._renderFrame()}_setupProgram(){if(!this._gl)return;const e=y(this.effect);if(!e){console.warn(`[some-shade] Unknown effect: ${this.effect}`);return}this._programInfo&&this._gl.deleteProgram(this._programInfo.program),this._currentEffect=e,this._programInfo=R(this._gl,e.vertexShader,e.fragmentShader),this._quadBuffer&&this._gl.deleteBuffer(this._quadBuffer),this._gl.useProgram(this._programInfo.program),this._quadBuffer=A(this._gl,this._programInfo)}_getUniformValues(){const e={};return this._textureInfo&&(e.u_resolution=[this._textureInfo.width*(window.devicePixelRatio||1),this._textureInfo.height*(window.devicePixelRatio||1)],e.u_dotRadius=this.dotRadius,e.u_gridSize=this.gridSize,this.effect==="halftone-cmyk"?(e.u_angleC=this.angleC,e.u_angleM=this.angleM,e.u_angleY=this.angleY,e.u_angleK=this.angleK):this.effect==="halftone-duotone"?(e.u_duotoneColor=this._parseHexColor(this.duotoneColor),e.u_angle=this.angle):this.effect==="pixel-sort"?(e.u_threshold=this.threshold,e.u_direction=this.sortDirection,e.u_span=this.sortSpan):this.effect==="dot-grid"&&(e.u_dotOffset=[this.dotOffsetX,this.dotOffsetY],e.u_bgColor=this._parseHexColor(this.bgColor))),e}_parseHexColor(e){const o=e.replace("#",""),a=parseInt(o.substring(0,2),16)/255,n=parseInt(o.substring(2,4),16)/255,r=parseInt(o.substring(4,6),16)/255;return[a,n,r]}_renderFrame(){const e=this._gl;if(!e||!this._programInfo||!this._textureInfo||!this._canvas)return;e.viewport(0,0,this._canvas.width,this._canvas.height),e.clearColor(0,0,0,0),e.clear(e.COLOR_BUFFER_BIT),e.useProgram(this._programInfo.program),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,this._textureInfo.texture);const o=this._programInfo.uniformLocations.get("u_image");o&&e.uniform1i(o,0),S(e,this._programInfo,this._getUniformValues()),e.bindBuffer(e.ARRAY_BUFFER,this._quadBuffer);const a=4*Float32Array.BYTES_PER_ELEMENT,n=this._programInfo.attribLocations.get("a_position");n!==void 0&&n!==-1&&(e.enableVertexAttribArray(n),e.vertexAttribPointer(n,2,e.FLOAT,!1,a,0));const r=this._programInfo.attribLocations.get("a_texCoord");r!==void 0&&r!==-1&&(e.enableVertexAttribArray(r),e.vertexAttribPointer(r,2,e.FLOAT,!1,a,2*Float32Array.BYTES_PER_ELEMENT)),w(e)}_cleanup(){this._gl&&(this._textureInfo&&this._gl.deleteTexture(this._textureInfo.texture),this._programInfo&&this._gl.deleteProgram(this._programInfo.program),this._quadBuffer&&this._gl.deleteBuffer(this._quadBuffer),this._gl=null,this._programInfo=null,this._textureInfo=null,this._quadBuffer=null)}};p.styles=_.css`
+`,Y={name:"dot-grid",fragmentShader:B,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"}]},E=new Map;function p(e){E.set(e.name,e)}function U(e){return E.get(e)}function K(){return Array.from(E.keys())}p(F);p(M);p(N);p(Y);var X=Object.defineProperty,l=(e,r,a,t)=>{for(var i=void 0,n=e.length-1,o;n>=0;n--)(o=e[n])&&(i=o(r,a,i)||i);return i&&X(r,a,i),i};const G=2;let C=Promise.resolve();function T(e){const r=C.then(e,e);return C=r,r}const W=new Set(["effect","dotRadius","gridSize","angleC","angleM","angleY","angleK","duotoneColor","angle","threshold","sortDirection","sortSpan","dotOffsetX","dotOffsetY","bgColor"]),R=class R extends v.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.duotoneColor="#0099cc",this.angle=0,this.threshold=.5,this.sortDirection=0,this.sortSpan=64,this.dotOffsetX=.5,this.dotOffsetY=.5,this.bgColor="#ffffff",this._webglAvailable=!0,this._snapshotUrl="",this._image=null,this._observer=null,this._visible=!1,this._needsRender=!1}render(){return this._webglAvailable?v.html`<img src=${this._snapshotUrl||this.src} alt="" />`:v.html`<img src=${this.src} alt="" />`}connectedCallback(){super.connectedCallback(),this._observer=new IntersectionObserver(r=>{var t;const a=this._visible;this._visible=((t=r[0])==null?void 0:t.isIntersecting)??!1,this._visible&&!a&&this._needsRender&&(this._needsRender=!1,T(()=>this._renderEffect()))},{rootMargin:"200px"}),this._observer.observe(this)}updated(r){if(r.has("src")&&this.src){this._loadImage(this.src);return}if(!this._image)return;[...r.keys()].some(t=>W.has(t))&&this._scheduleRender()}disconnectedCallback(){var r;super.disconnectedCallback(),(r=this._observer)==null||r.disconnect(),this._revokeSnapshot()}_loadImage(r){const a=new Image;a.crossOrigin="anonymous",a.onload=()=>{this._image=a,this._scheduleRender()},a.onerror=()=>{console.warn(`[some-shade] Failed to load image: ${r}`)},a.src=r}_scheduleRender(){this._visible?T(()=>this._renderEffect()):this._needsRender=!0}async _renderEffect(){var _;if(!this._image)return;const r=U(this.effect);if(!r){console.warn(`[some-shade] Unknown effect: ${this.effect}`);return}const a=Math.min(window.devicePixelRatio||1,G),t=this._image.naturalWidth,i=this._image.naturalHeight,n=document.createElement("canvas");n.width=t*a,n.height=i*a;const o=k(n);if(!o){this._webglAvailable=!1;return}try{const d=w(o,r.vertexShader,r.fragmentShader);o.useProgram(d.program);const m=L(o,this._image),f=P(o,d);o.viewport(0,0,n.width,n.height),o.clearColor(0,0,0,0),o.clear(o.COLOR_BUFFER_BIT),o.activeTexture(o.TEXTURE0),o.bindTexture(o.TEXTURE_2D,m.texture);const c=d.uniformLocations.get("u_image");c&&o.uniform1i(c,0),D(o,d,this._getUniformValues(m,a)),o.bindBuffer(o.ARRAY_BUFFER,f);const h=4*Float32Array.BYTES_PER_ELEMENT,g=d.attribLocations.get("a_position");g!==void 0&&g!==-1&&(o.enableVertexAttribArray(g),o.vertexAttribPointer(g,2,o.FLOAT,!1,h,0));const b=d.attribLocations.get("a_texCoord");b!==void 0&&b!==-1&&(o.enableVertexAttribArray(b),o.vertexAttribPointer(b,2,o.FLOAT,!1,h,2*Float32Array.BYTES_PER_ELEMENT)),V(o);const x=await new Promise(A=>n.toBlob(A));o.deleteTexture(m.texture),o.deleteProgram(d.program),o.deleteBuffer(f),x&&(this._revokeSnapshot(),this._snapshotUrl=URL.createObjectURL(x))}finally{(_=o.getExtension("WEBGL_lose_context"))==null||_.loseContext()}}_revokeSnapshot(){this._snapshotUrl&&(URL.revokeObjectURL(this._snapshotUrl),this._snapshotUrl="")}_getUniformValues(r,a){const t={};return t.u_resolution=[r.width*a,r.height*a],t.u_dotRadius=this.dotRadius,t.u_gridSize=this.gridSize,this.effect==="halftone-cmyk"?(t.u_angleC=this.angleC,t.u_angleM=this.angleM,t.u_angleY=this.angleY,t.u_angleK=this.angleK):this.effect==="halftone-duotone"?(t.u_duotoneColor=this._parseHexColor(this.duotoneColor),t.u_angle=this.angle):this.effect==="pixel-sort"?(t.u_threshold=this.threshold,t.u_direction=this.sortDirection,t.u_span=this.sortSpan):this.effect==="dot-grid"&&(t.u_dotOffset=[this.dotOffsetX,this.dotOffsetY],t.u_bgColor=this._parseHexColor(this.bgColor)),t}_parseHexColor(r){const a=r.replace("#",""),t=parseInt(a.substring(0,2),16)/255,i=parseInt(a.substring(2,4),16)/255,n=parseInt(a.substring(4,6),16)/255;return[t,i,n]}};R.styles=v.css`
     :host {
       display: block;
       position: relative;
       overflow: hidden;
     }
-    canvas, img {
+    img {
       display: block;
       width: 100%;
       height: auto;
     }
-  `;let i=p;u([s.property()],i.prototype,"src");u([s.property()],i.prototype,"effect");u([s.property({type:Number,attribute:"dot-radius"})],i.prototype,"dotRadius");u([s.property({type:Number,attribute:"grid-size"})],i.prototype,"gridSize");u([s.property({type:Number,attribute:"angle-c"})],i.prototype,"angleC");u([s.property({type:Number,attribute:"angle-m"})],i.prototype,"angleM");u([s.property({type:Number,attribute:"angle-y"})],i.prototype,"angleY");u([s.property({type:Number,attribute:"angle-k"})],i.prototype,"angleK");u([s.property({attribute:"duotone-color"})],i.prototype,"duotoneColor");u([s.property({type:Number})],i.prototype,"angle");u([s.property({type:Number})],i.prototype,"threshold");u([s.property({type:Number,attribute:"sort-direction"})],i.prototype,"sortDirection");u([s.property({type:Number,attribute:"sort-span"})],i.prototype,"sortSpan");u([s.property({type:Number,attribute:"dot-offset-x"})],i.prototype,"dotOffsetX");u([s.property({type:Number,attribute:"dot-offset-y"})],i.prototype,"dotOffsetY");u([s.property({attribute:"bg-color"})],i.prototype,"bgColor");u([s.state()],i.prototype,"_webglAvailable");customElements.get("some-shade-image")||customElements.define("some-shade-image",i);exports.SomeShadeImage=i;exports.get=y;exports.list=V;exports.register=c;
+  `;let s=R;l([u.property()],s.prototype,"src");l([u.property()],s.prototype,"effect");l([u.property({type:Number,attribute:"dot-radius"})],s.prototype,"dotRadius");l([u.property({type:Number,attribute:"grid-size"})],s.prototype,"gridSize");l([u.property({type:Number,attribute:"angle-c"})],s.prototype,"angleC");l([u.property({type:Number,attribute:"angle-m"})],s.prototype,"angleM");l([u.property({type:Number,attribute:"angle-y"})],s.prototype,"angleY");l([u.property({type:Number,attribute:"angle-k"})],s.prototype,"angleK");l([u.property({attribute:"duotone-color"})],s.prototype,"duotoneColor");l([u.property({type:Number})],s.prototype,"angle");l([u.property({type:Number})],s.prototype,"threshold");l([u.property({type:Number,attribute:"sort-direction"})],s.prototype,"sortDirection");l([u.property({type:Number,attribute:"sort-span"})],s.prototype,"sortSpan");l([u.property({type:Number,attribute:"dot-offset-x"})],s.prototype,"dotOffsetX");l([u.property({type:Number,attribute:"dot-offset-y"})],s.prototype,"dotOffsetY");l([u.property({attribute:"bg-color"})],s.prototype,"bgColor");l([u.state()],s.prototype,"_webglAvailable");l([u.state()],s.prototype,"_snapshotUrl");customElements.get("some-shade-image")||customElements.define("some-shade-image",s);exports.SomeShadeImage=s;exports.get=U;exports.list=K;exports.register=p;

package/dist/some-shade.es.js

@@ -1,72 +1,72 @@
-import { LitElement as E, css as C, html as v } from "lit";
-import { property as u, state as R } from "lit/decorators.js";
-function S(t) {
-  return t.getContext("webgl", {
+import { LitElement as k, css as w, html as x } from "lit";
+import { property as l, state as U } from "lit/decorators.js";
+function D(e) {
+  return e.getContext("webgl", {
     alpha: !0,
     premultipliedAlpha: !1,
     preserveDrawingBuffer: !0
   });
 }
-function b(t, e, o) {
-  const a = t.createShader(e);
-  if (!a) throw new Error("Failed to create shader");
-  if (t.shaderSource(a, o), t.compileShader(a), !t.getShaderParameter(a, t.COMPILE_STATUS)) {
-    const n = t.getShaderInfoLog(a);
-    throw t.deleteShader(a), new Error(`Shader compile error: ${n}`);
+function C(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 i = e.getShaderInfoLog(t);
+    throw e.deleteShader(t), new Error(`Shader compile error: ${i}`);
   }
-  return a;
+  return t;
 }
-function T(t, e, o) {
-  const a = b(t, t.VERTEX_SHADER, e), n = b(t, t.FRAGMENT_SHADER, o), r = t.createProgram();
+function L(e, o, a) {
+  const t = C(e, e.VERTEX_SHADER, o), i = C(e, e.FRAGMENT_SHADER, a), r = e.createProgram();
   if (!r) throw new Error("Failed to create program");
-  if (t.attachShader(r, a), t.attachShader(r, n), t.linkProgram(r), !t.getProgramParameter(r, t.LINK_STATUS)) {
-    const l = t.getProgramInfoLog(r);
-    throw t.deleteProgram(r), new Error(`Program link error: ${l}`);
+  if (e.attachShader(r, t), e.attachShader(r, i), e.linkProgram(r), !e.getProgramParameter(r, e.LINK_STATUS)) {
+    const f = e.getProgramInfoLog(r);
+    throw e.deleteProgram(r), new Error(`Program link error: ${f}`);
   }
-  t.deleteShader(a), t.deleteShader(n);
-  const f = /* @__PURE__ */ new Map(), x = t.getProgramParameter(r, t.ACTIVE_ATTRIBUTES);
-  for (let l = 0; l < x; l++) {
-    const d = t.getActiveAttrib(r, l);
-    d && f.set(d.name, t.getAttribLocation(r, d.name));
+  e.deleteShader(t), e.deleteShader(i);
+  const n = /* @__PURE__ */ new Map(), _ = e.getProgramParameter(r, e.ACTIVE_ATTRIBUTES);
+  for (let f = 0; f < _; f++) {
+    const c = e.getActiveAttrib(r, f);
+    c && n.set(c.name, e.getAttribLocation(r, c.name));
   }
-  const g = /* @__PURE__ */ new Map(), y = t.getProgramParameter(r, t.ACTIVE_UNIFORMS);
-  for (let l = 0; l < y; l++) {
-    const d = t.getActiveUniform(r, l);
-    if (d) {
-      const p = t.getUniformLocation(r, d.name);
-      p && g.set(d.name, p);
+  const d = /* @__PURE__ */ new Map(), m = e.getProgramParameter(r, e.ACTIVE_UNIFORMS);
+  for (let f = 0; f < m; f++) {
+    const c = e.getActiveUniform(r, f);
+    if (c) {
+      const h = e.getUniformLocation(r, c.name);
+      h && d.set(c.name, h);
     }
   }
-  return { program: r, attribLocations: f, uniformLocations: g };
+  return { program: r, attribLocations: n, uniformLocations: d };
 }
-function A(t, e, o) {
-  for (const [a, n] of Object.entries(o)) {
-    const r = e.uniformLocations.get(a);
+function P(e, o, a) {
+  for (const [t, i] of Object.entries(a)) {
+    const r = o.uniformLocations.get(t);
     if (r) {
-      if (typeof n == "number")
-        t.uniform1f(r, n);
-      else if (Array.isArray(n))
-        switch (n.length) {
+      if (typeof i == "number")
+        e.uniform1f(r, i);
+      else if (Array.isArray(i))
+        switch (i.length) {
           case 2:
-            t.uniform2fv(r, n);
+            e.uniform2fv(r, i);
             break;
           case 3:
-            t.uniform3fv(r, n);
+            e.uniform3fv(r, i);
             break;
           case 4:
-            t.uniform4fv(r, n);
+            e.uniform4fv(r, i);
             break;
         }
     }
   }
 }
-function w(t, e) {
-  const o = t.createTexture();
-  if (!o) throw new Error("Failed to create texture");
-  return t.bindTexture(t.TEXTURE_2D, o), t.texImage2D(t.TEXTURE_2D, 0, t.RGBA, t.RGBA, t.UNSIGNED_BYTE, e), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_WRAP_S, t.CLAMP_TO_EDGE), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_WRAP_T, t.CLAMP_TO_EDGE), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_MIN_FILTER, t.LINEAR), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_MAG_FILTER, t.LINEAR), { texture: o, width: e.naturalWidth, height: e.naturalHeight };
+function V(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 I(t, e) {
-  const o = new Float32Array([
+function O(e, o) {
+  const a = new Float32Array([
     // pos.x  pos.y  tex.s  tex.t
     -1,
     -1,
@@ -84,18 +84,18 @@ function I(t, e) {
     1,
     1,
     0
-  ]), a = t.createBuffer();
-  if (!a) throw new Error("Failed to create buffer");
-  t.bindBuffer(t.ARRAY_BUFFER, a), t.bufferData(t.ARRAY_BUFFER, o, t.STATIC_DRAW);
-  const n = 4 * Float32Array.BYTES_PER_ELEMENT, r = e.attribLocations.get("a_position");
-  r !== void 0 && r !== -1 && (t.enableVertexAttribArray(r), t.vertexAttribPointer(r, 2, t.FLOAT, !1, n, 0));
-  const f = e.attribLocations.get("a_texCoord");
-  return f !== void 0 && f !== -1 && (t.enableVertexAttribArray(f), t.vertexAttribPointer(f, 2, t.FLOAT, !1, n, 2 * Float32Array.BYTES_PER_ELEMENT)), a;
+  ]), 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 i = 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, i, 0));
+  const n = o.attribLocations.get("a_texCoord");
+  return n !== void 0 && n !== -1 && (e.enableVertexAttribArray(n), e.vertexAttribPointer(n, 2, e.FLOAT, !1, i, 2 * Float32Array.BYTES_PER_ELEMENT)), t;
 }
-function U(t) {
-  t.drawArrays(t.TRIANGLE_STRIP, 0, 4);
+function F(e) {
+  e.drawArrays(e.TRIANGLE_STRIP, 0, 4);
 }
-const k = `precision mediump float;
+const z = `precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -151,7 +151,7 @@ void main() {
 
   gl_FragColor = vec4(outR, outG, outB, color.a);
 }
-`, c = `attribute vec2 a_position;
+`, b = `attribute vec2 a_position;
 attribute vec2 a_texCoord;
 varying vec2 v_texCoord;
 
@@ -159,10 +159,10 @@ void main() {
   gl_Position = vec4(a_position, 0.0, 1.0);
   v_texCoord = a_texCoord;
 }
-`, D = {
+`, M = {
   name: "halftone-cmyk",
-  fragmentShader: k,
-  vertexShader: c,
+  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" },
@@ -171,7 +171,7 @@ void main() {
     { name: "u_angleY", type: "float", default: 0, attribute: "angle-y" },
     { name: "u_angleK", type: "float", default: 45, attribute: "angle-k" }
   ]
-}, P = `precision mediump float;
+}, N = `precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -206,17 +206,17 @@ void main() {
 
   gl_FragColor = vec4(result, color.a);
 }
-`, L = {
+`, B = {
   name: "halftone-duotone",
-  fragmentShader: P,
-  vertexShader: c,
+  fragmentShader: N,
+  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, 0.6, 0.8], attribute: "duotone-color" },
     { name: "u_angle", type: "float", default: 0, attribute: "angle" }
   ]
-}, z = `precision mediump float;
+}, I = `precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -285,16 +285,16 @@ void main() {
   vec2 sortedUV = spanStartUV + step * float(rank);
   gl_FragColor = texture2D(u_image, sortedUV);
 }
-`, F = {
+`, Y = {
   name: "pixel-sort",
-  fragmentShader: z,
-  vertexShader: c,
+  fragmentShader: I,
+  vertexShader: b,
   uniforms: [
     { name: "u_threshold", type: "float", default: 0.5, attribute: "threshold" },
     { name: "u_direction", type: "float", default: 0, attribute: "sort-direction" },
     { name: "u_span", type: "float", default: 64, attribute: "sort-span" }
   ]
-}, V = `precision mediump float;
+}, K = `precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -339,190 +339,247 @@ void main() {
 
   gl_FragColor = vec4(result, 1.0);
 }
-`, O = {
+`, X = {
   name: "dot-grid",
-  fragmentShader: V,
-  vertexShader: c,
+  fragmentShader: K,
+  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: [0.5, 0.5], attribute: "dot-offset" },
     { name: "u_bgColor", type: "vec3", default: [1, 1, 1], attribute: "bg-color" }
   ]
-}, h = /* @__PURE__ */ new Map();
-function _(t) {
-  h.set(t.name, t);
+}, y = /* @__PURE__ */ new Map();
+function v(e) {
+  y.set(e.name, e);
 }
-function B(t) {
-  return h.get(t);
+function G(e) {
+  return y.get(e);
 }
-function Y() {
-  return Array.from(h.keys());
+function Q() {
+  return Array.from(y.keys());
 }
-_(D);
-_(L);
-_(F);
-_(O);
-var N = Object.defineProperty, s = (t, e, o, a) => {
-  for (var n = void 0, r = t.length - 1, f; r >= 0; r--)
-    (f = t[r]) && (n = f(e, o, n) || n);
-  return n && N(e, o, n), n;
+v(M);
+v(B);
+v(Y);
+v(X);
+var W = Object.defineProperty, u = (e, o, a, t) => {
+  for (var i = void 0, r = e.length - 1, n; r >= 0; r--)
+    (n = e[r]) && (i = n(o, a, i) || i);
+  return i && W(o, a, i), i;
 };
-const m = class m extends E {
+const $ = 2;
+let S = Promise.resolve();
+function T(e) {
+  const o = S.then(e, e);
+  return S = o, o;
+}
+const H = /* @__PURE__ */ new Set([
+  "effect",
+  "dotRadius",
+  "gridSize",
+  "angleC",
+  "angleM",
+  "angleY",
+  "angleK",
+  "duotoneColor",
+  "angle",
+  "threshold",
+  "sortDirection",
+  "sortSpan",
+  "dotOffsetX",
+  "dotOffsetY",
+  "bgColor"
+]), E = class E extends k {
   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.duotoneColor = "#0099cc", this.angle = 0, this.threshold = 0.5, this.sortDirection = 0, this.sortSpan = 64, this.dotOffsetX = 0.5, this.dotOffsetY = 0.5, this.bgColor = "#ffffff", this._webglAvailable = !0, this._canvas = null, this._gl = null, this._programInfo = null, this._textureInfo = null, this._quadBuffer = null, this._currentEffect = null, this._image = null, this._resizeObserver = null;
+    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.duotoneColor = "#0099cc", this.angle = 0, this.threshold = 0.5, this.sortDirection = 0, this.sortSpan = 64, this.dotOffsetX = 0.5, this.dotOffsetY = 0.5, this.bgColor = "#ffffff", this._webglAvailable = !0, this._snapshotUrl = "", this._image = null, this._observer = null, this._visible = !1, this._needsRender = !1;
   }
   render() {
-    return this._webglAvailable ? v`<canvas></canvas>` : v`<img .src=${this.src} alt="" />`;
+    return this._webglAvailable ? x`<img src=${this._snapshotUrl || this.src} alt="" />` : x`<img src=${this.src} alt="" />`;
   }
-  firstUpdated() {
-    if (this._webglAvailable && (this._canvas = this.shadowRoot.querySelector("canvas"), !!this._canvas)) {
-      if (this._gl = S(this._canvas), !this._gl) {
-        this._webglAvailable = !1, this.classList.add("webgl-unavailable");
-        return;
-      }
-      this._resizeObserver = new ResizeObserver(() => this._handleResize()), this._resizeObserver.observe(this), this.src && this._loadImage(this.src);
-    }
+  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()));
+      },
+      // Start rendering slightly before the element scrolls into view.
+      { rootMargin: "200px" }
+    ), this._observer.observe(this);
   }
-  updated(e) {
-    if (this._gl) {
-      if (e.has("src") && this.src) {
-        this._loadImage(this.src);
-        return;
-      }
-      if (e.has("effect")) {
-        this._setupProgram(), this._renderFrame();
-        return;
-      }
-      this._renderFrame();
+  updated(o) {
+    if (o.has("src") && this.src) {
+      this._loadImage(this.src);
+      return;
     }
+    if (!this._image) return;
+    [...o.keys()].some(
+      (t) => H.has(t)
+    ) && this._scheduleRender();
   }
   disconnectedCallback() {
-    var e;
-    super.disconnectedCallback(), (e = this._resizeObserver) == null || e.disconnect(), this._cleanup();
-  }
-  _loadImage(e) {
-    const o = new Image();
-    o.crossOrigin = "anonymous", o.onload = () => {
-      this._image = o, this._uploadTexture(), this._sizeCanvas(), this._setupProgram(), this._renderFrame();
-    }, o.onerror = () => {
-      console.warn(`[some-shade] Failed to load image: ${e}`);
-    }, o.src = e;
+    var o;
+    super.disconnectedCallback(), (o = this._observer) == null || o.disconnect(), this._revokeSnapshot();
   }
-  _uploadTexture() {
-    !this._gl || !this._image || (this._textureInfo && this._gl.deleteTexture(this._textureInfo.texture), this._textureInfo = w(this._gl, this._image));
+  // ---------------------------------------------------------------------------
+  // Image loading
+  // ---------------------------------------------------------------------------
+  _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;
   }
-  _sizeCanvas() {
-    if (!this._canvas || !this._textureInfo) return;
-    const e = window.devicePixelRatio || 1, o = this._textureInfo.width, a = this._textureInfo.height;
-    this._canvas.width = o * e, this._canvas.height = a * e, this._canvas.style.aspectRatio = `${o} / ${a}`;
+  // ---------------------------------------------------------------------------
+  // Render scheduling
+  // ---------------------------------------------------------------------------
+  _scheduleRender() {
+    this._visible ? T(() => this._renderEffect()) : this._needsRender = !0;
   }
-  _handleResize() {
-    this._renderFrame();
-  }
-  _setupProgram() {
-    if (!this._gl) return;
-    const e = B(this.effect);
-    if (!e) {
+  // ---------------------------------------------------------------------------
+  // WebGL render → snapshot → tear-down
+  // ---------------------------------------------------------------------------
+  async _renderEffect() {
+    var _;
+    if (!this._image) return;
+    const o = G(this.effect);
+    if (!o) {
       console.warn(`[some-shade] Unknown effect: ${this.effect}`);
       return;
     }
-    this._programInfo && this._gl.deleteProgram(this._programInfo.program), this._currentEffect = e, this._programInfo = T(this._gl, e.vertexShader, e.fragmentShader), this._quadBuffer && this._gl.deleteBuffer(this._quadBuffer), this._gl.useProgram(this._programInfo.program), this._quadBuffer = I(this._gl, this._programInfo);
-  }
-  _getUniformValues() {
-    const e = {};
-    return this._textureInfo && (e.u_resolution = [
-      this._textureInfo.width * (window.devicePixelRatio || 1),
-      this._textureInfo.height * (window.devicePixelRatio || 1)
-    ], e.u_dotRadius = this.dotRadius, e.u_gridSize = this.gridSize, this.effect === "halftone-cmyk" ? (e.u_angleC = this.angleC, e.u_angleM = this.angleM, e.u_angleY = this.angleY, e.u_angleK = this.angleK) : this.effect === "halftone-duotone" ? (e.u_duotoneColor = this._parseHexColor(this.duotoneColor), e.u_angle = this.angle) : this.effect === "pixel-sort" ? (e.u_threshold = this.threshold, e.u_direction = this.sortDirection, e.u_span = this.sortSpan) : this.effect === "dot-grid" && (e.u_dotOffset = [this.dotOffsetX, this.dotOffsetY], e.u_bgColor = this._parseHexColor(this.bgColor))), e;
+    const a = Math.min(window.devicePixelRatio || 1, $), t = this._image.naturalWidth, i = this._image.naturalHeight, r = document.createElement("canvas");
+    r.width = t * a, r.height = i * a;
+    const n = D(r);
+    if (!n) {
+      this._webglAvailable = !1;
+      return;
+    }
+    try {
+      const d = L(
+        n,
+        o.vertexShader,
+        o.fragmentShader
+      );
+      n.useProgram(d.program);
+      const m = V(n, this._image), f = O(n, d);
+      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 = d.uniformLocations.get("u_image");
+      c && n.uniform1i(c, 0), P(
+        n,
+        d,
+        this._getUniformValues(m, a)
+      ), n.bindBuffer(n.ARRAY_BUFFER, f);
+      const h = 4 * Float32Array.BYTES_PER_ELEMENT, p = d.attribLocations.get("a_position");
+      p !== void 0 && p !== -1 && (n.enableVertexAttribArray(p), n.vertexAttribPointer(p, 2, n.FLOAT, !1, h, 0));
+      const g = d.attribLocations.get("a_texCoord");
+      g !== void 0 && g !== -1 && (n.enableVertexAttribArray(g), n.vertexAttribPointer(
+        g,
+        2,
+        n.FLOAT,
+        !1,
+        h,
+        2 * Float32Array.BYTES_PER_ELEMENT
+      )), F(n);
+      const R = await new Promise(
+        (A) => r.toBlob(A)
+      );
+      n.deleteTexture(m.texture), n.deleteProgram(d.program), n.deleteBuffer(f), R && (this._revokeSnapshot(), this._snapshotUrl = URL.createObjectURL(R));
+    } finally {
+      (_ = n.getExtension("WEBGL_lose_context")) == null || _.loseContext();
+    }
   }
-  _parseHexColor(e) {
-    const o = e.replace("#", ""), a = parseInt(o.substring(0, 2), 16) / 255, n = parseInt(o.substring(2, 4), 16) / 255, r = parseInt(o.substring(4, 6), 16) / 255;
-    return [a, n, r];
+  // ---------------------------------------------------------------------------
+  // Helpers
+  // ---------------------------------------------------------------------------
+  _revokeSnapshot() {
+    this._snapshotUrl && (URL.revokeObjectURL(this._snapshotUrl), this._snapshotUrl = "");
   }
-  _renderFrame() {
-    const e = this._gl;
-    if (!e || !this._programInfo || !this._textureInfo || !this._canvas) return;
-    e.viewport(0, 0, this._canvas.width, this._canvas.height), e.clearColor(0, 0, 0, 0), e.clear(e.COLOR_BUFFER_BIT), e.useProgram(this._programInfo.program), e.activeTexture(e.TEXTURE0), e.bindTexture(e.TEXTURE_2D, this._textureInfo.texture);
-    const o = this._programInfo.uniformLocations.get("u_image");
-    o && e.uniform1i(o, 0), A(e, this._programInfo, this._getUniformValues()), e.bindBuffer(e.ARRAY_BUFFER, this._quadBuffer);
-    const a = 4 * Float32Array.BYTES_PER_ELEMENT, n = this._programInfo.attribLocations.get("a_position");
-    n !== void 0 && n !== -1 && (e.enableVertexAttribArray(n), e.vertexAttribPointer(n, 2, e.FLOAT, !1, a, 0));
-    const r = this._programInfo.attribLocations.get("a_texCoord");
-    r !== void 0 && r !== -1 && (e.enableVertexAttribArray(r), e.vertexAttribPointer(r, 2, e.FLOAT, !1, a, 2 * Float32Array.BYTES_PER_ELEMENT)), U(e);
+  _getUniformValues(o, a) {
+    const t = {};
+    return t.u_resolution = [
+      o.width * a,
+      o.height * a
+    ], t.u_dotRadius = this.dotRadius, t.u_gridSize = this.gridSize, this.effect === "halftone-cmyk" ? (t.u_angleC = this.angleC, t.u_angleM = this.angleM, t.u_angleY = this.angleY, t.u_angleK = this.angleK) : this.effect === "halftone-duotone" ? (t.u_duotoneColor = this._parseHexColor(this.duotoneColor), t.u_angle = this.angle) : this.effect === "pixel-sort" ? (t.u_threshold = this.threshold, t.u_direction = this.sortDirection, t.u_span = this.sortSpan) : this.effect === "dot-grid" && (t.u_dotOffset = [this.dotOffsetX, this.dotOffsetY], t.u_bgColor = this._parseHexColor(this.bgColor)), t;
   }
-  _cleanup() {
-    this._gl && (this._textureInfo && this._gl.deleteTexture(this._textureInfo.texture), this._programInfo && this._gl.deleteProgram(this._programInfo.program), this._quadBuffer && this._gl.deleteBuffer(this._quadBuffer), this._gl = null, this._programInfo = null, this._textureInfo = null, this._quadBuffer = null);
+  _parseHexColor(o) {
+    const a = o.replace("#", ""), t = parseInt(a.substring(0, 2), 16) / 255, i = parseInt(a.substring(2, 4), 16) / 255, r = parseInt(a.substring(4, 6), 16) / 255;
+    return [t, i, r];
   }
 };
-m.styles = C`
+E.styles = w`
     :host {
       display: block;
       position: relative;
       overflow: hidden;
     }
-    canvas, img {
+    img {
       display: block;
       width: 100%;
       height: auto;
     }
   `;
-let i = m;
-s([
-  u()
-], i.prototype, "src");
-s([
-  u()
-], i.prototype, "effect");
-s([
-  u({ type: Number, attribute: "dot-radius" })
-], i.prototype, "dotRadius");
-s([
-  u({ type: Number, attribute: "grid-size" })
-], i.prototype, "gridSize");
-s([
-  u({ type: Number, attribute: "angle-c" })
-], i.prototype, "angleC");
-s([
-  u({ type: Number, attribute: "angle-m" })
-], i.prototype, "angleM");
-s([
-  u({ type: Number, attribute: "angle-y" })
-], i.prototype, "angleY");
-s([
-  u({ type: Number, attribute: "angle-k" })
-], i.prototype, "angleK");
-s([
-  u({ attribute: "duotone-color" })
-], i.prototype, "duotoneColor");
-s([
-  u({ type: Number })
-], i.prototype, "angle");
-s([
-  u({ type: Number })
-], i.prototype, "threshold");
-s([
-  u({ type: Number, attribute: "sort-direction" })
-], i.prototype, "sortDirection");
-s([
-  u({ type: Number, attribute: "sort-span" })
-], i.prototype, "sortSpan");
-s([
-  u({ type: Number, attribute: "dot-offset-x" })
-], i.prototype, "dotOffsetX");
-s([
-  u({ type: Number, attribute: "dot-offset-y" })
-], i.prototype, "dotOffsetY");
-s([
-  u({ attribute: "bg-color" })
-], i.prototype, "bgColor");
-s([
-  R()
-], i.prototype, "_webglAvailable");
-customElements.get("some-shade-image") || customElements.define("some-shade-image", i);
+let s = E;
+u([
+  l()
+], s.prototype, "src");
+u([
+  l()
+], s.prototype, "effect");
+u([
+  l({ type: Number, attribute: "dot-radius" })
+], s.prototype, "dotRadius");
+u([
+  l({ type: Number, attribute: "grid-size" })
+], s.prototype, "gridSize");
+u([
+  l({ type: Number, attribute: "angle-c" })
+], s.prototype, "angleC");
+u([
+  l({ type: Number, attribute: "angle-m" })
+], s.prototype, "angleM");
+u([
+  l({ type: Number, attribute: "angle-y" })
+], s.prototype, "angleY");
+u([
+  l({ type: Number, attribute: "angle-k" })
+], s.prototype, "angleK");
+u([
+  l({ attribute: "duotone-color" })
+], s.prototype, "duotoneColor");
+u([
+  l({ type: Number })
+], s.prototype, "angle");
+u([
+  l({ type: Number })
+], s.prototype, "threshold");
+u([
+  l({ type: Number, attribute: "sort-direction" })
+], s.prototype, "sortDirection");
+u([
+  l({ type: Number, attribute: "sort-span" })
+], s.prototype, "sortSpan");
+u([
+  l({ type: Number, attribute: "dot-offset-x" })
+], s.prototype, "dotOffsetX");
+u([
+  l({ type: Number, attribute: "dot-offset-y" })
+], s.prototype, "dotOffsetY");
+u([
+  l({ attribute: "bg-color" })
+], s.prototype, "bgColor");
+u([
+  U()
+], s.prototype, "_webglAvailable");
+u([
+  U()
+], s.prototype, "_snapshotUrl");
+customElements.get("some-shade-image") || customElements.define("some-shade-image", s);
 export {
-  i as SomeShadeImage,
-  B as get,
-  Y as list,
-  _ as register
+  s as SomeShadeImage,
+  G as get,
+  Q as list,
+  v as register
 };

package/dist/some-shade.umd.js

@@ -1,4 +1,4 @@
-(function(f,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("lit"),require("lit/decorators.js")):typeof define=="function"&&define.amd?define(["exports","lit","lit/decorators.js"],c):(f=typeof globalThis<"u"?globalThis:f||self,c(f.SomeShade={},f.Lit,f.LitDecorators))})(this,(function(f,c,s){"use strict";function E(t){return t.getContext("webgl",{alpha:!0,premultipliedAlpha:!1,preserveDrawingBuffer:!0})}function v(t,e,n){const i=t.createShader(e);if(!i)throw new Error("Failed to create shader");if(t.shaderSource(i,n),t.compileShader(i),!t.getShaderParameter(i,t.COMPILE_STATUS)){const o=t.getShaderInfoLog(i);throw t.deleteShader(i),new Error(`Shader compile error: ${o}`)}return i}function S(t,e,n){const i=v(t,t.VERTEX_SHADER,e),o=v(t,t.FRAGMENT_SHADER,n),r=t.createProgram();if(!r)throw new Error("Failed to create program");if(t.attachShader(r,i),t.attachShader(r,o),t.linkProgram(r),!t.getProgramParameter(r,t.LINK_STATUS)){const d=t.getProgramInfoLog(r);throw t.deleteProgram(r),new Error(`Program link error: ${d}`)}t.deleteShader(i),t.deleteShader(o);const l=new Map,z=t.getProgramParameter(r,t.ACTIVE_ATTRIBUTES);for(let d=0;d<z;d++){const h=t.getActiveAttrib(r,d);h&&l.set(h.name,t.getAttribLocation(r,h.name))}const y=new Map,F=t.getProgramParameter(r,t.ACTIVE_UNIFORMS);for(let d=0;d<F;d++){const h=t.getActiveUniform(r,d);if(h){const x=t.getUniformLocation(r,h.name);x&&y.set(h.name,x)}}return{program:r,attribLocations:l,uniformLocations:y}}function C(t,e,n){for(const[i,o]of Object.entries(n)){const r=e.uniformLocations.get(i);if(r){if(typeof o=="number")t.uniform1f(r,o);else if(Array.isArray(o))switch(o.length){case 2:t.uniform2fv(r,o);break;case 3:t.uniform3fv(r,o);break;case 4:t.uniform4fv(r,o);break}}}}function R(t,e){const n=t.createTexture();if(!n)throw new Error("Failed to create texture");return t.bindTexture(t.TEXTURE_2D,n),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,e),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),{texture:n,width:e.naturalWidth,height:e.naturalHeight}}function T(t,e){const n=new Float32Array([-1,-1,0,1,1,-1,1,1,-1,1,0,0,1,1,1,0]),i=t.createBuffer();if(!i)throw new Error("Failed to create buffer");t.bindBuffer(t.ARRAY_BUFFER,i),t.bufferData(t.ARRAY_BUFFER,n,t.STATIC_DRAW);const o=4*Float32Array.BYTES_PER_ELEMENT,r=e.attribLocations.get("a_position");r!==void 0&&r!==-1&&(t.enableVertexAttribArray(r),t.vertexAttribPointer(r,2,t.FLOAT,!1,o,0));const l=e.attribLocations.get("a_texCoord");return l!==void 0&&l!==-1&&(t.enableVertexAttribArray(l),t.vertexAttribPointer(l,2,t.FLOAT,!1,o,2*Float32Array.BYTES_PER_ELEMENT)),i}function A(t){t.drawArrays(t.TRIANGLE_STRIP,0,4)}const w=`precision mediump float;
+(function(d,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):(d=typeof globalThis<"u"?globalThis:d||self,h(d.SomeShade={},d.Lit,d.LitDecorators))})(this,(function(d,h,u){"use strict";function k(e){return e.getContext("webgl",{alpha:!0,premultipliedAlpha:!1,preserveDrawingBuffer:!0})}function x(e,n,a){const t=e.createShader(n);if(!t)throw new Error("Failed to create shader");if(e.shaderSource(t,a),e.compileShader(t),!e.getShaderParameter(t,e.COMPILE_STATUS)){const i=e.getShaderInfoLog(t);throw e.deleteShader(t),new Error(`Shader compile error: ${i}`)}return t}function w(e,n,a){const t=x(e,e.VERTEX_SHADER,n),i=x(e,e.FRAGMENT_SHADER,a),o=e.createProgram();if(!o)throw new Error("Failed to create program");if(e.attachShader(o,t),e.attachShader(o,i),e.linkProgram(o),!e.getProgramParameter(o,e.LINK_STATUS)){const f=e.getProgramInfoLog(o);throw e.deleteProgram(o),new Error(`Program link error: ${f}`)}e.deleteShader(t),e.deleteShader(i);const r=new Map,v=e.getProgramParameter(o,e.ACTIVE_ATTRIBUTES);for(let f=0;f<v;f++){const m=e.getActiveAttrib(o,f);m&&r.set(m.name,e.getAttribLocation(o,m.name))}const c=new Map,_=e.getProgramParameter(o,e.ACTIVE_UNIFORMS);for(let f=0;f<_;f++){const m=e.getActiveUniform(o,f);if(m){const g=e.getUniformLocation(o,m.name);g&&c.set(m.name,g)}}return{program:o,attribLocations:r,uniformLocations:c}}function D(e,n,a){for(const[t,i]of Object.entries(a)){const o=n.uniformLocations.get(t);if(o){if(typeof i=="number")e.uniform1f(o,i);else if(Array.isArray(i))switch(i.length){case 2:e.uniform2fv(o,i);break;case 3:e.uniform3fv(o,i);break;case 4:e.uniform4fv(o,i);break}}}}function L(e,n){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,n),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:n.naturalWidth,height:n.naturalHeight}}function P(e,n){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 i=4*Float32Array.BYTES_PER_ELEMENT,o=n.attribLocations.get("a_position");o!==void 0&&o!==-1&&(e.enableVertexAttribArray(o),e.vertexAttribPointer(o,2,e.FLOAT,!1,i,0));const r=n.attribLocations.get("a_texCoord");return r!==void 0&&r!==-1&&(e.enableVertexAttribArray(r),e.vertexAttribPointer(r,2,e.FLOAT,!1,i,2*Float32Array.BYTES_PER_ELEMENT)),t}function V(e){e.drawArrays(e.TRIANGLE_STRIP,0,4)}const O=`precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -54,7 +54,7 @@ void main() {
 
   gl_FragColor = vec4(outR, outG, outB, color.a);
 }
-`,m=`attribute vec2 a_position;
+`,b=`attribute vec2 a_position;
 attribute vec2 a_texCoord;
 varying vec2 v_texCoord;
 
@@ -62,7 +62,7 @@ void main() {
   gl_Position = vec4(a_position, 0.0, 1.0);
   v_texCoord = a_texCoord;
 }
-`,I={name:"halftone-cmyk",fragmentShader:w,vertexShader:m,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"}]},U={name:"halftone-duotone",fragmentShader:`precision mediump float;
+`,F={name:"halftone-cmyk",fragmentShader:O,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"}]},z={name:"halftone-duotone",fragmentShader:`precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -97,7 +97,7 @@ void main() {
 
   gl_FragColor = vec4(result, color.a);
 }
-`,vertexShader:m,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"}]},k={name:"pixel-sort",fragmentShader:`precision mediump float;
+`,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"}]},M={name:"pixel-sort",fragmentShader:`precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -166,7 +166,7 @@ void main() {
   vec2 sortedUV = spanStartUV + step * float(rank);
   gl_FragColor = texture2D(u_image, sortedUV);
 }
-`,vertexShader:m,uniforms:[{name:"u_threshold",type:"float",default:.5,attribute:"threshold"},{name:"u_direction",type:"float",default:0,attribute:"sort-direction"},{name:"u_span",type:"float",default:64,attribute:"sort-span"}]},D={name:"dot-grid",fragmentShader:`precision mediump float;
+`,vertexShader:b,uniforms:[{name:"u_threshold",type:"float",default:.5,attribute:"threshold"},{name:"u_direction",type:"float",default:0,attribute:"sort-direction"},{name:"u_span",type:"float",default:64,attribute:"sort-span"}]},I={name:"dot-grid",fragmentShader:`precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -211,15 +211,15 @@ void main() {
 
   gl_FragColor = vec4(result, 1.0);
 }
-`,vertexShader:m,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"}]},p=new Map;function _(t){p.set(t.name,t)}function b(t){return p.get(t)}function P(){return Array.from(p.keys())}_(I),_(U),_(k),_(D);var L=Object.defineProperty,u=(t,e,n,i)=>{for(var o=void 0,r=t.length-1,l;r>=0;r--)(l=t[r])&&(o=l(e,n,o)||o);return o&&L(e,n,o),o};const g=class g extends c.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.duotoneColor="#0099cc",this.angle=0,this.threshold=.5,this.sortDirection=0,this.sortSpan=64,this.dotOffsetX=.5,this.dotOffsetY=.5,this.bgColor="#ffffff",this._webglAvailable=!0,this._canvas=null,this._gl=null,this._programInfo=null,this._textureInfo=null,this._quadBuffer=null,this._currentEffect=null,this._image=null,this._resizeObserver=null}render(){return this._webglAvailable?c.html`<canvas></canvas>`:c.html`<img .src=${this.src} alt="" />`}firstUpdated(){if(this._webglAvailable&&(this._canvas=this.shadowRoot.querySelector("canvas"),!!this._canvas)){if(this._gl=E(this._canvas),!this._gl){this._webglAvailable=!1,this.classList.add("webgl-unavailable");return}this._resizeObserver=new ResizeObserver(()=>this._handleResize()),this._resizeObserver.observe(this),this.src&&this._loadImage(this.src)}}updated(e){if(this._gl){if(e.has("src")&&this.src){this._loadImage(this.src);return}if(e.has("effect")){this._setupProgram(),this._renderFrame();return}this._renderFrame()}}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this._resizeObserver)==null||e.disconnect(),this._cleanup()}_loadImage(e){const n=new Image;n.crossOrigin="anonymous",n.onload=()=>{this._image=n,this._uploadTexture(),this._sizeCanvas(),this._setupProgram(),this._renderFrame()},n.onerror=()=>{console.warn(`[some-shade] Failed to load image: ${e}`)},n.src=e}_uploadTexture(){!this._gl||!this._image||(this._textureInfo&&this._gl.deleteTexture(this._textureInfo.texture),this._textureInfo=R(this._gl,this._image))}_sizeCanvas(){if(!this._canvas||!this._textureInfo)return;const e=window.devicePixelRatio||1,n=this._textureInfo.width,i=this._textureInfo.height;this._canvas.width=n*e,this._canvas.height=i*e,this._canvas.style.aspectRatio=`${n} / ${i}`}_handleResize(){this._renderFrame()}_setupProgram(){if(!this._gl)return;const e=b(this.effect);if(!e){console.warn(`[some-shade] Unknown effect: ${this.effect}`);return}this._programInfo&&this._gl.deleteProgram(this._programInfo.program),this._currentEffect=e,this._programInfo=S(this._gl,e.vertexShader,e.fragmentShader),this._quadBuffer&&this._gl.deleteBuffer(this._quadBuffer),this._gl.useProgram(this._programInfo.program),this._quadBuffer=T(this._gl,this._programInfo)}_getUniformValues(){const e={};return this._textureInfo&&(e.u_resolution=[this._textureInfo.width*(window.devicePixelRatio||1),this._textureInfo.height*(window.devicePixelRatio||1)],e.u_dotRadius=this.dotRadius,e.u_gridSize=this.gridSize,this.effect==="halftone-cmyk"?(e.u_angleC=this.angleC,e.u_angleM=this.angleM,e.u_angleY=this.angleY,e.u_angleK=this.angleK):this.effect==="halftone-duotone"?(e.u_duotoneColor=this._parseHexColor(this.duotoneColor),e.u_angle=this.angle):this.effect==="pixel-sort"?(e.u_threshold=this.threshold,e.u_direction=this.sortDirection,e.u_span=this.sortSpan):this.effect==="dot-grid"&&(e.u_dotOffset=[this.dotOffsetX,this.dotOffsetY],e.u_bgColor=this._parseHexColor(this.bgColor))),e}_parseHexColor(e){const n=e.replace("#",""),i=parseInt(n.substring(0,2),16)/255,o=parseInt(n.substring(2,4),16)/255,r=parseInt(n.substring(4,6),16)/255;return[i,o,r]}_renderFrame(){const e=this._gl;if(!e||!this._programInfo||!this._textureInfo||!this._canvas)return;e.viewport(0,0,this._canvas.width,this._canvas.height),e.clearColor(0,0,0,0),e.clear(e.COLOR_BUFFER_BIT),e.useProgram(this._programInfo.program),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,this._textureInfo.texture);const n=this._programInfo.uniformLocations.get("u_image");n&&e.uniform1i(n,0),C(e,this._programInfo,this._getUniformValues()),e.bindBuffer(e.ARRAY_BUFFER,this._quadBuffer);const i=4*Float32Array.BYTES_PER_ELEMENT,o=this._programInfo.attribLocations.get("a_position");o!==void 0&&o!==-1&&(e.enableVertexAttribArray(o),e.vertexAttribPointer(o,2,e.FLOAT,!1,i,0));const r=this._programInfo.attribLocations.get("a_texCoord");r!==void 0&&r!==-1&&(e.enableVertexAttribArray(r),e.vertexAttribPointer(r,2,e.FLOAT,!1,i,2*Float32Array.BYTES_PER_ELEMENT)),A(e)}_cleanup(){this._gl&&(this._textureInfo&&this._gl.deleteTexture(this._textureInfo.texture),this._programInfo&&this._gl.deleteProgram(this._programInfo.program),this._quadBuffer&&this._gl.deleteBuffer(this._quadBuffer),this._gl=null,this._programInfo=null,this._textureInfo=null,this._quadBuffer=null)}};g.styles=c.css`
+`,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"}]},R=new Map;function p(e){R.set(e.name,e)}function C(e){return R.get(e)}function N(){return Array.from(R.keys())}p(F),p(z),p(M),p(I);var B=Object.defineProperty,l=(e,n,a,t)=>{for(var i=void 0,o=e.length-1,r;o>=0;o--)(r=e[o])&&(i=r(n,a,i)||i);return i&&B(n,a,i),i};const Y=2;let T=Promise.resolve();function U(e){const n=T.then(e,e);return T=n,n}const K=new Set(["effect","dotRadius","gridSize","angleC","angleM","angleY","angleK","duotoneColor","angle","threshold","sortDirection","sortSpan","dotOffsetX","dotOffsetY","bgColor"]),S=class S 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.duotoneColor="#0099cc",this.angle=0,this.threshold=.5,this.sortDirection=0,this.sortSpan=64,this.dotOffsetX=.5,this.dotOffsetY=.5,this.bgColor="#ffffff",this._webglAvailable=!0,this._snapshotUrl="",this._image=null,this._observer=null,this._visible=!1,this._needsRender=!1}render(){return this._webglAvailable?h.html`<img src=${this._snapshotUrl||this.src} alt="" />`:h.html`<img src=${this.src} alt="" />`}connectedCallback(){super.connectedCallback(),this._observer=new IntersectionObserver(n=>{var t;const a=this._visible;this._visible=((t=n[0])==null?void 0:t.isIntersecting)??!1,this._visible&&!a&&this._needsRender&&(this._needsRender=!1,U(()=>this._renderEffect()))},{rootMargin:"200px"}),this._observer.observe(this)}updated(n){if(n.has("src")&&this.src){this._loadImage(this.src);return}if(!this._image)return;[...n.keys()].some(t=>K.has(t))&&this._scheduleRender()}disconnectedCallback(){var n;super.disconnectedCallback(),(n=this._observer)==null||n.disconnect(),this._revokeSnapshot()}_loadImage(n){const a=new Image;a.crossOrigin="anonymous",a.onload=()=>{this._image=a,this._scheduleRender()},a.onerror=()=>{console.warn(`[some-shade] Failed to load image: ${n}`)},a.src=n}_scheduleRender(){this._visible?U(()=>this._renderEffect()):this._needsRender=!0}async _renderEffect(){var v;if(!this._image)return;const n=C(this.effect);if(!n){console.warn(`[some-shade] Unknown effect: ${this.effect}`);return}const a=Math.min(window.devicePixelRatio||1,Y),t=this._image.naturalWidth,i=this._image.naturalHeight,o=document.createElement("canvas");o.width=t*a,o.height=i*a;const r=k(o);if(!r){this._webglAvailable=!1;return}try{const c=w(r,n.vertexShader,n.fragmentShader);r.useProgram(c.program);const _=L(r,this._image),f=P(r,c);r.viewport(0,0,o.width,o.height),r.clearColor(0,0,0,0),r.clear(r.COLOR_BUFFER_BIT),r.activeTexture(r.TEXTURE0),r.bindTexture(r.TEXTURE_2D,_.texture);const m=c.uniformLocations.get("u_image");m&&r.uniform1i(m,0),D(r,c,this._getUniformValues(_,a)),r.bindBuffer(r.ARRAY_BUFFER,f);const g=4*Float32Array.BYTES_PER_ELEMENT,y=c.attribLocations.get("a_position");y!==void 0&&y!==-1&&(r.enableVertexAttribArray(y),r.vertexAttribPointer(y,2,r.FLOAT,!1,g,0));const E=c.attribLocations.get("a_texCoord");E!==void 0&&E!==-1&&(r.enableVertexAttribArray(E),r.vertexAttribPointer(E,2,r.FLOAT,!1,g,2*Float32Array.BYTES_PER_ELEMENT)),V(r);const A=await new Promise(X=>o.toBlob(X));r.deleteTexture(_.texture),r.deleteProgram(c.program),r.deleteBuffer(f),A&&(this._revokeSnapshot(),this._snapshotUrl=URL.createObjectURL(A))}finally{(v=r.getExtension("WEBGL_lose_context"))==null||v.loseContext()}}_revokeSnapshot(){this._snapshotUrl&&(URL.revokeObjectURL(this._snapshotUrl),this._snapshotUrl="")}_getUniformValues(n,a){const t={};return t.u_resolution=[n.width*a,n.height*a],t.u_dotRadius=this.dotRadius,t.u_gridSize=this.gridSize,this.effect==="halftone-cmyk"?(t.u_angleC=this.angleC,t.u_angleM=this.angleM,t.u_angleY=this.angleY,t.u_angleK=this.angleK):this.effect==="halftone-duotone"?(t.u_duotoneColor=this._parseHexColor(this.duotoneColor),t.u_angle=this.angle):this.effect==="pixel-sort"?(t.u_threshold=this.threshold,t.u_direction=this.sortDirection,t.u_span=this.sortSpan):this.effect==="dot-grid"&&(t.u_dotOffset=[this.dotOffsetX,this.dotOffsetY],t.u_bgColor=this._parseHexColor(this.bgColor)),t}_parseHexColor(n){const a=n.replace("#",""),t=parseInt(a.substring(0,2),16)/255,i=parseInt(a.substring(2,4),16)/255,o=parseInt(a.substring(4,6),16)/255;return[t,i,o]}};S.styles=h.css`
     :host {
       display: block;
       position: relative;
       overflow: hidden;
     }
-    canvas, img {
+    img {
       display: block;
       width: 100%;
       height: auto;
     }
-  `;let a=g;u([s.property()],a.prototype,"src"),u([s.property()],a.prototype,"effect"),u([s.property({type:Number,attribute:"dot-radius"})],a.prototype,"dotRadius"),u([s.property({type:Number,attribute:"grid-size"})],a.prototype,"gridSize"),u([s.property({type:Number,attribute:"angle-c"})],a.prototype,"angleC"),u([s.property({type:Number,attribute:"angle-m"})],a.prototype,"angleM"),u([s.property({type:Number,attribute:"angle-y"})],a.prototype,"angleY"),u([s.property({type:Number,attribute:"angle-k"})],a.prototype,"angleK"),u([s.property({attribute:"duotone-color"})],a.prototype,"duotoneColor"),u([s.property({type:Number})],a.prototype,"angle"),u([s.property({type:Number})],a.prototype,"threshold"),u([s.property({type:Number,attribute:"sort-direction"})],a.prototype,"sortDirection"),u([s.property({type:Number,attribute:"sort-span"})],a.prototype,"sortSpan"),u([s.property({type:Number,attribute:"dot-offset-x"})],a.prototype,"dotOffsetX"),u([s.property({type:Number,attribute:"dot-offset-y"})],a.prototype,"dotOffsetY"),u([s.property({attribute:"bg-color"})],a.prototype,"bgColor"),u([s.state()],a.prototype,"_webglAvailable"),customElements.get("some-shade-image")||customElements.define("some-shade-image",a),f.SomeShadeImage=a,f.get=b,f.list=P,f.register=_,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));
+  `;let s=S;l([u.property()],s.prototype,"src"),l([u.property()],s.prototype,"effect"),l([u.property({type:Number,attribute:"dot-radius"})],s.prototype,"dotRadius"),l([u.property({type:Number,attribute:"grid-size"})],s.prototype,"gridSize"),l([u.property({type:Number,attribute:"angle-c"})],s.prototype,"angleC"),l([u.property({type:Number,attribute:"angle-m"})],s.prototype,"angleM"),l([u.property({type:Number,attribute:"angle-y"})],s.prototype,"angleY"),l([u.property({type:Number,attribute:"angle-k"})],s.prototype,"angleK"),l([u.property({attribute:"duotone-color"})],s.prototype,"duotoneColor"),l([u.property({type:Number})],s.prototype,"angle"),l([u.property({type:Number})],s.prototype,"threshold"),l([u.property({type:Number,attribute:"sort-direction"})],s.prototype,"sortDirection"),l([u.property({type:Number,attribute:"sort-span"})],s.prototype,"sortSpan"),l([u.property({type:Number,attribute:"dot-offset-x"})],s.prototype,"dotOffsetX"),l([u.property({type:Number,attribute:"dot-offset-y"})],s.prototype,"dotOffsetY"),l([u.property({attribute:"bg-color"})],s.prototype,"bgColor"),l([u.state()],s.prototype,"_webglAvailable"),l([u.state()],s.prototype,"_snapshotUrl"),customElements.get("some-shade-image")||customElements.define("some-shade-image",s),d.SomeShadeImage=s,d.get=C,d.list=N,d.register=p,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnfmorton/some-shade",
-  "version": "0.1.0-beta.7",
+  "version": "0.1.0-beta.8",
   "license": "ISC",
   "homepage": "https://johnfmorton.github.io/some-shade-web-component/",
   "repository": {