@paper-design/shaders 0.0.0-canary.b448849 → 0.0.0-canary.b4f628d

package/dist/html-in-canvas.d.ts

@@ -15,24 +15,6 @@
  *
  * The HTML texture always matches the canvas size, so shaders sample it like any canvas-sized texture: a resize
  * captures the HTML again right away instead of waiting for the next paint.
- *
- * Shaders nested in that HTML don't get a canvas of their own. Each one renders into a framebuffer of the root
- * shader's context, and is pasted into its parent's HTML texture where it's laid out:
- *
- * <div data-paper-shader>                 ← root, owns the only canvas and context
- *   <canvas content="drawable" layoutsubtree>
- *     <div drawable>
- *       <div data-paper-shader>           ← nested, renders into a framebuffer
- *         <div drawable>…</div>           ← captured on its own, left out of the root capture
- *       </div>
- *       <img />
- *       <div data-paper-shader></div>     ← nested, without HTML
- *     </div>
- *   </canvas>
- * </div>
- *
- * A nested shader is pasted over everything else in its parent's HTML, and the browser doesn't apply the transforms,
- * opacity and clipping of the elements between them to it.
  */
 export interface DrawableCanvasElement extends HTMLCanvasElement {
     requestPaint(): void;
@@ -44,51 +26,10 @@ export declare function isHtmlInCanvasSupported(): boolean;
 /** `<img>` stays a static image uniform. nodeType instead of `instanceof` works across iframes */
 export declare function isHtmlUniform(value: unknown): value is HTMLElement;
 export declare function findReactCanvas(values: unknown[], parentElement: Element): DrawableCanvasElement | null;
-/**
- * The canvas of the root shader whose HTML holds this shader element, if it can render it. Its own children have to
- * be drawable HTML or HTML uniforms, anything else stays on top of a canvas of its own
- */
-export declare function findHostCanvas(parentElement: HTMLElement, values: unknown[]): DrawableCanvasElement | null;
-/** The layout position of the element's border box within the padding box of a positioned ancestor, in CSS px */
-export declare function getOffsetWithin(element: HTMLElement, ancestor: Element): {
-    x: number;
-    y: number;
-};
-/** Drawing buffer size of what HTML is captured into, and the CSS size of the element it covers */
-export interface HtmlCaptureBox {
-    width: number;
-    height: number;
-    clientWidth: number;
-    clientHeight: number;
-}
 /** Moves the element into the canvas, returns a function that puts it back */
 export declare function attachHtml(canvas: DrawableCanvasElement, element: HTMLElement): () => void;
 /**
- * Captures the element into the bound texture, sized to the drawing buffer of the box. The texture is only reallocated
+ * Captures the element into the bound texture, sized to the canvas drawing buffer. The texture is only reallocated
  * (and so cleared) when its size or the drawn area changes; returns that layout to pass back in next time
  */
-export declare function drawHtml(gl: WebGL2RenderingContext, box: HtmlCaptureBox, element: HTMLElement, lastLayout?: string): string;
-/** A texture to render into, the output of a nested shader or the HTML with nested shaders pasted in */
-export interface RenderTarget {
-    texture: WebGLTexture;
-    framebuffer: WebGLFramebuffer;
-    width: number;
-    height: number;
-}
-/** Creates the render target, or reallocates its texture when the size changes */
-export declare function resizeRenderTarget(gl: WebGL2RenderingContext, target: RenderTarget | undefined, width: number, height: number): RenderTarget;
-export declare function deleteRenderTarget(gl: WebGL2RenderingContext, target: RenderTarget | undefined): void;
-/** Corner radius of the element's border box in CSS px, the top left one for all corners */
-export declare function getBorderRadius(element: HTMLElement): number;
-/** A texture pasted into a render target */
-export interface PastedTexture {
-    texture: WebGLTexture;
-    /** Position and size in the target's pixels, from its top left */
-    rect: [number, number, number, number];
-    /** Corner radius in the target's pixels */
-    radius?: number;
-    /** Textures rendered by a shader have their first row at the bottom, HTML captures at the top */
-    isRendered?: boolean;
-}
-/** Draws the HTML capture into the target as is, then the textures over it with their rounded corners */
-export declare function pasteTextures(gl: WebGL2RenderingContext, target: RenderTarget, base: WebGLTexture, textures: PastedTexture[]): void;
+export declare function drawHtml(gl: WebGL2RenderingContext, canvas: DrawableCanvasElement, element: HTMLElement, lastLayout?: string): string;

package/dist/html-in-canvas.js

@@ -3,7 +3,6 @@
  *       https://github.com/paper-design/shaders       *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
-import { createProgram } from "./webgl-program.js";
 function isHtmlInCanvasSupported() {
   return typeof HTMLCanvasElement !== "undefined" && "requestPaint" in HTMLCanvasElement.prototype && typeof WebGL2RenderingContext !== "undefined" && "texElementSubImage2D" in WebGL2RenderingContext.prototype;
 }
@@ -19,33 +18,6 @@ function findReactCanvas(values, parentElement) {
   }
   return null;
 }
