@bearmenu/ui 0.8.8 → 0.8.9

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>
+    ),
+  ],
+};

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

@@ -0,0 +1,187 @@
+import { cn } from "../lib/utils";
+
+/**
+ * MenuHubHero — the claim that opens a menu hub, proven by live figures.
+ *
+ * A statement rather than a count ("Nobody should have to walk in blind"),
+ * over a dark ground, with the catalogue's real numbers under it and one proof
+ * line that demonstrates what the catalogue can do that a single menu cannot.
+ *
+ * ## Why the ground is a texture and not a photograph
+ *
+ * Menu-item photography is AI-generated and never shown, and one venue
+ * photograph behind a claim about every venue in the city argues the wrong
+ * thing. The tile grid reads as "many menus" without being any of them.
+ * Callers that DO have a real, licensed image for the slot can pass
+ * `backgroundUrl` — venue photography, never a plate.
+ *
+ * ## Figures
+ *
+ * `figures` is a list, not four fixed slots: the drinks tab has different ones
+ * and the count changes when a number turns out to have nothing behind it.
+ * Every value is a pre-formatted string because thousands separators are
+ * locale-dependent and the DS owns no locale.
+ *
+ * Server-safe.
+ */
+
+export type MenuHubHeroFigure = {
+  /** Pre-formatted, e.g. "19,062". */
+  value: string;
+  label: string;
+};
+
+export type MenuHubHeroProps = {
+  /** Small caps line above the headline, e.g. "397 MENUS IN CLUJ-NAPOCA, READ IN FULL". */
+  kicker?: string;
+  /** Icon for the kicker, resolved by the caller. */
+  kickerIcon?: React.ReactNode;
+  headline: string;
+  body?: string;
+  figures?: MenuHubHeroFigure[];
+  /**
+   * The proof line — one demonstrated fact, e.g. "A margherita: 87 kitchens
+   * make one, 10 to 120 lei". Composed by the caller; clause order is
+   * locale-dependent.
+   */
+  proof?: React.ReactNode;
+  proofIcon?: React.ReactNode;
+  /** The action beside the proof line. Pass a rendered link or button. */
+  action?: React.ReactNode;
+  /** Real, licensed photograph for the ground. Venue imagery only — see above. */
+  backgroundUrl?: string;
+  /**
+   * Tiles for the mosaic ground — generic, cinematic, licensed stills, served
+   * from the consumer's own origin.
+   *
+   * A mosaic rather than one photograph because the hero's claim is about EVERY
+   * kitchen in the city: a single image makes it about one of them. Given fewer
+   * tiles than cells the list repeats, so a caller can ship six and still fill
+   * a 1440px hero.
+   */
+  tileUrls?: string[];
+  className?: string;
+};
+
+/** Enough cells to fill the widest hero without the grid reading as a pattern. */
+const TEXTURE_CELLS = 28;
+
+export function MenuHubHero({
+  kicker,
+  kickerIcon,
+  headline,
+  body,
+  figures,
+  proof,
+  proofIcon,
+  action,
+  backgroundUrl,
+  tileUrls,
+  className,
+}: MenuHubHeroProps) {
+  return (
+    <div
+      className={cn(
+        "relative flex min-h-[260px] overflow-hidden rounded-[20px] bg-[oklch(0.21_0.012_55)] lg:min-h-[440px]",
+        className
+      )}
+    >
+      {backgroundUrl ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={backgroundUrl}
+          alt=""
+          aria-hidden
+          className="absolute inset-0 h-full w-full object-cover opacity-[0.42]"
+        />
+      ) : (
+        <div
+          aria-hidden
+          className="absolute inset-0 grid auto-rows-fr grid-cols-4 gap-0.5 lg:grid-cols-7"
+        >
+          {Array.from({ length: TEXTURE_CELLS }, (_, cell) => {
+            const url = tileUrls?.length ? tileUrls[cell % tileUrls.length] : undefined;
+
+            return url ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                key={cell}
+                src={url}
+                alt=""
+                loading="lazy"
+                decoding="async"
+                className="h-full w-full object-cover"
+              />
+            ) : (
+              <div
+                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.42]"
+              />
+            );
+          })}
+        </div>
+      )}
+
+      {/*
+        Heavier over a photo mosaic than it was over flat texture: twelve
+        cinematic stills at full strength turn a claim into a collage and the
+        headline stops being the loudest thing on the banner. This keeps the
+        depth and gives the type its contrast back.
+      */}
+      <div
+        aria-hidden
+        className={cn(
+          "absolute inset-0",
+          tileUrls?.length || backgroundUrl
+            ? "bg-[linear-gradient(100deg,oklch(0.16_0.012_55_/_0.96)_0%,oklch(0.16_0.012_55_/_0.88)_52%,oklch(0.16_0.012_55_/_0.72)_100%)]"
+            : "bg-[linear-gradient(100deg,oklch(0.18_0.012_55_/_0.95)_0%,oklch(0.18_0.012_55_/_0.72)_52%,oklch(0.18_0.012_55_/_0.3)_100%)]"
+        )}
+      />
+
+      <div className="relative z-[1] flex w-full flex-col justify-center gap-3 p-5 text-white lg:gap-4 lg:px-12 lg:py-11">
+        {kicker && (
+          <span className="inline-flex w-max items-center gap-[7px] rounded-full bg-white/15 px-3 py-1.5 text-[11px] font-extrabold tracking-[0.11em]">
+            {kickerIcon}
+            {kicker}
+          </span>
+        )}
+
+        <h1 className="max-w-[640px] font-serif text-[32px] font-semibold leading-[1.04] tracking-[-0.025em] lg:text-[50px]">
+          {headline}
+        </h1>
+
+        {body && (
+          <p className="hidden max-w-[540px] text-sm leading-[1.6] opacity-[0.84] lg:block lg:text-[15.5px]">
+            {body}
+          </p>
+        )}
+
+        {figures && figures.length > 0 && (
+          // Two by two on the phone: four figures in one row wrapped to three and an orphan.
+          <div className="grid grid-cols-2 gap-x-6 gap-y-3 pt-3 lg:flex lg:flex-wrap lg:gap-x-8 lg:gap-y-4 lg:pt-1.5">
+            {figures.map((figure) => (
+              <div key={figure.label}>
+                <div className="text-2xl font-black leading-none tracking-[-0.03em] tabular-nums lg:text-[32px]">
+                  {figure.value}
+                </div>
+                <div className="mt-[5px] text-xs opacity-[0.72]">{figure.label}</div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {(proof || action) && (
+          <div className="mt-auto flex flex-wrap items-center gap-3 pt-5">
+            {proof && (
+              <span className="inline-flex min-h-11 items-center gap-2.5 rounded-full bg-white/10 px-4 py-2 text-[13px] backdrop-blur-[6px]">
+                {proofIcon}
+                {proof}
+              </span>
+            )}
+            {action}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/menu-intent-tiles.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Beef, Coffee, Leaf, MapPin, Pizza, UtensilsCrossed } from "lucide-react";
+import { MenuIntentTiles } from "./menu-intent-tiles";
+import { mockIntentTiles } from "./menu-mocks";
+
+const icons = [Pizza, Beef, Coffee, UtensilsCrossed, Leaf, MapPin];
+const tiles = mockIntentTiles.map((tile, index) => {
+  const Icon = icons[index];
+  return { ...tile, icon: <Icon /> };
+});
+
+const meta: Meta<typeof MenuIntentTiles> = {
+  title: "Menu/MenuIntentTiles",
+  component: MenuIntentTiles,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The sentence people arrive with, as six coloured tiles. An intent is a family plus a constraint — Italian *tonight*, burgers, coffee — and each tile is a destination, so `href` is required on the view model: a category page that does not exist is filtered out by the caller rather than rendered as a tile linking nowhere. Roughly thirty-two of thirty-eight cuisines have a page, so that is the normal case, not the edge one.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuIntentTiles>;
+
+export const Default: Story = { args: { tiles } };
+
+/** Two-up on a phone, six-up from `lg`. */
+export const Mobile: Story = {
+  args: { tiles },
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/** Without icons the tiles still read — the watermark is recognition, not information. */
+export const WithoutIcons: Story = { args: { tiles: mockIntentTiles } };
+
+/** Fewer tiles than a full row: the grid does not stretch them. */
+export const Partial: Story = { args: { tiles: tiles.slice(0, 3) } };

package/src/components/menu-intent-tiles.tsx

@@ -0,0 +1,76 @@
+import { ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils";
+import type { MenuIntentTile, MenuLinkProps, MenuLinkComponent } from "./menu-types";
+
+/**
+ * MenuIntentTiles — the sentence people arrive with, as six coloured tiles.
+ *
+ * An intent is a family plus a constraint: Italian *tonight*, burgers, coffee.
+ * Each tile is a destination, so `href` is required on the view model — a
+ * category page that does not exist is filtered out by the caller rather than
+ * rendered as a tile that links nowhere. Roughly thirty-two of thirty-eight
+ * cuisines have a page, so that case is normal, not exceptional.
+ *
+ * The icon is a watermark bleeding off the bottom-right corner at low opacity,
+ * not a badge: it gives the tile a silhouette to be recognised by in a rail
+ * without competing with the label. It is `aria-hidden` — the label already
+ * says what the tile is.
+ *
+ * Server-safe.
+ */
+
+/** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
+export type MenuIntentTilesLinkProps = MenuLinkProps;
+
+function DefaultLink({ href, ...props }: MenuIntentTilesLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type MenuIntentTilesProps = {
+  tiles: MenuIntentTile[];
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+export function MenuIntentTiles({
+  tiles,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: MenuIntentTilesProps) {
+  return (
+    <div
+      className={cn(
+        "grid grid-cols-2 gap-3 lg:grid-cols-6 lg:gap-3.5",
+        className
+      )}
+    >
+      {tiles.map((tile) => (
+        <LinkComponent
+          key={tile.slug}
+          href={tile.href}
+          className="relative flex min-h-[110px] flex-col overflow-hidden rounded-2xl bg-muted p-3.5 text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 lg:min-h-[124px] lg:px-3.5 lg:pb-3.5 lg:pt-[15px]"
+          style={tile.gradient ? { backgroundImage: tile.gradient } : undefined}
+        >
+          {tile.icon && (
+            <span
+              aria-hidden
+              className="pointer-events-none absolute -bottom-2.5 -right-1.5 z-0 opacity-[0.22] [&>svg]:h-[62px] [&>svg]:w-[62px]"
+            >
+              {tile.icon}
+            </span>
+          )}
+
+          <span className="relative z-[1] flex h-full flex-col">
+            <span className="text-[14.5px] font-extrabold leading-[1.2] tracking-[-0.015em]">
+              {tile.label}
+            </span>
+            {tile.caption && (
+              <span className="mt-[3px] text-[11.5px] leading-[1.35]">{tile.caption}</span>
+            )}
+            <ChevronRight className="mt-auto h-4 w-4 opacity-85" aria-hidden />
+          </span>
+        </LinkComponent>
+      ))}
+    </div>
+  );
+}