Docs update

packages/docs/next.config.js

@@ -13,7 +13,7 @@ const withNextra = nextra({
   search: {
     codeblocks: false
   },
-  contentDirBasePath: '/playground',
+  contentDirBasePath: '/examples',
 })
 
 export default withNextra({
@@ -35,8 +35,8 @@ export default withNextra({
   },
   redirects: async () => [
     {
-        source: '/playground',
-        destination: '/playground/model-viewer',
+        source: '/examples',
+        destination: '/examples/model-viewer',
         permanent: true
     },
     {

packages/docs/src/app/_meta.global.ts

@@ -1,3 +1,35 @@
+const examples = {
+  "Basic" : {
+    type: 'separator',
+  },
+  'hello-world': {
+    href: '/examples/hello-world'
+  },
+  'load-a-3D-model' : {
+    title : 'Load a 3D model',
+    href: '/examples/load-a-3D-model'
+  },
+  'primitives' : {
+    href: '/examples/primitives'
+  },
+  'pointer-events' : {
+    href: '/examples/pointer-events'
+  },
+  "Advanced" : {
+    type: 'separator',
+  },
+  'model-viewer' : {
+    href: '/examples/model-viewer'
+  },
+  'physics' : {
+    href: '/examples/physics'
+  },
+  'motion' : {
+    href: '/examples/motion'
+  },
+}
+
+
 export default {
   docs: {
     type: 'page',
@@ -26,26 +58,18 @@ export default {
       },
     },
   },
-  playground: {
-
-    title: 'Playground',
-    theme: { footer: false },
+  menuExample: {
+    title: 'Examples',
+    type: 'menu',
+    items: examples
+  },
+  examples: {
+    title: 'Examples',
+    theme: {
+      footer: false
+    },
     items: {
-      "Basic" : {
-        type: 'separator',
-      },
-      'hello-world' : '',
-      'load-a-3D-model' : {
-        'title' : 'Load a 3D model'
-      },
-      'primitives' : '',
-      'pointer-events' : '',
-      "Advanced" : {
-        type: 'separator',
-      },
-      'model-viewer' : '',
-      'physics' : '',
-      'motion' : '',
+      ...examples,
       'splats': {
         display: 'hidden'
       }

packages/docs/src/app/docs/page.mdx

@@ -52,8 +52,8 @@ import { Tabs, Code } from 'nextra/components'
 <Cards num={3}>
   <Cards.Card
     icon={<Terminal />}
-    title="Open in Playground"
-    href="/playground/model-viewer"
+    title="Open in Examples"
+    href="/examples/model-viewer"
     arrow
   />
 </Cards>
@@ -84,7 +84,7 @@ const App = (car) => {
 }
 ```
 
-You can find additional examples in the [Playground](/playground).
+You can find additional examples in the [Examples](/examples).
 
 ### Features
 

packages/docs/src/app/playground/[[...mdxPath]]/page.tsx → packages/docs/src/app/examples/[[...mdxPath]]/page.tsx

@@ -35,7 +35,7 @@ export default async function Page(props: PageProps) {
   )
 
   return (
-    <div className='absolute top-0 left-0 w-screen h-screen'>
+    <div className='absolute top-0 left-0 w-screen h-screen absolute top-0 left-0 w-screen h-screen pointer-events-none'>
       <Playground name={`./${params.mdxPath}.tsx`} code={source} path={metadata.filePath}/>
     </div>
   )

packages/docs/src/content/primitives.mdx

@@ -1,7 +1,7 @@
 export const Primitives = () => {
 
     /**
-     * Aswell as rendering assets, the Render component can also render primtive shapes.
+     * The Render component can render both assets and primtive shapes.
      * Useful for testing and debugging.
      */
 
@@ -49,7 +49,7 @@ export const Primitives = () => {
             <ShadowCatcher width={5} depth={5} />
         </Entity>
 
-        <div className='absolute bottom-0 top-22 p-18'>
+        <div className='pointer-events-auto absolute bottom-0 top-22 right-0 p-18'>
             {buttons}
         </div>
 

packages/docs/src/docs-components/Editor.tsx

@@ -1,5 +1,6 @@
-import { FC, useState, useEffect, createContext, useContext, useMemo } from "react";
+import { FC, useState, useEffect, createContext, useContext, useMemo, useRef } from "react";
 import MonacoEditor from '@monaco-editor/react';
+import { ErrorBoundary } from "./code-error-boundary";
 import { defaultComponents } from "@/../mdx-components";
 import { serialize } from "next-mdx-remote-client/serialize";
 import { MDXClient, type SerializeResult } from "next-mdx-remote-client/csr";
@@ -89,6 +90,8 @@
 
 const Preview: FC = () => {
     const { code } = useContext<EditorContextType>(EditorContext);
+    const resetKey = useRef(0);
+
     const components = defaultComponents;
     const [mdxSource, setMdxSource] = useState<SerializeResult | null>(null);
 
@@ -118,10 +121,12 @@
     if ('error' in mdxSource) return <div>Error parsing MDX: {mdxSource.error.message}</div>;
 
     return (
-        <MDXClient
-            {...mdxSource}
-            components={components}
-        />
+        <ErrorBoundary resetKey={resetKey.current++} >
+            <MDXClient
+                {...mdxSource}
+                components={components}
+            />
+        </ErrorBoundary>
     );
 }
 

packages/docs/src/docs-components/Playground.tsx

@@ -64,7 +64,7 @@ const PlayGround: FC<PlaygroundProps> = ({
             <div id='leva-portal' className='h-0' onMouseMove={e => e.stopPropagation() } >
                 <Leva collapsed hidden/>
             </div>
-            <div className="absolute w-screen h-screen top-0 -z-10" ref={resizeRef} >
+            <div className="absolute w-screen h-screen top-0 -z-10 pointer-events-none" ref={resizeRef} >
                 <Application usePhysics fillMode={FILLMODE_NONE} resolutionMode={RESOLUTION_AUTO} >
                     <ResizeHandler resizeRef={resizeRef}/>
                     <Suspense >
@@ -74,7 +74,7 @@ const PlayGround: FC<PlaygroundProps> = ({
             </div>
             { showCodeEditor && <Suspense>
                 <div 
-                    className='absolute p-0 lg:p-12 top-[calc(var(--nextra-navbar-height)+var(--nextra-banner-height))] h-[calc(100vh-var(--nextra-navbar-height)-var(--nextra-banner-height))] flex mx-auto max-w-[90rem] xl:p-8'
+                    className='absolute p-0 lg:p-12 pointer-events-auto top-[calc(var(--nextra-navbar-height)+var(--nextra-banner-height))] h-[calc(100vh-var(--nextra-navbar-height)-var(--nextra-banner-height))] flex mx-auto max-w-[90rem] xl:p-8'
                     onMouseMove={e => e.stopPropagation() }
                 >
                     <div className='w-screen lg:w-lg overflow-hidden rounded-xl shadow-lg opacity-100 hover:opacity-90 focused:opacity-90 transition-opacity duration-300'>

packages/docs/src/docs-components/code-error-boundary.tsx

@@ -0,0 +1,47 @@
+import React, { Component, ReactNode } from 'react';
+import { CircleAlert } from 'lucide-react';
+
+interface Props {
+  children: ReactNode;
+  resetKey: number; // When this changes, the ErrorBoundary resets
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error };
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    // 🔥 If resetKey changes, clear the error
+    if (prevProps.resetKey !== this.props.resetKey) {
+      this.setState({ hasError: false, error: null });
+    }
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error("Error caught by ErrorBoundary: ", error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="absolute bottom-12 right-12 pointer-events-auto bg-red-400 text-white p-4 rounded-full z-10 shadow-lg flex items-center">
+          <CircleAlert className="w-6 h-6 mr-2" />
+          <span>{this.state.error?.message}</span>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}