@ifc-lite/viewer 1.9.0 → 1.11.0

package/src/components/viewer/HierarchyPanel.tsx

@@ -36,6 +36,7 @@ export function HierarchyPanel() {
   } = useIfc();
   const selectedEntityId = useViewerStore((s) => s.selectedEntityId);
   const setSelectedEntityId = useViewerStore((s) => s.setSelectedEntityId);
+  const setSelectedEntityIds = useViewerStore((s) => s.setSelectedEntityIds);
   const setSelectedEntity = useViewerStore((s) => s.setSelectedEntity);
   const setSelectedEntities = useViewerStore((s) => s.setSelectedEntities);
   const setSelectedModelId = useViewerStore((s) => s.setSelectedModelId);
@@ -44,6 +45,7 @@ export function HierarchyPanel() {
   const setStoreysSelection = useViewerStore((s) => s.setStoreysSelection);
   const clearStoreySelection = useViewerStore((s) => s.clearStoreySelection);
   const isolateEntities = useViewerStore((s) => s.isolateEntities);
+  const setHierarchyBasketSelection = useViewerStore((s) => s.setHierarchyBasketSelection);
 
   const hiddenEntities = useViewerStore((s) => s.hiddenEntities);
   const hideEntities = useViewerStore((s) => s.hideEntities);
@@ -180,10 +182,26 @@ export function HierarchyPanel() {
       return;
     }
 
+    const hierarchyRefs: Array<{ modelId: string; expressId: number }> = [];
+    for (const globalId of getNodeElements(node)) {
+      const ref = resolveEntityRef(globalId);
+      if (ref) hierarchyRefs.push(ref);
+    }
+    if (hierarchyRefs.length > 0) {
+      setHierarchyBasketSelection(hierarchyRefs);
+    } else if (isSpatialContainer(node.type) && node.expressIds.length > 0) {
+      setHierarchyBasketSelection([{
+        modelId: node.modelIds[0] || 'legacy',
+        expressId: node.expressIds[0],
+      }]);
+    }
+
     // Type group nodes - click to isolate entities, expand via chevron only
     if (node.type === 'type-group') {
       const elements = getNodeElements(node);
       if (elements.length > 0) {
+        setSelectedEntityIds(elements);
+        setSelectedEntity(resolveEntityRef(elements[0]));
         isolateEntities(elements);
       }
       return;
@@ -284,7 +302,7 @@ export function HierarchyPanel() {
         setSelectedEntity(resolveEntityRef(elementId));
       }
     }
-  }, [selectedStoreys, setStoreysSelection, clearStoreySelection, setSelectedEntityId, setSelectedEntity, setSelectedEntities, setActiveModel, toggleExpand, unifiedStoreys, models, isolateEntities, getNodeElements]);
+  }, [selectedStoreys, setStoreysSelection, clearStoreySelection, setSelectedEntityId, setSelectedEntityIds, setSelectedEntity, setSelectedEntities, setActiveModel, toggleExpand, unifiedStoreys, models, isolateEntities, getNodeElements, setHierarchyBasketSelection]);
 
   // Compute selection and visibility state for a node
   const computeNodeState = useCallback((node: TreeNode): { isSelected: boolean; nodeHidden: boolean; modelVisible?: boolean } => {

package/src/components/viewer/MainToolbar.tsx

@@ -34,11 +34,11 @@ import {
   SquareX,
   Building2,
   Plus,
-  Minus,
   MessageSquare,
   ClipboardCheck,
   Palette,
   Orbit,
+  LayoutTemplate,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
@@ -55,8 +55,9 @@ import {
   DropdownMenuSubContent,
 } from '@/components/ui/dropdown-menu';
 import { Progress } from '@/components/ui/progress';
-import { useViewerStore, isIfcxDataStore, stringToEntityRef } from '@/store';
-import type { EntityRef } from '@/store';
+import { useViewerStore, isIfcxDataStore } from '@/store';
+import { goHomeFromStore, resetVisibilityForHomeFromStore } from '@/store/homeView';
+import { executeBasketIsolate } from '@/store/basket/basketCommands';
 import { useIfc } from '@/hooks/useIfc';
 import { cn } from '@/lib/utils';
 import { GLTFExporter, CSVExporter } from '@ifc-lite/export';
@@ -169,8 +170,6 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
   const toggleTheme = useViewerStore((state) => state.toggleTheme);
   const selectedEntityId = useViewerStore((state) => state.selectedEntityId);
   const hideEntities = useViewerStore((state) => state.hideEntities);
-  const showAll = useViewerStore((state) => state.showAll);
-  const clearStoreySelection = useViewerStore((state) => state.clearStoreySelection);
   const error = useViewerStore((state) => state.error);
   const cameraCallbacks = useViewerStore((state) => state.cameraCallbacks);
   const hoverTooltipsEnabled = useViewerStore((state) => state.hoverTooltipsEnabled);
@@ -189,14 +188,11 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
   const setRightPanelCollapsed = useViewerStore((state) => state.setRightPanelCollapsed);
   const projectionMode = useViewerStore((state) => state.projectionMode);
   const toggleProjectionMode = useViewerStore((state) => state.toggleProjectionMode);
-  // Basket state (= + − isolation basket)
+  // Basket presentation state
   const pinboardEntities = useViewerStore((state) => state.pinboardEntities);
-  const setBasket = useViewerStore((state) => state.setBasket);
-  const addToBasket = useViewerStore((state) => state.addToBasket);
-  const removeFromBasket = useViewerStore((state) => state.removeFromBasket);
-  const clearBasket = useViewerStore((state) => state.clearBasket);
-  // NOTE: selectedEntity and selectedEntitiesSet accessed via getState() in callbacks
-  // to avoid re-rendering MainToolbar on every Cmd+Click selection change.
+  const basketViewCount = useViewerStore((state) => state.basketViews.length);
+  const basketPresentationVisible = useViewerStore((state) => state.basketPresentationVisible);
+  const toggleBasketPresentationVisible = useViewerStore((state) => state.toggleBasketPresentationVisible);
   // Lens state
   const lensPanelVisible = useViewerStore((state) => state.lensPanelVisible);
   const toggleLensPanel = useViewerStore((state) => state.toggleLensPanel);
@@ -306,68 +302,8 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     e.target.value = '';
   }, [loadFilesSequentially, addIfcxOverlays, ifcDataStore]);
 
-  /** Get current selection as EntityRef[] — uses getState() to avoid reactive subscriptions */
-  const getSelectionRefs = useCallback((): EntityRef[] => {
-    const state = useViewerStore.getState();
-    if (state.selectedEntitiesSet.size > 0) {
-      const refs: EntityRef[] = [];
-      for (const str of state.selectedEntitiesSet) {
-        refs.push(stringToEntityRef(str));
-      }
-      return refs;
-    }
-    if (state.selectedEntity) {
-      return [state.selectedEntity];
-    }
-    return [];
-  }, []);
-
   const hasSelection = selectedEntityId !== null;
 
-  // Basket state
-  const showPinboard = useViewerStore((state) => state.showPinboard);
-
-  // Clear multi-select state after basket operations so subsequent − targets a single entity
-  const clearMultiSelect = useCallback(() => {
-    const state = useViewerStore.getState();
-    if (state.selectedEntitiesSet.size > 0) {
-      useViewerStore.setState({ selectedEntitiesSet: new Set(), selectedEntityIds: new Set() });
-    }
-  }, []);
-
-  // Basket operations
-  const handleSetBasket = useCallback(() => {
-    const state = useViewerStore.getState();
-    // If basket already exists and user hasn't explicitly multi-selected,
-    // re-apply the basket instead of replacing it with a stale single selection.
-    // Only an explicit multi-selection (Ctrl+Click) should replace an existing basket.
-    if (state.pinboardEntities.size > 0 && state.selectedEntitiesSet.size === 0) {
-      showPinboard();
-      return;
-    }
-    const refs = getSelectionRefs();
-    if (refs.length > 0) {
-      setBasket(refs);
-      clearMultiSelect();
-    }
-  }, [getSelectionRefs, setBasket, showPinboard, clearMultiSelect]);
-
-  const handleAddToBasket = useCallback(() => {
-    const refs = getSelectionRefs();
-    if (refs.length > 0) {
-      addToBasket(refs);
-      clearMultiSelect();
-    }
-  }, [getSelectionRefs, addToBasket, clearMultiSelect]);
-
-  const handleRemoveFromBasket = useCallback(() => {
-    const refs = getSelectionRefs();
-    if (refs.length > 0) {
-      removeFromBasket(refs);
-      clearMultiSelect();
-    }
-  }, [getSelectionRefs, removeFromBasket, clearMultiSelect]);
-
   const clearSelection = useViewerStore((state) => state.clearSelection);
 
   const handleHide = useCallback(() => {
@@ -383,9 +319,16 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
   }, [selectedEntityId, hideEntities, clearSelection]);
 
   const handleShowAll = useCallback(() => {
-    showAll();     // Clear hiddenEntities + isolatedEntities (basket contents preserved)
-    clearStoreySelection(); // Also clear storey filtering
-  }, [showAll, clearStoreySelection]);
+    resetVisibilityForHomeFromStore();
+  }, []);
+
+  const handleIsolate = useCallback(() => {
+    executeBasketIsolate();
+  }, []);
+
+  const handleHome = useCallback(() => {
+    goHomeFromStore();
+  }, []);
 
   const handleExportGLB = useCallback(() => {
     if (!geometryResult) return;
@@ -759,36 +702,35 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
 
       <Separator orientation="vertical" className="h-6 mx-1" />
 
-      {/* ── Basket Isolation (= + −) ── */}
+      {/* ── Basket Presentation ── */}
       <Tooltip>
         <TooltipTrigger asChild>
           <Button
-            variant={pinboardEntities.size > 0 ? 'default' : 'ghost'}
+            variant={basketPresentationVisible ? 'default' : 'ghost'}
             size="icon-sm"
             onClick={(e) => {
               (e.currentTarget as HTMLButtonElement).blur();
-              handleSetBasket();
+              toggleBasketPresentationVisible();
             }}
-            disabled={!hasSelection && pinboardEntities.size === 0}
+            disabled={models.size === 0 && !geometryResult}
             className={cn(
-              pinboardEntities.size > 0 && 'bg-primary text-primary-foreground relative',
+              (basketPresentationVisible || pinboardEntities.size > 0) && 'relative',
             )}
           >
-            <Equal className="h-4 w-4" />
-            {pinboardEntities.size > 0 && (
+            <LayoutTemplate className="h-4 w-4" />
+            {(basketViewCount > 0 || pinboardEntities.size > 0) && (
               <span className="absolute -top-1 -right-1 bg-primary text-primary-foreground text-[9px] font-bold rounded-full min-w-[14px] h-[14px] flex items-center justify-center px-0.5 border border-background">
-                {pinboardEntities.size}
+                {basketViewCount > 0 ? `${basketViewCount}/${pinboardEntities.size}` : pinboardEntities.size}
               </span>
             )}
           </Button>
         </TooltipTrigger>
         <TooltipContent>
-          Set Basket — isolate selection <span className="ml-2 text-xs opacity-60">(I)</span>
+          Basket Presentation Dock (Views: {basketViewCount}, Entities: {pinboardEntities.size})
         </TooltipContent>
       </Tooltip>
-      <ActionButton icon={Plus} label="Add to Basket" onClick={handleAddToBasket} shortcut="+" disabled={!hasSelection} />
-      <ActionButton icon={Minus} label="Remove from Basket" onClick={handleRemoveFromBasket} shortcut="−" disabled={!hasSelection} />
 
+      <ActionButton icon={Equal} label="Isolate (Set Basket)" onClick={handleIsolate} shortcut="I / =" />
       <ActionButton icon={EyeOff} label="Hide Selection" onClick={handleHide} shortcut="Del / Space" disabled={!hasSelection} />
       <ActionButton icon={Eye} label="Show All (Reset Filters)" onClick={handleShowAll} shortcut="A" />
       <ActionButton icon={Maximize2} label="Fit All" onClick={() => cameraCallbacks.fitAll?.()} shortcut="Z" />
@@ -869,7 +811,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
       <Separator orientation="vertical" className="h-6 mx-1" />
 
       {/* ── Camera & View ── */}
-      <ActionButton icon={Home} label="Home (Isometric)" onClick={() => cameraCallbacks.home?.()} shortcut="H" />
+      <ActionButton icon={Home} label="Home (Isometric + Reset Visibility)" onClick={handleHome} shortcut="H" />
 
       {/* Orthographic / Perspective toggle */}
       <Tooltip>
@@ -924,8 +866,8 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
           <TooltipContent>Preset Views</TooltipContent>
         </Tooltip>
         <DropdownMenuContent>
-          <DropdownMenuItem onClick={() => cameraCallbacks.home?.()}>
-            <Box className="h-4 w-4 mr-2" /> Isometric <span className="ml-auto text-xs opacity-60">0</span>
+          <DropdownMenuItem onClick={handleHome}>
+            <Box className="h-4 w-4 mr-2" /> Isometric <span className="ml-auto text-xs opacity-60">H</span>
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem onClick={() => cameraCallbacks.setPresetView?.('top')}>
@@ -988,6 +930,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
         </TooltipTrigger>
         <TooltipContent>Info (?)</TooltipContent>
       </Tooltip>
+
     </div>
   );
 }

package/src/components/viewer/Section2DPanel.tsx

@@ -52,6 +52,8 @@ export function Section2DPanel({
   // ═══════════════════════════════════════════════════════════════════════════
   const panelVisible = useViewerStore((s) => s.drawing2DPanelVisible);
   const setDrawingPanelVisible = useViewerStore((s) => s.setDrawing2DPanelVisible);
+  const suppressNextSection2DPanelAutoOpen = useViewerStore((s) => s.suppressNextSection2DPanelAutoOpen);
+  const setSuppressNextSection2DPanelAutoOpen = useViewerStore((s) => s.setSuppressNextSection2DPanelAutoOpen);
   const drawing = useViewerStore((s) => s.drawing2D);
   const setDrawing = useViewerStore((s) => s.setDrawing2D);
   const status = useViewerStore((s) => s.drawing2DStatus);
@@ -148,10 +150,15 @@ export function Section2DPanel({
   useEffect(() => {
     // Section tool was just activated
     if (activeTool === 'section' && prevActiveToolRef.current !== 'section' && geometryResult?.meshes) {
+      if (suppressNextSection2DPanelAutoOpen) {
+        setSuppressNextSection2DPanelAutoOpen(false);
+        prevActiveToolRef.current = activeTool;
+        return;
+      }
       setDrawingPanelVisible(true);
     }
     prevActiveToolRef.current = activeTool;
-  }, [activeTool, geometryResult, setDrawingPanelVisible]);
+  }, [activeTool, geometryResult, setDrawingPanelVisible, suppressNextSection2DPanelAutoOpen, setSuppressNextSection2DPanelAutoOpen]);
 
   // ═══════════════════════════════════════════════════════════════════════════
   // LOCAL STATE

package/src/components/viewer/Viewport.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useCallback, useEffect, useRef, useState, useMemo } from 'react';
-import { Renderer } from '@ifc-lite/renderer';
+import { Renderer, type VisualEnhancementOptions } from '@ifc-lite/renderer';
 import type { MeshData, CoordinateInfo } from '@ifc-lite/geometry';
 import { useViewerStore, resolveEntityRef, type MeasurePoint, type SnapVisualization } from '@/store';
 import {
@@ -158,7 +158,20 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
   const { updateCameraRotationRealtime, updateScaleRealtime, setCameraCallbacks } = useCameraState();
 
   // Theme state
-  const { theme } = useThemeState();
+  const {
+    theme,
+    isMobile,
+    visualEnhancementsEnabled,
+    edgeContrastEnabled,
+    edgeContrastIntensity,
+    contactShadingQuality,
+    contactShadingIntensity,
+    contactShadingRadius,
+    separationLinesEnabled,
+    separationLinesQuality,
+    separationLinesIntensity,
+    separationLinesRadius,
+  } = useThemeState();
 
   // Hover state
   const { hoverTooltipsEnabled, setHoverState, clearHover } = useHoverState();
@@ -215,6 +228,37 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
   // Theme-aware clear color ref (updated when theme changes)
   // Tokyo Night storm: #1a1b26 = rgb(26, 27, 38)
   const clearColorRef = useRef<[number, number, number, number]>([0.102, 0.106, 0.149, 1]);
+  const visualEnhancement = useMemo<VisualEnhancementOptions>(() => ({
+    enabled: visualEnhancementsEnabled,
+    edgeContrast: {
+      enabled: edgeContrastEnabled,
+      intensity: edgeContrastIntensity,
+    },
+    contactShading: {
+      quality: isMobile ? 'off' : contactShadingQuality,
+      intensity: contactShadingIntensity,
+      radius: contactShadingRadius,
+    },
+    separationLines: {
+      enabled: separationLinesEnabled,
+      quality: isMobile ? 'low' : separationLinesQuality,
+      intensity: isMobile ? Math.min(0.4, separationLinesIntensity) : separationLinesIntensity,
+      radius: isMobile ? 1.0 : separationLinesRadius,
+    },
+  }), [
+    visualEnhancementsEnabled,
+    edgeContrastEnabled,
+    edgeContrastIntensity,
+    isMobile,
+    contactShadingQuality,
+    contactShadingIntensity,
+    contactShadingRadius,
+    separationLinesEnabled,
+    separationLinesQuality,
+    separationLinesIntensity,
+    separationLinesRadius,
+  ]);
+  const visualEnhancementRef = useRef<VisualEnhancementOptions>(visualEnhancement);
 
   // Animation frame ref
   const animationFrameRef = useRef<number | null>(null);
@@ -330,6 +374,7 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
   useEffect(() => { measurementConstraintEdgeRef.current = measurementConstraintEdge; }, [measurementConstraintEdge]);
   useEffect(() => { sectionPlaneRef.current = sectionPlane; }, [sectionPlane]);
   useEffect(() => { sectionRangeRef.current = sectionRange; }, [sectionRange]);
+  useEffect(() => { visualEnhancementRef.current = visualEnhancement; }, [visualEnhancement]);
   useEffect(() => {
     geometryRef.current = geometry;
   }, [geometry]);
@@ -445,6 +490,21 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
       setIsInitialized(true);
 
       const camera = renderer.getCamera();
+      const renderCurrent = () => {
+        renderer.render({
+          hiddenIds: hiddenEntitiesRef.current,
+          isolatedIds: isolatedEntitiesRef.current,
+          selectedId: selectedEntityIdRef.current,
+          selectedModelIndex: selectedModelIndexRef.current,
+          clearColor: clearColorRef.current,
+          visualEnhancement: visualEnhancementRef.current,
+          sectionPlane: activeToolRef.current === 'section' ? {
+            ...sectionPlaneRef.current,
+            min: sectionRangeRef.current?.min,
+            max: sectionRangeRef.current?.max,
+          } : undefined,
+        });
+      };
 
       // Register camera callbacks for ViewCube and other controls
       setCameraCallbacks({
@@ -453,18 +513,7 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
           const rotation = coordinateInfoRef.current?.buildingRotation;
           camera.setPresetView(view, geometryBoundsRef.current, rotation);
           // Initial render - animation loop will continue rendering during animation
-          renderer.render({
-            hiddenIds: hiddenEntitiesRef.current,
-            isolatedIds: isolatedEntitiesRef.current,
-            selectedId: selectedEntityIdRef.current,
-            selectedModelIndex: selectedModelIndexRef.current,
-            clearColor: clearColorRef.current,
-            sectionPlane: activeToolRef.current === 'section' ? {
-              ...sectionPlaneRef.current,
-              min: sectionRangeRef.current?.min,
-              max: sectionRangeRef.current?.max,
-            } : undefined,
-          });
+          renderCurrent();
           calculateScale();
         },
         fitAll: () => {
@@ -479,34 +528,12 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
         },
         zoomIn: () => {
           camera.zoom(-50, false);
-          renderer.render({
-            hiddenIds: hiddenEntitiesRef.current,
-            isolatedIds: isolatedEntitiesRef.current,
-            selectedId: selectedEntityIdRef.current,
-            selectedModelIndex: selectedModelIndexRef.current,
-            clearColor: clearColorRef.current,
-            sectionPlane: activeToolRef.current === 'section' ? {
-              ...sectionPlaneRef.current,
-              min: sectionRangeRef.current?.min,
-              max: sectionRangeRef.current?.max,
-            } : undefined,
-          });
+          renderCurrent();
           calculateScale();
         },
         zoomOut: () => {
           camera.zoom(50, false);
-          renderer.render({
-            hiddenIds: hiddenEntitiesRef.current,
-            isolatedIds: isolatedEntitiesRef.current,
-            selectedId: selectedEntityIdRef.current,
-            selectedModelIndex: selectedModelIndexRef.current,
-            clearColor: clearColorRef.current,
-            sectionPlane: activeToolRef.current === 'section' ? {
-              ...sectionPlaneRef.current,
-              min: sectionRangeRef.current?.min,
-              max: sectionRangeRef.current?.max,
-            } : undefined,
-          });
+          renderCurrent();
           calculateScale();
         },
         frameSelection: () => {
@@ -528,18 +555,7 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
         orbit: (deltaX: number, deltaY: number) => {
           // Orbit camera from ViewCube drag
           camera.orbit(deltaX, deltaY, false);
-          renderer.render({
-            hiddenIds: hiddenEntitiesRef.current,
-            isolatedIds: isolatedEntitiesRef.current,
-            selectedId: selectedEntityIdRef.current,
-            selectedModelIndex: selectedModelIndexRef.current,
-            clearColor: clearColorRef.current,
-            sectionPlane: activeToolRef.current === 'section' ? {
-              ...sectionPlaneRef.current,
-              min: sectionRangeRef.current?.min,
-              max: sectionRangeRef.current?.max,
-            } : undefined,
-          });
+          renderCurrent();
           updateCameraRotationRealtime(camera.getRotation());
           calculateScale();
         },
@@ -551,37 +567,47 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
         },
         setProjectionMode: (mode) => {
           camera.setProjectionMode(mode);
-          renderer.render({
-            hiddenIds: hiddenEntitiesRef.current,
-            isolatedIds: isolatedEntitiesRef.current,
-            selectedId: selectedEntityIdRef.current,
-            selectedModelIndex: selectedModelIndexRef.current,
-            clearColor: clearColorRef.current,
-            sectionPlane: activeToolRef.current === 'section' ? {
-              ...sectionPlaneRef.current,
-              min: sectionRangeRef.current?.min,
-              max: sectionRangeRef.current?.max,
-            } : undefined,
-          });
+          renderCurrent();
           calculateScale();
         },
         toggleProjectionMode: () => {
           camera.toggleProjectionMode();
-          renderer.render({
-            hiddenIds: hiddenEntitiesRef.current,
-            isolatedIds: isolatedEntitiesRef.current,
-            selectedId: selectedEntityIdRef.current,
-            selectedModelIndex: selectedModelIndexRef.current,
-            clearColor: clearColorRef.current,
-            sectionPlane: activeToolRef.current === 'section' ? {
-              ...sectionPlaneRef.current,
-              min: sectionRangeRef.current?.min,
-              max: sectionRangeRef.current?.max,
-            } : undefined,
-          });
+          renderCurrent();
           calculateScale();
         },
         getProjectionMode: () => camera.getProjectionMode(),
+        getViewpoint: () => ({
+          position: camera.getPosition(),
+          target: camera.getTarget(),
+          up: camera.getUp(),
+          fov: camera.getFOV(),
+          projectionMode: camera.getProjectionMode(),
+          orthoSize: camera.getProjectionMode() === 'orthographic' ? camera.getOrthoSize() : undefined,
+        }),
+        applyViewpoint: (viewpoint, animate = true, durationMs = 300) => {
+          camera.setProjectionMode(viewpoint.projectionMode);
+          useViewerStore.setState({ projectionMode: viewpoint.projectionMode });
+          camera.setFOV(viewpoint.fov);
+          if (
+            viewpoint.projectionMode === 'orthographic' &&
+            typeof viewpoint.orthoSize === 'number' &&
+            Number.isFinite(viewpoint.orthoSize)
+          ) {
+            camera.setOrthoSize(viewpoint.orthoSize);
+          }
+
+          if (animate) {
+            camera.animateToWithUp(viewpoint.position, viewpoint.target, viewpoint.up, durationMs);
+          } else {
+            camera.setPosition(viewpoint.position.x, viewpoint.position.y, viewpoint.position.z);
+            camera.setTarget(viewpoint.target.x, viewpoint.target.y, viewpoint.target.z);
+            camera.setUp(viewpoint.up.x, viewpoint.up.y, viewpoint.up.z);
+          }
+
+          renderCurrent();
+          updateCameraRotationRealtime(camera.getRotation());
+          calculateScale();
+        },
       });
 
       // ResizeObserver
@@ -592,34 +618,12 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
         const w = alignToWebGPU(Math.max(1, Math.floor(rect.width)));
         const h = Math.max(1, Math.floor(rect.height));
         renderer.resize(w, h);
-        renderer.render({
-          hiddenIds: hiddenEntitiesRef.current,
-          isolatedIds: isolatedEntitiesRef.current,
-          selectedId: selectedEntityIdRef.current,
-          selectedModelIndex: selectedModelIndexRef.current,
-          clearColor: clearColorRef.current,
-          sectionPlane: activeToolRef.current === 'section' ? {
-            ...sectionPlaneRef.current,
-            min: sectionRangeRef.current?.min,
-            max: sectionRangeRef.current?.max,
-          } : undefined,
-        });
+        renderCurrent();
       });
       resizeObserver.observe(canvas);
 
       // Initial render
-      renderer.render({
-        hiddenIds: hiddenEntitiesRef.current,
-        isolatedIds: isolatedEntitiesRef.current,
-        selectedId: selectedEntityIdRef.current,
-        selectedModelIndex: selectedModelIndexRef.current,
-        clearColor: clearColorRef.current,
-        sectionPlane: activeToolRef.current === 'section' ? {
-          ...sectionPlaneRef.current,
-          min: sectionRangeRef.current?.min,
-          max: sectionRangeRef.current?.max,
-        } : undefined,
-      });
+      renderCurrent();
     });
 
     return () => {
@@ -643,6 +647,7 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
   // ===== Drawing 2D state for render updates =====
   const drawing2D = useViewerStore((s) => s.drawing2D);
   const show3DOverlay = useViewerStore((s) => s.drawing2DDisplayOptions.show3DOverlay);
+  const showHiddenLines = useViewerStore((s) => s.drawing2DDisplayOptions.showHiddenLines);
 
   // ===== Streaming progress =====
   const progress = useViewerStore((state) => state.progress);
@@ -767,6 +772,7 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
     clearColorRef,
     sectionPlaneRef,
     sectionRangeRef,
+    visualEnhancementRef,
     lastCameraStateRef,
     updateCameraRotationRealtime,
     calculateScale,
@@ -791,6 +797,7 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
     isInitialized,
     theme,
     clearColorRef,
+    visualEnhancementRef,
     hiddenEntities,
     isolatedEntities,
     selectedEntityId,
@@ -810,11 +817,13 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
     activeToolRef,
     drawing2D,
     show3DOverlay,
+    showHiddenLines,
   });
 
   return (
     <canvas
       ref={canvasRef}
+      data-viewport="main"
       className="w-full h-full block"
     />
   );

