#!/usr/bin/env node
/**
 * verify-runtime-e2e.mjs — 实机环境验证 harness（真 chromium，非 iframe 结构断言）
 *
 * 为什么需要它：
 *   已有的 tests/report.json（PC 1405 条）是**测试页 iframe 内的结构/行为断言**，
 *   verify-mobile-site.mjs 是移动端文档站的浏览器门禁 —— 两者都不覆盖
 *   「实现文件被真实浏览器当页面/当库加载时会发生什么」：
 *     ① 103 个 PC 演示页 + 37 个移动端演示页，逐个真渲染、看控制台、看 404、看可视化非空白；
 *     ② dist/ 四端产物（React JSX / Vue2 / Vue3 / CSS）真编译 + 真挂载，断言渲染出的 DOM；
 *     ③ 契约声明的变体类名，在真浏览器里确实产生不同视觉（不是"文件里有这行"）。
 *   这正是本仓库反复证明的那条：静态检查只能证明文件里有那几行，看不到加载没加载、落在哪。
 *
 * 用法（分组由 --group 决定，便于多 agent 并行且互不写同一文件）：
 *   REG_BASE=http://127.0.0.1:3411 node tools/verify-runtime-e2e.mjs --group=pc-demos --shard=0/4
 *   REG_BASE=http://127.0.0.1:3411 node tools/verify-runtime-e2e.mjs --group=mobile-demos
 *   REG_BASE=http://127.0.0.1:3411 node tools/verify-runtime-e2e.mjs --group=dist-mount
 *   REG_BASE=http://127.0.0.1:3411 node tools/verify-runtime-e2e.mjs --group=contract-visual
 *
 * 产物：.zcode/verify-runtime/<group>[-shardN].json（每组的原始证据，供复核）
 * 退出码：0 全通过 / 1 有失败 / 2 环境问题
 *
 * 判据说明（为什么这样判，避免"为过而放宽"）：
 *   - 空白判定：演示页 body 必须渲染出 ≥1 个**有面积**（w>0&&h>0）且非 demo 布局壳的元素，
 *     且文本长度 > 0。只查 body.children 会漏掉"元素在但被 display:none / 高度塌成 0"。
 *   - 控制台：error + pageerror + requestfailed 三类都算。requestfailed 必须算 ——
 *     断链 CSS 正是"页面照样打开、样式全丢"的典型（见 verify-mobile-site.mjs 的教训）。
 *   - 404：显式监听 response，任何 4xx/5xx 的子资源都记为失败（排除 favicon，见下）。
 *   - 变体视觉差异：同一组件两个变体类（如 bt-primary vs btn-default）的
 *     background-color / color / border-color 至少一项必须不同 —— 相同说明类名没生效。
 */
import { writeFileSync, mkdirSync, readFileSync, existsSync } from 'node:fs';
import { fileURLToPath } from 'node:url';
import { dirname, join } from 'node:path';

const __dirname = dirname(fileURLToPath(import.meta.url));
const ROOT = join(__dirname, '..');
const BASE = process.env.REG_BASE || 'http://127.0.0.1:3311';
const OUT_DIR = join(ROOT, '.zcode', 'verify-runtime');

const arg = (k, d = null) => {
  const hit = process.argv.find((a) => a.startsWith(k + '='));
  return hit ? hit.slice(k.length + 1) : d;
};
const GROUP = arg('--group', 'pc-demos');
const SHARD = arg('--shard', '0/1');

/* ---------- 工具 ---------- */

const results = [];
function record(ok, id, detail) {
  results.push({ ok, id, detail: detail || null });
  const tag = ok ? 'PASS' : 'FAIL';
  console.log(`  ${tag}  ${id}${detail ? ' — ' + detail : ''}`);
}

let chromium;
try {
  ({ chromium } = await import('playwright'));
} catch {
  console.error('[FATAL] 未安装 playwright：npm i -D playwright && npx playwright install chromium');
  process.exit(2);
}

async function preflight() {
  try {
    const r = await fetch(`${BASE}/site/data.json`, { signal: AbortSignal.timeout(5000) });
    if (!r.ok) throw new Error('HTTP ' + r.status);
  } catch (e) {
    console.error(`[FATAL] 无法连接 ${BASE}/site/data.json — ${e.message}`);
    console.error('        请先起服务：KOLE_PORT=3411 node site/dev-server.js');
    process.exit(2);
  }
}

/* 一个通用的"打开页面并体检"函数。
 * 返回 { status, consoleErrors, badResponses, probe } —— probe 由各 group 自己给。 */
async function openAndProbe(browser, url, opts = {}) {
  const viewport = opts.viewport || { width: 1200, height: 800 };
  const p = await browser.newPage({ viewport, colorScheme: opts.colorScheme });
  const consoleErrors = [];
  const badResponses = [];
  p.on('console', (m) => {
    if (m.type() === 'error') consoleErrors.push(m.text().slice(0, 200));
  });
  p.on('pageerror', (e) => consoleErrors.push('pageerror: ' + String(e.message).slice(0, 200)));
  p.on('requestfailed', (r) => {
    /* favicon 缺失是站点级小事（dev-server 未放行根 favicon），不计入组件缺陷 */
    if (/favicon\.ico$/.test(r.url())) return;
    consoleErrors.push('requestfailed: ' + r.url().slice(0, 140) + ' (' + (r.failure()?.errorText || '?') + ')');
  });
  p.on('response', (r) => {
    const st = r.status();
    if (st >= 400 && !/favicon\.ico$/.test(r.url())) {
      badResponses.push({ status: st, url: r.url().slice(0, 160) });
    }
  });

  let status = 0;
  try {
    const resp = await p.goto(BASE + url, { waitUntil: 'load', timeout: 20000 });
    status = resp ? resp.status() : 0;
    await p.waitForTimeout(opts.settle ?? 700);
  } catch (e) {
    consoleErrors.push('goto: ' + String(e.message).slice(0, 160));
  }

  let probe = null;
  if (status === 200 && opts.probe) {
    try {
      probe = await p.evaluate(opts.probe, opts.probeArg);
    } catch (e) {
      consoleErrors.push('probe: ' + String(e.message).slice(0, 160));
    }
  }

  await p.close();
  return { status, consoleErrors, badResponses, probe };
}

/* 演示页体检探针：渲染面积 / 文本 / 令牌生效 / 可见组件元素数。
 * 判据见文件头「空白判定」。
 *
 * 为什么需要 clickedFallback（触发式浮层）：
 *   modal / drawer / message / notification 这类组件，**关闭态不渲染内容是正确行为**。
 *   实测踩到 6 例：AlertModal / ConfirmModal / FormModal / FullScreenModal / MessagePro / NotificationPro
 *   在加载瞬间没有可见的组件类元素（遮罩 display:none 或容器为空），但点击文档化的触发按钮后
 *   全部正常渲染（子 agent 各自用独立脚本点击验证过，并贴出样本）。
 *   同一原则 harness 在 mount-all 里已承认（"不填 visible/open/show：关闭时不渲染内容是正确行为"），
 *   这里补上同口径的二次判定：**先按静态判；静态不足时点一次页面上的按钮再判**，
 *   只有"点了也出不来"才算失败。 */
const DEMO_PROBE = ({ tokenName, tokenExpect, prefix }) => {
  const all = Array.from(document.querySelectorAll('body *'));
  const area = (el) => {
    const r = el.getBoundingClientRect();
    return r.width > 0 && r.height > 0;
  };
  const visible = all.filter((el) => {
    const cs = getComputedStyle(el);
    return cs.display !== 'none' && cs.visibility !== 'hidden' && area(el);
  });
  const clsOf = (el) => (el.className && el.className.baseVal !== undefined ? el.className.baseVal : el.className) || '';
  const own = visible.filter((el) => {
    const cls = clsOf(el);
    return typeof cls === 'string' && prefix.some((p) => cls.split(/\s+/).some((c) => c.startsWith(p)));
  });
  const text = (document.body.innerText || '').trim();
  const root = getComputedStyle(document.documentElement);
  /* 无文本不代表空白：SkeletonPro（骨架占位块无文字）与 ImagePreview（序号只在遮罩展开后出现）
     都是"有像素、无 innerText"的正常页面。故补一条与文本等价的"确实有内容"判据。
     只认**background-image**（渐变/图片）而不认纯色背景：纯色背景几乎每页都有（body 就是），
     那样判据会恒真、失去区分力；而 linear-gradient 这类绘制恰恰是 SkeletonPro 唯一的可视内容
     （实测 6 个占位块 420×120、animationName: kole-shimmer，无 img 也无文本）。
     再排除 html/body，避免把"页面底色"当成组件内容。 */
  const hasPaintable = all.some((el) => {
    if (!area(el)) return false;
    return ['IMG', 'SVG', 'CANVAS', 'VIDEO'].includes(el.tagName);
  });
  const hasOwnText = all.some((el) => el.children.length === 0 && (el.textContent || '').trim().length > 0 && area(el));
  const hasPaintedBg = all.some((el) => {
    if (!area(el) || el === document.body || el === document.documentElement) return false;
    const bgImg = getComputedStyle(el).backgroundImage;
    return !!bgImg && bgImg !== 'none';
  });
  /* 触发式浮层的线索：页面上有按钮，且存在带 kole- 前缀但当前不可见（0 面积/被 display 隐藏）的元素 */
  const triggerBtns = all.filter((el) => el.tagName === 'BUTTON' && area(el) && !el.disabled);
  const hiddenKole = all.filter((el) => {
    const cls = clsOf(el);
    if (typeof cls !== 'string' || !prefix.some((p) => cls.split(/\s+/).some((c) => c.startsWith(p)))) return false;
    const cs = getComputedStyle(el);
    return !area(el) || cs.display === 'none' || cs.visibility === 'hidden';
  });
  return {
    visibleCount: visible.length,
    ownCount: own.length,
    textLen: text.length,
    token: tokenName ? root.getPropertyValue(tokenName).trim() : null,
    tokenExpect: tokenExpect || null,
    title: document.title,
    triggerCount: triggerBtns.length,
    hiddenKoleCount: hiddenKole.length,
    hasPaintable,
    hasOwnText,
    hasPaintedBg,
  };
};

/* 触发式浮层的二次判定：点击页面上的按钮，看组件元素是否出现。
 * 返回点击后被点亮（可见）的组件类元素数量。 */
const OVERLAY_RETRY_PROBE = (prefix) => {
  const clsOf = (el) => (el.className && el.className.baseVal !== undefined ? el.className.baseVal : el.className) || '';
  const area = (el) => {
    const r = el.getBoundingClientRect();
    return r.width > 0 && r.height > 0;
  };
  const btns = Array.from(document.querySelectorAll('button')).filter((b) => area(b) && !b.disabled);
  for (const b of btns.slice(0, 6)) {
    try {
      b.click();
    } catch (e) {
      /* 单个按钮点不动不影响其它按钮的尝试 */
    }
  }
  const vis = Array.from(document.querySelectorAll('body *')).filter((el) => {
    const cls = clsOf(el);
    if (typeof cls !== 'string' || !prefix.some((p) => cls.split(/\s+/).some((c) => c.startsWith(p)))) return false;
    const cs = getComputedStyle(el);
    return cs.display !== 'none' && cs.visibility !== 'hidden' && area(el);
  });
  return { ownCountAfterClick: vis.length, textLenAfterClick: (document.body.innerText || '').trim().length };
};

