@swiftwc/ui 0.0.0-dev.6 → 0.0.0-dev.60

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();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}

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

@@ -0,0 +1,72 @@
+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();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case 'hidden':
+                if (oldValue === newValue)
+                    break;
+                if (!this.closest('tab-view'))
+                    break; // tabview stuff
+                // 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
+                // && 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;
+                }
+                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;
+        }
+    }
+    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, // beforetabreveal / beforetabswap
+            time: performance.now(),
+        };
+        self.queueMicrotask(() => {
+            this.#recentBefore = undefined;
+        }); // auto-expire after current task
+    };
+}
+_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,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

@@ -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 {};