@leavepulse/ui 0.32.0 → 0.33.0

package/dist/chunks/{LpLightbox-Cixfxezw.js → LpLightbox-oLqyjOln.js}

@@ -37,7 +37,7 @@ const _hoisted_13 = ["data-index", "aria-label", "onClick"];
 const _hoisted_14 = ["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/90 outline-none backdrop-blur-sm transition-[background-color,scale] duration-[var(--duration-fast)] hover:bg-black/65 hover:scale-105 focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-0";
+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";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpLightbox",
   props: {

package/dist/chunks/{LpMediaGallery-t1z3bQcY.js → LpMediaGallery-Cid7PGYx.js}

@@ -1,17 +1,21 @@
 import { defineComponent, ref, computed, openBlock, createElementBlock, renderSlot, mergeProps, unref, Fragment, renderList, normalizeClass, createElementVNode, toDisplayString, createVNode, createCommentVNode, createBlock } from "vue";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$2 } from "./LpLightbox-Cixfxezw.js";
+import { _ as _sfc_main$2 } from "./LpLightbox-oLqyjOln.js";
 const _hoisted_1 = { key: 0 };
 const _hoisted_2 = ["aria-label"];
 const _hoisted_3 = ["aria-label", "onClick"];
 const _hoisted_4 = ["src", "alt"];
 const _hoisted_5 = {
   key: 0,
-  class: "pointer-events-none absolute inset-0 flex items-center justify-center text-lg font-medium text-white"
+  class: "pointer-events-none absolute inset-0 flex items-center justify-center"
 };
 const _hoisted_6 = {
   key: 1,
+  class: "pointer-events-none absolute inset-0 flex items-center justify-center text-lg font-medium text-white"
+};
+const _hoisted_7 = {
+  key: 2,
   class: "pointer-events-none absolute inset-0 flex items-center justify-center bg-black/0 opacity-0 transition-[background-color,opacity] duration-[var(--duration-fast)] group-hover:bg-black/25 group-hover:opacity-100 motion-reduce:transition-none",
   "aria-hidden": "true"
 };
@@ -28,7 +32,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     rotatable: { type: Boolean, default: true },
     ariaLabel: { default: "Media" }
   },
-  emits: ["select", "update:open"],
+  emits: ["select", "reveal", "update:open"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -111,16 +115,37 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!item) return;
       emit("select", item, i);
       if (!props.openable) return;
-      index.value = i;
+      const at = openIndexOf(i);
+      if (at === -1) return;
+      index.value = at;
       open.value = true;
       emit("update:open", true);
     }
     function openOverflow() {
       activate(visible.value.length);
     }
+    const revealed = ref(/* @__PURE__ */ new Set());
+    function isHidden(item) {
+      return Boolean(item.spoiler) && !revealed.value.has(item.src);
+    }
+    function reveal(item) {
+      revealed.value = new Set(revealed.value).add(item.src);
+      emit("reveal", item);
+    }
+    const openItems = computed(() => props.items.filter((item) => !isHidden(item)));
+    function openIndexOf(i) {
+      const item = props.items[i];
+      return item ? openItems.value.indexOf(item) : -1;
+    }
     __expose({
       /** Open the lightbox at an index — for a "view all" button outside the grid. */
-      openAt: (i) => activate(i)
+      openAt: (i) => activate(i),
+      /** Uncover every spoiler in the set. */
+      revealAll: () => {
+        const next = new Set(revealed.value);
+        for (const item of props.items) if (item.spoiler) next.add(item.src);
+        revealed.value = next;
+      }
     });
     return (_ctx, _cache) => {
       return !__props.items.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
@@ -141,8 +166,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               __props.openable ? "cursor-pointer" : "cursor-default",
               "focus-visible:ring-2 focus-visible:ring-ring"
             ]),
