@humanspeak/svelte-motion 0.5.4 → 0.6.1

package/dist/index.d.ts

@@ -12,9 +12,10 @@ export { motion } from './motion';
 export { animate, delay, hover, inView, press, resize, scroll, stagger, transform } from 'motion';
 export { anticipate, backIn, backInOut, backOut, circIn, circInOut, circOut, cubicBezier, easeIn, easeInOut, easeOut } from 'motion';
 export { clamp, distance, distance2D, interpolate, mix, pipe, progress, wrap } from 'motion';
-export type { DragAxis, DragConstraints, DragControls, DragInfo, DragTransition, MotionAnimate, MotionInitial, MotionOnDirectionLock, MotionOnDragTransitionEnd, MotionOnInViewEnd, MotionOnInViewStart, MotionOnProjectionUpdate, MotionTransition, MotionWhileDrag, MotionWhileFocus, MotionWhileHover, MotionWhileInView, MotionWhileTap, ProjectionUpdatePayload, ReducedMotionConfig, Variants } from './types';
+export type { AnimationControls, AnimationControlsDefinition, AnimationControlsSubscriber, DragAxis, DragConstraints, DragControls, DragInfo, DragTransition, MotionAnimate, MotionInitial, MotionOnDirectionLock, MotionOnDragTransitionEnd, MotionOnInViewEnd, MotionOnInViewStart, MotionOnProjectionUpdate, MotionTransition, MotionWhileDrag, MotionWhileFocus, MotionWhileHover, MotionWhileInView, MotionWhileTap, ProjectionUpdatePayload, ReducedMotionConfig, Variants } from './types';
 export { useAnimate } from './utils/animate.svelte';
 export type { AnimationScope } from './utils/animate.svelte';
+export { animationControls, isAnimationControls, useAnimation, useAnimationControls } from './utils/animationControls.svelte';
 export { useAnimationFrame } from './utils/animationFrame';
 export type { AugmentedMotionValue } from './utils/augmentMotionValue.svelte';
 export { useCycle } from './utils/cycle.svelte';
@@ -29,6 +30,7 @@ export type { MotionTemplateInput } from './utils/motionTemplate.svelte';
 export { useMotionValue } from './utils/motionValue.svelte';
 export type { MotionValue, RawMotionValue } from './utils/motionValue.svelte';
 export { useMotionValueEvent } from './utils/motionValueEvent';
+export { optimizedAppearDataAttribute, startOptimizedAppearAnimation } from './utils/optimizedAppear';
 export { useReducedMotion } from './utils/reducedMotion.svelte';
 export type { ReducedMotionState } from './utils/reducedMotion.svelte';
 export { useReducedMotionConfig } from './utils/reducedMotionConfig.svelte';

package/dist/index.js

