update node, try out threlte uikit

.tool-versions

@@ -1 +1 @@
-nodejs 20.13.1
+nodejs 22.13.1

package.json

@@ -2,6 +2,9 @@
 	"name": "playground",
 	"version": "0.0.1",
 	"private": true,
+	"engines": {
+		"node": ">=22.13.1"
+	},
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
@@ -62,6 +65,7 @@
 		"html-to-text": "^9.0.5",
 		"marked": "^12.0.2",
 		"mdsvex": "^0.12.3",
-		"three": "^0.172.0"
+		"three": "^0.172.0",
+		"threlte-uikit": "^0.5.1"
 	}
 }

src/lib/components/scenes/editor/Scene.svelte

@@ -1,12 +1,17 @@
 <script lang="ts" module>
 	import { T } from '@threlte/core';
+	import { Root, Container, Fullscreen, Text } from 'threlte-uikit';
 </script>
 
 <T.PerspectiveCamera position={[0, 0, 5]} />
 
 <T.Group>
-	<T.Mesh position={[ 0, -0.2, 0 ]}>
+	<Root backgroundColor="red" sizeX={8} sizeY={4} flexDirection="row">
-		<T.BoxGeometry args={[1, 1, 1]} />
+		<Container flexGrow={1} margin={32} backgroundColor="green" />
-		<T.MeshBasicMaterial color="red" />
+		<Container flexGrow={1} margin={32} backgroundColor="blue" />
+	</Root>
+	<T.Mesh position={[0, -0.2, 0]} visible>
+		<T.BoxGeometry args={[3, 5, 0.1]} />
+		<T.MeshStandardMaterial emissive="#187d18" />
 	</T.Mesh>
 </T.Group>

src/lib/components/scenes/game/Title.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { Root, Container } from 'threlte-uikit';
+</script>
+
+<Root backgroundColor="red" sizeX={8} sizeY={4} flexDirection="row">
+	<Container flexGrow={1} margin={32} backgroundColor="green" />
+	<Container flexGrow={1} margin={32} backgroundColor="blue" />
+</Root>