@rdlabo/ionic-theme-ios27 1.2.1 → 2.0.0-1

package/src/native/shared/modal.ts

@@ -1,157 +0,0 @@
-import type { Frame } from '../definitions';
-
-/** Modal hosts cover the viewport even when their visible dialog is centered. */
-export const modalRailClass = 'ios-theme-vertical-bars-modal';
-const states = new WeakMap<Document, { top?: HTMLIonModalElement }>();
-
-export const topModal = (doc: Document): HTMLIonModalElement | undefined => states.get(doc)?.top;
-export const modalUsesVerticalBars = (element: Element): boolean => {
-  const modal = element.closest('ion-modal');
-  return !modal || modal.classList.contains(modalRailClass);
-};
-
-/** Only the foreground modal may contribute controls; never the covered page. */
-export const inVerticalBarsSurface = (element: Element): boolean => {
-  const modal = topModal(element.ownerDocument);
-  return modal ? element.closest('ion-modal') === modal && modalUsesVerticalBars(element) : !element.closest('ion-modal');
-};
-
-export const observeVerticalBarsModals = (doc: Document): (() => void) => {
-  const win = doc.defaultView!;
-  const state: { top?: HTMLIonModalElement } = {};
-  states.set(doc, state);
-  const presenting = new Set<HTMLIonModalElement>();
-  const dismissed = new WeakSet<HTMLIonModalElement>();
-  const observed = new Set<Element>();
-  const listeners = new AbortController();
-  let stopped = false;
-  let frame = 0;
-  let pointerActive = false;
-  let bounds = '';
-  const toolbarTop = '--ios-theme-vertical-bars-modal-offset-top';
-  const refresh = () => {
-    win.cancelAnimationFrame(frame);
-    frame = 0;
-    if (stopped) return;
-    const app = doc.querySelector('ion-app.ios-theme-vertical-bars');
-    const modals = Array.from(doc.querySelectorAll<HTMLIonModalElement>('ion-modal'));
-    const active = modals.filter(
-      (modal) => !dismissed.has(modal) && ((modal as HTMLIonModalElement & { presented?: boolean }).presented || presenting.has(modal)),
-    );
-    for (const modal of presenting) if (!modal.isConnected) presenting.delete(modal);
-    const top = active.sort((a, b) => a.overlayIndex - b.overlayIndex).slice(-1)[0];
-    let changed = state.top !== top;
-    state.top = top;
-    const nextBounds = top ? JSON.stringify(modalVerticalBarFrame(top)) : '';
-    changed ||= bounds !== nextBounds;
-    bounds = nextBounds;
-    const wanted = new Set<Element>();
-    for (const modal of modals) {
-      const content = modal.shadowRoot?.querySelector<HTMLElement>('[part~="content"]');
-      if (content) wanted.add(content);
-      // offsetWidth is unaffected by Ionic's presentation transforms.
-      const fullWidth = !!content && Math.abs(content.offsetWidth - win.innerWidth) <= 1 && Math.abs(content.offsetLeft) <= 1;
-      const enabled = !!app?.contains(modal) && active.includes(modal) && fullWidth;
-      if (enabled) {
-        const top = modalVerticalBarFrame(modal)?.y ?? 0;
-        const offset = `${top}px`;
-        if (modal.style.getPropertyValue(toolbarTop) !== offset) {
-          modal.style.setProperty(toolbarTop, offset);
-          changed = true;
-        }
-      } else modal.style.removeProperty(toolbarTop);
-      if (modal.classList.contains(modalRailClass) !== enabled) {
-        modal.classList.toggle(modalRailClass, enabled);
-        changed = true;
-      }
-    }
-    if (wanted.size !== observed.size || [...wanted].some((element) => !observed.has(element))) {
-      resize?.disconnect();
-      observer.disconnect();
-      observer.observe(doc.documentElement, observation);
-      observed.clear();
-      for (const element of wanted) {
-        resize?.observe(element);
-        observer.observe(element, { attributes: true, attributeFilter: ['style', 'class'] });
-        observed.add(element);
-      }
-    }
-    if (changed) win.dispatchEvent(new Event('nativeUIShellRefresh'));
-    if (
-      top &&
-      (pointerActive ||
-        Array.from(wanted).some((element) => element.getAnimations().some((animation) => animation.playState === 'running')))
-    )
-      schedule();
-  };
-  const schedule = () => {
-    if (!stopped && !frame) frame = win.requestAnimationFrame(refresh);
-  };
-  const resize = win.ResizeObserver ? new win.ResizeObserver(schedule) : undefined;
-  const observer = new MutationObserver(schedule);
-  const observation = { subtree: true, childList: true, attributes: true, attributeFilter: ['class', 'style'] };
-  observer.observe(doc.documentElement, observation);
-  for (const name of ['ionModalWillPresent', 'ionModalDidPresent', 'ionModalWillDismiss', 'ionModalDidDismiss', 'ionBreakpointDidChange']) {
-    doc.addEventListener(
-      name,
-      (event) => {
-        const modal = event.target as HTMLIonModalElement;
-        if (modal.localName !== 'ion-modal') return;
-        if (name === 'ionModalDidDismiss') {
-          presenting.delete(modal);
-          dismissed.add(modal);
-        } else {
-          presenting.add(modal);
-          dismissed.delete(modal);
-        }
-        refresh();
-      },
-      { capture: true, signal: listeners.signal },
-    );
-  }
-  doc.addEventListener(
-    'pointerdown',
-    (event) => {
-      if ((event.target as Element).closest('ion-modal')) {
-        pointerActive = true;
-        schedule();
-      }
-    },
-    { capture: true, signal: listeners.signal },
-  );
-  for (const name of ['pointerup', 'pointercancel'])
-    doc.addEventListener(
-      name,
-      () => {
-        pointerActive = false;
-        schedule();
-      },
-      { capture: true, signal: listeners.signal },
-    );
-  win.addEventListener('resize', schedule, { signal: listeners.signal });
-  win.addEventListener('nativeUIShellRefresh', schedule, { signal: listeners.signal });
-  refresh();
-  return () => {
-    stopped = true;
-    win.cancelAnimationFrame(frame);
-    observer.disconnect();
-    resize?.disconnect();
-    listeners.abort();
-    if (states.get(doc) !== state) return;
-    states.delete(doc);
-    doc.querySelectorAll<HTMLElement>(`.${modalRailClass}`).forEach((modal) => {
-      modal.classList.remove(modalRailClass);
-      modal.style.removeProperty(toolbarTop);
-    });
-  };
-};
-
-/** Visible modal bounds, clipped at the viewport for Ionic's translated sheets. */
-export const modalVerticalBarFrame = (modal: Element): Frame | undefined => {
-  const rect = modal.shadowRoot?.querySelector('[part~="content"]')?.getBoundingClientRect();
-  const win = modal.ownerDocument.defaultView!;
-  if (!rect) return;
-  const y = Math.max(0, rect.top);
-  const height = Math.min(win.innerHeight, rect.bottom) - y;
-  return height > 0 ? { x: 0, y, width: win.innerWidth, height } : undefined;
-};

