@leavepulse/ui 0.93.2 → 0.93.3

package/dist/chunks/{LpMediaGallery-B7DOV_aL.js → LpMediaGallery-CtWA5Uab.js}

@@ -9,7 +9,7 @@ import { _ as _sfc_main$2 } from "./VideoThumb-BfDkIXqE.js";
 const _hoisted_1 = { key: 0 };
 const _hoisted_2 = ["aria-label"];
 const _hoisted_3 = ["aria-label", "onClick"];
-const _hoisted_4 = ["src", "alt"];
+const _hoisted_4 = ["src", "alt", "onError"];
 const _hoisted_5 = {
   key: 0,
   class: "pointer-events-none absolute inset-0 flex items-center justify-center"
@@ -39,7 +39,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     itemMenu: {},
     labels: {}
   },
-  emits: ["select", "reveal", "update:open"],
+  emits: ["select", "reveal", "broken", "update:open"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const DEFAULT_LABELS = {
       /** Accessible name of the grid. */
@@ -60,7 +60,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function menuTitle(item, i) {
       if (isHidden(item)) return text.value.spoiler;
-      return item.title || fill(text.value.image, i + 1, props.items.length);
+      return item.title || fill(text.value.image, i + 1, shown.value.length);
     }
     const emit = __emit;
     const open = ref(false);
@@ -68,10 +68,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     watch(open, (value, was) => {
       if (!value && was) emit("update:open", false);
     });
+    const fellBack = ref(/* @__PURE__ */ new Set());
+    const broken = ref(/* @__PURE__ */ new Set());
+    const shown = computed(
+      () => broken.value.size ? props.items.filter((item) => !broken.value.has(item.src)) : props.items
+    );
+    function thumbOf(item) {
+      return item.thumb && !fellBack.value.has(item.src) ? item.thumb : item.src;
+    }
+    function onImageError(item) {
+      if (item.thumb && item.thumb !== item.src && !fellBack.value.has(item.src)) {
+        fellBack.value = new Set(fellBack.value).add(item.src);
+        return;
+      }
+      if (broken.value.has(item.src)) return;
+      broken.value = new Set(broken.value).add(item.src);
+      emit("broken", item);
+    }
     const visible = computed(
-      () => props.max && props.items.length > props.max ? props.items.slice(0, props.max) : props.items
+      () => props.max && shown.value.length > props.max ? shown.value.slice(0, props.max) : shown.value
     );
-    const hiddenCount = computed(() => Math.max(props.items.length - visible.value.length, 0));
+    const hiddenCount = computed(() => Math.max(shown.value.length - visible.value.length, 0));
     const COLS = {
       1: "grid-cols-1",
       2: "grid-cols-2",
@@ -141,9 +158,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => ["grid", columnClass.value, GAPS[props.gap] ?? GAPS[2]].join(" ")
     );
     function activate(i) {
-      const item = props.items[i];
+      const item = shown.value[i];
       if (!item) return;
-      emit("select", item, i);
+      emit("select", item, props.items.indexOf(item));
       if (!props.openable) return;
       const at = openIndexOf(i);
       if (at === -1) return;
@@ -162,14 +179,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       revealed.value = new Set(revealed.value).add(item.src);
       emit("reveal", item);
     }
-    const openItems = computed(() => props.items.filter((item) => !isHidden(item)));
+    const openItems = computed(() => shown.value.filter((item) => !isHidden(item)));
     function openIndexOf(i) {
-      const item = props.items[i];
+      const item = shown.value[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) => {
+        const item = props.items[i];
+        if (item) activate(shown.value.indexOf(item));
+      },
       /** Uncover every spoiler in the set. */
       revealAll: () => {
         const next = new Set(revealed.value);
@@ -178,7 +198,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return !__props.items.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
+      return !shown.value.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
         renderSlot(_ctx.$slots, "empty")
       ])) : (openBlock(), createElementBlock("div", mergeProps({
         key: 1,
@@ -191,7 +211,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             key: item.src + i,
             items: __props.itemMenu?.(item, i) ?? [],
             title: menuTitle(item, i),
-            "title-image": isHidden(item) ? void 0 : unref(isVideoItem)(item) ? item.poster ?? item.thumb : item.thumb || item.src,
+            "title-image": isHidden(item) ? void 0 : unref(isVideoItem)(item) ? item.poster ?? item.thumb : thumbOf(item),
             subtitle: isHidden(item) ? void 0 : item.description
           }, {
             default: withCtx(() => [
@@ -221,15 +241,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ]
                   }, null, 8, ["item", "alt", "media-class"])) : (openBlock(), createElementBlock("img", {
                     key: 1,
-                    src: item.thumb || item.src,
+                    src: thumbOf(item),
                     alt: isHidden(item) ? "" : item.title || "",
                     loading: "lazy",
                     decoding: "async",
+                    onError: ($event) => onImageError(item),
                     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))
+                  }, null, 42, _hoisted_4))
                 ]),
                 isHidden(item) ? (openBlock(), createElementBlock("span", _hoisted_5, [
                   createElementVNode("span", _hoisted_6, toDisplayString(unref(text).spoiler), 1)

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

@@ -67,10 +67,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     select: (item: LightboxItem, index: number) => any;
     reveal: (item: LightboxItem) => any;
     "update:open": (value: boolean) => any;
+    broken: (item: LightboxItem) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((item: LightboxItem, index: number) => any) | undefined;
     onReveal?: ((item: LightboxItem) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onBroken?: ((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-B7DOV_aL.js";
+import { _ as _sfc_main } from "../chunks/LpMediaGallery-CtWA5Uab.js";
 export {
   _sfc_main as default
 };

package/dist/index.js

@@ -63,7 +63,7 @@ import { _ as _37 } from "./chunks/LpLogViewer-BuIzr_6h.js";
 import { _ as _38 } from "./chunks/LpLogInspector-BhJTJIst.js";
 import { compilePattern, findIds, messageShape, structuredPayload, timeMs } from "./components/logTools.js";
 import { countLevels, matchPositions, matchesTerm, ringWindow, stepMatch } from "./components/logSearch.js";
-import { _ as _39 } from "./chunks/LpMediaGallery-B7DOV_aL.js";
+import { _ as _39 } from "./chunks/LpMediaGallery-CtWA5Uab.js";
 import { _ as _40 } from "./chunks/LpModal-D1E7rQzw.js";
 import { _ as _41 } from "./chunks/LpModalNav-DivqT1NV.js";
 import { _ as _42 } from "./chunks/LpNotificationBell-KRgdRZs-.js";

package/package.json

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

package/src/components/LpMediaGallery.vue

@@ -115,7 +115,7 @@ function fill(template: string, n: number, total = 0): string {
  */
 function menuTitle(item: LightboxItem, i: number): string {
   if (isHidden(item)) return text.value.spoiler
-  return item.title || fill(text.value.image, i + 1, props.items.length)
+  return item.title || fill(text.value.image, i + 1, shown.value.length)
 }
 
 const emit = defineEmits<{
@@ -123,6 +123,8 @@ const emit = defineEmits<{
   (e: "select", item: LightboxItem, index: number): void
   /** A spoiler was uncovered. */
   (e: "reveal", item: LightboxItem): void
+  /** An image failed to load from both its thumbnail and its source and left the grid. */
+  (e: "broken", item: LightboxItem): void
   (e: "update:open", value: boolean): void
 }>()
 
@@ -142,12 +144,39 @@ watch(open, (value, was) => {
   if (!value && was) emit("update:open", false)
 })
 
+/*
+ * Images that failed to load. A thumbnail that fails falls back to the full
+ * source once; when that fails too the image leaves the grid and the lightbox
+ * and `broken` says so. A cell of grey with a broken-picture glyph tells the
+ * viewer nothing they can act on, and paging the lightbox onto it is worse.
+ * Keyed by `src`, like `revealed`, so a reordered set keeps the right ones out.
+ */
+const fellBack = ref(new Set<string>())
+const broken = ref(new Set<string>())
+const shown = computed(() =>
+  broken.value.size ? props.items.filter((item) => !broken.value.has(item.src)) : props.items,
+)
+
+function thumbOf(item: LightboxItem): string {
+  return item.thumb && !fellBack.value.has(item.src) ? item.thumb : item.src
+}
+
+function onImageError(item: LightboxItem) {
+  if (item.thumb && item.thumb !== item.src && !fellBack.value.has(item.src)) {
+    fellBack.value = new Set(fellBack.value).add(item.src)
+    return
+  }
+  if (broken.value.has(item.src)) return
+  broken.value = new Set(broken.value).add(item.src)
+  emit("broken", item)
+}
+
 // `max` counts what is SHOWN, so the badge reads "+N more" rather than "N
 // total". A set of 7 capped at 4 shows 4 cells, the last one badged +3.
 const visible = computed(() =>
-  props.max && props.items.length > props.max ? props.items.slice(0, props.max) : props.items,
+  props.max && shown.value.length > props.max ? shown.value.slice(0, props.max) : shown.value,
 )
-const hiddenCount = computed(() => Math.max(props.items.length - visible.value.length, 0))
+const hiddenCount = computed(() => Math.max(shown.value.length - visible.value.length, 0))
 
 /*
  * Column classes are written out rather than interpolated. Tailwind scans
@@ -231,11 +260,11 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
 )
 
 function activate(i: number) {
-  const item = props.items[i]
+  const item = shown.value[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)
+  emit("select", item, props.items.indexOf(item))
   if (!props.openable) return
   // Covered images are not in the lightbox's list, so the index has to be
   // translated into it.
@@ -285,17 +314,20 @@ function reveal(item: LightboxItem) {
  * pass through untouched, so opening the one you just uncovered still lands on
  * it.
  */
-const openItems = computed(() => props.items.filter((item) => !isHidden(item)))
+const openItems = computed(() => shown.value.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]
+  const item = shown.value[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),
+  openAt: (i: number) => {
+    const item = props.items[i]
+    if (item) activate(shown.value.indexOf(item))
+  },
   /** Uncover every spoiler in the set. */
   revealAll: () => {
     const next = new Set(revealed.value)
@@ -306,7 +338,7 @@ defineExpose({
 </script>
 
 <template>
-  <div v-if="!items.length">
+  <div v-if="!shown.length">
     <slot name="empty" />
   </div>
 
@@ -316,7 +348,7 @@ defineExpose({
       :key="item.src + i"
       :items="itemMenu?.(item, i) ?? []"
       :title="menuTitle(item, i)"
-      :title-image="isHidden(item) ? undefined : isVideoItem(item) ? item.poster ?? item.thumb : item.thumb || item.src"
+      :title-image="isHidden(item) ? undefined : isVideoItem(item) ? item.poster ?? item.thumb : thumbOf(item)"
       :subtitle="isHidden(item) ? undefined : item.description"
     >
     <button
@@ -370,10 +402,11 @@ defineExpose({
         />
         <img
           v-else
-          :src="item.thumb || item.src"
+          :src="thumbOf(item)"
           :alt="isHidden(item) ? '' : item.title || ''"
           loading="lazy"
           decoding="async"
+          @error="onImageError(item)"
           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="[
             isHidden(item)