@pascal-app/editor 0.8.0 → 0.9.2

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

@@ -1,222 +0,0 @@
-'use client'
-
-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'
-
-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: FenceBaseStyleValue }[] = [
-  { label: 'Grounded', value: 'grounded' },
-  { label: 'Floating', value: 'floating' },
-]
-
-export function FencePanel() {
-  const selectedId = useViewer((s) => s.selection.selectedIds[0])
-  const selectedCount = useViewer((s) => s.selection.selectedIds.length)
-  const setSelection = useViewer((s) => s.setSelection)
-  const updateNode = useScene((s) => s.updateNode)
-  const setMovingNode = useEditor((s) => s.setMovingNode)
-  const setCurvingFence = useEditor((s) => s.setCurvingFence)
-
-  const node = useScene((s) =>
-    selectedId ? (s.nodes[selectedId as AnyNode['id']] as FenceNode | undefined) : undefined,
-  )
-
-  const handleUpdate = useCallback(
-    (updates: Partial<FenceNode>) => {
-      if (!selectedId) return
-      updateNode(selectedId as AnyNode['id'], updates)
-      useScene.getState().dirtyNodes.add(selectedId as AnyNodeId)
-    },
-    [selectedId, updateNode],
-  )
-
-  const handleUpdateLength = useCallback(
-    (newLength: number) => {
-      if (!node || newLength <= 0) return
-
-      const dx = node.end[0] - node.start[0]
-      const dz = node.end[1] - node.start[1]
-      const currentLength = Math.sqrt(dx * dx + dz * dz)
-      if (currentLength === 0) return
-
-      const dirX = dx / currentLength
-      const dirZ = dz / currentLength
-      const newEnd: [number, number] = [
-        node.start[0] + dirX * newLength,
-        node.start[1] + dirZ * newLength,
-      ]
-
-      handleUpdate({ end: newEnd })
-    },
-    [node, handleUpdate],
-  )
-
-  const handleClose = useCallback(() => {
-    setSelection({ selectedIds: [] })
-  }, [setSelection])
-
-  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}
-    >
-      <PanelSection title="Style">
-        <SegmentedControl
-          onChange={(value) => handleUpdate({ style: value })}
-          options={FENCE_STYLE_OPTIONS}
-          value={node.style}
-        />
-        <SegmentedControl
-          className="mt-2"
-          onChange={(value) => handleUpdate({ baseStyle: value })}
-          options={FENCE_BASE_STYLE_OPTIONS}
-          value={node.baseStyle}
-        />
-      </PanelSection>
-
-      <PanelSection title="Dimensions">
-        <SliderControl
-          label="Length"
-          max={50}
-          min={0.1}
-          onChange={handleUpdateLength}
-          precision={2}
-          step={0.01}
-          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}
-          min={0.4}
-          onChange={(value) => handleUpdate({ height: Math.max(0.4, value) })}
-          precision={2}
-          step={0.05}
-          unit="m"
-          value={node.height}
-        />
-        <SliderControl
-          label="Thickness"
-          max={0.5}
-          min={0.03}
-          onChange={(value) => handleUpdate({ thickness: Math.max(0.03, value) })}
-          precision={3}
-          step={0.005}
-          unit="m"
-          value={node.thickness}
-        />
-      </PanelSection>
-
-      <PanelSection title="Structure">
-        <SliderControl
-          label="Base Height"
-          max={1}
-          min={0.04}
-          onChange={(value) => handleUpdate({ baseHeight: Math.max(0.04, value) })}
-          precision={3}
-          step={0.01}
-          unit="m"
-          value={node.baseHeight}
-        />
-        <SliderControl
-          label="Top Rail"
-          max={0.25}
-          min={0.01}
-          onChange={(value) => handleUpdate({ topRailHeight: Math.max(0.01, value) })}
-          precision={3}
-          step={0.005}
-          unit="m"
-          value={node.topRailHeight}
-        />
-        <SliderControl
-          label="Post Spacing"
-          max={5}
-          min={0.2}
-          onChange={(value) => handleUpdate({ postSpacing: Math.max(0.2, value) })}
-          precision={2}
-          step={0.05}
-          unit="m"
-          value={node.postSpacing}
-        />
-        <SliderControl
-          label="Post Size"
-          max={0.4}
-          min={0.01}
-          onChange={(value) => handleUpdate({ postSize: Math.max(0.01, value) })}
-          precision={3}
-          step={0.005}
-          unit="m"
-          value={node.postSize}
-        />
-        <SliderControl
-          label="Ground Clear"
-          max={0.6}
-          min={0}
-          onChange={(value) => handleUpdate({ groundClearance: Math.max(0, value) })}
-          precision={3}
-          step={0.005}
-          unit="m"
-          value={node.groundClearance}
-        />
-        <SliderControl
-          label="Edge Inset"
-          max={0.25}
-          min={0.005}
-          onChange={(value) => handleUpdate({ edgeInset: Math.max(0.005, value) })}
-          precision={3}
-          step={0.005}
-          unit="m"
-          value={node.edgeInset}
-        />
-      </PanelSection>
-    </PanelWrapper>
-  )
-}

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

