@bearmenu/ui 0.8.9 → 0.8.11

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

@@ -1,74 +0,0 @@
-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 };

package/dist/components/venue-spotlight.js

@@ -1,138 +0,0 @@
-import { VenueGradeDimensions } from '../chunk-AXV5O2IZ.js';
-import { VenueQuotes } from '../chunk-62ES6N32.js';
-import { VenueSignatureBlock } from '../chunk-THOVPZNN.js';
-import { Separator } from '../chunk-WSRWFA6K.js';
-import '../chunk-TH6W2PWG.js';
-import '../chunk-Q6QH52LJ.js';
-import '../chunk-UKBNQO6Q.js';
-import { cn } from '../chunk-FEK5XGZW.js';
-import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
-import { Camera, Star } from 'lucide-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));
-}
-var QUOTE_LIMIT = 2;
-function VenueSpotlight({
-  place,
-  href,
-  labels,
-  meta,
-  signature,
-  signatureGradient,
-  itemLabels,
-  formatPrice,
-  formatCount,
-  formatScore,
-  onCite,
-  action,
-  linkComponent: LinkComponent = DefaultLink,
-  className
-}) {
-  var _a, _b, _c;
-  const digest = place.reviews_digest;
-  const tags = (_a = digest == null ? void 0 : digest.tags) != null ? _a : [];
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "grid overflow-hidden rounded-[18px] border border-border bg-card lg:grid-cols-[404px_1fr]",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative min-h-[220px] bg-[repeating-linear-gradient(135deg,oklch(0.76_0.02_55)_0_10px,oklch(0.83_0.013_58)_10px_20px)] lg:min-h-[340px]", children: [
-          place.thumbnail_url && // eslint-disable-next-line @next/next/no-img-element
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: place.thumbnail_url,
-              alt: place.name,
-              className: "absolute inset-0 h-full w-full object-cover"
-            }
-          ),
-          labels.photoCredit && /* @__PURE__ */ jsxs("span", { className: "absolute left-3.5 top-3.5 inline-flex h-7 items-center gap-1.5 rounded-full bg-black/60 px-2.5 text-[11px] font-bold text-white", children: [
-            /* @__PURE__ */ jsx(Camera, { className: "h-2.5 w-2.5", "aria-hidden": true }),
-            labels.photoCredit
-          ] }),
-          labels.openUntil && /* @__PURE__ */ jsxs("span", { className: "absolute bottom-3.5 left-3.5 inline-flex h-[30px] items-center gap-[7px] rounded-full bg-background px-3 text-[11.5px] font-bold text-[var(--free,currentColor)]", children: [
-            /* @__PURE__ */ jsx("i", { className: "h-[7px] w-[7px] rounded-full bg-current", "aria-hidden": true }),
-            labels.openUntil
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3.5 p-4 lg:p-6", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [
-            /* @__PURE__ */ jsx("h3", { className: "min-w-0 flex-1 basis-0 font-serif text-xl font-semibold leading-tight tracking-[-0.02em] lg:text-[28px]", children: /* @__PURE__ */ jsx(
-              LinkComponent,
-              {
-                href,
-                className: "rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                children: place.name
-              }
-            ) }),
-            place.rating && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-baseline gap-1.5", children: [
-              /* @__PURE__ */ jsx("b", { className: "text-xl font-extrabold tabular-nums lg:text-2xl", children: place.rating.rating }),
-              /* @__PURE__ */ jsx(Star, { className: "h-3 w-3 self-center text-muted-foreground", "aria-hidden": true })
-            ] })
-          ] }),
-          (meta || labels.reviewCount) && /* @__PURE__ */ jsxs("div", { className: "-mt-2 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[12.5px] text-muted-foreground", children: [
-            meta && /* @__PURE__ */ jsx("span", { children: meta }),
-            meta && labels.reviewCount && /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\xB7" }),
-            labels.reviewCount && /* @__PURE__ */ jsx("span", { children: labels.reviewCount })
-          ] }),
-          signature && /* @__PURE__ */ jsx(
-            VenueSignatureBlock,
-            {
-              item: signature.item,
-              labels: itemLabels,
-              formatPrice,
-              formatCount,
-              kicker: labels.signatureKicker,
-              markGradient: signatureGradient,
-              subtitle: signature.why,
-              href: signature.href,
-              linkComponent: LinkComponent
-            }
-          ),
-          (digest == null ? void 0 : digest.highlights) && /* @__PURE__ */ jsx(
-            VenueQuotes,
-            {
-              quotes: digest.highlights,
-              limit: QUOTE_LIMIT,
-              onCite,
-              citeLabel: labels.cite
-            }
-          ),
-          ((_b = digest == null ? void 0 : digest.grade) == null ? void 0 : _b.dimensions) && /* @__PURE__ */ jsx(Separator, {}),
-          ((_c = digest == null ? void 0 : digest.grade) == null ? void 0 : _c.dimensions) && /* @__PURE__ */ jsx(
-            VenueGradeDimensions,
-            {
-              dimensions: digest.grade.dimensions,
-              labels: labels.dimensions,
-              formatScore,
-              className: "mt-1"
-            }
-          ),
-          (labels.valueVerdict || tags.length > 0) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-            labels.valueVerdict && /* @__PURE__ */ jsx("span", { className: "inline-flex h-[26px] items-center gap-1.5 rounded-full bg-accent-subtle px-2.5 text-[11.5px] font-bold text-accent", children: labels.valueVerdict }),
-            tags.map((tag) => {
-              var _a2, _b2;
-              return /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "inline-flex h-[26px] items-center rounded-full border border-border px-2.5 text-[11.5px] text-muted-foreground",
-                  children: (_b2 = (_a2 = labels.tags) == null ? void 0 : _a2[tag.value]) != null ? _b2 : tag.value
-                },
-                tag.value
-              );
-            })
-          ] }),
-          action && /* @__PURE__ */ jsx("div", { className: "mt-auto flex justify-end pt-1", children: action })
-        ] })
-      ]
-    }
-  );
-}
-
-export { VenueSpotlight };

