@leavepulse/ui 0.93.1 → 0.93.3

package/dist/assets/{LpTable-gpdZSVMX.css → LpTable-DxnthVz4.css}

@@ -6,28 +6,28 @@
  * outside and only the dots between facts are seen. A cell whose slot drew
  * nothing (a v-if that failed, an empty value) is left out, dot and all.
  */
-.lp-line[data-v-5ac91b9e] {
+.lp-line[data-v-a346ca36] {
   --lp-line-sep: 1rem;
 }
-.lp-line-row[data-v-5ac91b9e] {
+.lp-line-row[data-v-a346ca36] {
   margin-left: calc(-1 * var(--lp-line-sep));
 }
 
 /* The dot lives in the field's own left padding, so whatever the cell draws,
    a word or a block of two lines, starts after it and never in the clipped
    strip. */
-.lp-line-field[data-v-5ac91b9e] {
+.lp-line-field[data-v-a346ca36] {
   position: relative;
   padding-left: var(--lp-line-sep);
 }
-.lp-line-field[data-v-5ac91b9e]::before {
+.lp-line-field[data-v-a346ca36]::before {
   content: "·" / "";
   position: absolute;
   left: 0;
   width: var(--lp-line-sep);
   text-align: center;
 }
-.lp-line-field[data-v-5ac91b9e]:has(> .lp-line-value:empty) {
+.lp-line-field[data-v-a346ca36]:has(> .lp-line-value:empty) {
   display: none;
 }
 
@@ -43,17 +43,17 @@
  * fade before closing the gap and the whole list lurches at the end instead of
  * gliding.
  */
-.lp-row-enter-active[data-v-5ac91b9e],
-.lp-row-leave-active[data-v-5ac91b9e] {
+.lp-row-enter-active[data-v-a346ca36],
+.lp-row-leave-active[data-v-a346ca36] {
   transition:
     opacity var(--duration-fast) var(--ease-emphasized),
     transform var(--duration-fast) var(--ease-emphasized);
 }
-.lp-row-move[data-v-5ac91b9e] {
+.lp-row-move[data-v-a346ca36] {
   transition: transform var(--duration-medium) var(--ease-emphasized);
 }
-.lp-row-enter-from[data-v-5ac91b9e],
-.lp-row-leave-to[data-v-5ac91b9e] {
+.lp-row-enter-from[data-v-a346ca36],
+.lp-row-leave-to[data-v-a346ca36] {
   opacity: 0;
   transform: translateX(-0.5rem);
 }
@@ -67,7 +67,7 @@
  * drops out of the table layout entirely. Nothing sits below this row to be
  * dragged around, so simply not animating its exit costs nothing.
  */
-.lp-row-empty.lp-row-leave-active[data-v-5ac91b9e] {
+.lp-row-empty.lp-row-leave-active[data-v-a346ca36] {
   display: none;
 }
 
@@ -86,7 +86,7 @@
  * once anything is selected. An earlier version collapsed the column to nothing
  * and floated the hover box over the first cell, where it sat on the text.
  */
-.lp-tick[data-v-5ac91b9e] {
+.lp-tick[data-v-a346ca36] {
   display: flex;
   align-items: center;
   max-width: 0;
@@ -98,17 +98,17 @@
     padding var(--duration-medium) var(--ease-emphasized),
     opacity var(--duration-fast) ease;
 }
-.lp-tick-open[data-v-5ac91b9e] {
+.lp-tick-open[data-v-a346ca36] {
   max-width: 3.25rem;
   padding-inline: 1rem;
   opacity: 1;
 }
-.lp-tick-hidden[data-v-5ac91b9e],
-.lp-tick-cue[data-v-5ac91b9e] {
+.lp-tick-hidden[data-v-a346ca36],
+.lp-tick-cue[data-v-a346ca36] {
   opacity: 0;
 }
-tr:hover .lp-tick-cue[data-v-5ac91b9e],
-.lp-tick-cue[data-v-5ac91b9e]:focus-within {
+tr:hover .lp-tick-cue[data-v-a346ca36],
+.lp-tick-cue[data-v-a346ca36]:focus-within {
   opacity: 1;
 }
 
@@ -116,15 +116,15 @@ tr:hover .lp-tick-cue[data-v-5ac91b9e],
    turned down the rows change without animating rather than not changing. */
 /* Only where there is a hover to reveal it; a finger long-presses instead. */
 @media (hover: none) {
-tr:hover .lp-tick-cue[data-v-5ac91b9e] {
+tr:hover .lp-tick-cue[data-v-a346ca36] {
     opacity: 0;
 }
 
   /* Nor is there anything for the column's width to hold until then: on a
      touch screen it stays closed until a long press starts selecting, and
      eases open like the rest of the column. */
-.lp-tick-hidden[data-v-5ac91b9e],
-  .lp-tick-cue[data-v-5ac91b9e] {
+.lp-tick-hidden[data-v-a346ca36],
+  .lp-tick-cue[data-v-a346ca36] {
     max-width: 0;
     padding-inline: 0;
 }
@@ -134,7 +134,7 @@ tr:hover .lp-tick-cue[data-v-5ac91b9e] {
  * A list line's tick opens from nothing, as the table's column does, so lines
  * do not carry an empty gap until selection starts.
  */
-.lp-tick-line[data-v-5ac91b9e] {
+.lp-tick-line[data-v-a346ca36] {
   max-width: 2rem;
   opacity: 1;
 }
@@ -144,28 +144,28 @@ tr:hover .lp-tick-cue[data-v-5ac91b9e] {
  * open; a cue shows it only while
  * the card is pointed at or holds focus, the same rule as a row's.
  */
-.lp-tick-card[data-v-5ac91b9e] {
+.lp-tick-card[data-v-a346ca36] {
   max-width: none;
   padding-inline: 0;
   opacity: 1;
 }
-.lp-tick[data-cue][data-v-5ac91b9e] {
+.lp-tick[data-cue][data-v-a346ca36] {
   opacity: 0;
 }
-.lp-item:hover .lp-tick[data-cue][data-v-5ac91b9e],
-.lp-tick[data-cue][data-v-5ac91b9e]:focus-within {
+.lp-item:hover .lp-tick[data-cue][data-v-a346ca36],
+.lp-tick[data-cue][data-v-a346ca36]:focus-within {
   opacity: 1;
 }
 @media (hover: none) {
-.lp-item:hover .lp-tick[data-cue][data-v-5ac91b9e] {
+.lp-item:hover .lp-tick[data-cue][data-v-a346ca36] {
     opacity: 0;
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-row-enter-active[data-v-5ac91b9e],
-  .lp-row-leave-active[data-v-5ac91b9e],
-  .lp-row-move[data-v-5ac91b9e],
-  .lp-tick[data-v-5ac91b9e] {
+.lp-row-enter-active[data-v-a346ca36],
+  .lp-row-leave-active[data-v-a346ca36],
+  .lp-row-move[data-v-a346ca36],
+  .lp-tick[data-v-a346ca36] {
     transition: none;
 }
 }

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/components/LpTable.vue.js

@@ -34,7 +34,7 @@ import { toCsv, downloadFile, fileStem } from "./exportData.js";
 import { toHiddenSets, sameHidden, summarizeShown, parseTableState, mergeRestored, serializeTableState, fromHiddenSets } from "./tableFilter.js";
 import { resolveRowMenu } from "./tableRowMenu.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpTable-gpdZSVMX.css';const _hoisted_1 = {
+import '../assets/LpTable-DxnthVz4.css';const _hoisted_1 = {
   key: 0,
   class: "flex min-h-8 flex-wrap items-center gap-x-3 gap-y-2 pb-3 text-xs"
 };
@@ -141,6 +141,7 @@ const _hoisted_48 = {
   class: "lp-line-label"
 };
 const _hoisted_49 = { class: "lp-line-value" };
+const _hoisted_50 = ["aria-expanded", "aria-label", "onClick"];
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -232,7 +233,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         noMatches: "No rows match the filters",
         resetFilters: "Reset filters",
         rowCount: "{shown} of {total}",
-        rowsTotal: "{total} rows",
+        rowsTotal: "Rows: {total}",
         selectedCount: "{count} selected",
         clearSelection: "Clear selection",
         pageSelected: "All {count} on this page are selected.",
@@ -1873,7 +1874,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 ])
                               ])) : createCommentVNode("", true)
                             ], true)
-                          ]))
+                          ])),
+                          expansionOn.value && canExpand(entry.row) ? (openBlock(), createElementBlock("button", {
+                            key: 3,
+                            type: "button",
+                            class: normalizeClass(["inline-grid size-6 shrink-0 place-items-center rounded-small text-muted outline-none transition-colors duration-fast hover:text-ink focus-visible:ring-2 focus-visible:ring-ring", activeLayout.value === "cards" ? "absolute right-2 bottom-2" : ""]),
+                            "aria-expanded": expandedKeys.value.has(keyFor(entry.row, entry.index)),
+                            "aria-label": expandedKeys.value.has(keyFor(entry.row, entry.index)) ? text.value.collapseRow : text.value.expandRow,
+                            onClick: withModifiers(($event) => toggleExpanded(keyFor(entry.row, entry.index)), ["stop"]),
+                            onPointerdown: _cache[10] || (_cache[10] = withModifiers(() => {
+                            }, ["stop"]))
+                          }, [
+                            createVNode(_sfc_main$5, {
+                              name: "lucide:chevron-right",
+                              size: 14,
+                              class: normalizeClass(["transition-transform duration-fast motion-reduce:transition-none", expandedKeys.value.has(keyFor(entry.row, entry.index)) ? "rotate-90" : ""])
+                            }, null, 8, ["class"])
+                          ], 42, _hoisted_50)) : createCommentVNode("", true)
                         ], 16, _hoisted_35))
                       ], 64);
                     }), 128))
@@ -1889,7 +1906,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         __props.load && total.value > __props.pageSize ? (openBlock(), createBlock(_sfc_main$h, {
           key: 0,
           page: page.value,
-          "onUpdate:page": _cache[10] || (_cache[10] = ($event) => page.value = $event),
+          "onUpdate:page": _cache[11] || (_cache[11] = ($event) => page.value = $event),
           total: total.value,
           "page-size": __props.pageSize,
           disabled: busy.value
@@ -1898,7 +1915,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5ac91b9e"]]);
+const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a346ca36"]]);
 export {
   LpTable 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.1",
+  "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)

package/src/components/LpTable.vue

@@ -523,7 +523,7 @@ const labelSet = useLabels<TableLabels>(
     noMatches: "No rows match the filters",
     resetFilters: "Reset filters",
     rowCount: "{shown} of {total}",
-    rowsTotal: "{total} rows",
+    rowsTotal: "Rows: {total}",
     selectedCount: "{count} selected",
     clearSelection: "Clear selection",
     pageSelected: "All {count} on this page are selected.",
@@ -2413,6 +2413,20 @@ usePaletteCommands(() => {
               </div>
             </slot>
           </div>
+          <!-- The table's chevron, in a line and a card too: without it an
+               expandable row drew its detail panel but nothing opened it. -->
+          <button
+            v-if="expansionOn && canExpand(entry.row)"
+            type="button"
+            class="inline-grid size-6 shrink-0 place-items-center rounded-small text-muted outline-none transition-colors duration-fast hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+            :class="activeLayout === 'cards' ? 'absolute right-2 bottom-2' : ''"
+            :aria-expanded="expandedKeys.has(keyFor(entry.row, entry.index))"
+            :aria-label="expandedKeys.has(keyFor(entry.row, entry.index)) ? text.collapseRow : text.expandRow"
+            @click.stop="toggleExpanded(keyFor(entry.row, entry.index))"
+            @pointerdown.stop
+          >
+            <LpIcon name="lucide:chevron-right" :size="14" class="transition-transform duration-fast motion-reduce:transition-none" :class="expandedKeys.has(keyFor(entry.row, entry.index)) ? 'rotate-90' : ''" />
+          </button>
         </div>
       </template>
     </TransitionGroup>