@leavepulse/ui 0.68.0 → 0.70.0

package/dist/chunks/{LpLightbox-B9J8rzsj.js → LpLightbox-XJ0LpTcZ.js}

@@ -3,8 +3,11 @@ import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, Di
 import { useLabels } from "../composables/useLpConfig.js";
 import { useZoomPan } from "../composables/useZoomPan.js";
 import { fileNameOf } from "../components/lightbox.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 { _ as _sfc_main$3 } from "./LpLoader-DjJEX8hL.js";
 import { useModalLayer } from "../components/modalDepth.js";
+import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
 const _hoisted_1 = { class: "flex shrink-0 items-center gap-1 p-3 text-sm text-white/70 [--chrome-from:-8px] animate-[lightbox-chrome-in_var(--duration-medium)_var(--ease-emphasized)_60ms_both] motion-reduce:animate-none" };
 const _hoisted_2 = {
   key: 0,
@@ -20,35 +23,34 @@ const _hoisted_6 = ["title"];
 const _hoisted_7 = ["title"];
 const _hoisted_8 = ["title"];
 const _hoisted_9 = ["title"];
-const _hoisted_10 = ["title"];
-const _hoisted_11 = ["disabled", "aria-label"];
-const _hoisted_12 = {
+const _hoisted_10 = ["disabled", "aria-label"];
+const _hoisted_11 = {
   key: 0,
   class: "flex flex-col items-center gap-3 text-white/60"
 };
-const _hoisted_13 = { class: "text-sm" };
-const _hoisted_14 = {
+const _hoisted_12 = { class: "text-sm" };
+const _hoisted_13 = {
   key: 1,
   class: "flex flex-col items-center gap-3 text-white/70"
 };
-const _hoisted_15 = { class: "text-sm font-medium" };
-const _hoisted_16 = ["src", "alt"];
-const _hoisted_17 = ["disabled", "aria-label"];
-const _hoisted_18 = { class: "shrink-0 p-3 pt-2 animate-[lightbox-chrome-in_var(--duration-medium)_var(--ease-emphasized)_60ms_both] motion-reduce:animate-none" };
-const _hoisted_19 = {
+const _hoisted_14 = { class: "text-sm font-medium" };
+const _hoisted_15 = ["src", "alt"];
+const _hoisted_16 = ["disabled", "aria-label"];
+const _hoisted_17 = { class: "shrink-0 p-3 pt-2 animate-[lightbox-chrome-in_var(--duration-medium)_var(--ease-emphasized)_60ms_both] motion-reduce:animate-none" };
+const _hoisted_18 = {
   key: 0,
   class: "mb-2 text-center"
 };
-const _hoisted_20 = {
+const _hoisted_19 = {
   key: 0,
   class: "truncate text-sm font-medium text-white"
 };
-const _hoisted_21 = {
+const _hoisted_20 = {
   key: 1,
   class: "truncate text-xs text-white/55"
 };
-const _hoisted_22 = ["data-index", "aria-label", "onClick"];
-const _hoisted_23 = ["src", "alt"];
+const _hoisted_21 = ["data-index", "aria-label", "onClick"];
+const _hoisted_22 = ["src", "alt"];
 const WHEEL_STEP = 60;
 const BTN = "flex size-9 items-center justify-center rounded-control text-white/80 outline-none transition-colors duration-[var(--duration-fast)] hover:bg-white/15 hover:text-white focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40";
 const ARROW = "absolute top-1/2 z-10 flex size-11 -translate-y-1/2 items-center justify-center rounded-pill bg-black/45 text-white/75 ring-1 ring-white/0 outline-none backdrop-blur-sm transition-[background-color,scale,color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:bg-white/20 hover:text-white hover:ring-white/30 hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-0 motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:active:scale-100";
@@ -276,18 +278,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         save(target.src, name, true);
       }
     }
-    async function copy() {
-      const target = item.value;
-      if (!target) return;
-      try {
-        const response = await fetch(target.src);
-        const blob = await response.blob();
-        const png = blob.type === "image/png" ? blob : await reencodeToPng(await createImageBitmap(blob));
-        await navigator.clipboard.write([new ClipboardItem({ "image/png": png })]);
-        emit("copy", target, true);
-      } catch {
-        emit("copy", target, false);
-      }
+    let copyTarget;
+    async function imageToCopy() {
+      const target = copyTarget = item.value;
+      if (!target) throw new Error("No image");
+      const response = await fetch(target.src);
+      const blob = await response.blob();
+      return blob.type === "image/png" ? blob : reencodeToPng(await createImageBitmap(blob));
+    }
+    function copyDone(ok) {
+      if (copyTarget) emit("copy", copyTarget, ok);
     }
     async function reencodeToPng(bitmap) {
       const canvas = document.createElement("canvas");
@@ -304,19 +304,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       // Consumed by the lightbox-frame-in keyframe; negative when paging backwards.
       "--frame-from": `${direction.value * 24}px`
     }));
+    const portalTo = usePortalTarget();
+    const guardOutside = useOutsideGuard();
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(DialogRoot), {
         open: __props.open,
-        "onUpdate:open": _cache[9] || (_cache[9] = (v) => emit("update:open", v))
+        "onUpdate:open": _cache[11] || (_cache[11] = (v) => emit("update:open", v))
       }, {
         default: withCtx(() => [
-          createVNode(unref(DialogPortal), null, {
+          createVNode(unref(DialogPortal), { to: unref(portalTo) }, {
             default: withCtx(() => [
               createVNode(unref(DialogOverlay), {
                 class: normalizeClass([{ "lp-scrim--covered": unref(layer).covered }, "lp-scrim fixed inset-0 data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]"]),
                 style: normalizeStyle({ zIndex: unref(layer).scrim })
               }, null, 8, ["class", "style"]),
               createVNode(unref(DialogContent), {
+                onInteractOutside: unref(guardOutside),
+                onEscapeKeyDown: unref(guardOutside),
                 ref_key: "contentRef",
                 ref: contentRef,
                 class: "fixed inset-0 flex flex-col outline-none data-[state=open]:animate-[lightbox-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[lightbox-out_140ms_cubic-bezier(0.4,0,1,1)] motion-reduce:animate-none",
@@ -378,18 +382,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           size: 18
                         })
                       ], 8, _hoisted_7)) : createCommentVNode("", true),
-                      __props.copyable ? (openBlock(), createElementBlock("button", {
+                      __props.copyable ? (openBlock(), createBlock(_sfc_main$2, {
                         key: 1,
+                        value: imageToCopy,
+                        "icon-size": 18,
                         class: normalizeClass(BTN),
-                        type: "button",
-                        title: unref(text).copy,
-                        onClick: copy
-                      }, [
-                        createVNode(_sfc_main$1, {
-                          name: "lucide:copy",
-                          size: 18
-                        })
-                      ], 8, _hoisted_8)) : createCommentVNode("", true),
+                        labels: { copy: unref(text).copy },
+                        onCopied: _cache[2] || (_cache[2] = ($event) => copyDone(true)),
+                        onError: _cache[3] || (_cache[3] = ($event) => copyDone(false))
+                      }, null, 8, ["labels"])) : createCommentVNode("", true),
                       __props.downloadable ? (openBlock(), createElementBlock("button", {
                         key: 2,
                         class: normalizeClass(BTN),
@@ -401,7 +402,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           name: "lucide:download",
                           size: 18
                         })
-                      ], 8, _hoisted_9)) : createCommentVNode("", true),
+                      ], 8, _hoisted_8)) : createCommentVNode("", true),
                       createElementVNode("button", {
                         class: normalizeClass(BTN),
                         type: "button",
@@ -412,7 +413,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           name: "lucide:x",
                           size: 20
                         })
-                      ], 8, _hoisted_10)
+                      ], 8, _hoisted_9)
                     ])
                   ]),
                   createElementVNode("div", {
@@ -421,10 +422,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     class: normalizeClass(["relative flex min-h-0 flex-1 items-center justify-center overflow-hidden", isPanning.value ? "cursor-grabbing" : isZoomed.value ? "cursor-grab" : ""]),
                     onWheel: onStageWheel,
                     onPointerdown: onPointerDown,
-                    onPointermove: _cache[7] || (_cache[7] = //@ts-ignore
+                    onPointermove: _cache[9] || (_cache[9] = //@ts-ignore
                     (...args) => unref(zoom).onPointerMove && unref(zoom).onPointerMove(...args)),
                     onPointerup: onPointerUp,
-                    onPointercancel: _cache[8] || (_cache[8] = //@ts-ignore
+                    onPointercancel: _cache[10] || (_cache[10] = //@ts-ignore
                     (...args) => unref(zoom).onPointerUp && unref(zoom).onPointerUp(...args)),
                     onDblclick: onDoubleClick,
                     onClick: onViewportClick
@@ -434,29 +435,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       type: "button",
                       disabled: !canPrev.value,
                       "aria-label": unref(text).previous,
-                      onClick: _cache[2] || (_cache[2] = withModifiers(($event) => go(current.value - 1), ["stop"]))
+                      onClick: _cache[4] || (_cache[4] = withModifiers(($event) => go(current.value - 1), ["stop"]))
                     }, [
                       createVNode(_sfc_main$1, {
                         name: "lucide:chevron-left",
                         size: 24
                       })
-                    ], 10, _hoisted_11),
-                    failed.value ? (openBlock(), createElementBlock("div", _hoisted_12, [
+                    ], 10, _hoisted_10),
+                    failed.value ? (openBlock(), createElementBlock("div", _hoisted_11, [
                       createVNode(_sfc_main$1, {
                         name: "lucide:image-off",
                         size: 40
                       }),
-                      createElementVNode("p", _hoisted_13, toDisplayString(unref(text).failed), 1)
-                    ])) : item.value && covered(current.value) ? (openBlock(), createElementBlock("div", _hoisted_14, [
+                      createElementVNode("p", _hoisted_12, toDisplayString(unref(text).failed), 1)
+                    ])) : item.value && covered(current.value) ? (openBlock(), createElementBlock("div", _hoisted_13, [
                       createVNode(_sfc_main$1, {
                         name: "lucide:eye-off",
                         size: 36
                       }),
-                      createElementVNode("p", _hoisted_15, toDisplayString(unref(text).spoiler), 1),
+                      createElementVNode("p", _hoisted_14, toDisplayString(unref(text).spoiler), 1),
                       createElementVNode("button", {
                         type: "button",
                         class: "rounded-control bg-white/15 px-3 py-1.5 text-sm text-white outline-none transition-colors hover:bg-white/25 focus-visible:ring-2 focus-visible:ring-ring",
-                        onClick: _cache[3] || (_cache[3] = withModifiers(($event) => reveal(current.value), ["stop"]))
+                        onClick: _cache[5] || (_cache[5] = withModifiers(($event) => reveal(current.value), ["stop"]))
                       }, toDisplayString(unref(text).reveal), 1)
                     ])) : item.value ? (openBlock(), createElementBlock("img", {
                       key: `${current.value}:${item.value.src}`,
@@ -466,37 +467,36 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       class: "max-h-full max-w-full select-none object-contain transition-transform duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] animate-[lightbox-frame-in_var(--duration-medium)_var(--ease-emphasized)] motion-reduce:animate-none motion-reduce:transition-none",
                       style: normalizeStyle(imageStyle.value),
                       draggable: "false",
-                      onLoad: _cache[4] || (_cache[4] = ($event) => loading.value = false),
-                      onError: _cache[5] || (_cache[5] = ($event) => (failed.value = true, loading.value = false))
-                    }, null, 44, _hoisted_16)) : createCommentVNode("", true),
-                    loading.value && !failed.value && !covered(current.value) ? (openBlock(), createBlock(_sfc_main$1, {
-                      key: 3,
-                      name: "lucide:loader-circle",
-                      size: 28,
-                      class: "absolute animate-spin text-white/50"
-                    })) : createCommentVNode("", true),
+                      onLoad: _cache[6] || (_cache[6] = ($event) => loading.value = false),
+                      onError: _cache[7] || (_cache[7] = ($event) => (failed.value = true, loading.value = false))
+                    }, null, 44, _hoisted_15)) : createCommentVNode("", true),
+                    createVNode(_sfc_main$3, {
+                      active: loading.value && !failed.value && !covered(current.value),
+                      size: "inline",
+                      class: "absolute text-[28px] text-white/50"
+                    }, null, 8, ["active"]),
                     createElementVNode("button", {
                       class: normalizeClass([ARROW, "right-4"]),
                       type: "button",
                       disabled: !canNext.value,
                       "aria-label": unref(text).next,
-                      onClick: _cache[6] || (_cache[6] = withModifiers(($event) => go(current.value + 1), ["stop"]))
+                      onClick: _cache[8] || (_cache[8] = withModifiers(($event) => go(current.value + 1), ["stop"]))
                     }, [
                       createVNode(_sfc_main$1, {
                         name: "lucide:chevron-right",
                         size: 24
                       })
-                    ], 10, _hoisted_17)
+                    ], 10, _hoisted_16)
                   ], 34),