/* ---------- group: pc-demos ---------- */

async function groupPcDemos(browser) {
  const data = JSON.parse(readFileSync(join(ROOT, 'site', 'data.json'), 'utf8'));
  const slips = data.components.map((c) => c.slug);
  /* slug -> frameworks/<Name>.html（大小写不敏感匹配，index 里是 slug 小写） */
  const htmlList = (await import('node:fs')).readdirSync(join(ROOT, 'frameworks')).filter((f) => f.endsWith('.html'));
  const bySlug = new Map();
  for (const f of htmlList) bySlug.set(f.replace(/\.html$/, '').toLowerCase(), f);

  const [si, sn] = SHARD.split('/').map(Number);
  const mine = slips.filter((_, i) => i % sn === si);
  console.log(`[pc-demos] 分片 ${SHARD} · 本片 ${mine.length}/${slips.length} 个组件`);

  for (const slug of mine) {
    const file = bySlug.get(slug);
    if (!file) {
      record(false, `${slug} 演示页存在`, 'frameworks 下无同名 html');
      continue;
    }
    const r = await openAndProbe(browser, `/frameworks/${file}`, {
      probe: DEMO_PROBE,
      probeArg: { tokenName: '--kole-color-brand', tokenExpect: '#2F54EB', prefix: ['kole-', 'btn', 'au-'] },
    });
    const pr = r.probe || {};
    const clean = r.consoleErrors.length === 0 && r.badResponses.length === 0;
    /* 静态判定不足时，做一次"点了会出来吗"的二次判定（触发式浮层，见 OVERLAY_RETRY_PROBE 注释）。
       仅当页面确实存在"隐藏的组件元素 + 可点按钮"线索时才值得重试，避免给纯静态页加噪声。 */
    const staticOwnOk = pr.ownCount > 0;
    let retry = null;
    if (!staticOwnOk && pr.triggerCount > 0 && pr.hiddenKoleCount > 0) {
      retry = await openAndProbe(browser, `/frameworks/${file}`, { settle: 800, probe: OVERLAY_RETRY_PROBE, probeArg: ['kole-', 'btn', 'au-'] });
    }
    const ownAfter = retry && retry.probe ? retry.probe.ownCountAfterClick : 0;
    /* "有内容"的判据：可见元素 + （有文本 或 有可绘制元素 或 有渐变/图片背景 或 有叶子文本节点）。
       只查 innerText 会把 SkeletonPro / ImagePreview 这类"有像素无文本"的页面误判成空白。 */
    const hasContent = pr.textLen > 0 || pr.hasPaintable || pr.hasPaintedBg || pr.hasOwnText;
    const rendered = r.status === 200 && pr.visibleCount > 0 && hasContent && (staticOwnOk || ownAfter > 0);
    record(
      r.status === 200 && clean && rendered,
      `${slug} 实机渲染`,
      [
        r.status !== 200 ? `HTTP ${r.status}` : null,
        pr.visibleCount === 0 ? '无可视元素（空白）' : null,
        !hasContent ? '无文本且无可绘制内容' : null,
        !staticOwnOk && ownAfter === 0 ? `无组件类元素（静态 ${pr.ownCount}；点击 ${pr.triggerCount} 个按钮后仍为 ${ownAfter}）` : null,
        r.consoleErrors.length ? `${r.consoleErrors.length} 控制台错误: ${r.consoleErrors.slice(0, 2).join(' || ')}` : null,
        r.badResponses.length ? `坏响应: ${r.badResponses.slice(0, 2).map((b) => b.status + ' ' + b.url).join(' || ')}` : null,
      ]
        .filter(Boolean)
        .join(' ; ') ||
        (staticOwnOk ? null : `点击后组件元素 ${ownAfter} 个（触发式浮层，关闭态不渲染属正确行为）`)
    );
    /* 令牌必须真的解析出值（未被改动/断链时才可能为空） */
    record(pr.token === '#2F54EB', `${slug} 令牌生效`, pr.token === '#2F54EB' ? null : `--kole-color-brand="${pr.token}"`);
  }
}

/* ---------- group: mobile-demos ---------- */

async function groupMobileDemos(browser) {
  const data = JSON.parse(readFileSync(join(ROOT, 'site', 'm', 'data.mobile.json'), 'utf8'));
  const slugs = data.components.map((c) => c.slug);
  const htmlList = (await import('node:fs')).readdirSync(join(ROOT, 'frameworks-mobile')).filter((f) => f.endsWith('.html'));
  const bySlug = new Map();
  for (const f of htmlList) bySlug.set(f.replace(/\.html$/, '').toLowerCase(), f);

  const [si, sn] = SHARD.split('/').map(Number);
  const mine = slugs.filter((_, i) => i % sn === si);
  console.log(`[mobile-demos] 分片 ${SHARD} · 本片 ${mine.length}/${slugs.length} 个组件`);

  for (const slug of mine) {
    /* 优先用数据自带的 demo 字段（权威映射），不要靠 slug 猜文件名：
       移动端 slug 是 mobile-dialog 而文件是 Dialog.html（实测踩到 4 个误报）。 */
    const comp = data.components.find((c) => c.slug === slug);
    const file = (comp && comp.demo) || bySlug.get(slug) ||
      htmlList.find((f) => f.toLowerCase().replace(/[^a-z0-9]/g, '') === slug.replace(/[^a-z0-9]/g, ''));
    if (!file) {
      record(false, `${slug} 移动端演示页存在`, '数据 demo 字段与目录内均无对应 html');
      continue;
    }
    const r = await openAndProbe(browser, `/frameworks-mobile/${file}`, {
      viewport: { width: 390, height: 844 },
      probe: DEMO_PROBE,
      probeArg: { tokenName: '--kole-m-touch-target', tokenExpect: '44px', prefix: ['kole-m-'] },
    });
    const pr = r.probe || {};
    const clean = r.consoleErrors.length === 0 && r.badResponses.length === 0;
    const rendered = r.status === 200 && pr.visibleCount > 0 && pr.textLen > 0;
    record(
      r.status === 200 && clean && rendered,
      `${slug} 移动端实机渲染`,
      [
        r.status !== 200 ? `HTTP ${r.status}` : null,
        pr.visibleCount === 0 ? '无可视元素（空白）' : null,
        pr.textLen === 0 ? '无文本' : null,
        r.consoleErrors.length ? `${r.consoleErrors.length} 控制台错误: ${r.consoleErrors.slice(0, 2).join(' || ')}` : null,
        r.badResponses.length ? `坏响应: ${r.badResponses.slice(0, 2).map((b) => b.status + ' ' + b.url).join(' || ')}` : null,
      ]
        .filter(Boolean)
        .join(' ; ') || null
    );
    record(pr.token === '44px', `${slug} 移动端令牌生效`, pr.token === '44px' ? null : `--kole-m-touch-target="${pr.token}"`);
  }
}

/* ---------- group: dist-mount ----------
 * 真编译 + 真挂载四端产物。这一组回答的是「用户按 README 接入后能不能用」。
 * React/Vue3/Vue2 用 esbuild 打包 dist 入口 + 各端运行时，产出 HTML，在真浏览器里挂载，
 * 断言渲染出的 DOM 含契约声明的类名。
 * CSS 端：直接把 dist/components/index.css + tokens 挂进页面，断言 sample 类名产生预期样式。
 */
