added zone selection

app/src/components/layout/sidebarLeft/Outline.tsx

@@ -96,25 +96,10 @@ const Outline: React.FC = () => {
             ) : (
                 <div className="outline-content-container">
                     {/* <section className="outline-section">
-            <DropDownList
+                        <DropDownList value="Layers" items={dropdownItems} isOpen={isLayersOpen} onToggle={() => setIsLayersOpen((prev) => !prev)} showKebabMenu={false} showFocusIcon={true} remove />
-              value="Layers"
-              items={dropdownItems}
-              isOpen={isLayersOpen}
-              onToggle={() => setIsLayersOpen((prev) => !prev)}
-              showKebabMenu={false}
-              showFocusIcon={true}
-              remove
-            />
                     </section> */}
                     <section className="outline-section overflow">
-                        {/* <DropDownList
+                        {/* <DropDownList value="Buildings" items={buildingsList} isOpen={isBuildingsOpen} onToggle={() => setIsBuildingsOpen((prev) => !prev)} showKebabMenu={false} showAddIcon={false} /> */}
-              value="Buildings"
-              items={buildingsList}
-              isOpen={isBuildingsOpen}
-              onToggle={() => setIsBuildingsOpen((prev) => !prev)}
-              showKebabMenu={false}
-              showAddIcon={false}
-            /> */}
                         <DropDownList value="Zones" items={sceneAssetsDataList} isOpen={isZonesOpen} onToggle={() => setIsZonesOpen((prev) => !prev)} showKebabMenu={false} showAddIcon={false} />
                     </section>
                 </div>

app/src/components/ui/list/DropDownList.tsx

@@ -50,12 +50,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
                             <KebabMenuListMultiSelect items={kebabMenuItems} />
                         </div>
                     )}
