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 label = obj.getObjectByName('label')
-      if (label) {
-        // Hide label if zone layer is off OR if in solo mode on a different level
-        const labelPosition = obj.userData.labelPosition as [number, number, number] | undefined
-        if (shouldShow && labelPosition) {
-          label.position.set(...labelPosition)
-        } else {
-          label.position.set(-9999, -9999, -9999)
-        }
+      const targetOpacity = shouldShow ? '1' : '0'
+      const labelEl = document.getElementById(`${id}-label`)
+      if (labelEl && labelEl.style.opacity !== targetOpacity) {
+        labelEl.style.opacity = targetOpacity
       }
     })
   })

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

@@ -26,21 +26,13 @@ export const ZoneSystem = () => {
       if (obj.visible !== visible) {
         obj.visible = visible
       }
-      
-      const label = obj.getObjectByName('label')
-      if (label) {
-        // Hide label if zone layer is off OR if in solo mode on a different level
-        const showLabel = visible && !hideInSoloMode;
-        const labelPosition = obj.userData.labelPosition as [number, number, number] | undefined
-        
-        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)
-          }
-        }
+
+      // Hide label if zone layer is off OR if in solo mode on a different level
+      const showLabel = visible && !hideInSoloMode
+      const targetOpacity = showLabel ? '1' : '0'
+      const labelEl = document.getElementById(`${zoneId}-label`)
+      if (labelEl && labelEl.style.opacity !== targetOpacity) {
+        labelEl.style.opacity = targetOpacity
       }
     })
   })

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

@@ -186,10 +186,12 @@ export const ZoneRenderer = ({ node }: { node: ZoneNode }) => {
         zIndexRange={[10, 0]}
       >
         <div id={`${node.id}-label`} style={{
-          display: 'flex', 
-          flexDirection: 'column', 
+          display: 'flex',
+          flexDirection: 'column',
           alignItems: 'center',
           transform: 'translate3d(-50%, -50%, 0)',
+          opacity: 0,
+          transition: 'opacity 0.3s ease-in-out',
         }}>
         <div
           style={{