stickyflow 0.6.0 → 0.8.0

package/dist/{chunk-WRDVNMFS.js → chunk-EDOPENSE.js}

@@ -1,6 +1,6 @@
-import { render } from './chunk-FVHVOJS2.js';
-import { parseContractVersion, isContractCompatible, Emitter, resolveOwner, CHANGE_COLOR, findOwnerNode, isPrimary, linkSelectionOverlay, pathSelectionOverlay, isometricSelectionOverlay, shapeSelectionOverlay, DERIVED_HEIGHT_ROLES, quickDuplicateBubbles, isCameraGesture, linkChangeOverlay, shapeChangeOverlay, startChangeFade, REDUCED_MOTION_DURATION_MS, FLASH_DURATION_MS } from './chunk-ULQZ6CZW.js';
-import { formatRollingNumber, DEFAULT_ROLLING_NUMBER_STYLE } from './chunk-4G2R7PEL.js';
+import { render } from './chunk-MAPNY7MJ.js';
+import { parseContractVersion, isContractCompatible, Emitter, resolveOwner, CHANGE_COLOR, findOwnerNode, isPrimary, linkSelectionOverlay, pathSelectionOverlay, isometricSelectionOverlay, shapeSelectionOverlay, DERIVED_HEIGHT_ROLES, quickDuplicateBubbles, isCameraGesture, linkChangeOverlay, shapeChangeOverlay, startChangeFade, REDUCED_MOTION_DURATION_MS, FLASH_DURATION_MS } from './chunk-LFEGZJWC.js';
+import { getComponentDescriptor, formatRollingNumber, DEFAULT_ROLLING_NUMBER_STYLE } from './chunk-GLZVHUSW.js';
 
 // src/runtime/viewer/components/rollingNumberDom.ts
 var HTML_NAMESPACE = "http://www.w3.org/1999/xhtml";
@@ -1765,10 +1765,136 @@ var glassRefractionProgram = {
   usesBackdrop: true
 };
 
