import fs from "node:fs";
const meta = JSON.parse(fs.readFileSync("clip.rgba.json", "utf8"));
const px = fs.readFileSync("clip.rgba");
const { w, ch } = meta, h = meta.h;
const at = (x, y) => { const o = (y * w + x) * ch; return [px[o], px[o+1], px[o+2]]; };
const D = (a,b) => Math.abs(a[0]-b[0])+Math.abs(a[1]-b[1])+Math.abs(a[2]-b[2]);

// 非白二值图（看整体结构）
const CW = 130, CHh = 56;
let map = "";
for (let gy = 0; gy < CHh; gy++) {
  let line = "";
  for (let gx = 0; gx < CW; gx++) {
    const x0 = Math.floor(gx*w/CW), x1 = Math.max(x0+1, Math.floor((gx+1)*w/CW));
    const y0 = Math.floor(gy*h/CHh), y1 = Math.max(y0+1, Math.floor((gy+1)*h/CHh));
    let n = 0, tot = 0;
    for (let y = y0; y < y1; y += 2) for (let x = x0; x < x1; x += 2) { tot++; if (D(at(x,y), [255,255,255]) > 24) n++; }
    const r = n / Math.max(1, tot);
    line += r > 0.5 ? "#" : r > 0.18 ? "+" : r > 0.04 ? "." : " ";
  }
  map += String(gy).padStart(2) + "|" + line + "\n";
}
console.log("=== 非白结构图（# 密集 / + 中等 / . 稀疏）===");
console.log(map);

// 连通域：找边框色（#e3eaf6 面板边框 / #e6ebf4 控件边框 / #ecedf3 分隔线）的矩形
const TARGETS = { panelBorder: [227,234,246], ctrlBorder: [230,235,244], divider: [236,237,243] };
for (const [name, t] of Object.entries(TARGETS)) {
  const seen = new Uint8Array(w*h); const boxes = [];
  const match = (x,y) => D(at(x,y), t) <= 12;
  for (let y = 0; y < h; y += 1) for (let x = 0; x < w; x += 1) {
    if (seen[y*w+x] || !match(x,y)) continue;
    let minX=x,maxX=x,minY=y,maxY=y,n=0; const st=[x,y]; seen[y*w+x]=1;
    while (st.length) { const cy=st.pop(), cx=st.pop(); n++;
      if(cx<minX)minX=cx; if(cx>maxX)maxX=cx; if(cy<minY)minY=cy; if(cy>maxY)maxY=cy;
      for (const [dx,dy] of [[1,0],[-1,0],[0,1],[0,-1]]) {
        const nx=cx+dx, ny=cy+dy;
        if (nx<0||ny<0||nx>=w||ny>=h) continue;
        if (!seen[ny*w+nx] && match(nx,ny)) { seen[ny*w+nx]=1; st.push(nx,ny); }
      }
    }
    if (n > 60) boxes.push({x:minX,y:minY,w:maxX-minX+1,h:maxY-minY+1,n});
  }
  boxes.sort((a,b)=>a.y-b.y || a.x-b.x);
  console.log(`\n=== ${name} #${t.join(",")} 连通域 ${boxes.length} 个 ===`);
  for (const b of boxes.slice(0, 26))
    console.log(`  x${b.x} y${b.y} ${b.w}x${b.h} px${b.n}   (CSS≈ x${Math.round(b.x/2)} y${Math.round(b.y/2)} ${Math.round(b.w/2)}x${Math.round(b.h/2)})`);
}