package/src/native/vertical-bars-web-search.ts

@@ -1,80 +0,0 @@
-import { getNativeSearchBindings, type NativeSearchBinding } from '../native-integration';
-import { activateProjectedElement, marker, unprojected } from './shared/dom';
-
-export const searchProjectionClass = 'ios-theme-vertical-bars-search-projection';
-
-/** Web counterpart of the system search button above the vertical tabs, or at the rail bottom without visible tabs. */
-export const createVerticalBarsWebSearch = (doc: Document, eligible: (element: HTMLElement) => boolean, refresh: () => void) => {
-  let binding: NativeSearchBinding | undefined;
-  let projection: HTMLIonFabButtonElement | undefined;
-  let container: HTMLIonFabElement | undefined;
-  const iconObserver = new MutationObserver(refresh);
-  let previousAriaHidden: string | null = null;
-  const restore = () => {
-    iconObserver.disconnect();
-    container?.remove();
-    container = undefined;
-    projection = undefined;
-    if (binding) {
-      binding.trigger.removeAttribute(marker);
-      if (previousAriaHidden === null) binding.trigger.removeAttribute('aria-hidden');
-      else binding.trigger.setAttribute('aria-hidden', previousAriaHidden);
-    }
-    binding = undefined;
-  };
-  return {
-    restore,
-    get source() {
-      return binding?.trigger;
-    },
-    update(root: HTMLElement) {
-      const next = unprojected(binding ? [binding.trigger] : [], () =>
-        getNativeSearchBindings(doc).find(({ trigger, footer }) => eligible(trigger) && eligible(footer)),
-      );
-      if (next !== binding || container?.parentElement !== root) restore();
-      if (!next) return;
-      if (!projection) {
-        binding = next;
-        previousAriaHidden = next.trigger.getAttribute('aria-hidden');
-        projection = next.trigger.cloneNode(true) as HTMLIonFabButtonElement;
-        for (const name of ['id', 'slot', marker, 'aria-hidden', 'style']) projection.removeAttribute(name);
-        container = doc.createElement('ion-fab');
-        container.setAttribute('mode', (next.trigger as HTMLIonFabButtonElement).mode ?? 'ios');
-        container.classList.add(searchProjectionClass, 'ion-cloned-element');
-        projection.addEventListener(
-          'click',
-          (event) => {
-            event.preventDefault();
-            event.stopImmediatePropagation();
-            activateProjectedElement(next.trigger);
-          },
-          { capture: true },
-        );
-        container.append(projection);
-        root.append(container);
-        next.trigger.setAttribute(marker, '');
-        next.trigger.setAttribute('aria-hidden', 'true');
-      }
-      projection.setAttribute(
-        'aria-label',
-        next.trigger.getAttribute('aria-label') ?? next.footer.querySelector('ion-searchbar')?.getAttribute('aria-label') ?? 'Search',
-      );
-      const sourceIcon = next.trigger.querySelector('ion-icon');
-      const icon = projection.querySelector('ion-icon');
-      if (sourceIcon?.shadowRoot) iconObserver.observe(sourceIcon.shadowRoot, { subtree: true, childList: true, attributes: true });
-      if (sourceIcon && icon) {
-        icon.icon = sourceIcon.icon;
-        icon.name = sourceIcon.name;
-        icon.src = sourceIcon.src;
-      }
-      container!.hidden = next.trigger.style.pointerEvents === 'none';
-      projection.disabled = (next.trigger as HTMLIonFabButtonElement).disabled;
-      const bounds = next.tabBar.getBoundingClientRect();
-      const tabs = bounds.width > 0 && bounds.height > 0 && getComputedStyle(next.tabBar).visibility === 'visible' ? bounds : undefined;
-      container!.style.left = tabs ? `${tabs.left + (tabs.width - 46) / 2}px` : '';
-      container!.style.top = tabs ? `${tabs.top - 56}px` : '';
-      container!.style.right = tabs ? 'auto' : '';
-      container!.style.bottom = tabs ? 'auto' : '';
-    },
-  };
-};

