stickyflow 0.10.0 → 0.11.0

package/dist/{chunk-VPNOVRWP.js → chunk-RQYZNW2I.js}

@@ -1,6 +1,6 @@
-import { render } from './chunk-SDOHUNBW.js';
-import { parseContractVersion, isContractCompatible, Emitter, resolveOwner, CHANGE_COLOR, findOwnerNode, isPrimary, linkSelectionOverlay, pathSelectionOverlay, isometricSelectionOverlay, shapeSelectionOverlay, DERIVED_HEIGHT_ROLES, quickDuplicateBubbles, isCameraGesture, linkChangeOverlay, shapeChangeOverlay, startChangeFade, REDUCED_MOTION_DURATION_MS, FLASH_DURATION_MS } from './chunk-EGUPN56K.js';
-import { getComponentDescriptor, formatRollingNumber, DEFAULT_ROLLING_NUMBER_STYLE, parseHexRgb } from './chunk-HRU6VOEC.js';
+import { render } from './chunk-Q6QLU6YQ.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-BFQWCOEC.js';
+import { getComponentDescriptor, formatRollingNumber, DEFAULT_ROLLING_NUMBER_STYLE, parseHexRgb } from './chunk-G6IW2IX3.js';
 
 // src/runtime/viewer/components/rollingNumberDom.ts
 var HTML_NAMESPACE = "http://www.w3.org/1999/xhtml";
@@ -2969,9 +2969,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() {
@@ -3582,6 +3580,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,
@@ -3609,7 +3819,9 @@ var builtins = [
   lightBandProgram,
   silkFoldsProgram,
   glowCardProgram,
-  glassDotsProgram
+  glassDotsProgram,
+  vortexProgram,
+  wavesProgram
 ];
 var programs = new Map(builtins.map((program) => [program.name, program]));
 function registerShaderProgram(program) {
@@ -3790,9 +4002,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);
@@ -3893,6 +4105,7 @@ function createSurface(canvas) {
   const baseFill = baseGeometry?.getAttribute("fill");
   baseGeometry?.setAttribute("fill", "none");
   return {
+    programName: definition.name,
     owner,
     canvas,
     gl,
@@ -3929,6 +4142,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) {
@@ -4243,8 +4472,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;
@@ -4299,9 +4532,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) {
@@ -4327,11 +4571,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);
     }
@@ -4773,5 +5020,5 @@ function createViewer(options) {
 }
 
 export { SHADER_DEFAULTS, connectInteraction, createViewer, registerShaderProgram, shaderProgram };
-//# sourceMappingURL=chunk-VPNOVRWP.js.map
-//# sourceMappingURL=chunk-VPNOVRWP.js.map
+//# sourceMappingURL=chunk-RQYZNW2I.js.map
+//# sourceMappingURL=chunk-RQYZNW2I.js.map