@pascal-app/editor 0.6.0 → 0.8.0

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

@@ -14,6 +14,7 @@ import { useViewer } from '@pascal-app/viewer'
 import {
   Camera,
   ChevronDown,
+  Copy,
   Loader2,
   MoreHorizontal,
   Pencil,
@@ -31,10 +32,16 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from './../../../../../components/ui/primitives/popover'
+import {
+  buildLevelDuplicateCreateOps,
+  type LevelDuplicatePreset,
+} from './../../../../../lib/level-duplication'
 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'
+import { LevelDuplicateDialog } from '../../../level-duplicate-dialog'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, TreeNode } from './tree-node'
 import { TreeNodeDragProvider } from './tree-node-drag'
@@ -360,7 +367,7 @@ const ReferenceItem = memo(function ReferenceItem({
         <InlineRenameInput
           defaultName={refNode.type === 'scan' ? '3D Scan' : 'Guide Image'}
           isEditing={isEditing}
-          node={refNode}
+          nodeId={refNode.id}
           onStartEditing={() => setIsEditing(true)}
           onStopEditing={() => setIsEditing(false)}
         />
@@ -394,7 +401,10 @@ const LevelReferences = memo(function LevelReferences({
   onUploadAsset,
   onDeleteAsset,
 }: LevelReferencesProps) {
+  const createNode = useScene((s) => s.createNode)
   const deleteNode = useScene((s) => s.deleteNode)
+  const setSelection = useViewer((s) => s.setSelection)
+  const setShowGuides = useViewer((s) => s.setShowGuides)
   const references = useScene(
     useShallow((s) =>
       Object.values(s.nodes).filter(
@@ -417,19 +427,27 @@ const LevelReferences = memo(function LevelReferences({
 
   const scanInputRef = useRef<HTMLInputElement>(null)
 
-  const handleAddAsset = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleAddAsset = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0]
     if (!file) return
     e.target.value = ''
 
-    if (!projectId) {
-      useUploadStore.getState().startUpload(levelId, 'scan', file.name)
-      useUploadStore.getState().setError(levelId, 'No active project. Please open a project first.')
+    // Auto-detect type based on file extension/mime type
+    const isScan =
+      file.name.toLowerCase().endsWith('.glb') || file.name.toLowerCase().endsWith('.gltf')
+    const isImage = file.type.startsWith('image/')
+    const type = isScan ? 'scan' : 'guide'
+
+    if (!(isScan || isImage)) {
+      useUploadStore.getState().startUpload(levelId, type, file.name)
+      useUploadStore
+        .getState()
+        .setError(levelId, 'Invalid file type. Please upload a .glb/.gltf scan or an image.')
       return
     }
 
     if (file.size > MAX_FILE_SIZE) {
-      useUploadStore.getState().startUpload(levelId, 'scan', file.name)
+      useUploadStore.getState().startUpload(levelId, type, file.name)
       useUploadStore
         .getState()
         .setError(
@@ -439,21 +457,29 @@ const LevelReferences = memo(function LevelReferences({
       return
     }
 
-    // Auto-detect type based on file extension/mime type
-    const isScan =
-      file.name.toLowerCase().endsWith('.glb') || file.name.toLowerCase().endsWith('.gltf')
-    const isImage = file.type.startsWith('image/')
+    if (isImage) {
+      useUploadStore.getState().startUpload(levelId, 'guide', file.name)
+      useUploadStore.getState().setStatus(levelId, 'uploading')
+
+      try {
+        const guide = await createLocalGuideImage({ createNode, file, levelId })
+        setShowGuides(true)
+        setSelectedReferenceId(guide.id)
+        setSelection({ selectedIds: [], zoneId: null })
+        useUploadStore.getState().setResult(levelId, guide.url)
+        window.setTimeout(() => useUploadStore.getState().clearUpload(levelId), 600)
+      } catch {
+        useUploadStore.getState().setError(levelId, 'Could not add that guide image.')
+      }
+      return
+    }
 
-    if (!(isScan || isImage)) {
+    if (!projectId) {
       useUploadStore.getState().startUpload(levelId, 'scan', file.name)
-      useUploadStore
-        .getState()
-        .setError(levelId, 'Invalid file type. Please upload a .glb/.gltf scan or an image.')
+      useUploadStore.getState().setError(levelId, 'No active project. Please open a project first.')
       return
     }
 
-    const type = isScan ? 'scan' : 'guide'
-
     clearUpload(levelId)
     onUploadAsset?.(projectId, levelId, file, type)
   }
@@ -558,6 +584,7 @@ const LevelReferences = memo(function LevelReferences({
 
 const LevelItem = memo(function LevelItem({
   level,
+  levels,
   selectedLevelId,
   setSelection,
   updateNode,
@@ -567,6 +594,7 @@ const LevelItem = memo(function LevelItem({
   onDeleteAsset,
 }: {
   level: LevelNode
+  levels: LevelNode[]
   selectedLevelId: string | null
   setSelection: (selection: any) => void
   updateNode: (id: AnyNodeId, updates: Partial<AnyNode>) => void
@@ -576,11 +604,22 @@ const LevelItem = memo(function LevelItem({
   onDeleteAsset?: (projectId: string, url: string) => void
 }) {
   const [cameraPopoverOpen, setCameraPopoverOpen] = useState(false)
+  const [duplicateDialogOpen, setDuplicateDialogOpen] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
+  const createNodes = useScene((s) => s.createNodes)
+  const updateNodes = useScene((s) => s.updateNodes)
   const itemRef = useRef<HTMLDivElement>(null)
   const isSelected = selectedLevelId === level.id
   const canDeleteLevel = level.level !== 0
   const [isExpanded, setIsExpanded] = useState(isSelected)
+  const buildingId =
+    typeof level.parentId === 'string' && level.parentId.startsWith('building_')
+      ? (level.parentId as BuildingNode['id'])
+      : undefined
+
+  const selectLevel = (levelId: LevelNode['id']) => {
+    setSelection(buildingId ? { buildingId, levelId } : { levelId })
+  }
 
   useEffect(() => {
     setIsExpanded(isSelected)
@@ -593,13 +632,34 @@ const LevelItem = memo(function LevelItem({
   }, [isSelected])
 
   const handleSelect = () => {
-    setSelection({ levelId: level.id })
+    selectLevel(level.id)
   }
 
   const handleDoubleClick = () => {
     focusTreeNode(level.id)
   }
 
+  const handleDuplicateLevel = (preset: LevelDuplicatePreset = 'everything') => {
+    const { createOps, newLevelId, shiftedLevels } = buildLevelDuplicateCreateOps({
+      nodes: useScene.getState().nodes,
+      level,
+      levels,
+      preset,
+    })
+
+    if (shiftedLevels.length > 0) {
+      updateNodes(
+        shiftedLevels.map((shiftedLevel) => ({
+          id: shiftedLevel.id as AnyNodeId,
+          data: { level: shiftedLevel.level } as Partial<AnyNode>,
+        })),
+      )
+    }
+    createNodes(createOps)
+    selectLevel(newLevelId as LevelNode['id'])
+    setDuplicateDialogOpen(false)
+  }
+
   return (
     <div className="relative flex flex-col">
       <div
@@ -641,7 +701,7 @@ const LevelItem = memo(function LevelItem({
               if (isSelected) {
                 setIsExpanded(!isExpanded)
               } else {
-                setSelection({ levelId: level.id })
+                selectLevel(level.id)
               }
             }}
           >
@@ -665,7 +725,7 @@ const LevelItem = memo(function LevelItem({
           <InlineRenameInput
             defaultName={`Level ${level.level}`}
             isEditing={isEditing}
-            node={level}
+            nodeId={level.id}
             onStartEditing={() => setIsEditing(true)}
             onStopEditing={() => setIsEditing(false)}
           />
@@ -750,7 +810,23 @@ const LevelItem = memo(function LevelItem({
               <MoreHorizontal className="h-3.5 w-3.5" />
             </button>
           </PopoverTrigger>
-          <PopoverContent align="start" className="w-40 p-1" side="right">
+          <PopoverContent align="start" className="w-48 p-1" side="right">
+            <button
+              className="flex w-full cursor-pointer items-center gap-2 rounded px-3 py-1.5 text-left text-sm transition-colors hover:bg-accent"
+              onClick={() => handleDuplicateLevel()}
+              title="Duplicate level"
+            >
+              <Copy className="h-3.5 w-3.5" />
+              Duplicate
+            </button>
+            <button
+              className="flex w-full cursor-pointer items-center gap-2 rounded px-3 py-1.5 text-left text-sm transition-colors hover:bg-accent"
+              onClick={() => setDuplicateDialogOpen(true)}
+              title="Duplicate level with options"
+            >
+              <Copy className="h-3.5 w-3.5" />
+              Duplicate with options...
+            </button>
             <button
               className="flex w-full items-center gap-2 rounded px-3 py-1.5 text-left text-sm transition-colors enabled:cursor-pointer enabled:hover:bg-accent enabled:hover:text-red-600 disabled:cursor-not-allowed disabled:opacity-50"
               disabled={!canDeleteLevel}
@@ -782,6 +858,12 @@ const LevelItem = memo(function LevelItem({
           </motion.div>
         )}
       </AnimatePresence>
+      <LevelDuplicateDialog
+        level={level}
+        onConfirm={handleDuplicateLevel}
+        onOpenChange={setDuplicateDialogOpen}
+        open={duplicateDialogOpen}
+      />
     </div>
   )
 })
@@ -824,7 +906,7 @@ const LevelsSection = memo(function LevelsSection({
       parentId: building.id,
     })
     createNode(newLevel, building.id)
-    setSelection({ levelId: newLevel.id })
+    setSelection({ buildingId: building.id, levelId: newLevel.id })
   }
 
   return (
@@ -859,6 +941,7 @@ const LevelsSection = memo(function LevelsSection({
             isLast={index === levels.length - 1}
             key={level.id}
             level={level}
+            levels={levels}
             onDeleteAsset={onDeleteAsset}
             onUploadAsset={onUploadAsset}
             projectId={projectId}
@@ -1087,7 +1170,7 @@ const ZoneItem = memo(function ZoneItem({ zone, isLast }: { zone: ZoneNode; isLa
         <InlineRenameInput
           defaultName={defaultName}
           isEditing={isEditing}
-          node={zone}
+          nodeId={zone.id}
           onStartEditing={() => setIsEditing(true)}
           onStopEditing={() => setIsEditing(false)}
         />

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

@@ -1,4 +1,4 @@
-import { type AnyNodeId, type LevelNode, useScene } from '@pascal-app/core'
+import { type LevelNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Layers } from 'lucide-react'
 import { memo, useCallback, useState } from 'react'
@@ -8,7 +8,7 @@ import { focusTreeNode, TreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
 
 interface LevelTreeNodeProps {
-  nodeId: AnyNodeId
+  nodeId: LevelNode['id']
   depth: number
   isLast?: boolean
 }

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

@@ -0,0 +1,76 @@
+'use client'
+
+import { type SpawnNode, 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 SpawnTreeNodeProps {
+  nodeId: SpawnNode['id']
+  depth: number
+  isLast?: boolean
+}
+
+export const SpawnTreeNode = memo(function SpawnTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: SpawnTreeNodeProps) {
+  const [isEditing, setIsEditing] = useState(false)
+  const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
+  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],
+  )
+
+  return (
+    <TreeNodeWrapper
+      actions={<TreeNodeActions nodeId={nodeId} />}
+      depth={depth}
+      expanded={false}
+      hasChildren={false}
+      icon={
+        <Image alt="" className="object-contain" height={14} src="/icons/site.png" width={14} />
+      }
+      isHovered={isHovered}
+      isLast={isLast}
+      isSelected={isSelected}
+      isVisible={isVisible}
+      label={
+        <InlineRenameInput
+          defaultName="Spawn Point"
+          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/tree-node.tsx

@@ -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'
@@ -80,13 +82,19 @@ export const TreeNode = memo(function TreeNode({ nodeId, depth = 0, isLast }: Tr
 
   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,7 +110,7 @@ export const TreeNode = memo(function TreeNode({ nodeId, depth = 0, isLast }: Tr
     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
   }

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

@@ -1,4 +1,4 @@
-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 { memo, useCallback, useState } from 'react'
 import { ColorDot } from './../../../../../components/ui/primitives/color-dot'
@@ -7,7 +7,7 @@ import { focusTreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
 
 interface ZoneTreeNodeProps {
-  nodeId: AnyNodeId
+  nodeId: ZoneNode['id']
   depth: number
   isLast?: boolean
 }
@@ -44,7 +44,9 @@ export const ZoneTreeNode = memo(function ZoneTreeNode({
       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}
@@ -78,8 +80,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/panels/zone-panel/index.tsx

@@ -41,7 +41,7 @@ function ZoneItem({ zone }: { zone: ZoneNode }) {
       className={cn(
         'group/row mx-1 mb-0.5 flex h-8 cursor-pointer select-none items-center rounded-lg border px-2 text-sm transition-all duration-200',
         isSelected
-          ? 'border-neutral-200/60 bg-white text-foreground shadow-[0_1px_2px_0px_rgba(0,0,0,0.05)] ring-1 ring-white/50 ring-inset dark:border-border/50 dark:bg-accent/50 dark:ring-white/10'
+          ? 'border-neutral-200/60 bg-white text-foreground shadow-elevation-0 ring-1 ring-white/50 ring-inset dark:border-border/50 dark:bg-accent/50 dark:ring-white/10'
           : 'border-transparent text-muted-foreground hover:border-neutral-200/50 hover:bg-white/40 hover:text-foreground dark:hover:border-border/40 dark:hover:bg-accent/30',
       )}
       onClick={handleClick}

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/slider.tsx

@@ -17,7 +17,7 @@ const sliderVariants = cva(
           [&_[data-slot=slider-track]]:border
           [&_[data-slot=slider-track]]:border-neutral-300
           [&_[data-slot=slider-track]]:bg-white/50
-          [&_[data-slot=slider-track]]:shadow-[0_1px_2px_0px_rgba(0,0,0,0.1)]
+          [&_[data-slot=slider-track]]:shadow-elevation-0
           [&_[data-slot=slider-track]]:ring-1
           [&_[data-slot=slider-track]]:ring-white
           [&_[data-slot=slider-track]]:ring-inset

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-auto-save.ts

@@ -60,6 +60,7 @@ export function useAutoSave({
   // Stable subscription to scene changes
   useEffect(() => {
     let lastNodesSnapshot = JSON.stringify(useScene.getState().nodes)
+    let lastNodeCount = Object.keys(useScene.getState().nodes).length
 
     async function executeSave() {
       if (isLoadingSceneRef.current || isVersionPreviewModeRef.current) {
@@ -71,6 +72,19 @@ export function useAutoSave({
       const { nodes, rootNodeIds } = useScene.getState()
       const sceneGraph = { nodes, rootNodeIds } as SceneGraph
 
+      // Guard: refuse to autosave if the scene went from populated to nearly empty.
+      // This catches accidental full deletions before they're persisted.
+      const currentNodeCount = Object.keys(nodes).length
+      const STRUCTURAL_NODE_COUNT = 4 // site + building + levels (empty scene skeleton)
+      if (lastNodeCount > STRUCTURAL_NODE_COUNT && currentNodeCount <= STRUCTURAL_NODE_COUNT) {
+        console.warn(
+          `[autosave] Blocked: scene dropped from ${lastNodeCount} to ${currentNodeCount} nodes. Likely accidental deletion.`,
+        )
+        setSaveStatus('error')
+        return
+      }
+      lastNodeCount = currentNodeCount
+
       isSavingRef.current = true
       pendingSaveRef.current = false
       setSaveStatus('saving')