@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/dist/Layer/modalOutlet.d.ts

@@ -1,9 +1,10 @@
 /**
  * @file modalOutlet.ts
- * @input The open Dialog `<dialog>` elements
+ * @input The open Dialog and scrim BottomSheet `<dialog>` elements
  * @output Exports useModalOutlet (a modal supplies its outlet),
- *   getActiveModalOutlet, and subscribeModalOutlets (a global host follows
- *   the latest one)
+ *   getActiveModalOutlet, subscribeModalOutlets (a global host follows the
+ *   latest one), and notifyTopLayerEntry (a non-modal surface entered the
+ *   top layer above the hosts)
  * @position Private layer infrastructure; spec:AST-003 FR18
  *
  * A native modal makes everything outside it inert and paints over every
@@ -14,19 +15,56 @@
  * fallback) must see modals rendered by the app. Listeners run synchronously,
  * so a host can leave a modal before React removes it from the document.
  *
+ * A non-modal top-layer surface (a `popover="manual"` host shown by
+ * `showPopover()`, such as a `hasScrim={false}` BottomSheet) blocks nothing,
+ * so it is not an outlet, but it still enters the top layer above the hosts
+ * shown before it. It announces the entry here, and a host re-enters the top
+ * layer in place so it paints above the surface again.
+ *
  * SYNC: When modified, update:
  * - /packages/core/src/Toast/ToastViewport.modalHost.test.tsx
  * - /docs/architecture/layer-runtime.md
  */
 import { type RefObject } from 'react';
+/**
+ * Why a host is told to place itself: `outlet` when the latest open modal
+ * may have changed (the host moves into it or back out), `entry` when a
+ * non-modal surface entered the top layer above the host (the host stays
+ * where it is and re-enters the top layer).
+ */
+export type ModalOutletChange = 'outlet' | 'entry';
 /** The latest open native modal, or null when none is open. */
 export declare function getActiveModalOutlet(): HTMLDialogElement | null;
-/** Call `listener` whenever the latest open native modal may have changed. */
-export declare function subscribeModalOutlets(listener: () => void): () => void;
+/**
+ * Call `listener` whenever the latest open native modal may have changed
+ * (`'outlet'`), or a non-modal surface entered the top layer (`'entry'`).
+ */
+export declare function subscribeModalOutlets(listener: (change: ModalOutletChange) => void): () => void;
+/**
+ * A surface was just shown into the top layer above the global hosts: a
+ * non-modal surface shown (`showPopover()` on a `popover="manual"` host), or
+ * a modal dialog closed and shown again by a stack keeping its order, which
+ * carries the host inside it back above the host's own popover. Global hosts
+ * re-enter the top layer so they paint above it, as they do above a modal
+ * that just opened.
+ */
+export declare function notifyTopLayerEntry(): void;
 /**
  * Supply `ref`'s `<dialog>` as the passive global outlet while it is an open
  * modal. Call it after the effect that runs `showModal()`, so the modal is
  * already in the top layer when global hosts move into it.
+ *
+ * `isLatest`, `group`, and `hostKey` are for a caller whose modals are ordered among
+ * themselves by something other than the order they were supplied in (a
+ * stack of bottom sheets that is re-shown to keep open order, or reveals a
+ * sheet by closing the one above it). By default the most recently supplied
+ * outlet is the latest, which is the native top layer's order for modals
+ * opened one after another. Such a caller names its `group` and passes the
+ * ordering's own answer as `isLatest`: when it turns true the outlet is
+ * raised to the top of its group — above the group's other outlets, never
+ * above an outlet of another group supplied later, such as a Dialog opened
+ * from the sheet — and when it turns false the outlet stays supplied (every
+ * open modal supplies one) but is no longer the group's latest.
  */
-export declare function useModalOutlet(ref: RefObject<HTMLDialogElement | null>, isActive: boolean): void;
+export declare function useModalOutlet(ref: RefObject<HTMLDialogElement | null>, isActive: boolean, isLatest?: boolean, group?: string, hostKey?: string | null): void;
 //# sourceMappingURL=modalOutlet.d.ts.map

