@johnfmorton/some-shade 0.1.0-beta.1

package/dist/index.d.ts

@@ -0,0 +1,68 @@
+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;
+    duotoneColor: string;
+    angle: number;
+    threshold: number;
+    sortDirection: number;
+    sortSpan: number;
+    dotOffsetX: number;
+    dotOffsetY: number;
+    bgColor: string;
+    private _webglAvailable;
+    private _canvas;
+    private _gl;
+    private _programInfo;
+    private _textureInfo;
+    private _quadBuffer;
+    private _currentEffect;
+    private _image;
+    private _resizeObserver;
+    render(): TemplateResult<1>;
+    firstUpdated(): void;
+    updated(changed: PropertyValues): void;
+    disconnectedCallback(): void;
+    private _loadImage;
+    private _uploadTexture;
+    private _sizeCanvas;
+    private _handleResize;
+    private _setupProgram;
+    private _getUniformValues;
+    private _parseHexColor;
+    private _renderFrame;
+    private _cleanup;
+}
+
+export declare interface UniformDefinition {
+    name: string;
+    type: 'float' | 'vec2' | 'vec3' | 'vec4';
+    default: number | number[];
+    attribute?: string;
+}
+
+export { }

package/dist/some-shade.cjs.js

@@ -0,0 +1,225 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("lit"),i=require("lit/decorators.js");function y(e){return e.getContext("webgl",{alpha:!0,premultipliedAlpha:!1,preserveDrawingBuffer:!0})}function p(e,t,o){const a=e.createShader(t);if(!a)throw new Error("Failed to create shader");if(e.shaderSource(a,o),e.compileShader(a),!e.getShaderParameter(a,e.COMPILE_STATUS)){const n=e.getShaderInfoLog(a);throw e.deleteShader(a),new Error(`Shader compile error: ${n}`)}return a}function x(e,t,o){const a=p(e,e.VERTEX_SHADER,t),n=p(e,e.FRAGMENT_SHADER,o),r=e.createProgram();if(!r)throw new Error("Failed to create program");if(e.attachShader(r,a),e.attachShader(r,n),e.linkProgram(r),!e.getProgramParameter(r,e.LINK_STATUS)){const f=e.getProgramInfoLog(r);throw e.deleteProgram(r),new Error(`Program link error: ${f}`)}e.deleteShader(a),e.deleteShader(n);const u=new Map,b=e.getProgramParameter(r,e.ACTIVE_ATTRIBUTES);for(let f=0;f<b;f++){const l=e.getActiveAttrib(r,f);l&&u.set(l.name,e.getAttribLocation(r,l.name))}const _=new Map,S=e.getProgramParameter(r,e.ACTIVE_UNIFORMS);for(let f=0;f<S;f++){const l=e.getActiveUniform(r,f);if(l){const g=e.getUniformLocation(r,l.name);g&&_.set(l.name,g)}}return{program:r,attribLocations:u,uniformLocations:_}}function E(e,t,o){for(const[a,n]of Object.entries(o)){const r=t.uniformLocations.get(a);if(r){if(typeof n=="number")e.uniform1f(r,n);else if(Array.isArray(n))switch(n.length){case 2:e.uniform2fv(r,n);break;case 3:e.uniform3fv(r,n);break;case 4:e.uniform4fv(r,n);break}}}}function C(e,t){const o=e.createTexture();if(!o)throw new Error("Failed to create texture");return e.bindTexture(e.TEXTURE_2D,o),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t),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:o,width:t.naturalWidth,height:t.naturalHeight}}function I(e,t){const o=new Float32Array([-1,-1,0,1,1,-1,1,1,-1,1,0,0,1,1,1,0]),a=e.createBuffer();if(!a)throw new Error("Failed to create buffer");e.bindBuffer(e.ARRAY_BUFFER,a),e.bufferData(e.ARRAY_BUFFER,o,e.STATIC_DRAW);const n=4*Float32Array.BYTES_PER_ELEMENT,r=t.attribLocations.get("a_position");r!==void 0&&r!==-1&&(e.enableVertexAttribArray(r),e.vertexAttribPointer(r,2,e.FLOAT,!1,n,0));const u=t.attribLocations.get("a_texCoord");return u!==void 0&&u!==-1&&(e.enableVertexAttribArray(u),e.vertexAttribPointer(u,2,e.FLOAT,!1,n,2*Float32Array.BYTES_PER_ELEMENT)),a}function R(e){e.drawArrays(e.TRIANGLE_STRIP,0,4)}const T=`precision mediump float;
+
+varying vec2 v_texCoord;
+
+uniform sampler2D u_image;
+uniform vec2 u_resolution;
+uniform float u_dotRadius;
+uniform float u_gridSize;
+uniform float u_angleC;
+uniform float u_angleM;
+uniform float u_angleY;
+uniform float u_angleK;
+
+float halftone(vec2 uv, float angle, float channelValue, float gridSize, float dotRadius) {
+  float rad = radians(angle);
+  float s = sin(rad);
+  float c = cos(rad);
+  mat2 rot = mat2(c, -s, s, c);
+
+  vec2 rotUV = rot * uv;
+  vec2 grid = fract(rotUV / gridSize) - 0.5;
+
+  float dist = length(grid) * gridSize;
+  float radius = dotRadius * sqrt(channelValue);
+
+  return smoothstep(radius + 0.5, radius - 0.5, dist);
+}
+
+void main() {
+  vec2 uv = v_texCoord * u_resolution;
+  vec4 color = texture2D(u_image, v_texCoord);
+
+  float r = color.r;
+  float g = color.g;
+  float b = color.b;
+
+  // RGB to CMYK
+  float k = 1.0 - max(max(r, g), b);
+  float invK = 1.0 - k;
+  float cy = invK > 0.001 ? (invK - r) / invK : 0.0;
+  float ma = invK > 0.001 ? (invK - g) / invK : 0.0;
+  float ye = invK > 0.001 ? (invK - b) / invK : 0.0;
+
+  // Compute halftone dots for each channel
+  float cDot = halftone(uv, u_angleC, cy, u_gridSize, u_dotRadius);
+  float mDot = halftone(uv, u_angleM, ma, u_gridSize, u_dotRadius);
+  float yDot = halftone(uv, u_angleY, ye, u_gridSize, u_dotRadius);
+  float kDot = halftone(uv, u_angleK, k, u_gridSize, u_dotRadius);
+
+  // Subtractive color mixing on white paper
+  float outR = (1.0 - cDot) * (1.0 - kDot);
+  float outG = (1.0 - mDot) * (1.0 - kDot);
+  float outB = (1.0 - yDot) * (1.0 - kDot);
+
+  gl_FragColor = vec4(outR, outG, outB, color.a);
+}
+`,h=`attribute vec2 a_position;
+attribute vec2 a_texCoord;
+varying vec2 v_texCoord;
+
+void main() {
+  gl_Position = vec4(a_position, 0.0, 1.0);
+  v_texCoord = a_texCoord;
+}
+`,A={name:"halftone-cmyk",fragmentShader:T,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"}]},w=`precision mediump float;
+
+varying vec2 v_texCoord;
+
+uniform sampler2D u_image;
+uniform vec2 u_resolution;
+uniform float u_dotRadius;
+uniform float u_gridSize;
+uniform vec3 u_duotoneColor;
+uniform float u_angle;
+
+void main() {
+  vec2 uv = v_texCoord * u_resolution;
+  vec4 color = texture2D(u_image, v_texCoord);
+
+  // Convert to luminance
+  float luma = dot(color.rgb, vec3(0.299, 0.587, 0.114));
+  float darkness = 1.0 - luma;
+
+  // Rotate grid
+  float rad = radians(u_angle);
+  float s = sin(rad);
+  float c = cos(rad);
+  vec2 rotUV = mat2(c, -s, s, c) * uv;
+
+  vec2 grid = fract(rotUV / u_gridSize) - 0.5;
+  float dist = length(grid) * u_gridSize;
+  float radius = u_dotRadius * sqrt(darkness);
+  float dot = smoothstep(radius + 0.5, radius - 0.5, dist);
+
+  // Mix duotone color (paper) with black (dots)
+  vec3 result = mix(u_duotoneColor, vec3(0.0), dot);
+
+  gl_FragColor = vec4(result, color.a);
+}
+`,U={name:"halftone-duotone",fragmentShader:w,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"}]},P=`precision mediump float;
+
+varying vec2 v_texCoord;
+
+uniform sampler2D u_image;
+uniform vec2 u_resolution;
+uniform float u_threshold;
+uniform float u_direction;
+uniform float u_span;
+
+float brightness(vec3 c) {
+  return dot(c, vec3(0.299, 0.587, 0.114));
+}
+
+void main() {
+  vec2 uv = v_texCoord;
+  vec4 color = texture2D(u_image, uv);
+  float bri = brightness(color.rgb);
+
+  // Boundary pixel — pass through
+  if (bri < u_threshold) {
+    gl_FragColor = color;
+    return;
+  }
+
+  float rad = radians(u_direction);
+  vec2 dir = vec2(cos(rad), sin(rad));
+  vec2 step = dir / u_resolution;
+
+  int spanLen = int(u_span);
+
+  // Walk backward to find span start
+  int backCount = 0;
+  for (int i = 1; i < 256; i++) {
+    if (i >= spanLen) break;
+    vec2 sampleUV = uv - step * float(i);
+    if (sampleUV.x < 0.0 || sampleUV.x > 1.0 || sampleUV.y < 0.0 || sampleUV.y > 1.0) break;
+    float b = brightness(texture2D(u_image, sampleUV).rgb);
+    if (b < u_threshold) break;
+    backCount++;
+  }
+
+  // Walk forward to find span end
+  int fwdCount = 0;
+  for (int i = 1; i < 256; i++) {
+    if (i >= spanLen) break;
+    vec2 sampleUV = uv + step * float(i);
+    if (sampleUV.x < 0.0 || sampleUV.x > 1.0 || sampleUV.y < 0.0 || sampleUV.y > 1.0) break;
+    float b = brightness(texture2D(u_image, sampleUV).rgb);
+    if (b < u_threshold) break;
+    fwdCount++;
+  }
+
+  int totalSpan = backCount + 1 + fwdCount;
+  vec2 spanStartUV = uv - step * float(backCount);
+
+  // Count pixels in span that are darker than current (= rank)
+  int rank = 0;
+  for (int i = 0; i < 256; i++) {
+    if (i >= totalSpan) break;
+    vec2 sampleUV = spanStartUV + step * float(i);
+    float b = brightness(texture2D(u_image, sampleUV).rgb);
+    if (b < bri) rank++;
+  }
+
+  // Resample at sorted position
+  vec2 sortedUV = spanStartUV + step * float(rank);
+  gl_FragColor = texture2D(u_image, sortedUV);
+}
+`,D={name:"pixel-sort",fragmentShader:P,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"}]},k=`precision mediump float;
+
+varying vec2 v_texCoord;
+
+uniform sampler2D u_image;
+uniform vec2 u_resolution;
+uniform float u_dotRadius;
+uniform float u_gridSize;
+uniform vec2 u_dotOffset;
+uniform vec3 u_bgColor;
+
+void main() {
+  vec2 uv = v_texCoord * u_resolution;
+
+  // Which grid cell this fragment belongs to
+  vec2 cell = floor(uv / u_gridSize);
+
+  // Cell origin in pixel space
+  vec2 cellOrigin = cell * u_gridSize;
+
+  // Dot center within the cell, shifted by u_dotOffset (0–1 range)
+  vec2 dotCenter = cellOrigin + u_dotOffset * u_gridSize;
+
+  // 4×4 multi-sample average color across the cell
+  vec3 avg = vec3(0.0);
+  for (int y = 0; y < 4; y++) {
+    for (int x = 0; x < 4; x++) {
+      vec2 sampleUV = (cellOrigin + (vec2(float(x), float(y)) + 0.5) * (u_gridSize / 4.0)) / u_resolution;
+      avg += texture2D(u_image, sampleUV).rgb;
+    }
+  }
+  avg /= 16.0;
+
+  // Wrapped (toroidal) distance from fragment to dot center within the cell
+  vec2 d = (uv - dotCenter) / u_gridSize;
+  d = fract(d + 0.5) - 0.5;  // wrap to [-0.5, 0.5]
+  float dist = length(d) * u_gridSize;
+
+  // Anti-aliased dot
+  float mask = smoothstep(u_dotRadius + 0.5, u_dotRadius - 0.5, dist);
+
+  vec3 result = mix(u_bgColor, avg, mask);
+
+  gl_FragColor = vec4(result, 1.0);
+}
+`,L={name:"dot-grid",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_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 d(e){m.set(e.name,e)}function v(e){return m.get(e)}function z(){return Array.from(m.keys())}d(A);d(U);d(D);d(L);var F=Object.defineProperty,O=Object.getOwnPropertyDescriptor,s=(e,t,o,a)=>{for(var n=a>1?void 0:a?O(t,o):t,r=e.length-1,u;r>=0;r--)(u=e[r])&&(n=(a?u(t,o,n):u(n))||n);return a&&n&&F(t,o,n),n};exports.SomeShadeImage=class 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=y(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(t){if(this._gl){if(t.has("src")&&this.src){this._loadImage(this.src);return}if(t.has("effect")){this._setupProgram(),this._renderFrame();return}this._renderFrame()}}disconnectedCallback(){var t;super.disconnectedCallback(),(t=this._resizeObserver)==null||t.disconnect(),this._cleanup()}_loadImage(t){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: ${t}`)},o.src=t}_uploadTexture(){!this._gl||!this._image||(this._textureInfo&&this._gl.deleteTexture(this._textureInfo.texture),this._textureInfo=C(this._gl,this._image))}_sizeCanvas(){if(!this._canvas||!this._textureInfo)return;const t=window.devicePixelRatio||1,o=this._textureInfo.width,a=this._textureInfo.height;this._canvas.width=o*t,this._canvas.height=a*t,this._canvas.style.aspectRatio=`${o} / ${a}`}_handleResize(){this._renderFrame()}_setupProgram(){if(!this._gl)return;const t=v(this.effect);if(!t){console.warn(`[some-shade] Unknown effect: ${this.effect}`);return}this._programInfo&&this._gl.deleteProgram(this._programInfo.program),this._currentEffect=t,this._programInfo=x(this._gl,t.vertexShader,t.fragmentShader),this._quadBuffer&&this._gl.deleteBuffer(this._quadBuffer),this._gl.useProgram(this._programInfo.program),this._quadBuffer=I(this._gl,this._programInfo)}_getUniformValues(){const t={};return this._textureInfo&&(t.u_resolution=[this._textureInfo.width*(window.devicePixelRatio||1),this._textureInfo.height*(window.devicePixelRatio||1)],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(t){const o=t.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 t=this._gl;if(!t||!this._programInfo||!this._textureInfo||!this._canvas)return;t.viewport(0,0,this._canvas.width,this._canvas.height),t.clearColor(0,0,0,0),t.clear(t.COLOR_BUFFER_BIT),t.useProgram(this._programInfo.program),t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,this._textureInfo.texture);const o=this._programInfo.uniformLocations.get("u_image");o&&t.uniform1i(o,0),E(t,this._programInfo,this._getUniformValues()),t.bindBuffer(t.ARRAY_BUFFER,this._quadBuffer);const a=4*Float32Array.BYTES_PER_ELEMENT,n=this._programInfo.attribLocations.get("a_position");n!==void 0&&n!==-1&&(t.enableVertexAttribArray(n),t.vertexAttribPointer(n,2,t.FLOAT,!1,a,0));const r=this._programInfo.attribLocations.get("a_texCoord");r!==void 0&&r!==-1&&(t.enableVertexAttribArray(r),t.vertexAttribPointer(r,2,t.FLOAT,!1,a,2*Float32Array.BYTES_PER_ELEMENT)),R(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)}};exports.SomeShadeImage.styles=c.css`
+    :host {
+      display: block;
+      position: relative;
+      overflow: hidden;
+    }
+    canvas, img {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+  `;s([i.property()],exports.SomeShadeImage.prototype,"src",2);s([i.property()],exports.SomeShadeImage.prototype,"effect",2);s([i.property({type:Number,attribute:"dot-radius"})],exports.SomeShadeImage.prototype,"dotRadius",2);s([i.property({type:Number,attribute:"grid-size"})],exports.SomeShadeImage.prototype,"gridSize",2);s([i.property({type:Number,attribute:"angle-c"})],exports.SomeShadeImage.prototype,"angleC",2);s([i.property({type:Number,attribute:"angle-m"})],exports.SomeShadeImage.prototype,"angleM",2);s([i.property({type:Number,attribute:"angle-y"})],exports.SomeShadeImage.prototype,"angleY",2);s([i.property({type:Number,attribute:"angle-k"})],exports.SomeShadeImage.prototype,"angleK",2);s([i.property({attribute:"duotone-color"})],exports.SomeShadeImage.prototype,"duotoneColor",2);s([i.property({type:Number})],exports.SomeShadeImage.prototype,"angle",2);s([i.property({type:Number})],exports.SomeShadeImage.prototype,"threshold",2);s([i.property({type:Number,attribute:"sort-direction"})],exports.SomeShadeImage.prototype,"sortDirection",2);s([i.property({type:Number,attribute:"sort-span"})],exports.SomeShadeImage.prototype,"sortSpan",2);s([i.property({type:Number,attribute:"dot-offset-x"})],exports.SomeShadeImage.prototype,"dotOffsetX",2);s([i.property({type:Number,attribute:"dot-offset-y"})],exports.SomeShadeImage.prototype,"dotOffsetY",2);s([i.property({attribute:"bg-color"})],exports.SomeShadeImage.prototype,"bgColor",2);s([i.state()],exports.SomeShadeImage.prototype,"_webglAvailable",2);exports.SomeShadeImage=s([i.customElement("some-shade-image")],exports.SomeShadeImage);exports.get=v;exports.list=z;exports.register=d;