package/src/native/vertical-bars-web.ts

@@ -1,411 +0,0 @@
-import { createVerticalBarsWebSearch, searchProjectionClass } from './vertical-bars-web-search';
-import { inVerticalBarsSurface, topModal } from './shared/modal';
-import type { NativeUIShellHandle, NativeUIShellOptions, NativeUIShellStatus } from './definitions';
-import { VERTICAL_BARS_TRANSITION_CANCELED } from '../native-integration';
-import {
-  activateProjectedElement,
-  createVerticalBarsPageState,
-  verticalBarsActionCandidate,
-  verticalBarsBackCandidate,
-  verticalBarsEnteringPage,
-  verticalBarsToolbarActions,
-  isExcluded,
-  isShellDisabled,
-  isVerticalBarsToolbarGroup,
-  preferredVerticalBarsBack,
-  verticalBarsOwned,
-  marker,
-  syncToolbarText,
-  toolbarTextMarker,
-  prehideOnlyMutation,
-  prehiddenClass,
-  unprojected,
-  withoutPrehide,
-} from './shared/dom';
-
-const backProjectionClass = 'ios-theme-vertical-bars-back-button-projection';
-const toolbarProjectionClass = 'ios-theme-vertical-bars-toolbar-projection';
-const readyClass = 'ios-theme-vertical-bars-toolbar-ready';
-const toolbarControlSize = 46;
-const toolbarControlGap = 10;
-
-interface ToolbarProjection {
-  source: HTMLIonButtonsElement;
-  projection: HTMLElement;
-  actions: { source: HTMLElement; projection: HTMLElement; previousAriaHidden: string | null }[];
-}
-
-interface ToolbarSource {
-  group: HTMLIonButtonsElement;
-  actions: HTMLElement[];
-}
-
-export const createVerticalBarsWebProjection = (
-  doc: Document,
-  options: NativeUIShellOptions,
-  enabled: () => boolean = () => true,
-): NativeUIShellHandle => {
-  const win = doc.defaultView!;
-  const toolbarEnabled = options.controls === undefined || options.controls.toolbar === true;
-  let root: HTMLElement | undefined;
-  let backSource: HTMLIonBackButtonElement | undefined;
-  let backProjection: HTMLIonBackButtonElement | undefined;
-  let previousBackAriaHidden: string | null = null;
-  let toolbarProjections: ToolbarProjection[] = [];
-  let suspended = 0;
-  let stopped = false;
-  let frame = 0;
-  let updates = 0;
-  let observingVerticalBars = false;
-  const verticalBarsPages = createVerticalBarsPageState();
-  let sourceObserver: MutationObserver | undefined;
-  let waiters: (() => void)[] = [];
-  const listeners = new AbortController();
-  const verticalBarsRoot = () => doc.querySelector<HTMLElement>('ion-app.ios-theme-vertical-bars');
-  const projectedSources = () =>
-    [backSource, search.source, ...toolbarProjections.flatMap(({ actions }) => actions.map(({ source }) => source))].filter(
-      (source): source is HTMLElement => !!source,
-    );
-  const isRendered = (element: HTMLElement) =>
-    withoutPrehide(element, () => {
-      const style = getComputedStyle(element);
-      const rect = element.getBoundingClientRect();
-      return element.isConnected && style.display !== 'none' && style.visibility === 'visible' && rect.width > 0 && rect.height > 0;
-    });
-  const search = createVerticalBarsWebSearch(
-    doc,
-    (element) =>
-      (options.controls === undefined || options.controls.tabs === true) &&
-      !!verticalBarsRoot()?.contains(element) &&
-      inVerticalBarsSurface(element) &&
-      !isExcluded(element, verticalBarsEnteringPage(element)) &&
-      !isShellDisabled(element) &&
-      !verticalBarsPages.isDeparted(element) &&
-      isRendered(element),
-    () => {
-      void schedule();
-    },
-  );
-  const inEligibleToolbar = (element: HTMLElement) =>
-    !!verticalBarsRoot()?.contains(element) &&
-    inVerticalBarsSurface(element) &&
-    verticalBarsActionCandidate(element) &&
-    !isExcluded(element, verticalBarsEnteringPage(element)) &&
-    !verticalBarsPages.isDeparted(element);
-  const isEligibleBack = (element: HTMLIonBackButtonElement) =>
-    !!verticalBarsRoot()?.contains(element) &&
-    inVerticalBarsSurface(element) &&
-    verticalBarsOwned(element) &&
-    verticalBarsBackCandidate(element) &&
-    !isExcluded(element, verticalBarsEnteringPage(element)) &&
-    !verticalBarsPages.isDeparted(element) &&
-    unprojected(projectedSources(), () => isRendered(element));
-  const pageOrder = (element: Element) => Array.from(doc.querySelectorAll('.ion-page')).indexOf(element.closest('.ion-page')!);
-  const findBack = () => {
-    const candidates = Array.from(doc.querySelectorAll<HTMLIonBackButtonElement>(`ion-back-button:not(.${backProjectionClass})`)).filter(
-      isEligibleBack,
-    );
-    return preferredVerticalBarsBack(candidates, doc);
-  };
-  const findToolbarGroups = () => {
-    const candidates = Array.from(doc.querySelectorAll<HTMLIonButtonsElement>(`ion-buttons:not(.${toolbarProjectionClass})`)).flatMap(
-      (group): ToolbarSource[] => {
-        const actions = verticalBarsToolbarActions(group).filter((action) => unprojected(projectedSources(), () => isRendered(action)));
-        if (!actions.length) return [];
-        if (!isVerticalBarsToolbarGroup(group)) return actions.filter(inEligibleToolbar).map((action) => ({ group, actions: [action] }));
-        return inEligibleToolbar(group) && unprojected(projectedSources(), () => isRendered(group)) ? [{ group, actions }] : [];
-      },
-    );
-    const highestPage = Math.max(...candidates.map(({ group }) => pageOrder(group)));
-    return candidates.filter(({ group }) => pageOrder(group) === highestPage);
-  };
-  const isCurrentToolbarAction = (source: HTMLElement) => findToolbarGroups().some(({ actions }) => actions.includes(source));
-  const restore = () => {
-    search.restore();
-    backProjection?.remove();
-    backProjection = undefined;
-    if (backSource) {
-      backSource.removeAttribute(marker);
-      if (previousBackAriaHidden === null) backSource.removeAttribute('aria-hidden');
-      else backSource.setAttribute('aria-hidden', previousBackAriaHidden);
-      backSource.dispatchEvent(new CustomEvent('nativeUIShellChange'));
-    }
-    backSource = undefined;
-    previousBackAriaHidden = null;
-    for (const { projection, actions } of toolbarProjections) {
-      projection.remove();
-      for (const { source, previousAriaHidden } of actions) {
-        source.removeAttribute(marker);
-        if (previousAriaHidden === null) source.removeAttribute('aria-hidden');
-        else source.setAttribute('aria-hidden', previousAriaHidden);
-        source.dispatchEvent(new CustomEvent('nativeUIShellChange'));
-      }
-    }
-    toolbarProjections = [];
-    sourceObserver?.disconnect();
-    sourceObserver = undefined;
-    root?.classList.remove(readyClass);
-    root = undefined;
-  };
-  const copyAttributes = (target: HTMLElement, original: HTMLElement) => {
-    for (const name of ['id', 'slot', marker, 'aria-hidden']) target.removeAttribute(name);
-    for (const attribute of Array.from(target.attributes))
-      if (!['class', marker].includes(attribute.name) && !original.hasAttribute(attribute.name)) target.removeAttribute(attribute.name);
-    for (const attribute of Array.from(original.attributes))
-      if (!['id', 'slot', marker, 'aria-hidden'].includes(attribute.name)) target.setAttribute(attribute.name, attribute.value);
-    target.classList.remove(prehiddenClass);
-  };
-  const syncBack = (target: HTMLIonBackButtonElement, original: HTMLIonBackButtonElement) => {
-    copyAttributes(target, original);
-    target.classList.add(backProjectionClass, 'ion-cloned-element');
-    target.disabled = original.disabled;
-    target.defaultHref = original.defaultHref;
-    target.icon = original.icon;
-    target.color = original.color;
-    target.mode = original.mode;
-    target.text = '';
-  };
-  const syncAction = (target: HTMLElement, original: HTMLElement) => {
-    copyAttributes(target, original);
-    target.classList.add('ios-theme-vertical-bars-toolbar-action', 'ion-cloned-element');
-    const label =
-      original.getAttribute('aria-label') ??
-      original.shadowRoot?.querySelector('[part~=native]')?.getAttribute('aria-label') ??
-      original.textContent?.trim();
-    if (label) target.setAttribute('aria-label', label);
-    if ('disabled' in original) (target as HTMLIonButtonElement).disabled = (original as HTMLIonButtonElement).disabled;
-    if (original.matches('ion-button')) {
-      const icon = original.querySelector<HTMLElement>('ion-icon, svg');
-      const clonedIcon = icon?.cloneNode(true) as HTMLElement | undefined;
-      clonedIcon?.setAttribute('slot', 'icon-only');
-      target.replaceChildren(...(clonedIcon ? [clonedIcon] : []));
-    }
-  };
-  const sameSources = (back: HTMLIonBackButtonElement | undefined, groups: ToolbarSource[]) =>
-    back === backSource &&
-    groups.length === toolbarProjections.length &&
-    groups.every(({ group, actions }, index) => {
-      const current = toolbarProjections[index];
-      return (
-        group === current.source &&
-        actions.length === current.actions.length &&
-        actions.every((action, actionIndex) => action === current.actions[actionIndex].source)
-      );
-    });
-  const syncExisting = () => {
-    if (backSource && backProjection) syncBack(backProjection, backSource);
-    let topOffset = backSource ? toolbarControlSize + toolbarControlGap : 0;
-    for (const { projection, source, actions } of toolbarProjections) {
-      if (actions.length === 1 && !projection.matches('ion-buttons')) syncAction(projection, actions[0].source);
-      else copyAttributes(projection, source);
-      projection.classList.add(toolbarProjectionClass, 'ion-cloned-element');
-      projection.style.setProperty('--ios-theme-vertical-bars-toolbar-offset', `${topOffset}px`);
-      if (projection.matches('ion-buttons')) actions.forEach(({ source: action, projection: clone }) => syncAction(clone, action));
-      topOffset += actions.length * toolbarControlSize + toolbarControlGap;
-    }
-  };
-  const project = (nextBack: HTMLIonBackButtonElement | undefined, groups: ToolbarSource[]) => {
-    root = topModal(doc) ?? verticalBarsRoot()!;
-    let topOffset = 0;
-    if (nextBack) {
-      backSource = nextBack;
-      previousBackAriaHidden = nextBack.getAttribute('aria-hidden');
-      backProjection = nextBack.cloneNode(false) as HTMLIonBackButtonElement;
-      syncBack(backProjection, nextBack);
-      backProjection.addEventListener(
-        'click',
-        (event) => {
-          event.preventDefault();
-          event.stopImmediatePropagation();
-          if (backSource && backSource === findBack()) activateProjectedElement(backSource);
-        },
-        { capture: true },
-      );
-      root.append(backProjection);
-      nextBack.setAttribute(marker, '');
-      nextBack.setAttribute('aria-hidden', 'true');
-      nextBack.dispatchEvent(new CustomEvent('nativeUIShellChange'));
-      topOffset = toolbarControlSize + toolbarControlGap;
-    }
-    for (const { group, actions: sources } of groups) {
-      const projection = (sources.length === 1 ? sources[0] : group).cloneNode(false) as HTMLElement;
-      if (sources.length === 1) syncAction(projection, sources[0]);
-      else copyAttributes(projection, group);
-      projection.classList.add(toolbarProjectionClass, 'ion-cloned-element');
-      projection.style.setProperty('--ios-theme-vertical-bars-toolbar-offset', `${topOffset}px`);
-      const actions = sources.map((source) => {
-        const clone = sources.length === 1 ? projection : (source.cloneNode(false) as HTMLElement);
-        if (sources.length > 1) syncAction(clone, source);
-        clone.addEventListener(
-          'click',
-          (event) => {
-            event.preventDefault();
-            event.stopImmediatePropagation();
-            if (isCurrentToolbarAction(source)) activateProjectedElement(source);
-          },
-          { capture: true },
-        );
-        if (sources.length > 1) projection.append(clone);
-        const previousAriaHidden = source.getAttribute('aria-hidden');
-        source.setAttribute(marker, '');
-        source.setAttribute('aria-hidden', 'true');
-        source.dispatchEvent(new CustomEvent('nativeUIShellChange'));
-        return { source, projection: clone, previousAriaHidden };
-      });
-      root.append(projection);
-      toolbarProjections.push({ source: group, projection, actions });
-      topOffset += actions.length * toolbarControlSize + toolbarControlGap;
-    }
-    if (nextBack || toolbarProjections.length) root.classList.add(readyClass);
-    sourceObserver = new MutationObserver((records) => {
-      if (
-        records.some(
-          (record) =>
-            record.type !== 'attributes' || (![marker, 'aria-hidden'].includes(record.attributeName ?? '') && !prehideOnlyMutation(record)),
-        )
-      )
-        schedule();
-    });
-    if (nextBack?.shadowRoot)
-      sourceObserver.observe(nextBack.shadowRoot, { subtree: true, childList: true, attributes: true, attributeOldValue: true });
-    for (const { group } of groups)
-      sourceObserver.observe(group, { subtree: true, childList: true, attributes: true, attributeOldValue: true });
-  };
-  const performUpdate = () => {
-    frame = 0;
-    syncToolbarText(doc);
-    const currentRoot = verticalBarsRoot();
-    if (observingVerticalBars !== !!currentRoot) {
-      observingVerticalBars = !!currentRoot;
-      observer.disconnect();
-      observer.observe(doc.documentElement, {
-        subtree: true,
-        childList: true,
-        characterData: observingVerticalBars,
-        attributes: true,
-        attributeOldValue: true,
-        attributeFilter: observingVerticalBars ? undefined : ['class'],
-      });
-    }
-    if (stopped || suspended || !currentRoot || !enabled()) return restore();
-    const nextBack = toolbarEnabled ? findBack() : undefined;
-    const groups = toolbarEnabled ? findToolbarGroups() : [];
-    const projectionRoot = topModal(doc) ?? currentRoot;
-    search.update(projectionRoot);
-    if (!nextBack && !groups.length && !search.source) return restore();
-    if (root === (topModal(doc) ?? currentRoot) && sameSources(nextBack, groups)) return syncExisting();
-    restore();
-    project(nextBack, groups);
-    search.update(projectionRoot);
-    updates++;
-  };
-  const update = () => {
-    try {
-      performUpdate();
-    } catch {
-      restore();
-    } finally {
-      const pending = waiters;
-      waiters = [];
-      pending.forEach((resolve) => resolve());
-    }
-  };
-  const schedule = (): Promise<void> => {
-    if (stopped) return Promise.resolve();
-    // Release Web ownership before the native runtime can acknowledge its next frame.
-    if (!enabled()) restore();
-    const done = new Promise<void>((resolve) => waiters.push(resolve));
-    if (!frame) frame = win.requestAnimationFrame(update);
-    return done;
-  };
-  const observer = new MutationObserver((records) => {
-    const insideProjection = (target: Node) => {
-      const element = target instanceof Element ? target : target.parentNode instanceof Element ? target.parentNode : undefined;
-      const rootNode = target.getRootNode();
-      const shadowHost = rootNode instanceof ShadowRoot ? rootNode.host : undefined;
-      return !![element, shadowHost].some((candidate) =>
-        candidate?.closest(`.${backProjectionClass}, .${toolbarProjectionClass}, .${searchProjectionClass}`),
-      );
-    };
-    const verticalBarsChanged = records.some(
-      (record) =>
-        (record.type === 'attributes' && (record.target as Element).matches('ion-app')) ||
-        (record.type === 'childList' &&
-          Array.from(record.addedNodes).some(
-            (node) =>
-              node instanceof Element &&
-              (node.matches('ion-app.ios-theme-vertical-bars') || !!node.querySelector('ion-app.ios-theme-vertical-bars')),
-          )),
-    );
-    if (
-      (observingVerticalBars &&
-        records.some(
-          (record) =>
-            record.attributeName !== marker &&
-            record.attributeName !== toolbarTextMarker &&
-            !prehideOnlyMutation(record) &&
-            !insideProjection(record.target),
-        )) ||
-      (!observingVerticalBars && verticalBarsChanged && records.some((record) => !prehideOnlyMutation(record)))
-    )
-      schedule();
-  });
-  observer.observe(doc.documentElement, {
-    subtree: true,
-    childList: true,
-    attributes: true,
-    attributeOldValue: true,
-    attributeFilter: ['class'],
-  });
-  const pageLifecycle = (event: Event) => {
-    const page = event.target;
-    if (!(page instanceof HTMLElement) || !page.matches('.ion-page')) return;
-    if (event.type === VERTICAL_BARS_TRANSITION_CANCELED) {
-      const entering = (event as CustomEvent<{ entering?: HTMLElement }>).detail?.entering;
-      verticalBarsPages.cancel(entering, page);
-    } else verticalBarsPages.lifecycle(event);
-    if (verticalBarsRoot()) schedule();
-  };
-  for (const name of ['ionViewWillEnter', 'ionViewWillLeave', 'ionViewDidEnter', 'ionViewDidLeave'])
-    doc.addEventListener(name, pageLifecycle, { capture: true, signal: listeners.signal });
-  doc.addEventListener(VERTICAL_BARS_TRANSITION_CANCELED, pageLifecycle, { capture: true, signal: listeners.signal });
-  for (const name of ['ionModalWillPresent', 'ionModalDidDismiss'])
-    doc.addEventListener(name, schedule, { capture: true, signal: listeners.signal });
-  win.addEventListener('resize', schedule, { signal: listeners.signal });
-  win.addEventListener('nativeUIShellRefresh', schedule, { signal: listeners.signal });
-  schedule();
-
-  return {
-    getStatus: (): NativeUIShellStatus => ({
-      state: stopped ? 'stopped' : 'web',
-      projected:
-        Number(!!backSource) + Number(!!search.source) + toolbarProjections.reduce((count, group) => count + group.actions.length, 0),
-      updates,
-    }),
-    async suspend() {
-      suspended++;
-      restore();
-      let resumed = false;
-      return {
-        async resume() {
-          if (resumed) return;
-          resumed = true;
-          suspended = Math.max(0, suspended - 1);
-          if (!suspended) await schedule();
-        },
-      };
-    },
-    async destroy() {
-      if (stopped) return;
-      stopped = true;
-      win.cancelAnimationFrame(frame);
-      frame = 0;
-      waiters.forEach((resolve) => resolve());
-      waiters = [];
-      observer.disconnect();
-      sourceObserver?.disconnect();
-      listeners.abort();
-      restore();
-    },
-  };
-};

