@bearmenu/ui 0.8.8 → 0.8.10

package/dist/components/venue-wall.js

@@ -0,0 +1,118 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+function VenueWall({
+  places,
+  hrefs,
+  kicker,
+  kickerIcon,
+  headline,
+  body,
+  overflowLabel,
+  tileUrls,
+  action,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative flex flex-col gap-4 overflow-hidden rounded-[20px] bg-[oklch(0.21_0.012_55)] p-5 text-white lg:p-8",
+        className
+      ),
+      children: [
+        (tileUrls == null ? void 0 : tileUrls.length) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "absolute inset-0 grid auto-rows-fr grid-cols-4 gap-0.5 lg:grid-cols-6", children: Array.from({ length: 18 }, (_, cell) => (
+            // eslint-disable-next-line @next/next/no-img-element
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: tileUrls[cell % tileUrls.length],
+                alt: "",
+                loading: "lazy",
+                decoding: "async",
+                className: "h-full w-full object-cover"
+              },
+              cell
+            )
+          )) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "absolute inset-0 bg-[oklch(0.16_0.012_55_/_0.9)]"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute inset-0 bg-[repeating-linear-gradient(135deg,oklch(0.6_0.02_55)_0_9px,oklch(0.68_0.016_58)_9px_18px)] opacity-[0.18]"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative z-[1] flex flex-col gap-3", children: [
+          kicker && /* @__PURE__ */ jsxs("span", { className: "inline-flex w-max items-center gap-1.5 rounded-full bg-white/15 px-3 py-1.5 text-[11px] font-extrabold tracking-[0.11em]", children: [
+            kickerIcon,
+            kicker
+          ] }),
+          headline && /* @__PURE__ */ jsx("h3", { className: "max-w-[640px] font-serif text-[28px] font-semibold leading-[1.1] tracking-[-0.025em] lg:text-[40px]", children: headline }),
+          body && /* @__PURE__ */ jsx("p", { className: "hidden max-w-[540px] text-sm leading-[1.55] opacity-85 lg:block", children: body })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "relative z-[1] flex items-center gap-3 lg:hidden", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex", children: places.slice(0, 5).map((place, index) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "h-9 w-9 shrink-0 overflow-hidden rounded-full bg-white/20 ring-2 ring-[oklch(0.21_0.012_55)]",
+                index > 0 && "-ml-2.5"
+              ),
+              children: place.thumbnail_url && // eslint-disable-next-line @next/next/no-img-element
+              /* @__PURE__ */ jsx("img", { src: place.thumbnail_url, alt: "", className: "h-full w-full object-cover", loading: "lazy" })
+            },
+            place.slug
+          )) }),
+          overflowLabel && /* @__PURE__ */ jsx("span", { className: "text-[13px] font-medium opacity-85", children: overflowLabel })
+        ] }),
+        /* @__PURE__ */ jsxs("ul", { className: "relative z-[1] hidden flex-wrap items-center gap-2 lg:flex", children: [
+          places.map((place) => {
+            const avatar = /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "h-7 w-7 shrink-0 overflow-hidden rounded-full bg-white/20", children: place.thumbnail_url && // eslint-disable-next-line @next/next/no-img-element
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: place.thumbnail_url,
+                  alt: "",
+                  className: "h-full w-full object-cover",
+                  loading: "lazy"
+                }
+              ) }),
+              /* @__PURE__ */ jsx("span", { className: "truncate text-[12.5px] font-medium", children: place.name })
+            ] });
+            const chipClasses = "inline-flex max-w-[220px] items-center gap-2 rounded-full bg-white/10 py-1 pl-1 pr-3.5 backdrop-blur-[6px]";
+            return /* @__PURE__ */ jsx("li", { children: (hrefs == null ? void 0 : hrefs[place.slug]) ? /* @__PURE__ */ jsx(
+              LinkComponent,
+              {
+                href: hrefs[place.slug],
+                className: cn(
+                  chipClasses,
+                  "transition-colors hover:bg-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60"
+                ),
+                children: avatar
+              }
+            ) : /* @__PURE__ */ jsx("span", { className: chipClasses, children: avatar }) }, place.slug);
+          }),
+          overflowLabel && /* @__PURE__ */ jsx("li", { className: "inline-flex h-9 items-center rounded-full bg-white/10 px-4 text-[12.5px] opacity-80", children: overflowLabel })
+        ] }),
+        action && /* @__PURE__ */ jsx("div", { className: "relative z-[1] mt-1", children: action })
+      ]
+    }
+  );
+}
+
+export { VenueWall };