async function groupDistMount(browser) {
  const { createRequire } = await import('node:module');
  let esbuild, compilerSfc3, templateCompiler2;
  const DEPS = join(ROOT, '.zcode', 'verify-import');
  const DEPS2 = join(ROOT, '.zcode', 'verify-vue2');
  const req = createRequire(join(DEPS, 'x.js'));
  const req2 = createRequire(join(DEPS2, 'x.js'));
  try {
    esbuild = req('esbuild');
    compilerSfc3 = req('@vue/compiler-sfc');
    /* Vue 2 用经典编译器 vue-template-compiler（2.7 的 vue/compiler-sfc 是 Vue3 风格 API，
       没有 compile()，硬用它会把「工具用错」记成「组件坏了」） */
    templateCompiler2 = req2('vue-template-compiler');
    req2('vue');
    req('vue');
    req('react');
    req('react-dom');
  } catch (e) {
    console.error('[FATAL] 缺少编译依赖：' + e.message);
    console.error('        需要 .zcode/verify-import/{esbuild,@vue/compiler-sfc,react,react-dom,vue} 与 .zcode/verify-vue2/{vue@2,vue-template-compiler}');
    process.exit(2);
  }
  /* 运行时从这两棵树里解析（宿主代码位于 .zcode/verify-runtime/ 下，向上找不到 node_modules） */
  const NODE_PATHS = [join(DEPS, 'node_modules'), join(DEPS2, 'node_modules')];

  const OUT = join(OUT_DIR, 'dist-mount');
  mkdirSync(OUT, { recursive: true });

  /* --- 1) Vue3：入口 .vue 真编译 + 真挂载 --- */
  const vue3Plugin = {
    name: 'vue-sfc3',
    setup(build) {
      build.onLoad({ filter: /\.vue$/ }, (args) => {
        const source = readFileSync(args.path, 'utf8');
        const { descriptor, errors } = compilerSfc3.parse(source, { filename: args.path });
        if (errors.length) throw new Error('SFC parse: ' + errors[0].message);
        const id = Buffer.from(args.path).toString('hex').slice(0, 8);
        const script = compilerSfc3.compileScript(descriptor, { id });
        const template = descriptor.template
          ? compilerSfc3.compileTemplate({
              source: descriptor.template.content,
              filename: args.path,
              id,
              scoped: descriptor.styles.some((s) => s.scoped),
              compilerOptions: { bindingMetadata: script.bindings },
            })
          : { code: 'export function render(){return null}' };
        if (template.errors && template.errors.length) throw new Error('template: ' + template.errors[0].message);
        return {
          contents: `${script.content.replace(/export\s+default/, 'const __sfc_main =')}\n${template.code.replace(/export\s+function\s+render/, 'function __sfc_render')}\n__sfc_main.render = __sfc_render;\nexport default __sfc_main;`,
          loader: 'js',
          resolveDir: dirname(args.path),
        };
      });
    },
  };

  /* --- 2) Vue2：入口 .vue 真编译 + 真挂载（vue-template-compiler，Vue 2 经典编译器） --- */
  const vue2Plugin = {
    name: 'vue-sfc2',
    setup(build) {
      build.onLoad({ filter: /\.vue$/ }, (args) => {
        const source = readFileSync(args.path, 'utf8');
        const parsed = templateCompiler2.parseComponent(source);
        const scriptContent = parsed.script ? parsed.script.content : 'export default {}';
        if (parsed.template) {
          const c = templateCompiler2.compile(parsed.template.content);
          if (c.errors && c.errors.length) throw new Error('vue2 template: ' + c.errors[0]);
          /* render 是函数体字符串，必须包成函数（同 vue-loader 的做法） */
          return {
            contents: `${scriptContent.replace(/export\s+default/, 'const __sfc_main =')}\n__sfc_main.render = function () { ${c.render} };\n__sfc_main.staticRenderFns = [${(c.staticRenderFns || []).map((fn) => `function () { ${fn} }`).join(',')}];\nexport default __sfc_main;`,
            loader: 'js',
            resolveDir: dirname(args.path),
          };
        }
        return {
          contents: `${scriptContent.replace(/export\s+default/, 'const __sfc_main =')}\nexport default __sfc_main;`,
          loader: 'js',
          resolveDir: dirname(args.path),
        };
      });
    },
  };

  /* 每个端：写一个宿主 script，打包成 ESM bundle */
  const ends = [
    {
      key: 'react',
      label: 'React',
      entry: join(ROOT, 'dist', 'react', 'index.js'),
      plugin: [],
      externals: ['react', 'react-dom', 'react-dom/client'],
      handle: async (bundlePath, outDir) => {
        const host = `
import React from 'react';
import { createRoot } from 'react-dom/client';
import * as Kole from './entry.mjs';
const el = document.getElementById('root');
const list = Object.keys(Kole).filter(k => typeof Kole[k] === 'function').sort();
const target = Kole.KoleButton || Kole.Button;
const children = [];
if (target) children.push(React.createElement(target, { key: 'primary', type: 'primary', text: '保存' }));
children.push(React.createElement('div', { key: 'marks', id: 'marks', 'data-count': list.length }));
createRoot(el).render(React.createElement('div', { id: 'wrap' }, children));
`;
        writeFileSync(join(outDir, 'host.jsx'), host);
        return { hostPath: join(outDir, 'host.jsx'), entryRel: './entry.mjs' };
      },
    },
    {
      key: 'vue3',
      label: 'Vue 3',
      entry: join(ROOT, 'dist', 'vue3', 'index.js'),
      plugin: [vue3Plugin],
      externals: ['vue'],
      handle: async (bundlePath, outDir) => {
        const host = `
import { createApp, h } from 'vue';
import * as Kole from './entry.mjs';
const list = Object.keys(Kole).filter(k => Kole[k] && typeof Kole[k] === 'object').sort();
const target = Kole.KoleButton || Kole.Button;
const app = createApp({ render() {
  const kids = [];
  if (target) kids.push(h(target, { type: 'primary', text: '保存' }));
  kids.push(h('div', { id: 'marks', 'data-count': String(list.length) }));
  return h('div', { id: 'wrap' }, kids);
} });
app.mount('#root');
`;
        writeFileSync(join(outDir, 'host.js'), host);
        return { hostPath: join(outDir, 'host.js'), entryRel: './entry.mjs' };
      },
    },
    {
      key: 'vue2',
      label: 'Vue 2',
      entry: join(ROOT, 'dist', 'vue2', 'index.js'),
      plugin: [vue2Plugin],
      externals: ['vue'],
      handle: async (bundlePath, outDir) => {
        const host = `
import Vue from 'vue';
import * as Kole from './entry.mjs';
const list = Object.keys(Kole).filter(k => k.startsWith('Kole')).sort();
const target = Kole.KoleButton || Kole.Button;
new Vue({
  render(h) {
    const children = [];
    if (target) children.push(h(target, { props: { type: 'primary', text: '保存' } }));
    children.push(h('div', { attrs: { id: 'marks', 'data-count': String(list.length) } }));
    return h('div', { attrs: { id: 'wrap' } }, children);
  },
}).$mount('#root');
`;
        writeFileSync(join(outDir, 'host.js'), host);
        return { hostPath: join(outDir, 'host.js'), entryRel: './entry.mjs' };
      },
    },
  ];

  for (const end of ends) {
    const outDir = join(OUT, end.key);
    mkdirSync(outDir, { recursive: true });
    /* 1) 把 dist 入口打成 ESM（运行时走 externals，从本地 node_modules 取真版本） */
    try {
      await esbuild.build({
        entryPoints: [end.entry],
        bundle: true,
        format: 'esm',
        outfile: join(outDir, 'entry.mjs'),
        plugins: end.plugin,
        external: end.externals,
        nodePaths: NODE_PATHS,
        loader: { '.css': 'empty' },
        logLevel: 'silent',
      });
    } catch (e) {
      record(false, `dist/${end.key} 入口真编译`, String(e.errors?.[0]?.text || e.message).slice(0, 200));
      continue;
    }
    record(true, `dist/${end.key} 入口真编译`, null);

    /* 2) 宿主页：用 importmap 指到本地 node_modules 里的运行时（真版本，非 CDN） */
    const { hostPath } = await end.handle(join(outDir, 'entry.mjs'), outDir);
    try {
      await esbuild.build({
        entryPoints: [hostPath],
        bundle: true,
        format: 'iife',
        outfile: join(outDir, 'host.iife.js'),
        plugins: end.plugin,
        nodePaths: NODE_PATHS,
        loader: { '.css': 'empty' },
        logLevel: 'silent',
      });
    } catch (e) {
      record(false, `dist/${end.key} 宿主真编译`, String(e.errors?.[0]?.text || e.message).slice(0, 200));
      continue;
    }
    record(true, `dist/${end.key} 宿主真编译`, null);

    /* 3) 真浏览器挂载 */
    const tokens = readFileSync(join(ROOT, 'dist', 'tokens', 'tokens.css'), 'utf8');
    const compCss = readFileSync(join(ROOT, 'dist', 'components', 'index.css'), 'utf8');
    const html = `<!DOCTYPE html><html><head><meta charset="utf-8"><style>${tokens}\n${compCss}</style></head>
<body><div id="root"></div><script src="host.iife.js"></script></body></html>`;
    writeFileSync(join(outDir, 'index.html'), html);
    /* 产物落在 .zcode/ 下（不在 dev-server 的 PUBLIC_ROOTS 里），故用 setContent + addScriptTag
       内联注入：既走真浏览器，又不把临时文件写进 site/ 等受守卫的产物目录。 */
    const bundleJs = readFileSync(join(outDir, 'host.iife.js'), 'utf8');
    const p = await browser.newPage({ viewport: { width: 900, height: 700 } });
    const errors = [];
    p.on('console', (m) => { if (m.type() === 'error') errors.push(m.text().slice(0, 200)); });
    p.on('pageerror', (e) => errors.push('pageerror: ' + String(e.message).slice(0, 200)));
    await p.setContent(`<!DOCTYPE html><html><head><meta charset="utf-8"><style>${tokens}\n${compCss}</style></head><body><div id="root"></div></body></html>`);
    await p.addScriptTag({ content: bundleJs });
    await p.waitForTimeout(800);
    const mountProbe = await p.evaluate(() => {
      const root = document.getElementById('root');
      const html = root ? root.innerHTML : '';
      const btn = root ? root.querySelector('button') : null;
      const cs = btn ? getComputedStyle(btn) : null;
      const marks = document.getElementById('marks');
      return {
        htmlLen: html.length,
        buttonCount: root ? root.querySelectorAll('button').length : 0,
        btnClass: btn ? btn.className : null,
        btnBg: cs ? cs.backgroundColor : null,
        exportCount: marks ? marks.getAttribute('data-count') : null,
        text: root ? (root.innerText || '').trim().slice(0, 60) : '',
      };
    });
    await p.close();
    const classOk = !!mountProbe.btnClass && /btn/.test(mountProbe.btnClass);
    const bgOk = !!mountProbe.btnBg && mountProbe.btnBg !== 'rgba(0, 0, 0, 0)';
    record(
      errors.length === 0 && mountProbe.buttonCount > 0 && classOk && bgOk && mountProbe.text.includes('保存'),
      `dist/${end.key} 真挂载渲染`,
      [
        mountProbe.buttonCount === 0 ? '无 button' : null,
        !classOk ? `类名异常: ${mountProbe.btnClass}` : null,
        !bgOk ? `背景色未生效: ${mountProbe.btnBg}` : null,
        !mountProbe.text.includes('保存') ? `文本异常: "${mountProbe.text}"` : null,
        errors.length ? `控制台: ${errors.slice(0, 2).join(' || ')}` : null,
      ].filter(Boolean).join(' ; ') || `导出 ${mountProbe.exportCount} 个 / class="${mountProbe.btnClass}" / bg=${mountProbe.btnBg}`
    );
    record(
      Number(mountProbe.exportCount) >= 100,
      `dist/${end.key} 导出数量`,
      `实测 ${mountProbe.exportCount}（期望 ≥100，data.json 为 103）`
    );
  }

  /* --- 4) CSS 端：真浏览器里确认类名产生样式 --- */
  const tokensCss = readFileSync(join(ROOT, 'dist', 'tokens', 'tokens.css'), 'utf8');
  const cssIndex = readFileSync(join(ROOT, 'dist', 'components', 'index.css'), 'utf8');
  const p = await browser.newPage({ viewport: { width: 900, height: 700 } });
  const errors = [];
  p.on('console', (m) => { if (m.type() === 'error') errors.push(m.text().slice(0, 160)); });
  await p.setContent(`<!DOCTYPE html><html><head><meta charset="utf-8"><style>${tokensCss}\n${cssIndex}</style></head>
<body><button id="b1" class="btn btn-primary btn-md">保存</button><button id="b2" class="btn btn-default btn-md">取消</button></body></html>`);
  await p.waitForTimeout(300);
  const cssProbe = await p.evaluate(() => {
    const g = (sel) => {
      const el = document.querySelector(sel);
      if (!el) return null;
      const cs = getComputedStyle(el);
      return { bg: cs.backgroundColor, color: cs.color, border: cs.borderColor, h: el.getBoundingClientRect().height };
    };
    return { primary: g('#b1'), def: g('#b2') };
  });
  await p.close();
  const differs =
    cssProbe.primary && cssProbe.def &&
    (cssProbe.primary.bg !== cssProbe.def.bg || cssProbe.primary.color !== cssProbe.def.color || cssProbe.primary.border !== cssProbe.def.border);
  record(
    differs && cssProbe.primary.bg !== 'rgba(0, 0, 0, 0)' && Math.round(cssProbe.primary.h) === 32,
    'dist CSS 端变体真实生效',
    `primary bg=${cssProbe.primary?.bg} h=${cssProbe.primary?.h} / default bg=${cssProbe.def?.bg} h=${cssProbe.def?.h}`
  );
}

/* ---------- group: contract-visual ----------
 * 契约声明的变体维度，在真浏览器里确实产生**不同视觉**。
 * 这比"类名存在于 CSS 文件"强：类名在文件里但没被任何规则命中时，视觉相同 → 判失败。
 */
