@johnfmorton/some-shade 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 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
+
 ## 0.1.1-beta
 
 - Fix halftone-duotone and halftone-cmyk shaders to sample at grid cell center — dots are now clean, uniform circles instead of splotchy per-pixel noise

package/dist/index.d.ts

@@ -0,0 +1,78 @@
+import { CSSResult } from 'lit';
+import { LitElement } from 'lit';
+import { PropertyValues } from 'lit';
+import { TemplateResult } from 'lit';
+
+export declare interface EffectDefinition {
+    name: string;
+    fragmentShader: string;
+    vertexShader: string;
+    uniforms: UniformDefinition[];
+}
+
+export declare function get(name: string): EffectDefinition | undefined;
+
+export declare function list(): string[];
+
+export declare function register(effect: EffectDefinition): void;
+
+export declare class SomeShadeImage extends LitElement {
+    static styles: CSSResult;
+    src: string;
+    effect: string;
+    dotRadius: number;
+    gridSize: number;
+    angleC: number;
+    angleM: number;
+    angleY: number;
+    angleK: number;
+    showC: number;
+    showM: number;
+    showY: number;
+    showK: number;
+    intensityK: number;
+    duotoneColor: string;
+    angle: number;
+    dotOffsetX: number;
+    dotOffsetY: number;
+    bgColor: string;
+    angleWarm: number;
+    angleCool: number;
+    showWarm: number;
+    showCool: number;
+    warmColor: string;
+    coolColor: string;
+    blendMode: number;
+    referenceWidth: number;
+    loadingBlur: number;
+    private _webglAvailable;
+    private _snapshotUrl;
+    private _snapshotLoaded;
+    private _image;
+    private _observer;
+    private _visible;
+    private _needsRender;
+    render(): TemplateResult<1>;
+    connectedCallback(): void;
+    updated(changed: PropertyValues): void;
+    disconnectedCallback(): void;
+    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;
+}
+
+export declare interface UniformDefinition {
+    name: string;
+    type: 'float' | 'vec2' | 'vec3' | 'vec4';
+    default: number | number[];
+    attribute?: string;
+}
+
+export { }

package/dist/some-shade.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("lit"),l=require("lit/decorators.js");function k(t){return t.getContext("webgl",{alpha:!0,premultipliedAlpha:!1,preserveDrawingBuffer:!0})}function E(t,o,r){const i=t.createShader(o);if(!i)throw new Error("Failed to create shader");if(t.shaderSource(i,r),t.compileShader(i),!t.getShaderParameter(i,t.COMPILE_STATUS)){const e=t.getShaderInfoLog(i);throw t.deleteShader(i),new Error(`Shader compile error: ${e}`)}return i}function D(t,o,r){const i=E(t,t.VERTEX_SHADER,o),e=E(t,t.FRAGMENT_SHADER,r),n=t.createProgram();if(!n)throw new Error("Failed to create program");if(t.attachShader(n,i),t.attachShader(n,e),t.linkProgram(n),!t.getProgramParameter(n,t.LINK_STATUS)){const d=t.getProgramInfoLog(n);throw t.deleteProgram(n),new Error(`Program link error: ${d}`)}t.deleteShader(i),t.deleteShader(e);const c=new Map,h=t.getProgramParameter(n,t.ACTIVE_ATTRIBUTES);for(let d=0;d<h;d++){const f=t.getActiveAttrib(n,d);f&&c.set(f.name,t.getAttribLocation(n,f.name))}const s=new Map,g=t.getProgramParameter(n,t.ACTIVE_UNIFORMS);for(let d=0;d<g;d++){const f=t.getActiveUniform(n,d);if(f){const m=t.getUniformLocation(n,f.name);m&&s.set(f.name,m)}}return{program:n,attribLocations:c,uniformLocations:s}}function L(t,o,r){for(const[i,e]of Object.entries(r)){const n=o.uniformLocations.get(i);if(n){if(typeof e=="number")t.uniform1f(n,e);else if(Array.isArray(e))switch(e.length){case 2:t.uniform2fv(n,e);break;case 3:t.uniform3fv(n,e);break;case 4:t.uniform4fv(n,e);break}}}}function z(t,o){const r=t.createTexture();if(!r)throw new Error("Failed to create texture");return t.bindTexture(t.TEXTURE_2D,r),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,o),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:r,width:o.naturalWidth,height:o.naturalHeight}}function M(t,o){const r=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,r,t.STATIC_DRAW);const e=4*Float32Array.BYTES_PER_ELEMENT,n=o.attribLocations.get("a_position");n!==void 0&&n!==-1&&(t.enableVertexAttribArray(n),t.vertexAttribPointer(n,2,t.FLOAT,!1,e,0));const c=o.attribLocations.get("a_texCoord");return c!==void 0&&c!==-1&&(t.enableVertexAttribArray(c),t.vertexAttribPointer(c,2,t.FLOAT,!1,e,2*Float32Array.BYTES_PER_ELEMENT)),i}function P(t){t.drawArrays(t.TRIANGLE_STRIP,0,4)}const O=`precision mediump float;
+"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;
 
 varying vec2 v_texCoord;
 
@@ -92,7 +92,7 @@ void main() {
   gl_Position = vec4(a_position, 0.0, 1.0);
   v_texCoord = a_texCoord;
 }
-`,I={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"},{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"}]},V=`precision mediump float;
+`,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;
 
 varying vec2 v_texCoord;
 
