@leavepulse/ui 0.43.4 → 0.44.0

package/dist/chunks/{LpLightbox-2sYVMY-S.js → LpLightbox-Mr0W_6HK.js}

@@ -1,5 +1,6 @@
-import { defineComponent, watch, onBeforeUnmount, computed, ref, nextTick, openBlock, createBlock, unref, withCtx, createVNode, normalizeStyle, normalizeClass, createTextVNode, toDisplayString, createElementVNode, createElementBlock, createCommentVNode, renderSlot, withModifiers, Fragment, renderList } from "vue";
+import { defineComponent, ref, watch, onBeforeUnmount, computed, nextTick, openBlock, createBlock, unref, withCtx, createVNode, normalizeStyle, normalizeClass, createTextVNode, toDisplayString, createElementVNode, createElementBlock, createCommentVNode, renderSlot, withModifiers, Fragment, renderList } from "vue";
 import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription } from "reka-ui";
+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-CCnX5_2j.js";
@@ -14,28 +15,40 @@ const _hoisted_3 = {
   class: "px-2 tabular-nums"
 };
 const _hoisted_4 = { class: "ml-auto flex items-center gap-1" };
-const _hoisted_5 = ["disabled"];
-const _hoisted_6 = {
+const _hoisted_5 = ["title"];
+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 = {
   key: 0,
   class: "flex flex-col items-center gap-3 text-white/60"
 };
-const _hoisted_7 = ["src", "alt"];
-const _hoisted_8 = ["disabled"];
-const _hoisted_9 = { 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_10 = {
+const _hoisted_13 = { class: "text-sm" };
+const _hoisted_14 = {
+  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 = {
   key: 0,
   class: "mb-2 text-center"
 };
-const _hoisted_11 = {
+const _hoisted_20 = {
   key: 0,
   class: "truncate text-sm font-medium text-white"
 };
-const _hoisted_12 = {
+const _hoisted_21 = {
   key: 1,
   class: "truncate text-xs text-white/55"
 };
-const _hoisted_13 = ["data-index", "aria-label", "onClick"];
-const _hoisted_14 = ["src", "alt"];
+const _hoisted_22 = ["data-index", "aria-label", "onClick"];
+const _hoisted_23 = ["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";
@@ -50,20 +63,44 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     downloadable: { type: Boolean, default: true },
     copyable: { type: Boolean, default: false },
     loop: { type: Boolean, default: true },
-    maxZoom: { default: 8 }
+    maxZoom: { default: 8 },
+    labels: {}
   },
   emits: ["update:open", "update:index", "change", "download", "copy"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const { claim, release, layer } = useModalLayer();
+    const text = useLabels(
+      "lightbox",
+      {
+        viewer: "Image viewer",
+        position: "Image {index} of {total}",
+        previous: "Previous image",
+        next: "Next image",
+        zoomIn: "Zoom in (+)",
+        zoomOut: "Zoom out (−)",
+        rotate: "Rotate (R)",
+        copy: "Copy image",
+        download: "Download",
+        close: "Close (Esc)",
+        failed: "This image couldn't be loaded.",
+        spoiler: "Spoiler",
+        reveal: "Show image"
+      },
+      () => props.labels
+    );
+    const position = (i) => text.value.position.replace("{index}", String(i + 1)).replace("{total}", String(props.items.length));
+    const contentRef = ref(null);
+    const { claim, release, layer } = useModalLayer({ element: () => contentRef.value?.$el });
     watch(() => props.open, (open) => open ? claim() : release(), { immediate: true });
     onBeforeUnmount(release);
-    const zoom = useZoomPan({ max: props.maxZoom });
+    const zoom = useZoomPan({ max: () => props.maxZoom });
     const scale = computed(() => zoom.scale.value);
     const isZoomed = computed(() => zoom.zoomed.value);
     const isPanning = computed(() => zoom.panning.value);
-    const current = computed(() => Math.min(Math.max(props.index, 0), Math.max(props.items.length - 1, 0)));
+    const shown = ref(props.index);
+    watch(() => props.index, (i) => shown.value = i);
+    const current = computed(() => Math.min(Math.max(shown.value, 0), Math.max(props.items.length - 1, 0)));
     const item = computed(() => props.items[current.value]);
     const total = computed(() => props.items.length);
     const showStrip = computed(() => props.filmstrip ?? total.value > 1);
@@ -79,6 +116,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const wrapped = props.loop ? (next + total.value) % total.value : Math.min(Math.max(next, 0), total.value - 1);
       if (wrapped === current.value) return;
       direction.value = next > current.value ? 1 : -1;
+      shown.value = wrapped;
       emit("update:index", wrapped);
       emit("change", wrapped, props.items[wrapped]);
     }
@@ -124,6 +162,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function close() {
       emit("update:open", false);
     }
+    const revealed = ref(/* @__PURE__ */ new Set());
+    const covered = (i) => !!props.items[i]?.spoiler && !revealed.value.has(i);
+    function reveal(i) {
+      revealed.value = new Set(revealed.value).add(i);
+    }
+    watch(
+      () => props.open,
+      (open) => {
+        if (!open) revealed.value = /* @__PURE__ */ new Set();
+      }
+    );
     function onKeydown(e) {
       switch (e.key) {
         case "ArrowRight":
@@ -190,18 +239,43 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (e.target.closest("[data-lightbox-image]")) return;
       close();
     }
-    async function download() {
-      const target = item.value;
-      if (!target) return;
-      emit("download", target);
+    function sameOrigin(src) {
+      try {
+        const url = new URL(src, window.location.href);
+        return url.protocol === "blob:" || url.protocol === "data:" || url.origin === window.location.origin;
+      } catch {
+        return false;
+      }
+    }
+    function save(href, name, newTab = false) {
       const a = document.createElement("a");
-      a.href = target.src;
-      a.download = fileNameOf(target);
-      a.rel = "noopener";
+      a.href = href;
+      if (newTab) {
+        a.target = "_blank";
+        a.rel = "noopener";
+      } else {
+        a.download = name;
+      }
       document.body.appendChild(a);
       a.click();
       a.remove();
     }
+    async function download() {
+      const target = item.value;
+      if (!target) return;
+      emit("download", target);
+      const name = fileNameOf(target);
+      if (sameOrigin(target.src)) return save(target.src, name);
+      try {
+        const response = await fetch(target.src, { mode: "cors" });
+        if (!response.ok) throw new Error(String(response.status));
+        const url = URL.createObjectURL(await response.blob());
+        save(url, name);
+        window.setTimeout(() => URL.revokeObjectURL(url), 0);
+      } catch {
+        save(target.src, name, true);
+      }
+    }
     async function copy() {
       const target = item.value;
       if (!target) return;
@@ -233,7 +307,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(DialogRoot), {
         open: __props.open,
-        "onUpdate:open": _cache[8] || (_cache[8] = (v) => emit("update:open", v))
+        "onUpdate:open": _cache[9] || (_cache[9] = (v) => emit("update:open", v))
       }, {
         default: withCtx(() => [
           createVNode(unref(DialogPortal), null, {
@@ -243,6 +317,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 style: normalizeStyle({ zIndex: unref(layer).scrim })
               }, null, 8, ["class", "style"]),
               createVNode(unref(DialogContent), {
+                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",
                 style: normalizeStyle({ zIndex: unref(layer).panel }),
                 onKeydown
@@ -250,13 +326,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createVNode(unref(DialogTitle), { class: "sr-only" }, {
                     default: withCtx(() => [
-                      createTextVNode(toDisplayString(item.value?.title ?? "Image viewer"), 1)
+                      createTextVNode(toDisplayString(item.value?.title ?? unref(text).viewer), 1)
                     ]),
                     _: 1
                   }),
                   createVNode(unref(DialogDescription), { class: "sr-only" }, {
                     default: withCtx(() => [
-                      createTextVNode(toDisplayString(item.value?.description ?? `Image ${current.value + 1} of ${total.value}`), 1)
+                      createTextVNode(toDisplayString(item.value?.description ?? position(current.value)), 1)
                     ]),
                     _: 1
                   }),
@@ -271,72 +347,72 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       createElementVNode("button", {
                         class: normalizeClass(BTN),
                         type: "button",
-                        title: "Zoom out (−)",
+                        title: unref(text).zoomOut,
                         onClick: _cache[0] || (_cache[0] = ($event) => unref(zoom).zoomBy(1 / 1.3))
                       }, [
                         createVNode(_sfc_main$1, {
                           name: "lucide:zoom-out",
                           size: 18
                         })
-                      ]),
+                      ], 8, _hoisted_5),
                       createElementVNode("button", {
                         class: normalizeClass(BTN),
                         type: "button",
-                        title: "Zoom in (+)",
+                        title: unref(text).zoomIn,
                         onClick: _cache[1] || (_cache[1] = ($event) => unref(zoom).zoomBy(1.3))
                       }, [
                         createVNode(_sfc_main$1, {
                           name: "lucide:zoom-in",
                           size: 18
                         })
-                      ]),
+                      ], 8, _hoisted_6),
                       __props.rotatable ? (openBlock(), createElementBlock("button", {
                         key: 0,
                         class: normalizeClass(BTN),
                         type: "button",
-                        title: "Rotate (R)",
+                        title: unref(text).rotate,
                         onClick: rotate
                       }, [
                         createVNode(_sfc_main$1, {
                           name: "lucide:rotate-cw",
                           size: 18
                         })
-                      ])) : createCommentVNode("", true),
+                      ], 8, _hoisted_7)) : createCommentVNode("", true),
                       __props.copyable ? (openBlock(), createElementBlock("button", {
                         key: 1,
                         class: normalizeClass(BTN),
                         type: "button",
-                        title: "Copy image",
+                        title: unref(text).copy,
                         onClick: copy
                       }, [
                         createVNode(_sfc_main$1, {
                           name: "lucide:copy",
                           size: 18
                         })
-                      ])) : createCommentVNode("", true),
+                      ], 8, _hoisted_8)) : createCommentVNode("", true),
                       __props.downloadable ? (openBlock(), createElementBlock("button", {
                         key: 2,
                         class: normalizeClass(BTN),
                         type: "button",
-                        title: "Download",
+                        title: unref(text).download,
                         onClick: download
                       }, [
                         createVNode(_sfc_main$1, {
                           name: "lucide:download",
                           size: 18
                         })
-                      ])) : createCommentVNode("", true),
+                      ], 8, _hoisted_9)) : createCommentVNode("", true),
                       createElementVNode("button", {
                         class: normalizeClass(BTN),
                         type: "button",
-                        title: "Close (Esc)",
+                        title: unref(text).close,
                         onClick: close
                       }, [
                         createVNode(_sfc_main$1, {
                           name: "lucide:x",
                           size: 20
                         })
-                      ])
+                      ], 8, _hoisted_10)
                     ])
                   ]),
                   createElementVNode("div", {
@@ -345,10 +421,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[6] || (_cache[6] = //@ts-ignore
+                    onPointermove: _cache[7] || (_cache[7] = //@ts-ignore
                     (...args) => unref(zoom).onPointerMove && unref(zoom).onPointerMove(...args)),
                     onPointerup: onPointerUp,
-                    onPointercancel: _cache[7] || (_cache[7] = //@ts-ignore
+                    onPointercancel: _cache[8] || (_cache[8] = //@ts-ignore
                     (...args) => unref(zoom).onPointerUp && unref(zoom).onPointerUp(...args)),
                     onDblclick: onDoubleClick,
                     onClick: onViewportClick
@@ -357,33 +433,44 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       class: normalizeClass([ARROW, "left-4"]),
                       type: "button",
                       disabled: !canPrev.value,
-                      "aria-label": "Previous image",
+                      "aria-label": unref(text).previous,
                       onClick: _cache[2] || (_cache[2] = withModifiers(($event) => go(current.value - 1), ["stop"]))
                     }, [
                       createVNode(_sfc_main$1, {
                         name: "lucide:chevron-left",
                         size: 24
                       })
-                    ], 10, _hoisted_5),
-                    failed.value ? (openBlock(), createElementBlock("div", _hoisted_6, [
+                    ], 10, _hoisted_11),
+                    failed.value ? (openBlock(), createElementBlock("div", _hoisted_12, [
                       createVNode(_sfc_main$1, {
                         name: "lucide:image-off",
                         size: 40
                       }),
-                      _cache[9] || (_cache[9] = createElementVNode("p", { class: "text-sm" }, "This image couldn't be loaded.", -1))
+                      createElementVNode("p", _hoisted_13, toDisplayString(unref(text).failed), 1)
+                    ])) : item.value && covered(current.value) ? (openBlock(), createElementBlock("div", _hoisted_14, [
+                      createVNode(_sfc_main$1, {
+                        name: "lucide:eye-off",
+                        size: 36
+                      }),
+                      createElementVNode("p", _hoisted_15, 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"]))
+                      }, toDisplayString(unref(text).reveal), 1)
                     ])) : item.value ? (openBlock(), createElementBlock("img", {
-                      key: item.value.src,
+                      key: `${current.value}:${item.value.src}`,
                       "data-lightbox-image": "",
                       src: item.value.src,
                       alt: item.value.title ?? "",
                       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[3] || (_cache[3] = ($event) => loading.value = false),
-                      onError: _cache[4] || (_cache[4] = ($event) => (failed.value = true, loading.value = false))
-                    }, null, 44, _hoisted_7)) : createCommentVNode("", true),
-                    loading.value && !failed.value ? (openBlock(), createBlock(_sfc_main$1, {
-                      key: 2,
+                      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"
@@ -392,24 +479,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       class: normalizeClass([ARROW, "right-4"]),
                       type: "button",
                       disabled: !canNext.value,
-                      "aria-label": "Next image",
-                      onClick: _cache[5] || (_cache[5] = withModifiers(($event) => go(current.value + 1), ["stop"]))
+                      "aria-label": unref(text).next,
+                      onClick: _cache[6] || (_cache[6] = withModifiers(($event) => go(current.value + 1), ["stop"]))
                     }, [
                       createVNode(_sfc_main$1, {
                         name: "lucide:chevron-right",
                         size: 24
                       })
-                    ], 10, _hoisted_8)
+                    ], 10, _hoisted_17)
                   ], 34),
