@bearmenu/ui 0.8.18 → 0.8.19

package/dist/{chunk-PW247TG2.js → chunk-BRXI6EDO.js}

@@ -53,8 +53,11 @@ function TimelineHourPuck({
           variant === "responsive" && cn(
             chipClasses,
             // The station look from `lg`: bordered, background-filled,
-            // no fixed width. Every chip utility above has an `lg:` twin.
-            "lg:h-auto lg:min-w-0 lg:gap-0 lg:border-border lg:bg-background lg:px-[7px] lg:py-[3px] lg:text-[12.5px] lg:text-foreground",
+            // content-width. Every chip utility above has an `lg:` twin.
+            // `min-w-max`, NOT `min-w-0`: the host centres the puck inside
+            // a zero-width flex box, and a flex item allowed to shrink to 0
+            // collapses to a 24px square behind its own text.
+            "lg:h-auto lg:min-w-max lg:shrink-0 lg:gap-0 lg:border-border lg:bg-background lg:px-[7px] lg:py-[3px] lg:text-[12.5px] lg:text-foreground",
             isLive && "lg:border-success/40 lg:bg-background lg:text-success"
           )
         ),

package/dist/{chunk-LYREUZH6.js → chunk-QRSIJC4X.js}

@@ -1,4 +1,4 @@
-import { TimelineHourPuck, TIMELINE_MOBILE_GUTTER_CLASS } from './chunk-PW247TG2.js';
+import { TimelineHourPuck, TIMELINE_MOBILE_GUTTER_CLASS } from './chunk-BRXI6EDO.js';
 import { Separator } from './chunk-NWZGSLPU.js';
 import { Skeleton } from './chunk-XBBEX4SF.js';
 import { cn } from './chunk-FEK5XGZW.js';

package/dist/components/alert.d.ts

@@ -3,10 +3,10 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const alertVariants: (props?: ({
-    variant?: "success" | "warning" | "default" | "destructive" | null | undefined;
+    variant?: "default" | "destructive" | "warning" | "success" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "success" | "warning" | "default" | "destructive" | null | undefined;
+    variant?: "default" | "destructive" | "warning" | "success" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
 declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
 declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/components/badge.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "success" | "warning" | "default" | "destructive" | "outline" | "secondary" | "glass" | "overlay" | "brown" | "onPrimary" | null | undefined;
+    variant?: "default" | "destructive" | "warning" | "success" | "outline" | "secondary" | "glass" | "overlay" | "brown" | "onPrimary" | null | undefined;
     live?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {

package/dist/components/button.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "warning" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "glass" | "overlay" | "ink" | "brown" | null | undefined;
+    variant?: "default" | "destructive" | "warning" | "link" | "outline" | "secondary" | "ghost" | "glass" | "overlay" | "ink" | "brown" | null | undefined;
     size?: "default" | "xs" | "sm" | "lg" | "pill" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;

package/dist/components/card.d.ts

@@ -3,12 +3,12 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const cardVariants: (props?: ({
-    variant?: "outline" | "glass" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
+    variant?: "muted" | "outline" | "glass" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "outline" | "glass" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
+    variant?: "muted" | "outline" | "glass" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/command.d.ts

@@ -4,11 +4,11 @@ import { DialogProps } from '@radix-ui/react-dialog';
 
 declare const Command: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -28,61 +28,61 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 declare const CommandList: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandLoading: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
     progress?: number;
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
     alwaysRender?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

package/dist/components/event-hub-hero.d.ts

@@ -43,9 +43,11 @@ type EventHubHeroProps = {
     /** The right-column slot — the poster stack in the source design. */
     aside?: React.ReactNode;
     /**
-     * The text column's last row, under the figures — the hub's tonight state
-     * strip. The figures say scale; this says what is on right now, and it is
-     * the one thing on the first screen a reader can tap into the timeline.
+     * The hub's tonight state strip. The figures say scale; this says what is
+     * on right now, and it is the one thing on the first screen a reader can
+     * tap into the timeline. On a phone it follows the aside — title, figures,
+     * posters, then the one line that says what is on — and from `lg` it is a
+     * content-width row under both columns.
      */
     footer?: React.ReactNode;
     className?: string;

package/dist/components/event-hub-hero.js

@@ -17,10 +17,10 @@ function EventHubHero({
     "div",
     {
       className: cn(
-        // 16px between the text column and the aside on a phone: with a
-        // tappable poster stack the aside is content, not decoration, and
-        // gets the within-section rhythm rather than a section gap.
-        "grid grid-cols-1 gap-4 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-10",
+        // 12px between the phone's blocks — the page's rhythm, the same as
+        // between the sections below: with a tappable poster stack the aside
+        // is content, not decoration, and gets no section gap of its own.
+        "grid grid-cols-1 gap-3 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-x-10 lg:gap-y-6",
         className
       ),
       children: [
@@ -86,10 +86,10 @@ function EventHubHero({
                 );
               })
             }
-          ),
-          footer && /* @__PURE__ */ jsx("div", { className: "order-4 pt-1.5 lg:order-none lg:pt-2", children: footer })
+          )
         ] }),
-        aside && /* @__PURE__ */ jsx("div", { className: "min-w-0", children: aside })
+        aside && /* @__PURE__ */ jsx("div", { className: "min-w-0", children: aside }),
+        footer && /* @__PURE__ */ jsx("div", { className: "lg:col-span-2 lg:w-fit lg:min-w-[480px]", children: footer })
       ]
     }
   );
@@ -100,7 +100,7 @@ function EventHubHeroSkeleton({ aside, footer, className }) {
     {
       "aria-hidden": "true",
       className: cn(
-        "grid grid-cols-1 gap-4 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-10",
+        "grid grid-cols-1 gap-3 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-x-10 lg:gap-y-6",
         className
       ),
       children: [
@@ -121,10 +121,10 @@ function EventHubHeroSkeleton({ aside, footer, className }) {
               ]
             },
             index
-          )) }),
-          footer && /* @__PURE__ */ jsx("div", { className: "order-4 pt-1.5 lg:order-none lg:pt-2", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[52px] w-full rounded-[14px]" }) })
+          )) })
         ] }),
