Update handoff doc

web/frontend/.storybook/main.ts

@@ -19,6 +19,18 @@ const config: StorybookConfig = {
         '../stories/BreweryMap.stories.tsx',
         '../stories/NearbyBreweryMap.stories.tsx',
         '../stories/Themes.stories.tsx',
+        '../stories/StarRating.stories.tsx',
+        '../stories/SidebarCard.stories.tsx',
+        '../stories/BreweryDetailsCard.stories.tsx',
+        '../stories/BeerStyleBreakdownCard.stories.tsx',
+        '../stories/CommunityStatsCard.stories.tsx',
+        '../stories/BreweryLocationMap.stories.tsx',
+        '../stories/LocationCard.stories.tsx',
+        '../stories/BreweryHeaderCard.stories.tsx',
+        '../stories/YourRatingCard.stories.tsx',
+        '../stories/BeerListCard.stories.tsx',
+        '../stories/CommentItem.stories.tsx',
+        '../stories/CommentsCard.stories.tsx',
     ],
     addons: [
         '@chromatic-com/storybook',

web/frontend/app/features/breweries/BREWERY_HANDOFF.md

@@ -0,0 +1,101 @@
+# Brewery feature: data requirements
+
+Covers `/breweries` (`routes/breweries.tsx`) and `/breweries/:id`
+(`routes/brewery-detail.tsx`). Both routes are built and live. This document
+lists what's real vs. filler, and what backend work closes each gap.
+
+## Status legend
+
+- ✅ **Available**: real data, wired up.
+- ⚠️ **Partial**: endpoint exists but is missing a field the design needs.
+- ❌ **Missing**: no backend support; page shows filler or local-only state.
+
+## Breweries index (`/breweries`)
+
+### Featured brewery
+
+| Field                                | Status | Source                            | Gap                                                                                                    |
+| ------------------------------------ | ------ | --------------------------------- | ------------------------------------------------------------------------------------------------------ |
+| Name, description, address, location | ✅     | `GET /api/brewery` (`BreweryDto`) |                                                                                                        |
+| "Editorially featured" selection     | ❌     | none (defaults to newest brewery) | No `IsFeatured` flag or rotation concept. Needs a field + admin toggle, or a scheduled rotation query. |
+| Founded year                         | ❌     | none                              | No founding-date column (distinct from `CreatedAt`, which is post-creation time).                      |
+| Beers listed count                   | ❌     | none                              | Blocked on the Beers gap below.                                                                        |
+| House style                          | ❌     | none                              | No style/tag field, and no aggregate over a brewery's beers' styles.                                   |
+
+### Breweries near you
+
+| Field                                                   | Status | Source                                                                                  | Gap                                                                                                            |
+| ------------------------------------------------------- | ------ | --------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| Nearby breweries by coordinates + radius                | ✅     | `GET /api/brewery/locations/nearby?latitude&longitude&rangeInMetres`                    |                                                                                                                |
+| Distance from search center                             | ✅     | `SimplifiedBreweryDto.DistanceMetres`, computed server-side via `geography::STDistance` |                                                                                                                |
+| One-line note per brewery                               | ❌     | none                                                                                    | `SimplifiedBreweryDto` has no description-like field. Needs a tagline field, or a truncated `Description`.     |
+| User's current location                                 | ✅     | Browser Geolocation API                                                                 |                                                                                                                |
+| Fallback region (before permission granted / on denial) | ⚠️     | Falls back to the featured brewery's coordinates                                        | Works, but isn't a deliberate default. A real deployment wants a configured default (e.g. per-tenant HQ city). |
+| Manual location entry ("Change location")               | ❌     | Re-requests browser geolocation only                                                    | No geocoding/place-search endpoint to resolve a typed address to coordinates.                                  |
+| Search radius                                           | ✅     | Client-side state (10–150 km slider), passed as `rangeInMetres`                         |                                                                                                                |
+
+### Recently added
+
+✅ Fully real: `GET /api/brewery`, already sorted newest-first. No gaps.
+
+### Directory CTA
+
+| Field                                   | Status | Source                | Gap                                                                                                                            |
+| --------------------------------------- | ------ | --------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| Total partner brewery count             | ❌     | Filler number (`128`) | No count endpoint. Needs `GET /api/brewery/count` rather than fetching the full list to measure it.                            |
+| Filter by country / region / beer style | ❌     | Copy only             | Describes the future directory page's capability, not a data need of this page. Implies the directory will need filter params. |
+
+## Brewery detail (`/breweries/:id`)
+
+### Header, location, dates
+
+| Field                                   | Status | Source                                                                               |
+| --------------------------------------- | ------ | ------------------------------------------------------------------------------------ |
+| Name, description, address, coordinates | ✅     | `GET /api/brewery/{id}` (`BreweryDto`)                                               |
+| Created / updated dates                 | ✅     | `BreweryDto`                                                                         |
+| Founded year, brewery type, website     | ❌     | `FILLER_BREWERY_META`: `BreweryPost` has no `FoundedAt`, `Type`, or `Website` column |
+
+### Beers, style breakdown
+
+| Field                        | Status | Source                                  | Gap                                                                           |
+| ---------------------------- | ------ | --------------------------------------- | ----------------------------------------------------------------------------- |
+| Beers belonging to a brewery | ❌     | `FILLER_BEERS`                          | See "Beers feature is empty" below.                                           |
+| Beer style breakdown         | ❌     | Derived client-side from `FILLER_BEERS` | Blocked on the same gap; otherwise an aggregate query over a brewery's beers. |
+
+### Likes, ratings, comments
+
+| Field                       | Status | Source                         | Gap                                                                                                                                                                             |
+| --------------------------- | ------ | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Brewery like/unlike + count | ❌     | Local component state          | No like concept in the schema. Needs a join table (composite `BreweryPostId`/`UserAccountId`, like `UserFollow`).                                                               |
+| Your rating (1–5) + average | ❌     | Local component state          | No brewery rating table/endpoint.                                                                                                                                               |
+| Comments (list + post)      | ❌     | `FILLER_COMMENTS`, local state | No `BreweryPostComment` table. `BeerPostComment` is a close precedent (comment + 1–5 `CHECK`-constrained rating + FKs) but is unused and targets `BeerPost`, not `BreweryPost`. |
+| Per-comment like toggle     | ❌     | Local component state          | No "like a comment" concept; needs a join table alongside a new `BreweryPostComment` table.                                                                                     |
+
+## Cross-cutting: the Beers feature is empty
+
+`Features.Beers` (backend) has a `.csproj` and nothing else: no query
+handlers, no controller, no DTOs. `BeerPost` exists as a domain entity (with
+`BrewedById` linking to `BreweryPost`) but nothing exposes it over the API.
+This blocks:
+
+- "Beers listed" count and "House style" on the index page's featured card.
+- The beer list and style breakdown on the detail page.
+- Any future beer-style filter on the directory.
+
+## Summary of backend work
+
+1. `IsFeatured` flag (or rotation query) on `BreweryPost`.
+2. `FoundedAt`/`FoundedYear`, `Type`, `Website` columns on `BreweryPost` (+ `BreweryDto`).
+3. A tagline/note field on `BreweryPost`, surfaced through `SimplifiedBreweryDto`.
+4. Stand up `Features.Beers`: a query + controller route for a brewery's beers, following the `Features.Breweries` vertical-slice pattern. Unblocks beer counts, style breakdown, and style filters.
+5. `GET /api/brewery/count`.
+6. A geocoding/place-search endpoint for manual location entry.
+7. `BreweryPostLike` join table + command/query/controller (toggle, read count/liked-by-current-user); public GET, JWT-required toggle, mirroring `BreweryController`'s `[AllowAnonymous]`-on-reads pattern.
+8. `BreweryPostRating` table (1–5, `CHECK`-constrained like `BeerPostComment.Rating`) + aggregate query for average/count.
+9. `BreweryPostComment` table (mirroring `BeerPostComment.sql`, FK'd to `BreweryPost`) + `BreweryPostCommentLike` join table, plus command/query/controller for both.
+10. (Product decision, not code) a configured default region to fall back to instead of the featured brewery's coordinates.
+
+Once these land, swap `FILLER_BEERS` / `FILLER_COMMENTS` / `FILLER_BREWERY_META`
+(`utils/filler-brewery-detail.ts`) and the local `useState` in
+`brewery-detail.tsx` for loader data and `authorizedRequest`-based mutations
+(see `auth.server.ts`).

web/frontend/app/features/breweries/BREWERY_INDEX_HANDOFF.md

@@ -1,76 +0,0 @@
-# Brewery index — data requirements
-
-`/breweries` (`app/features/breweries/routes/breweries.tsx`) is built and live.
-This document inventories every piece of data the page needs, section by
-section: what's already wired to real data, what's filler pending backend work,
-and what the backend would need to add to close each gap.
-
-## Status legend
-
-- ✅ **Available** — real data, already wired up.
-- ⚠️ **Partial** — an endpoint exists but is missing a field the design needs.
-- ❌ **Missing** — no backend support at all; page currently shows filler.
-
-## 1. Page header
-
-Static copy only. No data.
-
-## 2. Featured brewery
-
-| Field                                | Status | Current source                                       | Gap                                                                                                                                                                                    |
-| ------------------------------------ | ------ | ---------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Name, description, address, location | ✅     | `GET /api/brewery` (`BreweryDto`)                    | —                                                                                                                                                                                      |
-| "Editorially featured" selection     | ❌     | none — defaults to the most recently created brewery | No `IsFeatured` flag or rotation concept anywhere in `BreweryPost`. Needs a field + an admin toggle, or a scheduled rotation query, to back the "THIS WEEK" cadence the badge implies. |
-| Founded year                         | ❌     | none                                                 | `BreweryPost` has no founding date. Would need a new column (distinct from `CreatedAt`, which is post-creation time, not the brewery's actual founding).                               |
-| Beers listed count                   | ❌     | none                                                 | No beer-count aggregate exists. Blocked on the beers gap below.                                                                                                                        |
-| House style                          | ❌     | none                                                 | No style/tag field on `BreweryPost`, and no aggregate over its beers' styles either.                                                                                                   |
-
-## 3. Breweries near you
-
-| Field                                                   | Status | Current source                                                                     | Gap                                                                                                                                                                                                                              |
-| ------------------------------------------------------- | ------ | ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Nearby breweries by coordinates + radius                | ✅     | `GET /api/brewery/locations/nearby?latitude&longitude&rangeInMetres`               | —                                                                                                                                                                                                                                |
-| Distance from search center                             | ✅     | `SimplifiedBreweryDto.DistanceMetres`, computed server-side via `geography::STDistance` | —                                                                                                                                                                                                                                |
-| One-line note / tagline per brewery                     | ❌     | none                                                                               | `SimplifiedBreweryDto` (used by both `/locations` and `/locations/nearby`) has no description-like field. List and map-popup text use filler. Needs either a short tagline field or a truncated `Description` added to that DTO. |
-| User's current location                                 | ✅     | Browser Geolocation API                                                            | —                                                                                                                                                                                                                                |
-| Fallback region (before permission granted / on denial) | ⚠️     | Falls back to the featured brewery's own coordinates as a proxy center             | Works, but isn't a deliberate "default region." A real deployment likely wants a configured default (e.g. per-tenant HQ city) rather than borrowing the featured brewery's location.                                             |
-| Manual location entry ("Change location")               | ❌     | Re-requests browser geolocation only                                               | No geocoding/place-search endpoint exists to resolve a typed address or city name to coordinates.                                                                                                                                |
-| Search radius                                           | ✅     | Client-side state (10–150 km slider), passed straight through to `rangeInMetres`   | —                                                                                                                                                                                                                                |
-
-## 4. Recently added
-
-| Field                                   | Status | Current source                                   | Gap |
-| --------------------------------------- | ------ | ------------------------------------------------ | --- |
-| Newest breweries, name/city/description | ✅     | `GET /api/brewery` (already sorted newest-first) | —   |
-
-No gaps — this section is fully real.
-
-## 5. Directory CTA
-
-| Field                                   | Status | Current source              | Gap                                                                                                                                                                                                                              |
-| --------------------------------------- | ------ | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Total partner brewery count             | ❌     | Filler number (`128`)       | No lightweight count endpoint. Needs something like `GET /api/brewery/count` rather than fetching the full unbounded list just to measure it.                                                                                    |
-| Filter by country / region / beer style | ❌     | Copy only — not implemented | This is CTA copy describing the destination directory page's future capability, not a data need of this page itself. Tracked here because it implies the directory page will eventually need country/region/style filter params. |
-
-## Cross-cutting: the Beers feature is empty
-
-`Features.Beers` (backend) has a `.csproj` and nothing else — no query handlers,
-no controller, no DTOs. `BeerPost` exists as a domain entity (with `BrewedById`
-linking to `BreweryPost`) but nothing exposes it over the API. This blocks:
-
-- "Beers listed" count on the featured card.
-- "House style" (would likely aggregate from a brewery's beers' `BeerStyle`).
-- Any future beer-style filter on the directory.
-
-## Summary of backend work to fully close the gaps
-
-1. `IsFeatured` flag (or equivalent rotation query) on `BreweryPost`.
-2. `FoundedYear` (or similar) column on `BreweryPost`.
-3. A short tagline/note field on `BreweryPost`, surfaced through
-   `SimplifiedBreweryDto`.
-4. Stand up `Features.Beers` — at minimum a query to count beers per brewery and
-   read their styles.
-5. `GET /api/brewery/count`.
-6. A geocoding/place-search endpoint for manual location entry.
-7. (Product decision, not code) a configured default region to fall back to
-   instead of the featured brewery's coordinates.

web/frontend/app/features/breweries/components/BeerListCard.tsx

@@ -0,0 +1,42 @@
+import { Link } from 'react-router';
+import StarRating from './StarRating';
+import type { FillerBeer } from '../utils/filler-brewery-detail';
+
+interface BeerListCardProps {
+    beers: FillerBeer[];
+}
+
+const BeerListCard = ({ beers }: BeerListCardProps) => (
+    <div className="card bg-base-100 shadow">
+        <div className="card-body gap-3 p-6">
+            <div className="flex items-baseline justify-between gap-4">
+                <h3 className="text-xl m-0">Beers ({beers.length})</h3>
+                <Link to="/beers" className="link link-primary text-sm">
+                    View all beers
+                </Link>
+            </div>
+            <div className="flex flex-col">
+                {beers.map((beer) => (
+                    <div
+                        key={beer.id}
+                        className="grid grid-cols-[1fr_auto_auto_auto] items-center gap-3 py-2.5 border-t border-base-content/10 first:border-t-0"
+                    >
+                        <div className="flex flex-col gap-0.5 min-w-0">
+                            <span className="font-bold text-sm">{beer.name}</span>
+                            <span className="text-xs text-base-content/60">{beer.description}</span>
+                        </div>
+                        <span className="badge badge-ghost bg-base-300 text-xs font-semibold whitespace-nowrap">
+                            {beer.style}
+                        </span>
+                        <span className="text-xs text-base-content/60 tabular-nums whitespace-nowrap">
+                            {beer.abv.toFixed(1)}% ABV
+                        </span>
+                        <StarRating value={beer.rating} size="xs" />
+                    </div>
+                ))}
+            </div>
+        </div>
+    </div>
+);
+
+export default BeerListCard;

web/frontend/app/features/breweries/components/BeerStyleBreakdownCard.tsx

@@ -0,0 +1,33 @@
+import SidebarCard from './SidebarCard';
+import type { FillerBeer } from '../utils/filler-brewery-detail';
+
+interface BeerStyleBreakdownCardProps {
+    beers: FillerBeer[];
+}
+
+const BeerStyleBreakdownCard = ({ beers }: BeerStyleBreakdownCardProps) => {
+    const counts = new Map<string, number>();
+    beers.forEach((beer) => counts.set(beer.style, (counts.get(beer.style) ?? 0) + 1));
+    const maxCount = Math.max(...counts.values());
+    const styles = [...counts.entries()].sort((a, b) => b[1] - a[1]);
+
+    return (
+        <SidebarCard title="Beer styles">
+            {styles.map(([style, count]) => (
+                <div key={style} className="flex flex-col gap-1">
+                    <div className="flex items-baseline justify-between gap-2">
+                        <span className="text-sm font-semibold">{style}</span>
+                        <span className="text-xs text-base-content/60 tabular-nums">{count}</span>
+                    </div>
+                    <progress
+                        className="progress progress-primary h-1.5"
+                        value={count}
+                        max={maxCount}
+                    />
+                </div>
+            ))}
+        </SidebarCard>
+    );
+};
+
+export default BeerStyleBreakdownCard;

web/frontend/app/features/breweries/components/BreweryDetailsCard.tsx

@@ -0,0 +1,24 @@
+import SidebarCard from './SidebarCard';
+
+interface BreweryDetailsCardProps {
+    foundedYear: number;
+    type: string;
+    beerCount: number;
+}
+
+const DetailRow = ({ label, value }: { label: string; value: string | number }) => (
+    <div className="flex items-center justify-between gap-2 text-sm">
+        <span className="text-base-content/60">{label}</span>
+        <span className="font-semibold">{value}</span>
+    </div>
+);
+
+const BreweryDetailsCard = ({ foundedYear, type, beerCount }: BreweryDetailsCardProps) => (
+    <SidebarCard title="Details">
+        <DetailRow label="Founded" value={foundedYear} />
+        <DetailRow label="Type" value={type} />
+        <DetailRow label="Beers listed" value={beerCount} />
+    </SidebarCard>
+);
+
+export default BreweryDetailsCard;

web/frontend/app/features/breweries/components/BreweryHeaderCard.tsx

@@ -0,0 +1,70 @@
+import { Heart, HeartSolid, MapPin } from 'iconoir-react';
+import StarRating from './StarRating';
+import { formatBreweryAddress } from '../utils/format-address';
+import type { Brewery } from '../breweries.server';
+
+interface BreweryHeaderCardProps {
+    brewery: Brewery;
+    foundedYear: number;
+    liked: boolean;
+    likeCount: number;
+    avgRating: number;
+    ratingsCount: number;
+    onToggleLike: () => void;
+}
+
+const BreweryHeaderCard = ({
+    brewery,
+    foundedYear,
+    liked,
+    likeCount,
+    avgRating,
+    ratingsCount,
+    onToggleLike,
+}: BreweryHeaderCardProps) => (
+    <div className="card bg-base-100 shadow">
+        <div className="card-body gap-4 p-7">
+            <div className="flex flex-col gap-1">
+                <div className="flex items-center gap-2 flex-wrap">
+                    <span className="text-xs font-bold uppercase tracking-widest text-base-content/50">
+                        Brewery
+                    </span>
+                    <span className="badge bg-[var(--color-highlight)] text-[var(--color-highlight-content)]">
+                        Est. {foundedYear}
+                    </span>
+                </div>
+                <h1 className="text-4xl leading-tight m-0">{brewery.breweryName}</h1>
+                {brewery.location && (
+                    <p className="text-sm text-base-content/60 flex items-center gap-1 m-0">
+                        <MapPin className="size-4" aria-hidden="true" />
+                        {formatBreweryAddress(brewery.location)}
+                    </p>
+                )}
+            </div>
+            <div className="flex items-center gap-3 flex-wrap">
+                <button
+                    type="button"
+                    onClick={onToggleLike}
+                    className={`btn btn-sm ${liked ? 'btn-primary' : 'btn-outline'}`}
+                >
+                    {liked ? (
+                        <HeartSolid className="size-4" aria-hidden="true" />
+                    ) : (
+                        <Heart className="size-4" aria-hidden="true" />
+                    )}
+                    {liked ? 'Liked' : 'Like'} · {likeCount}
+                </button>
+                <div className="flex items-baseline gap-1.5">
+                    <StarRating value={avgRating} size="sm" />
+                    <span className="font-bold">{avgRating.toFixed(1)}</span>
+                    <span className="text-sm text-base-content/60">({ratingsCount} ratings)</span>
+                </div>
+            </div>
+            <p className="text-base-content/70 leading-relaxed text-pretty m-0">
+                {brewery.description}
+            </p>
+        </div>
+    </div>
+);
+
+export default BreweryHeaderCard;

web/frontend/app/features/breweries/components/BreweryLocationMap.tsx

@@ -0,0 +1,41 @@
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import L, { type LatLngTuple } from 'leaflet';
+import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
+import iconUrl from 'leaflet/dist/images/marker-icon.png';
+import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
+import 'leaflet/dist/leaflet.css';
+
+delete (L.Icon.Default.prototype as unknown as { _getIconUrl?: unknown })._getIconUrl;
+L.Icon.Default.mergeOptions({ iconRetinaUrl, iconUrl, shadowUrl });
+
+interface BreweryLocationMapProps {
+    latitude: number;
+    longitude: number;
+    label: string;
+}
+
+const ZOOM = 15;
+
+const BreweryLocationMap = ({ latitude, longitude, label }: BreweryLocationMapProps) => {
+    const position: LatLngTuple = [latitude, longitude];
+
+    return (
+        <MapContainer
+            center={position}
+            zoom={ZOOM}
+            scrollWheelZoom={false}
+            className="h-45 w-full rounded-field relative z-0"
+        >
+            <TileLayer
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                noWrap
+            />
+            <Marker position={position}>
+                <Popup>{label}</Popup>
+            </Marker>
+        </MapContainer>
+    );
+};
+
+export default BreweryLocationMap;

web/frontend/app/features/breweries/components/CommentItem.tsx

@@ -0,0 +1,46 @@
+import { Heart, HeartSolid } from 'iconoir-react';
+import StarRating from './StarRating';
+import type { FillerComment } from '../utils/filler-brewery-detail';
+
+interface CommentItemProps {
+    comment: FillerComment;
+    onToggleLike: (id: string) => void;
+}
+
+const CommentItem = ({ comment, onToggleLike }: CommentItemProps) => {
+    const likeCount = comment.likes + (comment.liked ? 1 : 0);
+
+    return (
+        <div className="flex gap-3 items-start border-t border-base-content/10 pt-4">
+            <div className="avatar avatar-placeholder shrink-0">
+                <div className="bg-secondary text-secondary-content w-9 rounded-full">
+                    <span className="text-sm font-bold">{comment.initials}</span>
+                </div>
+            </div>
+            <div className="flex-1 flex flex-col gap-1 min-w-0">
+                <div className="flex items-baseline gap-2 flex-wrap">
+                    <span className="font-bold text-sm">{comment.user}</span>
+                    <StarRating value={comment.rating} size="xs" />
+                    <span className="text-xs text-base-content/60">{comment.time}</span>
+                </div>
+                <p className="text-sm leading-relaxed m-0">{comment.text}</p>
+                <button
+                    type="button"
+                    onClick={() => onToggleLike(comment.id)}
+                    className={`self-start inline-flex items-center gap-1 text-xs font-semibold ${
+                        comment.liked ? 'text-primary' : 'text-base-content/60'
+                    }`}
+                >
+                    {comment.liked ? (
+                        <HeartSolid className="size-3.5" aria-hidden="true" />
+                    ) : (
+                        <Heart className="size-3.5" aria-hidden="true" />
+                    )}
+                    {likeCount} {likeCount === 1 ? 'like' : 'likes'}
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default CommentItem;

web/frontend/app/features/breweries/components/CommentsCard.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import CommentItem from './CommentItem';
+import type { FillerComment } from '../utils/filler-brewery-detail';
+
+interface CommentsCardProps {
+    comments: FillerComment[];
+    loggedIn: boolean;
+    currentUserInitials: string;
+    onAddComment: (text: string) => void;
+    onToggleCommentLike: (id: string) => void;
+}
+
+const CommentsCard = ({
+    comments,
+    loggedIn,
+    currentUserInitials,
+    onAddComment,
+    onToggleCommentLike,
+}: CommentsCardProps) => {
+    const [commentText, setCommentText] = useState('');
+
+    const handleSubmit = () => {
+        const text = commentText.trim();
+        if (!text) return;
+        onAddComment(text);
+        setCommentText('');
+    };
+
+    return (
+        <div className="card bg-base-100 shadow">
+            <div className="card-body gap-5 p-6">
+                <h3 className="text-xl m-0">Comments ({comments.length})</h3>
+
+                {loggedIn ? (
+                    <div className="flex gap-3 items-start">
+                        <div className="avatar avatar-placeholder shrink-0">
+                            <div className="bg-secondary text-secondary-content w-9 rounded-full">
+                                <span className="text-sm font-bold">{currentUserInitials}</span>
+                            </div>
+                        </div>
+                        <div className="flex-1 flex flex-col gap-2">
+                            <textarea
+                                rows={3}
+                                placeholder="Share your thoughts on this brewery"
+                                value={commentText}
+                                onChange={(e) => setCommentText(e.target.value)}
+                                className="textarea w-full"
+                            />
+                            <button
+                                type="button"
+                                onClick={handleSubmit}
+                                disabled={!commentText.trim()}
+                                className="btn btn-sm btn-primary self-end"
+                            >
+                                Post comment
+                            </button>
+                        </div>
+                    </div>
+                ) : (
+                    <div role="alert" className="alert alert-info alert-soft">
+                        Sign in to like, rate, and comment on breweries.
+                    </div>
+                )}
+
+                <div className="flex flex-col gap-4">
+                    {comments.map((comment) => (
+                        <CommentItem
+                            key={comment.id}
+                            comment={comment}
+                            onToggleLike={onToggleCommentLike}
+                        />
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CommentsCard;

web/frontend/app/features/breweries/components/CommunityStatsCard.tsx

@@ -0,0 +1,24 @@
+import SidebarCard from './SidebarCard';
+
+interface CommunityStatsCardProps {
+    likeCount: number;
+    ratingsCount: number;
+    commentCount: number;
+}
+
+const StatRow = ({ label, value }: { label: string; value: number }) => (
+    <div className="flex items-center justify-between gap-2 text-sm">
+        <span className="text-base-content/60">{label}</span>
+        <span className="font-semibold tabular-nums">{value}</span>
+    </div>
+);
+
+const CommunityStatsCard = ({ likeCount, ratingsCount, commentCount }: CommunityStatsCardProps) => (
+    <SidebarCard title="Community">
+        <StatRow label="Likes" value={likeCount} />
+        <StatRow label="Ratings" value={ratingsCount} />
+        <StatRow label="Comments" value={commentCount} />
+    </SidebarCard>
+);
+
+export default CommunityStatsCard;

web/frontend/app/features/breweries/components/FeaturedBreweryCard.tsx

@@ -7,7 +7,7 @@ interface FeaturedBreweryCardProps {
     onShowOnMap: () => void;
 }
 
-// see BREWERY_INDEX_HANDOFF.md
+// see BREWERY_HANDOFF.md
 const FILLER_STATS = [
     { label: 'Founded', value: '2014' },
     { label: 'Beers listed', value: '18' },

web/frontend/app/features/breweries/components/LocationCard.tsx

@@ -0,0 +1,46 @@
+import { lazy, Suspense } from 'react';
+import ClientOnly from '../../../components/ClientOnly';
+import SidebarCard from './SidebarCard';
+import { formatBreweryAddress } from '../utils/format-address';
+import type { BreweryLocation } from '../breweries.server';
+
+const BreweryLocationMap = lazy(() => import('./BreweryLocationMap'));
+
+interface LocationCardProps {
+    breweryName: string;
+    location: BreweryLocation;
+    website: string;
+}
+
+const MAP_PLACEHOLDER_CLASS = 'skeleton h-45 w-full rounded-field';
+
+const LocationCard = ({ breweryName, location, website }: LocationCardProps) => (
+    <SidebarCard title="Location">
+        {location.coordinates && (
+            <ClientOnly fallback={<div className={MAP_PLACEHOLDER_CLASS} />}>
+                {() => (
+                    <Suspense fallback={<div className={MAP_PLACEHOLDER_CLASS} />}>
+                        <BreweryLocationMap
+                            latitude={location.coordinates!.latitude}
+                            longitude={location.coordinates!.longitude}
+                            label={`${breweryName} — ${location.addressLine1}`}
+                        />
+                    </Suspense>
+                )}
+            </ClientOnly>
+        )}
+        <p className="text-sm leading-relaxed m-0">{formatBreweryAddress(location)}</p>
+        <p className="text-sm m-0">
+            <a
+                href={`https://${website}`}
+                className="link link-primary"
+                target="_blank"
+                rel="noreferrer"
+            >
+                {website}
+            </a>
+        </p>
+    </SidebarCard>
+);
+
+export default LocationCard;

web/frontend/app/features/breweries/components/NearbyBreweriesSection.tsx

@@ -37,7 +37,7 @@ interface NearbyBreweriesSectionProps {
     onSelect: (id: string) => void;
 }
 
-// Notes aren't tracked on brewery locations yet - see BREWERY_INDEX_HANDOFF.md.
+// Notes aren't tracked on brewery locations yet - see BREWERY_HANDOFF.md.
 const FILLER_NOTE = 'A stop worth the detour.';
 
 const cardClassName = (selected: boolean) =>

web/frontend/app/features/breweries/components/SidebarCard.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+
+interface SidebarCardProps {
+    title: string;
+    children: ReactNode;
+}
+
+const SidebarCard = ({ title, children }: SidebarCardProps) => (
+    <div className="card bg-base-100 shadow">
+        <div className="card-body gap-3 p-6">
+            <p className="text-xs font-bold uppercase tracking-widest text-base-content/50 m-0">
+                {title}
+            </p>
+            {children}
+        </div>
+    </div>
+);
+
+export default SidebarCard;

web/frontend/app/features/breweries/components/StarRating.tsx

@@ -0,0 +1,71 @@
+import { useId } from 'react';
+
+interface StarRatingProps {
+    value: number;
+    max?: number;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    onChange?: (value: number) => void;
+    label?: string;
+}
+
+const SIZE_CLASS: Record<NonNullable<StarRatingProps['size']>, string> = {
+    xs: 'rating-xs',
+    sm: 'rating-sm',
+    md: 'rating-md',
+    lg: 'rating-lg',
+    xl: 'rating-xl',
+};
+
+/** Read-only when `onChange` is omitted, interactive otherwise. Clicking the
+ * currently-selected star clears the rating (daisyUI radios can't do this natively). */
+const StarRating = ({ value, max = 5, size = 'sm', onChange, label }: StarRatingProps) => {
+    const name = useId();
+    const stars = Array.from({ length: max }, (_, i) => i + 1);
+
+    if (!onChange) {
+        return (
+            <div
+                className={`rating ${SIZE_CLASS[size]}`}
+                aria-label={label ?? `${value} out of ${max} stars`}
+            >
+                {stars.map((n) => (
+                    <div
+                        key={n}
+                        className="mask mask-star bg-warning"
+                        aria-label={`${n} star`}
+                        aria-current={n === value ? 'true' : undefined}
+                    />
+                ))}
+            </div>
+        );
+    }
+
+    return (
+        <div className={`rating ${SIZE_CLASS[size]}`}>
+            <input
+                type="radio"
+                name={name}
+                className="rating-hidden"
+                checked={value === 0}
+                onChange={() => onChange(0)}
+                aria-label="Clear rating"
+            />
+            {stars.map((n) => (
+                <input
+                    key={n}
+                    type="radio"
+                    name={name}
+                    className="mask mask-star bg-warning"
+                    checked={value === n}
+                    onChange={() => onChange(n)}
+                    onClick={() => {
+                        if (value === n) onChange(0);
+                    }}
+                    aria-label={`Rate ${n} of ${max}`}
+                />
+            ))}
+        </div>
+    );
+};
+
+export default StarRating;

web/frontend/app/features/breweries/components/YourRatingCard.tsx

@@ -0,0 +1,24 @@
+import StarRating from './StarRating';
+
+interface YourRatingCardProps {
+    value: number;
+    onChange: (value: number) => void;
+}
+
+const YourRatingCard = ({ value, onChange }: YourRatingCardProps) => (
+    <div className="card bg-base-100 shadow">
+        <div className="card-body flex-row flex-wrap items-center justify-between gap-4 p-6">
+            <div className="flex flex-col gap-0.5">
+                <h3 className="text-xl m-0">Your rating</h3>
+                <p className="text-sm text-base-content/60 m-0">
+                    {value
+                        ? `You rated this ${value} of 5. Tap the same star to clear.`
+                        : 'Tap a star to rate this brewery.'}
+                </p>
+            </div>
+            <StarRating value={value} onChange={onChange} size="lg" />
+        </div>
+    </div>
+);
+
+export default YourRatingCard;

web/frontend/app/features/breweries/routes/breweries.tsx

@@ -7,7 +7,7 @@ import RecentBreweries from '../components/RecentBreweries';
 import { getBreweries } from '../breweries.server';
 import type { Route } from './+types/breweries';
 
-// No count endpoint exists yet - see BREWERY_INDEX_HANDOFF.md.
+// No count endpoint exists yet - see BREWERY_HANDOFF.md.
 const FILLER_TOTAL_BREWERY_COUNT = 128;
 
 export const meta = ({}: Route.MetaArgs) => {
@@ -15,7 +15,7 @@ export const meta = ({}: Route.MetaArgs) => {
 };
 
 export const loader = async () => {
-    // "Featured" is just the most recently posted brewery for now - see BREWERY_INDEX_HANDOFF.md.
+    // "Featured" is just the most recently posted brewery for now - see BREWERY_HANDOFF.md.
     const [featured, ...recent] = await getBreweries(4, 0);
     return { featured: featured ?? null, recent };
 };

web/frontend/app/features/breweries/routes/brewery-detail.tsx

@@ -1,52 +1,132 @@
+import { useState } from 'react';
 import { data, Link } from 'react-router';
 import RouteErrorState from '../../../components/ui/error/RouteErrorState';
+import { getOptionalAuth } from '../../auth/auth.server';
 import { getBreweryById } from '../breweries.server';
-import { formatBreweryAddress } from '../utils/format-address';
+import BreweryHeaderCard from '../components/BreweryHeaderCard';
+import YourRatingCard from '../components/YourRatingCard';
+import BeerListCard from '../components/BeerListCard';
+import CommentsCard from '../components/CommentsCard';
+import LocationCard from '../components/LocationCard';
+import BreweryDetailsCard from '../components/BreweryDetailsCard';
+import BeerStyleBreakdownCard from '../components/BeerStyleBreakdownCard';
+import CommunityStatsCard from '../components/CommunityStatsCard';
+import { FILLER_BEERS, FILLER_BREWERY_META, FILLER_COMMENTS } from '../utils/filler-brewery-detail';
 import type { Route } from './+types/brewery-detail';
 
-export const loader = async ({ params }: Route.LoaderArgs) => {
-    const brewery = await getBreweryById(params.id);
+export const loader = async ({ request, params }: Route.LoaderArgs) => {
+    const [brewery, auth] = await Promise.all([
+        getBreweryById(params.id),
+        getOptionalAuth(request),
+    ]);
+
     if (!brewery) {
         throw data('Brewery not found.', { status: 404, statusText: 'Not Found' });
     }
 
-    return { brewery };
+    return {
+        brewery,
+        loggedIn: auth !== null,
+        username: auth?.username ?? null,
+    };
 };
 
+const initials = (username: string) => username.slice(0, 2).toUpperCase();
+
 const BreweryDetail = ({ loaderData }: Route.ComponentProps) => {
-    const { brewery } = loaderData;
+    const { brewery, loggedIn, username } = loaderData;
+
+    const [liked, setLiked] = useState(false);
+    const [likeCount, setLikeCount] = useState(FILLER_BREWERY_META.likeCount);
+    const [yourRating, setYourRating] = useState(0);
+    const [ratingsCount, setRatingsCount] = useState(FILLER_BREWERY_META.ratingsCount);
+    const [comments, setComments] = useState(FILLER_COMMENTS);
+
+    const handleToggleLike = () => {
+        setLiked((prev) => !prev);
+        setLikeCount((prev) => prev + (liked ? -1 : 1));
+    };
+
+    const handleRatingChange = (next: number) => {
+        setRatingsCount((prev) => prev + (next === 0 ? -1 : yourRating === 0 ? 1 : 0));
+        setYourRating(next);
+    };
+
+    const handleAddComment = (text: string) => {
+        setComments((prev) => [
+            {
+                id: crypto.randomUUID(),
+                user: username ?? 'you',
+                initials: username ? initials(username) : 'YO',
+                rating: yourRating,
+                time: 'just now',
+                text,
+                likes: 0,
+                liked: false,
+            },
+            ...prev,
+        ]);
+    };
+
+    const handleToggleCommentLike = (id: string) => {
+        setComments((prev) =>
+            prev.map((comment) =>
+                comment.id === id ? { ...comment, liked: !comment.liked } : comment,
+            ),
+        );
+    };
 
     return (
         <div className="min-h-screen bg-base-200">
-            <div className="container mx-auto p-4 max-w-2xl">
+            <div className="max-w-4xl mx-auto px-6 pt-8 pb-16">
                 <Link
                     to="/breweries"
                     className="link link-hover text-sm text-base-content/60 mb-4 inline-block"
                 >
-                    &larr; Back to Breweries
+                    &larr; Back to breweries
                 </Link>
 
-                <div className="card bg-base-100 shadow">
-                    <div className="card-body">
-                        <h1 className="card-title text-3xl">{brewery.breweryName}</h1>
-                        <p className="text-base-content/70 whitespace-pre-line">
-                            {brewery.description}
-                        </p>
+                <div className="grid grid-cols-1 lg:grid-cols-[1fr_19rem] gap-5 items-start">
+                    <div className="flex flex-col gap-5">
+                        <BreweryHeaderCard
+                            brewery={brewery}
+                            foundedYear={FILLER_BREWERY_META.foundedYear}
+                            liked={liked}
+                            likeCount={likeCount}
+                            avgRating={FILLER_BREWERY_META.avgRating}
+                            ratingsCount={ratingsCount}
+                            onToggleLike={handleToggleLike}
+                        />
+                        <YourRatingCard value={yourRating} onChange={handleRatingChange} />
+                        <BeerListCard beers={FILLER_BEERS} />
+                        <CommentsCard
+                            comments={comments}
+                            loggedIn={loggedIn}
+                            currentUserInitials={username ? initials(username) : 'YO'}
+                            onAddComment={handleAddComment}
+                            onToggleCommentLike={handleToggleCommentLike}
+                        />
+                    </div>
 
+                    <div className="flex flex-col gap-5">
                         {brewery.location && (
-                            <div className="bg-base-200 rounded-box p-4 mt-4">
-                                <p className="text-xs font-semibold uppercase tracking-widest text-base-content/50 mb-2">
-                                    Location
-                                </p>
-                                <p>{formatBreweryAddress(brewery.location)}</p>
-                            </div>
+                            <LocationCard
+                                breweryName={brewery.breweryName}
+                                location={brewery.location}
+                                website={FILLER_BREWERY_META.website}
+                            />
                         )}
-
-                        <p className="text-xs text-base-content/40 mt-4">
-                            Posted {new Date(brewery.createdAt).toLocaleDateString()}
-                            {brewery.updatedAt &&
-                                ` · Updated ${new Date(brewery.updatedAt).toLocaleDateString()}`}
-                        </p>
+                        <BreweryDetailsCard
+                            foundedYear={FILLER_BREWERY_META.foundedYear}
+                            type={FILLER_BREWERY_META.type}
+                            beerCount={FILLER_BEERS.length}
+                        />
+                        <BeerStyleBreakdownCard beers={FILLER_BEERS} />
+                        <CommunityStatsCard
+                            likeCount={likeCount}
+                            ratingsCount={ratingsCount}
+                            commentCount={comments.length}
+                        />
                     </div>
                 </div>
             </div>

web/frontend/app/features/breweries/utils/filler-brewery-detail.ts

@@ -0,0 +1,148 @@
+// see BREWERY_HANDOFF.md — filler data pending backend support for
+// beers-by-brewery, likes, ratings, comments, and brewery founded/type/website fields.
+
+export interface FillerBeer {
+    id: string;
+    name: string;
+    description: string;
+    style: string;
+    abv: number;
+    rating: number;
+}
+
+export const FILLER_BEERS: FillerBeer[] = [
+    {
+        id: '1',
+        name: 'Switchyard IPA',
+        description: 'Flagship west coast IPA, pine and grapefruit',
+        style: 'IPA',
+        abv: 6.8,
+        rating: 4,
+    },
+    {
+        id: '2',
+        name: 'Rail Spur DIPA',
+        description: 'Double dry-hopped, citra and mosaic',
+        style: 'IPA',
+        abv: 8.2,
+        rating: 5,
+    },
+    {
+        id: '3',
+        name: 'Kettle Row Hazy',
+        description: 'Soft, juicy, low bitterness',
+        style: 'IPA',
+        abv: 6.4,
+        rating: 4,
+    },
+    {
+        id: '4',
+        name: 'Flanders No. 3',
+        description: 'Barrel-aged flanders red, 18 months in oak',
+        style: 'Sour',
+        abv: 6.0,
+        rating: 5,
+    },
+    {
+        id: '5',
+        name: 'Blackberry Cassis Gose',
+        description: 'Collab with Cassis & Coal, lightly salted',
+        style: 'Sour',
+        abv: 4.6,
+        rating: 4,
+    },
+    {
+        id: '6',
+        name: 'Foudre Kriek',
+        description: 'Whole cherries, second-use barrels',
+        style: 'Sour',
+        abv: 5.4,
+        rating: 4,
+    },
+    {
+        id: '7',
+        name: 'Yard Lamp Lager',
+        description: 'Crisp helles-style lager',
+        style: 'Lager',
+        abv: 4.9,
+        rating: 4,
+    },
+    {
+        id: '8',
+        name: 'Night Shift Stout',
+        description: 'Export stout with roasted barley',
+        style: 'Stout',
+        abv: 7.1,
+        rating: 4,
+    },
+    {
+        id: '9',
+        name: 'Hefeweizen Classic',
+        description: 'Banana and clove, open fermentation',
+        style: 'Weizen',
+        abv: 5.2,
+        rating: 3,
+    },
+];
+
+export interface FillerComment {
+    id: string;
+    user: string;
+    initials: string;
+    rating: number;
+    time: string;
+    text: string;
+    likes: number;
+    liked: boolean;
+}
+
+export const FILLER_COMMENTS: FillerComment[] = [
+    {
+        id: '1',
+        user: 'malt_kettle',
+        initials: 'MK',
+        rating: 5,
+        time: '2 days ago',
+        text: 'The barrel-aged flanders red is worth the trip alone. Staff walked us through the whole sour program on the Saturday tour.',
+        likes: 12,
+        liked: false,
+    },
+    {
+        id: '2',
+        user: 'stoutfan_88',
+        initials: 'SB',
+        rating: 4,
+        time: '1 week ago',
+        text: 'Great IPAs, solid taproom. Gets crowded after 7pm on weekends — go early if you want a seat in the barrel room.',
+        likes: 5,
+        liked: false,
+    },
+    {
+        id: '3',
+        user: 'ale_annie',
+        initials: 'AL',
+        rating: 4,
+        time: '3 weeks ago',
+        text: 'Their cassis gose collab with Cassis & Coal is still on tap. Slightly pricey flights, but generous pours.',
+        likes: 3,
+        liked: false,
+    },
+];
+
+export interface FillerBreweryMeta {
+    foundedYear: number;
+    type: string;
+    website: string;
+    likeCount: number;
+    avgRating: number;
+    ratingsCount: number;
+}
+
+export const FILLER_BREWERY_META: FillerBreweryMeta = {
+    foundedYear: 2014,
+    type: 'Microbrewery',
+    website: 'example.com',
+    likeCount: 127,
+    avgRating: 4,
+    ratingsCount: 76,
+};

web/frontend/stories/BeerListCard.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, within } from 'storybook/test';
+import BeerListCard from '../app/features/breweries/components/BeerListCard';
+import { FILLER_BEERS } from '../app/features/breweries/utils/filler-brewery-detail';
+
+const beerListCardDescription = `A brewery's beer list on the detail page: name/description, style badge, ABV, and star rating per row. Currently filler pending a beers-by-brewery endpoint — see BREWERY_HANDOFF.md.`;
+
+const meta = {
+    title: 'Breweries/BeerListCard',
+    component: BeerListCard,
+    tags: ['autodocs'],
+    args: {
+        beers: FILLER_BEERS,
+    },
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: beerListCardDescription,
+            },
+        },
+    },
+} satisfies Meta<typeof BeerListCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByRole('heading', { name: 'Beers (9)' })).toBeInTheDocument();
+        await expect(canvas.getByRole('link', { name: /view all beers/i })).toHaveAttribute(
+            'href',
+            '/beers',
+        );
+        await expect(canvas.getByText('Switchyard IPA')).toBeInTheDocument();
+        await expect(canvas.getByText('6.8% ABV')).toBeInTheDocument();
+    },
+};
+
+export const SingleBeer: Story = {
+    args: { beers: FILLER_BEERS.slice(0, 1) },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByRole('heading', { name: 'Beers (1)' })).toBeInTheDocument();
+    },
+};

web/frontend/stories/BeerStyleBreakdownCard.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, within } from 'storybook/test';
+import BeerStyleBreakdownCard from '../app/features/breweries/components/BeerStyleBreakdownCard';
+import { FILLER_BEERS } from '../app/features/breweries/utils/filler-brewery-detail';
+
+const beerStyleBreakdownCardDescription = `Sidebar "Beer styles" card: per-style progress bars, sorted by count descending, derived client-side from a brewery's beer list.`;
+
+const meta = {
+    title: 'Breweries/BeerStyleBreakdownCard',
+    component: BeerStyleBreakdownCard,
+    tags: ['autodocs'],
+    args: {
+        beers: FILLER_BEERS,
+    },
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: beerStyleBreakdownCardDescription,
+            },
+        },
+    },
+} satisfies Meta<typeof BeerStyleBreakdownCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByText('Beer styles')).toBeInTheDocument();
+        await expect(canvas.getByText('IPA')).toBeInTheDocument();
+        await expect(canvas.getByText('Sour')).toBeInTheDocument();
+    },
+};
+
+export const SingleStyle: Story = {
+    args: {
+        beers: FILLER_BEERS.filter((beer) => beer.style === 'IPA'),
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByText('IPA')).toBeInTheDocument();
+        await expect(canvas.queryByText('Sour')).not.toBeInTheDocument();
+    },
+};

