item surfaces

apps/editor/components/ui/item-catalog/catalog-items.tsx

@@ -435,6 +435,9 @@ export const CATALOG_ITEMS: AssetInput[] = [
     offset: [0, 0, 0],
     rotation: [0, 0, 0],
     dimensions: [2, 0.8, 1],
+    surface: {
+      height: 0.75
+    }
   },
 
   {
@@ -448,6 +451,9 @@ export const CATALOG_ITEMS: AssetInput[] = [
     offset: [0, 0, 0],
     rotation: [0, 0, 0],
     dimensions: [2, 1.1, 1],
+    surface: {
+      height: 1.1
+    }
   },
 
   {
@@ -1176,6 +1182,9 @@ export const CATALOG_ITEMS: AssetInput[] = [
     rotation: [0, 0, 0],
     dimensions: [1, 0.5, 0.7],
     attachTo: "wall-side",
+    surface: {
+      height: 0.12
+    }
   },
 
   {
@@ -1255,6 +1264,9 @@ export const CATALOG_ITEMS: AssetInput[] = [
     offset: [0, 0, 0],
     rotation: [0, 0, 0],
     dimensions: [1.5, 0.8, 1],
+    surface: {
+      height: 0.8
+    }
   },
 
   {
@@ -1385,6 +1397,9 @@ export const CATALOG_ITEMS: AssetInput[] = [
     offset: [0, 0, -0.01],
     rotation: [0, 0, 0],
     dimensions: [0.5, 0.5, 0.5],
+    surface: {
+      height: 0.5
+    }
   },
 
   {
@@ -1398,6 +1413,9 @@ export const CATALOG_ITEMS: AssetInput[] = [
     offset: [0, 0, 0],
     rotation: [0, 0, 0],
     dimensions: [2, 0.4, 1.5],
+    surface: {
+      height: 0.3
+    }
   },
 
   {
@@ -1411,6 +1429,9 @@ export const CATALOG_ITEMS: AssetInput[] = [
     offset: [0, 0, 0],
     rotation: [0, 0, 0],
     dimensions: [2, 0.8, 1],
+    surface: {
+      height: 0.75
+    }
   },
 
   {
@@ -1424,5 +1445,8 @@ export const CATALOG_ITEMS: AssetInput[] = [
     offset: [0, 0, -0.01],
     rotation: [0, 0, 0],
     dimensions: [2.5, 0.8, 1],
+    surface: {
+      height: 0.8
+    }
   },
 ];

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

@@ -3,7 +3,7 @@ import { useViewer } from "@pascal-app/viewer";
 import Image from "next/image";
 import { useState } from "react";
 import { RenamePopover } from "./rename-popover";
-import { TreeNodeWrapper } from "./tree-node";
+import { TreeNode, TreeNodeWrapper } from "./tree-node";
 import { TreeNodeActions } from "./tree-node-actions";
 
 const CATEGORY_ICONS: Record<string, string> = {
@@ -23,6 +23,7 @@ interface ItemTreeNodeProps {
 
 export function ItemTreeNode({ node, depth }: ItemTreeNodeProps) {
   const [renameOpen, setRenameOpen] = useState(false);
+  const [expanded, setExpanded] = useState(true);
   const iconSrc = CATEGORY_ICONS[node.asset.category] || "/icons/couch.png";
   const isSelected = useViewer((state) => state.selection.selectedIds.includes(node.id));
   const isHovered = useViewer((state) => state.hoveredId === node.id);
@@ -46,6 +47,7 @@ export function ItemTreeNode({ node, depth }: ItemTreeNodeProps) {
   };
 
   const defaultName = node.asset.name || "Item";
+  const hasChildren = node.children && node.children.length > 0;
 
   return (
     <RenamePopover
@@ -58,9 +60,9 @@ export function ItemTreeNode({ node, depth }: ItemTreeNodeProps) {
         icon={<Image src={iconSrc} alt="" width={14} height={14} className="object-contain" />}
         label={node.name || defaultName}
         depth={depth}
-        hasChildren={false}
-        expanded={false}
-        onToggle={() => {}}
+        hasChildren={hasChildren}
+        expanded={expanded}
+        onToggle={() => setExpanded(!expanded)}
         onClick={handleClick}
         onDoubleClick={handleDoubleClick}
         onMouseEnter={handleMouseEnter}
@@ -69,7 +71,11 @@ export function ItemTreeNode({ node, depth }: ItemTreeNodeProps) {
         isHovered={isHovered}
         isVisible={node.visible !== false}
         actions={<TreeNodeActions node={node} />}
-      />
+      >
+        {hasChildren && node.children.map((childId) => (
+          <TreeNode key={childId} nodeId={childId} depth={depth + 1} />
+        ))}
+      </TreeNodeWrapper>
     </RenamePopover>
   );
 }