@leavepulse/ui 0.68.0 → 0.70.0

package/dist/chunks/{LpCodeBlock-lLbmslfs.js → LpCodeBlock-BGsQhxw8.js}

@@ -1,8 +1,8 @@
-import { defineComponent, computed, reactive, watch, ref, openBlock, createElementBlock, mergeProps, unref, toDisplayString, createCommentVNode, createElementVNode, createVNode, normalizeClass, normalizeStyle, Fragment, renderList } from "vue";
-import { useClipboard } from "../composables/useClipboard.js";
+import { defineComponent, computed, reactive, watch, ref, openBlock, createElementBlock, mergeProps, unref, toDisplayString, createCommentVNode, createElementVNode, createVNode, createBlock, normalizeStyle, normalizeClass, Fragment, renderList } from "vue";
 import { tokenizeLines } from "../components/codeHighlight.js";
 import { useLabels } from "../composables/useLpConfig.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 { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = {
   key: 0,
@@ -18,21 +18,20 @@ const _hoisted_3 = {
 };
 const _hoisted_4 = { class: "ml-auto flex items-center gap-1" };
 const _hoisted_5 = ["aria-label"];
-const _hoisted_6 = ["aria-label"];
-const _hoisted_7 = ["value"];
-const _hoisted_8 = { class: "block" };
-const _hoisted_9 = {
+const _hoisted_6 = ["value"];
+const _hoisted_7 = { class: "block" };
+const _hoisted_8 = {
   key: 0,
   class: "mr-3 inline-block w-7 select-none text-right text-muted/60",
   "aria-hidden": "true"
 };
-const _hoisted_10 = ["aria-expanded", "onClick"];
-const _hoisted_11 = { class: "select-none" };
-const _hoisted_12 = {
+const _hoisted_9 = ["aria-expanded", "onClick"];
+const _hoisted_10 = { class: "select-none" };
+const _hoisted_11 = {
   key: 0,
   class: "select-none text-muted/50"
 };
-const _hoisted_13 = {
+const _hoisted_12 = {
   key: 0,
   class: "mr-3 inline-block w-7 select-none text-right text-muted/60",
   "aria-hidden": "true"
@@ -158,8 +157,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const showHeader = computed(
       () => Boolean(props.title || props.lang !== "plain" || props.copyable || props.lockToggle)
     );
-    const { copied, copy: writeClipboard } = useClipboard();
-    const copy = () => writeClipboard(copyText.value);
     function toggleLock() {
       emit("update:locked", !props.locked);
     }
@@ -188,19 +185,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 class: "transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active/lock:scale-90"
               }, null, 8, ["name"])
             ], 8, _hoisted_5)) : createCommentVNode("", true),