web/frontend/stories/BreweryDetailsCard.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, within } from 'storybook/test';
+import BreweryDetailsCard from '../app/features/breweries/components/BreweryDetailsCard';
+
+const breweryDetailsCardDescription = `Sidebar "Details" card on the brewery detail page: founded year, brewery type, and beer count. Founded year and type are currently filler pending backend support — see BREWERY_HANDOFF.md.`;
+
+const meta = {
+    title: 'Breweries/BreweryDetailsCard',
+    component: BreweryDetailsCard,
+    tags: ['autodocs'],
+    args: {
+        foundedYear: 2014,
+        type: 'Microbrewery',
+        beerCount: 9,
+    },
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: breweryDetailsCardDescription,
+            },
+        },
+    },
+} satisfies Meta<typeof BreweryDetailsCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByText('Founded')).toBeInTheDocument();
+        await expect(canvas.getByText('2014')).toBeInTheDocument();
+        await expect(canvas.getByText('Microbrewery')).toBeInTheDocument();
+        await expect(canvas.getByText('9')).toBeInTheDocument();
+    },
+};

web/frontend/stories/BreweryHeaderCard.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, fn, userEvent, within } from 'storybook/test';
+import BreweryHeaderCard from '../app/features/breweries/components/BreweryHeaderCard';
+import type { Brewery, BreweryLocation } from '../app/features/breweries/breweries.server';
+
+const breweryHeaderCardDescription = `Top card on the brewery detail page: eyebrow + "Est." badge, name, address, like button, average rating, and description. Founded year and average rating are currently filler pending backend support — see BREWERY_HANDOFF.md.`;
+
+const portlandLocation: BreweryLocation = {
+    breweryPostLocationId: 'loc-1',
+    breweryPostId: 'brewery-1',
+    cityId: 'city-1',
+    cityName: 'Portland',
+    stateProvinceName: 'Oregon',
+    stateProvinceCode: 'OR',
+    countryName: 'United States',
+    countryCode: 'US',
+    addressLine1: '123 Hop Street',
+    addressLine2: null,
+    postalCode: '97201',
+    coordinates: { latitude: 45.5152, longitude: -122.6784 },
+};
+
+const brewery: Brewery = {
+    breweryPostId: 'brewery-1',
+    postedById: 'user-1',
+    breweryName: 'Cascade Hollow Brewing',
+    description:
+        'A small-batch brewery known for hazy IPAs and barrel-aged sours, tucked into an old warehouse district.',
+    createdAt: '2024-03-01T12:00:00.000Z',
+    updatedAt: null,
+    location: portlandLocation,
+};
+
+const meta = {
+    title: 'Breweries/BreweryHeaderCard',
+    component: BreweryHeaderCard,
+    tags: ['autodocs'],
+    args: {
+        brewery,
+        foundedYear: 2014,
+        avgRating: 4,
+        ratingsCount: 76,
+        onToggleLike: fn(),
+    },
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: breweryHeaderCardDescription,
+            },
+        },
+    },
+} satisfies Meta<typeof BreweryHeaderCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Unliked: Story = {
+    args: { liked: false, likeCount: 127 },
+    play: async ({ args, canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(
+            canvas.getByRole('heading', { name: 'Cascade Hollow Brewing', level: 1 }),
+        ).toBeInTheDocument();
+        const likeButton = canvas.getByRole('button', { name: /like · 127/i });
+        await userEvent.click(likeButton);
+        await expect(args.onToggleLike).toHaveBeenCalledOnce();
+    },
+};
+
+export const Liked: Story = {
+    args: { liked: true, likeCount: 128 },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByRole('button', { name: /liked · 128/i })).toBeInTheDocument();
+    },
+};

