@leavepulse/ui 0.69.0 → 0.70.0

package/dist/chunks/LpThemeSwitcher-D5uz0MhK.js

@@ -0,0 +1,278 @@
+import { defineComponent, ref, useId, computed, onMounted, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, normalizeClass, createElementBlock, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps } from "vue";
+import { PopoverRoot, PopoverAnchor, PopoverPortal, PopoverContent } from "reka-ui";
+import { useLabels } from "../composables/useLpConfig.js";
+import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
+import { u as useTheme, p as presets } from "./useTheme-BOV_-AiY.js";
+import { u as useThemeStudio, S as STUDIO_SYSTEM, _ as _sfc_main$5 } from "./LpThemeStudio-DguwHdGt.js";
+import { POPOVER_PANEL } from "../components/dropdown.js";
+import { _ as _sfc_main$1 } from "./LpContextMenu-COwOwRgI.js";
+import { _ as _sfc_main$2 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$4 } from "./LpRollingText-DB7upf-5.js";
+import { _ as _sfc_main$3 } from "./LpShift-DXNsauQZ.js";
+const _hoisted_1 = ["aria-label", "title"];
+const _hoisted_2 = {
+  key: 1,
+  class: "grid shrink-0 place-items-center"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpThemeSwitcher",
+  props: {
+    modelValue: {},
+    themes: {},
+    cycleThemes: {},
+    variant: { default: "swatch" },
+    showLabel: { type: Boolean },
+    default: {},
+    transition: { type: Boolean, default: true },
+    size: { default: "md" },
+    "aria-label": {},
+    system: {},
+    labels: {},
+    studio: { type: Boolean },
+    studioKey: {},
+    studioHide: {}
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const theme = useTheme();
+    const systemNames = () => {
+      const pair = props.system;
+      const name = (t) => typeof t === "string" ? t : t.name;
+      return pair ? { light: name(pair.light), dark: name(pair.dark) } : void 0;
+    };
+    const tuner = props.studio ? useThemeStudio({ themes: props.themes, storageKey: props.studioKey, system: systemNames() }) : null;
+    const studioOpen = ref(false);
+    const portalTo = usePortalTarget();
+    const guardOutside = useOutsideGuard();
+    const anchorId = `lp-theme-trigger-${useId()}`;
+    function keepForTrigger(event) {
+      guardOutside(event);
+      const original = event.detail?.originalEvent;
+      const target = (original ?? event).target;
+      if (target && typeof target.closest === "function" && (target.closest(`[data-lp-theme-trigger="${anchorId}"]`) || target.closest('[data-dismissable-layer][data-state="closed"]'))) {
+        event.preventDefault();
+      }
+    }
+    const text = useLabels(
+      "themeSwitcher",
+      {
+        trigger: "Theme: {name}. Click to switch, right-click to choose.",
+        system: "System",
+        studio: "Theme studio",
+        openStudio: "Theme studio…"
+      },
+      () => props.labels
+    );
+    const list = computed(
+      () => props.themes && props.themes.length ? props.themes : Object.values(presets)
+    );
+    const activeName = computed(
+      () => props.modelValue ?? tuner?.state.value.theme ?? (theme.currentName.value || list.value[0]?.name || "")
+    );
+    onMounted(() => {
+      if (props.default == null) return;
+      const fallback = typeof props.default === "string" ? list.value.find((t) => t.name === props.default) : props.default;
+      if (fallback) theme.init(fallback);
+    });
+    const SIZES = { sm: "size-7", md: "size-8", lg: "size-9" };
+    const HEIGHTS = { sm: "h-7", md: "h-8", lg: "h-9" };
+    const ICON_SIZE = { sm: 15, md: 16, lg: 18 };
+    const CHIP = { sm: "size-3.5", md: "size-4", lg: "size-[18px]" };
+    const wantsLabel = computed(() => props.showLabel || props.variant === "pill");
+    function applyTheme(t, ev) {
+      if (tuner) {
+        tuner.pickTheme(t.name, ev ? { x: ev.clientX, y: ev.clientY } : void 0);
+        emit("update:modelValue", t.name);
+        emit("change", tuner.theme.value);
+        return;
+      }
+      if (props.transition) {
+        theme.setTheme(t, ev ? { x: ev.clientX, y: ev.clientY } : void 0);
+      } else {
+        theme.apply(t);
+      }
+      emit("update:modelValue", t.name);
+      emit("change", t);
+    }
+    const cycleList = computed(() => {
+      if (!props.cycleThemes?.length) return list.value;
+      const resolved = props.cycleThemes.map(
+        (t) => typeof t === "string" ? list.value.find((x) => x.name === t) : t
+      ).filter((t) => Boolean(t));
+      return resolved.length ? resolved : list.value;
+    });
+    function cycle(ev) {
+      const arr = cycleList.value;
+      if (!arr.length) return;
+      const i = arr.findIndex((t) => t.name === activeName.value);
+      const next = arr[(i + 1) % arr.length];
+      if (next) applyTheme(next, ev);
+    }
+    function resolve(t) {
+      return typeof t === "string" ? list.value.find((x) => x.name === t) : t;
+    }
+    const systemPair = computed(() => {
+      if (!props.system) return null;
+      const light = resolve(props.system.light);
+      const dark = resolve(props.system.dark);
+      return light && dark ? { light, dark } : null;
+    });
+    function followSystem() {
+      const pair = systemPair.value;
+      if (!pair) return;
+      if (tuner) {
+        tuner.pickTheme(STUDIO_SYSTEM);
+        emit("change", tuner.theme.value);
+        return;
+      }
+      theme.setSystem(pair);
+      const next = theme.current.value;
+      if (next) {
+        emit("update:modelValue", next.name);
+        emit("change", next);
+      }
+    }
+    const menu = computed(() => {
+      const following = tuner ? tuner.state.value.theme === STUDIO_SYSTEM : theme.system.value;
+      const items = list.value.map((t) => ({
+        label: t.name,
+        icon: !following && t.name === activeName.value ? "lucide:check" : t.mode === "dark" ? "lucide:moon" : "lucide:sun",
+        onSelect: () => applyTheme(t)
+      }));
+      if (systemPair.value) {
+        items.unshift({
+          label: text.value.system,
+          icon: following ? "lucide:check" : "lucide:monitor",
+          onSelect: followSystem
+        });
+      }
+      if (tuner) {
+        items.push({
+          label: text.value.openStudio,
+          icon: "lucide:sliders-horizontal",
+          separatorBefore: true,
+          onSelect: () => studioOpen.value = true
+        });
+      }
+      return items;
+    });
+    const hydrated = ref(false);
+    onMounted(() => {
+      hydrated.value = true;
+    });
+    const labelName = computed(
+      () => hydrated.value ? activeName.value === STUDIO_SYSTEM ? text.value.system : activeName.value : list.value[0]?.name ?? ""
+    );
+    const triggerLabel = computed(
+      () => props["aria-label"] ?? text.value.trigger.replace("{name}", labelName.value)
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(PopoverRoot), {
+        open: studioOpen.value,
+        "onUpdate:open": _cache[0] || (_cache[0] = ($event) => studioOpen.value = $event)
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(PopoverAnchor), { "as-child": "" }, {
+            default: withCtx(() => [
+              createElementVNode("span", {
+                "data-lp-theme-trigger": anchorId,
+                class: "inline-flex shrink-0"
+              }, [
+                createVNode(_sfc_main$1, { items: menu.value }, {
+                  default: withCtx(() => [
+                    createElementVNode("button", {
+                      type: "button",
+                      "aria-label": triggerLabel.value,
+                      title: triggerLabel.value,
+                      class: normalizeClass([
+                        "inline-flex shrink-0 items-center justify-center gap-2 outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring",
+                        wantsLabel.value ? [
+                          HEIGHTS[__props.size],
+                          "rounded-full border border-line bg-surface-raised pl-2 pr-3 text-ink hover:border-line-strong hover:bg-surface-soft"
+                        ] : [SIZES[__props.size], "rounded-control text-muted hover:bg-surface-soft hover:text-ink"]
+                      ]),
+                      onClick: cycle
+                    }, [
+                      __props.variant !== "icon" ? (openBlock(), createElementBlock("span", {
+                        key: 0,
+                        class: normalizeClass(["shrink-0 rounded-full shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--color-ink)_22%,transparent)]", CHIP[__props.size]]),
+                        style: { "background": "linear-gradient(135deg, var(--color-surface) 50%, var(--color-brand) 50%)" }
+                      }, null, 2)) : (openBlock(), createElementBlock("span", _hoisted_2, [
+                        createVNode(_sfc_main$2, {
+                          name: "lucide:moon",
+                          size: ICON_SIZE[__props.size],
+                          class: "in-data-[theme-mode=light]:hidden"
+                        }, null, 8, ["size"]),
+                        createVNode(_sfc_main$2, {
+                          name: "lucide:sun",
+                          size: ICON_SIZE[__props.size],
+                          class: "hidden in-data-[theme-mode=light]:block"
+                        }, null, 8, ["size"])
+                      ])),
+                      wantsLabel.value ? (openBlock(), createBlock(_sfc_main$3, {
+                        key: 2,
+                        axis: "width"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(_sfc_main$4, {
+                            class: "text-sm font-medium",
+                            value: labelName.value,
+                            align: "start"
+                          }, null, 8, ["value"])
+                        ]),
+                        _: 1
+                      })) : createCommentVNode("", true)
+                    ], 10, _hoisted_1)
+                  ]),
+                  _: 1
+                }, 8, ["items"])
+              ])
+            ]),
+            _: 1
+          }),
+          unref(tuner) ? (openBlock(), createBlock(unref(PopoverPortal), {
+            key: 0,
+            to: unref(portalTo)
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(PopoverContent), {
+                "collision-padding": 8,
+                side: "bottom",
+                align: "end",
+                "side-offset": 6,
+                "aria-label": unref(text).studio,
+                class: normalizeClass([unref(POPOVER_PANEL), "z-(--z-popover) w-96 max-w-[calc(100vw-24px)] rounded-card p-3 text-sm text-ink outline-none"]),
+                "data-lp-glide-position": "",
+                onInteractOutside: keepForTrigger,
+                onEscapeKeyDown: unref(guardOutside)
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$5, {
+                    studio: unref(tuner),
+                    hide: __props.studioHide
+                  }, {
+                    start: withCtx((scope) => [
+                      renderSlot(_ctx.$slots, "studio-start", normalizeProps(guardReactiveProps(scope)))
+                    ]),
+                    end: withCtx((scope) => [
+                      renderSlot(_ctx.$slots, "studio-end", normalizeProps(guardReactiveProps(scope)))
+                    ]),
+                    _: 3
+                  }, 8, ["studio", "hide"])
+                ]),
+                _: 3
+              }, 8, ["aria-label", "class", "onEscapeKeyDown"])
+            ]),
+            _: 3
+          }, 8, ["to"])) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 8, ["open"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpTimeField-MFgAsNc5.js → LpTimeField-BFQVf_PW.js}

