@rdlabo/ionic-theme-ios27 1.2.1 → 2.0.0-beta.pr303.shaf4f5ca16816f

package/src/native/index.ts

@@ -1,281 +0,0 @@
-import { Capacitor, registerPlugin } from '@capacitor/core';
-import { setConfig } from '../transition/ios.transition';
-import type {
-  NativeUIShellHandle,
-  NativeUIShellOptions,
-  NativeUIShellPlugin,
-  VerticalBarEdge,
-  VerticalBarPlacement,
-  VerticalControlAreaHandle,
-  VerticalControlAreaOptions,
-  WebViewMetrics,
-} from './definitions';
-import { createRuntime } from './runtime';
-import { createVerticalBarsWebProjection } from './vertical-bars-web';
-import { prehideVerticalBarsToolbarSources } from './prehide';
-import { observeVerticalBarsModals } from './shared/modal';
-export type {
-  NativeUIShellComponent,
-  NativeUIShellControls,
-  NativeUIShellHandle,
-  NativeUIShellOptions,
-  NativeUIShellStatus,
-  NativeUIShellSuspension,
-  VerticalBarEdge,
-  VerticalBarPlacement,
-  VerticalControlAreaHandle,
-  VerticalControlAreaOptions,
-  WebViewMetrics,
-} from './definitions';
-
-const plugin = registerPlugin<NativeUIShellPlugin>('IonicNativeUIShell');
-export const IonicNativeUIShell = plugin;
-let active: Promise<NativeUIShellHandle> | undefined;
-let activeConfiguration: string | undefined;
-const web = (reason: string): NativeUIShellHandle => ({
-  getStatus: () => ({ state: 'web', projected: 0, updates: 0, reason }),
-  suspend: async () => ({ resume: async () => {} }),
-  destroy: async () => {},
-});
-
-const combine = (native: NativeUIShellHandle, fallback: NativeUIShellHandle): NativeUIShellHandle => ({
-  getStatus() {
-    const nativeStatus = native.getStatus();
-    const fallbackStatus = fallback.getStatus();
-    return {
-      ...nativeStatus,
-      state:
-        nativeStatus.state === 'stopped' && fallbackStatus.state === 'stopped' ? 'stopped' : nativeStatus.projected > 0 ? 'native' : 'web',
-      projected: nativeStatus.projected + fallbackStatus.projected,
-      updates: nativeStatus.updates + fallbackStatus.updates,
-    };
-  },
-  async suspend() {
-    const [nativeLease, fallbackLease] = await Promise.all([native.suspend(), fallback.suspend()]);
-    return { resume: async () => void (await Promise.all([nativeLease.resume(), fallbackLease.resume()])) };
-  },
-  async destroy() {
-    await Promise.all([native.destroy(), fallback.destroy()]);
-  },
-});
-
-/** Wraps a runtime handle with the shared enable-lifecycle: reason, suspend hooks and idempotent destroy. */
-const manage = (
-  handle: NativeUIShellHandle,
-  lifecycle: {
-    reason?: string;
-    suspend?: () => (() => void) | undefined;
-    /** Runs after teardown; clears the shared slot only while this activation owns it. */
-    release?: () => void;
-    destroy?: () => void | Promise<void>;
-  } = {},
-): NativeUIShellHandle => {
-  let destroyed = false;
-  return {
-    getStatus: () => (lifecycle.reason ? { ...handle.getStatus(), reason: lifecycle.reason } : handle.getStatus()),
-    async suspend() {
-      const lease = await handle.suspend();
-      const resume = lifecycle.suspend?.();
-      return {
-        async resume() {
-          await lease.resume();
-          resume?.();
-        },
-      };
-    },
-    async destroy() {
-      if (destroyed) return;
-      destroyed = true;
-      try {
-        await handle.destroy();
-      } finally {
-        await lifecycle.destroy?.();
-        lifecycle.release?.();
-      }
-    },
-  };
-};
-
-/** Reads the current native WebView geometry and applies it to page transitions. */
-export const configureNativeTransition = async (): Promise<WebViewMetrics> => {
-  const metrics = typeof document !== 'undefined' && Capacitor.getPlatform() === 'ios' ? await plugin.getWebViewMetrics() : { radius: 0 };
-  setConfig({ radius: metrics.radius });
-  return metrics;
-};
-
-/** Resolves a logical vertical-bar edge to the physical side for the given direction. */
-const physicalVerticalBarEdge = (edge: Exclude<VerticalBarEdge, null>, rtl: boolean): 'left' | 'right' =>
-  (edge === 'leading') !== rtl ? 'left' : 'right';
-
-const elementRtl = (element: Element): boolean => element.closest('[dir]')?.getAttribute('dir') === 'rtl';
-
-// Device facts are supplied by the application; the theme only compares placement.
-const nativePlacements = new WeakMap<HTMLElement, { edge: VerticalBarEdge; rtl?: boolean }>();
-const horizontalFallbackAttribute = 'data-native-ui-shell-vertical-bars-suspended';
-
-// Keep the requested rail while ordinary Native UI Shell temporarily uses its
-// horizontal layout. Removing the effective class restores normal measurements,
-// toolbar ownership and safe areas throughout the existing rendering pipeline.
-const observeNativeVerticalBarsLayout = (doc: Document): (() => void) => {
-  const reconcile = () => {
-    const app = doc.querySelector<HTMLElement>('ion-app');
-    if (!app) return;
-    const requested = app.classList.contains('ios-theme-vertical-bars') || app.hasAttribute(horizontalFallbackAttribute);
-    const suspended = requested && nativePlacements.get(app)?.edge == null;
-    if (app.hasAttribute(horizontalFallbackAttribute) !== suspended) app.toggleAttribute(horizontalFallbackAttribute, suspended);
-    if (app.classList.contains('ios-theme-vertical-bars') !== (requested && !suspended)) {
-      app.classList.toggle('ios-theme-vertical-bars', requested && !suspended);
-    }
-  };
-  const observer = new MutationObserver(reconcile);
-  observer.observe(doc.documentElement, { childList: true, subtree: true, attributes: true, attributeFilter: ['class'] });
-  doc.defaultView?.addEventListener('nativeUIShellRefresh', reconcile);
-  reconcile();
-  return () => {
-    observer.disconnect();
-    doc.defaultView?.removeEventListener('nativeUIShellRefresh', reconcile);
-    const app = doc.querySelector<HTMLElement>(`ion-app[${horizontalFallbackAttribute}]`);
-    if (app) {
-      app.removeAttribute(horizontalFallbackAttribute);
-      app.classList.add('ios-theme-vertical-bars');
-    }
-  };
-};
-
-/**
- * Applies one placement to the CSS layout and both Web/native projections.
- * Pass `rtl` when the document direction is known; otherwise the nearest `dir` attribute is used.
- */
-export const setVerticalControlAreaPlacement = (placement: VerticalBarEdge | VerticalBarPlacement, rtl?: boolean): void => {
-  if (typeof document === 'undefined') return;
-  const app = document.querySelector<HTMLElement>('ion-app');
-  if (!app) throw new Error('Vertical Control Area requires ion-app');
-  const { edge, inset = 0 } = placement && typeof placement === 'object' ? placement : { edge: placement, inset: 0 };
-  if (placement && typeof placement === 'object' && placement.nativeEdge !== undefined) {
-    nativePlacements.set(app, { edge: placement.nativeEdge, rtl });
-  }
-  app.removeAttribute(horizontalFallbackAttribute);
-  app.classList.toggle('ios-theme-vertical-bars', edge !== null);
-  app.classList.toggle('ios-theme-vertical-bars-left', edge !== null && physicalVerticalBarEdge(edge, rtl ?? elementRtl(app)) === 'left');
-  if (edge && Number.isFinite(inset) && inset > 0) app.style.setProperty('--ios-theme-vertical-bars-native-inset', `${inset}px`);
-  else app.style.removeProperty('--ios-theme-vertical-bars-native-inset');
-  document.defaultView?.dispatchEvent(new Event('nativeUIShellRefresh'));
-};
-
-/**
- * Call once after ion-app is mounted. Ionic markup remains the source of truth.
- * Native vertical buttons default to SwiftUI appearance.
- * See VerticalControlAreaOptions for source styling and local overrides.
- */
-export const enableVerticalControlArea = async (options: VerticalControlAreaOptions = {}): Promise<VerticalControlAreaHandle> => {
-  const handle = await enableNativeUIShell({
-    buttonProjection: options.buttonProjection,
-    buttonDefaultFill: options.buttonDefaultFill,
-    controls: { tabs: true, toolbar: true },
-    verticalBarsOnly: true,
-  });
-  return {
-    getStatus: () => handle.getStatus(),
-    suspend: () => handle.suspend(),
-    destroy: () => handle.destroy(),
-    setPlacement: setVerticalControlAreaPlacement,
-  };
-};
-
-/** Call once at application startup. Ionic markup remains the source of truth. */
-export const enableNativeUIShell = (options: NativeUIShellOptions = {}): Promise<NativeUIShellHandle> => {
-  if (options.enabled === false) {
-    const current = active;
-    active = undefined;
-    activeConfiguration = undefined;
-    return current
-      ? current.then(async (handle) => {
-          await handle.destroy();
-          return web('Disabled');
-        })
-      : Promise.resolve(web('Disabled'));
-  }
-  if (typeof document === 'undefined') return Promise.resolve(web('Requires a document'));
-  const controls = options.controls;
-  const configuration = JSON.stringify([
-    options.verticalBarsOnly === true,
-    options.buttonProjection ?? 'system',
-    // Local source overrides can use this even when the startup projection is system.
-    options.buttonDefaultFill ?? null,
-    ...(['tabs', 'toolbar', 'segment', 'fab'] as const).map((component) => !controls || controls[component] === true),
-  ]);
-  if (active && activeConfiguration !== configuration)
-    return Promise.reject(
-      new Error('Native UI Shell is already running with different controls; destroy it before changing configuration.'),
-    );
-  if (active) return active;
-  activeConfiguration = configuration;
-  const stopModals = observeVerticalBarsModals(document);
-  const prehide =
-    options.controls === undefined || options.controls.toolbar === true ? prehideVerticalBarsToolbarSources(document) : undefined;
-  // A slow destroy of a superseded activation must not release a newer one.
-  let start: Promise<NativeUIShellHandle>;
-  const release = () => {
-    if (active === start) {
-      active = undefined;
-      activeConfiguration = undefined;
-    }
-  };
-  const fallback = (reason: string) =>
-    manage(createVerticalBarsWebProjection(document, options), {
-      reason,
-      suspend: () => prehide?.suspend(),
-      destroy: () => {
-        prehide?.stop();
-        stopModals();
-      },
-      release,
-    });
-  return (start = active =
-    (async () => {
-      if (Capacitor.getPlatform() !== 'ios') return fallback('Requires Capacitor iOS');
-      let runtime: NativeUIShellHandle | undefined;
-      let metricsListener: Awaited<ReturnType<typeof plugin.addListener>> | undefined;
-      let stopVerticalBarsLayout: (() => void) | undefined;
-      try {
-        const capabilities = await plugin.configure({ verticalBarsOnly: options.verticalBarsOnly === true });
-        if (!capabilities.supported) return fallback('Requires iOS 26 or later');
-        if (!options.verticalBarsOnly) stopVerticalBarsLayout = observeNativeVerticalBarsLayout(document);
-        // The application owns device state and selects the rail through placement classes.
-        const nativeVerticalBars = () => {
-          const app = document.querySelector<HTMLElement>('ion-app.ios-theme-vertical-bars');
-          if (!app) return false;
-          const reported = nativePlacements.get(app);
-          if (!reported?.edge) return false;
-          const physicalEdge = app.classList.contains('ios-theme-vertical-bars-left') ? 'left' : 'right';
-          return physicalEdge === physicalVerticalBarEdge(reported.edge, reported.rtl ?? elementRtl(app));
-        };
-        if (!options.verticalBarsOnly) {
-          metricsListener = await plugin.addListener('webViewMetricsChange', (metrics) => {
-            setConfig({ radius: metrics.radius });
-          });
-          await configureNativeTransition().catch(() => undefined);
-        }
-        const native = await createRuntime(document, plugin, options, nativeVerticalBars, options.verticalBarsOnly === true);
-        runtime = combine(
-          native,
-          createVerticalBarsWebProjection(document, options, () => !nativeVerticalBars() || native.getStatus().state === 'stopped'),
-        );
-        return manage(runtime, {
-          suspend: () => prehide?.suspend(),
-          release,
-          destroy: async () => {
-            await metricsListener?.remove().catch(() => {});
-            stopVerticalBarsLayout?.();
-            prehide?.stop();
-            stopModals();
-          },
-        });
-      } catch (error) {
-        await runtime?.destroy();
-        await metricsListener?.remove().catch(() => {});
-        stopVerticalBarsLayout?.();
-        return fallback(error instanceof Error ? error.message : String(error));
-      }
-    })());
-};

