@pascal-app/editor 0.5.1 → 0.7.0

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

@@ -1,32 +1,56 @@
 'use client'
 
-import { type AnyNode, type AnyNodeId, type FenceBaseStyle, type FenceNode, type FenceStyle, useScene } from '@pascal-app/core'
+
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type FenceNode,
+  getClampedWallCurveOffset,
+  getMaxWallCurveOffset,
+  getWallCurveLength,
+  type MaterialSchema,
+  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'
+import { MaterialPicker } from '../controls/material-picker'
 import { PanelSection } from '../controls/panel-section'
 import { SegmentedControl } from '../controls/segmented-control'
 import { SliderControl } from '../controls/slider-control'
 import { PanelWrapper } from './panel-wrapper'
 
-const FENCE_STYLE_OPTIONS: { label: string; value: FenceStyle }[] = [
+type FenceStyleValue = 'slat' | 'rail' | 'privacy'
+type FenceBaseStyleValue = 'grounded' | 'floating'
+
+const FENCE_STYLE_OPTIONS: { label: string; value: FenceStyleValue }[] = [
   { label: 'Slat', value: 'slat' },
   { label: 'Rail', value: 'rail' },
   { label: 'Privacy', value: 'privacy' },
 ]
 
-const FENCE_BASE_STYLE_OPTIONS: { label: string; value: FenceBaseStyle }[] = [
+const FENCE_BASE_STYLE_OPTIONS: { label: string; value: FenceBaseStyleValue }[] = [
   { label: 'Grounded', value: 'grounded' },
   { label: 'Floating', value: 'floating' },
 ]
 
 export function FencePanel() {
-  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const selectedId = useViewer((s) => s.selection.selectedIds[0])
+  const selectedCount = useViewer((s) => s.selection.selectedIds.length)
   const setSelection = useViewer((s) => s.setSelection)
-  const nodes = useScene((s) => s.nodes)
   const updateNode = useScene((s) => s.updateNode)
+  const setMovingNode = useEditor((s) => s.setMovingNode)
+  const setCurvingFence = useEditor((s) => s.setCurvingFence)
 
-  const selectedId = selectedIds[0]
-  const node = selectedId ? (nodes[selectedId as AnyNode['id']] as FenceNode | undefined) : undefined
+  const node = useScene((s) =>
+    selectedId ? (s.nodes[selectedId as AnyNode['id']] as FenceNode | undefined) : undefined,
+  )
 
   const handleUpdate = useCallback(
     (updates: Partial<FenceNode>) => {
@@ -62,14 +86,23 @@ export function FencePanel() {
     setSelection({ selectedIds: [] })
   }, [setSelection])
 
-  if (!node || node.type !== 'fence' || selectedIds.length !== 1) return null
 
-  const dx = node.end[0] - node.start[0]
-  const dz = node.end[1] - node.start[1]
-  const length = Math.sqrt(dx * dx + dz * dz)
+
+
+
+  if (!(node && node.type === 'fence' && selectedId && selectedCount === 1)) return null
+
+  const length = getWallCurveLength(node)
+  const curveOffset = getClampedWallCurveOffset(node)
+  const maxCurveOffset = getMaxWallCurveOffset(node)
 
   return (
-    <PanelWrapper icon="/icons/build.png" onClose={handleClose} title={node.name || 'Fence'} width={300}>
+    <PanelWrapper
+      icon="/icons/build.png"
+      onClose={handleClose}
+      title={node.name || 'Fence'}
+      width={300}
+    >
       <PanelSection title="Style">
         <SegmentedControl
           onChange={(value) => handleUpdate({ style: value })}
@@ -95,6 +128,16 @@ export function FencePanel() {
           unit="m"
           value={length}
         />
+        <SliderControl
+          label="Curve"
+          max={Math.max(0.01, maxCurveOffset)}
+          min={-Math.max(0.01, maxCurveOffset)}
+          onChange={(value) => handleUpdate({ curveOffset: normalizeWallCurveOffset(node, value) })}
+          precision={2}
+          step={0.1}
+          unit="m"
+          value={Math.round(curveOffset * 100) / 100}
+        />
         <SliderControl
           label="Height"
           max={4}

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

@@ -14,15 +14,15 @@ import { CollectionsPopover } from './collections/collections-popover'
 import { PanelWrapper } from './panel-wrapper'
 
 export function ItemPanel() {
-  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const selectedId = useViewer((s) => s.selection.selectedIds[0])
   const setSelection = useViewer((s) => s.setSelection)
-  const nodes = useScene((s) => s.nodes)
   const updateNode = useScene((s) => s.updateNode)
   const deleteNode = useScene((s) => s.deleteNode)
   const setMovingNode = useEditor((s) => s.setMovingNode)
 
-  const selectedId = selectedIds[0]
-  const node = selectedId ? (nodes[selectedId as AnyNode['id']] as ItemNode | undefined) : undefined
+  const node = useScene((s) =>
+    selectedId ? (s.nodes[selectedId as AnyNode['id']] as ItemNode | undefined) : undefined,
+  )
 
   const [uniformScale, setUniformScale] = useState(true)
 
@@ -75,7 +75,7 @@ export function ItemPanel() {
     setSelection({ selectedIds: [] })
   }, [selectedId, deleteNode, setSelection])
 
-  if (!node || node.type !== 'item' || selectedIds.length !== 1) return null
+  if (!(node && node.type === 'item' && selectedId)) return null
 
   return (
     <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,138 @@
+'use client'
+
+import useEditor from '../../../store/use-editor'
+import { SliderControl } from '../controls/slider-control'
+import { Input } from '../primitives/input'
+import { PanelSection } from '../controls/panel-section'
+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-1">
+            <label className="block font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
+              Surface
+            </label>
+            <div className="space-y-1 rounded-lg border border-border/50 bg-background/40 p-2">
+              <SliderControl
+                label="Roughness"
+                max={1}
+                min={0}
+                onChange={(roughness) => updateCustomMaterial({ roughness })}
+                precision={2}
+                step={0.01}
+                value={currentProps.roughness}
+              />
+              <SliderControl
+                label="Metalness"
+                max={1}
+                min={0}
+                onChange={(metalness) => updateCustomMaterial({ metalness })}
+                precision={2}
+                step={0.01}
+                value={currentProps.metalness}
+              />
+              <SliderControl
+                label="Opacity"
+                max={1}
+                min={0}
+                onChange={(opacity) =>
+                  updateCustomMaterial({ opacity }, opacity < 1 || currentProps.transparent)
+                }
+                precision={2}
+                step={0.01}
+                value={currentProps.opacity}
+              />
+            </div>
+          </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>
+  )
+}