@pascal-app/editor 0.6.0 → 0.8.0

package/src/components/ui/panels/panel-manager.tsx

@@ -1,24 +1,204 @@
 'use client'
 
-import { type AnyNodeId, useScene } from '@pascal-app/core'
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type BuildingNode,
+  type CeilingNode,
+  type ColumnNode,
+  type DoorNode,
+  type FenceNode,
+  type ItemNode,
+  type RoofNode,
+  type RoofSegmentNode,
+  type SlabNode,
+  type StairNode,
+  type StairSegmentNode,
+  useScene,
+  type WallNode,
+  type WindowNode,
+} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
+import { useCallback, useEffect, useState } from 'react'
+import { useIsMobile } from '../../../hooks/use-mobile'
+import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
 import { CeilingPanel } from './ceiling-panel'
+import { ColumnPanel } from './column-panel'
 import { DoorPanel } from './door-panel'
 import { FencePanel } from './fence-panel'
 import { ItemPanel } from './item-panel'
+import { MobilePanelSheet } from './mobile-panel-sheet'
+import { MobileSelectionBar } from './mobile-selection-bar'
+import { getNodeDisplay } from './node-display'
+import { PaintPanel } from './paint-panel'
 import { ReferencePanel } from './reference-panel'
 import { RoofPanel } from './roof-panel'
 import { RoofSegmentPanel } from './roof-segment-panel'
 import { SlabPanel } from './slab-panel'
+import { SpawnPanel } from './spawn-panel'
 import { StairPanel } from './stair-panel'
 import { StairSegmentPanel } from './stair-segment-panel'
 import { WallPanel } from './wall-panel'
 import { WindowPanel } from './window-panel'
 
