@bearmenu/ui 0.8.7 → 0.8.9

package/dist/components/snap-rail.js

@@ -0,0 +1,109 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var snapRailVariants = cva(
+  cn(
+    "flex snap-x snap-mandatory overflow-x-auto pb-0.5 scrollbar-hide",
+    "[&>*]:shrink-0 [&>*]:snap-start"
+  ),
+  {
+    variants: {
+      itemWidth: {
+        sm: "[&>*]:w-[46%]",
+        md: "[&>*]:w-[60%]",
+        lg: "[&>*]:w-[80%]",
+        /** One card per view — pair with `dots` so the reader knows there is more. */
+        full: "[&>*]:w-full"
+      },
+      gap: {
+        sm: "gap-2",
+        default: "gap-3"
+      },
+      bleed: {
+        none: "",
+        card: "-mx-3.5 px-3.5 scroll-px-3.5",
+        page: "-mx-4 px-4 scroll-px-4"
+      }
+    },
+    defaultVariants: {
+      itemWidth: "sm",
+      gap: "default",
+      bleed: "none"
+    }
+  }
+);
+var SnapRail = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, itemWidth, gap, bleed, dots, dotsClassName, children } = _b, props = __objRest(_b, ["className", "itemWidth", "gap", "bleed", "dots", "dotsClassName", "children"]);
+    const railRef = React.useRef(null);
+    const [active, setActive] = React.useState(0);
+    const count = React.Children.count(children);
+    const setRefs = React.useCallback(
+      (node) => {
+        railRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    React.useEffect(() => {
+      if (!dots) return;
+      const rail2 = railRef.current;
+      if (!rail2) return;
+      let frame = 0;
+      const sync = () => {
+        frame = 0;
+        const origin = rail2.scrollLeft + parseFloat(getComputedStyle(rail2).scrollPaddingLeft || "0");
+        let best = 0;
+        let bestDistance = Number.POSITIVE_INFINITY;
+        Array.from(rail2.children).forEach((child, index) => {
+          const distance = Math.abs(child.offsetLeft - origin);
+          if (distance < bestDistance) {
+            bestDistance = distance;
+            best = index;
+          }
+        });
+        setActive(best);
+      };
+      const onScroll = () => {
+        if (!frame) frame = requestAnimationFrame(sync);
+      };
+      sync();
+      rail2.addEventListener("scroll", onScroll, { passive: true });
+      return () => {
+        if (frame) cancelAnimationFrame(frame);
+        rail2.removeEventListener("scroll", onScroll);
+      };
+    }, [dots, count]);
+    const rail = /* @__PURE__ */ jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        ref: setRefs,
+        "data-slot": "snap-rail",
+        className: cn(snapRailVariants({ itemWidth, gap, bleed }), className)
+      }, props), {
+        children
+      })
+    );
+    if (!dots) return rail;
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+      rail,
+      /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: cn("flex justify-center gap-1.5", dotsClassName), children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "h-1.5 rounded-full transition-[width,background-color] duration-200 motion-reduce:transition-none",
+            index === active ? "w-4 bg-foreground" : "w-1.5 bg-foreground/25"
+          )
+        },
+        index
+      )) })
+    ] });
+  }
+);
+SnapRail.displayName = "SnapRail";
+
+export { SnapRail };

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/stat-banner.d.ts