web/frontend/stories/BreweryLocationMap.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import BreweryLocationMap from '../app/features/breweries/components/BreweryLocationMap';
+
+const breweryLocationMapDescription = `Small fixed single-pin Leaflet map used by the brewery detail page's Location sidebar card. Smoke-render only - this hits the real OpenStreetMap tile server in the browser test run.`;
+
+const meta = {
+    title: 'Breweries/BreweryLocationMap',
+    component: BreweryLocationMap,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: breweryLocationMapDescription,
+            },
+        },
+    },
+} satisfies Meta<typeof BreweryLocationMap>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        latitude: 45.5152,
+        longitude: -122.6784,
+        label: 'Cascade Hollow Brewing — 123 Hop Street',
+    },
+};

web/frontend/stories/CommentItem.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, fn, userEvent, within } from 'storybook/test';
+import CommentItem from '../app/features/breweries/components/CommentItem';
+import type { FillerComment } from '../app/features/breweries/utils/filler-brewery-detail';
+
+const commentItemDescription = `A single comment row on the brewery detail page: avatar initials, username/star/timestamp, body, and a per-comment like toggle.`;
+
+const comment: FillerComment = {
+    id: '1',
+    user: 'malt_kettle',
+    initials: 'MK',
+    rating: 5,
+    time: '2 days ago',
+    text: 'The barrel-aged flanders red is worth the trip alone.',
+    likes: 12,
+    liked: false,
+};
+
+const meta = {
+    title: 'Breweries/CommentItem',
+    component: CommentItem,
+    tags: ['autodocs'],
+    args: {
+        onToggleLike: fn(),
+    },
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: commentItemDescription,
+            },
+        },
+    },
+} satisfies Meta<typeof CommentItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Unliked: Story = {
+    args: { comment },
+    play: async ({ args, canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByText('malt_kettle')).toBeInTheDocument();
+        const likeButton = canvas.getByRole('button', { name: /12 likes/i });
+        await userEvent.click(likeButton);
+        await expect(args.onToggleLike).toHaveBeenCalledWith('1');
+    },
+};
+
+export const Liked: Story = {
+    args: { comment: { ...comment, liked: true } },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByRole('button', { name: /13 likes/i })).toBeInTheDocument();
+    },
+};