package/src/native/prehide.ts

@@ -1,265 +0,0 @@
-import { modalUsesVerticalBars } from './shared/modal';
-import { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core/components/index.js';
-import { VERTICAL_BARS_TRANSITION_CANCELED } from '../native-integration';
-import {
-  childElements,
-  clearVerticalBarsPlacement,
-  createVerticalBarsPageState,
-  verticalBarsActionCandidate,
-  verticalBarsBackCandidate,
-  verticalBarsBackWebClass,
-  verticalBarsOwned,
-  isVerticalBarsToolbarActionShape,
-  isPermanentlyExcluded,
-  isShellDisabled,
-  prehiddenClass,
-  prehideRootClass,
-  rejectedClass,
-  setVerticalBarsPlacement,
-  syncToolbarText,
-} from './shared/dom';
-
-const overlays = 'ion-menu, ion-popover';
-const sourceSelector = 'ion-back-button, ion-menu-button, ion-buttons, ion-button';
-// Realm- and teardown-safe: globals such as Element/HTMLElement may be gone
-// when a queued mutation microtask or a stale listener still runs.
-const isHtmlElement = (node: unknown): node is HTMLElement => !!node && (node as Node).nodeType === 1;
-const asElement = (node: Node | EventTarget | null): HTMLElement | undefined => (isHtmlElement(node) ? node : undefined);
-const backSupported = (element: HTMLElement): boolean => {
-  const back = element as HTMLIonBackButtonElement;
-  return back.icon === undefined && back.color === undefined && !!back.shadowRoot;
-};
-const eligibleBack = verticalBarsBackCandidate;
-const eligible = verticalBarsActionCandidate;
-
-/** Capture toolbar placement once per routed-page epoch, before Ionic paints its transition. */
-export const prehideVerticalBarsToolbarSources = (doc: Document): { suspend: () => () => void; stop: () => void } => {
-  doc.documentElement.classList.add(prehideRootClass);
-  const scopes = new Map<HTMLElement, Set<HTMLElement>>();
-  const owner = new WeakMap<HTMLElement, HTMLElement>();
-  const pendingBacks = new Map<HTMLElement, { scope: HTMLElement; timer: ReturnType<typeof setTimeout> }>();
-  const verticalBarsPages = createVerticalBarsPageState();
-  const listeners = new AbortController();
-  const root = () => doc.querySelector<HTMLElement>('ion-app.ios-theme-vertical-bars');
-  let suspended = 0;
-  let stopped = false;
-  const routedPage = (element: HTMLElement) => element.closest<HTMLElement>('.ion-page:not(ion-app, body)');
-  const release = (scope: HTMLElement) => {
-    for (const [element, pending] of pendingBacks) {
-      if (pending.scope !== scope) continue;
-      clearTimeout(pending.timer);
-      pendingBacks.delete(element);
-    }
-    const owned = scopes.get(scope);
-    if (!owned) return;
-    owned.forEach((element) => {
-      if (owner.get(element) !== scope) return;
-      owner.delete(element);
-      element.classList.remove(prehiddenClass);
-      element.classList.remove(verticalBarsBackWebClass);
-      clearVerticalBarsPlacement(element);
-    });
-    scopes.delete(scope);
-  };
-  const capture = (scope: HTMLElement) => {
-    if (!root()?.contains(scope) || scope.closest(overlays) || !modalUsesVerticalBars(scope) || verticalBarsPages.isDeparted(scope)) return;
-    const owned = scopes.get(scope) ?? new Set<HTMLElement>();
-    const place = (element: HTMLElement, rail: boolean) => {
-      if (owned.has(element)) return;
-      const previousScope = owner.get(element);
-      if (previousScope) scopes.get(previousScope)?.delete(element);
-      owner.set(element, scope);
-      setVerticalBarsPlacement(element, rail);
-      if (element.matches('ion-back-button')) element.classList.toggle(verticalBarsBackWebClass, !rail);
-      owned.add(element);
-    };
-    const sources = scope.matches('ion-back-button') ? [scope] : Array.from(scope.querySelectorAll<HTMLElement>(sourceSelector));
-    sources.forEach((element) => {
-      // Shell opt-out is temporary; decide initial placement once it is lifted.
-      if (isShellDisabled(element)) return;
-      if (!modalUsesVerticalBars(element) || element.closest(overlays) || (scope.matches('.ion-page') && routedPage(element) !== scope))
-        return;
-      if (element.matches('ion-buttons')) {
-        const children = childElements(element);
-        const actions = children.filter((child) => eligible(child) && isVerticalBarsToolbarActionShape(child));
-        const group =
-          eligible(element) &&
-          actions.length === children.length &&
-          (actions.length > 1 || (actions.length === 1 && actions[0].matches('ion-menu-button')));
-        const freshGroup = !owned.has(element);
-        place(element, group);
-        children.forEach((child) => {
-          if (!child.matches('ion-back-button')) place(child, freshGroup && actions.includes(child));
-        });
-      } else if (element.matches('ion-back-button') || !element.parentElement?.matches('ion-buttons')) {
-        if (owned.has(element)) return;
-        if (
-          element.matches('ion-back-button') &&
-          eligibleBack(element) &&
-          (element as HTMLIonBackButtonElement).icon === undefined &&
-          (element as HTMLIonBackButtonElement).color === undefined &&
-          !element.shadowRoot &&
-          !element.classList.contains('hydrated')
-        ) {
-          const previousPending = pendingBacks.get(element);
-          if (previousPending && previousPending.scope !== scope) {
-            clearTimeout(previousPending.timer);
-            pendingBacks.delete(element);
-          }
-          if (!pendingBacks.has(element)) {
-            const timer = setTimeout(() => {
-              if (pendingBacks.get(element)?.scope !== scope) return;
-              pendingBacks.delete(element);
-              // A custom element that never hydrates must remain usable on Web.
-              place(element, false);
-              reconcile();
-            }, 1500);
-            pendingBacks.set(element, { scope, timer });
-          }
-          return;
-        }
-        const pending = pendingBacks.get(element);
-        if (pending) {
-          clearTimeout(pending.timer);
-          pendingBacks.delete(element);
-        }
-        place(
-          element,
-          element.matches('ion-back-button')
-            ? eligibleBack(element) && backSupported(element)
-            : eligible(element) && isVerticalBarsToolbarActionShape(element),
-        );
-      }
-    });
-    scopes.set(scope, owned);
-  };
-  const reconcile = () => {
-    syncToolbarText(doc);
-    const verticalBars = root();
-    if (!verticalBars) {
-      Array.from(scopes.keys()).forEach(release);
-      return;
-    }
-    for (const scope of scopes.keys()) if (!scope.isConnected || !modalUsesVerticalBars(scope)) release(scope);
-    for (const [element, pending] of pendingBacks) if (element.shadowRoot || element.classList.contains('hydrated')) capture(pending.scope);
-    // Ionic inserts the destination as invisible before WillEnter. Hide its
-    // sources in that same mutation microtask; capture new DOM identities on active pages too.
-    verticalBars.querySelectorAll<HTMLElement>('.ion-page:not(ion-app, body, .ion-page-hidden)').forEach(capture);
-    // Root toolbars can mount after startup; each new DOM identity is captured once.
-    verticalBars.querySelectorAll<HTMLElement>(sourceSelector).forEach((element) => {
-      if (routedPage(element) || element.closest(overlays)) return;
-      const scope = element.closest<HTMLElement>('ion-toolbar') ?? (element.matches('ion-back-button') ? element : null);
-      if (scope) capture(scope);
-    });
-    for (const owned of scopes.values()) {
-      for (const element of owned) {
-        const groupOwnsChildren =
-          element.parentElement?.matches('ion-buttons') &&
-          verticalBarsOwned(element.parentElement) &&
-          childElements(element.parentElement).every((child) => verticalBarsOwned(child));
-        const hide =
-          !suspended &&
-          verticalBarsOwned(element) &&
-          !groupOwnsChildren &&
-          element.isConnected &&
-          !element.closest(`.${rejectedClass}`) &&
-          !isPermanentlyExcluded(element) &&
-          !isShellDisabled(element) &&
-          (!element.matches('ion-back-button') || backSupported(element) || !element.classList.contains('hydrated')) &&
-          (!element.matches('ion-buttons') || childElements(element).every((child) => verticalBarsOwned(child)));
-        element.classList.toggle(prehiddenClass, hide);
-        if (element.matches('ion-back-button')) element.classList.toggle(verticalBarsBackWebClass, !hide);
-      }
-    }
-  };
-  const onWillEnter = (event: Event) => {
-    const page = asElement(event.target);
-    if (page?.matches('.ion-page')) {
-      verticalBarsPages.lifecycle(event);
-      release(page); // Cached pages begin a new placement epoch.
-      capture(page);
-      reconcile();
-    }
-  };
-  const onPageLifecycle: EventListener = (event) => {
-    verticalBarsPages.lifecycle(event);
-    if (event.type !== LIFECYCLE_DID_LEAVE) return;
-    const page = asElement(event.target);
-    if (page) release(page);
-  };
-  // A canceled transition keeps the leaving page active and abandons the entering one.
-  const onTransitionCanceled: EventListener = (event) => {
-    const leaving = asElement(event.target);
-    if (!leaving) return;
-    const entering = (event as CustomEvent<{ entering?: HTMLElement }>).detail?.entering;
-    verticalBarsPages.cancel(entering, leaving);
-    reconcile();
-  };
-  doc.addEventListener(LIFECYCLE_WILL_ENTER, onWillEnter, { capture: true, signal: listeners.signal });
-  for (const name of [LIFECYCLE_WILL_LEAVE, LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE])
-    doc.addEventListener(name, onPageLifecycle, { capture: true, signal: listeners.signal });
-  doc.addEventListener(VERTICAL_BARS_TRANSITION_CANCELED, onTransitionCanceled, { capture: true, signal: listeners.signal });
-  doc.defaultView?.addEventListener('nativeUIShellRefresh', reconcile, { signal: listeners.signal });
-  reconcile();
-  const mutationRelevant = (record: MutationRecord) => {
-    if (record.type === 'characterData') return record.target.parentElement?.matches('ion-toolbar') === true;
-    if (record.type === 'childList' && asElement(record.target)?.matches('ion-toolbar')) return true;
-    if (record.type === 'childList')
-      return [...Array.from(record.addedNodes), ...Array.from(record.removedNodes)].some(
-        (node) =>
-          isHtmlElement(node) &&
-          (node.matches(`${sourceSelector}, .ion-page, ion-toolbar`) || !!node.querySelector(`${sourceSelector}, .ion-page, ion-toolbar`)),
-      );
-    if (record.attributeName !== 'class') return true;
-    const current = (record.target as Element).className;
-    const previous = record.oldValue ?? '';
-    const withoutOwned = (value: string) =>
-      value
-        .split(/\s+/)
-        .filter((name) => name && ![prehiddenClass, prehideRootClass, verticalBarsBackWebClass].includes(name))
-        .join(' ');
-    return typeof current !== 'string' || withoutOwned(previous) !== withoutOwned(current);
-  };
-  let scheduled = false;
-  const observer = new (doc.defaultView?.MutationObserver ?? MutationObserver)((records) => {
-    if (scheduled || stopped || !records.some(mutationRelevant)) return;
-    scheduled = true;
-    queueMicrotask(() => {
-      scheduled = false;
-      if (!stopped) reconcile();
-    });
-  });
-  observer.observe(doc.documentElement, {
-    subtree: true,
-    childList: true,
-    characterData: true,
-    attributes: true,
-    attributeOldValue: true,
-    attributeFilter: ['class', 'data-shell', 'hidden', 'inert', 'icon', 'color'],
-  });
-  return {
-    suspend: () => {
-      if (stopped) return () => {};
-      suspended++;
-      doc.documentElement.classList.remove(prehideRootClass);
-      reconcile();
-      let resumed = false;
-      return () => {
-        if (resumed || stopped) return;
-        resumed = true;
-        if (--suspended === 0) {
-          doc.documentElement.classList.add(prehideRootClass);
-          reconcile();
-        }
-      };
-    },
-    stop: () => {
-      if (stopped) return;
-      stopped = true;
-      observer.disconnect();
-      listeners.abort();
-      doc.documentElement.classList.remove(prehideRootClass);
-      Array.from(scopes.keys()).forEach(release);
-    },
-  };
-};