@@ -0,0 +1,47 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * StatBanner — one claim about the catalogue, carried by a single number.
+ *
+ * These sit between the modules that list things and give the page somewhere to
+ * state what it knows rather than only showing it. Two side by side is the
+ * usual arrangement, which is a caller's grid rather than a `StatBannerPair`
+ * component — pairing is layout, and a consumer wanting one, or three, or a
+ * different order should not have to fight a wrapper for it.
+ *
+ * `scale` draws the distribution the figure sits in — low, the figure, high.
+ * Pass it only when all three are real numbers from the same measurement; a
+ * scale invented around a figure is worse than no scale, because it implies a
+ * spread nobody counted.
+ *
+ * Server-safe.
+ */
+declare const bannerVariants: (props?: ({
+    tone?: "dark" | "warm" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type StatBannerProps = VariantProps<typeof bannerVariants> & {
+    /** Small caps kicker, e.g. "THE REVIEW CENSUS". */
+    kicker?: string;
+    /**
+     * The headline claim. On the dark tone this is the whole point; on the warm
+     * one it usually sits under `figure`.
+     */
+    headline?: string;
+    body?: string;
+    /** The number itself, pre-formatted, e.g. "100". */
+    figure?: string;
+    /** Unit set small beside the figure, e.g. "%" or "lei". */
+    figureUnit?: string;
+    /** Oversized watermark numeral behind the content. */
+    watermark?: string;
+    /** Low, middle and high of the distribution. All three, or none. */
+    scale?: [string, string, string];
+    /** The action — pass a rendered link or button. */
+    action?: React.ReactNode;
+    className?: string;
+};
+declare function StatBanner({ tone, kicker, headline, body, figure, figureUnit, watermark, scale, action, className, }: StatBannerProps): react_jsx_runtime.JSX.Element;
+
+export { StatBanner, type StatBannerProps };

package/dist/components/stat-banner.js

@@ -0,0 +1,61 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var bannerVariants = cva(
+  "relative flex flex-col gap-2 overflow-hidden rounded-[18px] p-5",
+  {
+    variants: {
+      tone: {
+        /** Dark ground, for the claim that needs the most weight. */
+        dark: "bg-[oklch(0.21_0.012_55)] text-white",
+        /** Tinted ground, for the supporting figure beside it. */
+        warm: "bg-accent-subtle text-foreground"
+      }
+    },
+    defaultVariants: { tone: "dark" }
+  }
+);
+function StatBanner({
+  tone,
+  kicker,
+  headline,
+  body,
+  figure,
+  figureUnit,
+  watermark,
+  scale,
+  action,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(bannerVariants({ tone }), className), children: [
+    watermark && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "pointer-events-none absolute -bottom-8 right-2 select-none font-serif text-[150px] font-bold leading-none opacity-[0.08]",
+        children: watermark
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "relative z-[1] flex flex-1 flex-col gap-2", children: [
+      kicker && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold tracking-[0.11em] opacity-80", children: kicker }),
+      figure && /* @__PURE__ */ jsxs("div", { className: "text-[40px] font-extrabold leading-none tracking-[-0.03em] tabular-nums", children: [
+        figure,
+        figureUnit && /* @__PURE__ */ jsx("span", { className: "ml-1 text-lg font-extrabold", children: figureUnit })
+      ] }),
+      headline && /* @__PURE__ */ jsx("h3", { className: "font-serif text-xl font-semibold leading-[1.2] tracking-[-0.02em] lg:text-2xl", children: headline }),
+      body && /* @__PURE__ */ jsx("p", { className: "text-[13px] leading-[1.5] opacity-85", children: body }),
+      scale && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-2 text-[11px] tabular-nums opacity-70", children: [
+        /* @__PURE__ */ jsx("span", { children: scale[0] }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-px flex-1 bg-current opacity-30" }),
+        /* @__PURE__ */ jsx("span", { children: scale[1] }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-px flex-1 bg-current opacity-30" }),
+        /* @__PURE__ */ jsx("span", { children: scale[2] })
+      ] }),
+      action && /* @__PURE__ */ jsx("div", { className: "mt-auto flex items-center pt-3", children: action })
+    ] })
+  ] });
+}
+
+export { StatBanner };

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?: "h2" | "h3" | "label" | "body" | "caption" | "h1" | "h4" | "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" | "h2" | "h3" | "label" | "body" | "caption" | "h1" | "h4" | "body-lg" | "body-sm" | "overline" | null | undefined;
+    color?: "default" | "destructive" | "inherit" | "muted" | "primary" | "primary-foreground" | null | undefined;
+    weight?: "medium" | "bold" | "normal" | "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-band.d.ts

