dev day #67

frontend/src/hooks/usePageElementConfig.ts

@@ -42,13 +42,16 @@ export const useAllPageElementConfigs = (pageType: string) => {
   const [styles, setStyles] = useState<Record<string, Record<string, any>>>({});
   const [elementOrder, setElementOrder] = useState<string[]>([]);
   const [loading, setLoading] = useState(true);
+  const [refreshKey, setRefreshKey] = useState<number>(0);
 
   useEffect(() => {
     let active = true;
 
     // Helper function to apply DOM order
     const applyDOMOrder = (order: string[]) => {
-      const container = document.querySelector('.container');
+      // Check if MyUIbrix viewport wrapper is active
+      const viewportWrapper = document.querySelector('.myuibrix-viewport-wrapper');
+      const container = viewportWrapper || document.querySelector('.container');
       if (!container) return;
       
       const sections = Array.from(container.querySelectorAll('[data-element]')) as HTMLElement[];
@@ -108,11 +111,13 @@ export const useAllPageElementConfigs = (pageType: string) => {
 
     // Listen for live updates from MyUIbrix editor (ONLY in preview mode)
     const handleMyUIbrixChange = ((event: CustomEvent) => {
-      const { elementName, variant, visible, previewMode } = event.detail;
+      const { elementName, variant, visible, previewMode, timestamp } = event.detail;
       
       // Only apply changes if in preview mode (editing)
       // This prevents production users from seeing draft changes
       if (previewMode) {
+        console.log(`[usePageElementConfig] Variant change: ${elementName} -> ${variant}`);
+        
         setConfigs(prev => ({
           ...prev,
           [elementName]: variant
@@ -122,6 +127,9 @@ export const useAllPageElementConfigs = (pageType: string) => {
           ...prev,
           [elementName]: visible
         }));
+        
+        // Force React to re-render by incrementing refresh key
+        setRefreshKey(prev => prev + 1);
       }
     }) as EventListener;
 
@@ -137,27 +145,12 @@ export const useAllPageElementConfigs = (pageType: string) => {
       const { elementName, styles: newStyles, previewMode } = event.detail;
       
       if (previewMode) {
+        // Only update state - let React apply the styles through component rendering
+        // This prevents conflicts with React's virtual DOM
         setStyles(prev => ({
           ...prev,
           [elementName]: newStyles
         }));
-        
-        // Apply styles to DOM element immediately
-        const element = document.querySelector(`[data-element="${elementName}"]`) as HTMLElement;
-        if (element) {
-          // Convert style object to CSS
-          Object.keys(newStyles).forEach(key => {
-            const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
-            let value = newStyles[key];
-            
-            // Handle numeric values that need units
-            if (typeof value === 'number' && !['fontWeight', 'lineHeight', 'opacity', 'zIndex'].includes(key)) {
-              value = `${value}px`;
-            }
-            
-            element.style.setProperty(cssKey, String(value));
-          });
-        }
       }
     }) as EventListener;
 
@@ -185,5 +178,5 @@ export const useAllPageElementConfigs = (pageType: string) => {
     return styles[elementName];
   };
 
-  return { configs, visibility, styles, elementOrder, getVariant, isVisible, getStyles, loading };
+  return { configs, visibility, styles, elementOrder, getVariant, isVisible, getStyles, loading, refreshKey };
 };