-                  createElementVNode("div", _hoisted_18, [
+                  createElementVNode("div", _hoisted_17, [
                     renderSlot(_ctx.$slots, "caption", {
                       item: item.value,
                       index: current.value,
                       total: total.value
                     }, () => [
-                      item.value?.title || item.value?.description ? (openBlock(), createElementBlock("div", _hoisted_19, [
-                        item.value.title ? (openBlock(), createElementBlock("p", _hoisted_20, toDisplayString(item.value.title), 1)) : createCommentVNode("", true),
-                        item.value.description ? (openBlock(), createElementBlock("p", _hoisted_21, toDisplayString(item.value.description), 1)) : createCommentVNode("", true)
+                      item.value?.title || item.value?.description ? (openBlock(), createElementBlock("div", _hoisted_18, [
+                        item.value.title ? (openBlock(), createElementBlock("p", _hoisted_19, toDisplayString(item.value.title), 1)) : createCommentVNode("", true),
+                        item.value.description ? (openBlock(), createElementBlock("p", _hoisted_20, toDisplayString(item.value.description), 1)) : createCommentVNode("", true)
                       ])) : createCommentVNode("", true)
                     ]),
                     showStrip.value && total.value > 1 ? (openBlock(), createElementBlock("div", {
@@ -520,17 +520,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             alt: entry.title ?? "",
                             class: normalizeClass(["size-full object-cover", covered(i) ? "scale-110 blur-md" : ""]),
                             draggable: "false"
-                          }, null, 10, _hoisted_23)
-                        ], 14, _hoisted_22);
+                          }, null, 10, _hoisted_22)
+                        ], 14, _hoisted_21);
                       }), 128))
                     ], 512)) : createCommentVNode("", true)
                   ])
                 ]),
                 _: 3
