@pascal-app/editor 0.7.0 → 0.9.1

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useViewer } from '@pascal-app/viewer'
+import { getSceneTheme, useViewer } from '@pascal-app/viewer'
 import { type ReactNode, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import useEditor from '../../store/use-editor'
 import { MobileTabBar } from '../ui/sidebar/mobile-tab-bar'
@@ -56,8 +56,8 @@ export function EditorLayoutMobile({
   const activePanel = useEditor((s) => s.activeSidebarPanel)
   const setActivePanel = useEditor((s) => s.setActiveSidebarPanel)
   const panelSheetHeight = useEditor((s) => s.mobilePanelSheetHeight)
-  const theme = useViewer((s) => s.theme)
-  const viewerBg = theme === 'light' ? VIEWER_BG_LIGHT : VIEWER_BG_DARK
+  const isDark = useViewer((s) => getSceneTheme(s.sceneTheme).appearance === 'dark')
+  const viewerBg = isDark ? VIEWER_BG_DARK : VIEWER_BG_LIGHT
 
   const middleRef = useRef<HTMLDivElement>(null)
   const sheetRef = useRef<BottomSheetHandle>(null)

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

@@ -5,12 +5,14 @@ import { useIsMobile } from '../../hooks/use-mobile'
 import useEditor from '../../store/use-editor'
 
 import { useSidebarStore } from '../ui/primitives/sidebar'
-import { type SidebarTab, TabBar } from '../ui/sidebar/tab-bar'
+import { IconRail, type SidebarTab } from '../ui/sidebar/tab-bar'
 import { EditorLayoutMobile } from './editor-layout-mobile'
 
 const SIDEBAR_MIN_WIDTH = 300
 const SIDEBAR_MAX_WIDTH = 800
 const SIDEBAR_COLLAPSE_THRESHOLD = 220
+// Matches the `w-14` rail in <IconRail>; the resize math is relative to it.
+const RAIL_WIDTH = 56
 
 // ── Left column: resizable panel with tab bar ────────────────────────────────
 
@@ -33,7 +35,6 @@ function LeftColumn({
   const setActivePanel = useEditor((s) => s.setActiveSidebarPanel)
 
   const isResizing = useRef(false)
-  const isExpanding = useRef(false)
 
   // Ensure active panel is a valid tab
   useEffect(() => {
@@ -62,35 +63,40 @@ function LeftColumn({
     [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'
+  // Rail click: reopen a collapsed panel, collapse when re-clicking the open
+  // tab, otherwise switch tabs. Reopening clamps below-min persisted widths
+  // up to the minimum so the panel always returns to a usable size.
+  const handleRailClick = useCallback(
+    (id: string) => {
+      if (isCollapsed) {
+        setIsCollapsed(false)
+        if (width < SIDEBAR_MIN_WIDTH) setWidth(SIDEBAR_MIN_WIDTH)
+        setActivePanel(id)
+        return
+      }
+      if (id === activePanel) {
+        setIsCollapsed(true)
+        return
+      }
+      setActivePanel(id)
     },
-    [setIsDragging],
+    [isCollapsed, width, activePanel, setIsCollapsed, setWidth, setActivePanel],
   )
 
   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) {
+      if (!isResizing.current) return
+      // Rail occupies the leftmost 48px; the panel starts after it.
+      const newWidth = e.clientX - RAIL_WIDTH
+      if (newWidth < SIDEBAR_COLLAPSE_THRESHOLD) {
+        setIsCollapsed(true)
+      } else {
         setIsCollapsed(false)
-        setWidth(Math.max(SIDEBAR_MIN_WIDTH, Math.min(e.clientX, SIDEBAR_MAX_WIDTH)))
+        setWidth(Math.max(SIDEBAR_MIN_WIDTH, Math.min(newWidth, SIDEBAR_MAX_WIDTH)))
       }
     }
     const handlePointerUp = () => {
       isResizing.current = false
-      isExpanding.current = false
       setIsDragging(false)
       document.body.style.cursor = ''
       document.body.style.userSelect = ''
@@ -103,37 +109,36 @@ function LeftColumn({
     }
   }, [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>
+    <div className="relative z-10 flex h-full flex-shrink-0 bg-sidebar text-sidebar-foreground">
+      <IconRail
+        activeTab={activePanel}
+        collapsed={isCollapsed}
+        onIconClick={handleRailClick}
+        tabs={tabs}
+      />
+      {!isCollapsed && (
+        <div
+          className="relative flex h-full flex-col"
+          style={{
+            width,
+            transition: isDragging ? 'none' : 'width 150ms ease',
+          }}
+        >
+          <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>
+          {/* 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>
+      )}
     </div>
   )
 }
@@ -169,10 +174,12 @@ function RightColumn({
       )}
       {/* Canvas area */}
       <div className="relative flex-1 overflow-hidden">{children}</div>
-      {/* Overlays scoped to the viewer column */}
+      {/* Overlays scoped to the viewer column. `data-viewer-bounds` marks the
+          draggable region the floating inspector clamps itself to. */}
       {overlays && (
         <div
           className="pointer-events-none absolute inset-0 z-30"
+          data-viewer-bounds
           style={{ transform: 'translateZ(0)' }}
         >
           {overlays}
@@ -205,6 +212,7 @@ export function EditorLayoutV2({
   viewerContent,
   overlays,
 }: EditorLayoutV2Props) {
+  const isCaptureMode = useEditor((s) => s.isCaptureMode)
   const isMobile = useIsMobile()
 
   if (isMobile) {
@@ -229,7 +237,7 @@ export function EditorLayoutV2({
 
       {/* Main content: left column + right column */}
       <div className="flex min-h-0 flex-1">
-        {sidebarTabs.length > 0 && (
+        {!isCaptureMode && sidebarTabs.length > 0 && (
           <LeftColumn
             renderTabContent={renderTabContent}
             sidebarOverlay={sidebarOverlay}
@@ -238,8 +246,8 @@ export function EditorLayoutV2({
         )}
         <RightColumn
           overlays={overlays}
-          toolbarLeft={viewerToolbarLeft}
-          toolbarRight={viewerToolbarRight}
+          toolbarLeft={isCaptureMode ? undefined : viewerToolbarLeft}
+          toolbarRight={isCaptureMode ? undefined : viewerToolbarRight}
         >
           {viewerContent}
         </RightColumn>

package/src/components/editor/export-manager.tsx

@@ -3,6 +3,7 @@
 import { useViewer } from '@pascal-app/viewer'
 import { useThree } from '@react-three/fiber'
 import { useEffect } from 'react'
+import type { Mesh, Object3D } from 'three'
 import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js'
 import { OBJExporter } from 'three/examples/jsm/exporters/OBJExporter.js'
 import { STLExporter } from 'three/examples/jsm/exporters/STLExporter.js'
@@ -21,10 +22,11 @@ export function ExportManager() {
       }
 
       const date = new Date().toISOString().split('T')[0]
+      const exportScene = prepareSceneForExport(sceneGroup)
 
       if (format === 'stl') {
         const exporter = new STLExporter()
-        const result = exporter.parse(sceneGroup, { binary: true })
+        const result = exporter.parse(exportScene, { binary: true })
         const blob = new Blob([result], { type: 'model/stl' })
         downloadBlob(blob, `model_${date}.stl`)
         return
@@ -32,7 +34,7 @@ export function ExportManager() {
 
       if (format === 'obj') {
         const exporter = new OBJExporter()
-        const result = exporter.parse(sceneGroup)
+        const result = exporter.parse(exportScene)
         const blob = new Blob([result], { type: 'model/obj' })
         downloadBlob(blob, `model_${date}.obj`)
         return
@@ -43,7 +45,7 @@ export function ExportManager() {
 
       return new Promise<void>((resolve, reject) => {
         exporter.parse(
-          sceneGroup,
+          exportScene,
           (gltf) => {
             const blob = new Blob([gltf as ArrayBuffer], { type: 'model/gltf-binary' })
             downloadBlob(blob, `model_${date}.glb`)
@@ -68,6 +70,33 @@ export function ExportManager() {
   return null
 }
 
+function prepareSceneForExport(source: Object3D) {
+  const clone = source.clone(true)
+  const meshesToRemove: Mesh[] = []
+
+  clone.traverse((object) => {
+    if (isMeshWithInvalidGeometry(object)) meshesToRemove.push(object)
+  })
+
+  for (const mesh of meshesToRemove) {
+    mesh.removeFromParent()
+  }
+
+  return clone
+}
+
+function isMeshWithInvalidGeometry(object: Object3D): object is Mesh {
+  if (!isMesh(object)) return false
+
+  // Three exporters can crash when a Mesh has no readable position attribute.
+  const position = object.geometry?.getAttribute('position')
+  return !position || position.count === 0
+}
+
+function isMesh(object: Object3D): object is Mesh {
+  return (object as Mesh).isMesh === true
+}
+
 function downloadBlob(blob: Blob, filename: string) {
   const url = URL.createObjectURL(blob)
   const link = document.createElement('a')

package/src/components/editor/first-person/build-collider-world.test.ts

@@ -0,0 +1,149 @@
+import { afterEach, describe, expect, test } from 'bun:test'
+import {
+  type AnyNode,
+  type AnyNodeDefinition,
+  CeilingNode,
+  ColumnNode,
+  ElevatorNode,
+  LevelNode,
+  nodeRegistry,
+  registerNode,
+  ShelfNode,
+  SiteNode,
+  sceneRegistry,
+  useScene,
+} from '@pascal-app/core'
+import { BoxGeometry, Group, Mesh, MeshBasicMaterial } from 'three'
+import { buildFirstPersonColliderWorldFromRegistry } from './build-collider-world'
+
+function registerColliderDefinition(
+  kind: AnyNode['type'],
+  schema: AnyNodeDefinition['schema'],
+  category: AnyNodeDefinition['category'],
+  surfaceRole?: AnyNodeDefinition['surfaceRole'],
+) {
+  registerNode({
+    kind,
+    schema,
+    schemaVersion: 1,
+    category,
+    surfaceRole,
+    capabilities: {},
+  } as AnyNodeDefinition)
+}
+
+function mountNode(
+  node: AnyNode,
+  box: [number, number, number],
+  position: [number, number, number],
+) {
+  const group = new Group()
+  const mesh = new Mesh(new BoxGeometry(box[0], box[1], box[2]), new MeshBasicMaterial())
+  mesh.position.set(position[0], position[1], position[2])
+  group.add(mesh)
+  group.updateMatrixWorld(true)
+  sceneRegistry.nodes.set(node.id, group)
+  sceneRegistry.byType[node.type]!.add(node.id)
+}
+
+function mountRegistryGroup(node: AnyNode) {
+  const group = new Group()
+  group.updateMatrixWorld(true)
+  sceneRegistry.nodes.set(node.id, group)
+  sceneRegistry.byType[node.type]!.add(node.id)
+}
+
+function setSceneNodes(nodes: AnyNode[]) {
+  useScene.setState({
+    nodes: Object.fromEntries(nodes.map((node) => [node.id, node])),
+    rootNodeIds: nodes.map((node) => node.id),
+  } as never)
+}
+
+describe('buildFirstPersonColliderWorldFromRegistry', () => {
+  afterEach(() => {
+    sceneRegistry.clear()
+    nodeRegistry._reset()
+    useScene.setState({ nodes: {}, rootNodeIds: [] } as never)
+  })
+
+  test('includes structure and furnish nodes discovered through the node registry', () => {
+    registerColliderDefinition('column', ColumnNode, 'structure')
+    registerColliderDefinition('shelf', ShelfNode, 'furnish')
+
+    const column = ColumnNode.parse({ id: 'column_test' })
+    const shelf = ShelfNode.parse({ id: 'shelf_test', position: [3, 0, 0] })
+    setSceneNodes([column, shelf])
+    mountNode(column, [1, 2, 1], [0, 1, 0])
+    mountNode(shelf, [2, 1, 1], [3, 0.5, 0])
+
+    const world = buildFirstPersonColliderWorldFromRegistry()
+
+    expect(world).not.toBeNull()
+    expect(world?.bounds?.min.x).toBeCloseTo(-0.5)
+    expect(world?.bounds?.max.x).toBeCloseTo(4)
+    world?.dispose()
+  })
+
+  test('excludes ceiling surfaces so the walkthrough player passes through them', () => {
+    registerColliderDefinition('column', ColumnNode, 'structure')
+    registerColliderDefinition('ceiling', CeilingNode, 'structure', 'ceiling')
+
+    const column = ColumnNode.parse({ id: 'column_test' })
+    const ceiling = CeilingNode.parse({ id: 'ceiling_test', polygon: [] })
+    setSceneNodes([column, ceiling])
+    mountNode(column, [1, 2, 1], [0, 1, 0])
+    // A wide ceiling at head height — if it were collected, bounds would span ±5.
+    mountNode(ceiling, [10, 0.1, 10], [0, 2.5, 0])
+
+    const world = buildFirstPersonColliderWorldFromRegistry()
+
+    expect(world).not.toBeNull()
+    // Bounds reflect only the 1×1 column; the ceiling contributed no geometry.
+    expect(world?.bounds?.min.x).toBeCloseTo(-0.5)
+    expect(world?.bounds?.max.x).toBeCloseTo(0.5)
+    world?.dispose()
+  })
+
+  test('leaves elevators to their dedicated dynamic collider meshes', () => {
+    registerColliderDefinition('elevator', ElevatorNode, 'structure')
+
+    const elevator = ElevatorNode.parse({ id: 'elevator_test' })
+    setSceneNodes([elevator])
+    mountNode(elevator, [2, 3, 2], [0, 1.5, 0])
+
+    const world = buildFirstPersonColliderWorldFromRegistry()
+
+    expect(world).toBeNull()
+  })
+
+  test('adds a fallback floor for a visible level with no slab', () => {
+    const level = LevelNode.parse({ id: 'level_test', level: 0 })
+    setSceneNodes([level])
+    mountRegistryGroup(level)
+
+    const world = buildFirstPersonColliderWorldFromRegistry()
+
+    expect(world).not.toBeNull()
+    expect(world?.bounds?.min.y).toBeCloseTo(-0.08)
+    expect(world?.bounds?.max.y).toBeCloseTo(0)
+    world?.dispose()
+  })
+
+  test('adds a site ground collider so a spawn on bare ground has a floor', () => {
+    const site = SiteNode.parse({ id: 'site_test' })
+    setSceneNodes([site])
+    mountRegistryGroup(site)
+
+    const world = buildFirstPersonColliderWorldFromRegistry()
+
+    expect(world).not.toBeNull()
+    // Ground slab sits just below the site ground plane (y = 0).
+    expect(world?.bounds?.min.y).toBeCloseTo(-0.08)
+    expect(world?.bounds?.max.y).toBeCloseTo(0)
+    // Default site footprint falls back to the 30 m minimum size.
+    expect(world?.bounds?.min.x).toBeCloseTo(-15)
+    expect(world?.bounds?.max.x).toBeCloseTo(15)
+    world?.dispose()
+  })
+})