@@ -134,7 +134,7 @@ void main() {
 
   gl_FragColor = vec4(result, color.a);
 }
-`,W={name:"halftone-duotone",fragmentShader:V,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;
+`,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;
 
 varying vec2 v_texCoord;
 
@@ -190,7 +190,7 @@ void main() {
 
   gl_FragColor = vec4(result, 1.0);
 }
-`,F={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"}]},B=`precision mediump float;
+`,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;
 
 varying vec2 v_texCoord;
 
@@ -273,14 +273,14 @@ void main() {
 
   gl_FragColor = vec4(clamp(result, 0.0, 1.0), color.a);
 }
-`,Y={name:"technicolor-2strip",fragmentShader:B,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 p(t){w.set(t.name,t)}function U(t){return w.get(t)}function X(){return Array.from(w.keys())}p(I);p(W);p(F);p(Y);var $=Object.defineProperty,u=(t,o,r,i)=>{for(var e=void 0,n=t.length-1,c;n>=0;n--)(c=t[n])&&(e=c(o,r,e)||e);return e&&$(o,r,e),e};const G=2;let T=Promise.resolve();function A(t){const o=T.then(t,t);return T=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"]),C=class C 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.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.loadingBlur=0,this._webglAvailable=!0,this._snapshotUrl="",this._snapshotLoaded=!1,this._image=null,this._observer=null,this._resizeObserver=null,this._lastClientWidth=0,this._visible=!1,this._needsRender=!1}render(){if(!this._webglAvailable)return _.html`<img src=${this.src} alt="" />`;const o=this.loadingBlur>0?`filter: blur(${this.loadingBlur}px)`:"";return _.html`
+`,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?_.html`<img
+      ${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 i;const r=this._visible;this._visible=((i=o[0])==null?void 0:i.isIntersecting)??!1,this._visible&&!r&&this._needsRender&&(this._needsRender=!1,A(()=>this._renderEffect()))},{rootMargin:"200px"}),this._observer.observe(this),this._resizeObserver=new ResizeObserver(()=>{if(!this._image)return;const o=this.clientWidth;o>0&&o!==this._lastClientWidth&&(this._lastClientWidth=o,this._scheduleRender())}),this._resizeObserver.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,r;super.disconnectedCallback(),(o=this._observer)==null||o.disconnect(),(r=this._resizeObserver)==null||r.disconnect(),this._revokeSnapshot()}_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?A(()=>this._renderEffect()):this._needsRender=!0}async _renderEffect(){var g;if(!this._image)return;const o=U(this.effect);if(!o){console.warn(`[some-shade] Unknown effect: ${this.effect}`);return}const r=Math.min(window.devicePixelRatio||1,G),i=this._image.naturalWidth,e=this._image.naturalHeight,n=this.clientWidth||i,c=Math.max(1,i/n);this._lastClientWidth=this.clientWidth;const h=document.createElement("canvas");h.width=i*r,h.height=e*r;const s=k(h);if(!s){this._webglAvailable=!1;return}try{const d=D(s,o.vertexShader,o.fragmentShader);s.useProgram(d.program);const f=z(s,this._image),m=M(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,f.texture);const R=d.uniformLocations.get("u_image");R&&s.uniform1i(R,0),L(s,d,this._getUniformValues(f,r,c)),s.bindBuffer(s.ARRAY_BUFFER,m);const S=4*Float32Array.BYTES_PER_ELEMENT,b=d.attribLocations.get("a_position");b!==void 0&&b!==-1&&(s.enableVertexAttribArray(b),s.vertexAttribPointer(b,2,s.FLOAT,!1,S,0));const v=d.attribLocations.get("a_texCoord");v!==void 0&&v!==-1&&(s.enableVertexAttribArray(v),s.vertexAttribPointer(v,2,s.FLOAT,!1,S,2*Float32Array.BYTES_PER_ELEMENT)),P(s);const x=await new Promise(K=>h.toBlob(K));s.deleteTexture(f.texture),s.deleteProgram(d.program),s.deleteBuffer(m),x&&(this._snapshotLoaded=!1,this._revokeSnapshot(),this._snapshotUrl=URL.createObjectURL(x))}finally{(g=s.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,r,i){const e={};return e.u_resolution=[o.width*r,o.height*r],e.u_dotRadius=this.dotRadius*i,e.u_gridSize=this.gridSize*i,this.effect==="halftone-cmyk"?(e.u_angleC=this.angleC,e.u_angleM=this.angleM,e.u_angleY=this.angleY,e.u_angleK=this.angleK,e.u_showC=this.showC,e.u_showM=this.showM,e.u_showY=this.showY,e.u_showK=this.showK,e.u_intensityK=this.intensityK):this.effect==="halftone-duotone"?(e.u_duotoneColor=this._parseHexColor(this.duotoneColor),e.u_angle=this.angle):this.effect==="dot-grid"?(e.u_dotOffset=[this.dotOffsetX,this.dotOffsetY],e.u_bgColor=this._parseHexColor(this.bgColor),e.u_angle=this.angle):this.effect==="technicolor-2strip"&&(e.u_angleWarm=this.angleWarm,e.u_angleCool=this.angleCool,e.u_angleK=this.angleK,e.u_showWarm=this.showWarm,e.u_showCool=this.showCool,e.u_showK=this.showK,e.u_warmColor=this._parseHexColor(this.warmColor),e.u_coolColor=this._parseHexColor(this.coolColor),e.u_blendMode=this.blendMode,e.u_intensityK=this.intensityK),e}_parseHexColor(o){const r=o.replace("#",""),i=parseInt(r.substring(0,2),16)/255,e=parseInt(r.substring(2,4),16)/255,n=parseInt(r.substring(4,6),16)/255;return[i,e,n]}};C.styles=_.css`
+    `}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`
     :host {
       display: block;
       position: relative;
@@ -303,4 +303,4 @@ void main() {
     img.snapshot.loaded {
       opacity: 1;
     }
-  `;let a=C;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:"loading-blur"})],a.prototype,"loadingBlur");u([l.state()],a.prototype,"_webglAvailable");u([l.state()],a.prototype,"_snapshotUrl");u([l.state()],a.prototype,"_snapshotLoaded");customElements.get("some-shade-image")||customElements.define("some-shade-image",a);exports.SomeShadeImage=a;exports.get=U;exports.list=X;exports.register=p;
+  `;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=_;

package/dist/some-shade.es.js

@@ -1,72 +1,72 @@
-import { LitElement as k, css as D, html as y } from "lit";
+import { LitElement as U, css as K, html as y } from "lit";
 import { property as u, state as w } from "lit/decorators.js";
-function L(t) {
-  return t.getContext("webgl", {
+function k(e) {
+  return e.getContext("webgl", {
     alpha: !0,
     premultipliedAlpha: !1,
     preserveDrawingBuffer: !0
   });
 }
-function T(t, o, n) {
-  const i = t.createShader(o);
-  if (!i) throw new Error("Failed to create shader");
-  if (t.shaderSource(i, n), t.compileShader(i), !t.getShaderParameter(i, t.COMPILE_STATUS)) {
-    const e = t.getShaderInfoLog(i);
-    throw t.deleteShader(i), new Error(`Shader compile error: ${e}`);
+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}`);
   }