-            __props.copyable ? (openBlock(), createElementBlock("button", {
+            __props.copyable ? (openBlock(), createBlock(_sfc_main$2, {
               key: 1,
-              type: "button",
-              class: "group/copy flex items-center gap-1 rounded-small px-1.5 py-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
-              "aria-label": unref(copied) ? unref(text).copied : unref(text).copy,
-              onClick: copy
-            }, [
-              createVNode(_sfc_main$1, {
-                name: unref(copied) ? "lucide:check" : "lucide:copy",
-                size: 13,
-                class: normalizeClass(unref(copied) ? "text-action" : "")
-              }, null, 8, ["name", "class"])
-            ], 8, _hoisted_6)) : createCommentVNode("", true)
+              value: copyText.value,
+              size: "xs",
+              variant: "muted",
+              class: "size-auto aspect-auto rounded-small px-1.5 py-1 font-normal hover:bg-transparent",
+              labels: { copy: unref(text).copy, copied: unref(text).copied }
+            }, null, 8, ["value", "labels"])) : createCommentVNode("", true)
           ])
         ])) : createCommentVNode("", true),
         createElementVNode("div", {
@@ -214,7 +206,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             class: normalizeClass(["lp-scrollbar-none absolute inset-0 size-full resize-none overflow-auto whitespace-pre bg-transparent p-3 leading-relaxed text-transparent caret-brand outline-none", [__props.wrap ? "whitespace-pre-wrap break-words" : "whitespace-pre", __props.lineNumbers ? "pl-13" : ""]]),
             onInput,
             onScroll: syncScroll
-          }, null, 42, _hoisted_7)) : createCommentVNode("", true),
+          }, null, 42, _hoisted_6)) : createCommentVNode("", true),
           createElementVNode("pre", {
             ref_key: "preEl",
             ref: preEl,
@@ -224,7 +216,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               editing.value && __props.height ? "h-full overflow-hidden" : ""
             ]])
           }, [
-            createElementVNode("code", _hoisted_8, [
+            createElementVNode("code", _hoisted_7, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(segments.value, (seg, s) => {
                 return openBlock(), createElementBlock(Fragment, { key: s }, [
                   seg.kind === "lines" ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(seg.lines, (ln) => {
@@ -232,7 +224,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       key: "l" + ln.n,
                       class: "block min-h-[1.4em]"
                     }, [
-                      __props.lineNumbers ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(ln.n), 1)) : createCommentVNode("", true),
+                      __props.lineNumbers ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(ln.n), 1)) : createCommentVNode("", true),
                       (openBlock(true), createElementBlock(Fragment, null, renderList(tokens(ln.n), (tok, j) => {
                         return openBlock(), createElementBlock("span", {
                           key: j,
@@ -252,15 +244,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         size: 12,
                         class: "shrink-0"
                       }, null, 8, ["name"]),
-                      createElementVNode("span", _hoisted_11, toDisplayString(openState[seg.id] ? seg.label : seg.label + " …"), 1),
-                      !openState[seg.id] ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(unref(text).lines.replace("{n}", String(seg.lines.length))), 1)) : createCommentVNode("", true)
-                    ], 8, _hoisted_10),
+                      createElementVNode("span", _hoisted_10, toDisplayString(openState[seg.id] ? seg.label : seg.label + " …"), 1),
+                      !openState[seg.id] ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(unref(text).lines.replace("{n}", String(seg.lines.length))), 1)) : createCommentVNode("", true)
+                    ], 8, _hoisted_9),
                     openState[seg.id] ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(seg.lines, (ln) => {
                       return openBlock(), createElementBlock("span", {
                         key: "f" + ln.n,
                         class: "block min-h-[1.4em]"
                       }, [
-                        __props.lineNumbers ? (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString(ln.n), 1)) : createCommentVNode("", true),
+                        __props.lineNumbers ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(ln.n), 1)) : createCommentVNode("", true),
                         (openBlock(true), createElementBlock(Fragment, null, renderList(tokens(ln.n), (tok, j) => {
                           return openBlock(), createElementBlock("span", {
                             key: j,

package/dist/chunks/LpCodeDisplay-CIKKT2iW.js

@@ -0,0 +1,189 @@
+import { defineComponent, useModel, computed, ref, watch, openBlock, createElementBlock, mergeProps, unref, createElementVNode, normalizeClass, toDisplayString, Fragment, renderList, createCommentVNode, createBlock, renderSlot, createVNode, withCtx, mergeModels } from "vue";
+import { useLabels } from "../composables/useLpConfig.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { useNow } from "../composables/useNow.js";
+import { _ as _sfc_main$6 } from "./LpCheckbox-DHc2bHDe.js";
+import { _ as _sfc_main$3 } from "./LpCopyButton-DzHjnFs0.js";
+import { _ as _sfc_main$5 } from "./LpCountdown-Dtq1ihlJ.js";
+import { _ as _sfc_main$4 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$1 } from "./LpRollingText-DB7upf-5.js";
+import { _ as _sfc_main$2 } from "./RevealToggle-C-KzaQGJ.js";
+import { groupCode } from "../components/fieldText.js";
+import { toEpoch, formatTime, ceilToSecond, msToNextSecond } from "../components/timeSpan.js";
+const _hoisted_1 = { class: "flex flex-wrap items-center gap-x-2 gap-y-1" };
+const _hoisted_2 = { class: "sr-only" };
+const _hoisted_3 = {
+  key: 0,
+  "aria-hidden": "true",
+  class: "-mx-1 select-none text-muted/70"
+};
+const _hoisted_4 = {
+  "aria-hidden": "true",
+  class: "inline-flex"
+};
+const _hoisted_5 = { class: "flex items-center gap-0.5" };
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpCodeDisplay",
+  props: /* @__PURE__ */ mergeModels({
+    code: {},
+    groups: {},
+    separator: { default: "" },
+    copyAs: { default: "raw" },
+    masked: { type: Boolean },
+    copyable: { type: Boolean, default: true },
+    expiresAt: {},
+    issuedAt: {},
+    ack: { type: Boolean },
+    size: { default: "md" },
+    labels: {}
+  }, {
+    "revealed": { type: Boolean, ...{ default: false } },
+    "revealedModifiers": {},
+    "saved": { type: Boolean, ...{ default: false } },
+    "savedModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["expired", "copied"], ["update:revealed", "update:saved"]),
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const revealed = useModel(__props, "revealed");
+    const saved = useModel(__props, "saved");
+    const text = useLabels(
+      "codeDisplay",
+      {
+        show: "Show code",
+        hide: "Hide code",
+        hidden: "Code hidden",
+        expiresIn: "Expires in",
+        expired: "Expired",
+        saved: "I've saved this code"
+      },
+      () => props.labels
+    );
+    const parts = computed(() => groupCode(props.code, props.groups));
+    const hidden = computed(() => props.masked && !revealed.value);
+    const copyText = computed(
+      () => props.copyAs === "grouped" ? parts.value.join(props.separator || " ") : parts.value.join("")
+    );
+    const spoken = computed(() => parts.value.map((g) => Array.from(g).join(" ")).join(", "));
+    const end = computed(() => {
+      const at = toEpoch(props.expiresAt);
+      return Number.isNaN(at) ? void 0 : at;
+    });
+    const start = ref(Date.now());
+    watch(
+      [end, () => props.issuedAt],
+      () => {
+        const issued = toEpoch(props.issuedAt);
+        start.value = Number.isNaN(issued) ? Date.now() : issued;
+      },
+      { immediate: true }
+    );
+    const now = useNow(() => end.value !== void 0 && end.value > Date.now(), {
+      nextIn: (at) => msToNextSecond((end.value ?? at) - at),
+      restartOn: end
+    });
+    const remaining = computed(() => end.value === void 0 ? void 0 : Math.max(0, end.value - now.value));
+    const expired = computed(() => remaining.value === 0);
+    const fraction = computed(() => {
+      if (end.value === void 0) return 1;
+      const total = end.value - start.value;
+      return total > 0 ? Math.min(1, (remaining.value ?? 0) / total) : 0;
+    });
+    const urgentAt = computed(() => end.value === void 0 ? void 0 : Math.max(0, end.value - start.value) * 0.2 / 1e3);
+    watch(expired, (out) => out && emit("expired"));
+    const SIZE = {
+      sm: { text: "text-lg", gap: "gap-2", icon: 14 },
+      md: { text: "text-2xl", gap: "gap-3", icon: 16 },
+      lg: { text: "text-4xl", gap: "gap-4", icon: 18 }
+    };
+    const { class: rootClass, attrs: rest } = useMergedAttrs(() => "inline-flex max-w-full flex-col gap-3");
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({ class: unref(rootClass) }, unref(rest)), [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", {
+            class: normalizeClass(["flex flex-wrap items-center font-mono font-semibold tracking-normal text-ink tabular-nums transition-opacity duration-(--duration-medium)", [SIZE[__props.size].text, SIZE[__props.size].gap, expired.value ? "opacity-35" : ""]])
+          }, [
+            createElementVNode("span", _hoisted_2, toDisplayString(hidden.value ? unref(text).hidden : spoken.value), 1),
+            (openBlock(true), createElementBlock(Fragment, null, renderList(parts.value, (group, g) => {
+              return openBlock(), createElementBlock(Fragment, { key: g }, [
+                g > 0 && __props.separator ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.separator), 1)) : createCommentVNode("", true),
+                createElementVNode("span", _hoisted_4, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(Array.from(group), (char, c) => {
+                    return openBlock(), createBlock(_sfc_main$1, {
+                      key: c,
+                      value: hidden.value ? "•" : char,
+                      mode: "flip",
+                      duration: 260 + (g * 4 + c) * 28,
+                      class: "w-[1ch]"
+                    }, null, 8, ["value", "duration"]);
+                  }), 128))
+                ])
+              ], 64);
+            }), 128))
+          ], 2),
+          createElementVNode("div", _hoisted_5, [
+            __props.masked ? (openBlock(), createBlock(_sfc_main$2, {
+              key: 0,
+              modelValue: revealed.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => revealed.value = $event),
+              "icon-size": SIZE[__props.size].icon,
+              "show-label": unref(text).show,
+              "hide-label": unref(text).hide
+            }, null, 8, ["modelValue", "icon-size", "show-label", "hide-label"])) : createCommentVNode("", true),
+            __props.copyable ? (openBlock(), createBlock(_sfc_main$3, {
+              key: 1,
+              value: copyText.value,
+              size: "sm",
+              class: "text-muted hover:text-ink",
+              disabled: expired.value,
+              onCopied: _cache[1] || (_cache[1] = (t) => emit("copied", t))
+            }, null, 8, ["value", "disabled"])) : createCommentVNode("", true)
+          ])
+        ]),
+        remaining.value !== void 0 ? renderSlot(_ctx.$slots, "expiry", {
+          key: 0,
+          remaining: remaining.value,
+          formatted: unref(formatTime)(unref(ceilToSecond)(remaining.value), "clock"),
+          expired: expired.value,
+          fraction: fraction.value
+        }, () => [
+          createElementVNode("div", {
+            class: normalizeClass(["flex max-w-64 flex-wrap items-center gap-1.5 text-xs", expired.value ? "text-danger" : "text-muted"])
+          }, [
+            createVNode(_sfc_main$4, {
+              name: expired.value ? "lucide:timer-off" : "lucide:timer",
+              size: 12
+            }, null, 8, ["name"]),
+            createVNode(_sfc_main$1, {
+              value: expired.value ? unref(text).expired : unref(text).expiresIn,
+              align: "start"
+            }, null, 8, ["value"]),
+            createVNode(_sfc_main$5, {
+              to: end.value,
+              from: start.value,
+              progress: "bar",
+              "urgent-at": urgentAt.value,
+              labels: { done: unref(text).expired },
+              class: "contents text-ink"
+            }, {
+              done: withCtx(() => [..._cache[3] || (_cache[3] = [])]),
+              _: 1
+            }, 8, ["to", "from", "urgent-at", "labels"])
+          ], 2)
+        ]) : createCommentVNode("", true),
+        __props.ack ? (openBlock(), createBlock(_sfc_main$6, {
+          key: 1,
+          modelValue: saved.value,
+          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => saved.value = $event),
+          label: unref(text).saved
+        }, null, 8, ["modelValue", "label"])) : createCommentVNode("", true)
+      ], 16);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpCollapse-CWS9M_lm.js