async function groupContractVisual(browser) {
  const compDir = join(ROOT, '.design_library', 'kole-ui', 'components');
  const data = JSON.parse(readFileSync(join(ROOT, 'site', 'data.json'), 'utf8'));
  const htmlList = (await import('node:fs')).readdirSync(join(ROOT, 'frameworks')).filter((f) => f.endsWith('.html'));
  const bySlug = new Map(htmlList.map((f) => [f.replace(/\.html$/, '').toLowerCase(), f]));

  /* 只取真正的**组件契约**：`index.json` 是设计库索引（键是 schemaVersion/library/components…），
     没有 variantDimensions，也不是组件 —— 早期按 "*.json" 收全部文件会把它当契约去查演示页，
     必然失败（实测踩到 index 误报"frameworks 下无同名演示页"）。判据：必须有 variantDimensions 键。 */
  const files = (await import('node:fs'))
    .readdirSync(compDir)
    .filter((f) => f.endsWith('.json'))
    .filter((f) => {
      try {
        return Object.prototype.hasOwnProperty.call(JSON.parse(readFileSync(join(compDir, f), 'utf8')), 'variantDimensions');
      } catch {
        return false;
      }
    });

  const [si, sn] = SHARD.split('/').map(Number);
  const mine = files.filter((_, i) => i % sn === si);
  console.log(`[contract-visual] 分片 ${SHARD} · 本片 ${mine.length}/${files.length} 份契约`);

  for (const f of mine) {
    const slug = f.replace(/\.json$/, '');
    const c = JSON.parse(readFileSync(join(compDir, f), 'utf8'));
    /* 变体维度有两个来源：variantDimensions（结构化）与 representativeVariants（代表变体清单）。
       10 个组件只有后者（form / pageheader / radio / timepicker 等），只读前者会把它们整批跳过 ——
       而 form / pageheader 恰恰有真缺陷（-primary 被 -button 源序覆盖），漏掉就看不到。
       故在此把两个来源归一成同一种 {name, values} 形态。 */
    let dims = (c.variantDimensions || []).map((d) => ({ name: d.name, values: d.values }));
    if (!dims.length && Array.isArray(c.representativeVariants) && c.representativeVariants.length) {
      dims = [{ name: 'representativeVariants', values: c.representativeVariants.map((r) => (typeof r === 'string' ? r : r.variant)).filter(Boolean) }];
    }
    /* 两个来源都没有 → 无从比较，N/A */
    if (!dims.length || !dims.some((d) => (d.values || []).length >= 2)) {
      console.log(`  SKIP  ${slug} 变体视觉可分 — 契约未声明可比较的变体维度（N/A）`);
      continue;
    }
    const file = bySlug.get(slug);
    if (!file) { record(false, `${slug} 契约变体视觉`, `frameworks 下无同名演示页（契约 slug=${slug}）`); continue; }

    /* 在演示页里取**同族**元素的视觉签名。
       关键：状态类（is-success / is-error）常各自挂在**独立的根元素**上，
       只按"整组类名"聚合时每组只剩 1 个成员 → 结构性看不见差异（实测踩到：
       resultvariants 靠同页按钮颜色偶然过关，alert 则完全漏掉）。
       故把"契约声明的变体值"作为比对对象：在页面里找带 `is-<值>` 或 `--<值>` 或 `-<值>` 的元素，
       同族内不同变体值之间必须视觉可分。 */
    const r = await openAndProbe(browser, `/frameworks/${file}`, {
      settle: 700,
      probe: (dimsIn) => {
        /* 视觉签名必须包含**后代**：不少变体只给子元素上色，容器自身计算样式不变。
           实测踩到：`.kole-timeline-item.is-done > .kole-timeline-node` 与 `is-error > .kole-timeline-node`
           颜色不同，但两者容器签名一致 → 被判"视觉相同"。故取"自身 + 关键后代"的合并签名。 */
        const styleOf = (el) => {
          const pick = (n) => {
            const cs = getComputedStyle(n);
            return [
              cs.backgroundColor, cs.color, cs.borderColor, cs.borderRadius, cs.fontSize, cs.height,
              cs.position, cs.left, cs.right, cs.top, cs.boxShadow, cs.transform, cs.display, cs.fontWeight,
            ].join('|');
          };
          const own = pick(el);
          const kids = Array.from(el.children).slice(0, 6).map((c) => pick(c)).join('~~');
          const pseudo = ['::before', '::after'].map((ps) => {
            const cs = getComputedStyle(el, ps);
            return [cs.content, cs.backgroundColor, cs.borderColor, cs.transform, cs.display].join('|');
          }).join('~~');
          return own + '@@' + kids + '@@' + pseudo;
        };
        const clsOf = (el) => (typeof el.className === 'string' ? el.className : (el.className && el.className.baseVal) || '');
        const visible = (el) => {
          const r2 = el.getBoundingClientRect();
          return r2.width > 0 && r2.height > 0;
        };
        const all = Array.from(document.querySelectorAll('body *')).filter(visible);

        /* 变体值的承载形式是类名里的**一个连字符段**：btn-primary / is-success / kole-alert-error
           都算 primary / success / error。早期用 `(^|\s)(is-)?value($|\s)` 会漏掉 btn-primary
           （value 前面是 "btn-"，既非空白也非 is-）→ 实测把 button 的 5 个 type 值全判成"未渲染"。
           故按空白切类名、再按连字符切段，段相等即命中。 */
        const segmentHit = (el, v) => {
          const cls = clsOf(el);
          if (!cls) return false;
          return cls.split(/\s+/).some((c) => c.split('-').includes(v));
        };

        /* **逐维度**比较：同一个值名可能出现在不同维度里（button 的 type 与 size 都有 "default"），
           跨维度混比会把"合法的同形值"当成冲突（实测踩到 button 误报）。
           故每个维度单独取它的值集合，只在该维度内部比对。 */
        const perDim = [];
        for (const d of dimsIn) {
          const vals = (d.values || []).map(String);
          const found = [];
          for (const v of vals) {
            const hits = all.filter((el) => segmentHit(el, v));
            if (hits.length) found.push({ val: v, sig: styleOf(hits[0]), cls: clsOf(hits[0]).slice(0, 60) });
          }
          /* 该维度里至少 2 个值被渲染出来，才有可比较的证据 */
          if (found.length >= 2) {
            const uniq = new Set(found.map((x) => x.sig));
            const collisions = found.filter((x) => found.some((y) => y.val !== x.val && y.sig === x.sig));
            perDim.push({ dim: d.name, total: found.length, distinct: uniq.size, collisions: collisions.map((x) => x.val + '(' + x.cls + ')') });
          } else {
            perDim.push({ dim: d.name, total: found.length, distinct: 0, collisions: [], insufficient: true, declared: vals.length });
          }
        }
        return { perDim };
      },
      probeArg: dims,
    });

    /* 决定性补充判定：**变体类是否至少能命中某条 CSS 规则**。
       做法（真浏览器）：摘掉承载类 → 比对「自身 + 后代 + 伪元素 + 关键几何」的计算样式。
       完全相同 ⇒ 该类对视觉零影响。
       注意这条判据的边界（实测逐条核过，避免误报）：
         - Select 的 `.is-open .kole-select-trigger` 是**后代选择器**，摘类后子元素样式会变 → 生效；
         - `.is-disabled` 在部分页面上挂在非规则匹配的元素上（页面里没有对应结构）→ 摘类不变，
           但**规则本身存在**，属"演示页未覆盖"而非"类失效"。
       故这里再补一道静态校验：只有「摘类无变化 **且** CSS 里找不到任何以该类为选择器的规则」才判失败。 */
    const effProbe = await openAndProbe(browser, `/frameworks/${file}`, {
      settle: 700,
      probe: (dimsIn) => {
        const pick = (n) => {
          const cs = getComputedStyle(n);
          return [
            cs.backgroundColor, cs.color, cs.borderColor, cs.borderRadius, cs.fontSize, cs.height,
            cs.position, cs.left, cs.right, cs.boxShadow, cs.transform, cs.fontWeight, cs.opacity,
          ].join('|');
        };
        const clsOf = (el) => (typeof el.className === 'string' ? el.className : (el.className && el.className.baseVal) || '');
        const area = (el) => {
          const r = el.getBoundingClientRect();
          return r.width > 0 && r.height > 0;
        };
        const results = [];
        for (const d of dimsIn) {
          for (const v of (d.values || []).map(String)) {
            const hit = Array.from(document.querySelectorAll('body *')).filter((el) => {
              if (!area(el)) return false;
              return clsOf(el).split(/\s+/).some((c) => c.split('-').includes(v));
            })[0];
            if (!hit) continue;
            const carrier = clsOf(hit).split(/\s+/).find((c) => c.split('-').includes(v));
            if (!carrier) continue;
            const snap = () => {
              const own = pick(hit);
              const kids = Array.from(hit.querySelectorAll('*')).slice(0, 12).map(pick).join('~~');
              const pseudo = ['::before', '::after']
                .map((ps) => {
                  const cs = getComputedStyle(hit, ps);
                  return [cs.content, cs.backgroundColor, cs.borderColor, cs.transform, cs.display].join('|');
                })
                .join('~~');
              const r2 = hit.getBoundingClientRect();
              const geo = [Math.round(r2.width), Math.round(r2.height)].join('x');
              return own + '@@' + kids + '@@' + pseudo + '@@' + geo;
            };
            const before = snap();
            hit.classList.remove(carrier);
            const afterNoClass = snap();
            hit.classList.add(carrier); // 立刻还原
            results.push({ dim: d.name, val: v, carrier, changed: before !== afterNoClass });
          }
        }
        /* 静态校验用：把页面内 <style> 与外链 CSS 全文抓下来，供 Node 侧查是否有该类的规则 */
        const cssText = Array.from(document.querySelectorAll('style')).map((s) => s.textContent || '').join('\n');
        return { results, cssTextLen: cssText.length, cssText };
      },
      probeArg: dims,
    });
    const eff = (effProbe.probe && effProbe.probe.results) || [];
    const pageCss = (effProbe.probe && effProbe.probe.cssText) || '';
    /* 组件自己的 CSS 文件也纳入检索范围（演示页多为内嵌 <style>，但实现文件是另一处真源） */
    let fileCss = '';
    try {
      const cssPath = join(ROOT, 'frameworks', file.replace(/\.html$/, '.css'));
      if (existsSync(cssPath)) fileCss = readFileSync(cssPath, 'utf8');
    } catch {
      fileCss = '';
    }
    const allCss = pageCss + '\n' + fileCss;
    /* 只有「摘类无变化」且「两处 CSS 都找不到以该类为选择器的规则」才算真失效 */
    const ineffective = eff.filter((x) => {
      if (x.changed) return false;
      const re = new RegExp('\\.' + x.carrier.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '(?![\\w-])');
      return !re.test(allCss);
    });
    const pr = r.probe || {};
    const perDim = pr.perDim || [];
    const usable = perDim.filter((d) => !d.insufficient);
    const bad = usable.filter((d) => d.distinct !== d.total);
    if (r.status !== 200) {
      record(false, `${slug} 变体视觉可分`, `HTTP ${r.status}`);
    } else if (ineffective.length) {
      /* 变体类不生效是**硬缺陷**：无论演示页渲染了几个变体，摘掉类样式完全不变就说明它没起作用。 */
      record(
        false,
        `${slug} 变体类生效`,
        `${ineffective.length} 个变体类摘除后视觉无任何变化: ` +
          ineffective.slice(0, 5).map((x) => `${x.dim}.${x.val}(${x.carrier})`).join(', ')
      );
    } else if (!usable.length) {
      const decl = perDim.map((d) => `${d.dim}:${d.total}/${d.declared}`).join(', ');
      console.log(`  SKIP  ${slug} 变体视觉可分 — 无维度渲染出 ≥2 个变体值（N/A；${decl}）；已核实 ${eff.filter((x) => x.changed).length} 个变体类均生效`);
    } else {
      record(
        bad.length === 0,
        `${slug} 变体视觉可分`,
        bad.length
          ? bad.map((d) => `维度 ${d.dim}: ${d.total - d.distinct} 个值与其它值视觉相同 → ${d.collisions.slice(0, 4).join(', ')}`).join(' ; ')
          : usable.map((d) => `${d.dim} ${d.distinct}/${d.total}`).join(', ')
      );
    }
  }
}

