launchframe 0.2.3 → 0.2.5

package/template/scripts/recon-playwright.mjs

@@ -0,0 +1,323 @@
+#!/usr/bin/env node
+/**
+ * Playwright recon when Browser / Chrome DevTools MCP is unavailable or broken.
+ *
+ * Reads URL from launchframe.config.json (or --url). Writes:
+ *   - docs/design-references/playwright-<host>-<w>px.png (full page)
+ *   - docs/research/computed-snapshot.json (styles + asset inventory + bot-wall hint)
+ *   - docs/research/MEDIA_MANIFEST.md (table of discovered media URLs)
+ *
+ * Usage:
+ *   npm run recon
+ *   npm run recon:headed
+ *   node scripts/recon-playwright.mjs --url https://example.com --headed
+ *
+ * First time: npx playwright install chromium
+ */
+
+import { readFileSync, writeFileSync, mkdirSync, existsSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const ROOT = join(dirname(fileURLToPath(import.meta.url)), "..");
+
+function parseArgs(argv) {
+  const out = { url: null, headed: false, channel: process.env.PW_CHANNEL || undefined };
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === "--headed" || a === "-H") out.headed = true;
+    else if (a === "--url" || a === "-u") out.url = argv[++i];
+    else if (a.startsWith("--url=")) out.url = a.slice(6);
+    else if (a === "--channel" || a === "-c") out.channel = argv[++i] || undefined;
+  }
+  return out;
+}
+
+function readLaunchframeUrl() {
+  const p = join(ROOT, "launchframe.config.json");
+  if (!existsSync(p)) return null;
+  try {
+    const j = JSON.parse(readFileSync(p, "utf8"));
+    return j.url || null;
+  } catch {
+    return null;
+  }
+}
+
+function safeHost(url) {
+  try {
+    return new URL(url).hostname.replace(/[^a-z0-9.-]+/gi, "_");
+  } catch {
+    return "unknown-host";
+  }
+}
+
+/** Scroll to bottom slowly to trigger lazy-loaded media */
+async function scrollFullPage(page) {
+  await page.evaluate(async () => {
+    const delay = (ms) => new Promise((r) => setTimeout(r, ms));
+    const step = Math.max(1, Math.floor(window.innerHeight * 0.85));
+    let y = 0;
+    const max = document.documentElement.scrollHeight;
+    while (y < max) {
+      y = Math.min(y + step, max);
+      window.scrollTo(0, y);
+      await delay(200);
+    }
+    window.scrollTo(0, 0);
+    await delay(300);
+  });
+}
+
+async function gatherPageData(page) {
+  return page.evaluate(() => {
+    const title = document.title || "";
+    const text = (document.body?.innerText || "").slice(0, 5000);
+    const likelyBotWall =
+      /just a moment/i.test(title) ||
+      /checking your browser/i.test(text) ||
+      /cf-browser-verification/i.test(document.documentElement?.innerHTML || "") ||
+      document.querySelector("#challenge-running, .cf-browser-verification, #cf-challenge-running") !== null;
+
+    const imgs = [...document.querySelectorAll("img")].map((img) => ({
+      src: img.currentSrc || img.src || "",
+      srcset: img.srcset || "",
+      alt: img.alt || "",
+      w: img.naturalWidth,
+      h: img.naturalHeight,
+    }));
+
+    const videos = [...document.querySelectorAll("video")].map((v) => ({
+      src: v.currentSrc || v.src || "",
+      poster: v.poster || "",
+      autoplay: v.autoplay,
+      loop: v.loop,
+      muted: v.muted,
+    }));
+
+    const bgUrls = [];
+    const seen = new Set();
+    for (const el of document.querySelectorAll("*")) {
+      if (bgUrls.length > 400) break;
+      const bg = getComputedStyle(el).backgroundImage;
+      if (!bg || bg === "none") continue;
+      const m = /url\(["']?([^"')]+)["']?\)/.exec(bg);
+      if (m && m[1] && !seen.has(m[1])) {
+        seen.add(m[1]);
+        bgUrls.push({ url: m[1], tag: el.tagName.toLowerCase() });
+      }
+    }
+
+    const props = [
+      "fontSize",
+      "fontWeight",
+      "fontFamily",
+      "lineHeight",
+      "letterSpacing",
+      "color",
+      "backgroundColor",
+      "padding",
+      "margin",
+      "maxWidth",
+      "display",
+      "gap",
+      "borderRadius",
+      "boxShadow",
+    ];
+
+    function pickStyles(el) {
+      if (!el) return null;
+      const cs = getComputedStyle(el);
+      const o = {};
+      for (const p of props) o[p] = cs[p];
+      return o;
+    }
+
+    const landmarks = {
+      html: pickStyles(document.documentElement),
+      body: pickStyles(document.body),
+      h1: pickStyles(document.querySelector("h1")),
+      header: pickStyles(document.querySelector("header")),
+      main: pickStyles(document.querySelector("main")),
+      firstSection: pickStyles(document.querySelector("main section, section")),
+    };
+
+    return {
+      title,
+      likelyBotWall,
+      textSample: text.slice(0, 1200),
+      assetInventory: {
+        images: imgs.filter((i) => i.src),
+        videos,
+        backgroundImages: bgUrls,
+        svgCount: document.querySelectorAll("svg").length,
+      },
+      computedLandmarks: landmarks,
+    };
+  });
+}
+
+function writeMediaManifest(host, data, limitationsPath) {
+  const { images, videos, backgroundImages } = data.assetInventory;
+  const lines = [
+    "# MEDIA_MANIFEST (Playwright)",
+    "",
+    `Host: **${host}**`,
+    "",
+    "## Images (`<img>`)",
+    "",
+    "| src | alt | natural |",
+    "|-----|-----|---------|",
+  ];
+  for (const i of images.slice(0, 200)) {
+    const s = i.src.replace(/\|/g, "\\|");
+    lines.push(`| ${s} | ${(i.alt || "").replace(/\|/g, "\\|")} | ${i.w}×${i.h} |`);
+  }
+  if (images.length > 200) lines.push(`\n_…and ${images.length - 200} more_\n`);
+
+  lines.push("", "## Video", "", "| src | poster |", "|-----|--------|");
+  for (const v of videos) {
+    lines.push(`| ${(v.src || "").replace(/\|/g, "\\|")} | ${(v.poster || "").replace(/\|/g, "\\|")} |`);
+  }
+
+  lines.push("", "## Background images (sample)", "", "| url |", "|-----|");
+  for (const b of backgroundImages.slice(0, 150)) {
+    lines.push(`| ${b.url.replace(/\|/g, "\\|")} |`);
+  }
+
+  lines.push("", "---", "", `_Generated by scripts/recon-playwright.mjs. Download with scripts/download-assets.mjs when ready._`);
+  if (limitationsPath) lines.push("", `See also: **${limitationsPath}**`);
+
+  writeFileSync(join(ROOT, "docs", "research", "MEDIA_MANIFEST.md"), lines.join("\n") + "\n", "utf8");
+}
+
+function writeLimitations(host, url, finalUrl, data) {
+  const p = join(ROOT, "docs", "research", "EXTRACTION_LIMITATIONS.md");
+  const lines = [
+    "# Extraction limitations",
+    "",
+    `- **Requested URL:** ${url}`,
+    `- **Final URL:** ${finalUrl}`,
+    `- **Host:** ${host}`,
+    `- **Captured at:** ${new Date().toISOString()}`,
+    `- **Tool:** Playwright (\`npm run recon\`)`,
+    "",
+  ];
+  if (data.likelyBotWall) {
+    lines.push(
+      "## Bot / challenge page suspected",
+      "",
+      "Title or DOM matches common WAF/interstitial patterns. **Computed styles and screenshots may not reflect the real marketing page.** Prefer \`npm run recon:headed\` with real Chrome, or open the site manually and export assets.",
+      ""
+    );
+  } else {
+    lines.push(
+      "## Notes",
+      "",
+      "Snapshot-derived data is from Playwright Chromium, not interactive MCP. Re-run after layout shifts; verify against a real browser for pixel QA.",
+      ""
+    );
+  }
+  writeFileSync(p, lines.join("\n"), "utf8");
+  return "docs/research/EXTRACTION_LIMITATIONS.md";
+}
+
+async function main() {
+  const args = parseArgs(process.argv.slice(2));
+  const url = args.url || readLaunchframeUrl();
+  if (!url) {
+    console.error("No URL: set launchframe.config.json or pass --url https://...");
+    process.exit(1);
+  }
+
+  let chromium;
+  try {
+    ({ chromium } = await import("playwright"));
+  } catch {
+    console.error("Install Playwright: npm i -D playwright && npx playwright install chromium");
+    process.exit(1);
+  }
+
+  const host = safeHost(url);
+  mkdirSync(join(ROOT, "docs", "design-references"), { recursive: true });
+  mkdirSync(join(ROOT, "docs", "research"), { recursive: true });
+
+  const browser = await chromium.launch({
+    headless: !args.headed,
+    channel: args.channel,
+  });
+
+  const context = await browser.newContext({
+    userAgent:
+      "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36",
+    locale: "en-US",
+  });
+
+  const page = await context.newPage();
+
+  const snapshot = {
+    fetchedAt: new Date().toISOString(),
+    requestedUrl: url,
+    finalUrl: null,
+    viewports: {},
+    title: null,
+    likelyBotWall: false,
+    assetInventory: null,
+    computedLandmarks: null,
+    textSample: null,
+  };
+
+  try {
+    await page.goto(url, { waitUntil: "domcontentloaded", timeout: 90_000 });
+    await new Promise((r) => setTimeout(r, 2500));
+    snapshot.finalUrl = page.url();
+
+    for (const w of [1440, 390]) {
+      await page.setViewportSize({ width: w, height: w === 1440 ? 900 : 844 });
+      if (w === 1440) await scrollFullPage(page);
+
+      const shotPath = join(ROOT, "docs", "design-references", `playwright-${host}-${w}px.png`);
+      await page.screenshot({ path: shotPath, fullPage: true });
+      snapshot.viewports[w] = { screenshot: `docs/design-references/playwright-${host}-${w}px.png` };
+
+      if (w === 1440) {
+        const data = await gatherPageData(page);
+        snapshot.title = data.title;
+        snapshot.likelyBotWall = data.likelyBotWall;
+        snapshot.assetInventory = data.assetInventory;
+        snapshot.computedLandmarks = data.computedLandmarks;
+        snapshot.textSample = data.textSample;
+      }
+    }
+  } finally {
+    await browser.close();
+  }
+
+  const limRel = writeLimitations(host, url, snapshot.finalUrl, {
+    likelyBotWall: snapshot.likelyBotWall,
+  });
+
+  writeFileSync(
+    join(ROOT, "docs", "research", "computed-snapshot.json"),
+    JSON.stringify(snapshot, null, 2) + "\n",
+    "utf8"
+  );
+
+  if (snapshot.assetInventory) {
+    writeMediaManifest(host, { assetInventory: snapshot.assetInventory }, limRel);
+  }
+
+  console.log("Playwright recon finished.");
+  console.log(`  Screenshots: docs/design-references/playwright-${host}-1440px.png (+ 390px)`);
+  console.log(`  Snapshot:    docs/research/computed-snapshot.json`);
+  console.log(`  Media list:  docs/research/MEDIA_MANIFEST.md`);
+  console.log(`  Limits:      ${limRel}`);
+  if (snapshot.likelyBotWall) {
+    console.warn("\n⚠ Possible bot wall / challenge page — check EXTRACTION_LIMITATIONS.md and try: npm run recon:headed\n");
+  }
+}
+
+main().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});