-function findHostCanvas(parentElement, values) {
-  const canvas = parentElement.parentElement?.closest("canvas");
-  if (!canvas || !isHtmlInCanvasSupported() || canvas.getAttribute("content") !== "drawable") {
-    return null;
-  }
-  const drawable = parentElement.parentElement.closest("[drawable]");
-  if (!drawable || !canvas.contains(drawable)) {
-    return null;
-  }
-  for (const child of Array.from(parentElement.children)) {
-    if (!child.hasAttribute("drawable") && !values.includes(child)) {
-      return null;
-    }
-  }
-  return canvas;
-}
-function getOffsetWithin(element, ancestor) {
-  let x = element.offsetLeft;
-  let y = element.offsetTop;
-  let current = element.offsetParent;
-  while (current && current !== ancestor) {
-    x += current.offsetLeft + current.clientLeft;
-    y += current.offsetTop + current.clientTop;
-    current = current.offsetParent;
-  }
-  return { x, y };
-}
 function attachHtml(canvas, element) {
   if (element.parentElement === canvas) {
     return () => {
@@ -66,17 +38,17 @@ function attachHtml(canvas, element) {
     }
   };
 }
-function drawHtml(gl, box, element, lastLayout) {
-  const width = Math.max(1, box.width);
-  const height = Math.max(1, box.height);
-  const scaleX = width / Math.max(1, box.clientWidth);
-  const scaleY = height / Math.max(1, box.clientHeight);
+function drawHtml(gl, canvas, element, lastLayout) {
+  const width = Math.max(1, canvas.width);
+  const height = Math.max(1, canvas.height);
+  const scaleX = width / Math.max(1, canvas.clientWidth);
+  const scaleY = height / Math.max(1, canvas.clientHeight);
   const left = element.offsetLeft;
   const top = element.offsetTop;
   const visibleLeft = Math.max(0, left);
   const visibleTop = Math.max(0, top);
-  const visibleRight = Math.min(box.clientWidth, left + element.offsetWidth);
-  const visibleBottom = Math.min(box.clientHeight, top + element.offsetHeight);
+  const visibleRight = Math.min(canvas.clientWidth, left + element.offsetWidth);
+  const visibleBottom = Math.min(canvas.clientHeight, top + element.offsetHeight);
   const x0 = Math.round(visibleLeft * scaleX);
   const y0 = Math.round(visibleTop * scaleY);
   const x1 = Math.min(width, Math.round(visibleRight * scaleX));
@@ -97,140 +69,11 @@ function drawHtml(gl, box, element, lastLayout) {
   }
   return layout;
 }
-function resizeRenderTarget(gl, target, width, height) {
-  if (target && target.width === width && target.height === height) {
-    return target;
-  }
-  const texture = target?.texture ?? gl.createTexture();
-  gl.bindTexture(gl.TEXTURE_2D, texture);
-  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-  gl.bindTexture(gl.TEXTURE_2D, null);
-  const framebuffer = target?.framebuffer ?? gl.createFramebuffer();
-  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
-  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
-  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-  return { texture, framebuffer, width, height };
-}
-function deleteRenderTarget(gl, target) {
-  if (!target) return;
-  gl.deleteTexture(target.texture);
-  gl.deleteFramebuffer(target.framebuffer);
-}
-function getBorderRadius(element) {
-  const radius = parseFloat(getComputedStyle(element).borderTopLeftRadius) || 0;
-  return Math.min(radius, element.offsetWidth / 2, element.offsetHeight / 2);
-}
-const pasteVertexShader = `#version 300 es
-layout(location = 0) in vec4 a_position;
-
-uniform vec4 u_rect;
-uniform vec2 u_targetSize;
-uniform float u_flipY;
-
-out vec2 v_uv;
-out vec2 v_px;
-
-void main() {
-  vec2 corner = a_position.xy * .5 + .5;
-  v_uv = vec2(corner.x, mix(corner.y, 1. - corner.y, u_flipY));
-  v_px = corner * u_rect.zw;
-  vec2 position = (u_rect.xy + corner * u_rect.zw) / u_targetSize;
-  gl_Position = vec4(position * 2. - 1., 0., 1.);
-}
-`;
-const pasteFragmentShader = `#version 300 es
-precision highp float;
-
-uniform sampler2D u_texture;
-uniform vec4 u_rect;
-uniform float u_radius;
-
-in vec2 v_uv;
-in vec2 v_px;
-
-out vec4 fragColor;
-
-void main() {
-  vec2 size = u_rect.zw;
-  vec2 halfSize = .5 * size;
-  vec2 q = abs(v_px - halfSize) - halfSize + u_radius;
-  float distance = length(max(q, 0.)) + min(max(q.x, q.y), 0.) - u_radius;
-  float mask = clamp(.5 - distance, 0., 1.);
-  fragColor = texture(u_texture, v_uv) * mask;
-}
-`;
-const pastePrograms = /* @__PURE__ */ new WeakMap();
-function getPasteProgram(gl) {
-  if (pastePrograms.has(gl)) {
-    return pastePrograms.get(gl);
-  }
-  const program = createProgram(gl, pasteVertexShader, pasteFragmentShader);
-  if (!program) {
-    pastePrograms.set(gl, null);
-    return null;
-  }
-  const vertexArray = gl.createVertexArray();
-  gl.bindVertexArray(vertexArray);
-  gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
-  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW);
-  gl.enableVertexAttribArray(0);
-  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
-  gl.bindVertexArray(null);
-  const location = (name) => gl.getUniformLocation(program, name);
-  const paste = {
-    program,
-    vertexArray,
-    locations: {
-      u_texture: location("u_texture"),
-      u_rect: location("u_rect"),
-      u_targetSize: location("u_targetSize"),
-      u_flipY: location("u_flipY"),
-      u_radius: location("u_radius")
-    }
-  };
-  pastePrograms.set(gl, paste);
-  return paste;
-}
-function pasteTextures(gl, target, base, textures) {
-  const paste = getPasteProgram(gl);
-  if (!paste) return;
-  gl.bindFramebuffer(gl.FRAMEBUFFER, target.framebuffer);
-  gl.viewport(0, 0, target.width, target.height);
-  gl.useProgram(paste.program);
-  gl.bindVertexArray(paste.vertexArray);
-  gl.activeTexture(gl.TEXTURE0);
-  gl.uniform1i(paste.locations.u_texture, 0);
-  gl.uniform2f(paste.locations.u_targetSize, target.width, target.height);
-  const draw = ({ texture, rect, radius = 0, isRendered = false }) => {
-    gl.bindTexture(gl.TEXTURE_2D, texture);
-    gl.uniform4fv(paste.locations.u_rect, rect);
-    gl.uniform1f(paste.locations.u_radius, radius);
-    gl.uniform1f(paste.locations.u_flipY, isRendered ? 1 : 0);
-    gl.drawArrays(gl.TRIANGLES, 0, 6);
-  };
-  draw({ texture: base, rect: [0, 0, target.width, target.height] });
-  gl.enable(gl.BLEND);
-  gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
-  textures.forEach(draw);
-  gl.disable(gl.BLEND);
-  gl.bindTexture(gl.TEXTURE_2D, null);
-  gl.bindVertexArray(null);
-}
 export {
   attachHtml,
-  deleteRenderTarget,
   drawHtml,
-  findHostCanvas,
   findReactCanvas,
-  getBorderRadius,
-  getOffsetWithin,
   isHtmlInCanvasSupported,
-  isHtmlUniform,
-  pasteTextures,
-  resizeRenderTarget
+  isHtmlUniform
 };
 //# sourceMappingURL=html-in-canvas.js.map

package/dist/html-in-canvas.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/html-in-canvas.ts"],
-  "sourcesContent": ["import { createProgram } from './webgl-program.js';\n\n/**\n * Experimental HTML-in-canvas support (https://github.com/WICG/html-in-canvas),\n * available in Chromium behind `chrome://flags/#canvas-draw-element`. Older Chromium versions opt the canvas in with\n * `layoutsubtree` instead of `content=\"drawable\"`, so the canvas gets both.\n *\n * An HTML element passed as a texture uniform is moved into the shader canvas and drawn 1:1 where it's laid out:\n *\n * <div data-paper-shader>\n *   <canvas content=\"drawable\" layoutsubtree>\n *     <div drawable>\u2026</div>\n *   </canvas>\n * </div>\n *\n * React renders this markup itself, since it can't let its nodes be moved, and the shader adopts that canvas.\n *\n * The HTML texture always matches the canvas size, so shaders sample it like any canvas-sized texture: a resize\n * captures the HTML again right away instead of waiting for the next paint.\n *\n * Shaders nested in that HTML don't get a canvas of their own. Each one renders into a framebuffer of the root\n * shader's context, and is pasted into its parent's HTML texture where it's laid out:\n *\n * <div data-paper-shader>                 \u2190 root, owns the only canvas and context\n *   <canvas content=\"drawable\" layoutsubtree>\n *     <div drawable>\n *       <div data-paper-shader>           \u2190 nested, renders into a framebuffer\n *         <div drawable>\u2026</div>           \u2190 captured on its own, left out of the root capture\n *       </div>\n *       <img />\n *       <div data-paper-shader></div>     \u2190 nested, without HTML\n *     </div>\n *   </canvas>\n * </div>\n *\n * A nested shader is pasted over everything else in its parent's HTML, and the browser doesn't apply the transforms,\n * opacity and clipping of the elements between them to it.\n */\n\nexport interface DrawableCanvasElement extends HTMLCanvasElement {\n  requestPaint(): void;\n  updateElementGeometry(element: Element, options?: { canvasTransform?: DOMMatrixInit }): void;\n}\n\ninterface DrawableCanvasWebGL2Context extends WebGL2RenderingContext {\n  texElementSubImage2D(\n    target: GLenum,\n    level: GLint,\n    xoffset: GLint,\n    yoffset: GLint,\n    element: Element,\n    config?: { width?: number; height?: number; sx?: number; sy?: number; swidth?: number; sheight?: number }\n  ): void;\n}\n\nexport function isHtmlInCanvasSupported(): boolean {\n  return (\n    typeof HTMLCanvasElement !== 'undefined' &&\n    'requestPaint' in HTMLCanvasElement.prototype &&\n    typeof WebGL2RenderingContext !== 'undefined' &&\n    'texElementSubImage2D' in WebGL2RenderingContext.prototype\n  );\n}\n\n/** `<img>` stays a static image uniform. nodeType instead of `instanceof` works across iframes */\nexport function isHtmlUniform(value: unknown): value is HTMLElement {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    (value as Node).nodeType === 1 &&\n    (value as Element).tagName !== 'IMG'\n  );\n}\n\nexport function findReactCanvas(values: unknown[], parentElement: Element): DrawableCanvasElement | null {\n  for (const value of values) {\n    const canvas = isHtmlUniform(value) ? value.parentElement : null;\n    if (canvas?.tagName === 'CANVAS' && canvas.parentElement === parentElement) {\n      return canvas as DrawableCanvasElement;\n    }\n  }\n  return null;\n}\n\n/**\n * The canvas of the root shader whose HTML holds this shader element, if it can render it. Its own children have to\n * be drawable HTML or HTML uniforms, anything else stays on top of a canvas of its own\n */\nexport function findHostCanvas(parentElement: HTMLElement, values: unknown[]): DrawableCanvasElement | null {\n  const canvas = parentElement.parentElement?.closest('canvas');\n  if (!canvas || !isHtmlInCanvasSupported() || canvas.getAttribute('content') !== 'drawable') {\n    return null;\n  }\n\n  const drawable = parentElement.parentElement!.closest('[drawable]');\n  if (!drawable || !canvas.contains(drawable)) {\n    return null;\n  }\n\n  for (const child of Array.from(parentElement.children)) {\n    if (!child.hasAttribute('drawable') && !values.includes(child)) {\n      return null;\n    }\n  }\n\n  return canvas as DrawableCanvasElement;\n}\n\n/** The layout position of the element's border box within the padding box of a positioned ancestor, in CSS px */\nexport function getOffsetWithin(element: HTMLElement, ancestor: Element): { x: number; y: number } {\n  let x = element.offsetLeft;\n  let y = element.offsetTop;\n  let current = element.offsetParent as HTMLElement | null;\n\n  while (current && current !== ancestor) {\n    x += current.offsetLeft + current.clientLeft;\n    y += current.offsetTop + current.clientTop;\n    current = current.offsetParent as HTMLElement | null;\n  }\n\n  return { x, y };\n}\n\n/** Drawing buffer size of what HTML is captured into, and the CSS size of the element it covers */\nexport interface HtmlCaptureBox {\n  width: number;\n  height: number;\n  clientWidth: number;\n  clientHeight: number;\n}\n\n/** Moves the element into the canvas, returns a function that puts it back */\nexport function attachHtml(canvas: DrawableCanvasElement, element: HTMLElement): () => void {\n  if (element.parentElement === canvas) {\n    return () => {};\n  }\n\n  const parent = element.parentNode;\n  const nextSibling = element.nextSibling;\n  canvas.setAttribute('content', 'drawable');\n  canvas.setAttribute('layoutsubtree', '');\n  element.setAttribute('drawable', '');\n  canvas.append(element);\n\n  return () => {\n    element.removeAttribute('drawable');\n    if (parent) {\n      parent.insertBefore(element, nextSibling?.parentNode === parent ? nextSibling : null);\n    } else {\n      element.remove();\n    }\n  };\n}\n\n/**\n * Captures the element into the bound texture, sized to the drawing buffer of the box. The texture is only reallocated\n * (and so cleared) when its size or the drawn area changes; returns that layout to pass back in next time\n */\nexport function drawHtml(gl: WebGL2RenderingContext, box: HtmlCaptureBox, element: HTMLElement, lastLayout?: string): string {\n  const width = Math.max(1, box.width);\n  const height = Math.max(1, box.height);\n  const scaleX = width / Math.max(1, box.clientWidth);\n  const scaleY = height / Math.max(1, box.clientHeight);\n\n  const left = element.offsetLeft;\n  const top = element.offsetTop;\n  const visibleLeft = Math.max(0, left);\n  const visibleTop = Math.max(0, top);\n  const visibleRight = Math.min(box.clientWidth, left + element.offsetWidth);\n  const visibleBottom = Math.min(box.clientHeight, top + element.offsetHeight);\n  const x0 = Math.round(visibleLeft * scaleX);\n  const y0 = Math.round(visibleTop * scaleY);\n  const x1 = Math.min(width, Math.round(visibleRight * scaleX));\n  const y1 = Math.min(height, Math.round(visibleBottom * scaleY));\n\n  const layout = `${width}x${height} ${x0},${y0},${x1},${y1}`;\n  if (layout !== lastLayout) {\n    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);\n  }\n\n  if (x1 > x0 && y1 > y0) {\n    (gl as DrawableCanvasWebGL2Context).texElementSubImage2D(gl.TEXTURE_2D, 0, x0, y0, element, {\n      sx: visibleLeft - left,\n      sy: visibleTop - top,\n      swidth: visibleRight - visibleLeft,\n      sheight: visibleBottom - visibleTop,\n      width: x1 - x0,\n      height: y1 - y0,\n    });\n  }\n\n  return layout;\n}\n\n/** A texture to render into, the output of a nested shader or the HTML with nested shaders pasted in */\nexport interface RenderTarget {\n  texture: WebGLTexture;\n  framebuffer: WebGLFramebuffer;\n  width: number;\n  height: number;\n}\n\n/** Creates the render target, or reallocates its texture when the size changes */\nexport function resizeRenderTarget(\n  gl: WebGL2RenderingContext,\n  target: RenderTarget | undefined,\n  width: number,\n  height: number\n): RenderTarget {\n  if (target && target.width === width && target.height === height) {\n    return target;\n  }\n\n  const texture = target?.texture ?? gl.createTexture()!;\n  gl.bindTexture(gl.TEXTURE_2D, texture);\n  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\n  gl.bindTexture(gl.TEXTURE_2D, null);\n\n  const framebuffer = target?.framebuffer ?? gl.createFramebuffer()!;\n  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);\n  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);\n  gl.bindFramebuffer(gl.FRAMEBUFFER, null);\n\n  return { texture, framebuffer, width, height };\n}\n\nexport function deleteRenderTarget(gl: WebGL2RenderingContext, target: RenderTarget | undefined): void {\n  if (!target) return;\n  gl.deleteTexture(target.texture);\n  gl.deleteFramebuffer(target.framebuffer);\n}\n\n/** Corner radius of the element's border box in CSS px, the top left one for all corners */\nexport function getBorderRadius(element: HTMLElement): number {\n  const radius = parseFloat(getComputedStyle(element).borderTopLeftRadius) || 0;\n  return Math.min(radius, element.offsetWidth / 2, element.offsetHeight / 2);\n}\n\n// language=GLSL\nconst pasteVertexShader = `#version 300 es\nlayout(location = 0) in vec4 a_position;\n\nuniform vec4 u_rect;\nuniform vec2 u_targetSize;\nuniform float u_flipY;\n\nout vec2 v_uv;\nout vec2 v_px;\n\nvoid main() {\n  vec2 corner = a_position.xy * .5 + .5;\n  v_uv = vec2(corner.x, mix(corner.y, 1. - corner.y, u_flipY));\n  v_px = corner * u_rect.zw;\n  vec2 position = (u_rect.xy + corner * u_rect.zw) / u_targetSize;\n  gl_Position = vec4(position * 2. - 1., 0., 1.);\n}\n`;\n\n// language=GLSL\nconst pasteFragmentShader = `#version 300 es\nprecision highp float;\n\nuniform sampler2D u_texture;\nuniform vec4 u_rect;\nuniform float u_radius;\n\nin vec2 v_uv;\nin vec2 v_px;\n\nout vec4 fragColor;\n\nvoid main() {\n  vec2 size = u_rect.zw;\n  vec2 halfSize = .5 * size;\n  vec2 q = abs(v_px - halfSize) - halfSize + u_radius;\n  float distance = length(max(q, 0.)) + min(max(q.x, q.y), 0.) - u_radius;\n  float mask = clamp(.5 - distance, 0., 1.);\n  fragColor = texture(u_texture, v_uv) * mask;\n}\n`;\n\ninterface PasteProgram {\n  program: WebGLProgram;\n  vertexArray: WebGLVertexArrayObject;\n  locations: Record<'u_texture' | 'u_rect' | 'u_targetSize' | 'u_flipY' | 'u_radius', WebGLUniformLocation | null>;\n}\n\nconst pastePrograms = new WeakMap<WebGL2RenderingContext, PasteProgram | null>();\n\nfunction getPasteProgram(gl: WebGL2RenderingContext): PasteProgram | null {\n  if (pastePrograms.has(gl)) {\n    return pastePrograms.get(gl)!;\n  }\n\n  const program = createProgram(gl, pasteVertexShader, pasteFragmentShader);\n  if (!program) {\n    pastePrograms.set(gl, null);\n    return null;\n  }\n\n  const vertexArray = gl.createVertexArray()!;\n  gl.bindVertexArray(vertexArray);\n  gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());\n  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW);\n  gl.enableVertexAttribArray(0);\n  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);\n  gl.bindVertexArray(null);\n\n  const location = (name: keyof PasteProgram['locations']) => gl.getUniformLocation(program, name);\n  const paste: PasteProgram = {\n    program,\n    vertexArray,\n    locations: {\n      u_texture: location('u_texture'),\n      u_rect: location('u_rect'),\n      u_targetSize: location('u_targetSize'),\n      u_flipY: location('u_flipY'),\n      u_radius: location('u_radius'),\n    },\n  };\n  pastePrograms.set(gl, paste);\n  return paste;\n}\n\n/** A texture pasted into a render target */\nexport interface PastedTexture {\n  texture: WebGLTexture;\n  /** Position and size in the target's pixels, from its top left */\n  rect: [number, number, number, number];\n  /** Corner radius in the target's pixels */\n  radius?: number;\n  /** Textures rendered by a shader have their first row at the bottom, HTML captures at the top */\n  isRendered?: boolean;\n}\n\n/** Draws the HTML capture into the target as is, then the textures over it with their rounded corners */\nexport function pasteTextures(\n  gl: WebGL2RenderingContext,\n  target: RenderTarget,\n  base: WebGLTexture,\n  textures: PastedTexture[]\n): void {\n  const paste = getPasteProgram(gl);\n  if (!paste) return;\n\n  gl.bindFramebuffer(gl.FRAMEBUFFER, target.framebuffer);\n  gl.viewport(0, 0, target.width, target.height);\n  gl.useProgram(paste.program);\n  gl.bindVertexArray(paste.vertexArray);\n  gl.activeTexture(gl.TEXTURE0);\n  gl.uniform1i(paste.locations.u_texture, 0);\n  gl.uniform2f(paste.locations.u_targetSize, target.width, target.height);\n\n  const draw = ({ texture, rect, radius = 0, isRendered = false }: PastedTexture) => {\n    gl.bindTexture(gl.TEXTURE_2D, texture);\n    gl.uniform4fv(paste.locations.u_rect, rect);\n    gl.uniform1f(paste.locations.u_radius, radius);\n    gl.uniform1f(paste.locations.u_flipY, isRendered ? 1 : 0);\n    gl.drawArrays(gl.TRIANGLES, 0, 6);\n  };\n\n  draw({ texture: base, rect: [0, 0, target.width, target.height] });\n\n  // Premultiplied alpha over\n  gl.enable(gl.BLEND);\n  gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);\n  textures.forEach(draw);\n  gl.disable(gl.BLEND);\n\n  // So that a later pass can't sample a texture it's rendering into\n  gl.bindTexture(gl.TEXTURE_2D, null);\n  gl.bindVertexArray(null);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * Experimental HTML-in-canvas support (https://github.com/WICG/html-in-canvas),\n * available in Chromium behind `chrome://flags/#canvas-draw-element`. Older Chromium versions opt the canvas in with\n * `layoutsubtree` instead of `content=\"drawable\"`, so the canvas gets both.\n *\n * An HTML element passed as a texture uniform is moved into the shader canvas and drawn 1:1 where it's laid out:\n *\n * <div data-paper-shader>\n *   <canvas content=\"drawable\" layoutsubtree>\n *     <div drawable>\u2026</div>\n *   </canvas>\n * </div>\n *\n * React renders this markup itself, since it can't let its nodes be moved, and the shader adopts that canvas.\n *\n * The HTML texture always matches the canvas size, so shaders sample it like any canvas-sized texture: a resize\n * captures the HTML again right away instead of waiting for the next paint.\n */\n\nexport interface DrawableCanvasElement extends HTMLCanvasElement {\n  requestPaint(): void;\n  updateElementGeometry(element: Element, options?: { canvasTransform?: DOMMatrixInit }): void;\n}\n\ninterface DrawableCanvasWebGL2Context extends WebGL2RenderingContext {\n  texElementSubImage2D(\n    target: GLenum,\n    level: GLint,\n    xoffset: GLint,\n    yoffset: GLint,\n    element: Element,\n    config?: { width?: number; height?: number; sx?: number; sy?: number; swidth?: number; sheight?: number }\n  ): void;\n}\n\nexport function isHtmlInCanvasSupported(): boolean {\n  return (\n    typeof HTMLCanvasElement !== 'undefined' &&\n    'requestPaint' in HTMLCanvasElement.prototype &&\n    typeof WebGL2RenderingContext !== 'undefined' &&\n    'texElementSubImage2D' in WebGL2RenderingContext.prototype\n  );\n}\n\n/** `<img>` stays a static image uniform. nodeType instead of `instanceof` works across iframes */\nexport function isHtmlUniform(value: unknown): value is HTMLElement {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    (value as Node).nodeType === 1 &&\n    (value as Element).tagName !== 'IMG'\n  );\n}\n\nexport function findReactCanvas(values: unknown[], parentElement: Element): DrawableCanvasElement | null {\n  for (const value of values) {\n    const canvas = isHtmlUniform(value) ? value.parentElement : null;\n    if (canvas?.tagName === 'CANVAS' && canvas.parentElement === parentElement) {\n      return canvas as DrawableCanvasElement;\n    }\n  }\n  return null;\n}\n\n/** Moves the element into the canvas, returns a function that puts it back */\nexport function attachHtml(canvas: DrawableCanvasElement, element: HTMLElement): () => void {\n  if (element.parentElement === canvas) {\n    return () => {};\n  }\n\n  const parent = element.parentNode;\n  const nextSibling = element.nextSibling;\n  canvas.setAttribute('content', 'drawable');\n  canvas.setAttribute('layoutsubtree', '');\n  element.setAttribute('drawable', '');\n  canvas.append(element);\n\n  return () => {\n    element.removeAttribute('drawable');\n    if (parent) {\n      parent.insertBefore(element, nextSibling?.parentNode === parent ? nextSibling : null);\n    } else {\n      element.remove();\n    }\n  };\n}\n\n/**\n * Captures the element into the bound texture, sized to the canvas drawing buffer. The texture is only reallocated\n * (and so cleared) when its size or the drawn area changes; returns that layout to pass back in next time\n */\nexport function drawHtml(\n  gl: WebGL2RenderingContext,\n  canvas: DrawableCanvasElement,\n  element: HTMLElement,\n  lastLayout?: string\n): string {\n  const width = Math.max(1, canvas.width);\n  const height = Math.max(1, canvas.height);\n  const scaleX = width / Math.max(1, canvas.clientWidth);\n  const scaleY = height / Math.max(1, canvas.clientHeight);\n\n  const left = element.offsetLeft;\n  const top = element.offsetTop;\n  const visibleLeft = Math.max(0, left);\n  const visibleTop = Math.max(0, top);\n  const visibleRight = Math.min(canvas.clientWidth, left + element.offsetWidth);\n  const visibleBottom = Math.min(canvas.clientHeight, top + element.offsetHeight);\n  const x0 = Math.round(visibleLeft * scaleX);\n  const y0 = Math.round(visibleTop * scaleY);\n  const x1 = Math.min(width, Math.round(visibleRight * scaleX));\n  const y1 = Math.min(height, Math.round(visibleBottom * scaleY));\n\n  const layout = `${width}x${height} ${x0},${y0},${x1},${y1}`;\n  if (layout !== lastLayout) {\n    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);\n  }\n\n  if (x1 > x0 && y1 > y0) {\n    (gl as DrawableCanvasWebGL2Context).texElementSubImage2D(gl.TEXTURE_2D, 0, x0, y0, element, {\n      sx: visibleLeft - left,\n      sy: visibleTop - top,\n      swidth: visibleRight - visibleLeft,\n      sheight: visibleBottom - visibleTop,\n      width: x1 - x0,\n      height: y1 - y0,\n    });\n  }\n\n  return layout;\n}\n"],
+  "mappings": ";;;;;AAmCO,SAAS,0BAAmC;AACjD,SACE,OAAO,sBAAsB,eAC7B,kBAAkB,kBAAkB,aACpC,OAAO,2BAA2B,eAClC,0BAA0B,uBAAuB;AAErD;AAGO,SAAS,cAAc,OAAsC;AAClE,SACE,OAAO,UAAU,YACjB,UAAU,QACT,MAAe,aAAa,KAC5B,MAAkB,YAAY;AAEnC;AAEO,SAAS,gBAAgB,QAAmB,eAAsD;AACvG,aAAW,SAAS,QAAQ;AAC1B,UAAM,SAAS,cAAc,KAAK,IAAI,MAAM,gBAAgB;AAC5D,QAAI,QAAQ,YAAY,YAAY,OAAO,kBAAkB,eAAe;AAC1E,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAGO,SAAS,WAAW,QAA+B,SAAkC;AAC1F,MAAI,QAAQ,kBAAkB,QAAQ;AACpC,WAAO,MAAM;AAAA,IAAC;AAAA,EAChB;AAEA,QAAM,SAAS,QAAQ;AACvB,QAAM,cAAc,QAAQ;AAC5B,SAAO,aAAa,WAAW,UAAU;AACzC,SAAO,aAAa,iBAAiB,EAAE;AACvC,UAAQ,aAAa,YAAY,EAAE;AACnC,SAAO,OAAO,OAAO;AAErB,SAAO,MAAM;AACX,YAAQ,gBAAgB,UAAU;AAClC,QAAI,QAAQ;AACV,aAAO,aAAa,SAAS,aAAa,eAAe,SAAS,cAAc,IAAI;AAAA,IACtF,OAAO;AACL,cAAQ,OAAO;AAAA,IACjB;AAAA,EACF;AACF;AAMO,SAAS,SACd,IACA,QACA,SACA,YACQ;AACR,QAAM,QAAQ,KAAK,IAAI,GAAG,OAAO,KAAK;AACtC,QAAM,SAAS,KAAK,IAAI,GAAG,OAAO,MAAM;AACxC,QAAM,SAAS,QAAQ,KAAK,IAAI,GAAG,OAAO,WAAW;AACrD,QAAM,SAAS,SAAS,KAAK,IAAI,GAAG,OAAO,YAAY;AAEvD,QAAM,OAAO,QAAQ;AACrB,QAAM,MAAM,QAAQ;AACpB,QAAM,cAAc,KAAK,IAAI,GAAG,IAAI;AACpC,QAAM,aAAa,KAAK,IAAI,GAAG,GAAG;AAClC,QAAM,eAAe,KAAK,IAAI,OAAO,aAAa,OAAO,QAAQ,WAAW;AAC5E,QAAM,gBAAgB,KAAK,IAAI,OAAO,cAAc,MAAM,QAAQ,YAAY;AAC9E,QAAM,KAAK,KAAK,MAAM,cAAc,MAAM;AAC1C,QAAM,KAAK,KAAK,MAAM,aAAa,MAAM;AACzC,QAAM,KAAK,KAAK,IAAI,OAAO,KAAK,MAAM,eAAe,MAAM,CAAC;AAC5D,QAAM,KAAK,KAAK,IAAI,QAAQ,KAAK,MAAM,gBAAgB,MAAM,CAAC;AAE9D,QAAM,SAAS,GAAG,KAAK,IAAI,MAAM,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE;AACzD,MAAI,WAAW,YAAY;AACzB,OAAG,WAAW,GAAG,YAAY,GAAG,GAAG,OAAO,OAAO,QAAQ,GAAG,GAAG,MAAM,GAAG,eAAe,IAAI;AAAA,EAC7F;AAEA,MAAI,KAAK,MAAM,KAAK,IAAI;AACtB,IAAC,GAAmC,qBAAqB,GAAG,YAAY,GAAG,IAAI,IAAI,SAAS;AAAA,MAC1F,IAAI,cAAc;AAAA,MAClB,IAAI,aAAa;AAAA,MACjB,QAAQ,eAAe;AAAA,MACvB,SAAS,gBAAgB;AAAA,MACzB,OAAO,KAAK;AAAA,MACZ,QAAQ,KAAK;AAAA,IACf,CAAC;AAAA,EACH;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 /** The core Shader Mount class. Pass it a parent element and a fragment shader to get started. */
 export { ShaderMount, isPaperShaderElement } from './shader-mount.js';
 export { isHtmlInCanvasSupported } from './html-in-canvas.js';
+export { observeContentSize, type ShaderSizeToContent } from './size-to-content.js';
 export type { PaperShaderElement, ShaderMotionParams, ShaderMountUniforms, ShaderPreset, ImageShaderPreset, } from './shader-mount.js';
 /** Shader sizing options and uniforms */
 export { defaultObjectSizing, defaultPatternSizing, ShaderFitOptions, type ShaderFit, type ShaderSizingParams, type ShaderSizingUniforms, } from './shader-sizing.js';

package/dist/index.js

@@ -5,6 +5,7 @@
 
 import { ShaderMount, isPaperShaderElement } from "./shader-mount.js";
 import { isHtmlInCanvasSupported } from "./html-in-canvas.js";
+import { observeContentSize } from "./size-to-content.js";
 import {
   defaultObjectSizing,
   defaultPatternSizing,
@@ -167,6 +168,7 @@ export {
   metaballsFragmentShader,
   metaballsMeta,
   neuroNoiseFragmentShader,
+  observeContentSize,
   paperTextureFragmentShader,
   paperTextureMeta,
   perlinNoiseFragmentShader,

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["/** The core Shader Mount class. Pass it a parent element and a fragment shader to get started. */\nexport { ShaderMount, isPaperShaderElement } from './shader-mount.js';\nexport { isHtmlInCanvasSupported } from './html-in-canvas.js';\nexport type {\n  PaperShaderElement,\n  ShaderMotionParams,\n  ShaderMountUniforms,\n  ShaderPreset,\n  ImageShaderPreset,\n} from './shader-mount.js';\n\n/** Shader sizing options and uniforms */\nexport {\n  defaultObjectSizing,\n  defaultPatternSizing,\n  ShaderFitOptions,\n  type ShaderFit,\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n} from './shader-sizing.js';\n\n/** A flowing interplay of color spots, moving along distinct trajectories and transformed by organic distortion */\nexport {\n  meshGradientFragmentShader,\n  meshGradientMeta,\n  type MeshGradientParams,\n  type MeshGradientUniforms,\n} from './shaders/mesh-gradient.js';\n\n/** Radial multi-colored gradient shaped with layered noise for a natural, smoky aesthetic */\nexport {\n  smokeRingMeta,\n  smokeRingFragmentShader,\n  type SmokeRingParams,\n  type SmokeRingUniforms,\n} from './shaders/smoke-ring.js';\n\n/** A glowing, web-like structure of fluid lines and soft intersections. Great for creating atmospheric, organic-yet-futuristic visuals */\nexport { neuroNoiseFragmentShader, type NeuroNoiseParams, type NeuroNoiseUniforms } from './shaders/neuro-noise.js';\n\n/** Animated multi-color dots pattern with each dot orbiting around its cell center. Supports up to 40 colors and various shape and motion controls. Great for playful, dynamic backgrounds and UI textures */\nexport {\n  dotOrbitMeta,\n  dotOrbitFragmentShader,\n  type DotOrbitParams,\n  type DotOrbitUniforms,\n} from './shaders/dot-orbit.js';\n\n/** Static grid pattern made of circles, diamonds, squares or triangles */\nexport {\n  dotGridFragmentShader,\n  DotGridShapes,\n  type DotGridShape,\n  type DotGridParams,\n  type DotGridUniforms,\n} from './shaders/dot-grid.js';\n\n/** A multi-color gradient mapped into smooth, animated curves, delivering a sleek, futuristic visual */\nexport {\n  simplexNoiseMeta,\n  simplexNoiseFragmentShader,\n  type SimplexNoiseParams,\n  type SimplexNoiseUniforms,\n} from './shaders/simplex-noise.js';\n\n/** Up to 20 gooey blobs moving around the center and merging into smooth organic shapes */\nexport {\n  metaballsMeta,\n  metaballsFragmentShader,\n  type MetaballsParams,\n  type MetaballsUniforms,\n} from './shaders/metaballs.js';\n\n/** Animated 3D Perlin noise with exposed controls */\nexport { perlinNoiseFragmentShader, type PerlinNoiseParams, type PerlinNoiseUniforms } from './shaders/perlin-noise.js';\n\n/** Anti-aliased animated Voronoi pattern with smooth and customizable edges */\nexport { voronoiMeta, voronoiFragmentShader, type VoronoiParams, type VoronoiUniforms } from './shaders/voronoi.js';\n\n/** Static line pattern configurable into textures ranging from sharp zigzags to smooth flowing waves */\nexport { wavesFragmentShader, type WavesParams, type WavesUniforms } from './shaders/waves.js';\n\n/** Animated color fields warped by noise and swirls, applied over base patterns (checks, stripes, or split edge). Blends up to 10 colors with adjustable distribution, softness, distortion, and swirl. Great for fluid, smoky, or marbled effects */\nexport {\n  warpMeta,\n  warpFragmentShader,\n  WarpPatterns,\n  type WarpParams,\n  type WarpUniforms,\n  type WarpPattern,\n} from './shaders/warp.js';\n\n/** Animated rays of light radiating from the center, blended with up to 5 colors. The rays are adjustable by size, density, brightness and center glow. Great for dramatic backgrounds, logo reveals, and VFX like energy bursts or sun shafts */\nexport { godRaysMeta, godRaysFragmentShader, type GodRaysParams, type GodRaysUniforms } from './shaders/god-rays.js';\n\n/** A single-colored animated spiral that morphs across a wide range of shapes - from crisp, thin-lined geometry to flowing whirlpool forms and wavy, abstract rings */\nexport { spiralFragmentShader, type SpiralParams, type SpiralUniforms } from './shaders/spiral.js';\n\n/** Animated bands of color twisting and bending, producing spirals, arcs, and flowing circular patterns */\nexport { swirlMeta, swirlFragmentShader, type SwirlParams, type SwirlUniforms } from './shaders/swirl.js';\n\n/** Animated 2-color dithering over with multiple pattern sources (noise, warp, dots, waves, ripple, swirl, sphere) */\nexport {\n  ditheringFragmentShader,\n  DitheringShapes,\n  DitheringTypes,\n  type DitheringParams,\n  type DitheringUniforms,\n  type DitheringShape,\n  type DitheringType,\n} from './shaders/dithering.js';\n\n/** Multi-color gradients with grainy, noise-textured distortion available in 7 animated abstract forms */\nexport {\n  grainGradientFragmentShader,\n  grainGradientMeta,\n  GrainGradientShapes,\n  type GrainGradientParams,\n  type GrainGradientUniforms,\n  type GrainGradientShape,\n} from './shaders/grain-gradient.js';\n\n/** Luminous trails of color merging into a glowing gradient frame */\nexport {\n  pulsingBorderMeta,\n  pulsingBorderFragmentShader,\n  PulsingBorderAspectRatios,\n  type PulsingBorderParams,\n  type PulsingBorderUniforms,\n  type PulsingBorderAspectRatio,\n} from './shaders/pulsing-border.js';\n\n/** Glowing translucent 3D panels rotating around a central axis */\nexport {\n  colorPanelsFragmentShader,\n  colorPanelsMeta,\n  type ColorPanelsParams,\n  type ColorPanelsUniforms,\n} from './shaders/color-panels.js';\n\n/** Multi-point mesh gradients with up to 10 color spots, enhanced by two-direction warping, adjustable blend sharpness, and grain controls. Perfect for elegant wallpapers and atmospheric backdrops */\nexport {\n  staticMeshGradientFragmentShader,\n  staticMeshGradientMeta,\n  type StaticMeshGradientParams,\n  type StaticMeshGradientUniforms,\n} from './shaders/static-mesh-gradient.js';\n\n/** Radial gradient with up to 10 blended colors, featuring advanced focal point control, shape distortion, and grain effects */\nexport {\n  staticRadialGradientFragmentShader,\n  staticRadialGradientMeta,\n  type StaticRadialGradientParams,\n  type StaticRadialGradientUniforms,\n} from './shaders/static-radial-gradient.js';\n\n/** A static texture built from multiple noise layers, usable for a realistic paper and cardboard surfaces or generating abstract patterns. Can be used as a image filter or as a texture */\nexport {\n  paperTextureFragmentShader,\n  paperTextureMeta,\n  type PaperTextureParams,\n  type PaperTextureUniforms,\n} from './shaders/paper-texture.js';\n\n/** Water-like surface distortion with natural caustic realism. Works as an image filter or animated texture without image */\nexport { waterFragmentShader, type WaterParams, type WaterUniforms } from './shaders/water.js';\n\n/** Fluted glass image filter transforms an image into streaked, ribbed distortions, giving a mix of clarity and obscurity */\nexport {\n  flutedGlassFragmentShader,\n  GlassDistortionShapes,\n  GlassGridShapes,\n  type GlassDistortionShape,\n  type GlassGridShape,\n  type FlutedGlassParams,\n  type FlutedGlassUniforms,\n} from './shaders/fluted-glass.js';\n\n/** A dithering image filter with support for 4 dithering modes and multiple color palettes (2-color, 3-color, and multicolor options, using either predefined colors or ones sampled directly from the original image) */\nexport {\n  imageDitheringFragmentShader,\n  type ImageDitheringParams,\n  type ImageDitheringUniforms,\n} from './shaders/image-dithering.js';\n\n/** Lens Distortion image filter that separates an image into shifting color layers, recreating the chromatic aberration of a lens, and warps the image geometry with barrel or pincushion curvature */\nexport {\n  lensDistortionFragmentShader,\n  lensDistortionMeta,\n  type LensDistortionParams,\n  type LensDistortionUniforms,\n} from './shaders/lens-distortion.js';\n\n/** A glowing gradient of colors flowing through an input image. The effect creates a smoothly animated wave of intensity across the image */\nexport {\n  heatmapMeta,\n  heatmapFragmentShader,\n  toProcessedHeatmap,\n  type HeatmapParams,\n  type HeatmapUniforms,\n} from './shaders/heatmap.js';\n\n/** Futuristic liquid metal material applied to uploaded logo or one of pre-defined abstract shape */\nexport {\n  liquidMetalFragmentShader,\n  LiquidMetalShapes,\n  toProcessedLiquidMetal,\n  type LiquidMetalShape,\n  type LiquidMetalParams,\n  type LiquidMetalUniforms,\n} from './shaders/liquid-metal.js';\n\n/** A halftone-dot image filter featuring customizable grids, color palettes, and dot styles */\nexport {\n  HalftoneDotsTypes,\n  HalftoneDotsGrids,\n  halftoneDotsFragmentShader,\n  type HalftoneDotsParams,\n  type HalftoneDotsUniforms,\n  type HalftoneDotsType,\n  type HalftoneDotsGrid,\n} from './shaders/halftone-dots.js';\n\n/** A halftone CMYK classic algo */\nexport {\n  HalftoneCmykTypes,\n  halftoneCmykFragmentShader,\n  type HalftoneCmykParams,\n  type HalftoneCmykUniforms,\n  type HalftoneCmykType,\n} from './shaders/halftone-cmyk.js';\n\n/** Animated color fields running around a glassy logo shape */\nexport {\n  gemSmokeMeta,\n  gemSmokeFragmentShader,\n  toProcessedGemSmoke,\n  GemSmokeShapes,\n  type GemSmokeShape,\n  type GemSmokeParams,\n  type GemSmokeUniforms,\n} from './shaders/gem-smoke.js';\n\n// ----- Utils ----- //\nexport { getShaderColorFromString } from './get-shader-color-from-string.js';\nexport { getShaderNoiseTexture } from './get-shader-noise-texture.js';\nexport { emptyPixel } from './empty-pixel.js';\n"],
-  "mappings": ";;;;;AACA,SAAS,aAAa,4BAA4B;AAClD,SAAS,+BAA+B;AAUxC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP,SAAS,gCAAgF;AAGzF;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP,SAAS,iCAAmF;AAG5F,SAAS,aAAa,6BAAuE;AAG7F,SAAS,2BAAiE;AAG1E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP,SAAS,aAAa,6BAAuE;AAG7F,SAAS,4BAAoE;AAG7E,SAAS,WAAW,2BAAiE;AAGrF;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP,SAAS,2BAAiE;AAG1E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAGP;AAAA,EACE;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP,SAAS,gCAAgC;AACzC,SAAS,6BAA6B;AACtC,SAAS,kBAAkB;",
+  "sourcesContent": ["/** The core Shader Mount class. Pass it a parent element and a fragment shader to get started. */\nexport { ShaderMount, isPaperShaderElement } from './shader-mount.js';\nexport { isHtmlInCanvasSupported } from './html-in-canvas.js';\nexport { observeContentSize, type ShaderSizeToContent } from './size-to-content.js';\nexport type {\n  PaperShaderElement,\n  ShaderMotionParams,\n  ShaderMountUniforms,\n  ShaderPreset,\n  ImageShaderPreset,\n} from './shader-mount.js';\n\n/** Shader sizing options and uniforms */\nexport {\n  defaultObjectSizing,\n  defaultPatternSizing,\n  ShaderFitOptions,\n  type ShaderFit,\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n} from './shader-sizing.js';\n\n/** A flowing interplay of color spots, moving along distinct trajectories and transformed by organic distortion */\nexport {\n  meshGradientFragmentShader,\n  meshGradientMeta,\n  type MeshGradientParams,\n  type MeshGradientUniforms,\n} from './shaders/mesh-gradient.js';\n\n/** Radial multi-colored gradient shaped with layered noise for a natural, smoky aesthetic */\nexport {\n  smokeRingMeta,\n  smokeRingFragmentShader,\n  type SmokeRingParams,\n  type SmokeRingUniforms,\n} from './shaders/smoke-ring.js';\n\n/** A glowing, web-like structure of fluid lines and soft intersections. Great for creating atmospheric, organic-yet-futuristic visuals */\nexport { neuroNoiseFragmentShader, type NeuroNoiseParams, type NeuroNoiseUniforms } from './shaders/neuro-noise.js';\n\n/** Animated multi-color dots pattern with each dot orbiting around its cell center. Supports up to 40 colors and various shape and motion controls. Great for playful, dynamic backgrounds and UI textures */\nexport {\n  dotOrbitMeta,\n  dotOrbitFragmentShader,\n  type DotOrbitParams,\n  type DotOrbitUniforms,\n} from './shaders/dot-orbit.js';\n\n/** Static grid pattern made of circles, diamonds, squares or triangles */\nexport {\n  dotGridFragmentShader,\n  DotGridShapes,\n  type DotGridShape,\n  type DotGridParams,\n  type DotGridUniforms,\n} from './shaders/dot-grid.js';\n\n/** A multi-color gradient mapped into smooth, animated curves, delivering a sleek, futuristic visual */\nexport {\n  simplexNoiseMeta,\n  simplexNoiseFragmentShader,\n  type SimplexNoiseParams,\n  type SimplexNoiseUniforms,\n} from './shaders/simplex-noise.js';\n\n/** Up to 20 gooey blobs moving around the center and merging into smooth organic shapes */\nexport {\n  metaballsMeta,\n  metaballsFragmentShader,\n  type MetaballsParams,\n  type MetaballsUniforms,\n} from './shaders/metaballs.js';\n\n/** Animated 3D Perlin noise with exposed controls */\nexport { perlinNoiseFragmentShader, type PerlinNoiseParams, type PerlinNoiseUniforms } from './shaders/perlin-noise.js';\n\n/** Anti-aliased animated Voronoi pattern with smooth and customizable edges */\nexport { voronoiMeta, voronoiFragmentShader, type VoronoiParams, type VoronoiUniforms } from './shaders/voronoi.js';\n\n/** Static line pattern configurable into textures ranging from sharp zigzags to smooth flowing waves */\nexport { wavesFragmentShader, type WavesParams, type WavesUniforms } from './shaders/waves.js';\n\n/** Animated color fields warped by noise and swirls, applied over base patterns (checks, stripes, or split edge). Blends up to 10 colors with adjustable distribution, softness, distortion, and swirl. Great for fluid, smoky, or marbled effects */\nexport {\n  warpMeta,\n  warpFragmentShader,\n  WarpPatterns,\n  type WarpParams,\n  type WarpUniforms,\n  type WarpPattern,\n} from './shaders/warp.js';\n\n/** Animated rays of light radiating from the center, blended with up to 5 colors. The rays are adjustable by size, density, brightness and center glow. Great for dramatic backgrounds, logo reveals, and VFX like energy bursts or sun shafts */\nexport { godRaysMeta, godRaysFragmentShader, type GodRaysParams, type GodRaysUniforms } from './shaders/god-rays.js';\n\n/** A single-colored animated spiral that morphs across a wide range of shapes - from crisp, thin-lined geometry to flowing whirlpool forms and wavy, abstract rings */\nexport { spiralFragmentShader, type SpiralParams, type SpiralUniforms } from './shaders/spiral.js';\n\n/** Animated bands of color twisting and bending, producing spirals, arcs, and flowing circular patterns */\nexport { swirlMeta, swirlFragmentShader, type SwirlParams, type SwirlUniforms } from './shaders/swirl.js';\n\n/** Animated 2-color dithering over with multiple pattern sources (noise, warp, dots, waves, ripple, swirl, sphere) */\nexport {\n  ditheringFragmentShader,\n  DitheringShapes,\n  DitheringTypes,\n  type DitheringParams,\n  type DitheringUniforms,\n  type DitheringShape,\n  type DitheringType,\n} from './shaders/dithering.js';\n\n/** Multi-color gradients with grainy, noise-textured distortion available in 7 animated abstract forms */\nexport {\n  grainGradientFragmentShader,\n  grainGradientMeta,\n  GrainGradientShapes,\n  type GrainGradientParams,\n  type GrainGradientUniforms,\n  type GrainGradientShape,\n} from './shaders/grain-gradient.js';\n\n/** Luminous trails of color merging into a glowing gradient frame */\nexport {\n  pulsingBorderMeta,\n  pulsingBorderFragmentShader,\n  PulsingBorderAspectRatios,\n  type PulsingBorderParams,\n  type PulsingBorderUniforms,\n  type PulsingBorderAspectRatio,\n} from './shaders/pulsing-border.js';\n\n/** Glowing translucent 3D panels rotating around a central axis */\nexport {\n  colorPanelsFragmentShader,\n  colorPanelsMeta,\n  type ColorPanelsParams,\n  type ColorPanelsUniforms,\n} from './shaders/color-panels.js';\n\n/** Multi-point mesh gradients with up to 10 color spots, enhanced by two-direction warping, adjustable blend sharpness, and grain controls. Perfect for elegant wallpapers and atmospheric backdrops */\nexport {\n  staticMeshGradientFragmentShader,\n  staticMeshGradientMeta,\n  type StaticMeshGradientParams,\n  type StaticMeshGradientUniforms,\n} from './shaders/static-mesh-gradient.js';\n\n/** Radial gradient with up to 10 blended colors, featuring advanced focal point control, shape distortion, and grain effects */\nexport {\n  staticRadialGradientFragmentShader,\n  staticRadialGradientMeta,\n  type StaticRadialGradientParams,\n  type StaticRadialGradientUniforms,\n} from './shaders/static-radial-gradient.js';\n\n/** A static texture built from multiple noise layers, usable for a realistic paper and cardboard surfaces or generating abstract patterns. Can be used as a image filter or as a texture */\nexport {\n  paperTextureFragmentShader,\n  paperTextureMeta,\n  type PaperTextureParams,\n  type PaperTextureUniforms,\n} from './shaders/paper-texture.js';\n\n/** Water-like surface distortion with natural caustic realism. Works as an image filter or animated texture without image */\nexport { waterFragmentShader, type WaterParams, type WaterUniforms } from './shaders/water.js';\n\n/** Fluted glass image filter transforms an image into streaked, ribbed distortions, giving a mix of clarity and obscurity */\nexport {\n  flutedGlassFragmentShader,\n  GlassDistortionShapes,\n  GlassGridShapes,\n  type GlassDistortionShape,\n  type GlassGridShape,\n  type FlutedGlassParams,\n  type FlutedGlassUniforms,\n} from './shaders/fluted-glass.js';\n\n/** A dithering image filter with support for 4 dithering modes and multiple color palettes (2-color, 3-color, and multicolor options, using either predefined colors or ones sampled directly from the original image) */\nexport {\n  imageDitheringFragmentShader,\n  type ImageDitheringParams,\n  type ImageDitheringUniforms,\n} from './shaders/image-dithering.js';\n\n/** Lens Distortion image filter that separates an image into shifting color layers, recreating the chromatic aberration of a lens, and warps the image geometry with barrel or pincushion curvature */\nexport {\n  lensDistortionFragmentShader,\n  lensDistortionMeta,\n  type LensDistortionParams,\n  type LensDistortionUniforms,\n} from './shaders/lens-distortion.js';\n\n/** A glowing gradient of colors flowing through an input image. The effect creates a smoothly animated wave of intensity across the image */\nexport {\n  heatmapMeta,\n  heatmapFragmentShader,\n  toProcessedHeatmap,\n  type HeatmapParams,\n  type HeatmapUniforms,\n} from './shaders/heatmap.js';\n\n/** Futuristic liquid metal material applied to uploaded logo or one of pre-defined abstract shape */\nexport {\n  liquidMetalFragmentShader,\n  LiquidMetalShapes,\n  toProcessedLiquidMetal,\n  type LiquidMetalShape,\n  type LiquidMetalParams,\n  type LiquidMetalUniforms,\n} from './shaders/liquid-metal.js';\n\n/** A halftone-dot image filter featuring customizable grids, color palettes, and dot styles */\nexport {\n  HalftoneDotsTypes,\n  HalftoneDotsGrids,\n  halftoneDotsFragmentShader,\n  type HalftoneDotsParams,\n  type HalftoneDotsUniforms,\n  type HalftoneDotsType,\n  type HalftoneDotsGrid,\n} from './shaders/halftone-dots.js';\n\n/** A halftone CMYK classic algo */\nexport {\n  HalftoneCmykTypes,\n  halftoneCmykFragmentShader,\n  type HalftoneCmykParams,\n  type HalftoneCmykUniforms,\n  type HalftoneCmykType,\n} from './shaders/halftone-cmyk.js';\n\n/** Animated color fields running around a glassy logo shape */\nexport {\n  gemSmokeMeta,\n  gemSmokeFragmentShader,\n  toProcessedGemSmoke,\n  GemSmokeShapes,\n  type GemSmokeShape,\n  type GemSmokeParams,\n  type GemSmokeUniforms,\n} from './shaders/gem-smoke.js';\n\n// ----- Utils ----- //\nexport { getShaderColorFromString } from './get-shader-color-from-string.js';\nexport { getShaderNoiseTexture } from './get-shader-noise-texture.js';\nexport { emptyPixel } from './empty-pixel.js';\n"],
+  "mappings": ";;;;;AACA,SAAS,aAAa,4BAA4B;AAClD,SAAS,+BAA+B;AACxC,SAAS,0BAAoD;AAU7D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP,SAAS,gCAAgF;AAGzF;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP,SAAS,iCAAmF;AAG5F,SAAS,aAAa,6BAAuE;AAG7F,SAAS,2BAAiE;AAG1E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP,SAAS,aAAa,6BAAuE;AAG7F,SAAS,4BAAoE;AAG7E,SAAS,WAAW,2BAAiE;AAGrF;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP,SAAS,2BAAiE;AAG1E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAGP;AAAA,EACE;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP,SAAS,gCAAgC;AACzC,SAAS,6BAA6B;AACtC,SAAS,kBAAkB;",
   "names": []
 }

package/dist/shader-mount.d.ts

@@ -1,17 +1,8 @@
 export declare class ShaderMount {
     parentElement: PaperShaderElement;
-    /** The canvas the shader is drawn on, which is the root shader's canvas when nested in its HTML */
     canvasElement: HTMLCanvasElement;
     private gl;
     private program;
-    private vertexArray;
-    /** Canvas of the root shader, when this one is nested in its HTML and renders into a framebuffer of its context */
-    private hostCanvas;
-    /** Where a nested shader renders to, so its parent can paste it into its HTML */
-    private output;
-    /** Size of what the shader draws into: its canvas, or its output when nested */
-    private drawingWidth;
-    private drawingHeight;
     private uniformLocations;
     /** The fragment shader that we are using */
     private fragmentShader;
@@ -86,22 +77,11 @@ export declare class ShaderMount {
     private setupResizeObserver;
     private setupIntersectionObserver;
     private handleVisualViewportChange;
+    /** Resizes to the canvas right away, for size changes the resize observer would only see next frame */
+    syncSize: () => void;
     /** Resize handler for when the container div changes size or the max pixel count changes and we want to resize our canvas to match */
     private handleResize;
     private render;
-    private advanceFrame;
-    /** Draws the shader, after the shaders nested in its HTML so they can be pasted into it */
-    private draw;
-    /** Pastes the output of the nested shaders into the HTML that holds them, where they're laid out */
-    private pasteNestedShaders;
-    /** All the shaders nested in the HTML of this root shader, at any depth */
-    private getNestedShaders;
-    /** The nested shaders whose closest shader ancestor is this one */
-    private getNestedChildren;
-    private getParentShader;
-    /** The shader that owns the canvas and runs the render loop */
-    private getRoot;
-    private isAnimating;
     private requestRender;
     /** Creates a texture from an image and sets it into a uniform value */
     private setTextureUniform;
@@ -111,8 +91,6 @@ export declare class ShaderMount {
     /** Captures each HTML uniform into its texture. On resize only HTML that has a snapshot already, so it can't throw */
     private captureHtml;
     private unsetHtmlUniform;
-    /** WebGL doesn't tell hit testing and accessibility where the HTML is drawn, which is where it's laid out */
-    private updateHtmlGeometry;
     private handleCanvasPaint;
     /** Utility: recursive equality test for all the uniforms */
     private areUniformValuesEqual;
@@ -127,8 +105,6 @@ export declare class ShaderMount {
     /** Apply the target speed, pausing (0) while the tab is hidden or the element is out of the viewport */
     private updateCurrentSpeed;
     private setCurrentSpeed;
-    /** The root shader loops while it or any of the shaders nested in it animates */
-    private updateAnimationLoop;
     /** Set the maximum pixel count for the shader, this will limit the number of pixels that will be rendered */
     setMaxPixelCount: (newMaxPixelCount?: number) => void;
     /** Set the minimum pixel ratio for the shader */