@bearmenu/ui 0.8.13 → 0.8.15

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

@@ -23,66 +23,189 @@ type Row = {
 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.",
+    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. Old gold, honey at the bottom of the jar, is the celebration. Turmeric and toasted sesame are honey's dark end: Indian and Middle Eastern sit under the bakeries because the gold is the same gold, taken out of the sun.",
     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)" }],
+    intents: [{ label: "Brunch", value: "oklch(0.62 0.14 82)" }, { label: "Special occasion", value: "oklch(0.52 0.11 78)" }],
   },
   {
     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.",
+    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. After dark it is the one thing in the forest that is still a colour, so night is the lake with the light gone — not a sky, not a plum. Japanese is lake water because a Japanese kitchen starts with dashi, a clear cold stock, and ends with the fish; sushi is the fish near the surface, the light end; bacalhau is the cold deep.",
     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)" }],
+    familyCards: [{ label: "Cocktails", value: "oklch(0.47 0.10 205)" }, { label: "Clubs", value: "oklch(0.34 0.06 210)" }],
+    intents: [{ label: "Cocktail bars", value: "oklch(0.47 0.10 205)" }, { label: "With a view", value: "oklch(0.53 0.09 198)" }, { label: "Late night", value: "oklch(0.37 0.065 218)" }],
   },
   {
     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.",
+    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. The fire is also what people sit around. Everything cooked on coals sits here (the mangal, the parrilla, the tabletop grill) and everything red from the tomato: shakshuka, chili, pimentón. Lacquer red is the wok's fire. Chroma down is the ember banked, not the colour faded.",
     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)" }],
+    intents: [{ label: "Burgers", value: "oklch(0.48 0.16 25)" }, { label: "Italian tonight", value: "oklch(0.56 0.15 38)" }, { label: "With friends", value: "oklch(0.53 0.14 34)" }, { label: "A lively night", value: "oklch(0.58 0.15 30)" }],
   },
   {
     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.",
+    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. Maple is American before it is anything else; syrup in autumn sun is the element's bright end and the one cuisine that wears it.",
     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: [],
+    intents: [{ label: "Something sweet", value: "oklch(0.58 0.13 60)" }, { label: "With kids", value: "oklch(0.51 0.14 48)" }],
   },
   {
     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.",
+    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. In shade, with the chroma down, it is the quietest place in the forest. A cuisine is the leaf when the leaf is the dish: tabbouleh, the herb plate beside the pho, the green curry, the tea leaf itself. In shade it is cabbage and dill; at its darkest, the mint in the glass and the spruce.",
     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)" }],
+    familyCards: [{ label: "Vegetarian", value: "oklch(0.48 0.13 150)" }, { label: "Vegan", value: "oklch(0.55 0.12 135)" }],
+    intents: [{ label: "Vegan", value: "oklch(0.55 0.12 135)" }, { label: "Somewhere quiet", value: "oklch(0.43 0.09 156)" }],
   },
   {
     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.",
+    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. Bark in sun, one step lighter, is the trunk on the walk. Browned butter, adobo cooked down, the pub's oak and the beer hall's: bark is the kitchen that is wood and roast, and clay dried in the sun is the same colour, which is where the güveç sits. 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)" }],
+    intents: [{ label: "Coffee", value: "oklch(0.44 0.10 52)" }, { label: "Open right now", value: "oklch(0.44 0.08 62)" }, { label: "Laptop and coffee", value: "oklch(0.41 0.10 50)" }, { label: "With your dog", value: "oklch(0.54 0.08 66)" }],
   },
   {
     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.",
+    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. The berry is also the beetroot, the pomegranate and the açaí — held under L 0.50 so it stays wine and never rose.",
     familyCards: [{ label: "Wine by the glass", value: "oklch(0.48 0.14 12)" }],
-    intents: [{ label: "Patisseries", value: "oklch(0.52 0.15 12)" }],
+    intents: [{ label: "Patisseries", value: "oklch(0.52 0.15 12)" }, { label: "Date night", value: "oklch(0.41 0.15 10)" }],
   },
   {
     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.",
+    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. Trodden, it is the pitch. The sunlit hillside is also the olive grove, the rice terrace, and the forest's edge where meadow meets trees — which is fusion, because that edge is the one hue that is both gold and green.",
     familyCards: [],
-    intents: [{ label: "On a terrace", value: "oklch(0.60 0.13 122)" }],
+    intents: [{ label: "On a terrace (ranking)", value: "oklch(0.60 0.13 122)" }, { label: "On a terrace (occasion)", value: "oklch(0.57 0.125 126)" }, { label: "Match day", value: "oklch(0.47 0.12 130)" }],
   },
   {
     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.",
+    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. International is stone for the reason an untagged dish is: nothing to be coloured by, a step below the town's so the two greys are not one.",
     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)" }],
   },
 ];
 
