@foldkit/ui 0.163.0 → 0.164.0-canary.c9c641bf8179

package/dist/anchor/anchor.d.ts

@@ -27,14 +27,40 @@ export declare const AnchorConfig: Schema.Struct<{
     readonly isPlacementLocked: Schema.optional<Schema.Boolean>;
 }>;
 export type AnchorConfig = typeof AnchorConfig.Type;
-/** Relocates an element into the shared `foldkit-portal-root` div within its
- *  containing root: the shadow root when mounted inside one, otherwise
- *  `document.body`. Escapes any ancestor stacking context while keeping the
- *  element under that root's scoped styles. Returns a cleanup function that
- *  removes the element from the portal root. Designed to be called from inside
- *  an `OnMount` action: the consumer wraps the call in `Effect.sync` and
- *  stashes the returned cleanup in the `Mount` result. */
+/** Relocates an element into a portal root and returns a cleanup function
+ *  that removes it again. Inside a `<dialog>`, the portal root is a div
+ *  appended to that dialog, so the element stays above the dialog's content
+ *  and interactive while a modal dialog makes everything outside it inert.
+ *  The cleanup removes that div once it is empty. Otherwise the portal root
+ *  is the shared `foldkit-portal-root` div within the element's containing
+ *  root: the shadow root when mounted inside one, otherwise `document.body`.
+ *  Either way the element escapes the clipping and stacking contexts of the
+ *  ancestors it leaves, and keeps its root's scoped styles. Use
+ *  `portalBackdrop` for a click-outside backdrop. Designed to be called from
+ *  inside an `OnMount` action: the consumer wraps the call in `Effect.sync`
+ *  and stashes the returned cleanup in the `Mount` result. */
 export declare const portalToContainingRoot: (element: Element) => (() => void);
