@pascal-app/editor 0.4.0

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

@@ -0,0 +1,59 @@
+import * as React from 'react'
+import { Button } from './../../../components/ui/primitives/button'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from './../../../components/ui/primitives/tooltip'
+import { cn } from './../../../lib/utils'
+
+interface ActionButtonProps extends React.ComponentProps<typeof Button> {
+  label: string
+  shortcut?: string
+  isActive?: boolean
+  tooltipContent?: React.ReactNode
+  tooltipSide?: 'top' | 'right' | 'bottom' | 'left'
+}
+
+export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(
+  (
+    { className, children, label, shortcut, isActive, tooltipContent, tooltipSide, ...props },
+    ref,
+  ) => {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            className={cn('relative h-11 w-11 transition-all', className)}
+            ref={ref}
+            {...props}
+          >
+            <div
+              className={cn(
+                'flex h-full w-full items-center justify-center transition-transform',
+                shortcut && '-translate-x-0.5 -translate-y-0.5',
+              )}
+            >
+              {children}
+            </div>
+            {shortcut && (
+              <div className="absolute right-1 bottom-1 rounded border border-border/40 bg-background/40 px-1 py-[2px] backdrop-blur-md">
+                <span className="block font-medium font-mono text-[9px] text-muted-foreground/70 leading-none">
+                  {shortcut}
+                </span>
+              </div>
+            )}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side={tooltipSide}>
+          {tooltipContent || (
+            <p>
+              {label} {shortcut && `(${shortcut})`}
+            </p>
+          )}
+        </TooltipContent>
+      </Tooltip>
+    )
+  },
+)
+ActionButton.displayName = 'ActionButton'

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

@@ -0,0 +1,74 @@
+'use client'
+
+import { emitter } from '@pascal-app/core'
+import Image from 'next/image'
+import { ActionButton } from './action-button'
+
+export function CameraActions() {
+  const goToTopView = () => {
+    emitter.emit('camera-controls:top-view')
+  }
+
+  const orbitCW = () => {
+    emitter.emit('camera-controls:orbit-cw')
+  }
+
+  const orbitCCW = () => {
+    emitter.emit('camera-controls:orbit-ccw')
+  }
+
+  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>
+
+      {/* 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
+        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>
+    </div>
+  )
+}

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

@@ -0,0 +1,240 @@
+'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 { 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 ControlConfig = {
+  id: ControlId
+  icon?: LucideIcon
+  iconifyIcon?: string
+  imageSrc?: string
+  label: string
+  shortcut?: string
+  color: string
+  activeColor: string
+}
+
+// Fixed set of controls — always visible, never morphs
+const controls: ControlConfig[] = [
+  {
+    id: 'select',
+    imageSrc: '/icons/select.png',
+    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: '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',
+    label: 'Zone',
+    shortcut: 'Z',
+    color: 'hover:bg-green-500/20 hover:text-green-400',
+    activeColor: 'bg-green-500/20 text-green-400',
+  },
+  {
+    id: 'delete',
+    icon: Trash2,
+    label: 'Delete',
+    shortcut: 'D',
+    color: 'hover:bg-red-500/20 hover:text-red-400',
+    activeColor: 'bg-red-500/20 text-red-400',
+  },
+]
+
+export function ControlModes() {
+  const mode = useEditor((state) => state.mode)
+  const phase = useEditor((state) => state.phase)
+  const selectionTool = useEditor((state) => state.floorplanSelectionTool)
+  const setMode = useEditor((state) => state.setMode)
+  const setPhase = useEditor((state) => state.setPhase)
+  const setStructureLayer = useEditor((state) => state.setStructureLayer)
+  const setSelectionTool = useEditor((state) => state.setFloorplanSelectionTool)
+  const levelId = useViewer((s) => s.selection.levelId)
+
+  const levelNode = useScene((state) =>
+    levelId ? (state.nodes[levelId] as LevelNode | undefined) : undefined,
+  )
+
+  const isSiteEditing = phase === 'site'
+  const isGroundFloor = levelNode?.type === 'level' && levelNode.level === 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 === '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 })
+      }
+      return
+    }
+
+    // Exit site editing first if needed
+    if (isSiteEditing) {
+      setPhase('structure')
+      setStructureLayer('elements')
+    }
+
+    if (id === 'select') {
+      setMode('select')
+      setSelectionTool('click')
+    } 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 === 'furnish') {
+      if (getIsActive('furnish')) {
+        setMode('select')
+      } else {
+        setPhase('furnish')
+        setMode('build')
+      }
+    } else if (id === 'zone') {
+      if (getIsActive('zone')) {
+        setMode('select')
+      } else {
+        setPhase('structure')
+        setStructureLayer('zones')
+        setMode('build')
+      }
+    } else {
+      setMode(id)
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-1">
+      {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
+                      ? '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>
+        )
+      })}
+    </div>
+  )
+}

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

@@ -0,0 +1,102 @@
+'use client'
+
+import NextImage from 'next/image'
+import { cn } from './../../../lib/utils'
+import useEditor, { type CatalogCategory } from './../../../store/use-editor'
+import { ActionButton } from './action-button'
+
+export type FurnishToolConfig = {
+  id: 'item'
+  iconSrc: string
+  label: string
+  catalogCategory: CatalogCategory
+}
+
+// Furnish mode tools: furniture, appliances, decoration (painting is now a control mode)
+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',
+  },
+]
+
+export function FurnishTools() {
+  const mode = useEditor((state) => state.mode)
+  const activeTool = useEditor((state) => state.tool)
+  const setActiveTool = useEditor((state) => state.setTool)
+  const setMode = useEditor((state) => state.setMode)
+  const catalogCategory = useEditor((state) => state.catalogCategory)
+  const setCatalogCategory = useEditor((state) => state.setCatalogCategory)
+
+  const hasActiveTool = furnishTools.some(
+    (tool) => mode === 'build' && activeTool === 'item' && catalogCategory === tool.catalogCategory,
+  )
+
+  return (
+    <div className="flex items-center gap-1.5 px-1">
+      {furnishTools.map((tool, index) => {
+        // For item tools with catalog category, check both tool and category match
+        const isActive =
+          mode === 'build' && activeTool === 'item' && catalogCategory === tool.catalogCategory
+
+        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) {
+                setCatalogCategory(tool.catalogCategory)
+                setActiveTool('item')
+                if (mode !== 'build') {
+                  setMode('build')
+                }
+              }
+            }}
+            size="icon"
+            variant="ghost"
+          >
+            <NextImage
+              alt={tool.label}
+              className="size-full object-contain"
+              height={28}
+              src={tool.iconSrc}
+              width={28}
+            />
+          </ActionButton>
+        )
+      })}
+    </div>
+  )
+}

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

@@ -0,0 +1,152 @@
+'use client'
+
+import { AnimatePresence, motion } from 'motion/react'
+import { TooltipProvider } from './../../../components/ui/primitives/tooltip'
+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'
+
+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 reducedMotion = useReducedMotion()
+  const transition = reducedMotion
+    ? { duration: 0 }
+    : { type: 'spring' as const, bounce: 0.2, duration: 0.4 }
+
+  return (
+    <TooltipProvider>
+      <motion.div
+        className={cn(
+          'fixed bottom-6 left-1/2 z-50 -translate-x-1/2',
+          'rounded-2xl border border-border bg-background/90 shadow-2xl backdrop-blur-md',
+          'transition-colors duration-200 ease-out',
+          className,
+        )}
+        layout
+        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>
+        {/* 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>
+      </motion.div>
+    </TooltipProvider>
+  )
+}