@bearmenu/ui 0.8.7 → 0.8.9

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

@@ -0,0 +1,211 @@
+import { Wallet } from "lucide-react";
+import { cn } from "../lib/utils";
+import { MenuItem, type MenuItemLabels } from "./menu-item";
+import type { MenuFamilyPreview, MenuLinkComponent, MenuLinkProps } from "./menu-types";
+
+/**
+ * MenuFamilyCard — a browsable grouping of venues: a cuisine on the dishes tab,
+ * a drink family on the drinks tab.
+ *
+ * ## The count does the scanning, the item answers the question
+ *
+ * The card is two halves with two jobs. The dark panel is for scanning a row of
+ * four: one number, one name, and the groups the family consists of, over a
+ * mosaic of its venues. The white half underneath answers what you would
+ * actually order — the production `<MenuItem>`, with its price, portion and
+ * mention count, so the recommendation is the review census rather than an
+ * editorial pick.
+ *
+ * ## Both halves count VENUES
+ *
+ * Cuisine exists on places and nowhere else — no listing endpoint will tell you
+ * how many dishes are Italian — so a card counting dishes cannot be built and
+ * this one does not try. The groups line is a plain list without counts: at
+ * four cards across, four chips each carrying a number turned the panel into a
+ * table, and the numbers were kitchens, which nobody reads a chip as.
+ *
+ * The mosaic holds VENUE photographs, which are real. It dims them hard — this
+ * is a ground for a number, not a gallery, and at this size a legible photo
+ * competes with the count for the same glance.
+ */
+
+/** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
+export type MenuFamilyCardLinkProps = MenuLinkProps;
+
+function DefaultLink({ href, ...props }: MenuFamilyCardLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type MenuFamilyCardLabels = {
+  /** Unit under the count, e.g. "KITCHENS". */
+  venueUnit: string;
+  /** Kicker over the featured item, e.g. "MOST NAMED". */
+  mostNamed: string;
+  /** Footer caption, e.g. "kitchen price band". */
+  priceBand: string;
+};
+
+export type MenuFamilyCardProps = {
+  family: MenuFamilyPreview;
+  labels: MenuFamilyCardLabels;
+  /** Passed through to the featured `<MenuItem>`. */
+  itemLabels: MenuItemLabels;
+  formatPrice: (amount: number) => string;
+  formatCount?: (value: number) => string;
+  href: string;
+  /** Finished CSS colour for the featured item's category mark. */
+  hue?: string;
+  /** Composed price band, e.g. "32–84 lei". */
+  priceBandLabel?: string;
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+/**
+ * A 2×2, not a 2×4.
+ *
+ * Four cells at card width give each photograph enough room to read as a room
+ * rather than as a swatch, and — the reason it changed — four cells match the
+ * four venues a caller actually has, so no photo repeats. At eight cells the
+ * list wrapped and put the SAME image directly above itself in a column, which
+ * is the one repeat a mosaic cannot hide.
+ */
+const MOSAIC_CELLS = 4;
+
+export function MenuFamilyCard({
+  family,
+  labels,
+  itemLabels,
+  formatPrice,
+  formatCount,
+  href,
+  hue,
+  priceBandLabel,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: MenuFamilyCardProps) {
+  const photos = family.venue_photo_urls ?? [];
+  const groups = (family.chips ?? []).map((chip) => chip.label);
+
+  return (
+    <div
+      className={cn(
+        "flex h-full flex-col overflow-hidden rounded-[14px] border border-border bg-card",
+        className
+      )}
+    >
+      <LinkComponent
+        href={href}
+        className="relative block overflow-hidden bg-[oklch(0.21_0.012_55)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+      >
+        <span aria-hidden className="absolute inset-0 grid grid-cols-2 grid-rows-2 gap-px">
+          {Array.from({ length: MOSAIC_CELLS }, (_, cell) =>
+            photos.length ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                key={cell}
+                src={photos[cell % photos.length]}
+                alt=""
+                loading="lazy"
+                decoding="async"
+                className="h-full w-full object-cover"
+              />
+            ) : (
+              <span
+                key={cell}
+                className="bg-[repeating-linear-gradient(135deg,oklch(0.6_0.02_55)_0_9px,oklch(0.68_0.016_58)_9px_18px)] opacity-[0.18]"
+              />
+            )
+          )}
+        </span>
+
+        {/*
+          The family's colour over the photography, when the caller passes a
+          `hue`. `mix-blend-mode: color` keeps every photo's luminance and
+          replaces its chroma with the family's, so four cards of four
+          different rooms read as one cocktail-blue, one wine-red, one
+          beer-gold, one coffee-brown — the same dictionary the chips and the
+          price band already use (`markGradient`). The scrim below still owns
+          the contrast; this layer only says which family the room belongs to.
+        */}
+        {hue && (
+          <span
+            aria-hidden
+            className="absolute inset-0 opacity-90 mix-blend-color"
+            style={{ backgroundColor: hue }}
+          />
+        )}
+
+        {/*
+          The hero's scrim, not a light tint.
+          The count and the name sit at opposite ends of this panel, so both
+          ends need to be dark — a gradient that clears in the middle looked
+          better empty and made the type unreadable the moment there were real
+          photographs behind it. Dimming the images themselves was tried first
+          and is worse: it greys the photography without ever guaranteeing
+          contrast, because the guarantee has to come from a fixed layer.
+        */}
+        <span
+          aria-hidden
+          className="absolute inset-0 bg-[linear-gradient(180deg,oklch(0.16_0.012_55_/_0.9)_0%,oklch(0.16_0.012_55_/_0.62)_45%,oklch(0.16_0.012_55_/_0.94)_100%)]"
+        />
+
+        {/* Taller than the half below it: the photography is what makes a row
+            of four scannable, and it was losing the card to a text block. */}
+        <span className="relative flex min-h-[260px] flex-col justify-between p-3.5 text-white">
+          <span className="block">
+            <b className="block text-[34px] font-extrabold leading-none tracking-[-0.03em] tabular-nums">
+              {family.venue_count}
+            </b>
+            <span className="mt-1 block text-[9.5px] font-bold tracking-[0.12em] opacity-80">
+              {labels.venueUnit}
+            </span>
+          </span>
+
+          <span className="block">
+            <span className="block text-[17px] font-bold tracking-[-0.01em]">{family.name}</span>
+            {groups.length > 0 && (
+              <span className="mt-0.5 block truncate text-[11.5px] opacity-75">
+                {groups.join(" · ")}
+              </span>
+            )}
+
+            {/* The band belongs up here with the other facts ABOUT the family.
+                Below, it was a third block competing with the one thing that
+                half is for — the item you might actually order. */}
+            {priceBandLabel && (
+              <span className="mt-2 inline-flex items-center gap-1.5 rounded-full bg-white/15 px-2.5 py-1 text-[11px] backdrop-blur-[2px]">
+                <Wallet className="h-3 w-3 shrink-0" aria-hidden />
+                <span className="opacity-80">{labels.priceBand}</span>
+                <b className="font-semibold tabular-nums">{priceBandLabel}</b>
+              </span>
+            )}
+          </span>
+        </span>
+      </LinkComponent>
+
+      {family.signature && (
+        <div className="flex flex-1 flex-col px-2 pb-2 pt-3">
+          <span className="px-2 text-[9.5px] font-bold uppercase tracking-[0.09em] text-muted-foreground">
+            {labels.mostNamed}
+          </span>
+
+          {/* MenuItem's own `px-4`: its colour mark is drawn at `-ml-4` and
+              needs that gutter — a tighter padding clipped it to a grey stub. */}
+          <MenuItem
+            className="min-h-0"
+            item={family.signature.item}
+            labels={itemLabels}
+            formatPrice={formatPrice}
+            formatCount={formatCount}
+            markGradient={hue}
+            subtitle={family.signature.why}
+            href={family.signature.href ?? href}
+            linkComponent={LinkComponent}
+          />
+
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/menu-field.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MenuField } from "./menu-field";
+import { mockGradients } from "./menu-mocks";
+
+const meta: Meta<typeof MenuField> = {
+  title: "Menu/MenuField",
+  component: MenuField,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The photoless cover for a dish or drink: the item's own name repeating across a shallow diagonal over a gradient. Menu-item photography is AI-generated and never shown, so the type IS the cover. Rows fade symmetrically out from one strong centre line, which is what keeps them reading as texture in the colour rather than as a watermark stamped on top of it. The gradient is injected because resolving a category to a hue needs app-owned enums.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuField>;
+
+export const Default: Story = {
+  args: {
+    name: "Truffle Tagliatelle",
+    gradient: mockGradients.pasta,
+    className: "h-[200px] w-[260px] rounded-xl",
+  },
+};
+
+/** A long name repeats fewer times per line, so the texture opens up. */
+export const LongName: Story = {
+  args: {
+    name: "Burrata & heirloom tomato with basil oil",
+    gradient: mockGradients.greens,
+    className: "h-[200px] w-[260px] rounded-xl",
+  },
+};
+
+/** Short names tile densely — the falloff is what stops that reading as noise. */
+export const ShortName: Story = {
+  args: {
+    name: "Mici",
+    gradient: mockGradients.meat,
+    className: "h-[200px] w-[260px] rounded-xl",
+  },
+};
+
+/**
+ * `seedKey` fixes the horizontal stagger. Two cards for the same concept at
+ * different venues break identically; pass the item slug and they diverge.
+ */
+export const EveryHue: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-3">
+      {Object.entries(mockGradients).map(([name, gradient]) => (
+        <MenuField
+          key={name}
+          name={name}
+          gradient={gradient}
+          className="h-[120px] w-[150px] rounded-xl"
+        />
+      ))}
+    </div>
+  ),
+};
+
+/** At tile scale the type has to survive being small. This is the real size. */
+export const AtTileScale: Story = {
+  args: {
+    name: "Chicken wings, 6 pc",
+    gradient: mockGradients.meat,
+    className: "aspect-[5/4] w-[180px] rounded-xl",
+  },
+};

package/src/components/menu-field.tsx

@@ -0,0 +1,199 @@
+import { cn } from "../lib/utils";
+
+/**
+ * MenuField — the photoless cover surface for a dish or drink.
+ *
+ * Menu-item photography is AI-generated and never shown, so the item's own name
+ * repeats across a shallow diagonal over a gradient. The type IS the cover.
+ *
+ * The rows fade SYMMETRICALLY out from a single strong row at the centre. That
+ * shape is what keeps the type reading as texture in the colour rather than as
+ * a watermark stamped on top of it: the eye lands on one legible line and the
+ * rest falls away in both directions. A uniform wash — or a random per-row
+ * alpha — reads as noise at every alpha high enough to see.
+ *
+ * The alpha curve is IDENTICAL for every hue. Scaling it per hue to even out
+ * how white type reads over different grounds also moves where rows fall below
+ * visibility, so a damped hue lost rows and one card showed five bands where
+ * its neighbour showed three. Correct contrast in the `gradient` you pass, not
+ * in the curve.
+ *
+ * ## Why `gradient` is a prop
+ *
+ * Resolving a category slug to a hue needs the app's category enums, which the
+ * DS does not take. Callers pass a finished CSS gradient — fe from its own
+ * category-colour table, post-generator from whatever it is filming. The DS
+ * owns the typography and the falloff; the consumer owns the palette.
+ *
+ * Server-safe: no state, no effects. The row geometry is a 13-iteration loop
+ * computed on every render, which is cheaper than the hook that would let it be
+ * skipped.
+ */
+
+export type MenuFieldProps = {
+  /** Item name — rendered as the repeating ghost. */
+  name: string;
+  /** CSS `background-image` value. See the note above on why this is injected. */
+  gradient: string;
+  /**
+   * Deterministic stagger seed. Pass the PARENT CONCEPT SLUG so one dish breaks
+   * its lines identically at every venue and across re-sorts. Defaults to
+   * `name`, which is stable but shared by every venue's version of a dish.
+   */
+  seedKey?: string;
+  /**
+   * `repeat` (default) — the name as texture, thirteen fading rows. Right at
+   * swatch and thumbnail sizes, where any single line would be unreadable.
+   *
+   * `display` — the name ONCE, set large and bled off the edges. Right when the
+   * tile is the primary object on its row and the name is the thing being sold;
+   * the repeat treatment at that size reads as wallpaper rather than as a dish.
+   * Long names clip on purpose — the caption underneath carries the full text.
+   */
+  variant?: "repeat" | "display";
+  className?: string;
+};
+
+/**
+ * Odd, so there is a true middle row to peak on. Fixed rather than measured:
+ * the field is only ever 106–260px tall, 13 rows covers the tallest of those
+ * once the 11° rotation and the 180% oversize are accounted for, and the rest
+ * is clipped. Measuring would cost a layout effect per card on a grid that
+ * renders fifty at a time.
+ */
+const GHOST_ROWS = 13;
+const GHOST_CENTRE = (GHOST_ROWS - 1) / 2;
+
+/**
+ * Alpha at the centre row and at the outermost rows.
+ *
+ * The peak has to clear the point where white stops reading as white. White at
+ * a low alpha over a saturated field does not composite to a pale version of
+ * itself — it composites to a desaturated version of the FIELD, which the eye
+ * calls grey. At 0.30 the brightest rows read as grey text on colour; the type
+ * only resolves as an off-white shade of the field once the centre gets enough
+ * weight to pull lightness up and chroma down.
+ */
+const ALPHA_PEAK = 0.44;
+const ALPHA_EDGE = 0;
+
+/**
+ * Falloff steepness. High on purpose: only the middle band should read, with
+ * everything above and below dropping to nothing well before the card edge. At
+ * 1.6 the outer rows were still legible and the field looked tiled rather than
+ * lit; 1 would be a flat linear ramp leaving every row half-visible.
+ */
+const FALLOFF_EXPONENT = 3.4;
+
+/** Target line width in characters, so short names repeat more than long ones. */
+const GHOST_LINE_CHARS = 56;
+
+/** djb2. Same input, same break pattern, always — and no `Math.random` to hydrate-mismatch. */
+function hashString(input: string): number {
+  let hash = 5381;
+  for (let i = 0; i < input.length; i++) hash = (hash * 33) ^ input.charCodeAt(i);
+  return Math.abs(hash);
+}
+
+export function MenuField({
+  name,
+  gradient,
+  seedKey,
+  variant = "repeat",
+  className,
+}: MenuFieldProps) {
+  if (variant === "display") {
+    // Fit the name to the tile. The longest word sets the width the type may
+    // take (a `font-black` uppercase glyph advances ~0.62em on average), the
+    // word count sets the height (leading 0.9). Whichever is tighter wins,
+    // capped at the 19cqw a short name used to get and floored at 9cqw so a
+    // very long name becomes small type, not clipped type. A little bleed past
+    // the padding is fine; three lines of letters taller than the tile is not.
+    const words = name.trim().split(/\s+/).filter(Boolean);
+    const longestWord = Math.max(1, ...words.map((word) => word.length));
+    const lineCount = Math.max(1, words.length);
+    const byWidth = (96 / (longestWord * 0.62)).toFixed(1);
+    const byHeight = (90 / (lineCount * 0.9)).toFixed(1);
+    const fontSize = `clamp(9cqw, min(19cqw, ${byWidth}cqw, ${byHeight}cqh), 19cqw)`;
+    return (
+      <div
+        className={cn("relative isolate overflow-hidden", className)}
+        // `size` containment (not the wrapper's inline-size) so `cqh` resolves
+        // against THIS tile's height. Safe: the field is sized by its parent's
+        // aspect box, never by its own content.
+        style={{ backgroundImage: gradient, containerType: "size" }}
+      >
+        {/*
+          The name ONCE, in translucent white, sized to FIT the tile — see the
+          arithmetic above. `cqw`/`cqh` units so the type scales with the card
+          instead of being a fixed pixel size that looks right in a six-across
+          grid and absurd anywhere else. The caption below carries the full
+          text, which is also why this is `aria-hidden`.
+
+          Centred on both axes so a short name grows symmetrically and a long
+          one stacks its words in the middle. NO `break-words`: it split names
+          mid-glyph ("PIZZA NEW CROC / O"), which reads as a rendering fault.
+          Words wrap whole.
+        */}
+        <span
+          aria-hidden
+          className="pointer-events-none absolute inset-0 flex select-none items-center justify-center p-[4cqw] text-center font-black uppercase leading-[0.9] tracking-[-0.03em] text-white/[0.26]"
+          style={{ fontSize }}
+        >
+          {name}
+        </span>
+      </div>
+    );
+  }
+
+  const unit = `${name} · `;
+  const repeats = Math.max(2, Math.ceil(GHOST_LINE_CHARS / Math.max(unit.length, 1)));
+  const ghostLine = unit.repeat(repeats);
+  const seed = hashString(seedKey ?? name);
+
+  const rows = Array.from({ length: GHOST_ROWS }, (_, row) => {
+    const distance = Math.abs(row - GHOST_CENTRE) / GHOST_CENTRE;
+    const alpha = ALPHA_EDGE + (ALPHA_PEAK - ALPHA_EDGE) * Math.pow(1 - distance, FALLOFF_EXPONENT);
+    return { row, alpha, offset: ((seed >> (row % 12)) % 90) - 45 };
+  });
+
+  return (
+    <div
+      className={cn("relative isolate overflow-hidden", className)}
+      style={{ backgroundImage: gradient }}
+    >
+      {/*
+        `aria-hidden`: the ghost duplicates the caption beside it, and a screen
+        reader announcing "Arancini" thirteen times is noise. `select-none` so
+        dragging across a grid does not lift a wall of repeated names into the
+        clipboard.
+      */}
+      <div
+        aria-hidden
+        className="pointer-events-none absolute left-1/2 top-1/2 flex h-[180%] w-[180%] -translate-x-1/2 -translate-y-1/2 -rotate-[11deg] select-none flex-col justify-center"
+      >
+        {rows.map(({ row, alpha, offset }) => (
+          <span
+            key={row}
+            className="block whitespace-nowrap text-center text-[15px] font-bold leading-[1.45] tracking-[-0.01em]"
+            style={{
+              color: `oklch(1 0 0 / ${alpha.toFixed(3)})`,
+              // Emboss, both edges scaled by this row's alpha: a dark edge below
+              // cuts the letterform into the field, a light edge above lifts its
+              // top. The dark edge is kept well under the fill — at parity it
+              // ringed every glyph and dragged the type back toward grey, which
+              // is the opposite of what the fill is doing.
+              textShadow: [
+                `0 1px 1px oklch(0 0 0 / ${(alpha * 0.4).toFixed(3)})`,
+                `0 -1px 0 oklch(1 0 0 / ${(alpha * 0.4).toFixed(3)})`,
+              ].join(", "),
+              transform: `translateX(${offset}px)`,
+            }}
+          >
+            {ghostLine}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/menu-hub-hero.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ArrowLeftRight, UtensilsCrossed } from "lucide-react";
+import { Button } from "./button";
+import { MenuHubHero } from "./menu-hub-hero";
+
+const meta: Meta<typeof MenuHubHero> = {
+  title: "Menu/MenuHubHero",
+  component: MenuHubHero,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The claim that opens a menu hub, proven by live figures. A statement rather than a count, with the catalogue's real numbers under it and one proof line demonstrating what a catalogue can say that a single menu cannot. The ground is a texture rather than a photograph because item photography is generated and one venue's photo behind a claim about every venue argues the wrong thing — callers with a real licensed venue image can pass `backgroundUrl`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuHubHero>;
+
+export const Default: Story = {
+  args: {
+    kicker: "397 MENUS IN CLUJ-NAPOCA, READ IN FULL",
+    kickerIcon: <UtensilsCrossed className="h-3 w-3" />,
+    headline: "Nobody should have to walk in blind.",
+    body: "We read every menu in the city — what each kitchen serves, what it costs, how big the portion is, and which plates the reviews keep naming. Decide before you sit down.",
+    figures: [
+      { value: "19,062", label: "dishes" },
+      { value: "26,078", label: "drinks" },
+      { value: "397", label: "menus read" },
+      { value: "38", label: "cuisines" },
+    ],
+    proof: (
+      <span>
+        A margherita: <b className="font-mono font-medium">87 kitchens make one, 10 to 120 lei</b>
+      </span>
+    ),
+    proofIcon: <ArrowLeftRight className="h-3.5 w-3.5" />,
+    action: (
+      <Button size="sm" variant="secondary">
+        See the spread
+      </Button>
+    ),
+  },
+};
+
+/** The drinks tab: same component, different view model and copy. */
+export const DrinksTab: Story = {
+  args: {
+    kicker: "397 MENUS IN CLUJ-NAPOCA, READ IN FULL",
+    kickerIcon: <UtensilsCrossed className="h-3 w-3" />,
+    headline: "The same negroni, across seventy-four bars.",
+    body: "Twenty-six thousand drinks, matched into concepts so the price comparison is real.",
+    figures: [
+      { value: "26,078", label: "drinks" },
+      { value: "397", label: "menus read" },
+      { value: "74", label: "bars pour a negroni" },
+    ],
+  },
+};
+
+/** No figures, no proof — the hero degrades to a claim and nothing else. */
+export const ClaimOnly: Story = {
+  args: { headline: "Nobody should have to walk in blind." },
+};
+
+export const Mobile: Story = {
+  args: {
+    kicker: "397 MENUS READ IN FULL",
+    headline: "Nobody should have to walk in blind.",
+    figures: [
+      { value: "19,062", label: "dishes" },
+      { value: "397", label: "menus read" },
+    ],
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};