+/** Relocates a click-outside backdrop and returns a cleanup function that
+ *  removes it again. Outside a `<dialog>`, it does what
+ *  `portalToContainingRoot` does. Inside a `<dialog>`, the backdrop moves to
+ *  directly before the element it was rendered in, which is the component
+ *  wrapper that holds the trigger. The backdrop then covers the dialog's
+ *  content, and the wrapper stays above it, so a click on a Combobox input
+ *  reaches the input while a click anywhere else in the dialog reaches the
+ *  backdrop. The wrapper must be positioned, for example `position:
+ *  relative`, which is also what keeps it above a backdrop in the containing
+ *  root. While the backdrop is there, it is a sibling of the wrapper, so
+ *  sibling-based selectors such as `:first-child` or Tailwind's `divide-y`
+ *  count it. Some CSS on an ancestor between the wrapper and the dialog
+ *  confines the backdrop to that ancestor: anything that makes the ancestor
+ *  the containing block for fixed-position elements, for example
+ *  `transform`, `scale`, `filter`, `backdrop-filter`, or `container-type`.
+ *  A click outside that ancestor then leaves the overlay open, and if it
+ *  also lands outside the dialog panel, it closes the whole dialog. A
+ *  backdrop rendered directly in the dialog goes into the dialog's portal
+ *  root instead. Designed to be called from inside an `OnMount` action,
+ *  like `portalToContainingRoot`. */
+export declare const portalBackdrop: (element: Element) => (() => void);
 /** Config for `anchorSetup`.
  *
  *  - `buttonId`: id of the trigger to position against, resolved through the

package/dist/anchor/anchor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"anchor.d.ts","sourceRoot":"","sources":["../../src/anchor/anchor.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,MAAM,EAAgB,MAAM,QAAQ,CAAA;AAatE;mFACmF;AACnF,eAAO,MAAM,SAAS,0KAapB,CAAA;AAEF,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,IAAI,CAAA;AAE7C;+DAC+D;AAC/D,eAAO,MAAM,OAAO;;;;;IAQlB,CAAA;AAEF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAEzC,oGAAoG;AACpG,eAAO,MAAM,YAAY;;;;;;;;;;;;EAOvB,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,OAAO,YAAY,CAAC,IAAI,CAAA;AAkCnD;;;;;;0DAM0D;AAC1D,eAAO,MAAM,sBAAsB,YAAa,OAAO,KAAG,CAAC,MAAM,IAAI,CAWpE,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;0BAqB0B;AAC1B,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IACjC,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,YAAY,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAC,CAAA;AAsBF;;;;;;;;;;;;;;;;;;;;;;;gFAuBgF;AAChF,eAAO,MAAM,WAAW,YACb,OAAO,UACR,WAAW,KAClB,CAAC,MAAM,IAAI,CAkQb,CAAA"}
+{"version":3,"file":"anchor.d.ts","sourceRoot":"","sources":["../../src/anchor/anchor.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,MAAM,EAAgB,MAAM,QAAQ,CAAA;AAatE;mFACmF;AACnF,eAAO,MAAM,SAAS,0KAapB,CAAA;AAEF,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,IAAI,CAAA;AAE7C;+DAC+D;AAC/D,eAAO,MAAM,OAAO;;;;;IAQlB,CAAA;AAEF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAEzC,oGAAoG;AACpG,eAAO,MAAM,YAAY;;;;;;;;;;;;EAOvB,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,OAAO,YAAY,CAAC,IAAI,CAAA;AAwEnD;;;;;;;;;;;8DAW8D;AAC9D,eAAO,MAAM,sBAAsB,YAAa,OAAO,KAAG,CAAC,MAAM,IAAI,CAsBpE,CAAA;AAWD;;;;;;;;;;;;;;;;;;;qCAmBqC;AACrC,eAAO,MAAM,cAAc,YAAa,OAAO,KAAG,CAAC,MAAM,IAAI,CAczD,CAAA;AAUJ;;;;;;;;;;;;;;;;;;;;;0BAqB0B;AAC1B,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IACjC,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,YAAY,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAC,CAAA;AAsBF;;;;;;;;;;;;;;;;;;;;;;;gFAuBgF;AAChF,eAAO,MAAM,WAAW,YACb,OAAO,UACR,WAAW,KAClB,CAAC,MAAM,IAAI,CAkQb,CAAA"}

package/dist/anchor/anchor.js

@@ -38,7 +38,8 @@ export const AnchorConfig = Schema.Struct({
     isPlacementLocked: Schema.optional(Schema.Boolean),
 });
 const PORTAL_ROOT_ID = 'foldkit-portal-root';
-const getOrCreatePortalRoot = (element) => {
+const DIALOG_PORTAL_ROOT_ATTRIBUTE = 'data-foldkit-portal-root';
+const getOrCreateContainingRootPortalRoot = (element) => {
     // NOTE: portal into the element's containing root, the shadow root when the
     // app is mounted inside one (e.g. the DevTools overlay) or `document.body`
     // otherwise, so the panel keeps that root's scoped styles while still
@@ -50,7 +51,7 @@ const getOrCreatePortalRoot = (element) => {
     const parent = inShadow ? root : document.body;
     const existing = owner.getElementById(PORTAL_ROOT_ID);
     if (existing) {
-        return __foldkitBrandViewResult((existing), "@foldkit/ui/anchor/anchor.js#getOrCreatePortalRoot");
+        return __foldkitBrandViewResult((existing), "@foldkit/ui/anchor/anchor.js#getOrCreateContainingRootPortalRoot");
     }
     const portalRoot = document.createElement('div');
     portalRoot.id = PORTAL_ROOT_ID;
@@ -61,17 +62,48 @@ const getOrCreatePortalRoot = (element) => {
     // breaking click-outside detection. Prepending makes wrappers paint
     // above the backdrop, while panels (z-10) still win via step 9.
     parent.prepend(portalRoot);
-    return __foldkitBrandViewResult((portalRoot), "@foldkit/ui/anchor/anchor.js#getOrCreatePortalRoot");
+    return __foldkitBrandViewResult((portalRoot), "@foldkit/ui/anchor/anchor.js#getOrCreateContainingRootPortalRoot");
 };
-/** Relocates an element into the shared `foldkit-portal-root` div within its
- *  containing root: the shadow root when mounted inside one, otherwise
- *  `document.body`. Escapes any ancestor stacking context while keeping the
- *  element under that root's scoped styles. Returns a cleanup function that
- *  removes the element from the portal root. Designed to be called from inside
- *  an `OnMount` action: the consumer wraps the call in `Effect.sync` and
- *  stashes the returned cleanup in the `Mount` result. */
+const getOrCreateDialogPortalRoot = (dialog) => {
+    const existing = dialog.querySelector(`:scope > [${DIALOG_PORTAL_ROOT_ATTRIBUTE}]`);
+    if (existing instanceof HTMLElement) {
+        return __foldkitBrandViewResult((existing), "@foldkit/ui/anchor/anchor.js#getOrCreateDialogPortalRoot");
+    }
+    const portalRoot = document.createElement('div');
+    portalRoot.setAttribute(DIALOG_PORTAL_ROOT_ATTRIBUTE, '');
+    // NOTE: appended, unlike the containing root's portal root. A dialog's
+    // content is usually one positioned panel, and an element prepended before
+    // it paints under that panel unless it has its own z-index. Backdrops do not
+    // come here: `portalBackdrop` places them next to their wrapper instead.
+    dialog.append(portalRoot);
+    return __foldkitBrandViewResult((portalRoot), "@foldkit/ui/anchor/anchor.js#getOrCreateDialogPortalRoot");
+};
+const isDialogPortalRoot = (element) => __foldkitBrandViewResult((element.hasAttribute(DIALOG_PORTAL_ROOT_ATTRIBUTE)), "@foldkit/ui/anchor/anchor.js#isDialogPortalRoot");
+// NOTE: a dialog is its own stacking level (`Dom.showDialog` gives it a
+// near-maximal z-index, `showModal()` puts it in the top layer) and the only
+// subtree a modal dialog leaves interactive. An element portaled out of it is
+// painted behind the dialog and made inert, so an element inside a dialog is
+// portaled into that dialog instead. `closest` must be read here, before the
+// element is relocated out of the mounting tree.
+const getOrCreatePortalRoot = (element) => __foldkitBrandViewResult((Option.match(Option.fromNullishOr(element.closest('dialog')), {
+    onNone: () => __foldkitBrandViewResult((getOrCreateContainingRootPortalRoot(element)), "@foldkit/ui/anchor/anchor.js#onNone"),
+    onSome: getOrCreateDialogPortalRoot,
+})), "@foldkit/ui/anchor/anchor.js#getOrCreatePortalRoot");
+/** Relocates an element into a portal root and returns a cleanup function
+ *  that removes it again. Inside a `<dialog>`, the portal root is a div
+ *  appended to that dialog, so the element stays above the dialog's content
+ *  and interactive while a modal dialog makes everything outside it inert.
+ *  The cleanup removes that div once it is empty. Otherwise the portal root
+ *  is the shared `foldkit-portal-root` div within the element's containing
+ *  root: the shadow root when mounted inside one, otherwise `document.body`.
+ *  Either way the element escapes the clipping and stacking contexts of the
+ *  ancestors it leaves, and keeps its root's scoped styles. Use
+ *  `portalBackdrop` for a click-outside backdrop. Designed to be called from
+ *  inside an `OnMount` action: the consumer wraps the call in `Effect.sync`
+ *  and stashes the returned cleanup in the `Mount` result. */
 export const portalToContainingRoot = (element) => {
-    getOrCreatePortalRoot(element).appendChild(element);
+    const portalRoot = getOrCreatePortalRoot(element);
+    portalRoot.appendChild(element);
     return __foldkitBrandViewResult((() => {
         try {
             element.remove();
@@ -81,8 +113,54 @@ export const portalToContainingRoot = (element) => {
             // so the remove() call can throw on a node that's already been removed.
             // Swallow the error.
         }
+        // NOTE: a dialog's children are usually rendered only while it is open,
+        // so after a close an empty portal root would be the dialog's only child,
+        // and on the next open the dialog's content would be inserted after it.
+        // Removing it lets the next element portaled into this dialog append a
+        // fresh root after the content.
+        if (isDialogPortalRoot(portalRoot) && !portalRoot.hasChildNodes()) {
+            portalRoot.remove();
+        }
     }), "@foldkit/ui/anchor/anchor.js#portalToContainingRoot");
 };
+const findWrapperInsideDialog = (element) => {
+    const dialog = element.closest('dialog');
+    return __foldkitBrandViewResult((pipe(Option.fromNullishOr(element.parentElement), Option.filter(parent => __foldkitBrandViewResult((dialog !== null && parent !== dialog), "@foldkit/ui/anchor/anchor.js#anonymous~2")))), "@foldkit/ui/anchor/anchor.js#findWrapperInsideDialog");
+};
+/** Relocates a click-outside backdrop and returns a cleanup function that
+ *  removes it again. Outside a `<dialog>`, it does what
+ *  `portalToContainingRoot` does. Inside a `<dialog>`, the backdrop moves to
+ *  directly before the element it was rendered in, which is the component
+ *  wrapper that holds the trigger. The backdrop then covers the dialog's
+ *  content, and the wrapper stays above it, so a click on a Combobox input
+ *  reaches the input while a click anywhere else in the dialog reaches the
+ *  backdrop. The wrapper must be positioned, for example `position:
+ *  relative`, which is also what keeps it above a backdrop in the containing
+ *  root. While the backdrop is there, it is a sibling of the wrapper, so
+ *  sibling-based selectors such as `:first-child` or Tailwind's `divide-y`
+ *  count it. Some CSS on an ancestor between the wrapper and the dialog
+ *  confines the backdrop to that ancestor: anything that makes the ancestor
+ *  the containing block for fixed-position elements, for example
+ *  `transform`, `scale`, `filter`, `backdrop-filter`, or `container-type`.
+ *  A click outside that ancestor then leaves the overlay open, and if it
+ *  also lands outside the dialog panel, it closes the whole dialog. A
+ *  backdrop rendered directly in the dialog goes into the dialog's portal
+ *  root instead. Designed to be called from inside an `OnMount` action,
+ *  like `portalToContainingRoot`. */
+export const portalBackdrop = (element) => __foldkitBrandViewResult((Option.match(findWrapperInsideDialog(element), {
+    onNone: () => __foldkitBrandViewResult((portalToContainingRoot(element)), "@foldkit/ui/anchor/anchor.js#onNone~2"),
+    onSome: wrapper => {
+        // NOTE: positioned elements without a z-index paint in tree order, and
+        // every non-positioned element paints before them. Placed directly
+        // before the positioned wrapper, the backdrop paints over the dialog
+        // panel and its content but under the wrapper and the trigger inside it.
+        // The dialog portal root cannot give both: appended, the backdrop would
+        // cover the trigger too, and prepended, the dialog panel would cover the
+        // backdrop. `closest` and `parentElement` must be read before the move.
+        wrapper.before(element);
+        return __foldkitBrandViewResult((() => __foldkitBrandViewResult((element.remove()), "@foldkit/ui/anchor/anchor.js#anonymous~3")), "@foldkit/ui/anchor/anchor.js#onSome");
+    },
+})), "@foldkit/ui/anchor/anchor.js#portalBackdrop");
 const isInsideFixedContainer = (element) => __foldkitBrandViewResult((element !== null &&
     (getComputedStyle(element).position === 'fixed' ||
         isInsideFixedContainer(element.parentElement))), "@foldkit/ui/anchor/anchor.js#isInsideFixedContainer");
@@ -172,12 +250,12 @@ export const anchorSetup = (element, config) => {
     // inside the panel. The candidate is not narrowed to `HTMLElement`, since
     // Floating UI's `arrow` takes any `Element` and a triangle arrow is usually
     // an `<svg>`.
-    const maybeArrowElement = pipe(Option.fromNullishOr(config.arrowId), Option.flatMapNullishOr(arrowId => __foldkitBrandViewResult((owner.getElementById(arrowId)), "@foldkit/ui/anchor/anchor.js#anonymous~2")), Option.filter(candidate => __foldkitBrandViewResult((element.contains(candidate)), "@foldkit/ui/anchor/anchor.js#anonymous~3")));
+    const maybeArrowElement = pipe(Option.fromNullishOr(config.arrowId), Option.flatMapNullishOr(arrowId => __foldkitBrandViewResult((owner.getElementById(arrowId)), "@foldkit/ui/anchor/anchor.js#anonymous~4")), Option.filter(candidate => __foldkitBrandViewResult((element.contains(candidate)), "@foldkit/ui/anchor/anchor.js#anonymous~5")));
     const arrowMiddleware = Option.match(maybeArrowElement, {
-        onNone: () => __foldkitBrandViewResult(([]), "@foldkit/ui/anchor/anchor.js#onNone"),
+        onNone: () => __foldkitBrandViewResult(([]), "@foldkit/ui/anchor/anchor.js#onNone~3"),
         onSome: arrowElement => __foldkitBrandViewResult(([
             arrow({ element: arrowElement, padding: config.arrowPadding ?? 0 }),
-        ]), "@foldkit/ui/anchor/anchor.js#onSome"),
+        ]), "@foldkit/ui/anchor/anchor.js#onSome~2"),
     });
     const { placement, gap, offset: crossAxis, padding, isPlacementLocked, } = config.anchor;
     const shouldInterceptTab = config.interceptTab ?? true;