web/frontend/stories/CommentsCard.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, fn, userEvent, within } from 'storybook/test';
+import CommentsCard from '../app/features/breweries/components/CommentsCard';
+import { FILLER_COMMENTS } from '../app/features/breweries/utils/filler-brewery-detail';
+
+const commentsCardDescription = `Comments section on the brewery detail page: a post form (logged in) or a sign-in alert (logged out), followed by the comment list. Posting is disabled until the textarea has non-whitespace content.`;
+
+const meta = {
+    title: 'Breweries/CommentsCard',
+    component: CommentsCard,
+    tags: ['autodocs'],
+    args: {
+        comments: FILLER_COMMENTS,
+        currentUserInitials: 'JD',
+        onAddComment: fn(),
+        onToggleCommentLike: fn(),
+    },
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: commentsCardDescription,
+            },
+        },
+    },
+} satisfies Meta<typeof CommentsCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LoggedIn: Story = {
+    args: { loggedIn: true },
+    play: async ({ args, canvasElement }) => {
+        const canvas = within(canvasElement);
+        const postButton = canvas.getByRole('button', { name: /post comment/i });
+        await expect(postButton).toBeDisabled();
+
+        await userEvent.type(
+            canvas.getByPlaceholderText('Share your thoughts on this brewery'),
+            'Great taproom!',
+        );
+        await expect(postButton).toBeEnabled();
+        await userEvent.click(postButton);
+        await expect(args.onAddComment).toHaveBeenCalledWith('Great taproom!');
+    },
+};
+
+export const LoggedOut: Story = {
+    args: { loggedIn: false },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(
+            canvas.getByText('Sign in to like, rate, and comment on breweries.'),
+        ).toBeInTheDocument();
+        await expect(
+            canvas.queryByPlaceholderText('Share your thoughts on this brewery'),
+        ).not.toBeInTheDocument();
+    },
+};