-                  createElementVNode("div", _hoisted_9, [
+                  createElementVNode("div", _hoisted_18, [
                     renderSlot(_ctx.$slots, "caption", {
                       item: item.value,
                       index: current.value,
                       total: total.value
                     }, () => [
-                      item.value?.title || item.value?.description ? (openBlock(), createElementBlock("div", _hoisted_10, [
-                        item.value.title ? (openBlock(), createElementBlock("p", _hoisted_11, toDisplayString(item.value.title), 1)) : createCommentVNode("", true),
-                        item.value.description ? (openBlock(), createElementBlock("p", _hoisted_12, toDisplayString(item.value.description), 1)) : createCommentVNode("", true)
+                      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)
                       ])) : createCommentVNode("", true)
                     ]),
                     showStrip.value && total.value > 1 ? (openBlock(), createElementBlock("div", {
@@ -425,16 +512,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           type: "button",
                           style: normalizeStyle({ "--thumb-delay": `${Math.min(i * 30, 240)}ms` }),
                           class: normalizeClass(["size-14 shrink-0 overflow-hidden rounded-control outline-none ring-2 transition-[opacity,box-shadow,scale] duration-[var(--duration-fast)] hover:scale-105 focus-visible:ring-ring animate-[lightbox-chrome-in_var(--duration-medium)_var(--ease-emphasized)_both] [animation-delay:var(--thumb-delay)] motion-reduce:animate-none", i === current.value ? "opacity-100 ring-brand" : "opacity-45 ring-transparent hover:opacity-80"]),
-                          "aria-label": entry.title ?? `Image ${i + 1}`,
+                          "aria-label": entry.title ?? position(i),
                           onClick: ($event) => go(i)
                         }, [
                           createElementVNode("img", {
                             src: entry.thumb ?? entry.src,
                             alt: entry.title ?? "",
-                            class: "size-full object-cover",
+                            class: normalizeClass(["size-full object-cover", covered(i) ? "scale-110 blur-md" : ""]),
                             draggable: "false"
-                          }, null, 8, _hoisted_14)
-                        ], 14, _hoisted_13);
+                          }, null, 10, _hoisted_23)
+                        ], 14, _hoisted_22);
                       }), 128))
                     ], 512)) : createCommentVNode("", true)
                   ])

