@leavepulse/ui 0.56.0 → 0.57.0

package/dist/chunks/{LpAppShell-BEGjSqFl.js → LpAppShell-Bl1Ch68N.js}

@@ -4,7 +4,7 @@ import { _ as _sfc_main$2 } from "./LpButton-BdfZFNqi.js";
 import { _ as _sfc_main$3 } from "./LpIcon-DYtaid0K.js";
 import { _ as _sfc_main$5 } from "./LpScrollArea-Hz3-JWUG.js";
 import { _ as _sfc_main$4 } from "./LpShift-DXNsauQZ.js";
-import { _ as _sfc_main$1 } from "./LpSidebar-C2oolgwy.js";
+import { _ as _sfc_main$1 } from "./LpSidebar-hZ8D1cVr.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = ["href"];
 const _hoisted_2 = { class: "flex min-w-0 flex-1 flex-col" };

package/dist/chunks/{LpDateRangePicker-Drd7EbIz.js → LpDateRangePicker-CxV5jW7p.js}

@@ -1,9 +1,10 @@
-import { defineComponent, ref, computed, onMounted, onBeforeUnmount, useAttrs, openBlock, createElementBlock, normalizeStyle, unref, normalizeClass, createVNode, withCtx, createElementVNode, mergeProps, createCommentVNode, Fragment, renderList, toDisplayString } from "vue";
+import { defineComponent, ref, computed, useAttrs, openBlock, createElementBlock, normalizeStyle, unref, normalizeClass, createVNode, withCtx, createElementVNode, mergeProps, createCommentVNode, Fragment, renderList, toDisplayString } from "vue";
 import { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent } from "reka-ui";
 import { useFieldControl } from "../composables/useField.js";
 import { useLocale } from "../composables/useLocale.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { mergeClass } from "../composables/useMergedClass.js";
+import { useMediaQuery } from "../composables/useMediaQuery.js";
 import { normalizeRange, formatRange, defaultRangePresets, sameRange, clampRange } from "../components/dateRange.js";
 import { POPOVER_PANEL } from "../components/dropdown.js";
 import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
@@ -75,17 +76,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function presetFits(preset) {
       return !!clampRange(preset.range(), props.min, props.max);
     }
-    const wide = ref(false);
-    let query;
-    const onQuery = () => {
-      wide.value = !!query?.matches;
-    };
-    onMounted(() => {
-      query = window.matchMedia("(min-width: 640px)");
-      onQuery();
-      query.addEventListener("change", onQuery);
-    });
-    onBeforeUnmount(() => query?.removeEventListener("change", onQuery));
+    const wide = useMediaQuery("(min-width: 640px)");
     const shellSize = {
       sm: "h-(--size-control-sm) text-xs",
       md: "h-(--size-control-md) text-sm",
@@ -175,7 +166,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       "is-disabled": __props.isDisabled,
                       "is-date-unavailable": __props.isDateUnavailable,
                       "maximum-days": __props.maximumDays,
-                      months: wide.value ? 2 : 1,
+                      months: unref(wide) ? 2 : 1,
                       locale: unref(locale),
                       class: "border-0 bg-transparent",
                       "onUpdate:modelValue": pick

package/dist/chunks/{LpDrawer-CBFVD624.js → LpDrawer-D9lLOC0C.js}

@@ -1,6 +1,7 @@
 import { ref, defineComponent, computed, watch, onBeforeUnmount, useSlots, openBlock, createElementBlock, Fragment, withDirectives, createElementVNode, normalizeStyle, unref, normalizeClass, vShow, toDisplayString, createCommentVNode, renderSlot, createVNode, withCtx, mergeProps, createBlock, createTextVNode } from "vue";
 import { DrawerRoot, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerHandle, DrawerDescription, DrawerClose } from "vaul-vue";
 import { CLOSE_ICON } from "../components/dropdown.js";
+import { prefersReducedMotion } from "../composables/easing.js";
 import { useGlass } from "../composables/useGlass.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
@@ -169,9 +170,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     let track = null;
     const owner = /* @__PURE__ */ Symbol("edge-pull");
-    function reducedMotion() {
-      return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
-    }
     function scrollsWithPull(target) {
       let el = target instanceof Element ? target : null;
       const pullsRight = dir.value === "left";
@@ -246,7 +244,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 peek.value = 0;
               }, 60)
             );