package/src/native-integration/transition.ts

@@ -1,15 +0,0 @@
-import type { AnimationBuilder } from '@ionic/core/components';
-import { connectNativeUIShellTransition } from './index';
-
-/**
- * Keeps an existing Ionic navigation animation and coordinates native control handoff.
- * Register the returned builder as navAnimation. Do not use it for overlay animations.
- * The builder must return a fresh Animation for each navigation; Ionic destroys it afterward.
- */
-export const withNativeUIShellTransition =
-  (builder: AnimationBuilder): AnimationBuilder =>
-  (baseEl, opts) => {
-    const animation = builder(baseEl, opts);
-    if (opts?.enteringEl) connectNativeUIShellTransition(animation, opts.enteringEl, opts.leavingEl);
-    return animation;
-  };

package/src/vertical-bars.ts

@@ -1,11 +0,0 @@
-export { enableVerticalControlArea, setVerticalControlAreaPlacement, IonicNativeUIShell } from './native';
-export { withNativeUIShellTransition } from './native-integration/transition';
-export type {
-  NativeUIShellStatus,
-  NativeUIShellSuspension,
-  VerticalBarEdge,
-  VerticalControlAreaHandle,
-  VerticalControlAreaOptions,
-} from './native';
-
-export { applyFoldStateClasses } from './native/foldable/fold-state';