-  return i;
+  return t;
 }
-function z(t, o, n) {
-  const i = T(t, t.VERTEX_SHADER, o), e = T(t, t.FRAGMENT_SHADER, n), r = t.createProgram();
+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 (t.attachShader(r, i), t.attachShader(r, e), t.linkProgram(r), !t.getProgramParameter(r, t.LINK_STATUS)) {
-    const d = t.getProgramInfoLog(r);
-    throw t.deleteProgram(r), new Error(`Program link error: ${d}`);
+  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}`);
   }
-  t.deleteShader(i), t.deleteShader(e);
-  const c = /* @__PURE__ */ new Map(), h = t.getProgramParameter(r, t.ACTIVE_ATTRIBUTES);
-  for (let d = 0; d < h; d++) {
-    const f = t.getActiveAttrib(r, d);
-    f && c.set(f.name, t.getAttribLocation(r, f.name));
-  }
-  const s = /* @__PURE__ */ new Map(), _ = t.getProgramParameter(r, t.ACTIVE_UNIFORMS);
+  e.deleteShader(t), e.deleteShader(l);
+  const n = /* @__PURE__ */ new Map(), _ = e.getProgramParameter(r, e.ACTIVE_ATTRIBUTES);
   for (let d = 0; d < _; d++) {
-    const f = t.getActiveUniform(r, d);
-    if (f) {
-      const m = t.getUniformLocation(r, f.name);
-      m && s.set(f.name, m);
+    const c = e.getActiveAttrib(r, d);
+    c && n.set(c.name, e.getAttribLocation(r, 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);
+    if (c) {
+      const h = e.getUniformLocation(r, c.name);
+      h && f.set(c.name, h);
     }
   }
-  return { program: r, attribLocations: c, uniformLocations: s };
+  return { program: r, attribLocations: n, uniformLocations: f };
 }
-function M(t, o, n) {
-  for (const [i, e] of Object.entries(n)) {
-    const r = o.uniformLocations.get(i);
+function L(e, o, a) {
+  for (const [t, l] of Object.entries(a)) {
+    const r = o.uniformLocations.get(t);
     if (r) {
-      if (typeof e == "number")
-        t.uniform1f(r, e);
-      else if (Array.isArray(e))
-        switch (e.length) {
+      if (typeof l == "number")
+        e.uniform1f(r, l);
+      else if (Array.isArray(l))
+        switch (l.length) {
           case 2:
-            t.uniform2fv(r, e);
+            e.uniform2fv(r, l);
             break;
           case 3:
-            t.uniform3fv(r, e);
+            e.uniform3fv(r, l);
             break;
           case 4:
-            t.uniform4fv(r, e);
+            e.uniform4fv(r, l);
             break;
         }
     }
   }
 }
-function P(t, o) {
-  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, o), 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: o.naturalWidth, height: o.naturalHeight };
+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 O(t, o) {
-  const n = new Float32Array([
+function z(e, o) {
+  const a = new Float32Array([
     // pos.x  pos.y  tex.s  tex.t
     -1,
     -1,
@@ -84,18 +84,18 @@ function O(t, o) {
     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 e = 4 * Float32Array.BYTES_PER_ELEMENT, r = o.attribLocations.get("a_position");
-  r !== void 0 && r !== -1 && (t.enableVertexAttribArray(r), t.vertexAttribPointer(r, 2, t.FLOAT, !1, e, 0));
-  const c = o.attribLocations.get("a_texCoord");
-  return c !== void 0 && c !== -1 && (t.enableVertexAttribArray(c), t.vertexAttribPointer(c, 2, t.FLOAT, !1, e, 2 * Float32Array.BYTES_PER_ELEMENT)), i;
+  ]), 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;
 }
-function I(t) {
-  t.drawArrays(t.TRIANGLE_STRIP, 0, 4);
+function P(e) {
+  e.drawArrays(e.TRIANGLE_STRIP, 0, 4);
 }
-const V = `precision mediump float;
+const I = `precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -189,9 +189,9 @@ void main() {
   gl_Position = vec4(a_position, 0.0, 1.0);
   v_texCoord = a_texCoord;
 }
-`, W = {
+`, V = {
   name: "halftone-cmyk",
-  fragmentShader: V,
+  fragmentShader: I,
   vertexShader: b,
   uniforms: [
     { name: "u_dotRadius", type: "float", default: 4, attribute: "dot-radius" },
@@ -248,7 +248,7 @@ void main() {
 
   gl_FragColor = vec4(result, color.a);
 }
-`, F = {
+`, O = {
   name: "halftone-duotone",
   fragmentShader: N,
   vertexShader: b,
@@ -258,7 +258,7 @@ void main() {
     { name: "u_duotoneColor", type: "vec3", default: [0, 0.6, 0.8], attribute: "duotone-color" },
     { name: "u_angle", type: "float", default: 0, attribute: "angle" }
   ]
-}, B = `precision mediump float;
+}, F = `precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -314,9 +314,9 @@ void main() {
 
   gl_FragColor = vec4(result, 1.0);
 }
-`, Y = {
+`, W = {
   name: "dot-grid",
-  fragmentShader: B,
+  fragmentShader: F,
   vertexShader: b,
   uniforms: [
     { name: "u_dotRadius", type: "float", default: 4, attribute: "dot-radius" },
@@ -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" }
   ]
-}, X = `precision mediump float;
+}, B = `precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -408,9 +408,9 @@ void main() {
 
   gl_FragColor = vec4(clamp(result, 0.0, 1.0), color.a);
 }
-`, $ = {
+`, Y = {
   name: "technicolor-2strip",
-  fragmentShader: X,
+  fragmentShader: B,
   vertexShader: b,
   uniforms: [
     { name: "u_dotRadius", type: "float", default: 7, attribute: "dot-radius" },
@@ -427,31 +427,31 @@ void main() {
     { name: "u_intensityK", type: "float", default: 1, attribute: "intensity-k" }
   ]
 }, C = /* @__PURE__ */ new Map();
-function v(t) {
-  C.set(t.name, t);
+function v(e) {
+  C.set(e.name, e);
 }
-function G(t) {
-  return C.get(t);
+function X(e) {
+  return C.get(e);
 }
-function Z() {
+function Q() {
   return Array.from(C.keys());
 }
+v(V);
+v(O);
 v(W);
-v(F);
 v(Y);
-v($);
-var H = Object.defineProperty, l = (t, o, n, i) => {
-  for (var e = void 0, r = t.length - 1, c; r >= 0; r--)
-    (c = t[r]) && (e = c(o, n, e) || e);
-  return e && H(o, n, e), e;
+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;
 };
-const q = 2;
-let A = Promise.resolve();
-function U(t) {
-  const o = A.then(t, t);
-  return A = o, o;
+const G = 2;
+let E = Promise.resolve();
+function T(e) {
+  const o = E.then(e, e);
+  return E = o, o;
 }
-const j = /* @__PURE__ */ new Set([
+const H = /* @__PURE__ */ new Set([
   "effect",
   "dotRadius",
   "gridSize",
@@ -475,10 +475,11 @@ const j = /* @__PURE__ */ new Set([
   "showCool",
   "warmColor",
   "coolColor",
-  "blendMode"
-]), R = class R extends k {
+  "blendMode",
+  "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.loadingBlur = 0, this._webglAvailable = !0, this._snapshotUrl = "", this._snapshotLoaded = !1, this._image = null, this._observer = null, this._resizeObserver = null, this._lastClientWidth = 0, 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.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)
@@ -496,17 +497,13 @@ const j = /* @__PURE__ */ new Set([
   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._needsRender = !1, U(() => this._renderEffect()));
+        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), this._resizeObserver = new ResizeObserver(() => {
-      if (!this._image) return;
-      const o = this.clientWidth;
-      o > 0 && o !== this._lastClientWidth && (this._lastClientWidth = o, this._scheduleRender());
-    }), this._resizeObserver.observe(this);
+    ), this._observer.observe(this);
   }
   updated(o) {
     if (o.has("src") && this.src) {
@@ -515,29 +512,29 @@ const j = /* @__PURE__ */ new Set([
     }
     if (!this._image) return;
     [...o.keys()].some(
-      (i) => j.has(i)
+      (t) => H.has(t)
     ) && this._scheduleRender();
   }
   disconnectedCallback() {
-    var o, n;
-    super.disconnectedCallback(), (o = this._observer) == null || o.disconnect(), (n = this._resizeObserver) == null || n.disconnect(), this._revokeSnapshot();
+    var o;
+    super.disconnectedCallback(), (o = this._observer) == null || o.disconnect(), this._revokeSnapshot();
   }
   // ---------------------------------------------------------------------------
   // Image loading
   // ---------------------------------------------------------------------------
   _loadImage(o) {
-    const n = new Image();
-    n.crossOrigin = "anonymous", n.onload = () => {
-      this._image = n, this._scheduleRender();
-    }, n.onerror = () => {
+    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}`);
-    }, n.src = o;
+    }, a.src = o;
   }
   // ---------------------------------------------------------------------------
   // Render scheduling
   // ---------------------------------------------------------------------------
   _scheduleRender() {
-    this._visible ? U(() => this._renderEffect()) : this._needsRender = !0;
+    this._visible ? T(() => this._renderEffect()) : this._needsRender = !0;
   }
   // ---------------------------------------------------------------------------
   // WebGL render → snapshot → tear-down
