@pascal-app/editor 0.6.0 → 0.8.0

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

@@ -11,9 +11,11 @@ import {
   normalizeWallCurveOffset,
   useScene,
 } from '@pascal-app/core'
+
 import { useViewer } from '@pascal-app/viewer'
 import { Move, Spline } from 'lucide-react'
 import { useCallback } from 'react'
+
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
 import { ActionButton, ActionGroup } from '../controls/action-button'
@@ -83,34 +85,6 @@ export function FencePanel() {
     setSelection({ selectedIds: [] })
   }, [setSelection])
 
-  const handleMove = useCallback(() => {
-    if (!node) return
-    sfxEmitter.emit('sfx:item-pick')
-    setMovingNode(node)
-    setSelection({ selectedIds: [] })
-  }, [node, setMovingNode, setSelection])
-
-  const handleCurve = useCallback(() => {
-    if (!node) return
-    sfxEmitter.emit('sfx:item-pick')
-    setCurvingFence(node)
-    setSelection({ selectedIds: [] })
-  }, [node, setCurvingFence, setSelection])
-
-  const handleMaterialPresetChange = useCallback(
-    (materialPreset: string) => {
-      handleUpdate({ materialPreset, material: undefined })
-    },
-    [handleUpdate],
-  )
-
-  const handleCustomMaterialChange = useCallback(
-    (material: MaterialSchema) => {
-      handleUpdate({ material, materialPreset: undefined })
-    },
-    [handleUpdate],
-  )
-
   if (!(node && node.type === 'fence' && selectedId && selectedCount === 1)) return null
 
   const length = getWallCurveLength(node)
@@ -243,27 +217,6 @@ export function FencePanel() {
           value={node.edgeInset}
         />
       </PanelSection>
-
-      <PanelSection title="Material">
-        <MaterialPicker
-          nodeType="fence"
-          onChange={handleCustomMaterialChange}
-          onSelectMaterialPreset={handleMaterialPresetChange}
-          selectedMaterialPreset={node.materialPreset}
-          value={node.material}
-        />
-      </PanelSection>
-
-      <PanelSection title="Actions">
-        <ActionGroup>
-          <ActionButton icon={<Move className="h-3.5 w-3.5" />} label="Move" onClick={handleMove} />
-          <ActionButton
-            icon={<Spline className="h-3.5 w-3.5" />}
-            label="Curve"
-            onClick={handleCurve}
-          />
-        </ActionGroup>
-      </PanelSection>
     </PanelWrapper>
   )
 }

package/src/components/ui/panels/mobile-panel-sheet.tsx