@@ -1,6 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 
+/**
+ * The mobile axis gutter, shared by `HourBand` and `TimelinePlayhead` so the
+ * hour chips and the current-time label sit in one column. 58px is the width
+ * of a five-glyph 24-hour label ("20:00") in the chip's mono type plus its
+ * padding; a 12-hour locale's "09:00 AM" overflows it, which is one of the
+ * reasons the events surfaces format 24-hour everywhere.
+ */
+declare const TIMELINE_MOBILE_GUTTER_CLASS = "w-[58px]";
 type TimelineHourPuckProps = {
     /** The hour, already formatted and localised — or an em dash for a quiet day. */
     time: string;
@@ -8,6 +16,16 @@ type TimelineHourPuckProps = {
     isLive?: boolean;
     /** Shown under the puck when live, e.g. "NOW ON". Required to render it. */
     liveLabel?: string;
+    /**
+     * `station` (default): the bordered puck that sits ON the hairline, for the
+     * desktop spine. `chip`: a filled, fixed-width lozenge with the hairline
+     * starting BELOW it, for the mobile gutter — an app's time label, not a
+     * station on a rail. In `chip` the live label is visually hidden: the tinted
+     * chip plus a small on-air glyph are the visible signal (the glyph so the
+     * state never rests on colour alone once the pulse is reduced away) and the
+     * label stays for screen readers only.
+     */
+    variant?: "station" | "chip";
     className?: string;
 };
 /**
@@ -25,7 +43,7 @@ type TimelineHourPuckProps = {
  * centre this puck with `-translate-y-1/2`, and a two-item column would centre
  * the STACK, lifting the puck off the line it exists to sit on.
  */
-declare function TimelineHourPuck({ time, isLive, liveLabel, className }: TimelineHourPuckProps): react_jsx_runtime.JSX.Element;
+declare function TimelineHourPuck({ time, isLive, liveLabel, variant, className, }: TimelineHourPuckProps): react_jsx_runtime.JSX.Element;
 type TimelineBandProps = {
     /** The lane column — usually a poster card, or empty for a quiet hour. */
     lane: React.ReactNode;
@@ -43,4 +61,4 @@ type TimelineBandSkeletonProps = {
  */
 declare function TimelineBandSkeleton({ className }: TimelineBandSkeletonProps): react_jsx_runtime.JSX.Element;
 
-export { TimelineBand, type TimelineBandProps, TimelineBandSkeleton, type TimelineBandSkeletonProps, TimelineHourPuck, type TimelineHourPuckProps };
+export { TIMELINE_MOBILE_GUTTER_CLASS, TimelineBand, type TimelineBandProps, TimelineBandSkeleton, type TimelineBandSkeletonProps, TimelineHourPuck, type TimelineHourPuckProps };

package/dist/components/timeline-band.js

@@ -1,4 +1,4 @@
-export { TimelineBand, TimelineBandSkeleton, TimelineHourPuck } from '../chunk-637L7XQ3.js';
+export { TIMELINE_MOBILE_GUTTER_CLASS, TimelineBand, TimelineBandSkeleton, TimelineHourPuck } from '../chunk-3TNPSN4D.js';
 import '../chunk-WSRWFA6K.js';
 import '../chunk-QXHMPJ35.js';
 import '../chunk-FEK5XGZW.js';

package/dist/components/timeline-playhead.d.ts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * TimelinePlayhead — the "you are here" mark on the mobile timeline: the
+ * current time in the axis gutter, a dashed rule across the content column,
+ * and a filled NOW pill at the far edge.
+ *
+ * It sits BETWEEN hour bands, at the point where the wall clock falls, so the
+ * reader can see at a glance which hours are behind them and which are ahead.
+ * The live hour band's tinted chip says "this hour is running"; the playhead
+ * says exactly how far into it we are. Both are needed: a band spans an hour
+ * and the hour is mostly not "now".
+ *
+ * The time label shares the gutter width with `HourBand` so it lines up under
+ * the hour chips. Both strings arrive formatted — the DS holds no clock.
+ */
+type TimelinePlayheadProps = {
+    /** The current time, already formatted — "21:38". */
+    time: string;
+    /** The pill text, e.g. "NOW". */
+    label: string;
+    className?: string;
+};
+declare function TimelinePlayhead({ time, label, className }: TimelinePlayheadProps): react_jsx_runtime.JSX.Element;
+
+export { TimelinePlayhead, type TimelinePlayheadProps };

package/dist/components/timeline-playhead.js

@@ -0,0 +1,25 @@
+import { TIMELINE_MOBILE_GUTTER_CLASS } from '../chunk-3TNPSN4D.js';
+import '../chunk-WSRWFA6K.js';
+import '../chunk-QXHMPJ35.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function TimelinePlayhead({ time, label, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2.5 pt-3", className), children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          TIMELINE_MOBILE_GUTTER_CLASS,
+          "shrink-0 text-center font-mono text-[11px] font-bold tabular-nums text-success"
+        ),
+        children: time
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-0 flex-1 border-t-[1.5px] border-dashed border-success/50" }),
+    /* @__PURE__ */ jsx("span", { className: "rounded-full bg-success px-2 py-0.5 text-[9.5px] font-extrabold tracking-[0.1em] text-success-foreground", children: label })
+  ] });
+}
+
+export { TimelinePlayhead };

