feat(viewer): redesign viewer UI with dark toolbar and camera controls (#126)

Overhaul viewer overlay with a unified bottom toolbar, dark theme support,
theme toggle, camera orbit/top-view controls, and fix TypeScript array
access errors for level and wall mode cycling.

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

apps/editor/app/viewer/[id]/viewer-camera-controls.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { sceneRegistry, useScene } from '@pascal-app/core'
+import { emitter, sceneRegistry, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { CameraControls, CameraControlsImpl } from '@react-three/drei'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
@@ -105,6 +105,54 @@ export const ViewerCameraControls = () => {
     )
   }, [targetNodeId, nodes])
 
+  useEffect(() => {
+    const handleTopView = () => {
+      if (!controls.current) return
+
+      const currentPolarAngle = controls.current.polarAngle
+
+      // Toggle: if already near top view (< 0.1 radians ≈ 5.7°), go back to 45°
+      // Otherwise, go to top view (0°)
+      const targetAngle = currentPolarAngle < 0.1 ? Math.PI / 4 : 0
+
+      controls.current.rotatePolarTo(targetAngle, true)
+    }
+
+    const handleOrbitCW = () => {
+      if (!controls.current) return
+
+      const currentAzimuth = controls.current.azimuthAngle
+      const currentPolar = controls.current.polarAngle
+      // Round to nearest 90° increment, then rotate 90° clockwise
+      const rounded = Math.round(currentAzimuth / (Math.PI / 2)) * (Math.PI / 2)
+      const target = rounded - Math.PI / 2
+
+      controls.current.rotateTo(target, currentPolar, true)
+    }
+
+    const handleOrbitCCW = () => {
+      if (!controls.current) return
+
+      const currentAzimuth = controls.current.azimuthAngle
+      const currentPolar = controls.current.polarAngle
+      // Round to nearest 90° increment, then rotate 90° counter-clockwise
+      const rounded = Math.round(currentAzimuth / (Math.PI / 2)) * (Math.PI / 2)
+      const target = rounded + Math.PI / 2
+
+      controls.current.rotateTo(target, currentPolar, true)
+    }
+
+    emitter.on('camera-controls:top-view', handleTopView)
+    emitter.on('camera-controls:orbit-cw', handleOrbitCW)
+    emitter.on('camera-controls:orbit-ccw', handleOrbitCCW)
+
+    return () => {
+      emitter.off('camera-controls:top-view', handleTopView)
+      emitter.off('camera-controls:orbit-cw', handleOrbitCW)
+      emitter.off('camera-controls:orbit-ccw', handleOrbitCCW)
+    }
+  }, [])
+
   const onTransitionStart = useCallback(() => {
     useViewer.getState().setCameraDragging(true)
   }, [])

apps/editor/app/viewer/[id]/viewer-guest-cta.tsx