@@ -0,0 +1,115 @@
+import { defineComponent, useModel, ref, watch, openBlock, createBlock, Transition, withCtx, withDirectives, createElementBlock, normalizeProps, mergeProps, renderSlot, vShow, createCommentVNode, mergeModels } from "vue";
+import { prefersReducedMotion, easingToken, durationToken } from "../composables/easing.js";
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpCollapse",
+  props: /* @__PURE__ */ mergeModels({
+    axis: { default: "height" },
+    fade: { type: Boolean, default: true },
+    keepMounted: { type: Boolean, default: false },
+    lazy: { type: Boolean, default: false },
+    duration: {}
+  }, {
+    "open": { type: Boolean, ...{ default: false } },
+    "openModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["opened", "closed"], ["update:open"]),
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const open = useModel(__props, "open");
+    let unmounting = false;
+    const present = ref(open.value || props.keepMounted && !props.lazy);
+    watch(open, (value) => {
+      if (!value) return;
+      unmounting = false;
+      present.value = true;
+    });
+    const running = /* @__PURE__ */ new WeakMap();
+    function current(el) {
+      const rect = el.getBoundingClientRect();
+      return { height: rect.height, width: rect.width, opacity: Number(getComputedStyle(el).opacity) };
+    }
+    function natural(el) {
+      return { height: el.scrollHeight, width: el.scrollWidth, opacity: 1 };
+    }
+    const ZERO = { height: 0, width: 0, opacity: 0 };
+    function frame(size) {
+      const out = {};
+      if (props.axis !== "width") out.height = `${size.height}px`;
+      if (props.axis !== "height") out.width = `${size.width}px`;
+      if (props.fade) out.opacity = size.opacity;
+      return out;
+    }
+    function fold(el, opening, done) {
+      const box = el;
+      const previous = running.get(box);
+      if (prefersReducedMotion() || typeof box.animate !== "function") {
+        previous?.cancel();
+        done();
+        return;
+      }
+      const from = previous ? current(box) : opening ? ZERO : natural(box);
+      previous?.cancel();
+      const to = opening ? natural(box) : ZERO;
+      box.style.overflow = "hidden";
+      const animation = box.animate([frame(from), frame(to)], {
+        duration: props.duration ?? durationToken("duration-medium"),
+        easing: easingToken("ease-emphasized"),
+        // Closing holds the folded frame until Vue hides the element, so it never flashes back open.
+        fill: opening ? "none" : "forwards"
+      });
+      running.set(box, animation);
+      animation.onfinish = () => {
+        if (running.get(box) !== animation) return;
+        running.delete(box);
+        box.style.overflow = "";
+        done();
+        if (!opening) animation.cancel();
+      };
+      animation.oncancel = () => {
+        if (running.get(box) === animation) running.delete(box);
+      };
+    }
+    function onEnter(el, done) {
+      fold(el, true, done);
+    }
+    function onLeave(el, done) {
+      if (unmounting) done();
+      else fold(el, false, done);
+    }
+    function onAfterLeave() {
+      if (unmounting) {
+        unmounting = false;
+        return;
+      }
+      if (!props.keepMounted && !open.value) {
+        unmounting = true;
+        present.value = false;
+      }
+      emit("closed");
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Transition, {
+        css: false,
+        onEnter,
+        onLeave,
+        onAfterEnter: _cache[0] || (_cache[0] = ($event) => emit("opened")),
+        onAfterLeave
+      }, {
+        default: withCtx(() => [
+          present.value ? withDirectives((openBlock(), createElementBlock("div", normalizeProps(mergeProps({ key: 0 }, _ctx.$attrs)), [
+            renderSlot(_ctx.$slots, "default")
+          ], 16)), [
+            [vShow, open.value]
+          ]) : createCommentVNode("", true)
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpColorPicker-DtEfBAcK.js → LpColorPicker-DFugXNUi.js}

@@ -7,9 +7,10 @@ import { DEFAULT_SWATCHES, formatColor, opaqueCss, parseColor, rgbToHsv, isLight
 import { useClipboard } from "../composables/useClipboard.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { POPOVER_PANEL } from "../components/dropdown.js";
-import { _ as _sfc_main$1 } from "./LpContextMenu-CRnjoqSt.js";
-import { _ as _sfc_main$2 } from "./LpIcon-6tSrZ3Zy.js";
+import { _ as _sfc_main$1 } from "./LpContextMenu-COwOwRgI.js";
+import { _ as _sfc_main$2 } from "./LpIcon-HJP5xMz4.js";
 import { _ as _sfc_main$3 } from "./LpRollingText-DB7upf-5.js";
+import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
 const _hoisted_1 = ["id", "disabled", "aria-label", "aria-invalid", "aria-describedby"];
 const _hoisted_2 = { class: "min-w-0 flex-1 truncate font-mono text-xs text-muted-strong" };
 const _hoisted_3 = { class: "flex flex-col gap-3" };
@@ -320,6 +321,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       disabled: props.disabled
     }));
     __expose({ open });
+    const portalTo = usePortalTarget();
+    const guardOutside = useOutsideGuard();
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(PopoverRoot), {
         open: open.value,
@@ -370,9 +373,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }),
-          createVNode(unref(PopoverPortal), null, {
+          createVNode(unref(PopoverPortal), { to: unref(portalTo) }, {
             default: withCtx(() => [
               createVNode(unref(PopoverContent), {
+                onInteractOutside: unref(guardOutside),
+                onEscapeKeyDown: unref(guardOutside),
                 "collision-padding": 8,
                 side: __props.side,
                 align: __props.align,
@@ -520,10 +525,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   }, 8, ["items"])
                 ]),
                 _: 3
-              }, 8, ["side", "align", "class"])
+              }, 8, ["onInteractOutside", "onEscapeKeyDown", "side", "align", "class"])
             ]),
             _: 3
