#!/usr/bin/env node
/**
 * build-mobile.mjs — 移动端平台构建（platform = mobile）
 *
 * 覆盖：移动端 6 端全部产物
 *   frameworks-mobile/<Prefix>.{css,html,jsx,vue2.vue,vue3.vue,uniapp.vue}（源，本脚本只读）
 *     ↓
 *   site/m/data.mobile.json          移动端自包含数据（一次请求拿到全部，含各端源码）
 *   site/m/index.html                移动端文档总览（静态，含设备帧预览）
 *   site/m/component/<slug>.html     逐组件文档页（静态，SEO 入口）
 *   tests/mobile/<slug>.html         逐组件测试页（iframe 375×640 载真实演示页）
 *   tests/mobile/index.html          移动端测试总览
 *   dist/mobile/**                   分发包（tokens / components / react / vue3 / vue2 / uniapp）
 *
 * 隔离硬约束（本脚本自我保护）：
 *   **只能写入 site/m/、tests/mobile/、dist/mobile/ 三个前缀下的路径**，
 *   任何越界写入直接抛错退出 —— 防止移动端构建碰到 PC 侧的 site/data.json、
 *   frameworks/、tests/<slug>.html、dist/components/**。
 *   完整隔离规则见 PLATFORMS.md，硬门禁见 tools/verify-mobile-isolation.mjs。
 *
 * 零依赖：只用 Node 内置模块。
 */
import {
  readFileSync,
  writeFileSync,
  mkdirSync,
  existsSync,
  statSync,
  readdirSync,
} from 'node:fs';
import { createHash } from 'node:crypto';
import { fileURLToPath } from 'node:url';
import { dirname, join, relative, sep } from 'node:path';
import { generatedData, readBrandSpec, validateBrandSpec } from './lib/brand-mark.mjs';

const __dirname = dirname(fileURLToPath(import.meta.url));
const ROOT = join(__dirname, '..');

/* ---------- 路径与写入守卫 ---------- */

const PLATFORM = 'mobile';
const LIB = join(ROOT, '.design_library', 'kole-ui-mobile');
const SRC = join(ROOT, 'frameworks-mobile');
const TESTS = join(ROOT, 'tests', 'mobile');
const WEBSITE = join(ROOT, 'site', 'm');
const DIST = join(ROOT, 'dist', 'mobile');
const PC_INDEX = join(ROOT, '.design_library', 'kole-ui', 'components', 'index.json');
const BRAND_SPEC = readBrandSpec(ROOT);
const BRAND_ERRORS = validateBrandSpec(BRAND_SPEC);
if (BRAND_ERRORS.length) {
  throw new Error(`[build-mobile] 品牌图标规格无效：${BRAND_ERRORS.join('；')}`);
}
if (!existsSync(join(ROOT, 'site', 'assets', 'kole-mark.svg')) || !existsSync(join(ROOT, 'site', 'assets', 'kole-mark-mono.svg'))) {
  throw new Error('[build-mobile] 缺品牌 SVG 产物，请先运行 npm run build:brand');
}
const brandDataFile = join(ROOT, 'site', 'brand-mark.generated.json');
if (!existsSync(brandDataFile) || JSON.stringify(JSON.parse(readFileSync(brandDataFile, 'utf8')), null, 2) + '\n' !== JSON.stringify(generatedData(BRAND_SPEC), null, 2) + '\n') {
  throw new Error('[build-mobile] brand-mark.generated.json 与品牌规格不同步，请先运行 npm run build:brand');
}

/** 允许写入的前缀（相对仓库根，POSIX 风格） */
const ALLOWED_PREFIXES = ['site/m/', 'tests/mobile/', 'dist/mobile/'];

function guard(absPath) {
  const rel = relative(ROOT, absPath).split(sep).join('/');
  if (!ALLOWED_PREFIXES.some((p) => rel.startsWith(p))) {
    throw new Error(
      `[FATAL] 越界写入被拒绝：${rel}\n` +
        `        本脚本只允许写 ${ALLOWED_PREFIXES.join(' / ')}（见 PLATFORMS.md 隔离规则）`
    );
  }
  return absPath;
}

function write(absPath, content) {
  guard(absPath);
  mkdirSync(dirname(absPath), { recursive: true });
  writeFileSync(absPath, String(content).replace(/\r\n/g, '\n'), 'utf8');
}

function read(absPath) {
  return readFileSync(absPath, 'utf8').replace(/^\uFEFF/, '');
}

function sha256(text) {
  return createHash('sha256').update(text, 'utf8').digest('hex').slice(0, 16);
}

/* ---------- 输入 ---------- */

const pkg = JSON.parse(read(join(ROOT, 'package.json')));
const VERSION = pkg.version;

const index = JSON.parse(read(join(LIB, 'components', 'index.json')));
const ENDS = index.ends;
const END_LABELS = index.endLabels || {};
const components = index.components;

const problems = [];

/* 隔离哨兵 1：移动端 slug 必须与 PC 侧不撞名。两端即使有相近概念，也用各自命名空间
   保持索引、文档、测试和分发入口可区分；实现文件仍分别位于 frameworks-mobile/ 与 frameworks/。 */
const pcSlugOverlap = [];
/* PC 组件数从 PC 索引实测读取，不写死：文案里的「79 个中后台组件」在 S6-P21 组件族参数化
   （79 → 103 概念组件）之后已经过期，写死的数字会在 PC 侧增长时静默说谎。 */
let pcCount = null;
if (existsSync(PC_INDEX)) {
  const pc = JSON.parse(read(PC_INDEX));
  pcCount = pc.components.length;
  const pcSlugs = new Set(pc.components.map((c) => c.slug));
  for (const c of components) if (pcSlugs.has(c.slug)) pcSlugOverlap.push(c.slug);
}
/* 拿不到 PC 索引时不编造数字：文案退回中性表述（见 pcCountText） */
const pcCountText = pcCount === null ? '中后台组件' : `${pcCount} 个中后台组件`;/* 隔离哨兵 2：slug / 前缀唯一 */
const seenSlug = new Set();
const seenPrefix = new Set();
for (const c of components) {
  if (seenSlug.has(c.slug)) problems.push(`slug 重复：${c.slug}`);
  if (seenPrefix.has(c.frameworksPrefix)) problems.push(`frameworksPrefix 重复：${c.frameworksPrefix}`);
  seenSlug.add(c.slug);
  seenPrefix.add(c.frameworksPrefix);
}
/* 隔离哨兵 3：声明的每个端都有实现文件，且文件真实存在 */
const missing = [];
for (const c of components) {
  for (const end of ENDS) {
    const f = c.files && c.files[end];
    if (!f) {
      problems.push(`${c.slug} 缺少 ${end} 端文件声明`);
      continue;
    }
    if (!existsSync(join(SRC, f))) missing.push(`${c.slug}/${end} → frameworks-mobile/${f}`);
  }
  if (!existsSync(join(LIB, c.contract))) problems.push(`${c.slug} 契约不存在：${c.contract}`);
}
if (missing.length) {
  problems.push(`实现文件缺失 ${missing.length} 个：\n  - ${missing.join('\n  - ')}`);
}
if (problems.length) {
  console.error('[FATAL] 移动端索引校验失败：');
  problems.forEach((p) => console.error('  - ' + p));
  process.exit(1);
}

/* 契约内容 + 各端源码（供 data.mobile.json 自包含） */
const contracts = new Map();
const sources = new Map();
for (const c of components) {
  contracts.set(c.slug, JSON.parse(read(join(LIB, c.contract))));
  const byEnd = {};
  for (const end of ENDS) byEnd[end] = read(join(SRC, c.files[end]));
  sources.set(c.slug, byEnd);
}

/* 移动端令牌（--kole-m-*）：按名字去重 —— 安全区两条在 @supports 里各出现两次
   （0px 默认 + env() 覆盖），令牌表与文档都按**唯一令牌名**计数。 */
const tokenFile = read(join(LIB, 'colors_and_type.css'));
const tokenRe = /(--kole-m-[a-z0-9-]+)\s*:\s*([^;]+);(?:\s*\/\*\s*([^*]*?)\s*\*\/)?/g;
const tokens = [];
const seenTokenNames = new Set();
let m;
while ((m = tokenRe.exec(tokenFile))) {
  if (seenTokenNames.has(m[1])) continue;
  seenTokenNames.add(m[1]);
  tokens.push({ name: m[1], value: m[2].trim(), comment: (m[3] || '').trim() });
}

/* ---------- 1. site/m/data.mobile.json ---------- */

const dataComponents = components.map((c) => {
  const ct = contracts.get(c.slug) || {};
  return {
    slug: c.slug,
    name: c.name,
    zh: c.name.split(' ')[0],
    en: c.frameworksPrefix,
    tier: c.tier,
    category: c.category,
    confidence: c.confidence,
    specSection: c.specSection,
    contract: c.contract,
    contractData: ct,
    frameworksPrefix: c.frameworksPrefix,
    files: c.files,
    implBase: '../../frameworks-mobile/',
    demo: c.files.html,
    test: '../tests/mobile/' + c.slug + '.html',
    docs: 'component/' + c.slug + '.html',
    variantDimensions: ct.variantDimensions || [],
    representativeVariants: ct.representativeVariants || [],
    anatomy: ct.anatomy || {},
    usageHints: ct.usageHints || [],
    doNotInvent: ct.doNotInvent || [],
    unknowns: ct.unknowns || [],
    behaviors: c.behaviors || [],
    uniappTargets: index.uniappTargets || [],
    sources: sources.get(c.slug),
  };
});