@@ -15,6 +15,7 @@ export { anticipate, backIn, backInOut, backOut, circIn, circInOut, circOut, cub
 // Re-export utility functions
 export { clamp, distance, distance2D, interpolate, mix, pipe, progress, wrap } from 'motion';
 export { useAnimate } from './utils/animate.svelte';
+export { animationControls, isAnimationControls, useAnimation, useAnimationControls } from './utils/animationControls.svelte';
 export { useAnimationFrame } from './utils/animationFrame';
 export { useCycle } from './utils/cycle.svelte';
 export { createDragControls } from './utils/dragControls';
@@ -23,6 +24,7 @@ export { useInView } from './utils/inView.svelte';
 export { useMotionTemplate } from './utils/motionTemplate.svelte';
 export { useMotionValue } from './utils/motionValue.svelte';
 export { useMotionValueEvent } from './utils/motionValueEvent';
+export { optimizedAppearDataAttribute, startOptimizedAppearAnimation } from './utils/optimizedAppear';
 export { useReducedMotion } from './utils/reducedMotion.svelte';
 export { useReducedMotionConfig } from './utils/reducedMotionConfig.svelte';
 export { useScroll } from './utils/scroll.svelte';

package/dist/types.d.ts

@@ -74,7 +74,91 @@ export type MotionInitial = DOMKeyframesDefinition | string | string[] | false |
  * <motion.div variants={myVariants} animate="visible" />
  * ```
  */
-export type MotionAnimate = DOMKeyframesDefinition | string | string[] | undefined;
+/**
+ * Definition accepted by legacy animation controls.
+ *
+ * Mirrors Motion's `AnimationDefinition`: a keyframes object, a variant
+ * label, an ordered list of variant labels, or a resolver function that
+ * receives `custom` data.
+ *
+ * @example
+ * ```ts
+ * controls.start('visible')
+ * controls.start(['visible', 'active'])
+ * controls.start({ opacity: 1, x: 0 })
+ * controls.start((custom) => ({ x: custom * 100 }))
+ * ```
+ */
+export type AnimationControlsDefinition = DOMKeyframesDefinition | string | string[] | ((custom: unknown) => DOMKeyframesDefinition | string);
+/**
+ * Internal subscriber shape used by {@link AnimationControls}.
+ *
+ * Motion's upstream controls subscribe VisualElements. Svelte Motion
+ * subscribes a lightweight adapter from each `motion.*` component.
+ */
+export type AnimationControlsSubscriber = {
+    /** Start an animation on the subscribed component. */
+    start: (definition: AnimationControlsDefinition, transitionOverride?: AnimationOptions) => Promise<unknown>;
+    /** Synchronously set final values on the subscribed component. */
+    set: (definition: AnimationControlsDefinition) => void;
+    /** Stop currently running animations on the subscribed component. */
+    stop: () => void;
+};
+/**
+ * Legacy imperative controls returned by {@link useAnimationControls}.
+ *
+ * Pass the object to `animate={controls}` on one or more `motion.*`
+ * components, then call `controls.start(...)`, `controls.set(...)`, or
+ * `controls.stop()` from events or effects.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { motion, useAnimationControls } from '@humanspeak/svelte-motion'
+ *
+ *   const controls = useAnimationControls()
+ * </script>
+ *
+ * <button onclick={() => controls.start('open')}>Open</button>
+ * <motion.div animate={controls} variants={{ open: { opacity: 1 } }} />
+ * ```
+ */
+export type AnimationControls = {
+    /**
+     * Subscribe a motion component adapter to these controls.
+     *
+     * @param subscriber Component adapter to animate.
+     * @returns Unsubscribe callback.
+     */
+    subscribe: (subscriber: AnimationControlsSubscriber) => () => void;
+    /**
+     * Start an animation on every subscribed component.
+     *
+     * @param definition Target keyframes, variant label(s), or resolver.
+     * @param transitionOverride Optional transition that overrides the
+     *   component/default transition for this run.
+     * @returns Promise resolving when all subscribed animations complete.
+     */
+    start: (definition: AnimationControlsDefinition, transitionOverride?: AnimationOptions) => Promise<unknown[]>;
+    /**
+     * Synchronously set every subscribed component to the target's final
+     * values.
+     *
+     * @param definition Target keyframes, variant label(s), or resolver.
+     */
+    set: (definition: AnimationControlsDefinition) => void;
+    /** Stop animations on every subscribed component. */
+    stop: () => void;
+    /**
+     * Mark controls as mounted and return cleanup.
+     *
+     * Called automatically by `useAnimationControls()`.
+     *
+     * @returns Cleanup that marks controls unmounted and stops subscribers.
+     */
+    mount: () => () => void;
+};
+export type MotionAnimate = DOMKeyframesDefinition | string | string[] | AnimationControls | undefined;
 /**
  * Exit animation properties for a motion component when unmounted.
  *
@@ -431,8 +515,8 @@ export type MotionProps = {
     style?: string;
     /** CSS classes */
     class?: string;
-    /** Enable FLIP layout animations; "position" limits to translation only */
-    layout?: boolean | 'position';
+    /** Enable FLIP layout animations; string values select the upstream projection animation type. */
+    layout?: boolean | 'position' | 'size' | 'preserve-aspect';
     /**
      * Fires after each `layout`-driven change with the FLIP delta from
      * the element's internal projection node. Mirrors framer-motion's

package/dist/utils/animationControls.svelte.d.ts

@@ -0,0 +1,63 @@
+import type { AnimationControls } from '../types.js';
+/**
+ * Returns true when a value looks like Motion's legacy animation controls.
+ *
+ * Upstream `motion-dom` treats any non-null object with a `start`
+ * function as animation controls. Matching that narrow check keeps
+ * `animate={controls}` detection compatible with Motion's public shape.
+ *
+ * @param value Value passed to `animate`.
+ * @returns Whether `value` is an animation controls object.
+ *
+ * @example
+ * ```ts
+ * const controls = useAnimationControls()
+ * isAnimationControls(controls) // true
+ * isAnimationControls({ opacity: 1 }) // false
+ * ```
+ */
+export declare const isAnimationControls: (value: unknown) => value is AnimationControls;
+/**
+ * Create legacy animation controls.
+ *
+ * This mirrors upstream Motion's `animationControls()`: controls collect
+ * subscribed motion components, guard `start`/`set` until mounted, fan out
+ * starts to every subscriber, and stop all subscribers on unmount.
+ *
+ * @returns Animation controls with `subscribe`, `start`, `set`, `stop`,
+ *   and `mount`.
+ *
+ * @example
+ * ```ts
+ * const controls = animationControls()
+ * const cleanup = controls.mount()
+ * await controls.start({ opacity: 1 })
+ * cleanup()
+ * ```
+ */
+export declare const animationControls: () => AnimationControls;
+/**
+ * Create imperative controls for one or more `motion.*` components.
+ *
+ * Pass the returned object to `animate={controls}`. Once mounted, call
+ * `controls.start(definition)`, `controls.set(definition)`, or
+ * `controls.stop()` to coordinate every subscribed component.
+ *
+ * @returns Mounted animation controls.
+ * @see https://motion.dev/docs/react-use-animation-controls
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { motion, useAnimationControls } from '@humanspeak/svelte-motion'
+ *
+ *   const controls = useAnimationControls()
+ * </script>
+ *
+ * <button onclick={() => controls.start({ scale: 1.2 })}>Pop</button>
+ * <motion.div animate={controls} />
+ * ```
+ */
+export declare const useAnimationControls: () => AnimationControls;
+/** Alias matching Motion's legacy `useAnimation` export. */
+export declare const useAnimation: () => AnimationControls;

package/dist/utils/animationControls.svelte.js

@@ -0,0 +1,111 @@
+import { SvelteSet } from 'svelte/reactivity';
+const mountedError = 'controls.start() should only be called after a component has mounted. Consider calling within a $effect.';
+const setMountedError = 'controls.set() should only be called after a component has mounted. Consider calling within a $effect.';
+/**
+ * Returns true when a value looks like Motion's legacy animation controls.
+ *
+ * Upstream `motion-dom` treats any non-null object with a `start`
+ * function as animation controls. Matching that narrow check keeps
+ * `animate={controls}` detection compatible with Motion's public shape.
+ *
+ * @param value Value passed to `animate`.
+ * @returns Whether `value` is an animation controls object.
+ *
+ * @example
+ * ```ts
+ * const controls = useAnimationControls()
+ * isAnimationControls(controls) // true
+ * isAnimationControls({ opacity: 1 }) // false
+ * ```
+ */
+export const isAnimationControls = (value) => {
+    return (value !== null &&
+        typeof value === 'object' &&
+        typeof value.start === 'function');
+};
+/**
+ * Create legacy animation controls.
+ *
+ * This mirrors upstream Motion's `animationControls()`: controls collect
+ * subscribed motion components, guard `start`/`set` until mounted, fan out
+ * starts to every subscriber, and stop all subscribers on unmount.
+ *
+ * @returns Animation controls with `subscribe`, `start`, `set`, `stop`,
+ *   and `mount`.
+ *
+ * @example
+ * ```ts
+ * const controls = animationControls()
+ * const cleanup = controls.mount()
+ * await controls.start({ opacity: 1 })
+ * cleanup()
+ * ```
+ */
+export const animationControls = () => {
+    let hasMounted = false;
+    const subscribers = new SvelteSet();
+    const controls = {
+        subscribe(subscriber) {
+            subscribers.add(subscriber);
+            return () => {
+                subscribers.delete(subscriber);
+            };
+        },
+        start(definition, transitionOverride) {
+            if (!hasMounted) {
+                throw new Error(mountedError);
+            }
+            const animations = [];
+            subscribers.forEach((subscriber) => {
+                animations.push(subscriber.start(definition, transitionOverride));
+            });
+            return Promise.all(animations);
+        },
+        set(definition) {
+            if (!hasMounted) {
+                throw new Error(setMountedError);
+            }
+            subscribers.forEach((subscriber) => subscriber.set(definition));
+        },
+        stop() {
+            subscribers.forEach((subscriber) => subscriber.stop());
+        },
+        mount() {
+            hasMounted = true;
+            return () => {
+                hasMounted = false;
+                controls.stop();
+            };
+        }
+    };
+    return controls;
+};
+/**
+ * Create imperative controls for one or more `motion.*` components.
+ *
+ * Pass the returned object to `animate={controls}`. Once mounted, call
+ * `controls.start(definition)`, `controls.set(definition)`, or
+ * `controls.stop()` to coordinate every subscribed component.
+ *
+ * @returns Mounted animation controls.
+ * @see https://motion.dev/docs/react-use-animation-controls
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { motion, useAnimationControls } from '@humanspeak/svelte-motion'
+ *
+ *   const controls = useAnimationControls()
+ * </script>
+ *
+ * <button onclick={() => controls.start({ scale: 1.2 })}>Pop</button>
+ * <motion.div animate={controls} />
+ * ```
+ */
+export const useAnimationControls = () => {
+    const controls = animationControls();
+    $effect(() => controls.mount());
+    return controls;
+};
+/** Alias matching Motion's legacy `useAnimation` export. */
+export const useAnimation = useAnimationControls;

package/dist/utils/layout.d.ts

@@ -6,11 +6,13 @@ import { type AnimationOptions } from 'motion';
  * immediately after reading the rect.
  *
  * When `scrollContainers` are provided, the returned rect is shifted by the
- * **sum** of each container's `scrollLeft` / `scrollTop`. FLIP deltas
- * computed from two such measures stay correct even when the user scrolls
- * any of the containers between measurements — including a nested
- * `layoutScroll` inside another `layoutScroll`. Mirrors framer-motion's
- * `removeElementScroll`, which walks every ancestor in the path.
+ * **sum** of each container's `scrollLeft` / `scrollTop`. When
+ * `includeViewportScroll` is true, the viewport's `window.scrollX` /
+ * `window.scrollY` is included too. FLIP deltas computed from two such
+ * measures stay correct even when the user scrolls between measurements —
+ * including a nested `layoutScroll` inside another `layoutScroll`. Mirrors
+ * framer-motion's `removeElementScroll`, which walks every ancestor in the
+ * path, plus root scroll compensation from the projection tree.
  *
  * Pass an empty array (or omit) for viewport-relative behaviour.
  *
@@ -27,6 +29,7 @@ import { type AnimationOptions } from 'motion';
  * @param el Element to measure.
  * @param scrollContainers Optional ancestor chain with `layoutScroll` enabled.
  * @param baseTransform Transform string applied during measurement. Defaults to `'none'`.
+ * @param includeViewportScroll Whether to include `window.scrollX/Y` in the returned rect.
  * @returns DOMRect snapshot of the element.
  *
  * @example
@@ -41,7 +44,7 @@ import { type AnimationOptions } from 'motion';
  * const rect = measureRect(node, [innerScroll, outerScroll])
  * ```
  */
-export declare const measureRect: (el: HTMLElement, scrollContainers?: HTMLElement[], baseTransform?: string) => DOMRect;
+export declare const measureRect: (el: HTMLElement, scrollContainers?: HTMLElement[], baseTransform?: string, includeViewportScroll?: boolean) => DOMRect;
 /**
  * Minimal rectangle shape `computeFlipTransforms` reads. A `DOMRect`
  * satisfies it structurally, and so does a projection `Box` converted to

package/dist/utils/layout.js

@@ -1,4 +1,109 @@
 import { animate } from 'motion';
+const layoutSizeAnimationAttribute = 'data-layout-size-animation';
+const roundedPx = (value) => `${Math.max(0, Math.round(value))}px`;
+const mix = (from, to, progress) => from + (to - from) * progress;
+const isViewportOffscreen = (el) => {
+    if (typeof window === 'undefined')
+        return false;
+    const rect = el.getBoundingClientRect();
+    return (rect.bottom <= 0 ||
+        rect.right <= 0 ||
+        rect.top >= window.innerHeight ||
+        rect.left >= window.innerWidth);
+};
+const runBoxSizeAnimation = (el, transforms, transition) => {
+    const { dx, dy, sx, sy } = transforms;
+    const originalWidth = el.style.width;
+    const originalHeight = el.style.height;
+    const originalTransform = el.style.transform;
+    const originalTransformOrigin = el.style.transformOrigin;
+    const nextRect = el.getBoundingClientRect();
+    const prevWidth = nextRect.width * sx;
+    const prevHeight = nextRect.height * sy;
+    el.setAttribute(layoutSizeAnimationAttribute, 'true');
+    for (const child of el.querySelectorAll('[data-svelte-motion-layout]')) {
+        child.style.transform = '';
+        child.style.transformOrigin = '';
+        if (child.style.willChange === 'transform')
+            child.style.willChange = '';
+    }
+    el.style.width = roundedPx(prevWidth);
+    el.style.height = roundedPx(prevHeight);
+    const sizedRect = el.getBoundingClientRect();
+    const residualDx = nextRect.left + dx - sizedRect.left;
+    const residualDy = nextRect.top + dy - sizedRect.top;
+    const shouldTranslate = Math.abs(residualDx) > 0.5 || Math.abs(residualDy) > 0.5;
+    if (shouldTranslate) {
+        el.style.transformOrigin = '0 0';
+        el.style.transform = `translate(${Math.round(residualDx)}px, ${Math.round(residualDy)}px)`;
+    }
+    const writeBox = (progress) => {
+        el.style.width = roundedPx(mix(prevWidth, nextRect.width, progress));
+        el.style.height = roundedPx(mix(prevHeight, nextRect.height, progress));
+        if (shouldTranslate) {
+            const x = Math.round(mix(residualDx, 0, progress));
+            const y = Math.round(mix(residualDy, 0, progress));
+            el.style.transform = x === 0 && y === 0 ? '' : `translate(${x}px, ${y}px)`;
+        }
+    };
+    const animation = animate(0, 1, {
+        ...transition,
+        onUpdate: writeBox
+    });
+    let removeScrollListener;
+    let offscreenRaf = null;
+    let cleanupRan = false;
+    const cleanup = () => {
+        if (cleanupRan)
+            return;
+        cleanupRan = true;
+        removeScrollListener?.();
+        if (offscreenRaf !== null &&
+            typeof window !== 'undefined' &&
+            typeof window.cancelAnimationFrame === 'function') {
+            window.cancelAnimationFrame(offscreenRaf);
+            offscreenRaf = null;
+        }
+        el.style.width = originalWidth;
+        el.style.height = originalHeight;
+        el.style.transformOrigin = originalTransformOrigin;
+        el.style.transform = originalTransform;
+        el.removeAttribute(layoutSizeAnimationAttribute);
+    };
+    if (typeof window !== 'undefined') {
+        const completeIfOffscreen = () => {
+            if (cleanupRan)
+                return;
+            if (isViewportOffscreen(el)) {
+                animation.complete();
+                cleanup();
+            }
+        };
+        const scheduleCompleteIfOffscreen = () => {
+            if (typeof window.requestAnimationFrame !== 'function') {
+                completeIfOffscreen();
+                return;
+            }
+            if (offscreenRaf !== null)
+                return;
+            offscreenRaf = window.requestAnimationFrame(() => {
+                offscreenRaf = null;
+                completeIfOffscreen();
+            });
+        };
+        const handleScroll = () => {
+            completeIfOffscreen();
+            scheduleCompleteIfOffscreen();
+        };
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        removeScrollListener = () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+        completeIfOffscreen();
+        scheduleCompleteIfOffscreen();
+    }
+    animation.finished?.finally(cleanup);
+};
 /**
  * Measure an element's bounding client rect without current transform.
  *
@@ -6,11 +111,13 @@ import { animate } from 'motion';
  * immediately after reading the rect.
  *
  * When `scrollContainers` are provided, the returned rect is shifted by the
- * **sum** of each container's `scrollLeft` / `scrollTop`. FLIP deltas
- * computed from two such measures stay correct even when the user scrolls
- * any of the containers between measurements — including a nested
- * `layoutScroll` inside another `layoutScroll`. Mirrors framer-motion's
- * `removeElementScroll`, which walks every ancestor in the path.
+ * **sum** of each container's `scrollLeft` / `scrollTop`. When
+ * `includeViewportScroll` is true, the viewport's `window.scrollX` /
+ * `window.scrollY` is included too. FLIP deltas computed from two such
+ * measures stay correct even when the user scrolls between measurements —
+ * including a nested `layoutScroll` inside another `layoutScroll`. Mirrors
+ * framer-motion's `removeElementScroll`, which walks every ancestor in the
+ * path, plus root scroll compensation from the projection tree.
  *
  * Pass an empty array (or omit) for viewport-relative behaviour.
  *
@@ -27,6 +134,7 @@ import { animate } from 'motion';
  * @param el Element to measure.
  * @param scrollContainers Optional ancestor chain with `layoutScroll` enabled.
  * @param baseTransform Transform string applied during measurement. Defaults to `'none'`.
+ * @param includeViewportScroll Whether to include `window.scrollX/Y` in the returned rect.
  * @returns DOMRect snapshot of the element.
  *
  * @example
@@ -41,19 +149,22 @@ import { animate } from 'motion';
  * const rect = measureRect(node, [innerScroll, outerScroll])
  * ```
  */
-export const measureRect = (el, scrollContainers, baseTransform = 'none') => {
+export const measureRect = (el, scrollContainers, baseTransform = 'none', includeViewportScroll = false) => {
     const prev = el.style.transform;
     try {
         el.style.transform = baseTransform;
         const rect = el.getBoundingClientRect();
-        if (!scrollContainers || scrollContainers.length === 0)
-            return rect;
+        let offsetLeft = includeViewportScroll && typeof window !== 'undefined' ? window.scrollX : 0;
+        let offsetTop = includeViewportScroll && typeof window !== 'undefined' ? window.scrollY : 0;
+        if (!scrollContainers || scrollContainers.length === 0) {
+            if (offsetLeft === 0 && offsetTop === 0)
+                return rect;
+            return new DOMRect(rect.left + offsetLeft, rect.top + offsetTop, rect.width, rect.height);
+        }
         // Re-express the rect in the *combined* scroll-container coordinate
         // space so a subsequent scroll on any of them doesn't show up as
         // movement. DOMRect's left/top are read-only, so allocate a fresh
         // one with the summed offsets applied.
-        let offsetLeft = 0;
-        let offsetTop = 0;
         for (const container of scrollContainers) {
             offsetLeft += container.scrollLeft;
             offsetTop += container.scrollTop;
@@ -95,6 +206,13 @@ export const runFlipAnimation = (el, transforms, transition) => {
     const { dx, dy, sx, sy, shouldTranslate, shouldScale } = transforms;
     if (!(shouldTranslate || shouldScale))
         return;
+    const correctionTargets = shouldScale
+        ? Array.from(el.querySelectorAll('[data-svelte-motion-layout]'))
+        : [];
+    if (shouldScale && correctionTargets.length > 0) {
+        runBoxSizeAnimation(el, { dx, dy, sx, sy }, transition);
+        return;
+    }
     const keyframes = {};
     if (shouldTranslate) {
         keyframes.x = [dx, 0];
@@ -140,6 +258,13 @@ export const observeLayoutChanges = (el, onChange) => {
     let pendingRaf = null;
     let releaseTimeout = null;
     const schedule = () => {
+        if (el.closest(`[${layoutSizeAnimationAttribute}]`)) {
+            el.style.transform = '';
+            el.style.transformOrigin = '';
+            if (el.style.willChange === 'transform')
+                el.style.willChange = '';
+            return;
+        }
         if (pendingRaf !== null || releaseTimeout !== null)
             return;
         // Leading-edge: call immediately, then throttle further calls until next frame (or 50ms)
@@ -157,14 +282,23 @@ export const observeLayoutChanges = (el, onChange) => {
     };
     const ro = new ResizeObserver(() => schedule());
     ro.observe(el);
-    const mo = new MutationObserver(() => schedule());
-    mo.observe(el, { attributes: true, attributeFilter: ['class', 'style'] });
+    const attributeObserver = new MutationObserver(() => schedule());
+    attributeObserver.observe(el, {
+        attributes: true,
+        attributeFilter: ['class', 'data-presence-layout-hold']
+    });
+    const childListObserver = new MutationObserver(() => schedule());
+    childListObserver.observe(el, {
+        childList: true,
+        subtree: true
+    });
     if (el.parentElement) {
-        mo.observe(el.parentElement, { childList: true, subtree: false, attributes: true });
+        childListObserver.observe(el.parentElement, { childList: true, subtree: false });
     }
     return () => {
         ro.disconnect();
-        mo.disconnect();
+        attributeObserver.disconnect();
+        childListObserver.disconnect();
         if (pendingRaf !== null && typeof cancelAnimationFrame === 'function') {
             cancelAnimationFrame(pendingRaf);
             pendingRaf = null;