@pascal-app/editor 0.8.0 → 0.9.1

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

@@ -1,13 +1,17 @@
 'use client'
 
 import type { ReactNode } from 'react'
+import { triggerSFX } from './../../../lib/sfx-bus'
 import { cn } from './../../../lib/utils'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../primitives/tooltip'
 
 export type SidebarTab = {
   id: string
   label: string
   mobileDefaultSnap?: number
   mobileIcon?: ReactNode
+  /** Desktop icon shown in the vertical rail (v2 layout). */
+  icon?: ReactNode
 }
 
 interface TabBarProps {
@@ -30,7 +34,11 @@ export function TabBar({ tabs, activeTab, onTabChange }: TabBarProps) {
                 : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground',
             )}
             key={tab.id}
-            onClick={() => onTabChange(tab.id)}
+            onClick={() => {
+              triggerSFX('sfx:menu-click')
+              onTabChange(tab.id)
+            }}
+            onMouseEnter={() => triggerSFX('sfx:menu-hover')}
             type="button"
           >
             {tab.label}
@@ -40,3 +48,55 @@ export function TabBar({ tabs, activeTab, onTabChange }: TabBarProps) {
     </div>
   )
 }
+
+interface IconRailProps {
+  tabs: SidebarTab[]
+  /** Highlighted tab. Stays highlighted while the panel is collapsed. */
+  activeTab: string
+  /** True when the panel beside the rail is collapsed. */
+  collapsed: boolean
+  /** Clicking a rail icon: switch tab, or toggle the panel (see layout). */
+  onIconClick: (id: string) => void
+}
+
+/**
+ * Vertical icon rail for the v2 left column. Always visible (even when the
+ * panel is collapsed) so the user can reopen the panel by clicking an icon.
+ * The label renders as a hover tooltip on the right.
+ */
+export function IconRail({ tabs, activeTab, collapsed, onIconClick }: IconRailProps) {
+  return (
+    <TooltipProvider delayDuration={0} disableHoverableContent>
+      <div className="flex h-full w-14 shrink-0 flex-col items-center gap-1 border-border/50 border-r py-2">
+        {tabs.map((tab) => {
+          // Only show the active highlight while the panel is open. When
+          // collapsed nothing is "open", so every icon reads as unselected.
+          const showActive = activeTab === tab.id && !collapsed
+          return (
+            <Tooltip key={tab.id}>
+              <TooltipTrigger asChild>
+                <button
+                  className={cn(
+                    'group flex h-11 w-11 items-center justify-center rounded-xl transition-all duration-200 [&_img]:transition-[opacity,filter] [&_img]:duration-200',
+                    showActive
+                      ? 'bg-accent text-foreground shadow-sm [&_img]:opacity-100 [&_img]:grayscale-0'
+                      : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground [&_img]:opacity-60 [&_img]:grayscale hover:[&_img]:opacity-100 hover:[&_img]:grayscale-0',
+                  )}
+                  onClick={() => {
+                    triggerSFX('sfx:menu-click')
+                    onIconClick(tab.id)
+                  }}
+                  onMouseEnter={() => triggerSFX('sfx:menu-hover')}
+                  type="button"
+                >
+                  {tab.icon ?? tab.label.charAt(0)}
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="right">{tab.label}</TooltipContent>
+            </Tooltip>
+          )
+        })}
+      </div>
+    </TooltipProvider>
+  )
+}

package/src/components/viewer-overlay.tsx

@@ -10,13 +10,35 @@ import {
   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,
+  Layers,
+  PenLine,
+  Sparkles,
+} from 'lucide-react'
 import Link from 'next/link'
 import { useShallow } from 'zustand/react/shallow'
+import { getLevelDisplayName } from '../lib/level-name'
 import { cn } from '../lib/utils'
 import { ActionButton } from './ui/action-menu/action-button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from './ui/primitives/dropdown-menu'
 import { TooltipProvider } from './ui/primitives/tooltip'
 
 type ProjectOwner = {
@@ -60,6 +82,143 @@ const wallModeConfig = {
   },
 }
 
