@rdlabo/ionic-theme-ios27 1.0.4-beta.pr200.shadf4bf1ee4081 → 1.0.4-beta.pr206.sha6e297949cd2b

package/dist/native/runtime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../src/native/runtime.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAGV,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EAEpB,MAAM,eAAe,CAAC;AAkBvB,eAAO,MAAM,aAAa,GACxB,KAAK,QAAQ,EACb,QAAQ,mBAAmB,EAC3B,UAAS,oBAAyB,KACjC,OAAO,CAAC,mBAAmB,CAof7B,CAAC"}
+{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../src/native/runtime.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAGV,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EAEpB,MAAM,eAAe,CAAC;AAkBvB,eAAO,MAAM,aAAa,GACxB,KAAK,QAAQ,EACb,QAAQ,mBAAmB,EAC3B,UAAS,oBAAyB,KACjC,OAAO,CAAC,mBAAmB,CA+jB7B,CAAC"}

package/dist/native/runtime.js

@@ -39,6 +39,11 @@ export const createRuntime = async (doc, plugin, options = {}) => {
     let dirty = false;
     let pending = false;
     let stopped = false;
+    let tabSwitchHandoff = false;
+    let handoffUntil = 0;
+    let handoffAcrossPending = false;
+    let handoffInstant = false;
+    let modalPresentHandoff = false;
     let frame = 0;
     let updates = 0;
     let reason;
@@ -75,7 +80,7 @@ export const createRuntime = async (doc, plugin, options = {}) => {
         search.release(element);
         element.removeAttribute(marker);
         if (!stopped)
-            crossfade.play(element, false);
+            crossfade.play(element, false, handoffInstant);
         if (element.getAttribute('aria-hidden') === 'true') {
             const previous = sources.get(element);
             if (previous == null)
@@ -186,6 +191,8 @@ export const createRuntime = async (doc, plugin, options = {}) => {
         frame = 0;
         dirty = false;
         pending = true;
+        handoffInstant = tabSwitchHandoff || handoffAcrossPending || modalPresentHandoff || win.performance.now() < handoffUntil;
+        modalPresentHandoff = false;
         try {
             const size = `${win.innerWidth}:${win.innerHeight}`;
             if (viewport !== size) {
@@ -208,15 +215,17 @@ export const createRuntime = async (doc, plugin, options = {}) => {
             const removed = Array.from(sources.keys()).filter((element) => !retained.has(element));
             if (removed.length) {
                 removed.forEach(restore);
-                await painted();
-                if (stopped || dirty)
-                    return;
+                if (!handoffInstant) {
+                    await painted();
+                    if (stopped || dirty)
+                        return;
+                }
             }
             const data = { viewportWidth: win.innerWidth, controls: candidates.map((candidate) => candidate.control) };
             const serialized = JSON.stringify(data);
             if (serialized === lastSnapshot && !forceRefresh)
                 return;
-            const snapshot = { ...data, revision: ++revision, transitionDuration: crossfade.duration() };
+            const snapshot = { ...data, revision: ++revision, transitionDuration: crossfade.duration(handoffInstant) };
             forceRefresh = false;
             updates++;
             updatingRevision = snapshot.revision;
@@ -255,7 +264,7 @@ export const createRuntime = async (doc, plugin, options = {}) => {
             for (const element of accepted.flatMap(candidateSources)) {
                 if (!sources.has(element)) {
                     sources.set(element, element.getAttribute('aria-hidden'));
-                    crossfade.play(element, true);
+                    crossfade.play(element, true, handoffInstant);
                     element.setAttribute(marker, '');
                     element.setAttribute('aria-hidden', 'true');
                     element.dispatchEvent(new CustomEvent('nativeUIShellChange'));
@@ -278,6 +287,10 @@ export const createRuntime = async (doc, plugin, options = {}) => {
             pendingActivations = [];
             if (forceRefresh)
                 rejected = new WeakMap();
+            if (!stopped && (handoffAcrossPending || (handoffInstant && dirty))) {
+                handoffUntil = Math.max(handoffUntil, win.performance.now() + 400);
+            }
+            handoffAcrossPending = false;
             pending = false;
             if (dirty && !stopped)
                 schedule();
@@ -301,12 +314,56 @@ export const createRuntime = async (doc, plugin, options = {}) => {
         getNativeSearchBindings(doc)
             .filter((binding) => page.contains(binding.footer))
             .forEach((binding) => search.retire(binding));
+        if (event.type === LIFECYCLE_WILL_LEAVE)
+            beginTabSwitchHandoffIfNeeded(page);
         pages.add(page);
         schedule();
     };
     const pageDid = (event) => {
         pages.delete(event.target);
         schedule();
+        if (tabSwitchHandoff && pages.size === 0)
+            endTabSwitchHandoff();
+    };
+    const tabOfPath = (tabs, pathname) => {
+        let best;
+        for (const button of Array.from(tabs.querySelectorAll('ion-tab-button'))) {
+            const tab = button.getAttribute('tab');
+            const href = button.getAttribute('href')?.split(/[?#]/)[0];
+            if (!tab || !href)
+                continue;
+            if (pathname === href || pathname.startsWith(`${href}/`)) {
+                if (!best || href.length > best.length)
+                    best = { tab, length: href.length };
+            }
+        }
+        return best?.tab;
+    };
+    const armTabSwitchHandoff = () => {
+        tabSwitchHandoff = true;
+        handoffUntil = Math.max(handoffUntil, win.performance.now() + 400);
+        if (pending)
+            handoffAcrossPending = true;
+    };
+    const beginTabSwitchHandoffIfNeeded = (page) => {
+        const tabs = page.closest('ion-tabs');
+        if (!tabs)
+            return;
+        const bar = tabs.querySelector('ion-tab-bar');
+        const selected = (bar && 'selectedTab' in bar ? String(bar.selectedTab ?? '') : '') ||
+            tabs.querySelector('ion-tab-button.tab-selected')?.getAttribute('tab') ||
+            undefined;
+        const destination = tabOfPath(tabs, win.location.pathname);
+        if (selected && destination && selected !== destination)
+            armTabSwitchHandoff();
+    };
+    const endTabSwitchHandoff = () => {
+        win.requestAnimationFrame(() => {
+            if (stopped || !tabSwitchHandoff)
+                return;
+            tabSwitchHandoff = false;
+            schedule();
+        });
     };
     const motion = (event) => {
         const target = event.target;
@@ -331,9 +388,19 @@ export const createRuntime = async (doc, plugin, options = {}) => {
         on(doc, name, pageWill);
     for (const name of [LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE])
         on(doc, name, pageDid);
+    on(doc, 'ionTabsWillChange', () => {
+        armTabSwitchHandoff();
+        schedule();
+    });
+    on(doc, 'ionTabsDidChange', endTabSwitchHandoff);
     for (const name of overlayNames) {
         on(doc, `ion${name}WillPresent`, (event) => {
             presented.add(event.target);
+            if (name === 'Modal') {
+                modalPresentHandoff = true;
+                if (pending)
+                    handoffInstant = true;
+            }
             schedule();
         });
         on(doc, `ion${name}DidDismiss`, (event) => {
@@ -352,7 +419,6 @@ export const createRuntime = async (doc, plugin, options = {}) => {
     for (const name of [
         'ionChange',
         'ionSelect',
-        'ionTabsDidChange',
         'ionImgDidLoad',
         CSS_MOTION_EVENTS.transitionEnd,
         CSS_MOTION_EVENTS.animationEnd,

package/dist/native/shared/crossfade.d.ts

@@ -1,7 +1,7 @@
 export declare const fadeMarker = "data-native-ui-shell-fading";
 export declare const createCrossfade: (win: Window) => {
-    duration: () => 0 | 180;
-    play(element: HTMLElement, toNative: boolean): void;
+    duration: (instant?: boolean) => 0 | 180;
+    play(element: HTMLElement, toNative: boolean, instant?: boolean): void;
     settled(): Promise<void>;
     destroy(): void;
 };

package/dist/native/shared/crossfade.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"crossfade.d.ts","sourceRoot":"","sources":["../../../src/native/shared/crossfade.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,gCAAgC,CAAC;AAGxD,eAAO,MAAM,eAAe,GAAI,KAAK,MAAM;;kBAezB,WAAW,YAAY,OAAO;;;CA8B/C,CAAC"}
+{"version":3,"file":"crossfade.d.ts","sourceRoot":"","sources":["../../../src/native/shared/crossfade.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,gCAAgC,CAAC;AAGxD,eAAO,MAAM,eAAe,GAAI,KAAK,MAAM;;kBAezB,WAAW,YAAY,OAAO;;;CA+B/C,CAAC"}

package/dist/native/shared/crossfade.js

@@ -15,14 +15,14 @@ export const createCrossfade = (win) => {
     };
     reduced.addEventListener('change', cancelAll);
     return {
-        duration: () => (reduced.matches ? 0 : 180),
-        play(element, toNative) {
+        duration: (instant = false) => (reduced.matches || instant ? 0 : 180),
+        play(element, toNative, instant = false) {
             const previous = active.get(element);
             const current = Number(win.getComputedStyle(element).opacity);
             previous?.cancel();
             active.delete(element);
             const opacity = Number(win.getComputedStyle(element).opacity);
-            if (reduced.matches || !element.isConnected) {
+            if (reduced.matches || instant || !element.isConnected) {
                 element.removeAttribute(fadeMarker);
                 return;
             }

package/docs/native-ui-shell.md

@@ -118,6 +118,8 @@ Custom host animation or transition declarations on the FAB, list or button keep
 
 The connection in `src/transition/ios.transition.ts` waits for native retirement before starting the Web animation. Interactive progress and completion/cancellation are queued while that retirement is in progress. Stationary shared tabs are retained. First render and transitions without an animation builder are covered by the startup runtime and Ionic lifecycle events.
 
+Tab switches skip the Web/native crossfade so a retiring UIKit snapshot cannot linger over the next tab. Detection uses the router URL versus the still-selected tab on `ionViewWillLeave` (and vanilla `ionTabsWillChange` / `ionTabsDidChange` DOM events). Stack pushes and pops keep the normal 180ms handoff.
+
 Standard Ionic overlays suspend native projection until dismissal. Unsupported searchable-tab configurations use the existing Web animation and share this ownership with Web glass gestures. CSS motion of supported containing surfaces also causes temporary Web rendering.
 
 During retirement, the source is restored and allowed to paint before its native cover is removed. During acquisition, the source is hidden only after a successful, current native response. Delayed responses are revalidated per control: existing eligible controls retain their native cover while content updates catch up. Only removed or ineligible sources return to Web; newly acquired sources require an exact acknowledgement. Ordinary page mutations never call the global clear operation. UIKit tab instances and items are retained, and equal frames/selections are not reapplied. Duplicate/stale activations are discarded. WebKit and UIKit still render separately: the implementation avoids an intentional blank frame, but does not provide an OS-level atomic compositing guarantee. Validate custom transitions and overlays on the app's supported simulators before rollout; unknown overlay systems are outside the automatic integration contract.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rdlabo/ionic-theme-ios27",
   "private": false,
-  "version": "1.0.4-beta.pr200.shadf4bf1ee4081",
+  "version": "1.0.4-beta.pr206.sha6e297949cd2b",
   "description": "iOS27 Theme for Ionic Framework",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/native/runtime.ts

@@ -58,6 +58,16 @@ export const createRuntime = async (
   let dirty = false;
   let pending = false;
   let stopped = false;
+  /** True while a tab-switch handoff should skip crossfade. */
+  let tabSwitchHandoff = false;
+  /** Keep instant updates until this time — DidLeave often precedes the retire sync. */
+  let handoffUntil = 0;
+  /** Tab switch armed while a sync was already in flight; extend instant past that sync. */
+  let handoffAcrossPending = false;
+  /** Captured at the start of each sync so an in-flight update keeps a stable duration. */
+  let handoffInstant = false;
+  /** Retire native controls immediately as a modal starts covering the page. */
+  let modalPresentHandoff = false;
   let frame = 0;
   let updates = 0;
   let reason: string | undefined;
@@ -91,7 +101,7 @@ export const createRuntime = async (
     lastSnapshot = '';
     search.release(element);
     element.removeAttribute(marker);
-    if (!stopped) crossfade.play(element, false);
+    if (!stopped) crossfade.play(element, false, handoffInstant);
     if (element.getAttribute('aria-hidden') === 'true') {
       const previous = sources.get(element);
       if (previous == null) element.removeAttribute('aria-hidden');
@@ -197,6 +207,8 @@ export const createRuntime = async (
     frame = 0;
     dirty = false;
     pending = true;
+    handoffInstant = tabSwitchHandoff || handoffAcrossPending || modalPresentHandoff || win.performance.now() < handoffUntil;
+    modalPresentHandoff = false;
     try {
       const size = `${win.innerWidth}:${win.innerHeight}`;
       // WebKit can resize before Ionic's fixed DOM positions catch up.
@@ -225,13 +237,17 @@ export const createRuntime = async (
       if (removed.length) {
         // Restore the source and let WebKit paint before removing its native cover.
         removed.forEach(restore);
-        await painted();
-        if (stopped || dirty) return;
+        // The outgoing tab is no longer visible, so waiting two frames only leaves its
+        // native snapshot over the destination. Stack transitions still need the paint.
+        if (!handoffInstant) {
+          await painted();
+          if (stopped || dirty) return;
+        }
       }
       const data = { viewportWidth: win.innerWidth, controls: candidates.map((candidate) => candidate.control) };
       const serialized = JSON.stringify(data);
       if (serialized === lastSnapshot && !forceRefresh) return;
-      const snapshot: ShellSnapshot = { ...data, revision: ++revision, transitionDuration: crossfade.duration() };
+      const snapshot: ShellSnapshot = { ...data, revision: ++revision, transitionDuration: crossfade.duration(handoffInstant) };
       // A native visibility notification during this update must survive its ack.
       forceRefresh = false;
       updates++;
@@ -272,7 +288,7 @@ export const createRuntime = async (
       for (const element of accepted.flatMap(candidateSources)) {
         if (!sources.has(element)) {
           sources.set(element, element.getAttribute('aria-hidden'));
-          crossfade.play(element, true);
+          crossfade.play(element, true, handoffInstant);
           element.setAttribute(marker, '');
           element.setAttribute('aria-hidden', 'true');
           element.dispatchEvent(new CustomEvent('nativeUIShellChange'));
@@ -294,6 +310,11 @@ export const createRuntime = async (
       pendingActivations = [];
       // A refresh received before the ack must also invalidate that ack's rejects.
       if (forceRefresh) rejected = new WeakMap();
+      // A tab switch mid-update (or a dirty follow-up) must keep instant through the retire sync.
+      if (!stopped && (handoffAcrossPending || (handoffInstant && dirty))) {
+        handoffUntil = Math.max(handoffUntil, win.performance.now() + 400);
+      }
+      handoffAcrossPending = false;
       pending = false;
       if (dirty && !stopped) schedule();
       else finishWaiters();
@@ -323,12 +344,55 @@ export const createRuntime = async (
     getNativeSearchBindings(doc)
       .filter((binding) => page.contains(binding.footer))
       .forEach((binding) => search.retire(binding));
+    // Angular updates the URL before willLeave, but keeps ion-tab-bar.selectedTab on the
+    // leaving tab until DidChange. A mismatch means this leave is a tab switch, not a stack push.
+    if (event.type === LIFECYCLE_WILL_LEAVE) beginTabSwitchHandoffIfNeeded(page);
     pages.add(page);
     schedule();
   };
   const pageDid: EventListener = (event) => {
     pages.delete(event.target as HTMLElement);
     schedule();
+    if (tabSwitchHandoff && pages.size === 0) endTabSwitchHandoff();
+  };
+  const tabOfPath = (tabs: Element, pathname: string) => {
+    let best: { tab: string; length: number } | undefined;
+    for (const button of Array.from(tabs.querySelectorAll('ion-tab-button'))) {
+      const tab = button.getAttribute('tab');
+      const href = button.getAttribute('href')?.split(/[?#]/)[0];
+      if (!tab || !href) continue;
+      if (pathname === href || pathname.startsWith(`${href}/`)) {
+        if (!best || href.length > best.length) best = { tab, length: href.length };
+      }
+    }
+    return best?.tab;
+  };
+  const armTabSwitchHandoff = () => {
+    tabSwitchHandoff = true;
+    // Retiring outgoing controls often lands in a later async sync than WillLeave/DidChange.
+    handoffUntil = Math.max(handoffUntil, win.performance.now() + 400);
+    // The in-flight sync already captured handoffInstant=false; hold instant for the next one.
+    if (pending) handoffAcrossPending = true;
+  };
+  const beginTabSwitchHandoffIfNeeded = (page: HTMLElement) => {
+    const tabs = page.closest('ion-tabs');
+    if (!tabs) return;
+    const bar = tabs.querySelector('ion-tab-bar');
+    const selected =
+      (bar && 'selectedTab' in bar ? String((bar as HTMLElement & { selectedTab?: string }).selectedTab ?? '') : '') ||
+      tabs.querySelector('ion-tab-button.tab-selected')?.getAttribute('tab') ||
+      undefined;
+    const destination = tabOfPath(tabs, win.location.pathname);
+    if (selected && destination && selected !== destination) armTabSwitchHandoff();
+  };
+  // DidChange / pageDid can land in the same turn as WillLeave. Clear the sticky flag on the
+  // next frame; handoffUntil / handoffAcrossPending still cover the async retire sync.
+  const endTabSwitchHandoff = () => {
+    win.requestAnimationFrame(() => {
+      if (stopped || !tabSwitchHandoff) return;
+      tabSwitchHandoff = false;
+      schedule();
+    });
   };
   const motion: EventListener = (event) => {
     const target = event.target as HTMLElement;
@@ -347,9 +411,21 @@ export const createRuntime = async (
   for (const name of Object.values(CSS_MOTION_EVENTS)) on(doc, name, motion);
   for (const name of [LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE]) on(doc, name, pageWill);
   for (const name of [LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE]) on(doc, name, pageDid);
+  on(doc, 'ionTabsWillChange', () => {
+    // Vanilla ion-tabs dispatches DOM events; @ionic/angular uses EventEmitters instead.
+    armTabSwitchHandoff();
+    schedule();
+  });
+  on(doc, 'ionTabsDidChange', endTabSwitchHandoff);
   for (const name of overlayNames) {
     on(doc, `ion${name}WillPresent`, (event) => {
       presented.add(event.target as HTMLElement);
+      if (name === 'Modal') {
+        modalPresentHandoff = true;
+        // WillPresent may arrive while another bridge update is awaiting its ack.
+        // Make that retirement instant too instead of racing the modal animation.
+        if (pending) handoffInstant = true;
+      }
       schedule();
     });
     on(doc, `ion${name}DidDismiss`, (event) => {
@@ -368,7 +444,6 @@ export const createRuntime = async (
   for (const name of [
     'ionChange',
     'ionSelect',
-    'ionTabsDidChange',
     'ionImgDidLoad',
     CSS_MOTION_EVENTS.transitionEnd,
     CSS_MOTION_EVENTS.animationEnd,

package/src/native/shared/crossfade.ts

@@ -15,14 +15,15 @@ export const createCrossfade = (win: Window) => {
   };
   reduced.addEventListener('change', cancelAll);
   return {
-    duration: () => (reduced.matches ? 0 : 180),
-    play(element: HTMLElement, toNative: boolean) {
+    duration: (instant = false) => (reduced.matches || instant ? 0 : 180),
+    play(element: HTMLElement, toNative: boolean, instant = false) {
       const previous = active.get(element);
       const current = Number(win.getComputedStyle(element).opacity);
       previous?.cancel();
       active.delete(element);
       const opacity = Number(win.getComputedStyle(element).opacity);
-      if (reduced.matches || !element.isConnected) {
+      // Tab switches skip the opacity handoff so a retiring native snapshot cannot linger.
+      if (reduced.matches || instant || !element.isConnected) {
         element.removeAttribute(fadeMarker);
         return;
       }