@pascal-app/editor 0.4.0

package/src/components/ui/sidebar/panels/site-panel/inline-rename-input.tsx

@@ -0,0 +1,98 @@
+import { type AnyNode, useScene } from '@pascal-app/core'
+import { Pencil } from 'lucide-react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { cn } from './../../../../../lib/utils'
+
+interface InlineRenameInputProps {
+  node: AnyNode
+  isEditing: boolean
+  onStopEditing: () => void
+  defaultName: string
+  className?: string
+  onStartEditing?: () => void
+}
+
+export function InlineRenameInput({
+  node,
+  isEditing,
+  onStopEditing,
+  defaultName,
+  className,
+  onStartEditing,
+}: InlineRenameInputProps) {
+  const updateNode = useScene((s) => s.updateNode)
+  const [value, setValue] = useState(node.name || '')
+  const inputRef = useRef<HTMLInputElement>(null)
+  const inputSize = Math.max((value || defaultName).length, 1)
+
+  useEffect(() => {
+    if (isEditing) {
+      setValue(node.name || '')
+      // Focus and select all text after a short delay
+      setTimeout(() => {
+        if (inputRef.current) {
+          inputRef.current.focus()
+          inputRef.current.select()
+        }
+      }, 0)
+    }
+  }, [isEditing, node.name])
+
+  const handleSave = useCallback(() => {
+    const trimmed = value.trim()
+    if (trimmed !== node.name) {
+      updateNode(node.id, { name: trimmed || undefined })
+    }
+    onStopEditing()
+  }, [value, node.id, node.name, updateNode, onStopEditing])
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      handleSave()
+    } else if (e.key === 'Escape') {
+      e.preventDefault()
+      onStopEditing()
+    }
+  }
+
+  if (!isEditing) {
+    return (
+      <div className="group/rename flex h-5 min-w-0 items-center gap-1">
+        <span className={cn('truncate border-transparent border-b', className)}>
+          {node.name || defaultName}
+        </span>
+        {onStartEditing && (
+          <button
+            className="shrink-0 text-muted-foreground opacity-0 transition-opacity hover:text-foreground group-hover/rename:opacity-100"
+            onClick={(e) => {
+              e.stopPropagation()
+              onStartEditing()
+            }}
+          >
+            <Pencil className="h-3 w-3" />
+          </button>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <input
+      className={cn(
+        'm-0 h-5 min-w-[1ch] max-w-full flex-none rounded-none border-primary/50 border-b bg-transparent px-0 py-0 text-foreground text-sm outline-none focus:border-primary',
+        className,
+      )}
+      onBlur={handleSave}
+      onChange={(e) => setValue(e.target.value)}
+      onClick={(e) => e.stopPropagation()}
+      onDoubleClick={(e) => e.stopPropagation()}
+      onKeyDown={handleKeyDown}
+      placeholder={defaultName}
+      ref={inputRef}
+      size={inputSize}
+      type="text"
+      value={value}
+    />
+  )
+}

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

@@ -0,0 +1,117 @@
+import { type AnyNodeId, type ItemNode, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import Image from 'next/image'
+import { useEffect, useState } from 'react'
+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'
+
+const CATEGORY_ICONS: Record<string, string> = {
+  door: '/icons/door.png',
+  window: '/icons/window.png',
+  furniture: '/icons/couch.png',
+  appliance: '/icons/appliance.png',
+  kitchen: '/icons/kitchen.png',
+  bathroom: '/icons/bathroom.png',
+  outdoor: '/icons/tree.png',
+}
+
+interface ItemTreeNodeProps {
+  node: ItemNode
+  depth: number
+  isLast?: boolean
+}
+
+export function ItemTreeNode({ node, depth, isLast }: ItemTreeNodeProps) {
+  const [isEditing, setIsEditing] = useState(false)
+  const [expanded, setExpanded] = useState(true)
+  const iconSrc = CATEGORY_ICONS[node.asset.category] || '/icons/couch.png'
+  const selectedIds = useViewer((state) => state.selection.selectedIds)
+  const isSelected = selectedIds.includes(node.id)
+  const isHovered = useViewer((state) => state.hoveredId === node.id)
+  const setSelection = useViewer((state) => state.setSelection)
+  const setHoveredId = useViewer((state) => state.setHoveredId)
+
+  useEffect(() => {
+    if (selectedIds.length === 0) return
+    const nodes = useScene.getState().nodes
+    let isDescendant = false
+    for (const id of selectedIds) {
+      let current = nodes[id as AnyNodeId]
+      while (current?.parentId) {
+        if (current.parentId === node.id) {
+          isDescendant = true
+          break
+        }
+        current = nodes[current.parentId as AnyNodeId]
+      }
+      if (isDescendant) break
+    }
+    if (isDescendant) {
+      setExpanded(true)
+    }
+  }, [selectedIds, node.id])
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    const handled = handleTreeSelection(e, node.id, selectedIds, setSelection)
+    if (!handled && useEditor.getState().phase === 'structure') {
+      useEditor.getState().setPhase('furnish')
+    }
+  }
+
+  const handleDoubleClick = () => {
+    focusTreeNode(node.id)
+  }
+
+  const handleMouseEnter = () => {
+    setHoveredId(node.id)
+  }
+
+  const handleMouseLeave = () => {
+    setHoveredId(null)
+  }
+
+  const defaultName = node.asset.name || 'Item'
+  const hasChildren = node.children && node.children.length > 0
+
+  return (
+    <TreeNodeWrapper
+      actions={<TreeNodeActions node={node} />}
+      depth={depth}
+      expanded={expanded}
+      hasChildren={hasChildren}
+      icon={<Image alt="" className="object-contain" height={14} src={iconSrc} width={14} />}
+      isHovered={isHovered}
+      isLast={isLast}
+      isSelected={isSelected}
+      isVisible={node.visible !== false}
+      label={
+        <InlineRenameInput
+          defaultName={defaultName}
+          isEditing={isEditing}
+          node={node}
+          onStartEditing={() => setIsEditing(true)}
+          onStopEditing={() => setIsEditing(false)}
+        />
+      }
+      nodeId={node.id}
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onToggle={() => setExpanded(!expanded)}
+    >
+      {hasChildren &&
+        node.children.map((childId, index) => (
+          <TreeNode
+            depth={depth + 1}
+            isLast={index === node.children.length - 1}
+            key={childId}
+            nodeId={childId}
+          />
+        ))}
+    </TreeNodeWrapper>
+  )
+}

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

@@ -0,0 +1,65 @@
+import type { LevelNode } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Layers } from 'lucide-react'
+import { useState } from 'react'
+import { InlineRenameInput } from './inline-rename-input'
+import { focusTreeNode, TreeNode, TreeNodeWrapper } from './tree-node'
+import { TreeNodeActions } from './tree-node-actions'
+
+interface LevelTreeNodeProps {
+  node: LevelNode
+  depth: number
+  isLast?: boolean
+}
+
+export function LevelTreeNode({ node, depth, isLast }: LevelTreeNodeProps) {
+  const [expanded, setExpanded] = useState(true)
+  const [isEditing, setIsEditing] = useState(false)
+  const isSelected = useViewer((state) => state.selection.levelId === node.id)
+  const isHovered = useViewer((state) => state.hoveredId === node.id)
+  const setSelection = useViewer((state) => state.setSelection)
+
+  const handleClick = () => {
+    setSelection({ levelId: node.id })
+  }
+
+  const handleDoubleClick = () => {
+    focusTreeNode(node.id)
+  }
+
+  const defaultName = `Level ${node.level}`
+
+  return (
+    <TreeNodeWrapper
+      actions={<TreeNodeActions node={node} />}
+      depth={depth}
+      expanded={expanded}
+      hasChildren={node.children.length > 0}
+      icon={<Layers className="h-3.5 w-3.5" />}
+      isHovered={isHovered}
+      isLast={isLast}
+      isSelected={isSelected}
+      label={
+        <InlineRenameInput
+          defaultName={defaultName}
+          isEditing={isEditing}
+          node={node}
+          onStartEditing={() => setIsEditing(true)}
+          onStopEditing={() => setIsEditing(false)}
+        />
+      }
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+      onToggle={() => setExpanded(!expanded)}
+    >
+      {node.children.map((childId, index) => (
+        <TreeNode
+          depth={depth + 1}
+          isLast={index === node.children.length - 1}
+          key={childId}
+          nodeId={childId}
+        />
+      ))}
+    </TreeNodeWrapper>
+  )
+}

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

@@ -0,0 +1,214 @@
+import { type AnyNodeId, type RoofNode, type RoofSegmentNode, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { AnimatePresence } from 'motion/react'
+import Image from 'next/image'
+import { useCallback, useEffect, 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'
+import { DropIndicatorLine, useTreeNodeDrag } from './tree-node-drag'
+
+interface RoofTreeNodeProps {
+  node: RoofNode
+  depth: number
+  isLast?: boolean
+}
+
+export function RoofTreeNode({ node, depth, isLast }: RoofTreeNodeProps) {
+  const [isEditing, setIsEditing] = useState(false)
+  const [expanded, setExpanded] = useState(false)
+  const selectedIds = useViewer((state) => state.selection.selectedIds)
+  const isSelected = 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 nodes = useScene((state) => state.nodes)
+  const { drag, dropTarget } = useTreeNodeDrag()
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    const handled = handleTreeSelection(e, node.id, selectedIds, setSelection)
+    if (!handled && useEditor.getState().phase === 'furnish') {
+      useEditor.getState().setPhase('structure')
+    }
+  }
+
+  const handleDoubleClick = () => {
+    focusTreeNode(node.id)
+  }
+
+  const handleMouseEnter = () => {
+    setHoveredId(node.id)
+  }
+
+  const handleMouseLeave = () => {
+    setHoveredId(null)
+  }
+
+  const segments = (node.children ?? [])
+    .map((childId) => nodes[childId as AnyNodeId] as RoofSegmentNode | undefined)
+    .filter((n): n is RoofSegmentNode => n?.type === 'roof-segment')
+
+  const hasSelectedChild = segments.some((seg) => selectedIds.includes(seg.id))
+
+  useEffect(() => {
+    if (isSelected || hasSelectedChild) {
+      setExpanded(true)
+    }
+  }, [isSelected, hasSelectedChild])
+
+  // Auto-expand when a segment is being dragged over this roof
+  const isDropTarget = drag !== null && dropTarget?.parentId === node.id
+  useEffect(() => {
+    if (isDropTarget && !expanded) {
+      setExpanded(true)
+    }
+  }, [isDropTarget, expanded])
+
+  const segmentCount = segments.length
+  const defaultName = `Roof (${segmentCount} segment${segmentCount !== 1 ? 's' : ''})`
+
+  // Hide the dragged segment from every roof while dragging
+  const visibleSegments = drag ? segments.filter((seg) => seg.id !== drag.nodeId) : segments
+
+  const isValidDropTarget = drag !== null && drag.nodeId !== node.id
+
+  return (
+    <div data-drop-target={node.id}>
+      <TreeNodeWrapper
+        actions={<TreeNodeActions node={node} />}
+        depth={depth}
+        expanded={expanded}
+        hasChildren={segments.length > 0}
+        icon={
+          <Image alt="" className="object-contain" height={14} src="/icons/roof.png" width={14} />
+        }
+        isDropTarget={isValidDropTarget && isDropTarget}
+        isHovered={isHovered || isDropTarget}
+        isLast={isLast && !expanded}
+        isSelected={isSelected}
+        isVisible={node.visible !== false}
+        label={
+          <InlineRenameInput
+            defaultName={defaultName}
+            isEditing={isEditing}
+            node={node}
+            onStartEditing={() => setIsEditing(true)}
+            onStopEditing={() => setIsEditing(false)}
+          />
+        }
+        nodeId={node.id}
+        onClick={handleClick}
+        onDoubleClick={handleDoubleClick}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        onToggle={() => setExpanded(!expanded)}
+      >
+        {visibleSegments.map((seg, i) => {
+          const showIndicatorBefore = isDropTarget && dropTarget?.insertIndex === i
+          const showIndicatorAfter =
+            isDropTarget &&
+            i === visibleSegments.length - 1 &&
+            dropTarget?.insertIndex !== undefined &&
+            dropTarget.insertIndex > i
+
+          return (
+            <div key={seg.id}>
+              <AnimatePresence>
+                {showIndicatorBefore && <DropIndicatorLine key="indicator-before" />}
+              </AnimatePresence>
+              <RoofSegmentTreeNode
+                depth={depth + 1}
+                isLast={isLast && i === visibleSegments.length - 1 && !showIndicatorAfter}
+                node={seg}
+              />
+              <AnimatePresence>
+                {showIndicatorAfter && <DropIndicatorLine key="indicator-after" />}
+              </AnimatePresence>
+            </div>
+          )
+        })}
+        <AnimatePresence>
+          {isDropTarget && visibleSegments.length === 0 && <DropIndicatorLine />}
+        </AnimatePresence>
+      </TreeNodeWrapper>
+    </div>
+  )
+}
+
+function RoofSegmentTreeNode({
+  node,
+  depth,
+  isLast,
+}: {
+  node: RoofSegmentNode
+  depth: number
+  isLast?: boolean
+}) {
+  const [isEditing, setIsEditing] = useState(false)
+  const selectedIds = useViewer((state) => state.selection.selectedIds)
+  const isSelected = 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()
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (isDragging) return
+    e.stopPropagation()
+    handleTreeSelection(e, node.id, selectedIds, setSelection)
+  }
+
+  const handlePointerDown = useCallback(
+    (e: React.PointerEvent) => {
+      if (e.button !== 0) return
+      const label = `${node.roofType.charAt(0).toUpperCase() + node.roofType.slice(1)} (${node.width.toFixed(1)}×${node.depth.toFixed(1)}m)`
+      startDrag(node.id, node.type, node.parentId as string, label, e.clientX, e.clientY)
+    },
+    [node.id, node.type, node.parentId, node.roofType, node.width, node.depth, startDrag],
+  )
+
+  const defaultName = `${node.roofType.charAt(0).toUpperCase() + node.roofType.slice(1)} (${node.width.toFixed(1)}x${node.depth.toFixed(1)}m)`
+
+  return (
+    <div data-drop-child={node.id}>
+      <TreeNodeWrapper
+        actions={<TreeNodeActions node={node} />}
+        depth={depth}
+        expanded={false}
+        hasChildren={false}
+        icon={
+          <Image
+            alt=""
+            className="object-contain opacity-60"
+            height={14}
+            src="/icons/roof.png"
+            width={14}
+          />
+        }
+        isDraggable
+        isHovered={isHovered}
+        isLast={isLast}
+        isSelected={isSelected}
+        isVisible={node.visible !== false}
+        label={
+          <InlineRenameInput
+            defaultName={defaultName}
+            isEditing={isEditing}
+            node={node}
+            onStartEditing={() => setIsEditing(true)}
+            onStopEditing={() => setIsEditing(false)}
+          />
+        }
+        nodeId={node.id}
+        onClick={handleClick}
+        onDoubleClick={() => focusTreeNode(node.id)}
+        onMouseEnter={() => setHoveredId(node.id)}
+        onMouseLeave={() => setHoveredId(null)}
+        onPointerDown={handlePointerDown}
+        onToggle={() => {}}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,96 @@
+import type { SlabNode } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import Image from 'next/image'
+import { 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 SlabTreeNodeProps {
+  node: SlabNode
+  depth: number
+  isLast?: boolean
+}
+
+export function SlabTreeNode({ node, depth, isLast }: SlabTreeNodeProps) {
+  const [isEditing, setIsEditing] = useState(false)
+  const selectedIds = useViewer((state) => state.selection.selectedIds)
+  const isSelected = 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 = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    const handled = handleTreeSelection(e, node.id, selectedIds, setSelection)
+    if (!handled && useEditor.getState().phase === 'furnish') {
+      useEditor.getState().setPhase('structure')
+    }
+  }
+
+  const handleDoubleClick = () => {
+    focusTreeNode(node.id)
+  }
+
+  const handleMouseEnter = () => {
+    setHoveredId(node.id)
+  }
+
+  const handleMouseLeave = () => {
+    setHoveredId(null)
+  }
+
+  // Calculate approximate area from polygon
+  const area = calculatePolygonArea(node.polygon).toFixed(1)
+  const defaultName = `Slab (${area}m²)`
+
+  return (
+    <TreeNodeWrapper
+      actions={<TreeNodeActions node={node} />}
+      depth={depth}
+      expanded={false}
+      hasChildren={false}
+      icon={
+        <Image alt="" className="object-contain" height={14} src="/icons/floor.png" width={14} />
+      }
+      isHovered={isHovered}
+      isLast={isLast}
+      isSelected={isSelected}
+      isVisible={node.visible !== false}
+      label={
+        <InlineRenameInput
+          defaultName={defaultName}
+          isEditing={isEditing}
+          node={node}
+          onStartEditing={() => setIsEditing(true)}
+          onStopEditing={() => setIsEditing(false)}
+        />
+      }
+      nodeId={node.id}
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onToggle={() => {}}
+    />
+  )
+}
+
+/**
+ * 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
+}