@widgetic/editor 4.0.1 → 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);
 
@@ -855,9 +849,11 @@
     };
 
     // Add this near other reactive declarations at the top level
-    $: if (Array.isArray(contentSchema?.contentItems) && contentSchema.contentItems.length > 0 && !itemTemplate) {
-        itemTemplate = JSON.parse(JSON.stringify(contentSchema.contentItems[0]));
-        // console.log('Template initialized:', itemTemplate);
+    $: if (Array.isArray(contentSchema?.contentItems)) {
+        const templateSource = contentSchema.contentItems.find((item: ContentItem) => Array.isArray(item.properties) && item.properties.length > 0);
+        if (templateSource) {
+            itemTemplate = JSON.parse(JSON.stringify(templateSource));
+        }
     }
 
     // Populate contentState with per-item values keyed as "itemId__propName".
@@ -872,10 +868,12 @@
                 if (contentState[key] === undefined) {
                     // Prefer the parent's canonical saved-value map over the
                     // schema mirror, which older compositions may not fill.
-                    const parentValue = parentItemValues?.[item.id]?.[prop.id || prop.name];
-                    const seed = parentValue !== undefined ? parentValue : prop.value;
-                    if (seed !== undefined) {
-                        patch[key] = seed;
+                    const propKey = prop.id || prop.name;
+                    const parentValue = parentItemValues?.[item.id]?.[propKey];
+                    const liveOnItem = propKey != null ? (item as Record<string, unknown>)[propKey] : undefined;
+                    const seed = pickLiveContentValue(parentValue, liveOnItem, prop.value);
+                    if (seed !== undefined && seed !== '') {
+                        patch[key] = seed as InputValue;
                         needsUpdate = true;
                     }
                 }
@@ -883,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));
         }
     }
 
@@ -1022,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 {
@@ -1133,10 +1129,10 @@
           lastFocusedContentController = controllerId;
         }
         
-        console.log(`Controller focused in ${currentTab} tab:`, {
-          controllerId,
-          ...controllerInfo
-        });
+        // console.log(`Controller focused in ${currentTab} tab:`, {
+          // controllerId,
+          // ...controllerInfo
+        // });
       }
     }
 
@@ -1149,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;
@@ -1164,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
@@ -1194,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 => {
@@ -1232,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());
 
@@ -1250,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');
@@ -1260,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);
       }
@@ -1274,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
@@ -1290,7 +1286,7 @@
           }
         }
         if (itemsToOpen.length > 0) {
-          console.log('📂 Opened accordions:', itemsToOpen);
+          // console.log('📂 Opened accordions:', itemsToOpen);
         }
       }, 50);
       
@@ -1301,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 {
@@ -1312,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);
             }
@@ -1325,12 +1321,30 @@
      * 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;
+        const controllerId = `${schema}-${propertyId}`;
         const { type, inputController } = property;
+        if (!inputController?.type) {
+            console.warn('[PropsEditor] Skipping property without inputController.type:', propertyId, property);
+            return {
+                component: null,
+                props: { id: controllerId },
+                header: { label: basePropertyId, helpText: '' }
+            };
+        }
         const InputControllerComponent = getInputControllerComponent(inputController.type.toLowerCase());
-        const controllerId = `${schema}-${propertyId}`;
 
         const stateValue = schema === 'design' ? designState[propertyId] : contentState[propertyId];
         let initialValue = stateValue !== undefined ? stateValue : (property.value !== undefined ? property.value : property.defaultValue);
@@ -1373,6 +1387,9 @@
                 onOpacityChange: (opacity: number) => updateState(schema, propertyId, initialValue, opacity),
                 portalTarget,
                 ...restInputController,
+                ...(String(inputController.type || '').toLowerCase() === 'font'
+                  ? { label: fontIcVisibleLabel(propertyId, label, description) }
+                  : {}),
                 ...property.constraints,
                 ...additionalProps,
                 config: inputController.config,
@@ -1381,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]));
                     }
                 },
@@ -1414,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
             }
         };
@@ -1464,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());
     }
     