package/dist/components/weekday-theme-banner.d.ts

@@ -0,0 +1,70 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * WeekdayThemeBanner — the day's editorial theme, with the whole week beside it.
+ *
+ * Showing all seven days is the point: a banner that only says "it is Burger
+ * Thursday" is an assertion, while one that shows Wednesday was salads and
+ * Friday is pizza reads as a standing rhythm the reader can come back for. The
+ * other six days are also the only affordance for browsing to one.
+ *
+ * ## The active day is the caller's, not the component's
+ *
+ * `activeDay` is an index into `days`, resolved by the caller from the READER's
+ * clock. Resolving it here would use the server's, and a server in UTC and a
+ * reader in Bucharest disagree about which day it is for two hours out of every
+ * twenty-four.
+ *
+ * No directive: with `dayHref` the week rail is links and renders on the
+ * server; with `onDayChange` it is buttons and needs a client caller.
+ */
+type WeekdayThemeBannerLinkProps = {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+};
+type WeekdayThemeDay = {
+    /** Short code, e.g. "THU". Already localised. */
+    code: string;
+    /** Theme name, e.g. "Burger Thursday". */
+    name: string;
+    /** Short form for the rail, e.g. "Burger". Falls back to `name`. */
+    shortName?: string;
+    /** Items under the theme. Omit where there is no count to show. */
+    count?: number;
+};
+type WeekdayThemeBannerProps = {
+    days: WeekdayThemeDay[];
+    /** Index into `days` for the reader's own today. */
+    activeDay: number;
+    /** Kicker over the title, e.g. "TODAY IS THURSDAY". Composed by the caller. */
+    kicker?: string;
+    kickerIcon?: React.ReactNode;
+    /** The banner's body copy for the active day. */
+    body?: string;
+    /** Heading over the week rail, e.g. "THE WEEK". */
+    weekLabel?: string;
+    /** The primary action — pass a rendered button or link. */
+    action?: React.ReactNode;
+    /** Note beside the action, e.g. "Bruno picks nine, ranked on mentions". */
+    actionNote?: string;
+    /** Destination per day index. Renders the rail as links. */
+    dayHref?: (day: WeekdayThemeDay, index: number) => string;
+    /** Selects a day in place. Renders the rail as buttons. */
+    onDayChange?: (index: number) => void;
+    /**
+     * The day's photograph.
+     *
+     * This is the one editorial slot on a menu hub that carries a plated dish,
+     * and it can because these are art-directed assets shipped with the app, not
+     * generated item photos pulled off a menu row. Without one the banner falls
+     * back to its flat ground and still reads — but the flat version is the
+     * degraded state, not the design.
+     */
+    imageUrl?: string;
+    linkComponent?: React.ComponentType<WeekdayThemeBannerLinkProps>;
+    className?: string;
+};
+declare function WeekdayThemeBanner({ days, activeDay, kicker, kickerIcon, body, weekLabel, action, actionNote, dayHref, onDayChange, imageUrl, linkComponent: LinkComponent, className, }: WeekdayThemeBannerProps): react_jsx_runtime.JSX.Element | null;
+
+export { WeekdayThemeBanner, type WeekdayThemeBannerLinkProps, type WeekdayThemeBannerProps, type WeekdayThemeDay };

package/dist/components/weekday-theme-banner.js

