remove position hack for zone + fade-in-out anims

apps/editor/app/viewer/[id]/viewer-zone-system.tsx

@@ -25,16 +25,10 @@ export const ViewerZoneSystem = () => {
 
       obj.visible = shouldShow
 
-      // Also hide the label
+      const targetOpacity = shouldShow ? '1' : '0'
-      const label = obj.getObjectByName('label')
+      const labelEl = document.getElementById(`${id}-label`)
-      if (label) {
+      if (labelEl && labelEl.style.opacity !== targetOpacity) {
-        // Hide label if zone layer is off OR if in solo mode on a different level
+        labelEl.style.opacity = targetOpacity
-        const labelPosition = obj.userData.labelPosition as [number, number, number] | undefined
-        if (shouldShow && labelPosition) {
-          label.position.set(...labelPosition)
-        } else {
-          label.position.set(-9999, -9999, -9999)
-        }
       }
     })
   })

apps/editor/components/systems/zone/zone-system.tsx

@@ -27,20 +27,12 @@ export const ZoneSystem = () => {
         obj.visible = visible
       }
 
-      const label = obj.getObjectByName('label')
+      // Hide label if zone layer is off OR if in solo mode on a different level
-      if (label) {
+      const showLabel = visible && !hideInSoloMode
-        // Hide label if zone layer is off OR if in solo mode on a different level
+      const targetOpacity = showLabel ? '1' : '0'
-        const showLabel = visible && !hideInSoloMode;
+      const labelEl = document.getElementById(`${zoneId}-label`)
-        const labelPosition = obj.userData.labelPosition as [number, number, number] | undefined
+      if (labelEl && labelEl.style.opacity !== targetOpacity) {
-        
+        labelEl.style.opacity = targetOpacity
-        const targetX = showLabel && labelPosition ? labelPosition[0] : -9999
-        if (label.position.x !== targetX) {
-          if (showLabel && labelPosition) {
-            label.position.set(...labelPosition)
-          } else {
-            label.position.set(-9999, -9999, -9999)
-          }
-        }
       }
     })
   })

packages/viewer/src/components/renderers/zone/zone-renderer.tsx

@@ -190,6 +190,8 @@ export const ZoneRenderer = ({ node }: { node: ZoneNode }) => {
           flexDirection: 'column',
           alignItems: 'center',
           transform: 'translate3d(-50%, -50%, 0)',
+          opacity: 0,
+          transition: 'opacity 0.3s ease-in-out',
         }}>
         <div
           style={{