@react-three/drei 9.76.1 → 9.77.1

package/README.md

@@ -733,8 +733,8 @@ useFrame((_, delta) => {
     //
 
     const eps = 1e-9
-    easing.damp3(current.position, target.position, .25, delta, undefined, undefined, eps)
-    easing.dampE(current.rotation, target.rotation, .25, delta, undefined, undefined, eps)
+    easing.damp3(current.position, target.position, 0.25, delta, undefined, undefined, eps)
+    easing.dampE(current.rotation, target.rotation, 0.25, delta, undefined, undefined, eps)
     camera.position.copy(current.position)
     camera.rotation.copy(current.rotation)
 
@@ -1354,6 +1354,26 @@ A declarative THREE.Texture which attaches to "map" by default. You can use this
 </mesh>
 ```
 
+Radial gradient.
+
+```jsx
+import { GradientTexture, GradientType } from './GradientTexture'
+;<mesh>
+  <planeGeometry />
+  <meshBasicMaterial>
+    <GradientTexture
+      stops={[0, 0.5, 1]} // As many stops as you want
+      colors={['aquamarine', 'hotpink', 'yellow']} // Colors need to match the number of stops
+      size={1024} // Size (height) is optional, default = 1024
+      width={1024} // Width of the canvas producing the texture, default = 16
+      type={GradientType.Radial} // The type of the gradient, default = GradientType.Linear
+      innerCircleRadius={0} // Optional, the radius of the inner circle of the gradient, default = 0
+      outerCircleRadius={'auto'} // Optional, the radius of the outer circle of the gradient, default = auto
+    />
+  </meshBasicMaterial>
+</mesh>
+```
+
 #### Edges
 
 <p>

package/core/GradientTexture.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=r(e),c=n(t);exports.GradientTexture=function({stops:e,colors:t,size:r=1024,...n}){const o=c.useMemo((()=>{const n=document.createElement("canvas"),a=n.getContext("2d");n.width=16,n.height=r;const c=a.createLinearGradient(0,0,0,r);let o=e.length;for(;o--;)c.addColorStop(e[o],t[o]);return a.fillStyle=c,a.fillRect(0,0,16,r),n}),[e]);return c.createElement("canvasTexture",a.default({args:[o],attach:"map"},n))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("@react-three/fiber");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var i=a(e),u=n(t);let o=function(e){return e.Linear="linear",e.Radial="radial",e}({});exports.GradientTexture=function({stops:e,colors:t,size:a=1024,width:n=16,type:c=o.Linear,innerCircleRadius:l=0,outerCircleRadius:s="auto",...d}){const f=r.useThree((e=>e.gl)),p=u.useMemo((()=>{const r=document.createElement("canvas"),i=r.getContext("2d");let u;if(r.width=n,r.height=a,c===o.Linear)u=i.createLinearGradient(0,0,0,a);else{const e=r.width/2,t=r.height/2,a="auto"!==s?Math.abs(Number(s)):Math.sqrt(e**2+t**2);u=i.createRadialGradient(e,t,Math.abs(l),e,t,a)}let d=e.length;for(;d--;)u.addColorStop(e[d],t[d]);return i.save(),i.fillStyle=u,i.fillRect(0,0,n,a),i.restore(),r}),[e]);return u.createElement("canvasTexture",i.default({colorSpace:f.outputColorSpace,args:[p],attach:"map"},d))},exports.GradientType=o;

package/core/GradientTexture.d.ts

@@ -1,9 +1,17 @@
 /// <reference types="react" />
+export declare enum GradientType {
+    Linear = "linear",
+    Radial = "radial"
+}
 declare type Props = {
     stops: Array<number>;
     colors: Array<string>;
     attach?: string;
     size?: number;
+    width?: number;
+    type?: GradientType;
+    innerCircleRadius?: number;
+    outerCircleRadius?: string | number;
 } & JSX.IntrinsicElements['texture'];
-export declare function GradientTexture({ stops, colors, size, ...props }: Props): JSX.Element;
+export declare function GradientTexture({ stops, colors, size, width, type, innerCircleRadius, outerCircleRadius, ...props }: Props): JSX.Element;
 export {};

package/core/GradientTexture.js

@@ -1,33 +1,58 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
+import { useThree } from '@react-three/fiber';
 
+let GradientType = /*#__PURE__*/function (GradientType) {
+  GradientType["Linear"] = "linear";
+  GradientType["Radial"] = "radial";
+  return GradientType;
+}({});
 function GradientTexture({
   stops,
   colors,
   size = 1024,
+  width = 16,
+  //@ts-ignore - weird error about type never, although the type is clearly defined
+  type = GradientType.Linear,
+  innerCircleRadius = 0,
+  outerCircleRadius = 'auto',
   ...props
 }) {
+  const gl = useThree(state => state.gl);
   const canvas = React.useMemo(() => {
     const canvas = document.createElement('canvas');
     const context = canvas.getContext('2d');
-    canvas.width = 16;
+    canvas.width = width;
     canvas.height = size;
-    const gradient = context.createLinearGradient(0, 0, 0, size);
+    let gradient;
+
+    if (type === GradientType.Linear) {
+      gradient = context.createLinearGradient(0, 0, 0, size);
+    } else {
+      const canvasCenterX = canvas.width / 2;
+      const canvasCenterY = canvas.height / 2;
+      const radius = outerCircleRadius !== 'auto' ? Math.abs(Number(outerCircleRadius)) : Math.sqrt(canvasCenterX ** 2 + canvasCenterY ** 2);
+      gradient = context.createRadialGradient(canvasCenterX, canvasCenterY, Math.abs(innerCircleRadius), canvasCenterX, canvasCenterY, radius);
+    }
+
     let i = stops.length;
 
     while (i--) {
       gradient.addColorStop(stops[i], colors[i]);
     }
 
+    context.save();
     context.fillStyle = gradient;
-    context.fillRect(0, 0, 16, size);
+    context.fillRect(0, 0, width, size);
+    context.restore();
     return canvas;
   }, [stops]); // @ts-ignore ????
 
   return /*#__PURE__*/React.createElement("canvasTexture", _extends({
+    colorSpace: gl.outputColorSpace,
     args: [canvas],
     attach: "map"
   }, props));
 }
 
-export { GradientTexture };
+export { GradientTexture, GradientType };

package/core/Grid.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("react"),i=require("three"),o=require("@react-three/fiber"),r=require("./shaderMaterial.cjs.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(i){if("default"!==i){var o=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(n,i,o.get?o:{enumerable:!0,get:function(){return e[i]}})}})),n.default=e,Object.freeze(n)}var a=t(e),c=l(n),s=l(i);const f=r.shaderMaterial({cellSize:.5,sectionSize:1,fadeDistance:100,fadeStrength:1,cellThickness:.5,sectionThickness:1,cellColor:new s.Color,sectionColor:new s.Color,infiniteGrid:!1,followCamera:!1},"\n    varying vec3 worldPosition;\n    uniform float fadeDistance;\n    uniform bool infiniteGrid;\n    uniform bool followCamera;\n\n    void main() {\n      worldPosition = position.xzy;\n      if (infiniteGrid) worldPosition *= 1.0 + fadeDistance;\n      if (followCamera) worldPosition.xz +=cameraPosition.xz;\n\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(worldPosition, 1.0);\n    }\n  ","\n    varying vec3 worldPosition;\n    uniform float cellSize;\n    uniform float sectionSize;\n    uniform vec3 cellColor;\n    uniform vec3 sectionColor;\n    uniform float fadeDistance;\n    uniform float fadeStrength;\n    uniform float cellThickness;\n    uniform float sectionThickness;\n\n    float getGrid(float size, float thickness) {\n      vec2 r = worldPosition.xz / size;\n      vec2 grid = abs(fract(r - 0.5) - 0.5) / fwidth(r);\n      float line = min(grid.x, grid.y) + 1. - thickness;\n      return 1.0 - min(line, 1.);\n    }\n\n    void main() {\n      float g1 = getGrid(cellSize, cellThickness);\n      float g2 = getGrid(sectionSize, sectionThickness);\n\n      float d = 1.0 - min(distance(cameraPosition.xz, worldPosition.xz) / fadeDistance, 1.);\n      vec3 color = mix(cellColor, sectionColor, min(1.,sectionThickness * g2));\n\n      gl_FragColor = vec4(color, (g1 + g2) * pow(d,fadeStrength));\n      gl_FragColor.a = mix(0.75 * gl_FragColor.a, gl_FragColor.a, g2);\n      if (gl_FragColor.a <= 0.0) discard;\n\n      #include <tonemapping_fragment>\n      #include <encodings_fragment>\n    }\n  "),d=c.forwardRef((({args:e,cellColor:n="#000000",sectionColor:i="#2080ff",cellSize:r=.5,sectionSize:t=1,followCamera:l=!1,infiniteGrid:d=!1,fadeDistance:u=100,fadeStrength:g=1,cellThickness:m=.5,sectionThickness:h=1,side:C=s.BackSide,...v},w)=>{o.extend({GridMaterial:f});const z={cellSize:r,sectionSize:t,cellColor:n,sectionColor:i,cellThickness:m,sectionThickness:h},x={fadeDistance:u,fadeStrength:g,infiniteGrid:d,followCamera:l};return c.createElement("mesh",a.default({ref:w,frustumCulled:!1},v),c.createElement("gridMaterial",a.default({transparent:!0,"extensions-derivatives":!0,side:C},z,x)),c.createElement("planeGeometry",{args:e}))}));exports.Grid=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("react"),o=require("three"),i=require("react-merge-refs"),r=require("@react-three/fiber"),t=require("./shaderMaterial.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(o){if("default"!==o){var i=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(n,o,i.get?i:{enumerable:!0,get:function(){return e[o]}})}})),n.default=e,Object.freeze(n)}var s=l(e),c=a(n),f=a(o),d=l(i);const u=t.shaderMaterial({cellSize:.5,sectionSize:1,fadeDistance:100,fadeStrength:1,cellThickness:.5,sectionThickness:1,cellColor:new f.Color,sectionColor:new f.Color,infiniteGrid:!1,followCamera:!1,worldCamProjPosition:new f.Vector3,worldPlanePosition:new f.Vector3},"\n    varying vec3 localPosition;\n    varying vec4 worldPosition;\n\n    uniform vec3 worldCamProjPosition;\n    uniform vec3 worldPlanePosition;\n    uniform float fadeDistance;\n    uniform bool infiniteGrid;\n    uniform bool followCamera;\n\n    void main() {\n      localPosition = position.xzy;\n      if (infiniteGrid) localPosition *= 1.0 + fadeDistance;\n      \n      worldPosition = modelMatrix * vec4(localPosition, 1.0);\n      if (followCamera) {\n        worldPosition.xyz += (worldCamProjPosition - worldPlanePosition);\n        localPosition = (inverse(modelMatrix) * worldPosition).xyz;\n      }\n\n      gl_Position = projectionMatrix * viewMatrix * worldPosition;\n    }\n  ","\n    varying vec3 localPosition;\n    varying vec4 worldPosition;\n\n    uniform vec3 worldCamProjPosition;\n    uniform float cellSize;\n    uniform float sectionSize;\n    uniform vec3 cellColor;\n    uniform vec3 sectionColor;\n    uniform float fadeDistance;\n    uniform float fadeStrength;\n    uniform float cellThickness;\n    uniform float sectionThickness;\n\n    float getGrid(float size, float thickness) {\n      vec2 r = localPosition.xz / size;\n      vec2 grid = abs(fract(r - 0.5) - 0.5) / fwidth(r);\n      float line = min(grid.x, grid.y) + 1.0 - thickness;\n      return 1.0 - min(line, 1.0);\n    }\n\n    void main() {\n      float g1 = getGrid(cellSize, cellThickness);\n      float g2 = getGrid(sectionSize, sectionThickness);\n\n      float dist = distance(worldCamProjPosition, worldPosition.xyz);\n      float d = 1.0 - min(dist / fadeDistance, 1.0);\n      vec3 color = mix(cellColor, sectionColor, min(1.0, sectionThickness * g2));\n\n      gl_FragColor = vec4(color, (g1 + g2) * pow(d, fadeStrength));\n      gl_FragColor.a = mix(0.75 * gl_FragColor.a, gl_FragColor.a, g2);\n      if (gl_FragColor.a <= 0.0) discard;\n\n      #include <tonemapping_fragment>\n      #include <encodings_fragment>\n    }\n  "),m=c.forwardRef((({args:e,cellColor:n="#000000",sectionColor:o="#2080ff",cellSize:i=.5,sectionSize:t=1,followCamera:l=!1,infiniteGrid:a=!1,fadeDistance:m=100,fadeStrength:g=1,cellThickness:P=.5,sectionThickness:w=1,side:v=f.BackSide,...C},h)=>{r.extend({GridMaterial:u});const p=c.useRef(null);r.useFrame((e=>{const n=(new f.Plane).setFromNormalAndCoplanarPoint(new f.Vector3(0,1,0),new f.Vector3(0,0,0)).applyMatrix4(p.current.matrixWorld),o=p.current.material,i=o.uniforms.worldCamProjPosition,r=o.uniforms.worldPlanePosition;n.projectPoint(e.camera.position,i.value),r.value.set(0,0,0).applyMatrix4(p.current.matrixWorld)}));const x={cellSize:i,sectionSize:t,cellColor:n,sectionColor:o,cellThickness:P,sectionThickness:w},z={fadeDistance:m,fadeStrength:g,infiniteGrid:a,followCamera:l};return c.createElement("mesh",s.default({ref:d.default([p,h]),frustumCulled:!1},C),c.createElement("gridMaterial",s.default({transparent:!0,"extensions-derivatives":!0,side:v},x,z)),c.createElement("planeGeometry",{args:e}))}));exports.Grid=m;

package/core/Grid.js

@@ -1,7 +1,8 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
-import { extend } from '@react-three/fiber';
+import mergeRefs from 'react-merge-refs';
+import { extend, useFrame } from '@react-three/fiber';
 import { shaderMaterial } from './shaderMaterial.js';
 
 const GridMaterial = shaderMaterial({
@@ -14,26 +15,40 @@ const GridMaterial = shaderMaterial({
   cellColor: new THREE.Color(),
   sectionColor: new THREE.Color(),
   infiniteGrid: false,
-  followCamera: false
+  followCamera: false,
+  worldCamProjPosition: new THREE.Vector3(),
+  worldPlanePosition: new THREE.Vector3()
 },
 /* glsl */
 `
-    varying vec3 worldPosition;
+    varying vec3 localPosition;
+    varying vec4 worldPosition;
+
+    uniform vec3 worldCamProjPosition;
+    uniform vec3 worldPlanePosition;
     uniform float fadeDistance;
     uniform bool infiniteGrid;
     uniform bool followCamera;
 
     void main() {
-      worldPosition = position.xzy;
-      if (infiniteGrid) worldPosition *= 1.0 + fadeDistance;
-      if (followCamera) worldPosition.xz +=cameraPosition.xz;
+      localPosition = position.xzy;
+      if (infiniteGrid) localPosition *= 1.0 + fadeDistance;
+      
+      worldPosition = modelMatrix * vec4(localPosition, 1.0);
+      if (followCamera) {
+        worldPosition.xyz += (worldCamProjPosition - worldPlanePosition);
+        localPosition = (inverse(modelMatrix) * worldPosition).xyz;
+      }
 
-      gl_Position = projectionMatrix * modelViewMatrix * vec4(worldPosition, 1.0);
+      gl_Position = projectionMatrix * viewMatrix * worldPosition;
     }
   `,
 /* glsl */
 `
-    varying vec3 worldPosition;
+    varying vec3 localPosition;
+    varying vec4 worldPosition;
+
+    uniform vec3 worldCamProjPosition;
     uniform float cellSize;
     uniform float sectionSize;
     uniform vec3 cellColor;
@@ -44,20 +59,21 @@ const GridMaterial = shaderMaterial({
     uniform float sectionThickness;
 
     float getGrid(float size, float thickness) {
-      vec2 r = worldPosition.xz / size;
+      vec2 r = localPosition.xz / size;
       vec2 grid = abs(fract(r - 0.5) - 0.5) / fwidth(r);
-      float line = min(grid.x, grid.y) + 1. - thickness;
-      return 1.0 - min(line, 1.);
+      float line = min(grid.x, grid.y) + 1.0 - thickness;
+      return 1.0 - min(line, 1.0);
     }
 
     void main() {
       float g1 = getGrid(cellSize, cellThickness);
       float g2 = getGrid(sectionSize, sectionThickness);
 
-      float d = 1.0 - min(distance(cameraPosition.xz, worldPosition.xz) / fadeDistance, 1.);
-      vec3 color = mix(cellColor, sectionColor, min(1.,sectionThickness * g2));
+      float dist = distance(worldCamProjPosition, worldPosition.xyz);
+      float d = 1.0 - min(dist / fadeDistance, 1.0);
+      vec3 color = mix(cellColor, sectionColor, min(1.0, sectionThickness * g2));
 
-      gl_FragColor = vec4(color, (g1 + g2) * pow(d,fadeStrength));
+      gl_FragColor = vec4(color, (g1 + g2) * pow(d, fadeStrength));
       gl_FragColor.a = mix(0.75 * gl_FragColor.a, gl_FragColor.a, g2);
       if (gl_FragColor.a <= 0.0) discard;
 
@@ -83,6 +99,15 @@ const Grid = /*#__PURE__*/React.forwardRef(({
   extend({
     GridMaterial
   });
+  const ref = React.useRef(null);
+  useFrame(state => {
+    const plane = new THREE.Plane().setFromNormalAndCoplanarPoint(new THREE.Vector3(0, 1, 0), new THREE.Vector3(0, 0, 0)).applyMatrix4(ref.current.matrixWorld);
+    const gridMaterial = ref.current.material;
+    const worldCamProjPosition = gridMaterial.uniforms.worldCamProjPosition;
+    const worldPlanePosition = gridMaterial.uniforms.worldPlanePosition;
+    plane.projectPoint(state.camera.position, worldCamProjPosition.value);
+    worldPlanePosition.value.set(0, 0, 0).applyMatrix4(ref.current.matrixWorld);
+  });
   const uniforms1 = {
     cellSize,
     sectionSize,
@@ -98,7 +123,7 @@ const Grid = /*#__PURE__*/React.forwardRef(({
     followCamera
   };
   return /*#__PURE__*/React.createElement("mesh", _extends({
-    ref: fRef,
+    ref: mergeRefs([ref, fRef]),
     frustumCulled: false
   }, props), /*#__PURE__*/React.createElement("gridMaterial", _extends({
     transparent: true,

package/core/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./ScreenSpace.cjs.js"),s=require("./QuadraticBezierLine.cjs.js"),t=require("./CubicBezierLine.cjs.js"),o=require("./CatmullRomLine.cjs.js"),i=require("./Line.cjs.js"),a=require("./PositionalAudio.cjs.js"),u=require("./Text.cjs.js"),c=require("./Text3D.cjs.js"),n=require("./Effects.cjs.js"),j=require("./GradientTexture.cjs.js"),p=require("./Image.cjs.js"),x=require("./Edges.cjs.js"),l=require("./Trail.cjs.js"),m=require("./Sampler.cjs.js"),q=require("./ComputedAttribute.cjs.js"),d=require("./Clone.cjs.js"),h=require("./MarchingCubes.cjs.js"),C=require("./Decal.cjs.js"),M=require("./Svg.cjs.js"),S=require("./Gltf.cjs.js"),f=require("./AsciiRenderer.cjs.js"),T=require("./OrthographicCamera.cjs.js"),P=require("./PerspectiveCamera.cjs.js"),b=require("./CubeCamera.cjs.js"),B=require("./DeviceOrientationControls.cjs.js"),g=require("./FlyControls.cjs.js"),v=require("./MapControls.cjs.js"),F=require("./OrbitControls.cjs.js"),L=require("./TrackballControls.cjs.js"),A=require("./ArcballControls.cjs.js"),k=require("./TransformControls.cjs.js"),D=require("./PointerLockControls.cjs.js"),E=require("./FirstPersonControls.cjs.js"),R=require("./CameraControls.cjs.js"),G=require("./FaceControls.cjs.js"),w=require("./GizmoHelper.cjs.js"),z=require("./GizmoViewcube.cjs.js"),O=require("./GizmoViewport.cjs.js"),I=require("./Grid.cjs.js"),y=require("./useCubeTexture.cjs.js"),H=require("./useFBX.cjs.js"),V=require("./useGLTF.cjs.js"),W=require("./useKTX2.cjs.js"),Q=require("./useProgress.cjs.js"),X=require("./useTexture.cjs.js"),K=require("./useVideoTexture.cjs.js"),N=require("./useFont.cjs.js"),U=require("./Stats.cjs.js"),_=require("./useDepthBuffer.cjs.js"),J=require("./useAspect.cjs.js"),Y=require("./useCamera.cjs.js"),Z=require("./useDetectGPU.cjs.js"),$=require("./useHelper.cjs.js"),ee=require("./useBVH.cjs.js"),re=require("./useContextBridge.cjs.js"),se=require("./useAnimations.cjs.js"),te=require("./useFBO.cjs.js"),oe=require("./useIntersect.cjs.js"),ie=require("./useBoxProjectedEnv.cjs.js"),ae=require("./BBAnchor.cjs.js"),ue=require("./useTrailTexture.cjs.js"),ce=require("./useCubeCamera.cjs.js"),ne=require("./Example.cjs.js"),je=require("./SpriteAnimator.cjs.js"),pe=require("./FaceLandmarker.cjs.js"),xe=require("./CurveModifier.cjs.js"),le=require("./MeshDistortMaterial.cjs.js"),me=require("./MeshWobbleMaterial.cjs.js"),qe=require("./MeshReflectorMaterial.cjs.js"),de=require("./MeshRefractionMaterial.cjs.js"),he=require("./MeshTransmissionMaterial.cjs.js"),Ce=require("./MeshDiscardMaterial.cjs.js"),Me=require("./PointMaterial.cjs.js"),Se=require("./shaderMaterial.cjs.js"),fe=require("./softShadows.cjs.js"),Te=require("./shapes.cjs.js"),Pe=require("./Facemesh.cjs.js"),be=require("./RoundedBox.cjs.js"),Be=require("./ScreenQuad.cjs.js"),ge=require("./Center.cjs.js"),ve=require("./Resize.cjs.js"),Fe=require("./Bounds.cjs.js"),Le=require("./CameraShake.cjs.js"),Ae=require("./Float.cjs.js"),ke=require("./Stage.cjs.js"),De=require("./Backdrop.cjs.js"),Ee=require("./Shadow.cjs.js"),Re=require("./Caustics.cjs.js"),Ge=require("./ContactShadows.cjs.js"),we=require("./AccumulativeShadows.cjs.js"),ze=require("./Reflector.cjs.js"),Oe=require("./SpotLight.cjs.js"),Ie=require("./Environment.cjs.js"),ye=require("./Lightformer.cjs.js"),He=require("./Sky.cjs.js"),Ve=require("./Stars.cjs.js"),We=require("./Cloud.cjs.js"),Qe=require("./Sparkles.cjs.js"),Xe=require("./useEnvironment.cjs.js"),Ke=require("./useMatcapTexture.cjs.js"),Ne=require("./useNormalTexture.cjs.js"),Ue=require("./Wireframe.cjs.js"),_e=require("./Points.cjs.js"),Je=require("./Instances.cjs.js"),Ye=require("./Segments.cjs.js"),Ze=require("./Detailed.cjs.js"),$e=require("./Preload.cjs.js"),er=require("./BakeShadows.cjs.js"),rr=require("./meshBounds.cjs.js"),sr=require("./AdaptiveDpr.cjs.js"),tr=require("./AdaptiveEvents.cjs.js"),or=require("./PerformanceMonitor.cjs.js"),ir=require("./RenderTexture.cjs.js"),ar=require("./Mask.cjs.js"),ur=require("./Hud.cjs.js"),cr=require("./MeshPortalMaterial.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("@react-three/fiber"),require("react-merge-refs"),require("three"),require("three-stdlib"),require("troika-three-text"),require("suspend-react"),require("meshline"),require("lodash.pick"),require("lodash.omit"),require("camera-controls"),require("maath"),require("@mediapipe/tasks-vision"),require("zustand"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("detect-gpu"),require("three-mesh-bvh"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../materials/MeshRefractionMaterial.cjs.js"),require("../materials/DiscardMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("../materials/WireframeMaterial.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.ScreenSpace=r.ScreenSpace,exports.QuadraticBezierLine=s.QuadraticBezierLine,exports.CubicBezierLine=t.CubicBezierLine,exports.CatmullRomLine=o.CatmullRomLine,exports.Line=i.Line,exports.PositionalAudio=a.PositionalAudio,exports.Text=u.Text,exports.Text3D=c.Text3D,exports.Effects=n.Effects,exports.isWebGL2Available=n.isWebGL2Available,exports.GradientTexture=j.GradientTexture,exports.Image=p.Image,exports.Edges=x.Edges,exports.Trail=l.Trail,exports.useTrail=l.useTrail,exports.Sampler=m.Sampler,exports.useSurfaceSampler=m.useSurfaceSampler,exports.ComputedAttribute=q.ComputedAttribute,exports.Clone=d.Clone,exports.MarchingCube=h.MarchingCube,exports.MarchingCubes=h.MarchingCubes,exports.MarchingPlane=h.MarchingPlane,exports.Decal=C.Decal,exports.Svg=M.Svg,exports.Gltf=S.Gltf,exports.AsciiRenderer=f.AsciiRenderer,exports.OrthographicCamera=T.OrthographicCamera,exports.PerspectiveCamera=P.PerspectiveCamera,exports.CubeCamera=b.CubeCamera,exports.DeviceOrientationControls=B.DeviceOrientationControls,exports.FlyControls=g.FlyControls,exports.MapControls=v.MapControls,exports.OrbitControls=F.OrbitControls,exports.TrackballControls=L.TrackballControls,exports.ArcballControls=A.ArcballControls,exports.TransformControls=k.TransformControls,exports.PointerLockControls=D.PointerLockControls,exports.FirstPersonControls=E.FirstPersonControls,exports.CameraControls=R.CameraControls,exports.FaceControls=G.FaceControls,exports.useFaceControls=G.useFaceControls,exports.GizmoHelper=w.GizmoHelper,exports.useGizmoContext=w.useGizmoContext,exports.GizmoViewcube=z.GizmoViewcube,exports.GizmoViewport=O.GizmoViewport,exports.Grid=I.Grid,exports.useCubeTexture=y.useCubeTexture,exports.useFBX=H.useFBX,exports.useGLTF=V.useGLTF,exports.useKTX2=W.useKTX2,exports.useProgress=Q.useProgress,exports.IsObject=X.IsObject,exports.useTexture=X.useTexture,exports.useVideoTexture=K.useVideoTexture,exports.useFont=N.useFont,exports.Stats=U.Stats,exports.useDepthBuffer=_.useDepthBuffer,exports.useAspect=J.useAspect,exports.useCamera=Y.useCamera,exports.useDetectGPU=Z.useDetectGPU,exports.useHelper=$.useHelper,exports.Bvh=ee.Bvh,exports.useBVH=ee.useBVH,exports.useContextBridge=re.useContextBridge,exports.useAnimations=se.useAnimations,exports.useFBO=te.useFBO,exports.useIntersect=oe.useIntersect,exports.useBoxProjectedEnv=ie.useBoxProjectedEnv,exports.BBAnchor=ae.BBAnchor,exports.useTrailTexture=ue.useTrailTexture,exports.useCubeCamera=ce.useCubeCamera,exports.Example=ne.Example,exports.SpriteAnimator=je.SpriteAnimator,exports.FaceLandmarker=pe.FaceLandmarker,exports.FaceLandmarkerDefaults=pe.FaceLandmarkerDefaults,exports.useFaceLandmarker=pe.useFaceLandmarker,exports.CurveModifier=xe.CurveModifier,exports.MeshDistortMaterial=le.MeshDistortMaterial,exports.MeshWobbleMaterial=me.MeshWobbleMaterial,exports.MeshReflectorMaterial=qe.MeshReflectorMaterial,exports.MeshRefractionMaterial=de.MeshRefractionMaterial,exports.MeshTransmissionMaterial=he.MeshTransmissionMaterial,exports.MeshDiscardMaterial=Ce.MeshDiscardMaterial,exports.PointMaterial=Me.PointMaterial,exports.PointMaterialImpl=Me.PointMaterialImpl,exports.shaderMaterial=Se.shaderMaterial,exports.SoftShadows=fe.SoftShadows,exports.Box=Te.Box,exports.Capsule=Te.Capsule,exports.Circle=Te.Circle,exports.Cone=Te.Cone,exports.Cylinder=Te.Cylinder,exports.Dodecahedron=Te.Dodecahedron,exports.Extrude=Te.Extrude,exports.Icosahedron=Te.Icosahedron,exports.Lathe=Te.Lathe,exports.Octahedron=Te.Octahedron,exports.Plane=Te.Plane,exports.Polyhedron=Te.Polyhedron,exports.Ring=Te.Ring,exports.Shape=Te.Shape,exports.Sphere=Te.Sphere,exports.Tetrahedron=Te.Tetrahedron,exports.Torus=Te.Torus,exports.TorusKnot=Te.TorusKnot,exports.Tube=Te.Tube,exports.Facemesh=Pe.Facemesh,exports.FacemeshDatas=Pe.FacemeshDatas,exports.FacemeshEye=Pe.FacemeshEye,exports.FacemeshEyeDefaults=Pe.FacemeshEyeDefaults,exports.RoundedBox=be.RoundedBox,exports.ScreenQuad=Be.ScreenQuad,exports.Center=ge.Center,exports.Resize=ve.Resize,exports.Bounds=Fe.Bounds,exports.useBounds=Fe.useBounds,exports.CameraShake=Le.CameraShake,exports.Float=Ae.Float,exports.Stage=ke.Stage,exports.Backdrop=De.Backdrop,exports.Shadow=Ee.Shadow,exports.Caustics=Re.Caustics,exports.ContactShadows=Ge.ContactShadows,exports.AccumulativeShadows=we.AccumulativeShadows,exports.RandomizedLight=we.RandomizedLight,exports.accumulativeContext=we.accumulativeContext,exports.Reflector=ze.Reflector,exports.SpotLight=Oe.SpotLight,exports.SpotLightShadow=Oe.SpotLightShadow,exports.Environment=Ie.Environment,exports.EnvironmentCube=Ie.EnvironmentCube,exports.EnvironmentMap=Ie.EnvironmentMap,exports.EnvironmentPortal=Ie.EnvironmentPortal,exports.Lightformer=ye.Lightformer,exports.Sky=He.Sky,exports.calcPosFromAngles=He.calcPosFromAngles,exports.Stars=Ve.Stars,exports.Cloud=We.Cloud,exports.Sparkles=Qe.Sparkles,exports.useEnvironment=Xe.useEnvironment,exports.useMatcapTexture=Ke.useMatcapTexture,exports.useNormalTexture=Ne.useNormalTexture,exports.Wireframe=Ue.Wireframe,exports.Point=_e.Point,exports.Points=_e.Points,exports.PointsBuffer=_e.PointsBuffer,exports.PositionPoint=_e.PositionPoint,exports.Instance=Je.Instance,exports.Instances=Je.Instances,exports.Merged=Je.Merged,exports.Segment=Ye.Segment,exports.SegmentObject=Ye.SegmentObject,exports.Segments=Ye.Segments,exports.Detailed=Ze.Detailed,exports.Preload=$e.Preload,exports.BakeShadows=er.BakeShadows,exports.meshBounds=rr.meshBounds,exports.AdaptiveDpr=sr.AdaptiveDpr,exports.AdaptiveEvents=tr.AdaptiveEvents,exports.PerformanceMonitor=or.PerformanceMonitor,exports.usePerformanceMonitor=or.usePerformanceMonitor,exports.RenderTexture=ir.RenderTexture,exports.Mask=ar.Mask,exports.useMask=ar.useMask,exports.Hud=ur.Hud,exports.MeshPortalMaterial=cr.MeshPortalMaterial;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./ScreenSpace.cjs.js"),s=require("./QuadraticBezierLine.cjs.js"),t=require("./CubicBezierLine.cjs.js"),o=require("./CatmullRomLine.cjs.js"),i=require("./Line.cjs.js"),a=require("./PositionalAudio.cjs.js"),u=require("./Text.cjs.js"),c=require("./Text3D.cjs.js"),n=require("./Effects.cjs.js"),j=require("./GradientTexture.cjs.js"),p=require("./Image.cjs.js"),x=require("./Edges.cjs.js"),l=require("./Trail.cjs.js"),m=require("./Sampler.cjs.js"),q=require("./ComputedAttribute.cjs.js"),d=require("./Clone.cjs.js"),h=require("./MarchingCubes.cjs.js"),C=require("./Decal.cjs.js"),M=require("./Svg.cjs.js"),S=require("./Gltf.cjs.js"),f=require("./AsciiRenderer.cjs.js"),T=require("./OrthographicCamera.cjs.js"),P=require("./PerspectiveCamera.cjs.js"),b=require("./CubeCamera.cjs.js"),B=require("./DeviceOrientationControls.cjs.js"),g=require("./FlyControls.cjs.js"),v=require("./MapControls.cjs.js"),F=require("./OrbitControls.cjs.js"),L=require("./TrackballControls.cjs.js"),A=require("./ArcballControls.cjs.js"),k=require("./TransformControls.cjs.js"),D=require("./PointerLockControls.cjs.js"),E=require("./FirstPersonControls.cjs.js"),G=require("./CameraControls.cjs.js"),R=require("./FaceControls.cjs.js"),w=require("./GizmoHelper.cjs.js"),z=require("./GizmoViewcube.cjs.js"),O=require("./GizmoViewport.cjs.js"),y=require("./Grid.cjs.js"),I=require("./useCubeTexture.cjs.js"),H=require("./useFBX.cjs.js"),V=require("./useGLTF.cjs.js"),W=require("./useKTX2.cjs.js"),Q=require("./useProgress.cjs.js"),X=require("./useTexture.cjs.js"),K=require("./useVideoTexture.cjs.js"),N=require("./useFont.cjs.js"),U=require("./Stats.cjs.js"),_=require("./useDepthBuffer.cjs.js"),J=require("./useAspect.cjs.js"),Y=require("./useCamera.cjs.js"),Z=require("./useDetectGPU.cjs.js"),$=require("./useHelper.cjs.js"),ee=require("./useBVH.cjs.js"),re=require("./useContextBridge.cjs.js"),se=require("./useAnimations.cjs.js"),te=require("./useFBO.cjs.js"),oe=require("./useIntersect.cjs.js"),ie=require("./useBoxProjectedEnv.cjs.js"),ae=require("./BBAnchor.cjs.js"),ue=require("./useTrailTexture.cjs.js"),ce=require("./useCubeCamera.cjs.js"),ne=require("./Example.cjs.js"),je=require("./SpriteAnimator.cjs.js"),pe=require("./FaceLandmarker.cjs.js"),xe=require("./CurveModifier.cjs.js"),le=require("./MeshDistortMaterial.cjs.js"),me=require("./MeshWobbleMaterial.cjs.js"),qe=require("./MeshReflectorMaterial.cjs.js"),de=require("./MeshRefractionMaterial.cjs.js"),he=require("./MeshTransmissionMaterial.cjs.js"),Ce=require("./MeshDiscardMaterial.cjs.js"),Me=require("./PointMaterial.cjs.js"),Se=require("./shaderMaterial.cjs.js"),fe=require("./softShadows.cjs.js"),Te=require("./shapes.cjs.js"),Pe=require("./Facemesh.cjs.js"),be=require("./RoundedBox.cjs.js"),Be=require("./ScreenQuad.cjs.js"),ge=require("./Center.cjs.js"),ve=require("./Resize.cjs.js"),Fe=require("./Bounds.cjs.js"),Le=require("./CameraShake.cjs.js"),Ae=require("./Float.cjs.js"),ke=require("./Stage.cjs.js"),De=require("./Backdrop.cjs.js"),Ee=require("./Shadow.cjs.js"),Ge=require("./Caustics.cjs.js"),Re=require("./ContactShadows.cjs.js"),we=require("./AccumulativeShadows.cjs.js"),ze=require("./Reflector.cjs.js"),Oe=require("./SpotLight.cjs.js"),ye=require("./Environment.cjs.js"),Ie=require("./Lightformer.cjs.js"),He=require("./Sky.cjs.js"),Ve=require("./Stars.cjs.js"),We=require("./Cloud.cjs.js"),Qe=require("./Sparkles.cjs.js"),Xe=require("./useEnvironment.cjs.js"),Ke=require("./useMatcapTexture.cjs.js"),Ne=require("./useNormalTexture.cjs.js"),Ue=require("./Wireframe.cjs.js"),_e=require("./Points.cjs.js"),Je=require("./Instances.cjs.js"),Ye=require("./Segments.cjs.js"),Ze=require("./Detailed.cjs.js"),$e=require("./Preload.cjs.js"),er=require("./BakeShadows.cjs.js"),rr=require("./meshBounds.cjs.js"),sr=require("./AdaptiveDpr.cjs.js"),tr=require("./AdaptiveEvents.cjs.js"),or=require("./PerformanceMonitor.cjs.js"),ir=require("./RenderTexture.cjs.js"),ar=require("./Mask.cjs.js"),ur=require("./Hud.cjs.js"),cr=require("./MeshPortalMaterial.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("@react-three/fiber"),require("react-merge-refs"),require("three"),require("three-stdlib"),require("troika-three-text"),require("suspend-react"),require("meshline"),require("lodash.pick"),require("lodash.omit"),require("camera-controls"),require("maath"),require("@mediapipe/tasks-vision"),require("zustand"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("detect-gpu"),require("three-mesh-bvh"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../materials/MeshRefractionMaterial.cjs.js"),require("../materials/DiscardMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("../materials/WireframeMaterial.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.ScreenSpace=r.ScreenSpace,exports.QuadraticBezierLine=s.QuadraticBezierLine,exports.CubicBezierLine=t.CubicBezierLine,exports.CatmullRomLine=o.CatmullRomLine,exports.Line=i.Line,exports.PositionalAudio=a.PositionalAudio,exports.Text=u.Text,exports.Text3D=c.Text3D,exports.Effects=n.Effects,exports.isWebGL2Available=n.isWebGL2Available,exports.GradientTexture=j.GradientTexture,exports.GradientType=j.GradientType,exports.Image=p.Image,exports.Edges=x.Edges,exports.Trail=l.Trail,exports.useTrail=l.useTrail,exports.Sampler=m.Sampler,exports.useSurfaceSampler=m.useSurfaceSampler,exports.ComputedAttribute=q.ComputedAttribute,exports.Clone=d.Clone,exports.MarchingCube=h.MarchingCube,exports.MarchingCubes=h.MarchingCubes,exports.MarchingPlane=h.MarchingPlane,exports.Decal=C.Decal,exports.Svg=M.Svg,exports.Gltf=S.Gltf,exports.AsciiRenderer=f.AsciiRenderer,exports.OrthographicCamera=T.OrthographicCamera,exports.PerspectiveCamera=P.PerspectiveCamera,exports.CubeCamera=b.CubeCamera,exports.DeviceOrientationControls=B.DeviceOrientationControls,exports.FlyControls=g.FlyControls,exports.MapControls=v.MapControls,exports.OrbitControls=F.OrbitControls,exports.TrackballControls=L.TrackballControls,exports.ArcballControls=A.ArcballControls,exports.TransformControls=k.TransformControls,exports.PointerLockControls=D.PointerLockControls,exports.FirstPersonControls=E.FirstPersonControls,exports.CameraControls=G.CameraControls,exports.FaceControls=R.FaceControls,exports.useFaceControls=R.useFaceControls,exports.GizmoHelper=w.GizmoHelper,exports.useGizmoContext=w.useGizmoContext,exports.GizmoViewcube=z.GizmoViewcube,exports.GizmoViewport=O.GizmoViewport,exports.Grid=y.Grid,exports.useCubeTexture=I.useCubeTexture,exports.useFBX=H.useFBX,exports.useGLTF=V.useGLTF,exports.useKTX2=W.useKTX2,exports.useProgress=Q.useProgress,exports.IsObject=X.IsObject,exports.useTexture=X.useTexture,exports.useVideoTexture=K.useVideoTexture,exports.useFont=N.useFont,exports.Stats=U.Stats,exports.useDepthBuffer=_.useDepthBuffer,exports.useAspect=J.useAspect,exports.useCamera=Y.useCamera,exports.useDetectGPU=Z.useDetectGPU,exports.useHelper=$.useHelper,exports.Bvh=ee.Bvh,exports.useBVH=ee.useBVH,exports.useContextBridge=re.useContextBridge,exports.useAnimations=se.useAnimations,exports.useFBO=te.useFBO,exports.useIntersect=oe.useIntersect,exports.useBoxProjectedEnv=ie.useBoxProjectedEnv,exports.BBAnchor=ae.BBAnchor,exports.useTrailTexture=ue.useTrailTexture,exports.useCubeCamera=ce.useCubeCamera,exports.Example=ne.Example,exports.SpriteAnimator=je.SpriteAnimator,exports.FaceLandmarker=pe.FaceLandmarker,exports.FaceLandmarkerDefaults=pe.FaceLandmarkerDefaults,exports.useFaceLandmarker=pe.useFaceLandmarker,exports.CurveModifier=xe.CurveModifier,exports.MeshDistortMaterial=le.MeshDistortMaterial,exports.MeshWobbleMaterial=me.MeshWobbleMaterial,exports.MeshReflectorMaterial=qe.MeshReflectorMaterial,exports.MeshRefractionMaterial=de.MeshRefractionMaterial,exports.MeshTransmissionMaterial=he.MeshTransmissionMaterial,exports.MeshDiscardMaterial=Ce.MeshDiscardMaterial,exports.PointMaterial=Me.PointMaterial,exports.PointMaterialImpl=Me.PointMaterialImpl,exports.shaderMaterial=Se.shaderMaterial,exports.SoftShadows=fe.SoftShadows,exports.Box=Te.Box,exports.Capsule=Te.Capsule,exports.Circle=Te.Circle,exports.Cone=Te.Cone,exports.Cylinder=Te.Cylinder,exports.Dodecahedron=Te.Dodecahedron,exports.Extrude=Te.Extrude,exports.Icosahedron=Te.Icosahedron,exports.Lathe=Te.Lathe,exports.Octahedron=Te.Octahedron,exports.Plane=Te.Plane,exports.Polyhedron=Te.Polyhedron,exports.Ring=Te.Ring,exports.Shape=Te.Shape,exports.Sphere=Te.Sphere,exports.Tetrahedron=Te.Tetrahedron,exports.Torus=Te.Torus,exports.TorusKnot=Te.TorusKnot,exports.Tube=Te.Tube,exports.Facemesh=Pe.Facemesh,exports.FacemeshDatas=Pe.FacemeshDatas,exports.FacemeshEye=Pe.FacemeshEye,exports.FacemeshEyeDefaults=Pe.FacemeshEyeDefaults,exports.RoundedBox=be.RoundedBox,exports.ScreenQuad=Be.ScreenQuad,exports.Center=ge.Center,exports.Resize=ve.Resize,exports.Bounds=Fe.Bounds,exports.useBounds=Fe.useBounds,exports.CameraShake=Le.CameraShake,exports.Float=Ae.Float,exports.Stage=ke.Stage,exports.Backdrop=De.Backdrop,exports.Shadow=Ee.Shadow,exports.Caustics=Ge.Caustics,exports.ContactShadows=Re.ContactShadows,exports.AccumulativeShadows=we.AccumulativeShadows,exports.RandomizedLight=we.RandomizedLight,exports.accumulativeContext=we.accumulativeContext,exports.Reflector=ze.Reflector,exports.SpotLight=Oe.SpotLight,exports.SpotLightShadow=Oe.SpotLightShadow,exports.Environment=ye.Environment,exports.EnvironmentCube=ye.EnvironmentCube,exports.EnvironmentMap=ye.EnvironmentMap,exports.EnvironmentPortal=ye.EnvironmentPortal,exports.Lightformer=Ie.Lightformer,exports.Sky=He.Sky,exports.calcPosFromAngles=He.calcPosFromAngles,exports.Stars=Ve.Stars,exports.Cloud=We.Cloud,exports.Sparkles=Qe.Sparkles,exports.useEnvironment=Xe.useEnvironment,exports.useMatcapTexture=Ke.useMatcapTexture,exports.useNormalTexture=Ne.useNormalTexture,exports.Wireframe=Ue.Wireframe,exports.Point=_e.Point,exports.Points=_e.Points,exports.PointsBuffer=_e.PointsBuffer,exports.PositionPoint=_e.PositionPoint,exports.Instance=Je.Instance,exports.Instances=Je.Instances,exports.Merged=Je.Merged,exports.Segment=Ye.Segment,exports.SegmentObject=Ye.SegmentObject,exports.Segments=Ye.Segments,exports.Detailed=Ze.Detailed,exports.Preload=$e.Preload,exports.BakeShadows=er.BakeShadows,exports.meshBounds=rr.meshBounds,exports.AdaptiveDpr=sr.AdaptiveDpr,exports.AdaptiveEvents=tr.AdaptiveEvents,exports.PerformanceMonitor=or.PerformanceMonitor,exports.usePerformanceMonitor=or.usePerformanceMonitor,exports.RenderTexture=ir.RenderTexture,exports.Mask=ar.Mask,exports.useMask=ar.useMask,exports.Hud=ur.Hud,exports.MeshPortalMaterial=cr.MeshPortalMaterial;

package/core/index.js

@@ -8,7 +8,7 @@ export { PositionalAudio } from './PositionalAudio.js';
 export { Text } from './Text.js';
 export { Text3D } from './Text3D.js';
 export { Effects, isWebGL2Available } from './Effects.js';
-export { GradientTexture } from './GradientTexture.js';
+export { GradientTexture, GradientType } from './GradientTexture.js';
 export { Image } from './Image.js';
 export { Edges } from './Edges.js';
 export { Trail, useTrail } from './Trail.js';