-          }, reducedMotion() ? 0 : 180)
+          }, prefersReducedMotion() ? 0 : 180)
         );
       } else {
         peek.value = 0;
@@ -287,7 +285,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const axis = dir.value === "right" ? off : -off;
       return {
         transform: `translateX(${axis}%)`,
-        transition: peeking.value || reducedMotion() ? "none" : "transform 0.18s cubic-bezier(0.32, 0.72, 0, 1)",
+        transition: peeking.value || prefersReducedMotion() ? "none" : "transform 0.18s cubic-bezier(0.32, 0.72, 0, 1)",
         pointerEvents: "none"
       };
     });
@@ -296,7 +294,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         __props.edgeOpen && isHorizontal.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           withDirectives(createElementVNode("div", {
             class: normalizeClass(["lp-scrim pointer-events-none fixed inset-0", { "lp-scrim--light": unref(frosted), "lp-scrim--nested": unref(layer).nested }]),
-            style: normalizeStyle({ zIndex: unref(layer).scrim, opacity: peek.value, transition: peeking.value || reducedMotion() ? "none" : "opacity 0.18s ease-out" })
+            style: normalizeStyle({ zIndex: unref(layer).scrim, opacity: peek.value, transition: peeking.value || unref(prefersReducedMotion)() ? "none" : "opacity 0.18s ease-out" })
           }, null, 6), [
             [vShow, peeking.value || peek.value > 0]
           ]),

package/dist/chunks/LpHintLayer-CI1oZ9Pd.js