/* ---------- group: interaction ----------
 * 「能不能正常用」——用真实用户动作去点、去输入、去按 Tab，而不是查 DOM 里有没有那个元素。
 *
 * 判据（避免把"静态组件"误判成缺陷）：
 *   - 页面上找不到任何可交互元素 → 记 N/A（进度里显示 skip），不算失败。
 *     本仓库 PC 侧本就有 50 条 N/A（静态组件无交互面），这条与其口径一致。
 *   - 有可交互元素时：逐个点击，**控制台不得新增 error/pageerror**；
 *     全部点完后 DOM 签名（类名+属性+子节点数）必须至少变化一次 ——
 *     一次都不变说明"点了没反应"，组件在实机上不可用。
 *   - 文本框：填入值后 value 必须真的被设置（受控组件写不进去即失败）。
 *   - 键盘：Tab 至少能移动到 2 个不同元素（焦点可达性）。
 */
async function groupInteraction(browser) {
  const platform = arg('--platform', 'pc');
  const dataFile = platform === 'mobile' ? ['site', 'm', 'data.mobile.json'] : ['site', 'data.json'];
  const dir = platform === 'mobile' ? 'frameworks-mobile' : 'frameworks';
  const data = JSON.parse(readFileSync(join(ROOT, ...dataFile), 'utf8'));
  const slugs = data.components.map((c) => c.slug);
  const htmlList = (await import('node:fs')).readdirSync(join(ROOT, dir)).filter((f) => f.endsWith('.html'));
  const bySlug = new Map(htmlList.map((f) => [f.replace(/\.html$/, '').toLowerCase(), f]));

  const [si, sn] = SHARD.split('/').map(Number);
  const mine = slugs.filter((_, i) => i % sn === si);
  console.log(`[interaction:${platform}] 分片 ${SHARD} · 本片 ${mine.length}/${slugs.length}`);

  let na = 0;
  for (const slug of mine) {
    const file = bySlug.get(slug) || htmlList.find((f) => f.toLowerCase().replace(/[^a-z0-9]/g, '') === slug.replace(/[^a-z0-9]/g, ''));
    if (!file) { record(false, `${slug} 交互`, '无演示页'); continue; }

    const p = await browser.newPage({
      viewport: platform === 'mobile' ? { width: 390, height: 844 } : { width: 1200, height: 800 },
      hasTouch: platform === 'mobile',
    });
    /* 在页面脚本执行前埋点，统计"真的注册了事件处理"的次数。
       为什么需要它：演示页常含**装饰性** <button>（没有任何 handler，只做视觉展示）——
       实测 EmptyPro / ResultVariants / ExceptionVariants / Icon / Pagination 的按钮
       CDP 实测监听器数为 0，点它们本来就不该有任何反应。
       若不区分，"点了没反应"会把"没有交互面"误解成"组件点不动"（曾误报 8 条）。
       计数来源：addEventListener + 内联 on* 属性 + 页面上 <script> 里的 on*= 赋值。 */
    await p.addInitScript(() => {
      window.__koleRegistered = 0;
      const orig = EventTarget.prototype.addEventListener;
      EventTarget.prototype.addEventListener = function (...args) {
        window.__koleRegistered++;
        return orig.apply(this, args);
      };
    });
    const errors = [];
    p.on('console', (m) => { if (m.type() === 'error') errors.push(m.text().slice(0, 180)); });
    p.on('pageerror', (e) => errors.push('pageerror: ' + String(e.message).slice(0, 180)));
    p.on('dialog', (d) => d.dismiss().catch(() => {}));
    let navigated = false;
    p.on('framenavigated', (f) => { if (f === p.mainFrame()) navigated = true; });

    let status = 0;
    try {
      const resp = await p.goto(`${BASE}/${dir}/${file}`, { waitUntil: 'load', timeout: 20000 });
      status = resp ? resp.status() : 0;
      await p.waitForTimeout(600);
    } catch (e) {
      errors.push('goto: ' + String(e.message).slice(0, 140));
    }

    if (status !== 200) {
      record(false, `${slug} 交互`, `HTTP ${status}`);
      await p.close();
      continue;
    }

    /* 可交互元素：真实用户能点/能敲的东西 */
    const targets = await p.evaluate(() => {
      const sel = 'button, input:not([type=hidden]), select, textarea, a[href], [role="button"], [tabindex]:not([tabindex="-1"])';
      const els = Array.from(document.querySelectorAll(sel)).filter((el) => {
        const r = el.getBoundingClientRect();
        const cs = getComputedStyle(el);
        return r.width > 0 && r.height > 0 && cs.display !== 'none' && cs.visibility !== 'hidden' && !el.disabled;
      });
      /* 打标记，供后续按序号点击（避免 stale handle）。
         用 data-* 序号而不是 className 做焦点去重键 —— 同构元素（14 个 .kole-menu-item）
         按 className 去重会被折叠成 1 个，误报"焦点只到 1 个元素"（实测踩到 sidemenu/topmenu/rate）。 */
      els.forEach((el, i) => el.setAttribute('data-kole-probe', String(i)));
      /* DOM 签名：**必须覆盖属性级与 IDL 级状态**。
         早期版本只记 className + children.length，导致 checked/value/hidden/style/aria-expanded
         这些变化全部看不见 —— 实测 50 条误报（dropdown 的 hidden 移除、radio 的 checked 迁移、
         tooltip 的 hidden 翻转、inputnumber 的 value 变化…）。判据修正理由与反例见文件头。 */
      const sig = (root) => {
        const parts = [];
        root.querySelectorAll('*').forEach((el) => {
          const cls = (el.className && el.className.baseVal !== undefined ? el.className.baseVal : el.className) || '';
          const attrs = [];
          for (const a of el.attributes || []) {
            if (a.name === 'data-kole-probe') continue;      // 探针自己的标记不算变化
            attrs.push(a.name + '=' + String(a.value).slice(0, 40));
          }
          attrs.sort();
          /* IDL 属性：attribute 不变但 IDL 变的场景（radio.checked、input.value）必须能看见 */
          const idl = [
            el.checked === undefined ? '' : 'c' + el.checked,
            el.value === undefined ? '' : 'v' + String(el.value).slice(0, 40),
            el.hidden === undefined ? '' : 'h' + el.hidden,
            el.disabled === undefined ? '' : 'd' + el.disabled,
            el.open === undefined ? '' : 'o' + el.open,
          ].join(',');
          parts.push(cls + '[' + attrs.join(';') + ']' + idl + '#' + el.children.length + 'T' + (el.children.length===0 ? (el.textContent||'').trim().slice(0,20) : ''));
        });
        return parts.join('|');
      };
      const hash = (s) => {
        /* 简单 32 位散列：整页签名可能很长，直接比字符串更省内存也够灵敏 */
        let h = 0;
        for (let i = 0; i < s.length; i++) h = (Math.imul(31, h) + s.charCodeAt(i)) | 0;
        return s.length + ':' + h;
      };
      return {
        count: els.length,
        kinds: els.map((e) => e.tagName.toLowerCase() + (e.type ? ':' + e.type : '')).slice(0, 40),
        before: hash(sig(document.body)),
        textInputs: Array.from(document.querySelectorAll('input[type=text], input:not([type]), textarea')).length,
      };
    });

    if (targets.count === 0) {
      na++;
      console.log(`  SKIP  ${slug} 交互 — 无可交互元素（静态组件）`);
      await p.close();
      continue;
    }

    /* 逐个点击（最多 8 个，避免坏元素拖慢整轮） */
    let clicked = 0;
    const clickFails = [];
    for (let i = 0; i < Math.min(targets.count, 8); i++) {
      const urlBefore = p.url();
      try {
        await p.click(`[data-kole-probe="${i}"]`, { timeout: 1500, noWaitAfter: true });
        clicked++;
        await p.waitForTimeout(90);
      } catch (e) {
        clickFails.push(`${i}:${String(e.message).slice(0, 40)}`);
      }
      /* 链接/提交导致跳转就退回来，别把交互测试变成导航测试 */
      if (p.url() !== urlBefore) {
        await p.goBack({ timeout: 5000 }).catch(() => {});
        await p.waitForTimeout(200);
      }
    }

    /* 文本框：真敲字，断言 value 被写入。
       注意用的测试串必须是**各类型输入框都合法**的形态：早期用中文 'kole测试'，
       而 BankCardInput / PlateInput / PhoneInput / CodeInput / IDCardInput 都会按自己的规则
       净化输入（数字框剔除中文）→ value 被正确地清空，却被记成"写入失败"（实测 5 条误报）。
       改用数字串 '1234' 后这些组件的净化逻辑不会把它丢光。 */
    let inputProbe = { checked: 0, accepted: 0 };
    const inputCount = await p.evaluate(() => document.querySelectorAll('input[type=text], input:not([type]), textarea').length);
    if (inputCount > 0) {
      inputProbe = await p.evaluate(() => {
        const ins = Array.from(document.querySelectorAll('input[type=text], input:not([type]), textarea'))
          .filter((el) => !el.disabled && !el.readOnly && el.getBoundingClientRect().height > 0);
        let accepted = 0;
        ins.slice(0, 5).forEach((el) => {
          el.focus();
          el.value = '1234';
          el.dispatchEvent(new Event('input', { bubbles: true }));
          el.dispatchEvent(new Event('change', { bubbles: true }));
          /* 只要组件保留了这个值的一部分就算"写入被接受"：
             格式化类组件（卡号插空格、车牌补位）会改写 value，那是它的正常职责 */
          if (/[1-4]/.test(String(el.value))) accepted++;
        });
        return { checked: Math.min(ins.length, 5), accepted };
      });
    }

    /* 键盘：Tab 是否真的能移动焦点。
       去重键用探针序号（唯一），而不是 tag+className —— 同构元素会被错误折叠。 */
    const seen = new Set();
    for (let i = 0; i < 6; i++) {
      await p.keyboard.press('Tab').catch(() => {});
      const cur = await p.evaluate(() => {
        const a = document.activeElement;
        if (!a || a === document.body) return null;
        /* 用元素身份：优先探针序号，其次 id/name，最后 tag+文本摘要 */
        return a.getAttribute('data-kole-probe') || a.id || a.tagName + '#' + (a.textContent || '').trim().slice(0, 12);
      });
      if (cur) seen.add(cur);
    }

    /* 原生表单控件：**点击不会改变 DOM** 是正确行为（值要靠键盘/选择器改）。
       故对 input[type=number|time|date|color|range] 等，用 fill() 真写值并断言 IDL value 变化，
       而不是期待点击改变 DOM —— 否则 TimePicker/NumberRangeInput/DatePicker 会被误判
       "点了没反应"（实测踩到）。 */
    const nativeProbe = await p.evaluate(() => {
      const els = Array.from(document.querySelectorAll('input[type=number], input[type=time], input[type=date], input[type=color], input[type=range], input[type=datetime-local]'))
        .filter((el) => !el.disabled && el.getBoundingClientRect().height > 0);
      els.forEach((el, i) => el.setAttribute('data-kole-native', String(i)));
      return { count: els.length, before: els.map((el) => String(el.value)).join('|') };
    });
    if (nativeProbe.count > 0) {
      for (let i = 0; i < Math.min(nativeProbe.count, 4); i++) {
        const sel = `[data-kole-native="${i}"]`;
        const type = await p.getAttribute(sel, 'type').catch(() => null);
        const sample =
          type === 'time' ? '10:30' : type === 'date' ? '2020-01-01' : type === 'datetime-local' ? '2020-01-01T10:30'
          : type === 'color' ? '#123456' : '42';
        await p.fill(sel, sample).catch(() => {});
      }
    }
    const nativeAfter = await p.evaluate(() => {
      const els = Array.from(document.querySelectorAll('[data-kole-native]'));
      return { after: els.map((el) => String(el.value)).join('|') };
    });
    const nativeChanged = nativeProbe.count > 0 && nativeAfter.after !== nativeProbe.before;

    const probed = await p.evaluate(() => {
      const parts = [];
      document.body.querySelectorAll('*').forEach((el) => {
        const cls = (el.className && el.className.baseVal !== undefined ? el.className.baseVal : el.className) || '';
        const attrs = [];
        for (const a of el.attributes || []) {
          if (a.name === 'data-kole-probe') continue;
          attrs.push(a.name + '=' + String(a.value).slice(0, 40));
        }
        attrs.sort();
        const idl = [
          el.checked === undefined ? '' : 'c' + el.checked,
          el.value === undefined ? '' : 'v' + String(el.value).slice(0, 40),
          el.hidden === undefined ? '' : 'h' + el.hidden,
          el.disabled === undefined ? '' : 'd' + el.disabled,
          el.open === undefined ? '' : 'o' + el.open,
        ].join(',');
        parts.push(cls + '[' + attrs.join(';') + ']' + idl + '#' + el.children.length + 'T' + (el.children.length===0 ? (el.textContent||'').trim().slice(0,20) : ''));
      });
      const s = parts.join('|');
      let h = 0;
      for (let i = 0; i < s.length; i++) h = (Math.imul(31, h) + s.charCodeAt(i)) | 0;
      /* 顺手统计该页是否真的注册过事件处理（含内联 on* 与脚本里的 on*= 赋值）。
         放在关闭页面**之前**取，否则 evaluate 会因 Target closed 抛错（实测踩到）。 */
      const reg = window.__koleRegistered || 0;
      const inlineOn = Array.from(document.querySelectorAll('*')).filter((el) =>
        Array.from(el.attributes || []).some((a) => /^on[a-z]+$/.test(a.name))
      ).length;
      const scripts = Array.from(document.querySelectorAll('script')).map((sc) => sc.textContent || '').join('');
      const scriptOn = (scripts.match(/on(click|input|change|pointer\w+|touch\w+|mousedown|mouseup|keydown|keyup)\s*=/g) || []).length;
      return { sig: s.length + ':' + h, wiring: { reg, inlineOn, scriptOn, total: reg + inlineOn + scriptOn }, radios: document.querySelectorAll('input[type=radio]').length };
    });
    await p.close();

    const after = probed.sig;
    const wiring = probed.wiring;
    const focusStat = probed.radios || 0;
    const changed = after !== targets.before || nativeChanged;
    const inputOk = inputProbe.checked === 0 || inputProbe.accepted > 0;
    /* 有交互元素、但整页**零事件注册** → 这些"按钮"是装饰性的，没有交互面可测 → N/A。
       这与本仓库既有的 50 条 N/A（静态组件无交互面）是同一口径。
       注意：nativeChanged 为真时说明原生控件确实响应了，不算"无交互面"。 */
    if (wiring.total === 0 && !changed) {
      na++;
      console.log(`  SKIP  ${slug} 交互 — 有 ${targets.count} 个可交互元素但整页零事件注册（装饰性，N/A）`);
      await p.close();
      continue;
    }
    /* 焦点判据：
       - 页面只有 1 个可聚焦元素时 Tab 只能到 1 个 —— 那是页面结构，不是缺陷。
       - **原生 radio 组是单一 Tab 停靠点**（组内用方向键切换），这是 HTML 规定行为，
         不是"焦点移动失败"（实测 radio 被误报）。故把 radio 全并成 1 个有效停靠点再计数。 */
    const focusOk = targets.count <= 1 || seen.size >= 2;

    record(
      errors.length === 0 && changed && inputOk && (focusOk || (focusStat >= 2 && seen.size >= 1)),
      `${slug} 交互可用`,
      [
        errors.length ? `${errors.length} 控制台错误: ${errors.slice(0, 2).join(' || ')}` : null,
        !changed ? `点击 ${clicked} 个元素后 DOM 无任何变化（已注册 ${wiring.reg} 个监听器 + ${wiring.inlineOn} 个内联 on*，点了没反应）` : null,
        !inputOk ? `文本框写入失败 ${inputProbe.accepted}/${inputProbe.checked}` : null,
        !focusOk && !(focusStat >= 2 && seen.size >= 1)
          ? `Tab 后焦点只到 ${seen.size} 个元素（页面 ${targets.count} 个可交互，其中原生 radio ${focusStat} 个；radio 组按 HTML 语义只占 1 个停靠点）`
          : null,
        clickFails.length ? `点击未能执行 ${clickFails.length} 个: ${clickFails.slice(0, 2).join(', ')}` : null,
      ].filter(Boolean).join(' ; ') ||
        `可交互 ${targets.count} 个 / 点击 ${clicked} / 文本框 ${inputProbe.accepted}/${inputProbe.checked} / 焦点 ${seen.size} 处 / 注册 ${wiring.total}` +
          (nativeProbe.count ? ` / 原生控件 ${nativeProbe.count} 个${nativeChanged ? '(值已变更)' : ''}` : '')
    );
  }
  if (na) console.log(`[interaction:${platform}] ${na} 个页面无交互面（N/A，不计失败）`);
}

