@leavepulse/ui 0.15.5 → 0.16.0

package/dist/chunks/{LpLightbox-BYIA9qne.js → LpLightbox-CWdIsthW.js}

@@ -3,7 +3,7 @@ import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, Di
 import { useZoomPan } from "../composables/useZoomPan.js";
 import { fileNameOf } from "../components/lightbox.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
-const _hoisted_1 = { class: "flex shrink-0 items-center gap-1 p-3 text-sm text-white/70" };
+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,
   class: "px-2 tabular-nums"
@@ -20,7 +20,7 @@ const _hoisted_6 = {
 };
 const _hoisted_7 = ["src", "alt"];
 const _hoisted_8 = ["disabled"];
-const _hoisted_9 = { class: "shrink-0 p-3 pt-2" };
+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 = {
   key: 0,
   class: "mb-2 text-center"
@@ -55,9 +55,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const zoom = useZoomPan({ max: props.maxZoom });
-    computed(() => zoom.scale.value);
-    computed(() => zoom.zoomed.value);
-    computed(() => zoom.panning.value);
+    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 item = computed(() => props.items[current.value]);
     const total = computed(() => props.items.length);
@@ -68,10 +68,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const viewport = ref(null);
     const stripEl = ref(null);
     watch(viewport, (el) => zoom.setViewport(el));
+    const direction = ref(1);
     function go(next) {
       if (!total.value) return;
       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;
       emit("update:index", wrapped);
       emit("change", wrapped, props.items[wrapped]);
     }
@@ -196,7 +198,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     const imageStyle = computed(() => ({
       ...zoom.style.value,
-      rotate: `${rotation.value}deg`
+      rotate: `${rotation.value}deg`,
+      // Consumed by the lightbox-frame-in keyframe; negative when paging backwards.
+      "--frame-from": `${direction.value * 24}px`
     }));
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(DialogRoot), {
@@ -208,7 +212,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             default: withCtx(() => [
               createVNode(unref(DialogOverlay), { class: "fixed inset-0 z-(--z-overlay) bg-black/85 backdrop-blur-sm data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]" }),
               createVNode(unref(DialogContent), {
-                class: "fixed inset-0 z-(--z-modal) flex flex-col outline-none data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]",
+                class: "fixed inset-0 z-(--z-modal) 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",
                 onKeydown
               }, {
                 default: withCtx(() => [
@@ -226,7 +230,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   }),
                   createElementVNode("div", _hoisted_1, [
                     total.value > 1 ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(current.value + 1) + " / " + toDisplayString(total.value), 1)) : createCommentVNode("", true),
-                    unref(zoom).zoomed.value ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(Math.round(unref(zoom).scale.value * 100)) + "% ", 1)) : createCommentVNode("", true),
+                    isZoomed.value ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(Math.round(scale.value * 100)) + "% ", 1)) : createCommentVNode("", true),
                     createElementVNode("div", _hoisted_4, [
                       renderSlot(_ctx.$slots, "actions", {
                         item: item.value,
@@ -306,7 +310,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   createElementVNode("div", {
                     ref_key: "viewport",
                     ref: viewport,
-                    class: normalizeClass(["relative flex min-h-0 flex-1 items-center justify-center overflow-hidden", unref(zoom).panning.value ? "cursor-grabbing" : unref(zoom).zoomed.value ? "cursor-grab" : ""]),
+                    class: normalizeClass(["relative flex min-h-0 flex-1 items-center justify-center overflow-hidden", isPanning.value ? "cursor-grabbing" : isZoomed.value ? "cursor-grab" : ""]),
                     onWheel: _cache[6] || (_cache[6] = //@ts-ignore
                     (...args) => unref(zoom).onWheel && unref(zoom).onWheel(...args)),
                     onPointerdown: onPointerDown,
@@ -341,7 +345,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       "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)] motion-reduce:transition-none",
+                      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),
@@ -388,7 +392,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           key: entry.src + i,
                           "data-index": i,
                           type: "button",
-                          class: normalizeClass(["size-14 shrink-0 overflow-hidden rounded-control outline-none ring-2 transition-[opacity,box-shadow] duration-[var(--duration-fast)] focus-visible:ring-ring", i === current.value ? "opacity-100 ring-brand" : "opacity-45 ring-transparent hover:opacity-80"]),
+                          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}`,
                           onClick: ($event) => go(i)
                         }, [
@@ -398,7 +403,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             class: "size-full object-cover",
                             draggable: "false"
                           }, null, 8, _hoisted_14)
-                        ], 10, _hoisted_13);
+                        ], 14, _hoisted_13);
                       }), 128))
                     ], 512)) : createCommentVNode("", true)
                   ])

package/dist/components/LpLightbox.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpLightbox-BYIA9qne.js";
+import { _ as _sfc_main } from "../chunks/LpLightbox-CWdIsthW.js";
 export {
   _sfc_main as default
 };

package/dist/index.js

@@ -25,7 +25,7 @@ import { _ as _22 } from "./chunks/LpFormField-Bn-ZwC6z.js";
 import { _ as _23 } from "./chunks/LpIcon-CCnX5_2j.js";
 import { _ as _24 } from "./chunks/LpInfraNode-C_PHcthC.js";
 import { _ as _25 } from "./chunks/LpInput-BauZRyzm.js";
-import { _ as _26 } from "./chunks/LpLightbox-BYIA9qne.js";
+import { _ as _26 } from "./chunks/LpLightbox-CWdIsthW.js";
 import { fileNameOf } from "./components/lightbox.js";
 import { _ as _27 } from "./chunks/LpLink-DHwOEp4e.js";
 import { _ as _28 } from "./chunks/LpLogViewer-BvzRZPjs.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.15.5",
+  "version": "0.16.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpLightbox.vue

@@ -94,12 +94,19 @@ const stripEl = ref<HTMLElement | null>(null)
 
 watch(viewport, (el) => zoom.setViewport(el))
 
+// Which way the last navigation went, so the incoming frame slides in from the
+// side it travelled from instead of always drifting the same direction.
+const direction = ref<1 | -1>(1)
+
 function go(next: number) {
   if (!total.value) return
   const wrapped = props.loop
     ? (next + total.value) % total.value
     : Math.min(Math.max(next, 0), total.value - 1)
   if (wrapped === current.value) return
+  // Compare against the raw target, not the wrapped one: stepping past the last
+  // image is still "forward" even though the index jumps back to 0.
+  direction.value = next > current.value ? 1 : -1
   emit("update:index", wrapped)
   emit("change", wrapped, props.items[wrapped])
 }
@@ -250,6 +257,8 @@ async function reencodeToPng(bitmap: ImageBitmap): Promise<Blob> {
 const imageStyle = computed(() => ({
   ...zoom.style.value,
   rotate: `${rotation.value}deg`,
+  // Consumed by the lightbox-frame-in keyframe; negative when paging backwards.
+  "--frame-from": `${direction.value * 24}px`,
 }))
 
 const BTN =
@@ -265,7 +274,7 @@ const ARROW =
         class="fixed inset-0 z-(--z-overlay) bg-black/85 backdrop-blur-sm data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]"
       />
       <DialogContent
-        class="fixed inset-0 z-(--z-modal) flex flex-col outline-none data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]"
+        class="fixed inset-0 z-(--z-modal) 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"
         @keydown="onKeydown"
       >
         <!-- reka wants both for a labelled dialog; the caption is the title. -->
@@ -274,8 +283,11 @@ const ARROW =
           {{ item?.description ?? `Image ${current + 1} of ${total}` }}
         </DialogDescription>
 
-        <!-- Toolbar -->
-        <div class="flex shrink-0 items-center gap-1 p-3 text-sm text-white/70">
+        <!-- Toolbar. Chrome drifts in from its own edge, slightly behind the
+             image, so the picture is what arrives first. -->
+        <div
+          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"
+        >
           <span v-if="total > 1" class="px-2 tabular-nums">{{ current + 1 }} / {{ total }}</span>
           <span v-if="isZoomed" class="px-2 tabular-nums">
             {{ Math.round(scale * 100) }}%
@@ -347,13 +359,16 @@ const ARROW =
             <LpIcon name="lucide:image-off" :size="40" />
             <p class="text-sm">This image couldn't be loaded.</p>
           </div>
+          <!-- Keyed on src so paging remounts the img and replays the slide;
+               without the key Vue patches it in place and the change is a hard
+               cut with no sense of direction. -->
           <img
             v-else-if="item"
             :key="item.src"
             data-lightbox-image
             :src="item.src"
             :alt="item.title ?? ''"
-            class="max-h-full max-w-full select-none object-contain transition-transform duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none"
+            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="imageStyle"
             draggable="false"
             @load="loading = false"
@@ -379,7 +394,9 @@ const ARROW =
         </div>
 
         <!-- Caption + filmstrip -->
-        <div class="shrink-0 p-3 pt-2">
+        <div
+          class="shrink-0 p-3 pt-2 animate-[lightbox-chrome-in_var(--duration-medium)_var(--ease-emphasized)_60ms_both] motion-reduce:animate-none"
+        >
           <slot name="caption" :item="item!" :index="current" :total="total">
             <div v-if="item?.title || item?.description" class="mb-2 text-center">
               <p v-if="item.title" class="truncate text-sm font-medium text-white">
@@ -401,7 +418,8 @@ const ARROW =
               :key="entry.src + i"
               :data-index="i"
               type="button"
-              class="size-14 shrink-0 overflow-hidden rounded-control outline-none ring-2 transition-[opacity,box-shadow] duration-[var(--duration-fast)] focus-visible:ring-ring"
+              :style="{ '--thumb-delay': `${Math.min(i * 30, 240)}ms` }"
+              class="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"
               :class="i === current ? 'opacity-100 ring-brand' : 'opacity-45 ring-transparent hover:opacity-80'"
               :aria-label="entry.title ?? `Image ${i + 1}`"
               @click="go(i)"