@talex-touch/tuffex 0.3.3 → 0.3.4

package/dist/es/flip-overlay/src/TxFlipOverlay.vue.js

@@ -0,0 +1,982 @@
+import { defineComponent, useSlots, ref, computed, watch, onBeforeUnmount, createBlock, openBlock, Transition, withCtx, createElementBlock, createCommentVNode, normalizeStyle, normalizeClass, createElementVNode, withModifiers, createVNode, renderSlot, normalizeProps, mergeProps, guardReactiveProps, toDisplayString, nextTick } from 'vue';
+import _sfc_main$2 from '../../button/src/button.vue.js';
+import gsap from 'gsap';
+import _sfc_main$1 from '../../base-surface/src/TxBaseSurface.vue.js';
+/* empty css                                      */
+import { hasWindow } from '../../packages/tuffex/packages/utils/env.js';
+import { getZIndex, nextZIndex } from '../../packages/tuffex/packages/utils/z-index-manager.js';
+
+const _hoisted_1 = {
+  key: 0,
+  class: "TxFlipOverlay-GlobalMask"
+};
+const _hoisted_2 = {
+  key: 1,
+  class: "TxFlipOverlay-Header"
+};
+const _hoisted_3 = { class: "TxFlipOverlay-HeaderDisplay" };
+const _hoisted_4 = {
+  key: 0,
+  class: "TxFlipOverlay-HeaderTitle"
+};
+const _hoisted_5 = {
+  key: 1,
+  class: "TxFlipOverlay-HeaderDesc"
+};
+const _hoisted_6 = { class: "TxFlipOverlay-HeaderActions" };
+const STACK_MATCH_PIXEL_THRESHOLD = 8;
+const STACK_MATCH_RATIO_THRESHOLD = 0.05;
+const STACK_LAYER_OFFSET_Y = -18;
+const STACK_LAYER_SCALE_STEP = 0.05;
+const STACK_LAYER_MAX_DEPTH = 3;
+const STACK_OPACITY_BY_DEPTH = [1, 0.92, 0.78, 0.62, 0.38, 0.16, 0];
+const STACK_STATE_EPSILON = 1e-3;
+const overlayStackRegistry = /* @__PURE__ */ new Map();
+const overlayStackSubscribers = /* @__PURE__ */ new Set();
+let overlayStackVersion = 0;
+let overlayInstanceSeed = 0;
+let overlayOpenSequenceSeed = 0;
+let sharedGlobalMaskElement = null;
+function canUseDom() {
+  return typeof window !== "undefined" && typeof document !== "undefined";
+}
+function resolveVisibleStackBounds(entries) {
+  if (entries.length === 0)
+    return null;
+  let minZIndex = entries[0].zIndex;
+  for (const entry of entries) {
+    if (entry.zIndex < minZIndex)
+      minZIndex = entry.zIndex;
+  }
+  return {
+    minZIndex,
+    topEntry: entries[entries.length - 1]
+  };
+}
+function removeSharedGlobalMaskElement() {
+  if (!sharedGlobalMaskElement)
+    return;
+  sharedGlobalMaskElement.remove();
+  sharedGlobalMaskElement = null;
+}
+function ensureSharedGlobalMaskElement() {
+  if (!canUseDom())
+    return null;
+  if (!sharedGlobalMaskElement) {
+    sharedGlobalMaskElement = document.createElement("div");
+    sharedGlobalMaskElement.className = "TxFlipOverlay-GlobalMask";
+    document.body.appendChild(sharedGlobalMaskElement);
+  }
+  return sharedGlobalMaskElement;
+}
+function applySharedGlobalMaskState() {
+  if (!canUseDom())
+    return;
+  const visibleEntries = getVisibleOverlayStackEntries();
+  const bounds = resolveVisibleStackBounds(visibleEntries);
+  if (!bounds || visibleEntries.length <= 1 || !bounds.topEntry.globalMask) {
+    removeSharedGlobalMaskElement();
+    return;
+  }
+  const maskElement = ensureSharedGlobalMaskElement();
+  if (!maskElement)
+    return;
+  maskElement.className = "TxFlipOverlay-GlobalMask";
+  maskElement.style.zIndex = String(Math.max(0, bounds.minZIndex - 1));
+  maskElement.style.opacity = "1";
+}
+function markOverlayStackChanged() {
+  overlayStackVersion += 1;
+  applySharedGlobalMaskState();
+  overlayStackSubscribers.forEach((listener) => {
+    try {
+      listener();
+    } catch {
+    }
+  });
+}
+function subscribeOverlayStackChanged(listener) {
+  overlayStackSubscribers.add(listener);
+  return () => overlayStackSubscribers.delete(listener);
+}
+function getOverlayStackVersion() {
+  return overlayStackVersion;
+}
+function getVisibleOverlayStackEntries() {
+  return Array.from(overlayStackRegistry.values()).filter((entry) => entry.visible).sort((a, b) => {
+    if (a.zIndex !== b.zIndex)
+      return a.zIndex - b.zIndex;
+    return a.openSequence - b.openSequence;
+  });
+}
+function isOverlaySizeMatched(current, above) {
+  const widthDelta = Math.abs(current.width - above.width);
+  const heightDelta = Math.abs(current.height - above.height);
+  const widthTolerance = Math.max(STACK_MATCH_PIXEL_THRESHOLD, above.width * STACK_MATCH_RATIO_THRESHOLD);
+  const heightTolerance = Math.max(STACK_MATCH_PIXEL_THRESHOLD, above.height * STACK_MATCH_RATIO_THRESHOLD);
+  return widthDelta <= widthTolerance && heightDelta <= heightTolerance;
+}
+function resolveStackOpacity(depth) {
+  if (depth < 0)
+    return 1;
+  if (depth >= STACK_OPACITY_BY_DEPTH.length)
+    return 0;
+  return STACK_OPACITY_BY_DEPTH[depth] ?? 0;
+}
+function nextOverlayInstanceId() {
+  overlayInstanceSeed += 1;
+  return `tx-flip-overlay-${overlayInstanceSeed}`;
+}
+function nextOverlayOpenSequence() {
+  overlayOpenSequenceSeed += 1;
+  return overlayOpenSequenceSeed;
+}
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "TxFlipOverlay"
+  },
+  __name: "TxFlipOverlay",
+  props: {
+    modelValue: { type: Boolean, default: false },
+    source: { default: null },
+    sourceRadius: { default: null },
+    duration: { default: 480 },
+    rotateX: { default: 6 },
+    rotateY: { default: 8 },
+    tiltRange: { default: 2 },
+    perspective: { default: 1200 },
+    speedBoost: { default: 1.12 },
+    speedBoostAt: { default: 0.7 },
+    easeOut: { default: "back.out(1.25)" },
+    easeIn: { default: "back.in(1)" },
+    maskClosable: { type: Boolean, default: true },
+    preventAccidentalClose: { type: Boolean, default: false },
+    transitionName: { default: "TxFlipOverlay-Mask" },
+    maskClass: { default: "" },
+    cardClass: { default: "" },
+    cardStyle: {},
+    globalMask: { type: Boolean, default: true },
+    border: { default: "solid" },
+    surface: { default: "mask" },
+    surfaceColor: { default: "" },
+    surfaceOpacity: { default: 0.96 },
+    header: { type: Boolean, default: true },
+    headerTitle: { default: "" },
+    headerDesc: { default: "" },
+    closable: { type: Boolean, default: true },
+    closeAriaLabel: { default: "Close" },
+    scrollable: { type: Boolean, default: true },
+    randomTilt: { type: Boolean, default: true },
+    expanded: { type: Boolean },
+    animating: { type: Boolean }
+  },
+  emits: ["update:modelValue", "update:expanded", "update:animating", "open", "opened", "close", "closed"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = useSlots();
+    const instanceId = nextOverlayInstanceId();
+    const cardRef = ref(null);
+    const visible = ref(Boolean(props.modelValue));
+    const expanded = ref(typeof props.expanded === "boolean" ? props.expanded : false);
+    const animating = ref(typeof props.animating === "boolean" ? props.animating : false);
+    const zIndex = ref(getZIndex());
+    const sourceRect = ref(null);
+    const sourceRadius = ref(null);
+    const tilt = ref({ x: 0, y: 0 });
+    const blockedCloseWarning = ref(false);
+    const openSequence = ref(0);
+    const localStackVersion = ref(getOverlayStackVersion());
+    const unsubscribeStackChange = hasWindow() ? subscribeOverlayStackChanged(() => {
+      localStackVersion.value += 1;
+    }) : () => {
+    };
+    let tween = null;
+    let stackTween = null;
+    let appliedStackState = null;
+    let runId = 0;
+    let blockedCloseTimer = null;
+    let pageExitGuardBound = false;
+    const stackMeta = computed(() => {
+      localStackVersion.value;
+      if (!visible.value) {
+        return {
+          depth: 0,
+          stackSize: 0,
+          isMaskOwner: true,
+          isLayered: false,
+          isDepthHidden: false,
+          translateY: 0,
+          scale: 1,
+          opacity: 1
+        };
+      }
+      const stackEntries = getVisibleOverlayStackEntries();
+      const selfIndex = stackEntries.findIndex((entry) => entry.id === instanceId);
+      if (selfIndex < 0) {
+        return {
+          depth: 0,
+          stackSize: stackEntries.length,
+          isMaskOwner: true,
+          isLayered: false,
+          isDepthHidden: false,
+          translateY: 0,
+          scale: 1,
+          opacity: 1
+        };
+      }
+      const topIndex = stackEntries.length - 1;
+      const depth = topIndex - selfIndex;
+      const selfEntry = stackEntries[selfIndex];
+      const aboveEntry = depth > 0 ? stackEntries[selfIndex + 1] : void 0;
+      let isLayered = false;
+      if (selfEntry && aboveEntry) {
+        const isSizeReady = selfEntry.width > 0 && selfEntry.height > 0 && aboveEntry.width > 0 && aboveEntry.height > 0;
+        isLayered = !isSizeReady || isOverlaySizeMatched(selfEntry, aboveEntry);
+      }
+      const layeredDepth = isLayered ? Math.min(depth, STACK_LAYER_MAX_DEPTH) : 0;
+      const scale = Math.max(0, 1 - STACK_LAYER_SCALE_STEP * layeredDepth);
+      const opacity = resolveStackOpacity(depth);
+      return {
+        depth,
+        stackSize: stackEntries.length,
+        isMaskOwner: depth === 0,
+        isLayered,
+        isDepthHidden: opacity <= 0,
+        translateY: STACK_LAYER_OFFSET_Y * layeredDepth,
+        scale,
+        opacity
+      };
+    });
+    const maskClassName = computed(() => {
+      const classes = ["TxFlipOverlay-Mask"];
+      if (props.maskClass) {
+        const customMaskClasses = props.maskClass.split(/\s+/).map((token) => token.trim()).filter(Boolean);
+        classes.push(...customMaskClasses);
+      }
+      if (!stackMeta.value.isMaskOwner)
+        classes.push("is-stack-underlay-mask");
+      if (blockedCloseWarning.value)
+        classes.push("is-close-guard-warning");
+      if (props.maskClass)
+        classes.push(props.maskClass);
+      return classes;
+    });
+    const cardClassName = computed(() => {
+      let borderStyle = "solid";
+      if (props.border === "none") {
+        borderStyle = "none";
+      } else if (props.border === "dashed" || props.border === "dash") {
+        borderStyle = "dashed";
+      }
+      const classes = [
+        "TxFlipOverlay-Card",
+        `is-border-${borderStyle}`,
+        {
+          "is-expanded": expanded.value,
+          "is-close-guard-warning": blockedCloseWarning.value,
+          "is-stack-layered": stackMeta.value.isLayered,
+          "is-stack-depth-hidden": stackMeta.value.isDepthHidden
+        }
+      ];
+      if (props.cardClass)
+        classes.push(props.cardClass);
+      return classes;
+    });
+    const bodyClassName = computed(() => {
+      const classes = [
+        "TxFlipOverlay-Body",
+        "TxFlipOverlay-Content",
+        { "is-scrollable": props.scrollable }
+      ];
+      return classes;
+    });
+    const shellClassName = computed(() => {
+      const classes = [
+        "TxFlipOverlay-Shell",
+        { "is-close-guard-focus": blockedCloseWarning.value }
+      ];
+      return classes;
+    });
+    const maskStyle = computed(() => {
+      const style = {
+        zIndex: zIndex.value,
+        pointerEvents: stackMeta.value.isMaskOwner ? "auto" : "none"
+      };
+      const usesSharedStackMask = props.globalMask && stackMeta.value.stackSize > 1;
+      if (usesSharedStackMask || !stackMeta.value.isMaskOwner) {
+        style.background = "transparent";
+        style.backdropFilter = "none";
+        style.WebkitBackdropFilter = "none";
+      }
+      return style;
+    });
+    const surfaceMode = computed(() => {
+      if (props.surface === "pure" || props.surface === "mask" || props.surface === "blur" || props.surface === "glass" || props.surface === "refraction") {
+        return props.surface;
+      }
+      return "mask";
+    });
+    const surfaceColor = computed(() => {
+      if (props.surfaceColor)
+        return props.surfaceColor;
+      return "var(--tx-bg-color-overlay, var(--tx-card-fake-background, #fff))";
+    });
+    const surfaceOpacity = computed(() => {
+      const value = typeof props.surfaceOpacity === "number" ? props.surfaceOpacity : 0.96;
+      if (!Number.isFinite(value))
+        return 0.96;
+      return Math.max(0, Math.min(1, value));
+    });
+    const bodyLockCountKey = "txFlipOverlayLockCount";
+    const bodyLockOverflowKey = "txFlipOverlayLockOverflow";
+    const bodyLockPaddingKey = "txFlipOverlayLockPaddingRight";
+    const transitionName = computed(() => props.transitionName || "TxFlipOverlay-Mask");
+    const useMaskCssTransition = computed(() => {
+      if (!visible.value)
+        return true;
+      if (stackMeta.value.isMaskOwner && stackMeta.value.stackSize > 1)
+        return false;
+      return true;
+    });
+    const hasCustomHeaderSlot = computed(() => Boolean(slots.header));
+    const hasHeaderDisplaySlot = computed(() => Boolean(slots["header-display"]));
+    const hasHeaderActionsSlot = computed(() => Boolean(slots["header-actions"]));
+    const hasHeaderContent = computed(() => Boolean(props.headerTitle || props.headerDesc));
+    const shouldRenderBuiltInHeader = computed(() => {
+      if (hasCustomHeaderSlot.value || !props.header)
+        return false;
+      if (props.closable)
+        return true;
+      return hasHeaderDisplaySlot.value || hasHeaderActionsSlot.value || hasHeaderContent.value;
+    });
+    function syncExpanded(value) {
+      if (expanded.value === value)
+        return;
+      expanded.value = value;
+    }
+    function syncAnimating(value) {
+      if (animating.value === value)
+        return;
+      animating.value = value;
+    }
+    function clearBlockedCloseWarning() {
+      if (blockedCloseTimer) {
+        clearTimeout(blockedCloseTimer);
+        blockedCloseTimer = null;
+      }
+      blockedCloseWarning.value = false;
+    }
+    function triggerBlockedCloseWarning() {
+      if (!visible.value || !props.preventAccidentalClose)
+        return;
+      if (blockedCloseTimer) {
+        clearTimeout(blockedCloseTimer);
+        blockedCloseTimer = null;
+      }
+      blockedCloseWarning.value = false;
+      if (hasWindow())
+        void cardRef.value?.offsetWidth;
+      blockedCloseWarning.value = true;
+      blockedCloseTimer = setTimeout(() => {
+        blockedCloseWarning.value = false;
+        blockedCloseTimer = null;
+      }, 720);
+    }
+    watch(
+      () => props.expanded,
+      (value) => {
+        if (typeof value === "boolean")
+          syncExpanded(value);
+      }
+    );
+    watch(
+      () => props.animating,
+      (value) => {
+        if (typeof value === "boolean")
+          syncAnimating(value);
+      }
+    );
+    watch(expanded, (value) => emit("update:expanded", value));
+    watch(animating, (value) => emit("update:animating", value));
+    const bodyScrollLocked = ref(false);
+    function clearTween() {
+      if (!tween)
+        return;
+      tween.kill();
+      tween = null;
+    }
+    function clearStackTween() {
+      if (!stackTween)
+        return;
+      stackTween.kill();
+      stackTween = null;
+    }
+    function isSameStackState(current, next) {
+      if (!current)
+        return false;
+      return Math.abs(current.y - next.y) <= STACK_STATE_EPSILON && Math.abs(current.scale - next.scale) <= STACK_STATE_EPSILON && Math.abs(current.opacity - next.opacity) <= STACK_STATE_EPSILON;
+    }
+    function resolveCardSize(card) {
+      if (!card)
+        return { width: 0, height: 0 };
+      const widthByOffset = card.offsetWidth || 0;
+      const heightByOffset = card.offsetHeight || 0;
+      if (widthByOffset > 0 && heightByOffset > 0) {
+        return {
+          width: widthByOffset,
+          height: heightByOffset
+        };
+      }
+      let widthByStyle = 0;
+      let heightByStyle = 0;
+      if (hasWindow()) {
+        const cardStyles = getComputedStyle(card);
+        widthByStyle = Number.parseFloat(cardStyles.width) || 0;
+        heightByStyle = Number.parseFloat(cardStyles.height) || 0;
+      }
+      if (widthByStyle > 0 && heightByStyle > 0) {
+        return {
+          width: widthByStyle,
+          height: heightByStyle
+        };
+      }
+      const rect = card.getBoundingClientRect();
+      return {
+        width: rect.width || 0,
+        height: rect.height || 0
+      };
+    }
+    function upsertStackEntry() {
+      if (!hasWindow()) {
+        return;
+      }
+      if (!visible.value) {
+        removeStackEntry();
+        return;
+      }
+      const size = resolveCardSize(cardRef.value);
+      const nextEntry = {
+        id: instanceId,
+        zIndex: zIndex.value,
+        openSequence: openSequence.value,
+        width: size.width,
+        height: size.height,
+        visible: true,
+        globalMask: props.globalMask,
+        maskClass: props.maskClass
+      };
+      const previousEntry = overlayStackRegistry.get(instanceId);
+      if (previousEntry && previousEntry.zIndex === nextEntry.zIndex && previousEntry.openSequence === nextEntry.openSequence && previousEntry.width === nextEntry.width && previousEntry.height === nextEntry.height && previousEntry.visible === nextEntry.visible && previousEntry.globalMask === nextEntry.globalMask && previousEntry.maskClass === nextEntry.maskClass) {
+        return;
+      }
+      overlayStackRegistry.set(instanceId, nextEntry);
+      markOverlayStackChanged();
+    }
+    function removeStackEntry() {
+      if (!overlayStackRegistry.has(instanceId))
+        return;
+      overlayStackRegistry.delete(instanceId);
+      markOverlayStackChanged();
+    }
+    function applyStackCardState(forceImmediate = false) {
+      const card = cardRef.value;
+      if (!card)
+        return;
+      if (!visible.value || !expanded.value || animating.value) {
+        clearStackTween();
+        appliedStackState = null;
+        return;
+      }
+      const { translateY, scale, opacity } = stackMeta.value;
+      const nextState = {
+        y: translateY,
+        scale,
+        opacity
+      };
+      if (!forceImmediate && isSameStackState(appliedStackState, nextState))
+        return;
+      clearStackTween();
+      if (forceImmediate || stackMeta.value.depth === 0) {
+        gsap.set(card, {
+          y: translateY,
+          scaleX: scale,
+          scaleY: scale,
+          opacity
+        });
+        appliedStackState = nextState;
+        return;
+      }
+      appliedStackState = nextState;
+      stackTween = gsap.to(card, {
+        y: translateY,
+        scaleX: scale,
+        scaleY: scale,
+        opacity,
+        duration: 0.26,
+        ease: "power2.out",
+        overwrite: "auto",
+        onComplete: () => {
+          stackTween = null;
+        }
+      });
+    }
+    function lockBodyScroll() {
+      if (!hasWindow())
+        return;
+      const body = window.document.body;
+      if (!body)
+        return;
+      const currentCount = Number.parseInt(body.dataset[bodyLockCountKey] || "0", 10);
+      if (currentCount === 0) {
+        body.dataset[bodyLockOverflowKey] = body.style.overflow || "";
+        body.dataset[bodyLockPaddingKey] = body.style.paddingRight || "";
+        const scrollbarWidth = window.innerWidth - window.document.documentElement.clientWidth;
+        body.style.overflow = "hidden";
+        if (scrollbarWidth > 0)
+          body.style.paddingRight = `${scrollbarWidth}px`;
+      }
+      body.dataset[bodyLockCountKey] = String(currentCount + 1);
+    }
+    function unlockBodyScroll() {
+      if (!hasWindow())
+        return;
+      const body = window.document.body;
+      if (!body)
+        return;
+      const currentCount = Number.parseInt(body.dataset[bodyLockCountKey] || "0", 10);
+      if (currentCount <= 0)
+        return;
+      const nextCount = currentCount - 1;
+      if (nextCount === 0) {
+        body.style.overflow = body.dataset[bodyLockOverflowKey] || "";
+        body.style.paddingRight = body.dataset[bodyLockPaddingKey] || "";
+        delete body.dataset[bodyLockCountKey];
+        delete body.dataset[bodyLockOverflowKey];
+        delete body.dataset[bodyLockPaddingKey];
+        return;
+      }
+      body.dataset[bodyLockCountKey] = String(nextCount);
+    }
+    function resolveSource() {
+      if (!hasWindow()) {
+        sourceRect.value = null;
+        sourceRadius.value = null;
+        return;
+      }
+      const source = props.source;
+      if (!source) {
+        sourceRect.value = null;
+        sourceRadius.value = props.sourceRadius ?? null;
+        return;
+      }
+      if (source instanceof HTMLElement) {
+        sourceRect.value = source.getBoundingClientRect();
+        sourceRadius.value = props.sourceRadius ?? getComputedStyle(source).borderRadius;
+        return;
+      }
+      sourceRect.value = source;
+      sourceRadius.value = props.sourceRadius ?? null;
+    }
+    function resolveTilt() {
+      if (!props.randomTilt) {
+        tilt.value = { x: 0, y: 0 };
+        return;
+      }
+      const tiltX = (Math.random() > 0.5 ? 1 : -1) * (props.rotateX + Math.random() * props.tiltRange);
+      const tiltY = (Math.random() > 0.5 ? 1 : -1) * (props.rotateY + Math.random() * props.tiltRange);
+      tilt.value = { x: tiltX, y: tiltY };
+    }
+    function applySpeedBoost() {
+      if (!tween)
+        return;
+      if (tween.progress() > props.speedBoostAt)
+        tween.timeScale(props.speedBoost);
+    }
+    function startOpenAnimation(currentRunId) {
+      const card = cardRef.value;
+      const from = sourceRect.value;
+      if (!card || !hasWindow()) {
+        syncExpanded(true);
+        syncAnimating(false);
+        emit("opened");
+        return;
+      }
+      if (!from) {
+        const visibleStackCount = getVisibleOverlayStackEntries().length;
+        const isStackPushOpen = visibleStackCount > 1;
+        if (isStackPushOpen) {
+          clearTween();
+          clearStackTween();
+          syncAnimating(true);
+          gsap.set(card, {
+            autoAlpha: 0,
+            xPercent: -50,
+            yPercent: -50,
+            x: 0,
+            y: 10,
+            scaleX: 0.985,
+            scaleY: 0.985
+          });
+          syncExpanded(true);
+          tween = gsap.to(card, {
+            autoAlpha: 1,
+            y: 0,
+            scaleX: 1,
+            scaleY: 1,
+            duration: 0.22,
+            ease: "power2.out",
+            overwrite: true,
+            onComplete: () => {
+              if (currentRunId !== runId)
+                return;
+              syncAnimating(false);
+              tween = null;
+              emit("opened");
+            }
+          });
+          return;
+        }
+        gsap.set(card, {
+          autoAlpha: 1,
+          xPercent: -50,
+          yPercent: -50,
+          x: 0,
+          y: 0,
+          scaleX: 1,
+          scaleY: 1
+        });
+        syncExpanded(true);
+        syncAnimating(false);
+        emit("opened");
+        return;
+      }
+      const fromCenterX = from.left + from.width / 2;
+      const fromCenterY = from.top + from.height / 2;
+      const viewportCenterX = window.innerWidth / 2;
+      const viewportCenterY = window.innerHeight / 2;
+      const translateX = fromCenterX - viewportCenterX;
+      const translateY = fromCenterY - viewportCenterY;
+      const to = card.getBoundingClientRect();
+      const scaleX = from.width / to.width;
+      const scaleY = from.height / to.height;
+      const targetRadius = getComputedStyle(card).borderRadius;
+      const initialRadius = sourceRadius.value || targetRadius;
+      const tiltValue = tilt.value;
+      clearTween();
+      clearStackTween();
+      syncAnimating(true);
+      gsap.set(card, {
+        xPercent: -50,
+        yPercent: -50,
+        x: translateX,
+        y: translateY,
+        scaleX,
+        scaleY,
+        rotateX: tiltValue.x,
+        rotateY: tiltValue.y,
+        transformPerspective: props.perspective,
+        borderRadius: initialRadius,
+        autoAlpha: 1
+      });
+      syncExpanded(true);
+      tween = gsap.to(card, {
+        x: 0,
+        y: 0,
+        scaleX: 1,
+        scaleY: 1,
+        rotateX: 0,
+        rotateY: 0,
+        borderRadius: targetRadius,
+        duration: props.duration / 1e3,
+        ease: props.easeOut,
+        overwrite: true,
+        onUpdate: applySpeedBoost,
+        onComplete: () => {
+          if (currentRunId !== runId)
+            return;
+          syncAnimating(false);
+          tween = null;
+          emit("opened");
+        }
+      });
+      tween.timeScale(1);
+    }
+    function startCloseAnimation(currentRunId) {
+      const card = cardRef.value;
+      const from = sourceRect.value;
+      if (!card || !hasWindow() || !from) {
+        visible.value = false;
+        syncAnimating(false);
+        removeStackEntry();
+        if (props.modelValue)
+          emit("update:modelValue", false);
+        emit("closed");
+        return;
+      }
+      const fromCenterX = from.left + from.width / 2;
+      const fromCenterY = from.top + from.height / 2;
+      const viewportCenterX = window.innerWidth / 2;
+      const viewportCenterY = window.innerHeight / 2;
+      const translateX = fromCenterX - viewportCenterX;
+      const translateY = fromCenterY - viewportCenterY;
+      const to = card.getBoundingClientRect();
+      const scaleX = from.width / to.width;
+      const scaleY = from.height / to.height;
+      const tiltValue = tilt.value;
+      clearTween();
+      clearStackTween();
+      syncAnimating(true);
+      tween = gsap.to(card, {
+        x: translateX,
+        y: translateY,
+        scaleX,
+        scaleY,
+        rotateX: tiltValue.x,
+        rotateY: tiltValue.y,
+        borderRadius: sourceRadius.value || getComputedStyle(card).borderRadius,
+        duration: props.duration / 1e3,
+        ease: props.easeIn,
+        overwrite: true,
+        onUpdate: applySpeedBoost,
+        onComplete: () => {
+          if (currentRunId !== runId)
+            return;
+          visible.value = false;
+          syncAnimating(false);
+          removeStackEntry();
+          tween = null;
+          emit("update:modelValue", false);
+          emit("closed");
+        }
+      });
+      tween.timeScale(1);
+    }
+    function requestOpen() {
+      zIndex.value = nextZIndex();
+      openSequence.value = nextOverlayOpenSequence();
+      if (!hasWindow()) {
+        visible.value = true;
+        syncExpanded(true);
+        emit("opened");
+        return;
+      }
+      visible.value = true;
+      upsertStackEntry();
+      runId += 1;
+      const currentRunId = runId;
+      resolveSource();
+      resolveTilt();
+      syncExpanded(false);
+      emit("open");
+      nextTick(() => {
+        if (currentRunId !== runId)
+          return;
+        upsertStackEntry();
+        startOpenAnimation(currentRunId);
+      });
+    }
+    function requestClose() {
+      if (!visible.value)
+        return;
+      runId += 1;
+      const currentRunId = runId;
+      syncExpanded(false);
+      emit("close");
+      nextTick(() => {
+        if (currentRunId !== runId)
+          return;
+        startCloseAnimation(currentRunId);
+      });
+    }
+    function handleMaskClick() {
+      if (props.preventAccidentalClose) {
+        triggerBlockedCloseWarning();
+        return;
+      }
+      if (!props.maskClosable)
+        return;
+      requestClose();
+    }
+    function handleBeforeUnload(event) {
+      if (!visible.value || !props.preventAccidentalClose)
+        return;
+      triggerBlockedCloseWarning();
+      event.preventDefault();
+      event.returnValue = "";
+    }
+    function bindPageExitGuard() {
+      if (!hasWindow() || pageExitGuardBound)
+        return;
+      window.addEventListener("beforeunload", handleBeforeUnload);
+      pageExitGuardBound = true;
+    }
+    function unbindPageExitGuard() {
+      if (!hasWindow() || !pageExitGuardBound)
+        return;
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+      pageExitGuardBound = false;
+    }
+    watch(
+      () => props.modelValue,
+      (value) => {
+        if (value) {
+          requestOpen();
+        } else if (visible.value) {
+          requestClose();
+        }
+      },
+      { immediate: true }
+    );
+    watch(
+      () => [
+        visible.value,
+        expanded.value,
+        animating.value,
+        zIndex.value,
+        openSequence.value,
+        props.globalMask,
+        props.maskClass,
+        localStackVersion.value
+      ],
+      () => {
+        upsertStackEntry();
+        applyStackCardState();
+      },
+      { immediate: true, flush: "post" }
+    );
+    watch(
+      cardRef,
+      () => {
+        upsertStackEntry();
+        applyStackCardState(true);
+      },
+      { flush: "post" }
+    );
+    watch(
+      visible,
+      (value) => {
+        if (value && !bodyScrollLocked.value) {
+          lockBodyScroll();
+          bodyScrollLocked.value = true;
+          return;
+        }
+        if (!value && bodyScrollLocked.value) {
+          unlockBodyScroll();
+          bodyScrollLocked.value = false;
+        }
+      },
+      { immediate: true }
+    );
+    watch(
+      [visible, () => props.preventAccidentalClose],
+      ([isVisible, preventAccidentalClose]) => {
+        if (isVisible && preventAccidentalClose) {
+          bindPageExitGuard();
+          return;
+        }
+        unbindPageExitGuard();
+        if (!isVisible)
+          clearBlockedCloseWarning();
+      },
+      { immediate: true }
+    );
+    onBeforeUnmount(() => {
+      unsubscribeStackChange();
+      clearTween();
+      clearStackTween();
+      unbindPageExitGuard();
+      clearBlockedCloseWarning();
+      removeStackEntry();
+      if (bodyScrollLocked.value) {
+        unlockBodyScroll();
+        bodyScrollLocked.value = false;
+      }
+    });
+    __expose({
+      close: requestClose
+    });
+    const slotProps = computed(() => ({
+      close: requestClose,
+      expanded: expanded.value,
+      animating: animating.value,
+      closable: props.closable,
+      headerTitle: props.headerTitle || void 0,
+      headerDesc: props.headerDesc || void 0
+    }));
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Transition, {
+        name: transitionName.value,
+        css: useMaskCssTransition.value
+      }, {
+        default: withCtx(() => [
+          visible.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(maskClassName.value),
+            style: normalizeStyle(maskStyle.value),
+            onClick: handleMaskClick
+          }, [
+            props.globalMask && stackMeta.value.isMaskOwner && stackMeta.value.stackSize <= 1 ? (openBlock(), createElementBlock("div", _hoisted_1)) : createCommentVNode("", true),
+            createElementVNode("div", {
+              ref_key: "cardRef",
+              ref: cardRef,
+              class: normalizeClass(cardClassName.value),
+              style: normalizeStyle(props.cardStyle),
+              onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+              }, ["stop"]))
+            }, [
+              createVNode(_sfc_main$1, {
+                class: "TxFlipOverlay-Surface",
+                preset: "card",
+                fake: "",
+                mode: surfaceMode.value,
+                color: surfaceColor.value,
+                opacity: surfaceOpacity.value,
+                moving: animating.value
+              }, null, 8, ["mode", "color", "opacity", "moving"]),
+              createElementVNode("div", {
+                class: normalizeClass(shellClassName.value)
+              }, [
+                hasCustomHeaderSlot.value ? renderSlot(_ctx.$slots, "header", normalizeProps(mergeProps({ key: 0 }, slotProps.value))) : shouldRenderBuiltInHeader.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+                  createElementVNode("div", _hoisted_3, [
+                    renderSlot(_ctx.$slots, "header-display", normalizeProps(guardReactiveProps(slotProps.value)), () => [
+                      props.headerTitle ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString(props.headerTitle), 1)) : createCommentVNode("", true),
+                      props.headerDesc ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString(props.headerDesc), 1)) : createCommentVNode("", true)
+                    ])
+                  ]),
+                  createElementVNode("div", _hoisted_6, [
+                    renderSlot(_ctx.$slots, "header-actions", normalizeProps(guardReactiveProps(slotProps.value))),
+                    props.closable ? renderSlot(_ctx.$slots, "header-close", normalizeProps(mergeProps({ key: 0 }, slotProps.value)), () => [
+                      createVNode(_sfc_main$2, {
+                        circle: "",
+                        class: "TxFlipOverlay-Close",
+                        "aria-label": props.closeAriaLabel,
+                        onClick: requestClose
+                      }, {
+                        default: withCtx(() => [..._cache[1] || (_cache[1] = [
+                          createElementVNode("span", {
+                            class: "i-carbon-close w-4 h-4 text-lg inline-flex",
+                            "aria-hidden": "true"
+                          }, null, -1)
+                        ])]),
+                        _: 1
+                      }, 8, ["aria-label"])
+                    ]) : createCommentVNode("", true)
+                  ])
+                ])) : createCommentVNode("", true),
+                createElementVNode("div", {
+                  class: normalizeClass(bodyClassName.value)
+                }, [
+                  renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))
+                ], 2)
+              ], 2)
+            ], 6)
+          ], 6)) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 8, ["name", "css"]);
+    };
+  }
+});
+
+export { _sfc_main as default };