@bearmenu/ui 0.8.4 → 0.8.7

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

@@ -1,380 +1,4 @@
-import { beats, returnTransition, MotionIcon } from '../chunk-2WDJR6K7.js';
+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 { __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
-import { motion } from 'framer-motion';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var HEART_TIMES = [0, 0.18, 0.5, 0.76, 1];
-var heartBody = {
-  rest: { scaleX: 1, scaleY: 1, fillOpacity: 0, transition: returnTransition },
-  active: { scaleX: 1, scaleY: 1, fillOpacity: 1, transition: returnTransition },
-  play: {
-    scaleX: [1, 1.14, 0.9, 1.03, 1],
-    scaleY: [1, 0.82, 1.26, 0.96, 1],
-    fillOpacity: [0, 0, 1, 1, 1],
-    transition: beats(HEART_TIMES, 0.58)
-  }
-};
-function MotionHeart(props) {
-  return /* @__PURE__ */ jsx(MotionIcon, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx(
-    motion.path,
-    {
-      variants: heartBody,
-      style: { originX: "12px", originY: "13px" },
-      fill: "currentColor",
-      fillOpacity: 0,
-      d: "M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
-    }
-  ) }));
-}
-var BOOKMARK_TIMES = [0, 0.2, 0.56, 0.8, 1];
-var bookmarkBody = {
-  rest: { y: 0, scaleY: 1, fillOpacity: 0, transition: returnTransition },
-  active: { y: 0, scaleY: 1, fillOpacity: 1, transition: returnTransition },
-  play: {
-    // Lifts clear, drops, compresses against the notch, settles filled.
-    y: [0, -7, 1.5, 0, 0],
-    scaleY: [1, 1.07, 0.88, 1.02, 1],
-    fillOpacity: [0, 0, 0, 1, 1],
-    transition: beats(BOOKMARK_TIMES, 0.6)
-  }
-};
-function MotionBookmark(props) {
-  return /* @__PURE__ */ jsx(MotionIcon, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx(
-    motion.path,
-    {
-      variants: bookmarkBody,
-      style: { originX: "12px", originY: "21px" },
-      fill: "currentColor",
-      fillOpacity: 0,
-      d: "M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z"
-    }
-  ) }));
-}
-var SLIDER_ROWS = [5, 12, 19];
-var HANDLE_X = [14, 8, 16];
-var HANDLE_ACTIVE_DX = [-6, 7, -4];
-function sliderHandle(index) {
-  const dx = HANDLE_ACTIVE_DX[index];
-  return {
-    rest: { x: 0, transition: returnTransition },
-    active: { x: dx, transition: returnTransition },
-    play: {
-      x: [0, -dx * 0.12, dx * 1.12, dx],
-      transition: beats([0, 0.16, 0.72, 1], 0.55 + index * 0.04)
-    }
-  };
-}
-function MotionSliders(props) {
-  return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
-    SLIDER_ROWS.map((y) => /* @__PURE__ */ jsx("path", { d: `M3 ${y}h18`, opacity: 0.45 }, `track-${y}`)),
-    SLIDER_ROWS.map((y, i) => /* @__PURE__ */ jsx(motion.path, { variants: sliderHandle(i), d: `M${HANDLE_X[i]} ${y - 2}v4` }, `handle-${y}`))
-  ] }));
-}
-var lens = {
-  rest: { rotate: 0, transition: returnTransition },
-  active: { rotate: 0, transition: returnTransition },
-  play: {
-    // Pivots on the handle end, so the glass sweeps an arc like someone scanning.
-    rotate: [0, 9, -16, 4, 0],
-    transition: beats([0, 0.16, 0.48, 0.78, 1], 0.6)
-  }
-};
-var found = {
-  rest: { scale: 0, opacity: 0, transition: { duration: 0.15 } },
-  active: { scale: 1, opacity: 1, transition: { duration: 0.15 } },
-  play: {
-    scale: [0, 0, 0, 1.3, 1],
-    opacity: [0, 0, 0, 1, 1],
-    transition: beats([0, 0.16, 0.48, 0.78, 1], 0.6)
-  }
-};
-function MotionSearch(props) {
-  return /* @__PURE__ */ jsx(MotionIcon, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs(motion.g, { variants: lens, style: { originX: "21px", originY: "21px" }, children: [
-    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
-    /* @__PURE__ */ jsx("path", { d: "m21 21-4.34-4.34" }),
-    /* @__PURE__ */ jsx(
-      motion.circle,
-      {
-        variants: found,
-        opacity: 0,
-        style: { originX: "11px", originY: "11px" },
-        fill: "currentColor",
-        cx: "11",
-        cy: "11",
-        r: "2.5"
-      }
-    )
-  ] }) }));
-}
-var SHARE_TIMES = [0, 0.2, 0.62, 1];
-function shareNode(dx, dy) {
-  return {
-    rest: { x: 0, y: 0, opacity: 1, transition: returnTransition },
-    active: { x: 0, y: 0, opacity: 1, transition: returnTransition },
-    play: {
-      x: [0, -dx * 0.18, dx, 0],
-      y: [0, -dy * 0.18, dy, 0],
-      opacity: [1, 1, 0.15, 1],
-      transition: beats(SHARE_TIMES, 0.58)
-    }
-  };
-}
-var shareTop = shareNode(7, -4);
-var shareBottom = shareNode(7, 4);
-function MotionShare(props) {
-  return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
-    /* @__PURE__ */ jsx("circle", { cx: "6", cy: "12", r: "3" }),
-    /* @__PURE__ */ jsxs(motion.g, { variants: shareTop, children: [
-      /* @__PURE__ */ jsx("circle", { cx: "18", cy: "5", r: "3" }),
-      /* @__PURE__ */ jsx("line", { x1: "15.41", x2: "8.59", y1: "6.51", y2: "10.49" })
-    ] }),
-    /* @__PURE__ */ jsxs(motion.g, { variants: shareBottom, children: [
-      /* @__PURE__ */ jsx("circle", { cx: "18", cy: "19", r: "3" }),
-      /* @__PURE__ */ jsx("line", { x1: "8.59", x2: "15.42", y1: "13.51", y2: "17.49" })
-    ] })
-  ] }));
-}
-var SORT_TIMES = [0, 0.18, 0.6, 1];
-function sortArm(dy) {
-  return {
-    rest: { y: 0, transition: returnTransition },
-    active: { y: 0, transition: returnTransition },
-    play: {
-      y: [0, -dy * 0.2, dy, 0],
-      transition: beats(SORT_TIMES, 0.56)
-    }
-  };
-}
-var sortDown = sortArm(6);
-var sortUp = sortArm(-6);
-function MotionSort(props) {
-  return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
-    /* @__PURE__ */ jsxs(motion.g, { variants: sortDown, children: [
-      /* @__PURE__ */ jsx("path", { d: "m21 16-4 4-4-4" }),
-      /* @__PURE__ */ jsx("path", { d: "M17 20V4" })
-    ] }),
-    /* @__PURE__ */ jsxs(motion.g, { variants: sortUp, children: [
-      /* @__PURE__ */ jsx("path", { d: "m3 8 4-4 4 4" }),
-      /* @__PURE__ */ jsx("path", { d: "M7 4v16" })
-    ] })
-  ] }));
-}
-var checkStroke = {
-  rest: { pathLength: 0, opacity: 0, transition: { duration: 0.15 } },
-  active: { pathLength: 1, opacity: 1, transition: { duration: 0.15 } },
-  play: {
-    pathLength: [0, 1],
-    opacity: [1, 1],
-    transition: { duration: 0.26, ease: "easeOut" }
-  }
-};
-function MotionCheck(props) {
-  return /* @__PURE__ */ jsx(MotionIcon, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx(motion.path, { variants: checkStroke, opacity: 0, d: "M20 6 9 17l-5-5" }) }));
-}
-var SUN_RAYS = [
-  "M12 2v2",
-  "M12 20v2",
-  "m4.93 4.93 1.41 1.41",
-  "m17.66 17.66 1.41 1.41",
-  "M2 12h2",
-  "M20 12h2",
-  "m6.34 17.66-1.41 1.41",
-  "m19.07 4.93-1.41 1.41"
-];
-var THEME_TIMES = [0, 0.3, 0.7, 1];
-var rays = {
-  rest: { scale: 1, opacity: 1, transition: returnTransition },
-  active: { scale: 0, opacity: 0, transition: returnTransition },
-  play: {
-    scale: [1, 0.4, 0, 0],
-    opacity: [1, 0.5, 0, 0],
-    transition: beats(THEME_TIMES, 0.5)
-  }
-};
-var disc = {
-  rest: { scale: 1, opacity: 1, transition: returnTransition },
-  active: { scale: 0.6, opacity: 0, transition: returnTransition },
-  play: { scale: [1, 0.85, 0.6, 0.6], opacity: [1, 1, 0, 0], transition: beats(THEME_TIMES, 0.5) }
-};
-var crescent = {
-  rest: { scale: 0.6, opacity: 0, rotate: -35, transition: returnTransition },
-  active: { scale: 1, opacity: 1, rotate: 0, transition: returnTransition },
-  play: {
-    scale: [0.6, 0.7, 1.06, 1],
-    opacity: [0, 0, 1, 1],
-    rotate: [-35, -22, 4, 0],
-    transition: beats(THEME_TIMES, 0.5)
-  }
-};
-function MotionTheme(props) {
-  const origin = { originX: "12px", originY: "12px" };
-  return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
-    /* @__PURE__ */ jsx(motion.g, { variants: rays, style: origin, children: SUN_RAYS.map((d) => /* @__PURE__ */ jsx("path", { d }, d)) }),
-    /* @__PURE__ */ jsx(motion.circle, { variants: disc, style: origin, cx: "12", cy: "12", r: "4" }),
-    /* @__PURE__ */ jsx(
-      motion.path,
-      {
-        variants: crescent,
-        opacity: 0,
-        style: origin,
-        d: "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"
-      }
-    )
-  ] }));
-}
-var chevron = {
-  rest: { rotate: 0, y: 0, transition: returnTransition },
-  active: { rotate: 180, y: 0, transition: returnTransition },
-  play: {
-    rotate: [0, -12, 196, 180],
-    y: [0, 1, -1, 0],
-    transition: beats([0, 0.16, 0.72, 1], 0.44)
-  }
-};
-function MotionChevron(props) {
-  return /* @__PURE__ */ jsx(MotionIcon, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx(motion.path, { variants: chevron, style: { originX: "12px", originY: "12px" }, d: "m6 9 6 6 6-6" }) }));
-}
-var PLAYPAUSE_TIMES = [0, 0.24, 0.72, 1];
-var playHead = {
-  rest: { scale: 1, opacity: 1, transition: returnTransition },
-  active: { scale: 0.2, opacity: 0, transition: returnTransition },
-  play: { scale: [1, 1.1, 0.2, 0.2], opacity: [1, 1, 0, 0], transition: beats(PLAYPAUSE_TIMES, 0.46) }
-};
-function pauseBar(dx) {
-  return {
-    rest: { x: dx, scaleY: 0.2, opacity: 0, transition: returnTransition },
-    active: { x: 0, scaleY: 1, opacity: 1, transition: returnTransition },
-    play: {
-      x: [dx, dx * 0.7, -dx * 0.08, 0],
-      scaleY: [0.2, 0.4, 1.08, 1],
-      opacity: [0, 0.4, 1, 1],
-      transition: beats(PLAYPAUSE_TIMES, 0.46)
-    }
-  };
-}
-var barLeft = pauseBar(5);
-var barRight = pauseBar(-5);
-function MotionPlayPause(props) {
-  const origin = { originX: "12px", originY: "12px" };
-  return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
-    /* @__PURE__ */ jsx(
-      motion.path,
-      {
-        variants: playHead,
-        style: origin,
-        d: "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"
-      }
-    ),
-    /* @__PURE__ */ jsx(motion.rect, { variants: barLeft, opacity: 0, style: origin, x: "5", y: "3", width: "5", height: "18", rx: "1" }),
-    /* @__PURE__ */ jsx(motion.rect, { variants: barRight, opacity: 0, style: origin, x: "14", y: "3", width: "5", height: "18", rx: "1" })
-  ] }));
-}
-var EYE_TIMES = [0, 0.3, 0.74, 1];
-var lid = {
-  rest: { scaleY: 1, transition: returnTransition },
-  active: { scaleY: 0.18, transition: returnTransition },
-  play: { scaleY: [1, 1.06, 0.14, 0.18], transition: beats(EYE_TIMES, 0.46) }
-};
-var pupil = {
-  rest: { scale: 1, opacity: 1, transition: returnTransition },
-  active: { scale: 0.2, opacity: 0, transition: returnTransition },
-  play: { scale: [1, 1, 0.2, 0.2], opacity: [1, 1, 0, 0], transition: beats(EYE_TIMES, 0.46) }
-};
-var slash = {
-  rest: { pathLength: 0, opacity: 0, transition: { duration: 0.16 } },
-  active: { pathLength: 1, opacity: 1, transition: { duration: 0.16 } },
-  play: {
-    pathLength: [0, 0, 1, 1],
-    opacity: [0, 1, 1, 1],
-    transition: beats(EYE_TIMES, 0.46)
-  }
-};
-function MotionEye(props) {
-  const origin = { originX: "12px", originY: "12px" };
-  return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
-    /* @__PURE__ */ jsx(
-      motion.path,
-      {
-        variants: lid,
-        style: origin,
-        d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
-      }
-    ),
-    /* @__PURE__ */ jsx(motion.circle, { variants: pupil, style: origin, cx: "12", cy: "12", r: "3" }),
-    /* @__PURE__ */ jsx(motion.path, { variants: slash, opacity: 0, d: "m2 2 20 20" })
-  ] }));
-}
-var STAR_TIMES = [0, 0.2, 0.62, 1];
-var starBody = {
-  rest: { scale: 1, rotate: 0, fillOpacity: 0, transition: returnTransition },
-  active: { scale: 1, rotate: 0, fillOpacity: 1, transition: returnTransition },
-  play: {
-    scale: [1, 0.72, 1.22, 1],
-    rotate: [0, -14, 6, 0],
-    fillOpacity: [0, 0, 1, 1],
-    transition: beats(STAR_TIMES, 0.5)
-  }
-};
-function MotionStar(props) {
-  return /* @__PURE__ */ jsx(MotionIcon, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx(
-    motion.path,
-    {
-      variants: starBody,
-      style: { originX: "12px", originY: "12px" },
-      fill: "currentColor",
-      fillOpacity: 0,
-      d: "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"
-    }
-  ) }));
-}
-var COPY_TIMES = [0, 0.22, 0.5, 0.76, 1];
-var copySheet = {
-  rest: { x: 0, y: 0, opacity: 1, transition: returnTransition },
-  active: { x: 0, y: 0, opacity: 0, transition: returnTransition },
-  play: {
-    x: [0, 2.5, 4, 0, 0],
-    y: [0, -2.5, -4, 0, 0],
-    opacity: [1, 1, 1, 0, 0],
-    transition: beats(COPY_TIMES, 0.6)
-  }
-};
-var copyBack = {
-  rest: { opacity: 1, transition: returnTransition },
-  active: { opacity: 0, transition: returnTransition },
-  play: { opacity: [1, 1, 1, 0, 0], transition: beats(COPY_TIMES, 0.6) }
-};
-var copyCheck = {
-  rest: { pathLength: 0, opacity: 0, transition: { duration: 0.14 } },
-  active: { pathLength: 1, opacity: 1, transition: { duration: 0.14 } },
-  play: {
-    pathLength: [0, 0, 0, 0, 1],
-    opacity: [0, 0, 0, 1, 1],
-    transition: beats(COPY_TIMES, 0.6)
-  }
-};
-function MotionCopy(props) {
-  return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
-    /* @__PURE__ */ jsx(motion.path, { variants: copyBack, d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" }),
-    /* @__PURE__ */ jsx(motion.rect, { variants: copySheet, width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
-    /* @__PURE__ */ jsx(motion.path, { variants: copyCheck, opacity: 0, d: "M20 6 9 17l-5-5" })
-  ] }));
-}
-var refreshRing = {
-  rest: { rotate: 0, transition: returnTransition },
-  active: { rotate: 0, transition: returnTransition },
-  play: {
-    rotate: [0, -18, 372, 360],
-    transition: beats([0, 0.14, 0.8, 1], 0.66)
-  }
-};
-function MotionRefresh(props) {
-  return /* @__PURE__ */ jsx(MotionIcon, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs(motion.g, { variants: refreshRing, style: { originX: "12px", originY: "12px" }, children: [
-    /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
-    /* @__PURE__ */ jsx("path", { d: "M21 3v5h-5" }),
-    /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
-    /* @__PURE__ */ jsx("path", { d: "M8 16H3v5" })
-  ] }) }));
-}
-
-export { MotionBookmark, MotionCheck, MotionChevron, MotionCopy, MotionEye, MotionHeart, MotionPlayPause, MotionRefresh, MotionSearch, MotionShare, MotionSliders, MotionSort, MotionStar, MotionTheme };
+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 };