@rippleflow/water-distortion 0.1.4 → 0.1.6

package/README.md

@@ -25,6 +25,9 @@ export function Hero() {
   return (
     <WaterDistortion
       mode="texture"
+      interactionMode="both"
+      runInBackground={false}
+      pauseKey="Space"
       wakeStrength={0.54}
       interactionRadius={25}
       troughStrength={0.92}
@@ -43,7 +46,9 @@ export function Hero() {
       crestIntensity={0.2}
       causticIntensity={0}
       simulationResolution={192}
+      idleTimeout={900}
       texture="/work-collage.jpg"
+      textureFit="cover"
       underlay={
         <img
           src="/work-collage.jpg"
@@ -51,6 +56,8 @@ export function Hero() {
           style={{ width: "100%", height: "100%", objectFit: "cover" }}
         />
       }
+      className="hero"
+      reducedMotion="respect"
       style={{ minHeight: 620 }}
     >
       <section>
@@ -68,6 +75,7 @@ For true shader refraction, provide a texture source:
 <WaterDistortion
   mode="texture"
   texture="/hero-background.jpg"
+  textureFit="cover"
   wakeStrength={0.8}
   underlay={<img src="/hero-background.jpg" alt="" />}
 >
@@ -86,7 +94,8 @@ For true shader refraction, provide a texture source:
 | `foreground` | `ReactNode` | `undefined` | Explicit foreground prop; takes precedence over `children`. |
 | `mode` | `"dom" \| "texture" \| "canvas"` | `"texture"` | Chooses live-DOM overlay mode or true WebGL background sampling. |
 | `texture` | `TexImageSource \| string` | `undefined` | Image/canvas/video source sampled by WebGL in `texture` or `canvas` mode. URL strings are loaded with `crossOrigin="anonymous"`. |
-| `interactionMode` | `"move" \| "click" \| "drag" \| "event"` | `"move"` | Chooses pointer-movement wakes, one ripple per pointer down, press ripples plus held-drag wakes, or programmatic ripples only. |
+| `textureFit` | `"fill" \| "cover" \| "contain" \| "none"` | `"fill"` | Sizes and centers the sampled texture like CSS `object-fit`. `contain` and undersized `none` leave uncovered areas transparent. |
+| `interactionMode` | `"move" \| "click" \| "both" \| "drag" \| "event"` | `"move"` | Chooses pointer-movement wakes, one ripple per pointer down, both free movement and pointer-down ripples, press ripples plus held-drag wakes, or programmatic ripples only. |
 | `runInBackground` | `boolean` | `false` | Continues stepping while hidden or unfocused and catches up elapsed time when the browser throttles background callbacks. |
 | `pauseKey` | `string` | `undefined` | Toggles simulation pausing when this [`KeyboardEvent.code`](https://developer.mozilla.org/docs/Web/API/KeyboardEvent/code) is pressed, such as `Space` or `KeyP`. Keyboard input in interactive controls is ignored. |
 | `wakeStrength` | `number` | `0.54` | Overall pointer wake strength. Slow drags stay subtle; fast movement is clamped before it reaches the shader. |
@@ -109,7 +118,7 @@ For true shader refraction, provide a texture source:
 | `specularIntensity` | `number` | `1` | Strength of fixed-light specular highlights. |
 | `crestIntensity` | `number` | `0.2` | Visibility of height-gradient crests and troughs. |
 | `causticIntensity` | `number` | `0` | Experimental ripple-driven caustic light that fades when the simulated surface is calm. |
-| `simulationResolution` | `number` | `192` | Longest side of the simulation texture. Clamped to `64...384`. |
+| `simulationResolution` | `number` | `192` | Target longest side of the simulation texture. Clamped to `64...384`. Each axis stays at least 32 texels; at extreme aspect ratios the long axis grows beyond this target to preserve simulation scale. |
 | `idleTimeout` | `number` | `900` | Minimum active time after input before the renderer begins checking whether ripples have faded enough to sleep. |
 | `className` | `string` | `undefined` | Applied to the container. |
 | `style` | `CSSProperties` | `undefined` | Merged onto the container. The component enforces relative positioning, hidden overflow, and isolation. |
@@ -149,6 +158,8 @@ Browsers do not provide an efficient, general API for sampling arbitrary live DO
 
 Use `texture` or `canvas` when you can provide an image, video, canvas, or URL that WebGL can sample. This path gives the best visual quality because the shader offsets the sampled background with `normal.xy` from the water heightfield.
 
+Use `textureFit="fill"` for the original stretched behavior, `cover` to preserve aspect ratio while cropping, `contain` to show the entire source with transparent letterboxing, or `none` to keep its intrinsic size centered at one source pixel per CSS pixel.
+
 The canvas remains transparent when no `texture` is supplied, while a URL is loading, or if loading or WebGL upload fails, allowing the `underlay` to remain visible. A successful URL load automatically requests a fresh render.
 
 ## How It Works

package/dist/WaterDistortion.d.ts

@@ -1,7 +1,7 @@
 import type { CSSProperties, ReactNode } from "react";
-import { type WaterRenderMode, type WaterTextureSource } from "./core/waterRenderer";
+import { type WaterRenderMode, type WaterTextureFit, type WaterTextureSource } from "./core/waterRenderer";
 export type ReducedMotionBehavior = "respect" | "disable" | "ignore";
-export type WaterInteractionMode = "move" | "click" | "drag" | "event";
+export type WaterInteractionMode = "move" | "click" | "both" | "drag" | "event";
 export interface WaterRipplePosition {
     /** Horizontal position normalized from 0 (left) to 1 (right). */
     x: number;
@@ -17,6 +17,7 @@ export interface WaterDistortionProps {
     foreground?: ReactNode;
     mode?: WaterRenderMode;
     texture?: WaterTextureSource;
+    textureFit?: WaterTextureFit;
     rippleStrength?: number;
     wakeStrength?: number;
     interactionRadius?: number;
@@ -52,5 +53,5 @@ export interface WaterDistortionProps {
 }
 export declare const WaterDistortion: import("react").ForwardRefExoticComponent<WaterDistortionProps & import("react").RefAttributes<WaterDistortionHandle>>;
 export declare const WaterLayer: import("react").ForwardRefExoticComponent<WaterDistortionProps & import("react").RefAttributes<WaterDistortionHandle>>;
-export type { WaterRenderMode, WaterTextureSource };
+export type { WaterRenderMode, WaterTextureFit, WaterTextureSource };
 //# sourceMappingURL=WaterDistortion.d.ts.map

package/dist/WaterDistortion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WaterDistortion.d.ts","sourceRoot":"","sources":["../src/WaterDistortion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAStD,OAAO,EAEL,KAAK,eAAe,EAEpB,KAAK,kBAAkB,EACxB,MAAM,sBAAsB,CAAC;AAS9B,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AACrE,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvE,MAAM,WAAW,mBAAmB;IAClC,iEAAiE;IACjE,CAAC,EAAE,MAAM,CAAC;IACV,+DAA+D;IAC/D,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,qBAAqB;IACpC,aAAa,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,CAAC;CACpD;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,aAAa,CAAC,EAAE,qBAAqB,CAAC;IACtC,eAAe,CAAC,EAAE,oBAAoB,CAAC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAkOD,eAAO,MAAM,eAAe,wHA0qB1B,CAAC;AAEH,eAAO,MAAM,UAAU,wHAAkB,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"WaterDistortion.d.ts","sourceRoot":"","sources":["../src/WaterDistortion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAStD,OAAO,EAEL,KAAK,eAAe,EAEpB,KAAK,eAAe,EACpB,KAAK,kBAAkB,EACxB,MAAM,sBAAsB,CAAC;AAS9B,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AACrE,MAAM,MAAM,oBAAoB,GAC5B,MAAM,GACN,OAAO,GACP,MAAM,GACN,MAAM,GACN,OAAO,CAAC;AAEZ,MAAM,WAAW,mBAAmB;IAClC,iEAAiE;IACjE,CAAC,EAAE,MAAM,CAAC;IACV,+DAA+D;IAC/D,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,qBAAqB;IACpC,aAAa,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,CAAC;CACpD;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,aAAa,CAAC,EAAE,qBAAqB,CAAC;IACtC,eAAe,CAAC,EAAE,oBAAoB,CAAC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAoOD,eAAO,MAAM,eAAe,wHAgrB1B,CAAC;AAEH,eAAO,MAAM,UAAU,wHAAkB,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/core/waterRenderer.d.ts

@@ -1,8 +1,10 @@
 import type { WaterDisturbance } from "./waterInteraction";
 export type WaterRenderMode = "dom" | "texture" | "canvas";
+export type WaterTextureFit = "fill" | "cover" | "contain" | "none";
 export type WaterTextureSource = TexImageSource | string;
 export interface WaterRendererSettings {
     mode: WaterRenderMode;
+    textureFit: WaterTextureFit;
     damping: number;
     waveSpeed: number;
     normalScale: number;
@@ -41,6 +43,8 @@ export declare class HeightfieldWaterRenderer {
     private textureImage;
     private textureReady;
     private textureNeedsUpload;
+    private textureWidth;
+    private textureHeight;
     private activityPixels;
     private readonly wakeAUniforms;
     private readonly wakeBUniforms;

package/dist/core/waterRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"waterRenderer.d.ts","sourceRoot":"","sources":["../../src/core/waterRenderer.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"waterRenderer.d.ts","sourceRoot":"","sources":["../../src/core/waterRenderer.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 export { WaterDistortion, WaterLayer } from "./WaterDistortion";
-export type { ReducedMotionBehavior, WaterDistortionHandle, WaterDistortionProps, WaterInteractionMode, WaterRenderMode, WaterRipplePosition, WaterTextureSource } from "./WaterDistortion";
+export type { ReducedMotionBehavior, WaterDistortionHandle, WaterDistortionProps, WaterInteractionMode, WaterRenderMode, WaterRipplePosition, WaterTextureFit, WaterTextureSource } from "./WaterDistortion";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAChE,YAAY,EACV,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,oBAAoB,EACpB,eAAe,EACf,mBAAmB,EACnB,kBAAkB,EACnB,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAChE,YAAY,EACV,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,oBAAoB,EACpB,eAAe,EACf,mBAAmB,EACnB,eAAe,EACf,kBAAkB,EACnB,MAAM,mBAAmB,CAAC"}

package/dist/water-distortion.cjs

@@ -1,4 +1,4 @@
-"use strict";var Ye=Object.defineProperty;var qe=(r,e,n)=>e in r?Ye(r,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):r[e]=n;var m=(r,e,n)=>qe(r,typeof e!="symbol"?e+"":e,n);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ae=require("react/jsx-runtime"),f=require("react");function h(r,e,n){return Math.min(n,Math.max(e,r))}function Ve(r,e){return Math.hypot(e.x-r.x,e.y-r.y)}function O(r,e,n){return r+(e-r)*n}const Z=24,C=128,oe=8,se=Math.PI*2,de={causticGain:.1,screenCompensation:1.35,maxAlpha:.9},je={gradient:8e-4,curvature:8e-4,trough:.006,velocity:8e-4},be=`
+"use strict";var qe=Object.defineProperty;var Ve=(r,e,n)=>e in r?qe(r,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):r[e]=n;var f=(r,e,n)=>Ve(r,typeof e!="symbol"?e+"":e,n);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ae=require("react/jsx-runtime"),m=require("react");function d(r,e,n){return Math.min(n,Math.max(e,r))}function je(r,e){return Math.hypot(e.x-r.x,e.y-r.y)}function O(r,e,n){return r+(e-r)*n}const J=24,q=32,C=128,oe=8,se=Math.PI*2,fe={causticGain:.1,screenCompensation:1.35,maxAlpha:.9},$e={gradient:8e-4,curvature:8e-4,trough:.006,velocity:8e-4},Ie=`
 attribute vec2 a_position;
 varying vec2 v_uv;
 
@@ -6,10 +6,10 @@ void main() {
   v_uv = a_position * 0.5 + 0.5;
   gl_Position = vec4(a_position, 0.0, 1.0);
 }
-`,$e=`
+`,Qe=`
 precision highp float;
 
-#define MAX_WAKE_SEGMENTS ${Z}
+#define MAX_WAKE_SEGMENTS ${J}
 
 varying vec2 v_uv;
 
@@ -99,7 +99,7 @@ void main() {
 
   gl_FragColor = vec4(height, velocity, 0.0, 1.0);
 }
-`,Qe=`
+`,Ze=`
 precision highp float;
 
 varying vec2 v_uv;
@@ -108,6 +108,7 @@ uniform sampler2D u_state;
 uniform sampler2D u_background;
 uniform sampler2D u_causticMap;
 uniform vec2 u_texel;
+uniform vec2 u_backgroundScale;
 uniform float u_domMode;
 uniform float u_normalScale;
 uniform float u_refractionStrength;
@@ -116,9 +117,9 @@ uniform float u_crestIntensity;
 uniform float u_causticIntensity;
 uniform float u_time;
 
-const float DOM_CAUSTIC_GAIN = ${de.causticGain.toFixed(2)};
-const float DOM_SCREEN_COMPENSATION = ${de.screenCompensation.toFixed(2)};
-const float DOM_MAX_ALPHA = ${de.maxAlpha.toFixed(2)};
+const float DOM_CAUSTIC_GAIN = ${fe.causticGain.toFixed(2)};
+const float DOM_SCREEN_COMPENSATION = ${fe.screenCompensation.toFixed(2)};
+const float DOM_MAX_ALPHA = ${fe.maxAlpha.toFixed(2)};
 
 vec4 causticLayer(vec2 uv, vec2 bend, mat2 rotation, float scale, vec2 drift) {
   vec2 p = rotation * (uv * scale + drift * u_time);
@@ -138,8 +139,15 @@ void main() {
   float dy = up - down;
   float signedCurvature = left + right + down + up - height * 4.0;
   vec3 normal = normalize(vec3(-dx * u_normalScale, 1.0, -dy * u_normalScale));
-  vec2 refractedUv = clamp(
-    v_uv + normal.xz * u_refractionStrength * 0.025,
+  vec2 backgroundUv = (v_uv - vec2(0.5)) * u_backgroundScale + vec2(0.5);
+  vec2 refractedUv = (
+    v_uv + normal.xz * u_refractionStrength * 0.025 - vec2(0.5)
+  ) * u_backgroundScale + vec2(0.5);
+  vec2 textureBounds =
+    step(vec2(0.0), backgroundUv) * step(backgroundUv, vec2(1.0));
+  float textureAlpha = textureBounds.x * textureBounds.y;
+  refractedUv = clamp(
+    refractedUv,
     vec2(0.001),
     vec2(0.999)
   );
@@ -230,7 +238,7 @@ void main() {
   }
 
   vec3 color = base + highlight - vec3(0.015, 0.055, 0.070) * visibleTrough * 0.45;
-  gl_FragColor = vec4(color, 1.0);
+  gl_FragColor = vec4(color, textureAlpha);
 }
-`;class Ze{constructor(e,n=()=>{}){m(this,"gl");m(this,"isWebGL2");m(this,"canLinearFloat");m(this,"quadBuffer");m(this,"simulationProgram");m(this,"materialProgram");m(this,"backgroundTexture");m(this,"causticTexture");m(this,"stateTextures");m(this,"framebuffers");m(this,"readIndex",0);m(this,"simWidth",1);m(this,"simHeight",1);m(this,"cssWidth",1);m(this,"cssHeight",1);m(this,"textureSource");m(this,"textureImage");m(this,"textureReady",!1);m(this,"textureNeedsUpload",!1);m(this,"activityPixels");m(this,"wakeAUniforms",new Float32Array(Z*4));m(this,"wakeBUniforms",new Float32Array(Z*4));m(this,"wakeShapeUniforms",new Float32Array(Z*4));this.canvas=e,this.requestRender=n;const{gl:t,isWebGL2:i,canLinearFloat:a}=et(e);this.gl=t,this.isWebGL2=i,this.canLinearFloat=a,this.quadBuffer=q(t.createBuffer(),"WebGL buffer"),this.simulationProgram=Fe(t,be,$e),this.materialProgram=Fe(t,be,Qe),this.backgroundTexture=q(t.createTexture(),"WebGL texture"),this.causticTexture=q(t.createTexture(),"WebGL texture"),t.bindBuffer(t.ARRAY_BUFFER,this.quadBuffer),t.bufferData(t.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,1,1]),t.STATIC_DRAW),t.disable(t.DEPTH_TEST),t.disable(t.STENCIL_TEST),t.disable(t.BLEND),this.initializeBackgroundTexture(),this.initializeCausticTexture(),this.resize(1,1,1,192)}resize(e,n,t,i){this.cssWidth=Math.max(1,e),this.cssHeight=Math.max(1,n);const a=Math.min(2,Math.max(1,t||1)),l=Math.max(1,Math.round(this.cssWidth*a)),c=Math.max(1,Math.round(this.cssHeight*a));(this.canvas.width!==l||this.canvas.height!==c)&&(this.canvas.width=l,this.canvas.height=c);const s=Math.max(32,Math.round(i)),d=this.cssWidth/this.cssHeight,p=d>=1?s:Math.max(1,Math.round(s*d)),_=d>=1?Math.max(1,Math.round(s/d)):s;p===this.simWidth&&_===this.simHeight||(this.simWidth=p,this.simHeight=_,this.recreateState())}setTextureSource(e){if(e===this.textureSource||(this.textureSource=e,this.textureImage=void 0,this.textureReady=!1,this.textureNeedsUpload=!1,!e))return;if(typeof e!="string"){this.textureImage=e,this.textureNeedsUpload=!0;return}const n=new Image;n.crossOrigin="anonymous",n.onload=()=>{this.textureSource===e&&(this.textureImage=n,this.textureNeedsUpload=!0,this.requestRender())},n.onerror=()=>{this.textureSource===e&&(this.textureImage=void 0,this.textureReady=!1,this.textureNeedsUpload=!1)},n.src=e}step(e,n,t){if(!this.stateTextures||!this.framebuffers)return;const i=this.gl,a=1-this.readIndex;i.useProgram(this.simulationProgram.program),i.bindFramebuffer(i.FRAMEBUFFER,this.framebuffers[a]),i.viewport(0,0,this.simWidth,this.simHeight),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,this.stateTextures[this.readIndex]),this.prepareQuad(this.simulationProgram),this.setSimulationUniforms(e,n,t),i.drawArrays(i.TRIANGLE_STRIP,0,4),i.bindFramebuffer(i.FRAMEBUFFER,null),this.readIndex=a}render(e,n=0){const t=this.gl;this.stateTextures&&(e.texture?this.setTextureSource(e.texture):this.setTextureSource(void 0),this.uploadTextureIfNeeded(e),t.useProgram(this.materialProgram.program),t.bindFramebuffer(t.FRAMEBUFFER,null),t.viewport(0,0,this.canvas.width,this.canvas.height),t.clearColor(0,0,0,0),t.clear(t.COLOR_BUFFER_BIT),!(e.mode!=="dom"&&!this.textureReady)&&(t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,this.stateTextures[this.readIndex]),t.activeTexture(t.TEXTURE1),t.bindTexture(t.TEXTURE_2D,this.backgroundTexture),t.activeTexture(t.TEXTURE2),t.bindTexture(t.TEXTURE_2D,this.causticTexture),this.prepareQuad(this.materialProgram),this.setMaterialUniforms(e,n),t.drawArrays(t.TRIANGLE_STRIP,0,4)))}hasVisibleActivity(){if(!this.framebuffers)return!1;const e=this.gl,n=this.framebuffers[this.readIndex],t=this.simWidth*this.simHeight*4;(!this.activityPixels||this.activityPixels.length!==t)&&(this.activityPixels=new Float32Array(t)),e.bindFramebuffer(e.FRAMEBUFFER,n);try{e.readPixels(0,0,this.simWidth,this.simHeight,e.RGBA,e.FLOAT,this.activityPixels)}finally{e.bindFramebuffer(e.FRAMEBUFFER,null)}return rt(this.activityPixels,this.simWidth,this.simHeight)}clear(){const e=this.gl;if(this.framebuffers){e.viewport(0,0,this.simWidth,this.simHeight);for(const n of this.framebuffers)e.bindFramebuffer(e.FRAMEBUFFER,n),e.clearColor(0,0,0,1),e.clear(e.COLOR_BUFFER_BIT)}e.bindFramebuffer(e.FRAMEBUFFER,null),e.viewport(0,0,this.canvas.width,this.canvas.height),e.clearColor(0,0,0,0),e.clear(e.COLOR_BUFFER_BIT)}dispose(){var n,t;const e=this.gl;(n=this.stateTextures)==null||n.forEach(i=>e.deleteTexture(i)),(t=this.framebuffers)==null||t.forEach(i=>e.deleteFramebuffer(i)),e.deleteTexture(this.backgroundTexture),e.deleteTexture(this.causticTexture),e.deleteBuffer(this.quadBuffer),e.deleteProgram(this.simulationProgram.program),e.deleteProgram(this.materialProgram.program)}recreateState(){var l,c;const e=this.gl;(l=this.stateTextures)==null||l.forEach(s=>e.deleteTexture(s)),(c=this.framebuffers)==null||c.forEach(s=>e.deleteFramebuffer(s));const n=this.createStateTexture(),t=this.createStateTexture(),i=this.createFramebuffer(n),a=this.createFramebuffer(t);this.stateTextures=[n,t],this.framebuffers=[i,a],this.readIndex=0,this.clear()}createStateTexture(){const e=this.gl,n=q(e.createTexture(),"WebGL texture");if(e.bindTexture(e.TEXTURE_2D,n),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,this.canLinearFloat?e.LINEAR:e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,this.canLinearFloat?e.LINEAR:e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),this.isWebGL2){const t=e;t.texImage2D(t.TEXTURE_2D,0,t.RGBA32F,this.simWidth,this.simHeight,0,t.RGBA,t.FLOAT,null)}else e.texImage2D(e.TEXTURE_2D,0,e.RGBA,this.simWidth,this.simHeight,0,e.RGBA,e.FLOAT,null);return n}createFramebuffer(e){const n=this.gl,t=q(n.createFramebuffer(),"WebGL framebuffer");if(n.bindFramebuffer(n.FRAMEBUFFER,t),n.framebufferTexture2D(n.FRAMEBUFFER,n.COLOR_ATTACHMENT0,n.TEXTURE_2D,e,0),n.checkFramebufferStatus(n.FRAMEBUFFER)!==n.FRAMEBUFFER_COMPLETE)throw new Error("WaterDistortion could not create a float simulation target.");return n.bindFramebuffer(n.FRAMEBUFFER,null),t}initializeBackgroundTexture(){const e=this.gl;e.bindTexture(e.TEXTURE_2D,this.backgroundTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,1,1,0,e.RGBA,e.UNSIGNED_BYTE,new Uint8Array([18,28,26,255]))}initializeCausticTexture(){const e=this.gl;e.bindTexture(e.TEXTURE_2D,this.causticTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR_MIPMAP_LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,C,C,0,e.RGBA,e.UNSIGNED_BYTE,Je()),e.generateMipmap(e.TEXTURE_2D)}uploadTextureIfNeeded(e){if(e.mode==="dom"||!this.textureImage||!this.textureNeedsUpload&&!tt(this.textureImage))return;const n=this.gl;try{n.bindTexture(n.TEXTURE_2D,this.backgroundTexture),n.pixelStorei(n.UNPACK_FLIP_Y_WEBGL,1),n.texImage2D(n.TEXTURE_2D,0,n.RGBA,n.RGBA,n.UNSIGNED_BYTE,this.textureImage),n.pixelStorei(n.UNPACK_FLIP_Y_WEBGL,0),this.textureReady=!0,this.textureNeedsUpload=!1}catch{this.textureReady=!1,this.textureNeedsUpload=!1}}prepareQuad(e){const n=this.gl;n.bindBuffer(n.ARRAY_BUFFER,this.quadBuffer),n.enableVertexAttribArray(e.position),n.vertexAttribPointer(e.position,2,n.FLOAT,!1,0,0)}setSimulationUniforms(e,n,t){const i=this.gl,a=this.simulationProgram.program,l=Math.min(e.length,Z),c=this.wakeAUniforms,s=this.wakeBUniforms,d=this.wakeShapeUniforms,p=Math.max(0,e.length-Z);c.fill(0),s.fill(0),d.fill(0);for(let _=0;_<l;_+=1){const g=e[p+_],x=_*4;c[x]=g.ax,c[x+1]=g.ay,c[x+2]=g.radius,c[x+3]=g.wakeStrength,s[x]=g.bx,s[x+1]=g.by,s[x+2]=g.wakeLength,s[x+3]=g.velocity,d[x]=g.troughStrength,d[x+1]=g.ridgeStrength,d[x+2]=g.ridgeOffset}i.uniform1i(T(i,a,"u_state"),0),i.uniform2f(T(i,a,"u_texel"),1/this.simWidth,1/this.simHeight),i.uniform1f(T(i,a,"u_delta"),t),i.uniform1f(T(i,a,"u_damping"),n.damping),i.uniform1f(T(i,a,"u_stiffness"),n.waveSpeed),i.uniform1f(T(i,a,"u_aspect"),this.cssWidth/this.cssHeight),i.uniform1i(T(i,a,"u_wakeCount"),l),i.uniform4fv(T(i,a,"u_wakeA[0]"),c),i.uniform4fv(T(i,a,"u_wakeB[0]"),s),i.uniform4fv(T(i,a,"u_wakeShape[0]"),d)}setMaterialUniforms(e,n){const t=this.gl,i=this.materialProgram.program;t.uniform1i(T(t,i,"u_state"),0),t.uniform1i(T(t,i,"u_background"),1),t.uniform1i(T(t,i,"u_causticMap"),2),t.uniform2f(T(t,i,"u_texel"),1/this.simWidth,1/this.simHeight),t.uniform1f(T(t,i,"u_domMode"),e.mode==="dom"?1:0),t.uniform1f(T(t,i,"u_normalScale"),e.normalScale),t.uniform1f(T(t,i,"u_refractionStrength"),e.refractionStrength),t.uniform1f(T(t,i,"u_specularIntensity"),e.specularIntensity),t.uniform1f(T(t,i,"u_crestIntensity"),e.crestIntensity),t.uniform1f(T(t,i,"u_causticIntensity"),e.causticIntensity),t.uniform1f(T(t,i,"u_time"),n%1e3)}}function Je(){const r=new Uint8Array(C*C*4);for(let e=0;e<C;e+=1)for(let n=0;n<C;n+=1){const t=(n+.5)/C,i=(e+.5)/C,a=Math.round(ce(t,i,0)*255),l=Math.round(ce(t,i,11)*255),c=Math.round(ce(t,i,23)*255),s=Math.round(ce(t,i,37)*255),d=(e*C+n)*4;r[d]=a,r[d+1]=l,r[d+2]=c,r[d+3]=s}return r}function ce(r,e,n){const t=Math.sin(se*(e*2+n*.013))*.12+Math.sin(se*(r*3+e+n*.021))*.06,i=Math.cos(se*(r*2+n*.017))*.12+Math.sin(se*(e*3-r+n*.019))*.06,a=r*oe+t,l=e*oe+i,c=Math.floor(a),s=Math.floor(l);let d=Number.POSITIVE_INFINITY,p=Number.POSITIVE_INFINITY,_=0,g=0;for(let P=-1;P<=1;P+=1)for(let D=-1;D<=1;D+=1){const k=c+D,B=s+P,M=Ae(k,oe),I=Ae(B,oe),z=k+.16+fe(M,I,n)*.68,N=B+.16+fe(M,I,n+1)*.68,U=Math.hypot(a-z,l-N);U<d?(p=d,d=U,_=M,g=I):U<p&&(p=U)}const x=p-d,A=1-Ie(.025,.13,x),w=1-Ie(.08,.34,x),W=.74+fe(_,g,n+2)*.26,H=A*A*.58+w*.34;return Ce(Math.pow(H*W,1.12))}function fe(r,e,n){const t=Math.sin(r*127.1+e*311.7+n*74.7)*43758.5453123;return t-Math.floor(t)}function Ae(r,e){return(r%e+e)%e}function Ie(r,e,n){const t=Ce((n-r)/(e-r));return t*t*(3-t*2)}function Ce(r){return Math.min(1,Math.max(0,r))}function et(r){const e={alpha:!0,antialias:!1,depth:!1,stencil:!1,premultipliedAlpha:!1,preserveDrawingBuffer:!1},n=r.getContext("webgl2",e);if(n){if(!n.getExtension("EXT_color_buffer_float"))throw new Error("WaterDistortion requires float render targets.");return{gl:n,isWebGL2:!0,canLinearFloat:!!n.getExtension("OES_texture_float_linear")}}const t=r.getContext("webgl",e)||r.getContext("experimental-webgl",e);if(!t)throw new Error("WaterDistortion requires WebGL.");if(!t.getExtension("OES_texture_float")||!t.getExtension("WEBGL_color_buffer_float")&&!t.getExtension("EXT_color_buffer_float"))throw new Error("WaterDistortion requires float texture support.");return{gl:t,isWebGL2:!1,canLinearFloat:!!t.getExtension("OES_texture_float_linear")}}function Fe(r,e,n){const t=Le(r,r.VERTEX_SHADER,e),i=Le(r,r.FRAGMENT_SHADER,n),a=q(r.createProgram(),"WebGL program");if(r.attachShader(a,t),r.attachShader(a,i),r.linkProgram(a),r.deleteShader(t),r.deleteShader(i),!r.getProgramParameter(a,r.LINK_STATUS)){const c=r.getProgramInfoLog(a)||"Unknown shader link error.";throw r.deleteProgram(a),new Error(c)}const l=r.getAttribLocation(a,"a_position");if(l<0)throw new Error("WaterDistortion could not bind its quad attribute.");return{program:a,position:l}}function Le(r,e,n){const t=q(r.createShader(e),"WebGL shader");if(r.shaderSource(t,n),r.compileShader(t),!r.getShaderParameter(t,r.COMPILE_STATUS)){const i=r.getShaderInfoLog(t)||"Unknown shader compile error.";throw r.deleteShader(t),new Error(i)}return t}function T(r,e,n){const t=r.getUniformLocation(e,n);if(!t)throw new Error(`WaterDistortion could not bind uniform ${n}.`);return t}function q(r,e){if(!r)throw new Error(`WaterDistortion could not create ${e}.`);return r}function tt(r){return typeof HTMLCanvasElement<"u"&&r instanceof HTMLCanvasElement||typeof HTMLVideoElement<"u"&&r instanceof HTMLVideoElement||typeof OffscreenCanvas<"u"&&r instanceof OffscreenCanvas}function rt(r,e,n,t=je){const i=Math.max(0,Math.floor(e)),a=Math.max(0,Math.floor(n));if(i===0||a===0)return!1;const l=(c,s)=>r[(s*i+c)*4]??0;for(let c=0;c<a;c+=1)for(let s=0;s<i;s+=1){const d=(c*i+s)*4,p=r[d]??0,_=r[d+1]??0;if(p<-t.trough||Math.abs(_)>t.velocity)return!0;const g=s>0?l(s-1,c):p,x=s<i-1?l(s+1,c):p,A=c>0?l(s,c-1):p,w=c<a-1?l(s,c+1):p,W=Math.hypot(x-g,w-A),H=Math.abs(g+x+A+w-p*4);if(W>t.gradient||H>t.curvature)return!0}return!1}const L={width:1,height:1,interactionRadius:25,wakeStrength:.54,troughStrength:.92,ridgeStrength:.46,ridgeOffset:10,wakeLength:84,velocityScale:1,velocityClamp:1.35,cursorSmoothing:.2,segmentSpacing:18},nt=24;function me(r){return{width:Math.max(1,r.width??L.width),height:Math.max(1,r.height??L.height),interactionRadius:Math.max(1,r.interactionRadius??L.interactionRadius),wakeStrength:Math.max(0,r.wakeStrength??L.wakeStrength),troughStrength:Math.max(0,r.troughStrength??L.troughStrength),ridgeStrength:Math.max(0,r.ridgeStrength??L.ridgeStrength),ridgeOffset:Math.max(0,r.ridgeOffset??L.ridgeOffset),wakeLength:Math.max(1,r.wakeLength??L.wakeLength),velocityScale:Math.max(.01,r.velocityScale??L.velocityScale),velocityClamp:Math.max(.05,r.velocityClamp??L.velocityClamp),cursorSmoothing:h(r.cursorSmoothing??L.cursorSmoothing,0,.9),segmentSpacing:Math.max(1,r.segmentSpacing??L.segmentSpacing)}}function ke(r,e,n=r.timeStamp){const t=typeof r.getCoalescedEvents=="function"?r.getCoalescedEvents():[],i=t.length>0?t:[r],a=n-r.timeStamp;return i.map(l=>({x:l.clientX-e.left,y:l.clientY-e.top,time:l.timeStamp+a}))}class it{constructor(e={}){m(this,"options");m(this,"previous");m(this,"smoothedVelocity",0);m(this,"disturbances",[]);this.options=me(e)}configure(e){this.options=me({...this.options,...e})}reset(){this.previous=void 0,this.smoothedVelocity=0,this.disturbances.length=0}addSample(e){this.disturbances.length=0;const n=this.clampSample(e),t=this.previous;if(!t)return this.previous=n,this.disturbances;n.time<=t.time&&(n.time=t.time+.01);const i=this.smoothSample(t,n),a=Ve(t,i);if(a<.35)return this.previous=i,this.disturbances;const l=a/Math.max(.01,i.time-t.time),c=h(1-this.options.cursorSmoothing,.12,1);this.smoothedVelocity=O(this.smoothedVelocity,l,c),this.previous=i;const s=Math.min(nt,Math.max(1,Math.ceil(a/this.options.segmentSpacing)));for(let d=0;d<s;d+=1){const p=d/s,_=(d+1)/s;this.disturbances.push(ge(De(t,i,p),De(t,i,_),this.smoothedVelocity,this.options))}return this.disturbances}clampSample(e){return{x:h(e.x,0,this.options.width),y:h(e.y,0,this.options.height),time:e.time}}smoothSample(e,n){const t=1-this.options.cursorSmoothing;return{x:O(e.x,n.x,t),y:O(e.y,n.y,t),time:n.time}}}function ge(r,e,n,t){const i=me(t),a=h(n*i.velocityScale/i.velocityClamp,0,1),l=h(r.y/i.height,0,1),c=h(e.y/i.height,0,1),s=i.wakeLength*O(.55,1.35,a);return{ax:h(r.x/i.width,0,1),ay:1-l,bx:h(e.x/i.width,0,1),by:1-c,radius:i.interactionRadius/i.height,wakeStrength:i.wakeStrength*O(.18,1,a),troughStrength:i.troughStrength,ridgeStrength:i.ridgeStrength,ridgeOffset:i.ridgeOffset/i.height,wakeLength:s/i.height,velocity:a}}function De(r,e,n){return{x:O(r.x,e.x,n),y:O(r.y,e.y,n),time:O(r.time,e.time,n)}}function at(r){const e=h(r,.85,.998),n=Math.ceil(Math.log(.012)/Math.log(e));return h(n*(1e3/60),900,5200)}const E={mode:"texture",damping:.98,waveSpeed:.4,normalScale:20,refractionStrength:.7,specularIntensity:1,crestIntensity:.2,causticIntensity:0,simulationResolution:192,wakeStrength:.54,interactionRadius:25,troughStrength:.92,ridgeStrength:.46,ridgeOffset:10,wakeLength:84,velocityScale:1,velocityClamp:1.35,cursorSmoothing:.2,segmentSpacing:18,idleTimeout:900,interactionMode:"move",runInBackground:!1,pauseKey:void 0},G=1e3/60,ot=4,Ue=360,Pe=24,st=200;function ct(r){return r instanceof Element&&r.closest("a, button, input, select, textarea, [contenteditable]:not([contenteditable=false])")!==null}function ut(r){const e=r.strength===void 0?void 0:r.strength/48;return{mode:r.mode??E.mode,texture:r.texture,damping:h(r.damping??r.dissipation??E.damping,.85,.998),waveSpeed:h(r.waveSpeed??E.waveSpeed,.05,1),normalScale:h(r.normalScale??E.normalScale,1,80),refractionStrength:h(r.refractionStrength??E.refractionStrength,0,2.5),specularIntensity:h(r.specularIntensity??E.specularIntensity,0,3),crestIntensity:h(r.crestIntensity??E.crestIntensity,0,3),causticIntensity:h(r.causticIntensity??E.causticIntensity,0,3),simulationResolution:h(Math.round(r.simulationResolution??E.simulationResolution),64,384),wakeStrength:h(r.wakeStrength??r.rippleStrength??e??E.wakeStrength,0,3),interactionRadius:h(r.interactionRadius??E.interactionRadius,2,80),troughStrength:h(r.troughStrength??E.troughStrength,0,3),ridgeStrength:h(r.ridgeStrength??E.ridgeStrength,0,3),ridgeOffset:h(r.ridgeOffset??E.ridgeOffset,0,80),wakeLength:h(r.wakeLength??E.wakeLength,1,240),velocityScale:h(r.velocityScale??E.velocityScale,.01,4),velocityClamp:h(r.velocityClamp??E.velocityClamp,.05,8),cursorSmoothing:h(r.cursorSmoothing??E.cursorSmoothing,0,.9),segmentSpacing:h(r.segmentSpacing??E.segmentSpacing,1,96),idleTimeout:Math.max(120,r.idleTimeout??E.idleTimeout),interactionMode:r.interactionMode??E.interactionMode,runInBackground:r.runInBackground??E.runInBackground,pauseKey:r.pauseKey||E.pauseKey}}function Be(r,e,n){const t=h(r.x,0,1)*n.width,i=h(r.y,0,1)*n.height,a=Math.max(.5,e.interactionRadius*.08),l=e.velocityClamp/e.velocityScale,c={...e,width:n.width,height:n.height,wakeLength:e.interactionRadius*1.5};return[ge({x:t-a,y:i},{x:t+a,y:i},l,c),ge({x:t,y:i-a},{x:t,y:i+a},l,c)]}function lt(r){const[e,n]=f.useState(!1);return f.useEffect(()=>{if(!r||typeof window>"u"||!window.matchMedia){n(!1);return}const t=window.matchMedia("(prefers-reduced-motion: reduce)");n(t.matches);const i=a=>{n(a.matches)};return t.addEventListener("change",i),()=>{t.removeEventListener("change",i)}},[r]),e}const We=f.forwardRef(function(e,n){const{underlay:t,children:i,foreground:a,className:l,style:c,reducedMotion:s="respect"}=e,d=f.useRef(null),p=f.useRef(null),_=f.useRef(null),g=f.useRef(new it),x=f.useRef(null),A=f.useRef(null),w=f.useRef(()=>{}),W=f.useRef(()=>{}),H=f.useRef(()=>{}),P=f.useRef([]),D=f.useRef(!0),k=f.useRef(!0),B=f.useRef(!1),M=f.useRef(!1),I=f.useRef(null),z=f.useRef(0),N=f.useRef(0),U=f.useRef(0),y=ut(e),v=f.useRef(y),V=f.useRef({width:1,height:1}),Ne=lt(s==="respect"),ue=s==="disable"||s==="respect"&&Ne,Xe=a??i;v.current=y,f.useImperativeHandle(n,()=>({triggerRipple(S){B.current||M.current||H.current(Be(S,v.current,V.current))}}),[]),f.useEffect(()=>{var S;B.current=ue,ue&&(g.current.reset(),I.current=null,P.current=[],z.current=0,N.current=0,U.current=0,(S=_.current)==null||S.clear()),w.current()},[ue]),f.useEffect(()=>{const S=_.current;if(!S)return;const{width:K,height:b}=V.current;S.resize(K,b,window.devicePixelRatio,y.simulationResolution),S.setTextureSource(y.texture),w.current()},[y.mode,y.texture,y.damping,y.waveSpeed,y.normalScale,y.refractionStrength,y.specularIntensity,y.crestIntensity,y.causticIntensity,y.simulationResolution]),f.useEffect(()=>{const S=d.current,K=p.current;if(!S||!K)return;k.current=typeof document.hasFocus=="function"?document.hasFocus():!0;let b=null,ne,J=G,ve=!1,ee;const Y=()=>{x.current!==null&&(window.cancelAnimationFrame(x.current),x.current=null),A.current!==null&&(window.clearTimeout(A.current),A.current=null)},Oe=(o,u)=>{g.current.configure({width:o,height:u,interactionRadius:v.current.interactionRadius,wakeStrength:v.current.wakeStrength,troughStrength:v.current.troughStrength,ridgeStrength:v.current.ridgeStrength,ridgeOffset:v.current.ridgeOffset,wakeLength:v.current.wakeLength,velocityScale:v.current.velocityScale,velocityClamp:v.current.velocityClamp,cursorSmoothing:v.current.cursorSmoothing,segmentSpacing:v.current.segmentSpacing})},He=(o,u)=>{const F=Math.max(1,o),R=Math.max(1,u);V.current={width:F,height:R},Oe(F,R),b==null||b.resize(F,R,window.devicePixelRatio,v.current.simulationResolution)},xe=()=>{b==null||b.render(v.current,performance.now()*.001)},X=()=>{ne=void 0,J=G},te=()=>{Y(),g.current.reset(),I.current=null,X(),ee===void 0&&(ee=performance.now())},j=()=>{const o=v.current;let u=!1;if(!(!B.current&&!M.current&&D.current&&(o.runInBackground||!document.hidden&&k.current))){X();return}if(ee!==void 0){const R=performance.now()-ee;z.current+=R,N.current+=R,U.current+=R,ee=void 0,u=!0}(!o.runInBackground||u)&&X(),xe(),w.current()},Ee=o=>{x.current=null;const u=v.current;if(!b||M.current||!D.current||!u.runInBackground&&(document.hidden||!k.current)){X();return}if(B.current){P.current=[],b.render(u,o*.001),X();return}const F=u.runInBackground?Ue:ot,R=ne===void 0?G:h(o-ne,0,u.runInBackground?G*Ue:64);ne=o,J=Math.min(J+R,G*F);let Q=P.current.splice(0),Me=0;for(;J>=G&&Me<F;)b.step(Q,u,1),Q=[],J-=G,Me+=1;if(b.render(u,o*.001),P.current.length>0){w.current();return}if(o<z.current){w.current();return}if(ve){o<N.current?w.current():X();return}if(o<U.current){w.current();return}try{b.hasVisibleActivity()?(U.current=o+st,w.current()):X()}catch{ve=!0,o<N.current?w.current():X()}},le=()=>{M.current||x.current!==null||A.current!==null||(v.current.runInBackground&&document.hidden?A.current=window.setTimeout(()=>{A.current=null,Ee(performance.now())},G):x.current=window.requestAnimationFrame(Ee))};w.current=le;try{b=new Ze(K,()=>{w.current()}),_.current=b,b.setTextureSource(v.current.texture)}catch{return K.style.display="none",_.current=null,w.current=()=>{},()=>{}}const ie=()=>{const o=K.getBoundingClientRect();return He(o.width,o.height),o},ze=()=>{ie(),xe()},he=o=>{if(M.current||o.length===0)return;const u=P.current;for(const Q of o)u.push(Q);u.length>Pe&&u.splice(0,u.length-Pe);const R=performance.now()+v.current.idleTimeout;z.current=Math.max(z.current,R),N.current=Math.max(N.current,R+at(v.current.damping)),U.current=0,le()};H.current=he;const pe=o=>{const u=v.current;if(B.current||M.current||!D.current||u.interactionMode==="event"||!u.runInBackground&&(document.hidden||!k.current)||o.pointerType==="touch"&&!o.isPrimary)return;g.current.reset();const F=ie(),[R]=ke(o,F,performance.now());R&&((u.interactionMode==="click"||u.interactionMode==="drag")&&he(Be({x:R.x/V.current.width,y:R.y/V.current.height},u,V.current)),u.interactionMode==="drag"?(I.current=o.pointerId,g.current.addSample(R)):u.interactionMode==="move"&&g.current.addSample(R))},_e=o=>{const u=v.current;if(B.current||M.current||!D.current||u.interactionMode!=="move"&&(u.interactionMode!=="drag"||I.current!==o.pointerId)||!u.runInBackground&&(document.hidden||!k.current)||o.pointerType==="touch"&&!o.isPrimary)return;const F=ie(),R=ke(o,F,performance.now());for(const Q of R)he(g.current.addSample(Q))},$=o=>{I.current!==null&&I.current!==o.pointerId||(I.current=null,g.current.reset())},Se=o=>{const u=v.current.pauseKey;!u||o.code!==u||o.repeat||o.altKey||o.ctrlKey||o.metaKey||ct(o.target)||(o.preventDefault(),M.current=!M.current,M.current?te():(Y(),j()))},Te=()=>{Y(),document.hidden&&!v.current.runInBackground?te():j()},Re=()=>{k.current=!1,v.current.runInBackground?(Y(),j()):te()},ye=()=>{k.current=!0,Y(),j()},Ke=()=>{Y(),!v.current.runInBackground&&(document.hidden||!k.current)?te():j()};W.current=Ke,ze();const we=new ResizeObserver(()=>{ie(),le()});we.observe(K);let re;return"IntersectionObserver"in window&&(re=new IntersectionObserver(o=>{const u=o[0];D.current=u?u.isIntersecting:!0,D.current?j():te()}),re.observe(S)),S.addEventListener("pointerdown",pe,{passive:!0}),S.addEventListener("pointermove",_e,{passive:!0}),S.addEventListener("pointerup",$,{passive:!0}),S.addEventListener("pointerleave",$,{passive:!0}),S.addEventListener("pointercancel",$,{passive:!0}),window.addEventListener("blur",Re),window.addEventListener("focus",ye),document.addEventListener("keydown",Se),document.addEventListener("visibilitychange",Te),()=>{var o;Y(),we.disconnect(),re==null||re.disconnect(),S.removeEventListener("pointerdown",pe),S.removeEventListener("pointermove",_e),S.removeEventListener("pointerup",$),S.removeEventListener("pointerleave",$),S.removeEventListener("pointercancel",$),window.removeEventListener("blur",Re),window.removeEventListener("focus",ye),document.removeEventListener("keydown",Se),document.removeEventListener("visibilitychange",Te),(o=_.current)==null||o.dispose(),_.current=null,w.current=()=>{},W.current=()=>{},H.current=()=>{}}},[]),f.useEffect(()=>{g.current.reset(),I.current=null},[y.interactionMode]),f.useEffect(()=>{W.current()},[y.runInBackground]),f.useEffect(()=>{!y.pauseKey&&M.current&&(M.current=!1,W.current())},[y.pauseKey]);const Ge={...c,position:"relative",overflow:"hidden",isolation:"isolate"};return ae.jsxs("div",{ref:d,className:l,style:Ge,children:[t?ae.jsx("div",{style:{position:"absolute",inset:0,zIndex:0,pointerEvents:"none",transform:"translateZ(0)"},children:t}):null,ae.jsx("canvas",{ref:p,"aria-hidden":"true",style:{position:"absolute",inset:0,zIndex:1,width:"100%",height:"100%",pointerEvents:"none",mixBlendMode:y.mode==="dom"?"screen":"normal"}}),ae.jsx("div",{style:{position:"relative",zIndex:2},children:Xe})]})}),ht=We;exports.WaterDistortion=We;exports.WaterLayer=ht;
+`;class Je{constructor(e,n=()=>{}){f(this,"gl");f(this,"isWebGL2");f(this,"canLinearFloat");f(this,"quadBuffer");f(this,"simulationProgram");f(this,"materialProgram");f(this,"backgroundTexture");f(this,"causticTexture");f(this,"stateTextures");f(this,"framebuffers");f(this,"readIndex",0);f(this,"simWidth",1);f(this,"simHeight",1);f(this,"cssWidth",1);f(this,"cssHeight",1);f(this,"textureSource");f(this,"textureImage");f(this,"textureReady",!1);f(this,"textureNeedsUpload",!1);f(this,"textureWidth",0);f(this,"textureHeight",0);f(this,"activityPixels");f(this,"wakeAUniforms",new Float32Array(J*4));f(this,"wakeBUniforms",new Float32Array(J*4));f(this,"wakeShapeUniforms",new Float32Array(J*4));this.canvas=e,this.requestRender=n;const{gl:t,isWebGL2:i,canLinearFloat:a}=nt(e);this.gl=t,this.isWebGL2=i,this.canLinearFloat=a,this.quadBuffer=V(t.createBuffer(),"WebGL buffer"),this.simulationProgram=ke(t,Ie,Qe),this.materialProgram=ke(t,Ie,Ze),this.backgroundTexture=V(t.createTexture(),"WebGL texture"),this.causticTexture=V(t.createTexture(),"WebGL texture"),t.bindBuffer(t.ARRAY_BUFFER,this.quadBuffer),t.bufferData(t.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,1,1]),t.STATIC_DRAW),t.disable(t.DEPTH_TEST),t.disable(t.STENCIL_TEST),t.disable(t.BLEND),this.initializeBackgroundTexture(),this.initializeCausticTexture(),this.resize(1,1,1,192)}resize(e,n,t,i){this.cssWidth=Math.max(1,e),this.cssHeight=Math.max(1,n);const a=Math.min(2,Math.max(1,t||1)),s=Math.max(1,Math.round(this.cssWidth*a)),u=Math.max(1,Math.round(this.cssHeight*a));(this.canvas.width!==s||this.canvas.height!==u)&&(this.canvas.width=s,this.canvas.height=u);const c=Math.max(q,Math.round(i)),h=this.cssWidth/this.cssHeight;let x=c,E=c;h>=1?(E=Math.round(c/h),E<q&&(E=q,x=Math.round(q*h))):(x=Math.round(c*h),x<q&&(x=q,E=Math.round(q/h))),!(x===this.simWidth&&E===this.simHeight)&&(this.simWidth=x,this.simHeight=E,this.recreateState())}setTextureSource(e){if(e===this.textureSource||(this.textureSource=e,this.textureImage=void 0,this.textureReady=!1,this.textureNeedsUpload=!1,this.textureWidth=0,this.textureHeight=0,!e))return;if(typeof e!="string"){this.textureImage=e,this.textureNeedsUpload=!0;return}const n=new Image;n.crossOrigin="anonymous",n.onload=()=>{this.textureSource===e&&(this.textureImage=n,this.textureNeedsUpload=!0,this.requestRender())},n.onerror=()=>{this.textureSource===e&&(this.textureImage=void 0,this.textureReady=!1,this.textureNeedsUpload=!1)},n.src=e}step(e,n,t){if(!this.stateTextures||!this.framebuffers)return;const i=this.gl,a=1-this.readIndex;i.useProgram(this.simulationProgram.program),i.bindFramebuffer(i.FRAMEBUFFER,this.framebuffers[a]),i.viewport(0,0,this.simWidth,this.simHeight),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,this.stateTextures[this.readIndex]),this.prepareQuad(this.simulationProgram),this.setSimulationUniforms(e,n,t),i.drawArrays(i.TRIANGLE_STRIP,0,4),i.bindFramebuffer(i.FRAMEBUFFER,null),this.readIndex=a}render(e,n=0){const t=this.gl;this.stateTextures&&(e.texture?this.setTextureSource(e.texture):this.setTextureSource(void 0),this.uploadTextureIfNeeded(e),t.useProgram(this.materialProgram.program),t.bindFramebuffer(t.FRAMEBUFFER,null),t.viewport(0,0,this.canvas.width,this.canvas.height),t.clearColor(0,0,0,0),t.clear(t.COLOR_BUFFER_BIT),!(e.mode!=="dom"&&!this.textureReady)&&(t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,this.stateTextures[this.readIndex]),t.activeTexture(t.TEXTURE1),t.bindTexture(t.TEXTURE_2D,this.backgroundTexture),t.activeTexture(t.TEXTURE2),t.bindTexture(t.TEXTURE_2D,this.causticTexture),this.prepareQuad(this.materialProgram),this.setMaterialUniforms(e,n),t.drawArrays(t.TRIANGLE_STRIP,0,4)))}hasVisibleActivity(){if(!this.framebuffers)return!1;const e=this.gl,n=this.framebuffers[this.readIndex],t=this.simWidth*this.simHeight*4;(!this.activityPixels||this.activityPixels.length!==t)&&(this.activityPixels=new Float32Array(t)),e.bindFramebuffer(e.FRAMEBUFFER,n);try{e.readPixels(0,0,this.simWidth,this.simHeight,e.RGBA,e.FLOAT,this.activityPixels)}finally{e.bindFramebuffer(e.FRAMEBUFFER,null)}return at(this.activityPixels,this.simWidth,this.simHeight)}clear(){const e=this.gl;if(this.framebuffers){e.viewport(0,0,this.simWidth,this.simHeight);for(const n of this.framebuffers)e.bindFramebuffer(e.FRAMEBUFFER,n),e.clearColor(0,0,0,1),e.clear(e.COLOR_BUFFER_BIT)}e.bindFramebuffer(e.FRAMEBUFFER,null),e.viewport(0,0,this.canvas.width,this.canvas.height),e.clearColor(0,0,0,0),e.clear(e.COLOR_BUFFER_BIT)}dispose(){var n,t;const e=this.gl;(n=this.stateTextures)==null||n.forEach(i=>e.deleteTexture(i)),(t=this.framebuffers)==null||t.forEach(i=>e.deleteFramebuffer(i)),e.deleteTexture(this.backgroundTexture),e.deleteTexture(this.causticTexture),e.deleteBuffer(this.quadBuffer),e.deleteProgram(this.simulationProgram.program),e.deleteProgram(this.materialProgram.program)}recreateState(){var s,u;const e=this.gl;(s=this.stateTextures)==null||s.forEach(c=>e.deleteTexture(c)),(u=this.framebuffers)==null||u.forEach(c=>e.deleteFramebuffer(c));const n=this.createStateTexture(),t=this.createStateTexture(),i=this.createFramebuffer(n),a=this.createFramebuffer(t);this.stateTextures=[n,t],this.framebuffers=[i,a],this.readIndex=0,this.clear()}createStateTexture(){const e=this.gl,n=V(e.createTexture(),"WebGL texture");if(e.bindTexture(e.TEXTURE_2D,n),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,this.canLinearFloat?e.LINEAR:e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,this.canLinearFloat?e.LINEAR:e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),this.isWebGL2){const t=e;t.texImage2D(t.TEXTURE_2D,0,t.RGBA32F,this.simWidth,this.simHeight,0,t.RGBA,t.FLOAT,null)}else e.texImage2D(e.TEXTURE_2D,0,e.RGBA,this.simWidth,this.simHeight,0,e.RGBA,e.FLOAT,null);return n}createFramebuffer(e){const n=this.gl,t=V(n.createFramebuffer(),"WebGL framebuffer");if(n.bindFramebuffer(n.FRAMEBUFFER,t),n.framebufferTexture2D(n.FRAMEBUFFER,n.COLOR_ATTACHMENT0,n.TEXTURE_2D,e,0),n.checkFramebufferStatus(n.FRAMEBUFFER)!==n.FRAMEBUFFER_COMPLETE)throw new Error("WaterDistortion could not create a float simulation target.");return n.bindFramebuffer(n.FRAMEBUFFER,null),t}initializeBackgroundTexture(){const e=this.gl;e.bindTexture(e.TEXTURE_2D,this.backgroundTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,1,1,0,e.RGBA,e.UNSIGNED_BYTE,new Uint8Array([18,28,26,255]))}initializeCausticTexture(){const e=this.gl;e.bindTexture(e.TEXTURE_2D,this.causticTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR_MIPMAP_LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,C,C,0,e.RGBA,e.UNSIGNED_BYTE,rt()),e.generateMipmap(e.TEXTURE_2D)}uploadTextureIfNeeded(e){if(e.mode==="dom"||!this.textureImage||!this.textureNeedsUpload&&!it(this.textureImage))return;const n=this.gl;try{n.bindTexture(n.TEXTURE_2D,this.backgroundTexture),n.pixelStorei(n.UNPACK_FLIP_Y_WEBGL,1),n.texImage2D(n.TEXTURE_2D,0,n.RGBA,n.RGBA,n.UNSIGNED_BYTE,this.textureImage),n.pixelStorei(n.UNPACK_FLIP_Y_WEBGL,0),[this.textureWidth,this.textureHeight]=tt(this.textureImage),this.textureReady=!0,this.textureNeedsUpload=!1}catch{this.textureReady=!1,this.textureNeedsUpload=!1,this.textureWidth=0,this.textureHeight=0}}prepareQuad(e){const n=this.gl;n.bindBuffer(n.ARRAY_BUFFER,this.quadBuffer),n.enableVertexAttribArray(e.position),n.vertexAttribPointer(e.position,2,n.FLOAT,!1,0,0)}setSimulationUniforms(e,n,t){const i=this.gl,a=this.simulationProgram.program,s=Math.min(e.length,J),u=this.wakeAUniforms,c=this.wakeBUniforms,h=this.wakeShapeUniforms,x=Math.max(0,e.length-J);u.fill(0),c.fill(0),h.fill(0);for(let E=0;E<s;E+=1){const g=e[x+E],p=E*4;u[p]=g.ax,u[p+1]=g.ay,u[p+2]=g.radius,u[p+3]=g.wakeStrength,c[p]=g.bx,c[p+1]=g.by,c[p+2]=g.wakeLength,c[p+3]=g.velocity,h[p]=g.troughStrength,h[p+1]=g.ridgeStrength,h[p+2]=g.ridgeOffset}i.uniform1i(S(i,a,"u_state"),0),i.uniform2f(S(i,a,"u_texel"),1/this.simWidth,1/this.simHeight),i.uniform1f(S(i,a,"u_delta"),t),i.uniform1f(S(i,a,"u_damping"),n.damping),i.uniform1f(S(i,a,"u_stiffness"),n.waveSpeed),i.uniform1f(S(i,a,"u_aspect"),this.cssWidth/this.cssHeight),i.uniform1i(S(i,a,"u_wakeCount"),s),i.uniform4fv(S(i,a,"u_wakeA[0]"),u),i.uniform4fv(S(i,a,"u_wakeB[0]"),c),i.uniform4fv(S(i,a,"u_wakeShape[0]"),h)}setMaterialUniforms(e,n){const t=this.gl,i=this.materialProgram.program,[a,s]=et(e.textureFit,this.textureWidth,this.textureHeight,this.cssWidth,this.cssHeight);t.uniform1i(S(t,i,"u_state"),0),t.uniform1i(S(t,i,"u_background"),1),t.uniform1i(S(t,i,"u_causticMap"),2),t.uniform2f(S(t,i,"u_texel"),1/this.simWidth,1/this.simHeight),t.uniform2f(S(t,i,"u_backgroundScale"),a,s),t.uniform1f(S(t,i,"u_domMode"),e.mode==="dom"?1:0),t.uniform1f(S(t,i,"u_normalScale"),e.normalScale),t.uniform1f(S(t,i,"u_refractionStrength"),e.refractionStrength),t.uniform1f(S(t,i,"u_specularIntensity"),e.specularIntensity),t.uniform1f(S(t,i,"u_crestIntensity"),e.crestIntensity),t.uniform1f(S(t,i,"u_causticIntensity"),e.causticIntensity),t.uniform1f(S(t,i,"u_time"),n%1e3)}}function et(r,e,n,t,i){if(r==="fill"||!Number.isFinite(e)||!Number.isFinite(n)||!Number.isFinite(t)||!Number.isFinite(i)||e<=0||n<=0||t<=0||i<=0)return[1,1];if(r==="none")return[t/e,i/n];const a=e/n,s=t/i;return r==="cover"?a>s?[s/a,1]:[1,a/s]:a>s?[1,a/s]:[s/a,1]}function tt(r){const e=r,n=[[e.naturalWidth,e.naturalHeight],[e.videoWidth,e.videoHeight],[e.displayWidth,e.displayHeight],[e.width,e.height]];for(const[t,i]of n)if(typeof t=="number"&&typeof i=="number"&&Number.isFinite(t)&&Number.isFinite(i)&&t>0&&i>0)return[t,i];return[0,0]}function rt(){const r=new Uint8Array(C*C*4);for(let e=0;e<C;e+=1)for(let n=0;n<C;n+=1){const t=(n+.5)/C,i=(e+.5)/C,a=Math.round(ce(t,i,0)*255),s=Math.round(ce(t,i,11)*255),u=Math.round(ce(t,i,23)*255),c=Math.round(ce(t,i,37)*255),h=(e*C+n)*4;r[h]=a,r[h+1]=s,r[h+2]=u,r[h+3]=c}return r}function ce(r,e,n){const t=Math.sin(se*(e*2+n*.013))*.12+Math.sin(se*(r*3+e+n*.021))*.06,i=Math.cos(se*(r*2+n*.017))*.12+Math.sin(se*(e*3-r+n*.019))*.06,a=r*oe+t,s=e*oe+i,u=Math.floor(a),c=Math.floor(s);let h=Number.POSITIVE_INFINITY,x=Number.POSITIVE_INFINITY,E=0,g=0;for(let P=-1;P<=1;P+=1)for(let U=-1;U<=1;U+=1){const k=u+U,B=c+P,b=Fe(k,oe),I=Fe(B,oe),z=k+.16+me(b,I,n)*.68,W=B+.16+me(b,I,n+1)*.68,D=Math.hypot(a-z,s-W);D<h?(x=h,h=D,E=b,g=I):D<x&&(x=D)}const p=x-h,A=1-Le(.025,.13,p),w=1-Le(.08,.34,p),N=.74+me(E,g,n+2)*.26,H=A*A*.58+w*.34;return We(Math.pow(H*N,1.12))}function me(r,e,n){const t=Math.sin(r*127.1+e*311.7+n*74.7)*43758.5453123;return t-Math.floor(t)}function Fe(r,e){return(r%e+e)%e}function Le(r,e,n){const t=We((n-r)/(e-r));return t*t*(3-t*2)}function We(r){return Math.min(1,Math.max(0,r))}function nt(r){const e={alpha:!0,antialias:!1,depth:!1,stencil:!1,premultipliedAlpha:!1,preserveDrawingBuffer:!1},n=r.getContext("webgl2",e);if(n){if(!n.getExtension("EXT_color_buffer_float"))throw new Error("WaterDistortion requires float render targets.");return{gl:n,isWebGL2:!0,canLinearFloat:!!n.getExtension("OES_texture_float_linear")}}const t=r.getContext("webgl",e)||r.getContext("experimental-webgl",e);if(!t)throw new Error("WaterDistortion requires WebGL.");if(!t.getExtension("OES_texture_float")||!t.getExtension("WEBGL_color_buffer_float")&&!t.getExtension("EXT_color_buffer_float"))throw new Error("WaterDistortion requires float texture support.");return{gl:t,isWebGL2:!1,canLinearFloat:!!t.getExtension("OES_texture_float_linear")}}function ke(r,e,n){const t=Ue(r,r.VERTEX_SHADER,e),i=Ue(r,r.FRAGMENT_SHADER,n),a=V(r.createProgram(),"WebGL program");if(r.attachShader(a,t),r.attachShader(a,i),r.linkProgram(a),r.deleteShader(t),r.deleteShader(i),!r.getProgramParameter(a,r.LINK_STATUS)){const u=r.getProgramInfoLog(a)||"Unknown shader link error.";throw r.deleteProgram(a),new Error(u)}const s=r.getAttribLocation(a,"a_position");if(s<0)throw new Error("WaterDistortion could not bind its quad attribute.");return{program:a,position:s}}function Ue(r,e,n){const t=V(r.createShader(e),"WebGL shader");if(r.shaderSource(t,n),r.compileShader(t),!r.getShaderParameter(t,r.COMPILE_STATUS)){const i=r.getShaderInfoLog(t)||"Unknown shader compile error.";throw r.deleteShader(t),new Error(i)}return t}function S(r,e,n){const t=r.getUniformLocation(e,n);if(!t)throw new Error(`WaterDistortion could not bind uniform ${n}.`);return t}function V(r,e){if(!r)throw new Error(`WaterDistortion could not create ${e}.`);return r}function it(r){return typeof HTMLCanvasElement<"u"&&r instanceof HTMLCanvasElement||typeof HTMLVideoElement<"u"&&r instanceof HTMLVideoElement||typeof OffscreenCanvas<"u"&&r instanceof OffscreenCanvas}function at(r,e,n,t=$e){const i=Math.max(0,Math.floor(e)),a=Math.max(0,Math.floor(n));if(i===0||a===0)return!1;const s=(u,c)=>r[(c*i+u)*4]??0;for(let u=0;u<a;u+=1)for(let c=0;c<i;c+=1){const h=(u*i+c)*4,x=r[h]??0,E=r[h+1]??0;if(x<-t.trough||Math.abs(E)>t.velocity)return!0;const g=c>0?s(c-1,u):x,p=c<i-1?s(c+1,u):x,A=u>0?s(c,u-1):x,w=u<a-1?s(c,u+1):x,N=Math.hypot(p-g,w-A),H=Math.abs(g+p+A+w-x*4);if(N>t.gradient||H>t.curvature)return!0}return!1}const L={width:1,height:1,interactionRadius:25,wakeStrength:.54,troughStrength:.92,ridgeStrength:.46,ridgeOffset:10,wakeLength:84,velocityScale:1,velocityClamp:1.35,cursorSmoothing:.2,segmentSpacing:18},ot=24;function ge(r){return{width:Math.max(1,r.width??L.width),height:Math.max(1,r.height??L.height),interactionRadius:Math.max(1,r.interactionRadius??L.interactionRadius),wakeStrength:Math.max(0,r.wakeStrength??L.wakeStrength),troughStrength:Math.max(0,r.troughStrength??L.troughStrength),ridgeStrength:Math.max(0,r.ridgeStrength??L.ridgeStrength),ridgeOffset:Math.max(0,r.ridgeOffset??L.ridgeOffset),wakeLength:Math.max(1,r.wakeLength??L.wakeLength),velocityScale:Math.max(.01,r.velocityScale??L.velocityScale),velocityClamp:Math.max(.05,r.velocityClamp??L.velocityClamp),cursorSmoothing:d(r.cursorSmoothing??L.cursorSmoothing,0,.9),segmentSpacing:Math.max(1,r.segmentSpacing??L.segmentSpacing)}}function De(r,e,n=r.timeStamp){const t=typeof r.getCoalescedEvents=="function"?r.getCoalescedEvents():[],i=t.length>0?t:[r],a=n-r.timeStamp;return i.map(s=>({x:s.clientX-e.left,y:s.clientY-e.top,time:s.timeStamp+a}))}class st{constructor(e={}){f(this,"options");f(this,"previous");f(this,"smoothedVelocity",0);f(this,"disturbances",[]);this.options=ge(e)}configure(e){this.options=ge({...this.options,...e})}reset(){this.previous=void 0,this.smoothedVelocity=0,this.disturbances.length=0}addSample(e){this.disturbances.length=0;const n=this.clampSample(e),t=this.previous;if(!t)return this.previous=n,this.disturbances;n.time<=t.time&&(n.time=t.time+.01);const i=this.smoothSample(t,n),a=je(t,i);if(a<.35)return this.previous=i,this.disturbances;const s=a/Math.max(.01,i.time-t.time),u=d(1-this.options.cursorSmoothing,.12,1);this.smoothedVelocity=O(this.smoothedVelocity,s,u),this.previous=i;const c=Math.min(ot,Math.max(1,Math.ceil(a/this.options.segmentSpacing)));for(let h=0;h<c;h+=1){const x=h/c,E=(h+1)/c;this.disturbances.push(ve(Pe(t,i,x),Pe(t,i,E),this.smoothedVelocity,this.options))}return this.disturbances}clampSample(e){return{x:d(e.x,0,this.options.width),y:d(e.y,0,this.options.height),time:e.time}}smoothSample(e,n){const t=1-this.options.cursorSmoothing;return{x:O(e.x,n.x,t),y:O(e.y,n.y,t),time:n.time}}}function ve(r,e,n,t){const i=ge(t),a=d(n*i.velocityScale/i.velocityClamp,0,1),s=d(r.y/i.height,0,1),u=d(e.y/i.height,0,1),c=i.wakeLength*O(.55,1.35,a);return{ax:d(r.x/i.width,0,1),ay:1-s,bx:d(e.x/i.width,0,1),by:1-u,radius:i.interactionRadius/i.height,wakeStrength:i.wakeStrength*O(.18,1,a),troughStrength:i.troughStrength,ridgeStrength:i.ridgeStrength,ridgeOffset:i.ridgeOffset/i.height,wakeLength:c/i.height,velocity:a}}function Pe(r,e,n){return{x:O(r.x,e.x,n),y:O(r.y,e.y,n),time:O(r.time,e.time,n)}}function ct(r){const e=d(r,.85,.998),n=Math.ceil(Math.log(.012)/Math.log(e));return d(n*(1e3/60),900,5200)}const _={mode:"texture",textureFit:"fill",damping:.98,waveSpeed:.4,normalScale:20,refractionStrength:.7,specularIntensity:1,crestIntensity:.2,causticIntensity:0,simulationResolution:192,wakeStrength:.54,interactionRadius:25,troughStrength:.92,ridgeStrength:.46,ridgeOffset:10,wakeLength:84,velocityScale:1,velocityClamp:1.35,cursorSmoothing:.2,segmentSpacing:18,idleTimeout:900,interactionMode:"move",runInBackground:!1,pauseKey:void 0},G=1e3/60,ut=4,Be=360,Ce=24,lt=200;function ht(r){return r instanceof Element&&r.closest("a, button, input, select, textarea, [contenteditable]:not([contenteditable=false])")!==null}function dt(r){const e=r.strength===void 0?void 0:r.strength/48;return{mode:r.mode??_.mode,texture:r.texture,textureFit:r.textureFit??_.textureFit,damping:d(r.damping??r.dissipation??_.damping,.85,.998),waveSpeed:d(r.waveSpeed??_.waveSpeed,.05,1),normalScale:d(r.normalScale??_.normalScale,1,80),refractionStrength:d(r.refractionStrength??_.refractionStrength,0,2.5),specularIntensity:d(r.specularIntensity??_.specularIntensity,0,3),crestIntensity:d(r.crestIntensity??_.crestIntensity,0,3),causticIntensity:d(r.causticIntensity??_.causticIntensity,0,3),simulationResolution:d(Math.round(r.simulationResolution??_.simulationResolution),64,384),wakeStrength:d(r.wakeStrength??r.rippleStrength??e??_.wakeStrength,0,3),interactionRadius:d(r.interactionRadius??_.interactionRadius,2,80),troughStrength:d(r.troughStrength??_.troughStrength,0,3),ridgeStrength:d(r.ridgeStrength??_.ridgeStrength,0,3),ridgeOffset:d(r.ridgeOffset??_.ridgeOffset,0,80),wakeLength:d(r.wakeLength??_.wakeLength,1,240),velocityScale:d(r.velocityScale??_.velocityScale,.01,4),velocityClamp:d(r.velocityClamp??_.velocityClamp,.05,8),cursorSmoothing:d(r.cursorSmoothing??_.cursorSmoothing,0,.9),segmentSpacing:d(r.segmentSpacing??_.segmentSpacing,1,96),idleTimeout:Math.max(120,r.idleTimeout??_.idleTimeout),interactionMode:r.interactionMode??_.interactionMode,runInBackground:r.runInBackground??_.runInBackground,pauseKey:r.pauseKey||_.pauseKey}}function Ne(r,e,n){const t=d(r.x,0,1)*n.width,i=d(r.y,0,1)*n.height,a=Math.max(.5,e.interactionRadius*.08),s=e.velocityClamp/e.velocityScale,u={...e,width:n.width,height:n.height,wakeLength:e.interactionRadius*1.5};return[ve({x:t-a,y:i},{x:t+a,y:i},s,u),ve({x:t,y:i-a},{x:t,y:i+a},s,u)]}function ft(r){const[e,n]=m.useState(!1);return m.useEffect(()=>{if(!r||typeof window>"u"||!window.matchMedia){n(!1);return}const t=window.matchMedia("(prefers-reduced-motion: reduce)");n(t.matches);const i=a=>{n(a.matches)};return t.addEventListener("change",i),()=>{t.removeEventListener("change",i)}},[r]),e}const Xe=m.forwardRef(function(e,n){const{underlay:t,children:i,foreground:a,className:s,style:u,reducedMotion:c="respect"}=e,h=m.useRef(null),x=m.useRef(null),E=m.useRef(null),g=m.useRef(new st),p=m.useRef(null),A=m.useRef(null),w=m.useRef(()=>{}),N=m.useRef(()=>{}),H=m.useRef(()=>{}),P=m.useRef([]),U=m.useRef(!0),k=m.useRef(!0),B=m.useRef(!1),b=m.useRef(!1),I=m.useRef(null),z=m.useRef(0),W=m.useRef(0),D=m.useRef(0),R=dt(e),v=m.useRef(R),j=m.useRef({width:1,height:1}),Ge=ft(c==="respect"),ue=c==="disable"||c==="respect"&&Ge,Oe=a??i;v.current=R,m.useImperativeHandle(n,()=>({triggerRipple(T){B.current||b.current||H.current(Ne(T,v.current,j.current))}}),[]),m.useEffect(()=>{var T;B.current=ue,ue&&(g.current.reset(),I.current=null,P.current=[],z.current=0,W.current=0,D.current=0,(T=E.current)==null||T.clear()),w.current()},[ue]),m.useEffect(()=>{const T=E.current;if(!T)return;const{width:K,height:M}=j.current;T.resize(K,M,window.devicePixelRatio,R.simulationResolution),T.setTextureSource(R.texture),w.current()},[R.mode,R.texture,R.textureFit,R.damping,R.waveSpeed,R.normalScale,R.refractionStrength,R.specularIntensity,R.crestIntensity,R.causticIntensity,R.simulationResolution]),m.useEffect(()=>{const T=h.current,K=x.current;if(!T||!K)return;k.current=typeof document.hasFocus=="function"?document.hasFocus():!0;let M=null,ie,ee=G,xe=!1,te;const Y=()=>{p.current!==null&&(window.cancelAnimationFrame(p.current),p.current=null),A.current!==null&&(window.clearTimeout(A.current),A.current=null)},ze=(o,l)=>{g.current.configure({width:o,height:l,interactionRadius:v.current.interactionRadius,wakeStrength:v.current.wakeStrength,troughStrength:v.current.troughStrength,ridgeStrength:v.current.ridgeStrength,ridgeOffset:v.current.ridgeOffset,wakeLength:v.current.wakeLength,velocityScale:v.current.velocityScale,velocityClamp:v.current.velocityClamp,cursorSmoothing:v.current.cursorSmoothing,segmentSpacing:v.current.segmentSpacing})},Ke=(o,l)=>{const F=Math.max(1,o),y=Math.max(1,l);j.current={width:F,height:y},ze(F,y),M==null||M.resize(F,y,window.devicePixelRatio,v.current.simulationResolution)},Ee=()=>{M==null||M.render(v.current,performance.now()*.001)},X=()=>{ie=void 0,ee=G},re=()=>{Y(),g.current.reset(),I.current=null,X(),te===void 0&&(te=performance.now())},$=()=>{const o=v.current;let l=!1;if(!(!B.current&&!b.current&&U.current&&(o.runInBackground||!document.hidden&&k.current))){X();return}if(te!==void 0){const y=performance.now()-te;z.current+=y,W.current+=y,D.current+=y,te=void 0,l=!0}(!o.runInBackground||l)&&X(),Ee(),w.current()},pe=o=>{p.current=null;const l=v.current;if(!M||b.current||!U.current||!l.runInBackground&&(document.hidden||!k.current)){X();return}if(B.current){P.current=[],M.render(l,o*.001),X();return}const F=l.runInBackground?Be:ut,y=ie===void 0?G:d(o-ie,0,l.runInBackground?G*Be:64);ie=o,ee=Math.min(ee+y,G*F);let Z=P.current.splice(0),Ae=0;for(;ee>=G&&Ae<F;)M.step(Z,l,1),Z=[],ee-=G,Ae+=1;if(M.render(l,o*.001),P.current.length>0){w.current();return}if(o<z.current){w.current();return}if(xe){o<W.current?w.current():X();return}if(o<D.current){w.current();return}try{M.hasVisibleActivity()?(D.current=o+lt,w.current()):X()}catch{xe=!0,o<W.current?w.current():X()}},le=()=>{b.current||p.current!==null||A.current!==null||(v.current.runInBackground&&document.hidden?A.current=window.setTimeout(()=>{A.current=null,pe(performance.now())},G):p.current=window.requestAnimationFrame(pe))};w.current=le;try{M=new Je(K,()=>{w.current()}),E.current=M,M.setTextureSource(v.current.texture)}catch{return K.style.display="none",E.current=null,w.current=()=>{},()=>{}}const he=()=>{const o=K.getBoundingClientRect();return Ke(o.width,o.height),o},_e=()=>{he(),Ee()},de=o=>{if(b.current||o.length===0)return;const l=P.current;for(const Z of o)l.push(Z);l.length>Ce&&l.splice(0,l.length-Ce);const y=performance.now()+v.current.idleTimeout;z.current=Math.max(z.current,y),W.current=Math.max(W.current,y+ct(v.current.damping)),D.current=0,le()};H.current=de;const Se=o=>{const l=v.current;if(B.current||b.current||!U.current||l.interactionMode==="event"||!l.runInBackground&&(document.hidden||!k.current)||o.pointerType==="touch"&&!o.isPrimary)return;g.current.reset();const F=he(),[y]=De(o,F,performance.now());y&&((l.interactionMode==="click"||l.interactionMode==="both"||l.interactionMode==="drag")&&de(Ne({x:y.x/j.current.width,y:y.y/j.current.height},l,j.current)),l.interactionMode==="drag"?(I.current=o.pointerId,g.current.addSample(y)):(l.interactionMode==="move"||l.interactionMode==="both")&&g.current.addSample(y))},Te=o=>{const l=v.current;if(B.current||b.current||!U.current||l.interactionMode!=="move"&&l.interactionMode!=="both"&&(l.interactionMode!=="drag"||I.current!==o.pointerId)||!l.runInBackground&&(document.hidden||!k.current)||o.pointerType==="touch"&&!o.isPrimary)return;const F=he(),y=De(o,F,performance.now());for(const Z of y)de(g.current.addSample(Z))},Q=o=>{I.current!==null&&I.current!==o.pointerId||(I.current=null,g.current.reset())},Re=o=>{const l=v.current.pauseKey;!l||o.code!==l||o.repeat||o.altKey||o.ctrlKey||o.metaKey||ht(o.target)||(o.preventDefault(),b.current=!b.current,b.current?re():(Y(),$()))},ye=()=>{Y(),document.hidden&&!v.current.runInBackground?re():$()},we=()=>{k.current=!1,v.current.runInBackground?(Y(),$()):re()},be=()=>{k.current=!0,Y(),$()},Ye=()=>{Y(),!v.current.runInBackground&&(document.hidden||!k.current)?re():$()};N.current=Ye,_e();const Me=new ResizeObserver(()=>{_e(),le()});Me.observe(K);let ne;return"IntersectionObserver"in window&&(ne=new IntersectionObserver(o=>{const l=o[0];U.current=l?l.isIntersecting:!0,U.current?$():re()}),ne.observe(T)),T.addEventListener("pointerdown",Se,{passive:!0}),T.addEventListener("pointermove",Te,{passive:!0}),T.addEventListener("pointerup",Q,{passive:!0}),T.addEventListener("pointerleave",Q,{passive:!0}),T.addEventListener("pointercancel",Q,{passive:!0}),window.addEventListener("blur",we),window.addEventListener("focus",be),document.addEventListener("keydown",Re),document.addEventListener("visibilitychange",ye),()=>{var o;Y(),Me.disconnect(),ne==null||ne.disconnect(),T.removeEventListener("pointerdown",Se),T.removeEventListener("pointermove",Te),T.removeEventListener("pointerup",Q),T.removeEventListener("pointerleave",Q),T.removeEventListener("pointercancel",Q),window.removeEventListener("blur",we),window.removeEventListener("focus",be),document.removeEventListener("keydown",Re),document.removeEventListener("visibilitychange",ye),(o=E.current)==null||o.dispose(),E.current=null,w.current=()=>{},N.current=()=>{},H.current=()=>{}}},[]),m.useEffect(()=>{g.current.reset(),I.current=null},[R.interactionMode]),m.useEffect(()=>{N.current()},[R.runInBackground]),m.useEffect(()=>{!R.pauseKey&&b.current&&(b.current=!1,N.current())},[R.pauseKey]);const He={...u,position:"relative",overflow:"hidden",isolation:"isolate"};return ae.jsxs("div",{ref:h,className:s,style:He,children:[t?ae.jsx("div",{style:{position:"absolute",inset:0,zIndex:0,pointerEvents:"none",transform:"translateZ(0)"},children:t}):null,ae.jsx("canvas",{ref:x,"aria-hidden":"true",style:{position:"absolute",inset:0,zIndex:1,width:"100%",height:"100%",pointerEvents:"none",mixBlendMode:R.mode==="dom"?"screen":"normal"}}),ae.jsx("div",{style:{position:"relative",zIndex:2},children:Oe})]})}),mt=Xe;exports.WaterDistortion=Xe;exports.WaterLayer=mt;
 //# sourceMappingURL=water-distortion.cjs.map