@@ -0,0 +1,154 @@
+import { defineComponent, computed, ref, shallowRef, watch, onMounted, onBeforeUnmount, openBlock, createBlock, Teleport, createElementBlock, Fragment, renderList, unref, normalizeStyle, createElementVNode, createVNode, withCtx, createCommentVNode, normalizeClass, toDisplayString, createTextVNode } from "vue";
+import { PopoverRoot, PopoverAnchor, PopoverPortal, PopoverContent } from "reka-ui";
+import { hints } from "../composables/useHints.js";
+import { useLabels } from "../composables/useLpConfig.js";
+import { PANEL_SURFACE, POPOVER_ANIM } from "../components/dropdown.js";
+import { _ as _sfc_main$1 } from "./LpButton-BdfZFNqi.js";
+const _hoisted_1 = ["aria-label", "onPointerenter", "onFocus", "onClick"];
+const _hoisted_2 = { class: "flex items-center gap-2 font-medium" };
+const _hoisted_3 = { class: "rounded-full bg-brand/15 px-1.5 text-[11px] text-brand" };
+const _hoisted_4 = {
+  key: 0,
+  class: "mt-1.5 text-muted"
+};
+const _hoisted_5 = { class: "mt-3 flex justify-end" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpHintLayer",
+  props: {
+    fresh: {},
+    notes: {},
+    limit: { default: 3 },
+    labels: {}
+  },
+  emits: ["read"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const DEFAULT_LABELS = { gotIt: "Got it", badge: "New" };
+    const labels = useLabels("hintLayer", DEFAULT_LABELS, () => props.labels);
+    const OPEN_DELAY_MS = 350;
+    const shown = computed(() => props.fresh.filter((id) => hints.present(id) && props.notes[id]).slice(0, props.limit));
+    const spots = ref([]);
+    const openId = ref(null);
+    const anchor = shallowRef(null);
+    let frame = 0;
+    let timer;
+    function place() {
+      spots.value = shown.value.flatMap((id) => {
+        const el = hints.element(id);
+        if (!el) return [];
+        const r = el.getBoundingClientRect();
+        return r.width || r.height ? [{ id, x: r.right, y: r.top }] : [];
+      });
+      frame = shown.value.length ? requestAnimationFrame(place) : 0;
+    }
+    watch(
+      shown,
+      (ids) => {
+        if (ids.length && !frame) frame = requestAnimationFrame(place);
+        if (openId.value && !ids.includes(openId.value)) openId.value = null;
+      },
+      { immediate: true }
+    );
+    function reveal(id) {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        if (!shown.value.includes(id)) return;
+        anchor.value = hints.element(id);
+        openId.value = anchor.value ? id : null;
+      }, OPEN_DELAY_MS);
+    }
+    function read() {
+      const id = openId.value;
+      openId.value = null;
+      if (id) emit("read", id);
+    }
+    let off = [];
+    onMounted(() => {
+      off = [
+        hints.on("hover", (id) => {
+          if (shown.value.includes(id)) reveal(id);
+        }),
+        hints.on("used", (id) => {
+          if (!shown.value.includes(id)) return;
+          clearTimeout(timer);
+          if (openId.value === id) openId.value = null;
+          emit("read", id);
+        })
+      ];
+    });
+    onBeforeUnmount(() => {
+      cancelAnimationFrame(frame);
+      clearTimeout(timer);
+      for (const stop of off) stop();
+    });
+    const note = computed(() => openId.value ? props.notes[openId.value] : void 0);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Teleport, { to: "body" }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(spots.value, (spot) => {
+          return openBlock(), createElementBlock("button", {
+            key: spot.id,
+            type: "button",
+            class: "fixed z-(--z-popover) -translate-x-1/2 -translate-y-1/2 rounded-full p-1",
+            style: normalizeStyle({ left: `${spot.x}px`, top: `${spot.y}px` }),
+            "aria-label": `${unref(labels).badge}: ${__props.notes[spot.id]?.title ?? ""}`,
+            onPointerenter: ($event) => reveal(spot.id),
+            onFocus: ($event) => reveal(spot.id),
+            onClick: ($event) => reveal(spot.id)
+          }, [..._cache[1] || (_cache[1] = [
+            createElementVNode("span", { class: "relative flex size-2" }, [
+              createElementVNode("span", { class: "absolute inline-flex size-full animate-ping rounded-full bg-brand opacity-60 motion-reduce:animate-none" }),
+              createElementVNode("span", { class: "relative inline-flex size-2 rounded-full bg-brand ring-2 ring-surface" })
+            ], -1)
+          ])], 44, _hoisted_1);
+        }), 128)),
+        createVNode(unref(PopoverRoot), {
+          open: !!openId.value,
+          "onUpdate:open": _cache[0] || (_cache[0] = (value) => !value && (openId.value = null))
+        }, {
+          default: withCtx(() => [
+            anchor.value ? (openBlock(), createBlock(unref(PopoverAnchor), {
+              key: 0,
+              reference: anchor.value
+            }, null, 8, ["reference"])) : createCommentVNode("", true),
+            createVNode(unref(PopoverPortal), null, {
+              default: withCtx(() => [
+                createVNode(unref(PopoverContent), {
+                  side: "bottom",
+                  "side-offset": 8,
+                  "collision-padding": 8,
+                  class: normalizeClass([unref(PANEL_SURFACE), unref(POPOVER_ANIM), "z-(--z-popover) w-72 rounded-card p-3 text-sm text-ink outline-none"])
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("p", _hoisted_2, [
+                      createElementVNode("span", _hoisted_3, toDisplayString(unref(labels).badge), 1),
+                      createTextVNode(" " + toDisplayString(note.value?.title), 1)
+                    ]),
+                    note.value?.text ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString(note.value.text), 1)) : createCommentVNode("", true),
+                    createElementVNode("div", _hoisted_5, [
+                      createVNode(_sfc_main$1, {
+                        size: "sm",
+                        onClick: read
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(unref(labels).gotIt), 1)
+                        ]),
+                        _: 1
+                      })
+                    ])
+                  ]),
+                  _: 1
+                }, 8, ["class"])
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["open"])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpModalNav-DXBilXr0.js → LpModalNav-DXyAyhQl.js}

@@ -4,7 +4,7 @@ import { useLabels } from "../composables/useLpConfig.js";
 import { _ as _sfc_main$2 } from "./LpButton-BdfZFNqi.js";
 import { _ as _sfc_main$3 } from "./LpIcon-DYtaid0K.js";
 import { _ as _sfc_main$1 } from "./LpModal-JNa3B_Lr.js";
