@bearmenu/ui 0.8.3 → 0.8.6

package/src/components/motion-icon.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+/**
+ * MotionIcon — the root for character-animated icons.
+ *
+ * An animated icon performs a behaviour the object it depicts would actually
+ * perform (a roof jumps, utensils uncross, a pin drops and plants) rather than
+ * tweening a property. The rules that make container motion feel right — short
+ * durations, one or two properties, restraint — produce dead icons, so this
+ * primitive is built for the opposite:
+ *
+ *   - Gestures run 400–700ms in five or six beats (anticipation, action, apex,
+ *     impact, settle), which deliberately exceeds the usual UI ceiling. An icon
+ *     gesture is a performance the user chose to trigger, not a transition they
+ *     are waiting through.
+ *   - Amplitudes are 25–40% of the icon box. At a 22px render on a 24-unit grid
+ *     one unit is 0.92px, so anything under ~6 units is physically invisible.
+ *   - The silhouette must change. If the outline is the same shape throughout,
+ *     nothing reads at icon size.
+ *
+ * Three variants, not two:
+ *   rest    — the plain glyph.
+ *   active  — the held pose. Equal to `rest` for gestures that return
+ *             (a roof that lands again); a genuinely different pose for ones
+ *             that stay changed (uncrossed utensils, a filled pin).
+ *   play    — the performance: keyframe arrays that land on `active`.
+ *
+ * `play` is driven by `replayToken`, which callers bump on POINTER DOWN rather
+ * than on the resulting state change. Waiting for state means waiting for
+ * navigation or a network write, which disconnects the gesture from the finger
+ * and reads as dead at any amplitude.
+ */
+
+import * as React from "react";
+import { motion, useAnimationControls, type Transition, type Variants } from "framer-motion";
+
+import { cn } from "../lib/utils";
+
+export type MotionIconProps = {
+  /** The held state. Drives `active` vs `rest`, and the stroke weight. */
+  active?: boolean;
+  /**
+   * Bump on pointer down to perform the gesture. Changing this value replays
+   * `play` even when `active` has not changed, which is what makes the icon
+   * respond to the touch rather than to its consequence.
+   */
+  replayToken?: number;
+  className?: string;
+};
+
+export type MotionIconVariant = "rest" | "active" | "play";
+
+/**
+ * A gesture is a performance with beats, so it is a tween with explicit
+ * `times`. A spring interpolates two keyframes and puts its overshoot at the
+ * end, which cannot express anticipation.
+ */
+export function beats(times: number[], duration = 0.62): Transition {
+  return { duration, times, ease: "easeInOut" };
+}
+
+/** Leaving is not a performance — it returns the glyph, firmly and fast. */
+export const returnTransition: Transition = { type: "spring", stiffness: 320, damping: 26 };
+
+type PoseValues = Record<string, number>;
+
+/**
+ * Builds the three variants for a moving part.
+ * `play` values are keyframe arrays; `rest`/`active` are the two held poses.
+ */
+export function poses(
+  rest: PoseValues,
+  active: PoseValues,
+  play: Record<string, number[]>,
+  transition: Transition
+): Variants {
+  return {
+    rest: { ...rest, transition: returnTransition },
+    active: { ...active, transition: returnTransition },
+    play: { ...play, transition },
+  };
+}
+
+const rootVariants: Variants = {
+  rest: { strokeWidth: 1.75, transition: { duration: 0.18 } },
+  active: { strokeWidth: 2.25, transition: { duration: 0.18 } },
+  play: { strokeWidth: 2.25, transition: { duration: 0.12 } },
+};
+
+/**
+ * Mount poses without playing; pointer down plays; arriving plays unless the
+ * pointer already started it; leaving returns.
+ *
+ * Both effects compare against a ref rather than trusting the dependency array,
+ * so they fire once per actual change and not once per render.
+ */
+export function useIconGesture(active: boolean, replayToken: number) {
+  const controls = useAnimationControls();
+  const lastPlayAt = React.useRef(0);
+  const seenToken = React.useRef(0);
+  // `null` until mounted, so the pose effect can tell a real change from the
+  // first run and never performs the gesture on page load.
+  const seenActive = React.useRef<boolean | null>(null);
+
+  React.useEffect(() => {
+    controls.set(active ? "active" : "rest");
+    seenActive.current = active;
+    // Mount only — the two effects below own everything after that.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  React.useEffect(() => {
+    if (replayToken === seenToken.current) return;
+    seenToken.current = replayToken;
+    lastPlayAt.current = Date.now();
+    void controls.start("play");
+  }, [replayToken, controls]);
+
+  React.useEffect(() => {
+    if (seenActive.current === null || seenActive.current === active) return;
+    seenActive.current = active;
+    if (!active) {
+      void controls.start("rest");
+      return;
+    }
+    // The pointer that caused this state change already started the gesture.
+    if (Date.now() - lastPlayAt.current < 600) return;
+    void controls.start("play");
+  }, [active, controls]);
+
+  return controls;
+}
+
+export function MotionIcon({
+  active = false,
+  replayToken = 0,
+  className,
+  children,
+}: MotionIconProps & { children: React.ReactNode }) {
+  const controls = useIconGesture(active, replayToken);
+
+  return (
+    <motion.svg
+      viewBox="0 0 24 24"
+      // Parts leave the 24-unit box at the apex of a jump. Callers give the
+      // icon padding rather than clipping the gesture.
+      overflow="visible"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      variants={rootVariants}
+      // Without this the active icon replays on hydration and every other one
+      // flashes through its pose on first paint.
+      initial={false}
+      animate={controls}
+      className={cn("size-6", className)}
+      aria-hidden
+    >
+      {children}
+    </motion.svg>
+  );
+}