@@ -1528,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);
@@ -1548,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 */
@@ -1617,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);
       }
     }
 
@@ -1660,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 {
@@ -1712,74 +1731,75 @@
      * and appends it to the content items list
      */
     function formatDefaultItemTitle(itemNumber: number): string {
-      if (itemNumber < 10) return `Item 0${itemNumber}`;
-      return `Item ${itemNumber}`;
+      return formatNumberedTitle('Item', itemNumber);
     }
 
-    function formatSlideTitle(slideNumber: number): string {
-      return `Slide ${slideNumber}`;
+    /** "Tile 1", "Photo 12", "Item 03" → prefix used for the next auto title. */
+    function getNumberedTitlePrefix(title: string | undefined): string | null {
+      if (!title?.trim()) return null;
+      const match = title.trim().match(/^(.+?)\s+(\d+)$/);
+      return match?.[1] ?? null;
     }
 
-    function formatPhotoTitle(photoNumber: number): string {
-      return `Photo ${photoNumber}`;
-    }
-
-    function isAutoGeneratedItemTitle(title: string | undefined): boolean {
-      if (!title?.trim()) return true;
-      const trimmed = title.trim();
+    function isKnownGenericAutoTitle(title: string): boolean {
       return (
-        /^Item 0?\d+$/i.test(trimmed) ||
-        /^Slide \d+$/i.test(trimmed) ||
-        /^Photo \d+$/i.test(trimmed)
+        /^Item 0?\d+$/i.test(title) ||
+        /^Slide \d+$/i.test(title) ||
+        /^Photo \d+$/i.test(title) ||
+        /^Image \d+$/i.test(title)
       );
     }
 
-    function isSlideAutoTitle(title: string | undefined): boolean {
-      return !!title?.trim() && /^Slide \d+$/i.test(title.trim());
-    }
-
-    function isPhotoAutoTitle(title: string | undefined): boolean {
-      return !!title?.trim() && /^Photo \d+$/i.test(title.trim());
+    /** Most common "Name N" prefix in the list (Tile / Photo / Slide / Item / …). */
+    function detectDominantTitlePrefix(items: ContentItem[]): string {
+      const counts = new Map<string, number>();
+      for (const item of items) {
+        const prefix = getNumberedTitlePrefix(item.title);
+        if (!prefix) continue;
+        counts.set(prefix, (counts.get(prefix) || 0) + 1);
+      }
+      let bestPrefix = 'Item';
+      let bestCount = 0;
+      for (const [prefix, count] of counts) {
+        if (count > bestCount) {
+          bestPrefix = prefix;
+          bestCount = count;
+        }
+      }
+      return bestPrefix;
     }
 
-    function formatAutoItemTitle(title: string | undefined, position: number): string {
-      if (isSlideAutoTitle(title)) return formatSlideTitle(position);
-      if (isPhotoAutoTitle(title)) return formatPhotoTitle(position);
-      return formatDefaultItemTitle(position);
+    function formatNumberedTitle(prefix: string, itemNumber: number): string {
+      if (/^item$/i.test(prefix) && itemNumber < 10) return `Item 0${itemNumber}`;
+      return `${prefix} ${itemNumber}`;
     }
 
-    type AutoTitlePattern = 'photo' | 'slide' | 'item';
-
-    /** Pick Photo / Slide / Item naming from the dominant pattern in existing items. */
-    function detectDominantAutoTitlePattern(items: ContentItem[]): AutoTitlePattern {
-      let photoCount = 0;
-      let slideCount = 0;
-      let itemCount = 0;
-
-      for (const item of items) {
-        const title = item.title?.trim() || '';
-        if (/^Photo \d+$/i.test(title)) photoCount++;
-        else if (/^Slide \d+$/i.test(title)) slideCount++;
-        else if (/^Item 0?\d+$/i.test(title) || !title) itemCount++;
+    function isAutoGeneratedItemTitle(title: string | undefined, items?: ContentItem[]): boolean {
+      if (!title?.trim()) return true;
+      const trimmed = title.trim();
+      if (isKnownGenericAutoTitle(trimmed)) return true;
+      if (items && items.length) {
+        const prefix = getNumberedTitlePrefix(trimmed);
+        const dominant = detectDominantTitlePrefix(items);
+        return !!prefix && prefix.toLowerCase() === dominant.toLowerCase();
       }
+      return false;
+    }
 
-      if (photoCount > 0 && photoCount >= slideCount && photoCount >= itemCount) return 'photo';
-      if (slideCount > 0 && slideCount >= itemCount) return 'slide';
-      return 'item';
+    function formatAutoItemTitle(title: string | undefined, position: number): string {
+      const prefix = getNumberedTitlePrefix(title);
+      if (prefix) return formatNumberedTitle(prefix, position);
+      return formatDefaultItemTitle(position);
     }
 
     function formatNewItemTitle(items: ContentItem[]): string {
-      const nextNumber = items.length + 1;
-      const pattern = detectDominantAutoTitlePattern(items);
-      if (pattern === 'photo') return formatPhotoTitle(nextNumber);
-      if (pattern === 'slide') return formatSlideTitle(nextNumber);
-      return formatDefaultItemTitle(nextNumber);
+      return formatNumberedTitle(detectDominantTitlePrefix(items), items.length + 1);
     }
 
     function renumberAutoItemTitles(items: ContentItem[]): ContentItem[] {
       return items.map((item, index) => {
         const position = index + 1;
-        if (!isAutoGeneratedItemTitle(item.title)) {
+        if (!isAutoGeneratedItemTitle(item.title, items)) {
           return { ...item, orderNumber: position };
         }
         const nextTitle = formatAutoItemTitle(item.title, position);
@@ -1801,10 +1821,11 @@
           }
         }
       }
-      if (item.title && item.title.trim() && !isAutoGeneratedItemTitle(item.title)) {
+      const itemList = Array.isArray(contentSchema?.contentItems) ? contentSchema.contentItems : [];
+      if (item.title && item.title.trim() && !isAutoGeneratedItemTitle(item.title, itemList)) {
         return item.title;
       }
-      if (isAutoGeneratedItemTitle(item.title)) {
+      if (isAutoGeneratedItemTitle(item.title, itemList)) {
         return formatAutoItemTitle(item.title, index + 1);
       }
       return formatDefaultItemTitle(index + 1);
@@ -1860,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 {
@@ -1868,13 +1889,20 @@
         } while (contentSchema.contentItems.some((item: ContentItem) => item.id === uniqueId));
         const newTitle = formatNewItemTitle(contentSchema.contentItems);
         // Create the new item (copy template or last item structure)
-        const template = contentSchema.contentItems[0];
+        const template =
+          (Array.isArray(contentSchema.contentItems) &&
+            contentSchema.contentItems.find((item: ContentItem) => Array.isArray(item.properties) && item.properties.length > 0)) ||
+          itemTemplate;
+        if (!template || !Array.isArray(template.properties) || template.properties.length === 0) {
+          console.warn('[Add] Cannot add item: template has no properties');
+          return;
+        }
         const newItem: ContentItem = {
           ...template,
           id: uniqueId,
           title: newTitle,
           orderNumber: contentSchema.contentItems.length + 1,
-          properties: template.properties.map((p: any) => ({ ...p })),
+          properties: cloneProperties(template.properties),
         };
         // Remove the new item if it exists elsewhere (shouldn't, but for safety)
         const nextItems = [...contentSchema.contentItems.filter((i: ContentItem) => i.id !== uniqueId), newItem];
@@ -1896,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(() => {
@@ -1934,20 +1962,47 @@
       }
     }
 
-    // Helper function to clone properties
+    function unwrapContentMediaValue(raw: unknown): unknown {
+      if (raw && typeof raw === 'object' && 'url' in (raw as Record<string, unknown>)) {
+        return (raw as { url?: string }).url ?? '';
+      }
+      return raw;
+    }
+
+    function pickLiveContentValue(...candidates: unknown[]): unknown {
+      for (const candidate of candidates) {
+        const unwrapped = unwrapContentMediaValue(candidate);
+        if (unwrapped === undefined || unwrapped === null || unwrapped === '') continue;
+        return unwrapped;
+      }
+      return '';
+    }
+
+    function emptyValueForNewItemProperty(prop: any): unknown {
+      const icType = String(prop?.inputController?.type || '').toLowerCase();
+      if (['browser', 'image', 'file', 'video', 'audio'].includes(icType)) {
+        return '';
+      }
+      if (typeof prop?.defaultValue === 'boolean' || typeof prop?.defaultValue === 'number') {
+        return prop.defaultValue;
+      }
+      return '';
+    }
+
+    // Clone controller schema for a new item. Do not copy Unsplash/sample defaults
+    // into value — those overwrite live gallery URLs in the preview overlay.
     function cloneProperties(properties: Array<any>): Property[] {
       if (!properties || !Array.isArray(properties)) {
         return [];
       }
       
       return properties.map(prop => {
-        // Create a deep clone of each property
         const clonedProp: Property = {
           id: prop.id || prop.name,
           name: prop.name || prop.id,
           type: prop.type || 'string', // Ensure type is set
           defaultValue: prop.defaultValue,
-          value: prop.defaultValue,  // Reset to default value
+          value: emptyValueForNewItemProperty(prop),
           inputController: {
             type: prop.inputController?.type || 'text', // Ensure inputController.type is set
             description: prop.inputController?.description,
@@ -1979,8 +2034,13 @@
             const key = p.id || p.name;
             // Canonical state first; schema mirror/defaultValue are legacy
             // seeds for keys the editor never touched.
+            const liveOnItem = key != null ? (item as Record<string, unknown>)[key] : undefined;
             props[key] = normalizeContentPropertyValue(
-              contentState[`${item.id}__${key}`] ?? p.value ?? p.defaultValue
+              pickLiveContentValue(
+                contentState[`${item.id}__${key}`],
+                p.value,
+                liveOnItem
+              )
             );
           });
           // Carry opacity state so parent saves don't lose per-property
@@ -1995,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 });
     }
 
@@ -2012,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);
@@ -2024,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);
@@ -2034,7 +2094,7 @@
             dispatch('goToItem', { index: targetIndex });
           }
           setTimeout(() => {
-            console.log('🔄 Reinitializing draggable after deletion');
+            // console.log('🔄 Reinitializing draggable after deletion');
             initializeDraggable();
           }, 0);
         }
@@ -2099,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
@@ -2180,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 });
       }
     }
 
@@ -2252,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 */
@@ -2268,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);
     }
