@ethlete/core 5.0.0-next.26 → 5.0.0-next.27

package/fesm2022/ethlete-core.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, Directive, assertInInjectionContext, DestroyRef, TemplateRef, QueryList, NgZone, signal, isSignal, untracked, DOCUMENT, linkedSignal, isDevMode, computed, afterNextRender, effect, EnvironmentInjector, runInInjectionContext, Injector, booleanAttribute, numberAttribute, RendererStyleFlags2, PLATFORM_ID, ApplicationRef, RendererFactory2, createComponent, model, ViewContainerRef, input, output, Pipe, ViewEncapsulation, Component } from '@angular/core';
+import { InjectionToken, inject, ElementRef, Directive, assertInInjectionContext, DestroyRef, TemplateRef, QueryList, RendererFactory2, RendererStyleFlags2, isSignal, DOCUMENT, signal, linkedSignal, isDevMode, computed, afterNextRender, effect, NgZone, untracked, EnvironmentInjector, runInInjectionContext, Injector, booleanAttribute, numberAttribute, PLATFORM_ID, ApplicationRef, createComponent, model, ViewContainerRef, input, output, Pipe, ViewEncapsulation, Component } from '@angular/core';
 import { takeUntilDestroyed, toSignal, toObservable, outputFromObservable } from '@angular/core/rxjs-interop';
 import { Subject, BehaviorSubject, debounceTime, combineLatest, map, merge, fromEvent, filter, tap, switchMap, startWith, of, timer, takeUntil, pairwise, distinctUntilChanged, take, Observable, concatMap, EMPTY, concat, defer, exhaustMap, share } from 'rxjs';
 import { FormGroup, FormArray, FormControl } from '@angular/forms';
 import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';
-import { BreakpointObserver } from '@angular/cdk/layout';
 import { coerceElement } from '@angular/cdk/coercion';
 import { DOCUMENT as DOCUMENT$1, isPlatformBrowser } from '@angular/common';
