stickyflow 0.9.3 → 0.11.0

package/dist/{chunk-C3LVKPWQ.js → chunk-RQYZNW2I.js}

@@ -1,6 +1,6 @@
-import { render } from './chunk-G2N3KJYJ.js';
-import { parseContractVersion, isContractCompatible, Emitter, resolveOwner, CHANGE_COLOR, findOwnerNode, isPrimary, linkSelectionOverlay, pathSelectionOverlay, isometricSelectionOverlay, shapeSelectionOverlay, DERIVED_HEIGHT_ROLES, quickDuplicateBubbles, isCameraGesture, linkChangeOverlay, shapeChangeOverlay, startChangeFade, REDUCED_MOTION_DURATION_MS, FLASH_DURATION_MS } from './chunk-AAP24GBG.js';
-import { getComponentDescriptor, formatRollingNumber, DEFAULT_ROLLING_NUMBER_STYLE } from './chunk-Q6FBISNP.js';
+import { render } from './chunk-Q6QLU6YQ.js';
+import { parseContractVersion, isContractCompatible, Emitter, resolveOwner, CHANGE_COLOR, findOwnerNode, isPrimary, linkSelectionOverlay, pathSelectionOverlay, isometricSelectionOverlay, shapeSelectionOverlay, DERIVED_HEIGHT_ROLES, quickDuplicateBubbles, isCameraGesture, linkChangeOverlay, shapeChangeOverlay, startChangeFade, REDUCED_MOTION_DURATION_MS, FLASH_DURATION_MS } from './chunk-BFQWCOEC.js';
+import { getComponentDescriptor, formatRollingNumber, DEFAULT_ROLLING_NUMBER_STYLE, parseHexRgb } from './chunk-G6IW2IX3.js';
 
 // src/runtime/viewer/components/rollingNumberDom.ts
 var HTML_NAMESPACE = "http://www.w3.org/1999/xhtml";