@@ -1,9 +1,9 @@
 import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, withCtx, createCommentVNode, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString } from "vue";
 import { Time } from "@internationalized/date";
 import { TimeFieldRoot, TimeFieldInput } from "reka-ui";
-import { useFieldControl } from "../composables/useField.js";
+import { useFieldControl, focusLeft } from "../composables/useField.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
-import { _ as _sfc_main$1 } from "./LpIcon-6tSrZ3Zy.js";
+import { _ as _sfc_main$1 } from "./LpIcon-HJP5xMz4.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -17,10 +17,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     locale: {},
     icon: { type: Boolean, default: true }
   },
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "blur"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    function onFocusOut(event) {
+      if (focusLeft(event)) emit("blur", event);
+    }
     const value = computed(() => {
       const match = /^(\d{2}):(\d{2})/.exec(props.modelValue || "");
       return match ? new Time(Number(match[1]), Number(match[2])) : void 0;
@@ -57,10 +60,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         locale: __props.locale,
         granularity: "minute",
         disabled: unref(field).disabled,
+        required: unref(field).required,
         "aria-invalid": unref(field).invalid || void 0,
         "aria-describedby": unref(field).describedBy,
+        "aria-labelledby": unref(field).labelId,
         class: unref(rootClass)
-      }, unref(rest), { "onUpdate:modelValue": onUpdate }), {
+      }, unref(rest), {
+        "onUpdate:modelValue": onUpdate,
+        onFocusout: onFocusOut
+      }), {
         default: withCtx(({ segments }) => [
           __props.icon ? (openBlock(), createBlock(_sfc_main$1, {
             key: 0,
@@ -93,7 +101,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }), 128))
         ]),
         _: 1
