@leavepulse/ui 0.77.2 → 0.78.0

package/dist/chunks/{LpToaster-IwTXjbbU.js → LpToaster-QFj0P-5m.js}

@@ -4,10 +4,11 @@ import { prefersReducedMotion } from "../composables/easing.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { useToast } from "../composables/useToast.js";
 import { CLOSE_ICON } from "../components/dropdown.js";
-import { _ as _sfc_main$2 } from "./LpCopyButton-xF7wFVoU.js";
-import { _ as _sfc_main$1 } from "./LpIcon--5WSb3jJ.js";
+import { _ as _sfc_main$2 } from "./LpCopyButton-7EOSIuwa.js";
+import { _ as _sfc_main$1 } from "./LpIcon-C6JpQ5td.js";
 import { toneLook } from "../components/tone.js";
-import { usePortalTarget } from "../composables/useView.js";
+import { useView, viewDocument, usePortalTarget, viewWindow } from "../composables/useView.js";
+import { nodeWindow } from "../composables/realm.js";
 const _hoisted_1 = { class: "flex items-start gap-3 p-3.5" };
 const _hoisted_2 = { class: "flex min-w-0 flex-1 flex-col gap-0.5" };
 const _hoisted_3 = ["disabled", "aria-busy", "onClick"];
@@ -28,7 +29,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return [...root.querySelectorAll("li[data-state]")];
     }
     function slide(root) {
-      const reduce = prefersReducedMotion();
+      const reduce = prefersReducedMotion(nodeWindow(root));
       const height = root.offsetHeight;
       for (const el of toastsIn(root)) {
         const before = tops.get(el);
@@ -42,12 +43,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     const viewportId = useId();
+    const view = useView();
     onMounted(
       () => nextTick(() => {
-        const root = document.querySelector(`[data-lp-toasts="${viewportId}"]`);
-        if (!root || typeof MutationObserver === "undefined") return;
+        const root = viewDocument(view.value).querySelector(`[data-lp-toasts="${viewportId}"]`);
+        if (!root) return;
         for (const el of toastsIn(root)) tops.set(el, el.offsetTop - root.offsetHeight);
-        observer = new MutationObserver(() => slide(root));
+        observer = new (nodeWindow(root)).MutationObserver(() => slide(root));
         observer.observe(root, { childList: true, subtree: true });
       })
     );
@@ -129,7 +131,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const copyable = (t) => t.variant === "error" || t.variant === "warning";
     const toastText = (t) => () => [t.title, t.message, t.details, t.context].filter(Boolean).join("\n");
     function selecting() {
-      return Boolean(window.getSelection()?.toString());
+      return Boolean(viewWindow(view.value).getSelection()?.toString());
     }
     function runClick(t) {
       if (swiped === tag(t) || selecting()) return;

package/dist/chunks/{LpTooltip-BcBvIx4z.js → LpTooltip-BJf3lZMq.js}

@@ -1,9 +1,10 @@
 import { defineComponent, ref, watch, onBeforeUnmount, openBlock, createBlock, resolveDynamicComponent, unref, normalizeProps, guardReactiveProps, withCtx, createVNode, renderSlot, normalizeStyle, normalizeClass, createElementVNode, createTextVNode, toDisplayString } from "vue";
+import { clamp } from "../composables/clamp.js";
 import { injectTooltipProviderContext, TooltipProvider, TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent } from "reka-ui";
 import { springStep, springSettled } from "../composables/usePillTransition.js";
 import { PANEL_SURFACE, TOOLTIP_ANIM } from "../components/dropdown.js";
 import { prefersReducedMotion } from "../composables/easing.js";
-import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
+import { useView, viewWindow, usePortalTarget, useOutsideGuard } from "../composables/useView.js";
 import '../assets/LpTooltip-B61SYd4K.css';const EDGE = 8;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpTooltip",
@@ -24,20 +25,37 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const target = { x: 0, y: 0 };
     const offset = ref({ x: 0, y: 0 });
     const tipBody = ref(null);
-    function inView(x) {
+    function inView(x, y) {
       const panel = tipBody.value?.parentElement;
-      if (!panel) return x;
+      if (!panel) return { x, y };
       const rect = panel.getBoundingClientRect();
-      const placed = rect.left - offset.value.x;
-      const width = panel.ownerDocument.defaultView?.innerWidth ?? window.innerWidth;
+      const win = panel.ownerDocument.defaultView ?? window;
+      return {
+        x: withinRoom(x, rect.left - offset.value.x, rect.width, win.innerWidth),
+        y: withinRoom(y, rect.top - offset.value.y, rect.height, win.innerHeight)
+      };
+    }
+    function withinRoom(value, placed, size, room) {
       const min = EDGE - placed;
-      const max = width - EDGE - rect.width - placed;
-      return max < min ? x : Math.min(max, Math.max(min, x));
+      const max = room - EDGE - size - placed;
+      return max < min ? value : clamp(value, min, max);
     }
     let sx = { value: 0, velocity: 0 };
     let sy = { value: 0, velocity: 0 };
     let frame = 0;
     let lastFrame = 0;
+    let pointer = null;
+    function stopSpring() {
+      if (frame) cancelAnimationFrame(frame);
+      frame = 0;
+      lastFrame = 0;
+    }
+    function jumpToTarget() {
+      stopSpring();
+      offset.value = { x: target.x, y: target.y };
+      sx = { value: target.x, velocity: 0 };
+      sy = { value: target.y, velocity: 0 };
+    }
     const settle = (now) => {
       const dt = lastFrame ? (now - lastFrame) / 1e3 : 1 / 60;
       lastFrame = now;
@@ -58,30 +76,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!props.followCursor) return;
       const el = e.currentTarget;
       if (!el) return;
+      pointer = { el, x: e.clientX, y: e.clientY };
+      follow();
+    };
+    function follow() {
+      if (!pointer) return;
+      const { el, x: clientX, y: clientY } = pointer;
       const rect = el.getBoundingClientRect();
       const halfX = props.side === "left" || props.side === "right" ? rect.width / 2 : 0;
       const dirX = props.side === "right" ? -1 : 1;
-      target.x = e.clientX - (rect.left + rect.width / 2) + halfX * dirX;
+      target.x = clientX - (rect.left + rect.width / 2) + halfX * dirX;
       const half = props.side === "top" || props.side === "bottom" ? rect.height / 2 : 0;
       const dir = props.side === "bottom" ? -1 : 1;
-      target.y = e.clientY - (rect.top + rect.height / 2) + half * dir;
-      target.x = inView(target.x);
+      target.y = clientY - (rect.top + rect.height / 2) + half * dir;
+      Object.assign(target, inView(target.x, target.y));
       if (prefersReducedMotion()) {
-        offset.value = { x: target.x, y: target.y };
+        jumpToTarget();
         return;
       }
       if (!frame) frame = requestAnimationFrame(settle);
-    };
+    }
     const open = ref(false);
     const wanted = ref(false);
     const onOpenChange = (next) => {
       wanted.value = next;
       open.value = next && !props.disabled;
       if (!open.value || !props.followCursor) return;
-      offset.value = { x: target.x, y: target.y };
-      sx = { value: target.x, velocity: 0 };
-      sy = { value: target.y, velocity: 0 };
-      lastFrame = 0;
+      jumpToTarget();
     };
     watch(
       () => props.disabled,
@@ -90,9 +111,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         else if (wanted.value) open.value = true;
       }
     );
-    onBeforeUnmount(() => {
-      if (frame) cancelAnimationFrame(frame);
-    });
+    const view = useView();
+    watch(
+      () => open.value && props.followCursor,
+      (following, _, onCleanup) => {
+        if (!following) {
+          stopSpring();
+          return;
+        }
+        const win = viewWindow(view.value);
+        win.addEventListener("resize", follow);
+        onCleanup(() => win.removeEventListener("resize", follow));
+      }
+    );
+    onBeforeUnmount(stopSpring);
     const portalTo = usePortalTarget();
     const guardOutside = useOutsideGuard();
     return (_ctx, _cache) => {