const mobileData = {
  meta: {
    library: index.library,
    kind: 'mobile',
    platform: PLATFORM,
    version: VERSION,
    generated: new Date().toISOString().slice(0, 19).replace('T', ' '),
    components: components.length,
    ends: ENDS,
    endLabels: END_LABELS,
    spec: index.specFile,
    sourceKind: index.sourceKind,
    description: index.description,
    isolation: index.isolation,
    uniappTargets: index.uniappTargets || [],
    uniappNotes: index.uniappNotes || '',
    note:
      '本文件是移动端平台的**自包含**数据（对应 PC 侧 site/data.json 的承诺，但两端互不引用）：' +
      '一次请求拿到移动端全部组件的契约与 6 端源码。PC 侧数据不受本文件影响。',
  },
  tokens,
  components: dataComponents,
};
write(join(WEBSITE, 'data.mobile.json'), JSON.stringify(mobileData, null, 2));

console.log(
  `[build-mobile] site/m/data.mobile.json ← ${components.length} 组件 × ${ENDS.length} 端` +
    `（自包含 ${Math.round(JSON.stringify(mobileData).length / 1024)} KB）· 令牌 ${tokens.length} 个` +
    (pcSlugOverlap.length ? ` · 与 PC 同名（各自独立实现）：${pcSlugOverlap.join(', ')}` : '')
);

/* ---------- 2. tests/mobile/<slug>.html + index.html ---------- */

/* 哪些组件跑行为断言：**演示页里真的写了 [data-behavior] 的那些**（加上行为库里的兜底名单）。
   2026-09-20 修：此前是行为库里的硬编码白名单 —— 索引/演示页新增了交互声明也不会被点击验证，
   断言会静默少一截（子 agent 复核时发现的静默缺口）。现在把派生结果注入测试页。 */
const behaviorSlugs = components
  .filter((c) => {
    const demo = read(join(SRC, c.files.html));
    return /data-behavior\s*=/.test(demo);
  })
  .map((c) => c.slug);
console.log(`[build-mobile] 行为断言覆盖 ${behaviorSlugs.length} 个组件：${behaviorSlugs.join(', ')}`);

const testTemplate = read(join(TESTS, '_template.html'));
for (const c of components) {
  let html = testTemplate;
  /* 顺序敏感：SLUG_ZH_PLACEHOLDER 含 SLUG_PLACEHOLDER 子串，必须先替换 */
  html = html.replaceAll('SLUG_ZH_PLACEHOLDER', c.name.split(' ')[0]);
  html = html.replaceAll('PREFIX_PLACEHOLDER', c.frameworksPrefix);
  html = html.replaceAll('SLUG_PLACEHOLDER', c.slug);
  html = html.replaceAll(
    'window.__SLUG__ = "',
    `window.__koleBehaviorSlugs = ${JSON.stringify(behaviorSlugs)}; window.__SLUG__ = "`
  );
  write(join(TESTS, c.slug + '.html'), html);
}
write(
  join(TESTS, 'index.html'),
  read(join(TESTS, '_index_template.html')).replaceAll('__COUNT__', String(components.length))
);
console.log(`[build-mobile] tests/mobile/ ← ${components.length} 个测试页 + index.html`);

/* ---------- 3. 站点公共部件（左栏 / 复制脚本 / 行生成器） ---------- */

function esc(s) {
  return String(s)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');
}

/* 分类口径与 PC 端一致（PC 的 site/app.js CAT_KEYS/CAT_EN 同源）：
   通用 / 导航 / 数据录入 / 数据展示 / 反馈 / 工具与系统 —— 两端用同一套 IA 导航。
   真源在移动端索引 index.json 的 categories 块，这里只做兜底。 */
const CAT_ZH = (index.categories && index.categories.labels) || {
  general: '通用',
  navigation: '导航',
  input: '数据录入',
  display: '数据展示',
  feedback: '反馈',
  system: '工具与系统',
};
const CAT_ORDER = (index.categories && index.categories.order) || [
  'general',
  'navigation',
  'input',
  'display',
  'feedback',
  'system',
];

/* 开发指南：条目与 PC 侧栏同名同序（组件总览 / 快速开始 / 设计规范 / 常见问题 / 更新日志）。
   移动端另有两页 PC 没有的（平台与端 / 测试与回归），放在这一组末尾并标注。 */
const GUIDE_PAGES = [
  { key: 'index', label: '组件总览', file: 'index.html' },
  { key: 'guide', label: '快速开始', file: 'guide.html' },
  { key: 'design', label: '设计规范', file: 'design.html' },
  { key: 'faq', label: '常见问题', file: 'faq.html' },
  { key: 'changelog', label: '更新日志', file: 'changelog.html' },
  /* 移动端特有（PC 侧不存在同页）：仍留在同一组，用副标题区分 */
  { key: 'platform', label: '平台与端', file: 'platform.html', mobileOnly: true },
  { key: 'tests', label: '测试与回归', file: 'tests/mobile/index.html', repo: true, mobileOnly: true },
];

/* PC 令牌字典：移动端令牌层继承它（不复制），文档里要能区分「自有」与「继承」 */
function parseTokenMap(src, prefix) {
  const out = new Map();
  const re = new RegExp(`(${prefix}[a-z0-9-]+)\\s*:\\s*([^;]+);(?:\\s*\\/\\*\\s*([^*]*?)\\s*\\*\\/)?`, 'g');
  let m;
  while ((m = re.exec(src))) if (!out.has(m[1])) out.set(m[1], { name: m[1], value: m[2].trim(), comment: (m[3] || '').trim() });
  return out;
}
const pcTokenMap = parseTokenMap(read(join(ROOT, '.design_library', 'kole-ui', 'colors_and_type.css')), '--kole-');
const mbTokenMap = new Map();
for (const t of tokens) if (!mbTokenMap.has(t.name)) mbTokenMap.set(t.name, t);