package/dist/anchor/public.d.ts

@@ -1,3 +1,3 @@
-export { anchorSetup, portalToContainingRoot, AnchorConfig, Placement, Padding, } from './index.js';
+export { anchorSetup, portalBackdrop, portalToContainingRoot, AnchorConfig, Placement, Padding, } from './index.js';
 export type { SetupConfig } from './index.js';
 //# sourceMappingURL=public.d.ts.map

package/dist/anchor/public.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/anchor/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,sBAAsB,EACtB,YAAY,EACZ,SAAS,EACT,OAAO,GACR,MAAM,YAAY,CAAA;AAEnB,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/anchor/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,cAAc,EACd,sBAAsB,EACtB,YAAY,EACZ,SAAS,EACT,OAAO,GACR,MAAM,YAAY,CAAA;AAEnB,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA"}

package/dist/anchor/public.js

@@ -1 +1 @@
-export { anchorSetup, portalToContainingRoot, AnchorConfig, Placement, Padding, } from './index.js';
+export { anchorSetup, portalBackdrop, portalToContainingRoot, AnchorConfig, Placement, Padding, } from './index.js';

package/dist/animation/index.d.ts

@@ -28,10 +28,13 @@ export declare const view: import("foldkit/submodel").View<{
     readonly id: string;
     readonly isShowing: boolean;
     readonly transitionState: "EnterAnimating" | "EnterStart" | "Idle" | "LeaveAnimating" | "LeaveStart";
+    readonly transitionGeneration: number;
 }, {
     readonly _tag: "CompletedWaitForPaint";
+    readonly generation: number;
 } | {
     readonly _tag: "EndedAnimation";
+    readonly generation: number;
 } | {
     readonly _tag: "Hid";
 } | {

package/dist/animation/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/animation/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAGjE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AAC/E,OAAO,EACL,uBAAuB,EACvB,YAAY,EACZ,mBAAmB,EACnB,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,MAAM,EACP,MAAM,aAAa,CAAA;AAEpB,YAAY,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAC1D,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,CAAA;AAE5D,OAAO,EACL,uBAAuB,EACvB,YAAY,EACZ,mBAAmB,EACnB,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,MAAM,GACP,CAAA;AAID,qFAAqF;AACrF,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,OAAO,EAAE,IAAI,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC,OAAO,EAAE,UAAU,CAAC,CAAA;IACtC;;2EAEuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAC,CAAA;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;aAnBN,IAAI;gBACD,MAAM;iBACL,aAAa,CAAC,cAAc,CAAC;cAChC,OAAO,CAAC,OAAO,EAAE,UAAU,CAAC;IACtC;;2EAEuE;kBACzD,OAAO;GA2GtB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/animation/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAGjE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AAC/E,OAAO,EACL,uBAAuB,EACvB,YAAY,EACZ,mBAAmB,EACnB,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,MAAM,EACP,MAAM,aAAa,CAAA;AAEpB,YAAY,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAC1D,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,CAAA;AAE5D,OAAO,EACL,uBAAuB,EACvB,YAAY,EACZ,mBAAmB,EACnB,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,MAAM,GACP,CAAA;AAID,qFAAqF;AACrF,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,OAAO,EAAE,IAAI,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC,OAAO,EAAE,UAAU,CAAC,CAAA;IACtC;;2EAEuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAC,CAAA;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;aAnBN,IAAI;gBACD,MAAM;iBACL,aAAa,CAAC,cAAc,CAAC;cAChC,OAAO,CAAC,OAAO,EAAE,UAAU,CAAC;IACtC;;2EAEuE;kBACzD,OAAO;GA2GtB,CAAA"}

package/dist/animation/schema.d.ts

@@ -2,25 +2,34 @@ import { Schema } from 'effect';
 /** Schema for the animation lifecycle state, tracking enter/leave phases. */
 export declare const TransitionState: Schema.Literals<readonly ["Idle", "EnterStart", "EnterAnimating", "LeaveStart", "LeaveAnimating"]>;
 export type TransitionState = typeof TransitionState.Type;
-/** Schema for the animation component's state, tracking its unique ID, visibility intent, and lifecycle phase. */
+/** Schema for Animation state, including the transition generation used to reject
+ *  stale Command results. */
 export declare const Model: Schema.Struct<{
     readonly id: Schema.String;
     readonly isShowing: Schema.Boolean;
     readonly transitionState: Schema.Literals<readonly ["Idle", "EnterStart", "EnterAnimating", "LeaveStart", "LeaveAnimating"]>;
+    readonly transitionGeneration: Schema.Number;
 }>;
 export type Model = typeof Model.Type;
 /** Union of all messages the animation component can produce. */
 export declare const Message: import("foldkit/message").MessageUnion<{
     readonly Showed: {};
     readonly Hid: {};
-    readonly CompletedWaitForPaint: {};
-    readonly EndedAnimation: {};
+    readonly CompletedWaitForPaint: {
+        generation: Schema.Number;
+    };
+    readonly EndedAnimation: {
+        generation: Schema.Number;
+    };
 }>;
 export type Message = typeof Message.Type;
 export type Showed = typeof Message.Showed.Type;
 export type Hid = typeof Message.Hid.Type;
+/** Union of the facts Animation reports to its parent. */
 export declare const OutMessage: import("foldkit/message").MessageUnion<{
-    readonly StartedLeaveAnimating: {};
+    readonly StartedLeaveAnimating: {
+        generation: Schema.Number;
+    };
     readonly TransitionedOut: {};
 }>;
 export type OutMessage = typeof OutMessage.Type;

package/dist/animation/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../src/animation/schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAK/B,6EAA6E;AAC7E,eAAO,MAAM,eAAe,oGAM1B,CAAA;AACF,MAAM,MAAM,eAAe,GAAG,OAAO,eAAe,CAAC,IAAI,CAAA;AAIzD,kHAAkH;AAClH,eAAO,MAAM,KAAK;;;;EAIhB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,iEAAiE;AACjE,eAAO,MAAM,OAAO;;;;;EAKlB,CAAA;AACF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAEzC,MAAM,MAAM,MAAM,GAAG,OAAO,OAAO,CAAC,MAAM,CAAC,IAAI,CAAA;AAC/C,MAAM,MAAM,GAAG,GAAG,OAAO,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,UAAU;;;EAGrB,CAAA;AACF,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC,IAAI,CAAA;AAI/C,iEAAiE;AACjE,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAC,CAAA;AAEF,4EAA4E;AAC5E,eAAO,MAAM,IAAI,WAAY,UAAU,KAAG,KAIxC,CAAA"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../src/animation/schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAK/B,6EAA6E;AAC7E,eAAO,MAAM,eAAe,oGAM1B,CAAA;AACF,MAAM,MAAM,eAAe,GAAG,OAAO,eAAe,CAAC,IAAI,CAAA;AAIzD;6BAC6B;AAC7B,eAAO,MAAM,KAAK;;;;;EAKhB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,iEAAiE;AACjE,eAAO,MAAM,OAAO;;;;QAGO,UAAU;;;QACjB,UAAU;;EAC5B,CAAA;AACF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAEzC,MAAM,MAAM,MAAM,GAAG,OAAO,OAAO,CAAC,MAAM,CAAC,IAAI,CAAA;AAC/C,MAAM,MAAM,GAAG,GAAG,OAAO,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;AAIzC,0DAA0D;AAC1D,eAAO,MAAM,UAAU;;QACI,UAAU;;;EAEnC,CAAA;AACF,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC,IAAI,CAAA;AAI/C,iEAAiE;AACjE,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAC,CAAA;AAEF,4EAA4E;AAC5E,eAAO,MAAM,IAAI,WAAY,UAAU,KAAG,KAKxC,CAAA"}