+/**
+ * Every tile destination in the consumer app, in the order each grid draws
+ * them, with the shade it owns. Mirrors the fe's `hub-gradients.ts` tables
+ * (`FAMILY_HUES`, `VENUE_TYPE_HUES`, `OCCASION_HUES`), whose test pins the
+ * rule: no two destinations share a value. Brunch is the one alias — its
+ * occasion tile opens the breakfast-brunch cuisine page, so it is that colour.
+ */
+type TileGrid = { title: string; where: string; tiles: (Chip & { element: string })[] };
+
+const TILE_GRIDS: TileGrid[] = [
+  {
+    title: "Menu hub · cuisines",
+    where: "/menu, seven tiles and the index",
+    tiles: [
+      { label: "Italian", value: "oklch(0.56 0.15 38)", element: "Ember and terracotta" },
+      { label: "Romanian", value: "oklch(0.48 0.16 25)", element: "Ember" },
+      { label: "Breakfast & brunch", value: "oklch(0.62 0.14 82)", element: "Wheat and honey" },
+      { label: "Vegetarian", value: "oklch(0.48 0.13 150)", element: "Fern and pine" },
+      { label: "Pizza", value: "oklch(0.52 0.14 58)", element: "Maple and amber" },
+      { label: "Vegan", value: "oklch(0.55 0.12 135)", element: "Fern" },
+      { label: "Bakeries", value: "oklch(0.58 0.11 72)", element: "Wheat and honey" },
+      { label: "All cuisines", value: "oklch(0.50 0.03 70)", element: "Stone" },
+    ],
+  },
+  {
+    title: "Drinks hub · going-out families",
+    where: "/menu/drinks, five tiles and the index",
+    tiles: [
+      { label: "Bars", value: "oklch(0.47 0.10 205)", element: "Lake water" },
+      { label: "Pubs", value: "oklch(0.55 0.13 72)", element: "Wheat and honey" },
+      { label: "Wine bars", value: "oklch(0.44 0.15 18)", element: "Rosehip" },
+      { label: "Cafés", value: "oklch(0.44 0.10 52)", element: "Bark and walnut" },
+      { label: "Clubs", value: "oklch(0.34 0.06 210)", element: "Lake water, after dark" },
+      { label: "All families", value: "oklch(0.50 0.03 70)", element: "Stone" },
+    ],
+  },
+  {
+    title: "Home · occasions",
+    where: "the seven on the home grid first, in the day's order, then the index",
+    tiles: [
+      { label: "Brunch", value: "oklch(0.62 0.14 82)", element: "Wheat and honey — alias of Breakfast & brunch" },
+      { label: "Laptop and coffee", value: "oklch(0.41 0.10 50)", element: "Walnut, the roast end" },
+      { label: "Somewhere quiet", value: "oklch(0.43 0.09 156)", element: "Pine, in shade" },
+      { label: "Something sweet", value: "oklch(0.58 0.13 60)", element: "Maple and amber" },
+      { label: "With friends", value: "oklch(0.53 0.14 34)", element: "Ember" },
+      { label: "Date night", value: "oklch(0.41 0.15 10)", element: "Rosehip, dark" },
+      { label: "Late night", value: "oklch(0.37 0.065 218)", element: "Lake water, after dark" },
+      { label: "All occasions", value: "oklch(0.50 0.03 70)", element: "Stone" },
+      { label: "A special occasion", value: "oklch(0.52 0.11 78)", element: "Old gold" },
+      { label: "A lively night", value: "oklch(0.58 0.15 30)", element: "Ember, flaring" },
+      { label: "With the kids", value: "oklch(0.51 0.14 48)", element: "Amber, syrup" },
+      { label: "With your dog", value: "oklch(0.54 0.08 66)", element: "Bark in sun" },
+      { label: "Match day", value: "oklch(0.47 0.12 130)", element: "Moss, trodden" },
+      { label: "On a terrace", value: "oklch(0.57 0.125 126)", element: "Moss in sun" },
+      { label: "With a view", value: "oklch(0.53 0.09 198)", element: "Lake water, light end" },
+    ],
+  },
+];
+
+/**
+ * Every cuisine the API knows, in the consumer app's `CUISINE_HUES` (typed
+ * against the enum there, so a new cuisine cannot fall to stone). Cluj's 38
+ * first, in the order the cuisines index lists them; the rest after. The
+ * warm arc (44–86°) is nearly full — below L 0.48 the sRGB gamut caps chroma
+ * at bark's, so "dark amber" IS the cafés — which is why american, spanish,
+ * lebanese and colombian sit at the bright end, the only free cells left.
+ */
+const CUISINE_TILES: (Chip & { element: string })[] = [
+  { label: "International", value: "oklch(0.44 0.03 62)", element: "Stone, in shade — no ingredient to be coloured by" },
+  { label: "Breakfast & brunch", value: "oklch(0.62 0.14 82)", element: "Wheat and honey" },
+  { label: "Romanian", value: "oklch(0.48 0.16 25)", element: "Ember" },
+  { label: "Bakery", value: "oklch(0.58 0.11 72)", element: "Wheat and honey" },
+  { label: "Italian", value: "oklch(0.56 0.15 38)", element: "Ember, terracotta" },
+  { label: "Pizza", value: "oklch(0.52 0.14 58)", element: "Maple and amber" },
+  { label: "Fast food", value: "oklch(0.38 0.10 20)", element: "Ember, banked" },
+  { label: "Vegetarian", value: "oklch(0.48 0.13 150)", element: "Fern and pine" },
+  { label: "American", value: "oklch(0.62 0.125 62)", element: "Maple syrup in autumn sun" },
+  { label: "Vegan", value: "oklch(0.55 0.12 135)", element: "Fern" },
+  { label: "Mediterranean", value: "oklch(0.50 0.08 126)", element: "Moss — the olive grove" },
+  { label: "Seafood", value: "oklch(0.44 0.075 220)", element: "Lake water, the deep" },
+  { label: "Eastern European", value: "oklch(0.38 0.085 155)", element: "Fern in shade — cabbage, dill" },
+  { label: "Fusion", value: "oklch(0.52 0.12 122)", element: "Moss — the forest's edge" },
+  { label: "Middle Eastern", value: "oklch(0.42 0.08 84)", element: "Wheat, the dark end — sesame" },
+  { label: "BBQ", value: "oklch(0.44 0.14 38)", element: "Ember — the coals" },
+  { label: "Deli", value: "oklch(0.48 0.10 66)", element: "Bark — rye crust" },
+  { label: "Steakhouse", value: "oklch(0.36 0.13 32)", element: "Ember, dark — the sear" },
+  { label: "Japanese", value: "oklch(0.50 0.085 220)", element: "Lake water — dashi" },
+  { label: "French", value: "oklch(0.48 0.07 46)", element: "Bark — beurre noisette" },
+  { label: "Sushi", value: "oklch(0.56 0.09 212)", element: "Lake water, light end" },
+  { label: "Turkish", value: "oklch(0.54 0.10 46)", element: "Bark — clay" },
+  { label: "Chinese", value: "oklch(0.40 0.15 22)", element: "Ember — lacquer red" },
+  { label: "Mexican", value: "oklch(0.54 0.16 24)", element: "Ember — chili and tomato" },
+  { label: "Korean", value: "oklch(0.44 0.11 24)", element: "Ember, muted — gochujang" },
+  { label: "Greek", value: "oklch(0.42 0.095 122)", element: "Moss in shade — the olive" },
+  { label: "Indian", value: "oklch(0.46 0.09 82)", element: "Wheat, deep — turmeric" },
+  { label: "British", value: "oklch(0.58 0.09 56)", element: "Bark in sun — the pub's oak" },
+  { label: "Thai", value: "oklch(0.44 0.13 139)", element: "Fern — green curry" },
+  { label: "Spanish", value: "oklch(0.60 0.13 44)", element: "Ember, bright — pimentón" },
+  { label: "German", value: "oklch(0.40 0.07 62)", element: "Bark, dark — the beer hall" },
+  { label: "Vietnamese", value: "oklch(0.46 0.095 143)", element: "Fern in shade — the herb plate" },
+  { label: "Lebanese", value: "oklch(0.60 0.13 150)", element: "Fern in sun — parsley" },
+  { label: "Cuban", value: "oklch(0.36 0.10 135)", element: "Fern, darkest — mint, tobacco leaf" },
+  { label: "Filipino", value: "oklch(0.36 0.07 60)", element: "Walnut — adobo" },
+  { label: "Brazilian", value: "oklch(0.42 0.11 8)", element: "Rosehip — açaí" },
+  { label: "Israeli", value: "oklch(0.50 0.11 30)", element: "Ember, brick — shakshuka" },
+  { label: "Portuguese", value: "oklch(0.40 0.06 198)", element: "Lake water, dark — bacalhau" },
+  { label: "Argentinian", value: "oklch(0.38 0.11 44)", element: "Ember, rust — the parrilla" },
+  { label: "Burmese", value: "oklch(0.52 0.125 153)", element: "Fern — the tea leaf" },
+  { label: "Colombian", value: "oklch(0.62 0.11 140)", element: "Fern in sun — the coffee hills" },
+  { label: "Indonesian", value: "oklch(0.54 0.085 122)", element: "Moss — the rice terrace" },
+  { label: "Malaysian", value: "oklch(0.56 0.135 151)", element: "Fern — pandan" },
+  { label: "Moroccan", value: "oklch(0.58 0.10 140)", element: "Fern in sun — mint tea" },
+  { label: "Nepalese", value: "oklch(0.38 0.085 122)", element: "Moss in shade — the terraces" },
+  { label: "Pakistani", value: "oklch(0.58 0.115 36)", element: "Ember, terracotta — the karahi" },
+  { label: "Persian", value: "oklch(0.36 0.14 16)", element: "Rosehip, darkest — pomegranate" },
+  { label: "Peruvian", value: "oklch(0.52 0.07 56)", element: "Bark, pale — the potato" },
+  { label: "Puerto Rican", value: "oklch(0.50 0.135 137)", element: "Fern — recaíto" },
+  { label: "Russian", value: "oklch(0.46 0.12 8)", element: "Rosehip — beetroot" },
+  { label: "Scandinavian", value: "oklch(0.40 0.11 150)", element: "Fern — the spruce" },
+  { label: "Singaporean", value: "oklch(0.40 0.105 134)", element: "Moss in shade — pandan, kaya" },
+  { label: "Taiwanese", value: "oklch(0.54 0.09 153)", element: "Fern, grey-green — oolong" },
+];
+
 const NOT_THESE: Chip[] = [
   { label: "sky blue", value: "oklch(0.5 0.13 240)" },
   { label: "teal", value: "oklch(0.55 0.12 190)" },
@@ -108,8 +231,7 @@ function Swatch({ label, value, angle = 135, tall }: Chip & { angle?: number; ta
   );
 }
 
-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";
+const TH = "text-left text-[11px] font-bold uppercase tracking-[0.08em] text-muted-foreground";
 
 function ColourDictionaryPage() {
   return (
@@ -119,6 +241,7 @@ function ColourDictionaryPage() {
       <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.
+        One destination, one shade: every page a tile opens has its own value, two tiles share one only when they open the same page, and two tiles that can sit in the same grid differ by element or by a lightness step a phone can see in daylight.
         <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) => (
@@ -130,74 +253,137 @@ function ColourDictionaryPage() {
         </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>
+      {/* One block per element, the prose across the top and the three swatch
+          groups in one row under it. The old four-column table put the "why"
+          in a 290px column, so every row was as tall as its wrapped paragraph
+          and the three swatch columns beside it were mostly air. The list is
+          capped and scrolls on its own so the tile grids and the method stay
+          within reach. */}
+      <div className="mt-5 max-h-[70vh] overflow-y-auto rounded-xl border border-border">
+        <div className="sticky top-0 z-10 flex gap-6 border-b border-border bg-muted/60 px-4 py-2 backdrop-blur">
+          <span className={TH}>Element · why it belongs</span>
+          <span className={TH}>Card fields · the three tints</span>
+          <span className={TH}>Family cards · chips, price band, photo tint</span>
+          <span className={TH}>Intent tiles</span>
+        </div>
+        {ROWS.map((row, index) => (
+          <section
+            key={row.element}
+            className={index > 0 ? "border-t border-border px-4 py-4" : "px-4 py-4"}
+          >
+            <div className="flex flex-wrap items-baseline gap-x-4 gap-y-1">
+              <h3 className="text-[15px] font-extrabold tracking-[-0.01em]">{row.element}</h3>
+              <p className="max-w-[110ch] text-[12.5px] leading-[1.5] text-foreground/85">{row.why}</p>
+            </div>
+            <div className="mt-3 flex flex-wrap gap-x-10 gap-y-3">
+              {row.field && (
+                <div className="flex flex-col gap-1.5">
+                  <span className="text-[10.5px] font-bold uppercase tracking-[0.08em] text-muted-foreground">
+                    Card fields
+                  </span>
+                  <div className="flex gap-2">
+                    {row.field.tints.map((tint, tintIndex) => (
+                      <Swatch key={tint} label={`${row.field!.family}-${tintIndex}`} 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>
+              )}
+              {row.familyCards.length > 0 && (
+                <div className="flex flex-col gap-1.5">
+                  <span className="text-[10.5px] font-bold uppercase tracking-[0.08em] text-muted-foreground">
+                    Family cards
+                  </span>
+                  <div className="flex flex-wrap gap-2">
+                    {row.familyCards.map((c) => (
+                      <Swatch key={c.label} {...c} angle={150} />
+                    ))}
+                  </div>
+                </div>
+              )}
+              {row.intents.length > 0 && (
+                <div className="flex flex-col gap-1.5">
+                  <span className="text-[10.5px] font-bold uppercase tracking-[0.08em] text-muted-foreground">
+                    Intent tiles
+                  </span>
+                  <div className="flex flex-wrap gap-2">
+                    {row.intents.map((c) => (
+                      <Swatch key={c.label} {...c} angle={150} />
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </section>
+        ))}
       </div>
 
+      <section className="mt-10">
+        <h2 className="text-[15px] font-extrabold">The tiles — one destination, one shade</h2>
+        <p className="mt-1 max-w-[90ch] text-[13px] leading-[1.55] text-foreground/85">
+          Every tile in the consumer app, each grid in the order it draws them. No value appears twice across the three
+          grids except stone, which closes each one, and brunch, which opens the same page from two grids.
+        </p>
+        <div className="mt-4 flex flex-col gap-6">
+          {TILE_GRIDS.map((grid) => (
+            <div key={grid.title}>
+              <div className="flex items-baseline gap-2">
+                <h3 className="text-[13px] font-bold">{grid.title}</h3>
+                <span className="text-[11.5px] text-muted-foreground">{grid.where}</span>
+              </div>
+              <div className="mt-2 grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-8">
+                {grid.tiles.map((tile) => (
+                  <div key={tile.label} className="flex flex-col gap-1">
+                    <span
+                      aria-hidden
+                      className="flex aspect-[16/10] items-end rounded-xl p-2.5 text-[12px] font-extrabold leading-tight text-white lg:aspect-[2/1]"
+                      style={{ backgroundImage: `linear-gradient(150deg, ${tile.value}, ${darker(tile.value)})` }}
+                    >
+                      {tile.label}
+                    </span>
+                    <span className="text-[11px] leading-tight text-muted-foreground">{tile.element}</span>
+                    <code className="text-[9.5px] leading-tight text-muted-foreground">{tile.value.replace("oklch(", "").replace(")", "")}</code>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-8">
+          <div className="flex items-baseline gap-2">
+            <h3 className="text-[13px] font-bold">Cuisines index · every cuisine the API knows</h3>
+            <span className="text-[11.5px] text-muted-foreground">
+              /menu/cuisines — Cluj's 38 first in the order the index lists them, then the other 15; 53 values, 53 shades
+            </span>
+          </div>
+          <div className="mt-2 grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-8">
+            {CUISINE_TILES.map((tile) => (
+              <div key={tile.label} className="flex flex-col gap-1">
+                <span
+                  aria-hidden
+                  className="flex aspect-[16/10] items-end rounded-xl p-2.5 text-[12px] font-extrabold leading-tight text-white lg:aspect-[2/1]"
+                  style={{ backgroundImage: `linear-gradient(150deg, ${tile.value}, ${darker(tile.value)})` }}
+                >
+                  {tile.label}
+                </span>
+                <span className="text-[11px] leading-tight text-muted-foreground">{tile.element}</span>
+                <code className="text-[9.5px] leading-tight text-muted-foreground">{tile.value.replace("oklch(", "").replace(")", "")}</code>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
       <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>
+            <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 where translucent white type (0.26–0.30 alpha) sits on it; a tile that prints solid white may go down to 0.34 — the lake after dark, the roast end of walnut.</li>
           </ol>
         </section>
         <section>
@@ -209,7 +395,7 @@ function ColourDictionaryPage() {
         <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>MenuFamilyTiles</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.
+            The design system owns the typography, the falloff and the layering (<code>MenuField</code>, <code>MenuFamilyCard</code>, <code>DoorwayTiles</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>

package/src/components/doorway-tiles.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { DoorwayTiles } from "./doorway-tiles";
+import {
+  mockFamilyTiles,
+  mockFamilyTilesAll,
+  mockOccasionTiles,
+  mockOccasionTilesAll,
+} from "./menu-mocks";
+
+const meta: Meta<typeof DoorwayTiles> = {
+  title: "Menu/DoorwayTiles",
+  component: DoorwayTiles,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A grid of doors — every class the reader browses by, as coloured tiles closed by one tile that opens the whole index. Two treatments, one rule: a tile about a thing (a cuisine, a family) prints one photograph as a tilted polaroid on the hue; a tile about a mood (an occasion) uses the photograph as the ground, multiplied by the hue. Two to a row on a phone, four from `lg`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DoorwayTiles>;
+
+export const Polaroid: Story = {
+  args: { treatment: "polaroid", tiles: mockFamilyTiles, all: mockFamilyTilesAll },
+};
+
+export const PolaroidMobile: Story = {
+  args: { treatment: "polaroid", tiles: mockFamilyTiles, all: mockFamilyTilesAll },
+  decorators: [
+    (Story) => (
+      <div className="w-[375px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/** Every tile without a photograph: the initial fills the polaroid. */
+export const PolaroidWithoutPhotos: Story = {
+  args: {
+    treatment: "polaroid",
+    tiles: mockFamilyTiles.map(({ photoUrl: _photoUrl, ...tile }) => tile),
+  },
+};
+
+export const PolaroidPartial: Story = {
+  args: { treatment: "polaroid", tiles: mockFamilyTiles.slice(0, 5) },
+};
+
+/** The occasions: the mood's hue multiplied over a room. */
+export const Ground: Story = {
+  args: { treatment: "ground", tiles: mockOccasionTiles, all: mockOccasionTilesAll },
+};
+
+export const GroundMobile: Story = {
+  args: { treatment: "ground", tiles: mockOccasionTiles, all: mockOccasionTilesAll },
+  decorators: [
+    (Story) => (
+      <div className="w-[375px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/** No photographs at all: the initial on the bare hue. */
+export const GroundWithoutPhotos: Story = {
+  args: {
+    treatment: "ground",
+    tiles: mockOccasionTiles.map(({ photoUrl: _photoUrl, ...tile }) => tile),
+  },
+};

package/src/components/doorway-tiles.test.tsx

@@ -0,0 +1,51 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { DoorwayTiles } from "./doorway-tiles";
+import {
+  mockFamilyTiles,
+  mockFamilyTilesAll,
+  mockOccasionTiles,
+  mockOccasionTilesAll,
+} from "./menu-mocks";
+
+describe("DoorwayTiles", () => {
+  it("renders one link per door plus the index tile, in order", () => {
+    render(
+      <DoorwayTiles treatment="polaroid" tiles={mockFamilyTiles} all={mockFamilyTilesAll} />,
+    );
+    const links = screen.getAllByRole("link");
+    expect(links).toHaveLength(mockFamilyTiles.length + 1);
+    expect(links[0]).toHaveAttribute("href", mockFamilyTiles[0].href);
+    expect(links.at(-1)).toHaveAttribute("href", mockFamilyTilesAll.href);
+    expect(links.at(-1)).toHaveTextContent(mockFamilyTilesAll.label);
+  });
+
+  // A door without a photograph keeps the polaroid — the initial fills it —
+  // so a row of seven never has one tile with a different silhouette.
+  it("draws the initial where a polaroid door has no photograph", () => {
+    const [withPhoto, withoutPhoto] = [mockFamilyTiles[0], mockFamilyTiles.at(-1)!];
+    expect(withoutPhoto.photoUrl).toBeUndefined();
+    render(<DoorwayTiles treatment="polaroid" tiles={[withPhoto, withoutPhoto]} />);
+    expect(document.querySelectorAll("img")).toHaveLength(1);
+    expect(screen.getByText(withoutPhoto.label.charAt(0))).toBeInTheDocument();
+  });
+
+  it("omits the index tile when no index is given", () => {
+    render(<DoorwayTiles treatment="polaroid" tiles={mockFamilyTiles.slice(0, 3)} />);
+    expect(screen.getAllByRole("link")).toHaveLength(3);
+  });
+
+  it("ground: the photograph is the tile, multiplied, and no polaroid is printed", () => {
+    render(
+      <DoorwayTiles treatment="ground" tiles={mockOccasionTiles} all={mockOccasionTilesAll} />,
+    );
+    const withPhoto = [...mockOccasionTiles, mockOccasionTilesAll].filter((t) => t.photoUrl);
+    const images = document.querySelectorAll("img");
+    expect(images).toHaveLength(withPhoto.length);
+    for (const img of images) expect(img.className).toContain("mix-blend-multiply");
+    expect(document.querySelector("[class*='rotate-']")).toBeNull();
+    // The one without a photograph shows its initial on the bare hue.
+    const bare = mockOccasionTiles.find((t) => !t.photoUrl)!;
+    expect(screen.getByText(bare.label.charAt(0))).toBeInTheDocument();
+  });
+});