@esportsplus/ui 0.56.4 → 0.57.0

package/build/components/tooltip/shared.js

@@ -0,0 +1,569 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { ReactiveArray, effect, flush, untrack } from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import overlay from '../overlay/index.js';
+import { finished } from '../../shared/animation.js';
+import { observe } from '../../shared/resize.js';
+import { fit, viewport } from '../../shared/viewport.js';
+import { cool, wait, warm } from './utilities.js';
+import '../frame/scss/index.scss';
+const template_0rdj5np3 = template_u1.template(`<span class='tooltip-shared-layer frame frame--swap'>`);
+const template_0rdj5np6 = template_u1.template(`<span class='tooltip-shared  ' popover='manual'><span class='tooltip-shared-box'>`);
+class ReactiveObject_0rdj5np0 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    #index = this[reactivity_u0.SIGNAL](-1);
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+    get index() {
+        return reactivity_u0.read(this.#index);
+    }
+    set index(_v1) {
+        reactivity_u0.write(this.#index, _v1);
+    }
+}
+class ReactiveObject_0rdj5np1 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+}
+const EDGE = 12;
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+const OPPOSITE = { e: 'w', n: 's', s: 'n', w: 'e' };
+const SIDES = ['e', 'n', 's', 'w'];
+let uid = 0;
+function place(anchor, direction, gap, height, width) {
+    let view = viewport(), room = {
+        e: view.width - anchor.right,
+        n: anchor.top,
+        s: view.height - anchor.bottom,
+        w: anchor.left
+    }, side = direction;
+    if (room[side] < (side === 'n' || side === 's' ? height : width) + gap + EDGE && room[OPPOSITE[side]] > room[side]) {
+        side = OPPOSITE[side];
+    }
+    if (side === 'n' || side === 's') {
+        return {
+            side,
+            x: fit(anchor.left + anchor.width / 2 - width / 2, width, view.width, EDGE),
+            y: side === 'n' ? anchor.top - gap - height : anchor.bottom
+        };
+    }
+    return {
+        side,
+        x: side === 'w' ? anchor.left - gap - width : anchor.right,
+        y: fit(anchor.top + anchor.height / 2 - height / 2, height, view.height, EDGE)
+    };
+}
+const shared = ({ delay: { close: closing = 0, open: opening = 0 } = {}, direction = 'n', dismiss, interactive = false, keep = false, state = new ReactiveObject_0rdj5np0() } = {}) => {
+    let active = null, bound = new Map(), box, count = 0, current = null, element, id = `tooltip-shared-${++uid}`, last = null, leaving = null, layers = new ReactiveArray(), next = null, pointer = 'mouse', presentation = new ReactiveObject_0rdj5np1(), shown = false, timer, unobserve, waiting, watched = null;
+    let stack = new template_u1.ArraySlot(layers, (layer) => {
+        let root_0rdj5np2 = template_0rdj5np3(), element_0rdj5np4 = root_0rdj5np2.firstChild;
+        template_u1.slot(element_0rdj5np4, layer.content, 1);
+        template_u1.setList(element_0rdj5np4, 'class', [
+            () => layer.state.active && '--active',
+            () => layer.state.leaving && 'frame--leaving'
+        ]);
+        template_u1.setList(element_0rdj5np4, 'style', () => layer.state.travel && `--travel-x: ${layer.state.travel.x}; --travel-y: ${layer.state.travel.y};`);
+        return root_0rdj5np2;
+    });
+    function bind(content) {
+        let index = count++;
+        let attributes = {
+            onconnect: (trigger) => {
+                bound.set(trigger, { content, index, layer: null });
+            },
+            ondisconnect: (trigger) => {
+                let layer = bound.get(trigger)?.layer;
+                if (current?.trigger === trigger || next?.trigger === trigger) {
+                    close();
+                }
+                bound.delete(trigger);
+                if (!layer) {
+                    return;
+                }
+                if (active === layer) {
+                    active = null;
+                }
+                if (leaving === layer) {
+                    leaving = null;
+                }
+                free(layer);
+            },
+            onfocusin: (e) => {
+                if (e.target.matches(':focus-visible')) {
+                    open(e.currentTarget, content);
+                }
+            },
+            onfocusout: (e) => {
+                if (!inside(e.relatedTarget)) {
+                    release(e.currentTarget);
+                }
+            },
+            onpointerout: (e) => {
+                let related = e.relatedTarget, trigger = e.currentTarget;
+                if (e.pointerType === 'touch' || trigger.contains(related) || inside(related)) {
+                    return;
+                }
+                release(trigger);
+            },
+            onpointerover: (e) => {
+                let trigger = e.currentTarget;
+                if ((interactive && e.pointerType === 'touch') || trigger.contains(e.relatedTarget)) {
+                    return;
+                }
+                request(trigger, content);
+            }
+        };
+        if (!interactive) {
+            return attributes;
+        }
+        return {
+            ...attributes,
+            'aria-expanded': 'false',
+            onclick: (e) => {
+                let trigger = e.currentTarget;
+                if (current?.trigger === trigger && (e.detail === 0 || pointer === 'touch')) {
+                    close();
+                }
+                else {
+                    open(trigger, content);
+                }
+            },
+            onkeydown: (e) => {
+                let first = current?.trigger === e.currentTarget ? active?.element?.querySelector(FOCUSABLE) : null;
+                if (e.key !== 'Tab' || e.shiftKey || !first) {
+                    return;
+                }
+                e.preventDefault();
+                first.focus();
+            },
+            onpointerdown: (e) => {
+                pointer = e.pointerType;
+            }
+        };
+    }
+    function cancel() {
+        clearTimeout(timer);
+        timer = undefined;
+        waiting?.();
+        waiting = undefined;
+        next = null;
+    }
+    function close() {
+        cancel();
+        if (!box || !current || !element) {
+            return;
+        }
+        if (opening) {
+            cool();
+        }
+        describe(current.trigger, false);
+        current = null;
+        state.active = false;
+        state.index = -1;
+        element.classList.remove('tooltip-shared--instant');
+        presentation.active = false;
+    }
+    function create(box, content, kept, travel) {
+        let layer = { content, kept, state: reactivity_u0.reactive({ active: false, leaving: false, travel }) };
+        layers.push(layer);
+        stack.flush();
+        layer.element = box.lastElementChild;
+        return layer;
+    }
+    function delegate({ content = (trigger) => trigger.dataset.tooltip ?? '', edge = false, selector = '[data-tooltip]' } = {}) {
+        function find(container, node) {
+            let trigger = node?.closest?.(selector);
+            if (!trigger || !container.contains(trigger)) {
+                return;
+            }
+            return {
+                anchor: () => {
+                    let rect = trigger.getBoundingClientRect();
+                    if (!edge) {
+                        return rect;
+                    }
+                    let box = container.getBoundingClientRect();
+                    return direction === 'n' || direction === 's'
+                        ? new DOMRect(rect.left, box.top, rect.width, box.height)
+                        : new DOMRect(box.left, rect.top, box.width, rect.height);
+                },
+                content: () => content(trigger),
+                trigger
+            };
+        }
+        return {
+            onfocusin: (e) => {
+                let target = find(e.currentTarget, e.target);
+                if (target && e.target.matches(':focus-visible')) {
+                    open(target.trigger, target.content, target.anchor);
+                }
+            },
+            onfocusout: (e) => {
+                let related = e.relatedTarget;
+                if (!e.currentTarget.contains(related) && !inside(related)) {
+                    release();
+                }
+            },
+            onpointerleave: (e) => {
+                if (e.pointerType !== 'touch' && !inside(e.relatedTarget)) {
+                    release();
+                }
+            },
+            onpointerover: (e) => {
+                let target = find(e.currentTarget, e.target);
+                if (target) {
+                    request(target.trigger, target.content, target.anchor);
+                }
+            }
+        };
+    }
+    function describe(trigger, on) {
+        if (interactive) {
+            trigger.setAttribute('aria-expanded', on ? 'true' : 'false');
+            if (on) {
+                trigger.setAttribute('aria-controls', id);
+            }
+            else {
+                trigger.removeAttribute('aria-controls');
+            }
+        }
+        else if (element?.getAttribute('aria-hidden') !== 'true') {
+            if (on) {
+                trigger.setAttribute('aria-describedby', id);
+            }
+            else {
+                trigger.removeAttribute('aria-describedby');
+            }
+        }
+    }
+    function drop(layer) {
+        if (!layer) {
+            return;
+        }
+        if (layer.kept) {
+            layer.state.active = false;
+            layer.state.leaving = false;
+            return;
+        }
+        free(layer);
+    }
+    function free(layer) {
+        let index = layers.indexOf(layer);
+        if (watched === layer) {
+            unwatch();
+        }
+        if (index !== -1) {
+            layers.splice(index, 1);
+        }
+    }
+    function indexOf(trigger) {
+        return bound.get(trigger)?.index ?? -1;
+    }
+    function hide() {
+        drop(active);
+        drop(leaving);
+        active = null;
+        leaving = null;
+        unwatch();
+        listen(false);
+        shown = false;
+    }
+    function inside(node) {
+        return !!node && (!!current?.trigger.contains(node) || (interactive && !!element?.contains(node)));
+    }
+    function listen(on) {
+        if (on) {
+            window.addEventListener('scroll', reposition, { capture: true, passive: true });
+        }
+        else {
+            window.removeEventListener('scroll', reposition, { capture: true });
+        }
+    }
+    function measure() {
+        if (!active?.element || !box || !current || !element) {
+            return;
+        }
+        let anchor = current.anchor(), padding = getComputedStyle(element), gap = parseFloat(padding.paddingBottom) + parseFloat(padding.paddingLeft) + parseFloat(padding.paddingRight) + parseFloat(padding.paddingTop), height = active.element.offsetHeight, width = active.element.offsetWidth, { side, x, y } = place(anchor, direction, gap, height, width), style = element.style;
+        for (let i = 0, n = SIDES.length; i < n; i++) {
+            element.classList.toggle(`tooltip-shared--${SIDES[i]}`, SIDES[i] === side);
+        }
+        style.setProperty('--shared-height', `${height}px`);
+        style.setProperty('--shared-width', `${width}px`);
+        style.setProperty('--shared-x', `${x}px`);
+        style.setProperty('--shared-y', `${y}px`);
+        box.style.transformOrigin = side === 'n' || side === 's'
+            ? `${anchor.left + anchor.width / 2 - x}px ${side === 'n' ? '100%' : '0%'}`
+            : `${side === 'e' ? '0%' : '100%'} ${anchor.top + anchor.height / 2 - y}px`;
+    }
+    function open(trigger, content, anchor = () => trigger.getBoundingClientRect()) {
+        if (current?.trigger === trigger) {
+            cancel();
+            return;
+        }
+        show({ anchor, content, trigger });
+    }
+    function release(trigger) {
+        if (trigger && trigger !== current?.trigger && trigger !== next?.trigger) {
+            return;
+        }
+        waiting?.();
+        waiting = undefined;
+        next = null;
+        if (!current || timer) {
+            return;
+        }
+        if (!closing) {
+            close();
+            return;
+        }
+        timer = setTimeout(close, closing);
+    }
+    function reposition() {
+        if (!current || !element) {
+            return;
+        }
+        if (!current.trigger.isConnected) {
+            close();
+            return;
+        }
+        measure();
+        element.classList.remove('tooltip-shared--gliding');
+    }
+    function render(attributes) {
+        let popup = overlay.popup({
+            contains: (_, node) => inside(node),
+            dismissOn: interactive ? dismiss : undefined,
+            ondismiss: (reason) => {
+                let trigger = current?.trigger, within = !!element?.contains(document.activeElement);
+                if (reason === 'escape' && within) {
+                    trigger?.focus();
+                }
+                close();
+            },
+            onclosed: hide,
+            onopen: measure,
+            popover: true,
+            state: presentation
+        });
+        let mode = interactive
+            ? {
+                onfocusout: (e) => {
+                    if (!inside(e.relatedTarget)) {
+                        release();
+                    }
+                },
+                onkeydown: (e) => {
+                    if (e.key !== 'Tab' || !active?.element || !current) {
+                        return;
+                    }
+                    let focusable = active.element.querySelectorAll(FOCUSABLE);
+                    if (document.activeElement !== focusable[e.shiftKey ? 0 : focusable.length - 1]) {
+                        return;
+                    }
+                    if (e.shiftKey) {
+                        e.preventDefault();
+                    }
+                    current.trigger.focus();
+                },
+                onpointerout: (e) => {
+                    if (e.pointerType !== 'touch' && !inside(e.relatedTarget)) {
+                        release();
+                    }
+                },
+                onpointerover: () => {
+                    clearTimeout(timer);
+                    timer = undefined;
+                }
+            }
+            : { role: 'tooltip' };
+        return (() => {
+            let root_0rdj5np5 = template_0rdj5np6(), element_0rdj5np7 = root_0rdj5np5.firstChild, element_0rdj5np8 = element_0rdj5np7.firstElementChild;
+            template_u1.slot(element_0rdj5np8, stack, 1);
+            template_u1.onconnect(element_0rdj5np8, (el) => { box = el; });
+            template_u1.setList(element_0rdj5np7, 'class', `tooltip-shared--${direction}`);
+            template_u1.setList(element_0rdj5np7, 'class', interactive && 'tooltip-shared--interactive');
+            template_u1.setProperty(element_0rdj5np7, 'id', id);
+            template_u1.setProperties(element_0rdj5np7, attributes);
+            template_u1.setProperties(element_0rdj5np7, mode);
+            template_u1.setProperties(element_0rdj5np7, {
+                ...popup,
+                onconnect: (el) => {
+                    element = el;
+                    popup.onconnect?.(el);
+                },
+                ondisconnect: (el) => {
+                    close();
+                    unwatch();
+                    popup.ondisconnect?.(el);
+                    for (let entry of bound.values()) {
+                        if (entry.layer) {
+                            free(entry.layer);
+                            entry.layer = null;
+                        }
+                    }
+                },
+                ondocumentkeydown: function (e) {
+                    if (e.key === 'Escape' && waiting && !current) {
+                        close();
+                        return;
+                    }
+                    popup.ondocumentkeydown?.call(this, e);
+                },
+                onwindowresize: () => {
+                    if (shown) {
+                        reposition();
+                    }
+                }
+            });
+            return root_0rdj5np5;
+        })();
+    }
+    function request(trigger, content, anchor = () => trigger.getBoundingClientRect()) {
+        clearTimeout(timer);
+        timer = undefined;
+        if (current?.trigger === trigger) {
+            return;
+        }
+        let target = { anchor, content, trigger };
+        if (shown) {
+            show(target);
+            return;
+        }
+        next = target;
+        waiting ??= wait(opening, () => {
+            waiting = undefined;
+            if (next) {
+                show(next);
+            }
+        });
+    }
+    function show(target) {
+        if (!box || !element) {
+            return;
+        }
+        let from = (current ?? last)?.anchor(), glide = shown, previous = current, same = last?.trigger === target.trigger;
+        cancel();
+        if (previous) {
+            describe(previous.trigger, false);
+        }
+        if (!shown) {
+            listen(true);
+            shown = true;
+        }
+        current = last = target;
+        element.classList.toggle('tooltip-shared--gliding', glide);
+        element.classList.toggle('tooltip-shared--instant', !glide && opening > 0 && warm());
+        if (!same || !active) {
+            swap(target, from, glide);
+        }
+        if (!presentation.active) {
+            presentation.active = true;
+            flush();
+        }
+        else {
+            measure();
+        }
+        state.index = indexOf(target.trigger);
+        state.active = true;
+        describe(target.trigger, true);
+    }
+    function swap(target, from, animate) {
+        if (!box) {
+            return;
+        }
+        let entry = keep ? bound.get(target.trigger) : undefined, to = target.anchor(), x = 0, y = 0;
+        if (from) {
+            let dx = to.left + to.width / 2 - (from.left + from.width / 2), dy = to.top + to.height / 2 - (from.top + from.height / 2), distance = Math.hypot(dx, dy);
+            if (distance) {
+                x = dx / distance;
+                y = dy / distance;
+            }
+        }
+        drop(leaving);
+        leaving = null;
+        if (active && animate) {
+            let outgoing = active;
+            outgoing.state.active = false;
+            outgoing.state.leaving = true;
+            outgoing.state.travel = { x, y };
+            leaving = outgoing;
+            queueMicrotask(() => {
+                if (outgoing.element) {
+                    void finished(outgoing.element).then(() => {
+                        if (leaving === outgoing) {
+                            drop(outgoing);
+                            leaving = null;
+                        }
+                    });
+                }
+            });
+        }
+        else {
+            drop(active);
+        }
+        let travel = animate ? { x, y } : null, layer = entry
+            ? (entry.layer ??= create(box, entry.content, true, travel))
+            : create(box, target.content, false, travel), node = layer.element;
+        active = layer;
+        if (!node) {
+            return;
+        }
+        if (animate) {
+            layer.state.travel = travel;
+            flush();
+            node.getBoundingClientRect();
+        }
+        layer.state.active = true;
+        flush();
+        unwatch();
+        unobserve = observe(node, measure);
+        watched = layer;
+    }
+    function unwatch() {
+        unobserve?.();
+        unobserve = undefined;
+        watched = null;
+    }
+    effect(() => {
+        if (!state.active && current) {
+            untrack(close);
+        }
+    });
+    effect(() => {
+        let index = state.index;
+        untrack(() => {
+            let showing = current ? indexOf(current.trigger) : -1;
+            if (index === showing) {
+                return;
+            }
+            if (index === -1) {
+                close();
+                return;
+            }
+            for (let [trigger, entry] of bound) {
+                if (entry.index === index) {
+                    queueMicrotask(() => open(trigger, entry.content));
+                    return;
+                }
+            }
+            state.index = showing;
+        });
+    });
+    return { bind, close, delegate, open, release, render, request };
+};
+export default shared;

