@widgetic/editor 3.11.3 → 4.0.1

package/dist/components/editors/PropsEditor.svelte

@@ -0,0 +1,3952 @@
+<script lang="ts">
+    /**
+     * PropsEditor Component
+     * A customizable property editor that handles both design and content properties
+     * Supports various input types and manages state for both design and content tabs
+     */
+
+    /**
+     * SVELTE IMPORTS
+     */
+    const browser = typeof window !== 'undefined';
+
+    // Svelte imports
+    import { onMount, onDestroy, createEventDispatcher, afterUpdate } from 'svelte';
+    const dispatch = createEventDispatcher();
+    import { writable, get } from 'svelte/store';
+
+    /**
+     * COMPONENTS IMPORTS
+     */
+    // Shadcn Regular Components
+    import { Button, Separator } from '@widgetic/design-system/components';
+    // Shadcn namespaced(compound) components imports
+    import { Tabs, Accordion, Card, Collapsible } from '@widgetic/design-system/components';
+    // Import ScrollArea components
+    import { ScrollArea } from '@widgetic/design-system/components';
+    
+    /**
+     * ICONS IMPORTS
+     */
+    import { ChevronDown, IconGripVertical } from '@widgetic/design-system/icons';
+    import AddNew from '../icons/addnew.svelte';
+    import DragHandle from '../icons/drag.svelte';
+
+    // Input Controllers imports
+    import {
+      ColorPickerInputController,
+      PositionInputController,
+      DropdownInputController,
+      SliderInputController,
+      SliderRangeInputController,
+      FontInputController,
+      SwitchInputController,
+      TextInputController,
+      TextAreaInputController,
+      TextAreaPreviewInputController,
+      DatePickerInputController,
+      BrowserInputController,
+      NumberInputController,
+      RangeCalendarInputController,
+      FixedPositionInputController,
+      VectorInputController,
+      AngleInputController,
+      InputControllerHeader,
+      RadioGroupInputController,
+      CheckboxInputController,
+      TimeInputController,
+      RoundedCornersInputController,
+      TagsInputController,
+      DateFieldInputController
+    } from '../ic';
+
+    /**
+     * UTILS IMPORTS
+     */
+    import MediaManager from '../../utils/MediaManager';
+    import FontManager from '../../utils/FontManager';
+    import { config as appConfig } from '../../config';
+
+    /**
+     * STYLES from Widgetic Design System
+     * Note: props-editor.css global rules (body, *) moved to app.css (standalone only).
+     * Component-scoped rules are in the style block at the end of this file.
+     */
+    import "@widgetic/design-system/styles";
+
+    
+    /**
+     * Type Definitions
+     * Defines the structure for input values and content schema
+     */
+    type InputValue = string | number | boolean | any | null;
+
+    interface PropertyGroup {
+      name: string;
+      properties: Array<Property>;
+      visibilityCondition?: {
+        dependsOn: string | string[];
+        condition: string;
+      };
+    }
+
+    // Add this interface near the other interfaces at the top of the file
+    interface ContentProperty {
+      id: string;
+      defaultValue?: any;
+      value?: any;
+      inputController: {
+        type: string;
+        description?: string;
+        helpText?: string;
+        config?: Record<string, any>;
+      };
+    }
+
+    /**
+     * EXTERNAL COMPONENT PROPS
+     */
+    // Class
+    let className = '';
+    export { className as class };
+    // Style
+    export let style = '';
+    // Dimensions
+    export let width: string = "450px";
+    export let height: string = "720px";
+    // Schemas
+    export let designSchema: any = null;
+    export let contentSchema: any | undefined = undefined;
+    export let itemTemplate: any = null; // Store template for new items
+    // Tab titles
+    export let designTabTitle: string = 'Design';
+    export let contentTabTitle: string = 'Content';
+    // Default tab selection
+    export let defaultTab: 'design' | 'content' = 'content';
+
+    /** Portal slot for FileBrowser overlay — scoped to editor panel, not document body. */
+    let fileBrowserPortalHost: HTMLDivElement | null = null;
+
+    // Determine if the first accordion item should be open by default
+    export let defaultOpen: boolean = true;
+
+    // Add showDragHandle prop
+    export let showDragHandle = true;
+    // Enable built-in drag (component manages its own absolute positioning)
+    export let enableDrag = true;
+
+    // Initial values from saved composition (merged over schema defaults)
+    export let initialDesignValues: Record<string, any> = {};
+    export let initialContentValues: Record<string, any> = {};
+
+    /**
+     * CONSTANTS
+     */
+    const CONTENT_PADDING = 16; // Outer padding for both tabs
+    const CONTENT_INNER_PADDING = 16; // Inner padding for cards in Content tab
+    const HEADER_VERTICAL_PADDING = 24; // Padding for top and bottom of header
+    const HEADER_HEIGHT = 85; // 96px for header + 1px for separator
+    const EDITOR_STROKE_COLOR = '#e5e7eb'; // Color for editor stroke
+    const EDITOR_STROKE_WIDTH = '1px'; // Thickness of editor stroke
+
+    /**
+     * State Management
+     * Track various component states including open items, drag state, and focus
+     */
+    let hasLoggedDesign = false; // Prevents duplicate logging of design tab info
+    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 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
+    let currentTab = 'design'; // Current active tab
+    let activeControllerId: string | null = null; // Currently active input controller
+    let designOpenItems = new Set<string>();
+    let designOpenAccordion: string[] = [];
+    let contentOpenAccordion: string[] = [];
+    let isDragging = false;
+
+    // Add isHeaderHovered state variable after the other state declarations
+    let isHeaderHovered = false;
+
+    // Add this near the top with other state variables
+    let isInitialTabLoad = true;
+
+    // Add these for mirror positioning
+    let grabOffsetY = 0;
+    let grabOffsetX = 0;
+    const DRAG_SHIFT_X = 24; // shift mirror left so cursor is over drag handle
+
+    // Helper function to get visible groups
+    function getVisibleGroups(components: Array<{ propertyGroups: PropertyGroup[] }>): PropertyGroup[] {
+      return components?.reduce((acc: PropertyGroup[], component) => {
+        const visibleGroups = component.propertyGroups.filter((group: PropertyGroup) => 
+          shouldShowPropertyGroup(group, component.propertyGroups[0].properties, 'design')
+        );
+        return [...acc, ...visibleGroups];
+      }, []) || [];
+    }
+
+    // Use the helper function in the reactive statement
+    $: allVisibleGroups = designSchema?.[0]?.components ? getVisibleGroups(designSchema[0].components) : [];
+
+    // Update the function with proper type annotations
+    function getAccordionItemPosition(
+      component: { propertyGroups: PropertyGroup[] }, 
+      propertyGroup: PropertyGroup, 
+      groupIndex: number
+    ): 'first' | 'middle' | 'last' | 'only' {
+      // Get all currently visible groups (considering visibility conditions)
+      const currentlyVisibleGroups = allVisibleGroups.filter(group => 
+        shouldShowPropertyGroup(group, component.propertyGroups[0].properties, 'design')
+      );
+      
+      const globalIndex = currentlyVisibleGroups.findIndex(g => g.name === propertyGroup.name);
+      
+      // Check if this group is actually visible
+      if (!shouldShowPropertyGroup(propertyGroup, component.propertyGroups[0].properties, 'design')) {
+        return 'middle'; // or handle hidden items differently if needed
+      }
+
+      if (currentlyVisibleGroups.length === 1) return 'only';
+      if (globalIndex === 0) return 'first';
+      if (globalIndex === currentlyVisibleGroups.length - 1) return 'last';
+      return 'middle';
+    }
+
+    // Clear font weight keys immediately when script loads
+    if (browser) {
+        const keysToRemove: string[] = [];
+        for (let i = 0; i < localStorage.length; i++) {
+            const key = localStorage.key(i);
+            if (key && key.includes('font-weight-state-')) {
+                keysToRemove.push(key);
+            }
+        }
+        
+        if (keysToRemove.length > 0) {
+            console.log('🧹 [PropsEditor] Clearing font weight states on init:', keysToRemove);
+            keysToRemove.forEach(key => localStorage.removeItem(key));
+        }
+    }
+
+    /**
+     * DOM References and Scroll State
+     */
+    // DOM References for scroll areas and content wrappers
+    let designScrollViewport: HTMLDivElement | undefined;
+    let designContentWrapper: HTMLDivElement | undefined;
+    let contentScrollViewport: HTMLDivElement | undefined;
+    let contentWrapper: HTMLDivElement | undefined;
+    let contentItemsContainer: HTMLDivElement | undefined;
+
+    // Initialize scroll state
+    let scrollPosition: number = 0;
+    let contentHeight: number = 0;
+    let scrollAreaHeight: number = 0;
+    let shouldShowScroll: boolean = false;
+
+    // Create stores for scroll states
+    const designScrollState = writable({
+      scrollPosition: 0,
+      contentHeight: 0,
+      scrollAreaHeight: 0,
+      shouldShowScroll: false
+    });
+
+    const contentScrollState = writable({
+      scrollPosition: 0,
+      contentHeight: 0,
+      scrollAreaHeight: 0,
+      shouldShowScroll: false
+    });
+
+    // Type assertion function for DOM elements
+    function assertElement<T extends HTMLElement>(el: T | null | undefined): asserts el is T {
+      if (!el) throw new Error('Element not found');
+    }
+
+    /**
+     * METHODS
+     */
+    let cleanup: (() => void) | undefined;
+
+    // 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);
+        }
+        
+        // Log design tab info if schema exists
+        if (designSchema && designSchema[0]?.components && !hasLoggedDesign) {
+          const firstComponent = designSchema[0].components[0];
+          const firstGroup = firstComponent.propertyGroups[0];
+          const firstProperty = firstGroup.properties[0];
+          
+          if (firstProperty) {
+            // console.log('🎨 [PropsEditor] Design Tab initialized:', {
+            //   type: firstProperty.inputController.type,
+            //   name: firstProperty.id,
+            //   description: firstProperty.inputController.description
+            // });
+          }
+          hasLoggedDesign = true;
+        }
+
+        // Skip content initialization if contentSchema is missing
+        if (!contentSchema) {
+          // console.log('ℹ️ [PropsEditor] No content schema provided, skipping content initialization');
+          return;
+        }
+
+        // Only initialize content if it exists and hasn't been logged
+        if (!hasLoggedContent) {
+          const firstProperty = contentSchema.genericContent?.properties?.[0];
+          
+          if (firstProperty) {
+            // console.log('📝 [PropsEditor] Content Tab initialized:', {
+            //   type: firstProperty.inputController.type,
+            //   name: firstProperty.id,
+            //   description: firstProperty.inputController.description
+            // });
+          }
+          hasLoggedContent = true;
+        }
+        
+      } catch (error) {
+        console.error('❌ [PropsEditor] Error during initialization:', error);
+      }
+    };
+
+    let isDraggableInitialized = false;
+    let currentDraggable: any = null;
+    let isInitializing = false;
+
+    const initializeDraggable = async () => {
+      // Prevent multiple simultaneous initializations
+      if (isInitializing) {
+        // console.log('🔄 Already initializing draggable, skipping...');
+        return;
+      }
+
+      isInitializing = true;
+      // console.log('🔄 [PropsEditor] Starting draggable initialization');
+
+      try {
+        if (contentSchema && typeof window !== 'undefined') {
+          await new Promise(resolve => setTimeout(resolve, 0));
+
+          // Target only the content-items container
+          const containerElement = document.querySelector('.content-items');
+          // console.log('🔄 [PropsEditor] Found content container:', containerElement);
+
+          if (containerElement instanceof HTMLElement) {
+
+
+            if (currentDraggable) {
+              // console.log('🧹 Cleaning up existing draggable instance');
+              currentDraggable.destroy();
+              currentDraggable = null;
+            }
+
+            const { Sortable, Plugins } = await import('@shopify/draggable');
+            const { SortAnimation } = Plugins;
+
+            let dragStartTime = 0;
+            let isDragStarted = false;
+            let dragThreshold = 0; // pixels to move before considering it a drag
+            let initialMousePosition = { x: 0, y: 0 };
+            let grabOffsetY = 0;
+            let grabOffsetX = 0;
+
+            // Add forceCleanupState function
+            function forceCleanupState() {
+              // console.log('🧹 Performing emergency state cleanup');
+              
+              // Clean up any existing mirror elements first
+              const mirrors = document.querySelectorAll('.draggable-mirror');
+              mirrors.forEach(mirror => {
+                if (mirror.parentNode) {
+                  mirror.parentNode.removeChild(mirror);
+                }
+              });
+              
+              // Reset all global state
+              isDragging = false;
+              isDragStarted = false;
+              document.documentElement.classList.remove('draggable--is-dragging');
+              
+              // Remove dragging classes from body and document
+              document.body.classList.remove('dragging-active');
+              document.documentElement.classList.remove('dragging-active');
+              
+              // Force cleanup all items
+              document.querySelectorAll('.content-item').forEach((item: Element) => {
+                if (item instanceof HTMLElement) {
+                  // Remove all possible dragging classes
+                  item.classList.remove('draggable-source--is-dragging');
+                  item.classList.remove('draggable--over');
+                  item.classList.remove('draggable--original');
+                  item.classList.remove('draggable-source--placed');
+                  item.classList.remove('draggable-mirror');
+                  
+                  // Reset all possible styles
+                  item.style.transform = '';
+                  item.style.transition = 'none';
+                  // Ensure inline order values are cleared so visual order matches DOM order
+                  item.style.order = '';
+                  void item.offsetHeight; // Force reflow
+                  item.style.transition = '';
+                  item.style.position = 'relative';
+                  item.style.zIndex = '1';
+                  item.style.opacity = '1';
+                  item.style.visibility = 'visible';
+                  item.style.pointerEvents = '';
+                  item.style.cursor = 'pointer';
+                  
+                  // Update collapsible state based on our openItems
+                  const itemId = item.getAttribute('data-id');
+                  const isOpen = itemId && openItems.has(itemId);
+                  
+                  // Find the collapsible elements
+                  const collapsibleRoot = item.querySelector('[data-radix-collapsible-root]');
+                  const trigger = item.querySelector('[data-radix-collapsible-trigger]');
+                  const content = item.querySelector('[data-radix-collapsible-content]');
+                  const chevron = item.querySelector('.chevron');
+                  
+                  // Update states
+                  if (collapsibleRoot instanceof HTMLElement) {
+                    collapsibleRoot.setAttribute('data-state', isOpen ? 'open' : 'closed');
+                  }
+                  
+                  if (trigger instanceof HTMLElement) {
+                    trigger.setAttribute('data-state', isOpen ? 'open' : 'closed');
+                    trigger.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+                  }
+                  
+                  if (content instanceof HTMLElement) {
+                    if (!isOpen) {
+                      content.style.height = '0';
+                      content.style.overflow = 'hidden';
+                    } else {
+                      content.style.height = 'auto';
+                      content.style.overflow = 'visible';
+                    }
+                    content.setAttribute('data-state', isOpen ? 'open' : 'closed');
+                    content.style.display = ''; // Always reset display property
+                  }
+                  
+                  if (chevron instanceof HTMLElement) {
+                    chevron.style.transform = isOpen ? 'rotate(180deg)' : 'rotate(0deg)';
+                  }
+                }
+              });
+              
+              // Clean container
+              const container = document.querySelector('.content-items');
+              if (container instanceof HTMLElement) {
+                container.classList.remove('content-items--is-dragging');
+                container.classList.remove('dragging-active');
+                container.classList.remove('draggable-container--over');
+                container.style.pointerEvents = '';
+                container.style.cursor = '';
+                
+                // Force reflow
+                void container.offsetHeight;
+              }
+            }
+
+            currentDraggable = new Sortable(containerElement, {
+              draggable: '.content-item',
+              handle: '.drag-handle',
+              delay: 0,
+              mirror: {
+                constrainDimensions: true,
+                appendTo: 'body',
+                xAxis: true,
+                yAxis: true
+              },
+              plugins: [SortAnimation],
+              sortAnimation: {
+                duration: 200,
+                easingFunction: 'ease-in-out'
+              },
+              classes: {
+                'body:dragging': 'draggable--is-dragging',
+                'container:dragging': 'dragging-active',
+                'source:dragging': 'draggable-source--is-dragging',
+                'source:placed': 'draggable-source--placed',
+                'container:placed': 'draggable-container--placed',
+                'draggable:over': 'draggable--over',
+                'container:over': 'draggable-container--over',
+                'source:original': 'draggable--original',
+                'mirror': 'draggable-mirror'
+              }
+            });
+
+
+
+            // Update event handlers
+            currentDraggable.on('drag:start', (event: any) => {
+              console.log('[Draggable] drag:start event');
+              isDragging = true; // Set flag immediately to prevent afterUpdate interference
+
+              const dragHandle = event.originalSource?.querySelector('.drag-handle');
+              const target = event.originalEvent?.target;
+              
+              if (!dragHandle?.contains(target)) {
+                event.cancel();
+                return;
+              }
+
+              // Store initial mouse position for threshold calculation
+              if (event.originalEvent instanceof MouseEvent) {
+                initialMousePosition = {
+                  x: event.originalEvent.clientX,
+                  y: event.originalEvent.clientY
+                };
+              }
+
+              // Store previously open items
+              previouslyOpen = new Set(openItems);
+              
+              // Reset open items
+              openItems = new Set();
+              
+              // Add a class to body to trigger our CSS rules
+              document.body.classList.add('dragging-active');
+              
+              // Force reflow to apply height changes immediately
+              document.body.offsetHeight;
+
+              // Add design system classes to all content items for consistent styling
+              document.querySelectorAll('.content-item').forEach(item => {
+                item.classList.add('widgetic-colors', 'widgetic-radius');
+              });
+
+              // Force visual update of all dropdown chevrons
+              document.querySelectorAll('.content-item .chevron').forEach(chevron => {
+                if (chevron instanceof HTMLElement) {
+                  chevron.style.transform = 'rotate(0deg)';
+                }
+              });
+            });
+
+            // Add drag:move handler - update mirror position to follow mouse
+            currentDraggable.on('drag:move', (event: any) => {
+              if (isDragStarted) {
+                // Update mirror position to follow mouse cursor, accounting for scroll
+                if (event.originalEvent instanceof MouseEvent) {
+                  requestAnimationFrame(() => {
+                    const mirror = document.querySelector('.draggable-mirror');
+                    if (mirror instanceof HTMLElement) {
+                      // Position mirror accounting for grab offset
+                      mirror.style.top = `${event.originalEvent.clientY - grabOffsetY}px`;
+                      mirror.style.left = `${event.originalEvent.clientX - grabOffsetX}px`;
+                      mirror.style.transform = 'translate3d(0,0,0)';
+                    }
+                  });
+                }
+                return;
+              }
+
+              if (event.originalEvent instanceof MouseEvent) {
+                const deltaX = Math.abs(event.originalEvent.clientX - initialMousePosition.x);
+                const deltaY = Math.abs(event.originalEvent.clientY - initialMousePosition.y);
+                
+                // Only start drag if moved more than threshold
+                if (deltaX > dragThreshold || deltaY > dragThreshold) {
+                  isDragStarted = true;
+                  // isDragging = true; - This is now set in drag:start
+                  console.log('[Draggable] isDragStarted set to true');
+
+                  requestAnimationFrame(() => {
+                    const mirror = document.querySelector('.draggable-mirror');
+                    if (mirror instanceof HTMLElement) {
+                      // First, snap to the correct position to prevent flickering
+                      mirror.style.top = `${event.originalEvent.clientY - grabOffsetY}px`;
+                      mirror.style.left = `${event.originalEvent.clientX - grabOffsetX}px`;
+                      mirror.style.transform = 'translate3d(0,0,0)';
+                      
+                      // Then apply styling
+                      mirror.style.height = '56px';
+                      mirror.style.overflow = 'hidden';
+                      mirror.style.border = '2px solid hsl(var(--grey2))';
+                      mirror.style.borderRadius = 'var(--radius-small)';
+                      mirror.style.backgroundColor = 'white';
+                      mirror.style.boxShadow = 'none';
+                      
+                      // Add our styling classes without changing any positioning
+                      mirror.classList.add('widgetic-colors', 'widgetic-radius');
+                      
+                      // Remove borders from all children
+                      Array.from(mirror.querySelectorAll('*')).forEach(el => {
+                        if (el instanceof HTMLElement) {
+                          el.style.border = 'none';
+                          el.style.borderTop = 'none';
+                          el.style.borderBottom = 'none';
+                          el.style.borderLeft = 'none';
+                          el.style.borderRight = 'none';
+                        }
+                      });
+                      
+                      // Ensure the mirror content is in collapsed state
+                      const collapsibleContent = mirror.querySelector('[data-radix-collapsible-content]');
+                      if (collapsibleContent instanceof HTMLElement) {
+                        collapsibleContent.style.height = '0';
+                        collapsibleContent.style.display = 'none';
+                      }
+                    }
+                  });
+                } else {
+                  // Cancel the drag if we haven't moved enough
+                  event.cancel();
+                }
+              }
+            });
+
+            currentDraggable.on('drag:stop', (event: any) => {
+              // Clean up any mirror elements immediately
+              requestAnimationFrame(() => {
+                const mirrors = document.querySelectorAll('.draggable-mirror');
+                mirrors.forEach(mirror => {
+                  if (mirror.parentNode) {
+                    mirror.parentNode.removeChild(mirror);
+                  }
+                });
+              });
+
+              // If we never started dragging, this was just a click
+              if (!isDragStarted) {
+                event.cancel();
+                forceCleanupState();
+                return;
+              }
+
+              // Reset drag state
+              isDragStarted = false;
+              isDragging = false;
+              dragStartTime = 0;
+              initialMousePosition = { x: 0, y: 0 };
+              grabOffsetY = 0;
+              grabOffsetX = 0;
+
+              // Remove the class that forces fixed heights
+              document.body.classList.remove('dragging-active');
+
+              // Reset fixed heights from all items
+              document.querySelectorAll('.content-item[data-forced-collapsed="true"]').forEach(item => {
+                if (item instanceof HTMLElement) {
+                  item.style.height = '';
+                  item.style.minHeight = '';
+                  item.style.maxHeight = '';
+                  item.style.overflow = '';
+                  item.removeAttribute('data-forced-collapsed');
+                }
+              });
+
+              // Reset all collapsible content elements
+              document.querySelectorAll('[data-radix-collapsible-content]').forEach(content => {
+                if (content instanceof HTMLElement) {
+                  content.style.display = '';
+                }
+              });
+
+              // Restore previously open items
+              setTimeout(() => {
+                openItems = new Set(previouslyOpen);
+                
+                // Force update collapsible elements to match our state
+                document.querySelectorAll('[data-radix-collapsible-root]').forEach(root => {
+                  if (root instanceof HTMLElement) {
+                    const itemId = root.closest('.content-item')?.getAttribute('data-id');
+                    if (itemId && openItems.has(itemId)) {
+                      root.setAttribute('data-state', 'open');
+                      const trigger = root.querySelector('[data-radix-collapsible-trigger]');
+                      if (trigger instanceof HTMLElement) {
+                        trigger.setAttribute('data-state', 'open');
+                        trigger.setAttribute('aria-expanded', 'true');
+                      }
+                      const chevron = root.querySelector('.chevron');
+                      if (chevron instanceof HTMLElement) {
+                        chevron.style.transform = 'rotate(180deg)';
+                      }
+                      const content = root.querySelector('[data-radix-collapsible-content]');
+                      if (content instanceof HTMLElement) {
+                        content.style.height = 'auto';
+                        content.style.overflow = 'visible';
+                      }
+                    }
+                  }
+                });
+              }, 50);
+
+              // Perform normal cleanup
+              forceCleanupState();
+            });
+
+            currentDraggable.on('sortable:sorted', (event: { newIndex: number; oldIndex: number }) => {
+              console.log('[Draggable] sortable:sorted event fired', { oldIndex: event.oldIndex, newIndex: event.newIndex });
+              try {
+                const { oldIndex, newIndex } = event;
+
+                // Add robust checks for valid indices
+                if (typeof oldIndex !== 'number' || typeof newIndex !== 'number' || oldIndex < 0 || newIndex < 0) {
+                  console.error('[Drag] Invalid or missing indices from event. Aborting reorder.');
+                  isDragStarted = false;
+                  return;
+                }
+                
+                // 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.');
+                  isDragStarted = false;
+                  return;
+                }
+
+                if (!Array.isArray(contentSchema?.contentItems)) {
+                  console.warn('[Drag] contentItems is not an array, skipping reorder');
+                  isDragStarted = false;
+                  return;
+                }
+                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);
+                items.splice(newIndex, 0, movedItem);
+
+                // Safety checks before updating state
+                if (hasDuplicateIds(items)) {
+                  console.error('[Drag] Duplicate IDs detected after reordering with indices. Aborting update.', items.map(i => i.id));
+                  isDragStarted = false;
+                  return;
+                }
+                
+                if (items.length !== contentSchema.contentItems.length) {
+                  console.error('[Drag] Array length mismatch after reordering with indices. Aborting update.');
+                  isDragStarted = false;
+                  return;
+                }
+                
+                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 })));
+                dispatch('updated', { contentSchema });
+                dispatchContentItemsChanged(contentSchema.contentItems);
+
+              } catch (err) {
+                console.error('[Drag] Error updating order in sortable:sorted:', err);
+              }
+              isDragStarted = false;
+              isDragging = false; // Allow afterUpdate to run again
+            });
+
+            // Update mirror handling - position mirror to follow mouse cursor directly
+            currentDraggable.on('mirror:created', (event: any) => {
+              const mirror = event.mirror;
+              if (mirror instanceof HTMLElement) {
+                // Add widgetic-colors class to access CSS variables
+                mirror.classList.add('widgetic-colors', 'widgetic-radius');
+                
+                // Set border color to sage-green using CSS variable
+                mirror.style.border = '2px solid hsl(var(--sage-green))';
+                mirror.style.borderRadius = 'var(--radius-small)';
+                mirror.style.boxShadow = 'none';
+                
+                // Style the mirror element, but do NOT set top, left, or transform.
+                mirror.style.height = '56px';
+                mirror.style.overflow = 'hidden';
+                mirror.style.position = 'fixed';
+                mirror.style.width = `${event.originalSource.offsetWidth}px`;
+                mirror.style.backgroundColor = 'white';
+                mirror.style.pointerEvents = 'none'; // Ensure it doesn't interfere with mouse events
+                mirror.style.zIndex = '1000'; // Ensure it's above other elements
+                
+                // Position mirror at exact mouse cursor location
+                const mouseEvent = event.originalEvent;
+                if (mouseEvent instanceof MouseEvent) {
+                  // Position mirror centered on mouse cursor
+                  const mirrorHeight = 56; // Fixed height we set
+                  const mirrorWidth = event.originalSource.offsetWidth;
+                  
+                  // Center the mirror on the mouse cursor
+                  grabOffsetY = mirrorHeight / 2;
+                  grabOffsetX = mirrorWidth / 2 + DRAG_SHIFT_X;
+                  
+                  // Position mirror so mouse is at center
+                  mirror.style.top = `${mouseEvent.clientY - grabOffsetY}px`;
+                  mirror.style.left = `${mouseEvent.clientX - grabOffsetX}px`;
+                  mirror.style.transform = 'translate3d(0,0,0)';
+                }
+                
+                // Style text with sage-green CSS variable
+                const textElements = mirror.querySelectorAll('h4, .content-title, span');
+                textElements.forEach(el => {
+                  if (el instanceof HTMLElement) {
+                    el.style.color = 'hsl(var(--sage-green))';
+                  }
+                });
+                
+                // Style only chevrons with sage-green CSS variable
+                const chevrons = mirror.querySelectorAll('.chevron, svg');
+                chevrons.forEach(el => {
+                  if (el instanceof SVGElement) {
+                    el.style.stroke = 'hsl(var(--sage-green))';
+                    el.style.fill = 'transparent';
+                    
+                    // Also handle any paths inside SVGs
+                    const paths = el.querySelectorAll('path');
+                    paths.forEach(path => {
+                      path.setAttribute('stroke', 'hsl(var(--sage-green))');
+                      path.setAttribute('fill', 'transparent');
+                    });
+                    
+                    // Check if this item was previously open and rotate the chevron accordingly
+                    const sourceId = event.originalSource.getAttribute('data-id');
+                    if (sourceId && previouslyOpen && previouslyOpen.has(sourceId) && el.classList.contains('chevron')) {
+                      // Apply the same transition effect as the normal open/close operation
+                      el.style.transition = 'transform 200ms ease-in-out';
+                      el.style.transform = 'rotate(360deg)';
+                    }
+                  }
+                });
+              }
+            });
+
+            // After initialisation, force-clear any inline transforms left by previous Sortable instances or the plugin
+            Array.from(containerElement.children).forEach(child => {
+              const el = child as HTMLElement;
+              el.style.transform = '';
+              el.style.transition = '';
+              el.style.order = '';
+            });
+
+            logOrder('after init');
+
+            isDraggableInitialized = true;
+          }
+        }
+      } catch (error) {
+        console.error('❌ Error initializing draggable:', error);
+        isDraggableInitialized = false;
+        currentDraggable = null;
+      } finally {
+        isInitializing = false;
+      }
+    };
+
+    // 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);
+    }
+
+    // Populate contentState with per-item values keyed as "itemId__propName".
+    // Canonical source order: existing state > parent items map > legacy prop.value.
+    $: if (Array.isArray(contentSchema?.contentItems)) {
+        let needsUpdate = false;
+        const patch: Record<string, InputValue> = {};
+        const parentItemValues = initialContentValues?.items;
+        for (const item of contentSchema.contentItems) {
+            for (const prop of item.properties || []) {
+                const key = `${item.id}__${prop.id || prop.name}`;
+                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;
+                        needsUpdate = true;
+                    }
+                }
+            }
+        }
+        if (needsUpdate) {
+            contentState = { ...contentState, ...patch };
+            console.log('[PropsEditor] Initialized content item state keys:', Object.keys(patch));
+        }
+    }
+
+    onMount(() => {
+        // console.log('PropsEditor Mounted!');
+        
+        // Initialize event listeners and state
+        if (designScrollViewport) {
+            designScrollViewport.addEventListener('scroll', (event) => handleScroll(event, 'design'));
+        }
+
+        if (contentScrollViewport) {
+            contentScrollViewport.addEventListener('scroll', (event) => handleScroll(event, 'content'));
+        }
+
+        // Start initialization
+        initializeEditor();
+
+        // Drag handles are now declarative (on:mousedown in template) — no imperative setup needed
+
+        if (defaultOpen && designSchema?.[0]?.components?.[0]?.propertyGroups) {
+            // Open all property groups by default
+            designOpenAccordion = designSchema[0].components
+              .flatMap((c: any) => (c.propertyGroups || []).map((pg: PropertyGroup) => pg.name))
+              .filter(Boolean);
+        }
+
+        // Return cleanup function
+        return () => {
+            if (cleanup) cleanup();
+            if (designScrollViewport) {
+                designScrollViewport.removeEventListener('scroll', (event) => handleScroll(event, 'design'));
+            }
+            if (contentScrollViewport) {
+                contentScrollViewport.removeEventListener('scroll', (event) => handleScroll(event, 'content'));
+            }
+            
+            // Drag handle listeners are declarative (on:mousedown) — no manual cleanup needed
+        };
+    });
+
+    /**
+     * ON DESTROY
+     */
+    onDestroy(() => {
+      // Clean up drag listeners
+      document.removeEventListener('mousemove', handleDragMove);
+      document.removeEventListener('mouseup', handleDragEnd);
+
+      // Clean up scroll listeners
+      if (designScrollViewport) {
+        designScrollViewport.removeEventListener('scroll', (event) => handleScroll(event, 'design'));
+      }
+      if (contentScrollViewport) {
+        contentScrollViewport.removeEventListener('scroll', (event) => handleScroll(event, 'content'));
+      }
+
+      // Clean up any remaining tooltips
+      if (browser) {
+        const tooltips = document.querySelectorAll('[role="tooltip"]');
+        tooltips.forEach(tooltip => {
+          if (tooltip.parentNode) {
+            tooltip.parentNode.removeChild(tooltip);
+          }
+        });
+      }
+    });
+
+    /**
+     * METHODS
+     */
+    /**
+     * Visibility Control Methods
+     * Handle conditional rendering of properties and property groups
+     */
+    function shouldShowProperty(property: any, allProperties: any[], schema: 'design' | 'content'): boolean {
+        if (!property.visibilityCondition) return true;
+        return evaluateVisibilityCondition(property.visibilityCondition, allProperties, schema);
+    }
+
+    function shouldShowPropertyGroup(propertyGroup: any, allProperties: any[], schema: 'design' | 'content'): boolean {
+        if (!propertyGroup.visibilityCondition) return true;
+        return evaluateVisibilityCondition(propertyGroup.visibilityCondition, allProperties, schema);
+    }
+
+    /**
+     * Evaluates visibility conditions for properties and property groups
+     * @param visibilityCondition - Object containing dependency and condition info
+     * @param allProperties - Array of all properties in the current context
+     * @param schema - Whether this is for 'design' or 'content' schema
+     * @returns boolean indicating if the item should be visible
+     */
+    function evaluateVisibilityCondition(visibilityCondition: any, allProperties: any[], schema: 'design' | 'content'): boolean {
+        const { dependsOn, condition } = visibilityCondition;
+        if (!dependsOn || !condition) return true;
+
+        // Create context object with values
+        const context: Record<string, any> = {};
+
+        try {
+            // Handle array of dependencies
+            const dependencies = Array.isArray(dependsOn) ? dependsOn : [dependsOn];
+            
+            dependencies.forEach(dep => {
+                // Replace hyphens with underscores for valid JavaScript variable names
+                const safeKey = dep.replace(/-/g, '_');
+                const stateValue = schema === 'design' ? designState[dep] : contentState[dep];
+                const dependentProperty = allProperties.find(p => (p.id || p.name) === dep);
+                context[safeKey] = stateValue ?? dependentProperty?.defaultValue;
+            });
+
+            // Replace ALL hyphens with underscores in the condition string
+            const safeCondition = condition.replace(/-/g, '_');
+            
+            const evalFunction = new Function(
+                ...Object.keys(context),
+                `return ${safeCondition}`
+            );
+
+            return evalFunction(...Object.values(context)); 
+        } catch (error) {
+            // console.error('Error evaluating visibility condition:', error);
+            // console.log('Condition:', condition);
+            // console.log('Dependencies:', dependsOn);
+            // console.log('Context:', context);
+            return true;
+        }
+    }
+
+    /**
+     * State Update Handler
+     * Updates component state and dispatches changes to parent
+     * @param schema - 'design' or 'content'
+     * @param propertyId - Property identifier
+     * @param value - New property value
+     * @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
+                }
+              }
+            }
+          }
+        }
+
+        // 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);
+        }
+
+        // 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 {
+      const max = contentSchema?.options?.max;
+      if (max === undefined || max === null || max === '' || max === 'none') return null;
+      const parsed = Number(max);
+      return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+    }
+
+    function canAddContentItem(): boolean {
+      const max = getContentItemsMax();
+      if (max === null) return true;
+      return Array.isArray(contentSchema?.contentItems) && contentSchema.contentItems.length < max;
+    }
+
+    // Make states reactive
+    $: designState = designState;
+    $: contentState = contentState;
+
+    /**
+     * Handles initial focus behavior for input controllers
+     * Prevents auto-focus for TextArea components
+     * @param InputComponent - The component type to check
+     * @returns boolean indicating if component should receive initial focus
+     */
+    function handleInitialFocus(InputComponent: any) {
+      // Don't auto-focus TextAreaInputController
+      return InputComponent !== TextAreaInputController;
+    }
+
+    /**
+     * Tracks focus events for input controllers and logs controller information
+     * Updates last focused controller for both design and content tabs
+     * @param controllerInfo - Object containing controller metadata
+     */
+    function handleControllerFocus(controllerInfo: {
+      type: string;
+      name: string;
+      description: string;
+      index: number;
+      groupName: string;
+    }) {
+      const controllerId = `${controllerInfo.groupName}-${controllerInfo.name}`;
+      
+      // Only log if focus is actually changing
+      if ((currentTab === 'design' && lastFocusedDesignController !== controllerId) ||
+          (currentTab === 'content' && lastFocusedContentController !== controllerId)) {
+        
+        if (currentTab === 'design') {
+          lastFocusedDesignController = controllerId;
+        } else {
+          lastFocusedContentController = controllerId;
+        }
+        
+        console.log(`Controller focused in ${currentTab} tab:`, {
+          controllerId,
+          ...controllerInfo
+        });
+      }
+    }
+
+    /**
+     * Manages tab changes between design and content views
+     * Ensures proper cleanup of modals before tab switch
+     * @param tab - The tab to switch to (design or content)
+     */
+    function handleTabChange(tab: string | undefined) {
+      const currentValue = tab ?? getActiveTab();
+      const previousTab = currentTab;
+      
+      console.log('🔄 [PropsEditor] Tab Change:', {
+        from: previousTab,
+        to: currentValue,
+        hasContentSchema: !!contentSchema,
+        isInitialLoad
+      });
+
+      // Update tab state
+      currentTab = currentValue;
+      
+      // Set isInitialTabLoad to false after first tab change
+      isInitialTabLoad = false;
+
+      // Only proceed with content-related operations if contentSchema exists
+      if (currentValue === 'content' && !contentSchema) {
+        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
+        });
+      }
+
+      // First find and remove all modal-related elements, but preserve draggable
+      const cleanup = () => {
+        // Get all possible modal elements with more specific selectors
+        const modalElements = document.querySelectorAll([
+          '[data-radix-popper-content-wrapper]',
+          '[role="dialog"]',
+          '[cmdk-root]',
+          '.font-popover-content',
+          '[data-weight-popover]',
+          '.color-picker-popover',
+          '.command-menu',
+          '[data-side="bottom"]',
+          '[data-side="top"]',
+          '.select-content',
+          '.popover-content',
+          '.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')
+          }))
+        });
+
+        // Remove each modal immediately, but protect scroll-related and draggable elements
+        modalElements.forEach(element => {
+          // Don't remove if it's part of the core UI structure or draggable
+          if (
+            element.closest('[role="tabpanel"]') || 
+            element.closest('[data-accordion-content]') ||
+            element.closest('.accordion-content') ||
+            element.getAttribute('role') === 'tabpanel' ||
+            element.getAttribute('data-accordion-content') !== null ||
+            element.closest('.scroll-area') ||
+            element.closest('[data-radix-scroll-area-viewport]') ||
+            element.classList.contains('scrollbar') ||
+            element.classList.contains('scroll-area') ||
+            element.hasAttribute('data-scrollable') ||
+            element.classList.contains('draggable-mirror') ||
+            element.classList.contains('draggable-source--is-dragging')
+          ) {
+            return;
+          }
+
+          if (element.parentNode) {
+            element.parentNode.removeChild(element);
+          }
+        });
+
+        // Clear the dropdowns store
+        const currentDropdowns = get(openDropdowns);
+        if (currentDropdowns.size > 0) {
+          console.log('🗑️ Clearing dropdowns:', Array.from(currentDropdowns));
+        }
+        openDropdowns.set(new Set());
+
+        // Stop any playing media
+        MediaManager.stopAll();
+      };
+
+      // Execute cleanup
+      cleanup();
+      
+      // Reset active controller
+      activeControllerId = null;
+
+      // If switching to content tab and content exists, ensure draggable is initialized
+      if (currentValue === 'content' && contentSchema) {
+        // Wait for tab content to be rendered
+        setTimeout(async () => {
+          console.log('🎯 Checking draggable state in content tab');
+          
+          // Check if draggable needs initialization
+          const containers = document.querySelectorAll('.content-items');
+          const needsInit = !isDraggableInitialized || 
+                          !currentDraggable || 
+                          containers.length === 0 ||
+                          !document.querySelector('.draggable-container');
+
+          if (needsInit) {
+            console.log('🔄 Reinitializing draggable');
+            await initializeDraggable();
+          } else {
+            console.log('✅ Draggable already initialized and working');
+          }
+        }, 50);
+      }
+
+      // Restore open items state for the selected tab
+      openItems = currentValue === 'design' ? designOpenItems : contentOpenItems;
+      const accordionToOpen = currentValue === 'design' ? designOpenAccordion : contentOpenAccordion;
+
+      // Only log if content exists
+      if (contentSchema) {
+        console.log('🔄 Restoring state for', currentValue, 'tab:', {
+          openItems: Array.from(openItems),
+          accordionToOpen
+        });
+      }
+
+      // Restore accordion states after a short delay to ensure DOM is ready
+      setTimeout(() => {
+        const itemsToOpen = Array.isArray(accordionToOpen) ? accordionToOpen : (accordionToOpen ? [accordionToOpen] : []);
+        for (const name of itemsToOpen) {
+          const accordion = document.querySelector(`[data-accordion-id="${name}"]`);
+          if (accordion) {
+            accordion.setAttribute('data-state', 'open');
+          }
+        }
+        if (itemsToOpen.length > 0) {
+          console.log('📂 Opened accordions:', itemsToOpen);
+        }
+      }, 50);
+      
+      // Handle focus after tab switch
+      setTimeout(() => {
+        const controllerToFocus = currentValue === 'design' 
+          ? lastFocusedDesignController 
+          : lastFocusedContentController;
+          
+        if (controllerToFocus) {
+          console.log('🎯 Focusing last focused controller:', controllerToFocus);
+          activeControllerId = controllerToFocus;
+          focusController(controllerToFocus);
+        } else {
+          // Focus first controller
+          const firstController = document.querySelector(
+            `[data-tab="${currentValue}"] .input-controller:first-child`
+          );
+          if (firstController) {
+            const id = firstController.getAttribute('id');
+            if (id) {
+              console.log('🎯 Focusing first controller:', id);
+              activeControllerId = id;
+              focusController(id);
+            }
+          }
+        }
+      }, 150);
+    }
+
+    /**
+     * Input Controller Management
+     * Handles rendering and configuration of different input types
+     */
+    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 { type, inputController } = property;
+        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);
+
+        // portalTarget for overlays (browser = full editor panel; textarea preview = tab panel)
+        let portalTarget: string | HTMLElement = schema === 'design' ? 'tab-design-container' : 'tab-content-container';
+        if (inputController.type.toLowerCase() === 'browser') {
+            portalTarget = fileBrowserPortalHost ?? 'props-editor-file-browser-portal';
+        }
+
+        // Get opacity state for color pickers
+        let initialOpacity;
+        if (inputController.type.toLowerCase() === 'colorpicker') {
+            const opacityKey = `${propertyId}_opacity`;
+            const opacityState = schema === 'design' ? designState[opacityKey] : contentState[opacityKey];
+            initialOpacity = opacityState !== undefined ? opacityState : 
+                (inputController.config?.defaultTransparency !== undefined ? inputController.config.defaultTransparency / 100 : 1);
+        }
+
+        const { description, label, ...restInputController } = inputController;
+
+        // Only set shouldFocus on initial mount or explicit focus request
+        const shouldFocus = activeControllerId === controllerId;
+
+        // Add special handling for position controller
+        const additionalProps = inputController.type.toLowerCase() === 'position' 
+            ? { onDragStateChange: (dragging: boolean) => isDragging = dragging } 
+            : {};
+
+        // Add visibility dependency tracking
+        const hasVisibilityCondition = property.visibilityCondition !== undefined;
+        
+        return {
+            component: InputControllerComponent,
+            props: {
+                id: controllerId,
+                value: initialValue,
+                opacity: initialOpacity,
+                onChange: (value: InputValue) => updateState(schema, propertyId, value),
+                onOpacityChange: (opacity: number) => updateState(schema, propertyId, initialValue, opacity),
+                portalTarget,
+                ...restInputController,
+                ...property.constraints,
+                ...additionalProps,
+                config: inputController.config,
+                controllerId,
+                openDropdowns,
+                toggleDropdown: (id: string) => {
+                    const currentSet = get(openDropdowns);
+                    if (currentSet.has(id)) {
+                        console.log(`[toggleDropdown] CLOSING ${id}`);
+                        openDropdowns.set(new Set());
+                    } else {
+                        console.log(`[toggleDropdown] OPENING ${id} (closing all others)`);
+                        openDropdowns.set(new Set([id]));
+                    }
+                },
+                shouldFocus,
+                onFocus: () => {
+                    const newControllerId = `${schema}-${propertyId}`;
+                    if (schema === 'design' && lastFocusedDesignController !== newControllerId) {
+                        lastFocusedDesignController = newControllerId;
+                        handleControllerFocus({
+                            type: inputController.type,
+                            name: propertyId,
+                            description: description || propertyId,
+                            index: propertyIndex,
+                            groupName: schema
+                        });
+                    } else if (schema === 'content' && lastFocusedContentController !== newControllerId) {
+                        lastFocusedContentController = newControllerId;
+                        handleControllerFocus({
+                            type: inputController.type,
+                            name: propertyId,
+                            description: description || propertyId,
+                            index: propertyIndex,
+                            groupName: schema
+                        });
+                    }
+                },
+                'data-visibility-dependent': hasVisibilityCondition
+            },
+            header: {
+                label: description || propertyId,
+                helpText: inputController.helpText
+            }
+        };
+    }
+    
+    /**
+     * Returns the appropriate input controller component based on type
+     * Maps input types to their corresponding controller components
+     * @param type - String identifier for the input type
+     * @returns Component class for the specified input type
+     */
+    function getInputControllerComponent(type: string) {
+      switch (type.toLowerCase()) {
+        case 'textinput': return TextInputController;
+        case 'textarea': 
+        case 'textArea': return TextAreaPreviewInputController;
+        case 'number': return NumberInputController;
+        case 'slider': return SliderInputController;
+        case 'sliderrange': return SliderRangeInputController;
+        case 'dropdown': return DropdownInputController;
+        case 'datepicker': return DatePickerInputController;
+        case 'datefield': return DateFieldInputController;
+        case 'rangecalendar': return RangeCalendarInputController;
+        case 'switch': return SwitchInputController;
+        case 'colorpicker': return ColorPickerInputController;
+        case 'checkbox': return CheckboxInputController;
+        case 'radiogroup': 
+        case 'radioGroup': return RadioGroupInputController;
+        case 'font': return FontInputController;
+        case 'position': return PositionInputController;
+        case 'browser': return BrowserInputController;
+        case 'fixedposition': return FixedPositionInputController;
+        case 'vector': return VectorInputController;
+        case 'angle': return AngleInputController;
+        case 'time': return TimeInputController;
+        case 'roundedcorners': return RoundedCornersInputController;
+        case 'tags': return TagsInputController;
+        default: return TextInputController;
+      }
+    }
+    
+    // Create a store for managing open dropdowns (only one should be open at a time)
+    const openDropdowns = writable<Set<string>>(new Set());
+    
+    /**
+     * Closes all open dropdowns and color pickers
+     * Used when changing tabs or when scroll events occur
+     */
+    function closeAllDropdowns() {
+      console.log('Closing all dropdowns');
+      openDropdowns.set(new Set());
+    }
+    
+    // Debounce scroll handler
+    const debounce = (fn: Function, ms = 16) => {
+      let timeoutId: ReturnType<typeof setTimeout>;
+      return function (this: any, ...args: any[]) {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => fn.apply(this, args), ms);
+      };
+    };
+
+    // Optimize scroll handler
+    const handleScroll = debounce((event: Event, tabId: 'design' | 'content') => {
+      // Skip if scrolling in scrollable element
+      if ((event.target as HTMLElement).closest('[data-allow-scroll="true"]')) return;
+
+      const wrapper = tabId === 'design' ? designContentWrapper : contentWrapper;
+      if (!wrapper) return;
+
+      // Batch DOM reads
+      const measurements = {
+        scrollTop: wrapper.scrollTop,
+        scrollHeight: wrapper.scrollHeight,
+        clientHeight: wrapper.clientHeight
+      };
+
+      // Batch DOM writes
+      requestAnimationFrame(() => {
+        const state = {
+          scrollPosition: measurements.scrollTop,
+          contentHeight: measurements.scrollHeight,
+          scrollAreaHeight: measurements.clientHeight,
+          shouldShowScroll: measurements.scrollHeight > measurements.clientHeight
+        };
+
+        if (tabId === 'design') {
+          designScrollState.set(state);
+        } else {
+          contentScrollState.set(state);
+        }
+
+        // Only close dropdowns if actually scrolling
+        if (measurements.scrollTop !== scrollPosition) {
+          closeAllDropdowns();
+          scrollPosition = measurements.scrollTop;
+        }
+      });
+    }, 16);
+    
+    let contentItems: any[] = [];
+    let openItems = new Set<string>();
+    let draggedItem: string | null = null;
+    let previouslyOpen = new Set<string>();
+    
+    // Add after the state declarations
+    $: isItemOpen = (itemId: string) => openItems.has(itemId);
+
+    /**
+     * Manages the open/closed state of content items
+     * @param itemId - Identifier for the content item to toggle
+     */
+    function toggleItem(itemId: string) {
+      console.log('🔄 Toggling item:', itemId, 'Current state:', openItems.has(itemId));
+      
+      if (openItems.has(itemId)) {
+        openItems.delete(itemId);
+        previouslyOpen.delete(itemId);
+      } else {
+        openItems.add(itemId);
+        previouslyOpen.add(itemId);
+
+        // When opening an item, tell the widget to navigate to it
+        const itemIndex = getContentItemIndex(itemId);
+        if (itemIndex >= 0) {
+          dispatch('goToItem', { index: itemIndex });
+        }
+      }
+      
+      // Create new Sets to trigger reactivity
+      openItems = new Set(openItems);
+      previouslyOpen = new Set(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 */
+    function getContentItemIndex(itemId: string): number {
+      if (!contentSchema || !Array.isArray(contentSchema.contentItems)) return -1;
+      return contentSchema.contentItems.findIndex((i: ContentItem) => i.id === itemId);
+    }
+    
+    /**
+     * Interface definitions for content structure
+     */
+    interface Property {
+      id: string;
+      name?: string;
+      type: string;
+      defaultValue?: any;
+      value?: any;  // Add value property to interface
+      constraints?: Record<string, any>;
+      inputController: {
+        type: string;
+        description?: string;
+        helpText?: string;
+        config?: Record<string, any>;
+      };
+    }
+
+    interface ContentItem {
+      id: string;
+      properties: Array<Property>;
+      orderNumber?: number;
+      title?: string;
+    }
+
+    interface ContentSchema {
+      genericContent: {
+        title: string;
+        properties: Array<Property>;
+      };
+      contentItems: ContentItem[];
+    }
+    
+    onMount(() => {
+      const resizeObserver = new ResizeObserver(() => {
+        if (contentWrapper) {
+          contentHeight = contentWrapper.scrollHeight;
+          scrollAreaHeight = contentWrapper.clientHeight;
+          // console.log('Content size changed - Height:', contentHeight, 'View:', scrollAreaHeight);
+        }
+      });
+
+      if (contentWrapper) {
+        resizeObserver.observe(contentWrapper);
+      }
+
+      return () => {
+        resizeObserver.disconnect();
+      };
+    });
+
+    /**
+     * Focus Management
+     * Controls input focus behavior and tab switching
+     */
+    function focusController(controllerId: string) {
+      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');
+          (componentInstance as any).focus();
+        } else {
+          const input = element.querySelector('input, textarea, [role="slider"], button');
+          if (input instanceof HTMLElement) {
+            console.log('Found focusable element:', input);
+            input.focus();
+          } else {
+            console.log('No focusable element found in controller');
+          }
+        }
+      } else {
+        console.log('Controller element not found:', controllerId);
+      }
+    }
+
+    // Update the Accordion components to include value prop
+    function handleAccordionChange(value: string | string[]) {
+      const arr = Array.isArray(value) ? value : [value];
+      if (currentTab === 'design') {
+        designOpenAccordion = arr;
+      } else {
+        contentOpenAccordion = arr;
+      }
+    }
+
+    // Stores content property values for open groups
+    let contentOpenItems = new Set<string>();
+    
+    // Functions to expand or collapse all content items
+    function expandAllContentItems() {
+      try {
+        if (contentSchema && Array.isArray(contentSchema.contentItems)) {
+          // console.log("Expanding content items from contentSchema.contentItems");
+          contentSchema.contentItems.forEach((item: ContentItem) => {
+            if (item.id) {
+              openItems.add(item.id);
+              console.log("Added content item:", item.id);
+            }
+          });
+        } else {
+          console.warn("contentSchema is not in recognized format", contentSchema);
+        }
+        // Trigger reactivity for openItems
+        openItems = new Set(openItems);
+      } catch (err) {
+        console.error("Error expanding all content items", err);
+      }
+    }
+    
+    function collapseAllContentItems() {
+      // console.log('🔄 Collapsing all items - Initial state:', Array.from(openItems));
+      // Only clear the current openItems, don't touch previouslyOpen
+      openItems = new Set();
+      // console.log("✅ Cleared openItems - New state:", Array.from(openItems));
+      // Trigger reactivity for openItems
+      openItems = new Set(openItems);
+    }
+    
+    // Keydown handler: SHIFT + '+' expands all, SHIFT + '-' collapses all
+    function handleKeyDown(event: KeyboardEvent) {
+      // console.log("handleKeyDown triggered: key=", event.key, "shiftKey=", event.shiftKey);
+      if (event.shiftKey && event.key === 'ArrowDown') {
+        // console.log("Expanding all content items");
+        expandAllContentItems();
+        // console.log("After expanding, openItems:", Array.from(openItems));
+      }
+      if (event.shiftKey && event.key === 'ArrowUp') {
+        // console.log("Collapsing all content items");
+        collapseAllContentItems();
+        // console.log("After collapsing, openItems:", Array.from(openItems));
+      }
+    }
+    
+    // Add keydown event listener on mount and remove it on destroy
+    onMount(() => {
+      window.addEventListener('keydown', handleKeyDown);
+    });
+    
+    onDestroy(() => {
+      window.removeEventListener('keydown', handleKeyDown);
+    });
+
+    /**
+     * Handles adding a new content item
+     * Creates a new item based on the first item's template
+     * and appends it to the content items list
+     */
+    function formatDefaultItemTitle(itemNumber: number): string {
+      if (itemNumber < 10) return `Item 0${itemNumber}`;
+      return `Item ${itemNumber}`;
+    }
+
+    function formatSlideTitle(slideNumber: number): string {
+      return `Slide ${slideNumber}`;
+    }
+
+    function formatPhotoTitle(photoNumber: number): string {
+      return `Photo ${photoNumber}`;
+    }
+
+    function isAutoGeneratedItemTitle(title: string | undefined): boolean {
+      if (!title?.trim()) return true;
+      const trimmed = title.trim();
+      return (
+        /^Item 0?\d+$/i.test(trimmed) ||
+        /^Slide \d+$/i.test(trimmed) ||
+        /^Photo \d+$/i.test(trimmed)
+      );
+    }
+
+    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());
+    }
+
+    function formatAutoItemTitle(title: string | undefined, position: number): string {
+      if (isSlideAutoTitle(title)) return formatSlideTitle(position);
+      if (isPhotoAutoTitle(title)) return formatPhotoTitle(position);
+      return formatDefaultItemTitle(position);
+    }
+
+    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++;
+      }
+
+      if (photoCount > 0 && photoCount >= slideCount && photoCount >= itemCount) return 'photo';
+      if (slideCount > 0 && slideCount >= itemCount) return 'slide';
+      return 'item';
+    }
+
+    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);
+    }
+
+    function renumberAutoItemTitles(items: ContentItem[]): ContentItem[] {
+      return items.map((item, index) => {
+        const position = index + 1;
+        if (!isAutoGeneratedItemTitle(item.title)) {
+          return { ...item, orderNumber: position };
+        }
+        const nextTitle = formatAutoItemTitle(item.title, position);
+        return { ...item, title: nextTitle, orderNumber: position };
+      });
+    }
+
+    function getDisplayItemTitle(item: ContentItem, index: number): string {
+      if (Array.isArray(item.properties)) {
+        const titleProp = item.properties.find((p) => {
+          const n = (p.id || p.name || '').toLowerCase();
+          return n.includes('title') || n.includes('name') || n.includes('label');
+        });
+        if (titleProp) {
+          const stateKey = `${item.id}__${titleProp.id || titleProp.name}`;
+          const editedVal = contentState[stateKey];
+          if (editedVal && typeof editedVal === 'string' && editedVal.trim()) {
+            return editedVal;
+          }
+        }
+      }
+      if (item.title && item.title.trim() && !isAutoGeneratedItemTitle(item.title)) {
+        return item.title;
+      }
+      if (isAutoGeneratedItemTitle(item.title)) {
+        return formatAutoItemTitle(item.title, index + 1);
+      }
+      return formatDefaultItemTitle(index + 1);
+    }
+
+    /** Hide genericContent when it duplicates the contentItems template (codegen anti-pattern). */
+    function shouldShowGenericContentSection(schema: typeof contentSchema): boolean {
+      const genericProps = schema?.genericContent?.properties;
+      if (!Array.isArray(genericProps) || genericProps.length === 0) return false;
+      const items = schema?.contentItems;
+      if (!Array.isArray(items) || items.length === 0) return true;
+      const firstItemProps = items[0]?.properties;
+      if (!Array.isArray(firstItemProps) || firstItemProps.length === 0) return true;
+      const genericIds = genericProps.map((p) => p.id || p.name).sort().join(',');
+      const itemIds = firstItemProps.map((p) => p.id || p.name).sort().join(',');
+      return genericIds !== itemIds;
+    }
+
+    function handleAddNewItem() {
+      try {
+        if (!contentSchema) {
+          console.warn('Cannot add item: contentSchema is undefined');
+          return;
+        }
+        if (!Array.isArray(contentSchema.contentItems)) {
+          contentSchema = { ...contentSchema, contentItems: [] };
+        }
+        if (contentSchema.contentItems.length === 0 && itemTemplate) {
+          contentSchema = {
+            ...contentSchema,
+            contentItems: [JSON.parse(JSON.stringify(itemTemplate))],
+          };
+        }
+        if (contentSchema.contentItems.length === 0 && contentSchema.genericContent?.properties?.length) {
+          const uniqueId = `${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+          contentSchema = {
+            ...contentSchema,
+            contentItems: [{
+              id: uniqueId,
+              title: contentSchema.genericContent.title || 'Item 1',
+              orderNumber: 1,
+              properties: contentSchema.genericContent.properties.map((p: any) => ({ ...p })),
+            }],
+          };
+        }
+        if (contentSchema.contentItems.length === 0) {
+          console.warn('Cannot add item: no content item template in schema');
+          return;
+        }
+        if (!canAddContentItem()) {
+          const max = getContentItemsMax();
+          console.warn(`[Add] Blocked: content item limit reached (max ${max})`);
+          return;
+        }
+        // Log before add
+        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 {
+          uniqueId = `${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+        } 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 newItem: ContentItem = {
+          ...template,
+          id: uniqueId,
+          title: newTitle,
+          orderNumber: contentSchema.contentItems.length + 1,
+          properties: template.properties.map((p: any) => ({ ...p })),
+        };
+        // Remove the new item if it exists elsewhere (shouldn't, but for safety)
+        const nextItems = [...contentSchema.contentItems.filter((i: ContentItem) => i.id !== uniqueId), newItem];
+        if (hasDuplicateIds(nextItems)) {
+          console.error('[Add] Duplicate IDs detected after add:', nextItems.map(i => i.id));
+          return;
+        }
+        contentSchema = { ...contentSchema, contentItems: nextItems };
+        // Defer opening the item until after it's positioned
+        // openItems = new Set([...openItems, uniqueId]);
+
+        // Dispatch the updated event
+        dispatch('updated', { contentSchema });
+        // Notify parent about the full items list so WidgetPreview can send it to iframe
+        dispatchContentItemsChanged(contentSchema.contentItems);
+        // Navigate widget to the newly added item
+        const newItemIndex = contentSchema.contentItems.findIndex((i: ContentItem) => i.id === uniqueId);
+        if (newItemIndex >= 0) {
+          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);
+        
+        // Ensure DOM order matches array order after adding new item
+        setTimeout(() => {
+          const container = document.querySelector('.content-items');
+          if (container && Array.isArray(contentSchema?.contentItems)) {
+            const elementMap = new Map<string, HTMLElement>();
+            Array.from(container.querySelectorAll('.content-item')).forEach((el: Element) => {
+              const id = (el as HTMLElement).dataset.id;
+              if (id) elementMap.set(id, el as HTMLElement);
+            });
+            
+            const desiredOrderIds = contentSchema.contentItems.map((item: ContentItem) => item.id);
+
+            // Surgical re-ordering to minimize DOM moves and flicker
+            for (let i = 0; i < desiredOrderIds.length; i++) {
+              const desiredId = desiredOrderIds[i];
+              const currentDomNode = container.children[i] as HTMLElement | undefined;
+
+              // Only move the element if it's not already in the correct position
+              if (currentDomNode?.dataset.id !== desiredId) {
+                const elementToMove = elementMap.get(desiredId);
+                if (elementToMove) {
+                  container.insertBefore(elementToMove, currentDomNode || null);
+                }
+              }
+            }
+
+            // Now that the item is positioned, open it to reveal content
+            openItems = new Set([...openItems, uniqueId]);
+          }
+        }, 0);
+      } catch (err) {
+        console.error('[Add] Error:', err);
+      }
+    }
+
+    // Helper function to clone properties
+    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
+          inputController: {
+            type: prop.inputController?.type || 'text', // Ensure inputController.type is set
+            description: prop.inputController?.description,
+            helpText: prop.inputController?.helpText,
+            config: prop.inputController?.config ? { ...prop.inputController.config } : undefined
+          }
+        };
+        return clonedProp;
+      });
+    }
+
+    /**
+     * Dispatches the full content items list to the parent so WidgetPreview
+     * can forward it to the widget iframe via postMessage.
+     * Each item is serialized with its id, title, and current property values.
+     */
+    function normalizeContentPropertyValue(raw: unknown): unknown {
+      if (raw && typeof raw === 'object' && 'url' in (raw as Record<string, unknown>)) {
+        return (raw as { url?: string }).url ?? '';
+      }
+      return raw ?? '';
+    }
+
+    function dispatchContentItemsChanged(items: ContentItem[]) {
+      const serialized = items.map((item: ContentItem) => {
+        const props: Record<string, any> = {};
+        if (Array.isArray(item.properties)) {
+          item.properties.forEach((p: Property) => {
+            const key = p.id || p.name;
+            // Canonical state first; schema mirror/defaultValue are legacy
+            // seeds for keys the editor never touched.
+            props[key] = normalizeContentPropertyValue(
+              contentState[`${item.id}__${key}`] ?? p.value ?? p.defaultValue
+            );
+          });
+          // Carry opacity state so parent saves don't lose per-property
+          // transparency edits made through color pickers.
+          for (const stateKey of Object.keys(contentState)) {
+            if (!stateKey.startsWith(`${item.id}__`) || !stateKey.endsWith('_opacity')) continue;
+            const baseKey = stateKey.slice(0, -'_opacity'.length);
+            if (props[baseKey] !== undefined) {
+              props[`${baseKey}_opacity`] = contentState[stateKey];
+            }
+          }
+        }
+        return { id: item.id, title: item.title, ...props };
+      });
+      console.log('[PropsEditor] Dispatching contentItemsChanged:', serialized.length, 'items');
+      dispatch('contentItemsChanged', { items: serialized });
+    }
+
+    /**
+     * Handles deleting a content item
+     * Removes the item with the specified ID from the content items list
+     * @param itemId - The ID of the item to delete
+     */
+    function handleDeleteItem(itemId: string) {
+      try {
+        if (!contentSchema || !Array.isArray(contentSchema?.contentItems)) {
+          console.warn('Cannot delete item: contentSchema or contentItems is undefined/not an array');
+          return;
+        }
+
+        // Log before deletion
+        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);
+        openItems.delete(itemId);
+        previouslyOpen.delete(itemId);
+        openItems = new Set(openItems);
+        previouslyOpen = new Set(previouslyOpen);
+        if (contentSchema.contentItems.length === initialLength) {
+          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 })));
+          // Notify parent about the updated items list
+          dispatch('updated', { contentSchema });
+          dispatchContentItemsChanged(contentSchema.contentItems);
+          // Navigate widget to the previous item (or first if deleted was first)
+          if (contentSchema.contentItems.length > 0) {
+            const targetIndex = Math.max(0, deletedIndex - 1);
+            dispatch('goToItem', { index: targetIndex });
+          }
+          setTimeout(() => {
+            console.log('🔄 Reinitializing draggable after deletion');
+            initializeDraggable();
+          }, 0);
+        }
+      } catch (error) {
+        console.error('❌ Error deleting content item:', error);
+      }
+    }
+
+    // Add intersection observer for content items
+    onMount(() => {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach(entry => {
+            const element = entry.target as HTMLElement;
+            if (!entry.isIntersecting) {
+              element.style.visibility = 'hidden';
+            } else {
+              element.style.visibility = 'visible';
+            }
+          });
+        },
+        {
+          root: contentWrapper,
+          rootMargin: '100px 0px'
+        }
+      );
+
+      // Observe content items
+      document.querySelectorAll('.content-item').forEach(item => {
+        observer.observe(item);
+      });
+
+      return () => observer.disconnect();
+    });
+
+    // Keep CSS --index in sync with DOM position **after** Svelte has rendered updates
+    afterUpdate(() => {
+      if (isDragging) return;
+      const items = getContentItems();
+      if (items.length === 0) return;
+
+      items.forEach((item: ContentItem, index: number) => {
+        const el = document.querySelector(`[data-id="${item.id}"]`);
+        if (el instanceof HTMLElement) {
+          el.style.setProperty('--index', index.toString());
+        }
+      });
+    });
+
+    // Add this near the top of the script section where other variables are declared
+    let isMounted = false;
+    let isInitialLoad = true;
+    let isFirstLoad = true;
+
+
+    onMount(() => {
+      isMounted = true;
+      
+      // Initialize editor
+      initializeEditor();
+
+      // Initialize the correct tab based on schema availability
+      const initialTab = getActiveTab();
+      if (initialTab === 'content' && contentSchema) {
+        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');
+            await initializeDraggable();
+            
+            // Set initial states
+            isInitialLoad = false;
+            isFirstLoad = false;
+            
+            // Force a UI update
+            contentSchema = { ...contentSchema };
+          } catch (error) {
+            console.error('❌ Error initializing content tab:', error);
+          }
+        }, 100);
+      } else {
+        // Set isInitialLoad to false after the first animation completes
+        setTimeout(() => {
+          isInitialLoad = false;
+          isFirstLoad = false;
+        }, 300); // Match this with your animation duration
+      }
+    });
+
+    onMount(() => {
+      // Add scroll observer
+      if (contentScrollViewport && contentScrollViewport instanceof HTMLElement) {
+        const scrollObserver = new MutationObserver((mutations) => {
+          mutations.forEach((mutation) => {
+            if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+              // console.log('🔍 Content changed, checking scroll position');
+              const scrollHeight = contentScrollViewport?.scrollHeight || 0;
+              const scrollTop = contentScrollViewport?.scrollTop || 0;
+              const clientHeight = contentScrollViewport?.clientHeight || 0;
+              
+              // console.log('📊 Scroll metrics:', {
+              //   scrollHeight,
+              //   scrollTop,
+              //   clientHeight,
+              //   distanceToBottom: scrollHeight - (scrollTop + clientHeight)
+              // });
+            }
+          });
+        });
+        
+        scrollObserver.observe(contentScrollViewport, {
+          childList: true,
+          subtree: true
+        });
+        
+        return () => {
+          scrollObserver.disconnect();
+        };
+      }
+    });
+
+    // Add after other function declarations but before the script closing tag
+    /**
+     * Determines the active tab based on available schemas and default tab
+     * @returns {'design' | 'content'} The active tab value
+     */
+    function getActiveTab(): 'design' | 'content' {
+      // If no schemas are available, return design as fallback
+      if (!designSchema && !contentSchema) return 'design';
+      // If design schema is missing but content schema exists, force content tab regardless of defaultTab
+      if (!designSchema && contentSchema) return 'content';
+      // If content schema is missing but design schema exists, force design tab
+      if (designSchema && !contentSchema) return 'design';
+      // If both schemas exist, use the defaultTab
+      return defaultTab;
+    }
+
+    // Add reactive statement to update defaultTab when schemas change
+    $: {
+      const newTab = getActiveTab();
+      if (defaultTab !== newTab) {
+        defaultTab = newTab;
+        console.log('📑 [PropsEditor] Updated defaultTab:', { from: defaultTab, to: newTab, hasDesignSchema: !!designSchema, hasContentSchema: !!contentSchema });
+      }
+    }
+
+    /**
+     * COMPONENT PROPERTIES
+     */
+    // ─── BUILT-IN DRAG ───────────────────────────────────────────
+    let rootElement: HTMLElement;
+    let dragState = { active: false, startX: 0, startY: 0, initialLeft: 0, initialTop: 0 };
+
+    function handleDragStart(e: MouseEvent) {
+      if (!enableDrag || !rootElement) return;
+      e.preventDefault();
+
+      dragState = {
+        active: true,
+        startX: e.clientX,
+        startY: e.clientY,
+        initialLeft: parseFloat(rootElement.style.left) || 0,
+        initialTop: parseFloat(rootElement.style.top) || 0
+      };
+      rootElement.style.zIndex = '50';
+      document.addEventListener('mousemove', handleDragMove);
+      document.addEventListener('mouseup', handleDragEnd);
+      document.body.style.cursor = 'move';
+    }
+
+    function handleDragMove(e: MouseEvent) {
+      if (!dragState.active || !rootElement) return;
+      const left = dragState.initialLeft + (e.clientX - dragState.startX);
+      const top = dragState.initialTop + (e.clientY - dragState.startY);
+      rootElement.style.left = `${left}px`;
+      rootElement.style.top = `${top}px`;
+      dispatch('move', { left, top });
+    }
+
+    function handleDragEnd() {
+      if (!dragState.active) return;
+      dragState.active = false;
+      document.removeEventListener('mousemove', handleDragMove);
+      document.removeEventListener('mouseup', handleDragEnd);
+      document.body.style.cursor = '';
+      dispatch('moveEnd', {
+        left: parseFloat(rootElement.style.left) || 0,
+        top: parseFloat(rootElement.style.top) || 0
+      });
+    }
+
+    /** Public: update a design state value externally (used by EmbedEditor for dimension sync) */
+    export function updateDesignValue(propertyId: string, value: any) {
+      designState = { ...designState, [propertyId]: value };
+    }
+
+    /** Public: set absolute position programmatically (used by parent for layout) */
+    export function setPosition(left: number, top: number) {
+      if (!rootElement) return;
+      rootElement.style.left = `${left}px`;
+      rootElement.style.top = `${top}px`;
+    }
+
+    /** Public: get current position */
+    export function getPosition() {
+      if (!rootElement) return { left: 0, top: 0 };
+      return {
+        left: parseFloat(rootElement.style.left) || 0,
+        top: parseFloat(rootElement.style.top) || 0
+      };
+    }
+
+    // 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 })));
+    }
+
+    /** Safe accessor — always returns an array even when contentSchema.contentItems is missing or not an array */
+    function getContentItems(): ContentItem[] {
+      return Array.isArray(contentSchema?.contentItems) ? contentSchema.contentItems : [];
+    }
+
+    function hasDuplicateIds(items: ContentItem[]): boolean {
+      const ids = items.map(item => item.id);
+      return ids.length !== new Set(ids).size;
+    }
+
+    // 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);
+      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);
+    }
+
+
+
+
+</script>
+
+<div
+    bind:this={rootElement}
+    class="{className ? className + ' ' : ''}props-editor-container relative widgetic-colors widgetic-radius overflow-hidden" 
+    style="
+      width: {width}; 
+      height: {height};
+      border: 1px solid hsl(var(--grey2));
+      {style ? ' ' + style : ''}
+    ">
+      <Tabs.Root
+        value={getActiveTab()}
+        class="tabs-container relative w-full h-full flex flex-col z-10 bg-white rounded-large"
+        onValueChange={handleTabChange}
+      >
+      
+      {#if !designSchema && !contentSchema}
+        <div class="flex flex-col items-center justify-center h-full">
+          <div class="text-error text-lg font-medium">No schema configuration available</div>
+          <div class="text-grey5 subtext mt-1">Error code: CONFIG_NOT_FOUND</div>
+        </div>
+      {:else}
+        <!-- Drag Handle - Show outside header when no header exists -->
+        {#if showDragHandle && (!designSchema || !contentSchema)}
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <div class="absolute top-0 left-0 w-full flex justify-center z-[999]">
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div 
+              class="flex items-center justify-center h-6 cursor-move transition-all duration-200 widgetic-colors opacity-0 hover:opacity-100 drag-handle-container"
+              onmousedown={handleDragStart}
+            >
+              <DragHandle class="w-[66px] h-[24px] text-grey2 hover:text-grey3 transition-colors" />
+            </div>
+          </div>
+        {/if}
+
+        <!-- Tabs header with buttons and separator - only show if both schemas exist -->
+        {#if designSchema && contentSchema}
+          <div 
+            class="tabs-header h-[96px] flex items-start pt-6 px-6 pb-4 rounded-t-[var(--radius-large)] header-hover-area relative" 
+          >
+            <!-- Drag Handle - Show inside header when header exists -->
+            {#if showDragHandle}
+              <!-- svelte-ignore a11y_no_static_element_interactions -->
+              <div class="absolute top-0 left-0 w-full flex justify-center z-[999]">
+                <!-- svelte-ignore a11y_no_static_element_interactions -->
+                <div 
+                  class="flex items-center justify-center h-6 cursor-move transition-all duration-200 widgetic-colors opacity-0 hover:opacity-100 drag-handle-container"
+                  onmousedown={handleDragStart}
+                >
+                  <DragHandle class="w-[66px] h-[24px] text-grey2 hover:text-grey3 transition-colors" />
+                </div>
+              </div>
+            {/if}
+
+            <Tabs.List 
+              class="tabs-list w-full h-[56px] rounded-large bg-grey2 p-1" 
+            >
+              <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"
+              >
+                {designTabTitle}
+              </Tabs.Trigger>
+              {#if contentSchema}
+                <Tabs.Trigger 
+                  onclick={() => {
+                    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"
+                >
+                  {contentTabTitle}
+                </Tabs.Trigger>
+              {/if}
+            </Tabs.List>
+          </div>
+
+          <Separator 
+            class="bg-grey2" 
+          />
+        {/if}
+        
+        <!-- Design Tab Content -->
+        <div class="tab-design-container flex-grow overflow-y-auto scroll-area widgetic-colors hidden" 
+             class:hidden={currentTab !== 'design'} 
+             style="max-height: {!designSchema || !contentSchema ? '100%' : `calc(100% - ${HEADER_HEIGHT}px)`}" 
+             data-scrollable={$designScrollState.shouldShowScroll} 
+             onscroll={(event: Event) => { event.preventDefault(); handleScroll(event, 'design'); }}>
+          <ScrollArea 
+            class="h-full"
+            type="hover"
+            scrollHideDelay={0}
+            scrollbarYClasses="flex touch-none select-none transition-colors w-[24px] px-2 bg-white {!designSchema || !contentSchema ? 'pt-6' : 'pt-4'} pb-6 [&>div]:w-[8px] [&>div]:bg-grey1 [&>div]:rounded-pill [&>div]:cursor-pointer [&>div]:transition-colors [&>div]:duration-250 [&>div]:hover:bg-grey2"
+          >
+            <div class="scroll-viewport" data-radix-scroll-area-viewport bind:this={designScrollViewport}>
+              <div class="px-6 {!designSchema || !contentSchema ? 'py-6' : 'pt-4 pb-6'}" bind:this={designContentWrapper}>
+                <Tabs.Content 
+                  value="design" 
+                  class="design-tab-content !mt-0 tabs-content-container w-full outline-none {isFirstLoad ? 'initial-load' : !isInitialTabLoad ? 'animate-slide-left' : ''}"
+                  data-tab="design"
+                  style="animation-duration: 300ms; transform: none;"
+                >
+                  {#if designSchema && designSchema[0]?.components}
+                    <Accordion.Root 
+                      value={currentTab === 'design' ? designOpenAccordion : contentOpenAccordion}
+                      onValueChange={handleAccordionChange}
+                      type="multiple" 
+                      class="design-tab-accordion tab-accordion-root w-full"
+                      style="position: relative; z-index: 1;"
+                    >
+                      {#each designSchema[0].components as component}
+                        {@const visibleGroups = component.propertyGroups.filter((group: PropertyGroup) => 
+                          shouldShowPropertyGroup(group, component.propertyGroups[0].properties, 'design')
+                        )}
+                        {#each visibleGroups as propertyGroup, groupIndex}
+                          <Accordion.Item 
+                            value={propertyGroup.name} 
+                            class="accordion-item w-full" 
+                            data-accordion-id={propertyGroup.name}
+                            data-position={getAccordionItemPosition(component, propertyGroup, groupIndex)}
+                          >
+                            <Accordion.Trigger class="accordion-trigger flex items-center justify-between w-full px-4 py-4">
+                              <span class="body-medium" style="color: hsl(var(--grey7));">{propertyGroup.name}</span>
+                            </Accordion.Trigger>
+                            
+                            <Accordion.Content class="accordion-content w-full p-0 px-4">
+                              <div class="properties-list flex flex-col" style="gap: 8px;">
+                                {#each propertyGroup.properties as property, propertyIndex (propertyGroup.name + '_' + (property.id ?? property.name ?? propertyIndex))}
+                                  {@const result = renderInputController('design', property, propertyIndex, groupIndex === 0)}
+                                  {@const InputComponent = result.component}
+                                  {@const props = result.props}
+                                  {@const header = result.header}
+                                  {@const isVisible = shouldShowProperty(property, propertyGroup.properties, 'design')}
+                                  {@const stateKey = property.id || property.name}
+                                  {@const reactiveValue = designState[stateKey]}
+                                  
+                                  {#if isVisible}
+                                    <div 
+                                      class="ictrl input-controller flex 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: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}
+                                    >
+                                      <div class="ic-header-ct flex-1 min-w-0">
+                                        <InputControllerHeader 
+                                          label={header.label}
+                                          helpText={header.helpText}
+                                        />
+                                      </div>
+                                      
+                                      <div class="ic-input-ct flex-shrink-0 ml-auto" style="width: 185px;">
+                                        <svelte:component 
+                                          this={InputComponent} 
+                                          {...props}
+                                          value={reactiveValue !== undefined ? reactiveValue : props.value}
+                                          shouldFocus={activeControllerId === props.id}
+                                        />
+                                      </div>
+                                    </div>
+                                  {/if}
+                                {/each}
+                              </div>
+                            </Accordion.Content>
+                          </Accordion.Item>
+                        {/each}
+                      {/each}
+                    </Accordion.Root>
+                  {:else}
+                    <div class="p-4 text-gray-500">
+                      {#if !designSchema}
+                        No design schema available
+                      {:else if !designSchema[0]}
+                        No schema data available
+                      {:else if !designSchema[0].components}
+                        No components defined in schema
+                      {:else}
+                        No properties available
+                      {/if}
+                    </div>
+                  {/if}
+                </Tabs.Content>
+              </div>
+            </div>
+          </ScrollArea>
+        </div>
+
+        <!-- Content Tab Content  -->
+        {#if contentSchema}
+          <div class="tab-content-container flex-grow overflow-y-auto scroll-area widgetic-colors hidden" 
+               class:hidden={currentTab !== 'content'} 
+               style="max-height: {!contentSchema || !designSchema ? '100%' : `calc(100% - ${HEADER_HEIGHT}px)`}" 
+               data-scrollable={$contentScrollState.shouldShowScroll} 
+               onscroll={(event: Event) => { event.preventDefault(); handleScroll(event, 'content'); }}>
+            <ScrollArea 
+              class="h-full"
+              type="hover"
+              scrollHideDelay={0}
+              scrollbarYClasses="flex touch-none select-none transition-colors w-[24px] px-2 bg-white {!designSchema || !contentSchema ? 'pt-6' : 'pt-4'} pb-6 [&>div]:w-[8px] [&>div]:bg-grey1 [&>div]:rounded-pill [&>div]:cursor-pointer [&>div]:transition-colors [&>div]:duration-250 [&>div]:hover:bg-grey2"
+            >
+              <div class="scroll-viewport" data-radix-scroll-area-viewport bind:this={contentScrollViewport}>
+                <div class="px-6 {!designSchema || !contentSchema ? 'pt-6 pb-6' : 'pt-4 pb-6'}" bind:this={contentWrapper}>
+                  <Tabs.Content 
+                    value="content" 
+                    class="content-tab-content !mt-0 tabs-content-container w-full {isFirstLoad ? 'initial-load' : !isInitialTabLoad ? 'animate-slide-right' : ''}" 
+                    data-tab="content"
+                    style="transform: none; position: relative; z-index: 1;"
+                  >
+                    <div class="tab-content-root w-full" style="position: relative; z-index: 1;">
+                      <!-- Generic Content Collapsible Card -->
+                      {#if shouldShowGenericContentSection(contentSchema)}
+                      <Card.Root class="generic-content-card relative mt-0" style="position: relative; z-index: 1;">
+                        <Collapsible.Root 
+                          open={isGenericContentOpen}
+                          onOpenChange={() => isGenericContentOpen = !isGenericContentOpen}
+                        >
+                          <Collapsible.Trigger class="generic-content-trigger w-full">
+                            <div class="flex items-center h-[52px]" style="padding-left: {CONTENT_INNER_PADDING}px; padding-right: {CONTENT_INNER_PADDING}px;">
+                              <h3 class="body-medium text-grey7 flex-1 content-title">{contentSchema?.genericContent?.title || 'Content'}</h3>
+                              <ChevronDown class="h-6 w-6 text-grey5 transition-transform chevron" />
+                            </div>
+                          </Collapsible.Trigger>
+
+                          {#if isGenericContentOpen}
+                            <Separator class="separator border-grey2" />
+                          {/if}
+
+                          <Collapsible.Content>
+                            <Card.Content class="p-0 px-4">
+                              <div class="pt-[14px] pb-[16px]">
+                                <div class="properties-list flex flex-col" style="gap: 8px;">
+                                  {#each contentSchema?.genericContent?.properties || [] as property, propertyIndex}
+                                    {@const result = renderInputController(
+                                      'content', 
+                                      property,
+                                      propertyIndex,
+                                      true
+                                    )}
+                                    {@const InputComponent = result.component}
+                                    {@const props = result.props}
+                                    {@const header = result.header}
+                                    {@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'}
+                                      >
+                                        <!-- Left side - Label -->
+                                        {#if InputComponent !== BrowserInputController}
+                                          <InputControllerHeader 
+                                            label={header.label}
+                                            helpText={header.helpText}
+                                          />
+                                        {:else}
+                                          <!-- Special case for BrowserInputController -->
+                                          <div class="flex-1 min-w-0 pr-4">
+                                            <InputControllerHeader 
+                                              label={header.label}
+                                              helpText={header.helpText}
+                                            />
+                                          </div>
+                                        {/if}
+                                        
+                                        <!-- Right side - Input Component -->
+                                        <div class="ic-input-ct flex-shrink-0" style="width: 185px;">
+                                          <svelte:component 
+                                            this={InputComponent} 
+                                            {...props}
+                                            {header}
+                                            shouldFocus={activeControllerId === props.id}
+                                          />
+                                        </div>
+                                      </div>
+                                    {/if}
+                                  {/each}
+                                </div>
+                              </div>
+                            </Card.Content>
+                          </Collapsible.Content>
+                        </Collapsible.Root>
+                      </Card.Root>
+                      {/if}
+
+                      <!-- Content Items Container -->
+                      <div class="content-items-wrapper mt-0" style="position: relative; z-index: 1;">
+                        <!-- Sortable Container -->
+                        <div class="content-items flex flex-col gap-4" bind:this={contentItemsContainer} style="position: relative; z-index: 1;">
+                          {@html (() => {
+                            const items = contentSchema?.contentItems;
+                            if (!Array.isArray(items)) return '';
+                            const ids = items.map((i: ContentItem) => i.id);
+                            const hasDupes = ids.length !== new Set(ids).size;
+                            if (hasDupes) {
+                              console.error('[UI Render] Duplicate IDs in contentItems:', ids);
+                            }
+                            return ''
+                          })()}
+                          {#each (Array.isArray(contentSchema?.contentItems) ? contentSchema.contentItems : []) as item, index (item.id)}
+                            <!-- Content Item Collapsible Card -->
+                            <div class="content-item" data-id={item.id}>
+                              <Card.Root class="content-item-card relative">
+                                <Collapsible.Root 
+                                  open={isItemOpen(item.id)}
+                                  onOpenChange={() => toggleItem(item.id)}
+                                >
+                                  <Collapsible.Trigger class="content-item-trigger w-full">
+                                    <div class="flex items-center h-[52px] cursor-pointer widgetic-colors">
+                                      <div class="drag-handle flex items-center justify-center w-[56px] cursor-move hover:text-grey5">
+                                        <IconGripVertical class="w-6 h-6 text-grey2 transition-colors duration-200" />
+                                      </div>
+                                      
+                                      <!-- Item Title — user caption/title wins; Slide N / Item 0N follow list position -->
+                                      <h4 class="body-medium text-grey7 flex-1 content-title">
+                                        {getDisplayItemTitle(item, index)}
+                                      </h4>
+                                      
+                                      <!-- Arrow Icon -->
+                                      <div class="pr-4">
+                                        <ChevronDown class="h-6 w-6 text-grey7 transition-transform chevron" />
+                                      </div>
+                                    </div>
+                                  </Collapsible.Trigger>
+
+                                  {#if isItemOpen(item.id)}
+                                    <Separator class="separator border-grey2" />
+                                  {/if}
+
+                                  <Collapsible.Content>
+                                    <Card.Content class="p-0 px-4">
+                                      <div class="pt-[14px] pb-[16px]">
+                                        <div class="properties-list flex flex-col" style="gap: 8px;">
+                                          {#each item.properties as property, propertyIndex}
+                                            {@const result = renderInputController(
+                                              'content', 
+                                              property,
+                                              propertyIndex,
+                                              false,
+                                              item.id
+                                            )}
+                                            {@const InputComponent = result.component}
+                                            {@const props = result.props}
+                                            {@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'}
+                                              >
+                                                <!-- Left side - Label -->
+                                                {#if InputComponent !== BrowserInputController}
+                                                  <InputControllerHeader 
+                                                    label={header.label}
+                                                    helpText={header.helpText}
+                                                  />
+                                                {:else}
+                                                  <!-- Special case for BrowserInputController -->
+                                                  <div class="flex-1 min-w-0 pr-4">
+                                                    <InputControllerHeader 
+                                                      label={header.label}
+                                                      helpText={header.helpText}
+                                                    />
+                                                  </div>
+                                                {/if}
+                                                
+                                                <!-- Right side - Input Component -->
+                                                <div class="ic-input-ct flex-shrink-0" style="width: 185px;">
+                                                  <svelte:component 
+                                                    this={InputComponent} 
+                                                    {...props}
+                                                    {header}
+                                                    shouldFocus={activeControllerId === props.id}
+                                                  />
+                                                </div>
+                                              </div>
+                                            {/if}
+                                          {/each}
+                                        </div>
+                                        
+                                        <!-- Delete Item Button -->
+                                        <div class="mt-[16px] flex flex-col gap-2 relative z-10">
+                                          <!-- svelte-ignore a11y_mouse_events_have_key_events -->
+                                          <button
+                                            type="button"
+                                            class="widgetic-colors h-[34px] w-full flex items-center justify-center relative z-10 group"
+                                            style="
+                                              background-color: hsl(var(--error)) !important; 
+                                              border-radius: var(--radius-small) !important;
+                                              color: white !important;
+                                              transition: background-color 0.2s ease !important;
+                                              line-height: 1 !important;
+                                            "
+                                            onclick={(e: MouseEvent) => {
+                                              e.stopPropagation();
+                                              handleDeleteItem(item.id);
+                                            }}
+                                            onmouseover={(e) => {
+                                              e.currentTarget.style.backgroundColor = 'color-mix(in srgb, hsl(var(--error)) 90%, black) !important';
+                                            }}
+                                            onmouseout={(e) => {
+                                              e.currentTarget.style.backgroundColor = 'hsl(var(--error)) !important';
+                                            }}
+                                          >
+                                            <span class="subtext text-white transition-colors duration-200">
+                                              Delete item
+                                            </span>
+                                          </button>
+                                        </div>
+                                      </div>
+                                    </Card.Content>
+                                  </Collapsible.Content>
+                                </Collapsible.Root>
+                              </Card.Root>
+                            </div>
+                          {/each}
+                        </div>
+
+                        {#if canAddContentItem()}
+                          <div class="content-add-item-ct mt-4">
+                            <Button
+                              variant="ghost"
+                              class="group w-full h-[52px] bg-grey1 hover:bg-grey2 active:scale-[0.98] border-2 border-grey2 rounded-medium"
+                              style="transition: background-color 0.2s ease, transform 0.15s ease !important;"
+                              onclick={handleAddNewItem}
+                            >
+                              <div class="flex items-center justify-center gap-2">
+                                <AddNew class="w-5 h-5 text-grey5" />
+                                <span class="body-medium text-grey7 group-hover:underline">Add new</span>
+                              </div>
+                            </Button>
+                          </div>
+                        {/if}
+                      </div>
+                    </div>
+                  </Tabs.Content>
+                </div>
+              </div>
+            </ScrollArea>
+          </div>
+        {/if}
+      {/if}
+
+        <div
+          bind:this={fileBrowserPortalHost}
+          id="props-editor-file-browser-portal"
+          class="props-editor-file-browser-portal pointer-events-none absolute inset-0 z-[999998]"
+        ></div>
+      </Tabs.Root>
+</div>
+
+<style>
+      .props-editor-container {
+        --has-both-schemas: 0;
+        border-radius: var(--radius-large);
+      }
+
+      /* ── Drag handle visibility on hover ── */
+      :global(.header-hover-area:hover .drag-handle-container) {
+        opacity: 1 !important;
+      }
+      .props-editor-container:not(:has(.header-hover-area)) {
+        position: relative;
+      }
+      .props-editor-container:not(:has(.header-hover-area)):hover :global(.drag-handle-container) {
+        opacity: 1 !important;
+      }
+      :global(.drag-handle-container) {
+        opacity: 0;
+        transition: opacity 0.3s ease;
+      }
+      :global(.widgetic-colors .drag-handle svg) {
+        color: hsl(var(--grey2)) !important;
+        transition: color 0.2s ease !important;
+      }
+      :global(.widgetic-colors .drag-handle:hover svg) {
+        color: hsl(var(--grey3)) !important;
+      }
+
+      /* ── Button hover states within widgetic-colors ── */
+      :global(.widgetic-colors button.bg-white),
+      :global(.widgetic-colors button.bg-white:hover) {
+        background-color: white !important;
+      }
+      :global(.widgetic-colors button span) {
+        line-height: 1;
+      }
+      :global(.widgetic-colors button svg) {
+        color: hsl(var(--grey5));
+      }
+      :global(.widgetic-colors button:hover svg) {
+        color: hsl(var(--grey7));
+      }
+
+      /* ── Design tab content spacing ── */
+      :global(.design-tab-content[data-state="active"]) {
+        display: block;
+        margin-top: var(--has-both-schemas, 1rem);
+      }
+      .props-editor-container:has(.tabs-header) {
+        --has-both-schemas: 1rem;
+      }
+      :global(.content-items-wrapper) {
+        padding-top: 1rem;
+      }
+
+      /* Style all chevrons across the editor */
+      :global([data-radix-accordion-trigger] > svg),
+      :global(.accordion-trigger > svg),
+      :global(.generic-content-card button > svg),
+      :global(.content-item-card button > svg) {
+        width: 24px !important;
+        height: 24px !important;
+        flex-shrink: 0 !important;
+      }
+
+      /* Style accordion items */
+      :global(.accordion-item) {
+        border: 2px solid hsl(var(--grey2));
+        border-radius: 0;
+        overflow: hidden;
+        margin: 0;
+        margin-bottom: -2px;
+        background-color: white;
+        position: relative;
+      }
+
+      /* Remove default Radix borders and add our own */
+      :global(.accordion-trigger),
+      :global([data-radix-accordion-trigger]) {
+        border: none !important;
+        outline: none !important;
+        position: relative;
+        padding: 0 16px !important;
+        height: 52px !important;
+        box-sizing: border-box;
+        display: flex !important;
+        align-items: center !important;
+      }
+
+      /* Add our own border using a pseudo-element */
+      :global(.accordion-trigger)::after {
+        content: '';
+        position: absolute;
+        bottom: -2px;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background-color: hsl(var(--grey2));
+        opacity: 1;
+      }
+
+      /* Only hide the border after the content has retracted */
+      :global([data-state="closed"] .accordion-trigger)::after {
+        transition: opacity 0ms linear 200ms;
+        opacity: 0;
+      }
+
+      /* Show border immediately when opening */
+      :global([data-state="open"] .accordion-trigger)::after {
+        transition: none;
+        opacity: 1;
+      }
+
+      /* Adjust the trigger content layout */
+      :global(.accordion-trigger) {
+        display: flex !important;
+        align-items: center !important;
+        justify-content: space-between !important;
+      }
+
+      /* First item - rounded at top only */
+      :global(.accordion-item[data-position="first"]) {
+        border-top-left-radius: var(--radius-small);
+        border-top-right-radius: var(--radius-small);
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        margin-top: 0;  /* Explicitly remove top margin */
+      }
+
+      /* Last item - rounded at bottom only */
+      :global(.accordion-item[data-position="last"]) {
+        margin-bottom: 0;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        border-bottom-left-radius: var(--radius-small);
+        border-bottom-right-radius: var(--radius-small);
+      }
+
+      /* Middle items - no rounded corners */
+      :global(.accordion-item[data-position="middle"]) {
+        border-radius: 0;
+      }
+
+      :global(.content-items) {
+        position: relative;
+        transition: min-height 0.2s ease-out;
+      }
+
+      :global(.drag-handle) {
+        opacity: 1 !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+      }
+
+      :global(.draggable-mirror) {
+        opacity: 1 !important;
+        transform-origin: 50% 50%;
+        z-index: 100;
+        pointer-events: none;
+        background-color: white !important;
+        border: 2px solid hsl(var(--grey2)) !important;
+        border-radius: var(--radius-small) !important;
+      }
+
+      :global(.draggable-source--is-dragging) {
+        opacity: 0.3 !important;
+      }
+
+      :global(html.draggable--is-dragging) {
+        cursor: move !important;
+      }
+
+      :global([data-scrollable="false"] .scrollbar) {
+        display: none;
+      }
+
+      :global(.content-item .drag-handle) {
+        transition: opacity 0.2s ease;
+      }
+
+      :global(.content-item:hover .drag-handle span) {
+        opacity: 0;
+      }
+
+      :global(.content-item:hover .drag-handle div) {
+        display: flex;
+      }
+
+      :global(.content-item .number) {
+        transition: opacity 0.2s ease;
+        opacity: 1; /* Explicitly set opacity */
+      }
+
+      :global(.content-item:hover .number) {
+        opacity: 0;
+      }
+
+      :global(.content-item .drag-icon) {
+        transition: opacity 0.2s ease;
+        opacity: 0;
+      }
+
+      :global(.content-item:hover .drag-icon) {
+        display: flex !important;
+        opacity: 1;
+      }
+
+      /* Debug styles */
+      :global(.drag-handle) {
+        border: none;
+      }
+
+      :global(.content-item:hover .drag-handle) {
+        border-color: #e5e7eb;
+      }
+
+      /* Replace with new simplified drag handle styles */
+      :global(.drag-handle) {
+        transition: color 0.2s ease;
+      }
+
+      /* Ensure inputs maintain their container width */
+      :global(.props-editor-container input),
+      :global(.props-editor-container select),
+      :global(.props-editor-container textarea),
+      :global(.props-editor-container .input-wrapper),
+      :global(.props-editor-container .input-container),
+      :global(.props-editor-container .color-picker-popover) {
+        width: 100%;
+        min-width: 0;
+        box-sizing: border-box;
+      }
+
+      /* Force width constraints on accordion content */
+      :global(.accordion-content) {
+        width: 100%;
+        min-width: 0;
+      }
+
+      /* Ensure popover content stays within viewport */
+      :global(.popover-content) {
+        max-width: calc(100vw - 2rem);
+        min-width: 0;
+      }
+
+      /* Ensure text inputs can expand as needed */
+      :global(.props-editor input[type="text"]),
+      :global(.props-editor textarea) {
+        min-height: fit-content;
+      }
+
+      /* Update scrollbar styling to match */
+      :global([data-scrollable="true"] .scrollbar) {
+        width: 8px !important; /* Thinner scrollbar */
+        margin-right: 2px !important; /* Add padding from the right */
+      }
+
+      :global([data-scrollable="true"] .thumb) {
+        background-color: hsl(var(--grey1)) !important;
+        border-radius: 3px !important;
+        margin-right: 2px !important;
+      }
+
+      :global([data-scrollable="true"] .thumb:hover) {
+        background-color: hsl(var(--muted-foreground) / 0.6) !important;
+      }
+
+      :global([data-scrollable="true"] .track) {
+        background-color: transparent !important;
+        margin-right: 2px !important;
+      }
+
+      :global([data-scrollable="true"]) {
+        padding-right: 2px !important; /* Add padding for scrollbar */
+      }
+
+      /* Add these styles to ensure proper z-index layering */
+      :global(.props-editor) {
+        position: relative;
+        z-index: 0;
+      }
+
+      :global(.props-editor .color-suggestions) {
+        z-index: 99999 !important;  /* Force highest z-index */
+      }
+
+      /* Update existing styles to ensure proper stacking */
+      :global(.draggable-mirror) {
+        z-index: 100;
+      }
+
+      :global(.popover-content) {
+        z-index: 50;
+      }
+
+      /* Ensure text area and its dropdowns are above other content */
+      :global(.props-editor .text-area-input) {
+        position: relative;
+        z-index: 1;
+      }
+
+      :global(.props-editor .text-area-input .color-suggestions) {
+        z-index: 99999 !important;
+      }
+
+      /* Make any input controller that's being interacted with appear on top */
+      :global(.props-editor .input-controller) {
+        position: relative;
+        z-index: 1;
+      }
+
+      :global(.props-editor .input-controller:focus-within),
+      :global(.props-editor .input-controller[data-state="open"]) {
+        z-index: 99999 !important;  /* Bring to front when active */
+      }
+
+      /* Specific handling for text area controller */
+      :global(.props-editor .text-area-input) {
+        position: relative;
+        z-index: 1;
+      }
+
+      :global(.props-editor .text-area-input:focus-within),
+      :global(.props-editor .text-area-input[data-state="open"]) {
+        z-index: 99999 !important;
+      }
+
+      /* Ensure dropdowns and suggestions always appear above */
+      :global(.props-editor .color-suggestions),
+      :global(.props-editor .popover-content),
+      :global(.props-editor .dropdown-content) {
+        z-index: 99999 !important;
+      }
+
+      /* Add these specific styles to remove focus borders from cards */
+      :global(.content-item .card),
+      :global(.content-item [data-radix-collapsible-trigger]),
+      :global(.content-item [data-radix-collapsible-content]) {
+        outline: none !important;
+        box-shadow: none !important;
+        --tw-ring-offset-width: 0 !important;
+        --tw-ring-width: 0 !important;
+        --tw-ring-color: transparent !important;
+        --tw-ring-offset-shadow: none !important;
+        --tw-ring-shadow: none !important;
+      }
+
+      /* Target the collapsible trigger button specifically */
+      :global(.content-item [data-radix-collapsible-trigger] button),
+      :global(.content-item [data-state]),
+      :global(.content-item [aria-expanded]) {
+        outline: none !important;
+        box-shadow: none !important;
+        border: none !important;
+        --tw-ring-offset-width: 0 !important;
+        --tw-ring-width: 0 !important;
+        --tw-ring-color: transparent !important;
+        --tw-ring-offset-shadow: none !important;
+        --tw-ring-shadow: none !important;
+      }
+
+      /* Style all cards and collapsible elements in Content tab */
+      :global(.content-item-card),
+      :global(.generic-content-card) {
+        border: 2px solid hsl(var(--grey2)) !important;
+        border-radius: var(--radius-small) !important;
+        background-color: white !important;
+        position: relative !important;
+        box-shadow: none !important;
+      }
+
+      /* Preserve card border but remove focus ring */
+      :global(.content-item-card),
+      :global(.generic-content-card) {
+        border: 2px solid hsl(var(--grey2)) !important;
+      }
+
+      /* Style separator */
+      :global(.content-item-card) :global(.separator),
+      :global(.generic-content-card) :global(.separator) {
+        height: 2px !important;
+        background-color: hsl(var(--grey2)) !important;
+        border: none !important;
+        margin: 0 !important;
+      }
+
+      /* Add hover effect to content items */
+      :global(.content-item-card [data-radix-collapsible-trigger]),
+      :global(.generic-content-card [data-radix-collapsible-trigger]) {
+        height: 52px !important;
+        box-sizing: border-box !important;
+      }
+
+      /* Remove the existing height declaration from this rule */
+      :global(.content-item-card [data-radix-collapsible-trigger])::before,
+      :global(.generic-content-card [data-radix-collapsible-trigger])::before {
+        height: 52px !important;
+      }
+
+      /* Add hover effect for title text */
+      :global(.content-item-card [data-radix-collapsible-trigger] h4),
+      :global(.generic-content-card [data-radix-collapsible-trigger] h3) {
+        text-align: left !important;
+      }
+
+      /* Add hover overlay for the entire trigger area */
+      :global(.content-item-card [data-radix-collapsible-trigger])::before,
+      :global(.generic-content-card [data-radix-collapsible-trigger])::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: transparent;
+        transition: background-color 0.2s ease;
+      }
+
+      :global(.content-item-card [data-radix-collapsible-trigger]:hover)::before,
+      :global(.generic-content-card [data-radix-collapsible-trigger]:hover)::before {
+        background-color: hsl(var(--grey1));
+      }
+
+      /* Add bottom border to collapsible triggers */
+      :global(.content-item-card [data-radix-collapsible-trigger])::after,
+      :global(.generic-content-card [data-radix-collapsible-trigger])::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background-color: hsl(var(--grey2));
+        opacity: 1;
+      }
+
+      /* Only hide the border after the content has retracted */
+      :global([data-state="closed"] [data-radix-collapsible-trigger])::after {
+        transition: opacity 0ms linear 200ms;
+        opacity: 0;
+      }
+
+      /* Show border immediately when opening */
+      :global([data-state="open"] [data-radix-collapsible-trigger])::after {
+        transition: none;
+        opacity: 1;
+      }
+
+      /* Update chevron rotation animation to match Design tab */
+      :global(.content-item-card [data-radix-collapsible-trigger] .chevron),
+      :global(.generic-content-card [data-radix-collapsible-trigger] .chevron) {
+        transform: rotate(0deg);
+        transition: transform 250ms cubic-bezier(0.61, 0, 0.32, 1) !important;
+      }
+
+      :global(.content-item-card [data-state="open"] .chevron),
+      :global(.generic-content-card [data-state="open"] .chevron) {
+        transform: rotate(180deg);
+      }
+
+      /* Make buttons and drag handle clickable */
+      :global(.content-item-card [data-radix-collapsible-trigger] button),
+      :global(.content-item-card [data-radix-collapsible-trigger] .drag-handle),
+      :global(.generic-content-card [data-radix-collapsible-trigger] button) {
+        position: relative;
+        z-index: 2;
+      }
+
+      /* Remove cursor pointer from content area */
+      :global(.content-item-card [data-radix-collapsible-content]),
+      :global(.generic-content-card [data-radix-collapsible-content]) {
+        cursor: default !important;
+      }
+
+      /* Keep text left-aligned */
+      :global(.content-item-card h4),
+      :global(.generic-content-card h3) {
+        text-align: left !important;
+      }
+
+      /* Add this new rule to remove focus borders */
+      :global(.content-item *:focus),
+      :global(.content-item *:focus-visible),
+      :global([data-radix-collapsible-trigger]:focus),
+      :global([data-radix-collapsible-trigger]:focus-visible) {
+        outline: none !important;
+        box-shadow: none !important;
+      }
+
+      /* Update existing focus style rules to be more specific */
+      :global(.content-item button:focus),
+      :global(.content-item button:focus-visible),
+      :global(.content-item [role="button"]:focus),
+      :global(.content-item [role="button"]:focus-visible) {
+        outline: none !important;
+        box-shadow: none !important;
+        -webkit-tap-highlight-color: transparent !important;
+      }
+
+      /* Add specific rule for collapsible triggers */
+      :global(.content-item [data-radix-collapsible-trigger]) {
+        --tw-ring-offset-width: 0 !important;
+        --tw-ring-width: 0 !important;
+      }
+
+      /* Add more specific focus removal for card elements */
+      :global(.content-item-card:focus),
+      :global(.content-item-card:focus-within),
+      :global(.content-item-card [data-radix-collapsible-trigger]:focus),
+      :global(.content-item-card [data-radix-collapsible-trigger]:focus-visible) {
+        outline: none !important;
+        box-shadow: none !important;
+        --tw-ring-width: 0 !important;
+      }
+
+      /* Target button elements specifically */
+      :global(.content-items button),
+      :global(.content-items button *),
+      :global(.content-items [role="button"]),
+      :global(.content-items [role="button"] *) {
+        outline: none !important;
+        box-shadow: none !important;
+        --tw-ring-offset-width: 0 !important;
+        --tw-ring-width: 0 !important;
+        --tw-ring-color: transparent !important;
+        --tw-ring-offset-shadow: none !important;
+        --tw-ring-shadow: none !important;
+        -webkit-tap-highlight-color: transparent !important;
+      }
+
+      /* Keep only hover effect */
+      :global(.content-items button:hover) {
+        background-color: transparent !important;
+      }
+
+      /* Add styles for input controller layout */
+      :global(.input-controller) {
+        display: flex !important;
+        align-items: center !important;
+        justify-content: space-between !important;
+        width: 100% !important;
+        position: relative !important;
+      }
+
+      :global(.input-controller > div:first-child) {
+        flex: 1 !important;
+        min-width: 0 !important;
+        margin-right: 16px !important;
+      }
+
+      :global(.input-controller > div:last-child) {
+        width: 185px !important;
+        flex-shrink: 0 !important;
+      }
+
+      /* New animation system */
+      :global(.accordion-content) {
+        overflow: hidden;
+        will-change: transform, opacity;
+      }
+
+      :global([data-state="open"] .accordion-content) {
+        animation: accordionOpen 0ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+      }
+
+      :global([data-state="closed"] .accordion-content) {
+        animation: accordionClose 0ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+      }
+
+      @keyframes accordionOpen {
+        0% {
+          opacity: 0;
+          transform: translateY(-8px);
+        }
+        100% {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      @keyframes accordionClose {
+        0% {
+          opacity: 1;
+          transform: translateY(0);
+        }
+        100% {
+          opacity: 0;
+          transform: translateY(-8px);
+        }
+      }
+
+      /* Chevron animation */
+      :global(.accordion-trigger svg) {
+        transition: transform 200ms ease; /* Increase from 50ms to 200ms to match Content tab */
+      }
+
+      :global([data-state="open"] .accordion-trigger svg) {
+        transform: rotate(180deg);
+      }
+
+      /* Add this to match how we fixed card items */
+      :global(.content-items button:focus),
+      :global(.content-items button:focus-visible),
+      :global(.content-items button[role="button"]:focus),
+      :global(.content-items button[role="button"]:focus-visible) {
+        outline: none !important;
+        box-shadow: none !important;
+        --tw-ring-offset-width: 0 !important;
+        --tw-ring-width: 0 !important;
+        --tw-ring-color: transparent !important;
+        --tw-ring-offset-shadow: none !important;
+        --tw-ring-shadow: none !important;
+      }
+
+      /* Target the button and its container */
+      :global(.content-items button),
+      :global(.content-items button *),
+      :global(.content-items [role="button"]),
+      :global(.content-items [role="button"] *) {
+        outline: none !important;
+        box-shadow: none !important;
+        --tw-ring-offset-width: 0 !important;
+        --tw-ring-width: 0 !important;
+        --tw-ring-color: transparent !important;
+        --tw-ring-offset-shadow: none !important;
+        --tw-ring-shadow: none !important;
+        -webkit-tap-highlight-color: transparent !important;
+      }
+
+      /* Add this new style for double-height controllers */
+      .double-height {
+        height: 104px !important; /* Double the standard height (48 * 2) + gap (8) */
+      }
+
+      /* Ensure padding is removed from all containers */
+      :global(.accordion-content),
+      :global(.card-content) {
+        padding: 0 !important;
+      }
+
+      /* Specific style for font controllers */
+      :global(.input-controller.double-height) {
+        height: 104px !important;
+      }
+
+      /* Ensure content containers maintain width */
+      :global(.accordion-content > div),
+      :global(.card-content > div) {
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      /* Add padding to content containers */
+      :global(.accordion-content > div),
+      :global(.card-content > div) {
+        padding: 16px 16px !important;
+      }
+
+      /* Height variations for different controllers */
+      .position-height {
+        height: 185px !important; /* Position controller */
+      }
+
+      .fixed-position-height {
+        height: 110px !important; /* Fixed position controller */
+      }
+
+      .text-area-preview-height {
+        height: 92px !important; /* Text area preview controller */
+      }
+
+      /* Specific styles for other controllers */
+      :global(.input-controller.position-height) {
+        height: 185px !important;
+      }
+
+      :global(.input-controller.fixed-position-height) {
+        height: 110px !important;
+      }
+
+      :global(.input-controller.text-area-preview-height) {
+        height: 92px !important;
+      }
+
+      /* Special handling for position controller */
+      .position-controller {
+        position: relative;
+        z-index: 1;
+      }
+
+      /* When active or dragging, position it relative to the root stacking context */
+      .position-controller:hover,
+      .position-controller:focus-within,
+      .position-dragging {
+        position: relative;
+        z-index: 99999 !important;
+      }
+
+      /* Ensure accordion items don't create new stacking contexts */
+      :global(.accordion-item) {
+        position: static !important;
+      }
+
+      :global(.accordion-content) {
+        position: relative;
+        z-index: 1;
+      }
+
+      /* Override any potential stacking contexts in the hierarchy */
+      :global(.scroll-viewport),
+      :global(.scroll-area),
+      :global([data-radix-scroll-area-viewport]) {
+        position: relative !important;
+        transform: none !important;
+      }
+
+      /* Ensure the position controller can pierce through all layers */
+      .position-controller:hover *,
+      .position-controller:focus-within *,
+      .position-dragging * {
+        z-index: 99999 !important;
+      }
+
+      /* Add new 'only' state */
+      :global(.accordion-item[data-position="only"]) {
+        border-radius: var(--radius-small) !important;
+      }
+
+      /* Modify existing position rules */
+      :global(.accordion-item[data-position="first"]) {
+        border-top-left-radius: var(--radius-small);
+        border-top-right-radius: var(--radius-small);
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      :global(.accordion-item[data-position="last"]) {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        border-bottom-left-radius: var(--radius-small);
+        border-bottom-right-radius: var(--radius-small);
+      }
+
+      :global(.accordion-item[data-position="middle"]) {
+        border-radius: 0;
+      }
+
+      /* Override tab hover states */
+      :global([role="tab"][data-state="active"]) {
+        background-color: white !important;
+      }
+
+      :global([role="tab"][data-state="active"]:hover) {
+        background-color: white !important;
+      }
+
+      :global([role="tab"]:hover) {
+        background-color: transparent !important;
+      }
+
+      /* TAB colors in all contexts */
+      /* Card & Collapsible buttons hover states */
+      :global(.card .widgetic-colors button:hover),
+      :global(.collapsible .widgetic-colors button:hover) {
+        background-color: white !important;
+      }
+
+      /* Card & Collapsible Icons color states */
+      :global(.card .widgetic-colors button:hover svg),
+      :global(.collapsible .widgetic-colors button:hover svg) {
+        color: hsl(var(--grey7)) !important;
+      }
+
+      /* Ensure scroll area maintains border radius */
+      :global([data-radix-scroll-area-viewport]) {
+        border-bottom-right-radius: var(--radius-large) !important;
+      }
+
+      :global(.scroll-area) {
+        border-bottom-right-radius: var(--radius-large) !important;
+      }
+
+      :global(.scroll-viewport) {
+        border-bottom-right-radius: var(--radius-large) !important;
+      }
+
+      /* Ensure scrollbar doesn't affect border radius */
+      :global([data-radix-scroll-area-scrollbar]) {
+        border-bottom-right-radius: var(--radius-large) !important;
+        padding-right: 2px !important;
+      }
+
+      :global([data-radix-scroll-area-thumb]) {
+        border-radius: var(--radius-small) !important;
+        margin-right: 2px !important;
+      }
+
+      /* Add z-index management for tooltips */
+      :global(.props-editor-tooltip) {
+        z-index: 99999 !important;
+      }
+
+      /* Drag Handle Visibility */
+      .header-hover-area {
+        position: relative;
+      }
+
+      .header-hover-area:hover .drag-handle-container {
+        opacity: 1;
+      }
+
+      .drag-handle-container {
+        transition: opacity 0.2s ease;
+        cursor: move; /* Make sure cursor is 'move' on the handle */
+        z-index: 999; /* Ensure it's always on top */
+      }
+
+      .drag-handle-container:hover {
+        opacity: 1 !important;
+      }
+
+      /* Drag Handle Icon */
+      :global(.drag-handle svg) {
+        color: hsl(var(--grey2)) !important;
+        transition: color 0.2s ease !important;
+      }
+
+      :global(.drag-handle:hover svg) {
+        color: hsl(var(--grey5)) !important;
+      }
+
+      /* Content Item Hover Styles */
+      :global(.content-item-card [data-radix-collapsible-trigger] h4),
+      :global(.generic-content-card [data-radix-collapsible-trigger] h3) {
+        text-align: left !important;
+      }
+
+      /* Add new specific hover styles for content titles */
+      :global(.content-item-trigger:hover .content-title),
+      :global(.generic-content-trigger:hover .content-title) {
+        text-decoration: underline !important;
+      }
+
+      /* Background hover effects */
+      :global(.content-item-card [data-radix-collapsible-trigger])::before,
+      :global(.generic-content-card [data-radix-collapsible-trigger])::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: transparent;
+        transition: background-color 0.2s ease;
+      }
+
+      :global(.content-item-card [data-radix-collapsible-trigger]:hover)::before,
+      :global(.generic-content-card [data-radix-collapsible-trigger]:hover)::before {
+        background-color: hsl(var(--grey1));
+      }
+
+      /* Add new button hover styles */
+      :global(.hover-button:hover .hover-button-inner) {
+        background-color: hsl(var(--grey1));
+      }
+
+      :global(.hover-button:hover span) {
+        text-decoration: underline;
+      }
+
+      /* Add Draggable Sort Animation styles */
+      :global(.content-item) {
+        position: relative;
+        z-index: 1;
+        will-change: transform;
+        transform: translate3d(0, 0, 0);
+      }
+
+      :global(.draggable-container--is-dragging) {
+        cursor: grabbing;
+      }
+
+      :global(.draggable-source--is-dragging) {
+        opacity: 0.3;
+      }
+
+      :global(.draggable-source--is-dragging .content-title) {
+        text-decoration: none !important;
+      }
+
+      :global(.draggable-source--placed) {
+        visibility: visible !important;
+        transition: none !important;
+        opacity: 1 !important;
+      }
+
+      :global(.content-items--is-dragging .content-item:not(.draggable-source--is-dragging)) {
+        transition: transform 200ms ease-in-out;
+      }
+
+      :global(.content-item.draggable-mirror) {
+        transform: scale(1.05);
+      }
+
+      :global(.content-item.draggable--original) {
+        opacity: 0;
+      }
+
+      :global(.content-item.draggable-source--is-dragging) {
+        opacity: 0.3;
+      }
+
+      :global(.content-item.draggable-source--is-dragging .content-title) {
+        text-decoration: none !important;
+      }
+
+      :global(.content-item.draggable-mirror .content-title) {
+        text-decoration: none !important;
+      }
+
+      :global(.draggable-mirror .drag-handle svg) {
+        color: hsl(var(--grey3)) !important;
+      }
+
+      :global(.draggable--original) {
+        display: none;
+      }
+
+      :global(.content-items--is-dragging) {
+        cursor: grabbing;
+      }
+
+      /* Prevent hover effects during dragging */
+      :global(.content-items--is-dragging .content-item-card [data-radix-collapsible-trigger]:hover)::before {
+        background-color: transparent;
+      }
+
+      :global(.content-items--is-dragging .content-item:not(.draggable-mirror) .content-title:hover) {
+        text-decoration: none !important;
+      }
+
+      :global(.content-items--is-dragging .content-item-trigger:hover .content-title) {
+        text-decoration: none !important;
+      }
+
+      :global(.content-items--is-dragging .content-item.draggable--over) {
+        transform: scale(1.015) !important;
+      }
+
+      :global(.content-item.draggable-mirror) {
+        transform: scale(1.05);
+      }
+
+      :global(.content-item.draggable--original) {
+        opacity: 0;
+      }
+
+      :global(.content-item.draggable-source--is-dragging) {
+        opacity: 0.3;
+      }
+
+      :global(.content-item.draggable-source--is-dragging .content-title) {
+        text-decoration: none !important;
+      }
+
+      :global(.content-item.draggable-mirror .content-title) {
+        text-decoration: none !important;
+      }
+
+      /* Update drag handle hover area and content title behavior */
+      :global(.content-item .drag-handle) {
+        width: 56px !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        height: 100% !important;
+        cursor: move !important;
+      }
+
+      /* Keep the icon size consistent */
+      :global(.content-item .drag-handle svg) {
+        width: 24px !important;
+        height: 24px !important;
+      }
+
+      /* Prevent title underline when hovering drag handle */
+      :global(.content-item .drag-handle:hover ~ .content-title) {
+        text-decoration: none !important;
+      }
+
+      :global(.content-item .drag-handle:hover ~ h4) {
+        text-decoration: none !important;
+      }
+
+      /* Ensure drag handle maintains proper positioning */
+      :global(.content-item-trigger .drag-handle) {
+        position: relative;
+        z-index: 3;
+      }
+
+      /* Remove any previous left padding from the flex container */
+      :global(.content-item-trigger .flex) {
+        padding-left: 0 !important;
+      }
+
+      :global(.draggable-mirror .drag-handle svg) {
+        color: hsl(var(--grey3)) !important;
+      }
+
+      :global(.draggable--original) {
+        display: none;
+      }
+
+      :global(.content-items--is-dragging) {
+        cursor: grabbing;
+      }
+
+    
+      :global(.content-item) {
+        contain: layout style;
+        will-change: transform;
+        transform: translate3d(0, 0, 0);
+      }
+
+      :global(.draggable-mirror) {
+        contain: layout style;
+        will-change: transform;
+        transform: translate3d(0, 0, 0);
+      }
+
+     
+      :global(.content-items--is-dragging .content-item:not(.draggable-source--is-dragging)) {
+        transition: transform 200ms cubic-bezier(0.2, 0, 0.2, 1);
+        will-change: transform;
+      }
+
+      /* Animation classes */
+      :global(.design-tab-content[data-state="active"]) {
+        animation: none;
+        transform: none;
+      }
+
+      :global(.design-tab-content.initial-load[data-state="active"]) {
+        animation: slideUp 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+        transform: none;
+      }
+
+      :global(.design-tab-content.animate-slide-left[data-state="active"]) {
+        animation: slideFromLeft 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+        transform: none;
+      }
+
+      :global(.content-tab-content.animate-slide-right[data-state="active"]) {
+        animation: slideFromRight 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+        transform: none;
+      }
+
+      @keyframes slideFromLeft {
+        from {
+          opacity: 0;
+          transform: translateX(-20px);
+        }
+        to {
+          opacity: 1;
+          transform: none;
+        }
+      }
+
+      @keyframes slideFromRight {
+        from {
+          opacity: 0;
+          transform: translateX(20px);
+        }
+        to {
+          opacity: 1;
+          transform: none;
+        }
+      }
+
+      @keyframes slideUp {
+        from {
+          opacity: 0;
+          transform: translateY(20px);
+        }
+        to {
+          opacity: 1;
+          transform: none;
+        }
+      }
+
+      @keyframes fadeInUp {
+        from {
+          opacity: 0;
+          transform: translateY(10px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+
+
+      @keyframes slideUp {
+        from {
+          opacity: 0;
+          transform: translateY(20px);
+        }
+        to {
+          opacity: 1;
+          transform: none;
+        }
+      }
+
+      @keyframes slideRight {
+        from {
+          opacity: 0;
+          transform: translateX(20px);
+        }
+        to {
+          opacity: 1;
+          transform: none;
+        }
+      }
+
+      :global(.animate-slide-up) {
+        animation: slideUp 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
+      }
+
+      :global(.animate-slide-right) {
+        animation: slideRight 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
+      }
+
+      /* Add these styles at the end of the style block */
+
+      /* Empty state animations */
+      :global(.content-tab-content .empty-state) {
+        opacity: 0;
+        transform: translateY(10px);
+        animation: fadeInUp 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+        animation-delay: 100ms;
+      }
+
+      @keyframes fadeInUp {
+        from {
+          opacity: 0;
+          transform: translateY(10px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      /* Draggable mirror styles - styling only, no positioning */
+      :global(.draggable-mirror) {
+        opacity: 1 !important;
+        background-color: white !important;
+        border: 2px solid hsl(var(--grey2)) !important;
+        border-radius: var(--radius-small) !important;
+        box-shadow: none !important;
+      }
+
+      /* Style for item being hovered over (potential drop target) */
+      :global(.content-items--is-dragging .content-item.draggable--over) {
+        transform: scale(1.015) !important;
+        border: 2px solid hsl(var(--grey2)) !important;
+        border-radius: var(--radius-small) !important;
+        background-color: hsl(var(--grey1)) !important;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
+        z-index: 10 !important;
+      }
+      
+      /* Remove all borders and shadows from draggable mirror */
+      :global(.draggable-mirror) {
+        border: 2px solid hsl(var(--grey2)) !important;
+        border-radius: var(--radius-small) !important;
+        box-shadow: none !important;
+      }
+      
+      /* Remove borders from all children inside the mirror */
+      :global(.draggable-mirror *) {
+        border: none !important;
+        border-top: none !important;
+        border-bottom: none !important;
+        border-left: none !important;
+        border-right: none !important;
+      }
+      
+      /* Make the original item completely transparent during dragging */
+      :global(.draggable-source--is-dragging) {
+        opacity: 0 !important;
+      }
+
+      :global(body.dragging-preserve-borders .form-input),
+      :global(body.dragging-preserve-borders [id^="number-input"]),
+      :global(body.dragging-preserve-borders .number-input-button),
+      :global(body.dragging-preserve-borders input),
+      :global(body.dragging-preserve-borders select),
+      :global(body.dragging-preserve-borders textarea),
+      :global(body.dragging-preserve-borders button) {
+        border: 1px solid hsl(var(--grey2)) !important;
+      }
+
+      /* Add a new rule to force fixed heights during dragging */
+      :global(.dragging-active .content-item) {
+        height: 56px !important;
+        min-height: 56px !important;
+        max-height: 56px !important;
+        overflow: hidden !important;
+      }
+
+      :global(.dragging-active [data-radix-collapsible-content]) {
+        height: 0 !important;
+        display: none !important;
+        overflow: hidden !important;
+      }
+
+      /* Add explicit transition for content tab chevrons */
+      :global(.content-item-card .chevron),
+      :global(.generic-content-card .chevron) {
+        transition: transform 200ms ease !important; /* Make explicit matching transition */
+      }
+</style>
+