package/dist/components/venue-busyness-strip.d.ts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * VenueBusynessStrip — when a venue actually fills up, as a bar per hour.
+ *
+ * The API serves one score per hour of the venue's own trading day, so the
+ * strip has no fixed length: a bakery closing at three and a club open until
+ * four draw different numbers of bars, and padding either to 24 would put empty
+ * columns under hours the venue is not open.
+ *
+ * The rush is derived rather than passed: bars at or above `peakRatio` of the
+ * day's own maximum take the accent. A fixed score threshold would mark every
+ * hour at a busy venue and none at a quiet one — busyness is only meaningful
+ * relative to that venue's own day.
+ *
+ * `caption` is composed by the caller ("Usually not busy until 18:00 — the rush
+ * is nine to eleven"), because the sentence needs the venue's clock, its locale
+ * and a plural rule the DS does not own.
+ *
+ * Server-safe.
+ */
+type VenueBusynessStripProps = {
+    busyness: Array<{
+        hour: number;
+        score: number;
+    }>;
+    /** Composed sentence beside the bars. */
+    caption?: string;
+    /** Share of the day's own peak at which an hour counts as the rush. */
+    peakRatio?: number;
+    className?: string;
+};
+declare function VenueBusynessStrip({ busyness, caption, peakRatio, className, }: VenueBusynessStripProps): react_jsx_runtime.JSX.Element | null;
+
+export { VenueBusynessStrip, type VenueBusynessStripProps };

package/dist/components/venue-busyness-strip.js

@@ -0,0 +1,37 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var BAR_MAX_HEIGHT = 22;
+function VenueBusynessStrip({
+  busyness,
+  caption,
+  peakRatio = 0.8,
+  className
+}) {
+  if (busyness.length === 0) return null;
+  const peak = Math.max(...busyness.map((entry) => entry.score));
+  if (peak <= 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex items-center gap-2.5 text-[12.5px] text-muted-foreground", className),
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex h-[22px] items-end gap-[3px]", children: busyness.map(({ hour, score }) => /* @__PURE__ */ jsx(
+          "i",
+          {
+            className: cn(
+              "w-[7px] rounded-t-sm bg-[oklch(0.88_0.02_45)]",
+              score >= peak * peakRatio && "bg-[var(--accent,currentColor)]"
+            ),
+            style: { height: Math.max(2, Math.round(score / peak * BAR_MAX_HEIGHT)) }
+          },
+          hour
+        )) }),
+        caption
+      ]
+    }
+  );
+}
+
+export { VenueBusynessStrip };

package/dist/components/venue-grade-dimensions.d.ts

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PlaceGradeDimensions } from './place-types.js';
+
+/**
+ * VenueGradeDimensions — the per-dimension review scores as a row of bars.
+ *
+ * ## Why this renders what it is given rather than a fixed row
+ *
+ * A dimension the reviews never mention is ABSENT from the payload, not zero,
+ * and exactly one of `food` / `coffee_quality` / `drinks_quality` is scored per
+ * place — a coffee bar has no food score and a restaurant has no coffee one.
+ * So a component drawing seven fixed columns would invent readings for a third
+ * of the catalogue. It iterates `order`, skips what is missing, and lays out
+ * however many survive.
+ *
+ * Scores arrive 0–100 and display on the 0–10 scale the rest of the product
+ * grades on, so the bar width is the raw value and the numeral is that value
+ * over ten. `formatScore` is injected because a decimal separator is
+ * locale-dependent.
+ *
+ * Server-safe.
+ */
+type VenueGradeDimensionKey = keyof PlaceGradeDimensions;
+type VenueGradeDimensionsProps = {
+    dimensions: PlaceGradeDimensions;
+    /** Dimension key → translated label. Keys with no label fall back to the key. */
+    labels: Partial<Record<VenueGradeDimensionKey, string>>;
+    /** Override the canonical order, or narrow which dimensions show at all. */
+    order?: VenueGradeDimensionKey[];
+    /** 0–100 → display numeral, e.g. `(v) => (v / 10).toFixed(1)`. */
+    formatScore: (value: number) => string;
+    className?: string;
+};
+declare function VenueGradeDimensions({ dimensions, labels, order, formatScore, className, }: VenueGradeDimensionsProps): react_jsx_runtime.JSX.Element | null;
+
+export { type VenueGradeDimensionKey, VenueGradeDimensions, type VenueGradeDimensionsProps };

