viewer rendering canvas & scene

apps/editor/components/editor.tsx

@@ -1,32 +1,7 @@
 "use client";
 
-import { Environment, OrbitControls } from "@react-three/drei";
+import { Viewer } from "@pascal-app/viewer";
-import { Canvas, ThreeToJSXElements } from "@react-three/fiber";
-
-import { extend } from "@react-three/fiber";
-import * as THREE from "three/webgpu";
-import { SceneRenderer } from "./renderers/scene-renderer";
-
-declare module "@react-three/fiber" {
-  interface ThreeElements extends ThreeToJSXElements<typeof THREE> {}
-}
-
-extend(THREE as any);
 
 export default function Editor() {
-  return (
+  return <Viewer />;
-    <Canvas
-      className={"bg-[#303035]"}
-      gl={async (props) => {
-        const renderer = new THREE.WebGPURenderer(props as any);
-        await renderer.init();
-        return renderer;
-      }}
-      shadows
-    >
-      <OrbitControls />
-      <Environment preset="sunset" />
-      <SceneRenderer />
-    </Canvas>
-  );
 }

apps/editor/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@pascal-app/core": "*",
+    "@pascal-app/viewer": "*",
     "@react-three/drei": "^10",
     "@react-three/fiber": "^9",
     "@react-three/uikit-lucide": "^1.0.60",

bun.lock

@@ -15,6 +15,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@pascal-app/core": "*",
+        "@pascal-app/viewer": "*",
         "@react-three/drei": "^10",
         "@react-three/fiber": "^9",
         "@react-three/uikit-lucide": "^1.0.60",
@@ -103,14 +104,16 @@
         "@react-three/drei": "^10",
         "@react-three/fiber": "^9",
         "@repo/typescript-config": "*",
-        "three": "^0.176",
+        "@types/react": "^19.2.2",
+        "@types/three": "^0.182.0",
+        "three": "^0.182",
         "typescript": "5.9.2",
       },
       "peerDependencies": {
         "@pascal-app/core": "*",
         "@react-three/drei": "^10",
         "@react-three/fiber": "^9",
-        "three": "^0.176",
+        "three": "^0.182",
       },
     },
   },
@@ -995,6 +998,8 @@
 
     "@eslint/eslintrc/globals": ["globals@14.0.0", "", {}, "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ=="],
 
+    "@pascal-app/viewer/three": ["three@0.182.0", "", {}, "sha512-GbHabT+Irv+ihI1/f5kIIsZ+Ef9Sl5A1Y7imvS5RQjWgtTPfPnZ43JmlYI7NtCRDK9zir20lQpfg8/9Yd02OvQ=="],
+
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.8.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.1.0", "tslib": "^2.4.0" }, "bundled": true }, "sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg=="],
 
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.8.1", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg=="],

packages/viewer/package.json

@@ -15,13 +15,15 @@
     "@pascal-app/core": "*",
     "@react-three/drei": "^10",
     "@react-three/fiber": "^9",
-    "three": "^0.176"
+    "three": "^0.182"
   },
   "devDependencies": {
     "@react-three/drei": "^10",
     "@react-three/fiber": "^9",
     "@repo/typescript-config": "*",
-    "three": "^0.176",
+    "@types/react": "^19.2.2",
-    "typescript": "5.9.2"
+    "three": "^0.182",
+    "typescript": "5.9.2",
+    "@types/three": "^0.182.0"
   }
 }

packages/viewer/src/components/viewer/viewer.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Environment, OrbitControls } from "@react-three/drei";
+import { Canvas, ThreeToJSXElements } from "@react-three/fiber";
+
+import { extend } from "@react-three/fiber";
+import * as THREE from "three/webgpu";
+import { SceneRenderer } from "../renderers/scene-renderer";
+
+declare module "@react-three/fiber" {
+  interface ThreeElements extends ThreeToJSXElements<typeof THREE> {}
+}
+
+extend(THREE as any);
+
+interface ViewerProps {}
+
+const Viewer: React.FC<ViewerProps> = () => {
+  return (
+    <Canvas
+      className={"bg-[#303035]"}
+      gl={async (props) => {
+        const renderer = new THREE.WebGPURenderer(props as any);
+        await renderer.init();
+        return renderer;
+      }}
+      shadows
+    >
+      <OrbitControls />
+      <Environment preset="sunset" />
+      <SceneRenderer />
+    </Canvas>
+  );
+};
+
+export default Viewer;

packages/viewer/src/index.ts

@@ -1 +1 @@
-export {}
+export { default as Viewer } from "./components/viewer/viewer"