e.stopPropagation()}
onPointerUp={(e) => e.stopPropagation()}
- >
-
-
-
-
+ />
setFloorplanHovered(true)}
+ onPointerLeave={() => {
+ setFloorplanHovered(false)
+ setFloorplanCursorPosition(null)
+ }}
+ style={{
+ cursor: activeResizeDirection ? resizeCursorByDirection[activeResizeDirection] : undefined,
+ height: panelRect.height,
+ left: panelRect.x,
+ top: panelRect.y,
+ visibility: isPanelReady ? 'visible' : 'hidden',
+ width: panelRect.width,
+ }}
+ >
+ {resizeHandleConfigurations.map((handle) => (
+
+ )
+}
diff --git a/packages/editor/src/components/editor/index.tsx b/packages/editor/src/components/editor/index.tsx
index f660cfb7..c1400bac 100644
--- a/packages/editor/src/components/editor/index.tsx
+++ b/packages/editor/src/components/editor/index.tsx
@@ -1,8 +1,9 @@
'use client'
+import { Icon } from '@iconify/react'
import { initSpaceDetectionSync, initSpatialGridSync, useScene } from '@pascal-app/core'
import { InteractiveSystem, useViewer, Viewer } from '@pascal-app/viewer'
-import { type ReactNode, useEffect, useState } from 'react'
+import { type ReactNode, useCallback, useEffect, useState } from 'react'
import { ViewerOverlay } from '../../components/viewer-overlay'
import { ViewerZoneSystem } from '../../components/viewer-zone-system'
import { type PresetsAdapter, PresetsProvider } from '../../contexts/presets-context'
@@ -12,10 +13,12 @@ import {
applySceneGraphToEditor,
loadSceneFromLocalStorage,
type SceneGraph,
+ writePersistedSelection,
} from '../../lib/scene'
import { initSFXBus } from '../../lib/sfx-bus'
import useEditor from '../../store/use-editor'
import { CeilingSystem } from '../systems/ceiling/ceiling-system'
+import { RoofEditSystem } from '../systems/roof/roof-edit-system'
import { ZoneLabelEditorSystem } from '../systems/zone/zone-label-editor-system'
import { ZoneSystem } from '../systems/zone/zone-system'
import { ToolManager } from '../tools/tool-manager'
@@ -24,6 +27,7 @@ import { HelperManager } from '../ui/helpers/helper-manager'
import { PanelManager } from '../ui/panels/panel-manager'
import { ErrorBoundary } from '../ui/primitives/error-boundary'
import { SidebarProvider } from '../ui/primitives/sidebar'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/primitives/tooltip'
import { SceneLoader } from '../ui/scene-loader'
import { AppSidebar } from '../ui/sidebar/app-sidebar'
import type { SettingsPanelProps } from '../ui/sidebar/panels/settings-panel'
@@ -31,47 +35,30 @@ import type { SitePanelProps } from '../ui/sidebar/panels/site-panel'
import { CustomCameraControls } from './custom-camera-controls'
import { ExportManager } from './export-manager'
import { FloatingActionMenu } from './floating-action-menu'
+import { FloorplanPanel } from './floorplan-panel'
import { Grid } from './grid'
import { PresetThumbnailGenerator } from './preset-thumbnail-generator'
import { SelectionManager } from './selection-manager'
import { SiteEdgeLabels } from './site-edge-labels'
import { ThumbnailGenerator } from './thumbnail-generator'
+import { WallMeasurementLabel } from './wall-measurement-label'
-// Load default scene initially (will be replaced when onLoad runs)
-useScene.getState().loadScene()
-initSpatialGridSync()
-initSpaceDetectionSync(useScene, useEditor)
+let hasInitializedEditorRuntime = false
+const CAMERA_CONTROLS_HINT_DISMISSED_STORAGE_KEY = 'editor-camera-controls-hint-dismissed:v1'
-// Auto-select the first building and level for the default scene
-const sceneNodes = useScene.getState().nodes as Record
-const sceneRootIds = useScene.getState().rootNodeIds
-const siteNode = sceneRootIds[0] ? sceneNodes[sceneRootIds[0]] : null
-const resolve = (child: any) => (typeof child === 'string' ? sceneNodes[child] : child)
-const firstBuilding = siteNode?.children?.map(resolve).find((n: any) => n?.type === 'building')
-const firstLevel = firstBuilding?.children?.map(resolve).find((n: any) => n?.type === 'level')
+function initializeEditorRuntime() {
+ if (hasInitializedEditorRuntime) return
+ initSpatialGridSync()
+ initSpaceDetectionSync(useScene, useEditor)
+ initSFXBus()
-if (firstBuilding && firstLevel) {
- useViewer.getState().setSelection({
- buildingId: firstBuilding.id,
- levelId: firstLevel.id,
- selectedIds: [],
- zoneId: null,
- })
- useEditor.getState().setPhase('structure')
- useEditor.getState().setStructureLayer('elements')
-
- if (!firstLevel.children || firstLevel.children.length === 0) {
- useEditor.getState().setMode('build')
- useEditor.getState().setTool('wall')
- }
+ hasInitializedEditorRuntime = true
}
-
-initSFXBus()
-
export interface EditorProps {
// UI slots
appMenuButton?: ReactNode
sidebarTop?: ReactNode
+ projectId?: string | null
// Persistence — defaults to localStorage when omitted
onLoad?: () => Promise
@@ -99,7 +86,7 @@ export interface EditorProps {
function EditorSceneCrashFallback() {
return (
-
diff --git a/packages/editor/src/components/ui/helpers/item-helper.tsx b/packages/editor/src/components/ui/helpers/item-helper.tsx
index e1e97a98..7bf90098 100644
--- a/packages/editor/src/components/ui/helpers/item-helper.tsx
+++ b/packages/editor/src/components/ui/helpers/item-helper.tsx
@@ -1,3 +1,5 @@
+import { ShortcutToken } from '../primitives/shortcut-token'
+
interface ItemHelperProps {
showEsc?: boolean
}
@@ -6,20 +8,30 @@ export function ItemHelper({ showEsc }: ItemHelperProps) {
return (
diff --git a/packages/editor/src/components/ui/helpers/slab-helper.tsx b/packages/editor/src/components/ui/helpers/slab-helper.tsx
index bf9b6aad..238f5dde 100644
--- a/packages/editor/src/components/ui/helpers/slab-helper.tsx
+++ b/packages/editor/src/components/ui/helpers/slab-helper.tsx
@@ -1,12 +1,18 @@
+import { ShortcutToken } from '../primitives/shortcut-token'
+
export function SlabHelper() {
return (
diff --git a/packages/editor/src/components/ui/helpers/wall-helper.tsx b/packages/editor/src/components/ui/helpers/wall-helper.tsx
index f15b3ac1..574d50d9 100644
--- a/packages/editor/src/components/ui/helpers/wall-helper.tsx
+++ b/packages/editor/src/components/ui/helpers/wall-helper.tsx
@@ -1,12 +1,18 @@
+import { ShortcutToken } from '../primitives/shortcut-token'
+
export function WallHelper() {
return (
diff --git a/packages/editor/src/components/ui/panels/ceiling-panel.tsx b/packages/editor/src/components/ui/panels/ceiling-panel.tsx
index 178e4945..71ec87c1 100644
--- a/packages/editor/src/components/ui/panels/ceiling-panel.tsx
+++ b/packages/editor/src/components/ui/panels/ceiling-panel.tsx
@@ -102,8 +102,12 @@ export function CeilingPanel() {
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]
+ const pi = polygon[i]
+ const pj = polygon[j]
+ if (pi && pj) {
+ area += pi[0] * pj[1]
+ area -= pj[0] * pi[1]
+ }
}
return Math.abs(area) / 2
}
diff --git a/packages/editor/src/components/ui/panels/door-panel.tsx b/packages/editor/src/components/ui/panels/door-panel.tsx
index d092e233..a2571aa1 100644
--- a/packages/editor/src/components/ui/panels/door-panel.tsx
+++ b/packages/editor/src/components/ui/panels/door-panel.tsx
@@ -66,7 +66,7 @@ export function DoorPanel() {
}, [selectedId, node, deleteNode, setSelection])
const handleDuplicate = useCallback(() => {
- if (!(node && node.parentId)) return
+ if (!node?.parentId) return
sfxEmitter.emit('sfx:item-pick')
useScene.temporal.getState().pause()
const cloned = structuredClone(node) as any
@@ -79,9 +79,10 @@ export function DoorPanel() {
}, [node, setMovingNode, setSelection])
const setSegmentHeightRatio = (segIdx: number, newVal: number) => {
- const numSegs = node!.segments.length
- const totalH = node!.segments.reduce((sum, s) => sum + s.heightRatio, 0)
- const normH = node!.segments.map((s) => s.heightRatio / totalH)
+ if (!node) return
+ const numSegs = node.segments.length
+ const totalH = node.segments.reduce((sum, s) => sum + s.heightRatio, 0)
+ const normH = node.segments.map((s) => s.heightRatio / totalH)
const clamped = Math.max(0.05, Math.min(0.95, newVal))
const neighborIdx = segIdx < numSegs - 1 ? segIdx + 1 : segIdx - 1
const delta = clamped - normH[segIdx]!
@@ -91,12 +92,13 @@ export function DoorPanel() {
if (i === neighborIdx) return neighborVal
return v
})
- const updated = node!.segments.map((s, idx) => ({ ...s, heightRatio: newRatios[idx]! }))
+ const updated = node?.segments.map((s, idx) => ({ ...s, heightRatio: newRatios[idx]! }))
handleUpdate({ segments: updated })
}
const setSegmentColumnRatio = (segIdx: number, colIdx: number, newVal: number) => {
- const seg = node!.segments[segIdx]!
+ const seg = node?.segments[segIdx]
+ if (!seg) return
const normRatios = (() => {
const sum = seg.columnRatios.reduce((a, b) => a + b, 0)
return seg.columnRatios.map((r) => r / sum)
@@ -111,7 +113,7 @@ export function DoorPanel() {
if (i === neighborIdx) return neighborVal
return v
})
- const updated = node!.segments.map((s, idx) =>
+ const updated = node?.segments.map((s, idx) =>
idx === segIdx ? { ...s, columnRatios: newRatios } : s,
)
handleUpdate({ segments: updated })
diff --git a/packages/editor/src/components/ui/panels/panel-manager.tsx b/packages/editor/src/components/ui/panels/panel-manager.tsx
index 8dd543f2..d646fe54 100644
--- a/packages/editor/src/components/ui/panels/panel-manager.tsx
+++ b/packages/editor/src/components/ui/panels/panel-manager.tsx
@@ -8,6 +8,7 @@ import { DoorPanel } from './door-panel'
import { ItemPanel } from './item-panel'
import { ReferencePanel } from './reference-panel'
import { RoofPanel } from './roof-panel'
+import { RoofSegmentPanel } from './roof-segment-panel'
import { SlabPanel } from './slab-panel'
import { WallPanel } from './wall-panel'
import { WindowPanel } from './window-panel'
@@ -32,6 +33,8 @@ export function PanelManager() {
return
+
)
}
diff --git a/packages/editor/src/components/ui/command-palette/editor-commands.tsx b/packages/editor/src/components/ui/command-palette/editor-commands.tsx
new file mode 100644
index 00000000..00a954f5
--- /dev/null
+++ b/packages/editor/src/components/ui/command-palette/editor-commands.tsx
@@ -0,0 +1,388 @@
+'use client'
+
+import type { AnyNodeId } from '@pascal-app/core'
+import { LevelNode, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import {
+ AppWindow,
+ ArrowRight,
+ Box,
+ Building2,
+ Camera,
+ Copy,
+ DoorOpen,
+ Eye,
+ EyeOff,
+ FileJson,
+ Grid3X3,
+ Hexagon,
+ Layers,
+ Map,
+ Maximize2,
+ Minimize2,
+ Moon,
+ MousePointer2,
+ Package,
+ PencilLine,
+ Plus,
+ Redo2,
+ Square,
+ SquareStack,
+ Sun,
+ Trash2,
+ Undo2,
+ Video,
+} from 'lucide-react'
+import { useEffect } from 'react'
+import { deleteLevelWithFallbackSelection } from '../../../lib/level-selection'
+import { useCommandRegistry } from '../../../store/use-command-registry'
+import type { StructureTool } from '../../../store/use-editor'
+import useEditor from '../../../store/use-editor'
+import { useCommandPalette } from './index'
+
+export function EditorCommands() {
+ const register = useCommandRegistry((s) => s.register)
+ const { navigateTo, setInputValue, setOpen } = useCommandPalette()
+
+ const { setPhase, setMode, setTool, setStructureLayer, isPreviewMode, setPreviewMode } =
+ useEditor()
+
+ const exportScene = useViewer((s) => s.exportScene)
+
+ // Re-register when exportScene availability changes (it's a conditional action)
+ useEffect(() => {
+ const run = (fn: () => void) => {
+ fn()
+ setOpen(false)
+ }
+
+ const activateTool = (tool: StructureTool) => {
+ run(() => {
+ setPhase('structure')
+ setMode('build')
+ if (tool === 'zone') setStructureLayer('zones')
+ setTool(tool)
+ })
+ }
+
+ return register([
+ // ── Scene ────────────────────────────────────────────────────────────
+ {
+ id: 'editor.tool.wall',
+ label: 'Wall Tool',
+ group: 'Scene',
+ icon: ((set) => ({
+export const useCommandPalette = create((set, get) => ({
open: false,
- setOpen: (open) => set({ open }),
+ setOpen: (open) => {
+ set({ open })
+ if (!open) set({ pages: [], inputValue: '', cameraScope: null, mode: 'command' })
+ },
+ mode: 'command',
+ setMode: (mode) => set({ mode }),
+ pages: [],
+ inputValue: '',
+ setInputValue: (value) => set({ inputValue: value }),
+ navigateTo: (page) => set((s) => ({ pages: [...s.pages, page], inputValue: '' })),
+ goBack: () => {
+ const { pages } = get()
+ if (pages[pages.length - 1] === 'camera-scope') set({ cameraScope: null })
+ set((s) => ({ pages: s.pages.slice(0, -1), inputValue: '' }))
+ },
+ cameraScope: null,
+ setCameraScope: (scope) => set({ cameraScope: scope }),
}))
// ---------------------------------------------------------------------------
// Helpers
// ---------------------------------------------------------------------------
+function resolve(value: string | (() => string)): string {
+ return typeof value === 'function' ? value() : value
+}
+
function Shortcut({ keys }: { keys: string[] }) {
return (
@@ -85,33 +84,38 @@ function Item({
navigate = false,
}: {
icon: React.ReactNode
- label: string
+ label: string | (() => string)
onSelect: () => void
shortcut?: string[]
disabled?: boolean
keywords?: string[]
- badge?: string
+ badge?: string | (() => string)
navigate?: boolean
}) {
+ const resolvedLabel = resolve(label)
+ const resolvedBadge = badge ? resolve(badge) : undefined
+
return (
{icon}
- {label}
- {badge && (
+ {resolvedLabel}
+ {resolvedBadge && (
- {badge}
+ {resolvedBadge}
)}
{shortcut &&
)
}
@@ -153,46 +157,42 @@ const PAGE_LABEL: Record = {
'rename-level': 'Rename Level',
'goto-level': 'Go to Level',
'camera-view': 'Camera Snapshot',
- 'camera-scope': '', // dynamic — overridden in breadcrumb
+ 'camera-scope': '',
}
// ---------------------------------------------------------------------------
// Main component
// ---------------------------------------------------------------------------
export function CommandPalette() {
- const { open, setOpen } = useCommandPalette()
+ const {
+ open,
+ setOpen,
+ mode,
+ setMode,
+ pages,
+ inputValue,
+ setInputValue,
+ navigateTo,
+ goBack,
+ cameraScope,
+ setCameraScope,
+ } = useCommandPalette()
+
const [meta, setMeta] = useState('⌘')
const [isFullscreen, setIsFullscreen] = useState(false)
- const [pages, setPages] = useState([])
- const [inputValue, setInputValue] = useState('')
- const [cameraScope, setCameraScope] = useState<{ nodeId: string; label: string } | null>(null)
const page = pages[pages.length - 1]
- const { setPhase, setMode, setTool, setStructureLayer, isPreviewMode, setPreviewMode } =
- useEditor()
+ const actions = useCommandRegistry((s) => s.actions)
+ const views = usePaletteViewRegistry((s) => s.views)
+
+ const activeLevelId = useViewer((s) => s.selection.levelId)
+ const activeLevelNode = useScene((s) => (activeLevelId ? s.nodes[activeLevelId] : null))
- const cameraMode = useViewer((s) => s.cameraMode)
- const setCameraMode = useViewer((s) => s.setCameraMode)
- const levelMode = useViewer((s) => s.levelMode)
- const setLevelMode = useViewer((s) => s.setLevelMode)
const wallMode = useViewer((s) => s.wallMode)
const setWallMode = useViewer((s) => s.setWallMode)
- const theme = useViewer((s) => s.theme)
- const setTheme = useViewer((s) => s.setTheme)
- const selection = useViewer((s) => s.selection)
- const exportScene = useViewer((s) => s.exportScene)
-
- const activeLevelId = selection.levelId
- const activeLevelNode = useScene((s) => (activeLevelId ? s.nodes[activeLevelId] : null))
- const isLevelZero =
- activeLevelNode?.type === 'level' && (activeLevelNode as LevelNode).level === 0
-
- // Reactive snapshot status for the selected camera scope
- const cameraScopeNode = useScene((s) =>
- cameraScope ? s.nodes[cameraScope.nodeId as AnyNodeId] : null,
- )
- const hasScopeSnapshot = !!(cameraScopeNode as any)?.camera
+ const levelMode = useViewer((s) => s.levelMode)
+ const setLevelMode = useViewer((s) => s.setLevelMode)
const allLevels = useScene(
useShallow((s) =>
@@ -202,7 +202,10 @@ export function CommandPalette() {
),
)
- const hasSelection = selection.selectedIds.length > 0
+ const cameraScopeNode = useScene((s) =>
+ cameraScope ? s.nodes[cameraScope.nodeId as AnyNodeId] : null,
+ )
+ const hasScopeSnapshot = !!(cameraScopeNode as any)?.camera
// Platform detection
useEffect(() => {
@@ -228,59 +231,11 @@ export function CommandPalette() {
return () => window.removeEventListener('keydown', handler)
}, [setOpen])
- // Reset sub-pages when palette closes
- useEffect(() => {
- if (!open) {
- setPages([])
- setInputValue('')
- setCameraScope(null)
- }
- }, [open])
-
- // ---------------------------------------------------------------------------
- // Navigation helpers
- // ---------------------------------------------------------------------------
- const goBack = () => {
- const leavingPage = pages[pages.length - 1]
- if (leavingPage === 'camera-scope') setCameraScope(null)
- setPages((p) => p.slice(0, -1))
- setInputValue('')
- }
-
- const navigateTo = (p: string) => {
- // Pre-fill the rename input with the current level name
- if (p === 'rename-level' && activeLevelId) {
- const level = useScene.getState().nodes[activeLevelId] as LevelNode
- setInputValue(level?.name ?? '')
- } else {
- setInputValue('')
- }
- setPages((prev) => [...prev, p])
- }
-
- const navigateToCameraScope = (nodeId: string, label: string) => {
- setCameraScope({ nodeId, label })
- setInputValue('')
- setPages((prev) => [...prev, 'camera-scope'])
- }
-
- // ---------------------------------------------------------------------------
- // Action helpers
- // ---------------------------------------------------------------------------
const run = (fn: () => void) => {
fn()
setOpen(false)
}
- const activateTool = (tool: StructureTool) => {
- run(() => {
- setPhase('structure')
- setMode('build')
- if (tool === 'zone') setStructureLayer('zones')
- setTool(tool)
- })
- }
-
const wallModeLabel: Record<'cutaway' | 'up' | 'down', string> = {
cutaway: 'Cutaway',
up: 'Up',
@@ -293,40 +248,7 @@ export function CommandPalette() {
solo: 'Solo',
}
- const deleteSelection = () => {
- if (!hasSelection) return
- run(() => {
- useScene.getState().deleteNodes(selection.selectedIds as any[])
- })
- }
-
- // Level management
- const addLevel = () =>
- run(() => {
- const { nodes } = useScene.getState()
- const building = Object.values(nodes).find((n) => n.type === 'building')
- if (!building) return
- const newLevel = LevelNode.parse({
- level: building.children.length,
- children: [],
- parentId: building.id,
- })
- useScene.getState().createNode(newLevel, building.id)
- useViewer.getState().setSelection({ levelId: newLevel.id })
- })
-
- const deleteActiveLevel = () => {
- if (!activeLevelId || isLevelZero) return
- run(() => {
- useScene.getState().deleteNode(activeLevelId as AnyNodeId)
- const { nodes } = useScene.getState()
- const level0 = Object.values(nodes).find(
- (n) => n.type === 'level' && (n as LevelNode).level === 0,
- )
- if (level0) useViewer.getState().setSelection({ levelId: level0.id as `level_${string}` })
- })
- }
-
+ // Camera snapshot helpers (used by sub-pages registered via EditorCommands)
const confirmRename = () => {
if (!(activeLevelId && inputValue.trim())) return
run(() => {
@@ -334,15 +256,20 @@ export function CommandPalette() {
})
}
- // Camera snapshot (scoped to the currently selected camera scope)
const takeSnapshot = () => {
if (!cameraScope) return
- run(() => emitter.emit('camera-controls:capture', { nodeId: cameraScope.nodeId as AnyNodeId }))
+ import('@pascal-app/core').then(({ emitter }) => {
+ run(() =>
+ emitter.emit('camera-controls:capture', { nodeId: cameraScope.nodeId as AnyNodeId }),
+ )
+ })
}
const viewSnapshot = () => {
if (!(cameraScope && hasScopeSnapshot)) return
- run(() => emitter.emit('camera-controls:view', { nodeId: cameraScope.nodeId as AnyNodeId }))
+ import('@pascal-app/core').then(({ emitter }) => {
+ run(() => emitter.emit('camera-controls:view', { nodeId: cameraScope.nodeId as AnyNodeId }))
+ })
}
const clearSnapshot = () => {
@@ -352,461 +279,416 @@ export function CommandPalette() {
})
}
- // Export helpers
- const exportJson = () =>
- run(() => {
- const { nodes, rootNodeIds } = useScene.getState()
- const blob = new Blob([JSON.stringify({ nodes, rootNodeIds }, null, 2)], {
- type: 'application/json',
- })
- const url = URL.createObjectURL(blob)
- const a = Object.assign(document.createElement('a'), {
- href: url,
- download: `scene_${new Date().toISOString().split('T')[0]}.json`,
- })
- a.click()
- URL.revokeObjectURL(url)
- })
+ // ---------------------------------------------------------------------------
+ // Group registered actions by group (preserving insertion order)
+ // ---------------------------------------------------------------------------
+ const grouped = actions.reduce>((acc, action) => {
+ const list = acc.get(action.group) ?? []
+ list.push(action)
+ acc.set(action.group, list)
+ return acc
+ }, new Map())
- const copyShareLink = () =>
- run(() => {
- navigator.clipboard.writeText(window.location.href)
- })
-
- const takeScreenshot = () =>
- run(() => {
- const canvas = document.querySelector('canvas')
- if (!canvas) return
- const a = Object.assign(document.createElement('a'), {
- href: canvas.toDataURL('image/png'),
- download: `screenshot_${new Date().toISOString().split('T')[0]}.png`,
- })
- a.click()
- })
-
- const toggleFullscreen = () =>
- run(() => {
- if (document.fullscreenElement) {
- document.exitFullscreen()
- } else {
- document.documentElement.requestFullscreen()
- }
- })
+ const onClose = () => setOpen(false)
+ const onBack = () => {
+ if (mode !== 'command') {
+ setMode('command')
+ } else {
+ goBack()
+ }
+ }
// ---------------------------------------------------------------------------
// Render
// ---------------------------------------------------------------------------
+
+ // Mode view: replaces the entire cmdk shell
+ const modeView = mode !== 'command' ? views.get(mode) : undefined
+
return (
)
diff --git a/packages/editor/src/components/ui/controls/metric-control.tsx b/packages/editor/src/components/ui/controls/metric-control.tsx
index 647d3c20..e12ee12a 100644
--- a/packages/editor/src/components/ui/controls/metric-control.tsx
+++ b/packages/editor/src/components/ui/controls/metric-control.tsx
@@ -1,6 +1,7 @@
'use client'
import { useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
import { useCallback, useEffect, useRef, useState } from 'react'
import { cn } from '../../../lib/utils'
@@ -27,10 +28,17 @@ export function MetricControl({
className,
unit = '',
}: MetricControlProps) {
+ const viewerUnit = useViewer((state) => state.unit)
+ const isImperial = viewerUnit === 'imperial' && unit === 'm'
+ const multiplier = isImperial ? 3.280_84 : 1
+ const displayUnit = isImperial ? 'ft' : unit
+
+ const displayValue = value * multiplier
+
const [isEditing, setIsEditing] = useState(false)
const [isDragging, setIsDragging] = useState(false)
const [isHovered, setIsHovered] = useState(false)
- const [inputValue, setInputValue] = useState(value.toFixed(precision))
+ const [inputValue, setInputValue] = useState(displayValue.toFixed(precision))
const startXRef = useRef(0)
const startValueRef = useRef(0)
const containerRef = useRef(null)
@@ -47,9 +55,9 @@ export function MetricControl({
useEffect(() => {
if (!isEditing) {
- setInputValue(value.toFixed(precision))
+ setInputValue(displayValue.toFixed(precision))
}
- }, [value, precision, isEditing])
+ }, [displayValue, precision, isEditing])
useEffect(() => {
const container = containerRef.current
@@ -61,21 +69,21 @@ export function MetricControl({
e.preventDefault()
const direction = e.deltaY < 0 ? 1 : -1
- let scrollStep = step
- if (e.shiftKey) scrollStep = step * 10
- else if (e.altKey) scrollStep = step * 0.1
+ let scrollStep = step / multiplier
+ if (e.shiftKey) scrollStep = (step * 10) / multiplier
+ else if (e.altKey) scrollStep = (step * 0.1) / multiplier
const newValue = clamp(valueRef.current + direction * scrollStep)
- const finalValue = Number.parseFloat(newValue.toFixed(precision))
+ const finalValue = Number.parseFloat((newValue * multiplier).toFixed(precision)) / multiplier
- if (finalValue !== valueRef.current) {
+ if (Math.abs(finalValue - valueRef.current) > 1e-6) {
onChange(finalValue)
}
}
container.addEventListener('wheel', handleWheel, { passive: false })
return () => container.removeEventListener('wheel', handleWheel)
- }, [isEditing, step, clamp, onChange, precision])
+ }, [isEditing, step, clamp, onChange, precision, multiplier])
useEffect(() => {
if (!isHovered || isEditing) return
@@ -87,14 +95,15 @@ export function MetricControl({
if (direction !== 0) {
e.preventDefault()
- let scrollStep = step
- if (e.shiftKey) scrollStep = step * 10
- else if (e.altKey) scrollStep = step * 0.1
+ let scrollStep = step / multiplier
+ if (e.shiftKey) scrollStep = (step * 10) / multiplier
+ else if (e.altKey) scrollStep = (step * 0.1) / multiplier
const newValue = clamp(valueRef.current + direction * scrollStep)
- const finalValue = Number.parseFloat(newValue.toFixed(precision))
+ const finalValue =
+ Number.parseFloat((newValue * multiplier).toFixed(precision)) / multiplier
- if (finalValue !== valueRef.current) {
+ if (Math.abs(finalValue - valueRef.current) > 1e-6) {
onChange(finalValue)
}
}
@@ -102,7 +111,7 @@ export function MetricControl({
window.addEventListener('keydown', handleKeyDown)
return () => window.removeEventListener('keydown', handleKeyDown)
- }, [isHovered, isEditing, step, clamp, onChange, precision])
+ }, [isHovered, isEditing, step, clamp, onChange, precision, multiplier])
const handlePointerDown = useCallback(
(e: React.PointerEvent) => {
@@ -119,15 +128,16 @@ export function MetricControl({
const handlePointerMove = (moveEvent: PointerEvent) => {
const deltaX = moveEvent.clientX - startXRef.current
- let dragStep = step
- if (moveEvent.shiftKey) dragStep = step * 10
- else if (moveEvent.altKey) dragStep = step * 0.1
+ let dragStep = step / multiplier
+ if (moveEvent.shiftKey) dragStep = (step * 10) / multiplier
+ else if (moveEvent.altKey) dragStep = (step * 0.1) / multiplier
const deltaValue = deltaX * dragStep
const newValue = clamp(startValueRef.current + deltaValue)
- const newFinalValue = Number.parseFloat(newValue.toFixed(precision))
+ const newFinalValue =
+ Number.parseFloat((newValue * multiplier).toFixed(precision)) / multiplier
- if (newFinalValue !== finalValue) {
+ if (Math.abs(newFinalValue - finalValue) > 1e-6) {
finalValue = newFinalValue
onChange(finalValue)
}
@@ -138,7 +148,7 @@ export function MetricControl({
document.removeEventListener('pointermove', handlePointerMove)
document.removeEventListener('pointerup', handlePointerUp)
- if (finalValue !== startValueRef.current) {
+ if (Math.abs(finalValue - startValueRef.current) > 1e-6) {
onChange(startValueRef.current)
useScene.temporal.getState().resume()
onChange(finalValue)
@@ -150,13 +160,13 @@ export function MetricControl({
document.addEventListener('pointermove', handlePointerMove)
document.addEventListener('pointerup', handlePointerUp)
},
- [isEditing, value, onChange, clamp, precision, step],
+ [isEditing, value, onChange, clamp, precision, step, multiplier],
)
const handleValueClick = useCallback(() => {
setIsEditing(true)
- setInputValue(value.toFixed(precision))
- }, [value, precision])
+ setInputValue((value * multiplier).toFixed(precision))
+ }, [value, multiplier, precision])
const handleInputChange = useCallback((e: React.ChangeEvent) => {
setInputValue(e.target.value)
@@ -165,12 +175,12 @@ export function MetricControl({
const submitValue = useCallback(() => {
const numValue = Number.parseFloat(inputValue)
if (Number.isNaN(numValue)) {
- setInputValue(value.toFixed(precision))
+ setInputValue((value * multiplier).toFixed(precision))
} else {
- onChange(clamp(Number.parseFloat(numValue.toFixed(precision))))
+ onChange(clamp(numValue / multiplier))
}
setIsEditing(false)
- }, [inputValue, onChange, clamp, precision, value])
+ }, [inputValue, onChange, clamp, multiplier, value, precision])
const handleInputBlur = useCallback(() => {
submitValue()
@@ -181,21 +191,21 @@ export function MetricControl({
if (e.key === 'Enter') {
submitValue()
} else if (e.key === 'Escape') {
- setInputValue(value.toFixed(precision))
+ setInputValue((value * multiplier).toFixed(precision))
setIsEditing(false)
} else if (e.key === 'ArrowUp') {
e.preventDefault()
- const newV = clamp(value + step)
+ const newV = clamp(value + step / multiplier)
onChange(newV)
- setInputValue(newV.toFixed(precision))
+ setInputValue((newV * multiplier).toFixed(precision))
} else if (e.key === 'ArrowDown') {
e.preventDefault()
- const newV = clamp(value - step)
+ const newV = clamp(value - step / multiplier)
onChange(newV)
- setInputValue(newV.toFixed(precision))
+ setInputValue((newV * multiplier).toFixed(precision))
}
},
- [submitValue, value, precision, step, clamp, onChange],
+ [submitValue, value, multiplier, precision, step, clamp, onChange],
)
return (
@@ -233,7 +243,7 @@ export function MetricControl({
type="text"
value={inputValue}
/>
- {unit && {unit}}
+ {displayUnit && {displayUnit}}
) : (
diff --git a/packages/editor/src/components/ui/controls/slider-control.tsx b/packages/editor/src/components/ui/controls/slider-control.tsx
index 4a278949..d4e18f82 100644
--- a/packages/editor/src/components/ui/controls/slider-control.tsx
+++ b/packages/editor/src/components/ui/controls/slider-control.tsx
@@ -172,7 +172,7 @@ export function SliderControl({
document.addEventListener('pointermove', handlePointerMove)
document.addEventListener('pointerup', handlePointerUp)
},
- [isEditing, min, max, step, precision, clamp, onChange],
+ [isEditing, min, max, step, precision, clamp, onChange, dragStartValue, value],
)
const handleValueClick = useCallback(() => {
diff --git a/packages/editor/src/components/ui/helpers/ceiling-helper.tsx b/packages/editor/src/components/ui/helpers/ceiling-helper.tsx
index 7117cc22..c1401546 100644
--- a/packages/editor/src/components/ui/helpers/ceiling-helper.tsx
+++ b/packages/editor/src/components/ui/helpers/ceiling-helper.tsx
@@ -1,12 +1,18 @@
+import { ShortcutToken } from '../primitives/shortcut-token'
+
export function CeilingHelper() {
return (
The editor scene failed to render
@@ -125,9 +112,201 @@ function EditorSceneCrashFallback() {
)
}
+function SelectionPersistenceManager({ enabled }: { enabled: boolean }) {
+ const selection = useViewer((state) => state.selection)
+
+ useEffect(() => {
+ if (!enabled) {
+ return
+ }
+
+ writePersistedSelection(selection)
+ }, [enabled, selection])
+
+ return null
+}
+
+type ShortcutKey = {
+ value: string
+}
+
+type CameraControlHint = {
+ action: string
+ keys: ShortcutKey[]
+ alternativeKeys?: ShortcutKey[]
+}
+
+const EDITOR_CAMERA_CONTROL_HINTS: CameraControlHint[] = [
+ {
+ action: 'Pan',
+ keys: [{ value: 'Space' }, { value: 'Left click' }],
+ },
+ { action: 'Rotate', keys: [{ value: 'Right click' }] },
+ { action: 'Zoom', keys: [{ value: 'Scroll' }] },
+]
+
+const PREVIEW_CAMERA_CONTROL_HINTS: CameraControlHint[] = [
+ { action: 'Pan', keys: [{ value: 'Left click' }] },
+ { action: 'Rotate', keys: [{ value: 'Right click' }] },
+ { action: 'Zoom', keys: [{ value: 'Scroll' }] },
+]
+
+const CAMERA_SHORTCUT_KEY_META: Record
+ {keys.map((key, index) => (
+
+ )
+}
+
+function CameraControlHintItem({ hint }: { hint: CameraControlHint }) {
+ return (
+
+ {index > 0 ? + : null}
+
+ ))}
+
+
+ {hint.action}
+
+
+ )
+}
+
+function ViewerCanvasControlsHint({
+ isPreviewMode,
+ onDismiss,
+}: {
+ isPreviewMode: boolean
+ onDismiss: () => void
+}) {
+ const hints = isPreviewMode ? PREVIEW_CAMERA_CONTROL_HINTS : EDITOR_CAMERA_CONTROL_HINTS
+
+ return (
+
+
+
+
+ )
+}
+
export default function Editor({
appMenuButton,
sidebarTop,
+ projectId,
onLoad,
onSave,
onDirty,
@@ -150,7 +329,24 @@ export default function Editor({
})
const [isSceneLoading, setIsSceneLoading] = useState(false)
+ const [hasLoadedInitialScene, setHasLoadedInitialScene] = useState(false)
+ const [isCameraControlsHintVisible, setIsCameraControlsHintVisible] = useState
+ {hints.map((hint) => (
+
+
- {showLoader &&
+
+ )}
- {isPreviewMode ? (
+ {!showLoader && isCameraControlsHintVisible ? (
+
+
+ {!(isPreviewMode || isLoading) &&
+
+
+
+
+ )
+}
diff --git a/packages/editor/src/components/editor/selection-manager.tsx b/packages/editor/src/components/editor/selection-manager.tsx
index 9ac2b43e..2cae4682 100644
--- a/packages/editor/src/components/editor/selection-manager.tsx
+++ b/packages/editor/src/components/editor/selection-manager.tsx
@@ -1,5 +1,6 @@
import {
type AnyNode,
+ type AnyNodeId,
type BuildingNode,
emitter,
type ItemNode,
@@ -11,7 +12,7 @@ import {
import { useViewer } from '@pascal-app/viewer'
import { useEffect, useRef } from 'react'
-import useEditor from './../../store/use-editor'
+import useEditor, { type Phase, type StructureLayer } from './../../store/use-editor'
const isNodeInCurrentLevel = (node: AnyNode): boolean => {
const currentLevelId = useViewer.getState().selection.levelId
@@ -28,6 +29,7 @@ type SelectableNodeType =
| 'slab'
| 'ceiling'
| 'roof'
+ | 'roof-segment'
| 'window'
| 'door'
@@ -43,6 +45,11 @@ interface SelectionStrategy {
isValid: (node: AnyNode) => boolean
}
+type SelectionTarget = {
+ phase: Phase
+ structureLayer?: StructureLayer
+}
+
export const resolveBuildingId = (
levelId: string,
nodes: Record
+ {label}
+
+
+ 
+
+ 
+
+
+
+
- {Number(value.toFixed(precision)).toFixed(precision)}
+ {Number(displayValue.toFixed(precision)).toFixed(precision)}
- {unit && {unit}}
+ {displayUnit && {displayUnit}}
)}
- Shift
+
+
+
- Esc
+
- R
+
+
+
- T
+
- Shift
+
{showEsc && (
- Esc
+
+ )}
+ {!showEsc && (
+
+
)}
diff --git a/packages/editor/src/components/ui/helpers/roof-helper.tsx b/packages/editor/src/components/ui/helpers/roof-helper.tsx
index a51cec72..6dea4a4f 100644
--- a/packages/editor/src/components/ui/helpers/roof-helper.tsx
+++ b/packages/editor/src/components/ui/helpers/roof-helper.tsx
@@ -1,8 +1,14 @@
+import { ShortcutToken } from '../primitives/shortcut-token'
+
export function RoofHelper() {
return (
- Esc
+
+
+
- Shift
+
+
+
- Esc
+
- Shift
+
+
+
- Esc
+
+ {onBack && (
+
+ )}
{icon && (
-
- handleUpdate({ length: v })}
- precision={2}
- step={0.5}
- unit="m"
- value={Math.round(node.length * 100) / 100}
- />
- handleUpdate({ height: v })}
- precision={2}
- step={0.1}
- unit="m"
- value={Math.round(node.height * 100) / 100}
- />
-
-
-
- state.showGrid)}
+ checked={showGrid}
onCheckedChange={(checked) => useViewer.getState().setShowGrid(checked)}
/>
diff --git a/packages/editor/src/components/ui/sidebar/panels/settings-panel/keyboard-shortcuts-dialog.tsx b/packages/editor/src/components/ui/sidebar/panels/settings-panel/keyboard-shortcuts-dialog.tsx
index 0663ebe5..04ea2bb6 100644
--- a/packages/editor/src/components/ui/sidebar/panels/settings-panel/keyboard-shortcuts-dialog.tsx
+++ b/packages/editor/src/components/ui/sidebar/panels/settings-panel/keyboard-shortcuts-dialog.tsx
@@ -9,6 +9,7 @@ import {
DialogTitle,
DialogTrigger,
} from './../../../../../components/ui/primitives/dialog'
+import { ShortcutToken } from './../../../../../components/ui/primitives/shortcut-token'
type Shortcut = {
keys: string[]
@@ -57,7 +58,7 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
{ keys: ['B'], action: 'Switch to Build mode' },
{
keys: ['Esc'],
- action: 'Cancel active tool, clear selection, and exit build mode',
+ action: 'Cancel the active tool and return to Select mode',
},
{ keys: ['Delete / Backspace'], action: 'Delete selected objects' },
{ keys: ['Cmd/Ctrl', 'Z'], action: 'Undo' },
@@ -68,7 +69,7 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
title: 'Selection',
shortcuts: [
{
- keys: ['Cmd/Ctrl', 'Click'],
+ keys: ['Cmd/Ctrl', 'Left click'],
action: 'Add or remove an object from multi-selection',
note: 'Works while in Select mode.',
},
@@ -100,9 +101,14 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
title: 'Camera',
shortcuts: [
{
- keys: ['Space', 'Drag'],
+ keys: ['Middle click'],
action: 'Pan camera',
- note: 'Hold Space while dragging with the mouse.',
+ note: 'Drag with the middle mouse button, or hold Space while dragging with the left mouse button.',
+ },
+ {
+ keys: ['Right click'],
+ action: 'Orbit camera',
+ note: 'Drag with the right mouse button.',
},
],
},
@@ -126,12 +132,7 @@ function ShortcutKeys({ keys }: { keys: string[] }) {
{keys.map((key, index) => (
- Widths
- Total: {totalWidth.toFixed(1)}m
+
+ handleUpdate({ leftWidth: v })}
- precision={2}
- step={0.1}
- unit="m"
- value={Math.round(node.leftWidth * 100) / 100}
+ handleUpdate({ rightWidth: v })}
- precision={2}
- step={0.1}
- unit="m"
- value={Math.round(node.rightWidth * 100) / 100}
- />
-
-
-
-
- Rrot
-
- }
- max={180}
- min={-180}
- onChange={(degrees) => {
- const radians = (degrees * Math.PI) / 180
- handleUpdate({ rotation: radians })
- }}
- precision={0}
- step={1}
- unit="°"
- value={Math.round((node.rotation * 180) / Math.PI)}
- />
-
-
- Xpos
-
- }
+ {
@@ -136,16 +167,12 @@ export function RoofPanel() {
handleUpdate({ position: pos })
}}
precision={2}
- step={0.1}
+ step={0.05}
unit="m"
value={Math.round(node.position[0] * 100) / 100}
/>
-
- Ypos
-
- }
+ {
@@ -154,16 +181,12 @@ export function RoofPanel() {
handleUpdate({ position: pos })
}}
precision={2}
- step={0.1}
+ step={0.05}
unit="m"
value={Math.round(node.position[1] * 100) / 100}
/>
-
- Zpos
-
- }
+ {
@@ -172,10 +195,55 @@ export function RoofPanel() {
handleUpdate({ position: pos })
}}
precision={2}
- step={0.1}
+ step={0.05}
unit="m"
value={Math.round(node.position[2] * 100) / 100}
/>
+ {
+ handleUpdate({ rotation: (degrees * Math.PI) / 180 })
+ }}
+ precision={0}
+ step={1}
+ unit="°"
+ value={Math.round((node.rotation * 180) / Math.PI)}
+ />
+
+
+
+
+
)
diff --git a/packages/editor/src/components/ui/panels/roof-segment-panel.tsx b/packages/editor/src/components/ui/panels/roof-segment-panel.tsx
new file mode 100644
index 00000000..086464ea
--- /dev/null
+++ b/packages/editor/src/components/ui/panels/roof-segment-panel.tsx
@@ -0,0 +1,314 @@
+'use client'
+
+import {
+ type AnyNode,
+ type AnyNodeId,
+ type RoofSegmentNode,
+ RoofSegmentNode as RoofSegmentNodeSchema,
+ type RoofType,
+ useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Copy, Move, Trash2 } from 'lucide-react'
+import { useCallback } from 'react'
+import { sfxEmitter } from '../../../lib/sfx-bus'
+import useEditor from '../../../store/use-editor'
+import { ActionButton, ActionGroup } from '../controls/action-button'
+import { MetricControl } from '../controls/metric-control'
+import { PanelSection } from '../controls/panel-section'
+import { SegmentedControl } from '../controls/segmented-control'
+import { SliderControl } from '../controls/slider-control'
+import { PanelWrapper } from './panel-wrapper'
+
+const ROOF_TYPE_OPTIONS: { label: string; value: RoofType }[] = [
+ { label: 'Hip', value: 'hip' },
+ { label: 'Gable', value: 'gable' },
+ { label: 'Shed', value: 'shed' },
+ { label: 'Flat', value: 'flat' },
+]
+
+const ROOF_TYPE_OPTIONS_2: { label: string; value: RoofType }[] = [
+ { label: 'Gambrel', value: 'gambrel' },
+ { label: 'Dutch', value: 'dutch' },
+ { label: 'Mansard', value: 'mansard' },
+]
+
+export function RoofSegmentPanel() {
+ const selectedIds = useViewer((s) => s.selection.selectedIds)
+ const setSelection = useViewer((s) => s.setSelection)
+ const nodes = useScene((s) => s.nodes)
+ const updateNode = useScene((s) => s.updateNode)
+ const setMovingNode = useEditor((s) => s.setMovingNode)
+
+ const selectedId = selectedIds[0]
+ const node = selectedId
+ ? (nodes[selectedId as AnyNode['id']] as RoofSegmentNode | undefined)
+ : undefined
+
+ const handleUpdate = useCallback(
+ (updates: Partial) => {
+ if (!selectedId) return
+ updateNode(selectedId as AnyNode['id'], updates)
+ },
+ [selectedId, updateNode],
+ )
+
+ const handleClose = useCallback(() => {
+ setSelection({ selectedIds: [] })
+ }, [setSelection])
+
+ const handleBack = useCallback(() => {
+ if (node?.parentId) {
+ setSelection({ selectedIds: [node.parentId] })
+ }
+ }, [node?.parentId, setSelection])
+
+ const handleDuplicate = useCallback(() => {
+ if (!node?.parentId) return
+ sfxEmitter.emit('sfx:item-pick')
+
+ let duplicateInfo = structuredClone(node) as any
+ delete duplicateInfo.id
+ duplicateInfo.metadata = { ...duplicateInfo.metadata, isNew: true }
+ // Offset slightly so it's visible
+ duplicateInfo.position = [
+ duplicateInfo.position[0] + 1,
+ duplicateInfo.position[1],
+ duplicateInfo.position[2] + 1,
+ ]
+
+ try {
+ const duplicate = RoofSegmentNodeSchema.parse(duplicateInfo)
+ useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
+ setSelection({ selectedIds: [] })
+ setMovingNode(duplicate)
+ } catch (e) {
+ console.error('Failed to duplicate roof segment', e)
+ }
+ }, [node, setSelection, setMovingNode])
+
+ const handleMove = useCallback(() => {
+ if (node) {
+ sfxEmitter.emit('sfx:item-pick')
+ setMovingNode(node)
+ setSelection({ selectedIds: [] })
+ }
+ }, [node, setMovingNode, setSelection])
+
+ const handleDelete = useCallback(() => {
+ if (!(selectedId && node)) return
+ sfxEmitter.emit('sfx:item-delete')
+ const parentId = node.parentId
+ useScene.getState().deleteNode(selectedId as AnyNodeId)
+ if (parentId) {
+ useScene.getState().dirtyNodes.add(parentId as AnyNodeId)
+ setSelection({ selectedIds: [parentId] })
+ } else {
+ setSelection({ selectedIds: [] })
+ }
+ }, [selectedId, node, setSelection])
+
+ if (!node || node.type !== 'roof-segment' || selectedIds.length !== 1) return null
+
+ return (
+
+
+ handleUpdate({ roofType: v })}
+ options={ROOF_TYPE_OPTIONS}
+ value={node.roofType}
+ />
+ handleUpdate({ roofType: v })}
+ options={ROOF_TYPE_OPTIONS_2}
+ value={node.roofType}
+ />
+
+
+
+ handleUpdate({ width: v })}
+ precision={2}
+ step={0.5}
+ unit="m"
+ value={Math.round(node.width * 100) / 100}
+ />
+ handleUpdate({ depth: v })}
+ precision={2}
+ step={0.5}
+ unit="m"
+ value={Math.round(node.depth * 100) / 100}
+ />
+
+
+
+ handleUpdate({ wallHeight: v })}
+ precision={2}
+ step={0.1}
+ unit="m"
+ value={Math.round(node.wallHeight * 100) / 100}
+ />
+ handleUpdate({ roofHeight: v })}
+ precision={2}
+ step={0.1}
+ unit="m"
+ value={Math.round(node.roofHeight * 100) / 100}
+ />
+
+
+
+ handleUpdate({ wallThickness: v })}
+ precision={2}
+ step={0.05}
+ unit="m"
+ value={Math.round(node.wallThickness * 100) / 100}
+ />
+ handleUpdate({ deckThickness: v })}
+ precision={2}
+ step={0.01}
+ unit="m"
+ value={Math.round(node.deckThickness * 100) / 100}
+ />
+ handleUpdate({ overhang: v })}
+ precision={2}
+ step={0.05}
+ unit="m"
+ value={Math.round(node.overhang * 100) / 100}
+ />
+ handleUpdate({ shingleThickness: v })}
+ precision={2}
+ step={0.01}
+ unit="m"
+ value={Math.round(node.shingleThickness * 100) / 100}
+ />
+
+
+
+ {
+ const pos = [...node.position] as [number, number, number]
+ pos[0] = v
+ handleUpdate({ position: pos })
+ }}
+ precision={2}
+ step={0.05}
+ unit="m"
+ value={Math.round(node.position[0] * 100) / 100}
+ />
+ {
+ const pos = [...node.position] as [number, number, number]
+ pos[1] = v
+ handleUpdate({ position: pos })
+ }}
+ precision={2}
+ step={0.05}
+ unit="m"
+ value={Math.round(node.position[1] * 100) / 100}
+ />
+ {
+ const pos = [...node.position] as [number, number, number]
+ pos[2] = v
+ handleUpdate({ position: pos })
+ }}
+ precision={2}
+ step={0.05}
+ unit="m"
+ value={Math.round(node.position[2] * 100) / 100}
+ />
+ {
+ handleUpdate({ rotation: (degrees * Math.PI) / 180 })
+ }}
+ precision={0}
+ step={1}
+ unit="°"
+ value={Math.round((node.rotation * 180) / Math.PI)}
+ />
+
+
+
+
+
+
+
+ )
+}
diff --git a/packages/editor/src/components/ui/panels/slab-panel.tsx b/packages/editor/src/components/ui/panels/slab-panel.tsx
index 5e3a989a..c0f83c93 100644
--- a/packages/editor/src/components/ui/panels/slab-panel.tsx
+++ b/packages/editor/src/components/ui/panels/slab-panel.tsx
@@ -100,8 +100,12 @@ export function SlabPanel() {
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]
+ const pi = polygon[i]
+ const pj = polygon[j]
+ if (pi && pj) {
+ area += pi[0] * pj[1]
+ area -= pj[0] * pi[1]
+ }
}
return Math.abs(area) / 2
}
diff --git a/packages/editor/src/components/ui/panels/window-panel.tsx b/packages/editor/src/components/ui/panels/window-panel.tsx
index 5df96024..54974bcb 100644
--- a/packages/editor/src/components/ui/panels/window-panel.tsx
+++ b/packages/editor/src/components/ui/panels/window-panel.tsx
@@ -67,7 +67,7 @@ export function WindowPanel() {
}, [selectedId, node, deleteNode, setSelection])
const handleDuplicate = useCallback(() => {
- if (!(node && node.parentId)) return
+ if (!node?.parentId) return
sfxEmitter.emit('sfx:item-pick')
useScene.temporal.getState().pause()
const duplicate = WindowNode.parse({
diff --git a/packages/editor/src/components/ui/primitives/number-input.tsx b/packages/editor/src/components/ui/primitives/number-input.tsx
index 633638a1..560e8457 100644
--- a/packages/editor/src/components/ui/primitives/number-input.tsx
+++ b/packages/editor/src/components/ui/primitives/number-input.tsx
@@ -95,7 +95,7 @@ export function NumberInput({
document.addEventListener('mousemove', handleMouseMove)
document.addEventListener('mouseup', handleMouseUp)
},
- [isEditing, value, onChange, clamp, precision],
+ [isEditing, value, onChange, clamp, precision, step],
)
const handleValueClick = useCallback(() => {
diff --git a/packages/editor/src/components/ui/primitives/shortcut-token.tsx b/packages/editor/src/components/ui/primitives/shortcut-token.tsx
new file mode 100644
index 00000000..9878daab
--- /dev/null
+++ b/packages/editor/src/components/ui/primitives/shortcut-token.tsx
@@ -0,0 +1,64 @@
+import { Icon } from '@iconify/react'
+import type * as React from 'react'
+
+import { cn } from '../../../lib/utils'
+
+const MOUSE_SHORTCUTS = {
+ Click: {
+ icon: 'ph:mouse-left-click-fill',
+ label: 'Left click',
+ },
+ 'Left click': {
+ icon: 'ph:mouse-left-click-fill',
+ label: 'Left click',
+ },
+ 'Middle click': {
+ icon: 'qlementine-icons:mouse-middle-button-16',
+ label: 'Middle click',
+ },
+ 'Right click': {
+ icon: 'ph:mouse-right-click-fill',
+ label: 'Right click',
+ },
+} as const
+
+type ShortcutTokenProps = React.ComponentProps<'kbd'> & {
+ value: string
+ displayValue?: string
+}
+
+function ShortcutToken({ className, displayValue, value, ...props }: ShortcutTokenProps) {
+ const mouseShortcut =
+ value in MOUSE_SHORTCUTS ? MOUSE_SHORTCUTS[value as keyof typeof MOUSE_SHORTCUTS] : null
+
+ return (
+
+ {mouseShortcut ? (
+ <>
+
+ {mouseShortcut.label}
+
+ ) : (
+ (displayValue ?? value)
+ )}
+
+ )
+}
+
+export { ShortcutToken }
diff --git a/packages/editor/src/components/ui/primitives/sidebar.tsx b/packages/editor/src/components/ui/primitives/sidebar.tsx
index 800368d1..ec79918c 100644
--- a/packages/editor/src/components/ui/primitives/sidebar.tsx
+++ b/packages/editor/src/components/ui/primitives/sidebar.tsx
@@ -208,7 +208,7 @@ function SidebarResizer({ side }: { side: 'left' | 'right' }) {
window.removeEventListener('pointermove', handlePointerMove)
window.removeEventListener('pointerup', handlePointerUp)
}
- }, [setWidth, side])
+ }, [setWidth, side, setIsDragging])
return (
+
+
+
+
+ Toggle units (metric/imperial)
+
+ )}
+
{/* Theme Toggle */}
{mounted && (
diff --git a/packages/editor/src/components/ui/sidebar/panels/settings-panel/index.tsx b/packages/editor/src/components/ui/sidebar/panels/settings-panel/index.tsx
index 3305ebc9..60151896 100644
--- a/packages/editor/src/components/ui/sidebar/panels/settings-panel/index.tsx
+++ b/packages/editor/src/components/ui/sidebar/panels/settings-panel/index.tsx
@@ -182,6 +182,7 @@ export function SettingsPanel({
const clearScene = useScene((state) => state.clearScene)
const resetSelection = useViewer((state) => state.resetSelection)
const exportScene = useViewer((state) => state.exportScene)
+ const showGrid = useViewer((state) => state.showGrid)
const setPhase = useEditor((state) => state.setPhase)
const [isGeneratingThumbnail, setIsGeneratingThumbnail] = useState(false)
const sceneGraphValue = useMemo(
@@ -307,7 +308,7 @@ export function SettingsPanel({
+ {segments.map((seg, i) => (
+
+ ))}
-
- handleUpdate({ rotation: node.rotation - Math.PI / 2 })}
- />
- handleUpdate({ rotation: node.rotation + Math.PI / 2 })}
- />
-
+ {
+ sfxEmitter.emit('sfx:item-rotate')
+ handleUpdate({ rotation: node.rotation - Math.PI / 4 })
+ }}
+ />
+ {
+ sfxEmitter.emit('sfx:item-rotate')
+ handleUpdate({ rotation: node.rotation + Math.PI / 4 })
+ }}
+ />
+
+
+ {
+ sfxEmitter.emit('sfx:item-rotate')
+ handleUpdate({ rotation: node.rotation - Math.PI / 4 })
+ }}
+ />
+ {
+ sfxEmitter.emit('sfx:item-rotate')
+ handleUpdate({ rotation: node.rotation + Math.PI / 4 })
+ }}
+ />
+
+ Visible only in the editor
{index > 0 ? + : null}
-
- {getDisplayKey(key, isMac)}
-
+
))}
+
-
setSelectedReferenceId(refNode.id)}
- onDoubleClick={() => setIsEditing(true)}
- >
+
{refNode.type === 'scan' ? (
![Scan]()
void
- deleteNode: (id: AnyNodeId) => void
updateNode: (id: AnyNodeId, updates: Partial) => void
isLast?: boolean
projectId?: string
@@ -568,6 +573,7 @@ function LevelItem({
const [isEditing, setIsEditing] = useState(false)
const itemRef = useRef(null)
const isSelected = selectedLevelId === level.id
+ const canDeleteLevel = level.level !== 0
const [isExpanded, setIsExpanded] = useState(isSelected)
useEffect(() => {
@@ -580,15 +586,25 @@ function LevelItem({
}
}, [isSelected])
+ const handleSelect = () => {
+ setSelection({ levelId: level.id })
+ }
+
+ const handleDoubleClick = () => {
+ focusTreeNode(level.id)
+ }
+
return (
{/* Vertical tree line */}
@@ -631,11 +647,7 @@ function LevelItem({
- setSelection({ levelId: level.id })}
- onDoubleClick={() => setIsEditing(true)}
- >
+
![Level]()
- {level.level !== 0 && (
-
- )}
+
@@ -780,7 +792,6 @@ function LevelsSection({
const nodes = useScene((state) => state.nodes)
const createNode = useScene((state) => state.createNode)
const updateNode = useScene((state) => state.updateNode)
- const deleteNode = useScene((state) => state.deleteNode)
const selectedBuildingId = useViewer((state) => state.selection.buildingId)
const selectedLevelId = useViewer((state) => state.selection.levelId)
const setSelection = useViewer((state) => state.setSelection)
@@ -832,7 +843,6 @@ function LevelsSection({
)}
{[...levels].reverse().map((level, index) => (
{
- setIsEditing(true)
+ focusTreeNode(zone.id)
}
const handleDelete = (e: React.MouseEvent) => {
@@ -1229,16 +1239,18 @@ function ContentSection() {
}
return (
-
+
)
}
@@ -1271,6 +1283,17 @@ function BuildingItem({
}
}, [isBuildingActive])
+ const handleSelect = () => {
+ setSelection({ buildingId: building.id })
+ if (phase === 'site') {
+ setPhase('structure')
+ }
+ }
+
+ const handleDoubleClick = () => {
+ focusTreeNode(building.id)
+ }
+
return (
-
-
- {elementChildren.map((childId, index) => (
-
+
+ {elementChildren.map((childId, index) => (
+
+
+
(null)
+ const inputSize = Math.max((value || defaultName).length, 1)
useEffect(() => {
if (isEditing) {
@@ -79,7 +80,7 @@ export function InlineRenameInput({
return (
diff --git a/packages/editor/src/components/ui/sidebar/panels/site-panel/item-tree-node.tsx b/packages/editor/src/components/ui/sidebar/panels/site-panel/item-tree-node.tsx
index 834bdb4c..0906722f 100644
--- a/packages/editor/src/components/ui/sidebar/panels/site-panel/item-tree-node.tsx
+++ b/packages/editor/src/components/ui/sidebar/panels/site-panel/item-tree-node.tsx
@@ -4,7 +4,7 @@ import Image from 'next/image'
import { useEffect, useState } from 'react'
import useEditor from './../../../../../store/use-editor'
import { InlineRenameInput } from './inline-rename-input'
-import { handleTreeSelection, TreeNode, TreeNodeWrapper } from './tree-node'
+import { focusTreeNode, handleTreeSelection, TreeNode, TreeNodeWrapper } from './tree-node'
import { TreeNodeActions } from './tree-node-actions'
const CATEGORY_ICONS: Record = {
@@ -39,7 +39,7 @@ export function ItemTreeNode({ node, depth, isLast }: ItemTreeNodeProps) {
let isDescendant = false
for (const id of selectedIds) {
let current = nodes[id as AnyNodeId]
- while (current && current.parentId) {
+ while (current?.parentId) {
if (current.parentId === node.id) {
isDescendant = true
break
@@ -62,7 +62,7 @@ export function ItemTreeNode({ node, depth, isLast }: ItemTreeNodeProps) {
}
const handleDoubleClick = () => {
- setIsEditing(true)
+ focusTreeNode(node.id)
}
const handleMouseEnter = () => {
diff --git a/packages/editor/src/components/ui/sidebar/panels/site-panel/level-tree-node.tsx b/packages/editor/src/components/ui/sidebar/panels/site-panel/level-tree-node.tsx
index 59897a0d..b25380fc 100644
--- a/packages/editor/src/components/ui/sidebar/panels/site-panel/level-tree-node.tsx
+++ b/packages/editor/src/components/ui/sidebar/panels/site-panel/level-tree-node.tsx
@@ -3,7 +3,7 @@ import { useViewer } from '@pascal-app/viewer'
import { Layers } from 'lucide-react'
import { useState } from 'react'
import { InlineRenameInput } from './inline-rename-input'
-import { TreeNode, TreeNodeWrapper } from './tree-node'
+import { focusTreeNode, TreeNode, TreeNodeWrapper } from './tree-node'
import { TreeNodeActions } from './tree-node-actions'
interface LevelTreeNodeProps {
@@ -24,7 +24,7 @@ export function LevelTreeNode({ node, depth, isLast }: LevelTreeNodeProps) {
}
const handleDoubleClick = () => {
- setIsEditing(true)
+ focusTreeNode(node.id)
}
const defaultName = `Level ${node.level}`
diff --git a/packages/editor/src/components/ui/sidebar/panels/site-panel/roof-tree-node.tsx b/packages/editor/src/components/ui/sidebar/panels/site-panel/roof-tree-node.tsx
index 369cae36..9c202f6a 100644
--- a/packages/editor/src/components/ui/sidebar/panels/site-panel/roof-tree-node.tsx
+++ b/packages/editor/src/components/ui/sidebar/panels/site-panel/roof-tree-node.tsx
@@ -1,11 +1,13 @@
-import type { RoofNode } from '@pascal-app/core'
+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 { useState } from 'react'
-import useEditor from './../../../../../store/use-editor'
+import { useCallback, useEffect, useState } from 'react'
+import useEditor from '../../../../../store/use-editor'
import { InlineRenameInput } from './inline-rename-input'
-import { handleTreeSelection, TreeNodeWrapper } from './tree-node'
+import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
import { TreeNodeActions } from './tree-node-actions'
+import { DropIndicatorLine, useTreeNodeDrag } from './tree-node-drag'
interface RoofTreeNodeProps {
node: RoofNode
@@ -15,11 +17,14 @@ interface RoofTreeNodeProps {
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()
@@ -30,7 +35,7 @@ export function RoofTreeNode({ node, depth, isLast }: RoofTreeNodeProps) {
}
const handleDoubleClick = () => {
- setIsEditing(true)
+ focusTreeNode(node.id)
}
const handleMouseEnter = () => {
@@ -41,39 +46,169 @@ export function RoofTreeNode({ node, depth, isLast }: RoofTreeNodeProps) {
setHoveredId(null)
}
- // Calculate dimensions: length × total width (leftWidth + rightWidth)
- const totalWidth = node.leftWidth + node.rightWidth
- const sizeLabel = `${node.length.toFixed(1)}×${totalWidth.toFixed(1)}m`
- const defaultName = `Roof (${sizeLabel})`
+ 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 (
- setIsEditing(true)}
- onStopEditing={() => setIsEditing(false)}
- />
- }
- nodeId={node.id}
- onClick={handleClick}
- onDoubleClick={handleDoubleClick}
- onMouseEnter={handleMouseEnter}
- onMouseLeave={handleMouseLeave}
- onToggle={() => {}}
- />
+ = {
+ 'roof-segment': ['roof'],
+}
+
+// Container types that should be auto-removed when all children are moved out.
+const REMOVE_WHEN_EMPTY = new Set(['roof'])
+
+export function canDrag(node: AnyNode): boolean {
+ return node.type in REPARENT_TARGETS
+}
+
+export function canDrop(draggedType: string, targetType: string): boolean {
+ return REPARENT_TARGETS[draggedType]?.includes(targetType) ?? false
+}
+
+// ---------------------------------------------------------------------------
+// Coordinate preservation
+// ---------------------------------------------------------------------------
+
+type Transform = {
+ position: [number, number, number]
+ rotation: number
+}
+
+function getTransform(node: AnyNode): Transform {
+ const pos =
+ 'position' in node && Array.isArray(node.position)
+ ? (node.position as [number, number, number])
+ : ([0, 0, 0] as [number, number, number])
+ const rot = 'rotation' in node && typeof node.rotation === 'number' ? node.rotation : 0
+ return { position: pos, rotation: rot }
+}
+
+/**
+ * Compute new local position + rotation so the child stays at the same
+ * absolute grid position when moved from oldParent to newParent.
+ */
+function computeReparentTransform(
+ child: Transform,
+ oldParent: Transform,
+ newParent: Transform,
+): Transform {
+ // child → world: world = parentPos + rotateY(childPos, parentRot)
+ const cosOld = Math.cos(oldParent.rotation)
+ const sinOld = Math.sin(oldParent.rotation)
+ const absX = oldParent.position[0] + child.position[0] * cosOld + child.position[2] * sinOld
+ const absY = oldParent.position[1] + child.position[1]
+ const absZ = oldParent.position[2] - child.position[0] * sinOld + child.position[2] * cosOld
+
+ // world → newParent local: rotateY_inverse(world - newParentPos, newParentRot)
+ const dx = absX - newParent.position[0]
+ const dy = absY - newParent.position[1]
+ const dz = absZ - newParent.position[2]
+ const cosNew = Math.cos(-newParent.rotation)
+ const sinNew = Math.sin(-newParent.rotation)
+
+ return {
+ position: [dx * cosNew + dz * sinNew, dy, -dx * sinNew + dz * cosNew],
+ rotation: oldParent.rotation + child.rotation - newParent.rotation,
+ }
+}
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+type DragState = {
+ nodeId: string
+ nodeType: string
+ sourceParentId: string
+ label: string
+ pointerX: number
+ pointerY: number
+} | null
+
+type DropTarget = {
+ parentId: string
+ insertIndex: number
+} | null
+
+type TreeNodeDragContextValue = {
+ drag: DragState
+ dropTarget: DropTarget
+ startDrag: (
+ nodeId: string,
+ nodeType: string,
+ sourceParentId: string,
+ label: string,
+ x: number,
+ y: number,
+ ) => void
+ isDragging: boolean
+}
+
+const TreeNodeDragContext = createContext({
+ drag: null,
+ dropTarget: null,
+ startDrag: () => {},
+ isDragging: false,
+})
+
+export const useTreeNodeDrag = () => useContext(TreeNodeDragContext)
+
+// ---------------------------------------------------------------------------
+// Provider
+// ---------------------------------------------------------------------------
+
+const DRAG_THRESHOLD = 4
+
+export function TreeNodeDragProvider({ children }: { children: ReactNode }) {
+ const [drag, setDrag] = useState(null)
+ const [dropTarget, setDropTarget] = useState(null)
+ const pendingRef = useRef<{
+ nodeId: string
+ nodeType: string
+ sourceParentId: string
+ label: string
+ startX: number
+ startY: number
+ } | null>(null)
+
+ const commitDrop = useCallback(() => {
+ if (!(drag && dropTarget)) return
+
+ const state = useScene.getState()
+
+ if (dropTarget.parentId === drag.sourceParentId) {
+ // --- Reorder within same parent ---
+ const parent = state.nodes[dropTarget.parentId as AnyNodeId]
+ if (parent && 'children' in parent && Array.isArray(parent.children)) {
+ const currentChildren = [...parent.children] as string[]
+ const fromIndex = currentChildren.indexOf(drag.nodeId)
+ if (fromIndex === -1) return
+ currentChildren.splice(fromIndex, 1)
+ const toIndex = Math.min(dropTarget.insertIndex, currentChildren.length)
+ currentChildren.splice(toIndex, 0, drag.nodeId)
+ state.updateNode(dropTarget.parentId as AnyNodeId, { children: currentChildren } as any)
+ }
+ } else {
+ // --- Reparent to different parent, preserving world position ---
+ const node = state.nodes[drag.nodeId as AnyNodeId]
+ const oldParent = state.nodes[drag.sourceParentId as AnyNodeId]
+ const newParent = state.nodes[dropTarget.parentId as AnyNodeId]
+ if (!(node && oldParent && newParent)) return
+
+ const newLocal = computeReparentTransform(
+ getTransform(node),
+ getTransform(oldParent),
+ getTransform(newParent),
+ )
+
+ state.updateNode(
+ drag.nodeId as AnyNodeId,
+ {
+ parentId: dropTarget.parentId,
+ position: newLocal.position,
+ rotation: newLocal.rotation,
+ } as any,
+ )
+
+ // Place at the correct index within the new parent's children
+ const updatedParent = state.nodes[dropTarget.parentId as AnyNodeId]
+ if (updatedParent && 'children' in updatedParent && Array.isArray(updatedParent.children)) {
+ const children = [...updatedParent.children] as string[]
+ const idx = children.indexOf(drag.nodeId)
+ if (idx !== -1) {
+ children.splice(idx, 1)
+ const toIndex = Math.min(dropTarget.insertIndex, children.length)
+ children.splice(toIndex, 0, drag.nodeId)
+ state.updateNode(dropTarget.parentId as AnyNodeId, { children } as any)
+ }
+ }
+
+ // Lifecycle: remove old parent if it's now empty and in REMOVE_WHEN_EMPTY
+ const staleParent = state.nodes[drag.sourceParentId as AnyNodeId]
+ if (
+ staleParent &&
+ REMOVE_WHEN_EMPTY.has(staleParent.type) &&
+ 'children' in staleParent &&
+ Array.isArray(staleParent.children) &&
+ staleParent.children.length === 0
+ ) {
+ state.deleteNode(drag.sourceParentId as AnyNodeId)
+ }
+ }
+ }, [drag, dropTarget])
+
+ const startDrag = useCallback(
+ (
+ nodeId: string,
+ nodeType: string,
+ sourceParentId: string,
+ label: string,
+ x: number,
+ y: number,
+ ) => {
+ pendingRef.current = { nodeId, nodeType, sourceParentId, label, startX: x, startY: y }
+ },
+ [],
+ )
+
+ useEffect(() => {
+ const handlePointerMove = (e: PointerEvent) => {
+ if (pendingRef.current && !drag) {
+ const dx = e.clientX - pendingRef.current.startX
+ const dy = e.clientY - pendingRef.current.startY
+ if (Math.abs(dx) + Math.abs(dy) >= DRAG_THRESHOLD) {
+ const p = pendingRef.current
+ setDrag({
+ nodeId: p.nodeId,
+ nodeType: p.nodeType,
+ sourceParentId: p.sourceParentId,
+ label: p.label,
+ pointerX: e.clientX,
+ pointerY: e.clientY,
+ })
+ }
+ return
+ }
+
+ if (!drag) return
+
+ setDrag((prev) => (prev ? { ...prev, pointerX: e.clientX, pointerY: e.clientY } : null))
+
+ // Hit-test for drop targets
+ const els = document.elementsFromPoint(e.clientX, e.clientY)
+ let foundTarget: DropTarget = null
+
+ for (const el of els) {
+ const targetEl = (el as HTMLElement).closest?.('[data-drop-target]') as HTMLElement | null
+ if (!targetEl) continue
+
+ const parentId = targetEl.dataset.dropTarget!
+
+ // Validate this is a legal drop
+ const targetNode = useScene.getState().nodes[parentId as AnyNodeId]
+ if (!(targetNode && canDrop(drag.nodeType, targetNode.type))) continue
+
+ // Find child rows to determine insert index
+ const childRows = targetEl.querySelectorAll('[data-drop-child]')
+ let insertIndex = childRows.length
+
+ for (let i = 0; i < childRows.length; i++) {
+ const row = childRows[i]!
+ const rect = row.getBoundingClientRect()
+ const midY = rect.top + rect.height / 2
+ if (e.clientY < midY) {
+ insertIndex = i
+ break
+ }
+ }
+
+ foundTarget = { parentId, insertIndex }
+ break
+ }
+
+ setDropTarget(foundTarget)
+ }
+
+ const handlePointerUp = () => {
+ if (drag) {
+ commitDrop()
+ }
+ pendingRef.current = null
+ setDrag(null)
+ setDropTarget(null)
+ }
+
+ window.addEventListener('pointermove', handlePointerMove)
+ window.addEventListener('pointerup', handlePointerUp)
+ return () => {
+ window.removeEventListener('pointermove', handlePointerMove)
+ window.removeEventListener('pointerup', handlePointerUp)
+ }
+ }, [drag, commitDrop])
+
+ const isDragging = drag !== null
+
+ return (
+
+ {isDragging && }
+ {children}
+ {drag &&
+ )
+}
+
+// ---------------------------------------------------------------------------
+// Floating preview (portal)
+// ---------------------------------------------------------------------------
+
+function FloatingPreview({ drag }: { drag: NonNullable }) {
+ return createPortal(
+ (
@@ -132,12 +139,15 @@ export const TreeNodeWrapper = forwardRef(
onDoubleClick,
onMouseEnter,
onMouseLeave,
+ onPointerDown,
actions,
children,
isSelected,
isHovered,
isVisible = true,
isLast,
+ isDraggable,
+ isDropTarget,
},
ref,
) {
@@ -156,13 +166,19 @@ export const TreeNodeWrapper = forwardRef(
'group/row relative flex h-8 cursor-pointer select-none items-center border-border/50 border-r border-r-transparent border-b text-sm transition-all duration-200',
isSelected
? 'border-r-3 border-r-white bg-accent/50 text-foreground'
- : isHovered
- ? 'bg-accent/30 text-foreground'
- : 'text-muted-foreground hover:bg-accent/30 hover:text-foreground',
+ : isDropTarget
+ ? 'bg-blue-500/15 text-foreground ring-1 ring-blue-500/40 ring-inset'
+ : isHovered
+ ? 'bg-accent/30 text-foreground'
+ : 'text-muted-foreground hover:bg-accent/30 hover:text-foreground',
!isVisible && 'opacity-50',
+ isDraggable && 'cursor-grab active:cursor-grabbing',
)}
+ onClick={onClick}
+ onDoubleClick={onDoubleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
+ onPointerDown={onPointerDown}
ref={rowRef}
style={{ paddingLeft: depth * 12 + 12, paddingRight: 12 }}
>
@@ -195,18 +211,16 @@ export const TreeNodeWrapper = forwardRef(
}}
>
{hasChildren ? (
- expanded ? (
-
) : null}
-
+ 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 (
+
+ {isDropTarget && visibleSegments.length === 0 &&
+
+
+ )
+}
+
+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 (
+
+
+ {showIndicatorBefore &&
+
+ {showIndicatorAfter &&
+
+ )
+ })}
+
+ setIsEditing(true)}
+ onStopEditing={() => setIsEditing(false)}
+ />
+ }
+ nodeId={node.id}
+ onClick={handleClick}
+ onDoubleClick={() => focusTreeNode(node.id)}
+ onMouseEnter={() => setHoveredId(node.id)}
+ onMouseLeave={() => setHoveredId(null)}
+ onPointerDown={handlePointerDown}
+ onToggle={() => {}}
+ />
+
)
}
diff --git a/packages/editor/src/components/ui/sidebar/panels/site-panel/slab-tree-node.tsx b/packages/editor/src/components/ui/sidebar/panels/site-panel/slab-tree-node.tsx
index fb03c42e..9811cd76 100644
--- a/packages/editor/src/components/ui/sidebar/panels/site-panel/slab-tree-node.tsx
+++ b/packages/editor/src/components/ui/sidebar/panels/site-panel/slab-tree-node.tsx
@@ -4,7 +4,7 @@ import Image from 'next/image'
import { useState } from 'react'
import useEditor from './../../../../../store/use-editor'
import { InlineRenameInput } from './inline-rename-input'
-import { handleTreeSelection, TreeNodeWrapper } from './tree-node'
+import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
import { TreeNodeActions } from './tree-node-actions'
interface SlabTreeNodeProps {
@@ -30,7 +30,7 @@ export function SlabTreeNode({ node, depth, isLast }: SlabTreeNodeProps) {
}
const handleDoubleClick = () => {
- setIsEditing(true)
+ focusTreeNode(node.id)
}
const handleMouseEnter = () => {
@@ -88,8 +88,12 @@ 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) {
+ area += pi[0] * pj[1]
+ area -= pj[0] * pi[1]
+ }
}
return Math.abs(area) / 2
diff --git a/packages/editor/src/components/ui/sidebar/panels/site-panel/tree-node-actions.tsx b/packages/editor/src/components/ui/sidebar/panels/site-panel/tree-node-actions.tsx
index 436f4bdd..0e380ec2 100644
--- a/packages/editor/src/components/ui/sidebar/panels/site-panel/tree-node-actions.tsx
+++ b/packages/editor/src/components/ui/sidebar/panels/site-panel/tree-node-actions.tsx
@@ -23,7 +23,7 @@ export function TreeNodeActions({ node }: TreeNodeActionsProps) {
const toggleVisibility = (e: React.MouseEvent) => {
e.stopPropagation()
const newVisibility = !isVisible
- if (selectedIds && selectedIds.includes(node.id)) {
+ if (selectedIds?.includes(node.id)) {
updateNodes(
selectedIds.map((id) => ({
id: id as AnyNodeId,
diff --git a/packages/editor/src/components/ui/sidebar/panels/site-panel/tree-node-drag.tsx b/packages/editor/src/components/ui/sidebar/panels/site-panel/tree-node-drag.tsx
new file mode 100644
index 00000000..cbd5426a
--- /dev/null
+++ b/packages/editor/src/components/ui/sidebar/panels/site-panel/tree-node-drag.tsx
@@ -0,0 +1,342 @@
+'use client'
+
+import { type AnyNode, type AnyNodeId, useScene } from '@pascal-app/core'
+import { motion } from 'motion/react'
+import {
+ createContext,
+ type ReactNode,
+ useCallback,
+ useContext,
+ useEffect,
+ useRef,
+ useState,
+} from 'react'
+import { createPortal } from 'react-dom'
+
+// ---------------------------------------------------------------------------
+// Reparenting rules
+// ---------------------------------------------------------------------------
+
+// Maps a draggable node type to the parent types it can be dropped into.
+const REPARENT_TARGETS: Record
+ ↕
+ {drag.label}
+
,
+ document.body,
+ )
+}
+
+// ---------------------------------------------------------------------------
+// Drop indicator line
+// ---------------------------------------------------------------------------
+
+export function DropIndicatorLine() {
+ return (
+
+
{
- setIsEditing(true)
+ focusTreeNode(node.id)
}
const handleMouseEnter = () => {
diff --git a/packages/editor/src/components/ui/sidebar/panels/site-panel/window-tree-node.tsx b/packages/editor/src/components/ui/sidebar/panels/site-panel/window-tree-node.tsx
index 2a9de4ac..6d8850f6 100644
--- a/packages/editor/src/components/ui/sidebar/panels/site-panel/window-tree-node.tsx
+++ b/packages/editor/src/components/ui/sidebar/panels/site-panel/window-tree-node.tsx
@@ -6,7 +6,7 @@ import Image from 'next/image'
import { useState } from 'react'
import useEditor from './../../../../../store/use-editor'
import { InlineRenameInput } from './inline-rename-input'
-import { handleTreeSelection, TreeNodeWrapper } from './tree-node'
+import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
import { TreeNodeActions } from './tree-node-actions'
interface WindowTreeNodeProps {
@@ -55,7 +55,7 @@ export function WindowTreeNode({ node, depth, isLast }: WindowTreeNodeProps) {
useEditor.getState().setPhase('structure')
}
}}
- onDoubleClick={() => setIsEditing(true)}
+ onDoubleClick={() => focusTreeNode(node.id)}
onMouseEnter={() => setHoveredId(node.id)}
onMouseLeave={() => setHoveredId(null)}
onToggle={() => {}}
diff --git a/packages/editor/src/components/ui/sidebar/panels/site-panel/zone-tree-node.tsx b/packages/editor/src/components/ui/sidebar/panels/site-panel/zone-tree-node.tsx
index 69453d3d..a28b4713 100644
--- a/packages/editor/src/components/ui/sidebar/panels/site-panel/zone-tree-node.tsx
+++ b/packages/editor/src/components/ui/sidebar/panels/site-panel/zone-tree-node.tsx
@@ -3,7 +3,7 @@ import { useViewer } from '@pascal-app/viewer'
import { useState } from 'react'
import { ColorDot } from './../../../../../components/ui/primitives/color-dot'
import { InlineRenameInput } from './inline-rename-input'
-import { TreeNodeWrapper } from './tree-node'
+import { focusTreeNode, TreeNodeWrapper } from './tree-node'
import { TreeNodeActions } from './tree-node-actions'
interface ZoneTreeNodeProps {
@@ -25,7 +25,7 @@ export function ZoneTreeNode({ node, depth, isLast }: ZoneTreeNodeProps) {
}
const handleDoubleClick = () => {
- setIsEditing(true)
+ focusTreeNode(node.id)
}
const handleMouseEnter = () => {
@@ -79,8 +79,12 @@ 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) {
+ area += pi[0] * pj[1]
+ area -= pj[0] * pi[1]
+ }
}
return Math.abs(area) / 2
diff --git a/packages/editor/src/components/viewer-overlay.tsx b/packages/editor/src/components/viewer-overlay.tsx
index 8aa83264..06f19a13 100644
--- a/packages/editor/src/components/viewer-overlay.tsx
+++ b/packages/editor/src/components/viewer-overlay.tsx
@@ -1,5 +1,6 @@
'use client'
+import { Icon } from '@iconify/react'
import {
type AnyNode,
type AnyNodeId,
@@ -10,7 +11,7 @@ import {
type ZoneNode,
} from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
-import { ArrowLeft, Camera, ChevronRight, Diamond, Layers, Layers2, Moon, Sun } from 'lucide-react'
+import { ArrowLeft, Camera, ChevronRight, Diamond, Layers, Moon, Sun } from 'lucide-react'
import { motion } from 'motion/react'
import Link from 'next/link'
import { cn } from '../lib/utils'
@@ -30,6 +31,13 @@ const levelModeLabels: Record<'stacked' | 'exploded' | 'solo', string> = {
solo: 'Solo',
}
+const levelModeBadgeLabels: Record<'manual' | 'stacked' | 'exploded' | 'solo', string> = {
+ manual: 'Stack',
+ stacked: 'Stack',
+ exploded: 'Exploded',
+ solo: 'Solo',
+}
+
const wallModeConfig = {
up: {
icon: (props: any) => (
@@ -58,6 +66,7 @@ const getNodeName = (node: AnyNode): string => {
if (node.type === 'slab') return 'Slab'
if (node.type === 'ceiling') return 'Ceiling'
if (node.type === 'roof') return 'Roof'
+ if (node.type === 'roof-segment') return 'Roof Segment'
return node.type
}
@@ -378,11 +387,12 @@ export const ViewerOverlay = ({
{/* Level Mode */}
{
if (levelMode === 'manual') return useViewer.getState().setLevelMode('stacked')
@@ -394,11 +404,21 @@ export const ViewerOverlay = ({
tooltipSide="top"
variant="ghost"
>
- {levelMode === 'solo' &&
{/* Wall Mode */}
diff --git a/packages/editor/src/hooks/use-keyboard.ts b/packages/editor/src/hooks/use-keyboard.ts
index b558331c..c2abffff 100644
--- a/packages/editor/src/hooks/use-keyboard.ts
+++ b/packages/editor/src/hooks/use-keyboard.ts
@@ -16,7 +16,11 @@ export const useKeyboard = () => {
e.preventDefault()
emitter.emit('tool:cancel')
- // Clear selections to close UI panels, but KEEP the active building and level context
+ // Return to the default select tool while keeping the active building/level context.
+ useEditor.getState().setEditingHole(null)
+ useEditor.getState().setMode('select')
+
+ // Clear selections to close UI panels, but KEEP the active building and level context.
useViewer.getState().setSelection({ selectedIds: [], zoneId: null })
useEditor.getState().setSelectedReferenceId(null)
} else if (e.key === '1' && !e.metaKey && !e.ctrlKey) {
@@ -87,6 +91,29 @@ export const useKeyboard = () => {
}
}
}
+ } else if (e.key === 'r' || e.key === 'R') {
+ // Rotate selected node if it supports rotation (items, roofs, etc.)
+ const selectedNodeIds = useViewer.getState().selection.selectedIds as AnyNodeId[]
+ if (selectedNodeIds.length === 1) {
+ const node = useScene.getState().nodes[selectedNodeIds[0]!]
+ if (node && 'rotation' in node) {
+ e.preventDefault()
+ const ROTATION_STEP = Math.PI / 4
+ let newRotationY = 0
+
+ // Handle different rotation types (number for roof, array for items/windows/doors)
+ if (typeof node.rotation === 'number') {
+ newRotationY = node.rotation + ROTATION_STEP
+ useScene.getState().updateNode(node.id, { rotation: newRotationY })
+ } else if (Array.isArray(node.rotation)) {
+ newRotationY = node.rotation[1] + ROTATION_STEP
+ useScene.getState().updateNode(node.id, {
+ rotation: [node.rotation[0], newRotationY, node.rotation[2]],
+ })
+ }
+ sfxEmitter.emit('sfx:item-rotate') // Play a sound for feedback
+ }
+ }
} else if (e.key === 'Delete' || e.key === 'Backspace') {
e.preventDefault()
diff --git a/packages/editor/src/index.tsx b/packages/editor/src/index.tsx
index b96aa41a..be246abd 100644
--- a/packages/editor/src/index.tsx
+++ b/packages/editor/src/index.tsx
@@ -1,6 +1,8 @@
export type { EditorProps } from './components/editor'
export { default as Editor } from './components/editor'
export { useCommandPalette } from './components/ui/command-palette'
+export { CATALOG_ITEMS } from './components/ui/item-catalog/catalog-items'
+export { Slider } from './components/ui/primitives/slider'
export { SceneLoader } from './components/ui/scene-loader'
export type {
ProjectVisibility,
@@ -12,5 +14,12 @@ export { PresetsProvider } from './contexts/presets-context'
export type { SaveStatus } from './hooks/use-auto-save'
export type { SceneGraph } from './lib/scene'
export { applySceneGraphToEditor } from './lib/scene'
+export { default as useAudio } from './store/use-audio'
+export { type CommandAction, useCommandRegistry } from './store/use-command-registry'
export { default as useEditor } from './store/use-editor'
+export {
+ type PaletteView,
+ type PaletteViewProps,
+ usePaletteViewRegistry,
+} from './store/use-palette-view-registry'
export { useUploadStore } from './store/use-upload'
diff --git a/packages/editor/src/lib/level-selection.ts b/packages/editor/src/lib/level-selection.ts
new file mode 100644
index 00000000..aed583a8
--- /dev/null
+++ b/packages/editor/src/lib/level-selection.ts
@@ -0,0 +1,31 @@
+import type { AnyNodeId, BuildingNode, LevelNode } from '@pascal-app/core'
+import { useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+
+function getAdjacentLevelIdForDeletion(levelId: AnyNodeId): LevelNode['id'] | null {
+ const { nodes } = useScene.getState()
+ const level = nodes[levelId]
+ if (!level || level.type !== 'level' || !level.parentId) return null
+
+ const building = nodes[level.parentId as AnyNodeId]
+ if (!building || building.type !== 'building') return null
+
+ const siblingLevelIds = (building as BuildingNode).children.filter(
+ (childId): childId is LevelNode['id'] => nodes[childId as AnyNodeId]?.type === 'level',
+ )
+ const currentIndex = siblingLevelIds.indexOf(level.id)
+ if (currentIndex === -1) return null
+
+ return siblingLevelIds[currentIndex - 1] ?? siblingLevelIds[currentIndex + 1] ?? null
+}
+
+export function deleteLevelWithFallbackSelection(levelId: AnyNodeId) {
+ const isSelectedLevel = useViewer.getState().selection.levelId === levelId
+ const nextLevelId = getAdjacentLevelIdForDeletion(levelId)
+
+ useScene.getState().deleteNode(levelId)
+
+ if (isSelectedLevel) {
+ useViewer.getState().setSelection({ levelId: nextLevelId })
+ }
+}
diff --git a/packages/editor/src/lib/scene.ts b/packages/editor/src/lib/scene.ts
index 072ed661..09fa0e4e 100644
--- a/packages/editor/src/lib/scene.ts
+++ b/packages/editor/src/lib/scene.ts
@@ -1,14 +1,261 @@
'use client'
-import { useScene } from '@pascal-app/core'
+import { resolveLevelId, sceneRegistry, useScene } from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
-import useEditor from '../store/use-editor'
+import useEditor, {
+ hasCustomPersistedEditorUiState,
+ normalizePersistedEditorUiState,
+ type PersistedEditorUiState,
+} from '../store/use-editor'
export type SceneGraph = {
nodes: Record
rootNodeIds: string[]
}
+type PersistedSelectionPath = {
+ buildingId: string | null
+ levelId: string | null
+ zoneId: string | null
+ selectedIds: string[]
+}
+
+/**
+ * IDs are stored as plain strings in localStorage. Cast them back to their
+ * branded template-literal types before passing to the viewer store.
+ */
+function toViewerSelection(s: PersistedSelectionPath) {
+ return s as unknown as Parameters['setSelection']>[0]
+}
+
+const EMPTY_PERSISTED_SELECTION: PersistedSelectionPath = {
+ buildingId: null,
+ levelId: null,
+ zoneId: null,
+ selectedIds: [],
+}
+
+const SELECTION_STORAGE_KEY = 'pascal-editor-selection'
+
+function getSelectionStorageKey(): string {
+ const projectId = useViewer.getState().projectId
+ return projectId ? `${SELECTION_STORAGE_KEY}:${projectId}` : SELECTION_STORAGE_KEY
+}
+
+function getSelectionStorageReadKeys(): string[] {
+ const scopedKey = getSelectionStorageKey()
+ return scopedKey === SELECTION_STORAGE_KEY ? [scopedKey] : [scopedKey, SELECTION_STORAGE_KEY]
+}
+
+function getDefaultLevelIdForBuilding(
+ sceneNodes: Record,
+ buildingId: string | null,
+): string | null {
+ if (!buildingId) {
+ return null
+ }
+
+ const buildingNode = sceneNodes[buildingId]
+ if (buildingNode?.type !== 'building' || !Array.isArray(buildingNode.children)) {
+ return null
+ }
+
+ let firstLevelId: string | null = null
+
+ for (const childId of buildingNode.children) {
+ const levelNode = sceneNodes[childId]
+ if (levelNode?.type !== 'level') {
+ continue
+ }
+
+ firstLevelId ??= levelNode.id
+
+ if (levelNode.level === 0) {
+ return levelNode.id
+ }
+ }
+
+ return firstLevelId
+}
+
+function normalizePersistedSelectionPath(
+ selection: Partial | null | undefined,
+): PersistedSelectionPath {
+ return {
+ buildingId: typeof selection?.buildingId === 'string' ? selection.buildingId : null,
+ levelId: typeof selection?.levelId === 'string' ? selection.levelId : null,
+ zoneId: typeof selection?.zoneId === 'string' ? selection.zoneId : null,
+ selectedIds: Array.isArray(selection?.selectedIds)
+ ? selection.selectedIds.filter((id): id is string => typeof id === 'string')
+ : [],
+ }
+}
+
+function hasPersistedSelectionValue(selection: PersistedSelectionPath): boolean {
+ return Boolean(
+ selection.buildingId ||
+ selection.levelId ||
+ selection.zoneId ||
+ selection.selectedIds.length > 0,
+ )
+}
+
+function readPersistedSelection(): PersistedSelectionPath | null {
+ if (typeof window === 'undefined') {
+ return null
+ }
+
+ try {
+ for (const key of getSelectionStorageReadKeys()) {
+ const rawSelection = window.localStorage.getItem(key)
+ if (!rawSelection) {
+ continue
+ }
+
+ return normalizePersistedSelectionPath(
+ JSON.parse(rawSelection) as Partial,
+ )
+ }
+ } catch {
+ return null
+ }
+
+ return null
+}
+
+export function writePersistedSelection(selection: {
+ buildingId: string | null
+ levelId: string | null
+ zoneId: string | null
+ selectedIds: string[]
+}) {
+ if (typeof window === 'undefined') {
+ return
+ }
+
+ try {
+ const sceneNodes = useScene.getState().nodes as Record
+ const normalizedSelection = normalizePersistedSelectionPath(selection)
+ const validatedSelection =
+ getValidatedSelectionForScene(sceneNodes, normalizedSelection) ?? normalizedSelection
+
+ window.localStorage.setItem(getSelectionStorageKey(), JSON.stringify(validatedSelection))
+ } catch {
+ // Swallow storage quota errors
+ }
+}
+
+function getEditorUiStateForRestoredSelection(
+ sceneNodes: Record,
+ selection: PersistedSelectionPath,
+ fallbackUiState: PersistedEditorUiState,
+): PersistedEditorUiState {
+ if (!selection.levelId) {
+ return {
+ ...fallbackUiState,
+ phase: 'site',
+ mode: fallbackUiState.phase === 'site' ? fallbackUiState.mode : 'select',
+ tool: null,
+ structureLayer: 'elements',
+ catalogCategory: null,
+ }
+ }
+
+ if (selection.zoneId) {
+ return {
+ ...fallbackUiState,
+ phase: 'structure',
+ mode: 'select',
+ tool: null,
+ structureLayer: 'zones',
+ catalogCategory: null,
+ }
+ }
+
+ const selectedNodes = selection.selectedIds
+ .map((id) => sceneNodes[id])
+ .filter((node): node is Record => Boolean(node))
+
+ const shouldRestoreFurnishPhase =
+ selectedNodes.length > 0 &&
+ selectedNodes.every(
+ (node) =>
+ node.type === 'item' &&
+ node.asset?.category !== 'door' &&
+ node.asset?.category !== 'window',
+ )
+
+ return {
+ ...fallbackUiState,
+ phase: shouldRestoreFurnishPhase ? 'furnish' : 'structure',
+ mode: 'select',
+ tool: null,
+ structureLayer: 'elements',
+ catalogCategory: null,
+ }
+}
+
+function getValidatedSelectionForScene(
+ sceneNodes: Record,
+ selection: PersistedSelectionPath,
+): PersistedSelectionPath | null {
+ const levelNode = selection.levelId ? sceneNodes[selection.levelId] : null
+ const hasValidLevel = levelNode?.type === 'level'
+ const buildingNodeFromLevel =
+ hasValidLevel && levelNode.parentId ? sceneNodes[levelNode.parentId] : null
+ const explicitBuildingNode = selection.buildingId ? sceneNodes[selection.buildingId] : null
+ const buildingId =
+ buildingNodeFromLevel?.type === 'building'
+ ? buildingNodeFromLevel.id
+ : explicitBuildingNode?.type === 'building'
+ ? explicitBuildingNode.id
+ : null
+
+ if (!buildingId) {
+ return null
+ }
+
+ const levelId = hasValidLevel
+ ? levelNode.id
+ : getDefaultLevelIdForBuilding(sceneNodes, buildingId)
+
+ if (levelId) {
+ const zoneNode = selection.zoneId ? sceneNodes[selection.zoneId] : null
+ const zoneId =
+ zoneNode?.type === 'zone' && resolveLevelId(zoneNode, sceneNodes) === levelId
+ ? zoneNode.id
+ : null
+
+ const selectedIds = selection.selectedIds.filter((id) => {
+ const node = sceneNodes[id]
+ return Boolean(node) && resolveLevelId(node, sceneNodes) === levelId
+ })
+
+ return {
+ buildingId,
+ levelId,
+ zoneId,
+ selectedIds,
+ }
+ }
+
+ return {
+ ...EMPTY_PERSISTED_SELECTION,
+ buildingId,
+ }
+}
+
+function getRestoredSelectionForScene(
+ sceneNodes: Record,
+): PersistedSelectionPath | null {
+ const persistedSelection = readPersistedSelection()
+ if (!(persistedSelection && hasPersistedSelectionValue(persistedSelection))) {
+ return null
+ }
+
+ return getValidatedSelectionForScene(sceneNodes, persistedSelection)
+}
+
export function syncEditorSelectionFromCurrentScene() {
const sceneNodes = useScene.getState().nodes as Record
const sceneRootIds = useScene.getState().rootNodeIds
@@ -16,8 +263,45 @@ export function syncEditorSelectionFromCurrentScene() {
const resolve = (child: any) => (typeof child === 'string' ? sceneNodes[child] : child)
const firstBuilding = siteNode?.children?.map(resolve).find((n: any) => n?.type === 'building')
const firstLevel = firstBuilding?.children?.map(resolve).find((n: any) => n?.type === 'level')
+ const restoredEditorUiState = normalizePersistedEditorUiState(useEditor.getState())
+ const shouldRestoreEditorUiState = hasCustomPersistedEditorUiState(restoredEditorUiState)
+ const restoredSelection = getRestoredSelectionForScene(sceneNodes)
+ const selectionDrivenEditorUiState = restoredSelection
+ ? getEditorUiStateForRestoredSelection(sceneNodes, restoredSelection, restoredEditorUiState)
+ : null
if (firstBuilding && firstLevel) {
+ if (shouldRestoreEditorUiState) {
+ if (restoredSelection) {
+ useViewer.getState().setSelection(toViewerSelection(restoredSelection))
+ useEditor.setState(
+ restoredEditorUiState.phase === 'site'
+ ? (selectionDrivenEditorUiState ?? restoredEditorUiState)
+ : restoredEditorUiState,
+ )
+ } else if (restoredEditorUiState.phase === 'site') {
+ useViewer.getState().resetSelection()
+ useEditor.setState(restoredEditorUiState)
+ } else {
+ useViewer.getState().setSelection({
+ buildingId: firstBuilding.id,
+ levelId: firstLevel.id,
+ selectedIds: [],
+ zoneId: null,
+ })
+ useEditor.setState(restoredEditorUiState)
+ }
+ return
+ }
+
+ if (restoredSelection) {
+ useViewer.getState().setSelection(toViewerSelection(restoredSelection))
+ if (selectionDrivenEditorUiState) {
+ useEditor.setState(selectionDrivenEditorUiState)
+ }
+ return
+ }
+
useViewer.getState().setSelection({
buildingId: firstBuilding.id,
levelId: firstLevel.id,
@@ -42,8 +326,40 @@ export function syncEditorSelectionFromCurrentScene() {
}
}
+function resetEditorInteractionState() {
+ useViewer.getState().setHoveredId(null)
+ useViewer.getState().resetSelection()
+ // Clear outliner arrays synchronously so stale Object3D refs from the old
+ // scene don't leak into the post-processing pipeline's outline passes.
+ const outliner = useViewer.getState().outliner
+ outliner.selectedObjects.length = 0
+ outliner.hoveredObjects.length = 0
+ sceneRegistry.clear()
+ useEditor.setState({
+ phase: 'site',
+ mode: 'select',
+ tool: null,
+ structureLayer: 'elements',
+ catalogCategory: null,
+ selectedItem: null,
+ movingNode: null,
+ selectedReferenceId: null,
+ spaces: {},
+ editingHole: null,
+ isPreviewMode: false,
+ })
+}
+
+function hasUsableSceneGraph(sceneGraph?: SceneGraph | null): sceneGraph is SceneGraph {
+ return (
+ !!sceneGraph &&
+ Object.keys(sceneGraph.nodes ?? {}).length > 0 &&
+ (sceneGraph.rootNodeIds?.length ?? 0) > 0
+ )
+}
+
export function applySceneGraphToEditor(sceneGraph?: SceneGraph | null) {
- if (sceneGraph?.nodes && sceneGraph.rootNodeIds) {
+ if (hasUsableSceneGraph(sceneGraph)) {
const { nodes, rootNodeIds } = sceneGraph
useScene.getState().setScene(nodes as any, rootNodeIds as any)
} else {
diff --git a/packages/editor/src/store/use-command-registry.ts b/packages/editor/src/store/use-command-registry.ts
new file mode 100644
index 00000000..d3393b20
--- /dev/null
+++ b/packages/editor/src/store/use-command-registry.ts
@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react'
+import { create } from 'zustand'
+
+export type CommandAction = {
+ id: string
+ /** Static string or a function evaluated at render time (for reactive labels). */
+ label: string | (() => string)
+ group: string
+ icon?: ReactNode
+ keywords?: string[]
+ shortcut?: string[]
+ /** Static string or a function evaluated at render time (for reactive badges). */
+ badge?: string | (() => string)
+ /** Show a chevron to indicate this action navigates to a sub-page. */
+ navigate?: boolean
+ /** Called at render time — returning false disables the item. */
+ when?: () => boolean
+ execute: () => void
+}
+
+interface CommandRegistryStore {
+ actions: CommandAction[]
+ /** Register actions and return an unsubscribe function. */
+ register: (actions: CommandAction[]) => () => void
+}
+
+export const useCommandRegistry = create((set) => ({
+ actions: [],
+ register: (newActions) => {
+ const ids = newActions.map((a) => a.id)
+ set((s) => ({
+ actions: [...s.actions.filter((a) => !ids.includes(a.id)), ...newActions],
+ }))
+ return () => set((s) => ({ actions: s.actions.filter((a) => !ids.includes(a.id)) }))
+ },
+}))
diff --git a/packages/editor/src/store/use-editor.tsx b/packages/editor/src/store/use-editor.tsx
index 2542d632..90662549 100644
--- a/packages/editor/src/store/use-editor.tsx
+++ b/packages/editor/src/store/use-editor.tsx
@@ -6,12 +6,15 @@ import {
type DoorNode,
type ItemNode,
type LevelNode,
+ type RoofNode,
+ type RoofSegmentNode,
type Space,
useScene,
type WindowNode,
} from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
export type Phase = 'site' | 'structure' | 'furnish'
@@ -66,8 +69,10 @@ type EditorState = {
setCatalogCategory: (category: CatalogCategory | null) => void
selectedItem: AssetInput | null
setSelectedItem: (item: AssetInput) => void
- movingNode: ItemNode | WindowNode | DoorNode | null
- setMovingNode: (node: ItemNode | WindowNode | DoorNode | null) => void
+ movingNode: ItemNode | WindowNode | DoorNode | RoofNode | RoofSegmentNode | null
+ setMovingNode: (
+ node: ItemNode | WindowNode | DoorNode | RoofNode | RoofSegmentNode | null,
+ ) => void
selectedReferenceId: string | null
setSelectedReferenceId: (id: string | null) => void
// Space detection for cutaway mode
@@ -79,159 +84,286 @@ type EditorState = {
// Preview mode (viewer-like experience inside the editor)
isPreviewMode: boolean
setPreviewMode: (preview: boolean) => void
+ // Toggleable 2D floorplan overlay
+ isFloorplanOpen: boolean
+ setFloorplanOpen: (open: boolean) => void
+ toggleFloorplanOpen: () => void
+ isFloorplanHovered: boolean
+ setFloorplanHovered: (hovered: boolean) => void
+ // Development-only camera debug flag for inspecting underside geometry
+ allowUndergroundCamera: boolean
+ setAllowUndergroundCamera: (enabled: boolean) => void
}
-const useEditor = create()((set, get) => ({
+export type PersistedEditorUiState = Pick<
+ EditorState,
+ 'phase' | 'mode' | 'tool' | 'structureLayer' | 'catalogCategory' | 'isFloorplanOpen'
+>
+
+export const DEFAULT_PERSISTED_EDITOR_UI_STATE: PersistedEditorUiState = {
phase: 'site',
- setPhase: (phase) => {
- const currentPhase = get().phase
- if (currentPhase === phase) return
+ mode: 'select',
+ tool: null,
+ structureLayer: 'elements',
+ catalogCategory: null,
+ isFloorplanOpen: false,
+}
- set({ phase })
+function normalizeModeForPhase(phase: Phase, mode: Mode | undefined): Mode {
+ if (phase === 'site') {
+ return mode === 'edit' ? 'edit' : 'select'
+ }
- const { mode, structureLayer } = get()
+ return mode === 'build' || mode === 'delete' ? mode : 'select'
+}
- if (mode === 'build') {
- // Stay in build mode, select the first tool for the new phase
- if (phase === 'site') {
- set({ tool: 'property-line', catalogCategory: null })
- } else if (phase === 'structure' && structureLayer === 'zones') {
- set({ tool: 'zone', catalogCategory: null })
- } else if (phase === 'structure') {
- set({ tool: 'wall', catalogCategory: null })
- } else if (phase === 'furnish') {
- set({ tool: 'item', catalogCategory: 'furniture' })
- }
- } else {
- // Reset to select mode and clear tool/catalog when switching phases
- set({ mode: 'select', tool: null, catalogCategory: null })
+export function normalizePersistedEditorUiState(
+ state: Partial | null | undefined,
+): PersistedEditorUiState {
+ const phase = state?.phase === 'structure' || state?.phase === 'furnish' ? state.phase : 'site'
+ const mode = normalizeModeForPhase(phase, state?.mode)
+ const isFloorplanOpen = Boolean(state?.isFloorplanOpen)
+
+ if (phase === 'site') {
+ return {
+ ...DEFAULT_PERSISTED_EDITOR_UI_STATE,
+ phase,
+ mode,
+ isFloorplanOpen,
}
+ }
- const viewer = useViewer.getState()
- const scene = useScene.getState()
+ if (phase === 'furnish') {
+ return {
+ phase,
+ mode,
+ tool: mode === 'build' ? 'item' : null,
+ structureLayer: 'elements',
+ catalogCategory: mode === 'build' ? (state?.catalogCategory ?? 'furniture') : null,
+ isFloorplanOpen,
+ }
+ }
- // Helper to find building and level 0
- const selectBuildingAndLevel0 = () => {
- let buildingId = viewer.selection.buildingId
+ const structureLayer = state?.structureLayer === 'zones' ? 'zones' : 'elements'
- // If no building selected, find the first one from site's children
- if (!buildingId) {
- const siteNode = scene.rootNodeIds[0] ? scene.nodes[scene.rootNodeIds[0]] : null
- if (siteNode?.type === 'site') {
- const firstBuilding = siteNode.children
- .map((child) => (typeof child === 'string' ? scene.nodes[child] : child))
- .find((node) => node?.type === 'building')
- if (firstBuilding) {
- buildingId = firstBuilding.id as BuildingNode['id']
- viewer.setSelection({ buildingId })
+ if (mode !== 'build') {
+ return {
+ phase,
+ mode,
+ tool: null,
+ structureLayer,
+ catalogCategory: null,
+ isFloorplanOpen,
+ }
+ }
+
+ if (structureLayer === 'zones') {
+ return {
+ phase,
+ mode,
+ tool: 'zone',
+ structureLayer,
+ catalogCategory: null,
+ isFloorplanOpen,
+ }
+ }
+
+ return {
+ phase,
+ mode,
+ tool:
+ state?.tool && state.tool !== 'property-line' && state.tool !== 'zone' ? state.tool : 'wall',
+ structureLayer,
+ catalogCategory: state?.tool === 'item' ? (state.catalogCategory ?? null) : null,
+ isFloorplanOpen,
+ }
+}
+
+export function hasCustomPersistedEditorUiState(
+ state: Partial | null | undefined,
+): boolean {
+ const normalizedState = normalizePersistedEditorUiState(state)
+
+ return (
+ normalizedState.phase !== DEFAULT_PERSISTED_EDITOR_UI_STATE.phase ||
+ normalizedState.mode !== DEFAULT_PERSISTED_EDITOR_UI_STATE.mode ||
+ normalizedState.tool !== DEFAULT_PERSISTED_EDITOR_UI_STATE.tool ||
+ normalizedState.structureLayer !== DEFAULT_PERSISTED_EDITOR_UI_STATE.structureLayer ||
+ normalizedState.catalogCategory !== DEFAULT_PERSISTED_EDITOR_UI_STATE.catalogCategory ||
+ normalizedState.isFloorplanOpen !== DEFAULT_PERSISTED_EDITOR_UI_STATE.isFloorplanOpen
+ )
+}
+
+const useEditor = create()(
+ persist(
+ (set, get) => ({
+ phase: DEFAULT_PERSISTED_EDITOR_UI_STATE.phase,
+ setPhase: (phase) => {
+ const currentPhase = get().phase
+ if (currentPhase === phase) return
+
+ set({ phase })
+
+ const { mode, structureLayer } = get()
+
+ if (mode === 'build') {
+ // Stay in build mode, select the first tool for the new phase
+ if (phase === 'site') {
+ set({ tool: 'property-line', catalogCategory: null })
+ } else if (phase === 'structure' && structureLayer === 'zones') {
+ set({ tool: 'zone', catalogCategory: null })
+ } else if (phase === 'structure') {
+ set({ tool: 'wall', catalogCategory: null })
+ } else if (phase === 'furnish') {
+ set({ tool: 'item', catalogCategory: 'furniture' })
+ }
+ } else {
+ // Reset to select mode and clear tool/catalog when switching phases
+ set({ mode: 'select', tool: null, catalogCategory: null })
+ }
+
+ const viewer = useViewer.getState()
+ const scene = useScene.getState()
+
+ // Helper to find building and level 0
+ const selectBuildingAndLevel0 = () => {
+ let buildingId = viewer.selection.buildingId
+
+ // If no building selected, find the first one from site's children
+ if (!buildingId) {
+ const siteNode = scene.rootNodeIds[0] ? scene.nodes[scene.rootNodeIds[0]] : null
+ if (siteNode?.type === 'site') {
+ const firstBuilding = siteNode.children
+ .map((child) => (typeof child === 'string' ? scene.nodes[child] : child))
+ .find((node) => node?.type === 'building')
+ if (firstBuilding) {
+ buildingId = firstBuilding.id as BuildingNode['id']
+ viewer.setSelection({ buildingId })
+ }
+ }
+ }
+
+ // If no level selected, find level 0 in the building
+ if (buildingId && !viewer.selection.levelId) {
+ const buildingNode = scene.nodes[buildingId] as BuildingNode
+ const level0Id = buildingNode.children.find((childId) => {
+ const levelNode = scene.nodes[childId] as LevelNode
+ return levelNode?.type === 'level' && levelNode.level === 0
+ })
+ if (level0Id) {
+ viewer.setSelection({ levelId: level0Id as LevelNode['id'] })
+ } else if (buildingNode.children[0]) {
+ // Fallback to first level if level 0 doesn't exist
+ viewer.setSelection({ levelId: buildingNode.children[0] as LevelNode['id'] })
+ }
}
}
- }
- // If no level selected, find level 0 in the building
- if (buildingId && !viewer.selection.levelId) {
- const buildingNode = scene.nodes[buildingId] as BuildingNode
- const level0Id = buildingNode.children.find((childId) => {
- const levelNode = scene.nodes[childId] as LevelNode
- return levelNode?.type === 'level' && levelNode.level === 0
+ switch (phase) {
+ case 'site':
+ // In Site mode, we zoom out and deselect specific levels/buildings
+ viewer.resetSelection()
+ break
+
+ case 'structure':
+ selectBuildingAndLevel0()
+ break
+
+ case 'furnish':
+ selectBuildingAndLevel0()
+ // Furnish mode only supports elements layer, not zones
+ set({ structureLayer: 'elements' })
+ break
+ }
+ },
+ mode: DEFAULT_PERSISTED_EDITOR_UI_STATE.mode,
+ setMode: (mode) => {
+ set({ mode })
+
+ const { phase, structureLayer, tool } = get()
+
+ if (mode === 'build') {
+ // Ensure a tool is selected in build mode
+ if (!tool) {
+ if (phase === 'structure' && structureLayer === 'zones') {
+ set({ tool: 'zone' })
+ } else if (phase === 'structure' && structureLayer === 'elements') {
+ set({ tool: 'wall' })
+ } else if (phase === 'furnish') {
+ set({ tool: 'item', catalogCategory: 'furniture' })
+ }
+ }
+ }
+ // When leaving build mode, clear tool
+ else if (tool) {
+ set({ tool: null })
+ }
+ },
+ tool: DEFAULT_PERSISTED_EDITOR_UI_STATE.tool,
+ setTool: (tool) => set({ tool }),
+ structureLayer: DEFAULT_PERSISTED_EDITOR_UI_STATE.structureLayer,
+ setStructureLayer: (layer) => {
+ const { mode } = get()
+
+ if (mode === 'build') {
+ const tool = layer === 'zones' ? 'zone' : 'wall'
+ set({ structureLayer: layer, tool })
+ } else {
+ set({ structureLayer: layer, mode: 'select', tool: null })
+ }
+
+ const viewer = useViewer.getState()
+ viewer.setSelection({
+ selectedIds: [],
+ zoneId: null,
})
- if (level0Id) {
- viewer.setSelection({ levelId: level0Id as LevelNode['id'] })
- } else if (buildingNode.children[0]) {
- // Fallback to first level if level 0 doesn't exist
- viewer.setSelection({ levelId: buildingNode.children[0] as LevelNode['id'] })
+ },
+ catalogCategory: DEFAULT_PERSISTED_EDITOR_UI_STATE.catalogCategory,
+ setCatalogCategory: (category) => set({ catalogCategory: category }),
+ selectedItem: null,
+ setSelectedItem: (item) => set({ selectedItem: item }),
+ movingNode: null as ItemNode | WindowNode | DoorNode | RoofNode | RoofSegmentNode | null,
+ setMovingNode: (node) => set({ movingNode: node }),
+ selectedReferenceId: null,
+ setSelectedReferenceId: (id) => set({ selectedReferenceId: id }),
+ spaces: {},
+ setSpaces: (spaces) => set({ spaces }),
+ editingHole: null,
+ setEditingHole: (hole) => set({ editingHole: hole }),
+ isPreviewMode: false,
+ setPreviewMode: (preview) => {
+ if (preview) {
+ set({ isPreviewMode: true, mode: 'select', tool: null, catalogCategory: null })
+ // Clear zone/item selection for clean viewer drill-down hierarchy
+ useViewer.getState().setSelection({ selectedIds: [], zoneId: null })
+ } else {
+ set({ isPreviewMode: false })
}
- }
- }
-
- switch (phase) {
- case 'site':
- // In Site mode, we zoom out and deselect specific levels/buildings
- viewer.resetSelection()
- break
-
- case 'structure':
- selectBuildingAndLevel0()
- break
-
- case 'furnish':
- selectBuildingAndLevel0()
- // Furnish mode only supports elements layer, not zones
- set({ structureLayer: 'elements' })
- break
- }
- },
- mode: 'select',
- setMode: (mode) => {
- set({ mode })
-
- const { phase, structureLayer, tool } = get()
-
- if (mode === 'build') {
- // Clear selection when entering build mode
- const viewer = useViewer.getState()
- viewer.setSelection({
- selectedIds: [],
- zoneId: null,
- })
-
- // Ensure a tool is selected in build mode
- if (!tool) {
- if (phase === 'structure' && structureLayer === 'zones') {
- set({ tool: 'zone' })
- } else if (phase === 'structure' && structureLayer === 'elements') {
- set({ tool: 'wall' })
- } else if (phase === 'furnish') {
- set({ tool: 'item', catalogCategory: 'furniture' })
- }
- }
- }
- // When leaving build mode, clear tool
- else if (tool) {
- set({ tool: null })
- }
- },
- tool: null,
- setTool: (tool) => set({ tool }),
- structureLayer: 'elements',
- setStructureLayer: (layer) => {
- const { mode } = get()
-
- if (mode === 'build') {
- const tool = layer === 'zones' ? 'zone' : 'wall'
- set({ structureLayer: layer, tool })
- } else {
- set({ structureLayer: layer, mode: 'select', tool: null })
- }
-
- const viewer = useViewer.getState()
- viewer.setSelection({
- selectedIds: [],
- zoneId: null,
- })
- },
- catalogCategory: null,
- setCatalogCategory: (category) => set({ catalogCategory: category }),
- selectedItem: null,
- setSelectedItem: (item) => set({ selectedItem: item }),
- movingNode: null as ItemNode | WindowNode | DoorNode | null,
- setMovingNode: (node) => set({ movingNode: node }),
- selectedReferenceId: null,
- setSelectedReferenceId: (id) => set({ selectedReferenceId: id }),
- spaces: {},
- setSpaces: (spaces) => set({ spaces }),
- editingHole: null,
- setEditingHole: (hole) => set({ editingHole: hole }),
- isPreviewMode: false,
- setPreviewMode: (preview) => {
- if (preview) {
- set({ isPreviewMode: true, mode: 'select', tool: null, catalogCategory: null })
- // Clear zone/item selection for clean viewer drill-down hierarchy
- useViewer.getState().setSelection({ selectedIds: [], zoneId: null })
- } else {
- set({ isPreviewMode: false })
- }
- },
-}))
+ },
+ isFloorplanOpen: DEFAULT_PERSISTED_EDITOR_UI_STATE.isFloorplanOpen,
+ setFloorplanOpen: (open) => set({ isFloorplanOpen: open }),
+ toggleFloorplanOpen: () => set((state) => ({ isFloorplanOpen: !state.isFloorplanOpen })),
+ isFloorplanHovered: false,
+ setFloorplanHovered: (hovered) => set({ isFloorplanHovered: hovered }),
+ allowUndergroundCamera: false,
+ setAllowUndergroundCamera: (enabled) => set({ allowUndergroundCamera: enabled }),
+ }),
+ {
+ name: 'pascal-editor-ui-preferences',
+ merge: (persistedState, currentState) => ({
+ ...currentState,
+ ...normalizePersistedEditorUiState(persistedState as Partial),
+ }),
+ partialize: (state) => ({
+ phase: state.phase,
+ mode: state.mode,
+ tool: state.tool,
+ structureLayer: state.structureLayer,
+ catalogCategory: state.catalogCategory,
+ isFloorplanOpen: state.isFloorplanOpen,
+ }),
+ },
+ ),
+)
export default useEditor
diff --git a/packages/editor/src/store/use-palette-view-registry.ts b/packages/editor/src/store/use-palette-view-registry.ts
new file mode 100644
index 00000000..33952230
--- /dev/null
+++ b/packages/editor/src/store/use-palette-view-registry.ts
@@ -0,0 +1,45 @@
+import type { ComponentType } from 'react'
+import { create } from 'zustand'
+
+export type PaletteViewProps = {
+ onClose: () => void
+ onBack: () => void
+}
+
+export type PaletteView = {
+ /** Unique key — matches a page name or a mode name. */
+ key: string
+ /**
+ * `'page'` — renders inside the cmdk Command shell (list area only).
+ * Filtering and keyboard navigation still work.
+ *
+ * `'mode'` — replaces the entire cmdk shell inside the Dialog.
+ * Used for full-screen states like ai-executing or ai-review.
+ */
+ type: 'page' | 'mode'
+ /** Human-readable label shown as the breadcrumb for page views. */
+ label?: string
+ Component: ComponentType
+}
+
+interface PaletteViewRegistryStore {
+ views: Map
+ register: (view: PaletteView) => () => void
+}
+
+export const usePaletteViewRegistry = create((set) => ({
+ views: new Map(),
+ register: (view) => {
+ set((s) => {
+ const next = new Map(s.views)
+ next.set(view.key, view)
+ return { views: next }
+ })
+ return () =>
+ set((s) => {
+ const next = new Map(s.views)
+ next.delete(view.key)
+ return { views: next }
+ })
+ },
+}))
diff --git a/packages/viewer/package.json b/packages/viewer/package.json
index 0bc1e2e4..8e0dc0ce 100644
--- a/packages/viewer/package.json
+++ b/packages/viewer/package.json
@@ -1,6 +1,6 @@
{
"name": "@pascal-app/viewer",
- "version": "0.2.0",
+ "version": "0.3.0",
"description": "3D viewer component for Pascal building editor",
"type": "module",
"main": "./dist/index.js",
diff --git a/packages/viewer/src/components/error-boundary.tsx b/packages/viewer/src/components/error-boundary.tsx
new file mode 100644
index 00000000..f61b10f6
--- /dev/null
+++ b/packages/viewer/src/components/error-boundary.tsx
@@ -0,0 +1,16 @@
+import type { ErrorInfo, ReactNode } from 'react'
+import { Component } from 'react'
+
+export class ErrorBoundary extends Component<
+ { children: ReactNode; fallback: ReactNode },
+ { hasError: boolean }
+> {
+ state = { hasError: false }
+ static getDerivedStateFromError() {
+ return { hasError: true }
+ }
+ componentDidCatch(_e: Error, _i: ErrorInfo) {}
+ render() {
+ return this.state.hasError ? this.props.fallback : this.props.children
+ }
+}
diff --git a/packages/viewer/src/components/renderers/item/item-renderer.tsx b/packages/viewer/src/components/renderers/item/item-renderer.tsx
index 0a4a061d..6b3ce98f 100644
--- a/packages/viewer/src/components/renderers/item/item-renderer.tsx
+++ b/packages/viewer/src/components/renderers/item/item-renderer.tsx
@@ -20,6 +20,7 @@ import { DoubleSide, MeshStandardNodeMaterial } from 'three/webgpu'
import { useNodeEvents } from '../../../hooks/use-node-events'
import { resolveCdnUrl } from '../../../lib/asset-url'
import { useItemLightPool } from '../../../store/use-item-light-pool'
+import { ErrorBoundary } from '../../error-boundary'
import { NodeRenderer } from '../node-renderer'
// Shared materials to avoid creating new instances for every mesh
@@ -47,6 +48,17 @@ const getMaterialForOriginal = (original: Material): MeshStandardNodeMaterial =>
return defaultMaterial
}
+const BrokenItemFallback = ({ node }: { node: ItemNode }) => {
+ const handlers = useNodeEvents(node, 'item')
+ const [w, h, d] = node.asset.dimensions
+ return (
+
+
+ )
+}
+
export const ItemRenderer = ({ node }: { node: ItemNode }) => {
const ref = useRef(null!)
@@ -54,9 +66,11 @@ export const ItemRenderer = ({ node }: { node: ItemNode }) => {
return (
- ()
+ let lowestLevelIndex = Number.POSITIVE_INFINITY
+
+ Object.values(nodes).forEach((node) => {
+ if (node.type !== 'level') {
+ return
+ }
+
+ levelIndexById.set(node.id, node.level)
+ lowestLevelIndex = Math.min(lowestLevelIndex, node.level)
+ })
+
+ // Only the lowest level should punch through the ground plane.
+ // Upper-level slabs should still cast shadows, but they should not
+ // reveal their footprint on the level-zero ground material.
const polygons: [number, number][][] = []
Object.values(nodes).forEach((node) => {
- if (node.type === 'slab' && node.polygon && node.polygon.length >= 3) {
- polygons.push(node.polygon as [number, number][])
+ if (!(node.type === 'slab' && node.visible && node.polygon.length >= 3)) {
+ return
}
+
+ if (Number.isFinite(lowestLevelIndex)) {
+ const parentLevelIndex = node.parentId
+ ? levelIndexById.get(node.parentId as LevelNode['id'])
+ : undefined
+
+ if (parentLevelIndex !== lowestLevelIndex) {
+ return
+ }
+ }
+
+ polygons.push(node.polygon as [number, number][])
})
if (polygons.length > 0) {
diff --git a/packages/viewer/src/lib/asset-url.ts b/packages/viewer/src/lib/asset-url.ts
index b5300644..6ec7d317 100644
--- a/packages/viewer/src/lib/asset-url.ts
+++ b/packages/viewer/src/lib/asset-url.ts
@@ -1,6 +1,5 @@
import { loadAssetUrl } from '@pascal-app/core'
-// @ts-expect-error
export const ASSETS_CDN_URL = process.env.NEXT_PUBLIC_ASSETS_CDN_URL || 'https://editor.pascal.app'
/**
diff --git a/packages/viewer/src/r3f.d.ts b/packages/viewer/src/r3f.d.ts
index c162d161..172e7de5 100644
--- a/packages/viewer/src/r3f.d.ts
+++ b/packages/viewer/src/r3f.d.ts
@@ -1,8 +1,96 @@
-// Augment @react-three/fiber's ThreeElements to include all Three.js JSX intrinsic elements.
-// This must be a project-wide declaration so all files can use {}
+export {}
+
+interface ThreeJSXElements {
+ // Containers
+ group: any
+ scene: any
+ // Geometries
+ boxGeometry: any
+ planeGeometry: any
+ circleGeometry: any
+ cylinderGeometry: any
+ sphereGeometry: any
+ extrudeGeometry: any
+ shapeGeometry: any
+ bufferGeometry: any
+ edgesGeometry: any
+ ringGeometry: any
+ // Meshes & lines
+ mesh: any
+ instancedMesh: any
+ line: any
+ lineSegments: any
+ lineLoop: any
+ points: any
+ // Materials
+ meshStandardMaterial: any
+ meshBasicMaterial: any
+ meshPhongMaterial: any
+ meshLambertMaterial: any
+ meshPhysicalMaterial: any
+ meshNormalMaterial: any
+ shadowMaterial: any
+ lineBasicMaterial: any
+ lineDashedMaterial: any
+ pointsMaterial: any
+ shaderMaterial: any
+ rawShaderMaterial: any
+ spriteMaterial: any
+ // Lights
+ ambientLight: any
+ directionalLight: any
+ pointLight: any
+ spotLight: any
+ hemisphereLight: any
+ rectAreaLight: any
+ // Cameras
+ perspectiveCamera: any
+ orthographicCamera: any
+ // Helpers
+ gridHelper: any
+ axesHelper: any
+ arrowHelper: any
+ // Misc
+ sprite: any
+ lOD: any
+ fog: any
+ color: any
+ // Buffer attribute
+ bufferAttribute: any
+ instancedBufferAttribute: any
+ // Primitive (R3F-specific)
+ primitive: any
+}
+
+declare module 'react' {
+ namespace JSX {
+ interface IntrinsicElements extends ThreeJSXElements {}
+ }
+}
+
+declare module 'react/jsx-runtime' {
+ namespace JSX {
+ interface IntrinsicElements extends ThreeJSXElements {}
+ }
+}
+
+declare module 'react/jsx-dev-runtime' {
+ namespace JSX {
+ interface IntrinsicElements extends ThreeJSXElements {}
+ }
}
diff --git a/packages/viewer/src/store/use-viewer.ts b/packages/viewer/src/store/use-viewer.ts
index a0f2b65d..bd8dbc63 100644
--- a/packages/viewer/src/store/use-viewer.ts
+++ b/packages/viewer/src/store/use-viewer.ts
@@ -29,6 +29,9 @@ type ViewerState = {
theme: 'light' | 'dark'
setTheme: (theme: 'light' | 'dark') => void
+ unit: 'metric' | 'imperial'
+ setUnit: (unit: 'metric' | 'imperial') => void
+
levelMode: 'stacked' | 'exploded' | 'solo' | 'manual'
setLevelMode: (mode: 'stacked' | 'exploded' | 'solo' | 'manual') => void
@@ -81,6 +84,9 @@ const useViewer = create()(
theme: 'light',
setTheme: (theme) => set({ theme }),
+ unit: 'metric',
+ setUnit: (unit) => set({ unit }),
+
levelMode: 'stacked',
setLevelMode: (mode) => set({ levelMode: mode }),
@@ -187,6 +193,7 @@ const useViewer = create()(
partialize: (state) => ({
cameraMode: state.cameraMode,
theme: state.theme,
+ unit: state.unit,
levelMode: state.levelMode,
wallMode: state.wallMode,
projectPreferences: state.projectPreferences,
diff --git a/packages/viewer/src/systems/item-light/item-light-system.tsx b/packages/viewer/src/systems/item-light/item-light-system.tsx
index 684ec64f..b0e2185a 100644
--- a/packages/viewer/src/systems/item-light/item-light-system.tsx
+++ b/packages/viewer/src/systems/item-light/item-light-system.tsx
@@ -286,7 +286,7 @@ export function ItemLightSystem() {
castShadow={false}
intensity={0}
key={i}
- ref={(el) => {
+ ref={(el: any) => {
lightRefs.current[i] = el
}}
/>