@pascal-app/editor 0.4.0

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@pascal-app/editor",
+  "version": "0.4.0",
+  "description": "Pascal building editor component",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.tsx",
+    "./catalog": "./src/components/ui/item-catalog/catalog-items.tsx"
+  },
+  "scripts": {
+    "check-types": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@pascal-app/core": "*",
+    "@pascal-app/viewer": "*",
+    "@react-three/drei": "^10",
+    "@react-three/fiber": "^9",
+    "next": ">=15",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "three": "^0.183"
+  },
+  "dependencies": {
+    "@iconify/react": "^6.0.2",
+    "@number-flow/react": "^0.5.14",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@react-three/uikit-lucide": "^1.0.62",
+    "@visual-json/react": "latest",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "howler": "^2.2.4",
+    "lucide-react": "^0.562.0",
+    "mitt": "^3.0.1",
+    "motion": "^12.34.3",
+    "nanoid": "^5.1.6",
+    "tailwind-merge": "^3.5.0",
+    "zod": "^4.3.6",
+    "zustand": "^5.0.11"
+  },
+  "devDependencies": {
+    "@pascal-app/core": "*",
+    "@pascal-app/viewer": "*",
+    "@pascal/typescript-config": "*",
+    "@types/howler": "^2.2.12",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
+    "@types/three": "^0.183.1",
+    "typescript": "5.9.3"
+  }
+}

package/src/components/editor/custom-camera-controls.tsx