-        aside && /* @__PURE__ */ jsx("div", { className: "min-w-0", children: aside })
+        aside && /* @__PURE__ */ jsx("div", { className: "min-w-0", children: aside }),
+        footer && /* @__PURE__ */ jsx("div", { className: "lg:col-span-2 lg:w-fit lg:min-w-[480px]", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[52px] w-full rounded-[14px]" }) })
       ]
     }
   );

package/dist/components/event-tonight-strip.js

@@ -2,7 +2,7 @@ import { Skeleton } from '../chunk-XBBEX4SF.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
 import * as React from 'react';
-import { Clock, CalendarDays, ArrowRight } from 'lucide-react';
+import { Clock, CalendarDays, ChevronRight } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function DefaultLink(_a) {
@@ -44,7 +44,7 @@ function EventTonightStrip({
         actionLabel
       ] })
     ] }),
-    interactive && /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4 shrink-0 text-muted-foreground", "aria-hidden": true })
+    interactive && /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 shrink-0 text-muted-foreground", "aria-hidden": true })
   ] });
   const rootClasses = cn(
     "flex min-h-[52px] w-full items-center gap-2.5 rounded-[14px] border bg-card px-3.5 py-2 text-left",

package/dist/components/item.d.ts

@@ -3,12 +3,12 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const itemVariants: (props?: ({
-    variant?: "default" | "outline" | "muted" | null | undefined;
+    variant?: "default" | "muted" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Item: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "default" | "outline" | "muted" | null | undefined;
+    variant?: "default" | "muted" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {

package/dist/components/menu-family-block.js

@@ -17,7 +17,7 @@ function DefaultLink(_a) {
 }
 var GROUND = PHOTO_GROUND;
 var INK_PHONE = "bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0.12)_0%,oklch(0.16_0.012_55_/_0.55)_38%,oklch(0.16_0.012_55_/_0.92)_62%,oklch(0.16_0.012_55_/_0.96)_100%)]";
-var INK_WIDE = "lg:bg-[linear-gradient(to_right,oklch(0.16_0.012_55_/_0.32)_0%,oklch(0.16_0.012_55_/_0.62)_34%,oklch(0.16_0.012_55_/_0.9)_52%,oklch(0.16_0.012_55_/_0.96)_100%)]";
+var INK_WIDE = "lg:bg-[linear-gradient(to_right,oklch(0.16_0.012_55_/_0.5)_0%,oklch(0.16_0.012_55_/_0.66)_34%,oklch(0.16_0.012_55_/_0.9)_52%,oklch(0.16_0.012_55_/_0.96)_100%)]";
 var TEXT_SCRIM = (
   /* `isolate` + `before:-z-10`: a positioned pseudo-element paints ABOVE the
      column's in-flow text unless the column is its own stacking context and
@@ -70,8 +70,9 @@ function MenuFamilyBlock({
                 {
                   className: cn(
                     "relative flex min-h-[220px] flex-col justify-end p-3.5",
-                    wide && "lg:min-h-[320px] lg:p-5",
-                    TEXT_SCRIM
+                    TEXT_SCRIM,
+                    // The two-column card has ONE gradient from `lg` — see `INK_WIDE`.
+                    wide && "lg:min-h-[320px] lg:p-5 lg:before:hidden"
                   ),
                   children: [
                     pill && /* @__PURE__ */ jsx(

package/dist/components/place-card.js

@@ -1,6 +1,6 @@
-import { NEUTRAL_ICON_FILTER } from '../chunk-LQWGZIYA.js';
 import { OVERLAY_PILL } from '../chunk-EZG2NELX.js';
 import { HOVER_IMAGE_MOTION, HOVER_IMAGE_WRAPPER, HOVER_MOTION, HOVER_LIFT_GRID_GROUP } from '../chunk-XCB3F6SF.js';
+import { NEUTRAL_ICON_FILTER } from '../chunk-LQWGZIYA.js';
 import { GradeAtom } from '../chunk-DJD3EMPK.js';
 import { showsGradeAtom } from '../chunk-I5V446BX.js';
 import { Separator } from '../chunk-NWZGSLPU.js';

package/dist/components/poster-stack.js

@@ -17,6 +17,7 @@ var POSTER_STACK_ANIMATION_STYLE = `
   [data-ds-poster-stack-item] { animation: none !important; }
 }
 `;
+var PHONE_STAGE_CLASS = "mx-auto w-[336px] max-w-full";
 var POSTER_SLOTS = [
   {
     positionClassName: "left-0 top-[28px] w-[112px] md:left-0 md:top-[52px] md:w-[196px]",
@@ -65,71 +66,78 @@ function PosterStack({
     return () => observer.disconnect();
   }, []);
   const visiblePosters = posters.slice(0, POSTER_SLOTS.length);
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("relative h-[212px] md:h-[400px]", className), children: [
-    /* @__PURE__ */ jsx("style", { children: POSTER_STACK_ANIMATION_STYLE }),
-    visiblePosters.map((poster, index) => {
-      var _a;
-      const slot = POSTER_SLOTS[index];
-      const showPoster = !!poster.src && !failedIndices.has(index);
-      const face = /* @__PURE__ */ jsxs(Fragment, { children: [
-        showPoster ? (
-          // eslint-disable-next-line @next/next/no-img-element
-          /* @__PURE__ */ jsx(
-            "img",
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("relative h-[196px] md:h-[400px] md:w-auto md:mx-0", PHONE_STAGE_CLASS, className),
+      children: [
+        /* @__PURE__ */ jsx("style", { children: POSTER_STACK_ANIMATION_STYLE }),
+        visiblePosters.map((poster, index) => {
+          var _a;
+          const slot = POSTER_SLOTS[index];
+          const showPoster = !!poster.src && !failedIndices.has(index);
+          const face = /* @__PURE__ */ jsxs(Fragment, { children: [
+            showPoster ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: poster.src,
+                  alt: poster.caption ? "" : poster.alt,
+                  loading: "lazy",
+                  decoding: "async",
+                  className: cn(
+                    "h-full w-full object-cover",
+                    poster.href && "transition-transform duration-300 group-hover/poster:scale-[1.03] motion-reduce:transition-none"
+                  ),
+                  onError: () => setFailedIndices((current) => new Set(current).add(index))
+                }
+              )
+            ) : (_a = poster.fallback) != null ? _a : /* @__PURE__ */ jsx(EventPosterFallback, {}),
+            poster.caption && /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent px-2 pb-2 pt-6", children: /* @__PURE__ */ jsx("span", { className: "line-clamp-2 text-[11px] font-semibold leading-[1.25] text-white md:text-[12.5px]", children: poster.caption }) })
+          ] });
+          return /* @__PURE__ */ jsx(
+            "div",
             {
-              src: poster.src,
-              alt: poster.caption ? "" : poster.alt,
-              loading: "lazy",
-              decoding: "async",
+              ref: (node) => {
+                posterRefs.current[index] = node;
+              },
+              "data-ds-poster-stack-item": true,
               className: cn(
-                "h-full w-full object-cover",
-                poster.href && "transition-transform duration-300 group-hover/poster:scale-[1.03] motion-reduce:transition-none"
+                "absolute aspect-[3/4] overflow-hidden rounded-xl bg-muted",
+                slot.positionClassName,
+                slot.zIndexClassName,
+                poster.href && "hover:z-[4] focus-within:z-[4]"
               ),
-              onError: () => setFailedIndices((current) => new Set(current).add(index))
-            }
-          )
-        ) : (_a = poster.fallback) != null ? _a : /* @__PURE__ */ jsx(EventPosterFallback, {}),
-        poster.caption && /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent px-2 pb-2 pt-6", children: /* @__PURE__ */ jsx("span", { className: "line-clamp-2 text-[11px] font-semibold leading-[1.25] text-white md:text-[12.5px]", children: poster.caption }) })
-      ] });
-      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,
-            poster.href && "hover:z-[4] focus-within:z-[4]"
-          ),
-          style: {
-            transform: slot.restTransform,
-            boxShadow: POSTER_SHADOW,
-            animationName: slot.animationName,
-            animationDuration: `${slot.animationDurationMs}ms`,
-            animationTimingFunction: "ease-in-out",
-            animationIterationCount: "infinite",
-            animationDirection: "alternate"
-          },
-          children: poster.href ? /* @__PURE__ */ jsx(
-            LinkComponent,
-            {
-              href: poster.href,
-              className: cn(
-                "group/poster relative block h-full w-full overflow-hidden rounded-xl",
-                "transition-transform duration-150 active:scale-[0.98] motion-reduce:transition-none",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-              ),
-              children: face
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: "relative h-full w-full", children: face })
-        },
-        poster.alt || index
-      );
-    })
-  ] });
+              style: {
+                transform: slot.restTransform,
+                boxShadow: POSTER_SHADOW,
+                animationName: slot.animationName,
+                animationDuration: `${slot.animationDurationMs}ms`,
+                animationTimingFunction: "ease-in-out",
+                animationIterationCount: "infinite",
+                animationDirection: "alternate"
+              },
+              children: poster.href ? /* @__PURE__ */ jsx(
+                LinkComponent,
+                {
+                  href: poster.href,
+                  className: cn(
+                    "group/poster relative block h-full w-full overflow-hidden rounded-xl",
+                    "transition-transform duration-150 active:scale-[0.98] motion-reduce:transition-none",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                  ),
+                  children: face
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: "relative h-full w-full", children: face })
+            },
+            poster.alt || index
+          );
+        })
+      ]
+    }
+  );
 }
 
 export { PosterStack };

