@bezda/rhp-mcp 0.1.0 → 0.1.2

package/skill/recipes/pyramid.html

@@ -5,6 +5,12 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Japan's population by age</title>
 <meta name="description" content="Population pyramid: two sides of one population (men and women) by age band, oldest on top, with an age picked by pointer, tap or keyboard that lights everyone that age or older and reads out their share. Use it for any two groups compared across ordered bands.">
+<!--
+  A recipe gives technique, not a design.
+  Take: a Bar to each side of zero per age band, and an age picked by pointer, tap or keyboard that lights everyone that age or older.
+  Leave: the design. This poster was made for its own subject (Japan's population on washi paper in sumi ink, the two sides in hanada blue and vermilion).
+  Its look, the place of its parts and the way its marks are drawn say that subject: design yours from your own (design.md, section 2).
+-->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@700;900&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap">
@@ -126,6 +132,8 @@ function AgeingJapan() {
     if (e.pointerType === "touch") return; // a finger sends pointerleave as it lifts after a tap
     setPicked(e.currentTarget.contains(document.activeElement) ? rowOf(document.activeElement) : null);
   };
+  // Off the chart (on the headline, the readout or the note), pointing is as if the pointer had left the poster
+  const move = (e) => e.pointerType !== "touch" && (e.target.closest(".rhp-chart") ? pick(e) : leave(e));
   const older = () => MEN.slice(from()).concat(WOMEN.slice(from())).reduce((sum, v) => sum + v, 0);
   return html`
     <${Poster}
@@ -133,7 +141,7 @@ function AgeingJapan() {
       title="Nearly three in ten people in Japan are 65 or older"
       dek="Men to the left, women to the right, in millions, the oldest at the top. Two bulges show the baby booms of the late 1940s and early 1970s; the base keeps shrinking."
       note="Source: Statistics Bureau of Japan, population estimates for October 1, 2023 (124.35 million people), rounded to the nearest 10,000. Point at an age band, tap it, or Tab into the chart and use the arrow keys."
-      onPointerMove=${(e) => e.pointerType !== "touch" && pick(e)} onClick=${pick} onFocusIn=${pick}
+      onPointerMove=${move} onClick=${pick} onFocusIn=${pick}
       onPointerLeave=${leave} onFocusOut=${(e) => !e.currentTarget.contains(e.relatedTarget) && setPicked(null)}>
       <p class="readout" aria-live="polite">
         <b>${() => percent.format(older() / TOTAL)}</b>

package/skill/recipes/race.html

@@ -5,6 +5,12 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>China's economy caught up</title>
 <meta name="description" content="Bar chart race: ten economies ranked by GDP from 1990 to 2024, the bars gliding from year to year and sliding past each other as ranks change, with a play button, a year slider that lands on whole years, and a readout on hover, focus and tap. A playhead moves on every frame and each value is interpolated between the years around it, so the bars move by rhp's JS version (animate). Use it for a ranking that changes over time.">
+<!--
+  A recipe gives technique, not a design.
+  Take: JS motion on a continuous playhead, bars that glide and pass each other, play and pause, a year slider, and a scale that follows the leader.
+  Leave: the design. This poster was made for its own subject (three decades of GDP as an engraved banknote: cotton paper, a guilloche rosette, the year in engraved numerals).
+  Its look, the place of its parts and the way its marks are drawn say that subject: design yours from your own (design.md, section 2).
+-->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..800;1,6..96,400..800&family=Jost:wght@400;500;600&display=swap">

package/skill/recipes/radial-bars.html

@@ -5,6 +5,12 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>A week of daily goals</title>
 <meta name="description" content="Radial bars: one ring per goal, its arc the share of the goal reached, with a day switch that sweeps the arcs to another day. Use it for progress toward a few goals or targets, in percent.">
+<!--
+  A recipe gives technique, not a design.
+  Take: rings drawn in the slat's CSS from where each Bar starts and ends on the scale, and a day switch that sweeps the arcs.
+  Leave: the design. This poster was made for its own subject (a week of daily goals on a dotted planner page taped to the wall, each day's switch dotted with the goals it met).
+  Its look, the place of its parts and the way its marks are drawn say that subject: design yours from your own (design.md, section 2).
+-->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Young+Serif&family=Hanken+Grotesk:wght@400..800&display=swap">

package/skill/recipes/scatter.html

@@ -5,6 +5,12 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Wealth and health</title>
 <meta name="description" content="Scatter plot of two measures per item on a second axis, with a log scale, a few points labeled (short codes on phones) and a readout of the point nearest the pointer, a tap or the arrow keys. Use it to show how two measures relate across items.">
+<!--
+  A recipe gives technique, not a design.
+  Take: Dots on two axes with a log scale, a few points labeled (short codes on phones), and a readout of the nearest point.
+  Leave: the design. This poster was made for its own subject (wealth and health on banknote paper, a quarter of an engraved seal in the corner).
+  Its look, the place of its parts and the way its marks are drawn say that subject: design yours from your own (design.md, section 2).
+-->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,500..800&family=Manrope:wght@400..700&display=swap">
@@ -129,6 +135,7 @@ const Country = slat({
 // keys, and the United States otherwise
 function WealthChart() {
   const [picked, setPicked] = createSignal(null);
+  const [pinned, setPinned] = createSignal(null); // the dot a click or a tap picked: the chart comes back to it
   const shown = () => COUNTRIES[picked() ?? STORY];
   let plot;
   const nearest = (e) => {
@@ -155,18 +162,30 @@ function WealthChart() {
     const i = nearest(e);
     if (i != null) setPicked(i);
   };
+  // A tap or a click picks it too, and pins it
+  const pin = (e) => {
+    point(e);
+    setPinned(picked());
+  };
   // The keyboard picks the dot it focuses
   const focus = (e) => {
     const i = rowOf(e.target);
     if (i != null) setPicked(i);
   };
-  // Leaving the chart: back to the dot that has focus (the keyboard's pick), or none
+  // Leaving the chart: back to the dot that has focus (the keyboard's pick), else the pinned one, else none
   const leave = (e) => {
     if (e.pointerType === "touch") return; // a finger sends pointerleave as it lifts after a tap
-    setPicked(e.currentTarget.contains(document.activeElement) ? rowOf(document.activeElement) : null);
+    setPicked(e.currentTarget.contains(document.activeElement) ? rowOf(document.activeElement) : pinned());
+  };
+  // Clicking poster text or margin resets this existing pick to the chart's original default.
+  const reset = (e) => {
+    if (e.target.closest(".plot, a, button, input, select, textarea, label, [role=button], [role=slider]")) return;
+    setPinned(null);
+    setPicked(null);
   };
   return html`
     <${Poster}
+      onClick=${reset}
       kicker="Wealth and health of nations"
       title="Life expectancy climbs fast with income, then levels off"
       dek="Twenty countries in 2023. Above about $25,000 a person, higher income goes with little extra life: the United States, richer than all but Norway here, has a lower life expectancy than Costa Rica, with about a third of its income. Tap or point at a dot."
@@ -174,8 +193,8 @@ function WealthChart() {
       <p class="readout"><b>${() => shown().name}</b><span>${() => `: ${dollars.format(shown().gdp)} a person, ${years.format(shown().life)} years`}</span></p>
       <p class="axis">Life expectancy at birth, years</p>
       <div class="plot"
-        onPointerMove=${(e) => e.pointerType !== "touch" && point(e)} onClick=${point} onFocusIn=${focus}
-        onPointerLeave=${leave} onFocusOut=${(e) => !e.currentTarget.contains(e.relatedTarget) && setPicked(null)}>
+        onPointerMove=${(e) => e.pointerType !== "touch" && point(e)} onClick=${pin} onFocusIn=${focus}
+        onPointerLeave=${leave} onFocusOut=${(e) => !e.currentTarget.contains(e.relatedTarget) && setPicked(pinned())}>
         <${Chart} scale=${X} cross=${Y} crossTicks=${[50, 60, 70, 80, 90]} height=${340}
           label="Life expectancy at birth against GDP per person, twenty countries, 2023"
           theme=${{ font: 'Manrope, "Helvetica Neue", Arial, sans-serif', ink: "#191c1f", muted: "#686b70", grid: "#dfdbd0" }}>

package/skill/recipes/silhouettes.html

@@ -0,0 +1,354 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>The world's tallest buildings</title>
+<meta name="description" content="Silhouettes: each item drawn in its own outline (a shape() per row on a vertical Bar) to one scale on one street, its height on its top, the picked one's level carried across to the tallest with a dimension line, names on the street on wide screens and ranks with a key on narrow ones. Use it for things a reader knows by their shape: buildings, mountains, ships, bottles, animals.">
+<!--
+  A recipe gives technique, not a design.
+  Take: an outline per row built from measured profiles with shape(), drawn to one scale on one ground line; a dashed level from the picked item's top across to the leader, with a dimension line for the gap; a slat type per width (names on the street, or ranks with a key below); and a readout of the picked item.
+  Leave: the design. This poster was made for its own subject (the ten tallest buildings as a skyline on one street under a pale blue sky, the headline set in the sky over the lowest towers, the street a dark band holding the names, the readout and the note).
+  Its look, the place of its parts and the way its marks are drawn say that subject: design yours from your own (design.md, section 2).
+-->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=League+Gothic&family=Barlow:wght@400;500;600;700&display=swap">
+<script type="importmap">{ "imports": { "@bezda/rhp/standalone": "https://cdn.jsdelivr.net/npm/@bezda/rhp@2/dist/standalone.js" } }</script>
+<style>
+  /* Look: the sky over one imaginary street. A pale daytime sky for the paper, the towers in its own haze,
+     the one in focus in deep navy, the street a navy ground, and a surveyor's red for the measurement. */
+  :root {
+    --page: #9fb9d4; --sky: #c4d9ee; --paper: #dbe8f5; --ink: #0f2540; --soft: #3d5878; --rule: #b7cde2;
+    --accent: #c8102e; --quiet: #5b789c;
+    --ground: #0f2540; --on-ground: #e4edf7; --ground-soft: #a9bdd6;
+    --display: "League Gothic", "Arial Narrow", Impact, sans-serif;
+    --text: Barlow, "Helvetica Neue", Arial, sans-serif;
+    --pad: 60px;
+  }
+  * { box-sizing: border-box; }
+  body { margin: 0; padding: 48px 16px; background: var(--page, #9fb9d4); }
+
+  /* The poster: sky on top, the street at the foot. Every part is a grid item, placed per width below. */
+  .poster { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1120px; margin: 0 auto; padding: var(--pad) var(--pad) 0; overflow: hidden;
+    color: var(--ink); font: 16px/1.5 var(--text); background: linear-gradient(var(--sky), var(--paper) 72%);
+    box-shadow: 0 30px 60px -34px rgb(15 37 64 / .6);
+    grid-template-areas: "kicker" "headline" "dek" "stage" "readout" "key" "note"; }
+  .poster figcaption { display: contents; }
+  .poster .kicker { grid-area: kicker; margin-bottom: 12px; font: 700 13px/1.3 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
+  .poster .kicker::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 10px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
+  .poster .headline { grid-area: headline; max-width: 13em; font: 400 clamp(44px, 5.6vw, 66px)/.95 var(--display); letter-spacing: .005em; text-wrap: balance; }
+  .poster .dek { grid-area: dek; max-width: 46ch; margin-top: 16px; font-size: 17px; line-height: 1.45; color: var(--soft); }
+  .poster .stage { grid-area: stage; position: relative; min-width: 0; margin-top: 18px; }
+  /* The street: a navy ground under the towers, from edge to edge of the poster, as tall as the room for the names */
+  .poster .stage::before { content: ""; position: absolute; left: calc(-1 * var(--pad)); right: calc(-1 * var(--pad)); bottom: 0; height: var(--street); background: var(--ground); }
+  /* Everything after the chart stands on the street */
+  .poster .readout, .poster .key, .poster .note { margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); background: var(--ground); color: var(--on-ground); }
+  /* Every version of the readout in one grid cell, only the current one shown: it is as tall as the longest at every
+     width, so nothing under it moves whichever tower is picked */
+  .poster .readout { grid-area: readout; display: grid; margin-top: 0; margin-bottom: 0; padding-top: 8px; padding-bottom: 10px; font-size: 17px; line-height: 1.4; font-variant-numeric: tabular-nums; }
+  .poster .readout b { font-weight: 700; }
+  .poster .readout > .v { grid-area: 1 / 1; visibility: hidden; }
+  .poster .readout > .v.on { visibility: visible; }
+  .poster .readout .v span { display: block; color: var(--ground-soft); }
+  .poster .key { grid-area: key; margin-block: 0; padding-block: 6px 4px; list-style: none; font-size: 15px; line-height: 1.35; }
+  .poster .key li { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto; column-gap: 8px; padding: 5px 0; border-top: 1px solid rgb(255 255 255 / .12); cursor: default; }
+  .poster .key li b { font: 400 19px/1 var(--display); color: var(--ground-soft); }
+  .poster .key li em { font-style: normal; color: var(--ground-soft); }
+  .poster .key li span { font-variant-numeric: tabular-nums; }
+  /* The picked tower's line is marked by a band, not by weight: bold text would wrap and move what is under it */
+  .poster .key li.lit { background: rgb(255 255 255 / .1); box-shadow: -8px 0 0 rgb(255 255 255 / .1), 8px 0 0 rgb(255 255 255 / .1); }
+  .poster .key li.lit b { color: var(--on-ground); }
+  .poster .note { grid-area: note; display: block; padding-top: 12px; padding-bottom: 26px; border-top: 1px solid rgb(255 255 255 / .16); font-size: 12.5px; line-height: 1.5; color: var(--ground-soft); }
+  .poster :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
+
+  /* Wide screens: the kicker and the headline float in the sky over the five lowest towers, the dek over the next three.
+     The columns follow the towers: the plot is the whole stage, one tenth per tower.
+     This place suits these heights: with other data, check that the words still clear the tips (pitfalls.md, "Text and
+     layers laid over the chart"). */
+  @media (min-width: 980px) {
+    .poster { grid-template-columns: calc(100% * .5) calc(100% * .3) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto auto;
+      grid-template-areas: "kicker dek ." "headline dek ." ". . ." "readout readout readout" "note note note"; }
+    .poster .headline, .poster .kicker, .poster .dek { position: relative; z-index: 2; }
+    .poster .headline { padding-right: 28px; }
+    .poster .dek { align-self: start; margin-top: 2px; padding-right: 20px; font-size: 16px; }
+    .poster .stage { grid-area: 1 / 1 / 4 / 4; align-self: end; margin-top: 32px; }
+    .poster .key { display: none; }
+  }
+  @media (max-width: 640px) {
+    body { padding: 16px 16px 32px; }
+    :root { --pad: 16px; }
+    .poster { padding-top: 24px; }
+    .poster .kicker { font-size: 12px; margin-bottom: 10px; }
+    .poster .dek { margin-top: 12px; font-size: 15px; }
+    .poster .stage { margin-top: 14px; }
+    .poster .readout { font-size: 15px; }
+  }
+</style>
+</head>
+<body>
+<div id="chart"></div>
+<script type="module">
+import { Chart, Plot, Bar, Tick, Label, Place, Poster, Show, slat, shape, nice, html, render, createSignal } from "@bezda/rhp/standalone";
+
+// Data: the ten tallest completed buildings in the world, height to the architectural top in metres
+// (spires count, antennas do not), from the Council on Tall Buildings and Urban Habitat, October 2026.
+const BUILDINGS = [
+  { name: "Burj Khalifa", city: "Dubai", year: 2010, floors: 163, height: 828 },
+  { name: "Menara Merdeka Maybank", formerly: "Merdeka 118", city: "Kuala Lumpur", year: 2023, floors: 118, height: 679 },
+  { name: "Shanghai Tower", city: "Shanghai", year: 2015, floors: 128, height: 632 },
+  { name: "Makkah Royal Clock Tower", city: "Mecca", year: 2012, floors: 120, height: 601, clock: { at: 428, size: 43 } }, // its faces: 43 m across, their middle 428 m up
+  { name: "Ping An Finance Center", city: "Shenzhen", year: 2017, floors: 115, height: 599 },
+  { name: "Lotte World Tower", city: "Seoul", year: 2017, floors: 123, height: 555 },
+  { name: "One World Trade Center", city: "New York", year: 2014, floors: 94, height: 541 },
+  { name: "Guangzhou CTF Finance Centre", city: "Guangzhou", year: 2016, floors: 111, height: 530 },
+  { name: "Tianjin CTF Finance Centre", city: "Tianjin", year: 2019, floors: 97, height: 530 },
+  { name: "CITIC Tower", city: "Beijing", year: 2018, floors: 109, height: 528 },
+];
+const AS_OF = 2026;
+const SOURCE = "Source: Council on Tall Buildings and Urban Habitat (CTBUH), The Skyscraper Center, completed buildings, October 2026. "
+  + "Height to the architectural top: spires count, antennas do not. Merdeka 118 was renamed Menara Merdeka Maybank in July 2026. "
+  + "Outlines are simplified side views, all drawn to one scale.";
+
+// Outlines: each building seen from the side, as [metres above the street, metres from its axis to its edge] from the
+// street up; the left side, and the right side when it differs (an edge past the axis has a negative distance).
+// Measured every 2 m from Phoenix CZE's to-scale elevation diagram, "Tallest buildings 2026" (Wikimedia Commons,
+// CC BY-SA 4.0), and simplified to within a metre; podiums are left out, and the Clock Tower's crescent, too small to draw,
+// ends its spire in a point. Every outline is drawn on one scale, BOX metres wide.
+const PROFILE = {
+  "Burj Khalifa": {
+    left: [[0, 47], [125, 47], [126, 38], [223, 38], [224, 29.5], [349, 28.5], [350, 20], [504, 20], [506, 14.5], [568, 14.5], [570, 11], [604, 11], [606, 8.5], [740, 7], [742, 4], [776, 4], [778, 2.5], [790, 2.5], [792, 1], [828, 1]],
+    right: [[0, 47.5], [99, 47.5], [100, 39], [191, 39], [192, 30], [345, 30], [346, 21.5], [442, 21.5], [444, 16], [526, 16], [528, 12.5], [586, 12.5], [588, 9.5], [644, 9.5], [646, 7], [694, 6.5], [696, 5], [756, 4], [758, 2.5], [790, 2.5], [792, 1], [828, 1]],
+  },
+  "Menara Merdeka Maybank": {
+    left: [[0, -4.5], [76, 6], [152, -2], [222, 6], [294, -1], [310, -1], [346, 3.5], [380, 6], [452, -2], [566, 10], [568, 4.5], [584, 3], [676, 3], [679, 1.5]],
+    right: [[0, 81.5], [106, 81.5], [296, 61.5], [380, 68.5], [528, 53.5], [553, 53.5], [554, 7.5], [556, 5], [594, 3], [676, 3], [679, 1.5]],
+  },
+  "Shanghai Tower": {
+    left: [[0, 36.5], [38, 36.5], [92, 39.5], [178, 39.5], [374, 24.5], [448, 21.5], [632, 21.5]],
+    right: [[0, 45.5], [38, 45.5], [96, 39.5], [388, 39.5], [396, 38], [480, 35.5], [536, 31], [588, 24.5], [612, 19], [616, 14.5], [618, 9.5], [620, 7], [632, 7]],
+  },
+  "Makkah Royal Clock Tower": {
+    left: [[0, 47], [357, 47.5], [358, 37.5], [397, 41], [398, 34.5], [402, 34.5], [404, 33], [452, 33], [458, 30], [463, 30], [464, 21], [469, 21], [470, 12.5], [472, 10.5], [486, 13], [490, 11.5], [496, 6], [558, 4.5], [601, 0.6]],
+    right: [[0, 48], [357, 48], [358, 37.5], [397, 41], [398, 34.5], [402, 34.5], [404, 33], [452, 33], [458, 30], [460, 30.5], [465, 28], [466, 21], [469, 21], [470, 11.5], [474, 10.5], [486, 13], [492, 10], [496, 6], [558, 4.5], [601, 0.6]],
+  },
+  "Ping An Finance Center": {
+    left: [[0, 41.5], [84, 39], [404, 39], [416, 37.5], [538, 32.5], [550, 31], [599, 0.6]],
+    right: [[0, 39.5], [402, 39], [404, 37.5], [412, 36.5], [540, 31], [550, 29.5], [599, 0.6]],
+  },
+  "Lotte World Tower": {
+    left: [[0, 44.5], [138, 44.5], [256, 37.5], [555, 10.5]],
+    right: [[0, 45.5], [140, 44.5], [254, 38], [555, 8.5]],
+  },
+  "One World Trade Center": {
+    left: [[0, 31.5], [413, 31.5], [414, 17], [424, 17], [426, 12.5], [452, 6], [464, 1], [541, 1]],
+    right: [[0, 31.5], [413, 31.5], [414, 17], [424, 17], [426, 11.5], [446, 7.5], [464, 1], [541, 1]],
+  },
+  "Guangzhou CTF Finance Centre": {
+    left: [[0, 39.5], [530, 39.5]],
+    right: [[0, 39.5], [437, 39.5], [438, 24], [500, 24], [508, 8.5], [512, -3], [526, -35.5], [530, -35.5]],
+  },
+  "Tianjin CTF Finance Centre": {
+    // its crown ends in two rounded lobes with a dip between them
+    left: [[0, 38], [130, 38], [228, 29.5], [436, 23], [518, 15], [524, 12], [528, 9], [530, 6], [529, 3.5], [525, 0.3]],
+    right: [[0, 38], [130, 38], [216, 29.5], [308, 27], [328, 28], [438, 23], [518, 14.5], [524, 11], [528, 8.5], [530, 6], [529, 3.5], [525, 0.3]],
+  },
+  "CITIC Tower": {
+    left: [[0, 43.5], [32, 43.5], [108, 38], [138, 38], [140, 36.5], [150, 35.5], [264, 31], [460, 31], [520, 36.5], [528, 35.5]],
+    right: [[0, 44.5], [30, 44.5], [46, 42], [140, 35.5], [250, 32], [470, 32], [518, 35.5], [528, 35]],
+  },
+};
+const BOX = 165;
+// A profile as a Bar's outline: along runs from the street (0) to the top (1), across from the left (0) to the right (1);
+// shift moves the building's axis across its slat, in metres
+const outline = ({ left, right = left }, shift = 0) => {
+  const top = Math.max(...left.map(([h]) => h), ...right.map(([h]) => h));
+  return shape(
+    ...left.map(([h, w], i) => [i ? "L" : "M", h / top, 0.5 + (shift - w) / BOX]),
+    ...[...right].reverse().map(([h, w]) => ["L", h / top, 0.5 + (shift + w) / BOX]),
+    ["Z"],
+  );
+};
+
+// What depends on the data: ranks, places on the street (lowest on the left), the leader and the runner-up
+const HEIGHT = BUILDINGS.map((b) => b.height);
+const scale = { min: 0, max: Math.ceil(Math.max(...HEIGHT) / 10) * 10 }; // 0 to 830 m: the top of the plot is just over the tallest tip
+const byHeight = BUILDINGS.map((b, i) => i).sort((a, b) => HEIGHT[b] - HEIGHT[a]); // tallest first
+const LEAD = byHeight[0];
+const SECOND = byHeight[1];
+const RANK = HEIGHT.map((h) => 1 + HEIGHT.filter((other) => other > h).length); // ties share a rank, as in CTBUH's table
+const POS = BUILDINGS.map((b, i) => BUILDINGS.length - 1 - byHeight.indexOf(i)); // place on screen, lowest first
+const profileOf = (b) => PROFILE[b.name] ?? { left: [[0, 30], [b.height, 30]] };
+// Even gaps: every building's widest extent is laid along the street with the same space between each, and each axis
+// moves across its slat to where that puts it (SHIFT, a share of the slat, which the labels and lines follow)
+const EXTENT = BUILDINGS.map((b) => {
+  const { left, right = left } = profileOf(b);
+  return [Math.max(...left.map(([, w]) => w)), Math.max(...right.map(([, w]) => w))];
+});
+const SHIFT = new Array(BUILDINGS.length);
+{
+  const placed = POS.map((p, i) => [p, i]).sort((a, b) => a[0] - b[0]).map(([, i]) => i); // left to right
+  const space = (BUILDINGS.length * BOX - EXTENT.reduce((sum, [l, r]) => sum + l + r, 0)) / BUILDINGS.length;
+  let x = space / 2;
+  placed.forEach((i, place) => {
+    SHIFT[i] = (x + EXTENT[i][0] - BOX * (place + 0.5)) / BOX;
+    x += EXTENT[i][0] + EXTENT[i][1] + space;
+  });
+}
+const OUTLINE = BUILDINGS.map((b, i) => outline(profileOf(b), SHIFT[i] * BOX));
+const WORDS = ["no", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve",
+  "thirteen", "fourteen", "fifteen", "sixteen", "seventeen", "eighteen", "nineteen", "twenty"];
+const word = (n) => WORDS[n] ?? String(n);
+const cap = (s) => s[0].toUpperCase() + s.slice(1);
+const metres = (m) => `${m} m`;
+const fullName = (i) => BUILDINGS[i].name + (BUILDINGS[i].formerly ? ` (formerly ${BUILDINGS[i].formerly})` : "");
+const lead = BUILDINGS[LEAD];
+const margin = lead.height - BUILDINGS[SECOND].height;
+const cities = new Set(BUILDINGS.map((b) => b.city)).size;
+// The tower the picked one is measured against the leader with: itself, or the runner-up when the leader is picked
+const against = (i) => (i === LEAD ? SECOND : i);
+const compare = (i) => (i === LEAD
+  ? `${metres(margin)} taller than ${BUILDINGS[SECOND].name}`
+  : `${metres(lead.height - HEIGHT[i])} shorter than the ${lead.name}`);
+const facts = (i) => `${metres(HEIGHT[i])}, ${BUILDINGS[i].floors} floors, finished ${BUILDINGS[i].year}`;
+const say = (i) => `${RANK[i]}. ${fullName(i)}, ${BUILDINGS[i].city}: ${facts(i)}; ${compare(i)}.`;
+
+// Slat type: one tower in its own outline, its height over its top, its name on the street. The level of the tower the
+// reader picked runs from its top across to the leader, where a red dimension line measures what is left above it.
+const TOWER_CSS = `
+  .tower { cursor: default; }
+  /* Focus rings the name on the street: a ring round the whole tower would cross the headline set in the sky */
+  .tower:focus-visible { outline: none; }
+  .tower:focus-visible .name { outline: 2px solid var(--rhp-surface); outline-offset: 3px; }
+  .tip { --rhp-label-gap: 5px; font: 400 21px/1 "League Gothic", "Arial Narrow", sans-serif; letter-spacing: .02em; color: var(--rhp-muted); }
+  .lit .tip { color: var(--rhp-ink); font-size: 25px; }
+  .level { --rhp-tick-width: 2px; background: repeating-linear-gradient(90deg, var(--rhp-ink) 0 5px, transparent 5px 9px); }
+  .level.none { visibility: hidden; }
+  .level.first { translate: 0 50%; }
+  .level.last { translate: -100% 50%; }
+  .dim { translate: var(--dx) 0; }
+  /* A clock face: a ring cut out of the tower, round whatever the chart's proportions, in the sky's color */
+  .clock { position: absolute; left: calc(50% + var(--shift) * 100%); bottom: calc(var(--at) * 100%); width: calc(var(--size) * 100%); aspect-ratio: 1;
+    translate: -50% 50%; border: 2px solid #d0e1f2; border-radius: 50%; }
+  /* The labels and lines follow the building's axis, moved across the slat by --shift for even gaps */
+  .tip, .dim, .cap, .mark, .level.first, .level.last { margin-left: calc(var(--shift) * 100%); }
+  .cap { translate: 0 50%; }
+  .gap { position: absolute; left: calc(var(--dx) + 7px); top: 0; translate: 0 -50%; font: 400 36px/1 "League Gothic", "Arial Narrow", sans-serif; color: var(--rhp-series-1); white-space: nowrap; }
+  .name { --rhp-label-gap: 10px; white-space: normal; text-align: center; line-height: 1.15; font-size: 12.5px; color: var(--rhp-surface); }
+  .name b { display: block; padding-bottom: 4px; font-weight: 600; }
+  .name i, .name small { display: block; font-style: normal; font-size: 11.5px; color: color-mix(in oklab, var(--rhp-surface) 72%, var(--rhp-ink)); }
+  .lit .name b { font-weight: 700; text-decoration: underline 2px; text-underline-offset: 2px; }
+  .rank { font: 400 19px/1 "League Gothic", "Arial Narrow", sans-serif; color: color-mix(in oklab, var(--rhp-surface) 72%, var(--rhp-ink)); }
+  .lit .rank { color: var(--rhp-surface); }
+  @container (max-width: 640px) {
+    .tip { font-size: 16px; }
+    .lit .tip { font-size: 19px; }
+    .tip .u { display: none; }
+    .gap { font-size: 26px; }
+    .clock { border-width: 1px; }
+  }
+`;
+const tower = (d) => html`
+  <div class=${() => (d.lit ? "tower lit" : "tower")} data-row=${() => d.index} aria-label=${() => say(d.index)}
+    style=${() => `--dx: ${d.wide ? 14 : 8}px; --shift: ${d.shift}`}>
+    <${Bar} to=${() => d.height} thick=${1} shape=${() => d.outline} color=${() => (d.lit ? "ink" : "series-2")}>
+      <${Show} when=${() => d.clock}>
+        <i class="clock" aria-hidden="true" style=${() => `--at: ${d.clock.at / d.height}; --size: ${d.clock.size / BOX}`}></i>
+      <//>
+    <//>
+    <${Tick} at=${() => d.level} thick=${() => ({ mid: 1, first: 0.5 - d.shift, last: 0.5 + d.shift })[d.span] ?? 0.5} class=${() => "level " + d.span} />
+    <${Label} at=${() => d.height} class="tip">${() => d.height}<span class="u"> m</span><//>
+    <${Label} edge="start" class="name">
+      <${Show} when=${() => d.wide} fallback=${html`<b class="rank">${() => d.rank}</b>`}>
+        <b>${() => d.name}</b>
+        <${Show} when=${() => d.formerly}><i>(${() => d.formerly})</i><//>
+        <small>${() => d.city}</small>
+      <//>
+    <//>
+    <${Show} when=${() => d.lead}>
+      <${Bar} from=${() => d.level} to=${() => d.height} thick="2px" color="series-1" class="dim" />
+      <${Tick} at=${() => d.level} thick=${() => `${d.wide ? 22 : 14}px`} color="series-1" class="cap" />
+      <${Tick} at=${() => d.height} thick=${() => `${d.wide ? 22 : 14}px`} color="series-1" class="cap" />
+      <${Place} at=${() => (d.level + d.height) / 2} class="mark"><b class="gap">${() => metres(d.height - d.level)}</b><//>
+    <//>
+  </div>`;
+// The same tower with the room each width needs: names on the street on wide screens, ranks on narrow ones
+const TowerNamed = slat({ room: { start: 88, end: 32, after: 32 }, css: TOWER_CSS }, tower);
+const TowerRanked = slat({ room: { start: 32, end: 32, after: 46 }, css: TOWER_CSS }, tower);
+
+// The chart's font and colors, read from the page's tokens
+const THEME = {
+  font: "var(--text)", ink: "var(--ink)", muted: "var(--soft)", grid: "var(--rule)", surface: "var(--on-ground)",
+  series: ["var(--accent)", "var(--quiet)"],
+};
+
+// Chart component: the tower the reader points at, taps or reaches with the keyboard is lit and measured against the leader
+function Skyline() {
+  const media = matchMedia("(min-width: 980px)");
+  const [wide, setWide] = createSignal(media.matches);
+  media.addEventListener("change", (e) => setWide(e.matches));
+  const [picked, setPicked] = createSignal(null);
+  const lit = () => picked() ?? LEAD;
+  const ref = () => against(lit());
+  // Where the level line runs: half of the measured tower's band (first), every band between (mid), half of the leader's (last)
+  const span = (i) => {
+    const p = POS[i], a = POS[ref()], b = POS[LEAD];
+    return p === a ? "first" : p === b ? "last" : p > a && p < b ? "mid" : "none";
+  };
+  // The row of the element an event landed on (a tower, or a line of the key), or null
+  const rowOf = (el) => {
+    const root = el.closest("[data-row]");
+    return root ? +root.dataset.row : null;
+  };
+  // A mouse or a pen picks as it moves, a tap or a click picks, the keyboard picks; on no tower the pick stays
+  const pick = (e) => {
+    const row = rowOf(e.target);
+    if (row != null) setPicked(row);
+  };
+  // Leaving the poster: back to the tower that has focus (a keyboard's or a click's pick), or none
+  const leave = (e) => {
+    if (e.pointerType === "touch") return; // a finger sends pointerleave as it lifts after a tap
+    setPicked(e.currentTarget.contains(document.activeElement) ? rowOf(document.activeElement) : null);
+  };
+  // Off the chart (on the headline, the readout or the note), pointing is as if the pointer had left the poster
+  const move = (e) => e.pointerType !== "touch" && (e.target.closest(".rhp-chart") ? pick(e) : leave(e));
+  const towers = (type) => html`
+    <${Plot} rows=${BUILDINGS} order=${POS} keyboard=${true} rank=${RANK} outline=${OUTLINE} shift=${SHIFT}
+      lit=${(d) => d.index === lit()} lead=${(d) => d.index === LEAD} span=${(d) => span(d.index)}
+      level=${() => HEIGHT[ref()]} wide=${wide}>${type}<//>`;
+  return html`
+    <${Poster}
+      kicker=${`The world's tallest buildings, ${AS_OF}`}
+      title=${`${cap(word(AS_OF - lead.year))} years on, the ${lead.name} still tops the rest by ${metres(margin)}`}
+      dek=${`The ${word(BUILDINGS.length)} tallest finished buildings on Earth, from ${word(cities)} cities, share one street here, each in its own outline and all at one scale. Heights in metres.`}
+      note=${SOURCE}
+      onPointerMove=${move} onClick=${pick} onFocusIn=${pick}
+      onPointerLeave=${leave} onFocusOut=${(e) => !e.currentTarget.contains(e.relatedTarget) && setPicked(null)}>
+      <div class="stage" style=${() => `--street: ${wide() ? 88 : 32}px`}>
+        <${Chart} orientation="vertical" height=${() => (wide() ? 680 : 420)} scale=${[scale.min, scale.max]} ticks=${false}
+          label=${`The ${word(BUILDINGS.length)} tallest completed buildings in the world, by height in metres`} theme=${THEME}>
+          <${Show} when=${wide} fallback=${() => towers(TowerRanked)}>${() => towers(TowerNamed)}<//>
+        <//>
+      </div>
+      <p class="readout" aria-hidden="true">
+        <span class=${() => (picked() == null ? "v on" : "v")}>Tap or point at a tower to measure it against the Burj Khalifa.</span>
+        ${BUILDINGS.map((b, i) => html`
+          <span class=${() => (picked() === i ? "v on" : "v")}><b>${b.name}</b>, ${b.city}<span>${facts(i)}. ${cap(compare(i))}.</span></span>`)}
+      </p>
+      <${Show} when=${() => !wide()}>
+        <ol class="key" aria-hidden="true">
+          ${byHeight.map((i) => html`
+            <li data-row=${i} class=${() => (lit() === i ? "lit" : "")}>
+              <b>${RANK[i]}</b>
+              <div>${fullName(i)}<em>, ${BUILDINGS[i].city}</em></div>
+              <span>${metres(HEIGHT[i])}</span>
+            </li>`)}
+        </ol>
+      <//>
+    <//>`;
+}
+
+render(() => html`<${Skyline} />`, document.getElementById("chart"));
+</script>
+</body>
+</html>

package/skill/recipes/slope.html

@@ -5,6 +5,12 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Eggs doubled</title>
 <meta name="description" content="Slope chart: each item's value at two dates joined by a line on a second axis, labels kept apart on both sides, the change written beside each item, and the line nearest the pointer, a tap or the arrow keys picked out. Use it to compare change between two dates across items.">
+<!--
+  A recipe gives technique, not a design.
+  Take: a Line of two points per item on a second axis, labels kept apart on both sides, and the line nearest the pointer picked out.
+  Leave: the design. This poster was made for its own subject (the price of eggs as a till receipt, torn at the top and the bottom, a barcode at its foot).
+  Its look, the place of its parts and the way its marks are drawn say that subject: design yours from your own (design.md, section 2).
+-->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@400..800&display=swap">
@@ -132,6 +138,7 @@ const Item = slat({
 // picked out and the others fade
 function GroceryChart() {
   const [picked, setPicked] = createSignal(null);
+  const [pinned, setPinned] = createSignal(null); // the item a click or a tap picked: the chart comes back to it
   let plot;
   const nearest = (e) => {
     const r = plot.getBoundingClientRect();
@@ -158,24 +165,36 @@ function GroceryChart() {
     const i = nearest(e);
     if (i != null) setPicked(i);
   };
+  // A tap or a click picks it too, and pins it
+  const pin = (e) => {
+    point(e);
+    setPinned(picked());
+  };
   // The keyboard picks the item it focuses
   const focus = (e) => {
     const i = rowOf(e.target);
     if (i != null) setPicked(i);
   };
-  // Leaving the chart: back to the item that has focus (the keyboard's pick), or none
+  // Leaving the chart: back to the item that has focus (the keyboard's pick), else the pinned one, else none
   const leave = (e) => {
     if (e.pointerType === "touch") return; // a finger sends pointerleave as it lifts after a tap
-    setPicked(e.currentTarget.contains(document.activeElement) ? rowOf(document.activeElement) : null);
+    setPicked(e.currentTarget.contains(document.activeElement) ? rowOf(document.activeElement) : pinned());
+  };
+  // Clicking poster text or margin resets this existing pick to the chart's original default.
+  const reset = (e) => {
+    if (e.target.closest(".plot, a, button, input, select, textarea, label, [role=button], [role=slider]")) return;
+    setPinned(null);
+    setPicked(null);
   };
   return html`
     <${Poster}
+      onClick=${reset}
       kicker="Price check, US city average"
       title="A dozen eggs cost twice as much in 2024 as in 2020"
       dek="Six staples, each at its average price in 2020 and in 2024. Coffee went up 43%, bread 36%, beef 31% and milk 20%; bananas went up 4 cents."
       note="Source: US Bureau of Labor Statistics, average price data for 2020 and 2024 (the mean of each year's twelve monthly prices). Point at a line, tap it, or Tab into the chart and use the arrow keys.">
-      <div class="plot" onPointerMove=${(e) => e.pointerType !== "touch" && point(e)} onClick=${point} onFocusIn=${focus}
-        onPointerLeave=${leave} onFocusOut=${(e) => !e.currentTarget.contains(e.relatedTarget) && setPicked(null)}>
+      <div class="plot" onPointerMove=${(e) => e.pointerType !== "touch" && point(e)} onClick=${pin} onFocusIn=${focus}
+        onPointerLeave=${leave} onFocusOut=${(e) => !e.currentTarget.contains(e.relatedTarget) && setPicked(pinned())}>
         <${Chart} scale=${[0, 1]} cross=${[0, TOP]} crossTicks=${false} height=${HEIGHT}
           label=${`Average US prices of six groceries in ${YEARS[0]} and ${YEARS[1]}`}
           theme=${{ font: '"Azeret Mono", ui-monospace, Menlo, monospace', ink: "#1d1d1b", muted: "#55534e" }}>

package/skill/recipes/sparklines.html

@@ -5,6 +5,12 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Richer since 1990</title>
 <meta name="description" content="Sparkline table: one small line per item, each scaled to its own peak, with the start level dashed, and a scrub through the years (pointer, tap, a sideways drag or arrow keys) that moves a dot along every line and updates each item's value and its change since the start. Use it for many series side by side, a table of trends.">
+<!--
+  A recipe gives technique, not a design.
+  Take: a Line in each slat scaled to itself, the start level dashed, numbers in columns, and a year scrub that moves a dot along every line.
+  Leave: the design. This poster was made for its own subject (incomes since 1990 as a table page of a statistical yearbook, cream paper between a thick and a thin rule).
+  Its look, the place of its parts and the way its marks are drawn say that subject: design yours from your own (design.md, section 2).
+-->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@400;700&family=Libre+Franklin:wght@400..800&display=swap">
@@ -105,7 +111,7 @@ const Country = slat({
 
 // The year being read: a hairline down every slat
 const Crosshair = slat({ room: {}, css: `.hair { --rhp-tick-width: 1px; background: #c2410c; opacity: .55; }` }, (d) => html`
-  <div><${Tick} at=${() => d.year} thick=${1} class="hair" /></div>`);
+  <${Tick} at=${() => d.year} thick=${1} class="hair" />`);
 
 // Chart component: hovering previews a year; a click, tap, sideways drag or the arrow keys saves it for every slat.
 // With no saved year, the latest shows. The year in the table's head is a slider for the keyboard and screen readers.

package/skill/recipes/stacked-100.html

@@ -5,6 +5,12 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>How cities get to work</title>
 <meta name="description" content="100% stacked bar chart of shares per category, labeled where they fit, with a key that lights one part in every bar on hover, focus and tap. Use it to compare how a whole splits across several categories.">
+<!--
+  A recipe gives technique, not a design.
+  Take: stackUp() of shares() in an overlap inner Plot, labels inside where they fit, and a key that lights one part in every bar.
+  Leave: the design. This poster was made for its own subject (ways to commute as a transit map: enamel white, geometric type, the key drawn as a metro line whose stations are the buttons).
+  Its look, the place of its parts and the way its marks are drawn say that subject: design yours from your own (design.md, section 2).
+-->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Jost:wght@400..800&display=swap">

package/skill/recipes/stacked-bars.html

@@ -5,6 +5,12 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Europe's power mix</title>
 <meta name="description" content="Stacked bar chart of parts that add up to a total per category, with a key that moves one part to the start of every bar and ranks the bars by it. Use it for totals made of a few parts.">
+<!--
+  A recipe gives technique, not a design.
+  Take: stackUp() parts in an overlap inner Plot, and a key that moves one part to the start of every bar and ranks by it.
+  Leave: the design. This poster was made for its own subject (Europe's power mix on drafting paper, a line of pylons under the headline).
+  Its look, the place of its parts and the way its marks are drawn say that subject: design yours from your own (design.md, section 2).
+-->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Oswald:wght@500..700&family=Public+Sans:wght@400..800&display=swap">

package/skill/recipes/strip.html

@@ -5,6 +5,12 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Burger places are hit or miss</title>
 <meta name="description" content="Strip plot of restaurant ratings by cuisine: one dot per restaurant in its cuisine's band (an overlap Plot inside each slat), a median tick, and a readout of the restaurant the reader points at, taps or reaches with the arrow keys. Use it to show every value of a few groups.">
+<!--
+  A recipe gives technique, not a design.
+  Take: an overlap Plot of Dots inside each group's slat, a median Tick, and a readout of the dot under the pointer.
+  Leave: the design. This poster was made for its own subject (restaurant ratings as a chalkboard menu in a wooden frame, its slate smudged where it was wiped).
+  Its look, the place of its parts and the way its marks are drawn say that subject: design yours from your own (design.md, section 2).
+-->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@700&family=Karla:wght@400..800&display=swap">
@@ -186,13 +192,15 @@ function RestaurantRatings() {
     if (e.pointerType === "touch") return; // a finger sends pointerleave as it lifts after a tap
     setPicked(e.currentTarget.contains(document.activeElement) ? rowOf(document.activeElement) : null);
   };
+  // Off the chart (on the headline, the readout or the note), pointing is as if the pointer had left the poster
+  const move = (e) => e.pointerType !== "touch" && (e.target.closest(".rhp-chart") ? pick(e) : leave(e));
   return html`
     <${Poster}
       kicker="City food guide · ratings out of 5"
       title="Burger places are hit or miss"
       dek="Every dot is a restaurant, placed by its average rating. Ethiopian kitchens all score between 4.3 and 4.8; burgers run from under 3 to almost 5."
       note="Illustrative data for invented restaurants. Point at a dot or tap it for the restaurant, or Tab into a cuisine and use the arrow keys."
-      onPointerMove=${(e) => e.pointerType !== "touch" && pick(e)} onClick=${pick} onFocusIn=${pick}
+      onPointerMove=${move} onClick=${pick} onFocusIn=${pick}
       onPointerLeave=${leave} onFocusOut=${(e) => !e.currentTarget.contains(e.relatedTarget) && setPicked(null)}>
       <div class="readout">
         <span class="stars">${() => one.format(place().rating)} ★</span>