package/build/components/tooltip/utilities.d.ts

@@ -1,4 +1,24 @@
+type Delay = {
+    close?: number;
+    open?: number;
+};
+declare function cool(): void;
 declare function content(element: HTMLElement): HTMLElement | undefined;
-declare function morph(element: HTMLElement, open: VoidFunction): (() => void) | undefined;
-declare function morphing(active: boolean): (e: AnimationEvent | TransitionEvent) => void;
-export { content, morph, morphing };
+declare function morph(element: HTMLElement, open: VoidFunction, tooltip?: HTMLElement | undefined, anchor?: HTMLElement): (() => void) | undefined;
+declare function morphing(state: {
+    morphing: boolean;
+}, active: boolean): (e: AnimationEvent | TransitionEvent) => void;
+declare function morphs(state: {
+    morphing: boolean;
+}): {
+    onanimationcancel: (e: AnimationEvent | TransitionEvent) => void;
+    onanimationend: (e: AnimationEvent | TransitionEvent) => void;
+    onanimationstart: (e: AnimationEvent | TransitionEvent) => void;
+    ontransitioncancel: (e: AnimationEvent | TransitionEvent) => void;
+    ontransitionend: (e: AnimationEvent | TransitionEvent) => void;
+    ontransitionrun: (e: AnimationEvent | TransitionEvent) => void;
+};
+declare function wait(delay: number, open: VoidFunction): (() => void) | undefined;
+declare function warm(): boolean;
+export { content, cool, morph, morphing, morphs, wait, warm };
+export type { Delay };

