launchframe 0.2.0 → 0.2.1

package/packages/extract/automated-clone-pass.ts

@@ -1,353 +0,0 @@
-/**
- * Automated recon pass inspired by ai-website-cloner-template Phase 1–2:
- * multi-viewport screenshots, scroll sweep frames, header probe, interaction
- * hints, and optional media downloads — no manual Browser MCP required.
- */
-
-import { createHash } from "node:crypto";
-import { mkdirSync, readFileSync, existsSync, writeFileSync } from "node:fs";
-import { dirname, extname, join } from "node:path";
-
-import type { Page } from "playwright";
-
-import { hostSlug } from "./host-slug.js";
-
-const RESPONSIVE_PRESETS = [
-  { name: "tablet", width: 768, height: 900 },
-  { name: "mobile", width: 390, height: 844 },
-] as const;
-
-export interface AutomatedClonePassOptions {
-  page: Page;
-  host: string;
-  outDir: string;
-  primaryViewport: { width: number; height: number };
-  referenceDir?: string;
-  userAgent: string;
-  /** When false, skip downloading binaries from media.json (faster / lighter). */
-  downloadAssets: boolean;
-}
-
-/**
- * Runs while the Playwright page is still open (after reference + layout).
- * Writes under docs/design-references/<hostSlug>/ and optionally downloaded_assets/.
- */
-export async function runAutomatedClonePass(opts: AutomatedClonePassOptions): Promise<string[]> {
-  const written: string[] = [];
-  const slug = hostSlug(opts.host);
-  const designRoot = join(opts.outDir, "docs", "design-references", slug);
-  mkdirSync(designRoot, { recursive: true });
-
-  const primary = opts.primaryViewport;
-
-  await opts.page.setViewportSize({ width: primary.width, height: primary.height });
-  await opts.page.waitForTimeout(200);
-
-  const viewportPrimary = join(designRoot, "viewport-desktop.png");
-  await opts.page.screenshot({ path: viewportPrimary, fullPage: false, type: "png" });
-  written.push(viewportPrimary);
-
-  const fullPrimarySrc = join(opts.outDir, "screenshots", `${opts.host}.png`);
-  const fullPrimaryDest = join(designRoot, "full-page-desktop.png");
-  if (existsSync(fullPrimarySrc)) {
-    writeFileSync(fullPrimaryDest, readFileSync(fullPrimarySrc));
-    written.push(fullPrimaryDest);
-  }
-
-  for (const preset of RESPONSIVE_PRESETS) {
-    await opts.page.setViewportSize({ width: preset.width, height: preset.height });
-    await opts.page.waitForTimeout(350);
-    const fp = join(designRoot, `full-page-${preset.name}.png`);
-    await opts.page.screenshot({ path: fp, fullPage: true, type: "png" });
-    written.push(fp);
-    const vp = join(designRoot, `viewport-${preset.name}.png`);
-    await opts.page.screenshot({ path: vp, fullPage: false, type: "png" });
-    written.push(vp);
-  }
-
-  await opts.page.setViewportSize({ width: primary.width, height: primary.height });
-  await opts.page.waitForTimeout(200);
-
-  const scrollWritten = await scrollSweepScreenshots(opts.page, designRoot);
-  written.push(...scrollWritten);
-
-  await opts.page.evaluate(() => window.scrollTo(0, 0));
-  await opts.page.waitForTimeout(150);
-
-  const probePath = join(designRoot, "header-scroll-probe.json");
-  writeFileSync(probePath, JSON.stringify(await headerScrollProbe(opts.page), null, 2) + "\n");
-  written.push(probePath);
-
-  const hintsPath = join(designRoot, "interaction-hints.json");
-  writeFileSync(
-    hintsPath,
-    JSON.stringify(await captureInteractionHints(opts.page), null, 2) + "\n",
-  );
-  written.push(hintsPath);
-
-  const readmePath = join(designRoot, "README.md");
-  writeFileSync(readmePath, emitDesignReferencesReadme(opts.host, slug));
-  written.push(readmePath);
-
-  if (opts.downloadAssets && opts.referenceDir && existsSync(join(opts.referenceDir, "media.json"))) {
-    const assetDir = join(opts.outDir, "downloaded_assets", slug);
-    const manifestPath = join(assetDir, "manifest.json");
-    const manifest = await downloadMediaFromReference({
-      mediaJsonPath: join(opts.referenceDir, "media.json"),
-      destDir: join(assetDir, "files"),
-      userAgent: opts.userAgent,
-      baseUrl: opts.page.url(),
-    });
-    mkdirSync(dirname(manifestPath), { recursive: true });
-    writeFileSync(manifestPath, JSON.stringify(manifest, null, 2) + "\n");
-    written.push(manifestPath);
-  }
-
-  return written;
-}
-
-async function scrollSweepScreenshots(page: Page, designRoot: string): Promise<string[]> {
-  const written: string[] = [];
-  await page.evaluate(() => window.scrollTo(0, 0));
-  await page.waitForTimeout(150);
-
-  const scrollHeight = await page.evaluate(() =>
-    Math.max(document.documentElement.scrollHeight, document.body.scrollHeight),
-  );
-  const vh = await page.evaluate(() => window.innerHeight);
-  const steps = Math.min(10, Math.max(4, Math.ceil(scrollHeight / Math.max(1, vh))));
-  const positions: number[] = [];
-  for (let i = 0; i < steps; i++) {
-    const y =
-      steps <= 1 ? 0 : Math.floor(((scrollHeight - vh) * i) / (steps - 1 || 1));
-    positions.push(Math.max(0, y));
-  }
-
-  for (let i = 0; i < positions.length; i++) {
-    const y = positions[i]!;
-    await page.evaluate((yy) => window.scrollTo(0, yy), y);
-    await page.waitForTimeout(220);
-    const path = join(designRoot, `scroll-${String(i).padStart(2, "0")}-y${y}.png`);
-    await page.screenshot({ path, fullPage: false, type: "png" });
-    written.push(path);
-  }
-
-  await page.evaluate(() => window.scrollTo(0, 0));
-  await page.waitForTimeout(120);
-  return written;
-}
-
-async function headerScrollProbe(page: Page): Promise<unknown> {
-  await page.evaluate(() => window.scrollTo(0, 0));
-  await page.waitForTimeout(100);
-  const top = await probePrimaryChrome(page);
-  await page.evaluate(() => window.scrollTo(0, 420));
-  await page.waitForTimeout(180);
-  const scrolled = await probePrimaryChrome(page);
-  await page.evaluate(() => window.scrollTo(0, 0));
-  return {
-    capturedAt: new Date().toISOString(),
-    scrollY0: top,
-    scrollY420: scrolled,
-    note: "Compare boxShadow/background/position — header transitions suggest scroll-driven chrome.",
-  };
-}
-
-async function probePrimaryChrome(page: Page): Promise<unknown> {
-  return page.evaluate(() => {
-    const pick =
-      (document.querySelector("header") as HTMLElement | null) ??
-      (document.querySelector('[role="banner"]') as HTMLElement | null) ??
-      (document.querySelector("nav") as HTMLElement | null);
-    if (!pick || !(pick instanceof HTMLElement)) return null;
-    const cs = getComputedStyle(pick);
-    const r = pick.getBoundingClientRect();
-    return {
-      tag: pick.tagName,
-      position: cs.position,
-      top: Math.round(r.top),
-      height: Math.round(r.height),
-      boxShadow: cs.boxShadow,
-      backgroundColor: cs.backgroundColor,
-      backdropFilter: cs.backdropFilter,
-      borderBottomWidth: cs.borderBottomWidth,
-      borderBottomColor: cs.borderBottomColor,
-    };
-  });
-}
-
-async function captureInteractionHints(page: Page): Promise<unknown> {
-  return page.evaluate(() => {
-    const html = document.documentElement;
-    const body = document.body;
-    const hStyle = getComputedStyle(html);
-    const bStyle = getComputedStyle(body);
-    const stickySelectors = ["header", "nav", '[role="banner"]'];
-    let stickyCount = 0;
-    for (const sel of stickySelectors) {
-      for (const el of Array.from(document.querySelectorAll(sel))) {
-        const p = getComputedStyle(el).position;
-        if (p === "sticky" || p === "fixed") stickyCount++;
-      }
-    }
-    return {
-      capturedAt: new Date().toISOString(),
-      likelyLenis:
-        !!document.querySelector(
-          ".lenis, [data-lenis-prevent], [class*='lenis'], .locomotive-scroll",
-        ),
-      htmlScrollSnapType: hStyle.scrollSnapType,
-      bodyScrollSnapType: bStyle.scrollSnapType,
-      videoCount: document.querySelectorAll("video").length,
-      iframeCount: document.querySelectorAll("iframe").length,
-      stickyHeaderOrNavCount: stickyCount,
-      reducedMotionMedia: window.matchMedia("(prefers-reduced-motion: reduce)").matches,
-    };
-  });
-}
-
-function emitDesignReferencesReadme(host: string, slug: string): string {
-  return `# Design references — ${host}
-
-Automated captures (Landingfram \`automated-clone-pass\`), analogous to **ai-website-cloner-template** \`docs/design-references/\`.
-
-| Artifact | Purpose |
-| -------- | ------- |
-| \`full-page-desktop.png\` | Full-page desktop capture (copy of ../screenshots/${host}.png when present). |
-| \`viewport-desktop.png\` | Above-the-fold desktop viewport. |
-| \`full-page-tablet.png\` / \`viewport-tablet.png\` | 768×900 pass. |
-| \`full-page-mobile.png\` / \`viewport-mobile.png\` | 390×844 pass. |
-| \`scroll-*.png\` | Viewport screenshots while scrolling — quick motion / scroll-snap sanity check. |
-| \`header-scroll-probe.json\` | Header/nav computed styles at scroll Y≈0 vs Y≈420. |
-| \`interaction-hints.json\` | Heuristic signals (Lenis-like classes, scroll-snap, sticky chrome counts). |
-
-Section crops for builders can be derived from these plus \`../research/${slug}/PAGE_TOPOLOGY.md\`.
-
-Compliance: use for structure learning on sites you are allowed to analyze; replace assets when shipping your product.
-`;
-}
-
-interface DownloadManifest {
-  capturedAt: string;
-  baseUrl: string;
-  downloaded: Array<{ url: string; relativePath: string; bytes: number }>;
-  failed: Array<{ url: string; reason: string }>;
-  skippedDataUrls: number;
-}
-
-async function downloadMediaFromReference(opts: {
-  mediaJsonPath: string;
-  destDir: string;
-  userAgent: string;
-  baseUrl: string;
-}): Promise<DownloadManifest> {
-  const manifest: DownloadManifest = {
-    capturedAt: new Date().toISOString(),
-    baseUrl: opts.baseUrl,
-    downloaded: [],
-    failed: [],
-    skippedDataUrls: 0,
-  };
-
-  const raw = JSON.parse(readFileSync(opts.mediaJsonPath, "utf8")) as {
-    media?: Array<
-      | { type: string; src?: string | null; poster?: string | null }
-      | { type: string; src: string }
-    >;
-  };
-
-  const urls = new Set<string>();
-  for (const m of raw.media ?? []) {
-    if (m.type === "img" && "src" in m && m.src) urls.add(m.src);
-    if (m.type === "video") {
-      if ("src" in m && m.src) urls.add(m.src);
-      if ("poster" in m && m.poster) urls.add(m.poster);
-    }
-    if (m.type === "source" && "src" in m && m.src) urls.add(m.src);
-  }
-
-  const MAX_FILES = 72;
-  const MAX_BYTES = 12 * 1024 * 1024;
-  let n = 0;
-  const concurrency = 4;
-  const queue = [...urls].filter((u) => {
-    if (u.startsWith("data:")) {
-      manifest.skippedDataUrls++;
-      return false;
-    }
-    try {
-      const parsed = new URL(u);
-      return parsed.protocol === "https:" || parsed.protocol === "http:";
-    } catch {
-      return false;
-    }
-  });
-
-  mkdirSync(opts.destDir, { recursive: true });
-
-  async function worker(batch: string[]) {
-    for (const url of batch) {
-      if (n >= MAX_FILES) break;
-      const ok = await downloadOne(url, opts.destDir, opts.userAgent, MAX_BYTES);
-      if (ok.ok) {
-        manifest.downloaded.push({ url, relativePath: ok.relativePath, bytes: ok.bytes });
-        n++;
-      } else {
-        manifest.failed.push({ url, reason: ok.reason });
-      }
-    }
-  }
-
-  for (let i = 0; i < queue.length; i += concurrency) {
-    await worker(queue.slice(i, i + concurrency));
-  }
-
-  return manifest;
-}
-
-async function downloadOne(
-  url: string,
-  destDir: string,
-  userAgent: string,
-  maxBytes: number,
-): Promise<
-  { ok: true; relativePath: string; bytes: number } | { ok: false; reason: string }
-> {
-  try {
-    const res = await fetch(url, {
-      headers: { "User-Agent": userAgent, Accept: "*/*" },
-      redirect: "follow",
-    });
-    if (!res.ok) return { ok: false, reason: `HTTP ${res.status}` };
-    const buf = Buffer.from(await res.arrayBuffer());
-    if (buf.length > maxBytes) return { ok: false, reason: "too large" };
-    const hash = createHash("sha256").update(url).digest("hex").slice(0, 12);
-    const ext = guessExt(url, res.headers.get("content-type"));
-    const fileName = `${hash}${ext}`;
-    const path = join(destDir, fileName);
-    writeFileSync(path, buf);
-    const rel = `files/${fileName}`;
-    return { ok: true, relativePath: rel.replace(/\\/g, "/"), bytes: buf.length };
-  } catch (e) {
-    return { ok: false, reason: (e as Error).message };
-  }
-}
-
-function guessExt(url: string, contentType: string | null): string {
-  try {
-    const fromPath = extname(new URL(url).pathname.split("?")[0] ?? "");
-    if (/^\.\w{2,5}$/.test(fromPath)) return fromPath.slice(0, 10);
-  } catch {
-    /* ignore */
-  }
-
-  if (!contentType) return ".bin";
-  if (contentType.includes("jpeg")) return ".jpg";
-  if (contentType.includes("png")) return ".png";
-  if (contentType.includes("webp")) return ".webp";
-  if (contentType.includes("gif")) return ".gif";
-  if (contentType.includes("svg")) return ".svg";
-  if (contentType.includes("mp4")) return ".mp4";
-  if (contentType.includes("webm")) return ".webm";
-  return ".bin";
-}

