@ifc-lite/viewer 1.17.2 → 1.17.4

package/src/components/viewer/PropertiesPanel.tsx

@@ -27,11 +27,13 @@ import { ScrollArea } from '@/components/ui/scroll-area';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 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, type IfcDataStore } from '@ifc-lite/parser';
+import { extractClassificationsOnDemand, extractMaterialsOnDemand, extractTypePropertiesOnDemand, extractTypeEntityOwnProperties, extractDocumentsOnDemand, extractRelationshipsOnDemand, extractGeoreferencingOnDemand, type IfcDataStore } from '@ifc-lite/parser';
 import { EntityFlags, RelationshipType, isSpatialStructureTypeName, isStoreyLikeSpatialTypeName } from '@ifc-lite/data';
 import type { EntityRef, FederatedModel } from '@/store/types';
 
@@ -45,6 +47,7 @@ import { DocumentCard } from './properties/DocumentCard';
 import { RelationshipsCard } from './properties/RelationshipsCard';
 import type { PropertySet, QuantitySet } from './properties/encodingUtils';
 import { BsddCard } from './properties/BsddCard';
+import { GeoreferencingPanel } from './properties/GeoreferencingPanel';
 
 type DisplayProperty = { name: string; value: unknown; isMutated: boolean };
 type DisplayPropertySet = {
@@ -101,7 +104,7 @@ export function PropertiesPanel() {
       const m = models.get(selectedEntity.modelId);
       if (m) {
         return {
-          modelQuery: new IfcQuery(m.ifcDataStore),
+          modelQuery: m.nativeMetadata ? null : (m.ifcDataStore ? new IfcQuery(m.ifcDataStore) : null),
           model: m,
         };
       }
@@ -121,7 +124,7 @@ export function PropertiesPanel() {
 
   // Ensure mutation view exists for editing - creates it on-demand if needed
   useEffect(() => {
-    if (!model || !selectedEntity || selectedEntity.modelId === 'legacy') return;
+    if (!model || !model.ifcDataStore || !selectedEntity || selectedEntity.modelId === 'legacy') return;
 
     const modelId = selectedEntity.modelId;
     let mutationView = getMutationView(modelId);
@@ -140,10 +143,38 @@ 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');
 
   // Edit mode toggle - allows inline property editing
   const [editMode, setEditMode] = useState(false);
 
+  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);
@@ -247,7 +278,7 @@ export function PropertiesPanel() {
     if (!geoResult?.meshes?.length) return null;
 
     // In multi-model mode, meshes use globalIds (originalExpressId + idOffset)
-    const targetExpressId = selectedEntity.expressId + (model?.idOffset ?? 0);
+    const targetExpressId = toGlobalIdFromModels(models, selectedEntity.modelId, selectedEntity.expressId);
 
     // Compute bounding box from matching mesh positions
     let minX = Infinity, minY = Infinity, minZ = Infinity;
@@ -515,6 +546,14 @@ export function PropertiesPanel() {
     return totalCount > 0 ? rels : null;
   }, [selectedEntity, model, ifcDataStore]);
 
+  // Extract georeferencing info for the model (used in coordinates section)
+  const georef = useMemo(() => {
+    const dataStore = model?.ifcDataStore ?? ifcDataStore;
+    if (!dataStore) return null;
+    const info = extractGeoreferencingOnDemand(dataStore as IfcDataStore);
+    return info?.hasGeoreference ? info : null;
+  }, [model, ifcDataStore]);
+
   // Extract type-level properties (e.g., from IfcWallType's HasPropertySets)
   const typeProperties = useMemo(() => {
     if (!selectedEntity) return null;
@@ -644,8 +683,8 @@ export function PropertiesPanel() {
 
   // Separate occurrence (instance) and inherited type properties.
   // Occurrence properties are displayed first, type properties in a separate section.
-  // When a pset exists at both levels, occurrence takes precedence; the type-only
-  // properties (not overridden at instance level) are shown in the inherited section.
+  // All type property sets are always shown in the inherited section so users can see
+  // what the type defines, even when the same pset exists at occurrence level.
   const { occurrenceProperties, inheritedTypeProperties } = useMemo(() => {
     const occ: PropertySet[] = properties.map(p => ({ ...p, source: 'instance' as const }));
 
@@ -653,23 +692,10 @@ export function PropertiesPanel() {
       return { occurrenceProperties: occ, inheritedTypeProperties: [] as PropertySet[] };
     }
 
-    const instanceByName = new Set(properties.map(p => p.name));
-    const inherited: PropertySet[] = [];
-
-    for (const typePset of typeProperties.psets) {
-      if (instanceByName.has(typePset.name)) {
-        // Pset exists at instance level - add type-only props that aren't overridden
-        const instancePset = properties.find(p => p.name === typePset.name)!;
-        const instancePropNames = new Set(instancePset.properties.map(p => p.name));
-        const extraProps = typePset.properties.filter(p => !instancePropNames.has(p.name));
-        if (extraProps.length > 0) {
-          inherited.push({ ...typePset, properties: extraProps, source: 'type' });
-        }
-      } else {
-        // Type-only pset - show fully in inherited section
-        inherited.push({ ...typePset, source: 'type' });
-      }
-    }
+    const inherited: PropertySet[] = typeProperties.psets.map(typePset => ({
+      ...typePset,
+      source: 'type' as const,
+    }));
 
     return { occurrenceProperties: occ, inheritedTypeProperties: inherited };
   }, [properties, typeProperties]);
@@ -750,6 +776,114 @@ export function PropertiesPanel() {
     return names;
   }, [attributes]);
 
+  const isNativeLazySelection = Boolean(selectedEntity && model?.nativeMetadata);
+
+  useEffect(() => {
+    if (isNativeLazySelection && editMode) {
+      setEditMode(false);
+    }
+  }, [isNativeLazySelection, editMode]);
+
+  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]);
+
+  const renderedEntityType = isNativeLazySelection
+    ? (nativeDetails?.summary.type ?? 'Loading...')
+    : (entityNode?.type ?? 'Unknown');
+  const renderedEntityName = isNativeLazySelection
+    ? (nativeDetails?.summary.name ?? `#${selectedEntity?.expressId ?? ''}`)
+    : entityNode?.name;
+  const renderedEntityGlobalId = isNativeLazySelection
+    ? (nativeDetails?.summary.globalId ?? null)
+    : entityNode?.globalId;
+  const renderedEntityDescription = isNativeLazySelection ? undefined : entityNode?.description;
+  const renderedEntityObjectType = isNativeLazySelection ? undefined : entityNode?.objectType;
+  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 renderedExistingProps = useMemo(() => {
+    const keys = new Set<string>();
+    for (const pset of renderedMergedProperties) {
+      for (const prop of pset.properties) {
+        keys.add(`${pset.name}:${prop.name}`);
+      }
+    }
+    return keys;
+  }, [renderedMergedProperties]);
+  const renderedExistingQuants = useMemo(() => {
+    const keys = new Set<string>();
+    for (const qset of renderedQuantities) {
+      for (const q of qset.quantities) {
+        keys.add(`${qset.name}:${q.name}`);
+      }
+    }
+    return keys;
+  }, [renderedQuantities]);
+  const renderedExistingAttributeNames = useMemo(() => {
+    const names = new Set<string>();
+    for (const attr of renderedAttributes) {
+      if (attr.value) names.add(attr.name);
+    }
+    return names;
+  }, [renderedAttributes]);
+
   // Model metadata display (when clicking top-level model in hierarchy)
   if (selectedModelId) {
     const selectedModel = models.get(selectedModelId);
@@ -769,7 +903,24 @@ export function PropertiesPanel() {
     );
   }
 
-  if (!selectedEntityId || !modelQuery || !entityNode) {
+  if (!selectedEntityId || (!isNativeLazySelection && (!modelQuery || !entityNode))) {
+    // Show model metadata when a single legacy model is loaded and nothing selected
+    if (ifcDataStore && models.size === 0 && geometryResult) {
+      const legacyModel: FederatedModel = {
+        id: '__legacy__',
+        name: 'Model',
+        ifcDataStore: ifcDataStore as IfcDataStore,
+        geometryResult,
+        visible: true,
+        collapsed: false,
+        schemaVersion: ((ifcDataStore as IfcDataStore).schemaVersion ?? 'IFC4') as FederatedModel['schemaVersion'],
+        loadedAt: Date.now(),
+        fileSize: (ifcDataStore as IfcDataStore).fileSize ?? 0,
+        idOffset: 0,
+        maxExpressId: (ifcDataStore as IfcDataStore).entityCount ?? 0,
+      };
+      return <ModelMetadataPanel model={legacyModel} />;
+    }
     return (
       <div className="h-full flex flex-col border-l-2 border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-black">
         <div className="p-3 border-b-2 border-zinc-200 dark:border-zinc-800 bg-white dark:bg-black">
@@ -781,7 +932,7 @@ export function PropertiesPanel() {
           </div>
           <p className="font-bold uppercase text-zinc-900 dark:text-zinc-100 mb-2">No Selection</p>
           <p className="text-xs font-mono text-zinc-500 dark:text-zinc-400 max-w-[150px]">
-            Select an element to view details
+            {models.size > 1 ? 'Select a model or element to view details' : 'Select an element to view details'}
           </p>
         </div>
       </div>
@@ -789,11 +940,11 @@ export function PropertiesPanel() {
   }
 
   // These are safe to access after the early return check (entityNode is confirmed non-null above)
-  const entityType = entityNode.type;
-  const entityName = entityNode.name;
-  const entityGlobalId = entityNode.globalId;
-  const entityDescription = entityNode.description;
-  const entityObjectType = entityNode.objectType;
+  const entityType = renderedEntityType;
+  const entityName = renderedEntityName;
+  const entityGlobalId = renderedEntityGlobalId;
+  const entityDescription = renderedEntityDescription;
+  const entityObjectType = renderedEntityObjectType;
 
   return (
     <div className="h-full flex flex-col border-l-2 border-zinc-200 dark:border-zinc-800 bg-white dark:bg-black">
@@ -808,6 +959,13 @@ export function PropertiesPanel() {
               {entityName || `${entityType}`}
             </h3>
             <p className="text-xs font-mono text-zinc-500 dark:text-zinc-400">{entityType}</p>
+            {/* Show associated type entity for occurrences */}
+            {!renderedIsTypeEntity && renderedTypeProperties && (
+              <p className="text-[11px] font-mono text-indigo-500 dark:text-indigo-400 truncate" title={`${activeDataStore?.entities.getTypeName(renderedTypeProperties.typeId) || 'Type'}: ${renderedTypeProperties.typeName}`}>
+                <Building2 className="inline h-3 w-3 mr-1 -mt-0.5" />
+                {activeDataStore?.entities.getTypeName(renderedTypeProperties.typeId) || 'Type'}: {renderedTypeProperties.typeName}
+              </p>
+            )}
           </div>
           <div className="flex gap-1 shrink-0">
             <Tooltip>
@@ -851,19 +1009,21 @@ export function PropertiesPanel() {
               </TooltipContent>
             </Tooltip>
             {/* Edit mode toggle */}
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant={editMode ? 'default' : 'ghost'}
-                  size="icon-xs"
-                  className={`rounded-none ${editMode ? 'bg-purple-600 hover:bg-purple-700 text-white' : 'hover:bg-zinc-200 dark:hover:bg-zinc-700'}`}
-                  onClick={() => setEditMode(!editMode)}
-                >
-                  <PenLine className="h-3.5 w-3.5" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>{editMode ? 'Exit Edit Mode' : 'Edit Properties'}</TooltipContent>
-            </Tooltip>
+            {!isNativeLazySelection && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant={editMode ? 'default' : 'ghost'}
+                    size="icon-xs"
+                    className={`rounded-none ${editMode ? 'bg-purple-600 hover:bg-purple-700 text-white' : 'hover:bg-zinc-200 dark:hover:bg-zinc-700'}`}
+                    onClick={() => setEditMode(!editMode)}
+                  >
+                    <PenLine className="h-3.5 w-3.5" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>{editMode ? 'Exit Edit Mode' : 'Edit Properties'}</TooltipContent>
+              </Tooltip>
+            )}
           </div>
         </div>
 
@@ -897,34 +1057,34 @@ export function PropertiesPanel() {
         )}
 
         {/* Spatial Location */}
-        {spatialInfo && (
+        {renderedSpatialInfo && (
           <div className="flex items-center gap-2 text-xs border border-emerald-500/30 bg-emerald-50/50 dark:bg-emerald-900/10 px-2 py-1.5 text-emerald-800 dark:text-emerald-400 min-w-0">
             <Layers className="h-3.5 w-3.5 shrink-0" />
-            <span className="font-bold uppercase tracking-wide truncate min-w-0 flex-1">{spatialInfo.storeyName}</span>
+            <span className="font-bold uppercase tracking-wide truncate min-w-0 flex-1">{renderedSpatialInfo.storeyName}</span>
             <div className="flex items-center gap-1.5 shrink-0">
-              {spatialInfo.elevation !== undefined && (
+              {renderedSpatialInfo.elevation !== undefined && (
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <span className="text-emerald-600/70 dark:text-emerald-500/70 font-mono whitespace-nowrap">
-                      {spatialInfo.elevation >= 0 ? '+' : ''}{spatialInfo.elevation.toFixed(2)}m
+                      {renderedSpatialInfo.elevation >= 0 ? '+' : ''}{renderedSpatialInfo.elevation.toFixed(2)}m
                     </span>
                   </TooltipTrigger>
                   <TooltipContent>
-                    <p className="text-xs">Elevation: {spatialInfo.elevation >= 0 ? '+' : ''}{spatialInfo.elevation.toFixed(2)}m from ground</p>
+                    <p className="text-xs">Elevation: {renderedSpatialInfo.elevation >= 0 ? '+' : ''}{renderedSpatialInfo.elevation.toFixed(2)}m from ground</p>
                   </TooltipContent>
                 </Tooltip>
               )}
-              {spatialInfo.height !== undefined && (
+              {renderedSpatialInfo.height !== undefined && (
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <span className="flex items-center gap-1 text-emerald-500/60 dark:text-emerald-400/60 font-mono text-[10px] whitespace-nowrap">
                       <ArrowUpDown className="h-2.5 w-2.5 shrink-0" />
-                      <span className="hidden sm:inline">{spatialInfo.height.toFixed(2)}m</span>
-                      <span className="sm:hidden">{spatialInfo.height.toFixed(1)}m</span>
+                      <span className="hidden sm:inline">{renderedSpatialInfo.height.toFixed(2)}m</span>
+                      <span className="sm:hidden">{renderedSpatialInfo.height.toFixed(1)}m</span>
                     </span>
                   </TooltipTrigger>
                   <TooltipContent>
-                    <p className="text-xs">Height: {spatialInfo.height.toFixed(2)}m to next storey</p>
+                    <p className="text-xs">Height: {renderedSpatialInfo.height.toFixed(2)}m to next storey</p>
                   </TooltipContent>
                 </Tooltip>
               )}
@@ -932,55 +1092,70 @@ export function PropertiesPanel() {
           </div>
         )}
 
-        {/* Entity Position - teal tint to distinguish from emerald storey bar */}
-        {entityCoordinates && (
+        {/* World coordinates + Georeferencing — single consolidated section */}
+        {(entityCoordinates || renderedGeoref || editMode) && (
           <Collapsible open={coordOpen} onOpenChange={setCoordOpen}>
             <CollapsibleTrigger className="flex items-center gap-2 w-full text-xs border border-teal-500/30 px-2 py-1.5 text-teal-800 dark:text-teal-400 min-w-0 text-left group/coord">
               <Crosshair className="h-3.5 w-3.5 shrink-0" />
               <span className="font-bold uppercase tracking-wide shrink-0">World</span>
               {!coordOpen && (
                 <>
-                  <span className="font-mono text-[10px] text-teal-600/70 dark:text-teal-500/70 truncate min-w-0 flex-1 tabular-nums">
-                    <CoordVal axis="E" value={entityCoordinates.worldZup.center.x} />{' '}
-                    <CoordVal axis="N" value={entityCoordinates.worldZup.center.y} />{' '}
-                    <CoordVal axis="Z" value={entityCoordinates.worldZup.center.z} />
-                  </span>
+                  {entityCoordinates && (
+                    <span className="font-mono text-[10px] text-teal-600/70 dark:text-teal-500/70 truncate min-w-0 flex-1 tabular-nums">
+                      <CoordVal axis="E" value={entityCoordinates.worldZup.center.x} />{' '}
+                      <CoordVal axis="N" value={entityCoordinates.worldZup.center.y} />{' '}
+                      <CoordVal axis="Z" value={entityCoordinates.worldZup.center.z} />
+                    </span>
+                  )}
+                  {renderedGeoref?.projectedCRS?.name && (
+                    <span className="font-mono text-[9px] text-teal-500/60 shrink-0">{renderedGeoref.projectedCRS.name}</span>
+                  )}
                   <span className="text-[9px] text-teal-500/0 group-hover/coord:text-teal-500/40 transition-colors shrink-0">details</span>
                 </>
               )}
             </CollapsibleTrigger>
             <CollapsibleContent>
-              <div className="px-2 py-1.5 space-y-0.5">
-                <CoordRow
-                  label=""
-                  values={[
-                    { axis: 'E', value: entityCoordinates.worldZup.center.x },
-                    { axis: 'N', value: entityCoordinates.worldZup.center.y },
-                    { axis: 'Z', value: entityCoordinates.worldZup.center.z },
-                  ]}
-                  primary
-                  copyLabel="world"
-                  coordCopied={coordCopied}
-                  onCopy={copyCoords}
-                />
-                <CoordRow
-                  label="Local"
-                  values={[
-                    { axis: 'X', value: entityCoordinates.local.center.x },
-                    { axis: 'Y', value: entityCoordinates.local.center.y },
-                    { axis: 'Z', value: entityCoordinates.local.center.z },
-                  ]}
-                  copyLabel="local"
-                  coordCopied={coordCopied}
-                  onCopy={copyCoords}
-                />
-                <div className="flex items-start gap-1.5">
-                  <span className="text-[9px] font-medium text-muted-foreground/50 uppercase tracking-wider w-[34px] shrink-0 pt-px">Size</span>
-                  <span className="font-mono text-[10px] text-muted-foreground/50 tabular-nums">
-                    {(entityCoordinates.local.max.x - entityCoordinates.local.min.x).toFixed(2)} x {(entityCoordinates.local.max.y - entityCoordinates.local.min.y).toFixed(2)} x {(entityCoordinates.local.max.z - entityCoordinates.local.min.z).toFixed(2)}
-                  </span>
+              {entityCoordinates && (
+                <div className="px-2 py-1.5 space-y-0.5">
+                  <CoordRow
+                    label=""
+                    values={[
+                      { axis: 'E', value: entityCoordinates.worldZup.center.x },
+                      { axis: 'N', value: entityCoordinates.worldZup.center.y },
+                      { axis: 'Z', value: entityCoordinates.worldZup.center.z },
+                    ]}
+                    primary
+                    copyLabel="world"
+                    coordCopied={coordCopied}
+                    onCopy={copyCoords}
+                  />
+                  <CoordRow
+                    label="Local"
+                    values={[
+                      { axis: 'X', value: entityCoordinates.local.center.x },
+                      { axis: 'Y', value: entityCoordinates.local.center.y },
+                      { axis: 'Z', value: entityCoordinates.local.center.z },
+                    ]}
+                    copyLabel="local"
+                    coordCopied={coordCopied}
+                    onCopy={copyCoords}
+                  />
+                  <div className="flex items-start gap-1.5">
+                    <span className="text-[9px] font-medium text-muted-foreground/50 uppercase tracking-wider w-[34px] shrink-0 pt-px">Size</span>
+                    <span className="font-mono text-[10px] text-muted-foreground/50 tabular-nums">
+                      {(entityCoordinates.local.max.x - entityCoordinates.local.min.x).toFixed(2)} x {(entityCoordinates.local.max.y - entityCoordinates.local.min.y).toFixed(2)} x {(entityCoordinates.local.max.z - entityCoordinates.local.min.z).toFixed(2)}
+                    </span>
+                  </div>
                 </div>
-              </div>
+              )}
+              <GeoreferencingPanel
+                georef={renderedGeoref}
+                modelId={selectedEntity?.modelId === 'legacy' ? '__legacy__' : (model?.id ?? selectedEntity?.modelId)}
+                enableEditing
+                schemaVersion={activeDataStore?.schemaVersion}
+                coordinateInfo={(model?.geometryResult ?? geometryResult)?.coordinateInfo}
+                geometryResult={model?.geometryResult ?? geometryResult}
+              />
             </CollapsibleContent>
           </Collapsible>
         )}
@@ -995,17 +1170,17 @@ export function PropertiesPanel() {
       </div>
 
       {/* IFC Attributes */}
-      {attributes.length > 0 && (
+      {renderedAttributes.length > 0 && (
         <Collapsible defaultOpen className="border-b">
           <CollapsibleTrigger className="flex items-center gap-2 w-full p-3 hover:bg-muted/50 text-left">
             <Tag className="h-4 w-4 text-muted-foreground" />
             <span className="font-medium text-sm">Attributes</span>
             {editMode && <PenLine className="h-3 w-3 text-purple-500 ml-1" />}
-            <span className="text-xs text-muted-foreground ml-auto">{attributes.length}</span>
+            <span className="text-xs text-muted-foreground ml-auto">{renderedAttributes.length}</span>
           </CollapsibleTrigger>
           <CollapsibleContent>
             <div className="divide-y border-t">
-              {attributes.map((attr) => (
+              {renderedAttributes.map((attr) => (
                 <div key={attr.name} className="grid grid-cols-[minmax(80px,1fr)_minmax(0,2fr)] gap-2 px-3 py-1.5 text-sm">
                   <span className="text-muted-foreground truncate" title={attr.name}>{attr.name}</span>
                   {editMode && selectedEntity ? (
@@ -1030,16 +1205,16 @@ export function PropertiesPanel() {
       )}
 
       {/* Spatial Containment - for spatial containers (Project, Site, Building, Storey) */}
-      {spatialContainment && (
+      {renderedSpatialContainment && (
         <Collapsible defaultOpen className="border-b">
           <CollapsibleTrigger className="flex items-center gap-2 w-full p-3 hover:bg-muted/50 text-left">
             <Layers className="h-4 w-4 text-emerald-600" />
             <span className="font-medium text-sm">Structure</span>
-            <span className="text-xs text-muted-foreground ml-auto">{spatialContainment.length}</span>
+            <span className="text-xs text-muted-foreground ml-auto">{renderedSpatialContainment.length}</span>
           </CollapsibleTrigger>
           <CollapsibleContent>
             <div className="divide-y border-t">
-              {spatialContainment.map((item) => (
+              {renderedSpatialContainment.map((item) => (
                 <div key={item.label} className="grid grid-cols-[minmax(80px,1fr)_minmax(0,2fr)] gap-2 px-3 py-1.5 text-sm">
                   <span className="text-muted-foreground truncate" title={item.label}>{item.label}</span>
                   <span className="font-medium font-mono">{item.value}</span>
@@ -1082,26 +1257,26 @@ export function PropertiesPanel() {
         <ScrollArea className="flex-1 bg-white dark:bg-black">
           <TabsContent value="properties" className="m-0 p-3 overflow-hidden">
             {/* Edit toolbar - only shown when edit mode is active */}
-            {editMode && selectedEntity && (
+            {editMode && selectedEntity && !isNativeLazySelection && (
               <EditToolbar
                 modelId={selectedEntity.modelId}
                 entityId={selectedEntity.expressId}
                 entityType={entityType}
-                existingPsets={mergedProperties.map(p => p.name)}
-                existingQtos={quantities.map(q => q.name)}
+                existingPsets={renderedMergedProperties.map(p => p.name)}
+                existingQtos={renderedQuantities.map(q => q.name)}
                 schemaVersion={activeDataStore?.schemaVersion}
               />
             )}
-            {mergedProperties.length === 0 && classifications.length === 0 && !materialInfo && documents.length === 0 ? (
+            {renderedMergedProperties.length === 0 && renderedClassifications.length === 0 && !renderedMaterialInfo && renderedDocuments.length === 0 ? (
               <p className="text-sm text-zinc-500 dark:text-zinc-500 text-center py-8 font-mono">No property sets</p>
             ) : (
               <div className="space-y-3 w-full overflow-hidden">
                 {/* Occurrence/Type Properties (based on whether entity itself is a type) */}
-                {occurrenceProperties.length > 0 && (
+                {renderedOccurrenceProperties.length > 0 && (
                   <>
-                    {(isTypeEntity || (typeProperties && typeProperties.psets.length > 0)) && (
+                    {(renderedIsTypeEntity || (renderedTypeProperties && renderedTypeProperties.psets.length > 0)) && (
                       <div className="flex items-center gap-2 px-1 pb-0.5 text-[11px] text-zinc-500 dark:text-zinc-400 uppercase tracking-wider font-semibold">
-                        {isTypeEntity ? (
+                        {renderedIsTypeEntity ? (
                           <>
                             <Building2 className="h-3 w-3 shrink-0 text-indigo-500" />
                             Type Properties:
@@ -1109,83 +1284,83 @@ export function PropertiesPanel() {
                         ) : 'Occurrence Properties:'}
                       </div>
                     )}
-                    {occurrenceProperties.map((pset: PropertySet) => (
+                    {renderedOccurrenceProperties.map((pset: PropertySet) => (
                       <PropertySetCard
                         key={`occ-${pset.name}`}
                         pset={pset}
                         modelId={selectedEntity?.modelId}
                         entityId={selectedEntity?.expressId}
-                        enableEditing={editMode}
-                        isTypeProperty={isTypeEntity}
-                        typeEditScope={isTypeEntity ? typeEditImpact ?? undefined : undefined}
+                        enableEditing={editMode && !isNativeLazySelection}
+                        isTypeProperty={renderedIsTypeEntity}
+                        typeEditScope={renderedIsTypeEntity ? renderedTypeEditImpact ?? undefined : undefined}
                       />
                     ))}
                   </>
                 )}
 
                 {/* Inherited Type Properties */}
-                {inheritedTypeProperties.length > 0 && typeProperties && (
+                {renderedInheritedTypeProperties.length > 0 && renderedTypeProperties && (
                   <>
-                    {occurrenceProperties.length > 0 && (
+                    {renderedOccurrenceProperties.length > 0 && (
                       <div className="border-t border-indigo-200 dark:border-indigo-800/50 pt-2 mt-2" />
                     )}
                     <div className="flex items-center gap-2 px-1 pb-0.5 text-[11px] text-indigo-600/70 dark:text-indigo-400/60 uppercase tracking-wider font-semibold">
                       <Building2 className="h-3 w-3 shrink-0" />
-                      <span className="truncate">Inherited Type Properties</span>
+                      <span className="truncate">Type Properties ({renderedTypeProperties.typeName})</span>
                     </div>
-                    {inheritedTypeProperties.map((pset: PropertySet) => (
+                    {renderedInheritedTypeProperties.map((pset: PropertySet) => (
                       <PropertySetCard
                         key={`type-${pset.name}`}
                         pset={pset}
                         modelId={selectedEntity?.modelId}
-                        entityId={typeProperties.typeId}
-                        enableEditing={editMode}
+                        entityId={renderedTypeProperties.typeId}
+                        enableEditing={editMode && !isNativeLazySelection}
                         isTypeProperty
-                        typeEditScope={typeEditImpact?.mode === 'inherited' ? typeEditImpact : undefined}
+                        typeEditScope={renderedTypeEditImpact?.mode === 'inherited' ? renderedTypeEditImpact : undefined}
                       />
                     ))}
                   </>
                 )}
 
                 {/* Classifications */}
-                {classifications.length > 0 && (
+                {renderedClassifications.length > 0 && (
                   <>
-                    {mergedProperties.length > 0 && (
+                    {renderedMergedProperties.length > 0 && (
                       <div className="border-t border-zinc-200 dark:border-zinc-800 pt-2 mt-2" />
                     )}
-                    {classifications.map((classification, i) => (
+                    {renderedClassifications.map((classification, i) => (
                       <ClassificationCard key={`class-${i}`} classification={classification} />
                     ))}
                   </>
                 )}
 
                 {/* Materials */}
-                {materialInfo && (
+                {renderedMaterialInfo && (
                   <>
-                    {(mergedProperties.length > 0 || classifications.length > 0) && (
+                    {(renderedMergedProperties.length > 0 || renderedClassifications.length > 0) && (
                       <div className="border-t border-zinc-200 dark:border-zinc-800 pt-2 mt-2" />
                     )}
-                    <MaterialCard material={materialInfo} />
+                    <MaterialCard material={renderedMaterialInfo} />
                   </>
                 )}
 
                 {/* Documents */}
-                {documents.length > 0 && (
+                {renderedDocuments.length > 0 && (
                   <>
-                    {(mergedProperties.length > 0 || classifications.length > 0 || materialInfo) && (
+                    {(renderedMergedProperties.length > 0 || renderedClassifications.length > 0 || renderedMaterialInfo) && (
                       <div className="border-t border-zinc-200 dark:border-zinc-800 pt-2 mt-2" />
                     )}
-                    {documents.map((doc, i) => (
+                    {renderedDocuments.map((doc, i) => (
                       <DocumentCard key={`doc-${i}`} document={doc} />
                     ))}
                   </>
                 )}
 
                 {/* Relationships */}
-                {entityRelationships && (
+                {renderedEntityRelationships && (
                   <>
                     <div className="border-t border-zinc-200 dark:border-zinc-800 pt-2 mt-2" />
-                    <RelationshipsCard relationships={entityRelationships} />
+                    <RelationshipsCard relationships={renderedEntityRelationships} />
                   </>
                 )}
               </div>
@@ -1193,11 +1368,11 @@ export function PropertiesPanel() {
           </TabsContent>
 
           <TabsContent value="quantities" className="m-0 p-3 overflow-hidden">
-            {quantities.length === 0 ? (
+            {renderedQuantities.length === 0 ? (
               <p className="text-sm text-zinc-500 dark:text-zinc-500 text-center py-8 font-mono">No quantities</p>
             ) : (
               <div className="space-y-3 w-full overflow-hidden">
-                {quantities.map((qset: QuantitySet) => (
+                {renderedQuantities.map((qset: QuantitySet) => (
                   <QuantitySetCard key={qset.name} qset={qset} />
                 ))}
               </div>
@@ -1210,11 +1385,11 @@ export function PropertiesPanel() {
                 entityType={entityType}
                 modelId={selectedEntity.modelId}
                 entityId={selectedEntity.expressId}
-                existingPsets={mergedProperties.map(p => p.name)}
-                existingProps={existingProps}
-                existingQsets={quantities.map(q => q.name)}
-                existingQuants={existingQuants}
-                existingAttributes={existingAttributeNames}
+                existingPsets={renderedMergedProperties.map(p => p.name)}
+                existingProps={renderedExistingProps}
+                existingQsets={renderedQuantities.map(q => q.name)}
+                existingQuants={renderedExistingQuants}
+                existingAttributes={renderedExistingAttributeNames}
               />
             )}
           </TabsContent>