/* 每个组件用到的令牌：构建时从它的 CSS 扫描（var() 引用 + 组件级变量定义） */
function tokensOf(slug) {
  const css = sources.get(slug).css;
  const names = new Set((css.match(/var\((--kole-[a-z0-9-]+)/g) || []).map((s) => s.slice(4)));
  (css.match(/^\s*(--kole-[a-z0-9-]+)\s*:/gm) || []).forEach((s) => names.add(s.trim().replace(/:$/, '')));
  const own = [];
  const inherited = [];
  const local = [];
  [...names].sort().forEach((n) => {
    if (mbTokenMap.has(n)) own.push(n);
    else if (pcTokenMap.has(n)) inherited.push(n);
    else local.push(n); /* 组件级变量（如 --kole-m-pullrefresh-threshold） */
  });
  return { own, inherited, local };
}

/* 顶栏：与 PC 顶栏同一结构与顺序（logo 含副标题 + 版本控件 + 主导航 + 主题模式），
   控件逐个对齐 PC 的实现：版本是可点的下拉（清单拿不到才退回不可点角标）、
   主题触发器带三态图标、激活项带 2px 底部指示条、内容在 1180px 容器内居中。
   PC 特有的三件不搬：搜索框（PC 103 个组件才需要）、技术栈选择器（PC 5 端各自成页；
   移动端 6 端在同页展示）、语言选择器（移动端无 i18n 字典）。
   平台切换**不在顶栏**：PC 顶栏也没有它 —— 两端的唯一入口都是左栏「平台」组。
   2026-09-20 去重：此前顶栏另有一个 [PC 端][移动端] 胶囊，与左栏指向同一跳转
   （实测两条链接 href 均为 ../index.html），是重复入口，已删。 */
/* ---------- 品牌标识（brand-mark.json 唯一真源）----------
   移动端静态页使用相对站点根的独立 SVG favicon；顶栏标记由 site/m/style.css
   以同一规格生成的单色 SVG mask 渲染。这样构建器不再复制或拼接一套几何路径。 */
const BRAND_FAVICON_HREF = '../assets/kole-mark.svg';

function headerHtml(activeKey, isComp) {
  const toRoot = isComp ? '../' : '';
  const nav = GUIDE_PAGES.filter((p) => !p.mobileOnly)
    .map((p) => {
      const on = activeKey === p.key;
      return `      <a href="${toRoot}${p.file}"${on ? ' class="active" aria-current="page"' : ''}>${esc(p.label)}</a>`;
    })
    .join('\n');
  return `  <header class="m-top">
    <div class="m-top-inner">
    <a class="m-logo" href="${toRoot}index.html">
      <span class="m-logo-mark" data-brand-mark="mono" aria-hidden="true"></span>
      <span class="m-logo-text">Kole UI<em>移动端</em></span>
    </a>
    <div class="m-ver-picker" id="m-ver-picker">
      <button id="m-ver-trigger" class="m-ver-trigger" type="button" data-single="1" aria-haspopup="listbox" aria-expanded="false" aria-label="选择版本" title="文档版本（清单来自部署根的 versions.json）">
        <span id="m-ver">v${esc(VERSION)}</span>
        <svg class="m-ver-caret" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
      </button>
      <div id="m-ver-menu" class="m-ver-menu hidden" role="listbox" aria-label="文档版本">
        <div class="m-ver-menu-head" id="m-ver-head">文档版本</div>
      </div>
    </div>
    <nav class="m-nav">${nav}</nav>
    <div class="m-mode">
      <button id="m-mode-trigger" class="m-mode-trigger" type="button" aria-haspopup="listbox" aria-expanded="false" aria-label="主题模式" title="主题模式">
        <svg class="m-mode-icon" id="m-icon-moon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
        <svg class="m-mode-icon" id="m-icon-sun" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="display:none"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
        <svg class="m-mode-icon" id="m-icon-auto" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="display:none"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
        <span id="m-mode-cur">自动模式</span>
        <svg class="m-mode-caret" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
      </button>
      <div id="m-mode-menu" class="m-menu hidden" role="listbox" aria-label="主题模式">
        <div class="m-menu-head">主题模式</div>
        <button class="m-menu-opt" type="button" role="option" data-mode="light" aria-selected="false"><span data-mode-label="light">日间模式</span></button>
        <button class="m-menu-opt" type="button" role="option" data-mode="dark" aria-selected="false"><span data-mode-label="dark">夜间模式</span></button>
        <button class="m-menu-opt" type="button" role="option" data-mode="auto" aria-selected="true"><span data-mode-label="auto">自动模式</span></button>
      </div>
    </div>
    </div>
  </header>`;
}
/* 左侧栏：三段式与 PC 侧栏一致 —— 「平台」组 + 「开发指南」组 + 「组件 N」按分类分组。
   depth：组件页在 site/m/component/ 下，往站点根退一级、往仓库根退三级。 */
function sidebarHtml(activeKey, activeSlug, activeLabel) {
  const isComp = !!activeSlug;
  const toRoot = isComp ? '../' : '';
  const toRepo = isComp ? '../../../' : '../../';
  const parts = [];

  /* ① 平台（PC 侧栏同款：当前站 + 另一侧站，各带副标题） */
  parts.push('    <div class="m-side-section"><span>平台</span></div>');
  const platform = [
    {
      label: 'PC 端组件',
      sub: `${pcCountText} · 5 端`,
      href: isComp ? '../../index.html' : '../index.html',
      current: false,
    },
    {
      label: '移动端组件',
      sub: `${components.length} 个组件 · ${ENDS.length} 端 · 含 uni-app`,
      href: toRoot + 'index.html',
      current: true,
    },
  ];
  for (const p of platform) {
    parts.push(
      `    <a class="m-side-link m-side-platform${p.current && activeKey === 'index' && !isComp ? ' is-active' : ''}" href="${p.href}">` +
        `<span class="sp-top"><span class="sp-name">${esc(p.label)}</span>` +
        (p.current ? '<span class="sp-badge">当前</span>' : '') +
        `</span><span class="sp-sub">${esc(p.sub)}</span></a>`
    );
  }

  /* ② 开发指南（与 PC 同名同序；移动端特有的两页置后） */
  parts.push('    <div class="m-side-section"><span>开发指南</span></div>');
  for (const g of GUIDE_PAGES) {
    const on = activeKey === g.key;
    const href = g.repo ? toRepo + 'tests/mobile/index.html' : toRoot + g.file;
    parts.push(
      `    <a class="m-side-link${on ? ' is-active' : ''}" href="${href}"` +
        `${on ? ' aria-current="page"' : ''}${g.repo ? ' target="_blank"' : ''}>${esc(g.label)}` +
        (g.mobileOnly ? '<em>移动端</em>' : '') +
        `</a>`
    );
  }

  /* ③ 组件（按 PC 分类分组 + 计数） */
  parts.push(`    <div class="m-side-section"><span>组件</span><span class="cnt">${components.length}</span></div>`);
  for (const cat of CAT_ORDER) {
    const items = components.filter((c) => c.category === cat);
    if (!items.length) continue;
    parts.push(`    <div class="m-side-group"><span>${esc(CAT_ZH[cat] || cat)}</span><span class="cnt">${items.length}</span></div>`);
    for (const c of items) {
      const on = activeSlug === c.slug;
      const href = isComp ? c.slug + '.html' : 'component/' + c.slug + '.html';
      parts.push(
        `    <a class="m-side-link${on ? ' is-active' : ''}" href="${href}"` +
          `${on ? ' aria-current="page"' : ''}>${esc(c.name.split(' ')[0])}<em>${esc(c.frameworksPrefix)}</em></a>`
      );
    }
  }
  return (
    /* open 默认展开：桌面无需 JS 即可看到左栏（渐进增强的底线）。
       窄屏收起由侧栏脚本按断点切换 —— 实测教训：不带 open 时 <details> 高度按"关闭态"
       算成 0，`overflow:auto` 会把里面的 nav 整块裁掉（DOM 里有、屏幕上看不见）。 */
    `  <details class="m-side" open>\n` +
    `    <summary><span>移动端导航</span><span class="cur">${esc(activeLabel || '')}</span></summary>\n` +
    `    <nav>\n${parts.join('\n')}\n    </nav>\n  </details>`
  );
}

/* 主题三态 bootstrap：必须在 <head> 里同步执行，否则首帧会先白后黑（PC 的 S2-P5 同款处理）。
   约定与 PC 完全一致：localStorage['kole-mode'] ∈ light|dark|auto，反色靠 html.kole-dark ——
   两端共用一份令牌，所以同一个键在两边都成立，用户在 PC 选夜间，进移动端站点也是夜间。 */
const THEME_BOOT = [
  '<script>',
  '(function () {',
  "  var m = 'auto';",
  "  try { var v = localStorage.getItem('kole-mode'); if (v === 'light' || v === 'dark' || v === 'auto') m = v; } catch (e) {}",
  "  var dark = m === 'dark' || (m === 'auto' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);",
  "  document.documentElement.classList.toggle('kole-dark', !!dark);",
  "  document.documentElement.style.colorScheme = dark ? 'dark' : 'light';",
  '})();',
  '</script>',
].join('\n');

/* 站点脚本：复制按钮 + 左栏在窄屏自动收起（零依赖，CSP 允许内联脚本） */
const COPY_SCRIPT = [
  '<script>',
  '(function () {',
  '  /* 左栏：≤1000px 默认收起（手机上不让导航占满一屏），跨断点时同步一次；不监听 resize，',
  '     免得跟用户手动的展开/收起抢状态。桌面不设 open 之外的动作。 */',
  "  var side = document.querySelector('details.m-side');",
  '  if (side && window.matchMedia) {',
  "    var mq = window.matchMedia('(max-width: 1000px)');",
  "    var sync = function () { if (mq.matches) side.removeAttribute('open'); else side.setAttribute('open', ''); };",
  '    sync();',
  "    if (mq.addEventListener) mq.addEventListener('change', sync);",
  "    else if (mq.addListener) mq.addListener(sync);",
  '  }',
  '  /* 单演示预览帧按内容高度自适应（同源可读 contentDocument；上限 360px、下限 140px）。',
  '     固定高度会在内容少的演示上留一大片空白（实测 SwipeCell 单个演示只用 ~120px）。 */',
  '  function fitDemoFrames() {',
  "    var frames = document.querySelectorAll('.m-demo-stage iframe');",
  '    Array.prototype.forEach.call(frames, function (f) {',
  '      var fit = function () {',
  '        try {',
  '          var d = f.contentDocument;',
  '          if (!d || !d.body) return;',
  '          /* 只量 body.scrollHeight：documentElement.scrollHeight 等于**帧视口高度**（html 撑满视口），',
  '             拿它做 max 会形成「帧高→视口高→量到的高度」反馈环，永远收敛在初始值（实测锁在 308px）。 */',
  '          var h = d.body.scrollHeight;',
  '          if (!h) h = d.documentElement ? d.documentElement.scrollHeight : 0;',
  '          if (!h) return;',
  "          f.style.height = Math.min(360, Math.max(140, h + 8)) + 'px';",
  '        } catch (e) { /* 跨源或未就绪：保持 CSS 兜底高度 */ }',
  '      };',
  "      f.addEventListener('load', function () { fit(); setTimeout(fit, 300); });",
  '      fit();',
  '    });',
  '  }',
  '  fitDemoFrames();',
  "  window.addEventListener('load', fitDemoFrames);",
  '  /* 主题模式（三态）：与 PC 完全同一约定 —— localStorage[kole-mode] ∈ light|dark|auto，',
  '     auto 跟随系统，反色靠 html.kole-dark（令牌文件里已写好该组，两端共用一份令牌）。',
  '     用户在 PC 站选夜间，进移动端站也是夜间。 */',
  "  var MODE_KEY = 'kole-mode';",
  "  var MODE_LABEL = { light: '日间模式', dark: '夜间模式', auto: '自动模式' };",
  '  function readMode() {',
  "    try { var v = localStorage.getItem(MODE_KEY); if (v === 'light' || v === 'dark' || v === 'auto') return v; } catch (e) {}",
  "    return 'auto';",
  '  }',
  '  function systemDark() {',
  "    return !!(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);",
  '  }',
  '  function applyMode(mode) {',
  "    var dark = mode === 'dark' || (mode === 'auto' && systemDark());",
  "    document.documentElement.classList.toggle('kole-dark', dark);",
  "    document.documentElement.style.colorScheme = dark ? 'dark' : 'light';",
  "    var cur = document.getElementById('m-mode-cur');",
  '    if (cur) cur.textContent = MODE_LABEL[mode] || MODE_LABEL.auto;',
  "    Array.prototype.forEach.call(document.querySelectorAll('.m-menu-opt'), function (o) {",
  "      o.setAttribute('aria-selected', o.getAttribute('data-mode') === mode ? 'true' : 'false');",
  '    });',
  '    /* 三态图标与 PC 同口径：显式选择时按时态给图标（日间=月亮 / 夜间=太阳），',
  '       自动模式下恒为「跟随系统」的显示器图标（此时两个显式图标都不显示）。 */',
  "    var moon = document.getElementById('m-icon-moon');",
  "    var sun = document.getElementById('m-icon-sun');",
  "    var auto = document.getElementById('m-icon-auto');",
  "    if (moon) moon.style.display = (mode === 'light') ? '' : 'none';",
  "    if (sun) sun.style.display = (mode === 'dark') ? '' : 'none';",
  "    if (auto) auto.style.display = (mode === 'auto') ? '' : 'none';",
  '  }',
  '  function bindModeMenu() {',
  "    var trigger = document.getElementById('m-mode-trigger');",
  "    var menu = document.getElementById('m-mode-menu');",
  '    if (!trigger || !menu) return;',
  '    var close = function (refocus) {',
  "      menu.classList.add('hidden'); trigger.setAttribute('aria-expanded', 'false');",
  '      if (refocus) trigger.focus();',
  '    };',
  "    trigger.addEventListener('click', function () {",
  "      var open = menu.classList.toggle('hidden');",
  "      trigger.setAttribute('aria-expanded', open ? 'false' : 'true');",
  '    });',
  "    trigger.addEventListener('keydown', function (e) {",
  "      if (e.key === 'Escape') close(true);",
  '    });',
  "    Array.prototype.forEach.call(menu.querySelectorAll('.m-menu-opt'), function (opt) {",
  "      opt.addEventListener('click', function () {",
  "        var mode = opt.getAttribute('data-mode');",
  "        try { localStorage.setItem(MODE_KEY, mode); } catch (e) {}",
  '        applyMode(mode);',
  '        close(true);',
  '      });',
  '    });',
  "    document.addEventListener('click', function (e) {",
  "      if (!menu.classList.contains('hidden') && !menu.contains(e.target) && !trigger.contains(e.target)) close(false);",
  '    });',
  "    document.addEventListener('keydown', function (e) {",
  "      if (e.key === 'Escape' && !menu.classList.contains('hidden')) close(true);",
  '    });',
  '    /* 自动模式下跟随系统切换 */',
  "    if (window.matchMedia) {",
  "      var mq = window.matchMedia('(prefers-color-scheme: dark)');",
  "      var onChange = function () { if (readMode() === 'auto') applyMode('auto'); };",
  "      if (mq.addEventListener) mq.addEventListener('change', onChange);",
  "      else if (mq.addListener) mq.addListener(onChange);",
  '    }',
  '    applyMode(readMode());',
  '  }',
  '  bindModeMenu();',
  '  /* 版本下拉：与 PC 顶栏同一实现口径 —— 清单从部署根取（<prefix>/versions.json 与',
  '     <prefix>/site/versions.json 两份按序尝试，取有可用条目的那份），拿不到就退回不可点的',
  '     纯角标（data-single="1"），不留一个点不开的下拉。',
  '     清单不许把用户带去外站：path 只允许 ".."（站点根自身）或 x.y.z 快照目录名。 */',
  "  var VERSION_KEY_PATH = '..';",
  '  function isValidVersionPath(p) {',
  "    if (typeof p !== 'string' || !p.length || p.indexOf('\\\\') >= 0 || p.indexOf('//') >= 0) return false;",
  "    if (p === VERSION_KEY_PATH) return true;",
  '    return /^\\d+\\.\\d+\\.\\d+$/.test(p);',
  '  }',
  '  /* 清单里的 path 相对部署根，".." = /site/、x.y.z = /x.y.z/site/。',
  '     当前页可能不在部署根下（快照页），故先还原部署根绝对路径再算回相对当前页。 */',
  '  function versionHref(absSite) {',
  "    var i = location.pathname.indexOf('/site/');",
  "    var prefix = i >= 0 ? location.pathname.slice(0, i) : '';",
  "    if (!prefix || absSite.indexOf(prefix + '/') !== 0) return absSite;",
  '    var rest = absSite.slice(prefix.length + 1);',
  "    var up = '';",
  "    var segs = prefix.slice(1).split('/');",
  '    for (var k = 0; k < segs.length; k++) up += "../";',
  '    return up + rest;',
  '  }',
  '  function buildVersionList(doc) {',
  '    var raw = doc && doc.versions;',
  '    if (!raw || !raw.length) return [];',
  "    var i = location.pathname.indexOf('/site/');",
  "    var prefix = i >= 0 ? location.pathname.slice(0, i) : '';",
  '    var list = [];',
  '    for (var k = 0; k < raw.length; k++) {',
  '      var v = raw[k] || {};',
  "      var ver = v.version ? String(v.version) : '';",
  "      var path = v.path ? String(v.path) : '';",
  '      if (!ver || !isValidVersionPath(path)) continue;',
  "      var absSite = (path === VERSION_KEY_PATH ? '' : '/' + path) + '/site/';",
  "      list.push({ version: ver, date: v.date ? String(v.date) : '', latest: !!v.latest, href: versionHref(absSite), absSite: absSite, current: false });",
  '    }',
  '    if (list.length) {',
  '      /* 当前版本 = 绝对路径上命中的最长前缀（最具体的那个）——与 PC 的判定一致，',
  '         快照页与根站点都能算对。 */',
  '      var here = location.pathname;',
  '      var best = -1;',
  '      for (var j = 0; j < list.length; j++) {',
  '        if (here.indexOf(list[j].absSite) === 0 && list[j].absSite.length > best) best = list[j].absSite.length;',
  '      }',
  '      for (var m = 0; m < list.length; m++) list[m].current = best >= 0 && list[m].absSite.length === best;',
  '      if (best < 0 && list[0]) list[0].current = true;',
  '    }',
  '    return list;',
  '  }',
  '  function bindVersionMenu() {',
  "    var trigger = document.getElementById('m-ver-trigger');",
  "    var menu = document.getElementById('m-ver-menu');",
  "    var chip = document.getElementById('m-ver');",
  '    if (!trigger || !menu) return;',
  '    var close = function (refocus) {',
  "      menu.classList.add('hidden'); trigger.setAttribute('aria-expanded', 'false');",
  '      if (refocus) trigger.focus();',
  '    };',
  '    var interactive = false;',
  '    var render = function (list) {',
  '      interactive = !!(list && list.length);',
  '      /* 只有清单拿不到才退回纯角标；只要有一版就是下拉（里面至少能看清当前是哪个版本） */',
  "      trigger.setAttribute('data-single', interactive ? '0' : '1');",
  '      if (!interactive) { menu.classList.add("hidden"); return; }',
  '      var cur = null;',
  '      for (var k = 0; k < list.length; k++) if (list[k].current) cur = list[k];',
  "      if (chip) chip.textContent = 'v' + ((cur && cur.version) || VERSION);",
  '      /* 重建选项（幂等：重复调用不会叠加） */',
  "      Array.prototype.slice.call(menu.querySelectorAll('.m-ver-opt')).forEach(function (n) { n.remove(); });",
  '      list.forEach(function (it) {',
  "        var opt = document.createElement('button');",
  "        opt.type = 'button'; opt.className = 'm-ver-opt'; opt.setAttribute('role', 'option');",
  "        opt.setAttribute('data-version', it.version);",
  "        opt.setAttribute('aria-selected', it.current ? 'true' : 'false');",
  "        var tag = it.current ? '当前浏览' : (it.latest ? '最新版' : (it.date || ''));",
  "        opt.innerHTML = '<span class=\"m-ver-opt-num\">v' + it.version + '</span><span class=\"m-ver-opt-tag\">' + tag + '</span>';",
  "        if (it.href) opt.setAttribute('data-href', it.href);",
  '        opt.addEventListener("click", function () {',
  '          if (!it.current && it.href) location.href = it.href;',
  '          else close(true);',
  '        });',
  '        menu.appendChild(opt);',
  '      });',
  '    };',
  "    trigger.addEventListener('click', function () {",
  '      if (!interactive) return;',
  "      if (menu.classList.contains('hidden')) { menu.classList.remove('hidden'); trigger.setAttribute('aria-expanded', 'true'); }",
  '      else close(false);',
  '    });',
  "    trigger.addEventListener('keydown', function (e) {",
  "      if (!interactive) return;",
  "      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); menu.classList.remove('hidden'); trigger.setAttribute('aria-expanded', 'true'); }",
  "      else if (e.key === 'Escape') close(true);",
  '    });',
  "    document.addEventListener('click', function (e) {",
  "      if (!menu.classList.contains('hidden') && !menu.contains(e.target) && !trigger.contains(e.target)) close(false);",
  '    });',
  "    document.addEventListener('keydown', function (e) {",
  "      if (e.key === 'Escape' && !menu.classList.contains('hidden')) close(true);",
  '    });',
  '    /* 两份清单按序尝试（不并行：快照页那份必然 404，并行会把 404 记进控制台，',
  '       而站点门禁的「零控制台错误」是硬断言）。 */',
  "    if (!window.fetch || location.protocol === 'file:') return;",
  "    var i = location.pathname.indexOf('/site/');",
  '    if (i < 0) return;',
  "    var prefix = location.pathname.slice(0, i);",
  "    var urls = [prefix + '/versions.json', prefix + '/site/versions.json'];",
  '    var attempt = function (idx) {',
  '      if (idx >= urls.length) return;',
  "      fetch(urls[idx], { cache: 'no-store' })",
  "        .then(function (r) { if (!r.ok) throw new Error('HTTP ' + r.status); return r.json(); })",
  '        .then(function (doc) { var list = buildVersionList(doc); if (list.length) render(list); else attempt(idx + 1); })',
  '        .catch(function () { attempt(idx + 1); });',
  '    };',
  '    attempt(0);',
  '  }',
  '  bindVersionMenu();',
  "  function done(btn) {",
  "    var old = btn.textContent; btn.textContent = '已复制'; btn.classList.add('is-done');",
  "    setTimeout(function () { btn.textContent = old; btn.classList.remove('is-done'); }, 1200);",
  '  }',
  "  document.addEventListener('click', function (e) {",
  "    var btn = e.target && e.target.closest ? e.target.closest('.m-copy') : null;",
  '    if (!btn) return;',
  "    var src = document.getElementById(btn.getAttribute('data-copy') || '');",
  "    var text = src ? (src.innerText || src.textContent || '') : '';",
  '    if (navigator.clipboard && navigator.clipboard.writeText) {',
  "      navigator.clipboard.writeText(text).then(function () { done(btn); }, function () { fallback(btn, text); });",
  '    } else { fallback(btn, text); }',
  '  });',
  '  function fallback(btn, text) {',
  '    try {',
  "      var ta = document.createElement('textarea'); ta.value = text; ta.setAttribute('readonly', '');",
  "      ta.style.position = 'fixed'; ta.style.opacity = '0'; document.body.appendChild(ta);",
  '      ta.select(); document.execCommand("copy"); document.body.removeChild(ta); done(btn);',
  "    } catch (err) { btn.textContent = '复制失败'; }",
  '  }',
  '})();',
  '</script>',
].join('\n');

let codeSeq = 0;

/** 代码块（含复制按钮）：id 由调用顺序生成，避免手写 id 撞车 */
function codeBlock(label, code, meta) {
  const id = 'code-' + ++codeSeq;
  return (
    `    <div class="m-code">\n` +
    `      <div class="m-code-head"><span>${esc(label)}</span>` +
    (meta ? `<span class="m-chip">${esc(meta)}</span>` : '') +
    `<button class="m-copy" type="button" data-copy="${id}">复制</button></div>\n` +
    `      <pre id="${id}"><code>${esc(code)}</code></pre>\n` +
    `    </div>`
  );
}

/** 详情折叠里的代码块（组件页 6 端源码用） */
function codeDetails(label, code, meta) {
  const id = 'code-' + ++codeSeq;
  const lines = code.split('\n').length;
  return (
    `    <details class="m-details">\n` +
    `      <summary>${esc(label)}${meta ? ' · ' + esc(meta) : ''} · ${lines} 行</summary>\n` +
    `      <div class="m-code">\n` +
    `        <div class="m-code-head"><span>${esc(label)}</span><button class="m-copy" type="button" data-copy="${id}">复制</button></div>\n` +
    `        <pre id="${id}"><code>${esc(code)}</code></pre>\n` +
    `      </div>\n` +
    `    </details>`
  );
}

/* ---------- 3.1 覆盖矩阵 / 目录映射 / 端引入（总览、平台、快速开始三页共用） ---------- */

function axisRows() {
  const n = components.length;
  const cell = (txt) => `<td>${txt}</td>`;
  const pcCells = pcCount === null
    ? new Array(ENDS.length).fill('—')
    : [...new Array(5).fill('✅ ' + pcCount), '3 / ' + pcCount + '（试点）'];
  return [
    `        <tr><th>移动端（${n}）</th>${ENDS.map(() => cell('✅ ' + n)).join('')}</tr>`,
    `        <tr><th>PC（${pcCount === null ? '—' : pcCount}）</th>${pcCells.map(cell).join('')}</tr>`,
  ].join('\n');
}

function mappingRows() {
  const pcImpl = pcCount === null ? '—' : String(pcCount * 5);
  const pcNum = (n) => (pcCount === null ? '—' : `<code>${n}</code>`);
  const pcCont = pcCount === null ? '<code>.design_library/kole-ui/components/</code>' : `<code>.design_library/kole-ui/components/</code>（${pcCount}）`;
  const pcTests = pcCount === null ? '<code>tests/&lt;slug&gt;.html</code>' : `<code>tests/&lt;slug&gt;.html</code>（${pcCount}）`;
  const rows = [
    ['实现目录', `<code>frameworks/</code>（${pcImpl}）`, '<code>frameworks-mobile/</code>（' + components.length * ENDS.length + '）', '否'],
    ['契约', pcCont, '<code>.design_library/kole-ui-mobile/components/</code>（' + components.length + '）', '否'],
    ['索引（唯一真源）', '<code>components/index.json</code>', '<code>kole-ui-mobile/components/index.json</code>', '否'],
    ['类名前缀', '<code>kole-</code>（含既有短名 <code>btn</code>）', '<code>kole-m-</code>（状态类 <code>is-*</code>）', '否'],
    ['令牌前缀', '<code>--kole-*</code>（75）', '<code>--kole-m-*</code>（' + mbTokenMap.size + '）', '颜色 / 字体 / 圆角 / 阴影同源（@import）'],
    ['导出名', '<code>KoleButton</code>', '<code>KoleMNavBar</code>', '否'],
    ['测试页', pcTests, '<code>tests/mobile/&lt;slug&gt;.html</code>（' + components.length + '）', '共享断言引擎 <code>tests/_runtime.js</code>'],
    ['回归报告', '<code>tests/report.json</code>', '<code>tests/mobile-report.json</code>', '否'],
    ['文档站', '<code>site/</code>（SPA 路由）', '<code>site/m/</code>（静态页，不进 PC 路由表）', '否'],
    ['自包含数据', '<code>site/data.json</code>', '<code>site/m/data.mobile.json</code>', '否'],
    ['分发产物', '<code>dist/components|react|vue3|vue2</code>', '<code>dist/mobile/*</code>', '否'],
    ['构建脚本', '<code>build-site.ps1</code> + <code>build-dist.mjs</code>', '<code>build-mobile.mjs</code> + <code>build-uniapp.mjs</code>', '否'],
  ];
  return rows
    .map((r) => `        <tr><td>${r[0]}</td><td>${r[1]}</td><td>${r[2]}</td><td>${r[3]}</td></tr>`)
    .join('\n');
}

function endImportRows() {
  const END_INFO = {
    css: ['纯样式（CSS）', 'kole-ui/mobile/components/&lt;slug&gt;.css', '拿走样式表，结构自己写（照 <code>&lt;Prefix&gt;.html</code> 的类名）'],
    html: ['H5 原生（无框架）', 'frameworks-mobile/&lt;Prefix&gt;.html', '零依赖演示页源码：内联脚本即完整交互，可直接改成业务页'],
    jsx: ['React', 'kole-ui/mobile/react（聚合）· kole-ui/mobile/react/&lt;Prefix&gt;.jsx（单个）', '函数组件 + hooks，需宿主具备 JSX 编译能力'],
    vue2: ['Vue 2', 'kole-ui/mobile/vue2（聚合）· kole-ui/mobile/vue2/&lt;Prefix&gt;.vue（单个）', '需要 Vue 2 SFC 编译能力（vue-loader 15+ / vue-template-compiler）'],
    vue3: ['Vue 3', 'kole-ui/mobile/vue3（聚合）· kole-ui/mobile/vue3/&lt;Prefix&gt;.vue（单个）', '需 Vue 3 SFC 编译能力；样式在 SFC 内'],
    uniapp: ['uni-app（App / 小程序 / H5）', 'kole-ui/mobile/uniapp/&lt;Prefix&gt;.vue', 'uni 基础组件 + <code>rpx</code> + touch 事件；令牌在宿主工程全局引一次'],
  };
  return ENDS.map(
    (e) =>
      `        <tr><td>${END_INFO[e][0]}</td><td><code>${END_INFO[e][1]}</code></td><td>${END_INFO[e][2]}</td></tr>`
  ).join('\n');
}

const cards = components
  .map((c) => {
    const ct = contracts.get(c.slug) || {};
    const dims = (ct.variantDimensions || [])
      .map((d) => `${d.name}: ${d.values.join('/')}`)
      .join(' · ');
    return `      <article class="m-card" data-slug="${esc(c.slug)}">
        <header>
          <div class="zh">${esc(c.name.split(' ')[0])}<span class="en" style="margin-left:6px;">${esc(c.frameworksPrefix)}</span></div>
          <div class="en">${esc(CAT_ZH[c.category] || c.category)} · ${esc(dims)}</div>
        </header>
        <div class="preview"><iframe src="../../frameworks-mobile/${esc(c.files.html)}" title="${esc(c.name)} 预览" loading="lazy"></iframe></div>
        <footer>
          <a href="component/${esc(c.slug)}.html">详情</a>
          <a href="../../tests/mobile/${esc(c.slug)}.html">测试页</a>
          <a href="../../frameworks-mobile/${esc(c.files.html)}" target="_blank">演示页 ↗</a>
          <span class="m-pill" style="margin-left:auto;">${esc(c.files.uniapp ? 'uni-app ✓' : '')}</span>
        </footer>
      </article>`;
  })
  .join('\n');

/** 把占位符灌进模板：侧栏、复制脚本、各表行统一在这里注入 */
function renderSitePage(templateName, repl) {
  let html = read(join(WEBSITE, templateName));
  const all = Object.assign(
    /* __PC_N__ 单独给一个纯数字占位符：模板里的句子是「PC 端 __PC_N__ 个中后台组件 × 5 端」，
       灌 __PC_COUNT__（已含量词）会读成「103 个中后台组件 个中后台组件」。 */
    { __COPY_SCRIPT__: COPY_SCRIPT, __PC_COUNT__: pcCountText, __PC_N__: pcCount === null ? '—' : String(pcCount) },
    repl
  );
  for (const [k, v] of Object.entries(all)) html = html.replaceAll(k, v);
  return html;
}

/* 每个页面都要替换的公共占位符：顶栏（与 PC 同结构）、主题 bootstrap、品牌图标。
   __BRAND_HEAD__ 由模板放在 <head> 里（本站此前完全没有 favicon，浏览器标签页是
   默认地球图标）；theme-color 取 --kole-color-card-bg —— .m-top 的 background 就是它。 */
function shellRepl(activeKey, isComp) {
  const faviconHref = isComp ? '../../assets/kole-mark.svg' : BRAND_FAVICON_HREF;
  return {
    __HEADER__: headerHtml(activeKey, isComp),
    __THEME_BOOT__: THEME_BOOT,
    __BRAND_HEAD__: [
      `<link rel="icon" href="${faviconHref}">`,
      '<meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)">',
      '<meta name="theme-color" content="#1C1F26" media="(prefers-color-scheme: dark)">',
    ].join('\n'),
  };
}

write(
  join(WEBSITE, 'index.html'),
  renderSitePage('_index_template.html', Object.assign(shellRepl('index'), {
    __SIDEBAR__: sidebarHtml('index', null, '组件总览'),
    __CARDS__: cards,
    __COUNT__: String(components.length),
    __MOBILE_IMPL__: String(components.length * ENDS.length),
    __AXIS_ROWS__: axisRows(),
    __MAPPING_ROWS__: mappingRows(),
  }))
);

/* ---------- 4. site/m/component/<slug>.html（逐组件完整文档） ---------- */

/* 回归报告（若已跑过）：逐页结果 → 「断言 N 条 · 全通过」。报告缺 pageResults 时降级为「已运行」。 */
const REPORT_PATH = join(ROOT, 'tests', 'mobile-report.json');
let mobileReport = null;
if (existsSync(REPORT_PATH)) {
  try {
    mobileReport = JSON.parse(read(REPORT_PATH));
  } catch (e) {
    mobileReport = null;
  }
}
const reportBySlug = new Map(((mobileReport && mobileReport.pageResults) || []).map((r) => [r.slug, r]));

function rows(obj) {
  return Object.entries(obj)
    .map(([k, v]) => `        <tr><td><code>${esc(k)}</code></td><td>${esc(v)}</td></tr>`)
    .join('\n');
}
function listItems(arr) {
  return (arr || []).map((x) => `      <li>${esc(x)}</li>`).join('\n');
}
function gapRows(ct) {
  const out = [];
  (ct.doNotInvent || []).forEach((x) =>
    out.push(`        <tr><td><span class="m-chip">禁止发明</span></td><td>${esc(x)}</td></tr>`)
  );
  (ct.unknowns || []).forEach((x) =>
    out.push(`        <tr><td><span class="m-chip">规格未定</span></td><td>${esc(x)}</td></tr>`)
  );
  return out.join('\n') || '        <tr><td colspan="2">无</td></tr>';
}
function endLinks(c) {
  return ENDS.map((end) => {
    const file = c.files[end];
    /* 相对深度：文档页在 site/m/component/，故到仓库根要退三级（../../../frameworks-mobile/…）。
       实测踩过：写成两级会解析成 /site/frameworks-mobile/… → 404（样式与演示帧一起丢）。 */
    return `      <a href="../../../frameworks-mobile/${esc(file)}" target="_blank">${esc(
      END_LABELS[end] || end
    )}<span style="font-family: var(--kole-font-family-num); font-size: 11px; color: var(--kole-color-text-secondary);">${esc(
      file
    )}</span></a>`;
  }).join('\n');
}

/** 变体维度 × 取值 → 类名/变量（契约 variantClasses；verify-mobile-docs 会逐条对照 CSS 存在性） */
function variantRows(ct) {
  const vc = ct.variantClasses || {};
  return (ct.variantDimensions || [])
    .map((d) => {
      const map = vc[d.name] || {};
      const cells = d.values
        .map((v) => {
          const cls = map[v] || [];
          const txt = cls.length
            ? cls
                .map((x) => (x.startsWith('--') ? `<code>${esc(x)}</code>` : `<span class="m-cls">${esc(x)}</span>`))
                .join(' ')
            : '<span class="m-none">（由数据驱动，无专属类）</span>';
          return `<div><b>${esc(v)}</b> ${txt}</div>`;
        })
        .join('');
      return `        <tr><td><code>${esc(d.name)}</code></td><td>${esc(d.values.join(' / '))}</td><td>${cells}</td></tr>`;
    })
    .join('\n');
}

function repRows(ct) {
  return (ct.representativeVariants || [])
    .map((v) => {
      const keys = Object.keys(v).filter((k) => k !== 'label');
      const combo = keys.map((k) => `${k}=${v[k]}`).join(' · ');
      return `        <tr><td><code>${esc(combo)}</code></td><td>${esc(v.label || '')}</td></tr>`;
    })
    .join('\n');
}

function apiTables(ct) {
  const api = ct.api || { props: [], events: [], slots: [] };
  const props = (api.props || [])
    .map(
      (p) =>
        `        <tr><td><code>${esc(p.name)}</code></td><td><code>${esc(p.type)}</code></td><td><code>${esc(
          p.default
        )}</code></td><td>${esc(p.desc)}</td><td>${p.required ? 'Y' : 'N'}</td></tr>`
    )
    .join('\n');
  const events = (api.events || [])
    .map(
      (e) =>
        `        <tr><td><code>${esc(e.name)}</code></td><td><code>${esc(e.params)}</code></td><td>${esc(e.desc)}</td></tr>`
    )
    .join('\n');
  const slots = (api.slots || [])
    .map((s) => `        <tr><td><code>${esc(s.name)}</code></td><td>${esc(s.desc)}</td></tr>`)
    .join('\n');
  return { props, events, slots, note: esc(api.note || '') };
}

/** 6 端源码：每端一个折叠块（写进页面 = 文档离线可读，不依赖数据请求） */
function sourceBlocks(c) {
  return ENDS.map((end) => {
    const file = c.files[end];
    return codeDetails(
      `frameworks-mobile/${file}`,
      sources.get(c.slug)[end],
      END_LABELS[end] || end
    );
  }).join('\n');
}

/** 用到的令牌：自有（--kole-m-*）/ 继承（PC）/ 组件级变量 */
function tokenChips(c) {
  const { own, inherited, local } = tokensOf(c.slug);
  const chips = [];
  own.forEach((n) => chips.push(`      <span class="m-chip m" title="${esc((mbTokenMap.get(n) || {}).comment || '')}">${esc(n)}</span>`));
  inherited.forEach((n) =>
    chips.push(`      <span class="m-chip inherit" title="${esc((pcTokenMap.get(n) || {}).comment || '')}">${esc(n)}</span>`)
  );
  local.forEach((n) => chips.push(`      <span class="m-chip" title="组件级变量（可在业务侧覆盖）">${esc(n)}</span>`));
  return chips.join('\n');
}

function testStatus(c) {
  const r = reportBySlug.get(c.slug);
  if (!r) return { cls: '', text: REPORT_LABEL_EMPTY };
  if (r.fail > 0) return { cls: 'fail', text: `断言 ${r.total} 条 · ${r.fail} 条失败` };
  return { cls: 'pass', text: `断言 ${r.total} 条 · 全部通过` };
}
const REPORT_LABEL_EMPTY = '尚未运行回归（npm run regression:mobile）';

function relatedLinks(c) {
  const others = components.filter((x) => x.category === c.category && x.slug !== c.slug);
  const pool = others.length ? others : components.filter((x) => x.slug !== c.slug);
  return pool
    .map(
      (x) =>
        `      <a href="${esc(x.slug)}.html">${esc(x.name.split(' ')[0])}<span style="font-family: var(--kole-font-family-num); font-size: 11px; color: var(--kole-color-text-secondary);">${esc(
          x.frameworksPrefix
        )}</span></a>`
    )
    .join('\n');
}

/** 从演示页里按 data-demo 抽出该块的**原文**（含 <section> 包装，故与源码逐字节一致） */
function demoSectionHtml(c, id) {
  const html = sources.get(c.slug).html;
  const marker = `<section class="demo-block" data-demo="${id}">`;
  const start = html.indexOf(marker);
  if (start < 0) return null;
  const end = html.indexOf('</section>', start);
  if (end < 0) return null;
  /* 去掉每行统一的两格缩进（section 在 .demo 内缩进两层），让代码块左对齐 */
  return html
    .slice(start, end + '</section>'.length)
    .split('\n')
    .map((line) => line.replace(/^ {2}/, ''))
    .join('\n');
}

/** 演示块：按契约 demos 分组渲染（01 组件类型 / 02 组件状态），每块一个预览帧 + 原文代码 */
function demoBlocks(c, ct) {
  const groups = new Map();
  for (const d of ct.demos || []) {
    if (!groups.has(d.group)) groups.set(d.group, []);
    groups.get(d.group).push(d);
  }
  const out = [];
  let seq = 0;
  for (const [group, list] of groups) {
    out.push(`    <h3 class="m-demo-group">${esc(group)}</h3>`);
    for (const d of list) {
      seq++;
      const code = demoSectionHtml(c, d.id);
      const id = `code-demo-${seq}`;
      out.push(
        `    <div class="m-demo" id="demo-${esc(d.id)}">\n` +
          `      <div class="m-demo-head"><span class="m-demo-title">${esc(d.title)}</span>` +
          (d.variant ? `<span class="m-chip">${esc(d.variant)}</span>` : '') +
          `</div>\n` +
          `      <p class="m-demo-desc">${esc(d.desc)}</p>\n` +
          `      <div class="m-demo-stage"><iframe src="../../../frameworks-mobile/${esc(c.files.html)}?demo=${esc(d.id)}" title="${esc(c.name)} · ${esc(d.title)}" loading="lazy"></iframe></div>\n` +
          (code
            ? `      <details class="m-details"><summary>查看代码（演示页原文 · ${code.split('\n').length} 行）</summary>\n` +
              `        <div class="m-code"><div class="m-code-head"><span>frameworks-mobile/${esc(c.files.html)} · ${esc(d.id)}</span><button class="m-copy" type="button" data-copy="${id}">复制</button></div>\n` +
              `        <pre id="${id}"><code>${esc(code)}</code></pre></div>\n` +
              `      </details>\n`
            : `      <p class="m-note">（演示页里找不到 data-demo="${esc(d.id)}"，请检查契约与演示页是否同步）</p>\n`) +
          `    </div>`
      );
    }
  }
  return out.join('\n');
}

/** CSS 变量表：组件样式表里**定义**的 --kole-m-* 组件级变量（业务侧可覆盖） */
function cssVarsRows(c) {
  const css = sources.get(c.slug).css;
  const rows = [];
  const re = /^\s*(--kole-m-[a-z0-9-]+)\s*:\s*([^;]+);(?:\s*\/\*\s*([^*]*?)\s*\*\/)?/gm;
  let m;
  while ((m = re.exec(css))) {
    /* 只收「组件级变量」：即不在令牌层里的那些（如 --kole-m-pullrefresh-threshold） */
    if (mbTokenMap.has(m[1])) continue;
    rows.push(
      `        <tr><td><code>${esc(m[1])}</code></td><td><code>${esc(m[2].trim())}</code></td><td>${esc(
        (m[3] || '').trim() || '组件内部默认值，可在业务侧覆盖'
      )}</td></tr>`
    );
  }
  return rows.join('\n') || '        <tr><td colspan="3" class="m-none">本组件没有组件级 CSS 变量</td></tr>';
}

/** 相似组件表 */
function relatedRows(c, ct) {
  const rows = (ct.related || []).map((r) => {
    const other = components.find((x) => x.slug === r.slug);
    if (!other) return `        <tr><td><code>${esc(r.slug)}</code></td><td>${esc(r.why)}</td></tr>`;
    return (
      `        <tr><td><a href="${esc(other.slug)}.html">${esc(other.name.split(' ')[0])}</a>` +
      `<em style="font-family: var(--kole-font-family-num); font-style: normal; font-size: 11px; color: var(--kole-color-text-placeholder); margin-left: 6px;">${esc(
        other.frameworksPrefix
      )}</em></td><td>${esc(r.why)}</td></tr>`
    );
  });
  return rows.join('\n') || '        <tr><td colspan="2" class="m-none">无</td></tr>';
}

/** 引入代码（H5 原生：令牌 + 本组件样式；其余端见快速开始） */
function importCode(c) {
  return [
    '<!-- ① 令牌：PC 令牌 + 移动端 --kole-m-* 合成单文件，引一次 -->',
    '<link rel="stylesheet" href="kole-ui/mobile/tokens.css">',
    '',
    `<!-- ② 本组件样式（全量则用 kole-ui/mobile/components/index.css） -->`,
    `<link rel="stylesheet" href="kole-ui/mobile/components/${c.slug}.css">`,
    '',
    '<!-- ③ 结构照抄下方任一演示块（类名与 6 端实现一致） -->',
  ].join('\n');
}

const compTemplate = read(join(WEBSITE, '_component_template.html'));
for (const c of components) {
  const ct = contracts.get(c.slug) || {};
  const purpose = (ct.usageHints || [])[0] || '';
  const api = apiTables(ct);
  const status = testStatus(c);
  const repl = {
    __SIDEBAR__: sidebarHtml(null, c.slug, c.name.split(' ')[0]),
    __COPY_SCRIPT__: COPY_SCRIPT,
    __SLUG__: c.slug,
    __NAME__: c.name,
    __ZH__: c.name.split(' ')[0],
    __PREFIX__: c.frameworksPrefix,
    __CATEGORY__: CAT_ZH[c.category] || c.category,
    __SPEC_SECTION__: c.specSection || '',
    __PURPOSE__: esc(purpose),
    __IMPORT_CODE__: esc(importCode(c)),
    __DEMO_BLOCKS__: demoBlocks(c, ct),
    __ANATOMY__: rows(ct.anatomy || {}),
    __VARIANT_ROWS__: variantRows(ct),
    __REP_ROWS__: repRows(ct),
    __USAGE__: listItems(ct.usageHints),
    __INTERACTION__: listItems(ct.interaction),
    __A11Y__: listItems(ct.accessibility),
    __API_NOTE__: api.note,
    __API_REQUIRED_NOTE__: esc(ct.api?.requiredNote || ''),
    __API_PROPS__: api.props,
    __API_EVENTS__: api.events,
    __API_SLOTS__: api.slots,
    __CSS_VARS__: cssVarsRows(c),
    __RELATED_ROWS__: relatedRows(c, ct),
    __SOURCE_BLOCKS__: sourceBlocks(c),
    __TOKEN_CHIPS__: tokenChips(c),
    __GAPS__: gapRows(ct),
    __TEST_CLASS__: status.cls,
    __TEST_TEXT__: status.text,
    __REPORT_DATE__: (mobileReport && mobileReport.generated) || '未运行',
    __CONTRACT__: c.contract,
    __CONTRACT_JSON__: JSON.stringify(ct, null, 2),
    __RELATED__: relatedLinks(c),
    __ENDS__: endLinks(c),
  };
  /* 组件页在顶栏高亮「组件总览」（PC 顶栏在组件页高亮「组件」，同一行为口径） */
  Object.assign(repl, shellRepl('index', true));
  let html = compTemplate;
  for (const [k, v] of Object.entries(repl)) html = html.replaceAll(k, v);
  write(join(WEBSITE, 'component', c.slug + '.html'), html);
}
console.log(`[build-mobile] site/m/component/ ← ${components.length} 个组件文档页（含 API / 6 端源码 / 令牌 / 回归状态）`);

/* ---------- 4.5 site/m 的五个指南页（与 PC 同名同序）---------- */

/* 更新日志：从仓库根 CHANGELOG.md 提取「标题含 Mobile / 移动端」的段落，转成静态 HTML。
   不手抄 —— 站点与仓库两处说法不一致是这类页面的典型失败模式。 */
function inlineMd(s) {
  return esc(s)
    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>')
    .replace(/`([^`]+)`/g, '<code>$1</code>')
    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
}
function mobileChangelogHtml() {
  const src = read(join(ROOT, 'CHANGELOG.md'));
  const lines = src.split(/\r?\n/);
  const blocks = [];
  let cur = null;
  let fence = null;
  for (const line of lines) {
    const h = line.match(/^### (.+)$/);
    if (h) {
      if (cur) blocks.push(cur);
      cur = /Mobile|移动端/.test(h[1]) ? { title: h[1], body: [] } : null;
      continue;
    }
    if (!cur) continue;
    if (line.startsWith('```')) {
      if (fence === null) fence = [];
      else {
        cur.body.push({ kind: 'code', text: fence.join('\n') });
        fence = null;
      }
      continue;
    }
    if (fence !== null) {
      fence.push(line);
      continue;
    }
    if (/^\s*>\s?/.test(line)) cur.body.push({ kind: 'note', text: line.replace(/^\s*>\s?/, '') });
    else if (/^\s*-\s+/.test(line)) cur.body.push({ kind: 'li', text: line.replace(/^\s*-\s+/, '') });
    else if (line.trim() === '') cur.body.push({ kind: 'gap', text: '' });
    else cur.body.push({ kind: 'p', text: line });
  }
  if (cur) blocks.push(cur);

  const out = [];
  for (const b of blocks) {
    out.push(`    <h3 class="m-h3" style="margin-top: var(--kole-space-20);">${inlineMd(b.title)}</h3>`);
    let inList = false;
    for (const item of b.body) {
      if (item.kind === 'li') {
        if (!inList) {
          out.push('    <ul class="m-steps">');
          inList = true;
        }
        out.push(`      <li>${inlineMd(item.text)}</li>`);
        continue;
      }
      if (inList) {
        out.push('    </ul>');
        inList = false;
      }
      if (item.kind === 'note') out.push(`    <p class="m-note">${inlineMd(item.text)}</p>`);
      else if (item.kind === 'code') out.push(`    <div class="m-code"><pre><code>${esc(item.text)}</code></pre></div>`);
      else if (item.kind === 'p' && item.text.trim()) out.push(`    <p class="m-sub">${inlineMd(item.text)}</p>`);
    }
    if (inList) out.push('    </ul>');
  }
  return out.length ? out.join('\n') : '    <p class="m-sub">（CHANGELOG 里暂时没有标题含「Mobile / 移动端」的段落）</p>';
}