-          })
+          }, 8, ["to"])
         ]),
         _: 3
       }, 8, ["open"]);

package/dist/chunks/{LpConfirmDialog-D7s4jakB.js → LpConfirmDialog-CfGCux8m.js}

@@ -1,8 +1,8 @@
 import { defineComponent, computed, ref, watch, openBlock, createBlock, createSlots, withCtx, renderSlot, createElementBlock, toDisplayString, createCommentVNode, createVNode, createTextVNode, unref, createElementVNode, normalizeClass, nextTick } from "vue";
 import { useLabels } from "../composables/useLpConfig.js";
-import { _ as _sfc_main$2 } from "./LpButton-DNR-YAq5.js";
-import { _ as _sfc_main$3 } from "./LpIcon-6tSrZ3Zy.js";
-import { _ as _sfc_main$1 } from "./LpModal-hk1noDcr.js";
+import { _ as _sfc_main$2 } from "./LpButton-CVxBfGjd.js";
+import { _ as _sfc_main$3 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$1 } from "./LpModal-eBMt2Fqn.js";
 const _hoisted_1 = { class: "inline-flex items-center gap-2.5" };
 const _hoisted_2 = {
   key: 0,

package/dist/chunks/{LpConfirmHost-DrYI5y1K.js → LpConfirmHost-exB7JmcO.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, ref, watch, openBlock, createBlock, createCommentVNode } from "vue";
 import { confirmQueue, settleConfirm } from "../components/confirm.js";
-import { _ as _sfc_main$1 } from "./LpConfirmDialog-D7s4jakB.js";
+import { _ as _sfc_main$1 } from "./LpConfirmDialog-CfGCux8m.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpConfirmHost",
   props: {

package/dist/chunks/{LpContextMenu-CRnjoqSt.js → LpContextMenu-COwOwRgI.js}

@@ -2,9 +2,10 @@ import { defineComponent, computed, openBlock, createBlock, unref, withCtx, crea
 import { ContextMenuRoot, ContextMenuTrigger, ContextMenuPortal, ContextMenuContent } from "reka-ui";
 import { hints } from "../composables/useHints.js";
 import { HINT_SIGNALS, noteContextTarget } from "../composables/useHintSystem.js";
-import { _ as _sfc_main$2 } from "./ContextMenuItems-B7XFHksm.js";
-import { _ as _sfc_main$1 } from "./MenuTitle-obgek0B7.js";
+import { _ as _sfc_main$2 } from "./ContextMenuItems-B5uE8Znw.js";
+import { _ as _sfc_main$1 } from "./MenuTitle-BjQZX8tQ.js";
 import { POPOVER_PANEL } from "../components/dropdown.js";
+import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpContextMenu",
   props: {
@@ -55,6 +56,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       saved.el.focus();
       if (saved.el.value === saved.value) saved.el.setSelectionRange(saved.start, saved.end);
     }
+    const portalTo = usePortalTarget();
+    const guardOutside = useOutsideGuard();
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ContextMenuRoot), { "onUpdate:open": opened }, {
         default: withCtx(() => [
@@ -71,9 +74,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             _: 3
           }, 8, ["disabled", "data-lp-context-menu"]),
-          __props.items.length ? (openBlock(), createBlock(unref(ContextMenuPortal), { key: 0 }, {
+          __props.items.length ? (openBlock(), createBlock(unref(ContextMenuPortal), {
+            key: 0,
+            to: unref(portalTo)
+          }, {
             default: withCtx(() => [
               createVNode(unref(ContextMenuContent), {
+                onInteractOutside: unref(guardOutside),
+                onEscapeKeyDown: unref(guardOutside),
                 "collision-padding": 8,
                 class: normalizeClass(PANEL),
                 "aria-label": __props.title,
@@ -93,10 +101,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   }, null, 8, ["items"])
                 ]),
                 _: 1
-              }, 8, ["aria-label"])
+              }, 8, ["onInteractOutside", "onEscapeKeyDown", "aria-label"])
             ]),
             _: 1
-          })) : createCommentVNode("", true)
+          }, 8, ["to"])) : createCommentVNode("", true)
         ]),
         _: 3
       });