@@ -0,0 +1,127 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+function WeekdayThemeBanner({
+  days,
+  activeDay,
+  kicker,
+  kickerIcon,
+  body,
+  weekLabel,
+  action,
+  actionNote,
+  dayHref,
+  onDayChange,
+  imageUrl,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
+  const active = days[activeDay];
+  if (!active) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative grid overflow-hidden rounded-[18px] bg-[linear-gradient(120deg,oklch(0.32_0.06_45),oklch(0.24_0.04_40))] text-white lg:grid-cols-[1fr_auto]",
+        className
+      ),
+      children: [
+        imageUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: imageUrl,
+              alt: "",
+              "aria-hidden": true,
+              className: "absolute inset-0 h-full w-full object-cover"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "absolute inset-0 bg-[linear-gradient(100deg,oklch(0.18_0.03_45_/_0.94)_0%,oklch(0.18_0.03_45_/_0.82)_45%,oklch(0.18_0.03_45_/_0.66)_100%)]"
+            }
+          )
+        ] }),
+        !imageUrl && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute bottom-0 right-[28%] select-none font-serif text-[140px] font-bold leading-none text-white/[0.06]",
+            children: active.code
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative z-[1] flex flex-col gap-2.5 p-4 lg:gap-3 lg:p-6", children: [
+          kicker && /* @__PURE__ */ jsxs("span", { className: "inline-flex w-max items-center gap-1.5 rounded-full bg-white/15 px-2.5 py-1 text-[10.5px] font-bold tracking-[0.09em]", children: [
+            kickerIcon,
+            kicker
+          ] }),
+          /* @__PURE__ */ jsx("h3", { className: "font-serif text-[24px] font-semibold tracking-[-0.02em] lg:text-[36px]", children: active.name }),
+          body && /* @__PURE__ */ jsx("p", { className: "max-w-[520px] text-[13.5px] leading-[1.5] opacity-90", children: body }),
+          (action || actionNote) && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-3", children: [
+            action,
+            actionNote && /* @__PURE__ */ jsx("span", { className: "text-xs opacity-75", children: actionNote })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative z-[1] hidden border-t border-white/15 p-4 lg:block lg:min-w-[240px] lg:border-l lg:border-t-0 lg:p-5",
+              // Over a photograph the rail needs its own ground, or seven lines of
+              // small type land on whatever the plate happens to be.
+              imageUrl && "bg-black/45 backdrop-blur-[2px]"
+            ),
+            children: [
+              weekLabel && /* @__PURE__ */ jsx("div", { className: "mb-2 text-[10px] font-bold tracking-[0.12em] opacity-70", children: weekLabel }),
+              /* @__PURE__ */ jsx("ul", { className: "grid grid-cols-2 gap-x-4 sm:grid-cols-4 lg:grid-cols-1", children: days.map((day, index) => {
+                var _a;
+                const isActive = index === activeDay;
+                const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("b", { className: "w-8 shrink-0 font-mono text-[11px] font-medium opacity-70", children: day.code }),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: (_a = day.shortName) != null ? _a : day.name }),
+                  day.count != null && /* @__PURE__ */ jsx("span", { className: "shrink-0 tabular-nums opacity-70", children: day.count })
+                ] });
+                const rowClasses = cn(
+                  "flex w-full items-center gap-2 rounded transition-opacity",
+                  isActive ? "-mx-1.5 bg-white/10 px-1.5 py-1.5 text-[14.5px] font-extrabold" : "py-[5px] text-[12.5px] opacity-70 hover:opacity-100"
+                );
+                return /* @__PURE__ */ jsx("li", { children: dayHref ? /* @__PURE__ */ jsx(
+                  LinkComponent,
+                  {
+                    href: dayHref(day, index),
+                    className: cn(
+                      rowClasses,
+                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60"
+                    ),
+                    children: content
+                  }
+                ) : onDayChange ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-pressed": isActive,
+                    onClick: () => onDayChange(index),
+                    className: cn(
+                      rowClasses,
+                      "text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60"
+                    ),
+                    children: content
+                  }
+                ) : /* @__PURE__ */ jsx("span", { className: rowClasses, children: content }) }, day.code);
+              }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { WeekdayThemeBanner };

package/dist/components/weekend-panel.js

@@ -1,6 +1,6 @@
 import { useMediaQuery, DESKTOP_MEDIA_QUERY } from '../chunk-OPVKL4VS.js';
-import { MotionPlayPause } from '../chunk-TT3WFS6S.js';
-import '../chunk-2WDJR6K7.js';
+import { MotionPlayPause } from '../chunk-YOKHBAIH.js';
+import '../chunk-G7IFL4Z4.js';
 import { useDragSwipe } from '../chunk-IYDH5IU6.js';
 import { Skeleton } from '../chunk-QXHMPJ35.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.8",