package/dist/Layer/modalOutlet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modalOutlet.d.ts","sourceRoot":"","sources":["../../src/Layer/modalOutlet.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAA6B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AA6BjE,+DAA+D;AAC/D,wBAAgB,oBAAoB,IAAI,iBAAiB,GAAG,IAAI,CAE/D;AAED,8EAA8E;AAC9E,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAKtE;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,GAAG,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,EACxC,QAAQ,EAAE,OAAO,GAChB,IAAI,CA8BN"}
+{"version":3,"file":"modalOutlet.d.ts","sourceRoot":"","sources":["../../src/Layer/modalOutlet.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAAqC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AASzE;;;;;GAKG;AACH,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,OAAO,CAAC;AA6EnD,+DAA+D;AAC/D,wBAAgB,oBAAoB,IAAI,iBAAiB,GAAG,IAAI,CAE/D;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,GAC5C,MAAM,IAAI,CAKZ;AAED;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,IAAI,IAAI,CAE1C;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,cAAc,CAC5B,GAAG,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,EACxC,QAAQ,EAAE,OAAO,EACjB,QAAQ,GAAE,OAAc,EACxB,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GACtB,IAAI,CAqEN"}

package/dist/Layer/modalOutlet.js

@@ -4,10 +4,11 @@
 
 /**
  * @file modalOutlet.ts
- * @input The open Dialog `<dialog>` elements
+ * @input The open Dialog and scrim BottomSheet `<dialog>` elements
  * @output Exports useModalOutlet (a modal supplies its outlet),
- *   getActiveModalOutlet, and subscribeModalOutlets (a global host follows
- *   the latest one)
+ *   getActiveModalOutlet, subscribeModalOutlets (a global host follows the
+ *   latest one), and notifyTopLayerEntry (a non-modal surface entered the
+ *   top layer above the hosts)
  * @position Private layer infrastructure; spec:AST-003 FR18
  *
  * A native modal makes everything outside it inert and paints over every
@@ -18,25 +19,62 @@
  * fallback) must see modals rendered by the app. Listeners run synchronously,
  * so a host can leave a modal before React removes it from the document.
  *
+ * A non-modal top-layer surface (a `popover="manual"` host shown by
+ * `showPopover()`, such as a `hasScrim={false}` BottomSheet) blocks nothing,
+ * so it is not an outlet, but it still enters the top layer above the hosts
+ * shown before it. It announces the entry here, and a host re-enters the top
+ * layer in place so it paints above the surface again.
+ *
  * SYNC: When modified, update:
  * - /packages/core/src/Toast/ToastViewport.modalHost.test.tsx
  * - /docs/architecture/layer-runtime.md
  */
-import { useEffect, useLayoutEffect } from 'react';
+import { useEffect, useLayoutEffect, useRef } from 'react';
 const outlets = [];
+// Outlets whose order among themselves is decided by their caller (a stack of
+// bottom sheets), keyed by that caller's group. Reordering stays inside the
+// group: such an outlet never moves above an outlet of another group supplied
+// later (a Dialog opened from a sheet).
+const outletGroups = new WeakMap();
+
+/**
+ * Why a host is told to place itself: `outlet` when the latest open modal
+ * may have changed (the host moves into it or back out), `entry` when a
+ * non-modal surface entered the top layer above the host (the host stays
+ * where it is and re-enters the top layer).
+ */
+
 const listeners = new Set();
-function notify() {
+function notify(change) {
   for (const listener of listeners) {
-    listener();
+    listener(change);
   }
 }
-function addOutlet(element) {
+
+/**
+ * Supply an outlet. The latest goes on top. One re-supplied beneath its
+ * group's top — a covered switcher flow whose level became a new dialog on a
+ * step change made from code, while a sheet stays on top of it — goes
+ * directly beneath that top, so the sheet on top stays the latest outlet and
+ * a toast raised from it still lands there, not in the covered, inert step.
+ */
+function addOutlet(element, beneathGroupTop) {
   const index = outlets.indexOf(element);
   if (index !== -1) {
     outlets.splice(index, 1);
   }
+  const group = outletGroups.get(element);
+  if (beneathGroupTop && group != null) {
+    for (let other = outlets.length - 1; other >= 0; other -= 1) {
+      if (outletGroups.get(outlets[other]) === group) {
+        outlets.splice(other, 0, element);
+        notify('outlet');
+        return;
+      }
+    }
+  }
   outlets.push(element);
-  notify();
+  notify('outlet');
 }
 function removeOutlet(element) {
   const index = outlets.indexOf(element);
@@ -44,7 +82,39 @@ function removeOutlet(element) {
     return;
   }
   outlets.splice(index, 1);
-  notify();
+  outletGroups.delete(element);
+  notify('outlet');
+}
+
+/**
+ * Move `element` to the top of its own group: directly above the highest
+ * outlet of the same group, and never above an outlet of another group that
+ * was supplied later. A sheet revealed beneath an open Dialog stays beneath
+ * the Dialog; a sheet re-shown by its stack stays beneath everything that is
+ * not a sheet.
+ */
+function raiseWithinGroup(element) {
+  const group = outletGroups.get(element);
+  const index = outlets.indexOf(element);
+  if (group == null || index === -1) {
+    return;
+  }
+  let target = outlets.length;
+  for (let other = outlets.length - 1; other > index; other -= 1) {
+    if (outletGroups.get(outlets[other]) !== group) {
+      target = other;
+    } else {
+      break;
+    }
+  }
+  // Nothing of another group sits above the group's top: go to the end.
+  // Otherwise land just beneath the lowest foreign outlet above us.
+  if (target - 1 === index) {
+    return;
+  }
+  outlets.splice(index, 1);
+  outlets.splice(target - 1, 0, element);
+  notify('outlet');
 }
 
 /** The latest open native modal, or null when none is open. */
@@ -52,7 +122,10 @@ export function getActiveModalOutlet() {
   return outlets[outlets.length - 1] ?? null;
 }
 
-/** Call `listener` whenever the latest open native modal may have changed. */
+/**
+ * Call `listener` whenever the latest open native modal may have changed
+ * (`'outlet'`), or a non-modal surface entered the top layer (`'entry'`).
+ */
 export function subscribeModalOutlets(listener) {
   listeners.add(listener);
   return () => {
@@ -60,29 +133,92 @@ export function subscribeModalOutlets(listener) {
   };
 }
 
+/**
+ * A surface was just shown into the top layer above the global hosts: a
+ * non-modal surface shown (`showPopover()` on a `popover="manual"` host), or
+ * a modal dialog closed and shown again by a stack keeping its order, which
+ * carries the host inside it back above the host's own popover. Global hosts
+ * re-enter the top layer so they paint above it, as they do above a modal
+ * that just opened.
+ */
+export function notifyTopLayerEntry() {
+  notify('entry');
+}
+
 /**
  * Supply `ref`'s `<dialog>` as the passive global outlet while it is an open
  * modal. Call it after the effect that runs `showModal()`, so the modal is
  * already in the top layer when global hosts move into it.
+ *
+ * `isLatest`, `group`, and `hostKey` are for a caller whose modals are ordered among
+ * themselves by something other than the order they were supplied in (a
+ * stack of bottom sheets that is re-shown to keep open order, or reveals a
+ * sheet by closing the one above it). By default the most recently supplied
+ * outlet is the latest, which is the native top layer's order for modals
+ * opened one after another. Such a caller names its `group` and passes the
+ * ordering's own answer as `isLatest`: when it turns true the outlet is
+ * raised to the top of its group — above the group's other outlets, never
+ * above an outlet of another group supplied later, such as a Dialog opened
+ * from the sheet — and when it turns false the outlet stays supplied (every
+ * open modal supplies one) but is no longer the group's latest.
  */
-export function useModalOutlet(ref, isActive) {
+export function useModalOutlet(ref, isActive, isLatest = true, group, hostKey) {
+  // `hostKey` names which element `ref` currently resolves to, for a caller
+  // whose ref moves between dialogs while it stays active (a switcher flow
+  // whose host dialog changes on a handoff): a change re-supplies the outlet
+  // from the new element and withdraws the old one. A re-supply made while
+  // the caller is not its group's latest (read through a ref, so a flip of
+  // `isLatest` alone never re-supplies) goes beneath the group's top: the
+  // sheet covering the flow keeps the outlet. A first supply always goes on
+  // top; the stack's answer arrives a render later and the raise below
+  // settles it.
+  const isLatestRef = useRef(isLatest);
+  isLatestRef.current = isLatest;
+  const suppliedRef = useRef(null);
   useEffect(() => {
     const element = ref.current;
     if (!isActive || element == null) {
+      suppliedRef.current = null;
       return;
     }
+    const isResupply = suppliedRef.current != null;
+    suppliedRef.current = element;
+    if (group != null) {
+      outletGroups.set(element, group);
+    }
     // A native close (a `method="dialog"` form) ends the modal without a
-    // render.
+    // render. A `close` that arrives while the dialog is open again is stale:
+    // the dialog was closed and re-shown in one task (a stack putting its
+    // dialogs back in order, a sheet reopened during its exit), and the
+    // event queued by that close must not take the outlet away from a modal
+    // that is open.
     const handleClose = () => {
+      if (element.open) {
+        return;
+      }
       removeOutlet(element);
     };
     element.addEventListener('close', handleClose);
-    addOutlet(element);
+    addOutlet(element, isResupply && !isLatestRef.current);
     return () => {
       element.removeEventListener('close', handleClose);
       removeOutlet(element);
     };
-  }, [ref, isActive]);
+  }, [ref, isActive, group, hostKey]);
+
+  // Becoming the latest of its group again (a sheet revealed by the close of
+  // the one above it, or put back on top by its stack) raises the outlet
+  // within that group only: an outlet of another group supplied later (a
+  // Dialog opened from the sheet) stays above it, so a toast raised from
+  // that Dialog keeps landing in the Dialog. The first supply above already
+  // placed the outlet at the end.
+  useEffect(() => {
+    const element = ref.current;
+    if (!isActive || !isLatest || element == null) {
+      return;
+    }
+    raiseWithinGroup(element);
+  }, [ref, isActive, isLatest, hostKey]);
 
   // Unmounting removes the dialog without a close event, and a passive
   // cleanup runs after React has detached it. A layout cleanup runs before,

package/dist/Layer/preserveAnimations.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Run `reset`, which takes `root` out of rendering and back, and put every
+ * CSS animation and transition of `root` and its subtree back in the state it
+ * was in before. Recreated animations are matched to the ones they replace by
+ * element, pseudo-element and name, in order, and then by name alone (an
+ * effect script moved to another element or pseudo-element); a recreated
+ * animation with no predecessor (an entry animation that had already played
+ * and been dropped) is finished.
+ */
+export declare function preserveAnimations(root: Element, reset: () => void): void;
+//# sourceMappingURL=preserveAnimations.d.ts.map

package/dist/Layer/preserveAnimations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preserveAnimations.d.ts","sourceRoot":"","sources":["../../src/Layer/preserveAnimations.ts"],"names":[],"mappings":"AAoPA;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,GAAG,IAAI,CAkDzE"}

package/dist/Layer/preserveAnimations.js

@@ -0,0 +1,245 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file preserveAnimations.ts
+ * @input An element whose subtree is about to leave rendering for one forced
+ *   layout, and the function that does it
+ * @output The same CSS animations and transitions afterwards, in the state
+ *   they were in before
+ * @position Layer runtime; the re-placement of a layer that keeps its anchor
+ *   clear (spec:AST-059 FR4)
+ *
+ * Taking an element out of rendering cancels every CSS animation and
+ * transition of it and its subtree. When it returns, the browser creates the
+ * animations again from the stylesheet, at their start, and the transitions
+ * not at all; script-created animations are untouched. `preserveAnimations`
+ * reads every animation's state first and, afterwards, gives each recreated
+ * CSS animation that state and resumes each cancelled transition with a
+ * script animation at the same point.
+ *
+ * The state is read generically, from what the platform exposes: every
+ * accessor with a setter on the animation's and its effect's prototype
+ * chains, every field of the effect's timing, and its keyframes. Only values
+ * that differ from the recreated animation's are written, so a value the
+ * stylesheet controls stays under its control. A few members are not plain
+ * state and are handled in their own step (`ORDERED`); the rest need no
+ * handling (`DERIVED`). What cannot be carried over is the Animation and
+ * effect objects themselves: the old ones are idle, their `addEventListener`
+ * listeners and `finished`/`ready` promises stay with them, and the browser
+ * fires `animationcancel`/`transitioncancel` for them and `animationstart`
+ * for the new ones.
+ */
+
+/**
+ * Animation members written in a fixed order rather than generically: the
+ * timeline before the range that is measured on it, the rate before the
+ * time, and the start time (or, for a paused animation, the current time)
+ * last, once the play state is set. `effect` is not
+ * replaced, because a CSS animation whose effect script replaces leaves the
+ * stylesheet's control; its state is copied onto the new effect instead.
+ */
+const ORDERED = new Set(['effect', 'timeline', 'rangeStart', 'rangeEnd', 'playbackRate', 'startTime', 'currentTime']);
+/** Every accessor with a setter on `object`'s prototype chain. */
+function writableAccessors(object) {
+  const names = new Set();
+  for (let proto = Object.getPrototypeOf(object); proto != null && proto !== Object.prototype; proto = Object.getPrototypeOf(proto)) {
+    for (const [name, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(proto))) {
+      if (descriptor.set != null) {
+        names.add(name);
+      }
+    }
+  }
+  return [...names];
+}
+
+/**
+ * A textual form of a value that is compared by content rather than by
+ * identity: a CSS numeric value (as in a timeline range offset) through its
+ * serialization, a plain object (a range) through its members. Anything else
+ * is compared by identity (`null`).
+ */
+function contentOf(value) {
+  if (typeof CSSNumericValue !== 'undefined' && value instanceof CSSNumericValue) {
+    return value.toString();
+  }
+  if (value != null && typeof value === 'object' && Object.getPrototypeOf(value) === Object.prototype) {
+    return Object.entries(value).map(([key, inner]) => `${key}:${contentOf(inner) ?? String(inner)}`).join(';');
+  }
+  return null;
+}
+function differs(a, b) {
+  if (a === b) {
+    return false;
+  }
+  const textA = contentOf(a);
+  return textA == null || textA !== contentOf(b);
+}
+function save(animation) {
+  const effect = animation.effect;
+  const values = {};
+  for (const name of writableAccessors(animation)) {
+    values[name] = animation[name];
+  }
+  const effectValues = {};
+  if (effect != null) {
+    for (const name of writableAccessors(effect)) {
+      effectValues[name] = effect[name];
+    }
+  }
+  return {
+    animation,
+    name: animation.animationName ?? '',
+    target: effect?.target ?? null,
+    pseudoElement: effect?.pseudoElement ?? null,
+    values,
+    effectValues,
+    timing: effect?.getTiming() ?? null,
+    keyframes: effect?.getKeyframes() ?? null,
+    playState: animation.playState,
+    replaceState: animation.replaceState
+  };
+}
+function write(object, name, value) {
+  object[name] = value;
+}
+
+/** Give `next` the effect state `saved` had: every writable member. */
+function restoreEffect(next, saved) {
+  for (const name of writableAccessors(next)) {
+    if (name in saved.effectValues && differs(saved.effectValues[name], next[name])) {
+      write(next, name, saved.effectValues[name]);
+    }
+  }
+  if (saved.timing != null) {
+    const timing = next.getTiming();
+    const changed = {};
+    for (const [field, value] of Object.entries(saved.timing)) {
+      if (differs(value, timing[field])) {
+        changed[field] = value;
+      }
+    }
+    if (Object.keys(changed).length > 0) {
+      next.updateTiming(changed);
+    }
+  }
+  if (saved.keyframes != null && JSON.stringify(saved.keyframes) !== JSON.stringify(next.getKeyframes())) {
+    next.setKeyframes(saved.keyframes);
+  }
+}
+
+/** Give `next` the state `saved` had, member by member. */
+function restore(next, saved) {
+  const effect = next.effect;
+  if (effect != null) {
+    restoreEffect(effect, saved);
+  }
+  const current = next;
+  for (const name of ['timeline', 'rangeStart', 'rangeEnd']) {
+    if (name in saved.values && differs(saved.values[name], current[name])) {
+      write(next, name, saved.values[name]);
+    }
+  }
+  for (const name of writableAccessors(next)) {
+    if (!ORDERED.has(name) && name in saved.values && differs(saved.values[name], current[name])) {
+      write(next, name, saved.values[name]);
+    }
+  }
+  if (saved.replaceState === 'persisted' && next.replaceState !== 'persisted') {
+    next.persist();
+  }
+  const rate = saved.values.playbackRate;
+  if (typeof rate === 'number' && rate !== next.playbackRate) {
+    next.playbackRate = rate;
+  }
+  if (saved.playState === 'paused' && next.playState !== 'paused') {
+    next.pause();
+  } else if (saved.playState !== 'paused' && next.playState === 'paused') {
+    next.play();
+  }
+  // A running animation is anchored to its timeline by its start time, which
+  // carries its current time on exactly. A paused one has none and keeps its
+  // current time. A finished one holds its end: finishing it again holds the
+  // same time, though its start time is then counted from now, since script
+  // cannot set a start time and a held time together.
+  const start = saved.values.startTime;
+  const time = saved.values.currentTime;
+  if (saved.playState === 'finished') {
+    next.finish();
+  } else if (start != null) {
+    next.startTime = start;
+  } else if (time != null) {
+    next.currentTime = time;
+  }
+}
+
+/** Resume a cancelled CSS transition with a script animation in its state. */
+function resumeTransition(saved) {
+  if (saved.target == null || saved.keyframes == null) {
+    return;
+  }
+  const replacement = saved.target.animate(saved.keyframes, {
+    pseudoElement: saved.pseudoElement ?? undefined
+  });
+  restore(replacement, saved);
+}
+function isTransition(animation) {
+  return typeof CSSTransition !== 'undefined' && animation instanceof CSSTransition;
+}
+
+/**
+ * Run `reset`, which takes `root` out of rendering and back, and put every
+ * CSS animation and transition of `root` and its subtree back in the state it
+ * was in before. Recreated animations are matched to the ones they replace by
+ * element, pseudo-element and name, in order, and then by name alone (an
+ * effect script moved to another element or pseudo-element); a recreated
+ * animation with no predecessor (an entry animation that had already played
+ * and been dropped) is finished.
+ */
+export function preserveAnimations(root, reset) {
+  if (typeof root.getAnimations !== 'function') {
+    reset();
+    return;
+  }
+  const before = root.getAnimations({
+    subtree: true
+  });
+  const saved = before.map(save);
+  reset();
+  const after = root.getAnimations({
+    subtree: true
+  });
+  const current = new Set(after);
+  const survivors = new Set(before);
+  const cancelled = [];
+  for (const state of saved) {
+    if (current.has(state.animation)) {
+      continue;
+    }
+    if (isTransition(state.animation)) {
+      resumeTransition(state);
+    } else {
+      cancelled.push(state);
+    }
+  }
+  const recreated = after.filter(animation => !survivors.has(animation));
+  const unmatched = [];
+  for (const animation of recreated) {
+    const effect = animation.effect;
+    const name = animation.animationName ?? '';
+    const index = cancelled.findIndex(state => state.name === name && state.target === (effect?.target ?? null) && state.pseudoElement === (effect?.pseudoElement ?? null));
+    if (index === -1) {
+      unmatched.push(animation);
+    } else {
+      restore(animation, cancelled.splice(index, 1)[0]);
+    }
+  }
+  for (const animation of unmatched) {
+    const name = animation.animationName ?? '';
+    const index = cancelled.findIndex(state => state.name === name);
+    if (index === -1) {
+      animation.finish();
+    } else {
+      restore(animation, cancelled.splice(index, 1)[0]);
+    }
+  }
+}

package/dist/Layer/useLayer.d.ts

@@ -257,6 +257,20 @@ export interface FixedLayerReturn {
 interface InternalLayerFields {
     wasJustDismissed: () => boolean;
 }
+/**
+ * Context-mode options a core component may pass through `useLayerInternal`;
+ * not part of the public `useLayer` options.
+ */
+interface InternalContextLayerOptions extends ContextLayerOptions {
+    /**
+     * The layer must never settle over its anchor (spec:AST-059 FR4). When the
+     * standard fallback list settles it over its anchor, it switches to its
+     * anchor-clear list: beside the trigger, then whichever block side is
+     * roomier, sized to its room. For a hover-summoned layer, which the hover on
+     * its trigger keeps open.
+     */
+    keepsAnchorClear?: boolean;
+}
 type InternalContextLayerReturn = ContextLayerReturn & InternalLayerFields;
 type InternalFixedLayerReturn = FixedLayerReturn & InternalLayerFields;
 /**
@@ -300,8 +314,11 @@ export declare function getSelfAlignment(placement: LayerPlacement, alignment: L
 export declare function useKeepLayerOpenProps(id: string, isOpen: boolean): KeepLayerOpenProps;
 export declare function useLayer(options: ContextLayerOptions): ContextLayerReturn;
 export declare function useLayer(options: FixedLayerOptions): FixedLayerReturn;
-/** @internal Shared with usePopover; not exported from the package barrel. */
-export declare function useLayerInternal(options: ContextLayerOptions): InternalContextLayerReturn;
+/**
+ * @internal Shared with usePopover and useTooltip; not exported from the
+ * package barrel.
+ */
+export declare function useLayerInternal(options: InternalContextLayerOptions): InternalContextLayerReturn;
 export declare function useLayerInternal(options: FixedLayerOptions): InternalFixedLayerReturn;
 export {};
 //# sourceMappingURL=useLayer.d.ts.map

package/dist/Layer/useLayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLayer.d.ts","sourceRoot":"","sources":["../../src/Layer/useLayer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"useLayer.d.ts","sourceRoot":"","sources":["../../src/Layer/useLayer.tsx"],"names":[],"mappings":"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"}