/* 快速开始 */
write(
  join(WEBSITE, 'guide.html'),
  renderSitePage('_guide_template.html', Object.assign(shellRepl('guide'), {
    __SIDEBAR__: sidebarHtml('guide', null, '快速开始'),
    __END_ROWS__: endImportRows(),
  }))
);

/* 设计令牌：移动端自有令牌表 + 组件实际用到的继承令牌表 */
const tokenRows = [...mbTokenMap.values()]
  .map((t) => `        <tr><td><code>${esc(t.name)}</code></td><td><code>${esc(t.value)}</code></td><td>${esc(t.comment)}</td></tr>`)
  .join('\n');
const inheritedUsage = new Map();
for (const c of components) {
  for (const n of tokensOf(c.slug).inherited) {
    if (!inheritedUsage.has(n)) inheritedUsage.set(n, []);
    inheritedUsage.get(n).push(c.name.split(' ')[0]);
  }
}
const inheritedRows = [...inheritedUsage.keys()]
  .sort()
  .map((n) => {
    const t = pcTokenMap.get(n) || { value: '—', comment: '' };
    return `        <tr><td><code>${esc(n)}</code></td><td><code>${esc(t.value)}</code></td><td>${esc(
      inheritedUsage.get(n).join('、')
    )}</td></tr>`;
  })
  .join('\n');