web/frontend/stories/CommunityStatsCard.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, within } from 'storybook/test';
+import CommunityStatsCard from '../app/features/breweries/components/CommunityStatsCard';
+
+const communityStatsCardDescription = `Sidebar "Community" card: live likes/ratings/comments counts, kept in sync with the header, your-rating, and comments cards on the brewery detail page.`;
+
+const meta = {
+    title: 'Breweries/CommunityStatsCard',
+    component: CommunityStatsCard,
+    tags: ['autodocs'],
+    args: {
+        likeCount: 127,
+        ratingsCount: 76,
+        commentCount: 3,
+    },
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: communityStatsCardDescription,
+            },
+        },
+    },
+} satisfies Meta<typeof CommunityStatsCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByText('Likes')).toBeInTheDocument();
+        await expect(canvas.getByText('127')).toBeInTheDocument();
+        await expect(canvas.getByText('76')).toBeInTheDocument();
+        await expect(canvas.getByText('3')).toBeInTheDocument();
+    },
+};

web/frontend/stories/LocationCard.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, within } from 'storybook/test';
+import LocationCard from '../app/features/breweries/components/LocationCard';
+import type { BreweryLocation } from '../app/features/breweries/breweries.server';
+
+const locationCardDescription = `Sidebar "Location" card: an interactive single-pin map (when coordinates are available), address, and website link. Smoke-render only for the map portion - this hits the real OpenStreetMap tile server in the browser test run.`;
+
+const portlandLocation: BreweryLocation = {
+    breweryPostLocationId: 'loc-1',
+    breweryPostId: 'brewery-1',
+    cityId: 'city-1',
+    cityName: 'Portland',
+    stateProvinceName: 'Oregon',
+    stateProvinceCode: 'OR',
+    countryName: 'United States',
+    countryCode: 'US',
+    addressLine1: '123 Hop Street',
+    addressLine2: null,
+    postalCode: '97201',
+    coordinates: { latitude: 45.5152, longitude: -122.6784 },
+};
+
+const meta = {
+    title: 'Breweries/LocationCard',
+    component: LocationCard,
+    tags: ['autodocs'],
+    args: {
+        breweryName: 'Cascade Hollow Brewing',
+        website: 'cascadehollow.example',
+    },
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: locationCardDescription,
+            },
+        },
+    },
+} satisfies Meta<typeof LocationCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithCoordinates: Story = {
+    args: { location: portlandLocation },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByText('Location')).toBeInTheDocument();
+        await expect(canvas.getByRole('link', { name: 'cascadehollow.example' })).toHaveAttribute(
+            'href',
+            'https://cascadehollow.example',
+        );
+    },
+};
+
+export const WithoutCoordinates: Story = {
+    args: { location: { ...portlandLocation, coordinates: null } },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(
+            canvas.getByText('123 Hop Street, Portland, OR 97201, United States'),
+        ).toBeInTheDocument();
+    },
+};