-      }, 16, ["model-value", "hour-cycle", "locale", "disabled", "aria-invalid", "aria-describedby", "class"]);
+      }, 16, ["model-value", "hour-cycle", "locale", "disabled", "required", "aria-invalid", "aria-describedby", "aria-labelledby", "class"]);
     };
   }
 });

package/dist/chunks/{LpToaster-C4zE9zB7.js → LpToaster-Wv9ksj4q.js}

@@ -1,16 +1,18 @@
 import { defineComponent, useId, onMounted, nextTick, onBeforeUnmount, ref, watch, openBlock, createBlock, unref, withCtx, createElementBlock, Fragment, renderList, normalizeClass, createElementVNode, createVNode, createTextVNode, toDisplayString, createCommentVNode, withModifiers, normalizeStyle, Teleport } from "vue";
 import { ToastProvider, ToastRoot, ToastTitle, ToastDescription, ToastViewport } from "reka-ui";
 import { prefersReducedMotion } from "../composables/easing.js";
-import { useClipboard } from "../composables/useClipboard.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { useToast } from "../composables/useToast.js";
 import { CLOSE_ICON } from "../components/dropdown.js";
-import { _ as _sfc_main$1 } from "./LpIcon-6tSrZ3Zy.js";
+import { _ as _sfc_main$2 } from "./LpCopyButton-DzHjnFs0.js";
+import { _ as _sfc_main$1 } from "./LpIcon-HJP5xMz4.js";
+import { toneLook } from "../components/tone.js";
+import { usePortalTarget } from "../composables/useView.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"];
-const _hoisted_4 = ["aria-label", "title", "onClick"];
-const _hoisted_5 = ["aria-label", "onClick"];
+const _hoisted_4 = ["aria-label", "onClick"];
+const _hoisted_5 = ["data-paused"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpToaster",
   props: {
@@ -30,10 +32,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const height = root.offsetHeight;
       for (const el of toastsIn(root)) {
         const before = tops.get(el);
-        const now2 = el.offsetTop - height;
-        tops.set(el, now2);
-        if (before === void 0 || before === now2 || reduce || el.hasAttribute("data-swipe")) continue;
-        el.animate([{ translate: `0 ${before - now2}px` }, { translate: "0 0" }], {
+        const now = el.offsetTop - height;
+        tops.set(el, now);
+        if (before === void 0 || before === now || reduce || el.hasAttribute("data-swipe")) continue;
+        el.animate([{ translate: `0 ${before - now}px` }, { translate: "0 0" }], {
           duration: 220,
           easing: "cubic-bezier(0.2, 0, 0, 1)"
         });
@@ -74,61 +76,36 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       warning: "lucide:triangle-alert",
       error: "lucide:circle-x"
     };
-    const variantColor = {
-      info: "text-brand",
-      success: "text-action",
-      warning: "text-accent",
-      error: "text-danger"
-    };
-    const variantBar = {
-      info: "bg-brand",
-      success: "bg-action",
-      warning: "bg-accent",
-      error: "bg-danger"
-    };
-    const pausedAt = /* @__PURE__ */ new Map();
-    const now = ref(Date.now());
-    let timer = null;
-    function startTimer() {
-      if (timer === null) timer = setInterval(() => now.value = Date.now(), 80);
-    }
-    function stopTimer() {
-      if (timer !== null) {
-        clearInterval(timer);
-        timer = null;
+    const paused = ref(/* @__PURE__ */ new Set());
+    const startOffsets = /* @__PURE__ */ new Map();
+    function drainStyle(t) {
+      const at = tag(t);
+      let offset = startOffsets.get(at);
+      if (offset === void 0) {
+        offset = t.dismissAt === null ? 0 : Math.max(0, t.duration - (t.dismissAt - Date.now()));
+        startOffsets.set(at, offset);
       }
+      return { animationDuration: `${t.duration}ms`, animationDelay: `${-offset}ms` };
     }
     watch(
-      () => queue.length,
+      () => queue.map(tag).join("|"),
       () => {
-        for (const id of pausedAt.keys()) {
-          if (!queue.some((t) => t.id === id)) pausedAt.delete(id);
-        }
+        const live = (at) => queue.some((t) => tag(t) === at);
+        for (const at of startOffsets.keys()) if (!live(at)) startOffsets.delete(at);
+        if ([...paused.value].some((at) => !live(at))) paused.value = new Set([...paused.value].filter(live));
         if (closing.value.size) {
-          const live = new Set([...closing.value].filter((at) => queue.some((t) => tag(t) === at)));
-          if (live.size !== closing.value.size) closing.value = live;
+          const next = new Set([...closing.value].filter(live));
+          if (next.size !== closing.value.size) closing.value = next;
         }
-        if (queue.some((t) => t.dismissAt !== null)) startTimer();
-        else stopTimer();
-      },
-      { immediate: true }
+      }
     );
-    onBeforeUnmount(stopTimer);
     function onPause(t) {
-      pausedAt.set(t.id, now.value);
+      paused.value = new Set(paused.value).add(tag(t));
     }
     function onResume(t) {
-      const since = pausedAt.get(t.id);
-      if (since !== void 0 && t.dismissAt !== null) {
-        t.dismissAt += Date.now() - since;
-      }
-      pausedAt.delete(t.id);
-    }
-    function progress(t) {
-      if (!t.dismissAt || t.duration <= 0) return 0;
-      const at = pausedAt.get(t.id) ?? now.value;
-      const remaining = t.dismissAt - at;
-      return Math.max(0, Math.min(100, remaining / t.duration * 100));
+      const next = new Set(paused.value);
+      next.delete(tag(t));
+      paused.value = next;
     }
     let swiped = null;
     function onSwipeDone(t) {
@@ -149,17 +126,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         busy.value = next;
       }
     }
-    const { copy } = useClipboard();
-    const copiedId = ref(null);
-    let copiedTimer;
     const copyable = (t) => t.variant === "error" || t.variant === "warning";
-    async function copyToast(t) {
-      if (!await copy([t.title, t.message, t.details].filter(Boolean).join("\n"))) return;
-      copiedId.value = tag(t);
-      clearTimeout(copiedTimer);
-      copiedTimer = setTimeout(() => copiedId.value = null, 1500);
-    }
-    onBeforeUnmount(() => clearTimeout(copiedTimer));
+    const toastText = (t) => () => [t.title, t.message, t.details].filter(Boolean).join("\n");
     function selecting() {
       return Boolean(window.getSelection()?.toString());
     }
@@ -170,6 +138,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function runAction(t, action) {
       return settle(t, action.onClick);
     }
+    const portalTo = usePortalTarget();
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ToastProvider), null, {
         default: withCtx(() => [
@@ -193,7 +162,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   createVNode(_sfc_main$1, {
                     name: variantIcon[t.variant],
                     size: 18,
-                    class: normalizeClass(["mt-0.5 shrink-0", variantColor[t.variant]])
+                    class: normalizeClass(["mt-0.5 shrink-0", unref(toneLook)(t.variant).text])
                   }, null, 8, ["name", "class"]),
                   createElementVNode("div", _hoisted_2, [
                     t.title ? (openBlock(), createBlock(unref(ToastTitle), {
@@ -240,19 +209,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       }), 128))
                     ])) : createCommentVNode("", true)
                   ]),
-                  copyable(t) ? (openBlock(), createElementBlock("button", {
+                  copyable(t) ? (openBlock(), createBlock(_sfc_main$2, {
                     key: 0,
-                    type: "button",
-                    class: "-mt-1 rounded-inner p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
-                    "aria-label": copiedId.value === tag(t) ? unref(text).copied : unref(text).copy,
-                    title: copiedId.value === tag(t) ? unref(text).copied : unref(text).copy,
-                    onClick: withModifiers(($event) => copyToast(t), ["stop"])
-                  }, [
-                    createVNode(_sfc_main$1, {
-                      name: copiedId.value === tag(t) ? "lucide:check" : "lucide:copy",
-                      size: 15
-                    }, null, 8, ["name"])
-                  ], 8, _hoisted_4)) : createCommentVNode("", true),
+                    value: toastText(t),
+                    variant: "muted",
+                    "icon-size": 15,
+                    class: "-mt-1 size-auto aspect-auto rounded-inner p-1 hover:bg-transparent",
+                    labels: { copy: unref(text).copy, copied: unref(text).copied },
+                    onClick: _cache[2] || (_cache[2] = withModifiers(() => {
+                    }, ["stop"]))
+                  }, null, 8, ["value", "labels"])) : createCommentVNode("", true),
                   createElementVNode("button", {
                     type: "button",
                     class: "group -mr-1 -mt-1 rounded-inner p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink",
@@ -264,23 +230,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       size: 16,
                       class: normalizeClass(unref(CLOSE_ICON))
                     }, null, 8, ["class"])
-                  ], 8, _hoisted_5)
+                  ], 8, _hoisted_4)
                 ]),
                 t.dismissAt ? (openBlock(), createElementBlock("div", {
                   key: 0,
-                  class: normalizeClass(["absolute inset-x-0 bottom-0 h-0.5 origin-left transition-transform duration-100 ease-linear motion-reduce:transition-none", variantBar[t.variant]]),
-                  style: normalizeStyle({ transform: `scaleX(${progress(t) / 100})` })
-                }, null, 6)) : createCommentVNode("", true)
+                  class: normalizeClass(["lp-drain absolute inset-x-0 bottom-0 h-0.5", unref(toneLook)(t.variant).bg]),
+                  style: normalizeStyle(drainStyle(t)),
+                  "data-paused": paused.value.has(tag(t)) || void 0
+                }, null, 14, _hoisted_5)) : createCommentVNode("", true)
               ]),
               _: 2
             }, 1032, ["open", "duration", "type", "class", "onUpdate:open", "onAnimationend", "onSwipeEnd", "onSwipeCancel", "onPause", "onResume", "onClick"]);
           }), 128)),