package/src/components/multi-select-combobox.stories.tsx

@@ -10,7 +10,7 @@ const meta = {
 } satisfies Meta<typeof MultiSelectCombobox>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof MultiSelectCombobox>;
 
 const cuisines = [
   { value: "italian", label: "Italian" },

package/src/components/phone-frame.stories.tsx

@@ -11,7 +11,7 @@ const meta = {
 } satisfies Meta<typeof PhoneFrame>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof PhoneFrame>;
 
 export const Default: Story = {
   args: { width: 220 },

package/src/components/poster-stack.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PosterStack } from "./poster-stack";
+
+function posterDataUri(label: string, fill: string) {
+  return (
+    "data:image/svg+xml;utf8," +
+    encodeURIComponent(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400"><rect width="300" height="400" fill="${fill}"/><text x="50%" y="50%" font-family="monospace" font-size="20" fill="#fff" text-anchor="middle">${label}</text></svg>`
+    )
+  );
+}
+
+// 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 PosterStack> = {
+  title: "Events/PosterStack",
+  component: PosterStack,
+  tags: ["autodocs"],
+  args: {
+    posters: [
+      { src: posterDataUri("1", "#7a5c46"), alt: "Psihotrop poster" },
+      { src: posterDataUri("2", "#4a6a5c"), alt: "Warehouse rave poster" },
+      { src: posterDataUri("3", "#6a5c8a"), alt: "Jazz night poster" },
+    ],
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[500px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The float pauses via IntersectionObserver when scrolled off-screen and stops entirely under `prefers-reduced-motion: reduce`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PosterStack>;
+
+export const Default: Story = {};
+
+/** Fewer than three posters renders only the slots given. */
+export const TwoPosters: Story = {
+  args: {
+    posters: [
+      { src: posterDataUri("1", "#7a5c46"), alt: "Psihotrop poster" },
+      { src: posterDataUri("2", "#4a6a5c"), alt: "Warehouse rave poster" },
+    ],
+  },
+};
+
+/** No `src` renders the neutral placeholder block, same as `EventCard`. */
+export const MissingSources: Story = {
+  args: {
+    posters: [
+      { alt: "Psihotrop poster" },
+      { alt: "Warehouse rave poster" },
+      { alt: "Jazz night poster" },
+    ],
+  },
+};

package/src/components/poster-stack.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import * as React from "react";
+import { useEffect, useRef, useState } from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * PosterStack — three overlapping, gently rotated posters that float, the
+ * hub hero's aside slot in the source design.
+ *
+ * Two motion rules, both mandatory:
+ *   1. Stops entirely under `prefers-reduced-motion: reduce` — enforced via
+ *      an injected `<style>` media query rather than relying on Tailwind's
+ *      `motion-reduce:` variant, because the float is a custom `@keyframes`
+ *      animation Tailwind cannot express, and only a `!important` CSS rule
+ *      reliably beats the element's own inline `animation` style.
+ *   2. Pauses while the stack is scrolled off-screen — an IntersectionObserver
+ *      toggles `animation-play-state` on the three poster nodes so nothing
+ *      spends a paint budget while it isn't visible. Skipped entirely when
+ *      reduced motion is on, since nothing is animating to pause.
+ */
+
+export type PosterStackPoster = {
+  /** Absent renders a neutral placeholder block instead of an image. */
+  src?: string;
+  alt: string;
+};
+
+export type PosterStackProps = {
+  /** Rendered in order; only the first three are shown. */
+  posters: PosterStackPoster[];
+  className?: string;
+};
+
+const POSTER_STACK_OBSERVER_ROOT_MARGIN = "200px";
+
+const POSTER_STACK_ANIMATION_STYLE = `
+@keyframes ds-poster-stack-float-1 { to { transform: rotate(-5deg) translateY(-16px); } }
+@keyframes ds-poster-stack-float-2 { to { transform: rotate(3deg) translateY(14px); } }
+@keyframes ds-poster-stack-float-3 { to { transform: rotate(6deg) translateY(-11px); } }
+@media (prefers-reduced-motion: reduce) {
+  [data-ds-poster-stack-item] { animation: none !important; }
+}
+`;
+
+type PosterSlotConfig = {
+  positionClassName: string;
+  restTransform: string;
+  animationName: string;
+  animationDurationMs: number;
+  zIndexClassName?: string;
+};
+
+const POSTER_SLOTS: PosterSlotConfig[] = [
+  {
+    positionClassName: "left-[6px] top-[34px] w-[120px] md:left-0 md:top-[52px] md:w-[196px]",
+    restTransform: "rotate(-5deg)",
+    animationName: "ds-poster-stack-float-1",
+    animationDurationMs: 9000,
+  },
+  {
+    positionClassName: "left-[110px] top-0 w-[140px] md:left-[168px] md:w-[232px]",
+    restTransform: "rotate(3deg)",
+    animationName: "ds-poster-stack-float-2",
+    animationDurationMs: 11000,
+    zIndexClassName: "z-[3]",
+  },
+  {
+    positionClassName: "left-[238px] top-[58px] w-[120px] md:left-[378px] md:top-24 md:w-[196px]",
+    restTransform: "rotate(6deg)",
+    animationName: "ds-poster-stack-float-3",
+    animationDurationMs: 10000,
+  },
+];
+
+/** A warm, drop-shadowed decorative float — not a content surface, so the
+ * shadow is an art-directed literal rather than a `--shadow-card` token. */
+const POSTER_SHADOW = "0 22px 50px oklch(0.3 0.02 60 / 0.24)";
+
+export function PosterStack({ posters, className }: PosterStackProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const posterRefs = useRef<Array<HTMLDivElement | null>>([]);
+  const [failedIndices, setFailedIndices] = useState<Set<number>>(new Set());
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+
+    const container = containerRef.current;
+    if (!container) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        const playState = entry.isIntersecting ? "running" : "paused";
+        for (const poster of posterRefs.current) {
+          if (poster) poster.style.animationPlayState = playState;
+        }
+      },
+      { rootMargin: POSTER_STACK_OBSERVER_ROOT_MARGIN }
+    );
+
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, []);
+
+  const visiblePosters = posters.slice(0, POSTER_SLOTS.length);
+
+  return (
+    <div ref={containerRef} className={cn("relative h-[250px] md:h-[400px]", className)}>
+      <style>{POSTER_STACK_ANIMATION_STYLE}</style>
+
+      {visiblePosters.map((poster, index) => {
+        const slot = POSTER_SLOTS[index];
+        const showPoster = !!poster.src && !failedIndices.has(index);
+        return (
+          <div
+            key={poster.alt || index}
+            ref={(node) => {
+              posterRefs.current[index] = node;
+            }}
+            data-ds-poster-stack-item
+            className={cn(
+              "absolute aspect-[3/4] overflow-hidden rounded-xl bg-muted",
+              slot.positionClassName,
+              slot.zIndexClassName
+            )}
+            style={{
+              transform: slot.restTransform,
+              boxShadow: POSTER_SHADOW,
+              animationName: slot.animationName,
+              animationDuration: `${slot.animationDurationMs}ms`,
+              animationTimingFunction: "ease-in-out",
+              animationIterationCount: "infinite",
+              animationDirection: "alternate",
+            }}
+          >
+            {showPoster && (
+              // 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"
+                onError={() =>
+                  setFailedIndices((current) => new Set(current).add(index))
+                }
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/poster-tape.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PosterTape, type PosterTapeItem } from "./poster-tape";
+
+const items: PosterTapeItem[] = [
+  { id: "1", title: "Warehouse Rave", meta: "SAT 20:00" },
+  { id: "2", title: "Jazz on the Rooftop", meta: "FRI 19:30" },
+  { id: "3", title: "Open Mic Night", meta: "THU 21:00" },
+  { id: "4", title: "Street Food Market", meta: "SUN 12:00" },
+  { id: "5", title: "Vinyl & Vermouth", meta: "WED 18:00" },
+  { id: "6", title: "Psihotrop — From the Beginning to Infinity", meta: "SAT 22:00" },
+];
+
+// 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 PosterTape> = {
+  title: "Events/PosterTape",
+  component: PosterTape,
+  tags: ["autodocs"],
+  args: { items },
+  decorators: [
+    (Story) => (
+      <div className="max-w-[420px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The closing tape: small 4:5 posters drifting past at a slower, quieter speed than the featured rail. Built on `<DriftRail>` — same seamless loop and pause mechanics, just smaller items and a 60s default.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PosterTape>;
+
+/** No poster URLs supplied — every tile falls back to `<EventPosterFallback>`, same as `<EventCard>`. */
+export const Default: Story = {};
+
+export const Linked: Story = {
+  args: {
+    items: items.map((item) => ({ ...item, href: `/events/${item.id}` })),
+  },
+};
+
+export const Faster: Story = {
+  args: { durationSeconds: 24 },
+};
+
+/**
+ * Titles wrap in full at the tape's 132px width. This is the surface the
+ * report came from — "Movie Night: Futni m…", "Juventus vs AC Milan…" — and
+ * `<DriftRail>` lays its items out `items-stretch`, so a wrapped title makes
+ * the tape taller without breaking the seamless loop or the poster row's
+ * alignment.
+ */
+export const LongTitles: Story = {
+  args: {
+    items: [
+      { id: "1", title: "Movie Night: Futni må ikke være så vanskelig", meta: "SAT 20:00" },
+      { id: "2", title: "Juventus vs AC Milan — Serie A, live on the big screen", meta: "SUN 21:45" },
+      { id: "3", title: "Afterwork Karaoke at the Old Brewery Courtyard", meta: "THU 18:30" },
+      { id: "4", title: "Open Mic", meta: "WED 21:00" },
+    ],
+  },
+};

package/src/components/poster-tape.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { cn } from "../lib/utils";
+import { DriftRail } from "./drift-rail";
+import { EventPosterFallback } from "./event-poster-fallback";
+
+/**
+ * PosterTape — the closing marquee: small 4:5 posters drifting past at a
+ * slower, quieter speed than `<DriftRail>`'s default. Built on top of
+ * `<DriftRail>` rather than re-implementing the loop: both share the exact
+ * same seam-free-duplication and pause mechanics (`IntersectionObserver` +
+ * `prefers-reduced-motion`), and `<PosterTape>` only owns the item markup and
+ * a slower default speed.
+ */
+export type PosterTapeItem = {
+  id: string;
+  title: string;
+  /** Caller-composed, e.g. "Sat 5 · 20:00". Rendered as mono, small. */
+  meta: string;
+  posterUrl?: string;
+  href?: string;
+  /** Rendered instead of the poster when it's absent or failed to load. Defaults to `<EventPosterFallback />`. */
+  fallback?: ReactNode;
+};
+
+export type PosterTapeLinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+};
+
+function DefaultLink({ href, ...props }: PosterTapeLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type PosterTapeProps = {
+  items: PosterTapeItem[];
+  /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
+  linkComponent?: React.ComponentType<PosterTapeLinkProps>;
+  durationSeconds?: number;
+  className?: string;
+};
+
+const POSTER_TAPE_DEFAULT_DURATION_SECONDS = 60;
+
+function PosterTapeItemCard({
+  item,
+  LinkComponent,
+}: {
+  item: PosterTapeItem;
+  LinkComponent: React.ComponentType<PosterTapeLinkProps>;
+}) {
+  const [imgError, setImgError] = useState(false);
+  const showPoster = !!item.posterUrl && !imgError;
+
+  const body = (
+    <>
+      <div className="aspect-[4/5] w-full overflow-hidden rounded-xl bg-muted">
+        {showPoster ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={item.posterUrl}
+            alt={item.title}
+            title={item.title}
+            loading="lazy"
+            decoding="async"
+            className="h-full w-full object-cover"
+            onError={() => setImgError(true)}
+          />
+        ) : (
+          (item.fallback ?? <EventPosterFallback />)
+        )}
+      </div>
+      {/* The tape is 132px wide, which is exactly why the title used to read
+          "Movie Night: Futni m…". It wraps in full instead. `<DriftRail>` lays
+          its items out `items-stretch`, so a taller card only makes the tape
+          taller — the posters stay on one line and the loop's duplicate pass
+          is still pixel-identical, because both passes render the same items. */}
+      <div className="mt-1.5 text-[11px] font-semibold leading-[1.3] sm:mt-[7px] sm:text-[11.5px]">
+        {item.title}
+      </div>
+      <div className="mt-0.5 truncate font-mono text-[10px] text-muted-foreground sm:text-[10.5px]">
+        {item.meta}
+      </div>
+    </>
+  );
+
+  const itemClasses = "block w-[132px] shrink-0";
+
+  if (item.href) {
+    return (
+      <LinkComponent
+        href={item.href}
+        className={cn(
+          itemClasses,
+          "rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        )}
+      >
+        {body}
+      </LinkComponent>
+    );
+  }
+
+  return <div className={itemClasses}>{body}</div>;
+}
+
+export function PosterTape({
+  items,
+  linkComponent: LinkComponent = DefaultLink,
+  durationSeconds = POSTER_TAPE_DEFAULT_DURATION_SECONDS,
+  className,
+}: PosterTapeProps) {
+  return (
+    <DriftRail durationSeconds={durationSeconds} className={className}>
+      {items.map((item) => (
+        <PosterTapeItemCard key={item.id} item={item} LinkComponent={LinkComponent} />
+      ))}
+    </DriftRail>
+  );
+}

package/src/components/poster-wall.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PosterWall, PosterWallSkeleton } from "./poster-wall";
+
+function tile(color: string) {
+  return {
+    src:
+      "data:image/svg+xml;utf8," +
+      encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><rect width="60" height="60" fill="${color}"/></svg>`),
+  };
+}
+
+const TILE_COLORS = ["#7c5a3a", "#5a4a3a", "#8a6a4a", "#3a2a1a", "#6a4a2a", "#4a3a2a"];
+
+function tiles(count: number) {
+  return Array.from({ length: count }, (_, index) => tile(TILE_COLORS[index % TILE_COLORS.length]));
+}
+
+// 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 PosterWall> = {
+  title: "Events/PosterWall",
+  component: PosterWall,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "The hub's masthead — a dark tiled photo grid behind a sweeping light and a veil. `children` is a slot; the wall only owns the chrome and the container sizing/alignment for `variant`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PosterWall>;
+
+export const Default: Story = {
+  args: {
+    tiles: tiles(48),
+    children: (
+      <>
+        <div className="font-mono text-xs uppercase tracking-[0.2em] text-white/70">
+          Events this weekend
+        </div>
+        <h1 className="max-w-md text-4xl font-black tracking-[-0.02em]">
+          Where the city goes tonight
+        </h1>
+      </>
+    ),
+  },
+};
+
+/** The bottom-aligned mobile treatment: shorter wall, top-fading veil, fewer/larger tiles. */
+export const Compact: Story = {
+  args: {
+    variant: "compact",
+    tiles: tiles(36),
+    children: (
+      <>
+        <div className="font-mono text-[11px] uppercase tracking-[0.2em] text-white/70">
+          This weekend
+        </div>
+        <h1 className="text-2xl font-black tracking-[-0.02em]">Where the city goes tonight</h1>
+      </>
+    ),
+  },
+  decorators: [
+    (Story) => (
+      <div className="mx-auto w-[375px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/** No tiles supplied — every slot falls back to the striped placeholder. */
+export const NoTiles: Story = {
+  args: { children: <h1 className="text-3xl font-black">No poster data yet</h1> },
+};
+
+/** The tile grid at rest — no sweeping light in the loading state. */
+export const Skeleton: Story = {
+  render: () => <PosterWallSkeleton />,
+};
+
+/** The compact mobile masthead's loading state. */
+export const SkeletonCompact: Story = {
+  render: () => (
+    <div className="mx-auto w-[375px]">
+      <PosterWallSkeleton variant="compact" />
+    </div>
+  ),
+};