web/frontend/stories/SidebarCard.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, within } from 'storybook/test';
+import SidebarCard from '../app/features/breweries/components/SidebarCard';
+
+const sidebarCardDescription = `Shared card shell used by the brewery detail page's sidebar sections (Location, Details, Beer styles, Community) — an uppercase eyebrow label over arbitrary content.`;
+
+const meta = {
+    title: 'Breweries/SidebarCard',
+    component: SidebarCard,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: sidebarCardDescription,
+            },
+        },
+    },
+} satisfies Meta<typeof SidebarCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        title: 'Details',
+        children: <p className="text-sm m-0">Founded 2014</p>,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByText('Details')).toBeInTheDocument();
+        await expect(canvas.getByText('Founded 2014')).toBeInTheDocument();
+    },
+};

web/frontend/stories/StarRating.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, fn, userEvent, within } from 'storybook/test';
+import StarRating from '../app/features/breweries/components/StarRating';
+
+const starRatingDescription = `Dual-purpose star control built on daisyUI's \`rating\` component. Read-only (no \`onChange\`) when used for an average or a display rating; interactive otherwise — clicking the currently-selected star clears the rating, since daisyUI radios can't do that natively.`;
+
+const meta = {
+    title: 'Breweries/StarRating',
+    component: StarRating,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: starRatingDescription,
+            },
+        },
+    },
+} satisfies Meta<typeof StarRating>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ReadOnly: Story = {
+    args: { value: 4, size: 'sm' },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.queryByRole('radio')).not.toBeInTheDocument();
+        await expect(canvas.getByLabelText('4 out of 5 stars')).toBeInTheDocument();
+    },
+};
+
+export const Interactive: Story = {
+    args: { value: 0, size: 'lg', onChange: fn() },
+    play: async ({ args, canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.click(canvas.getByRole('radio', { name: 'Rate 3 of 5' }));
+        await expect(args.onChange).toHaveBeenCalledWith(3);
+    },
+};
+
+export const InteractiveClearsOnRepeatClick: Story = {
+    args: { value: 3, size: 'lg', onChange: fn() },
+    play: async ({ args, canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.click(canvas.getByRole('radio', { name: 'Rate 3 of 5' }));
+        await expect(args.onChange).toHaveBeenCalledWith(0);
+    },
+};

web/frontend/stories/YourRatingCard.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, fn, userEvent, within } from 'storybook/test';
+import YourRatingCard from '../app/features/breweries/components/YourRatingCard';
+
+const yourRatingCardDescription = `Interactive 1-5 star rating control on the brewery detail page. The hint text switches once a rating is set, and clicking the selected star again clears it.`;
+
+const meta = {
+    title: 'Breweries/YourRatingCard',
+    component: YourRatingCard,
+    tags: ['autodocs'],
+    args: {
+        onChange: fn(),
+    },
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: yourRatingCardDescription,
+            },
+        },
+    },
+} satisfies Meta<typeof YourRatingCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Unrated: Story = {
+    args: { value: 0 },
+    play: async ({ args, canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByText('Tap a star to rate this brewery.')).toBeInTheDocument();
+        await userEvent.click(canvas.getByRole('radio', { name: 'Rate 4 of 5' }));
+        await expect(args.onChange).toHaveBeenCalledWith(4);
+    },
+};
+
+export const Rated: Story = {
+    args: { value: 4 },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(
+            canvas.getByText('You rated this 4 of 5. Tap the same star to clear.'),
+        ).toBeInTheDocument();
+    },
+};