From 5e0c64b760c73782af60814ec06ee58d9cd5931c Mon Sep 17 00:00:00 2001
From: wass08 <wass08@gmail.com>
Date: Wed, 4 Mar 2026 11:22:01 +0100
Subject: [PATCH] remove position hack for zone + fade-in-out anims

---
 .../app/viewer/[id]/viewer-zone-system.tsx    | 14 ++++--------
 .../components/systems/zone/zone-system.tsx   | 22 ++++++-------------
 .../renderers/zone/zone-renderer.tsx          |  6 +++--
 3 files changed, 15 insertions(+), 27 deletions(-)

diff --git a/apps/editor/app/viewer/[id]/viewer-zone-system.tsx b/apps/editor/app/viewer/[id]/viewer-zone-system.tsx
index 80b48ca4..7dd03ded 100644
--- a/apps/editor/app/viewer/[id]/viewer-zone-system.tsx
+++ b/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
       }
     })
   })
diff --git a/apps/editor/components/systems/zone/zone-system.tsx b/apps/editor/components/systems/zone/zone-system.tsx
index 883123de..63f1399e 100644
--- a/apps/editor/components/systems/zone/zone-system.tsx
+++ b/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
       }
     })
   })
diff --git a/packages/viewer/src/components/renderers/zone/zone-renderer.tsx b/packages/viewer/src/components/renderers/zone/zone-renderer.tsx
index 3654c255..8719d848 100644
--- a/packages/viewer/src/components/renderers/zone/zone-renderer.tsx
+++ b/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={{