diff --git a/.storybook/Setup.tsx b/.storybook/Setup.tsx
index f43cf0a..b6300b1 100644
--- a/.storybook/Setup.tsx
+++ b/.storybook/Setup.tsx
@@ -2,7 +2,7 @@ import { Canvas, Props as CanvasProps, T } from 'solid-three'
 import { Vector3 } from 'three'
 
 import { ParentComponent } from 'solid-js'
-import { OrbitControls } from '../src'
+import { OrbitControls } from '../src/index.ts'
 import { processProps } from '../src/helpers/processProps'
 
 type Props = CanvasProps & {
diff --git a/.storybook/manager.ts b/.storybook/manager.ts
index 2f31d91..aab73a7 100644
--- a/.storybook/manager.ts
+++ b/.storybook/manager.ts
@@ -1,5 +1,5 @@
 import { addons } from '@storybook/addons'
-import theme from './theme'
+import theme from './theme.ts'
 
 addons.setConfig({
   theme,
diff --git a/.storybook/public/draco-gltf/draco_decoder.js b/.storybook/public/draco-gltf/draco_decoder.js
old mode 100755
new mode 100644
index 3521bd3..50b7dc9
--- a/.storybook/public/draco-gltf/draco_decoder.js
+++ b/.storybook/public/draco-gltf/draco_decoder.js
@@ -1,3 +1,5 @@
+import process from "node:process";
+import { Buffer } from "node:buffer";
 var DracoDecoderModule = function (DracoDecoderModule) {
   DracoDecoderModule = DracoDecoderModule || {}
 
diff --git a/.storybook/public/draco-gltf/draco_wasm_wrapper.js b/.storybook/public/draco-gltf/draco_wasm_wrapper.js
old mode 100755
new mode 100644
index a59b892..bceda29
--- a/.storybook/public/draco-gltf/draco_wasm_wrapper.js
+++ b/.storybook/public/draco-gltf/draco_wasm_wrapper.js
@@ -1,3 +1,4 @@
+import process from "node:process";
 var $jscomp = $jscomp || {}
 $jscomp.scope = {}
 $jscomp.ASSUME_ES5 = !1
@@ -10,7 +11,7 @@ $jscomp.defineProperty =
         d != Array.prototype && d != Object.prototype && (d[k] = f.value)
       }
 $jscomp.getGlobal = function (d) {
-  return 'undefined' != typeof window && window === d ? d : 'undefined' != typeof global && null != global ? global : d
+  return 'undefined' != typeof window && window === d ? d : 'undefined' != typeof globalThis && null != globalThis ? globalThis : d
 }
 $jscomp.global = $jscomp.getGlobal(this)
 $jscomp.polyfill = function (d, k, f, u) {
diff --git a/.storybook/stories/AccumulativeShadows.stories.tsx b/.storybook/stories/AccumulativeShadows.stories.tsx
index 79b00de..499e695 100644
--- a/.storybook/stories/AccumulativeShadows.stories.tsx
+++ b/.storybook/stories/AccumulativeShadows.stories.tsx
@@ -2,7 +2,7 @@ import { Show, Suspense, createEffect } from 'solid-js'
 import { T, applyProps } from 'solid-three'
 import * as THREE from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { FlakesTexture } from 'three-stdlib'
 import {
@@ -11,7 +11,7 @@ import {
   OrbitControls,
   RandomizedLight,
   useGLTF,
-} from '../../src'
+} from '../../src/index.ts'
 import { when } from '../../src/helpers/when'
 
 export default {
@@ -36,7 +36,7 @@ function AccumulativeShadowScene() {
       >
         <RandomizedLight amount={8} radius={4} ambient={0.5} bias={0.001} position={[5, 5, -10]} />
       </AccumulativeShadows>
-      <OrbitControls autoRotate={true} />
+      <OrbitControls autoRotate />
       <Environment preset="city" />
     </Suspense>
   )
diff --git a/.storybook/stories/ArcballControls.stories.tsx b/.storybook/stories/ArcballControls.stories.tsx
index df86cb8..2f529b3 100644
--- a/.storybook/stories/ArcballControls.stories.tsx
+++ b/.storybook/stories/ArcballControls.stories.tsx
@@ -1,11 +1,11 @@
 import { Portal, T, useFrame } from 'solid-three'
 import { Scene } from 'three'
 
-import { ArcballControls, Box, PerspectiveCamera, Plane, useFBO } from '../../src'
-import { Setup } from '../Setup'
+import { ArcballControls, Box, PerspectiveCamera, Plane, useFBO } from '../../src/index.ts'
+import { Setup } from '../Setup.tsx'
 
 import type { OrthographicCamera, PerspectiveCamera as PerspectiveCameraType } from 'three'
-import type { ArcballControlsProps } from '../../src'
+import type { ArcballControlsProps } from '../../src/index.ts'
 
 const args = {
   enablePan: true,
diff --git a/.storybook/stories/BBAnchor.stories.tsx b/.storybook/stories/BBAnchor.stories.tsx
index 1d0fb8c..c983c0f 100644
--- a/.storybook/stories/BBAnchor.stories.tsx
+++ b/.storybook/stories/BBAnchor.stories.tsx
@@ -2,8 +2,8 @@ import * as THREE from 'three'
 
 import { T } from 'solid-three'
 import { onMount, splitProps, type JSX } from 'solid-js'
-import { BBAnchor, Html, Icosahedron, OrbitControls, Sphere, useHelper } from '../../src'
-import { Setup } from '../Setup'
+import { BBAnchor, Html, Icosahedron, OrbitControls, Sphere, useHelper } from '../../src/index.ts'
+import { Setup } from '../Setup.tsx'
 
 export default {
   title: 'Staging/BBAnchor',
diff --git a/.storybook/stories/Billboard.stories.tsx b/.storybook/stories/Billboard.stories.tsx
index 31adb92..15ef718 100644
--- a/.storybook/stories/Billboard.stories.tsx
+++ b/.storybook/stories/Billboard.stories.tsx
@@ -1,9 +1,9 @@
 import { Vector3 } from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
-import { Billboard, Box, Cone, OrbitControls, Plane, Text } from '../../src'
+import { Billboard, Box, Cone, OrbitControls, Plane, Text } from '../../src/index.ts'
 
 export default {
   title: 'Abstractions/Billboard',
@@ -35,7 +35,7 @@ export const BillboardStory = ({ follow, lockX, lockY, lockZ }) => (
       <Plane args={[3, 2]} material-color="yellow" />
     </Billboard>
 
-    <OrbitControls enablePan={true} zoomSpeed={0.5} />
+    <OrbitControls enablePan zoomSpeed={0.5} />
   </>
 )
 
@@ -57,7 +57,7 @@ export const BillboardTextStory = ({ follow, lockX, lockY, lockZ }) => (
       lockZ={lockZ}
       position={[0.5, 2.05, 0.5]}
     >
-      <Text fontSize={1} outlineWidth={'5%'} outlineColor="#000000" outlineOpacity={1}>
+      <Text fontSize={1} outlineWidth="5%" outlineColor="#000000" outlineOpacity={1}>
         box
       </Text>
     </Billboard>
@@ -66,7 +66,7 @@ export const BillboardTextStory = ({ follow, lockX, lockY, lockZ }) => (
     </Box>
     <T.Group position={[-2.5, -3, -1]}>
       <Billboard follow={follow} lockX={lockX} lockY={lockY} lockZ={lockZ} position={[0, 1.05, 0]}>
-        <Text fontSize={1} outlineWidth={'5%'} outlineColor="#000000" outlineOpacity={1}>
+        <Text fontSize={1} outlineWidth="5%" outlineColor="#000000" outlineOpacity={1}>
           cone
         </Text>
       </Billboard>
@@ -81,7 +81,7 @@ export const BillboardTextStory = ({ follow, lockX, lockY, lockZ }) => (
       </Plane>
     </Billboard>
 
-    <OrbitControls enablePan={true} zoomSpeed={0.5} />
+    <OrbitControls enablePan zoomSpeed={0.5} />
   </>
 )
 
diff --git a/.storybook/stories/CameraControls.stories.tsx b/.storybook/stories/CameraControls.stories.tsx
index 6ba6010..f4b9889 100644
--- a/.storybook/stories/CameraControls.stories.tsx
+++ b/.storybook/stories/CameraControls.stories.tsx
@@ -1,10 +1,10 @@
 import { Portal, T, useFrame } from 'solid-three'
 import { Scene } from 'three'
 
-import { Box, CameraControls, PerspectiveCamera, Plane, useFBO } from '../../src'
-import { Setup } from '../Setup'
+import { Box, CameraControls, PerspectiveCamera, Plane, useFBO } from '../../src/index.ts'
+import { Setup } from '../Setup.tsx'
 
-import type { CameraControlsProps } from '../../src'
+import type { CameraControlsProps } from '../../src/index.ts'
 
 const args = {}
 
diff --git a/.storybook/stories/CameraShake.stories.tsx b/.storybook/stories/CameraShake.stories.tsx
index 22c827a..e0c48f3 100644
--- a/.storybook/stories/CameraShake.stories.tsx
+++ b/.storybook/stories/CameraShake.stories.tsx
@@ -2,9 +2,9 @@ import { T, useFrame } from 'solid-three'
 import * as THREE from 'three'
 import { OrbitControls as OrbitControlsImpl } from 'three-stdlib'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
-import { CameraShake, OrbitControls } from '../../src'
+import { CameraShake, OrbitControls } from '../../src/index.ts'
 
 const frequencyArgType = {
   control: {
diff --git a/.storybook/stories/Center.stories.tsx b/.storybook/stories/Center.stories.tsx
index 3c19a64..9f7b8b6 100644
--- a/.storybook/stories/Center.stories.tsx
+++ b/.storybook/stories/Center.stories.tsx
@@ -1,10 +1,10 @@
 import { Vector3 } from 'three'
 
-import { Setup } from '../Setup'
-import { useTurntable } from '../useTurntable'
+import { Setup } from '../Setup.tsx'
+import { useTurntable } from '../useTurntable.ts'
 
 import { Primitive, T } from 'solid-three'
-import { Box, Center, useGLTF } from '../../src'
+import { Box, Center, useGLTF } from '../../src/index.ts'
 
 export default {
   title: 'Staging/Center',
diff --git a/.storybook/stories/Cloud.stories.tsx b/.storybook/stories/Cloud.stories.tsx
index 1ba76a5..803bd73 100644
--- a/.storybook/stories/Cloud.stories.tsx
+++ b/.storybook/stories/Cloud.stories.tsx
@@ -1,9 +1,9 @@
 import { Vector3 } from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
-import { Cloud, OrbitControls } from '../../src'
+import { Cloud, OrbitControls } from '../../src/index.ts'
 
 export default {
   title: 'Staging/Cloud',
diff --git a/.storybook/stories/ContactShadows.stories.tsx b/.storybook/stories/ContactShadows.stories.tsx
index eeeec9f..30d034d 100644
--- a/.storybook/stories/ContactShadows.stories.tsx
+++ b/.storybook/stories/ContactShadows.stories.tsx
@@ -1,9 +1,9 @@
 import { T, useFrame } from 'solid-three'
 import { Mesh } from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
-import { ContactShadows, Plane, Sphere } from '../../src'
+import { ContactShadows, Plane, Sphere } from '../../src/index.ts'
 
 export default {
   title: 'Staging/ContactShadows',
diff --git a/.storybook/stories/CubeCamera.stories.tsx b/.storybook/stories/CubeCamera.stories.tsx
index 0c1ef9b..1395427 100644
--- a/.storybook/stories/CubeCamera.stories.tsx
+++ b/.storybook/stories/CubeCamera.stories.tsx
@@ -1,10 +1,10 @@
 import { T, useFrame } from 'solid-three'
 import * as THREE from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { Show, createSignal } from 'solid-js'
-import { Box, CubeCamera } from '../../src'
+import { Box, CubeCamera } from '../../src/index.ts'
 
 export default {
   title: 'Camera/CubeCamera',
diff --git a/.storybook/stories/CurveModifier.stories.tsx b/.storybook/stories/CurveModifier.stories.tsx
index 73c57a8..d53a5b0 100644
--- a/.storybook/stories/CurveModifier.stories.tsx
+++ b/.storybook/stories/CurveModifier.stories.tsx
@@ -3,8 +3,8 @@ import { BufferGeometry, CatmullRomCurve3, LineBasicMaterial, LineLoop, Vector3
 import { FontLoader, TextGeometry, TextGeometryParameters } from 'three-stdlib'
 
 import { createMemo, onMount } from 'solid-js'
-import { CurveModifier, CurveModifierRef } from '../../src'
-import { Setup } from '../Setup'
+import { CurveModifier, CurveModifierRef } from '../../src/index.ts'
+import { Setup } from '../Setup.tsx'
 
 extend({ StdText: TextGeometry })
 
diff --git a/.storybook/stories/Decal.stories.tsx b/.storybook/stories/Decal.stories.tsx
index 70e7c57..c47058b 100644
--- a/.storybook/stories/Decal.stories.tsx
+++ b/.storybook/stories/Decal.stories.tsx
@@ -1,8 +1,8 @@
 import { T } from 'solid-three'
 import { For, JSX, createMemo, createSignal } from 'solid-js'
 import { Euler, InstancedBufferAttribute, Matrix4, Mesh, Quaternion, Vector3 } from 'three'
-import { Decal, PerspectiveCamera, Sampler, useSurfaceSampler, useTexture } from '../../src'
-import { Setup } from '../Setup'
+import { Decal, PerspectiveCamera, Sampler, useSurfaceSampler, useTexture } from '../../src/index.ts'
+import { Setup } from '../Setup.tsx'
 
 function LoopOverInstancedBufferAttribute(props: {
   buffer?: InstancedBufferAttribute
@@ -67,7 +67,7 @@ function DecalScene() {
 
       <T.Mesh ref={setRef}>
         <T.SphereGeometry args={[3, 32, 32]} />
-        <T.MeshPhysicalMaterial color={'tomato'} roughness={0.5} />
+        <T.MeshPhysicalMaterial color="tomato" roughness={0.5} />
       </T.Mesh>
 
       <LoopOverInstancedBufferAttribute buffer={bufferAttribute()}>
@@ -79,7 +79,7 @@ function DecalScene() {
               depthTest={false}
               map={Math.random() > 0.5 ? resource()?.[0] : resource()?.[1]}
               alphaTest={0}
-              polygonOffset={true}
+              polygonOffset
               polygonOffsetFactor={-10}
             />
           </Decal>
diff --git a/.storybook/stories/Detailed.stories.tsx b/.storybook/stories/Detailed.stories.tsx
index abd8f86..1e4c44c 100644
--- a/.storybook/stories/Detailed.stories.tsx
+++ b/.storybook/stories/Detailed.stories.tsx
@@ -1,9 +1,9 @@
 import { Vector3 } from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
-import { Detailed, Icosahedron, OrbitControls } from '../../src'
+import { Detailed, Icosahedron, OrbitControls } from '../../src/index.ts'
 
 export default {
   title: 'Abstractions/Detailed',
diff --git a/.storybook/stories/DeviceOrientationControls.stories.tsx b/.storybook/stories/DeviceOrientationControls.stories.tsx
index ab69161..772d797 100644
--- a/.storybook/stories/DeviceOrientationControls.stories.tsx
+++ b/.storybook/stories/DeviceOrientationControls.stories.tsx
@@ -1,7 +1,7 @@
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
-import { Box, DeviceOrientationControls } from '../../src'
+import { Box, DeviceOrientationControls } from '../../src/index.ts'
 
 export function DeviceOrientationControlsStory() {
   // s3f:   something going wrong with the args-prop: should be a | and not &
diff --git a/.storybook/stories/Environment.stories.tsx b/.storybook/stories/Environment.stories.tsx
index e99a39c..6a3c169 100644
--- a/.storybook/stories/Environment.stories.tsx
+++ b/.storybook/stories/Environment.stories.tsx
@@ -1,8 +1,8 @@
 import { Vector3 } from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
-import { ContactShadows, Environment, OrbitControls } from '../../src'
+import { ContactShadows, Environment, OrbitControls } from '../../src/index.ts'
 
 import { T } from 'solid-three'
 import { presetsObj } from '../../src/helpers/environment-assets'
diff --git a/.storybook/stories/Example.stories.tsx b/.storybook/stories/Example.stories.tsx
index cfd7dda..37df24b 100644
--- a/.storybook/stories/Example.stories.tsx
+++ b/.storybook/stories/Example.stories.tsx
@@ -1,10 +1,10 @@
 import { withKnobs } from '@storybook/addon-knobs'
 import { Vector3 } from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
-import { Example, ExampleApi } from '../../src'
+import { Example, ExampleApi } from '../../src/index.ts'
 
 export default {
   title: 'Misc/Example',
diff --git a/.storybook/stories/Facemesh.stories.tsx b/.storybook/stories/Facemesh.stories.tsx
index 19f379d..f72def8 100644
--- a/.storybook/stories/Facemesh.stories.tsx
+++ b/.storybook/stories/Facemesh.stories.tsx
@@ -2,10 +2,10 @@ import { withKnobs } from '@storybook/addon-knobs'
 import * as THREE from 'three'
 import { Vector3 } from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
-import { Facemesh, FacemeshDatas } from '../../src'
+import { Facemesh, FacemeshDatas } from '../../src/index.ts'
 
 export default {
   title: 'Shapes/Facemesh',
@@ -42,7 +42,7 @@ export const FacemeshSt = ({ depth, origin, eyes, eyesAsOrigin, offset, offsetSc
       <T.MeshStandardMaterial
         side={THREE.DoubleSide}
         color="#cbcbcb"
-        flatShading={true}
+        flatShading
         transparent
         opacity={0.98}
       />
diff --git a/.storybook/stories/FirstPersonControls.stories.tsx b/.storybook/stories/FirstPersonControls.stories.tsx
index 202e0f7..c95fdb9 100644
--- a/.storybook/stories/FirstPersonControls.stories.tsx
+++ b/.storybook/stories/FirstPersonControls.stories.tsx
@@ -1,7 +1,7 @@
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
-import { Box, FirstPersonControls } from '../../src'
+import { Box, FirstPersonControls } from '../../src/index.ts'
 
 export const FirstPersonControlsStory = ({ ...args }) => (
   <>
diff --git a/.storybook/stories/Float.stories.tsx b/.storybook/stories/Float.stories.tsx
index 0985e7a..64b5f4c 100644
--- a/.storybook/stories/Float.stories.tsx
+++ b/.storybook/stories/Float.stories.tsx
@@ -2,10 +2,10 @@ import { number, withKnobs } from '@storybook/addon-knobs'
 
 import * as THREE from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
-import { Float } from '../../src'
+import { Float } from '../../src/index.ts'
 
 export default {
   title: 'Staging/Float',
diff --git a/.storybook/stories/FlyControls.stories.tsx b/.storybook/stories/FlyControls.stories.tsx
index 502ae88..82809fa 100644
--- a/.storybook/stories/FlyControls.stories.tsx
+++ b/.storybook/stories/FlyControls.stories.tsx
@@ -1,7 +1,7 @@
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
-import { Box, FlyControls } from '../../src'
+import { Box, FlyControls } from '../../src/index.ts'
 
 export const FlyControlsStory = ({ ...args }) => (
   <>
diff --git a/.storybook/stories/GizmoHelper.stories.tsx b/.storybook/stories/GizmoHelper.stories.tsx
index a420087..af72851 100644
--- a/.storybook/stories/GizmoHelper.stories.tsx
+++ b/.storybook/stories/GizmoHelper.stories.tsx
@@ -9,8 +9,8 @@ import {
   OrbitControls,
   TrackballControls,
   useGLTF,
-} from '../../src'
-import { Setup } from '../Setup'
+} from '../../src/index.ts'
+import { Setup } from '../Setup.tsx'
 
 export default {
   title: 'Gizmos/GizmoHelper',
diff --git a/.storybook/stories/Grid.stories.tsx b/.storybook/stories/Grid.stories.tsx
index f16c8cb..63a3d61 100644
--- a/.storybook/stories/Grid.stories.tsx
+++ b/.storybook/stories/Grid.stories.tsx
@@ -1,8 +1,8 @@
 import { Vector3 } from 'three'
 
 import { T } from 'solid-three'
-import { Box, Grid } from '../../src'
-import { Setup } from '../Setup'
+import { Box, Grid } from '../../src/index.ts'
+import { Setup } from '../Setup.tsx'
 
 export default {
   title: 'Gizmos/Grid',
diff --git a/.storybook/stories/HTML.stories.tsx b/.storybook/stories/HTML.stories.tsx
index 4b45492..6bd6153 100644
--- a/.storybook/stories/HTML.stories.tsx
+++ b/.storybook/stories/HTML.stories.tsx
@@ -1,12 +1,12 @@
 import { createSignal, type JSX } from 'solid-js'
 import * as THREE from 'three'
 
-import { Setup } from '../Setup'
-import { useTurntable } from '../useTurntable'
+import { Setup } from '../Setup.tsx'
+import { useTurntable } from '../useTurntable.ts'
 
 import { T, useFrame, useThree } from 'solid-three'
 import { Object3D } from 'three'
-import { Html, Icosahedron, OrthographicCamera } from '../../src'
+import { Html, Icosahedron, OrthographicCamera } from '../../src/index.ts'
 import { processProps } from '../../src/helpers/processProps'
 import { CalculatePosition, HtmlProps } from '../../src/web/Html'
 
@@ -100,7 +100,7 @@ function HTMLOrthographicScene() {
 
   return (
     <>
-      <OrthographicCamera makeDefault={true} applyMatrix4={undefined} {...initialCamera} />
+      <OrthographicCamera makeDefault applyMatrix4={undefined} {...initialCamera} />
       <Icosahedron args={[200, 5]} position={[0, 0, 0]}>
         <T.MeshBasicMaterial color="hotpink" wireframe />
         {
diff --git a/.storybook/stories/Image.stories.tsx b/.storybook/stories/Image.stories.tsx
index 409a7a1..fb454d8 100644
--- a/.storybook/stories/Image.stories.tsx
+++ b/.storybook/stories/Image.stories.tsx
@@ -1,10 +1,10 @@
 import { Vector3 } from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
 import { splitProps } from 'solid-js'
-import { Image, useTexture } from '../../src'
+import { Image, useTexture } from '../../src/index.ts'
 
 export default {
   title: 'Abstractions/Image',
diff --git a/.storybook/stories/KeyboardControls.stories.tsx b/.storybook/stories/KeyboardControls.stories.tsx
index a751f76..e173c50 100644
--- a/.storybook/stories/KeyboardControls.stories.tsx
+++ b/.storybook/stories/KeyboardControls.stories.tsx
@@ -1,14 +1,14 @@
 import { T, useFrame } from 'solid-three'
 import { createMemo, createSignal } from 'solid-js'
 import { MathUtils, Vector3 } from 'three'
-import { Cone, KeyboardControls, KeyboardControlsEntry, useKeyboardControls } from '../../src'
-import { Setup } from '../Setup'
+import { Cone, KeyboardControls, KeyboardControlsEntry, useKeyboardControls } from '../../src/index.ts'
+import { Setup } from '../Setup.tsx'
 
 export default {
   title: 'Controls/KeyboardControls',
   decorators: [
     storyFn => (
-      <Setup cameraPosition={new Vector3(0, 10, 0)} lights={true}>
+      <Setup cameraPosition={new Vector3(0, 10, 0)} lights>
         {storyFn()}
       </Setup>
     ),
diff --git a/.storybook/stories/Line.stories.tsx b/.storybook/stories/Line.stories.tsx
index aed0e7a..885c927 100644
--- a/.storybook/stories/Line.stories.tsx
+++ b/.storybook/stories/Line.stories.tsx
@@ -2,9 +2,9 @@ import { boolean, color, number, select, withKnobs } from '@storybook/addon-knob
 import { Vector3 } from 'three'
 import { GeometryUtils } from 'three-stdlib'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
-import { CatmullRomLine, CubicBezierLine, Line, OrbitControls, QuadraticBezierLine } from '../../src'
+import { CatmullRomLine, CubicBezierLine, Line, OrbitControls, QuadraticBezierLine } from '../../src/index.ts'
 
 export default {
   title: 'Shapes/Line',
diff --git a/.storybook/stories/MapControls.stories.tsx b/.storybook/stories/MapControls.stories.tsx
index 05a4dc0..052b932 100644
--- a/.storybook/stories/MapControls.stories.tsx
+++ b/.storybook/stories/MapControls.stories.tsx
@@ -3,7 +3,7 @@ import { For, Suspense, createMemo, createSignal, onMount } from 'solid-js'
 import { Box3, Sphere, Vector3 } from 'three'
 import { SVGLoader } from 'three-stdlib'
 
-import { MapControls } from '../../src'
+import { MapControls } from '../../src/index.ts'
 import { when } from '../../src/helpers/when'
 
 export default {
@@ -15,7 +15,7 @@ const Cell = (props: { color; shape; fillOpacity }) => {
   return (
     <T.Mesh>
       <T.MeshBasicMaterial
-        color={'black'}
+        color="black"
         opacity={props.fillOpacity}
         depthWrite={false}
         transparent
diff --git a/.storybook/stories/MarchingCubes.stories.tsx b/.storybook/stories/MarchingCubes.stories.tsx
index 688f1bc..991f8f0 100644
--- a/.storybook/stories/MarchingCubes.stories.tsx
+++ b/.storybook/stories/MarchingCubes.stories.tsx
@@ -1,9 +1,9 @@
 import { Color, Group, Vector3 } from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T, useFrame } from 'solid-three'
-import { MarchingCube, MarchingCubes, MarchingPlane, OrbitControls } from '../../src'
+import { MarchingCube, MarchingCubes, MarchingPlane, OrbitControls } from '../../src/index.ts'
 
 export default {
   title: 'Abstractions/MarchingCubes',
@@ -32,7 +32,7 @@ const MarchingCubesScene = ({ resolution, maxPolyCount, planeX, planeY, planeZ }
     <MarchingCubes
       resolution={resolution}
       maxPolyCount={maxPolyCount}
-      enableColors={true}
+      enableColors
       scale={2}
     >
       <MarchingCube ref={cubeRefOne!} color={new Color('#f0f')} position={[0.5, 0.6, 0.5]} />
@@ -42,7 +42,7 @@ const MarchingCubesScene = ({ resolution, maxPolyCount, planeX, planeY, planeZ }
       {planeY && <MarchingPlane planeType="y" />}
       {planeZ && <MarchingPlane planeType="z" />}
 
-      <T.MeshPhongMaterial specular={0xffffff} shininess={2} vertexColors={true} />
+      <T.MeshPhongMaterial specular={0xffffff} shininess={2} vertexColors />
     </MarchingCubes>
   )
 }
diff --git a/.storybook/stories/MeshDistortMaterial.stories.tsx b/.storybook/stories/MeshDistortMaterial.stories.tsx
index c493bec..3a55d7f 100644
--- a/.storybook/stories/MeshDistortMaterial.stories.tsx
+++ b/.storybook/stories/MeshDistortMaterial.stories.tsx
@@ -2,8 +2,8 @@ import { ThreeProps, useFrame } from 'solid-three'
 
 import { number, withKnobs } from '@storybook/addon-knobs'
 
-import { Icosahedron, MeshDistortMaterial } from '../../src'
-import { Setup } from '../Setup'
+import { Icosahedron, MeshDistortMaterial } from '../../src/index.ts'
+import { Setup } from '../Setup.tsx'
 
 export default {
   title: 'Shaders/MeshDistortMaterial',
diff --git a/.storybook/stories/MeshRefractionMaterial.stories.tsx b/.storybook/stories/MeshRefractionMaterial.stories.tsx
index 4c01749..4e8e2ad 100644
--- a/.storybook/stories/MeshRefractionMaterial.stories.tsx
+++ b/.storybook/stories/MeshRefractionMaterial.stories.tsx
@@ -12,9 +12,9 @@ import {
   OrbitControls,
   RandomizedLight,
   useGLTF,
-} from '../../src'
+} from '../../src/index.ts'
 import { all } from '../../src/helpers/when'
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 export default {
   title: 'Shaders/MeshRefractionMaterial',
@@ -115,7 +115,7 @@ export const RefractionSt = () => (
       frames={100}
       color="orange"
       colorBlend={2}
-      toneMapped={true}
+      toneMapped
       alphaTest={0.8}
       opacity={1}
       scale={12}
diff --git a/.storybook/stories/MeshWobbleMaterial.stories.tsx b/.storybook/stories/MeshWobbleMaterial.stories.tsx
index 38edbbd..b572567 100644
--- a/.storybook/stories/MeshWobbleMaterial.stories.tsx
+++ b/.storybook/stories/MeshWobbleMaterial.stories.tsx
@@ -2,8 +2,8 @@ import { ThreeProps, useFrame } from 'solid-three'
 
 import { number, withKnobs } from '@storybook/addon-knobs'
 
-import { MeshWobbleMaterial, Torus } from '../../src'
-import { Setup } from '../Setup'
+import { MeshWobbleMaterial, Torus } from '../../src/index.ts'
+import { Setup } from '../Setup.tsx'
 
 export default {
   title: 'Shaders/MeshWobbleMaterial',
diff --git a/.storybook/stories/OrbitControls.stories.tsx b/.storybook/stories/OrbitControls.stories.tsx
index 2cc66da..16b01ce 100644
--- a/.storybook/stories/OrbitControls.stories.tsx
+++ b/.storybook/stories/OrbitControls.stories.tsx
@@ -1,10 +1,10 @@
 import { T, createPortal, useFrame } from 'solid-three'
 import { Scene } from 'three'
-import { Box, OrbitControls, PerspectiveCamera, Plane, useFBO } from '../../src'
-import { Setup } from '../Setup'
+import { Box, OrbitControls, PerspectiveCamera, Plane, useFBO } from '../../src/index.ts'
+import { Setup } from '../Setup.tsx'
 
 import type { Camera } from 'three'
-import type { OrbitControlsProps } from '../../src'
+import type { OrbitControlsProps } from '../../src/index.ts'
 
 const args = {
   enableDamping: true,
diff --git a/.storybook/stories/OrthographicCamera.stories.tsx b/.storybook/stories/OrthographicCamera.stories.tsx
index a5f061c..93416c6 100644
--- a/.storybook/stories/OrthographicCamera.stories.tsx
+++ b/.storybook/stories/OrthographicCamera.stories.tsx
@@ -1,7 +1,7 @@
 import { Canvas, T } from 'solid-three'
 import { For } from 'solid-js'
 
-import { Icosahedron, OrthographicCamera } from '../../src'
+import { Icosahedron, OrthographicCamera } from '../../src/index.ts'
 
 export default {
   title: 'Camera/OrthographicCamera',
diff --git a/.storybook/stories/PerspectiveCamera.stories.tsx b/.storybook/stories/PerspectiveCamera.stories.tsx
index 8360254..a391a2e 100644
--- a/.storybook/stories/PerspectiveCamera.stories.tsx
+++ b/.storybook/stories/PerspectiveCamera.stories.tsx
@@ -1,7 +1,7 @@
 import { Canvas, T } from 'solid-three'
 import { For, createMemo } from 'solid-js'
 
-import { Icosahedron, OrbitControls, PerspectiveCamera } from '../../src'
+import { Icosahedron, OrbitControls, PerspectiveCamera } from '../../src/index.ts'
 
 export default {
   title: 'Camera/PerspectiveCamera',
diff --git a/.storybook/stories/PointerLockControls.stories.tsx b/.storybook/stories/PointerLockControls.stories.tsx
index f6a5274..79ad8f8 100644
--- a/.storybook/stories/PointerLockControls.stories.tsx
+++ b/.storybook/stories/PointerLockControls.stories.tsx
@@ -1,9 +1,9 @@
 import { For, createMemo } from 'solid-js'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
-import { Icosahedron, PointerLockControls } from '../../src'
+import { Icosahedron, PointerLockControls } from '../../src/index.ts'
 
 export default {
   title: 'Controls/PointerLockControls',
diff --git a/.storybook/stories/Points.stories.tsx b/.storybook/stories/Points.stories.tsx
index 87ccbdd..e8e307c 100644
--- a/.storybook/stories/Points.stories.tsx
+++ b/.storybook/stories/Points.stories.tsx
@@ -1,10 +1,10 @@
 import { For, createEffect, createSignal, onCleanup, splitProps } from 'solid-js'
 import { MathUtils, Quaternion, Vector3 } from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T, extend, useFrame, useThree } from 'solid-three'
-import { Point, PointMaterial, Points, shaderMaterial } from '../../src'
+import { Point, PointMaterial, Points, shaderMaterial } from '../../src/index.ts'
 
 import * as buffer from 'maath/buffer'
 import * as misc from 'maath/misc'
diff --git a/.storybook/stories/PositionalAudio.stories.tsx b/.storybook/stories/PositionalAudio.stories.tsx
index d97ee7e..9b6e858 100644
--- a/.storybook/stories/PositionalAudio.stories.tsx
+++ b/.storybook/stories/PositionalAudio.stories.tsx
@@ -2,8 +2,8 @@ import { For } from 'solid-js'
 import { Vector3 } from 'three'
 
 import { T } from 'solid-three'
-import { OrbitControls, PositionalAudio } from '../../src'
-import { Setup } from '../Setup'
+import { OrbitControls, PositionalAudio } from '../../src/index.ts'
+import { Setup } from '../Setup.tsx'
 
 export default {
   title: 'Abstractions/PositionalAudio',
diff --git a/.storybook/stories/Reflector.stories.tsx b/.storybook/stories/Reflector.stories.tsx
index ff348af..b24082d 100644
--- a/.storybook/stories/Reflector.stories.tsx
+++ b/.storybook/stories/Reflector.stories.tsx
@@ -2,9 +2,9 @@ import { T, useFrame } from 'solid-three'
 import { createEffect, createMemo } from 'solid-js'
 import { Mesh, RepeatWrapping, Vector2, Vector3 } from 'three'
 
-import { Box, Environment, MeshReflectorMaterial, TorusKnot, useTexture } from '../../src'
+import { Box, Environment, MeshReflectorMaterial, TorusKnot, useTexture } from '../../src/index.ts'
 import { when } from '../../src/helpers/when'
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 export default {
   title: 'Shaders/MeshReflectorMaterial',
diff --git a/.storybook/stories/Resize.stories.tsx b/.storybook/stories/Resize.stories.tsx
index aacf129..60d6c4a 100644
--- a/.storybook/stories/Resize.stories.tsx
+++ b/.storybook/stories/Resize.stories.tsx
@@ -1,9 +1,9 @@
 import { withKnobs } from '@storybook/addon-knobs'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
-import { Box, Resize, ResizeProps } from '../../src'
+import { Box, Resize, ResizeProps } from '../../src/index.ts'
 
 export default {
   title: 'Staging/Resize',
diff --git a/.storybook/stories/Sampler.stories.tsx b/.storybook/stories/Sampler.stories.tsx
index 10af161..a1be12f 100644
--- a/.storybook/stories/Sampler.stories.tsx
+++ b/.storybook/stories/Sampler.stories.tsx
@@ -1,8 +1,8 @@
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
 import { BufferAttribute, Vector3 } from 'three'
-import { ComputedAttribute, Sampler, TransformFn } from '../../src'
+import { ComputedAttribute, Sampler, TransformFn } from '../../src/index.ts'
 
 export default {
   title: 'Misc/Sampler',
diff --git a/.storybook/stories/ScreenQuad.stories.tsx b/.storybook/stories/ScreenQuad.stories.tsx
index 3b28164..bb7ad3d 100644
--- a/.storybook/stories/ScreenQuad.stories.tsx
+++ b/.storybook/stories/ScreenQuad.stories.tsx
@@ -1,9 +1,9 @@
 import { T, ThreeProps, extend, useFrame, useThree } from 'solid-three'
 import * as THREE from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
-import { ScreenQuad, shaderMaterial } from '../../src'
+import { ScreenQuad, shaderMaterial } from '../../src/index.ts'
 
 export default {
   title: 'Shapes/ScreenQuad',
diff --git a/.storybook/stories/ScreenSpace.stories.tsx b/.storybook/stories/ScreenSpace.stories.tsx
index e1e69ae..5fa6d76 100644
--- a/.storybook/stories/ScreenSpace.stories.tsx
+++ b/.storybook/stories/ScreenSpace.stories.tsx
@@ -1,8 +1,8 @@
 import { Vector3 } from 'three'
-import { Box, Html, OrbitControls, ScreenSpace } from '../../src'
+import { Box, Html, OrbitControls, ScreenSpace } from '../../src/index.ts'
 
 import { T } from 'solid-three'
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 export default {
   title: 'Abstractions/ScreenSpace',
@@ -23,14 +23,14 @@ export const ScreenSpaceStory = ({ depth }) => (
     </Box>
     <ScreenSpace depth={depth}>
       <Box args={[0.1, 0.1, 0.1]} position={[0.5, 0.1, 0]}>
-        <T.MeshPhysicalMaterial color={'blue'} />
+        <T.MeshPhysicalMaterial color="blue" />
         <Html center sprite>
           <div style={{ color: 'hotpink' }}>Hi i'm in screen space</div>
         </Html>
       </Box>
     </ScreenSpace>
 
-    <OrbitControls enablePan={true} zoomSpeed={0.5} />
+    <OrbitControls enablePan zoomSpeed={0.5} />
   </>
 )
 
diff --git a/.storybook/stories/ScrollControls.stories.tsx b/.storybook/stories/ScrollControls.stories.tsx
index 9798a75..00c2cc5 100644
--- a/.storybook/stories/ScrollControls.stories.tsx
+++ b/.storybook/stories/ScrollControls.stories.tsx
@@ -2,9 +2,9 @@ import { T, useFrame, useThree } from 'solid-three'
 import { createSignal } from 'solid-js'
 import * as THREE from 'three'
 
-import { Scroll, ScrollControls, useCursor, useGLTF, useIntersect } from '../../src'
+import { Scroll, ScrollControls, useCursor, useGLTF, useIntersect } from '../../src/index.ts'
 import { when } from '../../src/helpers/when'
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 export default {
   title: 'Controls/ScrollControls',
diff --git a/.storybook/stories/Segments.stories.tsx b/.storybook/stories/Segments.stories.tsx
index bea3a6c..2346e2c 100644
--- a/.storybook/stories/Segments.stories.tsx
+++ b/.storybook/stories/Segments.stories.tsx
@@ -2,9 +2,9 @@ import { useFrame } from 'solid-three'
 import { withKnobs } from '@storybook/addon-knobs'
 import { Vector3 } from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
-import { OrbitControls, Segment, SegmentObject, Segments } from '../../src'
+import { OrbitControls, Segment, SegmentObject, Segments } from '../../src/index.ts'
 
 export default {
   title: 'Performance/Segments',
@@ -15,9 +15,9 @@ export function BasicSegments() {
   return (
     <>
       <Segments limit={6} lineWidth={2.0}>
-        <Segment start={[0, 0, 0]} end={[10, 0, 0]} color={'red'} />
-        <Segment start={[0, 0, 0]} end={[0, 10, 0]} color={'blue'} />
-        <Segment start={[0, 0, 0]} end={[0, 0, 10]} color={'green'} />
+        <Segment start={[0, 0, 0]} end={[10, 0, 0]} color="red" />
+        <Segment start={[0, 0, 0]} end={[0, 10, 0]} color="blue" />
+        <Segment start={[0, 0, 0]} end={[0, 0, 10]} color="green" />
         <Segment start={[0, 0, 0]} end={[-10, 0, 0]} color={[1, 0, 0]} />
         <Segment start={[0, 0, 0]} end={[0, -10, 0]} color={[0, 1, 0]} />
         <Segment start={[0, 0, 0]} end={[0, 0, -10]} color={[1, 1, 0]} />
diff --git a/.storybook/stories/Shadow.stories.tsx b/.storybook/stories/Shadow.stories.tsx
index 3473fe1..28742ee 100644
--- a/.storybook/stories/Shadow.stories.tsx
+++ b/.storybook/stories/Shadow.stories.tsx
@@ -1,9 +1,9 @@
 import { T, useFrame } from 'solid-three'
 import { Mesh } from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
-import { Icosahedron, Plane, Shadow } from '../../src'
+import { Icosahedron, Plane, Shadow } from '../../src/index.ts'
 
 export default {
   title: 'Misc/Shadow',
diff --git a/.storybook/stories/Shapes.Extrude.stories.tsx b/.storybook/stories/Shapes.Extrude.stories.tsx
index 129d193..37dbb58 100644
--- a/.storybook/stories/Shapes.Extrude.stories.tsx
+++ b/.storybook/stories/Shapes.Extrude.stories.tsx
@@ -1,10 +1,10 @@
 import * as THREE from 'three'
 
-import { Setup } from '../Setup'
-import { useTurntable } from '../useTurntable'
+import { Setup } from '../Setup.tsx'
+import { useTurntable } from '../useTurntable.ts'
 
 import { T } from 'solid-three'
-import { Extrude } from '../../src'
+import { Extrude } from '../../src/index.ts'
 
 export default {
   title: 'Shapes/Extrude',
diff --git a/.storybook/stories/Shapes.Lathe.stories.tsx b/.storybook/stories/Shapes.Lathe.stories.tsx
index 9f61ddf..f630dc7 100644
--- a/.storybook/stories/Shapes.Lathe.stories.tsx
+++ b/.storybook/stories/Shapes.Lathe.stories.tsx
@@ -1,10 +1,10 @@
 import * as THREE from 'three'
 
-import { Setup } from '../Setup'
-import { useTurntable } from '../useTurntable'
+import { Setup } from '../Setup.tsx'
+import { useTurntable } from '../useTurntable.ts'
 
 import { T } from 'solid-three'
-import { Lathe } from '../../src'
+import { Lathe } from '../../src/index.ts'
 
 export default {
   title: 'Shapes/Lathe',
diff --git a/.storybook/stories/Shapes.RoundedBox.stories.tsx b/.storybook/stories/Shapes.RoundedBox.stories.tsx
index 0f66f17..a0c362d 100644
--- a/.storybook/stories/Shapes.RoundedBox.stories.tsx
+++ b/.storybook/stories/Shapes.RoundedBox.stories.tsx
@@ -1,11 +1,11 @@
 import { number, withKnobs } from '@storybook/addon-knobs'
 import { Vector3 } from 'three'
 
-import { Setup } from '../Setup'
-import { useTurntable } from '../useTurntable'
+import { Setup } from '../Setup.tsx'
+import { useTurntable } from '../useTurntable.ts'
 
 import { T } from 'solid-three'
-import { RoundedBox } from '../../src'
+import { RoundedBox } from '../../src/index.ts'
 
 export default {
   title: 'Shapes/RoundedBox',
diff --git a/.storybook/stories/Shapes.Tube.stories.tsx b/.storybook/stories/Shapes.Tube.stories.tsx
index e768daf..6848214 100644
--- a/.storybook/stories/Shapes.Tube.stories.tsx
+++ b/.storybook/stories/Shapes.Tube.stories.tsx
@@ -1,10 +1,10 @@
 import * as THREE from 'three'
 
-import { Setup } from '../Setup'
-import { useTurntable } from '../useTurntable'
+import { Setup } from '../Setup.tsx'
+import { useTurntable } from '../useTurntable.ts'
 
 import { T } from 'solid-three'
-import { Tube } from '../../src'
+import { Tube } from '../../src/index.ts'
 
 export default {
   title: 'Shapes/Tube',
diff --git a/.storybook/stories/Shapes.stories.tsx b/.storybook/stories/Shapes.stories.tsx
index be45b85..d70cd1d 100644
--- a/.storybook/stories/Shapes.stories.tsx
+++ b/.storybook/stories/Shapes.stories.tsx
@@ -1,9 +1,9 @@
 import { T, useFrame } from 'solid-three'
 import { Mesh } from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
-import * as shapes from '../../src/core/shapes'
+import * as shapes from '../../src/core/shapes.tsx'
 
 export default {
   title: 'Shapes',
diff --git a/.storybook/stories/Sky.stories.tsx b/.storybook/stories/Sky.stories.tsx
index ea145d1..637a458 100644
--- a/.storybook/stories/Sky.stories.tsx
+++ b/.storybook/stories/Sky.stories.tsx
@@ -2,9 +2,9 @@ import { T, useFrame } from 'solid-three'
 import { number, withKnobs } from '@storybook/addon-knobs'
 import { createSignal } from 'solid-js'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
-import { Plane, Sky } from '../../src'
+import { Plane, Sky } from '../../src/index.ts'
 
 export default {
   title: 'Staging/Sky',
diff --git a/.storybook/stories/Sparkles.stories.tsx b/.storybook/stories/Sparkles.stories.tsx
index 1ae5bc9..61ddf07 100644
--- a/.storybook/stories/Sparkles.stories.tsx
+++ b/.storybook/stories/Sparkles.stories.tsx
@@ -1,10 +1,10 @@
 import { createMemo, splitProps } from 'solid-js'
 import { Vector3 } from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
-import { OrbitControls, PerspectiveCamera, Sparkles } from '../../src'
+import { OrbitControls, PerspectiveCamera, Sparkles } from '../../src/index.ts'
 
 export default {
   title: 'Staging/Sparkles',
diff --git a/.storybook/stories/Spotlight.stories.tsx b/.storybook/stories/Spotlight.stories.tsx
index 874bf57..036bff7 100644
--- a/.storybook/stories/Spotlight.stories.tsx
+++ b/.storybook/stories/Spotlight.stories.tsx
@@ -13,9 +13,9 @@ import {
   SpotLightShadow,
   useDepthBuffer,
   useTexture,
-} from '../../src'
+} from '../../src/index.ts'
 import { when } from '../../src/helpers/when'
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 export default {
   title: 'Staging/Spotlight',
@@ -102,7 +102,7 @@ function SpotLightShadowsScene({ debug, wind }: { debug: boolean; wind: boolean
     <>
       <OrbitControls
         makeDefault //
-        autoRotate={true}
+        autoRotate
         autoRotateSpeed={0.5}
         minDistance={2}
         maxDistance={10}
@@ -133,7 +133,7 @@ function SpotLightShadowsScene({ debug, wind }: { debug: boolean; wind: boolean
         distance={20}
         intensity={5}
         angle={MathUtils.degToRad(45)}
-        color={'#fadcb9'}
+        color="#fadcb9"
         position={[5, 7, -2]}
         volumetric={false}
         debug={debug}
diff --git a/.storybook/stories/Stage.stories.tsx b/.storybook/stories/Stage.stories.tsx
index 7b58c2e..a71a4dd 100644
--- a/.storybook/stories/Stage.stories.tsx
+++ b/.storybook/stories/Stage.stories.tsx
@@ -2,9 +2,9 @@ import { number, select, withKnobs } from '@storybook/addon-knobs'
 import { Vector3 } from 'three'
 
 import { T } from 'solid-three'
-import { Sphere, Stage } from '../../src'
+import { Sphere, Stage } from '../../src/index.ts'
 import { PresetsType, presetsObj } from '../../src/helpers/environment-assets'
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 export default {
   title: 'Staging/Stage',
diff --git a/.storybook/stories/Stars.stories.tsx b/.storybook/stories/Stars.stories.tsx
index 4c4364b..c72b911 100644
--- a/.storybook/stories/Stars.stories.tsx
+++ b/.storybook/stories/Stars.stories.tsx
@@ -1,7 +1,7 @@
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
-import { Plane, Stars } from '../../src'
+import { Plane, Stars } from '../../src/index.ts'
 
 export default {
   title: 'Staging/Stars',
diff --git a/.storybook/stories/Stats.stories.tsx b/.storybook/stories/Stats.stories.tsx
index 5da5756..88bc733 100644
--- a/.storybook/stories/Stats.stories.tsx
+++ b/.storybook/stories/Stats.stories.tsx
@@ -1,7 +1,7 @@
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
-import { Stats } from '../../src'
+import { Stats } from '../../src/index.ts'
 
 export default {
   title: 'Misc/Stats',
diff --git a/.storybook/stories/StatsGl.stories.tsx b/.storybook/stories/StatsGl.stories.tsx
index dc34fb4..c97736f 100644
--- a/.storybook/stories/StatsGl.stories.tsx
+++ b/.storybook/stories/StatsGl.stories.tsx
@@ -1,7 +1,7 @@
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
-import { StatsGl } from '../../src'
+import { StatsGl } from '../../src/index.ts'
 
 export default {
   title: 'Misc/StatsGl',
diff --git a/.storybook/stories/Svg.stories.tsx b/.storybook/stories/Svg.stories.tsx
index b070d3b..05df2ec 100644
--- a/.storybook/stories/Svg.stories.tsx
+++ b/.storybook/stories/Svg.stories.tsx
@@ -3,8 +3,8 @@ import { useArgs, useEffect } from '@storybook/client-api'
 import { T } from 'solid-three'
 import { Component, splitProps } from 'solid-js'
 import { MathUtils, NoToneMapping, Vector3 } from 'three'
-import { Svg, SvgProps } from '../../src'
-import { Setup } from '../Setup'
+import { Svg, SvgProps } from '../../src/index.ts'
+import { Setup } from '../Setup.tsx'
 
 const svgRecord = {
   Tiger: 'models/svg/tiger.svg',
diff --git a/.storybook/stories/Text.stories.tsx b/.storybook/stories/Text.stories.tsx
index c491c11..33f88e4 100644
--- a/.storybook/stories/Text.stories.tsx
+++ b/.storybook/stories/Text.stories.tsx
@@ -1,11 +1,11 @@
 import { color as colorKnob, number, withKnobs } from '@storybook/addon-knobs'
 import { DoubleSide, Vector3 } from 'three'
 
-import { Setup } from '../Setup'
-import { useTurntable } from '../useTurntable'
+import { Setup } from '../Setup.tsx'
+import { useTurntable } from '../useTurntable.ts'
 
 import { T } from 'solid-three'
-import { Text } from '../../src'
+import { Text } from '../../src/index.ts'
 
 export default {
   title: 'Abstractions/Text',
@@ -23,12 +23,12 @@ function TextScene() {
     <T.Suspense fallback={null}>
       <Text
         ref={turntable}
-        color={'#EC2D2D'}
+        color="#EC2D2D"
         fontSize={12}
         maxWidth={200}
         lineHeight={1}
         letterSpacing={0.02}
-        textAlign={'left'}
+        textAlign="left"
         font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
         anchorX="center"
         anchorY="middle"
@@ -53,12 +53,12 @@ function TextOutlineScene() {
     <T.Suspense fallback={null}>
       <Text
         ref={turntable}
-        color={'#EC2D2D'}
+        color="#EC2D2D"
         fontSize={12}
         maxWidth={200}
         lineHeight={1}
         letterSpacing={0.02}
-        textAlign={'left'}
+        textAlign="left"
         font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
         anchorX="center"
         anchorY="middle"
@@ -86,12 +86,12 @@ function TextStrokeScene() {
         maxWidth={200}
         lineHeight={1}
         letterSpacing={0.02}
-        textAlign={'left'}
+        textAlign="left"
         font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
         anchorX="center"
         anchorY="middle"
         fillOpacity={0}
-        strokeWidth={'2.5%'}
+        strokeWidth="2.5%"
         strokeColor="#ffffff"
       >
         LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT
@@ -111,18 +111,18 @@ function TextShadowScene() {
     <T.Suspense fallback={null}>
       <Text
         ref={turntable}
-        color={'#EC2D2D'}
+        color="#EC2D2D"
         fontSize={12}
         maxWidth={200}
         lineHeight={1}
         letterSpacing={0.02}
-        textAlign={'left'}
+        textAlign="left"
         font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
         anchorX="center"
         anchorY="middle"
-        outlineOffsetX={'10%'}
-        outlineOffsetY={'10%'}
-        outlineBlur={'30%'}
+        outlineOffsetX="10%"
+        outlineOffsetY="10%"
+        outlineBlur="30%"
         outlineOpacity={0.3}
         outlineColor="#EC2D2D"
       >
@@ -143,13 +143,13 @@ function TextRtlScene() {
     <T.Suspense fallback={null}>
       <Text
         ref={turntable}
-        color={'#EC2D2D'}
+        color="#EC2D2D"
         fontSize={12}
         maxWidth={200}
         lineHeight={1}
         letterSpacing={0.02}
-        textAlign={'right'}
-        direction={'auto'}
+        textAlign="right"
+        direction="auto"
         font="https://fonts.gstatic.com/s/scheherazade/v20/YA9Ur0yF4ETZN60keViq1kQgtA.woff"
         anchorX="center"
         anchorY="middle"
@@ -174,7 +174,7 @@ function CustomMaterialTextScene() {
         maxWidth={200}
         lineHeight={1}
         letterSpacing={0.02}
-        textAlign={'left'}
+        textAlign="left"
         font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
         anchorX="center"
         anchorY="middle"
diff --git a/.storybook/stories/Text3D.stories.tsx b/.storybook/stories/Text3D.stories.tsx
index 9314061..d94cc4e 100644
--- a/.storybook/stories/Text3D.stories.tsx
+++ b/.storybook/stories/Text3D.stories.tsx
@@ -1,10 +1,10 @@
 import { withKnobs } from '@storybook/addon-knobs'
 import { Vector3 } from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
-import { Center, Float, Text, Text3D } from '../../src'
+import { Center, Float, Text, Text3D } from '../../src/index.ts'
 
 export default {
   title: 'Abstractions/Text3D',
@@ -21,7 +21,7 @@ function Text3DScene() {
       <T.Color args={[0, 0, 0]} attach="background" />
       <Center>
         <Float floatIntensity={5} speed={2}>
-          <Text3D font={'/fonts/helvetiker_regular.typeface.json'} bevelEnabled bevelSize={0.05}>
+          <Text3D font="/fonts/helvetiker_regular.typeface.json" bevelEnabled bevelSize={0.05}>
             Text 3D
             <T.MeshNormalMaterial />
           </Text3D>
diff --git a/.storybook/stories/TrackballControls.stories.tsx b/.storybook/stories/TrackballControls.stories.tsx
index 6b4c8a6..8b21a77 100644
--- a/.storybook/stories/TrackballControls.stories.tsx
+++ b/.storybook/stories/TrackballControls.stories.tsx
@@ -1,10 +1,10 @@
 import { For, createMemo } from 'solid-js'
 import { Vector3 } from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
-import { Icosahedron, TrackballControls } from '../../src'
+import { Icosahedron, TrackballControls } from '../../src/index.ts'
 
 export default {
   title: 'Controls/TrackballControls',
diff --git a/.storybook/stories/Trail.stories.tsx b/.storybook/stories/Trail.stories.tsx
index 75a255f..f6d45e0 100644
--- a/.storybook/stories/Trail.stories.tsx
+++ b/.storybook/stories/Trail.stories.tsx
@@ -1,10 +1,10 @@
 import { createSignal } from 'solid-js'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T, useFrame } from 'solid-three'
 import { Group, InstancedMesh, Mesh, Object3D, Vector3 } from 'three'
-import { Float, Sphere, Trail, useTrail } from '../../src'
+import { Float, Sphere, Trail, useTrail } from '../../src/index.ts'
 
 export default {
   title: 'Misc/Trail',
@@ -29,7 +29,7 @@ function TrailScene() {
         <Trail
           width={1}
           length={4}
-          color={'#F8D628'}
+          color="#F8D628"
           attenuation={(t: number) => {
             return t * t
           }}
@@ -112,7 +112,7 @@ function UseTrailFloat() {
       <Trail
         width={1}
         length={4}
-        color={'#F8D628'}
+        color="#F8D628"
         attenuation={(t: number) => {
           return t * t
         }}
diff --git a/.storybook/stories/TransformControls.stories.tsx b/.storybook/stories/TransformControls.stories.tsx
index 8d3795c..3d6ace2 100644
--- a/.storybook/stories/TransformControls.stories.tsx
+++ b/.storybook/stories/TransformControls.stories.tsx
@@ -6,10 +6,10 @@ import {
   TransformControls as TransformControlsImpl,
 } from 'three-stdlib'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
-import { Box, OrbitControls, Select, TransformControls } from '../../src'
+import { Box, OrbitControls, Select, TransformControls } from '../../src/index.ts'
 
 export function TransformControlsStory() {
   let ref: TransformControlsImpl
diff --git a/.storybook/stories/Wireframe.stories.tsx b/.storybook/stories/Wireframe.stories.tsx
index 9a64e18..ed9faca 100644
--- a/.storybook/stories/Wireframe.stories.tsx
+++ b/.storybook/stories/Wireframe.stories.tsx
@@ -2,8 +2,8 @@ import { withKnobs } from '@storybook/addon-knobs'
 import { IcosahedronGeometry, Vector3 } from 'three'
 
 import { T } from 'solid-three'
-import { Environment, Wireframe } from '../../src'
-import { Setup } from '../Setup'
+import { Environment, Wireframe } from '../../src/index.ts'
+import { Setup } from '../Setup.tsx'
 
 export default {
   title: 'Staging/Wireframe',
diff --git a/.storybook/stories/meshBounds.stories.tsx b/.storybook/stories/meshBounds.stories.tsx
index 1fc0496..0b63eea 100644
--- a/.storybook/stories/meshBounds.stories.tsx
+++ b/.storybook/stories/meshBounds.stories.tsx
@@ -1,11 +1,11 @@
 import { createSignal } from 'solid-js'
 import { Vector3 } from 'three'
 
-import { Setup } from '../Setup'
-import { useTurntable } from '../useTurntable'
+import { Setup } from '../Setup.tsx'
+import { useTurntable } from '../useTurntable.ts'
 
 import { T } from 'solid-three'
-import { meshBounds } from '../../src'
+import { meshBounds } from '../../src/index.ts'
 
 export default {
   title: 'Misc/meshBounds',
diff --git a/.storybook/stories/shaderMaterial.stories.tsx b/.storybook/stories/shaderMaterial.stories.tsx
index ce0d841..adedf0a 100644
--- a/.storybook/stories/shaderMaterial.stories.tsx
+++ b/.storybook/stories/shaderMaterial.stories.tsx
@@ -3,8 +3,8 @@ import { Texture } from 'three'
 
 import { number, withKnobs } from '@storybook/addon-knobs'
 
-import { Box, MeshDistortMaterial, shaderMaterial, useTexture } from '../../src'
-import { Setup } from '../Setup'
+import { Box, MeshDistortMaterial, shaderMaterial, useTexture } from '../../src/index.ts'
+import { Setup } from '../Setup.tsx'
 
 export default {
   title: 'Shaders/shaderMaterial',
diff --git a/.storybook/stories/useAnimations.stories.tsx b/.storybook/stories/useAnimations.stories.tsx
index 963ff49..0608481 100644
--- a/.storybook/stories/useAnimations.stories.tsx
+++ b/.storybook/stories/useAnimations.stories.tsx
@@ -3,10 +3,10 @@ import { Resource, Show, createEffect, createSignal } from 'solid-js'
 import { Vector3 } from 'three'
 import { GLTF } from 'three-stdlib'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { Primitive, T, ThreeProps } from 'solid-three'
-import { useAnimations, useGLTF, useMatcapTexture } from '../../src'
+import { useAnimations, useGLTF, useMatcapTexture } from '../../src/index.ts'
 
 export default {
   title: 'Abstractions/useAnimations',
diff --git a/.storybook/stories/useAspect.stories.tsx b/.storybook/stories/useAspect.stories.tsx
index 2c88ce2..5724658 100644
--- a/.storybook/stories/useAspect.stories.tsx
+++ b/.storybook/stories/useAspect.stories.tsx
@@ -1,9 +1,9 @@
 import { T, useLoader } from 'solid-three'
 import { TextureLoader, Vector3 } from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
-import { Plane, useAspect } from '../../src'
+import { Plane, useAspect } from '../../src/index.ts'
 
 export default {
   title: 'Misc/useAspect',
diff --git a/.storybook/stories/useBVH.stories.tsx b/.storybook/stories/useBVH.stories.tsx
index 9f9e1ca..cfb7110 100644
--- a/.storybook/stories/useBVH.stories.tsx
+++ b/.storybook/stories/useBVH.stories.tsx
@@ -1,12 +1,12 @@
 import { For, createEffect, createSignal } from 'solid-js'
 
 import { MeshBVHVisualizer } from 'three-mesh-bvh'
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T, useFrame, useThree } from 'solid-three'
 import { boolean, select, withKnobs } from '@storybook/addon-knobs'
 import { Mesh, Raycaster, Vector3 } from 'three'
-import { OrbitControls, TorusKnot, useBVH, useHelper } from '../../src'
+import { OrbitControls, TorusKnot, useBVH, useHelper } from '../../src/index.ts'
 
 export default {
   title: 'Performance/useBVH',
diff --git a/.storybook/stories/useCamera.stories.tsx b/.storybook/stories/useCamera.stories.tsx
index 538f4a2..baa3cd8 100644
--- a/.storybook/stories/useCamera.stories.tsx
+++ b/.storybook/stories/useCamera.stories.tsx
@@ -2,9 +2,9 @@ import { Portal, T, useFrame, useThree } from 'solid-three'
 import { For, createMemo, createSignal } from 'solid-js'
 import * as THREE from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
-import { OrthographicCamera, useCamera } from '../../src'
+import { OrthographicCamera, useCamera } from '../../src/index.ts'
 
 export default {
   title: 'Misc/useCamera',
diff --git a/.storybook/stories/useCubeCamera.stories.tsx b/.storybook/stories/useCubeCamera.stories.tsx
index 841aa6f..c53021f 100644
--- a/.storybook/stories/useCubeCamera.stories.tsx
+++ b/.storybook/stories/useCubeCamera.stories.tsx
@@ -1,10 +1,10 @@
 import { Primitive, T, useFrame } from 'solid-three'
 import * as THREE from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { Show, createSignal } from 'solid-js'
-import { Box, useCubeCamera } from '../../src'
+import { Box, useCubeCamera } from '../../src/index.ts'
 import { processProps } from '../../src/helpers/processProps'
 
 export default {
diff --git a/.storybook/stories/useCubeTexture.stories.tsx b/.storybook/stories/useCubeTexture.stories.tsx
index b4897ad..2d879ca 100644
--- a/.storybook/stories/useCubeTexture.stories.tsx
+++ b/.storybook/stories/useCubeTexture.stories.tsx
@@ -1,7 +1,7 @@
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
-import { Icosahedron, useCubeTexture } from '../../src'
+import { Icosahedron, useCubeTexture } from '../../src/index.ts'
 
 export default {
   title: 'Loaders/CubeTexture',
diff --git a/.storybook/stories/useDetectGPU.stories.tsx b/.storybook/stories/useDetectGPU.stories.tsx
index 1c3f36c..2426518 100644
--- a/.storybook/stories/useDetectGPU.stories.tsx
+++ b/.storybook/stories/useDetectGPU.stories.tsx
@@ -1,10 +1,10 @@
 import { Vector3 } from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
 import { Show } from 'solid-js'
-import { Text, useDetectGPU } from '../../src'
+import { Text, useDetectGPU } from '../../src/index.ts'
 
 export default {
   title: 'Misc/useDetectGPU',
diff --git a/.storybook/stories/useFBO.stories.tsx b/.storybook/stories/useFBO.stories.tsx
index a32d6c4..9a0ad9c 100644
--- a/.storybook/stories/useFBO.stories.tsx
+++ b/.storybook/stories/useFBO.stories.tsx
@@ -2,9 +2,9 @@ import { Portal, T, useFrame } from 'solid-three'
 import { createMemo } from 'solid-js'
 import * as THREE from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
-import { Box, PerspectiveCamera, TorusKnot, useFBO } from '../../src'
+import { Box, PerspectiveCamera, TorusKnot, useFBO } from '../../src/index.ts'
 
 export default {
   title: 'Misc/useFBO',
diff --git a/.storybook/stories/useFBX.stories.tsx b/.storybook/stories/useFBX.stories.tsx
index 2baaa53..d5c4a08 100644
--- a/.storybook/stories/useFBX.stories.tsx
+++ b/.storybook/stories/useFBX.stories.tsx
@@ -1,8 +1,8 @@
 import { Vector3 } from 'three'
 
 import { T } from 'solid-three'
-import { useCubeTexture, useFBX } from '../../src'
-import { Setup } from '../Setup'
+import { useCubeTexture, useFBX } from '../../src/index.ts'
+import { Setup } from '../Setup.tsx'
 
 export default {
   title: 'Loaders/FBX',
diff --git a/.storybook/stories/useGLTF.stories.tsx b/.storybook/stories/useGLTF.stories.tsx
index f9caa8c..c100145 100644
--- a/.storybook/stories/useGLTF.stories.tsx
+++ b/.storybook/stories/useGLTF.stories.tsx
@@ -1,11 +1,11 @@
 import { Vector3 } from 'three'
 import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
 import { Accessor } from 'solid-js'
-import { useGLTF } from '../../src'
+import { useGLTF } from '../../src/index.ts'
 
 export default {
   title: 'Loaders/GLTF',
diff --git a/.storybook/stories/useHelper.stories.tsx b/.storybook/stories/useHelper.stories.tsx
index b7a1cb5..82c5e4b 100644
--- a/.storybook/stories/useHelper.stories.tsx
+++ b/.storybook/stories/useHelper.stories.tsx
@@ -1,11 +1,11 @@
 import { BoxHelper, Camera, CameraHelper } from 'three'
 import { VertexNormalsHelper } from 'three-stdlib'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T, useFrame } from 'solid-three'
 import { Component, createSignal } from 'solid-js'
-import { PerspectiveCamera, Sphere, useHelper } from '../../src'
+import { PerspectiveCamera, Sphere, useHelper } from '../../src/index.ts'
 import { when } from '../../src/helpers/when'
 
 export default {
diff --git a/.storybook/stories/useKTX2.stories.tsx b/.storybook/stories/useKTX2.stories.tsx
index 7558fb2..c5cc56f 100644
--- a/.storybook/stories/useKTX2.stories.tsx
+++ b/.storybook/stories/useKTX2.stories.tsx
@@ -1,7 +1,7 @@
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
-import { Box, useKTX2 } from '../../src'
+import { Box, useKTX2 } from '../../src/index.ts'
 
 export default {
   title: 'Loaders/KTX2',
diff --git a/.storybook/stories/useMatcapTexture.stories.tsx b/.storybook/stories/useMatcapTexture.stories.tsx
index bbf2e57..b046117 100644
--- a/.storybook/stories/useMatcapTexture.stories.tsx
+++ b/.storybook/stories/useMatcapTexture.stories.tsx
@@ -1,10 +1,10 @@
 import { number, withKnobs } from '@storybook/addon-knobs'
 import { Vector3 } from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
-import { useGLTF, useMatcapTexture } from '../../src'
+import { useGLTF, useMatcapTexture } from '../../src/index.ts'
 
 export default {
   title: 'Staging/useMatcapTexture',
diff --git a/.storybook/stories/useNormalTexture.stories.tsx b/.storybook/stories/useNormalTexture.stories.tsx
index 87c0e5f..384b472 100644
--- a/.storybook/stories/useNormalTexture.stories.tsx
+++ b/.storybook/stories/useNormalTexture.stories.tsx
@@ -2,8 +2,8 @@ import { number, withKnobs } from '@storybook/addon-knobs'
 import { Vector2, Vector3 } from 'three'
 
 import { T } from 'solid-three'
-import { useGLTF, useNormalTexture } from '../../src'
-import { Setup } from '../Setup'
+import { useGLTF, useNormalTexture } from '../../src/index.ts'
+import { Setup } from '../Setup.tsx'
 
 export default {
   title: 'Staging/useNormalTexture',
diff --git a/.storybook/stories/useProgress.stories.tsx b/.storybook/stories/useProgress.stories.tsx
index df7aa8a..4ff93dc 100644
--- a/.storybook/stories/useProgress.stories.tsx
+++ b/.storybook/stories/useProgress.stories.tsx
@@ -1,10 +1,10 @@
 import { Vector3 } from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { Primitive, T } from 'solid-three'
 import { boolean, withKnobs } from '@storybook/addon-knobs'
-import { Environment, Html, Loader, useGLTF, useProgress } from '../../src'
+import { Environment, Html, Loader, useGLTF, useProgress } from '../../src/index.ts'
 
 export default {
   title: 'Misc/useProgress',
@@ -43,7 +43,7 @@ function CustomLoader() {
 function LoadExtras() {
   return (
     <T.Suspense fallback={<CustomLoader />}>
-      <Environment preset={'studio'} />
+      <Environment preset="studio" />
       <Shoe />
     </T.Suspense>
   )
diff --git a/.storybook/stories/useTexture.stories.tsx b/.storybook/stories/useTexture.stories.tsx
index f2d405d..c0cd10a 100644
--- a/.storybook/stories/useTexture.stories.tsx
+++ b/.storybook/stories/useTexture.stories.tsx
@@ -1,7 +1,7 @@
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
-import { Icosahedron, useTexture } from '../../src'
+import { Icosahedron, useTexture } from '../../src/index.ts'
 
 export default {
   title: 'Loaders/Texture',
diff --git a/.storybook/stories/useTrailTexture.stories.tsx b/.storybook/stories/useTrailTexture.stories.tsx
index bf1ce84..b7c839d 100644
--- a/.storybook/stories/useTrailTexture.stories.tsx
+++ b/.storybook/stories/useTrailTexture.stories.tsx
@@ -1,9 +1,9 @@
 import { number, withKnobs } from '@storybook/addon-knobs'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
-import { useTrailTexture } from '../../src'
+import { useTrailTexture } from '../../src/index.ts'
 
 export default {
   title: 'misc/useTrailTexture',
diff --git a/.storybook/stories/useVideoTexture.stories.tsx b/.storybook/stories/useVideoTexture.stories.tsx
index 7a1ac64..37908b1 100644
--- a/.storybook/stories/useVideoTexture.stories.tsx
+++ b/.storybook/stories/useVideoTexture.stories.tsx
@@ -1,10 +1,10 @@
 import * as THREE from 'three'
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
 import { createSignal } from 'solid-js'
-import { Plane, useTexture, useVideoTexture } from '../../src'
+import { Plane, useTexture, useVideoTexture } from '../../src/index.ts'
 
 export default {
   title: 'Misc/useVideoTexture',
diff --git a/.storybook/stories_broken/FaceControls.stories.tsx b/.storybook/stories_broken/FaceControls.stories.tsx
index f75736b..8431961 100644
--- a/.storybook/stories_broken/FaceControls.stories.tsx
+++ b/.storybook/stories_broken/FaceControls.stories.tsx
@@ -1,10 +1,10 @@
 /* eslint react-hooks/exhaustive-deps: 1 */
 
-import { Setup } from '../Setup'
+import { Setup } from '../Setup.tsx'
 
 import { T } from 'solid-three'
 import { Suspense } from 'solid-js'
-import { Box, FaceControls, FaceLandmarker } from '../../src'
+import { Box, FaceControls, FaceLandmarker } from '../../src/index.ts'
 
 export default {
   title: 'Controls/FaceControls',
diff --git a/.storybook/stories_broken/useContextBridge.stories.tsx b/.storybook/stories_broken/useContextBridge.stories.tsx
index 02217d8..c968768 100644
--- a/.storybook/stories_broken/useContextBridge.stories.tsx
+++ b/.storybook/stories_broken/useContextBridge.stories.tsx
@@ -2,7 +2,7 @@ import { Canvas } from 'solid-three'
 import { withKnobs } from '@storybook/addon-knobs'
 import { Suspense, createContext, createSignal, useContext } from 'solid-js'
 
-import { Box, OrbitControls, Text, useContextBridge } from '../../src'
+import { Box, OrbitControls, Text, useContextBridge } from '../../src/index.ts'
 
 export default {
   title: 'Misc/useContextBridge',
diff --git a/package.json b/package.json
index aafe0ca..3d7ff49 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
   },
   "peerDependencies": {
     "solid-js": "^1.8.17",
-    "solid-three": "0.3.0-next.0",
+    "solid-three": "0.3.0-next.1",
     "three": "^0.164.1",
     "three-stdlib": "^2.30.1"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c3376a7..93a2309 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,8 +15,8 @@ importers:
         specifier: ^5.0.39
         version: 5.0.39
       solid-three:
-        specifier: 0.3.0-next.0
-        version: 0.3.0-next.0(@types/three@0.164.1)(solid-js@1.8.18)(three@0.164.1)
+        specifier: 0.3.0-next.1
+        version: 0.3.0-next.1(@types/three@0.164.1)(solid-js@1.8.18)(three@0.164.1)
       three-stdlib:
         specifier: ^2.30.1
         version: 2.30.4(three@0.164.1)
@@ -1819,8 +1819,8 @@ packages:
     peerDependencies:
       solid-js: ^1.3
 
-  solid-three@0.3.0-next.0:
-    resolution: {integrity: sha512-/Y2ajwkcr9hFqy9lBAqsozv/J3zJ9d22zTcnMgH9WhyOgCnJe2J/MN8U3km8EeMO7UtW6iZT4GmS7472YVgoNg==}
+  solid-three@0.3.0-next.1:
+    resolution: {integrity: sha512-F7jlYCWfMBbT/laUMlU+VubJbacc8TZo1vRtJCiFlue1NX3+SKBMAK2uGyRVEZjFU6WSY2xgqGpj+SPZq6eXjA==}
     peerDependencies:
       '@types/three': '*'
       solid-js: '*'
@@ -3928,7 +3928,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  solid-three@0.3.0-next.0(@types/three@0.164.1)(solid-js@1.8.18)(three@0.164.1):
+  solid-three@0.3.0-next.1(@types/three@0.164.1)(solid-js@1.8.18)(three@0.164.1):
     dependencies:
       '@solid-primitives/resize-observer': 2.1.3(solid-js@1.8.18)
       '@types/three': 0.164.1
diff --git a/rollup.config.js b/rollup.config.js
index 69ce741..bdacf1d 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -5,6 +5,7 @@ import path from 'path'
 import glslify from 'rollup-plugin-glslify'
 import multiInput from 'rollup-plugin-multi-input'
 import { terser } from 'rollup-plugin-terser'
+import process from "node:process";
 
 const root = process.platform === 'win32' ? path.resolve('/') : '/'
 const external = (id) => !id.startsWith('.') && !id.startsWith(root)
diff --git a/src/core/ArcballControls.tsx b/src/core/ArcballControls.tsx
index d7405da..c439fd2 100644
--- a/src/core/ArcballControls.tsx
+++ b/src/core/ArcballControls.tsx
@@ -1,4 +1,4 @@
-import { ControlUtils } from '@/core/control-utils'
+import { ControlUtils } from './control-utils.ts'
 import { Ref, createMemo, splitProps } from 'solid-js'
 import { S3, T, useThree } from 'solid-three'
 import type { Event, OrthographicCamera, PerspectiveCamera } from 'three'
diff --git a/src/core/Billboard.tsx b/src/core/Billboard.tsx
index 2a2d678..f1ea1b1 100644
--- a/src/core/Billboard.tsx
+++ b/src/core/Billboard.tsx
@@ -1,7 +1,7 @@
-import { Ref, createEffect } from 'solid-js'
+import { type Ref, createEffect } from 'solid-js'
 import { S3, T, useFrame } from 'solid-three'
 import { Group } from 'three'
-import { processProps } from '../utils/process-props'
+import { processProps } from '../utils/process-props.ts'
 
 export interface BillboardProps extends S3.Props<'Group'> {
   ref?: Ref<Group>
diff --git a/src/core/CameraControls.tsx b/src/core/CameraControls.tsx
index f0a65e7..e4f2e88 100644
--- a/src/core/CameraControls.tsx
+++ b/src/core/CameraControls.tsx
@@ -16,7 +16,7 @@ import {
   Vector3,
   Vector4,
 } from 'three'
-import { ControlUtils } from './control-utils'
+import { ControlUtils } from './control-utils.ts'
 
 export type CameraControls = ThreeCameraControls
 
diff --git a/src/core/CatmullRomLine.tsx b/src/core/CatmullRomLine.tsx
index c4e335c..3a261a1 100644
--- a/src/core/CatmullRomLine.tsx
+++ b/src/core/CatmullRomLine.tsx
@@ -1,8 +1,8 @@
 import { createMemo } from 'solid-js'
 import { CatmullRomCurve3, Color, Vector3 } from 'three'
 import { Line2 } from 'three-stdlib'
-import { processProps } from '../utils/process-props'
-import { Line, LineProps } from './Line'
+import { processProps } from '../utils/process-props.ts'
+import { Line, LineProps } from './Line.tsx'
 
 interface Props extends Omit<LineProps, 'ref' | 'segments'> {
   ref: Line2
diff --git a/src/core/Caustics.tsx b/src/core/Caustics.tsx
index 067df34..50c692c 100644
--- a/src/core/Caustics.tsx
+++ b/src/core/Caustics.tsx
@@ -31,11 +31,11 @@ import {
   Vector3,
 } from 'three'
 import { FullScreenQuad } from 'three-stdlib'
-import { shaderMaterial } from '../../materials/shaderMaterial'
-import { processProps } from '../../utils/process-props'
-import { Edges } from '../Edges'
-import { useFBO } from '../unported/useFBO'
-import { useHelper } from '../useHelper'
+import { shaderMaterial } from '../materials/shaderMaterial.ts'
+import { processProps } from '../utils/process-props.ts'
+import { Edges } from '../core/Edges.tsx'
+import { useFBO } from '../core/unported/useFBO.tsx'
+import { useHelper } from '../core/useHelper.tsx'
 
 declare global {
   namespace SolidThree {
diff --git a/src/core/Center.tsx b/src/core/Center.tsx
index 8042ca8..c582ed5 100644
--- a/src/core/Center.tsx
+++ b/src/core/Center.tsx
@@ -1,7 +1,7 @@
 import { Ref, createEffect } from 'solid-js'
 import { S3, T } from 'solid-three'
 import { Box3, Group, Object3D, Sphere, Vector3 } from 'three'
-import { processProps } from '../utils/process-props'
+import { processProps } from '../utils/process-props.ts'
 
 export interface OnCenterCallbackProps {
   /** The next parent above <Center> */
diff --git a/src/core/Cloud.tsx b/src/core/Cloud.tsx
index 591c8cd..fe72e88 100644
--- a/src/core/Cloud.tsx
+++ b/src/core/Cloud.tsx
@@ -1,10 +1,10 @@
 import { For, createMemo } from 'solid-js'
 import { S3, T, useFrame } from 'solid-three'
 import { ColorRepresentation, Group } from 'three'
-import { processProps } from '../../utils/process-props'
-import { Billboard } from '../Billboard'
-import { Plane } from '../shapes'
-import { useTexture } from '../useTexture'
+import { processProps } from '../utils/process-props.ts'
+import { Billboard } from './Billboard.tsx'
+import { Plane } from './shapes.tsx'
+import { useTexture } from './useTexture.tsx'
 
 const CLOUD_URL =
   'https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png'
diff --git a/src/core/ContactShadows.tsx b/src/core/ContactShadows.tsx
index 8e7f511..8a9ecc0 100644
--- a/src/core/ContactShadows.tsx
+++ b/src/core/ContactShadows.tsx
@@ -5,7 +5,7 @@ import { Ref, createEffect, createMemo } from 'solid-js'
 import { S3, T, useFrame, useThree } from 'solid-three'
 import * as THREE from 'three'
 import { HorizontalBlurShader, VerticalBlurShader } from 'three-stdlib'
-import { processProps } from '../utils/process-props'
+import { processProps } from '../utils/process-props.ts'
 
 function transform(value: number, scale: [number, number] | number | undefined) {
   return value * (Array.isArray(scale) ? scale[1] : scale ?? 1)
diff --git a/src/core/CubeCamera.tsx b/src/core/CubeCamera.tsx
index beadf94..6255b55 100644
--- a/src/core/CubeCamera.tsx
+++ b/src/core/CubeCamera.tsx
@@ -1,8 +1,8 @@
 import { JSX } from 'solid-js'
 import { S3, T, useFrame } from 'solid-three'
 import { Group, Texture } from 'three'
-import { processProps } from '../utils/process-props'
-import { CubeCameraOptions, useCubeCamera } from './useCubeCamera'
+import { processProps } from '../utils/process-props.ts'
+import { CubeCameraOptions, useCubeCamera } from './useCubeCamera.tsx'
 
 type CameraPropsBase = Omit<S3.Props<'Group'>, 'children'> & CubeCameraOptions
 interface CameraProps extends CameraPropsBase {
diff --git a/src/core/CubicBezierLine.tsx b/src/core/CubicBezierLine.tsx
index b6276c0..51c169a 100644
--- a/src/core/CubicBezierLine.tsx
+++ b/src/core/CubicBezierLine.tsx
@@ -1,8 +1,8 @@
 import { createMemo } from 'solid-js'
 import { CubicBezierCurve3, Vector3 } from 'three'
 import { Line2 } from 'three-stdlib'
-import { processProps } from '../utils/process-props'
-import { Line, LineProps } from './Line'
+import { processProps } from '../utils/process-props.ts'
+import { Line, LineProps } from './Line.tsx'
 
 interface Props extends Omit<LineProps, 'points' | 'ref' | 'segments'> {
   ref: Line2
diff --git a/src/core/Detailed.tsx b/src/core/Detailed.tsx
index f3e8c1b..5899470 100644
--- a/src/core/Detailed.tsx
+++ b/src/core/Detailed.tsx
@@ -1,7 +1,7 @@
 import { Ref, createEffect } from 'solid-js'
 import { S3, T, useFrame } from 'solid-three'
 import { LOD } from 'three'
-import { processProps } from '../utils/process-props'
+import { processProps } from '../utils/process-props.ts'
 
 interface DetailedProps extends S3.Props<'LOD'> {
   ref?: Ref<LOD>
diff --git a/src/core/Edges.tsx b/src/core/Edges.tsx
index 126acc3..d291d36 100644
--- a/src/core/Edges.tsx
+++ b/src/core/Edges.tsx
@@ -1,7 +1,7 @@
 import { Ref, createEffect } from 'solid-js'
 import { S3, T } from 'solid-three'
 import { EdgesGeometry, LineSegments, Mesh } from 'three'
-import { processProps } from '../utils/process-props'
+import { processProps } from '../utils/process-props.ts'
 
 interface EdgesProps extends S3.Props<'LineSegments'> {
   ref?: Ref<LineSegments>
diff --git a/src/core/Float.tsx b/src/core/Float.tsx
index 28c8cce..f215cf9 100644
--- a/src/core/Float.tsx
+++ b/src/core/Float.tsx
@@ -1,7 +1,7 @@
 import { createEffect, type JSX, type Ref } from 'solid-js'
 import { S3, T, useFrame } from 'solid-three'
 import { Group, MathUtils } from 'three'
-import { processProps } from '../../utils/process-props'
+import { processProps } from '../utils/process-props.ts'
 
 export interface FloatProps extends Omit<S3.Props<'Group'>, 'children'> {
   ref?: Ref<Group>
diff --git a/src/core/FlyControls.tsx b/src/core/FlyControls.tsx
index 81b8a85..d39325d 100644
--- a/src/core/FlyControls.tsx
+++ b/src/core/FlyControls.tsx
@@ -1,4 +1,4 @@
-import controlUtils from '@/core/control-utils'
+import { ControlUtils } from '../core/control-utils.ts'
 import { Ref, createEffect, createMemo, splitProps } from 'solid-js'
 import { S3, T, useThree } from 'solid-three'
 import { Event } from 'three'
@@ -18,11 +18,11 @@ export function FlyControls(props: FlyControlsProps) {
   const element = () => config.domElement /* || store.events.connected */ || store.gl.domElement
   const controls = createMemo(() => new ThreeFlyControls(store.camera, element()))
 
-  controlUtils.initialize(controls, element, store, config)
+  ControlUtils.initialize(controls, element, store, config)
 
   createEffect(() => {
     if (!config.onChange) return
-    controlUtils.addEventHandler(controls, 'change', config.onChange)
+    ControlUtils.addEventHandler(controls, 'change', config.onChange)
   })
 
   return <T.Primitive ref={props.ref} object={controls()} {...rest} />
diff --git a/src/core/GizmoHelper.tsx b/src/core/GizmoHelper.tsx
index 34b6ea0..558fed0 100644
--- a/src/core/GizmoHelper.tsx
+++ b/src/core/GizmoHelper.tsx
@@ -10,8 +10,8 @@ import {
   Vector3,
 } from 'three'
 import { OrbitControls as OrbitControlsType } from 'three-stdlib'
-import { OrthographicCamera } from './OrthographicCamera'
-import { Hud } from './missing-api/Hud'
+import { OrthographicCamera } from './OrthographicCamera.tsx'
+import { Hud } from './missing-api/Hud.tsx'
 
 /**********************************************************************************/
 /*                                                                                */
diff --git a/src/core/Gltf.tsx b/src/core/Gltf.tsx
index 2780009..6c8d9e6 100644
--- a/src/core/Gltf.tsx
+++ b/src/core/Gltf.tsx
@@ -1,7 +1,7 @@
 import { JSX, Ref, Show, splitProps } from 'solid-js'
 import { S3, T } from 'solid-three'
 import * as THREE from 'three'
-import { useGLTF } from './useGLTF'
+import { useGLTF } from './useGLTF.tsx'
 
 interface GltfProps extends S3.Props<'Group'> {
   ref: Ref<THREE.Group>
diff --git a/src/core/GradientTexture.tsx b/src/core/GradientTexture.tsx
index dc1b491..53b477e 100644
--- a/src/core/GradientTexture.tsx
+++ b/src/core/GradientTexture.tsx
@@ -1,6 +1,6 @@
 import { createMemo } from 'solid-js'
 import { S3, T, useThree } from 'solid-three'
-import { processProps } from '../utils/process-props'
+import { processProps } from '../utils/process-props.ts'
 
 interface GradientTextureProps extends Omit<S3.Props<'Texture'>, 'type'> {
   stops: Array<number>
diff --git a/src/core/Grid.tsx b/src/core/Grid.tsx
index 3f4b552..7d02f39 100644
--- a/src/core/Grid.tsx
+++ b/src/core/Grid.tsx
@@ -17,8 +17,8 @@ import {
   Uniform,
   Vector3,
 } from 'three'
-import { shaderMaterial } from '../materials/shaderMaterial'
-import { processProps } from '../utils/process-props'
+import { shaderMaterial } from '../materials/shaderMaterial.ts'
+import { processProps } from '../utils/process-props.ts'
 
 export interface GridMaterialType {
   /** Cell size, default: 0.5 */
diff --git a/src/core/Image.tsx b/src/core/Image.tsx
index 6a6c9fb..aa9cfcb 100644
--- a/src/core/Image.tsx
+++ b/src/core/Image.tsx
@@ -1,9 +1,9 @@
 import { Ref, Show, splitProps } from 'solid-js'
 import { S3, T, extend } from 'solid-three'
 import { Color, Mesh, Texture } from 'three'
-import { shaderMaterial } from '../materials/shaderMaterial'
-import { processProps } from '../utils/process-props'
-import { useTexture } from './useTexture'
+import { shaderMaterial } from '../materials/shaderMaterial.ts'
+import { processProps } from '../utils/process-props.ts'
+import { useTexture } from './useTexture.tsx'
 
 interface ImagePropsBase extends Omit<S3.Props<'Mesh'>, 'scale'> {
   ref?: Ref<Mesh>
diff --git a/src/core/Line.tsx b/src/core/Line.tsx
index dd1d950..9eae1f4 100644
--- a/src/core/Line.tsx
+++ b/src/core/Line.tsx
@@ -9,8 +9,8 @@ import {
   LineSegments2,
   LineSegmentsGeometry,
 } from 'three-stdlib'
-import { every, whenever } from '../utils/conditionals'
-import { processProps } from '../utils/process-props'
+import { every, whenever } from '../utils/conditionals.ts'
+import { processProps } from '../utils/process-props.ts'
 
 type LinePropsBase = Omit<LineMaterialParameters, 'vertexColors' | 'color'> &
   Omit<S3.ClassProps<Line2>, 'args'> &
diff --git a/src/core/MeshDiscardMaterial.tsx b/src/core/MeshDiscardMaterial.tsx
index e7fbc77..c9eebe7 100644
--- a/src/core/MeshDiscardMaterial.tsx
+++ b/src/core/MeshDiscardMaterial.tsx
@@ -1,7 +1,7 @@
 import { Ref } from 'solid-js'
 import { extend, S3, T } from 'solid-three'
 import { ShaderMaterial } from 'three'
-import { DiscardMaterial as DiscardMaterialImpl } from '../materials/DiscardMaterial'
+import { DiscardMaterial as DiscardMaterialImpl } from '../materials/DiscardMaterial.tsx'
 
 declare global {
   namespace SolidThree {
diff --git a/src/core/MeshDistortMaterial.tsx b/src/core/MeshDistortMaterial.tsx
index 0cf5d97..de4ff8e 100644
--- a/src/core/MeshDistortMaterial.tsx
+++ b/src/core/MeshDistortMaterial.tsx
@@ -3,8 +3,8 @@ import { S3, T, useFrame } from 'solid-three'
 import { MeshPhysicalMaterial, MeshPhysicalMaterialParameters } from 'three'
 // eslint-disable-next-line
 // @ts-ignore
-import distort from '../../utils/glsl/distort.vert.glsl'
-import { processProps } from '../../utils/process-props'
+import distort from '../utils/glsl/distort.vert.glsl'
+import { processProps } from '../utils/process-props.ts'
 
 interface DistortMaterialType extends S3.Props<'MeshPhysicalMaterial'> {
   time?: number
diff --git a/src/core/MeshReflectorMaterial.tsx b/src/core/MeshReflectorMaterial.tsx
index 26795fc..15b0270 100644
--- a/src/core/MeshReflectorMaterial.tsx
+++ b/src/core/MeshReflectorMaterial.tsx
@@ -14,12 +14,12 @@ import {
   Vector4,
   WebGLRenderTarget,
 } from 'three'
-import { BlurPass } from '../materials/BlurPass'
+import { BlurPass } from '../materials/BlurPass.tsx'
 import {
   MeshReflectorMaterial as MeshReflectorMaterialImpl,
   MeshReflectorMaterialProps as MeshReflectorMaterialImplProps,
-} from '../materials/MeshReflectorMaterial'
-import { processProps } from '../utils/process-props'
+} from '../materials/MeshReflectorMaterial.tsx'
+import { processProps } from '../utils/process-props.ts'
 
 extend({ MeshReflectorMaterialImpl })
 
diff --git a/src/core/MeshWobbleMaterial.tsx b/src/core/MeshWobbleMaterial.tsx
index bd67973..6e62315 100644
--- a/src/core/MeshWobbleMaterial.tsx
+++ b/src/core/MeshWobbleMaterial.tsx
@@ -1,7 +1,7 @@
 import { Ref } from 'solid-js'
 import { S3, T, useFrame } from 'solid-three'
 import { MeshStandardMaterial, MeshStandardMaterialParameters } from 'three'
-import { processProps } from '../../utils/process-props'
+import { processProps } from '../utils/process-props.ts'
 
 declare global {
   namespace SolidThree {
diff --git a/src/core/OrthographicCamera.tsx b/src/core/OrthographicCamera.tsx
index 4d98d3c..67f1e46 100644
--- a/src/core/OrthographicCamera.tsx
+++ b/src/core/OrthographicCamera.tsx
@@ -3,8 +3,8 @@ import { JSX, Ref, Show, createEffect, createMemo, onMount } from 'solid-js'
 import { S3, T, useFrame, useThree } from 'solid-three'
 import * as THREE from 'three'
 import { OrthographicCamera as ThreeOrthographicCamera } from 'three'
-import { processProps } from '../utils/process-props'
-import { useFBO } from './unported/useFBO'
+import { processProps } from '../utils/process-props.ts'
+import { useFBO } from './unported/useFBO.tsx'
 
 type OrthographicCameraProps = S3.ClassProps<typeof ThreeOrthographicCamera> & {
   ref: Ref<THREE.Camera>
diff --git a/src/core/PerspectiveCamera.tsx b/src/core/PerspectiveCamera.tsx
index 9c8db1f..7dbbb2e 100644
--- a/src/core/PerspectiveCamera.tsx
+++ b/src/core/PerspectiveCamera.tsx
@@ -2,7 +2,7 @@ import { processProps } from '@/utils/process-props'
 import { JSX, Ref, Show, createEffect, createMemo, onMount } from 'solid-js'
 import { S3, T, useFrame, useThree } from 'solid-three'
 import * as THREE from 'three'
-import { useFBO } from './unported/useFBO'
+import { useFBO } from './unported/useFBO.tsx'
 
 interface PerspectiveCameraProps extends Omit<S3.Props<'PerspectiveCamera'>, 'children'> {
   ref: Ref<THREE.PerspectiveCamera>
diff --git a/src/core/Points.tsx b/src/core/Points.tsx
index c8d7b35..0fde8fa 100644
--- a/src/core/Points.tsx
+++ b/src/core/Points.tsx
@@ -10,7 +10,7 @@ import {
 } from 'solid-js'
 import { S3, T, extend, useFrame } from 'solid-three'
 import * as THREE from 'three'
-import { processProps } from '../utils/process-props'
+import { processProps } from '../utils/process-props.ts'
 
 declare global {
   namespace SolidThree {
diff --git a/src/core/PositionalAudio.tsx b/src/core/PositionalAudio.tsx
index 5a49802..c0bc158 100644
--- a/src/core/PositionalAudio.tsx
+++ b/src/core/PositionalAudio.tsx
@@ -1,8 +1,8 @@
 import { Ref, createEffect, onCleanup, onMount } from 'solid-js'
 import { S3, T, useLoader, useThree } from 'solid-three'
 import { AudioListener, AudioLoader, PositionalAudio as PositionalAudioImpl } from 'three'
-import { whenever } from '../utils/conditionals'
-import { processProps } from '../utils/process-props'
+import { whenever } from '../utils/conditionals.ts'
+import { processProps } from '../utils/process-props.ts'
 
 interface PositionalAudioProps extends S3.Props<'PositionalAudio'> {
   ref?: Ref<PositionalAudioImpl>
diff --git a/src/core/QuadraticBezierLine.tsx b/src/core/QuadraticBezierLine.tsx
index 1617697..49bbbcd 100644
--- a/src/core/QuadraticBezierLine.tsx
+++ b/src/core/QuadraticBezierLine.tsx
@@ -2,8 +2,8 @@ import { Ref, createEffect, createMemo } from 'solid-js'
 import { S3 } from 'solid-three'
 import { QuadraticBezierCurve3, Vector3 } from 'three'
 import { Line2 } from 'three-stdlib'
-import { processProps } from '../utils/process-props'
-import { Line, LineProps } from './Line'
+import { processProps } from '../utils/process-props.ts'
+import { Line, LineProps } from './Line.tsx'
 
 const VECTOR = new Vector3()
 
diff --git a/src/core/Resize.tsx b/src/core/Resize.tsx
index e1b0c23..041ce6b 100644
--- a/src/core/Resize.tsx
+++ b/src/core/Resize.tsx
@@ -1,7 +1,7 @@
 import { Ref, createEffect } from 'solid-js'
 import { S3, T } from 'solid-three'
 import * as THREE from 'three'
-import { processProps } from '../utils/process-props'
+import { processProps } from '../utils/process-props.ts'
 
 export interface ResizeProps extends S3.Props<'Group'> {
   ref?: Ref<THREE.Group>
diff --git a/src/core/RoundedBox.tsx b/src/core/RoundedBox.tsx
index 3b9a7eb..373d9a3 100644
--- a/src/core/RoundedBox.tsx
+++ b/src/core/RoundedBox.tsx
@@ -2,8 +2,8 @@ import { Ref, createMemo, createRenderEffect } from 'solid-js'
 import { S3, T } from 'solid-three'
 import { ExtrudeGeometry, Mesh, Shape } from 'three'
 import { toCreasedNormals } from 'three-stdlib'
-import { processProps } from '../utils/process-props'
-import { NamedArrayTuple } from '../utils/type-utils'
+import { processProps } from '../utils/process-props.ts'
+import { NamedArrayTuple } from '../utils/type-utils.ts'
 
 const eps = 0.00001
 
diff --git a/src/core/ScreenSpace.tsx b/src/core/ScreenSpace.tsx
index e6c1ad8..9281ba6 100644
--- a/src/core/ScreenSpace.tsx
+++ b/src/core/ScreenSpace.tsx
@@ -1,7 +1,7 @@
 import { Ref, createEffect } from 'solid-js'
 import { S3, T, useFrame } from 'solid-three'
 import { Group } from 'three'
-import { processProps } from '../utils/process-props'
+import { processProps } from '../utils/process-props.ts'
 
 export interface ScreenSpaceProps extends S3.Props<'Group'> {
   ref?: Ref<Group>
diff --git a/src/core/Segments.tsx b/src/core/Segments.tsx
index 31c5ca7..a7805dc 100644
--- a/src/core/Segments.tsx
+++ b/src/core/Segments.tsx
@@ -10,7 +10,7 @@ import {
 import { S3, T, extend, useFrame } from 'solid-three'
 import { Color, Vector2, Vector3 } from 'three'
 import { Line2, LineMaterial, LineSegmentsGeometry } from 'three-stdlib'
-import { processProps } from '../utils/process-props'
+import { processProps } from '../utils/process-props.ts'
 
 declare global {
   namespace SolidThree {
@@ -118,7 +118,7 @@ export function Segments(props: SegmentsProps) {
       <T.Primitive
         object={material}
         attach="material"
-        vertexColors={true}
+        vertexColors
         resolution={resolution}
         linewidth={config.lineWidth}
         {...rest}
diff --git a/src/core/Shadow.tsx b/src/core/Shadow.tsx
index 855d35f..1ffefda 100644
--- a/src/core/Shadow.tsx
+++ b/src/core/Shadow.tsx
@@ -1,7 +1,7 @@
 import { Ref, createMemo, onMount } from 'solid-js'
 import { S3, T } from 'solid-three'
 import { Color, DoubleSide, Mesh, MeshBasicMaterial } from 'three'
-import { processProps } from '../utils/process-props'
+import { processProps } from '../utils/process-props.ts'
 
 interface ShadowProps extends S3.Props<'Mesh'> {
   ref?: Ref<Mesh>
@@ -46,7 +46,7 @@ export function Shadow(props: ShadowProps) {
     <T.Mesh renderOrder={config.renderOrder} ref={config.ref} rotation-x={-Math.PI / 2} {...rest}>
       <T.PlaneGeometry />
       <T.MeshBasicMaterial
-        transparent={true}
+        transparent
         opacity={config.opacity}
         fog={config.fog}
         depthWrite={config.depthWrite}
diff --git a/src/core/Sky.tsx b/src/core/Sky.tsx
index 44314ef..56a81b1 100644
--- a/src/core/Sky.tsx
+++ b/src/core/Sky.tsx
@@ -2,7 +2,7 @@ import { Ref, createRenderEffect } from 'solid-js'
 import { S3, T } from 'solid-three'
 import { Vector3 } from 'three'
 import { Sky as SkyImpl } from 'three-stdlib'
-import { processProps } from '../utils/process-props'
+import { processProps } from '../utils/process-props.ts'
 
 /**********************************************************************************/
 /*                                                                                */
diff --git a/src/core/Sparkles.tsx b/src/core/Sparkles.tsx
index c0aab4c..322bf0e 100644
--- a/src/core/Sparkles.tsx
+++ b/src/core/Sparkles.tsx
@@ -1,8 +1,8 @@
 import { Accessor, Ref, Show, createEffect, createMemo } from 'solid-js'
 import { S3, T, extend, useFrame, useThree } from 'solid-three'
 import { Color, ColorRepresentation, MathUtils, Points, Vector2, Vector3, Vector4 } from 'three'
-import { shaderMaterial } from '../materials/shaderMaterial'
-import { processProps } from '../utils/process-props'
+import { shaderMaterial } from '../materials/shaderMaterial.ts'
+import { processProps } from '../utils/process-props.ts'
 
 declare global {
   namespace SolidThree {
diff --git a/src/core/SpotLight.tsx b/src/core/SpotLight.tsx
index d578531..d538537 100644
--- a/src/core/SpotLight.tsx
+++ b/src/core/SpotLight.tsx
@@ -30,9 +30,9 @@ import {
   WebGLRenderTarget,
 } from 'three'
 import { FullScreenQuad } from 'three-stdlib'
-import { SpotLightMaterial } from '../../materials/SpotLightMaterial'
+import { SpotLightMaterial } from '../materials/SpotLightMaterial.tsx'
 // @ts-ignore
-import { processProps } from '../../utils/process-props'
+import { processProps } from '../utils/process-props.ts'
 import SpotlightShadowShader from '../utils/glsl/DefaultSpotlightShadowShadows.glsl'
 
 /**********************************************************************************/
diff --git a/src/core/SpriteAnimator.tsx b/src/core/SpriteAnimator.tsx
index 2060b67..76be061 100644
--- a/src/core/SpriteAnimator.tsx
+++ b/src/core/SpriteAnimator.tsx
@@ -146,7 +146,7 @@ export function SpriteAnimator(props: SpriteAnimatorProps) {
 
   let currentFrame: number = config.startFrame || 0
   let currentFrameName: string = config.frameName || ''
-  let timerOffset = window.performance.now()
+  let timerOffset = globalThis.performance.now()
 
   const fpsInterval = () => 1000 / (config.fps || 30)
   const flipOffset = () => (config.flipX ? -1 : 1)
@@ -303,7 +303,7 @@ export function SpriteAnimator(props: SpriteAnimatorProps) {
       if (config.autoPlay || config.play) {
         // run the animation on each frame
 
-        const now = window.performance.now()
+        const now = globalThis.performance.now()
         const diff = now - timerOffset
 
         const { w: frameW, h: frameH } = getFirstItem(frames).sourceSize
@@ -380,7 +380,7 @@ export function SpriteAnimator(props: SpriteAnimatorProps) {
               alphaTest={config.alphaTest ?? 0.0}
               map={spriteTexture()}
               toneMapped={false}
-              transparent={true}
+              transparent
             />
           </T.Sprite>
         )}
diff --git a/src/core/Stars.tsx b/src/core/Stars.tsx
index 7e45119..a4eb1c5 100644
--- a/src/core/Stars.tsx
+++ b/src/core/Stars.tsx
@@ -1,7 +1,7 @@
 import { Ref, createMemo } from 'solid-js'
 import { T, useFrame } from 'solid-three'
 import { AdditiveBlending, Color, Points, ShaderMaterial, Spherical, Vector3 } from 'three'
-import { defaultProps } from '../../utils/default-props'
+import { defaultProps } from '../utils/default-props.ts'
 
 declare global {
   namespace SolidThree {
diff --git a/src/core/Svg.tsx b/src/core/Svg.tsx
index 9ebbe30..1f14862 100644
--- a/src/core/Svg.tsx
+++ b/src/core/Svg.tsx
@@ -2,7 +2,7 @@ import { For, Show, createMemo, onCleanup, splitProps } from 'solid-js'
 import { S3, T, useLoader } from 'solid-three'
 import { DoubleSide, Object3D } from 'three'
 import { SVGLoader } from 'three-stdlib'
-import { when } from '../utils/conditionals'
+import { when } from '../utils/conditionals.ts'
 
 export interface SvgProps extends Omit<S3.Props<'Object3D'>, 'ref'> {
   ref: Object3D
@@ -121,7 +121,7 @@ export function Svg(props: SvgProps) {
                       <T.MeshBasicMaterial
                         color={path.userData!.style.fill}
                         opacity={path.userData!.style.fillOpacity}
-                        transparent={true}
+                        transparent
                         side={DoubleSide}
                         depthWrite={false}
                         {...config.fillMaterial}
@@ -143,7 +143,7 @@ export function Svg(props: SvgProps) {
                       <T.MeshBasicMaterial
                         color={path.userData!.style.stroke}
                         opacity={path.userData!.style.strokeOpacity}
-                        transparent={true}
+                        transparent
                         side={DoubleSide}
                         depthWrite={false}
                         {...config.strokeMaterial}
diff --git a/src/core/Text.tsx b/src/core/Text.tsx
index 6d3a25e..5a09d56 100644
--- a/src/core/Text.tsx
+++ b/src/core/Text.tsx
@@ -2,8 +2,8 @@ import { createMemo, createResource, JSX, onCleanup, onMount, Show } from 'solid
 import { S3, T } from 'solid-three'
 import { Font } from 'three-stdlib'
 import { preloadFont, Text as ThreeTextMesh } from 'troika-three-text'
-import { processProps } from '../utils/process-props'
-import { resolveAccessor } from '../utils/resolve-accessor'
+import { processProps } from '../utils/process-props.ts'
+import { resolveAccessor } from '../utils/resolve-accessor.ts'
 
 interface Props extends S3.Props<'Mesh'> {
   /** The text or elements to display */
diff --git a/src/core/Text3D.tsx b/src/core/Text3D.tsx
index e5bb2b8..663d158 100644
--- a/src/core/Text3D.tsx
+++ b/src/core/Text3D.tsx
@@ -2,9 +2,9 @@ import { JSXElement, Ref, Show, createEffect, createMemo, mergeProps, splitProps
 import { S3, T, extend } from 'solid-three'
 import { Mesh } from 'three'
 import { TextGeometry, TextGeometryParameters, mergeVertices } from 'three-stdlib'
-import { processProps } from '../utils/process-props'
-import { resolveAccessor } from '../utils/resolve-accessor'
-import { FontData, useFont } from './useFont'
+import { processProps } from '../utils/process-props.ts'
+import { resolveAccessor } from '../utils/resolve-accessor.ts'
+import { FontData, useFont } from './useFont.tsx'
 
 declare global {
   namespace SolidThree {
diff --git a/src/core/TrackballControls.tsx b/src/core/TrackballControls.tsx
index eeb4123..ac48fa1 100644
--- a/src/core/TrackballControls.tsx
+++ b/src/core/TrackballControls.tsx
@@ -2,7 +2,7 @@ import { Ref, createEffect, createMemo, splitProps } from 'solid-js'
 import { S3, T, useThree } from 'solid-three'
 import * as THREE from 'three'
 import { TrackballControls as TrackballControlsImpl } from 'three-stdlib'
-import { ControlUtils } from './control-utils'
+import { ControlUtils } from './control-utils.ts'
 
 type TrackballControlsPropsBase = Omit<S3.ClassProps<typeof TrackballControlsImpl>, 'object'>
 export interface TrackballControlsProps extends TrackballControlsPropsBase {
diff --git a/src/core/TransformControls.tsx b/src/core/TransformControls.tsx
index 6c25caa..59251bb 100644
--- a/src/core/TransformControls.tsx
+++ b/src/core/TransformControls.tsx
@@ -1,9 +1,9 @@
-import { whenever } from '@/utils/conditionals'
+import { whenever } from '../utils/conditionals.ts'
 import { Accessor, JSX, Ref, createEffect, createMemo, onCleanup, splitProps } from 'solid-js'
 import { S3, T, useThree } from 'solid-three'
 import * as THREE from 'three'
 import { TransformControls as ThreeTransformControls } from 'three-stdlib'
-import { ControlUtils } from '../control-utils'
+import { ControlUtils } from '../core/control-utils.ts'
 
 type TransformControlsPropsBase = Omit<
   S3.Props<'Group'> & S3.ClassProps<typeof ThreeTransformControls>,
diff --git a/src/core/control-utils.ts b/src/core/control-utils.ts
index 27c168d..02529a1 100644
--- a/src/core/control-utils.ts
+++ b/src/core/control-utils.ts
@@ -1,7 +1,7 @@
 import { Accessor, createEffect, onCleanup } from 'solid-js'
 import { S3, useFrame } from 'solid-three'
 import { Event } from 'three'
-import { whenever } from '../utils/conditionals'
+import { whenever } from '../utils/conditionals.ts'
 
 type ControlProtoBase = {
   update: (delta: number) => void
diff --git a/src/core/index.ts b/src/core/index.ts
index a244434..c009869 100644
--- a/src/core/index.ts
+++ b/src/core/index.ts
@@ -1,19 +1,19 @@
 // Abstractions
-export * from './Billboard'
-export * from './CatmullRomLine'
-export * from './ComputedAttribute'
-export * from './CubicBezierLine'
-export * from './Edges'
-export * from './Gltf'
-export * from './GradientTexture'
-export * from './Image'
-export * from './Line'
-export * from './PositionalAudio'
-export * from './QuadraticBezierLine'
-export * from './ScreenSpace'
-export * from './Svg'
-export * from './Text'
-export * from './Text3D'
+export * from './Billboard.tsx'
+export * from './CatmullRomLine.tsx'
+export * from './ComputedAttribute.tsx'
+export * from './CubicBezierLine.tsx'
+export * from './Edges.tsx'
+export * from './Gltf.tsx'
+export * from './GradientTexture.tsx'
+export * from './Image.tsx'
+export * from './Line.tsx'
+export * from './PositionalAudio.tsx'
+export * from './QuadraticBezierLine.tsx'
+export * from './ScreenSpace.tsx'
+export * from './Svg.tsx'
+export * from './Text.tsx'
+export * from './Text3D.tsx'
 // export * from './unported/Sampler'
 // export * from './unported/AsciiRenderer'
 // export * from './unported/Clone'
@@ -23,49 +23,49 @@ export * from './Text3D'
 // export * from './unported/Trail'
 
 // Cameras
-export * from './CubeCamera'
-export * from './OrthographicCamera'
-export * from './PerspectiveCamera'
+export * from './CubeCamera.tsx'
+export * from './OrthographicCamera.tsx'
+export * from './PerspectiveCamera.tsx'
 
 // Controls
-export * from './ArcballControls'
-export * from './CameraControls'
-export * from './FirstPersonControls'
-export * from './FlyControls'
-export * from './OrbitControls'
-export * from './TrackballControls'
-export * from './TransformControls'
+export * from './ArcballControls.tsx'
+export * from './CameraControls.tsx'
+export * from './FirstPersonControls.tsx'
+export * from './FlyControls.tsx'
+export * from './OrbitControls.tsx'
+export * from './TrackballControls.tsx'
+export * from './TransformControls.tsx'
 // export * from './unported/DeviceOrientationControls'
 // export * from './unported/FaceControls'
 // export * from './unported/MapControls'
 // export * from './unported/PointerLockControls'
 
 // Gizmos
-export * from './GizmoHelper'
-export * from './Grid'
+export * from './GizmoHelper.tsx'
+export * from './Grid.tsx'
 // export * from './unported/GizmoViewport'
 // export * from './unported/GizmoViewcube'
 
 // Loaders
-export * from './useCubeTexture'
-export * from './useFBX'
-export * from './useFont'
-export * from './useGLTF'
-export * from './useProgress'
-export * from './useTexture'
-export * from './useVideoTexture'
+export * from './useCubeTexture.tsx'
+export * from './useFBX.tsx'
+export * from './useFont.tsx'
+export * from './useGLTF.tsx'
+export * from './useProgress.tsx'
+export * from './useTexture.tsx'
+export * from './useVideoTexture.tsx'
 // export * from './unported/useKTX2'
 
 // Misc
-export * from './BBAnchor'
-export * from './SpriteAnimator'
-export * from './useAnimations'
-export * from './useBoxProjectedEnv'
-export * from './useCubeCamera'
-export * from './useDepthBuffer'
-export * from './useDetectGPU'
-export * from './useHelper'
-export * from './useTrailTexture'
+export * from './BBAnchor.tsx'
+export * from './SpriteAnimator.tsx'
+export * from './useAnimations.tsx'
+export * from './useBoxProjectedEnv.tsx'
+export * from './useCubeCamera.tsx'
+export * from './useDepthBuffer.ts'
+export * from './useDetectGPU.tsx'
+export * from './useHelper.tsx'
+export * from './useTrailTexture.tsx'
 // export * from './unported/Example'
 // export * from './unported/FaceLandmarker'
 // export * from './unported/Stats'
@@ -78,42 +78,42 @@ export * from './useTrailTexture'
 // export * from './unported/useIntersect'
 
 // Modifiers
-export * from './CurveModifier'
+export * from './CurveModifier.tsx'
 
 // Shaders
-export * from '../materials/shaderMaterial'
-export * from './MeshDiscardMaterial'
-export * from './MeshDistortMaterial'
-export * from './MeshReflectorMaterial'
-export * from './MeshWobbleMaterial'
-export * from './PointMaterial'
-export * from './softShadows'
+export * from '../materials/shaderMaterial.ts'
+export * from './MeshDiscardMaterial.tsx'
+export * from './MeshDistortMaterial.tsx'
+export * from './MeshReflectorMaterial.tsx'
+export * from './MeshWobbleMaterial.tsx'
+export * from './PointMaterial.tsx'
+export * from './softShadows.tsx'
 // export * from './unported/MeshRefractionMaterial'
 // export * from './unported/MeshTransmissionMaterial'
 
 // Shapes
-export * from './RoundedBox'
-export * from './ScreenQuad'
-export * from './shapes'
+export * from './RoundedBox.tsx'
+export * from './ScreenQuad.tsx'
+export * from './shapes.tsx'
 // export * from './unported/Facemesh'
 
 // Staging/Prototyping
-export * from './Backdrop'
-export * from './CameraShake'
-export * from './Caustics'
-export * from './Center'
-export * from './Cloud'
-export * from './ContactShadows'
-export * from './Float'
-export * from './Resize'
-export * from './Shadow'
-export * from './Sky'
-export * from './Sparkles'
-export * from './SpotLight'
-export * from './Stars'
-export * from './useEnvironment'
-export * from './useMatcapTexture'
-export * from './useNormalTexture'
+export * from './Backdrop.tsx'
+export * from './CameraShake.tsx'
+export * from './Caustics.tsx'
+export * from './Center.tsx'
+export * from './Cloud.tsx'
+export * from './ContactShadows.tsx'
+export * from './Float.tsx'
+export * from './Resize.tsx'
+export * from './Shadow.tsx'
+export * from './Sky.tsx'
+export * from './Sparkles.tsx'
+export * from './SpotLight.tsx'
+export * from './Stars.tsx'
+export * from './useEnvironment.tsx'
+export * from './useMatcapTexture.tsx'
+export * from './useNormalTexture.tsx'
 // export * from './unported/Environment'
 // export * from './unported/AccumulativeShadows'
 // export * from './unported/Bounds'
@@ -123,10 +123,10 @@ export * from './useNormalTexture'
 // export * from './unported/Wireframe'
 
 // Performance
-export * from './BakeShadows'
-export * from './Detailed'
-export * from './Points'
-export * from './Segments'
+export * from './BakeShadows.tsx'
+export * from './Detailed.tsx'
+export * from './Points.tsx'
+export * from './Segments.tsx'
 // export * from './unported/AdaptiveDpr'
 // export * from './unported/AdaptiveEvents'
 // export * from './unported/Instances'
diff --git a/src/core/missing-api/Hud.tsx b/src/core/missing-api/Hud.tsx
index 3cc2d71..65870ab 100644
--- a/src/core/missing-api/Hud.tsx
+++ b/src/core/missing-api/Hud.tsx
@@ -1,7 +1,7 @@
 import { JSX } from 'solid-js'
 import { T, useFrame, useThree } from 'solid-three'
 import * as THREE from 'three'
-import { defaultProps } from '../../utils/default-props'
+import { defaultProps } from '../../utils/default-props.ts'
 
 /**********************************************************************************/
 /*                                                                                */
diff --git a/src/core/missing-api/MarchingCubes.tsx b/src/core/missing-api/MarchingCubes.tsx
index 21833f5..f577bcd 100644
--- a/src/core/missing-api/MarchingCubes.tsx
+++ b/src/core/missing-api/MarchingCubes.tsx
@@ -3,7 +3,7 @@ import { S3, T, useFrame } from 'solid-three'
 import * as THREE from 'three'
 import { Color, Group } from 'three'
 import { MarchingCubes as MarchingCubesImpl } from 'three-stdlib'
-import { processProps } from '../../utils/process-props'
+import { processProps } from '../../utils/process-props.ts'
 
 type Api = {
   getParent: () => MarchingCubesImpl
diff --git a/src/core/missing-api/RenderTexture.tsx b/src/core/missing-api/RenderTexture.tsx
index 18a7ab6..47e0da0 100644
--- a/src/core/missing-api/RenderTexture.tsx
+++ b/src/core/missing-api/RenderTexture.tsx
@@ -1,7 +1,7 @@
 import { JSX, Ref, createEffect, mergeProps, on, splitProps } from 'solid-js'
 import { S3, T, useFrame, useThree } from 'solid-three'
 import { Object3D, Scene, Texture, WebGLRenderTarget } from 'three'
-import { useFBO } from '../unported/useFBO'
+import { useFBO } from '../unported/useFBO.tsx'
 
 type Props = S3.Props<'Texture'> & {
   ref?: Ref<Texture>
diff --git a/src/core/softShadows.tsx b/src/core/softShadows.tsx
index bf7bd35..00b7506 100755
--- a/src/core/softShadows.tsx
+++ b/src/core/softShadows.tsx
@@ -16,7 +16,7 @@
 import { createEffect, onCleanup } from 'solid-js'
 import { useThree } from 'solid-three'
 import { Camera, Material, Scene, ShaderChunk, WebGLRenderer } from 'three'
-import { defaultProps } from '../../utils/default-props'
+import { defaultProps } from '../utils/default-props.ts'
 
 /**********************************************************************************/
 /*                                                                                */
diff --git a/src/core/unported/AccumulativeShadows.tsx b/src/core/unported/AccumulativeShadows.tsx
index c6dcb10..1c064f5 100644
--- a/src/core/unported/AccumulativeShadows.tsx
+++ b/src/core/unported/AccumulativeShadows.tsx
@@ -9,8 +9,8 @@ import {
 } from 'solid-js'
 import { S3, T, extend, useFrame, useThree } from 'solid-three'
 import * as THREE from 'three'
-import { DiscardMaterial } from '../../materials/DiscardMaterial'
-import { shaderMaterial } from '../../materials/shaderMaterial'
+import { DiscardMaterial } from '../../materials/DiscardMaterial.tsx'
+import { shaderMaterial } from '../../materials/shaderMaterial.ts'
 import { processProps } from '../utils/process-props'
 import { RefComponent } from '../utils/type-utils'
 import { createImperativeHandle } from '../utils/use-imperative-handle'
diff --git a/src/core/unported/Bounds.tsx b/src/core/unported/Bounds.tsx
index c230f4b..2893212 100644
--- a/src/core/unported/Bounds.tsx
+++ b/src/core/unported/Bounds.tsx
@@ -1,7 +1,7 @@
 import { createContext, createRenderEffect, onCleanup, useContext } from 'solid-js'
 import { T, ThreeProps, useFrame, useThree } from 'solid-three'
 import * as THREE from 'three'
-import { defaultProps } from '../../utils/default-props'
+import { defaultProps } from '../../utils/default-props.ts'
 
 export type SizeProps = {
   box: THREE.Box3
diff --git a/src/core/unported/Effects.tsx b/src/core/unported/Effects.tsx
index 45b2497..9282b2e 100644
--- a/src/core/unported/Effects.tsx
+++ b/src/core/unported/Effects.tsx
@@ -33,7 +33,7 @@ declare global {
 export const isWebGL2Available = () => {
   try {
     var canvas = document.createElement('canvas')
-    return !!(window.WebGL2RenderingContext && canvas.getContext('webgl2'))
+    return !!(globalThis.WebGL2RenderingContext && canvas.getContext('webgl2'))
   } catch (e) {
     return false
   }
diff --git a/src/core/unported/Environment.tsx b/src/core/unported/Environment.tsx
index bf56c40..c7b428d 100644
--- a/src/core/unported/Environment.tsx
+++ b/src/core/unported/Environment.tsx
@@ -9,10 +9,10 @@ import {
   WebGLCubeRenderTarget,
 } from 'three'
 import { GroundProjectedEnv as GroundProjectedEnvImpl } from 'three-stdlib'
-import { whenever } from '../../utils/conditionals'
-import { defaultProps } from '../../utils/default-props'
-import { PresetsType } from '../../utils/environment-assets'
-import { processProps } from '../../utils/process-props'
+import { whenever } from '../../utils/conditionals.ts'
+import { defaultProps } from '../../utils/default-props.ts'
+import { PresetsType } from '../../utils/environment-assets.ts'
+import { processProps } from '../../utils/process-props.ts'
 import { EnvironmentLoaderProps, useEnvironment } from './useEnvironment'
 
 declare global {
diff --git a/src/core/unported/Example.tsx b/src/core/unported/Example.tsx
index d6320d6..6808f8b 100644
--- a/src/core/unported/Example.tsx
+++ b/src/core/unported/Example.tsx
@@ -5,8 +5,8 @@ import { T, ThreeProps, type Color } from 'solid-three'
 import { processProps } from '../utils/process-props'
 import { RefComponent } from '../utils/type-utils'
 import { createImperativeHandle } from '../utils/use-imperative-handle'
-import { Center } from '../Center'
-import { Text3D } from '../Text3D'
+import { Center } from '../Center.tsx'
+import { Text3D } from '../Text3D.tsx'
 
 export type ExampleProps = {
   font: string
diff --git a/src/core/unported/FaceControls.tsx b/src/core/unported/FaceControls.tsx
index 1a527a1..a3753be 100644
--- a/src/core/unported/FaceControls.tsx
+++ b/src/core/unported/FaceControls.tsx
@@ -16,13 +16,13 @@ import {
   onCleanup,
   useContext,
 } from 'solid-js'
-import { useVideoTexture } from '../useVideoTexture'
+import { useVideoTexture } from '../useVideoTexture.tsx'
 import { when } from '../utils/conditionals'
 import { defaultProps } from '../utils/default-props'
 import { RefComponent } from '../utils/type-utils'
 import { createImperativeHandle } from '../utils/use-imperative-handle'
-import { useFaceLandmarker } from './FaceLandmarker'
-import { Facemesh, FacemeshApi, FacemeshProps } from './Facemesh'
+import { useFaceLandmarker } from './FaceLandmarker.tsx'
+import { Facemesh, FacemeshApi, FacemeshProps } from './Facemesh.tsx'
 
 type VideoTextureSrc = Parameters<typeof useVideoTexture>[0] // useVideoTexture 1st arg `src` type
 
diff --git a/src/core/unported/Facemesh.tsx b/src/core/unported/Facemesh.tsx
index f6d9ad6..e9b8cad 100644
--- a/src/core/unported/Facemesh.tsx
+++ b/src/core/unported/Facemesh.tsx
@@ -8,7 +8,7 @@ import { defaultProps } from '../utils/default-props'
 import { processProps } from '../utils/process-props'
 import { RefComponent } from '../utils/type-utils'
 import { createImperativeHandle } from '../utils/use-imperative-handle'
-import { Line } from '../Line'
+import { Line } from '../Line.tsx'
 
 export type MediaPipeFaceMesh = typeof FacemeshDatas.SAMPLE_FACE
 
diff --git a/src/core/unported/GizmoViewcube.tsx b/src/core/unported/GizmoViewcube.tsx
index cf3423a..8247b6b 100644
--- a/src/core/unported/GizmoViewcube.tsx
+++ b/src/core/unported/GizmoViewcube.tsx
@@ -1,7 +1,7 @@
 import { For, Index, createMemo, createSignal, onMount, type JSX } from 'solid-js'
 import { T, ThreeEvent, useThree } from 'solid-three'
 import { CanvasTexture, Vector3 } from 'three'
-import { useGizmoContext } from '../GizmoHelper'
+import { useGizmoContext } from '../GizmoHelper.tsx'
 import { defaultProps } from '../utils/default-props'
 
 type XYZ = [number, number, number]
diff --git a/src/core/unported/GizmoViewport.tsx b/src/core/unported/GizmoViewport.tsx
index f26ff63..92fce29 100644
--- a/src/core/unported/GizmoViewport.tsx
+++ b/src/core/unported/GizmoViewport.tsx
@@ -1,7 +1,7 @@
 import { createMemo, createSignal } from 'solid-js'
 import { T, ThreeEvent, ThreeProps, useThree } from 'solid-three'
 import { CanvasTexture, Sprite } from 'three'
-import { useGizmoContext } from '../GizmoHelper'
+import { useGizmoContext } from '../GizmoHelper.tsx'
 import { defaultProps } from '../utils/default-props'
 import { processProps } from '../utils/process-props'
 
diff --git a/src/core/unported/MeshPortalMaterial.tsx b/src/core/unported/MeshPortalMaterial.tsx
index 7019d59..e6791c4 100644
--- a/src/core/unported/MeshPortalMaterial.tsx
+++ b/src/core/unported/MeshPortalMaterial.tsx
@@ -7,13 +7,13 @@ import { createEffect, createMemo, createRenderEffect, createSignal } from 'soli
 import { SolidThreeCore, T, ThreeProps, extend, useFrame, useThree } from 'solid-three'
 import * as THREE from 'three'
 import { FullScreenQuad } from 'three-stdlib'
-import { shaderMaterial } from '../../materials/shaderMaterial'
-import { RenderTexture } from '../missing-api/RenderTexture'
+import { shaderMaterial } from '../../materials/shaderMaterial.ts'
+import { RenderTexture } from '../missing-api/RenderTexture.tsx'
 import { processProps } from '../utils/process-props'
 import { RefComponent } from '../utils/type-utils'
 import { createImperativeHandle } from '../utils/use-imperative-handle'
-import { useFBO } from './useFBO'
-import { useIntersect } from './useIntersect'
+import { useFBO } from './useFBO.tsx'
+import { useIntersect } from './useIntersect.tsx'
 
 const PortalMaterialImpl = shaderMaterial(
   {
diff --git a/src/core/unported/MeshRefractionMaterial.tsx b/src/core/unported/MeshRefractionMaterial.tsx
index 3eef68a..2a634ce 100644
--- a/src/core/unported/MeshRefractionMaterial.tsx
+++ b/src/core/unported/MeshRefractionMaterial.tsx
@@ -2,8 +2,8 @@ import { createMemo, onMount } from 'solid-js'
 import { $S3C, S3, T, extend, useFrame, useThree } from 'solid-three'
 import * as THREE from 'three'
 import { MeshBVH, MeshBVHUniformStruct, SAH } from 'three-mesh-bvh'
-import { MeshRefractionMaterial as MeshRefractionMaterialImpl } from '../../materials/MeshRefractionMaterial'
-import { processProps } from '../../utils/process-props'
+import { MeshRefractionMaterial as MeshRefractionMaterialImpl } from '../../materials/MeshRefractionMaterial.tsx'
+import { processProps } from '../../utils/process-props.ts'
 
 declare global {
   namespace SolidThree {
diff --git a/src/core/unported/MeshTransmissionMaterial.tsx b/src/core/unported/MeshTransmissionMaterial.tsx
index cb565f4..5110bfc 100644
--- a/src/core/unported/MeshTransmissionMaterial.tsx
+++ b/src/core/unported/MeshTransmissionMaterial.tsx
@@ -7,11 +7,11 @@
 import { createSignal } from 'solid-js'
 import { Instance, T, ThreeProps, extend, useFrame } from 'solid-three'
 import * as THREE from 'three'
-import { DiscardMaterial } from '../../materials/DiscardMaterial'
+import { DiscardMaterial } from '../../materials/DiscardMaterial.tsx'
 import { processProps } from '../utils/process-props'
 import { RefComponent } from '../utils/type-utils'
 import { createImperativeHandle } from '../utils/use-imperative-handle'
-import { useFBO } from './useFBO'
+import { useFBO } from './useFBO.tsx'
 
 type MeshTransmissionMaterialType = Omit<
   ThreeProps<'MeshPhysicalMaterial'>,
diff --git a/src/core/unported/Reflector.tsx b/src/core/unported/Reflector.tsx
index 6aefbcd..6bbd11d 100644
--- a/src/core/unported/Reflector.tsx
+++ b/src/core/unported/Reflector.tsx
@@ -17,11 +17,11 @@ import {
 } from 'three'
 import { mergeRefs } from '../utils/merge-refs'
 
-import { BlurPass } from '../../materials/BlurPass'
+import { BlurPass } from '../../materials/BlurPass.tsx'
 import {
   MeshReflectorMaterial,
   MeshReflectorMaterialProps,
-} from '../../materials/MeshReflectorMaterial'
+} from '../../materials/MeshReflectorMaterial.tsx'
 import { createRef } from '../utils/create-ref'
 import { processProps } from '../utils/process-props'
 import { RefComponent } from '../utils/type-utils'
diff --git a/src/core/unported/Stage.tsx b/src/core/unported/Stage.tsx
index 8e85dfc..cc367b1 100644
--- a/src/core/unported/Stage.tsx
+++ b/src/core/unported/Stage.tsx
@@ -1,7 +1,7 @@
 import { Show, createEffect, createSignal, on } from 'solid-js'
 import { T, ThreeProps } from 'solid-three'
-import { Center, CenterProps } from '../Center'
-import { ContactShadows, ContactShadowsProps } from '../ContactShadows'
+import { Center, CenterProps } from '../Center.tsx'
+import { ContactShadows, ContactShadowsProps } from '../ContactShadows.tsx'
 import { PresetsType } from '../utils/environment-assets'
 import { processProps } from '../utils/process-props'
 import {
@@ -9,9 +9,9 @@ import {
   AccumulativeShadowsProps,
   RandomizedLight,
   RandomizedLightProps,
-} from './AccumulativeShadows'
-import { Bounds, useBounds } from './Bounds'
-import { Environment, EnvironmentProps } from './Environment'
+} from './AccumulativeShadows.tsx'
+import { Bounds, useBounds } from './Bounds.tsx'
+import { Environment, EnvironmentProps } from './Environment.tsx'
 
 const presets = {
   rembrandt: {
@@ -166,7 +166,7 @@ export function Stage(_props: ThreeProps<THREE.Group> & StageProps) {
             temporal
             frames={100}
             alphaTest={0.9}
-            toneMapped={true}
+            toneMapped
             scale={dimensions().radius * 4}
             {...(shadowSpread() as AccumulativeShadowsProps)}
           >
diff --git a/src/core/unported/Wireframe.tsx b/src/core/unported/Wireframe.tsx
index 3592ba0..b4145be 100644
--- a/src/core/unported/Wireframe.tsx
+++ b/src/core/unported/Wireframe.tsx
@@ -16,8 +16,8 @@ import {
   WireframeMaterialShaders,
   setWireframeOverride,
   useWireframeUniforms,
-} from '../../materials/WireframeMaterial'
-import { processProps } from '../../utils/process-props'
+} from '../../materials/WireframeMaterial.tsx'
+import { processProps } from '../../utils/process-props.ts'
 
 declare global {
   namespace SolidThree {
@@ -152,7 +152,7 @@ function WireframeWithCustomGeo(props: WireframeProps & WireframeMaterialProps)
             attach="material"
             transparent
             side={THREE.DoubleSide}
-            polygonOffset={true} //
+            polygonOffset //
             polygonOffsetFactor={-4}
             {...rest}
             extensions={{
diff --git a/src/core/unported/useIntersect.tsx b/src/core/unported/useIntersect.tsx
index b142279..8cf6c97 100644
--- a/src/core/unported/useIntersect.tsx
+++ b/src/core/unported/useIntersect.tsx
@@ -1,7 +1,7 @@
 import { createEffect, createSignal, onCleanup } from 'solid-js'
 import { addAfterEffect, addEffect } from 'solid-three'
 import { Object3D } from 'three'
-import { whenever } from '../../utils/conditionals'
+import { whenever } from '../../utils/conditionals.ts'
 
 export function useIntersect<T extends Object3D>(onChange: (visible: boolean) => void) {
   const [ref, setRef] = createSignal<T>()
diff --git a/src/core/unported/useKTX2.tsx b/src/core/unported/useKTX2.tsx
index e2fe7f7..72ff25d 100644
--- a/src/core/unported/useKTX2.tsx
+++ b/src/core/unported/useKTX2.tsx
@@ -2,7 +2,7 @@ import { Accessor, createEffect } from 'solid-js'
 import { useLoader, useThree } from 'solid-three'
 import { Texture } from 'three'
 import { KTX2Loader } from 'three-stdlib'
-import { IsObject } from '../useTexture'
+import { IsObject } from '../useTexture.tsx'
 import { when } from '../utils/conditionals'
 
 const cdn = 'https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master'
diff --git a/src/core/useBoxProjectedEnv.tsx b/src/core/useBoxProjectedEnv.tsx
index 780b39b..c472fd2 100644
--- a/src/core/useBoxProjectedEnv.tsx
+++ b/src/core/useBoxProjectedEnv.tsx
@@ -1,6 +1,6 @@
 import { createMemo, createRenderEffect, on } from 'solid-js'
 import * as THREE from 'three'
-import { resolveAccessor } from '../utils/resolve-accessor'
+import { resolveAccessor } from '../utils/resolve-accessor.ts'
 
 // credits for the box-projecting shader code go to codercat (https://codercat.tk)
 // and @0beqz https://gist.github.com/0beqz/8d51b4ae16d68021a09fb504af708fca
diff --git a/src/core/useCubeCamera.tsx b/src/core/useCubeCamera.tsx
index 2c6bb65..35b86ed 100644
--- a/src/core/useCubeCamera.tsx
+++ b/src/core/useCubeCamera.tsx
@@ -2,7 +2,7 @@ import { createMemo, onCleanup } from 'solid-js'
 import { useThree } from 'solid-three'
 import * as THREE from 'three'
 import { Fog, FogExp2, HalfFloatType, WebGLCubeRenderTarget } from 'three'
-import { defaultProps } from '../utils/default-props'
+import { defaultProps } from '../utils/default-props.ts'
 
 export type CubeCameraOptions = {
   /** Resolution of the FBO, 256 */
diff --git a/src/core/useDepthBuffer.ts b/src/core/useDepthBuffer.ts
index 91e6806..145ef0b 100644
--- a/src/core/useDepthBuffer.ts
+++ b/src/core/useDepthBuffer.ts
@@ -1,7 +1,7 @@
 import { createMemo } from 'solid-js'
 import { useFrame, useThree } from 'solid-three'
 import { DepthFormat, DepthTexture, UnsignedShortType } from 'three'
-import { useFBO } from './unported/useFBO'
+import { useFBO } from './unported/useFBO.tsx'
 
 export function useDepthBuffer({
   size = 256,
diff --git a/src/core/useEnvironment.tsx b/src/core/useEnvironment.tsx
index 947821a..25c83fc 100644
--- a/src/core/useEnvironment.tsx
+++ b/src/core/useEnvironment.tsx
@@ -9,9 +9,9 @@ import {
   TextureEncoding,
 } from 'three'
 import { EXRLoader, RGBELoader } from 'three-stdlib'
-import { when } from '../utils/conditionals'
-import { defaultProps } from '../utils/default-props'
-import { PresetsType, presetsObj } from '../utils/environment-assets'
+import { when } from '../utils/conditionals.ts'
+import { defaultProps } from '../utils/default-props.ts'
+import { PresetsType, presetsObj } from '../utils/environment-assets.ts'
 
 const CUBEMAP_ROOT =
   'https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/'
diff --git a/src/core/useHelper.tsx b/src/core/useHelper.tsx
index fc20557..2939c65 100644
--- a/src/core/useHelper.tsx
+++ b/src/core/useHelper.tsx
@@ -1,8 +1,8 @@
 import { Accessor, createMemo, onCleanup } from 'solid-js'
 import { useFrame, useThree } from 'solid-three'
 import { Object3D } from 'three'
-import { whenever } from '../utils/conditionals'
-import { resolveAccessor } from '../utils/resolve-accessor'
+import { whenever } from '../utils/conditionals.ts'
+import { resolveAccessor } from '../utils/resolve-accessor.ts'
 
 type Helper = Object3D & { update: () => void; dispose: () => void }
 type Constructor = new (...args: any[]) => any
diff --git a/src/core/useMatcapTexture.tsx b/src/core/useMatcapTexture.tsx
old mode 100755
new mode 100644
index 151449f..a1ff5ee
--- a/src/core/useMatcapTexture.tsx
+++ b/src/core/useMatcapTexture.tsx
@@ -1,8 +1,8 @@
 import { Accessor, createResource } from 'solid-js'
 import { Texture } from 'three'
-import { whenever } from '../utils/conditionals'
-import { resolveAccessor } from '../utils/resolve-accessor'
-import { useTexture } from './useTexture'
+import { whenever } from '../utils/conditionals.ts'
+import { resolveAccessor } from '../utils/resolve-accessor.ts'
+import { useTexture } from './useTexture.tsx'
 
 function getFormatString(format: number) {
   switch (format) {
diff --git a/src/core/useNormalTexture.tsx b/src/core/useNormalTexture.tsx
old mode 100755
new mode 100644
index 54c6b23..7ab1c48
--- a/src/core/useNormalTexture.tsx
+++ b/src/core/useNormalTexture.tsx
@@ -1,8 +1,8 @@
 import { createRenderEffect, createResource } from 'solid-js'
 import { RepeatWrapping, Texture, Vector2 } from 'three'
-import { every, whenever } from '../utils/conditionals'
-import { defaultProps } from '../utils/default-props'
-import { useTexture } from './useTexture'
+import { every, whenever } from '../utils/conditionals.ts'
+import { defaultProps } from '../utils/default-props.ts'
+import { useTexture } from './useTexture.tsx'
 
 const NORMAL_ROOT =
   'https://rawcdn.githack.com/pmndrs/drei-assets/7a3104997e1576f83472829815b00880d88b32fb'
diff --git a/src/core/useTexture.tsx b/src/core/useTexture.tsx
index b7d7144..a61ff8b 100644
--- a/src/core/useTexture.tsx
+++ b/src/core/useTexture.tsx
@@ -8,7 +8,7 @@ import {
 } from 'solid-js'
 import { useLoader, useThree } from 'solid-three'
 import { Texture, TextureLoader } from 'three'
-import { when } from '../utils/conditionals'
+import { when } from '../utils/conditionals.ts'
 
 export const IsObject = (url: any): url is Record<string, string> =>
   url === Object(url) && !Array.isArray(url) && typeof url !== 'function'
diff --git a/src/core/useVideoTexture.tsx b/src/core/useVideoTexture.tsx
index 715d0c4..f6cbd58 100644
--- a/src/core/useVideoTexture.tsx
+++ b/src/core/useVideoTexture.tsx
@@ -1,7 +1,7 @@
 import { createEffect, createResource } from 'solid-js'
 import { useThree } from 'solid-three'
 import * as THREE from 'three'
-import { processProps } from '../utils/process-props'
+import { processProps } from '../utils/process-props.ts'
 
 interface VideoTextureProps extends HTMLVideoElement {
   unsuspend?: 'canplay' | 'canplaythrough' | 'loadstart' | 'loadedmetadata'
diff --git a/src/index.ts b/src/index.ts
index c73ad99..dcc4e33 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1 +1 @@
-export * from './web'
+export * from './web/index.ts'
diff --git a/src/materials/BlurPass.tsx b/src/materials/BlurPass.tsx
index 49523d2..a5dce31 100644
--- a/src/materials/BlurPass.tsx
+++ b/src/materials/BlurPass.tsx
@@ -11,7 +11,7 @@ import {
   WebGLRenderer,
 } from 'three'
 
-import { ConvolutionMaterial } from './ConvolutionMaterial'
+import { ConvolutionMaterial } from './ConvolutionMaterial.tsx'
 
 export interface BlurPassProps {
   gl: WebGLRenderer
diff --git a/src/materials/DiscardMaterial.tsx b/src/materials/DiscardMaterial.tsx
index 718e44c..b21602c 100644
--- a/src/materials/DiscardMaterial.tsx
+++ b/src/materials/DiscardMaterial.tsx
@@ -1,4 +1,4 @@
-import { shaderMaterial } from './shaderMaterial'
+import { shaderMaterial } from './shaderMaterial.ts'
 
 export const DiscardMaterial = shaderMaterial(
   {},
diff --git a/src/materials/MeshRefractionMaterial.tsx b/src/materials/MeshRefractionMaterial.tsx
index 63a7f0c..fd1fe6d 100644
--- a/src/materials/MeshRefractionMaterial.tsx
+++ b/src/materials/MeshRefractionMaterial.tsx
@@ -3,7 +3,7 @@
 
 import * as THREE from 'three'
 import { MeshBVHUniformStruct, shaderIntersectFunction, shaderStructs } from 'three-mesh-bvh'
-import { shaderMaterial } from './shaderMaterial'
+import { shaderMaterial } from './shaderMaterial.ts'
 
 export const MeshRefractionMaterial = shaderMaterial(
   {
diff --git a/src/materials/WireframeMaterial.tsx b/src/materials/WireframeMaterial.tsx
index 9647c1d..c2eb95a 100644
--- a/src/materials/WireframeMaterial.tsx
+++ b/src/materials/WireframeMaterial.tsx
@@ -1,6 +1,6 @@
 import { Accessor, createEffect } from 'solid-js'
 import * as THREE from 'three'
-import { shaderMaterial } from './shaderMaterial'
+import { shaderMaterial } from './shaderMaterial.ts'
 
 export interface WireframeMaterialProps extends THREE.ShaderMaterialParameters {
   fillOpacity?: number
diff --git a/src/utils/default-props.ts b/src/utils/default-props.ts
index 7cadc5c..3d07154 100644
--- a/src/utils/default-props.ts
+++ b/src/utils/default-props.ts
@@ -1,5 +1,5 @@
 import { MergeProps, mergeProps } from 'solid-js'
-import { KeyOfOptionals } from './type-utils'
+import { KeyOfOptionals } from './type-utils.ts'
 
 export function defaultProps<T, K extends KeyOfOptionals<T>>(
   props: T,
diff --git a/src/utils/process-props.ts b/src/utils/process-props.ts
index 8f3fcd9..3dbec74 100644
--- a/src/utils/process-props.ts
+++ b/src/utils/process-props.ts
@@ -1,6 +1,6 @@
 import { splitProps } from 'solid-js'
-import { defaultProps } from './default-props'
-import { KeyOfOptionals } from './type-utils'
+import { defaultProps } from './default-props.ts'
+import { KeyOfOptionals } from './type-utils.ts'
 
 export function processProps<
   const TProps,
diff --git a/src/web/Loader.tsx b/src/web/Loader.tsx
index 8e1d5a4..c0c2c3e 100644
--- a/src/web/Loader.tsx
+++ b/src/web/Loader.tsx
@@ -1,6 +1,6 @@
 import { Show, createEffect, createSignal, onCleanup } from 'solid-js'
-import { useProgress } from '../core/useProgress'
-import { defaultProps } from '../utils/default-props'
+import { useProgress } from '../core/useProgress.tsx'
+import { defaultProps } from '../utils/default-props.ts'
 
 interface LoaderOptions {
   containerStyles: any
diff --git a/src/web/index.ts b/src/web/index.ts
index 092f953..d7e0b02 100644
--- a/src/web/index.ts
+++ b/src/web/index.ts
@@ -1,7 +1,7 @@
-export * from '../core'
-export * from './KeyboardControls'
-export { Loader } from './Loader'
-export { useCursor } from './useCursor'
+export * from '../core/index.ts'
+export * from './KeyboardControls.tsx'
+export { Loader } from './Loader.tsx'
+export { useCursor } from './useCursor.tsx'
 // export { Html } from './unported/Html'
 // export { CycleRaycast } from './unported/CycleRaycast'
 // export * from './unported/ScrollControls'
diff --git a/src/web/unported/CycleRaycast.tsx b/src/web/unported/CycleRaycast.tsx
index d9794b7..37e85e3 100644
--- a/src/web/unported/CycleRaycast.tsx
+++ b/src/web/unported/CycleRaycast.tsx
@@ -76,7 +76,7 @@ export function CycleRaycast(_props: CycleRaycastProps) {
     const wheelEvent = (event: WheelEvent) => {
       if (props.preventDefault) event.preventDefault()
       let delta = 0
-      if (!event) event = window.event as WheelEvent
+      if (!event) event = globalThis.event as WheelEvent
       if ((event as any).wheelDelta) delta = (event as any).wheelDelta / 120
       else if (event.detail) delta = -event.detail / 3
       if (hits.length > 1) refresh(current => Math.abs(current - delta))
diff --git a/src/web/unported/Html.tsx b/src/web/unported/Html.tsx
index 650efdf..95fe513 100644
--- a/src/web/unported/Html.tsx
+++ b/src/web/unported/Html.tsx
@@ -25,8 +25,8 @@ import {
   Vector3,
 } from 'three'
 import { Assign } from 'utility-types'
-import { when, whenever } from '../../utils/conditionals'
-import { processProps } from '../../utils/process-props'
+import { when, whenever } from '../../utils/conditionals.ts'
+import { processProps } from '../../utils/process-props.ts'
 
 const v1 = new Vector3()
 const v2 = new Vector3()
diff --git a/src/web/unported/pivotControls/AxisArrow.tsx b/src/web/unported/pivotControls/AxisArrow.tsx
index fae176a..208230a 100644
--- a/src/web/unported/pivotControls/AxisArrow.tsx
+++ b/src/web/unported/pivotControls/AxisArrow.tsx
@@ -1,9 +1,9 @@
 import { Component, createMemo, createSignal, useContext } from 'solid-js'
 import { T, ThreeEvent, useThree } from 'solid-three'
 import * as THREE from 'three'
-import { Line } from '../../../core/Line'
-import { Html } from '../Html'
-import { context as pivotContext } from './context'
+import { Line } from '../../../core/Line.tsx'
+import { Html } from '../Html.tsx'
+import { context as pivotContext } from './context.ts'
 
 const vec1 = new THREE.Vector3()
 const vec2 = new THREE.Vector3()
diff --git a/src/web/unported/pivotControls/AxisRotator.tsx b/src/web/unported/pivotControls/AxisRotator.tsx
index 23de378..860e0de 100644
--- a/src/web/unported/pivotControls/AxisRotator.tsx
+++ b/src/web/unported/pivotControls/AxisRotator.tsx
@@ -2,9 +2,9 @@ import clamp from 'lodash.clamp'
 import { Component, createMemo, createSignal, useContext } from 'solid-js'
 import { T, ThreeEvent, useThree } from 'solid-three'
 import * as THREE from 'three'
-import { Line } from '../../../core/Line'
-import { Html } from '../Html'
-import { context } from './context'
+import { Line } from '../../../core/Line.tsx'
+import { Html } from '../Html.tsx'
+import { context } from './context.ts'
 
 const clickDir = new THREE.Vector3()
 const intersectionDir = new THREE.Vector3()
diff --git a/src/web/unported/pivotControls/PlaneSlider.tsx b/src/web/unported/pivotControls/PlaneSlider.tsx
index a60da7c..9d9c137 100644
--- a/src/web/unported/pivotControls/PlaneSlider.tsx
+++ b/src/web/unported/pivotControls/PlaneSlider.tsx
@@ -1,9 +1,9 @@
 import { Component, createMemo, createSignal, useContext } from 'solid-js'
 import { T, ThreeEvent, useThree } from 'solid-three'
 import * as THREE from 'three'
-import { Line } from '../../../core/Line'
-import { Html } from '../Html'
-import { context } from './context'
+import { Line } from '../../../core/Line.tsx'
+import { Html } from '../Html.tsx'
+import { context } from './context.ts'
 
 const decomposeIntoBasis = (e1: THREE.Vector3, e2: THREE.Vector3, offset: THREE.Vector3) => {
   const i1 =
@@ -193,7 +193,7 @@ export const PlaneSlider: Component<{
       )}
       <T.Group position={[pos1 * 1.7, pos1 * 1.7, 0]}>
         <T.Mesh
-          visible={true}
+          visible
           onPointerDown={onPointerDown}
           onPointerMove={onPointerMove}
           onPointerUp={onPointerUp}
diff --git a/src/web/unported/pivotControls/index.tsx b/src/web/unported/pivotControls/index.tsx
index 4b6c2bd..7a70ebe 100644
--- a/src/web/unported/pivotControls/index.tsx
+++ b/src/web/unported/pivotControls/index.tsx
@@ -1,11 +1,11 @@
 import { ParentProps, Ref, createEffect, createRenderEffect } from 'solid-js'
 import { Size, T, useFrame } from 'solid-three'
 import * as THREE from 'three'
-import { processProps } from '../../../utils/process-props'
-import { AxisArrow } from './AxisArrow'
-import { AxisRotator } from './AxisRotator'
-import { PlaneSlider } from './PlaneSlider'
-import { OnDragStartProps, context } from './context'
+import { processProps } from '../../../utils/process-props.ts'
+import { AxisArrow } from './AxisArrow.tsx'
+import { AxisRotator } from './AxisRotator.tsx'
+import { PlaneSlider } from './PlaneSlider.tsx'
+import { OnDragStartProps, context } from './context.ts'
 
 const tV0 = new THREE.Vector3()
 const tV1 = new THREE.Vector3()
diff --git a/test/index.test.tsx b/test/index.test.tsx
index a5f8a55..560e8c2 100644
--- a/test/index.test.tsx
+++ b/test/index.test.tsx
@@ -1,7 +1,7 @@
 import { createRoot, createSignal } from 'solid-js'
 import { isServer } from 'solid-js/web'
 import { describe, expect, it } from 'vitest'
-import { Hello, createHello } from '../src'
+import { Hello, createHello } from '../src/index.ts'
 
 describe('environment', () => {
   it('runs on server', () => {
diff --git a/test/server.test.tsx b/test/server.test.tsx
index 38ac3b8..8d9629d 100644
--- a/test/server.test.tsx
+++ b/test/server.test.tsx
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import { isServer, renderToString } from 'solid-js/web'
-import { Hello, createHello } from '../src'
+import { Hello, createHello } from '../src/index.ts'
 
 describe('environment', () => {
   it('runs on server', () => {
diff --git a/tsup.config.ts b/tsup.config.ts
index 9ee4660..3c257c8 100644
--- a/tsup.config.ts
+++ b/tsup.config.ts
@@ -1,6 +1,7 @@
 import fs from 'fs/promises'
 import { defineConfig } from 'tsup'
 import * as preset from 'tsup-preset-solid'
+import process from "node:process";
 
 const preset_options: preset.PresetOptions = {
   entries: {