/* ---------- group: compile-ends ----------
 * 每个 JS 端（React JSX / Vue3 SFC / Vue2 SFC）的**全部**实现文件逐个真编译。
 * 一个编译不过的组件，用户 import 时直接报错 —— 这是"能不能用"的硬底线。
 * 覆盖 dist/ 与 frameworks/ 两侧（dist 是发布形态，frameworks 是源码形态）。
 */
async function groupCompileEnds(browser) {
  const { createRequire } = await import('node:module');
  const DEPS = join(ROOT, '.zcode', 'verify-import');
  const DEPS2 = join(ROOT, '.zcode', 'verify-vue2');
  const req = createRequire(join(DEPS, 'x.js'));
  const req2 = createRequire(join(DEPS2, 'x.js'));
  let esbuild, sfc3, tc2;
  try {
    esbuild = req('esbuild');
    sfc3 = req('@vue/compiler-sfc');
    tc2 = req2('vue-template-compiler');
  } catch (e) {
    console.error('[FATAL] 缺少编译依赖：' + e.message);
    process.exit(2);
  }
  const NODE_PATHS = [join(DEPS, 'node_modules'), join(DEPS2, 'node_modules')];
  const fs = await import('node:fs');

  /* Vue3 的 .vue 需要走 esbuild + SFC 插件才叫"真编译"（含 template 编译） */
  const vue3Plugin = {
    name: 'sfc3',
    setup(build) {
      build.onLoad({ filter: /\.vue$/ }, (args) => {
        const source = fs.readFileSync(args.path, 'utf8');
        const { descriptor, errors } = sfc3.parse(source, { filename: args.path });
        if (errors.length) throw new Error('SFC parse: ' + errors[0].message);
        const id = Buffer.from(args.path).toString('hex').slice(0, 8);
        const script = sfc3.compileScript(descriptor, { id });
        const tpl = descriptor.template
          ? sfc3.compileTemplate({
              source: descriptor.template.content,
              filename: args.path,
              id,
              compilerOptions: { bindingMetadata: script.bindings },
            })
          : { code: 'export function render(){return null}' };
        if (tpl.errors && tpl.errors.length) throw new Error('template: ' + tpl.errors[0].message || tpl.errors[0]);
        return {
          contents: `${script.content.replace(/export\s+default/, 'const __m =')}\n${tpl.code.replace(/export\s+function\s+render/, 'function __r')}\n__m.render = __r;\nexport default __m;`,
          loader: 'js',
          resolveDir: dirname(args.path),
        };
      });
    },
  };

  const [si, sn] = SHARD.split('/').map(Number);

  /* --- React（dist/react/*.jsx，source=verif） --- */
  const reactFiles = fs.readdirSync(join(ROOT, 'dist', 'react')).filter((f) => f.endsWith('.jsx'));
  {
    const mine = reactFiles.filter((_, i) => i % sn === si);
    let bad = [];
    for (const f of mine) {
      try {
        await esbuild.build({
          entryPoints: [join(ROOT, 'dist', 'react', f)],
          bundle: true, write: false, format: 'esm',
          external: ['react', 'react-dom'], nodePaths: NODE_PATHS,
          loader: { '.css': 'empty' }, logLevel: 'silent',
        });
      } catch (e) {
        bad.push(f + ' :: ' + String(e.errors?.[0]?.text || e.message).slice(0, 120));
      }
    }
    record(bad.length === 0, `React 全量真编译（本片 ${mine.length} 个）`, bad.slice(0, 6).join(' ; ') || null);
    bad.forEach((b) => console.log('      ✗ ' + b));
  }

  /* --- Vue 3 --- */
  const v3 = fs.readdirSync(join(ROOT, 'dist', 'vue3')).filter((f) => f.endsWith('.vue'));
  {
    const mine = v3.filter((_, i) => i % sn === si);
    let bad = [];
    for (const f of mine) {
      try {
        await esbuild.build({
          entryPoints: [join(ROOT, 'dist', 'vue3', f)],
          bundle: true, write: false, format: 'esm',
          external: ['vue'], plugins: [vue3Plugin], nodePaths: NODE_PATHS,
          loader: { '.css': 'empty' }, logLevel: 'silent',
        });
      } catch (e) {
        bad.push(f + ' :: ' + String(e.errors?.[0]?.text || e.message).slice(0, 120));
      }
    }
    record(bad.length === 0, `Vue3 全量真编译（本片 ${mine.length} 个）`, bad.slice(0, 6).join(' ; ') || null);
    bad.forEach((b) => console.log('      ✗ ' + b));
  }

  /* --- Vue 2（含源码侧 frameworks/*.vue2.vue 对照） --- */
  for (const [label, dir, suffix] of [['Vue2(dist)', join(ROOT, 'dist', 'vue2'), '.vue'], ['Vue2(源码)', join(ROOT, 'frameworks'), '.vue2.vue']]) {
    const all = fs.readdirSync(dir).filter((f) => f.endsWith(suffix));
    const mine = all.filter((_, i) => i % sn === si);
    let bad = [];
    for (const f of mine) {
      const src = fs.readFileSync(join(dir, f), 'utf8');
      const parsed = tc2.parseComponent(src);
      if (parsed.template) {
        const c = tc2.compile(parsed.template.content);
        if (c.errors && c.errors.length) bad.push(f + ' :: ' + c.errors.join(' | ').slice(0, 140));
      }
      /* script 侧也过一遍 esbuild（抓语法/重复声明这类只在编译期暴露的问题） */
      if (parsed.script) {
        try {
          esbuild.transformSync(parsed.script.content.replace(/export\s+default/, 'const __x ='), { loader: 'js' });
        } catch (e) {
          bad.push(f + ' :: script: ' + String(e.errors?.[0]?.text || e.message).slice(0, 120));
        }
      }
    }
    record(bad.length === 0, `${label} 全量真编译（本片 ${mine.length} 个）`, bad.slice(0, 6).join(' ; ') || null);
    bad.forEach((b) => console.log('      ✗ ' + b));
  }
}

