@bearmenu/ui 0.8.3 → 0.8.6

package/dist/components/motion-icon-controls.d.ts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MotionIconProps } from './motion-icon.js';
+import 'framer-motion';
+import 'react';
+
+declare function MotionHeart(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionBookmark(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionSliders(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionSearch(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionShare(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionSort(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionCheck(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+/**
+ * `active` is dark mode. The sun does not fade into the moon — its rays pull
+ * into the disc first, then the crescent swings in, so the two shapes never
+ * cross-dissolve into visual mush at 20px.
+ */
+declare function MotionTheme(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionChevron(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionPlayPause(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionEye(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionStar(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionCopy(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionRefresh(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+
+export { MotionBookmark, MotionCheck, MotionChevron, MotionCopy, MotionEye, MotionHeart, MotionPlayPause, MotionRefresh, MotionSearch, MotionShare, MotionSliders, MotionSort, MotionStar, MotionTheme };

package/dist/components/motion-icon-controls.js

@@ -0,0 +1,4 @@
+export { MotionBookmark, MotionCheck, MotionChevron, MotionCopy, MotionEye, MotionHeart, MotionPlayPause, MotionRefresh, MotionSearch, MotionShare, MotionSliders, MotionSort, MotionStar, MotionTheme } from '../chunk-TT3WFS6S.js';
+import '../chunk-2WDJR6K7.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';

package/dist/components/motion-icon-set.d.ts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MotionIconProps } from './motion-icon.js';
+import 'framer-motion';
+import 'react';
+
+/**
+ * Lucide draws roof and walls as one closed path; it is cut at the eaves
+ * (y=10) so the roof can leave. At rest the round caps of the two open paths
+ * overlap and the seam is invisible.
+ */
+declare function MotionHouse(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+/**
+ * The one gesture that HOLDS: uncrossed is the active pose. ~89° of relative
+ * separation, so the outline changes completely and the state is readable from
+ * the silhouette alone.
+ */
+declare function MotionUtensils(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+declare function MotionMapPin(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+/**
+ * Lucide's calendar has no pages — it is a box, a rule and six dots, and
+ * nothing in that geometry can roll. So the day dots become the page content,
+ * clipped to the body interior. The frame and binder rings hold perfectly
+ * still, which is what sells the contents moving.
+ */
+declare function MotionCalendar(props: MotionIconProps): react_jsx_runtime.JSX.Element;
+
+export { MotionCalendar, MotionHouse, MotionMapPin, MotionUtensils };

package/dist/components/motion-icon-set.js

@@ -0,0 +1,139 @@
+import { beats, MotionIcon, returnTransition } from '../chunk-2WDJR6K7.js';
+import '../chunk-FEK5XGZW.js';
+import { __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
+import * as React from 'react';
+import { motion } from 'framer-motion';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var HOUSE_TIMES = [0, 0.16, 0.44, 0.72, 1];
+var houseRoof = {
+  rest: { y: 0, scaleY: 1, transition: returnTransition },
+  active: { y: 0, scaleY: 1, transition: returnTransition },
+  play: {
+    // Dips into the walls, launches 9 units clear and stretches, falls, lands
+    // 0.9 low onto walls that compress under it, settles.
+    y: [0, 1.5, -9, 0.9, 0],
+    scaleY: [1, 0.92, 1.06, 0.86, 1],
+    transition: beats(HOUSE_TIMES)
+  }
+};
+var houseWalls = {
+  rest: { scaleY: 1, transition: returnTransition },
+  active: { scaleY: 1, transition: returnTransition },
+  play: { scaleY: [1, 1, 1, 0.9, 1], transition: beats(HOUSE_TIMES) }
+};
+function MotionHouse(props) {
+  return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
+    /* @__PURE__ */ jsx(
+      motion.path,
+      {
+        variants: houseRoof,
+        style: { originX: "12px", originY: "10px" },
+        d: "M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10"
+      }
+    ),
+    /* @__PURE__ */ jsxs(motion.g, { variants: houseWalls, style: { originX: "12px", originY: "21px" }, children: [
+      /* @__PURE__ */ jsx("path", { d: "M21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V10" }),
+      /* @__PURE__ */ jsx("path", { d: "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" })
+    ] })
+  ] }));
+}
+var UTENSILS_TIMES = [0, 0.18, 0.72, 1];
+var SEPARATION = 5;
+var fork = {
+  rest: { rotate: 0, x: 0, transition: returnTransition },
+  active: { rotate: -44, x: -SEPARATION, transition: returnTransition },
+  play: {
+    rotate: [0, 6, -50, -44],
+    x: [0, 0.8, -6, -SEPARATION],
+    transition: beats(UTENSILS_TIMES, 0.6)
+  }
+};
+var knife = {
+  rest: { rotate: 0, x: 0, transition: returnTransition },
+  active: { rotate: 45, x: SEPARATION, transition: returnTransition },
+  play: {
+    rotate: [0, -6, 51, 45],
+    x: [0, -0.8, 6, SEPARATION],
+    transition: beats(UTENSILS_TIMES, 0.6)
+  }
+};
+var CROSSING = { originX: "12px", originY: "12px" };
+function MotionUtensils(props) {
+  return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
+    /* @__PURE__ */ jsx(
+      motion.path,
+      {
+        variants: knife,
+        style: CROSSING,
+        d: "M15 15 3.3 3.3a4.2 4.2 0 0 0 0 6l7.3 7.3c.7.7 2 .7 2.8 0L15 15Zm0 0 7 7"
+      }
+    ),
+    /* @__PURE__ */ jsxs(motion.g, { variants: fork, style: CROSSING, children: [
+      /* @__PURE__ */ jsx("path", { d: "m16 2-2.3 2.3a3 3 0 0 0 0 4.2l1.8 1.8a3 3 0 0 0 4.2 0L22 8" }),
+      /* @__PURE__ */ jsx("path", { d: "m2.1 21.8 6.4-6.3" }),
+      /* @__PURE__ */ jsx("path", { d: "m19 5-7 7" })
+    ] })
+  ] }));
+}
+var PIN_TIMES = [0, 0.16, 0.44, 0.72, 1];
+var pinBody = {
+  rest: { y: 0, scaleY: 1, transition: returnTransition },
+  active: { y: 0, scaleY: 1, transition: returnTransition },
+  play: {
+    y: [0, 1.2, -9, 0, 0],
+    scaleY: [1, 0.86, 1.08, 0.84, 1],
+    transition: beats(PIN_TIMES)
+  }
+};
+var pinDot = {
+  rest: { fillOpacity: 0, scale: 1, transition: { duration: 0.18 } },
+  active: { fillOpacity: 1, scale: 1, transition: { duration: 0.18 } },
+  play: {
+    fillOpacity: [0, 0, 0, 1, 1],
+    scale: [1, 1, 1, 1.35, 1],
+    transition: beats(PIN_TIMES)
+  }
+};
+function MotionMapPin(props) {
+  return /* @__PURE__ */ jsx(MotionIcon, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs(motion.g, { variants: pinBody, style: { originX: "12px", originY: "22px" }, children: [
+    /* @__PURE__ */ jsx("path", { d: "M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" }),
+    /* @__PURE__ */ jsx(
+      motion.circle,
+      {
+        variants: pinDot,
+        style: { originX: "12px", originY: "10px" },
+        fill: "currentColor",
+        fillOpacity: 0,
+        cx: "12",
+        cy: "10",
+        r: "3"
+      }
+    )
+  ] }) }));
+}
+var ROWS = [14, 18, 22, 26, 30, 34];
+var COLS = [8, 12, 16];
+var reel = {
+  rest: { y: 0, transition: returnTransition },
+  active: { y: 0, transition: returnTransition },
+  play: {
+    // Exactly four rows (16 units, ~15px), so arriving rows land where the
+    // departing ones began and the end pose is identical to the rest pose.
+    y: [0, -4, -8, -12, -17, -16],
+    transition: beats([0, 0.18, 0.34, 0.5, 0.85, 1], 0.65)
+  }
+};
+function MotionCalendar(props) {
+  const clipId = `cal-body-${React.useId().replace(/:/g, "")}`;
+  return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: clipId, children: /* @__PURE__ */ jsx("rect", { x: "3.5", y: "10.5", width: "17", height: "11", rx: "1.5" }) }) }),
+    /* @__PURE__ */ jsx("path", { d: "M8 2v4" }),
+    /* @__PURE__ */ jsx("path", { d: "M16 2v4" }),
+    /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 10h18" }),
+    /* @__PURE__ */ jsx("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ jsx(motion.g, { variants: reel, children: ROWS.map((y) => COLS.map((x) => /* @__PURE__ */ jsx("path", { d: `M${x} ${y}h.01` }, `${x}-${y}`))) }) })
+  ] }));
+}
+
+export { MotionCalendar, MotionHouse, MotionMapPin, MotionUtensils };

