@swiftwc/ui 0.0.0-dev.8 → 0.0.0-dev.81

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

@@ -1,7 +1,7 @@
 var _a;
+import { lifecycleObserver } from '../../buses';
 import { CleanupRegistry } from '../../internal/class/cleanup-registry';
-import { LifecycleObserver } from '../../lifecycle-observer';
-import { frame, onoff } from '../utils';
+import { devFlags, frame, onoff } from '../utils';
 export class NavigationView extends HTMLElement {
     static get observedAttributes() {
         return ['hidden'];
@@ -11,30 +11,6 @@ export class NavigationView extends HTMLElement {
     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':
@@ -42,36 +18,55 @@ export class NavigationView extends HTMLElement {
                     break;
                 if (!this.closest('tab-view'))
                     break; // tabview stuff
-                let eventType = this.hasAttribute(name) ? 'tabshow' : 'tabhide', target = LifecycleObserver;
+                // trigger show/hide/reveal/swap on NEXT tick
+                // show/hide run on initial render too (show on NEXT tick, is also taken care of on connected on initial render)
+                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';
+                // && performance.now() - this.#recentBefore.time <= 100) {
+                if (this.#recentBefore) {
+                    if (['beforetabreveal', 'beforetabswap'].includes(this.#recentBefore.type)) {
+                        eventType = this.#recentBefore.type === 'beforetabreveal' ? 'tabreveal' : 'tabswap';
                         target = this;
                     }
                     // consume it (important so it doesn’t leak to next change)
                     this.#recentBefore = undefined;
                 }
-                console.debug(`${_a.name} 💡 ${eventType}`);
-                frame(this).then(() => {
-                    // if (!r) return
-                    target.dispatchEvent(new CustomEvent(eventType, { detail: { tag: this.id }, bubbles: true, composed: true }));
-                });
+                if (devFlags.debug)
+                    console.debug(`${_a.name} 💡 ${eventType}`);
+                frame(this).then(() => target.dispatchEvent(new CustomEvent(eventType, { detail: { tag: this.id }, bubbles: true, composed: true })));
                 break;
         }
     }
-    #handleBeforeTabRevealOrSwap = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        if (this.id !== evt.detail?.tag)
+    disconnectedCallback() {
+        CleanupRegistry.unregister(this);
+        this.#recentBefore = undefined;
+        // trigger hide on NEXT tick
+        if (!this.closest('tab-view'))
+            return;
+        frame().then(() => lifecycleObserver.dispatchEvent(new CustomEvent('tabhide', { detail: { tag: this.id }, bubbles: true, composed: true })));
+    }
+    connectedCallback() {
+        if (!this.closest('tab-view'))
+            return;
+        // wire befores
+        CleanupRegistry.register(this, onoff('beforetabreveal beforetabswap', this.#handleBeforeTabRevealOrSwap, this).on());
+        // trigger show on NEXT tick
+        if (this.hasAttribute('hidden'))
+            return; // skip if already rendered by attr-change during upgrade!
+        frame(this).then(() => lifecycleObserver.dispatchEvent(new CustomEvent('tabshow', { detail: { tag: this.id }, bubbles: true, composed: true })));
+    }
+    #handleBeforeTabRevealOrSwap = ({ type, detail }) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
+        if (this.id !== detail?.tag)
             return;
         this.#recentBefore = {
-            type: evt.type, // beforetabreveal / beforetabswap
+            type, // beforetabreveal / beforetabswap
             time: performance.now(),
         };
+        self.queueMicrotask(() => {
+            this.#recentBefore = undefined;
+        }); // auto-expire after current task
     };
 }
 _a = NavigationView;

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

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

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

@@ -1,4 +1,5 @@
-export function customElement(constructor) {
+// 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,6 @@
+export { default as adaptiveSlot } from './adaptive-slot';
+export * from './adaptive-slot';
+export { default as customElement } from './custom-element';
+export * from './custom-element';
+export { default as microtaskOnConnected } from './microtask-on-connected';
+export * from './microtask-on-connected';

package/generated/internal/decorators/index.js

@@ -0,0 +1,6 @@
+export { default as adaptiveSlot } from './adaptive-slot';
+export * from './adaptive-slot';
+export { default as customElement } from './custom-element';
+export * from './custom-element';
+export { default as microtaskOnConnected } from './microtask-on-connected';
+export * from './microtask-on-connected';

package/generated/internal/decorators/microtask-on-connected.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Replacement for this
+class() {
+#pendingSync = false
+  #scheduleSync() {
+    if (this.#pendingSync) return
+    this.#pendingSync = true
+    self.queueMicrotask(() => {
+      this.#pendingSync = false
+      this.#syncSibling()
+    })
+  }
+  #syncSibling = () => {
+    const sibling = this.closest<ScrollView>('scroll-view'),
+      value = this.getAttribute('value'),
+      subtitle = this.getAttribute('subtitle')
+
+    if (null === value) sibling?.removeAttribute('navigation-inline-title')
+    else sibling?.setAttribute('navigation-inline-title', value)
+
+    if (null === subtitle) sibling?.removeAttribute('navigation-inline-subtitle')
+    else sibling?.setAttribute('navigation-inline-subtitle', subtitle)
+  }
+}
+  connectedCallback() {
+    if (devFlags.debug) console.debug(`${NavigationTitle.name} ⚡️ connect`)
+
+    this.#scheduleSync()
+  }
+
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+    if (devFlags.debug) console.debug(`${NavigationTitle.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`)
+
+    this.#scheduleSync()
+
+    this.#render(this.getAttribute('value'), this.getAttribute('subtitle'))
+  }
+ */
+export default function <T extends HTMLElement>(fn: (el: T) => void): <C extends CustomElementConstructor>(Base: C, _context?: ClassDecoratorContext<C>) => void;

package/generated/internal/decorators/microtask-on-connected.js

@@ -0,0 +1,67 @@
+/**
+ * Replacement for this
+class() {
+#pendingSync = false
+  #scheduleSync() {
+    if (this.#pendingSync) return
+    this.#pendingSync = true
+    self.queueMicrotask(() => {
+      this.#pendingSync = false
+      this.#syncSibling()
+    })
+  }
+  #syncSibling = () => {
+    const sibling = this.closest<ScrollView>('scroll-view'),
+      value = this.getAttribute('value'),
+      subtitle = this.getAttribute('subtitle')
+
+    if (null === value) sibling?.removeAttribute('navigation-inline-title')
+    else sibling?.setAttribute('navigation-inline-title', value)
+
+    if (null === subtitle) sibling?.removeAttribute('navigation-inline-subtitle')
+    else sibling?.setAttribute('navigation-inline-subtitle', subtitle)
+  }
+}
+  connectedCallback() {
+    if (devFlags.debug) console.debug(`${NavigationTitle.name} ⚡️ connect`)
+
+    this.#scheduleSync()
+  }
+
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+    if (devFlags.debug) console.debug(`${NavigationTitle.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`)
+
+    this.#scheduleSync()
+
+    this.#render(this.getAttribute('value'), this.getAttribute('subtitle'))
+  }
+ */
+// const _sync = Symbol('sync')
+// @microtaskOnConnected((el) => (el as NavigationTitle)[_sync]())
+// attributeChangedCallback fires
+//   → originalAttrChanged (your #render) runs synchronously  ✅
+//   → schedule() queues microtask
+//     → microtask flush: syncToScrollView runs with already-updated attrs ✅
+export default function (fn) {
+    return function (Base, _context) {
+        const originalConnected = Base.prototype.connectedCallback, originalAttrChanged = Base.prototype.attributeChangedCallback;
+        Base.prototype.connectedCallback = function () {
+            originalConnected?.call(this);
+            schedule(this, fn);
+        };
+        Base.prototype.attributeChangedCallback = function (name, oldValue, newValue) {
+            originalAttrChanged?.call(this, name, oldValue, newValue);
+            schedule(this, fn);
+        };
+    };
+}
+const pendingMap = new WeakMap();
+function schedule(el, fn) {
+    if (pendingMap.get(el))
+        return;
+    pendingMap.set(el, true);
+    self.queueMicrotask(() => {
+        pendingMap.delete(el);
+        fn(el);
+    });
+}

package/generated/internal/privateNamespace.d.ts

@@ -1,4 +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

@@ -1 +1,168 @@
-export {};
+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/cash/index.d.ts

@@ -5,10 +5,11 @@ import prev from './prev';
 import prevAll from './prev-all';
 import prop from './prop';
 import siblings from './siblings';
-declare const DEFAULT: ":scope>:first-child";
+declare const DEFAULT: ">1";
 interface CashFn {
-    (innerHTML: string, selector?: typeof DEFAULT): Element;
-    (innerHTML: string, selector: string): DocumentFragment;
+    (innerHTML: string): DocumentFragment;
+    <T extends Element = Element>(innerHTML: string, selector: typeof DEFAULT): T;
+    <T extends Element = Element>(innerHTML: string, selector: string): T;
     prop: typeof prop;
     nextAll: typeof nextAll;
     prevAll: typeof prevAll;

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

@@ -5,12 +5,14 @@ import prev from './prev';
 import prevAll from './prev-all';
 import prop from './prop';
 import siblings from './siblings';
-const DEFAULT = ':scope>:first-child';
-const cash = ((innerHTML, selector = DEFAULT) => {
+const DEFAULT = '>1';
+const cash = ((innerHTML, selector) => {
     const template = Object.assign(document.createElement('template'), { innerHTML });
+    if (!selector)
+        return template.content;
     if (selector === DEFAULT)
-        return template.content.firstElementChild;
-    return template.content;
+        return template.content.firstElementChild; // OVERKILL
+    return template.content.querySelector('>1' === selector ? ':first-child' : selector);
 });
 cash.prop = prop;
 cash.nextAll = nextAll;

package/generated/internal/utils/dev-flags.d.ts

@@ -0,0 +1,3 @@
+export default class {
+    static get debug(): boolean;
+}

package/generated/internal/utils/dev-flags.js

@@ -0,0 +1,5 @@
+export default class {
+    static get debug() {
+        return true;
+    }
+}

package/generated/internal/utils/ensure-placeholder.d.ts

@@ -0,0 +1 @@
+export default function (target: HTMLElement | null, role: string | null, titleKey?: string | null): void;

package/generated/internal/utils/ensure-placeholder.js

@@ -0,0 +1,55 @@
+import { I18n } from '../../i18n';
+import { Snapshot } from '../../snapshot';
+import { default as $ } from './cash';
+function renderPlaceholder(el, role, titleKey) {
+    // if (!el.isConnected) return
+    // self.requestAnimationFrame(() => {
+    //   if (!el.isConnected) return
+    const label = el.querySelector(':scope>[slot=placeholder]') ?? el.appendChild($(`<label-view slot="placeholder"></label-view>`, '>1'));
+    switch (role) {
+        case 'cancel':
+            label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Cancel);
+            label.setAttribute('system-image', Snapshot.config['cancel-button-icon']);
+            break;
+        case 'close':
+            if (label.closest('[is=alert-dialog]')) {
+                label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').OK);
+            }
+            else {
+                label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Close);
+                label.setAttribute('system-image', Snapshot.config['close-button-icon']);
+            }
+            break;
+        case 'confirm':
+            label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Confirm);
+            label.setAttribute('system-image', Snapshot.config['confirm-button-icon']);
+            break;
+        case 'confirmation-action':
+            label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Confirm);
+            label.setAttribute('system-image', Snapshot.config['confirm-button-icon']);
+            break;
+        case 'cancellation-action':
+            label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Cancel);
+            label.setAttribute('system-image', Snapshot.config['cancel-button-icon']);
+            break;
+        case 'destructive':
+            label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Destructive);
+            label.setAttribute('system-image', Snapshot.config['delete-button-icon']);
+            break;
+        default:
+            label?.remove();
+            break;
+    }
+    // if (role) {
+    //   label.setAttribute('title', I18n.t('ButtonRole').Default.Destructive)
+    // } else label?.remove()
+    // })
+}
+export default function (target, role, titleKey) {
+    if (!target)
+        return;
+    const overiderTitle = typeof titleKey === 'string' && titleKey in I18n.t('ButtonRole') ? titleKey : undefined;
+    renderPlaceholder(target, role, overiderTitle);
+    // CleanupRegistry.unregister(target, 'i18n')
+    // CleanupRegistry.register(target, onoff('localechange', () => renderPlaceholder(target, role, overiderTitle), I18n.on).on(), 'i18n')
+}

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

@@ -1,17 +1,22 @@
-import cash from './cash';
 export { default as add } from './add';
+export { default as $ } from './cash';
 export { default as clamp } from './clamp';
 export { default as compareBigDecimals } from './compare-big-decimals';
 export { default as cssTime } from './css-time';
 export { default as debounce } from './debounce';
+export { default as devFlags } from './dev-flags';
+export { default as ensurePlaceholder } from './ensure-placeholder';
 export { default as frame } from './frame';
+export { default as isInside } from './is-inside';
 export { default as kebabCase } from './kebab-case';
 export { default as listActive } from './list-active';
 export { default as microtask } from './microtask';
 export { default as onoff } from './onoff';
+export { default as renderLabel } from './render-label';
+export { default as renderLabelIcon } from './render-label-icon';
+export { default as renderLabelTitle } from './render-label-title';
 export { default as set } from './set';
 export { default as sleep } from './sleep';
 export { default as slowHideShow } from './slow-hide-show';
 export { default as timeout } from './timeout';
 export { default as touchGlass } from './touch-glass';
-export declare const $: typeof cash;