@pascal-app/editor 0.6.0 → 0.7.0

package/src/components/tools/window/move-window-tool.tsx

@@ -4,6 +4,7 @@ import {
   isCurvedWall,
   sceneRegistry,
   spatialGridManager,
+  useLiveTransforms,
   useScene,
   type WallEvent,
   WindowNode,
@@ -144,6 +145,10 @@ export const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWin
         parentId: event.node.id,
         wallId: event.node.id,
       })
+      useLiveTransforms.getState().set(movingWindowNode.id, {
+        position: [clampedX, clampedY, 0],
+        rotation: itemRotation,
+      })
 
       if (prevWallId && prevWallId !== event.node.id) markWallDirty(prevWallId)
       markWallDirty(event.node.id)
@@ -215,6 +220,10 @@ export const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWin
           windowMesh.updateMatrixWorld(true)
         }
       }
+      useLiveTransforms.getState().set(movingWindowNode.id, {
+        position: [clampedX, clampedY, 0],
+        rotation: itemRotation,
+      })
       markWallDirty(event.node.id)
 
       const valid = !hasWallChildOverlap(
@@ -285,6 +294,11 @@ export const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWin
           parentId: event.node.id,
           width: movingWindowNode.width,
           height: movingWindowNode.height,
+          windowType: movingWindowNode.windowType,
+          operationState: movingWindowNode.operationState,
+          awningDirection: movingWindowNode.awningDirection,
+          casementStyle: movingWindowNode.casementStyle,
+          hingesSide: movingWindowNode.hingesSide,
           frameThickness: movingWindowNode.frameThickness,
           frameDepth: movingWindowNode.frameDepth,
           columnRatios: movingWindowNode.columnRatios,
@@ -326,6 +340,7 @@ export const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWin
       }
 
       markWallDirty(event.node.id)
+      useLiveTransforms.getState().clear(movingWindowNode.id)
       useScene.temporal.getState().pause()
 
       sfxEmitter.emit('sfx:item-place')