+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
+
+function RenderModeMenu() {
+  const shading = useViewer((s) => s.shading)
+  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>
+          )
+        })}
+      </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 => {
   if ('name' in node && node.name) return node.name
   if (node.type === 'wall') return 'Wall'
@@ -93,7 +252,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 +364,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 +438,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
@@ -392,6 +503,12 @@ export const ViewerOverlay = ({
               <Camera className="h-6 w-6" />
             </ActionButton>
 
+            <RenderModeMenu />
+
+            <SceneThemeMenu />
+
+            <EdgesMenu />
+
             {/* Level Mode */}
             <ActionButton
               className={cn(

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

@@ -12,7 +12,7 @@ export const ViewerZoneSystem = () => {
     const structureLayer = useEditor.getState().structureLayer
     const nodes = useScene.getState().nodes
 
-    sceneRegistry.byType.zone.forEach((id) => {
+    sceneRegistry.byType.zone!.forEach((id) => {
       const obj = sceneRegistry.nodes.get(id)
       if (!obj) return
 

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

@@ -9,7 +9,7 @@ const AUTOSAVE_DEBOUNCE_MS = 1000
 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
@@ -148,23 +148,30 @@ 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
+      hasDirtyChangesRef.current = false
       const { nodes, rootNodeIds } = useScene.getState()
       const sceneGraph = { nodes, rootNodeIds } 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()

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

@@ -0,0 +1,175 @@
+import {
+  type AnyNodeId,
+  type CeilingEvent,
+  type CeilingNode,
+  emitter,
+  resolveLevelId,
+  sceneRegistry,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+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'
+
+const UP = new Vector3(0, 1, 0)
+
+/** Ray-casting point-in-polygon on ceiling-local [x, z] tuples. */
+function pointInPolygon(x: number, z: number, polygon: Array<[number, number]>): boolean {
+  let inside = false
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const a = polygon[i]!
+    const b = polygon[j]!
+    const intersects =
+      a[1] > z !== b[1] > z && x < ((b[0] - a[0]) * (z - a[1])) / (b[1] - a[1]) + a[0]
+    if (intersects) inside = !inside
+  }
+  return inside
+}
+
+/**
+ * Reliable pointer events for placing ceiling-attached items.
+ *
+ * Mirrors {@link useGridEvents} (the floor path): rather than relying on the
+ * thin, single-sided `ceiling-grid` overlay mesh to be hit by R3F's raycaster —
+ * which misses from the "wrong" camera side, near polygon edges/holes, or while
+ * the overlay is mid-reveal, dropping the commit click even though the green box
+ * still shows — it intersects a math plane at each ceiling's height (double-sided,
+ * so it hits from above or below) and point-in-polygon tests the hit. Emits
+ * `ceiling:enter/move/leave/click` so both the placement coordinator and the 2D
+ * floor-plan item preview keep working.
+ *
+ * Active only while a ceiling-attached item is being placed or moved. The
+ * `ceiling-grid` mesh no longer emits these events (see `CeilingRenderer`), so
+ * this is the single, reliable source.
+ */
+export function useCeilingEvents() {
+  const { camera, gl } = useThree()
+  const raycaster = useRef(new Raycaster())
+  const pointer = useRef(new Vector2())
+  const plane = useRef(new Plane(UP.clone(), 0))
+  const worldHit = useRef(new Vector3())
+  const meshWorld = useRef(new Vector3())
+  const hoveredRef = useRef<string | null>(null)
+
+  useEffect(() => {
+    const canvas = gl.domElement
+
+    const isActive = (): boolean => {
+      const ed = useEditor.getState()
+      if (ed.selectedItem?.attachTo === 'ceiling') return true
+      const moving = ed.movingNode
+      return moving?.type === 'item' && moving.asset?.attachTo === 'ceiling'
+    }
+
+    type Hit = { node: CeilingNode; mesh: Object3D; world: Vector3; local: Vector3 }
+
+    // The ceiling on the active level whose plane the cursor ray crosses inside
+    // its polygon, nearest the camera.
+    const pick = (nativeEvent: PointerEvent | MouseEvent): Hit | null => {
+      const activeLevelId = useViewer.getState().selection.levelId
+      if (!activeLevelId) return null
+
+      const rect = canvas.getBoundingClientRect()
+      pointer.current.x = ((nativeEvent.clientX - rect.left) / rect.width) * 2 - 1
+      pointer.current.y = -((nativeEvent.clientY - rect.top) / rect.height) * 2 + 1
+      raycaster.current.setFromCamera(pointer.current, camera)
+
+      const nodes = useScene.getState().nodes
+      const ceilingIds = sceneRegistry.byType.ceiling
+      if (!ceilingIds) return null
+
+      let best: Hit | null = null
+      let bestDist = Number.POSITIVE_INFINITY
+
+      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 (resolveLevelId(node, nodes) !== activeLevelId) continue
+        const mesh = sceneRegistry.nodes.get(id)
+        if (!mesh) continue
+
+        mesh.getWorldPosition(meshWorld.current)
+        plane.current.set(UP, -meshWorld.current.y)
+        if (!raycaster.current.ray.intersectPlane(plane.current, worldHit.current)) continue
+
+        const local = mesh.worldToLocal(worldHit.current.clone())
+        if (!pointInPolygon(local.x, local.z, node.polygon)) continue
+
+        const dist = raycaster.current.ray.origin.distanceToSquared(worldHit.current)
+        if (dist < bestDist) {
+          bestDist = dist
+          best = { node, mesh, world: worldHit.current.clone(), local }
+        }
+      }
+      return best
+    }
+
+    const buildEvent = (hit: Hit, nativeEvent: PointerEvent | MouseEvent): CeilingEvent => ({
+      node: hit.node,
+      position: [hit.world.x, hit.world.y, hit.world.z],
+      localPosition: [hit.local.x, hit.local.y, hit.local.z],
+      normal: [0, 1, 0],
+      object: hit.mesh,
+      stopPropagation: () => {},
+      nativeEvent: nativeEvent as never,
+    })
+
+    const emitLeave = (nativeEvent: PointerEvent | MouseEvent) => {
+      const id = hoveredRef.current
+      if (!id) return
+      hoveredRef.current = null
+      const node = useScene.getState().nodes[id as AnyNodeId] as CeilingNode | undefined
+      const mesh = sceneRegistry.nodes.get(id)
+      if (!node || !mesh) return
+      emitter.emit(
+        'ceiling:leave',
+        buildEvent(
+          { node, mesh, world: meshWorld.current.clone(), local: new Vector3() },
+          nativeEvent,
+        ),
+      )
+    }
+
+    const onMove = (e: PointerEvent) => {
+      if (!isActive()) {
+        emitLeave(e)
+        return
+      }
+      const hit = pick(e)
+      if (!hit) {
+        emitLeave(e)
+        return
+      }
+      const ev = buildEvent(hit, e)
+      if (hoveredRef.current !== hit.node.id) {
+        if (hoveredRef.current) emitLeave(e)
+        hoveredRef.current = hit.node.id
+        emitter.emit('ceiling:enter', ev)
+      }
+      emitter.emit('ceiling:move', ev)
+    }
+
+    const onClick = (e: MouseEvent) => {
+      if (useViewer.getState().cameraDragging) return
+      if (e.button !== 0) return
+      if (!isActive()) return
+      const hit = pick(e)
+      if (!hit) return
+      emitter.emit('ceiling:click', buildEvent(hit, e))
+    }
+
+    const onPointerLeave = (e: PointerEvent) => emitLeave(e)
+
+    canvas.addEventListener('pointermove', onMove)
+    canvas.addEventListener('click', onClick)
+    canvas.addEventListener('pointerleave', onPointerLeave)
+
+    return () => {
+      canvas.removeEventListener('pointermove', onMove)
+      canvas.removeEventListener('click', onClick)
+      canvas.removeEventListener('pointerleave', onPointerLeave)
+    }
+  }, [camera, gl])
+}