@capgo/capacitor-transitions 8.0.1

package/dist/react/index.mjs

@@ -0,0 +1,2210 @@
+// src/core/animations.ts
+var IOS_EASING = "cubic-bezier(0.32, 0.72, 0, 1)";
+var ANDROID_EASING = "cubic-bezier(0.36, 0.66, 0.04, 1)";
+var ANDROID_BACK_EASING = "cubic-bezier(0.47, 0, 0.745, 0.715)";
+var IOS_DURATION = 540;
+var ANDROID_DURATION = 280;
+var ANDROID_BACK_DURATION = 200;
+var IOS_OFF_OPACITY = 0.8;
+var IOS_CENTER = "0%";
+var IOS_OFF_RIGHT = "99.5%";
+var IOS_OFF_LEFT = "-33%";
+var IOS_OFF_RIGHT_RTL = "-99.5%";
+var IOS_OFF_LEFT_RTL = "33%";
+var MD_OFF_BOTTOM = "40px";
+var MD_CENTER = "0px";
+function resolveEasing(easing) {
+  switch (easing) {
+    case "ios":
+      return IOS_EASING;
+    case "android":
+      return ANDROID_EASING;
+    case "linear":
+      return "linear";
+    case "ease":
+      return "ease";
+    case "ease-in":
+      return "ease-in";
+    case "ease-out":
+      return "ease-out";
+    case "ease-in-out":
+      return "ease-in-out";
+    default:
+      return easing;
+  }
+}
+function detectPlatform() {
+  if (typeof navigator === "undefined") return "ios";
+  const ua = navigator.userAgent.toLowerCase();
+  if (/iphone|ipad|ipod/.test(ua)) return "ios";
+  if (/android/.test(ua)) return "android";
+  return "ios";
+}
+function getDefaultDuration(platform, direction = "forward") {
+  const resolved = platform === "auto" ? detectPlatform() : platform;
+  if (resolved === "ios") {
+    return IOS_DURATION;
+  }
+  return direction === "back" ? ANDROID_BACK_DURATION : ANDROID_DURATION;
+}
+function getDefaultEasing(platform, direction = "forward") {
+  const resolved = platform === "auto" ? detectPlatform() : platform;
+  if (resolved === "ios") {
+    return IOS_EASING;
+  }
+  return direction === "back" ? ANDROID_BACK_EASING : ANDROID_EASING;
+}
+function getDocumentDirection(element) {
+  const doc = element.ownerDocument;
+  return doc.dir === "rtl" || doc.documentElement.dir === "rtl" ? "rtl" : "ltr";
+}
+function preparePageLayer(element, zIndex) {
+  element.classList.add("cap-transition-active");
+  element.style.display = "";
+  element.style.visibility = "visible";
+  element.style.position = "absolute";
+  element.style.top = "0";
+  element.style.left = "0";
+  element.style.width = "100%";
+  element.style.height = "100%";
+  element.style.zIndex = zIndex;
+  element.style.pointerEvents = "none";
+  element.style.willChange = "transform, opacity";
+  element.style.backfaceVisibility = "hidden";
+  element.style.transformStyle = "preserve-3d";
+}
+function createAnimation(element, keyframes, duration, easing) {
+  return element.animate(keyframes, {
+    duration,
+    easing,
+    fill: "both"
+  });
+}
+function resolvePageContents(element) {
+  return Array.from(
+    element.querySelectorAll(
+      ':scope > [data-cap-content], :scope > .cap-content, :scope > cap-content, :scope > [slot="content"]'
+    )
+  );
+}
+function resolvePageChrome(element) {
+  return Array.from(
+    element.querySelectorAll(
+      ':scope > [data-cap-header], :scope > .cap-header, :scope > cap-header, :scope > [slot="header"], :scope > [data-cap-footer], :scope > .cap-footer, :scope > cap-footer, :scope > [slot="footer"]'
+    )
+  );
+}
+function resolvePageHeaders(element) {
+  return Array.from(
+    element.querySelectorAll(
+      ':scope > [data-cap-header], :scope > .cap-header, :scope > cap-header, :scope > [slot="header"]'
+    )
+  );
+}
+function invertTranslateOffset(offset) {
+  if (offset === IOS_CENTER) {
+    return IOS_CENTER;
+  }
+  return offset.startsWith("-") ? offset.slice(1) : `-${offset}`;
+}
+function createPinnedChromeAnimations(elements, fromTransform, toTransform, duration, easing) {
+  return elements.map((element) => {
+    element.style.willChange = "transform";
+    element.style.backfaceVisibility = "hidden";
+    return createAnimation(element, [{ transform: fromTransform }, { transform: toTransform }], duration, easing);
+  });
+}
+function uniqueElements(elements) {
+  return Array.from(new Set(elements));
+}
+function resolveToolbarItems(header) {
+  const toolbarItems = Array.from(
+    header.querySelectorAll(
+      ':scope > [data-cap-toolbar] > *, :scope > .toolbar > *, :scope > [role="toolbar"] > *, :scope > ion-toolbar > *'
+    )
+  );
+  const directItems = Array.from(
+    header.querySelectorAll(
+      ":scope > [data-cap-toolbar-item], :scope > .cap-toolbar-item, :scope > h1, :scope > h2, :scope > h3, :scope > button, :scope > a"
+    )
+  );
+  return uniqueElements(
+    [...toolbarItems, ...directItems].filter(
+      (element) => !element.matches('[data-cap-toolbar-background], .toolbar-background, [aria-hidden="true"]') && element.tagName !== "STYLE" && element.tagName !== "SCRIPT"
+    )
+  );
+}
+function createOpacityAnimations(elements, fromOpacity, toOpacity, duration, easing) {
+  return elements.map((element) => {
+    element.style.willChange = "opacity";
+    element.style.backfaceVisibility = "hidden";
+    return createAnimation(element, [{ opacity: fromOpacity }, { opacity: toOpacity }], duration, easing);
+  });
+}
+function createToolbarItemAnimations(headers, fromTransform, toTransform, fromOpacity, toOpacity, duration, easing) {
+  return headers.flatMap(
+    (header) => resolveToolbarItems(header).map((element) => {
+      element.style.willChange = "transform, opacity";
+      element.style.backfaceVisibility = "hidden";
+      return createAnimation(
+        element,
+        [
+          { transform: fromTransform, opacity: fromOpacity },
+          { transform: toTransform, opacity: toOpacity }
+        ],
+        duration,
+        easing
+      );
+    })
+  );
+}
+function createIOSTransition(options) {
+  const { enteringEl, leavingEl, direction, duration, easing } = options;
+  const animations = [];
+  const isBack = direction === "back";
+  const isRoot = direction === "root";
+  const isRTL = getDocumentDirection(enteringEl) === "rtl";
+  const offRight = isRTL ? IOS_OFF_RIGHT_RTL : IOS_OFF_RIGHT;
+  const offLeft = isRTL ? IOS_OFF_LEFT_RTL : IOS_OFF_LEFT;
+  const chromeOffRight = invertTranslateOffset(offRight);
+  const chromeOffLeft = invertTranslateOffset(offLeft);
+  const leadingEdgeShadow = isRTL ? "8px 0 24px rgba(0, 0, 0, 0.18)" : "-8px 0 24px rgba(0, 0, 0, 0.18)";
+  const enteringContent = resolvePageContents(enteringEl);
+  const enteringHeaders = resolvePageHeaders(enteringEl);
+  const leavingContent = leavingEl ? resolvePageContents(leavingEl) : [];
+  const leavingHeaders = leavingEl ? resolvePageHeaders(leavingEl) : [];
+  preparePageLayer(enteringEl, isBack ? "99" : "101");
+  if (leavingEl) {
+    preparePageLayer(leavingEl, "100");
+  }
+  if (isRoot) {
+    animations.push(
+      createAnimation(
+        enteringEl,
+        [
+          { opacity: 0.01, transform: "translate3d(0, 0, 0)" },
+          { opacity: 1, transform: "translate3d(0, 0, 0)" }
+        ],
+        duration,
+        easing
+      )
+    );
+    if (leavingEl) {
+      animations.push(
+        createAnimation(
+          leavingEl,
+          [
+            { opacity: 1, transform: "translate3d(0, 0, 0)" },
+            { opacity: 0, transform: "translate3d(0, 0, 0)" }
+          ],
+          Math.min(duration, 240),
+          easing
+        )
+      );
+    }
+  } else if (isBack) {
+    animations.push(
+      ...createPinnedChromeAnimations(
+        resolvePageChrome(enteringEl),
+        `translate3d(${chromeOffLeft}, 0, 0)`,
+        `translate3d(${IOS_CENTER}, 0, 0)`,
+        duration,
+        easing
+      )
+    );
+    animations.push(
+      createAnimation(
+        enteringEl,
+        [{ transform: `translate3d(${offLeft}, 0, 0)` }, { transform: `translate3d(${IOS_CENTER}, 0, 0)` }],
+        duration,
+        easing
+      )
+    );
+    animations.push(...createOpacityAnimations(enteringContent, IOS_OFF_OPACITY, 1, duration, easing));
+    animations.push(
+      ...createToolbarItemAnimations(
+        enteringHeaders,
+        `translate3d(${offLeft}, 0, 0)`,
+        `translate3d(${IOS_CENTER}, 0, 0)`,
+        0.01,
+        1,
+        duration,
+        easing
+      )
+    );
+    if (leavingEl) {
+      leavingEl.style.boxShadow = leadingEdgeShadow;
+      animations.push(
+        ...createPinnedChromeAnimations(
+          resolvePageChrome(leavingEl),
+          `translate3d(${IOS_CENTER}, 0, 0)`,
+          `translate3d(${chromeOffRight}, 0, 0)`,
+          duration,
+          easing
+        )
+      );
+      animations.push(
+        createAnimation(
+          leavingEl,
+          [{ transform: `translate3d(${IOS_CENTER}, 0, 0)` }, { transform: `translate3d(${offRight}, 0, 0)` }],
+          duration,
+          easing
+        )
+      );
+      animations.push(
+        ...createToolbarItemAnimations(
+          leavingHeaders,
+          `translate3d(${IOS_CENTER}, 0, 0)`,
+          `translate3d(${offRight}, 0, 0)`,
+          0.99,
+          0,
+          duration,
+          easing
+        )
+      );
+    }
+  } else {
+    enteringEl.style.boxShadow = leadingEdgeShadow;
+    animations.push(
+      ...createPinnedChromeAnimations(
+        resolvePageChrome(enteringEl),
+        `translate3d(${chromeOffRight}, 0, 0)`,
+        `translate3d(${IOS_CENTER}, 0, 0)`,
+        duration,
+        easing
+      )
+    );
+    animations.push(
+      createAnimation(
+        enteringEl,
+        [{ transform: `translate3d(${offRight}, 0, 0)` }, { transform: `translate3d(${IOS_CENTER}, 0, 0)` }],
+        duration,
+        easing
+      )
+    );
+    animations.push(
+      ...createToolbarItemAnimations(
+        enteringHeaders,
+        `translate3d(${offRight}, 0, 0)`,
+        `translate3d(${IOS_CENTER}, 0, 0)`,
+        0.01,
+        1,
+        duration,
+        easing
+      )
+    );
+    if (leavingEl) {
+      animations.push(
+        ...createPinnedChromeAnimations(
+          resolvePageChrome(leavingEl),
+          `translate3d(${IOS_CENTER}, 0, 0)`,
+          `translate3d(${chromeOffLeft}, 0, 0)`,
+          duration,
+          easing
+        )
+      );
+      animations.push(
+        createAnimation(
+          leavingEl,
+          [{ transform: `translate3d(${IOS_CENTER}, 0, 0)` }, { transform: `translate3d(${offLeft}, 0, 0)` }],
+          duration,
+          easing
+        )
+      );
+      animations.push(...createOpacityAnimations(leavingContent, 1, IOS_OFF_OPACITY, duration, easing));
+      animations.push(
+        ...createToolbarItemAnimations(
+          leavingHeaders,
+          `translate3d(${IOS_CENTER}, 0, 0)`,
+          `translate3d(${offLeft}, 0, 0)`,
+          0.99,
+          0,
+          duration,
+          easing
+        )
+      );
+    }
+  }
+  return animations;
+}
+function createAndroidTransition(options) {
+  const { enteringEl, leavingEl, direction, duration, easing } = options;
+  const animations = [];
+  const isBack = direction === "back";
+  const isRoot = direction === "root";
+  preparePageLayer(enteringEl, isBack ? "99" : "101");
+  if (leavingEl) {
+    preparePageLayer(leavingEl, "100");
+  }
+  if (isRoot) {
+    animations.push(
+      createAnimation(
+        enteringEl,
+        [
+          { opacity: 0.01, transform: `translate3d(0, ${MD_OFF_BOTTOM}, 0)` },
+          { opacity: 1, transform: `translate3d(0, ${MD_CENTER}, 0)` }
+        ],
+        duration,
+        easing
+      )
+    );
+    if (leavingEl) {
+      animations.push(
+        createAnimation(
+          leavingEl,
+          [
+            { opacity: 1, transform: `translate3d(0, ${MD_CENTER}, 0)` },
+            { opacity: 0, transform: `translate3d(0, ${MD_CENTER}, 0)` }
+          ],
+          Math.min(duration, ANDROID_BACK_DURATION),
+          ANDROID_BACK_EASING
+        )
+      );
+    }
+  } else if (isBack) {
+    enteringEl.style.opacity = "1";
+    enteringEl.style.transform = `translate3d(0, ${MD_CENTER}, 0)`;
+    if (leavingEl) {
+      animations.push(
+        createAnimation(
+          leavingEl,
+          [
+            { opacity: 1, transform: `translate3d(0, ${MD_CENTER}, 0)` },
+            { opacity: 0, transform: `translate3d(0, ${MD_OFF_BOTTOM}, 0)` }
+          ],
+          duration,
+          easing
+        )
+      );
+    }
+  } else {
+    animations.push(
+      createAnimation(
+        enteringEl,
+        [
+          { opacity: 0.01, transform: `translate3d(0, ${MD_OFF_BOTTOM}, 0)` },
+          { opacity: 1, transform: `translate3d(0, ${MD_CENTER}, 0)` }
+        ],
+        duration,
+        easing
+      )
+    );
+    if (leavingEl) {
+      leavingEl.style.opacity = "1";
+      leavingEl.style.transform = `translate3d(0, ${MD_CENTER}, 0)`;
+    }
+  }
+  return animations;
+}
+function createNoneTransition(options) {
+  const { enteringEl, leavingEl } = options;
+  enteringEl.style.opacity = "1";
+  enteringEl.style.transform = "none";
+  if (leavingEl) {
+    leavingEl.style.opacity = "0";
+    leavingEl.style.transform = "none";
+  }
+  return [];
+}
+function createTransition(options, platform = "auto") {
+  if (options.direction === "none") {
+    return createNoneTransition(options);
+  }
+  const resolved = platform === "auto" ? detectPlatform() : platform;
+  if (resolved === "android") {
+    return createAndroidTransition(options);
+  }
+  return createIOSTransition(options);
+}
+async function waitForAnimations(animations) {
+  if (animations.length === 0) return;
+  await Promise.all(animations.map((anim) => anim.finished.catch(() => void 0)));
+}
+function cancelAnimations(animations) {
+  animations.forEach((anim) => anim.cancel());
+}
+
+// src/core/view-transitions.ts
+function supportsViewTransitions() {
+  return typeof document !== "undefined" && "startViewTransition" in document;
+}
+async function runViewTransition(options) {
+  const { update, direction = "forward", skipAnimation = false } = options;
+  if (skipAnimation || !supportsViewTransitions()) {
+    await update();
+    return;
+  }
+  const root = document.documentElement;
+  root.dataset.transitionDirection = direction;
+  try {
+    const transition = document.startViewTransition(async () => {
+      await update();
+    });
+    await transition.finished;
+  } finally {
+    delete root.dataset.transitionDirection;
+  }
+}
+function setViewTransitionName(element, name) {
+  element.style.viewTransitionName = name;
+}
+function clearViewTransitionName(element) {
+  element.style.viewTransitionName = "";
+}
+var VIEW_TRANSITIONS_CSS = `
+/* View Transitions API base styles */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation-duration: 0.4s;
+  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+/* iOS-style forward navigation */
+[data-transition-direction="forward"]::view-transition-old(root) {
+  animation-name: cap-slide-out-left;
+}
+
+[data-transition-direction="forward"]::view-transition-new(root) {
+  animation-name: cap-slide-in-right;
+}
+
+/* iOS-style back navigation */
+[data-transition-direction="back"]::view-transition-old(root) {
+  animation-name: cap-slide-out-right;
+}
+
+[data-transition-direction="back"]::view-transition-new(root) {
+  animation-name: cap-slide-in-left;
+}
+
+/* Root/replace navigation - fade */
+[data-transition-direction="root"]::view-transition-old(root) {
+  animation-name: cap-fade-out;
+}
+
+[data-transition-direction="root"]::view-transition-new(root) {
+  animation-name: cap-fade-in;
+}
+
+/* Header transitions */
+::view-transition-old(cap-header),
+::view-transition-new(cap-header) {
+  animation-duration: 0.3s;
+}
+
+[data-transition-direction="forward"]::view-transition-old(cap-header) {
+  animation-name: cap-header-out-left;
+}
+
+[data-transition-direction="forward"]::view-transition-new(cap-header) {
+  animation-name: cap-header-in-right;
+}
+
+[data-transition-direction="back"]::view-transition-old(cap-header) {
+  animation-name: cap-header-out-right;
+}
+
+[data-transition-direction="back"]::view-transition-new(cap-header) {
+  animation-name: cap-header-in-left;
+}
+
+/* Content transitions */
+::view-transition-old(cap-content),
+::view-transition-new(cap-content) {
+  animation-duration: 0.4s;
+  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[data-transition-direction="forward"]::view-transition-old(cap-content) {
+  animation-name: cap-slide-out-left;
+}
+
+[data-transition-direction="forward"]::view-transition-new(cap-content) {
+  animation-name: cap-slide-in-right;
+}
+
+[data-transition-direction="back"]::view-transition-old(cap-content) {
+  animation-name: cap-slide-out-right;
+}
+
+[data-transition-direction="back"]::view-transition-new(cap-content) {
+  animation-name: cap-slide-in-left;
+}
+
+/* Animation keyframes */
+@keyframes cap-slide-in-right {
+  from {
+    transform: translateX(100%);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes cap-slide-out-left {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-30%);
+    opacity: 0.8;
+  }
+}
+
+@keyframes cap-slide-in-left {
+  from {
+    transform: translateX(-30%);
+    opacity: 0.8;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes cap-slide-out-right {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(100%);
+    opacity: 1;
+  }
+}
+
+@keyframes cap-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes cap-fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes cap-header-in-right {
+  from {
+    transform: translateX(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes cap-header-out-left {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-20px);
+    opacity: 0;
+  }
+}
+
+@keyframes cap-header-in-left {
+  from {
+    transform: translateX(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes cap-header-out-right {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(20px);
+    opacity: 0;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-old(root),
+  ::view-transition-new(root),
+  ::view-transition-old(cap-header),
+  ::view-transition-new(cap-header),
+  ::view-transition-old(cap-content),
+  ::view-transition-new(cap-content) {
+    animation-duration: 0.01ms !important;
+  }
+}
+`;
+function injectViewTransitionsCSS() {
+  if (typeof document === "undefined") return;
+  const styleId = "cap-view-transitions-css";
+  if (document.getElementById(styleId)) return;
+  const style = document.createElement("style");
+  style.id = styleId;
+  style.textContent = VIEW_TRANSITIONS_CSS;
+  document.head.appendChild(style);
+}
+
+// src/core/transition-controller.ts
+var DEFAULT_CONFIG = {
+  platform: "auto",
+  duration: 0,
+  // Will use platform default
+  easing: "",
+  // Will use platform default
+  useViewTransitions: false,
+  detectPlatform
+};
+var TransitionController = class {
+  config;
+  pageStack = [];
+  currentAnimations = [];
+  isAnimating = false;
+  interactiveBackTransition = null;
+  lifecycleCallbacks = /* @__PURE__ */ new Map();
+  constructor(config = {}) {
+    this.config = { ...DEFAULT_CONFIG, ...config };
+    if (this.config.useViewTransitions && supportsViewTransitions()) {
+      injectViewTransitionsCSS();
+    }
+  }
+  /**
+   * Get the resolved platform
+   */
+  get platform() {
+    if (this.config.platform === "ios") {
+      return "ios";
+    }
+    if (this.config.platform === "android") {
+      return "android";
+    }
+    return this.config.detectPlatform();
+  }
+  /**
+   * Get the current page state
+   */
+  get currentPage() {
+    return this.pageStack[this.pageStack.length - 1];
+  }
+  /**
+   * Get the page stack
+   */
+  get stack() {
+    return this.pageStack;
+  }
+  /**
+   * Check if an animation is in progress
+   */
+  get animating() {
+    return this.isAnimating;
+  }
+  /**
+   * Update global configuration
+   */
+  configure(config) {
+    this.config = { ...this.config, ...config };
+    if (this.config.useViewTransitions && supportsViewTransitions()) {
+      injectViewTransitionsCSS();
+    }
+  }
+  /**
+   * Register lifecycle callbacks for a page
+   */
+  registerLifecycle(pageId, lifecycle) {
+    this.lifecycleCallbacks.set(pageId, lifecycle);
+  }
+  /**
+   * Unregister lifecycle callbacks for a page
+   */
+  unregisterLifecycle(pageId) {
+    this.lifecycleCallbacks.delete(pageId);
+  }
+  /**
+   * Create a page state from an element
+   */
+  createPageState(element, options = {}) {
+    const id = options.id || `page-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+    const header = element.querySelector(
+      '[data-cap-header], .cap-header, cap-header, [slot="header"]'
+    );
+    const content = element.querySelector(
+      '[data-cap-content], .cap-content, cap-content, [slot="content"]'
+    );
+    const footer = element.querySelector(
+      '[data-cap-footer], .cap-footer, cap-footer, [slot="footer"]'
+    );
+    return {
+      id,
+      element,
+      header: header || void 0,
+      content: content || void 0,
+      footer: footer || void 0,
+      isActive: false,
+      data: options.data
+    };
+  }
+  /**
+   * Navigate to a new page (push)
+   */
+  async push(enteringEl, config = {}) {
+    return this.navigate(enteringEl, { ...config, direction: "forward" });
+  }
+  /**
+   * Navigate back (pop)
+   */
+  async pop(config = {}) {
+    if (this.pageStack.length <= 1) {
+      return { success: false, duration: 0, error: new Error("Cannot pop: no page to go back to") };
+    }
+    const leavingState = this.pageStack[this.pageStack.length - 1];
+    const enteringState = this.pageStack[this.pageStack.length - 2];
+    return this.navigateWithStates(enteringState, leavingState, { ...config, direction: "back" }, () => {
+      this.pageStack.pop();
+    });
+  }
+  /**
+   * Start an interactive iOS-style back transition using the cached previous page.
+   */
+  beginInteractiveBack(config = {}) {
+    if (this.pageStack.length <= 1 || this.isAnimating || this.interactiveBackTransition) {
+      return false;
+    }
+    const leavingState = this.pageStack[this.pageStack.length - 1];
+    const enteringState = this.pageStack[this.pageStack.length - 2];
+    const direction = "back";
+    const duration = config.duration ?? (this.config.duration || getDefaultDuration(this.platform, direction));
+    this.isAnimating = true;
+    enteringState.element.style.display = "";
+    enteringState.element.style.visibility = "visible";
+    const animOptions = {
+      enteringEl: enteringState.element,
+      leavingEl: leavingState.element,
+      direction,
+      duration,
+      easing: "linear",
+      isBack: true
+    };
+    const animations = createTransition(animOptions, this.platform);
+    for (const animation of animations) {
+      animation.pause();
+      animation.currentTime = 0;
+    }
+    this.currentAnimations = animations;
+    this.interactiveBackTransition = {
+      enteringState,
+      leavingState,
+      animations,
+      duration
+    };
+    return true;
+  }
+  /**
+   * Move the current interactive back transition to a progress step from 0 to 1.
+   */
+  stepInteractiveBack(step) {
+    const transition = this.interactiveBackTransition;
+    if (!transition) {
+      return;
+    }
+    const progress = Math.max(0, Math.min(step, 0.9999));
+    for (const animation of transition.animations) {
+      const duration = this.getAnimationDuration(animation, transition.duration);
+      animation.pause();
+      animation.currentTime = duration * progress;
+    }
+  }
+  /**
+   * Complete or cancel the current interactive back transition.
+   */
+  async endInteractiveBack(shouldComplete, releaseDuration, commitStack) {
+    const transition = this.interactiveBackTransition;
+    if (!transition) {
+      return;
+    }
+    try {
+      await this.playInteractiveAnimationsTo(shouldComplete ? 1 : 0, releaseDuration);
+      if (shouldComplete && commitStack) {
+        this.pageStack.pop();
+        this.updatePageVisibility(transition.enteringState, transition.leavingState);
+        transition.enteringState.isActive = true;
+        transition.leavingState.isActive = false;
+        cancelAnimations(transition.animations);
+      } else if (!shouldComplete) {
+        this.updatePageVisibility(transition.leavingState, transition.enteringState);
+        transition.leavingState.isActive = true;
+        transition.enteringState.isActive = false;
+        cancelAnimations(transition.animations);
+      }
+    } finally {
+      this.interactiveBackTransition = null;
+      this.currentAnimations = [];
+      this.isAnimating = false;
+    }
+  }
+  /**
+   * Cancel the current interactive back transition immediately.
+   */
+  cancelInteractiveBack() {
+    const transition = this.interactiveBackTransition;
+    if (!transition) {
+      return;
+    }
+    cancelAnimations(transition.animations);
+    this.updatePageVisibility(transition.leavingState, transition.enteringState);
+    this.interactiveBackTransition = null;
+    this.currentAnimations = [];
+    this.isAnimating = false;
+  }
+  /**
+   * Replace all pages with a new root
+   */
+  async setRoot(enteringEl, config = {}) {
+    return this.navigate(enteringEl, { ...config, direction: "root" });
+  }
+  /**
+   * Main navigation method
+   */
+  async navigate(enteringEl, config = {}) {
+    const direction = config.direction || "forward";
+    const enteringState = this.createPageState(enteringEl);
+    const leavingState = this.currentPage;
+    return this.navigateWithStates(enteringState, leavingState, config, () => {
+      if (direction === "root") {
+        this.pageStack = [enteringState];
+      } else if (direction === "back" && this.pageStack.length > 0) {
+        this.pageStack.pop();
+        const staleEnteringState = this.pageStack.pop();
+        if (staleEnteringState && staleEnteringState.element !== enteringState.element) {
+          staleEnteringState.element.remove();
+          this.lifecycleCallbacks.delete(staleEnteringState.id);
+        }
+        this.pageStack.push(enteringState);
+      } else {
+        this.pageStack.push(enteringState);
+      }
+    });
+  }
+  /**
+   * Navigate between two known page states
+   */
+  async navigateWithStates(enteringState, leavingState, config, updateStack) {
+    const startTime = performance.now();
+    const direction = config.direction || "forward";
+    if (this.isAnimating) {
+      cancelAnimations(this.currentAnimations);
+    }
+    this.isAnimating = true;
+    const event = {
+      direction,
+      from: leavingState,
+      to: enteringState
+    };
+    try {
+      if (leavingState) {
+        const lifecycle = this.lifecycleCallbacks.get(leavingState.id);
+        await lifecycle?.onWillLeave?.(event);
+        config.onStart?.();
+      }
+      const enteringLifecycle = this.lifecycleCallbacks.get(enteringState.id);
+      await enteringLifecycle?.onWillEnter?.(event);
+      const duration = config.duration ?? (this.config.duration || getDefaultDuration(this.platform, direction));
+      const easing = this.resolveTransitionEasing(config.easing || this.config.easing, direction);
+      const useViewTransitions = config.useViewTransitions !== false && this.config.useViewTransitions && supportsViewTransitions();
+      if (useViewTransitions) {
+        this.prepareViewTransitionElements(enteringState, leavingState);
+        await runViewTransition({
+          direction,
+          update: () => {
+            updateStack();
+            this.updatePageVisibility(enteringState, leavingState);
+            this.applyViewTransitionNames(enteringState);
+            this.clearViewTransitionNames(leavingState);
+          }
+        });
+        this.clearViewTransitionNames(enteringState, leavingState);
+      } else {
+        updateStack();
+        const animOptions = {
+          enteringEl: enteringState.element,
+          leavingEl: leavingState?.element,
+          direction,
+          duration,
+          easing,
+          isBack: direction === "back"
+        };
+        this.currentAnimations = createTransition(animOptions, this.platform);
+        await waitForAnimations(this.currentAnimations);
+        this.updatePageVisibility(enteringState, leavingState);
+        cancelAnimations(this.currentAnimations);
+      }
+      enteringState.isActive = true;
+      await enteringLifecycle?.onDidEnter?.(event);
+      if (leavingState) {
+        leavingState.isActive = false;
+        const lifecycle = this.lifecycleCallbacks.get(leavingState.id);
+        await lifecycle?.onDidLeave?.(event);
+      }
+      config.onComplete?.();
+      const totalDuration = performance.now() - startTime;
+      return { success: true, duration: totalDuration };
+    } catch (error) {
+      return {
+        success: false,
+        duration: performance.now() - startTime,
+        error: error instanceof Error ? error : new Error(String(error))
+      };
+    } finally {
+      this.isAnimating = false;
+      this.currentAnimations = [];
+    }
+  }
+  /**
+   * Update page visibility after animation
+   */
+  updatePageVisibility(enteringState, leavingState) {
+    enteringState.element.style.display = "";
+    enteringState.element.style.visibility = "visible";
+    enteringState.element.style.opacity = "1";
+    enteringState.element.style.transform = "none";
+    enteringState.element.style.position = "relative";
+    this.clearTransitionOnlyStyles(enteringState.element);
+    this.clearPagePartTransitionStyles(enteringState);
+    if (leavingState) {
+      leavingState.element.style.display = "none";
+      leavingState.element.style.visibility = "hidden";
+      leavingState.element.style.opacity = "1";
+      leavingState.element.style.transform = "none";
+      this.clearTransitionOnlyStyles(leavingState.element);
+      this.clearPagePartTransitionStyles(leavingState);
+    }
+  }
+  getAnimationDuration(animation, fallback) {
+    const duration = animation.effect?.getTiming().duration;
+    return typeof duration === "number" && Number.isFinite(duration) ? duration : fallback;
+  }
+  async playInteractiveAnimationsTo(targetProgress, releaseDuration) {
+    const transition = this.interactiveBackTransition;
+    if (!transition) {
+      return;
+    }
+    if (releaseDuration <= 0) {
+      for (const animation of transition.animations) {
+        const duration = this.getAnimationDuration(animation, transition.duration);
+        animation.pause();
+        animation.currentTime = duration * targetProgress;
+      }
+      return;
+    }
+    const finished = transition.animations.map((animation) => {
+      const duration = this.getAnimationDuration(animation, transition.duration);
+      const currentTime = typeof animation.currentTime === "number" ? animation.currentTime : 0;
+      const targetTime = duration * targetProgress;
+      const distance = Math.abs(targetTime - currentTime);
+      if (distance < 1) {
+        animation.currentTime = targetTime;
+        return Promise.resolve();
+      }
+      animation.playbackRate = Math.max(distance / releaseDuration, 1e-3) * (targetTime >= currentTime ? 1 : -1);
+      animation.play();
+      return animation.finished.catch(() => void 0);
+    });
+    await Promise.all(finished);
+  }
+  /**
+   * Resolve configured easing presets after platform/direction are known.
+   */
+  resolveTransitionEasing(easing, direction) {
+    if (!easing) {
+      return getDefaultEasing(this.platform, direction || "forward");
+    }
+    if (typeof easing === "string" && ["ios", "android"].includes(easing)) {
+      return getDefaultEasing(easing, direction || "forward");
+    }
+    return resolveEasing(easing);
+  }
+  /**
+   * Remove styles that should only exist while a page is actively transitioning.
+   */
+  clearTransitionOnlyStyles(element) {
+    element.classList.remove("cap-transition-active");
+    element.style.removeProperty("z-index");
+    element.style.removeProperty("pointer-events");
+    element.style.removeProperty("will-change");
+    element.style.removeProperty("backface-visibility");
+    element.style.removeProperty("transform-style");
+    element.style.removeProperty("box-shadow");
+  }
+  clearPagePartTransitionStyles(pageState) {
+    const { header, content, footer } = this.resolvePageParts(pageState);
+    for (const element of [header, content, footer]) {
+      if (!element) continue;
+      this.clearTransitionOnlyStyles(element);
+    }
+  }
+  /**
+   * Prepare entering/leaving elements for a View Transition capture.
+   * Entering page must be hidden in the "old" snapshot.
+   */
+  prepareViewTransitionElements(enteringState, leavingState) {
+    this.clearAllKnownViewTransitionNames(enteringState, leavingState);
+    if (leavingState) {
+      this.applyViewTransitionNames(leavingState);
+      enteringState.element.style.display = "none";
+      enteringState.element.style.visibility = "hidden";
+    }
+  }
+  /**
+   * Assign view transition names to a page's layout parts.
+   */
+  applyViewTransitionNames(pageState) {
+    const { header, content, footer } = this.resolvePageParts(pageState);
+    if (header) {
+      setViewTransitionName(header, "cap-header");
+    }
+    if (content) {
+      setViewTransitionName(content, "cap-content");
+    }
+    if (footer) {
+      setViewTransitionName(footer, "cap-footer");
+    }
+  }
+  /**
+   * Clear view transition names for one or more page states.
+   */
+  clearViewTransitionNames(...states) {
+    for (const state of states) {
+      if (!state) continue;
+      const { header, content, footer } = this.resolvePageParts(state);
+      if (header) {
+        clearViewTransitionName(header);
+      }
+      if (content) {
+        clearViewTransitionName(content);
+      }
+      if (footer) {
+        clearViewTransitionName(footer);
+      }
+    }
+  }
+  /**
+   * Clear view transition names from all known pages plus transient states.
+   */
+  clearAllKnownViewTransitionNames(...extraStates) {
+    const knownStates = /* @__PURE__ */ new Set();
+    for (const state of this.pageStack) {
+      knownStates.add(state);
+    }
+    for (const state of extraStates) {
+      if (state) {
+        knownStates.add(state);
+      }
+    }
+    this.clearViewTransitionNames(...knownStates);
+  }
+  /**
+   * Resolve page parts lazily to avoid timing issues with custom-element setup.
+   */
+  resolvePageParts(pageState) {
+    const header = pageState.header || pageState.element.querySelector(
+      '[data-cap-header], .cap-header, cap-header, [slot="header"]'
+    ) || void 0;
+    const content = pageState.content || pageState.element.querySelector(
+      '[data-cap-content], .cap-content, cap-content, [slot="content"]'
+    ) || void 0;
+    const footer = pageState.footer || pageState.element.querySelector(
+      '[data-cap-footer], .cap-footer, cap-footer, [slot="footer"]'
+    ) || void 0;
+    if (header) pageState.header = header;
+    if (content) pageState.content = content;
+    if (footer) pageState.footer = footer;
+    return { header, content, footer };
+  }
+  /**
+   * Save scroll position for a page
+   */
+  saveScrollPosition(pageId) {
+    const page = this.pageStack.find((p) => p.id === pageId);
+    if (page?.content) {
+      page.scrollPosition = {
+        x: page.content.scrollLeft,
+        y: page.content.scrollTop
+      };
+    }
+  }
+  /**
+   * Restore scroll position for a page
+   */
+  restoreScrollPosition(pageId) {
+    const page = this.pageStack.find((p) => p.id === pageId);
+    if (page?.content && page.scrollPosition) {
+      page.content.scrollLeft = page.scrollPosition.x;
+      page.content.scrollTop = page.scrollPosition.y;
+    }
+  }
+  /**
+   * Remove a page from the stack (used when cleaning up)
+   */
+  removePage(pageId) {
+    const index = this.pageStack.findIndex((p) => p.id === pageId);
+    if (index !== -1) {
+      this.pageStack.splice(index, 1);
+      this.lifecycleCallbacks.delete(pageId);
+    }
+  }
+  /**
+   * Clear all pages
+   */
+  clear() {
+    this.pageStack = [];
+    this.lifecycleCallbacks.clear();
+    cancelAnimations(this.currentAnimations);
+    this.currentAnimations = [];
+    this.isAnimating = false;
+  }
+};
+function createTransitionController(config) {
+  return new TransitionController(config);
+}
+
+// src/core/native-platform.ts
+function getCapacitorRuntime() {
+  return globalThis.Capacitor;
+}
+function normalizePlatform(platform) {
+  if (platform === "ios" || platform === "android" || platform === "web") {
+    return platform;
+  }
+  return "unknown";
+}
+function detectNativePlatform() {
+  const capacitor = getCapacitorRuntime();
+  const platform = normalizePlatform(capacitor?.getPlatform?.());
+  const isNative = capacitor?.isNativePlatform?.() ?? (platform === "ios" || platform === "android");
+  return {
+    platform,
+    isNative
+  };
+}
+function isNativeSwipeGesturePlatform() {
+  const { platform, isNative } = detectNativePlatform();
+  return isNative && platform === "ios";
+}
+
+// src/components/cap-router-outlet.ts
+var CapRouterOutlet = class extends HTMLElement {
+  controller;
+  options;
+  observer = null;
+  pendingPage = null;
+  ignoredNodes = /* @__PURE__ */ new WeakSet();
+  swipeGesturePointer = null;
+  swipeGestureListenersActive = false;
+  skipNextHistoryBackTransition = false;
+  swipeBackDepth = 0;
+  lastNavigationHref = null;
+  swipeGestureEdgeWidth = 50;
+  swipeGestureThreshold = 10;
+  swipeGestureMinimumVelocity = 0.2;
+  static get observedAttributes() {
+    return ["platform", "duration", "keep-in-dom", "max-cached", "swipe-gesture"];
+  }
+  constructor() {
+    super();
+    this.options = {
+      keepInDom: true,
+      maxCached: 10,
+      swipeGesture: "auto"
+    };
+    this.controller = createTransitionController();
+  }
+  connectedCallback() {
+    this.style.display = "block";
+    this.style.position = "relative";
+    this.style.width = "100%";
+    this.style.height = "100%";
+    this.style.overflow = "hidden";
+    this.lastNavigationHref = this.getCurrentNavigationHref();
+    this.observer = new MutationObserver((mutations) => {
+      this.handleMutations(mutations);
+    });
+    this.observer.observe(this, {
+      childList: true,
+      subtree: false
+    });
+    const children = Array.from(this.children);
+    if (children.length > 0) {
+      this.initializeFirstPage(children[children.length - 1]);
+    }
+    this.updateSwipeGestureListeners();
+  }
+  disconnectedCallback() {
+    this.observer?.disconnect();
+    this.removeSwipeGestureListeners();
+    this.controller.clear();
+    this.swipeBackDepth = 0;
+    this.lastNavigationHref = null;
+  }
+  attributeChangedCallback(name, _oldValue, newValue) {
+    switch (name) {
+      case "platform":
+        this.controller.configure({ platform: newValue });
+        break;
+      case "duration":
+        this.controller.configure({ duration: parseInt(newValue, 10) });
+        break;
+      case "keep-in-dom":
+        this.options.keepInDom = newValue !== "false";
+        break;
+      case "max-cached":
+        this.options.maxCached = parseInt(newValue, 10);
+        break;
+      case "swipe-gesture":
+        this.options.swipeGesture = this.parseSwipeGestureAttribute(newValue);
+        this.updateSwipeGestureListeners();
+        break;
+    }
+  }
+  /**
+   * Handle DOM mutations (child additions/removals)
+   */
+  handleMutations(mutations) {
+    const addedNodes = [];
+    const removedNodes = [];
+    for (const mutation of mutations) {
+      for (const node of mutation.removedNodes) {
+        if (node instanceof HTMLElement) {
+          removedNodes.push(node);
+        }
+      }
+      for (const node of mutation.addedNodes) {
+        if (node instanceof HTMLElement) {
+          addedNodes.push(node);
+        }
+      }
+    }
+    const currentEl = this.controller.currentPage?.element;
+    if (currentEl && removedNodes.includes(currentEl) && addedNodes.length > 0 && !currentEl.isConnected) {
+      this.stylePageForTransition(currentEl);
+      currentEl.style.display = "";
+      currentEl.style.visibility = "visible";
+      const anchor = addedNodes[0];
+      this.ignoredNodes.add(currentEl);
+      if (anchor.parentElement === this) {
+        this.insertBefore(currentEl, anchor);
+      } else {
+        this.appendChild(currentEl);
+      }
+    }
+    for (const node of removedNodes) {
+      if (node === currentEl) continue;
+      const state = this.controller.stack.find((pageState) => pageState.element === node);
+      if (state) {
+        this.controller.removePage(state.id);
+      }
+    }
+    for (const node of addedNodes) {
+      if (node === this.pendingPage) continue;
+      if (this.ignoredNodes.has(node)) {
+        this.ignoredNodes.delete(node);
+        continue;
+      }
+      this.handleNewPage(node);
+    }
+  }
+  /**
+   * Initialize the first page without animation
+   */
+  initializeFirstPage(page) {
+    page.style.position = "relative";
+    page.style.width = "100%";
+    page.style.height = "100%";
+    const state = this.controller.createPageState(page);
+    state.isActive = true;
+    this.controller.pageStack.push(state);
+    this.swipeBackDepth = 0;
+    this.lastNavigationHref = this.getCurrentNavigationHref();
+  }
+  /**
+   * Handle a new page being added
+   */
+  async handleNewPage(page) {
+    const outletDirection = this.dataset.direction;
+    const direction = page.dataset.direction || outletDirection || "forward";
+    if (outletDirection) {
+      delete this.dataset.direction;
+    }
+    const skipTransition = this.skipNextHistoryBackTransition && direction === "back";
+    this.skipNextHistoryBackTransition = false;
+    const hadPageBefore = this.controller.stack.length > 0;
+    this.stylePageForTransition(page);
+    this.pendingPage = page;
+    try {
+      const result = await this.controller.navigate(page, { direction, duration: skipTransition ? 0 : void 0 });
+      if (result.success) {
+        this.recordCompletedNavigation(direction, { hadPageBefore });
+      }
+    } finally {
+      this.pendingPage = null;
+    }
+    if (!this.options.keepInDom) {
+      this.cleanupOldPages();
+    } else {
+      this.enforceCacheLimit();
+    }
+  }
+  /**
+   * Clean up pages that are no longer needed
+   */
+  cleanupOldPages() {
+    const stack = this.controller.stack;
+    const children = Array.from(this.children);
+    for (const child of children) {
+      const inStack = stack.some((s) => s.element === child);
+      if (!inStack && !child.dataset.keepInDom) {
+        child.remove();
+      }
+    }
+  }
+  /**
+   * Enforce the cache limit
+   */
+  enforceCacheLimit() {
+    const stack = this.controller.stack;
+    const maxCached = this.options.maxCached || 10;
+    if (stack.length > maxCached) {
+      const toRemove = stack.slice(0, stack.length - maxCached);
+      for (const page of toRemove) {
+        if (!page.isActive) {
+          page.element.remove();
+          this.controller.removePage(page.id);
+        }
+      }
+    }
+  }
+  /**
+   * Programmatic navigation - push a new page
+   */
+  async push(page, config = {}) {
+    this.stylePageForTransition(page);
+    const hadPageBefore = this.controller.stack.length > 0;
+    this.pendingPage = page;
+    this.appendChild(page);
+    try {
+      const result = await this.controller.push(page, config);
+      if (result.success) {
+        this.recordCompletedNavigation("forward", { hadPageBefore, forceForward: true });
+      }
+    } finally {
+      this.pendingPage = null;
+    }
+  }
+  /**
+   * Programmatic navigation - pop current page
+   */
+  async pop(config = {}) {
+    const result = await this.controller.pop(config);
+    if (result.success) {
+      this.recordCompletedNavigation("back", { hadPageBefore: true });
+      if (!this.options.keepInDom) {
+        const children = Array.from(this.children);
+        const lastChild = children[children.length - 1];
+        if (lastChild) {
+          lastChild.remove();
+        }
+      }
+    }
+  }
+  /**
+   * Programmatic navigation - set root page
+   */
+  async setRoot(page, config = {}) {
+    const oldChildren = Array.from(this.children);
+    this.stylePageForTransition(page);
+    this.pendingPage = page;
+    this.appendChild(page);
+    try {
+      const result = await this.controller.setRoot(page, config);
+      if (result.success) {
+        this.recordCompletedNavigation("root", { hadPageBefore: true });
+      }
+    } finally {
+      this.pendingPage = null;
+    }
+    for (const child of oldChildren) {
+      child.remove();
+    }
+  }
+  /**
+   * Get the current page stack length
+   */
+  get stackLength() {
+    return this.controller.stack.length;
+  }
+  /**
+   * Check if we can go back
+   */
+  get canGoBack() {
+    return this.controller.stack.length > 1 && this.swipeBackDepth > 0;
+  }
+  /**
+   * Get whether edge swipe-back gesture is enabled.
+   */
+  get swipeGesture() {
+    return this.options.swipeGesture ?? "auto";
+  }
+  /**
+   * Enable, disable, or auto-detect edge swipe-back gesture.
+   */
+  set swipeGesture(value) {
+    this.setSwipeGesture(value);
+  }
+  /**
+   * Enable, disable, or auto-detect edge swipe-back gesture.
+   */
+  setSwipeGesture(value) {
+    this.options.swipeGesture = value;
+    const serialized = this.serializeSwipeGesture(value);
+    if (this.getAttribute("swipe-gesture") !== serialized) {
+      this.setAttribute("swipe-gesture", serialized);
+    } else {
+      this.updateSwipeGestureListeners();
+    }
+  }
+  /**
+   * Get the transition controller for advanced usage
+   */
+  getController() {
+    return this.controller;
+  }
+  /**
+   * Apply layout styles required for transition animations.
+   */
+  stylePageForTransition(page) {
+    page.style.position = "absolute";
+    page.style.top = "0";
+    page.style.left = "0";
+    page.style.width = "100%";
+    page.style.height = "100%";
+  }
+  parseSwipeGestureAttribute(value) {
+    if (value === null || value === "auto") {
+      return "auto";
+    }
+    if (value === "false") {
+      return false;
+    }
+    return true;
+  }
+  serializeSwipeGesture(value) {
+    return typeof value === "boolean" ? String(value) : value;
+  }
+  updateSwipeGestureListeners() {
+    if (this.options.swipeGesture === false) {
+      this.removeSwipeGestureListeners();
+      return;
+    }
+    if (this.swipeGestureListenersActive || typeof PointerEvent === "undefined") {
+      return;
+    }
+    this.addEventListener("pointerdown", this.handleSwipeGesturePointerDown);
+    this.addEventListener("pointermove", this.handleSwipeGesturePointerMove, { passive: false });
+    this.addEventListener("pointerup", this.handleSwipeGesturePointerEnd);
+    this.addEventListener("pointercancel", this.handleSwipeGesturePointerCancel);
+    this.swipeGestureListenersActive = true;
+  }
+  removeSwipeGestureListeners() {
+    if (!this.swipeGestureListenersActive) {
+      return;
+    }
+    this.removeEventListener("pointerdown", this.handleSwipeGesturePointerDown);
+    this.removeEventListener("pointermove", this.handleSwipeGesturePointerMove);
+    this.removeEventListener("pointerup", this.handleSwipeGesturePointerEnd);
+    this.removeEventListener("pointercancel", this.handleSwipeGesturePointerCancel);
+    this.swipeGestureListenersActive = false;
+    this.swipeGesturePointer = null;
+  }
+  isSwipeGestureEnabled() {
+    const option = this.options.swipeGesture ?? "auto";
+    if (option === true) {
+      return true;
+    }
+    if (option === false) {
+      return false;
+    }
+    return isNativeSwipeGesturePlatform();
+  }
+  getCurrentNavigationHref() {
+    return this.ownerDocument.defaultView?.location.href ?? null;
+  }
+  recordCompletedNavigation(direction, options) {
+    const currentHref = this.getCurrentNavigationHref();
+    if (!options.hadPageBefore || direction === "root") {
+      this.swipeBackDepth = 0;
+      this.lastNavigationHref = currentHref;
+      return;
+    }
+    if (direction === "back") {
+      this.swipeBackDepth = Math.max(0, this.swipeBackDepth - 1);
+      this.lastNavigationHref = currentHref;
+      return;
+    }
+    if (direction === "forward" || direction === "none") {
+      const hrefChanged = currentHref === null || this.lastNavigationHref === null || currentHref !== this.lastNavigationHref;
+      if (options.forceForward || hrefChanged) {
+        this.swipeBackDepth += 1;
+      }
+      this.lastNavigationHref = currentHref;
+      return;
+    }
+    this.lastNavigationHref = currentHref;
+  }
+  canStartSwipeGesture(event) {
+    if (!this.isSwipeGestureEnabled() || this.controller.animating || this.pendingPage || !this.canGoBack) {
+      return false;
+    }
+    if (!event.isPrimary || event.pointerType === "mouse" && event.button !== 0) {
+      return false;
+    }
+    if (this.isInteractiveSwipeTarget(event.target) || this.hasScrollableInlineAncestor(event.target)) {
+      return false;
+    }
+    const rect = this.getBoundingClientRect();
+    const startX = event.clientX - rect.left;
+    if (event.clientY < rect.top || event.clientY > rect.bottom) {
+      return false;
+    }
+    return this.isRTL() ? startX >= rect.width - this.swipeGestureEdgeWidth : startX <= this.swipeGestureEdgeWidth;
+  }
+  isRTL() {
+    const doc = this.ownerDocument;
+    return doc.dir === "rtl" || doc.documentElement.dir === "rtl" || getComputedStyle(this).direction === "rtl";
+  }
+  getSwipeGestureDeltaX(pointer) {
+    const deltaX = pointer.currentX - pointer.startX;
+    return this.isRTL() ? -deltaX : deltaX;
+  }
+  isInteractiveSwipeTarget(target) {
+    if (!(target instanceof Element)) {
+      return false;
+    }
+    return Boolean(
+      target.closest(
+        'a, button, input, textarea, select, option, [contenteditable="true"], [data-swipe-gesture-ignore], [data-swipe-back-ignore]'
+      )
+    );
+  }
+  hasScrollableInlineAncestor(target) {
+    let element = target instanceof Element ? target : null;
+    while (element && element !== this) {
+      if (element instanceof HTMLElement) {
+        const style = getComputedStyle(element);
+        const canScrollInline = /(auto|scroll)/.test(style.overflowX) && element.scrollWidth > element.clientWidth + 1;
+        if (canScrollInline && element.scrollLeft > 0) {
+          return true;
+        }
+      }
+      element = element.parentElement;
+    }
+    return false;
+  }
+  handleSwipeGesturePointerDown = (event) => {
+    if (!this.canStartSwipeGesture(event)) {
+      return;
+    }
+    this.swipeGesturePointer = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      currentX: event.clientX,
+      currentY: event.clientY,
+      startTime: performance.now(),
+      dragging: false,
+      transitionStarted: false
+    };
+    try {
+      this.setPointerCapture(event.pointerId);
+    } catch {
+    }
+  };
+  handleSwipeGesturePointerMove = (event) => {
+    const pointer = this.swipeGesturePointer;
+    if (!pointer || pointer.pointerId !== event.pointerId) {
+      return;
+    }
+    pointer.currentX = event.clientX;
+    pointer.currentY = event.clientY;
+    const deltaX = this.getSwipeGestureDeltaX(pointer);
+    const deltaY = pointer.currentY - pointer.startY;
+    const absX = Math.abs(deltaX);
+    const absY = Math.abs(deltaY);
+    if (!pointer.dragging && absY > 12 && absY > absX) {
+      this.cancelSwipeGesturePointer(event.pointerId);
+      return;
+    }
+    if (deltaX < -this.swipeGestureThreshold) {
+      this.cancelSwipeGesture(event.pointerId);
+      return;
+    }
+    if (!pointer.dragging && deltaX > this.swipeGestureThreshold && absX > absY) {
+      pointer.dragging = true;
+      pointer.transitionStarted = this.controller.beginInteractiveBack({ direction: "back" });
+      if (!pointer.transitionStarted) {
+        this.cancelSwipeGesturePointer(event.pointerId);
+        return;
+      }
+    }
+    if (pointer.dragging && pointer.transitionStarted) {
+      if (event.cancelable) event.preventDefault();
+      const width = Math.max(this.getBoundingClientRect().width, 1);
+      this.controller.stepInteractiveBack(deltaX / width);
+    }
+  };
+  handleSwipeGesturePointerEnd = (event) => {
+    const pointer = this.swipeGesturePointer;
+    if (!pointer || pointer.pointerId !== event.pointerId) {
+      return;
+    }
+    pointer.currentX = event.clientX;
+    pointer.currentY = event.clientY;
+    const deltaX = this.getSwipeGestureDeltaX(pointer);
+    const elapsed = Math.max(performance.now() - pointer.startTime, 1);
+    const velocityX = deltaX / elapsed;
+    const width = Math.max(this.getBoundingClientRect().width, 1);
+    const step = deltaX / width;
+    const shouldCommit = pointer.dragging && pointer.transitionStarted && velocityX >= 0 && (velocityX > this.swipeGestureMinimumVelocity || deltaX > width / 2);
+    const missing = shouldCommit ? 1 - step : step;
+    const missingDistance = Math.max(missing, 0) * width;
+    const releaseDuration = missingDistance > 5 && Math.abs(velocityX) > 0 ? Math.min(missingDistance / Math.abs(velocityX), 540) : 0;
+    this.releaseSwipeGesturePointer(event.pointerId);
+    void this.finishSwipeGestureBack(shouldCommit, releaseDuration);
+  };
+  handleSwipeGesturePointerCancel = (event) => {
+    this.cancelSwipeGesture(event.pointerId);
+  };
+  cancelSwipeGesturePointer(pointerId) {
+    this.releaseSwipeGesturePointer(pointerId);
+  }
+  releaseSwipeGesturePointer(pointerId) {
+    if (this.swipeGesturePointer?.pointerId !== pointerId) {
+      return;
+    }
+    try {
+      this.releasePointerCapture(pointerId);
+    } catch {
+    }
+    this.swipeGesturePointer = null;
+  }
+  cancelSwipeGesture(pointerId) {
+    const pointer = this.swipeGesturePointer;
+    if (!pointer || pointer.pointerId !== pointerId) {
+      return;
+    }
+    this.releaseSwipeGesturePointer(pointerId);
+    if (pointer.transitionStarted) {
+      void this.finishSwipeGestureBack(false, 0);
+    }
+  }
+  async finishSwipeGestureBack(shouldComplete, releaseDuration) {
+    const shouldUseHistory = shouldComplete && typeof window !== "undefined" && window.history.length > 1;
+    await this.controller.endInteractiveBack(shouldComplete, releaseDuration, !shouldUseHistory);
+    if (!shouldComplete) {
+      return;
+    }
+    if (shouldUseHistory) {
+      this.skipNextHistoryBackTransition = true;
+      this.dataset.direction = "back";
+      window.history.back();
+      return;
+    }
+    if (!this.options.keepInDom) {
+      this.cleanupOldPages();
+    }
+  }
+};
+if (typeof customElements !== "undefined" && !customElements.get("cap-router-outlet")) {
+  customElements.define("cap-router-outlet", CapRouterOutlet);
+}
+
+// src/components/cap-page.ts
+var CapPage = class extends HTMLElement {
+  _lifecycle = {};
+  _isActive = false;
+  static get observedAttributes() {
+    return ["key", "cache-scroll"];
+  }
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    shadow.innerHTML = `
+      <style>
+        :host {
+          display: flex;
+          flex-direction: column;
+          width: 100%;
+          height: 100%;
+          position: relative;
+          overflow: hidden;
+          background: var(--cap-page-background, Canvas);
+          color: var(--cap-page-color, CanvasText);
+        }
+
+        :host(.cap-transition-active) {
+          overflow: visible;
+        }
+
+        .header-container {
+          flex-shrink: 0;
+          position: relative;
+          z-index: 10;
+        }
+
+        .content-container {
+          flex: 1;
+          position: relative;
+          overflow: hidden;
+        }
+
+        .footer-container {
+          flex-shrink: 0;
+          position: relative;
+          z-index: 10;
+        }
+
+        ::slotted([slot="header"]),
+        ::slotted([data-cap-header]) {
+          display: block;
+        }
+
+        ::slotted([slot="content"]),
+        ::slotted([data-cap-content]) {
+          display: block;
+          height: 100%;
+          overflow: auto;
+        }
+
+        ::slotted([slot="footer"]),
+        ::slotted([data-cap-footer]) {
+          display: block;
+        }
+      </style>
+
+      <div class="header-container" part="header">
+        <slot name="header"></slot>
+      </div>
+
+      <div class="content-container" part="content">
+        <slot name="content"></slot>
+        <slot></slot>
+      </div>
+
+      <div class="footer-container" part="footer">
+        <slot name="footer"></slot>
+      </div>
+    `;
+  }
+  connectedCallback() {
+    this.markTransitionElements();
+    this.dispatchEvent(
+      new CustomEvent("cap-page-connected", {
+        bubbles: true,
+        composed: true,
+        detail: { page: this }
+      })
+    );
+  }
+  disconnectedCallback() {
+    this.dispatchEvent(
+      new CustomEvent("cap-page-disconnected", {
+        bubbles: true,
+        composed: true,
+        detail: { page: this }
+      })
+    );
+  }
+  /**
+   * Mark child elements for transition controller
+   */
+  markTransitionElements() {
+    const header = this.querySelector('[slot="header"]');
+    if (header) {
+      header.setAttribute("data-cap-header", "");
+    }
+    const content = this.querySelector('[slot="content"]');
+    if (content) {
+      content.setAttribute("data-cap-content", "");
+    }
+    const footer = this.querySelector('[slot="footer"]');
+    if (footer) {
+      footer.setAttribute("data-cap-footer", "");
+    }
+  }
+  /**
+   * Set lifecycle callbacks
+   */
+  set lifecycle(callbacks) {
+    this._lifecycle = callbacks;
+  }
+  get lifecycle() {
+    return this._lifecycle;
+  }
+  /**
+   * Check if page is active
+   */
+  get isActive() {
+    return this._isActive;
+  }
+  /**
+   * Called when page will enter view
+   */
+  async willEnter(event) {
+    await this._lifecycle.onWillEnter?.(event);
+    this.dispatchEvent(
+      new CustomEvent("cap-will-enter", {
+        bubbles: true,
+        detail: event
+      })
+    );
+  }
+  /**
+   * Called when page has entered view
+   */
+  async didEnter(event) {
+    this._isActive = true;
+    await this._lifecycle.onDidEnter?.(event);
+    this.dispatchEvent(
+      new CustomEvent("cap-did-enter", {
+        bubbles: true,
+        detail: event
+      })
+    );
+  }
+  /**
+   * Called when page will leave view
+   */
+  async willLeave(event) {
+    await this._lifecycle.onWillLeave?.(event);
+    this.dispatchEvent(
+      new CustomEvent("cap-will-leave", {
+        bubbles: true,
+        detail: event
+      })
+    );
+  }
+  /**
+   * Called when page has left view
+   */
+  async didLeave(event) {
+    this._isActive = false;
+    await this._lifecycle.onDidLeave?.(event);
+    this.dispatchEvent(
+      new CustomEvent("cap-did-leave", {
+        bubbles: true,
+        detail: event
+      })
+    );
+  }
+  /**
+   * Get the header element
+   */
+  get headerElement() {
+    return this.querySelector('[slot="header"], [data-cap-header]');
+  }
+  /**
+   * Get the content element
+   */
+  get contentElement() {
+    return this.querySelector('[slot="content"], [data-cap-content]');
+  }
+  /**
+   * Get the footer element
+   */
+  get footerElement() {
+    return this.querySelector('[slot="footer"], [data-cap-footer]');
+  }
+  /**
+   * Save scroll position
+   */
+  saveScrollPosition() {
+    const content = this.contentElement;
+    if (!content) return null;
+    return {
+      x: content.scrollLeft,
+      y: content.scrollTop
+    };
+  }
+  /**
+   * Restore scroll position
+   */
+  restoreScrollPosition(position) {
+    const content = this.contentElement;
+    if (!content) return;
+    content.scrollLeft = position.x;
+    content.scrollTop = position.y;
+  }
+};
+if (typeof customElements !== "undefined" && !customElements.get("cap-page")) {
+  customElements.define("cap-page", CapPage);
+}
+
+// src/components/cap-header.ts
+var CapHeader = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["translucent", "collapse"];
+  }
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    this.style.display = "block";
+    this.style.position = "relative";
+    this.style.zIndex = "10";
+    this.setAttribute("data-cap-header", "");
+    if (this.parentElement?.tagName === "CAP-PAGE" && !this.hasAttribute("slot")) {
+      this.setAttribute("slot", "header");
+    }
+  }
+  attributeChangedCallback(name, _oldValue, newValue) {
+    switch (name) {
+      case "translucent":
+        this.dataset.translucent = newValue !== null ? "true" : "false";
+        break;
+      case "collapse":
+        this.dataset.collapse = newValue;
+        break;
+    }
+  }
+  /**
+   * Get the current height of the header
+   */
+  get height() {
+    return this.offsetHeight;
+  }
+};
+if (typeof customElements !== "undefined" && !customElements.get("cap-header")) {
+  customElements.define("cap-header", CapHeader);
+}
+
+// src/components/cap-content.ts
+var CapContent = class extends HTMLElement {
+  _scrollPosition = { x: 0, y: 0 };
+  static get observedAttributes() {
+    return ["fullscreen", "scroll-x", "scroll-y"];
+  }
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    this.style.display = "block";
+    this.style.position = "relative";
+    this.style.flex = "1";
+    this.style.overflow = "auto";
+    this.style.overscrollBehavior = "contain";
+    this.style.webkitOverflowScrolling = "touch";
+    this.setAttribute("data-cap-content", "");
+    if (this.parentElement?.tagName === "CAP-PAGE" && !this.hasAttribute("slot")) {
+      this.setAttribute("slot", "content");
+    }
+    this.addEventListener("scroll", this.handleScroll.bind(this), { passive: true });
+  }
+  disconnectedCallback() {
+    this.removeEventListener("scroll", this.handleScroll.bind(this));
+  }
+  attributeChangedCallback(name, _oldValue, newValue) {
+    switch (name) {
+      case "fullscreen":
+        this.dataset.fullscreen = newValue !== null ? "true" : "false";
+        break;
+      case "scroll-x":
+        this.style.overflowX = newValue === "false" ? "hidden" : "auto";
+        break;
+      case "scroll-y":
+        this.style.overflowY = newValue === "false" ? "hidden" : "auto";
+        break;
+    }
+  }
+  /**
+   * Handle scroll events
+   */
+  handleScroll() {
+    this._scrollPosition = {
+      x: this.scrollLeft,
+      y: this.scrollTop
+    };
+    this.dispatchEvent(
+      new CustomEvent("cap-scroll", {
+        bubbles: true,
+        detail: this._scrollPosition
+      })
+    );
+  }
+  /**
+   * Get current scroll position
+   */
+  get scrollPosition() {
+    return { ...this._scrollPosition };
+  }
+  /**
+   * Save current scroll position
+   */
+  saveScrollPosition() {
+    this._scrollPosition = {
+      x: this.scrollLeft,
+      y: this.scrollTop
+    };
+    return { ...this._scrollPosition };
+  }
+  /**
+   * Restore scroll position
+   */
+  restoreScrollPosition(position) {
+    const pos = position || this._scrollPosition;
+    this.scrollLeft = pos.x;
+    this.scrollTop = pos.y;
+  }
+  /**
+   * Scroll to top
+   */
+  scrollToTop(smooth = true) {
+    this.scrollTo({
+      top: 0,
+      behavior: smooth ? "smooth" : "instant"
+    });
+  }
+  /**
+   * Scroll to bottom
+   */
+  scrollToBottom(smooth = true) {
+    this.scrollTo({
+      top: this.scrollHeight,
+      behavior: smooth ? "smooth" : "instant"
+    });
+  }
+  /**
+   * Scroll to element
+   */
+  scrollToElement(element, smooth = true) {
+    element.scrollIntoView({
+      behavior: smooth ? "smooth" : "instant",
+      block: "start"
+    });
+  }
+};
+if (typeof customElements !== "undefined" && !customElements.get("cap-content")) {
+  customElements.define("cap-content", CapContent);
+}
+
+// src/components/cap-footer.ts
+var CapFooter = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["translucent"];
+  }
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    this.style.display = "block";
+    this.style.position = "relative";
+    this.style.zIndex = "10";
+    this.setAttribute("data-cap-footer", "");
+    if (this.parentElement?.tagName === "CAP-PAGE" && !this.hasAttribute("slot")) {
+      this.setAttribute("slot", "footer");
+    }
+  }
+  attributeChangedCallback(name, _oldValue, newValue) {
+    switch (name) {
+      case "translucent":
+        this.dataset.translucent = newValue !== null ? "true" : "false";
+        break;
+    }
+  }
+  /**
+   * Get the current height of the footer
+   */
+  get height() {
+    return this.offsetHeight;
+  }
+};
+if (typeof customElements !== "undefined" && !customElements.get("cap-footer")) {
+  customElements.define("cap-footer", CapFooter);
+}
+
+// src/react/index.ts
+var globalController = null;
+var globalDirection = "forward";
+function initTransitions(config = {}) {
+  globalController = createTransitionController(config);
+  return globalController;
+}
+function getController() {
+  if (!globalController) {
+    globalController = createTransitionController();
+  }
+  return globalController;
+}
+function getDirection() {
+  return globalDirection;
+}
+function setDirection(direction) {
+  globalDirection = direction;
+  if (typeof document !== "undefined") {
+    for (const outlet of document.querySelectorAll("cap-router-outlet")) {
+      outlet.dataset.direction = direction;
+    }
+  }
+}
+function setupRouterOutlet(element, options = {}) {
+  const { keepInDom = true, maxCached = 10, platform = "auto", duration, swipeGesture } = options;
+  element.setAttribute("platform", platform);
+  if (duration !== void 0) element.setAttribute("duration", String(duration));
+  element.setAttribute("keep-in-dom", String(keepInDom));
+  element.setAttribute("max-cached", String(maxCached));
+  if (swipeGesture !== void 0) element.setAttribute("swipe-gesture", String(swipeGesture));
+}
+function setupPage(element, callbacks) {
+  const handleWillEnter = (e) => {
+    callbacks?.onWillEnter?.(e.detail);
+  };
+  const handleDidEnter = (e) => {
+    callbacks?.onDidEnter?.(e.detail);
+  };
+  const handleWillLeave = (e) => {
+    callbacks?.onWillLeave?.(e.detail);
+  };
+  const handleDidLeave = (e) => {
+    callbacks?.onDidLeave?.(e.detail);
+  };
+  element.addEventListener("cap-will-enter", handleWillEnter);
+  element.addEventListener("cap-did-enter", handleDidEnter);
+  element.addEventListener("cap-will-leave", handleWillLeave);
+  element.addEventListener("cap-did-leave", handleDidLeave);
+  return () => {
+    element.removeEventListener("cap-will-enter", handleWillEnter);
+    element.removeEventListener("cap-did-enter", handleDidEnter);
+    element.removeEventListener("cap-will-leave", handleWillLeave);
+    element.removeEventListener("cap-did-leave", handleDidLeave);
+  };
+}
+function createTransitionNavigate(navigate) {
+  return (to, direction = "forward") => {
+    setDirection(direction);
+    navigate(to);
+  };
+}
+export {
+  TransitionController,
+  createTransitionNavigate,
+  getController,
+  getDirection,
+  initTransitions,
+  setDirection,
+  setupPage,
+  setupRouterOutlet
+};
+//# sourceMappingURL=index.mjs.map