write(
  join(WEBSITE, 'design.html'),
  renderSitePage('_design_template.html', Object.assign(shellRepl('design'), {
    __SIDEBAR__: sidebarHtml('design', null, '设计规范'),
    __MOBILE_COUNT__: String(mbTokenMap.size),
    __COMPONENT_COUNT__: String(components.length),
    __TOKEN_ROWS__: tokenRows,
    __INHERITED_ROWS__: inheritedRows,
  }))
);

/* 常见问题 */
write(
  join(WEBSITE, 'faq.html'),
  renderSitePage('_faq_template.html', Object.assign(shellRepl('faq'), {
    __SIDEBAR__: sidebarHtml('faq', null, '常见问题'),
  }))
);

/* 更新日志（从 CHANGELOG.md 提取） */
write(
  join(WEBSITE, 'changelog.html'),
  renderSitePage('_changelog_template.html', Object.assign(shellRepl('changelog'), {
    __SIDEBAR__: sidebarHtml('changelog', null, '更新日志'),
    __ENTRIES__: mobileChangelogHtml(),
  }))
);

/* 平台与端 */
write(
  join(WEBSITE, 'platform.html'),
  renderSitePage('_platform_template.html', Object.assign(shellRepl('platform'), {
    __SIDEBAR__: sidebarHtml('platform', null, '平台与端'),
    __AXIS_ROWS__: axisRows(),
    __MAPPING_ROWS__: mappingRows(),
    __MOBILE_COUNT__: String(components.length),
    __MOBILE_IMPL__: String(components.length * ENDS.length),
  }))
);
console.log('[build-mobile] site/m/ ← index / guide / design / faq / changelog / platform 六页（顶栏与左栏与 PC 同结构）');