@@ -1,306 +0,0 @@
-'use client'
-
-import { type AnyNode, getScaledDimensions, ItemNode, useScene } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { Copy, Link, Link2Off, Move, Trash2 } from 'lucide-react'
-import { useCallback, useState } from 'react'
-import { sfxEmitter } from '../../../lib/sfx-bus'
-import { cn } from '../../../lib/utils'
-import useEditor from '../../../store/use-editor'
-import { ActionButton, ActionGroup } from '../controls/action-button'
-import { PanelSection } from '../controls/panel-section'
-import { SliderControl } from '../controls/slider-control'
-import { CollectionsPopover } from './collections/collections-popover'
-import { PanelWrapper } from './panel-wrapper'
-
-export function ItemPanel() {
-  const selectedId = useViewer((s) => s.selection.selectedIds[0])
-  const setSelection = useViewer((s) => s.setSelection)
-  const updateNode = useScene((s) => s.updateNode)
-  const deleteNode = useScene((s) => s.deleteNode)
-  const setMovingNode = useEditor((s) => s.setMovingNode)
-
-  const node = useScene((s) =>
-    selectedId ? (s.nodes[selectedId as AnyNode['id']] as ItemNode | undefined) : undefined,
-  )
-
-  const [uniformScale, setUniformScale] = useState(true)
-
-  const handleUpdate = useCallback(
-    (updates: Partial<ItemNode>) => {
-      if (!(selectedId && node)) return
-      updateNode(selectedId as AnyNode['id'], updates)
-
-      if (node.asset.attachTo === 'wall' && node.parentId) {
-        requestAnimationFrame(() => {
-          useScene.getState().dirtyNodes.add(node.parentId as AnyNode['id'])
-        })
-      }
-    },
-    [selectedId, node, updateNode],
-  )
-
-  const handleClose = useCallback(() => {
-    setSelection({ selectedIds: [] })
-  }, [setSelection])
-
-  const handleMove = useCallback(() => {
-    if (node) {
-      sfxEmitter.emit('sfx:item-pick')
-      setMovingNode(node)
-      setSelection({ selectedIds: [] })
-    }
-  }, [node, setMovingNode, setSelection])
-
-  const handleDuplicate = useCallback(() => {
-    if (!node) return
-    sfxEmitter.emit('sfx:item-pick')
-    const proto = ItemNode.parse({
-      position: [...node.position] as [number, number, number],
-      rotation: [...node.rotation] as [number, number, number],
-      name: node.name,
-      asset: node.asset,
-      parentId: node.parentId,
-      side: node.side,
-      metadata: { isNew: true },
-    })
-    setMovingNode(proto)
-    setSelection({ selectedIds: [] })
-  }, [node, setMovingNode, setSelection])
-
-  const handleDelete = useCallback(() => {
-    if (!selectedId) return
-    sfxEmitter.emit('sfx:item-delete')
-    deleteNode(selectedId as AnyNode['id'])
-    setSelection({ selectedIds: [] })
-  }, [selectedId, deleteNode, setSelection])
-
-  if (!(node && node.type === 'item' && selectedId)) return null
-
-  return (
-    <PanelWrapper
-      icon={node.asset.thumbnail || '/icons/furniture.png'}
-      onClose={handleClose}
-      title={node.name || node.asset.name}
-      width={300}
-    >
-      <PanelSection title="Position">
-        <SliderControl
-          label={
-            <>
-              X<sub className="ml-[1px] text-[11px] opacity-70">pos</sub>
-            </>
-          }
-          max={node.position[0] + 2}
-          min={node.position[0] - 2}
-          onChange={(value) =>
-            handleUpdate({ position: [value, node.position[1], node.position[2]] })
-          }
-          precision={2}
-          step={0.01}
-          unit="m"
-          value={Math.round(node.position[0] * 100) / 100}
-        />
-        <SliderControl
-          label={
-            <>
-              Y<sub className="ml-[1px] text-[11px] opacity-70">pos</sub>
-            </>
-          }
-          max={node.position[1] + 2}
-          min={node.position[1] - 2}
-          onChange={(value) =>
-            handleUpdate({ position: [node.position[0], value, node.position[2]] })
-          }
-          precision={2}
-          step={0.01}
-          unit="m"
-          value={Math.round(node.position[1] * 100) / 100}
-        />
-        <SliderControl
-          label={
-            <>
-              Z<sub className="ml-[1px] text-[11px] opacity-70">pos</sub>
-            </>
-          }
-          max={node.position[2] + 2}
-          min={node.position[2] - 2}
-          onChange={(value) =>
-            handleUpdate({ position: [node.position[0], node.position[1], value] })
-          }
-          precision={2}
-          step={0.01}
-          unit="m"
-          value={Math.round(node.position[2] * 100) / 100}
-        />
-      </PanelSection>
-
-      <PanelSection title="Rotation">
-        <SliderControl
-          label={
-            <>
-              Y<sub className="ml-[1px] text-[11px] opacity-70">rot</sub>
-            </>
-          }
-          max={Math.round((node.rotation[1] * 180) / Math.PI) + 45}
-          min={Math.round((node.rotation[1] * 180) / Math.PI) - 45}
-          onChange={(degrees) => {
-            const radians = (degrees * Math.PI) / 180
-            handleUpdate({ rotation: [node.rotation[0], radians, node.rotation[2]] })
-          }}
-          precision={0}
-          step={1}
-          unit="°"
-          value={Math.round((node.rotation[1] * 180) / Math.PI)}
-        />
-        <div className="flex gap-1.5 px-1 pt-2 pb-1">
-          <ActionButton
-            label="-45°"
-            onClick={() => {
-              sfxEmitter.emit('sfx:item-rotate')
-              const currentDegrees = (node.rotation[1] * 180) / Math.PI
-              const radians = ((currentDegrees - 45) * Math.PI) / 180
-              handleUpdate({ rotation: [node.rotation[0], radians, node.rotation[2]] })
-            }}
-          />
-          <ActionButton
-            label="+45°"
-            onClick={() => {
-              sfxEmitter.emit('sfx:item-rotate')
-              const currentDegrees = (node.rotation[1] * 180) / Math.PI
-              const radians = ((currentDegrees + 45) * Math.PI) / 180
-              handleUpdate({ rotation: [node.rotation[0], radians, node.rotation[2]] })
-            }}
-          />
-        </div>
-      </PanelSection>
-
-      <PanelSection title="Scale">
-        <div className="flex items-center justify-between px-2 pb-2">
-          <span className="font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
-            Uniform Scale
-          </span>
-          <button
-            className={cn(
-              'flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground',
-              uniformScale ? 'bg-[#3e3e3e]' : 'bg-[#2C2C2E] hover:bg-[#3e3e3e]',
-            )}
-            onClick={() => setUniformScale((v) => !v)}
-            type="button"
-          >
-            {uniformScale ? <Link className="h-3.5 w-3.5" /> : <Link2Off className="h-3.5 w-3.5" />}
-          </button>
-        </div>
-
-        {uniformScale ? (
-          <SliderControl
-            label={
-              <>
-                XYZ<sub className="ml-[1px] text-[11px] opacity-70">scale</sub>
-              </>
-            }
-            max={10}
-            min={0.01}
-            onChange={(value) => {
-              const v = Math.max(0.01, value)
-              handleUpdate({ scale: [v, v, v] })
-            }}
-            precision={2}
-            step={0.1}
-            value={Math.round(node.scale[0] * 100) / 100}
-          />
-        ) : (
-          <>
-            <SliderControl
-              label={
-                <>
-                  X<sub className="ml-[1px] text-[11px] opacity-70">scale</sub>
-                </>
-              }
-              max={10}
-              min={0.01}
-              onChange={(value) =>
-                handleUpdate({ scale: [Math.max(0.01, value), node.scale[1], node.scale[2]] })
-              }
-              precision={2}
-              step={0.1}
-              value={Math.round(node.scale[0] * 100) / 100}
-            />
-            <SliderControl
-              label={
-                <>
-                  Y<sub className="ml-[1px] text-[11px] opacity-70">scale</sub>
-                </>
-              }
-              max={10}
-              min={0.01}
-              onChange={(value) =>
-                handleUpdate({ scale: [node.scale[0], Math.max(0.01, value), node.scale[2]] })
-              }
-              precision={2}
-              step={0.1}
-              value={Math.round(node.scale[1] * 100) / 100}
-            />
-            <SliderControl
-              label={
-                <>
-                  Z<sub className="ml-[1px] text-[11px] opacity-70">scale</sub>
-                </>
-              }
-              max={10}
-              min={0.01}
-              onChange={(value) =>
-                handleUpdate({ scale: [node.scale[0], node.scale[1], Math.max(0.01, value)] })
-              }
-              precision={2}
-              step={0.1}
-              value={Math.round(node.scale[2] * 100) / 100}
-            />
-          </>
-        )}
-      </PanelSection>
-
-      <PanelSection title="Info">
-        <div className="flex items-center justify-between px-2 py-1 text-muted-foreground text-sm">
-          <span>Dimensions</span>
-          {(() => {
-            const [w, h, d] = getScaledDimensions(node)
-            return (
-              <span className="font-mono text-white">
-                {Math.round(w * 100) / 100}×{Math.round(h * 100) / 100}×{Math.round(d * 100) / 100}
-              </span>
-            )
-          })()}
-        </div>
-      </PanelSection>
-
-      <PanelSection title="Collections">
-        <ActionGroup>
-          <CollectionsPopover
-            collectionIds={node.collectionIds}
-            nodeId={selectedId as AnyNode['id']}
-          >
-            <ActionButton label="Manage collections…" />
-          </CollectionsPopover>
-        </ActionGroup>
-      </PanelSection>
-
-      <PanelSection title="Actions">
-        <ActionGroup>
-          <ActionButton icon={<Move className="h-3.5 w-3.5" />} label="Move" onClick={handleMove} />
-          <ActionButton
-            icon={<Copy className="h-3.5 w-3.5" />}
-            label="Duplicate"
-            onClick={handleDuplicate}
-          />
-          <ActionButton
-            className="hover:bg-red-500/20"
-            icon={<Trash2 className="h-3.5 w-3.5 text-red-400" />}
-            label="Delete"
-            onClick={handleDelete}
-          />
-        </ActionGroup>
-      </PanelSection>
-    </PanelWrapper>
-  )
-}

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

@@ -1,163 +0,0 @@
-'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>
-  )
-}