-              }, 8, ["style"])
+              }, 8, ["onInteractOutside", "onEscapeKeyDown", "style"])
             ]),
             _: 3
-          })
+          }, 8, ["to"])
         ]),
         _: 3
       }, 8, ["open"]);

package/dist/chunks/LpLoader-DjJEX8hL.js

@@ -0,0 +1,92 @@
+import { defineComponent, useSlots, computed, openBlock, createElementBlock, unref, createVNode, withCtx, mergeProps, renderSlot, createBlock, Transition, createCommentVNode } from "vue";
+import { useLabels } from "../composables/useLpConfig.js";
+import { useLoadingGate } from "../composables/useLoadingGate.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { _ as _sfc_main$2 } from "./LoaderMark-C1dubiKn.js";
+import { _ as _sfc_main$1 } from "./LpSwap-DzE6M3Mg.js";
+import { toneLook } from "../components/tone.js";
+const _hoisted_1 = ["aria-busy"];
+const _hoisted_2 = {
+  key: 0,
+  class: "flex justify-center py-8"
+};
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpLoader",
+  props: {
+    variant: { default: "spinner" },
+    size: { default: "md" },
+    tone: { default: "current" },
+    active: { type: Boolean, default: true },
+    delay: { default: 150 },
+    minVisible: { default: 400 },
+    label: {},
+    track: { type: Boolean, default: false },
+    labels: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const text = useLabels("loader", { loading: "Loading…" }, () => props.labels);
+    const shown = useLoadingGate(() => props.active, {
+      delay: () => props.delay,
+      minVisible: () => props.minVisible
+    });
+    const slots = useSlots();
+    const wraps = computed(() => !!slots.default);
+    const { class: rootClass, attrs: rest } = useMergedAttrs(() => {
+      const tone = props.tone === "current" ? "" : toneLook(props.tone).text;
+      if (props.variant === "bar") {
+        return `flex w-full min-w-12 flex-col gap-1.5 ${tone}`;
+      }
+      return `inline-flex items-center gap-2 align-middle ${tone}`;
+    });
+    const spoken = computed(() => props.label || text.value.loading);
+    return (_ctx, _cache) => {
+      return wraps.value ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        "aria-busy": unref(shown) ? "true" : void 0
+      }, [
+        createVNode(_sfc_main$1, {
+          "swap-key": unref(shown) ? "loading" : "content"
+        }, {
+          default: withCtx(() => [
+            unref(shown) ? (openBlock(), createElementBlock("div", _hoisted_2, [
+              createVNode(_sfc_main$2, mergeProps({ class: unref(rootClass) }, unref(rest), {
+                variant: __props.variant,
+                size: __props.size,
+                track: __props.track,
+                label: __props.label,
+                spoken: spoken.value
+              }), null, 16, ["class", "variant", "size", "track", "label", "spoken"])
+            ])) : renderSlot(_ctx.$slots, "default", { key: 1 })
+          ]),
+          _: 3
+        }, 8, ["swap-key"])
+      ], 8, _hoisted_1)) : (openBlock(), createBlock(Transition, {
+        key: 1,
+        "enter-active-class": "transition-opacity duration-(--duration-fast) ease-(--ease-emphasized) motion-reduce:transition-none",
+        "enter-from-class": "opacity-0",
+        "leave-active-class": "transition-opacity duration-(--duration-fast) ease-out motion-reduce:transition-none",
+        "leave-to-class": "opacity-0"
+      }, {
+        default: withCtx(() => [
+          unref(shown) ? (openBlock(), createBlock(_sfc_main$2, mergeProps({
+            key: 0,
+            class: unref(rootClass)
+          }, unref(rest), {
+            variant: __props.variant,
+            size: __props.size,
+            track: __props.track,
+            label: __props.label,
+            spoken: spoken.value
+          }), null, 16, ["class", "variant", "size", "track", "label", "spoken"])) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }));
+    };
+  }
+});
+export {
+  _sfc_main as _
+};