-          (openBlock(), createBlock(Teleport, { to: "body" }, [
+          (openBlock(), createBlock(Teleport, { to: unref(portalTo) }, [
             createVNode(unref(ToastViewport), {
               "data-lp-toasts": unref(viewportId),
               class: "fixed bottom-0 right-0 z-(--z-toast) flex w-[min(92vw,22rem)] flex-col gap-2 p-4 outline-none"
             }, null, 8, ["data-lp-toasts"])
-          ]))
+          ], 8, ["to"]))
         ]),
         _: 1
       });

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

@@ -3,6 +3,7 @@ import { injectTooltipProviderContext, TooltipProvider, TooltipRoot, TooltipTrig
 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 '../assets/LpTooltip-B61SYd4K.css';const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpTooltip",
   props: {
@@ -79,6 +80,8 @@ import '../assets/LpTooltip-B61SYd4K.css';const _sfc_main = /* @__PURE__ */ defi
     onBeforeUnmount(() => {
       if (frame) cancelAnimationFrame(frame);
     });
+    const portalTo = usePortalTarget();
+    const guardOutside = useOutsideGuard();
     return (_ctx, _cache) => {
       return openBlock(), createBlock(resolveDynamicComponent(unref(shared) ? PassThrough : unref(TooltipProvider)), normalizeProps(guardReactiveProps(unref(shared) ? {} : { delayDuration: __props.delay ?? 200 })), {
         default: withCtx(() => [
@@ -101,9 +104,11 @@ import '../assets/LpTooltip-B61SYd4K.css';const _sfc_main = /* @__PURE__ */ defi
                 ]),
                 _: 3
               }, 8, ["aria-label"]),
-              createVNode(unref(TooltipPortal), null, {
+              createVNode(unref(TooltipPortal), { to: unref(portalTo) }, {
                 default: withCtx(() => [
                   createVNode(unref(TooltipContent), {
+                    onInteractOutside: unref(guardOutside),
+                    onEscapeKeyDown: unref(guardOutside),
                     side: __props.side,
                     "side-offset": __props.sideOffset ?? 6,
                     "collision-padding": 8,
@@ -121,10 +126,10 @@ import '../assets/LpTooltip-B61SYd4K.css';const _sfc_main = /* @__PURE__ */ defi
                       ])
                     ]),
                     _: 3
-                  }, 8, ["side", "side-offset", "data-lp-follow", "class", "style"])
+                  }, 8, ["onInteractOutside", "onEscapeKeyDown", "side", "side-offset", "data-lp-follow", "class", "style"])
                 ]),
                 _: 3
-              })
+              }, 8, ["to"])
             ]),
             _: 3
           }, 8, ["open", "delay-duration", "ignore-non-keyboard-focus", "disable-hoverable-content", "disable-closing-trigger"])

package/dist/chunks/{LpTopologyCanvas-6ozNrQKh.js → LpTopologyCanvas-ZhKthfgz.js}

@@ -3,7 +3,7 @@ import { Background } from "@vue-flow/background";
 import { Controls } from "@vue-flow/controls";
 import { MarkerType, useVueFlow, VueFlow, SelectionMode, Panel } from "@vue-flow/core";
 import { MiniMap } from "@vue-flow/minimap";
-import { _ as _sfc_main$3 } from "./LpInfraNode-Ds_8SZgN.js";
+import { _ as _sfc_main$3 } from "./LpInfraNode-CUC3t4na.js";
 import { _ as _sfc_main$1 } from "./LpLaneNode-HtnQf2FF.js";
 import { _ as _sfc_main$2 } from "./LpServiceNode-D8uJ8sGk.js";
 import { _ as _sfc_main$4 } from "./LpWaypointEdge-D8yHlQiw.js";