fix imports

src/lib/Threlte.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import type * as THREE from 'three'
+	import type { Scene, PerspectiveCamera, OrthographicCamera, WebGLRenderer } from 'three'
 	import { useThrelte } from '@threlte/core'
 	import Inspector from './Inspector.svelte'
 
 	export let position: 'draggable' | 'inline' = 'draggable'
-	export let scene: undefined | THREE.Scene = undefined
-	export let camera: undefined | THREE.PerspectiveCamera | THREE.OrthographicCamera = undefined
-	export let renderer: undefined | THREE.WebGLRenderer = undefined
+	export let scene: undefined | Scene = undefined
+	export let camera: undefined | PerspectiveCamera | OrthographicCamera = undefined
+	export let renderer: undefined | WebGLRenderer = undefined
 
 	const context = useThrelte()
 

src/lib/Vanilla.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import type * as THREE from 'three'
+	import type { Scene, PerspectiveCamera, OrthographicCamera, WebGLRenderer } from 'three'
 	import { Canvas } from '@threlte/core'
 	import Threlte from './Threlte.svelte'
 
 	export let position: 'draggable' | 'inline' = 'draggable'
-	export let scene: THREE.Scene
-	export let camera: THREE.PerspectiveCamera | THREE.OrthographicCamera
-	export let renderer: THREE.WebGLRenderer
+	export let scene: Scene
+	export let camera: PerspectiveCamera | OrthographicCamera
+	export let renderer: WebGLRenderer
 </script>
 
 <Canvas

src/lib/components/Bindings/Bindings.svelte

@@ -1,13 +1,19 @@
 <script lang="ts">
-	import * as THREE from 'three'
+	import {
+		Material as ThreeMaterial,
+		type Scene as ThreeScene,
+		type Light as ThreeLight,
+		type PerspectiveCamera,
+		type OrthographicCamera,
+	} from 'three'
 	import { Binding, Textarea, Folder } from 'svelte-tweakpane-ui'
 	import Transform from './Transform/Transform.svelte'
 	import Camera from './Camera.svelte'
 	import Light from './Light.svelte'
 	import Scene from './Scene.svelte'
 	import Material from './Material.svelte'
 
-	export let object: THREE.Scene | THREE.Light | THREE.PerspectiveCamera | THREE.OrthographicCamera
+	export let object: ThreeScene | ThreeLight | PerspectiveCamera | OrthographicCamera
 
 	$: userData = JSON.stringify(object.userData)
 </script>
@@ -74,7 +80,7 @@
 	>
 		<Light {object} />
 	</Folder>
-{:else if 'material' in object && object.material instanceof THREE.Material}
+{:else if 'material' in object && object.material instanceof ThreeMaterial}
 	<Folder
 		title="Material"
 		expanded={false}

src/lib/components/Bindings/Camera.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type * as THREE from 'three'
+	import type { PerspectiveCamera, OrthographicCamera } from 'three'
 	import { Binding } from 'svelte-tweakpane-ui'
 
-	export let object: THREE.PerspectiveCamera | THREE.OrthographicCamera
+	export let object: PerspectiveCamera | OrthographicCamera
 
 	$: object.updateProjectionMatrix()
 

src/lib/components/Bindings/Color.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import type * as THREE from 'three'
+	import type { Object3D, Material } from 'three'
 	import { Binding } from 'svelte-tweakpane-ui'
 
 	export let label = 'color'
 	export let key = 'color'
