@pascal-app/editor 0.7.0 → 0.9.1

package/src/components/ui/sidebar/panels/site-panel/tree-node.tsx

@@ -56,13 +56,20 @@ export function focusTreeNode(nodeId: AnyNodeId) {
 import { cn } from '../../../../../lib/utils'
 import { BuildingTreeNode } from './building-tree-node'
 import { CeilingTreeNode } from './ceiling-tree-node'
+import { ChimneyTreeNode } from './chimney-tree-node'
 import { ColumnTreeNode } from './column-tree-node'
 import { DoorTreeNode } from './door-tree-node'
+import { DormerTreeNode } from './dormer-tree-node'
+import { ElevatorTreeNode } from './elevator-tree-node'
 import { FenceTreeNode } from './fence-tree-node'
+import { GutterTreeNode } from './gutter-tree-node'
 import { ItemTreeNode } from './item-tree-node'
 import { LevelTreeNode } from './level-tree-node'
+import { RegistryTreeNode } from './registry-tree-node'
 import { RoofTreeNode } from './roof-tree-node'
+import { ShelfTreeNode } from './shelf-tree-node'
 import { SlabTreeNode } from './slab-tree-node'
+import { SolarPanelTreeNode } from './solar-panel-tree-node'
 import { SpawnTreeNode } from './spawn-tree-node'
 import { StairTreeNode } from './stair-tree-node'
 import { WallTreeNode } from './wall-tree-node'
@@ -75,43 +82,70 @@ interface TreeNodeProps {
   isLast?: boolean
 }
 
+// Per-kind tree-node components keyed by `node.type`. Lookup replaces
+// the legacy switch — adding a kind to this map is now the only edit
+// needed in this file (the switch's `case '<kind>':` clauses were
+// flagged by the Phase 6 grep gate as the last per-kind dispatch
+// outside the registry; future work moves these to a
+// `def.presentation`-driven generic tree-node and removes this map
+// entirely).
+const treeNodeByType: Record<
+  string,
+  React.ComponentType<{ depth: number; isLast?: boolean; nodeId: AnyNodeId }>
+> = {
+  building: BuildingTreeNode as React.ComponentType<{
+    depth: number
+    isLast?: boolean
+    nodeId: AnyNodeId
+  }>,
+  'box-vent': RegistryTreeNode,
+  ceiling: CeilingTreeNode,
+  chimney: ChimneyTreeNode,
+  dormer: DormerTreeNode,
+  'solar-panel': SolarPanelTreeNode,
+  column: ColumnTreeNode,
+  elevator: ElevatorTreeNode,
+  level: LevelTreeNode as React.ComponentType<{
+    depth: number
+    isLast?: boolean
+    nodeId: AnyNodeId
+  }>,
+  shelf: ShelfTreeNode as React.ComponentType<{
+    depth: number
+    isLast?: boolean
+    nodeId: AnyNodeId
+  }>,
+  slab: SlabTreeNode,
+  spawn: SpawnTreeNode as React.ComponentType<{
+    depth: number
+    isLast?: boolean
+    nodeId: AnyNodeId
+  }>,
+  wall: WallTreeNode,
+  fence: FenceTreeNode,
+  gutter: GutterTreeNode,
+  'ridge-vent': RegistryTreeNode,
+  'turbine-vent': RegistryTreeNode,
+  cupola: RegistryTreeNode,
+  'eyebrow-vent': RegistryTreeNode,
+  roof: RoofTreeNode,
+  stair: StairTreeNode,
+  door: DoorTreeNode,
+  window: WindowTreeNode,
+  zone: ZoneTreeNode as React.ComponentType<{
+    depth: number
+    isLast?: boolean
+    nodeId: AnyNodeId
+  }>,
+  item: ItemTreeNode,
+}
+
 export const TreeNode = memo(function TreeNode({ nodeId, depth = 0, isLast }: TreeNodeProps) {
   const nodeType = useScene((state) => state.nodes[nodeId]?.type)
-
   if (!nodeType) return null
-
-  switch (nodeType) {
-    case 'building':
-      return <BuildingTreeNode depth={depth} isLast={isLast} nodeId={nodeId as `building_${string}`} />
-    case 'ceiling':
-      return <CeilingTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
-    case 'column':
-      return <ColumnTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
-    case 'level':
-      return <LevelTreeNode depth={depth} isLast={isLast} nodeId={nodeId as `level_${string}`} />
-    case 'slab':
-      return <SlabTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
-    case 'spawn':
-      return <SpawnTreeNode depth={depth} isLast={isLast} nodeId={nodeId as `spawn_${string}`} />
-    case 'wall':
-      return <WallTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
-    case 'fence':
-      return <FenceTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
-    case 'roof':
-      return <RoofTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
-    case 'stair':
-      return <StairTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
-    case 'item':
-      return <ItemTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
-    case 'door':
-      return <DoorTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
-    case 'window':
-      return <WindowTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
-    case 'zone':
-      return <ZoneTreeNode depth={depth} isLast={isLast} nodeId={nodeId as `zone_${string}`} />
-    default:
-      return null
-  }
+  const Component = treeNodeByType[nodeType]
+  if (!Component) return null
+  return <Component depth={depth} isLast={isLast} nodeId={nodeId} />
 })
 
 interface TreeNodeWrapperProps {

package/src/components/ui/sidebar/panels/site-panel/zone-tree-node.tsx

@@ -44,7 +44,9 @@ export const ZoneTreeNode = memo(function ZoneTreeNode({
       depth={depth}
       expanded={false}
       hasChildren={false}
-      icon={<ColorDot color={color ?? '#3b82f6'} onChange={(c) => updateNode(nodeId, { color: c })} />}
+      icon={
+        <ColorDot color={color ?? '#3b82f6'} onChange={(c) => updateNode(nodeId, { color: c })} />
+      }
       isHovered={isHovered}
       isLast={isLast}
       isSelected={isSelected}

package/src/components/ui/sidebar/panels/zone-panel/index.tsx

@@ -1,7 +1,14 @@
-import { emitter, useScene, type ZoneNode } from '@pascal-app/core'
+import {
+  type AnyNodeId,
+  emitter,
+  useScene,
+  type ZoneNode,
+} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { Camera, Hexagon, Trash2 } from 'lucide-react'
+import { Camera, Hexagon, Save, Trash2 } from 'lucide-react'
 import { useState } from 'react'
+import { sfxEmitter } from './../../../../../lib/sfx-bus'
+import { collectZoneContentIds } from './../../../../../lib/zone-content'
 import { ColorDot } from './../../../../../components/ui/primitives/color-dot'
 import {
   Popover,
@@ -10,6 +17,8 @@ import {
 } from './../../../../../components/ui/primitives/popover'
 import { cn } from './../../../../../lib/utils'
 import useEditor from './../../../../../store/use-editor'
+import { ActionButton } from '../../../controls/action-button'
+import { PanelSection } from '../../../controls/panel-section'
 
 function ZoneItem({ zone }: { zone: ZoneNode }) {
   const [cameraPopoverOpen, setCameraPopoverOpen] = useState(false)
@@ -26,6 +35,7 @@ function ZoneItem({ zone }: { zone: ZoneNode }) {
 
   const handleDelete = (e: React.MouseEvent) => {
     e.stopPropagation()
+    sfxEmitter.emit('sfx:structure-delete')
     deleteNode(zone.id)
     if (isSelected) {
       setSelection({ zoneId: null })
@@ -41,7 +51,7 @@ function ZoneItem({ zone }: { zone: ZoneNode }) {
       className={cn(
         'group/row mx-1 mb-0.5 flex h-8 cursor-pointer select-none items-center rounded-lg border px-2 text-sm transition-all duration-200',
         isSelected
-          ? 'border-neutral-200/60 bg-white text-foreground shadow-[0_1px_2px_0px_rgba(0,0,0,0.05)] ring-1 ring-white/50 ring-inset dark:border-border/50 dark:bg-accent/50 dark:ring-white/10'
+          ? 'border-neutral-200/60 bg-white text-foreground shadow-elevation-0 ring-1 ring-white/50 ring-inset dark:border-border/50 dark:bg-accent/50 dark:ring-white/10'
           : 'border-transparent text-muted-foreground hover:border-neutral-200/50 hover:bg-white/40 hover:text-foreground dark:hover:border-border/40 dark:hover:bg-accent/30',
       )}
       onClick={handleClick}
@@ -125,6 +135,8 @@ function ZoneItem({ zone }: { zone: ZoneNode }) {
 export function ZonePanel() {
   const nodes = useScene((state) => state.nodes)
   const currentLevelId = useViewer((state) => state.selection.levelId)
+  const selectedZoneId = useViewer((state) => state.selection.zoneId)
+  const setSelection = useViewer((state) => state.setSelection)
   const setPhase = useEditor((state) => state.setPhase)
   const setMode = useEditor((state) => state.setMode)
   const setTool = useEditor((state) => state.setTool)
@@ -133,6 +145,7 @@ export function ZonePanel() {
   const levelZones = Object.values(nodes).filter(
     (node): node is ZoneNode => node.type === 'zone' && node.parentId === currentLevelId,
   )
+  const selectedZone = levelZones.find((zone) => zone.id === selectedZoneId)
 
   const handleAddZone = () => {
     if (currentLevelId) {
@@ -142,6 +155,17 @@ export function ZonePanel() {
     }
   }
 
+  const deleteSelectedZone = (withContent: boolean) => {
+    if (!selectedZone) return
+    const scene = useScene.getState()
+    const ids = withContent
+      ? [selectedZone.id as AnyNodeId, ...collectZoneContentIds(scene.nodes, selectedZone)]
+      : [selectedZone.id as AnyNodeId]
+    sfxEmitter.emit('sfx:structure-delete')
+    scene.deleteNodes(Array.from(new Set(ids)))
+    setSelection({ selectedIds: [], zoneId: null })
+  }
+
   if (!currentLevelId) {
     return (
       <div className="px-3 py-4 text-muted-foreground text-sm">
@@ -162,6 +186,31 @@ export function ZonePanel() {
       ) : (
         levelZones.map((zone) => <ZoneItem key={zone.id} zone={zone} />)
       )}
+      {selectedZone ? (
+        <PanelSection className="mt-2 border-t" title="Actions">
+          <ActionButton
+            className="w-full flex-none"
+            icon={<Save className="h-4 w-4" />}
+            label="Save to catalog"
+            onClick={() => emitter.emit('room-preset:create', { zoneId: selectedZone.id })}
+            type="button"
+          />
+          <ActionButton
+            className="w-full flex-none"
+            icon={<Trash2 className="h-4 w-4 text-red-400" />}
+            label="Delete"
+            onClick={() => deleteSelectedZone(false)}
+            type="button"
+          />
+          <ActionButton
+            className="w-full flex-none"
+            icon={<Trash2 className="h-4 w-4 text-red-400" />}
+            label="Delete with contents"
+            onClick={() => deleteSelectedZone(true)}
+            type="button"
+          />
+        </PanelSection>
+      ) : null}
     </div>
   )
 }

package/src/components/ui/sidebar/tab-bar.tsx

@@ -1,13 +1,17 @@
 'use client'
 
 import type { ReactNode } from 'react'
+import { triggerSFX } from './../../../lib/sfx-bus'
 import { cn } from './../../../lib/utils'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../primitives/tooltip'
 
 export type SidebarTab = {
   id: string
   label: string
   mobileDefaultSnap?: number
   mobileIcon?: ReactNode
+  /** Desktop icon shown in the vertical rail (v2 layout). */
+  icon?: ReactNode
 }
 
 interface TabBarProps {
@@ -30,7 +34,11 @@ export function TabBar({ tabs, activeTab, onTabChange }: TabBarProps) {
                 : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground',
             )}
             key={tab.id}
-            onClick={() => onTabChange(tab.id)}
+            onClick={() => {
+              triggerSFX('sfx:menu-click')
+              onTabChange(tab.id)
+            }}
+            onMouseEnter={() => triggerSFX('sfx:menu-hover')}
             type="button"
           >
             {tab.label}
@@ -40,3 +48,55 @@ export function TabBar({ tabs, activeTab, onTabChange }: TabBarProps) {
     </div>
   )
 }
+
+interface IconRailProps {
+  tabs: SidebarTab[]
+  /** Highlighted tab. Stays highlighted while the panel is collapsed. */
+  activeTab: string
+  /** True when the panel beside the rail is collapsed. */
+  collapsed: boolean
+  /** Clicking a rail icon: switch tab, or toggle the panel (see layout). */
+  onIconClick: (id: string) => void
+}
+
+/**
+ * Vertical icon rail for the v2 left column. Always visible (even when the
+ * panel is collapsed) so the user can reopen the panel by clicking an icon.
+ * The label renders as a hover tooltip on the right.
+ */
+export function IconRail({ tabs, activeTab, collapsed, onIconClick }: IconRailProps) {
+  return (
+    <TooltipProvider delayDuration={0} disableHoverableContent>
+      <div className="flex h-full w-14 shrink-0 flex-col items-center gap-1 border-border/50 border-r py-2">
+        {tabs.map((tab) => {
+          // Only show the active highlight while the panel is open. When
+          // collapsed nothing is "open", so every icon reads as unselected.
+          const showActive = activeTab === tab.id && !collapsed
+          return (
+            <Tooltip key={tab.id}>
+              <TooltipTrigger asChild>
+                <button
+                  className={cn(
+                    'group flex h-11 w-11 items-center justify-center rounded-xl transition-all duration-200 [&_img]:transition-[opacity,filter] [&_img]:duration-200',
+                    showActive
+                      ? 'bg-accent text-foreground shadow-sm [&_img]:opacity-100 [&_img]:grayscale-0'
+                      : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground [&_img]:opacity-60 [&_img]:grayscale hover:[&_img]:opacity-100 hover:[&_img]:grayscale-0',
+                  )}
+                  onClick={() => {
+                    triggerSFX('sfx:menu-click')
+                    onIconClick(tab.id)
+                  }}
+                  onMouseEnter={() => triggerSFX('sfx:menu-hover')}
+                  type="button"
+                >
+                  {tab.icon ?? tab.label.charAt(0)}
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="right">{tab.label}</TooltipContent>
+            </Tooltip>
+          )
+        })}
+      </div>
+    </TooltipProvider>
+  )
+}

package/src/components/ui/slider.tsx

@@ -17,7 +17,7 @@ const sliderVariants = cva(
           [&_[data-slot=slider-track]]:border
           [&_[data-slot=slider-track]]:border-neutral-300
           [&_[data-slot=slider-track]]:bg-white/50
-          [&_[data-slot=slider-track]]:shadow-[0_1px_2px_0px_rgba(0,0,0,0.1)]
+          [&_[data-slot=slider-track]]:shadow-elevation-0
           [&_[data-slot=slider-track]]:ring-1
           [&_[data-slot=slider-track]]:ring-white
           [&_[data-slot=slider-track]]:ring-inset

package/src/components/viewer-overlay.tsx

@@ -10,13 +10,35 @@ import {
   useScene,
   type ZoneNode,
 } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { ArrowLeft, Camera, ChevronRight, Diamond, Layers, Moon, Sun } from 'lucide-react'
-import { motion } from 'motion/react'
+import {
+  CLAY_PALETTE,
+  type EdgeMode,
+  getSceneTheme,
+  SCENE_THEMES,
+  useViewer,
+} from '@pascal-app/viewer'
+import {
+  ArrowLeft,
+  Box,
+  Camera,
+  Check,
+  ChevronRight,
+  Diamond,
+  Layers,
+  PenLine,
+  Sparkles,
+} from 'lucide-react'
 import Link from 'next/link'
 import { useShallow } from 'zustand/react/shallow'
+import { getLevelDisplayName } from '../lib/level-name'
 import { cn } from '../lib/utils'
 import { ActionButton } from './ui/action-menu/action-button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from './ui/primitives/dropdown-menu'
 import { TooltipProvider } from './ui/primitives/tooltip'
 
 type ProjectOwner = {
@@ -60,6 +82,143 @@ const wallModeConfig = {
   },
 }
 
+const SHADING_OPTIONS = [
+  { id: 'solid', name: 'Solid', detail: 'Flat and fast — no ambient occlusion', icon: Box },
+  { id: 'rendered', name: 'Rendered', detail: 'Full ambient occlusion', icon: Sparkles },
+] as const
+
+function RenderModeMenu() {
+  const shading = useViewer((s) => s.shading)
+  const active = SHADING_OPTIONS.find((o) => o.id === shading) ?? SHADING_OPTIONS[0]
+  const ActiveIcon = active.icon
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <ActionButton
+          className="text-muted-foreground/80 hover:bg-white/5 hover:text-foreground"
+          label={`Render: ${active.name}`}
+          size="icon"
+          tooltipSide="top"
+          variant="ghost"
+        >
+          <ActiveIcon className="h-6 w-6" />
+        </ActionButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="center" className="min-w-56" side="top">
+        {SHADING_OPTIONS.map((option) => {
+          const OptionIcon = option.icon
+          return (
+            <DropdownMenuItem
+              key={option.id}
+              onSelect={() => useViewer.getState().setShading(option.id)}
+            >
+              <OptionIcon />
+              <div className="flex flex-col">
+                <span className="text-foreground">{option.name}</span>
+                <span className="text-muted-foreground text-xs">{option.detail}</span>
+              </div>
+              {shading === option.id ? <Check className="ml-auto text-foreground" /> : null}
+            </DropdownMenuItem>
+          )
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+function SceneThemeMenu() {
+  const sceneTheme = useViewer((s) => s.sceneTheme)
+  const active = getSceneTheme(sceneTheme)
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <ActionButton
+          className="text-muted-foreground/80 hover:bg-white/5 hover:text-foreground"
+          label={`Theme: ${active.name}`}
+          size="icon"
+          tooltipSide="top"
+          variant="ghost"
+        >
+          <Icon color="currentColor" height={24} icon="lucide:swatch-book" width={24} />
+        </ActionButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="center" className="min-w-48" side="top">
+        {SCENE_THEMES.map((sceneThemeOption) => {
+          const swatches = (['wall', 'roof', 'floor', 'glazing'] as const).map(
+            (role) => sceneThemeOption.clayTints?.[role] ?? CLAY_PALETTE[role],
+          )
+          return (
+            <DropdownMenuItem
+              key={sceneThemeOption.id}
+              onSelect={() => useViewer.getState().setSceneTheme(sceneThemeOption.id)}
+            >
+              <span
+                className="grid h-5 w-5 shrink-0 grid-cols-2 overflow-hidden rounded-sm border border-black/10"
+                style={{ backgroundColor: sceneThemeOption.background }}
+              >
+                {swatches.map((color, index) => (
+                  <span
+                    key={`${sceneThemeOption.id}-${index}`}
+                    style={{ backgroundColor: color }}
+                  />
+                ))}
+              </span>
+              <span className="text-foreground">{sceneThemeOption.name}</span>
+              {sceneTheme === sceneThemeOption.id ? (
+                <Check className="ml-auto text-foreground" />
+              ) : null}
+            </DropdownMenuItem>
+          )
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+const EDGE_OPTIONS = [
+  { id: 'off', name: 'Off', detail: 'No edge lines' },
+  { id: 'soft', name: 'Soft', detail: 'Faint outline of major creases' },
+  { id: 'strong', name: 'Strong', detail: 'Crisp, opaque edge lines' },
+] as const satisfies readonly { id: EdgeMode; name: string; detail: string }[]
+
+function EdgesMenu() {
+  const edges = useViewer((s) => s.edges)
+  const active = EDGE_OPTIONS.find((o) => o.id === edges) ?? EDGE_OPTIONS[0]
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <ActionButton
+          className={
+            edges === 'off'
+              ? 'text-muted-foreground/80 hover:bg-white/5 hover:text-foreground'
+              : 'bg-white/10 text-foreground'
+          }
+          label={`Edges: ${active.name}`}
+          size="icon"
+          tooltipSide="top"
+          variant="ghost"
+        >
+          <PenLine className="h-6 w-6" />
+        </ActionButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="center" className="min-w-56" side="top">
+        {EDGE_OPTIONS.map((option) => (
+          <DropdownMenuItem
+            key={option.id}
+            onSelect={() => useViewer.getState().setEdges(option.id)}
+          >
+            <div className="flex flex-col">
+              <span className="text-foreground">{option.name}</span>
+              <span className="text-muted-foreground text-xs">{option.detail}</span>
+            </div>
+            {edges === option.id ? <Check className="ml-auto text-foreground" /> : null}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
 const getNodeName = (node: AnyNode): string => {
   if ('name' in node && node.name) return node.name
   if (node.type === 'wall') return 'Wall'
@@ -93,7 +252,6 @@ 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)
 
   // Subscribe only to the specific nodes we read so that creating an unrelated
   // node elsewhere in the scene doesn't re-render this overlay.
@@ -206,7 +364,7 @@ export const ViewerOverlay = ({
                       className={`truncate transition-colors ${zone ? 'text-muted-foreground hover:text-foreground' : 'font-medium text-foreground'}`}
                       onClick={() => handleBreadcrumbClick('level')}
                     >
-                      {level.name || `Level ${level.level}`}
+                      {getLevelDisplayName(level)}
                     </button>
                   </>
                 )}
@@ -280,53 +438,6 @@ export const ViewerOverlay = ({
       <div className="dark absolute bottom-6 left-1/2 z-20 -translate-x-1/2 text-foreground">
         <TooltipProvider delayDuration={0}>
           <div className="pointer-events-auto flex h-14 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">
-            {/* Theme Toggle */}
-            <button
-              aria-label="Toggle theme"
-              className="flex h-[36px] shrink-0 cursor-pointer items-center rounded-full border border-border/50 bg-accent/50 p-1"
-              onClick={() => useViewer.getState().setTheme(theme === 'dark' ? 'light' : 'dark')}
-              type="button"
-            >
-              <div className="relative flex">
-                {/* Sliding Background */}
-                <motion.div
-                  animate={{
-                    x: theme === 'light' ? '100%' : '0%',
-                  }}
-                  className="absolute inset-0 rounded-full bg-white shadow-sm dark:bg-white/20"
-                  initial={false}
-                  style={{ width: '50%' }}
-                  transition={{
-                    type: 'spring',
-                    stiffness: 500,
-                    damping: 35,
-                  }}
-                />
-
-                {/* Dark Mode Icon */}
-                <div
-                  className={cn(
-                    'pointer-events-none relative z-10 flex h-7 w-9 items-center justify-center rounded-full transition-colors duration-200',
-                    theme === 'dark' ? 'text-foreground' : 'text-muted-foreground',
-                  )}
-                >
-                  <Moon className="h-4 w-4" />
-                </div>
-
-                {/* Light Mode Icon */}
-                <div
-                  className={cn(
-                    'pointer-events-none relative z-10 flex h-7 w-9 items-center justify-center rounded-full transition-colors duration-200',
-                    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
@@ -392,6 +503,12 @@ export const ViewerOverlay = ({
               <Camera className="h-6 w-6" />
             </ActionButton>
 
+            <RenderModeMenu />
+
+            <SceneThemeMenu />
+
+            <EdgesMenu />
+
             {/* Level Mode */}
             <ActionButton
               className={cn(

package/src/components/viewer-zone-system.tsx

@@ -12,7 +12,7 @@ export const ViewerZoneSystem = () => {
     const structureLayer = useEditor.getState().structureLayer
     const nodes = useScene.getState().nodes
 
-    sceneRegistry.byType.zone.forEach((id) => {
+    sceneRegistry.byType.zone!.forEach((id) => {
       const obj = sceneRegistry.nodes.get(id)
       if (!obj) return