@pascal-app/editor 0.4.0

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

@@ -0,0 +1,306 @@
+'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 selectedIds = useViewer((s) => s.selection.selectedIds)
+  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 [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' || selectedIds.length !== 1) 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/panel-manager.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import { type AnyNodeId, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import useEditor from '../../../store/use-editor'
+import { CeilingPanel } from './ceiling-panel'
+import { DoorPanel } from './door-panel'
+import { ItemPanel } from './item-panel'
+import { ReferencePanel } from './reference-panel'
+import { RoofPanel } from './roof-panel'
+import { RoofSegmentPanel } from './roof-segment-panel'
+import { SlabPanel } from './slab-panel'
+import { StairPanel } from './stair-panel'
+import { StairSegmentPanel } from './stair-segment-panel'
+import { WallPanel } from './wall-panel'
+import { WindowPanel } from './window-panel'
+
+export function PanelManager() {
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const selectedReferenceId = useEditor((s) => s.selectedReferenceId)
+  const nodes = useScene((s) => s.nodes)
+
+  // Show reference panel if a reference is selected
+  if (selectedReferenceId) {
+    return <ReferencePanel />
+  }
+
+  // Show appropriate panel based on selected node type
+  if (selectedIds.length === 1) {
+    const selectedNode = selectedIds[0]
+    const node = nodes[selectedNode as AnyNodeId]
+    if (node) {
+      switch (node.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 'ceiling':
+          return <CeilingPanel />
+        case 'wall':
+          return <WallPanel />
+        case 'door':
+          return <DoorPanel />
+        case 'window':
+          return <WindowPanel />
+      }
+    }
+  }
+
+  return null
+}

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

@@ -0,0 +1,80 @@
+'use client'
+
+import { ChevronLeft, RotateCcw, X } from 'lucide-react'
+import Image from 'next/image'
+import { cn } from '../../../lib/utils'
+
+interface PanelWrapperProps {
+  title: string
+  icon?: string
+  onClose?: () => void
+  onReset?: () => void
+  onBack?: () => void
+  children: React.ReactNode
+  className?: string
+  width?: number | string
+}
+
+export function PanelWrapper({
+  title,
+  icon,
+  onClose,
+  onReset,
+  onBack,
+  children,
+  className,
+  width = 320, // default width
+}: PanelWrapperProps) {
+  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',
+        className,
+      )}
+      style={{ 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>
+
+        <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>
+
+      {/* Content */}
+      <div className="no-scrollbar flex min-h-0 flex-1 flex-col overflow-y-auto">{children}</div>
+    </div>
+  )
+}