package/build/components/tooltip/utilities.js

@@ -1,4 +1,12 @@
+import * as template_u1 from '@esportsplus/template';
+import { render } from '@esportsplus/template';
+const template_1adof9k0 = template_u1.template(`<svg aria-hidden='true' height='0' style='position: absolute;' width='0'><filter color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse' height='4000' id='tooltip-morph-goo' width='4000' x='-2000' y='-2000'><feGaussianBlur in='SourceGraphic' result='blur' stdDeviation='8' /><feColorMatrix in='blur' result='goo' type='matrix' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 24 -12' /><feComposite in='SourceGraphic' in2='goo' operator='over' />`);
 const GOO = 'tooltip-morph-goo';
+const WARM_FOR = 500;
+let closedAt = 0;
+function cool() {
+    closedAt = Date.now();
+}
 function content(element) {
     let candidates = element.querySelectorAll('.tooltip-content, .tooltip-message');
     for (let i = 0, n = candidates.length; i < n; i++) {
@@ -11,28 +19,23 @@ function goo() {
     if (document.getElementById(GOO)) {
         return;
     }
-    document.body.insertAdjacentHTML('beforeend', `<svg aria-hidden='true' height='0' style='position: absolute;' width='0'>
-            <filter color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse' height='4000' id='${GOO}' width='4000' x='-2000' y='-2000'>
-                <feGaussianBlur in='SourceGraphic' result='blur' stdDeviation='8' />
-                <feColorMatrix in='blur' result='goo' type='matrix' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 24 -12' />
-                <feComposite in='SourceGraphic' in2='goo' operator='over' />
-            </filter>
-        </svg>`);
-}
-function morph(element, open) {
-    let tooltip = content(element);
-    if (!tooltip || !(tooltip.classList.contains('tooltip-content--morph') || tooltip.classList.contains('tooltip-message--morph'))) {
+    render(document.body, () => template_1adof9k0());
+}
+function morph(element, open, tooltip = content(element), anchor = element) {
+    if (!tooltip?.matches('.tooltip-menu-panel--expand, .tooltip-content--morph, .tooltip-message--morph')) {
         open();
         return;
     }
-    goo();
-    let box = tooltip.getBoundingClientRect(), rect = element.getBoundingClientRect(), style = tooltip.style;
+    if (tooltip.matches('.tooltip-content--morph, .tooltip-message--morph')) {
+        goo();
+    }
+    let box = tooltip.getBoundingClientRect(), rect = anchor.getBoundingClientRect(), scale = box.width / tooltip.offsetWidth || 1, style = tooltip.style;
     style.transition = 'none';
-    style.setProperty('--morph-bottom', `${box.bottom - rect.bottom}px`);
-    style.setProperty('--morph-left', `${rect.left - box.left}px`);
-    style.setProperty('--morph-radius', getComputedStyle(element).borderTopLeftRadius);
-    style.setProperty('--morph-right', `${box.right - rect.right}px`);
-    style.setProperty('--morph-top', `${rect.top - box.top}px`);
+    style.setProperty('--morph-bottom', `${(box.bottom - rect.bottom) / scale}px`);
+    style.setProperty('--morph-left', `${(rect.left - box.left) / scale}px`);
+    style.setProperty('--morph-radius', getComputedStyle(anchor).borderTopLeftRadius);
+    style.setProperty('--morph-right', `${(box.right - rect.right) / scale}px`);
+    style.setProperty('--morph-top', `${(rect.top - box.top) / scale}px`);
     tooltip.getBoundingClientRect();
     let frame = requestAnimationFrame(() => {
         style.removeProperty('transition');
@@ -43,7 +46,7 @@ function morph(element, open) {
         style.removeProperty('transition');
     };
 }
-function morphing(active) {
+function morphing(state, active) {
     return (e) => {
         let element = e.currentTarget, tooltip = e.target;
         if (tooltip.closest('.tooltip') !== element ||
@@ -51,8 +54,30 @@ function morphing(active) {
             return;
         }
         if ('propertyName' in e ? e.propertyName === 'clip-path' : e.animationName === 'tooltip-morph-close') {
-            element.classList.toggle('--morphing', active);
+            state.morphing = active;
         }
     };
 }
-export { content, morph, morphing };
+function morphs(state) {
+    let start = morphing(state, true), stop = morphing(state, false);
+    return {
+        onanimationcancel: stop,
+        onanimationend: stop,
+        onanimationstart: start,
+        ontransitioncancel: stop,
+        ontransitionend: stop,
+        ontransitionrun: start
+    };
+}
+function wait(delay, open) {
+    if (!delay || warm()) {
+        open();
+        return;
+    }
+    let timer = setTimeout(open, delay);
+    return () => clearTimeout(timer);
+}
+function warm() {
+    return Date.now() - closedAt < WARM_FOR;
+}
+export { content, cool, morph, morphing, morphs, wait, warm };