@@ -545,52 +542,50 @@ const j = /* @__PURE__ */ new Set([
   async _renderEffect() {
     var _;
     if (!this._image) return;
-    const o = G(this.effect);
+    const o = X(this.effect);
     if (!o) {
       console.warn(`[some-shade] Unknown effect: ${this.effect}`);
       return;
     }
-    const n = Math.min(window.devicePixelRatio || 1, q), i = this._image.naturalWidth, e = this._image.naturalHeight, r = this.clientWidth || i, c = Math.max(1, i / r);
-    this._lastClientWidth = this.clientWidth;
-    const h = document.createElement("canvas");
-    h.width = i * n, h.height = e * n;
-    const s = L(h);
-    if (!s) {
+    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._webglAvailable = !1;
       return;
     }
     try {
-      const d = z(
-        s,
+      const f = D(
+        n,
         o.vertexShader,
         o.fragmentShader
       );
-      s.useProgram(d.program);
-      const f = P(s, this._image), m = O(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, f.texture);
-      const S = d.uniformLocations.get("u_image");
-      S && s.uniform1i(S, 0), M(
-        s,
-        d,
-        this._getUniformValues(f, n, c)
-      ), s.bindBuffer(s.ARRAY_BUFFER, m);
-      const x = 4 * Float32Array.BYTES_PER_ELEMENT, g = d.attribLocations.get("a_position");
-      g !== void 0 && g !== -1 && (s.enableVertexAttribArray(g), s.vertexAttribPointer(g, 2, s.FLOAT, !1, x, 0));
-      const p = d.attribLocations.get("a_texCoord");
-      p !== void 0 && p !== -1 && (s.enableVertexAttribArray(p), s.vertexAttribPointer(
+      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(
         p,
         2,
-        s.FLOAT,
+        n.FLOAT,
         !1,
-        x,
+        h,
         2 * Float32Array.BYTES_PER_ELEMENT
-      )), I(s);
-      const E = await new Promise(
-        (K) => h.toBlob(K)
+      )), P(n);
+      const S = await new Promise(
+        (A) => r.toBlob(A)
       );
-      s.deleteTexture(f.texture), s.deleteProgram(d.program), s.deleteBuffer(m), E && (this._snapshotLoaded = !1, this._revokeSnapshot(), this._snapshotUrl = URL.createObjectURL(E));
+      n.deleteTexture(m.texture), n.deleteProgram(f.program), n.deleteBuffer(d), S && (this._snapshotLoaded = !1, this._revokeSnapshot(), this._snapshotUrl = URL.createObjectURL(S));
     } finally {
-      (_ = s.getExtension("WEBGL_lose_context")) == null || _.loseContext();
+      (_ = n.getExtension("WEBGL_lose_context")) == null || _.loseContext();
     }
   }
   // ---------------------------------------------------------------------------
@@ -611,19 +606,21 @@ const j = /* @__PURE__ */ new Set([
   _revokeSnapshot() {
     this._snapshotUrl && (URL.revokeObjectURL(this._snapshotUrl), this._snapshotUrl = "");
   }
-  _getUniformValues(o, n, i) {
-    const e = {};
-    return e.u_resolution = [
-      o.width * n,
-      o.height * n
-    ], e.u_dotRadius = this.dotRadius * i, e.u_gridSize = this.gridSize * i, this.effect === "halftone-cmyk" ? (e.u_angleC = this.angleC, e.u_angleM = this.angleM, e.u_angleY = this.angleY, e.u_angleK = this.angleK, e.u_showC = this.showC, e.u_showM = this.showM, e.u_showY = this.showY, e.u_showK = this.showK, e.u_intensityK = this.intensityK) : this.effect === "halftone-duotone" ? (e.u_duotoneColor = this._parseHexColor(this.duotoneColor), e.u_angle = this.angle) : this.effect === "dot-grid" ? (e.u_dotOffset = [this.dotOffsetX, this.dotOffsetY], e.u_bgColor = this._parseHexColor(this.bgColor), e.u_angle = this.angle) : this.effect === "technicolor-2strip" && (e.u_angleWarm = this.angleWarm, e.u_angleCool = this.angleCool, e.u_angleK = this.angleK, e.u_showWarm = this.showWarm, e.u_showCool = this.showCool, e.u_showK = this.showK, e.u_warmColor = this._parseHexColor(this.warmColor), e.u_coolColor = this._parseHexColor(this.coolColor), e.u_blendMode = this.blendMode, e.u_intensityK = this.intensityK), e;
+  _getUniformValues(o, a) {
+    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;
   }
   _parseHexColor(o) {
-    const n = o.replace("#", ""), i = parseInt(n.substring(0, 2), 16) / 255, e = parseInt(n.substring(2, 4), 16) / 255, r = parseInt(n.substring(4, 6), 16) / 255;
-    return [i, e, r];
+    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];
   }
 };
-R.styles = D`
+R.styles = K`
     :host {
       display: block;
       position: relative;
@@ -647,98 +644,101 @@ R.styles = D`
       opacity: 1;
     }
   `;
-let a = R;
-l([
+let i = R;
+s([
   u()
-], a.prototype, "src");
-l([
+], i.prototype, "src");
+s([
   u()
-], a.prototype, "effect");
-l([
+], i.prototype, "effect");
+s([
   u({ type: Number, attribute: "dot-radius" })
-], a.prototype, "dotRadius");
-l([
+], i.prototype, "dotRadius");
+s([
   u({ type: Number, attribute: "grid-size" })
-], a.prototype, "gridSize");
-l([
+], i.prototype, "gridSize");
+s([
   u({ type: Number, attribute: "angle-c" })
-], a.prototype, "angleC");
-l([
+], i.prototype, "angleC");
+s([
   u({ type: Number, attribute: "angle-m" })
-], a.prototype, "angleM");
-l([
+], i.prototype, "angleM");
+s([
   u({ type: Number, attribute: "angle-y" })
-], a.prototype, "angleY");
-l([
+], i.prototype, "angleY");
+s([
   u({ type: Number, attribute: "angle-k" })
-], a.prototype, "angleK");
-l([
+], i.prototype, "angleK");
+s([
   u({ type: Number, attribute: "show-c" })
-], a.prototype, "showC");
-l([
+], i.prototype, "showC");
+s([
   u({ type: Number, attribute: "show-m" })
-], a.prototype, "showM");
-l([
+], i.prototype, "showM");
+s([
   u({ type: Number, attribute: "show-y" })
-], a.prototype, "showY");
-l([
+], i.prototype, "showY");
+s([
   u({ type: Number, attribute: "show-k" })
-], a.prototype, "showK");
-l([
+], i.prototype, "showK");
+s([
   u({ type: Number, attribute: "intensity-k" })
-], a.prototype, "intensityK");
-l([
+], i.prototype, "intensityK");
+s([
   u({ attribute: "duotone-color" })
-], a.prototype, "duotoneColor");
-l([
+], i.prototype, "duotoneColor");
+s([
   u({ type: Number })
-], a.prototype, "angle");
-l([
+], i.prototype, "angle");
+s([
   u({ type: Number, attribute: "dot-offset-x" })
-], a.prototype, "dotOffsetX");
-l([
+], i.prototype, "dotOffsetX");
+s([
   u({ type: Number, attribute: "dot-offset-y" })
-], a.prototype, "dotOffsetY");
-l([
+], i.prototype, "dotOffsetY");
+s([
   u({ attribute: "bg-color" })
-], a.prototype, "bgColor");
-l([
+], i.prototype, "bgColor");
+s([
   u({ type: Number, attribute: "angle-warm" })
-], a.prototype, "angleWarm");
-l([
+], i.prototype, "angleWarm");
+s([
   u({ type: Number, attribute: "angle-cool" })
-], a.prototype, "angleCool");
-l([
+], i.prototype, "angleCool");
+s([
   u({ type: Number, attribute: "show-warm" })
-], a.prototype, "showWarm");
-l([
+], i.prototype, "showWarm");
+s([
   u({ type: Number, attribute: "show-cool" })
-], a.prototype, "showCool");
-l([
+], i.prototype, "showCool");
+s([
   u({ attribute: "warm-color" })
-], a.prototype, "warmColor");
-l([
+], i.prototype, "warmColor");
+s([
   u({ attribute: "cool-color" })
-], a.prototype, "coolColor");
-l([
+], i.prototype, "coolColor");
+s([
   u({ type: Number, attribute: "blend-mode" })
-], a.prototype, "blendMode");
-l([
+], i.prototype, "blendMode");
+s([
+  u({ type: Number, attribute: "reference-width" })
+], i.prototype, "referenceWidth");
+s([
   u({ type: Number, attribute: "loading-blur" })
-], a.prototype, "loadingBlur");
-l([
+], i.prototype, "loadingBlur");
+s([
   w()
-], a.prototype, "_webglAvailable");
-l([
+], i.prototype, "_webglAvailable");
+s([
   w()
-], a.prototype, "_snapshotUrl");
-l([
+], i.prototype, "_snapshotUrl");
+s([
   w()
-], a.prototype, "_snapshotLoaded");
-customElements.get("some-shade-image") || customElements.define("some-shade-image", a);
+], i.prototype, "_snapshotLoaded");
+customElements.get("some-shade-image") || customElements.define("some-shade-image", i);
 export {
-  a as SomeShadeImage,
-  G as get,
-  Z as list,
+  i as SomeShadeImage,
+  X as get,
+  Q as list,
   v as register
 };

package/dist/some-shade.umd.js

@@ -1,4 +1,4 @@
-(function(c,m){typeof exports=="object"&&typeof module<"u"?m(exports,require("lit"),require("lit/decorators.js")):typeof define=="function"&&define.amd?define(["exports","lit","lit/decorators.js"],m):(c=typeof globalThis<"u"?globalThis:c||self,m(c.SomeShade={},c.Lit,c.LitDecorators))})(this,(function(c,m,l){"use strict";function k(e){return e.getContext("webgl",{alpha:!0,premultipliedAlpha:!1,preserveDrawingBuffer:!0})}function S(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 D(e,o,n){const i=S(e,e.VERTEX_SHADER,o),t=S(e,e.FRAGMENT_SHADER,n),a=e.createProgram();if(!a)throw new Error("Failed to create program");if(e.attachShader(a,i),e.attachShader(a,t),e.linkProgram(a),!e.getProgramParameter(a,e.LINK_STATUS)){const d=e.getProgramInfoLog(a);throw e.deleteProgram(a),new Error(`Program link error: ${d}`)}e.deleteShader(i),e.deleteShader(t);const f=new Map,p=e.getProgramParameter(a,e.ACTIVE_ATTRIBUTES);for(let d=0;d<p;d++){const h=e.getActiveAttrib(a,d);h&&f.set(h.name,e.getAttribLocation(a,h.name))}const s=new Map,v=e.getProgramParameter(a,e.ACTIVE_UNIFORMS);for(let d=0;d<v;d++){const h=e.getActiveUniform(a,d);if(h){const g=e.getUniformLocation(a,h.name);g&&s.set(h.name,g)}}return{program:a,attribLocations:f,uniformLocations:s}}function L(e,o,n){for(const[i,t]of Object.entries(n)){const a=o.uniformLocations.get(i);if(a){if(typeof t=="number")e.uniform1f(a,t);else if(Array.isArray(t))switch(t.length){case 2:e.uniform2fv(a,t);break;case 3:e.uniform3fv(a,t);break;case 4:e.uniform4fv(a,t);break}}}}function z(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 M(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,a=o.attribLocations.get("a_position");a!==void 0&&a!==-1&&(e.enableVertexAttribArray(a),e.vertexAttribPointer(a,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 P(e){e.drawArrays(e.TRIANGLE_STRIP,0,4)}const O=`precision mediump float;
+(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;
 
 varying vec2 v_texCoord;
 
@@ -92,7 +92,7 @@ void main() {
   gl_Position = vec4(a_position, 0.0, 1.0);
   v_texCoord = a_texCoord;
 }
-`,I={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"},{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"}]},V={name:"halftone-duotone",fragmentShader:`precision mediump float;
+`,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;
 
 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"}]},W={name:"dot-grid",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"}]},V={name:"dot-grid",fragmentShader:`precision mediump float;
 
 varying vec2 v_texCoord;
 
@@ -273,14 +273,14 @@ 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 _(e){C.set(e.name,e)}function x(e){return C.get(e)}function F(){return Array.from(C.keys())}_(I),_(V),_(W),_(N);var B=Object.defineProperty,u=(e,o,n,i)=>{for(var t=void 0,a=e.length-1,f;a>=0;a--)(f=e[a])&&(t=f(o,n,t)||t);return t&&B(o,n,t),t};const Y=2;let E=Promise.resolve();function T(e){const o=E.then(e,e);return E=o,o}const X=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"]),R=class R extends m.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.loadingBlur=0,this._webglAvailable=!0,this._snapshotUrl="",this._snapshotLoaded=!1,this._image=null,this._observer=null,this._resizeObserver=null,this._lastClientWidth=0,this._visible=!1,this._needsRender=!1}render(){if(!this._webglAvailable)return m.html`<img src=${this.src} alt="" />`;const o=this.loadingBlur>0?`filter: blur(${this.loadingBlur}px)`:"";return m.html`
+`,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?m.html`<img
+      ${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 i;const n=this._visible;this._visible=((i=o[0])==null?void 0:i.isIntersecting)??!1,this._visible&&!n&&this._needsRender&&(this._needsRender=!1,T(()=>this._renderEffect()))},{rootMargin:"200px"}),this._observer.observe(this),this._resizeObserver=new ResizeObserver(()=>{if(!this._image)return;const o=this.clientWidth;o>0&&o!==this._lastClientWidth&&(this._lastClientWidth=o,this._scheduleRender())}),this._resizeObserver.observe(this)}updated(o){if(o.has("src")&&this.src){this._loadImage(this.src);return}if(!this._image)return;[...o.keys()].some(i=>X.has(i))&&this._scheduleRender()}disconnectedCallback(){var o,n;super.disconnectedCallback(),(o=this._observer)==null||o.disconnect(),(n=this._resizeObserver)==null||n.disconnect(),this._revokeSnapshot()}_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?T(()=>this._renderEffect()):this._needsRender=!0}async _renderEffect(){var v;if(!this._image)return;const o=x(this.effect);if(!o){console.warn(`[some-shade] Unknown effect: ${this.effect}`);return}const n=Math.min(window.devicePixelRatio||1,Y),i=this._image.naturalWidth,t=this._image.naturalHeight,a=this.clientWidth||i,f=Math.max(1,i/a);this._lastClientWidth=this.clientWidth;const p=document.createElement("canvas");p.width=i*n,p.height=t*n;const s=k(p);if(!s){this._webglAvailable=!1;return}try{const d=D(s,o.vertexShader,o.fragmentShader);s.useProgram(d.program);const h=z(s,this._image),g=M(s,d);s.viewport(0,0,p.width,p.height),s.clearColor(0,0,0,0),s.clear(s.COLOR_BUFFER_BIT),s.activeTexture(s.TEXTURE0),s.bindTexture(s.TEXTURE_2D,h.texture);const A=d.uniformLocations.get("u_image");A&&s.uniform1i(A,0),L(s,d,this._getUniformValues(h,n,f)),s.bindBuffer(s.ARRAY_BUFFER,g);const U=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,U,0));const w=d.attribLocations.get("a_texCoord");w!==void 0&&w!==-1&&(s.enableVertexAttribArray(w),s.vertexAttribPointer(w,2,s.FLOAT,!1,U,2*Float32Array.BYTES_PER_ELEMENT)),P(s);const K=await new Promise($=>p.toBlob($));s.deleteTexture(h.texture),s.deleteProgram(d.program),s.deleteBuffer(g),K&&(this._snapshotLoaded=!1,this._revokeSnapshot(),this._snapshotUrl=URL.createObjectURL(K))}finally{(v=s.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,n,i){const t={};return t.u_resolution=[o.width*n,o.height*n],t.u_dotRadius=this.dotRadius*i,t.u_gridSize=this.gridSize*i,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,a=parseInt(n.substring(4,6),16)/255;return[i,t,a]}};R.styles=m.css`
+    `}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`
     :host {
       display: block;
       position: relative;
@@ -303,4 +303,4 @@ void main() {
     img.snapshot.loaded {
       opacity: 1;
     }
-  `;let r=R;u([l.property()],r.prototype,"src"),u([l.property()],r.prototype,"effect"),u([l.property({type:Number,attribute:"dot-radius"})],r.prototype,"dotRadius"),u([l.property({type:Number,attribute:"grid-size"})],r.prototype,"gridSize"),u([l.property({type:Number,attribute:"angle-c"})],r.prototype,"angleC"),u([l.property({type:Number,attribute:"angle-m"})],r.prototype,"angleM"),u([l.property({type:Number,attribute:"angle-y"})],r.prototype,"angleY"),u([l.property({type:Number,attribute:"angle-k"})],r.prototype,"angleK"),u([l.property({type:Number,attribute:"show-c"})],r.prototype,"showC"),u([l.property({type:Number,attribute:"show-m"})],r.prototype,"showM"),u([l.property({type:Number,attribute:"show-y"})],r.prototype,"showY"),u([l.property({type:Number,attribute:"show-k"})],r.prototype,"showK"),u([l.property({type:Number,attribute:"intensity-k"})],r.prototype,"intensityK"),u([l.property({attribute:"duotone-color"})],r.prototype,"duotoneColor"),u([l.property({type:Number})],r.prototype,"angle"),u([l.property({type:Number,attribute:"dot-offset-x"})],r.prototype,"dotOffsetX"),u([l.property({type:Number,attribute:"dot-offset-y"})],r.prototype,"dotOffsetY"),u([l.property({attribute:"bg-color"})],r.prototype,"bgColor"),u([l.property({type:Number,attribute:"angle-warm"})],r.prototype,"angleWarm"),u([l.property({type:Number,attribute:"angle-cool"})],r.prototype,"angleCool"),u([l.property({type:Number,attribute:"show-warm"})],r.prototype,"showWarm"),u([l.property({type:Number,attribute:"show-cool"})],r.prototype,"showCool"),u([l.property({attribute:"warm-color"})],r.prototype,"warmColor"),u([l.property({attribute:"cool-color"})],r.prototype,"coolColor"),u([l.property({type:Number,attribute:"blend-mode"})],r.prototype,"blendMode"),u([l.property({type:Number,attribute:"loading-blur"})],r.prototype,"loadingBlur"),u([l.state()],r.prototype,"_webglAvailable"),u([l.state()],r.prototype,"_snapshotUrl"),u([l.state()],r.prototype,"_snapshotLoaded"),customElements.get("some-shade-image")||customElements.define("some-shade-image",r),c.SomeShadeImage=r,c.get=x,c.list=F,c.register=_,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})}));
+  `;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"})}));

package/package.json

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