@pascal-app/editor 0.6.0 → 0.8.0

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

@@ -1,23 +1,84 @@
 'use client'
 
+import { useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
 import { AnimatePresence, motion } from 'motion/react'
+import { useEffect, useMemo } from 'react'
+import { MaterialPicker } from './../../../components/ui/controls/material-picker'
 import { TooltipProvider } from './../../../components/ui/primitives/tooltip'
+import { useIsMobile } from './../../../hooks/use-mobile'
 import { useReducedMotion } from './../../../hooks/use-reduced-motion'
+import { resolvePaintTargetFromSelection } from './../../../lib/material-paint'
 import { cn } from './../../../lib/utils'
 import useEditor from './../../../store/use-editor'
-import { ItemCatalog } from '../item-catalog/item-catalog'
 import { CameraActions } from './camera-actions'
 import { ControlModes } from './control-modes'
-import { FurnishTools } from './furnish-tools'
 import { StructureTools } from './structure-tools'
-import { ViewToggles } from './view-toggles'
+import { GridSnapControl, SecondaryToggles } from './view-toggles'
+
+// Mobile bottom offset matches the viewer's overlap behind the sheet's
+// rounded corners (SHEET_OVERLAP_PX in editor-layout-mobile) so the menu sits
+// just above that strip instead of inside it.
+const MOBILE_BOTTOM_OFFSET = 24
+
+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 }
@@ -26,49 +87,19 @@ export function ActionMenu({ className }: { className?: string }) {
     <TooltipProvider>
       <motion.div
         className={cn(
-          'fixed bottom-6 left-1/2 z-50 -translate-x-1/2',
+          'left-1/2 z-50 -translate-x-1/2',
+          isMobile ? 'absolute origin-bottom scale-90' : 'fixed bottom-6',
           'rounded-2xl border border-border bg-background/90 shadow-2xl backdrop-blur-md',
           'transition-colors duration-200 ease-out',
           className,
         )}
         layout
+        style={isMobile ? { bottom: MOBILE_BOTTOM_OFFSET } : undefined}
         transition={transition}
       >
-        {/* Item Catalog Row - Only show when in build mode with item tool */}
-        <AnimatePresence>
-          {mode === 'build' && tool === 'item' && catalogCategory && (
-            <motion.div
-              animate={{
-                opacity: 1,
-                maxHeight: 160,
-                paddingTop: 8,
-                paddingBottom: 8,
-                borderBottomWidth: 1,
-              }}
-              className={cn('overflow-hidden border-border border-b px-2 py-2')}
-              exit={{
-                opacity: 0,
-                maxHeight: 0,
-                paddingTop: 0,
-                paddingBottom: 0,
-                borderBottomWidth: 0,
-              }}
-              initial={{
-                opacity: 0,
-                maxHeight: 0,
-                paddingTop: 0,
-                paddingBottom: 0,
-                borderBottomWidth: 0,
-              }}
-              transition={transition}
-            >
-              <ItemCatalog category={catalogCategory} key={catalogCategory} />
-            </motion.div>
-          )}
-        </AnimatePresence>
-
+        {/* Structure Tools Row - Animated */}
         <AnimatePresence>
-          {phase === 'furnish' && mode === 'build' && (
+          {phase === 'structure' && mode === 'build' && (
             <motion.div
               animate={{
                 opacity: 1,
@@ -77,10 +108,7 @@ export function ActionMenu({ className }: { className?: string }) {
                 paddingBottom: 8,
                 borderBottomWidth: 1,
               }}
-              className={cn(
-                'overflow-hidden border-border',
-                'max-h-20 border-b px-2 py-2 opacity-100',
-              )}
+              className={cn('max-h-20 overflow-hidden border-border border-b px-2 py-2')}
               exit={{
                 opacity: 0,
                 maxHeight: 0,
@@ -97,25 +125,24 @@ export function ActionMenu({ className }: { className?: string }) {
               }}
               transition={transition}
             >
-              <div className="mx-auto w-max">
-                <FurnishTools />
+              <div className="w-max">
+                <StructureTools />
               </div>
             </motion.div>
           )}
         </AnimatePresence>
 
-        {/* Structure Tools Row - Animated */}
         <AnimatePresence>
-          {phase === 'structure' && mode === 'build' && (
+          {showPaintTray && (
             <motion.div
               animate={{
                 opacity: 1,
-                maxHeight: 80,
+                maxHeight: 96,
                 paddingTop: 8,
                 paddingBottom: 8,
                 borderBottomWidth: 1,
               }}
-              className={cn('max-h-20 overflow-hidden border-border border-b px-2 py-2')}
+              className={cn('overflow-hidden border-border border-b px-3')}
               exit={{
                 opacity: 0,
                 maxHeight: 0,
@@ -132,20 +159,32 @@ export function ActionMenu({ className }: { className?: string }) {
               }}
               transition={transition}
             >
-              <div className="w-max">
-                <StructureTools />
-              </div>
+              <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 />
-          <div className="mx-1 h-5 w-px bg-border" />
-          <ViewToggles />
-          <div className="mx-1 h-5 w-px bg-border" />
-          <CameraActions />
-        </div>
+        {isMobile ? (
+          <div className="flex flex-col items-stretch gap-0.5 px-2 py-1.5">
+            {/* Row 1: control modes only */}
+            <div className="flex items-center justify-center gap-1">
+              <ControlModes />
+            </div>
+            {/* Row 2: grid snap + secondary toggles (orbit + top view hidden) */}
+            <div className="flex items-center justify-center gap-1 border-border/50 border-t pt-1">
+              <GridSnapControl />
+              <SecondaryToggles />
+            </div>
+          </div>
+        ) : (
+          <div className="flex items-center justify-center gap-1 px-2 py-1.5">
+            <ControlModes />
+            <div className="mx-1 h-5 w-px bg-border" />
+            <GridSnapControl />
+            <SecondaryToggles />
+            <div className="mx-1 h-5 w-px bg-border" />
+            <CameraActions />
+          </div>
+        )}
       </motion.div>
     </TooltipProvider>
   )

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() {