stickyflow 0.10.0 → 0.11.0

package/dist/{chunk-KRSX4UZ7.cjs → chunk-F24JURN2.cjs}

@@ -1,8 +1,8 @@
 'use strict';
 
-var chunk5PJ55GPG_cjs = require('./chunk-5PJ55GPG.cjs');
-var chunkSCD3AHMY_cjs = require('./chunk-SCD3AHMY.cjs');
-var chunkLSEMXRB5_cjs = require('./chunk-LSEMXRB5.cjs');
+var chunk5G3BEXQU_cjs = require('./chunk-5G3BEXQU.cjs');
+var chunkWZA3DJJH_cjs = require('./chunk-WZA3DJJH.cjs');
+var chunkUHKFJBY5_cjs = require('./chunk-UHKFJBY5.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 chunkLSEMXRB5_cjs.DEFAULT_ROLLING_NUMBER_STYLE;
+    return chunkUHKFJBY5_cjs.DEFAULT_ROLLING_NUMBER_STYLE;
   }
   try {
-    return { ...chunkLSEMXRB5_cjs.DEFAULT_ROLLING_NUMBER_STYLE, ...JSON.parse(encoded) };
+    return { ...chunkUHKFJBY5_cjs.DEFAULT_ROLLING_NUMBER_STYLE, ...JSON.parse(encoded) };
   } catch {
-    return chunkLSEMXRB5_cjs.DEFAULT_ROLLING_NUMBER_STYLE;
+    return chunkUHKFJBY5_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 = chunkLSEMXRB5_cjs.formatRollingNumber(value, positiveInteger(surface.getAttribute("data-sf-widget-digits")));
+  const nextValue = chunkUHKFJBY5_cjs.formatRollingNumber(value, positiveInteger(surface.getAttribute("data-sf-widget-digits")));
   if (previousValue === nextValue) {
     return true;
   }
@@ -299,7 +299,7 @@ var WHITE = [255, 255, 255];
 function shade(node, bump, target) {
   const base = fills.get(node) ?? node.getAttribute("fill") ?? "";
   fills.set(node, base);
-  const rgb = chunkLSEMXRB5_cjs.parseHexRgb(base);
+  const rgb = chunkUHKFJBY5_cjs.parseHexRgb(base);
   if (!rgb) {
     return;
   }
@@ -362,7 +362,7 @@ function placeKnob(svg, ruler) {
 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 peak = (typeof params.peak === "string" ? chunkUHKFJBY5_cjs.parseHexRgb(params.peak) : null) ?? WHITE;
   const spread = positive(params.spread, 0.07) * extent;
   const start = inset * extent;
   const span = (1 - 2 * inset) * extent;
@@ -690,7 +690,7 @@ function mountDisplay(container, svgString) {
 }
 
 // src/runtime/viewer/events.ts
-var Emitter2 = class extends chunkSCD3AHMY_cjs.Emitter {
+var Emitter2 = class extends chunkWZA3DJJH_cjs.Emitter {
 };
 
 // src/runtime/viewer/export/raster.ts
@@ -780,11 +780,11 @@ function svgElement(document, name, attributes) {
 function readComponentStyle(surface) {
   try {
     return {
-      ...chunkLSEMXRB5_cjs.DEFAULT_ROLLING_NUMBER_STYLE,
+      ...chunkUHKFJBY5_cjs.DEFAULT_ROLLING_NUMBER_STYLE,
       ...JSON.parse(surface.getAttribute("data-sf-widget-style") ?? "{}")
     };
   } catch {
-    return chunkLSEMXRB5_cjs.DEFAULT_ROLLING_NUMBER_STYLE;
+    return chunkUHKFJBY5_cjs.DEFAULT_ROLLING_NUMBER_STYLE;
   }
 }
 function cellsOf(box, plain, fontSize = 0) {
@@ -924,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 = chunkSCD3AHMY_cjs.CHANGE_COLOR) => {
+  const flash = (ownerIds, color2 = chunkWZA3DJJH_cjs.CHANGE_COLOR) => {
     const ids = [...new Set(ownerIds)];
     if (ids.length === 0) {
       return;
@@ -932,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 = chunkSCD3AHMY_cjs.findOwnerNode(svg, id, chunkSCD3AHMY_cjs.isPrimary);
+      const primary = chunkWZA3DJJH_cjs.findOwnerNode(svg, id, chunkWZA3DJJH_cjs.isPrimary);
       if (!primary) {
         continue;
       }
@@ -943,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" ? chunkSCD3AHMY_cjs.linkChangeOverlay(doc, primary, id, color2) : chunkSCD3AHMY_cjs.shapeChangeOverlay(doc, primary, id, color2);
+      const overlay = primary.getAttribute("data-sf-role") === "link" ? chunkWZA3DJJH_cjs.linkChangeOverlay(doc, primary, id, color2) : chunkWZA3DJJH_cjs.shapeChangeOverlay(doc, primary, id, color2);
       svg.appendChild(overlay);
-      chunkSCD3AHMY_cjs.startChangeFade(overlay, reducedMotion);
-      const duration = reducedMotion ? chunkSCD3AHMY_cjs.REDUCED_MOTION_DURATION_MS : chunkSCD3AHMY_cjs.FLASH_DURATION_MS;
+      chunkWZA3DJJH_cjs.startChangeFade(overlay, reducedMotion);
+      const duration = reducedMotion ? chunkWZA3DJJH_cjs.REDUCED_MOTION_DURATION_MS : chunkWZA3DJJH_cjs.FLASH_DURATION_MS;
       timers.set(
         id,
         setTimeout(() => {
@@ -1033,7 +1033,7 @@ var OwnerPointerController = class {
     this.#selection = selection;
   }
   hover(event) {
-    const owner = chunkSCD3AHMY_cjs.resolveOwner(event.target);
+    const owner = chunkWZA3DJJH_cjs.resolveOwner(event.target);
     this.#emitter.emit(
       "ownerHover",
       owner ? { diagramId: this.#diagramId, owner, modifiers: modifiersOf(event) } : { diagramId: this.#diagramId, owner: null }
@@ -1041,7 +1041,7 @@ var OwnerPointerController = class {
   }
   select(event) {
     const target = event.target;
-    const owner = chunkSCD3AHMY_cjs.resolveOwner(target);
+    const owner = chunkWZA3DJJH_cjs.resolveOwner(target);
     if (!owner) {
       this.#clearWhenOutsideOverlay(target);
       return;
@@ -1062,7 +1062,7 @@ var OwnerPointerController = class {
       owner,
       modifiers
     });
-    const node = chunkSCD3AHMY_cjs.findOwnerNode(this.#svg, owner.id, chunkSCD3AHMY_cjs.isPrimary);
+    const node = chunkWZA3DJJH_cjs.findOwnerNode(this.#svg, owner.id, chunkWZA3DJJH_cjs.isPrimary);
     if (node && !node.hasAttribute("tabindex")) {
       node.setAttribute("tabindex", "-1");
     }
@@ -1090,12 +1090,12 @@ var PointerInteractionSession = class {
   }
   #onPointerDown = (event) => {
     const target = event.target;
-    const overContent = Boolean(chunkSCD3AHMY_cjs.resolveOwner(target)) || isSelectionOverlayControl(target);
+    const overContent = Boolean(chunkWZA3DJJH_cjs.resolveOwner(target)) || isSelectionOverlayControl(target);
     this.#down = {
       x: event.clientX,
       y: event.clientY,
       moved: false,
-      panable: chunkSCD3AHMY_cjs.isCameraGesture(event) || !overContent
+      panable: chunkWZA3DJJH_cjs.isCameraGesture(event) || !overContent
     };
   };
   #onPointerMove = (event) => {
@@ -1123,7 +1123,7 @@ var PointerInteractionSession = class {
     if (!this.#down.moved) {
       return false;
     }
-    if (this.#down.panable && chunkSCD3AHMY_cjs.isCameraGesture(event)) {
+    if (this.#down.panable && chunkWZA3DJJH_cjs.isCameraGesture(event)) {
       this.#display.panBy(event.movementX, event.movementY);
     }
     return true;
@@ -1147,15 +1147,15 @@ function paintSelectionOverlays(svg, selectedIds, owners) {
   }
   const document = svg.ownerDocument;
   for (const id of selectedIds) {
-    const primary = chunkSCD3AHMY_cjs.findOwnerNode(svg, id, chunkSCD3AHMY_cjs.isPrimary);
+    const primary = chunkWZA3DJJH_cjs.findOwnerNode(svg, id, chunkWZA3DJJH_cjs.isPrimary);
     if (!primary) {
       continue;
     }
     const owner = owners.get(id);
-    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);
+    const overlay = owner?.role === "link" ? chunkWZA3DJJH_cjs.linkSelectionOverlay(document, primary, id, svg) : owner?.role === "path" ? chunkWZA3DJJH_cjs.pathSelectionOverlay(document, primary, id, svg) : owner?.role === "isometric" ? chunkWZA3DJJH_cjs.isometricSelectionOverlay(document, primary, id, svg) : chunkWZA3DJJH_cjs.shapeSelectionOverlay(document, primary, id, svg, owner ? chunkWZA3DJJH_cjs.DERIVED_HEIGHT_ROLES.has(owner.role) : false);
     svg.appendChild(overlay);
     if (owner?.role === "shape" && selectedIds.size === 1) {
-      svg.appendChild(chunkSCD3AHMY_cjs.quickDuplicateBubbles(document, primary, id, svg));
+      svg.appendChild(chunkWZA3DJJH_cjs.quickDuplicateBubbles(document, primary, id, svg));
     }
   }
 }
@@ -1194,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 = chunkSCD3AHMY_cjs.resolveOwner(element);
+      const owner = chunkWZA3DJJH_cjs.resolveOwner(element);
       if (owner) {
         this.remember(owner);
       }
@@ -1206,7 +1206,7 @@ var SelectionController = class {
 // src/runtime/viewer/interaction/wheel.ts
 function bindWheelZoom(display, selection) {
   const onWheel = (event) => {
-    if (!chunkSCD3AHMY_cjs.isCameraGesture(event)) {
+    if (!chunkWZA3DJJH_cjs.isCameraGesture(event)) {
       return;
     }
     event.preventDefault();
@@ -2971,9 +2971,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() {
@@ -3584,6 +3582,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,
@@ -3611,7 +3821,9 @@ var builtins = [
   lightBandProgram,
   silkFoldsProgram,
   glowCardProgram,
-  glassDotsProgram
+  glassDotsProgram,
+  vortexProgram,
+  wavesProgram
 ];
 var programs = new Map(builtins.map((program) => [program.name, program]));
 function registerShaderProgram(program) {
@@ -3792,9 +4004,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);
@@ -3895,6 +4107,7 @@ function createSurface(canvas) {
   const baseFill = baseGeometry?.getAttribute("fill");
   baseGeometry?.setAttribute("fill", "none");
   return {
+    programName: definition.name,
     owner,
     canvas,
     gl,
@@ -3931,6 +4144,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) {
@@ -4245,8 +4474,12 @@ function rememberSurfaces(surfaces) {
     })
   );
 }
-function createSurfaces(svg, memory) {
+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;
@@ -4301,9 +4534,20 @@ var ShaderSurfaces = class {
   }
   refresh() {
     const memory = rememberSurfaces(this.surfaces);
-    this.stop();
+    this.cancelFrame();
+    const kept = /* @__PURE__ */ new Map();
+    for (const surface of this.surfaces) {
+      if (refreshSurface(surface, this.svg)) {
+        kept.set(surface.canvas, surface);
+      }
+    }
+    for (const surface of this.surfaces) {
+      if (!kept.has(surface.canvas)) {
+        releaseSurface(surface);
+      }
+    }
     const generation = ++this.backdropGeneration;
-    this.surfaces = createSurfaces(this.svg, memory);
+    this.surfaces = createSurfaces(this.svg, memory, kept);
     updateReactiveLightFields(this.surfaces);
     this.captureBackdrops(generation);
     if (this.surfaces.length > 0) {
@@ -4329,11 +4573,14 @@ var ShaderSurfaces = class {
     }
     this.frame = this.view?.requestAnimationFrame(this.draw);
   };
-  stop() {
+  cancelFrame() {
     if (this.frame !== void 0) {
       this.view?.cancelAnimationFrame(this.frame);
       this.frame = void 0;
     }
+  }
+  stop() {
+    this.cancelFrame();
     for (const surface of this.surfaces) {
       releaseSurface(surface);
     }
@@ -4392,21 +4639,21 @@ function mountShaderSurfaces(svg) {
 
 // src/runtime/viewer/source.ts
 function renderViewerSource(next, defaultRenderOptions) {
-  const svg = next.svg ?? (next.source != null ? chunk5PJ55GPG_cjs.render(next.source, { ...next.renderOptions ?? defaultRenderOptions, linkHitAreas: true }).svg : null);
+  const svg = next.svg ?? (next.source != null ? chunk5G3BEXQU_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 = chunkSCD3AHMY_cjs.parseContractVersion(svg);
-  if (!chunkSCD3AHMY_cjs.isContractCompatible(version)) {
+  const version = chunkWZA3DJJH_cjs.parseContractVersion(svg);
+  if (!chunkWZA3DJJH_cjs.isContractCompatible(version)) {
     throw new Error(`createViewer: incompatible DOM contract (svg=${version}). Renderer and viewer versions differ.`);
   }
 }
 function assertViewerUpdateContract(svg) {
-  const version = chunkSCD3AHMY_cjs.parseContractVersion(svg);
-  if (!chunkSCD3AHMY_cjs.isContractCompatible(version)) {
+  const version = chunkWZA3DJJH_cjs.parseContractVersion(svg);
+  if (!chunkWZA3DJJH_cjs.isContractCompatible(version)) {
     throw new Error(`viewer.update: incompatible DOM contract (svg=${version}). Renderer and viewer versions differ.`);
   }
 }
@@ -4640,7 +4887,7 @@ function trackScales(wiring, event) {
 }
 function driveValue(wiring, id, event) {
   const { runtime, svg } = wiring;
-  const kind = chunkLSEMXRB5_cjs.getComponentDescriptor(runtime.graph.elements.get(id)?.componentType)?.interaction;
+  const kind = chunkUHKFJBY5_cjs.getComponentDescriptor(runtime.graph.elements.get(id)?.componentType)?.interaction;
   if (kind !== "slide" && kind !== "pick" && kind !== "turn" && kind !== "range") {
     return;
   }
@@ -4779,5 +5026,5 @@ exports.connectInteraction = connectInteraction;
 exports.createViewer = createViewer;
 exports.registerShaderProgram = registerShaderProgram;
 exports.shaderProgram = shaderProgram;
-//# sourceMappingURL=chunk-KRSX4UZ7.cjs.map
-//# sourceMappingURL=chunk-KRSX4UZ7.cjs.map
+//# sourceMappingURL=chunk-F24JURN2.cjs.map
+//# sourceMappingURL=chunk-F24JURN2.cjs.map