@bearmenu/ui 0.8.7 → 0.8.9

package/src/components/hour-band.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { HourBand, HourBandSkeleton } from "./hour-band";
 import { EventCard } from "./event-card";
+import { EventCompactRow } from "./event-compact-row";
 import type { EventCardLabels, EventFormatters, EventPreview } from "./event-types";
 
 const labels: EventCardLabels = { free: "Free", liveNow: "Live now" };
@@ -35,7 +36,7 @@ const meta: Meta<typeof HourBand> = {
     docs: {
       description: {
         component:
-          "One hour of the timeline: a 52px gutter with a hairline and an hour puck, and that hour's events beside it. The cards inside carry no timestamp of their own — the band is the timestamp, which is why they are rendered with `hideWhen`.",
+          "One hour of the mobile timeline: a 58px gutter with a filled hour chip and a hairline dropping from beneath it, and that hour's rows beside it, ruled between. The rows carry no timestamp of their own — the band is the timestamp, which is why cards render with `hideWhen` and compact rows with `hideTime`.",
       },
     },
   },
@@ -66,7 +67,7 @@ export const Default: Story = {
   },
 };
 
-/** The live hour: green-bordered puck, NOW label, and the content column shifted to clear it. */
+/** The live hour: tinted chip and hairline. The live label is screen-reader only in this variant. */
 export const Live: Story = {
   args: {
     time: "20:00",
@@ -84,6 +85,28 @@ export const Live: Story = {
   },
 };
 
+/** The shipped mobile shape: compact rows, ruled between, inside one band. */
+export const CompactRows: Story = {
+  render: () => (
+    <HourBand time="20:00" isLive liveLabel="Now on">
+      <EventCompactRow
+        event={event("r1", "Klausen Quiz by GOtrivia", "Klausen Pubhouse", 20)}
+        labels={labels}
+        formatters={formatters}
+        hideTime
+        tags={["Drinks", "Games"]}
+      />
+      <EventCompactRow
+        event={event("r2", "Quiz Night at Café del Mars", "Del Mars", 10)}
+        labels={labels}
+        formatters={formatters}
+        hideTime
+        tags={["Games"]}
+      />
+    </HourBand>
+  ),
+};
+
 /** A single event in a quiet hour. */
 export const OneEvent: Story = {
   args: {
@@ -133,9 +156,9 @@ export const StackedHours: Story = {
 };
 
 /**
- * Loading. The puck is omitted rather than blocked out — the hour isn't known
- * until data lands, and a grey lozenge sitting on the axis reads as a real but
- * unreadable timestamp. The hairline alone still says "time axis".
+ * Loading. The chip is blocked out at its fixed 58x24 size — a grey lozenge
+ * of that exact shape reads as "a time goes here" without inventing one — and
+ * the rows mirror `EventCompactRowSkeleton`.
  */
 export const Loading: Story = {
   render: () => <HourBandSkeleton />,

package/src/components/hour-band.tsx

@@ -4,41 +4,39 @@ import * as React from "react";
 import { cn } from "../lib/utils";
 import { Separator } from "./separator";
 import { Skeleton } from "./skeleton";
-import { TimelineHourPuck } from "./timeline-band";
+import {
+  TIMELINE_MOBILE_GUTTER_CLASS,
+  TimelineHourPuck,
+} from "./timeline-band";
 
 /**
  * HourBand — one hour on the timeline's axis, with that hour's events beside it.
  *
- * The design's mobile timeline is deliberately plain: a 52px gutter carrying a
- * hairline and an hour puck, and full-width cards to its right. Nothing else.
- * The cards inside carry no timestamp of their own — this band IS the
- * timestamp, which is why `EventCard` has `hideWhen`.
+ * The mobile timeline is an app list, not a page: a 58px gutter carrying a
+ * filled hour chip with a hairline dropping from beneath it, and the hour's
+ * rows to the right, separated by hairlines of their own. The rows carry no
+ * timestamp — this band IS the timestamp, which is why `EventCard` has
+ * `hideWhen` and `EventCompactRow` has `hideTime`.
  *
- * The puck is the shared `TimelineHourPuck`, sitting ON the line with a
- * background fill punching through it so the hairline reads as continuous
- * behind the label. It used to be a second, hand-rolled copy of the desktop
- * band's puck, and the two had drifted apart — this one borderless and
- * `rounded-md px-1.5`, the desktop one bordered and `rounded-[7px] px-[7px]`.
- * Sharing the object changes this gutter's pixels: the mobile puck now carries
- * a border, which is what makes it read as clipped onto the rail rather than
- * text floating over it, and matches the station on the desktop spine.
+ * The chip is the shared `TimelineHourPuck` in its `chip` variant, so the
+ * desktop spine's station and this gutter's label are one object with two
+ * looks rather than two objects that drift. The hairline starts BELOW the chip
+ * rather than running behind it: a chip is a label at the top of its hour, a
+ * station is a tick on a continuous rail, and the two read differently.
  *
- * `isLive` turns the puck green-bordered and reveals the NOW label beneath it,
- * which is why live bands need extra top padding on the content column — the
- * label occupies space the cards would otherwise start in.
+ * `isLive` tints the chip and the hairline with `--success`; the live label is
+ * kept for screen readers (the chip variant hides it visually). The playhead —
+ * the exact current time — is a separate `TimelinePlayhead` rendered between
+ * bands by the caller, because an hour spans sixty minutes and "now" is one of
+ * them.
  *
- * ── Why the gap is 24px and not 12px ──────────────────────────────────────
- * THE PUCK IS WIDER THAN THE GUTTER IT SITS IN, and the gap is what absorbs
- * the difference. A 12-hour locale renders "09:00 AM" — 8 monospace glyphs at
- * 12.5px (~60px) plus `px-[7px]` twice and a border twice, so ~76px of puck
- * centred on a 52px gutter, overflowing ~12px on each side. At the original
- * `gap-3` that right-hand overflow exactly consumed the gap and the puck's
- * edge landed ON the content column, which read as the hairline colliding
- * with the rows beside it.
- *
- * 24px leaves ~12px of real clearance at the widest label. Do not tighten it
- * back without re-deriving against a 12-hour locale: a 24-hour one ("09:00")
- * is ~30px narrower and hides the problem completely.
+ * ROWS ARE SEPARATED HERE, NOT IN THE ROW. `EventCompactRow` deliberately
+ * draws no divider (its container does — see its docblock), so this band wraps
+ * each child and rules between them. The wrapper, not the child, carries the
+ * rule, so the row's own negative-margin hover wash is untouched. Children are
+ * read with `Children.toArray`, which drops `null`/`false` so a conditional
+ * first row never inherits a rule meant for a second; pass rows as siblings,
+ * not inside a fragment — a fragment is one child and gets one wrapper.
  */
 
 export type HourBandProps = {
@@ -46,80 +44,102 @@ export type HourBandProps = {
   time: string;
   /** Marks this as the hour currently in progress. */
   isLive?: boolean;
-  /** Shown under the puck when live, e.g. "NOW ON". Required to render it. */
+  /** Screen-reader text for the live hour, e.g. "Now on". Required to render it. */
   liveLabel?: string;
-  /** The hour's events. */
+  /** The hour's events. Each direct child is one row or card. */
   children: React.ReactNode;
+  /**
+   * `rows` (default): compact rows, ruled between with a Separator. `cards`:
+   * poster cards, stacked with a 16px gap and no rules — a card is its own
+   * frame, and a hairline between two posters reads as a third object.
+   */
+  layout?: "rows" | "cards";
   className?: string;
 };
 
-export function HourBand({ time, isLive, liveLabel, children, className }: HourBandProps) {
-  const showLiveLabel = isLive && !!liveLabel;
-
+export function HourBand({
+  time,
+  isLive,
+  liveLabel,
+  children,
+  layout = "rows",
+  className,
+}: HourBandProps) {
+  const isCards = layout === "cards";
   return (
-    <div className={cn("flex gap-6 pt-[18px]", className)}>
-      <div className="relative flex w-[52px] shrink-0 justify-center">
-        <Separator orientation="vertical" className="h-full" />
+    <div className={cn("flex gap-3 pt-2.5", className)}>
+      <div className={cn("relative shrink-0", TIMELINE_MOBILE_GUTTER_CLASS)}>
         <TimelineHourPuck
           time={time}
           isLive={isLive}
           liveLabel={liveLabel}
-          className="absolute left-1/2 top-0 w-0"
+          variant="chip"
+        />
+        <Separator
+          orientation="vertical"
+          className={cn(
+            "absolute bottom-[-10px] left-1/2 top-[30px] h-auto -translate-x-1/2",
+            isLive && "bg-success/30",
+          )}
         />
       </div>
 
       <div
-        className={cn(
-          "flex min-w-0 flex-1 flex-col gap-5 pb-2",
-          showLiveLabel ? "pt-[34px]" : "pt-1"
-        )}
+        className={cn("flex min-w-0 flex-1 flex-col", isCards && "gap-4 pb-2")}
       >
-        {children}
+        {React.Children.toArray(children).map((child, index) => (
+          <div key={index}>
+            {!isCards && index > 0 && <Separator />}
+            {child}
+          </div>
+        ))}
       </div>
     </div>
   );
 }
 
 export type HourBandSkeletonProps = {
-  /** Cards to reserve space for. The design's loading frame shows two. */
+  /** Rows to reserve space for. */
   cardCount?: number;
   className?: string;
 };
 
 /**
- * The mobile timeline's loading state, mirroring `HourBand` exactly — same 52px
- * gutter, same hairline, same content gap — so nothing jumps when data lands.
+ * The mobile timeline's loading state, mirroring `HourBand` exactly — same
+ * gutter, same hairline, same row rhythm — so nothing jumps when data lands.
  *
- * The puck is omitted rather than blocked out: the hour is not known until the
- * data arrives, and a grey lozenge on the axis reads as a real, unreadable
- * timestamp. The hairline alone still says "this is a time axis".
- *
- * Card footprints come from the design's own loading frame: a 220px poster with
- * an 16px title bar and a 12px meta bar, then a 170px poster with a 15px title.
+ * The chip is blocked out at its real size rather than omitted: it is a fixed
+ * 58x24 lozenge, so a grey one reads as "a time goes here" without inventing
+ * a time. Row footprints mirror `EventCompactRowSkeleton`.
  */
-export function HourBandSkeleton({ cardCount = 2, className }: HourBandSkeletonProps) {
-  const cards = [
-    { poster: 220, title: "80%", meta: "50%" },
-    { poster: 170, title: "70%", meta: null },
-  ];
-
+export function HourBandSkeleton({
+  cardCount = 2,
+  className,
+}: HourBandSkeletonProps) {
   return (
-    <div className={cn("flex gap-6 pt-[18px]", className)} aria-hidden="true">
-      <div className="relative flex w-[52px] shrink-0 justify-center">
-        <Separator orientation="vertical" className="h-full" />
+    <div className={cn("flex gap-3 pt-2.5", className)} aria-hidden="true">
+      <div className={cn("relative shrink-0", TIMELINE_MOBILE_GUTTER_CLASS)}>
+        <Skeleton className="h-6 w-[58px] rounded-[7px]" />
+        <Separator
+          orientation="vertical"
+          className="absolute bottom-[-10px] left-1/2 top-[30px] h-auto -translate-x-1/2"
+        />
       </div>
 
-      <div className="flex min-w-0 flex-1 flex-col gap-5 pb-2 pt-1">
-        {Array.from({ length: cardCount }).map((_, index) => {
-          const card = cards[index % cards.length];
-          return (
-            <div key={index} className="flex flex-col gap-2.5">
-              <Skeleton className="w-full" style={{ height: card.poster }} />
-              <Skeleton className="h-4" style={{ width: card.title }} />
-              {card.meta && <Skeleton className="h-3" style={{ width: card.meta }} />}
+      <div className="flex min-w-0 flex-1 flex-col">
+        {Array.from({ length: cardCount }).map((_, index) => (
+          <div key={index}>
+            {index > 0 && <Separator />}
+            <div className="flex gap-3 py-[11px]">
+              <Skeleton className="aspect-[4/5] w-16 shrink-0 rounded-[10px]" />
+              <div className="min-w-0 flex-1">
+                <Skeleton className="h-[14px] w-3/4" />
+                <Skeleton className="mt-1.5 h-[11.5px] w-1/2" />
+                <Skeleton className="mt-2 h-[22px] w-16 rounded-full" />
+              </div>
             </div>
-          );
-        })}
+          </div>
+        ))}
       </div>
     </div>
   );

package/src/components/hub-surface.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { HubSurface } from "./hub-surface";
+import { SectionHeader } from "./section-header";
+
+const meta: Meta<typeof HubSurface> = {
+  title: "Menu/HubSurface",
+  component: HubSurface,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-[var(--surface-2,oklch(0.97_0.004_60))] p-3">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The surface a hub section sits on below `lg`. On a phone a hub is an app screen, not a page: each section is a white card on the tinted ground, 18px radius, one shadow, no border. From `lg` up the card dissolves entirely and sections sit flat the way the desktop design draws them — one element, two looks, identical markup inside. Hairlines live inside a card, never across the page.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HubSurface>;
+
+export const Default: Story = {
+  render: () => (
+    <HubSurface>
+      <SectionHeader title="Open right now" />
+      <p className="text-sm text-muted-foreground">
+        Section content, inset by the surface.
+      </p>
+    </HubSurface>
+  ),
+};
+
+/** `flush` drops the inset so a rail or a photograph can bleed to the edge. */
+export const Flush: Story = {
+  render: () => (
+    <HubSurface flush>
+      <div className="px-3.5 pt-4">
+        <SectionHeader title="Browse by cuisine" />
+      </div>
+      <div className="flex gap-3 overflow-x-auto px-3.5 pb-4">
+        {[0, 1, 2].map((card) => (
+          <div key={card} className="h-24 w-40 shrink-0 rounded-xl bg-muted" />
+        ))}
+      </div>
+    </HubSurface>
+  ),
+};
+
+/** Stacked, at the 12px rhythm the hub uses between sections. */
+export const Stacked: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      {["Open right now", "One kitchen worth knowing", "Most named"].map((title) => (
+        <HubSurface key={title}>
+          <SectionHeader title={title} />
+          <div className="h-12 rounded-lg bg-muted" />
+        </HubSurface>
+      ))}
+    </div>
+  ),
+};

package/src/components/hub-surface.tsx

@@ -0,0 +1,40 @@
+import { cn } from "../lib/utils";
+
+/**
+ * HubSurface — the surface a hub section sits on BELOW `lg`.
+ *
+ * On a phone a hub is an app screen, not a page: each section is a white card
+ * on the tinted ground, 18px radius, one card shadow and no border, with 14px
+ * of inset. Hairlines live inside a card, never across the page. From `lg` up
+ * the card dissolves — no fill, no radius, no inset — and the sections sit flat
+ * the way the desktop design draws them. One element, two looks; the section
+ * markup inside is identical at every width.
+ *
+ * `flush` drops the inset so a section whose content bleeds to the card edge —
+ * a snap rail, a full-width photograph — can pad its own header and let the
+ * rest run.
+ *
+ * Generalised out of the events hub's `EventsHubCard`, which had the same job
+ * and lived in the app. Nothing here is menu- or event-shaped.
+ */
+
+export type HubSurfaceProps = {
+  flush?: boolean;
+  className?: string;
+  children: React.ReactNode;
+};
+
+export function HubSurface({ flush, className, children }: HubSurfaceProps) {
+  return (
+    <section
+      className={cn(
+        "rounded-[18px] border border-border bg-card shadow-none",
+        flush ? "overflow-hidden" : "px-3.5 py-4",
+        "lg:overflow-visible lg:rounded-none lg:bg-transparent lg:p-0 lg:shadow-none",
+        className
+      )}
+    >
+      {children}
+    </section>
+  );
+}

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

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MenuFamilyCard } from "./menu-family-card";
+import { mockDrinkFamily, mockFamily } from "./menu-mocks";
+
+const itemLabels = {
+  currency: "lei",
+  mentions: (count: number) => `${count} mentions`,
+  signature: "SIGNATURE",
+  mentioned: "MENTIONED",
+};
+const formatPrice = (amount: number) => String(amount);
+
+const labels = {
+  venueUnit: "KITCHENS",
+  mostNamed: "Most named",
+  priceBand: "kitchen price band",
+};
+
+const meta: Meta<typeof MenuFamilyCard> = {
+  title: "Menu/MenuFamilyCard",
+  component: MenuFamilyCard,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[300px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A browsable grouping of venues — a cuisine on the dishes tab, a drink family on the drinks tab. Two halves with two jobs: the dark panel is for scanning a row of four (one number, one name, the groups the family consists of, over a mosaic of its venues), and the white half underneath answers what you would actually order, as the production `MenuItem`. Both halves count VENUES: cuisine exists only on places, so a card counting dishes cannot be built.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuFamilyCard>;
+
+export const Default: Story = {
+  args: {
+    family: mockFamily,
+    labels,
+    itemLabels,
+    formatPrice,
+    href: "/top/italian",
+    hue: "oklch(0.55 0.15 40)",
+    priceBandLabel: "32–84 lei",
+  },
+};
+
+/** The drinks tab. Same card, different unit and vocabulary. */
+export const DrinkFamily: Story = {
+  args: {
+    family: mockDrinkFamily,
+    labels: { venueUnit: "BARS", mostNamed: "Most named", priceBand: "bar price band" },
+    itemLabels,
+    formatPrice,
+    href: "/top/baruri",
+    hue: "oklch(0.5 0.13 240)",
+    priceBandLabel: "18–54 lei",
+  },
+};
+
+/** A one-venue cuisine: the count is honest, and the mosaic repeats one photo. */
+export const Sparse: Story = {
+  args: {
+    family: {
+      slug: "portuguese",
+      name: "Portuguese",
+      venue_count: 1,
+      chips: [{ slug: "seafood-dish", label: "seafood" }],
+      signature: mockFamily.signature,
+    },
+    labels,
+    itemLabels,
+    formatPrice,
+    href: "/top/restaurante",
+    hue: "oklch(0.52 0.13 340)",
+    priceBandLabel: "42–88 lei",
+  },
+};
+
+/** The row of four the card is designed to be scanned in. */
+export const Row: Story = {
+  render: () => (
+    <div className="grid grid-cols-4 gap-5">
+      {[mockFamily, mockDrinkFamily, mockFamily, mockDrinkFamily].map((family, index) => (
+        <MenuFamilyCard
+          key={index}
+          family={family}
+          labels={labels}
+          itemLabels={itemLabels}
+          formatPrice={formatPrice}
+          href={`/top/${family.slug}`}
+          hue="oklch(0.55 0.15 40)"
+          priceBandLabel="32–84 lei"
+        />
+      ))}
+    </div>
+  ),
+  decorators: [
+    (Story) => (
+      <div className="w-[1200px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};