@widgetic/editor 4.0.2 → 4.0.3

package/dist/components/editors/PropsEditor.svelte

@@ -157,6 +157,18 @@
     let hasLoggedContent = false; // Prevents duplicate logging of content tab info
     let designState: Record<string, InputValue> = { ...initialDesignValues }; // Stores design property values
     let contentState: Record<string, InputValue> = { ...initialContentValues }; // Stores content property values
+
+    let prevInitialDesignValues = initialDesignValues;
+    $: if (initialDesignValues !== prevInitialDesignValues) {
+      prevInitialDesignValues = initialDesignValues;
+      designState = { ...initialDesignValues };
+    }
+
+    let prevInitialContentValues = initialContentValues;
+    $: if (initialContentValues !== prevInitialContentValues) {
+      prevInitialContentValues = initialContentValues;
+      contentState = { ...initialContentValues };
+    }
     let isGenericContentOpen = true; // Controls generic content section visibility
     let lastFocusedDesignController: string | null = null; // Tracks last focused design input
     let lastFocusedContentController: string | null = null; // Tracks last focused content input
@@ -226,7 +238,7 @@
         }
         
         if (keysToRemove.length > 0) {
-            console.log('🧹 [PropsEditor] Clearing font weight states on init:', keysToRemove);
+            // console.log('🧹 [PropsEditor] Clearing font weight states on init:', keysToRemove);
             keysToRemove.forEach(key => localStorage.removeItem(key));
         }
     }
