@pascal-app/editor 0.5.1 → 0.7.0

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

@@ -2,7 +2,7 @@ import { type AnyNodeId, type StairNode, type StairSegmentNode, useScene } from
 import { useViewer } from '@pascal-app/viewer'
 import { AnimatePresence } from 'motion/react'
 import Image from 'next/image'
-import { useCallback, useEffect, useState } from 'react'
+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'
@@ -16,7 +16,11 @@ interface StairTreeNodeProps {
   isLast?: boolean
 }
 
-export function StairTreeNode({ nodeId, depth, isLast }: StairTreeNodeProps) {
+export const StairTreeNode = memo(function StairTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: StairTreeNodeProps) {
   const [isEditing, setIsEditing] = useState(false)
   const [expanded, setExpanded] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
@@ -147,7 +151,7 @@ export function StairTreeNode({ nodeId, depth, isLast }: StairTreeNodeProps) {
       </TreeNodeWrapper>
     </div>
   )
-}
+})
 
 function StairSegmentTreeNode({
   node,

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

@@ -1,7 +1,7 @@
 import { type AnyNodeId, emitter, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Camera, Eye, EyeOff, Trash2 } from 'lucide-react'
-import { useState } from 'react'
+import { memo, useState } from 'react'
 import {
   Popover,
   PopoverContent,
@@ -12,7 +12,7 @@ interface TreeNodeActionsProps {
   nodeId: AnyNodeId
 }
 
-export function TreeNodeActions({ nodeId }: TreeNodeActionsProps) {
+export const TreeNodeActions = memo(function TreeNodeActions({ nodeId }: TreeNodeActionsProps) {
   const [open, setOpen] = useState(false)
   const updateNode = useScene((state) => state.updateNode)
   const updateNodes = useScene((state) => state.updateNodes)
@@ -112,4 +112,4 @@ export function TreeNodeActions({ nodeId }: TreeNodeActionsProps) {
       </Popover>
     </div>
   )
-}
+})

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

@@ -1,7 +1,7 @@
 import { type AnyNodeId, emitter, useScene } from '@pascal-app/core'
 import { ChevronRight } from 'lucide-react'
 import { AnimatePresence, motion } from 'motion/react'
-import { forwardRef, useEffect, useRef } from 'react'
+import { forwardRef, memo, useEffect, useRef } from 'react'
 
 export function handleTreeSelection(
   e: React.MouseEvent,
@@ -56,12 +56,14 @@ export function focusTreeNode(nodeId: AnyNodeId) {
 import { cn } from '../../../../../lib/utils'
 import { BuildingTreeNode } from './building-tree-node'
 import { CeilingTreeNode } from './ceiling-tree-node'
+import { ColumnTreeNode } from './column-tree-node'
 import { DoorTreeNode } from './door-tree-node'
 import { FenceTreeNode } from './fence-tree-node'
 import { ItemTreeNode } from './item-tree-node'
 import { LevelTreeNode } from './level-tree-node'
 import { RoofTreeNode } from './roof-tree-node'
 import { SlabTreeNode } from './slab-tree-node'
+import { SpawnTreeNode } from './spawn-tree-node'
 import { StairTreeNode } from './stair-tree-node'
 import { WallTreeNode } from './wall-tree-node'
 import { WindowTreeNode } from './window-tree-node'
@@ -73,20 +75,24 @@ interface TreeNodeProps {
   isLast?: boolean
 }
 
-export function TreeNode({ nodeId, depth = 0, isLast }: TreeNodeProps) {
+export const TreeNode = memo(function TreeNode({ nodeId, depth = 0, isLast }: TreeNodeProps) {
   const nodeType = useScene((state) => state.nodes[nodeId]?.type)
 
   if (!nodeType) return null
 
   switch (nodeType) {
     case 'building':
-      return <BuildingTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
+      return <BuildingTreeNode depth={depth} isLast={isLast} nodeId={nodeId as `building_${string}`} />
     case 'ceiling':
       return <CeilingTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
+    case 'column':
+      return <ColumnTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
     case 'level':
-      return <LevelTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
+      return <LevelTreeNode depth={depth} isLast={isLast} nodeId={nodeId as `level_${string}`} />
     case 'slab':
       return <SlabTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
+    case 'spawn':
+      return <SpawnTreeNode depth={depth} isLast={isLast} nodeId={nodeId as `spawn_${string}`} />
     case 'wall':
       return <WallTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
     case 'fence':
@@ -102,11 +108,11 @@ export function TreeNode({ nodeId, depth = 0, isLast }: TreeNodeProps) {
     case 'window':
       return <WindowTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
     case 'zone':
-      return <ZoneTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
+      return <ZoneTreeNode depth={depth} isLast={isLast} nodeId={nodeId as `zone_${string}`} />
     default:
       return null
   }
-}
+})
 
 interface TreeNodeWrapperProps {
   nodeId?: string

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

@@ -1,7 +1,7 @@
 import { type AnyNodeId, useScene, type WallNode } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import useEditor from './../../../../../store/use-editor'
 import { InlineRenameInput } from './inline-rename-input'
@@ -14,7 +14,11 @@ interface WallTreeNodeProps {
   isLast?: boolean
 }
 
-export function WallTreeNode({ nodeId, depth, isLast }: WallTreeNodeProps) {
+export const WallTreeNode = memo(function WallTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: WallTreeNodeProps) {
   const [expanded, setExpanded] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId as AnyNodeId]?.visible !== false)
@@ -107,4 +111,4 @@ export function WallTreeNode({ nodeId, depth, isLast }: WallTreeNodeProps) {
       ))}
     </TreeNodeWrapper>
   )
-}
+})

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

@@ -3,7 +3,7 @@
 import { type AnyNodeId, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
-import { useCallback, useState } from 'react'
+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'
@@ -15,7 +15,11 @@ interface WindowTreeNodeProps {
   isLast?: boolean
 }
 
-export function WindowTreeNode({ nodeId, depth, isLast }: WindowTreeNodeProps) {
+export const WindowTreeNode = memo(function WindowTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: WindowTreeNodeProps) {
   const [isEditing, setIsEditing] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId as AnyNodeId]?.visible !== false)
   const isSelected = useViewer((state) => state.selection.selectedIds.includes(nodeId))
@@ -72,4 +76,4 @@ export function WindowTreeNode({ nodeId, depth, isLast }: WindowTreeNodeProps) {
       onToggle={() => {}}
     />
   )
-}
+})

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

