@capgo/capacitor-transitions 8.0.1

package/dist/index.js

@@ -0,0 +1,2400 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/core/animations.ts
+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());
+}
+function createHeaderTransition(options) {
+  const { enteringHeader, leavingHeader, direction, duration, easing } = options;
+  const animations = [];
+  const isBack = direction === "back";
+  if (enteringHeader) {
+    if (isBack) {
+      const enterAnim = enteringHeader.animate(
+        [
+          { opacity: 0, transform: "translateX(-20px)" },
+          { opacity: 1, transform: "translateX(0)" }
+        ],
+        { duration: duration * 0.7, easing, fill: "forwards" }
+      );
+      animations.push(enterAnim);
+    } else {
+      const enterAnim = enteringHeader.animate(
+        [
+          { opacity: 0, transform: "translateX(20px)" },
+          { opacity: 1, transform: "translateX(0)" }
+        ],
+        { duration: duration * 0.7, easing, fill: "forwards" }
+      );
+      animations.push(enterAnim);
+    }
+  }
+  if (leavingHeader) {
+    if (isBack) {
+      const leaveAnim = leavingHeader.animate(
+        [
+          { opacity: 1, transform: "translateX(0)" },
+          { opacity: 0, transform: "translateX(20px)" }
+        ],
+        { duration: duration * 0.7, easing, fill: "forwards" }
+      );
+      animations.push(leaveAnim);
+    } else {
+      const leaveAnim = leavingHeader.animate(
+        [
+          { opacity: 1, transform: "translateX(0)" },
+          { opacity: 0, transform: "translateX(-20px)" }
+        ],
+        { duration: duration * 0.7, easing, fill: "forwards" }
+      );
+      animations.push(leaveAnim);
+    }
+  }
+  return animations;
+}
+function createFooterTransition(options) {
+  const { enteringFooter, leavingFooter, duration, easing } = options;
+  const animations = [];
+  if (enteringFooter && leavingFooter && enteringFooter !== leavingFooter) {
+    const enterAnim = enteringFooter.animate([{ opacity: 0 }, { opacity: 1 }], {
+      duration: duration * 0.5,
+      easing,
+      fill: "forwards"
+    });
+    animations.push(enterAnim);
+    const leaveAnim = leavingFooter.animate([{ opacity: 1 }, { opacity: 0 }], {
+      duration: duration * 0.5,
+      easing,
+      fill: "forwards"
+    });
+    animations.push(leaveAnim);
+  }
+  return animations;
+}
+var IOS_EASING, ANDROID_EASING, ANDROID_BACK_EASING, IOS_DURATION, ANDROID_DURATION, ANDROID_BACK_DURATION, IOS_OFF_OPACITY, IOS_CENTER, IOS_OFF_RIGHT, IOS_OFF_LEFT, IOS_OFF_RIGHT_RTL, IOS_OFF_LEFT_RTL, MD_OFF_BOTTOM, MD_CENTER;
+var init_animations = __esm({
+  "src/core/animations.ts"() {
+    "use strict";
+    IOS_EASING = "cubic-bezier(0.32, 0.72, 0, 1)";
+    ANDROID_EASING = "cubic-bezier(0.36, 0.66, 0.04, 1)";
+    ANDROID_BACK_EASING = "cubic-bezier(0.47, 0, 0.745, 0.715)";
+    IOS_DURATION = 540;
+    ANDROID_DURATION = 280;
+    ANDROID_BACK_DURATION = 200;
+    IOS_OFF_OPACITY = 0.8;
+    IOS_CENTER = "0%";
+    IOS_OFF_RIGHT = "99.5%";
+    IOS_OFF_LEFT = "-33%";
+    IOS_OFF_RIGHT_RTL = "-99.5%";
+    IOS_OFF_LEFT_RTL = "33%";
+    MD_OFF_BOTTOM = "40px";
+    MD_CENTER = "0px";
+  }
+});
+
+// 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 = "";
+}
+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);
+}
+var VIEW_TRANSITIONS_CSS;
+var init_view_transitions = __esm({
+  "src/core/view-transitions.ts"() {
+    "use strict";
+    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;
+  }
+}
+`;
+  }
+});
+
+// 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";
+}
+var init_native_platform = __esm({
+  "src/core/native-platform.ts"() {
+    "use strict";
+  }
+});
+
+// src/core/transition-controller.ts
+function getTransitionController(config) {
+  if (!defaultController) {
+    defaultController = new TransitionController(config);
+  } else if (config) {
+    defaultController.configure(config);
+  }
+  return defaultController;
+}
+function createTransitionController(config) {
+  return new TransitionController(config);
+}
+var DEFAULT_CONFIG, TransitionController, defaultController;
+var init_transition_controller = __esm({
+  "src/core/transition-controller.ts"() {
+    "use strict";
+    init_animations();
+    init_view_transitions();
+    DEFAULT_CONFIG = {
+      platform: "auto",
+      duration: 0,
+      // Will use platform default
+      easing: "",
+      // Will use platform default
+      useViewTransitions: false,
+      detectPlatform
+    };
+    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;
+      }
+    };
+    defaultController = null;
+  }
+});
+
+// src/components/cap-router-outlet.ts
+var CapRouterOutlet;
+var init_cap_router_outlet = __esm({
+  "src/components/cap-router-outlet.ts"() {
+    "use strict";
+    init_native_platform();
+    init_transition_controller();
+    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;
+var init_cap_page = __esm({
+  "src/components/cap-page.ts"() {
+    "use strict";
+    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;
+var init_cap_header = __esm({
+  "src/components/cap-header.ts"() {
+    "use strict";
+    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;
+var init_cap_content = __esm({
+  "src/components/cap-content.ts"() {
+    "use strict";
+    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;
+var init_cap_footer = __esm({
+  "src/components/cap-footer.ts"() {
+    "use strict";
+    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/components/index.ts
+var components_exports = {};
+__export(components_exports, {
+  CapContent: () => CapContent,
+  CapFooter: () => CapFooter,
+  CapHeader: () => CapHeader,
+  CapPage: () => CapPage,
+  CapRouterOutlet: () => CapRouterOutlet
+});
+var init_components = __esm({
+  "src/components/index.ts"() {
+    "use strict";
+    init_cap_router_outlet();
+    init_cap_page();
+    init_cap_header();
+    init_cap_content();
+    init_cap_footer();
+    init_cap_router_outlet();
+    init_cap_page();
+    init_cap_header();
+    init_cap_content();
+    init_cap_footer();
+  }
+});
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ANDROID_DURATION: () => ANDROID_DURATION,
+  ANDROID_EASING: () => ANDROID_EASING,
+  CapContent: () => CapContent,
+  CapFooter: () => CapFooter,
+  CapHeader: () => CapHeader,
+  CapPage: () => CapPage,
+  CapRouterOutlet: () => CapRouterOutlet,
+  IOS_DURATION: () => IOS_DURATION,
+  IOS_EASING: () => IOS_EASING,
+  TransitionController: () => TransitionController,
+  VIEW_TRANSITIONS_CSS: () => VIEW_TRANSITIONS_CSS,
+  cancelAnimations: () => cancelAnimations,
+  clearViewTransitionName: () => clearViewTransitionName,
+  createAndroidTransition: () => createAndroidTransition,
+  createFooterTransition: () => createFooterTransition,
+  createHeaderTransition: () => createHeaderTransition,
+  createIOSTransition: () => createIOSTransition,
+  createNoneTransition: () => createNoneTransition,
+  createTransition: () => createTransition,
+  createTransitionController: () => createTransitionController,
+  detectNativePlatform: () => detectNativePlatform,
+  detectPlatform: () => detectPlatform,
+  getDefaultDuration: () => getDefaultDuration,
+  getDefaultEasing: () => getDefaultEasing,
+  getTransitionController: () => getTransitionController,
+  initCapTransitions: () => initCapTransitions,
+  injectViewTransitionsCSS: () => injectViewTransitionsCSS,
+  isNativeSwipeGesturePlatform: () => isNativeSwipeGesturePlatform,
+  resolveEasing: () => resolveEasing,
+  runViewTransition: () => runViewTransition,
+  setViewTransitionName: () => setViewTransitionName,
+  supportsViewTransitions: () => supportsViewTransitions,
+  waitForAnimations: () => waitForAnimations
+});
+module.exports = __toCommonJS(index_exports);
+init_animations();
+init_view_transitions();
+init_native_platform();
+init_transition_controller();
+init_components();
+function initCapTransitions() {
+  Promise.resolve().then(() => init_components());
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ANDROID_DURATION,
+  ANDROID_EASING,
+  CapContent,
+  CapFooter,
+  CapHeader,
+  CapPage,
+  CapRouterOutlet,
+  IOS_DURATION,
+  IOS_EASING,
+  TransitionController,
+  VIEW_TRANSITIONS_CSS,
+  cancelAnimations,
+  clearViewTransitionName,
+  createAndroidTransition,
+  createFooterTransition,
+  createHeaderTransition,
+  createIOSTransition,
+  createNoneTransition,
+  createTransition,
+  createTransitionController,
+  detectNativePlatform,
+  detectPlatform,
+  getDefaultDuration,
+  getDefaultEasing,
+  getTransitionController,
+  initCapTransitions,
+  injectViewTransitionsCSS,
+  isNativeSwipeGesturePlatform,
+  resolveEasing,
+  runViewTransition,
+  setViewTransitionName,
+  supportsViewTransitions,
+  waitForAnimations
+});
+//# sourceMappingURL=index.js.map