+import { BreakpointObserver } from '@angular/cdk/layout';
 import { Router, NavigationEnd, NavigationSkipped } from '@angular/router';
 import { Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
@@ -360,6 +360,58 @@ const Validators = {
     ValidateAtLeastOneRequired,
 };
 
+const copyToClipboard = async (text) => {
+    if (typeof navigator === 'undefined' || typeof document === 'undefined') {
+        return false;
+    }
+    if (navigator.clipboard) {
+        try {
+            await navigator.clipboard.writeText(text);
+            return true;
+        }
+        catch {
+            // The async Clipboard API can be blocked (missing permission, insecure context) — try the legacy path.
+        }
+    }
+    return copyToClipboardViaExecCommand(text);
+};
+const readFromClipboard = async () => {
+    if (typeof navigator === 'undefined' || !navigator.clipboard) {
+        return null;
+    }
+    try {
+        return await navigator.clipboard.readText();
+    }
+    catch {
+        return null;
+    }
+};
+const copyToClipboardViaExecCommand = (text) => {
+    const previouslyFocusedElement = document.activeElement;
+    const textarea = document.createElement('textarea');
+    textarea.value = text;
+    textarea.setAttribute('readonly', '');
+    textarea.setAttribute('aria-hidden', 'true');
+    textarea.style.position = 'fixed';
+    textarea.style.top = '-9999px';
+    textarea.style.opacity = '0';
+    document.body.appendChild(textarea);
+    textarea.select();
+    textarea.setSelectionRange(0, text.length);
+    let didCopy = false;
+    try {
+        didCopy = document.execCommand('copy');
+    }
+    catch {
+        // execCommand throws in some environments instead of returning false.
+    }
+    textarea.remove();
+    if (previouslyFocusedElement instanceof HTMLElement) {
+        previouslyFocusedElement.focus();
+    }
+    return didCopy;
+};
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable no-var */
 /**
@@ -641,179 +693,189 @@ class KeyPressManager {
     }
 }
 
-/**
- * Creates a signal that animates the transition of a numeric signal's value over time.
- */
-const signalAnimatedNumber = (source, options = {}) => {
-    const ngZone = inject(NgZone);
-    const duration = options.duration ?? 1000;
-    const easing = options.easing ?? easeOut;
-    const round = options.round ?? ((v) => Math.round(v));
-    const initialValue = options.initialValue ?? 0;
-    const animatedValue = signal(initialValue, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "animatedValue" }] : /* istanbul ignore next */ []));
-    let rafId = null;
-    let currentAnimatedValue = initialValue;
-    const cancelAnimation = () => {
-        if (rafId !== null) {
-            cancelAnimationFrame(rafId);
-            rafId = null;
-        }
+const [provideRenderer, injectRenderer] = createRootProvider(() => {
+    const rendererFactory = inject(RendererFactory2);
+    const renderer = rendererFactory.createRenderer(null, null);
+    const addClass = (element, ...classes) => {
+        classes.forEach((cls) => renderer.addClass(element, cls));
     };
-    const readonlySignal = animatedValue.asReadonly();
-    const play = () => {
-        const targetValue = isSignal(source) ? source() : source;
-        cancelAnimation();
-        const startValue = currentAnimatedValue;
-        const startTime = performance.now();
-        const delta = targetValue - startValue;
-        // Skip animation if no change
-        if (delta === 0) {
-            options.onAnimationEnd?.();
-            return readonlySignal;
+    const removeClass = (element, ...classes) => {
+        classes.forEach((cls) => renderer.removeClass(element, cls));
+    };
+    const toggleClass = (element, className, force) => {
+        const shouldAdd = force ?? !element.classList.contains(className);
+        if (shouldAdd) {
+            renderer.addClass(element, className);
         }
-        options.onAnimationStart?.();
-        ngZone.runOutsideAngular(() => {
-            const animate = (timestamp) => {
-                const elapsed = timestamp - startTime;
-                const progress = Math.min(elapsed / duration, 1);
-                const easedProgress = easing(progress);
-                const value = startValue + delta * easedProgress;
-                currentAnimatedValue = value;
-                untracked(() => {
-                    animatedValue.set(round(value));
-                });
-                if (progress < 1) {
-                    rafId = requestAnimationFrame(animate);
-                }
-                else {
-                    rafId = null;
-                    ngZone.run(() => {
-                        options.onAnimationEnd?.();
-                    });
-                }
-            };
-            rafId = requestAnimationFrame(animate);
-        });
-        return readonlySignal;
+        else {
+            renderer.removeClass(element, className);
+        }
+        return shouldAdd;
     };
-    const reset = () => {
-        cancelAnimation();
-        currentAnimatedValue = initialValue;
-        animatedValue.set(initialValue);
-        return readonlySignal;
+    const setStyle = (element, style, flags) => {
+        Object.entries(style).forEach(([key, value]) => {
+            if (!Number.isNaN(Number(key)))
+                return;
+            if (value !== null && value !== undefined) {
+                renderer.setStyle(element, key, value, flags);
+            }
+            else {
+                renderer.removeStyle(element, key, flags);
+            }
+        });
     };
-    const stop = () => {
-        cancelAnimation();
-        return readonlySignal;
+    const removeStyle = (element, style, flags) => {
+        if (!Number.isNaN(Number(style)))
+            return;
+        renderer.removeStyle(element, style, flags);
     };
-    readonlySignal.play = play;
-    readonlySignal.reset = reset;
-    readonlySignal.stop = stop;
-    return readonlySignal;
-};
-/* Linear easing function */
-const easeLinear = (t) => t;
-/* Ease in (slow start) */
-const easeIn = (t) => t * t;
-/* Ease out (slow end) */
-const easeOut = (t) => t * (2 - t);
-/* Ease in-out (slow start and end) */
-const easeInOut = (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t);
-/** Elastic easing function (overshoots) */
-const easeElastic = (t) => {
-    const c4 = (2 * Math.PI) / 3;
-    return t === 0 ? 0 : t === 1 ? 1 : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
-};
-/** Back easing function (overshoots slightly then settles) */
-const easeOutBack = (t) => {
-    const c1 = 1.70158;
-    const c3 = c1 + 1;
-    return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
-};
-/** Back easing function with more overshoot */
-const easeOutBackStrong = (t) => {
-    const c1 = 2.5;
-    const c3 = c1 + 1;
-    return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
-};
-
-const BREAKPOINT_ORDER = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
-/**
- * Default viewport config based on Tailwind CSS.
- * @see https://tailwindcss.com/docs/screens
- */
-const DEFAULT_VIEWPORT_CONFIG = {
-    breakpoints: {
-        xs: [0, 639],
-        sm: [640, 767],
-        md: [768, 1023],
-        lg: [1024, 1279],
-        xl: [1280, 1535],
-        '2xl': [1536, Infinity],
-    },
-};
-const [provideViewportConfig, injectViewportConfig] = createStaticRootProvider(DEFAULT_VIEWPORT_CONFIG, {
-    name: 'Viewport Config',
-});
-const [provideBreakpointObserver, injectBreakpointObserver] = createRootProvider(() => {
-    const breakpointObserver = inject(BreakpointObserver);
-    const viewportConfig = injectViewportConfig();
-    const isMediaQueryMatched = (mediaQuery) => breakpointObserver.isMatched(mediaQuery);
-    const observeMediaQuery = (mediaQuery) => {
-        return toSignal(breakpointObserver.observe(mediaQuery).pipe(map((x) => x.matches), startWith(isMediaQueryMatched(mediaQuery))), { requireSync: true });
+    const removeStyles = (element, ...styles) => {
+        styles.forEach((style) => removeStyle(element, style));
     };
-    const observeBreakpoint = (options) => observeMediaQuery(buildMediaQueryString(options));
-    const isBreakpointMatched = (options) => isMediaQueryMatched(buildMediaQueryString(options));
-    const getBreakpointSize = (type, option) => {
-        const index = option === 'min' ? 0 : 1;
-        const size = viewportConfig.breakpoints[type][index];
-        if (size === Infinity || size === 0) {
-            return size;
+    const setCssProperty = (element, name, value) => {
+        if (value !== null && value !== undefined) {
+            renderer.setStyle(element, name, value, RendererStyleFlags2.DashCase);
         }
-        if (option === 'min') {
-            return size;
+        else {
+            renderer.removeStyle(element, name, RendererStyleFlags2.DashCase);
         }
-        // Due to scaling, the actual size of the viewport may be a decimal number.
-        // Eg. on Windows 11 with 150% scaling, the viewport size may be 1535.33px
-        // and thus not matching any of the default breakpoints.
-        return size + 0.9;
     };
-    const buildMediaQueryString = (options) => {
-        if (!options.min && !options.max) {
-            throw new Error('At least one of min or max must be defined');
+    const setCssProperties = (element, properties) => {
+        Object.entries(properties).forEach(([name, value]) => {
+            setCssProperty(element, name, value);
+        });
+    };
+    const setAttribute = (element, name, value, namespace) => {
+        if (value !== null && value !== undefined) {
+            renderer.setAttribute(element, name, value, namespace);
         }
-        const mediaQueryParts = [];
-        if (options.min) {
-            if (typeof options.min === 'number') {
-                mediaQueryParts.push(`(min-width: ${options.min}px)`);
-            }
-            else {
-                mediaQueryParts.push(`(min-width: ${getBreakpointSize(options.min, 'min')}px)`);
-            }
+        else {
+            renderer.removeAttribute(element, name, namespace);
         }
-        if (options.min && options.max) {
-            mediaQueryParts.push('and');
+    };
+    const removeAttribute = (element, ...names) => {
+        names.forEach((name) => renderer.removeAttribute(element, name));
+    };
+    const setProperty = (element, name, value) => {
+        renderer.setProperty(element, name, value);
+    };
+    const setProperties = (element, properties) => {
+        Object.entries(properties).forEach(([name, value]) => {
+            renderer.setProperty(element, name, value);
+        });
+    };
+    const createElement = (tagName, namespace) => {
+        return renderer.createElement(tagName, namespace);
+    };
+    const createText = (value) => {
+        return renderer.createText(value);
+    };
+    const createComment = (value) => {
+        return renderer.createComment(value);
+    };
+    const appendChild = (parent, newChild) => {
+        renderer.appendChild(parent, newChild);
+    };
+    const insertBefore = (parent, newChild, refChild) => {
+        renderer.insertBefore(parent, newChild, refChild);
+    };
+    const removeChild = (parent, oldChild, isHostElement) => {
+        renderer.removeChild(parent, oldChild, isHostElement);
+    };
+    const selectRootElement = (selectorOrNode, preserveContent) => {
+        return renderer.selectRootElement(selectorOrNode, preserveContent);
+    };
+    const parentNode = (node) => {
+        return renderer.parentNode(node);
+    };
+    const nextSibling = (node) => {
+        return renderer.nextSibling(node);
+    };
+    const setValue = (node, value) => {
+        renderer.setValue(node, value);
+    };
+    const listen = (target, eventName, callback) => {
+        return renderer.listen(target, eventName, callback);
+    };
+    const destroyNode = (node) => {
+        if (renderer.destroyNode) {
+            renderer.destroyNode(node);
         }
-        if (options.max) {
-            if (typeof options.max === 'number') {
-                mediaQueryParts.push(`(max-width: ${options.max}px)`);
+    };
+    const replaceChild = (parent, newChild, oldChild) => {
+        renderer.insertBefore(parent, newChild, oldChild);
+        renderer.removeChild(parent, oldChild);
+    };
+    const empty = (element) => {
+        while (element.firstChild) {
+            renderer.removeChild(element, element.firstChild);
+        }
+    };
+    const setTextContent = (element, text) => {
+        renderer.setProperty(element, 'textContent', text);
+    };
+    const setInnerHTML = (element, html) => {
+        renderer.setProperty(element, 'innerHTML', html);
+    };
+    const setAttributes = (element, attributes, namespace) => {
+        Object.entries(attributes).forEach(([name, value]) => {
+            setAttribute(element, name, value, namespace);
+        });
+    };
+    const setDataAttributes = (element, data) => {
+        Object.entries(data).forEach(([key, value]) => {
+            setAttribute(element, `data-${key}`, value);
+        });
+    };
+    const moveBefore = (config) => {
+        const { newParent, child, before = null } = config;
+        if ('moveBefore' in newParent) {
+            try {
+                newParent.moveBefore(child, before);
             }
-            else {
-                mediaQueryParts.push(`(max-width: ${getBreakpointSize(options.max, 'max')}px)`);
+            catch {
+                newParent.insertBefore(child, before);
             }
         }
-        return mediaQueryParts.join(' ');
+        else {
+            newParent.insertBefore(child, before);
+        }
     };
     return {
-        observeBreakpoint,
-        isBreakpointMatched,
-        getBreakpointSize,
-        buildMediaQueryString,
-        observeMediaQuery,
-        isMediaQueryMatched,
+        addClass,
+        removeClass,
+        toggleClass,
+        setStyle,
+        removeStyle,
+        removeStyles,
+        setAttribute,
+        removeAttribute,
+        setProperty,
+        setProperties,
+        createElement,
+        createText,
+        createComment,
+        appendChild,
+        insertBefore,
+        removeChild,
+        selectRootElement,
+        parentNode,
+        nextSibling,
+        setValue,
+        listen,
+        destroyNode,
+        replaceChild,
+        empty,
+        setTextContent,
+        setInnerHTML,
+        setAttributes,
+        setDataAttributes,
+        setCssProperty,
+        setCssProperties,
+        moveBefore,
+        renderer,
     };
-}, { name: 'Breakpoint Observer' });
+}, { name: 'Angular Renderer' });
 
 const isElementSignal = (el) => {
     if (!isSignal(el))
@@ -1255,6 +1317,251 @@ const injectScrollbarDimensions = memoizeSignal(() => {
     });
 });
 
+/**
+ * Smoothly animates an element's `block-size` when its content changes size (e.g. a list filtering,
+ * a loading state resolving). Set up once in an injection context; it observes the given content
+ * element(s) and animates the host from its previous height to its new natural height.
+ *
+ * Robustness notes: the baseline height is captured on the first render (via `afterNextRender`) and
+ * the effect only animates after that, so the initial layout settling never plays as a grow-from-0.
+ * A change that interrupts an in-flight animation continues from the current animated height, and
+ * zero/pre-layout measurements are ignored. Respects `prefers-reduced-motion`.
+ */
+const injectAnimatedBlockSize = (config) => {
+    const hostBinding = config.host ?? inject(ElementRef);
+    const renderer = injectRenderer();
+    const prefersReducedMotion = injectPrefersReducedMotion();
+    const destroyRef = inject(DestroyRef);
+    const hostSignal = firstElementSignal(buildElementSignal(hostBinding));
+    const observeTargets = Array.isArray(config.observe) ? config.observe : [config.observe];
+    const dimensionSignals = observeTargets.map((target) => signalElementDimensions(target));
+    const duration = config.duration ?? 160;
+    const easing = config.easing ?? 'ease';
+    let lastBlockSize = null;
+    let animation = null;
+    let ready = false;
+    const hostElement = () => hostSignal().currentElement;
+    const run = () => {
+        const host = hostElement();
+        if (!host)
+            return;
+        // continue from the current animated height when interrupting a running animation
+        const from = animation?.playState === 'running' ? host.getBoundingClientRect().height : lastBlockSize;
+        animation?.cancel();
+        animation = null;
+        const to = host.getBoundingClientRect().height;
+        // never record or animate a zero / pre-layout height
+        if (to === 0)
+            return;
+        lastBlockSize = to;
+        if (from === null || from < 1 || Math.abs(from - to) < 1 || prefersReducedMotion()) {
+            return;
+        }
+        if (config.resizingClass && renderer) {
+            renderer.addClass(host, config.resizingClass);
+        }
+        const nextAnimation = host.animate([{ blockSize: `${from}px` }, { blockSize: `${to}px` }], { duration, easing });
+        const cleanup = () => {
+            if (config.resizingClass && renderer) {
+                renderer.removeClass(host, config.resizingClass);
+            }
+            if (animation === nextAnimation) {
+                animation = null;
+            }
+        };
+        nextAnimation.finished.then(cleanup).catch(cleanup);
+        animation = nextAnimation;
+    };
+    // Capture the settled height of the first render as the baseline, then only animate later changes.
+    afterNextRender(() => {
+        const host = hostElement();
+        lastBlockSize = host ? host.getBoundingClientRect().height || null : null;
+        ready = true;
+    });
+    effect(() => {
+        // track every observed element's size
+        dimensionSignals.forEach((dimensions) => dimensions());
+        if (!ready)
+            return;
+        untracked(() => run());
+    });
+    destroyRef.onDestroy(() => animation?.cancel());
+};
+
+/**
+ * Creates a signal that animates the transition of a numeric signal's value over time.
+ */
+const signalAnimatedNumber = (source, options = {}) => {
+    const ngZone = inject(NgZone);
+    const duration = options.duration ?? 1000;
+    const easing = options.easing ?? easeOut;
+    const round = options.round ?? ((v) => Math.round(v));
+    const initialValue = options.initialValue ?? 0;
+    const animatedValue = signal(initialValue, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animatedValue" }] : /* istanbul ignore next */ []));
+    let rafId = null;
+    let currentAnimatedValue = initialValue;
+    const cancelAnimation = () => {
+        if (rafId !== null) {
+            cancelAnimationFrame(rafId);
+            rafId = null;
+        }
+    };
+    const readonlySignal = animatedValue.asReadonly();
+    const play = () => {
+        const targetValue = isSignal(source) ? source() : source;
+        cancelAnimation();
+        const startValue = currentAnimatedValue;
+        const startTime = performance.now();
+        const delta = targetValue - startValue;
+        // Skip animation if no change
+        if (delta === 0) {
+            options.onAnimationEnd?.();
+            return readonlySignal;
+        }
+        options.onAnimationStart?.();
+        ngZone.runOutsideAngular(() => {
+            const animate = (timestamp) => {
+                const elapsed = timestamp - startTime;
+                const progress = Math.min(elapsed / duration, 1);
+                const easedProgress = easing(progress);
+                const value = startValue + delta * easedProgress;
+                currentAnimatedValue = value;
+                untracked(() => {
+                    animatedValue.set(round(value));
+                });
+                if (progress < 1) {
+                    rafId = requestAnimationFrame(animate);
+                }
+                else {
+                    rafId = null;
+                    ngZone.run(() => {
+                        options.onAnimationEnd?.();
+                    });
+                }
+            };
+            rafId = requestAnimationFrame(animate);
+        });
+        return readonlySignal;
+    };
+    const reset = () => {
+        cancelAnimation();
+        currentAnimatedValue = initialValue;
+        animatedValue.set(initialValue);
+        return readonlySignal;
+    };
+    const stop = () => {
+        cancelAnimation();
+        return readonlySignal;
+    };
+    readonlySignal.play = play;
+    readonlySignal.reset = reset;
+    readonlySignal.stop = stop;
+    return readonlySignal;
+};
+/* Linear easing function */
+const easeLinear = (t) => t;
+/* Ease in (slow start) */
+const easeIn = (t) => t * t;
+/* Ease out (slow end) */
+const easeOut = (t) => t * (2 - t);
+/* Ease in-out (slow start and end) */
+const easeInOut = (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t);
+/** Elastic easing function (overshoots) */
+const easeElastic = (t) => {
+    const c4 = (2 * Math.PI) / 3;
+    return t === 0 ? 0 : t === 1 ? 1 : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
+};
+/** Back easing function (overshoots slightly then settles) */
+const easeOutBack = (t) => {
+    const c1 = 1.70158;
+    const c3 = c1 + 1;
+    return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
+};
+/** Back easing function with more overshoot */
+const easeOutBackStrong = (t) => {
+    const c1 = 2.5;
+    const c3 = c1 + 1;
+    return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
+};
+
+const BREAKPOINT_ORDER = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
+/**
+ * Default viewport config based on Tailwind CSS.
+ * @see https://tailwindcss.com/docs/screens
+ */
+const DEFAULT_VIEWPORT_CONFIG = {
+    breakpoints: {
+        xs: [0, 639],
+        sm: [640, 767],
+        md: [768, 1023],
+        lg: [1024, 1279],
+        xl: [1280, 1535],
+        '2xl': [1536, Infinity],
+    },
+};
+const [provideViewportConfig, injectViewportConfig] = createStaticRootProvider(DEFAULT_VIEWPORT_CONFIG, {
+    name: 'Viewport Config',
+});
+const [provideBreakpointObserver, injectBreakpointObserver] = createRootProvider(() => {
+    const breakpointObserver = inject(BreakpointObserver);
+    const viewportConfig = injectViewportConfig();
+    const isMediaQueryMatched = (mediaQuery) => breakpointObserver.isMatched(mediaQuery);
+    const observeMediaQuery = (mediaQuery) => {
+        return toSignal(breakpointObserver.observe(mediaQuery).pipe(map((x) => x.matches), startWith(isMediaQueryMatched(mediaQuery))), { requireSync: true });
+    };
+    const observeBreakpoint = (options) => observeMediaQuery(buildMediaQueryString(options));
+    const isBreakpointMatched = (options) => isMediaQueryMatched(buildMediaQueryString(options));
+    const getBreakpointSize = (type, option) => {
+        const index = option === 'min' ? 0 : 1;
+        const size = viewportConfig.breakpoints[type][index];
+        if (size === Infinity || size === 0) {
+            return size;
+        }
+        if (option === 'min') {
+            return size;
+        }
+        // Due to scaling, the actual size of the viewport may be a decimal number.
+        // Eg. on Windows 11 with 150% scaling, the viewport size may be 1535.33px
+        // and thus not matching any of the default breakpoints.
+        return size + 0.9;
+    };
+    const buildMediaQueryString = (options) => {
+        if (!options.min && !options.max) {
+            throw new Error('At least one of min or max must be defined');
+        }
+        const mediaQueryParts = [];
+        if (options.min) {
+            if (typeof options.min === 'number') {
+                mediaQueryParts.push(`(min-width: ${options.min}px)`);
+            }
+            else {
+                mediaQueryParts.push(`(min-width: ${getBreakpointSize(options.min, 'min')}px)`);
+            }
+        }
+        if (options.min && options.max) {
+            mediaQueryParts.push('and');
+        }
+        if (options.max) {
+            if (typeof options.max === 'number') {
+                mediaQueryParts.push(`(max-width: ${options.max}px)`);
+            }
+            else {
+                mediaQueryParts.push(`(max-width: ${getBreakpointSize(options.max, 'max')}px)`);
+            }
+        }
+        return mediaQueryParts.join(' ');
+    };
+    return {
+        observeBreakpoint,
+        isBreakpointMatched,
+        getBreakpointSize,
+        buildMediaQueryString,
+        observeMediaQuery,
+        isMediaQueryMatched,
+    };
+}, { name: 'Breakpoint Observer' });
+
 const BREAKPOINT_KEY_SET = new Set(BREAKPOINT_ORDER);
 const isBreakpointMap = (value) => {
     if (value === null || typeof value !== 'object' || Array.isArray(value))
@@ -2643,6 +2950,20 @@ const createLogger = (config) => {
 };
 
 const escapeHtml = (str) => str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+/** Escapes HTML-special characters but leaves existing entity references intact — for input that
+ *  may already contain entities (e.g. Markdown serialized from the editor's DOM, where `&` is
+ *  stored as `&amp;`), where plain escaping would double-escape them. */
+const escapeHtmlPreservingEntities = (str) => str
+    .replace(/&(?![a-z]+;|#\d+;|#x[0-9a-f]+;)/gi, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+/** Rejects URL schemes that execute script when navigated. Whitespace/control characters are
+ *  stripped before checking — browsers ignore them inside URLs, so `java\tscript:` would
+ *  otherwise slip through. */
+const isSafeUrl = (url) => 
+// eslint-disable-next-line no-control-regex -- stripping control characters is the point: browsers ignore them inside URLs
+!/^(javascript|data|vbscript):/i.test(url.replace(/[\s\u0000-\u001f]/g, ''));
 const unescapeHtml = (str) => str
     .replace(/&amp;/g, '&')
     .replace(/&lt;/g, '<')
@@ -2656,30 +2977,158 @@ const parseTableRow = (line) => line
     .slice(1, -1)
     .map((cell) => cell.trim());
 const isTableSeparatorLine = (line) => /^\|?(\s*:?-+:?\s*\|)+\s*$/.test(line);
+/** Column alignments from a GFM separator line: `:---` left, `:---:` center, `---:` right. */
+const parseSeparatorAligns = (line) => parseTableRow(line).map((cell) => {
+    const left = cell.startsWith(':');
+    const right = cell.endsWith(':');
+    return left && right ? 'center' : right ? 'right' : left ? 'left' : null;
+});
+/** The GFM separator token for a column alignment. */
+const separatorFor = (align) => align === 'center' ? ':---:' : align === 'right' ? '---:' : align === 'left' ? ':---' : '---';
+const alignStyle = (align) => (align ? ` style="text-align: ${align}"` : '');
 const makePlaceholder = (kind, idx) => `\u{E000}${kind}${idx}\u{E001}`;
 const placeholderRe = (kind) => new RegExp(`\u{E000}${kind}(\\d+)\u{E001}`, 'gu');
 const isPlaceholder = (kind, str) => new RegExp(`^\u{E000}${kind}\\d+\u{E001}$`, 'u').test(str);
+/** Tags allowed to survive inside an aligned block's raw-HTML passthrough. */
+const SAFE_INLINE_TAGS = new Set(['strong', 'em', 'b', 'i', 'del', 's', 'u', 'code', 'br']);
+/** Reduces raw inline HTML to the editor's own vocabulary: allowed tags lose all their attributes
+ *  (`<a>` keeps a safe `href`), everything else — including any event-handler attribute — is
+ *  dropped, and the remaining text is escaped. */
+const sanitizeInlineHtml = (html) => {
+    const kept = [];
+    const stashed = html.replace(/<\s*(\/?)\s*([a-z][a-z0-9]*)\b[^>]*>/gi, (full, closing, tag) => {
+        const name = tag.toLowerCase();
+        if (name === 'a') {
+            const href = closing ? null : /\bhref\s*=\s*"([^"]*)"/i.exec(full)?.[1];
+            const anchor = closing ? '</a>' : href && isSafeUrl(href) ? `<a href="${href}">` : '<a>';
+            return makePlaceholder('TAG', kept.push(anchor) - 1);
+        }
+        if (!SAFE_INLINE_TAGS.has(name))
+            return '';
+        return makePlaceholder('TAG', kept.push(closing ? `</${name}>` : `<${name}>`) - 1);
+    });
+    return escapeHtmlPreservingEntities(stashed).replace(placeholderRe('TAG'), (_, i) => kept[+i] ?? '');
+};
 const processInline = (text) => {
     const inlineCodes = [];
     text = text.replace(/`([^`]+)`/g, (_, code) => {
         const idx = inlineCodes.push(`<code>${escapeHtml(code)}</code>`) - 1;
         return makePlaceholder('IC', idx);
     });
-    // Bold + italic — *** before ** before *
-    text = text.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
-    text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
-    text = text.replace(/__(.+?)__/g, '<strong>$1</strong>');
-    text = text.replace(/\*(.+?)\*/g, '<em>$1</em>');
-    text = text.replace(/~~(.+?)~~/g, '<del>$1</del>');
-    // Images before links (order matters)
-    text = text.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1">');
-    text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
+    // Raw HTML in Markdown text is escaped, not rendered — the editor writes this HTML straight
+    // into the DOM via innerHTML, so anything else would let a crafted value inject markup. `<u>`
+    // is the one deliberate exception: underline has no Markdown form and round-trips as raw <u>.
+    text = escapeHtmlPreservingEntities(text).replace(/&lt;(\/?)u&gt;/gi, '<$1u>');
+    // Bold + italic — *** before ** before *. A delimiter flanking whitespace doesn't open/close a
+    // run (CommonMark's flanking rule), so literal asterisks as in `2 * 3 * 4` stay text.
+    text = text.replace(/\*\*\*([^\s*](?:.*?[^\s*])?)\*\*\*/g, '<strong><em>$1</em></strong>');
+    text = text.replace(/\*\*([^\s*](?:.*?[^\s*])?)\*\*/g, '<strong>$1</strong>');
+    text = text.replace(/__([^\s_](?:.*?[^\s_])?)__/g, '<strong>$1</strong>');
+    text = text.replace(/\*([^\s*](?:.*?[^\s*])?)\*/g, '<em>$1</em>');
+    // Single-underscore emphasis must not fire inside a word (snake_case identifiers).
+    text = text.replace(/(?<![\w*_])_([^\s_](?:.*?[^\s_])?)_(?![\w_])/g, '<em>$1</em>');
+    text = text.replace(/~~([^\s~](?:.*?[^\s~])?)~~/g, '<del>$1</del>');
+    // Images before links (order matters); URLs with script-running schemes stay literal text
+    text = text.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (match, alt, src) => isSafeUrl(src) ? `<img src="${src}" alt="${alt}">` : match);
+    text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, label, href) => isSafeUrl(href) ? `<a href="${href}">${label}</a>` : match);
     return text.replace(placeholderRe('IC'), (_, i) => inlineCodes[+i] ?? '');
 };
+// --- Nested list helpers (regex can't match balanced nesting, so these scan by tag depth) ---
+/** The first top-level `<ul>`/`<ol>` in `html`, matched with balanced nesting. */
+const findList = (html) => {
+    const open = /<(ul|ol)\b[^>]*>/i.exec(html);
+    if (!open)
+        return null;
+    const innerStart = open.index + open[0].length;
+    const tag = /<(\/?)(?:ul|ol)\b[^>]*>/gi;
+    tag.lastIndex = innerStart;
+    let depth = 1;
+    let match;
+    while ((match = tag.exec(html))) {
+        depth += match[1] ? -1 : 1;
+        if (depth === 0) {
+            return {
+                start: open.index,
+                end: tag.lastIndex,
+                ordered: open[1].toLowerCase() === 'ol',
+                inner: html.slice(innerStart, match.index),
+            };
+        }
+    }
+    return null;
+};
+/** The inner HTML of each direct `<li>` child of a list's inner HTML (balanced over nested lists). */
+const findListItems = (inner) => {
+    const items = [];
+    const tag = /<(\/?)li\b[^>]*>/gi;
+    let depth = 0;
+    let start = -1;
+    let match;
+    while ((match = tag.exec(inner))) {
+        if (match[1]) {
+            depth--;
+            if (depth === 0 && start >= 0) {
+                items.push(inner.slice(start, match.index));
+                start = -1;
+            }
+        }
+        else {
+            if (depth === 0)
+                start = match.index + match[0].length;
+            depth++;
+        }
+    }
+    return items;
+};
+/** Serializes a list's inner HTML to Markdown, indenting nested lists two spaces per level. */
+const listToMarkdown = (inner, ordered, depth) => {
+    const indent = '  '.repeat(depth);
+    let n = 1;
+    return findListItems(inner)
+        .map((itemInner) => {
+        let content = itemInner;
+        let nestedMarkdown = '';
+        for (let nested = findList(content); nested; nested = findList(content)) {
+            nestedMarkdown += `\n${listToMarkdown(nested.inner, nested.ordered, depth + 1)}`;
+            content = content.slice(0, nested.start) + content.slice(nested.end);
+        }
+        const marker = ordered ? `${n++}. ` : '- ';
+        // list items are single-line in this serializer, so a <br> degrades to a space
+        return `${indent}${marker}${stripTags(content.replace(/<br\s*\/?>/gi, ' ')).trim()}${nestedMarkdown}`;
+    })
+        .join('\n');
+};
+/** Parses list lines into (indent-level, ordered, text) — two leading spaces per nesting level. */
+const parseListLines = (lines) => lines
+    .map((line) => {
+    const match = /^(\s*)([-*+]|\d+\.)\s+(.*)$/.exec(line);
+    return match
+        ? { indent: Math.floor((match[1] ?? '').length / 2), ordered: /\d/.test(match[2] ?? ''), text: match[3] ?? '' }
+        : null;
+})
+    .filter((line) => line !== null);
+/** Builds nested `<ul>`/`<ol>` HTML from parsed list lines starting at `start`, for one indent level. */
+const buildListHtml = (lines, start, baseIndent) => {
+    const ordered = lines[start]?.ordered ?? false;
+    let items = '';
+    let i = start;
+    while (i < lines.length && (lines[i]?.indent ?? -1) === baseIndent) {
+        let item = processInline(lines[i].text);
+        i++;
+        if (i < lines.length && (lines[i]?.indent ?? -1) > baseIndent) {
+            const nested = buildListHtml(lines, i, lines[i].indent);
+            item += nested.html;
+            i = nested.next;
+        }
+        items += `<li>${item}</li>`;
+    }
+    const tag = ordered ? 'ol' : 'ul';
+    return { html: `<${tag}>${items}</${tag}>`, next: i };
+};
 /**
  * Converts a markdown string to HTML.
  * Covers headings, bold, italic, strikethrough, inline code, fenced code blocks,
- * links, images, block quotes, unordered/ordered lists, tables, horizontal rules, and paragraphs.
+ * links, images, block quotes, unordered/ordered (and nested) lists, tables, horizontal rules, and paragraphs.
  */
 const markdownToHtml = (markdown) => {
     if (!markdown)
@@ -2704,6 +3153,16 @@ const markdownToHtml = (markdown) => {
             return '';
         if (isPlaceholder('CODE', trimmed))
             return trimmed;
+        // Aligned block: text-align has no Markdown form, so it round-trips as raw native HTML.
+        // Rebuild it instead of passing it through verbatim: only the alignment survives on the tag
+        // (no other attributes, e.g. event handlers) and the inner markup is reduced to the editor's
+        // own inline vocabulary.
+        const aligned = /^<(p|h[1-6]|div)\b[^>]*\bstyle=["'][^"']*text-align:\s*([a-z]+)[^>]*>([\s\S]*)<\/\1>$/i.exec(trimmed);
+        if (aligned) {
+            const tag = (aligned[1] ?? 'p').toLowerCase();
+            const align = (aligned[2] ?? 'left').toLowerCase();
+            return `<${tag} style="text-align: ${align}">${sanitizeInlineHtml(aligned[3] ?? '')}</${tag}>`;
+        }
         // Heading
         const headingMatch = trimmed.match(/^(#{1,6})\s+(.+)$/);
         if (headingMatch?.[1] && headingMatch?.[2]) {
@@ -2713,46 +3172,39 @@ const markdownToHtml = (markdown) => {
         // Horizontal rule
         if (/^(---|\*\*\*|___)\s*$/.test(trimmed))
             return '<hr>';
-        // Table (GFM)
+        // Table (GFM) — column alignment from the separator line lands as text-align on every cell
         const tableLines = trimmed.split('\n');
         if (tableLines.length >= 2 && /\|/.test(tableLines[0] ?? '') && isTableSeparatorLine(tableLines[1] ?? '')) {
+            const aligns = parseSeparatorAligns(tableLines[1] ?? '');
             const headers = parseTableRow(tableLines[0] ?? '');
-            const thead = `<thead><tr>${headers.map((h) => `<th>${processInline(h)}</th>`).join('')}</tr></thead>`;
+            const thead = `<thead><tr>${headers
+                .map((h, i) => `<th${alignStyle(aligns[i] ?? null)}>${processInline(h)}</th>`)
+                .join('')}</tr></thead>`;
             const bodyRows = tableLines.slice(2);
             const tbody = bodyRows.length > 0
                 ? `<tbody>${bodyRows
                     .map((row) => `<tr>${parseTableRow(row)
-                    .map((cell) => `<td>${processInline(cell)}</td>`)
+                    .map((cell, i) => `<td${alignStyle(aligns[i] ?? null)}>${processInline(cell)}</td>`)
                     .join('')}</tr>`)
                     .join('')}</tbody>`
                 : '';
             return `<table>${thead}${tbody}</table>`;
         }
-        // Blockquote
+        // Blockquote — each line runs through the inline pass on its own (processInline escapes raw
+        // HTML, so joining first would escape the <br> separators too)
         if (/^> /.test(trimmed)) {
             const content = trimmed
                 .split('\n')
-                .map((l) => l.replace(/^>\s?/, ''))
+                .map((l) => processInline(l.replace(/^>\s?/, '')))
                 .join('<br>');
-            return `<blockquote>${processInline(content)}</blockquote>`;
+            return `<blockquote>${content}</blockquote>`;
         }
-        // Unordered list
-        if (/^[-*+]\s/.test(trimmed)) {
-            const items = trimmed
-                .split('\n')
-                .filter((l) => /^[-*+]\s/.test(l))
-                .map((l) => `<li>${processInline(l.replace(/^[-*+]\s+/, '').trim())}</li>`)
-                .join('');
-            return `<ul>${items}</ul>`;
-        }
-        // Ordered list
-        if (/^\d+\.\s/.test(trimmed)) {
-            const items = trimmed
-                .split('\n')
-                .filter((l) => /^\d+\.\s/.test(l))
-                .map((l) => `<li>${processInline(l.replace(/^\d+\.\s+/, '').trim())}</li>`)
-                .join('');
-            return `<ol>${items}</ol>`;
+        // List (unordered/ordered, with indentation-based nesting)
+        if (/^([-*+]|\d+\.)\s/.test(trimmed)) {
+            const lines = parseListLines(trimmed.split('\n'));
+            if (lines.length > 0) {
+                return buildListHtml(lines, 0, lines[0].indent).html;
+            }
         }
         // Paragraph — single newlines within a block become <br>
         return `<p>${trimmed
@@ -2773,6 +3225,11 @@ const htmlToMarkdown = (html) => {
     if (!html)
         return '';
     let md = html;
+    // Aligned blocks: text-align has no Markdown form, so preserve them verbatim as native HTML (their
+    // inner markup stays HTML) and round-trip via a placeholder — extracted before the block passes
+    // below rewrite them, restored after the final tag-strip.
+    const alignedBlocks = [];
+    md = md.replace(/<(p|h[1-6]|div)\b[^>]*\bstyle="[^"]*text-align[^"]*"[^>]*>[\s\S]*?<\/\1>/gi, (match) => makePlaceholder('ALIGN', alignedBlocks.push(match) - 1));
     // Code blocks — process before inline code
     md = md.replace(/<pre[^>]*><code[^>]*class="language-([^"]+)"[^>]*>([\s\S]*?)<\/code><\/pre>/gi, (_, lang, code) => `\n\`\`\`${lang}\n${unescapeHtml(code.trim())}\n\`\`\`\n`);
     md = md.replace(/<pre[^>]*><code[^>]*>([\s\S]*?)<\/code><\/pre>/gi, (_, code) => `\n\`\`\`\n${unescapeHtml(code.trim())}\n\`\`\`\n`);
@@ -2795,37 +3252,40 @@ const htmlToMarkdown = (html) => {
     md = md.replace(/<img[^>]+src="([^"]*)"[^>]*alt="([^"]*)"[^>]*\/?>/gi, '![$2]($1)');
     md = md.replace(/<img[^>]+alt="([^"]*)"[^>]*src="([^"]*)"[^>]*\/?>/gi, '![$1]($2)');
     md = md.replace(/<img[^>]+src="([^"]*)"[^>]*\/?>/gi, '![]($1)');
-    // Block quotes
+    // Underline has no Markdown form — preserve it as raw <u> so it round-trips. Extract it now (its
+    // inner markup is already converted above) so the block passes below don't strip the tag; the
+    // placeholder is restored after the final tag-strip.
+    const underlines = [];
+    md = md.replace(/<u[^>]*>([\s\S]*?)<\/u>/gi, (_, inner) => makePlaceholder('U', underlines.push(inner) - 1));
+    // Block quotes — <br> line breaks become one quoted line each (stripTags would swallow them)
     md = md.replace(/<blockquote[^>]*>([\s\S]*?)<\/blockquote>/gi, (_, content) => {
-        return (stripTags(content)
+        return (stripTags(content.replace(/<br\s*\/?>/gi, '\n'))
             .trim()
             .split('\n')
             .map((line) => `> ${line.trim()}`)
             .join('\n') + '\n');
     });
-    // Lists
-    md = md.replace(/<ul[^>]*>([\s\S]*?)<\/ul>/gi, (_, content) => {
-        return ('\n' +
-            content.replace(/<li[^>]*>([\s\S]*?)<\/li>/gi, (_m, item) => `- ${stripTags(item).trim()}\n`));
-    });
-    md = md.replace(/<ol[^>]*>([\s\S]*?)<\/ol>/gi, (_, content) => {
-        let n = 1;
-        return ('\n' +
-            content.replace(/<li[^>]*>([\s\S]*?)<\/li>/gi, (_m, item) => `${n++}. ${stripTags(item).trim()}\n`));
-    });
+    // Lists — replace each top-level list with its recursively-serialized Markdown (handles nesting).
+    for (let list = findList(md); list; list = findList(md)) {
+        md = `${md.slice(0, list.start)}\n${listToMarkdown(list.inner, list.ordered, 0)}\n${md.slice(list.end)}`;
+    }
     // Tables
     md = md.replace(/<table[^>]*>([\s\S]*?)<\/table>/gi, (_, tableContent) => {
-        const extractCells = (row) => [...row.matchAll(/<t[hd][^>]*>([\s\S]*?)<\/t[hd]>/gi)].map((m) => stripTags(m[1] ?? '').trim());
+        // GFM cells are single-line, so a <br> inside one degrades to a space (not silently dropped)
+        const extractCells = (row) => [...row.matchAll(/<t[hd][^>]*>([\s\S]*?)<\/t[hd]>/gi)].map((m) => stripTags((m[1] ?? '').replace(/<br\s*\/?>/gi, ' ')).trim());
+        // GFM alignment is per column, read from the header cells' text-align styles
+        const extractAligns = (row) => [...row.matchAll(/<t[hd]([^>]*)>/gi)].map((m) => {
+            const align = /text-align:\s*(left|center|right)/i.exec(m[1] ?? '')?.[1]?.toLowerCase();
+            return align ?? null;
+        });
         const theadMatch = tableContent.match(/<thead[^>]*>([\s\S]*?)<\/thead>/i);
         const firstTrMatch = tableContent.match(/<tr[^>]*>([\s\S]*?)<\/tr>/i);
-        const headerCells = theadMatch
-            ? extractCells(theadMatch[1] ?? '')
-            : firstTrMatch
-                ? extractCells(firstTrMatch[1] ?? '')
-                : [];
+        const headerRow = theadMatch?.[1] ?? firstTrMatch?.[1] ?? '';
+        const headerCells = headerRow ? extractCells(headerRow) : [];
         if (headerCells.length === 0)
             return '';
-        const separator = headerCells.map(() => '---').join(' | ');
+        const aligns = extractAligns(headerRow);
+        const separator = headerCells.map((_cell, i) => separatorFor(aligns[i] ?? null)).join(' | ');
         const bodySource = theadMatch
             ? tableContent.replace(theadMatch[0], '')
             : tableContent.replace(firstTrMatch?.[0] ?? '', '');
@@ -2833,13 +3293,19 @@ const htmlToMarkdown = (html) => {
         const lines = [`| ${headerCells.join(' | ')} |`, `| ${separator} |`, ...bodyRows.map((r) => `| ${r} |`)];
         return `\n${lines.join('\n')}\n`;
     });
-    // Block elements
-    md = md.replace(/<p[^>]*>([\s\S]*?)<\/p>/gi, (_, content) => `\n${stripTags(content).trim()}\n`);
+    // Block elements — a <br> inside a paragraph is a soft line break; turn it into a newline before
+    // the tag-strip removes it, so it round-trips (a single newline within a block renders as <br>)
+    md = md.replace(/<p[^>]*>([\s\S]*?)<\/p>/gi, (_, content) => `\n${stripTags(content.replace(/<br\s*\/?>/gi, '\n')).trim()}\n`);
+    // A <div> boundary acts as a paragraph boundary — clipboard HTML commonly uses divs as
+    // paragraphs, and silently stripping them would merge adjacent blocks into one.
+    md = md.replace(/<\/div\s*>/gi, '\n\n').replace(/<div[^>]*>/gi, '\n\n');
     md = md.replace(/<br\s*\/?>/gi, '\n');
     md = md.replace(/<hr\s*\/?>/gi, '\n---\n');
-    return unescapeHtml(stripTags(md))
-        .replace(/\n{3,}/g, '\n\n')
-        .trim();
+    md = unescapeHtml(stripTags(md)).replace(placeholderRe('U'), (_, i) => `<u>${underlines[+i] ?? ''}</u>`);
+    // aligned blocks are block-level, so pad with blank lines before collapsing so they survive as
+    // their own Markdown block
+    md = md.replace(placeholderRe('ALIGN'), (_, i) => `\n\n${alignedBlocks[+i] ?? ''}\n\n`);
+    return md.replace(/\n{3,}/g, '\n\n').trim();
 };
 
 const clamp = (value, min = 0, max = 100) => {
@@ -3145,190 +3611,6 @@ const [provideLocale, injectLocale] = createRootProvider(() => {
     name: 'Locale',
 });
 
-const [provideRenderer, injectRenderer] = createRootProvider(() => {
-    const rendererFactory = inject(RendererFactory2);
-    const renderer = rendererFactory.createRenderer(null, null);
-    const addClass = (element, ...classes) => {
-        classes.forEach((cls) => renderer.addClass(element, cls));
-    };
-    const removeClass = (element, ...classes) => {
-        classes.forEach((cls) => renderer.removeClass(element, cls));
-    };
-    const toggleClass = (element, className, force) => {
-        const shouldAdd = force ?? !element.classList.contains(className);
-        if (shouldAdd) {
-            renderer.addClass(element, className);
-        }
-        else {
-            renderer.removeClass(element, className);
-        }
-        return shouldAdd;
-    };
-    const setStyle = (element, style, flags) => {
-        Object.entries(style).forEach(([key, value]) => {
-            if (!Number.isNaN(Number(key)))
-                return;
-            if (value !== null && value !== undefined) {
-                renderer.setStyle(element, key, value, flags);
-            }
-            else {
-                renderer.removeStyle(element, key, flags);
-            }
-        });
-    };
-    const removeStyle = (element, style, flags) => {
-        if (!Number.isNaN(Number(style)))
-            return;
-        renderer.removeStyle(element, style, flags);
-    };
-    const removeStyles = (element, ...styles) => {
-        styles.forEach((style) => removeStyle(element, style));
-    };
-    const setCssProperty = (element, name, value) => {
-        if (value !== null && value !== undefined) {
-            renderer.setStyle(element, name, value, RendererStyleFlags2.DashCase);
-        }
-        else {
-            renderer.removeStyle(element, name, RendererStyleFlags2.DashCase);
-        }
-    };
-    const setCssProperties = (element, properties) => {
-        Object.entries(properties).forEach(([name, value]) => {
-            setCssProperty(element, name, value);
-        });
-    };
-    const setAttribute = (element, name, value, namespace) => {
-        if (value !== null && value !== undefined) {
-            renderer.setAttribute(element, name, value, namespace);
-        }
-        else {
-            renderer.removeAttribute(element, name, namespace);
-        }
-    };
-    const removeAttribute = (element, ...names) => {
-        names.forEach((name) => renderer.removeAttribute(element, name));
-    };
-    const setProperty = (element, name, value) => {
-        renderer.setProperty(element, name, value);
-    };
-    const setProperties = (element, properties) => {
-        Object.entries(properties).forEach(([name, value]) => {
-            renderer.setProperty(element, name, value);
-        });
-    };
-    const createElement = (tagName, namespace) => {
-        return renderer.createElement(tagName, namespace);
-    };
-    const createText = (value) => {
-        return renderer.createText(value);
-    };
-    const createComment = (value) => {
-        return renderer.createComment(value);
-    };
-    const appendChild = (parent, newChild) => {
-        renderer.appendChild(parent, newChild);
-    };
-    const insertBefore = (parent, newChild, refChild) => {
-        renderer.insertBefore(parent, newChild, refChild);
-    };
-    const removeChild = (parent, oldChild, isHostElement) => {
-        renderer.removeChild(parent, oldChild, isHostElement);
-    };
-    const selectRootElement = (selectorOrNode, preserveContent) => {
-        return renderer.selectRootElement(selectorOrNode, preserveContent);
-    };
-    const parentNode = (node) => {
-        return renderer.parentNode(node);
-    };
-    const nextSibling = (node) => {
-        return renderer.nextSibling(node);
-    };
-    const setValue = (node, value) => {
-        renderer.setValue(node, value);
-    };
-    const listen = (target, eventName, callback) => {
-        return renderer.listen(target, eventName, callback);
-    };
-    const destroyNode = (node) => {
-        if (renderer.destroyNode) {
-            renderer.destroyNode(node);
-        }
-    };
-    const replaceChild = (parent, newChild, oldChild) => {
-        renderer.insertBefore(parent, newChild, oldChild);
-        renderer.removeChild(parent, oldChild);
-    };
-    const empty = (element) => {
-        while (element.firstChild) {
-            renderer.removeChild(element, element.firstChild);
-        }
-    };
-    const setTextContent = (element, text) => {
-        renderer.setProperty(element, 'textContent', text);
-    };
-    const setInnerHTML = (element, html) => {
-        renderer.setProperty(element, 'innerHTML', html);
-    };
-    const setAttributes = (element, attributes, namespace) => {
-        Object.entries(attributes).forEach(([name, value]) => {
-            setAttribute(element, name, value, namespace);
-        });
-    };
-    const setDataAttributes = (element, data) => {
-        Object.entries(data).forEach(([key, value]) => {
-            setAttribute(element, `data-${key}`, value);
-        });
-    };
-    const moveBefore = (config) => {
-        const { newParent, child, before = null } = config;
-        if ('moveBefore' in newParent) {
-            try {
-                newParent.moveBefore(child, before);
-            }
-            catch {
-                newParent.insertBefore(child, before);
-            }
-        }
-        else {
-            newParent.insertBefore(child, before);
-        }
-    };
-    return {
-        addClass,
-        removeClass,
-        toggleClass,
-        setStyle,
-        removeStyle,
-        removeStyles,
-        setAttribute,
-        removeAttribute,
-        setProperty,
-        setProperties,
-        createElement,
-        createText,
-        createComment,
-        appendChild,
-        insertBefore,
-        removeChild,
-        selectRootElement,
-        parentNode,
-        nextSibling,
-        setValue,
-        listen,
-        destroyNode,
-        replaceChild,
-        empty,
-        setTextContent,
-        setInnerHTML,
-        setAttributes,
-        setDataAttributes,
-        setCssProperty,
-        setCssProperties,
-        moveBefore,
-        renderer,
-    };
-}, { name: 'Angular Renderer' });
-
 const [provideStyleManager, injectStyleManager] = createRootProvider(() => {
     const appRef = inject(ApplicationRef);
     const destroyRef = inject(DestroyRef);
@@ -4596,12 +4878,14 @@ const createAnchoredPositionCleanup = (strategy, paneElement, overlayRef, render
         middleware.push(flip({
             fallbackPlacements: strategy.fallbackPlacements ?? undefined,
             fallbackAxisSideDirection: 'start',
+            boundary: strategy.boundary,
         }));
         if (strategy.shift !== false) {
             middleware.push(shift({
                 crossAxis: typeof strategy.shift === 'object' ? (strategy.shift.crossAxis ?? false) : false,
                 limiter: limitShift(),
                 padding: strategy.viewportPadding ?? 8,
+                boundary: strategy.boundary,
             }));
         }
         // size must run AFTER shift so the available space is measured from the shifted position —
@@ -7563,5 +7847,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ANIMATABLE_TOKEN, ANIMATED_IF_TOKEN, ANIMATED_LIFECYCLE_TOKEN, ANIMATION_DEBUG_STORAGE_KEY, AT_LEAST_ONE_REQUIRED, AnimatableDirective, AnimatedIfDirective, AnimatedLifecycleDirective, AnimatedOverlayDirective, AutoSurfaceDirective, BOUNDARY_ELEMENT_TOKEN, BREAKPOINT_INSTANCE_TOKEN, BREAKPOINT_ORDER, COLOR_PROVIDER, ClickOutsideDirective, ColorInteractiveContainerDirective, ColorInteractiveDirective, ColorInteractiveExcludeDirective, ColorInteractiveHasFocusDirective, DEFAULT_MULTI_INSTANCE_RELS, DEFAULT_MULTI_INSTANCE_TAGS, DEFAULT_VIEWPORT_CONFIG, DISABLE_LOGGER_PARAM, DragHandleDirective, ET_DISABLE_SCROLL_TOP, ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE, ET_DISABLE_SCROLL_TOP_ON_PATH_PARAM_CHANGE, ET_PROPERTY_REMOVED, FOCUSABLE_SELECTOR, FOCUS_VISIBLE_TRACKER_TOKEN, HtmlToMarkdownPipe, IS_ARRAY_NOT_EMPTY, IS_EMAIL, InferMimeTypePipe, InitialsPipe, IsArrayNotEmpty, IsEmail, jsonLd as JsonLD, KeyPressManager, MUST_MATCH, MarkdownToHtmlPipe, MustMatch, NormalizeGameResultTypePipe, NormalizeMatchParticipantsPipe, NormalizeMatchScorePipe, NormalizeMatchStatePipe, NormalizeMatchTypePipe, PropsDirective, ProvideColorDirective, ProvideSurfaceDirective, RUNTIME_ERROR_NO_DATA, RepeatDirective, ResizeHandlesComponent, RuntimeError, SEO_DIRECTIVE_TOKEN, SURFACE_PROVIDER, SURFACE_TYPE, ScrollObserverDirective, ScrollObserverEndDirective, ScrollObserverStartDirective, SeoDirective, SlugifyPipe, StructuredDataComponent, SurfaceInteractiveDirective, ToArrayPipe, TypedQueryList, ValidateAtLeastOneRequired, Validators, animationDebugLog, applyAlternateBinding, applyAlternateLanguagesBindings, applyArticleBindings, applyAuthorBinding, applyCanonicalBinding, applyCenteredPosition, applyDescriptionBinding, applyGlobalPosition, applyHeadBinding, applyHeadTitleBinding, applyHostListener, applyHostListeners, applyInitialFocus, applyKeywordsBinding, applyLinkBinding, applyMetaBinding, applyNextBinding, applyOgBinding, applyOpenGraphBindings, applyPrevBinding, applyResourceHintsBindings, applyRobotsBinding, applySocialMediaBindings, applyStructuredDataBinding, applyTwitterCardBindings, areScrollStatesEqual, bindProps, boolBreakpointTransform, booleanBreakpointAttribute, boundingClientRectToElementRect, breakpointTransformBase, buildElementSignal, buildSignalEffects, canUseSessionMemory, clamp, clone, cloneFormGroup, computedTillFalsy, computedTillTruthy, controlValueSignal, controlValueSignalWithPrevious, createAnchoredPositionCleanup, createArrayPropertyBinding, createAutoSessionMemoryKey, createBulkPropertyBinding, createCanAnimateSignal, createComponentId, createCssColorThemeName, createCssSurfaceName, createDependencyStash, createDestroy, createDocumentElementSignal, createElementDictionary, createElementDimensions, createEmptyElementSignal, createFlipAnimation, createFlipAnimationGroup, createHostProps, createIsRenderedSignal, createLogger, createOverlayRuntimeRef, createPropHandlers, createPropertyBinding, createProps, createProvider, createRootProvider, createRootThemeCss, createRoute, createRouterState, createRxHostListener, createSessionMemory, createSetup, createStaticProvider, createStaticRootProvider, createSwatchCss, createSwipeTracker, createTailwindColorThemes, createTailwindCssVar, createTailwindRgbVar, createThemeStyle, createUserConsentProvider, deferredSignal, deleteCookie, easeElastic, easeIn, easeInOut, easeLinear, easeOut, easeOutBack, easeOutBackStrong, elementCanScroll, equal, firstElementSignal, focusElement, forceReflow, formatRuntimeError, fromNextFrame, getCookie, getDomain, getElementScrollCoordinates, getFocusableElements, getFormGroupValue, getGroupMatchPoints, getGroupMatchScore, getHeadingElement, getKnockoutMatchScore, getMatchScoreSubLine, getObjectProperty, getScrollContainerTarget, getScrollItemTarget, getScrollSnapTarget, hasCookie, htmlToMarkdown, inferMimeType, initials, injectAngularRootElement, injectBoundaryElement, injectBreakpointInput, injectBreakpointIsMatched, injectBreakpointObserver, injectCanHover, injectColorThemes, injectColorThemesPrefix, injectCurrentBreakpoint, injectDeviceInputType, injectDisplayOrientation, injectErrorTheme, injectFocusVisibleTracker, injectFragment, injectHasPrecisionInput, injectHasTouchInput, injectHostElement, injectIs2Xl, injectIsLandscape, injectIsLg, injectIsMd, injectIsPortrait, injectIsRouterInitialized, injectIsSm, injectIsXl, injectIsXs, injectLinkStore, injectLinkStoreConfig, injectLocale, injectMediaQueryIsMatched, injectMetaConfig, injectMetaStore, injectObserveBreakpoint, injectObserveMediaQuery, injectOverlayRuntime, injectPathParam, injectPathParamChanges, injectPathParams, injectPrefersReducedMotion, injectQueryParam, injectQueryParamChanges, injectQueryParams, injectRenderer, injectRoute, injectRouteData, injectRouteDataItem, injectRouteTitle, injectRouterEvent, injectRouterState, injectScrollbarDimensions, injectStructuredDataConfig, injectStructuredDataStore, injectStyleManager, injectSuccessTheme, injectSurfaceContextTracker, injectSurfaceThemes, injectSurfaceThemesPrefix, injectTemplateRef, injectTitleConfig, injectTitleStore, injectUrl, injectViewportConfig, injectViewportDimensions, injectViewportSize, injectWarningTheme, isAnimationDebugEnabled, isArray, isElementSignal, isElementVisible, isFocusable, isGroupMatch, isHTMLElement, isKnockoutMatch, isObject, markdownToHtml, maybeSignalValue, memoizeSignal, nextFrame, normalizeGameResultType, normalizeMatchParticipant, normalizeMatchParticipants, normalizeMatchScore, normalizeMatchState, normalizeMatchType, numberBreakpointAttribute, numberBreakpointTransform, previousSignalValue, provideBoundaryElement, provideBreakpointInstance, provideBreakpointObserver, provideColorThemes, provideColorThemesWithTailwind4, provideFocusVisibleTracker, provideLinkStore, provideLinkStoreConfig, provideLocale, provideMetaConfig, provideMetaStore, provideOverlayRuntime, provideRenderer, provideStructuredDataConfig, provideStructuredDataStore, provideStyleManager, provideSurfaceContextTracker, provideSurfaceThemesWithTailwind4, provideTitleConfig, provideTitleStore, provideViewportConfig, resetPositioningStyles, resolveSurfaceByElevation, round, routerDisableScrollTop, scrollToElement, setBackdropStyles, setBaseElementStyles, setCookie, setInputSignal, setupFocusTrap, setupPositioning, setupScrollRestoration, signalAnimatedNumber, signalAttributes, signalClasses, signalElementChildren, signalElementDimensions, signalElementIntersection, signalElementLastScrollDirection, signalElementMutations, signalElementScrollState, signalHostAttributes, signalHostClasses, signalHostElementDimensions, signalHostElementIntersection, signalHostElementLastScrollDirection, signalHostElementMutations, signalHostElementScrollState, signalHostStyles, signalIsRendered, signalStyles, slugify, switchQueryListChanges, syncSignal, templateComputed, toArray, toArrayTrackByFn, toStringBinding, transformOrReturn, typedBreakpointTransform, unbindProps, useCursorDragScroll, writeScrollbarSizeToCssVariables, writeViewportSizeToCssVariables, ɵProvideColorThemes, ɵProvideColorThemesPrefix, ɵProvideSurfaceThemes, ɵProvideSurfaceThemesPrefix };
+export { ANIMATABLE_TOKEN, ANIMATED_IF_TOKEN, ANIMATED_LIFECYCLE_TOKEN, ANIMATION_DEBUG_STORAGE_KEY, AT_LEAST_ONE_REQUIRED, AnimatableDirective, AnimatedIfDirective, AnimatedLifecycleDirective, AnimatedOverlayDirective, AutoSurfaceDirective, BOUNDARY_ELEMENT_TOKEN, BREAKPOINT_INSTANCE_TOKEN, BREAKPOINT_ORDER, COLOR_PROVIDER, ClickOutsideDirective, ColorInteractiveContainerDirective, ColorInteractiveDirective, ColorInteractiveExcludeDirective, ColorInteractiveHasFocusDirective, DEFAULT_MULTI_INSTANCE_RELS, DEFAULT_MULTI_INSTANCE_TAGS, DEFAULT_VIEWPORT_CONFIG, DISABLE_LOGGER_PARAM, DragHandleDirective, ET_DISABLE_SCROLL_TOP, ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE, ET_DISABLE_SCROLL_TOP_ON_PATH_PARAM_CHANGE, ET_PROPERTY_REMOVED, FOCUSABLE_SELECTOR, FOCUS_VISIBLE_TRACKER_TOKEN, HtmlToMarkdownPipe, IS_ARRAY_NOT_EMPTY, IS_EMAIL, InferMimeTypePipe, InitialsPipe, IsArrayNotEmpty, IsEmail, jsonLd as JsonLD, KeyPressManager, MUST_MATCH, MarkdownToHtmlPipe, MustMatch, NormalizeGameResultTypePipe, NormalizeMatchParticipantsPipe, NormalizeMatchScorePipe, NormalizeMatchStatePipe, NormalizeMatchTypePipe, PropsDirective, ProvideColorDirective, ProvideSurfaceDirective, RUNTIME_ERROR_NO_DATA, RepeatDirective, ResizeHandlesComponent, RuntimeError, SEO_DIRECTIVE_TOKEN, SURFACE_PROVIDER, SURFACE_TYPE, ScrollObserverDirective, ScrollObserverEndDirective, ScrollObserverStartDirective, SeoDirective, SlugifyPipe, StructuredDataComponent, SurfaceInteractiveDirective, ToArrayPipe, TypedQueryList, ValidateAtLeastOneRequired, Validators, animationDebugLog, applyAlternateBinding, applyAlternateLanguagesBindings, applyArticleBindings, applyAuthorBinding, applyCanonicalBinding, applyCenteredPosition, applyDescriptionBinding, applyGlobalPosition, applyHeadBinding, applyHeadTitleBinding, applyHostListener, applyHostListeners, applyInitialFocus, applyKeywordsBinding, applyLinkBinding, applyMetaBinding, applyNextBinding, applyOgBinding, applyOpenGraphBindings, applyPrevBinding, applyResourceHintsBindings, applyRobotsBinding, applySocialMediaBindings, applyStructuredDataBinding, applyTwitterCardBindings, areScrollStatesEqual, bindProps, boolBreakpointTransform, booleanBreakpointAttribute, boundingClientRectToElementRect, breakpointTransformBase, buildElementSignal, buildSignalEffects, canUseSessionMemory, clamp, clone, cloneFormGroup, computedTillFalsy, computedTillTruthy, controlValueSignal, controlValueSignalWithPrevious, copyToClipboard, createAnchoredPositionCleanup, createArrayPropertyBinding, createAutoSessionMemoryKey, createBulkPropertyBinding, createCanAnimateSignal, createComponentId, createCssColorThemeName, createCssSurfaceName, createDependencyStash, createDestroy, createDocumentElementSignal, createElementDictionary, createElementDimensions, createEmptyElementSignal, createFlipAnimation, createFlipAnimationGroup, createHostProps, createIsRenderedSignal, createLogger, createOverlayRuntimeRef, createPropHandlers, createPropertyBinding, createProps, createProvider, createRootProvider, createRootThemeCss, createRoute, createRouterState, createRxHostListener, createSessionMemory, createSetup, createStaticProvider, createStaticRootProvider, createSwatchCss, createSwipeTracker, createTailwindColorThemes, createTailwindCssVar, createTailwindRgbVar, createThemeStyle, createUserConsentProvider, deferredSignal, deleteCookie, easeElastic, easeIn, easeInOut, easeLinear, easeOut, easeOutBack, easeOutBackStrong, elementCanScroll, equal, firstElementSignal, focusElement, forceReflow, formatRuntimeError, fromNextFrame, getCookie, getDomain, getElementScrollCoordinates, getFocusableElements, getFormGroupValue, getGroupMatchPoints, getGroupMatchScore, getHeadingElement, getKnockoutMatchScore, getMatchScoreSubLine, getObjectProperty, getScrollContainerTarget, getScrollItemTarget, getScrollSnapTarget, hasCookie, htmlToMarkdown, inferMimeType, initials, injectAngularRootElement, injectAnimatedBlockSize, injectBoundaryElement, injectBreakpointInput, injectBreakpointIsMatched, injectBreakpointObserver, injectCanHover, injectColorThemes, injectColorThemesPrefix, injectCurrentBreakpoint, injectDeviceInputType, injectDisplayOrientation, injectErrorTheme, injectFocusVisibleTracker, injectFragment, injectHasPrecisionInput, injectHasTouchInput, injectHostElement, injectIs2Xl, injectIsLandscape, injectIsLg, injectIsMd, injectIsPortrait, injectIsRouterInitialized, injectIsSm, injectIsXl, injectIsXs, injectLinkStore, injectLinkStoreConfig, injectLocale, injectMediaQueryIsMatched, injectMetaConfig, injectMetaStore, injectObserveBreakpoint, injectObserveMediaQuery, injectOverlayRuntime, injectPathParam, injectPathParamChanges, injectPathParams, injectPrefersReducedMotion, injectQueryParam, injectQueryParamChanges, injectQueryParams, injectRenderer, injectRoute, injectRouteData, injectRouteDataItem, injectRouteTitle, injectRouterEvent, injectRouterState, injectScrollbarDimensions, injectStructuredDataConfig, injectStructuredDataStore, injectStyleManager, injectSuccessTheme, injectSurfaceContextTracker, injectSurfaceThemes, injectSurfaceThemesPrefix, injectTemplateRef, injectTitleConfig, injectTitleStore, injectUrl, injectViewportConfig, injectViewportDimensions, injectViewportSize, injectWarningTheme, isAnimationDebugEnabled, isArray, isElementSignal, isElementVisible, isFocusable, isGroupMatch, isHTMLElement, isKnockoutMatch, isObject, markdownToHtml, maybeSignalValue, memoizeSignal, nextFrame, normalizeGameResultType, normalizeMatchParticipant, normalizeMatchParticipants, normalizeMatchScore, normalizeMatchState, normalizeMatchType, numberBreakpointAttribute, numberBreakpointTransform, previousSignalValue, provideBoundaryElement, provideBreakpointInstance, provideBreakpointObserver, provideColorThemes, provideColorThemesWithTailwind4, provideFocusVisibleTracker, provideLinkStore, provideLinkStoreConfig, provideLocale, provideMetaConfig, provideMetaStore, provideOverlayRuntime, provideRenderer, provideStructuredDataConfig, provideStructuredDataStore, provideStyleManager, provideSurfaceContextTracker, provideSurfaceThemesWithTailwind4, provideTitleConfig, provideTitleStore, provideViewportConfig, readFromClipboard, resetPositioningStyles, resolveSurfaceByElevation, round, routerDisableScrollTop, scrollToElement, setBackdropStyles, setBaseElementStyles, setCookie, setInputSignal, setupFocusTrap, setupPositioning, setupScrollRestoration, signalAnimatedNumber, signalAttributes, signalClasses, signalElementChildren, signalElementDimensions, signalElementIntersection, signalElementLastScrollDirection, signalElementMutations, signalElementScrollState, signalHostAttributes, signalHostClasses, signalHostElementDimensions, signalHostElementIntersection, signalHostElementLastScrollDirection, signalHostElementMutations, signalHostElementScrollState, signalHostStyles, signalIsRendered, signalStyles, slugify, switchQueryListChanges, syncSignal, templateComputed, toArray, toArrayTrackByFn, toStringBinding, transformOrReturn, typedBreakpointTransform, unbindProps, useCursorDragScroll, writeScrollbarSizeToCssVariables, writeViewportSizeToCssVariables, ɵProvideColorThemes, ɵProvideColorThemesPrefix, ɵProvideSurfaceThemes, ɵProvideSurfaceThemesPrefix };
 //# sourceMappingURL=ethlete-core.mjs.map