grid fixes, toast z-index on 3d world page, smaller onboarding helper and moved to above promptbox

frontend/apps/editor3d/app/src/pages/PageEnigma/Editor/InfiniteGridHelper.ts

@@ -77,9 +77,9 @@ export class InfiniteGridHelper extends THREE.Mesh {
                     float g1 = getGrid(uSize1);
                     float g2 = getGrid(uSize2);
                     
-                    float grid = mix(g2 * 0.3, g1, g1);
+                    float grid = mix(g2 * 0.1, g1, g1);
                     
-                    gl_FragColor = vec4(uColor.rgb, grid * fadeOut);
+                    gl_FragColor = vec4(uColor.rgb, grid * fadeOut * 0.04);
                     gl_FragColor.a = mix(0.5 * gl_FragColor.a, gl_FragColor.a, g2);
                     
                     if (gl_FragColor.a <= 0.0) discard;
@@ -88,6 +88,9 @@ export class InfiniteGridHelper extends THREE.Mesh {
       extensions: {
         derivatives: true,
       },
+      blending: THREE.AdditiveBlending,
+      depthTest: true,
+      depthWrite: false,
     });
 
     super(geometry, material);

frontend/apps/editor3d/app/src/pages/PageEnigma/Editor/scene.ts

@@ -1084,7 +1084,7 @@ class Scene {
     // Create visual infinite grid
     const size1 = 0.5; // Primary grid
     const size2 = 2.5; // Secondary grid
-    const color = new THREE.Color(0x444444);
+    const color = new THREE.Color(0xffffff);
     const distance = 80;
 
     this.gridHelper = new InfiniteGridHelper(size1, size2, color, distance);

frontend/apps/editor3d/app/src/pages/PageEnigma/comps/OnboardingHelper.tsx

@@ -13,6 +13,7 @@ export const OnboardingHelper = () => {
 
   useEffect(() => {
     // Check if the helper was dismissed
+    /*
     const dismissedData = localStorage.getItem(STORAGE_KEY);
     if (dismissedData) {
       const { timestamp } = JSON.parse(dismissedData);
@@ -24,6 +25,7 @@ export const OnboardingHelper = () => {
         localStorage.removeItem(STORAGE_KEY);
       }
     }
+    */
   }, []);
 
   const handleClose = () => {
@@ -61,7 +63,7 @@ export const OnboardingHelper = () => {
 
   return (
     <Transition
-      show={isVisible && !(actionPerformed && keyPressed)}
+      show={isVisible && !actionPerformed && !keyPressed}
       enter="transition-opacity duration-500"
       enterFrom="opacity-0"
       enterTo="opacity-100"
@@ -69,26 +71,29 @@ export const OnboardingHelper = () => {
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
     >
-      <div className="glass pointer-events-none absolute left-1/2 top-48 z-10 flex -translate-x-1/2 transform items-center justify-center gap-2 rounded-2xl border-2 border-brand-primary !bg-brand-primary/10 px-5 py-4">
-        <div className="flex items-center">
-          <p className="pr-3 text-lg font-semibold">Hold</p>
-          <Mouse button="left" />
-          <p className="text-lg font-semibold">and drag</p>
-        </div>
-        <div className="flex items-center gap-2">
+      <div className="glass pointer-events-none absolute left-1/2 bottom-56 z-10 flex -translate-x-1/2 flex-col items-center justify-center gap-1 rounded-xl border border-brand-primary !bg-brand-primary/10 px-3 pr-4 py-2">
+        <div className="flex items-center gap-4">
           <div className="flex items-center gap-2">
-            <Plus />
-            <KeyGroup>
-              <Key button="W" />
-              <Key button="A" />
-              <Key button="S" />
-              <Key button="D" />
-            </KeyGroup>
+            <div className="scale-75 origin-center -mx-3">
+              <KeyGroup>
+                <Key button="W" />
+                <Key button="A" />
+                <Key button="S" />
+                <Key button="D" />
+              </KeyGroup>
+            </div>
+            <p className="text-sm font-semibold">Move</p>
+          </div>
+          <div className="h-4 w-[1px] bg-white/20" />
+          <div className="flex items-center gap-2">
+            <div className="scale-75 origin-center -mx-1">
+              <Mouse button="left" />
+            </div>
+            <p className="text-sm font-semibold">Look</p>
           </div>
         </div>
-        <p className="text-lg font-semibold">to move around the scene</p>
-        <div className="pointer-events-auto ml-2">
-          <CloseButton onClick={handleClose} />
+        <div className="pointer-events-auto absolute -top-2 -right-2">
+          <CloseButton onClick={handleClose} className="h-5 w-5 bg-black/50 hover:bg-black/80 rounded-full border border-white/10" />
         </div>
       </div>
     </Transition>

frontend/libs/components/toaster/src/lib/toaster.tsx

@@ -15,7 +15,7 @@ export function Toaster({
   offsetBottom = 12,
   offsetLeft = 12,
   offsetRight = 12,
-  zIndex = 9,
+  zIndex = 15,
 }: ToasterProps) {
   return (
     <RHToaster

frontend/libs/components/viewer-3d/src/lib/viewer-3d.tsx

@@ -18,7 +18,7 @@ export function Viewer3D({
   previewUrl,
   isActive,
   className = "",
-  showGrid = true,
+  showGrid = false,
   onThumbnailCapture,
 }: Viewer3DProps) {
   const containerRef = useRef<HTMLDivElement>(null);
@@ -93,7 +93,9 @@ export function Viewer3D({
       frontLight.position.set(0, 4, 10);
       scene.add(frontLight);
 
-      const gridHelper = new THREE.GridHelper(10, 10, 0x444444, 0x333333);
+      const gridHelper = new THREE.GridHelper(10, 10, 0xffffff, 0xffffff);
+      gridHelper.material.opacity = 0.05;
+      gridHelper.material.transparent = true;
       gridHelper.visible = showGrid;
       scene.add(gridHelper);
       gridRef.current = gridHelper;