@bearmenu/ui 0.8.3 → 0.8.6

package/src/components/category-deck.tsx

@@ -0,0 +1,227 @@
+"use client";
+
+import * as React from "react";
+import { ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Skeleton } from "./skeleton";
+
+/**
+ * CategoryDeck — the hub's category doorway: a fanned stack of four posters
+ * that spreads open on hover or focus.
+ *
+ * The whole deck is ONE link (or button, or static div — same href/onClick
+ * contract as `EventCard`). The four posters are decorative dressing for that
+ * single destination, not four separate targets, so they're `aria-hidden` and
+ * the link's accessible name comes from the visible `name`/`meta` text next
+ * to it.
+ *
+ * The fan must open for keyboard users too, not just mouse hover — the spread
+ * transform is driven by `group-hover` AND `group-focus-visible` on the same
+ * link. Every poster's `transform` is set as a single arbitrary CSS property
+ * rather than composed Tailwind `translate-x`/`rotate` utilities, because
+ * those utilities share one `--tw-translate-x` variable and would silently
+ * overwrite each other.
+ *
+ * Poster offsets are the same at every breakpoint — the design only specifies
+ * a smaller card size and deck height for mobile, not a rescaled fan.
+ */
+
+const DECK_POSTER_COUNT = 4;
+
+const DECK_TRANSITION =
+  "transition-transform duration-[400ms] ease-[cubic-bezier(0.2,0.8,0.2,1)] motion-reduce:transition-none";
+
+const DECK_CARD_TRANSFORMS: ReadonlyArray<{ rest: string; spread: string; z: string }> = [
+  {
+    rest: "[transform:translateX(-50%)_rotate(-9deg)_translateX(-26px)]",
+    spread:
+      "group-hover:[transform:translateX(-50%)_rotate(-14deg)_translateX(-64px)_translateY(-6px)] group-focus-visible:[transform:translateX(-50%)_rotate(-14deg)_translateX(-64px)_translateY(-6px)]",
+    z: "z-0",
+  },
+  {
+    rest: "[transform:translateX(-50%)_rotate(-3deg)_translateX(-9px)]",
+    spread:
+      "group-hover:[transform:translateX(-50%)_rotate(-5deg)_translateX(-22px)_translateY(-10px)] group-focus-visible:[transform:translateX(-50%)_rotate(-5deg)_translateX(-22px)_translateY(-10px)]",
+    z: "z-[1]",
+  },
+  {
+    rest: "[transform:translateX(-50%)_rotate(3deg)_translateX(9px)]",
+    spread:
+      "group-hover:[transform:translateX(-50%)_rotate(5deg)_translateX(22px)_translateY(-10px)] group-focus-visible:[transform:translateX(-50%)_rotate(5deg)_translateX(22px)_translateY(-10px)]",
+    z: "z-[1]",
+  },
+  {
+    rest: "[transform:translateX(-50%)_rotate(9deg)_translateX(26px)]",
+    spread:
+      "group-hover:[transform:translateX(-50%)_rotate(14deg)_translateX(64px)_translateY(-6px)] group-focus-visible:[transform:translateX(-50%)_rotate(14deg)_translateX(64px)_translateY(-6px)]",
+    z: "z-[2]",
+  },
+];
+
+export type CategoryDeckPoster = {
+  src?: string;
+  alt?: string;
+  /**
+   * Rendered in the card instead of an `<img>`. Wins over `src`.
+   *
+   * The deck was built for event posters, where every card is a photograph.
+   * The menu hub fans the same deck over dish categories, and that app renders
+   * no menu-item photography on card surfaces — it draws a tinted colour field
+   * carrying the item's name. Without a slot, those decks fanned four empty
+   * `bg-muted` blocks.
+   *
+   * Same escape hatch, and the same name-and-precedence rule, as
+   * `FeaturedRailItemProps.fallback` and `PosterTapeItem.fallback` — except
+   * those two are fallbacks shown when a poster is ABSENT, while this one is a
+   * deliberate replacement. Hence `content`, not `fallback`: a caller passing
+   * it is choosing what the card is, not what it degrades to.
+   */
+  content?: React.ReactNode;
+};
+
+export type CategoryDeckLinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+  onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+
+function DefaultLink({ href, ...props }: CategoryDeckLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type CategoryDeckProps = {
+  name: string;
+  /** Caller-composed, e.g. "32 events · /petreceri". */
+  meta: string;
+  /** Up to four posters, fanned back to front. A poster with neither `content`
+   *  nor `src` renders a placeholder block. */
+  posters: CategoryDeckPoster[];
+  href?: string;
+  /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
+  linkComponent?: React.ComponentType<CategoryDeckLinkProps>;
+  onClick?: (mouseEvent: React.MouseEvent) => void;
+  className?: string;
+};
+
+export function CategoryDeck({
+  name,
+  meta,
+  posters,
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  onClick,
+  className,
+}: CategoryDeckProps) {
+  const slots = Array.from(
+    { length: DECK_POSTER_COUNT },
+    (_, index): CategoryDeckPoster => posters[index] ?? {}
+  );
+
+  const body = (
+    <>
+      <div className="relative h-[150px] sm:h-[186px]" aria-hidden>
+
+        {slots.map((poster, index) => {
+          const transform = DECK_CARD_TRANSFORMS[index];
+          return (
+            <div
+              key={index}
+              className={cn(
+                "absolute left-1/2 top-0 aspect-[4/5] w-24 overflow-hidden rounded-[10px] bg-muted",
+                "shadow-[0_10px_26px_color-mix(in_oklch,var(--foreground)_18%,transparent)]",
+                "sm:w-[120px]",
+                transform.rest,
+                transform.spread,
+                transform.z,
+                DECK_TRANSITION
+              )}
+            >
+              {poster.content ? (
+                poster.content
+              ) : poster.src ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  src={poster.src}
+                  alt={poster.alt ?? ""}
+                  loading="lazy"
+                  decoding="async"
+                  className="h-full w-full object-cover"
+                />
+              ) : (
+                <div className="h-full w-full bg-muted" />
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="flex items-center gap-[9px] pt-3.5">
+        <div className="min-w-0">
+          <div className="truncate text-[14.5px] font-extrabold tracking-[-0.015em] sm:text-base">
+            {name}
+          </div>
+          <div className="truncate font-mono text-[11.5px] text-muted-foreground">{meta}</div>
+        </div>
+        <ChevronRight className="ml-auto h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
+      </div>
+    </>
+  );
+
+  const rootClasses = cn(
+    "group flex min-w-0 flex-col text-left",
+    (href || onClick) &&
+      "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-xl",
+    className
+  );
+
+  if (href) {
+    return (
+      <LinkComponent href={href} className={rootClasses} onClick={onClick}>
+        {body}
+      </LinkComponent>
+    );
+  }
+
+  if (onClick) {
+    return (
+      <button type="button" className={rootClasses} onClick={onClick}>
+        {body}
+      </button>
+    );
+  }
+
+  return <div className={rootClasses}>{body}</div>;
+}
+
+export type CategoryDeckSkeletonProps = {
+  className?: string;
+};
+
+/** The deck's resting layout — the fan sits at its rest transform, never spread. */
+export function CategoryDeckSkeleton({ className }: CategoryDeckSkeletonProps) {
+  return (
+    <div aria-hidden="true" className={cn("flex min-w-0 flex-col", className)}>
+      <div className="relative h-[150px] sm:h-[186px]">
+        {DECK_CARD_TRANSFORMS.map((transform, index) => (
+          <Skeleton
+            key={index}
+            className={cn(
+              "absolute left-1/2 top-0 aspect-[4/5] w-24 rounded-[10px] sm:w-[120px]",
+              transform.rest,
+              transform.z
+            )}
+          />
+        ))}
+      </div>
+
+      <div className="flex items-center gap-[9px] pt-3.5">
+        <div className="min-w-0 flex-1">
+          <Skeleton className="h-[14.5px] w-24 sm:h-4 sm:w-28" />
+          <Skeleton className="mt-1.5 h-[11.5px] w-32" />
+        </div>
+        <Skeleton className="ml-auto h-4 w-4 shrink-0 rounded-full" />
+      </div>
+    </div>
+  );
+}

package/src/components/combobox.stories.tsx

@@ -9,7 +9,7 @@ const meta = {
 } satisfies Meta<typeof Combobox>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Combobox>;
 
 const frameworks: ComboboxOption[] = [
   { value: "next", label: "Next.js", description: "React framework" },

package/src/components/concept-card.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PartyPopper, Music } from "lucide-react";
+import { ConceptCard, ConceptCardSkeleton } from "./concept-card";
+
+const kind = (
+  <>
+    <PartyPopper className="h-3 w-3" aria-hidden />
+    Party
+  </>
+);
+
+// Explicitly annotated rather than `satisfies`: the meta-level decorator makes
+// the inferred type reference storybook's internal CSF module, which tsc cannot
+// name portably (TS2742).
+const meta: Meta<typeof ConceptCard> = {
+  title: "Events/ConceptCard",
+  component: ConceptCard,
+  tags: ["autodocs"],
+  args: {
+    title: "Flying Circus",
+    meta: "Every Saturday · Flying Circus · 4 dates",
+    kind,
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[320px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "`meta` is composed by the caller — the design's variants (\"Every Saturday · Flying Circus · 4 dates\") don't decompose into parts without hardcoding clause order.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ConceptCard>;
+
+export const Default: Story = {};
+
+/** Absent `coverUrl` falls back to a flat muted block, same as `EventCard`. */
+export const NoCover: Story = {
+  args: { coverUrl: undefined },
+};
+
+export const WithCover: Story = {
+  args: {
+    coverUrl:
+      "data:image/svg+xml;utf8," +
+      encodeURIComponent(
+        `<svg xmlns="http://www.w3.org/2000/svg" width="640" height="320"><rect width="640" height="320" fill="#3a2c46"/><text x="50%" y="50%" font-family="monospace" font-size="18" fill="#fff" text-anchor="middle">cover</text></svg>`
+      ),
+  },
+};
+
+export const LiveMusicKind: Story = {
+  args: {
+    title: "Jazz at the Basement",
+    meta: "Every Thursday · The Basement · 12 dates",
+    kind: (
+      <>
+        <Music className="h-3 w-3" aria-hidden />
+        Live music
+      </>
+    ),
+  },
+};
+
+export const Clickable: Story = {
+  args: { href: "/events/flying-circus" },
+};
+
+export const Skeleton: Story = {
+  render: () => <ConceptCardSkeleton />,
+};

package/src/components/concept-card.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { memo, useState } from "react";
+import { Calendar } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Skeleton } from "./skeleton";
+
+/**
+ * ConceptCard — the recurring-series cover card (e.g. a weekly party
+ * concept), a wide 2:1 image with a bottom scrim carrying a kind pill,
+ * a composed date/venue/count line and the title.
+ *
+ * Same contract as `EventCard`: DS-owned props, plain `<img>`, anchor
+ * whenever `href` is given. Absent `coverUrl` falls back to a flat
+ * `bg-muted` block, same treatment `EventCard` gives a missing poster.
+ */
+
+export type ConceptCardLinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+  onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+
+function DefaultLink({ href, ...props }: ConceptCardLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type ConceptCardProps = {
+  title: string;
+  /**
+   * The whole date/venue/count line, composed by the caller, e.g. "Every
+   * Saturday · Flying Circus · 4 dates" — clause order is locale-dependent.
+   */
+  meta: string;
+  /** Label plus its icon, e.g. `<><PartyPopper .../> Party</>`. */
+  kind: React.ReactNode;
+  coverUrl?: string;
+  href?: string;
+  /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
+  linkComponent?: React.ComponentType<ConceptCardLinkProps>;
+  onClick?: (mouseEvent: React.MouseEvent) => void;
+  className?: string;
+  /** Forwarded to the cover's `loading` attribute (`"eager"` when true). */
+  priority?: boolean;
+};
+
+export const ConceptCard = memo(function ConceptCard({
+  title,
+  meta,
+  kind,
+  coverUrl,
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  onClick,
+  className,
+  priority,
+}: ConceptCardProps) {
+  const [imgError, setImgError] = useState(false);
+  const showCover = !!coverUrl && !imgError;
+
+  const body = (
+    <>
+      <div className="absolute inset-0 bg-muted">
+        {showCover && (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={coverUrl}
+            alt={title}
+            title={title}
+            loading={priority ? "eager" : "lazy"}
+            decoding="async"
+            className="h-full w-full object-cover"
+            onError={() => setImgError(true)}
+          />
+        )}
+      </div>
+
+      <div className="absolute inset-x-0 bottom-0 z-[1] h-[60%] bg-gradient-to-t from-black/90 via-black/60 to-transparent" />
+
+      <span className="absolute left-2 top-2 z-[2] inline-flex items-center gap-1 rounded-md bg-black/50 px-2 py-1 text-[11px] font-semibold text-white">
+        {kind}
+      </span>
+
+      <div className="relative z-[2] mt-auto flex w-full flex-col gap-0.5 p-2.5 text-white">
+        <div className="flex items-center gap-1 text-[11px] font-medium text-white/85">
+          <Calendar className="h-3 w-3 shrink-0" aria-hidden />
+          <span className="truncate">{meta}</span>
+        </div>
+        <div className="line-clamp-1 text-[14px] font-semibold leading-[1.25]">{title}</div>
+      </div>
+    </>
+  );
+
+  const rootClasses = cn(
+    "relative flex aspect-[2/1] flex-col overflow-hidden rounded-xl text-left",
+    (href || onClick) &&
+      "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    className
+  );
+
+  if (href) {
+    return (
+      <LinkComponent href={href} className={rootClasses} onClick={onClick}>
+        {body}
+      </LinkComponent>
+    );
+  }
+
+  if (onClick) {
+    return (
+      <button type="button" className={rootClasses} onClick={onClick}>
+        {body}
+      </button>
+    );
+  }
+
+  return <div className={rootClasses}>{body}</div>;
+});
+
+export type ConceptCardSkeletonProps = {
+  className?: string;
+};
+
+export function ConceptCardSkeleton({ className }: ConceptCardSkeletonProps) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn("relative flex aspect-[2/1] flex-col overflow-hidden rounded-xl", className)}
+    >
+      <Skeleton className="absolute inset-0 rounded-none" />
+
+      <div className="absolute inset-x-0 bottom-0 z-[1] h-[60%] bg-gradient-to-t from-black/90 via-black/60 to-transparent" />
+
+      <Skeleton className="absolute left-2 top-2 z-[2] h-[26px] w-16 rounded-md bg-white/20" />
+
+      <div className="relative z-[2] mt-auto flex w-full flex-col gap-1 p-2.5">
+        <Skeleton className="h-[11px] w-24 bg-white/15" />
+        <Skeleton className="h-[14px] w-2/3 bg-white/20" />
+      </div>
+    </div>
+  );
+}

package/src/components/coverflow.stories.tsx

@@ -0,0 +1,240 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Flame } from "lucide-react";
+import { expect, within } from "storybook/test";
+import { Coverflow, type CoverflowItem } from "./coverflow";
+
+const ITEMS: CoverflowItem[] = [
+  {
+    id: "warehouse-rave",
+    title: "Warehouse Rave",
+    meta: "Fri 4 · 90 going",
+    badge: (
+      <>
+        <Flame className="h-3 w-3" aria-hidden />
+        Busiest
+      </>
+    ),
+  },
+  {
+    id: "jazz-rooftop",
+    title: "Jazz on the Rooftop",
+    meta: "Sat 5 · 64 going",
+    isFree: true,
+  },
+  {
+    id: "open-mic",
+    title: "Open Mic Night",
+    meta: "Sun 6 · 21 going",
+  },
+  ...Array.from({ length: 4 }, (_, index) => ({
+    id: `side-event-${index + 1}`,
+    title: `Side event ${index + 1}`,
+    meta: `Event ${index + 1} details`,
+  })),
+];
+
+// Explicitly annotated rather than `satisfies`: the meta-level decorator makes
+// the inferred type reference storybook's internal CSF module, which tsc cannot
+// name portably (TS2742).
+const meta: Meta<typeof Coverflow> = {
+  title: "Events/Coverflow",
+  component: Coverflow,
+  tags: ["autodocs"],
+  args: {
+    items: ITEMS,
+    activeIndex: 0,
+    freeLabel: "Free",
+    prevLabel: "Previous event",
+    nextLabel: "Next event",
+    positionLabel: "1 of 7",
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-[520px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The busiest-events browser: a 3D perspective **ring** with a large lead poster flanked by desaturating, shrinking side posters. A card's slot is the *signed shortest way round the list*, not `index - activeIndex`, so both flanks stay full at every index — at `activeIndex: 0` the last item sits immediately to the left of the lead rather than leaving that half of the stage empty — and prev/next carry on past either end, reporting the wrapped index through `onActiveIndexChange`. Only `|offset| <= 3` is mounted, so a long list paints seven posters, not all of them. Exactly one card per step crosses the ring's seam; it renders without its transition classes for that one commit so it teleports round the back instantly instead of sliding across the face of the stage. The lane drifts a few pixels back and forth, pauses off-screen, and stops outright (along with the position transition) under `prefers-reduced-motion`. Every rendered card is a real, focusable control — the injected link when it carries an `href`, otherwise a `<button>` — so a keyboard or screen-reader user can jump straight to any of them. The prev/next arrows float over the stage, vertically centred on the poster row, and are not rendered at all for a single item, where they would be inert.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Coverflow>;
+
+export const Default: Story = {};
+
+/**
+ * The ring at its old worst case. `activeIndex: 0` used to leave the entire
+ * left half of the stage empty with three cards stacked to the right; now item
+ * 6 renders at offset −1, item 5 at −2 and item 4 at −3, so both flanks are
+ * full. Step backwards from here and the index reported to the parent is 6,
+ * not a clamp at 0.
+ */
+export const RingAtIndexZero: Story = {
+  render: (args) => {
+    function RingCoverflow() {
+      const [activeIndex, setActiveIndex] = useState(0);
+      return (
+        <Coverflow
+          {...args}
+          activeIndex={activeIndex}
+          positionLabel={`${activeIndex + 1} of ${args.items!.length}`}
+          onActiveIndexChange={setActiveIndex}
+        />
+      );
+    }
+    return <RingCoverflow />;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Start at 0 and press *Previous*: the ring turns to item 6 instead of refusing. One card per step comes round the back — it teleports at the deepest tier, off-stage and behind the depth stack, rather than tweening across the middle.",
+      },
+    },
+  },
+};
+
+export const Free: Story = {
+  args: { activeIndex: 1, positionLabel: "2 of 7" },
+};
+
+/**
+ * Three items: the ring is smaller than the visible window, so every item is
+ * on stage at once — one on each flank rather than three.
+ */
+export const FewSidePosters: Story = {
+  args: { items: ITEMS.slice(0, 3), positionLabel: "1 of 3" },
+};
+
+/**
+ * Two items. The shortest path ties at `n / 2`, and the tie always resolves to
+ * the positive side, so the second card sits on the RIGHT flank at both
+ * indices instead of flipping sides as you step.
+ */
+export const TwoItems: Story = {
+  render: (args) => {
+    function TwoItemCoverflow() {
+      const items = args.items!.slice(0, 2);
+      const [activeIndex, setActiveIndex] = useState(0);
+      return (
+        <Coverflow
+          {...args}
+          items={items}
+          activeIndex={activeIndex}
+          positionLabel={`${activeIndex + 1} of ${items.length}`}
+          onActiveIndexChange={setActiveIndex}
+        />
+      );
+    }
+    return <TwoItemCoverflow />;
+  },
+};
+
+/**
+ * A single item — no ring, so no side posters AND no arrows. A prev/next
+ * control here could only ever return to the card already showing, and this
+ * component does not render controls that look operable and do nothing.
+ */
+export const NoSidePosters: Story = {
+  args: { items: ITEMS.slice(0, 1), positionLabel: "1 of 1" },
+};
+
+/**
+ * `caption` is optional. This is the consumer app's shape: `positionLabel`
+ * alone, on one clean line with no separator dot and no gap where the caption
+ * would have been. Passing a position string as `caption` *as well* is what
+ * printed "1 of 7 · 1 of 7".
+ */
+export const PositionWithoutCaption: Story = {
+  args: { activeIndex: 2, caption: undefined, positionLabel: "3 of 7" },
+};
+
+/** Both halves, for a caller that has a real caption to add to the position. */
+export const CaptionAndPosition: Story = {
+  args: { activeIndex: 2, caption: "7 events", positionLabel: "3 of 7" },
+};
+
+/**
+ * The caller owns `activeIndex` — the floating arrows advance it and the
+ * `aria-live` region announces the new lead. Watch the lead physically slide
+ * out to the side while the next card slides into its place.
+ */
+export const Interactive: Story = {
+  render: (args) => {
+    function InteractiveCoverflow() {
+      const [activeIndex, setActiveIndex] = useState(0);
+      return (
+        <Coverflow
+          {...args}
+          activeIndex={activeIndex}
+          positionLabel={`${activeIndex + 1} of ${args.items!.length}`}
+          onActiveIndexChange={setActiveIndex}
+        />
+      );
+    }
+    return <InteractiveCoverflow />;
+  },
+};
+
+/**
+ * Clicking any visible side poster jumps straight to it — the
+ * keyboard/screen-reader path a mouse user already has, instead of only
+ * stepping with `prevLabel`/`nextLabel`.
+ */
+export const SidePosterSelect: Story = {
+  render: (args) => {
+    function SelectableCoverflow() {
+      const [activeIndex, setActiveIndex] = useState(0);
+      return (
+        <Coverflow
+          {...args}
+          activeIndex={activeIndex}
+          positionLabel={`${activeIndex + 1} of ${args.items!.length}`}
+          onActiveIndexChange={setActiveIndex}
+        />
+      );
+    }
+    return <SelectableCoverflow />;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Every visible side poster is a real button — click or Tab+Enter to any of them to jump straight there via `onActiveIndexChange`.",
+      },
+    },
+  },
+};
+
+/**
+ * Focus lands on the outermost, most degraded side poster (`|offset| === 3`)
+ * to prove the focus ring survives the tier's grayscale + reduced opacity —
+ * the ring lives on the un-filtered button wrapper, not the filtered media
+ * inside it.
+ */
+export const SidePosterFocused: Story = {
+  args: { activeIndex: 3 },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const poster = await canvas.findByRole("button", { name: "Warehouse Rave" });
+    poster.focus();
+    await expect(poster).toHaveFocus();
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "With `activeIndex` at 3, `Warehouse Rave` (index 0) sits three slots away on the left flank — the farthest, most desaturated tier still mounted. Its `focus-visible` ring is on the un-filtered button, so it stays crisp even though the poster art inside is grayscaled and dimmed.",
+      },
+    },
+  },
+};