-	export let object: THREE.Object3D | THREE.Material
+	export let object: Object3D | Material
 
 	const options = {
 		color: { type: 'float' },

src/lib/components/Bindings/Light.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
-	import * as THREE from 'three'
+	import type {
+		DirectionalLight,
+		PointLight,
+		SpotLight,
+		HemisphereLight,
+		RectAreaLight,
+	} from 'three'
 	import { Binding, Folder } from 'svelte-tweakpane-ui'
 	import Color from './Color.svelte'
 	import Shadow from './Shadow.svelte'
 
-	export let object:
-		| THREE.DirectionalLight
-		| THREE.PointLight
-		| THREE.SpotLight
-		| THREE.HemisphereLight
-		| THREE.RectAreaLight
+	export let object: DirectionalLight | PointLight | SpotLight | HemisphereLight | RectAreaLight
 </script>
 
 <Color

src/lib/components/Bindings/Material.svelte

@@ -1,10 +1,18 @@
 <script lang="ts">
-	import * as THREE from 'three'
+	import {
+		type Material,
+		MultiplyOperation,
+		MixOperation,
+		AddOperation,
+		FrontSide,
+		BackSide,
+		DoubleSide,
+	} from 'three'
 	import { Binding, Folder, List } from 'svelte-tweakpane-ui'
 	import Color from './Color.svelte'
 	import Textures from './Textures.svelte'
 
-	export let object: THREE.Material
+	export let object: Material
 
 	$: object.needsUpdate = true
 </script>
@@ -249,9 +257,9 @@
 		bind:value={object.combine}
 		label="combine"
 		options={{
-			MultiplyOperation: THREE.MultiplyOperation,
-			MixOperation: THREE.MixOperation,
-			AddOperation: THREE.AddOperation,
+			MultiplyOperation: MultiplyOperation,
+			MixOperation: MixOperation,
+			AddOperation: AddOperation,
 		}}
 	/>
 {/if}
@@ -358,9 +366,9 @@
 	bind:value={object.side}
 	label="side"
 	options={{
-		FrontSide: THREE.FrontSide,
-		BackSide: THREE.BackSide,
-		DoubleSide: THREE.DoubleSide,
+		FrontSide: FrontSide,
+		BackSide: BackSide,
+		DoubleSide: DoubleSide,
 	}}
 />
 
@@ -369,9 +377,9 @@
 		bind:value={object.shadowSide}
 		label="shadowSide"
 		options={{
-			FrontSide: THREE.FrontSide,
-			BackSide: THREE.BackSide,
-			DoubleSide: THREE.DoubleSide,
+			FrontSide: FrontSide,
+			BackSide: BackSide,
+			DoubleSide: DoubleSide,
 		}}
 	/>
 {/if}

src/lib/components/Bindings/Scene.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import * as THREE from 'three'
+	import { type Scene, type Fog, Texture } from 'three'
 	import { Binding, Separator, Image } from 'svelte-tweakpane-ui'
 	import Color from './Color.svelte'
 	import { persisted } from '../../internal/persisted'
 
-	export let object: THREE.Scene
+	export let object: Scene
 
 	const grid = persisted('grid', true)
 	const gridColor = persisted('gridColor', '#ddd')
@@ -20,7 +20,7 @@
 	$: $gridColor = params.gridColor
 	$: $axes = params.axes
 
-	$: fog = object.fog as THREE.Fog
+	$: fog = object.fog as Fog
 </script>
 
 <Binding
@@ -59,7 +59,7 @@
 			label="background"
 			{object}
 		/>
-	{:else if object.background instanceof THREE.Texture}
+	{:else if object.background instanceof Texture}
 		<Image
 			bind:value={object.background.image.src}
 			fit="cover"

src/lib/components/Bindings/Shadow.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import type * as THREE from 'three'
+	import type { LightShadow, PerspectiveCamera, OrthographicCamera } from 'three'
 	import { Binding, Folder, List } from 'svelte-tweakpane-ui'
 	import Camera from './Camera.svelte'
 
-	export let object: THREE.LightShadow
+	export let object: LightShadow
 
 	let mapSize = object.mapSize.width
 
@@ -14,7 +14,7 @@
 		object.map = null
 	}
 
-	$: camera = object.camera as THREE.PerspectiveCamera | THREE.OrthographicCamera
+	$: camera = object.camera as PerspectiveCamera | OrthographicCamera
 
 	const keys = ['autoUpdate', 'bias', 'blurSamples', 'normalBias', 'radius'] as const
 </script>

src/lib/components/Bindings/Textures.svelte

@@ -1,11 +1,20 @@
 <script lang="ts">
-	import * as THREE from 'three'
+	import {
+		type Material,
+		Texture,
+		MeshBasicMaterial,
+		MeshLambertMaterial,
+		MeshPhongMaterial,
+		MeshToonMaterial,
+		MeshMatcapMaterial,
+		MeshStandardMaterial,
+	} from 'three'
 	import { Binding, Image, Point } from 'svelte-tweakpane-ui'
 
-	export let object: THREE.Material
+	export let object: Material
 </script>
 
