@pascal-app/editor 0.7.0 → 0.9.1

package/src/components/ui/sidebar/panels/site-panel/fence-tree-node.tsx

@@ -38,7 +38,7 @@ export const FenceTreeNode = memo(function FenceTreeNode({
 
   return (
     <TreeNodeWrapper
-      actions={<TreeNodeActions node={node} />}
+      actions={<TreeNodeActions nodeId={node.id} />}
       depth={depth}
       expanded={false}
       hasChildren={false}
@@ -53,7 +53,7 @@ export const FenceTreeNode = memo(function FenceTreeNode({
         <InlineRenameInput
           defaultName="Fence"
           isEditing={isEditing}
-          node={node}
+          nodeId={node.id}
           onStartEditing={() => setIsEditing(true)}
           onStopEditing={() => setIsEditing(false)}
         />

package/src/components/ui/sidebar/panels/site-panel/gutter-tree-node.tsx

@@ -0,0 +1,83 @@
+import { type AnyNodeId, type GutterNode, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import Image from 'next/image'
+import { memo, useCallback, useState } from 'react'
+import useEditor from './../../../../../store/use-editor'
+import { InlineRenameInput } from './inline-rename-input'
+import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
+import { TreeNodeActions } from './tree-node-actions'
+
+interface GutterTreeNodeProps {
+  nodeId: AnyNodeId
+  depth: number
+  isLast?: boolean
+}
+
+export const GutterTreeNode = memo(function GutterTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: GutterTreeNodeProps) {
+  const [isEditing, setIsEditing] = useState(false)
+  const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
+  const node = useScene((s) => s.nodes[nodeId] as GutterNode | undefined)
+  const isSelected = useViewer((state) => state.selection.selectedIds.includes(nodeId))
+  const isHovered = useViewer((state) => state.hoveredId === nodeId)
+  const setSelection = useViewer((state) => state.setSelection)
+  const setHoveredId = useViewer((state) => state.setHoveredId)
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      const handled = handleTreeSelection(
+        e,
+        nodeId,
+        useViewer.getState().selection.selectedIds,
+        setSelection,
+      )
+      if (!handled && useEditor.getState().phase === 'furnish') {
+        useEditor.getState().setPhase('structure')
+      }
+    },
+    [nodeId, setSelection],
+  )
+
+  const defaultName = node?.name || 'Gutter'
+
+  return (
+    <TreeNodeWrapper
+      actions={<TreeNodeActions nodeId={nodeId} />}
+      depth={depth}
+      expanded={false}
+      hasChildren={false}
+      icon={
+        <Image
+          alt=""
+          className="object-contain opacity-60"
+          height={14}
+          src="/icons/roof.png"
+          width={14}
+        />
+      }
+      isHovered={isHovered}
+      isLast={isLast}
+      isSelected={isSelected}
+      isVisible={isVisible}
+      label={
+        <InlineRenameInput
+          defaultName={defaultName}
+          isEditing={isEditing}
+          nodeId={nodeId}
+          onStartEditing={() => setIsEditing(true)}
+          onStopEditing={() => setIsEditing(false)}
+        />
+      }
+      nodeId={nodeId}
+      onClick={handleClick}
+      onDoubleClick={() => focusTreeNode(nodeId)}
+      onMouseEnter={() => setHoveredId(nodeId)}
+      onMouseLeave={() => setHoveredId(null)}
+      onToggle={() => {}}
+    />
+  )
+})

package/src/components/ui/sidebar/panels/site-panel/index.tsx

@@ -3,9 +3,9 @@ import {
   type AnyNodeId,
   type BuildingNode,
   emitter,
-  GuideNode,
+  type GuideNode,
   LevelNode,
-  ScanNode,
+  type ScanNode,
   type SiteNode,
   useScene,
   type ZoneNode,
@@ -32,14 +32,13 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from './../../../../../components/ui/primitives/popover'
-import { deleteLevelWithFallbackSelection } from './../../../../../lib/level-selection'
-import { createLocalGuideImage } from './../../../../../lib/local-guide-image'
-
 import {
   buildLevelDuplicateCreateOps,
   type LevelDuplicatePreset,
 } from './../../../../../lib/level-duplication'
-
+import { getDefaultLevelName } from './../../../../../lib/level-name'
+import { deleteLevelWithFallbackSelection } from './../../../../../lib/level-selection'
+import { createLocalGuideImage } from './../../../../../lib/local-guide-image'
 import { cn } from './../../../../../lib/utils'
 import useEditor from './../../../../../store/use-editor'
 import { useUploadStore } from '../../../../../store/use-upload'
@@ -725,7 +724,7 @@ const LevelItem = memo(function LevelItem({
             src="/icons/level.png"
           />
           <InlineRenameInput
-            defaultName={`Level ${level.level}`}
+            defaultName={getDefaultLevelName(level.level)}
             isEditing={isEditing}
             nodeId={level.id}
             onStartEditing={() => setIsEditing(true)}
@@ -1543,10 +1542,7 @@ export function SitePanel({ projectId, onUploadAsset, onDeleteAsset }: SitePanel
     useShallow((s) => {
       if (!siteNode) return []
       return siteNode.children
-        .map((child) => {
-          const id = typeof child === 'string' ? child : child.id
-          return s.nodes[id] as BuildingNode | undefined
-        })
+        .map((childId) => s.nodes[childId as AnyNodeId] as BuildingNode | undefined)
         .filter((node): node is BuildingNode => node?.type === 'building')
     }),
   )
@@ -1573,7 +1569,7 @@ export function SitePanel({ projectId, onUploadAsset, onDeleteAsset }: SitePanel
                   'h-5 w-5 object-contain transition-all',
                   phase !== 'site' && 'opacity-60 grayscale',
                 )}
-                src="/icons/site.png"
+                src="/icons/site-flag.png"
               />
               <span className="font-medium text-sm">{siteNode.name || 'Site'}</span>
             </div>

package/src/components/ui/sidebar/panels/site-panel/level-tree-node.tsx

@@ -3,6 +3,7 @@ import { useViewer } from '@pascal-app/viewer'
 import { Layers } from 'lucide-react'
 import { memo, useCallback, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
+import { getDefaultLevelName } from '../../../../../lib/level-name'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, TreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
@@ -35,7 +36,7 @@ export const LevelTreeNode = memo(function LevelTreeNode({
   const handleStartEditing = useCallback(() => setIsEditing(true), [])
   const handleStopEditing = useCallback(() => setIsEditing(false), [])
 
-  const defaultName = `Level ${level}`
+  const defaultName = getDefaultLevelName(level)
 
   return (
     <TreeNodeWrapper

package/src/components/ui/sidebar/panels/site-panel/registry-tree-node.tsx

@@ -0,0 +1,93 @@
+import { type AnyNodeId, nodeRegistry, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import Image from 'next/image'
+import { memo, useCallback, useState } from 'react'
+import useEditor from './../../../../../store/use-editor'
+import { InlineRenameInput } from './inline-rename-input'
+import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
+import { TreeNodeActions } from './tree-node-actions'
+
+interface RegistryTreeNodeProps {
+  nodeId: AnyNodeId
+  depth: number
+  isLast?: boolean
+}
+
+/**
+ * Generic, leaf tree-node row driven entirely by the kind's
+ * `def.presentation` (icon + label). Replaces the per-kind boilerplate
+ * components that differed only in their default name and icon — today the
+ * roof vents (box / ridge / turbine / cupola / eyebrow). Register a kind in
+ * `treeNodeByType` against this component instead of authoring another copy.
+ */
+export const RegistryTreeNode = memo(function RegistryTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: RegistryTreeNodeProps) {
+  const [isEditing, setIsEditing] = useState(false)
+  const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
+  const node = useScene((s) => s.nodes[nodeId])
+  const isSelected = useViewer((state) => state.selection.selectedIds.includes(nodeId))
+  const isHovered = useViewer((state) => state.hoveredId === nodeId)
+  const setSelection = useViewer((state) => state.setSelection)
+  const setHoveredId = useViewer((state) => state.setHoveredId)
+
+  const presentation = node ? nodeRegistry.get(node.type)?.presentation : undefined
+  const icon = presentation?.icon
+  const iconSrc = icon?.kind === 'url' ? icon.src : '/icons/roof.png'
+  const defaultName = node?.name || presentation?.label || 'Node'
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      const handled = handleTreeSelection(
+        e,
+        nodeId,
+        useViewer.getState().selection.selectedIds,
+        setSelection,
+      )
+      if (!handled && useEditor.getState().phase === 'furnish') {
+        useEditor.getState().setPhase('structure')
+      }
+    },
+    [nodeId, setSelection],
+  )
+
+  return (
+    <TreeNodeWrapper
+      actions={<TreeNodeActions nodeId={nodeId} />}
+      depth={depth}
+      expanded={false}
+      hasChildren={false}
+      icon={
+        <Image
+          alt=""
+          className="object-contain opacity-60"
+          height={14}
+          src={iconSrc}
+          width={14}
+        />
+      }
+      isHovered={isHovered}
+      isLast={isLast}
+      isSelected={isSelected}
+      isVisible={isVisible}
+      label={
+        <InlineRenameInput
+          defaultName={defaultName}
+          isEditing={isEditing}
+          nodeId={nodeId}
+          onStartEditing={() => setIsEditing(true)}
+          onStopEditing={() => setIsEditing(false)}
+        />
+      }
+      nodeId={nodeId}
+      onClick={handleClick}
+      onDoubleClick={() => focusTreeNode(nodeId)}
+      onMouseEnter={() => setHoveredId(nodeId)}
+      onMouseLeave={() => setHoveredId(null)}
+      onToggle={() => {}}
+    />
+  )
+})

package/src/components/ui/sidebar/panels/site-panel/roof-tree-node.tsx

@@ -6,7 +6,7 @@ import { memo, useCallback, useEffect, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import useEditor from '../../../../../store/use-editor'
 import { InlineRenameInput } from './inline-rename-input'
-import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
+import { focusTreeNode, handleTreeSelection, TreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
 import { DropIndicatorLine, useTreeNodeDrag } from './tree-node-drag'
 
@@ -163,12 +163,36 @@ function RoofSegmentTreeNode({
   isLast?: boolean
 }) {
   const [isEditing, setIsEditing] = useState(false)
+  const [expanded, setExpanded] = useState(true)
+  const accessoryIds = useScene(
+    useShallow(
+      (s) => (s.nodes[node.id] as RoofSegmentNode | undefined)?.children ?? ([] as string[]),
+    ),
+  )
   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 { startDrag, isDragging } = useTreeNodeDrag()
 
+  useEffect(() => {
+    return useViewer.subscribe((state) => {
+      const { selectedIds } = state.selection
+      if (selectedIds.length === 0) return
+      const nodes = useScene.getState().nodes
+      for (const id of selectedIds) {
+        let current = nodes[id as AnyNodeId]
+        while (current?.parentId) {
+          if (current.parentId === node.id) {
+            setExpanded(true)
+            return
+          }
+          current = nodes[current.parentId as AnyNodeId]
+        }
+      }
+    })
+  }, [node.id])
+
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       if (isDragging) return
@@ -192,13 +216,15 @@ function RoofSegmentTreeNode({
 
   const defaultName = `${node.roofType.charAt(0).toUpperCase() + node.roofType.slice(1)} (${node.width.toFixed(1)}x${node.depth.toFixed(1)}m)`
 
+  const hasAccessories = accessoryIds.length > 0
+
   return (
     <div data-drop-child={node.id}>
       <TreeNodeWrapper
         actions={<TreeNodeActions nodeId={node.id} />}
         depth={depth}
-        expanded={false}
-        hasChildren={false}
+        expanded={expanded}
+        hasChildren={hasAccessories}
         icon={
           <Image
             alt=""
@@ -228,8 +254,18 @@ function RoofSegmentTreeNode({
         onMouseEnter={() => setHoveredId(node.id)}
         onMouseLeave={() => setHoveredId(null)}
         onPointerDown={handlePointerDown}
-        onToggle={() => {}}
-      />
+        onToggle={() => setExpanded((prev) => !prev)}
+      >
+        {hasAccessories &&
+          accessoryIds.map((childId, index) => (
+            <TreeNode
+              depth={depth + 1}
+              isLast={index === accessoryIds.length - 1}
+              key={childId}
+              nodeId={childId as AnyNodeId}
+            />
+          ))}
+      </TreeNodeWrapper>
     </div>
   )
 }

package/src/components/ui/sidebar/panels/site-panel/shelf-tree-node.tsx

@@ -0,0 +1,128 @@
+'use client'
+
+import { type AnyNodeId, type ShelfNode, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import Image from 'next/image'
+import { memo, useCallback, useEffect, useState } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import useEditor from './../../../../../store/use-editor'
+import { InlineRenameInput } from './inline-rename-input'
+import { focusTreeNode, handleTreeSelection, TreeNode, TreeNodeWrapper } from './tree-node'
+import { TreeNodeActions } from './tree-node-actions'
+
+interface ShelfTreeNodeProps {
+  nodeId: ShelfNode['id']
+  depth: number
+  isLast?: boolean
+}
+
+/**
+ * Sidebar tree entry for shelf. Mirrors `item-tree-node`'s shape so the
+ * shelf's hosted items list as collapsible children — same pattern items
+ * use for their nested items. The shelf has its own `children: ItemNode[`id`]`
+ * field on the schema; items reparent into it via `def.surfaces` + the
+ * placement coordinator's shelf strategy.
+ */
+export const ShelfTreeNode = memo(function ShelfTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: ShelfTreeNodeProps) {
+  const [isEditing, setIsEditing] = useState(false)
+  const [expanded, setExpanded] = useState(true)
+  const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
+  const children = useScene(
+    useShallow((s) => (s.nodes[nodeId] as ShelfNode | undefined)?.children ?? []),
+  )
+  const isSelected = useViewer((state) => state.selection.selectedIds.includes(nodeId))
+  const isHovered = useViewer((state) => state.hoveredId === nodeId)
+  const setSelection = useViewer((state) => state.setSelection)
+  const setHoveredId = useViewer((state) => state.setHoveredId)
+
+  // Expand when a descendant is selected — same imperative subscription
+  // the item tree-node uses, so we don't re-render when unrelated
+  // selection-state ticks.
+  useEffect(() => {
+    return useViewer.subscribe((state) => {
+      const { selectedIds } = state.selection
+      if (selectedIds.length === 0) return
+      const nodes = useScene.getState().nodes
+      for (const id of selectedIds) {
+        let current = nodes[id as AnyNodeId]
+        while (current?.parentId) {
+          if (current.parentId === nodeId) {
+            setExpanded(true)
+            return
+          }
+          current = nodes[current.parentId as AnyNodeId]
+        }
+      }
+    })
+  }, [nodeId])
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      const handled = handleTreeSelection(
+        e,
+        nodeId,
+        useViewer.getState().selection.selectedIds,
+        setSelection,
+      )
+      if (!handled && useEditor.getState().phase === 'furnish') {
+        useEditor.getState().setPhase('structure')
+      }
+    },
+    [nodeId, setSelection],
+  )
+
+  const handleDoubleClick = useCallback(() => focusTreeNode(nodeId), [nodeId])
+  const handleMouseEnter = useCallback(() => setHoveredId(nodeId), [nodeId, setHoveredId])
+  const handleMouseLeave = useCallback(() => setHoveredId(null), [setHoveredId])
+  const handleToggle = useCallback(() => setExpanded((prev) => !prev), [])
+  const handleStartEditing = useCallback(() => setIsEditing(true), [])
+  const handleStopEditing = useCallback(() => setIsEditing(false), [])
+
+  const hasChildren = children.length > 0
+
+  return (
+    <TreeNodeWrapper
+      actions={<TreeNodeActions nodeId={nodeId} />}
+      depth={depth}
+      expanded={expanded}
+      hasChildren={hasChildren}
+      icon={
+        <Image alt="" className="object-contain" height={14} src="/icons/shelf.png" width={14} />
+      }
+      isHovered={isHovered}
+      isLast={isLast}
+      isSelected={isSelected}
+      isVisible={isVisible}
+      label={
+        <InlineRenameInput
+          defaultName="Shelf"
+          isEditing={isEditing}
+          nodeId={nodeId}
+          onStartEditing={handleStartEditing}
+          onStopEditing={handleStopEditing}
+        />
+      }
+      nodeId={nodeId}
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onToggle={handleToggle}
+    >
+      {hasChildren &&
+        children.map((childId, index) => (
+          <TreeNode
+            depth={depth + 1}
+            isLast={index === children.length - 1}
+            key={childId}
+            nodeId={childId}
+          />
+        ))}
+    </TreeNodeWrapper>
+  )
+})

package/src/components/ui/sidebar/panels/site-panel/slab-tree-node.tsx

@@ -91,8 +91,11 @@ function calculatePolygonArea(polygon: Array<[number, number]>): number {
 
   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]
+    const pi = polygon[i]
+    const pj = polygon[j]
+    if (!(pi && pj)) continue
+    area += pi[0] * pj[1]
+    area -= pj[0] * pi[1]
   }
 
   return Math.abs(area) / 2

package/src/components/ui/sidebar/panels/site-panel/solar-panel-tree-node.tsx

@@ -0,0 +1,83 @@
+import { type AnyNodeId, type SolarPanelNode, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import Image from 'next/image'
+import { memo, useCallback, useState } from 'react'
+import useEditor from './../../../../../store/use-editor'
+import { InlineRenameInput } from './inline-rename-input'
+import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
+import { TreeNodeActions } from './tree-node-actions'
+
+interface SolarPanelTreeNodeProps {
+  nodeId: AnyNodeId
+  depth: number
+  isLast?: boolean
+}
+
+export const SolarPanelTreeNode = memo(function SolarPanelTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: SolarPanelTreeNodeProps) {
+  const [isEditing, setIsEditing] = useState(false)
+  const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
+  const node = useScene((s) => s.nodes[nodeId] as SolarPanelNode | undefined)
+  const isSelected = useViewer((state) => state.selection.selectedIds.includes(nodeId))
+  const isHovered = useViewer((state) => state.hoveredId === nodeId)
+  const setSelection = useViewer((state) => state.setSelection)
+  const setHoveredId = useViewer((state) => state.setHoveredId)
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      const handled = handleTreeSelection(
+        e,
+        nodeId,
+        useViewer.getState().selection.selectedIds,
+        setSelection,
+      )
+      if (!handled && useEditor.getState().phase === 'furnish') {
+        useEditor.getState().setPhase('structure')
+      }
+    },
+    [nodeId, setSelection],
+  )
+
+  const defaultName = node?.name || 'Solar Panel'
+
+  return (
+    <TreeNodeWrapper
+      actions={<TreeNodeActions nodeId={nodeId} />}
+      depth={depth}
+      expanded={false}
+      hasChildren={false}
+      icon={
+        <Image
+          alt=""
+          className="object-contain opacity-60"
+          height={14}
+          src="/icons/roof.png"
+          width={14}
+        />
+      }
+      isHovered={isHovered}
+      isLast={isLast}
+      isSelected={isSelected}
+      isVisible={isVisible}
+      label={
+        <InlineRenameInput
+          defaultName={defaultName}
+          isEditing={isEditing}
+          nodeId={nodeId}
+          onStartEditing={() => setIsEditing(true)}
+          onStopEditing={() => setIsEditing(false)}
+        />
+      }
+      nodeId={nodeId}
+      onClick={handleClick}
+      onDoubleClick={() => focusTreeNode(nodeId)}
+      onMouseEnter={() => setHoveredId(nodeId)}
+      onMouseLeave={() => setHoveredId(null)}
+      onToggle={() => {}}
+    />
+  )
+})

package/src/components/ui/sidebar/panels/site-panel/spawn-tree-node.tsx

@@ -54,7 +54,7 @@ export const SpawnTreeNode = memo(function SpawnTreeNode({
           alt=""
           className="object-contain"
           height={14}
-          src="/icons/site.png"
+          src="/icons/spawn-point.png"
           width={14}
         />
       }