package/src/components/viewer/ViewportContainer.tsx

@@ -7,6 +7,7 @@ import { Viewport } from './Viewport';
 import { ViewportOverlays } from './ViewportOverlays';
 import { ToolOverlays } from './ToolOverlays';
 import { Section2DPanel } from './Section2DPanel';
+import { BasketPresentationDock } from './BasketPresentationDock';
 import { useViewerStore } from '@/store';
 import { useIfc } from '@/hooks/useIfc';
 import { useWebGPU } from '@/hooks/useWebGPU';
@@ -585,6 +586,7 @@ export function ViewportContainer() {
       />
       <ViewportOverlays />
       <ToolOverlays />
+      <BasketPresentationDock />
       <Section2DPanel 
         mergedGeometry={mergedGeometryResult}
         computedIsolatedIds={computedIsolatedIds}

package/src/components/viewer/ViewportOverlays.tsx

@@ -12,7 +12,9 @@ import {
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useViewerStore } from '@/store';
+import { goHomeFromStore } from '@/store/homeView';
 import { useIfc } from '@/hooks/useIfc';
+import { cn } from '@/lib/utils';
 import { ViewCube, type ViewCubeRef } from './ViewCube';
 import { AxisHelper } from './AxisHelper';
 
@@ -20,6 +22,7 @@ export function ViewportOverlays() {
   const selectedStoreys = useViewerStore((s) => s.selectedStoreys);
   const hiddenEntities = useViewerStore((s) => s.hiddenEntities);
   const isolatedEntities = useViewerStore((s) => s.isolatedEntities);
+  const basketPresentationVisible = useViewerStore((s) => s.basketPresentationVisible);
   const cameraCallbacks = useViewerStore((s) => s.cameraCallbacks);
   const setOnCameraRotationChange = useViewerStore((s) => s.setOnCameraRotationChange);
   const setOnScaleChange = useViewerStore((s) => s.setOnScaleChange);
@@ -99,8 +102,8 @@ export function ViewportOverlays() {
   }, [cameraCallbacks]);
 
   const handleHome = useCallback(() => {
-    cameraCallbacks.home?.();
-  }, [cameraCallbacks]);
+    goHomeFromStore();
+  }, []);
 
   const handleFitAll = useCallback(() => {
     cameraCallbacks.fitAll?.();
@@ -161,7 +164,10 @@ export function ViewportOverlays() {
 
       {/* Context Info (bottom-center) - Storey names */}
       {storeyNames && storeyNames.length > 0 && (
-        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 px-4 py-2 bg-background/80 backdrop-blur-sm rounded-full border shadow-sm">
+        <div className={cn(
+          'absolute left-1/2 -translate-x-1/2 px-4 py-2 bg-background/80 backdrop-blur-sm rounded-full border shadow-sm',
+          basketPresentationVisible ? 'bottom-28' : 'bottom-4',
+        )}>
           <div className="flex items-center gap-2 text-sm">
             <Layers className="h-4 w-4 text-primary" />
             <span className="font-medium">