@swiftwc/ui 0.0.0-dev.4 → 0.0.0-dev.41

package/generated/internal/class/mutation-observer-set.js

@@ -0,0 +1,42 @@
+import { Snapshot } from '../../snapshot';
+export class MutationObserverSet {
+    callback;
+    #observers = new Map();
+    constructor(callback) {
+        this.callback = callback;
+    }
+    async observe(target, attributeFilter) {
+        await Snapshot.waitReady;
+        if (this.#observers.has(target))
+            return;
+        const observer = new MutationObserver(this.callback);
+        observer.observe(target, {
+            attributes: true,
+            characterData: true,
+            subtree: true,
+            childList: true,
+            ...(attributeFilter && { attributeFilter }),
+        });
+        this.#observers.set(target, observer);
+    }
+    async unobserve(target) {
+        await Snapshot.waitReady;
+        this.#observers.get(target)?.disconnect();
+        this.#observers.delete(target);
+    }
+    async syncObservations(source, attributeFilter) {
+        await Snapshot.waitReady;
+        const sourceSet = new Set(source);
+        for (const el of [...this.#observers.keys()])
+            if (!sourceSet.has(el))
+                this.unobserve(el);
+        for (const el of source)
+            this.observe(el, attributeFilter);
+    }
+    async unobserveAll() {
+        await Snapshot.waitReady;
+        for (const obs of this.#observers.values())
+            obs.disconnect();
+        this.#observers.clear();
+    }
+}

package/generated/internal/class/mutation-observer-singleton.d.ts

@@ -0,0 +1,10 @@
+export declare class MutationObserverSingleton {
+    #private;
+    readonly observer: Promise<MutationObserver>;
+    constructor();
+    observe(target: Node, callback: (entry: MutationRecord) => void, options: MutationObserverInit): Promise<void>;
+    unobserve(target: Node): Promise<void>;
+    /** Observes automatically all elements using a Set provided by outside. Calls renderCallback on EVERY change. */
+    syncObservations(set: Set<Element>, nodes: Element[], renderCallback: () => void, attributeFilter?: string[]): Promise<void>;
+    clearObservationsSet(set: Set<Element>): Promise<void>;
+}

package/generated/internal/class/mutation-observer-singleton.js

@@ -0,0 +1,64 @@
+import { Snapshot } from '../../snapshot';
+export class MutationObserverSingleton {
+    #observers = new WeakMap();
+    observer;
+    constructor() {
+        this.observer = Snapshot.waitReady.then(() => {
+            return new MutationObserver((entries) => {
+                for (const entry of entries)
+                    this.#observers.get(entry.target)?.(entry);
+            });
+        });
+    }
+    async observe(target, callback, options) {
+        this.#observers.set(target, callback);
+        (await this.observer).observe(target, options);
+    }
+    async unobserve(target) {
+        ;
+        (await this.observer).disconnect();
+        this.#observers.delete(target);
+    }
+    /** Observes automatically all elements using a Set provided by outside. Calls renderCallback on EVERY change. */
+    // shortcur fot this
+    // #trackedElements = new Set<Element>()
+    // for (const el of this.#trackedElements)
+    //   if (!assigned.includes(el)) {
+    //     observers.unobserve(el)
+    //     this.#trackedElements.delete(el)
+    //   }
+    // for (const el of assigned) {
+    //   if (!this.#trackedElements.has(el))
+    //     observers.observe(el, this.#handleTagMutation, {
+    //       attributes: true,
+    //       characterData: true,
+    //       subtree: true,
+    //       childList: true,
+    //       // attributeFilter: ['value', 'label'],
+    //     })
+    //   this.#trackedElements.add(el)
+    // }
+    async syncObservations(set, nodes, renderCallback, attributeFilter) {
+        for (const el of set)
+            if (!nodes.includes(el)) {
+                this.unobserve(el);
+                set.delete(el);
+            }
+        for (const el of nodes) {
+            if (!set.has(el))
+                this.observe(el, renderCallback, {
+                    attributes: true,
+                    characterData: true,
+                    subtree: true,
+                    childList: true,
+                    ...(attributeFilter && { attributeFilter }),
+                });
+            set.add(el);
+        }
+    }
+    async clearObservationsSet(set) {
+        for (const el of set)
+            this.unobserve(el);
+        set.clear();
+    }
+}

package/generated/internal/class/navigation-path.d.ts

@@ -0,0 +1,15 @@
+import type * as Components from '../../components';
+import { type NavigationHost, type NavigationPage, type NavigationToolbarConfiguration } from '../privateNamespace';
+export declare class NavigationPath {
+    #private;
+    get component(): NavigationHost | undefined;
+    get body(): Components.ScrollView | null | undefined;
+    get page(): NavigationPage | null | undefined;
+    get toolBarConfig(): NavigationToolbarConfiguration[] | undefined;
+    get slot(): NavigationHost | null | undefined;
+    constructor(any?: HTMLElement);
+    hydrate(): this;
+    children(): Generator<NavigationPath>;
+    parents(): Generator<NavigationPath>;
+    [Symbol.iterator](): Generator<NavigationPath>;
+}

package/generated/internal/class/navigation-path.js

@@ -0,0 +1,84 @@
+/**
+ * Gets current host (closest)
+ */
+function closestHost(any) {
+    return any?.closest('body-view,[is=sheet-view],navigation-stack,navigation-split-view') ?? undefined;
+}
+export class NavigationPath {
+    #component;
+    #slot;
+    #body;
+    #page;
+    #toolBarConfig;
+    get component() {
+        return this.#component;
+    }
+    get body() {
+        if (undefined === this.#body)
+            this.#queryBody();
+        return this.#body;
+    }
+    get page() {
+        if (undefined === this.#page)
+            this.#queryPage();
+        return this.#page;
+    }
+    get toolBarConfig() {
+        if (undefined === this.#toolBarConfig)
+            this.#queryToolBarConfig();
+        return this.#toolBarConfig;
+    }
+    get slot() {
+        if (undefined === this.#slot)
+            this.#querySlot();
+        return this.#slot;
+    }
+    constructor(any) {
+        this.#component = closestHost(any);
+    }
+    #queryBody() {
+        this.#body = closestHost(this.#component)?.querySelector(`:scope>scroll-view,:scope>[is=sidebar-view]>scroll-view`) ?? null;
+    }
+    #queryPage() {
+        this.#page = this.#component?.querySelector(':scope>scroll-view,:scope>[is=sidebar-view]') ?? null;
+    }
+    #queryToolBarConfig() {
+        this.#toolBarConfig = [
+            ...(this.#component?.querySelectorAll(`:scope>tool-bar>tool-bar-item,:scope>tool-bar>tool-bar-item-group,:scope>[is=sidebar-view]>tool-bar>tool-bar-item,:scope>[is=sidebar-view]>tool-bar>tool-bar-item-group`) ?? []),
+        ];
+    }
+    #querySlot() {
+        this.#slot =
+            this.#component?.querySelector(':scope>body-view:not([hidden]),:scope>[is=sheet-view]:not([hidden]),:scope>navigation-stack:not([hidden]),:scope>navigation-split-view:not([hidden])') ?? null;
+    }
+    hydrate() {
+        this.#queryBody();
+        this.#queryPage();
+        this.#queryToolBarConfig();
+        this.#querySlot();
+        return this;
+    }
+    *children() {
+        if (!this.slot)
+            return;
+        const child = new NavigationPath(this.slot);
+        yield child;
+        yield* child.children();
+    }
+    *parents() {
+        if (!this.#component)
+            return;
+        let el = this.#component.parentElement;
+        while (el) {
+            const host = closestHost(el);
+            if (!host)
+                break;
+            yield new NavigationPath(host);
+            el = host.parentElement;
+        }
+    }
+    *[Symbol.iterator]() {
+        yield this;
+        yield* this.children();
+    }
+}

package/generated/internal/class/navigation-view.d.ts

@@ -0,0 +1,8 @@
+export declare class NavigationView extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}

package/generated/internal/class/navigation-view.js

@@ -0,0 +1,79 @@
+var _a;
+import { lifecycleObserver } from '../../buses';
+import { CleanupRegistry } from '../../internal/class/cleanup-registry';
+import { devFlags, frame, onoff } from '../utils';
+export class NavigationView extends HTMLElement {
+    static get observedAttributes() {
+        return ['hidden'];
+    }
+    // pairedEventSystem
+    #recentBefore;
+    constructor() {
+        super();
+    }
+    disconnectedCallback() {
+        CleanupRegistry.unregister(this);
+        this.#recentBefore = undefined;
+        // this.removeEventListener('tabreveal', this.#handleTabReveal)
+        if (this.closest('tab-view'))
+            frame().then(() => lifecycleObserver.dispatchEvent(new CustomEvent('tabhide', { detail: { tag: this.id }, bubbles: true, composed: true })));
+    }
+    connectedCallback() {
+        if (this.closest('tab-view')) {
+            // frame(this).then((r) => {
+            //   if (!r) return
+            //   this.dispatchEvent(new CustomEvent<TabDetail>('tabshow', { detail: { tag: this.id }, bubbles: true, composed: true }))
+            // })
+            CleanupRegistry.register(this, onoff('beforetabreveal beforetabswap', this.#handleBeforeTabRevealOrSwap, this).on());
+        }
+        // Snapshot.waitReady.then(async () => {
+        if (this.hasAttribute('hidden'))
+            return; // will be picked up by attr-change!
+        if (this.closest('tab-view'))
+            frame(this).then(() => {
+                // if (!r) return
+                lifecycleObserver.dispatchEvent(new CustomEvent('tabshow', { detail: { tag: this.id }, bubbles: true, composed: true }));
+            });
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case 'hidden':
+                if (oldValue === newValue)
+                    break;
+                if (!this.closest('tab-view'))
+                    break; // tabview stuff
+                let eventType = this.hasAttribute(name) ? 'tabhide' : 'tabshow', target = lifecycleObserver;
+                // isRecent by 100ms window
+                if (this.#recentBefore && performance.now() - this.#recentBefore.time <= 100) {
+                    if (this.#recentBefore.type === 'beforetabreveal') {
+                        eventType = 'tabreveal';
+                        target = this;
+                    }
+                    else if (this.#recentBefore.type === 'beforetabswap') {
+                        eventType = 'tabswap';
+                        target = this;
+                    }
+                    // consume it (important so it doesn’t leak to next change)
+                    this.#recentBefore = undefined;
+                }
+                if (devFlags.debug)
+                    console.debug(`${_a.name} 💡 ${eventType}`);
+                frame(this).then(() => {
+                    // if (!r) return
+                    target.dispatchEvent(new CustomEvent(eventType, { detail: { tag: this.id }, bubbles: true, composed: true }));
+                });
+                break;
+        }
+    }
+    #handleBeforeTabRevealOrSwap = (evt) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (this.id !== evt.detail?.tag)
+            return;
+        this.#recentBefore = {
+            type: evt.type, // beforetabreveal / beforetabswap
+            time: performance.now(),
+        };
+    };
+}
+_a = NavigationView;

package/generated/internal/class/resize-observer-singleton.d.ts

@@ -0,0 +1,7 @@
+export declare class ResizeObserverSingleton {
+    #private;
+    readonly observer: Promise<ResizeObserver>;
+    constructor();
+    observe(target: Element, callback: (entry: ResizeObserverEntry) => void): Promise<void>;
+    unobserve(target: Element): Promise<void>;
+}

package/generated/internal/class/resize-observer-singleton.js

@@ -0,0 +1,22 @@
+import { Snapshot } from '../../snapshot';
+export class ResizeObserverSingleton {
+    #observers = new WeakMap();
+    observer;
+    constructor() {
+        this.observer = Snapshot.waitReady.then(() => {
+            return new ResizeObserver((entries) => {
+                for (const entry of entries)
+                    this.#observers.get(entry.target)?.(entry);
+            });
+        });
+    }
+    async observe(target, callback) {
+        this.#observers.set(target, callback);
+        (await this.observer).observe(target);
+    }
+    async unobserve(target) {
+        ;
+        (await this.observer).unobserve(target);
+        this.#observers.delete(target);
+    }
+}

package/generated/internal/decorators/adaptive-slot.d.ts

@@ -0,0 +1 @@
+export default function (filter?: (el: HTMLElement) => boolean): <T extends CustomElementConstructor>(Base: T, _context?: ClassDecoratorContext<T>) => void;

package/generated/internal/decorators/adaptive-slot.js

@@ -0,0 +1,50 @@
+import { Snapshot } from '../../snapshot';
+import { CleanupRegistry } from '../class/cleanup-registry';
+import { devFlags, onoff } from '../utils';
+export default function (filter) {
+    const handleMediaChange = (el, { type, matches }) => {
+        if (devFlags.debug)
+            console.debug(`${el.localName} ⚡️ ${type}`);
+        if (matches) {
+            if (!el.matches(`[slot="cancellation-action"],[slot="primary-action"],[slot="confirmation-action"],[slot="destructive-action"]`))
+                return;
+            const newSlot = ['destructive-action'].includes(el.slot) ? 'bottom-bar-leading' : 'bottom-bar-trailing';
+            if (el.slot !== newSlot)
+                el.dataset.previousSlot = el.slot;
+            el.slot = newSlot;
+        }
+        else {
+            if (!el.matches(`[data-previous-slot]`))
+                return;
+            el.slot = el.dataset.previousSlot ?? '';
+            delete el.dataset.previousSlot;
+        }
+    };
+    return function (Base, _context) {
+        const originalConnected = Base.prototype.connectedCallback, originalDisconnected = Base.prototype.disconnectedCallback;
+        Base.prototype.connectedCallback = function () {
+            if (devFlags.debug)
+                console.debug(`decorator:[${this.localName}] ⚡️ connect`);
+            originalConnected?.call(this);
+            if (filter && !filter(this))
+                return;
+            if (!this.closest('[is=sheet-view]'))
+                return;
+            if (!self.matchMedia('(pointer: fine)').matches)
+                return;
+            const handler1 = handleMediaChange.bind(null, this);
+            CleanupRegistry.register(this, onoff('fine_dialog_sheet:change', handler1, Snapshot.on).on(), 'adaptive-slot');
+            Snapshot.waitReady.then(() => {
+                handleMediaChange(this, new MediaQueryListEvent(`media-change`, {
+                    matches: Snapshot.breakpoints?.get('fine_dialog_sheet'),
+                })); // Initial check
+            });
+        };
+        Base.prototype.disconnectedCallback = function () {
+            if (devFlags.debug)
+                console.debug(`decorator:[${this.localName}] ⚡️ disconnect`);
+            originalDisconnected?.call(this);
+            CleanupRegistry.unregister(this, 'adaptive-slot');
+        };
+    };
+}

package/generated/internal/decorators/custom-element.d.ts

@@ -0,0 +1,5 @@
+export default function <T extends {
+    new (...args: any[]): {};
+}>(constructor: T): {
+    new (...args: any[]): {};
+} & T;

package/generated/internal/decorators/custom-element.js

@@ -0,0 +1,5 @@
+// https://www.typescriptlang.org/docs/handbook/decorators.html
+export default function (constructor) {
+    return class extends constructor {
+    };
+}

package/generated/internal/decorators/index.d.ts

@@ -0,0 +1,4 @@
+export { default as adaptiveSlot } from './adaptive-slot';
+export * from './adaptive-slot';
+export { default as customElement } from './custom-element';
+export * from './custom-element';

package/generated/internal/decorators/index.js

@@ -0,0 +1,4 @@
+export { default as adaptiveSlot } from './adaptive-slot';
+export * from './adaptive-slot';
+export { default as customElement } from './custom-element';
+export * from './custom-element';

package/generated/internal/privateNamespace.d.ts

@@ -0,0 +1,14 @@
+import type * as Components from '../components';
+import { NavigationPath } from '../internal/class/navigation-path';
+type TransitionType = 'forwards' | 'backwards' | 'reload';
+export type NavigationHost = Components.BodyView | Components.SheetView | Components.NavigationStack | Components.NavigationSplitView;
+export type NavigationToolbarConfiguration = Components.ToolBarItem | Components.ToolBarItemGroup;
+export type NavigationPage = Components.SidebarView | Components.ScrollView;
+export declare function queryInsertPosition(frame: NavigationHost): "afterend" | "beforebegin";
+type UpdateCallback = () => void | Promise<void>;
+type NavigateOptions = {
+    updateCallback?: UpdateCallback;
+    tos?: () => NavigationPath[];
+};
+export declare const startViewTransition: (target: HTMLElement, type?: TransitionType, updateCallbackOrOptions?: UpdateCallback | NavigateOptions) => Promise<void>;
+export {};

package/generated/internal/privateNamespace.js

@@ -0,0 +1,168 @@
+import { NavigationPath } from '../internal/class/navigation-path';
+import { devFlags } from '../internal/utils';
+import { Snapshot } from '../snapshot';
+export function queryInsertPosition(frame) {
+    if ('NAVIGATION-SPLIT-VIEW' === frame?.tagName)
+        return 'beforebegin'; // lookFor = 'previousElementSibling'
+    else if ('NAVIGATION-SPLIT-VIEW' === frame?.parentElement?.tagName && frame?.parentElement.querySelector(':scope>[is=sidebar-view]') && 'BODY-VIEW' === frame?.tagName)
+        return 'beforebegin'; // lookFor = 'previousElementSibling'
+    return 'afterend'; // lookFor = 'nextElementSibling'
+}
+const cleanup = (lm, type) => {
+    let arr = [Snapshot.config['vt-fwd-class-name'], 'fwdd', 'fwn', 'fwnn', 'bwd', 'bwdd', 'bwn', 'bwnn'];
+    if (['backwards', 'forwards'].includes(type ?? ''))
+        for (let i = arr.length - 1; i >= 0; i--)
+            if (arr[i].startsWith('backwards' === type ? 'fw' : 'bw'))
+                arr.splice(i, 1);
+    for (const el of [...(lm?.querySelectorAll(arr.map((v) => `.${v}`).join(',')) ?? [])])
+        el.classList.remove(...arr);
+};
+export const startViewTransition = async (target, type = 'forwards', updateCallbackOrOptions = async () => { }) => {
+    if (devFlags.debug)
+        console.debug(`startViewTransition (${type})`, target);
+    if (!(target instanceof HTMLElement))
+        throw new TypeError("Argument 1 ('target') to client.startViewTransition must be an instance of HTMLElement");
+    if (!['forwards', 'backwards', 'reload'].includes(type))
+        throw new TypeError("Argument 2 ('type') to client.startViewTransition must be of TransitionType");
+    const options = typeof updateCallbackOrOptions === 'function'
+        ? {
+            updateCallback: updateCallbackOrOptions,
+        }
+        : (updateCallbackOrOptions ?? {}), updateCallback = options.updateCallback ?? (async () => { });
+    await Snapshot.waitReady;
+    const from = new NavigationPath(target); //const from = closestBody(target) //event.target as HTMLElement)
+    if ('forwards' === type) {
+        await updateCallback(); // updatetheDOMSomehow
+        // Snapshot.getSnapshot(from)
+        // const root = getRootViewController(from)
+        // const oldPath = new NavigationPath(from)
+        const root = [from, ...from.parents()]
+            .map((item) => item.component)
+            .filter(Boolean)
+            .at(-1);
+        // const { toolBarConfig: oldToolbars } = getComputedView(from) // const { toolBarConfig: oldToolbars, slot: oldSLot, page: oldPage } = getComputedView(from) //
+        // console.log(88, oldPage, oldPath.page, oldSLot, oldPath.slot, oldToolbars, oldPath.toolBarConfig)
+        // const oldToolbars = Snapshot.toolbarItems
+        // const { toolBarConfig: oldToolbars, host: oldHost } = getComputedView(from)
+        const tos = options.tos?.() ?? [...from.children()].map((item) => item?.hydrate()), //queryBodyAll(oldSLot), //[...oldPath.children()].map((item) => item.body).filter(Boolean),//
+        to = tos.at(-1), 
+        // to = newPath?.body, //tos.slice(-1)?.pop?.(), //Snapshot.leaf, //
+        // newHost = newPath?.component, //{ host: newHost } = getComputedView(to),
+        newToolbars = tos.flatMap((item) => item.toolBarConfig ?? []).filter((item) => !!item), 
+        // .map((item) => item.toolBarConfig)
+        // .flat()
+        // .filter(Boolean), //queryToolbarConfigAll(oldSLot),
+        modalViews = tos.map((item) => item.component).filter((item) => !!item && item.matches('dialog')); //[...queryHostAll(oldPage)].filter?.((item) => item?.matches('dialog'))
+        // toFrame = Snapshot.leafContainer, //queryHostAll(from).slice(-1)?.pop?.(),
+        // toToolbars = Snapshot.leafToolbarItems
+        // dialogFrames = [toFrame, ...(Snapshot.leaveFrames ?? [])].filter((item): item is HTMLDialogElement => item instanceof HTMLDialogElement) //[toFrame, ...(Snapshot.leaveFrames ?? [])].filter((item) => item?.matches('dialog'))
+        // if ('DIALOG' === newHost?.tagName) {
+        //   ;(newHost as HTMLDialogElement).showModal()
+        //   if (devFlags.debug) console.debug(`⚡️ view-transition-start (${type})`)
+        //   await Promise.allSettled(newHost.getAnimations().map(({ finished }) => finished))
+        //   if (devFlags.debug) console.debug(`⚡️ view-transition-end (${type})`)
+        //   return
+        // }
+        // purge
+        cleanup(root, 'backwards');
+        // prepare old
+        from.body?.classList.add(Snapshot.config['vt-fwd-class-name']);
+        from.body?.dispatchEvent(new CustomEvent('pageswap', { detail: { page: from.body }, bubbles: true, composed: true }));
+        for (const oldToolbar of from.toolBarConfig ?? [])
+            oldToolbar.classList.add('fwn'); // prepare navbs
+        // prepare new
+        const toolbarExclusion = 0 < modalViews.length
+            ? (value, index, array) => value.parentElement?.matches('tool-bar:not(dialog tool-bar,body-view ~ tool-bar)')
+            : (value, index, array) => value.parentElement?.matches('tool-bar:not(body-view ~ tool-bar)'), bodyExclusion = 0 < modalViews.length ? (item) => item.body?.matches('scroll-view:not(dialog scroll-view)') : (value, index, array) => value;
+        for (const bti of newToolbars?.filter?.(toolbarExclusion) ?? [])
+            bti.classList.add('fwnn'); // for (const ti of newToolbars ?? []) ti.classList.add('fwnn') //
+        for (const bt of tos?.filter?.(bodyExclusion) ?? []) {
+            bt.body?.classList.add('fwdd'); //to?.classList.add('fwdd')
+            bt.body?.dispatchEvent(new CustomEvent('pagereveal', { detail: { page: bt.body }, bubbles: true, composed: true }));
+        }
+        if (0 < modalViews.length) {
+            for await (const el of modalViews)
+                el.showModal();
+            if (devFlags.debug)
+                console.debug(`⚡️ view-dialog-transition-start (${type})`);
+            await Promise.allSettled(modalViews?.[0].getAnimations().map(({ finished }) => finished));
+            if (devFlags.debug)
+                console.debug(`⚡️ view-dialog-transition-end (${type})`);
+        }
+        else {
+            if (devFlags.debug)
+                console.debug(`⚡️ view-transition-start (${type})`);
+            await Promise.allSettled([...(from.body?.getAnimations().map(({ finished }) => finished) ?? []), ...(to?.body?.getAnimations().map(({ finished }) => finished) ?? [])]);
+            if (devFlags.debug)
+                console.debug(`⚡️ view-transition-end (${type})`);
+        }
+        if (0 < (to?.component?.querySelectorAll(`.${Snapshot.config?.['vt-fwd-class-name']},.bwd`) ?? []).length)
+            return;
+        cleanup(root);
+    }
+    else {
+        // Snapshot.getSnapshot(from)
+        // const oldPath = new NavigationPath(from)
+        const root = [from, ...from.parents()]
+            .map((item) => item.component)
+            .filter(Boolean)
+            .at(-1); // const root = getRootViewController(from)
+        //const { toolBarConfig: oldToolbars, host: oldHost, page: oldPage, slot: oldSlot } = getComputedView(from)
+        const froms = [...from.children()].map((item) => item?.hydrate());
+        const oldToolbars = froms.flatMap((item) => item.toolBarConfig ?? []).filter((item) => !!item), oldBodies = froms.map((item) => item.body).filter((item) => !!item);
+        // console.log(99, queryToolbarConfigAll(oldSlot), oldToolbars)
+        // if most-top effect is closing a modal, skip everything
+        if ('DIALOG' === from.component?.tagName) {
+            from.body?.dispatchEvent(new CustomEvent('pageswap', { detail: { page: from.body }, bubbles: true, composed: true }));
+            from.component.close();
+            if (devFlags.debug)
+                console.debug(`⚡️ view-dialog-transition-start (${type})`);
+            await Promise.allSettled(from.component.getAnimations().map(({ finished }) => finished));
+            if (devFlags.debug)
+                console.debug(`⚡️ view-dialog-transition-end (${type})`);
+            if (from.component.matches('[open]'))
+                return;
+            await updateCallback();
+            return; // just close modal
+        }
+        const to = [...from.parents()].at(0)?.hydrate(); //closestBody(oldPath.component?.parentElement ?? undefined)
+        if (!to)
+            return console.debug('Can not go backwards.'); // nothing to go back to
+        const tv = to.body?.closest('tab-view');
+        if (tv && to.body?.matches('tab-view>navigation-stack:has(> navigation-stack,> navigation-split-view)>:scope'))
+            if ('bottom-bar' !== tv.tabBarPlacement)
+                return;
+        // const { toolBarConfig: newToolbars } = getComputedView(to.body)
+        // purge
+        cleanup(root, 'forwards');
+        // prepare new
+        for (const ti of to.toolBarConfig ?? [])
+            ti.classList.add('bwnn');
+        to.body?.classList.add('bwdd');
+        to.body?.dispatchEvent(new CustomEvent('pagereveal', { detail: { page: to.body }, bubbles: true, composed: true }));
+        // prepare old
+        const inbetweenModals = froms.map((item) => item.component).filter((item) => !!item && item.matches('dialog[open]')), //queryHostAll(oldPage).filter?.((item) => item.matches('dialog[open]')) ?? [], // FIXME: TEst this, added oldHost too
+        toolbarExclusion = 0 < inbetweenModals.length
+            ? (value, index, array) => value.parentElement?.matches('tool-bar:not(dialog tool-bar)')
+            : (value, index, array) => value, bodyExclusion = 0 < inbetweenModals.length ? (item) => item?.matches('scroll-view:not(dialog scroll-view)') : (item) => item;
+        for (const ti of [...(from.toolBarConfig ?? []), ...(oldToolbars?.filter?.(toolbarExclusion) ?? [])])
+            ti.classList.add('bwn');
+        for (const nn of [from.body, ...oldBodies?.filter?.(bodyExclusion)]) {
+            nn?.classList.add('bwd'); //from?.classList.add('bwd')
+            nn?.dispatchEvent(new CustomEvent('pageswap', { detail: { page: nn }, bubbles: true, composed: true }));
+        }
+        for (const el of inbetweenModals)
+            el.close(); // close old inbetween modals
+        // capture trans
+        if (devFlags.debug)
+            console.debug(`⚡️ view-transition-start (${type})`);
+        await Promise.allSettled([...(from.body?.getAnimations().map(({ finished }) => finished) ?? []), ...(to.body?.getAnimations().map(({ finished }) => finished) ?? [])]);
+        if (devFlags.debug)
+            console.debug(`⚡️ view-transition-end (${type})`);
+        if (to.body?.closest(`.bwd,.${Snapshot.config?.['vt-fwd-class-name']}`))
+            return;
+        cleanup(root);
+        // remove or hide
+        await updateCallback();
+    }
+};

package/generated/internal/utils/add.d.ts

@@ -0,0 +1 @@
+export default function <T extends object>(set: Set<T> | WeakSet<T>, value: T): boolean;

package/generated/internal/utils/add.js

@@ -0,0 +1,7 @@
+export default function (set, value) {
+    if (!set.has(value)) {
+        set.add(value);
+        return true;
+    }
+    return false;
+}

package/generated/internal/utils/cash/ancestors.d.ts

@@ -0,0 +1 @@
+export default function <T extends Element>(selector: string, element?: Element): T[];

package/generated/internal/utils/cash/ancestors.js

@@ -0,0 +1,27 @@
+export default function (selector, element) {
+    const matches = [];
+    let current = element?.closest(selector) ?? undefined;
+    while (current) {
+        matches.push(current);
+        current = current.parentElement?.closest(selector) ?? undefined;
+    }
+    return matches;
+}
+// function querySelectorAllUp(el, selector) {
+//   const matches = [];
+//   let current = el.parentElement;
+//   while (current) {
+//     if (current.matches(selector)) matches.push(current);
+//     current = current.parentElement;
+//   }
+//   return matches;
+// }
+// function querySelectorAllUp(el, selector) {
+//   const matches = [];
+//   let current = el.closest(selector);
+//   while (current) {
+//     matches.push(current);
+//     current = current.parentElement?.closest(selector);
+//   }
+//   return matches;
+// }