/* ---------- group: mount-all ----------
 * 把**全部**组件在真实浏览器里逐个挂载（每个端一个页面，一次挂载所有组件）。
 * 断言：每个组件对应的容器都有 DOM 产出、且全程 0 控制台错误 / 0 未捕获异常。
 * 这是"实机环境正常使用"的最强形态 —— 编译过 ≠ 能实例化，实例化可能抛错。
 */
async function groupMountAll(browser) {
  const { createRequire } = await import('node:module');
  const DEPS = join(ROOT, '.zcode', 'verify-import');
  const DEPS2 = join(ROOT, '.zcode', 'verify-vue2');
  const req = createRequire(join(DEPS, 'x.js'));
  const req2 = createRequire(join(DEPS2, 'x.js'));
  const esbuild = req('esbuild');
  const sfc3 = req('@vue/compiler-sfc');
  const tc2 = req2('vue-template-compiler');
  const NODE_PATHS = [join(DEPS, 'node_modules'), join(DEPS2, 'node_modules')];
  const fs = await import('node:fs');

  const OUT = join(OUT_DIR, 'mount-all');
  fs.mkdirSync(OUT, { recursive: true });
  const tokens = fs.readFileSync(join(ROOT, 'dist', 'tokens', 'tokens.css'), 'utf8');
  const compCss = fs.readFileSync(join(ROOT, 'dist', 'components', 'index.css'), 'utf8');

  const vue3Plugin = {
    name: 'sfc3',
    setup(build) {
      build.onLoad({ filter: /\.vue$/ }, (args) => {
        const source = fs.readFileSync(args.path, 'utf8');
        const { descriptor, errors } = sfc3.parse(source, { filename: args.path });
        if (errors.length) throw new Error('SFC parse: ' + errors[0].message);
        const id = Buffer.from(args.path).toString('hex').slice(0, 8);
        const script = sfc3.compileScript(descriptor, { id });
        const tpl = descriptor.template
          ? sfc3.compileTemplate({ source: descriptor.template.content, filename: args.path, id, compilerOptions: { bindingMetadata: script.bindings } })
          : { code: 'export function render(){return null}' };
        if (tpl.errors && tpl.errors.length) throw new Error('template: ' + (tpl.errors[0].message || tpl.errors[0]));
        return {
          contents: `${script.content.replace(/export\s+default/, 'const __m =')}\n${tpl.code.replace(/export\s+function\s+render/, 'function __r')}\n__m.render = __r;\nexport default __m;`,
          loader: 'js', resolveDir: dirname(args.path),
        };
      });
    },
  };
  /* Vue 2 的 render 是 `with(this){...}`。esbuild 只要把输入当 ESM 解析就会判 strict 并报
     "With statements cannot be used in an ECMAScript module" —— 这是**解析模式**问题，与组件无关。
     Vue 2 的真实消费形态本就是 CJS/非模块，故这里的插件输出 CJS（module.exports），
     让 esbuild 按 CommonJS 解析（非严格），从而能真实编译并挂载。 */
  const vue2Plugin = {
    name: 'sfc2',
    setup(build) {
      build.onLoad({ filter: /\.vue$/ }, (args) => {
        const src = fs.readFileSync(args.path, 'utf8');
        const parsed = tc2.parseComponent(src);
        let scriptContent = parsed.script ? parsed.script.content : 'export default {}';
        /* 本库的 vue2 实现是纯 <script>（无 import），只需把唯一的一次 export default 换成 CJS 赋值 */
        scriptContent = scriptContent.replace(/export\s+default\s+/, 'module.exports = ');
        if (parsed.template) {
          const c = tc2.compile(parsed.template.content);
          if (c.errors && c.errors.length) throw new Error('vue2 template: ' + c.errors[0]);
          /* vue-template-compiler 的 compile().render 返回的是**函数体字符串**（`with(this){…}`），
             不是可直接调用的函数 —— 直接当代码插入会让 _c / _v 在模块作用域求值而报
             "_c is not defined"（实测踩到，表现为 103 个组件全部挂载失败）。
             正解与 vue-loader 一致：包成 real function 再挂到选项对象上。 */
          return {
            contents: `${scriptContent}\nmodule.exports.render = function () { ${c.render} };\nmodule.exports.staticRenderFns = [${(c.staticRenderFns || []).map((fn) => `function () { ${fn} }`).join(',')}];`,
            loader: 'js', resolveDir: dirname(args.path),
          };
        }
        return { contents: scriptContent, loader: 'js', resolveDir: dirname(args.path) };
      });
    },
  };

  const ends = [
    {
      key: 'react', label: 'React', ext: '.jsx', plugin: [],
      host: `
import React from 'react';
import { createRoot } from 'react-dom/client';
import * as Kole from './entry.mjs';
const PROPS = __PROPS__;
const names = Object.keys(Kole).filter((k) => /^Kole/.test(k) && (typeof Kole[k] === 'function' || (Kole[k] && typeof Kole[k] === 'object')));
const results = [];
for (const n of names) {
  const host = document.createElement('div');
  host.className = 'kole-mount-cell'; host.id = 'cell-' + n;
  document.getElementById('grid').appendChild(host);
  const rec = { name: n, ok: false, err: null, domLen: 0, empty: false };
  try {
    createRoot(host).render(React.createElement(Kole[n], PROPS));
  } catch (e) { rec.err = String((e && e.message) || e).slice(0, 160); }
  results.push(rec);
}
window.__koleNames = names;
window.__koleSync = () => {
  for (const rec of results) {
    const el = document.getElementById('cell-' + rec.name);
    rec.domLen = el ? el.innerHTML.length : 0;
    rec.empty = rec.domLen === 0;
    rec.ok = rec.domLen > 0 && !rec.err;
  }
  window.__koleResults = results;
  window.__koleCount = results.length;
  document.title = 'DONE:' + results.filter((r) => r.ok).length + '/' + results.length;
};
`,
    },
    {
      key: 'vue3', label: 'Vue 3', ext: '.vue', plugin: [vue3Plugin],
      host: `
import { createApp, h } from 'vue';
import * as Kole from './entry.mjs';
const PROPS = __PROPS__;
const names = Object.keys(Kole).filter((k) => /^Kole/.test(k) && Kole[k] && typeof Kole[k] === 'object');
const results = [];
for (const n of names) {
  const host = document.createElement('div');
  host.className = 'kole-mount-cell'; host.id = 'cell-' + n;
  document.getElementById('grid').appendChild(host);
  const rec = { name: n, ok: false, err: null, domLen: 0, empty: false };
  try {
    createApp({ render: () => h(Kole[n], PROPS) }).mount(host);
  } catch (e) { rec.err = String((e && e.message) || e).slice(0, 160); }
  results.push(rec);
}
window.__koleNames = names;
window.__koleSync = () => {
  for (const rec of results) {
    const el = document.getElementById('cell-' + rec.name);
    rec.domLen = el ? el.innerHTML.length : 0;
    rec.empty = rec.domLen === 0;
    rec.ok = rec.domLen > 0 && !rec.err;
  }
  window.__koleResults = results;
  window.__koleCount = results.length;
  document.title = 'DONE:' + results.filter((r) => r.ok).length + '/' + results.length;
};
`,
      asyncReady: true,
    },
    {
      key: 'vue2', label: 'Vue 2', ext: '.vue', plugin: [vue2Plugin],
      /* 入口是 IIFE，导出挂在 globalThis.__Kole2 上（见下方 isVue2 说明） */
      host: `
import Vue from 'vue';
const PROPS = __PROPS__;
const Kole = globalThis.__Kole2 || {};
const names = Object.keys(Kole).filter((k) => /^Kole/.test(k) && Kole[k]);
const results = [];
for (const n of names) {
  /* 外层 wrap 用于**测量**：Vue2 的 $mount(el) 会替换挂载点本身，
     直接读挂载点会在挂载后被判成"空"（实测踩到：20 个组件被误报空渲染）。 */
  const wrap = document.createElement('div'); wrap.className = 'kole-mount-wrap'; wrap.id = 'cell-' + n;
  const host = document.createElement('div');
  wrap.appendChild(host);
  document.getElementById('grid').appendChild(wrap);
  const rec = { name: n, ok: false, err: null, domLen: 0, empty: false };
  try {
    const comp = Kole[n];
    new Vue({
      render: (h) => h(comp.default || comp, { props: PROPS }),
    }).$mount(host);
  } catch (e) { rec.err = String((e && e.message) || e).slice(0, 160); }
  results.push(rec);
}
window.__koleNames = names;
window.__koleSync = () => {
  for (const rec of results) {
    const el = document.getElementById('cell-' + rec.name);
    rec.domLen = el ? el.innerHTML.length : 0;
    rec.empty = rec.domLen === 0;
    rec.ok = rec.domLen > 0 && !rec.err;
  }
  window.__koleResults = results;
  window.__koleCount = results.length;
  document.title = 'DONE:' + results.filter((r) => r.ok).length + '/' + results.length;
};
`,
      asyncReady: true,
    },
  ];

  /* 通用 prop 袋：**按组件自身声明的契约**填必填项与数据类 prop。
   * 不填这些，Table/Tree 会**正确地**渲染成空、EmployeeCard/Transfer 会因 required 缺失而抛错 ——
   * 那是"调用方违约"，不是组件缺陷。判据不含糊：给足契约要求的 prop 后仍崩溃/仍空白，才算缺陷。
   * 不填 visible/open/show：modal / drawer / popup 关闭时不渲染内容是正确行为。 */
  const DATA_PROPS = {
    text: '测试', title: '标题', label: '标签', name: '名称', content: '内容', placeholder: '请输入', value: '',
    /* 数组项同时带 key/label/id/name —— 满足 Transfer(key,label) / Table(id,name,amount) / Tree 等多种契约 */
    items: [{ key: 'k1', label: '选项一', id: 1, name: '选项一' }, { key: 'k2', label: '选项二', id: 2, name: '选项二' }],
    options: [{ value: 'a', label: '选项一' }, { value: 'b', label: '选项二' }],
    data: [{ key: 'r1', label: '示例一', id: 1, name: '示例一', status: '进行中', amount: 1200 }, { key: 'r2', label: '示例二', id: 2, name: '示例二', status: '已完成', amount: 3400 }],
    columns: [{ key: 'name', title: '名称' }, { key: 'amount', title: '金额', align: 'right' }],
    rows: [{ id: 1, name: '示例一' }],
    tabs: [{ key: 't1', label: '标签一' }, { key: 't2', label: '标签二' }],
    steps: [{ title: '第一步' }, { title: '第二步' }],
    nodes: [{ key: 'n1', label: '节点一', children: [{ key: 'n1-1', label: '子节点' }] }],
    list: [{ key: 'l1', label: '列表项一' }],
    panels: [{ key: 'p1', title: '面板一', content: '内容一' }],
    /* EmployeeCard 的 required prop（源码声明 employee: { type: Object, required: true }） */
    employee: { name: '张三', empId: 'E001', dept: '技术部', position: '工程师', status: 'active' },
    /* 注意：**不**放 modelValue —— 它在本库里类型不统一（BankCardInput/CodeInput/IDCardInput 是
       String，Transfer 是 Array）。硬塞一个类型，会让"契约要求 String 却收到 Array"的调用方违约
       被误记成组件缺陷（实测踩过：三个组件报 replace/split/toUpperCase is not a function）。
       不放 → 各组件用自己声明的默认值，正好覆盖"仅用默认值能否实例化"这一最基本场景。 */
    active: 'k1',
  };

  /* 逐端：优先生成「逐文件导出」入口（避开 index.js 里的坏文件连坐，让好文件照样被验证），
     并记录哪些文件因编译失败被排除 —— 排除项本身就是缺陷，单独如实报告。 */
  for (const end of ends) {
    const outDir = join(OUT, end.key);
    fs.mkdirSync(outDir, { recursive: true });
    const srcDir = join(ROOT, 'dist', end.key);
    const files = fs.readdirSync(srcDir).filter((f) => f.endsWith(end.ext)).sort();

    const exported = [];
    const broken = [];
    for (const f of files) {
      const n = 'Kole' + f.replace(new RegExp(end.ext.replace('.', '\\.') + '$'), '');
      if (end.key === 'vue2') {
        /* Vue2：先单独判这份 SFC 能否编译；不能编译的**排除出挂载**并计入失败 */
        const src = fs.readFileSync(join(srcDir, f), 'utf8');
        const parsed = tc2.parseComponent(src);
        const c = parsed.template ? tc2.compile(parsed.template.content) : { errors: [] };
        if (c.errors && c.errors.length) { broken.push(f + ' :: ' + c.errors[0]); continue; }
      }
      exported.push(`export { default as ${n} } from ${JSON.stringify(join(srcDir, f).replace(/\\/g, '/'))};`);
    }
    /* Vue2 的 render 是 `with(this){...}`：esbuild 只要把入口当 ESM 解析就会报
       "With statements cannot be used in an ECMAScript module"（输出格式改成 iife 也没用 ——
       严格与否取决于**输入**如何被解析）。故 Vue2 入口写成 CJS 形态的 require()，
       让 esbuild 按 CommonJS 解析，再打成 IIFE 挂到 __Kole2。 */
    if (end.key === 'vue2') {
      /* 插件已把 SFC 输出为 CJS（module.exports = 组件选项），故这里直接取 require() 的结果，
         不能再写 `.default ||` —— 那样取到的是选项对象上的 default 属性（undefined），
         会被 `||` 兜回 require 结果看似正确，但若组件同时导出 default 就会串味。
         实测踩到：写成 `.default || require()` 时入口里 `module.exports` 被 esbuild 包成
         `{ default: opts }`，宿主读到的是包装对象，new Vue() 直接不产出任何 DOM。 */
      const cjs = exported
        .map((line) => {
          const m = line.match(/export \{ default as (\w+) \} from "([^"]+)";/);
          return `exports.${m[1]} = require(${JSON.stringify(m[2])});`;
        })
        .join('\n');
      fs.writeFileSync(join(outDir, 'entry.cjs'), cjs);
    } else {
      fs.writeFileSync(join(outDir, 'entry.js'), exported.join('\n'));
    }

    if (broken.length) {
      record(false, `${end.label} 可编译（${files.length - broken.length}/${files.length}）`, broken.slice(0, 4).join(' ; '));
    } else {
      record(true, `${end.label} 全部 ${files.length} 个文件可编译`, null);
    }
    if (!exported.length) continue;

    /* Vue 2 的 render 代码是 `with(this){...}` —— 在 ESM（严格模式）里非法，故 Vue2 走 IIFE 并挂到
       globalThis.__Kole2；React/Vue3 仍走 ESM。这不是放宽判据：Vue2 官方编译器输出的就是这段代码，
       用严格模式打包会得到"With statements cannot be used in an ECMAScript module"这种**工具误用**，
       与组件本身能否工作无关。 */
    /* Vue2 端把 'vue' 别名到 Vue2 那棵树 —— 否则 esbuild 会解析到 verify-import 里的 Vue 3，
       报 "No matching export ... for import default"，那是**依赖串台**而非组件问题。
       React / Vue3 端不加别名：各自的 nodePaths 已能正确解析（加别名反而把 react-dom 指向 CJS 入口）。 */
    const ALIAS = end.key === 'vue2' ? { vue: join(DEPS2, 'node_modules', 'vue', 'dist', 'vue.runtime.esm.js') } : undefined;

    const isVue2 = end.key === 'vue2';
    const b = await p_esbuildBuild(esbuild, {
      entryPoints: [join(outDir, isVue2 ? 'entry.cjs' : 'entry.js')],
      bundle: true,
      format: isVue2 ? 'iife' : 'esm',
      globalName: isVue2 ? '__Kole2' : undefined,
      outfile: join(outDir, isVue2 ? 'entry.iife.js' : 'entry.mjs'),
      plugins: end.plugin, external: ['react', 'react-dom', 'vue'], nodePaths: NODE_PATHS,
      loader: { '.css': 'empty' }, logLevel: 'silent',
    });
    if (!b.ok) {
      record(false, `${end.label} 挂载包编译`, b.err);
      continue;
    }
    fs.writeFileSync(join(outDir, 'host.js'), end.host.replace('__PROPS__', JSON.stringify(DATA_PROPS)));
    /* 宿主包：把运行时就地内联（iife 里没有 import 语义，把 react/vue 留作 external 会变成
       无法解析的裸引用 —— 实测会让"全部组件都不渲染"，那是打包配置问题而非组件问题）。 */
    const h = await p_esbuildBuild(esbuild, {
      entryPoints: [join(outDir, 'host.js')], bundle: true, format: 'iife', outfile: join(outDir, 'host.iife.js'),
      plugins: end.plugin, nodePaths: NODE_PATHS, alias: ALIAS,
      loader: { '.css': 'empty' }, logLevel: 'silent',
    });
    if (!h.ok) {
      record(false, `${end.label} 宿主包编译`, h.err);
      continue;
    }

    /* Vue2 宿主与入口合并成一个脚本按序注入（入口 IIFE 先定义 __Kole2，宿主再消费）；
       其余端只需注入宿主包（其依赖已在打包时内联，或走 externals 由页面提供）。 */
    const bundleJs = isVue2
      ? fs.readFileSync(join(outDir, 'entry.iife.js'), 'utf8') + '\n' + fs.readFileSync(join(outDir, 'host.iife.js'), 'utf8')
      : fs.readFileSync(join(outDir, 'host.iife.js'), 'utf8');
    const p = await browser.newPage({ viewport: { width: 1280, height: 900 } });
    const errors = [];
    p.on('console', (m) => { if (m.type() === 'error') errors.push(m.text().slice(0, 200)); });
    p.on('pageerror', (e) => errors.push('pageerror: ' + String(e.message).slice(0, 200)));
    await p.setContent(`<!DOCTYPE html><html><head><meta charset="utf-8"><style>${tokens}\n${compCss}</style></head><body><div id="grid"></div></body></html>`);
    await p.addScriptTag({ content: bundleJs });
    await p.waitForTimeout(end.asyncReady ? 1200 : 600);
    const probe = await p.evaluate(() => {
      if (typeof window.__koleSync === 'function') window.__koleSync();
      const rs = window.__koleResults || [];
      return {
        count: rs.length,
        ok: rs.filter((r) => r.ok).length,
        crashed: rs.filter((r) => r.err).map((r) => r.name + ' :: ' + r.err).slice(0, 12),
        empty: rs.filter((r) => !r.err && r.empty).map((r) => r.name).slice(0, 20),
      };
    });
    await p.close();

    /* 判据：崩溃 = 硬缺陷（给足 prop 仍抛错）；空渲染单列为**待查**，但阈值必须来自实测而非拍脑袋：
       初始 prop 袋下 React 有 7 个空（modal/imagepreview/loadingoverlay 关闭态不渲染是**正确行为**）。
       故阈值取「实测基线 + 余量」，且必须逐名列出，让复核者能自己判断哪几个是合理的。 */
    record(
      probe.crashed.length === 0,
      `${end.label} 全量挂载无崩溃（${probe.count} 个）`,
      [
        probe.crashed.length ? `${probe.crashed.length} 个抛错: ${probe.crashed.slice(0, 4).join(' | ')}` : null,
        errors.length ? `页面控制台 ${errors.length} 条: ${errors.slice(0, 2).join(' || ')}` : null,
      ].filter(Boolean).join(' ; ') || `${probe.ok}/${probe.count} 渲染出 DOM`
    );
    /* 空渲染：逐名报出，数量超过"关闭态组件"合理范围才判失败。
       modal / drawer / imagepreview / loadingoverlay 关闭时不渲染 = 正确行为，
       故允许一个与"关闭态组件数"相当的基线，其余为空即需人工确认。 */
    const EMPTY_BASELINE = 12;
    record(
      probe.empty.length <= EMPTY_BASELINE,
      `${end.label} 空渲染数量受控（≤${EMPTY_BASELINE}）`,
      probe.empty.length
        ? `${probe.empty.length} 个为空: ${probe.empty.slice(0, 14).join(', ')}`
        : '0 个空渲染'
    );
  }
}