+type MovableNode =
+  | ItemNode
+  | WindowNode
+  | DoorNode
+  | CeilingNode
+  | ColumnNode
+  | SlabNode
+  | WallNode
+  | FenceNode
+  | RoofNode
+  | RoofSegmentNode
+  | StairNode
+  | StairSegmentNode
+  | BuildingNode
+
+const MOVABLE_TYPES = new Set<string>([
+  'item',
+  'window',
+  'door',
+  'ceiling',
+  'column',
+  'slab',
+  'wall',
+  'fence',
+  'roof',
+  'roof-segment',
+  'stair',
+  'stair-segment',
+  'building',
+])
+
+function isMovableNode(node: AnyNode | null): node is MovableNode {
+  return !!node && MOVABLE_TYPES.has(node.type)
+}
+
+function panelForType(type: string | null) {
+  if (!type) return null
+  switch (type) {
+    case 'item':
+      return <ItemPanel />
+    case 'roof':
+      return <RoofPanel />
+    case 'roof-segment':
+      return <RoofSegmentPanel />
+    case 'stair':
+      return <StairPanel />
+    case 'stair-segment':
+      return <StairSegmentPanel />
+    case 'slab':
+      return <SlabPanel />
+    case 'spawn':
+      return <SpawnPanel />
+    case 'ceiling':
+      return <CeilingPanel />
+    case 'column':
+      return <ColumnPanel />
+    case 'wall':
+      return <WallPanel />
+    case 'fence':
+      return <FencePanel />
+    case 'door':
+      return <DoorPanel />
+    case 'window':
+      return <WindowPanel />
+    default:
+      return null
+  }
+}
+
+function MobilePanelLayer({
+  node,
+  panel,
+  isReference,
+}: {
+  node: AnyNode | null
+  panel: React.ReactNode
+  isReference: boolean
+}) {
+  const setSelection = useViewer((s) => s.setSelection)
+  const setSelectedReferenceId = useEditor((s) => s.setSelectedReferenceId)
+  const setMovingNode = useEditor((s) => s.setMovingNode)
+  const deleteNode = useScene((s) => s.deleteNode)
+  const [isSheetOpen, setIsSheetOpen] = useState(false)
+
+  // Reset sheet open state when the selection changes / clears
+  const selectionKey = node?.id ?? (isReference ? 'reference' : null)
+  useEffect(() => {
+    setIsSheetOpen(false)
+  }, [selectionKey])
+
+  const clearSelection = useCallback(() => {
+    setSelection({ selectedIds: [] })
+    setSelectedReferenceId(null)
+  }, [setSelection, setSelectedReferenceId])
+
+  const handleMove = useCallback(() => {
+    if (!isMovableNode(node)) return
+    sfxEmitter.emit('sfx:item-pick')
+    setMovingNode(node)
+    clearSelection()
+  }, [node, setMovingNode, clearSelection])
+
+  const handleDuplicate = useCallback(() => {
+    if (!isMovableNode(node)) return
+    sfxEmitter.emit('sfx:item-pick')
+    const cloned = structuredClone(node) as MovableNode & { id?: AnyNodeId }
+    delete (cloned as { id?: AnyNodeId }).id
+    const prevMeta =
+      cloned.metadata && typeof cloned.metadata === 'object' && !Array.isArray(cloned.metadata)
+        ? (cloned.metadata as Record<string, unknown>)
+        : {}
+    cloned.metadata = { ...prevMeta, isNew: true }
+    setMovingNode(cloned as MovableNode)
+    clearSelection()
+  }, [node, setMovingNode, clearSelection])
+
+  const handleDelete = useCallback(() => {
+    if (!node) return
+    sfxEmitter.emit('sfx:item-delete')
+    deleteNode(node.id)
+    clearSelection()
+  }, [node, deleteNode, clearSelection])
+
+  if (!(node || isReference)) return null
+
+  const display = getNodeDisplay(node)
+
+  return (
+    <>
+      {node && (
+        <MobileSelectionBar
+          node={node}
+          onDelete={handleDelete}
+          onDuplicate={handleDuplicate}
+          onEdit={() => setIsSheetOpen((v) => !v)}
+          onMove={handleMove}
+        />
+      )}
+      <MobilePanelSheet
+        icon={display.icon}
+        onClose={() => setIsSheetOpen(false)}
+        open={isSheetOpen}
+        title={display.label}
+      >
+        {panel}
+      </MobilePanelSheet>
+    </>
+  )
+}
+
 export function PanelManager() {
+  const isMobile = useIsMobile()
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const selectedReferenceId = useEditor((s) => s.selectedReferenceId)
+  const isPaintPanelOpen = useEditor((s) => s.isPaintPanelOpen)
+  const mode = useEditor((s) => s.mode)
+  const activePaintMaterial = useEditor((s) => s.activePaintMaterial)
   // Only subscribe to the *type* of the single-selected node — string primitive
   // so we don't re-render on unrelated scene mutations.
   const selectedNodeType = useScene((s) => {
@@ -26,39 +206,39 @@ export function PanelManager() {
     const id = selectedIds[0]
     return id ? (s.nodes[id as AnyNodeId]?.type ?? null) : null
   })
+  const selectedNode = useScene((s) => {
+    if (selectedIds.length !== 1) return null
+    const id = selectedIds[0]
+    return id ? (s.nodes[id as AnyNodeId] ?? null) : null
+  })
+
+  if (isMobile) {
+    if (selectedReferenceId) {
+      return <MobilePanelLayer isReference={true} node={null} panel={<ReferencePanel />} />
+    }
+    return (
+      <MobilePanelLayer
+        isReference={false}
+        node={selectedNode}
+        panel={panelForType(selectedNodeType)}
+      />
+    )
+  }
 
   // Show reference panel if a reference is selected
   if (selectedReferenceId) {
     return <ReferencePanel />
   }
 
-  // Show appropriate panel based on selected node type
-  if (selectedNodeType) {
-    switch (selectedNodeType) {
-      case 'item':
-        return <ItemPanel />
-      case 'roof':
-        return <RoofPanel />
-      case 'roof-segment':
-        return <RoofSegmentPanel />
-      case 'stair':
-        return <StairPanel />
-      case 'stair-segment':
-        return <StairSegmentPanel />
-      case 'slab':
-        return <SlabPanel />
-      case 'ceiling':
-        return <CeilingPanel />
-      case 'wall':
-        return <WallPanel />
-      case 'fence':
-        return <FencePanel />
-      case 'door':
-        return <DoorPanel />
-      case 'window':
-        return <WindowPanel />
-    }
+  if (
+    isPaintPanelOpen &&
+    mode === 'material-paint' &&
+    activePaintMaterial?.material?.properties &&
+    !activePaintMaterial.materialPreset
+  ) {
+    return <PaintPanel />
   }
 
-  return null
+  // Show appropriate panel based on selected node type
+  return panelForType(selectedNodeType)
 }

package/src/components/ui/panels/panel-wrapper.tsx

@@ -2,6 +2,7 @@
 
 import { ChevronLeft, RotateCcw, X } from 'lucide-react'
 import Image from 'next/image'
+import { useIsMobile } from '../../../hooks/use-mobile'
 import { cn } from '../../../lib/utils'
 
 interface PanelWrapperProps {
@@ -25,53 +26,61 @@ export function PanelWrapper({
   className,
   width = 320, // default width
 }: PanelWrapperProps) {
+  const isMobile = useIsMobile()
+
   return (
     <div
       className={cn(
-        'pointer-events-auto fixed top-20 right-4 z-50 flex max-h-[calc(100dvh-100px)] flex-col overflow-hidden rounded-xl border border-border/50 bg-sidebar/95 shadow-2xl backdrop-blur-xl dark:text-foreground',
+        isMobile
+          ? 'flex h-full w-full flex-col overflow-hidden bg-transparent dark:text-foreground'
+          : 'pointer-events-auto fixed top-20 right-4 z-50 flex max-h-[calc(100dvh-100px)] flex-col overflow-hidden rounded-xl border border-border/50 bg-sidebar/95 shadow-2xl backdrop-blur-xl dark:text-foreground',
         className,
       )}
-      style={{ width }}
+      style={isMobile ? undefined : { width }}
     >
-      {/* Header */}
-      <div className="flex items-center justify-between border-border/50 border-b px-3 py-3">
-        <div className="flex items-center gap-2">
-          {onBack && (
-            <button
-              className="mr-1 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-[#3e3e3e] hover:text-foreground"
-              onClick={onBack}
-              type="button"
-            >
-              <ChevronLeft className="h-4 w-4" />
-            </button>
-          )}
-          {icon && (
-            <Image alt="" className="shrink-0 object-contain" height={16} src={icon} width={16} />
-          )}
-          <h2 className="truncate font-semibold text-foreground text-sm tracking-tight">{title}</h2>
-        </div>
+      {/* Header — desktop only; mobile sheet provides its own header */}
+      {!isMobile && (
+        <div className="flex items-center justify-between border-border/50 border-b px-3 py-3">
+          <div className="flex items-center gap-2">
+            {onBack && (
+              <button
+                className="mr-1 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-[#3e3e3e] hover:text-foreground"
+                onClick={onBack}
+                type="button"
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </button>
+            )}
+            {icon && (
+              <Image alt="" className="shrink-0 object-contain" height={16} src={icon} width={16} />
+            )}
+            <h2 className="truncate font-semibold text-foreground text-sm tracking-tight">
+              {title}
+            </h2>
+          </div>
 
-        <div className="flex items-center gap-1">
-          {onReset && (
-            <button
-              className="flex h-7 w-7 items-center justify-center rounded-md bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-[#3e3e3e] hover:text-foreground"
-              onClick={onReset}
-              type="button"
-            >
-              <RotateCcw className="h-4 w-4" />
-            </button>
-          )}
-          {onClose && (
-            <button
-              className="flex h-7 w-7 items-center justify-center rounded-md bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-[#3e3e3e] hover:text-foreground"
-              onClick={onClose}
-              type="button"
-            >
-              <X className="h-4 w-4" />
-            </button>
-          )}
+          <div className="flex items-center gap-1">
+            {onReset && (
+              <button
+                className="flex h-7 w-7 items-center justify-center rounded-md bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-[#3e3e3e] hover:text-foreground"
+                onClick={onReset}
+                type="button"
+              >
+                <RotateCcw className="h-4 w-4" />
+              </button>
+            )}
+            {onClose && (
+              <button
+                className="flex h-7 w-7 items-center justify-center rounded-md bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-[#3e3e3e] hover:text-foreground"
+                onClick={onClose}
+                type="button"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            )}
+          </div>
         </div>
-      </div>
+      )}
 
       {/* Content */}
       <div className="no-scrollbar flex min-h-0 flex-1 flex-col overflow-y-auto">{children}</div>

package/src/components/ui/panels/reference-panel.tsx

@@ -1,21 +1,59 @@
 'use client'
 
-import { type AnyNode, type GuideNode, type ScanNode, useScene } from '@pascal-app/core'
-import { Box, Image as ImageIcon } from 'lucide-react'
-import { useCallback } from 'react'
+import {
+  type AnyNode,
+  type GuideNode,
+  loadAssetUrl,
+  type ScanNode,
+  saveAsset,
+  useScene,
+} from '@pascal-app/core'
+import {
+  Eye,
+  EyeOff,
+  LocateFixed,
+  Lock,
+  RotateCcw,
+  Ruler,
+  Trash2,
+  Unlock,
+  Upload,
+} from 'lucide-react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { guideEmitter } from '../../../lib/guide-events'
+import { getGuideImageName } from '../../../lib/local-guide-image'
 import useEditor from '../../../store/use-editor'
 import { ActionButton, ActionGroup } from '../controls/action-button'
-import { MetricControl } from '../controls/metric-control'
 import { PanelSection } from '../controls/panel-section'
 import { SliderControl } from '../controls/slider-control'
 import { PanelWrapper } from './panel-wrapper'
 
 type ReferenceNode = ScanNode | GuideNode
 
+function getScaleStatus(guide: GuideNode, scaleReferenceVisible: boolean) {
+  const reference = guide.scaleReference
+  if (!reference) {
+    return 'Uncalibrated'
+  }
+
+  return `${scaleReferenceVisible ? 'Scaled' : 'Scaled (hidden)'} · ${reference.label}`
+}
+
 export function ReferencePanel() {
   const selectedReferenceId = useEditor((s) => s.selectedReferenceId)
   const setSelectedReferenceId = useEditor((s) => s.setSelectedReferenceId)
+  const guideUi = useEditor((s) =>
+    selectedReferenceId ? s.guideUi[selectedReferenceId] : undefined,
+  )
+  const setGuideLocked = useEditor((s) => s.setGuideLocked)
+  const setGuideScaleReferenceVisible = useEditor((s) => s.setGuideScaleReferenceVisible)
+  const clearGuideUi = useEditor((s) => s.clearGuideUi)
   const updateNode = useScene((s) => s.updateNode)
+  const deleteNode = useScene((s) => s.deleteNode)
+  const replaceInputRef = useRef<HTMLInputElement>(null)
+  const [isReplacing, setIsReplacing] = useState(false)
+  const [replaceError, setReplaceError] = useState<string | null>(null)
+  const [isAssetMissing, setIsAssetMissing] = useState(false)
 
   const node = useScene((s) =>
     selectedReferenceId
@@ -35,17 +73,227 @@ export function ReferencePanel() {
     setSelectedReferenceId(null)
   }, [setSelectedReferenceId])
 
+  const handleReplaceFile = useCallback(
+    async (file: File) => {
+      if (!(selectedReferenceId && node?.type === 'guide')) {
+        return
+      }
+
+      if (!file.type.startsWith('image/')) {
+        setReplaceError('Choose a PNG, JPEG, or WebP image.')
+        return
+      }
+
+      setIsReplacing(true)
+      setReplaceError(null)
+
+      try {
+        const assetUrl = await saveAsset(file)
+        updateNode(
+          selectedReferenceId as AnyNode['id'],
+          {
+            name: getGuideImageName(file.name),
+            url: assetUrl,
+            scaleReference: null,
+          } as Partial<GuideNode>,
+        )
+        setGuideScaleReferenceVisible(selectedReferenceId, true)
+      } catch {
+        setReplaceError('Could not replace that image.')
+      } finally {
+        setIsReplacing(false)
+      }
+    },
+    [node?.type, selectedReferenceId, setGuideScaleReferenceVisible, updateNode],
+  )
+
+  const handleDeleteGuide = useCallback(() => {
+    if (!(selectedReferenceId && node?.type === 'guide')) {
+      return
+    }
+
+    deleteNode(selectedReferenceId as AnyNode['id'])
+    guideEmitter.emit('guide:deleted', { guideId: selectedReferenceId as GuideNode['id'] })
+    clearGuideUi(selectedReferenceId)
+    setSelectedReferenceId(null)
+  }, [clearGuideUi, deleteNode, node?.type, selectedReferenceId, setSelectedReferenceId])
+
+  const handleStartScale = useCallback(() => {
+    if (node?.type !== 'guide') {
+      return
+    }
+
+    guideEmitter.emit('guide:set-reference-scale', { guideId: node.id })
+  }, [node])
+
+  const handleCancelScale = useCallback(() => {
+    guideEmitter.emit('guide:cancel-reference-scale')
+  }, [])
+
+  useEffect(() => {
+    if (node?.type !== 'guide' || !node.url.startsWith('asset://')) {
+      setIsAssetMissing(false)
+      return
+    }
+
+    let cancelled = false
+    loadAssetUrl(node.url).then((resolvedUrl) => {
+      if (!cancelled) {
+        setIsAssetMissing(!resolvedUrl)
+      }
+    })
+
+    return () => {
+      cancelled = true
+    }
+  }, [node])
+
   if (!node || (node.type !== 'scan' && node.type !== 'guide')) return null
 
   const isScan = node.type === 'scan'
+  const guideLocked = !isScan && guideUi?.locked === true
+  const scaleReferenceVisible = !isScan && guideUi?.scaleReferenceVisible !== false
+  const scaleStatus = isScan ? null : getScaleStatus(node, scaleReferenceVisible)
 
   return (
     <PanelWrapper
-      icon={isScan ? undefined : undefined}
       onClose={handleClose}
       title={node.name || (isScan ? '3D Scan' : 'Guide Image')}
       width={300}
     >
+      {!isScan && (
+        <>
+          <PanelSection title="Image">
+            <input
+              accept="image/*"
+              className="hidden"
+              onChange={(event) => {
+                const file = event.currentTarget.files?.[0]
+                event.currentTarget.value = ''
+                if (file) {
+                  void handleReplaceFile(file)
+                }
+              }}
+              ref={replaceInputRef}
+              type="file"
+            />
+
+            <ActionGroup>
+              <ActionButton
+                disabled={isReplacing}
+                icon={<Upload className="h-3.5 w-3.5" />}
+                label={isReplacing ? 'Replacing...' : 'Replace'}
+                onClick={() => replaceInputRef.current?.click()}
+              />
+              <ActionButton
+                className="text-destructive hover:bg-destructive/10"
+                icon={<Trash2 className="h-3.5 w-3.5" />}
+                label="Delete"
+                onClick={handleDeleteGuide}
+              />
+            </ActionGroup>
+
+            <ActionGroup>
+              <ActionButton
+                icon={
+                  node.visible === false ? (
+                    <EyeOff className="h-3.5 w-3.5" />
+                  ) : (
+                    <Eye className="h-3.5 w-3.5" />
+                  )
+                }
+                label={node.visible === false ? 'Show' : 'Hide'}
+                onClick={() => handleUpdate({ visible: node.visible === false })}
+              />
+              <ActionButton
+                icon={
+                  guideLocked ? (
+                    <Lock className="h-3.5 w-3.5" />
+                  ) : (
+                    <Unlock className="h-3.5 w-3.5" />
+                  )
+                }
+                label={guideLocked ? 'Unlock' : 'Lock'}
+                onClick={() => setGuideLocked(node.id, !guideLocked)}
+              />
+            </ActionGroup>
+
+            {replaceError && (
+              <div className="rounded-md border border-destructive/30 bg-destructive/10 px-2 py-1.5 text-destructive text-xs">
+                {replaceError}
+              </div>
+            )}
+
+            {isAssetMissing && (
+              <div className="rounded-md border border-amber-500/35 bg-amber-500/10 px-2 py-1.5 text-amber-700 text-xs dark:text-amber-300">
+                Overlay image unavailable. Replace the image to restore it.
+              </div>
+            )}
+          </PanelSection>
+
+          <PanelSection title="Reference Scale">
+            <div className="flex items-center gap-2 rounded-md border border-border/50 bg-background/40 px-2.5 py-2 text-sm">
+              <Ruler className="h-4 w-4 shrink-0 text-primary" />
+              <span className="truncate text-muted-foreground">{scaleStatus}</span>
+            </div>
+
+            <ActionGroup>
+              <ActionButton
+                label={node.scaleReference ? 'Edit Scale' : 'Set Scale'}
+                onClick={handleStartScale}
+              />
+              <ActionButton label="Cancel" onClick={handleCancelScale} />
+            </ActionGroup>
+
+            <ActionGroup>
+              <ActionButton
+                disabled={!node.scaleReference}
+                label={scaleReferenceVisible ? 'Hide Scale' : 'Show Scale'}
+                onClick={() => {
+                  if (!node.scaleReference) return
+                  setGuideScaleReferenceVisible(node.id, !scaleReferenceVisible)
+                }}
+              />
+              <ActionButton
+                disabled={!node.scaleReference}
+                label="Clear Scale"
+                onClick={() => handleUpdate({ scaleReference: null } as Partial<GuideNode>)}
+              />
+            </ActionGroup>
+          </PanelSection>
+
+          <PanelSection title="Quick Actions">
+            <ActionGroup>
+              <ActionButton
+                icon={<LocateFixed className="h-3.5 w-3.5" />}
+                label="Center"
+                onClick={() =>
+                  handleUpdate({
+                    position: [0, node.position[1], 0],
+                  } as Partial<GuideNode>)
+                }
+              />
+              <ActionButton
+                icon={<RotateCcw className="h-3.5 w-3.5" />}
+                label="Reset Rotation"
+                onClick={() =>
+                  handleUpdate({
+                    rotation: [node.rotation[0], 0, node.rotation[2]],
+                  } as Partial<GuideNode>)
+                }
+              />
+            </ActionGroup>
+            <ActionGroup>
+              <ActionButton
+                icon={<Ruler className="h-3.5 w-3.5" />}
+                label="Reset Image Scale"
+                onClick={() => handleUpdate({ scale: 1 } as Partial<GuideNode>)}
+              />
+            </ActionGroup>
+          </PanelSection>
+        </>
+      )}
+
       <PanelSection title="Position">
         <SliderControl
           label={