-// src/runtime/viewer/shaders/builtins/halftoneHalo.ts
+// src/runtime/viewer/shaders/builtins/glowCard.ts
 var fragmentSource8 = `
 precision highp float;
 
+uniform vec2 uResolution;
+uniform float uTime;
+uniform float uSpeed;
+uniform float uIntensity;
+uniform float uGlowHeight;
+uniform float uGlowSpread;
+uniform float uCore;
+uniform float uRim;
+uniform float uGrain;
+uniform float uWarp;
+uniform float uAngle;
+uniform float uCornerRadius;
+uniform vec3 uBaseColor;
+uniform vec3 uColorA;
+uniform vec3 uColorB;
+uniform vec3 uColorC;
+varying vec2 vUv;
+
+float hash(vec2 p) {
+  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
+}
+
+float blob(vec2 p, vec2 center, vec2 size) {
+  vec2 d = (p - center) / size;
+  return exp(-dot(d, d));
+}
+
+float noise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  return mix(mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x), mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x), u.y);
+}
+
+float fbm(vec2 p) {
+  return 0.5 * noise(p) + 0.25 * noise(p * 2.03 + 3.1) + 0.125 * noise(p * 4.01 + 7.7);
+}
+
+void main() {
+  vec2 size = max(uResolution, vec2(1.0));
+  float radius = uCornerRadius * min(size.x, size.y);
+  vec2 q = abs(vUv * size - size * 0.5) - size * 0.5 + radius;
+  float distance = length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - radius;
+  float shape = 1.0 - smoothstep(-1.0, 1.0, distance);
+  if (shape <= 0.0) discard;
+
+  // The light comes from one side. Angle 0 is the bottom edge, and it turns clockwise: 90 is the left, 180 the top, 270 the right.
+  // depth is 0 at the edge the light comes from and 1 at the far side, side runs along that edge.
+  float turn = radians(uAngle);
+  vec2 toward = vec2(-sin(turn), -cos(turn));
+  vec2 across = vec2(-toward.y, toward.x);
+  vec2 offset = (vUv - 0.5) * size;
+  float reachAlong = 0.5 * (abs(toward.x) * size.x + abs(toward.y) * size.y);
+  float reachAcross = 0.5 * (abs(across.x) * size.x + abs(across.y) * size.y);
+  float depth = clamp(0.5 - dot(offset, toward) / (2.0 * reachAlong), 0.0, 1.0);
+  float side = clamp(0.5 + dot(offset, across) / (2.0 * reachAcross), 0.0, 1.0);
+  float aspect = reachAcross / reachAlong;
+
+  float t = uTime * max(uSpeed, 0.0);
+  float height = clamp(uGlowHeight, 0.05, 1.0);
+  float spread = max(uGlowSpread, 0.05);
+  // The body is the base color with a faint lift toward the far side, like glass that catches the light.
+  vec3 color = uBaseColor + vec3(0.035) * smoothstep(0.55, 1.0, 1.0 - depth);
+
+  // Three soft lights sit low in the card and drift slowly; the middle one is the broadest.
+  vec2 p = vec2(side * aspect, depth);
+  // The lights are bent by slow noise, so their edges curl like smoke instead of staying round.
+  vec2 bend = vec2(fbm(p * 2.6 + vec2(t * 0.6, 0.0)), fbm(p * 2.6 + vec2(5.2, -t * 0.5))) - 0.35;
+  p += bend * max(uWarp, 0.0) * 0.45;
+  float wander = 0.05 * sin(t);
+  float a = blob(p, vec2((0.18 + wander) * aspect, 0.0), vec2(0.5 * spread * aspect, 0.42 * height));
+  float b = blob(p, vec2((0.52 - wander) * aspect, -0.04), vec2(0.62 * spread * aspect, 0.5 * height));
+  float c = blob(p, vec2((0.86 + wander * 0.6) * aspect, 0.02), vec2(0.5 * spread * aspect, 0.44 * height));
+  // Each light is thicker in some places than in others, so the colors mix unevenly.
+  float patchy = fbm(p * 4.0 + 11.0);
+  a *= 0.55 + 0.9 * patchy;
+  b *= 0.55 + 0.9 * (1.0 - patchy);
+  c *= 0.55 + 0.9 * fbm(p * 4.0 + 23.0);
+  vec3 glow = uColorA * a + uColorB * b + uColorC * c;
+
+  // A haze reaches higher than the lights, so the color fades out into the body.
+  float haze = smoothstep(height, 0.0, depth);
+  glow += mix(uColorB, uColorA, side) * haze * haze * 0.35;
+  color += glow * max(uIntensity, 0.0);
+
+  // Near the exit edge the lights are so strong that they turn white.
+  float hot = smoothstep(height * 0.38, 0.0, depth) * (a + b + c) * clamp(uCore, 0.0, 1.0);
+  color = mix(color, vec3(0.93, 0.95, 1.0), clamp(hot, 0.0, 1.0));
+
+  // A thin rim along the edge, strongest on the side away from the light.
+  float rim = (1.0 - smoothstep(0.0, 1.6, -distance)) * smoothstep(0.0, 1.0, -distance + 1.0);
+  color += vec3(0.62, 0.66, 0.78) * rim * max(uRim, 0.0) * (0.35 + 0.65 * smoothstep(0.2, 1.0, 1.0 - depth));
+
+  // The grit sits in the lit parts and fades in the dark body, as on film.
+  float lit = clamp(dot(glow, vec3(0.45)) * max(uIntensity, 0.0) + hot, 0.0, 1.0);
+  float grit = hash(gl_FragCoord.xy) - 0.5;
+  grit += 0.5 * (hash(floor(gl_FragCoord.xy * 0.5) + 17.0) - 0.5);
+  color += grit * max(uGrain, 0.0) * (0.3 + 2.2 * lit * (1.0 - 0.5 * lit));
+  gl_FragColor = vec4(clamp(color, 0.0, 1.0), shape);
+}
+`;
+var glowCardProgram = {
+  name: "glowCard",
+  fragmentSource: fragmentSource8,
+  defaultParameters: {
+    speed: 0.12,
+    intensity: 1,
+    glowHeight: 0.55,
+    glowSpread: 1,
+    core: 0.7,
+    rim: 0.55,
+    grain: 0.12,
+    warp: 1,
+    angle: 0,
+    cornerRadius: 0.08,
+    baseColor: "#0b0b12",
+    colorA: "#2f6bff",
+    colorB: "#9d5cff",
+    colorC: "#34d3c4"
+  }
+};
+
+// src/runtime/viewer/shaders/builtins/halftoneHalo.ts
+var fragmentSource9 = `
+precision highp float;
+
 uniform vec2 uResolution;
 uniform float uTime;
 uniform float uSpeed;
@@ -1845,11 +1971,11 @@ void main() {
 `;
 var halftoneHaloProgram = {
   name: "halftoneHalo",
-  fragmentSource: fragmentSource8
+  fragmentSource: fragmentSource9
 };
 
 // src/runtime/viewer/shaders/builtins/halo.ts
