stickyflow 0.9.2 → 0.10.0

package/dist/{chunk-3EOG34QN.cjs → chunk-KRSX4UZ7.cjs}

@@ -1,8 +1,8 @@
 'use strict';
 
-var chunkEURX7QT3_cjs = require('./chunk-EURX7QT3.cjs');
-var chunkMR32IJQO_cjs = require('./chunk-MR32IJQO.cjs');
-var chunkC25NWWIH_cjs = require('./chunk-C25NWWIH.cjs');
+var chunk5PJ55GPG_cjs = require('./chunk-5PJ55GPG.cjs');
+var chunkSCD3AHMY_cjs = require('./chunk-SCD3AHMY.cjs');
+var chunkLSEMXRB5_cjs = require('./chunk-LSEMXRB5.cjs');
 
 // src/runtime/viewer/components/rollingNumberDom.ts
 var HTML_NAMESPACE = "http://www.w3.org/1999/xhtml";
@@ -162,12 +162,12 @@ function componentDigits(surface) {
 function componentStyle(surface) {
   const encoded = surface.getAttribute("data-sf-widget-style");
   if (!encoded) {
-    return chunkC25NWWIH_cjs.DEFAULT_ROLLING_NUMBER_STYLE;
+    return chunkLSEMXRB5_cjs.DEFAULT_ROLLING_NUMBER_STYLE;
   }
   try {
-    return { ...chunkC25NWWIH_cjs.DEFAULT_ROLLING_NUMBER_STYLE, ...JSON.parse(encoded) };
+    return { ...chunkLSEMXRB5_cjs.DEFAULT_ROLLING_NUMBER_STYLE, ...JSON.parse(encoded) };
   } catch {
-    return chunkC25NWWIH_cjs.DEFAULT_ROLLING_NUMBER_STYLE;
+    return chunkLSEMXRB5_cjs.DEFAULT_ROLLING_NUMBER_STYLE;
   }
 }
 function positiveInteger(value) {
@@ -191,7 +191,7 @@ function setRollingNumber(surface, value, animate) {
     return false;
   }
   const previousValue = surface.getAttribute("data-sf-widget-value") ?? "";
-  const nextValue = chunkC25NWWIH_cjs.formatRollingNumber(value, positiveInteger(surface.getAttribute("data-sf-widget-digits")));
+  const nextValue = chunkLSEMXRB5_cjs.formatRollingNumber(value, positiveInteger(surface.getAttribute("data-sf-widget-digits")));
   if (previousValue === nextValue) {
     return true;
   }
@@ -277,10 +277,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) {
@@ -291,19 +295,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 = chunkLSEMXRB5_cjs.parseHexRgb(base);
   if (!rgb) {
     return;
   }
@@ -314,61 +310,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" ? chunkLSEMXRB5_cjs.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;
 }
@@ -671,7 +690,7 @@ function mountDisplay(container, svgString) {
 }
 
 // src/runtime/viewer/events.ts
-var Emitter2 = class extends chunkMR32IJQO_cjs.Emitter {
+var Emitter2 = class extends chunkSCD3AHMY_cjs.Emitter {
 };
 
 // src/runtime/viewer/export/raster.ts
@@ -761,11 +780,11 @@ function svgElement(document, name, attributes) {
 function readComponentStyle(surface) {
   try {
     return {
-      ...chunkC25NWWIH_cjs.DEFAULT_ROLLING_NUMBER_STYLE,
+      ...chunkLSEMXRB5_cjs.DEFAULT_ROLLING_NUMBER_STYLE,
       ...JSON.parse(surface.getAttribute("data-sf-widget-style") ?? "{}")
     };
   } catch {
-    return chunkC25NWWIH_cjs.DEFAULT_ROLLING_NUMBER_STYLE;
+    return chunkLSEMXRB5_cjs.DEFAULT_ROLLING_NUMBER_STYLE;
   }
 }
 function cellsOf(box, plain, fontSize = 0) {
@@ -905,7 +924,7 @@ function serializeSvgSnapshot(svg, captures) {
 // src/runtime/viewer/interaction/changeFlash.ts
 function createChangeFlash(svg) {
   const timers = /* @__PURE__ */ new Map();
-  const flash = (ownerIds, color2 = chunkMR32IJQO_cjs.CHANGE_COLOR) => {
+  const flash = (ownerIds, color2 = chunkSCD3AHMY_cjs.CHANGE_COLOR) => {
     const ids = [...new Set(ownerIds)];
     if (ids.length === 0) {
       return;
@@ -913,7 +932,7 @@ function createChangeFlash(svg) {
     const doc = svg.ownerDocument;
     const reducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
     for (const id of ids) {
-      const primary = chunkMR32IJQO_cjs.findOwnerNode(svg, id, chunkMR32IJQO_cjs.isPrimary);
+      const primary = chunkSCD3AHMY_cjs.findOwnerNode(svg, id, chunkSCD3AHMY_cjs.isPrimary);
       if (!primary) {
         continue;
       }
@@ -924,10 +943,10 @@ function createChangeFlash(svg) {
       for (const stale of svg.querySelectorAll(`[data-sf-change-overlay="${CSS.escape(id)}"]`)) {
         stale.remove();
       }
-      const overlay = primary.getAttribute("data-sf-role") === "link" ? chunkMR32IJQO_cjs.linkChangeOverlay(doc, primary, id, color2) : chunkMR32IJQO_cjs.shapeChangeOverlay(doc, primary, id, color2);
+      const overlay = primary.getAttribute("data-sf-role") === "link" ? chunkSCD3AHMY_cjs.linkChangeOverlay(doc, primary, id, color2) : chunkSCD3AHMY_cjs.shapeChangeOverlay(doc, primary, id, color2);
       svg.appendChild(overlay);
-      chunkMR32IJQO_cjs.startChangeFade(overlay, reducedMotion);
-      const duration = reducedMotion ? chunkMR32IJQO_cjs.REDUCED_MOTION_DURATION_MS : chunkMR32IJQO_cjs.FLASH_DURATION_MS;
+      chunkSCD3AHMY_cjs.startChangeFade(overlay, reducedMotion);
+      const duration = reducedMotion ? chunkSCD3AHMY_cjs.REDUCED_MOTION_DURATION_MS : chunkSCD3AHMY_cjs.FLASH_DURATION_MS;
       timers.set(
         id,
         setTimeout(() => {
@@ -1014,7 +1033,7 @@ var OwnerPointerController = class {
     this.#selection = selection;
   }
   hover(event) {
-    const owner = chunkMR32IJQO_cjs.resolveOwner(event.target);
+    const owner = chunkSCD3AHMY_cjs.resolveOwner(event.target);
     this.#emitter.emit(
       "ownerHover",
       owner ? { diagramId: this.#diagramId, owner, modifiers: modifiersOf(event) } : { diagramId: this.#diagramId, owner: null }
@@ -1022,7 +1041,7 @@ var OwnerPointerController = class {
   }
   select(event) {
     const target = event.target;
-    const owner = chunkMR32IJQO_cjs.resolveOwner(target);
+    const owner = chunkSCD3AHMY_cjs.resolveOwner(target);
     if (!owner) {
       this.#clearWhenOutsideOverlay(target);
       return;
@@ -1043,7 +1062,7 @@ var OwnerPointerController = class {
       owner,
       modifiers
     });
-    const node = chunkMR32IJQO_cjs.findOwnerNode(this.#svg, owner.id, chunkMR32IJQO_cjs.isPrimary);
+    const node = chunkSCD3AHMY_cjs.findOwnerNode(this.#svg, owner.id, chunkSCD3AHMY_cjs.isPrimary);
     if (node && !node.hasAttribute("tabindex")) {
       node.setAttribute("tabindex", "-1");
     }
@@ -1071,12 +1090,12 @@ var PointerInteractionSession = class {
   }
   #onPointerDown = (event) => {
     const target = event.target;
-    const overContent = Boolean(chunkMR32IJQO_cjs.resolveOwner(target)) || isSelectionOverlayControl(target);
+    const overContent = Boolean(chunkSCD3AHMY_cjs.resolveOwner(target)) || isSelectionOverlayControl(target);
     this.#down = {
       x: event.clientX,
       y: event.clientY,
       moved: false,
-      panable: chunkMR32IJQO_cjs.isCameraGesture(event) || !overContent
+      panable: chunkSCD3AHMY_cjs.isCameraGesture(event) || !overContent
     };
   };
   #onPointerMove = (event) => {
@@ -1104,7 +1123,7 @@ var PointerInteractionSession = class {
     if (!this.#down.moved) {
       return false;
     }
-    if (this.#down.panable && chunkMR32IJQO_cjs.isCameraGesture(event)) {
+    if (this.#down.panable && chunkSCD3AHMY_cjs.isCameraGesture(event)) {
       this.#display.panBy(event.movementX, event.movementY);
     }
     return true;
@@ -1128,15 +1147,15 @@ function paintSelectionOverlays(svg, selectedIds, owners) {
   }
   const document = svg.ownerDocument;
   for (const id of selectedIds) {
-    const primary = chunkMR32IJQO_cjs.findOwnerNode(svg, id, chunkMR32IJQO_cjs.isPrimary);
+    const primary = chunkSCD3AHMY_cjs.findOwnerNode(svg, id, chunkSCD3AHMY_cjs.isPrimary);
     if (!primary) {
       continue;
     }
     const owner = owners.get(id);
-    const overlay = owner?.role === "link" ? chunkMR32IJQO_cjs.linkSelectionOverlay(document, primary, id, svg) : owner?.role === "path" ? chunkMR32IJQO_cjs.pathSelectionOverlay(document, primary, id, svg) : owner?.role === "isometric" ? chunkMR32IJQO_cjs.isometricSelectionOverlay(document, primary, id, svg) : chunkMR32IJQO_cjs.shapeSelectionOverlay(document, primary, id, svg, owner ? chunkMR32IJQO_cjs.DERIVED_HEIGHT_ROLES.has(owner.role) : false);
+    const overlay = owner?.role === "link" ? chunkSCD3AHMY_cjs.linkSelectionOverlay(document, primary, id, svg) : owner?.role === "path" ? chunkSCD3AHMY_cjs.pathSelectionOverlay(document, primary, id, svg) : owner?.role === "isometric" ? chunkSCD3AHMY_cjs.isometricSelectionOverlay(document, primary, id, svg) : chunkSCD3AHMY_cjs.shapeSelectionOverlay(document, primary, id, svg, owner ? chunkSCD3AHMY_cjs.DERIVED_HEIGHT_ROLES.has(owner.role) : false);
     svg.appendChild(overlay);
     if (owner?.role === "shape" && selectedIds.size === 1) {
-      svg.appendChild(chunkMR32IJQO_cjs.quickDuplicateBubbles(document, primary, id, svg));
+      svg.appendChild(chunkSCD3AHMY_cjs.quickDuplicateBubbles(document, primary, id, svg));
     }
   }
 }
@@ -1175,7 +1194,7 @@ var SelectionController = class {
   selectIds(ids) {
     for (const id of ids) {
       const element = this.#svg.querySelector(`[data-sf-id="${CSS.escape(id)}"]`);
-      const owner = chunkMR32IJQO_cjs.resolveOwner(element);
+      const owner = chunkSCD3AHMY_cjs.resolveOwner(element);
       if (owner) {
         this.remember(owner);
       }
@@ -1187,7 +1206,7 @@ var SelectionController = class {
 // src/runtime/viewer/interaction/wheel.ts
 function bindWheelZoom(display, selection) {
   const onWheel = (event) => {
-    if (!chunkMR32IJQO_cjs.isCameraGesture(event)) {
+    if (!chunkSCD3AHMY_cjs.isCameraGesture(event)) {
       return;
     }
     event.preventDefault();
@@ -4044,8 +4063,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));
@@ -4055,32 +4073,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));
   }
@@ -4088,9 +4096,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);
@@ -4105,13 +4113,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);
 }
@@ -4186,171 +4225,188 @@ 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
 function renderViewerSource(next, defaultRenderOptions) {
-  const svg = next.svg ?? (next.source != null ? chunkEURX7QT3_cjs.render(next.source, { ...next.renderOptions ?? defaultRenderOptions, linkHitAreas: true }).svg : null);
+  const svg = next.svg ?? (next.source != null ? chunk5PJ55GPG_cjs.render(next.source, { ...next.renderOptions ?? defaultRenderOptions, linkHitAreas: true }).svg : null);
   if (svg == null) {
     throw new Error("createViewer: provide either `source` (SFL) or `svg`.");
   }
   return svg;
 }
 function assertCreateViewerContract(svg) {
-  const version = chunkMR32IJQO_cjs.parseContractVersion(svg);
-  if (!chunkMR32IJQO_cjs.isContractCompatible(version)) {
+  const version = chunkSCD3AHMY_cjs.parseContractVersion(svg);
+  if (!chunkSCD3AHMY_cjs.isContractCompatible(version)) {
     throw new Error(`createViewer: incompatible DOM contract (svg=${version}). Renderer and viewer versions differ.`);
   }
 }
 function assertViewerUpdateContract(svg) {
-  const version = chunkMR32IJQO_cjs.parseContractVersion(svg);
-  if (!chunkMR32IJQO_cjs.isContractCompatible(version)) {
+  const version = chunkSCD3AHMY_cjs.parseContractVersion(svg);
+  if (!chunkSCD3AHMY_cjs.isContractCompatible(version)) {
     throw new Error(`viewer.update: incompatible DOM contract (svg=${version}). Renderer and viewer versions differ.`);
   }
 }
@@ -4584,7 +4640,7 @@ function trackScales(wiring, event) {
 }
 function driveValue(wiring, id, event) {
   const { runtime, svg } = wiring;
-  const kind = chunkC25NWWIH_cjs.getComponentDescriptor(runtime.graph.elements.get(id)?.componentType)?.interaction;
+  const kind = chunkLSEMXRB5_cjs.getComponentDescriptor(runtime.graph.elements.get(id)?.componentType)?.interaction;
   if (kind !== "slide" && kind !== "pick" && kind !== "turn" && kind !== "range") {
     return;
   }
@@ -4723,5 +4779,5 @@ exports.connectInteraction = connectInteraction;
 exports.createViewer = createViewer;
 exports.registerShaderProgram = registerShaderProgram;
 exports.shaderProgram = shaderProgram;
-//# sourceMappingURL=chunk-3EOG34QN.cjs.map
-//# sourceMappingURL=chunk-3EOG34QN.cjs.map
+//# sourceMappingURL=chunk-KRSX4UZ7.cjs.map
+//# sourceMappingURL=chunk-KRSX4UZ7.cjs.map