@pascal-app/editor 0.8.0 → 0.9.2

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

@@ -2,9 +2,14 @@
 
 import { emitter } from '@pascal-app/core'
 import Image from 'next/image'
+import useEditor from '../../../store/use-editor'
 import { ActionButton } from './action-button'
 
 export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
+  // Orbit stays useful in 2D-only (it spins the synced floorplan view), but
+  // top view only tilts the hidden 3D camera — pointless without the canvas.
+  const is2dOnly = useEditor((s) => s.viewMode === '2d')
+
   const goToTopView = () => {
     emitter.emit('camera-controls:top-view')
   }
@@ -33,7 +38,7 @@ export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
               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"
+              src="/icons/rotate.webp"
               width={28}
             />
           </ActionButton>
@@ -50,7 +55,7 @@ export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
               alt="Orbit Right"
               className="h-[28px] w-[28px] object-contain opacity-70 transition-opacity group-hover:opacity-100"
               height={28}
-              src="/icons/rotate.png"
+              src="/icons/rotate.webp"
               width={28}
             />
           </ActionButton>
@@ -58,21 +63,23 @@ export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
       )}
 
       {/* Top View */}
-      <ActionButton
-        className="group hover:bg-white/5"
-        label="Top View"
-        onClick={goToTopView}
-        size="icon"
-        variant="ghost"
-      >
-        <Image
-          alt="Top View"
-          className="h-[28px] w-[28px] object-contain opacity-70 transition-opacity group-hover:opacity-100"
-          height={28}
-          src="/icons/topview.png"
-          width={28}
-        />
-      </ActionButton>
+      {!is2dOnly && (
+        <ActionButton
+          className="group hover:bg-white/5"
+          label="Top View"
+          onClick={goToTopView}
+          size="icon"
+          variant="ghost"
+        >
+          <Image
+            alt="Top View"
+            className="h-[28px] w-[28px] object-contain opacity-70 transition-opacity group-hover:opacity-100"
+            height={28}
+            src="/icons/topview.webp"
+            width={28}
+          />
+        </ActionButton>
+      )}
     </div>
   )
 }

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

@@ -1,23 +1,15 @@
 'use client'
 
 import { Icon } from '@iconify/react'
-import { type LevelNode, useScene } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
 import { type LucideIcon, Trash2 } from 'lucide-react'
 import Image from 'next/image'
+import { Fragment } from 'react'
 import { cn } from './../../../lib/utils'
 import useEditor from './../../../store/use-editor'
 import { ActionButton } from './action-button'
+import { MeasurementControl } from './measurement-control'
 
