@bearmenu/ui 0.8.13 → 0.8.14

package/src/components/segmented-nav.tsx

@@ -29,13 +29,28 @@ import { cn } from "../lib/utils";
  * which wins via `cn`'s merge.
  */
 
+/**
+ * What a segment's icon render function receives. `replayToken` bumps on
+ * POINTER DOWN on that segment — before any navigation exists — which is what
+ * a character-animated glyph (`MotionIcon`) needs to answer the finger rather
+ * than the route change that follows it.
+ */
+export type SegmentedNavIconState = {
+  active: boolean;
+  replayToken: number;
+};
+
 export type SegmentedNavItem = {
   /** Stable identity, compared against `activeId`. */
   id: string;
   href: string;
   label: string;
-  /** Rendered before the label. Size it at the call site (the design uses 15–16px). */
-  icon?: React.ReactNode;
+  /**
+   * Rendered before the label. Size it at the call site (the design uses
+   * 15–16px). A function receives the segment's state, for glyphs that
+   * perform on touch: `({ active, replayToken }) => <MotionWine active={active} replayToken={replayToken} />`.
+   */
+  icon?: React.ReactNode | ((state: SegmentedNavIconState) => React.ReactNode);
 };
 
 /**
@@ -48,6 +63,7 @@ export type SegmentedNavLinkProps = {
   children: React.ReactNode;
   "aria-current"?: "page";
   onClick?: () => void;
+  onPointerDown?: () => void;
 };
 
 function DefaultLink({ href, ...props }: SegmentedNavLinkProps) {
@@ -60,7 +76,12 @@ export type SegmentedNavProps = {
   activeId: string;
   /** Accessible name for the nav landmark. Translated by the caller. */
   label: string;
-  /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
+  /**
+   * Defaults to a plain `<a>`. Pass `next/link` in a Next app. Must be a
+   * stable reference (module scope, not an inline arrow): a new component
+   * identity per render remounts every segment, and with a function `icon`
+   * that cuts the pointer-down gesture off at the click.
+   */
   linkComponent?: React.ComponentType<SegmentedNavLinkProps>;
   /** Fired with the segment id on click — analytics, haptics. Never navigation. */
   onSelect?: (id: string) => void;
