@bearmenu/ui 0.8.10 → 0.8.12

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

@@ -8,7 +8,7 @@ const labels = {
   browse: "Browse Italian",
 };
 
-/** A stand-in photograph with enough variance that the frost has something to soften. */
+/** A stand-in photograph with enough variance that the ink has something to sit on. */
 function photo(hue: number, label: string) {
   return (
     "data:image/svg+xml;utf8," +
@@ -35,7 +35,7 @@ const meta: Meta<typeof MenuFamilyCard> = {
     docs: {
       description: {
         component:
-          "The hub's doorway to a family — a cuisine on the dishes tab, a drink family on the drinks tab. The same photo language as `MenuFamilyBlock` (the mosaic is the ground, wearing the family's hue; a masked frost and an ink gradient carry the type) drawn one step earlier, in a row of three, where the reader is choosing a family and not yet a venue: one number, one name, the groups the family consists of, and the `Browse` pill. It lists no venue. The count is VENUES: cuisine exists only on places, so a card counting dishes cannot be built. The whole card is one link.",
+          "The hub's doorway to a family — a cuisine on the dishes tab, a drink family on the drinks tab. The same photo language as `MenuFamilyBlock` (the mosaic is the ground, wearing the family's hue; an ink gradient carries the type) drawn one step earlier, in a row of three, where the reader is choosing a family and not yet a venue: one number, one name, the groups the family consists of, and the `Browse` pill. It lists no venue. The count is VENUES: cuisine exists only on places, so a card counting dishes cannot be built. The whole card is one link.",
       },
     },
   },

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

@@ -83,13 +83,6 @@ const MOSAIC_CELLS = 4;
 /** The card's ground is `PhotoGround`'s, so the two cannot differ. */
 const GROUND = PHOTO_GROUND;
 
-/**
- * The frost: absent over the top half, full at the foot, where the chips and
- * the pill sit. The mask is what makes it a gradient of softness rather than
- * a frosted pane — the rooms stay sharp behind the number.
- */
-const FROST = "backdrop-blur-xl [mask-image:linear-gradient(to_bottom,transparent_28%,black_58%)]";
-
 /**
  * The ink. The count and the name sit at opposite ends of the card, so both
  * ends are dark — a gradient that cleared in the middle looked better empty
@@ -137,10 +130,10 @@ export function MenuFamilyCard({
         gradient={gradient}
       />
 
-      {/* ── Layer 2: the frost ──────────────────────────────────────────── */}
-      <span aria-hidden className={cn("absolute inset-0 -z-20", FROST)} />
-
-      {/* ── Layer 3: the ink ────────────────────────────────────────────── */}
+      {/* ── Layer 2: the ink ────────────────────────────────────────────── */}
+      {/* There was a masked backdrop-blur under this. Removed for the same
+          measurement that took it out of `GlassGround`: the type rests on the
+          ink, and the rooms stay sharp all the way down. */}
       <span aria-hidden className={cn("absolute inset-0 -z-10", INK)} />
 
       {/* ── The content, floating ───────────────────────────────────────── */}
@@ -179,10 +172,10 @@ export function MenuFamilyCard({
           </span>
         )}
 
-        {/* The action, as a frosted pill on the photography — the block's
+        {/* The action, as a translucent pill on the photography — the block's
             pill, so the two cards read as one family. A `span`, because the
             card is already the link. */}
-        <span className="mt-3.5 inline-flex h-10 items-center rounded-full border border-white/20 bg-white/[0.12] px-4 text-[13.5px] font-bold text-white backdrop-blur-md transition-colors group-hover:bg-white/20 motion-reduce:transition-none">
+        <span className="mt-3.5 inline-flex h-10 items-center rounded-full border border-white/20 bg-white/[0.16] px-4 text-[13.5px] font-bold text-white transition-colors group-hover:bg-white/25 motion-reduce:transition-none">
           {labels.browse}
         </span>
       </span>

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

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MenuFamilyTiles } from "./menu-family-tiles";
+import { mockFamilyTiles, mockFamilyTilesAll } from "./menu-mocks";
+
+const meta: Meta<typeof MenuFamilyTiles> = {
+  title: "Menu/MenuFamilyTiles",
+  component: MenuFamilyTiles,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The hub's doorways: every family the city browses by, as a grid of coloured tiles — the family's name, its venue count and one venue's photograph tilted off the corner — closed by one tile that opens the whole index. Two to a row on a phone, four from `lg`, so seven families and the index make two rows at every width.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuFamilyTiles>;
+
+export const Default: Story = { args: { tiles: mockFamilyTiles, all: mockFamilyTilesAll } };
+
+/** Two-up on a phone — seven families and the index in four rows. */
+export const Mobile: Story = {
+  args: { tiles: mockFamilyTiles, all: mockFamilyTilesAll },
+  // The grid's columns follow the viewport, not the wrapper.
+  parameters: { viewport: { defaultViewport: "mobile1" } },
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/** No photographs anywhere: every polaroid holds the family's initial. */
+export const WithoutPhotos: Story = {
+  args: {
+    tiles: mockFamilyTiles.map(({ photoUrl: _photoUrl, ...tile }) => tile),
+    all: { ...mockFamilyTilesAll, photoUrl: undefined },
+  },
+};
+
+/** The drinks tab's five going-out families, no index tile. */
+export const Partial: Story = { args: { tiles: mockFamilyTiles.slice(0, 5) } };

package/src/components/menu-family-tiles.test.tsx

@@ -0,0 +1,30 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { MenuFamilyTiles } from "./menu-family-tiles";
+import { mockFamilyTiles, mockFamilyTilesAll } from "./menu-mocks";
+
+describe("MenuFamilyTiles", () => {
+  it("renders one link per family plus the index tile, in order", () => {
+    render(<MenuFamilyTiles tiles={mockFamilyTiles} all={mockFamilyTilesAll} />);
+    const links = screen.getAllByRole("link");
+    expect(links).toHaveLength(mockFamilyTiles.length + 1);
+    expect(links[0]).toHaveAttribute("href", mockFamilyTiles[0].href);
+    expect(links.at(-1)).toHaveAttribute("href", mockFamilyTilesAll.href);
+    expect(links.at(-1)).toHaveTextContent(mockFamilyTilesAll.label);
+  });
+
+  // A family without a photograph keeps the polaroid — the initial fills it —
+  // so a row of seven never has one tile with a different silhouette.
+  it("draws the initial where a family has no photograph", () => {
+    const [withPhoto, withoutPhoto] = [mockFamilyTiles[0], mockFamilyTiles.at(-1)!];
+    expect(withoutPhoto.photoUrl).toBeUndefined();
+    render(<MenuFamilyTiles tiles={[withPhoto, withoutPhoto]} />);
+    expect(document.querySelectorAll("img")).toHaveLength(1);
+    expect(screen.getByText(withoutPhoto.label.charAt(0))).toBeInTheDocument();
+  });
+
+  it("omits the index tile when no index is given", () => {
+    render(<MenuFamilyTiles tiles={mockFamilyTiles.slice(0, 3)} />);
+    expect(screen.getAllByRole("link")).toHaveLength(3);
+  });
+});

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

@@ -0,0 +1,132 @@
+import { cn } from "../lib/utils";
+import type { MenuFamilyTile, MenuLinkComponent, MenuLinkProps } from "./menu-types";
+import { PhotoGround } from "./photo-ground";
+
+/**
+ * MenuFamilyTiles — the hub's doorways: every family the city browses by, as
+ * a grid of coloured tiles, closed by one tile that opens the whole index.
+ *
+ * ## A tile, not a card
+ *
+ * The family card this replaces was a full-width mosaic with chips, a price
+ * band and a browse pill — a summary of the family, in a rail the reader had
+ * to swipe through one family at a time. The tile is the family's NAME, its
+ * venue count and one photograph on the family's hue, two to a row, so seven
+ * families and the index fit on one phone screen. The reader is choosing a
+ * family here, not learning about one; the summary lives on the page the tile
+ * opens.
+ *
+ * ## The photograph is a polaroid, not a ground
+ *
+ * One square photograph, tilted, running off the tile's top and right edges
+ * — the tile's `overflow-hidden` crops it, so it reads as a print dropped on
+ * the tile rather than a thumbnail placed in it — with the name and the count
+ * in the bottom-left, under the print's lower edge. Not a ground: white type
+ * on a photograph needs a scrim heavy enough to hide the photograph, and the
+ * hue is what tells seven tiles apart at a glance. The photograph is the
+ * FAMILY's — a plate, a room, a glass — served from the consumer's own origin,
+ * never a venue's (a venue on a tile about every venue reads as an
+ * endorsement). A family with no photograph gets the same tilted square
+ * holding `PhotoGround`'s serif initial, so the silhouette never changes.
+ *
+ * Every measure on the polaroid is a percentage of the tile, so the tile and
+ * the design stay in proportion from a 170px phone cell to a 260px desktop
+ * one: 82% of the height, 8% above the top, 4% past the right, 8° over —
+ * measured off the design frame.
+ *
+ * The bottom scrim is mandatory. The honey and terrace hues sit around
+ * `oklch(0.6…)`, where white at 14.5px is about 3:1 — under the 4.5:1 the
+ * label needs. The scrim takes the label's corner down to where it passes on
+ * every hue in the dictionary.
+ *
+ * Server-safe.
+ */
+
+function DefaultLink({ href, ...props }: MenuLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type MenuFamilyTilesProps = {
+  tiles: MenuFamilyTile[];
+  /**
+   * The closing tile: the index behind the seven, drawn exactly like them —
+   * its own hue and photograph, `countLabel` as the caption. Only its place in
+   * the grid says it is the index. Omit when there is none.
+   */
+  all?: MenuFamilyTile;
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+/**
+ * The tile: the design's 16:10, never shorter than two lines of name plus the
+ * count need.
+ */
+const TILE =
+  "group relative isolate flex aspect-[16/10] min-h-[108px] flex-col justify-end overflow-hidden rounded-2xl bg-muted p-3.5 text-white lg:p-4 " +
+  "transition-[transform,box-shadow] duration-200 hover:-translate-y-0.5 hover:shadow-[var(--shadow-card-hover)] active:translate-y-0 active:scale-[0.99] motion-reduce:transition-none " +
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
+
+/**
+ * The polaroid. Same literal family as `PHOTO_GROUND` for the shadow, never a
+ * black `rgba` — the shadow is the ground the card family already stands on.
+ */
+const POLAROID =
+  "absolute -right-[4%] -top-[8%] z-0 block aspect-square h-[82%] overflow-hidden rounded-[10%] rotate-[8deg] " +
+  "shadow-[0_10px_22px_-6px_oklch(0.16_0.012_55_/_0.65)] transition-transform duration-300 group-hover:rotate-[5deg] motion-reduce:transition-none";
+
+const SCRIM =
+  "after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:z-0 after:h-3/5 after:bg-gradient-to-t after:from-[oklch(0.16_0.012_55_/_0.55)] after:to-transparent after:content-['']";
+
+export function MenuFamilyTiles({
+  tiles,
+  all,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: MenuFamilyTilesProps) {
+  const cells = all ? [...tiles, all] : tiles;
+
+  return (
+    <div className={cn("grid grid-cols-2 gap-3 lg:grid-cols-4 lg:gap-3.5", className)}>
+      {cells.map((tile) => (
+        <LinkComponent
+          key={tile.slug}
+          href={tile.href}
+          className={cn(TILE, SCRIM)}
+          style={tile.gradient ? { backgroundImage: tile.gradient } : undefined}
+        >
+          <span aria-hidden className={POLAROID}>
+            {tile.photoUrl ? (
+              /* Not lazy: the grid sits directly under the hero, and these
+                 photographs are the first thing the reader looks at. */
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                src={tile.photoUrl}
+                alt=""
+                decoding="async"
+                className="absolute inset-0 h-full w-full object-cover"
+              />
+            ) : (
+              <PhotoGround
+                photos={[undefined]}
+                initials={tile.label.charAt(0)}
+                mode="stack"
+                glyphClassName="text-[44px]"
+              />
+            )}
+          </span>
+
+          {/* Both lines keep to the left 55%: the polaroid owns the right. */}
+          <span className="relative z-[1] line-clamp-2 max-w-[55%] text-[14.5px] font-extrabold leading-[1.2] tracking-[-0.015em] lg:text-[16px]">
+            {tile.label}
+          </span>
+          {tile.countLabel && (
+            <span className="relative z-[1] mt-0.5 max-w-[55%] truncate text-[12px] font-medium leading-[1.35] tabular-nums text-white/80 lg:text-[13px]">
+              {tile.countLabel}
+            </span>
+          )}
+        </LinkComponent>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,39 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { MenuHubHero } from "./menu-hub-hero";
+import { VenueWall } from "./venue-wall";
+
+const tiles = Array.from({ length: 12 }, (_, i) => `/tiles/${i}.webp`);
+const mosaicImages = () => Array.from(document.querySelectorAll("img[loading='lazy']"));
+
+// The phone shows six tiles; the rest are `hidden` below `lg` so a lazy
+// still past the sixth is never requested. This is the request-count win
+// measured on the consumer's menu page — pinned so a cell-count edit cannot
+// silently put all twelve stills back on the phone's critical path.
+describe("MenuHubHero mosaic", () => {
+  it("shows the first six tiles on the phone and hides the rest until lg", () => {
+    render(<MenuHubHero headline="Every kitchen" tileUrls={tiles} />);
+    const images = mosaicImages();
+    expect(images).toHaveLength(28);
+    images.slice(0, 6).forEach((img) => expect(img).not.toHaveClass("hidden"));
+    images.slice(6).forEach((img) => expect(img).toHaveClass("hidden", "lg:block"));
+  });
+
+  it("cycles the tile list so the phone's six are the first six given", () => {
+    render(<MenuHubHero headline="Every kitchen" tileUrls={tiles.slice(0, 4)} />);
+    const srcs = mosaicImages()
+      .slice(0, 6)
+      .map((img) => img.getAttribute("src"));
+    expect(srcs).toEqual(["/tiles/0.webp", "/tiles/1.webp", "/tiles/2.webp", "/tiles/3.webp", "/tiles/0.webp", "/tiles/1.webp"]);
+  });
+});
+
+describe("VenueWall mosaic", () => {
+  it("follows the hero's rule: six on the phone, eighteen from lg", () => {
+    render(<VenueWall places={[]} headline="Every menu" tileUrls={tiles} />);
+    const images = mosaicImages();
+    expect(images).toHaveLength(18);
+    images.slice(0, 6).forEach((img) => expect(img).not.toHaveClass("hidden"));
+    images.slice(6).forEach((img) => expect(img).toHaveClass("hidden", "lg:block"));
+  });
+});

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

@@ -65,6 +65,13 @@ export type MenuHubHeroProps = {
 
 /** Enough cells to fill the widest hero without the grid reading as a pattern. */
 const TEXTURE_CELLS = 28;
+/**
+ * The phone shows the first six, three across. Twenty-eight cells four across
+ * on a 375px hero were 90px tiles under a 90% scrim — a texture nobody could
+ * read as a room — and every one of the twelve stills downloaded to draw it.
+ * Six at ~125px are rooms again and cost six requests.
+ */
+const PHONE_CELLS = 6;
 
 export function MenuHubHero({
   kicker,
@@ -97,10 +104,12 @@ export function MenuHubHero({
       ) : (
         <div
           aria-hidden
-          className="absolute inset-0 grid auto-rows-fr grid-cols-4 gap-0.5 lg:grid-cols-7"
+          className="absolute inset-0 grid auto-rows-fr grid-cols-3 gap-0.5 lg:grid-cols-7"
         >
           {Array.from({ length: TEXTURE_CELLS }, (_, cell) => {
             const url = tileUrls?.length ? tileUrls[cell % tileUrls.length] : undefined;
+            // `hidden` keeps a lazy image from ever being requested on the phone.
+            const phone = cell < PHONE_CELLS ? undefined : "hidden lg:block";
 
             return url ? (
               // eslint-disable-next-line @next/next/no-img-element
@@ -110,12 +119,15 @@ export function MenuHubHero({
                 alt=""
                 loading="lazy"
                 decoding="async"
-                className="h-full w-full object-cover"
+                className={cn("h-full w-full object-cover", phone)}
               />
             ) : (
               <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]"
+                className={cn(
+                  "bg-[repeating-linear-gradient(135deg,oklch(0.6_0.02_55)_0_9px,oklch(0.68_0.016_58)_9px_18px)] opacity-[0.42]",
+                  phone
+                )}
               />
             );
           })}
@@ -133,7 +145,7 @@ export function MenuHubHero({
         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.16_0.012_55_/_0.96)_0%,oklch(0.16_0.012_55_/_0.86)_52%,oklch(0.16_0.012_55_/_0.6)_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%)]"
         )}
       />
@@ -146,7 +158,9 @@ export function MenuHubHero({
           </span>
         )}
 
-        <h1 className="max-w-[640px] font-serif text-[32px] font-semibold leading-[1.04] tracking-[-0.025em] lg:text-[50px]">
+        {/* 28px on a phone: 32px on a 358px column is five or six words a
+            line, which left "walk in blind." wrapping alone. */}
+        <h1 className="max-w-[640px] font-serif text-[28px] font-semibold leading-[1.06] tracking-[-0.025em] lg:text-[50px] lg:leading-[1.04]">
           {headline}
         </h1>
 
@@ -157,23 +171,27 @@ export function MenuHubHero({
         )}
 
         {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">
+          // One row of four on the phone. It was two by two, which was the
+          // taller half of a 500px hero; at 20px the widest figure ("19,090")
+          // is ~68px and four of them share a 358px column with room.
+          <div className="flex justify-between gap-x-3 pt-2 lg:flex-wrap lg:justify-start 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]">
+              <div key={figure.label} className="min-w-0">
+                <div className="text-xl font-black leading-none tracking-[-0.02em] tabular-nums lg:text-[32px] lg:tracking-[-0.03em]">
                   {figure.value}
                 </div>
-                <div className="mt-[5px] text-xs opacity-[0.72]">{figure.label}</div>
+                <div className="mt-1 text-[11px] leading-tight opacity-[0.72] lg:mt-[5px] lg:text-xs">
+                  {figure.label}
+                </div>
               </div>
             ))}
           </div>
         )}
 
         {(proof || action) && (
-          <div className="mt-auto flex flex-wrap items-center gap-3 pt-5">
+          <div className="mt-auto flex flex-wrap items-center gap-3 pt-4 lg: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]">
+              <span className="inline-flex min-h-11 items-center gap-2.5 rounded-full bg-white/[0.14] px-4 py-2 text-[13px]">
                 {proofIcon}
                 {proof}
               </span>

package/src/components/menu-index-list.stories.tsx

@@ -38,8 +38,13 @@ export const Tail: Story = {
   args: { entries: mockIndexEntries.slice(-8), title: "The tail" },
 };
 
-/** Two columns, not one: thirty-eight rows in one column is four screens. */
+/** One column with the expander: twelve rows, then "Show all 38 cuisines". */
 export const Mobile: Story = {
+  args: {
+    collapsedCount: 12,
+    expandLabels: { showAll: "Show all 38 cuisines", showFewer: "Show fewer" },
+  },
+  parameters: { viewport: { defaultViewport: "mobile1" } },
   decorators: [
     (Story) => (
       <div className="w-[390px] bg-background p-3">