@@ -275,26 +287,8 @@
     // Initialize FontManager
     const initializeEditor = async () => {
       try {
-        // console.log('🚀 [PropsEditor] Starting initialization...', {
-        //   hasDesignSchema: !!designSchema,
-        //   hasContentSchema: !!contentSchema
-        // });
-
-        // Initialize FontManager when PropsEditor mounts
-        // console.log('📚 [PropsEditor] Initializing FontManager...');
-        const fontManagerInstance = await FontManager.getInstance(appConfig.GOOGLE_FONTS_API_KEY);
-        // console.log('✅ [PropsEditor] FontManager initialized');
-        
-        // Preload the "Mine" category fonts to prevent loading delay in FontInputController instances
-        try {
-          const customFonts = await fontManagerInstance.loadCustomFonts();
-          console.log('✅ [PropsEditor] Preloaded "Mine" category fonts:', {
-            count: customFonts.length,
-            fonts: customFonts.slice(0, 3).map(f => f.family)
-          });
-        } catch (error) {
-          console.error('❌ [PropsEditor] Failed to preload "Mine" category fonts:', error);
-        }
+        // Initialize FontManager in background without blocking editor startup
+        void FontManager.getInstance(appConfig.GOOGLE_FONTS_API_KEY);
         
         // Log design tab info if schema exists
         if (designSchema && designSchema[0]?.components && !hasLoggedDesign) {
@@ -507,7 +501,7 @@
 
             // Update event handlers
             currentDraggable.on('drag:start', (event: any) => {
-              console.log('[Draggable] drag:start event');
+              // console.log('[Draggable] drag:start event');
               isDragging = true; // Set flag immediately to prevent afterUpdate interference
 
               const dragHandle = event.originalSource?.querySelector('.drag-handle');
@@ -577,7 +571,7 @@
                 if (deltaX > dragThreshold || deltaY > dragThreshold) {
                   isDragStarted = true;
                   // isDragging = true; - This is now set in drag:start
-                  console.log('[Draggable] isDragStarted set to true');
+                  // console.log('[Draggable] isDragStarted set to true');
 
                   requestAnimationFrame(() => {
                     const mirror = document.querySelector('.draggable-mirror');
@@ -705,7 +699,7 @@
             });
 
             currentDraggable.on('sortable:sorted', (event: { newIndex: number; oldIndex: number }) => {
-              console.log('[Draggable] sortable:sorted event fired', { oldIndex: event.oldIndex, newIndex: event.newIndex });
+              // console.log('[Draggable] sortable:sorted event fired', { oldIndex: event.oldIndex, newIndex: event.newIndex });
               try {
                 const { oldIndex, newIndex } = event;
 
@@ -718,7 +712,7 @@
                 
                 // No need to do anything if the item was dropped in the same place
                 if (oldIndex === newIndex) {
-                  console.log('[Drag] Item dropped in the same position. No change needed.');
+                  // console.log('[Drag] Item dropped in the same position. No change needed.');
                   isDragStarted = false;
                   return;
                 }
@@ -728,7 +722,7 @@
                   isDragStarted = false;
                   return;
                 }
-                console.log('[Drag] Before:', contentSchema.contentItems.map((i: ContentItem) => ({ id: i.id, title: i.title })));
+                // console.log('[Drag] Before:', contentSchema.contentItems.map((i: ContentItem) => ({ id: i.id, title: i.title })));
 
                 const items = [...contentSchema.contentItems];
                 const [movedItem] = items.splice(oldIndex, 1);
@@ -749,7 +743,7 @@
                 
                 const renumbered = renumberAutoItemTitles(items);
                 contentSchema = { ...contentSchema, contentItems: renumbered };
-                console.log('[Drag] After (reordered with indices):', contentSchema.contentItems.map((i: ContentItem) => ({ id: i.id, title: i.title })));
+                // console.log('[Drag] After (reordered with indices):', contentSchema.contentItems.map((i: ContentItem) => ({ id: i.id, title: i.title })));
                 dispatch('updated', { contentSchema });
                 dispatchContentItemsChanged(contentSchema.contentItems);
 
@@ -887,7 +881,7 @@
         }
         if (needsUpdate) {
             contentState = { ...contentState, ...patch };
-            console.log('[PropsEditor] Initialized content item state keys:', Object.keys(patch));
+            // console.log('[PropsEditor] Initialized content item state keys:', Object.keys(patch));
         }
     }
 
@@ -1026,63 +1020,61 @@
      * @param opacity - Optional opacity value for color properties
      */
     function updateState(schema: string, propertyId: string, value: InputValue, opacity?: number) {
-      requestAnimationFrame(() => {
-        if (schema === 'design') {
-          const newState = { ...designState };
-          newState[propertyId] = value;
-          if (opacity !== undefined) {
-            newState[`${propertyId}_opacity`] = opacity;
-          }
-          designState = newState;
-        } else {
-          const newState = { ...contentState };
-          newState[propertyId] = value;
-          if (opacity !== undefined) {
-            newState[`${propertyId}_opacity`] = opacity;
-          }
-          contentState = newState;
-
-          // For content item properties (keyed as "itemId__propName"), also update item.properties[].value
-          if (propertyId.includes('__') && Array.isArray(contentSchema?.contentItems)) {
-            const [itemId, basePropName] = propertyId.split('__');
-            const item = contentSchema.contentItems.find((i: ContentItem) => i.id === itemId);
-            if (item) {
-              const prop = item.properties.find((p: any) => (p.id || p.name) === basePropName);
-              if (prop) prop.value = value;
-
-              // Update the collapsible header title when a "title"-like property changes
-              const propName = (basePropName || '').toLowerCase();
-              if (propName.includes('title') || propName.includes('name') || propName.includes('label')) {
-                if (typeof value === 'string' && value.trim()) {
-                  item.title = value;
-                  contentSchema = contentSchema; // trigger Svelte reactivity
-                }
+      if (schema === 'design') {
+        const newState = { ...designState };
+        newState[propertyId] = value;
+        if (opacity !== undefined) {
+          newState[`${propertyId}_opacity`] = opacity;
+        }
+        designState = newState;
+      } else {
+        const newState = { ...contentState };
+        newState[propertyId] = value;
+        if (opacity !== undefined) {
+          newState[`${propertyId}_opacity`] = opacity;
+        }
+        contentState = newState;
+
+        // For content item properties (keyed as "itemId__propName"), also update item.properties[].value
+        if (propertyId.includes('__') && Array.isArray(contentSchema?.contentItems)) {
+          const [itemId, basePropName] = propertyId.split('__');
+          const item = contentSchema.contentItems.find((i: ContentItem) => i.id === itemId);
+          if (item) {
+            const prop = item.properties.find((p: any) => (p.id || p.name) === basePropName);
+            if (prop) prop.value = value;
+
+            // Update the collapsible header title when a "title"-like property changes
+            const propName = (basePropName || '').toLowerCase();
+            if (propName.includes('title') || propName.includes('name') || propName.includes('label')) {
+              if (typeof value === 'string' && value.trim()) {
+                item.title = value;
+                contentSchema = contentSchema; // trigger Svelte reactivity
               }
             }
           }
         }
+      }
 
-        // Dispatch with both composite key and item context for parent to handle
-        let itemId: string | undefined;
-        let originalPropertyId = propertyId;
-        if (schema === 'content' && propertyId.includes('__')) {
-          [itemId, originalPropertyId] = propertyId.split('__');
-        }
-        
-        dispatch('propertyChange', { schema, propertyId: originalPropertyId, value, opacity, itemId });
+      // Dispatch with both composite key and item context for parent to handle
+      let itemId: string | undefined;
+      let originalPropertyId = propertyId;
+      if (schema === 'content' && propertyId.includes('__')) {
+        [itemId, originalPropertyId] = propertyId.split('__');
+      }
+      
+      dispatch('propertyChange', { schema, propertyId: originalPropertyId, value, opacity, itemId });
 
-        if (schema === 'content' && itemId && Array.isArray(contentSchema?.contentItems)) {
-          dispatchContentItemsChanged(contentSchema.contentItems);
-        }
+      if (schema === 'content' && itemId && Array.isArray(contentSchema?.contentItems)) {
+        dispatchContentItemsChanged(contentSchema.contentItems);
+      }
 
-        // When editing a content item property, navigate widget to that item
-        if (itemId) {
-          const itemIndex = getContentItemIndex(itemId);
-          if (itemIndex >= 0) {
-            dispatch('goToItem', { index: itemIndex });
-          }
+      // When editing a content item property, navigate widget to that item
+      if (itemId) {
+        const itemIndex = getContentItemIndex(itemId);
+        if (itemIndex >= 0) {
+          dispatch('goToItem', { index: itemIndex });
         }
-      });
+      }
     }
 
     function getContentItemsMax(): number | null {
@@ -1137,10 +1129,10 @@
           lastFocusedContentController = controllerId;
         }
         
-        console.log(`Controller focused in ${currentTab} tab:`, {
-          controllerId,
-          ...controllerInfo
-        });
+        // console.log(`Controller focused in ${currentTab} tab:`, {
+          // controllerId,
+          // ...controllerInfo
+        // });
       }
     }
 
@@ -1153,12 +1145,12 @@
       const currentValue = tab ?? getActiveTab();
       const previousTab = currentTab;
       
-      console.log('🔄 [PropsEditor] Tab Change:', {
-        from: previousTab,
-        to: currentValue,
-        hasContentSchema: !!contentSchema,
-        isInitialLoad
-      });
+      // console.log('🔄 [PropsEditor] Tab Change:', {
+        // from: previousTab,
+        // to: currentValue,
+        // hasContentSchema: !!contentSchema,
+        // isInitialLoad
+      // });
 
       // Update tab state
       currentTab = currentValue;
@@ -1168,16 +1160,16 @@
 
       // Only proceed with content-related operations if contentSchema exists
       if (currentValue === 'content' && !contentSchema) {
-        console.log('ℹ️ [PropsEditor] Content tab selected but no content schema available');
+        // console.log('ℹ️ [PropsEditor] Content tab selected but no content schema available');
         return;
       }
       
       // Only log state if content exists
       if (contentSchema) {
-        console.log('💾 Storing', currentValue, 'tab state:', {
-          openItems: Array.from(openItems),
-          openAccordion: currentValue === 'design' ? designOpenAccordion : contentOpenAccordion
-        });
+        // console.log('💾 Storing', currentValue, 'tab state:', {
+          // openItems: Array.from(openItems),
+          // openAccordion: currentValue === 'design' ? designOpenAccordion : contentOpenAccordion
+        // });
       }
 
       // First find and remove all modal-related elements, but preserve draggable
@@ -1198,15 +1190,15 @@
           '.command-dialog'
         ].join(','));
 
-        console.log('🧹 Cleaning up modals:', {
-          count: modalElements.length,
-          elements: Array.from(modalElements).map(el => ({
-            className: el.className,
-            role: el.getAttribute('role'),
-            state: el.getAttribute('data-state'),
-            side: el.getAttribute('data-side')
-          }))
-        });
+        // console.log('🧹 Cleaning up modals:', {
+          // count: modalElements.length,
+          // elements: Array.from(modalElements).map(el => ({
+            // className: el.className,
+            // role: el.getAttribute('role'),
+            // state: el.getAttribute('data-state'),
+            // side: el.getAttribute('data-side')
+          // }))
+        // });
 
         // Remove each modal immediately, but protect scroll-related and draggable elements
         modalElements.forEach(element => {
@@ -1236,7 +1228,7 @@
         // Clear the dropdowns store
         const currentDropdowns = get(openDropdowns);
         if (currentDropdowns.size > 0) {
-          console.log('🗑️ Clearing dropdowns:', Array.from(currentDropdowns));
+          // console.log('🗑️ Clearing dropdowns:', Array.from(currentDropdowns));
         }
         openDropdowns.set(new Set());
 
@@ -1254,7 +1246,7 @@
       if (currentValue === 'content' && contentSchema) {
         // Wait for tab content to be rendered
         setTimeout(async () => {
-          console.log('🎯 Checking draggable state in content tab');
+          // console.log('🎯 Checking draggable state in content tab');
           
           // Check if draggable needs initialization
           const containers = document.querySelectorAll('.content-items');
@@ -1264,10 +1256,10 @@
                           !document.querySelector('.draggable-container');
 
           if (needsInit) {
-            console.log('🔄 Reinitializing draggable');
+            // console.log('🔄 Reinitializing draggable');
             await initializeDraggable();
           } else {
-            console.log('✅ Draggable already initialized and working');
+            // console.log('✅ Draggable already initialized and working');
           }
         }, 50);
       }
@@ -1278,10 +1270,10 @@
 
       // Only log if content exists
       if (contentSchema) {
-        console.log('🔄 Restoring state for', currentValue, 'tab:', {
-          openItems: Array.from(openItems),
-          accordionToOpen
-        });
+        // console.log('🔄 Restoring state for', currentValue, 'tab:', {
+          // openItems: Array.from(openItems),
+          // accordionToOpen
+        // });
       }
 
       // Restore accordion states after a short delay to ensure DOM is ready
@@ -1294,7 +1286,7 @@
           }
         }
         if (itemsToOpen.length > 0) {
-          console.log('📂 Opened accordions:', itemsToOpen);
+          // console.log('📂 Opened accordions:', itemsToOpen);
         }
       }, 50);
       
@@ -1305,7 +1297,7 @@
           : lastFocusedContentController;
           
         if (controllerToFocus) {
-          console.log('🎯 Focusing last focused controller:', controllerToFocus);
+          // console.log('🎯 Focusing last focused controller:', controllerToFocus);
           activeControllerId = controllerToFocus;
           focusController(controllerToFocus);
         } else {
@@ -1316,7 +1308,7 @@
           if (firstController) {
             const id = firstController.getAttribute('id');
             if (id) {
-              console.log('🎯 Focusing first controller:', id);
+              // console.log('🎯 Focusing first controller:', id);
               activeControllerId = id;
               focusController(id);
             }
@@ -1329,6 +1321,16 @@
      * Input Controller Management
      * Handles rendering and configuration of different input types
      */
+    function fontIcVisibleLabel(propertyId: string, schemaLabel?: string, description?: string): string {
+        const fromSchema = String(schemaLabel || '').trim();
+        if (fromSchema) return fromSchema;
+        const trimmed = String(description || '').trim();
+        if (trimmed && !/^(titleFont|subtitleFont|headingFont|descriptionFont|font|titeFont)$/i.test(trimmed)) {
+            return trimmed;
+        }
+        return '';
+    }
+
     function renderInputController(schema: string, property: any, propertyIndex: number, isFirstGroup: boolean, contentItemId?: string) {
         const basePropertyId = property.id || property.name;
         const propertyId = contentItemId ? `${contentItemId}__${basePropertyId}` : basePropertyId;
@@ -1386,7 +1388,7 @@
                 portalTarget,
                 ...restInputController,
                 ...(String(inputController.type || '').toLowerCase() === 'font'
-                  ? { label: description || propertyId || '' }
+                  ? { label: fontIcVisibleLabel(propertyId, label, description) }
                   : {}),
                 ...property.constraints,
                 ...additionalProps,
@@ -1396,10 +1398,10 @@
                 toggleDropdown: (id: string) => {
                     const currentSet = get(openDropdowns);
                     if (currentSet.has(id)) {
-                        console.log(`[toggleDropdown] CLOSING ${id}`);
+                        // console.log(`[toggleDropdown] CLOSING ${id}`);
                         openDropdowns.set(new Set());
                     } else {
-                        console.log(`[toggleDropdown] OPENING ${id} (closing all others)`);
+                        // console.log(`[toggleDropdown] OPENING ${id} (closing all others)`);
                         openDropdowns.set(new Set([id]));
                     }
                 },
@@ -1429,7 +1431,9 @@
                 'data-visibility-dependent': hasVisibilityCondition
             },
             header: {
-                label: description || propertyId,
+                label: String(inputController.type || '').toLowerCase() === 'font'
+                  ? fontIcVisibleLabel(propertyId, label, description)
+                  : (description || propertyId),
                 helpText: inputController.helpText
             }
         };
@@ -1479,7 +1483,7 @@
      * Used when changing tabs or when scroll events occur
      */
     function closeAllDropdowns() {
-      console.log('Closing all dropdowns');
+      // console.log('Closing all dropdowns');
       openDropdowns.set(new Set());
     }
     
@@ -1543,7 +1547,7 @@
      * @param itemId - Identifier for the content item to toggle
      */
     function toggleItem(itemId: string) {
-      console.log('🔄 Toggling item:', itemId, 'Current state:', openItems.has(itemId));
+      // console.log('🔄 Toggling item:', itemId, 'Current state:', openItems.has(itemId));
       
       if (openItems.has(itemId)) {
         openItems.delete(itemId);
@@ -1563,11 +1567,11 @@
       openItems = new Set(openItems);
       previouslyOpen = new Set(previouslyOpen);
       
-      console.log('✅ New state:', {
-        isOpen: openItems.has(itemId),
-        openItems: Array.from(openItems),
-        previouslyOpen: Array.from(previouslyOpen)
-      });
+      // console.log('✅ New state:', {
+        // isOpen: openItems.has(itemId),
+        // openItems: Array.from(openItems),
+        // previouslyOpen: Array.from(previouslyOpen)
+      // });
     }
 
     /** Returns the index of a content item by its id, or -1 if not found */
@@ -1632,25 +1636,25 @@
      * Controls input focus behavior and tab switching
      */
     function focusController(controllerId: string) {
-      console.log('Attempting to focus controller:', controllerId);
+      // console.log('Attempting to focus controller:', controllerId);
       activeControllerId = controllerId;
       const element = document.getElementById(controllerId);
       if (element) {
         const componentInstance = element.querySelector(':scope > *');
         if (componentInstance && 'focus' in componentInstance) {
-          console.log('Calling focus method on component');
+          // console.log('Calling focus method on component');
           (componentInstance as any).focus();
         } else {
           const input = element.querySelector('input, textarea, [role="slider"], button');
           if (input instanceof HTMLElement) {
-            console.log('Found focusable element:', input);
+            // console.log('Found focusable element:', input);
             input.focus();
           } else {
-            console.log('No focusable element found in controller');
+            // console.log('No focusable element found in controller');
           }
         }
       } else {
-        console.log('Controller element not found:', controllerId);
+        // console.log('Controller element not found:', controllerId);
       }
     }
 
@@ -1675,7 +1679,7 @@
           contentSchema.contentItems.forEach((item: ContentItem) => {
             if (item.id) {
               openItems.add(item.id);
-              console.log("Added content item:", item.id);
+              // console.log("Added content item:", item.id);
             }
           });
         } else {
@@ -1877,7 +1881,7 @@
           return;
         }
         // Log before add
-        console.log('[Add] Before:', contentSchema.contentItems.map((i: ContentItem) => ({ id: i.id, title: i.title })));
+        // console.log('[Add] Before:', contentSchema.contentItems.map((i: ContentItem) => ({ id: i.id, title: i.title })));
         // Generate a unique ID for the new item
         let uniqueId: string;
         do {
@@ -1920,8 +1924,8 @@
           dispatch('goToItem', { index: newItemIndex });
         }
         // Log after add
-        console.log('[Add] After (should be at end):', contentSchema.contentItems.map((i: ContentItem) => ({ id: i.id, title: i.title })));
-        console.log('[Add] New item added:', newItem);
+        // console.log('[Add] After (should be at end):', contentSchema.contentItems.map((i: ContentItem) => ({ id: i.id, title: i.title })));
+        // console.log('[Add] New item added:', newItem);
         
         // Ensure DOM order matches array order after adding new item
         setTimeout(() => {
@@ -2051,7 +2055,7 @@
         }
         return { id: item.id, title: item.title, ...props };
       });
-      console.log('[PropsEditor] Dispatching contentItemsChanged:', serialized.length, 'items');
+      // console.log('[PropsEditor] Dispatching contentItemsChanged:', serialized.length, 'items');
       dispatch('contentItemsChanged', { items: serialized });
     }
 
@@ -2068,7 +2072,7 @@
         }
 
         // Log before deletion
-        console.log('[Delete] Before:', contentSchema.contentItems.map((i: ContentItem) => ({ id: i.id, title: i.title })));
+        // console.log('[Delete] Before:', contentSchema.contentItems.map((i: ContentItem) => ({ id: i.id, title: i.title })));
         const deletedIndex = contentSchema.contentItems.findIndex((i: ContentItem) => i.id === itemId);
         const initialLength = contentSchema.contentItems.length;
         contentSchema.contentItems = contentSchema.contentItems.filter((i: ContentItem) => i.id !== itemId);
@@ -2080,7 +2084,7 @@
           console.warn('🤔 No item found with ID:', itemId);
         } else {
           // Log after deletion
-          console.log('[Delete] After:', contentSchema.contentItems.map((i: ContentItem) => ({ id: i.id, title: i.title })));
+          // console.log('[Delete] After:', contentSchema.contentItems.map((i: ContentItem) => ({ id: i.id, title: i.title })));
           // Notify parent about the updated items list
           dispatch('updated', { contentSchema });
           dispatchContentItemsChanged(contentSchema.contentItems);
@@ -2090,7 +2094,7 @@
             dispatch('goToItem', { index: targetIndex });
           }
           setTimeout(() => {
-            console.log('🔄 Reinitializing draggable after deletion');
+            // console.log('🔄 Reinitializing draggable after deletion');
             initializeDraggable();
           }, 0);
         }
@@ -2155,13 +2159,13 @@
       // Initialize the correct tab based on schema availability
       const initialTab = getActiveTab();
       if (initialTab === 'content' && contentSchema) {
-        console.log('🎯 Initializing content tab as default');
+        // console.log('🎯 Initializing content tab as default');
         currentTab = 'content';
         
         // Wait for DOM to be ready
         setTimeout(async () => {
           try {
-            console.log('🔄 Initializing draggable for content tab');
+            // console.log('🔄 Initializing draggable for content tab');
             await initializeDraggable();
             
             // Set initial states
@@ -2236,7 +2240,7 @@
       const newTab = getActiveTab();
       if (defaultTab !== newTab) {
         defaultTab = newTab;
-        console.log('📑 [PropsEditor] Updated defaultTab:', { from: defaultTab, to: newTab, hasDesignSchema: !!designSchema, hasContentSchema: !!contentSchema });
+        // console.log('📑 [PropsEditor] Updated defaultTab:', { from: defaultTab, to: newTab, hasDesignSchema: !!designSchema, hasContentSchema: !!contentSchema });
       }
     }
 
@@ -2308,7 +2312,7 @@
 
     // Add a reactive log after render to show the current array order and titles
     $: if (contentSchema && Array.isArray(contentSchema?.contentItems)) {
-      console.log('[Render] Current contentItems order:', contentSchema.contentItems.map((i: ContentItem) => ({ id: i.id, title: i.title })));
+      // console.log('[Render] Current contentItems order:', contentSchema.contentItems.map((i: ContentItem) => ({ id: i.id, title: i.title })));
     }
 
     /** Safe accessor — always returns an array even when contentSchema.contentItems is missing or not an array */
@@ -2324,7 +2328,7 @@
     // Helper: log DOM visual order for debugging
     function logOrder(label: string) {
       const titles = Array.from(document.querySelectorAll('.content-item .content-title')).map(el => el.textContent?.trim());
-      console.log(`[Order-check] ${label}:`, titles);
+      // console.log(`[Order-check] ${label}:`, titles);
       const transforms = Array.from(document.querySelectorAll('.content-item')).map(el => ({ id: (el as HTMLElement).dataset.id, transform: (el as HTMLElement).style.transform }));
       console.table(transforms);
     }
@@ -2393,9 +2397,9 @@
             >
               <Tabs.Trigger
                 value="design" 
-                class="body flex-1 h-full rounded-[11px] transition-colors duration-250 text-grey5 hover:text-grey7 hover:underline data-[state=active]:bg-white data-[state=active]:text-grey7 data-[state=active]:hover:text-grey7"
+                class="flex-1 h-full rounded-[11px] transition-colors duration-250 text-grey5 hover:text-grey7 hover:underline data-[state=active]:bg-white data-[state=active]:text-grey7 data-[state=active]:hover:text-grey7"
               >
-                {designTabTitle}
+                <span class="body">{designTabTitle}</span>
               </Tabs.Trigger>
               {#if contentSchema}
                 <Tabs.Trigger 
@@ -2403,9 +2407,9 @@
                     initializeDraggable();
                   }}
                   value="content" 
-                  class="body flex-1 h-full rounded-[11px] transition-colors duration-250 text-grey5 hover:text-grey7 hover:underline data-[state=active]:bg-white data-[state=active]:text-grey7 data-[state=active]:hover:text-grey7"
+                  class="flex-1 h-full rounded-[11px] transition-colors duration-250 text-grey5 hover:text-grey7 hover:underline data-[state=active]:bg-white data-[state=active]:text-grey7 data-[state=active]:hover:text-grey7"
                 >
-                  {contentTabTitle}
+                  <span class="body">{contentTabTitle}</span>
                 </Tabs.Trigger>
               {/if}
             </Tabs.List>
@@ -2473,7 +2477,7 @@
                                   {#if isVisible}
                                     {@const isFontIc = property.inputController.type.toLowerCase() === 'font'}
                                     <div 
-                                      class="ictrl input-controller flex {isFontIc ? 'flex-col items-stretch' : 'items-center justify-between'} w-full p-0"
+                                      class="ictrl input-controller flex {isFontIc ? 'font-ic-host flex-col items-stretch' : 'items-center justify-between'} w-full p-0"
                                       data-state={$openDropdowns?.has(props.controllerId) ? 'open' : 'closed'}
                                       class:double-height={isFontIc}
                                       class:position-height={property.inputController.type.toLowerCase() === 'position'}
@@ -2568,6 +2572,7 @@
                           {/if}
 
                           <Collapsible.Content>
+                            {#if isGenericContentOpen}
                             <Card.Content class="p-0 px-4">
                               <div class="pt-[14px] pb-[16px]">
                                 <div class="properties-list flex flex-col" style="gap: 8px;">
@@ -2585,7 +2590,7 @@
                                     
                                     {#if isVisible}
                                       {@const isFontIc = property.inputController.type.toLowerCase() === 'font'}
-                                      <div class="ictrl input-controller flex {isFontIc ? 'flex-col items-stretch' : 'items-center justify-between'} w-full p-0 browser-input-wrapper"
+                                      <div class="ictrl input-controller flex {isFontIc ? 'font-ic-host flex-col items-stretch' : 'items-center justify-between'} w-full p-0 browser-input-wrapper"
                                         class:double-height={isFontIc}
                                       >
                                         {#if !isFontIc && InputComponent !== BrowserInputController}
@@ -2616,6 +2621,7 @@
                                 </div>
                               </div>
                             </Card.Content>
+                            {/if}
                           </Collapsible.Content>
                         </Collapsible.Root>
                       </Card.Root>
@@ -2666,6 +2672,7 @@
                                   {/if}
 
                                   <Collapsible.Content>
+                                    {#if isItemOpen(item.id)}
                                     <Card.Content class="p-0 px-4">
                                       <div class="pt-[14px] pb-[16px]">
                                         <div class="properties-list flex flex-col" style="gap: 8px;">
@@ -2684,7 +2691,7 @@
                                             
                                             {#if isVisible && InputComponent}
                                               {@const isFontIc = (property.inputController?.type || '').toLowerCase() === 'font'}
-                                              <div class="ictrl input-controller flex {isFontIc ? 'flex-col items-stretch' : 'items-center justify-between'} w-full p-0 browser-input-wrapper"
+                                              <div class="ictrl input-controller flex {isFontIc ? 'font-ic-host flex-col items-stretch' : 'items-center justify-between'} w-full p-0 browser-input-wrapper"
                                                 class:double-height={isFontIc}
                                               >
                                                 {#if !isFontIc && InputComponent !== BrowserInputController}
@@ -2745,6 +2752,7 @@
                                         </div>
                                       </div>
                                     </Card.Content>
+                                    {/if}
                                   </Collapsible.Content>
                                 </Collapsible.Root>
                               </Card.Root>
@@ -3338,6 +3346,23 @@
         flex-shrink: 0 !important;
       }
 
+      /* FontIC is two stacked 185px rows with its own labels. Do not squeeze
+         the whole controller into the single 185px color column (that hid labels). */
+      :global(.input-controller.font-ic-host) {
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: stretch !important;
+        justify-content: flex-start !important;
+      }
+
+      :global(.input-controller.font-ic-host > div:first-child),
+      :global(.input-controller.font-ic-host > div:last-child) {
+        width: 100% !important;
+        max-width: 100% !important;
+        flex: none !important;
+        margin-right: 0 !important;
+      }
+
       /* New animation system */
       :global(.accordion-content) {
         overflow: hidden;