-type ControlId =
-  | 'select'
-  | 'box-select'
-  | 'site-edit'
-  | 'build'
-  | 'material-paint'
-  | 'furnish'
-  | 'zone'
-  | 'delete'
+type ControlId = 'select' | 'box-select' | 'zone' | 'delete'
 
 type ControlConfig = {
   id: ControlId
@@ -34,53 +26,15 @@ type ControlConfig = {
 const controls: ControlConfig[] = [
   {
     id: 'select',
-    imageSrc: '/icons/select.png',
+    imageSrc: '/icons/select.webp',
     label: 'Select',
     shortcut: 'V',
     color: 'hover:bg-blue-500/20 hover:text-blue-400',
     activeColor: 'bg-blue-500/20 text-blue-400',
   },
-  {
-    id: 'box-select',
-    iconifyIcon: 'mdi:select-drag',
-    label: 'Box select',
-    color: 'hover:bg-white/5',
-    activeColor: 'bg-white/10 hover:bg-white/10',
-  },
-  {
-    id: 'site-edit',
-    imageSrc: '/icons/site.png',
-    label: 'Edit site',
-    color: 'hover:bg-white/5',
-    activeColor: 'bg-white/10 hover:bg-white/10',
-  },
-  {
-    id: 'build',
-    imageSrc: '/icons/build.png',
-    label: 'Build',
-    shortcut: 'B',
-    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',
-    label: 'Furnish',
-    shortcut: 'F',
-    color: 'hover:bg-green-500/20 hover:text-green-400',
-    activeColor: 'bg-green-500/20 text-green-400',
-  },
   {
     id: 'zone',
-    imageSrc: '/icons/zone.png',
+    imageSrc: '/icons/zone.webp',
     label: 'Zone',
     shortcut: 'Z',
     color: 'hover:bg-green-500/20 hover:text-green-400',
@@ -90,7 +44,7 @@ const controls: ControlConfig[] = [
     id: 'delete',
     icon: Trash2,
     label: 'Delete',
-    shortcut: 'D',
+    shortcut: 'X',
     color: 'hover:bg-red-500/20 hover:text-red-400',
     activeColor: 'bg-red-500/20 text-red-400',
   },
@@ -104,58 +58,20 @@ 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
-  // this level the object ref changes but this number doesn't, so Object.is
-  // dedupes and we avoid a re-render.
-  const levelIndex = useScene((state) => {
-    if (!levelId) return null
-    const node = state.nodes[levelId]
-    return node?.type === 'level' ? (node as LevelNode).level : null
-  })
 
   const isSiteEditing = phase === 'site'
-  const isGroundFloor = levelIndex === 0
-  const canEnterSiteEdit = isGroundFloor || isSiteEditing
 
   const structureLayer = useEditor((state) => state.structureLayer)
 
   const getIsActive = (id: ControlId): boolean => {
-    if (isSiteEditing) return id === 'site-edit'
     if (id === 'select') return mode === 'select' && selectionTool === 'click'
     if (id === 'box-select') return mode === 'select' && selectionTool === 'marquee'
-    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'
     return mode === id
   }
 
   const handleClick = (id: ControlId) => {
-    if (id === 'site-edit') {
-      if (isSiteEditing) {
-        // Toggle off → back to structure/select
-        setPhase('structure')
-        setMode('select')
-        setStructureLayer('elements')
-      } else if (isGroundFloor) {
-        // Enter site editing — set state directly to preserve level selection.
-        // setPhase('site') calls viewer.resetSelection() which clears levelId,
-        // breaking the 2D floorplan (it needs a level to render the SVG).
-        useEditor.setState({ phase: 'site', mode: 'select', tool: null, catalogCategory: null })
-        // Clear object selection so the polygon editor handles receive pointer events
-        useViewer.getState().setSelection({ selectedIds: [] })
-      }
-      return
-    }
-
     // Exit site editing first if needed
     if (isSiteEditing) {
       setPhase('structure')
@@ -168,33 +84,6 @@ export function ControlModes() {
     } else if (id === 'box-select') {
       setMode('select')
       setSelectionTool('marquee')
-    } else if (id === 'build') {
-      // Toggle: if already in structure build, go back to select
-      if (getIsActive('build')) {
-        setMode('select')
-      } else {
-        setPhase('structure')
-        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')
-      } else {
-        setPhase('furnish')
-        setMode('build')
-        // Auto-switch sidebar to the items panel so the user can pick furniture
-        useEditor.getState().setActiveSidebarPanel('items')
-      }
     } else if (id === 'zone') {
       if (getIsActive('zone')) {
         setMode('select')
@@ -213,64 +102,45 @@ export function ControlModes() {
       {controls.map((c) => {
         const ModeIcon = c.icon
         const isImageMode = Boolean(c.imageSrc)
-        const isSiteButton = c.id === 'site-edit'
         const isActive = getIsActive(c.id)
-        const isDisabled = isSiteButton && !canEnterSiteEdit
 
         return (
-          <ActionButton
-            className={cn(
-              'group text-muted-foreground',
-              isSiteButton
-                ? isActive
-                  ? c.activeColor
-                  : canEnterSiteEdit
-                    ? 'opacity-60 grayscale hover:bg-white/5 hover:opacity-100 hover:grayscale-0'
-                    : 'cursor-not-allowed opacity-35 grayscale'
-                : !(isImageMode || isActive) && c.color,
-              !(isSiteButton || isImageMode) && isActive && c.activeColor,
-              !isSiteButton && isImageMode && isActive && 'bg-white/10 hover:bg-white/10',
-              !isSiteButton && isImageMode && !isActive && 'hover:bg-white/5',
-            )}
-            disabled={isDisabled}
-            key={c.id}
-            label={
-              isSiteButton
-                ? isActive
-                  ? 'Exit site editing'
-                  : canEnterSiteEdit
-                    ? 'Edit site'
-                    : 'Site editing (ground level only)'
-                : c.label
-            }
-            onClick={() => handleClick(c.id)}
-            shortcut={c.shortcut}
-            size="icon"
-            variant="ghost"
-          >
-            {c.imageSrc ? (
-              <Image
-                alt={c.label}
-                className={cn(
-                  'h-[28px] w-[28px] object-contain transition-[opacity,filter] duration-200',
-                  isSiteButton
-                    ? isActive
-                      ? 'opacity-100 grayscale-0'
-                      : ''
-                    : isActive
+          <Fragment key={c.id}>
+            {c.id === 'delete' ? <MeasurementControl /> : null}
+            <ActionButton
+              className={cn(
+                'group text-muted-foreground',
+                !(isImageMode || isActive) && c.color,
+                !isImageMode && isActive && c.activeColor,
+                isImageMode && isActive && 'bg-white/10 hover:bg-white/10',
+                isImageMode && !isActive && 'hover:bg-white/5',
+              )}
+              label={c.label}
+              onClick={() => handleClick(c.id)}
+              shortcut={c.shortcut}
+              size="icon"
+              variant="ghost"
+            >
+              {c.imageSrc ? (
+                <Image
+                  alt={c.label}
+                  className={cn(
+                    'h-[28px] w-[28px] object-contain transition-[opacity,filter] duration-200',
+                    isActive
                       ? 'opacity-100 grayscale-0'
                       : 'opacity-60 grayscale group-hover:opacity-100 group-hover:grayscale-0',
-                )}
-                height={28}
-                src={c.imageSrc}
-                width={28}
-              />
-            ) : c.iconifyIcon ? (
-              <Icon color="currentColor" height={18} icon={c.iconifyIcon} width={18} />
-            ) : (
-              ModeIcon && <ModeIcon className="h-5 w-5" />
-            )}
-          </ActionButton>
+                  )}
+                  height={28}
+                  src={c.imageSrc}
+                  width={28}
+                />
+              ) : c.iconifyIcon ? (
+                <Icon color="currentColor" height={18} icon={c.iconifyIcon} width={18} />
+              ) : (
+                ModeIcon && <ModeIcon className="h-5 w-5" />
+              )}
+            </ActionButton>
+          </Fragment>
         )
       })}
     </div>

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

@@ -8,9 +8,9 @@ export type FurnishToolConfig = {
 }
 
 export const furnishTools: FurnishToolConfig[] = [
-  { id: 'item', iconSrc: '/icons/couch.png', label: 'Furniture', catalogCategory: 'furniture' },
-  { id: 'item', iconSrc: '/icons/appliance.png', label: 'Appliance', catalogCategory: 'appliance' },
-  { id: 'item', iconSrc: '/icons/kitchen.png', label: 'Kitchen', catalogCategory: 'kitchen' },
-  { id: 'item', iconSrc: '/icons/bathroom.png', label: 'Bathroom', catalogCategory: 'bathroom' },
-  { id: 'item', iconSrc: '/icons/tree.png', label: 'Outdoor', catalogCategory: 'outdoor' },
+  { id: 'item', iconSrc: '/icons/couch.webp', label: 'Furniture', catalogCategory: 'furniture' },
+  { id: 'item', iconSrc: '/icons/appliance.webp', label: 'Appliance', catalogCategory: 'appliance' },
+  { id: 'item', iconSrc: '/icons/kitchen.webp', label: 'Kitchen', catalogCategory: 'kitchen' },
+  { id: 'item', iconSrc: '/icons/bathroom.webp', label: 'Bathroom', catalogCategory: 'bathroom' },
+  { id: 'item', iconSrc: '/icons/tree.webp', label: 'Outdoor', catalogCategory: 'outdoor' },
 ]

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

@@ -1,67 +1,22 @@
 '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 { motion } from 'motion/react'
 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 { CameraActions } from './camera-actions'
 import { ControlModes } from './control-modes'
-import { StructureTools } from './structure-tools'
-import { GridSnapControl, SecondaryToggles } from './view-toggles'
+import { 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))
@@ -70,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.
@@ -97,81 +51,14 @@ export function ActionMenu({ className }: { className?: string }) {
         style={isMobile ? { bottom: MOBILE_BOTTOM_OFFSET } : undefined}
         transition={transition}
       >
-        {/* 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>
         {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) */}
+            {/* Row 2: 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>
@@ -179,7 +66,6 @@ export function ActionMenu({ className }: { className?: string }) {
           <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 />