stickyflow 0.9.2 → 0.10.0

package/dist/{chunk-C3LVKPWQ.js → chunk-VPNOVRWP.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-SDOHUNBW.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-EGUPN56K.js';
+import { getComponentDescriptor, formatRollingNumber, DEFAULT_ROLLING_NUMBER_STYLE, parseHexRgb } from './chunk-HRU6VOEC.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;
 }
@@ -4042,8 +4061,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 +4071,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 +4094,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 +4111,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 +4223,169 @@ 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) {
+  return [...svg.querySelectorAll("canvas[data-sf-shader-canvas]")].flatMap((canvas) => {
+    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.stop();
+    const generation = ++this.backdropGeneration;
+    this.surfaces = createSurfaces(this.svg, memory);
+    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());
       }
     }
-    frame = view?.requestAnimationFrame(draw);
+    this.frame = this.view?.requestAnimationFrame(this.draw);
   };
-  const stop = () => {
-    if (frame !== void 0) {
-      view?.cancelAnimationFrame(frame);
-      frame = void 0;
+  stop() {
+    if (this.frame !== void 0) {
+      this.view?.cancelAnimationFrame(this.frame);
+      this.frame = void 0;
     }
-    for (const surface of surfaces) {
+    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());
-      }
-    }
-    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;
+    if (this.clock.paused()) {
+      for (const surface of this.surfaces) {
+        renderSurface(surface, this.clock.now());
       }
-      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 +4773,5 @@ function createViewer(options) {
 }
 
 export { SHADER_DEFAULTS, connectInteraction, createViewer, registerShaderProgram, shaderProgram };
-//# sourceMappingURL=chunk-C3LVKPWQ.js.map
-//# sourceMappingURL=chunk-C3LVKPWQ.js.map
+//# sourceMappingURL=chunk-VPNOVRWP.js.map
+//# sourceMappingURL=chunk-VPNOVRWP.js.map