package/packages/extract/browser-extract.ts

@@ -1,237 +0,0 @@
-/**
- * Browser-side token harvester.
- *
- * The exported `harvestTokens` is serialized by Playwright and run inside
- * the page via `page.evaluate`. It walks the rendered DOM, collects
- * computed styles, and returns a JSON-serializable raw observations
- * record. It does NOT capture HTML, scripts, or third-party assets — it
- * only reports values the browser already computed.
- *
- * The function is written as a single self-contained block so Playwright
- * can serialize it without surprises. Helpers are inlined.
- */
-
-import type { Page } from "playwright";
-
-import type { RawTokens } from "./types.js";
-
-/** Public entry: invoke the harvester inside the page. */
-export async function harvestTokens(
-  page: Page,
-  url: string,
-  viewport: { width: number; height: number },
-): Promise<RawTokens> {
-  // tsx/esbuild transpiles nested function declarations with a `__name`
-  // helper for nicer stack traces. Playwright serializes the function to
-  // a string and evaluates it in the browser, where `__name` is
-  // undefined. Define it as an identity function before invoking the
-  // harvester so the wrapped declarations resolve cleanly.
-  await page.evaluate(() => {
-    const g = globalThis as unknown as { __name?: (fn: unknown) => unknown };
-    if (typeof g.__name === "undefined") g.__name = (fn: unknown) => fn;
-  });
-
-  const partial = await page.evaluate(harvestInPage);
-  return {
-    url,
-    capturedAt: new Date().toISOString(),
-    viewport,
-    ...partial,
-  };
-}
-
-/**
- * The harvester. Plain JS so Playwright can serialize it.
- * Intentionally kept dependency-free.
- */
-function harvestInPage(): Omit<RawTokens, "url" | "capturedAt" | "viewport"> {
-  const colorObs: Array<{
-    hex: string;
-    role: "text" | "background" | "border" | "shadow";
-    area: number;
-  }> = [];
-  const typeAgg = new Map<
-    string,
-    {
-      fontFamily: string;
-      fontSize: number;
-      fontWeight: number;
-      lineHeight: number;
-      letterSpacing: number;
-      count: number;
-    }
-  >();
-  const spacingAgg = new Map<string, { axis: "padding" | "gap" | "margin"; px: number; count: number }>();
-  const radiiAgg = new Map<number, number>();
-  const shadowsAgg = new Map<string, number>();
-
-  const all = document.querySelectorAll<HTMLElement>("body *");
-
-  /* ---------------- color helpers ---------------- */
-  const toHex = (rgb: string): string | null => {
-    if (!rgb || rgb === "transparent") return null;
-    const m = rgb.match(/rgba?\(([^)]+)\)/);
-    if (!m) return null;
-    const parts = m[1]!.split(",").map((s) => s.trim());
-    const r = parseInt(parts[0]!, 10);
-    const g = parseInt(parts[1]!, 10);
-    const b = parseInt(parts[2]!, 10);
-    const a = parts[3] !== undefined ? parseFloat(parts[3]) : 1;
-    if (a < 0.05) return null;
-    if ([r, g, b].some((n) => Number.isNaN(n))) return null;
-    const h = (n: number) => n.toString(16).padStart(2, "0");
-    return `#${h(r)}${h(g)}${h(b)}`;
-  };
-
-  const recordColor = (
-    hex: string | null,
-    role: "text" | "background" | "border" | "shadow",
-    area: number,
-  ) => {
-    if (!hex || area <= 0) return;
-    colorObs.push({ hex, role, area });
-  };
-
-  /* ---------------- spacing helpers ---------------- */
-  const recordSpacing = (axis: "padding" | "gap" | "margin", px: number) => {
-    if (!Number.isFinite(px) || px <= 0 || px > 256) return;
-    const key = `${axis}:${Math.round(px)}`;
-    const existing = spacingAgg.get(key);
-    if (existing) existing.count += 1;
-    else spacingAgg.set(key, { axis, px: Math.round(px), count: 1 });
-  };
-
-  /* ---------------- container width tracking ------- */
-  let dominantContainerPx: number | null = null;
-  let dominantContainerArea = 0;
-
-  /* ---------------- main pass ---------------- */
-  for (const el of Array.from(all)) {
-    const style = getComputedStyle(el);
-    if (style.visibility === "hidden" || style.display === "none") continue;
-
-    const rect = el.getBoundingClientRect();
-    if (rect.width <= 0 || rect.height <= 0) continue;
-    const area = rect.width * rect.height;
-
-    // Background
-    recordColor(toHex(style.backgroundColor), "background", area);
-
-    // Border (read each side; the four-side shorthand is typical)
-    const borderColor = toHex(style.borderTopColor);
-    const borderWidth =
-      parseFloat(style.borderTopWidth) || parseFloat(style.borderBottomWidth) || 0;
-    if (borderWidth > 0) recordColor(borderColor, "border", borderWidth * (rect.width + rect.height) * 2);
-
-    // Box shadow color
-    const shadow = style.boxShadow;
-    if (shadow && shadow !== "none") {
-      shadowsAgg.set(shadow, (shadowsAgg.get(shadow) ?? 0) + 1);
-      const colorMatch = shadow.match(/rgba?\([^)]+\)|#[0-9a-fA-F]{3,8}/);
-      if (colorMatch) recordColor(toHex(colorMatch[0]), "shadow", area * 0.05);
-    }
-
-    // Text content + color (only if the element has direct text)
-    const directText = directTextLength(el);
-    if (directText > 0) {
-      const fontSize = parseFloat(style.fontSize) || 16;
-      const textArea = directText * fontSize * fontSize * 0.45;
-      recordColor(toHex(style.color), "text", textArea);
-
-      const fontFamily = simplifyFontFamily(style.fontFamily);
-      const fontWeight = normalizeWeight(style.fontWeight);
-      const lineHeight =
-        style.lineHeight === "normal"
-          ? Math.round(fontSize * 1.4)
-          : parseFloat(style.lineHeight) || Math.round(fontSize * 1.4);
-      const letterSpacing =
-        style.letterSpacing === "normal" ? 0 : parseFloat(style.letterSpacing) || 0;
-
-      const k = `${fontFamily}|${fontSize}|${fontWeight}`;
-      const existing = typeAgg.get(k);
-      if (existing) existing.count += directText;
-      else
-        typeAgg.set(k, {
-          fontFamily,
-          fontSize: Math.round(fontSize),
-          fontWeight,
-          lineHeight: Math.round(lineHeight),
-          letterSpacing,
-          count: directText,
-        });
-    }
-
-    // Spacing
-    for (const side of ["padding-top", "padding-right", "padding-bottom", "padding-left"]) {
-      recordSpacing("padding", parseFloat(style.getPropertyValue(side)));
-    }
-    if ((style as CSSStyleDeclaration).gap) recordSpacing("gap", parseFloat(style.gap));
-    if ((style as CSSStyleDeclaration).rowGap)
-      recordSpacing("gap", parseFloat(style.rowGap));
-    if ((style as CSSStyleDeclaration).columnGap)
-      recordSpacing("gap", parseFloat(style.columnGap));
-
-    // Border radius
-    const radius = parseFloat(style.borderTopLeftRadius);
-    if (Number.isFinite(radius) && radius > 0 && radius < 64) {
-      const r = Math.round(radius);
-      radiiAgg.set(r, (radiiAgg.get(r) ?? 0) + 1);
-    }
-
-    // Container candidate: a wide horizontally-centered block element
-    const tag = el.tagName;
-    const isLayout =
-      tag === "MAIN" || tag === "SECTION" || tag === "DIV" || tag === "ARTICLE";
-    if (
-      isLayout &&
-      rect.width >= 720 &&
-      rect.width <= 1600 &&
-      rect.height >= 200 &&
-      area > dominantContainerArea
-    ) {
-      dominantContainerArea = area;
-      dominantContainerPx = Math.round(rect.width);
-    }
-  }
-
-  return {
-    colors: colorObs,
-    typography: Array.from(typeAgg.values()),
-    spacing: Array.from(spacingAgg.values()),
-    radii: Array.from(radiiAgg, ([px, count]) => ({ px, count })),
-    shadows: Array.from(shadowsAgg, ([value, count]) => ({ value, count })),
-    dominantContainerPx,
-  };
-
-  /* ----- inlined helpers ----- */
-
-  function directTextLength(el: Element): number {
-    let total = 0;
-    for (const child of Array.from(el.childNodes)) {
-      if (child.nodeType === 3) {
-        const text = (child.nodeValue ?? "").trim();
-        if (text) total += text.length;
-      }
-    }
-    return total;
-  }
-
-  function simplifyFontFamily(raw: string): string {
-    if (!raw) return "system-ui";
-    const first = raw.split(",")[0]!.trim().replace(/^["']|["']$/g, "");
-    return first || "system-ui";
-  }
-
-  function normalizeWeight(raw: string): number {
-    const named: Record<string, number> = {
-      normal: 400,
-      bold: 700,
-      lighter: 300,
-      bolder: 700,
-    };
-    if (named[raw] !== undefined) return named[raw]!;
-    const n = parseInt(raw, 10);
-    if (Number.isFinite(n)) return Math.max(100, Math.min(900, n));
-    return 400;
-  }
-}