@heycys/gallery 0.1.2 → 0.2.0

package/packs/gallery/weather/kit.js

@@ -1,37 +1,46 @@
 // gallery/weather (天气): a city's weather now and for the days ahead, from Open-Meteo (open-meteo.com,
 // no key), for a custom page. Its settings, `city` (a name as the reader writes it: 上海, Berlin) and
-// `unit` (℃ or ℉), are the card's form (the grip at its top right › 设置…), kept in the data part `settings`, which the board
-// writes and this block only reads. The city is looked up by name (geocoding-api.open-meteo.com: its
-// first match, its coordinates), its weather fetched for them (api.open-meteo.com: now, and each day's
-// highest, lowest and sky for five days), both through context.fetch, the server fetching for it: its
-// needs name the two hosts, and nothing is fetched until the reader allows them (the kit then shows
-// 允许访问 on the card and starts the block again once the reader says yes). Fetched again as its settings
-// change (`source`) and every 30 minutes; the server keeps an answer a minute and gives what it kept
-// when the network is not there, which the card says by its time (更新于 …). Its face: the city and when,
-// the sky's picture, the temperature large, the sky's words and today's range, how it feels, the air's
-// humidity and the wind, and the days ahead, as much of it as the card's size holds (style.css,
-// container queries); what it says while there is nothing to show (no city yet, one not found, waiting
-// for the reader's consent, the network not there, this computer's network setup sending Open-Meteo's
-// names to an address of its own or of a private network, which the server refuses: code "private")
-// stands in the face's note. In the page's language. Its head is the cards' (the kit's card tokens): the
-// chip, a place's pin, before the city; each day ahead its lowest and highest at either end of a bar, the
-// bar drawn from the lowest to the highest of all the days shown, so that the days read against each other.
+// `unit` (℃ or ℉), are the card's form (the grip at its top right › 设置…), kept in the data part
+// `settings`, which the board writes and this block only reads. The city is looked up by name
+// (geocoding-api.open-meteo.com: its first match, its coordinates), its weather fetched for them
+// (api.open-meteo.com: now, and each day's highest, lowest and sky for six days, today and the five after
+// it), both through context.fetch, the server fetching for it: its needs name the two hosts, and nothing
+// is fetched until the reader allows them (the kit then shows 允许访问 on the card and starts the block
+// again once the reader says yes). Fetched again as its settings change (`source`) and every 30 minutes;
+// the server keeps an answer a minute and gives what it kept when the network is not there, which the
+// card says by its time (更新于 09:05; an answer kept more than 10 minutes, when the network is not there,
+// the head's sign of no network and when it was fetched, 昨天 21:40). In the page's language.
+//
+// Its face (the pack's design B, in the kit's card tokens), laid out by the card's cells (`data-layout`, by
+// context.size, read again on `layout`): a head of the chip (a place's pin), the city and when; the sky's
+// picture (drawn in its own colors: the sun's orange, a cloud's gray, the rain's blue) beside the
+// temperature, the hero, and the sky's words and today's lowest and highest; under them how it feels,
+// the air's humidity and the wind (its direction and speed). A narrow card (2 wide) the picture and the
+// temperature at the bottom and one line under them; a tall one (4 high) the next five days at the
+// bottom, each its weekday, its sky, its lowest, a bar from its lowest to its highest on the scale of all
+// of them, cold to warm, and its highest. What it says while there is nothing to show (no city yet, one
+// not found, waiting for the reader's consent, the network not there, this computer's network setup
+// sending Open-Meteo's names to an address of its own or of a private network, which the server refuses:
+// code "private") is the cards' empty face under the head: what is so, and what to do, faint.
 
 const WORDS = {
   zh: {
     title: "天气",
-    pick: "写上一个城市",
-    where: "右上角手柄 › 设置…",
-    loading: "正在取天气…",
-    unknown: (/** @type {string} */ city) => `找不到「${city}」：换一个写法试试`,
-    consent: "允许联网之后显示天气",
-    offline: "现在连不上网，取不到天气",
-    private: "网络设置把天气服务指向了本地地址，取不到天气",
-    failed: "没能取到天气",
+    states: {
+      pick: ["写上一个城市", "在卡片右上角的 设置… 里填，比如「杭州」"],
+      loading: ["正在取天气…", ""],
+      consent: ["允许联网之后显示天气", "数据来自 open-meteo.com"],
+      offline: ["现在连不上网，取不到天气", "连上以后会自己再取"],
+      private: ["取不到天气", "网络设置把天气服务指向了本地地址"],
+      failed: ["没能取到天气", "过一会儿会自己再取"],
+    },
+    unknown: (/** @type {string} */ city) => [`找不到「${city}」`, "换个写法试试，比如「上海」"],
     at: (/** @type {string} */ time) => `更新于 ${time}`,
+    yesterday: (/** @type {string} */ time) => `昨天 ${time}`,
+    day: (/** @type {number} */ month, /** @type {number} */ day, /** @type {string} */ time) => `${month}月${day}日 ${time}`,
     feels: (/** @type {string} */ value) => `体感 ${value}`,
-    humidity: (/** @type {number} */ value) => `湿度 ${value}%`,
-    wind: (/** @type {number} */ value) => `风 ${value} km/h`,
+    winds: ["北风", "东北风", "东风", "东南风", "南风", "西南风", "西风", "西北风"],
+    wind: (/** @type {string} */ from, /** @type {number} */ value) => `${from} ${value} km/h`,
     today: "今天",
     weekdays: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
     sky: {
@@ -42,18 +51,21 @@ const WORDS = {
   },
   en: {
     title: "Weather",
-    pick: "Name a city",
-    where: "The grip at the top right › Settings…",
-    loading: "Fetching the weather…",
-    unknown: (/** @type {string} */ city) => `No place called “${city}”: try another spelling`,
-    consent: "Shown once it may go online",
-    offline: "Offline: no weather now",
-    private: "The network setup sends the weather service to a local address",
-    failed: "The weather could not be fetched",
+    states: {
+      pick: ["Name a city", "In Settings… at the card's top right, such as “Berlin”"],
+      loading: ["Fetching the weather…", ""],
+      consent: ["Allow internet access to show the weather", "From open-meteo.com"],
+      offline: ["Offline: no weather now", "It fetches again once online"],
+      private: ["No weather", "The network setup sends the weather service to a local address"],
+      failed: ["The weather could not be fetched", "It tries again in a while"],
+    },
+    unknown: (/** @type {string} */ city) => [`No place called “${city}”`, "Try another spelling, such as “Berlin”"],
     at: (/** @type {string} */ time) => `Updated ${time}`,
+    yesterday: (/** @type {string} */ time) => `Yesterday ${time}`,
+    day: (/** @type {number} */ month, /** @type {number} */ day, /** @type {string} */ time) => `${["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][month - 1]} ${day} ${time}`,
     feels: (/** @type {string} */ value) => `Feels ${value}`,
-    humidity: (/** @type {number} */ value) => `Humidity ${value}%`,
-    wind: (/** @type {number} */ value) => `Wind ${value} km/h`,
+    winds: ["N", "NE", "E", "SE", "S", "SW", "W", "NW"],
+    wind: (/** @type {string} */ from, /** @type {number} */ value) => `${from} ${value} km/h`,
     today: "Today",
     weekdays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
     sky: {
@@ -64,6 +76,9 @@ const WORDS = {
   },
 };
 
+/** How old a kept answer is before the head says it is (with no network): 10 minutes. */
+const STALE = 10 * 60_000;
+
 /** The language the page speaks: the UI's where Gallery says it (data-ge-language), else its lang's. */
 function languageOf(/** @type {HTMLElement} */ root) {
   const ui = root.getAttribute("data-ge-language");
@@ -72,7 +87,7 @@ function languageOf(/** @type {HTMLElement} */ root) {
 
 /**
  * The sky a WMO weather code says (what Open-Meteo answers with), as { words (its key in WORDS' sky),
- * picture (which of PICTURES draws it) }; `day` false draws a clear or mostly clear sky with the moon.
+ * picture (which of the pictures draws it) }; `day` false draws a clear or mostly clear sky with the moon.
  * @param {unknown} code
  * @param {boolean} day
  */
@@ -100,13 +115,14 @@ const searchAddress = (city, language) => `https://geocoding-api.open-meteo.com/
 
 /**
  * The address of the weather at a place (its coordinates, to two decimals: one address for one place,
- * which the server keeps), in `unit` (℃ or ℉): now, and five days, by the place's own clock.
+ * which the server keeps), in `unit` (℃ or ℉): now, and six days (today and the five after it), by the
+ * place's own clock.
  * @param {{ latitude: number, longitude: number }} place
  * @param {string} unit
  */
 const forecastAddress = (place, unit) => `https://api.open-meteo.com/v1/forecast?latitude=${place.latitude.toFixed(2)}&longitude=${place.longitude.toFixed(2)}`
-  + "&current=temperature_2m,apparent_temperature,relative_humidity_2m,wind_speed_10m,weather_code,is_day"
-  + `&daily=weather_code,temperature_2m_max,temperature_2m_min&timezone=auto&forecast_days=5${unit === "℉" ? "&temperature_unit=fahrenheit" : ""}`;
+  + "&current=temperature_2m,apparent_temperature,relative_humidity_2m,wind_speed_10m,wind_direction_10m,weather_code,is_day"
+  + `&daily=weather_code,temperature_2m_max,temperature_2m_min&timezone=auto&forecast_days=6${unit === "℉" ? "&temperature_unit=fahrenheit" : ""}`;
 
 /**
  * The first place a lookup's answer gives ({ name, latitude, longitude, region }), or null for none.
@@ -122,60 +138,89 @@ function placeOf(answer) {
 const degrees = (value) => (typeof value === "number" && Number.isFinite(value) ? `${Math.round(value)}°`.replace(/^-/, "−") : "–");
 
 /**
- * What the card says, in `language`, of `state`: { kind: "pick" } (no city), { kind: "loading", city },
- * { kind: "unknown", city } (no such place), { kind: "consent", city }, { kind: "offline", city },
+ * What the card says, in `language`, of `state` at `now`: { kind: "pick" } (no city), { kind: "loading",
+ * city }, { kind: "unknown", city } (no such place), { kind: "consent", city }, { kind: "offline", city },
  * { kind: "private", city } (the server refused the address this computer's resolver gave: one of this
  * computer or of a private network, its network setup's doing), { kind: "failed", city }, or
- * { kind: "weather", place, forecast (Open-Meteo's answer), at (when it was fetched, ISO) }. Its head
- * (the city, and when), and either a note or the weather: the sky's picture and words, the temperature,
- * today's range, the more line's pieces, and the days ahead.
+ * { kind: "weather", place, forecast (Open-Meteo's answer), at (when it was fetched, ISO), cached }. Its head
+ * (the city, when, and whether that is an answer kept from before the network went: `stale`), and either a
+ * note and its hint (the empty face) or the weather: the sky's picture and words, the temperature, today's
+ * lowest and highest, the more line's pieces ({ icon, text }), and the five days after today.
  * @param {any} state
  * @param {"zh" | "en"} language
+ * @param {Date} [now]
  */
-function faceOf(state, language) {
+function faceOf(state, language, now = new Date()) {
   const words = WORDS[language];
-  const head = { city: state.city || state.place?.name || words.title, at: "" };
+  const named = state.kind === "pick" || state.kind === "unknown";
+  const head = { city: named ? words.title : state.city || state.place?.name || words.title, at: "", stale: false };
   if (state.kind !== "weather") {
-    /** @type {Record<string, string>} */
-    const notes = { pick: words.pick, loading: words.loading, consent: words.consent, offline: words.offline, private: words.private, failed: words.failed };
-    const note = state.kind === "unknown" ? words.unknown(state.city) : notes[state.kind] ?? words.failed;
-    return { head, note, hint: state.kind === "pick" || state.kind === "unknown" ? words.where : "", now: null, days: [] };
+    /** @type {Record<string, string[]>} */
+    const states = words.states;
+    const [note, hint] = state.kind === "unknown" ? words.unknown(state.city) : states[state.kind] ?? states.failed;
+    return { head, note, hint, now: null, days: [] };
   }
   const { current = {}, daily = {} } = state.forecast ?? {};
   const sky = skyOf(current.weather_code, current.is_day !== 0);
   const fetched = typeof state.at === "string" ? new Date(state.at) : null;
   const two = (/** @type {number} */ value) => String(value).padStart(2, "0");
-  head.at = fetched && !Number.isNaN(fetched.getTime()) ? words.at(`${two(fetched.getHours())}:${two(fetched.getMinutes())}`) : "";
-  const range = (/** @type {number} */ index) => `${degrees(daily.temperature_2m_max?.[index])} / ${degrees(daily.temperature_2m_min?.[index])}`;
+  if (fetched && !Number.isNaN(fetched.getTime())) {
+    const time = `${two(fetched.getHours())}:${two(fetched.getMinutes())}`;
+    head.stale = state.cached === true && now.getTime() - fetched.getTime() > STALE;
+    const day = (/** @type {Date} */ date) => Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()) / 86_400_000;
+    const ago = day(now) - day(fetched);
+    head.at = !head.stale ? words.at(time) : ago === 0 ? time : ago === 1 ? words.yesterday(time) : words.day(fetched.getMonth() + 1, fetched.getDate(), time);
+  }
+  const range = (/** @type {number} */ index) => `${degrees(daily.temperature_2m_min?.[index])} / ${degrees(daily.temperature_2m_max?.[index])}`;
   const more = [
-    typeof current.apparent_temperature === "number" ? words.feels(degrees(current.apparent_temperature)) : null,
-    typeof current.relative_humidity_2m === "number" ? words.humidity(Math.round(current.relative_humidity_2m)) : null,
-    typeof current.wind_speed_10m === "number" ? words.wind(Math.round(current.wind_speed_10m)) : null,
+    typeof current.apparent_temperature === "number" ? { icon: "feels", text: words.feels(degrees(current.apparent_temperature)) } : null,
+    typeof current.relative_humidity_2m === "number" ? { icon: "humidity", text: `${Math.round(current.relative_humidity_2m)}%` } : null,
+    typeof current.wind_speed_10m === "number" ? { icon: "wind", text: words.wind(typeof current.wind_direction_10m === "number" ? words.winds[Math.round(current.wind_direction_10m / 45) % 8] : "", Math.round(current.wind_speed_10m)).trim() } : null,
   ].filter((piece) => piece !== null);
   const dates = Array.isArray(daily.time) ? daily.time : [];
-  const days = dates.slice(0, 5).map((/** @type {string} */ date, /** @type {number} */ index) => {
+  const days = dates.slice(1, 6).map((/** @type {string} */ date, /** @type {number} */ at) => {
+    const index = at + 1;
     const [year, month, day] = String(date).split("-").map(Number);
-    const weekday = index === 0 ? words.today : words.weekdays[new Date(Date.UTC(year, month - 1, day)).getUTCDay()] ?? "";
+    const weekday = words.weekdays[new Date(Date.UTC(year, month - 1, day)).getUTCDay()] ?? "";
     const [high, low] = [daily.temperature_2m_max?.[index], daily.temperature_2m_min?.[index]];
-    return { weekday, picture: skyOf(daily.weather_code?.[index]).picture, sky: words.sky[skyOf(daily.weather_code?.[index]).words], range: range(index), high: degrees(high), low: degrees(low), span: typeof high === "number" && typeof low === "number" && Number.isFinite(high) && Number.isFinite(low) ? [low, high] : null };
+    const kind = skyOf(daily.weather_code?.[index]);
+    return { weekday, picture: kind.picture, sky: words.sky[kind.words], range: range(index), high: degrees(high), low: degrees(low), span: typeof high === "number" && typeof low === "number" && Number.isFinite(high) && Number.isFinite(low) ? [low, high] : null };
   });
-  return { head, note: "", hint: "", now: { picture: sky.picture, sky: words.sky[sky.words], temperature: degrees(current.temperature_2m), range: dates.length ? range(0) : "", more }, days };
+  const span = typeof daily.temperature_2m_max?.[0] === "number" && typeof daily.temperature_2m_min?.[0] === "number" ? [daily.temperature_2m_min[0], daily.temperature_2m_max[0]] : null;
+  return { head, note: "", hint: "", now: { picture: sky.picture, sky: words.sky[sky.words], temperature: degrees(current.temperature_2m), range: dates.length ? range(0) : "", span, more }, days };
 }
 
-// The sky's pictures, a 24 x 24 drawing each in the text's color (style.css colors the sun and the rain).
-const SUN = '<circle cx="12" cy="12" r="4.2" class="gallery-weather-sun"/><g class="gallery-weather-sun" stroke-linecap="round" stroke-width="1.8" fill="none"><path d="M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M5.3 18.7l1.6-1.6M17.1 6.9l1.6-1.6"/></g>';
-const CLOUD = '<path class="gallery-weather-cloud" d="M7.5 19h9.3a4.2 4.2 0 0 0 .5-8.4 5.6 5.6 0 0 0-10.7 1.6A3.4 3.4 0 0 0 7.5 19z"/>';
+// The sky's pictures, each drawn on a box of 64 in its own colors (style.css: the sun's orange, a cloud's
+// gray, the rain's blue, as the instance's custom properties say them in light and dark).
+const cloud = (x = 0, y = 0, scale = 1, tone = "cloud") => `<g transform="translate(${x} ${y}) scale(${scale})" class="gallery-weather-${tone}"><rect x="13" y="34" width="39" height="15" rx="7.5"/><circle cx="24" cy="35" r="8.5"/><circle cx="35.5" cy="30" r="11.5"/><circle cx="45.5" cy="38" r="7.5"/></g>`;
+function sunAt(cx, cy, r) {
+  let rays = "";
+  for (let i = 0; i < 8; i++) {
+    const a = (i * Math.PI) / 4;
+    rays += `<line x1="${(cx + (r + 5) * Math.cos(a)).toFixed(1)}" y1="${(cy + (r + 5) * Math.sin(a)).toFixed(1)}" x2="${(cx + (r + 9.5) * Math.cos(a)).toFixed(1)}" y2="${(cy + (r + 9.5) * Math.sin(a)).toFixed(1)}"/>`;
+  }
+  return `<g class="gallery-weather-sun"><circle cx="${cx}" cy="${cy}" r="${r}"/><g class="gallery-weather-rays" stroke-width="3" stroke-linecap="round">${rays}</g></g>`;
+}
+const moonAt = (cx, cy, r) => `<path class="gallery-weather-moon" d="M${cx + r * 0.35} ${cy - r}a${r} ${r} 0 1 0 ${r * 0.65} ${r * 1.55}a${r * 0.8} ${r * 0.8} 0 0 1 -${r * 0.65} -${r * 1.55}z"/>`;
 const PICTURES = {
-  sun: SUN,
-  moon: '<path class="gallery-weather-moon" d="M15.6 3.4a8.6 8.6 0 1 0 5 15.2A7.2 7.2 0 0 1 15.6 3.4z"/>',
-  partly: '<g transform="translate(-3 -4) scale(.8)">' + SUN + "</g>" + CLOUD,
-  "partly-night": '<path class="gallery-weather-moon" d="M9.6 2.6a6.2 6.2 0 1 0 6.2 8.6A5.2 5.2 0 0 1 9.6 2.6z"/>' + CLOUD,
-  cloud: CLOUD,
-  fog: '<g class="gallery-weather-cloud-line" stroke-linecap="round" stroke-width="1.9" fill="none"><path d="M4 8.5h16M6 12.5h12M4 16.5h16"/></g>',
-  rain: '<g transform="translate(0 -3)">' + CLOUD + '</g><g class="gallery-weather-rain" stroke-linecap="round" stroke-width="1.8" fill="none"><path d="M9 18.5l-1 3M13 18.5l-1 3M17 18.5l-1 3"/></g>',
-  snow: '<g transform="translate(0 -3)">' + CLOUD + '</g><g class="gallery-weather-snow"><circle cx="8.5" cy="20" r="1.1"/><circle cx="12.5" cy="21.5" r="1.1"/><circle cx="16.5" cy="20" r="1.1"/></g>',
-  thunder: '<g transform="translate(0 -3)">' + CLOUD + '</g><path class="gallery-weather-bolt" d="M12.5 14.5l-2.6 4.2h2.4l-1.2 4 3.8-5.4h-2.4l1.4-2.8z"/>',
+  sun: sunAt(32, 32, 11),
+  moon: moonAt(30, 32, 14),
+  partly: sunAt(24, 23, 9) + cloud(5, 5, 0.95),
+  "partly-night": moonAt(22, 22, 11) + cloud(5, 5, 0.95),
+  cloud: cloud(-6, -8, 0.9, "cloud-2") + cloud(4, 2, 1),
+  fog: `${cloud(0, -8, 1)}<g class="gallery-weather-mist" stroke-width="3.2" stroke-linecap="round"><line x1="14" y1="49" x2="50" y2="49"/><line x1="20" y1="56" x2="44" y2="56"/></g>`,
+  rain: `${cloud(0, -6, 1)}<g class="gallery-weather-rain" stroke-width="3.2" stroke-linecap="round"><line x1="24" y1="49" x2="21.5" y2="55"/><line x1="33.5" y1="49" x2="31" y2="55"/><line x1="43" y1="49" x2="40.5" y2="55"/></g>`,
+  snow: `${cloud(0, -6, 1)}<g class="gallery-weather-snow"><circle cx="23" cy="52" r="2.4"/><circle cx="32.5" cy="56" r="2.4"/><circle cx="42" cy="52" r="2.4"/></g>`,
+  thunder: `${cloud(0, -8, 1)}<path class="gallery-weather-bolt" d="M34 40l-7 10h6l-3 9 9-12h-6l3-7z"/>`,
+};
+// The more line's small pictures, of lines, 24 x 24.
+const ICONS = {
+  feels: '<path d="M10 13.8V5.5a2 2 0 1 1 4 0v8.3a3.8 3.8 0 1 1-4 0z"/>',
+  humidity: '<path d="M12 4s5.5 6 5.5 10a5.5 5.5 0 0 1-11 0C6.5 10 12 4 12 4z"/>',
+  wind: '<path d="M3.5 9.5h10a2.8 2.8 0 1 0-2.8-2.8M3.5 14.5h14a2.8 2.8 0 1 1-2.8 2.8M3.5 12h6"/>',
+  offline: '<path d="M3.5 3.5l17 17M9 16.2a4.5 4.5 0 0 1 5.5-.5M5.5 12.5a9.5 9.5 0 0 1 3.6-2.3M18.6 12.6a9.5 9.5 0 0 0-3-2.1M2.5 9a14 14 0 0 1 3.5-2.3M21.5 9A14 14 0 0 0 10.6 5.3"/><circle cx="12" cy="19.5" r=".9" fill="currentColor"/>',
 };
+const lines = (/** @type {string} */ drawing) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${drawing}</svg>`;
 
 /**
  * An element of the face, of `kind` (its class).
@@ -192,30 +237,43 @@ function made(tag, kind) {
 /** A sky's picture, as an svg element. @param {string} picture */
 function pictureOf(picture) {
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("viewBox", "0 0 64 64");
   svg.setAttribute("aria-hidden", "true");
   svg.setAttribute("class", "gallery-weather-picture");
-  svg.innerHTML = PICTURES[/** @type {keyof typeof PICTURES} */ (picture)] ?? CLOUD;
+  svg.innerHTML = PICTURES[/** @type {keyof typeof PICTURES} */ (picture)] ?? PICTURES.cloud;
   return svg;
 }
 
 DocKit.component({
   id: "gallery/weather",
-  on: ["source"],
+  on: ["source", "layout"],
   mount(host, context) {
     const language = languageOf(document.documentElement);
     const face = made("div", "face");
     host.append(face);
+    const layout = () => {
+      const size = context.size;
+      face.dataset.layout = !size ? "wide" : size.w <= 2 ? "narrow" : size.h >= 4 ? "tall" : "wide";
+    };
     const draw = (/** @type {any} */ state) => {
       const said = faceOf(state, language);
       const head = made("p", "head");
       const chip = made("span", "chip");
       chip.setAttribute("aria-hidden", "true");
-      chip.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11a3 3 0 1 0 6 0 3 3 0 0 0-6 0"/><path d="M17.7 16.7l-4.3 4.2a2 2 0 0 1-2.8 0l-4.3-4.2a8 8 0 1 1 11.4 0z"/></svg>';
+      chip.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11z"/><circle cx="12" cy="10" r="2.3"/></svg>';
       const city = made("span", "city");
       city.textContent = said.head.city;
       const at = made("span", "at");
-      at.textContent = said.head.at;
+      if (said.head.stale) {
+        const sign = made("span", "stale");
+        sign.innerHTML = lines(ICONS.offline);
+        sign.title = said.head.at;
+        at.append(sign);
+      }
+      // The time in words of its own: a narrow card shows the sign of an answer kept from before alone (style.css).
+      const when = made("span", "when");
+      when.textContent = said.head.at;
+      at.append(when);
       head.append(chip, city, at);
       /** @type {HTMLElement[]} */
       const parts = [head];
@@ -231,52 +289,68 @@ DocKit.component({
         words.append(sky, range);
         now.append(pictureOf(said.now.picture), temperature, words);
         const more = made("p", "more");
-        more.replaceChildren(...said.now.more.map((piece) => {
+        more.replaceChildren(...said.now.more.map(({ icon, text }) => {
           const span = made("span", "piece");
-          span.textContent = piece;
+          span.innerHTML = lines(ICONS[/** @type {keyof typeof ICONS} */ (icon)]);
+          span.append(text);
           return span;
         }));
         const days = made("ol", "days");
-        const spans = said.days.flatMap((day) => day.span ?? []);
-        const [lowest, highest] = [Math.min(...spans), Math.max(...spans)];
+        const spans = [...said.days.flatMap((day) => (day.span ? [day.span] : [])), ...(said.now.span ? [said.now.span] : [])];
+        const lowest = Math.min(...spans.map(([low]) => low));
+        const highest = Math.max(...spans.map(([, high]) => high));
         days.replaceChildren(...said.days.map((day) => {
           const item = made("li", "day");
           const weekday = made("span", "weekday");
           weekday.textContent = day.weekday;
-          const range = made("span", "day-range");
           const low = made("span", "low");
           low.textContent = day.low;
           const bar = made("span", "bar");
           bar.setAttribute("aria-hidden", "true");
           if (day.span && highest > lowest) {
+            // The day's part of the whole scale, its colors the scale's own there: the gradient as wide as the scale, moved under it.
+            const from = (day.span[0] - lowest) / (highest - lowest);
+            const to = (day.span[1] - lowest) / (highest - lowest);
             const fill = made("span", "fill");
-            fill.style.setProperty("--from", String((day.span[0] - lowest) / (highest - lowest)));
-            fill.style.setProperty("--to", String((day.span[1] - lowest) / (highest - lowest)));
+            fill.style.left = `${from * 100}%`;
+            fill.style.right = `${(1 - to) * 100}%`;
+            const part = Math.max(to - from, 0.01);
+            fill.style.backgroundSize = `${100 / part}% 100%`;
+            fill.style.backgroundPosition = `${1 - part > 0 ? (from / (1 - part)) * 100 : 0}% 0`;
             bar.append(fill);
           }
           const high = made("span", "high");
           high.textContent = day.high;
-          range.append(low, bar, high);
           const picture = pictureOf(day.picture);
           picture.setAttribute("aria-label", day.sky);
           picture.removeAttribute("aria-hidden");
           picture.setAttribute("role", "img");
-          item.append(weekday, picture, range);
+          item.append(weekday, picture, low, bar, high);
           return item;
         }));
-        parts.push(now, more, days);
+        // A narrow card's one line under the temperature: the sky, then today's lowest and highest.
+        const line = made("p", "line");
+        const lineSky = document.createElement("b");
+        lineSky.textContent = said.now.sky;
+        const dot = made("span", "dot");
+        dot.textContent = "·";
+        line.append(lineSky, dot, said.now.range);
+        parts.push(now, line, more, days);
       } else {
+        const empty = made("div", "empty");
         const note = made("p", "note");
         note.textContent = said.note;
-        parts.push(note);
+        empty.append(note);
         if (said.hint) {
           const hint = made("p", "hint");
           hint.textContent = said.hint;
-          parts.push(hint);
+          empty.append(hint);
         }
+        parts.push(empty);
       }
       face.replaceChildren(...parts);
       face.dataset.kind = state.kind;
+      layout();
     };
     let asked = 0; // the latest load: an earlier one that answers later draws nothing
     const load = async () => {
@@ -293,7 +367,7 @@ DocKit.component({
         if (!found) return draw({ kind: "unknown", city });
         const answer = await context.fetch(forecastAddress(found, unit));
         if (mine !== asked) return;
-        draw({ kind: "weather", city, place: found, forecast: answer.data, at: answer.at });
+        draw({ kind: "weather", city, place: found, forecast: answer.data, at: answer.at, cached: answer.cached });
       } catch (error) {
         if (mine !== asked) return;
         const code = /** @type {DocFetchError} */ (error).code;
@@ -306,6 +380,7 @@ DocKit.component({
     return {
       update(reason) {
         if (reason === "source") load();
+        else if (reason === "layout") layout();
       },
     };
   },

package/packs/gallery/weather/preview.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120"><rect width="240" height="120" rx="8" fill="#f3f3f1"/><rect x="16.5" y="12.5" width="207" height="95" rx="12" fill="#ffffff" stroke="#e7e6e3"/><rect x="30" y="24" width="14" height="14" rx="4.5" fill="#ebf2fa"/><g transform="translate(32 26) scale(.4167)" fill="none" stroke="#2e7cd1" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11a3 3 0 1 0 6 0 3 3 0 0 0-6 0"/><path d="M17.7 16.7l-4.3 4.2a2 2 0 0 1-2.8 0l-4.3-4.2a8 8 0 1 1 11.4 0z"/></g><rect x="50" y="28" width="22" height="6" rx="3" fill="#3b3a37"/><rect x="174" y="29" width="36" height="5" rx="2.5" fill="#c4c2bd"/><circle cx="40" cy="64" r="6.5" fill="#d98a1c"/><path d="M40 52.5v2.5M28.5 64H31M31.9 55.9l1.8 1.8M48.1 55.9l-1.8 1.8" stroke="#d98a1c" stroke-width="2" stroke-linecap="round"/><path d="M40 80h14a6.5 6.5 0 0 0 .8-12.9 8.6 8.6 0 0 0-16.5 2.5A5.2 5.2 0 0 0 40 80z" fill="#a3abb8"/><text x="64" y="80" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="30" font-weight="600" letter-spacing="-.5" fill="#3b3a37">18°</text><rect x="116" y="62" width="26" height="6" rx="3" fill="#3b3a37"/><rect x="116" y="73" width="40" height="5" rx="2.5" fill="#c4c2bd"/><rect x="30" y="93" width="34" height="5" rx="2.5" fill="#c4c2bd"/><circle cx="70" cy="95.5" r="1.3" fill="#c4c2bd"/><rect x="76" y="93" width="32" height="5" rx="2.5" fill="#c4c2bd"/><circle cx="114" cy="95.5" r="1.3" fill="#c4c2bd"/><rect x="120" y="93" width="40" height="5" rx="2.5" fill="#c4c2bd"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120"><rect width="240" height="120" rx="8" fill="#f3f3f1"/><rect x="16.5" y="12.5" width="207" height="95" rx="8" fill="#ffffff" stroke="#e6e6e3"/><rect x="28" y="22" width="10" height="10" rx="3" fill="#efefed"/><rect x="42" y="24.5" width="18" height="5" rx="2.5" fill="#37352f"/><rect x="64" y="24.5" width="34" height="5" rx="2.5" fill="#d4d3cf"/><g fill="#f3a935" stroke="#f3a935"><circle cx="40" cy="52" r="6"/><path d="M40 41v3M40 60v3M29 52h3M48 52h3M32.5 44.5l2 2M45.5 44.5l-2 2M32.5 59.5l2-2" stroke-width="1.6" stroke-linecap="round"/></g><g fill="#dde2e9"><rect x="38" y="56" width="22" height="9" rx="4.5"/><circle cx="45" cy="57" r="5"/><circle cx="52" cy="54" r="6.5"/></g><rect x="70" y="44" width="34" height="22" rx="3" fill="#1d1d1b"/><rect x="112" y="46" width="16" height="6" rx="3" fill="#37352f"/><rect x="112" y="57" width="26" height="5" rx="2.5" fill="#a6a5a1"/><rect x="28" y="88" width="40" height="5" rx="2.5" fill="#a6a5a1"/><rect x="80" y="88" width="26" height="5" rx="2.5" fill="#a6a5a1"/><rect x="132" y="88" width="54" height="5" rx="2.5" fill="#a6a5a1"/></svg>