@@ -1,18 +1,22 @@
-import { type AnyNodeId, useScene, type ZoneNode } from '@pascal-app/core'
+import { useScene, type ZoneNode } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { useCallback, useState } from 'react'
+import { memo, useCallback, useState } from 'react'
 import { ColorDot } from './../../../../../components/ui/primitives/color-dot'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
 
 interface ZoneTreeNodeProps {
-  nodeId: AnyNodeId
+  nodeId: ZoneNode['id']
   depth: number
   isLast?: boolean
 }
 
-export function ZoneTreeNode({ nodeId, depth, isLast }: ZoneTreeNodeProps) {
+export const ZoneTreeNode = memo(function ZoneTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: ZoneTreeNodeProps) {
   const [isEditing, setIsEditing] = useState(false)
   const updateNode = useScene((state) => state.updateNode)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
@@ -40,7 +44,7 @@ export function ZoneTreeNode({ nodeId, depth, isLast }: ZoneTreeNodeProps) {
       depth={depth}
       expanded={false}
       hasChildren={false}
-      icon={<ColorDot color={color} onChange={(c) => updateNode(nodeId, { color: c })} />}
+      icon={<ColorDot color={color ?? '#3b82f6'} onChange={(c) => updateNode(nodeId, { color: c })} />}
       isHovered={isHovered}
       isLast={isLast}
       isSelected={isSelected}
@@ -61,7 +65,7 @@ export function ZoneTreeNode({ nodeId, depth, isLast }: ZoneTreeNodeProps) {
       onToggle={() => {}}
     />
   )
-}
+})
 
 /**
  * Calculate the area of a polygon using the shoelace formula
@@ -74,8 +78,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 current = polygon[i]
+    const next = polygon[j]
+    if (!(current && next)) continue
+    area += current[0] * next[1]
+    area -= next[0] * current[1]
   }
 
   return Math.abs(area) / 2

package/src/components/ui/sidebar/tab-bar.tsx

@@ -1,10 +1,13 @@
 'use client'
 
+import type { ReactNode } from 'react'
 import { cn } from './../../../lib/utils'
 
 export type SidebarTab = {
   id: string
   label: string
+  mobileDefaultSnap?: number
+  mobileIcon?: ReactNode
 }
 
 interface TabBarProps {

package/src/components/ui/viewer-toolbar.tsx

@@ -2,11 +2,28 @@
 
 import { Icon as IconifyIcon } from '@iconify/react'
 import { useViewer } from '@pascal-app/viewer'
-import { ChevronsLeft, ChevronsRight, Columns2, Eye, Footprints, Moon, Sun } from 'lucide-react'
+import {
+  Check,
+  ChevronsLeft,
+  ChevronsRight,
+  Columns2,
+  Eye,
+  EyeOff,
+  Footprints,
+  Grid2X2,
+  Moon,
+  Sun,
+} from 'lucide-react'
 import { useCallback } from 'react'
 import { cn } from '../../lib/utils'
 import useEditor from '../../store/use-editor'
-import type { ViewMode } from '../../store/use-editor'
+import type { GridSnapStep, ViewMode } from '../../store/use-editor'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from './primitives/dropdown-menu'
 import { useSidebarStore } from './primitives/sidebar'
 import { Tooltip, TooltipContent, TooltipTrigger } from './primitives/tooltip'
 
@@ -174,6 +191,18 @@ const levelModeLabels: Record<string, string> = {
   solo: 'Solo',
 }
 
+const gridSnapOrder: GridSnapStep[] = [0.5, 0.25, 0.1, 0.05]
+const gridSnapLabels: Record<GridSnapStep, string> = {
+  0.5: '0.50',
+  0.25: '0.25',
+  0.1: '0.10',
+  0.05: '0.05',
+}
+
+function formatGridSnapStep(step: GridSnapStep): string {
+  return gridSnapLabels[step]
+}
+
 function LevelModeToggle() {
   const levelMode = useViewer((s) => s.levelMode)
   const setLevelMode = useViewer((s) => s.setLevelMode)
@@ -219,6 +248,69 @@ function LevelModeToggle() {
   )
 }
 
+function GridSnapToggle() {
+  const gridSnapStep = useEditor((s) => s.gridSnapStep)
+  const setGridSnapStep = useEditor((s) => s.setGridSnapStep)
+
+  return (
+    <DropdownMenu>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <DropdownMenuTrigger asChild>
+            <button className={cn(TOOLBAR_BTN, 'w-auto gap-1.5 px-2.5')} type="button">
+              <IconifyIcon height={14} icon="lucide:grid-2x2" width={14} />
+              <span className="font-medium text-xs">{formatGridSnapStep(gridSnapStep)}</span>
+            </button>
+          </DropdownMenuTrigger>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">Grid snap: {formatGridSnapStep(gridSnapStep)}</TooltipContent>
+      </Tooltip>
+      <DropdownMenuContent align="center" side="bottom">
+        {gridSnapOrder.map((step) => {
+          const isActive = step === gridSnapStep
+          return (
+            <DropdownMenuItem key={step} onSelect={() => setGridSnapStep(step)}>
+              <span className="flex min-w-12 items-center justify-between gap-3">
+                <span>{formatGridSnapStep(step)}</span>
+                {isActive ? <Check className="h-3.5 w-3.5" /> : <span className="h-3.5 w-3.5" />}
+              </span>
+            </DropdownMenuItem>
+          )
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+function GridVisibilityToggle() {
+  const showGrid = useViewer((s) => s.showGrid)
+  const setShowGrid = useViewer((s) => s.setShowGrid)
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          aria-label={`Grid: ${showGrid ? 'Visible' : 'Hidden'}`}
+          aria-pressed={showGrid}
+          className={cn(
+            TOOLBAR_BTN,
+            'w-auto gap-1.5 px-2.5',
+            showGrid
+              ? 'bg-white/10 text-foreground/90'
+              : 'opacity-60 grayscale hover:opacity-100 hover:grayscale-0',
+          )}
+          onClick={() => setShowGrid(!showGrid)}
+          type="button"
+        >
+          <Grid2X2 className="h-3.5 w-3.5" />
+          {showGrid ? <Eye className="h-3.5 w-3.5" /> : <EyeOff className="h-3.5 w-3.5" />}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">Grid: {showGrid ? 'Visible' : 'Hidden'}</TooltipContent>
+    </Tooltip>
+  )
+}
+
 // ── Wall mode toggle ────────────────────────────────────────────────────────
 
 const wallModeOrder = ['cutaway', 'up', 'down'] as const
@@ -330,6 +422,8 @@ export function ViewerToolbarRight() {
     <div className={TOOLBAR_CONTAINER}>
       <LevelModeToggle />
       <WallModeToggle />
+      <GridSnapToggle />
+      <GridVisibilityToggle />
       <div className="my-1.5 w-px bg-border/50" />
       <UnitToggle />
       <ThemeToggle />

package/src/components/viewer-overlay.tsx

@@ -14,6 +14,7 @@ import { useViewer } from '@pascal-app/viewer'
 import { ArrowLeft, Camera, ChevronRight, Diamond, Layers, Moon, Sun } from 'lucide-react'
 import { motion } from 'motion/react'
 import Link from 'next/link'
+import { useShallow } from 'zustand/react/shallow'
 import { cn } from '../lib/utils'
 import { ActionButton } from './ui/action-menu/action-button'
 import { TooltipProvider } from './ui/primitives/tooltip'
@@ -87,7 +88,6 @@ export const ViewerOverlay = ({
   onBack,
 }: ViewerOverlayProps) => {
   const selection = useViewer((s) => s.selection)
-  const nodes = useScene((s) => s.nodes)
   const showScans = useViewer((s) => s.showScans)
   const showGuides = useViewer((s) => s.showGuides)
   const cameraMode = useViewer((s) => s.cameraMode)
@@ -95,24 +95,30 @@ export const ViewerOverlay = ({
   const wallMode = useViewer((s) => s.wallMode)
   const theme = useViewer((s) => s.theme)
 
-  const building = selection.buildingId
-    ? (nodes[selection.buildingId] as BuildingNode | undefined)
-    : null
-  const level = selection.levelId ? (nodes[selection.levelId] as LevelNode | undefined) : null
-  const zone = selection.zoneId ? (nodes[selection.zoneId] as ZoneNode | undefined) : null
-
-  // Get the first selected item (if any)
-  const selectedNode =
-    selection.selectedIds.length > 0
-      ? (nodes[selection.selectedIds[0] as AnyNodeId] as AnyNode | undefined)
-      : null
-
-  // Get all levels for the selected building
-  const levels =
-    building?.children
-      .map((id) => nodes[id as AnyNodeId] as LevelNode | undefined)
-      .filter((n): n is LevelNode => n?.type === 'level')
-      .sort((a, b) => a.level - b.level) ?? []
+  // Subscribe only to the specific nodes we read so that creating an unrelated
+  // node elsewhere in the scene doesn't re-render this overlay.
+  const firstSelectedId = selection.selectedIds[0] ?? null
+  const building = useScene((s) =>
+    selection.buildingId ? (s.nodes[selection.buildingId] as BuildingNode | undefined) : null,
+  )
+  const level = useScene((s) =>
+    selection.levelId ? (s.nodes[selection.levelId] as LevelNode | undefined) : null,
+  )
+  const zone = useScene((s) =>
+    selection.zoneId ? (s.nodes[selection.zoneId] as ZoneNode | undefined) : null,
+  )
+  const selectedNode = useScene((s) =>
+    firstSelectedId ? (s.nodes[firstSelectedId as AnyNodeId] as AnyNode | undefined) : null,
+  )
+  const levels = useScene(
+    useShallow((s) => {
+      if (!building) return []
+      return building.children
+        .map((id) => s.nodes[id as AnyNodeId] as LevelNode | undefined)
+        .filter((n): n is LevelNode => n?.type === 'level')
+        .sort((a, b) => a.level - b.level)
+    }),
+  )
 
   const handleLevelClick = (levelId: LevelNode['id']) => {
     // When switching levels, deselect zone and items

package/src/hooks/use-auto-frame.ts

@@ -0,0 +1,45 @@
+'use client'
+
+import { emitter, useScene } from '@pascal-app/core'
+import { useEffect, useRef } from 'react'
+import { computeSceneBoundsXZ } from '../lib/scene-bounds'
+
+/**
+ * Auto-frame the camera onto a freshly loaded scene.
+ *
+ * Motivation: when the MCP `setScene` tool (or any other entry point) swaps
+ * the scene graph while the default camera is pointing at empty space, the
+ * user sees a black viewport. This hook subscribes to the core scene store
+ * and, whenever `nodes` transitions from empty → non-empty, computes the
+ * XZ bounds of the new scene and emits `camera-controls:fit-scene`. The
+ * `<CustomCameraControls />` component picks up that event and frames the
+ * camera onto the bounds.
+ *
+ * Mount in exactly ONE component (the Editor). It holds no state of its own;
+ * the subscription is torn down on unmount.
+ */
+export function useAutoFrame(): void {
+  // Track the previous node count so we can detect the empty → non-empty edge.
+  const wasEmptyRef = useRef(true)
+
+  useEffect(() => {
+    // Initialise from current store state so a remount after a setScene
+    // doesn't re-frame an already-populated scene.
+    wasEmptyRef.current = Object.keys(useScene.getState().nodes).length === 0
+
+    const unsubscribe = useScene.subscribe((state) => {
+      const isEmpty = Object.keys(state.nodes).length === 0
+      const wasEmpty = wasEmptyRef.current
+      wasEmptyRef.current = isEmpty
+
+      // Only react to empty → non-empty transitions. Normal edits keep both
+      // flags false; a `clearScene()` goes non-empty → empty and is ignored.
+      if (!wasEmpty || isEmpty) return
+
+      const bounds = computeSceneBoundsXZ(state.nodes)
+      emitter.emit('camera-controls:fit-scene', bounds ? { bounds } : {})
+    })
+
+    return unsubscribe
+  }, [])
+}

