@ifc-lite/viewer 1.27.0 → 1.28.1

package/src/components/viewer/PropertiesPanel.tsx

@@ -32,11 +32,10 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip
 import { useViewerStore } from '@/store';
 import { toGlobalIdFromModels } from '@/store/globalId';
 import { useIfc } from '@/hooks/useIfc';
-import { getNativeEntityDetails } from '@/services/desktop-native-metadata';
 import { configureMutationView } from '@/utils/configureMutationView';
 import { IfcQuery } from '@ifc-lite/query';
 import { MutablePropertyView } from '@ifc-lite/mutations';
-import { extractClassificationsOnDemand, extractMaterialsOnDemand, extractTypePropertiesOnDemand, extractTypeEntityOwnProperties, extractDocumentsOnDemand, extractRelationshipsOnDemand, extractGeoreferencingOnDemand, extractLengthUnitScale, getAttributeNames, type IfcDataStore } from '@ifc-lite/parser';
+import { extractClassificationsOnDemand, extractMaterialsOnDemand, extractMaterialPropertiesOnDemand, extractTypePropertiesOnDemand, extractTypeEntityOwnProperties, extractDocumentsOnDemand, extractRelationshipsOnDemand, extractGeoreferencingOnDemand, extractLengthUnitScale, getAttributeNames, type IfcDataStore, type MaterialPsetGroup } from '@ifc-lite/parser';
 import type { NewEntity } from '@ifc-lite/mutations';
 import { EntityFlags, RelationshipType, isSpatialStructureTypeName, isStoreyLikeSpatialTypeName } from '@ifc-lite/data';
 import type { EntityRef, FederatedModel } from '@/store/types';
@@ -47,6 +46,7 @@ import { QuantitySetCard } from './properties/QuantitySetCard';
 import { ModelMetadataPanel } from './properties/ModelMetadataPanel';
 import { ClassificationCard } from './properties/ClassificationCard';
 import { MaterialCard } from './properties/MaterialCard';
+import { MaterialTotalsPanel } from './properties/MaterialTotalsPanel';
 import { ScheduleCard } from './properties/ScheduleCard';
 import { TaskEditCard } from './properties/TaskEditCard';
 import { DocumentCard } from './properties/DocumentCard';
@@ -56,6 +56,17 @@ import { BsddCard } from './properties/BsddCard';
 import { GeoreferencingPanel } from './properties/GeoreferencingPanel';
 import { RawStepCard } from './properties/RawStepCard';
 
