@widgetic/editor 4.0.9 → 4.0.11

package/dist/components/editors/PropsEditor.svelte

@@ -78,7 +78,19 @@
     import InputControllerRenderer, { type ControllerDescriptor } from '../ic/InputControllerRenderer.svelte';
     import MediaManager from '../../utils/MediaManager';
     import FontManager from '../../utils/FontManager';
+    import { conditionHolds } from '../../utils/visibilityCondition';
+    import { removeEditorStorageValuesStartingWith } from '../../utils/editorStorage';
+    import { reorderableList, moveListItem, type ItemReorderOptions } from '../../utils/itemReorder';
+    import {
+      lockPointerStyle,
+      queryAllInTreeOf,
+      queryInTreeOf,
+      treeOf,
+      type SearchableTree
+    } from '../../utils/shadowDom';
     import { config as appConfig } from '../../config';
+    import { provideEditorMediaLibrary } from '../../mediaLibraryContext';
+    import type { MediaLibraryProvider } from '@widgetic/file-browser';
 
     /**
      * STYLES from Widgetic Design System
@@ -161,6 +173,16 @@
     export let initialDesignValues: Record<string, any> = {};
     export let initialContentValues: Record<string, any> = {};
 
+    /**
+     * Where the file controls (images, video, audio, documents) get their files from. Without it they show the
+     * Widgetic account's uploads, as they always have (configured with `setFileBrowserUploadConfig`). With a
+     * `MediaLibraryProvider` they list, upload, rename and delete through its functions instead, so a partner's own
+     * storage (a CMS, an S3 bucket, a DAM) can be used with no Widgetic storage at all.
+     */
+    export let mediaLibrary: MediaLibraryProvider | undefined = undefined;
+    // The file controls are created from the schema several components down: give them the library through context.
+    provideEditorMediaLibrary(() => mediaLibrary);
+
     /**
      * CONSTANTS
      */
@@ -254,18 +276,9 @@
 
     // 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));
-        }
+        // Only the editor's own keys are looked at: this used to walk the whole localStorage and remove every key with
+        // this text in it, and inside a customer's page that reaches keys that are the customer's.
+        removeEditorStorageValuesStartingWith('font-weight-state-');
     }
 
     /**
@@ -356,521 +369,71 @@
       }
     };
 
-    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;
-      }
+    /**
+     * REORDERING CONTENT ITEMS
+     * Dragging an item's handle moves the item in the list. The dragging itself is in utils/itemReorder.ts, which is
+     * not a library because the editor can be inside a shadow root on a customer's page (see the file for why no
+     * library works there). While an item is dragged the stylesheet folds every item to one row so the whole list is
+     * within reach (an item that is open keeps its content, it is only hidden), so nothing has to be closed and
+     * opened again around a drag.
+     */
+    let isReordering = false;
 
-      isInitializing = true;
-      // console.log('🔄 [PropsEditor] Starting draggable initialization');
+    function handleReorderStart() {
+      isReordering = true;
+    }
 
+    /** An item was dropped at another place in the list: `oldIndex` and `newIndex` are its places before and after. */
+    function handleItemsReordered({ oldIndex, newIndex }: { oldIndex: number; newIndex: number }) {
       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 })));
+        if (!Array.isArray(contentSchema?.contentItems)) {
+          console.warn('[Reorder] contentItems is not an array, skipping reorder');
+          return;
+        }
 
-                const items = [...contentSchema.contentItems];
-                const [movedItem] = items.splice(oldIndex, 1);
-                items.splice(newIndex, 0, movedItem);
+        // Robust checks for valid indices
+        const itemCount = contentSchema.contentItems.length;
+        if (
+          !Number.isInteger(oldIndex) || !Number.isInteger(newIndex) ||
+          oldIndex < 0 || newIndex < 0 || oldIndex >= itemCount || newIndex >= itemCount
+        ) {
+          console.error('[Reorder] Invalid indices for the dropped item. Aborting reorder.', { oldIndex, newIndex, itemCount });
+          return;
+        }
 