package/src/components/ranked-venue-list.stories.tsx

@@ -1,80 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { mockVenues } from "./menu-mocks";
-import { RankedVenueList } from "./ranked-venue-list";
-
-const priceBandLabels = {
-  "the-copper-yard": "19—62",
-  "salt-and-stone": "38—84",
-  "the-quiet-hours": "8—26",
-  "green-room-canteen": "22—51",
-};
-
-const meta: Meta<typeof RankedVenueList> = {
-  title: "Menu/RankedVenueList",
-  component: RankedVenueList,
-  tags: ["autodocs"],
-  decorators: [
-    (Story) => (
-      <div className="w-[620px] bg-background p-4">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Venues ordered by how often reviews name their dishes — the answer to \"best Italian in Cluj\". What makes the order defensible is the mention count on every row: it is evidence, not opinion. A caller that cannot supply mentions should use a different surface rather than this one with the column blank, because an unexplained ranking is worse than none. The tab strip re-ranks in place and never navigates.",
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof RankedVenueList>;
-
-export const Default: Story = {
-  args: {
-    venues: mockVenues.slice(0, 3),
-    heading: "The kitchens Cluj rates for Italian",
-    caption: "by how often reviews name their dishes",
-    priceBandLabels,
-  },
-};
-
-/** With tabs. `activeTab` and `onTabChange` are the caller's state. */
-export const WithTabs: Story = {
-  args: {
-    venues: mockVenues.slice(0, 3),
-    heading: "The kitchens Cluj rates",
-    caption: "from review mentions, not opinion",
-    tabs: [
-      { slug: "italian", label: "Italian" },
-      { slug: "romanesc", label: "Romanian" },
-      { slug: "japonez", label: "Japanese" },
-      { slug: "burgeri", label: "Burgers" },
-    ],
-    activeTab: "italian",
-    onTabChange: () => {},
-    priceBandLabels,
-  },
-};
-
-/** No header at all — the list inside a section that already has one. */
-export const Bare: Story = { args: { venues: mockVenues.slice(0, 3), priceBandLabels } };
-
-/** A venue with no signature still ranks; its quoted dish line is simply absent. */
-export const MixedEvidence: Story = {
-  args: { venues: mockVenues, heading: "The kitchens Cluj rates", priceBandLabels },
-};
-
-export const Mobile: Story = {
-  args: { venues: mockVenues.slice(0, 3), heading: "The kitchens Cluj rates" },
-  decorators: [
-    (Story) => (
-      <div className="w-[390px] bg-background p-3">
-        <Story />
-      </div>
-    ),
-  ],
-};

package/src/components/ranked-venue-list.tsx

@@ -1,177 +0,0 @@
-import { ChevronRight, MessageSquare, Star } from "lucide-react";
-import { cn } from "../lib/utils";
-import { Separator } from "./separator";
-import type { MenuVenuePreview, MenuLinkProps, MenuLinkComponent } from "./menu-types";
-
-/**
- * RankedVenueList — venues ordered by how often reviews name their dishes.
- *
- * The answer to "best Italian in Cluj", and the reason it is defensible is the
- * mention count sitting on every row: the order is evidence, not opinion. A
- * caller that cannot supply mentions should use a different surface rather than
- * this one with the column blank — an unexplained ranking is worse than none.
- *
- * The tab strip re-ranks in place and never navigates, so `activeTab` and
- * `onTabChange` are controlled by the caller. Omit `tabs` entirely and the
- * header is just a heading.
- *
- * No directive: without `tabs` the list renders on the server, which is the
- * common case on a hub.
- */
-
-/** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
-export type RankedVenueListLinkProps = MenuLinkProps;
-
-function DefaultLink({ href, ...props }: RankedVenueListLinkProps) {
-  return <a href={href} {...props} />;
-}
-
-export type RankedVenueListTab = {
-  slug: string;
-  label: string;
-};
-
-export type RankedVenueListProps = {
-  venues: MenuVenuePreview[];
-  /** Section heading, e.g. "The kitchens Cluj rates for Italian". */
-  heading?: string;
-  /** The basis of the order, e.g. "by how often reviews name their dishes". */
-  caption?: string;
-  tabs?: RankedVenueListTab[];
-  activeTab?: string;
-  onTabChange?: (slug: string) => void;
-  /** Composed price band per venue, keyed by place slug, e.g. "38—84". */
-  priceBandLabels?: Record<string, string>;
-  /**
-   * The app's own grade per venue slug, already formatted ("8.7"). Shown in
-   * place of the star rating when present — the star is the third-party
-   * fallback for a venue the reviews have not graded yet.
-   */
-  gradeLabels?: Record<string, string>;
-  linkComponent?: MenuLinkComponent;
-  className?: string;
-};
-
-export function RankedVenueList({
-  venues,
-  heading,
-  caption,
-  tabs,
-  activeTab,
-  onTabChange,
-  priceBandLabels,
-  gradeLabels,
-  linkComponent: LinkComponent = DefaultLink,
-  className,
-}: RankedVenueListProps) {
-  return (
-    <div className={cn("overflow-hidden rounded-[14px] border border-border bg-card", className)}>
-      {(heading || tabs) && (
-        <div className="flex flex-wrap items-center gap-x-4 gap-y-2 border-b border-border p-3.5">
-          {heading && (
-            <h3 className="text-[15px] font-bold leading-tight tracking-[-0.01em]">{heading}</h3>
-          )}
-          {caption && (
-            <span className="text-[12.5px] text-muted-foreground">{caption}</span>
-          )}
-          {tabs && tabs.length > 0 && (
-            <div className="ml-auto flex flex-wrap gap-1.5">
-              {tabs.map((tab) => (
-                <button
-                  key={tab.slug}
-                  type="button"
-                  aria-pressed={tab.slug === activeTab}
-                  onClick={() => onTabChange?.(tab.slug)}
-                  className={cn(
-                    "inline-flex h-7 items-center rounded-full border px-2.5 text-xs font-semibold transition-colors",
-                    tab.slug === activeTab
-                      ? "border-accent bg-accent-subtle text-accent"
-                      : "border-border text-muted-foreground hover:bg-muted/50"
-                  )}
-                >
-                  {tab.label}
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
-
-      <ol>
-        {venues.map((venue, index) => {
-          const { place, signature } = venue;
-          const mentions = signature?.item.mentions ?? 0;
-
-          return (
-            <li key={place.slug}>
-            {index > 0 && <Separator />}
-              <LinkComponent
-                href={venue.href}
-                className="flex items-center gap-3 p-3 transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
-              >
-                <span className="w-4 shrink-0 text-center text-[13px] font-extrabold tabular-nums text-accent">
-                  {index + 1}
-                </span>
-
-                {/* 48px. Same reason as `OpenNowList`: below ~48 the venue
-                    photograph stops being a photograph. */}
-                <span className="h-12 w-12 shrink-0 overflow-hidden rounded-xl bg-[repeating-linear-gradient(135deg,oklch(0.78_0.018_55)_0_8px,oklch(0.84_0.012_58)_8px_16px)]">
-                  {place.thumbnail_url && (
-                    // eslint-disable-next-line @next/next/no-img-element
-                    <img
-                      src={place.thumbnail_url}
-                      alt=""
-                      className="h-full w-full object-cover"
-                      loading="lazy"
-                    />
-                  )}
-                </span>
-
-                <span className="min-w-0 flex-1">
-                  {/* The whole name: a ranked list is a list of names, and a
-                      name cut to "PASQUALE | brunch & din…" is not one. */}
-                  <span className="block text-sm font-bold leading-snug tracking-[-0.01em]">
-                    {place.name}
-                  </span>
-                  {signature?.item.name && (
-                    <span className="mt-px block truncate font-serif text-xs italic text-muted-foreground">
-                      {`“${signature.item.name}”`}
-                    </span>
-                  )}
-                </span>
-
-                {mentions > 0 && (
-                  <span className="hidden shrink-0 items-center gap-1 text-[11.5px] tabular-nums text-muted-foreground sm:inline-flex">
-                    <MessageSquare className="h-[11px] w-[11px]" aria-hidden />
-                    {mentions}
-                  </span>
-                )}
-
-                {gradeLabels?.[place.slug] ? (
-                  <span className="inline-flex h-6 shrink-0 items-center rounded-md bg-foreground px-1.5 text-[12px] font-extrabold tabular-nums text-background">
-                    {gradeLabels[place.slug]}
-                  </span>
-                ) : (
-                  place.rating && (
-                    <span className="inline-flex shrink-0 items-center gap-1 text-[12.5px] font-semibold tabular-nums">
-                      <Star className="h-3 w-3" aria-hidden />
-                      {place.rating.rating}
-                    </span>
-                  )
-                )}
-
-                {priceBandLabels?.[place.slug] && (
-                  <span className="hidden shrink-0 text-[12.5px] tabular-nums text-muted-foreground sm:block">
-                    {priceBandLabels[place.slug]}
-                  </span>
-                )}
-
-                <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
-              </LinkComponent>
-            </li>
-          );
-        })}
-      </ol>
-    </div>
-  );
-}

package/src/components/signature-line-list.stories.tsx

@@ -1,85 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { mockHubLabels, mockVenues } from "./menu-mocks";
-import { SignatureLineList } from "./signature-line-list";
-
-
-const itemLabels = {
-  currency: "lei",
-  mentions: (count: number) => `${count} mentions`,
-  signature: "SIGNATURE",
-  mentioned: "MENTIONED",
-};
-const formatPrice = (amount: number) => String(amount);
-
-const labels = itemLabels;
-
-const metaLabels = {
-  "the-copper-yard": "pub · Centru",
-  "salt-and-stone": "italian · Centru",
-  "the-quiet-hours": "coffee · Centru",
-  "green-room-canteen": "vegetarian · Mărăști",
-};
-
-const hues = {
-  "the-copper-yard": "oklch(0.52 0.15 25)",
-  "salt-and-stone": "oklch(0.62 0.14 55)",
-  "the-quiet-hours": "oklch(0.58 0.09 70)",
-};
-
-
-const meta: Meta<typeof SignatureLineList> = {
-  title: "Menu/SignatureLineList",
-  component: SignatureLineList,
-  tags: ["autodocs"],
-  decorators: [
-    (Story) => (
-      <div className="w-[980px] bg-background p-4">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Family, venue, dish, price and reputation on one line — the densest surface on the hub, and the one that most nearly justifies the whole catalogue. Two targets per row on purpose: the venue line goes to the venue, the item row goes to that item across every kitchen that makes it. Collapsing them into one tap loses the comparison that makes the item worth showing. They are separate anchors rather than a button nested in a link, which would be invalid.",
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof SignatureLineList>;
-
-export const Default: Story = {
-  args: {
-    venues: mockVenues.slice(0, 3),
-    labels,
-    formatPrice,
-    metaLabels,
-    hues,
-  },
-};
-
-/** The last venue has no signature — the row is a venue line and nothing else. */
-export const MixedEvidence: Story = {
-  args: { venues: mockVenues, labels, formatPrice, metaLabels, hues },
-};
-
-/** Below `lg` the row stacks: venue line, then the full item row underneath. */
-export const Mobile: Story = {
-  args: {
-    venues: mockVenues.slice(0, 3),
-    labels,
-    formatPrice,
-    metaLabels,
-    hues,
-  },
-  decorators: [
-    (Story) => (
-      <div className="w-[390px] bg-background p-3">
-        <Story />
-      </div>
-    ),
-  ],
-};