@pascal-app/editor 1.0.3 → 1.0.5

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

@@ -2,10 +2,13 @@
 
 import { getSceneTheme, useViewer } from '@pascal-app/viewer'
 import { type ReactNode, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { useShownSidebarPanel } from '../../lib/sidebar-panel'
 import useEditor from '../../store/use-editor'
 import { MobileTabBar } from '../ui/sidebar/mobile-tab-bar'
 import type { SidebarTab } from '../ui/sidebar/tab-bar'
 import { BottomSheet, type BottomSheetHandle } from './bottom-sheet'
+import { useSceneSpan } from './views/scene-region'
+import { ViewTabs } from './views/view-bar'
 
 const MIN_SNAP = 0
 const MAX_SNAP = 1
@@ -40,6 +43,7 @@ export interface EditorLayoutMobileProps {
   viewerToolbarRight?: ReactNode
   viewerContent: ReactNode
   overlays?: ReactNode
+  viewBar?: boolean
 }
 
 export function EditorLayoutMobile({
@@ -51,9 +55,11 @@ export function EditorLayoutMobile({
   viewerToolbarRight,
   viewerContent,
   overlays,
+  viewBar = true,
 }: EditorLayoutMobileProps) {
+  const hasScene = useSceneSpan() !== null
   const isCaptureMode = useEditor((s) => s.isCaptureMode)
-  const activePanel = useEditor((s) => s.activeSidebarPanel)
+  const activePanel = useShownSidebarPanel(sidebarTabs)
   const setActivePanel = useEditor((s) => s.setActiveSidebarPanel)
   const panelSheetHeight = useEditor((s) => s.mobilePanelSheetHeight)
   const isDark = useViewer((s) => getSceneTheme(s.sceneTheme).appearance === 'dark')
@@ -70,30 +76,18 @@ export function EditorLayoutMobile({
 
   const currentTab = sidebarTabs.find((t) => t.id === activePanel)
 
-  // Keep active panel valid
-  useEffect(() => {
-    if (sidebarTabs.length > 0 && !sidebarTabs.some((t) => t.id === activePanel)) {
-      setActivePanel(sidebarTabs[0]!.id)
-    }
-  }, [sidebarTabs, activePanel, setActivePanel])
-
-  // Sync editor phase / mode with the active tab:
+  // Sync the editor mode with the active tab:
   // - Entering Chat always drops to Select (chat is a composing context).
-  // - Entering Items snaps the editor into furnish-build (matches the
-  //   desktop "Furnish" action which itself opens the Items panel).
-  // - Leaving Items while still furnishing exits the build mode.
+  // - Leaving Items with the item tool still armed exits the build mode.
+  // Arming the item tool on entering Items belongs to the tap (`handleTabPress`):
+  // a tab restored on load opens in select mode.
   useEffect(() => {
-    const { armToolMode, phase, mode, setPhase } = useEditor.getState()
+    const { armToolMode, mode, tool } = useEditor.getState()
     if (activePanel === 'ai' && mode === 'build') {
       armToolMode({ mode: 'select' })
       return
     }
-    if (activePanel === 'items') {
-      if (phase !== 'furnish') setPhase('furnish')
-      if (mode !== 'build') armToolMode({ mode: 'build', tool: 'item' })
-      return
-    }
-    if (phase === 'furnish' && mode === 'build') {
+    if (activePanel !== 'items' && mode === 'build' && tool === 'item') {
       armToolMode({ mode: 'select' })
     }
   }, [activePanel])
@@ -148,9 +142,17 @@ export function EditorLayoutMobile({
       if (middleH <= 0) return
       const tab = sidebarTabs.find((t) => t.id === id)
       if (!tab) return
+      if (tab.onSelect) {
+        tab.onSelect()
+        return
+      }
       const defaultPx = getDefaultSnap(tab) * middleH
       if (id !== activePanel) {
         setActivePanel(id)
+        // Tapping Items arms the item tool, as F does on desktop.
+        if (id === 'items' && useEditor.getState().mode !== 'build') {
+          useEditor.getState().armToolMode({ mode: 'build', tool: 'item' })
+        }
         sheetRef.current?.snapTo(defaultPx)
         return
       }
@@ -212,7 +214,7 @@ export function EditorLayoutMobile({
   }, [panelSheetHeight, committedSheetH])
 
   return (
-    <div className="dark flex h-full w-full flex-col bg-sidebar text-foreground">
+    <div className="flex h-full w-full flex-col bg-sidebar text-foreground">
       {navbarSlot}
 
       <div
@@ -223,14 +225,23 @@ export function EditorLayoutMobile({
         {/* Viewer column: sized by committed sheet height */}
         <div className="absolute inset-x-0 top-0 overflow-hidden" style={{ height: viewerHeight }}>
           <div className="relative h-full w-full">
-            {(viewerToolbarLeft || viewerToolbarRight) && !isCaptureMode && (
+            {(viewBar || viewerToolbarLeft || viewerToolbarRight) && !isCaptureMode && (
               <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">
-                  {viewerToolbarLeft}
-                </div>
-                <div className="pointer-events-auto flex items-center gap-2">
-                  {viewerToolbarRight}
+                <div className="flex items-center gap-2">
+                  {viewBar && (
+                    <div data-view-bar={0}>
+                      <ViewTabs className="shadow-elevation-4" pane={0} />
+                    </div>
+                  )}
+                  <div className="pointer-events-auto flex items-center gap-2">
+                    {viewerToolbarLeft}
+                  </div>
                 </div>
+                {hasScene && (
+                  <div className="pointer-events-auto flex items-center gap-2">
+                    {viewerToolbarRight}
+                  </div>
+                )}
               </div>
             )}
             <div className="relative h-full w-full overflow-hidden">{viewerContent}</div>

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

@@ -2,13 +2,21 @@
 
 import { type ReactNode, useCallback, useEffect, useRef } from 'react'
 import { useIsMobile } from '../../hooks/use-mobile'
+import {
+  openSidebarPanel,
+  SIDEBAR_MIN_WIDTH,
+  setSidebarTabIds,
+  showSidebarPanel,
+  useShownSidebarPanel,
+} from '../../lib/sidebar-panel'
 import useEditor from '../../store/use-editor'
 
 import { useSidebarStore } from '../ui/primitives/sidebar'
 import { IconRail, type SidebarTab } from '../ui/sidebar/tab-bar'
 import { EditorLayoutMobile } from './editor-layout-mobile'
+import { useSceneSpan } from './views/scene-region'
+import { ViewBarRow } from './views/view-bar'
 
-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.
@@ -31,27 +39,49 @@ function LeftColumn({
   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 activePanel = useShownSidebarPanel(tabs)
   const setActivePanel = useEditor((s) => s.setActiveSidebarPanel)
 
   const isResizing = useRef(false)
 
-  // Ensure active panel is a valid tab
+  // Publish the rail's tabs so keyboard shortcuts (B, P) can open a panel.
   useEffect(() => {
-    if (tabs.length > 0 && !tabs.some((t) => t.id === activePanel)) {
-      setActivePanel(tabs[0]!.id)
-    }
-  }, [tabs, activePanel, setActivePanel])
+    setSidebarTabIds(tabs.map((tab) => tab.id))
+    return () => setSidebarTabIds([])
+  }, [tabs])
+
+  // A stage entry whose surface has left the stage (its view closed from the
+  // view bar) hands the rail back to the panel that was open before it.
+  const lastPanelTab = useRef<string | null>(null)
+  const activeTab = tabs.find((t) => t.id === activePanel)
+  if (activeTab && !activeTab.noPanel) lastPanelTab.current = activeTab.id
+  useEffect(() => {
+    if (activeTab?.stageActive !== false) return
+    const fallback = tabs.find((t) => t.id === lastPanelTab.current) ?? tabs.find((t) => !t.noPanel)
+    if (fallback) setActivePanel(fallback.id)
+  }, [activeTab, tabs, setActivePanel])
 
-  // Leaving the items tab while furnishing should drop back to select mode
+  // Leaving the items tab with the item tool in hand drops back to select mode
   useEffect(() => {
     if (activePanel === 'items') return
-    const { phase, mode, setMode } = useEditor.getState()
-    if (phase === 'furnish' && mode === 'build') {
+    const { mode, tool, setMode } = useEditor.getState()
+    if (mode === 'build' && tool === 'item') {
       setMode('select')
     }
   }, [activePanel])
 
+  // Paint mode entered without the panel (command palette, a material's "paint
+  // with") brings the host's Paint panel along, so the rail reflects the mode.
+  useEffect(
+    () =>
+      useEditor.subscribe((state, prev) => {
+        if (state.mode !== prev.mode && state.mode === 'material-paint') {
+          openSidebarPanel(['paint'])
+        }
+      }),
+    [],
+  )
+
   // Closing (collapsing) the sidebar disarms any build tool back to select
   useEffect(() => {
     if (!isCollapsed) return
@@ -72,20 +102,20 @@ function LeftColumn({
     [setIsDragging],
   )
 
-  // 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.
+  // Rail click: reopen a collapsed panel (at a usable width), collapse when
+  // re-clicking the open tab, otherwise switch tabs.
   const handleRailClick = useCallback(
     (id: string) => {
+      const tab = tabs.find((t) => t.id === id)
+      if (id !== activePanel) tabs.find((t) => t.id === activePanel)?.onDeselect?.()
+      tab?.onSelect?.()
       // noPanel tabs drive the stage, not the panel — leave collapse state alone.
-      if (tabs.find((t) => t.id === id)?.noPanel) {
+      if (tab?.noPanel) {
         setActivePanel(id)
         return
       }
       if (isCollapsed) {
-        setIsCollapsed(false)
-        if (width < SIDEBAR_MIN_WIDTH) setWidth(SIDEBAR_MIN_WIDTH)
-        setActivePanel(id)
+        showSidebarPanel(id)
         return
       }
       if (id === activePanel) {
@@ -94,7 +124,7 @@ function LeftColumn({
       }
       setActivePanel(id)
     },
-    [tabs, isCollapsed, width, activePanel, setIsCollapsed, setWidth, setActivePanel],
+    [tabs, isCollapsed, activePanel, setIsCollapsed, setActivePanel],
   )
 
   useEffect(() => {
@@ -159,59 +189,97 @@ function LeftColumn({
 
 // ── Right column: viewer area with toolbar ───────────────────────────────────
 
+/**
+ * Host toolbars floating over the stage. The right one carries scene controls
+ * (wall mode, display), so it sits at the right edge of the scene panes; the
+ * left one floats only when there is no view bar row to carry it.
+ */
+function StageToolbar({
+  toolbarLeft,
+  toolbarRight,
+}: {
+  toolbarLeft?: ReactNode
+  toolbarRight?: ReactNode
+}) {
+  const scene = useSceneSpan()
+  return (
+    <div className="pointer-events-none absolute top-3 right-0 left-0 z-20 h-8">
+      {toolbarLeft && (
+        <div className="pointer-events-auto absolute top-0 left-3 flex items-center gap-2">
+          {toolbarLeft}
+        </div>
+      )}
+      {toolbarRight && scene && (
+        <div
+          className="pointer-events-auto absolute top-0 flex items-center gap-2"
+          style={{ right: `calc(${(1 - scene.right) * 100}% + 12px)` }}
+        >
+          {toolbarRight}
+        </div>
+      )}
+    </div>
+  )
+}
+
 function RightColumn({
   toolbarLeft,
   toolbarRight,
+  viewBar,
   children,
   overlays,
   stageOverlay,
 }: {
   toolbarLeft?: ReactNode
   toolbarRight?: ReactNode
+  viewBar: boolean
   children: ReactNode
   overlays?: ReactNode
   stageOverlay?: 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. `isolate` matters: drei's `<Html>` computes a z-index
-          from camera distance and defaults to a range topping out at
-          16,777,271, and without a stacking context here those values compete
-          directly with the viewer toolbar (z-20), the stage overlay (z-10) and
-          the overlay band (z-30) — so an in-scene tool badge painted over all
-          three. Isolating pins every in-scene HTML layer inside the canvas,
-          where it belongs, and leaves their order relative to each other
-          untouched. */}
-      <div className="relative isolate flex-1 overflow-hidden">{children}</div>
-      {/* Stage overlay — replaces the canvas visually (e.g. studio gallery)
-          while keeping it mounted. Sits below the viewer toolbar (z-20) so
-          the stage switch stays reachable. */}
-      {stageOverlay && <div className="absolute inset-0 z-10">{stageOverlay}</div>}
-      {/* 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}
-        </div>
-      )}
+    <div className="relative flex min-w-0 flex-1 flex-col overflow-hidden">
+      {/* The view bar row sits above the stage, one bar per pane; the host's
+          left toolbar rides after the first pane's views. */}
+      {viewBar && <ViewBarRow leading={toolbarLeft} />}
+      <div
+        className="relative flex min-h-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)',
+        }}
+      >
+        {((!viewBar && toolbarLeft) || toolbarRight) && (
+          <StageToolbar
+            toolbarLeft={viewBar ? undefined : toolbarLeft}
+            toolbarRight={toolbarRight}
+          />
+        )}
+        {/* Canvas area. `isolate` matters: drei's `<Html>` computes a z-index
+            from camera distance and defaults to a range topping out at
+            16,777,271, and without a stacking context here those values compete
+            directly with the viewer toolbar (z-20), the stage overlay (z-10) and
+            the overlay band (z-30) — so an in-scene tool badge painted over all
+            three. Isolating pins every in-scene HTML layer inside the canvas,
+            where it belongs, and leaves their order relative to each other
+            untouched. */}
+        <div className="relative isolate flex-1 overflow-hidden">{children}</div>
+        {/* Stage overlay — replaces the whole stage visually (e.g. the item
+            builder) while keeping the canvas mounted. The view bar row steps
+            aside for it (see `EditorLayoutV2`); the host's toolbars stay above. */}
+        {stageOverlay && <div className="absolute inset-0 z-10">{stageOverlay}</div>}
+        {/* Overlays scoped to the stage. `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}
+          </div>
+        )}
+      </div>
     </div>
   )
 }
@@ -228,6 +296,8 @@ export interface EditorLayoutV2Props {
   viewerContent: ReactNode
   overlays?: ReactNode
   stageOverlay?: ReactNode
+  /** Show each pane's view bar. Off for hosts that present one fixed view. */
+  viewBar?: boolean
 }
 
 export function EditorLayoutV2({
@@ -240,6 +310,7 @@ export function EditorLayoutV2({
   viewerContent,
   overlays,
   stageOverlay,
+  viewBar = true,
 }: EditorLayoutV2Props) {
   const isCaptureMode = useEditor((s) => s.isCaptureMode)
   const isMobile = useIsMobile()
@@ -251,8 +322,9 @@ export function EditorLayoutV2({
         overlays={overlays}
         renderTabContent={renderTabContent}
         sidebarOverlay={sidebarOverlay}
-        sidebarTabs={sidebarTabs.filter((t) => !t.noPanel)}
+        sidebarTabs={sidebarTabs.filter((t) => !t.noPanel || t.onSelect)}
         viewerContent={viewerContent}
+        viewBar={viewBar}
         viewerToolbarLeft={viewerToolbarLeft}
         viewerToolbarRight={viewerToolbarRight}
       />
@@ -260,7 +332,7 @@ export function EditorLayoutV2({
   }
 
   return (
-    <div className="dark flex h-full w-full flex-col bg-sidebar text-foreground">
+    <div className="flex h-full w-full flex-col bg-sidebar text-foreground">
       {/* Top navbar */}
       {navbarSlot}
 
@@ -278,6 +350,7 @@ export function EditorLayoutV2({
           stageOverlay={stageOverlay}
           toolbarLeft={isCaptureMode ? undefined : viewerToolbarLeft}
           toolbarRight={isCaptureMode ? undefined : viewerToolbarRight}
+          viewBar={viewBar && !isCaptureMode && !stageOverlay}
         >
           {viewerContent}
         </RightColumn>

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

@@ -1,13 +1,19 @@
 'use client'
 
-import { emitter, useScene } from '@pascal-app/core'
+import { emitter, getProjectFileSink, type ProjectFileSink } from '@pascal-app/core'
 import { disposeObject3DResources, snapLevelsToTruePositions, useViewer } from '@pascal-app/viewer'
 import { useThree } from '@react-three/fiber'
 import { useEffect } from 'react'
 import * as THREE from 'three'
 import { OBJExporter } from 'three/examples/jsm/exporters/OBJExporter.js'
 import { STLExporter } from 'three/examples/jsm/exporters/STLExporter.js'
-import { exportSceneToGlb, nextFrames, prepareSceneForExport } from '../../lib/glb-export'
+import { downloadProjectFile } from '../../lib/download-project-file'
+import {
+  exportSceneToGlb,
+  prepareSceneForExport,
+  waitForExportGeometry,
+} from '../../lib/glb-export'
+import { exportPreparedSceneToIfc, ifcFileName } from '../../lib/ifc-export'
 import { exportSceneLevelsForPrint } from '../../lib/level-print-export'
 import type { ModelExport, ModelExportArtifact } from '../../lib/model-export'
 import {
@@ -20,6 +26,7 @@ import { filterPreparedSceneForPrintContent } from '../../lib/print-content-scop
 import { exportSceneToPrintStl, mergePrintExportDiagnostics } from '../../lib/print-export'
 import { applySemanticPrintFeatureThickness } from '../../lib/print-feature-thickness'
 import { compileSemanticPrintShellWithManifold } from '../../lib/print-shell-compiler-manifold-worker'
+import { getSavedSceneDocument } from '../../lib/scene'
 import { exportSceneToUsdz } from '../../lib/usdz-export'
 import useEditor from '../../store/use-editor'
 
@@ -51,7 +58,11 @@ export function ExportManager() {
   const setModelExport = useEditor((state) => state.setModelExport)
 
   useEffect(() => {
-    const exportFn: ModelExport = async (format = 'glb', options = {}) => {
+    const exportFn: ModelExport = async (format = 'glb', requested = {}) => {
+      const finishArtifact = artifactFinisher(getProjectFileSink())
+      // Resolve once: scene preparation prunes hidden nodes by default, and the
+      // IFC writer must drop the same nodes it rebuilds parametrically.
+      const options = { ...requested, onlyVisible: requested.onlyVisible ?? true }
       // Find the scene renderer group by name
       const sceneGroup = scene.getObjectByName('scene-renderer')
       if (!sceneGroup) {
@@ -67,11 +78,12 @@ export function ExportManager() {
       // without it every plant exports as its raycast collider, a white box).
       useViewer.getState().setExporting(true)
       try {
-        await nextFrames()
+        await waitForExportGeometry(getSavedSceneDocument().nodes, options)
+        const { nodes, collections } = getSavedSceneDocument()
 
         if (format === 'glb') {
           const warnings: string[] = []
-          const buffer = await exportSceneToGlb(sceneGroup, useScene.getState().nodes, {
+          const buffer = await exportSceneToGlb(sceneGroup, nodes, {
             ...options,
             onWarning: (warning) => warnings.push(warning),
           })
@@ -81,7 +93,7 @@ export function ExportManager() {
 
         if (format === 'usdz') {
           const warnings: string[] = []
-          const data = await exportSceneToUsdz(sceneGroup, useScene.getState().nodes, {
+          const data = await exportSceneToUsdz(sceneGroup, nodes, {
             ...options,
             onWarning: (warning) => warnings.push(warning),
           })
@@ -95,12 +107,11 @@ export function ExportManager() {
         // window, so the export snapshots the clean building, then restore.
         emitter.emit('thumbnail:before-capture', undefined)
         const restoreLevels = snapLevelsToTruePositions()
-        const nodes = useScene.getState().nodes
         let prepared: ReturnType<typeof prepareSceneForExport>
         try {
           prepared = prepareSceneForExport(sceneGroup, nodes, {
             ...options,
-            requireSynchronousBake: format === 'stl' || format === 'obj',
+            requireSynchronousBake: format === 'stl' || format === 'obj' || format === 'ifc',
           })
         } finally {
           restoreLevels()
@@ -206,6 +217,23 @@ export function ExportManager() {
             return finishArtifact(blob, `model_${date}.stl`, options.download)
           }
 
+          if (format === 'ifc') {
+            const { data, warnings } = exportPreparedSceneToIfc(exportScene, nodes, {
+              collections,
+              projectName: options.projectName,
+              onlyVisible: options.onlyVisible,
+              excludedNodeTypes: options.excludedNodeTypes,
+            })
+            const blob = new Blob([data], { type: 'application/x-step' })
+            return finishArtifact(
+              blob,
+              ifcFileName(options.projectName, `model_${date}`),
+              options.download,
+              undefined,
+              warnings,
+            )
+          }
+
           if (format === 'obj') {
             const exporter = new OBJExporter()
             const result = exporter.parse(exportScene)
@@ -236,22 +264,15 @@ export function ExportManager() {
   return null
 }
 
-function finishArtifact(
-  blob: Blob,
-  filename: string,
-  download: boolean | undefined,
-  metadata?: unknown,
-  warnings?: readonly string[],
-): ModelExportArtifact {
-  if (download !== false) downloadBlob(blob, filename)
-  return { blob, filename, metadata, warnings: warnings?.length ? warnings : undefined }
-}
-
-function downloadBlob(blob: Blob, filename: string) {
-  const url = URL.createObjectURL(blob)
-  const link = document.createElement('a')
-  link.href = url
-  link.download = filename
-  link.click()
-  URL.revokeObjectURL(url)
+function artifactFinisher(sink: ProjectFileSink | null) {
+  return async (
+    blob: Blob,
+    filename: string,
+    download: boolean | undefined,
+    metadata?: unknown,
+    warnings?: readonly string[],
+  ): Promise<ModelExportArtifact> => {
+    if (download !== false) await downloadProjectFile(blob, filename, sink)
+    return { blob, filename, metadata, warnings: warnings?.length ? warnings : undefined }
+  }
 }