/* ---------- 5. dist/mobile/** ---------- */

/* 5.1 令牌：PC 令牌 + 移动端令牌合成**自包含单文件**（移动端消费只需引一次） */
const pcTokens = read(join(ROOT, '.design_library', 'kole-ui', 'colors_and_type.css'));
const mobileTokens = tokenFile.replace(/@import url\([^)]*\);\s*/g, '');
write(
  join(DIST, 'tokens', 'tokens.css'),
  `/* Kole UI Mobile — 令牌（自包含：PC 令牌 + 移动端令牌）\n` +
    ` * 生成：node tools/build-mobile.mjs（勿手改）\n` +
    ` * 组成：.design_library/kole-ui/colors_and_type.css（颜色/字体/圆角/阴影，与 PC 同源）\n` +
    ` *      + .design_library/kole-ui-mobile/colors_and_type.css 去掉 @import 后的 --kole-m-* 部分\n` +
    ` */\n\n${pcTokens}\n\n/* ===== mobile layer (--kole-m-*) ===== */\n${mobileTokens}`
);

/* 5.2 组件样式：单文件 + 聚合（同 PC：@import 相对路径 ../tokens/tokens.css） */
const aggregate = [
  '/* Kole UI Mobile — 全部移动端组件样式聚合',
  ` * 版本 ${VERSION} · ${components.length} 个组件 · 生成：node tools/build-mobile.mjs`,
  ' */',
  '@import url("../tokens/tokens.css");',
  '',
];
const manifestComponents = [];
for (const c of components) {
  const css = sources.get(c.slug).css;
  write(
    join(DIST, 'components', c.slug + '.css'),
    `/* Kole UI Mobile · ${c.name} — 生成：node tools/build-mobile.mjs */\n@import url("../tokens/tokens.css");\n\n${css}`
  );
  aggregate.push(`/* --- ${c.slug} (${c.frameworksPrefix}) --- */`, css, '');
  manifestComponents.push({
    slug: c.slug,
    name: c.name,
    category: c.category,
    ends: ENDS.slice(),
    files: c.files,
    css: `components/${c.slug}.css`,
    sha256: Object.fromEntries(ENDS.map((e) => [e, sha256(sources.get(c.slug)[e])])),
  });
}
write(join(DIST, 'components', 'index.css'), aggregate.join('\n'));

