@pascal-app/editor 0.7.0 → 0.9.1

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

@@ -1,64 +1,22 @@
 'use client'
 
-import { useScene } from '@pascal-app/core'
-import { AnimatePresence, motion } from 'motion/react'
-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 { motion } from 'motion/react'
 import { TooltipProvider } from './../../../components/ui/primitives/tooltip'
-import { MaterialPicker } from './../../../components/ui/controls/material-picker'
-import { resolvePaintTargetFromSelection } from './../../../lib/material-paint'
+import { useIsMobile } from './../../../hooks/use-mobile'
+import { useReducedMotion } from './../../../hooks/use-reduced-motion'
 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'
-
-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])
+import { GridSnapControl, SecondaryToggles } from './view-toggles'
 
-  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>
-  )
-}
+// 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
 
 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))
@@ -67,7 +25,6 @@ export function ActionMenu({ className }: { className?: string }) {
     (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.
@@ -84,158 +41,38 @@ 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>
-
-        <AnimatePresence>
-          {phase === 'furnish' && mode === 'build' && (
-            <motion.div
-              animate={{
-                opacity: 1,
-                maxHeight: 80,
-                paddingTop: 8,
-                paddingBottom: 8,
-                borderBottomWidth: 1,
-              }}
-              className={cn(
-                'overflow-hidden border-border',
-                'max-h-20 border-b px-2 py-2 opacity-100',
-              )}
-              exit={{
-                opacity: 0,
-                maxHeight: 0,
-                paddingTop: 0,
-                paddingBottom: 0,
-                borderBottomWidth: 0,
-              }}
-              initial={{
-                opacity: 0,
-                maxHeight: 0,
-                paddingTop: 0,
-                paddingBottom: 0,
-                borderBottomWidth: 0,
-              }}
-              transition={transition}
-            >
-              <div className="mx-auto w-max">
-                <FurnishTools />
-              </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
-
-        {/* Structure Tools Row - Animated */}
-        <AnimatePresence>
-          {phase === 'structure' && mode === 'build' && (
-            <motion.div
-              animate={{
-                opacity: 1,
-                maxHeight: 80,
-                paddingTop: 8,
-                paddingBottom: 8,
-                borderBottomWidth: 1,
-              }}
-              className={cn('max-h-20 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}
-            >
-              <div className="w-max">
-                <StructureTools />
-              </div>
-            </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 />
-          <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

@@ -1,15 +1,4 @@
-'use client'
-
-import NextImage from 'next/image'
-import { useContextualTools } from '../../../hooks/use-contextual-tools'
-
-import { cn } from '../../../lib/utils'
-import useEditor, {
-  type CatalogCategory,
-  type StructureTool,
-  type Tool,
-} from '../../../store/use-editor'
-import { ActionButton } from './action-button'
+import type { CatalogCategory, StructureTool } from '../../../store/use-editor'
 
 export type ToolConfig = {
   id: StructureTool
@@ -18,86 +7,22 @@ export type ToolConfig = {
   catalogCategory?: CatalogCategory
 }
 
+// Shared structure-tool metadata (icons + labels). The build palette now lives
+// in the community Build sidebar; this list survives only as the lookup table
+// for cursor/floorplan indicators. Roof-mounted accessories are intentionally
+// absent — they're placed from the roof inspector's "Add element" section.
 export const tools: ToolConfig[] = [
   { id: 'wall', iconSrc: '/icons/wall.png', label: 'Wall' },
-  // { id: 'room', iconSrc: '/icons/room.png', label: 'Room' },
-  // { 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: 'stair', iconSrc: '/icons/stairs.png', label: 'Stairs' },
+  { id: 'roof', iconSrc: '/icons/roof.png', label: 'Gable Roof' },
   { id: 'fence', iconSrc: '/icons/fence.png', label: 'Fence' },
+  { id: 'column', iconSrc: '/icons/column.png', label: 'Column' },
+  { id: 'elevator', iconSrc: '/icons/elevator.png', label: 'Elevator' },
+  { id: 'slab', iconSrc: '/icons/floor.png', label: 'Slab' },
+  { id: 'ceiling', iconSrc: '/icons/ceiling.png', label: 'Ceiling' },
   { id: 'zone', iconSrc: '/icons/zone.png', label: 'Zone' },
-  { id: 'spawn', iconSrc: '/icons/site.png', label: 'Spawn Point' },
+  { id: 'spawn', iconSrc: '/icons/spawn-point.png', label: 'Spawn Point' },
+  { id: 'shelf', iconSrc: '/icons/shelf.png', label: 'Shelf' },
 ]
-
-export function StructureTools() {
-  const activeTool = useEditor((state) => state.tool)
-  const catalogCategory = useEditor((state) => state.catalogCategory)
-  const structureLayer = useEditor((state) => state.structureLayer)
-  const setTool = useEditor((state) => state.setTool)
-  const setCatalogCategory = useEditor((state) => state.setCatalogCategory)
-
-  const contextualTools = useContextualTools()
-
-  // Filter tools based on structureLayer
-  const visibleTools =
-    structureLayer === 'zones'
-      ? tools.filter((t) => t.id === 'zone')
-      : tools.filter((t) => t.id !== 'zone')
-
-  const hasActiveTool = visibleTools.some(
-    (t) =>
-      activeTool === t.id && (t.catalogCategory ? catalogCategory === t.catalogCategory : true),
-  )
-
-  return (
-    <div className="flex items-center gap-1.5 px-1">
-      {visibleTools.map((tool, index) => {
-        // For item tools with catalog category, check both tool and category match
-        const isActive =
-          activeTool === tool.id &&
-          (tool.catalogCategory ? catalogCategory === tool.catalogCategory : true)
-
-        const isContextual = contextualTools.includes(tool.id)
-
-        return (
-          <ActionButton
-            className={cn(
-              'rounded-lg duration-300',
-              isActive
-                ? 'z-10 scale-110 bg-black/40 hover:bg-black/40'
-                : 'scale-95 bg-transparent opacity-60 grayscale hover:bg-black/20 hover:opacity-100 hover:grayscale-0',
-            )}
-            key={`${tool.id}-${tool.catalogCategory ?? index}`}
-            label={tool.label}
-            onClick={() => {
-              if (!isActive) {
-                setTool(tool.id)
-                setCatalogCategory(tool.catalogCategory ?? null)
-
-                // Automatically switch to build mode if we select a tool
-                if (useEditor.getState().mode !== 'build') {
-                  useEditor.getState().setMode('build')
-                }
-              }
-            }}
-            size="icon"
-            variant="ghost"
-          >
-            <NextImage
-              alt={tool.label}
-              className="size-full object-contain"
-              height={28}
-              src={tool.iconSrc}
-              width={28}
-            />
-          </ActionButton>
-        )
-      })}
-    </div>
-  )
-}