@widgetic/editor 4.0.9 → 4.0.11

package/dist/utils/FontManager.js

@@ -79,6 +79,11 @@ class FontManager {
     static instance = null;
     // Track loaded and pending fonts to prevent duplicates
     loadedFonts = new Set();
+    // What this manager added to the page's <head>, to take away again when the editor leaves the page
+    addedHeadElements = new Set();
+    // True from the moment the editor leaves the page until a new one asks for the manager: a stylesheet that was still
+    // on its way is not added to a page the editor is no longer on
+    pageWasReleased = false;
     // Map of intersection observers keyed by container ID
     observers = new Map();
     // Debounce timer for scroll events
@@ -105,11 +110,9 @@ class FontManager {
     // Controls how long we keep the font list in the durable L1 store
     static CACHE_DURATION = 24 * 60 * 60 * 1000; // 24 hours
     static LOADED_FONTS_KEY = 'fonts.loaded';
-    // Legacy localStorage keys read once for migration
-    static LEGACY_CACHE_KEY = 'google_fonts_cache';
-    static LEGACY_LOADED_FONTS_KEY = 'loaded_fonts_cache';
-    // Controls how long browsers should cache the actual font files and stylesheets
-    static CACHE_CONTROL = 'public, max-age=31536000'; // 1 year
+    // The old localStorage copies (`google_fonts_cache`, `loaded_fonts_cache`) are no longer read or removed: the editor
+    // runs in customers' pages, whose own localStorage keys it must not touch, and the durable store above has been the
+    // source for long enough that the worst case is one fresh download of the catalog.
     // Add new property to store visible fonts
     visibleFonts = new Set();
     static initialPreloadComplete = false;
@@ -257,6 +260,8 @@ class FontManager {
             FontManager.instance.apiKey = trimmedKey;
             FontManager.instance.catalogFetchPromise = null;
         }
+        // An editor that asks for the manager is on the page: its fonts may be added again
+        FontManager.instance.pageWasReleased = false;
         // Always await in-flight init — concurrent callers used to return mid-initialize.
         if (FontManager.initializationPromise) {
             await FontManager.initializationPromise;
@@ -370,24 +375,11 @@ class FontManager {
         return this.preInitializedObservers.get('default') || null;
     }
     /**
-     * Loads previously cached fonts from the durable L1 store (legacy localStorage fallback)
+     * Loads previously cached fonts from the durable L1 store
      */
     async loadCachedFonts() {
         try {
-            let cachedLoadedFonts = await readKvValue(FontManager.LOADED_FONTS_KEY);
-            if (!cachedLoadedFonts) {
-                const legacyRaw = localStorage.getItem(FontManager.LEGACY_LOADED_FONTS_KEY);
-                if (legacyRaw) {
-                    try {
-                        cachedLoadedFonts = JSON.parse(legacyRaw);
-                        await writeKvValue(FontManager.LOADED_FONTS_KEY, cachedLoadedFonts);
-                    }
-                    catch {
-                        /* ignore malformed legacy data */
-                    }
-                    localStorage.removeItem(FontManager.LEGACY_LOADED_FONTS_KEY);
-                }
-            }
+            const cachedLoadedFonts = await readKvValue(FontManager.LOADED_FONTS_KEY);
             if (cachedLoadedFonts && Array.isArray(cachedLoadedFonts)) {
                 // Only load the first fonts initially
                 const initialFonts = cachedLoadedFonts.slice(0, FontManager.initialFontNumber);
@@ -420,18 +412,10 @@ class FontManager {
         try {
             const fontsToCache = Array.from(this.loadedFonts);
             void writeKvValue(FontManager.LOADED_FONTS_KEY, fontsToCache);
-            // Add cache control headers for font files
-            const styleSheets = document.querySelectorAll('link[href*="fonts.googleapis.com"]');
-            styleSheets.forEach(sheet => {
-                if (sheet instanceof HTMLLinkElement) {
-                    sheet.setAttribute('crossorigin', 'anonymous');
-                    // Add cache control header through meta tag since we can't directly set headers
-                    const meta = document.createElement('meta');
-                    meta.setAttribute('http-equiv', 'Cache-Control');
-                    meta.setAttribute('content', FontManager.CACHE_CONTROL);
-                    document.head.appendChild(meta);
-                }
-            });
+            // (This used to go through every Google Fonts stylesheet link of the page, the page's own included, to set
+            // `crossorigin` on it and to add a <meta http-equiv="Cache-Control"> to the page's head for each one. A stylesheet
+            // that has been fetched is not fetched again because of an attribute, no browser reads that meta, and both were
+            // changes to a page that is not the editor's, so they are gone.)
         }
         catch (error) {
             console.error('❌ [FontManager] Error saving loaded fonts:', error);
@@ -465,6 +449,42 @@ class FontManager {
         }
         return this.completeFontList.some(font => font.family.toLowerCase() === family.toLowerCase());
     }
+    /**
+     * Puts an element in the page's <head> and remembers it, so that it can be taken away again
+     * ({@link removeAddedHeadElements}): the editor can be on somebody else's page, which it should leave as it found it.
+     */
+    addToHead(element) {
+        // The editor has left the page (a font that was on its way arrives late): nothing is added to it any more
+        if (this.pageWasReleased)
+            return;
+        document.head.appendChild(element);
+        this.addedHeadElements.add(element);
+    }
+    /**
+     * Takes out of the page's <head> everything this manager put there (the stylesheets of the fonts, their preload
+     * hints and the connection hint), and forgets which fonts were loaded, because they are not any more. The next
+     * font to be asked for puts its stylesheet back. The page's own links are never touched: only what was added here
+     * is removed.
+     */
+    removeAddedHeadElements() {
+        try {
+            this.pageWasReleased = true;
+            for (const element of this.addedHeadElements)
+                element.remove();
+            this.addedHeadElements.clear();
+            this.loadedFonts.clear();
+        }
+        catch (error) {
+            console.error('❌ [FontManager] Error removing the font stylesheets from the page:', error);
+        }
+    }
+    /**
+     * Leaves the page as the editor found it as far as fonts go. Meant for when the editor is taken away; does nothing
+     * if no font was ever asked for.
+     */
+    static releasePageResources() {
+        FontManager.instance?.removeAddedHeadElements();
+    }
     /**
      * Inserts a font stylesheet into the document
      * @param family - Font family name
@@ -487,7 +507,7 @@ class FontManager {
                 preconnect.rel = 'preconnect';
                 preconnect.href = 'https://fonts.gstatic.com';
                 preconnect.crossOrigin = 'anonymous';
-                document.head.appendChild(preconnect);
+                this.addToHead(preconnect);
             }
             // Build URL based on whether we want subset or full font
             const baseUrl = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(family)}:wght@400&display=swap`;
@@ -504,15 +524,10 @@ class FontManager {
                 link.setAttribute('data-full-font', 'true');
             }
             // Add to document
-            document.head.appendChild(link);
-            // Add preload hint with correct attributes after stylesheet
-            const preloadLink = document.createElement('link');
-            preloadLink.rel = 'preload';
-            preloadLink.as = 'style'; // Changed from 'font' to 'style'
-            preloadLink.href = finalUrl;
-            preloadLink.crossOrigin = 'anonymous';
-            preloadLink.setAttribute('onload', "this.onload=null;this.rel='stylesheet'");
-            document.head.appendChild(preloadLink);
+            this.addToHead(link);
+            // (A preload hint for the same address used to follow here, with an `onload` attribute that turned it into a
+            // second stylesheet. It added nothing to the stylesheet link above, and a page with a strict Content Security
+            // Policy blocks and reports that inline handler, so it is gone.)
             // Wait for stylesheet to load
             await new Promise((resolve, reject) => {
                 link.onload = () => resolve();
@@ -662,23 +677,11 @@ class FontManager {
         }
     }
     /**
-     * Gets font list from the durable L1 cache (legacy localStorage fallback)
+     * Gets font list from the durable L1 cache
      */
     async getFontListFromCache() {
         try {
-            let cache = await readKvValue(FontManager.CACHE_KEY, FontManager.CACHE_DURATION);
-            if (!cache) {
-                const legacyRaw = localStorage.getItem(FontManager.LEGACY_CACHE_KEY);
-                if (legacyRaw) {
-                    try {
-                        cache = JSON.parse(legacyRaw);
-                    }
-                    catch {
-                        /* ignore malformed legacy data */
-                    }
-                    localStorage.removeItem(FontManager.LEGACY_CACHE_KEY);
-                }
-            }
+            const cache = await readKvValue(FontManager.CACHE_KEY, FontManager.CACHE_DURATION);
             if (!cache)
                 return null;
             // Check if cache is expired
@@ -1040,12 +1043,8 @@ class FontManager {
             fontFace: false
         };
         try {
-            // Check the durable loaded-fonts registry (legacy localStorage fallback)
-            let cachedFonts = await readKvValue(FontManager.LOADED_FONTS_KEY);
-            if (!cachedFonts) {
-                const legacyRaw = localStorage.getItem(FontManager.LEGACY_LOADED_FONTS_KEY);
-                cachedFonts = legacyRaw ? JSON.parse(legacyRaw) : [];
-            }
+            // Check the durable loaded-fonts registry
+            const cachedFonts = await readKvValue(FontManager.LOADED_FONTS_KEY);
             const loadedFonts = Array.isArray(cachedFonts) ? cachedFonts : [];
             const isCached = loadedFonts.includes(family);
             // Check if stylesheet exists in DOM
@@ -1072,12 +1071,8 @@ class FontManager {
      */
     async getBrowserCachedFonts() {
         try {
-            // Get fonts from the durable loaded-fonts registry (legacy fallback)
+            // Get fonts from the durable loaded-fonts registry
             let cachedFonts = await readKvValue(FontManager.LOADED_FONTS_KEY);
-            if (!cachedFonts) {
-                const legacyRaw = localStorage.getItem(FontManager.LEGACY_LOADED_FONTS_KEY);
-                cachedFonts = legacyRaw ? JSON.parse(legacyRaw) : [];
-            }
             cachedFonts = Array.isArray(cachedFonts) ? cachedFonts : [];
             // console.log('📦 [FontManager] Fonts in durable registry:', cachedFonts);
             // Verify each font has its stylesheet in the DOM

package/dist/utils/VectorManager.d.ts

@@ -35,7 +35,6 @@ declare class VectorManager {
     private initialVectorsLoaded;
     private allVectorsLoaded;
     private cachedVectorList;
-    private static readonly CACHE_KEY;
     private static readonly CACHE_DURATION;
     private static readonly LOADED_VECTORS_KEY;
     private static readonly CACHE_CONTROL;

package/dist/utils/VectorManager.js

@@ -1,4 +1,5 @@
 import { vectorUtils, vectorCategories } from "./vectorUtils";
+import { readEditorStorageValue, writeEditorStorageValue } from "./editorStorage";
 class VectorManager {
     // Debug configuration
     static DEBUG_MODE = false;
@@ -17,9 +18,11 @@ class VectorManager {
     allVectorsLoaded = false;
     cachedVectorList = [];
     // Cache configuration
-    static CACHE_KEY = 'svg_vectors_cache';
+    // (The vector list used to be kept in localStorage under `svg_vectors_cache`; that key is no longer read or removed,
+    // because the editor runs in customers' pages whose own keys it must not touch.)
     // Controls how long we keep the vector list in browser's localStorage
     static CACHE_DURATION = 24 * 60 * 60 * 1000; // 24 hours
+    // Stored in the editor's own corner of localStorage (see editorStorage.ts), not under a key the customer's page may use.
     static LOADED_VECTORS_KEY = 'loaded_vectors_cache';
     // Controls how long browsers should cache the actual vector files
     static CACHE_CONTROL = 'public, max-age=31536000'; // 1 year
@@ -218,7 +221,7 @@ class VectorManager {
      */
     async getBrowserCachedVectors() {
         try {
-            const cachedVectorsList = localStorage.getItem(VectorManager.LOADED_VECTORS_KEY);
+            const cachedVectorsList = readEditorStorageValue(VectorManager.LOADED_VECTORS_KEY);
             const cachedVectors = cachedVectorsList ? JSON.parse(cachedVectorsList) : [];
             // console.log('📦 [VectorManager] Vectors in localStorage:', cachedVectors);
             // Verify each vector exists in the DOM/cache
@@ -247,9 +250,9 @@ class VectorManager {
     saveLoadedVectors() {
         try {
             const vectorsToCache = Array.from(this.loadedVectors);
-            localStorage.setItem(VectorManager.LOADED_VECTORS_KEY, JSON.stringify(vectorsToCache));
+            writeEditorStorageValue(VectorManager.LOADED_VECTORS_KEY, JSON.stringify(vectorsToCache));
             // Verify the save operation
-            const savedData = localStorage.getItem(VectorManager.LOADED_VECTORS_KEY);
+            const savedData = readEditorStorageValue(VectorManager.LOADED_VECTORS_KEY);
             // console.log('💾 [VectorManager] Vector cache status:', {
             //   savedVectors: vectorsToCache,
             //   verifiedCache: savedData ? JSON.parse(savedData) : null,
@@ -306,13 +309,8 @@ class VectorManager {
      * Saves vector list to cache (avoids writing 1.2MB JSON to localStorage)
      */
     saveVectorListToCache(vectors) {
-        try {
-            // Remove legacy large JSON from localStorage if present to free storage quota
-            localStorage.removeItem(VectorManager.CACHE_KEY);
-        }
-        catch (error) {
-            // Ignore storage errors
-        }
+        // Nothing to save: the list is not written to localStorage. (This used to remove the large legacy JSON that an
+        // earlier version stored under `svg_vectors_cache`; the editor no longer touches keys it did not prefix itself.)
     }
     /**
      * Verifies if a vector is actually cached in the browser
@@ -326,7 +324,7 @@ class VectorManager {
         };
         try {
             // Check if vector is in localStorage
-            const cachedVectors = localStorage.getItem(VectorManager.LOADED_VECTORS_KEY);
+            const cachedVectors = readEditorStorageValue(VectorManager.LOADED_VECTORS_KEY);
             const loadedVectors = cachedVectors ? JSON.parse(cachedVectors) : [];
             const isCached = loadedVectors.includes(name);
             // Find vector URL

package/dist/utils/editorStorage.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The editor's own corner of the browser's localStorage.
+ *
+ * The editor can run inside a customer's page, and a page shares its localStorage with everything on it. A key such as
+ * `recentColors` or `recent_fonts` is as likely to be the customer's own as the editor's: reading it would take the
+ * customer's data for the editor's, writing it would overwrite theirs. So every key the editor uses starts with
+ * `widgetic:editor:`, and the editor only reads, writes and removes keys that do.
+ *
+ * Storage can also be unavailable (a browser setting, a private window, a frame without storage access) or full. None
+ * of that may stop the editor, so a failure is reported once and the call answers as if nothing were stored.
+ */
+export declare const EDITOR_STORAGE_PREFIX = "widgetic:editor:";
+/** What was stored under `key`, or null when nothing was (or storage is not usable). */
+export declare function readEditorStorageValue(key: string): string | null;
+/** Stores `value` under `key`. Answers whether it was stored. */
+export declare function writeEditorStorageValue(key: string, value: string): boolean;
+/** Forgets what was stored under `key`. */
+export declare function removeEditorStorageValue(key: string): void;
+/**
+ * Forgets everything the editor stored under a key that begins with `keyStart`, and nothing else: the customer's keys
+ * stay, even those with the same text in them. Answers how many were forgotten.
+ */
+export declare function removeEditorStorageValuesStartingWith(keyStart: string): number;

package/dist/utils/editorStorage.js

@@ -0,0 +1,95 @@
+/**
+ * The editor's own corner of the browser's localStorage.
+ *
+ * The editor can run inside a customer's page, and a page shares its localStorage with everything on it. A key such as
+ * `recentColors` or `recent_fonts` is as likely to be the customer's own as the editor's: reading it would take the
+ * customer's data for the editor's, writing it would overwrite theirs. So every key the editor uses starts with
+ * `widgetic:editor:`, and the editor only reads, writes and removes keys that do.
+ *
+ * Storage can also be unavailable (a browser setting, a private window, a frame without storage access) or full. None
+ * of that may stop the editor, so a failure is reported once and the call answers as if nothing were stored.
+ */
+export const EDITOR_STORAGE_PREFIX = 'widgetic:editor:';
+/** The kinds of failure already reported, so that each is reported once however often it happens. */
+const reportedFailures = new Set();
+function reportFailureOnce(kind, error) {
+    if (reportedFailures.has(kind))
+        return;
+    reportedFailures.add(kind);
+    console.warn(`[editorStorage] The browser's storage is not usable (${kind}); the editor goes on without it:`, error);
+}
+/** The browser's localStorage, or nothing where there is none (a server) or where the browser refuses access to it. */
+function getBrowserStorage() {
+    try {
+        return typeof localStorage === 'undefined' ? null : localStorage;
+    }
+    catch (error) {
+        // Even looking at `localStorage` throws when the browser blocks storage for the page.
+        reportFailureOnce('blocked', error);
+        return null;
+    }
+}
+/** What was stored under `key`, or null when nothing was (or storage is not usable). */
+export function readEditorStorageValue(key) {
+    const storage = getBrowserStorage();
+    if (!storage)
+        return null;
+    try {
+        return storage.getItem(EDITOR_STORAGE_PREFIX + key);
+    }
+    catch (error) {
+        reportFailureOnce('read', error);
+        return null;
+    }
+}
+/** Stores `value` under `key`. Answers whether it was stored. */
+export function writeEditorStorageValue(key, value) {
+    const storage = getBrowserStorage();
+    if (!storage)
+        return false;
+    try {
+        storage.setItem(EDITOR_STORAGE_PREFIX + key, value);
+        return true;
+    }
+    catch (error) {
+        reportFailureOnce('write', error);
+        return false;
+    }
+}
+/** Forgets what was stored under `key`. */
+export function removeEditorStorageValue(key) {
+    const storage = getBrowserStorage();
+    if (!storage)
+        return;
+    try {
+        storage.removeItem(EDITOR_STORAGE_PREFIX + key);
+    }
+    catch (error) {
+        reportFailureOnce('remove', error);
+    }
+}
+/**
+ * Forgets everything the editor stored under a key that begins with `keyStart`, and nothing else: the customer's keys
+ * stay, even those with the same text in them. Answers how many were forgotten.
+ */
+export function removeEditorStorageValuesStartingWith(keyStart) {
+    const storage = getBrowserStorage();
+    if (!storage)
+        return 0;
+    try {
+        const fullKeyStart = EDITOR_STORAGE_PREFIX + keyStart;
+        // Collected first: removing a key while walking the keys would skip the one that moves into its place.
+        const keysToRemove = [];
+        for (let index = 0; index < storage.length; index += 1) {
+            const key = storage.key(index);
+            if (key !== null && key.startsWith(fullKeyStart))
+                keysToRemove.push(key);
+        }
+        keysToRemove.forEach((key) => storage.removeItem(key));
+        return keysToRemove.length;
+    }
+    catch (error) {
+        reportFailureOnce('remove', error);
+        return 0;
+    }
+}

package/dist/utils/fontUtils.js

@@ -1,4 +1,5 @@
 import { writable } from 'svelte/store';
+import { readEditorStorageValue, writeEditorStorageValue } from './editorStorage';
 // Define our category types with proper typing
 export const fontCategories = {
     // Google Fonts categories to our categories mapping
@@ -69,6 +70,7 @@ export const fontCategories = {
         return inferredCategory;
     }
 };
+// Stored in the editor's own corner of localStorage (see editorStorage.ts), not under a key the customer's page may use.
 const RECENT_FONTS_KEY = 'recent_fonts';
 const MAX_RECENT_FONTS = 3;
 // Add store for recent fonts
@@ -76,7 +78,7 @@ export const recentFontsStore = writable([]);
 export const fontUtils = {
     getRecentFonts() {
         try {
-            const stored = localStorage.getItem(RECENT_FONTS_KEY);
+            const stored = readEditorStorageValue(RECENT_FONTS_KEY);
             return stored ? JSON.parse(stored) : [];
         }
         catch (error) {
@@ -95,7 +97,7 @@ export const fontUtils = {
                 },
                 ...filteredFonts
             ].slice(0, MAX_RECENT_FONTS);
-            localStorage.setItem(RECENT_FONTS_KEY, JSON.stringify(newRecentFonts));
+            writeEditorStorageValue(RECENT_FONTS_KEY, JSON.stringify(newRecentFonts));
             recentFontsStore.set(newRecentFonts);
             return newRecentFonts;
         }
@@ -108,7 +110,7 @@ export const fontUtils = {
         try {
             const recentFonts = this.getRecentFonts();
             const filteredFonts = recentFonts.filter(f => f.family !== family);
-            localStorage.setItem(RECENT_FONTS_KEY, JSON.stringify(filteredFonts));
+            writeEditorStorageValue(RECENT_FONTS_KEY, JSON.stringify(filteredFonts));
             return filteredFonts;
         }
         catch (error) {

package/dist/utils/htmlSafety.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Text from outside the editor (a file's name, a font's name, a label in a widget's schema, what a person typed) must
+ * never reach the page as markup or as style rules. The editor can run inside a customer's own page, where a name like
+ * `x" onerror="steal()` that breaks out of an attribute runs with the customer page's rights.
+ *
+ * Svelte's `{text}` and `attribute={value}` already escape for HTML. These helpers are for the places that build HTML
+ * as a string for `{@html ...}`, where nothing is escaped unless it is done here, on every piece, as it goes in, and
+ * for the places that put a name into a CSS rule, where HTML escaping does not help at all.
+ */
+/** `text` as it must be written between tags or inside a quoted attribute value. Anything but text becomes its string. */
+export declare function escapeHtml(text: unknown): string;
+/**
+ * `text` as a quoted CSS string (`'Open Sans'`), whatever it contains. A font family name goes into a rule like
+ * `font-family: 'Open Sans', sans-serif`; a name such as `x'; background: url(//evil/a)` would otherwise end the string
+ * and add rules of its own, and escaping it for HTML does not stop that (the HTML parser turns `'` back into the
+ * quote). Backslashes and single quotes are escaped; line breaks and other control characters, which end a CSS string,
+ * become spaces. The name still reaches the browser as the same name, so it matches the font that was loaded under it.
+ *
+ * When the result goes into an HTML attribute, escape it for HTML as well (`escapeHtml(cssQuotedString(name))`).
+ */
+export declare function cssQuotedString(text: unknown): string;

package/dist/utils/htmlSafety.js

@@ -0,0 +1,38 @@
+/**
+ * Text from outside the editor (a file's name, a font's name, a label in a widget's schema, what a person typed) must
+ * never reach the page as markup or as style rules. The editor can run inside a customer's own page, where a name like
+ * `x" onerror="steal()` that breaks out of an attribute runs with the customer page's rights.
+ *
+ * Svelte's `{text}` and `attribute={value}` already escape for HTML. These helpers are for the places that build HTML
+ * as a string for `{@html ...}`, where nothing is escaped unless it is done here, on every piece, as it goes in, and
+ * for the places that put a name into a CSS rule, where HTML escaping does not help at all.
+ */
+const HTML_ESCAPES = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;'
+};
+/** `text` as it must be written between tags or inside a quoted attribute value. Anything but text becomes its string. */
+export function escapeHtml(text) {
+    if (text === null || text === undefined)
+        return '';
+    return String(text).replace(/[&<>"']/g, (character) => HTML_ESCAPES[character]);
+}
+/**
+ * `text` as a quoted CSS string (`'Open Sans'`), whatever it contains. A font family name goes into a rule like
+ * `font-family: 'Open Sans', sans-serif`; a name such as `x'; background: url(//evil/a)` would otherwise end the string
+ * and add rules of its own, and escaping it for HTML does not stop that (the HTML parser turns `&#39;` back into the
+ * quote). Backslashes and single quotes are escaped; line breaks and other control characters, which end a CSS string,
+ * become spaces. The name still reaches the browser as the same name, so it matches the font that was loaded under it.
+ *
+ * When the result goes into an HTML attribute, escape it for HTML as well (`escapeHtml(cssQuotedString(name))`).
+ */
+export function cssQuotedString(text) {
+    const cleaned = String(text ?? '')
+        // eslint-disable-next-line no-control-regex
+        .replace(/[\u0000-\u001f\u007f\u2028\u2029]/g, ' ')
+        .replace(/[\\']/g, '\\$&');
+    return `'${cleaned}'`;
+}

package/dist/utils/itemReorder.d.ts

@@ -0,0 +1,90 @@
+/**
+ * Reordering a list of items by dragging a handle.
+ *
+ * This replaces @shopify/draggable, which cannot work inside a shadow root (the editor runs in one when it is a
+ * module on a customer's page):
+ *  - it listens on the `document`, where every event that comes from inside a shadow root has the shadow host as its
+ *    target, so it never finds the list it was given and no drag ever starts;
+ *  - the events it makes itself do not leave the shadow root, so its own listeners on the `document` never hear them;
+ *  - it adds classes to the page's `<body>`, switches text selection off on it, appends its floating copy of the item
+ *    to it, and leaves a screen reader region in it that stays after the editor is gone.
+ *
+ * This one listens on the list itself, keeps hold of the pointer with pointer capture (so the drag carries on over the
+ * preview frame and outside the editor), works out where an item would be dropped from where the items are on the
+ * screen, and leaves the page it runs in alone. It never moves the items itself: the list changes only when the
+ * caller changes the data the list is drawn from, in `onReorder`.
+ */
+/** How far (px) the pointer must move from where it was pressed before the press counts as a drag and not a click. */
+export declare const DRAG_START_DISTANCE_PX = 4;
+/** The height (px) of the copy of the item that follows the pointer. */
+export declare const MIRROR_HEIGHT_PX = 56;
+/** How close (px) to the top or bottom edge of the scrolling area the pointer must be for the area to start scrolling. */
+export declare const EDGE_SCROLL_ZONE_PX = 56;
+/** The most (px) the scrolling area moves in one frame, reached when the pointer is at or beyond the edge. */
+export declare const EDGE_SCROLL_MAX_STEP_PX = 18;
+/** The classes put on the list and its items while one is dragged; the editor's stylesheet draws them. */
+export declare const REORDER_CLASSES: {
+    /** On the list for as long as an item is being dragged. */
+    readonly list: "is-reordering";
+    /** On the item being dragged. */
+    readonly source: "is-reorder-source";
+    /** On the item the dragged one would be dropped in front of. */
+    readonly dropBefore: "is-reorder-drop-before";
+    /** On the last item, when the dragged one would be dropped behind it. */
+    readonly dropAfter: "is-reorder-drop-after";
+    /** On the floating copy of the dragged item. */
+    readonly mirror: "reorder-mirror";
+};
+/** The top and height of an item on the screen. */
+export interface VerticalBox {
+    top: number;
+    height: number;
+}
+/**
+ * Where a dragged item ends up when it is dropped with the pointer at `pointerY`: its index in the list once it has
+ * been taken out and put back. `otherItems` are the boxes of the items on the screen without the dragged one. The
+ * dragged item goes after every item whose middle is above the pointer.
+ */
+export declare function dropIndexForPointer(otherItems: readonly VerticalBox[], pointerY: number): number;
+/**
+ * How far (px) to scroll the area that holds the list in this frame: upwards (negative) when the pointer is in the
+ * top `zone` of the area or above it, downwards (positive) in the bottom `zone` or below it, faster the nearer the
+ * edge, and 0 anywhere else.
+ */
+export declare function edgeScrollStep(areaTop: number, areaBottom: number, pointerY: number, zone?: number, maxStep?: number): number;
+/**
+ * A copy of `items` with the item at `oldIndex` moved to `newIndex` (its index in the copy). When either index is not
+ * a place in the list, the copy keeps the original order.
+ */
+export declare function moveListItem<ItemType>(items: readonly ItemType[], oldIndex: number, newIndex: number): ItemType[];
+/** What `reorderableList` needs to know about the list. */
+export interface ItemReorderOptions {
+    /** CSS selector of one item. Items are direct children of the list. */
+    itemSelector: string;
+    /** CSS selector of the part of an item that starts a drag when it is pressed. */
+    handleSelector: string;
+    /** The drag began (the pointer moved far enough from where it was pressed). The list is not changed yet. */
+    onDragStart?: (drag: {
+        item: HTMLElement;
+        index: number;
+    }) => void;
+    /** The item was dropped at another place in the list. Change the data the list is drawn from here. */
+    onReorder: (move: {
+        item: HTMLElement;
+        oldIndex: number;
+        newIndex: number;
+    }) => void;
+    /** The drag is over: dropped (`reordered` tells if the order changed), cancelled with Escape, or the list went away. */
+    onDragEnd?: (outcome: {
+        reordered: boolean;
+    }) => void;
+}
+/**
+ * Svelte action that makes the direct children of a list reorderable by dragging their handle:
+ * `<div use:reorderableList={{ itemSelector, handleSelector, onReorder }}>`.
+ */
+export declare function reorderableList(list: HTMLElement, initialOptions: ItemReorderOptions): {
+    /** Svelte calls this when the options change; the callbacks of the new options are the ones used from then on. */
+    update(nextOptions: ItemReorderOptions): void;
+    destroy(): void;
+};