@@ -75,6 +96,12 @@ export function SegmentedNav({
   onSelect,
   className,
 }: SegmentedNavProps) {
+  // One counter per segment, bumped on pointer down. Only a function `icon`
+  // ever reads it; a static icon costs nothing but the state slot.
+  const [replayTokens, setReplayTokens] = React.useState<Record<string, number>>({});
+  const replay = (id: string) =>
+    setReplayTokens((tokens) => ({ ...tokens, [id]: (tokens[id] ?? 0) + 1 }));
+
   return (
     <nav
       aria-label={label}
@@ -86,12 +113,17 @@ export function SegmentedNav({
     >
       {items.map((item) => {
         const isActive = item.id === activeId;
+        const icon =
+          typeof item.icon === "function"
+            ? item.icon({ active: isActive, replayToken: replayTokens[item.id] ?? 0 })
+            : item.icon;
         return (
           <LinkComponent
             key={item.id}
             href={item.href}
             aria-current={isActive ? "page" : undefined}
             onClick={onSelect ? () => onSelect(item.id) : undefined}
+            onPointerDown={typeof item.icon === "function" ? () => replay(item.id) : undefined}
             className={cn(
               "inline-flex h-9 flex-1 items-center justify-center gap-1.5 rounded-md px-3",
               "text-[13px] font-semibold lg:flex-none lg:text-sm",
@@ -103,7 +135,7 @@ export function SegmentedNav({
                 : "text-muted-foreground hover:text-foreground"
             )}
           >
-            {item.icon}
+            {icon}
             {item.label}
           </LinkComponent>
         );

package/src/globals.css

@@ -234,6 +234,17 @@ h6 {
   --z-dropdown: 1200;
   --z-tooltip: 1300;
   --z-toast: 1400;
+
+  /* Drop-shadow filter for a glyph on the neutral placeholder panel the card
+     photo fallbacks share (`from-muted to-border`). Consumed via
+     `NEUTRAL_ICON_FILTER` in `lib/icon-depth.ts`. A black shadow of any spread
+     on a near-white panel pools under the glyph and reads as grime; the fix is
+     hue and spread, not weakness: both stops are a deep neutral dropped to
+     0.38 L so it still has weight, and the lift caps at 4px. Alpha stays high
+     enough to read at a 40px glyph — a warm shadow carries far more opacity
+     than a black one before it looks dirty. */
+  --icon-depth-neutral: drop-shadow(0 1px 1px oklch(0.38 0 0 / 0.29))
+    drop-shadow(0 2px 4px oklch(0.38 0 0 / 0.22));
 }
 
 .dark {
@@ -313,6 +324,21 @@ h6 {
      The inset well is unchanged between themes, so it has no override. */
   --shadow-card-image: 0 4px 14px rgba(0, 0, 0, 0.45);
   --shadow-card-image-hover: 0 12px 28px rgba(0, 0, 0, 0.55);
+
+  /* Dark placeholder panel is oklch(0.22→0.32) with a light glyph — a wide
+     halo does nothing against a dark surface, so it's contact stops only,
+     pushed harder since the panel absorbs most of the shadow. */
+  --icon-depth-neutral: drop-shadow(0 1px 1px oklch(0 0 0 / 0.47))
+    drop-shadow(0 2px 4px oklch(0 0 0 / 0.34));
+}
+
+/* Named 11px step (`text-2xs`) for micro-labels: overlay pills, hour
+ * sub-headers, hype badge, concept chip. One token instead of scattered
+ * `text-[11px]` arbitrary values — the smallest size we allow; anything
+ * below is illegible. */
+@theme {
+  --text-2xs: 0.6875rem;
+  --text-2xs--line-height: 1rem;
 }
 
 @theme inline {

package/src/lib/grade.test.ts

@@ -0,0 +1,82 @@
+import { describe, it, expect } from "vitest";
+import {
+  resolveGradeBand,
+  formatGrade,
+  shouldShowGradeNumber,
+  resolveDimensionTone,
+} from "./grade";
+
+describe("resolveGradeBand", () => {
+  it("returns 'exceptional' from 9.0 up to 10", () => {
+    expect(resolveGradeBand(9.0)).toBe("exceptional");
+    expect(resolveGradeBand(10)).toBe("exceptional");
+  });
+
+  it("returns 'great' across 7.5–8.9", () => {
+    expect(resolveGradeBand(7.5)).toBe("great");
+    expect(resolveGradeBand(8.9)).toBe("great");
+  });
+
+  it("returns 'good' across 6.0–7.4", () => {
+    expect(resolveGradeBand(6.0)).toBe("good");
+    expect(resolveGradeBand(7.4)).toBe("good");
+  });
+
+  it("returns 'decent' across 5.0–5.9", () => {
+    expect(resolveGradeBand(5.0)).toBe("decent");
+    expect(resolveGradeBand(5.9)).toBe("decent");
+  });
+
+  it("returns 'weak' below 5.0", () => {
+    expect(resolveGradeBand(4.9)).toBe("weak");
+    expect(resolveGradeBand(1)).toBe("weak");
+  });
+});
+
+describe("formatGrade", () => {
+  it("keeps one decimal of precision", () => {
+    expect(formatGrade(8.6)).toBe("8.6");
+    expect(formatGrade(7.45)).toBe("7.5");
+  });
+
+  it("drops a trailing .0 so whole grades read cleanly", () => {
+    expect(formatGrade(7)).toBe("7");
+    expect(formatGrade(10)).toBe("10");
+  });
+
+  it("clamps to the 1–10 Romanian school scale", () => {
+    expect(formatGrade(11.2)).toBe("10");
+    expect(formatGrade(0.4)).toBe("1");
+  });
+});
+
+describe("resolveDimensionTone", () => {
+  it("is 'strong' at 75 and above", () => {
+    expect(resolveDimensionTone(75)).toBe("strong");
+    expect(resolveDimensionTone(98)).toBe("strong");
+  });
+
+  it("is 'adequate' across 50–74", () => {
+    expect(resolveDimensionTone(50)).toBe("adequate");
+    expect(resolveDimensionTone(74)).toBe("adequate");
+  });
+
+  it("is 'low' below 50", () => {
+    expect(resolveDimensionTone(49)).toBe("low");
+    expect(resolveDimensionTone(20)).toBe("low");
+  });
+});
+
+describe("shouldShowGradeNumber", () => {
+  it("hides the number when the backend recommends against it", () => {
+    expect(shouldShowGradeNumber({ show_number: false })).toBe(false);
+  });
+
+  it("shows the number when recommended", () => {
+    expect(shouldShowGradeNumber({ show_number: true })).toBe(true);
+  });
+
+  it("defaults to showing the number when unspecified", () => {
+    expect(shouldShowGradeNumber({})).toBe(true);
+  });
+});

package/src/lib/grade.ts

@@ -0,0 +1,76 @@
+/**
+ * Pure helpers for the ReviewsDigest `grade` (1–10 Romanian school scale,
+ * food-anchored). Shared by `<GradeAtom>` and any surface that demotes the
+ * Google star in favour of the grade.
+ */
+
+/** Colour/quality band, derived from `grade.overall`. The label text comes
+ *  from the caller's `GradeAtomLabels`; the band only drives the visual tone. */
+export type GradeBand = "exceptional" | "great" | "good" | "decent" | "weak";
+
+/** Map a 1–10 overall score to its band. Boundaries are inclusive at the low end
+ *  (9.0 → exceptional, 7.5 → great, 6.0 → good, 5.0 → decent, below 5 → weak). */
+export function resolveGradeBand(overall: number): GradeBand {
+  if (overall >= 9) return "exceptional";
+  if (overall >= 7.5) return "great";
+  if (overall >= 6) return "good";
+  if (overall >= 5) return "decent";
+  return "weak";
+}
+
+/** Format a grade for display: clamp to the 1–10 scale, keep one decimal of
+ *  precision, and drop a trailing `.0` so whole grades read as "7" not "7.0". */
+export function formatGrade(overall: number): string {
+  const clamped = Math.min(10, Math.max(1, overall));
+  const rounded = Math.round(clamped * 10) / 10;
+  return rounded.toFixed(1).replace(/\.0$/, "");
+}
+
+/** The backend `show_number` is a display recommendation: when explicitly
+ *  false, fall back to the soft state instead of the number. Unspecified → show. */
+export function shouldShowGradeNumber(grade: { show_number?: boolean }): boolean {
+  return grade.show_number !== false;
+}
+
+/**
+ * Whether `<GradeAtom>` will render anything for this grade at this size — the
+ * predicate every caller must gate on before choosing the grade over its own
+ * Google-star fallback.
+ *
+ * `overall == null` has always meant "no grade, show the star". The `xs` rule
+ * is newer: at card size the right-hand slot is a 2–3 glyph METRIC slot, and
+ * the soft state is a two-word sentence ("Worth exploring" / "Merită
+ * explorat"). Rendered there it wrapped inside its own fixed-height pill and
+ * pushed the title into a hard truncation. The sentence still renders at `sm`+
+ * (drawer, hero) where there is room for it.
+ *
+ * Callers used to gate on `grade?.overall != null` directly, which is why this
+ * exists as a shared function: with the size rule added, that check no longer
+ * predicts whether the atom renders, and a caller using the old one lands on
+ * an empty slot instead of falling through to its star.
+ *
+ * Lives here rather than in `grade-atom.tsx` so SERVER components can call it —
+ * everything exported from a `"use client"` module is a client reference.
+ *
+ * A type predicate, so the true branch also narrows away the `undefined` that
+ * `place.reviews_digest?.grade` carries and the caller can pass it straight to
+ * `<GradeAtom grade={...}>`.
+ */
+export function showsGradeAtom<T extends { overall?: number | null; show_number?: boolean }>(
+  grade: T | null | undefined,
+  size: "xs" | "sm" | "md" | "lg"
+): grade is T {
+  if (grade?.overall == null) return false;
+  return size !== "xs" || shouldShowGradeNumber(grade);
+}
+
+/** Tone for a single 0–100 dimension score, driving the page dimension-bar
+ *  colour: strong (≥75) = accent, adequate (50–74) = muted, low (<50) = amber
+ *  (a soft "fair warning", never error-red). */
+export type DimensionTone = "strong" | "adequate" | "low";
+
+export function resolveDimensionTone(score: number): DimensionTone {
+  if (score >= 75) return "strong";
+  if (score >= 50) return "adequate";
+  return "low";
+}

package/src/lib/icon-depth.ts

@@ -0,0 +1,35 @@
+/**
+ * Layered drop-shadow filter that "raises" a flat icon off a tinted surface.
+ *
+ * Two stops stacked: a tight 1px close shadow welds the icon to the surface
+ * (so it doesn't float disconnected), then a wider 3px/8px lift gives it
+ * presence. The combo is what makes the homepage cuisine tiles read as
+ * embossed plaques instead of stickers — reuse it anywhere an icon sits on
+ * a warm gradient (entity-card photo fallbacks, etc).
+ *
+ * Designed for white / light icons on the warm `--gradient-primary` family.
+ * Don't apply to icons on light surfaces — the dark drop-shadow stops will
+ * read as muddy outlines instead of depth.
+ */
+export const RAISED_ICON_FILTER =
+  "drop-shadow(0 1px 1px oklch(0 0 0 / 0.6)) drop-shadow(0 3px 8px oklch(0 0 0 / 0.4))";
+
+/**
+ * The light-surface counterpart, for glyphs on the neutral placeholder panel
+ * (`from-muted to-border`) that entity-card photo fallbacks share.
+ *
+ * `RAISED_ICON_FILTER` is black and wide — correct under a white icon on the
+ * brown gradient, wrong everywhere else. On a near-white panel its 8px black
+ * stop pools under the glyph and reads as grime rather than lift.
+ *
+ * What fixes that is hue and spread, not just less shadow: this one is a deep
+ * brown (same 45° hue as `--shadow-card`) capped at a 4px lift. Halving the
+ * spread is what kills the smudge, which then buys enough headroom on alpha
+ * for the glyph to still read as raised rather than washed out — a warm
+ * shadow tolerates far more opacity than a black one before it looks dirty.
+ *
+ * Resolves through a token (`--icon-depth-neutral` in `globals.css`), so dark
+ * mode gets its own value — there the panel is already dark and a halo does
+ * nothing, so it collapses to one contact stop.
+ */
+export const NEUTRAL_ICON_FILTER = "var(--icon-depth-neutral)";

package/src/lib/overlay-pill.ts

@@ -0,0 +1,29 @@
+/**
+ * ONE geometry for every pill that sits on a card image — places and events.
+ *
+ * These had drifted into four different sizes on the event card (hype at
+ * `min-h-8`, Free at `text-xs px-2.5 py-1`, concept and tags at `text-[10px]
+ * px-2 py-0.5`) and three more on the place card (Trending at `min-h-8`, the
+ * Closed pill at `text-xs py-0.5`, the open dot at `h-2`), so corners of the
+ * same card — and cards sitting in the same rail — read as unrelated systems.
+ *
+ * An explicit `h-6` rather than a padding-derived height is what actually
+ * guarantees they match: the hype pill contains a gauge glyph, Trending
+ * contains a flame, and the rest contain 12px icons, so equal padding would
+ * still produce unequal heights.
+ *
+ * 24px is deliberate over the 32px `heatPillVariants` `md`. The only argument
+ * for 32 was the tap target on the interactive Trending pill, and that pill
+ * already carries an `after:-inset-2` hit-area expander (~40px effective)
+ * which solves it independently of the visual size. 24px is also exactly the
+ * WCAG 2.5.8 (AA) minimum on its own, before the expander.
+ *
+ * Pair with `Badge` (`variant="overlay"` is the scrim: `bg-foreground/80
+ * text-background`) rather than hand-rolled spans, which is what let these
+ * drift in the first place. Only the radius is overridden — the `Badge`
+ * default is `rounded-lg` and pills on photography read better fully round.
+ */
+export const OVERLAY_PILL = "h-6 gap-1 rounded-full px-2 text-2xs font-semibold shadow-sm";
+
+/** Icon size inside an `OVERLAY_PILL`. */
+export const OVERLAY_ICON = "h-3 w-3 shrink-0";

package/dist/components/menu-family-tiles.d.ts

@@ -1,19 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { MenuFamilyTile, MenuLinkComponent } from './menu-types.js';
-import 'react';
-import './place-types.js';
-
-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;
-};
-declare function MenuFamilyTiles({ tiles, all, linkComponent: LinkComponent, className, }: MenuFamilyTilesProps): react_jsx_runtime.JSX.Element;
-
-export { MenuFamilyTiles, type MenuFamilyTilesProps };

package/dist/components/menu-family-tiles.js

@@ -1,57 +0,0 @@
-import { PhotoGround } from '../chunk-CNJQUHCU.js';
-import { cn } from '../chunk-FEK5XGZW.js';
-import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-function DefaultLink(_a) {
-  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
-  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
-}
-var 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";
-var 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";
-var 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-['']";
-function MenuFamilyTiles({
-  tiles,
-  all,
-  linkComponent: LinkComponent = DefaultLink,
-  className
-}) {
-  const cells = all ? [...tiles, all] : tiles;
-  return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-2 gap-3 lg:grid-cols-4 lg:gap-3.5", className), children: cells.map((tile) => /* @__PURE__ */ jsxs(
-    LinkComponent,
-    {
-      href: tile.href,
-      className: cn(TILE, SCRIM),
-      style: tile.gradient ? { backgroundImage: tile.gradient } : void 0,
-      children: [
-        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: POLAROID, children: 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
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: tile.photoUrl,
-              alt: "",
-              decoding: "async",
-              className: "absolute inset-0 h-full w-full object-cover"
-            }
-          )
-        ) : /* @__PURE__ */ jsx(
-          PhotoGround,
-          {
-            photos: [void 0],
-            initials: tile.label.charAt(0),
-            mode: "stack",
-            glyphClassName: "text-[44px]"
-          }
-        ) }),
-        /* @__PURE__ */ jsx("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]", children: tile.label }),
-        tile.countLabel && /* @__PURE__ */ jsx("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]", children: tile.countLabel })
-      ]
-    },
-    tile.slug
-  )) });
-}
-
-export { MenuFamilyTiles };

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

@@ -1,54 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

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