@talex-touch/tuffex 0.3.3 → 0.3.4

package/dist/lib/base-anchor/src/TxBaseAnchor.vue2.js

@@ -0,0 +1,802 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+const vue$1 = require('@floating-ui/vue');
+const gsap = require('gsap');
+const env = require('../../packages/tuffex/packages/utils/env.js');
+const zIndexManager = require('../../packages/tuffex/packages/utils/z-index-manager.js');
+const TxCard = require('../../card/src/TxCard.vue.js');
+
+const _hoisted_1 = ["data-side", "data-bg"];
+const _hoisted_2 = ["data-side"];
+const _hoisted_3 = ["viewBox"];
+const _hoisted_4 = ["d"];
+const REFRACTION_CLOSE_PREPARE_MS = 180;
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "TxBaseAnchor", inheritAttrs: false },
+  __name: "TxBaseAnchor",
+  props: {
+    modelValue: { type: Boolean, default: void 0 },
+    disabled: { type: Boolean, default: false },
+    eager: { type: Boolean, default: false },
+    placement: { default: "bottom-start" },
+    offset: { default: 8 },
+    width: { default: 0 },
+    minWidth: { default: 0 },
+    maxWidth: { default: 360 },
+    maxHeight: { default: 420 },
+    unlimitedHeight: { type: Boolean, default: false },
+    matchReferenceWidth: { type: Boolean, default: false },
+    referenceClass: {},
+    duration: { default: 432 },
+    ease: { default: "back.out(2)" },
+    useCard: { type: Boolean, default: true },
+    panelVariant: { default: "plain" },
+    panelBackground: { default: "refraction" },
+    panelShadow: { default: "soft" },
+    panelRadius: { default: 18 },
+    panelPadding: { default: 10 },
+    panelCard: {},
+    surfaceMotionAdaptation: {},
+    showArrow: { type: Boolean, default: false },
+    arrowSize: { default: 10 },
+    keepAliveContent: { type: Boolean, default: false },
+    closeOnClickOutside: { type: Boolean, default: true },
+    closeOnEsc: { type: Boolean, default: true },
+    toggleOnReferenceClick: { type: Boolean, default: true }
+  },
+  emits: ["update:modelValue", "open", "close"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const attrs = vue.useAttrs();
+    const internalOpen = vue.ref(false);
+    const isUnlimitedHeight = vue.computed(() => props.unlimitedHeight || props.maxHeight <= 0);
+    const open = vue.computed({
+      get: () => typeof props.modelValue === "boolean" ? props.modelValue : internalOpen.value,
+      set: (v) => {
+        if (props.disabled && v)
+          return;
+        const current = typeof props.modelValue === "boolean" ? props.modelValue : internalOpen.value;
+        if (current === v)
+          return;
+        internalOpen.value = v;
+        emit("update:modelValue", v);
+        if (v)
+          emit("open");
+        else
+          emit("close");
+      }
+    });
+    const referenceRef = vue.ref(null);
+    const floatingRef = vue.ref(null);
+    const clipRef = vue.ref(null);
+    const contentRef = vue.ref(null);
+    const arrowRef = vue.ref(null);
+    const outlineW = vue.ref(0);
+    const outlineH = vue.ref(0);
+    const zIndex = vue.ref(zIndexManager.getZIndex());
+    const mounted = vue.ref(false);
+    const cleanupAutoUpdate = vue.ref(null);
+    const cleanupResizeObserver = vue.ref(null);
+    const lastOpenedAt = vue.ref(0);
+    const panelSurfaceMoving = vue.ref(false);
+    let lastReferenceRect = null;
+    let panelSurfaceMoveTimer = null;
+    let closePrepareTimer = null;
+    let tl = null;
+    let runId = 0;
+    const { floatingStyles, middlewareData, placement, update } = vue$1.useFloating(referenceRef, floatingRef, {
+      placement: vue.computed(() => props.placement),
+      strategy: "fixed",
+      transform: false,
+      middleware: [
+        vue$1.offset(() => props.offset),
+        vue$1.flip({ padding: 8 }),
+        vue$1.shift({ padding: 8 }),
+        vue$1.size({
+          padding: 8,
+          apply({ rects, availableHeight, elements }) {
+            const baseW = rects.reference.width;
+            const minW = Math.max(0, props.minWidth ?? 0);
+            const style = elements.floating.style;
+            style.width = "";
+            style.minWidth = "";
+            if (props.width > 0) {
+              style.width = `${props.width}px`;
+            } else if (props.matchReferenceWidth) {
+              style.width = `${Math.max(baseW, minW)}px`;
+            } else if (minW > 0) {
+              style.minWidth = `${minW}px`;
+            }
+            style.maxWidth = `${props.maxWidth}px`;
+            if (isUnlimitedHeight.value) {
+              elements.floating.style.setProperty("--tx-ba-max-height", "none");
+              return;
+            }
+            const maxH = Math.max(0, Math.min(availableHeight, props.maxHeight));
+            elements.floating.style.setProperty("--tx-ba-max-height", `${maxH}px`);
+          }
+        }),
+        vue$1.arrow({ element: arrowRef, padding: 6 })
+      ]
+    });
+    const side = vue.computed(() => placement.value?.split("-")[0] ?? "bottom");
+    const floatingClass = vue.computed(
+      () => attrs.class
+    );
+    const floatingStyle = vue.computed(() => attrs.style);
+    const floatingAttrs = vue.computed(() => {
+      const source = attrs;
+      const next = {};
+      for (const [key, value] of Object.entries(source)) {
+        if (key === "class" || key === "style")
+          continue;
+        next[key] = value;
+      }
+      return next;
+    });
+    const panelCardProps = vue.computed(() => {
+      const shouldFallbackSurface = panelSurfaceMoving.value;
+      const refractionSurfaceDefaults = props.panelBackground === "refraction" ? {
+        glassOverlayOpacity: 0.15,
+        maskOpacity: 0.78
+      } : void 0;
+      return {
+        ...refractionSurfaceDefaults ?? {},
+        ...props.panelCard ?? {},
+        variant: props.panelVariant,
+        background: props.panelBackground,
+        shadow: props.panelShadow,
+        radius: props.panelRadius,
+        padding: props.panelPadding,
+        surfaceMoving: shouldFallbackSurface
+      };
+    });
+    const arrowStyle = vue.computed(() => {
+      if (!props.showArrow || !arrowRef.value)
+        return { display: "none" };
+      const data = middlewareData.value?.arrow;
+      if (!data || data.x == null && data.y == null)
+        return { display: "none" };
+      const base = {
+        "display": "block",
+        "position": "absolute",
+        "--tx-ba-arrow-size": `${props.arrowSize ?? 10}px`
+      };
+      if (data.x != null)
+        base.left = `${data.x}px`;
+      if (data.y != null)
+        base.top = `${data.y}px`;
+      const staticSideMap = {
+        top: "bottom",
+        right: "left",
+        bottom: "top",
+        left: "right"
+      };
+      const staticSide = staticSideMap[side.value] ?? "top";
+      const half = Math.round((props.arrowSize ?? 10) / 2);
+      base[staticSide] = `-${half}px`;
+      return base;
+    });
+    function fmt(value) {
+      return Number(value.toFixed(2)).toString();
+    }
+    function syncOutlineSize() {
+      const el = contentRef.value;
+      if (!el) {
+        outlineW.value = 0;
+        outlineH.value = 0;
+        return;
+      }
+      outlineW.value = Math.max(0, el.offsetWidth);
+      outlineH.value = Math.max(0, el.offsetHeight);
+    }
+    function setupResizeObserver() {
+      cleanupResizeObserver.value?.();
+      cleanupResizeObserver.value = null;
+      if (!env.hasWindow() || !contentRef.value || typeof ResizeObserver === "undefined")
+        return;
+      const observer = new ResizeObserver(() => {
+        syncOutlineSize();
+      });
+      observer.observe(contentRef.value);
+      cleanupResizeObserver.value = () => observer.disconnect();
+    }
+    const outlinePath = vue.computed(() => {
+      if (!props.useCard)
+        return "";
+      const w = outlineW.value;
+      const h = outlineH.value;
+      if (!w || !h)
+        return "";
+      const r = Math.min(Math.max(0, props.panelRadius ?? 18), w / 2, h / 2);
+      const borderInset = 0.5;
+      const left = borderInset;
+      const top = borderInset;
+      const right = w - borderInset;
+      const bottom = h - borderInset;
+      const radius = Math.max(0, r - borderInset);
+      const topStart = left + radius;
+      const topEnd = right - radius;
+      const rightStart = top + radius;
+      const rightEnd = bottom - radius;
+      const bottomStart = left + radius;
+      const leftStart = top + radius;
+      const leftEnd = bottom - radius;
+      return [
+        `M ${fmt(topStart)} ${fmt(top)}`,
+        `L ${fmt(topEnd)} ${fmt(top)}`,
+        `Q ${fmt(right)} ${fmt(top)} ${fmt(right)} ${fmt(rightStart)}`,
+        `L ${fmt(right)} ${fmt(rightEnd)}`,
+        `Q ${fmt(right)} ${fmt(bottom)} ${fmt(topEnd)} ${fmt(bottom)}`,
+        `L ${fmt(bottomStart)} ${fmt(bottom)}`,
+        `Q ${fmt(left)} ${fmt(bottom)} ${fmt(left)} ${fmt(leftEnd)}`,
+        `L ${fmt(left)} ${fmt(leftStart)}`,
+        `Q ${fmt(left)} ${fmt(top)} ${fmt(topStart)} ${fmt(top)}`
+      ].join(" ");
+    });
+    const bouncePad = vue.computed(() => {
+      const pad = "10px";
+      switch (side.value) {
+        case "bottom":
+          return { paddingBottom: pad };
+        case "top":
+          return { paddingTop: pad };
+        case "left":
+          return { paddingLeft: pad };
+        case "right":
+          return { paddingRight: pad };
+        default:
+          return { paddingBottom: pad };
+      }
+    });
+    function getTranslate() {
+      const d = 30;
+      switch (side.value) {
+        case "bottom":
+          return { x: 0, y: -d };
+        case "top":
+          return { x: 0, y: d };
+        case "left":
+          return { x: d, y: 0 };
+        case "right":
+          return { x: -d, y: 0 };
+        default:
+          return { x: 0, y: -d };
+      }
+    }
+    function getClipPath(progress) {
+      const p = `${Math.max(0, (1 - progress) * 100)}%`;
+      switch (side.value) {
+        case "bottom":
+          return `inset(0 0 ${p} 0)`;
+        case "top":
+          return `inset(${p} 0 0 0)`;
+        case "left":
+          return `inset(0 0 0 ${p})`;
+        case "right":
+          return `inset(0 ${p} 0 0)`;
+        default:
+          return `inset(0 0 ${p} 0)`;
+      }
+    }
+    function getArrowInsetTranslate() {
+      const d = Math.max(4, Math.round((props.arrowSize ?? 10) * 0.45));
+      switch (side.value) {
+        case "bottom":
+          return { x: 0, y: d };
+        case "top":
+          return { x: 0, y: -d };
+        case "left":
+          return { x: -d, y: 0 };
+        case "right":
+          return { x: d, y: 0 };
+        default:
+          return { x: 0, y: d };
+      }
+    }
+    function clearTimeline() {
+      if (closePrepareTimer != null) {
+        clearTimeout(closePrepareTimer);
+        closePrepareTimer = null;
+      }
+      if (tl) {
+        tl.kill();
+        tl = null;
+      }
+    }
+    function clearPanelSurfaceMoveTimer() {
+      if (panelSurfaceMoveTimer == null)
+        return;
+      clearTimeout(panelSurfaceMoveTimer);
+      panelSurfaceMoveTimer = null;
+    }
+    function setPanelSurfaceMoving(value) {
+      if (!props.useCard) {
+        panelSurfaceMoving.value = false;
+        clearPanelSurfaceMoveTimer();
+        return;
+      }
+      panelSurfaceMoving.value = value;
+      if (!value)
+        clearPanelSurfaceMoveTimer();
+    }
+    function pulsePanelSurfaceMoving(duration = 96) {
+      if (!props.useCard)
+        return;
+      panelSurfaceMoving.value = true;
+      clearPanelSurfaceMoveTimer();
+      panelSurfaceMoveTimer = setTimeout(() => {
+        panelSurfaceMoving.value = false;
+        panelSurfaceMoveTimer = null;
+      }, Math.max(40, duration));
+    }
+    function settleOpenVisualStateForFollow() {
+      const clip = clipRef.value;
+      const content = contentRef.value;
+      const arrowEl = arrowRef.value;
+      if (!clip || !content || !env.hasWindow())
+        return;
+      clearTimeline();
+      if (props.panelBackground !== "refraction") {
+        pulsePanelSurfaceMoving(120);
+      }
+      clip.style.visibility = "visible";
+      clip.style.clipPath = "none";
+      clip.style.overflow = "visible";
+      clip.style.willChange = "auto";
+      gsap.set(content, { clearProps: "transform" });
+      content.style.willChange = "auto";
+      if (arrowEl)
+        gsap.set(arrowEl, { clearProps: "transform,opacity,willChange" });
+    }
+    function readReferenceRect() {
+      const el = referenceRef.value;
+      if (!el)
+        return null;
+      const rect = el.getBoundingClientRect();
+      return {
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height
+      };
+    }
+    function hasReferenceMoved() {
+      const current = readReferenceRect();
+      if (!current)
+        return false;
+      if (!lastReferenceRect) {
+        lastReferenceRect = current;
+        return false;
+      }
+      const moveThreshold = 1.5;
+      const moved = Math.abs(current.x - lastReferenceRect.x) > moveThreshold || Math.abs(current.y - lastReferenceRect.y) > moveThreshold || Math.abs(current.width - lastReferenceRect.width) > moveThreshold || Math.abs(current.height - lastReferenceRect.height) > moveThreshold;
+      lastReferenceRect = current;
+      return moved;
+    }
+    function animateOpen(currentRunId) {
+      const clip = clipRef.value;
+      const content = contentRef.value;
+      const arrowEl = arrowRef.value;
+      if (isUnlimitedHeight.value) {
+        clearTimeline();
+        if (!clip || !content) {
+          mounted.value = true;
+          setPanelSurfaceMoving(false);
+          return;
+        }
+        clip.style.visibility = "visible";
+        clip.style.clipPath = "none";
+        clip.style.overflow = "visible";
+        clip.style.willChange = "auto";
+        gsap.set(content, { clearProps: "transform" });
+        content.style.willChange = "auto";
+        if (arrowEl)
+          gsap.set(arrowEl, { clearProps: "transform,opacity,willChange" });
+        setPanelSurfaceMoving(false);
+        tl = null;
+        return;
+      }
+      if (!clip || !content || !env.hasWindow()) {
+        mounted.value = true;
+        setPanelSurfaceMoving(false);
+        return;
+      }
+      clearTimeline();
+      setPanelSurfaceMoving(true);
+      const durMs = Math.max(0, props.duration);
+      if (durMs <= 0) {
+        clip.style.visibility = "visible";
+        clip.style.clipPath = "none";
+        clip.style.overflow = "visible";
+        clip.style.willChange = "auto";
+        gsap.set(content, { clearProps: "transform" });
+        content.style.willChange = "auto";
+        if (props.showArrow && arrowEl) {
+          gsap.set(arrowEl, {
+            x: 0,
+            y: 0,
+            scale: 1,
+            opacity: 1,
+            clearProps: "willChange"
+          });
+        }
+        setPanelSurfaceMoving(false);
+        tl = null;
+        return;
+      }
+      const hiddenT = getTranslate();
+      const dur = durMs / 1e3;
+      clip.style.overflow = "hidden";
+      clip.style.visibility = "visible";
+      clip.style.clipPath = getClipPath(0);
+      clip.style.willChange = "clip-path";
+      content.style.willChange = "transform";
+      gsap.set(content, { x: hiddenT.x, y: hiddenT.y });
+      if (props.showArrow && arrowEl) {
+        const insetT = getArrowInsetTranslate();
+        gsap.set(arrowEl, {
+          x: insetT.x,
+          y: insetT.y,
+          scale: 0.72,
+          opacity: 0,
+          willChange: "transform,opacity"
+        });
+      }
+      const clipState = { progress: 0 };
+      const arrowEnterDur = Math.min(0.16, Math.max(0.09, dur * 0.28));
+      tl = gsap.timeline({
+        onComplete: () => {
+          if (currentRunId !== runId)
+            return;
+          clip.style.clipPath = "none";
+          clip.style.overflow = "visible";
+          clip.style.willChange = "auto";
+          gsap.set(content, { clearProps: "transform" });
+          content.style.willChange = "auto";
+          if (arrowEl)
+            gsap.set(arrowEl, { clearProps: "willChange" });
+          setPanelSurfaceMoving(false);
+          tl = null;
+        }
+      });
+      tl.to(clipState, {
+        progress: 1,
+        duration: dur * 0.85,
+        ease: "power2.inOut",
+        onUpdate() {
+          clip.style.clipPath = getClipPath(clipState.progress);
+        }
+      }, 0);
+      tl.to(content, {
+        x: 0,
+        y: 0,
+        duration: dur,
+        ease: props.ease
+      }, 0);
+      if (props.showArrow && arrowEl) {
+        tl.to(arrowEl, {
+          x: 0,
+          y: 0,
+          scale: 1,
+          opacity: 1,
+          duration: arrowEnterDur,
+          ease: "power2.out"
+        }, Math.max(0, dur - arrowEnterDur * 0.85));
+      }
+    }
+    function animateClose(currentRunId) {
+      const clip = clipRef.value;
+      const content = contentRef.value;
+      const arrowEl = arrowRef.value;
+      if (isUnlimitedHeight.value) {
+        clearTimeline();
+        if (!clip || !content) {
+          mounted.value = false;
+          setPanelSurfaceMoving(false);
+          return;
+        }
+        clip.style.visibility = "hidden";
+        clip.style.clipPath = "none";
+        clip.style.overflow = "hidden";
+        clip.style.willChange = "auto";
+        gsap.set(content, { clearProps: "transform" });
+        content.style.willChange = "auto";
+        if (arrowEl)
+          gsap.set(arrowEl, { clearProps: "transform,opacity,willChange" });
+        if (!props.keepAliveContent)
+          mounted.value = false;
+        setPanelSurfaceMoving(false);
+        tl = null;
+        return;
+      }
+      if (!clip || !content || !env.hasWindow()) {
+        mounted.value = false;
+        setPanelSurfaceMoving(false);
+        return;
+      }
+      clearTimeline();
+      setPanelSurfaceMoving(true);
+      const durMs = Math.max(0, props.duration * 0.45);
+      if (durMs <= 0) {
+        clip.style.visibility = "hidden";
+        clip.style.clipPath = "none";
+        clip.style.overflow = "hidden";
+        clip.style.willChange = "auto";
+        gsap.set(content, { clearProps: "transform" });
+        content.style.willChange = "auto";
+        if (arrowEl)
+          gsap.set(arrowEl, { clearProps: "transform,opacity,willChange" });
+        if (!props.keepAliveContent)
+          mounted.value = false;
+        setPanelSurfaceMoving(false);
+        tl = null;
+        return;
+      }
+      const startCloseMotion = () => {
+        if (currentRunId !== runId || open.value) {
+          return;
+        }
+        clip.style.willChange = "clip-path";
+        content.style.willChange = "transform";
+        clip.style.overflow = "hidden";
+        clip.style.clipPath = getClipPath(1);
+        const hiddenT = getTranslate();
+        const dur = durMs / 1e3;
+        const clipState = { progress: 1 };
+        const hasArrow = !!(props.showArrow && arrowEl);
+        const arrowInsetT = hasArrow ? getArrowInsetTranslate() : { x: 0, y: 0 };
+        const arrowHideDur = hasArrow ? Math.min(0.11, Math.max(0.07, dur * 0.4)) : 0;
+        const motionStart = arrowHideDur;
+        tl = gsap.timeline({
+          onComplete: () => {
+            if (currentRunId !== runId)
+              return;
+            clip.style.visibility = "hidden";
+            clip.style.clipPath = "none";
+            clip.style.willChange = "auto";
+            content.style.willChange = "auto";
+            if (arrowEl)
+              gsap.set(arrowEl, { clearProps: "transform,opacity,willChange" });
+            if (!props.keepAliveContent)
+              mounted.value = false;
+            setPanelSurfaceMoving(false);
+            tl = null;
+          }
+        });
+        if (hasArrow && arrowEl) {
+          gsap.set(arrowEl, { willChange: "transform,opacity" });
+          tl.to(arrowEl, {
+            x: arrowInsetT.x,
+            y: arrowInsetT.y,
+            scale: 0.72,
+            opacity: 0,
+            duration: arrowHideDur,
+            ease: "power2.in"
+          }, 0);
+        }
+        tl.to(content, {
+          x: hiddenT.x,
+          y: hiddenT.y,
+          duration: dur,
+          ease: "power3.in"
+        }, motionStart);
+        tl.to(clipState, {
+          progress: 0,
+          duration: dur,
+          ease: "power3.in",
+          onUpdate() {
+            clip.style.clipPath = getClipPath(clipState.progress);
+          }
+        }, motionStart);
+      };
+      if (props.panelBackground === "refraction") {
+        closePrepareTimer = setTimeout(() => {
+          closePrepareTimer = null;
+          startCloseMotion();
+        }, REFRACTION_CLOSE_PREPARE_MS);
+        return;
+      }
+      startCloseMotion();
+    }
+    function toggle() {
+      if (props.disabled)
+        return;
+      if (!open.value)
+        lastOpenedAt.value = performance.now();
+      open.value = !open.value;
+    }
+    function handleReferenceClick() {
+      if (!props.toggleOnReferenceClick)
+        return;
+      toggle();
+    }
+    function close() {
+      open.value = false;
+    }
+    __expose({
+      close,
+      toggle
+    });
+    function isEventInside(e, el) {
+      if (!el)
+        return false;
+      const anyE = e;
+      const path = typeof anyE.composedPath === "function" ? anyE.composedPath() : void 0;
+      if (path && path.length)
+        return path.includes(el);
+      const t = e.target ?? null;
+      return !!t && el.contains(t);
+    }
+    function handleOutside(e) {
+      if (!props.closeOnClickOutside)
+        return;
+      if (!open.value)
+        return;
+      if (performance.now() - lastOpenedAt.value < 60)
+        return;
+      const inRef = isEventInside(e, referenceRef.value);
+      const inFloat = isEventInside(e, floatingRef.value);
+      if (!inRef && !inFloat)
+        close();
+    }
+    function handleEsc(e) {
+      if (!props.closeOnEsc)
+        return;
+      if (e.key !== "Escape")
+        return;
+      if (!open.value)
+        return;
+      close();
+    }
+    vue.watch(
+      open,
+      async (v) => {
+        runId++;
+        const currentRunId = runId;
+        if (!v) {
+          cleanupAutoUpdate.value?.();
+          cleanupAutoUpdate.value = null;
+          cleanupResizeObserver.value?.();
+          cleanupResizeObserver.value = null;
+          lastReferenceRect = null;
+          animateClose(currentRunId);
+          return;
+        }
+        mounted.value = true;
+        zIndex.value = zIndexManager.nextZIndex();
+        lastOpenedAt.value = performance.now();
+        await vue.nextTick();
+        await update();
+        syncOutlineSize();
+        setupResizeObserver();
+        if (referenceRef.value && floatingRef.value) {
+          cleanupAutoUpdate.value?.();
+          cleanupAutoUpdate.value = vue$1.autoUpdate(
+            referenceRef.value,
+            floatingRef.value,
+            () => {
+              const referenceMoved = hasReferenceMoved();
+              update();
+              if (referenceMoved && open.value && props.panelBackground !== "refraction") {
+                pulsePanelSurfaceMoving(120);
+              }
+              if (referenceMoved && tl && open.value)
+                settleOpenVisualStateForFollow();
+            },
+            { animationFrame: true }
+          );
+        }
+        await vue.nextTick();
+        lastReferenceRect = readReferenceRect();
+        syncOutlineSize();
+        animateOpen(currentRunId);
+      },
+      { flush: "post" }
+    );
+    vue.watch(
+      () => props.disabled,
+      (disabled) => {
+        if (!disabled)
+          return;
+        open.value = false;
+      }
+    );
+    vue.onMounted(async () => {
+      document.addEventListener("pointerdown", handleOutside, true);
+      document.addEventListener("keydown", handleEsc);
+      await vue.nextTick();
+      if (referenceRef.value) {
+        await update();
+        syncOutlineSize();
+        setupResizeObserver();
+      }
+    });
+    vue.onBeforeUnmount(() => {
+      document.removeEventListener("pointerdown", handleOutside, true);
+      document.removeEventListener("keydown", handleEsc);
+      cleanupAutoUpdate.value?.();
+      cleanupAutoUpdate.value = null;
+      cleanupResizeObserver.value?.();
+      cleanupResizeObserver.value = null;
+      setPanelSurfaceMoving(false);
+      clearTimeline();
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        vue.createElementVNode("div", {
+          ref_key: "referenceRef",
+          ref: referenceRef,
+          class: vue.normalizeClass(["tx-base-anchor__reference", props.referenceClass]),
+          onClickCapture: handleReferenceClick
+        }, [
+          vue.renderSlot(_ctx.$slots, "reference", {}, void 0, true)
+        ], 34),
+        (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+          mounted.value || open.value || props.eager ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+            key: 0,
+            ref_key: "floatingRef",
+            ref: floatingRef
+          }, floatingAttrs.value, {
+            class: ["tx-base-anchor", [floatingClass.value, { "is-open": open.value, "is-unlimited-height": isUnlimitedHeight.value }]],
+            style: [floatingStyle.value, vue.unref(floatingStyles), { zIndex: zIndex.value, "--tx-ba-max-height": isUnlimitedHeight.value ? "none" : void 0 }]
+          }), [
+            props.showArrow ? (vue.openBlock(), vue.createElementBlock("span", {
+              key: 0,
+              ref_key: "arrowRef",
+              ref: arrowRef,
+              class: "tx-base-anchor__arrow",
+              "data-side": side.value,
+              "data-bg": props.panelBackground,
+              style: vue.normalizeStyle(arrowStyle.value),
+              "aria-hidden": "true"
+            }, null, 12, _hoisted_1)) : vue.createCommentVNode("", true),
+            vue.createElementVNode("div", {
+              ref_key: "clipRef",
+              ref: clipRef,
+              class: "tx-base-anchor__clip",
+              "data-side": side.value,
+              style: vue.normalizeStyle(bouncePad.value)
+            }, [
+              vue.createElementVNode("div", {
+                ref_key: "contentRef",
+                ref: contentRef,
+                class: "tx-base-anchor__content"
+              }, [
+                props.useCard ? (vue.openBlock(), vue.createBlock(TxCard.default, vue.mergeProps({
+                  key: 0,
+                  class: "tx-base-anchor__card"
+                }, panelCardProps.value), {
+                  default: vue.withCtx(() => [
+                    vue.renderSlot(_ctx.$slots, "default", { side: side.value }, void 0, true)
+                  ]),
+                  _: 3
+                }, 16)) : vue.renderSlot(_ctx.$slots, "default", {
+                  key: 1,
+                  side: side.value
+                }, void 0, true),
+                props.useCard && outlinePath.value ? (vue.openBlock(), vue.createElementBlock("svg", {
+                  key: 2,
+                  class: "tx-base-anchor__outline",
+                  viewBox: `0 0 ${outlineW.value} ${outlineH.value}`,
+                  "aria-hidden": "true"
+                }, [
+                  vue.createElementVNode("path", {
+                    class: "tx-base-anchor__outline-path",
+                    d: outlinePath.value
+                  }, null, 8, _hoisted_4)
+                ], 8, _hoisted_3)) : vue.createCommentVNode("", true)
+              ], 512)
+            ], 12, _hoisted_2)
+          ], 16)) : vue.createCommentVNode("", true)
+        ]))
+      ], 64);
+    };
+  }
+});
+
+exports.default = _sfc_main;