howone 0.2.0 → 0.2.1

package/templates/vite/.howone/skills/web-clone/scripts/dna-scaffold.mjs

@@ -1,214 +0,0 @@
-#!/usr/bin/env node
-// dna-scaffold.mjs — 生成 design-dna.json 骨架，best-effort 从 recon-site.mjs 的输出预填。
-// 用法:
-//   node scripts/dna-scaffold.mjs --out <design-dna.json> [--recon <label-recon.json>] [--name <站名>]
-// 产物:
-//   <out>  完整 DNA 骨架；有 --recon 时预填字体/色候选/框架特效信号，其余留 "" 待人工 Analyze。
-// 纪律: 只搬侦察里"真实抓到"的信号，绝不编造。拿不准角色(primary/accent)的色值统一丢进 _recon_signals 供人工指派。
-
-import fs from "node:fs";
-import path from "node:path";
-
-function parseArgs(argv) {
-  const out = { recon: "", out: "", name: "", help: false };
-  for (let i = 0; i < argv.length; i++) {
-    const a = argv[i];
-    if (a === "--help" || a === "-h") out.help = true;
-    else if (a === "--recon") out.recon = argv[++i] || "";
-    else if (a === "--out") out.out = argv[++i] || "";
-    else if (a === "--name") out.name = argv[++i] || "";
-  }
-  return out;
-}
-
-function usage() {
-  console.log(`dna-scaffold.mjs — 生成 design-dna.json 骨架并 best-effort 预填
-
-  node scripts/dna-scaffold.mjs --out <design-dna.json> [--recon <label-recon.json>] [--name <站名>]
-
-只用在「视觉复刻 / 内容爆改」模式。忠实复刻分支不需要 DNA（真源码即真相）。
-schema 与字段含义见 references/design-dna.md。`);
-}
-
-// 完整 DNA 骨架（与 references/design-dna.md 对齐）
-function skeleton(name) {
-  const ts = () => ({ size: "", weight: "", line_height: "", tracking: "" });
-  return {
-    meta: { name: name || "", description: "", source_references: "", created_at: "" },
-    design_system: {
-      color: {
-        palette_type: "",
-        primary: { hex: "", role: "" },
-        secondary: { hex: "", role: "" },
-        accent: { hex: "", role: "" },
-        neutral: { scale: "", usage: "" },
-        semantic: { success: "", warning: "", error: "", info: "" },
-        surface: { background: "", card: "", elevated: "" },
-        contrast_strategy: "",
-      },
-      typography: {
-        type_scale: {
-          display: ts(), heading_1: ts(), heading_2: ts(), heading_3: ts(),
-          body: ts(), body_small: ts(), caption: ts(), overline: ts(),
-        },
-        font_families: { heading: "", body: "", mono: "" },
-        font_style_notes: "",
-      },
-      spacing: { base_unit: "", scale: "", content_density: "", section_rhythm: "" },
-      layout: { grid_system: "", max_content_width: "", columns: "", gutter: "", breakpoints: "", alignment_tendency: "" },
-      shape: { border_radius: { small: "", medium: "", large: "", pill: "" }, border_usage: "", divider_style: "" },
-      elevation: { shadow_style: "", levels: { low: "", medium: "", high: "" }, depth_cues: "" },
-      iconography: { style: "", stroke_weight: "", size_scale: "", preferred_set: "" },
-      motion: { easing: "", duration_scale: { micro: "", normal: "", macro: "" }, entrance_pattern: "", exit_pattern: "", philosophy: "" },
-      components: { button_style: "", input_style: "", card_style: "", navigation_pattern: "", modal_style: "", list_style: "", component_notes: "" },
-    },
-    design_style: {
-      aesthetic: { mood: [], visual_metaphor: "", era_influence: "", genre: "", personality_traits: [], adjectives: [] },
-      visual_language: { complexity: "", ornamentation: "", whitespace_usage: "", visual_weight_distribution: "", focal_strategy: "", contrast_level: "", texture_usage: "" },
-      composition: { hierarchy_method: "", balance_type: "", flow_direction: "", grouping_strategy: "", negative_space_role: "" },
-      imagery: { photo_treatment: "", illustration_style: "", graphic_elements: "", pattern_usage: "", image_shape: "" },
-      interaction_feel: { feedback_style: "", hover_behavior: "", transition_personality: "", loading_style: "", microinteraction_density: "" },
-      brand_voice_in_ui: { tone: "", formality: "", cta_style: "", empty_state_approach: "", error_tone: "" },
-    },
-    visual_effects: {
-      overview: { effect_intensity: "", performance_tier: "", fallback_strategy: "", primary_technology: "" },
-      background_effects: { type: "", description: "", technology: "", params: { color_palette: "", speed: "", density: "", opacity: "", blend_mode: "" } },
-      particle_systems: { enabled: false, type: "", description: "", technology: "", params: { count: "", shape: "", size_range: "", movement_pattern: "", color_behavior: "", interaction: "", spawn_area: "" } },
-      "3d_elements": { enabled: false, type: "", description: "", technology: "", params: { renderer: "", lighting: "", camera: "", materials: "", geometry: "", post_processing: [], interaction_model: "" } },
-      shader_effects: { enabled: false, type: "", description: "", technology: "", params: { uniforms: "", vertex_manipulation: "", fragment_output: "", noise_type: "", distortion: "" } },
-      scroll_effects: { parallax: { enabled: false, layers: "", depth_range: "", speed_curve: "" }, scroll_triggered_animations: { enabled: false, trigger_points: "", animation_type: "", scrub_behavior: "" }, scroll_morphing: { enabled: false, description: "" } },
-      text_effects: { type: "", description: "", technology: "", params: { split_strategy: "", animation_per_unit: "", stagger: "", effect_style: "" } },
-      cursor_effects: { enabled: false, type: "", description: "", params: { shape: "", size: "", blend_mode: "", trail: "", interaction_zone: "" } },
-      image_effects: { type: "", description: "", technology: "", params: { filter_pipeline: "", hover_transform: "", reveal_animation: "", distortion_type: "" } },
-      glassmorphism_neumorphism: { enabled: false, style: "", params: { blur_radius: "", transparency: "", border_treatment: "", shadow_type: "", light_source_angle: "" } },
-      canvas_drawings: { enabled: false, type: "", description: "", technology: "", params: { draw_method: "", animation_loop: "", color_scheme: "", responsiveness: "", interaction: "" } },
-      svg_animations: { enabled: false, type: "", description: "", params: { animation_method: "", path_morphing: "", stroke_animation: "", filter_effects: "" } },
-      composite_notes: "",
-    },
-  };
-}
-
-const COLOR_RE = /(#[0-9a-fA-F]{3,8}\b|\brgba?\([^)]*\)|\bhsla?\([^)]*\))/;
-
-// recon-site.mjs 把信号按视口嵌在 captures[].signals 下；取最宽视口的 signals 摊平，
-// 兼容已是扁平结构的 recon 输入。摊平失败则原样返回(enrich 对缺字段已容错)。
-function flattenRecon(recon) {
-  if (recon && Array.isArray(recon.captures) && recon.captures.length) {
-    const widest = recon.captures
-      .filter((c) => c && c.signals)
-      .sort((a, b) => (b?.viewport?.width || 0) - (a?.viewport?.width || 0))[0];
-    if (widest && widest.signals) {
-      // 顶层 url 兜底进 href，便于 meta.source_references 预填
-      return { href: recon.url, ...widest.signals };
-    }
-  }
-  return recon;
-}
-
-function uniq(arr) {
-  return Array.from(new Set(arr.filter(Boolean)));
-}
-
-// 从 recon JSON best-effort 抽信号，并预填 skeleton 的明确字段
-function enrich(dna, recon) {
-  const signals = { fonts: [], color_candidates: [], frameworks: {}, canvas_count: 0, css_color_vars: [] };
-
-  // 字体: fonts[] + sections[].style.fontFamily
-  const fontList = uniq([
-    ...(Array.isArray(recon.fonts) ? recon.fonts : []),
-    ...((recon.sections || []).map((s) => s?.style?.fontFamily).filter(Boolean)),
-  ]).map((f) => String(f).replace(/^["']|["']$/g, "").split(",")[0].trim()).filter(Boolean);
-  signals.fonts = uniq(fontList);
-  if (signals.fonts.length) {
-    const mono = signals.fonts.find((f) => /mono|code|consol|courier/i.test(f)) || "";
-    const nonMono = signals.fonts.filter((f) => f !== mono);
-    dna.design_system.typography.font_families.heading = nonMono[0] || "";
-    dna.design_system.typography.font_families.body = nonMono[1] || nonMono[0] || "";
-    dna.design_system.typography.font_families.mono = mono;
-  }
-
-  // 颜色: CSS 变量里像颜色的 + sections 的 bg/color
-  const cssVars = Array.isArray(recon.cssVariables) ? recon.cssVariables : [];
-  for (const pair of cssVars) {
-    const [name, val] = Array.isArray(pair) ? pair : [pair?.name, pair?.value];
-    if (val && COLOR_RE.test(String(val))) signals.css_color_vars.push(`${name}: ${String(val).trim()}`);
-  }
-  const sectionColors = [];
-  for (const s of recon.sections || []) {
-    const bg = s?.style?.backgroundColor;
-    const fg = s?.style?.color;
-    if (bg && !/rgba?\(0, 0, 0, 0\)|transparent/i.test(bg)) sectionColors.push(bg);
-    if (fg) sectionColors.push(fg);
-  }
-  signals.color_candidates = uniq([
-    ...signals.css_color_vars.map((v) => v.split(":").slice(1).join(":").trim()),
-    ...sectionColors,
-  ]).slice(0, 24);
-  // body/header 背景作为 surface.background 候选(第一个非透明的 section bg)
-  const firstBg = (recon.sections || []).map((s) => s?.style?.backgroundColor)
-    .find((c) => c && !/rgba?\(0, 0, 0, 0\)|transparent/i.test(c));
-  if (firstBg) dna.design_system.color.surface.background = firstBg;
-
-  // 框架/特效信号
-  const fw = recon.frameworks || {};
-  signals.frameworks = fw;
-  signals.canvas_count = (recon.canvases && recon.canvases.length) || recon?.counts?.canvas || 0;
-
-  if (fw.three) {
-    dna.visual_effects.overview.primary_technology = "WebGL/Three.js";
-    dna.visual_effects.overview.performance_tier = "heavy";
-    dna.visual_effects["3d_elements"].enabled = true;
-    dna.visual_effects["3d_elements"].technology = "Three.js";
-  } else if (signals.canvas_count > 0) {
-    dna.visual_effects.overview.primary_technology = "Canvas 2D";
-    dna.visual_effects.canvas_drawings.enabled = true;
-  } else if (fw.gsap) {
-    dna.visual_effects.overview.primary_technology = "GSAP";
-  }
-  if (fw.gsap || fw.lenis) {
-    dna.visual_effects.scroll_effects.scroll_triggered_animations.enabled = true;
-    dna.visual_effects.scroll_effects.scroll_triggered_animations.scrub_behavior =
-      fw.lenis ? "lenis smooth-scroll detected" : "gsap detected";
-  }
-
-  // meta 预填
-  if (recon.href) dna.meta.source_references = recon.href;
-  if (!dna.meta.name && recon.title) dna.meta.name = recon.title;
-
-  // 把原始信号留在顶层供人工指派角色(不编造 primary/accent)
-  dna._recon_signals = signals;
-  dna._scaffold_note =
-    "best-effort 预填来自 recon。font_families/surface.background/visual_effects 已据真实信号填写；" +
-    "color 的 primary/secondary/accent 角色需人工从 _recon_signals.color_candidates 指派；" +
-    "所有 \"\" 字段需人工 Analyze 补全(见 references/design-dna.md)。确认无误后可删除 _recon_signals 与本说明。";
-  return dna;
-}
-
-try {
-  const args = parseArgs(process.argv.slice(2));
-  if (args.help || !args.out) {
-    usage();
-    process.exit(args.help ? 0 : 1);
-  }
-  let dna = skeleton(args.name);
-  if (args.recon) {
-    try {
-      const recon = JSON.parse(fs.readFileSync(path.resolve(args.recon), "utf8"));
-      dna = enrich(dna, flattenRecon(recon));
-    } catch (e) {
-      console.warn(`⚠️ 读 recon 失败(${e.message})，只输出空骨架。`);
-    }
-  }
-  const outPath = path.resolve(args.out);
-  fs.mkdirSync(path.dirname(outPath), { recursive: true });
-  fs.writeFileSync(outPath, `${JSON.stringify(dna, null, 2)}\n`);
-  console.log(`✅ design-dna 骨架已写入: ${outPath}`);
-  if (dna._recon_signals) {
-    const s = dna._recon_signals;
-    console.log(`   预填: 字体 ${s.fonts.length} 个 / 色候选 ${s.color_candidates.length} 个 / canvas ${s.canvas_count} / three=${!!s.frameworks.three} gsap=${!!s.frameworks.gsap} lenis=${!!s.frameworks.lenis}`);
-  }
-  console.log(`   下一步: 人工 Analyze 补全 ""，并从 _recon_signals 指派颜色角色。schema → references/design-dna.md`);
-} catch (e) {
-  console.error(`dna-scaffold 失败: ${e.message}`);
-  process.exit(1);
-}

package/templates/vite/.howone/skills/web-clone/scripts/init-clone.mjs

@@ -1,136 +0,0 @@
-#!/usr/bin/env node
-import fs from "node:fs";
-import os from "node:os";
-import path from "node:path";
-
-function usage() {
-  console.log(`Usage:
-  node scripts/init-clone.mjs <slug> [--url <url>] [--mode <mode>] [--level <L1-L6>]
-
-Creates:
-  ~/projects/website-clones/<slug>-clone/
-  ~/projects/website-clones/<slug>-clone/NOTES.md
-  ~/projects/website-clones/<slug>-clone/RECON/screenshots/
-`);
-}
-
-function parseArgs(argv) {
-  const out = { slug: null, url: "", mode: "", level: "" };
-  for (let i = 0; i < argv.length; i += 1) {
-    const arg = argv[i];
-    if (arg === "--help" || arg === "-h") out.help = true;
-    else if (arg === "--url") out.url = argv[++i] || "";
-    else if (arg === "--mode") out.mode = argv[++i] || "";
-    else if (arg === "--level") out.level = argv[++i] || "";
-    else if (!out.slug) out.slug = arg;
-    else throw new Error(`Unexpected argument: ${arg}`);
-  }
-  return out;
-}
-
-function cleanSlug(input) {
-  return input
-    .trim()
-    .toLowerCase()
-    .replace(/https?:\/\//g, "")
-    .replace(/[^a-z0-9]+/g, "-")
-    .replace(/^-+|-+$/g, "");
-}
-
-function notesTemplate({ name, url, mode, level }) {
-  return `# ${name} · 克隆笔记
-
-## 源信息
-- 原站 URL: ${url}
-- 源码仓库: 
-- 原作者: 
-- 许可证: 
-- 致谢要求: 
-
-## 技术栈
-- 框架 / 关键库 / Node 版本: 
-
-## 复刻前预判
-- 复杂度等级: ${level}
-- 推荐模式: ${mode}
-- 可高保真的部分: 
-- 需要近似或替代的部分: 
-- 不克隆的部分: 
-- 主要风险: 
-
-## 跑起来
-\`\`\`bash
-cd ~/projects/website-clones/${name}
-python3 -m http.server 8123
-\`\`\`
-
-## 改了什么（对照原版）
-- 
-
-## 原站 vs 克隆站
-| 模块 | 原站表现 | 克隆实现 | 差异 / 取舍 | 证据 |
-|---|---|---|---|---|
-| 首屏 |  |  |  |  |
-| 导航 |  |  |  |  |
-| 核心动效 |  |  |  |  |
-| 内容区块 |  |  |  |  |
-| 移动端 |  |  |  |  |
-
-## 复刻评分
-- 源证据: /5
-- 结构保真: /5
-- 视觉保真: /5
-- 动效/交互: /5
-- 响应式: /5
-- 功能完整: /5
-- 内容替换: /5
-- 法务/部署风险: /5
-- 总评: 
-
-## 替换地图（要换什么改哪）
-- 文字 -> 文件 行
-- 图片/媒体 -> 目录
-- 配色 -> CSS 变量 / theme
-- 3D 模型 / 字体 -> 
-
-## 验证
-- [ ] 本地跑通、console 0 error
-- [ ] 截图对照原站（RECON/screenshots/）
-- 验证不了的点（如实记，别伪造）: 
-`;
-}
-
-try {
-  const args = parseArgs(process.argv.slice(2));
-  if (args.help || !args.slug) {
-    usage();
-    process.exit(args.help ? 0 : 1);
-  }
-
-  const slug = cleanSlug(args.slug);
-  if (!slug) throw new Error("Slug is empty after normalization.");
-  const name = slug.endsWith("-clone") ? slug : `${slug}-clone`;
-  const root = path.join(os.homedir(), "projects", "website-clones");
-  const project = path.join(root, name);
-
-  if (fs.existsSync(project)) {
-    throw new Error(`Project already exists: ${project}`);
-  }
-
-  fs.mkdirSync(path.join(project, "RECON", "screenshots"), { recursive: true });
-  fs.writeFileSync(
-    path.join(project, "NOTES.md"),
-    notesTemplate({
-      name,
-      url: args.url,
-      mode: args.mode,
-      level: args.level,
-    })
-  );
-  fs.writeFileSync(path.join(project, ".gitignore"), "node_modules/\n.DS_Store\n");
-
-  console.log(project);
-} catch (error) {
-  console.error(`init-clone failed: ${error.message}`);
-  process.exit(1);
-}

package/templates/vite/.howone/skills/web-clone/scripts/interaction-probe.mjs

@@ -1,314 +0,0 @@
-#!/usr/bin/env node
-import fs from "node:fs";
-import path from "node:path";
-import crypto from "node:crypto";
-import { loadPlaywright, launchChromium } from "./lib/playwright-loader.mjs";
-
-function usage() {
-  console.log(`Usage:
-  node scripts/interaction-probe.mjs --url <url> --out RECON/interactions [--label original] [--max-clicks 12] [--max-hovers 8] [--wait 800] [--width 1440]
-
-Exercises scroll, hover, safe clicks, and canvas drag gestures, then saves screenshots plus state/network evidence.
-`);
-}
-
-function parseArgs(argv) {
-  const out = {
-    url: "",
-    outDir: "RECON/interactions",
-    label: "site",
-    maxClicks: 12,
-    maxHovers: 8,
-    waitMs: 800,
-    width: 1440,
-  };
-  for (let i = 0; i < argv.length; i += 1) {
-    const arg = argv[i];
-    if (arg === "--help" || arg === "-h") out.help = true;
-    else if (arg === "--url") out.url = argv[++i] || "";
-    else if (arg === "--out") out.outDir = argv[++i] || "RECON/interactions";
-    else if (arg === "--label") out.label = argv[++i] || "site";
-    else if (arg === "--max-clicks") out.maxClicks = Number(argv[++i] || "12");
-    else if (arg === "--max-hovers") out.maxHovers = Number(argv[++i] || "8");
-    else if (arg === "--wait") out.waitMs = Number(argv[++i] || "800");
-    else if (arg === "--width") out.width = Number(argv[++i] || "1440");
-    else throw new Error(`Unexpected argument: ${arg}`);
-  }
-  return out;
-}
-
-function shortHash(value) {
-  return crypto.createHash("sha1").update(value).digest("hex").slice(0, 10);
-}
-
-function safeFileName(label) {
-  return label.replace(/[^a-z0-9._-]+/gi, "-").replace(/^-+|-+$/g, "").slice(0, 90) || "step";
-}
-
-function markdown(result) {
-  const lines = [
-    `# ${result.label} interaction probe`,
-    "",
-    `- URL: ${result.url}`,
-    `- Actions: ${result.actions.length}`,
-    `- Console errors: ${result.consoleErrors.length}`,
-    `- Network events: ${result.network.length}`,
-    "",
-    "## Actions",
-    "| # | Type | Target | Changed | URL after | Screenshot |",
-    "|---:|---|---|---:|---|---|",
-  ];
-  result.actions.forEach((action, index) => {
-    lines.push(`| ${index + 1} | ${action.type} | ${String(action.target || "").replaceAll("|", "\\|")} | ${action.changed ? "yes" : "no"} | ${action.after.url.replaceAll("|", "\\|")} | ${action.screenshot || ""} |`);
-  });
-  if (result.findings.length) {
-    lines.push("");
-    lines.push("## Findings");
-    for (const finding of result.findings) lines.push(`- ${finding}`);
-  }
-  return `${lines.join("\n")}\n`;
-}
-
-async function snapshot(page) {
-  return page.evaluate(() => {
-    const text = (node) => (node?.textContent || "").trim().replace(/\s+/g, " ");
-    const visible = (selector) => Array.from(document.querySelectorAll(selector)).filter((node) => {
-      const rect = node.getBoundingClientRect();
-      const style = getComputedStyle(node);
-      return rect.width > 0 && rect.height > 0 && style.visibility !== "hidden" && style.display !== "none";
-    }).length;
-    const bodyText = document.body?.innerText || "";
-    const html = document.documentElement.outerHTML;
-    return {
-      url: location.href,
-      title: document.title || "",
-      activeElement: document.activeElement?.tagName?.toLowerCase() || "",
-      scrollY: Math.round(window.scrollY),
-      bodyTextChars: bodyText.length,
-      bodyTextStart: bodyText.trim().replace(/\s+/g, " ").slice(0, 500),
-      counts: {
-        dialogs: visible("dialog,[role='dialog'],[aria-modal='true']"),
-        popovers: visible("[popover],.popover,.modal,.drawer,.menu,[role='menu']"),
-        canvases: document.querySelectorAll("canvas").length,
-        videos: document.querySelectorAll("video").length,
-        buttons: document.querySelectorAll("button,[role='button']").length,
-        forms: document.forms.length,
-      },
-      htmlHash: "__HASH_PLACEHOLDER__",
-      htmlLength: html.length,
-    };
-  });
-}
-
-async function hashSnapshot(page, state) {
-  const htmlHash = await page.evaluate(() => {
-    const html = document.documentElement.outerHTML;
-    let hash = 0;
-    for (let i = 0; i < html.length; i += 1) {
-      hash = ((hash << 5) - hash + html.charCodeAt(i)) | 0;
-    }
-    return String(hash);
-  });
-  return { ...state, htmlHash };
-}
-
-async function candidates(page) {
-  return page.evaluate(() => {
-    function selectorFor(node) {
-      if (node.id && !/\s/.test(node.id)) return `#${CSS.escape(node.id)}`;
-      const parts = [];
-      let current = node;
-      while (current && current.nodeType === Node.ELEMENT_NODE && parts.length < 6) {
-        const tag = current.tagName.toLowerCase();
-        const parent = current.parentElement;
-        if (!parent) {
-          parts.unshift(tag);
-          break;
-        }
-        const sameTag = Array.from(parent.children).filter((child) => child.tagName === current.tagName);
-        const index = sameTag.indexOf(current) + 1;
-        parts.unshift(`${tag}:nth-of-type(${index})`);
-        current = parent;
-      }
-      return parts.join(" > ");
-    }
-    const text = (node) => (node.innerText || node.textContent || node.getAttribute("aria-label") || "").trim().replace(/\s+/g, " ");
-    const visible = (node) => {
-      const rect = node.getBoundingClientRect();
-      const style = getComputedStyle(node);
-      return rect.width >= 8 && rect.height >= 8 && style.visibility !== "hidden" && style.display !== "none";
-    };
-    const interactive = Array.from(document.querySelectorAll("button,a[href],summary,input,textarea,select,[role='button'],[tabindex]"))
-      .filter(visible)
-      .slice(0, 80)
-      .map((node) => {
-        const rect = node.getBoundingClientRect();
-        const tag = node.tagName.toLowerCase();
-        const href = node.href || node.getAttribute("href") || "";
-        const safeClick = tag === "button" || tag === "summary" || node.getAttribute("role") === "button" || href.startsWith("#") || href.startsWith(location.origin);
-        return {
-          selector: selectorFor(node),
-          tag,
-          type: node.getAttribute("type") || "",
-          role: node.getAttribute("role") || "",
-          href,
-          text: text(node).slice(0, 120),
-          ariaLabel: node.getAttribute("aria-label") || "",
-          safeClick,
-          rect: {
-            x: Math.round(rect.x),
-            y: Math.round(rect.y),
-            width: Math.round(rect.width),
-            height: Math.round(rect.height),
-          },
-        };
-      });
-    const canvases = Array.from(document.querySelectorAll("canvas")).filter(visible).slice(0, 4).map((node) => {
-      const rect = node.getBoundingClientRect();
-      return {
-        selector: selectorFor(node),
-        rect: {
-          x: Math.round(rect.x),
-          y: Math.round(rect.y),
-          width: Math.round(rect.width),
-          height: Math.round(rect.height),
-        },
-      };
-    });
-    return { interactive, canvases };
-  });
-}
-
-function hasChanged(before, after) {
-  if (before.url !== after.url) return true;
-  if (before.htmlHash !== after.htmlHash) return true;
-  if (before.scrollY !== after.scrollY) return true;
-  return JSON.stringify(before.counts) !== JSON.stringify(after.counts);
-}
-
-async function freshPage(browser, args, network, consoleErrors) {
-  const page = await browser.newPage({ viewport: { width: args.width, height: 900 }, deviceScaleFactor: 1 });
-  page.on("console", (message) => {
-    if (message.type() === "error") consoleErrors.push(message.text());
-  });
-  page.on("response", (response) => {
-    const request = response.request();
-    if (["xhr", "fetch"].includes(request.resourceType())) {
-      network.push({ url: response.url(), status: response.status(), method: request.method(), resourceType: request.resourceType() });
-    }
-  });
-  await page.goto(args.url, { waitUntil: "domcontentloaded", timeout: 45000 });
-  await page.waitForLoadState("networkidle", { timeout: 6000 }).catch(() => {});
-  if (args.waitMs > 0) await page.waitForTimeout(args.waitMs);
-  return page;
-}
-
-async function captureAction(page, outDir, index, action, before) {
-  if (action.type === "scroll") {
-    await page.evaluate((ratio) => window.scrollTo({ top: Math.round((document.documentElement.scrollHeight - window.innerHeight) * ratio), behavior: "instant" }), action.ratio);
-  } else if (action.type === "hover") {
-    await page.locator(action.selector).first().hover({ timeout: 3000 });
-  } else if (action.type === "click") {
-    await page.locator(action.selector).first().click({ timeout: 4000 });
-  } else if (action.type === "canvas-drag") {
-    const rect = action.rect;
-    const x = rect.x + rect.width / 2;
-    const y = rect.y + rect.height / 2;
-    await page.mouse.move(x, y);
-    await page.mouse.down();
-    await page.mouse.move(x + Math.min(180, rect.width * 0.25), y + Math.min(120, rect.height * 0.2), { steps: 8 });
-    await page.mouse.up();
-  }
-  await page.waitForTimeout(450);
-  const after = await hashSnapshot(page, await snapshot(page));
-  const screenshotName = `${String(index + 1).padStart(2, "0")}-${safeFileName(`${action.type}-${action.target || action.selector || "page"}`)}-${shortHash(JSON.stringify(action))}.png`;
-  const screenshotPath = path.join(outDir, "screenshots", screenshotName);
-  await page.screenshot({ path: screenshotPath, fullPage: true });
-  return {
-    ...action,
-    before,
-    after,
-    changed: hasChanged(before, after),
-    screenshot: path.relative(outDir, screenshotPath),
-  };
-}
-
-try {
-  const args = parseArgs(process.argv.slice(2));
-  if (args.help || !args.url) {
-    usage();
-    process.exit(args.help ? 0 : 1);
-  }
-
-  const outDir = path.resolve(args.outDir);
-  fs.mkdirSync(path.join(outDir, "screenshots"), { recursive: true });
-
-  const { chromium } = loadPlaywright();
-  const browser = await launchChromium(chromium);
-  const network = [];
-  const consoleErrors = [];
-
-  const seedPage = await freshPage(browser, args, network, consoleErrors);
-  const initial = await hashSnapshot(seedPage, await snapshot(seedPage));
-  const discovered = await candidates(seedPage);
-  await seedPage.screenshot({ path: path.join(outDir, "screenshots", "00-initial.png"), fullPage: true });
-  await seedPage.close();
-
-  const actions = [
-    { type: "scroll", target: "middle", ratio: 0.5 },
-    { type: "scroll", target: "bottom", ratio: 1 },
-    ...discovered.interactive.slice(0, args.maxHovers).map((item) => ({ type: "hover", target: item.text || item.ariaLabel || item.selector, selector: item.selector, meta: item })),
-    ...discovered.interactive.filter((item) => item.safeClick).slice(0, args.maxClicks).map((item) => ({ type: "click", target: item.text || item.ariaLabel || item.selector, selector: item.selector, meta: item })),
-    ...discovered.canvases.map((item) => ({ type: "canvas-drag", target: item.selector, selector: item.selector, rect: item.rect })),
-  ];
-
-  const results = [];
-  for (let index = 0; index < actions.length; index += 1) {
-    const page = await freshPage(browser, args, network, consoleErrors);
-    const before = await hashSnapshot(page, await snapshot(page));
-    try {
-      results.push(await captureAction(page, outDir, index, actions[index], before));
-    } catch (error) {
-      results.push({
-        ...actions[index],
-        before,
-        after: before,
-        changed: false,
-        screenshot: "",
-        error: error.message,
-      });
-    } finally {
-      await page.close();
-    }
-  }
-
-  await browser.close();
-
-  const changedCount = results.filter((action) => action.changed).length;
-  const findings = [
-    `${discovered.interactive.length} visible interactive candidates discovered`,
-    `${discovered.canvases.length} visible canvas targets discovered`,
-    `${changedCount}/${results.length} actions changed DOM, URL, scroll, or visible overlay counts`,
-  ];
-  if (discovered.canvases.length) findings.push("Canvas drag evidence exists; inspect screenshots before simplifying WebGL/Canvas behavior.");
-
-  const result = {
-    label: args.label,
-    url: args.url,
-    capturedAt: new Date().toISOString(),
-    initial,
-    discovered,
-    actions: results,
-    network,
-    consoleErrors,
-    findings,
-  };
-  const jsonFile = path.join(outDir, `${args.label}-interactions.json`);
-  const mdFile = path.join(outDir, `${args.label}-interactions.md`);
-  fs.writeFileSync(jsonFile, `${JSON.stringify(result, null, 2)}\n`);
-  fs.writeFileSync(mdFile, markdown(result));
-  console.log(jsonFile);
-} catch (error) {
-  console.error(`interaction-probe failed: ${error.message}`);
-  process.exit(1);
-}