@@ -275,10 +275,14 @@ function parameters(surface) {
 function positive(value, fallback) {
   return Number(value) > 0 ? Number(value) : fallback;
 }
+function rangeOf(params) {
+  return {
+    min: Number(params.min) || 0,
+    max: Number.isFinite(Number(params.max)) && params.max !== void 0 ? Number(params.max) : 100
+  };
+}
 function rulerProgress(surface, value) {
-  const params = parameters(surface);
-  const min = Number(params.min) || 0;
-  const max = Number.isFinite(Number(params.max)) && params.max !== void 0 ? Number(params.max) : 100;
+  const { min, max } = rangeOf(parameters(surface));
   return clamp01(max === min ? 0 : (value - min) / (max - min));
 }
 function move(node, dx, dy) {
@@ -289,19 +293,11 @@ function move(node, dx, dy) {
   written.set(node, next);
   node.setAttribute("transform", next);
 }
-function hexToRgb(value) {
-  const match = /^#([0-9a-f]{6})$/i.exec(value.trim());
-  if (!match) {
-    return null;
-  }
-  const number2 = parseInt(match[1], 16);
-  return [number2 >> 16 & 255, number2 >> 8 & 255, number2 & 255];
-}
 var WHITE = [255, 255, 255];
 function shade(node, bump, target) {
   const base = fills.get(node) ?? node.getAttribute("fill") ?? "";
   fills.set(node, base);
-  const rgb = hexToRgb(base);
+  const rgb = parseHexRgb(base);
   if (!rgb) {
     return;
   }
@@ -312,61 +308,84 @@ function shade(node, bump, target) {
     child.style.fill = fill;
   }
 }
+function rulerOf(surface, progressOf) {
+  const params = parameters(surface);
+  const id = surface.getAttribute("data-sf-id") ?? "";
+  const width = Number(surface.getAttribute("width"));
+  const height = Number(surface.getAttribute("height"));
+  const horizontal = params.axis === "horizontal";
+  const across = horizontal ? height : width;
+  const dent = params.dent === void 0 ? 1 : Number(params.dent);
+  return {
+    id,
+    params,
+    x: Number(surface.getAttribute("x")),
+    y: Number(surface.getAttribute("y")),
+    width,
+    height,
+    horizontal,
+    progress: clamp01(progressOf(id) ?? Number(params.progress)),
+    inset: positive(params.inset, 0.05),
+    extent: horizontal ? width : height,
+    across,
+    depth: (dent < 0 ? 1 : dent) * 0.16 * across
+  };
+}
+function placeKnob(svg, ruler) {
+  const { params, x, y, width, height, horizontal, across, depth } = ruler;
+  const knobId = typeof params.knob === "string" ? params.knob : "";
+  if (!knobId) {
+    return void 0;
+  }
+  const nodes = [...svg.querySelectorAll(`[data-sf-id="${CSS.escape(knobId)}"]`)];
+  const primary = nodes.find((node) => node.hasAttribute("data-sf-primary"));
+  if (!primary?.getBBox) {
+    return void 0;
+  }
+  move(primary, 0, 0);
+  const box = primary.getBBox();
+  const half = (horizontal ? box.height : box.width) / 2;
+  const along = ruler.inset + (1 - 2 * ruler.inset) * ruler.progress;
+  const line = positive(params.line, 0.7);
+  const gap = (params.gap === void 0 ? 0.04 : Number(params.gap)) * across;
+  const side = line * across - depth + half + gap;
+  const target = horizontal ? { x: x + width * along, y: y + side } : { x: x + side, y: y + height * (1 - along) };
+  const dx = target.x - (box.x + box.width / 2);
+  const dy = target.y - (box.y + box.height / 2);
+  for (const node of nodes) {
+    move(node, dx, dy);
+  }
+  return half / across;
+}
+function liftLabels(svg, ruler) {
+  const { id, params, horizontal, extent, inset, progress, depth } = ruler;
+  const { min, max } = rangeOf(params);
+  const peak = (typeof params.peak === "string" ? parseHexRgb(params.peak) : null) ?? WHITE;
+  const spread = positive(params.spread, 0.07) * extent;
+  const start = inset * extent;
+  const span = (1 - 2 * inset) * extent;
+  const knobAt = start + span * progress;
+  for (const label of svg.querySelectorAll(`text[data-sf-id="${CSS.escape(id)}"]`)) {
+    const value = Number(label.textContent);
+    if (!Number.isFinite(value) || max === min) {
+      continue;
+    }
+    const labelAt = start + span * clamp01((value - min) / (max - min));
+    const bump = Math.exp(-(((labelAt - knobAt) / spread) ** 2));
+    const shift = depth * 0.4 * bump;
+    move(label, horizontal ? 0 : -shift, horizontal ? -shift : 0);
+    shade(label, bump, peak);
+  }
+}
 function placeRulerKnobs(svg, progressOf) {
   const radii = /* @__PURE__ */ new Map();
   for (const surface of svg.querySelectorAll('foreignObject[data-sf-shader="ruler"]')) {
-    const params = parameters(surface);
-    const peak = (typeof params.peak === "string" ? hexToRgb(params.peak) : null) ?? WHITE;
-    const id = surface.getAttribute("data-sf-id") ?? "";
-    const x = Number(surface.getAttribute("x"));
-    const y = Number(surface.getAttribute("y"));
-    const width = Number(surface.getAttribute("width"));
-    const height = Number(surface.getAttribute("height"));
-    const horizontal = params.axis === "horizontal";
-    const progress = clamp01(progressOf(id) ?? Number(params.progress));
-    const inset = positive(params.inset, 0.05);
-    const line = positive(params.line, 0.7);
-    const extent = horizontal ? width : height;
-    const across = horizontal ? height : width;
-    const along = inset + (1 - 2 * inset) * progress;
-    const dent = params.dent === void 0 ? 1 : Number(params.dent);
-    const depth = (dent < 0 ? 1 : dent) * 0.16 * across;
-    const knobId = typeof params.knob === "string" ? params.knob : "";
-    if (knobId) {
-      const nodes = [...svg.querySelectorAll(`[data-sf-id="${CSS.escape(knobId)}"]`)];
-      const primary = nodes.find((node) => node.hasAttribute("data-sf-primary"));
-      if (primary?.getBBox) {
-        move(primary, 0, 0);
-        const box = primary.getBBox();
-        const half = (horizontal ? box.height : box.width) / 2;
-        radii.set(id, half / across);
-        const gap = (params.gap === void 0 ? 0.04 : Number(params.gap)) * across;
-        const side = line * across - depth + half + gap;
-        const target = horizontal ? { x: x + width * along, y: y + side } : { x: x + side, y: y + height * (1 - along) };
-        const dx = target.x - (box.x + box.width / 2);
-        const dy = target.y - (box.y + box.height / 2);
-        for (const node of nodes) {
-          move(node, dx, dy);
-        }
-      }
-    }
-    const min = Number(params.min) || 0;
-    const max = Number.isFinite(Number(params.max)) && params.max !== void 0 ? Number(params.max) : 100;
-    const spread = positive(params.spread, 0.07) * extent;
-    const start = inset * extent;
-    const span = (1 - 2 * inset) * extent;
-    const knobAt = start + span * progress;
-    for (const label of svg.querySelectorAll(`text[data-sf-id="${CSS.escape(id)}"]`)) {
-      const value = Number(label.textContent);
-      if (!Number.isFinite(value) || max === min) {
-        continue;
-      }
-      const labelAt = start + span * clamp01((value - min) / (max - min));
-      const bump = Math.exp(-(((labelAt - knobAt) / spread) ** 2));
-      const shift = depth * 0.4 * bump;
-      move(label, horizontal ? 0 : -shift, horizontal ? -shift : 0);
-      shade(label, bump, peak);
+    const ruler = rulerOf(surface, progressOf);
+    const radius = placeKnob(svg, ruler);
+    if (radius !== void 0) {
+      radii.set(ruler.id, radius);
     }
+    liftLabels(svg, ruler);
   }
   return radii;
 }
@@ -2950,9 +2969,7 @@ float roundedBoxDistance(vec2 point, vec2 halfSize, float radius) {
 }
 
 float random(vec2 point) {
-  vec3 value = fract(vec3(point.xyx) * 0.1031);
-  value += dot(value, value.yzx + 33.33);
-  return fract((value.x + value.y) * value.z);
+  return fract(sin(dot(mod(point, 289.0), vec2(127.1, 311.7))) * 43758.5453123);
 }
 
 void main() {
@@ -3563,6 +3580,218 @@ var violetGlassLightProgram = {
   fragmentSource: fragmentSource26
 };
 
+// src/runtime/viewer/shaders/builtins/vortex.ts
+var fragmentSource27 = `
+precision highp float;
+
+uniform float uTime;
+uniform float uSpeed;
+uniform float uIntensity;
+uniform float uRings;
+uniform float uRingWidth;
+uniform float uTwist;
+uniform float uArms;
+uniform float uWobble;
+uniform float uVariation;
+uniform float uOffsetX;
+uniform float uOffsetY;
+uniform float uSquash;
+uniform float uEye;
+uniform float uAngle;
+uniform float uSpread;
+uniform float uGlow;
+uniform float uGloss;
+uniform float uGlossHeight;
+uniform float uVignette;
+uniform float uGrain;
+uniform vec3 uColor;
+uniform vec3 uAccent;
+uniform vec3 uCool;
+varying vec2 vUv;
+
+float hash(vec2 p) {
+  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
+}
+
+void main() {
+  vec2 p = vUv * 2.0 - 1.0;
+  float edge = length(p);
+  if (edge > 1.0) discard;
+
+  float time = uTime * max(uSpeed, 0.0);
+
+  // The rings are measured from a middle that can lie off the middle of the face, and squeezed to give a little depth.
+  vec2 q = p - vec2(uOffsetX, uOffsetY);
+  q.y /= max(uSquash, 0.2);
+  float radius = length(q);
+  float around = atan(q.y, q.x);
+  float turn = around / 6.2831853;
+  // The twist turns the pattern more the nearer it is to the middle. The rings themselves stay round.
+  float angle = around + uTwist * pow(1.0 - radius, 2.0) * 3.0 + time * 0.3 * (1.0 - radius);
+
+  // The phase of the rings: outwards from the middle, drifting inwards with time. Whole arms make the rings join into a spiral, and a
+  // whole number leaves no seam. The wobble bends the rings so no two are alike.
+  float bend = uWobble * (0.12 * sin(angle * 2.0 + time * 0.6 + radius * 3.0) + 0.06 * sin(angle * 3.0 - time * 0.45));
+  float phase = (radius + bend) * uRings - time * 0.25 + floor(uArms + 0.5) * turn;
+  float away = abs(fract(phase) - 0.5);
+  float width = mix(0.04, 0.32, clamp(uRingWidth, 0.0, 1.0));
+  // Every ring has a brightness of its own, so a few stand out and the others are faint.
+  float own = mix(1.0, 0.25 + 1.0 * hash(vec2(floor(phase), 3.7)), clamp(uVariation, 0.0, 1.0));
+  float ring = exp(-pow(away / width, 2.0)) * own;
+  float fineAway = abs(fract(phase * 2.3 + 0.5) - 0.5);
+  float fine = exp(-pow(fineAway / (width * 0.8), 2.0)) * 0.5;
+  float halo = exp(-pow(away / (width * 3.0), 2.0));
+
+  // Rings fade in from the eye and out towards the rim, and some arcs of a ring are brighter than the rest.
+  float envelope = smoothstep(uEye, uEye + 0.3, radius) * (1.0 - smoothstep(0.72, 1.05, edge));
+  float arcs = 0.45 + 0.55 * (0.5 + 0.5 * sin(angle * 2.0 + radius * 4.0 + time * 0.5 + 1.0));
+
+  // One side of the face is warm and the other cool, and the spread says how sharp the change is.
+  float side = cos(angle - radians(uAngle));
+  float warm = mix(0.5, smoothstep(-0.7, 0.9, side), clamp(uSpread, 0.0, 1.0));
+  vec3 hue = mix(uCool, uAccent, warm);
+
+  vec3 color = uColor * (0.4 + 0.5 * (1.0 - edge));
+  color += hue * (ring * 0.9 + fine * 0.3) * envelope * arcs * uGlow;
+  color += hue * halo * envelope * 0.1 * uGlow;
+  // The dark eye.
+  color *= 0.55 + 0.45 * smoothstep(0.0, uEye + 0.12, radius);
+
+  // A soft light on the glass at the bottom, with a clear lower edge.
+  float below = smoothstep(-1.0 + uGlossHeight, -1.0 + uGlossHeight * 0.35, p.y);
+  float across = 1.0 - smoothstep(0.45, 1.0, abs(p.x));
+  color += mix(uCool, vec3(1.0), 0.5) * below * across * uGloss;
+
+  color *= 1.0 - smoothstep(0.55, 1.0, edge) * uVignette;
+  color += (hash(gl_FragCoord.xy + time) - 0.5) * uGrain;
+
+  float alpha = 1.0 - smoothstep(0.985, 1.0, edge);
+  gl_FragColor = vec4(clamp(color * max(uIntensity, 0.0), 0.0, 1.0), alpha);
+}
+`;
+var vortexProgram = {
+  name: "vortex",
+  fragmentSource: fragmentSource27,
+  defaultParameters: {
+    speed: 0.3,
+    intensity: 1,
+    rings: 12,
+    ringWidth: 0.28,
+    twist: 0.6,
+    arms: 0,
+    wobble: 0.12,
+    variation: 0.85,
+    offsetX: 0,
+    offsetY: 0,
+    squash: 1,
+    eye: 0.3,
+    angle: 215,
+    spread: 0.6,
+    glow: 0.6,
+    gloss: 0.45,
+    glossHeight: 0.4,
+    vignette: 0.6,
+    grain: 0.02,
+    color: "#05060f",
+    accent: "#e0368f",
+    cool: "#3d4bff"
+  }
+};
+
+// src/runtime/viewer/shaders/builtins/waves.ts
+var fragmentSource28 = `
+precision highp float;
+
+uniform float uTime;
+uniform float uSpeed;
+uniform float uIntensity;
+uniform float uLayers;
+uniform float uLevel;
+uniform float uAmplitude;
+uniform float uFrequency;
+uniform float uTilt;
+uniform float uSoftness;
+uniform float uEdge;
+uniform float uShade;
+uniform float uGlow;
+uniform float uVignette;
+uniform float uGrain;
+uniform vec3 uColor;
+uniform vec3 uAccent;
+uniform vec3 uCool;
+uniform vec3 uHighlight;
+varying vec2 vUv;
+
+float hash(vec2 p) {
+  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
+}
+
+void main() {
+  vec2 p = vUv * 2.0 - 1.0;
+  float edge = length(p);
+  if (edge > 1.0) discard;
+
+  float time = uTime * max(uSpeed, 0.0);
+  float angle = radians(uTilt);
+  vec2 q = vec2(cos(angle) * p.x - sin(angle) * p.y, sin(angle) * p.x + cos(angle) * p.y);
+
+  // The ground, a little lighter in the middle.
+  vec3 color = uColor * (0.6 + 0.4 * (1.0 - edge));
+  float count = clamp(uLayers, 1.0, 8.0);
+  float soft = max(uSoftness, 0.004);
+
+  // The layers lie one behind the other, the farthest first. Each one fills the area under a wave line, and the line itself catches the light.
+  for (int i = 0; i < 8; i++) {
+    float index = float(i);
+    if (index >= count) break;
+    float depth = index / max(count - 1.0, 1.0);
+    float base = uLevel + mix(0.5, -0.55, depth);
+    float swing = uAmplitude * (0.55 + 0.45 * depth);
+    float line = base
+      + swing * 0.6 * sin(q.x * uFrequency * (1.0 + 0.3 * index) + index * 1.7 + time * (0.4 + 0.08 * index))
+      + swing * 0.4 * sin(q.x * uFrequency * 2.1 - index * 2.3 - time * 0.3);
+    float under = smoothstep(soft, -soft, q.y - line);
+    // A layer is lit at its crest and falls into shadow below it, so it reads as a fold of cloth and not as a flat band.
+    float sink = clamp((line - q.y) / 0.35, 0.0, 1.0);
+    vec3 layer = mix(uAccent, uCool, depth) * mix(1.15, 1.0 - 0.6 * uShade, sink);
+    color = mix(color, layer, under * (0.5 + 0.2 * depth));
+    float crest = exp(-pow((q.y - line) / (0.012 + soft * 0.5), 2.0));
+    color += uHighlight * crest * uEdge * (0.35 + 0.65 * (1.0 - depth));
+  }
+
+  // A soft light over the surface, and a dark edge.
+  color += uHighlight * uGlow * 0.18 * exp(-pow((q.y - 0.55) / 0.45, 2.0));
+  color *= 1.0 - smoothstep(0.6, 1.0, edge) * uVignette;
+  color += (hash(gl_FragCoord.xy + time) - 0.5) * uGrain;
+
+  float alpha = 1.0 - smoothstep(0.985, 1.0, edge);
+  gl_FragColor = vec4(clamp(color * max(uIntensity, 0.0), 0.0, 1.0), alpha);
+}
+`;
+var wavesProgram = {
+  name: "waves",
+  fragmentSource: fragmentSource28,
+  defaultParameters: {
+    speed: 0.25,
+    intensity: 1,
+    layers: 5,
+    level: 0,
+    amplitude: 0.14,
+    frequency: 3.2,
+    tilt: -12,
+    softness: 0.05,
+    edge: 0.5,
+    shade: 0.6,
+    glow: 0.5,
+    vignette: 0.4,
+    grain: 0.02,
+    color: "#0e0828",
+    accent: "#6b3fd4",
+    cool: "#2f5fe0",
+    highlight: "#b9a0ff"
+  }
+};
+
 // src/runtime/viewer/shaders/programs.ts
 var builtins = [
   orbProgram,
@@ -3590,7 +3819,9 @@ var builtins = [
   lightBandProgram,
   silkFoldsProgram,
   glowCardProgram,
-  glassDotsProgram
+  glassDotsProgram,
+  vortexProgram,
+  wavesProgram
 ];
 var programs = new Map(builtins.map((program) => [program.name, program]));
 function registerShaderProgram(program) {
@@ -3771,9 +4002,9 @@ function compile(gl, type, source) {
   }
   return shader;
 }
-function linkProgram(gl, fragmentSource27) {
+function linkProgram(gl, fragmentSource29) {
   const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX_SOURCE);
-  const fragment = compile(gl, gl.FRAGMENT_SHADER, fragmentSource27);
+  const fragment = compile(gl, gl.FRAGMENT_SHADER, fragmentSource29);
   if (!vertex || !fragment) {
     if (vertex) {
       gl.deleteShader(vertex);
@@ -3874,6 +4105,7 @@ function createSurface(canvas) {
   const baseFill = baseGeometry?.getAttribute("fill");
   baseGeometry?.setAttribute("fill", "none");
   return {
+    programName: definition.name,
     owner,
     canvas,
     gl,
@@ -3910,6 +4142,22 @@ function releaseSurface(surface) {
     surface.baseGeometry.setAttribute("fill", surface.baseFill);
   }
 }
+function refreshSurface(surface, svg) {
+  const owner = surface.canvas.closest("[data-sf-shader]");
+  const name = owner?.getAttribute("data-sf-shader");
+  const definition = name ? shaderProgram(name) : void 0;
+  if (!owner || !svg.contains(surface.canvas) || !definition) {
+    return false;
+  }
+  if (definition.name !== surface.programName || definition.replacesBaseFill || surface.baseGeometry) {
+    return false;
+  }
+  surface.owner = owner;
+  surface.parameters = { ...definition.defaultParameters, ...parametersOf(owner) };
+  surface.surfacePadding = surfacePaddingOf(owner);
+  surface.shapeColor = color(owner.getAttribute("data-sf-shader-fill") ?? void 0, [1, 1, 1]);
+  return true;
+}
 
 // src/runtime/viewer/shaders/reactiveLightField.ts
 function geometryOf(surface) {
@@ -4042,8 +4290,7 @@ function applyBackdrop(surface, backdrop) {
 }
 var MAX_SURFACE_PIXELS = 2560;
 var TRAIL_LENGTH = 16;
-function renderSurface(surface, seconds) {
-  const { canvas, gl, parameters: parameters3 } = surface;
+function fitCanvas(canvas) {
   const shown = canvas.getBoundingClientRect();
   const density = Math.min(globalThis.devicePixelRatio || 1, 3);
   const fit = Math.min(1, MAX_SURFACE_PIXELS / Math.max(1, shown.width * density, shown.height * density));
@@ -4053,32 +4300,22 @@ function renderSurface(surface, seconds) {
     canvas.width = width;
     canvas.height = height;
   }
-  gl.viewport(0, 0, width, height);
-  gl.clearColor(0, 0, 0, 0);
-  gl.clear(gl.COLOR_BUFFER_BIT);
-  gl.useProgram(surface.program);
-  const resolution = gl.getUniformLocation(surface.program, "uResolution");
-  if (resolution) {
-    gl.uniform2f(resolution, width, height);
-  }
-  const logicalWidth = Number(surface.owner.getAttribute("width"));
-  uniform1f(
-    surface,
-    "uPixelScale",
-    Number.isFinite(logicalWidth) && logicalWidth > 0 ? width / logicalWidth : density * fit
-  );
-  uniform1f(surface, "uTime", seconds);
-  if (surface.backdropTexture) {
-    syncBackdropBounds(surface);
-    gl.activeTexture(gl.TEXTURE0);
-    gl.bindTexture(gl.TEXTURE_2D, surface.backdropTexture);
-    const sampler = gl.getUniformLocation(surface.program, "uBackdrop");
-    if (sampler) {
-      gl.uniform1i(sampler, 0);
-    }
-    uniform2f(surface, "uBackdropOrigin", surface.backdropOrigin);
-    uniform2f(surface, "uBackdropScale", surface.backdropScale);
+  return { width, height, density, fit };
+}
+function bindBackdrop(surface, texture) {
+  const { gl } = surface;
+  syncBackdropBounds(surface);
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  const sampler = gl.getUniformLocation(surface.program, "uBackdrop");
+  if (sampler) {
+    gl.uniform1i(sampler, 0);
   }
+  uniform2f(surface, "uBackdropOrigin", surface.backdropOrigin);
+  uniform2f(surface, "uBackdropScale", surface.backdropScale);
+}
+function uploadParameters(surface) {
+  const { parameters: parameters3 } = surface;
   for (const [key, fallback] of Object.entries(SHADER_DEFAULTS.numbers)) {
     uniform1f(surface, uniformName(key), number(parameters3[key], fallback));
   }
@@ -4086,9 +4323,9 @@ function renderSurface(surface, seconds) {
     uniform3f(surface, uniformName(key), color(parameters3[key], [...fallback]));
   }
   uniform3f(surface, "uShapeColor", surface.shapeColor);
-  const elapsed = surface.lastSeconds === void 0 ? 0 : Math.max(0, Math.min(seconds - surface.lastSeconds, 0.1));
-  surface.lastSeconds = seconds;
-  applyParameters(surface, elapsed);
+}
+function uploadPointer(surface, seconds, elapsed) {
+  const { gl, parameters: parameters3 } = surface;
   surface.hover += ((surface.hovering ? 1 : 0) - surface.hover) * (1 - Math.exp(-elapsed / 0.18));
   uniform2f(surface, "uPointer", [surface.pointer.x, surface.pointer.y]);
   uniform1f(surface, "uHover", surface.hover);
@@ -4103,13 +4340,44 @@ function renderSurface(surface, seconds) {
   if (trail) {
     gl.uniform3fv(trail, places);
   }
-  if (surface.reactiveLight) {
-    uniform1f(surface, "uLightX", surface.reactiveLight.x);
-    uniform1f(surface, "uLightY", surface.reactiveLight.y);
-    uniform1f(surface, "uLightStrength", surface.reactiveLight.strength);
-    uniform1f(surface, "uGlowRadius", surface.reactiveLight.radius);
-    uniform3f(surface, "uLightColor", surface.reactiveLight.color);
+}
+function uploadReactiveLight(surface) {
+  if (!surface.reactiveLight) {
+    return;
+  }
+  uniform1f(surface, "uLightX", surface.reactiveLight.x);
+  uniform1f(surface, "uLightY", surface.reactiveLight.y);
+  uniform1f(surface, "uLightStrength", surface.reactiveLight.strength);
+  uniform1f(surface, "uGlowRadius", surface.reactiveLight.radius);
+  uniform3f(surface, "uLightColor", surface.reactiveLight.color);
+}
+function renderSurface(surface, seconds) {
+  const { canvas, gl } = surface;
+  const { width, height, density, fit } = fitCanvas(canvas);
+  gl.viewport(0, 0, width, height);
+  gl.clearColor(0, 0, 0, 0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  gl.useProgram(surface.program);
+  const resolution = gl.getUniformLocation(surface.program, "uResolution");
+  if (resolution) {
+    gl.uniform2f(resolution, width, height);
   }
+  const logicalWidth = Number(surface.owner.getAttribute("width"));
+  uniform1f(
+    surface,
+    "uPixelScale",
+    Number.isFinite(logicalWidth) && logicalWidth > 0 ? width / logicalWidth : density * fit
+  );
+  uniform1f(surface, "uTime", seconds);
+  if (surface.backdropTexture) {
+    bindBackdrop(surface, surface.backdropTexture);
+  }
+  uploadParameters(surface);
+  const elapsed = surface.lastSeconds === void 0 ? 0 : Math.max(0, Math.min(seconds - surface.lastSeconds, 0.1));
+  surface.lastSeconds = seconds;
+  applyParameters(surface, elapsed);
+  uploadPointer(surface, seconds, elapsed);
+  uploadReactiveLight(surface);
   uniform1f(surface, "uSurfacePadding", surface.surfacePadding);
   gl.drawArrays(gl.TRIANGLES, 0, 6);
 }
@@ -4184,152 +4452,187 @@ function watchSvgChanges(svg, view, onChange) {
     sizes?.disconnect();
   };
 }
-function mountShaderSurfaces(svg) {
-  let surfaces = [];
-  let frame;
-  let backdropGeneration = 0;
-  let recapture;
-  const view = svg.ownerDocument.defaultView;
-  const clock = createSurfaceClock(view);
-  const draw = (milliseconds) => {
-    if (!clock.paused()) {
-      updateReactiveLightFields(surfaces);
-      for (const surface of surfaces) {
-        renderSurface(surface, milliseconds / 1e3 - clock.spent());
+function rememberSurfaces(surfaces) {
+  return new Map(
+    surfaces.flatMap((surface) => {
+      const ownerId = surface.owner.getAttribute("data-sf-id");
+      return ownerId ? [
+        [
+          ownerId,
+          {
+            smoothed: new Map(surface.smoothed),
+            reactiveLight: surface.reactiveLight,
+            pointer: surface.pointer,
+            hover: surface.hover,
+            hovering: surface.hovering,
+            trail: surface.trail
+          }
+        ]
+      ] : [];
+    })
+  );
+}
+function createSurfaces(svg, memory, kept) {
+  return [...svg.querySelectorAll("canvas[data-sf-shader-canvas]")].flatMap((canvas) => {
+    const keptSurface = kept.get(canvas);
+    if (keptSurface) {
+      return [keptSurface];
+    }
+    const surface = createSurface(canvas);
+    const ownerId = surface?.owner.getAttribute("data-sf-id");
+    const previous = ownerId ? memory.get(ownerId) : void 0;
+    if (surface && previous) {
+      Object.assign(surface, previous);
+    }
+    return surface ? [surface] : [];
+  });
+}
+function followPointer(surface, event, now) {
+  const box = surface.canvas.getBoundingClientRect();
+  const inside = box.width > 0 && box.height > 0 && event.clientX >= box.left && event.clientX <= box.right && event.clientY >= box.top && event.clientY <= box.bottom;
+  surface.hovering = inside;
+  if (!inside) {
+    return;
+  }
+  surface.pointer = { x: (event.clientX - box.left) / box.width, y: 1 - (event.clientY - box.top) / box.height };
+  const last = surface.trail[surface.trail.length - 1];
+  if (!last || now - last.at >= TRAIL_SPACING) {
+    surface.trail.push({ ...surface.pointer, at: now });
+    if (surface.trail.length > TRAIL_LENGTH2) {
+      surface.trail.shift();
+    }
+  }
+}
+var ShaderSurfaces = class {
+  constructor(svg) {
+    this.svg = svg;
+    this.view = svg.ownerDocument.defaultView;
+    this.clock = createSurfaceClock(this.view);
+    this.unwatch = watchSvgChanges(svg, this.view, this.scheduleRecapture);
+    svg.addEventListener("pointermove", this.track);
+    svg.addEventListener("pointerleave", this.leave);
+    this.refresh();
+  }
+  svg;
+  surfaces = [];
+  frame;
+  backdropGeneration = 0;
+  recapture;
+  view;
+  clock;
+  unwatch;
+  capture() {
+    return capturePngs(this.svg, this.surfaces, this.clock.now());
+  }
+  setParameters(ownerId, parameters3) {
+    return updateParameters(this.surfaces, ownerId, parameters3, this.clock.now());
+  }
+  setPaused(paused) {
+    this.clock.setPaused(paused);
+  }
+  refresh() {
+    const memory = rememberSurfaces(this.surfaces);
+    this.cancelFrame();
+    const kept = /* @__PURE__ */ new Map();
+    for (const surface of this.surfaces) {
+      if (refreshSurface(surface, this.svg)) {
+        kept.set(surface.canvas, surface);
       }
     }
-    frame = view?.requestAnimationFrame(draw);
+    for (const surface of this.surfaces) {
+      if (!kept.has(surface.canvas)) {
+        releaseSurface(surface);
+      }
+    }
+    const generation = ++this.backdropGeneration;
+    this.surfaces = createSurfaces(this.svg, memory, kept);
+    updateReactiveLightFields(this.surfaces);
+    this.captureBackdrops(generation);
+    if (this.surfaces.length > 0) {
+      this.startFrames();
+    }
+  }
+  destroy() {
+    this.backdropGeneration += 1;
+    this.unwatch();
+    this.svg.removeEventListener("pointermove", this.track);
+    this.svg.removeEventListener("pointerleave", this.leave);
+    if (this.recapture !== void 0) {
+      this.view?.clearTimeout(this.recapture);
+    }
+    this.stop();
+  }
+  draw = (milliseconds) => {
+    if (!this.clock.paused()) {
+      updateReactiveLightFields(this.surfaces);
+      for (const surface of this.surfaces) {
+        renderSurface(surface, milliseconds / 1e3 - this.clock.spent());
+      }
+    }
+    this.frame = this.view?.requestAnimationFrame(this.draw);
   };
-  const stop = () => {
-    if (frame !== void 0) {
-      view?.cancelAnimationFrame(frame);
-      frame = void 0;
+  cancelFrame() {
+    if (this.frame !== void 0) {
+      this.view?.cancelAnimationFrame(this.frame);
+      this.frame = void 0;
     }
-    for (const surface of surfaces) {
+  }
+  stop() {
+    this.cancelFrame();
+    for (const surface of this.surfaces) {
       releaseSurface(surface);
     }
-    surfaces = [];
-  };
-  const captureBackdrops = (generation) => {
-    for (const surface of surfaces) {
+    this.surfaces = [];
+  }
+  captureBackdrops(generation) {
+    for (const surface of this.surfaces) {
       if (!surface.usesBackdrop) {
         continue;
       }
-      void captureShaderBackdrop(svg, surface.owner).then((backdrop) => {
-        if (backdrop && generation === backdropGeneration) {
+      void captureShaderBackdrop(this.svg, surface.owner).then((backdrop) => {
+        if (backdrop && generation === this.backdropGeneration) {
           applyBackdrop(surface, backdrop);
         }
       });
     }
-  };
-  const startFrames = () => {
-    if (!view?.requestAnimationFrame) {
-      for (const surface of surfaces) {
+  }
+  startFrames() {
+    if (!this.view?.requestAnimationFrame) {
+      for (const surface of this.surfaces) {
         renderSurface(surface, 0);
       }
       return;
     }
-    if (clock.paused()) {
-      for (const surface of surfaces) {
-        renderSurface(surface, clock.now());
+    if (this.clock.paused()) {
+      for (const surface of this.surfaces) {
+        renderSurface(surface, this.clock.now());
       }
     }
-    frame = view.requestAnimationFrame(draw);
-  };
-  const refresh = () => {
-    const previousState = new Map(
-      surfaces.flatMap((surface) => {
-        const ownerId = surface.owner.getAttribute("data-sf-id");
-        return ownerId ? [
-          [
-            ownerId,
-            {
-              smoothed: new Map(surface.smoothed),
-              reactiveLight: surface.reactiveLight,
-              pointer: surface.pointer,
-              hover: surface.hover,
-              hovering: surface.hovering,
-              trail: surface.trail
-            }
-          ]
-        ] : [];
-      })
-    );
-    stop();
-    const generation = ++backdropGeneration;
-    surfaces = [...svg.querySelectorAll("canvas[data-sf-shader-canvas]")].flatMap((canvas) => {
-      const surface = createSurface(canvas);
-      const ownerId = surface?.owner.getAttribute("data-sf-id");
-      const previous = ownerId ? previousState.get(ownerId) : void 0;
-      if (surface && previous) {
-        surface.smoothed = previous.smoothed;
-        surface.reactiveLight = previous.reactiveLight;
-        surface.pointer = previous.pointer;
-        surface.hover = previous.hover;
-        surface.hovering = previous.hovering;
-        surface.trail = previous.trail;
-      }
-      return surface ? [surface] : [];
-    });
-    updateReactiveLightFields(surfaces);
-    captureBackdrops(generation);
-    if (surfaces.length > 0) {
-      startFrames();
-    }
-  };
-  const scheduleRecapture = () => {
-    if (recapture !== void 0) {
-      view?.clearTimeout(recapture);
+    this.frame = this.view.requestAnimationFrame(this.draw);
+  }
+  scheduleRecapture = () => {
+    if (this.recapture !== void 0) {
+      this.view?.clearTimeout(this.recapture);
     }
-    recapture = view?.setTimeout(() => {
-      recapture = void 0;
-      captureBackdrops(backdropGeneration);
+    this.recapture = this.view?.setTimeout(() => {
+      this.recapture = void 0;
+      this.captureBackdrops(this.backdropGeneration);
     }, RECAPTURE_DELAY_MS);
   };
-  const unwatch = watchSvgChanges(svg, view, scheduleRecapture);
-  const track = (event) => {
-    for (const surface of surfaces) {
-      const box = surface.canvas.getBoundingClientRect();
-      const inside = box.width > 0 && box.height > 0 && event.clientX >= box.left && event.clientX <= box.right && event.clientY >= box.top && event.clientY <= box.bottom;
-      surface.hovering = inside;
-      if (inside) {
-        surface.pointer = { x: (event.clientX - box.left) / box.width, y: 1 - (event.clientY - box.top) / box.height };
-        const now = clock.now();
-        const last = surface.trail[surface.trail.length - 1];
-        if (!last || now - last.at >= TRAIL_SPACING) {
-          surface.trail.push({ ...surface.pointer, at: now });
-          if (surface.trail.length > TRAIL_LENGTH2) {
-            surface.trail.shift();
-          }
-        }
-      }
+  track = (event) => {
+    const now = this.clock.now();
+    for (const surface of this.surfaces) {
+      followPointer(surface, event, now);
     }
   };
-  const leave = () => {
-    for (const surface of surfaces) {
+  leave = () => {
+    for (const surface of this.surfaces) {
       surface.hovering = false;
     }
   };
-  svg.addEventListener("pointermove", track);
-  svg.addEventListener("pointerleave", leave);
-  refresh();
-  const destroy = () => {
-    backdropGeneration += 1;
-    unwatch();
-    svg.removeEventListener("pointermove", track);
-    svg.removeEventListener("pointerleave", leave);
-    if (recapture !== void 0) {
-      view?.clearTimeout(recapture);
-    }
-    stop();
-  };
-  return {
-    capture: () => capturePngs(svg, surfaces, clock.now()),
-    setParameters: (ownerId, parameters3) => updateParameters(surfaces, ownerId, parameters3, clock.now()),
-    setPaused: clock.setPaused,
-    refresh,
-    destroy
-  };
+};
+function mountShaderSurfaces(svg) {
+  return new ShaderSurfaces(svg);
 }
 
 // src/runtime/viewer/source.ts
@@ -4717,5 +5020,5 @@ function createViewer(options) {
 }
 
 export { SHADER_DEFAULTS, connectInteraction, createViewer, registerShaderProgram, shaderProgram };
-//# sourceMappingURL=chunk-C3LVKPWQ.js.map
-//# sourceMappingURL=chunk-C3LVKPWQ.js.map
+//# sourceMappingURL=chunk-RQYZNW2I.js.map
+//# sourceMappingURL=chunk-RQYZNW2I.js.map