package/dist/chunks/{LpLink-DCND-zyu.js → LpLink-Krkjhe_y.js}

@@ -1,21 +1,31 @@
 import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, renderSlot } from "vue";
+import { useLinkComponent } from "../composables/useLpConfig.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { resolveLink } from "../components/link.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   __name: "LpLink",
   props: {
     href: {},
+    to: {},
     external: { type: Boolean },
     muted: { type: Boolean },
     tone: {},
-    as: { default: "a" },
+    as: {},
     variant: { default: "default" },
     revealOn: { default: "self" }
   },
   setup(__props) {
     const props = __props;
-    const isAnchor = computed(() => props.as === "a");
+    const linkComponent = useLinkComponent();
+    const resolved = computed(() => {
+      if (props.as) {
+        return props.as === "a" ? { is: "a", props: { href: props.href } } : { is: props.as, props: props.to != null ? { to: props.to } : { href: props.href } };
+      }
+      const component = props.external ? "a" : linkComponent.value;
+      return resolveLink(component, { to: props.to, href: props.href }) ?? { is: "a", props: {} };
+    });
     const rel = computed(() => props.external ? "noopener noreferrer" : void 0);
     const target = computed(() => props.external ? "_blank" : void 0);
     const colorClass = computed(() => {
@@ -47,17 +57,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       ].join(" ")
     );
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({
-        href: isAnchor.value ? __props.href : void 0,
+      return openBlock(), createBlock(resolveDynamicComponent(resolved.value.is), mergeProps({ ...resolved.value.props, ...unref(rest) }, {
         target: target.value,
         rel: rel.value,
         class: unref(rootClass)
-      }, unref(rest)), {
+      }), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 16, ["href", "target", "rel", "class"]);
+      }, 16, ["target", "rel", "class"]);
     };
   }
 });