package/dist/animation/schema.js

@@ -11,23 +11,26 @@ export const TransitionState = Schema.Literals([
     'LeaveAnimating',
 ]);
 // MODEL
-/** Schema for the animation component's state, tracking its unique ID, visibility intent, and lifecycle phase. */
+/** Schema for Animation state, including the transition generation used to reject
+ *  stale Command results. */
 export const Model = Schema.Struct({
     id: Schema.String,
     isShowing: Schema.Boolean,
     transitionState: TransitionState,
+    transitionGeneration: Schema.Number,
 });
 // MESSAGE
 /** Union of all messages the animation component can produce. */
 export const Message = defineMessageUnion({
     Showed: {},
     Hid: {},
-    CompletedWaitForPaint: {},
-    EndedAnimation: {},
+    CompletedWaitForPaint: { generation: Schema.Number },
+    EndedAnimation: { generation: Schema.Number },
 });
 // OUT MESSAGE
+/** Union of the facts Animation reports to its parent. */
 export const OutMessage = defineMessageUnion({
-    StartedLeaveAnimating: {},
+    StartedLeaveAnimating: { generation: Schema.Number },
     TransitionedOut: {},
 });
 /** Creates an initial animation model from a config. Defaults to hidden. */
@@ -35,4 +38,5 @@ export const init = (config) => (__foldkitBrandViewResult(({
     id: config.id,
     isShowing: config.isShowing ?? false,
     transitionState: 'Idle',
+    transitionGeneration: 0,
 }), "@foldkit/ui/animation/schema.js#init"));