-{#if object instanceof THREE.MeshBasicMaterial || object instanceof THREE.MeshLambertMaterial || object instanceof THREE.MeshPhongMaterial}
+{#if object instanceof MeshBasicMaterial || object instanceof MeshLambertMaterial || object instanceof MeshPhongMaterial}
 	{#if object.specularMap}
 		<Image
 			bind:value={object.specularMap.image.src}
@@ -15,7 +24,7 @@
 	{/if}
 {/if}
 
-{#if object instanceof THREE.MeshMatcapMaterial}
+{#if object instanceof MeshMatcapMaterial}
 	{#if object.matcap}
 		<Image
 			bind:value={object.matcap.image.src}
@@ -25,7 +34,7 @@
 	{/if}
 {/if}
 
-{#if object instanceof THREE.MeshBasicMaterial || object instanceof THREE.MeshLambertMaterial || object instanceof THREE.MeshPhongMaterial || object instanceof THREE.MeshStandardMaterial || object instanceof THREE.MeshMatcapMaterial || object instanceof THREE.MeshToonMaterial}
+{#if object instanceof MeshBasicMaterial || object instanceof MeshLambertMaterial || object instanceof MeshPhongMaterial || object instanceof MeshStandardMaterial || object instanceof MeshMatcapMaterial || object instanceof MeshToonMaterial}
 	{#if object.map}
 		<Image
 			bind:value={object.map.image.src}
@@ -43,7 +52,7 @@
 	{/if}
 {/if}
 
-{#if object instanceof THREE.MeshLambertMaterial || object instanceof THREE.MeshPhongMaterial || object instanceof THREE.MeshStandardMaterial || object instanceof THREE.MeshMatcapMaterial || object instanceof THREE.MeshToonMaterial}
+{#if object instanceof MeshLambertMaterial || object instanceof MeshPhongMaterial || object instanceof MeshStandardMaterial || object instanceof MeshMatcapMaterial || object instanceof MeshToonMaterial}
 	{#if object.normalMap}
 		<Image
 			bind:value={object.normalMap.image.src}
@@ -59,15 +68,15 @@
 	{/if}
 {/if}
 
-{#if 'envMap' in object && object.envMap instanceof THREE.Texture}
+{#if 'envMap' in object && object.envMap instanceof Texture}
 	<Image
 		bind:value={object.envMap.image.src}
 		fit="cover"
 		label="envMap"
 	/>
 {/if}
 
-{#if object instanceof THREE.MeshBasicMaterial || object instanceof THREE.MeshLambertMaterial || object instanceof THREE.MeshPhongMaterial || object instanceof THREE.MeshStandardMaterial || object instanceof THREE.MeshToonMaterial}
+{#if object instanceof MeshBasicMaterial || object instanceof MeshLambertMaterial || object instanceof MeshPhongMaterial || object instanceof MeshStandardMaterial || object instanceof MeshToonMaterial}
 	{#if object.aoMap}
 		<Image
 			bind:value={object.aoMap.image.src}
@@ -95,7 +104,7 @@
 	{/if}
 {/if}
 
-{#if object instanceof THREE.MeshLambertMaterial || object instanceof THREE.MeshStandardMaterial || object instanceof THREE.MeshToonMaterial}
+{#if object instanceof MeshLambertMaterial || object instanceof MeshStandardMaterial || object instanceof MeshToonMaterial}
 	{#if object.bumpMap}
 		<Image
 			bind:value={object.bumpMap.image.src}
@@ -141,7 +150,7 @@
 	{/if}
 {/if}
 
-{#if object instanceof THREE.MeshToonMaterial}
+{#if object instanceof MeshToonMaterial}
 	{#if object.gradientMap}
 		<Image
 			bind:value={object.gradientMap.image.src}
@@ -151,7 +160,7 @@
 	{/if}
 {/if}
 
-{#if object instanceof THREE.MeshStandardMaterial}
+{#if object instanceof MeshStandardMaterial}
 	{#if object.metalnessMap}
 		<Image
 			bind:value={object.metalnessMap.image.src}

src/lib/components/Bindings/Transform/Instance.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import * as THREE from 'three'
+	import { type InstancedMesh, Matrix4, Object3D } from 'three'
 	import { Binding, Slider, type BindingRef } from 'svelte-tweakpane-ui'
 
-	export let object: THREE.InstancedMesh
+	export let object: InstancedMesh
 
-	const mat4 = new THREE.Matrix4()
+	const mat4 = new Matrix4()
 
 	let instance = 0
 	let lastInstance = -1
 	const refs: BindingRef[] = []
-	let dummy = new THREE.Object3D()
+	let dummy = new Object3D()
 
 	$: if (instance === lastInstance) {
 		mat4.compose(dummy.position, dummy.quaternion, dummy.scale)

src/lib/components/Bindings/Transform/Transform.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import * as THREE from 'three'
+	import { type Object3D, InstancedMesh } from 'three'
 	import { useTask } from '@threlte/core'
 	import { Binding, Separator, type BindingRef } from 'svelte-tweakpane-ui'
 	import Instance from './Instance.svelte'
 
-	export let object: THREE.Object3D
+	export let object: Object3D
 
 	const refs: BindingRef[] = []
 
@@ -32,7 +32,7 @@
 	label="scale"
 />
 
-{#if object instanceof THREE.InstancedMesh}
+{#if object instanceof InstancedMesh}
 	<Separator />
 	<Instance {object} />
 {/if}

src/lib/components/Internal/AxesHelper.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import * as THREE from 'three'
+	import { Color } from 'three'
 	import { T } from '@threlte/core'
-	import { Line2 } from 'three/examples/jsm/lines/Line2'
-	import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry'
-	import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'
+	import { Line2 } from 'three/examples/jsm/lines/Line2.js'
+	import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js'
+	import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
 
 	export let length = 1
 	export let width = 0.2
@@ -16,7 +16,7 @@
 		vertexColors: true,
 	})
 	const line2 = new Line2(lineGeometry, lineMaterial)
-	const color = new THREE.Color()
+	const color = new Color()
 
 	$: {
 		const positions = new Float32Array(27)