-          <button
+                    <button id="collapse-btn" title="collapse-btn" className="collapse-icon option" style={{ transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)" }}>
-            id="collapse-btn"
-            title="collapse-btn"
-            className="collapse-icon option"
-            style={{ transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)" }}
-          >
                         <ArrowIcon />
                     </button>
                 </div>

app/src/components/ui/list/OutlineList/ListNew.tsx

@@ -10,12 +10,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
     const { zoneAssetId } = useZoneAssetId();
     const { expandedZones, toggleZoneExpansion } = useZonesExpansion(items);
 
-  const {
+    const { handleSelectZone, handleZoneNameChange, handleAssetClick, handleZoneAssetName } = useZoneAssetHandlers();
-    handleSelectZone,
-    handleZoneNameChange,
-    handleAssetClick,
-    handleZoneAssetName,
-  } = useZoneAssetHandlers();
 
     if (items.length === 0) {
         return (

app/src/modules/builder/floor/Instances/Instance/floorInstance.tsx

@@ -5,6 +5,7 @@ import { useBuilderStore } from "../../../../../store/builder/useBuilderStore";
 import { useToggleView } from "../../../../../store/builder/store";
 import * as Constants from "../../../../../types/world/worldConstants";
 
+import ExtrudePolygon from "../../../wrappers/geomentry/extrudePolygon";
 import DecalInstance from "../../../Decal/decalInstance/decalInstance";
 
 import texturePath from "../../../../../assets/textures/floor/white.png";
@@ -26,7 +27,6 @@ import material4Map from "../../../../../assets/textures/floor/tex3/metal_plate_
 import material4RoughnessMap from "../../../../../assets/textures/floor/tex3/metal_plate_rough_1k.png";
 import material4MetalicMap from "../../../../../assets/textures/floor/tex3/metal_plate_metal_1k.png";
 import material4NormalMap from "../../../../../assets/textures/floor/tex3/metal_plate_nor_gl_1k.png";
-import ExtrudePolygon from "../../../wrappers/geomentry/extrudePolygon";
 
 function FloorInstance({ floor }: { readonly floor: Floor }) {
     const { toggleView } = useToggleView();

app/src/modules/builder/zone/Instances/Instance/zoneInstance.tsx

@@ -1,14 +1,37 @@
-import { Vector3 } from "three";
+import { useRef } from "react";
-import ZoneCornerReference from "./zoneCornerReference";
+import { Group, Vector3 } from "three";
+import useModuleStore from "../../../../../store/ui/useModuleStore";
+import { useToggleView } from "../../../../../store/builder/store";
+import { useBuilderStore } from "../../../../../store/builder/useBuilderStore";
 import ExtrudePolygon from "../../../wrappers/geomentry/extrudePolygon";
 import PlaneMaterial from "../../../wrappers/materials/planeMaterial";
 import PolygonMaterial from "../../../wrappers/materials/polygonMaterial";
+import ZoneCornerReference from "./zoneCornerReference";
 
 function ZoneInstance({ zone }: { readonly zone: Zone }) {
+    const { toggleView } = useToggleView();
+    const { activeModule } = useModuleStore();
+    const { selectedZone, setSelectedZone } = useBuilderStore();
+    const groupRef = useRef<Group>(null);
     const zoneLayer = zone.points[0].layer;
 
     return (
-        <group name={`Zone-${zone.zoneUuid}`} userData={zone}>
+        <group
+            ref={groupRef}
+            name={`Zone-${zone.zoneUuid}`}
+            userData={zone}
+            onDoubleClick={(e) => {
+                if (!toggleView && activeModule === "builder") {
+                    e.stopPropagation();
+                    setSelectedZone({ zoneData: zone, zoneMesh: groupRef.current });
+                }
+            }}
+            onPointerMissed={() => {
+                if (selectedZone && selectedZone.zoneMesh?.userData.zoneUuid === zone.zoneUuid) {
+                    setSelectedZone(null);
+                }
+            }}
+        >
             <ExtrudePolygon options={{ depth: 0, bevelEnabled: false }} points={zone.points}>
                 <PolygonMaterial
                     transparent

app/src/modules/scene/postProcessing/outlineInstances/outlineInstances.tsx

@@ -14,7 +14,7 @@ function OutlineInstances() {
     const { deletableEventSphere } = useDeletableEventSphere();
     const {assetStore} = useSceneContext();
     const {selectedAssets} = assetStore();
-    const { selectedAisle, selectedWall, selectedDecal, selectedFloor, selectedWallAsset, deletableWallAsset, deletableFloorAsset, deletableDecal } = useBuilderStore();
+    const { selectedAisle, selectedWall, selectedDecal, selectedFloor, selectedWallAsset, selectedZone, deletableWallAsset, deletableFloorAsset, deletableDecal } = useBuilderStore();
 
     return (
         <>
@@ -56,6 +56,11 @@ function OutlineInstances() {
                 selection={selectedFloor?.floorMesh ? [selectedFloor.floorMesh] : null}
                 color={CONSTANTS.outlineConfig.assetSelectColor}
             />
+            <OutlineInstance
+                key="selectedZone"
+                selection={selectedZone?.zoneMesh ? flattenChildren(selectedZone.zoneMesh.children) : null}
+                color={CONSTANTS.outlineConfig.assetSelectColor}
+            />
 
             {/* Decals */}
             <OutlineInstance

app/src/store/builder/useBuilderStore.ts

@@ -33,7 +33,7 @@ interface BuilderState {
     topMaterial: string;
 
     // Zone Settings
-    selectedZone: Object3D | null;
+    selectedZone: { zoneMesh: Object3D | null; zoneData: Zone } | null;
     zoneHeight: number;
     zoneColor: string;
 
@@ -94,7 +94,7 @@ interface BuilderState {
     setFloorMaterial: (material: string, side: "side" | "top") => void;
 
     // Setters - Zone
-    setSelectedZone: (zone: Object3D | null) => void;
+    setSelectedZone: (zone: { zoneMesh: Object3D | null; zoneData: Zone } | null) => void;
     setZoneHeight: (height: number) => void;
     setZoneColor: (color: string) => void;
 
@@ -292,7 +292,7 @@ export const useBuilderStore = create<BuilderState>()(
 
         // === Setters: Zone ===
 
-        setSelectedZone: (zone: Object3D | null) => {
+        setSelectedZone: (zone: { zoneMesh: Object3D | null; zoneData: Zone } | null) => {
             set((state) => {
                 state.selectedZone = zone;
             });