From 8bb0a9c2046f94c69243c940bb94c789379d7c5d Mon Sep 17 00:00:00 2001
From: Marty McGee <support@companyjuice.com>
Date: Thu, 3 Oct 2024 11:11:14 -0700
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=A5=95=20v0.16.1-b2=20=F0=9F=8C=B1=20?=
 =?UTF-8?q?ThreeD:=20Character=20Animations?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/controls/LevaControls.tsx      |  8 ++---
 .../threed/components/controls/Toolbar.tsx    | 24 ++++++++-------
 src/lib/threed/threed.tsx                     | 29 +++++++++++--------
 3 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/src/lib/threed/components/controls/LevaControls.tsx b/src/lib/threed/components/controls/LevaControls.tsx
index a83a7067f..e6b73053c 100644
--- a/src/lib/threed/components/controls/LevaControls.tsx
+++ b/src/lib/threed/components/controls/LevaControls.tsx
@@ -394,8 +394,8 @@ export function ThreeDLevaControls() {
           // background: '#181C20',
           position: 'absolute',
           // // zIndex: 9600,
-          top: 4,
-          left: 140,
+          top: -46,
+          left: 460,
         }}
       >
         <Leva
@@ -403,8 +403,8 @@ export function ThreeDLevaControls() {
           titleBar={showTitleBar && { drag, title, filter, position }} // TITLE | PROJECT_NAME
           // hideTitleBar={true} // default = false. true hides the GUI header
           theme={theme} // you can pass a custom theme (see the styling section)
-          collapsed={false} // default = false. true makes the GUI collapsed to start
-          fill={false} // default = false. true makes the pane fill the parent dom node it's rendered in
+          collapsed={true} // default = false. true makes the GUI collapsed to start
+          fill={true} // default = false. true makes the pane fill the parent dom node it's rendered in
           flat={true} // default = false. true removes border radius and shadow
           hidden={false} // default = false. true hides the GUI
           neverHide={true} // default = true. false allows hiding of the GUI
diff --git a/src/lib/threed/components/controls/Toolbar.tsx b/src/lib/threed/components/controls/Toolbar.tsx
index b84764d57..cd1eb5792 100644
--- a/src/lib/threed/components/controls/Toolbar.tsx
+++ b/src/lib/threed/components/controls/Toolbar.tsx
@@ -19,6 +19,11 @@ import {
 // ** NEXT Imports
 import Image from 'next/image'
 
+// ** RADIX-UI Imports
+import {
+  Flex
+} from '@radix-ui/themes'
+
 // ** MUI Imports
 import { styled } from '@mui/material/styles'
 // mui: ui
@@ -56,7 +61,6 @@ import ccm from '#/lib/utils/console-colors'
 // DEBUG PREFERENCES FOR THIS MODULE
 const debug: boolean = true
 const DEBUG: boolean = true
-const debug_deep: boolean = false
 
 // ==========================================================
 
@@ -724,8 +728,10 @@ const ThreeDToolbar: FC = (): React.ReactNode => {
         <Toolbar
           disableGutters
         >
-          <Box
-            sx={{ flexGrow: 1 }} // , display: { xs: 'none', md: 'flex' }
+          <Flex
+            // display='none' // , display: { xs: 'none', md: 'flex' }
+            flexGrow='1'
+            justify='start'
           >
             <Button
               key='Actions'
@@ -1099,13 +1105,11 @@ const ThreeDToolbar: FC = (): React.ReactNode => {
                 <Typography onClick={() => showAbout}>Show About</Typography>
               </MenuItem>
             </Menu>
-          </Box>
+          </Flex>
 
-          <Box
-            sx={{ 
-              display: 'none', // , display: { xs: 'none', md: 'flex' }
-              flexGrow: 0 
-            }}
+          <Flex
+            display='none' // , display: { xs: 'none', md: 'flex' }
+            flexGrow='0'
           >
             <Tooltip title='Pointer Tool'>
               <IconButton
@@ -1205,7 +1209,7 @@ const ThreeDToolbar: FC = (): React.ReactNode => {
                 <ToolIconAddText />
               </IconButton>
             </Tooltip>
-          </Box>
+          </Flex>
 
         </Toolbar>
       {/* </Box> */}
diff --git a/src/lib/threed/threed.tsx b/src/lib/threed/threed.tsx
index a09d2249d..0dcfaca89 100644
--- a/src/lib/threed/threed.tsx
+++ b/src/lib/threed/threed.tsx
@@ -1,5 +1,9 @@
 // @ :) ts-no-check
 
+// ** REACT Imports
+import { Suspense } from 'react'
+
+// **
 // THREED: this
 
 // THREED: COMPONENTS
@@ -14,7 +18,6 @@ import {
 
 // ** ThreeD using Apollo + React to View Control + Info Panels (Apollo Store/ReactiveVar/State Access)
 import ThreeDControlPanels from '#/lib/threed/components/controls/ControlPanels'
-// const ThreeDControlPanels = dynamic(() => import('#/lib/threed/components/controls/ControlPanels'), { ssr: false })
 
 // ** ThreeD Toolbar
 import ThreeDToolbar from '#/lib/threed/components/controls/Toolbar'
@@ -27,17 +30,19 @@ const ThreeDControls = () => {
   // console.debug('THREED CONTROL[S]: ALL')
   return (
     <>
-      <ThreeDLevaControls />
-      <ThreeDControlPanels />
-      <ThreeDToolbar />
-      <ThreeDGarden />
-      <ThreeDLevaComponent 
-        projectName={'ThreeD: MM projectName'}
-        setProjectName={() => (<></>)}
-        projectNameFromLeva={'ThreeD: MM projectName'}
-        setProjectNameFromLeva={() => (<></>)}
-      />
-      {/* <h1>ThreeD Control[s]: All</h1> */}
+      {/* <ThreeDToolbar /> */}
+      <Suspense fallback={null}>
+        <ThreeDGarden />
+        <ThreeDLevaControls />
+        <ThreeDLevaComponent 
+          projectName={'ThreeD: MM projectName'}
+          setProjectName={() => (<></>)}
+          projectNameFromLeva={'ThreeD: MM projectName'}
+          setProjectNameFromLeva={() => (<></>)}
+        />
+        <ThreeDControlPanels />
+        {/* <h1>ThreeD Control[s]: All</h1> */}
+      </Suspense>
     </>
   )
 }

From 1df5d9c684deb01221d4935ce028b68622cc28b9 Mon Sep 17 00:00:00 2001
From: Marty McGee <support@companyjuice.com>
Date: Thu, 3 Oct 2024 11:20:19 -0700
Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=A5=95=20v0.16.1-b2=20=F0=9F=8C=B1=20?=
 =?UTF-8?q?ThreeD:=20Character=20Animations?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/header.tsx | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/src/layout/header.tsx b/src/layout/header.tsx
index 11e34bfb3..fc545a1c9 100644
--- a/src/layout/header.tsx
+++ b/src/layout/header.tsx
@@ -19,30 +19,21 @@ export default async function Header() {
     <>
       <Grid
         id='ThreeDAppHeader'
-        columns='2' 
-        // gap='3'
-        // justify='end'
-        // align='center'
+        columns='2'
       >
         <Flex
-          // columns='1'
           justify='start'
           align='center'
         >
           {/* <Logo /> */}
           <MainNav />
         </Flex>
-        <Grid
-          columns='1'
-          // justify='end'
+        <Flex
+          justify='end'
           align='center'
         >
-          <Flex
-            justify='end'
-          >
-            <UserButton />
-          </Flex>
-        </Grid>
+          <UserButton />
+        </Flex>
       </Grid>
     </>
   )

From ec9f402c9f93d9e5111cd040a33bbe2fbfe9131b Mon Sep 17 00:00:00 2001
From: Marty McGee <support@companyjuice.com>
Date: Thu, 3 Oct 2024 11:57:36 -0700
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=A5=95=20v0.16.1-b2=20=F0=9F=8C=B1=20?=
 =?UTF-8?q?ThreeD:=20Character=20Animations?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/header.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/layout/header.tsx b/src/layout/header.tsx
index fc545a1c9..f6780bb1b 100644
--- a/src/layout/header.tsx
+++ b/src/layout/header.tsx
@@ -25,14 +25,18 @@ export default async function Header() {
           justify='start'
           align='center'
         >
+
           {/* <Logo /> */}
           <MainNav />
+        
         </Flex>
         <Flex
           justify='end'
           align='center'
         >
+          
           <UserButton />
+        
         </Flex>
       </Grid>
     </>