@pascal-app/editor 0.9.1 → 0.9.2

package/src/components/viewer-overlay.tsx

@@ -6,6 +6,7 @@ import {
   type AnyNodeId,
   type BuildingNode,
   emitter,
+  getLevelDisplayName,
   type LevelNode,
   useScene,
   type ZoneNode,
@@ -24,19 +25,24 @@ import {
   Check,
   ChevronRight,
   Diamond,
+  Footprints,
   Layers,
+  Palette,
   PenLine,
   Sparkles,
+  Square,
 } from 'lucide-react'
 import Link from 'next/link'
+import { flushSync } from 'react-dom'
 import { useShallow } from 'zustand/react/shallow'
-import { getLevelDisplayName } from '../lib/level-name'
 import { cn } from '../lib/utils'
+import useEditor from '../store/use-editor'
 import { ActionButton } from './ui/action-menu/action-button'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from './ui/primitives/dropdown-menu'
 import { TooltipProvider } from './ui/primitives/tooltip'
@@ -48,6 +54,24 @@ type ProjectOwner = {
   image: string | null
 }
 
+function requestWalkthroughPointerLock() {
+  const canvas = document.querySelector<HTMLCanvasElement>('[data-pascal-viewer-3d] canvas')
+  if (!canvas) return
+
+  if (!canvas.hasAttribute('tabindex')) {
+    canvas.tabIndex = -1
+  }
+  canvas.focus({ preventScroll: true })
+
+  if (document.pointerLockElement === canvas) return
+
+  try {
+    canvas.requestPointerLock?.()
+  } catch {
+    return
+  }
+}
+
 const levelModeLabels: Record<'stacked' | 'exploded' | 'solo', string> = {
   stacked: 'Stacked',
   exploded: 'Exploded',
@@ -64,22 +88,28 @@ const levelModeBadgeLabels: Record<'manual' | 'stacked' | 'exploded' | 'solo', s
 const wallModeConfig = {
   up: {
     icon: (props: any) => (
-      <img alt="Full Height" height={28} src="/icons/room.png" width={28} {...props} />
+      <img alt="Full Height" height={28} src="/icons/room.webp" width={28} {...props} />
     ),
     label: 'Full Height',
   },
   cutaway: {
     icon: (props: any) => (
-      <img alt="Cutaway" height={28} src="/icons/wallcut.png" width={28} {...props} />
+      <img alt="Cutaway" height={28} src="/icons/wallcut.webp" width={28} {...props} />
     ),
     label: 'Cutaway',
   },
   down: {
     icon: (props: any) => (
-      <img alt="Low" height={28} src="/icons/walllow.png" width={28} {...props} />
+      <img alt="Low" height={28} src="/icons/walllow.webp" width={28} {...props} />
     ),
     label: 'Low',
   },
+  translucent: {
+    icon: (props: any) => (
+      <img alt="Translucent" height={28} src="/icons/wall.png" width={28} {...props} />
+    ),
+    label: 'Translucent',
+  },
 }
 
 const SHADING_OPTIONS = [
@@ -87,8 +117,14 @@ const SHADING_OPTIONS = [
   { id: 'rendered', name: 'Rendered', detail: 'Full ambient occlusion', icon: Sparkles },
 ] as const
 
+const TEXTURE_OPTIONS = [
+  { id: true, name: 'Colored', detail: 'Show materials, textures & colors', icon: Palette },
+  { id: false, name: 'Monochrome', detail: 'Flat clay surfaces by role', icon: Square },
+] as const
+
 function RenderModeMenu() {
   const shading = useViewer((s) => s.shading)
+  const textures = useViewer((s) => s.textures)
   const active = SHADING_OPTIONS.find((o) => o.id === shading) ?? SHADING_OPTIONS[0]
   const ActiveIcon = active.icon
   return (
@@ -121,6 +157,23 @@ function RenderModeMenu() {
             </DropdownMenuItem>
           )
         })}
+        <DropdownMenuSeparator />
+        {TEXTURE_OPTIONS.map((option) => {
+          const OptionIcon = option.icon
+          return (
+            <DropdownMenuItem
+              key={option.name}
+              onSelect={() => useViewer.getState().setTextures(option.id)}
+            >
+              <OptionIcon />
+              <div className="flex flex-col">
+                <span className="text-foreground">{option.name}</span>
+                <span className="text-muted-foreground text-xs">{option.detail}</span>
+              </div>
+              {textures === option.id ? <Check className="ml-auto text-foreground" /> : null}
+            </DropdownMenuItem>
+          )
+        })}
       </DropdownMenuContent>
     </DropdownMenu>
   )
@@ -455,7 +508,7 @@ export const ViewerOverlay = ({
                 <img
                   alt="Scans"
                   className="h-[28px] w-[28px] object-contain"
-                  src="/icons/mesh.png"
+                  src="/icons/mesh.webp"
                 />
               </ActionButton>
             )}
@@ -476,7 +529,7 @@ export const ViewerOverlay = ({
                 <img
                   alt="Guides"
                   className="h-[28px] w-[28px] object-contain"
-                  src="/icons/floorplan.png"
+                  src="/icons/floorplan.webp"
                 />
               </ActionButton>
             )}
@@ -554,7 +607,12 @@ export const ViewerOverlay = ({
               }
               label={`Walls: ${wallModeConfig[wallMode as keyof typeof wallModeConfig].label}`}
               onClick={() => {
-                const modes: ('cutaway' | 'up' | 'down')[] = ['cutaway', 'up', 'down']
+                const modes: ('cutaway' | 'up' | 'down' | 'translucent')[] = [
+                  'cutaway',
+                  'up',
+                  'down',
+                  'translucent',
+                ]
                 const nextIndex = (modes.indexOf(wallMode as any) + 1) % modes.length
                 useViewer.getState().setWallMode(modes[nextIndex] ?? 'cutaway')
               }}
@@ -582,7 +640,7 @@ export const ViewerOverlay = ({
               <img
                 alt="Orbit Left"
                 className="h-[28px] w-[28px] -scale-x-100 object-contain opacity-70 transition-opacity group-hover:opacity-100"
-                src="/icons/rotate.png"
+                src="/icons/rotate.webp"
               />
             </ActionButton>
 
@@ -597,7 +655,7 @@ export const ViewerOverlay = ({
               <img
                 alt="Orbit Right"
                 className="h-[28px] w-[28px] object-contain opacity-70 transition-opacity group-hover:opacity-100"
-                src="/icons/rotate.png"
+                src="/icons/rotate.webp"
               />
             </ActionButton>
 
@@ -612,9 +670,26 @@ export const ViewerOverlay = ({
               <img
                 alt="Top View"
                 className="h-[28px] w-[28px] object-contain opacity-70 transition-opacity group-hover:opacity-100"
-                src="/icons/topview.png"
+                src="/icons/topview.webp"
               />
             </ActionButton>
+
+            <div className="mx-1 h-5 w-px bg-border/40" />
+
+            {/* First-person walkthrough */}
+            <ActionButton
+              className="hover:bg-white/5 hover:text-emerald-400"
+              label="Walkthrough"
+              onClick={() => {
+                flushSync(() => useEditor.getState().setFirstPersonMode(true))
+                requestWalkthroughPointerLock()
+              }}
+              size="icon"
+              tooltipSide="top"
+              variant="ghost"
+            >
+              <Footprints className="h-6 w-6" />
+            </ActionButton>
           </div>
         </TooltipProvider>
       </div>

package/src/components/viewer-zone-system.tsx

@@ -4,13 +4,18 @@ import { sceneRegistry, useScene, type ZoneNode } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useFrame } from '@react-three/fiber'
 import type { Mesh } from 'three'
+import { resolveOverlayPolicy } from '../lib/interaction/overlay-policy'
 import useEditor from '../store/use-editor'
+import useInteractionScope from '../store/use-interaction-scope'
 
 export const ViewerZoneSystem = () => {
   useFrame(() => {
     const { levelId, zoneId } = useViewer.getState().selection
     const structureLayer = useEditor.getState().structureLayer
     const nodes = useScene.getState().nodes
+    // During any active interaction zone labels step back entirely (Sims-light).
+    const zoneLabelsHidden =
+      resolveOverlayPolicy(useInteractionScope.getState().scope).zoneLabels === 'hidden'
 
     sceneRegistry.byType.zone!.forEach((id) => {
       const obj = sceneRegistry.nodes.get(id)
@@ -35,7 +40,7 @@ export const ViewerZoneSystem = () => {
       })
 
       // Labels: always visible on the current level (regardless of mode or zone selection)
-      const showLabel = !!levelId && isOnSelectedLevel
+      const showLabel = !zoneLabelsHidden && !!levelId && isOnSelectedLevel
       const targetOpacity = showLabel ? '1' : '0'
       const labelEl = document.getElementById(`${id}-label`)
       if (labelEl && labelEl.style.opacity !== targetOpacity) {

package/src/hooks/use-auto-save.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, test } from 'bun:test'
+import { isSuspiciousNodeDrop } from './use-auto-save'
+
+describe('isSuspiciousNodeDrop', () => {
+  test('blocks populated scenes from being flushed as empty skeletons', () => {
+    expect(isSuspiciousNodeDrop(12, 0)).toBe(true)
+    expect(isSuspiciousNodeDrop(12, 4)).toBe(true)
+  })
+
+  test('allows ordinary edits and intentionally empty starting scenes', () => {
+    expect(isSuspiciousNodeDrop(12, 11)).toBe(false)
+    expect(isSuspiciousNodeDrop(4, 0)).toBe(false)
+  })
+})

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

@@ -5,6 +5,11 @@ import { type MutableRefObject, useCallback, useEffect, useRef } from 'react'
 import { type SceneGraph, saveSceneToLocalStorage } from '../lib/scene'
 
 const AUTOSAVE_DEBOUNCE_MS = 1000
+const STRUCTURAL_NODE_COUNT = 4
+
+export function isSuspiciousNodeDrop(previousNodeCount: number, currentNodeCount: number) {
+  return previousNodeCount > STRUCTURAL_NODE_COUNT && currentNodeCount <= STRUCTURAL_NODE_COUNT
+}
 
 export type SaveStatus = 'idle' | 'pending' | 'saving' | 'saved' | 'paused' | 'error'
 
@@ -61,6 +66,13 @@ export function useAutoSave({
   useEffect(() => {
     let lastNodesSnapshot = JSON.stringify(useScene.getState().nodes)
     let lastNodeCount = Object.keys(useScene.getState().nodes).length
+    // Collections + scene materials are document-level state that persists with
+    // the graph but lives outside `nodes`. Track them by reference (zustand
+    // hands out a new object on every mutation) so a material edit or a
+    // collection change still triggers a save.
+    let lastCollectionsRef = useScene.getState().collections
+    let lastMaterialsRef = useScene.getState().materials
+    let lastInstalledPluginsRef = useScene.getState().installedPlugins
 
     async function executeSave() {
       if (isLoadingSceneRef.current || isVersionPreviewModeRef.current) {
@@ -69,14 +81,19 @@ export function useAutoSave({
         return
       }
 
-      const { nodes, rootNodeIds } = useScene.getState()
-      const sceneGraph = { nodes, rootNodeIds } as SceneGraph
+      const { nodes, rootNodeIds, collections, materials, installedPlugins } = useScene.getState()
+      const sceneGraph = {
+        nodes,
+        rootNodeIds,
+        collections,
+        materials,
+        installedPlugins,
+      } as SceneGraph
 
       // Guard: refuse to autosave if the scene went from populated to nearly empty.
       // This catches accidental full deletions before they're persisted.
       const currentNodeCount = Object.keys(nodes).length
-      const STRUCTURAL_NODE_COUNT = 4 // site + building + levels (empty scene skeleton)
-      if (lastNodeCount > STRUCTURAL_NODE_COUNT && currentNodeCount <= STRUCTURAL_NODE_COUNT) {
+      if (isSuspiciousNodeDrop(lastNodeCount, currentNodeCount)) {
         console.warn(
           `[autosave] Blocked: scene dropped from ${lastNodeCount} to ${currentNodeCount} nodes. Likely accidental deletion.`,
         )
@@ -118,19 +135,33 @@ export function useAutoSave({
     const unsubscribe = useScene.subscribe((state) => {
       if (isLoadingSceneRef.current) {
         lastNodesSnapshot = JSON.stringify(state.nodes)
+        lastCollectionsRef = state.collections
+        lastMaterialsRef = state.materials
+        lastInstalledPluginsRef = state.installedPlugins
         return
       }
 
       if (isVersionPreviewModeRef.current) {
         setSaveStatus('paused')
         lastNodesSnapshot = JSON.stringify(state.nodes)
+        lastCollectionsRef = state.collections
+        lastMaterialsRef = state.materials
+        lastInstalledPluginsRef = state.installedPlugins
         return
       }
 
       const currentNodesSnapshot = JSON.stringify(state.nodes)
-      if (currentNodesSnapshot === lastNodesSnapshot) return
+      const changed =
+        currentNodesSnapshot !== lastNodesSnapshot ||
+        state.collections !== lastCollectionsRef ||
+        state.materials !== lastMaterialsRef ||
+        state.installedPlugins !== lastInstalledPluginsRef
+      if (!changed) return
 
       lastNodesSnapshot = currentNodesSnapshot
+      lastCollectionsRef = state.collections
+      lastMaterialsRef = state.materials
+      lastInstalledPluginsRef = state.installedPlugins
       hasDirtyChangesRef.current = true
       onDirtyRef.current?.()
       setSaveStatus('pending')
@@ -155,9 +186,25 @@ export function useAutoSave({
     // (mobile Safari, bfcache) where `beforeunload` does not.
     function flushOnExit() {
       if (!hasDirtyChangesRef.current) return
+      const { nodes, rootNodeIds, collections, materials, installedPlugins } = useScene.getState()
+      const currentNodeCount = Object.keys(nodes).length
+      if (isSuspiciousNodeDrop(lastNodeCount, currentNodeCount)) {
+        console.warn(
+          `[autosave] Blocked unload flush: scene dropped from ${lastNodeCount} to ${currentNodeCount} nodes. Likely accidental deletion.`,
+        )
+        setSaveStatus('error')
+        return
+      }
+
       hasDirtyChangesRef.current = false
-      const { nodes, rootNodeIds } = useScene.getState()
-      const sceneGraph = { nodes, rootNodeIds } as SceneGraph
+      lastNodeCount = currentNodeCount
+      const sceneGraph = {
+        nodes,
+        rootNodeIds,
+        collections,
+        materials,
+        installedPlugins,
+      } as SceneGraph
       if (onSaveRef.current) {
         onSaveRef.current(sceneGraph, { keepalive: true }).catch(() => {})
       } else {

package/src/hooks/use-ceiling-events.ts

@@ -12,6 +12,7 @@ import { useThree } from '@react-three/fiber'
 import { useEffect, useRef } from 'react'
 import { type Object3D, Plane, Raycaster, Vector2, Vector3 } from 'three'
 import useEditor from '../store/use-editor'
+import { getMovingNode } from '../store/use-interaction-scope'
 
 const UP = new Vector3(0, 1, 0)
 
@@ -59,7 +60,7 @@ export function useCeilingEvents() {
     const isActive = (): boolean => {
       const ed = useEditor.getState()
       if (ed.selectedItem?.attachTo === 'ceiling') return true
-      const moving = ed.movingNode
+      const moving = getMovingNode()
       return moving?.type === 'item' && moving.asset?.attachTo === 'ceiling'
     }
 
@@ -85,7 +86,7 @@ export function useCeilingEvents() {
 
       for (const id of ceilingIds) {
         const node = nodes[id as AnyNodeId] as CeilingNode | undefined
-        if (!node || node.type !== 'ceiling' || node.polygon.length < 3) continue
+        if (node?.type !== 'ceiling' || node.polygon.length < 3) continue
         if (resolveLevelId(node, nodes) !== activeLevelId) continue
         const mesh = sceneRegistry.nodes.get(id)
         if (!mesh) continue

package/src/hooks/use-drag-action.ts

@@ -19,7 +19,10 @@ import { useEffect, useRef } from 'react'
 const sceneApi = createSceneApi(useScene)
 
 function modifiersFromGridEvent(event: GridEvent): Modifiers {
-  const ne = event.nativeEvent?.nativeEvent as Partial<KeyboardEvent> | undefined
+  // Both grid-event emit paths (use-grid-events.ts and the floorplan panel)
+  // store the raw DOM event directly at `.nativeEvent` — there is no second
+  // `.nativeEvent` hop.
+  const ne = event.nativeEvent as Partial<MouseEvent> | undefined
   return {
     shift: ne?.shiftKey ?? false,
     alt: ne?.altKey ?? false,