package/dist/components/spinner.d.ts

@@ -4,11 +4,11 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const spinnerVariants: (props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "inherit" | "default" | "destructive" | "primary" | null | undefined;
+    tone?: "default" | "destructive" | "inherit" | "primary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Spinner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "inherit" | "default" | "destructive" | "primary" | null | undefined;
+    tone?: "default" | "destructive" | "inherit" | "primary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     /** Visually-hidden label for screen readers. Defaults to "Loading". */
     label?: string;

package/dist/components/tag.d.ts

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const tagVariants: (props?: ({
-    variant?: "success" | "warning" | "default" | "destructive" | "outline" | "primary" | "quiet" | null | undefined;
+    variant?: "default" | "destructive" | "warning" | "success" | "primary" | "outline" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Tag: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
-    variant?: "success" | "warning" | "default" | "destructive" | "outline" | "primary" | "quiet" | null | undefined;
+    variant?: "default" | "destructive" | "warning" | "success" | "primary" | "outline" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     onRemove?: () => void;

package/dist/components/text.d.ts

@@ -22,9 +22,9 @@ import { VariantProps } from 'class-variance-authority';
  * Weights are 400 / 600 / 700. 500 is not in the system.
  */
 declare const textVariants: (props?: ({
-    variant?: "body" | "caption" | "h1" | "h2" | "h3" | "h4" | "label" | "small" | "display" | "body-lg" | "body-sm" | "overline" | null | undefined;
-    color?: "inherit" | "default" | "destructive" | "muted" | "primary" | "primary-foreground" | null | undefined;
-    weight?: "bold" | "medium" | "normal" | "semibold" | null | undefined;
+    variant?: "small" | "display" | "h1" | "h2" | "h3" | "h4" | "body-lg" | "body" | "body-sm" | "caption" | "label" | "overline" | null | undefined;
+    color?: "default" | "destructive" | "inherit" | "muted" | "primary" | "primary-foreground" | null | undefined;
+    weight?: "bold" | "normal" | "medium" | "semibold" | null | undefined;
     leading?: "none" | "normal" | "tight" | "snug" | "relaxed" | "loose" | null | undefined;
     tracking?: "normal" | "tight" | "wide" | "wider" | null | undefined;
     wrap?: "balance" | "pretty" | "nowrap" | null | undefined;

package/dist/components/timeline-day.js

@@ -1,5 +1,5 @@
-import { TimelineHourSkeleton } from '../chunk-LYREUZH6.js';
-import '../chunk-PW247TG2.js';
+import { TimelineHourSkeleton } from '../chunk-QRSIJC4X.js';
+import '../chunk-BRXI6EDO.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/timeline-hour-puck.js

@@ -1,3 +1,3 @@
-export { TIMELINE_MOBILE_GUTTER_CLASS, TimelineHourPuck } from '../chunk-PW247TG2.js';
+export { TIMELINE_MOBILE_GUTTER_CLASS, TimelineHourPuck } from '../chunk-BRXI6EDO.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/timeline-hour.js

@@ -1,5 +1,5 @@
-export { TimelineHour, TimelineHourSkeleton } from '../chunk-LYREUZH6.js';
-import '../chunk-PW247TG2.js';
+export { TimelineHour, TimelineHourSkeleton } from '../chunk-QRSIJC4X.js';
+import '../chunk-BRXI6EDO.js';
 import '../chunk-NWZGSLPU.js';
 import '../chunk-XBBEX4SF.js';
 import '../chunk-FEK5XGZW.js';

package/dist/components/timeline-playhead.js

@@ -1,4 +1,4 @@
-import { TIMELINE_MOBILE_GUTTER_CLASS } from '../chunk-PW247TG2.js';
+import { TIMELINE_MOBILE_GUTTER_CLASS } from '../chunk-BRXI6EDO.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/package.json

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

package/src/components/event-hub-hero.tsx

@@ -48,9 +48,11 @@ export type EventHubHeroProps = {
   /** The right-column slot — the poster stack in the source design. */
   aside?: React.ReactNode;
   /**
-   * The text column's last row, under the figures — the hub's tonight state
-   * strip. The figures say scale; this says what is on right now, and it is
-   * the one thing on the first screen a reader can tap into the timeline.
+   * The hub's tonight state strip. The figures say scale; this says what is
+   * on right now, and it is the one thing on the first screen a reader can
+   * tap into the timeline. On a phone it follows the aside — title, figures,
+   * posters, then the one line that says what is on — and from `lg` it is a
+   * content-width row under both columns.
    */
   footer?: React.ReactNode;
   className?: string;
@@ -69,10 +71,10 @@ export function EventHubHero({
   return (
     <div
       className={cn(
-        // 16px between the text column and the aside on a phone: with a
-        // tappable poster stack the aside is content, not decoration, and
-        // gets the within-section rhythm rather than a section gap.
-        "grid grid-cols-1 gap-4 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-10",
+        // 12px between the phone's blocks — the page's rhythm, the same as
+        // between the sections below: with a tappable poster stack the aside
+        // is content, not decoration, and gets no section gap of its own.
+        "grid grid-cols-1 gap-3 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-x-10 lg:gap-y-6",
         className
       )}
     >
@@ -141,10 +143,11 @@ export function EventHubHero({
             );
           })}
         </div>
-        {footer && <div className="order-4 pt-1.5 lg:order-none lg:pt-2">{footer}</div>}
       </div>
 
       {aside && <div className="min-w-0">{aside}</div>}
+
+      {footer && <div className="lg:col-span-2 lg:w-fit lg:min-w-[480px]">{footer}</div>}
     </div>
   );
 }
@@ -162,7 +165,7 @@ export function EventHubHeroSkeleton({ aside, footer, className }: EventHubHeroS
     <div
       aria-hidden="true"
       className={cn(
-        "grid grid-cols-1 gap-4 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-10",
+        "grid grid-cols-1 gap-3 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-x-10 lg:gap-y-6",
         className
       )}
     >
@@ -187,14 +190,15 @@ export function EventHubHeroSkeleton({ aside, footer, className }: EventHubHeroS
             </div>
           ))}
         </div>
-        {footer && (
-          <div className="order-4 pt-1.5 lg:order-none lg:pt-2">
-            <Skeleton className="h-[52px] w-full rounded-[14px]" />
-          </div>
-        )}
       </div>
 
       {aside && <div className="min-w-0">{aside}</div>}
+
+      {footer && (
+        <div className="lg:col-span-2 lg:w-fit lg:min-w-[480px]">
+          <Skeleton className="h-[52px] w-full rounded-[14px]" />
+        </div>
+      )}
     </div>
   );
 }

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

@@ -1,7 +1,6 @@
 import { describe, it, expect } from "vitest";
 import { render, screen } from "@testing-library/react";
 import { EventTonightStrip } from "./event-tonight-strip";
-import { EventDoor } from "./event-door";
 import { PosterStack } from "./poster-stack";
 
 describe("EventTonightStrip", () => {
@@ -29,15 +28,6 @@ describe("EventTonightStrip", () => {
   });
 });
 
-describe("EventDoor", () => {
-  it("is an anchor named by the category, with the image decorative", () => {
-    render(<EventDoor name="Concerts" href="/events/concerts" imageSrc="/stage.webp" />);
-    const link = screen.getByRole("link", { name: "Concerts" });
-    expect(link).toHaveAttribute("href", "/events/concerts");
-    expect(screen.getByRole("presentation", { hidden: true })).toHaveAttribute("alt", "");
-  });
-});
-
 describe("PosterStack", () => {
   it("makes a captioned poster an anchor named by its caption", () => {
     // The float's reduced-motion check reads matchMedia, which jsdom lacks.

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

@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import { ArrowRight, CalendarDays, Clock } from "lucide-react";
+import { CalendarDays, ChevronRight, Clock } from "lucide-react";
 import { cn } from "../lib/utils";
 import { Skeleton } from "./skeleton";
 
@@ -98,7 +98,7 @@ export function EventTonightStrip({
         {interactive && actionLabel && <span className="sr-only">. {actionLabel}</span>}
       </span>
       {interactive && (
-        <ArrowRight className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
+        <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
       )}
     </>
   );

package/src/components/menu-family-block.tsx

@@ -123,12 +123,18 @@ const GROUND = PHOTO_GROUND;
 const INK_PHONE =
   "bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0.12)_0%,oklch(0.16_0.012_55_/_0.55)_38%,oklch(0.16_0.012_55_/_0.92)_62%,oklch(0.16_0.012_55_/_0.96)_100%)]";
 /**
- * From `lg` the ramp runs to the right: clear over the photo third, dark
- * under the rows — the rows sit on the ink itself, no opaque paper, so the
- * photograph still reads through the ramp's shoulder.
+ * From `lg` the ramp runs to the right: over the photo third, dark under the
+ * rows — the rows sit on the ink itself, no opaque paper, so the photograph
+ * still reads through the ramp's shoulder.
+ *
+ * THE ONLY GRADIENT FROM `lg`. The phone's local text scrim (below) is off
+ * at this width: a vertical scrim rising from the photo column's foot met
+ * this horizontal ramp at the column's bottom-right corner and the two read
+ * as a seam. Its contrast job moved here — the ramp opens at 0.5 rather
+ * than 0.32, which is what the name and count needed on a bright photograph.
  */
 const INK_WIDE =
-  "lg:bg-[linear-gradient(to_right,oklch(0.16_0.012_55_/_0.32)_0%,oklch(0.16_0.012_55_/_0.62)_34%,oklch(0.16_0.012_55_/_0.9)_52%,oklch(0.16_0.012_55_/_0.96)_100%)]";
+  "lg:bg-[linear-gradient(to_right,oklch(0.16_0.012_55_/_0.5)_0%,oklch(0.16_0.012_55_/_0.66)_34%,oklch(0.16_0.012_55_/_0.9)_52%,oklch(0.16_0.012_55_/_0.96)_100%)]";
 
 /**
  * A second, LOCAL scrim under the name, count and action — the photo column's
@@ -200,8 +206,9 @@ export function MenuFamilyBlock({
         <div
           className={cn(
             "relative flex min-h-[220px] flex-col justify-end p-3.5",
-            wide && "lg:min-h-[320px] lg:p-5",
-            TEXT_SCRIM
+            TEXT_SCRIM,
+            // The two-column card has ONE gradient from `lg` — see `INK_WIDE`.
+            wide && "lg:min-h-[320px] lg:p-5 lg:before:hidden"
           )}
         >
           {pill && (

package/src/components/poster-stack.tsx

@@ -90,11 +90,14 @@ type PosterSlotConfig = {
 };
 
 /**
- * Phone geometry fits a 343px column (375 minus the 16px gutters): the third
- * poster used to reach 358px and ran into the right gutter. 112 / 128 / 112
- * wide, 212px tall — 38px shorter than before, which is what lets the door
- * row land in the first screen. Touch targets are 112×149 and 128×171.
+ * Phone geometry: the three slots span 336px (112 / 128 / 112 wide, the
+ * outer two overlapping the middle by 8px each side), inside a stage the
+ * component centres in whatever column it is given — the stack used to hug
+ * the left gutter. 196px tall, the height the lowest slot actually reaches,
+ * so the block below sits at the page's rhythm rather than under 20px of
+ * empty stage. Touch targets are 112×149 and 128×171.
  */
+const PHONE_STAGE_CLASS = "mx-auto w-[336px] max-w-full";
 const POSTER_SLOTS: PosterSlotConfig[] = [
   {
     positionClassName: "left-0 top-[28px] w-[112px] md:left-0 md:top-[52px] md:w-[196px]",
@@ -154,7 +157,10 @@ export function PosterStack({
   const visiblePosters = posters.slice(0, POSTER_SLOTS.length);
 
   return (
-    <div ref={containerRef} className={cn("relative h-[212px] md:h-[400px]", className)}>
+    <div
+      ref={containerRef}
+      className={cn("relative h-[196px] md:h-[400px] md:w-auto md:mx-0", PHONE_STAGE_CLASS, className)}
+    >
       <style>{POSTER_STACK_ANIMATION_STYLE}</style>
 
       {visiblePosters.map((poster, index) => {

package/src/components/timeline-hour-puck.tsx

@@ -112,8 +112,11 @@ export function TimelineHourPuck({
             cn(
               chipClasses,
               // The station look from `lg`: bordered, background-filled,
-              // no fixed width. Every chip utility above has an `lg:` twin.
-              "lg:h-auto lg:min-w-0 lg:gap-0 lg:border-border lg:bg-background lg:px-[7px] lg:py-[3px] lg:text-[12.5px] lg:text-foreground",
+              // content-width. Every chip utility above has an `lg:` twin.
+              // `min-w-max`, NOT `min-w-0`: the host centres the puck inside
+              // a zero-width flex box, and a flex item allowed to shrink to 0
+              // collapses to a 24px square behind its own text.
+              "lg:h-auto lg:min-w-max lg:shrink-0 lg:gap-0 lg:border-border lg:bg-background lg:px-[7px] lg:py-[3px] lg:text-[12.5px] lg:text-foreground",
               isLive && "lg:border-success/40 lg:bg-background lg:text-success"
             )
         )}

package/dist/components/event-door.d.ts

@@ -1,41 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-
-/**
- * EventDoor — a square tile that is a category's entry point: a photograph of
- * the KIND of night (a stage, a dance floor, a terrace), a scrim, the name.
- *
- * A door and an event row must not look alike. `CategoryDeck` fans four event
- * posters and prints a count, which reads as "these four events"; a card with
- * a single event's poster reads as "tap = that event" and changes daily. The
- * 1:1 shape with the name INSIDE the image is what says "door, not event", and
- * it carries no count — a count is a claim about scale the hub's figures
- * already make, and on a door it competes with the name.
- *
- * Always an anchor: a door with no destination is not a door, so `href` is
- * required. The scrim is a gradient over a photograph, which is mode-
- * independent — the same measured treatment `DoorwayTiles` uses.
- */
-type EventDoorLinkProps = {
-    href: string;
-    className?: string;
-    children: React.ReactNode;
-    onClick?: (mouseEvent: React.MouseEvent) => void;
-};
-type EventDoorProps = {
-    /** The category's name — the anchor's accessible name and the tile's label. */
-    name: string;
-    href: string;
-    imageSrc?: string;
-    /** Rendered when `imageSrc` is absent or fails. Defaults to `<EventPosterFallback />`. */
-    fallback?: React.ReactNode;
-    linkComponent?: React.ComponentType<EventDoorLinkProps>;
-    onClick?: (mouseEvent: React.MouseEvent) => void;
-    className?: string;
-};
-declare function EventDoor({ name, href, imageSrc, fallback, linkComponent: LinkComponent, onClick, className, }: EventDoorProps): react_jsx_runtime.JSX.Element;
-declare function EventDoorSkeleton({ className }: {
-    className?: string;
-}): react_jsx_runtime.JSX.Element;
-
-export { EventDoor, type EventDoorLinkProps, type EventDoorProps, EventDoorSkeleton };

package/dist/components/event-door.js

@@ -1,65 +0,0 @@
-import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
-import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { cn } from '../chunk-FEK5XGZW.js';
-import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
-import { useState } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function DefaultLink(_a) {
-  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
-  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
-}
-function EventDoor({
-  name,
-  href,
-  imageSrc,
-  fallback = /* @__PURE__ */ jsx(EventPosterFallback, {}),
-  linkComponent: LinkComponent = DefaultLink,
-  onClick,
-  className
-}) {
-  const [failed, setFailed] = useState(false);
-  const showImage = !!imageSrc && !failed;
-  return /* @__PURE__ */ jsxs(
-    LinkComponent,
-    {
-      href,
-      onClick,
-      className: cn(
-        "group relative block aspect-square overflow-hidden rounded-xl bg-muted",
-        "transition-transform duration-150 active:scale-[0.98] motion-reduce:transition-none",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        className
-      ),
-      children: [
-        showImage ? (
-          // eslint-disable-next-line @next/next/no-img-element
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: imageSrc,
-              alt: "",
-              loading: "lazy",
-              decoding: "async",
-              className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.04] motion-reduce:transition-none",
-              onError: () => setFailed(true)
-            }
-          )
-        ) : fallback,
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": true,
-            className: "absolute inset-x-0 bottom-0 h-3/4 bg-gradient-to-t from-black/65 via-black/45 to-transparent"
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "absolute inset-x-2 bottom-2 line-clamp-2 text-[12.5px] font-bold leading-[1.2] tracking-[-0.01em] text-white", children: name })
-      ]
-    }
-  );
-}
-function EventDoorSkeleton({ className }) {
-  return /* @__PURE__ */ jsx(Skeleton, { className: cn("aspect-square w-full rounded-xl", className) });
-}
-
-export { EventDoor, EventDoorSkeleton };

package/src/components/event-door.stories.tsx

@@ -1,88 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { EventDoor, EventDoorSkeleton } from "./event-door";
-import { SnapRail } from "./snap-rail";
-
-function photo(label: string, fill: string) {
-  return (
-    "data:image/svg+xml;utf8," +
-    encodeURIComponent(
-      `<svg xmlns="http://www.w3.org/2000/svg" width="320" height="320"><rect width="320" height="320" fill="${fill}"/><text x="50%" y="50%" font-family="monospace" font-size="22" fill="#fff" text-anchor="middle">${label}</text></svg>`
-    )
-  );
-}
-
-const DOORS = [
-  { name: "Concerts", fill: "#7a5c46" },
-  { name: "Parties", fill: "#4a6a5c" },
-  { name: "Live music", fill: "#6a5c8a" },
-  { name: "Stand-up", fill: "#8a6a4a" },
-  { name: "Theatre", fill: "#4a5a7a" },
-  { name: "Workshops", fill: "#5a7a4a" },
-  { name: "Markets", fill: "#7a4a5a" },
-  { name: "Film", fill: "#4a4a4a" },
-];
-
-const meta: Meta<typeof EventDoor> = {
-  title: "Events/EventDoor",
-  component: EventDoor,
-  tags: ["autodocs"],
-  args: {
-    name: "Concerts",
-    href: "#concerts",
-    imageSrc: photo("stage", "#7a5c46"),
-  },
-  decorators: [
-    (Story) => (
-      <div className="w-[104px]">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "A category's entry point: a square photograph of the kind of night, a scrim, the name inside the image, no count. The 1:1 shape with the name inside is what says door rather than event. Always an anchor.",
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof EventDoor>;
-
-export const Default: Story = {};
-
-/** No image — the poster fallback carries the tile. */
-export const NoImage: Story = {
-  args: { imageSrc: undefined },
-};
-
-/** The hub's door row on a phone: a snap rail of squares, three and a third visible. */
-export const Row: Story = {
-  decorators: [
-    (Story) => (
-      <div className="w-[375px] px-4" style={{ "--page-gutter": "1rem" } as React.CSSProperties}>
-        <Story />
-      </div>
-    ),
-  ],
-  render: () => (
-    <nav aria-label="Browse by kind">
-      <SnapRail itemWidth="xs" gap="sm" bleed="page">
-        {DOORS.map((door) => (
-          <EventDoor
-            key={door.name}
-            name={door.name}
-            href={`#${door.name}`}
-            imageSrc={photo(door.name.toLowerCase(), door.fill)}
-          />
-        ))}
-      </SnapRail>
-    </nav>
-  ),
-};
-
-export const Skeleton: Story = {
-  render: () => <EventDoorSkeleton />,
-};

package/src/components/event-door.tsx

@@ -1,97 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { useState } from "react";
-import { cn } from "../lib/utils";
-import { EventPosterFallback } from "./event-poster-fallback";
-import { Skeleton } from "./skeleton";
-
-/**
- * EventDoor — a square tile that is a category's entry point: a photograph of
- * the KIND of night (a stage, a dance floor, a terrace), a scrim, the name.
- *
- * A door and an event row must not look alike. `CategoryDeck` fans four event
- * posters and prints a count, which reads as "these four events"; a card with
- * a single event's poster reads as "tap = that event" and changes daily. The
- * 1:1 shape with the name INSIDE the image is what says "door, not event", and
- * it carries no count — a count is a claim about scale the hub's figures
- * already make, and on a door it competes with the name.
- *
- * Always an anchor: a door with no destination is not a door, so `href` is
- * required. The scrim is a gradient over a photograph, which is mode-
- * independent — the same measured treatment `DoorwayTiles` uses.
- */
-
-export type EventDoorLinkProps = {
-  href: string;
-  className?: string;
-  children: React.ReactNode;
-  onClick?: (mouseEvent: React.MouseEvent) => void;
-};
-
-function DefaultLink({ href, ...props }: EventDoorLinkProps) {
-  return <a href={href} {...props} />;
-}
-
-export type EventDoorProps = {
-  /** The category's name — the anchor's accessible name and the tile's label. */
-  name: string;
-  href: string;
-  imageSrc?: string;
-  /** Rendered when `imageSrc` is absent or fails. Defaults to `<EventPosterFallback />`. */
-  fallback?: React.ReactNode;
-  linkComponent?: React.ComponentType<EventDoorLinkProps>;
-  onClick?: (mouseEvent: React.MouseEvent) => void;
-  className?: string;
-};
-
-export function EventDoor({
-  name,
-  href,
-  imageSrc,
-  fallback = <EventPosterFallback />,
-  linkComponent: LinkComponent = DefaultLink,
-  onClick,
-  className,
-}: EventDoorProps) {
-  const [failed, setFailed] = useState(false);
-  const showImage = !!imageSrc && !failed;
-
-  return (
-    <LinkComponent
-      href={href}
-      onClick={onClick}
-      className={cn(
-        "group relative block aspect-square overflow-hidden rounded-xl bg-muted",
-        "transition-transform duration-150 active:scale-[0.98] motion-reduce:transition-none",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        className
-      )}
-    >
-      {showImage ? (
-        // eslint-disable-next-line @next/next/no-img-element
-        <img
-          src={imageSrc}
-          alt=""
-          loading="lazy"
-          decoding="async"
-          className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.04] motion-reduce:transition-none"
-          onError={() => setFailed(true)}
-        />
-      ) : (
-        fallback
-      )}
-      <span
-        aria-hidden
-        className="absolute inset-x-0 bottom-0 h-3/4 bg-gradient-to-t from-black/65 via-black/45 to-transparent"
-      />
-      <span className="absolute inset-x-2 bottom-2 line-clamp-2 text-[12.5px] font-bold leading-[1.2] tracking-[-0.01em] text-white">
-        {name}
-      </span>
-    </LinkComponent>
-  );
-}
-
-export function EventDoorSkeleton({ className }: { className?: string }) {
-  return <Skeleton className={cn("aspect-square w-full rounded-xl", className)} />;
-}