@@ -0,0 +1,387 @@
+'use client'
+
+import { type CameraControlEvent, emitter, sceneRegistry, useScene } from '@pascal-app/core'
+import { useViewer, WalkthroughControls, ZONE_LAYER } from '@pascal-app/viewer'
+import { CameraControls, CameraControlsImpl } from '@react-three/drei'
+import { useThree } from '@react-three/fiber'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { Box3, Vector3 } from 'three'
+import { EDITOR_LAYER } from '../../lib/constants'
+import useEditor from '../../store/use-editor'
+
+const currentTarget = new Vector3()
+const tempBox = new Box3()
+const tempCenter = new Vector3()
+const tempDelta = new Vector3()
+const tempPosition = new Vector3()
+const tempSize = new Vector3()
+const tempTarget = new Vector3()
+const DEFAULT_MAX_POLAR_ANGLE = Math.PI / 2 - 0.1
+const DEBUG_MAX_POLAR_ANGLE = Math.PI - 0.05
+
+export const CustomCameraControls = () => {
+  const controls = useRef<CameraControlsImpl>(null!)
+  const isPreviewMode = useEditor((s) => s.isPreviewMode)
+  const walkthroughMode = useViewer((s) => s.walkthroughMode)
+  const allowUndergroundCamera = useEditor((s) => s.allowUndergroundCamera)
+  const selection = useViewer((s) => s.selection)
+  const currentLevelId = selection.levelId
+  const firstLoad = useRef(true)
+  const maxPolarAngle =
+    !isPreviewMode && allowUndergroundCamera ? DEBUG_MAX_POLAR_ANGLE : DEFAULT_MAX_POLAR_ANGLE
+
+  const camera = useThree((state) => state.camera)
+  const raycaster = useThree((state) => state.raycaster)
+  useEffect(() => {
+    camera.layers.enable(EDITOR_LAYER)
+    raycaster.layers.enable(EDITOR_LAYER)
+    raycaster.layers.enable(ZONE_LAYER)
+  }, [camera, raycaster])
+
+  useEffect(() => {
+    if (isPreviewMode) return // Preview mode uses auto-navigate instead
+    let targetY = 0
+    if (currentLevelId) {
+      const levelMesh = sceneRegistry.nodes.get(currentLevelId)
+      if (levelMesh) {
+        targetY = levelMesh.position.y
+      }
+    }
+    if (!controls.current) return
+    if (firstLoad.current) {
+      firstLoad.current = false
+      controls.current.setLookAt(20, 20, 20, 0, 0, 0, true)
+    }
+    controls.current.getTarget(currentTarget)
+    controls.current.moveTo(currentTarget.x, targetY, currentTarget.z, true)
+  }, [currentLevelId, isPreviewMode])
+
+  useEffect(() => {
+    if (!controls.current) return
+
+    controls.current.maxPolarAngle = maxPolarAngle
+    controls.current.minPolarAngle = 0
+
+    if (controls.current.polarAngle > maxPolarAngle) {
+      controls.current.rotateTo(controls.current.azimuthAngle, maxPolarAngle, true)
+    }
+  }, [maxPolarAngle])
+
+  const focusNode = useCallback(
+    (nodeId: string) => {
+      if (isPreviewMode || !controls.current) return
+
+      const object3D = sceneRegistry.nodes.get(nodeId)
+      if (!object3D) return
+
+      tempBox.setFromObject(object3D)
+      if (tempBox.isEmpty()) return
+
+      tempBox.getCenter(tempCenter)
+      controls.current.getPosition(tempPosition)
+      controls.current.getTarget(tempTarget)
+      tempDelta.copy(tempCenter).sub(tempTarget)
+
+      controls.current.setLookAt(
+        tempPosition.x + tempDelta.x,
+        tempPosition.y + tempDelta.y,
+        tempPosition.z + tempDelta.z,
+        tempCenter.x,
+        tempCenter.y,
+        tempCenter.z,
+        true,
+      )
+    },
+    [isPreviewMode],
+  )
+
+  // Configure mouse buttons based on control mode and camera mode
+  const cameraMode = useViewer((state) => state.cameraMode)
+  const mouseButtons = useMemo(() => {
+    // Use ZOOM for orthographic camera, DOLLY for perspective camera
+    const wheelAction =
+      cameraMode === 'orthographic'
+        ? CameraControlsImpl.ACTION.ZOOM
+        : CameraControlsImpl.ACTION.DOLLY
+
+    return {
+      left: isPreviewMode ? CameraControlsImpl.ACTION.SCREEN_PAN : CameraControlsImpl.ACTION.NONE,
+      middle: CameraControlsImpl.ACTION.SCREEN_PAN,
+      right: CameraControlsImpl.ACTION.ROTATE,
+      wheel: wheelAction,
+    }
+  }, [cameraMode, isPreviewMode])
+
+  useEffect(() => {
+    const keyState = {
+      shiftRight: false,
+      shiftLeft: false,
+      controlRight: false,
+      controlLeft: false,
+      space: false,
+    }
+
+    const updateConfig = () => {
+      if (!controls.current) return
+
+      const shift = keyState.shiftRight || keyState.shiftLeft
+      const control = keyState.controlRight || keyState.controlLeft
+      const space = keyState.space
+
+      const wheelAction =
+        cameraMode === 'orthographic'
+          ? CameraControlsImpl.ACTION.ZOOM
+          : CameraControlsImpl.ACTION.DOLLY
+      controls.current.mouseButtons.wheel = wheelAction
+      controls.current.mouseButtons.middle = CameraControlsImpl.ACTION.SCREEN_PAN
+      controls.current.mouseButtons.right = CameraControlsImpl.ACTION.ROTATE
+      if (isPreviewMode) {
+        // In preview mode, left-click is always pan (viewer-style)
+        controls.current.mouseButtons.left = CameraControlsImpl.ACTION.SCREEN_PAN
+      } else if (space) {
+        controls.current.mouseButtons.left = CameraControlsImpl.ACTION.SCREEN_PAN
+      } else {
+        controls.current.mouseButtons.left = CameraControlsImpl.ACTION.NONE
+      }
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.code === 'Space') {
+        keyState.space = true
+        document.body.style.cursor = 'grab'
+      }
+      if (event.code === 'ShiftRight') {
+        keyState.shiftRight = true
+      }
+      if (event.code === 'ShiftLeft') {
+        keyState.shiftLeft = true
+      }
+      if (event.code === 'ControlRight') {
+        keyState.controlRight = true
+      }
+      if (event.code === 'ControlLeft') {
+        keyState.controlLeft = true
+      }
+      updateConfig()
+    }
+
+    const onKeyUp = (event: KeyboardEvent) => {
+      if (event.code === 'Space') {
+        keyState.space = false
+        document.body.style.cursor = ''
+      }
+      if (event.code === 'ShiftRight') {
+        keyState.shiftRight = false
+      }
+      if (event.code === 'ShiftLeft') {
+        keyState.shiftLeft = false
+      }
+      if (event.code === 'ControlRight') {
+        keyState.controlRight = false
+      }
+      if (event.code === 'ControlLeft') {
+        keyState.controlLeft = false
+      }
+      updateConfig()
+    }
+
+    document.addEventListener('keydown', onKeyDown)
+    document.addEventListener('keyup', onKeyUp)
+    updateConfig()
+
+    return () => {
+      document.removeEventListener('keydown', onKeyDown)
+      document.removeEventListener('keyup', onKeyUp)
+    }
+  }, [cameraMode, isPreviewMode])
+
+  // Preview mode: auto-navigate camera to selected node (viewer behavior)
+  const previewTargetNodeId = isPreviewMode
+    ? (selection.zoneId ?? selection.levelId ?? selection.buildingId)
+    : null
+
+  useEffect(() => {
+    if (!(isPreviewMode && controls.current)) return
+
+    const nodes = useScene.getState().nodes
+    let node = previewTargetNodeId ? nodes[previewTargetNodeId] : null
+
+    if (!previewTargetNodeId) {
+      const site = Object.values(nodes).find((n) => n.type === 'site')
+      node = site || null
+    }
+    if (!node) return
+
+    // Check if node has a saved camera
+    if (node.camera) {
+      const { position, target } = node.camera
+      if (
+        position &&
+        target &&
+        position.length >= 3 &&
+        target.length >= 3 &&
+        position.every((v) => v !== null && v !== undefined) &&
+        target.every((v) => v !== null && v !== undefined)
+      ) {
+        requestAnimationFrame(() => {
+          if (!controls.current) return
+          controls.current.setLookAt(
+            position[0],
+            position[1],
+            position[2],
+            target[0],
+            target[1],
+            target[2],
+            true,
+          )
+        })
+      }
+      return
+    }
+
+    if (!previewTargetNodeId) return
+
+    // Calculate camera position from bounding box
+    const object3D = sceneRegistry.nodes.get(previewTargetNodeId)
+    if (!object3D) return
+
+    tempBox.setFromObject(object3D)
+    tempBox.getCenter(tempCenter)
+    tempBox.getSize(tempSize)
+
+    const maxDim = Math.max(tempSize.x, tempSize.y, tempSize.z)
+    const distance = Math.max(maxDim * 2, 15)
+
+    controls.current.setLookAt(
+      tempCenter.x + distance * 0.7,
+      tempCenter.y + distance * 0.5,
+      tempCenter.z + distance * 0.7,
+      tempCenter.x,
+      tempCenter.y,
+      tempCenter.z,
+      true,
+    )
+  }, [isPreviewMode, previewTargetNodeId])
+
+  useEffect(() => {
+    const handleNodeCapture = ({ nodeId }: CameraControlEvent) => {
+      if (!controls.current) return
+
+      const position = new Vector3()
+      const target = new Vector3()
+      controls.current.getPosition(position)
+      controls.current.getTarget(target)
+
+      const state = useScene.getState()
+
+      state.updateNode(nodeId, {
+        camera: {
+          position: [position.x, position.y, position.z],
+          target: [target.x, target.y, target.z],
+          mode: useViewer.getState().cameraMode,
+        },
+      })
+    }
+    const handleNodeView = ({ nodeId }: CameraControlEvent) => {
+      if (!controls.current) return
+
+      const node = useScene.getState().nodes[nodeId]
+      if (!node?.camera) return
+      const { position, target } = node.camera
+
+      controls.current.setLookAt(
+        position[0],
+        position[1],
+        position[2],
+        target[0],
+        target[1],
+        target[2],
+        true,
+      )
+    }
+
+    const handleTopView = () => {
+      if (!controls.current) return
+
+      const currentPolarAngle = controls.current.polarAngle
+
+      // Toggle: if already near top view (< 0.1 radians ≈ 5.7°), go back to 45°
+      // Otherwise, go to top view (0°)
+      const targetAngle = currentPolarAngle < 0.1 ? Math.PI / 4 : 0
+
+      controls.current.rotatePolarTo(targetAngle, true)
+    }
+
+    const handleOrbitCW = () => {
+      if (!controls.current) return
+
+      const currentAzimuth = controls.current.azimuthAngle
+      const currentPolar = controls.current.polarAngle
+      // Round to nearest 90° increment, then rotate 90° clockwise
+      const rounded = Math.round(currentAzimuth / (Math.PI / 2)) * (Math.PI / 2)
+      const target = rounded - Math.PI / 2
+
+      controls.current.rotateTo(target, currentPolar, true)
+    }
+
+    const handleOrbitCCW = () => {
+      if (!controls.current) return
+
+      const currentAzimuth = controls.current.azimuthAngle
+      const currentPolar = controls.current.polarAngle
+      // Round to nearest 90° increment, then rotate 90° counter-clockwise
+      const rounded = Math.round(currentAzimuth / (Math.PI / 2)) * (Math.PI / 2)
+      const target = rounded + Math.PI / 2
+
+      controls.current.rotateTo(target, currentPolar, true)
+    }
+
+    const handleNodeFocus = ({ nodeId }: CameraControlEvent) => {
+      focusNode(nodeId)
+    }
+
+    emitter.on('camera-controls:capture', handleNodeCapture)
+    emitter.on('camera-controls:focus', handleNodeFocus)
+    emitter.on('camera-controls:view', handleNodeView)
+    emitter.on('camera-controls:top-view', handleTopView)
+    emitter.on('camera-controls:orbit-cw', handleOrbitCW)
+    emitter.on('camera-controls:orbit-ccw', handleOrbitCCW)
+
+    return () => {
+      emitter.off('camera-controls:capture', handleNodeCapture)
+      emitter.off('camera-controls:focus', handleNodeFocus)
+      emitter.off('camera-controls:view', handleNodeView)
+      emitter.off('camera-controls:top-view', handleTopView)
+      emitter.off('camera-controls:orbit-cw', handleOrbitCW)
+      emitter.off('camera-controls:orbit-ccw', handleOrbitCCW)
+    }
+  }, [focusNode])
+
+  const onTransitionStart = useCallback(() => {
+    useViewer.getState().setCameraDragging(true)
+  }, [])
+
+  const onRest = useCallback(() => {
+    useViewer.getState().setCameraDragging(false)
+  }, [])
+
+  if (walkthroughMode) {
+    return <WalkthroughControls />
+  }
+
+  return (
+    <CameraControls
+      makeDefault
+      maxDistance={100}
+      maxPolarAngle={maxPolarAngle}
+      minDistance={10}
+      minPolarAngle={0}
+      mouseButtons={mouseButtons}
+      onRest={onRest}
+      onSleep={onRest}
+      onTransitionStart={onTransitionStart}
+      ref={controls}
+      restThreshold={0.01}
+    />
+  )
+}