+  "version": "0.8.10",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {

package/src/components/colour-dictionary.stories.tsx

@@ -0,0 +1,227 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+/**
+ * Foundations / Colour dictionary — every colour a menu surface paints, in one
+ * table grouped by the forest element it is, with the reason beside it. A page,
+ * not a component: the values live in the consuming app (see the notes under
+ * the table), this is where a person goes to understand them.
+ */
+
+type Chip = { label: string; value: string };
+
+type Row = {
+  element: string;
+  why: string;
+  /** The three `--menu-field-<family>-<n>` tints, when this element is a card-field family. */
+  field?: { family: string; tints: [string, string, string]; draws: string };
+  /** `FAMILY_HUES` entries painted by the hub's family cards (chips, price band, photo tint). */
+  familyCards: Chip[];
+  /** `INTENT_GRADIENTS` entries painted by the hub's intent tiles. */
+  intents: Chip[];
+};
+
+const ROWS: Row[] = [
+  {
+    element: "Wheat and honey",
+    why: "Grain and what goes on it — crust, pasta, pizza base, pastry, yolk — is this gold before it is cooked. Honey in the comb is the same colour, and so is morning light on toast, which is why brunch and beer (roasted malt) sit here too.",
+    field: { family: "larder", tints: ["oklch(0.505 0.11 74)", "oklch(0.555 0.105 80)", "oklch(0.465 0.115 68)"], draws: "bread, pasta, pizza, eggs, sides, sauces, spirits" },
+    familyCards: [{ label: "Breakfast & brunch", value: "oklch(0.62 0.14 82)" }, { label: "Bakeries", value: "oklch(0.58 0.11 72)" }, { label: "Beer", value: "oklch(0.62 0.13 86)" }],
+    intents: [{ label: "Brunch", value: "oklch(0.62 0.14 82)" }],
+  },
+  {
+    element: "Lake water",
+    why: "Fish, shellfish and soup come out of water, and a cocktail is a glass of it. A forest has a lake, not a sea: dark, blue-green, in shade — so the hue stays on the green side (198–220) and never reads as sky or as a pool.",
+    field: { family: "sea", tints: ["oklch(0.485 0.095 205)", "oklch(0.535 0.09 198)", "oklch(0.445 0.095 212)"], draws: "fish, shellfish, soups, cocktails" },
+    familyCards: [{ label: "Cocktails", value: "oklch(0.47 0.10 205)" }],
+    intents: [{ label: "Cocktail bars", value: "oklch(0.47 0.10 205)" }],
+  },
+  {
+    element: "Ember and terracotta",
+    why: "Meat is the family cooked over fire: the red of the coals, the crust on beef, cured and smoked meat. Red wine shares the glass and the colour. Terracotta is the same fire one step warmer — the oven's brick and the tomato — which is why Italian sits beside Romanian here.",
+    field: { family: "meat", tints: ["oklch(0.49 0.13 28)", "oklch(0.54 0.13 34)", "oklch(0.45 0.13 22)"], draws: "beef, game, cured meat, burgers, red wine" },
+    familyCards: [{ label: "Romanian", value: "oklch(0.48 0.16 25)" }, { label: "Italian", value: "oklch(0.56 0.15 38)" }],
+    intents: [{ label: "Burgers", value: "oklch(0.48 0.16 25)" }, { label: "Italian tonight", value: "oklch(0.56 0.15 38)" }],
+  },
+  {
+    element: "Maple and amber",
+    why: "Sugar turns this colour when it meets heat: caramel, syrup, the top of a crème brûlée, the maple leaf in autumn — and a pizza crust out of the oven, which is why the Pizza card wears it. Beer's amber is the same chemistry, malt roasted, so beer items draw this field even though the beer card wears honey.",
+    field: { family: "sweet", tints: ["oklch(0.505 0.14 50)", "oklch(0.555 0.135 58)", "oklch(0.465 0.14 44)"], draws: "desserts, pastry, beer" },
+    familyCards: [{ label: "Pizza", value: "oklch(0.52 0.14 58)" }],
+    intents: [],
+  },
+  {
+    element: "Fern and pine",
+    why: "The leaf itself. Salads, vegetables and the non-alcoholic glass — juice, lemonade, the herb in it — are the green things on the menu and take the forest's own green: pine-deep rather than lime, so it stays a forest and not a lawn.",
+    field: { family: "verdant", tints: ["oklch(0.505 0.115 148)", "oklch(0.555 0.11 138)", "oklch(0.465 0.115 156)"], draws: "salads, vegetables, non-alcoholic" },
+    familyCards: [{ label: "Vegetarian", value: "oklch(0.52 0.14 148)" }, { label: "Vegan", value: "oklch(0.55 0.12 135)" }],
+    intents: [{ label: "Vegan", value: "oklch(0.52 0.14 148)" }],
+  },
+  {
+    element: "Bark and walnut",
+    why: "The roasted bean is the colour of tree bark, and a coffee house is made of both — wood and roast. Walnut is the same brown darker: a lit doorway at night, which is what \"open right now\" looks like from the street. Coffee items themselves draw the non-alcoholic field (pine), not this.",
+    familyCards: [{ label: "Coffee", value: "oklch(0.44 0.10 52)" }],
+    intents: [{ label: "Coffee", value: "oklch(0.44 0.10 52)" }, { label: "Open right now", value: "oklch(0.44 0.08 62)" }],
+  },
+  {
+    element: "Rosehip",
+    why: "The forest's berry: the jam in the tart, the fruit on the cake, the glass of red. A red with no purple in it — the magenta and violet it replaced belong to no place a bear has been.",
+    familyCards: [{ label: "Wine by the glass", value: "oklch(0.48 0.14 12)" }],
+    intents: [{ label: "Patisseries", value: "oklch(0.52 0.15 12)" }],
+  },
+  {
+    element: "Moss in sun",
+    why: "The sunlit forest floor. Yellow-green because a terrace is the one intent about being outdoors in daylight; deeper than lime so it is ground, not a highlighter.",
+    familyCards: [],
+    intents: [{ label: "On a terrace", value: "oklch(0.60 0.13 122)" }],
+  },
+  {
+    element: "Stone",
+    why: "No colour of its own. An untagged dish gets it because there is no ingredient to be coloured by; Centru gets it because the town is the one intent that is a place and not a taste. Never a section mark — as a mark, grey reads as absent.",
+    field: { family: "neutral", tints: ["oklch(0.505 0.02 60)", "oklch(0.555 0.022 66)", "oklch(0.465 0.018 54)"], draws: "an untagged dish only" },
+    familyCards: [],
+    intents: [{ label: "In Centru", value: "oklch(0.50 0.03 70)" }],
+  },
+];
+
+const NOT_THESE: Chip[] = [
+  { label: "sky blue", value: "oklch(0.5 0.13 240)" },
+  { label: "teal", value: "oklch(0.55 0.12 190)" },
+  { label: "violet", value: "oklch(0.5 0.11 300)" },
+  { label: "magenta", value: "oklch(0.52 0.13 340)" },
+  { label: "olive-yellow", value: "oklch(0.58 0.12 95)" },
+];
+
+const darker = (value: string) =>
+  value.replace(/oklch\(([\d.]+) /, (_m, l: string) => `oklch(${(Number(l) - 0.09).toFixed(3)} `);
+
+function Swatch({ label, value, angle = 135, tall }: Chip & { angle?: number; tall?: boolean }) {
+  return (
+    <div className="flex w-[104px] shrink-0 flex-col gap-1">
+      <span
+        aria-hidden
+        className={tall ? "block h-14 rounded-lg" : "block h-9 rounded-lg"}
+        style={{ backgroundImage: `linear-gradient(${angle}deg, ${value}, ${darker(value)})` }}
+      />
+      <span className="text-[11px] font-semibold leading-tight">{label}</span>
+      <code className="text-[9.5px] leading-tight text-muted-foreground">{value.replace("oklch(", "").replace(")", "")}</code>
+    </div>
+  );
+}
+
+const TH = "px-3 py-2 text-left text-[11px] font-bold uppercase tracking-[0.08em] text-muted-foreground";
+const TD = "px-3 py-3 align-top";
+
+function ColourDictionaryPage() {
+  return (
+    <article className="mx-auto max-w-[1440px] px-6 py-7 text-foreground">
+      <p className="text-[11px] font-bold uppercase tracking-[0.09em] text-muted-foreground">Foundations</p>
+      <h1 className="mt-0.5 text-[26px] font-extrabold tracking-[-0.02em]">The menu colour dictionary</h1>
+      <p className="mt-1 max-w-[90ch] text-[14px] leading-[1.55] text-foreground/85">
+        Every hue is a forest object, at full strength — the floor and canopy of a forest and what a bear eats off it.
+        Every colour a menu surface paints is in this table, grouped by the element it is, with why it belongs.
+        <span className="ml-2 inline-flex items-center gap-2 align-middle text-[12px] text-muted-foreground">
+          Not in the forest, so not in the palette:
+          {NOT_THESE.map((c) => (
+            <span key={c.label} className="inline-flex items-center gap-1 line-through">
+              <span aria-hidden className="inline-block h-3.5 w-5 rounded-sm" style={{ background: c.value }} />
+              {c.label}
+            </span>
+          ))}
+        </span>
+      </p>
+
+      <div className="mt-5 overflow-x-auto rounded-xl border border-border">
+        <table className="w-full min-w-[1180px] border-collapse text-[13px]">
+          <thead className="bg-muted/60">
+            <tr>
+              <th className={`${TH} w-[290px]`}>Element · why it belongs</th>
+              <th className={TH}>Card fields · the three tints</th>
+              <th className={TH}>Family cards · chips, price band, photo tint</th>
+              <th className={TH}>Intent tiles</th>
+            </tr>
+          </thead>
+          <tbody>
+            {ROWS.map((row) => (
+              <tr key={row.element} className="border-t border-border">
+                <td className={TD}>
+                  <div className="text-[15px] font-extrabold tracking-[-0.01em]">{row.element}</div>
+                  <p className="mt-1 text-[12.5px] leading-[1.5] text-foreground/85">{row.why}</p>
+                </td>
+                <td className={TD}>
+                  {row.field ? (
+                    <div className="flex flex-col gap-2">
+                      <div className="flex gap-2">
+                        {row.field.tints.map((tint, index) => (
+                          <Swatch key={tint} label={`${row.field!.family}-${index}`} value={tint} tall />
+                        ))}
+                      </div>
+                      <div className="text-[11.5px] text-muted-foreground">
+                        <span className="font-semibold text-foreground/80">draws</span> {row.field.draws}
+                      </div>
+                    </div>
+                  ) : (
+                    <span className="text-[12px] text-muted-foreground">—</span>
+                  )}
+                </td>
+                <td className={TD}>
+                  {row.familyCards.length ? (
+                    <div className="flex gap-2">
+                      {row.familyCards.map((c) => (
+                        <Swatch key={c.label} {...c} angle={150} />
+                      ))}
+                    </div>
+                  ) : (
+                    <span className="text-[12px] text-muted-foreground">—</span>
+                  )}
+                </td>
+                <td className={TD}>
+                  {row.intents.length ? (
+                    <div className="flex gap-2">
+                      {row.intents.map((c) => (
+                        <Swatch key={c.label} {...c} angle={150} />
+                      ))}
+                    </div>
+                  ) : (
+                    <span className="text-[12px] text-muted-foreground">—</span>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="mt-8 grid gap-8 md:grid-cols-3">
+        <section>
+          <h2 className="text-[15px] font-extrabold">How a colour is chosen</h2>
+          <ol className="mt-2 list-decimal space-y-1.5 pl-4 text-[13px] leading-[1.55] text-foreground/85">
+            <li><b>What is the family made of, or where is it consumed?</b> Grain, fire, water, sugar, leaf; a night out, a morning, the town.</li>
+            <li><b>Which forest element already has that colour — literally?</b> Wheat is gold, embers are red, lake water is blue-green. If nothing in a forest has it, it does not go in; that is how violet and magenta left.</li>
+            <li><b>Take it at full strength.</b> An early pass pulled every chroma down to feel earthy and read as faded. Keep lightness 0.44–0.62 so white type at 0.26–0.30 alpha stays readable.</li>
+          </ol>
+        </section>
+        <section>
+          <h2 className="text-[15px] font-extrabold">The colour names a family, never an item</h2>
+          <p className="mt-2 text-[13px] leading-[1.55] text-foreground/85">
+            Sixteen appetizers draw one colour. Two dishes in one family differ only by one of the three tints, keyed on the parent concept so the same dish is the same tint on every menu and after every re-sort. A category's section mark always uses tint <code>-0</code>. Where a family has both a card and an intent tile, they share the value so the two doors to one page agree.
+          </p>
+        </section>
+        <section>
+          <h2 className="text-[15px] font-extrabold">Where the values live</h2>
+          <p className="mt-2 text-[13px] leading-[1.55] text-foreground/85">
+            The design system owns the typography, the falloff and the layering (<code>MenuField</code>, <code>MenuFamilyCard</code>, <code>MenuIntentTiles</code>) and takes a finished colour as a prop. The palette lives in the fe app: the eighteen <code>--menu-field-*</code> tokens in <code>app/globals.css</code>, <code>FAMILY_HUES</code> and <code>INTENT_GRADIENTS</code> in <code>hub-gradients.ts</code>, category → family in <code>category-colors.ts</code>. The Storybook mocks carry the same values so post-generator films what the app paints.
+          </p>
+        </section>
+      </div>
+    </article>
+  );
+}
+
+const meta: Meta<typeof ColourDictionaryPage> = {
+  title: "Foundations/Colour dictionary",
+  component: ColourDictionaryPage,
+  parameters: { layout: "fullscreen" },
+};
+export default meta;
+
+export const Page: StoryObj<typeof ColourDictionaryPage> = {};