@swiftwc/ui 0.0.0-dev.11 → 0.0.0-dev.111

package/generated/internal/class/form-associated-base.js

@@ -1,61 +1,44 @@
+import { debug } from '../../internal/utils';
 import { CleanupRegistry } from './cleanup-registry';
-import { MutationObserverSingleton } from './mutation-observer-singleton';
 const internals = new WeakMap();
-const trackedElements = new WeakMap();
-const observers = new MutationObserverSingleton();
+// const trackedElements = new WeakMap<FormAssociatedBase, Set<Element>>()
+// const observers = new MutationObserverSingleton()
 export function getInternals(instance) {
     const i = internals.get(instance);
     if (!i)
         throw new Error('Not a FormAssociatedBase instance');
     return i;
 }
-export function makeSlotchangeHandler(t) {
-    const handleSlotchange = (evt) => {
-        console.debug(`${makeSlotchangeHandler.name} ⚡️ ${evt?.type}`);
-        const slot = evt.target, assigned = slot.assignedElements({ flatten: true });
-        observers.syncObservations(trackedElements.get(t) ?? new Set(), assigned, handleTagMutation, ['value', 'label']);
-        // for (const el of trackedElements.get(t) ?? [])
-        //   if (!assigned.includes(el)) {
-        //     observers.unobserve(el)
-        //     trackedElements.get(t)?.delete(el)
-        //   }
-        // for (const el of assigned) {
-        //   if (!trackedElements.get(t)?.has(el))
-        //     observers.observe(el, handleTagMutation, {
-        //       attributes: true,
-        //       characterData: true,
-        //       subtree: true,
-        //       childList: true,
-        //       attributeFilter: ['value', 'label'],
-        //     })
-        //   trackedElements.get(t)?.add(el)
-        // }
-        if (0 < assigned.length)
-            handleTagMutation();
-    }, handleTagMutation = (entry) => {
-        console.debug(`${handleTagMutation.name} ⚡️ mutation`);
-        t.setValidity(t.validity, t.validationMessage);
-    };
-    return [{ types: 'slotchange', listener: handleSlotchange }];
-}
+// export function makeSlotchangeHandler(t: FormAssociatedBase) {
+//   const handleSlotchange = ({ type, target: slot }: Event) => {
+//       debug(`${makeSlotchangeHandler.name} ⚡️ ${type}`)
+//       if (!(slot instanceof HTMLSlotElement && slot)) return
+//       const assigned = slot.assignedElements({ flatten: true })
+//       observers.syncObservations(trackedElements.get(t) ?? new Set(), assigned, handleTagMutation, ['value', 'label'])
+//       if (0 < assigned.length) handleTagMutation()
+//     },
+//     handleTagMutation = (entry?: MutationRecord) => {
+//       debug(`${handleTagMutation.name} ⚡️ mutation`)
+//       t.setValidity(t.validity, t.validationMessage)
+//     }
+//   return [{ types: 'slotchange', listener: handleSlotchange }]
+// }
 export class FormAssociatedBase extends HTMLElement {
     static get formAssociated() {
         return true;
     }
     constructor() {
         super();
-        internals.set(this, this.attachInternals());
-        trackedElements.set(this, new Set());
+        internals.set(this, this.attachInternals()); //internals.set(this, this.attachInternals?.())
+        // trackedElements.set(this, new Set<Element>())
     }
     disconnectedCallback() {
-        console.debug(`${FormAssociatedBase.name} ⚡️ disconnect`);
+        debug(`${FormAssociatedBase.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
-        observers.clearObservationsSet(trackedElements.get(this) ?? new Set());
-        // for (const el of trackedElements.get(this) ?? []) observers.unobserve(el)
-        // trackedElements.get(this)?.clear() // trackedElements.delete(this)
+        // observers.clearObservationsSet(trackedElements.get(this) ?? new Set())
     }
     connectedCallback() {
-        console.debug(`${FormAssociatedBase.name} ⚡️ connect`);
+        debug(`${FormAssociatedBase.name} ⚡️ connect`);
     }
     get type() {
         return this.localName;

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

@@ -0,0 +1,9 @@
+export declare class MutationObserverSet {
+    #private;
+    private callback;
+    constructor(callback: MutationCallback);
+    observe(target: Element, attributeFilter?: string[]): Promise<void>;
+    unobserve(target: Element): Promise<void>;
+    syncObservations(source: Element[], attributeFilter?: string[]): Promise<void>;
+    unobserveAll(): Promise<void>;
+}

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.js

@@ -20,6 +20,24 @@ export class MutationObserverSingleton {
         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)) {

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

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

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 { debug, 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,53 @@ 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 }));
-                });
+                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 }) => {
+        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,47 @@
+import { Snapshot } from '../../snapshot';
+import { CleanupRegistry } from '../class/cleanup-registry';
+import { debug, onoff } from '../utils';
+export default function (filter) {
+    const handleMediaChange = (el, { type, matches }) => {
+        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 () {
+            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 () {
+            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() {
+    DEBUG && console.debug(`${NavigationTitle.name} ⚡️ connect`)
+
+    this.#scheduleSync()
+  }
+
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+    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() {
+    DEBUG && console.debug(`${NavigationTitle.name} ⚡️ connect`)
+
+    this.#scheduleSync()
+  }
+
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+    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/flags.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    DEBUG: boolean;
+};
+export default _default;

package/generated/internal/flags.js

@@ -0,0 +1 @@
+export default { DEBUG: false };

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