package/src/components/editor/editor-layout-v2.tsx

@@ -0,0 +1,220 @@
+'use client'
+
+import { type ReactNode, useCallback, useEffect, useRef } from 'react'
+import useEditor from '../../store/use-editor'
+import { useSidebarStore } from '../ui/primitives/sidebar'
+import { type SidebarTab, TabBar } from '../ui/sidebar/tab-bar'
+
+const SIDEBAR_MIN_WIDTH = 300
+const SIDEBAR_MAX_WIDTH = 800
+const SIDEBAR_COLLAPSE_THRESHOLD = 220
+
+// ── Left column: resizable panel with tab bar ────────────────────────────────
+
+function LeftColumn({
+  tabs,
+  renderTabContent,
+  sidebarOverlay,
+}: {
+  tabs: SidebarTab[]
+  renderTabContent: (tabId: string) => ReactNode
+  sidebarOverlay?: ReactNode
+}) {
+  const width = useSidebarStore((s) => s.width)
+  const isCollapsed = useSidebarStore((s) => s.isCollapsed)
+  const setIsCollapsed = useSidebarStore((s) => s.setIsCollapsed)
+  const setWidth = useSidebarStore((s) => s.setWidth)
+  const isDragging = useSidebarStore((s) => s.isDragging)
+  const setIsDragging = useSidebarStore((s) => s.setIsDragging)
+  const activePanel = useEditor((s) => s.activeSidebarPanel)
+  const setActivePanel = useEditor((s) => s.setActiveSidebarPanel)
+
+  const isResizing = useRef(false)
+  const isExpanding = useRef(false)
+
+  // Ensure active panel is a valid tab
+  useEffect(() => {
+    if (tabs.length > 0 && !tabs.some((t) => t.id === activePanel)) {
+      setActivePanel(tabs[0]!.id)
+    }
+  }, [tabs, activePanel, setActivePanel])
+
+  const handleResizerDown = useCallback(
+    (e: React.PointerEvent) => {
+      e.preventDefault()
+      isResizing.current = true
+      setIsDragging(true)
+      document.body.style.cursor = 'col-resize'
+      document.body.style.userSelect = 'none'
+    },
+    [setIsDragging],
+  )
+
+  const handleGrabDown = useCallback(
+    (e: React.PointerEvent) => {
+      e.preventDefault()
+      isExpanding.current = true
+      setIsDragging(true)
+      document.body.style.cursor = 'col-resize'
+      document.body.style.userSelect = 'none'
+    },
+    [setIsDragging],
+  )
+
+  useEffect(() => {
+    const handlePointerMove = (e: PointerEvent) => {
+      if (isResizing.current) {
+        const newWidth = e.clientX
+        if (newWidth < SIDEBAR_COLLAPSE_THRESHOLD) {
+          setIsCollapsed(true)
+        } else {
+          setIsCollapsed(false)
+          setWidth(Math.max(SIDEBAR_MIN_WIDTH, Math.min(newWidth, SIDEBAR_MAX_WIDTH)))
+        }
+      } else if (isExpanding.current && e.clientX > 60) {
+        setIsCollapsed(false)
+        setWidth(Math.max(SIDEBAR_MIN_WIDTH, Math.min(e.clientX, SIDEBAR_MAX_WIDTH)))
+      }
+    }
+    const handlePointerUp = () => {
+      isResizing.current = false
+      isExpanding.current = false
+      setIsDragging(false)
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+    }
+    window.addEventListener('pointermove', handlePointerMove)
+    window.addEventListener('pointerup', handlePointerUp)
+    return () => {
+      window.removeEventListener('pointermove', handlePointerMove)
+      window.removeEventListener('pointerup', handlePointerUp)
+    }
+  }, [setWidth, setIsCollapsed, setIsDragging])
+
+  if (isCollapsed) {
+    return (
+      <div
+        className="relative h-full w-2 flex-shrink-0 cursor-col-resize transition-colors hover:bg-primary/20"
+        onPointerDown={handleGrabDown}
+        title="Expand sidebar"
+      />
+    )
+  }
+
+  return (
+    <div
+      className="relative z-10 flex h-full flex-shrink-0 flex-col bg-sidebar text-sidebar-foreground"
+      style={{
+        width,
+        transition: isDragging ? 'none' : 'width 150ms ease',
+      }}
+    >
+      <TabBar activeTab={activePanel} onTabChange={setActivePanel} tabs={tabs} />
+      <div className="relative flex flex-1 flex-col overflow-hidden">
+        {renderTabContent(activePanel)}
+        {sidebarOverlay && <div className="absolute inset-0 z-50">{sidebarOverlay}</div>}
+      </div>
+
+      {/* Resize handle + hit area */}
+      <div
+        className="absolute inset-y-0 -right-3 z-[100] flex w-6 cursor-col-resize items-center justify-center"
+        onPointerDown={handleResizerDown}
+      >
+        <div className="h-8 w-1 rounded-full bg-neutral-500" />
+      </div>
+    </div>
+  )
+}
+
+// ── Right column: viewer area with toolbar ───────────────────────────────────
+
+function RightColumn({
+  toolbarLeft,
+  toolbarRight,
+  children,
+  overlays,
+}: {
+  toolbarLeft?: ReactNode
+  toolbarRight?: ReactNode
+  children: ReactNode
+  overlays?: ReactNode
+}) {
+  return (
+    <div
+      className="relative flex min-w-0 flex-1 flex-col overflow-hidden"
+      style={{
+        borderTopLeftRadius: 16,
+        clipPath: 'inset(0 0 0 0 round 16px 0 0 0)',
+        boxShadow: '-4px -2px 16px rgba(0, 0, 0, 0.08), -1px 0 4px rgba(0, 0, 0, 0.04)',
+      }}
+    >
+      {/* Viewer toolbar */}
+      {(toolbarLeft || toolbarRight) && (
+        <div className="pointer-events-none absolute top-3 right-3 left-3 z-20 flex items-center justify-between gap-2">
+          <div className="pointer-events-auto flex items-center gap-2">{toolbarLeft}</div>
+          <div className="pointer-events-auto flex items-center gap-2">{toolbarRight}</div>
+        </div>
+      )}
+      {/* Canvas area */}
+      <div className="relative flex-1 overflow-hidden">{children}</div>
+      {/* Overlays scoped to the viewer column */}
+      {overlays && (
+        <div
+          className="pointer-events-none absolute inset-0 z-30"
+          style={{ transform: 'translateZ(0)' }}
+        >
+          {overlays}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ── Main v2 layout ───────────────────────────────────────────────────────────
+
+export interface EditorLayoutV2Props {
+  navbarSlot?: ReactNode
+  sidebarTabs?: SidebarTab[]
+  renderTabContent: (tabId: string) => ReactNode
+  sidebarOverlay?: ReactNode
+  viewerToolbarLeft?: ReactNode
+  viewerToolbarRight?: ReactNode
+  viewerContent: ReactNode
+  overlays?: ReactNode
+}
+
+export function EditorLayoutV2({
+  navbarSlot,
+  sidebarTabs = [],
+  renderTabContent,
+  sidebarOverlay,
+  viewerToolbarLeft,
+  viewerToolbarRight,
+  viewerContent,
+  overlays,
+}: EditorLayoutV2Props) {
+  return (
+    <div className="dark flex h-full w-full flex-col bg-sidebar text-foreground">
+      {/* Top navbar */}
+      {navbarSlot}
+
+      {/* Main content: left column + right column */}
+      <div className="flex min-h-0 flex-1">
+        {sidebarTabs.length > 0 && (
+          <LeftColumn
+            renderTabContent={renderTabContent}
+            sidebarOverlay={sidebarOverlay}
+            tabs={sidebarTabs}
+          />
+        )}
+        <RightColumn
+          overlays={overlays}
+          toolbarLeft={viewerToolbarLeft}
+          toolbarRight={viewerToolbarRight}
+        >
+          {viewerContent}
+        </RightColumn>
+      </div>
+    </div>
+  )
+}