-                // 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
-            });
+        const items = moveListItem<ContentItem>(contentSchema.contentItems, oldIndex, newIndex);
 
-            // 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)';
-                    }
-                  }
-                });
-              }
-            });
+        // Safety checks before updating state
+        if (hasDuplicateIds(items)) {
+          console.error('[Reorder] Duplicate IDs detected after reordering with indices. Aborting update.', items.map(i => i.id));
+          return;
+        }
+        if (items.length !== itemCount) {
+          console.error('[Reorder] Array length mismatch after reordering with indices. Aborting update.');
+          return;
+        }
 
-            // 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 = '';
-            });
+        const renumbered = renumberAutoItemTitles(items);
+        contentSchema = { ...contentSchema, contentItems: renumbered };
+        dispatch('updated', { contentSchema });
+        dispatchContentItemsChanged(contentSchema.contentItems);
+      } catch (err) {
+        console.error('[Reorder] Error updating the order after a drop:', err);
+      }
+    }
 
-            logOrder('after init');
+    /** The drag is over (dropped or cancelled): the list is drawn as usual again. */
+    function handleReorderEnd() {
+      isReordering = false;
+    }
 
-            isDraggableInitialized = true;
-          }
-        }
-      } catch (error) {
-        console.error('❌ Error initializing draggable:', error);
-        isDraggableInitialized = false;
-        currentDraggable = null;
-      } finally {
-        isInitializing = false;
-      }
+    /** What the list of content items needs to be reorderable; used with `use:reorderableList` on the list. */
+    const contentItemsReorderOptions: ItemReorderOptions = {
+      itemSelector: '.content-item',
+      handleSelector: '.drag-handle',
+      onDragStart: handleReorderStart,
+      onReorder: handleItemsReordered,
+      onDragEnd: handleReorderEnd
     };
 
     // Add this near other reactive declarations at the top level
@@ -910,6 +473,14 @@
         }
     }
 