package/dist/components/venue-grade-dimensions.js

@@ -0,0 +1,3 @@
+export { VenueGradeDimensions } from '../chunk-AXV5O2IZ.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';

package/dist/components/venue-quotes.d.ts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CitedText } from './place-types.js';
+
+/**
+ * VenueQuotes — the digest's standout lines, as pull-quotes.
+ *
+ * These are `reviews_digest.highlights`: one to three short positives already
+ * resolved into the request locale. They are the only place on a hub where a
+ * reviewer speaks in their own register, so they are set in serif italic
+ * against the sans everything else uses.
+ *
+ * `onCite` turns a quote into a button that opens the reviews behind it —
+ * `review_ids` is what makes the claim checkable, and a quote nobody can trace
+ * is just copy. Without the handler the quote renders as inert prose, which is
+ * correct on surfaces that have nowhere to open.
+ *
+ * No directive: inert quotes render on the server; passing `onCite` needs a
+ * client caller.
+ */
+type VenueQuotesProps = {
+    quotes: CitedText[];
+    /** Opens the reviews behind one quote. Omit to render inert prose. */
+    onCite?: (quote: CitedText) => void;
+    /** Accessible name for the cite action, e.g. `(n) => "Read 5 reviews"`. */
+    citeLabel?: (reviewCount: number) => string;
+    /** Cap on how many render. The digest ships at most three. */
+    limit?: number;
+    className?: string;
+};
+declare function VenueQuotes({ quotes, onCite, citeLabel, limit, className }: VenueQuotesProps): react_jsx_runtime.JSX.Element | null;
+
+export { VenueQuotes, type VenueQuotesProps };

package/dist/components/venue-quotes.js

@@ -0,0 +1,3 @@
+export { VenueQuotes } from '../chunk-62ES6N32.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';

package/dist/components/venue-signature-block.d.ts

@@ -0,0 +1,39 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MenuItemLabels, MenuItemLinkProps } from './menu-item.js';
+import { MenuItemPreview } from './menu-types.js';
+import 'react';
+import './place-types.js';
+
+/**
+ * VenueSignatureBlock — "what it is known for": the one dish or drink a venue's
+ * reviews single out, on a tinted band.
+ *
+ * ## It is a `<MenuItem>` with a kicker
+ *
+ * It used to be its own layout — swatch, label, name, price, all hand-placed —
+ * and it drifted from the row every other surface renders. It is now the
+ * production row on an accent ground, so a dish looks like itself here, in the
+ * "known for" list, and on the venue's own menu.
+ *
+ * The kicker sits ABOVE the row rather than inside it. Inline at 9.5px it
+ * competed with the dish name for the same line, which is how it ended up
+ * stacked one word per line.
+ */
+type VenueSignatureBlockProps = {
+    item: MenuItemPreview;
+    labels: MenuItemLabels;
+    formatPrice: (amount: number) => string;
+    formatCount?: (value: number) => string;
+    /** Small caps kicker, e.g. "WHAT IT IS KNOWN FOR". */
+    kicker: string;
+    /** The row's category mark, as a CSS `background-image` value. */
+    markGradient?: string;
+    /** Reviewers' reason, in place of the item description. */
+    subtitle?: string;
+    href?: string;
+    linkComponent?: React.ComponentType<MenuItemLinkProps>;
+    className?: string;
+};
+declare function VenueSignatureBlock({ item, labels, formatPrice, formatCount, kicker, markGradient, subtitle, href, linkComponent, className, }: VenueSignatureBlockProps): react_jsx_runtime.JSX.Element;
+
+export { VenueSignatureBlock, type VenueSignatureBlockProps };