/* 5.3 框架端入口（react / vue3 / vue2 / uniapp）
 *     uni-app 端额外给一份「移动端 uni-app 清单」，PC 端 uni-app 列见 dist/uniapp-pc */
const reactImports = [];
const vue3Imports = [];
const vue2Imports = [];
const uniappImports = [];
for (const c of components) {
  const p = c.frameworksPrefix;
  write(join(DIST, 'react', `${p}.jsx`), sources.get(c.slug).jsx);
  write(join(DIST, 'react', `${p}.css`), sources.get(c.slug).css);
  reactImports.push(p);
  write(join(DIST, 'vue3', `${p}.vue`), sources.get(c.slug).vue3);
  vue3Imports.push(p);
  write(join(DIST, 'vue2', `${p}.vue`), sources.get(c.slug).vue2);
  vue2Imports.push(p);
  write(join(DIST, 'uniapp', `${p}.vue`), sources.get(c.slug).uniapp);
  uniappImports.push(p);
}

const header = (title, lines) => [`/* Kole UI Mobile — ${title}`, ...lines, ' */', ''].join('\n');

write(
  join(DIST, 'react', 'index.js'),
  header('React 端聚合入口', [
    ` * 版本 ${VERSION} · ${reactImports.length} 个组件`,
    ' * 需要宿主构建链具备 JSX 编译能力；样式随组件 import 进入。',
    " * 用法：import { KoleMNavBar } from 'kole-ui/mobile/react';",
  ]) + reactImports.map((p) => `export { default as KoleM${p} } from './${p}.jsx';`).join('\n') + '\n'
);
write(
  join(DIST, 'vue3', 'index.js'),
  header('Vue 3 端聚合入口', [
    ` * 版本 ${VERSION} · ${vue3Imports.length} 个组件`,
    ' * 需要构建链具备 Vue 3 SFC 编译能力；样式在 SFC 内。',
    " * 用法：import { KoleMNavBar } from 'kole-ui/mobile/vue3';",
  ]) + vue3Imports.map((p) => `export { default as KoleM${p} } from './${p}.vue';`).join('\n') + '\n'
);
write(
  join(DIST, 'vue2', 'index.js'),
  header('Vue 2 端聚合入口', [
    ` * 版本 ${VERSION} · ${vue2Imports.length} 个组件`,
    ' * 需要构建链具备 Vue 2 SFC 编译能力（vue-loader 15+ / vue-template-compiler）；样式在 SFC 内。',
    " * 用法：import { KoleMNavBar } from 'kole-ui/mobile/vue2';",
  ]) + vue2Imports.map((p) => `export { default as KoleM${p} } from './${p}.vue';`).join('\n') + '\n'
);
write(
  join(DIST, 'uniapp', 'index.js'),
  header('uni-app 端聚合入口（移动端组件）', [
    ` * 版本 ${VERSION} · ${uniappImports.length} 个组件`,
    ` * 目标：${(index.uniappTargets || []).join(' / ')}（App / 微信小程序 / H5）`,
    ' * 组件用 uni 基础组件（view/text/input）+ rpx + touch 事件实现，无 DOM 依赖。',
    ' * 令牌需在宿主工程全局引入一次：@import "kole-ui/mobile/tokens.css";',
    " * 用法：import KoleMNavBar from 'kole-ui/mobile/uniapp/NavBar.vue';",
  ]) + uniappImports.map((p) => `export { default as KoleM${p} } from './${p}.vue';`).join('\n') + '\n'
);

