@pascal-app/editor 0.8.0 → 0.9.2

package/src/components/viewer-overlay.tsx

@@ -6,17 +6,45 @@ import {
   type AnyNodeId,
   type BuildingNode,
   emitter,
+  getLevelDisplayName,
   type LevelNode,
   useScene,
   type ZoneNode,
 } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { ArrowLeft, Camera, ChevronRight, Diamond, Layers, Moon, Sun } from 'lucide-react'
-import { motion } from 'motion/react'
+import {
+  CLAY_PALETTE,
+  type EdgeMode,
+  getSceneTheme,
+  SCENE_THEMES,
+  useViewer,
+} from '@pascal-app/viewer'
+import {
+  ArrowLeft,
+  Box,
+  Camera,
+  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 { 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'
 
 type ProjectOwner = {
@@ -26,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',
@@ -42,22 +88,188 @@ 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 = [
+  { id: 'solid', name: 'Solid', detail: 'Flat and fast — no ambient occlusion', icon: Box },
+  { 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 (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <ActionButton
+          className="text-muted-foreground/80 hover:bg-white/5 hover:text-foreground"
+          label={`Render: ${active.name}`}
+          size="icon"
+          tooltipSide="top"
+          variant="ghost"
+        >
+          <ActiveIcon className="h-6 w-6" />
+        </ActionButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="center" className="min-w-56" side="top">
+        {SHADING_OPTIONS.map((option) => {
+          const OptionIcon = option.icon
+          return (
+            <DropdownMenuItem
+              key={option.id}
+              onSelect={() => useViewer.getState().setShading(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>
+              {shading === option.id ? <Check className="ml-auto text-foreground" /> : null}
+            </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>
+  )
+}
+
+function SceneThemeMenu() {
+  const sceneTheme = useViewer((s) => s.sceneTheme)
+  const active = getSceneTheme(sceneTheme)
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <ActionButton
+          className="text-muted-foreground/80 hover:bg-white/5 hover:text-foreground"
+          label={`Theme: ${active.name}`}
+          size="icon"
+          tooltipSide="top"
+          variant="ghost"
+        >
+          <Icon color="currentColor" height={24} icon="lucide:swatch-book" width={24} />
+        </ActionButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="center" className="min-w-48" side="top">
+        {SCENE_THEMES.map((sceneThemeOption) => {
+          const swatches = (['wall', 'roof', 'floor', 'glazing'] as const).map(
+            (role) => sceneThemeOption.clayTints?.[role] ?? CLAY_PALETTE[role],
+          )
+          return (
+            <DropdownMenuItem
+              key={sceneThemeOption.id}
+              onSelect={() => useViewer.getState().setSceneTheme(sceneThemeOption.id)}
+            >
+              <span
+                className="grid h-5 w-5 shrink-0 grid-cols-2 overflow-hidden rounded-sm border border-black/10"
+                style={{ backgroundColor: sceneThemeOption.background }}
+              >
+                {swatches.map((color, index) => (
+                  <span
+                    key={`${sceneThemeOption.id}-${index}`}
+                    style={{ backgroundColor: color }}
+                  />
+                ))}
+              </span>
+              <span className="text-foreground">{sceneThemeOption.name}</span>
+              {sceneTheme === sceneThemeOption.id ? (
+                <Check className="ml-auto text-foreground" />
+              ) : null}
+            </DropdownMenuItem>
+          )
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+const EDGE_OPTIONS = [
+  { id: 'off', name: 'Off', detail: 'No edge lines' },
+  { id: 'soft', name: 'Soft', detail: 'Faint outline of major creases' },
+  { id: 'strong', name: 'Strong', detail: 'Crisp, opaque edge lines' },
+] as const satisfies readonly { id: EdgeMode; name: string; detail: string }[]
+
+function EdgesMenu() {
+  const edges = useViewer((s) => s.edges)
+  const active = EDGE_OPTIONS.find((o) => o.id === edges) ?? EDGE_OPTIONS[0]
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <ActionButton
+          className={
+            edges === 'off'
+              ? 'text-muted-foreground/80 hover:bg-white/5 hover:text-foreground'
+              : 'bg-white/10 text-foreground'
+          }
+          label={`Edges: ${active.name}`}
+          size="icon"
+          tooltipSide="top"
+          variant="ghost"
+        >
+          <PenLine className="h-6 w-6" />
+        </ActionButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="center" className="min-w-56" side="top">
+        {EDGE_OPTIONS.map((option) => (
+          <DropdownMenuItem
+            key={option.id}
+            onSelect={() => useViewer.getState().setEdges(option.id)}
+          >
+            <div className="flex flex-col">
+              <span className="text-foreground">{option.name}</span>
+              <span className="text-muted-foreground text-xs">{option.detail}</span>
+            </div>
+            {edges === option.id ? <Check className="ml-auto text-foreground" /> : null}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
 }
 
 const getNodeName = (node: AnyNode): string => {
@@ -93,7 +305,6 @@ export const ViewerOverlay = ({
   const cameraMode = useViewer((s) => s.cameraMode)
   const levelMode = useViewer((s) => s.levelMode)
   const wallMode = useViewer((s) => s.wallMode)
-  const theme = useViewer((s) => s.theme)
 
   // Subscribe only to the specific nodes we read so that creating an unrelated
   // node elsewhere in the scene doesn't re-render this overlay.
@@ -206,7 +417,7 @@ export const ViewerOverlay = ({
                       className={`truncate transition-colors ${zone ? 'text-muted-foreground hover:text-foreground' : 'font-medium text-foreground'}`}
                       onClick={() => handleBreadcrumbClick('level')}
                     >
-                      {level.name || `Level ${level.level}`}
+                      {getLevelDisplayName(level)}
                     </button>
                   </>
                 )}
@@ -280,53 +491,6 @@ export const ViewerOverlay = ({
       <div className="dark absolute bottom-6 left-1/2 z-20 -translate-x-1/2 text-foreground">
         <TooltipProvider delayDuration={0}>
           <div className="pointer-events-auto flex h-14 flex-row items-center justify-center gap-1.5 rounded-2xl border border-border/40 bg-background/95 p-1.5 shadow-lg backdrop-blur-xl transition-colors duration-200 ease-out">
-            {/* Theme Toggle */}
-            <button
-              aria-label="Toggle theme"
-              className="flex h-[36px] shrink-0 cursor-pointer items-center rounded-full border border-border/50 bg-accent/50 p-1"
-              onClick={() => useViewer.getState().setTheme(theme === 'dark' ? 'light' : 'dark')}
-              type="button"
-            >
-              <div className="relative flex">
-                {/* Sliding Background */}
-                <motion.div
-                  animate={{
-                    x: theme === 'light' ? '100%' : '0%',
-                  }}
-                  className="absolute inset-0 rounded-full bg-white shadow-sm dark:bg-white/20"
-                  initial={false}
-                  style={{ width: '50%' }}
-                  transition={{
-                    type: 'spring',
-                    stiffness: 500,
-                    damping: 35,
-                  }}
-                />
-
-                {/* Dark Mode Icon */}
-                <div
-                  className={cn(
-                    'pointer-events-none relative z-10 flex h-7 w-9 items-center justify-center rounded-full transition-colors duration-200',
-                    theme === 'dark' ? 'text-foreground' : 'text-muted-foreground',
-                  )}
-                >
-                  <Moon className="h-4 w-4" />
-                </div>
-
-                {/* Light Mode Icon */}
-                <div
-                  className={cn(
-                    'pointer-events-none relative z-10 flex h-7 w-9 items-center justify-center rounded-full transition-colors duration-200',
-                    theme === 'light' ? 'text-foreground' : 'text-muted-foreground',
-                  )}
-                >
-                  <Sun className="h-4 w-4" />
-                </div>
-              </div>
-            </button>
-
-            <div className="mx-1 h-5 w-px bg-border/40" />
-
             {/* Scans and Guides Visibility */}
             {canShowScans && (
               <ActionButton
@@ -344,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>
             )}
@@ -365,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>
             )}
@@ -392,6 +556,12 @@ export const ViewerOverlay = ({
               <Camera className="h-6 w-6" />
             </ActionButton>
 
+            <RenderModeMenu />
+
+            <SceneThemeMenu />
+
+            <EdgesMenu />
+
             {/* Level Mode */}
             <ActionButton
               className={cn(
@@ -437,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')
               }}
@@ -465,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>
 
@@ -480,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>
 
@@ -495,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,15 +4,20 @@ 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) => {
+    sceneRegistry.byType.zone!.forEach((id) => {
       const obj = sceneRegistry.nodes.get(id)
       if (!obj) return
 
@@ -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,11 +5,16 @@ 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'
 
 interface UseAutoSaveOptions {
-  onSave?: (scene: SceneGraph) => Promise<void>
+  onSave?: (scene: SceneGraph, options?: { keepalive?: boolean }) => Promise<void>
   onDirty?: () => void
   onSaveStatusChange?: (status: SaveStatus) => void
   isVersionPreviewMode?: boolean
@@ -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')
@@ -148,23 +179,46 @@ export function useAutoSave({
       }, AUTOSAVE_DEBOUNCE_MS)
     })
 
+    // Flush any unsaved change while the page is going away. The network
+    // save MUST set `keepalive` — a normal fetch is cancelled by the browser
+    // the moment the page unloads, so a quick refresh right after an edit
+    // would otherwise drop the change entirely. `pagehide` fires in cases
+    // (mobile Safari, bfcache) where `beforeunload` does not.
     function flushOnExit() {
       if (!hasDirtyChangesRef.current) return
-      const { nodes, rootNodeIds } = useScene.getState()
-      const sceneGraph = { nodes, rootNodeIds } as SceneGraph
+      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
+      lastNodeCount = currentNodeCount
+      const sceneGraph = {
+        nodes,
+        rootNodeIds,
+        collections,
+        materials,
+        installedPlugins,
+      } as SceneGraph
       if (onSaveRef.current) {
-        onSaveRef.current(sceneGraph).catch(() => {})
+        onSaveRef.current(sceneGraph, { keepalive: true }).catch(() => {})
       } else {
         saveSceneToLocalStorage(sceneGraph)
       }
-      hasDirtyChangesRef.current = false
     }
 
     window.addEventListener('beforeunload', flushOnExit)
+    window.addEventListener('pagehide', flushOnExit)
 
     return () => {
       executeSaveRef.current = null
       window.removeEventListener('beforeunload', flushOnExit)
+      window.removeEventListener('pagehide', flushOnExit)
       if (saveTimeoutRef.current) clearTimeout(saveTimeoutRef.current)
       flushOnExit()
       unsubscribe()