package/dist/animation/update.d.ts

@@ -3,20 +3,28 @@ import { type Update } from 'foldkit';
 import * as Command from 'foldkit/command';
 import { type Hid, Message, type Model, OutMessage, type Showed } from './schema.js';
 type UpdateReturn = Update.ReturnWithOutMessage<Model, Message, OutMessage>;
-/** Waits for paint via double-rAF before the enter/leave lifecycle advances. */
-export declare const WaitForPaint: Command.CommandDefinitionNoArgs<"WaitForPaint", Effect.Effect<{
+/** Waits for paint via double-rAF, then reports the transition generation that
+ *  scheduled the wait. */
+export declare const WaitForPaint: Command.CommandDefinitionWithArgs<"WaitForPaint", {
+    generation: Schema.Number;
+}, Effect.Effect<{
     readonly _tag: "CompletedWaitForPaint";
+    readonly generation: number;
 }, never, never>>;
-/** Waits for all CSS animations on the element to settle. Covers both CSS transitions and CSS keyframe animations. */
+/** Waits for all CSS transitions and keyframe animations on the element to
+ *  settle, then reports the transition generation that scheduled the wait. */
 export declare const WaitForAnimationSettled: Command.CommandDefinitionWithArgs<"WaitForAnimationSettled", {
     id: Schema.String;
+    generation: Schema.Number;
 }, Effect.Effect<{
     readonly _tag: "EndedAnimation";
+    readonly generation: number;
 }, never, never>>;
 /** Processes an Animation Message and returns the next Model, optional
  *  Commands, and an optional OutMessage. `Showed` and `Hid` start a transition
  *  but cannot finish one, so direct calls with either Message return a plain
- *  update result. */
+ *  update result. Results from an earlier transition generation leave the Model
+ *  unchanged. */
 export declare function update(model: Model, message: Showed | Hid): Update.Return<Model, Message>;
 export declare function update(model: Model, message: Message): UpdateReturn;
 /** Programmatically starts the enter lifecycle. */
@@ -25,7 +33,9 @@ export declare const show: (model: Model) => Update.Return<Model, Message>;
 export declare const hide: (model: Model) => Update.Return<Model, Message>;
 /** Toggles the animation between its shown and hidden states. */
 export declare const toggle: (model: Model) => Update.Return<Model, Message>;
-/** Creates the standard leave-phase command that waits for CSS animations on the element to settle. Use this when handling the `StartedLeaveAnimating` OutMessage for components that don't need custom leave behavior. */
+/** Creates the standard leave Command for the Model's current transition. Use
+ *  this when handling `StartedLeaveAnimating` unless the component needs its
+ *  own settlement strategy. */
 export declare const defaultLeaveCommand: (model: Model) => Command.Command<Message>;
 export {};
 //# sourceMappingURL=update.d.ts.map

package/dist/animation/update.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"update.d.ts","sourceRoot":"","sources":["../../src/animation/update.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAS,MAAM,EAAE,MAAM,QAAQ,CAAA;AAC9C,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,SAAS,CAAA;AACrC,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAM1C,OAAO,EACL,KAAK,GAAG,EACR,OAAO,EACP,KAAK,KAAK,EACV,UAAU,EACV,KAAK,MAAM,EACZ,MAAM,aAAa,CAAA;AAMpB,KAAK,YAAY,GAAG,MAAM,CAAC,oBAAoB,CAAC,KAAK,EAAE,OAAO,EAAE,UAAU,CAAC,CAAA;AAG3E,gFAAgF;AAChF,eAAO,MAAM,YAAY;;iBAGvB,CAAA;AACF,sHAAsH;AACtH,eAAO,MAAM,uBAAuB;;;;iBAUnC,CAAA;AAED;;;qBAGqB;AACrB,wBAAgB,MAAM,CACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,MAAM,GAAG,GAAG,GACpB,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;AAChC,wBAAgB,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,GAAG,YAAY,CAAA;AAsEpE,mDAAmD;AACnD,eAAO,MAAM,IAAI,UAAW,KAAK,KAAG,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAC/B,CAAA;AAEjC,mDAAmD;AACnD,eAAO,MAAM,IAAI,UAAW,KAAK,KAAG,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAClC,CAAA;AAE9B,iEAAiE;AACjE,eAAO,MAAM,MAAM,UAAW,KAAK,KAAG,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAMjE,CAAA;AAED,2NAA2N;AAC3N,eAAO,MAAM,mBAAmB,UAAW,KAAK,KAAG,OAAO,CAAC,OAAO,CAAC,OAAO,CAC/B,CAAA"}
+{"version":3,"file":"update.d.ts","sourceRoot":"","sources":["../../src/animation/update.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAiB,MAAM,EAAE,MAAM,QAAQ,CAAA;AACtD,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,SAAS,CAAA;AACrC,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAM1C,OAAO,EACL,KAAK,GAAG,EACR,OAAO,EACP,KAAK,KAAK,EACV,UAAU,EACV,KAAK,MAAM,EACZ,MAAM,aAAa,CAAA;AAMpB,KAAK,YAAY,GAAG,MAAM,CAAC,oBAAoB,CAAC,KAAK,EAAE,OAAO,EAAE,UAAU,CAAC,CAAA;AAG3E;0BAC0B;AAC1B,eAAO,MAAM,YAAY;;;;;iBAOvB,CAAA;AACF;8EAC8E;AAC9E,eAAO,MAAM,uBAAuB;;;;;;iBAUnC,CAAA;AAED;;;;iBAIiB;AACjB,wBAAgB,MAAM,CACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,MAAM,GAAG,GAAG,GACpB,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;AAChC,wBAAgB,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,GAAG,YAAY,CAAA;AA+FpE,mDAAmD;AACnD,eAAO,MAAM,IAAI,UAAW,KAAK,KAAG,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAC/B,CAAA;AAEjC,mDAAmD;AACnD,eAAO,MAAM,IAAI,UAAW,KAAK,KAAG,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAClC,CAAA;AAE9B,iEAAiE;AACjE,eAAO,MAAM,MAAM,UAAW,KAAK,KAAG,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAMjE,CAAA;AAED;;+BAE+B;AAC/B,eAAO,MAAM,mBAAmB,UAAW,KAAK,KAAG,OAAO,CAAC,OAAO,CAAC,OAAO,CAItE,CAAA"}

package/dist/animation/update.js

@@ -1,5 +1,5 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
-import { Effect, Match, Schema } from 'effect';
+import { Effect, Match, Number, Schema } from 'effect';
 import * as Command from 'foldkit/command';
 import * as Dom from 'foldkit/dom';
 import * as Render from 'foldkit/render';
@@ -9,30 +9,34 @@ import { Message, OutMessage, } from './schema.js';
 // UPDATE
 const elementSelector = (id) => __foldkitBrandViewResult((idSelector(id)), "@foldkit/ui/animation/update.js#elementSelector");
 const withUpdateReturn = Match.withReturnType();
-/** Waits for paint via double-rAF before the enter/leave lifecycle advances. */
+/** Waits for paint via double-rAF, then reports the transition generation that
+ *  scheduled the wait. */
 export const WaitForPaint = Command.define('WaitForPaint', {
+    args: { generation: Schema.Number },
     messages: [Message.CompletedWaitForPaint],
-    execute: Render.afterPaint.pipe(Effect.as(Message.CompletedWaitForPaint())),
+    execute: ({ generation }) => __foldkitBrandViewResult((Render.afterPaint.pipe(Effect.as(Message.CompletedWaitForPaint({ generation })))), "@foldkit/ui/animation/update.js#execute"),
 });
-/** Waits for all CSS animations on the element to settle. Covers both CSS transitions and CSS keyframe animations. */
+/** Waits for all CSS transitions and keyframe animations on the element to
+ *  settle, then reports the transition generation that scheduled the wait. */
 export const WaitForAnimationSettled = Command.define('WaitForAnimationSettled', {
-    args: { id: Schema.String },
+    args: { id: Schema.String, generation: Schema.Number },
     messages: [Message.EndedAnimation],
-    execute: ({ id }) => __foldkitBrandViewResult((Dom.waitForAnimationSettled(elementSelector(id)).pipe(Effect.as(Message.EndedAnimation()))), "@foldkit/ui/animation/update.js#execute"),
+    execute: ({ id, generation }) => __foldkitBrandViewResult((Dom.waitForAnimationSettled(elementSelector(id)).pipe(Effect.as(Message.EndedAnimation({ generation })))), "@foldkit/ui/animation/update.js#execute~2"),
 });
 export function update(model, message) {
-    const maybeNextFrame = WaitForPaint();
     return __foldkitBrandViewResult((Message.match(message, {
         Showed: () => {
             if (model.isShowing) {
                 return __foldkitBrandViewResult(({ model }), "@foldkit/ui/animation/update.js#Showed");
             }
+            const nextTransitionGeneration = Number.increment(model.transitionGeneration);
             return __foldkitBrandViewResult(({
                 model: modifyFields(model, {
                     isShowing: () => __foldkitBrandViewResult((true), "@foldkit/ui/animation/update.js#isShowing"),
                     transitionState: () => __foldkitBrandViewResult(('EnterStart'), "@foldkit/ui/animation/update.js#transitionState"),
+                    transitionGeneration: () => __foldkitBrandViewResult((nextTransitionGeneration), "@foldkit/ui/animation/update.js#transitionGeneration"),
                 }),
-                commands: [maybeNextFrame],
+                commands: [WaitForPaint({ generation: nextTransitionGeneration })],
             }), "@foldkit/ui/animation/update.js#Showed");
         },
         Hid: () => {
@@ -41,31 +45,50 @@ export function update(model, message) {
             if (isLeaving || !model.isShowing) {
                 return __foldkitBrandViewResult(({ model }), "@foldkit/ui/animation/update.js#Hid");
             }
+            const nextTransitionGeneration = Number.increment(model.transitionGeneration);
             return __foldkitBrandViewResult(({
                 model: modifyFields(model, {
                     isShowing: () => __foldkitBrandViewResult((false), "@foldkit/ui/animation/update.js#isShowing~2"),
                     transitionState: () => __foldkitBrandViewResult(('LeaveStart'), "@foldkit/ui/animation/update.js#transitionState~2"),
+                    transitionGeneration: () => __foldkitBrandViewResult((nextTransitionGeneration), "@foldkit/ui/animation/update.js#transitionGeneration~2"),
                 }),
-                commands: [maybeNextFrame],
+                commands: [WaitForPaint({ generation: nextTransitionGeneration })],
             }), "@foldkit/ui/animation/update.js#Hid");
         },
-        CompletedWaitForPaint: () => __foldkitBrandViewResult((Match.value(model.transitionState).pipe(withUpdateReturn, Match.when('EnterStart', () => (__foldkitBrandViewResult(({
-            model: modifyFields(model, {
-                transitionState: () => __foldkitBrandViewResult(('EnterAnimating'), "@foldkit/ui/animation/update.js#transitionState~3"),
-            }),
-            commands: [WaitForAnimationSettled({ id: model.id })],
-        }), "@foldkit/ui/animation/update.js#anonymous"))), Match.when('LeaveStart', () => (__foldkitBrandViewResult(({
-            model: modifyFields(model, {
-                transitionState: () => __foldkitBrandViewResult(('LeaveAnimating'), "@foldkit/ui/animation/update.js#transitionState~4"),
-            }),
-            outMessage: OutMessage.StartedLeaveAnimating(),
-        }), "@foldkit/ui/animation/update.js#anonymous~2"))), Match.orElse(() => (__foldkitBrandViewResult(({ model }), "@foldkit/ui/animation/update.js#anonymous~3"))))), "@foldkit/ui/animation/update.js#CompletedWaitForPaint"),
-        EndedAnimation: () => __foldkitBrandViewResult((Match.value(model.transitionState).pipe(withUpdateReturn, Match.when('EnterAnimating', () => (__foldkitBrandViewResult(({
-            model: modifyFields(model, { transitionState: () => __foldkitBrandViewResult(('Idle'), "@foldkit/ui/animation/update.js#transitionState~5") }),
-        }), "@foldkit/ui/animation/update.js#anonymous~4"))), Match.when('LeaveAnimating', () => (__foldkitBrandViewResult(({
-            model: modifyFields(model, { transitionState: () => __foldkitBrandViewResult(('Idle'), "@foldkit/ui/animation/update.js#transitionState~6") }),
-            outMessage: OutMessage.TransitionedOut(),
-        }), "@foldkit/ui/animation/update.js#anonymous~5"))), Match.orElse(() => (__foldkitBrandViewResult(({ model }), "@foldkit/ui/animation/update.js#anonymous~6"))))), "@foldkit/ui/animation/update.js#EndedAnimation"),
+        CompletedWaitForPaint: ({ generation }) => {
+            if (generation !== model.transitionGeneration) {
+                return __foldkitBrandViewResult(({ model }), "@foldkit/ui/animation/update.js#CompletedWaitForPaint");
+            }
+            return __foldkitBrandViewResult((Match.value(model.transitionState).pipe(withUpdateReturn, Match.when('EnterStart', () => (__foldkitBrandViewResult(({
+                model: modifyFields(model, {
+                    transitionState: () => __foldkitBrandViewResult(('EnterAnimating'), "@foldkit/ui/animation/update.js#transitionState~3"),
+                }),
+                commands: [
+                    WaitForAnimationSettled({
+                        id: model.id,
+                        generation: model.transitionGeneration,
+                    }),
+                ],
+            }), "@foldkit/ui/animation/update.js#anonymous"))), Match.when('LeaveStart', () => (__foldkitBrandViewResult(({
+                model: modifyFields(model, {
+                    transitionState: () => __foldkitBrandViewResult(('LeaveAnimating'), "@foldkit/ui/animation/update.js#transitionState~4"),
+                }),
+                outMessage: OutMessage.StartedLeaveAnimating({
+                    generation: model.transitionGeneration,
+                }),
+            }), "@foldkit/ui/animation/update.js#anonymous~2"))), Match.orElse(() => (__foldkitBrandViewResult(({ model }), "@foldkit/ui/animation/update.js#anonymous~3"))))), "@foldkit/ui/animation/update.js#CompletedWaitForPaint");
+        },
+        EndedAnimation: ({ generation }) => {
+            if (generation !== model.transitionGeneration) {
+                return __foldkitBrandViewResult(({ model }), "@foldkit/ui/animation/update.js#EndedAnimation");
+            }
+            return __foldkitBrandViewResult((Match.value(model.transitionState).pipe(withUpdateReturn, Match.when('EnterAnimating', () => (__foldkitBrandViewResult(({
+                model: modifyFields(model, { transitionState: () => __foldkitBrandViewResult(('Idle'), "@foldkit/ui/animation/update.js#transitionState~5") }),
+            }), "@foldkit/ui/animation/update.js#anonymous~4"))), Match.when('LeaveAnimating', () => (__foldkitBrandViewResult(({
+                model: modifyFields(model, { transitionState: () => __foldkitBrandViewResult(('Idle'), "@foldkit/ui/animation/update.js#transitionState~6") }),
+                outMessage: OutMessage.TransitionedOut(),
+            }), "@foldkit/ui/animation/update.js#anonymous~5"))), Match.orElse(() => (__foldkitBrandViewResult(({ model }), "@foldkit/ui/animation/update.js#anonymous~6"))))), "@foldkit/ui/animation/update.js#EndedAnimation");
+        },
     })), "@foldkit/ui/animation/update.js#update");
 }
 /** Programmatically starts the enter lifecycle. */
@@ -81,5 +104,10 @@ export const toggle = (model) => {
         return __foldkitBrandViewResult((show(model)), "@foldkit/ui/animation/update.js#toggle");
     }
 };
-/** Creates the standard leave-phase command that waits for CSS animations on the element to settle. Use this when handling the `StartedLeaveAnimating` OutMessage for components that don't need custom leave behavior. */
-export const defaultLeaveCommand = (model) => __foldkitBrandViewResult((WaitForAnimationSettled({ id: model.id })), "@foldkit/ui/animation/update.js#defaultLeaveCommand");
+/** Creates the standard leave Command for the Model's current transition. Use
+ *  this when handling `StartedLeaveAnimating` unless the component needs its
+ *  own settlement strategy. */
+export const defaultLeaveCommand = (model) => __foldkitBrandViewResult((WaitForAnimationSettled({
+    id: model.id,
+    generation: model.transitionGeneration,
+})), "@foldkit/ui/animation/update.js#defaultLeaveCommand");

package/dist/combobox/multi.d.ts

@@ -15,6 +15,7 @@ export declare const Model: Schema.Struct<{
         readonly id: Schema.String;
         readonly isShowing: Schema.Boolean;
         readonly transitionState: Schema.Literals<readonly ["Idle", "EnterStart", "EnterAnimating", "LeaveStart", "LeaveAnimating"]>;
+        readonly transitionGeneration: Schema.Number;
     }>;
     readonly maybeActiveItemIndex: Schema.Option<Schema.Number>;
     readonly activationTrigger: Schema.Literals<readonly ["Pointer", "Keyboard"]>;
@@ -47,6 +48,7 @@ export declare const update: (model: {
         readonly id: string;
         readonly isShowing: boolean;
         readonly transitionState: "EnterAnimating" | "EnterStart" | "Idle" | "LeaveAnimating" | "LeaveStart";
+        readonly transitionGeneration: number;
     };
     readonly maybeActiveItemIndex: Option.Option<number>;
     readonly activationTrigger: "Keyboard" | "Pointer";
@@ -68,6 +70,7 @@ export declare const update: (model: {
             readonly id: string;
             readonly isShowing: boolean;
             readonly transitionState: "EnterAnimating" | "EnterStart" | "Idle" | "LeaveAnimating" | "LeaveStart";
+            readonly transitionGeneration: number;
         };
         readonly maybeActiveItemIndex: Option.Option<number>;
         readonly activationTrigger: "Keyboard" | "Pointer";
@@ -120,8 +123,10 @@ export declare const update: (model: {
         readonly _tag: "GotAnimationMessage";
         readonly message: {
             readonly _tag: "CompletedWaitForPaint";
+            readonly generation: number;
         } | {
             readonly _tag: "EndedAnimation";
+            readonly generation: number;
         } | {
             readonly _tag: "Hid";
         } | {

package/dist/combobox/multi.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multi.d.ts","sourceRoot":"","sources":["../../src/combobox/multi.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AACvC,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,SAAS,CAAA;AAErC,OAAO,KAAK,EAAE,IAAI,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAE5D,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,cAAc,EACnB,OAAO,EACP,UAAU,EAKX,MAAM,aAAa,CAAA;AAIpB,qOAAqO;AACrO,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;EAEhB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,mOAAmO;AACnO,MAAM,MAAM,UAAU,GAAG,cAAc,CAAA;AAEvC,+HAA+H;AAC/H,eAAO,MAAM,IAAI,WAAY,UAAU,KAAG,KAAyB,CAAA;AAInE;;;;;8DAK8D;AAC9D,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAcjB,CAAA;AAEF,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAA;AAE7C;mEACmE;AACnE,eAAO,MAAM,IAAI,UAAW,KAAK,KAAG,YACoC,CAAA;AAExE;;sEAEsE;AACtE,eAAO,MAAM,KAAK,UAAW,KAAK,KAAG,YACwC,CAAA;AAE7E;wEACwE;AACxE,eAAO,MAAM,UAAU,UAAW,KAAK,QAAQ,MAAM,KAAG,YAIrD,CAAA;AAIH,uFAAuF;AACvF,MAAM,MAAM,UAAU,CAAC,IAAI,SAAS,MAAM,IAAI,cAAc,CAAC,IAAI,CAAC,CAAA;AAIlE,KAAK,kBAAkB,CAAC,IAAI,SAAS,MAAM,IAAI,MAAM,CAAC,oBAAoB,CACxE,KAAK,EACL,OAAO,EACP,UAAU,CAAC,IAAI,CAAC,CACjB,CAAA;AAED;;;;+BAI+B;AAC/B,MAAM,MAAM,MAAM,CAAC,IAAI,SAAS,MAAM,GAAG,MAAM,IAAI,QAAQ,CAAC;IAC1D,IAAI,EAAE,YAAY,CAAC,KAAK,EAAE,OAAO,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,CAAA;IACpD,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,KAAK,kBAAkB,CAAC,IAAI,CAAC,CAAA;IACpE,UAAU,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,KAAK,kBAAkB,CAAC,IAAI,CAAC,CAAA;IAClE,IAAI,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,kBAAkB,CAAC,IAAI,CAAC,CAAA;IAChD,KAAK,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,kBAAkB,CAAC,IAAI,CAAC,CAAA;CAClD,CAAC,CAAA;AAEF;;wEAEwE;AACxE,eAAO,MAAM,MAAM,GAAI,IAAI,SAAS,MAAM,GAAG,MAAM,OAAK,MAAM,CAAC,IAAI,CA2BlE,CAAA"}
+{"version":3,"file":"multi.d.ts","sourceRoot":"","sources":["../../src/combobox/multi.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AACvC,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,SAAS,CAAA;AAErC,OAAO,KAAK,EAAE,IAAI,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAE5D,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,cAAc,EACnB,OAAO,EACP,UAAU,EAKX,MAAM,aAAa,CAAA;AAIpB,qOAAqO;AACrO,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;EAEhB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,mOAAmO;AACnO,MAAM,MAAM,UAAU,GAAG,cAAc,CAAA;AAEvC,+HAA+H;AAC/H,eAAO,MAAM,IAAI,WAAY,UAAU,KAAG,KAAyB,CAAA;AAInE;;;;;8DAK8D;AAC9D,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAcjB,CAAA;AAEF,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAA;AAE7C;mEACmE;AACnE,eAAO,MAAM,IAAI,UAAW,KAAK,KAAG,YACoC,CAAA;AAExE;;sEAEsE;AACtE,eAAO,MAAM,KAAK,UAAW,KAAK,KAAG,YACwC,CAAA;AAE7E;wEACwE;AACxE,eAAO,MAAM,UAAU,UAAW,KAAK,QAAQ,MAAM,KAAG,YAIrD,CAAA;AAIH,uFAAuF;AACvF,MAAM,MAAM,UAAU,CAAC,IAAI,SAAS,MAAM,IAAI,cAAc,CAAC,IAAI,CAAC,CAAA;AAIlE,KAAK,kBAAkB,CAAC,IAAI,SAAS,MAAM,IAAI,MAAM,CAAC,oBAAoB,CACxE,KAAK,EACL,OAAO,EACP,UAAU,CAAC,IAAI,CAAC,CACjB,CAAA;AAED;;;;+BAI+B;AAC/B,MAAM,MAAM,MAAM,CAAC,IAAI,SAAS,MAAM,GAAG,MAAM,IAAI,QAAQ,CAAC;IAC1D,IAAI,EAAE,YAAY,CAAC,KAAK,EAAE,OAAO,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,CAAA;IACpD,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,KAAK,kBAAkB,CAAC,IAAI,CAAC,CAAA;IACpE,UAAU,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,KAAK,kBAAkB,CAAC,IAAI,CAAC,CAAA;IAClE,IAAI,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,kBAAkB,CAAC,IAAI,CAAC,CAAA;IAChD,KAAK,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,kBAAkB,CAAC,IAAI,CAAC,CAAA;CAClD,CAAC,CAAA;AAEF;;wEAEwE;AACxE,eAAO,MAAM,MAAM,GAAI,IAAI,SAAS,MAAM,GAAG,MAAM,OAAK,MAAM,CAAC,IAAI,CA2BlE,CAAA"}