+/** IFC material *definition* classes selectable from the Materials tab. */
+const MATERIAL_DEF_TYPES = new Set([
+  'IFCMATERIAL',
+  'IFCMATERIALLAYERSET',
+  'IFCMATERIALLAYERSETUSAGE',
+  'IFCMATERIALPROFILESET',
+  'IFCMATERIALPROFILESETUSAGE',
+  'IFCMATERIALCONSTITUENTSET',
+  'IFCMATERIALLIST',
+]);
+
 type DisplayProperty = { name: string; value: unknown; isMutated: boolean };
 type DisplayPropertySet = {
   name: string;
@@ -150,7 +161,7 @@ export function PropertiesPanel() {
       const m = models.get(selectedEntity.modelId);
       if (m) {
         return {
-          modelQuery: m.nativeMetadata ? null : (m.ifcDataStore ? new IfcQuery(m.ifcDataStore) : null),
+          modelQuery: m.ifcDataStore ? new IfcQuery(m.ifcDataStore) : null,
           model: m,
         };
       }
@@ -189,8 +200,6 @@ export function PropertiesPanel() {
   const [copied, setCopied] = useState(false);
   const [coordCopied, setCoordCopied] = useState<string | null>(null);
   const [coordOpen, setCoordOpen] = useState(false);
-  const [nativeDetails, setNativeDetails] = useState<import('@/store/types').NativeMetadataEntityDetails | null>(null);
-  const [nativeDetailsState, setNativeDetailsState] = useState<'idle' | 'loading' | 'error'>('idle');
 
   // Inline property editing is gated by the global edit-mode pill in
   // the main toolbar (see `uiSlice.editEnabled`). Reading it from the
@@ -199,32 +208,6 @@ export function PropertiesPanel() {
   // tools — behind a single switch.
   const editMode = useViewerStore((s) => s.editEnabled);
 
-  useEffect(() => {
-    if (!selectedEntity || !model?.nativeMetadata) {
-      setNativeDetails(null);
-      setNativeDetailsState('idle');
-      return;
-    }
-    let cancelled = false;
-    setNativeDetailsState('loading');
-    void getNativeEntityDetails(model.nativeMetadata.cacheKey, selectedEntity.expressId)
-      .then((details) => {
-        if (!cancelled) {
-          setNativeDetails(details);
-          setNativeDetailsState('idle');
-        }
-      })
-      .catch(() => {
-        if (!cancelled) {
-          setNativeDetails(null);
-          setNativeDetailsState('error');
-        }
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [selectedEntity, model?.nativeMetadata]);
-
   const copyToClipboard = useCallback((text: string) => {
     navigator.clipboard.writeText(text);
     setCopied(true);
@@ -450,6 +433,16 @@ export function PropertiesPanel() {
     return typeName.endsWith('Type');
   }, [selectedEntity, model, ifcDataStore]);
 
+  // Detect a material definition selected from the "Materials" hierarchy tab.
+  // Materials aren't products, so the EntityTable's getTypeName doesn't cover
+  // them — read the raw class from the entity index instead.
+  const selectedMaterialId = useMemo(() => {
+    if (!selectedEntity) return null;
+    const dataStore = model?.ifcDataStore ?? ifcDataStore;
+    const rawType = (dataStore as IfcDataStore | null)?.entityIndex?.byId?.get(selectedEntity.expressId)?.type;
+    return rawType && MATERIAL_DEF_TYPES.has(rawType.toUpperCase()) ? selectedEntity.expressId : null;
+  }, [selectedEntity, model, ifcDataStore]);
+
   // Unified property/quantity access - EntityNode handles on-demand extraction automatically
   // These hooks must be called before any early return to maintain hook order
   // Use MutablePropertyView as primary source when available (it handles base + mutations)
@@ -627,6 +620,17 @@ export function PropertiesPanel() {
     return extractMaterialsOnDemand(dataStore as IfcDataStore, lookupExpressId);
   }, [selectedEntity, lookupExpressId, model, ifcDataStore]);
 
+  // Property sets attached to the selected entity's material(s) via
+  // IfcMaterialProperties (e.g. Pset_MaterialConcrete). These live on the
+  // IfcMaterial — not on the object — so they never surface through the
+  // occurrence/type pset paths; resolve them through the material association.
+  const materialProperties: MaterialPsetGroup[] = useMemo(() => {
+    if (!selectedEntity || lookupExpressId === null) return [];
+    const dataStore = model?.ifcDataStore ?? ifcDataStore;
+    if (!dataStore) return [];
+    return extractMaterialPropertiesOnDemand(dataStore as IfcDataStore, lookupExpressId);
+  }, [selectedEntity, lookupExpressId, model, ifcDataStore]);
+
   // Extract documents for the selected entity from the IFC data store
   const documents = useMemo(() => {
     if (!selectedEntity || lookupExpressId === null) return [];
@@ -925,51 +929,6 @@ export function PropertiesPanel() {
     return names;
   }, [attributes]);
 
-  const isNativeLazySelection = Boolean(selectedEntity && model?.nativeMetadata);
-
-  // Native-lazy entities (server-streamed without full STEP data) can
-  // never be edited; the per-row editors below self-guard via
-  // `enableEditing={editMode && !isNativeLazySelection}`. The old
-  // panel-local `editMode` would flip itself off when a native-lazy
-  // entity was selected; now that the flag is global it stays on, and
-  // the field-level guards do the work.
-
-  const nativeSpatialInfo = useMemo(() => {
-    if (!nativeDetails?.spatial?.storeyName) return null;
-    return {
-      storeyId: nativeDetails.spatial.storeyId ?? undefined,
-      storeyName: nativeDetails.spatial.storeyName,
-      elevation: nativeDetails.spatial.elevation ?? undefined,
-      height: nativeDetails.spatial.height ?? undefined,
-    };
-  }, [nativeDetails]);
-
-  const nativeOccurrenceProperties = useMemo<PropertySet[]>(() => {
-    if (!nativeDetails) return [];
-    return nativeDetails.properties.map((pset) => ({
-      name: pset.name,
-      properties: pset.properties.map((property) => ({
-        name: property.name,
-        value: property.value,
-        isMutated: false,
-      })),
-      isNewPset: false,
-      source: 'instance' as const,
-    }));
-  }, [nativeDetails]);
-
-  const nativeQuantities = useMemo<QuantitySet[]>(() => {
-    if (!nativeDetails) return [];
-    return nativeDetails.quantities.map((qset) => ({
-      name: qset.name,
-      quantities: qset.quantities.map((quantity) => ({
-        name: quantity.name,
-        value: quantity.value,
-        type: quantity.type ?? 0,
-      })),
-    }));
-  }, [nativeDetails]);
-
   // Overlay (authored) entities — split halves, duplicates, scripted
   // adds — live only in the StoreEditor overlay, NOT the parsed store.
   // `modelQuery.entity()` always returns a node, and its getters fall
@@ -977,48 +936,27 @@ export function PropertiesPanel() {
   // table (entity-table.ts#getTypeName). Those non-null sentinels would
   // shadow the overlay record in an `entityNode ?? overlay` chain, so
   // when an overlay record exists it MUST take precedence.
-  const renderedEntityType = isNativeLazySelection
-    ? (nativeDetails?.summary.type ?? 'Loading...')
-    : (overlayEntity?.type ?? entityNode?.type ?? 'Unknown');
-  const renderedEntityName = isNativeLazySelection
-    ? (nativeDetails?.summary.name ?? `#${selectedEntity?.expressId ?? ''}`)
-    : (overlayAttr(2) ?? entityNode?.name ?? undefined);
-  const renderedEntityGlobalId = isNativeLazySelection
-    ? (nativeDetails?.summary.globalId ?? null)
-    : (overlayAttr(0) ?? entityNode?.globalId);
-  const renderedEntityDescription = isNativeLazySelection
-    ? undefined
-    : (overlayAttr(3) ?? entityNode?.description ?? undefined);
-  const renderedEntityObjectType = isNativeLazySelection
-    ? undefined
-    : (overlayAttr(4) ?? entityNode?.objectType ?? undefined);
-  const renderedSpatialInfo = isNativeLazySelection ? nativeSpatialInfo : spatialInfo;
-  const renderedOccurrenceProperties = isNativeLazySelection ? nativeOccurrenceProperties : occurrenceProperties;
-  const renderedInheritedTypeProperties = isNativeLazySelection ? [] : inheritedTypeProperties;
-  const renderedMergedProperties = isNativeLazySelection
-    ? nativeOccurrenceProperties
-    : mergedProperties;
-  const renderedQuantities = isNativeLazySelection ? nativeQuantities : quantities;
-  const renderedAttributes = isNativeLazySelection ? [] : attributes;
-  const renderedClassifications = isNativeLazySelection ? [] : classifications;
-  const renderedMaterialInfo = isNativeLazySelection ? null : materialInfo;
-  const renderedDocuments = isNativeLazySelection ? [] : documents;
-  const renderedEntityRelationships = isNativeLazySelection ? null : entityRelationships;
-  const renderedGeoref = isNativeLazySelection ? null : georef;
-  const renderedSpatialContainment = isNativeLazySelection ? null : spatialContainment;
-  const renderedTypeProperties = isNativeLazySelection
-    ? (nativeDetails?.typeSummary
-        ? {
-            typeName: nativeDetails.typeSummary.name,
-            typeId: nativeDetails.typeSummary.expressId,
-            psets: [] as PropertySet[],
-          }
-        : null)
-    : typeProperties;
-  const renderedTypeEditImpact = isNativeLazySelection ? null : typeEditImpact;
-  const renderedIsTypeEntity = isNativeLazySelection
-    ? ((nativeDetails?.summary.type ?? '').endsWith('Type'))
-    : isTypeEntity;
+  const renderedEntityType = overlayEntity?.type ?? entityNode?.type ?? 'Unknown';
+  const renderedEntityName = overlayAttr(2) ?? entityNode?.name ?? undefined;
+  const renderedEntityGlobalId = overlayAttr(0) ?? entityNode?.globalId;
+  const renderedEntityDescription = overlayAttr(3) ?? entityNode?.description ?? undefined;
+  const renderedEntityObjectType = overlayAttr(4) ?? entityNode?.objectType ?? undefined;
+  const renderedSpatialInfo = spatialInfo;
+  const renderedOccurrenceProperties = occurrenceProperties;
+  const renderedInheritedTypeProperties = inheritedTypeProperties;
+  const renderedMergedProperties = mergedProperties;
+  const renderedQuantities = quantities;
+  const renderedAttributes = attributes;
+  const renderedClassifications = classifications;
+  const renderedMaterialInfo = materialInfo;
+  const renderedMaterialProperties = materialProperties;
+  const renderedDocuments = documents;
+  const renderedEntityRelationships = entityRelationships;
+  const renderedGeoref = georef;
+  const renderedSpatialContainment = spatialContainment;
+  const renderedTypeProperties = typeProperties;
+  const renderedTypeEditImpact = typeEditImpact;
+  const renderedIsTypeEntity = isTypeEntity;
   const renderedExistingProps = useMemo(() => {
     const keys = new Set<string>();
     for (const pset of renderedMergedProperties) {
@@ -1053,6 +991,12 @@ export function PropertiesPanel() {
     }
   }
 
+  // Material selected from the "Materials" hierarchy tab — show the material's
+  // own property sets plus quantities aggregated across all using elements.
+  if (selectedMaterialId !== null && selectedEntity) {
+    return <MaterialTotalsPanel materialId={selectedMaterialId} modelId={selectedEntity.modelId} />;
+  }
+
   // Multi-entity selection (unified storeys) - render combined view
   if (selectedEntities.length > 1) {
     return (
@@ -1069,7 +1013,7 @@ export function PropertiesPanel() {
   // `overlayEntity` when `entityNode` is empty. Without including
   // `overlayEntity` here the panel collapses to the model-metadata
   // view the moment a fresh add lands.
-  if (!selectedEntityId || (!isNativeLazySelection && (!modelQuery || (!entityNode && !overlayEntity)))) {
+  if (!selectedEntityId || !modelQuery || (!entityNode && !overlayEntity)) {
     // Show model metadata when a single model is loaded and nothing selected.
     // Handles both federated models (models.size >= 1) and legacy single-model path (models.size === 0).
     if (models.size === 1) {
@@ -1461,7 +1405,7 @@ export function PropertiesPanel() {
               </div>
             )}
             {/* Edit toolbar - only shown when edit mode is active */}
-            {editMode && selectedEntity && !isNativeLazySelection && (
+            {editMode && selectedEntity && (
               <>
                 <GeometryEditCard
                   modelId={selectedEntity.modelId}
@@ -1481,6 +1425,7 @@ export function PropertiesPanel() {
             {renderedMergedProperties.length === 0
               && renderedClassifications.length === 0
               && !renderedMaterialInfo
+              && renderedMaterialProperties.length === 0
               && renderedDocuments.length === 0
               && !renderedEntityRelationships
               && !hasScheduleForSelection ? (
@@ -1506,7 +1451,7 @@ export function PropertiesPanel() {
                         pset={pset}
                         modelId={selectedEntity?.modelId}
                         entityId={selectedEntity?.expressId}
-                        enableEditing={editMode && !isNativeLazySelection}
+                        enableEditing={editMode}
                         isTypeProperty={renderedIsTypeEntity}
                         typeEditScope={renderedIsTypeEntity ? renderedTypeEditImpact ?? undefined : undefined}
                       />
@@ -1530,7 +1475,7 @@ export function PropertiesPanel() {
                         pset={pset}
                         modelId={selectedEntity?.modelId}
                         entityId={renderedTypeProperties.typeId}
-                        enableEditing={editMode && !isNativeLazySelection}
+                        enableEditing={editMode}
                         isTypeProperty
                         typeEditScope={renderedTypeEditImpact?.mode === 'inherited' ? renderedTypeEditImpact : undefined}
                       />
@@ -1560,10 +1505,38 @@ export function PropertiesPanel() {
                   </>
                 )}
 
+                {/* Material Property Sets (Pset_Material* attached to the
+                    IfcMaterial via IfcMaterialProperties). Grouped per material,
+                    mirroring the Type Properties block. */}
+                {renderedMaterialProperties.length > 0 && (
+                  <>
+                    {(renderedMergedProperties.length > 0 || renderedClassifications.length > 0 || renderedMaterialInfo) && (
+                      <div className="border-t border-amber-200 dark:border-amber-800/50 pt-2 mt-2" />
+                    )}
+                    {renderedMaterialProperties.map((group) => (
+                      <div key={`matpset-${group.materialId}`} className="space-y-3">
+                        <div className="flex items-center gap-2 px-1 pb-0.5 text-[11px] text-amber-600/70 dark:text-amber-400/60 uppercase tracking-wider font-semibold">
+                          <Layers className="h-3 w-3 shrink-0" />
+                          <span className="truncate">Material Properties ({group.materialName})</span>
+                        </div>
+                        {group.psets.map((pset) => (
+                          <PropertySetCard
+                            key={`matpset-${group.materialId}-${pset.name}`}
+                            pset={{
+                              name: pset.name,
+                              properties: pset.properties.map((p) => ({ name: p.name, value: p.value, isMutated: false })),
+                            }}
+                          />
+                        ))}
+                      </div>
+                    ))}
+                  </>
+                )}
+
                 {/* Documents */}
                 {renderedDocuments.length > 0 && (
                   <>
-                    {(renderedMergedProperties.length > 0 || renderedClassifications.length > 0 || renderedMaterialInfo) && (
+                    {(renderedMergedProperties.length > 0 || renderedClassifications.length > 0 || renderedMaterialInfo || renderedMaterialProperties.length > 0) && (
                       <div className="border-t border-zinc-200 dark:border-zinc-800 pt-2 mt-2" />
                     )}
                     {renderedDocuments.map((doc, i) => (
@@ -1626,7 +1599,7 @@ export function PropertiesPanel() {
           </TabsContent>
 
           <TabsContent value="raw-step" className="m-0 p-3 overflow-hidden">
-            {selectedEntity && !isNativeLazySelection ? (
+            {selectedEntity ? (
               <RawStepCard
                 modelId={selectedEntity.modelId === 'legacy' ? '__legacy__' : selectedEntity.modelId}
                 entityId={selectedEntity.expressId}
@@ -1636,9 +1609,7 @@ export function PropertiesPanel() {
               />
             ) : (
               <p className="text-sm text-zinc-500 dark:text-zinc-500 text-center py-8 font-mono">
-                {isNativeLazySelection
-                  ? 'Raw STEP is not available for native-metadata selections'
-                  : 'Select an entity to inspect raw STEP arguments'}
+                Select an entity to inspect raw STEP arguments
               </p>
             )}
           </TabsContent>

package/src/components/viewer/ScriptPanel.tsx

@@ -49,13 +49,10 @@ import {
   DialogDescription,
 } from '@/components/ui/dialog';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { toast } from '@/components/ui/toast';
-import { buildDesktopUpgradeUrl, hasDesktopFeatureAccess } from '@/lib/desktop-product';
 import { cn, formatDuration } from '@/lib/utils';
 import { useViewerStore } from '@/store';
 import { useSandbox } from '@/hooks/useSandbox';
 import { SCRIPT_TEMPLATES } from '@/lib/scripts/templates';
-import { navigateToPath } from '@/services/app-navigation';
 import { CodeEditor } from './CodeEditor';
 import { ChatPanel } from './ChatPanel';
 import { PromoteToolDialog } from '@/components/extensions/PromoteToolDialog';
@@ -154,8 +151,6 @@ export function ScriptPanel({ onClose }: ScriptPanelProps) {
   const [outputCollapsed, setOutputCollapsed] = useState(false);
   const chatPanelVisible = useViewerStore((s) => s.chatPanelVisible);
   const setChatPanelVisible = useViewerStore((s) => s.setChatPanelVisible);
-  const desktopEntitlement = useViewerStore((s) => s.desktopEntitlement);
-  const canUseAiAssistant = hasDesktopFeatureAccess(desktopEntitlement, 'ai_assistant');
 
   // Chat panel width (px) — resizable via drag handle
   const [chatWidth, setChatWidth] = useState(380);
@@ -165,27 +160,14 @@ export function ScriptPanel({ onClose }: ScriptPanelProps) {
   // Open chat by default when script panel mounts
   useEffect(() => {
     try {
-      if (canUseAiAssistant && localStorage.getItem('ifc-lite-chat-panel-visible') === null) {
+      if (localStorage.getItem('ifc-lite-chat-panel-visible') === null) {
         setChatPanelVisible(true);
       }
     } catch {
-      if (canUseAiAssistant) {
-        setChatPanelVisible(true);
-      }
+      setChatPanelVisible(true);
     }
     return () => { cleanupChatDragRef.current?.(); };
-  }, [canUseAiAssistant, setChatPanelVisible]);
-
-  useEffect(() => {
-    if (!canUseAiAssistant && chatPanelVisible) {
-      setChatPanelVisible(false);
-    }
-  }, [canUseAiAssistant, chatPanelVisible, setChatPanelVisible]);
-
-  const promptAiUpgrade = useCallback(() => {
-    toast.info('AI assistant is available with Desktop Pro');
-    navigateToPath(buildDesktopUpgradeUrl());
-  }, []);
+  }, [setChatPanelVisible]);
 
   const handleChatResizeStart = useCallback((e: React.MouseEvent) => {
     e.preventDefault();
@@ -259,10 +241,6 @@ export function ScriptPanel({ onClose }: ScriptPanelProps) {
 
   const handleFixWithLlm = useCallback(() => {
     if (!lastError) return;
-    if (!canUseAiAssistant) {
-      promptAiUpgrade();
-      return;
-    }
     setChatPanelVisible(true);
     const state = useViewerStore.getState();
     queueChatRepairRequest({
@@ -270,15 +248,11 @@ export function ScriptPanel({ onClose }: ScriptPanelProps) {
       diagnostics: state.scriptLastDiagnostics,
       reason: lastError.startsWith('Preflight validation failed:') ? 'preflight' : 'runtime',
     });
-  }, [canUseAiAssistant, lastError, promptAiUpgrade, queueChatRepairRequest, setChatPanelVisible]);
+  }, [lastError, queueChatRepairRequest, setChatPanelVisible]);
 
   const toggleChat = useCallback(() => {
-    if (!canUseAiAssistant) {
-      promptAiUpgrade();
-      return;
-    }
     setChatPanelVisible(!chatPanelVisible);
-  }, [canUseAiAssistant, chatPanelVisible, promptAiUpgrade, setChatPanelVisible]);
+  }, [chatPanelVisible, setChatPanelVisible]);
 
   return (
     <div className="h-full flex bg-background">
@@ -333,12 +307,12 @@ export function ScriptPanel({ onClose }: ScriptPanelProps) {
                 variant={chatPanelVisible ? 'default' : 'ghost'}
                 size="icon-xs"
                 onClick={toggleChat}
-                className={cn(canUseAiAssistant && chatPanelVisible && 'bg-blue-500 hover:bg-blue-600 text-white')}
+                className={cn(chatPanelVisible && 'bg-blue-500 hover:bg-blue-600 text-white')}
               >
                 <Bot className="h-3.5 w-3.5" />
               </Button>
             </TooltipTrigger>
-            <TooltipContent>{canUseAiAssistant ? (chatPanelVisible ? 'Hide AI Chat' : 'Show AI Chat') : 'Desktop Pro required for AI Chat'}</TooltipContent>
+            <TooltipContent>{chatPanelVisible ? 'Hide AI Chat' : 'Show AI Chat'}</TooltipContent>
           </Tooltip>
 
           {onClose && (
@@ -578,7 +552,7 @@ export function ScriptPanel({ onClose }: ScriptPanelProps) {
                           className="h-6 px-2 text-xs border-destructive/40 text-destructive bg-transparent hover:bg-destructive/10"
                           onClick={handleFixWithLlm}
                         >
-                          {canUseAiAssistant ? 'Fix with LLM' : 'Upgrade for AI Fix'}
+                          Fix with LLM
                         </Button>
                       </div>
                     </div>

package/src/components/viewer/Section2DPanel.tsx

@@ -12,7 +12,7 @@
  */
 
 import React, { useCallback, useRef, useState, useEffect, useMemo } from 'react';
-import { X, Download, Eye, EyeOff, Maximize2, ZoomIn, ZoomOut, Loader2, Printer, GripVertical, MoreHorizontal, RefreshCw, Pin, PinOff, Palette, Ruler, Trash2, FileText, Shapes, Box, PenTool, Hexagon, Type, Cloud, MousePointer2, Tag } from 'lucide-react';
+import { X, Download, Eye, EyeOff, Maximize2, ZoomIn, ZoomOut, Loader2, Printer, GripVertical, MoreHorizontal, RefreshCw, Pin, PinOff, Palette, Ruler, Trash2, FileText, Shapes, Box, BoxSelect, PenTool, Hexagon, Type, Cloud, MousePointer2, Tag } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -321,6 +321,15 @@ export function Section2DPanel({
     updateDisplayOptions({ showIfcAnnotations: !displayOptions.showIfcAnnotations });
   }, [displayOptions.showIfcAnnotations, updateDisplayOptions]);
 
+  // Construction projection (issue #979): toggling changes which geometry the
+  // generator emits, so clear the current drawing to force a regenerate —
+  // same pattern as the symbolic/section-cut toggle.
+  const toggleConstructionProjection = useCallback(() => {
+    updateDisplayOptions({ showConstructionProjection: !displayOptions.showConstructionProjection });
+    setDrawing(null);
+    setDrawingStatus('idle');
+  }, [displayOptions.showConstructionProjection, updateDisplayOptions, setDrawing, setDrawingStatus]);
+
   const annotationHandlers = useAnnotation2D({
     drawing, viewTransform, sectionAxis: sectionPlane.axis, containerRef,
     activeTool: annotation2DActiveTool, setActiveTool: setAnnotation2DActiveTool,
@@ -589,6 +598,21 @@ export function Section2DPanel({
                 <Tag className="h-4 w-4" />
               </Button>
 
+              {/* Construction projection toggle (issue #979) — plan only */}
+              <Button
+                variant={displayOptions.showConstructionProjection ? 'default' : 'ghost'}
+                size="icon-sm"
+                onClick={toggleConstructionProjection}
+                title={
+                  displayOptions.showConstructionProjection
+                    ? 'Hide construction projection (overhead & visible reference lines)'
+                    : 'Show construction projection (overhead & visible reference lines)'
+                }
+                disabled={sectionPlane.axis !== 'down' || sectionPlane.custom !== undefined}
+              >
+                <BoxSelect className="h-4 w-4" />
+              </Button>
+
               {/* Annotation Tools Dropdown */}
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
@@ -760,6 +784,13 @@ export function Section2DPanel({
                     <Tag className="h-4 w-4 mr-2" />
                     IFC Annotations {displayOptions.showIfcAnnotations ? 'On' : 'Off'}
                   </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={toggleConstructionProjection}
+                    disabled={sectionPlane.axis !== 'down' || sectionPlane.custom !== undefined}
+                  >
+                    <BoxSelect className="h-4 w-4 mr-2" />
+                    Construction Projection {displayOptions.showConstructionProjection ? 'On' : 'Off'}
+                  </DropdownMenuItem>
                   <DropdownMenuItem onClick={() => setAnnotation2DActiveTool('none')}>
                     <MousePointer2 className="h-4 w-4 mr-2" />
                     Select / Pan {annotation2DActiveTool === 'none' ? '(On)' : ''}

package/src/components/viewer/ViewerLayout.tsx

@@ -29,13 +29,13 @@ import { BCFPanel } from './BCFPanel';
 import { IDSPanel } from './IDSPanel';
 import { LensPanel } from './LensPanel';
 import { ClashPanel } from './ClashPanel';
+import { ComparePanel } from './ComparePanel';
 import { ListPanel } from './lists/ListPanel';
 import { ScriptPanel } from './ScriptPanel';
 import { GanttPanel } from './schedule/GanttPanel';
 import { ExtensionsPanel } from '@/components/extensions/ExtensionsPanel';
 import { CommandPalette } from './CommandPalette';
 import { SearchModal } from './SearchModal';
-import { DesktopEntitlementBanner } from './DesktopEntitlementBanner';
 import {
   closeActiveAnalysisExtension,
   getAnalysisExtensionById,
@@ -135,6 +135,8 @@ export function ViewerLayout() {
   const setLensPanelVisible = useViewerStore((s) => s.setLensPanelVisible);
   const clashPanelVisible = useViewerStore((s) => s.clashPanelVisible);
   const setClashPanelVisible = useViewerStore((s) => s.setClashPanelVisible);
+  const comparePanelVisible = useViewerStore((s) => s.comparePanelVisible);
+  const setComparePanelVisible = useViewerStore((s) => s.setComparePanelVisible);
   const scriptPanelVisible = useViewerStore((s) => s.scriptPanelVisible);
   const setScriptPanelVisible = useViewerStore((s) => s.setScriptPanelVisible);
   const ganttPanelVisible = useViewerStore((s) => s.ganttPanelVisible);
@@ -283,7 +285,6 @@ export function ViewerLayout() {
 
         {/* Main Toolbar — use compact MobileToolbar on mobile */}
         {isMobile ? <MobileToolbar /> : <MainToolbar onShowShortcuts={shortcutsDialog.toggle} />}
-        {!isMobile && <DesktopEntitlementBanner />}
 
         {/* Main Content Area - Desktop Layout */}
         {!isMobile && (
@@ -347,6 +348,8 @@ export function ViewerLayout() {
                       <LensPanel onClose={() => setLensPanelVisible(false)} />
                     ) : clashPanelVisible ? (
                       <ClashPanel onClose={() => setClashPanelVisible(false)} />
+                    ) : comparePanelVisible ? (
+                      <ComparePanel onClose={() => setComparePanelVisible(false)} />
                     ) : idsPanelVisible ? (
                       <IDSPanel onClose={() => setIdsPanelVisible(false)} />
                     ) : bcfPanelVisible ? (

package/src/components/viewer/Viewport.tsx

@@ -808,6 +808,9 @@ export function Viewport({
       }
       setIsInitialized(false);
       rendererRef.current = null;
+      // Free all WebGPU resources held by this renderer instance.
+      // destroy() is idempotent, so this is safe even if init() rejected.
+      renderer.destroy();
       // Clear BCF global refs to prevent memory leaks
       clearGlobalRefs();
     };