Add catalog sidebar panel with categories, search, and click-to-place

src/index.html

@@ -263,6 +263,7 @@
     import { InteractionManager } from './interaction.js';
     import { ThemeManager } from './themes.js';
     import { ExportManager } from './export.js';
+    import { CatalogPanel } from './catalog.js';
 
     const viewer = document.getElementById('viewer');
     const houseRenderer = new HouseRenderer(viewer);
@@ -272,6 +273,7 @@
     let interaction = null;
     let themeManager = null;
     let exportManager = null;
+    let catalogPanel = null;
 
     houseRenderer.loadHouse('../data/sample-house.json').then(async (house) => {
       document.getElementById('house-name').textContent = house.name;
@@ -294,6 +296,11 @@
 
       themeManager = new ThemeManager(houseRenderer);
       exportManager = new ExportManager(houseRenderer, designState);
+      catalogPanel = new CatalogPanel(document.getElementById('catalog-panel'), {
+        renderer: houseRenderer,
+        state: designState,
+        interaction
+      });
       buildFloorButtons();
       buildRoomList();
       buildThemeButtons();
@@ -316,6 +323,7 @@
           btn.classList.add('active');
           buildRoomList();
           selectedRoom = null;
+          if (catalogPanel) catalogPanel.setSelectedRoom(null);
         });
         container.appendChild(btn);
       }
@@ -340,6 +348,7 @@
       document.querySelectorAll('.room-item').forEach(el => {
         el.classList.toggle('active', el.dataset.roomId === roomId);
       });
+      if (catalogPanel) catalogPanel.setSelectedRoom(roomId);
       const room = houseRenderer.getRooms().find(r => r.id === roomId);
       if (room) {
         document.getElementById('info').textContent = `${room.name} (${room.nameEN}) — ${room.area} m²`;