-            "aria-label": hiddenCount.value && i === visible.value.length - 1 ? `Show ${hiddenCount.value} more` : item.title || `Image ${i + 1} of ${__props.items.length}`,
-            onClick: ($event) => hiddenCount.value && i === visible.value.length - 1 ? openOverflow() : activate(i)
+            "aria-label": isHidden(item) ? "Spoiler — show image" : hiddenCount.value && i === visible.value.length - 1 ? `Show ${hiddenCount.value} more` : item.title || `Image ${i + 1} of ${__props.items.length}`,
+            onClick: ($event) => isHidden(item) ? reveal(item) : hiddenCount.value && i === visible.value.length - 1 ? openOverflow() : activate(i)
           }, [
             renderSlot(_ctx.$slots, "item", {
               item,
@@ -150,16 +175,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, () => [
               createElementVNode("img", {
                 src: item.thumb || item.src,
-                alt: item.title || "",
+                alt: isHidden(item) ? "" : item.title || "",
                 loading: "lazy",
                 decoding: "async",
-                class: normalizeClass([
-                  "size-full object-cover transition-transform duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] group-hover:scale-[1.03] motion-reduce:transition-none motion-reduce:group-hover:scale-100",
-                  hiddenCount.value && i === visible.value.length - 1 ? "scale-[1.06] blur-[2px] brightness-[0.45] group-hover:scale-[1.06]" : ""
-                ])
+                class: normalizeClass(["size-full object-cover transition-transform duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] group-hover:scale-[1.03] motion-reduce:transition-none motion-reduce:group-hover:scale-100", [
+                  isHidden(item) ? "scale-[1.12] blur-[18px] brightness-[0.6] saturate-[1.1] group-hover:scale-[1.12]" : "",
+                  !isHidden(item) && hiddenCount.value && i === visible.value.length - 1 ? "scale-[1.06] blur-[2px] brightness-[0.45] group-hover:scale-[1.06]" : ""
+                ]])
               }, null, 10, _hoisted_4)
             ]),
-            hiddenCount.value && i === visible.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_5, " +" + toDisplayString(hiddenCount.value), 1)) : __props.openable ? (openBlock(), createElementBlock("span", _hoisted_6, [
+            isHidden(item) ? (openBlock(), createElementBlock("span", _hoisted_5, [..._cache[2] || (_cache[2] = [
+              createElementVNode("span", { class: "rounded-pill bg-black/55 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-white" }, " Spoiler ", -1)
+            ])])) : hiddenCount.value && i === visible.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_6, " +" + toDisplayString(hiddenCount.value), 1)) : __props.openable ? (openBlock(), createElementBlock("span", _hoisted_7, [
               createVNode(_sfc_main$1, {
                 name: "lucide:maximize-2",
                 size: 18,
@@ -174,7 +201,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
           index: index.value,
           "onUpdate:index": _cache[1] || (_cache[1] = ($event) => index.value = $event),
-          items: __props.items,
+          items: openItems.value,
           downloadable: __props.downloadable,
           rotatable: __props.rotatable
         }, null, 8, ["open", "index", "items", "downloadable", "rotatable"])) : createCommentVNode("", true)

package/dist/components/LpLightbox.vue.js

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

package/dist/components/LpMediaGallery.vue.d.ts

@@ -45,12 +45,16 @@ type __VLS_Slots = {
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     /** Open the lightbox at an index — for a "view all" button outside the grid. */
     openAt: (i: number) => void;
+    /** Uncover every spoiler in the set. */
+    revealAll: () => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     select: (item: LightboxItem, index: number) => any;
     "update:open": (value: boolean) => any;
+    reveal: (item: LightboxItem) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((item: LightboxItem, index: number) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onReveal?: ((item: LightboxItem) => any) | undefined;
 }>, {
     columns: number | {
         base?: number;

package/dist/components/LpMediaGallery.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpMediaGallery-t1z3bQcY.js";
+import { _ as _sfc_main } from "../chunks/LpMediaGallery-Cid7PGYx.js";
 export {
   _sfc_main as default
 };

package/dist/components/lightbox.d.ts

@@ -9,6 +9,16 @@ export interface LightboxItem {
     description?: string;
     /** Filename used when downloading; derived from `src` when absent. */
     filename?: string;
+    /**
+     * Hide this image behind a cover until someone asks for it — a spoiler, a
+     * screenshot of something not everyone in the channel has reached yet, a
+     * picture that should not appear in a scroll past.
+     *
+     * A property of the ITEM rather than of the grid showing it: which images are
+     * spoilers is a fact about the images, and the usual set is a mixed one, with
+     * a marked picture sitting beside plain ones.
+     */
+    spoiler?: boolean;
 }
 /** Last path segment of a URL, or a fallback — used to name a download. */
 export declare function fileNameOf(item: LightboxItem, fallback?: string): string;

package/dist/index.js

@@ -35,11 +35,11 @@ import { _ as _27 } from "./chunks/LpIcon-CCnX5_2j.js";
 import { default as default5 } from "./components/LpImageEditor.vue.js";
 import { _ as _28 } from "./chunks/LpInfraNode-Ds_8SZgN.js";
 import { _ as _29 } from "./chunks/LpInput-9EXWUM9B.js";
-import { _ as _30 } from "./chunks/LpLightbox-Cixfxezw.js";
+import { _ as _30 } from "./chunks/LpLightbox-oLqyjOln.js";
 import { fileNameOf } from "./components/lightbox.js";
 import { _ as _31 } from "./chunks/LpLink-DCND-zyu.js";
 import { _ as _32 } from "./chunks/LpLogViewer-y53ZqSVq.js";
-import { _ as _33 } from "./chunks/LpMediaGallery-t1z3bQcY.js";
+import { _ as _33 } from "./chunks/LpMediaGallery-Cid7PGYx.js";
 import { _ as _34 } from "./chunks/LpModal-D_o-56To.js";
 import { _ as _35 } from "./chunks/LpNotificationBell-lHePf89W.js";
 import { _ as _36 } from "./chunks/LpNumberField-CWuX08iX.js";

package/package.json

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

package/src/components/LpLightbox.vue

@@ -315,8 +315,21 @@ const imageStyle = computed(() => ({
 
 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"
+/*
+ * The arrows sit on a photograph, which is the hard surface to answer on: the
+ * resting chrome is a dark translucent disc, and a hover that only deepens that
+ * dark is a change from "nearly black" to "slightly more nearly black" over an
+ * image that may itself be dark. Measured, the old step moved the fill from
+ * 0.45 to 0.65 alpha and the disc by 5% of 44px — two pixels. It was doing
+ * something, and it read as doing nothing.
+ *
+ * So the hover changes the QUALITY of the surface, not just its depth: the fill
+ * goes lighter rather than darker, a hairline ring appears, the icon reaches
+ * full white and the disc grows by a tenth. Pressing it dips back below resting
+ * size, which is the part that makes a button feel connected to the click.
+ */
 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/90 outline-none backdrop-blur-sm transition-[background-color,scale] duration-[var(--duration-fast)] hover:bg-black/65 hover:scale-105 focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-0"
+  "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"
 </script>
 
 <template>

package/src/components/LpMediaGallery.vue

@@ -19,6 +19,10 @@
  * straight from here into the lightbox with nothing in between. `thumb` is the
  * small source when one exists; without it the grid shows `src`, which is
  * correct but heavier, and that is the caller's call to make.
+ *
+ * An item marked `spoiler` arrives covered and takes a click to uncover. The
+ * cover is per image and the reveal is remembered per image, because a set is
+ * usually mixed — one marked screenshot among plain ones.
  */
 import { computed, ref } from "vue"
 import type { LightboxItem } from "./lightbox"
@@ -69,6 +73,8 @@ const props = withDefaults(
 const emit = defineEmits<{
   /** A thumbnail was activated, before the lightbox opens. */
   (e: "select", item: LightboxItem, index: number): void
+  /** A spoiler was uncovered. */
+  (e: "reveal", item: LightboxItem): void
   (e: "update:open", value: boolean): void
 }>()
 
@@ -173,9 +179,15 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
 function activate(i: number) {
   const item = props.items[i]
   if (!item) return
+  // `select` reports the position in the caller's own array, which is the one
+  // they can do anything with — the lightbox's filtered index is internal.
   emit("select", item, i)
   if (!props.openable) return
-  index.value = i
+  // Covered images are not in the lightbox's list, so the index has to be
+  // translated into it.
+  const at = openIndexOf(i)
+  if (at === -1) return
+  index.value = at
   open.value = true
   emit("update:open", true)
 }
@@ -185,9 +197,57 @@ function openOverflow() {
   activate(visible.value.length)
 }
 
+/*
+ * Which spoilers have been opened.
+ *
+ * Keyed by `src` rather than by index, because the index is not a name: a set
+ * that gains an image at the front, or is filtered, shifts every position under
+ * the cursor, and a grid keyed by index would then show the wrong picture as
+ * already-revealed — which for a spoiler is the one failure that matters.
+ */
+const revealed = ref(new Set<string>())
+
+function isHidden(item: LightboxItem): boolean {
+  return Boolean(item.spoiler) && !revealed.value.has(item.src)
+}
+
+/*
+ * A covered tile takes its click to uncover itself and STOPS there — it does
+ * not also open the lightbox. Revealing and viewing are two separate requests,
+ * and running them together puts a picture nobody has agreed to see yet
+ * full-screen on the first click. The second click opens it like any other.
+ */
+function reveal(item: LightboxItem) {
+  // A new Set, not .add(): a Set mutated in place is the same object, so a
+  // computed reading it never sees a change.
+  revealed.value = new Set(revealed.value).add(item.src)
+  emit("reveal", item)
+}
+
+/*
+ * The lightbox never receives a covered image. Paging through the set with the
+ * arrow keys would otherwise walk straight into one full-screen, having asked
+ * nobody — the grid's cover would have been for nothing. Items already revealed
+ * pass through untouched, so opening the one you just uncovered still lands on
+ * it.
+ */
+const openItems = computed(() => props.items.filter((item) => !isHidden(item)))
+
+/** Index within `openItems` of the grid item at `i`, or -1 when it is covered. */
+function openIndexOf(i: number): number {
+  const item = props.items[i]
+  return item ? openItems.value.indexOf(item) : -1
+}
+
 defineExpose({
   /** Open the lightbox at an index — for a "view all" button outside the grid. */
   openAt: (i: number) => activate(i),
+  /** Uncover every spoiler in the set. */
+  revealAll: () => {
+    const next = new Set(revealed.value)
+    for (const item of props.items) if (item.spoiler) next.add(item.src)
+    revealed.value = next
+  },
 })
 </script>
 
@@ -208,11 +268,19 @@ defineExpose({
         'focus-visible:ring-2 focus-visible:ring-ring',
       ]"
       :aria-label="
-        hiddenCount && i === visible.length - 1
-          ? `Show ${hiddenCount} more`
-          : item.title || `Image ${i + 1} of ${items.length}`
+        isHidden(item)
+          ? 'Spoiler — show image'
+          : hiddenCount && i === visible.length - 1
+            ? `Show ${hiddenCount} more`
+            : item.title || `Image ${i + 1} of ${items.length}`
+      "
+      @click="
+        isHidden(item)
+          ? reveal(item)
+          : hiddenCount && i === visible.length - 1
+            ? openOverflow()
+            : activate(i)
       "
-      @click="hiddenCount && i === visible.length - 1 ? openOverflow() : activate(i)"
     >
       <slot name="item" :item="item" :index="i">
         <!-- decoding=async + loading=lazy: a gallery is often far down a page,
@@ -227,15 +295,18 @@ defineExpose({
              little pushes that feathered edge outside the clip. -->
         <img
           :src="item.thumb || item.src"
-          :alt="item.title || ''"
+          :alt="isHidden(item) ? '' : item.title || ''"
           loading="lazy"
           decoding="async"
           class="size-full object-cover transition-transform duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] group-hover:scale-[1.03] motion-reduce:transition-none motion-reduce:group-hover:scale-100"
-          :class="
-            hiddenCount && i === visible.length - 1
+          :class="[
+            isHidden(item)
+              ? 'scale-[1.12] blur-[18px] brightness-[0.6] saturate-[1.1] group-hover:scale-[1.12]'
+              : '',
+            !isHidden(item) && hiddenCount && i === visible.length - 1
               ? 'scale-[1.06] blur-[2px] brightness-[0.45] group-hover:scale-[1.06]'
-              : ''
-          "
+              : '',
+          ]"
         >
       </slot>
 
@@ -252,8 +323,22 @@ defineExpose({
            and obvious zoomed. Dimming the image itself means the corner clips a
            finished pixel, which fades toward transparent instead of toward
            something that should never be on show. -->
+      <!-- A covered tile says so in words. The blur alone is ambiguous — a
+           heavily blurred photograph reads as one that failed to load, and the
+           label is the difference between "broken" and "click to see". -->
+      <span
+        v-if="isHidden(item)"
+        class="pointer-events-none absolute inset-0 flex items-center justify-center"
+      >
+        <span
+          class="rounded-pill bg-black/55 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-white"
+        >
+          Spoiler
+        </span>
+      </span>
+
       <span
-        v-if="hiddenCount && i === visible.length - 1"
+        v-else-if="hiddenCount && i === visible.length - 1"
         class="pointer-events-none absolute inset-0 flex items-center justify-center text-lg font-medium text-white"
       >
         +{{ hiddenCount }}
@@ -272,7 +357,7 @@ defineExpose({
       v-if="openable"
       v-model:open="open"
       v-model:index="index"
-      :items="items"
+      :items="openItems"
       :downloadable="downloadable"
       :rotatable="rotatable"
     />

package/src/components/lightbox.ts

@@ -14,6 +14,16 @@ export interface LightboxItem {
   description?: string
   /** Filename used when downloading; derived from `src` when absent. */
   filename?: string
+  /**
+   * Hide this image behind a cover until someone asks for it — a spoiler, a
+   * screenshot of something not everyone in the channel has reached yet, a
+   * picture that should not appear in a scroll past.
+   *
+   * A property of the ITEM rather than of the grid showing it: which images are
+   * spoilers is a fact about the images, and the usual set is a mixed one, with
+   * a marked picture sitting beside plain ones.
+   */
+  spoiler?: boolean
 }
 
 /** Last path segment of a URL, or a fallback — used to name a download. */