-var fragmentSource9 = `
+var fragmentSource10 = `
 precision highp float;
 
 uniform vec2 uResolution;
@@ -1924,11 +2050,235 @@ void main() {
 `;
 var haloProgram = {
   name: "halo",
-  fragmentSource: fragmentSource9
+  fragmentSource: fragmentSource10
+};
+
+// src/runtime/viewer/shaders/builtins/ledMatrix.ts
+var fragmentSource11 = `
+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: fragmentSource11,
+  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 fragmentSource12 = `
+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: fragmentSource12,
+  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 fragmentSource10 = `
+var fragmentSource13 = `
 precision highp float;
 
 uniform float uTime;
@@ -1986,11 +2336,11 @@ void main() {
 `;
 var lumenPortalProgram = {
   name: "lumenPortal",
-  fragmentSource: fragmentSource10
+  fragmentSource: fragmentSource13
 };
 
 // src/runtime/viewer/shaders/builtins/lumenPortalLight.ts
-var fragmentSource11 = `
+var fragmentSource14 = `
 precision highp float;
 
 uniform float uTime;
@@ -2049,11 +2399,11 @@ void main() {
 `;
 var lumenPortalLightProgram = {
   name: "lumenPortalLight",
-  fragmentSource: fragmentSource11
+  fragmentSource: fragmentSource14
 };
 
 // src/runtime/viewer/shaders/builtins/orb.ts
-var fragmentSource12 = `
+var fragmentSource15 = `
 precision highp float;
 
 uniform vec2 uResolution;
@@ -2089,11 +2439,11 @@ void main() {
 `;
 var orbProgram = {
   name: "orb",
-  fragmentSource: fragmentSource12
+  fragmentSource: fragmentSource15
 };
 
 // src/runtime/viewer/shaders/builtins/pixelConstellation.ts
-var fragmentSource13 = `
+var fragmentSource16 = `
 precision highp float;
 
 uniform float uTime;
@@ -2193,11 +2543,11 @@ void main() {
 `;
 var pixelConstellationProgram = {
   name: "pixelConstellation",
-  fragmentSource: fragmentSource13
+  fragmentSource: fragmentSource16
 };
 
 // src/runtime/viewer/shaders/builtins/plasmaGauge.ts
-var fragmentSource14 = `
+var fragmentSource17 = `
 precision highp float;
 
 uniform vec2 uResolution;
@@ -2299,12 +2649,12 @@ void main() {
 `;
 var plasmaGaugeProgram = {
   name: "plasmaGauge",
-  fragmentSource: fragmentSource14,
+  fragmentSource: fragmentSource17,
   replacesBaseFill: true
 };
 
 // src/runtime/viewer/shaders/builtins/prismSlats.ts
-var fragmentSource15 = `
+var fragmentSource18 = `
 precision highp float;
 
 uniform vec2 uResolution;
@@ -2379,11 +2729,136 @@ void main() {
 `;
 var prismSlatsProgram = {
   name: "prismSlats",
-  fragmentSource: fragmentSource15
+  fragmentSource: fragmentSource18
+};
+
+// src/runtime/viewer/shaders/builtins/reactivePanel.ts
+var fragmentSource19 = `
+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: fragmentSource19,
+  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 fragmentSource20 = `
 precision highp float;
 
 uniform vec2 uResolution;
@@ -2488,12 +2963,120 @@ void main() {
 `;
 var rulerProgram = {
   name: "ruler",
-  fragmentSource: fragmentSource16,
+  fragmentSource: fragmentSource20,
   replacesBaseFill: true
 };
 
+// src/runtime/viewer/shaders/builtins/silkFolds.ts
+var fragmentSource21 = `
+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: fragmentSource21,
+  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 fragmentSource22 = `
 precision highp float;
 
 uniform vec2 uResolution;
@@ -2569,12 +3152,12 @@ void main() {
 `;
 var smearOrbProgram = {
   name: "smearOrb",
-  fragmentSource: fragmentSource17,
+  fragmentSource: fragmentSource22,
   replacesBaseFill: true
 };
 
 // src/runtime/viewer/shaders/builtins/tickScale.ts
-var fragmentSource18 = `
+var fragmentSource23 = `
 precision highp float;
 
 uniform vec2 uResolution;
@@ -2633,12 +3216,12 @@ void main() {
 `;
 var tickScaleProgram = {
   name: "tickScale",
-  fragmentSource: fragmentSource18,
+  fragmentSource: fragmentSource23,
   replacesBaseFill: true
 };
 
 // src/runtime/viewer/shaders/builtins/violetGlass.ts
-var fragmentSource19 = `
+var fragmentSource24 = `
 precision highp float;
 
 uniform float uTime;
@@ -2718,11 +3301,11 @@ void main() {
 `;
 var violetGlassProgram = {
   name: "violetGlass",
-  fragmentSource: fragmentSource19
+  fragmentSource: fragmentSource24
 };
 
 // src/runtime/viewer/shaders/builtins/violetGlassLight.ts
-var fragmentSource20 = `
+var fragmentSource25 = `
 precision highp float;
 
 uniform float uTime;
@@ -2792,7 +3375,7 @@ void main() {
 `;
 var violetGlassLightProgram = {
   name: "violetGlassLight",
-  fragmentSource: fragmentSource20
+  fragmentSource: fragmentSource25
 };
 
 // src/runtime/viewer/shaders/programs.ts
@@ -2816,7 +3399,12 @@ var builtins = [
   violetGlassProgram,
   violetGlassLightProgram,
   lumenPortalProgram,
-  lumenPortalLightProgram
+  lumenPortalLightProgram,
+  reactivePanelProgram,
+  ledMatrixProgram,
+  lightBandProgram,
+  silkFoldsProgram,
+  glowCardProgram
 ];
 var programs = new Map(builtins.map((program) => [program.name, program]));
 function registerShaderProgram(program) {
@@ -2930,8 +3518,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 = {
@@ -2997,9 +3585,9 @@ function compile(gl, type, source) {
   }
   return shader;
 }
-function linkProgram(gl, fragmentSource21) {
+function linkProgram(gl, fragmentSource26) {
   const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX_SOURCE);
-  const fragment = compile(gl, gl.FRAGMENT_SHADER, fragmentSource21);
+  const fragment = compile(gl, gl.FRAGMENT_SHADER, fragmentSource26);
   if (!vertex || !fragment) {
     if (vertex) {
       gl.deleteShader(vertex);
@@ -3049,6 +3637,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) {
@@ -3101,8 +3693,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],
@@ -3128,6 +3725,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");
@@ -3156,6 +3855,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();
@@ -3175,6 +3875,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);
@@ -3197,6 +3903,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);
 }
 
@@ -3222,6 +3950,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) => {
@@ -3245,9 +3975,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) {
@@ -3272,6 +4007,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());
       }
@@ -3315,12 +4051,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();
@@ -3336,10 +4101,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);
     }
@@ -3602,6 +4394,22 @@ function trackScales(wiring, event) {
     }
   }
 }
+function driveValue(wiring, id, event) {
+  const { runtime, svg } = wiring;
+  const kind = 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);
@@ -3633,6 +4441,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) {
@@ -3642,6 +4451,7 @@ function pressMove(wiring, event) {
     return;
   }
   trackScales(wiring, event);
+  driveValue(wiring, session.active, event);
   runtime.drag(session.active);
 }
 function pressEnd(wiring, event, tapOnElement) {
@@ -3721,5 +4531,5 @@ function createViewer(options) {
 }
 
 export { SHADER_DEFAULTS, connectInteraction, createViewer, registerShaderProgram, shaderProgram };
-//# sourceMappingURL=chunk-WRDVNMFS.js.map
-//# sourceMappingURL=chunk-WRDVNMFS.js.map
+//# sourceMappingURL=chunk-EDOPENSE.js.map
+//# sourceMappingURL=chunk-EDOPENSE.js.map