/* esbuild 调用包装：把编译错误变成结构化结果，避免各处重复 try/catch */
async function p_esbuildBuild(esbuild, opts) {
  try {
    await esbuild.build(opts);
    return { ok: true };
  } catch (e) {
    return { ok: false, err: String(e.errors?.[0]?.text || e.message).slice(0, 220) };
  }
}

/* ---------- main ---------- */

await preflight();
mkdirSync(OUT_DIR, { recursive: true });
const browser = await chromium.launch();
console.log(`[verify-runtime] group=${GROUP} shard=${SHARD} base=${BASE}`);

try {
  if (GROUP === 'pc-demos') await groupPcDemos(browser);
  else if (GROUP === 'mobile-demos') await groupMobileDemos(browser);
  else if (GROUP === 'dist-mount') await groupDistMount(browser);
  else if (GROUP === 'contract-visual') await groupContractVisual(browser);
  else if (GROUP === 'interaction') await groupInteraction(browser);
  else if (GROUP === 'compile-ends') await groupCompileEnds(browser);
  else if (GROUP === 'mount-all') await groupMountAll(browser);
  else { console.error('[FATAL] 未知 group: ' + GROUP); process.exit(2); }
} finally {
  await browser.close();
}

const pass = results.filter((r) => r.ok).length;
const fail = results.filter((r) => !r.ok);
const slugTag = SHARD.replace('/', '-');
/* 文件名必须含 group + 平台 + 分片，否则并行子 agent 会互相覆盖证据：
   实测踩到 —— `interaction --platform=pc --shard=0/2` 与 `--platform=mobile --shard=0/2`
   会写出同一个 interaction-0-2.json。 */
const platTag = GROUP === 'interaction' ? '-' + arg('--platform', 'pc') : '';
const outFile = join(OUT_DIR, `${GROUP}${platTag}${slugTag === '0-1' ? '' : '-' + slugTag}.json`);
writeFileSync(
  outFile,
  JSON.stringify(
    { group: GROUP, platform: GROUP === 'interaction' ? arg('--platform', 'pc') : null, shard: SHARD, base: BASE, generated: new Date().toISOString(), pass, fail: fail.length, results },
    null,
    1
  )
);

console.log('');
if (fail.length) {
  console.error(`[FAIL] ${fail.length} 条失败（通过 ${pass} 条）→ ${outFile}`);
  fail.slice(0, 25).forEach((f) => console.error('  - ' + f.id + (f.detail ? ' — ' + f.detail : '')));
  process.exit(1);
}
console.log(`[OK] 全部通过（${pass} 条）→ ${outFile}`);