launchframe 0.2.0 → 0.2.1

package/packages/extract/cloner-research-emit.ts

@@ -1,270 +0,0 @@
-/**
- * Emits research artifacts under each extract run, aligned in layout and intent
- * with the AI Website Cloner template (topology, behaviors bible, per-section
- * specs). Values are derived from Landingfram's automated crawl where available;
- * interactive sweeps still require manual Browser MCP work for full fidelity.
- */
-
-import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
-import { dirname, join } from "node:path";
-
-import type { ExtractionRun, SectionLayout, SiteLayout } from "./types.js";
-import { hostSlug } from "./host-slug.js";
-
-export function emitClonerResearch(
-  run: ExtractionRun,
-  layoutsByHost: Map<string, SiteLayout>,
-): string[] {
-  const written: string[] = [];
-  const root = join(run.outputDir, "docs", "research");
-  mkdirSync(root, { recursive: true });
-
-  written.push(
-    writeFile(
-      join(root, "README.md"),
-      emitResearchReadme(run, layoutsByHost.size > 0),
-    ),
-  );
-
-  for (const cap of run.captures) {
-    if (cap.status !== "ok") continue;
-    const layout = layoutsByHost.get(cap.host);
-    const hostDir = join(root, hostSlug(cap.host));
-    mkdirSync(join(hostDir, "components"), { recursive: true });
-
-    written.push(
-      writeFile(join(hostDir, "PAGE_TOPOLOGY.md"), emitTopology(cap.url, cap.host, layout)),
-    );
-    written.push(
-      writeFile(
-        join(hostDir, "BEHAVIORS.md"),
-        emitBehaviors(cap.url, cap.host, run, layout),
-      ),
-    );
-
-    if (layout) {
-      for (const section of layout.sections) {
-        const name = `${section.id}-${section.role}`.replace(/[^a-z0-9-]+/gi, "-");
-        written.push(
-          writeFile(
-            join(hostDir, "components", `${name}.spec.md`),
-            emitSectionSpec(cap.host, layout, section),
-          ),
-        );
-      }
-    }
-  }
-
-  return written;
-}
-
-function writeFile(path: string, body: string): string {
-  mkdirSync(dirname(path), { recursive: true });
-  writeFileSync(path, body, "utf8");
-  return path;
-}
-
-function automatedJsonAppend(outputDir: string, host: string): string {
-  const slug = hostSlug(host);
-  const base = join(outputDir, "docs", "design-references", slug);
-  const probe = join(base, "header-scroll-probe.json");
-  const hints = join(base, "interaction-hints.json");
-  const chunks: string[] = [];
-  if (existsSync(probe)) {
-    chunks.push("\n### Embedded: header-scroll-probe.json\n\n```json\n");
-    chunks.push(readFileSync(probe, "utf8").trimEnd());
-    chunks.push("\n```\n");
-  }
-  if (existsSync(hints)) {
-    chunks.push("\n### Embedded: interaction-hints.json\n\n```json\n");
-    chunks.push(readFileSync(hints, "utf8").trimEnd());
-    chunks.push("\n```\n");
-  }
-  const manifest = join(outputDir, "downloaded_assets", slug, "manifest.json");
-  if (existsSync(manifest)) {
-    chunks.push(
-      `\n### Asset downloads\n\nLocal manifest: \`downloaded_assets/${slug}/manifest.json\`\n`,
-    );
-  }
-  return chunks.join("");
-}
-
-function emitResearchReadme(run: ExtractionRun, hasLayouts: boolean): string {
-  const idea =
-    run.saasIdea?.trim() ||
-    "_No SaaS idea passed. Re-run with:_ `npx launchframe <url> \"your idea\"` _or_ `--idea \"...\"`.";
-
-  const layoutNote = hasLayouts
-    ? ""
-    : "\n**Note:** No `SiteLayout` was available for any host (DOM crawl may have failed). Topology files are stubbed; rely on `reference/<host>/` + tokens.\n";
-
-  return `# Research artifacts
-
-This folder mirrors the **artifact roles** of [ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template) (\`PAGE_TOPOLOGY.md\`, \`BEHAVIORS.md\`, \`components/*.spec.md\`) so coding agents can follow the same **recon → specs → build** cadence.
-
-**Run:** \`${run.runId}\`  
-**Output:** \`${run.outputDir.replace(/\\/g, "/")}\`
-
-## Operator SaaS idea
-
-${idea}
-
-## Per-host paths
-
-For each captured host: \`<host>/PAGE_TOPOLOGY.md\`, \`<host>/BEHAVIORS.md\`, \`<host>/components/*.spec.md\`
-
-Screenshots for visual QA live in \`../design-references/<host-slug>/\` (multi-viewport + scroll sweep). Downloaded binaries (when enabled): \`../downloaded_assets/<host-slug>/manifest.json\`.
-${layoutNote}`;
-}
-
-function emitTopology(url: string, host: string, layout: SiteLayout | undefined): string {
-  const lines: string[] = [
-    `# Page topology`,
-    ``,
-    `- **URL:** ${url}`,
-    `- **Host:** ${host}`,
-    `- **Generated by:** Landingfram automated crawl (primary viewport + optional responsive passes under \`docs/design-references/\`)`,
-    ``,
-    `## Section order (top → bottom)`,
-    ``,
-  ];
-
-  if (!layout?.sections.length) {
-    lines.push(
-      `_No section model — see \`reference/${host}/structure-outline.txt\` and \`dom-structure.json\`._`,
-    );
-    return lines.join("\n");
-  }
-
-  for (const s of layout.sections) {
-    const [x, y, w, h] = s.bbox;
-    lines.push(
-      `### ${s.id} — ${s.role}`,
-      `- **Composition:** ${s.composition}`,
-      `- **Density:** ${s.density}`,
-      `- **BBox (normalized):** x=${x.toFixed(3)}, y=${y.toFixed(3)}, w=${w.toFixed(3)}, h=${h.toFixed(3)}`,
-      `- **Slots:** ${s.slots.map((sl) => `${sl.kind}×${sl.count}`).join(", ") || "_none_"}`,
-      `- **Notes:** ${s.notes.join("; ") || "—"}`,
-      ``,
-    );
-  }
-
-  lines.push(
-    `## Fixed / sticky overlays`,
-    ``,
-    `_Not inferred automatically. Inspect \`reference/${host}/page.html\` or re-scan with Browser MCP per [clone-website skill](https://github.com/JCodesMore/ai-website-cloner-template/blob/master/.claude/skills/clone-website/SKILL.md)._`,
-    ``,
-  );
-
-  return lines.join("\n");
-}
-
-function emitBehaviors(
-  url: string,
-  host: string,
-  run: ExtractionRun,
-  layout: SiteLayout | undefined,
-): string {
-  const vpLine = layout?.viewport
-    ? `${layout.viewport.width}×${layout.viewport.height}px`
-    : "See crawl viewport in run.json / raw/*.layout.json";
-
-  return `# Behaviors bible
-
-- **URL:** ${url}
-- **Capture viewport:** ${vpLine}
-
-## What Landingfram captured automatically
-
-- Single desktop pass in headless Chromium with **reduced motion** forced for deterministic screenshots.
-- **Automated multi-viewport + scroll sweep** PNGs under \`docs/design-references/${hostSlug(host)}/\` (desktop/tablet/mobile + scroll frames).
-- **Header scroll probe** (\`header-scroll-probe.json\`) and **interaction hints** (\`interaction-hints.json\`) — check for scroll-driven chrome, Lenis-like wrappers, scroll-snap.
-- Computed-style tokens and a typed **section scaffold** when DOM crawl succeeds (\`raw/${host}.layout.json\`, \`mirror/${host}/page.tsx\`).
-${automatedJsonAppend(run.outputDir, host)}
-
-## What still needs a manual interaction sweep
-
-Use Browser MCP (or the upstream **clone-website** workflow) to fill gaps — match their checklist:
-
-1. **Scroll sweep** — header shrink, scroll-driven tabs, scroll-snap, sticky sidebars, Lenis / Locomotive markers.
-2. **Click sweep** — modals, dropdowns, tab panels; extract **every** tab state.
-3. **Hover sweep** — transitions (duration + easing), not just before/after colors.
-4. **Responsive sweep** — 1440 / 768 / 390 viewports with breakpoint notes.
-
-Document findings below as you discover them.
-
-## Recorded behaviors (manual)
-
-| Area | Interaction model | Trigger | State A | State B | Transition |
-|------|---------------------|---------|---------|---------|------------|
-| _(empty)_ | | | | | |
-
----
-
-## Operator SaaS idea
-
-${run.saasIdea?.trim() || "_Pass `--idea` or a second positional string when invoking landingfram._"}
-
-When rebuilding UI, preserve **interaction models** from this table (once filled); rewrite **copy** to match the SaaS idea without impersonating the reference brand.
-`;
-}
-
-function emitSectionSpec(host: string, layout: SiteLayout, s: SectionLayout): string {
-  const mirrorHint = `mirror/${host}/page.tsx — section marker starts with \`${s.id}:\` inside data-mirror-section`;
-  const slotsMd = s.slots.map((sl) => `- **${sl.kind}** × ${sl.count}`).join("\n");
-
-  return `# Section specification — ${s.id}
-
-## Overview
-
-- **Source URL:** ${layout.url}
-- **Mirror:** \`${mirrorHint}\`
-- **Interaction model:** _unknown — infer via scroll-first sweep per clone-website skill; default treated as **static** for this automated extract._
-
-## Section summary
-
-- **Role:** ${s.role}
-- **Composition:** ${s.composition}
-- **Density:** ${s.density}
-
-## Layout hints (from crawl)
-
-### Container style hints
-
-- **Background:** ${s.styles.backgroundHex ?? "—"}
-- **Foreground:** ${s.styles.foregroundHex ?? "—"}
-- **Padding block:** top ${s.styles.paddingTopPx ?? "—"}px / bottom ${s.styles.paddingBottomPx ?? "—"}px
-
-### Site tokens (page-level)
-
-- **Body font:** ${layout.tokens.bodyFontFamily}
-- **Heading font:** ${layout.tokens.headingFontFamily}
-- **Background / foreground:** ${layout.tokens.backgroundHex} / ${layout.tokens.foregroundHex}
-- **Primary:** ${layout.tokens.primaryHex}
-- **Radius:** ${layout.tokens.radiusPx}px
-
-## Slots (mirror placeholders)
-
-${slotsMd || "_None_"}
-
-Fill each \`<TextSlot>\` / \`<MediaSlot>\` using **verbatim** strings from \`reference/${host}/visible-text.txt\` only when you own rights or are authorized; otherwise substitute original copy aligned with the operator SaaS idea.
-
-## States & behaviors
-
-_N/A for automated single-state crawl — add rows after MCP extraction._
-
-## Assets
-
-- Crawl index: \`reference/${host}/media.json\` (respect licensing).
-- When downloads ran (no \`--no-download\`): \`downloaded_assets/${hostSlug(host)}/manifest.json\` maps remote URLs to \`files/*\`.
-
-## Responsive behavior
-
-Automated PNGs live under \`docs/design-references/${hostSlug(host)}/\` (tablet 768×900, mobile 390×844, scroll sweep). Refine breakpoints using those artifacts alongside the mirror scaffold.
-
-## Text content
-
-See \`reference/${host}/visible-text.json\` / \`.txt\`. Map strings into slots by section order and landmark roles.
-
-`;
-}