package/dist/components/venue-signature-block.js

@@ -0,0 +1,6 @@
+export { VenueSignatureBlock } from '../chunk-THOVPZNN.js';
+import '../chunk-TH6W2PWG.js';
+import '../chunk-Q6QH52LJ.js';
+import '../chunk-UKBNQO6Q.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';

package/dist/components/venue-spotlight.d.ts

@@ -0,0 +1,74 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { VenueGradeDimensionKey } from './venue-grade-dimensions.js';
+import { MenuItemLabels } from './menu-item.js';
+import { MenuVenueSignature, MenuLinkComponent, MenuLinkProps } from './menu-types.js';
+import { PlacePreview, CitedText } from './place-types.js';
+import 'react';
+
+/**
+ * VenueSpotlight — one venue given real space: photograph, what it is known
+ * for, what reviewers say, how it grades, and when it fills up.
+ *
+ * The photograph IS the point of this surface. It is the one module on a menu
+ * hub that shows an image, and it can, because venue photography is real and
+ * licensed where item photography is generated. Absent a photo it degrades to
+ * the same diagonal texture the hero uses, never to a bare icon.
+ *
+ * ## Composed from exported parts
+ *
+ * `VenueSignatureBlock`, `VenueQuotes`, `VenueGradeDimensions` and
+ * `VenueBusynessStrip` are each exported on their own. This composite is the
+ * arrangement the hub wants; a consumer filming a single panel, or building a
+ * narrower variant, takes the parts instead. Everything here is layout — no
+ * part is reachable only through the composite.
+ *
+ * No directive: it renders on the server unless `onCite` is passed through to
+ * the quotes.
+ */
+/** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
+type VenueSpotlightLinkProps = MenuLinkProps;
+type VenueSpotlightLabels = {
+    /** Overlay on the photograph, e.g. "venue photograph". */
+    photoCredit?: string;
+    /** Composed open state, e.g. "Kitchen open until 23:00". Absent when closed or unknown. */
+    openUntil?: string;
+    /** Kicker over the signature, e.g. "WHAT IT IS KNOWN FOR". */
+    signatureKicker: string;
+    /** Composed review count, e.g. "318 reviews". */
+    reviewCount?: string;
+    /** Dimension key → translated label. */
+    dimensions: Partial<Record<VenueGradeDimensionKey, string>>;
+    /** Tag code → translated label. Missing codes render the raw code. */
+    tags?: Record<string, string>;
+    /** Composed value verdict, e.g. "Good value". */
+    valueVerdict?: string;
+    /** Composed busyness sentence. */
+    busyness?: string;
+    /** Accessible name for a quote's cite action. */
+    cite?: (reviewCount: number) => string;
+};
+type VenueSpotlightProps = {
+    place: PlacePreview;
+    href: string;
+    labels: VenueSpotlightLabels;
+    /** Composed meta line, e.g. "pub · Centru". Clause order is locale-dependent. */
+    meta?: string;
+    signature?: MenuVenueSignature;
+    /** CSS gradient for the signature swatch. */
+    signatureGradient?: string;
+    /** Passed through to the signature `<MenuItem>`. */
+    itemLabels: MenuItemLabels;
+    formatPrice: (amount: number) => string;
+    formatCount?: (value: number) => string;
+    /** 0–100 → display numeral for the dimension bars. */
+    formatScore: (value: number) => string;
+    /** Opens the reviews behind a quote. */
+    onCite?: (quote: CitedText) => void;
+    /** The action in the footer — pass a rendered link or button. */
+    action?: React.ReactNode;
+    linkComponent?: MenuLinkComponent;
+    className?: string;
+};
+declare function VenueSpotlight({ place, href, labels, meta, signature, signatureGradient, itemLabels, formatPrice, formatCount, formatScore, onCite, action, linkComponent: LinkComponent, className, }: VenueSpotlightProps): react_jsx_runtime.JSX.Element;
+
+export { VenueSpotlight, type VenueSpotlightLabels, type VenueSpotlightLinkProps, type VenueSpotlightProps };