@@ -337,6 +352,7 @@ export const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWin
 
     const onWallLeave = () => {
       hideCursor()
+      useLiveTransforms.getState().clear(movingWindowNode.id)
       if (isNew) return // No original to restore for duplicates
       // Move mode: restore to original position while off-wall
       if (currentWallId && currentWallId !== original.parentId) {
@@ -354,6 +370,7 @@ export const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWin
     }
 
     const onCancel = () => {
+      useLiveTransforms.getState().clear(movingWindowNode.id)
       if (isNew) {
         useScene.getState().deleteNode(movingWindowNode.id)
         if (currentWallId) markWallDirty(currentWallId)
@@ -401,6 +418,7 @@ export const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWin
           if (original.parentId) markWallDirty(original.parentId)
         }
       }
+      useLiveTransforms.getState().clear(movingWindowNode.id)
       useScene.temporal.getState().resume()
       emitter.off('wall:enter', onWallEnter)
       emitter.off('wall:move', onWallMove)

package/src/components/tools/window/window-tool.tsx

@@ -262,6 +262,11 @@ export const WindowTool: React.FC = () => {
         parentId: event.node.id,
         width: draft.width,
         height: draft.height,
+        windowType: draft.windowType,
+        operationState: draft.operationState,
+        awningDirection: draft.awningDirection,
+        casementStyle: draft.casementStyle,
+        hingesSide: draft.hingesSide,
         frameThickness: draft.frameThickness,
         frameDepth: draft.frameDepth,
         columnRatios: draft.columnRatios,

package/src/components/ui/action-menu/camera-actions.tsx

@@ -4,7 +4,7 @@ import { emitter } from '@pascal-app/core'
 import Image from 'next/image'
 import { ActionButton } from './action-button'
 
-export function CameraActions() {
+export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
   const goToTopView = () => {
     emitter.emit('camera-controls:top-view')
   }
@@ -19,39 +19,43 @@ export function CameraActions() {
 
   return (
     <div className="flex items-center gap-1">
-      {/* Orbit CCW */}
-      <ActionButton
-        className="group hover:bg-white/5"
-        label="Orbit Left"
-        onClick={orbitCCW}
-        size="icon"
-        variant="ghost"
-      >
-        <Image
-          alt="Orbit Left"
-          className="h-[28px] w-[28px] -scale-x-100 object-contain opacity-70 transition-opacity group-hover:opacity-100"
-          height={28}
-          src="/icons/rotate.png"
-          width={28}
-        />
-      </ActionButton>
+      {!hideOrbit && (
+        <>
+          {/* Orbit CCW */}
+          <ActionButton
+            className="group hover:bg-white/5"
+            label="Orbit Left"
+            onClick={orbitCCW}
+            size="icon"
+            variant="ghost"
+          >
+            <Image
+              alt="Orbit Left"
+              className="h-[28px] w-[28px] -scale-x-100 object-contain opacity-70 transition-opacity group-hover:opacity-100"
+              height={28}
+              src="/icons/rotate.png"
+              width={28}
+            />
+          </ActionButton>
 
-      {/* Orbit CW */}
-      <ActionButton
-        className="group hover:bg-white/5"
-        label="Orbit Right"
-        onClick={orbitCW}
-        size="icon"
-        variant="ghost"
-      >
-        <Image
-          alt="Orbit Right"
-          className="h-[28px] w-[28px] object-contain opacity-70 transition-opacity group-hover:opacity-100"
-          height={28}
-          src="/icons/rotate.png"
-          width={28}
-        />
-      </ActionButton>
+          {/* Orbit CW */}
+          <ActionButton
+            className="group hover:bg-white/5"
+            label="Orbit Right"
+            onClick={orbitCW}
+            size="icon"
+            variant="ghost"
+          >
+            <Image
+              alt="Orbit Right"
+              className="h-[28px] w-[28px] object-contain opacity-70 transition-opacity group-hover:opacity-100"
+              height={28}
+              src="/icons/rotate.png"
+              width={28}
+            />
+          </ActionButton>
+        </>
+      )}
 
       {/* Top View */}
       <ActionButton

package/src/components/ui/action-menu/control-modes.tsx

@@ -9,7 +9,15 @@ import { cn } from './../../../lib/utils'
 import useEditor from './../../../store/use-editor'
 import { ActionButton } from './action-button'
 
-type ControlId = 'select' | 'box-select' | 'site-edit' | 'build' | 'furnish' | 'zone' | 'delete'
+type ControlId =
+  | 'select'
+  | 'box-select'
+  | 'site-edit'
+  | 'build'
+  | 'material-paint'
+  | 'furnish'
+  | 'zone'
+  | 'delete'
 
 type ControlConfig = {
   id: ControlId
@@ -54,6 +62,14 @@ const controls: ControlConfig[] = [
     color: 'hover:bg-green-500/20 hover:text-green-400',
     activeColor: 'bg-green-500/20 text-green-400',
   },
+  {
+    id: 'material-paint',
+    imageSrc: '/icons/paint.png',
+    label: 'Material Paint',
+    shortcut: 'P',
+    color: 'hover:bg-amber-500/20 hover:text-amber-400',
+    activeColor: 'bg-amber-500/20 text-amber-400',
+  },
   {
     id: 'furnish',
     imageSrc: '/icons/couch.png',
@@ -88,6 +104,7 @@ export function ControlModes() {
   const setPhase = useEditor((state) => state.setPhase)
   const setStructureLayer = useEditor((state) => state.setStructureLayer)
   const setSelectionTool = useEditor((state) => state.setFloorplanSelectionTool)
+  const primeMaterialPaintFromSelection = useEditor((state) => state.primeMaterialPaintFromSelection)
   const levelId = useViewer((s) => s.selection.levelId)
 
   // Only subscribe to the primitive `level` number — when walls are added to
@@ -112,6 +129,7 @@ export function ControlModes() {
     if (id === 'site-edit') return false
     if (id === 'build')
       return mode === 'build' && phase === 'structure' && structureLayer === 'elements'
+    if (id === 'material-paint') return mode === 'material-paint'
     if (id === 'furnish') return mode === 'build' && phase === 'furnish'
     if (id === 'zone')
       return mode === 'build' && phase === 'structure' && structureLayer === 'zones'
@@ -155,6 +173,15 @@ export function ControlModes() {
         setStructureLayer('elements')
         setMode('build')
       }
+    } else if (id === 'material-paint') {
+      if (getIsActive('material-paint')) {
+        setMode('select')
+      } else {
+        primeMaterialPaintFromSelection()
+        setPhase('structure')
+        setStructureLayer('elements')
+        setMode('material-paint')
+      }
     } else if (id === 'furnish') {
       if (getIsActive('furnish')) {
         setMode('select')

package/src/components/ui/action-menu/index.tsx

@@ -1,8 +1,14 @@
 'use client'
 
+import { useScene } from '@pascal-app/core'
 import { AnimatePresence, motion } from 'motion/react'
-import { TooltipProvider } from './../../../components/ui/primitives/tooltip'
+import { useEffect, useMemo } from 'react'
+import { useViewer } from '@pascal-app/viewer'
 import { useReducedMotion } from './../../../hooks/use-reduced-motion'
+import { useIsMobile } from './../../../hooks/use-mobile'
+import { TooltipProvider } from './../../../components/ui/primitives/tooltip'
+import { MaterialPicker } from './../../../components/ui/controls/material-picker'
+import { resolvePaintTargetFromSelection } from './../../../lib/material-paint'
 import { cn } from './../../../lib/utils'
 import useEditor from './../../../store/use-editor'
 import { ItemCatalog } from '../item-catalog/item-catalog'
@@ -12,12 +18,64 @@ import { FurnishTools } from './furnish-tools'
 import { StructureTools } from './structure-tools'
 import { ViewToggles } from './view-toggles'
 
+function PaintMaterialTray() {
+  const activePaintMaterial = useEditor((state) => state.activePaintMaterial)
+  const activePaintTarget = useEditor((state) => state.activePaintTarget)
+  const setActivePaintMaterial = useEditor((state) => state.setActivePaintMaterial)
+  const setActivePaintTarget = useEditor((state) => state.setActivePaintTarget)
+  const selectedIds = useViewer((state) => state.selection.selectedIds)
+  const nodes = useScene((state) => state.nodes)
+  const selectedId = selectedIds.length === 1 ? (selectedIds[0] ?? null) : null
+
+  useEffect(() => {
+    const selectedPaintTarget = resolvePaintTargetFromSelection({
+      nodes,
+      selectedId,
+    })
+
+    if (selectedPaintTarget) {
+      setActivePaintTarget(selectedPaintTarget)
+    }
+  }, [nodes, selectedId, setActivePaintTarget])
+
+  return (
+    <div className="w-[42rem] max-w-[calc(100vw-2rem)]">
+      <MaterialPicker
+        onChange={(material) => {
+          setActivePaintMaterial({ material, sourceTarget: activePaintTarget })
+        }}
+        onSelectMaterialPreset={(materialPreset) => {
+          setActivePaintMaterial({ materialPreset, sourceTarget: activePaintTarget })
+        }}
+        selectedMaterialPreset={activePaintMaterial?.materialPreset}
+        value={activePaintMaterial?.material}
+      />
+    </div>
+  )
+}
+
 export function ActionMenu({ className }: { className?: string }) {
   const phase = useEditor((state) => state.phase)
   const mode = useEditor((state) => state.mode)
   const tool = useEditor((state) => state.tool)
   const catalogCategory = useEditor((state) => state.catalogCategory)
+  const isMobile = useIsMobile()
+  const hasSelectionOnMobile = useViewer((s) => isMobile && s.selection.selectedIds.length > 0)
+  const hasReferenceOnMobile = useEditor((s) => isMobile && Boolean(s.selectedReferenceId))
+  const CONTEXTUAL_TABS = new Set(['ai', 'items', 'studio'])
+  const isContextualPanelOnMobile = useEditor(
+    (s) => isMobile && CONTEXTUAL_TABS.has(s.activeSidebarPanel),
+  )
   const reducedMotion = useReducedMotion()
+  const showPaintTray = useMemo(() => mode === 'material-paint', [mode])
+
+  // On mobile, defer the bottom rail to the selection bar when something
+  // is selected — the contextual actions take priority over mode controls.
+  // Also hide on Chat / Items / Studio tabs; those are contextual workflows
+  // (composing / picking furniture / generating renders) where the build
+  // menu is irrelevant.
+  if (hasSelectionOnMobile || hasReferenceOnMobile || isContextualPanelOnMobile) return null
+
   const transition = reducedMotion
     ? { duration: 0 }
     : { type: 'spring' as const, bounce: 0.2, duration: 0.4 }
@@ -138,6 +196,38 @@ export function ActionMenu({ className }: { className?: string }) {
             </motion.div>
           )}
         </AnimatePresence>
+
+        <AnimatePresence>
+          {showPaintTray && (
+            <motion.div
+              animate={{
+                opacity: 1,
+                maxHeight: 96,
+                paddingTop: 8,
+                paddingBottom: 8,
+                borderBottomWidth: 1,
+              }}
+              className={cn('overflow-hidden border-border border-b px-3')}
+              exit={{
+                opacity: 0,
+                maxHeight: 0,
+                paddingTop: 0,
+                paddingBottom: 0,
+                borderBottomWidth: 0,
+              }}
+              initial={{
+                opacity: 0,
+                maxHeight: 0,
+                paddingTop: 0,
+                paddingBottom: 0,
+                borderBottomWidth: 0,
+              }}
+              transition={transition}
+            >
+              <PaintMaterialTray />
+            </motion.div>
+          )}
+        </AnimatePresence>
         {/* Control Mode Row - Always visible, centered */}
         <div className="flex items-center justify-center gap-1 px-2 py-1.5">
           <ControlModes />

package/src/components/ui/action-menu/structure-tools.tsx

@@ -24,12 +24,14 @@ export const tools: ToolConfig[] = [
   // { id: 'custom-room', iconSrc: '/icons/custom-room.png', label: 'Custom Room' },
   { id: 'slab', iconSrc: '/icons/floor.png', label: 'Slab' },
   { id: 'ceiling', iconSrc: '/icons/ceiling.png', label: 'Ceiling' },
+  { id: 'column', iconSrc: '/icons/column.png', label: 'Column' },
   { id: 'roof', iconSrc: '/icons/roof.png', label: 'Gable Roof' },
   { id: 'stair', iconSrc: '/icons/stairs.png', label: 'Stairs' },
   { id: 'door', iconSrc: '/icons/door.png', label: 'Door' },
   { id: 'window', iconSrc: '/icons/window.png', label: 'Window' },
   { id: 'fence', iconSrc: '/icons/fence.png', label: 'Fence' },
   { id: 'zone', iconSrc: '/icons/zone.png', label: 'Zone' },
+  { id: 'spawn', iconSrc: '/icons/site.png', label: 'Spawn Point' },
 ]
 
 export function StructureTools() {