-import { _ as _sfc_main$4 } from "./LpSidebar-C2oolgwy.js";
+import { _ as _sfc_main$4 } from "./LpSidebar-hZ8D1cVr.js";
 const _hoisted_1 = { class: "flex items-center gap-2" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpModalNav",

package/dist/chunks/{LpPie-B7ti5qCH.js → LpPie-CXka8Jvx.js}

@@ -7,7 +7,7 @@ import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
 import { _ as _sfc_main$4 } from "./LpNumberFlow-z4WPZcZu.js";
 import { _ as _sfc_main$5 } from "./LpRollingText-DB7upf-5.js";
 import { _ as _sfc_main$6 } from "./LpShift-DXNsauQZ.js";
-import { _ as _sfc_main$3 } from "./LpTooltip-CXVKcOXT.js";
+import { _ as _sfc_main$3 } from "./LpTooltip-suFCM34F.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { useLabels } from "../composables/useLpConfig.js";
 const _hoisted_1 = {

package/dist/chunks/{LpSidebar-C2oolgwy.js → LpSidebar-hZ8D1cVr.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, ref, useId, openBlock, createElementBlock, Fragment, createElementVNode, mergeProps, unref, normalizeClass, renderSlot, createCommentVNode, createBlock, createVNode, createSlots, withCtx, normalizeProps, guardReactiveProps } from "vue";
 import { useLabels } from "../composables/useLpConfig.js";
-import { _ as _sfc_main$3 } from "./LpDrawer-CBFVD624.js";
+import { _ as _sfc_main$3 } from "./LpDrawer-D9lLOC0C.js";
 import { _ as _sfc_main$1 } from "./LpInput-D-YGQbEv.js";
 import { _ as _sfc_main$2 } from "./LpSidebarNav-C9dHu-2b.js";
 const _hoisted_1 = ["aria-label"];

package/dist/chunks/{LpTableOfContents-BUcAfGPQ.js → LpTableOfContents-DYuqkByy.js}

@@ -1,6 +1,7 @@
 import { defineComponent, computed, ref, useId, onMounted, watch, onBeforeUnmount, openBlock, createElementBlock, createElementVNode, toDisplayString, Fragment, renderList, normalizeStyle, normalizeClass, createBlock, unref, createCommentVNode, createTextVNode } from "vue";
 import { Motion } from "motion-v";
 import { useLabels } from "../composables/useLpConfig.js";
+import { scrollParent } from "../composables/scroll.js";
 import { usePillTransition } from "../composables/usePillTransition.js";
 const _hoisted_1 = ["aria-label"];
 const _hoisted_2 = { class: "mb-2.5 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted" };
@@ -63,18 +64,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       rafId = null;
       safetyTimer = null;
     }
-    function scrollerOf(el) {
-      for (let node = el.parentElement; node; node = node.parentElement) {
-        const { overflowY } = getComputedStyle(node);
-        if (/(auto|scroll|overlay)/.test(overflowY) && node.scrollHeight > node.clientHeight) return node;
-      }
-      return null;
-    }
     function suppressSpyUntilScrollEnds(target) {
       spySuppressed = true;
       if (rafId != null) cancelAnimationFrame(rafId);
       if (safetyTimer != null) clearTimeout(safetyTimer);
-      const scroller = scrollerOf(target);
+      const scroller = scrollParent(target);
       const position = () => scroller ? scroller.scrollTop : window.scrollY;
       let last = position();
       const tick = () => {

package/dist/chunks/{LpTooltip-CXVKcOXT.js → LpTooltip-suFCM34F.js}

@@ -2,6 +2,7 @@ import { defineComponent, ref, watch, onBeforeUnmount, openBlock, createBlock, r
 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 '../assets/LpTooltip-B61SYd4K.css';const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpTooltip",
   props: {
@@ -18,7 +19,6 @@ import '../assets/LpTooltip-B61SYd4K.css';const _sfc_main = /* @__PURE__ */ defi
     const props = __props;
     const shared = injectTooltipProviderContext(null);
     const PassThrough = (_, { slots }) => slots.default?.();
-    const reducedMotion = () => typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
     const target = { x: 0, y: 0 };
     const offset = ref({ x: 0, y: 0 });
     let sx = { value: 0, velocity: 0 };
@@ -52,7 +52,7 @@ import '../assets/LpTooltip-B61SYd4K.css';const _sfc_main = /* @__PURE__ */ defi
       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;
-      if (reducedMotion()) {
+      if (prefersReducedMotion()) {
         offset.value = { x: target.x, y: target.y };
         return;
       }

package/dist/chunks/LpTour-C1TC2GyY.js

@@ -0,0 +1,315 @@
+import { defineComponent, useModel, computed, shallowRef, ref, watch, onBeforeUnmount, openBlock, createBlock, Teleport, createElementBlock, withModifiers, Fragment, renderList, normalizeStyle, normalizeClass, createCommentVNode, unref, withCtx, createVNode, renderSlot, mergeModels, nextTick } from "vue";
+import { PopoverRoot, PopoverAnchor, PopoverPortal, PopoverContent } from "reka-ui";
+import { prefersReducedMotion } from "../composables/easing.js";
+import { hints } from "../composables/useHints.js";
+import { useHotkeys } from "../composables/useHotkeys.js";
+import { useLabels } from "../composables/useLpConfig.js";
+import { useMediaQuery } from "../composables/useMediaQuery.js";
+import { scrollToElement } from "../composables/scroll.js";
+import { PANEL_SURFACE } from "../components/dropdown.js";
+import { _ as _sfc_main$1 } from "./TourCard-BQS3ztqj.js";
+import { holeOf, panelsAround } from "../components/tour.js";
+const _hoisted_1 = ["aria-label"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpTour",
+  props: /* @__PURE__ */ mergeModels({
+    steps: {},
+    padding: { default: 6 },
+    labels: {}
+  }, {
+    "open": { type: Boolean, ...{ default: false } },
+    "openModifiers": {},
+    "step": { default: 0 },
+    "stepModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["finish", "dismiss"], ["update:open", "update:step"]),
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const open = useModel(__props, "open");
+    const index = useModel(__props, "step");
+    const DEFAULT_LABELS = {
+      next: "Next",
+      back: "Back",
+      done: "Done",
+      close: "Close tour",
+      progress: "{n} of {total}",
+      perform: "Do it for me",
+      tryIt: "Try it: press the highlighted control."
+    };
+    const labels = useLabels("tour", DEFAULT_LABELS, () => props.labels);
+    const WAIT_MS = 800;
+    const TRY_SETTLE_MS = 120;
+    const wide = useMediaQuery("(min-width: 640px)");
+    const step = computed(() => props.steps[index.value]);
+    const target = shallowRef(null);
+    const box = ref(null);
+    const viewport = ref({ width: 0, height: 0 });
+    const ready = ref(false);
+    const cleanups = [];
+    const leaving = [];
+    let frame = 0;
+    let token = 0;
+    let direction = 1;
+    const hole = computed(() => box.value ? holeOf(box.value, props.padding, viewport.value) : null);
+    const panels = computed(
+      () => hole.value ? panelsAround(hole.value, viewport.value) : [{ x: 0, y: 0, width: viewport.value.width, height: viewport.value.height }]
+    );
+    const reference = {
+      getBoundingClientRect: () => {
+        const h = hole.value;
+        return h ? new DOMRect(h.x, h.y, h.width, h.height) : new DOMRect(viewport.value.width / 2, viewport.value.height / 2, 0, 0);
+      }
+    };
+    const last = computed(() => index.value >= props.steps.length - 1);
+    const progress = computed(() => labels.value.progress.replace("{n}", String(index.value + 1)).replace("{total}", String(props.steps.length)));
+    const smooth = () => !prefersReducedMotion();
+    function resolve(raw) {
+      if (!raw) return null;
+      if (typeof raw === "function") return raw();
+      if (typeof raw !== "string") return raw.isConnected ? raw : null;
+      return hints.element(raw) ?? document.querySelector(raw);
+    }
+    function waitFor(raw, mine) {
+      const started = performance.now();
+      return new Promise((done) => {
+        const tick = () => {
+          if (mine !== token) return done(null);
+          const el = resolve(raw);
+          if (el && el.getClientRects().length) return done(el);
+          if (performance.now() - started > WAIT_MS) return done(null);
+          requestAnimationFrame(tick);
+        };
+        tick();
+      });
+    }
+    function measure() {
+      viewport.value = { width: window.innerWidth, height: window.innerHeight };
+      const el = target.value;
+      if (!el || !el.isConnected) {
+        box.value = null;
+        return;
+      }
+      const r = el.getBoundingClientRect();
+      const prev = box.value;
+      if (!prev || prev.x !== r.x || prev.y !== r.y || prev.width !== r.width || prev.height !== r.height) {
+        box.value = { x: r.x, y: r.y, width: r.width, height: r.height };
+      }
+    }
+    function track() {
+      measure();
+      frame = requestAnimationFrame(track);
+    }
+    async function show() {
+      const mine = ++token;
+      ready.value = false;
+      leave();
+      const current = step.value;
+      if (!current) return;
+      await current.enter?.({ onLeave: (fn) => leaving.push(fn), onEnd: (fn) => cleanups.push(fn) });
+      if (mine !== token) return;
+      if (!current.target) {
+        target.value = null;
+        measure();
+        ready.value = true;
+        return;
+      }
+      const el = current.enter ? await waitFor(current.target, mine) : resolve(current.target);
+      if (mine !== token) return;
+      if (!el || !el.getClientRects().length) return skip();
+      target.value = el;
+      scrollToElement(el, { block: wide.value ? "nearest" : "center", behavior: smooth() ? "smooth" : "auto", margin: 48 });
+      await nextTick();
+      measure();
+      ready.value = true;
+    }
+    function skip() {
+      const nextIndex = index.value + direction;
+      if (nextIndex < 0 || nextIndex >= props.steps.length) return direction > 0 ? finish() : show();
+      index.value = nextIndex;
+    }
+    function next() {
+      direction = 1;
+      if (last.value) return finish();
+      index.value += 1;
+    }
+    function back() {
+      if (index.value === 0) return;
+      direction = -1;
+      index.value -= 1;
+    }
+    function forward() {
+      if (!step.value?.try) next();
+    }
+    async function perform() {
+      await step.value?.perform?.();
+      setTimeout(next, TRY_SETTLE_MS);
+    }
+    function leave() {
+      for (const cleanup of leaving.splice(0).reverse()) cleanup();
+    }
+    function end() {
+      token++;
+      leave();
+      cancelAnimationFrame(frame);
+      frame = 0;
+      target.value = null;
+      box.value = null;
+      for (const cleanup of cleanups.splice(0).reverse()) cleanup();
+    }
+    function finish() {
+      open.value = false;
+      emit("finish");
+    }
+    function dismiss() {
+      const at = index.value;
+      open.value = false;
+      emit("dismiss", at);
+    }
+    function onTargetClick(event) {
+      if (!step.value?.try || !target.value) return;
+      if (event.target instanceof Node && target.value.contains(event.target)) setTimeout(next, TRY_SETTLE_MS);
+    }
+    watch(
+      open,
+      (value) => {
+        if (value) {
+          direction = 1;
+          document.addEventListener("click", onTargetClick, true);
+          frame ||= requestAnimationFrame(track);
+          void show();
+        } else {
+          document.removeEventListener("click", onTargetClick, true);
+          end();
+        }
+      },
+      { immediate: true }
+    );
+    watch(index, () => {
+      if (open.value) void show();
+    });
+    onBeforeUnmount(() => {
+      document.removeEventListener("click", onTargetClick, true);
+      if (open.value) end();
+    });
+    useHotkeys(
+      () => [
+        { key: "Escape", handler: dismiss, overLayers: true, allowInInput: true },
+        { key: "ArrowRight", handler: forward, overLayers: true },
+        { key: "Enter", handler: forward, overLayers: true },
+        { key: "ArrowLeft", handler: back, overLayers: true }
+      ],
+      { enabled: open, priority: 100 }
+    );
+    const CARD = `${PANEL_SURFACE} rounded-card w-80 max-w-[calc(100vw-24px)] p-4 text-sm text-ink outline-none`;
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Teleport, { to: "body" }, [
+        open.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "lp-tour pointer-events-none fixed inset-0 z-(--z-tour)",
+          onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {
+          }, ["stop"]))
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(panels.value, (panel, i) => {
+            return openBlock(), createElementBlock("div", {
+              key: i,
+              class: "lp-scrim pointer-events-auto absolute left-0 top-0 transition-[transform,width,height] duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none",
+              style: normalizeStyle({ transform: `translate(${panel.x}px, ${panel.y}px)`, width: `${panel.width}px`, height: `${panel.height}px` })
+            }, null, 4);
+          }), 128)),
+          hole.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(["absolute left-0 top-0 rounded-control ring-2 ring-brand transition-[transform,width,height] duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none", step.value?.try ? "pointer-events-none animate-pulse" : "pointer-events-auto"]),
+            style: normalizeStyle({ transform: `translate(${hole.value.x}px, ${hole.value.y}px)`, width: `${hole.value.width}px`, height: `${hole.value.height}px` })
+          }, null, 6)) : createCommentVNode("", true)
+        ], 32)) : createCommentVNode("", true),
+        open.value && unref(wide) ? (openBlock(), createBlock(unref(PopoverRoot), {
+          key: 1,
+          open: ready.value
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(PopoverAnchor), { reference }),
+            createVNode(unref(PopoverPortal), null, {
+              default: withCtx(() => [
+                createVNode(unref(PopoverContent), {
+                  side: step.value?.side ?? "bottom",
+                  "side-offset": 12,
+                  "collision-padding": 12,
+                  "update-position-strategy": "always",
+                  "trap-focus": false,
+                  class: normalizeClass([CARD, "z-[calc(var(--z-tour)+1)] data-[state=open]:animate-[popover-in_var(--duration-medium)_var(--ease-emphasized)] motion-reduce:animate-none"]),
+                  role: "dialog",
+                  "aria-label": step.value?.title,
+                  onPointerdown: _cache[1] || (_cache[1] = withModifiers(() => {
+                  }, ["stop"])),
+                  onInteractOutside: _cache[2] || (_cache[2] = withModifiers(() => {
+                  }, ["prevent"])),
+                  onEscapeKeyDown: _cache[3] || (_cache[3] = withModifiers(() => {
+                  }, ["prevent"])),
+                  onFocusOutside: _cache[4] || (_cache[4] = withModifiers(() => {
+                  }, ["prevent"]))
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "card", {
+                      step: step.value,
+                      index: index.value,
+                      next,
+                      back,
+                      dismiss
+                    }, () => [
+                      createVNode(_sfc_main$1, {
+                        step: step.value,
+                        index: index.value,
+                        last: last.value,
+                        progress: progress.value,
+                        labels: unref(labels),
+                        onNext: next,
+                        onBack: back,
+                        onPerform: perform,
+                        onDismiss: dismiss
+                      }, null, 8, ["step", "index", "last", "progress", "labels"])
+                    ])
+                  ]),
+                  _: 3
+                }, 8, ["side", "class", "aria-label"])
+              ]),
+              _: 3
+            })
+          ]),
+          _: 3
+        }, 8, ["open"])) : createCommentVNode("", true),
+        open.value && !unref(wide) && ready.value ? (openBlock(), createElementBlock("div", {
+          key: 2,
+          class: normalizeClass([CARD, "pointer-events-auto fixed inset-x-3 bottom-3 z-[calc(var(--z-tour)+1)] w-auto animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)] motion-reduce:animate-none"]),
+          role: "dialog",
+          "aria-label": step.value?.title,
+          onPointerdown: _cache[5] || (_cache[5] = withModifiers(() => {
+          }, ["stop"]))
+        }, [
+          renderSlot(_ctx.$slots, "card", {
+            step: step.value,
+            index: index.value,
+            next,
+            back,
+            dismiss
+          }, () => [
+            createVNode(_sfc_main$1, {
+              step: step.value,
+              index: index.value,
+              last: last.value,
+              progress: progress.value,
+              labels: unref(labels),
+              onNext: next,
+              onBack: back,
+              onPerform: perform,
+              onDismiss: dismiss
+            }, null, 8, ["step", "index", "last", "progress", "labels"])
+          ])
+        ], 42, _hoisted_1)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpUptimeBar-ugcv25xj.js → LpUptimeBar-B4ltCfno.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, ref, openBlock, createElementBlock, mergeProps, unref, createElementVNode, toDisplayString, createCommentVNode, createVNode, withCtx, Fragment, renderList, normalizeStyle, createBlock, createTextVNode } from "vue";
 import { _ as _sfc_main$3 } from "./LpNumberFlow-z4WPZcZu.js";
 import { _ as _sfc_main$2 } from "./LpRollingText-DB7upf-5.js";
-import { _ as _sfc_main$1 } from "./LpTooltip-CXVKcOXT.js";
+import { _ as _sfc_main$1 } from "./LpTooltip-suFCM34F.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import '../assets/LpUptimeBar-B98o9krI.css';const _hoisted_1 = {