nice state switch

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

@@ -28,9 +28,9 @@ export function ActionMenu({ className }: { className?: string }) {
           className,
         )}
       >
-        {/* Structure Tools Row - Animated */}
+        {/* Item Catalog Row - Only show when in build mode with item tool */}
         <AnimatePresence>
-          {tool === "item" && catalogCategory && (
+          {mode === "build" && tool === "item" && catalogCategory && (
             <motion.div
               className={cn(
                 "overflow-hidden border-zinc-800 max-h-96 border-b px-2 py-2",

apps/editor/components/ui/action-menu/structure-tools.tsx

@@ -26,12 +26,18 @@ export const tools: ToolConfig[] = [
 export function StructureTools() {
   const activeTool = useEditor((state) => state.tool)
   const catalogCategory = useEditor((state) => state.catalogCategory)
+  const structureLayer = useEditor((state) => state.structureLayer)
   const setTool   = useEditor((state) => state.setTool)
   const setCatalogCategory = useEditor((state) => state.setCatalogCategory)
 
+  // Filter tools based on structureLayer
+  const visibleTools = structureLayer === 'zones'
+    ? tools.filter((t) => t.id === 'zone')
+    : tools.filter((t) => t.id !== 'zone')
+
   return (
     <div className="flex items-center gap-1.5">
-      {tools.map((tool, index) => {
+      {visibleTools.map((tool, index) => {
         // For item tools with catalog category, check both tool and category match
         const isActive =
           activeTool === tool.id &&

apps/editor/components/ui/sidebar/panels/site-panel/index.tsx

@@ -401,11 +401,14 @@ function ContentSection() {
 }
 
 function StructurePhaseView() {
+  const phase = useEditor((state) => state.phase);
+
   return (
     <div className="flex flex-col h-full">
       <BuildingSelector />
       <LevelsSection />
-      <LayerToggle />
+      {/* Only show layer toggle in structure phase, furnish is always elements */}
+      {phase === "structure" && <LayerToggle />}
       <div className="flex-1 overflow-auto">
         <ContentSection />
       </div>

apps/editor/store/use-editor.tsx

@@ -66,6 +66,9 @@ const useEditor = create<EditorState>()((set, get) => ({
 
     set({ phase })
 
+    // Clear tool and catalog when switching phases
+    set({ tool: null, catalogCategory: null })
+
     const viewer = useViewer.getState()
     const scene = useScene.getState()
 
@@ -116,21 +119,51 @@ const useEditor = create<EditorState>()((set, get) => ({
       case 'furnish':
         selectBuildingAndLevel0()
         viewer.setLevelMode('solo')
+        // Furnish mode only supports elements layer, not zones
+        set({ structureLayer: 'elements' })
         break
     }
   },
   mode: 'select',
-  setMode: (mode) => set({ mode }),
+  setMode: (mode) => {
+    set({ mode })
+
+    const { phase, structureLayer, tool } = get()
+
+    // When entering build mode in structure phase with zones layer, activate zone tool
+    if (mode === 'build' && phase === 'structure' && structureLayer === 'zones') {
+      set({ tool: 'zone' })
+    }
+    // When leaving build mode, clear tool
+    else if (mode !== 'build' && tool) {
+      set({ tool: null })
+    }
+  },
   tool: null,
   setTool: (tool) => set({ tool }),
   structureLayer: 'elements',
   setStructureLayer: (layer) => {
+    const { mode, tool } = get()
     set({ structureLayer: layer })
+
     const viewer = useViewer.getState()
     viewer.setSelection({
       selectedIds: [],
       zoneId: null,
     })
+
+    // Handle tool changes based on layer
+    if (layer === 'zones') {
+      // In zones layer with build mode, activate zone tool
+      if (mode === 'build') {
+        set({ tool: 'zone' })
+      }
+    } else {
+      // In elements layer, clear zone tool if it was active
+      if (tool === 'zone') {
+        set({ tool: null })
+      }
+    }
   },
   catalogCategory: null,
   setCatalogCategory: (category) => set({ catalogCategory: category }),