stickyflow 0.5.0 → 0.7.0

package/dist/{chunk-VK3T6O5Z.cjs → chunk-BUOWM3LC.cjs}

@@ -1,8 +1,8 @@
 'use strict';
 
-var chunkZMLQIMJK_cjs = require('./chunk-ZMLQIMJK.cjs');
-var chunkL3VJXZFD_cjs = require('./chunk-L3VJXZFD.cjs');
-var chunkXY2GZUHC_cjs = require('./chunk-XY2GZUHC.cjs');
+var chunkA73UJ5AQ_cjs = require('./chunk-A73UJ5AQ.cjs');
+var chunkEKAWJFJQ_cjs = require('./chunk-EKAWJFJQ.cjs');
+var chunkKXYSO6GC_cjs = require('./chunk-KXYSO6GC.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 chunkXY2GZUHC_cjs.DEFAULT_ROLLING_NUMBER_STYLE;
+    return chunkKXYSO6GC_cjs.DEFAULT_ROLLING_NUMBER_STYLE;
   }
   try {
-    return { ...chunkXY2GZUHC_cjs.DEFAULT_ROLLING_NUMBER_STYLE, ...JSON.parse(encoded) };
+    return { ...chunkKXYSO6GC_cjs.DEFAULT_ROLLING_NUMBER_STYLE, ...JSON.parse(encoded) };
   } catch {
-    return chunkXY2GZUHC_cjs.DEFAULT_ROLLING_NUMBER_STYLE;
+    return chunkKXYSO6GC_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 = chunkXY2GZUHC_cjs.formatRollingNumber(value, positiveInteger(surface.getAttribute("data-sf-widget-digits")));
+  const nextValue = chunkKXYSO6GC_cjs.formatRollingNumber(value, positiveInteger(surface.getAttribute("data-sf-widget-digits")));
   if (previousValue === nextValue) {
     return true;
   }
@@ -667,7 +667,7 @@ function mountDisplay(container, svgString) {
 }
 
 // src/runtime/viewer/events.ts
-var Emitter2 = class extends chunkL3VJXZFD_cjs.Emitter {
+var Emitter2 = class extends chunkEKAWJFJQ_cjs.Emitter {
 };
 
 // src/runtime/viewer/export/raster.ts
@@ -757,11 +757,11 @@ function svgElement(document, name, attributes) {
 function readComponentStyle(surface) {
   try {
     return {
-      ...chunkXY2GZUHC_cjs.DEFAULT_ROLLING_NUMBER_STYLE,
+      ...chunkKXYSO6GC_cjs.DEFAULT_ROLLING_NUMBER_STYLE,
       ...JSON.parse(surface.getAttribute("data-sf-widget-style") ?? "{}")
     };
   } catch {
-    return chunkXY2GZUHC_cjs.DEFAULT_ROLLING_NUMBER_STYLE;
+    return chunkKXYSO6GC_cjs.DEFAULT_ROLLING_NUMBER_STYLE;
   }
 }
 function cellsOf(box, plain, fontSize = 0) {
@@ -901,7 +901,7 @@ function serializeSvgSnapshot(svg, captures) {
 // src/runtime/viewer/interaction/changeFlash.ts
 function createChangeFlash(svg) {
   const timers = /* @__PURE__ */ new Map();
-  const flash = (ownerIds, color2 = chunkL3VJXZFD_cjs.CHANGE_COLOR) => {
+  const flash = (ownerIds, color2 = chunkEKAWJFJQ_cjs.CHANGE_COLOR) => {
     const ids = [...new Set(ownerIds)];
     if (ids.length === 0) {
       return;
@@ -909,7 +909,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 = chunkL3VJXZFD_cjs.findOwnerNode(svg, id, chunkL3VJXZFD_cjs.isPrimary);
+      const primary = chunkEKAWJFJQ_cjs.findOwnerNode(svg, id, chunkEKAWJFJQ_cjs.isPrimary);
       if (!primary) {
         continue;
       }
@@ -920,10 +920,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" ? chunkL3VJXZFD_cjs.linkChangeOverlay(doc, primary, id, color2) : chunkL3VJXZFD_cjs.shapeChangeOverlay(doc, primary, id, color2);
+      const overlay = primary.getAttribute("data-sf-role") === "link" ? chunkEKAWJFJQ_cjs.linkChangeOverlay(doc, primary, id, color2) : chunkEKAWJFJQ_cjs.shapeChangeOverlay(doc, primary, id, color2);
       svg.appendChild(overlay);
-      chunkL3VJXZFD_cjs.startChangeFade(overlay, reducedMotion);
-      const duration = reducedMotion ? chunkL3VJXZFD_cjs.REDUCED_MOTION_DURATION_MS : chunkL3VJXZFD_cjs.FLASH_DURATION_MS;
+      chunkEKAWJFJQ_cjs.startChangeFade(overlay, reducedMotion);
+      const duration = reducedMotion ? chunkEKAWJFJQ_cjs.REDUCED_MOTION_DURATION_MS : chunkEKAWJFJQ_cjs.FLASH_DURATION_MS;
       timers.set(
         id,
         setTimeout(() => {
@@ -1010,7 +1010,7 @@ var OwnerPointerController = class {
     this.#selection = selection;
   }
   hover(event) {
-    const owner = chunkL3VJXZFD_cjs.resolveOwner(event.target);
+    const owner = chunkEKAWJFJQ_cjs.resolveOwner(event.target);
     this.#emitter.emit(
       "ownerHover",
       owner ? { diagramId: this.#diagramId, owner, modifiers: modifiersOf(event) } : { diagramId: this.#diagramId, owner: null }
@@ -1018,7 +1018,7 @@ var OwnerPointerController = class {
   }
   select(event) {
     const target = event.target;
-    const owner = chunkL3VJXZFD_cjs.resolveOwner(target);
+    const owner = chunkEKAWJFJQ_cjs.resolveOwner(target);
     if (!owner) {
       this.#clearWhenOutsideOverlay(target);
       return;
@@ -1039,7 +1039,7 @@ var OwnerPointerController = class {
       owner,
       modifiers
     });
-    const node = chunkL3VJXZFD_cjs.findOwnerNode(this.#svg, owner.id, chunkL3VJXZFD_cjs.isPrimary);
+    const node = chunkEKAWJFJQ_cjs.findOwnerNode(this.#svg, owner.id, chunkEKAWJFJQ_cjs.isPrimary);
     if (node && !node.hasAttribute("tabindex")) {
       node.setAttribute("tabindex", "-1");
     }
@@ -1067,12 +1067,12 @@ var PointerInteractionSession = class {
   }
   #onPointerDown = (event) => {
     const target = event.target;
-    const overContent = Boolean(chunkL3VJXZFD_cjs.resolveOwner(target)) || isSelectionOverlayControl(target);
+    const overContent = Boolean(chunkEKAWJFJQ_cjs.resolveOwner(target)) || isSelectionOverlayControl(target);
     this.#down = {
       x: event.clientX,
       y: event.clientY,
       moved: false,
-      panable: chunkL3VJXZFD_cjs.isCameraGesture(event) || !overContent
+      panable: chunkEKAWJFJQ_cjs.isCameraGesture(event) || !overContent
     };
   };
   #onPointerMove = (event) => {
@@ -1100,7 +1100,7 @@ var PointerInteractionSession = class {
     if (!this.#down.moved) {
       return false;
     }
-    if (this.#down.panable && chunkL3VJXZFD_cjs.isCameraGesture(event)) {
+    if (this.#down.panable && chunkEKAWJFJQ_cjs.isCameraGesture(event)) {
       this.#display.panBy(event.movementX, event.movementY);
     }
     return true;
@@ -1124,15 +1124,15 @@ function paintSelectionOverlays(svg, selectedIds, owners) {
   }
   const document = svg.ownerDocument;
   for (const id of selectedIds) {
-    const primary = chunkL3VJXZFD_cjs.findOwnerNode(svg, id, chunkL3VJXZFD_cjs.isPrimary);
+    const primary = chunkEKAWJFJQ_cjs.findOwnerNode(svg, id, chunkEKAWJFJQ_cjs.isPrimary);
     if (!primary) {
       continue;
     }
     const owner = owners.get(id);
-    const overlay = owner?.role === "link" ? chunkL3VJXZFD_cjs.linkSelectionOverlay(document, primary, id, svg) : owner?.role === "path" ? chunkL3VJXZFD_cjs.pathSelectionOverlay(document, primary, id, svg) : owner?.role === "isometric" ? chunkL3VJXZFD_cjs.isometricSelectionOverlay(document, primary, id, svg) : chunkL3VJXZFD_cjs.shapeSelectionOverlay(document, primary, id, svg, owner ? chunkL3VJXZFD_cjs.DERIVED_HEIGHT_ROLES.has(owner.role) : false);
+    const overlay = owner?.role === "link" ? chunkEKAWJFJQ_cjs.linkSelectionOverlay(document, primary, id, svg) : owner?.role === "path" ? chunkEKAWJFJQ_cjs.pathSelectionOverlay(document, primary, id, svg) : owner?.role === "isometric" ? chunkEKAWJFJQ_cjs.isometricSelectionOverlay(document, primary, id, svg) : chunkEKAWJFJQ_cjs.shapeSelectionOverlay(document, primary, id, svg, owner ? chunkEKAWJFJQ_cjs.DERIVED_HEIGHT_ROLES.has(owner.role) : false);
     svg.appendChild(overlay);
     if (owner?.role === "shape" && selectedIds.size === 1) {
-      svg.appendChild(chunkL3VJXZFD_cjs.quickDuplicateBubbles(document, primary, id, svg));
+      svg.appendChild(chunkEKAWJFJQ_cjs.quickDuplicateBubbles(document, primary, id, svg));
     }
   }
 }
@@ -1171,7 +1171,7 @@ var SelectionController = class {
   selectIds(ids) {
     for (const id of ids) {
       const element = this.#svg.querySelector(`[data-sf-id="${CSS.escape(id)}"]`);
-      const owner = chunkL3VJXZFD_cjs.resolveOwner(element);
+      const owner = chunkEKAWJFJQ_cjs.resolveOwner(element);
       if (owner) {
         this.remember(owner);
       }
@@ -1183,7 +1183,7 @@ var SelectionController = class {
 // src/runtime/viewer/interaction/wheel.ts
 function bindWheelZoom(display, selection) {
   const onWheel = (event) => {
-    if (!chunkL3VJXZFD_cjs.isCameraGesture(event)) {
+    if (!chunkEKAWJFJQ_cjs.isCameraGesture(event)) {
       return;
     }
     event.preventDefault();
@@ -1929,10 +1929,234 @@ var haloProgram = {
   fragmentSource: fragmentSource9
 };
 
-// src/runtime/viewer/shaders/builtins/lumenPortal.ts
+// src/runtime/viewer/shaders/builtins/ledMatrix.ts
 var fragmentSource10 = `
 precision highp float;
 
+uniform vec2 uResolution;
+uniform float uTime;
+uniform float uSpeed;
+uniform float uIntensity;
+uniform float uColumns;
+uniform float uCellAspect;
+uniform float uGap;
+uniform float uGlow;
+uniform float uDepth;
+uniform float uGrain;
+uniform float uRotation;
+uniform float uRipple;
+uniform float uWave;
+uniform float uVariation;
+uniform float uFade;
+uniform float uOriginX;
+uniform float uOriginY;
+uniform float uSpread;
+uniform float uDrift;
+uniform float uReaction;
+uniform float uPointerSize;
+uniform float uHover;
+uniform vec2 uPointer;
+uniform vec3 uWake[16];
+uniform float uCornerRadius;
+uniform vec3 uBaseColor;
+uniform vec3 uOffColor;
+uniform vec3 uColor;
+uniform vec3 uHotColor;
+varying vec2 vUv;
+
+float boxMask(vec2 uv) {
+  vec2 halfBox = uResolution * 0.5;
+  float radius = uCornerRadius * min(uResolution.x, uResolution.y);
+  vec2 q = abs(uv * uResolution - halfBox) - halfBox + radius;
+  float d = length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - radius;
+  return 1.0 - smoothstep(-1.0, 1.0, d);
+}
+
+float roundedBox(vec2 point, vec2 halfSize, float radius) {
+  vec2 q = abs(point) - halfSize + radius;
+  return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - radius;
+}
+
+float hash(vec2 p) {
+  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
+}
+
+void main() {
+  float shape = boxMask(vUv);
+  if (shape <= 0.0) discard;
+
+  float time = uTime * max(uSpeed, 0.0);
+  float columns = max(uColumns, 2.0);
+  vec2 cellPx = vec2(uResolution.x / columns);
+  cellPx.y *= max(uCellAspect, 0.2);
+  vec2 rows = uResolution / cellPx;
+
+  // The grid can be turned around the middle of the surface.
+  float angle = radians(uRotation);
+  vec2 centered = (vUv - 0.5) * uResolution;
+  vec2 turned = vec2(cos(angle) * centered.x - sin(angle) * centered.y, sin(angle) * centered.x + cos(angle) * centered.y);
+  vec2 turnedUv = turned / uResolution + 0.5;
+  vec2 grid = vec2(turnedUv.x, 1.0 - turnedUv.y) * rows;
+  vec2 cell = floor(grid);
+  vec2 local = (fract(grid) - 0.5) * cellPx;
+  vec2 center = (cell + 0.5) / rows;
+
+  // The light of the surface sits at its origin, sways to the sides, and falls off with the spread. A spread of 0 puts it out.
+  float spread = max(uSpread, 0.05);
+  float lit = smoothstep(0.0, 0.05, uSpread);
+  vec2 p = vec2(center.x, 1.0 - center.y);
+  vec2 origin = vec2(uOriginX + uDrift * sin(time * 0.7), uOriginY);
+  float aspect = uResolution.x / uResolution.y;
+  float blob = exp(-pow(length((p - origin) * vec2(1.0, 1.55)) / spread, 2.0) * 5.5) * lit;
+  float wave = 0.5 + 0.5 * sin(p.x * 5.0 + time * 1.3 + sin(p.y * 3.0 - time));
+  float rise = pow(max(1.0 - abs(p.y - uOriginY) / spread, 0.0), 3.0) * (1.0 - 0.7 * uWave + 0.7 * uWave * wave) * lit;
+  float glowLevel = blob * 1.15 + rise * 0.5 + 0.03;
+
+  // Rings that run outward from the light, and a different brightness for every light.
+  float rings = 1.0 + uRipple * 0.5 * sin(length((p - origin) * vec2(1.0, 1.55)) * 16.0 - time * 2.5);
+  float jitter = 1.0 - uVariation * 0.55 * hash(cell);
+  float vignette = 1.0 - clamp(uFade, 0.0, 1.0) * smoothstep(0.3, 0.8, length(p - 0.5) * 1.3);
+
+  // The lights near the pointer glow up while it is over the surface, and the places it has been dim down one after the other.
+  float near = exp(-pow(length((p - uPointer) * vec2(aspect, 1.0)) / max(uPointerSize, 0.01), 2.0)) * uHover;
+  float wake = 0.0;
+  for (int i = 0; i < 16; i++) {
+    wake += uWake[i].z * exp(-pow(length((p - uWake[i].xy) * vec2(aspect, 1.0)) / max(uPointerSize * 0.88, 0.01), 2.0));
+  }
+  float touch = min(near + wake, 1.3) * max(uReaction, 0.0);
+  float level = clamp(glowLevel * rings * jitter * vignette * max(uIntensity, 0.0) + touch * 1.1, 0.0, 1.0);
+
+  vec3 tint = mix(uOffColor, uColor, smoothstep(0.0, 0.6, level));
+  tint = mix(tint, uHotColor, smoothstep(0.55, 1.0, level));
+
+  vec2 halfSize = cellPx * 0.5 * (1.0 - clamp(uGap, 0.0, 0.8));
+  float d = roundedBox(local, halfSize, min(halfSize.x, halfSize.y));
+  float body = 1.0 - smoothstep(-0.9, 0.9, d);
+  // Depth shades a light like a small bulb: bright in the upper part, darker at the rim.
+  float sheen = 1.0 - smoothstep(0.0, halfSize.y * 1.2, abs(local.y + halfSize.y * 0.35));
+  float rim = smoothstep(-halfSize.x * 0.7, 0.0, d);
+  float depth = clamp(uDepth, 0.0, 1.0);
+  vec3 cellColor = tint * (1.0 - 0.4 * depth + 0.4 * depth * sheen) * (1.0 - 0.35 * depth * rim);
+
+  vec3 color = uBaseColor + tint * level * max(uGlow, 0.0) * 0.18;
+  color = mix(color, cellColor, body);
+  color += (hash(gl_FragCoord.xy) - 0.5) * max(uGrain, 0.0) * 0.2;
+  gl_FragColor = vec4(clamp(color, 0.0, 1.0), shape);
+}
+`;
+var ledMatrixProgram = {
+  name: "ledMatrix",
+  fragmentSource: fragmentSource10,
+  defaultParameters: {
+    speed: 0.25,
+    intensity: 1,
+    columns: 44,
+    cellAspect: 1.7,
+    gap: 0.3,
+    originX: 0.42,
+    originY: 0.04,
+    spread: 1,
+    drift: 0.2,
+    depth: 0.5,
+    glow: 1,
+    grain: 0.2,
+    rotation: 0,
+    ripple: 0.3,
+    wave: 1,
+    variation: 0.2,
+    fade: 0.3,
+    reaction: 1,
+    pointerSize: 0.17,
+    trail: 1.4,
+    cornerRadius: 0.025,
+    baseColor: "#050505",
+    offColor: "#262626",
+    color: "#a3a3a3",
+    hotColor: "#ffffff"
+  }
+};
+
+// src/runtime/viewer/shaders/builtins/lightBand.ts
+var fragmentSource11 = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform float uSpeed;
+uniform float uIntensity;
+uniform float uThickness;
+uniform float uBloom;
+uniform float uWave;
+uniform float uGrain;
+uniform float uCornerRadius;
+uniform vec3 uBaseColor;
+uniform vec3 uColorA;
+uniform vec3 uColorB;
+uniform vec3 uColorC;
+varying vec2 vUv;
+
+float boxMask(vec2 uv) {
+  vec2 halfBox = uResolution * 0.5;
+  float radius = uCornerRadius * min(uResolution.x, uResolution.y);
+  vec2 q = abs(uv * uResolution - halfBox) - halfBox + radius;
+  float d = length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - radius;
+  return 1.0 - smoothstep(-1.0, 1.0, d);
+}
+
+float hash(vec2 p) {
+  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
+}
+
+void main() {
+  float shape = boxMask(vUv);
+  if (shape <= 0.0) discard;
+
+  float t = uTime * max(uSpeed, 0.0);
+  float aspect = uResolution.x / uResolution.y;
+  vec2 p = vec2(vUv.x, 1.0 - vUv.y);
+
+  // The middle of the band wanders across the surface, and its width breathes along the way.
+  float middle = 0.5 + uWave * (0.11 * sin(p.x * 3.4 + t) + 0.05 * sin(p.x * 7.1 - t * 1.4));
+  float width = max(uThickness, 0.002) * (0.65 + 0.35 * sin(p.x * 2.4 + t * 0.6));
+  float offset = (p.y - middle) * aspect * 0.6;
+  float core = exp(-pow(offset / width, 2.0));
+  float halo = exp(-pow(offset / (width * (2.5 + uBloom * 5.0)), 2.0));
+
+  // Blue at one end, pink at the other, and the colors drift a little.
+  float along = clamp(p.x + 0.12 * sin(t * 0.8), 0.0, 1.0);
+  vec3 tint = along < 0.5 ? mix(uColorA, uColorB, along * 2.0) : mix(uColorB, uColorC, along * 2.0 - 1.0);
+  float pulse = 0.6 + 0.4 * sin(p.x * 6.0 - t * 2.0);
+
+  vec3 color = uBaseColor;
+  color += tint * halo * 0.55 * pulse * max(uBloom, 0.0);
+  color += mix(tint, vec3(1.0), 0.55) * core * (0.55 + 0.45 * pulse);
+  color *= max(uIntensity, 0.0);
+  color += (hash(gl_FragCoord.xy + t) - 0.5) * max(uGrain, 0.0);
+  gl_FragColor = vec4(clamp(color, 0.0, 1.0), shape);
+}
+`;
+var lightBandProgram = {
+  name: "lightBand",
+  fragmentSource: fragmentSource11,
+  defaultParameters: {
+    speed: 0.3,
+    intensity: 1,
+    thickness: 0.035,
+    bloom: 1,
+    wave: 1,
+    grain: 0.02,
+    cornerRadius: 0.02,
+    baseColor: "#0f0e14",
+    colorA: "#7ea8ff",
+    colorB: "#c13fd6",
+    colorC: "#ff6fb8"
+  }
+};
+
+// src/runtime/viewer/shaders/builtins/lumenPortal.ts
+var fragmentSource12 = `
+precision highp float;
+
 uniform float uTime;
 uniform float uSpeed;
 uniform float uIntensity;
@@ -1988,11 +2212,11 @@ void main() {
 `;
 var lumenPortalProgram = {
   name: "lumenPortal",
-  fragmentSource: fragmentSource10
+  fragmentSource: fragmentSource12
 };
 
 // src/runtime/viewer/shaders/builtins/lumenPortalLight.ts
-var fragmentSource11 = `
+var fragmentSource13 = `
 precision highp float;
 
 uniform float uTime;
@@ -2051,11 +2275,11 @@ void main() {
 `;
 var lumenPortalLightProgram = {
   name: "lumenPortalLight",
-  fragmentSource: fragmentSource11
+  fragmentSource: fragmentSource13
 };
 
 // src/runtime/viewer/shaders/builtins/orb.ts
-var fragmentSource12 = `
+var fragmentSource14 = `
 precision highp float;
 
 uniform vec2 uResolution;
@@ -2091,11 +2315,11 @@ void main() {
 `;
 var orbProgram = {
   name: "orb",
-  fragmentSource: fragmentSource12
+  fragmentSource: fragmentSource14
 };
 
 // src/runtime/viewer/shaders/builtins/pixelConstellation.ts
-var fragmentSource13 = `
+var fragmentSource15 = `
 precision highp float;
 
 uniform float uTime;
@@ -2195,11 +2419,11 @@ void main() {
 `;
 var pixelConstellationProgram = {
   name: "pixelConstellation",
-  fragmentSource: fragmentSource13
+  fragmentSource: fragmentSource15
 };
 
 // src/runtime/viewer/shaders/builtins/plasmaGauge.ts
-var fragmentSource14 = `
+var fragmentSource16 = `
 precision highp float;
 
 uniform vec2 uResolution;
@@ -2301,12 +2525,12 @@ void main() {
 `;
 var plasmaGaugeProgram = {
   name: "plasmaGauge",
-  fragmentSource: fragmentSource14,
+  fragmentSource: fragmentSource16,
   replacesBaseFill: true
 };
 
 // src/runtime/viewer/shaders/builtins/prismSlats.ts
-var fragmentSource15 = `
+var fragmentSource17 = `
 precision highp float;
 
 uniform vec2 uResolution;
@@ -2381,11 +2605,136 @@ void main() {
 `;
 var prismSlatsProgram = {
   name: "prismSlats",
-  fragmentSource: fragmentSource15
+  fragmentSource: fragmentSource17
+};
+
+// src/runtime/viewer/shaders/builtins/reactivePanel.ts
+var fragmentSource18 = `
+precision highp float;
+
+uniform float uTime;
+uniform float uSpeed;
+uniform float uIntensity;
+uniform float uEmission;
+uniform float uReception;
+uniform float uEmitterFill;
+uniform float uGrain;
+uniform float uGrainScale;
+uniform float uCornerRadius;
+uniform float uBorderWidth;
+uniform float uGlowRadius;
+uniform float uSurfacePadding;
+uniform float uLightX;
+uniform float uLightY;
+uniform float uLightStrength;
+uniform float uPixelScale;
+uniform vec2 uResolution;
+uniform vec3 uShapeColor;
+uniform vec3 uBaseColor;
+uniform vec3 uEdgeColor;
+uniform vec3 uLightColor;
+varying vec2 vUv;
+
+float roundedBoxDistance(vec2 point, vec2 halfSize, float radius) {
+  vec2 offset = abs(point) - halfSize + radius;
+  return min(max(offset.x, offset.y), 0.0) + length(max(offset, 0.0)) - 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);
+}
+
+void main() {
+  vec2 pixel = vUv * uResolution;
+  float pixelScale = max(uPixelScale, 0.0001);
+  float padding = clamp(uSurfacePadding * pixelScale, 0.0, min(uResolution.x, uResolution.y) * 0.45);
+  vec2 panelHalfSize = max(vec2(1.0), uResolution * 0.5 - padding);
+  vec2 panelPoint = pixel - uResolution * 0.5;
+  float radius = min(max(uCornerRadius * pixelScale, 0.0), min(panelHalfSize.x, panelHalfSize.y));
+  float distance = roundedBoxDistance(panelPoint, panelHalfSize, radius);
+  float body = 1.0 - smoothstep(-1.25, 0.75, distance);
+  float borderWidth = max(uBorderWidth * pixelScale, 0.5);
+  float edge = exp(-pow(distance / borderWidth, 2.0));
+  float innerEdge = exp(-pow((distance + borderWidth * 2.25) / (borderWidth * 2.2), 2.0)) * body;
+
+  vec2 lightPosition = vec2(uLightX, 1.0 - uLightY) * uResolution;
+  float lightDistance = length(pixel - lightPosition);
+  float lightRadius = max(uGlowRadius * pixelScale, 1.0);
+  float receivedLight = exp(-pow(lightDistance / lightRadius, 2.0));
+  receivedLight *= max(uReception, 0.0) * max(uLightStrength, 0.0);
+
+  float speed = max(uSpeed, 0.0);
+  float breath = 0.88 + 0.12 * sin(uTime * speed * 6.2831853);
+  float emittedLight = max(uEmission, 0.0) * breath;
+  float outsideFalloff = exp(-max(distance, 0.0) / max(lightRadius * 0.22, 1.0));
+  float outsideGlow = outsideFalloff * (emittedLight * 1.35 + receivedLight * 0.9);
+  float frameDistance = min(min(pixel.x, uResolution.x - pixel.x), min(pixel.y, uResolution.y - pixel.y));
+  float frameFade = smoothstep(0.0, max(padding * 0.65, 1.0), frameDistance);
+  outsideGlow *= frameFade;
+
+  vec3 baseColor = dot(uBaseColor, uBaseColor) > 0.0 ? uBaseColor : uShapeColor;
+  vec3 edgeColor = dot(uEdgeColor, uEdgeColor) > 0.0 ? uEdgeColor : vec3(0.22, 0.72, 1.0);
+  vec3 lightColor = dot(uLightColor, uLightColor) > 0.0 ? uLightColor : edgeColor;
+  vec3 color = baseColor * (0.82 + receivedLight * 0.42);
+
+  // Emission lights the material itself instead of leaving a dark cutout behind.
+  // A soft centre bias keeps the fill dimensional while the edge remains crisp.
+  vec2 normalizedPoint = panelPoint / max(panelHalfSize, vec2(1.0));
+  float centreLight = 1.0 - smoothstep(0.05, 1.25, length(normalizedPoint));
+  float fillLight = clamp(emittedLight * max(uEmitterFill, 0.0), 0.0, 1.0) * body;
+  vec3 illuminatedFill = mix(edgeColor, lightColor, 0.62 + centreLight * 0.28);
+  color = mix(color, illuminatedFill * (0.72 + centreLight * 0.62), fillLight);
+
+  // Fine object-space luminance grain. It is intentionally emission-gated so
+  // receiver panels stay clean and the texture stays fixed on the active tile.
+  float grainScale = max(uGrainScale * pixelScale, 0.75);
+  vec2 grainCell = floor(pixel / grainScale);
+  float grainValue = random(grainCell);
+  float grainLight = (grainValue - 0.36) * max(uGrain, 0.0) * fillLight;
+  color += lightColor * grainLight * (0.5 + centreLight * 0.75);
+
+  color += edgeColor * edge * (0.42 + emittedLight * 1.7);
+  color += lightColor * edge * receivedLight * 2.5;
+  color += lightColor * innerEdge * receivedLight * 1.25;
+
+  float intensity = max(uIntensity, 0.0);
+  float halo = outsideGlow * (1.0 - body) * 0.9 * intensity;
+  float alpha = body + halo;
+  if (alpha < 0.002) discard;
+
+  vec3 haloColor = mix(edgeColor, lightColor, clamp(receivedLight * 1.5, 0.0, 1.0));
+  vec3 premultiplied = color * body * intensity + haloColor * halo;
+  gl_FragColor = vec4(clamp(premultiplied, 0.0, 1.0), clamp(alpha, 0.0, 1.0));
+}
+`;
+var reactivePanelProgram = {
+  name: "reactivePanel",
+  fragmentSource: fragmentSource18,
+  defaultParameters: {
+    intensity: 0.5,
+    speed: 0.18,
+    emission: 0,
+    reception: 0.85,
+    emitterFill: 0,
+    grain: 0,
+    grainScale: 1.5,
+    cornerRadius: 18,
+    borderWidth: 2,
+    glowRadius: 90,
+    lightX: 0.5,
+    lightY: 0.5,
+    lightStrength: 0,
+    baseColor: "#09101c",
+    edgeColor: "#33b8ff",
+    lightColor: "#59d1ff"
+  },
+  replacesBaseFill: true
 };
 
 // src/runtime/viewer/shaders/builtins/ruler.ts
-var fragmentSource16 = `
+var fragmentSource19 = `
 precision highp float;
 
 uniform vec2 uResolution;
@@ -2490,12 +2839,120 @@ void main() {
 `;
 var rulerProgram = {
   name: "ruler",
-  fragmentSource: fragmentSource16,
+  fragmentSource: fragmentSource19,
   replacesBaseFill: true
 };
 
+// src/runtime/viewer/shaders/builtins/silkFolds.ts
+var fragmentSource20 = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform float uSpeed;
+uniform float uIntensity;
+uniform float uScale;
+uniform float uSharpness;
+uniform float uDepth;
+uniform float uGlow;
+uniform float uGrain;
+uniform float uRotation;
+uniform float uRipple;
+uniform float uWave;
+uniform float uVariation;
+uniform float uFade;
+uniform float uReaction;
+uniform float uHover;
+uniform vec2 uPointer;
+uniform float uCornerRadius;
+uniform vec3 uBaseColor;
+uniform vec3 uColor;
+uniform vec3 uHighlightColor;
+varying vec2 vUv;
+
+float boxMask(vec2 uv) {
+  vec2 halfBox = uResolution * 0.5;
+  float radius = uCornerRadius * min(uResolution.x, uResolution.y);
+  vec2 q = abs(uv * uResolution - halfBox) - halfBox + radius;
+  float d = length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - radius;
+  return 1.0 - smoothstep(-1.0, 1.0, d);
+}
+
+float hash(vec2 p) {
+  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
+}
+
+vec2 turn(vec2 point, float angle) {
+  float c = cos(angle);
+  float s = sin(angle);
+  return vec2(c * point.x - s * point.y, s * point.x + c * point.y);
+}
+
+void main() {
+  float shape = boxMask(vUv);
+  if (shape <= 0.0) discard;
+
+  float t = uTime * max(uSpeed, 0.0);
+  float aspect = uResolution.x / uResolution.y;
+  float angle = radians(uRotation);
+  float zoom = max(uScale, 0.2) * 2.0;
+  vec2 p = turn((vUv - 0.5) * vec2(aspect, 1.0), angle) * zoom;
+
+  // An irregular, slow bend of the whole cloth, so no two folds are alike.
+  p += uVariation * 1.3 * vec2(sin(p.y * 0.37 + 3.1), cos(p.x * 0.41 + 1.7));
+
+  // Bend the plane a few times, then lay a wave over it: the crests of the wave are the folds of the cloth.
+  for (int i = 0; i < 3; i++) {
+    float k = float(i);
+    p += 0.22 * uWave * vec2(sin(p.y * 1.7 + t * 0.6 + k * 1.3), cos(p.x * 1.5 - t * 0.5 + k * 1.9));
+  }
+
+  // The cloth lifts where the pointer is over it.
+  vec2 touch = turn((uPointer - 0.5) * vec2(aspect, 1.0), angle) * zoom;
+  float lift = exp(-pow(length(p - touch) * 0.55, 2.0)) * uHover * max(uReaction, 0.0);
+
+  float phase = p.x * 0.8 + p.y * 2.2 + 1.2 * sin(p.y * 0.9 - t * 0.3) + 0.8 * sin(p.x * 1.3 + t * 0.2) + lift * 2.4;
+  phase += uRipple * 0.35 * sin(p.x * 7.0 + p.y * 5.0 + t * 1.1);
+  float wave = 0.5 + 0.5 * sin(phase);
+
+  float crest = pow(wave, max(uSharpness, 0.5));
+  float body = pow(wave, mix(1.0, 3.2, clamp(uDepth, 0.0, 1.0)));
+  float bloom = pow(wave, 1.3) * max(uGlow, 0.0);
+
+  vec3 color = mix(uBaseColor, uColor, body * 0.9);
+  color += uHighlightColor * (crest * (0.65 + 0.35 * lift) + bloom * 0.28);
+  color *= max(uIntensity, 0.0);
+  color *= 1.0 - clamp(uFade, 0.0, 1.0) * smoothstep(0.3, 0.78, length(vUv - 0.5) * 1.35);
+  color += (hash(gl_FragCoord.xy) - 0.5) * max(uGrain, 0.0);
+  gl_FragColor = vec4(clamp(color, 0.0, 1.0), shape);
+}
+`;
+var silkFoldsProgram = {
+  name: "silkFolds",
+  fragmentSource: fragmentSource20,
+  defaultParameters: {
+    speed: 0.2,
+    intensity: 1,
+    scale: 2.2,
+    sharpness: 5,
+    depth: 0.5,
+    glow: 0.3,
+    grain: 0.08,
+    rotation: 0,
+    ripple: 0.3,
+    wave: 1,
+    variation: 0,
+    fade: 0.3,
+    reaction: 1,
+    cornerRadius: 0.02,
+    baseColor: "#030303",
+    color: "#4d4d4d",
+    highlightColor: "#ffffff"
+  }
+};
+
 // src/runtime/viewer/shaders/builtins/smearOrb.ts
-var fragmentSource17 = `
+var fragmentSource21 = `
 precision highp float;
 
 uniform vec2 uResolution;
@@ -2571,12 +3028,12 @@ void main() {
 `;
 var smearOrbProgram = {
   name: "smearOrb",
-  fragmentSource: fragmentSource17,
+  fragmentSource: fragmentSource21,
   replacesBaseFill: true
 };
 
 // src/runtime/viewer/shaders/builtins/tickScale.ts
-var fragmentSource18 = `
+var fragmentSource22 = `
 precision highp float;
 
 uniform vec2 uResolution;
@@ -2635,12 +3092,12 @@ void main() {
 `;
 var tickScaleProgram = {
   name: "tickScale",
-  fragmentSource: fragmentSource18,
+  fragmentSource: fragmentSource22,
   replacesBaseFill: true
 };
 
 // src/runtime/viewer/shaders/builtins/violetGlass.ts
-var fragmentSource19 = `
+var fragmentSource23 = `
 precision highp float;
 
 uniform float uTime;
@@ -2720,11 +3177,11 @@ void main() {
 `;
 var violetGlassProgram = {
   name: "violetGlass",
-  fragmentSource: fragmentSource19
+  fragmentSource: fragmentSource23
 };
 
 // src/runtime/viewer/shaders/builtins/violetGlassLight.ts
-var fragmentSource20 = `
+var fragmentSource24 = `
 precision highp float;
 
 uniform float uTime;
@@ -2794,7 +3251,7 @@ void main() {
 `;
 var violetGlassLightProgram = {
   name: "violetGlassLight",
-  fragmentSource: fragmentSource20
+  fragmentSource: fragmentSource24
 };
 
 // src/runtime/viewer/shaders/programs.ts
@@ -2818,7 +3275,11 @@ var builtins = [
   violetGlassProgram,
   violetGlassLightProgram,
   lumenPortalProgram,
-  lumenPortalLightProgram
+  lumenPortalLightProgram,
+  reactivePanelProgram,
+  ledMatrixProgram,
+  lightBandProgram,
+  silkFoldsProgram
 ];
 var programs = new Map(builtins.map((program) => [program.name, program]));
 function registerShaderProgram(program) {
@@ -2932,8 +3393,8 @@ function uniform2f(surface, name, value) {
     surface.gl.uniform2f(location, ...value);
   }
 }
-function uniformName(parameter) {
-  return `u${parameter.charAt(0).toUpperCase()}${parameter.slice(1)}`;
+function uniformName(parameter2) {
+  return `u${parameter2.charAt(0).toUpperCase()}${parameter2.slice(1)}`;
 }
 function enumParameter(name, value) {
   const values = {
@@ -2999,9 +3460,9 @@ function compile(gl, type, source) {
   }
   return shader;
 }
-function linkProgram(gl, fragmentSource21) {
+function linkProgram(gl, fragmentSource25) {
   const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX_SOURCE);
-  const fragment = compile(gl, gl.FRAGMENT_SHADER, fragmentSource21);
+  const fragment = compile(gl, gl.FRAGMENT_SHADER, fragmentSource25);
   if (!vertex || !fragment) {
     if (vertex) {
       gl.deleteShader(vertex);
@@ -3051,6 +3512,10 @@ function parametersOf(owner) {
     return {};
   }
 }
+function surfacePaddingOf(owner) {
+  const padding = Number(owner.getAttribute("data-sf-shader-padding"));
+  return Number.isFinite(padding) ? Math.max(0, padding) : 0;
+}
 function bindFullScreenQuad(gl, program) {
   const buffer = gl.createBuffer();
   if (!buffer) {
@@ -3103,8 +3568,13 @@ function createSurface(canvas) {
     gl,
     program,
     buffer,
-    parameters: parametersOf(owner),
+    parameters: { ...definition.defaultParameters, ...parametersOf(owner) },
+    surfacePadding: surfacePaddingOf(owner),
     smoothed: /* @__PURE__ */ new Map(),
+    pointer: { x: 0.5, y: 0.5 },
+    hovering: false,
+    hover: 0,
+    trail: [],
     backdropTexture: usesBackdrop ? transparentTexture(gl) : void 0,
     backdropOrigin: [0, 0],
     backdropScale: [1, 1],
@@ -3130,6 +3600,108 @@ function releaseSurface(surface) {
   }
 }
 
+// src/runtime/viewer/shaders/reactiveLightField.ts
+function geometryOf(surface) {
+  const x = Number(surface.owner.getAttribute("x"));
+  const y = Number(surface.owner.getAttribute("y"));
+  const width = Number(surface.owner.getAttribute("width"));
+  const height = Number(surface.owner.getAttribute("height"));
+  if (![x, y, width, height].every(Number.isFinite) || width <= 0 || height <= 0) {
+    return void 0;
+  }
+  const matrix = surface.owner.getCTM?.();
+  const a = matrix?.a ?? 1;
+  const b = matrix?.b ?? 0;
+  const c = matrix?.c ?? 0;
+  const d = matrix?.d ?? 1;
+  const e = matrix?.e ?? 0;
+  const f = matrix?.f ?? 0;
+  const determinant = a * d - b * c;
+  const centerX = a * (x + width / 2) + c * (y + height / 2) + e;
+  const centerY = b * (x + width / 2) + d * (y + height / 2) + f;
+  const localPoint = (worldX, worldY) => {
+    if (Math.abs(determinant) < 1e-6) {
+      return [worldX, worldY];
+    }
+    const translatedX = worldX - e;
+    const translatedY = worldY - f;
+    return [(d * translatedX - c * translatedY) / determinant, (-b * translatedX + a * translatedY) / determinant];
+  };
+  return { width, height, centerX, centerY, localPoint };
+}
+function parameter(parameters3, key, fallback) {
+  return number(parameters3[key], fallback);
+}
+function normalizedLightPosition(sourceX, sourceY, receiverX, receiverY, receiverWidth, receiverHeight) {
+  return [(sourceX - receiverX) / receiverWidth, (sourceY - receiverY) / receiverHeight];
+}
+function updateReactiveLightFields(surfaces) {
+  const reactive = surfaces.filter((surface) => surface.owner.getAttribute("data-sf-shader") === "reactivePanel").flatMap((surface) => {
+    const geometry = geometryOf(surface);
+    return geometry ? [{ surface, geometry }] : [];
+  });
+  for (const receiver of reactive) {
+    const sources = [];
+    for (const candidate of reactive) {
+      if (candidate.surface === receiver.surface) {
+        continue;
+      }
+      const emission = Math.max(
+        0,
+        candidate.surface.smoothed.get("emission") ?? parameter(candidate.surface.parameters, "emission", 0)
+      );
+      if (emission <= 1e-4) {
+        continue;
+      }
+      const distance = Math.hypot(
+        candidate.geometry.centerX - receiver.geometry.centerX,
+        candidate.geometry.centerY - receiver.geometry.centerY
+      );
+      sources.push({ candidate, emission, weight: emission / Math.max(distance, 1) });
+    }
+    const totalWeight = sources.reduce((sum, source) => sum + source.weight, 0);
+    if (totalWeight <= 0) {
+      receiver.surface.reactiveLight = void 0;
+      continue;
+    }
+    let worldX = 0;
+    let worldY = 0;
+    let sourceEmission = 0;
+    let radius = 0;
+    const lightColor = [0, 0, 0];
+    for (const source of sources) {
+      const influence = source.weight / totalWeight;
+      worldX += source.candidate.geometry.centerX * influence;
+      worldY += source.candidate.geometry.centerY * influence;
+      sourceEmission += source.emission;
+      radius += Math.max(1, parameter(source.candidate.surface.parameters, "glowRadius", 90)) * influence;
+      const sourceColor = color(source.candidate.surface.parameters.lightColor, [0.35, 0.82, 1]);
+      lightColor[0] += sourceColor[0] * influence;
+      lightColor[1] += sourceColor[1] * influence;
+      lightColor[2] += sourceColor[2] * influence;
+    }
+    const receiverStrength = Math.max(0, parameter(receiver.surface.parameters, "lightStrength", 1));
+    const [sourceX, sourceY] = receiver.geometry.localPoint(worldX, worldY);
+    const receiverX = Number(receiver.surface.owner.getAttribute("x"));
+    const receiverY = Number(receiver.surface.owner.getAttribute("y"));
+    const [lightX, lightY] = normalizedLightPosition(
+      sourceX,
+      sourceY,
+      receiverX,
+      receiverY,
+      receiver.geometry.width,
+      receiver.geometry.height
+    );
+    receiver.surface.reactiveLight = {
+      x: lightX,
+      y: lightY,
+      strength: sourceEmission * receiverStrength * 1.8,
+      radius,
+      color: lightColor
+    };
+  }
+}
+
 // src/runtime/viewer/shaders/renderSurface.ts
 function syncBackdropBounds(surface) {
   const svg = surface.canvas.closest("svg");
@@ -3158,6 +3730,7 @@ function applyBackdrop(surface, backdrop) {
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, backdrop.image);
 }
 var MAX_SURFACE_PIXELS = 2560;
+var TRAIL_LENGTH = 16;
 function renderSurface(surface, seconds) {
   const { canvas, gl, parameters: parameters3 } = surface;
   const shown = canvas.getBoundingClientRect();
@@ -3177,6 +3750,12 @@ function renderSurface(surface, seconds) {
   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);
@@ -3199,6 +3778,28 @@ function renderSurface(surface, seconds) {
   const elapsed = surface.lastSeconds === void 0 ? 0 : Math.max(0, Math.min(seconds - surface.lastSeconds, 0.1));
   surface.lastSeconds = seconds;
   applyParameters(surface, elapsed);
+  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);
+  const fade = number(parameters3.trail, 0);
+  const places = new Float32Array(TRAIL_LENGTH * 3);
+  if (fade > 0) {
+    surface.trail.slice(-TRAIL_LENGTH).forEach((place, index) => {
+      places.set([place.x, place.y, Math.exp(-Math.max(seconds - place.at, 0) / fade)], index * 3);
+    });
+  }
+  const trail = gl.getUniformLocation(surface.program, "uWake[0]");
+  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);
+  }
+  uniform1f(surface, "uSurfacePadding", surface.surfacePadding);
   gl.drawArrays(gl.TRIANGLES, 0, 6);
 }
 
@@ -3224,6 +3825,8 @@ function createSurfaceClock(view) {
 
 // src/runtime/viewer/shaders/surface.ts
 var RECAPTURE_DELAY_MS = 120;
+var TRAIL_SPACING = 0.055;
+var TRAIL_LENGTH2 = 16;
 function capturePngs(svg, surfaces, seconds) {
   const surfaceByCanvas = new Map(surfaces.map((surface) => [surface.canvas, surface]));
   return [...svg.querySelectorAll("canvas[data-sf-shader-canvas]")].map((canvas) => {
@@ -3247,9 +3850,14 @@ function updateParameters(surfaces, ownerId, parameters3, seconds) {
     }
     Object.assign(surface.parameters, parameters3);
     surface.owner.setAttribute("data-sf-shader-params", JSON.stringify(surface.parameters));
-    renderSurface(surface, seconds);
     changed = true;
   }
+  if (changed) {
+    updateReactiveLightFields(surfaces);
+    for (const surface of surfaces) {
+      renderSurface(surface, seconds);
+    }
+  }
   return changed;
 }
 function watchSvgChanges(svg, view, onChange) {
@@ -3274,6 +3882,7 @@ function mountShaderSurfaces(svg) {
   const clock = createSurfaceClock(view);
   const draw = (milliseconds) => {
     if (!clock.paused()) {
+      updateReactiveLightFields(surfaces);
       for (const surface of surfaces) {
         renderSurface(surface, milliseconds / 1e3 - clock.spent());
       }
@@ -3317,12 +3926,41 @@ function mountShaderSurfaces(svg) {
     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();
@@ -3338,10 +3976,37 @@ function mountShaderSurfaces(svg) {
     }, 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();
+          }
+        }
+      }
+    }
+  };
+  const leave = () => {
+    for (const surface of 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);
     }
@@ -3358,21 +4023,21 @@ function mountShaderSurfaces(svg) {
 
 // src/runtime/viewer/source.ts
 function renderViewerSource(next, defaultRenderOptions) {
-  const svg = next.svg ?? (next.source != null ? chunkZMLQIMJK_cjs.render(next.source, { ...next.renderOptions ?? defaultRenderOptions, linkHitAreas: true }).svg : null);
+  const svg = next.svg ?? (next.source != null ? chunkA73UJ5AQ_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 = chunkL3VJXZFD_cjs.parseContractVersion(svg);
-  if (!chunkL3VJXZFD_cjs.isContractCompatible(version)) {
+  const version = chunkEKAWJFJQ_cjs.parseContractVersion(svg);
+  if (!chunkEKAWJFJQ_cjs.isContractCompatible(version)) {
     throw new Error(`createViewer: incompatible DOM contract (svg=${version}). Renderer and viewer versions differ.`);
   }
 }
 function assertViewerUpdateContract(svg) {
-  const version = chunkL3VJXZFD_cjs.parseContractVersion(svg);
-  if (!chunkL3VJXZFD_cjs.isContractCompatible(version)) {
+  const version = chunkEKAWJFJQ_cjs.parseContractVersion(svg);
+  if (!chunkEKAWJFJQ_cjs.isContractCompatible(version)) {
     throw new Error(`viewer.update: incompatible DOM contract (svg=${version}). Renderer and viewer versions differ.`);
   }
 }
@@ -3604,6 +4269,22 @@ function trackScales(wiring, event) {
     }
   }
 }
+function driveValue(wiring, id, event) {
+  const { runtime, svg } = wiring;
+  const kind = chunkKXYSO6GC_cjs.getComponentDescriptor(runtime.graph.elements.get(id)?.componentType)?.interaction;
+  if (kind !== "slide" && kind !== "pick" && kind !== "turn" && kind !== "range") {
+    return;
+  }
+  const node = svg.querySelector(`[data-sf-primary][data-sf-id="${CSS.escape(id)}"]`);
+  if (!node) {
+    return;
+  }
+  const box = node.getBoundingClientRect();
+  if (box.width > 0 && box.height > 0) {
+    const within = (value) => Math.min(1, Math.max(0, value));
+    runtime.slide(id, within((event.clientX - box.left) / box.width), within((event.clientY - box.top) / box.height));
+  }
+}
 function updateHover(wiring, event) {
   const { runtime, svg, options, session } = wiring;
   const over = options.enabled?.() === false ? null : hit(svg, runtime.interactive.pressable, event.clientX, event.clientY);
@@ -3635,6 +4316,7 @@ function pressStart(wiring, event) {
   session.active = id;
   trackScales(wiring, event);
   runtime.press(id);
+  driveValue(wiring, id, event);
   runtime.drag(id);
 }
 function pressMove(wiring, event) {
@@ -3644,6 +4326,7 @@ function pressMove(wiring, event) {
     return;
   }
   trackScales(wiring, event);
+  driveValue(wiring, session.active, event);
   runtime.drag(session.active);
 }
 function pressEnd(wiring, event, tapOnElement) {
@@ -3727,5 +4410,5 @@ exports.connectInteraction = connectInteraction;
 exports.createViewer = createViewer;
 exports.registerShaderProgram = registerShaderProgram;
 exports.shaderProgram = shaderProgram;
-//# sourceMappingURL=chunk-VK3T6O5Z.cjs.map
-//# sourceMappingURL=chunk-VK3T6O5Z.cjs.map
+//# sourceMappingURL=chunk-BUOWM3LC.cjs.map
+//# sourceMappingURL=chunk-BUOWM3LC.cjs.map