@@ -2337,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 
@@ -2347,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>
@@ -2415,24 +2475,27 @@
                                   {@const reactiveValue = designState[stateKey]}
                                   
                                   {#if isVisible}
+                                    {@const isFontIc = property.inputController.type.toLowerCase() === 'font'}
                                     <div 
-                                      class="ictrl input-controller flex 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={property.inputController.type.toLowerCase() === 'font'}
+                                      class:double-height={isFontIc}
                                       class:position-height={property.inputController.type.toLowerCase() === 'position'}
                                       class:fixed-position-height={property.inputController.type.toLowerCase() === 'fixedposition'}
                                       class:text-area-preview-height={property.inputController.type.toLowerCase() === 'textarea' || property.inputController.type.toLowerCase() === 'textArea'}
                                       class:position-controller={property.inputController.type.toLowerCase() === 'position'}
                                       class:position-dragging={property.inputController.type.toLowerCase() === 'position' && isDragging}
                                     >
+                                      {#if !isFontIc}
                                       <div class="ic-header-ct flex-1 min-w-0">
                                         <InputControllerHeader 
                                           label={header.label}
                                           helpText={header.helpText}
                                         />
                                       </div>
+                                      {/if}
                                       
-                                      <div class="ic-input-ct flex-shrink-0 ml-auto" style="width: 185px;">
+                                      <div class="ic-input-ct {isFontIc ? 'w-full' : 'flex-shrink-0 ml-auto'}" style={isFontIc ? '' : 'width: 185px;'}>
                                         <svelte:component 
                                           this={InputComponent} 
                                           {...props}
@@ -2509,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;">
@@ -2525,17 +2589,16 @@
                                     {@const isVisible = shouldShowProperty(property, contentSchema?.genericContent?.properties || [], 'content')}
                                     
                                     {#if isVisible}
-                                      <div class="ictrl input-controller flex items-center justify-between w-full p-0 browser-input-wrapper"
-                                        class:double-height={property.inputController.type.toLowerCase() === 'font'}
+                                      {@const isFontIc = property.inputController.type.toLowerCase() === 'font'}
+                                      <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}
                                       >
-                                        <!-- Left side - Label -->
-                                        {#if InputComponent !== BrowserInputController}
+                                        {#if !isFontIc && InputComponent !== BrowserInputController}
                                           <InputControllerHeader 
                                             label={header.label}
                                             helpText={header.helpText}
                                           />
-                                        {:else}
-                                          <!-- Special case for BrowserInputController -->
+                                        {:else if !isFontIc}
                                           <div class="flex-1 min-w-0 pr-4">
                                             <InputControllerHeader 
                                               label={header.label}
@@ -2544,8 +2607,7 @@
                                           </div>
                                         {/if}
                                         
-                                        <!-- Right side - Input Component -->
-                                        <div class="ic-input-ct flex-shrink-0" style="width: 185px;">
+                                        <div class="ic-input-ct {isFontIc ? 'w-full' : 'flex-shrink-0'}" style={isFontIc ? '' : 'width: 185px;'}>
                                           <svelte:component 
                                             this={InputComponent} 
                                             {...props}
@@ -2559,6 +2621,7 @@
                                 </div>
                               </div>
                             </Card.Content>
+                            {/if}
                           </Collapsible.Content>
                         </Collapsible.Root>
                       </Card.Root>
@@ -2609,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;">
@@ -2625,18 +2689,17 @@
                                             {@const header = result.header}
                                             {@const isVisible = shouldShowProperty(property, item.properties, 'content')}
                                             
-                                            {#if isVisible}
-                                              <div class="ictrl input-controller flex items-center justify-between w-full p-0 browser-input-wrapper"
-                                                class:double-height={property.inputController.type.toLowerCase() === 'font'}
+                                            {#if isVisible && InputComponent}
+                                              {@const isFontIc = (property.inputController?.type || '').toLowerCase() === 'font'}
+                                              <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}
                                               >
-                                                <!-- Left side - Label -->
-                                                {#if InputComponent !== BrowserInputController}
+                                                {#if !isFontIc && InputComponent !== BrowserInputController}
                                                   <InputControllerHeader 
                                                     label={header.label}
                                                     helpText={header.helpText}
                                                   />
-                                                {:else}
-                                                  <!-- Special case for BrowserInputController -->
+                                                {:else if !isFontIc}
                                                   <div class="flex-1 min-w-0 pr-4">
                                                     <InputControllerHeader 
                                                       label={header.label}
@@ -2645,8 +2708,7 @@
                                                   </div>
                                                 {/if}
                                                 
-                                                <!-- Right side - Input Component -->
-                                                <div class="ic-input-ct flex-shrink-0" style="width: 185px;">
+                                                <div class="ic-input-ct {isFontIc ? 'w-full' : 'flex-shrink-0'}" style={isFontIc ? '' : 'width: 185px;'}>
                                                   <svelte:component 
                                                     this={InputComponent} 
                                                     {...props}
@@ -2690,6 +2752,7 @@
                                         </div>
                                       </div>
                                     </Card.Content>
+                                    {/if}
                                   </Collapsible.Content>
                                 </Collapsible.Root>
                               </Card.Root>
@@ -3283,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;
@@ -3370,7 +3450,9 @@
 
       /* Specific style for font controllers */
       :global(.input-controller.double-height) {
-        height: 104px !important;
+        height: auto !important;
+        min-height: 104px;
+        align-items: flex-start !important;
       }
 
       /* Ensure content containers maintain width */