package/dist/some-shade.es.js

@@ -0,0 +1,529 @@
+import { css as y, LitElement as E, html as p } from "lit";
+import { property as u, state as S, customElement as C } from "lit/decorators.js";
+function R(t) {
+  return t.getContext("webgl", {
+    alpha: !0,
+    premultipliedAlpha: !1,
+    preserveDrawingBuffer: !0
+  });
+}
+function v(t, e, a) {
+  const n = t.createShader(e);
+  if (!n) throw new Error("Failed to create shader");
+  if (t.shaderSource(n, a), t.compileShader(n), !t.getShaderParameter(n, t.COMPILE_STATUS)) {
+    const r = t.getShaderInfoLog(n);
+    throw t.deleteShader(n), new Error(`Shader compile error: ${r}`);
+  }
+  return n;
+}
+function T(t, e, a) {
+  const n = v(t, t.VERTEX_SHADER, e), r = v(t, t.FRAGMENT_SHADER, a), o = t.createProgram();
+  if (!o) throw new Error("Failed to create program");
+  if (t.attachShader(o, n), t.attachShader(o, r), t.linkProgram(o), !t.getProgramParameter(o, t.LINK_STATUS)) {
+    const l = t.getProgramInfoLog(o);
+    throw t.deleteProgram(o), new Error(`Program link error: ${l}`);
+  }
+  t.deleteShader(n), t.deleteShader(r);
+  const f = /* @__PURE__ */ new Map(), b = t.getProgramParameter(o, t.ACTIVE_ATTRIBUTES);
+  for (let l = 0; l < b; l++) {
+    const d = t.getActiveAttrib(o, l);
+    d && f.set(d.name, t.getAttribLocation(o, d.name));
+  }
+  const m = /* @__PURE__ */ new Map(), x = t.getProgramParameter(o, t.ACTIVE_UNIFORMS);
+  for (let l = 0; l < x; l++) {
+    const d = t.getActiveUniform(o, l);
+    if (d) {
+      const g = t.getUniformLocation(o, d.name);
+      g && m.set(d.name, g);
+    }
+  }
+  return { program: o, attribLocations: f, uniformLocations: m };
+}
+function A(t, e, a) {
+  for (const [n, r] of Object.entries(a)) {
+    const o = e.uniformLocations.get(n);
+    if (o) {
+      if (typeof r == "number")
+        t.uniform1f(o, r);
+      else if (Array.isArray(r))
+        switch (r.length) {
+          case 2:
+            t.uniform2fv(o, r);
+            break;
+          case 3:
+            t.uniform3fv(o, r);
+            break;
+          case 4:
+            t.uniform4fv(o, r);
+            break;
+        }
+    }
+  }
+}
+function w(t, e) {
+  const a = t.createTexture();
+  if (!a) throw new Error("Failed to create texture");
+  return t.bindTexture(t.TEXTURE_2D, a), 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: a, width: e.naturalWidth, height: e.naturalHeight };
+}
+function I(t, e) {
+  const a = new Float32Array([
+    // pos.x  pos.y  tex.s  tex.t
+    -1,
+    -1,
+    0,
+    1,
+    1,
+    -1,
+    1,
+    1,
+    -1,
+    1,
+    0,
+    0,
+    1,
+    1,
+    1,
+    0
+  ]), n = t.createBuffer();
+  if (!n) throw new Error("Failed to create buffer");
+  t.bindBuffer(t.ARRAY_BUFFER, n), t.bufferData(t.ARRAY_BUFFER, a, t.STATIC_DRAW);
+  const r = 4 * Float32Array.BYTES_PER_ELEMENT, o = e.attribLocations.get("a_position");
+  o !== void 0 && o !== -1 && (t.enableVertexAttribArray(o), t.vertexAttribPointer(o, 2, t.FLOAT, !1, r, 0));
+  const f = e.attribLocations.get("a_texCoord");
+  return f !== void 0 && f !== -1 && (t.enableVertexAttribArray(f), t.vertexAttribPointer(f, 2, t.FLOAT, !1, r, 2 * Float32Array.BYTES_PER_ELEMENT)), n;
+}
+function U(t) {
+  t.drawArrays(t.TRIANGLE_STRIP, 0, 4);
+}
+const D = `precision mediump float;
+
+varying vec2 v_texCoord;
+
+uniform sampler2D u_image;
+uniform vec2 u_resolution;
+uniform float u_dotRadius;
+uniform float u_gridSize;
+uniform float u_angleC;
+uniform float u_angleM;
+uniform float u_angleY;
+uniform float u_angleK;
+
+float halftone(vec2 uv, float angle, float channelValue, float gridSize, float dotRadius) {
+  float rad = radians(angle);
+  float s = sin(rad);
+  float c = cos(rad);
+  mat2 rot = mat2(c, -s, s, c);
+
+  vec2 rotUV = rot * uv;
+  vec2 grid = fract(rotUV / gridSize) - 0.5;
+
+  float dist = length(grid) * gridSize;
+  float radius = dotRadius * sqrt(channelValue);
+
+  return smoothstep(radius + 0.5, radius - 0.5, dist);
+}
+
+void main() {
+  vec2 uv = v_texCoord * u_resolution;
+  vec4 color = texture2D(u_image, v_texCoord);
+
+  float r = color.r;
+  float g = color.g;
+  float b = color.b;
+
+  // RGB to CMYK
+  float k = 1.0 - max(max(r, g), b);
+  float invK = 1.0 - k;
+  float cy = invK > 0.001 ? (invK - r) / invK : 0.0;
+  float ma = invK > 0.001 ? (invK - g) / invK : 0.0;
+  float ye = invK > 0.001 ? (invK - b) / invK : 0.0;
+
+  // Compute halftone dots for each channel
+  float cDot = halftone(uv, u_angleC, cy, u_gridSize, u_dotRadius);
+  float mDot = halftone(uv, u_angleM, ma, u_gridSize, u_dotRadius);
+  float yDot = halftone(uv, u_angleY, ye, u_gridSize, u_dotRadius);
+  float kDot = halftone(uv, u_angleK, k, u_gridSize, u_dotRadius);
+
+  // Subtractive color mixing on white paper
+  float outR = (1.0 - cDot) * (1.0 - kDot);
+  float outG = (1.0 - mDot) * (1.0 - kDot);
+  float outB = (1.0 - yDot) * (1.0 - kDot);
+
+  gl_FragColor = vec4(outR, outG, outB, color.a);
+}
+`, c = `attribute vec2 a_position;
+attribute vec2 a_texCoord;
+varying vec2 v_texCoord;
+
+void main() {
+  gl_Position = vec4(a_position, 0.0, 1.0);
+  v_texCoord = a_texCoord;
+}
+`, P = {
+  name: "halftone-cmyk",
+  fragmentShader: D,
+  vertexShader: c,
+  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;
+
+varying vec2 v_texCoord;
+
+uniform sampler2D u_image;
+uniform vec2 u_resolution;
+uniform float u_dotRadius;
+uniform float u_gridSize;
+uniform vec3 u_duotoneColor;
+uniform float u_angle;
+
+void main() {
+  vec2 uv = v_texCoord * u_resolution;
+  vec4 color = texture2D(u_image, v_texCoord);
+
+  // Convert to luminance
+  float luma = dot(color.rgb, vec3(0.299, 0.587, 0.114));
+  float darkness = 1.0 - luma;
+
+  // Rotate grid
+  float rad = radians(u_angle);
+  float s = sin(rad);
+  float c = cos(rad);
+  vec2 rotUV = mat2(c, -s, s, c) * uv;
+
+  vec2 grid = fract(rotUV / u_gridSize) - 0.5;
+  float dist = length(grid) * u_gridSize;
+  float radius = u_dotRadius * sqrt(darkness);
+  float dot = smoothstep(radius + 0.5, radius - 0.5, dist);
+
+  // Mix duotone color (paper) with black (dots)
+  vec3 result = mix(u_duotoneColor, vec3(0.0), dot);
+
+  gl_FragColor = vec4(result, color.a);
+}
+`, L = {
+  name: "halftone-duotone",
+  fragmentShader: k,
+  vertexShader: c,
+  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;
+
+varying vec2 v_texCoord;
+
+uniform sampler2D u_image;
+uniform vec2 u_resolution;
+uniform float u_threshold;
+uniform float u_direction;
+uniform float u_span;
+
+float brightness(vec3 c) {
+  return dot(c, vec3(0.299, 0.587, 0.114));
+}
+
+void main() {
+  vec2 uv = v_texCoord;
+  vec4 color = texture2D(u_image, uv);
+  float bri = brightness(color.rgb);
+
+  // Boundary pixel — pass through
+  if (bri < u_threshold) {
+    gl_FragColor = color;
+    return;
+  }
+
+  float rad = radians(u_direction);
+  vec2 dir = vec2(cos(rad), sin(rad));
+  vec2 step = dir / u_resolution;
+
+  int spanLen = int(u_span);
+
+  // Walk backward to find span start
+  int backCount = 0;
+  for (int i = 1; i < 256; i++) {
+    if (i >= spanLen) break;
+    vec2 sampleUV = uv - step * float(i);
+    if (sampleUV.x < 0.0 || sampleUV.x > 1.0 || sampleUV.y < 0.0 || sampleUV.y > 1.0) break;
+    float b = brightness(texture2D(u_image, sampleUV).rgb);
+    if (b < u_threshold) break;
+    backCount++;
+  }
+
+  // Walk forward to find span end
+  int fwdCount = 0;
+  for (int i = 1; i < 256; i++) {
+    if (i >= spanLen) break;
+    vec2 sampleUV = uv + step * float(i);
+    if (sampleUV.x < 0.0 || sampleUV.x > 1.0 || sampleUV.y < 0.0 || sampleUV.y > 1.0) break;
+    float b = brightness(texture2D(u_image, sampleUV).rgb);
+    if (b < u_threshold) break;
+    fwdCount++;
+  }
+
+  int totalSpan = backCount + 1 + fwdCount;
+  vec2 spanStartUV = uv - step * float(backCount);
+
+  // Count pixels in span that are darker than current (= rank)
+  int rank = 0;
+  for (int i = 0; i < 256; i++) {
+    if (i >= totalSpan) break;
+    vec2 sampleUV = spanStartUV + step * float(i);
+    float b = brightness(texture2D(u_image, sampleUV).rgb);
+    if (b < bri) rank++;
+  }
+
+  // Resample at sorted position
+  vec2 sortedUV = spanStartUV + step * float(rank);
+  gl_FragColor = texture2D(u_image, sortedUV);
+}
+`, F = {
+  name: "pixel-sort",
+  fragmentShader: z,
+  vertexShader: c,
+  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;
+
+varying vec2 v_texCoord;
+
+uniform sampler2D u_image;
+uniform vec2 u_resolution;
+uniform float u_dotRadius;
+uniform float u_gridSize;
+uniform vec2 u_dotOffset;
+uniform vec3 u_bgColor;
+
+void main() {
+  vec2 uv = v_texCoord * u_resolution;
+
+  // Which grid cell this fragment belongs to
+  vec2 cell = floor(uv / u_gridSize);
+
+  // Cell origin in pixel space
+  vec2 cellOrigin = cell * u_gridSize;
+
+  // Dot center within the cell, shifted by u_dotOffset (0–1 range)
+  vec2 dotCenter = cellOrigin + u_dotOffset * u_gridSize;
+
+  // 4×4 multi-sample average color across the cell
+  vec3 avg = vec3(0.0);
+  for (int y = 0; y < 4; y++) {
+    for (int x = 0; x < 4; x++) {
+      vec2 sampleUV = (cellOrigin + (vec2(float(x), float(y)) + 0.5) * (u_gridSize / 4.0)) / u_resolution;
+      avg += texture2D(u_image, sampleUV).rgb;
+    }
+  }
+  avg /= 16.0;
+
+  // Wrapped (toroidal) distance from fragment to dot center within the cell
+  vec2 d = (uv - dotCenter) / u_gridSize;
+  d = fract(d + 0.5) - 0.5;  // wrap to [-0.5, 0.5]
+  float dist = length(d) * u_gridSize;
+
+  // Anti-aliased dot
+  float mask = smoothstep(u_dotRadius + 0.5, u_dotRadius - 0.5, dist);
+
+  vec3 result = mix(u_bgColor, avg, mask);
+
+  gl_FragColor = vec4(result, 1.0);
+}
+`, O = {
+  name: "dot-grid",
+  fragmentShader: V,
+  vertexShader: c,
+  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);
+}
+function B(t) {
+  return h.get(t);
+}
+function X() {
+  return Array.from(h.keys());
+}
+_(P);
+_(L);
+_(F);
+_(O);
+var N = Object.defineProperty, M = Object.getOwnPropertyDescriptor, s = (t, e, a, n) => {
+  for (var r = n > 1 ? void 0 : n ? M(e, a) : e, o = t.length - 1, f; o >= 0; o--)
+    (f = t[o]) && (r = (n ? f(e, a, r) : f(r)) || r);
+  return n && r && N(e, a, r), r;
+};
+let i = class extends E {
+  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;
+  }
+  render() {
+    return this._webglAvailable ? p`<canvas></canvas>` : p`<img .src=${this.src} alt="" />`;
+  }
+  firstUpdated() {
+    if (this._webglAvailable && (this._canvas = this.shadowRoot.querySelector("canvas"), !!this._canvas)) {
+      if (this._gl = R(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(t) {
+    if (this._gl) {
+      if (t.has("src") && this.src) {
+        this._loadImage(this.src);
+        return;
+      }
+      if (t.has("effect")) {
+        this._setupProgram(), this._renderFrame();
+        return;
+      }
+      this._renderFrame();
+    }
+  }
+  disconnectedCallback() {
+    var t;
+    super.disconnectedCallback(), (t = this._resizeObserver) == null || t.disconnect(), this._cleanup();
+  }
+  _loadImage(t) {
+    const e = new Image();
+    e.crossOrigin = "anonymous", e.onload = () => {
+      this._image = e, this._uploadTexture(), this._sizeCanvas(), this._setupProgram(), this._renderFrame();
+    }, e.onerror = () => {
+      console.warn(`[some-shade] Failed to load image: ${t}`);
+    }, e.src = t;
+  }
+  _uploadTexture() {
+    !this._gl || !this._image || (this._textureInfo && this._gl.deleteTexture(this._textureInfo.texture), this._textureInfo = w(this._gl, this._image));
+  }
+  _sizeCanvas() {
+    if (!this._canvas || !this._textureInfo) return;
+    const t = window.devicePixelRatio || 1, e = this._textureInfo.width, a = this._textureInfo.height;
+    this._canvas.width = e * t, this._canvas.height = a * t, this._canvas.style.aspectRatio = `${e} / ${a}`;
+  }
+  _handleResize() {
+    this._renderFrame();
+  }
+  _setupProgram() {
+    if (!this._gl) return;
+    const t = B(this.effect);
+    if (!t) {
+      console.warn(`[some-shade] Unknown effect: ${this.effect}`);
+      return;
+    }
+    this._programInfo && this._gl.deleteProgram(this._programInfo.program), this._currentEffect = t, this._programInfo = T(this._gl, t.vertexShader, t.fragmentShader), this._quadBuffer && this._gl.deleteBuffer(this._quadBuffer), this._gl.useProgram(this._programInfo.program), this._quadBuffer = I(this._gl, this._programInfo);
+  }
+  _getUniformValues() {
+    const t = {};
+    return this._textureInfo && (t.u_resolution = [
+      this._textureInfo.width * (window.devicePixelRatio || 1),
+      this._textureInfo.height * (window.devicePixelRatio || 1)
+    ], 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(t) {
+    const e = t.replace("#", ""), a = parseInt(e.substring(0, 2), 16) / 255, n = parseInt(e.substring(2, 4), 16) / 255, r = parseInt(e.substring(4, 6), 16) / 255;
+    return [a, n, r];
+  }
+  _renderFrame() {
+    const t = this._gl;
+    if (!t || !this._programInfo || !this._textureInfo || !this._canvas) return;
+    t.viewport(0, 0, this._canvas.width, this._canvas.height), t.clearColor(0, 0, 0, 0), t.clear(t.COLOR_BUFFER_BIT), t.useProgram(this._programInfo.program), t.activeTexture(t.TEXTURE0), t.bindTexture(t.TEXTURE_2D, this._textureInfo.texture);
+    const e = this._programInfo.uniformLocations.get("u_image");
+    e && t.uniform1i(e, 0), A(t, this._programInfo, this._getUniformValues()), t.bindBuffer(t.ARRAY_BUFFER, this._quadBuffer);
+    const a = 4 * Float32Array.BYTES_PER_ELEMENT, n = this._programInfo.attribLocations.get("a_position");
+    n !== void 0 && n !== -1 && (t.enableVertexAttribArray(n), t.vertexAttribPointer(n, 2, t.FLOAT, !1, a, 0));
+    const r = this._programInfo.attribLocations.get("a_texCoord");
+    r !== void 0 && r !== -1 && (t.enableVertexAttribArray(r), t.vertexAttribPointer(r, 2, t.FLOAT, !1, a, 2 * Float32Array.BYTES_PER_ELEMENT)), U(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);
+  }
+};
+i.styles = y`
+    :host {
+      display: block;
+      position: relative;
+      overflow: hidden;
+    }
+    canvas, img {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+  `;
+s([
+  u()
+], i.prototype, "src", 2);
+s([
+  u()
+], i.prototype, "effect", 2);
+s([
+  u({ type: Number, attribute: "dot-radius" })
+], i.prototype, "dotRadius", 2);
+s([
+  u({ type: Number, attribute: "grid-size" })
+], i.prototype, "gridSize", 2);
+s([
+  u({ type: Number, attribute: "angle-c" })
+], i.prototype, "angleC", 2);
+s([
+  u({ type: Number, attribute: "angle-m" })
+], i.prototype, "angleM", 2);
+s([
+  u({ type: Number, attribute: "angle-y" })
+], i.prototype, "angleY", 2);
+s([
+  u({ type: Number, attribute: "angle-k" })
+], i.prototype, "angleK", 2);
+s([
+  u({ attribute: "duotone-color" })
+], i.prototype, "duotoneColor", 2);
+s([
+  u({ type: Number })
+], i.prototype, "angle", 2);
+s([
+  u({ type: Number })
+], i.prototype, "threshold", 2);
+s([
+  u({ type: Number, attribute: "sort-direction" })
+], i.prototype, "sortDirection", 2);
+s([
+  u({ type: Number, attribute: "sort-span" })
+], i.prototype, "sortSpan", 2);
+s([
+  u({ type: Number, attribute: "dot-offset-x" })
+], i.prototype, "dotOffsetX", 2);
+s([
+  u({ type: Number, attribute: "dot-offset-y" })
+], i.prototype, "dotOffsetY", 2);
+s([
+  u({ attribute: "bg-color" })
+], i.prototype, "bgColor", 2);
+s([
+  S()
+], i.prototype, "_webglAvailable", 2);
+i = s([
+  C("some-shade-image")
+], i);
+export {
+  i as SomeShadeImage,
+  B as get,
+  X as list,
+  _ as register
+};

package/dist/some-shade.umd.js

@@ -0,0 +1,225 @@
+(function(n,d){typeof exports=="object"&&typeof module<"u"?d(exports,require("lit"),require("lit/decorators.js")):typeof define=="function"&&define.amd?define(["exports","lit","lit/decorators.js"],d):(n=typeof globalThis<"u"?globalThis:n||self,d(n.SomeShade={},n.Lit,n.LitDecorators))})(this,(function(n,d,s){"use strict";function S(e){return e.getContext("webgl",{alpha:!0,premultipliedAlpha:!1,preserveDrawingBuffer:!0})}function g(e,t,o){const i=e.createShader(t);if(!i)throw new Error("Failed to create shader");if(e.shaderSource(i,o),e.compileShader(i),!e.getShaderParameter(i,e.COMPILE_STATUS)){const a=e.getShaderInfoLog(i);throw e.deleteShader(i),new Error(`Shader compile error: ${a}`)}return i}function y(e,t,o){const i=g(e,e.VERTEX_SHADER,t),a=g(e,e.FRAGMENT_SHADER,o),r=e.createProgram();if(!r)throw new Error("Failed to create program");if(e.attachShader(r,i),e.attachShader(r,a),e.linkProgram(r),!e.getProgramParameter(r,e.LINK_STATUS)){const l=e.getProgramInfoLog(r);throw e.deleteProgram(r),new Error(`Program link error: ${l}`)}e.deleteShader(i),e.deleteShader(a);const f=new Map,L=e.getProgramParameter(r,e.ACTIVE_ATTRIBUTES);for(let l=0;l<L;l++){const c=e.getActiveAttrib(r,l);c&&f.set(c.name,e.getAttribLocation(r,c.name))}const v=new Map,z=e.getProgramParameter(r,e.ACTIVE_UNIFORMS);for(let l=0;l<z;l++){const c=e.getActiveUniform(r,l);if(c){const b=e.getUniformLocation(r,c.name);b&&v.set(c.name,b)}}return{program:r,attribLocations:f,uniformLocations:v}}function E(e,t,o){for(const[i,a]of Object.entries(o)){const r=t.uniformLocations.get(i);if(r){if(typeof a=="number")e.uniform1f(r,a);else if(Array.isArray(a))switch(a.length){case 2:e.uniform2fv(r,a);break;case 3:e.uniform3fv(r,a);break;case 4:e.uniform4fv(r,a);break}}}}function x(e,t){const o=e.createTexture();if(!o)throw new Error("Failed to create texture");return e.bindTexture(e.TEXTURE_2D,o),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t),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:o,width:t.naturalWidth,height:t.naturalHeight}}function C(e,t){const o=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,o,e.STATIC_DRAW);const a=4*Float32Array.BYTES_PER_ELEMENT,r=t.attribLocations.get("a_position");r!==void 0&&r!==-1&&(e.enableVertexAttribArray(r),e.vertexAttribPointer(r,2,e.FLOAT,!1,a,0));const f=t.attribLocations.get("a_texCoord");return f!==void 0&&f!==-1&&(e.enableVertexAttribArray(f),e.vertexAttribPointer(f,2,e.FLOAT,!1,a,2*Float32Array.BYTES_PER_ELEMENT)),i}function I(e){e.drawArrays(e.TRIANGLE_STRIP,0,4)}const R=`precision mediump float;
+
+varying vec2 v_texCoord;
+
+uniform sampler2D u_image;
+uniform vec2 u_resolution;
+uniform float u_dotRadius;
+uniform float u_gridSize;
+uniform float u_angleC;
+uniform float u_angleM;
+uniform float u_angleY;
+uniform float u_angleK;
+
+float halftone(vec2 uv, float angle, float channelValue, float gridSize, float dotRadius) {
+  float rad = radians(angle);
+  float s = sin(rad);
+  float c = cos(rad);
+  mat2 rot = mat2(c, -s, s, c);
+
+  vec2 rotUV = rot * uv;
+  vec2 grid = fract(rotUV / gridSize) - 0.5;
+
+  float dist = length(grid) * gridSize;
+  float radius = dotRadius * sqrt(channelValue);
+
+  return smoothstep(radius + 0.5, radius - 0.5, dist);
+}
+
+void main() {
+  vec2 uv = v_texCoord * u_resolution;
+  vec4 color = texture2D(u_image, v_texCoord);
+
+  float r = color.r;
+  float g = color.g;
+  float b = color.b;
+
+  // RGB to CMYK
+  float k = 1.0 - max(max(r, g), b);
+  float invK = 1.0 - k;
+  float cy = invK > 0.001 ? (invK - r) / invK : 0.0;
+  float ma = invK > 0.001 ? (invK - g) / invK : 0.0;
+  float ye = invK > 0.001 ? (invK - b) / invK : 0.0;
+
+  // Compute halftone dots for each channel
+  float cDot = halftone(uv, u_angleC, cy, u_gridSize, u_dotRadius);
+  float mDot = halftone(uv, u_angleM, ma, u_gridSize, u_dotRadius);
+  float yDot = halftone(uv, u_angleY, ye, u_gridSize, u_dotRadius);
+  float kDot = halftone(uv, u_angleK, k, u_gridSize, u_dotRadius);
+
+  // Subtractive color mixing on white paper
+  float outR = (1.0 - cDot) * (1.0 - kDot);
+  float outG = (1.0 - mDot) * (1.0 - kDot);
+  float outB = (1.0 - yDot) * (1.0 - kDot);
+
+  gl_FragColor = vec4(outR, outG, outB, color.a);
+}
+`,m=`attribute vec2 a_position;
+attribute vec2 a_texCoord;
+varying vec2 v_texCoord;
+
+void main() {
+  gl_Position = vec4(a_position, 0.0, 1.0);
+  v_texCoord = a_texCoord;
+}
+`,T={name:"halftone-cmyk",fragmentShader:R,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"}]},A={name:"halftone-duotone",fragmentShader:`precision mediump float;
+
+varying vec2 v_texCoord;
+
+uniform sampler2D u_image;
+uniform vec2 u_resolution;
+uniform float u_dotRadius;
+uniform float u_gridSize;
+uniform vec3 u_duotoneColor;
+uniform float u_angle;
+
+void main() {
+  vec2 uv = v_texCoord * u_resolution;
+  vec4 color = texture2D(u_image, v_texCoord);
+
+  // Convert to luminance
+  float luma = dot(color.rgb, vec3(0.299, 0.587, 0.114));
+  float darkness = 1.0 - luma;
+
+  // Rotate grid
+  float rad = radians(u_angle);
+  float s = sin(rad);
+  float c = cos(rad);
+  vec2 rotUV = mat2(c, -s, s, c) * uv;
+
+  vec2 grid = fract(rotUV / u_gridSize) - 0.5;
+  float dist = length(grid) * u_gridSize;
+  float radius = u_dotRadius * sqrt(darkness);
+  float dot = smoothstep(radius + 0.5, radius - 0.5, dist);
+
+  // Mix duotone color (paper) with black (dots)
+  vec3 result = mix(u_duotoneColor, vec3(0.0), dot);
+
+  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"}]},w={name:"pixel-sort",fragmentShader:`precision mediump float;
+
+varying vec2 v_texCoord;
+
+uniform sampler2D u_image;
+uniform vec2 u_resolution;
+uniform float u_threshold;
+uniform float u_direction;
+uniform float u_span;
+
+float brightness(vec3 c) {
+  return dot(c, vec3(0.299, 0.587, 0.114));
+}
+
+void main() {
+  vec2 uv = v_texCoord;
+  vec4 color = texture2D(u_image, uv);
+  float bri = brightness(color.rgb);
+
+  // Boundary pixel — pass through
+  if (bri < u_threshold) {
+    gl_FragColor = color;
+    return;
+  }
+
+  float rad = radians(u_direction);
+  vec2 dir = vec2(cos(rad), sin(rad));
+  vec2 step = dir / u_resolution;
+
+  int spanLen = int(u_span);
+
+  // Walk backward to find span start
+  int backCount = 0;
+  for (int i = 1; i < 256; i++) {
+    if (i >= spanLen) break;
+    vec2 sampleUV = uv - step * float(i);
+    if (sampleUV.x < 0.0 || sampleUV.x > 1.0 || sampleUV.y < 0.0 || sampleUV.y > 1.0) break;
+    float b = brightness(texture2D(u_image, sampleUV).rgb);
+    if (b < u_threshold) break;
+    backCount++;
+  }
+
+  // Walk forward to find span end
+  int fwdCount = 0;
+  for (int i = 1; i < 256; i++) {
+    if (i >= spanLen) break;
+    vec2 sampleUV = uv + step * float(i);
+    if (sampleUV.x < 0.0 || sampleUV.x > 1.0 || sampleUV.y < 0.0 || sampleUV.y > 1.0) break;
+    float b = brightness(texture2D(u_image, sampleUV).rgb);
+    if (b < u_threshold) break;
+    fwdCount++;
+  }
+
+  int totalSpan = backCount + 1 + fwdCount;
+  vec2 spanStartUV = uv - step * float(backCount);
+
+  // Count pixels in span that are darker than current (= rank)
+  int rank = 0;
+  for (int i = 0; i < 256; i++) {
+    if (i >= totalSpan) break;
+    vec2 sampleUV = spanStartUV + step * float(i);
+    float b = brightness(texture2D(u_image, sampleUV).rgb);
+    if (b < bri) rank++;
+  }
+
+  // Resample at sorted position
+  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"}]},U={name:"dot-grid",fragmentShader:`precision mediump float;
+
+varying vec2 v_texCoord;
+
+uniform sampler2D u_image;
+uniform vec2 u_resolution;
+uniform float u_dotRadius;
+uniform float u_gridSize;
+uniform vec2 u_dotOffset;
+uniform vec3 u_bgColor;
+
+void main() {
+  vec2 uv = v_texCoord * u_resolution;
+
+  // Which grid cell this fragment belongs to
+  vec2 cell = floor(uv / u_gridSize);
+
+  // Cell origin in pixel space
+  vec2 cellOrigin = cell * u_gridSize;
+
+  // Dot center within the cell, shifted by u_dotOffset (0–1 range)
+  vec2 dotCenter = cellOrigin + u_dotOffset * u_gridSize;
+
+  // 4×4 multi-sample average color across the cell
+  vec3 avg = vec3(0.0);
+  for (int y = 0; y < 4; y++) {
+    for (int x = 0; x < 4; x++) {
+      vec2 sampleUV = (cellOrigin + (vec2(float(x), float(y)) + 0.5) * (u_gridSize / 4.0)) / u_resolution;
+      avg += texture2D(u_image, sampleUV).rgb;
+    }
+  }
+  avg /= 16.0;
+
+  // Wrapped (toroidal) distance from fragment to dot center within the cell
+  vec2 d = (uv - dotCenter) / u_gridSize;
+  d = fract(d + 0.5) - 0.5;  // wrap to [-0.5, 0.5]
+  float dist = length(d) * u_gridSize;
+
+  // Anti-aliased dot
+  float mask = smoothstep(u_dotRadius + 0.5, u_dotRadius - 0.5, dist);
+
+  vec3 result = mix(u_bgColor, avg, mask);
+
+  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"}]},_=new Map;function h(e){_.set(e.name,e)}function p(e){return _.get(e)}function D(){return Array.from(_.keys())}h(T),h(A),h(w),h(U);var P=Object.defineProperty,k=Object.getOwnPropertyDescriptor,u=(e,t,o,i)=>{for(var a=i>1?void 0:i?k(t,o):t,r=e.length-1,f;r>=0;r--)(f=e[r])&&(a=(i?f(t,o,a):f(a))||a);return i&&a&&P(t,o,a),a};n.SomeShadeImage=class extends d.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?d.html`<canvas></canvas>`:d.html`<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)}}updated(t){if(this._gl){if(t.has("src")&&this.src){this._loadImage(this.src);return}if(t.has("effect")){this._setupProgram(),this._renderFrame();return}this._renderFrame()}}disconnectedCallback(){var t;super.disconnectedCallback(),(t=this._resizeObserver)==null||t.disconnect(),this._cleanup()}_loadImage(t){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: ${t}`)},o.src=t}_uploadTexture(){!this._gl||!this._image||(this._textureInfo&&this._gl.deleteTexture(this._textureInfo.texture),this._textureInfo=x(this._gl,this._image))}_sizeCanvas(){if(!this._canvas||!this._textureInfo)return;const t=window.devicePixelRatio||1,o=this._textureInfo.width,i=this._textureInfo.height;this._canvas.width=o*t,this._canvas.height=i*t,this._canvas.style.aspectRatio=`${o} / ${i}`}_handleResize(){this._renderFrame()}_setupProgram(){if(!this._gl)return;const t=p(this.effect);if(!t){console.warn(`[some-shade] Unknown effect: ${this.effect}`);return}this._programInfo&&this._gl.deleteProgram(this._programInfo.program),this._currentEffect=t,this._programInfo=y(this._gl,t.vertexShader,t.fragmentShader),this._quadBuffer&&this._gl.deleteBuffer(this._quadBuffer),this._gl.useProgram(this._programInfo.program),this._quadBuffer=C(this._gl,this._programInfo)}_getUniformValues(){const t={};return this._textureInfo&&(t.u_resolution=[this._textureInfo.width*(window.devicePixelRatio||1),this._textureInfo.height*(window.devicePixelRatio||1)],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(t){const o=t.replace("#",""),i=parseInt(o.substring(0,2),16)/255,a=parseInt(o.substring(2,4),16)/255,r=parseInt(o.substring(4,6),16)/255;return[i,a,r]}_renderFrame(){const t=this._gl;if(!t||!this._programInfo||!this._textureInfo||!this._canvas)return;t.viewport(0,0,this._canvas.width,this._canvas.height),t.clearColor(0,0,0,0),t.clear(t.COLOR_BUFFER_BIT),t.useProgram(this._programInfo.program),t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,this._textureInfo.texture);const o=this._programInfo.uniformLocations.get("u_image");o&&t.uniform1i(o,0),E(t,this._programInfo,this._getUniformValues()),t.bindBuffer(t.ARRAY_BUFFER,this._quadBuffer);const i=4*Float32Array.BYTES_PER_ELEMENT,a=this._programInfo.attribLocations.get("a_position");a!==void 0&&a!==-1&&(t.enableVertexAttribArray(a),t.vertexAttribPointer(a,2,t.FLOAT,!1,i,0));const r=this._programInfo.attribLocations.get("a_texCoord");r!==void 0&&r!==-1&&(t.enableVertexAttribArray(r),t.vertexAttribPointer(r,2,t.FLOAT,!1,i,2*Float32Array.BYTES_PER_ELEMENT)),I(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)}},n.SomeShadeImage.styles=d.css`
+    :host {
+      display: block;
+      position: relative;
+      overflow: hidden;
+    }
+    canvas, img {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+  `,u([s.property()],n.SomeShadeImage.prototype,"src",2),u([s.property()],n.SomeShadeImage.prototype,"effect",2),u([s.property({type:Number,attribute:"dot-radius"})],n.SomeShadeImage.prototype,"dotRadius",2),u([s.property({type:Number,attribute:"grid-size"})],n.SomeShadeImage.prototype,"gridSize",2),u([s.property({type:Number,attribute:"angle-c"})],n.SomeShadeImage.prototype,"angleC",2),u([s.property({type:Number,attribute:"angle-m"})],n.SomeShadeImage.prototype,"angleM",2),u([s.property({type:Number,attribute:"angle-y"})],n.SomeShadeImage.prototype,"angleY",2),u([s.property({type:Number,attribute:"angle-k"})],n.SomeShadeImage.prototype,"angleK",2),u([s.property({attribute:"duotone-color"})],n.SomeShadeImage.prototype,"duotoneColor",2),u([s.property({type:Number})],n.SomeShadeImage.prototype,"angle",2),u([s.property({type:Number})],n.SomeShadeImage.prototype,"threshold",2),u([s.property({type:Number,attribute:"sort-direction"})],n.SomeShadeImage.prototype,"sortDirection",2),u([s.property({type:Number,attribute:"sort-span"})],n.SomeShadeImage.prototype,"sortSpan",2),u([s.property({type:Number,attribute:"dot-offset-x"})],n.SomeShadeImage.prototype,"dotOffsetX",2),u([s.property({type:Number,attribute:"dot-offset-y"})],n.SomeShadeImage.prototype,"dotOffsetY",2),u([s.property({attribute:"bg-color"})],n.SomeShadeImage.prototype,"bgColor",2),u([s.state()],n.SomeShadeImage.prototype,"_webglAvailable",2),n.SomeShadeImage=u([s.customElement("some-shade-image")],n.SomeShadeImage),n.get=p,n.list=D,n.register=h,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@johnfmorton/some-shade",
+  "version": "0.1.0-beta.1",
+  "type": "module",
+  "main": "./dist/some-shade.cjs.js",
+  "module": "./dist/some-shade.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/some-shade.es.js",
+      "require": "./dist/some-shade.cjs.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "lit": "^3.2.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.5.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.0.0"
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build"
+  }
+}