@@ -0,0 +1,108 @@
+'use client'
+
+import { X } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
+import Image from 'next/image'
+import { type ReactNode, useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import useEditor from '../../../store/use-editor'
+
+interface MobilePanelSheetProps {
+  open: boolean
+  onClose: () => void
+  icon?: string
+  title: string
+  children: ReactNode
+}
+
+const HEIGHT_VH = 50
+const DRAG_CLOSE_THRESHOLD_PX = 120
+
+export function MobilePanelSheet({ open, onClose, icon, title, children }: MobilePanelSheetProps) {
+  const [mounted, setMounted] = useState(false)
+  const setMobilePanelSheetHeight = useEditor((s) => s.setMobilePanelSheetHeight)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  // Publish the sheet's pixel height to the shared store so the mobile layout
+  // can shrink the viewer container and preview edits live. 0 means closed.
+  // Tracks visualViewport so the value follows the on-screen keyboard on iOS.
+  useEffect(() => {
+    if (!open) {
+      setMobilePanelSheetHeight(0)
+      return
+    }
+    const compute = () => {
+      const vh = window.visualViewport?.height ?? window.innerHeight
+      setMobilePanelSheetHeight(Math.round((vh * HEIGHT_VH) / 100))
+    }
+    compute()
+    const vv = window.visualViewport
+    vv?.addEventListener('resize', compute)
+    window.addEventListener('resize', compute)
+    return () => {
+      vv?.removeEventListener('resize', compute)
+      window.removeEventListener('resize', compute)
+      setMobilePanelSheetHeight(0)
+    }
+  }, [open, setMobilePanelSheetHeight])
+
+  if (!mounted) return null
+
+  return createPortal(
+    <AnimatePresence>
+      {open && (
+        <motion.div
+          animate={{ y: 0 }}
+          className="dark fixed right-0 bottom-0 left-0 z-[60] flex flex-col overflow-hidden rounded-t-2xl bg-sidebar text-sidebar-foreground shadow-[0_-8px_24px_rgba(0,0,0,0.24)]"
+          drag="y"
+          dragConstraints={{ top: 0, bottom: 0 }}
+          dragElastic={{ top: 0, bottom: 0.4 }}
+          exit={{ y: '100%' }}
+          initial={{ y: '100%' }}
+          onDragEnd={(_, info) => {
+            if (info.offset.y > DRAG_CLOSE_THRESHOLD_PX) onClose()
+          }}
+          style={{ height: `${HEIGHT_VH}dvh` }}
+          transition={{ type: 'spring', stiffness: 320, damping: 32, mass: 0.8 }}
+        >
+          <div className="flex h-6 shrink-0 cursor-grab touch-none items-center justify-center active:cursor-grabbing">
+            <div className="h-1 w-10 rounded-full bg-muted-foreground/40" />
+          </div>
+
+          <div className="flex shrink-0 items-center justify-between border-border/50 border-b px-3 pt-1 pb-3">
+            <div className="flex min-w-0 items-center gap-2">
+              {icon && (
+                <Image
+                  alt=""
+                  className="shrink-0 object-contain"
+                  height={18}
+                  src={icon}
+                  width={18}
+                />
+              )}
+              <h2 className="truncate font-semibold text-foreground text-sm tracking-tight">
+                {title}
+              </h2>
+            </div>
+            <button
+              aria-label="Close"
+              className="flex h-8 w-8 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 className="no-scrollbar flex min-h-0 flex-1 flex-col overflow-y-auto">
+            {children}
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>,
+    document.body,
+  )
+}

package/src/components/ui/panels/mobile-selection-bar.tsx

@@ -0,0 +1,100 @@
+'use client'
+
+import type { AnyNode } from '@pascal-app/core'
+import { Copy, Move, SlidersHorizontal, Trash2 } from 'lucide-react'
+import Image from 'next/image'
+import type { MouseEventHandler } from 'react'
+import { cn } from '../../../lib/utils'
+import { getNodeDisplay } from './node-display'
+
+interface MobileSelectionBarProps {
+  node: AnyNode
+  onMove: () => void
+  onDuplicate: () => void
+  onDelete: () => void
+  onEdit: () => void
+}
+
+const ACTION_BTN =
+  'flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-white/8 hover:text-foreground'
+
+export function MobileSelectionBar({
+  node,
+  onMove,
+  onDuplicate,
+  onDelete,
+  onEdit,
+}: MobileSelectionBarProps) {
+  const { icon, label } = getNodeDisplay(node)
+
+  const stop: MouseEventHandler<HTMLButtonElement> = (e) => e.stopPropagation()
+
+  return (
+    <div className="pointer-events-auto absolute right-3 bottom-6 left-3 z-50 flex h-12 items-stretch gap-1 rounded-2xl border border-border/50 bg-background/95 px-2 shadow-2xl backdrop-blur-xl">
+      <button
+        aria-label={`Edit ${label}`}
+        className={cn(
+          'flex min-w-0 flex-1 items-center gap-2 rounded-lg px-2 text-left transition-colors hover:bg-white/8',
+        )}
+        onClick={onEdit}
+        type="button"
+      >
+        <Image
+          alt=""
+          className="shrink-0 rounded object-contain"
+          height={20}
+          src={icon}
+          width={20}
+        />
+        <span className="truncate font-medium text-foreground text-sm">{label}</span>
+      </button>
+
+      <div className="flex items-center gap-0.5 border-border/40 border-l pl-1">
+        <button
+          aria-label="Move"
+          className={ACTION_BTN}
+          onClick={(e) => {
+            stop(e)
+            onMove()
+          }}
+          type="button"
+        >
+          <Move className="h-4 w-4" />
+        </button>
+        <button
+          aria-label="Duplicate"
+          className={ACTION_BTN}
+          onClick={(e) => {
+            stop(e)
+            onDuplicate()
+          }}
+          type="button"
+        >
+          <Copy className="h-4 w-4" />
+        </button>
+        <button
+          aria-label="Delete"
+          className={cn(ACTION_BTN, 'hover:bg-red-500/15 hover:text-red-400')}
+          onClick={(e) => {
+            stop(e)
+            onDelete()
+          }}
+          type="button"
+        >
+          <Trash2 className="h-4 w-4" />
+        </button>
+        <button
+          aria-label="Edit properties"
+          className={ACTION_BTN}
+          onClick={(e) => {
+            stop(e)
+            onEdit()
+          }}
+          type="button"
+        >
+          <SlidersHorizontal className="h-4 w-4" />
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/components/ui/panels/node-display.ts

@@ -0,0 +1,39 @@
+import type { AnyNode } from '@pascal-app/core'
+
+export type NodeDisplay = {
+  icon: string
+  label: string
+}
+
+const TYPE_DEFAULTS: Record<string, NodeDisplay> = {
+  item: { icon: '/icons/furniture.png', label: 'Item' },
+  wall: { icon: '/icons/wall.png', label: 'Wall' },
+  door: { icon: '/icons/door.png', label: 'Door' },
+  window: { icon: '/icons/window.png', label: 'Window' },
+  slab: { icon: '/icons/floor.png', label: 'Slab' },
+  ceiling: { icon: '/icons/ceiling.png', label: 'Ceiling' },
+  column: { icon: '/icons/column.png', label: 'Column' },
+  fence: { icon: '/icons/fence.png', label: 'Fence' },
+  roof: { icon: '/icons/roof.png', label: 'Roof' },
+  'roof-segment': { icon: '/icons/roof.png', label: 'Roof segment' },
+  stair: { icon: '/icons/stair.png', label: 'Stair' },
+  'stair-segment': { icon: '/icons/stair.png', label: 'Stair segment' },
+  scan: { icon: '/icons/mesh.png', label: '3D Scan' },
+  guide: { icon: '/icons/floorplan.png', label: 'Guide image' },
+}
+
+export function getNodeDisplay(node: AnyNode | null | undefined): NodeDisplay {
+  if (!node) return { icon: '/icons/select.png', label: 'Selection' }
+  const fallback = TYPE_DEFAULTS[node.type] ?? { icon: '/icons/select.png', label: node.type }
+  // Item nodes carry an asset with its own thumbnail/name
+  if (node.type === 'item') {
+    return {
+      icon: node.asset?.thumbnail || fallback.icon,
+      label: node.name || node.asset?.name || fallback.label,
+    }
+  }
+  return {
+    icon: fallback.icon,
+    label: node.name || fallback.label,
+  }
+}

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

@@ -0,0 +1,163 @@
+'use client'
+
+import useEditor from '../../../store/use-editor'
+import { PanelSection } from '../controls/panel-section'
+import { Input } from '../primitives/input'
+import { PanelWrapper } from './panel-wrapper'
+
+function buildDefaultCustomMaterial() {
+  return {
+    preset: 'custom' as const,
+    properties: {
+      color: '#ffffff',
+      roughness: 0.5,
+      metalness: 0,
+      opacity: 1,
+      transparent: false,
+      side: 'front' as const,
+    },
+  }
+}
+
+export function PaintPanel() {
+  const activePaintMaterial = useEditor((state) => state.activePaintMaterial)
+  const activePaintTarget = useEditor((state) => state.activePaintTarget)
+  const setActivePaintMaterial = useEditor((state) => state.setActivePaintMaterial)
+  const setPaintPanelOpen = useEditor((state) => state.setPaintPanelOpen)
+
+  const customMaterial =
+    activePaintMaterial?.material?.properties && !activePaintMaterial.materialPreset
+      ? activePaintMaterial.material
+      : null
+
+  if (!customMaterial) return null
+
+  const currentProps = customMaterial.properties ?? buildDefaultCustomMaterial().properties
+
+  const updateCustomMaterial = (
+    updates: Partial<typeof currentProps>,
+    nextTransparent = currentProps.transparent,
+  ) => {
+    setActivePaintMaterial({
+      material: {
+        preset: 'custom',
+        properties: {
+          ...currentProps,
+          ...updates,
+          transparent: nextTransparent,
+        },
+      },
+      sourceTarget: activePaintMaterial?.sourceTarget ?? activePaintTarget,
+    })
+  }
+
+  return (
+    <PanelWrapper onClose={() => setPaintPanelOpen(false)} title="Material" width={320}>
+      <PanelSection title="Custom Material">
+        <div className="space-y-3">
+          <div className="space-y-2">
+            <label className="block font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
+              Color
+            </label>
+            <div className="flex items-center gap-2">
+              <input
+                className="h-10 w-14 cursor-pointer rounded-md border border-input bg-transparent"
+                onChange={(e) => updateCustomMaterial({ color: e.target.value })}
+                type="color"
+                value={currentProps.color}
+              />
+              <Input
+                onChange={(e) => updateCustomMaterial({ color: e.target.value })}
+                value={currentProps.color}
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <label className="font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
+                Roughness
+              </label>
+              <span className="font-mono text-muted-foreground text-xs">
+                {currentProps.roughness.toFixed(2)}
+              </span>
+            </div>
+            <input
+              className="h-2 w-full cursor-pointer appearance-none rounded-full bg-accent"
+              max={1}
+              min={0}
+              onChange={(e) =>
+                updateCustomMaterial({ roughness: Number.parseFloat(e.target.value) })
+              }
+              step={0.01}
+              type="range"
+              value={currentProps.roughness}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <label className="font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
+                Metalness
+              </label>
+              <span className="font-mono text-muted-foreground text-xs">
+                {currentProps.metalness.toFixed(2)}
+              </span>
+            </div>
+            <input
+              className="h-2 w-full cursor-pointer appearance-none rounded-full bg-accent"
+              max={1}
+              min={0}
+              onChange={(e) =>
+                updateCustomMaterial({ metalness: Number.parseFloat(e.target.value) })
+              }
+              step={0.01}
+              type="range"
+              value={currentProps.metalness}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <label className="font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
+                Opacity
+              </label>
+              <span className="font-mono text-muted-foreground text-xs">
+                {currentProps.opacity.toFixed(2)}
+              </span>
+            </div>
+            <input
+              className="h-2 w-full cursor-pointer appearance-none rounded-full bg-accent"
+              max={1}
+              min={0}
+              onChange={(e) => {
+                const opacity = Number.parseFloat(e.target.value)
+                updateCustomMaterial({ opacity }, opacity < 1 || currentProps.transparent)
+              }}
+              step={0.01}
+              type="range"
+              value={currentProps.opacity}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label className="block font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
+              Side
+            </label>
+            <select
+              className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:bg-input/30"
+              onChange={(e) =>
+                updateCustomMaterial({ side: e.target.value as 'front' | 'back' | 'double' })
+              }
+              value={currentProps.side}
+            >
+              <option value="front">Front</option>
+              <option value="back">Back</option>
+              <option value="double">Double</option>
+            </select>
+          </div>
+        </div>
+      </PanelSection>
+    </PanelWrapper>
+  )
+}