@bearmenu/ui 0.8.8 → 0.8.10

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

@@ -0,0 +1,191 @@
+import { Wallet } from "lucide-react";
+import { cn } from "../lib/utils";
+import { HueChip } from "./hue-chip";
+import type { MenuFamilyPreview, MenuLinkComponent, MenuLinkProps } from "./menu-types";
+import { PHOTO_GROUND, PhotoGround } from "./photo-ground";
+
+/**
+ * MenuFamilyCard — a browsable grouping of venues: a cuisine on the dishes tab,
+ * a drink family on the drinks tab. The hub's doorway to a family.
+ *
+ * ## A doorway, not a summary
+ *
+ * The cuisines index's `MenuFamilyBlock` is the family's SUMMARY: photography,
+ * chips, a price band and three venues. This card is the same family drawn
+ * one step earlier, in a row of three on the hub, where the reader is choosing
+ * a family and not yet a venue — so it carries the same photography, the same
+ * chips and the same "Browse" action, and lists no venue. A venue on the hub
+ * card was tried and it was the first venue's signature relabelled as the
+ * family's most named, which was a lie at three-card width.
+ *
+ * ## The count does the scanning
+ *
+ * The card is one number, one name and the groups the family consists of,
+ * over a mosaic of its venues. The count is 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 chips are plain labels: at three cards across, chips carrying
+ * numbers turned the panel into a table, and the numbers were kitchens, which
+ * nobody reads a chip as.
+ *
+ * ## One link
+ *
+ * The whole card is the link and the "Browse" pill is its visible affordance,
+ * not a second link — a pill inside a link is a nested anchor, and a pill that
+ * is the only link leaves the photography, the number and the name inert.
+ */
+
+/** @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;
+  /**
+   * Price-band caption, e.g. "kitchen price band". Never drawn — it names the
+   * pill for a screen reader, which would otherwise be read two numbers and a
+   * currency.
+   */
+  priceBand: string;
+  /** The action pill, e.g. "Browse Italian". Sits on the photography — keep it short. */
+  browse: string;
+};
+
+export type MenuFamilyCardProps = {
+  family: MenuFamilyPreview;
+  labels: MenuFamilyCardLabels;
+  href: string;
+  /** Finished CSS colour for the chips. */
+  hue?: string;
+  /** Finished CSS gradient — the family's colour over the mosaic. */
+  gradient?: 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 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;
+
+/** 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
+ * and made the type unreadable the moment there were real photographs behind
+ * it. Literal rather than `var(--scrim)`: that token lives in the app's
+ * stylesheet, not this package's.
+ */
+const INK =
+  "bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0.78)_0%,oklch(0.16_0.012_55_/_0.5)_34%,oklch(0.16_0.012_55_/_0.86)_62%,oklch(0.16_0.012_55_/_0.96)_100%)]";
+
+export function MenuFamilyCard({
+  family,
+  labels,
+  href,
+  hue,
+  gradient,
+  priceBandLabel,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: MenuFamilyCardProps) {
+  const photos = family.venue_photo_urls ?? [];
+  /* Fewer venues than cells: the mosaic repeats rather than leaving bare
+     ground, because under the tint and the ink a repeated room is a texture
+     and an empty cell is a hole. No venues at all: one cell, the initial. */
+  const tiles = photos.length
+    ? Array.from({ length: MOSAIC_CELLS }, (_, cell) => photos[cell % photos.length])
+    : [undefined];
+
+  return (
+    <LinkComponent
+      href={href}
+      className={cn(
+        "group dark relative isolate flex min-h-[280px] flex-col justify-between overflow-hidden rounded-[14px] border border-border p-3.5",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white",
+        GROUND,
+        className
+      )}
+    >
+      {/* ── Layer 1: the mosaic ─────────────────────────────────────────── */}
+      <PhotoGround
+        className="-z-30"
+        photos={tiles}
+        initials={family.name.charAt(0)}
+        mosaicClassName={photos.length ? "grid-cols-2 grid-rows-2" : "grid-cols-1"}
+        gradient={gradient}
+      />
+
+      {/* ── Layer 2: the frost ──────────────────────────────────────────── */}
+      <span aria-hidden className={cn("absolute inset-0 -z-20", FROST)} />
+
+      {/* ── Layer 3: the ink ────────────────────────────────────────────── */}
+      <span aria-hidden className={cn("absolute inset-0 -z-10", INK)} />
+
+      {/* ── The content, floating ───────────────────────────────────────── */}
+      <span className="block text-white">
+        <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 uppercase tracking-[0.12em] opacity-80">
+          {labels.venueUnit}
+        </span>
+      </span>
+
+      <span className="block">
+        <span className="block text-balance font-serif text-[24px] font-semibold leading-tight tracking-[-0.02em] text-white">
+          {family.name}
+        </span>
+
+        {(priceBandLabel || (family.chips?.length ?? 0) > 0) && (
+          <span className="mt-2.5 flex flex-wrap items-center gap-1.5">
+            {priceBandLabel && (
+              /* No hue: a fact about money, not about the family. In the dark
+                 scope `HueChip`'s `--muted` fallback is the dark pill. */
+              <HueChip
+                className="font-bold tabular-nums"
+                aria-label={`${labels.priceBand}: ${priceBandLabel}`}
+                icon={<Wallet className="h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden />}
+              >
+                {priceBandLabel}
+              </HueChip>
+            )}
+            {family.chips?.map((chip) => (
+              <HueChip key={chip.slug} hue={hue}>
+                {chip.label}
+              </HueChip>
+            ))}
+          </span>
+        )}
+
+        {/* The action, as a frosted 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">
+          {labels.browse}
+        </span>
+      </span>
+    </LinkComponent>
+  );
+}

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-filter-chips.stories.tsx

@@ -0,0 +1,107 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Clock, Leaf, MapPin, Moon, Sun, Wallet } from "lucide-react";
+import { MenuFilterChips, MenuFilterSummary } from "./menu-filter-chips";
+import { mockFilterChips } from "./menu-mocks";
+
+const icons: Record<string, React.ReactNode> = {
+  open: <Clock className="h-3 w-3" />,
+  price: <Wallet className="h-3 w-3" />,
+  terrace: <Sun className="h-3 w-3" />,
+  veg: <Leaf className="h-3 w-3" />,
+  late: <Moon className="h-3 w-3" />,
+  centru: <MapPin className="h-3 w-3" />,
+};
+
+const chips = mockFilterChips.map((chip) => ({ ...chip, icon: icons[chip.key] }));
+
+const meta: Meta<typeof MenuFilterChips> = {
+  title: "Menu/MenuFilterChips",
+  component: MenuFilterChips,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Every chip counts KITCHENS, whatever facet is behind it — a dietary chip reads *has a vegetarian dish* and counts venues, not dishes. The unit is stated once at the head of the row and never again; the earlier version mixed venue counts and item counts and you could not tell what a number meant without re-reading the label that produced it. One line in every state: the chips scroll under a `ScrollFade`, and *More filters* is pinned opposite the unit label rather than wrapping.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuFilterChips>;
+
+function Interactive({ initial }: { initial: typeof chips }) {
+  const [state, setState] = useState(initial);
+  const active = state.filter((chip) => chip.active).length;
+
+  return (
+    <>
+      <MenuFilterChips
+        chips={state}
+        unitLabel="KITCHENS · 247"
+        moreLabel="More filters"
+        onMore={() => {}}
+        ariaLabel="Filter kitchens"
+        onToggle={(key) =>
+          setState((chips) =>
+            chips.map((chip) => (chip.key === key ? { ...chip, active: !chip.active } : chip))
+          )
+        }
+      />
+      {active > 0 && (
+        <MenuFilterSummary
+          summary={
+            <>
+              {active} filters · <b>34 of 247 kitchens</b> match
+            </>
+          }
+          clearLabel="Clear all"
+          onClear={() => setState((chips) => chips.map((c) => ({ ...c, active: false })))}
+        />
+      )}
+    </>
+  );
+}
+
+export const Default: Story = { render: () => <Interactive initial={chips} /> };
+
+/**
+ * A chip that has gone empty.
+ *
+ * The facets endpoint omits values that would match nothing, so this state
+ * cannot arrive from the API — a chip only becomes `empty` client-side, after
+ * it was offered and the reader's next filter emptied it. It stays TAPPABLE:
+ * pressing it swaps it in and drops whichever active filter conflicts. Disabling
+ * it would refuse the reader the thing they asked for and give no reason.
+ */
+export const Dead: Story = {
+  render: () => (
+    <MenuFilterChips
+      chips={chips.map((chip) =>
+        chip.key === "late" ? { ...chip, count: 0, empty: true } : chip
+      )}
+      unitLabel="KITCHENS · 247"
+      onToggle={() => {}}
+    />
+  ),
+};
+
+export const Mobile: Story = {
+  render: () => <Interactive initial={chips} />,
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};