@omicrxn/mercury/dist/mercury/layout.svelte.js

Mercury is a Svelte animation library powered by Motion. It simplifies complex animations with Svelte actions, provides layout and exit animations, and integrates seamlessly with Svelte features.

import { LayoutScopeController } from './layout-coordinator.js';
export function layoutProps(id) {
    const props = { 'data-layout': '' };
    if (id) {
        props['data-layout-id'] = id;
    }
    return props;
}
function createLayout(trigger, optionsOrGetter) {
    const getOptions = typeof optionsOrGetter === 'function'
        ? optionsOrGetter
        : () => optionsOrGetter ?? {};
    const controller = new LayoutScopeController(getOptions());
    let mounted = $state(false);
    let isFirst = true;
    // Effects must register when layout() is called in <script>, not inside the
    // attachment callback. Attachments run in a nested effect after DOM updates, which
    // is too late for record() before {#if}/{#each} commits.
    $effect.pre(() => {
        trigger();
        const options = getOptions();
        if (!mounted)
            return;
        controller.setOptions(options);
        if (!isFirst) {
            controller.record();
        }
    });
    $effect(() => {
        trigger();
        const options = getOptions();
        if (!mounted)
            return;
        controller.setOptions(options);
        if (isFirst) {
            isFirst = false;
            return;
        }
        void controller.animate();
    });
    return (element) => {
        controller.mount(element).then(() => {
            mounted = true;
        });
        return () => {
            controller.dispose();
        };
    };
}
export const layout = Object.assign(createLayout, {
    props: layoutProps
});