+    // The tree the editor is drawn in (the shadow root inside a module, the document on a normal page), kept from the
+    // moment it is mounted: when the editor is torn down it is no longer in that tree to ask.
+    let editorTree: SearchableTree | null = null;
+
+    onMount(() => {
+        editorTree = treeOf(rootElement);
+    });
+
     onMount(() => {
         // console.log('PropsEditor Mounted!');
         
@@ -956,7 +527,8 @@
       if (browser) {
         document.removeEventListener('mousemove', handleDragMove);
         document.removeEventListener('mouseup', handleDragEnd);
-        if (dragState.active) document.body.style.cursor = '';
+        releasePointerStyle?.();
+        releasePointerStyle = null;
       }
 
       // Clean up scroll listeners
@@ -967,9 +539,9 @@
         contentScrollViewport.removeEventListener('scroll', (event) => handleScroll(event, 'content'));
       }
 
-      // Clean up any remaining tooltips
-      if (browser) {
-        const tooltips = document.querySelectorAll('[role="tooltip"]');
+      // Clean up any remaining tooltips, the editor's own: the page it is on has tooltips of its own that must stay
+      if (browser && editorTree) {
+        const tooltips = Array.from(editorTree.querySelectorAll('[role="tooltip"]'));
         tooltips.forEach(tooltip => {
           if (tooltip.parentNode) {
             tooltip.parentNode.removeChild(tooltip);
@@ -1024,12 +596,11 @@
             // 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)); 
+            // The condition is text from the widget's schema and this editor can run inside a customer's page, so it
+            // is read by a small parser and never run as code (it used to go through `new Function`, which ran the
+            // widget author's JavaScript with the page's rights and needed 'unsafe-eval'). A condition the parser
+            // cannot use keeps the control visible, as a failing one always did, and is reported once in the console.
+            return conditionHolds(safeCondition, context);
         } catch (error) {
             // console.error('Error evaluating visibility condition:', error);
             // console.log('Condition:', condition);
@@ -1200,10 +771,12 @@
         // });
       }
 
-      // First find and remove all modal-related elements, but preserve draggable
+      // First find and remove all modal-related elements, but preserve the item being dragged
       const cleanup = () => {
-        // Get all possible modal elements with more specific selectors
-        const modalElements = document.querySelectorAll([
+        // Get all possible modal elements with more specific selectors. Only the ones in the editor's own tree (the
+        // shadow root inside a module): the customer's page has dialogs and popovers of its own that are none of the
+        // editor's business.
+        const modalElements = queryAllInTreeOf(rootElement, [
           '[data-radix-popper-content-wrapper]',
           '[role="dialog"]',
           '[cmdk-root]',
@@ -1228,9 +801,9 @@
           // }))
         // });
 
-        // Remove each modal immediately, but protect scroll-related and draggable elements
+        // Remove each modal immediately, but protect scroll-related and dragged elements
         modalElements.forEach(element => {
-          // Don't remove if it's part of the core UI structure or draggable
+          // Don't remove if it's part of the core UI structure or being dragged
           if (
             element.closest('[role="tabpanel"]') || 
             element.closest('[data-accordion-content]') ||
@@ -1242,8 +815,8 @@
             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')
+            element.classList.contains('reorder-mirror') ||
+            element.classList.contains('is-reorder-source')
           ) {
             return;
           }
@@ -1270,28 +843,6 @@
       // 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;
@@ -1308,7 +859,7 @@
       setTimeout(() => {
         const itemsToOpen = Array.isArray(accordionToOpen) ? accordionToOpen : (accordionToOpen ? [accordionToOpen] : []);
         for (const name of itemsToOpen) {
-          const accordion = document.querySelector(`[data-accordion-id="${name}"]`);
+          const accordion = queryInTreeOf(rootElement, `[data-accordion-id="${name}"]`);
           if (accordion) {
             accordion.setAttribute('data-state', 'open');
           }
@@ -1330,7 +881,8 @@
           focusController(controllerToFocus);
         } else {
           // Focus first controller
-          const firstController = document.querySelector(
+          const firstController = queryInTreeOf(
+            rootElement,
             `[data-tab="${currentValue}"] .input-controller:first-child`
           );
           if (firstController) {
@@ -1774,7 +1326,9 @@
     function focusController(controllerId: string) {
       // console.log('Attempting to focus controller:', controllerId);
       activeControllerId = controllerId;
-      const element = document.getElementById(controllerId);
+      // Looked up in the editor's own tree: in a module that is the shadow root, where `document.getElementById`
+      // finds nothing (and on the customer's page it could find an element of theirs with the same id).
+      const element = treeOf(rootElement)?.getElementById(controllerId);
       if (element) {
         const componentInstance = element.querySelector(':scope > *');
         if (componentInstance && 'focus' in componentInstance) {
@@ -1840,6 +1394,9 @@
     // Keydown handler: SHIFT + '+' expands all, SHIFT + '-' collapses all
     function handleKeyDown(event: KeyboardEvent) {
       // console.log("handleKeyDown triggered: key=", event.key, "shiftKey=", event.shiftKey);
+      // The listener is on the window, so it hears every key typed on the page. Only the ones typed in the editor
+      // count: on a customer's page Shift+Arrow in their own text boxes must not open and close our items.
+      if (rootElement && !event.composedPath().includes(rootElement)) return;
       if (event.shiftKey && event.key === 'ArrowDown') {
         // console.log("Expanding all content items");
         expandAllContentItems();
@@ -2063,33 +1620,11 @@
         // 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
+        // The list is drawn from the array, so the new item is at the end of it. Once it is drawn, open it to reveal
+        // its content. (The DOM order no longer needs to be put right by hand here: nothing moves the items in the
+        // DOM behind the list's back since the drag and drop is done by utils/itemReorder.ts.)
         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
+          if (Array.isArray(contentSchema?.contentItems)) {
             openItems = new Set([...openItems, uniqueId]);
           }
         }, 0);
@@ -2235,10 +1770,6 @@
             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);
@@ -2264,8 +1795,9 @@
         }
       );
 
-      // Observe content items
-      document.querySelectorAll('.content-item').forEach(item => {
+      // Observe content items: the ones in the editor's own list. `.content-item` is a name any page may use, and
+      // an element of the page's that is observed here would be hidden whenever it scrolls out of view.
+      contentItemsContainer?.querySelectorAll('.content-item').forEach(item => {
         observer.observe(item);
       });
 
@@ -2274,13 +1806,14 @@
 
     // 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) {
+      if (isDragging || isReordering) return;
+      // The items of the editor's own list, in the order they are drawn (a lookup by data-id on the whole document
+      // would find nothing inside a shadow root, and could find an element of the customer's page).
+      const itemElements = Array.from(contentItemsContainer?.children ?? []);
+      if (itemElements.length === 0) return;
+
+      itemElements.forEach((el: Element, index: number) => {
+        if (el instanceof HTMLElement && el.classList.contains('content-item')) {
           el.style.setProperty('--index', index.toString());
         }
       });
@@ -2305,11 +1838,8 @@
         currentTab = 'content';
         
         // Wait for DOM to be ready
-        setTimeout(async () => {
+        setTimeout(() => {
           try {
-            // console.log('🔄 Initializing draggable for content tab');
-            await initializeDraggable();
-            
             // Set initial states
             isInitialLoad = false;
             isFirstLoad = false;
@@ -2392,6 +1922,8 @@
     // ─── BUILT-IN DRAG ───────────────────────────────────────────
     let rootElement: HTMLElement;
     let dragState = { active: false, startX: 0, startY: 0, initialLeft: 0, initialTop: 0 };
+    // Puts the pointer back as it was once the panel is no longer dragged (see lockPointerStyle).
+    let releasePointerStyle: (() => void) | null = null;
 
     function handleDragStart(e: MouseEvent) {
       const target = positionTarget || rootElement;
@@ -2423,7 +1955,10 @@
       target.style.zIndex = '50';
       document.addEventListener('mousemove', handleDragMove);
       document.addEventListener('mouseup', handleDragEnd);
-      document.body.style.cursor = 'move';
+      // The cursor is shown on the host of the shadow root the editor is in (on <body> only when it is on a normal page):
+      // the <body> of a customer's page is not the editor's to change.
+      releasePointerStyle?.();
+      releasePointerStyle = lockPointerStyle(rootElement, 'move', { blockTextSelection: false });
     }
 
     function handleDragMove(e: MouseEvent) {
@@ -2439,7 +1974,8 @@
       dragState.active = false;
       document.removeEventListener('mousemove', handleDragMove);
       document.removeEventListener('mouseup', handleDragEnd);
-      document.body.style.cursor = '';
+      releasePointerStyle?.();
+      releasePointerStyle = null;
       dispatch('moveEnd', getPosition());
     }
 
@@ -2481,17 +2017,6 @@
       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
@@ -2576,9 +2101,6 @@
               </Tabs.Trigger>
               {#if contentSchema}
                 <Tabs.Trigger 
-                  onclick={() => {
-                    initializeDraggable();
-                  }}
                   value="content" 
                   class="flex-1 h-full rounded-[11px] transition-colors duration-250 text-grey5 hover:text-grey7 hover:underline data-[state=active]:bg-white data-[state=active]:text-grey7 data-[state=active]:hover:text-grey7"
                 >
@@ -2800,7 +2322,7 @@
                       <!-- 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;">
+                        <div class="content-items flex flex-col gap-4" bind:this={contentItemsContainer} use:reorderableList={contentItemsReorderOptions} style="position: relative; z-index: 1;">
                           {@html (() => {
                             const items = contentSchema?.contentItems;
                             if (!Array.isArray(items)) return '';
@@ -3134,24 +2656,6 @@
         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;
       }
@@ -3266,11 +2770,6 @@
         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;
       }
@@ -3863,7 +3362,6 @@
         text-decoration: underline;
       }
 
-      /* Add Draggable Sort Animation styles */
       :global(.content-item) {
         position: relative;
         z-index: 1;
@@ -3871,95 +3369,77 @@
         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;
+      /*
+       * Reordering the items by dragging a handle (utils/itemReorder.ts). While an item is dragged, every item is
+       * folded to one row at once (the items that were open keep their content, it is only hidden), so the whole
+       * list is within reach and the places to drop do not move under the pointer.
+       */
+      :global(.content-items.is-reordering) {
+        user-select: none;
+        -webkit-user-select: none;
       }
 
-      :global(.content-item.draggable-mirror) {
-        transform: scale(1.05);
+      /* The card is what is folded, not the item: the line that shows the drop place sits outside the item's box */
+      :global(.content-items.is-reordering .content-item-card) {
+        height: 56px !important;
+        min-height: 56px !important;
+        max-height: 56px !important;
+        overflow: hidden !important;
       }
 
-      :global(.content-item.draggable--original) {
-        opacity: 0;
+      :global(.content-items.is-reordering [data-collapsible-content]) {
+        display: none !important;
       }
 
-      :global(.content-item.draggable-source--is-dragging) {
+      /* The item being dragged stays in place, faded; the floating copy is what follows the pointer */
+      :global(.content-item.is-reorder-source) {
         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;
+      /* A line in the gap where the dragged item would be dropped: in front of an item, or behind the last one */
+      :global(.content-item.is-reorder-drop-before)::before,
+      :global(.content-item.is-reorder-drop-after)::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 3px;
+        border-radius: 2px;
+        background-color: hsl(var(--sage-green));
+        pointer-events: none;
       }
 
-      :global(.content-items--is-dragging) {
-        cursor: grabbing;
+      :global(.content-item.is-reorder-drop-before)::before {
+        top: -9px;
       }
 
-      /* Prevent hover effects during dragging */
-      :global(.content-items--is-dragging .content-item-card [data-radix-collapsible-trigger]:hover)::before {
-        background-color: transparent;
+      :global(.content-item.is-reorder-drop-after)::after {
+        bottom: -9px;
       }
 
-      :global(.content-items--is-dragging .content-item:not(.draggable-mirror) .content-title:hover) {
-        text-decoration: none !important;
+      /* The floating copy of the dragged item: one row, with the editor's green outline */
+      :global(.reorder-mirror) {
+        box-sizing: border-box;
+        border: 2px solid hsl(var(--sage-green));
+        border-radius: var(--radius-small);
+        background-color: white;
+        box-shadow: none;
+        will-change: transform;
       }
 
-      :global(.content-items--is-dragging .content-item-trigger:hover .content-title) {
+      :global(.reorder-mirror .content-title) {
+        color: hsl(var(--sage-green));
         text-decoration: none !important;
       }
 
-      :global(.content-items--is-dragging .content-item.draggable--over) {
-        transform: scale(1.015) !important;
+      :global(.reorder-mirror .chevron),
+      :global(.reorder-mirror .drag-handle svg) {
+        color: hsl(var(--sage-green));
       }
 
-      :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;
+      /* The card inside the copy has its own border: the outline above is the only one */
+      :global(.reorder-mirror .content-item-card) {
+        border: none;
       }
 
       /* Update drag handle hover area and content title behavior */
@@ -3970,6 +3450,8 @@
         justify-content: center !important;
         height: 100% !important;
         cursor: move !important;
+        /* Touching the handle drags the item; it must not scroll the page */
+        touch-action: none;
       }
 
       /* Keep the icon size consistent */
@@ -3998,37 +3480,12 @@
         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;
@@ -4094,8 +3551,6 @@
         }
       }
 
-
-
       @keyframes slideUp {
         from {
           opacity: 0;
@@ -4147,46 +3602,6 @@
         }
       }
 
-      /* 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),
@@ -4197,20 +3612,6 @@
         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) {