@@ -12,12 +12,12 @@ export function ViewerGuestCTA() {
 
   return (
     <>
-      <div className="absolute bottom-6 left-1/2 -translate-x-1/2 z-20">
+      <div className="absolute top-4 right-4 z-20 dark text-foreground">
-        <div className="bg-white/90 backdrop-blur-sm rounded-xl rounded-smooth-xl px-6 py-3 shadow-[0_4px_16px_rgba(0,0,0,0.08),0_0_0_1px_rgba(0,0,0,0.03)] flex items-center gap-4">
+        <div className="pointer-events-auto bg-background/95 backdrop-blur-xl border border-border/40 rounded-2xl px-6 py-3 shadow-lg transition-colors duration-200 ease-out flex flex-col sm:flex-row items-center gap-4">
-          <p className="text-sm text-neutral-700">Want to create your own 3D project?</p>
+          <p className="text-sm font-medium text-foreground text-center">Want to create your own 3D project?</p>
           <button
             onClick={() => setShowSignIn(true)}
-            className="rounded-lg bg-primary px-4 py-2 text-primary-foreground text-sm font-medium hover:bg-primary/90 transition-colors whitespace-nowrap"
+            className="rounded-lg bg-primary px-4 py-2 text-primary-foreground text-sm font-medium hover:bg-primary/90 transition-colors whitespace-nowrap w-full sm:w-auto"
           >
             Get Started
           </button>

apps/editor/app/viewer/[id]/viewer-overlay.tsx

@@ -11,17 +11,46 @@ import {
 import { useViewer } from '@pascal-app/viewer'
 import {
   ArrowLeft,
-  Box,
+  Camera,
   ChevronRight,
   Diamond,
-  Eye,
-  EyeOff,
-  Image,
   Layers,
   Layers2,
+  Moon,
+  Sun,
 } from 'lucide-react'
 import Link from 'next/link'
+import { motion } from 'framer-motion'
+import { cn } from '@/lib/utils'
 import type { ProjectOwner } from '@/features/community/lib/projects/types'
+import { ActionButton } from '@/components/ui/action-menu/action-button'
+import { TooltipProvider } from '@/components/ui/primitives/tooltip'
+import { emitter } from '@pascal-app/core'
+
+const levelModeLabels: Record<'stacked' | 'exploded' | 'solo', string> = {
+  stacked: 'Stacked',
+  exploded: 'Exploded',
+  solo: 'Solo',
+}
+
+const wallModeConfig = {
+  up: {
+    icon: (props: any) => (
+      <img alt="Full Height" height={28} src="/icons/room.png" width={28} {...props} />
+    ),
+    label: 'Full Height',
+  },
+  cutaway: {
+    icon: (props: any) => (
+      <img alt="Cutaway" height={28} src="/icons/wallcut.png" width={28} {...props} />
+    ),
+    label: 'Cutaway',
+  },
+  down: {
+    icon: (props: any) => <img alt="Low" height={28} src="/icons/walllow.png" width={28} {...props} />,
+    label: 'Low',
+  },
+}
 
 const getNodeName = (node: AnyNode): string => {
   if ('name' in node && node.name) return node.name
@@ -53,6 +82,7 @@ export const ViewerOverlay = ({
   const cameraMode = useViewer((s) => s.cameraMode)
   const levelMode = useViewer((s) => s.levelMode)
   const wallMode = useViewer((s) => s.wallMode)
+  const theme = useViewer((s) => s.theme)
 
   const building = selection.buildingId
     ? (nodes[selection.buildingId] as BuildingNode | undefined)
@@ -95,24 +125,24 @@ export const ViewerOverlay = ({
   return (
     <>
       {/* Unified top-left card */}
-      <div className="absolute top-4 left-4 z-20 flex flex-col gap-3">
+      <div className="absolute top-4 left-4 z-20 flex flex-col gap-3 dark text-foreground">
-        <div className="bg-white/80 backdrop-blur-sm rounded-lg rounded-smooth shadow-[0_1px_4px_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.03)] overflow-hidden">
+        <div className="pointer-events-auto flex flex-col rounded-2xl border border-border/40 bg-background/95 shadow-lg backdrop-blur-xl transition-colors duration-200 ease-out overflow-hidden min-w-[200px]">
           {/* Project info + back */}
-          <div className="flex items-center gap-3 px-3 py-2">
+          <div className="flex items-center gap-3 px-3 py-2.5">
             <Link
               href="/"
-              className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md hover:bg-neutral-100 transition-colors"
+              className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md hover:bg-white/10 transition-colors"
             >
-              <ArrowLeft className="h-4 w-4 text-neutral-500" />
+              <ArrowLeft className="h-4 w-4 text-muted-foreground" />
             </Link>
             <div className="min-w-0">
-              <div className="text-sm font-medium text-neutral-800 truncate">
+              <div className="text-sm font-medium text-foreground truncate">
                 {projectName || 'Untitled'}
               </div>
               {owner?.username && (
                 <Link
                   href={`/u/${owner.username}`}
-                  className="text-xs text-neutral-500 hover:text-neutral-700 transition-colors"
+                  className="text-xs text-muted-foreground hover:text-foreground transition-colors"
                 >
                   @{owner.username}
                 </Link>
@@ -122,21 +152,21 @@ export const ViewerOverlay = ({
 
           {/* Breadcrumb — only shown when navigated into a building */}
           {building && (
-            <div className="border-t border-neutral-100 px-3 py-1.5">
+            <div className="border-t border-border/40 px-3 py-2">
-              <div className="flex items-center gap-1 text-xs">
+              <div className="flex items-center gap-1.5 text-xs">
                 <button
                   onClick={() => handleBreadcrumbClick('root')}
-                  className="text-neutral-500 hover:text-neutral-800 transition-colors"
+                  className="text-muted-foreground hover:text-foreground transition-colors"
                 >
                   Site
                 </button>
 
                 {building && (
                   <>
-                    <ChevronRight className="w-3 h-3 text-neutral-400" />
+                    <ChevronRight className="w-3 h-3 text-muted-foreground/50" />
                     <button
                       onClick={() => handleBreadcrumbClick('building')}
-                      className={`transition-colors truncate ${level ? 'text-neutral-500 hover:text-neutral-800' : 'text-neutral-800 font-medium'}`}
+                      className={`transition-colors truncate ${level ? 'text-muted-foreground hover:text-foreground' : 'text-foreground font-medium'}`}
                     >
                       {building.name || 'Building'}
                     </button>
@@ -145,10 +175,10 @@ export const ViewerOverlay = ({
 
                 {level && (
                   <>
-                    <ChevronRight className="w-3 h-3 text-neutral-400" />
+                    <ChevronRight className="w-3 h-3 text-muted-foreground/50" />
                     <button
                       onClick={() => handleBreadcrumbClick('level')}
-                      className={`transition-colors truncate ${zone ? 'text-neutral-500 hover:text-neutral-800' : 'text-neutral-800 font-medium'}`}
+                      className={`transition-colors truncate ${zone ? 'text-muted-foreground hover:text-foreground' : 'text-foreground font-medium'}`}
                     >
                       {level.name || `Level ${level.level}`}
                     </button>
@@ -157,9 +187,9 @@ export const ViewerOverlay = ({
 
                 {zone && (
                   <>
-                    <ChevronRight className="w-3 h-3 text-neutral-400" />
+                    <ChevronRight className="w-3 h-3 text-muted-foreground/50" />
                     <span
-                      className={`transition-colors truncate ${selectedNode ? 'text-neutral-500' : 'text-neutral-800 font-medium'}`}
+                      className={`transition-colors truncate ${selectedNode ? 'text-muted-foreground' : 'text-foreground font-medium'}`}
                     >
                       {zone.name}
                     </span>
@@ -168,8 +198,8 @@ export const ViewerOverlay = ({
 
                 {selectedNode && zone && (
                   <>
-                    <ChevronRight className="w-3 h-3 text-neutral-400" />
+                    <ChevronRight className="w-3 h-3 text-muted-foreground/50" />
-                    <span className="text-neutral-800 font-medium truncate">
+                    <span className="text-foreground font-medium truncate">
                       {getNodeName(selectedNode)}
                     </span>
                   </>
@@ -181,161 +211,212 @@ export const ViewerOverlay = ({
 
         {/* Level List (only when building is selected) */}
         {building && levels.length > 0 && (
-          <div className="flex flex-col gap-1 bg-white/80 backdrop-blur-sm rounded-lg p-2 shadow-[0_1px_4px_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.03)] w-40">
+          <div className="pointer-events-auto flex flex-col rounded-2xl border border-border/40 bg-background/95 shadow-lg backdrop-blur-xl transition-colors duration-200 ease-out overflow-hidden w-48 py-1">
-            <span className="text-xs text-neutral-500 px-2 pb-1">Levels</span>
+            <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider px-3 py-2">Levels</span>
-            {levels.map((lvl) => (
+            <div className="flex flex-col">
+              {levels.map((lvl) => {
+                const isSelected = lvl.id === selection.levelId;
+                return (
                   <button
                     key={lvl.id}
                     onClick={() => handleLevelClick(lvl.id)}
-                className={`text-left px-2 py-1 rounded text-sm transition-colors ${
+                    className={cn(
-                  lvl.id === selection.levelId
+                      "relative flex items-center h-8 w-full cursor-pointer group/row text-sm select-none border-b border-r border-border/50 border-r-transparent transition-all duration-200 px-3",
-                    ? 'bg-blue-500 text-white'
+                      isSelected
-                    : 'text-neutral-700 hover:bg-neutral-100'
+                        ? "bg-accent/50 text-foreground border-r-white border-r-3"
-                }`}
+                        : "text-muted-foreground hover:bg-accent/30 hover:text-foreground"
+                    )}
                   >
+                    <div className="flex items-center gap-2 flex-1 min-w-0">
+                      <span className={cn(
+                        "w-4 h-4 flex items-center justify-center shrink-0 transition-all duration-200",
+                        !isSelected && "opacity-60 grayscale"
+                      )}>
+                        <Layers className="w-3.5 h-3.5" />
+                      </span>
+                      <div className="flex-1 min-w-0 truncate text-left">
                         {lvl.name || `Level ${lvl.level}`}
+                      </div>
+                    </div>
                   </button>
-            ))}
+                );
+              })}
+            </div>
           </div>
         )}
       </div>
 
-      {/* Controls Panel - Top Right */}
+      {/* Controls Panel - Bottom Center */}
-      <div className="absolute top-4 right-4 z-20 flex flex-col gap-2">
+      <div className="absolute bottom-6 left-1/2 -translate-x-1/2 z-20 dark text-foreground">
-        {/* Visibility Controls */}
+        <TooltipProvider delayDuration={0}>
-        {(canShowScans || canShowGuides) && (
+          <div className="pointer-events-auto flex flex-row items-center justify-center gap-1.5 rounded-2xl border border-border/40 bg-background/95 p-1.5 shadow-lg backdrop-blur-xl transition-colors duration-200 ease-out h-14">
-          <div className="flex flex-col gap-1 bg-white/80 backdrop-blur-sm rounded-lg p-2 shadow-[0_1px_4px_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.03)]">
+            {/* Theme Toggle */}
-            <span className="text-xs text-neutral-500 px-2 pb-1">Visibility</span>
-            {canShowScans && (
             <button
-                onClick={() => useViewer.getState().setShowScans(!showScans)}
+              className="shrink-0 flex items-center bg-accent/50 rounded-full p-1 border border-border/50 cursor-pointer h-[36px]"
-                className={`flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors ${
+              onClick={() => useViewer.getState().setTheme(theme === 'dark' ? 'light' : 'dark')}
-                  showScans ? 'bg-blue-500 text-white' : 'text-neutral-700 hover:bg-neutral-100'
+              type="button"
-                }`}
+              aria-label="Toggle theme"
             >
-                <Box className="w-4 h-4" />
+              <div className="relative flex">
-                3D Scans
+                {/* Sliding Background */}
-              </button>
+                <motion.div
+                  className="absolute inset-0 bg-white shadow-sm rounded-full dark:bg-white/20"
+                  initial={false}
+                  animate={{
+                    x: theme === "light" ? "100%" : "0%",
+                  }}
+                  transition={{
+                    type: "spring",
+                    stiffness: 500,
+                    damping: 35,
+                  }}
+                  style={{ width: "50%" }}
+                />
+
+                {/* Dark Mode Icon */}
+                <div
+                  className={cn(
+                    "relative z-10 flex h-7 w-9 items-center justify-center rounded-full transition-colors duration-200 pointer-events-none",
+                    theme === "dark"
+                      ? "text-foreground"
+                      : "text-muted-foreground"
                   )}
-            {canShowGuides && (
-              <button
-                onClick={() => useViewer.getState().setShowGuides(!showGuides)}
-                className={`flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors ${
-                  showGuides ? 'bg-blue-500 text-white' : 'text-neutral-700 hover:bg-neutral-100'
-                }`}
                 >
-                <Image className="w-4 h-4" />
+                  <Moon className="h-4 w-4" />
-                Guides
-              </button>
-            )}
                 </div>
+
+                {/* Light Mode Icon */}
+                <div
+                  className={cn(
+                    "relative z-10 flex h-7 w-9 items-center justify-center rounded-full transition-colors duration-200 pointer-events-none",
+                    theme === "light"
+                      ? "text-foreground"
+                      : "text-muted-foreground"
                   )}
+                >
+                  <Sun className="h-4 w-4" />
+                </div>
+              </div>
+            </button>
+            
+            <div className="mx-1 h-5 w-px bg-border/40" />
+
+            {/* Scans and Guides Visibility */}
+            {canShowScans && (
+              <ActionButton
+                label={`Scans: ${showScans ? 'Visible' : 'Hidden'}`}
+                tooltipSide="top"
+                className={showScans ? 'bg-white/10' : 'opacity-60 grayscale hover:opacity-100 hover:grayscale-0 hover:bg-white/5'}
+                onClick={() => useViewer.getState().setShowScans(!showScans)}
+                size="icon"
+                variant="ghost"
+              >
+                <img alt="Scans" className="h-[28px] w-[28px] object-contain" src="/icons/mesh.png" />
+              </ActionButton>
+            )}
+
+            {canShowGuides && (
+              <ActionButton
+                label={`Guides: ${showGuides ? 'Visible' : 'Hidden'}`}
+                tooltipSide="top"
+                className={showGuides ? 'bg-white/10' : 'opacity-60 grayscale hover:opacity-100 hover:grayscale-0 hover:bg-white/5'}
+                onClick={() => useViewer.getState().setShowGuides(!showGuides)}
+                size="icon"
+                variant="ghost"
+              >
+                <img alt="Guides" className="h-[28px] w-[28px] object-contain" src="/icons/floorplan.png" />
+              </ActionButton>
+            )}
+
+            {(canShowScans || canShowGuides) && <div className="mx-1 h-5 w-px bg-border/40" />}
 
             {/* Camera Mode */}
-        <div className="flex flex-col gap-1 bg-white/80 backdrop-blur-sm rounded-lg p-2 shadow-[0_1px_4px_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.03)]">
+            <ActionButton
-          <span className="text-xs text-neutral-500 px-2 pb-1">Camera</span>
+              label={`Camera: ${cameraMode === 'perspective' ? 'Perspective' : 'Orthographic'}`}
-          <button
+              tooltipSide="top"
-            onClick={() =>
+              className={cameraMode === 'orthographic' ? 'bg-violet-500/20 text-violet-400' : 'hover:text-violet-400 hover:bg-white/5'}
-              useViewer
+              onClick={() => useViewer.getState().setCameraMode(cameraMode === 'perspective' ? 'orthographic' : 'perspective')}
-                .getState()
+              size="icon"
-                .setCameraMode(cameraMode === 'perspective' ? 'orthographic' : 'perspective')
+              variant="ghost"
-            }
-            className="flex items-center gap-2 px-2 py-1 rounded text-sm text-neutral-700 hover:bg-neutral-100 transition-colors"
             >
-            {cameraMode === 'perspective' ? (
+              <Camera className="h-6 w-6" />
-              <Eye className="w-4 h-4" />
+            </ActionButton>
-            ) : (
-              <EyeOff className="w-4 h-4" />
-            )}
-            {cameraMode === 'perspective' ? 'Perspective' : 'Orthographic'}
-          </button>
-        </div>
 
             {/* Level Mode */}
-        <div className="flex flex-col gap-1 bg-white/80 backdrop-blur-sm rounded-lg p-2 shadow-[0_1px_4px_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.03)]">
+            <ActionButton
-          <span className="text-xs text-neutral-500 px-2 pb-1">Level Mode</span>
+              label={`Levels: ${levelMode === 'manual' ? 'Manual' : levelModeLabels[levelMode as keyof typeof levelModeLabels]}`}
-          <button
+              tooltipSide="top"
-            onClick={() => useViewer.getState().setLevelMode('stacked')}
+              className={levelMode !== 'stacked' ? 'bg-amber-500/20 text-amber-400' : 'hover:text-amber-400 hover:bg-white/5'}
-            className={`flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors ${
+              onClick={() => {
-              levelMode === 'stacked'
+                if (levelMode === 'manual') return useViewer.getState().setLevelMode('stacked')
-                ? 'bg-blue-500 text-white'
+                const modes: ('stacked' | 'exploded' | 'solo')[] = ['stacked', 'exploded', 'solo']
-                : 'text-neutral-700 hover:bg-neutral-100'
+                const nextIndex = (modes.indexOf(levelMode as any) + 1) % modes.length
-            }`}
+                useViewer.getState().setLevelMode(modes[nextIndex] ?? 'stacked')
+              }}
+              size="icon"
+              variant="ghost"
             >
-            <Layers className="w-4 h-4" />
+              {levelMode === 'solo' && <Diamond className="h-6 w-6" />}
-            Stacked
+              {levelMode === 'exploded' && <Layers2 className="h-6 w-6" />}
-          </button>
+              {(levelMode === 'stacked' || levelMode === 'manual') && <Layers className="h-6 w-6" />}
-          <button
+            </ActionButton>
-            onClick={() => useViewer.getState().setLevelMode('exploded')}
-            className={`flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors ${
-              levelMode === 'exploded'
-                ? 'bg-blue-500 text-white'
-                : 'text-neutral-700 hover:bg-neutral-100'
-            }`}
-          >
-            <Layers2 className="w-4 h-4" />
-            Exploded
-          </button>
-          <button
-            onClick={() => useViewer.getState().setLevelMode('solo')}
-            className={`flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors ${
-              levelMode === 'solo'
-                ? 'bg-blue-500 text-white'
-                : 'text-neutral-700 hover:bg-neutral-100'
-            }`}
-          >
-            <Diamond className="w-4 h-4" />
-            Solo
-          </button>
-        </div>
 
             {/* Wall Mode */}
-        <div className="flex flex-col gap-1 bg-white/80 backdrop-blur-sm rounded-lg p-2 shadow-[0_1px_4px_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.03)]">
+            <ActionButton
-          <span className="text-xs text-neutral-500 px-2 pb-1">Wall Mode</span>
+              label={`Walls: ${wallModeConfig[wallMode as keyof typeof wallModeConfig].label}`}
-          <button
+              tooltipSide="top"
-            onClick={() => useViewer.getState().setWallMode('cutaway')}
+              className={wallMode !== 'cutaway' ? 'bg-white/10' : 'opacity-60 grayscale hover:opacity-100 hover:grayscale-0 hover:bg-white/5'}
-            className={`flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors ${
+              onClick={() => {
-              wallMode === 'cutaway'
+                const modes: ('cutaway' | 'up' | 'down')[] = ['cutaway', 'up', 'down']
-                ? 'bg-blue-500 text-white'
+                const nextIndex = (modes.indexOf(wallMode as any) + 1) % modes.length
-                : 'text-neutral-700 hover:bg-neutral-100'
+                useViewer.getState().setWallMode(modes[nextIndex] ?? 'cutaway')
-            }`}
+              }}
+              size="icon"
+              variant="ghost"
             >
-            <img
+              {(() => {
-              alt="Cutaway"
+                const Icon = wallModeConfig[wallMode as keyof typeof wallModeConfig].icon
-              height={16}
+                return <Icon className="h-[28px] w-[28px]" />
-              src="/icons/wallcut.png"
+              })()}
-              width={16}
+            </ActionButton>
-              className="w-4 h-4"
+
-            />
+            <div className="mx-1 h-5 w-px bg-border/40" />
-            Cutaway
+
-          </button>
+            {/* Camera Actions */}
-          <button
+            <ActionButton
-            onClick={() => useViewer.getState().setWallMode('up')}
+              label="Orbit Left"
-            className={`flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors ${
+              tooltipSide="top"
-              wallMode === 'up' ? 'bg-blue-500 text-white' : 'text-neutral-700 hover:bg-neutral-100'
+              className="group hover:bg-white/5 hidden sm:inline-flex"
-            }`}
+              onClick={() => emitter.emit('camera-controls:orbit-ccw')}
+              size="icon"
+              variant="ghost"
             >
-            <img
+              <img alt="Orbit Left" className="h-[28px] w-[28px] object-contain opacity-70 transition-opacity group-hover:opacity-100 -scale-x-100" src="/icons/rotate.png" />
-              alt="Full Height"
+            </ActionButton>
-              height={16}
+
-              src="/icons/room.png"
+            <ActionButton
-              width={16}
+              label="Orbit Right"
-              className="w-4 h-4"
+              tooltipSide="top"
-            />
+              className="group hover:bg-white/5 hidden sm:inline-flex"
-            Full Height
+              onClick={() => emitter.emit('camera-controls:orbit-cw')}
-          </button>
+              size="icon"
-          <button
+              variant="ghost"
-            onClick={() => useViewer.getState().setWallMode('down')}
-            className={`flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors ${
-              wallMode === 'down'
-                ? 'bg-blue-500 text-white'
-                : 'text-neutral-700 hover:bg-neutral-100'
-            }`}
             >
-            <img alt="Low" height={16} src="/icons/walllow.png" width={16} className="w-4 h-4" />
+              <img alt="Orbit Right" className="h-[28px] w-[28px] object-contain opacity-70 transition-opacity group-hover:opacity-100" src="/icons/rotate.png" />
-            Low
+            </ActionButton>
-          </button>
+
+            <ActionButton
+              label="Top View"
+              tooltipSide="top"
+              className="group hover:bg-white/5"
+              onClick={() => emitter.emit('camera-controls:top-view')}
+              size="icon"
+              variant="ghost"
+            >
+              <img alt="Top View" className="h-[28px] w-[28px] object-contain opacity-70 transition-opacity group-hover:opacity-100" src="/icons/topview.png" />
+            </ActionButton>
           </div>
+        </TooltipProvider>
       </div>
     </>
   )

apps/editor/components/ui/action-menu/action-button.tsx

@@ -12,11 +12,12 @@ interface ActionButtonProps extends React.ComponentProps<typeof Button> {
   shortcut?: string;
   isActive?: boolean;
   tooltipContent?: React.ReactNode;
+  tooltipSide?: "top" | "right" | "bottom" | "left";
 }
 
 export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(
   (
-    { className, children, label, shortcut, isActive, tooltipContent, ...props },
+    { className, children, label, shortcut, isActive, tooltipContent, tooltipSide, ...props },
     ref
   ) => {
     return (
@@ -47,7 +48,7 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
             )}
           </Button>
         </TooltipTrigger>
-        <TooltipContent>
+        <TooltipContent side={tooltipSide}>
           {tooltipContent || (
             <p>
               {label} {shortcut && `(${shortcut})`}

packages/viewer/src/store/use-viewer.ts

@@ -89,7 +89,7 @@ const useViewer = create<ViewerState>()(
       levelMode: "stacked",
       setLevelMode: (mode) => set({ levelMode: mode }),
 
-      wallMode: 'cutaway',
+      wallMode: 'up',
       setWallMode: (mode) => set({ wallMode: mode }),
 
       showScans: true,