@bearmenu/ui 0.8.19 → 0.8.20

package/dist/components/poster-stack.d.ts

@@ -52,7 +52,9 @@ type PosterStackPoster = {
     fallback?: React.ReactNode;
 };
 type PosterStackProps = {
-    /** Rendered in order; only the first three are shown. */
+    /** Candidates in order. The first three whose image loads are shown, so
+     *  pass more than three: a poster whose asset fails yields its slot to
+     *  the next candidate. */
     posters: PosterStackPoster[];
     /** Defaults to a plain `<a>`. Pass `next/link`, or an anchor that opens the app's preview. */
     linkComponent?: React.ComponentType<PosterStackLinkProps>;

package/dist/components/poster-stack.js

@@ -65,7 +65,7 @@ function PosterStack({
     observer.observe(container);
     return () => observer.disconnect();
   }, []);
-  const visiblePosters = posters.slice(0, POSTER_SLOTS.length);
+  const visiblePosters = posters.map((poster, index) => ({ poster, index })).filter(({ index }) => !failedIndices.has(index)).slice(0, POSTER_SLOTS.length);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -73,10 +73,10 @@ function PosterStack({
       className: cn("relative h-[196px] md:h-[400px] md:w-auto md:mx-0", PHONE_STAGE_CLASS, className),
       children: [
         /* @__PURE__ */ jsx("style", { children: POSTER_STACK_ANIMATION_STYLE }),
-        visiblePosters.map((poster, index) => {
-          var _a;
+        visiblePosters.map(({ poster, index: candidateIndex }, index) => {
+          var _a, _b, _c;
           const slot = POSTER_SLOTS[index];
-          const showPoster = !!poster.src && !failedIndices.has(index);
+          const showPoster = !!poster.src;
           const face = /* @__PURE__ */ jsxs(Fragment, { children: [
             showPoster ? (
               // eslint-disable-next-line @next/next/no-img-element
@@ -91,7 +91,7 @@ function PosterStack({
                     "h-full w-full object-cover",
                     poster.href && "transition-transform duration-300 group-hover/poster:scale-[1.03] motion-reduce:transition-none"
                   ),
-                  onError: () => setFailedIndices((current) => new Set(current).add(index))
+                  onError: () => setFailedIndices((current) => new Set(current).add(candidateIndex))
                 }
               )
             ) : (_a = poster.fallback) != null ? _a : /* @__PURE__ */ jsx(EventPosterFallback, {}),
@@ -132,7 +132,7 @@ function PosterStack({
                 }
               ) : /* @__PURE__ */ jsx("div", { className: "relative h-full w-full", children: face })
             },
-            poster.alt || index
+            (_c = (_b = poster.href) != null ? _b : poster.src) != null ? _c : candidateIndex
           );
         })
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.19",
+  "version": "0.8.20",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {

package/src/components/event-tonight-strip.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { EventTonightStrip } from "./event-tonight-strip";
 import { PosterStack } from "./poster-stack";
 
@@ -46,4 +46,24 @@ describe("PosterStack", () => {
     expect(screen.getAllByRole("link")).toHaveLength(1);
     expect(screen.getByAltText("B poster")).toBeInTheDocument();
   });
+
+  it("gives a failed poster's slot to the next candidate", () => {
+    window.matchMedia = () => ({ matches: true }) as MediaQueryList;
+    const poster = (id: string) => ({ src: `/${id}.jpg`, alt: id, caption: id, href: `/e/${id}` });
+    render(<PosterStack posters={[poster("a"), poster("b"), poster("c"), poster("d")]} />);
+    expect(screen.getAllByRole("link").map((l) => l.getAttribute("href"))).toEqual([
+      "/e/a",
+      "/e/b",
+      "/e/c",
+    ]);
+
+    // The middle poster's asset dies at load time.
+    fireEvent.error(screen.getByRole("link", { name: "b" }).querySelector("img")!);
+
+    expect(screen.getAllByRole("link").map((l) => l.getAttribute("href"))).toEqual([
+      "/e/a",
+      "/e/c",
+      "/e/d",
+    ]);
+  });
 });

package/src/components/poster-stack.tsx

@@ -63,7 +63,9 @@ export type PosterStackPoster = {
 };
 
 export type PosterStackProps = {
-  /** Rendered in order; only the first three are shown. */
+  /** Candidates in order. The first three whose image loads are shown, so
+   *  pass more than three: a poster whose asset fails yields its slot to
+   *  the next candidate. */
   posters: PosterStackPoster[];
   /** Defaults to a plain `<a>`. Pass `next/link`, or an anchor that opens the app's preview. */
   linkComponent?: React.ComponentType<PosterStackLinkProps>;
@@ -154,7 +156,14 @@ export function PosterStack({
     return () => observer.disconnect();
   }, []);
 
-  const visiblePosters = posters.slice(0, POSTER_SLOTS.length);
+  // The first three candidates whose image has not failed. A poster whose
+  // asset 404s or 502s at load time gives its slot to the next candidate —
+  // the stack is the hub's first screen, and a fallback glyph in the middle
+  // of three posters is a hole in it. Pass more candidates than slots.
+  const visiblePosters = posters
+    .map((poster, index) => ({ poster, index }))
+    .filter(({ index }) => !failedIndices.has(index))
+    .slice(0, POSTER_SLOTS.length);
 
   return (
     <div
@@ -163,9 +172,9 @@ export function PosterStack({
     >
       <style>{POSTER_STACK_ANIMATION_STYLE}</style>
 
-      {visiblePosters.map((poster, index) => {
+      {visiblePosters.map(({ poster, index: candidateIndex }, index) => {
         const slot = POSTER_SLOTS[index];
-        const showPoster = !!poster.src && !failedIndices.has(index);
+        const showPoster = !!poster.src;
         const face = (
           <>
             {showPoster ? (
@@ -180,7 +189,9 @@ export function PosterStack({
                   poster.href &&
                     "transition-transform duration-300 group-hover/poster:scale-[1.03] motion-reduce:transition-none"
                 )}
-                onError={() => setFailedIndices((current) => new Set(current).add(index))}
+                onError={() =>
+                  setFailedIndices((current) => new Set(current).add(candidateIndex))
+                }
               />
             ) : (
               (poster.fallback ?? <EventPosterFallback />)
@@ -197,7 +208,9 @@ export function PosterStack({
 
         return (
           <div
-            key={poster.alt || index}
+            // Keyed by candidate, not slot: a replacement mounts fresh in the
+            // slot the failed poster vacated instead of inheriting its state.
+            key={poster.href ?? poster.src ?? candidateIndex}
             ref={(node) => {
               posterRefs.current[index] = node;
             }}