slab rendering + select

apps/editor/components/editor/selection-manager.tsx

@@ -20,7 +20,7 @@ const isNodeInCurrentLevel = (node: AnyNode): boolean => {
   return nodeLevelId === currentLevelId;
 };
 
-type SelectableNodeType = "wall" | "item" | "building" | "zone";
+type SelectableNodeType = "wall" | "item" | "building" | "zone" | 'slab';
 
 interface SelectionStrategy {
   types: SelectableNodeType[];
@@ -44,7 +44,7 @@ const SELECTION_STRATEGIES: Record<string, SelectionStrategy> = {
   },
 
   structure: {
-    types: ["wall", "item", "zone"],
+    types: ["wall", "item", "zone", "slab"],
     handleSelect: (node, isShift) => {
       const { selection, setSelection } = useViewer.getState();
       if (node.type === 'zone') {
@@ -73,7 +73,7 @@ const SELECTION_STRATEGIES: Record<string, SelectionStrategy> = {
         if (node.type === "zone") return true;
         return false;
       } else {
-        if (node.type === "wall") return true;
+        if (node.type === "wall" || node.type === "slab") return true;
         if (node.type === "item") {
           return (
             (node as ItemNode).asset.category === "door" ||

apps/editor/components/ui/sidebar/panels/site-panel/slab-tree-node.tsx

@@ -0,0 +1,67 @@
+import { SlabNode } from "@pascal-app/core";
+import { useViewer } from "@pascal-app/viewer";
+import { RectangleHorizontal } from "lucide-react";
+import { TreeNodeWrapper } from "./tree-node";
+import { TreeNodeActions } from "./tree-node-actions";
+
+interface SlabTreeNodeProps {
+  node: SlabNode;
+  depth: number;
+}
+
+export function SlabTreeNode({ node, depth }: SlabTreeNodeProps) {
+  const isSelected = useViewer((state) => state.selection.selectedIds.includes(node.id));
+  const isHovered = useViewer((state) => state.hoveredId === node.id);
+  const setSelection = useViewer((state) => state.setSelection);
+  const setHoveredId = useViewer((state) => state.setHoveredId);
+
+  const handleClick = () => {
+    setSelection({ selectedIds: [node.id] });
+  };
+
+  const handleMouseEnter = () => {
+    setHoveredId(node.id);
+  };
+
+  const handleMouseLeave = () => {
+    setHoveredId(null);
+  };
+
+  // Calculate approximate area from polygon
+  const area = calculatePolygonArea(node.polygon).toFixed(1);
+
+  return (
+    <TreeNodeWrapper
+      icon={<RectangleHorizontal className="w-3.5 h-3.5" />}
+      label={node.name || `Slab (${area}m²)`}
+      depth={depth}
+      hasChildren={false}
+      expanded={false}
+      onToggle={() => {}}
+      onClick={handleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      isSelected={isSelected}
+      isHovered={isHovered}
+      actions={<TreeNodeActions node={node} />}
+    />
+  );
+}
+
+/**
+ * Calculate the area of a polygon using the shoelace formula
+ */
+function calculatePolygonArea(polygon: Array<[number, number]>): number {
+  if (polygon.length < 3) return 0;
+
+  let area = 0;
+  const n = polygon.length;
+
+  for (let i = 0; i < n; i++) {
+    const j = (i + 1) % n;
+    area += polygon[i]![0] * polygon[j]![1];
+    area -= polygon[j]![0] * polygon[i]![1];
+  }
+
+  return Math.abs(area) / 2;
+}

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

@@ -2,9 +2,10 @@ import { AnyNodeId, useScene } from "@pascal-app/core";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { BuildingTreeNode } from "./building-tree-node";
-import { LevelTreeNode } from "./level-tree-node";
-import { WallTreeNode } from "./wall-tree-node";
 import { ItemTreeNode } from "./item-tree-node";
+import { LevelTreeNode } from "./level-tree-node";
+import { SlabTreeNode } from "./slab-tree-node";
+import { WallTreeNode } from "./wall-tree-node";
 
 interface TreeNodeProps {
   nodeId: AnyNodeId;
@@ -21,6 +22,8 @@ export function TreeNode({ nodeId, depth = 0 }: TreeNodeProps) {
       return <BuildingTreeNode node={node} depth={depth} />;
     case "level":
       return <LevelTreeNode node={node} depth={depth} />;
+    case "slab":
+      return <SlabTreeNode node={node} depth={depth} />;
     case "wall":
       return <WallTreeNode node={node} depth={depth} />;
     case "item":