@c9up/nebula 0.1.4 → 0.1.6

package/dist/primitives/presence.js

@@ -19,7 +19,12 @@ export function presence(initiallyOpen = false) {
     const state = signal(initiallyOpen ? "open" : "closed");
     let element = null;
     let pendingUnmount = false;
+    let deadline;
     function finishClose() {
+        if (deadline !== undefined) {
+            clearTimeout(deadline);
+            deadline = undefined;
+        }
         if (!pendingUnmount)
             return;
         pendingUnmount = false;
@@ -34,9 +39,38 @@ export function presence(initiallyOpen = false) {
     function onAnimationEnd(event) {
         if (event.target !== element)
             return;
+        // The FIRST event used to end the close, so a surface running a fade and
+        // a slide together was unmounted when the shorter one finished — the
+        // other visibly cut off. Each declared name reports for itself, and the
+        // close waits until none is outstanding.
+        const name = reportedName(event);
+        if (typeof name === "string" && outstanding.size > 0) {
+            reportName(outstanding, name);
+            if (outstanding.size > 0)
+                return;
+        }
         finishClose();
     }
+    /** Declared animations and transitions still waiting to report. */
+    let outstanding = new Map();
+    /**
+     * Arm the wait for `el`'s exit, replacing whatever the last one armed.
+     *
+     * Overwriting `deadline` without clearing it left the older timer running:
+     * it fired mid-way through a LATER close and unmounted a surface that was
+     * still animating, cutting the exit off at the previous close's schedule.
+     */
+    function armDeadline(el) {
+        if (deadline !== undefined)
+            clearTimeout(deadline);
+        outstanding = declaredNames(el);
+        deadline = setTimeout(finishClose, declaredDuration(el) + SAFETY_MARGIN_MS);
+    }
     function detach() {
+        if (deadline !== undefined) {
+            clearTimeout(deadline);
+            deadline = undefined;
+        }
         if (element === null)
             return;
         element.removeEventListener("animationend", onAnimationEnd);
@@ -49,7 +83,16 @@ export function presence(initiallyOpen = false) {
         mounted,
         state,
         open() {
+            // The close in progress is CANCELLED, not just un-pended. Clearing
+            // `pendingUnmount` alone left its deadline armed and its names
+            // outstanding, so the timer from a close the user had already undone
+            // went on to unmount the NEXT one part-way through.
             pendingUnmount = false;
+            if (deadline !== undefined) {
+                clearTimeout(deadline);
+                deadline = undefined;
+            }
+            outstanding.clear();
             mounted(true);
             state("open");
         },
@@ -64,14 +107,35 @@ export function presence(initiallyOpen = false) {
                 return;
             }
             pendingUnmount = true;
-            if (!isAnimating(element))
+            if (!isAnimating(element)) {
                 finishClose();
+                return;
+            }
+            // The same deadline `onExitFinished` has, and for the same reason:
+            // `animationend` is not promised by anything. Without it a declared
+            // animation the browser never runs left this mounted for good —
+            // `onExitFinished` was bounded and the public presence API was not.
+            armDeadline(element);
         },
         attach(next) {
+            const wasClosing = pendingUnmount;
             detach();
             element = next;
-            if (element === null)
+            if (element === null) {
+                // Nothing left to wait for, and nothing to wait WITH: a close
+                // still pending would otherwise never complete.
+                if (wasClosing)
+                    finishClose();
                 return;
+            }
+            if (wasClosing) {
+                // `detach()` cleared the deadline. Handing over a new element
+                // mid-close without arming another left the surface mounted for
+                // good — the exact failure the deadline exists to prevent,
+                // reintroduced by the handover.
+                pendingUnmount = true;
+                armDeadline(element);
+            }
             element.addEventListener("animationend", onAnimationEnd);
             element.addEventListener("animationcancel", onAnimationEnd);
             element.addEventListener("transitionend", onAnimationEnd);
@@ -98,19 +162,49 @@ export function onExitFinished(element, done) {
         done();
         return () => { };
     }
+    // Which declared animations and transitions have yet to report. The FIRST
+    // event used to end the wait, so a surface running a fade and a slide
+    // together had its node removed when the shorter one finished and the other
+    // was visibly cut off. `presence()` already waited for all of them; the
+    // portalled surfaces — Dialog, Popover, Select, Tooltip — go through here
+    // instead, and did not.
+    const outstanding = declaredNames(element);
     function finish(event) {
         // Bubbled events from children would cut the parent's exit short.
         if (event.target !== element)
             return;
+        const name = reportedName(event);
+        if (typeof name === "string" && outstanding.size > 0) {
+            reportName(outstanding, name);
+            if (outstanding.size > 0)
+                return;
+        }
         cancel();
         done();
     }
     function cancel() {
+        if (safety !== undefined)
+            clearTimeout(safety);
         element.removeEventListener("animationend", finish);
         element.removeEventListener("animationcancel", finish);
         element.removeEventListener("transitionend", finish);
         element.removeEventListener("transitioncancel", finish);
     }
+    // A deadline, because `animationName` is a DECLARATION, not a promise.
+    //
+    // The computed style reads back the declared name whether or not those
+    // keyframes exist anywhere — an application that has not imported the
+    // stylesheet, or that scopes it away, declares an animation the browser
+    // will never run. `animationend` then never fires, `done()` never runs, and
+    // the node stays in the document: every closed Dialog, Select, Popover and
+    // Tooltip piles up as an invisible layer swallowing the clicks underneath.
+    //
+    // That turns a missing stylesheet — cosmetic — into a page that stops
+    // responding, which reads as "the floating layer does not work".
+    const safety = setTimeout(() => {
+        cancel();
+        done();
+    }, declaredDuration(element) + SAFETY_MARGIN_MS);
     element.addEventListener("animationend", finish);
     element.addEventListener("animationcancel", finish);
     element.addEventListener("transitionend", finish);
@@ -125,13 +219,315 @@ export function onExitFinished(element, done) {
  * mean there is nothing to wait for, and waiting anyway would strand the node
  * in the DOM forever — the failure mode this check exists to prevent.
  */
+/**
+ * Slack added to the declared duration before the deadline fires.
+ *
+ * Long enough that a real animation always wins the race — the listener is what
+ * should end the wait — and short enough that a stuck overlay clears within a
+ * frame or two of when it should have.
+ */
+const SAFETY_MARGIN_MS = 100;
+/**
+ * How long the element SAYS its exit lasts: the longest declared animation or
+ * transition, plus its delay. Capped, because a stylesheet is free to declare
+ * minutes and the deadline exists to bound the wait, not to honour it.
+ */
+function declaredDuration(element) {
+    if (typeof getComputedStyle !== "function")
+        return 0;
+    const style = getComputedStyle(element);
+    let longest = 0;
+    const consider = (total) => {
+        if (total > longest)
+            longest = total;
+    };
+    // PER ENTRY. The longest duration and the longest delay used to be taken
+    // independently, so a short-but-late animation beside a long-but-immediate
+    // one produced a deadline neither of them needed — and the iteration count
+    // was not read at all, so 120ms played twice was cut off at 220.
+    const names = splitList(style.animationName);
+    const durations = splitList(style.animationDuration);
+    const delays = splitList(style.animationDelay);
+    const counts = splitList(style.animationIterationCount);
+    for (const [index, name] of names.entries()) {
+        if (name === "" || name === "none")
+            continue;
+        consider(parseTime(atIndex(durations, index)) *
+            parseIterations(atIndex(counts, index)) +
+            parseTime(atIndex(delays, index)));
+    }
+    // A property named twice in `transition-property` is ONE transition — the
+    // last entry is the one that runs (CSS Transitions Level 1) — so its
+    // duration and delay are read from that index.
+    const properties = splitList(style.transitionProperty);
+    const transitionDurations = splitList(style.transitionDuration);
+    const transitionDelays = splitList(style.transitionDelay);
+    const lastEntry = new Map();
+    for (const [index, property] of properties.entries()) {
+        if (property === "" || property === "none")
+            continue;
+        lastEntry.set(property, index);
+    }
+    for (const index of lastEntry.values()) {
+        consider(parseTime(atIndex(transitionDurations, index)) +
+            parseTime(atIndex(transitionDelays, index)));
+    }
+    return Math.min(longest, 5000);
+}
+/**
+ * A comma-separated CSS list, entry by entry.
+ *
+ * Tolerates an absent longhand: a computed style is not always the complete
+ * one — a test double carries what its test cares about, and not every engine
+ * exposes every longhand.
+ */
+function splitList(value) {
+    if (typeof value !== "string")
+        return [];
+    return value.split(",").map((part) => part.trim());
+}
+/**
+ * The entry at `index`, the way CSS reads one: a list shorter than the
+ * animation list repeats to cover it.
+ */
+function atIndex(list, index) {
+    if (list.length === 0)
+        return "";
+    return list[index % list.length] ?? "";
+}
+/** One CSS time, in milliseconds. */
+function parseTime(value) {
+    const numeric = Number.parseFloat(value);
+    if (Number.isNaN(numeric))
+        return 0;
+    return value.endsWith("ms") ? numeric : numeric * 1000;
+}
+/**
+ * How many times one animation plays.
+ *
+ * `infinite` counts as one: it never fires `animationend`, so the deadline is
+ * the only way out and there is nothing to be gained by waiting longer.
+ */
+function parseIterations(value) {
+    const numeric = Number.parseFloat(value);
+    if (!Number.isFinite(numeric) || numeric <= 0)
+        return 1;
+    return numeric;
+}
+/**
+ * Is a `@keyframes` of this name defined anywhere in the document?
+ *
+ * `animationName` is a DECLARATION. It reads back whatever the stylesheet said,
+ * whether or not the keyframes behind it exist — so an application that has not
+ * imported nebula's stylesheet declares animations the browser will never run,
+ * and the only honest answer comes from looking for the rule itself.
+ *
+ * Answers `true` when it cannot tell. A cross-origin stylesheet throws on
+ * `cssRules`, and refusing to animate because a font sheet was unreadable would
+ * be a worse trade than waiting: the deadline in `onExitFinished` already bounds
+ * the cost of being wrong here.
+ */
+function keyframesExist(doc, name) {
+    const cache = cacheFor(doc);
+    const cached = cache.get(name);
+    if (cached !== undefined)
+        return cached;
+    let found = false;
+    let readable = false;
+    for (const sheet of Array.from(doc.styleSheets)) {
+        let rules;
+        try {
+            const own = sheet.cssRules;
+            if (own === null)
+                continue;
+            rules = own;
+        }
+        catch {
+            // Cross-origin: not ours to read, and not evidence of anything.
+            continue;
+        }
+        readable = true;
+        if (containsKeyframes(rules, name)) {
+            found = true;
+            break;
+        }
+    }
+    const answer = found || !readable;
+    // Cached only when it was FOUND. A negative is re-checked, because a
+    // stylesheet arriving later is exactly what turns it positive.
+    if (answer)
+        cache.set(name, true);
+    return answer;
+}
+/**
+ * Walk a rule list, descending into group rules.
+ *
+ * `@keyframes` inside `@media`, `@supports` or `@layer` is a nested rule, not a
+ * top-level one — a flat scan of the sheet reported it missing and the caller
+ * concluded the stylesheet was absent.
+ */
+function containsKeyframes(rules, name) {
+    for (const rule of Array.from(rules)) {
+        if (isKeyframesNamed(rule, name))
+            return true;
+        // `cssRules` on a group rule (media, supports, layer); absent on others.
+        const nested = Reflect.get(rule, "cssRules");
+        if (nested !== null &&
+            typeof nested === "object" &&
+            typeof Reflect.get(nested, "length") === "number" &&
+            containsKeyframes(nested, name)) {
+            return true;
+        }
+    }
+    return false;
+}
+/**
+ * Are all the animations this element declares actually defined?
+ *
+ * `animation-name` is a LIST: `fade-out, slide-out` is two names, and looking
+ * the whole string up as one found nothing and reported both missing. Every
+ * name has to resolve, because waiting on any undefined one is what strands the
+ * node.
+ */
+function splitNames(animationName) {
+    return animationName
+        .split(",")
+        .map((part) => part.trim())
+        .filter((part) => part !== "" && part !== "none");
+}
+/** Which of the declared animations have no `@keyframes` anywhere. */
+function undefinedKeyframes(doc, animationName) {
+    return splitNames(animationName).filter((name) => !keyframesExist(doc, name));
+}
+/**
+ * Per-DOCUMENT memo, invalidated when the stylesheets change.
+ *
+ * A single global map was wrong three ways. An answer cached before the
+ * stylesheet finished loading stayed wrong for the life of the page; an iframe
+ * and its parent share neither styles nor documents but shared the cache; and
+ * nothing ever expired, so a sheet added later never took effect.
+ *
+ * Keyed on the document and on how many sheets it had when the answer was
+ * computed: a new stylesheet changes the count and the answers are recomputed.
+ * A `WeakMap` so a detached document does not keep its cache alive.
+ */
+const KEYFRAME_CACHE = new WeakMap();
+/**
+ * The memo for this document.
+ *
+ * Only POSITIVE answers are kept. A "found" is durable — keyframes do not
+ * usually disappear — while a "missing" is exactly the answer a later
+ * stylesheet can change, and keying on the sheet COUNT missed every way that
+ * happens without one being added: `insertRule`, `replaceSync`, HMR, or editing
+ * an existing `<style>`. Re-walking on a negative costs a scan only when
+ * something is already wrong.
+ */
+function cacheFor(doc) {
+    const existing = KEYFRAME_CACHE.get(doc);
+    if (existing !== undefined)
+        return existing;
+    const answers = new Map();
+    KEYFRAME_CACHE.set(doc, answers);
+    return answers;
+}
+function isKeyframesNamed(rule, name) {
+    // `instanceof CSSKeyframesRule` is unreliable across documents (an iframe
+    // has its own constructors), so the shape is checked instead.
+    const named = Reflect.get(rule, "name");
+    return typeof named === "string" && named === name;
+}
+/**
+ * Say once that the stylesheet is missing, and what to do about it.
+ *
+ * The symptom without this is not "my overlays do not animate" — which would
+ * point straight at a missing sheet — but "the floating layer behaves oddly",
+ * which points everywhere else. Warned rather than thrown: a missing stylesheet
+ * is a cosmetic dependency, and taking an application down over one is a worse
+ * trade than a line in the console.
+ */
+function warnMissingKeyframes(name) {
+    if (WARNED.has(name))
+        return;
+    WARNED.add(name);
+    console.warn(`[nebula] the animation '${name}' is declared but its @keyframes are defined nowhere, so this element closes without animating. Overlay animations come from tw-animate-css (UnoCSS: unocss-preset-animations) — check your stylesheet imports it, or generate one with \`nebula init\`.`);
+}
+const WARNED = new Set();
+/** Mark one report against `name`, if it is one we are waiting for. */
+function reportName(outstanding, name) {
+    const left = outstanding.get(name);
+    if (left === undefined)
+        return;
+    if (left <= 1)
+        outstanding.delete(name);
+    else
+        outstanding.set(name, left - 1);
+}
+/**
+ * Which animation or transition an end event is reporting for.
+ *
+ * `undefined` when the event carries neither — jsdom's plain `Event`, and any
+ * synthetic one — in which case the caller falls back to treating it as the end
+ * of the whole exit.
+ */
+function reportedName(event) {
+    if ("animationName" in event)
+        return event.animationName;
+    if ("propertyName" in event)
+        return event.propertyName;
+    return undefined;
+}
+function declaredNames(element) {
+    const names = new Map();
+    if (typeof getComputedStyle !== "function")
+        return names;
+    const style = getComputedStyle(element);
+    // An animation named twice IS two animations, and reports twice.
+    for (const name of splitList(style.animationName)) {
+        if (name === "" || name === "none" || name === "all")
+            continue;
+        names.set(name, (names.get(name) ?? 0) + 1);
+    }
+    // A transition property named twice is ONE transition — the last entry
+    // wins (CSS Transitions Level 1) — so it reports once. Counting the
+    // duplicate made every such exit run to the deadline instead of ending
+    // when the browser said it had.
+    if (parseDuration(style.transitionDuration) > 0) {
+        const seen = new Set();
+        for (const property of splitList(style.transitionProperty)) {
+            if (property === "" || property === "none" || property === "all") {
+                continue;
+            }
+            if (seen.has(property))
+                continue;
+            seen.add(property);
+            names.set(property, (names.get(property) ?? 0) + 1);
+        }
+    }
+    return names;
+}
 function isAnimating(element) {
     if (typeof getComputedStyle !== "function")
         return false;
     const style = getComputedStyle(element);
-    const hasAnimation = style.animationName !== "" && style.animationName !== "none";
-    if (hasAnimation)
-        return true;
+    const declared = style.animationName;
+    const hasAnimation = declared !== "" && declared !== "none";
+    if (hasAnimation) {
+        // Declared is not the same as defined. Waiting on an animation whose
+        // keyframes exist nowhere is what left every closed overlay in the
+        // document; the deadline now bounds that, but there is no reason to
+        // wait at all when the answer is knowable — and every reason to say so.
+        // ANY defined animation is a reason to wait: refusing because a second
+        // one is missing truncated the first, which was running perfectly well.
+        // The missing ones are still named, because they are still a mistake.
+        const missing = undefinedKeyframes(element.ownerDocument, declared);
+        if (missing.length < splitNames(declared).length) {
+            for (const name of missing)
+                warnMissingKeyframes(name);
+            return true;
+        }
+        warnMissingKeyframes(declared);
+        return parseDuration(style.transitionDuration) > 0;
+    }
     return parseDuration(style.transitionDuration) > 0;
 }
 /** Longest duration in a comma-separated CSS time list, in milliseconds. */