client.js

/*!
 * dsh-weather-panel 1.5.0 — browser bundle
 * Generated by scripts/build.mjs from src/. Do not edit this file by hand.
 * Locating, fetching, caching and rendering all run in this module; the Host
 * half (index.js) only exists so the bundle row resolves.
 */
window.__ModuleLoader__.load({
  id: "dsh-weather-panel",
  factory(require) {
    const React = require('react');
    const h = React.createElement;

    /* ---- src/lib/i18n.js ---- */
    /**
     * Locale dictionaries for the panel's own UI.
     *
     * The Host reads `locale/*.json` for the plugin's *display metadata* (title,
     * description, icon). This table is what the panel, the startup notice and the
     * typhoon view render, registered through the Client locale service so all of
     * them follow the Harness language switch.
     */

    const WEATHER_LOCALE_NAMESPACE = 'dsh-weather-panel';

    const WEATHER_DICT = {
      zh: {
        'nav.label': '天气',
        'panel.title': '天气面板',
        'panel.subtitleNetwork': '网络定位 · {ip}',
        'panel.subtitleManual': '手动选择的位置',
        'panel.subtitleGps': '系统定位',
        'panel.updated': '更新于 {time}',
        'action.refresh': '刷新',
        'action.retry': '重试',
        'action.useImperial': '切换为 °F',
        'action.useMetric': '切换为 °C',
        'action.changeLocation': '更换位置',
        'action.close': '关闭面板',
        'action.cancel': '取消',
        'state.locating': '正在定位…',
        'state.loading': '正在获取天气…',
        'state.updating': '更新中…',
        'state.cached': '本地缓存',
        'state.stale': '数据可能已过期',
        'error.locate': '无法通过网络判断当前位置，可以手动搜索城市。',
        'error.weather': '获取天气数据失败，请稍后重试。',
        'error.timeout': '请求超时。',
        'error.network': '网络不可用或被拦截。',
        'error.http': '服务返回 HTTP {status}。',
        'error.noResult': '没有找到匹配的城市。',
        'error.gps': '无法获取系统定位（可能被系统拒绝）。',
        'proxy.hint': '当前出口 IP 显示为「{country}」，可能开了代理/VPN。若定位不对，请手动切换城市。',
        'proxy.action': '手动切换城市',
        'now.title': '当前天气',
        'now.feelsLike': '体感 {temp}',
        'param.humidity': '湿度',
        'param.pressure': '气压',
        'param.wind': '风',
        'param.gust': '阵风',
        'param.precipitation': '降水',
        'param.precipProbability': '降水概率',
        'param.cloudCover': '云量',
        'param.uv': '紫外线',
        'param.sunrise': '日出',
        'param.sunset': '日落',
        'day.today': '今天',
        'day.tomorrow': '明天',
        'day.afterTomorrow': '后天',
        'day.inDays': '{n} 天后',
        'day.high': '最高',
        'day.low': '最低',
        'forecast.title': '未来 5 天',
        'hourly.title': '未来 24 小时',
        'hourly.now': '现在',
        'chart.title': '逐小时降水',
        'chart.amount': '降水量',
        'chart.chance': '降水概率',
        'chart.chanceScale': '降水概率 0–100%',
        'chart.empty': '未来 24 小时基本无降水',
        'tab.weather': '天气',
        'tab.typhoon': '台风',
        'tab.satellite': '卫星',
        'zoom.title': '大图查看',
        'zoom.openOriginal': '打开原图',
        'zoom.close': '关闭',
        'history.title': '历史气温',
        'history.range': '近 {n} 天',
        'history.high': '最高',
        'history.low': '最低',
        'history.mean': '平均',
        'history.note': '数据：Open-Meteo 逐日统计 · 截至昨天（完整日）',
        'history.empty': '暂无历史气温数据',
        'history.error': '历史气温获取失败，稍后再试',
        'tab.pro': '专业',
        'pro.sst.title': '西北太平洋海表温度',
        'pro.sst.region': '海域',
        'pro.sst.date': '日期',
        'pro.sst.older': '前一天',
        'pro.sst.newer': '后一天',
        'pro.sst.note': '按日更新，最多回看 15 天',
        'pro.sst.unavailable': '该日期暂无海温图',
        'pro.ecmwf.title': 'ECMWF 中国区域天气图',
        'pro.ecmwf.code': '产品',
        'pro.ecmwf.run': '起报时次',
        'pro.ecmwf.hour': '预报时效',
        'pro.ecmwf.note': '每天 00Z / 12Z 两次起报，最新时次出图会滞后几小时',
        'pro.ecmwf.unavailable': '该时效暂无图',
        'pro.attribution': '数据与图片：easterlywave.com（社区站点，非官方；仅作个人查看）',    'sat.title': '卫星云图',
        'sat.source': '国家卫星气象中心 · 中国气象局',
        'sat.product': '产品',
        'sat.time': '时次',
        'sat.prev': '更早一帧',
        'sat.next': '更新一帧',
        'sat.loading': '正在加载产品清单…',
        'sat.empty': '该产品暂无影像',
        'sat.error': '产品清单获取失败',
        'sat.unavailable': '该时次暂无影像',
        'sat.note': '官方产品图：风云四号 B 星每 15 分钟、风云二号每 30 分钟更新',
        'sat.official': '打开官方页面',
        'sat.zoomHint': '点击放大查看',    'radar.title': '雷达拼图',
        'radar.source': '中央气象台 · 中国气象局',
        'radar.region': '区域',
        'radar.time': '时次',
        'radar.prev': '上一时次',
        'radar.next': '下一时次',
        'radar.play': '播放',
        'radar.pause': '暂停',
        'radar.latest': '最新',
        'radar.unavailable': '该时次暂无产品图',
        'radar.note': '官方产品图，约 6 分钟更新；全国可回看 24 小时，分区约 2 小时。',
        'radar.official': '打开官方雷达页',
        'radar.openImage': '打开原图',
        'radar.zoomHint': '点击放大查看',
        'radar.zoomTitle': '雷达拼图大图',
        'radar.close': '关闭',
        'tab.radar': '雷达',
        'alerts.title': '气象预警',
        'alerts.none': '当前没有生效的预警',
        'alerts.count': '{n} 条生效',
        'alerts.scopeCity': '本市',
        'alerts.scopeRegion': '本省',
        'alerts.more': '另有 {n} 条',
        'alerts.expand': '展开全部',
        'alerts.collapse': '收起',
        'alerts.source': '中央气象台 · 中国气象局',
        'alerts.openAll': '查看全部预警',
        'alerts.issued': '发布',
        'alert.level.blue': '蓝色',
        'alert.level.yellow': '黄色',
        'alert.level.orange': '橙色',
        'alert.level.red': '红色',
        'notice.title': '天气提醒',
        'notice.rainTitle': '今天有降水',
        'notice.rainBody': '预计降水量 {amount}，降水概率最高 {chance}。出门记得带伞。',
        'notice.alertTitle': '收到气象预警',
        'notice.alertBody': '当前有 {count} 条生效预警，最高等级：{level}。',
        'notice.confirm': '知道了',
        'notice.dismiss': '关闭提醒',
        'notice.more': '还有 {n} 条',
        'notice.source': '数据：Open-Meteo · 中央气象台',
        'typhoon.title': '台风路径',
        'typhoon.active': '活跃',
        'typhoon.ended': '已结束',
        'typhoon.none': '当前没有台风信息',
        'typhoon.noActive': '近期无活跃台风',
        'typhoon.noActiveHint': '中央气象台当前没有编号中的活跃台风。可查看最近一次台风的路径，或到官方页面确认。',
        'typhoon.viewLatest': '查看最近一次',
        'typhoon.hideLatest': '收起最近一次',
        'typhoon.latest': '最近定位',
        'typhoon.pressure': '中心气压',
        'typhoon.wind': '最大风速',
        'typhoon.move': '移动',
        'typhoon.forecast': '未来路径',
        'typhoon.peak': '最强强度',
        'typhoon.meaning': '名称含义',
        'typhoon.source': '中央气象台台风网',
        'typhoon.official': '查看官方路径图',
        'typhoon.land': '底图：Natural Earth（公有领域）',
        'typhoon.select': '切换台风',
        'typhoon.hint': '点击轨迹点查看该时刻详情',
        'typhoon.backToCurrent': '回到当前时刻',
        'typhoon.windRadius': '风圈半径',
        'typhoon.windRadiusGrade': '{grade} 风圈',
        'typhoon.updated': '更新于 {time}',
        'typhoon.noForecast': '暂无预报路径',
        'location.title': '位置来源',
        'location.description': '默认按公网 IP 判断城市（城市级精度）。如果你开了网络代理 / VPN，IP 会变成代理出口，城市会判错——这种情况下请直接在下面搜索并手动切换城市，或用「系统定位」。',
        'location.auto': '自动（网络定位）',
        'location.network': '网络定位',
        'location.system': '系统定位',
        'location.mode': '定位方式',
        'location.networkHint': '按公网 IP 判断城市（城市级精度；开了代理或 VPN 可能判错）。',
        'location.systemHint': '使用浏览器 / 系统定位，精度更高；首次使用会请求一次授权，不可用时自动回退到网络定位。',
        'location.manualActive': '当前为手动选择的城市，点上方任一方式可切回自动定位。',
        'location.autoHint': '重新检测当前网络所在城市',
        'location.gps': '使用系统定位',
        'location.gpsHint': '调用浏览器地理位置，精度更高',
        'location.precise': '高精度系统定位',
        'location.preciseHint': '开启后每次启动都优先使用浏览器 / 系统定位（会请求一次定位权限）；不可用时自动回退到 IP。',
        'location.gpsFallback': '系统定位不可用，本次已回退到网络定位。',
        'location.preciseOn': '已开启',
        'location.preciseOff': '已关闭',
        'location.previewNotice': '预览提醒弹窗',
        'location.previewNoticeHint': '用一条演示用的台风红色预警，检查弹窗样式（不会写入真实预警）。',
        'panel.subtitleGpsAccurate': '系统定位 · 精度约 {accuracy} 米',
        'location.searchTitle': '搜索城市',
        'location.placeholder': '输入城市名，例如 北京',
        'location.searching': '搜索中…',
        'location.noResult': '没有找到匹配的城市。',
        'footer.weather': '天气数据',
        'footer.location': '定位数据',
        'footer.alerts': '预警数据',
        'footer.license': 'CC BY 4.0',
        'footer.note': '浏览器内直接请求，无需 API Key。',
        'footer.feedback': '反馈 / 提 issue',
        'aria.icon': '天气图标',
        'aria.loading': '加载中'
      },
      en: {
        'nav.label': 'Weather',
        'panel.title': 'Weather panel',
        'panel.subtitleNetwork': 'Network location · {ip}',
        'panel.subtitleManual': 'Manually selected location',
        'panel.subtitleGps': 'Device location',
        'panel.updated': 'Updated {time}',
        'action.refresh': 'Refresh',
        'action.retry': 'Retry',
        'action.useImperial': 'Switch to °F',
        'action.useMetric': 'Switch to °C',
        'action.changeLocation': 'Change location',
        'action.close': 'Close panel',
        'action.cancel': 'Cancel',
        'state.locating': 'Locating…',
        'state.loading': 'Loading weather…',
        'state.updating': 'Updating…',
        'state.cached': 'Cached',
        'state.stale': 'May be out of date',
        'error.locate': 'Could not determine this network’s location. Pick a city manually.',
        'error.weather': 'Could not load the weather. Try again in a moment.',
        'error.timeout': 'The request timed out.',
        'error.network': 'Network unavailable or blocked.',
        'error.http': 'The service returned HTTP {status}.',
        'error.noResult': 'No matching city.',
        'error.gps': 'Device location is unavailable (it may be denied).',
        'proxy.hint': 'This network exits in “{country}”, which usually means a proxy or VPN is on. If the location is wrong, switch the city manually.',
        'proxy.action': 'Pick a city',
        'now.title': 'Now',
        'now.feelsLike': 'Feels like {temp}',
        'param.humidity': 'Humidity',
        'param.pressure': 'Pressure',
        'param.wind': 'Wind',
        'param.gust': 'Gusts',
        'param.precipitation': 'Precipitation',
        'param.precipProbability': 'Precip. chance',
        'param.cloudCover': 'Cloud cover',
        'param.uv': 'UV index',
        'param.sunrise': 'Sunrise',
        'param.sunset': 'Sunset',
        'day.today': 'Today',
        'day.tomorrow': 'Tomorrow',
        'day.afterTomorrow': 'In 2 days',
        'day.inDays': 'In {n} days',
        'day.high': 'High',
        'day.low': 'Low',
        'forecast.title': 'Next 5 days',
        'hourly.title': 'Next 24 hours',
        'hourly.now': 'Now',
        'chart.title': 'Hourly precipitation',
        'chart.amount': 'Amount',
        'chart.chance': 'Chance',
        'chart.chanceScale': 'Chance of precipitation 0–100%',
        'chart.empty': 'Almost no rain in the next 24 hours',
        'tab.weather': 'Weather',
        'tab.typhoon': 'Typhoon',
        'tab.satellite': 'Satellite',
        'zoom.title': 'Enlarged image',
        'zoom.openOriginal': 'Open the full image',
        'zoom.close': 'Close',
        'history.title': 'Temperature history',
        'history.range': 'Last {n} days',
        'history.high': 'High',
        'history.low': 'Low',
        'history.mean': 'Mean',
        'history.note': 'Data: Open-Meteo daily statistics · up to yesterday (complete days)',
        'history.empty': 'No historical temperature data',
        'history.error': 'Could not load the temperature history',
        'tab.pro': 'Pro',
        'pro.sst.title': 'Sea surface temperature',
        'pro.sst.region': 'Region',
        'pro.sst.date': 'Date',
        'pro.sst.older': 'Previous day',
        'pro.sst.newer': 'Next day',
        'pro.sst.note': 'Updated daily, up to 15 days of history',
        'pro.sst.unavailable': 'No SST image for this date',
        'pro.ecmwf.title': 'ECMWF charts · China',
        'pro.ecmwf.code': 'Product',
        'pro.ecmwf.run': 'Model run',
        'pro.ecmwf.hour': 'Forecast hour',
        'pro.ecmwf.note': 'Two runs a day (00Z / 12Z); the newest run appears with a few hours lag',
        'pro.ecmwf.unavailable': 'No chart for this hour',
        'pro.attribution': 'Data and imagery: easterlywave.com (community site, unofficial; personal viewing)',    'sat.title': 'Satellite imagery',
        'sat.source': 'NSMC · China Meteorological Administration',
        'sat.product': 'Product',
        'sat.time': 'Time',
        'sat.prev': 'Older frame',
        'sat.next': 'Newer frame',
        'sat.loading': 'Loading the product list…',
        'sat.empty': 'No imagery for this product',
        'sat.error': 'Could not load the product list',
        'sat.unavailable': 'No imagery for this frame',
        'sat.note': 'Official products: FY-4B every 15 minutes, FY-2 every 30 minutes',
        'sat.official': 'Open the official page',
        'sat.zoomHint': 'Click to enlarge',    'radar.title': 'Radar mosaic',
        'radar.source': 'NMC · China Meteorological Administration',
        'radar.region': 'Region',
        'radar.time': 'Time',
        'radar.prev': 'Previous frame',
        'radar.next': 'Next frame',
        'radar.play': 'Play',
        'radar.pause': 'Pause',
        'radar.latest': 'Latest',
        'radar.unavailable': 'No image for this frame',
        'radar.note': 'Official product images, updated about every 6 minutes; 24 hours for the nationwide mosaic, about 2 hours for regions.',
        'radar.official': 'Open the official radar page',
        'radar.openImage': 'Open the full image',
        'radar.zoomHint': 'Click to enlarge',
        'radar.zoomTitle': 'Radar mosaic, enlarged',
        'radar.close': 'Close',
        'tab.radar': 'Radar',
        'alerts.title': 'Weather alerts',
        'alerts.none': 'No active alerts',
        'alerts.count': '{n} active',
        'alerts.scopeCity': 'City',
        'alerts.scopeRegion': 'Province',
        'alerts.more': '{n} more',
        'alerts.expand': 'Show all',
        'alerts.collapse': 'Collapse',
        'alerts.source': 'NMC · China Meteorological Administration',
        'alerts.openAll': 'See all alerts',
        'alerts.issued': 'Issued',
        'alert.level.blue': 'Blue',
        'alert.level.yellow': 'Yellow',
        'alert.level.orange': 'Orange',
        'alert.level.red': 'Red',
        'notice.title': 'Weather notice',
        'notice.rainTitle': 'Rain today',
        'notice.rainBody': 'About {amount} expected, chance up to {chance}. Take an umbrella.',
        'notice.alertTitle': 'Weather alert received',
        'notice.alertBody': '{count} active alert(s), highest level: {level}.',
        'notice.confirm': 'Got it',
        'notice.dismiss': 'Dismiss',
        'notice.more': '{n} more',
        'notice.source': 'Data: Open-Meteo · NMC',
        'typhoon.title': 'Typhoon track',
        'typhoon.active': 'Active',
        'typhoon.ended': 'Ended',
        'typhoon.none': 'No typhoon information',
        'typhoon.noActive': 'No active typhoon right now',
        'typhoon.noActiveHint': 'The CMA has no numbered active typhoon at the moment. You can still look at the most recent track, or check the official page.',
        'typhoon.viewLatest': 'View the most recent',
        'typhoon.hideLatest': 'Hide the most recent',
        'typhoon.latest': 'Latest fix',
        'typhoon.pressure': 'Central pressure',
        'typhoon.wind': 'Max wind',
        'typhoon.move': 'Moving',
        'typhoon.forecast': 'Forecast track',
        'typhoon.peak': 'Peak intensity',
        'typhoon.meaning': 'Name meaning',
        'typhoon.source': 'NMC typhoon service',
        'typhoon.official': 'Open official map',
        'typhoon.land': 'Basemap: Natural Earth (public domain)',
        'typhoon.select': 'Switch typhoon',
        'typhoon.hint': 'Click a track point for that moment',
        'typhoon.backToCurrent': 'Back to current',
        'typhoon.windRadius': 'Wind radius',
        'typhoon.windRadiusGrade': '{grade} force ring',
        'typhoon.updated': 'Updated {time}',
        'typhoon.noForecast': 'No forecast track yet',
        'location.title': 'Location source',
        'location.description': 'The city is derived from your public IP (city-level accuracy). If a proxy or VPN is on, the IP belongs to its exit and the city will be wrong — in that case search for your city below and switch manually, or use device location.',
        'location.auto': 'Automatic (network)',
        'location.network': 'Network',
        'location.system': 'System',
        'location.mode': 'Location mode',
        'location.networkHint': 'Resolves the city from your public IP (city level; a proxy or VPN can pick the wrong one).',
        'location.systemHint': 'Uses the browser / system location for better accuracy; asks permission once and falls back to the network when unavailable.',
        'location.manualActive': 'A manually picked city is active — choose a mode above to go back to automatic.',
        'location.autoHint': 'Detect the city this network belongs to',
        'location.gps': 'Use device location',
        'location.gpsHint': 'Uses the browser geolocation API for better accuracy',
        'location.precise': 'High-accuracy device location',
        'location.preciseHint': 'When on, every start prefers the browser / system location (asks for permission once) and falls back to the IP when unavailable.',
        'location.gpsFallback': 'Device location unavailable; fell back to network location this time.',
        'location.preciseOn': 'On',
        'location.preciseOff': 'Off',
        'location.previewNotice': 'Preview the notice',
        'location.previewNoticeHint': 'Shows the dialog with a demo red typhoon warning (never touches real alerts).',
        'panel.subtitleGpsAccurate': 'Device location · ~{accuracy} m',
        'location.searchTitle': 'Search a city',
        'location.placeholder': 'City name, e.g. Beijing',
        'location.searching': 'Searching…',
        'location.noResult': 'No matching city.',
        'footer.weather': 'Weather data',
        'footer.location': 'Location data',
        'footer.alerts': 'Alert data',
        'footer.license': 'CC BY 4.0',
        'footer.note': 'Requested in the browser; no API key.',
        'footer.feedback': 'Report an issue',
        'aria.icon': 'Weather icon',
        'aria.loading': 'Loading'
      }
    };

    /** Replace `{name}` placeholders in a message. Unknown placeholders are kept. */
    function interpolate(template, vars) {
      const text = typeof template === 'string' ? template : String(template == null ? '' : template);
      if (!vars) return text;
      return text.replace(/\{(\w+)\}/g, (match, key) => {
        const value = vars[key];
        return value === undefined || value === null ? match : String(value);
      });
    }

    /** Resolve a key from the bundled dictionary, falling back to the other language. */
    function lookupMessage(lang, key) {
      const primary = WEATHER_DICT[lang] || WEATHER_DICT.zh;
      if (Object.prototype.hasOwnProperty.call(primary, key)) return primary[key];
      const other = lang === 'en' ? WEATHER_DICT.zh : WEATHER_DICT.en;
      if (Object.prototype.hasOwnProperty.call(other, key)) return other[key];
      return key;
    }

    /**
     * Build a translator on top of the Host translator.
     *
     * `rawTranslate` is `ctx.locale.bind(ns)`: it follows the active language but
     * only knows the keys registered in its namespace dictionary. When it hands
     * back the key itself (unknown key), the bundled table is used instead.
     */
    function makeTranslate(rawTranslate, lang) {
      return function translate(key, vars) {
        let text = '';
        if (typeof rawTranslate === 'function') {
          try {
            text = rawTranslate(key);
          } catch (error) {
            text = '';
          }
        }
        if (!text || text === key) text = lookupMessage(lang, key);
        return interpolate(text, vars);
      };
    }

    /* ---- src/lib/links.js ---- */
    /**
     * Project links.
     *
     * One place to edit if the repository moves: the panel footer reads from here.
     * Keep it in sync with the `repository` field in package.json.
     */

    const PROJECT_OWNER = 'python3603';
    const PROJECT_NAME = 'dsh-weather-panel';
    const PROJECT_URL = `https://github.com/${PROJECT_OWNER}/${PROJECT_NAME}`;
    const PROJECT_ISSUES_URL = `${PROJECT_URL}/issues`;
    const PROJECT_NEW_ISSUE_URL = `${PROJECT_URL}/issues/new`;

    /* ---- src/lib/wmo.js ---- */
    /**
     * WMO 4677 weather codes → stable presentation data.
     *
     * Open-Meteo reports `weather_code` as a WMO 4677 number. Mapping it here keeps
     * wording, icon group and severity in one table instead of scattering `if`
     * chains through the view, and it lets the whole table be unit-tested.
     */

    /** Every code Open-Meteo can return, with neutral wording and a severity hint. */
    const WMO_TABLE = {
      0: { icon: 'clear', zh: '晴', en: 'Clear sky', severity: 0 },
      1: { icon: 'mostly-clear', zh: '大部晴朗', en: 'Mainly clear', severity: 0 },
      2: { icon: 'partly-cloudy', zh: '局部多云', en: 'Partly cloudy', severity: 0 },
      3: { icon: 'overcast', zh: '阴', en: 'Overcast', severity: 1 },
      45: { icon: 'fog', zh: '雾', en: 'Fog', severity: 1 },
      48: { icon: 'fog', zh: '凇雾', en: 'Depositing rime fog', severity: 1 },
      51: { icon: 'drizzle', zh: '小毛毛雨', en: 'Light drizzle', severity: 1 },
      53: { icon: 'drizzle', zh: '毛毛雨', en: 'Moderate drizzle', severity: 1 },
      55: { icon: 'drizzle', zh: '大毛毛雨', en: 'Dense drizzle', severity: 2 },
      56: { icon: 'sleet', zh: '轻冻毛毛雨', en: 'Light freezing drizzle', severity: 2 },
      57: { icon: 'sleet', zh: '冻毛毛雨', en: 'Dense freezing drizzle', severity: 2 },
      61: { icon: 'rain', zh: '小雨', en: 'Slight rain', severity: 1 },
      63: { icon: 'rain', zh: '中雨', en: 'Moderate rain', severity: 2 },
      65: { icon: 'rain', zh: '大雨', en: 'Heavy rain', severity: 3 },
      66: { icon: 'sleet', zh: '轻冻雨', en: 'Light freezing rain', severity: 2 },
      67: { icon: 'sleet', zh: '冻雨', en: 'Heavy freezing rain', severity: 3 },
      71: { icon: 'snow', zh: '小雪', en: 'Slight snow', severity: 1 },
      73: { icon: 'snow', zh: '中雪', en: 'Moderate snow', severity: 2 },
      75: { icon: 'snow', zh: '大雪', en: 'Heavy snow', severity: 3 },
      77: { icon: 'snow', zh: '米雪', en: 'Snow grains', severity: 1 },
      80: { icon: 'showers', zh: '小阵雨', en: 'Slight rain showers', severity: 1 },
      81: { icon: 'showers', zh: '阵雨', en: 'Moderate rain showers', severity: 2 },
      82: { icon: 'showers', zh: '强阵雨', en: 'Violent rain showers', severity: 3 },
      85: { icon: 'snow', zh: '小阵雪', en: 'Slight snow showers', severity: 1 },
      86: { icon: 'snow', zh: '阵雪', en: 'Heavy snow showers', severity: 2 },
      95: { icon: 'thunder', zh: '雷暴', en: 'Thunderstorm', severity: 3 },
      96: { icon: 'thunder', zh: '雷暴伴小冰雹', en: 'Thunderstorm with slight hail', severity: 3 },
      99: { icon: 'thunder', zh: '雷暴伴大冰雹', en: 'Thunderstorm with heavy hail', severity: 3 }
    };

    /** Used for a missing or unknown code; never throws on odd upstream data. */
    const WMO_FALLBACK = { icon: 'unknown', zh: '未知天气', en: 'Unknown', severity: 0 };

    /**
     * Describe one WMO code.
     * @param {unknown} code raw `weather_code` from the API
     * @returns {{code: number|null, icon: string, zh: string, en: string, severity: number}}
     */
    function describeWeather(code) {
      const numeric = Number(code);
      if (!Number.isFinite(numeric)) return { code: null, ...WMO_FALLBACK };
      const entry = WMO_TABLE[Math.trunc(numeric)];
      if (!entry) return { code: Math.trunc(numeric), ...WMO_FALLBACK };
      return { code: Math.trunc(numeric), ...entry };
    }

    /** Convert a WMO code into the drawing group used by the weather glyph. */
    function weatherIconFor(code, isDay) {
      const described = describeWeather(code);
      if (described.icon === 'clear' && isDay === false) return 'moon';
      return described.icon;
    }

    /** Localized label for a WMO code. */
    function weatherLabel(code, lang) {
      const described = describeWeather(code);
      return lang === 'en' ? described.en : described.zh;
    }

    /* ---- src/lib/format.js ---- */
    /**
     * Pure formatting helpers.
     *
     * All of these are deliberately free of DOM, React and locale-service access so
     * they can be unit-tested in Node and reused by both languages.
     */

    const METRIC = 'metric';
    const IMPERIAL = 'imperial';

    const EN_MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

    /** 16-point compass, Chinese names first so the two arrays stay in sync. */
    const COMPASS_ZH = [
      '北', '北东北', '东北', '东北东',
      '东', '东南东', '东南', '南东南',
      '南', '南西南', '西南', '西南西',
      '西', '西北西', '西北', '北西北'
    ];

    const COMPASS_EN = [
      'N', 'NNE', 'NE', 'ENE',
      'E', 'ESE', 'SE', 'SSE',
      'S', 'SSW', 'SW', 'WSW',
      'W', 'WNW', 'NW', 'NNW'
    ];

    /** UV index bands (WHO scale) with both languages. */
    const UV_BANDS = [
      { max: 2, zh: '低', en: 'Low' },
      { max: 5, zh: '中等', en: 'Moderate' },
      { max: 7, zh: '高', en: 'High' },
      { max: 10, zh: '很高', en: 'Very high' },
      { max: Infinity, zh: '极高', en: 'Extreme' }
    ];

    function isNumber(value) {
      return typeof value === 'number' && Number.isFinite(value);
    }

    function roundTo(value, digits) {
      if (!isNumber(value)) return null;
      const factor = Math.pow(10, digits);
      return Math.round(value * factor) / factor;
    }

    function celsiusToFahrenheit(value) {
      return value * 9 / 5 + 32;
    }

    function kmhToMph(value) {
      return value * 0.621371;
    }

    function mmToInch(value) {
      return value / 25.4;
    }

    function hpaToInHg(value) {
      return value * 0.02953;
    }

    /** Round a Celsius value into the active unit system. */
    function convertTemperature(celsius, units) {
      if (!isNumber(celsius)) return null;
      return units === IMPERIAL ? celsiusToFahrenheit(celsius) : celsius;
    }

    /** `23°` in the active unit; `—` when the value is missing. */
    function formatTemperature(celsius, units) {
      const value = convertTemperature(celsius, units);
      return value === null ? '—' : `${Math.round(value)}°`;
    }

    /** Unit suffix for numeric labels, e.g. `km/h` or `mph`. */
    function windUnit(units) {
      return units === IMPERIAL ? 'mph' : 'km/h';
    }

    /** Unit suffix for distances of precipitation. */
    function precipitationUnit(units) {
      return units === IMPERIAL ? 'in' : 'mm';
    }

    function formatWindSpeed(kmh, units) {
      if (!isNumber(kmh)) return '—';
      const value = units === IMPERIAL ? kmhToMph(kmh) : kmh;
      return `${Math.round(value)} ${windUnit(units)}`;
    }

    function formatPrecipitation(mm, units) {
      if (!isNumber(mm)) return '—';
      const value = units === IMPERIAL ? mmToInch(mm) : mm;
      const digits = units === IMPERIAL ? 2 : (value >= 10 ? 0 : 1);
      return `${roundTo(value, digits)} ${precipitationUnit(units)}`;
    }

    function formatPressure(hpa, units) {
      if (!isNumber(hpa)) return '—';
      if (units === IMPERIAL) return `${Math.round(hpaToInHg(hpa) * 100) / 100} inHg`;
      return `${Math.round(hpa)} hPa`;
    }

    function formatPercent(value) {
      if (!isNumber(value)) return '—';
      return `${Math.round(value)}%`;
    }

    function formatUv(value) {
      if (!isNumber(value)) return '—';
      return `${roundTo(value, 1)}`;
    }

    function uvBand(value, lang) {
      if (!isNumber(value)) return '';
      const band = UV_BANDS.find(item => value <= item.max) || UV_BANDS[UV_BANDS.length - 1];
      return lang === 'en' ? band.en : band.zh;
    }

    /** Compass label for a meteorological wind direction in degrees. */
    function windDirectionLabel(degrees, lang) {
      if (!isNumber(degrees)) return '';
      const normalized = ((degrees % 360) + 360) % 360;
      const index = Math.round(normalized / 22.5) % 16;
      return (lang === 'en' ? COMPASS_EN : COMPASS_ZH)[index];
    }

    /** Split an Open-Meteo local timestamp such as `2026-10-22T06:12` without TZ math. */
    function isoParts(value) {
      const match = /^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{2}):(\d{2}))?/.exec(String(value || ''));
      if (!match) return null;
      return {
        year: Number(match[1]),
        month: Number(match[2]),
        day: Number(match[3]),
        hour: match[4] === undefined ? null : Number(match[4]),
        minute: match[5] === undefined ? null : Number(match[5])
      };
    }

    /** `06:12` from an API timestamp; `—` when absent. */
    function formatClock(value) {
      const parts = isoParts(value);
      if (!parts || parts.hour === null) return '—';
      return `${String(parts.hour).padStart(2, '0')}:${String(parts.minute).padStart(2, '0')}`;
    }

    /** `06:12` from a local `Date` (used for the "updated at" line). */
    function formatClockFromDate(date) {
      if (!(date instanceof Date) || Number.isNaN(date.getTime())) return '—';
      return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
    }

    /** Short weekday for a `YYYY-MM-DD` date, independent of the viewer's time zone. */
    function formatWeekday(isoDate, lang) {
      const parts = isoParts(isoDate);
      if (!parts) return '—';
      const utc = Date.UTC(parts.year, parts.month - 1, parts.day, 12);
      try {
        return new Intl.DateTimeFormat(lang === 'en' ? 'en-US' : 'zh-CN', {
          weekday: 'short',
          timeZone: 'UTC'
        }).format(new Date(utc));
      } catch (error) {
        return new Date(utc).toUTCString().slice(0, 3);
      }
    }

    /** `10月23日` / `Oct 23` for a `YYYY-MM-DD` date. */
    function formatMonthDay(isoDate, lang) {
      const parts = isoParts(isoDate);
      if (!parts) return '';
      if (lang === 'en') return `${EN_MONTHS[parts.month - 1]} ${parts.day}`;
      return `${parts.month}月${parts.day}日`;
    }

    /** Human label for a forecast offset: 1 → tomorrow, 2 → the day after, … */
    function formatDayOffset(offset, lang, translate) {
      if (offset === 0) return translate('day.today');
      if (offset === 1) return translate('day.tomorrow');
      if (offset === 2) return translate('day.afterTomorrow');
      return translate('day.inDays', { n: offset });
    }

    /** `36.06°N 120.38°E` — a readable fallback when no place name is available. */
    function formatCoordinates(lat, lon) {
      if (!isNumber(lat) || !isNumber(lon)) return '';
      const ns = lat >= 0 ? 'N' : 'S';
      const ew = lon >= 0 ? 'E' : 'W';
      const latText = Math.abs(lat).toFixed(2);
      const lonText = Math.abs(lon).toFixed(2);
      return `${latText}°${ns} ${lonText}°${ew}`;
    }

    /** Stale-data hint in whole minutes. */
    function formatAgeMinutes(timestamp, nowMs) {
      if (!isNumber(timestamp)) return null;
      const reference = isNumber(nowMs) ? nowMs : Date.now();
      const elapsed = Math.max(0, reference - timestamp);
      return Math.floor(elapsed / 60000);
    }

    /* ---- src/lib/cache.js ---- */
    /**
     * Minimal TTL cache over a synchronous storage (localStorage, or an in-memory
     * stand-in when storage is unavailable).
     *
     * The panel paints cached values immediately and only revalidates when they
     * are stale, which is what keeps reopening the panel cheap and keeps the
     * network quiet while the user switches sessions.
     */

    function createTtlCache(storage, prefix, now) {
      const clock = typeof now === 'function' ? now : () => Date.now();
      const namespace = typeof prefix === 'string' && prefix ? prefix : 'dshw:';

      function storageKey(key) {
        return `${namespace}${key}`;
      }

      function readRaw(key) {
        try {
          return storage.getItem(storageKey(key));
        } catch (error) {
          return null;
        }
      }

      function isExpired(entry) {
        return typeof entry.expiresAt === 'number' && entry.expiresAt <= clock();
      }

      return {
        /**
         * @returns {*} the stored value, or `undefined` when absent / expired / corrupt
         */
        get(key) {
          const raw = readRaw(key);
          if (!raw) return undefined;
          let entry;
          try {
            entry = JSON.parse(raw);
          } catch (error) {
            return undefined;
          }
          if (!entry || typeof entry !== 'object' || !('value' in entry)) return undefined;
          if (isExpired(entry)) {
            this.delete(key);
            return undefined;
          }
          return entry.value;
        },

        /**
         * @param {string} key
         * @param {*} value JSON-serializable value
         * @param {number} ttlMs lifetime in milliseconds
         * @returns {boolean} whether the write happened
         */
        set(key, value, ttlMs) {
          const lifetime = Number.isFinite(ttlMs) && ttlMs > 0 ? ttlMs : 0;
          const entry = { value, savedAt: clock(), expiresAt: clock() + lifetime };
          try {
            storage.setItem(storageKey(key), JSON.stringify(entry));
            return true;
          } catch (error) {
            return false;
          }
        },

        /** Timestamp of the stored value, or `null` when nothing is stored. */
        savedAt(key) {
          const raw = readRaw(key);
          if (!raw) return null;
          try {
            const entry = JSON.parse(raw);
            return entry && typeof entry.savedAt === 'number' ? entry.savedAt : null;
          } catch (error) {
            return null;
          }
        },

        delete(key) {
          try {
            storage.removeItem(storageKey(key));
          } catch (error) {
            /* storage may be full or blocked; dropping is best-effort */
          }
        }
      };
    }

    /**
     * Storage that degrades to memory instead of throwing.
     *
     * `localStorage` throws in private modes and when the quota is full; the panel
     * must keep working in both cases, so every access is guarded.
     */
    function createSafeStorage(probeKey) {
      const memory = new Map();
      let persistent = false;
      try {
        const probe = probeKey || 'dshw:probe';
        window.localStorage.setItem(probe, '1');
        window.localStorage.removeItem(probe);
        persistent = true;
      } catch (error) {
        persistent = false;
      }
      return {
        persistent,
        getItem(key) {
          if (!persistent) return memory.has(key) ? memory.get(key) : null;
          try {
            return window.localStorage.getItem(key);
          } catch (error) {
            return memory.has(key) ? memory.get(key) : null;
          }
        },
        setItem(key, value) {
          memory.set(key, value);
          if (!persistent) return;
          try {
            window.localStorage.setItem(key, value);
          } catch (error) {
            /* keep the in-memory copy only */
          }
        },
        removeItem(key) {
          memory.delete(key);
          if (!persistent) return;
          try {
            window.localStorage.removeItem(key);
          } catch (error) {
            /* ignore */
          }
        }
      };
    }

    /* ---- src/lib/alerts.js ---- */
    /**
     * 中央气象台（中国气象局）预警信号。
     *
     * 数据源：`https://www.nmc.cn/rest/findAlarm`，实测返回 `Access-Control-Allow-Origin: *`，
     * 因此浏览器可直接读取，不需要 Host 代理。返回的是**全国**当前有效预警（按发布时间倒序），
     * 每页最多 100 条；本模块负责翻页、把标题解析成「类型 + 等级」，并按用户所在地过滤。
     *
     * 标题格式固定为：`<省><市>气象台发布<类型><等级>预警信号`，例如
     * `内蒙古自治区呼伦贝尔市气象台发布大风蓝色预警信号`。
     * 因此「类型/等级」从标题解析比额外请求详情页可靠：详情页 `publish/alarm/*.html` 不带 CORS。
     */

    const ALARM_ENDPOINT = 'https://www.nmc.cn/rest/findAlarm';
    const ALARM_PAGE_SIZE = 100;
    const ALARM_MAX_PAGES = 3;

    /** 等级从低到高；rank 用于排序与「最高等级」判断。 */
    const ALERT_LEVELS = [
      { key: 'blue', zh: '蓝色', en: 'Blue', rank: 1 },
      { key: 'yellow', zh: '黄色', en: 'Yellow', rank: 2 },
      { key: 'orange', zh: '橙色', en: 'Orange', rank: 3 },
      { key: 'red', zh: '红色', en: 'Red', rank: 4 }
    ];

    /** 常见预警类型；只用于中英互译与顺序，不限制解析。 */
    const ALERT_TYPES = [
      { zh: '台风', en: 'Typhoon' },
      { zh: '暴雨', en: 'Rainstorm' },
      { zh: '暴雪', en: 'Snowstorm' },
      { zh: '寒潮', en: 'Cold wave' },
      { zh: '大风', en: 'Gale' },
      { zh: '沙尘暴', en: 'Sandstorm' },
      { zh: '高温', en: 'Heat' },
      { zh: '干旱', en: 'Drought' },
      { zh: '雷电', en: 'Lightning' },
      { zh: '冰雹', en: 'Hail' },
      { zh: '霜冻', en: 'Frost' },
      { zh: '大雾', en: 'Dense fog' },
      { zh: '霾', en: 'Haze' },
      { zh: '道路结冰', en: 'Road icing' },
      { zh: '海上大风', en: 'Gale at sea' },
      { zh: '海浪', en: 'Wave' },
      { zh: '风暴潮', en: 'Storm surge' },
      { zh: '森林火险', en: 'Forest fire risk' },
      { zh: '强对流', en: 'Severe convection' },
      { zh: '低温', en: 'Low temperature' }
    ];

    /**
     * 预警类型图标（emoji，纯展示，不参与解析）。
     * 未收录的类型统一用 ⚠️，保证任何类型都有可见标识。
     */
    const ALERT_TYPE_ICONS = {
      台风: '🌀',
      暴雨: '🌧️',
      暴雪: '❄️',
      寒潮: '🥶',
      大风: '💨',
      沙尘暴: '🌪️',
      沙尘: '🌪️',
      高温: '🌡️',
      干旱: '🌵',
      雷电: '⚡',
      雷雨大风: '⛈️',
      冰雹: '🧊',
      霜冻: '🧊',
      大雾: '🌫️',
      霾: '😷',
      道路结冰: '⛸️',
      海上大风: '🌊',
      海浪: '🌊',
      风暴潮: '🌊',
      森林火险: '🔥',
      强对流: '⛈️',
      低温: '🥶',
      地质灾害: '⛰️',
      渍涝: '💧'
    };

    const ALERT_TYPE_FALLBACK_ICON = '⚠️';

    function alertTypeIcon(type) {
      const key = String(type || '').trim();
      return ALERT_TYPE_ICONS[key] || ALERT_TYPE_FALLBACK_ICON;
    }

    /** Build one page URL; `pageSize` is capped by the service at 100. */
    function buildAlarmPageUrl(pageNo, pageSize) {
      const page = Number.isFinite(pageNo) && pageNo > 0 ? Math.floor(pageNo) : 1;
      const size = Number.isFinite(pageSize) && pageSize > 0 ? Math.min(100, Math.floor(pageSize)) : ALARM_PAGE_SIZE;
      return `${ALARM_ENDPOINT}?pageNo=${page}&pageSize=${size}`;
    }

    /** `2026/10/22 20:12` → epoch ms (treated as Asia/Shanghai wall clock). */
    function parseIssueTime(value) {
      const match = /^(\d{4})\/(\d{2})\/(\d{2})\s+(\d{2}):(\d{2})/.exec(String(value || '').trim());
      if (!match) return null;
      const utc = Date.UTC(
        Number(match[1]), Number(match[2]) - 1, Number(match[3]),
        Number(match[4]) - 8, Number(match[5])
      );
      return Number.isFinite(utc) ? utc : null;
    }

    /** Parse `…发布大风蓝色预警信号` into structured fields. */
    function parseAlertTitle(title) {
      const text = String(title || '');
      const level = ALERT_LEVELS.find(item => text.includes(`${item.zh}`)) || null;
      const ordered = ALERT_TYPES.slice().sort((left, right) => right.zh.length - left.zh.length);
      let typeZh = '';
      for (const candidate of ordered) {
        if (text.includes(`${candidate.zh}${level ? level.zh : ''}`)) {
          typeZh = candidate.zh;
          break;
        }
      }
      if (!typeZh && level) {
        const stripped = text.replace(/^.*?发布/, '').replace(new RegExp(`${level.zh}.*$`), '');
        typeZh = stripped.replace(/预警.*$/, '').trim();
      }
      const type = ALERT_TYPES.find(item => item.zh === typeZh) || { zh: typeZh, en: typeZh || 'Alert' };
      return {
        type: type.zh,
        typeEn: type.en,
        level: level ? level.key : '',
        levelZh: level ? level.zh : '',
        levelEn: level ? level.en : '',
        levelRank: level ? level.rank : 0,
        place: text.replace(/发布.*$/, '').replace(/气象台$/, '')
      };
    }

    /** Normalize one API entry; `null` for unusable rows. */
    function normalizeAlert(raw) {
      if (!raw || typeof raw !== 'object') return null;
      const title = typeof raw.title === 'string' ? raw.title.trim() : '';
      if (!title) return null;
      const id = typeof raw.alertid === 'string' && raw.alertid ? raw.alertid : title;
      const parsed = parseAlertTitle(title);
      const url = typeof raw.url === 'string' && raw.url ? `https://www.nmc.cn${raw.url.startsWith('/') ? '' : '/'}${raw.url}` : '';
      return {
        id,
        title,
        issuedAt: parseIssueTime(raw.issuetime),
        issuedText: typeof raw.issuetime === 'string' ? raw.issuetime : '',
        url,
        pic: typeof raw.pic === 'string' ? raw.pic : '',
        type: parsed.type,
        typeEn: parsed.typeEn,
        level: parsed.level,
        levelZh: parsed.levelZh,
        levelEn: parsed.levelEn,
        levelRank: parsed.levelRank,
        place: parsed.place
      };
    }

    /** Normalize a whole page payload. */
    function normalizeAlarmPage(payload) {
      const page = payload && payload.data && payload.data.page ? payload.data.page : null;
      const list = page && Array.isArray(page.list) ? page.list : [];
      const alerts = list.map(normalizeAlert).filter(Boolean);
      const totalPage = page && Number.isFinite(page.totalPage) ? page.totalPage : 1;
      return {
        alerts,
        count: page && Number.isFinite(page.count) ? page.count : alerts.length,
        pageNo: page && Number.isFinite(page.pageNo) ? page.pageNo : 1,
        totalPage
      };
    }

    /** Short place name without administrative suffixes, for title matching. */
    function placeRoots(name) {
      const text = String(name || '').trim();
      if (!text) return [];
      const roots = new Set();
      roots.add(text);
      const stripped = text
        .replace(/特别行政区$|自治区$|自治州$|地区$|新区$|省$|市$|县$|区$|盟$|旗$/g, '')
        .trim();
      if (stripped) roots.add(stripped);
      return Array.from(roots).filter(root => root.length >= 2);
    }

    /**
     * Keep the alerts that plausibly cover this place.
     *
     * City-level hits win; when a city has none, province-level signals are kept but
     * marked `scope: 'region'` so the UI can say they are regional.
     */
    function matchAlerts(alerts, location) {
      if (!Array.isArray(alerts) || alerts.length === 0) return [];
      const cityRoots = placeRoots(location && location.city);
      const regionRoots = placeRoots(location && location.region);
      const matched = [];
      for (const alert of alerts) {
        const title = alert.title;
        const cityHit = cityRoots.some(root => title.includes(root));
        if (cityHit) {
          matched.push({ ...alert, scope: 'city' });
          continue;
        }
        const regionHit = regionRoots.some(root => title.includes(root));
        if (regionHit) matched.push({ ...alert, scope: 'region' });
      }
      return matched.sort((left, right) => {
        if (left.scope !== right.scope) return left.scope === 'city' ? -1 : 1;
        if (left.levelRank !== right.levelRank) return right.levelRank - left.levelRank;
        return (right.issuedAt || 0) - (left.issuedAt || 0);
      });
    }

    /** Highest active level among the matched alerts (0 when none). */
    function highestAlertRank(alerts) {
      if (!Array.isArray(alerts) || alerts.length === 0) return 0;
      return alerts.reduce((max, alert) => Math.max(max, alert.levelRank || 0), 0);
    }

    /** Level metadata by key, for styling. */
    function alertLevelMeta(level) {
      return ALERT_LEVELS.find(item => item.key === level) || null;
    }

    /** A stable fingerprint of the alert set, used to detect new signals. */
    function alertSignature(alerts) {
      if (!Array.isArray(alerts) || alerts.length === 0) return '';
      return alerts.map(alert => alert.id).sort().join(',');
    }

    /* ---- src/lib/typhoon.js ---- */
    /**
     * 台风路径数据（中央气象台台风网）。
     *
     * 站点接口是 JSONP：`https://typhoon.nmc.cn/weatherservice/typhoon/jsons/list_default`
     * 与 `…/view_<id>`。两者都带 `Access-Control-Allow-Origin: *`，所以浏览器可以
     * `fetch` 成文本后自己剥掉 `callback(...)` 外壳——不需要注入 <script>，也就没有
     * 全局回调污染，与其它插件互不影响。
     *
     * 原始结构是位置数组而不是对象（压缩过的历史格式），因此全部解析集中在这里，
     * 由单元测试固定住下标含义：
     *   point = [id, utcTime, epochMs, intensity, lon, lat, pressure, wind,
     *            moveDir, moveSpeed, windRadii, forecasts, [label, zhText, …]]
     */

    const TYPHOON_LIST_URL = 'https://typhoon.nmc.cn/weatherservice/typhoon/jsons/list_default';
    const TYPHOON_DETAIL_URL = 'https://typhoon.nmc.cn/weatherservice/typhoon/jsons/view_';

    /** 强度等级：rank 越高越强，color 用于轨迹与图例。 */
    const TYPHOON_LEVELS = [
      { code: 'TD', zh: '热带低压', en: 'Tropical depression', rank: 1, color: '#7dd3fc' },
      { code: 'TS', zh: '热带风暴', en: 'Tropical storm', rank: 2, color: '#38bdf8' },
      { code: 'STS', zh: '强热带风暴', en: 'Severe tropical storm', rank: 3, color: '#34d399' },
      { code: 'TY', zh: '台风', en: 'Typhoon', rank: 4, color: '#fbbf24' },
      { code: 'STY', zh: '强台风', en: 'Severe typhoon', rank: 5, color: '#fb923c' },
      { code: 'SuperTY', zh: '超强台风', en: 'Super typhoon', rank: 6, color: '#ef4444' }
    ];

    const TYPHOON_LEVEL_FALLBACK = { code: '', zh: '未知强度', en: 'Unknown', rank: 0, color: '#94a3b8' };

    function toNumber(value) {
      const numeric = typeof value === 'string' ? Number(value) : value;
      return typeof numeric === 'number' && Number.isFinite(numeric) ? numeric : null;
    }

    function toText(value) {
      return typeof value === 'string' ? value.trim() : '';
    }

    /** Typhoon numbers arrive as both `"2630"` and `2630`; keep both usable. */
    function toLooseText(value) {
      if (typeof value === 'number' && Number.isFinite(value)) return String(value);
      return toText(value);
    }

    /**
     * Strip a JSONP wrapper: `callback(({...}))` or `callback({...})`.
     * @returns {object|null} the parsed payload, or `null` when it is not JSONP/JSON
     */
    function parseJsonp(text) {
      const raw = toText(text);
      if (!raw) return null;
      const first = raw.indexOf('(');
      const last = raw.lastIndexOf(')');
      if (first === -1 || last === -1 || last <= first) return null;
      let body = raw.slice(first + 1, last).trim();
      while (body.startsWith('(') && body.endsWith(')')) body = body.slice(1, -1).trim();
      try {
        return JSON.parse(body);
      } catch (error) {
        return null;
      }
    }

    /** Metadata for one intensity code. */
    function describeTyphoonIntensity(code, lang) {
      const level = TYPHOON_LEVELS.find(item => item.code === code);
      const resolved = level || TYPHOON_LEVEL_FALLBACK;
      return {
        code: resolved.code,
        rank: resolved.rank,
        color: resolved.color,
        label: lang === 'en' ? resolved.en : resolved.zh
      };
    }

    /** `2630` → `{year: 2026, sequence: 30}`; `20260027` is the 8-digit variant. */
    function parseTyphoonNumber(value) {
      const digits = String(value || '').replace(/\D/g, '');
      if (digits.length === 4) {
        return { year: 2000 + Number(digits.slice(0, 2)), sequence: Number(digits.slice(2)) };
      }
      if (digits.length === 8) {
        return { year: Number(digits.slice(0, 4)), sequence: Number(digits.slice(6)) };
      }
      return { year: null, sequence: null };
    }

    /** `第 30 号` / `No. 30` */
    function formatTyphoonNumber(value, lang) {
      const parsed = parseTyphoonNumber(value);
      if (!parsed.sequence) return '';
      return lang === 'en' ? `No. ${parsed.sequence}` : `第 ${parsed.sequence} 号`;
    }

    /** Normalize the `typhoonList` payload into plain objects. */
    function normalizeTyphoonList(payload) {
      const rows = payload && Array.isArray(payload.typhoonList) ? payload.typhoonList : [];
      return rows.map(row => {
        if (!Array.isArray(row)) return null;
        const id = toNumber(row[0]);
        if (id === null) return null;
        return {
          id,
          nameEn: toText(row[1]),
          nameZh: toText(row[2]),
          number: toLooseText(row[3]),
          status: toText(row[7]) || 'stop',
          meaning: toText(row[6])
        };
      }).filter(Boolean);
    }

    /** Prefer a running typhoon; otherwise the newest numbered one. */
    function pickTyphoon(list) {
      if (!Array.isArray(list) || list.length === 0) return null;
      const active = list.filter(item => item.status === 'start');
      const pool = active.length > 0 ? active : list;
      return pool.slice().sort((left, right) => {
        const leftSeq = parseTyphoonNumber(left.number).sequence || 0;
        const rightSeq = parseTyphoonNumber(right.number).sequence || 0;
        if (rightSeq !== leftSeq) return rightSeq - leftSeq;
        return right.id - left.id;
      })[0];
    }

    /**
     * CMA 风圈按风速等级给出（30 / 50 / 64 kt），换算成中国风力量级：
     * 30 kt ≈ 7 级，50 kt ≈ 10 级，64 kt ≈ 12 级。用于图上标注风圈等级。
     */
    const WIND_RADIUS_GRADES = {
      '30KTS': { zh: '7 级', en: 'Force 7', color: '#38bdf8' },
      '50KTS': { zh: '10 级', en: 'Force 10', color: '#fb923c' },
      '64KTS': { zh: '12 级', en: 'Force 12', color: '#ef4444' }
    };

    /** Ring colour per wind-force grade; unknown levels fall back to the brand tone. */
    function windRadiusColor(level) {
      const key = String(level || '').toUpperCase().replace(/\\s+/g, '');
      const grade = WIND_RADIUS_GRADES[key];
      return grade ? grade.color : '#4f6ef7';
    }

    function windRadiusGrade(level, lang) {
      const key = String(level || '').toUpperCase().replace(/\s+/g, '');
      const grade = WIND_RADIUS_GRADES[key];
      if (!grade) return String(level || '');
      return lang === 'en' ? grade.en : grade.zh;
    }

    /** True when at least one numbered typhoon is still active (CMA status `start`). */
    function listHasActiveTyphoon(list) {
      return Array.isArray(list) && list.some(item => item && item.status === 'start');
    }

    function normalizeWindRadii(value) {
      if (!Array.isArray(value)) return [];
      return value.map(entry => {
        if (!Array.isArray(entry)) return null;
        const quadrants = entry.slice(1, 5).map(toNumber).filter(item => item !== null);
        if (quadrants.length === 0) return null;
        return {
          level: toText(entry[0]),
          radiusKm: Math.max(...quadrants)
        };
      }).filter(Boolean);
    }

    function normalizeForecastMap(value) {
      if (!value || typeof value !== 'object') return [];
      const agency = value.BABJ || value.babj || Object.values(value).find(item => Array.isArray(item));
      if (!Array.isArray(agency)) return [];
      return agency.map(entry => {
        if (!Array.isArray(entry)) return null;
        const hour = toNumber(entry[0]);
        const lon = toNumber(entry[2]);
        const lat = toNumber(entry[3]);
        if (hour === null || lon === null || lat === null) return null;
        return {
          hour,
          baseTime: toText(entry[1]),
          lon,
          lat,
          pressure: toNumber(entry[4]),
          wind: toNumber(entry[5]),
          agency: toText(entry[6]) || 'BABJ',
          intensity: toText(entry[7])
        };
      }).filter(Boolean);
    }

    function normalizeTrackPoint(row) {
      if (!Array.isArray(row)) return null;
      const lon = toNumber(row[4]);
      const lat = toNumber(row[5]);
      if (lon === null || lat === null) return null;
      const labels = Array.isArray(row[12]) ? row[12] : [];
      return {
        id: toNumber(row[0]),
        timeUtc: toText(row[1]),
        epoch: toNumber(row[2]),
        intensity: toText(row[3]),
        lon,
        lat,
        pressure: toNumber(row[6]),
        wind: toNumber(row[7]),
        moveDirection: toText(row[8]),
        moveSpeed: toNumber(row[9]),
        windRadii: normalizeWindRadii(row[10]),
        forecast: normalizeForecastMap(row[11]),
        timeLabel: toText(labels[0]),
        timeText: toText(labels[1]) || toText(labels[0])
      };
    }

    /** Normalize the `typhoon` detail payload (header + track + forecast). */
    function normalizeTyphoonDetail(payload) {
      const row = payload && Array.isArray(payload.typhoon) ? payload.typhoon : null;
      if (!row) return null;
      const points = Array.isArray(row[8]) ? row[8].map(normalizeTrackPoint).filter(Boolean) : [];
      if (points.length === 0) return null;
      const latest = points[points.length - 1];
      // The newest fix often carries no forecast map yet (it arrives with the next
      // advisory), so walk back to the most recent point that does have one.
      let forecast = [];
      let forecastBase = '';
      for (let index = points.length - 1; index >= 0; index -= 1) {
        if (points[index].forecast && points[index].forecast.length > 0) {
          forecast = points[index].forecast;
          forecastBase = points[index].timeText;
          break;
        }
      }
      return {
        id: toNumber(row[0]),
        nameEn: toText(row[1]),
        nameZh: toText(row[2]),
        number: toLooseText(row[3]),
        status: toText(row[7]) || 'stop',
        meaning: toText(row[6]),
        points,
        latest,
        forecast,
        forecastBase
      };
    }

    /**
     * Geographic bounds covering the whole track plus the forecast, padded so the
     * line never touches the edge of the drawing area.
     */
    function trackBounds(detail, paddingDegrees) {
      const pad = Number.isFinite(paddingDegrees) ? paddingDegrees : 3;
      if (!detail || !Array.isArray(detail.points) || detail.points.length === 0) return null;
      let west = Infinity;
      let east = -Infinity;
      let south = Infinity;
      let north = -Infinity;
      const consider = (lon, lat) => {
        if (!Number.isFinite(lon) || !Number.isFinite(lat)) return;
        west = Math.min(west, lon);
        east = Math.max(east, lon);
        south = Math.min(south, lat);
        north = Math.max(north, lat);
      };
      detail.points.forEach(point => consider(point.lon, point.lat));
      (detail.forecast || []).forEach(point => consider(point.lon, point.lat));
      if (!Number.isFinite(west)) return null;
      west -= pad;
      east += pad;
      south -= pad;
      north += pad;
      const minSpan = 6;
      if (east - west < minSpan) {
        const center = (east + west) / 2;
        west = center - minSpan / 2;
        east = center + minSpan / 2;
      }
      if (north - south < minSpan) {
        const center = (north + south) / 2;
        south = center - minSpan / 2;
        north = center + minSpan / 2;
      }
      return { west, east, south, north };
    }

    /**
     * Whether the selection is already the newest fix.
     *
     * `-1` means "nothing was picked by hand", which the view renders as the latest
     * point; picking the last point explicitly counts as current too. Used to decide
     * whether the "back to now" control is worth showing.
     */
    function isCurrentFix(selectedIndex, pointCount) {
      const count = toNumber(pointCount);
      if (count === null || count <= 0) return true;
      const index = toNumber(selectedIndex);
      if (index === null) return true;
      return index < 0 || index >= count - 1;
    }

    /**
     * One track point reduced to the values the UI shows.
     *
     * Kept here (not in the view) so the click handler, the floating card and the
     * detail row cannot drift apart, and so the shape is covered by tests.
     */
    function describeTrackPoint(point, lang) {
      if (!point) return null;
      const level = describeTyphoonIntensity(point.intensity, lang);
      const lat = toNumber(point.lat);
      const lon = toNumber(point.lon);
      return {
        time: point.timeText || point.timeLabel || '',
        intensity: level.label,
        intensityCode: level.code,
        color: level.color,
        lat,
        lon,
        position: lat !== null && lon !== null ? `${lat.toFixed(1)}°N ${lon.toFixed(1)}°E` : '—',
        pressure: toNumber(point.pressure),
        wind: toNumber(point.wind),
        moveDirection: point.moveDirection || '',
        moveSpeed: toNumber(point.moveSpeed)
      };
    }

    /** Highest intensity reached so far, for the summary line. */
    function peakIntensity(detail) {
      if (!detail || !Array.isArray(detail.points)) return describeTyphoonIntensity('', 'zh');
      let best = TYPHOON_LEVEL_FALLBACK;
      for (const point of detail.points) {
        const level = TYPHOON_LEVELS.find(item => item.code === point.intensity);
        if (level && level.rank > best.rank) best = level;
      }
      return best.code ? { code: best.code, rank: best.rank, color: best.color, label: best.zh } : describeTyphoonIntensity('', 'zh');
    }

    /* ---- src/lib/geo.js ---- */
    /**
     * Network location: public-IP geolocation plus locality naming.
     *
     * Design constraints, learned the hard way:
     * - No single IP-geolocation service is reliable everywhere (rate limits,
     *   carrier NAT, proxies, regional blocking), so several are raced and the
     *   first usable answer wins. One provider failing must never fail the panel.
     * - The result is city-level at best and can be a proxy exit, therefore the
     *   panel always shows the source and offers a manual override.
     * - Nothing here performs I/O itself: the caller injects `fetchJson`, which
     *   keeps every branch unit-testable.
     */

    const GEO_LOOKUP_TIMEOUT_MS = 6000;
    const GEO_REQUEST_TIMEOUT_MS = 5000;
    const REVERSE_GEOCODE_URL = 'https://api.bigdatacloud.net/data/reverse-geocode-client';
    const CITY_SEARCH_URL = 'https://geocoding-api.open-meteo.com/v1/search';

    const GEO_PROVIDERS = [
      {
        id: 'ipwho.is',
        url: 'https://ipwho.is/',
        parse: parseIpWhoIs
      },
      {
        id: 'ipinfo.io',
        url: 'https://ipinfo.io/json',
        parse: parseIpinfo
      },
      {
        id: 'ip.sb',
        url: 'https://api.ip.sb/geoip',
        parse: parseIpSb
      }
    ];

    function toFiniteNumber(value) {
      const numeric = typeof value === 'string' ? Number(value.trim()) : value;
      return typeof numeric === 'number' && Number.isFinite(numeric) ? numeric : null;
    }

    function cleanName(value) {
      if (typeof value !== 'string') return '';
      const text = value.trim();
      return text.length > 0 ? text : '';
    }

    /** Validate and normalize one provider answer; `null` means "unusable". */
    function normalizeGeo(raw) {
      if (!raw || typeof raw !== 'object') return null;
      const lat = toFiniteNumber(raw.lat);
      const lon = toFiniteNumber(raw.lon);
      if (lat === null || lon === null) return null;
      if (lat < -90 || lat > 90 || lon < -180 || lon > 180) return null;
      return {
        lat,
        lon,
        city: cleanName(raw.city),
        region: cleanName(raw.region),
        country: cleanName(raw.country),
        countryCode: cleanName(raw.countryCode).toUpperCase(),
        timezone: cleanName(raw.timezone),
        ip: cleanName(raw.ip),
        provider: cleanName(raw.provider),
        source: 'network'
      };
    }

    /** `https://ipwho.is/` */
    function parseIpWhoIs(json) {
      if (!json || json.success === false) return null;
      return normalizeGeo({
        lat: json.latitude,
        lon: json.longitude,
        city: json.city,
        region: json.region,
        country: json.country,
        countryCode: json.country_code,
        timezone: json.timezone && json.timezone.id ? json.timezone.id : json.timezone,
        ip: json.ip,
        provider: 'ipwho.is'
      });
    }

    /** `https://ipinfo.io/json` — coordinates arrive as `"lat,lon"`. */
    function parseIpinfo(json) {
      if (!json || typeof json !== 'object') return null;
      const loc = typeof json.loc === 'string' ? json.loc.split(',') : [];
      return normalizeGeo({
        lat: loc.length === 2 ? loc[0] : null,
        lon: loc.length === 2 ? loc[1] : null,
        city: json.city,
        region: json.region,
        country: json.country,
        countryCode: json.country,
        timezone: json.timezone,
        ip: json.ip,
        provider: 'ipinfo.io'
      });
    }

    /** `https://api.ip.sb/geoip` */
    function parseIpSb(json) {
      if (!json || typeof json !== 'object' || json.ip === undefined) return null;
      return normalizeGeo({
        lat: json.latitude,
        lon: json.longitude,
        city: json.city,
        region: json.region,
        country: json.country,
        countryCode: json.country_code,
        timezone: json.timezone,
        ip: json.ip,
        provider: 'ip.sb'
      });
    }

    /**
     * Race every IP-geolocation provider and resolve with the first usable answer.
     *
     * @param {(url: string, options: object) => Promise<any>} fetchJson injected JSON fetcher
     * @param {{signal?: AbortSignal, timeoutMs?: number, providers?: Array<any>}} [options]
     * @returns {Promise<object|null>} normalized location, or `null` when nothing usable
     */
    function lookupNetworkLocation(fetchJson, options) {
      const settings = options || {};
      const providers = Array.isArray(settings.providers) ? settings.providers : GEO_PROVIDERS;
      const timeoutMs = Number.isFinite(settings.timeoutMs) ? settings.timeoutMs : GEO_LOOKUP_TIMEOUT_MS;
      const externalSignal = settings.signal;
      if (providers.length === 0) return Promise.resolve(null);

      return new Promise(resolve => {
        const controller = new AbortController();
        let settled = false;
        let pending = providers.length;

        const finish = value => {
          if (settled) return;
          settled = true;
          clearTimeout(timer);
          if (externalSignal) externalSignal.removeEventListener('abort', onAbort);
          resolve(value);
          try {
            controller.abort();
          } catch (error) {
            /* already aborted */
          }
        };

        const onAbort = () => finish(null);
        const timer = setTimeout(() => finish(null), timeoutMs);
        if (externalSignal) {
          if (externalSignal.aborted) {
            finish(null);
            return;
          }
          externalSignal.addEventListener('abort', onAbort, { once: true });
        }

        providers.forEach(provider => {
          Promise.resolve()
            .then(() => fetchJson(provider.url, { signal: controller.signal, timeoutMs: GEO_REQUEST_TIMEOUT_MS }))
            .then(payload => {
              const parsed = provider.parse(payload);
              if (parsed) finish(parsed);
            })
            .catch(() => {
              /* a failing provider simply loses the race */
            })
            .then(() => {
              pending -= 1;
              if (pending === 0) finish(null);
            });
        });
      });
    }

    /** Build a short, human-readable place name from a reverse-geocode payload. */
    function localityLabel(payload) {
      if (!payload || typeof payload !== 'object') return '';
      const city = cleanName(payload.city);
      const locality = cleanName(payload.locality);
      const region = cleanName(payload.principalSubdivision);
      const country = cleanName(payload.countryName);
      const parts = [];
      if (city) parts.push(city);
      if (locality && locality !== city) parts.push(locality);
      if (parts.length === 0 && region) parts.push(region);
      if (parts.length === 0 && country) parts.push(country);
      return parts.join(' · ');
    }

    /**
     * Name the coordinates. Best-effort: the caller falls back to the IP provider's
     * city or to formatted coordinates when this returns nothing.
     */
    async function reverseGeocode(fetchJson, lat, lon, options) {
      const settings = options || {};
      const language = settings.language === 'en' ? 'en' : 'zh-Hans';
      const url = `${REVERSE_GEOCODE_URL}?latitude=${encodeURIComponent(lat)}&longitude=${encodeURIComponent(lon)}&localityLanguage=${language}`;
      const payload = await fetchJson(url, {
        signal: settings.signal,
        timeoutMs: settings.timeoutMs || GEO_REQUEST_TIMEOUT_MS
      });
      const label = localityLabel(payload);
      return {
        label,
        city: cleanName(payload && payload.city),
        locality: cleanName(payload && payload.locality),
        region: cleanName(payload && payload.principalSubdivision),
        country: cleanName(payload && payload.countryName),
        countryCode: cleanName(payload && payload.countryCode).toUpperCase()
      };
    }

    /** Normalize one geocoding hit into the shape the picker renders. */
    function normalizeCityHit(raw) {
      if (!raw || typeof raw !== 'object') return null;
      const lat = toFiniteNumber(raw.latitude);
      const lon = toFiniteNumber(raw.longitude);
      if (lat === null || lon === null) return null;
      const name = cleanName(raw.name);
      if (!name) return null;
      return {
        id: raw.id,
        name,
        region: cleanName(raw.admin1),
        district: cleanName(raw.admin2),
        country: cleanName(raw.country),
        countryCode: cleanName(raw.country_code).toUpperCase(),
        featureCode: cleanName(raw.feature_code),
        lat,
        lon
      };
    }

    /** Score a hit so cities outrank islands and exact names win. */
    function scoreCityHit(hit, query) {
      let score = 0;
      const normalized = String(query || '').trim();
      if (normalized && hit.name === normalized) score += 100;
      else if (normalized && (hit.name === `${normalized}市` || hit.name === `${normalized}县`)) score += 80;
      else if (normalized && hit.name.startsWith(normalized)) score += 20;
      switch (hit.featureCode) {
        case 'PPLC':
          score += 60;
          break;
        case 'PPLA':
          score += 50;
          break;
        case 'PPLA2':
          score += 40;
          break;
        case 'PPLA3':
        case 'PPLA4':
          score += 25;
          break;
        case 'PPL':
          score += 15;
          break;
        default:
          score -= 20;
      }
      return score;
    }

    /**
     * Search cities by name.
     *
     * Chinese city names are ambiguous in the GeoNames index (`青岛` alone can miss
     * the city), so a `市` variant is queried in parallel and the merged list is
     * ranked by exact-name matches and settlement feature codes.
     */
    async function searchCities(fetchJson, query, options) {
      const settings = options || {};
      const text = String(query || '').trim();
      if (!text) return [];
      const language = settings.language === 'en' ? 'en' : 'zh';
      const limit = Number.isFinite(settings.limit) ? settings.limit : 6;
      const variants = [text];
      if (/[\u4e00-\u9fa5]/.test(text) && !/[市县区州盟旗]$/.test(text)) variants.push(`${text}市`);

      const batches = await Promise.all(variants.map(name => {
        const url = `${CITY_SEARCH_URL}?name=${encodeURIComponent(name)}&count=20&language=${language}&format=json`;
        return fetchJson(url, { signal: settings.signal, timeoutMs: settings.timeoutMs || GEO_REQUEST_TIMEOUT_MS })
          .then(payload => (payload && Array.isArray(payload.results) ? payload.results : []))
          .catch(() => []);
      }));

      const byId = new Map();
      batches.forEach(batch => {
        batch.forEach(raw => {
          const hit = normalizeCityHit(raw);
          if (!hit) return;
          const key = hit.id === undefined || hit.id === null ? `${hit.name}|${hit.lat}|${hit.lon}` : String(hit.id);
          if (!byId.has(key)) byId.set(key, hit);
        });
      });

      return Array.from(byId.values())
        .map(hit => ({ ...hit, score: scoreCityHit(hit, text) }))
        .sort((left, right) => right.score - left.score)
        .slice(0, limit);
    }

    /* ---- src/lib/weather.js ---- */
    /**
     * Open-Meteo forecast: one request, normalized once.
     *
     * The API returns column-oriented arrays with sparse nulls, which is awkward to
     * render and impossible to cache meaningfully as-is. `normalizeForecast` turns
     * one response into a compact row-oriented snapshot that the view walks once
     * and the cache can store verbatim.
     *
     * Time handling: every timestamp Open-Meteo returns is *local* to the requested
     * coordinates (`timezone=auto`, iso8601, no offset suffix), so all comparisons
     * here are plain string comparisons — no time-zone math, no DST surprises.
     */

    const FORECAST_ENDPOINT = 'https://api.open-meteo.com/v1/forecast';
    /** Today plus the five days the panel shows as "未来 5 天". */
    const FORECAST_DAYS = 6;
    const UPCOMING_HOURS = 24;

    const CURRENT_VARIABLES = [
      'temperature_2m',
      'relative_humidity_2m',
      'apparent_temperature',
      'is_day',
      'precipitation',
      'weather_code',
      'cloud_cover',
      'pressure_msl',
      'surface_pressure',
      'wind_speed_10m',
      'wind_direction_10m',
      'wind_gusts_10m'
    ];

    const HOURLY_VARIABLES = [
      'temperature_2m',
      'precipitation_probability',
      'precipitation',
      'weather_code',
      'wind_speed_10m'
    ];

    const DAILY_VARIABLES = [
      'weather_code',
      'temperature_2m_max',
      'temperature_2m_min',
      'apparent_temperature_max',
      'apparent_temperature_min',
      'sunrise',
      'sunset',
      'uv_index_max',
      'precipitation_sum',
      'precipitation_probability_max',
      'precipitation_hours',
      'wind_speed_10m_max',
      'wind_gusts_10m_max',
      'wind_direction_10m_dominant'
    ];

    function numericOrNull(value) {
      const numeric = typeof value === 'string' ? Number(value) : value;
      return typeof numeric === 'number' && Number.isFinite(numeric) ? numeric : null;
    }

    function stringOrEmpty(value) {
      return typeof value === 'string' ? value : '';
    }

    function valueAt(column, index) {
      if (!Array.isArray(column)) return null;
      return numericOrNull(column[index]);
    }

    function textAt(column, index) {
      if (!Array.isArray(column)) return '';
      return stringOrEmpty(column[index]);
    }

    /** Build the single request that feeds the whole panel. */
    function buildForecastUrl(lat, lon, options) {
      const settings = options || {};
      const params = new URLSearchParams();
      params.set('latitude', String(lat));
      params.set('longitude', String(lon));
      params.set('current', CURRENT_VARIABLES.join(','));
      params.set('hourly', HOURLY_VARIABLES.join(','));
      params.set('daily', DAILY_VARIABLES.join(','));
      params.set('timezone', 'auto');
      params.set('forecast_days', String(settings.forecastDays || FORECAST_DAYS));
      // Units stay metric on the wire; the view converts for °F/mph when asked.
      params.set('temperature_unit', 'celsius');
      params.set('wind_speed_unit', 'kmh');
      params.set('precipitation_unit', 'mm');
      return `${FORECAST_ENDPOINT}?${params.toString()}`;
    }

    function normalizeDaily(raw) {
      if (!raw || !Array.isArray(raw.time)) return [];
      return raw.time.map((date, index) => ({
        date: stringOrEmpty(date),
        weatherCode: valueAt(raw.weather_code, index),
        tempMax: valueAt(raw.temperature_2m_max, index),
        tempMin: valueAt(raw.temperature_2m_min, index),
        apparentMax: valueAt(raw.apparent_temperature_max, index),
        apparentMin: valueAt(raw.apparent_temperature_min, index),
        sunrise: textAt(raw.sunrise, index),
        sunset: textAt(raw.sunset, index),
        uvMax: valueAt(raw.uv_index_max, index),
        precipitationSum: valueAt(raw.precipitation_sum, index),
        precipitationProbabilityMax: valueAt(raw.precipitation_probability_max, index),
        precipitationHours: valueAt(raw.precipitation_hours, index),
        windMax: valueAt(raw.wind_speed_10m_max, index),
        gustMax: valueAt(raw.wind_gusts_10m_max, index),
        windDirectionDominant: valueAt(raw.wind_direction_10m_dominant, index)
      }));
    }

    function normalizeHourly(raw) {
      if (!raw || !Array.isArray(raw.time)) return [];
      return raw.time.map((time, index) => ({
        time: stringOrEmpty(time),
        temperature: valueAt(raw.temperature_2m, index),
        precipitationProbability: valueAt(raw.precipitation_probability, index),
        precipitation: valueAt(raw.precipitation, index),
        weatherCode: valueAt(raw.weather_code, index),
        windSpeed: valueAt(raw.wind_speed_10m, index)
      }));
    }

    /**
     * Normalize one forecast payload.
     * @returns {object|null} `null` when the payload is unusable (no `current` block)
     */
    function normalizeForecast(payload) {
      if (!payload || typeof payload !== 'object') return null;
      const currentRaw = payload.current;
      if (!currentRaw || typeof currentRaw !== 'object') return null;
      return {
        timezone: stringOrEmpty(payload.timezone),
        utcOffsetSeconds: numericOrNull(payload.utc_offset_seconds),
        elevation: numericOrNull(payload.elevation),
        current: {
          time: stringOrEmpty(currentRaw.time),
          temperature: numericOrNull(currentRaw.temperature_2m),
          apparentTemperature: numericOrNull(currentRaw.apparent_temperature),
          humidity: numericOrNull(currentRaw.relative_humidity_2m),
          precipitation: numericOrNull(currentRaw.precipitation),
          weatherCode: numericOrNull(currentRaw.weather_code),
          cloudCover: numericOrNull(currentRaw.cloud_cover),
          pressure: numericOrNull(currentRaw.pressure_msl),
          surfacePressure: numericOrNull(currentRaw.surface_pressure),
          windSpeed: numericOrNull(currentRaw.wind_speed_10m),
          windDirection: numericOrNull(currentRaw.wind_direction_10m),
          windGusts: numericOrNull(currentRaw.wind_gusts_10m),
          isDay: currentRaw.is_day === 1 || currentRaw.is_day === true
        },
        daily: normalizeDaily(payload.daily),
        hourly: normalizeHourly(payload.hourly)
      };
    }

    /**
     * Hours from the current hour onward.
     *
     * `current.time` is `YYYY-MM-DDTHH:mm` local to the location and `hourly.time`
     * rows share that format, so string comparison finds the first future hour.
     */
    function selectUpcomingHours(hours, currentTime, count) {
      if (!Array.isArray(hours) || hours.length === 0) return [];
      const limit = Number.isFinite(count) ? count : UPCOMING_HOURS;
      const anchor = typeof currentTime === 'string' && currentTime.length >= 13 ? `${currentTime.slice(0, 13)}:00` : '';
      let start = 0;
      if (anchor) {
        const found = hours.findIndex(hour => hour && typeof hour.time === 'string' && hour.time >= anchor);
        start = found === -1 ? 0 : found;
      }
      return hours.slice(start, start + limit);
    }

    /** The `daysAhead`-th daily entry (0 = today), or `null`. */
    function dayAhead(days, daysAhead) {
      if (!Array.isArray(days)) return null;
      return days[daysAhead] || null;
    }

    /** The next `count` days after today, which is what "未来 3 天" means. */
    function upcomingDays(days, count) {
      if (!Array.isArray(days)) return [];
      return days.slice(1, 1 + (Number.isFinite(count) ? count : 3));
    }

    /* ---- src/lib/history.js ---- */
    /**
     * 历史气温曲线（不是 K 线）：直接取 Open-Meteo 的逐日最高 / 最低 / 平均。
     *
     * 用 forecast 主机的 `past_days`（配额和 archive 分开），失败再退到
     * historical-forecast 主机与 archive 主机 —— 三台都试不到才报错。
     * `forecast_days=0` 只回过去，不含今天，意味着点都是**完整日**（截至昨天）。
     */


    const HISTORY_RANGES = [7, 30];
    const HISTORY_DEFAULT_RANGE = 7;
    /** 主站 → 备用主机 → archive（archive 需要 start/end 日期，单独构造）。 */
    const HISTORY_HOSTS = [
      'https://api.open-meteo.com/v1/forecast',
      'https://historical-forecast-api.open-meteo.com/v1/forecast'
    ];

    const HISTORY_DAILY_FIELDS = 'temperature_2m_max,temperature_2m_min,temperature_2m_mean';

    function normalizeRange(range) {
      const value = Math.round(Number(range));
      return HISTORY_RANGES.includes(value) ? value : HISTORY_DEFAULT_RANGE;
    }

    function buildHistoryUrl(host, lat, lon, days, options) {
      const range = normalizeRange(days);
      const timezone = (options && options.timezone) || 'Asia/Shanghai';
      return `${host}?latitude=${lat}&longitude=${lon}`
        + `&daily=${HISTORY_DAILY_FIELDS}`
        + `&past_days=${range}&forecast_days=0`
        + `&timezone=${encodeURIComponent(timezone)}`;
    }

    function buildArchiveUrl(lat, lon, startIso, endIso, options) {
      const timezone = (options && options.timezone) || 'Asia/Shanghai';
      return `https://archive-api.open-meteo.com/v1/archive?latitude=${lat}&longitude=${lon}`
        + `&daily=${HISTORY_DAILY_FIELDS}`
        + `&start_date=${startIso}&end_date=${endIso}`
        + `&timezone=${encodeURIComponent(timezone)}`;
    }

    function toDateIso(ms) {
      const date = new Date(ms);
      const pad = value => String(value).padStart(2, '0');
      return `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(date.getUTCDate())}`;
    }

    /** archive 的日期窗口：过去 range 天，截止到 6 天前（ERA5 有滞后）。 */
    function archiveWindow(days, nowMs) {
      const range = normalizeRange(days);
      const now = isNumber(nowMs) ? nowMs : Date.now();
      const end = now - 6 * 86400000;
      const start = end - (range - 1) * 86400000;
      return { start: toDateIso(start), end: toDateIso(end) };
    }

    /** Open-Meteo daily 返回 → [{ date, max, min, mean }]，只保留有数据的日期。 */
    function normalizeHistory(payload, days) {
      const daily = payload && payload.daily ? payload.daily : null;
      if (!daily || !Array.isArray(daily.time)) return [];
      const range = normalizeRange(days);
      const rows = [];
      for (let index = 0; index < daily.time.length; index += 1) {
        const date = daily.time[index];
        const max = isNumber(daily.temperature_2m_max ? daily.temperature_2m_max[index] : null)
          ? daily.temperature_2m_max[index] : null;
        const min = isNumber(daily.temperature_2m_min ? daily.temperature_2m_min[index] : null)
          ? daily.temperature_2m_min[index] : null;
        const mean = isNumber(daily.temperature_2m_mean ? daily.temperature_2m_mean[index] : null)
          ? daily.temperature_2m_mean[index] : null;
        if (max === null && min === null && mean === null) continue;
        rows.push({ date, max, min, mean });
      }
      return rows.slice(-range);
    }

    function historySummary(rows) {
      const list = Array.isArray(rows) ? rows : [];
      const highs = list.map(row => row.max).filter(isNumber);
      const lows = list.map(row => row.min).filter(isNumber);
      const means = list.map(row => row.mean).filter(isNumber);
      const average = values => (values.length
        ? +(values.reduce((sum, value) => sum + value, 0) / values.length).toFixed(1)
        : null);
      return {
        high: highs.length ? Math.max(...highs) : null,
        low: lows.length ? Math.min(...lows) : null,
        mean: average(means)
      };
    }

    /* ---- src/lib/procharts.js ---- */
    /**
     * 专业栏数据：来自社区站点 easterlywave.com 的静态产品图。
     *
     * 站点本身是 React SPA，数据接口（`POST /action/model/status`、`/action/typhoon/sst`）
     * 需要 cookie + CSRF 且**没有 CORS 头**，浏览器里调不到；但产品图是纯静态 PNG：
     *   · 海表温度  `/media/typhoon/sst/{YYYYMMDD}/{region}.png`（按日）
     *   · ECMWF 图  `/media/model/ecmwf/{YYYYMMDDHH}/{code}_{region}_{hour}.png`
     * 所以这里只做「按命名规则拼 URL + 用图片 onerror 回退」，不碰它的接口。
     */


    const EW_BASE = 'https://www.easterlywave.com';
    const EW_SST_PAGE = `${EW_BASE}/typhoon/sst/`;
    function ewModelPage(codeId) {
      return `${EW_BASE}/model/ecmwf/china/${String(codeId || 'gpt').toLowerCase()}/`;
    }

    const SST_REGIONS = [
      { id: 'wpac', zh: '西北太平洋', en: 'Western Pacific' },
      { id: 'eastasia', zh: '东亚', en: 'East Asia' },
      { id: 'micronesia', zh: '密克罗尼西亚', en: 'Micronesia' },
      { id: 'natl', zh: '北大西洋', en: 'North Atlantic' },
      { id: 'epac', zh: '东太平洋', en: 'Eastern Pacific' },
      { id: 'nio', zh: '北印度洋', en: 'N. Indian Ocean' },
      { id: 'sio', zh: '南印度洋', en: 'S. Indian Ocean' },
      { id: 'aus', zh: '南太平洋', en: 'Southern Pacific' }
    ];

    const SST_DAYS = 15;

    function sstRegion(id) {
      return SST_REGIONS.find(item => item.id === id) || SST_REGIONS[0];
    }

    function sstRegionName(region, lang) {
      if (!region) return '';
      return lang === 'en' ? region.en : region.zh;
    }

    /** 日频海温的日期戳（`YYYYMMDD`，UTC 日），offset = 几天前。 */
    function sstStamp(offset, nowMs) {
      const days = Math.max(0, Math.round(isNumber(offset) ? offset : 0));
      const date = new Date((isNumber(nowMs) ? nowMs : Date.now()) - days * 86400000);
      const pad = value => String(value).padStart(2, '0');
      return `${date.getUTCFullYear()}${pad(date.getUTCMonth() + 1)}${pad(date.getUTCDate())}`;
    }

    function sstImageUrl(regionId, stamp) {
      const region = sstRegion(regionId);
      return `${EW_BASE}/media/typhoon/sst/${stamp}/${region.id}.png`;
    }

    function sstLabel(stamp) {
      if (!stamp || stamp.length < 8) return '';
      return `${stamp.slice(4, 6)}/${stamp.slice(6, 8)}`;
    }

    const ECMWF_CODES = [
      { id: 'GPT', zh: '850hPa 温度 + 500hPa 高度', en: '850hPa Temp & 500hPa Height' },
      { id: 'WNP', zh: '850hPa 风场 + 海平面气压', en: '850 hPa Wind & MSLP' },
      { id: 'TMA', zh: '850hPa 温度距平', en: '850mb Temp Anomaly' },
      { id: 'VOP', zh: '850hPa 涡度', en: '850mb Vorticity' }
    ];

    const ECMWF_HOURS = [0, 24, 48, 72, 96, 120, 144, 168, 192, 216, 240];

    function ecmwfCode(id) {
      return ECMWF_CODES.find(item => item.id === id) || ECMWF_CODES[0];
    }

    function ecmwfCodeName(code, lang) {
      if (!code) return '';
      return lang === 'en' ? code.en : code.zh;
    }

    /**
     * 候选起报时次（UTC 00Z / 12Z），从最新往回排：今天 12Z → 今天 00Z →
     * 昨天 12Z → 昨天 00Z。新时次还没出图时靠图片 onerror 往后回退。
     */
    function ecmwfRuns(nowMs) {
      const now = isNumber(nowMs) ? nowMs : Date.now();
      const date = new Date(now);
      const year = date.getUTCFullYear();
      const month = date.getUTCMonth();
      const day = date.getUTCDate();
      const pad = value => String(value).padStart(2, '0');
      const stamp = (offsetDays, hour) => {
        const d = new Date(Date.UTC(year, month, day - offsetDays, hour));
        return `${d.getUTCFullYear()}${pad(d.getUTCMonth() + 1)}${pad(d.getUTCDate())}${pad(d.getUTCHours())}`;
      };
      const hours = date.getUTCHours();
      const runs = [];
      if (hours >= 12) runs.push(stamp(0, 12));
      runs.push(stamp(0, 0));
      runs.push(stamp(1, 12));
      runs.push(stamp(1, 0));
      return runs;
    }

    function ecmwfImageUrl(codeId, run, hour) {
      const code = ecmwfCode(codeId);
      const h = Math.min(240, Math.max(0, Math.round(isNumber(hour) ? hour : 0)));
      return `${EW_BASE}/media/model/ecmwf/${run}/${code.id.toLowerCase()}_china_${h}.png`;
    }

    /** `2026102312` → 北京时间 `10/23 20时`。 */
    function ecmwfRunLabel(run) {
      if (!run || run.length < 10) return '';
      const date = new Date(Date.UTC(
        Number(run.slice(0, 4)),
        Number(run.slice(4, 6)) - 1,
        Number(run.slice(6, 8)),
        Number(run.slice(8, 10))
      ));
      const beijing = new Date(date.getTime() + 8 * 3600 * 1000);
      const pad = value => String(value).padStart(2, '0');
      return `${pad(beijing.getUTCMonth() + 1)}/${pad(beijing.getUTCDate())} ${pad(beijing.getUTCHours())}时`;
    }

    /* ---- src/lib/satellite.js ---- */
    /**
     * 卫星云图数据源。
     *
     * 只接国内官方源：国家卫星气象中心（NSMC）。每个产品有一份 XML 清单
     * `https://img.nsmc.org.cn/PORTAL/NSMC/XML/<GROUP>/<NAME>.xml`，里面逐帧列
     * `<image time="…" url="//img.nsmc.org.cn/…">`；实测清单带
     * `Access-Control-Allow-Origin: *`，产品图本身也能直连。
     */

    const NSMC_MANIFEST_BASE = 'https://img.nsmc.org.cn/PORTAL/NSMC/XML/';

    const NSMC_PRODUCTS = [
      {
        id: 'FY4B_AGRI_IMG_REGI_PCC_GLL',
        xml: 'FY4B/FY4B_AGRI_IMG_REGI_PCC_GLL',
        zh: 'FY-4B · 中国区域 · 伪彩色',
        en: 'FY-4B China · pseudo colour',
        note: '每 15 分钟 · 约 415 KB/帧'
      },
      {
        id: 'FY4B_AGRI_IMG_REGI_GCLR_GLL',
        // 这个产品的清单挂在另一条路径上（不是 PORTAL/NSMC/XML），所以直接存完整地址。
        xml: 'https://img.nsmc.org.cn/CLOUDIMAGE/FY4B/AGRI/GCLR/SEC/xml/FY4B-china-72h.xml',
        zh: 'FY-4B · 中国区域 · 真彩色',
        en: 'FY-4B China · true colour',
        note: '72 小时回看 · 约 704 KB/帧'
      },
      {
        id: 'FY4B_AGRI_IMG_DISK_NATR_NOM',
        xml: 'FY4B/FY4B_AGRI_IMG_DISK_NATR_NOM',
        zh: 'FY-4B · 全圆盘 · 自然色',
        en: 'FY-4B full disk · natural colour',
        note: '每 15 分钟 · 约 342 KB/帧'
      },
      {
        id: 'FY4B_AGRI_IMG_DISK_THEMG_C13',
        xml: 'FY4B/FY4B_AGRI_IMG_DISK_THEMG_C13',
        zh: 'FY-4B · 全圆盘 · 长波红外',
        en: 'FY-4B full disk · IR 10.8μm',
        note: '增强红外通道 13 · 约 863 KB/帧'
      },
      {
        id: 'FY2G_LAN_VIS_GRA',
        xml: 'FY2G/FY2G_LAN_VIS_GRA',
        zh: 'FY-2G · 中国区域 · 可见光',
        en: 'FY-2G China · visible',
        note: '每 30 分钟 · 约 120 KB/帧'
      },
      {
        id: 'GEOS_MOS_IRX_15min',
        xml: 'GEOS/GEOS_MOS_IRX_15KM_15min',
        zh: '全球红外云图 · 15 分钟',
        en: 'Global IR · 15-minute',
        note: '10.8μm 彩色合成 · 约 882 KB/帧'
      }
    ];

    function nsmcProduct(id) {
      return NSMC_PRODUCTS.find(item => item.id === id) || NSMC_PRODUCTS[0];
    }

    function nsmcProductName(product, lang) {
      if (!product) return '';
      return lang === 'en' ? product.en : product.zh;
    }

    function nsmcManifestUrl(product) {
      const entry = nsmcProduct(product && product.id ? product.id : undefined);
      // 个别产品的清单不在 PORTAL/NSMC/XML 下，注册表里直接存了完整地址。
      return /^https?:/i.test(entry.xml) ? entry.xml : `${NSMC_MANIFEST_BASE}${entry.xml}.xml`;
    }

    /** XML → [{ time, url }]，最新的在前。解析保持宽松，任何一条坏记录都不影响其它帧。 */
    function parseNsmcManifest(xml) {
      const text = String(xml || '');
      const frames = [];
      const pattern = /<image\b[^>]*?\btime="([^"]+)"[^>]*?\burl="([^"]+)"/g;
      let match = pattern.exec(text);
      while (match) {
        const rawUrl = match[2].startsWith('//') ? `https:${match[2]}` : match[2];
        if (rawUrl) frames.push({ time: match[1], url: rawUrl });
        match = pattern.exec(text);
      }
      // 清单本身就是按时间倒序给的，这里再排一次保证顺序稳定。
      frames.sort((left, right) => (left.time < right.time ? 1 : left.time > right.time ? -1 : 0));
      return frames;
    }

    /** NSMC 的 `<image time>` 是 UTC 文本（`2026-10-23 11:00 (UTC)`），界面上用北京时间。 */
    function nsmcTimeParts(text) {
      const match = /(\d{4})-(\d{2})-(\d{2})\s+(\d{2}):(\d{2})/.exec(String(text || ''));
      if (!match) return null;
      const ms = Date.UTC(Number(match[1]), Number(match[2]) - 1, Number(match[3]), Number(match[4]), Number(match[5]));
      if (!Number.isFinite(ms)) return null;
      const beijing = new Date(ms + 8 * 3600 * 1000);
      const pad = value => String(value).padStart(2, '0');
      return {
        day: `${pad(beijing.getUTCMonth() + 1)}/${pad(beijing.getUTCDate())}`,
        clock: `${pad(beijing.getUTCHours())}:${pad(beijing.getUTCMinutes())}`
      };
    }

    function formatNsmcTime(text, lang) {
      const parts = nsmcTimeParts(text);
      if (!parts) return String(text || '');
      return lang === 'en' ? `${parts.clock} BJT · ${parts.day}` : `${parts.day} ${parts.clock}`;
    }

    /* ---- src/lib/radar.js ---- */
    /**
     * 中央气象台（nmc.cn）雷达拼图产品。
     *
     * 官方页面把帧清单写在 HTML 里，而该页面**没有 CORS 头**，浏览器读不到；但产品图
     * 本身是静态 PNG，用 `<img>` 直接加载不需要 CORS。所以这里按官方命名规则生成候选
     * 时次，由视图层用图片 onerror 跳过还没发布的帧。
     *
     * 命名规则（2026-10 实测 nmc.cn/publish/radar/chinaall.html）：
     *   https://image.nmc.cn/product/YYYY/MM/DD/RDCP/[medium/]SEVP_AOC_RDCP_SLDAS3_ECREF_{code}_L88_PI_{stamp}00000.PNG
     *   · stamp 是 UTC 时间（yyyymmddhhmm），页面标签是北京时间（+8h）
     *   · 帧间隔 6 分钟；全国拼图保留约 24 小时（240 帧），分区约 2 小时
     *   · 只有全国拼图放在 medium/ 目录
     */


    const RADAR_FRAME_MINUTES = 6;
    const RADAR_IMAGE_BASE = 'https://image.nmc.cn/product';
    const RADAR_PAGE_BASE = 'https://www.nmc.cn/publish/radar/';

    /** 与 nmc.cn 左栏一致的 8 个区域产品。 */
    const RADAR_PRODUCTS = [
      { id: 'chinaall', code: 'ACHN', zh: '全国雷达拼图', en: 'Nationwide composite', frames: 240, medium: true },
      { id: 'huabei', code: 'ANCN', zh: '华北', en: 'North China', frames: 20, medium: false },
      { id: 'dongbei', code: 'ANEC', zh: '东北', en: 'Northeast China', frames: 20, medium: false },
      { id: 'huadong', code: 'AECN', zh: '华东', en: 'East China', frames: 20, medium: false },
      { id: 'huazhong', code: 'ACCN', zh: '华中', en: 'Central China', frames: 20, medium: false },
      { id: 'huanan', code: 'ASCN', zh: '华南', en: 'South China', frames: 20, medium: false },
      { id: 'xinan', code: 'ASWC', zh: '西南', en: 'Southwest China', frames: 20, medium: false },
      { id: 'xibei', code: 'ANWC', zh: '西北', en: 'Northwest China', frames: 20, medium: false }
    ];

    function radarProduct(id) {
      return RADAR_PRODUCTS.find(item => item.id === id) || RADAR_PRODUCTS[0];
    }

    function radarProductName(product, lang) {
      if (!product) return '';
      return lang === 'en' ? product.en : product.zh;
    }

    /** UTC 时间戳（`yyyymmddhhmm`），按 6 分钟对齐。 */
    function radarStampAt(ms) {
      const date = new Date(ms);
      const pad = value => String(value).padStart(2, '0');
      return `${date.getUTCFullYear()}${pad(date.getUTCMonth() + 1)}${pad(date.getUTCDate())}`
        + `${pad(date.getUTCHours())}${pad(date.getUTCMinutes())}`;
    }

    /**
     * 从「最近可用的 6 分钟整点」往回数，生成 count 个候选时次。
     * 第一项是最新的，序号越大越早，和视图里的滑块方向一致。
     */
    function radarStamps(nowMs, count, stepMinutes) {
      const step = Math.max(1, Math.round(isNumber(stepMinutes) ? stepMinutes : RADAR_FRAME_MINUTES)) * 60000;
      const total = Math.max(1, Math.min(240, Math.round(isNumber(count) ? count : 1)));
      const now = isNumber(nowMs) ? nowMs : Date.now();
      const base = Math.floor(now / step) * step;
      const stamps = [];
      for (let index = 0; index < total; index += 1) {
        stamps.push(radarStampAt(base - index * step));
      }
      return stamps;
    }

    function radarImageUrl(product, stamp) {
      if (!product || !stamp) return '';
      const year = stamp.slice(0, 4);
      const month = stamp.slice(4, 6);
      const day = stamp.slice(6, 8);
      const segment = product.medium ? 'medium/' : '';
      return `${RADAR_IMAGE_BASE}/${year}/${month}/${day}/RDCP/${segment}`
        + `SEVP_AOC_RDCP_SLDAS3_ECREF_${product.code}_L88_PI_${stamp}00000.PNG`;
    }

    /** 文件名是 UTC，nmc.cn 的页面标签是北京时间。 */
    function radarBeijingParts(stamp) {
      if (!stamp || stamp.length < 12) return null;
      const ms = Date.UTC(
        Number(stamp.slice(0, 4)),
        Number(stamp.slice(4, 6)) - 1,
        Number(stamp.slice(6, 8)),
        Number(stamp.slice(8, 10)),
        Number(stamp.slice(10, 12))
      );
      if (!Number.isFinite(ms)) return null;
      const date = new Date(ms + 8 * 3600 * 1000);
      const pad = value => String(value).padStart(2, '0');
      return {
        day: `${pad(date.getUTCMonth() + 1)}/${pad(date.getUTCDate())}`,
        clock: `${pad(date.getUTCHours())}:${pad(date.getUTCMinutes())}`,
        minutes: date.getUTCHours() * 60 + date.getUTCMinutes()
      };
    }

    function formatRadarStamp(stamp, lang) {
      const parts = radarBeijingParts(stamp);
      if (!parts) return '';
      return lang === 'en' ? `${parts.clock} BJT · ${parts.day}` : `${parts.day} ${parts.clock}`;
    }

    function radarPageUrl(product) {
      const id = product ? product.id : RADAR_PRODUCTS[0].id;
      return `${RADAR_PAGE_BASE}${id}.html`;
    }

    /* ---- src/lib/notice-core.js ---- */
    /**
     * Pure decision logic for the startup notice.
     *
     * Split out of the overlay component so the "should we interrupt the user?"
     * rule can be unit-tested: it encodes the two triggers (rain today, active
     * alerts) and the two dedupe levels (per-day acknowledgement, in-session
     * handling), and a wrong branch here either nags or stays silent when it
     * matters.
     */


    /** What today's forecast implies about going outside. */
    function summarizeToday(forecast) {
      if (!forecast) return null;
      const today = forecast.daily && forecast.daily[0] ? forecast.daily[0] : null;
      const amount = today && typeof today.precipitationSum === 'number' ? today.precipitationSum : 0;
      const chance = today && typeof today.precipitationProbabilityMax === 'number' ? today.precipitationProbabilityMax : 0;
      const nowAmount = forecast.current && typeof forecast.current.precipitation === 'number' ? forecast.current.precipitation : 0;
      const willRain = amount >= 0.2 || chance >= 50 || nowAmount > 0;
      return { amount, chance, willRain };
    }

    /** Signature of the current notice-worthy state; a new alert changes it. */
    function noticeSignature(summary, alerts) {
      const rain = summary && summary.willRain ? 'rain' : '';
      return `${alertSignature(alerts)}|${rain}`;
    }

    /**
     * Decide whether the notice should be visible right now.
     *
     * @param {object} input
     * @param {object|null} input.summary     result of `summarizeToday`
     * @param {Array}       input.alerts      matched alerts
     * @param {object|null} input.stored      persisted `{date, signature}`
     * @param {string}      input.handled     signature dismissed in this session
     * @param {string}      input.date        today's `YYYY-MM-DD`
     * @param {boolean}     input.hasForecast whether a forecast is loaded yet
     * @returns {boolean}
     */
    function shouldNotify(input) {
      const summary = input.summary;
      const alerts = Array.isArray(input.alerts) ? input.alerts : [];
      const rain = Boolean(summary && summary.willRain);
      const hasAlerts = alerts.length > 0;
      // Alerts stand on their own: an NMC alert must still be shown when the
      // Open-Meteo request failed, so the forecast is only required for rain.
      if (!hasAlerts && !(input.hasForecast && rain)) return false;
      // Demo mode (a fake alert injected on purpose) ignores the acknowledgements so
      // the dialog can be inspected repeatedly without clearing storage each time.
      if (input.force === true) return true;
      const signature = noticeSignature(summary, alerts);
      if (input.handled && input.handled === signature) return false;
      if (input.stored && input.stored.date === input.date && input.stored.signature === signature) return false;
      return true;
    }

    /* ---- src/lib/store.js ---- */
    /**
     * Shared weather store: one place that owns settings, caching, network work and
     * the ten-minute refresh loop.
     *
     * Why a store and not a hook: the panel and the startup notice are two separate
     * slot entries. Both need the same location / forecast / alerts, and neither
     * may duplicate requests. One store, many subscribers — the notice can check
     * alerts at page boot while the panel is never opened, without a second fetch.
     *
     * Everything here is plain JavaScript (no React), so it is unit-testable; the
     * subscription helper at the bottom is the only React-aware part.
     */

    // Single-line imports are stripped by scripts/build.mjs (the bundle is one
    // shared scope). They exist so this file is a real ESM module and Node tests
    // import the actual implementation instead of a silently-degraded copy.

    const PANEL_ID = 'dsh-weather-panel';
    const SETTINGS_STORAGE_KEY = `${PANEL_ID}:settings`;
    const LOCATION_CACHE_KEY = 'resolved';
    const NOTICE_STORAGE_KEY = `${PANEL_ID}:notice`;
    const LOCATION_TTL_MS = 6 * 60 * 60 * 1000;
    const FORECAST_TTL_MS = 10 * 60 * 1000;
    const ALERTS_TTL_MS = 10 * 60 * 1000;
    const TYPHOON_TTL_MS = 60 * 60 * 1000;
    const AUTO_REFRESH_MS = 10 * 60 * 1000;
    const TICK_MS = 30 * 1000;
    const REQUEST_TIMEOUT_MS = 12000;
    const DEFAULT_SETTINGS = { units: 'metric', preciseLocation: false, override: null };

    let sharedStorage = null;
    let sharedLocationCache = null;
    let sharedForecastCaches = new Map();
    let sharedAlertCache = null;
    let sharedTyphoonCache = null;

    function getPanelStorage() {
      if (!sharedStorage) sharedStorage = createSafeStorage(`${PANEL_ID}:probe`);
      return sharedStorage;
    }

    function getLocationCache() {
      if (!sharedLocationCache) {
        sharedLocationCache = createTtlCache(getPanelStorage(), `${PANEL_ID}:location:`, () => Date.now());
      }
      return sharedLocationCache;
    }

    function forecastCacheFor(location) {
      const key = `${Number(location.lat).toFixed(2)},${Number(location.lon).toFixed(2)}`;
      if (!sharedForecastCaches.has(key)) {
        sharedForecastCaches.set(key, createTtlCache(getPanelStorage(), `${PANEL_ID}:forecast:${key}:`, () => Date.now()));
      }
      return sharedForecastCaches.get(key);
    }

    function getAlertCache() {
      if (!sharedAlertCache) sharedAlertCache = createTtlCache(getPanelStorage(), `${PANEL_ID}:alerts:`, () => Date.now());
      return sharedAlertCache;
    }

    function getTyphoonCache() {
      if (!sharedTyphoonCache) sharedTyphoonCache = createTtlCache(getPanelStorage(), `${PANEL_ID}:typhoon:`, () => Date.now());
      return sharedTyphoonCache;
    }

    /** One cache key per place, so switching cities does not reuse another city's alerts. */
    function placeCacheKey(location) {
      if (!location) return 'unknown';
      const label = typeof location.label === 'string' ? location.label : '';
      const coords = `${Number(location.lat).toFixed(1)},${Number(location.lon).toFixed(1)}`;
      return `${coords}:${label}`;
    }

    /* ------------------------------------------------------------------ */
    /* Settings                                                           */
    /* ------------------------------------------------------------------ */

    function normalizeOverride(value) {
      if (!value || !isNumber(value.lat) || !isNumber(value.lon)) return null;
      return {
        lat: value.lat,
        lon: value.lon,
        label: typeof value.label === 'string' ? value.label : '',
        city: typeof value.city === 'string' ? value.city : '',
        region: typeof value.region === 'string' ? value.region : '',
        source: value.source === 'gps' ? 'gps' : 'manual'
      };
    }

    function readPanelSettings() {
      try {
        const raw = getPanelStorage().getItem(SETTINGS_STORAGE_KEY);
        if (!raw) return { ...DEFAULT_SETTINGS };
        const parsed = JSON.parse(raw);
        return {
          units: parsed && parsed.units === 'imperial' ? 'imperial' : 'metric',
          // Persisted across starts: the switch is a user decision, not a one-shot.
          preciseLocation: Boolean(parsed && parsed.preciseLocation === true),
          override: parsed ? normalizeOverride(parsed.override) : null
        };
      } catch (error) {
        return { ...DEFAULT_SETTINGS };
      }
    }

    function writePanelSettings(settings) {
      try {
        getPanelStorage().setItem(SETTINGS_STORAGE_KEY, JSON.stringify(settings));
      } catch (error) {
        /* best effort: in-memory state still works */
      }
    }

    /* ------------------------------------------------------------------ */
    /* Demo alerts (for checking the notice without waiting for weather)   */
    /* ------------------------------------------------------------------ */

    const DEMO_STORAGE_KEY = `${PANEL_ID}:demo-alert`;

    const DEMO_ALERT_PRESETS = {
      'typhoon-red': {
        title: '山东省青岛市气象台发布台风红色预警信号',
        type: '台风',
        typeEn: 'Typhoon',
        level: 'red',
        levelZh: '红色',
        levelEn: 'Red',
        levelRank: 4,
        place: '山东省青岛市'
      },
      'rain-orange': {
        title: '山东省青岛市气象台发布暴雨橙色预警信号',
        type: '暴雨',
        typeEn: 'Rainstorm',
        level: 'orange',
        levelZh: '橙色',
        levelEn: 'Orange',
        levelRank: 3,
        place: '山东省青岛市'
      }
    };

    /** Which demo alert the user asked for, or `''` when demo mode is off. */
    function readDemoAlertKind() {
      try {
        const raw = getPanelStorage().getItem(DEMO_STORAGE_KEY);
        return typeof raw === 'string' ? raw.trim() : '';
      } catch (error) {
        return '';
      }
    }

    /** Turn demo mode on for one preset (the next refresh injects it). */
    function setDemoAlertKind(kind) {
      try {
        const preset = String(kind || '').trim();
        if (preset) getPanelStorage().setItem(DEMO_STORAGE_KEY, preset);
        else getPanelStorage().removeItem(DEMO_STORAGE_KEY);
      } catch (error) {
        /* storage blocked: demo simply does not start */
      }
    }

    /** Turn demo mode off; the next refresh loads the real alert feed again. */
    function clearDemoAlert() {
      setDemoAlertKind('');
    }

    /**
     * Build a fake alert for the notice test.
     *
     * Only used when `dsh-weather-panel:demo-alert` is set to a preset name; the
     * real alert pipeline is untouched, so nothing here can fire by accident.
     */
    function buildDemoAlert(kind, nowMs) {
      const preset = DEMO_ALERT_PRESETS[String(kind || '').trim()];
      if (!preset) return null;
      const now = new Date(Number.isFinite(nowMs) ? nowMs : Date.now());
      const pad = value => String(value).padStart(2, '0');
      return {
        id: `demo:${kind}`,
        title: preset.title,
        issuedAt: now.getTime(),
        issuedText: `${now.getFullYear()}/${pad(now.getMonth() + 1)}/${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}`,
        url: 'https://www.nmc.cn/publish/alarm.html',
        pic: '',
        type: preset.type,
        typeEn: preset.typeEn,
        level: preset.level,
        levelZh: preset.levelZh,
        levelEn: preset.levelEn,
        levelRank: preset.levelRank,
        place: preset.place,
        scope: 'city',
        demo: true
      };
    }

    /** Preset names available to the demo switch. */
    function demoAlertKinds() {
      return Object.keys(DEMO_ALERT_PRESETS);
    }

    /* ------------------------------------------------------------------ */
    /* Network                                                            */
    /* ------------------------------------------------------------------ */

    /** JSON fetch with a hard timeout and mapped errors. */
    function fetchJson(url, options) {
      return fetchRaw(url, options).then(response => response.json());
    }

    /** Text fetch, used for the JSONP typhoon endpoints. */
    function fetchText(url, options) {
      return fetchRaw(url, options).then(response => response.text());
    }

    function fetchRaw(url, options) {
      const settings = options || {};
      const externalSignal = settings.signal;
      const controller = new AbortController();
      const abortFromOutside = () => controller.abort();
      if (externalSignal) {
        if (externalSignal.aborted) controller.abort();
        else externalSignal.addEventListener('abort', abortFromOutside, { once: true });
      }
      const timer = setTimeout(() => controller.abort(), isNumber(settings.timeoutMs) ? settings.timeoutMs : REQUEST_TIMEOUT_MS);

      return fetch(url, {
        method: 'GET',
        mode: 'cors',
        credentials: 'omit',
        cache: 'no-store',
        redirect: 'follow',
        referrerPolicy: 'no-referrer',
        headers: { accept: settings.accept || 'application/json,text/plain,*/*' },
        signal: controller.signal
      }).then(response => {
        if (!response.ok) {
          const error = new Error(`HTTP ${response.status}`);
          error.status = response.status;
          throw error;
        }
        return response;
      }).finally(() => {
        clearTimeout(timer);
        if (externalSignal) externalSignal.removeEventListener('abort', abortFromOutside);
      });
    }

    /** Ask the browser for device location. */
    function requestDevicePosition() {
      return new Promise((resolve, reject) => {
        if (typeof navigator === 'undefined' || !navigator.geolocation) {
          reject(new Error('unsupported'));
          return;
        }
        navigator.geolocation.getCurrentPosition(
          position => resolve({
            lat: position.coords.latitude,
            lon: position.coords.longitude,
            accuracy: position.coords.accuracy
          }),
          error => reject(error),
          { enableHighAccuracy: false, timeout: 8000, maximumAge: 5 * 60 * 1000 }
        );
      });
    }

    /** Reverse-geocode, falling back to the provider city and then coordinates. */
    async function describeLocation(found, signal, lang) {
      let reversed = null;
      try {
        reversed = await reverseGeocode(fetchJson, found.lat, found.lon, { signal, language: lang });
      } catch (error) {
        reversed = null;
      }
      const label = (reversed && reversed.label)
        || [found.city, found.region].filter(Boolean).join(' · ')
        || formatCoordinates(found.lat, found.lon);
      return {
        lat: found.lat,
        lon: found.lon,
        label,
        source: found.source || 'network',
        ip: found.ip || '',
        provider: found.provider || '',
        countryCode: found.countryCode || (reversed && reversed.countryCode) || '',
        city: (reversed && reversed.city) || found.city || '',
        region: (reversed && reversed.region) || found.region || ''
      };
    }

    function taggedError(kind, cause) {
      const error = cause instanceof Error ? cause : new Error(kind);
      error.kind = kind;
      return error;
    }

    function describeError(error, translate) {
      if (!error) return translate('error.weather');
      if (error.kind === 'locate') return translate('error.locate');
      if (typeof error.status === 'number') return translate('error.http', { status: error.status });
      if (error.name === 'AbortError') return translate('error.timeout');
      return translate('error.weather');
    }

    /**
     * Pick a location for this refresh.
     *
     * Order: an explicit manual city always wins; then the persisted
     * "high-accuracy device location" switch; then the cached/derived network
     * location. A failing geolocation never breaks the panel — it reports a warning
     * and falls through to the network path.
     *
     * @returns {Promise<{location: object, warning: string}>}
     */
    async function resolveLocation(settings, signal, lang) {
      if (settings.override) return { location: { ...settings.override }, warning: '' };

      if (settings.preciseLocation) {
        try {
          const position = await requestDevicePosition();
          const described = await describeLocation(
            { lat: position.lat, lon: position.lon, source: 'gps' },
            signal,
            lang
          );
          return {
            location: {
              ...described,
              source: 'gps',
              accuracy: isNumber(position.accuracy) ? Math.round(position.accuracy) : null
            },
            warning: ''
          };
        } catch (error) {
          // Permission denied, no hardware, or a timeout: keep going with the IP.
        }
      }

      const cached = getLocationCache().get(LOCATION_CACHE_KEY);
      if (cached && isNumber(cached.lat) && isNumber(cached.lon)) {
        return { location: cached, warning: settings.preciseLocation ? 'gps-fallback' : '' };
      }
      const found = await lookupNetworkLocation(fetchJson, { signal });
      if (!found) throw taggedError('locate');
      const described = await describeLocation(found, signal, lang);
      getLocationCache().set(LOCATION_CACHE_KEY, described, LOCATION_TTL_MS);
      return { location: described, warning: settings.preciseLocation ? 'gps-fallback' : '' };
    }

    async function fetchAlarmPage(pageNo, signal) {
      const payload = await fetchJson(buildAlarmPageUrl(pageNo, ALARM_PAGE_SIZE), { signal });
      return normalizeAlarmPage(payload);
    }

    /**
     * Domestic alerts for this place.
     *
     * The feed is national and newest-first; when page 1 has no match for this city
     * the remaining pages are fetched in parallel. The matched list is cached per
     * place so the ten-minute refresh usually costs nothing.
     */
    async function loadAlerts(location, signal, force) {
      const cacheKey = placeCacheKey(location);
      const cached = getAlertCache().get(cacheKey);
      const savedAt = getAlertCache().savedAt(cacheKey);
      if (!force && cached && savedAt && Date.now() - savedAt < ALERTS_TTL_MS) return cached;

      const first = await fetchAlarmPage(1, signal);
      let matched = matchAlerts(first.alerts, location);
      let scanned = first.count || first.alerts.length;
      if (matched.length === 0 && first.totalPage > 1) {
        const pages = [];
        const lastPage = Math.min(first.totalPage, ALARM_MAX_PAGES);
        for (let page = 2; page <= lastPage; page += 1) pages.push(page);
        const rest = await Promise.all(pages.map(page => fetchAlarmPage(page, signal).catch(() => ({ alerts: [] }))));
        const all = first.alerts.concat(...rest.map(item => item.alerts || []));
        matched = matchAlerts(all, location);
        scanned = Math.max(first.count || 0, all.length);
      }
      const result = { alerts: matched, scanned, checkedAt: Date.now() };
      getAlertCache().set(cacheKey, result, ALERTS_TTL_MS);
      return result;
    }

    /** Typhoon list + detail for the newest running system. */
    async function loadTyphoon(force, signal) {
      let list = force ? null : getTyphoonCache().get('list');
      if (!list) {
        const text = await fetchText(TYPHOON_LIST_URL, { signal, accept: '*/*' });
        list = normalizeTyphoonList(parseJsonp(text));
        getTyphoonCache().set('list', list, TYPHOON_TTL_MS);
      }
      const picked = pickTyphoon(list);
      if (!picked) return { list, detail: null, pickedId: null };
      const cacheKey = `detail:${picked.id}`;
      let detail = force ? null : getTyphoonCache().get(cacheKey);
      if (!detail) {
        const text = await fetchText(`${TYPHOON_DETAIL_URL}${picked.id}`, { signal, accept: '*/*' });
        detail = normalizeTyphoonDetail(parseJsonp(text));
        if (detail) getTyphoonCache().set(cacheKey, detail, TYPHOON_TTL_MS);
      }
      return { list, detail, pickedId: picked.id };
    }

    async function loadTyphoonDetail(id, signal, force) {
      const cacheKey = `detail:${id}`;
      let detail = force ? null : getTyphoonCache().get(cacheKey);
      if (detail) return detail;
      const text = await fetchText(`${TYPHOON_DETAIL_URL}${id}`, { signal, accept: '*/*' });
      detail = normalizeTyphoonDetail(parseJsonp(text));
      if (detail) getTyphoonCache().set(cacheKey, detail, TYPHOON_TTL_MS);
      return detail;
    }

    /* ------------------------------------------------------------------ */
    /* Store                                                              */
    /* ------------------------------------------------------------------ */

    function createWeatherStore() {
      const listeners = new Set();
      let settings = readPanelSettings();
      let state = {
        settings,
        phase: 'idle',
        busy: false,
        error: null,
        location: null,
        forecast: null,
        alerts: [],
        alertsScanned: 0,
        alertsCheckedAt: null,
        locationWarning: '',
        typhoonList: [],
        typhoon: null,
        typhoonId: null,
        typhoonActive: false,
        updatedAt: null
      };

      let runId = 0;
      let abortController = null;
      let lastAttempt = 0;
      let timer = null;
      let visibilityHandler = null;
      let started = false;
      let lang = 'zh';
      let translate = key => key;

      function emit(patch) {
        state = { ...state, ...patch };
        listeners.forEach(listener => {
          try {
            listener();
          } catch (error) {
            /* a broken subscriber must not break the store */
          }
        });
      }

      function alive(run) {
        return run === runId;
      }

      async function refresh(options) {
        const force = Boolean(options && options.force);
        const run = ++runId;
        if (abortController) abortController.abort();
        const controller = new AbortController();
        abortController = controller;
        lastAttempt = Date.now();
        emit({ busy: true, error: null, phase: state.forecast ? 'ready' : 'locating' });

        let location = null;
        try {
          const resolved = await resolveLocation(settings, controller.signal, lang);
          location = resolved.location;
          if (!alive(run)) return;
          emit({ location, locationWarning: resolved.warning || '', phase: state.forecast ? 'ready' : 'loading' });
        } catch (error) {
          if (!alive(run)) return;
          emit({ busy: false, phase: state.forecast ? 'ready' : 'error', error: describeError(error, translate) });
          return;
        }

        // Painful case: cached values first, so the panel and the notice paint instantly.
        const cache = forecastCacheFor(location);
        const cachedForecast = force ? null : cache.get('latest');
        const cachedSavedAt = cache.savedAt('latest');
        if (cachedForecast) {
          emit({ forecast: cachedForecast, updatedAt: cachedSavedAt, phase: 'ready' });
        }

        const tasks = [];
        tasks.push((async () => {
          if (cachedForecast && cachedSavedAt && Date.now() - cachedSavedAt < FORECAST_TTL_MS) return;
          const payload = await fetchJson(buildForecastUrl(location.lat, location.lon), { signal: controller.signal });
          const normalized = normalizeForecast(payload);
          if (!normalized) throw taggedError('data');
          cache.set('latest', normalized, FORECAST_TTL_MS);
          if (!alive(run)) return;
          emit({ forecast: normalized, updatedAt: Date.now(), phase: 'ready' });
        })());

        tasks.push((async () => {
          const demo = buildDemoAlert(readDemoAlertKind());
          if (demo) {
            if (!alive(run)) return;
            emit({ alerts: [demo], alertsScanned: 1, alertsCheckedAt: Date.now() });
            return;
          }
          const result = await loadAlerts(location, controller.signal, force);
          if (!alive(run)) return;
          emit({ alerts: result.alerts, alertsScanned: result.scanned, alertsCheckedAt: result.checkedAt });
        })());

        tasks.push((async () => {
          const result = await loadTyphoon(force, controller.signal);
          if (!alive(run)) return;
          emit({
            typhoonList: result.list,
            typhoon: result.detail || state.typhoon,
            typhoonId: result.pickedId,
            typhoonActive: listHasActiveTyphoon(result.list)
          });
        })());

        const results = await Promise.allSettled(tasks);
        if (!alive(run)) return;
        const failed = results.find(item => item.status === 'rejected');
        emit({
          busy: false,
          error: failed && failed.status === 'rejected' ? describeError(failed.reason, translate) : null
        });
      }

      function start(options) {
        if (options && typeof options.lang === 'string') lang = options.lang;
        if (options && typeof options.translate === 'function') translate = options.translate;
        if (!started) {
          started = true;
          refresh({ force: false });
          timer = setInterval(() => {
            if (typeof document !== 'undefined' && document.hidden) return;
            if (Date.now() - lastAttempt >= AUTO_REFRESH_MS) refresh({ force: false });
          }, TICK_MS);
          if (typeof document !== 'undefined' && typeof document.addEventListener === 'function') {
            visibilityHandler = () => {
              if (!document.hidden && Date.now() - lastAttempt >= AUTO_REFRESH_MS) refresh({ force: false });
            };
            document.addEventListener('visibilitychange', visibilityHandler);
          }
        }
        return () => {
          if (timer) clearInterval(timer);
          timer = null;
          if (visibilityHandler && typeof document !== 'undefined') {
            document.removeEventListener('visibilitychange', visibilityHandler);
            visibilityHandler = null;
          }
          started = false;
        };
      }

      function setLanguage(nextLang, nextTranslate) {
        lang = nextLang === 'en' ? 'en' : 'zh';
        if (typeof nextTranslate === 'function') translate = nextTranslate;
      }

      function persist(patch) {
        settings = { ...settings, ...patch };
        writePanelSettings(settings);
        emit({ settings });
      }

      return {
        getState: () => state,
        subscribe(listener) {
          listeners.add(listener);
          return () => listeners.delete(listener);
        },
        start,
        setLanguage,
        refresh,
        dispose() {
          if (abortController) abortController.abort();
          if (timer) clearInterval(timer);
          timer = null;
          if (visibilityHandler && typeof document !== 'undefined') {
            document.removeEventListener('visibilitychange', visibilityHandler);
            visibilityHandler = null;
          }
          listeners.clear();
          started = false;
        },
        setUnits(units) {
          persist({ units: units === 'imperial' ? 'imperial' : 'metric' });
        },
        toggleUnits() {
          persist({ units: settings.units === 'imperial' ? 'metric' : 'imperial' });
        },
        setOverride(location) {
          const override = normalizeOverride(location);
          persist({ override });
          refresh({ force: true });
        },
        /** Back to plain network location (clears a manual city, switch off). */
        clearOverride() {
          getLocationCache().delete(LOCATION_CACHE_KEY);
          persist({ override: null, preciseLocation: false });
          refresh({ force: true });
        },
        /**
         * Persist the "high-accuracy device location" switch.
         *
         * Turning it on clears a manual city so the setting is actually visible, and
         * a refresh immediately triggers the permission prompt — that prompt *is*
         * the user's confirmation. Turning it off returns to the network location.
         */
        setPreciseLocation(enabled) {
          const next = enabled === true;
          persist({ preciseLocation: next, override: next ? null : settings.override });
          if (!next) getLocationCache().delete(LOCATION_CACHE_KEY);
          refresh({ force: true });
        },
        /** Manual city: wins over the switch until the user clears it. */
        selectCity(city) {
          const override = normalizeOverride({
            lat: city.lat,
            lon: city.lon,
            label: [city.name, city.region].filter(Boolean).join(' · '),
            city: city.name,
            region: city.region,
            source: 'manual'
          });
          persist({ override });
          refresh({ force: true });
        },
        async selectTyphoon(id) {
          if (!isNumber(id)) return;
          emit({ typhoonId: id });
          try {
            const detail = await loadTyphoonDetail(id, undefined, false);
            if (detail) emit({ typhoon: detail });
          } catch (error) {
            /* keep the previous track; the UI shows the cached one */
          }
        },
        /** Inject a fake alert to inspect the notice; cleared when acknowledged. */
        showDemoAlert(kind) {
          setDemoAlertKind(kind || 'typhoon-red');
          refresh({ force: true });
        },
        stopDemoAlert() {
          clearDemoAlert();
          refresh({ force: true });
        }
      };
    }

    /* ------------------------------------------------------------------ */
    /* React binding + notice bookkeeping                                 */
    /* ------------------------------------------------------------------ */

    /** Subscribe a component to the store; `getState` returns a stable object. */
    function useWeatherStore(store) {
      return React.useSyncExternalStore(store.subscribe, store.getState, store.getState);
    }

    /** Read the per-day notice bookkeeping (never throws). */
    function readNoticeState() {
      try {
        const raw = getPanelStorage().getItem(NOTICE_STORAGE_KEY);
        if (!raw) return null;
        const parsed = JSON.parse(raw);
        if (!parsed || typeof parsed !== 'object') return null;
        return {
          date: typeof parsed.date === 'string' ? parsed.date : '',
          signature: typeof parsed.signature === 'string' ? parsed.signature : '',
          confirmedAt: isNumber(parsed.confirmedAt) ? parsed.confirmedAt : null
        };
      } catch (error) {
        return null;
      }
    }

    function writeNoticeState(value) {
      try {
        getPanelStorage().setItem(NOTICE_STORAGE_KEY, JSON.stringify(value));
      } catch (error) {
        /* ignore */
      }
    }

    /** Today's date in the viewer's own time zone, `YYYY-MM-DD`. */
    function todayKey(date) {
      const now = date instanceof Date ? date : new Date();
      return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
    }

    /* ---- src/ui/styles.js ---- */
    /**
     * Stylesheets.
     *
     * Three parts, and why:
     * - `PANEL_BASE_CSS` holds the few primitives both surfaces use (buttons, chips,
     *   level badges, notes, links), so the startup notice can style itself without
     *   pulling in the whole panel sheet.
     * - `PANEL_BODY_CSS` holds the panel layout (cards, forecast, chart, typhoon).
     * - `MODAL_BODY_CSS` holds the notice dialog.
     *
     * Every selector is prefixed `dshw-`, chrome uses `--dsw-alias-*` tokens with
     * light fallbacks, and each sheet is a <style> element rendered by the component
     * that needs it — unmounting removes it, so nothing leaks into the host page.
     */

    const PANEL_BASE_CSS = `
    .dshw-btn{
      appearance:none;
      display:inline-flex;align-items:center;justify-content:center;gap:6px;
      height:30px;padding:0 10px;
      border-radius:8px;
      border:1px solid var(--dsw-alias-border-l1,#e5e7eb);
      background:var(--dsw-alias-bg-layer-1,#fff);
      color:var(--dsw-alias-label-primary,#1f2328);
      font:inherit;font-size:12px;line-height:18px;
      cursor:pointer;
      transition:background-color .15s ease,border-color .15s ease,color .15s ease;
    }
    .dshw-btn:hover{background:var(--dsw-alias-bg-layer-2,#f3f4f6);}
    .dshw-btn:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#4f6ef7);outline-offset:1px;}
    .dshw-btn[disabled]{opacity:.55;cursor:default;}
    .dshw-btn-icon{width:30px;padding:0;}
    /*
     * The confirm action deliberately does NOT put white text on the brand colour:
     * with a pale brand (custom light themes) that combination is unreadable, which
     * is exactly what happened with the notice's "知道了". A neutral surface plus
     * the theme's own label colour is legible in every theme, and a brand-tinted
     * ring keeps it looking like the primary action.
     */
    .dshw-btn-primary{
      background:var(--dsw-alias-bg-layer-1,#fff);
      border-color:var(--dsw-alias-border-l2,#d1d5db);
      color:var(--dsw-alias-label-primary,#1f2328);
      font-weight:600;
      box-shadow:0 0 0 1px color-mix(in srgb,var(--dsw-alias-brand-primary,#4f6ef7) 45%,transparent);
    }
    .dshw-btn-primary:hover{background:var(--dsw-alias-bg-layer-2,#f3f4f6);}
    .dshw-chip{
      display:inline-flex;align-items:center;gap:4px;
      border:1px solid var(--dsw-alias-border-l1,#e5e7eb);
      border-radius:999px;
      padding:1px 8px;
      background:var(--dsw-alias-bg-layer-1,#fff);
      color:var(--dsw-alias-label-secondary,#6b7280);
      font-size:11px;line-height:16px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
    }
    .dshw-chip-busy{color:var(--dsw-alias-label-secondary,#6b7280);border-color:color-mix(in srgb,var(--dsw-alias-brand-primary,#4f6ef7) 45%,transparent);}
    .dshw-chip-warn{color:var(--dsw-alias-state-warn-primary,#b45309);border-color:color-mix(in srgb,var(--dsw-alias-state-warn-primary,#b45309) 40%,transparent);}
    .dshw-chip-active{color:var(--dsw-alias-state-error-primary,#dc2626);border-color:color-mix(in srgb,var(--dsw-alias-state-error-primary,#dc2626) 40%,transparent);}
    .dshw-note{margin:0;font-size:11px;line-height:16px;color:var(--dsw-alias-label-tertiary,#8b93a1);}
    .dshw-link{font-size:11px;line-height:16px;color:var(--dsw-alias-label-primary,#1f2328);text-decoration:underline;text-underline-offset:2px;white-space:nowrap;}
    .dshw-link:hover{text-decoration:underline;}
    .dshw-level-chip{
      flex:none;display:inline-flex;align-items:center;justify-content:center;
      min-width:34px;height:18px;padding:0 6px;border-radius:5px;
      font-size:11px;line-height:18px;font-weight:600;color:#fff;
    }
    .dshw-level-blue{background:#3b82f6;}
    .dshw-level-yellow{background:#eab308;color:#3f2d00;}
    .dshw-level-orange{background:#f97316;}
    .dshw-level-red{background:#dc2626;}
    `;

    const PANEL_BODY_CSS = `
    .dshw-root{
      box-sizing:border-box;
      height:100%;
      min-height:0;
      overflow-y:auto;
      overflow-x:hidden;
      background:var(--dsw-alias-bg-base,#fff);
      color:var(--dsw-alias-label-primary,#1f2328);
      font-size:13px;
      line-height:20px;
      -webkit-font-smoothing:antialiased;
    }
    .dshw-root *,.dshw-root *::before,.dshw-root *::after{box-sizing:border-box;}
    .dshw-inner{
      display:flex;
      flex-direction:column;
      gap:16px;
      max-width:1040px;
      margin:0 auto;
      padding:calc(26px + var(--dsh-frame-top-clearance,0px)) 24px 36px;
    }
    .dshw-header{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;}
    .dshw-titles{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 240px;}
    .dshw-h1{margin:0;font-size:18px;line-height:26px;font-weight:600;letter-spacing:.01em;}
    .dshw-sub{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--dsw-alias-label-secondary,#6b7280);font-size:12px;line-height:18px;min-width:0;}
    .dshw-sub-strong{color:var(--dsw-alias-label-primary,#1f2328);font-weight:600;font-size:12px;}
    .dshw-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto;flex-wrap:wrap;}
    .dshw-card{
      border:1px solid var(--dsw-alias-border-l1,#e5e7eb);
      border-radius:12px;
      background:var(--dsw-alias-bg-layer-1,#fff);
      padding:16px;
    }
    .dshw-now{display:flex;flex-wrap:wrap;gap:20px;align-items:center;}
    .dshw-now-main{display:flex;align-items:center;gap:16px;min-width:230px;flex:1 1 250px;}
    .dshw-glyph-box{flex:none;display:flex;align-items:center;justify-content:center;}
    .dshw-now-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
    .dshw-temp{font-size:44px;line-height:46px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
    .dshw-cond{font-size:14px;line-height:20px;font-weight:600;}
    .dshw-muted{color:var(--dsw-alias-label-secondary,#6b7280);}
    .dshw-small{font-size:12px;line-height:18px;}
    .dshw-now-params{flex:2 1 360px;display:flex;flex-direction:column;gap:12px;min-width:0;}
    .dshw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:10px 18px;min-width:0;}
    .dshw-param{display:flex;flex-direction:column;gap:1px;min-width:0;}
    .dshw-param-k{font-size:11px;line-height:16px;color:var(--dsw-alias-label-secondary,#6b7280);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .dshw-param-v{font-size:13px;line-height:20px;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
    .dshw-sun-row{display:flex;flex-wrap:wrap;gap:8px 20px;padding-top:10px;border-top:1px solid var(--dsw-alias-border-l1,#eef0f3);}
    .dshw-sun-item{display:flex;align-items:baseline;gap:6px;min-width:0;}
    .dshw-section{display:flex;flex-direction:column;gap:8px;min-width:0;}
    .dshw-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 2px;}
    .dshw-section-title{margin:0;font-size:13px;line-height:20px;font-weight:600;}
    .dshw-forecast{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:10px;}
    .dshw-day{display:flex;flex-direction:column;gap:10px;padding:14px;}
    .dshw-day-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0;}
    .dshw-day-name{font-size:13px;line-height:20px;font-weight:600;}
    .dshw-day-date{font-size:11px;line-height:16px;color:var(--dsw-alias-label-tertiary,#8b93a1);white-space:nowrap;}
    .dshw-day-body{display:flex;align-items:center;gap:10px;min-width:0;}
    .dshw-day-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
    .dshw-day-cond{font-size:12px;line-height:18px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .dshw-day-temps{font-size:12px;line-height:18px;font-variant-numeric:tabular-nums;}
    .dshw-day-temps strong{font-size:15px;font-weight:600;}
    .dshw-day-meta{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;}
    .dshw-day-meta>div{display:flex;flex-direction:column;gap:0;min-width:0;}
    .dshw-day-meta dt{font-size:11px;line-height:16px;color:var(--dsw-alias-label-secondary,#6b7280);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .dshw-day-meta dd{margin:0;font-size:12px;line-height:18px;font-weight:600;font-variant-numeric:tabular-nums;}
    .dshw-hours{
      display:flex;gap:6px;
      overflow-x:auto;overflow-y:hidden;
      padding:2px 2px 8px;
      scrollbar-width:thin;
      scroll-snap-type:x proximity;
    }
    .dshw-hour{
      flex:0 0 auto;width:62px;
      display:flex;flex-direction:column;align-items:center;gap:3px;
      padding:8px 2px;border-radius:10px;
      scroll-snap-align:start;
    }
    .dshw-hour:hover{background:var(--dsw-alias-bg-layer-2,#f3f4f6);}
    .dshw-hour-time{font-size:11px;line-height:16px;color:var(--dsw-alias-label-secondary,#6b7280);font-variant-numeric:tabular-nums;white-space:nowrap;}
    .dshw-hour-temp{font-size:12px;line-height:18px;font-weight:600;font-variant-numeric:tabular-nums;}
    .dshw-hour-pop{font-size:10px;line-height:14px;color:var(--dsw-alias-label-secondary,#6b7280);font-variant-numeric:tabular-nums;}
    .dshw-tabs{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--dsw-alias-border-l1,#e5e7eb);border-radius:9px;background:var(--dsw-alias-bg-layer-1,#fff);align-self:flex-start;}
    .dshw-tab{
      appearance:none;border:0;background:transparent;color:var(--dsw-alias-label-secondary,#6b7280);
      font:inherit;font-size:12px;line-height:18px;padding:3px 12px;border-radius:7px;cursor:pointer;
    }
    .dshw-tab:hover{color:var(--dsw-alias-label-primary,#1f2328);}
    .dshw-tab:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#4f6ef7);outline-offset:1px;}
    .dshw-tab-active{background:var(--dsw-alias-bg-layer-2,#eef1f6);color:var(--dsw-alias-label-primary,#1f2328);font-weight:600;}
    .dshw-hint{
      display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
      border:1px solid color-mix(in srgb,var(--dsw-alias-state-warn-primary,#b45309) 35%,transparent);
      background:color-mix(in srgb,var(--dsw-alias-state-warn-primary,#b45309) 7%,transparent);
      border-radius:10px;padding:8px 12px;font-size:12px;line-height:18px;
    }
    .dshw-hint-text{min-width:0;color:var(--dsw-alias-label-primary,#1f2328);}
    .dshw-alerts{display:flex;flex-direction:column;gap:8px;padding:14px 16px;}
    .dshw-alerts-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
    .dshw-alerts-head-right{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;}
    .dshw-alerts-toggle{
      appearance:none;display:inline-flex;align-items:center;gap:4px;
      height:20px;padding:0 8px;border-radius:6px;
      border:1px solid var(--dsw-alias-border-l2,#d1d5db);
      background:var(--dsw-alias-bg-layer-1,#fff);
      color:var(--dsw-alias-label-primary,#1f2328);
      font:inherit;font-size:11px;line-height:18px;font-weight:600;cursor:pointer;white-space:nowrap;
    }
    .dshw-alerts-toggle:hover{background:var(--dsw-alias-bg-layer-2,#f3f4f6);}
    .dshw-alerts-toggle:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#4f6ef7);outline-offset:1px;}
    .dshw-caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;transition:transform .15s ease;}
    .dshw-caret-up{transform:rotate(180deg);}
    /* Expanded rows wrap instead of truncating, so every alert is fully readable. */
    .dshw-alerts-expanded .dshw-alert-row{align-items:flex-start;}
    .dshw-alerts-expanded .dshw-alert-text{white-space:normal;overflow:visible;text-overflow:clip;}
    .dshw-alert-list{display:flex;flex-direction:column;gap:4px;}
    .dshw-alert-row{
      display:flex;align-items:center;gap:8px;min-width:0;
      padding:6px 8px;border-radius:8px;text-decoration:none;color:inherit;
    }
    .dshw-alert-row:hover{background:var(--dsw-alias-bg-layer-2,#f3f4f6);}
    .dshw-alert-text{flex:1 1 0;min-width:0;font-size:12px;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .dshw-alert-scope{flex:none;font-size:11px;line-height:16px;color:var(--dsw-alias-label-tertiary,#8b93a1);}
    .dshw-alerts-foot{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
    .dshw-chart{display:flex;flex-direction:column;gap:2px;min-width:0;}
    .dshw-chart-svg{width:100%;height:126px;display:block;}
    .dshw-chart-legend{display:flex;flex-wrap:wrap;gap:12px;padding:0 2px;}
    .dshw-legend-item{display:inline-flex;align-items:center;gap:4px;font-size:11px;line-height:16px;color:var(--dsw-alias-label-secondary,#6b7280);}
    .dshw-legend-swatch{display:inline-block;width:10px;height:10px;border-radius:2px;}
    .dshw-legend-bar{background:var(--dsw-alias-brand-primary,#4f6ef7);opacity:.8;}
    .dshw-legend-line{background:transparent;border-top:2px dashed var(--dsw-alias-label-tertiary,#8b93a1);height:0;border-radius:0;}
    .dshw-legend-dot{display:inline-block;width:8px;height:8px;border-radius:50%;}
    .dshw-bar{fill:var(--dsw-alias-brand-primary,#4f6ef7);fill-opacity:.78;}
    .dshw-bar-group:hover .dshw-bar{fill-opacity:1;}
    .dshw-bar-empty{fill:var(--dsw-alias-label-tertiary,#8b93a1);fill-opacity:.18;}
    .dshw-chart-line{fill:none;stroke:var(--dsw-alias-label-tertiary,#8b93a1);stroke-width:1.4;stroke-dasharray:3 3;stroke-linejoin:round;}
    .dshw-chart-baseline{stroke:var(--dsw-alias-border-l1,#e5e7eb);stroke-width:1;}
    /* Axis labels are HTML positioned over the SVG (the plot itself is stretched, so
       text inside it would be distorted). */
    .dshw-chart-axis{position:relative;height:13px;margin-top:2px;}
    .dshw-chart-tick{
      position:absolute;top:0;transform:translateX(-50%);
      font-size:9px;line-height:13px;color:var(--dsw-alias-label-tertiary,#8b93a1);
      white-space:nowrap;font-variant-numeric:tabular-nums;
    }
    .dshw-chart-tick-start{transform:none;}
    .dshw-chart-tick-end{transform:translateX(-100%);}
    .dshw-chart-empty{padding:6px 2px;}
    .dshw-typhoon{display:flex;flex-direction:column;gap:12px;min-width:0;}
    .dshw-typhoon-head{display:flex;flex-direction:column;gap:10px;}
    .dshw-typhoon-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
    .dshw-typhoon-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15px;line-height:22px;}
    .dshw-typhoon-name strong{font-size:16px;font-weight:600;}
    .dshw-typhoon-select{display:inline-flex;align-items:center;gap:6px;}
    .dshw-select{
      height:28px;border-radius:7px;border:1px solid var(--dsw-alias-border-l2,#d1d5db);
      background:var(--dsw-alias-bg-base,#fff);color:inherit;font:inherit;font-size:12px;padding:0 6px;max-width:190px;
    }
    .dshw-typhoon-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px 16px;}
    .dshw-typhoon-map{position:relative;display:flex;flex-direction:column;gap:8px;padding:12px;}
    .dshw-typhoon-svg{width:100%;max-width:720px;margin:0 auto;height:auto;display:block;border-radius:8px;}
    .dshw-map-card{
      position:absolute;left:22px;top:22px;z-index:2;
      display:flex;flex-direction:column;gap:1px;
      max-width:min(56%,320px);
      padding:6px 9px;border-radius:8px;
      border:1px solid var(--dsw-alias-border-l2,#d1d5db);
      background:color-mix(in srgb,var(--dsw-alias-bg-overlay,#fff) 92%,transparent);
      box-shadow:0 6px 18px rgba(15,23,42,.16);
      font-size:11px;line-height:16px;
      color:var(--dsw-alias-label-primary,#1f2328);
      pointer-events:none;
    }
    .dshw-map-card-head{display:flex;align-items:center;gap:6px;min-width:0;}
    .dshw-map-card-badge{
      flex:none;display:inline-flex;align-items:center;justify-content:center;
      height:16px;padding:0 5px;border-radius:4px;color:#fff;
      font-size:10px;line-height:16px;font-weight:600;white-space:nowrap;
      text-shadow:0 1px 1px rgba(0,0,0,.35);
    }
    .dshw-map-card-time{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .dshw-map-card-chip{margin-left:auto;flex:none;font-size:10px;line-height:16px;color:var(--dsw-alias-label-tertiary,#8b93a1);white-space:nowrap;}
    .dshw-map-card-action{
      margin-left:auto;flex:none;pointer-events:auto;
      appearance:none;display:inline-flex;align-items:center;gap:3px;
      height:18px;padding:0 6px;border-radius:5px;
      border:1px solid color-mix(in srgb,var(--dsw-alias-brand-primary,#4f6ef7) 45%,transparent);
      background:var(--dsw-alias-bg-layer-1,#fff);
      color:var(--dsw-alias-label-primary,#1f2328);
      font:inherit;font-size:10px;line-height:16px;font-weight:600;cursor:pointer;white-space:nowrap;
    }
    .dshw-map-card-action:hover{background:var(--dsw-alias-bg-layer-2,#f3f4f6);}
    .dshw-map-card-action:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#4f6ef7);outline-offset:1px;}
    .dshw-map-card-line{color:var(--dsw-alias-label-secondary,#6b7280);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .dshw-map-card-pos{color:var(--dsw-alias-label-tertiary,#8b93a1);}
    .dshw-crosshair line{stroke:var(--dsw-alias-label-tertiary,#8b93a1);stroke-width:.8;stroke-dasharray:2 3;stroke-opacity:.55;}
    .dshw-hit{fill:transparent;pointer-events:all;}
    .dshw-map-bg{fill:var(--dsw-alias-bg-layer-2,#f3f4f6);fill-opacity:.55;}
    .dshw-land{fill:var(--dsw-alias-bg-layer-1,#fff);fill-opacity:.82;stroke:var(--dsw-alias-border-l2,#d1d5db);stroke-width:.7;stroke-linejoin:round;}
    .dshw-grid-line{stroke:var(--dsw-alias-border-l1,#e5e7eb);stroke-width:.7;stroke-dasharray:2 4;}
    .dshw-grid-label{fill:var(--dsw-alias-label-tertiary,#8b93a1);font-size:9px;}
    .dshw-ref-city circle{fill:var(--dsw-alias-label-tertiary,#8b93a1);}
    .dshw-ref-city text{fill:var(--dsw-alias-label-tertiary,#8b93a1);font-size:9px;}
    .dshw-wind-ring{fill-opacity:.05;stroke-opacity:.45;stroke-width:1;}
    .dshw-wind-ring-1{fill-opacity:.07;stroke-opacity:.6;}
    .dshw-wind-ring-2{fill-opacity:.09;stroke-opacity:.75;}
    .dshw-track-line{fill:none;stroke:var(--dsw-alias-label-secondary,#6b7280);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;}
    .dshw-forecast-line{fill:none;stroke:var(--dsw-alias-brand-primary,#4f6ef7);stroke-width:1.6;stroke-dasharray:4 4;stroke-linejoin:round;}
    .dshw-track-dot{cursor:pointer;}
    .dshw-track-dot:focus-visible{outline:none;}
    .dshw-track-dot:hover .dshw-track-point{stroke:var(--dsw-alias-brand-primary,#4f6ef7);stroke-width:2;}
    .dshw-track-point{stroke:var(--dsw-alias-bg-layer-1,#fff);stroke-width:1.2;}
    .dshw-track-selected-ring{fill:none;stroke:var(--dsw-alias-state-error-primary,#dc2626);stroke-width:1.6;stroke-dasharray:3 2.5;}
    .dshw-forecast-dot circle{fill:var(--dsw-alias-bg-layer-1,#fff);stroke-width:1.6;}
    .dshw-forecast-label{fill:var(--dsw-alias-label-tertiary,#8b93a1);font-size:8px;}
    .dshw-latest-ring{fill:none;stroke:var(--dsw-alias-state-error-primary,#dc2626);stroke-width:1;stroke-opacity:.6;stroke-dasharray:3 3;}
    .dshw-typhoon-legend{display:flex;flex-wrap:wrap;gap:10px;}
    .dshw-typhoon-detail{
      display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px 16px;
      border:1px solid var(--dsw-alias-border-l1,#e5e7eb);border-radius:12px;background:var(--dsw-alias-bg-layer-1,#fff);padding:12px 16px;
    }
    .dshw-typhoon-source{padding:0 2px;}
    .dshw-picker{display:flex;flex-direction:column;gap:10px;}
    .dshw-picker-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
    .dshw-picker-actions{display:flex;flex-wrap:wrap;gap:8px;}
    .dshw-switch-row{
      display:flex;align-items:center;justify-content:space-between;gap:12px;
      padding:10px 12px;border-radius:10px;
      border:1px solid var(--dsw-alias-border-l1,#e5e7eb);
      background:var(--dsw-alias-bg-layer-2,#f7f8fa);
    }
    .dshw-switch-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
    .dshw-switch-label{
      display:inline-flex;align-items:center;gap:6px;
      font-size:12px;line-height:18px;font-weight:600;color:var(--dsw-alias-label-primary,#1f2328);
    }
    .dshw-switch-control{display:inline-flex;align-items:center;gap:8px;flex:none;}
    .dshw-switch-state{
      font-size:11px;line-height:16px;font-weight:600;
      color:var(--dsw-alias-label-secondary,#6b7280);white-space:nowrap;
    }
    /* Contrast-safe on/off: the track uses the theme's strongest label colour, not
       the brand colour, so a pale brand cannot make both states look alike. */
    .dshw-switch{
      appearance:none;position:relative;flex:none;width:38px;height:22px;padding:0;
      border-radius:999px;border:1px solid var(--dsw-alias-border-l2,#d1d5db);
      background:var(--dsw-alias-bg-layer-1,#fff);cursor:pointer;
      transition:background-color .15s ease,border-color .15s ease;
    }
    .dshw-switch:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#4f6ef7);outline-offset:1px;}
    .dshw-switch-knob{
      position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
      background:var(--dsw-alias-label-tertiary,#8b93a1);
      transition:transform .15s ease,background-color .15s ease;
    }
    .dshw-switch-on{
      background:color-mix(in srgb,var(--dsw-alias-label-primary,#1f2328) 18%,transparent);
      border-color:var(--dsw-alias-label-primary,#1f2328);
    }
    /* The knob uses the theme's label colour, not --dsw-alias-bg-base: some themes
       do not define that token, so the #fff fallback made the knob white on a white
       track and the switch read as an empty pill. label-primary always contrasts with
       the panel behind it, so both the knob and the ring stay visible in any theme. */
    .dshw-switch-on .dshw-switch-knob{
      transform:translateX(16px);
      background:var(--dsw-alias-label-primary,#1f2328);
    }
    .dshw-switch-control[data-on="true"] .dshw-switch-state{color:var(--dsw-alias-label-primary,#1f2328);}
    @media (prefers-reduced-motion:reduce){
      .dshw-switch,.dshw-switch-knob{transition:none;}
    }
    .dshw-search{
      display:flex;align-items:center;gap:8px;
      border:1px solid var(--dsw-alias-border-l2,#d1d5db);
      border-radius:8px;
      padding:0 10px;height:34px;
      background:var(--dsw-alias-bg-base,#fff);
    }
    .dshw-search:focus-within{outline:2px solid var(--dsw-alias-brand-primary,#4f6ef7);outline-offset:1px;}
    .dshw-search-icon{display:inline-flex;color:var(--dsw-alias-label-tertiary,#8b93a1);flex:none;}
    .dshw-input{
      flex:1;min-width:0;height:32px;
      border:0;background:transparent;color:inherit;
      font:inherit;font-size:13px;line-height:20px;
      outline:none;
    }
    .dshw-input::placeholder{color:var(--dsw-alias-label-tertiary,#8b93a1);}
    .dshw-results{display:flex;flex-direction:column;gap:4px;max-height:240px;overflow-y:auto;}
    .dshw-result{
      appearance:none;display:flex;flex-direction:column;gap:1px;
      padding:7px 10px;border-radius:8px;
      border:1px solid transparent;background:transparent;color:inherit;
      font:inherit;text-align:left;cursor:pointer;min-width:0;
    }
    .dshw-result:hover,.dshw-result:focus-visible{background:var(--dsw-alias-bg-layer-2,#f3f4f6);outline:none;border-color:var(--dsw-alias-border-l1,#e5e7eb);}
    .dshw-result-name{font-size:13px;line-height:20px;font-weight:600;}
    .dshw-result-meta{font-size:11px;line-height:16px;color:var(--dsw-alias-label-secondary,#6b7280);}
    .dshw-alert{
      display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
      border:1px solid color-mix(in srgb,var(--dsw-alias-state-error-primary,#dc2626) 35%,transparent);
      background:color-mix(in srgb,var(--dsw-alias-state-error-primary,#dc2626) 8%,transparent);
      border-radius:10px;padding:10px 12px;
      font-size:12px;line-height:18px;
    }
    .dshw-loading{display:flex;flex-direction:column;gap:10px;}
    .dshw-skeleton{
      height:132px;border-radius:12px;
      background:linear-gradient(90deg,var(--dsw-alias-bg-layer-1,#fff) 0%,var(--dsw-alias-bg-layer-2,#f3f4f6) 50%,var(--dsw-alias-bg-layer-1,#fff) 100%);
      background-size:200% 100%;
      animation:dshw-shimmer 1.4s ease-in-out infinite;
      border:1px solid var(--dsw-alias-border-l1,#e5e7eb);
    }
    @keyframes dshw-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
    .dshw-footer{
      display:flex;flex-wrap:wrap;gap:2px 14px;
      padding:2px;
      font-size:11px;line-height:16px;
      color:var(--dsw-alias-label-tertiary,#8b93a1);
    }
    .dshw-footer a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
    .dshw-footer a:hover{color:var(--dsw-alias-label-primary,#1f2328);}
    .dshw-footer-feedback{margin-left:auto;}
    .dshw-footer-feedback a{font-weight:600;text-decoration:none;}

    /* ---- location mode: two explicit choices ---- */
    .dshw-segmented{display:flex;gap:6px;flex-wrap:wrap;}
    .dshw-seg{
      appearance:none;flex:1 1 0;min-width:0;
      display:inline-flex;align-items:center;justify-content:center;gap:6px;
      height:30px;padding:0 10px;border-radius:8px;
      border:1px solid var(--dsw-alias-border-l2,#d1d5db);
      background:var(--dsw-alias-bg-layer-1,#fff);
      color:var(--dsw-alias-label-secondary,#6b7280);
      font:inherit;font-size:12px;line-height:18px;font-weight:600;cursor:pointer;white-space:nowrap;
    }
    .dshw-seg:hover{background:var(--dsw-alias-bg-layer-2,#f3f4f6);}
    .dshw-seg:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#4f6ef7);outline-offset:1px;}
    .dshw-seg-active{
      color:var(--dsw-alias-label-primary,#1f2328);
      border-color:var(--dsw-alias-label-primary,#1f2328);
      box-shadow:inset 0 0 0 1px var(--dsw-alias-label-primary,#1f2328);
    }
    .dshw-picker-manual{color:var(--dsw-alias-label-primary,#1f2328);}

    /* ---- alerts: type icon + issue time ---- */
    .dshw-alert-icon{flex:none;font-size:13px;line-height:18px;}
    .dshw-alert-time{
      flex:none;font-size:10px;line-height:16px;
      color:var(--dsw-alias-label-tertiary,#8b93a1);white-space:nowrap;
      font-variant-numeric:tabular-nums;
    }

    /* ---- chart: right-hand probability scale ---- */
    .dshw-chart-plot{position:relative;padding-right:26px;}
    .dshw-chart-axis-y{
      position:absolute;top:0;right:0;width:24px;height:126px;
      font-size:9px;line-height:12px;color:var(--dsw-alias-label-tertiary,#8b93a1);
      font-variant-numeric:tabular-nums;pointer-events:none;
    }
    .dshw-chart-axis-y span{position:absolute;right:0;transform:translateY(-50%);}

    /* ---- typhoon: no active system ---- */
    .dshw-typhoon-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 18px;text-align:center;}
    .dshw-typhoon-empty-icon{font-size:26px;line-height:1;filter:grayscale(.15);}
    .dshw-typhoon-empty-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:4px;}
    .dshw-typhoon-nonebar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
    .dshw-legend-group{font-weight:600;color:var(--dsw-alias-label-secondary,#6b7280);}
    .dshw-legend-sep{width:1px;height:10px;background:var(--dsw-alias-border-l1,#e5e7eb);}
    .dshw-legend-ring{
      display:inline-block;width:12px;height:8px;border-radius:50%;
      border:1.5px solid transparent;background:transparent;
    }

    /* ---- compact segmented control (range / date switches inside cards) ---- */
    .dshw-segmented-compact .dshw-seg{flex:0 0 auto;height:24px;padding:0 9px;font-size:11px;line-height:16px;border-radius:7px;}

    /* ---- history temperature curve ---- */
    .dshw-history{display:flex;flex-direction:column;gap:8px;padding:14px 16px;}
    .dshw-history-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
    /* 坐标：SVG 高度固定 160px → y 用像素落位，x 用百分比；轴标签 / 圆点都是 HTML，比例与数据严格一致。 */
    .dshw-history-canvas{position:relative;height:176px;}
    .dshw-history-axis-y{position:absolute;left:0;top:0;width:38px;height:160px;pointer-events:none;}
    .dshw-history-axis-y span{
      position:absolute;right:6px;transform:translateY(-50%);
      font-size:10px;line-height:12px;color:var(--dsw-alias-label-tertiary,#8b93a1);
      font-variant-numeric:tabular-nums;white-space:nowrap;
    }
    .dshw-history-plot{position:relative;margin-left:40px;margin-right:4px;height:160px;}
    .dshw-history-svg{width:100%;height:160px;display:block;overflow:visible;}
    .dshw-history-grid{stroke:var(--dsw-alias-border-l1,#e5e7eb);stroke-width:1;stroke-dasharray:2 4;}
    .dshw-history-axis-x{position:absolute;left:0;right:0;top:162px;height:14px;font-size:9px;line-height:14px;color:var(--dsw-alias-label-tertiary,#8b93a1);}
    .dshw-history-axis-x span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;font-variant-numeric:tabular-nums;}
    .dshw-history-tick-start{transform:none;}
    .dshw-history-tick-end{transform:translateX(-100%);}
    .dshw-history-dot{
      position:absolute;width:6px;height:6px;border-radius:50%;transform:translate(-50%,-50%);
      box-shadow:0 0 0 1.5px var(--dsw-alias-bg-layer-1,#fff);
    }
    .dshw-history-dot-max{background:#ef4444;}
    .dshw-history-dot-min{background:#38bdf8;}
    .dshw-history-band{fill:var(--dsw-alias-brand-primary,#4f6ef7);fill-opacity:.12;}
    .dshw-history-max{fill:none;stroke:#ef4444;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;}
    .dshw-history-min{fill:none;stroke:#38bdf8;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;}
    .dshw-history-axis-x{display:flex;justify-content:space-between;font-size:9px;line-height:13px;color:var(--dsw-alias-label-tertiary,#8b93a1);font-variant-numeric:tabular-nums;}
    .dshw-history-skeleton{height:148px;}
    .dshw-history-foot{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;}
    .dshw-history-legend{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--dsw-alias-label-secondary,#6b7280);}
    .dshw-legend-max{background:#ef4444;}
    .dshw-legend-min{background:#38bdf8;}

    /* ---- pro charts ---- */
    .dshw-pro{display:flex;flex-direction:column;gap:10px;min-width:0;}
    .dshw-pro-source{padding:0 2px;}
    .dshw-tabs{flex-wrap:wrap;}

    /* ---- satellite ---- */
    .dshw-sat{display:flex;flex-direction:column;gap:10px;padding:14px 16px;}
    .dshw-sat-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;}
    .dshw-sat-controls{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;}
    .dshw-sat-field{display:flex;flex-direction:column;gap:3px;min-width:0;}

    /* media frame（雷达 / 卫星共用）*/
    /* ---- radar ---- */
    .dshw-radar{display:flex;flex-direction:column;gap:10px;padding:14px 16px;}
    .dshw-radar-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;}
    .dshw-radar-controls{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;}
    .dshw-radar-field{display:flex;flex-direction:column;gap:3px;min-width:0;}
    .dshw-radar-select{
      height:28px;padding:0 8px;border-radius:7px;
      border:1px solid var(--dsw-alias-border-l2,#d1d5db);
      background:var(--dsw-alias-bg-layer-1,#fff);
      color:var(--dsw-alias-label-primary,#1f2328);
      font:inherit;font-size:12px;line-height:18px;
    }
    .dshw-radar-time{display:flex;flex-direction:column;gap:3px;}
    .dshw-radar-clock{font-size:13px;line-height:18px;font-variant-numeric:tabular-nums;}
    .dshw-radar-scrub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
    .dshw-radar-range{flex:1 1 140px;min-width:110px;accent-color:var(--dsw-alias-label-primary,#1f2328);}
    .dshw-media-frame{
      position:relative;display:flex;align-items:center;justify-content:center;
      /* Fixed viewport: the official products are ~825x739, which at full panel width
         is taller than a short window can show. A fixed, viewport-relative box with a
         contained image always shows the whole product — and stops the layout from
         jumping while frames play. */
      height:clamp(220px,calc(100vh - 300px),440px);
      border-radius:10px;overflow:hidden;
      border:1px solid var(--dsw-alias-border-l1,#e5e7eb);
      background:var(--dsw-alias-bg-layer-2,#f7f8fa);
    }
    .dshw-media-link{appearance:none;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:zoom-in;}
    .dshw-zoom{
      position:fixed;inset:0;z-index:2147483000;
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
      padding:24px;background:rgba(6,10,18,.86);
    }
    .dshw-zoom-img{
      max-width:min(92vw,1600px);max-height:76vh;
      border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5);background:#fff;
    }
    .dshw-zoom-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;}
    .dshw-zoom-meta{font-size:12px;line-height:16px;color:#e5e7eb;}
    .dshw-zoom .dshw-btn{background:#fff;color:#1f2328;border-color:rgba(255,255,255,.5);}
    .dshw-zoom .dshw-btn:hover{background:#f3f4f6;}
    .dshw-media-img{
      display:block;max-width:100%;max-height:100%;width:auto;height:auto;
      object-fit:contain;
    }
    .dshw-media-skeleton{
      position:absolute;inset:0;
      background:linear-gradient(100deg,transparent 20%,var(--dsw-alias-bg-layer-1,#fff) 50%,transparent 80%);
      background-size:200% 100%;animation:dshw-shimmer 1.6s linear infinite;
    }
    .dshw-media-broken{position:relative;z-index:1;}
    .dshw-radar-foot{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;}
    @media (max-width:720px){
      .dshw-inner{padding-left:14px;padding-right:14px;}
      .dshw-forecast{grid-template-columns:minmax(0,1fr);}
      .dshw-temp{font-size:38px;line-height:40px;}
      .dshw-now-main{min-width:0;}
    }
    @media (prefers-reduced-motion:reduce){
      .dshw-skeleton{animation:none;}
      .dshw-btn{transition:none;}
    }
    `;

    const MODAL_BODY_CSS = `
    .dshw-modal-root{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;pointer-events:auto;}
    .dshw-modal-backdrop{position:absolute;inset:0;background:rgba(12,16,24,.42);}
    .dshw-modal{
      position:relative;
      width:min(480px,100%);
      max-height:min(80vh,560px);
      display:flex;flex-direction:column;
      border-radius:14px;
      border:1px solid var(--dsw-alias-border-l2,#e5e7eb);
      background:var(--dsw-alias-bg-overlay,#fff);
      color:var(--dsw-alias-label-primary,#1f2328);
      box-shadow:0 18px 48px rgba(15,23,42,.28);
      overflow:hidden;
      font-size:13px;line-height:20px;
    }
    .dshw-modal *{box-sizing:border-box;}
    .dshw-modal-head{display:flex;align-items:center;gap:12px;padding:16px 16px 12px;}
    .dshw-modal-icon{flex:none;display:flex;align-items:center;justify-content:center;}
    .dshw-modal-titles{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto;}
    .dshw-modal-title{margin:0;font-size:15px;line-height:22px;font-weight:600;}
    .dshw-modal-body{padding:0 16px 4px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;}
    .dshw-notice-block{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--dsw-alias-border-l1,#eef0f3);padding-top:10px;}
    .dshw-notice-block:first-child{border-top:0;padding-top:0;}
    .dshw-notice-heading{margin:0;display:flex;align-items:center;gap:8px;font-size:13px;line-height:20px;font-weight:600;}
    .dshw-notice-text{margin:0;font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary,#6b7280);}
    .dshw-notice-list{display:flex;flex-direction:column;gap:4px;}
    .dshw-notice-alert{
      display:flex;align-items:center;gap:8px;min-width:0;
      padding:5px 0;text-decoration:none;color:inherit;font-size:12px;line-height:18px;
    }
    .dshw-notice-alert:hover .dshw-notice-alert-text{text-decoration:underline;}
    .dshw-notice-alert-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .dshw-modal-foot{
      display:flex;align-items:center;justify-content:space-between;gap:10px;
      padding:14px 16px 16px;border-top:1px solid var(--dsw-alias-border-l1,#eef0f3);
    }
    @media (max-width:520px){
      .dshw-modal-root{padding:12px;align-items:flex-end;}
      .dshw-modal{width:100%;max-height:86vh;}
    }
    `;

    /** Panel sheet: primitives + layout. */
    const PANEL_CSS = PANEL_BASE_CSS + PANEL_BODY_CSS;

    /** Notice sheet: primitives + dialog only. */
    const WEATHER_MODAL_CSS = PANEL_BASE_CSS + MODAL_BODY_CSS;

    /* ---- src/ui/icons.js ---- */
    /**
     * Inline SVG artwork for the panel.
     *
     * Two rules keep these safe next to other plugins:
     * - UI glyphs (`RefreshGlyph`, `PanelNavIcon`, …) inherit `currentColor`, so
     *   they follow the host theme without any token guessing.
     * - Weather artwork uses its own palette on purpose: it is illustration, not
     *   chrome, and it must read the same in light and dark themes.
     */

    const WEATHER_PALETTE = {
      sun: '#f6b93b',
      sunCore: '#ffd166',
      moon: '#c7d3e3',
      moonCore: '#eef3fa',
      cloud: '#91a4bf',
      cloudSoft: '#c3d0e2',
      cloudDark: '#6f8199',
      rain: '#4f9cf9',
      snow: '#dbe7f6',
      bolt: '#f5b942',
      fog: '#93a3b8'
    };

    function svgRoot(extra) {
      return {
        viewBox: '0 0 64 64',
        width: extra && extra.size ? extra.size : 64,
        height: extra && extra.size ? extra.size : 64,
        role: 'img',
        focusable: 'false',
        style: { display: 'block', flex: 'none' }
      };
    }

    function cloudGroup(color, transform) {
      return h('g', transform ? { transform } : null,
        h('circle', { cx: 24, cy: 36, r: 9, fill: color }),
        h('circle', { cx: 34, cy: 32, r: 11, fill: color }),
        h('circle', { cx: 42, cy: 38, r: 8, fill: color }),
        h('rect', { x: 18, y: 39, width: 28, height: 9, rx: 4.5, fill: color })
      );
    }

    function sunRays(cx, cy, inner, outer, color) {
      const rays = [];
      for (let index = 0; index < 8; index += 1) {
        const angle = (Math.PI / 4) * index;
        const x1 = cx + Math.cos(angle) * inner;
        const y1 = cy + Math.sin(angle) * inner;
        const x2 = cx + Math.cos(angle) * outer;
        const y2 = cy + Math.sin(angle) * outer;
        rays.push(h('path', {
          key: `ray-${index}`,
          d: `M${x1.toFixed(2)} ${y1.toFixed(2)}L${x2.toFixed(2)} ${y2.toFixed(2)}`,
          stroke: color,
          strokeWidth: 3.4,
          strokeLinecap: 'round'
        }));
      }
      return h('g', null, rays);
    }

    function rainLines(color, count, slanted) {
      const lines = [];
      for (let index = 0; index < count; index += 1) {
        const x = 24 + index * 8;
        const drift = slanted ? 2.5 : 0;
        lines.push(h('path', {
          key: `drop-${index}`,
          d: `M${x} 50l-${drift} ${slanted ? 8 : 6}`,
          stroke: color,
          strokeWidth: 3.2,
          strokeLinecap: 'round'
        }));
      }
      return h('g', null, lines);
    }

    function snowFlakes(color, count) {
      const flakes = [];
      for (let index = 0; index < count; index += 1) {
        const x = 24 + index * 8;
        flakes.push(h('g', { key: `flake-${index}`, stroke: color, strokeWidth: 2.4, strokeLinecap: 'round' },
          h('path', { d: `M${x} 50v7` }),
          h('path', { d: `M${x - 2.6} 51.8l5.2 3.4` }),
          h('path', { d: `M${x + 2.6} 51.8l-5.2 3.4` })
        ));
      }
      return h('g', null, flakes);
    }

    function fogLines(color) {
      return h('g', { stroke: color, strokeWidth: 3.2, strokeLinecap: 'round' },
        h('path', { d: 'M20 50h24' }),
        h('path', { d: 'M24 56h20' })
      );
    }

    function boltShape(color) {
      return h('path', {
        d: 'M33 46l-7 12h5.2l-2.6 8 10.4-13h-5.4l3.4-7z',
        fill: color,
        stroke: color,
        strokeWidth: 1.4,
        strokeLinejoin: 'round'
      });
    }

    /** Weather artwork for one WMO code. */
    function WeatherGlyph(props) {
      const size = props && Number.isFinite(props.size) ? props.size : 64;
      const icon = weatherIconFor(props && props.code, props && props.isDay);
      const root = svgRoot({ size });
      const palette = WEATHER_PALETTE;
      let body = null;

      switch (icon) {
        case 'sun':
          body = h('g', null,
            sunRays(32, 32, 17, 25, palette.sun),
            h('circle', { cx: 32, cy: 32, r: 12.5, fill: palette.sunCore }),
            h('circle', { cx: 32, cy: 32, r: 9.5, fill: palette.sun, opacity: 0.55 })
          );
          break;
        case 'moon':
          body = h('g', null,
            h('path', {
              d: 'M37.5 12.5a19 19 0 1 0 12 27.5A15.5 15.5 0 0 1 37.5 12.5Z',
              fill: palette.moon
            }),
            h('path', {
              d: 'M33.5 21.5a12 12 0 0 1 8.5 17.4A13.5 13.5 0 0 1 33.5 21.5Z',
              fill: palette.moonCore,
              opacity: 0.55
            })
          );
          break;
        case 'mostly-clear':
          body = h('g', null,
            h('g', { transform: 'translate(9 -7) scale(0.78)' },
              sunRays(32, 32, 17, 25, palette.sun),
              h('circle', { cx: 32, cy: 32, r: 12.5, fill: palette.sunCore })
            ),
            cloudGroup(palette.cloudSoft)
          );
          break;
        case 'partly-cloudy':
          body = h('g', null,
            h('g', { transform: 'translate(13 -9) scale(0.7)' },
              sunRays(32, 32, 17, 24, palette.sun),
              h('circle', { cx: 32, cy: 32, r: 12.5, fill: palette.sunCore })
            ),
            cloudGroup(palette.cloud)
          );
          break;
        case 'overcast':
          body = h('g', null,
            h('g', { transform: 'translate(-4 -8) scale(0.82)' }, cloudGroup(palette.cloudSoft)),
            cloudGroup(palette.cloudDark)
          );
          break;
        case 'fog':
          body = h('g', null, cloudGroup(palette.cloudSoft), fogLines(palette.fog));
          break;
        case 'drizzle':
          body = h('g', null, cloudGroup(palette.cloudSoft), rainLines(palette.rain, 2, false));
          break;
        case 'rain':
          body = h('g', null, cloudGroup(palette.cloudDark), rainLines(palette.rain, 3, false));
          break;
        case 'showers':
          body = h('g', null, cloudGroup(palette.cloud), rainLines(palette.rain, 3, true));
          break;
        case 'snow':
          body = h('g', null, cloudGroup(palette.cloudSoft), snowFlakes(palette.snow, 3));
          break;
        case 'sleet':
          body = h('g', null,
            cloudGroup(palette.cloudSoft),
            h('g', { stroke: palette.snow, strokeWidth: 3, strokeLinecap: 'round' },
              h('path', { d: 'M24 50l-2 7' })
            ),
            h('circle', { cx: 36, cy: 54, r: 2.4, fill: palette.snow }),
            h('circle', { cx: 44, cy: 51, r: 2.4, fill: palette.snow })
          );
          break;
        case 'thunder':
          body = h('g', null, cloudGroup(palette.cloudDark), boltShape(palette.bolt));
          break;
        default:
          body = h('g', null, cloudGroup(palette.cloudSoft));
      }

      return h('svg', { ...root, 'aria-hidden': 'true' }, body);
    }

    /** Sidebar entry icon: 16 px stroke artwork in the host's own colour. */
    function PanelNavIcon(props) {
      const size = props && Number.isFinite(props.size) ? props.size : 16;
      return h('svg', {
        viewBox: '0 0 16 16',
        width: size,
        height: size,
        fill: 'none',
        stroke: 'currentColor',
        strokeWidth: 1.3,
        strokeLinecap: 'round',
        strokeLinejoin: 'round',
        'aria-hidden': 'true',
        focusable: 'false',
        style: { display: 'block' }
      },
        h('circle', { cx: 5.4, cy: 5.4, r: 2.15 }),
        h('path', { d: 'M5.4 1.6v.8M1.6 5.4h.8M2.7 2.7l.6.6M8.1 2.7l-.6.6' }),
        h('path', { d: 'M5.6 13.2h5.1a2.35 2.35 0 0 0 .25-4.7 3.1 3.1 0 0 0-5.9-.95A2.2 2.2 0 0 0 5.6 13.2Z' })
      );
    }

    function RefreshGlyph(props) {
      const size = props && Number.isFinite(props.size) ? props.size : 15;
      return h('svg', {
        viewBox: '0 0 16 16', width: size, height: size, fill: 'none',
        stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round',
        'aria-hidden': 'true', focusable: 'false', style: { display: 'block' }
      },
        h('path', { d: 'M13 8a5 5 0 1 1-1.6-3.7' }),
        h('path', { d: 'M13 3.4V7h-3.6' })
      );
    }

    function PinGlyph(props) {
      const size = props && Number.isFinite(props.size) ? props.size : 15;
      return h('svg', {
        viewBox: '0 0 16 16', width: size, height: size, fill: 'none',
        stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round',
        'aria-hidden': 'true', focusable: 'false', style: { display: 'block' }
      },
        h('path', { d: 'M8 14s4.6-4.1 4.6-7.4A4.6 4.6 0 0 0 8 2a4.6 4.6 0 0 0-4.6 4.6C3.4 9.9 8 14 8 14Z' }),
        h('circle', { cx: 8, cy: 6.5, r: 1.7 })
      );
    }

    function GpsGlyph(props) {
      const size = props && Number.isFinite(props.size) ? props.size : 15;
      return h('svg', {
        viewBox: '0 0 16 16', width: size, height: size, fill: 'none',
        stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round',
        'aria-hidden': 'true', focusable: 'false', style: { display: 'block' }
      },
        h('circle', { cx: 8, cy: 8, r: 2.2 }),
        h('circle', { cx: 8, cy: 8, r: 5.4 }),
        h('path', { d: 'M8 1v2M8 13v2M1 8h2M13 8h2' })
      );
    }

    function SearchGlyph(props) {
      const size = props && Number.isFinite(props.size) ? props.size : 15;
      return h('svg', {
        viewBox: '0 0 16 16', width: size, height: size, fill: 'none',
        stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round',
        'aria-hidden': 'true', focusable: 'false', style: { display: 'block' }
      },
        h('circle', { cx: 7, cy: 7, r: 4.2 }),
        h('path', { d: 'M10.2 10.2L13.5 13.5' })
      );
    }

    function CloseGlyph(props) {
      const size = props && Number.isFinite(props.size) ? props.size : 15;
      return h('svg', {
        viewBox: '0 0 16 16', width: size, height: size, fill: 'none',
        stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round',
        'aria-hidden': 'true', focusable: 'false', style: { display: 'block' }
      },
        h('path', { d: 'M4 4l8 8M12 4l-8 8' })
      );
    }

    /* ---- src/ui/chart.js ---- */
    /**
     * Hourly precipitation chart (inline SVG, no chart library).
     *
     * Bars = precipitation amount, dashed line = precipitation probability. Both are
     * scaled independently so a 0.4 mm drizzle in a 5% chance hour is still visible.
     * Every bar carries a <title> tooltip, which needs no JS and works on hover.
     */

    const CHART_WIDTH = 660;
    const CHART_HEIGHT = 126;
    const CHART_PAD_TOP = 12;
    const CHART_PAD_BOTTOM = 8;
    const CHART_PAD_X = 4;

    function PrecipitationChart(props) {
      const { hours, units, t } = props;
      const list = Array.isArray(hours) ? hours : [];
      if (list.length === 0) return null;

      const hasRain = list.some(hour => (isNumber(hour.precipitation) && hour.precipitation > 0)
        || (isNumber(hour.precipitationProbability) && hour.precipitationProbability >= 10));
      if (!hasRain) return h('p', { className: 'dshw-note dshw-chart-empty' }, t('chart.empty'));

      const plotWidth = CHART_WIDTH - CHART_PAD_X * 2;
      const plotHeight = CHART_HEIGHT - CHART_PAD_TOP - CHART_PAD_BOTTOM;
      const slot = plotWidth / list.length;
      const barWidth = Math.max(2, Math.min(14, slot * 0.56));
      const amounts = list.map(hour => (isNumber(hour.precipitation) ? hour.precipitation : 0));
      const maxAmount = Math.max(0.5, ...amounts);

      const xFor = index => CHART_PAD_X + slot * (index + 0.5);
      const yForAmount = amount => CHART_PAD_TOP + plotHeight * (1 - Math.min(1, amount / maxAmount));
      const yForChance = chance => CHART_PAD_TOP + plotHeight * (1 - Math.max(0, Math.min(100, chance)) / 100);

      const bars = list.map((hour, index) => {
        const amount = amounts[index];
        const chance = isNumber(hour.precipitationProbability) ? hour.precipitationProbability : 0;
        const x = xFor(index);
        const y = yForAmount(amount);
        const height = Math.max(amount > 0 ? 2 : 1, CHART_PAD_TOP + plotHeight - y);
        const label = [
          formatClock(hour.time),
          `${t('chart.amount')} ${formatPrecipitation(amount, units)}`,
          `${t('chart.chance')} ${Math.round(chance)}%`
        ].join(' · ');
        return h('g', { key: hour.time || index, className: 'dshw-bar-group' },
          h('title', null, label),
          h('rect', {
            x: x - barWidth / 2,
            y: amount > 0 ? y : CHART_PAD_TOP + plotHeight - 1,
            width: barWidth,
            height,
            rx: Math.min(2, barWidth / 2),
            className: amount > 0 ? 'dshw-bar' : 'dshw-bar-empty'
          })
        );
      });

      const probabilityPoints = list
        .map((hour, index) => {
          const chance = isNumber(hour.precipitationProbability) ? hour.precipitationProbability : 0;
          return `${xFor(index).toFixed(1)},${yForChance(chance).toFixed(1)}`;
        })
        .join(' ');

      // Axis labels are HTML, not SVG text. The plot keeps preserveAspectRatio="none"
      // so the bars can stretch with the panel width; text inside that box would be
      // stretched with them (it came out squashed and unevenly spaced).
      const axisTicks = list.map((hour, index) => {
        if (index % 3 !== 0) return null;
        const pct = (xFor(index) / CHART_WIDTH) * 100;
        const align = pct < 4 ? 'start' : (pct > 86 ? 'end' : 'middle');
        return h('span', {
          key: `tick-${index}`,
          className: `dshw-chart-tick dshw-chart-tick-${align}`,
          style: { left: `${pct.toFixed(2)}%` }
        }, index === 0 ? t('hourly.now') : formatClock(hour.time));
      });

      const baseline = h('line', {
        x1: CHART_PAD_X,
        x2: CHART_WIDTH - CHART_PAD_X,
        y1: CHART_PAD_TOP + plotHeight,
        y2: CHART_PAD_TOP + plotHeight,
        className: 'dshw-chart-baseline'
      });

      // Right-hand scale for the dashed probability line: without it the curve had no
      // readable values. Percentages map exactly onto the line's own y positions.
      const chanceTicks = [100, 50, 0].map(value => h('span', {
        key: `chance-${value}`,
        style: { top: `${((yForChance(value) / CHART_HEIGHT) * 100).toFixed(2)}%` }
      }, `${value}%`));

      return h('div', { className: 'dshw-chart' },
        h('div', { className: 'dshw-chart-legend' },
          h('span', { className: 'dshw-legend-item' },
            h('i', { className: 'dshw-legend-swatch dshw-legend-bar' }),
            `${t('chart.amount')} (${units === 'imperial' ? 'in' : 'mm'})`
          ),
          h('span', { className: 'dshw-legend-item' },
            h('i', { className: 'dshw-legend-swatch dshw-legend-line' }),
            `${t('chart.chance')} (%)`
          )
        ),
        h('div', { className: 'dshw-chart-plot' },
          h('svg', {
            className: 'dshw-chart-svg',
            viewBox: `0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`,
            preserveAspectRatio: 'none',
            role: 'img',
            'aria-label': t('chart.title')
          },
            baseline,
            bars,
            h('polyline', { className: 'dshw-chart-line', points: probabilityPoints })
          ),
          h('div', { className: 'dshw-chart-axis', 'aria-hidden': 'true' }, axisTicks),
          h('div', { className: 'dshw-chart-axis-y', 'aria-hidden': 'true' }, chanceTicks)
        )
      );
    }

    /* ---- src/ui/basemap-data.js ---- */
    /*!
     * Offline land mask for the typhoon chart — generated, do not edit by hand.
     * Source: Natural Earth 50m land (public domain).
     * https://www.naturalearthdata.com/
     * Region: 90..180E, -12..48N
     * Simplified with RDP tolerance 0.05°, rounded to 2 decimal(s).
     * Ring format: [west, south, east, north, lon0, lat0, lon1, lat1, ...]
     */

    const BASEMAP_META = {
      source: 'Natural Earth',
      scale: '50m',
      license: 'Public domain',
      west: 90,
      south: -12,
      east: 180,
      north: 48,
      tolerance: 0.05,
      decimals: 2,
      rings: 124
    };

    const BASEMAP_LAND = [
      [156.51,-7.92,156.81,-7.57,156.69,-7.92,156.51,-7.71,156.56,-7.57,156.81,-7.72],
      [125.49,9.91,125.69,10.44,125.69,9.91,125.49,10.12,125.52,10.31,125.67,10.44],
      [147.78,-5.83,148.05,-5.49,148.03,-5.83,147.78,-5.63,147.79,-5.49,148.05,-5.61],
      [150.11,-9.49,150.35,-9.21,150.35,-9.49,150.11,-9.36,150.21,-9.21,150.32,-9.26],
      [135.47,-1.89,136.89,-1.59,135.47,-1.59,136.89,-1.8,136.23,-1.89,135.49,-1.67],
      [138.56,-8.39,138.9,-8.17,138.9,-8.39,138.59,-8.37,138.56,-8.31,138.8,-8.17],
      [130.67,-1.32,131.03,-0.92,131,-1.32,130.78,-1.26,130.67,-0.96,131.03,-0.92],
      [122.97,-4.23,123.24,-4,123.24,-4.11,123.08,-4.23,122.97,-4.03,123.21,-4],
      [125.39,-1.94,126.33,-1.79,126.02,-1.79,126.33,-1.82,125.48,-1.94,125.39,-1.84],
      [109.46,-1.28,109.74,-0.99,109.71,-1.18,109.46,-1.28,109.48,-0.99,109.74,-1.04],
      [102.26,0.99,102.44,1.4,102.43,0.99,102.28,1.08,102.26,1.4,102.44,1.23],
      [102.02,1.33,102.5,1.61,102.49,1.46,102.5,1.33,102.08,1.5,102.02,1.61],
      [102.7,0.87,103.17,1.16,103.17,0.87,102.7,1.05,102.73,1.16,103,1.07],
      [104.26,-0.66,104.59,-0.33,104.47,-0.33,104.59,-0.47,104.36,-0.66,104.26,-0.46],
      [121.21,31.49,121.86,31.81,121.86,31.49,121.52,31.55,121.21,31.81,121.46,31.76],
      [159.99,-11.81,160.58,-11.49,160.58,-11.8,160.44,-11.81,160.27,-11.66,160,-11.58,159.99,-11.49],
      [156.96,-8.12,157.19,-7.87,157.17,-8.11,157.04,-8.12,156.96,-8.01,157.02,-7.87,157.19,-7.94],
      [121.83,6.42,122.32,6.74,122.09,6.43,121.96,6.42,121.83,6.66,122.06,6.74,122.32,6.6],
      [121.83,13.2,122.11,13.57,121.91,13.54,122.11,13.46,122,13.2,121.83,13.33,121.87,13.57],
      [121.92,12.11,122.15,12.65,122.09,12.35,122.01,12.11,121.92,12.33,122,12.6,122.15,12.65],
      [149.96,-2.66,150.44,-2.38,150.44,-2.66,150.17,-2.66,149.96,-2.47,150.23,-2.38,150.43,-2.47],
      [150.78,-10.19,151.3,-9.71,151.08,-10.02,151.3,-9.96,151.23,-10.19,150.96,-10.09,150.78,-9.71],
      [129.74,-2.05,130.42,-1.69,130.35,-1.69,130.42,-1.97,130.25,-2.05,129.89,-1.99,129.74,-1.87],
      [127.93,-3.77,128.33,-3.52,128.28,-3.67,127.98,-3.77,127.93,-3.7,128.02,-3.6,128.33,-3.52],
      [121.81,-5.46,122.04,-5.07,122.04,-5.44,121.98,-5.46,121.81,-5.26,121.91,-5.07,122.04,-5.16],
      [122.83,-10.91,123.42,-10.47,122.95,-10.91,122.83,-10.9,122.85,-10.76,123.37,-10.47,123.42,-10.65],
      [123.93,-8.53,124.3,-8.2,124.29,-8.33,124.15,-8.53,123.93,-8.45,124.24,-8.2,124.3,-8.23],
      [117.63,4,117.92,4.25,117.92,4.05,117.74,4,117.63,4.12,117.66,4.25,117.88,4.19],
      [116.06,-4.05,116.3,-3.25,116.3,-3.87,116.09,-4.05,116.06,-4.01,116.06,-3.46,116.27,-3.25],
      [102.49,0.75,103.03,1.13,103.03,0.75,102.49,0.86,102.51,1.09,102.55,1.13,103,0.86],
      [100.2,-3.33,100.47,-2.79,100.43,-3.18,100.47,-3.33,100.2,-2.99,100.2,-2.79,100.45,-3],
      [149.45,45.59,150.55,46.21,149.69,45.64,149.45,45.59,149.96,46.02,150.35,46.21,150.55,46.21],
      [129.16,28.13,129.71,28.52,129.45,28.21,129.37,28.13,129.16,28.25,129.69,28.52,129.71,28.43],
      [129.96,32.23,130.2,32.54,130.08,32.23,129.96,32.24,130.01,32.52,130.17,32.54,130.2,32.34],
      [134.67,34.2,135,34.54,134.93,34.29,134.82,34.2,134.67,34.29,135,34.54,134.91,34.4],
      [92.35,10.55,92.57,10.9,92.5,10.55,92.37,10.55,92.35,10.75,92.51,10.9,92.57,10.7],
      [119.87,12.01,120.31,12.3,120.1,12.17,120.23,12.22,120.31,12.01,120.01,12.01,119.87,12.2,119.89,12.3],
      [124.04,13.53,124.42,14.08,124.35,13.63,124.18,13.53,124.04,13.66,124.12,13.98,124.22,14.08,124.42,13.87],
      [150.44,-9.67,150.89,-9.35,150.53,-9.35,150.79,-9.42,150.89,-9.67,150.44,-9.62,150.51,-9.54,150.44,-9.36],
      [152.52,-9.21,152.97,-8.96,152.63,-8.96,152.81,-8.97,152.95,-9.07,152.97,-9.21,152.72,-9.17,152.52,-9.01],
      [153.2,-11.63,153.76,-11.32,153.54,-11.48,153.76,-11.59,153.55,-11.63,153.29,-11.52,153.32,-11.47,153.2,-11.32],
      [127.4,-1.73,128.15,-1.33,128.15,-1.66,127.56,-1.73,127.4,-1.59,127.46,-1.45,127.65,-1.33,127.91,-1.44],
      [101.41,1.73,101.77,2.13,101.71,2.08,101.77,1.94,101.72,1.79,101.5,1.73,101.41,2.02,101.64,2.13],
      [98.31,-0.53,98.54,0,98.46,-0.53,98.31,-0.53,98.43,-0.23,98.32,0,98.42,-0.02,98.54,-0.26],
      [95.72,2.36,96.46,2.92,96.46,2.36,95.81,2.66,95.72,2.83,95.81,2.92,95.9,2.89,96.42,2.52],
      [126.17,33.22,126.9,33.55,126.33,33.22,126.17,33.31,126.34,33.46,126.7,33.55,126.9,33.52,126.87,33.34],
      [93.66,6.75,93.93,7.24,93.89,6.83,93.83,6.75,93.66,7.02,93.68,7.18,93.82,7.24,93.93,6.97],
      [90.5,22.07,90.87,22.86,90.78,22.09,90.52,22.07,90.68,22.33,90.5,22.84,90.6,22.86,90.87,22.48],
      [120.88,5.87,121.41,6.1,121.16,6.08,121.41,5.94,121.29,5.87,121.22,5.94,120.93,5.9,120.88,5.95,121.04,6.1],
      [130.04,-11.82,130.61,-11.34,130.46,-11.68,130.61,-11.82,130.04,-11.79,130.07,-11.68,130.2,-11.66,130.15,-11.48,130.29,-11.34],
      [123.32,9.45,124.04,11.27,123.37,9.45,123.32,9.49,123.39,9.97,123.71,10.47,124.04,11.27,124,10.4,123.7,10.13],
      [146.55,-2.21,147.44,-1.96,147.07,-1.96,147.42,-1.99,147.44,-2.06,147.21,-2.18,146.75,-2.15,146.55,-2.21,146.66,-1.97],
      [128.22,2.03,128.69,2.6,128.45,2.05,128.3,2.03,128.22,2.3,128.33,2.47,128.6,2.6,128.69,2.47,128.62,2.22],
      [126.7,4.03,126.92,4.55,126.82,4.03,126.7,4.07,126.81,4.26,126.72,4.34,126.76,4.55,126.87,4.48,126.92,4.29],
      [124.38,-8.42,125.13,-8.14,124.58,-8.14,124.6,-8.2,125.05,-8.18,125.12,-8.2,125.13,-8.33,124.38,-8.42,124.43,-8.18],
      [108,3.69,108.39,4.22,108.32,3.69,108.1,3.7,108.24,3.81,108.09,3.85,108,3.98,108.25,4.22,108.39,3.99],
      [104.25,0.83,104.66,1.22,104.59,1.22,104.66,1.05,104.58,0.83,104.43,0.96,104.44,1.05,104.25,1.01,104.36,1.18],
      [104.45,-0.32,105.01,0.02,104.78,-0.18,104.84,-0.14,105.01,-0.28,104.91,-0.32,104.7,-0.21,104.45,-0.19,104.54,0.02],
      [98.6,-1.78,99.27,-0.95,99.16,-1.78,98.83,-1.61,98.6,-1.2,98.68,-0.97,98.93,-0.95,99.27,-1.63,99.27,-1.74],
      [126.03,-3.82,127.23,-3.09,126.86,-3.09,127.23,-3.39,127.23,-3.63,126.69,-3.82,126.21,-3.61,126.06,-3.42,126.03,-3.17,126.09,-3.11],
      [156.45,-7.43,157.49,-6.64,157.49,-7.33,157.44,-7.43,157.1,-7.32,156.49,-6.76,156.45,-6.64,156.6,-6.64,157.03,-6.89,157.19,-7.16],
      [112.73,-7.22,114.07,-6.87,113.84,-7.11,113.47,-7.22,113.13,-7.22,112.73,-7.07,112.87,-6.9,113.07,-6.88,113.97,-6.87,114.07,-6.96],
      [161.29,-10.82,162.37,-10.2,161.72,-10.39,162.11,-10.45,162.37,-10.82,161.79,-10.72,161.54,-10.57,161.49,-10.36,161.29,-10.33,161.3,-10.2],
      [130.38,-11.93,131.54,-11.19,130.62,-11.38,131.02,-11.33,131.27,-11.19,131.54,-11.44,131.46,-11.59,130.95,-11.93,130.51,-11.62,130.38,-11.19],
      [123.82,9.6,124.59,10.16,124.59,9.79,124.36,9.63,124.12,9.6,123.94,9.62,123.82,9.82,124.17,10.14,124.34,10.16,124.58,10.03],
      [135.38,-1.21,136.38,-0.65,135.38,-0.65,135.89,-0.73,136.38,-1.09,136.16,-1.21,135.92,-1.18,135.75,-0.82,135.65,-0.88,135.43,-0.77],
      [134.09,-6.91,134.54,-6.19,134.54,-6.44,134.32,-6.85,134.2,-6.91,134.09,-6.83,134.11,-6.47,134.19,-6.46,134.12,-6.43,134.11,-6.19],
      [124.33,-2.01,125.31,-1.66,124.97,-1.71,125.19,-1.71,125.31,-1.88,125.01,-1.94,124.83,-1.89,124.42,-2.01,124.33,-1.86,124.42,-1.66],
      [123.23,-8.57,123.92,-8.19,123.92,-8.27,123.78,-8.3,123.55,-8.57,123.23,-8.53,123.48,-8.32,123.39,-8.28,123.6,-8.29,123.78,-8.19],
      [138.23,37.82,138.58,38.32,138.34,37.82,138.23,37.83,138.32,37.97,138.25,38.08,138.5,38.32,138.45,38.08,138.58,38.07,138.5,37.9],
      [159.61,-9.93,160.82,-9.27,159.75,-9.27,159.97,-9.43,160.35,-9.42,160.63,-9.59,160.82,-9.86,160.65,-9.93,159.8,-9.76,159.61,-9.47,159.63,-9.31],
      [137.65,-8.41,138.99,-7.39,138.54,-8.27,138.3,-8.41,137.65,-8.39,137.83,-7.93,138.08,-7.57,138.3,-7.44,138.77,-7.39,138.99,-7.7,138.79,-8.06],
      [115.86,-8.91,116.72,-8.2,116.64,-8.61,116.51,-8.82,116.59,-8.89,116.24,-8.91,115.86,-8.79,116.08,-8.74,116.06,-8.44,116.4,-8.2,116.72,-8.34],
      [158.46,-8.53,159.88,-7.54,159.88,-8.53,158.94,-8.04,158.6,-7.76,158.46,-7.54,158.73,-7.6,159.11,-7.9,159.43,-8.03,159.84,-8.33,159.79,-8.41],
      [123.16,11.75,124.05,12.58,123.72,12.29,123.91,12.17,124.04,11.97,124.05,11.75,123.47,12.22,123.16,11.93,123.27,12.4,123.24,12.58,123.56,12.44],
      [122.28,-5.39,122.76,-4.62,122.65,-5.27,122.56,-5.39,122.31,-5.38,122.28,-5.32,122.4,-5.07,122.37,-4.77,122.7,-4.62,122.76,-4.93,122.61,-5.14],
      [131.11,-8,131.74,-7.11,131.33,-8,131.11,-8,131.14,-7.68,131.26,-7.47,131.64,-7.11,131.74,-7.2,131.64,-7.27,131.69,-7.44,131.62,-7.63],
      [125.8,-7.98,126.81,-7.57,126.8,-7.67,126.81,-7.74,126.58,-7.81,126.47,-7.95,126.04,-7.89,125.8,-7.98,125.98,-7.66,126.21,-7.71,126.61,-7.57],
      [97.08,0.56,97.93,1.54,97.48,1.47,97.93,0.97,97.82,0.56,97.68,0.6,97.6,0.83,97.41,0.95,97.08,1.43,97.24,1.42,97.36,1.54],
      [145.44,43.66,146.57,44.5,146.21,44.5,146.57,44.44,145.91,44.1,145.59,43.85,145.56,43.66,145.44,43.74,145.46,43.87,145.75,44.07,146.11,44.5],
      [114.47,-8.85,115.7,-8.07,115.45,-8.16,115.7,-8.41,115.33,-8.62,115.14,-8.85,115.06,-8.57,114.61,-8.38,114.47,-8.17,114.5,-8.12,114.94,-8.19,115.15,-8.07],
      [160.59,-9.61,161.37,-8.31,160.75,-8.31,161,-8.61,160.94,-8.8,161.16,-8.96,161.37,-9.61,160.87,-9.16,160.77,-8.96,160.66,-8.62,160.71,-8.54,160.59,-8.37],
      [157.22,-8.61,157.9,-7.97,157.76,-8.24,157.9,-8.51,157.82,-8.61,157.59,-8.45,157.56,-8.27,157.3,-8.33,157.22,-8.26,157.49,-7.97,157.6,-8.01,157.65,-8.22],
      [134.15,-6.37,134.75,-5.43,134.75,-5.71,134.71,-6.3,134.64,-6.37,134.44,-6.33,134.15,-6.06,134.3,-6.01,134.34,-5.83,134.21,-5.71,134.34,-5.71,134.57,-5.43],
      [107.56,-3.23,108.29,-2.53,108.21,-3,108.06,-3.23,107.86,-3.09,107.82,-3.16,107.61,-3.21,107.56,-2.92,107.67,-2.57,107.84,-2.53,108.22,-2.7,108.29,-2.83],
      [154.73,-6.86,155.96,-5.44,155.96,-6.69,155.91,-6.8,155.72,-6.86,155.34,-6.72,155.21,-6.53,155.2,-6.31,154.76,-5.93,154.73,-5.44,155.09,-5.62,155.47,-6.15,155.82,-6.38],
      [127.3,-0.88,127.88,-0.32,127.57,-0.32,127.68,-0.47,127.6,-0.61,127.88,-0.81,127.76,-0.88,127.62,-0.77,127.46,-0.81,127.47,-0.64,127.3,-0.5,127.33,-0.34,127.46,-0.41],
      [122.81,-1.62,123.55,-1.17,123.21,-1.17,123.24,-1.39,123.43,-1.24,123.55,-1.34,123.51,-1.45,123.37,-1.51,123.27,-1.44,123.17,-1.62,123.15,-1.3,122.89,-1.59,122.81,-1.43,122.91,-1.18],
      [127.65,26.09,128.33,26.88,128.26,26.65,127.87,26.44,127.9,26.33,127.79,26.26,127.8,26.15,127.65,26.09,127.73,26.43,127.95,26.59,127.91,26.69,128.1,26.67,128.25,26.88,128.33,26.81],
      [92.53,11.54,93.07,13.55,92.72,11.54,92.53,11.87,92.68,12.19,92.79,12.23,92.72,12.54,92.86,13.36,93.06,13.55,93.07,13.22,92.89,12.94,92.97,12.85,92.99,12.54,92.86,12.44],
      [150.75,-4.83,153.13,-2.57,152.97,-4.76,152.89,-4.83,152.74,-4.64,152.67,-4.13,152.28,-3.58,151.88,-3.4,151.07,-2.83,150.75,-2.74,150.83,-2.71,150.83,-2.57,151.23,-2.87,152.03,-3.25,153.02,-4.11,153.13,-4.35],
      [118.96,-10.29,120.8,-9.3,120.01,-9.37,120.22,-9.51,120.29,-9.65,120.56,-9.72,120.78,-9.96,120.8,-10.11,120.44,-10.29,120.26,-10.24,119.6,-9.77,119.09,-9.71,118.96,-9.52,119.3,-9.37,119.8,-9.38,119.94,-9.3],
      [146.9,44.4,148.84,45.51,148.6,45.32,148.26,45.22,147.91,44.99,147.66,44.98,147.21,44.55,146.9,44.4,147.25,44.86,147.89,45.23,147.92,45.38,148.06,45.26,148.32,45.28,148.61,45.48,148.81,45.51,148.84,45.36],
      [121.89,10.44,123.16,11.9,122.5,11.62,122.84,11.6,122.93,11.53,122.89,11.44,123.16,11.54,123.12,11.29,123.02,11.12,122.8,10.99,122.77,10.82,122.2,10.62,121.95,10.44,122.1,11.64,121.89,11.79,121.92,11.85,122.03,11.9],
      [124.33,10.03,125.27,11.54,124.57,11.34,124.93,11.37,125.03,11.21,125.01,10.79,125.16,10.64,125.27,10.31,125.15,10.27,125.14,10.19,124.99,10.37,125.03,10.03,124.78,10.17,124.79,10.78,124.66,10.96,124.45,10.92,124.33,11.54],
      [120.34,12.22,121.54,13.52,120.7,13.48,120.98,13.49,121.12,13.38,121.2,13.43,121.52,13.13,121.47,12.93,121.54,12.64,121.39,12.3,121.24,12.22,121.12,12.25,120.92,12.51,120.65,13.17,120.46,13.39,120.34,13.41,120.4,13.52],
      [120.08,21.93,121.93,25.28,121.01,22.62,120.9,22.38,120.84,21.93,120.74,21.96,120.58,22.36,120.32,22.55,120.08,23.09,120.13,23.65,121.04,25.03,121.59,25.28,121.93,24.97,121.82,24.82,121.83,24.53,121.61,24.05,121.4,23.17],
      [130.24,-0.44,131.34,0,130.81,0,131.28,-0.15,131.34,-0.29,131.22,-0.37,131.01,-0.36,130.62,-0.09,130.76,-0.29,130.9,-0.34,130.9,-0.42,130.75,-0.44,130.69,-0.3,130.55,-0.37,130.5,-0.27,130.24,-0.21,130.36,-0.07],
      [122.59,-5.67,123.2,-4.39,123.18,-4.55,123.2,-4.82,123.12,-4.72,123.06,-4.75,122.97,-5.14,123.15,-5.22,123.19,-5.33,122.97,-5.41,122.81,-5.67,122.65,-5.66,122.59,-5.49,122.77,-5.21,122.85,-4.62,122.95,-4.44,123.07,-4.39],
      [122.4,9.06,123.57,10.99,123.13,9.06,122.99,9.06,122.87,9.32,122.56,9.48,122.4,9.82,122.47,9.96,122.86,10.09,122.82,10.5,122.96,10.7,122.98,10.89,123.26,10.99,123.51,10.92,123.57,10.78,123.16,9.86,123.15,9.61,123.32,9.27],
      [123.59,-10.34,127.3,-8.32,127.3,-8.42,126.92,-8.72,126.49,-8.91,125.41,-9.28,125,-9.57,124.43,-10.15,123.86,-10.34,123.6,-10.27,123.72,-10.08,123.59,-9.97,123.71,-9.61,123.98,-9.37,124.89,-8.97,125.18,-8.65,125.8,-8.49,126.62,-8.46,126.97,-8.32],
      [141.83,45.92,143.58,48,142.56,48,142.58,47.68,142.94,47.32,143.18,46.84,143.49,46.75,143.58,46.36,143.43,46.03,143.28,46.56,142.83,46.61,142.64,46.72,142.41,46.55,142.08,45.92,141.96,46.01,141.83,46.45,142.04,47.14,141.96,47.59,142.18,48],
      [124.29,11.05,125.74,12.57,125.24,12.53,125.32,12.32,125.54,12.19,125.46,11.95,125.49,11.59,125.61,11.32,125.57,11.24,125.7,11.16,125.74,11.05,125.63,11.13,125.23,11.15,125.03,11.34,124.92,11.56,125,11.76,124.88,11.78,124.68,12.02,124.45,12.15,124.29,12.57],
      [105.13,-3.07,106.82,-1.5,106.05,-1.67,106.37,-2.46,106.82,-2.57,106.61,-2.9,106.67,-3.07,106,-2.82,105.79,-2.18,105.55,-2.08,105.34,-2.13,105.13,-2.04,105.19,-1.92,105.37,-1.81,105.37,-1.66,105.46,-1.57,105.59,-1.53,105.7,-1.73,105.72,-1.53,105.91,-1.5],
      [108.67,18.22,111.01,20.14,110.89,19.99,111.01,19.66,110.82,19.56,110.64,19.29,110.45,18.75,110.05,18.51,110.07,18.45,109.82,18.4,109.7,18.26,109.52,18.22,108.7,18.54,108.67,19.3,109.28,19.76,109.18,19.77,109.26,19.88,110.17,20.05,110.59,19.98,110.65,20.14],
      [117.22,8.37,119.69,11.35,117.31,8.44,117.22,8.37,117.35,8.71,117.88,9.24,118.11,9.35,119.02,10.35,119.22,10.48,119.31,10.69,119.31,10.97,119.5,11.35,119.55,11.31,119.53,10.95,119.69,10.5,119.37,10.33,119.19,10.06,118.78,9.92,118.77,9.77,118.43,9.26,118.13,9.1,117.99,8.88],
      [119.81,-8.94,123.01,-8.11,122.78,-8.61,121.65,-8.9,121.58,-8.82,121.41,-8.81,121.33,-8.92,121.04,-8.94,120.55,-8.8,120.12,-8.78,119.91,-8.86,119.81,-8.7,119.87,-8.42,120.61,-8.24,121.44,-8.58,121.97,-8.46,122.32,-8.63,122.85,-8.3,122.92,-8.22,122.76,-8.19,122.92,-8.11,123.01,-8.33,122.81,-8.48,122.85,-8.56],
      [127.88,-3.86,130.86,-2.79,129.75,-2.87,129.98,-2.98,130.38,-2.99,130.57,-3.13,130.67,-3.39,130.77,-3.42,130.86,-3.57,130.81,-3.86,129.84,-3.33,129.51,-3.33,129.47,-3.45,128.97,-3.33,128.96,-3.24,128.86,-3.23,128.64,-3.43,128.52,-3.45,128.13,-3.16,127.9,-3.5,127.88,-3.22,128.2,-2.87,128.99,-2.83,129.17,-2.93,129.48,-2.79],
      [116.79,-9.1,119.13,-8.12,118.24,-8.32,118.61,-8.28,118.71,-8.41,118.75,-8.33,118.93,-8.3,119.13,-8.67,119.01,-8.75,118.75,-8.74,118.83,-8.83,118.48,-8.86,118.4,-8.81,118.38,-8.67,118.19,-8.84,117.06,-9.1,116.79,-9.01,116.84,-8.53,117.16,-8.37,117.57,-8.43,117.81,-8.71,117.97,-8.73,118.23,-8.59,117.81,-8.34,117.76,-8.15,118.12,-8.12],
      [131.81,-12,143.18,-10.71,143.18,-11.95,132.63,-12,132.67,-11.65,132.48,-11.49,132.07,-11.47,131.81,-11.27,131.96,-11.18,132.2,-11.3,132.26,-11.2,132.68,-11.51,132.96,-11.41,133.19,-11.71,133.9,-11.83,134.23,-12,135.63,-12,135.89,-11.82,135.88,-12,141.97,-12,142.17,-10.95,142.54,-10.71,142.61,-10.75,142.55,-10.87,142.72,-11.01,142.84,-11.31,142.87,-11.82],
      [132.03,32.75,134.74,34.35,134.36,34.26,134.64,34.23,134.67,33.85,134.74,33.82,134.38,33.61,134.18,33.25,133.96,33.45,133.63,33.51,133.29,33.36,132.98,32.84,132.8,32.75,132.64,32.76,132.71,32.9,132.5,32.92,132.43,33.06,132.51,33.29,132.41,33.33,132.41,33.43,132.03,33.34,132.64,33.69,132.78,33.99,132.94,34.1,133.19,33.93,133.58,34.02,133.64,34.13,133.6,34.24,133.95,34.35],
      [127.43,-0.89,128.9,2.2,127.73,0.85,127.88,0.83,127.97,1.04,128.16,1.16,128.22,1.4,128.69,1.57,128.7,1.11,128.3,0.88,128.26,0.73,128.61,0.55,128.69,0.36,128.9,0.22,127.98,0.47,127.89,0.3,127.98,-0.25,128.43,-0.89,128.05,-0.71,127.69,-0.24,127.71,0.29,127.54,0.61,127.61,0.85,127.43,1.14,127.63,1.84,128.04,2.2,127.89,1.83,128.01,1.7,128.01,1.33,127.65,1.01,127.63,0.94],
      [148.34,-6.29,152.41,-4.2,151.92,-4.3,152.12,-4.21,152.41,-4.34,152.35,-4.82,152.26,-4.95,152.01,-5,151.98,-5.07,152.14,-5.36,152.08,-5.46,151.87,-5.56,151.52,-5.55,151.23,-5.92,150.47,-6.26,149.65,-6.29,149.38,-6.08,149.1,-6.12,148.72,-5.87,148.4,-5.77,148.34,-5.67,148.43,-5.47,149,-5.48,149.36,-5.58,149.83,-5.52,149.96,-5.45,150.09,-5.01,150.17,-5.07,150.07,-5.31,150.18,-5.52,150.9,-5.45,151.33,-4.96,151.67,-4.88,151.54,-4.3,151.59,-4.2],
      [139.84,41.46,145.83,45.51,143.82,44.12,144.72,43.93,145.37,44.33,145.13,43.87,145.14,43.66,145.34,43.3,145.83,43.39,145.51,43.17,144.92,43,144.2,42.97,143.97,42.88,143.43,42.42,143.24,42,141.85,42.58,141.41,42.55,140.99,42.34,140.71,42.56,140.48,42.56,140.35,42.44,140.33,42.29,140.53,42.13,140.73,42.12,141.15,41.81,141,41.74,140.66,41.82,140.27,41.46,140.04,41.47,140,41.58,140.11,41.91,140.06,42.07,139.84,42.28,139.86,42.58,140.43,42.95,140.49,43.05,140.39,43.3,141.14,43.18,141.37,43.28,141.4,43.64,141.64,44.02,141.76,44.48,141.78,44.72,141.58,45.16,141.67,45.4,141.94,45.51,142.88,44.67],
      [105.26,-8.77,114.6,-5.9,107.37,-6.01,107.67,-6.22,108.33,-6.29,108.68,-6.79,109.29,-6.87,109.5,-6.81,110.43,-6.95,110.83,-6.42,110.97,-6.44,111.18,-6.69,111.54,-6.65,112.09,-6.89,112.54,-6.93,112.65,-7.22,112.79,-7.3,112.79,-7.55,113.01,-7.66,113.5,-7.72,114.07,-7.63,114.41,-7.79,114.39,-8.41,114.6,-8.68,114.58,-8.77,113.25,-8.29,112.68,-8.41,111.51,-8.31,110.61,-8.15,110.04,-7.89,109.28,-7.7,108.74,-7.67,108.45,-7.8,107.92,-7.72,107.28,-7.47,106.46,-7.37,106.42,-7.24,106.52,-7.05,106.2,-6.93,105.26,-6.84,105.37,-6.66,105.48,-6.78,105.66,-6.47,105.79,-6.46,105.87,-6.12,106.08,-5.91,106.83,-6.1,107.01,-6.01,107.05,-5.9],
      [129.58,31.02,132,33.93,131.17,33.6,131.7,33.6,131.71,33.5,131.54,33.27,131.9,33.25,131.85,33.12,132,32.88,131.66,32.47,131.34,31.4,131.07,31.44,131.1,31.26,130.69,31.02,130.79,31.27,130.7,31.58,130.8,31.62,130.78,31.71,130.66,31.72,130.56,31.56,130.54,31.4,130.64,31.27,130.59,31.18,130.2,31.29,130.15,31.41,130.29,31.45,130.32,31.6,130.19,31.77,130.19,32.09,130.39,32.22,130.64,32.62,130.5,32.66,130.55,32.83,130.38,33.09,130.24,33.18,130.13,33.1,130.18,32.85,130.33,32.85,130.34,32.7,130.05,32.77,129.77,32.57,129.83,32.73,129.69,32.88,129.68,33.06,129.83,32.89,129.99,32.85,129.9,33.02,129.58,33.24,129.61,33.34,129.84,33.32,129.83,33.44,130.37,33.63,130.48,33.83,130.72,33.93,130.95,33.87],
      [121.92,5.6,126.58,9.76,126.01,9.32,126.19,9.28,126.19,9.12,126.3,8.95,126.32,8.84,126.14,8.6,126.37,8.48,126.46,8.2,126.44,7.83,126.57,7.68,126.58,7.25,126.44,7.01,126.19,6.85,126.19,6.31,125.82,7.33,125.69,7.26,125.38,6.69,125.59,6.47,125.67,5.98,125.35,5.6,125.24,5.76,125.23,6.07,125.04,5.87,124.93,5.88,124.21,6.23,124.08,6.4,123.99,6.99,124.21,7.4,123.97,7.66,123.67,7.82,123.49,7.81,123.39,7.41,123.18,7.53,123.1,7.7,122.99,7.55,122.84,7.53,122.79,7.72,122.62,7.76,122.47,7.64,122.14,6.95,121.96,6.97,121.92,7.2,122.24,7.95,122.39,8.05,122.91,8.16,123.05,8.43,123.34,8.57,123.43,8.7,123.68,8.62,123.85,8.43,123.88,8.19,123.8,8.05,124.2,8.23,124.4,8.6,124.62,8.52,124.73,8.56,124.87,8.97,125.14,8.87,125.21,9.03,125.5,9.01,125.53,9.14,125.41,9.67,125.47,9.76,125.88,9.51],
      [119.77,12.57,124.14,18.62,121.1,18.62,121.85,18.3,122.04,18.33,122.15,18.49,122.27,18.46,122.32,18.32,122.18,18.06,122.15,17.66,122.41,17.18,122.52,17.12,122.14,16.18,121.6,15.93,121.61,15.67,121.39,15.32,121.7,14.74,121.63,14.58,121.77,14.17,121.91,14.02,122.21,13.93,122.29,14,122.2,14.15,122.49,14.32,122.63,14.32,122.93,14.19,123.1,13.75,123.23,13.75,123.3,13.84,123.26,13.98,123.32,14.06,123.82,13.84,123.81,13.72,123.55,13.65,123.82,13.27,123.79,13.11,124.14,13.04,124.06,12.57,123.88,12.69,123.95,12.92,123.63,12.91,123.31,13.04,123.16,13.44,122.86,13.62,122.6,13.91,122.47,13.89,122.67,13.4,122.68,13.25,122.6,13.19,122.38,13.52,121.78,13.94,121.5,13.84,121.34,13.65,121.1,13.68,120.84,13.88,120.73,13.9,120.64,13.8,120.62,14.19,120.92,14.49,120.94,14.65,120.58,14.88,120.59,14.48,120.44,14.45,120.25,14.79,120.08,14.85,119.89,15.84,119.77,16.01,119.77,16.26,119.83,16.33,120.16,16.05,120.37,16.11,120.3,16.65,120.41,16.96,120.43,17.38,120.36,17.64,120.6,18.51],
      [95.21,-5.9,106.06,5.61,96.49,5.23,96.84,5.27,97.55,5.21,97.91,4.88,98,4.66,98.25,4.41,98.31,4.09,98.66,3.93,98.78,3.76,99.73,3.18,100.52,2.19,100.89,1.95,100.83,2.24,101.05,2.26,101.3,2.01,101.48,1.69,101.78,1.62,102.02,1.44,102.24,0.99,102.39,0.84,102.85,0.72,103.03,0.58,103.01,0.42,102.55,0.22,102.9,0.28,103.34,0.51,103.48,0.48,103.67,0.29,103.79,0.05,103.43,-0.19,103.41,-0.36,103.51,-0.47,103.44,-0.58,103.53,-0.75,103.72,-0.89,104.2,-1.05,104.36,-1.04,104.52,-1.82,104.85,-2.09,104.83,-2.23,104.65,-2.43,104.65,-2.6,104.97,-2.37,105.4,-2.38,105.58,-2.49,106.04,-3.11,106.06,-3.22,105.84,-3.61,105.93,-3.83,105.83,-4.16,105.89,-5.01,105.75,-5.82,105.62,-5.8,105.35,-5.55,105.08,-5.75,104.64,-5.52,104.68,-5.89,104.6,-5.9,103.83,-5.08,102.54,-4.15,102.13,-3.6,101.58,-3.17,100.89,-2.25,100.86,-1.93,100.31,-0.83,99.86,-0.31,99.67,0.05,99.16,0.35,98.8,1.49,98.6,1.86,97.7,2.36,97.59,2.85,97.39,2.98,96.97,3.58,96.8,3.71,96.44,3.82,95.58,4.66,95.21,5.28,95.23,5.56,95.63,5.61,96.13,5.29],
      [118.78,-5.69,125.23,1.69,124.89,1,124.43,0.47,123.75,0.31,123.27,0.33,123,0.49,121.01,0.44,120.58,0.53,120.35,0.45,120.19,0.27,120.01,-0.2,120.06,-0.56,120.24,-0.87,120.52,-1.04,120.67,-1.37,121.03,-1.41,121.15,-1.34,121.58,-0.83,121.74,-0.93,121.97,-0.93,122.28,-0.76,122.89,-0.76,122.83,-0.66,123.17,-0.57,123.38,-0.65,123.43,-0.78,123.38,-1,123.23,-1,123.05,-0.87,122.9,-0.9,122.25,-1.56,121.86,-1.69,121.65,-1.9,121.36,-1.88,121.58,-2.15,121.77,-2.24,122.08,-2.75,122.29,-2.91,122.4,-3.2,122.32,-3.28,122.25,-3.62,122.58,-3.88,122.69,-4.08,122.85,-4.06,122.87,-4.39,122.72,-4.34,122.72,-4.41,122.11,-4.54,122.04,-4.83,121.59,-4.76,121.49,-4.58,121.62,-4.09,121.31,-3.92,120.89,-3.52,121.05,-3.17,121.05,-2.75,120.88,-2.65,120.65,-2.67,120.26,-2.95,120.44,-3.71,120.36,-4.09,120.42,-4.62,120.28,-5.15,120.43,-5.59,119.95,-5.58,119.72,-5.69,119.56,-5.61,119.36,-5.31,119.59,-4.52,119.62,-4.03,119.48,-3.73,119.47,-3.51,119.36,-3.46,118.99,-3.54,118.87,-3.4,118.78,-2.72,119.09,-2.48,119.17,-2.14,119.32,-1.93,119.31,-1.41,119.51,-0.91,119.71,-0.68,119.84,-0.86,119.72,-0.09,119.87,0.04,119.81,0.24,119.91,0.45,120.27,0.97,120.42,0.85,120.6,0.85,120.87,1.25,121.08,1.33,121.4,1.24,121.59,1.07,122.44,1.02,122.84,0.85,123.07,0.94,123.93,0.85,124.53,1.23,124.6,1.39,124.79,1.47,124.95,1.67,125.11,1.69,125.23,1.5],
      [130.89,33.49,141.99,41.51,141.23,41.37,141.46,41.4,141.43,40.72,141.8,40.29,141.99,39.79,141.98,39.43,141.9,39.11,141.66,38.97,141.55,38.76,141.47,38.4,141.11,38.34,140.96,38.15,141,37.11,140.73,36.73,140.57,36.23,140.87,35.72,140.64,35.66,140.46,35.51,140.35,35.18,139.84,34.91,139.83,35.3,140.1,35.59,139.99,35.67,139.83,35.66,139.65,35.41,139.74,35.25,139.68,35.15,139.47,35.3,139.25,35.28,139.13,35.15,139.09,34.84,138.84,34.62,138.76,34.7,138.8,34.97,138.9,35.03,138.72,35.12,138.58,35.09,138.19,34.6,137.54,34.66,137.06,34.58,137.29,34.7,137.28,34.77,137.03,34.77,136.96,34.83,136.94,34.72,136.87,34.73,136.9,35.04,136.8,35.05,136.69,34.98,136.53,34.68,136.88,34.43,136.85,34.32,136.33,34.18,135.92,33.56,135.7,33.49,135.45,33.55,135.13,34.01,135.1,34.29,135.31,34.42,135.42,34.62,135.04,34.63,134.74,34.77,134.25,34.71,133.97,34.53,133.14,34.3,132.66,34.25,132.42,34.35,132.31,34.32,132.15,33.84,131.74,34.05,131.23,33.95,131.07,34.02,130.92,33.98,130.89,34.26,131,34.39,131.35,34.41,132.26,35.02,132.7,35.42,132.92,35.51,133.27,35.56,133.38,35.46,133.98,35.51,135.17,35.75,135.27,35.72,135.23,35.59,135.33,35.53,135.68,35.5,135.9,35.61,136.1,35.77,136.01,35.99,136.07,36.12,136.7,36.74,136.72,37.2,136.84,37.38,137.32,37.52,137.34,37.44,136.9,37.12,136.99,37.03,137.02,36.84,137.25,36.75,137.51,36.95,138.32,37.22,138.63,37.47,138.89,37.84,139.36,38.1,139.52,38.5,139.8,38.88,140.06,39.62,139.99,39.86,139.74,39.92,139.91,40.02,140.01,40.26,139.92,40.53,139.97,40.67,140.28,40.85,140.32,41.16,140.39,41.23,140.63,41.2,140.75,40.83,140.94,40.94,141.12,40.88,141.23,40.99,141.24,41.21,140.8,41.14,140.8,41.25,140.94,41.51],
      [108.91,-4.17,119.26,6.99,116.81,6.69,116.79,6.61,116.91,6.66,117.13,6.97,117.23,6.94,117.29,6.68,117.61,6.51,117.69,6.35,117.62,6.2,117.64,6,117.5,5.88,118,6.05,118.12,5.86,117.93,5.79,117.97,5.71,118.35,5.81,118.59,5.59,119.26,5.37,119.25,5.2,119.13,5.1,118.67,4.96,118.26,4.99,118.19,4.83,118.56,4.5,118.55,4.38,118.01,4.25,117.7,4.34,117.5,4.13,117.47,4.08,117.78,3.69,117.63,3.64,117.51,3.73,117.45,3.63,117.06,3.62,117.35,3.43,117.35,3.19,117.61,3.06,117.64,2.95,117.57,2.93,117.7,2.89,117.64,2.83,117.79,2.75,118.07,2.32,118.04,2.22,117.79,2.03,118.08,1.7,118.98,0.98,118.89,0.89,118.53,0.81,118.2,0.87,117.91,1.1,117.96,0.89,117.75,0.73,117.52,0.24,117.46,-0.32,117.56,-0.77,117.24,-0.93,116.91,-1.22,116.8,-1.18,116.74,-1.04,116.75,-1.33,116.28,-1.78,116.42,-1.78,116.42,-2.05,116.31,-2.14,116.53,-2.21,116.55,-2.41,116.53,-2.51,116.32,-2.55,116.31,-2.6,116.38,-2.58,116.33,-2.9,116.15,-2.98,116.26,-3.13,115.96,-3.6,114.69,-4.17,114.63,-4.11,114.53,-3.38,114.45,-3.48,114.34,-3.44,114.34,-3.24,114.24,-3.36,114.08,-3.28,113.96,-3.39,113.71,-3.46,113.63,-3.42,113.61,-3.2,113.34,-3.25,113.03,-2.93,112.97,-3.19,112.76,-3.32,112.6,-3.4,112.28,-3.32,111.86,-3.55,111.82,-3.06,111.69,-2.89,111.63,-2.98,111.37,-2.93,110.93,-3.07,110.83,-3,110.9,-2.91,110.7,-3.02,110.57,-2.89,110.26,-2.97,110.1,-2,109.96,-1.86,110.04,-1.53,109.98,-1.27,109.68,-0.94,109.29,-0.85,109.27,-0.73,109.37,-0.64,109.13,-0.45,109.12,-0.27,109.26,0.03,108.94,0.36,108.91,0.79,108.96,1.13,109.13,1.25,109.01,1.24,109.08,1.5,109.38,1.92,109.63,2.03,109.86,1.76,110.35,1.72,111.22,1.4,111.03,1.56,111.27,2.14,111.21,2.38,111.24,2.44,111.44,2.38,111.51,2.74,112.99,3.16,113.92,4.24,114.01,4.58,114.42,4.66,115,5.02,115.03,4.9,115.43,4.97,115.58,5.19,115.47,5.25,115.42,5.41,115.6,5.6,115.74,5.53,115.88,5.61,116.14,6.13,116.49,6.52,116.78,6.99,116.85,6.83],
      [131,-10.65,150.85,-0.36,133.47,-0.73,133.97,-0.74,134.11,-0.85,134.07,-1,134.26,-1.36,134.11,-1.72,134.19,-2.31,134.46,-2.83,134.48,-2.58,134.63,-2.54,134.7,-2.93,134.84,-2.91,134.89,-3.21,135.09,-3.35,135.49,-3.35,135.86,-3,136.01,-2.73,136.24,-2.58,136.39,-2.27,137.07,-2.11,137.17,-2.03,137.12,-1.84,137.91,-1.48,139.79,-2.35,140.62,-2.45,140.75,-2.61,141.19,-2.63,142.55,-3.2,143.51,-3.43,144.07,-3.81,144.48,-3.83,145.09,-4.35,145.33,-4.39,145.77,-4.82,145.75,-5.4,147.03,-5.92,147.42,-5.97,147.8,-6.32,147.81,-6.7,147.12,-6.72,146.95,-6.83,146.96,-6.93,147.26,-7.46,147.72,-7.88,148.13,-8.1,148.25,-8.55,148.45,-8.69,148.58,-9.05,149.2,-9.03,149.26,-9.5,150.01,-9.69,149.76,-9.81,149.87,-10.01,150.36,-10.19,150.85,-10.24,150.64,-10.34,150.45,-10.31,150.49,-10.43,150.65,-10.52,150.32,-10.65,150.02,-10.58,149.75,-10.35,147.77,-10.07,147.55,-9.91,147.41,-9.67,147.02,-9.39,146.93,-9.25,146.96,-9.06,146.86,-9.09,146.63,-8.95,146.03,-8.08,144.97,-7.8,144.86,-7.63,144.51,-7.57,144.43,-7.68,144.14,-7.76,143.9,-7.67,143.65,-7.46,143.94,-7.94,143.84,-7.94,143.89,-8.02,143.83,-8.03,143.52,-8,143.61,-8.2,143.09,-8.31,142.52,-8.32,142.35,-8.17,142.21,-8.2,142.33,-8.2,142.47,-8.37,142.8,-8.35,143.11,-8.47,143.38,-8.76,143.37,-8.96,142.65,-9.33,142.23,-9.17,141.62,-9.21,141.41,-9.15,141.13,-9.22,140,-8.2,140.12,-7.92,139.93,-8.1,139.39,-8.19,139.25,-7.98,138.93,-8.26,138.86,-8.15,139.09,-7.59,138.75,-7.25,139.18,-7.19,138.85,-7.14,138.6,-6.94,138.86,-6.86,138.44,-6.34,138.3,-5.95,138.37,-5.84,138.2,-5.81,138.34,-5.68,138.09,-5.71,138.06,-5.47,137.28,-4.95,137.2,-4.99,136.62,-4.82,135.98,-4.53,135.2,-4.45,134.75,-4.2,134.68,-4.08,134.71,-3.95,134.89,-3.94,134.27,-3.95,134.15,-3.8,133.97,-3.82,133.68,-3.48,133.7,-3.25,133.84,-3.05,133.7,-3.09,133.65,-3.36,133.52,-3.41,133.4,-3.9,133.25,-4.06,132.97,-4.09,132.75,-3.7,132.87,-3.55,132.75,-3.29,132.35,-2.98,132.05,-2.91,131.97,-2.79,132.23,-2.68,132.73,-2.79,133.03,-2.49,133.19,-2.44,133.7,-2.62,133.75,-2.45,133.9,-2.39,133.9,-2.3,133.79,-2.29,133.92,-2.1,132.96,-2.27,132.31,-2.24,132.02,-1.99,131.93,-1.56,131.29,-1.39,131,-1.42,131.19,-1.17,131.26,-0.86,131.8,-0.7,132.13,-0.45,132.39,-0.36,132.86,-0.42],
      [90,1.33,139.55,48,139.55,48,139.37,47.89,139,47.38,138.59,47.06,138.34,46.54,137.69,45.82,136.8,45.17,136.14,44.49,135.87,44.37,135.48,43.84,135.13,43.53,134.01,42.95,133.16,42.7,132.71,42.88,132.3,42.88,132.31,43.31,131.95,43.1,131.87,43.1,132.01,43.28,131.79,43.26,131.16,42.63,130.71,42.66,130.83,42.52,130.73,42.33,130.46,42.3,130.24,42.18,129.76,41.71,129.69,41.59,129.77,41.3,129.71,40.86,129.34,40.73,129.11,40.49,128.7,40.32,128.51,40.13,127.97,40,127.57,39.78,127.55,39.46,127.52,39.38,127.42,39.37,127.39,39.21,127.79,39.08,128.33,38.68,128.62,38.18,129.34,37.27,129.42,37.06,129.47,36.74,129.4,36.05,129.57,36.05,129.56,35.95,129.33,35.33,129.08,35.12,128.51,35.1,128.42,35.02,128.44,34.87,128.09,34.93,128.04,35.02,127.71,34.95,127.64,34.89,127.72,34.72,127.63,34.69,127.52,34.84,127.4,34.82,127.48,34.63,127.32,34.46,127.17,34.55,127.25,34.76,126.9,34.44,126.75,34.51,126.53,34.31,126.48,34.49,126.26,34.67,126.52,34.7,126.47,34.76,126.59,34.82,126.42,34.82,126.29,35.15,126.49,35.5,126.61,35.57,126.49,35.65,126.72,35.77,126.75,35.87,126.65,35.92,126.69,36.01,126.54,36.17,126.49,36.69,126.18,36.69,126.16,36.77,126.49,37.01,126.78,36.95,126.87,36.82,126.98,36.94,126.87,36.98,126.75,37.19,126.79,37.29,126.65,37.45,126.56,37.72,126.63,37.78,126.37,37.88,126.12,37.74,126.05,37.87,125.77,37.99,125.36,37.72,125.31,37.84,124.99,37.93,125.21,38.08,124.69,38.13,124.87,38.23,124.88,38.34,125.07,38.56,125.55,38.69,125.17,38.81,125.41,39.29,125.36,39.53,124.78,39.76,124.64,39.62,124.56,39.79,124.35,39.91,124.35,40.01,124.11,39.84,123.65,39.88,123.58,39.79,122.84,39.6,122.33,39.37,121.98,39.05,121.68,39,121.65,38.87,121.16,38.73,121.11,38.92,121.68,39.11,121.63,39.22,121.82,39.39,121.28,39.38,121.27,39.54,121.52,39.64,121.52,39.84,121.8,39.95,122.26,40.5,122.14,40.69,121.86,40.84,121.83,40.97,121.73,40.85,121.17,40.9,120.77,40.59,120.48,40.23,119.59,39.9,119.39,39.75,119.22,39.41,118.98,39.18,118.63,39.18,118.3,39.07,118.04,39.23,117.78,39.13,117.55,38.69,117.66,38.42,118.01,38.18,118.54,38.09,118.8,38.13,118.94,38.04,119.09,37.7,118.99,37.64,118.95,37.33,119.29,37.14,119.76,37.16,119.89,37.25,119.88,37.35,120.31,37.62,120.26,37.68,120.75,37.83,121.64,37.46,121.96,37.45,122.06,37.53,122.34,37.41,122.67,37.4,122.57,37.32,122.59,37.18,122.45,37.07,122.52,36.95,122.34,36.83,122.16,36.96,121.93,36.96,121.05,36.61,120.81,36.63,120.9,36.44,120.71,36.41,120.64,36.13,120.39,36.05,120.33,36.23,120.18,36.2,120.09,36.12,120.28,35.98,119.43,35.3,119.17,34.85,119.2,34.75,119.35,34.75,120.27,34.27,120.5,33.64,120.87,33.02,120.85,32.66,121.34,32.43,121.4,32.21,121.75,31.99,121.86,31.82,121.87,31.7,121.68,31.71,121.35,31.86,120.97,31.87,120.79,32.03,120.52,32.11,120.04,31.94,120.19,31.91,120.5,32.02,120.72,31.98,120.79,31.82,121.66,31.32,121.88,30.92,121.42,30.79,121,30.56,120.82,30.35,120.45,30.39,120.19,30.24,120.49,30.3,120.63,30.13,121.26,30.3,121.68,29.98,122.08,29.87,121.51,29.48,121.89,29.63,121.97,29.49,121.92,29.14,121.72,29.26,121.53,29.24,121.45,29.13,121.68,28.95,121.54,28.93,121.66,28.85,121.48,28.64,121.61,28.29,121.51,28.32,121.27,28.22,121.22,28.35,121.15,28.33,120.96,28.04,120.75,28.01,120.83,27.89,120.59,27.58,120.61,27.41,120.28,27.1,120.09,26.67,119.88,26.61,119.82,26.85,119.71,26.73,119.59,26.78,119.88,26.33,119.46,26.05,119.14,26.12,119.33,25.95,119.62,26,119.54,25.59,119.62,25.39,119.18,25.45,119.17,25.36,119.29,25.23,118.98,25.21,118.91,24.93,118.64,24.84,118.72,24.75,118.66,24.62,118.3,24.57,118.09,24.63,118.01,24.48,117.84,24.47,117.88,24.4,118.02,24.38,118.06,24.25,117.84,24.01,117.74,24.01,117.63,23.84,117.47,23.84,117.37,23.59,117.29,23.71,117.08,23.58,116.91,23.65,116.86,23.45,116.63,23.35,116.7,23.28,116.54,23.18,116.47,22.95,116.25,22.98,115.85,22.8,115.64,22.85,115.5,22.72,115.2,22.82,114.85,22.62,114.75,22.63,114.65,22.76,114.55,22.53,114.34,22.59,114.27,22.54,114.34,22.4,114.27,22.3,113.9,22.4,114.02,22.51,113.83,22.61,113.62,22.86,113.62,23.13,113.52,23.1,113.44,22.94,113.33,22.91,113.55,22.59,113.55,22.22,113.15,22.08,113.09,22.21,112.95,21.91,112.81,21.94,112.59,21.78,112.36,21.98,112.39,21.8,112.3,21.74,111.94,21.85,111.87,21.72,111.78,21.72,111.6,21.56,111.02,21.51,111,21.43,110.77,21.39,110.57,21.21,110.46,21.23,110.41,21.34,110.37,21.17,110.15,20.94,110.18,20.86,110.37,20.84,110.31,20.67,110.51,20.52,110.34,20.29,109.94,20.3,109.89,20.41,109.97,20.45,109.86,20.51,109.66,20.92,109.68,21.13,109.78,21.34,109.92,21.38,109.93,21.48,109.69,21.52,109.52,21.69,109.54,21.54,109.08,21.44,109.1,21.59,108.77,21.63,108.62,21.77,108.59,21.9,108.48,21.9,108.5,21.63,108.32,21.69,108.25,21.56,107.81,21.5,107.41,21.28,107.35,21.06,107.16,20.95,106.68,21,106.75,20.74,106.55,20.53,106.52,20.29,106.17,19.99,105.98,19.94,105.62,18.97,105.89,18.5,106.5,17.95,106.48,17.72,106.37,17.75,107.83,16.32,108.03,16.33,108.58,15.58,108.82,15.38,109.08,14.72,109.3,13.86,109.29,13.77,109.25,13.85,109.27,13.28,109.42,12.96,109.44,12.6,109.34,12.75,109.22,12.65,109.3,12.39,109.21,12.42,109.26,11.95,109.2,12,109.2,11.72,109.13,11.6,109.04,11.59,108.99,11.34,108.82,11.32,108.27,10.93,108.09,10.9,108,10.72,107.26,10.4,107.09,10.5,107.01,10.66,106.95,10.4,106.73,10.54,106.61,10.46,106.74,10.44,106.76,10.3,106.46,10.3,106.79,10.12,106.6,9.86,106.14,10.22,106.51,9.82,106.57,9.64,106.38,9.56,105.83,10,106.16,9.59,106.17,9.4,105.5,9.09,105.11,8.63,104.77,8.6,104.9,8.75,104.82,8.8,104.85,9.61,104.9,9.82,105.09,9.9,105.03,10.07,104.8,10.2,104.66,10.17,104.26,10.54,103.87,10.66,103.66,10.51,103.59,10.55,103.54,10.67,103.68,10.76,103.72,10.89,103.53,11.15,103.35,10.92,103.15,10.91,103.13,11.46,102.59,12.2,102.54,12.11,102.26,12.39,102.23,12.33,102.03,12.53,101.72,12.69,101.44,12.62,100.9,12.65,100.96,13.43,100.6,13.57,100.02,13.35,99.99,13.24,100.09,13.05,99.96,12.69,99.99,12.17,99.63,11.46,99.49,10.89,99.17,10.32,99.16,9.73,99.29,9.41,99.25,9.27,99.39,9.21,99.84,9.29,99.99,8.59,100.13,8.43,100.16,8.51,100.28,8.27,100.55,7.23,100.44,7.28,100.38,7.54,100.28,7.55,100.32,7.72,100.26,7.77,100.16,7.73,100.16,7.6,100.42,7.19,100.59,7.18,101.02,6.86,101.5,6.87,101.8,6.47,102.1,6.24,102.34,6.17,102.53,5.86,102.98,5.52,103.2,5.26,103.45,4.67,103.36,3.77,103.45,3.52,103.44,2.93,103.81,2.58,104.29,1.48,104.18,1.36,103.98,1.62,103.99,1.45,103.69,1.45,103.48,1.33,103.36,1.55,102.73,1.86,101.3,2.89,101.35,3.01,101.3,3.25,100.72,3.97,100.8,4.02,100.61,4.37,100.61,4.65,100.35,5.59,100.34,5.98,100.12,6.44,99.7,6.88,99.72,7.11,99.55,7.22,99.6,7.36,99.36,7.37,99.26,7.62,99.08,7.72,99.05,7.89,98.79,8.06,98.7,8.26,98.58,8.34,98.42,8.18,98.31,8.23,98.24,8.77,98.7,10.19,98.56,10.03,98.46,10.68,98.68,10.99,98.74,11.59,98.88,11.72,98.8,11.78,98.64,11.74,98.7,12.23,98.6,12.25,98.68,12.35,98.58,13.16,98.25,13.73,98.2,13.98,98.15,13.65,98.11,13.71,98.1,14.16,97.91,14.65,98.02,14.65,97.81,14.86,97.71,15.88,97.58,16.02,97.63,16.46,97.73,16.57,97.38,16.52,97.2,17.1,96.85,17.4,96.91,17.03,96.77,16.71,96.43,16.5,96.19,16.77,96.32,16.44,95.76,16.17,95.68,15.98,95.39,15.72,95.3,15.76,95.35,16.1,95.18,15.83,94.94,15.82,94.89,16.18,94.8,15.97,94.66,15.9,94.7,16.51,94.67,16.34,94.44,16.09,94.22,16.02,94.27,16.52,94.56,17.31,94.59,17.57,94.43,18.2,94.17,18.73,94.25,18.74,94.07,18.89,94.04,19.29,93.94,19.15,93.93,18.9,93.71,19.03,93.49,19.37,93.58,19.4,93.82,19.24,93.96,19.33,94,19.44,93.61,19.78,93.71,19.91,93.25,20.07,93.16,20.04,93.2,19.9,93.13,19.86,93,20.07,93.1,20.18,93.02,20.19,93.04,20.41,92.88,20.15,92.79,20.21,92.89,20.34,92.85,20.41,92.71,20.56,92.72,20.3,92.06,21.17,92.01,21.68,91.82,22.23,91.86,22.35,91.8,22.3,91.48,22.88,91.22,22.64,90.95,22.6,90.66,23.03,90.6,23.59,90.56,23.42,90.27,23.46,90.59,23.27,90.6,23.13,90.47,23.05,90.55,22.9,90.46,22.88,90.44,22.75,90.6,22.44,90.59,22.26,90.23,21.83,90.07,21.89,90.21,22.16,90,22.05,90,48]
    ];

    /* ---- src/ui/typhoon-view.js ---- */
    /**
     * Typhoon track view (inline SVG, no map library).
     *
     * There is deliberately no tile layer: a plugin should not hammer a tile service
     * or depend on one more third party. Instead the track is drawn on an
     * equirectangular graticule with a few reference cities, which is enough to read
     * where a system is going and keeps the whole view self-contained.
     *
     * The projection corrects longitude by `cos(midLatitude)` so the shape is not
     * stretched, exactly like a small-scale chart should be.
     */

    const TYPHOON_MAP_WIDTH = 660;
    const TYPHOON_MAP_HEIGHT = 420;
    const TYPHOON_MAP_PAD = 34;

    const TYPHOON_REFERENCE_CITIES = [
      { zh: '上海', en: 'Shanghai', lon: 121.47, lat: 31.23 },
      { zh: '青岛', en: 'Qingdao', lon: 120.38, lat: 36.07 },
      { zh: '厦门', en: 'Xiamen', lon: 118.08, lat: 24.48 },
      { zh: '香港', en: 'Hong Kong', lon: 114.17, lat: 22.32 },
      { zh: '台北', en: 'Taipei', lon: 121.56, lat: 25.03 },
      { zh: '马尼拉', en: 'Manila', lon: 120.98, lat: 14.60 },
      { zh: '东京', en: 'Tokyo', lon: 139.69, lat: 35.69 },
      { zh: '关岛', en: 'Guam', lon: 144.79, lat: 13.44 }
    ];

    /** Build a lon/lat → x/y projector that fits the bounds into the canvas. */
    function createProjection(bounds) {
      const midLat = (bounds.south + bounds.north) / 2;
      const cosLat = Math.max(0.2, Math.cos((midLat * Math.PI) / 180));
      const spanX = (bounds.east - bounds.west) * cosLat;
      const spanY = bounds.north - bounds.south;
      const usableW = TYPHOON_MAP_WIDTH - TYPHOON_MAP_PAD * 2;
      const usableH = TYPHOON_MAP_HEIGHT - TYPHOON_MAP_PAD * 2;
      const scale = Math.min(usableW / spanX, usableH / spanY);
      const offsetX = (TYPHOON_MAP_WIDTH - spanX * scale) / 2;
      const offsetY = (TYPHOON_MAP_HEIGHT - spanY * scale) / 2;
      return {
        x: lon => offsetX + (lon - bounds.west) * cosLat * scale,
        y: lat => offsetY + (bounds.north - lat) * scale,
        scale,
        cosLat
      };
    }

    function graticuleFor(bounds, project) {
      const lines = [];
      const startLon = Math.ceil(bounds.west / 10) * 10;
      for (let lon = startLon; lon <= bounds.east; lon += 10) {
        const x = project.x(lon);
        lines.push(h('g', { key: `lon-${lon}` },
          h('line', { x1: x, x2: x, y1: TYPHOON_MAP_PAD, y2: TYPHOON_MAP_HEIGHT - TYPHOON_MAP_PAD, className: 'dshw-grid-line' }),
          h('text', { x, y: TYPHOON_MAP_HEIGHT - TYPHOON_MAP_PAD + 12, className: 'dshw-grid-label', textAnchor: 'middle' }, `${lon}°E`)
        ));
      }
      const startLat = Math.ceil(bounds.south / 10) * 10;
      for (let lat = startLat; lat <= bounds.north; lat += 10) {
        const y = project.y(lat);
        lines.push(h('g', { key: `lat-${lat}` },
          h('line', { x1: TYPHOON_MAP_PAD, x2: TYPHOON_MAP_WIDTH - TYPHOON_MAP_PAD, y1: y, y2: y, className: 'dshw-grid-line' }),
          h('text', { x: TYPHOON_MAP_PAD - 6, y: y + 3, className: 'dshw-grid-label', textAnchor: 'end' }, `${lat}°N`)
        ));
      }
      return lines;
    }

    function referenceCities(bounds, project, lang) {
      return TYPHOON_REFERENCE_CITIES
        .filter(city => city.lon >= bounds.west && city.lon <= bounds.east && city.lat >= bounds.south && city.lat <= bounds.north)
        .map(city => {
          const x = project.x(city.lon);
          const y = project.y(city.lat);
          return h('g', { key: `city-${city.en}`, className: 'dshw-ref-city' },
            h('circle', { cx: x, cy: y, r: 2.2 }),
            h('text', { x: x + 4, y: y + 3 }, lang === 'en' ? city.en : city.zh)
          );
        });
    }

    function windRadiusRings(latest, project) {
      if (!latest || !Array.isArray(latest.windRadii)) return [];
      const kmPerDegLat = 111.32;
      const cx = project.x(latest.lon);
      const cy = project.y(latest.lat);
      // Colour carries the wind-force grade (7 / 10 / 12), matching the legend; the
      // rings stay outline-only so the track underneath is never hidden.
      return latest.windRadii.map((ring, index) => {
        const rx = Math.max(1, (ring.radiusKm / (kmPerDegLat * project.cosLat)) * project.scale);
        const ry = Math.max(1, (ring.radiusKm / kmPerDegLat) * project.scale);
        const color = windRadiusColor(ring.level);
        return h('ellipse', {
          key: `ring-${ring.level || index}`,
          cx,
          cy,
          rx,
          ry,
          style: { stroke: color, fill: color },
          className: `dshw-wind-ring dshw-wind-ring-${index}`
        });
      });
    }

    /** Label/value pairs for one track point, shared by the card and the detail row. */
    function trackPointRows(point, t, lang) {
      const info = describeTrackPoint(point, lang);
      if (!info) return [];
      return [
        { key: 'time', label: lang === 'en' ? 'Time' : '时间', value: info.time || '—' },
        { key: 'intensity', label: lang === 'en' ? 'Intensity' : '强度', value: info.intensity, color: info.color },
        { key: 'position', label: lang === 'en' ? 'Position' : '位置', value: info.position },
        { key: 'pressure', label: t('typhoon.pressure'), value: isNumber(info.pressure) ? `${info.pressure} hPa` : '—' },
        { key: 'wind', label: t('typhoon.wind'), value: isNumber(info.wind) ? `${info.wind} m/s` : '—' },
        {
          key: 'move',
          label: t('typhoon.move'),
          value: [info.moveDirection, isNumber(info.moveSpeed) ? `${info.moveSpeed} km/h` : ''].filter(Boolean).join(' ') || '—'
        }
      ];
    }

    function selectedPointDetail(point, t, lang) {
      const rows = trackPointRows(point, t, lang);
      if (rows.length === 0) return null;
      return h('div', { className: 'dshw-typhoon-detail' },
        rows.map(row => h('div', { className: 'dshw-param', key: row.key },
          h('span', { className: 'dshw-param-k' }, row.label),
          h('span', { className: 'dshw-param-v', style: row.color ? { color: row.color } : null }, row.value)
        ))
      );
    }

    /**
     * The selected fix, floating over the map.
     *
     * A full-size track chart is taller than the viewport, so the detail row below
     * it can sit off-screen; this card is where the click actually becomes visible.
     * It is `pointer-events:none` so it never eats clicks meant for the map; the
     * single action button opts back in.
     */
    function TrackPointCard(props) {
      const { point, t, lang, isCurrent, onBackToCurrent } = props;
      const info = describeTrackPoint(point, lang);
      if (!info) return null;
      const secondLine = [
        isNumber(info.pressure) ? `${info.pressure} hPa` : '',
        isNumber(info.wind) ? `${info.wind} m/s` : '',
        [info.moveDirection, isNumber(info.moveSpeed) ? `${info.moveSpeed} km/h` : ''].filter(Boolean).join(' ')
      ].filter(Boolean).join(' · ');
      return h('div', { className: 'dshw-map-card', 'aria-live': 'polite' },
        h('span', { className: 'dshw-map-card-head' },
          h('span', { className: 'dshw-map-card-badge', style: { background: info.color } }, info.intensity),
          h('span', { className: 'dshw-map-card-time' }, info.time || '—'),
          isCurrent
            ? h('span', { className: 'dshw-map-card-chip' }, t('typhoon.latest'))
            : h('button', {
              type: 'button',
              className: 'dshw-map-card-action',
              onClick: onBackToCurrent,
              title: t('typhoon.backToCurrent')
            }, h(RefreshGlyph, { size: 11 }), t('typhoon.backToCurrent'))
        ),
        h('span', { className: 'dshw-map-card-line' }, secondLine || '—'),
        h('span', { className: 'dshw-map-card-line dshw-map-card-pos' }, info.position)
      );
    }

    function TyphoonLegend(props) {
      const lang = props.lang;
      return h('div', { className: 'dshw-typhoon-legend' },
        TYPHOON_LEVELS.map(level => h('span', { className: 'dshw-legend-item', key: level.code },
          h('i', { className: 'dshw-legend-dot', style: { background: level.color } }),
          lang === 'en' ? level.en : level.zh
        )),
        h('span', { className: 'dshw-legend-sep', 'aria-hidden': 'true' }),
        h('span', { className: 'dshw-legend-item dshw-legend-group' },
          lang === 'en' ? 'Wind rings' : '风圈'
        ),
        Object.keys(WIND_RADIUS_GRADES).map(key => h('span', { className: 'dshw-legend-item', key: `ring-${key}` },
          h('i', { className: 'dshw-legend-ring', style: { borderColor: windRadiusColor(key) } }),
          windRadiusGrade(key, lang)
        ))
      );
    }

    /**
     * Build one SVG path for every land ring that touches the current view.
     *
     * The rings come from the generated `BASEMAP_LAND` (Natural Earth, public
     * domain): land only, no borders. Rendering them with the same projection as the
     * track keeps the coastline and the track aligned, and skipping rings outside
     * the view keeps the DOM to a single <path>.
     */
    function landPathFor(bounds, project) {
      let path = '';
      for (const ring of BASEMAP_LAND) {
        if (ring[2] < bounds.west || ring[0] > bounds.east || ring[3] < bounds.south || ring[1] > bounds.north) continue;
        let ringPath = '';
        for (let index = 4; index < ring.length; index += 2) {
          const x = project.x(ring[index]).toFixed(1);
          const y = project.y(ring[index + 1]).toFixed(1);
          ringPath += `${index === 4 ? 'M' : 'L'}${x} ${y}`;
        }
        if (ringPath) path += `${ringPath}Z`;
      }
      return path;
    }

    /** The typhoon tab body. */
    function TyphoonView(props) {
      const { typhoon, typhoonList, t, lang, onSelectTyphoon } = props;
      const [selectedIndex, setSelectedIndex] = React.useState(-1);

      React.useEffect(() => {
        setSelectedIndex(-1);
      }, [typhoon && typhoon.id]);

      // The projection and the (several-kilobyte) land path only depend on the
      // track, so they are computed once per typhoon instead of per render — a click
      // on a track point re-renders the view and must not rebuild the coastline.
      const geometry = React.useMemo(() => {
        if (!typhoon) return null;
        const viewBounds = trackBounds(typhoon, 3);
        if (!viewBounds) return null;
        const viewProjection = createProjection(viewBounds);
        return { bounds: viewBounds, project: viewProjection, land: landPathFor(viewBounds, viewProjection) };
      }, [typhoon]);

      if (!typhoon) {
        return h('section', { className: 'dshw-card' },
          h('p', { className: 'dshw-note' }, t('typhoon.none'))
        );
      }

      if (!geometry) {
        return h('section', { className: 'dshw-card' },
          h('p', { className: 'dshw-note' }, t('typhoon.none'))
        );
      }

      const bounds = geometry.bounds;
      const project = geometry.project;
      const points = typhoon.points || [];
      const forecast = typhoon.forecast || [];
      const latest = typhoon.latest || points[points.length - 1];
      const latestLevel = describeTyphoonIntensity(latest && latest.intensity, lang);
      const peak = peakIntensity(typhoon);
      const active = typhoon.status === 'start';
      const selected = selectedIndex >= 0 && selectedIndex < points.length ? points[selectedIndex] : latest;
      const atCurrentFix = isCurrentFix(selectedIndex, points.length);

      const trackPoints = points.map(point => `${project.x(point.lon).toFixed(1)},${project.y(point.lat).toFixed(1)}`).join(' ');
      const forecastPoints = latest
        ? [`${project.x(latest.lon).toFixed(1)},${project.y(latest.lat).toFixed(1)}`]
          .concat(forecast.map(point => `${project.x(point.lon).toFixed(1)},${project.y(point.lat).toFixed(1)}`))
          .join(' ')
        : '';

      const trackDots = points.map((point, index) => {
        const level = describeTyphoonIntensity(point.intensity, lang);
        const info = describeTrackPoint(point, lang);
        const isSelected = index === selectedIndex || (selectedIndex < 0 && index === points.length - 1);
        const cx = project.x(point.lon);
        const cy = project.y(point.lat);
        return h('g', {
          key: point.id || `point-${index}`,
          className: 'dshw-track-dot',
          onClick: () => setSelectedIndex(index),
          role: 'button',
          tabIndex: 0,
          'aria-label': `${info.time || ''} ${level.label}`.trim(),
          onKeyDown: event => {
            if (event.key === 'Enter' || event.key === ' ') {
              event.preventDefault();
              setSelectedIndex(index);
            }
          }
        },
          h('title', null, `${point.timeText} · ${level.label} · ${isNumber(point.pressure) ? Math.round(point.pressure) + ' hPa' : ''}`),
          // Invisible hit area: a 4 px dot is impossible to hit, and points close in
          // time overlap, so the target is deliberately much larger than the dot.
          h('circle', { className: 'dshw-hit', cx, cy, r: 9 }),
          h('circle', { className: 'dshw-track-point', cx, cy, r: isSelected ? 6 : 4, fill: level.color }),
          isSelected ? h('circle', { className: 'dshw-track-selected-ring', cx, cy, r: 10 }) : null
        );
      });

      const forecastDots = forecast.map((point, index) => {
        const level = describeTyphoonIntensity(point.intensity, lang);
        return h('g', { key: `fc-${index}`, className: 'dshw-forecast-dot' },
          h('title', null, `+${point.hour}h · ${level.label}`),
          h('circle', { cx: project.x(point.lon), cy: project.y(point.lat), r: 3.4, stroke: level.color }),
          index % 2 === 0
            ? h('text', { x: project.x(point.lon) + 5, y: project.y(point.lat) - 4, className: 'dshw-forecast-label' }, `+${point.hour}h`)
            : null
        );
      });

      const latestMarker = latest
        ? h('g', { className: 'dshw-latest-marker' },
          h('circle', { cx: project.x(latest.lon), cy: project.y(latest.lat), r: 11, className: 'dshw-latest-ring' }),
          h('circle', { cx: project.x(latest.lon), cy: project.y(latest.lat), r: 3.2, fill: latestLevel.color })
        )
        : null;

      // Crosshair through the selected fix: the click has to be visible on the map
      // itself, not only in a card that may be scrolled out of view.
      const crosshair = selected
        ? h('g', { className: 'dshw-crosshair' },
          h('line', { x1: 0, x2: TYPHOON_MAP_WIDTH, y1: project.y(selected.lat), y2: project.y(selected.lat) }),
          h('line', { x1: project.x(selected.lon), x2: project.x(selected.lon), y1: 0, y2: TYPHOON_MAP_HEIGHT })
        )
        : null;

      return h('div', { className: 'dshw-typhoon' },
        h('section', { className: 'dshw-card dshw-typhoon-head' },
          h('div', { className: 'dshw-typhoon-title-row' },
            h('div', { className: 'dshw-typhoon-name' },
              h('strong', null, typhoon.nameZh || typhoon.nameEn || `#${typhoon.id}`),
              h('span', { className: 'dshw-chip' }, formatTyphoonNumber(typhoon.number, lang)),
              h('span', { className: `dshw-chip ${active ? 'dshw-chip-active' : ''}` }, active ? t('typhoon.active') : t('typhoon.ended'))
            ),
            typhoonList && typhoonList.length > 1
              ? h('label', { className: 'dshw-typhoon-select' },
                h('span', { className: 'dshw-note' }, t('typhoon.select')),
                h('select', {
                  className: 'dshw-select',
                  value: typhoon.id,
                  onChange: event => onSelectTyphoon && onSelectTyphoon(Number(event.target.value))
                }, typhoonList.slice(0, 12).map(item => h('option', { key: item.id, value: item.id },
                  `${item.nameZh || item.nameEn} ${formatTyphoonNumber(item.number, lang)}`
                )))
              )
              : null,
            h('a', {
              className: 'dshw-btn',
              href: 'https://typhoon.nmc.cn/web.html',
              target: '_blank',
              rel: 'noreferrer noopener'
            }, t('typhoon.official'))
          ),
          h('div', { className: 'dshw-typhoon-stats' },
            h('div', { className: 'dshw-param' },
              h('span', { className: 'dshw-param-k' }, t('typhoon.latest')),
              h('span', { className: 'dshw-param-v' }, latest && latest.timeText ? latest.timeText : '—')
            ),
            h('div', { className: 'dshw-param' },
              h('span', { className: 'dshw-param-k' }, lang === 'en' ? 'Intensity' : '强度'),
              h('span', { className: 'dshw-param-v', style: { color: latestLevel.color } }, latestLevel.label)
            ),
            h('div', { className: 'dshw-param' },
              h('span', { className: 'dshw-param-k' }, t('typhoon.pressure')),
              h('span', { className: 'dshw-param-v' }, latest && isNumber(latest.pressure) ? `${Math.round(latest.pressure)} hPa` : '—')
            ),
            h('div', { className: 'dshw-param' },
              h('span', { className: 'dshw-param-k' }, t('typhoon.wind')),
              h('span', { className: 'dshw-param-v' }, latest && isNumber(latest.wind) ? `${Math.round(latest.wind)} m/s` : '—')
            ),
            h('div', { className: 'dshw-param' },
              h('span', { className: 'dshw-param-k' }, t('typhoon.peak')),
              h('span', { className: 'dshw-param-v', style: { color: peak.color } }, peak.label)
            ),
            h('div', { className: 'dshw-param' },
              h('span', { className: 'dshw-param-k' }, lang === 'en' ? 'Position' : '位置'),
              h('span', { className: 'dshw-param-v' }, latest ? `${latest.lat.toFixed(1)}°N ${latest.lon.toFixed(1)}°E` : '—')
            )
          ),
          h('p', { className: 'dshw-note' }, t('typhoon.hint'))
        ),

        h('section', { className: 'dshw-card dshw-typhoon-map' },
          h('svg', {
            viewBox: `0 0 ${TYPHOON_MAP_WIDTH} ${TYPHOON_MAP_HEIGHT}`,
            className: 'dshw-typhoon-svg',
            role: 'img',
            'aria-label': t('typhoon.title')
          },
            h('rect', { x: 0, y: 0, width: TYPHOON_MAP_WIDTH, height: TYPHOON_MAP_HEIGHT, className: 'dshw-map-bg' }),
            h('path', { className: 'dshw-land', d: geometry.land }),
            graticuleFor(bounds, project),
            referenceCities(bounds, project, lang),
            windRadiusRings(latest, project),
            crosshair,
            forecastPoints ? h('polyline', { className: 'dshw-forecast-line', points: forecastPoints }) : null,
            trackPoints ? h('polyline', { className: 'dshw-track-line', points: trackPoints }) : null,
            trackDots,
            forecastDots,
            latestMarker
          ),
          h(TrackPointCard, {
            point: selected,
            t,
            lang,
            isCurrent: atCurrentFix,
            onBackToCurrent: () => setSelectedIndex(-1)
          }),
          h(TyphoonLegend, { lang }),
          typhoon.forecastBase
            ? h('p', { className: 'dshw-note' }, `${t('typhoon.forecast')} · ${typhoon.forecastBase}`)
            : null
        ),

        selectedPointDetail(selected, t, lang),

        h('p', { className: 'dshw-note dshw-typhoon-source' },
          [t('typhoon.source'), latest && latest.timeText ? latest.timeText : '', t('typhoon.land')].filter(Boolean).join(' · ')
        )
      );
    }

    /**
     * Shown when the CMA list carries no active (numbered) typhoon.
     *
     * The most recent ended system is still offered behind a button, because its
     * track is often what people come to look at out of season.
     */
    function NoActiveTyphoon(props) {
      const { typhoon, t, lang } = props;
      const [showLast, setShowLast] = React.useState(false);

      if (showLast && typhoon) {
        return h('div', { className: 'dshw-typhoon' },
          h('div', { className: 'dshw-typhoon-nonebar' },
            h('span', { className: 'dshw-note' }, t('typhoon.noActive')),
            h('button', {
              type: 'button',
              className: 'dshw-btn',
              onClick: () => setShowLast(false)
            }, t('typhoon.hideLatest'))
          ),
          h(TyphoonView, {
            typhoon,
            typhoonList: [],
            t,
            lang,
            onSelectTyphoon: () => {}
          })
        );
      }

      return h('section', { className: 'dshw-card dshw-typhoon-empty' },
        h('div', { className: 'dshw-typhoon-empty-icon', 'aria-hidden': 'true' }, '🌀'),
        h('h2', { className: 'dshw-section-title' }, t('typhoon.noActive')),
        h('p', { className: 'dshw-note' }, t('typhoon.noActiveHint')),
        h('div', { className: 'dshw-typhoon-empty-actions' },
          typhoon
            ? h('button', {
              type: 'button',
              className: 'dshw-btn',
              onClick: () => setShowLast(true)
            }, t('typhoon.viewLatest'))
            : null,
          h('a', {
            className: 'dshw-btn',
            href: 'https://typhoon.nmc.cn/web.html',
            target: '_blank',
            rel: 'noreferrer noopener'
          }, t('typhoon.official'))
        )
      );
    }

    /* ---- src/ui/media-zoom.js ---- */
    /**
     * 共用的大图查看层（雷达拼图 / 卫星云图都用它）。
     *
     * `position: fixed` 的整窗浮层：点背景或按 Esc 关闭，图片等比铺满窗口，
     * 底部保留「打开原图 / 关闭」两个动作。
     */
    function MediaZoom(props) {
      const { open, url, alt, meta, t, onClose } = props;

      React.useEffect(() => {
        if (!open) return undefined;
        const onKeyDown = event => {
          if (event.key === 'Escape') onClose();
        };
        document.addEventListener('keydown', onKeyDown);
        return () => document.removeEventListener('keydown', onKeyDown);
      }, [open, onClose]);

      if (!open || !url) return null;

      return h('div', {
        className: 'dshw-zoom',
        role: 'dialog',
        'aria-modal': 'true',
        'aria-label': t('zoom.title'),
        onClick: onClose
      },
        h('img', {
          className: 'dshw-zoom-img',
          src: url,
          alt: alt || '',
          referrerPolicy: 'no-referrer',
          decoding: 'async',
          onClick: event => event.stopPropagation()
        }),
        h('div', { className: 'dshw-zoom-bar', onClick: event => event.stopPropagation() },
          h('span', { className: 'dshw-zoom-meta' }, meta || ''),
          h('a', {
            className: 'dshw-btn',
            href: url,
            target: '_blank',
            rel: 'noreferrer noopener'
          }, t('zoom.openOriginal')),
          h('button', { type: 'button', className: 'dshw-btn', onClick: onClose }, t('zoom.close'))
        )
      );
    }

    /* ---- src/ui/history-chart.js ---- */
    /**
     * 历史气温曲线（折线，不是 K 线）：近 7 / 30 天的日最高、日最低与平均。
     *
     * 坐标系是**精确**的：SVG 只画线、温度带和网格（横向拉伸不影响几何），
     * 所有文字和点位都用 HTML 按同一套坐标函数定位——SVG 高度固定 160px，
     * 所以 y 直接按像素落位，x 用百分比，比例永远与数据一致。
     * 每个点都有自己的圆点与 `<title>`，悬停能看到当天精确数值。
     */

    const HISTORY_CACHE_TTL_MS = 10 * 60 * 1000;
    let historyCacheInstance = null;
    function historyCache() {
      if (!historyCacheInstance) {
        historyCacheInstance = createTtlCache(getPanelStorage(), `${PANEL_ID}:history:`, () => Date.now());
      }
      return historyCacheInstance;
    }

    const HISTORY_W = 660;
    const HISTORY_H = 160;
    const HISTORY_TOP = 12;
    const HISTORY_BOTTOM = 22;
    const HISTORY_AXIS_H = 16;

    /** 把区间切成 3~5 个「好看」的刻度值（1 / 2 / 5 × 10ⁿ 步长）。 */
    function historyTicks(low, high) {
      const range = Math.max(0.5, high - low);
      const raw = range / 4;
      const magnitude = Math.pow(10, Math.floor(Math.log10(raw)));
      const candidates = [1, 2, 2.5, 5, 10];
      let step = magnitude;
      for (const candidate of candidates) {
        if (candidate * magnitude >= raw) {
          step = candidate * magnitude;
          break;
        }
      }
      const ticks = [];
      const start = Math.ceil(low / step) * step;
      for (let value = start; value <= high + 1e-9; value += step) {
        ticks.push(Number(value.toFixed(2)));
      }
      // 两端补上极值，保证最高/最低点一定有刻度可对。
      if (!ticks.includes(Number(high.toFixed(2)))) ticks.push(Number(high.toFixed(2)));
      if (!ticks.includes(Number(low.toFixed(2)))) ticks.push(Number(low.toFixed(2)));
      return ticks.sort((left, right) => left - right);
    }

    function HistoryChart(props) {
      const { rows, units, lang, label } = props;
      const list = Array.isArray(rows) ? rows.filter(row => isNumber(row.max) || isNumber(row.min)) : [];
      if (list.length === 0) return null;

      const values = [];
      list.forEach(row => {
        if (isNumber(row.max)) values.push(row.max);
        if (isNumber(row.min)) values.push(row.min);
      });
      if (values.length === 0) return null;

      const high = Math.max(...values);
      const low = Math.min(...values);
      const span = Math.max(1, high - low);
      const plotWidth = HISTORY_W;
      const plotHeight = HISTORY_H - HISTORY_TOP - HISTORY_BOTTOM;

      const xFor = index => plotWidth * (list.length === 1 ? 0.5 : index / (list.length - 1));
      const yFor = value => HISTORY_TOP + plotHeight * (1 - (value - low) / span);
      const xPct = index => `${((xFor(index) / HISTORY_W) * 100).toFixed(3)}%`;

      const line = key => list
        .map((row, index) => (isNumber(row[key]) ? `${xFor(index).toFixed(1)},${yFor(row[key]).toFixed(1)}` : null))
        .filter(Boolean)
        .join(' ');

      const bandPoints = [];
      const bandBack = [];
      list.forEach((row, index) => {
        if (isNumber(row.max) && isNumber(row.min)) {
          bandPoints.push(`${xFor(index).toFixed(1)},${yFor(row.max).toFixed(1)}`);
          bandBack.unshift(`${xFor(index).toFixed(1)},${yFor(row.min).toFixed(1)}`);
        }
      });
      const band = bandPoints.length > 1 ? bandPoints.concat(bandBack).join(' ') : '';

      const ticks = historyTicks(low, high);
      // 7 天每天标注；30 天等距抽稀，但最后一天一定标出来。
      const labelStep = list.length <= 10 ? 1 : Math.ceil(list.length / 7);
      const xLabelIndexes = list
        .map((row, index) => index)
        .filter(index => index % labelStep === 0 || index === list.length - 1);

      const grid = ticks.map(value => h('line', {
        key: `grid-${value}`,
        x1: 0,
        x2: HISTORY_W,
        y1: yFor(value).toFixed(1),
        y2: yFor(value).toFixed(1),
        className: 'dshw-history-grid'
      }));

      const dots = [];
      list.forEach((row, index) => {
        ['max', 'min'].forEach(key => {
          if (!isNumber(row[key])) return;
          dots.push(h('span', {
            key: `dot-${key}-${row.date}`,
            className: `dshw-history-dot dshw-history-dot-${key}`,
            style: { left: xPct(index), top: `${yFor(row[key]).toFixed(1)}px` },
            title: `${formatMonthDay(row.date, lang)} · ${key === 'max' ? props.highLabel : props.lowLabel} `
              + `${formatTemperature(row[key], units)}`
          }));
        });
      });

      return h('div', { className: 'dshw-history-canvas' },
        h('div', { className: 'dshw-history-axis-y', 'aria-hidden': 'true' },
          ticks.map(value => h('span', {
            key: `y-${value}`,
            style: { top: `${yFor(value).toFixed(1)}px` }
          }, formatTemperature(value, units)))
        ),
        h('div', { className: 'dshw-history-plot' },
          h('svg', {
            className: 'dshw-history-svg',
            viewBox: `0 0 ${HISTORY_W} ${HISTORY_H}`,
            preserveAspectRatio: 'none',
            role: 'img',
            'aria-label': label || ''
          },
            grid,
            band ? h('polygon', { className: 'dshw-history-band', points: band }) : null,
            h('polyline', { className: 'dshw-history-max', points: line('max') }),
            h('polyline', { className: 'dshw-history-min', points: line('min') })
          ),
          dots,
          h('div', { className: 'dshw-history-axis-x' },
            xLabelIndexes.map(index => h('span', {
              key: `x-${list[index].date}`,
              className: `dshw-history-tick${index === 0 ? ' dshw-history-tick-start' : index === list.length - 1 ? ' dshw-history-tick-end' : ''}`,
              style: { left: xPct(index) }
            }, formatMonthDay(list[index].date, lang)))
          )
        )
      );
    }

    function HistoryCard(props) {
      const { t, lang, units, location, timezone } = props;
      const [range, setRange] = React.useState(HISTORY_DEFAULT_RANGE);
      const [status, setStatus] = React.useState('loading');
      const [rows, setRows] = React.useState([]);
      const lat = location ? location.lat : null;
      const lon = location ? location.lon : null;
      const cacheKey = isNumber(lat) && isNumber(lon) ? `${lat.toFixed(3)},${lon.toFixed(3)},${range}` : '';

      React.useEffect(() => {
        if (!isNumber(lat) || !isNumber(lon)) return undefined;
        const cached = historyCache().get(cacheKey);
        if (Array.isArray(cached) && cached.length > 0) {
          setRows(cached);
          setStatus('ready');
          return undefined;
        }
        let alive = true;
        const controller = new AbortController();
        setStatus('loading');

        const load = async () => {
          for (const host of HISTORY_HOSTS) {
            try {
              const res = await fetch(buildHistoryUrl(host, lat, lon, range, { timezone }), { signal: controller.signal });
              if (!res.ok) throw new Error(String(res.status));
              const payload = await res.json();
              const list = normalizeHistory(payload, range);
              if (list.length > 0) return list;
            } catch (error) {
              if (controller.signal.aborted) return [];
            }
          }
          return [];
        };

        load()
          .then(list => {
            if (!alive) return;
            if (list.length > 0) historyCache().set(cacheKey, list, HISTORY_CACHE_TTL_MS);
            setRows(list);
            setStatus(list.length > 0 ? 'ready' : 'empty');
          })
          .catch(() => {
            if (alive) setStatus('error');
          });

        return () => {
          alive = false;
          controller.abort();
        };
      }, [lat, lon, range, timezone, cacheKey]);

      const summary = historySummary(rows);

      return h('section', { className: 'dshw-card dshw-history' },
        h('div', { className: 'dshw-history-head' },
          h('h2', { className: 'dshw-section-title' }, t('history.title')),
          h('div', { className: 'dshw-segmented dshw-segmented-compact', role: 'group', 'aria-label': t('history.title') },
            HISTORY_RANGES.map(days => h('button', {
              type: 'button',
              key: `range-${days}`,
              className: `dshw-seg${range === days ? ' dshw-seg-active' : ''}`,
              'aria-pressed': range === days ? 'true' : 'false',
              onClick: () => setRange(days)
            }, t('history.range', { n: days })))
          )
        ),
        status === 'ready'
          ? h(HistoryChart, {
            rows,
            units,
            lang,
            label: t('history.title'),
            highLabel: t('history.high'),
            lowLabel: t('history.low')
          })
          : null,
        status === 'loading'
          ? h('div', { className: 'dshw-skeleton dshw-history-skeleton' })
          : null,
        status === 'empty' || status === 'error'
          ? h('p', { className: 'dshw-note' }, t(status === 'empty' ? 'history.empty' : 'history.error'))
          : null,
        status === 'ready'
          ? h('div', { className: 'dshw-history-foot' },
            h('span', { className: 'dshw-history-legend' },
              h('i', { className: 'dshw-legend-swatch dshw-legend-max' }), t('history.high'),
              h('i', { className: 'dshw-legend-swatch dshw-legend-min' }), t('history.low')
            ),
            h('span', { className: 'dshw-note' },
              `${t('history.high')} ${formatTemperature(summary.high, units)} · ${t('history.low')} ${formatTemperature(summary.low, units)}`
              + (isNumber(summary.mean) ? ` · ${t('history.mean')} ${formatTemperature(summary.mean, units)}` : '')
            )
          )
          : null,
        h('p', { className: 'dshw-note' }, t('history.note'))
      );
    }

    /* ---- src/ui/satellite-view.js ---- */
    /**
     * 卫星云图页：只做国内官方源 —— 国家卫星气象中心（NSMC）。
     *
     * 每个产品都有一份 XML 清单：
     *   https://img.nsmc.org.cn/PORTAL/NSMC/XML/<GROUP>/<NAME>.xml
     * 里面逐帧列 `<image time="…" url="//img.nsmc.org.cn/…">`，实测清单带
     * `Access-Control-Allow-Origin: *`，图片本身也能直连。
     */

    const NSMC_CACHE_TTL_MS = 5 * 60 * 1000;
    let nsmcCacheInstance = null;
    function nsmcCache() {
      if (!nsmcCacheInstance) {
        nsmcCacheInstance = createTtlCache(getPanelStorage(), `${PANEL_ID}:nsmc:`, () => Date.now());
      }
      return nsmcCacheInstance;
    }

    function SatelliteView(props) {
      const { t, lang } = props;
      const [productId, setProductId] = React.useState(NSMC_PRODUCTS[0].id);
      const [frames, setFrames] = React.useState([]);
      const [status, setStatus] = React.useState('loading');
      const [index, setIndex] = React.useState(0);
      const [zoomed, setZoomed] = React.useState(false);
      const [loadedUrl, setLoadedUrl] = React.useState('');

      const product = nsmcProduct(productId);

      React.useEffect(() => {
        const cached = nsmcCache().get(productId);
        if (Array.isArray(cached) && cached.length > 0) {
          setFrames(cached);
          setStatus('ready');
          setIndex(0);
          return undefined;
        }
        let alive = true;
        const controller = new AbortController();
        setStatus('loading');
        setFrames([]);
        setIndex(0);

        fetch(nsmcManifestUrl(product), { signal: controller.signal })
          .then(res => {
            if (!res.ok) throw new Error(String(res.status));
            return res.text();
          })
          .then(text => {
            if (!alive) return;
            const list = parseNsmcManifest(text);
            if (list.length > 0) nsmcCache().set(productId, list, NSMC_CACHE_TTL_MS);
            setFrames(list);
            setStatus(list.length > 0 ? 'ready' : 'empty');
          })
          .catch(() => {
            if (alive) setStatus('error');
          });

        return () => {
          alive = false;
          controller.abort();
        };
      }, [productId]);

      const safeIndex = Math.min(index, Math.max(0, frames.length - 1));
      const frame = frames[safeIndex] || null;
      const url = frame ? frame.url : '';
      const when = frame ? formatNsmcTime(frame.time, lang) : '';
      const meta = frame ? `${nsmcProductName(product, lang)} · ${when}` : '';
      const isLoaded = Boolean(url) && loadedUrl === url;

      const step = delta => {
        const next = Math.min(frames.length - 1, Math.max(0, safeIndex + delta));
        setIndex(next);
      };

      return h('section', { className: 'dshw-card dshw-sat' },
        h('div', { className: 'dshw-sat-head' },
          h('h2', { className: 'dshw-section-title' }, t('sat.title')),
          h('span', { className: 'dshw-note' }, t('sat.source'))
        ),
        h('div', { className: 'dshw-sat-controls' },
          h('label', { className: 'dshw-sat-field' },
            h('span', { className: 'dshw-note' }, t('sat.product')),
            h('select', {
              className: 'dshw-radar-select',
              value: productId,
              onChange: event => setProductId(event.target.value),
              'aria-label': t('sat.product')
            }, NSMC_PRODUCTS.map(item => h('option', { key: item.id, value: item.id },
              nsmcProductName(item, lang)
            )))
          ),
          h('div', { className: 'dshw-sat-field' },
            h('span', { className: 'dshw-note' }, t('sat.time')),
            h('strong', { className: 'dshw-radar-clock' }, when || '—')
          )
        ),
        frames.length > 1
          ? h('div', { className: 'dshw-radar-scrub' },
            h('button', {
              type: 'button',
              className: 'dshw-btn dshw-btn-icon',
              onClick: () => step(1),
              disabled: safeIndex >= frames.length - 1,
              title: t('sat.prev'),
              'aria-label': t('sat.prev')
            }, '‹'),
            h('input', {
              className: 'dshw-radar-range',
              type: 'range',
              min: 0,
              max: Math.max(0, frames.length - 1),
              step: 1,
              value: safeIndex,
              'aria-label': t('sat.time'),
              onChange: event => setIndex(Number(event.target.value) || 0)
            }),
            h('button', {
              type: 'button',
              className: 'dshw-btn dshw-btn-icon',
              onClick: () => step(-1),
              disabled: safeIndex <= 0,
              title: t('sat.next'),
              'aria-label': t('sat.next')
            }, '›'),
            h('button', {
              type: 'button',
              className: 'dshw-btn',
              onClick: () => setIndex(0)
            }, t('radar.latest'))
          )
          : null,
        h('div', { className: `dshw-media-frame${isLoaded ? ' dshw-media-frame-ready' : ''}` },
          isLoaded ? null : h('div', { className: 'dshw-media-skeleton', 'aria-hidden': 'true' }),
          status === 'loading'
            ? h('p', { className: 'dshw-note dshw-media-broken' }, t('sat.loading'))
            : null,
          status === 'empty' || status === 'error'
            ? h('p', { className: 'dshw-note dshw-media-broken' }, t(status === 'empty' ? 'sat.empty' : 'sat.error'))
            : null,
          url
            ? h('button', {
              type: 'button',
              className: 'dshw-media-link',
              onClick: () => setZoomed(true),
              title: t('sat.zoomHint'),
              'aria-label': t('sat.zoomHint')
            }, h('img', {
              key: url,
              className: 'dshw-media-img',
              src: url,
              alt: meta,
              referrerPolicy: 'no-referrer',
              loading: 'eager',
              decoding: 'async',
              onLoad: () => setLoadedUrl(url),
              onError: () => setLoadedUrl('')
            }))
            : null
        ),
        h(MediaZoom, { open: zoomed, url, alt: meta, meta, t, onClose: () => setZoomed(false) }),
        h('div', { className: 'dshw-radar-foot' },
          h('span', { className: 'dshw-note' }, t('sat.note')),
          h('a', {
            className: 'dshw-link',
            href: 'https://www.nsmc.org.cn/nsmc/cn/image/index.html',
            target: '_blank',
            rel: 'noreferrer noopener'
          }, t('sat.official'))
        )
      );
    }

    /* ---- src/ui/pro-chart-view.js ---- */
    /**
     * 专业栏：西北太平洋海表温度 + ECMWF 中国区域天气图。
     *
     * 图片来自 easterlywave.com 的静态产品目录（该站的 JSON 接口需要 cookie + CSRF
     * 且没有 CORS，浏览器里调不到，所以这里只按命名规则拼图片地址，并用
     * onerror 做「新时次还没出图」的回退）。
     */

    function ProChartView(props) {
      const { t, lang } = props;

      const [sstRegionId, setSstRegionId] = React.useState(SST_REGIONS[0].id);
      const [sstDay, setSstDay] = React.useState(0);
      const [sstLoaded, setSstLoaded] = React.useState('');
      const [sstFailed, setSstFailed] = React.useState(false);

      const [ecmwfCodeId, setEcmwfCodeId] = React.useState(ECMWF_CODES[0].id);
      const [runIndex, setRunIndex] = React.useState(0);
      const [hourIndex, setHourIndex] = React.useState(0);
      const [ecmwfLoaded, setEcmwfLoaded] = React.useState('');
      const [ecmwfFailed, setEcmwfFailed] = React.useState(false);

      const [zoom, setZoom] = React.useState(null);

      const runs = React.useMemo(() => ecmwfRuns(Date.now()), []);
      const run = runs[Math.min(runIndex, runs.length - 1)] || '';
      const hour = ECMWF_HOURS[Math.min(hourIndex, ECMWF_HOURS.length - 1)];

      const sstStampValue = sstStamp(sstDay);
      const sstUrl = sstImageUrl(sstRegionId, sstStampValue);
      const sstMeta = `${sstRegionName(sstRegion(sstRegionId), lang)} · ${sstLabel(sstStampValue)}`;

      const ecmwfUrl = ecmwfImageUrl(ecmwfCodeId, run, hour);
      const ecmwfMeta = `${ecmwfCodeName(ecmwfCode(ecmwfCodeId), lang)} · ${ecmwfRunLabel(run)} · +${hour}h`;

      const sstReady = Boolean(sstUrl) && sstLoaded === sstUrl;
      const ecmwfReady = Boolean(ecmwfUrl) && ecmwfLoaded === ecmwfUrl;

      // 海温按日发布，最新一天偶尔还没图 → 自动往前退一天（最多 3 天）。
      const handleSstError = () => {
        setSstLoaded('');
        setSstFailed(true);
        if (sstDay < 3) setSstDay(sstDay + 1);
      };

      // ECMWF 一天两个时次，最新时次常还没出图 → 依次回退。
      const handleEcmwfError = () => {
        setEcmwfLoaded('');
        setEcmwfFailed(true);
        if (runIndex < runs.length - 1) setRunIndex(runIndex + 1);
      };

      const frame = (url, ready, brokenText, alt, onLoad, onError) => h('div', {
        className: `dshw-media-frame${ready ? ' dshw-media-frame-ready' : ''}`
      },
        ready ? null : h('div', { className: 'dshw-media-skeleton', 'aria-hidden': 'true' }),
        !ready && brokenText ? h('p', { className: 'dshw-note dshw-media-broken' }, brokenText) : null,
        url
          ? h('button', {
            type: 'button',
            className: 'dshw-media-link',
            onClick: () => setZoom({ url, meta: alt }),
            title: t('sat.zoomHint'),
            'aria-label': t('sat.zoomHint')
          }, h('img', {
            key: url,
            className: 'dshw-media-img',
            src: url,
            alt,
            referrerPolicy: 'no-referrer',
            loading: 'eager',
            decoding: 'async',
            onLoad,
            onError
          }))
          : null
      );

      return h('div', { className: 'dshw-pro' },
        h('section', { className: 'dshw-card dshw-sat' },
          h('div', { className: 'dshw-sat-head' },
            h('h2', { className: 'dshw-section-title' }, t('pro.sst.title')),
            h('a', { className: 'dshw-link', href: EW_SST_PAGE, target: '_blank', rel: 'noreferrer noopener' }, t('sat.official'))
          ),
          h('div', { className: 'dshw-sat-controls' },
            h('label', { className: 'dshw-sat-field' },
              h('span', { className: 'dshw-note' }, t('pro.sst.region')),
              h('select', {
                className: 'dshw-radar-select',
                value: sstRegionId,
                onChange: event => setSstRegionId(event.target.value),
                'aria-label': t('pro.sst.region')
              }, SST_REGIONS.map(item => h('option', { key: item.id, value: item.id },
                sstRegionName(item, lang)
              )))
            ),
            h('div', { className: 'dshw-sat-field' },
              h('span', { className: 'dshw-note' }, t('pro.sst.date')),
              h('strong', { className: 'dshw-radar-clock' }, sstLabel(sstStampValue))
            )
          ),
          h('div', { className: 'dshw-radar-scrub' },
            h('button', {
              type: 'button',
              className: 'dshw-btn dshw-btn-icon',
              onClick: () => setSstDay(Math.min(SST_DAYS - 1, sstDay + 1)),
              disabled: sstDay >= SST_DAYS - 1,
              title: t('pro.sst.older'),
              'aria-label': t('pro.sst.older')
            }, '‹'),
            h('input', {
              className: 'dshw-radar-range',
              type: 'range',
              min: 0,
              max: SST_DAYS - 1,
              step: 1,
              value: sstDay,
              'aria-label': t('pro.sst.date'),
              onChange: event => setSstDay(Number(event.target.value) || 0)
            }),
            h('button', {
              type: 'button',
              className: 'dshw-btn dshw-btn-icon',
              onClick: () => setSstDay(Math.max(0, sstDay - 1)),
              disabled: sstDay <= 0,
              title: t('pro.sst.newer'),
              'aria-label': t('pro.sst.newer')
            }, '›'),
            h('button', { type: 'button', className: 'dshw-btn', onClick: () => setSstDay(0) }, t('radar.latest'))
          ),
          frame(sstUrl, sstReady, sstFailed ? t('pro.sst.unavailable') : null, sstMeta,
            () => { setSstLoaded(sstUrl); setSstFailed(false); }, handleSstError),
          h('p', { className: 'dshw-note' }, t('pro.sst.note'))
        ),

        h('section', { className: 'dshw-card dshw-sat' },
          h('div', { className: 'dshw-sat-head' },
            h('h2', { className: 'dshw-section-title' }, t('pro.ecmwf.title')),
            h('a', {
              className: 'dshw-link',
              href: ewModelPage(ecmwfCodeId),
              target: '_blank',
              rel: 'noreferrer noopener'
            }, t('sat.official'))
          ),
          h('div', { className: 'dshw-sat-controls' },
            h('label', { className: 'dshw-sat-field' },
              h('span', { className: 'dshw-note' }, t('pro.ecmwf.code')),
              h('select', {
                className: 'dshw-radar-select',
                value: ecmwfCodeId,
                onChange: event => {
                  setEcmwfCodeId(event.target.value);
                  setEcmwfLoaded('');
                },
                'aria-label': t('pro.ecmwf.code')
              }, ECMWF_CODES.map(item => h('option', { key: item.id, value: item.id },
                ecmwfCodeName(item, lang)
              )))
            ),
            h('div', { className: 'dshw-sat-field' },
              h('span', { className: 'dshw-note' }, t('pro.ecmwf.run')),
              h('strong', { className: 'dshw-radar-clock' }, ecmwfRunLabel(run) || '—')
            ),
            h('div', { className: 'dshw-sat-field' },
              h('span', { className: 'dshw-note' }, t('pro.ecmwf.hour')),
              h('strong', { className: 'dshw-radar-clock' }, `+${hour}h`)
            )
          ),
          h('div', { className: 'dshw-radar-scrub' },
            h('button', {
              type: 'button',
              className: 'dshw-btn dshw-btn-icon',
              onClick: () => setHourIndex(Math.max(0, hourIndex - 1)),
              disabled: hourIndex <= 0,
              title: t('sat.prev'),
              'aria-label': t('sat.prev')
            }, '‹'),
            h('input', {
              className: 'dshw-radar-range',
              type: 'range',
              min: 0,
              max: ECMWF_HOURS.length - 1,
              step: 1,
              value: hourIndex,
              'aria-label': t('pro.ecmwf.hour'),
              onChange: event => setHourIndex(Number(event.target.value) || 0)
            }),
            h('button', {
              type: 'button',
              className: 'dshw-btn dshw-btn-icon',
              onClick: () => setHourIndex(Math.min(ECMWF_HOURS.length - 1, hourIndex + 1)),
              disabled: hourIndex >= ECMWF_HOURS.length - 1,
              title: t('sat.next'),
              'aria-label': t('sat.next')
            }, '›'),
            h('button', {
              type: 'button',
              className: 'dshw-btn',
              onClick: () => {
                setHourIndex(0);
                setRunIndex(0);
              }
            }, t('radar.latest'))
          ),
          frame(ecmwfUrl, ecmwfReady, ecmwfFailed ? t('pro.ecmwf.unavailable') : null, ecmwfMeta,
            () => { setEcmwfLoaded(ecmwfUrl); setEcmwfFailed(false); }, handleEcmwfError),
          h('p', { className: 'dshw-note' }, t('pro.ecmwf.note'))
        ),

        h('p', { className: 'dshw-note dshw-pro-source' }, t('pro.attribution')),

        h(MediaZoom, {
          open: Boolean(zoom && zoom.url),
          url: zoom ? zoom.url : '',
          alt: zoom ? zoom.meta : '',
          meta: zoom ? zoom.meta : '',
          t,
          onClose: () => setZoom(null)
        })
      );
    }

    /* ---- src/ui/radar-view.js ---- */
    /**
     * Radar tab: the official CMA radar mosaic product images.
     *
     * The frame list cannot be fetched in the browser (nmc.cn serves no CORS headers
     * on those pages), so the frames are generated from the documented 6-minute
     * cadence and verified by the image itself: a frame that has not been published
     * yet fires `onError`, and the view steps back to the previous one.
     */

    const RADAR_MAX_AUTO_STEPS = 6;

    function RadarView(props) {
      const { t, lang } = props;
      const [productId, setProductId] = React.useState('chinaall');
      const [index, setIndex] = React.useState(0);
      const [playing, setPlaying] = React.useState(false);
      const [failed, setFailed] = React.useState({});
      const [loadedUrl, setLoadedUrl] = React.useState('');
      const [zoomed, setZoomed] = React.useState(false);

      const product = radarProduct(productId);
      const stamps = React.useMemo(
        () => radarStamps(Date.now(), product.frames),
        [product.id, product.frames]
      );
      const safeIndex = Math.min(index, stamps.length - 1);
      const stamp = stamps[safeIndex] || '';
      const url = stamp ? radarImageUrl(product, stamp) : '';
      const when = stamp ? radarBeijingParts(stamp) : null;
      const isBroken = Boolean(failed[stamp]);
      const isLoaded = Boolean(url) && loadedUrl === url;

      React.useEffect(() => {
        if (!playing) return undefined;
        const timer = setInterval(() => {
          setIndex(current => (current + 1 >= stamps.length ? 0 : current + 1));
        }, 650);
        return () => clearInterval(timer);
      }, [playing, stamps.length]);

      React.useEffect(() => {
        setIndex(0);
        setPlaying(false);
        setFailed({});
        setLoadedUrl('');
        setZoomed(false);
      }, [productId]);

      const step = delta => {
        const next = Math.min(stamps.length - 1, Math.max(0, safeIndex + delta));
        setIndex(next);
      };

      const handleLoad = () => setLoadedUrl(url);

      const handleError = () => {
        setLoadedUrl('');
        setFailed(previous => ({ ...previous, [stamp]: true }));
        // Only the newest frames can be "not published yet"; try a few, then stop so
        // the user can pick another time instead of the view chasing broken URLs.
        if (safeIndex < RADAR_MAX_AUTO_STEPS && safeIndex + 1 < stamps.length) {
          setIndex(safeIndex + 1);
        }
      };

      return h('section', { className: 'dshw-card dshw-radar' },
        h('div', { className: 'dshw-radar-head' },
          h('h2', { className: 'dshw-section-title' }, t('radar.title')),
          h('span', { className: 'dshw-note' }, t('radar.source'))
        ),
        h('div', { className: 'dshw-radar-controls' },
          h('label', { className: 'dshw-radar-field' },
            h('span', { className: 'dshw-note' }, t('radar.region')),
            h('select', {
              className: 'dshw-radar-select',
              value: productId,
              onChange: event => setProductId(event.target.value),
              'aria-label': t('radar.region')
            }, RADAR_PRODUCTS.map(item => h('option', { key: item.id, value: item.id },
              radarProductName(item, lang)
            )))
          ),
          h('div', { className: 'dshw-radar-time' },
            h('span', { className: 'dshw-note' }, t('radar.time')),
            h('strong', { className: 'dshw-radar-clock' }, when ? formatRadarStamp(stamp, lang) : '—')
          )
        ),
        h('div', { className: 'dshw-radar-scrub' },
          h('button', {
            type: 'button',
            className: 'dshw-btn dshw-btn-icon',
            onClick: () => step(1),
            disabled: safeIndex >= stamps.length - 1,
            title: t('radar.prev'),
            'aria-label': t('radar.prev')
          }, '‹'),
          h('input', {
            className: 'dshw-radar-range',
            type: 'range',
            min: 0,
            max: Math.max(0, stamps.length - 1),
            step: 1,
            value: safeIndex,
            'aria-label': t('radar.time'),
            onChange: event => setIndex(Number(event.target.value) || 0)
          }),
          h('button', {
            type: 'button',
            className: 'dshw-btn dshw-btn-icon',
            onClick: () => step(-1),
            disabled: safeIndex <= 0,
            title: t('radar.next'),
            'aria-label': t('radar.next')
          }, '›'),
          h('button', {
            type: 'button',
            className: 'dshw-btn',
            onClick: () => setPlaying(value => !value),
            'aria-pressed': playing ? 'true' : 'false'
          }, playing ? t('radar.pause') : t('radar.play')),
          h('button', {
            type: 'button',
            className: 'dshw-btn',
            onClick: () => {
              setPlaying(false);
              setIndex(0);
            }
          }, t('radar.latest'))
        ),
        h('div', { className: `dshw-media-frame${isLoaded ? ' dshw-media-frame-ready' : ''}` },
          isLoaded ? null : h('div', { className: 'dshw-media-skeleton', 'aria-hidden': 'true' }),
          isBroken && !isLoaded
            ? h('p', { className: 'dshw-note dshw-media-broken' }, t('radar.unavailable'))
            : null,
          url
            ? h('button', {
              type: 'button',
              className: 'dshw-media-link',
              onClick: () => setZoomed(true),
              title: t('radar.zoomHint'),
              'aria-label': t('radar.zoomHint')
            }, h('img', {
              key: url,
              className: 'dshw-media-img',
              src: url,
              alt: when ? `${radarProductName(product, lang)} · ${when.day} ${when.clock}` : radarProductName(product, lang),
              referrerPolicy: 'no-referrer',
              loading: 'eager',
              decoding: 'async',
              onLoad: handleLoad,
              onError: handleError
            }))
            : null
        ),
        h('div', { className: 'dshw-radar-foot' },
          h('span', { className: 'dshw-note' }, t('radar.note')),
          h('a', {
            className: 'dshw-link',
            href: radarPageUrl(product),
            target: '_blank',
            rel: 'noreferrer noopener'
          }, t('radar.official'))
        ),
        h(MediaZoom, {
          open: zoomed,
          url,
          alt: when ? `${radarProductName(product, lang)} · ${when.day} ${when.clock}` : radarProductName(product, lang),
          meta: [radarProductName(product, lang), when ? `${when.day} ${when.clock}` : ''].filter(Boolean).join(' · '),
          t,
          onClose: () => setZoomed(false)
        })
      );
    }

    /* ---- src/ui/notice.js ---- */
    /**
     * Startup weather notice.
     *
     * Requirement: when DSH opens and today has precipitation or an active alert,
     * show a modal that the user must acknowledge; show it again when a new alert
     * arrives later.
     *
     * This lives in the `shell.overlay` slot (frame-wide floating layer) rather than
     * inside the panel, because the panel only mounts when the user opens it — the
     * notice must be able to appear without anyone opening the panel. The overlay is
     * additive (`order`) and renders nothing at all on a quiet day.
     *
     * Dedupe: the acknowledgement stores `{date, signature}`; `signature` is the
     * sorted alert-id list plus a rain flag, so any *new* alert changes it and the
     * notice reappears, while the same state never nags twice in a day.
     */

    /* `summarizeToday`, `noticeSignature` and `shouldNotify` live in
     * `src/lib/notice-core.js` so their branches are unit-tested; this file is the
     * presentation and the acknowledgement handling. */

    function alertLevelLabel(alert, lang) {
      if (!alert) return '';
      return lang === 'en' ? (alert.levelEn || '') : (alert.levelZh || '');
    }

    function NoticeAlertRow(props) {
      const { alert, lang } = props;
      return h('a', {
        className: 'dshw-notice-alert',
        href: alert.url || 'https://www.nmc.cn/publish/alarm.html',
        target: '_blank',
        rel: 'noreferrer noopener'
      },
        h('span', { className: `dshw-level-chip dshw-level-${alert.level || 'blue'}` }, alertLevelLabel(alert, lang) || '—'),
        h('span', { className: 'dshw-notice-alert-text' }, alert.title)
      );
    }

    /** The overlay component registered into `shell.overlay`. */
    function WeatherNotice(props) {
      const store = props.store;
      const t = props.t;
      const activeLocale = useActiveLocale(props.locale);
      const lang = String(activeLocale || '').toLowerCase().startsWith('en') ? 'en' : 'zh';
      const state = useWeatherStore(store);
      const [handled, setHandled] = React.useState('');
      const primaryRef = React.useRef(null);

      const summary = summarizeToday(state.forecast);
      const units = state.settings && state.settings.units === 'imperial' ? 'imperial' : 'metric';
      const alerts = Array.isArray(state.alerts) ? state.alerts : [];
      const hasAlert = alerts.length > 0;
      const signature = noticeSignature(summary, alerts);
      const date = todayKey();
      const stored = readNoticeState();
      const visible = shouldNotify({
        summary,
        alerts,
        stored,
        handled,
        date,
        hasForecast: Boolean(state.forecast),
        // Demo mode ignores the acknowledgements so the dialog can be inspected
        // again on every reload; the real path never sets this.
        force: Boolean(readDemoAlertKind())
      });

      React.useEffect(() => {
        if (!visible) return undefined;
        const onKeyDown = event => {
          if (event.key === 'Escape') acknowledge();
        };
        document.addEventListener('keydown', onKeyDown);
        if (primaryRef.current && typeof primaryRef.current.focus === 'function') primaryRef.current.focus();
        return () => document.removeEventListener('keydown', onKeyDown);
      }, [visible, signature]);

      function acknowledge() {
        writeNoticeState({ date, signature, confirmedAt: Date.now() });
        setHandled(signature);
        // A demo alert is a one-shot preview: acknowledging it clears the switch so
        // the next refresh goes back to the real feed instead of nagging forever.
        if (alerts.some(alert => alert.demo)) {
          clearDemoAlert();
          store.refresh({ force: true });
        }
      }

      if (!visible) return null;

      const highest = hasAlert ? alerts[0] : null;
      const shown = alerts.slice(0, 3);
      const remaining = alerts.length - shown.length;
      const rainText = summary && summary.willRain
        ? t('notice.rainBody', {
          amount: formatPrecipitation(summary.amount, units),
          chance: formatPercent(summary.chance)
        })
        : '';

      return h('div', { className: 'dshw-modal-root' },
        h('style', { 'data-dsh-weather-panel-style': 'notice' }, WEATHER_MODAL_CSS),
        h('div', { className: 'dshw-modal-backdrop', onClick: acknowledge }),
        h('div', {
          className: 'dshw-modal',
          role: 'dialog',
          'aria-modal': 'true',
          'aria-labelledby': 'dshw-notice-title',
          onClick: event => event.stopPropagation()
        },
          h('header', { className: 'dshw-modal-head' },
            h('div', { className: 'dshw-modal-icon' }, h(WeatherGlyph, { code: hasAlert ? 95 : 61, isDay: false, size: 40 })),
            h('div', { className: 'dshw-modal-titles' },
              h('h2', { className: 'dshw-modal-title', id: 'dshw-notice-title' }, t('notice.title')),
              h('span', { className: 'dshw-note' }, state.location && state.location.label ? state.location.label : '')
            ),
            h('button', {
              type: 'button',
              className: 'dshw-btn dshw-btn-icon',
              onClick: acknowledge,
              title: t('notice.dismiss'),
              'aria-label': t('notice.dismiss')
            }, h(CloseGlyph, { size: 14 }))
          ),
          h('div', { className: 'dshw-modal-body' },
            hasAlert
              ? h('section', { className: 'dshw-notice-block' },
                h('h3', { className: 'dshw-notice-heading' },
                  t('notice.alertTitle'),
                  h('span', { className: `dshw-level-chip dshw-level-${highest.level || 'blue'}` }, alertLevelLabel(highest, lang) || '')
                ),
                h('p', { className: 'dshw-note' }, t('notice.alertBody', {
                  count: alerts.length,
                  level: alertLevelLabel(highest, lang) || '—'
                })),
                h('div', { className: 'dshw-notice-list' }, shown.map(alert => h(NoticeAlertRow, { key: alert.id, alert, lang }))),
                remaining > 0 ? h('p', { className: 'dshw-note' }, t('notice.more', { n: remaining })) : null
              )
              : null,
            summary && summary.willRain
              ? h('section', { className: 'dshw-notice-block' },
                h('h3', { className: 'dshw-notice-heading' }, t('notice.rainTitle')),
                h('p', { className: 'dshw-notice-text' }, rainText)
              )
              : null
          ),
          h('footer', { className: 'dshw-modal-foot' },
            h('span', { className: 'dshw-note' }, t('notice.source')),
            h('button', {
              type: 'button',
              className: 'dshw-btn dshw-btn-primary',
              onClick: acknowledge,
              ref: primaryRef
            }, t('notice.confirm'))
          )
        )
      );
    }

    /* ---- src/ui/panel.js ---- */
    /**
     * The weather panel: view layer only.
     *
     * Data, caching and the ten-minute refresh loop live in `store.js` so the
     * startup notice can share them. This file renders from the store, owns the tab
     * state and the location picker, and keeps every style inside one <style>
     * element (see styles.js) so nothing leaks globally.
     */

    const PANEL_FORECAST_DAYS = 5;
    const PANEL_STALE_AFTER_MS = 30 * 60 * 1000;

    function readActiveLocale(localeService) {
      if (!localeService || typeof localeService.getSnapshot !== 'function') return '';
      try {
        const snapshot = localeService.getSnapshot();
        return snapshot && snapshot.active !== undefined ? String(snapshot.active) : '';
      } catch (error) {
        return '';
      }
    }

    /**
     * Track the active language as a plain string.
     *
     * Deliberately not `useSyncExternalStore`: it would require the locale snapshot
     * object to be referentially stable, and a Host that rebuilt it per call would
     * throw "The result of getSnapshot should be cached" and blank the slot.
     */
    function useActiveLocale(localeService) {
      const [active, setActive] = React.useState(() => readActiveLocale(localeService));
      React.useEffect(() => {
        setActive(readActiveLocale(localeService));
        if (!localeService || typeof localeService.subscribe !== 'function') return undefined;
        let disposed = false;
        const unsubscribe = localeService.subscribe(() => {
          if (!disposed) setActive(readActiveLocale(localeService));
        });
        return () => {
          disposed = true;
          if (typeof unsubscribe === 'function') unsubscribe();
        };
      }, [localeService]);
      return active;
    }

    function ParameterList(props) {
      const items = props.items;
      return h('div', { className: 'dshw-grid' },
        items.map(item => h('div', { className: 'dshw-param', key: item.key || item.label },
          h('span', { className: 'dshw-param-k' }, item.label),
          h('span', { className: 'dshw-param-v' }, item.value)
        ))
      );
    }

    function NowSection(props) {
      const { t, lang, units, current, today } = props;
      if (!current) return null;
      const described = describeWeather(current.weatherCode);
      const params = [
        { label: t('param.humidity'), value: formatPercent(current.humidity), key: 'humidity' },
        { label: t('param.pressure'), value: formatPressure(current.pressure, units), key: 'pressure' },
        {
          label: t('param.wind'),
          value: `${windDirectionLabel(current.windDirection, lang)} ${formatWindSpeed(current.windSpeed, units)}`,
          key: 'wind'
        },
        { label: t('param.gust'), value: formatWindSpeed(current.windGusts, units), key: 'gust' },
        { label: t('param.precipitation'), value: formatPrecipitation(current.precipitation, units), key: 'precip' },
        { label: t('param.cloudCover'), value: formatPercent(current.cloudCover), key: 'cloud' },
        {
          label: t('param.uv'),
          value: today && isNumber(today.uvMax) ? `${formatUv(today.uvMax)} · ${uvBand(today.uvMax, lang)}` : '—',
          key: 'uv'
        },
        {
          label: t('param.precipProbability'),
          value: today ? formatPercent(today.precipitationProbabilityMax) : '—',
          key: 'pop'
        }
      ];

      return h('section', { className: 'dshw-card dshw-now' },
        h('div', { className: 'dshw-now-main' },
          h('div', { className: 'dshw-glyph-box' },
            h(WeatherGlyph, { code: current.weatherCode, isDay: current.isDay, size: 72 })
          ),
          h('div', { className: 'dshw-now-text' },
            h('div', { className: 'dshw-temp' }, formatTemperature(current.temperature, units)),
            h('div', { className: 'dshw-cond' }, lang === 'en' ? described.en : described.zh),
            h('div', { className: 'dshw-muted dshw-small' },
              t('now.feelsLike', { temp: formatTemperature(current.apparentTemperature, units) })
            ),
            today
              ? h('div', { className: 'dshw-muted dshw-small' },
                `${t('day.high')} ${formatTemperature(today.tempMax, units)} / ${t('day.low')} ${formatTemperature(today.tempMin, units)}`
              )
              : null
          )
        ),
        h('div', { className: 'dshw-now-params' },
          h(ParameterList, { items: params }),
          h('div', { className: 'dshw-sun-row' },
            h('span', { className: 'dshw-sun-item' },
              h('span', { className: 'dshw-param-k' }, t('param.sunrise')),
              h('span', { className: 'dshw-param-v' }, today ? formatClock(today.sunrise) : '—')
            ),
            h('span', { className: 'dshw-sun-item' },
              h('span', { className: 'dshw-param-k' }, t('param.sunset')),
              h('span', { className: 'dshw-param-v' }, today ? formatClock(today.sunset) : '—')
            ),
            current.time
              ? h('span', { className: 'dshw-sun-item' },
                h('span', { className: 'dshw-param-k' }, '⏱'),
                h('span', { className: 'dshw-param-v' }, formatClock(current.time))
              )
              : null
          )
        )
      );
    }

    function ForecastCard(props) {
      const { t, lang, units, day, offset } = props;
      const described = describeWeather(day.weatherCode);
      return h('article', { className: 'dshw-card dshw-day' },
        h('header', { className: 'dshw-day-top' },
          h('span', { className: 'dshw-day-name' }, formatDayOffset(offset, lang, t)),
          h('span', { className: 'dshw-day-date' }, formatMonthDay(day.date, lang))
        ),
        h('div', { className: 'dshw-day-body' },
          h(WeatherGlyph, { code: day.weatherCode, isDay: true, size: 48 }),
          h('div', { className: 'dshw-day-text' },
            h('span', { className: 'dshw-day-cond' }, lang === 'en' ? described.en : described.zh),
            h('span', { className: 'dshw-day-temps' },
              h('strong', null, formatTemperature(day.tempMax, units)),
              h('span', { className: 'dshw-muted' }, ` / ${formatTemperature(day.tempMin, units)}`)
            )
          )
        ),
        h('dl', { className: 'dshw-day-meta' },
          h('div', null,
            h('dt', null, t('param.precipProbability')),
            h('dd', null, formatPercent(day.precipitationProbabilityMax))
          ),
          h('div', null,
            h('dt', null, t('param.precipitation')),
            h('dd', null, formatPrecipitation(day.precipitationSum, units))
          ),
          h('div', null,
            h('dt', null, t('param.wind')),
            h('dd', null, formatWindSpeed(day.windMax, units))
          ),
          h('div', null,
            h('dt', null, t('param.uv')),
            h('dd', null, isNumber(day.uvMax) ? formatUv(day.uvMax) : '—')
          )
        )
      );
    }

    function HourlyStrip(props) {
      const { t, units, hours, currentTime } = props;
      if (!hours || hours.length === 0) return null;
      return h('div', { className: 'dshw-hours', role: 'list' },
        hours.map((hour, index) => {
          const isNow = index === 0 && currentTime && hour.time && hour.time.slice(0, 13) === currentTime.slice(0, 13);
          return h('div', { className: 'dshw-hour', role: 'listitem', key: hour.time || index },
            h('span', { className: 'dshw-hour-time' }, isNow ? t('hourly.now') : formatClock(hour.time)),
            h(WeatherGlyph, { code: hour.weatherCode, isDay: true, size: 26 }),
            h('span', { className: 'dshw-hour-temp' }, formatTemperature(hour.temperature, units)),
            isNumber(hour.precipitationProbability) && hour.precipitationProbability >= 10
              ? h('span', { className: 'dshw-hour-pop' }, `${Math.round(hour.precipitationProbability)}%`)
              : null
          );
        })
      );
    }

    function AlertsBanner(props) {
      const { alerts, t, lang } = props;
      const [expanded, setExpanded] = React.useState(false);
      if (!alerts || alerts.length === 0) return null;

      const listId = 'dshw-alerts-list';
      const visible = expanded ? alerts : alerts.slice(0, 1);
      const hidden = alerts.length - visible.length;

      return h('section', { className: `dshw-card dshw-alerts${expanded ? ' dshw-alerts-expanded' : ''}` },
        h('div', { className: 'dshw-alerts-head' },
          h('h2', { className: 'dshw-section-title' }, t('alerts.title')),
          h('div', { className: 'dshw-alerts-head-right' },
            h('span', { className: 'dshw-note' },
              `${t('alerts.count', { n: alerts.length })} · ${t('alerts.source')}`
            ),
            alerts.length > 1
              ? h('button', {
                type: 'button',
                className: 'dshw-alerts-toggle',
                'aria-expanded': expanded ? 'true' : 'false',
                'aria-controls': listId,
                onClick: () => setExpanded(value => !value)
              },
                expanded ? t('alerts.collapse') : t('alerts.expand'),
                h('span', { className: `dshw-caret${expanded ? ' dshw-caret-up' : ''}`, 'aria-hidden': 'true' })
              )
              : null
          )
        ),
        h('div', { className: 'dshw-alert-list', id: listId },
          visible.map(alert => h('a', {
            className: 'dshw-alert-row',
            key: alert.id,
            href: alert.url || 'https://www.nmc.cn/publish/alarm.html',
            target: '_blank',
            rel: 'noreferrer noopener'
          },
            h('span', { className: 'dshw-alert-icon', 'aria-hidden': 'true' }, alertTypeIcon(alert.type)),
            h('span', { className: `dshw-level-chip dshw-level-${alert.level || 'blue'}` },
              lang === 'en' ? (alert.levelEn || 'Alert') : (alert.levelZh || '预警')
            ),
            h('span', { className: 'dshw-alert-text' }, alert.title),
            alert.issuedText
              ? h('span', { className: 'dshw-alert-time', title: `${t('alerts.issued')} ${alert.issuedText}` },
                expanded ? alert.issuedText : String(alert.issuedText).split(/\s+/).pop()
              )
              : null,
            h('span', { className: 'dshw-alert-scope' },
              alert.scope === 'city' ? t('alerts.scopeCity') : t('alerts.scopeRegion')
            )
          ))
        ),
        h('div', { className: 'dshw-alerts-foot' },
          !expanded && hidden > 0 ? h('span', { className: 'dshw-note' }, t('alerts.more', { n: hidden })) : h('span', null),
          h('a', {
            className: 'dshw-link',
            href: 'https://www.nmc.cn/publish/alarm.html',
            target: '_blank',
            rel: 'noreferrer noopener'
          }, t('alerts.openAll'))
        )
      );
    }

    function ProxyHint(props) {
      const { location, t, onPick } = props;
      if (!location || location.source !== 'network') return null;
      const code = String(location.countryCode || '').toUpperCase();
      if (!code || code === 'CN') return null;
      return h('div', { className: 'dshw-hint', role: 'note' },
        h('span', { className: 'dshw-hint-text' }, t('proxy.hint', { country: code })),
        h('button', { type: 'button', className: 'dshw-btn', onClick: onPick }, t('proxy.action'))
      );
    }

    function LocationPicker(props) {
      const { t, lang, settings, onClose, onNetwork, onSystem, onPreviewNotice, onSelect } = props;
      const [query, setQuery] = React.useState('');
      const [results, setResults] = React.useState([]);
      const [status, setStatus] = React.useState('idle');
      const searchRunRef = React.useRef(0);

      React.useEffect(() => {
        const text = query.trim();
        if (text.length < 2) {
          setResults([]);
          setStatus('idle');
          return undefined;
        }
        const run = searchRunRef.current + 1;
        searchRunRef.current = run;
        setStatus('searching');
        const controller = new AbortController();
        const timer = setTimeout(() => {
          searchCities(fetchJson, text, { signal: controller.signal, language: lang })
            .then(found => {
              if (searchRunRef.current !== run) return;
              setResults(found);
              setStatus(found.length > 0 ? 'ready' : 'empty');
            })
            .catch(() => {
              if (searchRunRef.current !== run) return;
              setResults([]);
              setStatus('empty');
            });
        }, 280);
        return () => {
          clearTimeout(timer);
          controller.abort();
        };
      }, [query, lang]);

      return h('section', { className: 'dshw-card dshw-picker' },
        h('div', { className: 'dshw-picker-head' },
          h('h3', { className: 'dshw-section-title' }, t('location.title')),
          h('button', {
            type: 'button',
            className: 'dshw-btn dshw-btn-icon',
            onClick: onClose,
            title: t('action.cancel'),
            'aria-label': t('action.cancel')
          }, h(CloseGlyph, { size: 14 }))
        ),
        h('p', { className: 'dshw-note' }, t('location.description')),
        // Two explicit modes instead of one "automatic" button plus a switch: picking a
        // city used to leave no obvious way back to the system location.
        h('div', { className: 'dshw-segmented', role: 'group', 'aria-label': t('location.mode') },
          h('button', {
            type: 'button',
            className: `dshw-seg${settings.preciseLocation ? '' : ' dshw-seg-active'}`,
            'aria-pressed': settings.preciseLocation ? 'false' : 'true',
            onClick: onNetwork
          }, h(PinGlyph, { size: 13 }), t('location.network')),
          h('button', {
            type: 'button',
            className: `dshw-seg${settings.preciseLocation ? ' dshw-seg-active' : ''}`,
            'aria-pressed': settings.preciseLocation ? 'true' : 'false',
            onClick: onSystem
          }, h(GpsGlyph, { size: 13 }), t('location.system'))
        ),
        h('p', { className: 'dshw-note' }, settings.preciseLocation ? t('location.systemHint') : t('location.networkHint')),
        settings.override ? h('p', { className: 'dshw-note dshw-picker-manual' }, t('location.manualActive')) : null,
        h('div', { className: 'dshw-picker-actions' },
          h('button', {
            type: 'button',
            className: 'dshw-btn',
            onClick: onPreviewNotice,
            title: t('location.previewNoticeHint')
          }, h(RefreshGlyph, { size: 13 }), t('location.previewNotice'))
        ),
        h('label', { className: 'dshw-search' },
          h('span', { className: 'dshw-search-icon' }, h(SearchGlyph)),
          h('input', {
            className: 'dshw-input',
            type: 'search',
            value: query,
            placeholder: t('location.placeholder'),
            'aria-label': t('location.searchTitle'),
            onChange: event => setQuery(event.target.value)
          })
        ),
        status === 'searching' ? h('p', { className: 'dshw-note' }, t('location.searching')) : null,
        status === 'empty' ? h('p', { className: 'dshw-note' }, t('location.noResult')) : null,
        results.length > 0
          ? h('div', { className: 'dshw-results' },
            results.map(city => h('button', {
              type: 'button',
              className: 'dshw-result',
              key: `${city.id || city.name}-${city.lat}`,
              onClick: () => onSelect(city)
            },
              h('span', { className: 'dshw-result-name' }, city.name),
              h('span', { className: 'dshw-result-meta' },
                [city.region, city.country].filter(Boolean).join(' · ') || (lang === 'en' ? 'Unknown region' : '未知地区')
              )
            ))
          )
          : null
      );
    }

    function PanelSkeleton(props) {
      return h('div', { className: 'dshw-loading', 'aria-live': 'polite' },
        h('div', { className: 'dshw-skeleton' }),
        h('p', { className: 'dshw-note' }, props.label)
      );
    }

    function PanelFooter(props) {
      const { t, state } = props;
      const provider = state.location && state.location.provider ? state.location.provider : '';
      return h('footer', { className: 'dshw-footer' },
        h('span', null,
          `${t('footer.weather')}: `,
          h('a', { href: 'https://open-meteo.com/', target: '_blank', rel: 'noreferrer noopener' }, 'Open-Meteo'),
          ` · ${t('footer.license')}`
        ),
        h('span', null,
          `${t('footer.alerts')}: `,
          h('a', { href: 'https://www.nmc.cn/publish/alarm.html', target: '_blank', rel: 'noreferrer noopener' }, '中央气象台')
        ),
        h('span', null,
          `${t('footer.location')}: `,
          h('a', { href: 'https://ipwho.is/', target: '_blank', rel: 'noreferrer noopener' }, provider || 'IP'),
          ' · ',
          h('a', { href: 'https://www.bigdatacloud.com/', target: '_blank', rel: 'noreferrer noopener' }, 'BigDataCloud')
        ),
        h('span', null, t('footer.note')),
        h('span', { className: 'dshw-footer-feedback' },
          h('a', {
            href: PROJECT_NEW_ISSUE_URL,
            target: '_blank',
            rel: 'noreferrer noopener',
            title: PROJECT_ISSUES_URL
          }, t('footer.feedback'))
        )
      );
    }

    /** Panel body for the weather tab. */
    function WeatherTab(props) {
      const { t, lang, units, forecast, current, today, upcoming, hours, location } = props;
      if (!forecast) return null;
      return h(React.Fragment, null,
        h(NowSection, { t, lang, units, current, today }),
        h('section', { className: 'dshw-section' },
          h('div', { className: 'dshw-section-head' },
            h('h2', { className: 'dshw-section-title' }, t('forecast.title'))
          ),
          h('div', { className: 'dshw-forecast' },
            upcoming.map((day, index) => h(ForecastCard, {
              key: day.date || `day-${index}`,
              t,
              lang,
              units,
              day,
              offset: index + 1
            }))
          )
        ),
        hours.length > 0
          ? h('section', { className: 'dshw-section' },
            h('div', { className: 'dshw-section-head' },
              h('h2', { className: 'dshw-section-title' }, t('hourly.title'))
            ),
            h(PrecipitationChart, { hours, units, t, lang }),
            h(HourlyStrip, { t, units, hours, currentTime: current && current.time })
          )
          : null,
        h(HistoryCard, { t, lang, units, location, timezone: forecast ? forecast.timezone : undefined })
      );
    }

    /** The panel component registered into the `main` slot. */
    function WeatherPanel(props) {
      const store = props.store;
      const rawTranslate = props && typeof props.t === 'function' ? props.t : key => key;
      const activeLocale = useActiveLocale(props ? props.locale : null);
      const lang = String(activeLocale || '').toLowerCase().startsWith('en') ? 'en' : 'zh';
      const translate = React.useCallback((key, vars) => {
        try {
          const text = rawTranslate(key);
          return interpolate(text === key ? lookupMessage(lang, key) : text, vars);
        } catch (error) {
          return lookupMessage(lang, key);
        }
      }, [rawTranslate, lang]);

      const state = useWeatherStore(store);
      const [pickerOpen, setPickerOpen] = React.useState(false);
      const [tab, setTab] = React.useState('weather');

      React.useEffect(() => {
        store.setLanguage(lang, translate);
      }, [store, lang, translate]);

      const typhoonAvailable = Boolean(state.typhoon) || (Array.isArray(state.typhoonList) && state.typhoonList.length > 0);
      React.useEffect(() => {
        if (tab === 'typhoon' && !typhoonAvailable) setTab('weather');
      }, [tab, typhoonAvailable]);

      const tabButton = (key, label) => h('button', {
        type: 'button',
        role: 'tab',
        className: `dshw-tab ${tab === key ? 'dshw-tab-active' : ''}`,
        'aria-selected': tab === key ? 'true' : 'false',
        onClick: () => setTab(key)
      }, label);

      const closePanel = props ? props.closePanel : null;
      const settings = state.settings;
      const units = settings.units;
      const forecast = state.forecast;
      const current = forecast ? forecast.current : null;
      const daily = forecast ? forecast.daily : [];
      const today = daily && daily[0] ? daily[0] : null;
      const upcoming = upcomingDays(daily, PANEL_FORECAST_DAYS);
      const hours = forecast ? selectUpcomingHours(forecast.hourly, current && current.time, 24) : [];
      const isStale = Boolean(state.updatedAt) && Date.now() - state.updatedAt > PANEL_STALE_AFTER_MS;

      const subtitleParts = [];
      if (state.location) subtitleParts.push(state.location.label);
      if (state.location && state.location.source === 'network' && state.location.ip) {
        subtitleParts.push(translate('panel.subtitleNetwork', { ip: state.location.ip }));
      } else if (state.location && state.location.source === 'gps') {
        subtitleParts.push(isNumber(state.location.accuracy)
          ? translate('panel.subtitleGpsAccurate', { accuracy: state.location.accuracy })
          : translate('panel.subtitleGps'));
      } else if (state.location && state.location.source === 'manual') {
        subtitleParts.push(translate('panel.subtitleManual'));
      }
      if (state.updatedAt) subtitleParts.push(translate('panel.updated', { time: formatClockFromDate(new Date(state.updatedAt)) }));

      const openPicker = () => setPickerOpen(true);

      return h('div', { className: 'dshw-root', 'data-dsh-weather-panel': '' },
        h(PanelStyles, null),
        h('div', { className: 'dshw-inner' },
          h('header', { className: 'dshw-header' },
            h('div', { className: 'dshw-titles' },
              h('h1', { className: 'dshw-h1' }, translate('panel.title')),
              h('p', { className: 'dshw-sub' },
                subtitleParts.map((part, index) => h('span', {
                  className: index === 0 ? 'dshw-sub-strong' : 'dshw-chip',
                  key: `${index}-${part}`
                }, part)),
                state.busy ? h('span', { className: 'dshw-chip dshw-chip-busy' }, translate('state.updating')) : null,
                isStale ? h('span', { className: 'dshw-chip dshw-chip-warn' }, translate('state.stale')) : null
              )
            ),
            h('div', { className: 'dshw-actions' },
              h('button', {
                type: 'button',
                className: 'dshw-btn dshw-btn-icon',
                onClick: () => store.refresh({ force: true }),
                title: translate('action.refresh'),
                'aria-label': translate('action.refresh'),
                disabled: state.busy
              }, h(RefreshGlyph)),
              h('button', {
                type: 'button',
                className: 'dshw-btn',
                onClick: () => store.toggleUnits(),
                title: units === 'imperial' ? translate('action.useMetric') : translate('action.useImperial'),
                'aria-label': units === 'imperial' ? translate('action.useMetric') : translate('action.useImperial')
              }, units === 'imperial' ? '°F' : '°C'),
              h('button', {
                type: 'button',
                className: 'dshw-btn',
                onClick: openPicker,
                'aria-expanded': pickerOpen ? 'true' : 'false'
              }, h(PinGlyph), translate('action.changeLocation')),
              closePanel
                ? h('button', {
                  type: 'button',
                  className: 'dshw-btn dshw-btn-icon',
                  onClick: () => closePanel(),
                  title: translate('action.close'),
                  'aria-label': translate('action.close')
                }, h(CloseGlyph))
                : null
            )
          ),

          pickerOpen
            ? h(LocationPicker, {
              t: translate,
              lang,
              settings,
              onClose: () => setPickerOpen(false),
              onNetwork: () => {
                store.clearOverride();
                setPickerOpen(false);
              },
              onSystem: () => {
                store.setPreciseLocation(true);
                setPickerOpen(false);
              },
              onPreviewNotice: () => {
                store.showDemoAlert('typhoon-red');
                setPickerOpen(false);
              },
              onSelect: city => {
                store.selectCity(city);
                setPickerOpen(false);
              }
            })
            : null,

          state.locationWarning === 'gps-fallback'
            ? h('div', { className: 'dshw-hint', role: 'note' },
              h('span', { className: 'dshw-hint-text' }, translate('location.gpsFallback')),
              h('button', { type: 'button', className: 'dshw-btn', onClick: openPicker }, translate('action.changeLocation'))
            )
            : null,

          h(ProxyHint, { location: state.location, t: translate, onPick: openPicker }),

          state.error
            ? h('div', { className: 'dshw-alert', role: 'alert' },
              h('span', null, state.error),
              h('button', { type: 'button', className: 'dshw-btn', onClick: () => store.refresh({ force: true }) },
                translate('action.retry'))
            )
            : null,

          h(AlertsBanner, { alerts: state.alerts, t: translate, lang }),

          h('div', { className: 'dshw-tabs', role: 'tablist' },
            tabButton('weather', translate('tab.weather')),
            tabButton('satellite', translate('tab.satellite')),
            tabButton('radar', translate('tab.radar')),
            typhoonAvailable ? tabButton('typhoon', translate('tab.typhoon')) : null,
            tabButton('pro', translate('tab.pro'))
          ),

          !forecast && tab === 'weather'
            ? h(PanelSkeleton, {
              label: state.phase === 'locating' ? translate('state.locating') : translate('state.loading')
            })
            : null,

          tab === 'weather' && forecast
            ? h(WeatherTab, { t: translate, lang, units, forecast, current, today, upcoming, hours, location: state.location })
            : null,

          tab === 'satellite'
            ? h(SatelliteView, { t: translate, lang })
            : null,

          tab === 'pro'
            ? h(ProChartView, { t: translate, lang })
            : null,

          tab === 'radar'
            ? h(RadarView, { t: translate, lang })
            : null,

          tab === 'typhoon'
            ? (state.typhoonActive && state.typhoon
              ? h(TyphoonView, {
                typhoon: state.typhoon,
                typhoonList: state.typhoonList,
                t: translate,
                lang,
                onSelectTyphoon: id => store.selectTyphoon(id)
              })
              : h(NoActiveTyphoon, { typhoon: state.typhoon, t: translate, lang }))
            : null,

          h(PanelFooter, { t: translate, state })
        )
      );
    }

    function PanelStyles() {
      return h('style', { 'data-dsh-weather-panel-style': '' }, PANEL_CSS);
    }

    /* ---- src/plugin.js ---- */
    /**
     * Client entry: what this plugin registers and how it cleans up.
     *
     * Three additive seats, all with our own ids — nothing shipped is replaced and
     * no other plugin's DOM is touched:
     * - `main` keyed by our own panel id (the weather page),
     * - `sidebar.panellist` with our own id (the rail icon),
     * - `shell.overlay` with our own id (the startup notice).
     *
     * Data lives in one store shared by the panel and the notice, so the notice can
     * check alerts at page boot while the panel is still closed.
     */

    function apply(ctx) {
      const namespace = WEATHER_LOCALE_NAMESPACE;

      ctx.effect(() => ctx.locale.register(namespace, WEATHER_DICT), 'dsh-weather-panel: dictionaries');
      const rawTranslate = ctx.locale.bind(namespace);

      let layout = null;
      ctx.inject(['layout'], scoped => {
        layout = scoped && scoped.layout ? scoped.layout : null;
      });

      const language = () => {
        try {
          const snapshot = typeof ctx.locale.getSnapshot === 'function' ? ctx.locale.getSnapshot() : null;
          return snapshot && String(snapshot.active || '').toLowerCase().startsWith('en') ? 'en' : 'zh';
        } catch (error) {
          return 'zh';
        }
      };

      const translate = makeTranslate(rawTranslate, language());
      const store = createWeatherStore();

      /** Sidebar label; the host re-reads this thunk, so it follows the language. */
      const navLabel = () => {
        try {
          const text = rawTranslate('nav.label');
          return text === 'nav.label' ? lookupMessage('zh', 'nav.label') : text;
        } catch (error) {
          return lookupMessage('zh', 'nav.label');
        }
      };

      /** Leave our own panel before the page disappears from under the user. */
      const closePanel = () => {
        try {
          const controller = layout;
          if (!controller) return;
          const snapshot = controller.panelInfo && typeof controller.panelInfo.getSnapshot === 'function'
            ? controller.panelInfo.getSnapshot()
            : null;
          if (snapshot && snapshot.activePanelId === PANEL_ID && typeof controller.selectPanel === 'function') {
            controller.selectPanel(null);
          }
        } catch (error) {
          /* older Host without the panel controller: nothing to do */
        }
      };

      const safely = disposer => {
        if (typeof disposer === 'function') {
          try {
            disposer();
          } catch (error) {
            /* a double dispose must not break plugin unload */
          }
        }
      };

      // The data store starts immediately: the notice has to know about today's
      // rain and alerts even if the user never opens the panel.
      ctx.effect(() => {
        store.start({ lang: language(), translate });
        return () => store.dispose();
      }, 'dsh-weather-panel: data store and ten-minute refresh');

      ctx.effect(() => {
        const disposePanel = ctx.slots.inject('main', () => ctx.slots.register({
          name: 'main',
          key: PANEL_ID,
          locale: namespace,
          inject: () => ({ t: rawTranslate, locale: ctx.locale, closePanel, store })
        }, WeatherPanel));

        const disposeEntry = ctx.slots.inject('sidebar.panellist', () => ctx.slots.register({
          name: 'sidebar.panellist',
          id: PANEL_ID,
          order: 20,
          label: navLabel,
          locale: namespace
        }, PanelNavIcon));

        const disposeNotice = ctx.slots.inject('shell.overlay', () => ctx.slots.register({
          name: 'shell.overlay',
          id: `${PANEL_ID}-notice`,
          order: 30,
          locale: namespace,
          inject: () => ({ t: rawTranslate, locale: ctx.locale, store })
        }, WeatherNotice));

        return () => {
          closePanel();
          safely(disposeNotice);
          safely(disposeEntry);
          safely(disposePanel);
        };
      }, 'dsh-weather-panel: panel, sidebar entry and startup notice');
    }

    return { inject: ['slots', 'locale'], apply };
  }
});