@widgetic/editor 4.0.9 → 4.0.11

package/dist/components/editors/PropsEditor.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { ContentSchemaView, DesignSchemaView } from '../../schemaViews.js';
+import type { MediaLibraryProvider } from '@widgetic/file-browser';
 /**
      * STYLES from Widgetic Design System
      * Note: props-editor.css global rules (body, *) moved to app.css (standalone only).
@@ -45,6 +46,12 @@ declare const PropsEditor: $$__sveltets_2_IsomorphicComponent<{
     /** Optional layout wrapper moved by this editor's built-in drag and position API. */ positionTarget?: any;
     initialDesignValues?: Record<string, any>;
     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.
+         */ mediaLibrary?: MediaLibraryProvider | undefined;
     updateDesignValue?: (propertyId: string, value: any) => void;
     setPosition?: (left: number, top: number) => void;
     getPosition?: () => {

package/dist/components/ic/BrowserInputController.svelte

@@ -35,12 +35,14 @@
   import { Portal, Tooltip } from '@widgetic/design-system/components';
   import { ThumbHashImage } from "@widgetic/design-system/components";
   import { FileBrowser, setFileBrowserUploadConfig, persistentSelectStore } from '@widgetic/file-browser';
+  import { useEditorMediaLibrary } from '../../mediaLibraryContext';
   import X from '../icons/x.svelte';
   // console.log("BrowserInputController - Tooltip:", Tooltip);
   
 
   // utils imports
   import MediaManager from '../../utils/MediaManager';
+  import { queryInTreeOf } from '../../utils/shadowDom';
 
   // Static asset imports (bundled via Vite, works when imported as library)
   import icAudio from '../../assets/icons/ic-browser/audio.svg?url';
@@ -65,10 +67,17 @@
     (portalTarget instanceof HTMLElement &&
       portalTarget.id === 'props-editor-file-browser-portal');
   export let config: BrowserInputControllerProps['config'] = {};
+
+  // The media library the editor above was given (a partner's own storage, for instance), read through a getter
+  // because it reaches this component through context.
+  const getEditorMediaLibrary = useEditorMediaLibrary();
   
   // Extract allowed file types from config or default to all files
   const fileTypes = config.fileTypes || ['*'];
   
+  // The control's own element, to find the editor's panel from (see getPortalHost)
+  let controllerElement: HTMLDivElement | undefined;
+
   // Media element references for audio/video playback
   let audioElement: HTMLAudioElement | null = null;
   let videoElement: HTMLVideoElement | null = null;
@@ -166,6 +175,9 @@
   /** Only embedded iframe mode (URL params) sets upload config here; standalone uses parent +page sync. */
   function syncFileBrowserUploadConfigIfEmbedded() {
     if (typeof window === 'undefined') return;
+    // With a media library the File Browser takes its files from it and never reads the upload configuration, and the
+    // address of the page this editor sits in (which can be a partner's) is none of the editor's business.
+    if (getEditorMediaLibrary()) return;
     const params = new URLSearchParams(window.location.search);
     const apiUrl = params.get('apiUrl');
     const token = params.get('token');
@@ -187,7 +199,9 @@
   function getPortalHost(): HTMLElement | null {
     if (portalTarget instanceof HTMLElement) return portalTarget;
     if (typeof document === 'undefined') return null;
-    return document.getElementById('props-editor-file-browser-portal');
+    // Looked for in the tree this control is in: inside a module that is a shadow root, which `document` cannot see into
+    const portalHost = queryInTreeOf(controllerElement, '#props-editor-file-browser-portal');
+    return portalHost instanceof HTMLElement ? portalHost : null;
   }
 
   function setPortalHostInteractive(active: boolean) {
@@ -461,7 +475,7 @@
 </script>
 
 <!-- Main container with updated styling -->
-<div class="flex flex-col gap-2 widgetic-colors">
+<div bind:this={controllerElement} class="flex flex-col gap-2 widgetic-colors">
   <div class="flex items-center w-full relative">
     <div class="flex-1 min-w-0">
       <InputControllerHeader label={header?.label || label} helpText={header?.helpText} />
@@ -699,12 +713,17 @@
         </div>
 
         <div class="browser-input-file-browser-body flex min-h-0 flex-1 flex-col overflow-hidden">
+          <!-- With a media library the File Browser keeps nothing about this visit (the filter it was left on, the
+               folder it was left in) in the page's localStorage: that storage belongs to the page this editor sits in,
+               which can be a partner's. Without one (the Widgetic site) it remembers them, as it always did. -->
           <FileBrowser
             class="h-full min-h-0 flex-1"
             instanceId={`props-editor-browser-input-${fileBrowserFilter}`}
             initialFilter={fileBrowserFilter}
             restrictUpload={fileBrowserRestrictUpload}
             useDemoContent={false}
+            mediaLibrary={getEditorMediaLibrary()}
+            persistHistory={!getEditorMediaLibrary()}
             allowSelecting={true}
             showAddToEditor={true}
             maxSelections={1}

package/dist/components/ic/ColorPickerInputController.svelte

@@ -69,6 +69,7 @@
   import { colorNames } from '../../utils/colorNames';
   import { getColorSuggestions, getNextSuggestion, type AutocompleteResult } from '../../utils/colorAutocomplete';
   import { recentColorsUtil } from '../../utils/recentColors';
+  import { listenForScroll, lockPointerStyle } from '../../utils/shadowDom';
 
   
 
@@ -544,8 +545,10 @@
    * @param event - Scroll event
    */
   function handleScroll(event: Event) {
-    // Don't close if scrolling happens within allowed elements
-    if ((event.target as HTMLElement).closest('[data-allow-scroll="true"]')) {
+    // Don't close if scrolling happens within allowed elements. The page itself scrolling has the document as its
+    // target (it has no closest()), so only an element can be one of the allowed ones.
+    const scrollTarget = event.target;
+    if (scrollTarget instanceof Element && scrollTarget.closest('[data-allow-scroll="true"]')) {
       return;
     }
 
@@ -557,6 +560,9 @@
     }
   }
 
+  // Puts the pointer back after an opacity drag, however the drag ends (the picker can be removed in the middle of one).
+  let releaseOpacityPointerStyle: (() => void) | null = null;
+
   /**
    * Manages opacity slider interactions
    * - Handles mouse drag events
@@ -567,7 +573,12 @@
    */
   function handleOpacityMouseDown(event: MouseEvent) {
     isDragging = true;
-    document.body.style.cursor = 'grabbing';
+    // The cursor is shown on the host of the shadow root the picker is in, and on <body> only on a normal page: the
+    // <body> of a customer's page is not the editor's to change.
+    releaseOpacityPointerStyle?.();
+    releaseOpacityPointerStyle = lockPointerStyle(event.currentTarget ?? event.target, 'grabbing', {
+      blockTextSelection: false
+    });
     updateOpacity(event);
     
     const handleMouseMove = (e: MouseEvent) => {
@@ -578,7 +589,8 @@
     
     const handleMouseUp = () => {
       isDragging = false;
-      document.body.style.cursor = '';
+      releaseOpacityPointerStyle?.();
+      releaseOpacityPointerStyle = null;
       window.removeEventListener('mousemove', handleMouseMove);
       window.removeEventListener('mouseup', handleMouseUp);
     };
@@ -947,6 +959,10 @@
     }
   }
 
+  // Stops listening for scrolling (the page and, inside a module, the module's own panels: a scroll never leaves a
+  // shadow root, so a listener on the window alone does not hear about those)
+  let stopListeningForScroll: () => void = () => {};
+
   // Sets up event listeners when the component mounts
   onMount(() => {
     initializeColor();
@@ -954,17 +970,19 @@
     window.addEventListener('mousemove', handleGlobalMouseMove);
     window.addEventListener('keydown', handlePopupKeyDown);
     window.addEventListener('keyup', handlePopupKeyUp);
-    window.addEventListener('scroll', handleScroll, true);
+    stopListeningForScroll = listenForScroll(inputRef, handleScroll);
     window.addEventListener('widgetic:close-color-pickers', onCloseOtherPickers as EventListener);
   });
 
   // Cleans up event listeners when the component is destroyed
   onDestroy(() => {
+    releaseOpacityPointerStyle?.();
+    releaseOpacityPointerStyle = null;
     window.removeEventListener('mouseup', handleGlobalMouseUp);
     window.removeEventListener('mousemove', handleGlobalMouseMove);
     window.removeEventListener('keydown', handlePopupKeyDown);
     window.removeEventListener('keyup', handlePopupKeyUp);
-    window.removeEventListener('scroll', handleScroll, true);
+    stopListeningForScroll();
     window.removeEventListener('widgetic:close-color-pickers', onCloseOtherPickers as EventListener);
   });
 

package/dist/components/ic/DateFieldInputController.svelte

@@ -29,6 +29,7 @@
 <script lang="ts">
   import { onMount, tick } from 'svelte';
   import InputControllerHeader from './InputControllerHeader.svelte';
+  import { activeElementIn } from '../../utils/shadowDom';
 
   // Constants
   const MIN_DAY = 1;
@@ -311,9 +312,12 @@
     
     // Reset focused field after a short delay to allow for focus changes
     setTimeout(() => {
-      if (!document.activeElement || 
-          !(document.activeElement instanceof HTMLInputElement) || 
-          !Object.values(inputRefs).includes(document.activeElement)) {
+      // The focused element of the tree this control is in: inside a module `document.activeElement` is the module's
+      // host element, which is never one of the fields
+      const focusedElement = activeElementIn(input);
+      if (!focusedElement || 
+          !(focusedElement instanceof HTMLInputElement) || 
+          !Object.values(inputRefs).includes(focusedElement)) {
         focusedField = null;
       }
     }, 100);

package/dist/components/ic/DatePickerInputController.svelte

@@ -37,6 +37,7 @@
 <script lang="ts">
   // Svelte imports
   import { onMount, onDestroy } from 'svelte';
+  import { listenForScroll } from '../../utils/shadowDom';
 
   // Shadcn UI Components
   import { Button, Select } from '@widgetic/design-system/components';
@@ -209,19 +210,24 @@
     }
   }
 
-  // Setup scroll event listener on mount
+  // The control's own element, which says which tree (the page or a module's shadow root) to listen for scrolling in
+  let controllerElement: HTMLDivElement | undefined;
+  let stopListeningForScroll: () => void = () => {};
+
+  // Setup scroll event listener on mount (the page and, inside a module, the module's own panels: a scroll never
+  // leaves a shadow root, so a listener on the window alone does not hear about those)
   onMount(() => {
-    window.addEventListener('scroll', handleScroll, { capture: true });
+    stopListeningForScroll = listenForScroll(controllerElement, handleScroll);
   });
 
   // Cleanup scroll event listener on destroy
   onDestroy(() => {
-    window.removeEventListener('scroll', handleScroll, true);
+    stopListeningForScroll();
   });
 </script>
 
 <!-- Date Picker Container -->
-<div class="flex flex-col gap-2 widgetic-colors">
+<div bind:this={controllerElement} class="flex flex-col gap-2 widgetic-colors">
   <div class="flex items-center w-full relative">
     <div class="flex-1 min-w-0">
       <InputControllerHeader {label} />

package/dist/components/ic/DropdownInputController.svelte

@@ -31,6 +31,7 @@
    * Required for component setup and cleanup
    */
   import { onMount, onDestroy } from 'svelte';
+  import { listenForScroll } from '../../utils/shadowDom';
 
   // Local Components imports
   import { InputControllerHeader } from './index';
@@ -113,13 +114,18 @@
    * Lifecycle Hooks
    * Setup and cleanup of scroll event listeners
    */
+  // The control's own element, which says which tree (the page or a module's shadow root) to listen for scrolling in
+  // (a scroll never leaves a shadow root, so a listener on the window alone only hears about the page scrolling)
+  let controllerElement: HTMLDivElement | undefined;
+  let stopListeningForScroll: () => void = () => {};
+
   onMount(() => {
     // console.log('DropdownInputController: onMount:', value);
-    window.addEventListener('scroll', handleScroll, true);
+    stopListeningForScroll = listenForScroll(controllerElement, handleScroll);
   });
 
   onDestroy(() => {
-    window.removeEventListener('scroll', handleScroll, true);
+    stopListeningForScroll();
   });
 
   /**
@@ -147,14 +153,15 @@
   /**
    * The option label for the current selection. `value` accepts a bare string
    * or an option object; normalize once instead of re-narrowing at each read.
+   * A missing selection is the empty string, as the select expects.
    */
-  $: selectedValue = typeof value === 'string' ? value : value?.value;
+  $: selectedValue = typeof value === 'string' ? value : (value?.value ?? '');
   $: triggerContent =
     options.find((o) => o.value === selectedValue)?.label ?? defaultSelectedLabel;
 </script>
 
 <!-- Dropdown Container -->
-<div class="dropdown-ic flex flex-col gap-2 widgetic-colors">
+<div bind:this={controllerElement} class="dropdown-ic flex flex-col gap-2 widgetic-colors">
   <div class="flex items-center w-full relative">
     <div class="flex-1 min-w-0">
       <InputControllerHeader {label} />

package/dist/components/ic/FontInputController.svelte

@@ -63,6 +63,9 @@
   import FontManager, { mapGoogleVariantIdsToWeightNames } from '../../utils/FontManager';
   
   import { shouldSkipFont } from '../../utils/skipFonts';
+  import { escapeHtml, cssQuotedString } from '../../utils/htmlSafety';
+  import { acquirePortalHost, releasePortalHost, listenForScroll, queryInTreeOf } from '../../utils/shadowDom';
+  import { readEditorStorageValue, writeEditorStorageValue } from '../../utils/editorStorage';
   import type { Writable } from 'svelte/store';
 
   import { InputControllerHeader } from './index';
@@ -125,6 +128,8 @@
 
   // Font loading optimization
   let fontListContainer: HTMLElement;
+  // The control's own element: it says which tree (the page or a module's shadow root) to listen for scrolling in
+  let controllerElement: HTMLDivElement | undefined;
   let familyTriggerEl: HTMLDivElement | undefined;
   let familyPopoverStyle = '';
   let familyPopoverSide: 'top' | 'bottom' = 'bottom';
@@ -191,6 +196,15 @@
   // Add a timeout to track long-running initial loads
   let initialLoadTimeout: ReturnType<typeof setTimeout> | null = null;
 
+  /**
+   * The sticky header of the font list. It is looked up in the tree the list lives in (inside a module that is a
+   * shadow root, which `document.querySelector` cannot see into), and the id is escaped so that one with dots or
+   * brackets in it is found too.
+   */
+  function findStickyHeader(): Element | null {
+    return queryInTreeOf(fontListContainer, `#${CSS.escape(`font-header-${controllerId}`)}`);
+  }
+
   // Function to update scroll state
   function updateScrollState() {
     if (fontListContainer) {
@@ -199,7 +213,7 @@
       
       // If we're transitioning from scrolled to not scrolled, remove transition
       if (wasScrolled && !isScrolled) {
-        const stickyHeader = document.querySelector(`#font-header-${controllerId}`);
+        const stickyHeader = findStickyHeader();
         if (stickyHeader) {
           stickyHeader.classList.remove('transition-border');
           // Force a reflow to ensure the transition class removal takes effect
@@ -207,7 +221,7 @@
         }
       } else if (!wasScrolled && isScrolled) {
         // Add transition class when starting to scroll
-        const stickyHeader = document.querySelector(`#font-header-${controllerId}`);
+        const stickyHeader = findStickyHeader();
         if (stickyHeader) {
           stickyHeader.classList.add('transition-border');
         }
@@ -252,15 +266,18 @@
 
   let fontPickerReadyAt = 0;
 
+  /**
+   * The layer the font popovers are drawn in: one of their own, above everything else, in the tree this input lives
+   * in. On a page that is a node at the end of the body; inside a module it is a node in the module's portal layer,
+   * because a popover drawn in the customer's body would lose the module's styles and leave a node behind in the
+   * customer's page. The input has to be on the page to tell which tree it is in, so until it is (a short moment,
+   * and a popover is never open by then) the popovers go where the design system's portal configuration sends them.
+   */
+  let fontPickerPortalHost: HTMLElement | undefined;
+
   function ensureFontPickerPortal() {
-    if (!browser) return;
-    const portalId = 'widgetic-font-picker-portal';
-    if (document.getElementById(portalId)) return;
-    const host = document.createElement('div');
-    host.id = portalId;
-    host.style.position = 'relative';
-    host.style.zIndex = '100000000';
-    document.body.appendChild(host);
+    if (!browser || fontPickerPortalHost) return;
+    fontPickerPortalHost = acquirePortalHost(familyTriggerEl, 'widgetic-font-picker-portal') ?? undefined;
   }
 
   onMount(async () => {
@@ -277,13 +294,13 @@
         }
         
         // Load saved filter
-        const savedFilter = localStorage.getItem(FONT_FILTER_KEY(controllerId));
+        const savedFilter = readEditorStorageValue(FONT_FILTER_KEY(controllerId));
         if (savedFilter) {
           currentFilter = savedFilter as FilterType;
         }
 
         // Load saved weight
-        const savedWeight = localStorage.getItem(FONT_WEIGHT_KEY(controllerId));
+        const savedWeight = readEditorStorageValue(FONT_WEIGHT_KEY(controllerId));
         if (savedWeight) {
           selectedWeight = savedWeight;
         }
@@ -785,7 +802,7 @@
 
         selectedWeight = `${controllerId}-${newWeight}`;
         if (browser) {
-          localStorage.setItem(FONT_WEIGHT_KEY(controllerId), selectedWeight);
+          writeEditorStorageValue(FONT_WEIGHT_KEY(controllerId), selectedWeight);
         }
 
         // Load the full font when selected
@@ -847,7 +864,7 @@
     if (!searchTerm && value) {
       lastActiveFilter = currentFilter;
       currentFilter = 'All';
-      localStorage.setItem(FONT_FILTER_KEY(controllerId), 'All');
+      writeEditorStorageValue(FONT_FILTER_KEY(controllerId), 'All');
     }
     
     // Apply filtering with the new search term
@@ -1059,7 +1076,7 @@
         currentFilter = filter;
         
         if (browser) {
-            localStorage.setItem(FONT_FILTER_KEY(controllerId), filter);
+            writeEditorStorageValue(FONT_FILTER_KEY(controllerId), filter);
         }
         
         if (fontManagerInstance) {
@@ -1477,7 +1494,8 @@
    * @param term Search term
    * @returns HTML string with highlighted match
    * 
-   * Note: Returns safe HTML as we're only wrapping with <strong>
+   * Note: The result goes to {@html}, so every piece of the font name is escaped as it is put in (a name such as
+   * `<img src=x onerror=...>` must show as text, not run in the page the editor is on).
    */
   function highlightMatch(name: string, term: string) {
     // Check if this font is the selected one
@@ -1486,8 +1504,8 @@
     if (!term) {
       // If no search term, just return the name with appropriate color
       return isSelected 
-        ? `<span style="color: white">${name}</span>` 
-        : `<span style="color: hsl(var(--grey7))">${name}</span>`;
+        ? `<span style="color: white">${escapeHtml(name)}</span>` 
+        : `<span style="color: hsl(var(--grey7))">${escapeHtml(name)}</span>`;
     }
     
     const nameLower = name.toLowerCase();
@@ -1496,9 +1514,9 @@
     // If the name contains the search term, highlight that part
     if (nameLower.includes(termLower)) {
       const index = nameLower.indexOf(termLower);
-      const beforeMatch = name.slice(0, index);
-      const match = name.slice(index, index + termLower.length);
-      const afterMatch = name.slice(index + termLower.length);
+      const beforeMatch = escapeHtml(name.slice(0, index));
+      const match = escapeHtml(name.slice(index, index + termLower.length));
+      const afterMatch = escapeHtml(name.slice(index + termLower.length));
       
       if (isSelected) {
         // For selected items: text is white, highlight is grey7
@@ -1511,8 +1529,8 @@
     
     // Default case - just return the name with appropriate color
     return isSelected
-      ? `<span style="color: white">${name}</span>`
-      : `<span style="color: hsl(var(--grey7))">${name}</span>`;
+      ? `<span style="color: white">${escapeHtml(name)}</span>`
+      : `<span style="color: hsl(var(--grey7))">${escapeHtml(name)}</span>`;
   }
 
   /**
@@ -1545,28 +1563,31 @@
     }
   }
 
-  // Update onMount to add scroll and touch listeners with passive option
+  // Stops listening for scrolling (the page and, inside a module, the module's own panels: a scroll never leaves a
+  // shadow root, so a listener on the window alone does not hear about those)
+  let stopListeningForScroll: () => void = () => {};
+
+  // Update onMount to add the scroll listener with passive option
   onMount(() => {
     // Add scroll listener with passive option
-    window.addEventListener('scroll', handleGlobalScroll, {
-      capture: true,
-      passive: true
-    });
+    stopListeningForScroll = listenForScroll(controllerElement, handleGlobalScroll, { passive: true });
     window.addEventListener('resize', handleFamilyPopoverViewportChange);
     window.visualViewport?.addEventListener('resize', handleFamilyPopoverViewportChange);
 
-    // Add touch listeners with passive option
-    window.addEventListener('touchstart', () => {}, { passive: true });
-    window.addEventListener('touchmove', () => {}, { passive: true });
+    // (Two touchstart/touchmove listeners that did nothing used to be added to the window here, and could never be
+    // removed: each input left two more on the customer's page every time it was shown. They did nothing, so they are
+    // gone.)
   });
 
   // Update onDestroy to remove all listeners
   onDestroy(() => {
-    window.removeEventListener('scroll', handleGlobalScroll, true);
+    stopListeningForScroll();
     window.removeEventListener('resize', handleFamilyPopoverViewportChange);
     window.visualViewport?.removeEventListener('resize', handleFamilyPopoverViewportChange);
-    window.removeEventListener('touchstart', () => {});
-    window.removeEventListener('touchmove', () => {});
+
+    // Give the popover layer back (the last input to leave removes it from the page).
+    releasePortalHost(fontPickerPortalHost);
+    fontPickerPortalHost = undefined;
     
     if (fontObserver) {
       fontObserver.disconnect();
@@ -1648,7 +1669,7 @@
   function handleWeightSelect(weight: string) {
     selectedWeight = `${controllerId}-${weight}`;
     if (browser) {
-      localStorage.setItem(FONT_WEIGHT_KEY(controllerId), selectedWeight);
+      writeEditorStorageValue(FONT_WEIGHT_KEY(controllerId), selectedWeight);
     }
     const current = coerceFontValue(value);
     if (onChange) {
@@ -1674,7 +1695,8 @@
     }
 
     // Ensure the selected item is visible
-    const selectedElement = fontListContainer?.querySelector(`[data-font="${filteredFonts[activeSearchIndex].family}"]`);
+    // (The family goes through CSS.escape: a name with a quote in it must not end the selector.)
+    const selectedElement = fontListContainer?.querySelector(`[data-font="${CSS.escape(filteredFonts[activeSearchIndex].family)}"]`);
     selectedElement?.scrollIntoView({ block: 'nearest' });
   }
 
@@ -1686,14 +1708,16 @@
 
   // Functions for RecentItemsSection
   function renderFontItem(font: FontItem) {
+    // The result is used as HTML by RecentItemsSection: the family is quoted for CSS and escaped for HTML where it is
+    // a rule, and escaped for HTML where it is the text.
     return {
       html: `
         <div class="flex items-center flex-1 min-w-0">
           <span 
             class="text-[24px] truncate"
-            style="font-family: '${font.family}', sans-serif; font-display: swap; color: inherit; -webkit-text-fill-color: currentColor;"
+            style="font-family: ${escapeHtml(cssQuotedString(font.family))}, sans-serif; font-display: swap; color: inherit; -webkit-text-fill-color: currentColor;"
           >
-            ${font.family}
+            ${escapeHtml(font.family)}
           </span>
         </div>
       `
@@ -1722,7 +1746,7 @@
 </script>
 
 <!-- Dual IC: header zone always on the left (even if label is empty); 185px inputs on the right. -->
-<div class="font-ic flex flex-col gap-2 w-full min-w-0 widgetic-colors {className}" style={style}>
+<div bind:this={controllerElement} class="font-ic flex flex-col gap-2 w-full min-w-0 widgetic-colors {className}" style={style}>
   <div class="font-family-row flex items-center justify-between w-full min-w-0 gap-2" style="min-height: 48px;">
         <div class="font-family-label-ct flex-1 min-w-0">
           <InputControllerHeader label={label || ''} />
@@ -1774,7 +1798,7 @@
             >
               <span
                 class="truncate flex-1 text-left subtext text-grey7"
-                style="font-family: '{resolvedFont?.family || 'system-ui'}', sans-serif; font-display: swap;"
+                style="font-family: {cssQuotedString(resolvedFont?.family || 'system-ui')}, sans-serif; font-display: swap;"
               >
                 {resolvedFont?.family || "Select font..."}
               </span>
@@ -1785,7 +1809,7 @@
               collisionPadding={12}
               side={familyPopoverSide}
               sideOffset={4}
-              portalProps={{ to: '#widgetic-font-picker-portal' }}
+              portalProps={{ to: fontPickerPortalHost }}
               class="font-input-popover !p-0 widgetic-colors widgetic-radius rounded-medium modal-shadow border border-grey2"
               style={familyPopoverStyle}
             >
@@ -1830,7 +1854,7 @@
                       // Restore the previous filter when clearing search
                       currentFilter = lastActiveFilter;
                       if (browser) {
-                        localStorage.setItem(FONT_FILTER_KEY(controllerId), lastActiveFilter);
+                        writeEditorStorageValue(FONT_FILTER_KEY(controllerId), lastActiveFilter);
                       }
                       
                       // ... rest of your onClear code ...
@@ -1932,7 +1956,7 @@
                                 <Check class="mr-2 h-6 w-6 flex-shrink-0 {isFontSelected(font) ? 'text-white' : 'text-sage-green opacity-0'}"/>
                                 <span 
                                   class="text-[24px] truncate {index === activeSearchIndex && searchTerm ? 'font-medium' : ''}"
-                                  style="font-family: '{font.family}', sans-serif; font-display: swap; color: inherit; -webkit-text-fill-color: currentColor;"
+                                  style="font-family: {cssQuotedString(font.family)}, sans-serif; font-display: swap; color: inherit; -webkit-text-fill-color: currentColor;"
                                 >
                                   {@html highlightMatch(font.family, searchTerm)}
                                 </span>
@@ -1991,7 +2015,7 @@
               </span>
               <IconCaretDownFilled class="w-5 h-5 shrink-0 text-grey5 group-hover:text-grey7" />
             </Popover.Trigger>
-            <Popover.Content class="font-input-popover p-0 w-[150px]" portalProps={{ to: '#widgetic-font-picker-portal' }}>
+            <Popover.Content class="font-input-popover p-0 w-[150px]" portalProps={{ to: fontPickerPortalHost }}>
               <Command.Root>
                 <Command.List>
                   <Command.Group>

package/dist/components/ic/InputControllerHeader.svelte

@@ -2,6 +2,9 @@
 // Svelte imports
 import { onDestroy, onMount } from 'svelte';
 
+// Shared listener for "the user is scrolling" (one per tree, not one per header)
+import { onScrollActivity } from '../../utils/scrollActivity';
+
 // Shadcn UI Components from design-system
 import { Tooltip, Portal } from '@widgetic/design-system/components';
 // console.log("InputControllerHeader - Tooltip:", Tooltip);
@@ -58,23 +61,23 @@ function handleMouseLeave() {
   clearTimeout(tooltipTimeout);
 }
 
+let headerElement: HTMLElement | undefined;
+let stopListeningForScrolling: () => void = () => {};
+
 onMount(() => {
-  // Add listeners to both window and all scrollable parents
-  window.addEventListener('scroll', handleScroll, { capture: true, passive: true });
-  document.addEventListener('wheel', handleScroll, { capture: true, passive: true });
-  document.addEventListener('touchmove', handleScroll, { capture: true, passive: true });
+  // The listeners for scrolling are shared by all the headers in the same tree (the page or the module's shadow
+  // root): every header used to add three of its own to the window and the document.
+  stopListeningForScrolling = onScrollActivity(headerElement, handleScroll);
 });
 
 onDestroy(() => {
-  window.removeEventListener('scroll', handleScroll, { capture: true });
-  document.removeEventListener('wheel', handleScroll, { capture: true });
-  document.removeEventListener('touchmove', handleScroll, { capture: true });
+  stopListeningForScrolling();
   clearTimeout(scrollTimeout);
   clearTimeout(tooltipTimeout);
 });
 </script>
 
-<div class="input-controller-header widgetic-colors {className ? className + ' ' : ''}flex group" {style}>
+<div bind:this={headerElement} class="input-controller-header widgetic-colors {className ? className + ' ' : ''}flex group" {style}>
   <div class="header-label-ct flex-1 min-w-0 flex items-center h-full">
     <div class="tooltip-group flex items-center max-w-full" style="gap: 8px;">
       <span class="subtext cursor-default select-none truncate !text-base" style="color: hsl(var(--grey5));">

package/dist/components/ic/NumberInputController.svelte

@@ -203,11 +203,13 @@
    * Blur Event Handler
    * Validates and normalizes input when focus is lost
    */
-  function handleBlur() {
+  function handleBlur(event: FocusEvent) {
     // console.log('handleBlur:', { value, isEditing, min, max });
     
     isEditing = false;
-    const input = document.getElementById('number-input') as HTMLInputElement;
+    // The input that lost the focus. (It used to be looked up by the id "number-input" in the whole document, which is
+    // another input when there are several, and nothing inside a module's shadow root.)
+    const input = event.currentTarget as HTMLInputElement;
     
     // Handle empty or invalid input
     if (input.value === '' || input.value === '-') {