package/template/src/app/globals.css

@@ -46,6 +46,9 @@
   --radius-2xl: calc(var(--radius) * 1.8);
   --radius-3xl: calc(var(--radius) * 2.2);
   --radius-4xl: calc(var(--radius) * 2.6);
+  --color-brand: var(--brand);
+  --color-brand-foreground: var(--brand-foreground);
+  --color-brand-muted: var(--brand-muted);
 }
 
 :root {
@@ -73,6 +76,10 @@
   --chart-4: oklch(0.371 0 0);
   --chart-5: oklch(0.269 0 0);
   --radius: 0.625rem;
+  /* Scribewise brand accents (ink + notebook blue) */
+  --brand: oklch(0.52 0.14 252);
+  --brand-foreground: oklch(0.985 0 0);
+  --brand-muted: oklch(0.94 0.03 252);
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
   --sidebar-primary: oklch(0.205 0 0);
@@ -84,6 +91,9 @@
 }
 
 .dark {
+  --brand: oklch(0.62 0.12 252);
+  --brand-foreground: oklch(0.145 0 0);
+  --brand-muted: oklch(0.26 0.04 252);
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.205 0 0);
@@ -117,6 +127,88 @@
   --sidebar-ring: oklch(0.556 0 0);
 }
 
+@keyframes scribewise-marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+@keyframes scribewise-float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-8px);
+  }
+}
+
+@keyframes scribewise-pixel-blink {
+  0%,
+  49% {
+    opacity: 1;
+  }
+  50%,
+  100% {
+    opacity: 0.25;
+  }
+}
+
+@keyframes scribewise-grid-shift {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(-24px, -24px);
+  }
+}
+
+.scribewise-marquee-track {
+  display: flex;
+  width: max-content;
+  gap: 3rem;
+  animation: scribewise-marquee 42s linear infinite;
+}
+
+.scribewise-bg-grid {
+  animation: scribewise-grid-shift 18s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .scribewise-marquee-track,
+  .scribewise-bg-grid {
+    animation: none !important;
+  }
+
+  .scribewise-pixel-brain rect,
+  .scribewise-soft-float {
+    animation: none !important;
+  }
+}
+
+.scribewise-pixel-brain rect {
+  animation: scribewise-pixel-blink 1s steps(1, end) infinite;
+}
+
+.scribewise-pixel-brain rect:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.scribewise-pixel-brain rect:nth-child(2) {
+  animation-delay: 0.12s;
+}
+
+.scribewise-pixel-brain rect:nth-child(3) {
+  animation-delay: 0.24s;
+}
+
+.scribewise-pixel-brain rect:nth-child(4) {
+  animation-delay: 0.36s;
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;
@@ -127,4 +219,4 @@
   html {
     @apply font-sans;
   }
-}
+}

package/template/src/app/layout.tsx

@@ -13,8 +13,9 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Website Clone",
-  description: "Pixel-perfect website clone",
+  title: "Scribewise — AI workspace for structured notes",
+  description:
+    "Capture voice, screenshots, and messy thoughts into structured notes synced everywhere.",
 };
 
 export default function RootLayout({

package/template/src/app/page.tsx

@@ -1,9 +1,5 @@
+import { ScribewiseLanding } from "@/components/marketing/scribewise-landing";
+
 export default function Home() {
-  return (
-    <main className="flex min-h-screen items-center justify-center">
-      <p className="text-muted-foreground">
-        Clone target not yet built. Run <code className="font-mono text-foreground">/clone-website</code> to start.
-      </p>
-    </main>
-  );
+  return <ScribewiseLanding />;
 }