package/src/hooks/use-contextual-tools.ts

@@ -1,12 +1,18 @@
 import { type AnyNodeId, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useMemo } from 'react'
+import { useShallow } from 'zustand/react/shallow'
 import useEditor, { type StructureTool } from '../store/use-editor'
 
 export function useContextualTools() {
   const selection = useViewer((s) => s.selection)
-  const nodes = useScene((s) => s.nodes)
-  const phase = useEditor((s) => s.phase)
+  // Only resubscribe when the *types* of selected nodes change, not when any
+  // node in the scene mutates.
+  const selectedTypes = useScene(
+    useShallow((s) =>
+      selection.selectedIds.map((id) => s.nodes[id as AnyNodeId]?.type).filter(Boolean),
+    ),
+  )
   const structureLayer = useEditor((s) => s.structureLayer)
 
   return useMemo(() => {
@@ -26,35 +32,30 @@ export function useContextualTools() {
       'window',
     ]
 
-    if (selection.selectedIds.length === 0) {
+    if (selectedTypes.length === 0) {
       return defaultTools
     }
 
-    // Get types of selected nodes
-    const selectedTypes = new Set(
-      selection.selectedIds.map((id) => nodes[id as AnyNodeId]?.type).filter(Boolean),
-    )
-
     // If a wall is selected, prioritize wall-hosted elements
-    if (selectedTypes.has('wall')) {
+    if (selectedTypes.includes('wall')) {
       return ['window', 'door', 'wall', 'fence'] as StructureTool[]
     }
 
     // If a slab is selected, prioritize slab editing
-    if (selectedTypes.has('slab')) {
+    if (selectedTypes.includes('slab')) {
       return ['slab', 'wall'] as StructureTool[]
     }
 
     // If a ceiling is selected, prioritize ceiling editing
-    if (selectedTypes.has('ceiling')) {
+    if (selectedTypes.includes('ceiling')) {
       return ['ceiling'] as StructureTool[]
     }
 
     // If a roof is selected, prioritize roof editing
-    if (selectedTypes.has('roof')) {
+    if (selectedTypes.includes('roof')) {
       return ['roof'] as StructureTool[]
     }
 
     return defaultTools
-  }, [selection.selectedIds, nodes, structureLayer])
+  }, [selectedTypes, structureLayer])
 }