/* 5.4 manifest */
write(
  join(DIST, 'manifest.json'),
  JSON.stringify(
    {
      name: 'kole-ui-mobile',
      platform: 'mobile',
      version: VERSION,
      generated: new Date().toISOString().slice(0, 19).replace('T', ' '),
      isolatedFrom: pcCount === null ? 'kole-ui（PC 端）' : `kole-ui（PC 端 ${pcCount} 组件）`,
      ends: ENDS,
      endLabels: END_LABELS,
      uniappTargets: index.uniappTargets || [],
      tokens: tokens.length,
      classPrefix: 'kole-m-',
      tokenPrefix: '--kole-m-',
      exportPrefix: 'KoleM',
      components: manifestComponents,
    },
    null,
    2
  )
);

/* 5.5 用法速查 */
write(
  join(DIST, 'README.md'),
  `# Kole UI Mobile — 分发包

版本 ${VERSION} · ${components.length} 个移动端组件 · ${ENDS.length} 端（${ENDS.join(' / ')}）· 零运行时依赖

与 PC 端（\`kole-ui\` 主包的 ${pcCountText}）**物理隔离**：独立目录、类名前缀 \`kole-m-\`、
令牌前缀 \`--kole-m-\`、独立测试与回归报告。只有颜色 / 字体 / 圆角 / 阴影令牌与 PC 同源。

## 最快用法

\`\`\`html
<link rel="stylesheet" href="./tokens/tokens.css">
<link rel="stylesheet" href="./components/index.css">
\`\`\`

## 按需引入

\`\`\`
kole-ui/mobile/tokens.css         令牌（PC 令牌 + --kole-m-* 合成单文件）
kole-ui/mobile/components/*.css   单组件样式（已 @import tokens）
kole-ui/mobile/components/index.css  全部样式聚合
kole-ui/mobile/react               React 端入口
kole-ui/mobile/vue3                Vue 3 端入口
kole-ui/mobile/vue2                Vue 2 端入口
kole-ui/mobile/uniapp              uni-app 端入口（App / 小程序 / H5）
\`\`\`

## uni-app

\`\`\`vue
<script setup>
import KoleMNavBar from 'kole-ui/mobile/uniapp/NavBar.vue';
</script>
\`\`\`

uni-app 端用 uni 基础组件（\`view\` / \`text\` / \`input\`）+ \`rpx\` + \`touch\` 事件实现，
小程序与 App 端无 DOM、无 PointerEvent，因此**不要**在本端使用 \`document\` / \`window\` / \`pointerdown\`。

## 组件清单

${manifestComponents.map((c) => `- \`${c.slug}\` ${c.name}（${c.files.uniapp ? '含 uni-app' : ''}）`).join('\n')}

生成：\`node tools/build-mobile.mjs\` ｜ 门禁：\`node tools/verify-mobile-isolation.mjs\` · \`node tools/verify-uniapp.mjs\`
`
);

console.log(
  `[build-mobile] dist/mobile/ ← tokens(1) · components(${components.length}+1) · react(${reactImports.length}) · vue3(${vue3Imports.length}) · vue2(${vue2Imports.length}) · uniapp(${uniappImports.length}) · manifest.json · README.md`
);
console.log('[build-mobile] 完成（PC 侧文件未触碰）');