package/dist/components/motion-icon.d.ts

@@ -0,0 +1,44 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as framer_motion from 'framer-motion';
+import { Transition, Variants } from 'framer-motion';
+import * as React from 'react';
+
+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;
+};
+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.
+ */
+declare function beats(times: number[], duration?: number): Transition;
+/** Leaving is not a performance — it returns the glyph, firmly and fast. */
+declare const returnTransition: Transition;
+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.
+ */
+declare function poses(rest: PoseValues, active: PoseValues, play: Record<string, number[]>, transition: Transition): Variants;
+/**
+ * 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.
+ */
+declare function useIconGesture(active: boolean, replayToken: number): framer_motion.LegacyAnimationControls;
+declare function MotionIcon({ active, replayToken, className, children, }: MotionIconProps & {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+export { MotionIcon, type MotionIconProps, type MotionIconVariant, beats, poses, returnTransition, useIconGesture };

package/dist/components/motion-icon.js

@@ -0,0 +1,3 @@
+export { MotionIcon, beats, poses, returnTransition, useIconGesture } from '../chunk-2WDJR6K7.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';

package/dist/components/multi-select-combobox.js

@@ -1,7 +1,7 @@
-import { Checkbox } from '../chunk-D5QHEHXJ.js';
 import { Popover, PopoverTrigger, PopoverContent } from '../chunk-66MAPLXS.js';
 import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-XNA2INVQ.js';
 import '../chunk-FRPPIXMY.js';
+import { Checkbox } from '../chunk-D5QHEHXJ.js';
 import { Button } from '../chunk-H3BV4VAG.js';
 import '../chunk-R47NEOSI.js';
 import { Badge } from '../chunk-UKBNQO6Q.js';

package/dist/components/place-about-tab.js

@@ -1,7 +1,7 @@
-export { PlaceAboutTab } from '../chunk-UZ3PCIE5.js';
-import '../chunk-VBA45GLP.js';
-import '../chunk-WSRWFA6K.js';
+export { PlaceAboutTab } from '../chunk-XWMRABZW.js';
 import '../chunk-VG3PND3D.js';
+import '../chunk-WSRWFA6K.js';
+import '../chunk-ZDAHKI3A.js';
 import '../chunk-7BWTYWM3.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/components/place-details-mobile.js

@@ -1,7 +1,7 @@
-import { PlaceAboutTab } from '../chunk-UZ3PCIE5.js';
-import '../chunk-VBA45GLP.js';
-import '../chunk-WSRWFA6K.js';
+import { PlaceAboutTab } from '../chunk-XWMRABZW.js';
 import '../chunk-VG3PND3D.js';
+import '../chunk-WSRWFA6K.js';
+import '../chunk-ZDAHKI3A.js';
 import { Text } from '../chunk-7BWTYWM3.js';
 import { Badge } from '../chunk-UKBNQO6Q.js';
 import { cn } from '../chunk-FEK5XGZW.js';

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

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * 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.
+ */
+type PosterStackPoster = {
+    /** Absent renders a neutral placeholder block instead of an image. */
+    src?: string;
+    alt: string;
+};
+type PosterStackProps = {
+    /** Rendered in order; only the first three are shown. */
+    posters: PosterStackPoster[];
+    className?: string;
+};
+declare function PosterStack({ posters, className }: PosterStackProps): react_jsx_runtime.JSX.Element;
+
+export { PosterStack, type PosterStackPoster, type PosterStackProps };

package/dist/components/poster-stack.js

@@ -0,0 +1,104 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';
+import { useRef, useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var POSTER_STACK_OBSERVER_ROOT_MARGIN = "200px";
+var 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; }
+}
+`;
+var POSTER_SLOTS = [
+  {
+    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: 9e3
+  },
+  {
+    positionClassName: "left-[110px] top-0 w-[140px] md:left-[168px] md:w-[232px]",
+    restTransform: "rotate(3deg)",
+    animationName: "ds-poster-stack-float-2",
+    animationDurationMs: 11e3,
+    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: 1e4
+  }
+];
+var POSTER_SHADOW = "0 22px 50px oklch(0.3 0.02 60 / 0.24)";
+function PosterStack({ posters, className }) {
+  const containerRef = useRef(null);
+  const posterRefs = useRef([]);
+  const [failedIndices, setFailedIndices] = useState(/* @__PURE__ */ 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 /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("relative h-[250px] md:h-[400px]", className), children: [
+    /* @__PURE__ */ jsx("style", { children: POSTER_STACK_ANIMATION_STYLE }),
+    visiblePosters.map((poster, index) => {
+      const slot = POSTER_SLOTS[index];
+      const showPoster = !!poster.src && !failedIndices.has(index);
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: (node) => {
+            posterRefs.current[index] = node;
+          },
+          "data-ds-poster-stack-item": true,
+          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"
+          },
+          children: showPoster && // eslint-disable-next-line @next/next/no-img-element
+          /* @__PURE__ */ jsx(
+            "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))
+            }
+          )
+        },
+        poster.alt || index
+      );
+    })
+  ] });
+}
+
+export { PosterStack };

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

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+/**
+ * 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.
+ */
+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;
+};
+type PosterTapeLinkProps = {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+};
+type PosterTapeProps = {
+    items: PosterTapeItem[];
+    /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
+    linkComponent?: React.ComponentType<PosterTapeLinkProps>;
+    durationSeconds?: number;
+    className?: string;
+};
+declare function PosterTape({ items, linkComponent: LinkComponent, durationSeconds, className, }: PosterTapeProps): react_jsx_runtime.JSX.Element;
+
+export { PosterTape, type PosterTapeItem, type PosterTapeLinkProps, type PosterTapeProps };

package/dist/components/poster-tape.js

@@ -0,0 +1,64 @@
+import { DriftRail } from '../chunk-GPH6L4DX.js';
+import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { useState } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+var POSTER_TAPE_DEFAULT_DURATION_SECONDS = 60;
+function PosterTapeItemCard({
+  item,
+  LinkComponent
+}) {
+  var _a;
+  const [imgError, setImgError] = useState(false);
+  const showPoster = !!item.posterUrl && !imgError;
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "aspect-[4/5] w-full overflow-hidden rounded-xl bg-muted", children: showPoster ? (
+      // eslint-disable-next-line @next/next/no-img-element
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: item.posterUrl,
+          alt: item.title,
+          title: item.title,
+          loading: "lazy",
+          decoding: "async",
+          className: "h-full w-full object-cover",
+          onError: () => setImgError(true)
+        }
+      )
+    ) : (_a = item.fallback) != null ? _a : /* @__PURE__ */ jsx(EventPosterFallback, {}) }),
+    /* @__PURE__ */ jsx("div", { className: "mt-1.5 text-[11px] font-semibold leading-[1.3] sm:mt-[7px] sm:text-[11.5px]", children: item.title }),
+    /* @__PURE__ */ jsx("div", { className: "mt-0.5 truncate font-mono text-[10px] text-muted-foreground sm:text-[10.5px]", children: item.meta })
+  ] });
+  const itemClasses = "block w-[132px] shrink-0";
+  if (item.href) {
+    return /* @__PURE__ */ jsx(
+      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"
+        ),
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: itemClasses, children: body });
+}
+function PosterTape({
+  items,
+  linkComponent: LinkComponent = DefaultLink,
+  durationSeconds = POSTER_TAPE_DEFAULT_DURATION_SECONDS,
+  className
+}) {
+  return /* @__PURE__ */ jsx(DriftRail, { durationSeconds, className, children: items.map((item) => /* @__PURE__ */ jsx(PosterTapeItemCard, { item, LinkComponent }, item.id)) });
+}
+
+export { PosterTape };

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

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type PosterWallTile = {
+    src?: string;
+};
+type PosterWallProps = {
+    /** Background tiles. Desktop renders 48, `compact` renders 36 — shorter arrays are padded with placeholders. */
+    tiles?: PosterWallTile[];
+    /** `compact` is the bottom-aligned mobile treatment (fewer, larger tiles, a top-fading veil). */
+    variant?: "default" | "compact";
+    /** The overlay content — fully caller-composed. */
+    children?: React.ReactNode;
+    className?: string;
+};
+declare function PosterWall({ tiles, variant, children, className }: PosterWallProps): react_jsx_runtime.JSX.Element;
+type PosterWallSkeletonProps = {
+    /** `compact` is the bottom-aligned mobile treatment (fewer, larger tiles, a top-fading veil). */
+    variant?: "default" | "compact";
+    className?: string;
+};
+/** The tile grid at rest — the sweeping light never renders in the loading state. */
+declare function PosterWallSkeleton({ variant, className }: PosterWallSkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { PosterWall, type PosterWallProps, PosterWallSkeleton, type PosterWallSkeletonProps, type PosterWallTile };