npm - launchframe - Versions diffs - 0.4.9 → 0.4.11 - Mend

launchframe 0.4.9 → 0.4.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/scripts/page-inspection-dump.mjs ADDED Viewed

@@ -0,0 +1,386 @@
+#!/usr/bin/env node
+/**
+ * Capture a live page into files you can attach for an AI agent:
+ * — Full serialized HTML after JavaScript runs (like "Copy ▸ outerHTML" on <html>)
+ * — Every CSS response the browser loads (plus all inline <style> blocks)
+ * — Motion digest: @keyframes blocks, animation* / transition* declarations
+ *
+ * Prerequisite (once per machine / after npm install):
+ *   npx playwright install chromium
+ *
+ * Usage:
+ *   node scripts/page-inspection-dump.mjs https://example.com
+ *   node scripts/page-inspection-dump.mjs https://example.com --out ./my-capture
+ *   node scripts/page-inspection-dump.mjs https://example.com --out-parent docs/research/example.com/page-inspection --scroll-full
+ *   node scripts/page-inspection-dump.mjs https://example.com --viewport 390,844 --scroll-full
+ *
+ * Options:
+ *   --out <dir>              Exact output directory (default: docs/research/page-captures/<host>-<stamp>)
+ *   --out-parent <dir>       Parent dir; writes <host>-<iso-stamp>/ inside it (--out wins if both set)
+ *   --viewport <W>,<H>      Browser viewport (default: 1440,900)
+ *   --wait-until <mode>     load | domcontentloaded | networkidle (default: networkidle)
+ *   --timeout <ms>          Navigation timeout (default: 90000)
+ *   --scroll-full           Scroll to the bottom slowly to trigger lazy-loaded regions
+ *   --no-css-files          Skip writing individual .css files (still builds motion from inline + collected text)
+ */
+import { chromium } from "playwright";
+import { mkdir, writeFile } from "node:fs/promises";
+import { createHash } from "node:crypto";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+const __dirname = dirname(fileURLToPath(import.meta.url));
+function parseArgs(argv) {
+  const positional = [];
+  const flags = new Set();
+  /** @type {Record<string, string>} */
+  const opts = {};
+  for (let i = 2; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === "--") continue;
+    if (a.startsWith("--")) {
+      const key = a.slice(2);
+      if (
+        key === "scroll-full" ||
+        key === "no-css-files"
+      ) {
+        flags.add(key);
+        continue;
+      }
+      const next = argv[i + 1];
+      if (!next || next.startsWith("--")) {
+        console.error(`Missing value for --${key}`);
+        process.exit(1);
+      }
+      opts[key] = next;
+      i++;
+      continue;
+    }
+    positional.push(a);
+  }
+  return { positional, flags, opts };
+}
+function sanitizeFilenamePart(s) {
+  return s.replace(/[^a-zA-Z0-9._-]+/g, "_").slice(0, 120);
+}
+/**
+ * @param {string} css
+ * @returns {{ name: string, block: string }[]}
+ */
+function extractKeyframeBlocks(css) {
+  const out = [];
+  const re = /@keyframes\s+([^/{[\s]+)\s*\{/gi;
+  let m;
+  while ((m = re.exec(css)) !== null) {
+    const name = m[1].trim();
+    const openIdx = m.index + m[0].length - 1;
+    if (css[openIdx] !== "{") continue;
+    let depth = 0;
+    for (let i = openIdx; i < css.length; i++) {
+      const c = css[i];
+      if (c === "{") depth++;
+      else if (c === "}") {
+        depth--;
+        if (depth === 0) {
+          out.push({
+            name,
+            block: css.slice(m.index, i + 1).trim(),
+          });
+          break;
+        }
+      }
+    }
+  }
+  return out;
+}
+/**
+ * @param {string} css
+ * @returns {string[]}
+ */
+function extractMotionLines(css) {
+  const lines = css.split(/\r?\n/);
+  const hits = [];
+  for (const line of lines) {
+    const t = line.trim();
+    if (!t || t.startsWith("/*")) continue;
+    const lower = t.toLowerCase();
+    if (
+      lower.includes("animation:") ||
+      lower.includes("animation-name:") ||
+      lower.includes("animation-duration:") ||
+      lower.includes("animation-timing-function:") ||
+      lower.includes("animation-delay:") ||
+      lower.includes("animation-iteration-count:") ||
+      lower.includes("animation-direction:") ||
+      lower.includes("animation-fill-mode:") ||
+      lower.includes("animation-play-state:") ||
+      lower.includes("transition:") ||
+      lower.includes("transition-property:") ||
+      lower.includes("transition-duration:") ||
+      lower.includes("transition-timing-function:") ||
+      lower.includes("transition-delay:") ||
+      lower.includes("will-change:") ||
+      lower.includes("transform:") ||
+      lower.includes("@keyframes")
+    ) {
+      hits.push(t);
+    }
+  }
+  return hits;
+}
+/**
+ * @param {import('playwright').Page} page
+ */
+async function scrollFullPage(page) {
+  await page.evaluate(async () => {
+    const delay = (ms) => new Promise((r) => setTimeout(r, ms));
+    const step = Math.max(240, Math.floor(window.innerHeight * 0.85));
+    const max = Math.max(
+      document.documentElement.scrollHeight,
+      document.body?.scrollHeight ?? 0,
+    );
+    for (let y = 0; y < max; y += step) {
+      window.scrollTo(0, y);
+      await delay(120);
+    }
+    window.scrollTo(0, 0);
+    await delay(200);
+  });
+}
+async function runCapture() {
+  const { positional, flags, opts } = parseArgs(process.argv);
+  const urlRaw = positional[0];
+  if (!urlRaw) {
+    console.error(`Usage: node scripts/page-inspection-dump.mjs <url> [options]`);
+    process.exit(1);
+  }
+  let url;
+  try {
+    url = new URL(urlRaw).toString();
+  } catch {
+    console.error(`Invalid URL: ${urlRaw}`);
+    process.exit(1);
+  }
+  const viewportParts = (opts.viewport ?? "1440,900").split(",").map((s) => s.trim());
+  const vw = Number(viewportParts[0]) || 1440;
+  const vh = Number(viewportParts[1] ?? viewportParts[0]) || 900;
+  const waitUntil = opts["wait-until"] ?? "networkidle";
+  if (!["load", "domcontentloaded", "networkidle", "commit"].includes(waitUntil)) {
+    console.error(`Invalid --wait-until: ${waitUntil}`);
+    process.exit(1);
+  }
+  const navigationTimeout = Number(opts.timeout ?? "90000");
+  const host = new URL(url).hostname || "page";
+  const stamp = new Date().toISOString().replace(/[:.]/g, "-");
+  const defaultOut = join(
+    __dirname,
+    "..",
+    "docs",
+    "research",
+    "page-captures",
+    `${sanitizeFilenamePart(host)}-${stamp}`,
+  );
+  let outDir;
+  if (opts.out) {
+    outDir = resolve(process.cwd(), opts.out);
+  } else if (opts["out-parent"]) {
+    outDir = join(
+      resolve(process.cwd(), opts["out-parent"]),
+      `${sanitizeFilenamePart(host)}-${stamp}`,
+    );
+  } else {
+    outDir = defaultOut;
+  }
+  await mkdir(outDir, { recursive: true });
+  /** @type {{ url: string; bytes: number; text: string }[]} */
+  const cssBodies = [];
+  const browser = await chromium.launch({ headless: true });
+  try {
+    const context = await browser.newContext({
+      viewport: { width: vw, height: vh },
+      userAgent:
+        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 LaunchFramePageDump/1",
+    });
+    const page = await context.newPage();
+    page.on("response", async (response) => {
+      try {
+        const ct = (response.headers()["content-type"] ?? "").toLowerCase();
+        const rt = response.request().resourceType();
+        if (rt !== "stylesheet" && !ct.includes("text/css")) return;
+        const buf = await response.body();
+        const text = buf.toString("utf8");
+        cssBodies.push({ url: response.url(), bytes: buf.byteLength, text });
+      } catch {
+        // ignore
+      }
+    });
+    await page.goto(url, {
+      waitUntil: /** @type {'load'} */ (waitUntil),
+      timeout: navigationTimeout,
+    });
+    if (flags.has("scroll-full")) {
+      await scrollFullPage(page);
+    }
+    const [fullHtml, bodyOuter, inlineStyles, scriptInventory] = await page.evaluate(() => {
+      const styles = Array.from(document.querySelectorAll("style")).map((el, i) => ({
+        index: i,
+        media: el.getAttribute("media") ?? "",
+        text: el.textContent ?? "",
+      }));
+      const scripts = Array.from(document.querySelectorAll("script")).map((el, i) => ({
+        index: i,
+        src: el.getAttribute("src") ?? "",
+        type: el.getAttribute("type") ?? "",
+        async: el.hasAttribute("async"),
+        defer: el.hasAttribute("defer"),
+        inlineChars: (el.textContent ?? "").length,
+      }));
+      return [
+        document.documentElement.outerHTML,
+        document.body ? document.body.outerHTML : "",
+        styles,
+        scripts,
+      ];
+    });
+    await writeFile(join(outDir, "document.html"), fullHtml, "utf8");
+    if (bodyOuter) {
+      await writeFile(join(outDir, "body-outer.html"), bodyOuter, "utf8");
+    }
+    await writeFile(
+      join(outDir, "inline-styles.json"),
+      JSON.stringify(inlineStyles, null, 2),
+      "utf8",
+    );
+    if (!flags.has("no-css-files")) {
+      for (let i = 0; i < cssBodies.length; i++) {
+        const { url: cssUrl, text } = cssBodies[i];
+        const hash = createHash("sha256").update(text).digest("hex").slice(0, 12);
+        let base = "stylesheet";
+        try {
+          const u = new URL(cssUrl);
+          base = sanitizeFilenamePart(
+            (u.pathname.split("/").filter(Boolean).pop() || "stylesheet").replace(/\.css$/i, ""),
+          );
+        } catch {
+          base = "stylesheet";
+        }
+        const filename = `${String(i + 1).padStart(3, "0")}-${base}-${hash}.css`;
+        await writeFile(join(outDir, filename), text, "utf8");
+      }
+    }
+    const inlineCssText = inlineStyles
+      .map((s) => `/* inline style #${s.index} media=${s.media || "all"} */\n${s.text}`)
+      .join("\n\n");
+    const aggregatedCss = [
+      inlineCssText,
+      ...cssBodies.map((c) => `/* network stylesheet: ${c.url} */\n${c.text}`),
+    ].join("\n\n");
+    const keyframes = extractKeyframeBlocks(aggregatedCss);
+    const motionLines = extractMotionLines(aggregatedCss);
+    /** @type {Record<string, unknown>} */
+    const motionSummary = {
+      sourceUrl: url,
+      generatedAt: new Date().toISOString(),
+      viewport: { width: vw, height: vh },
+      counts: {
+        keyframeRules: keyframes.length,
+        motionRelatedLines: motionLines.length,
+        inlineStyleTags: inlineStyles.length,
+        networkStylesheets: cssBodies.length,
+        scriptElements: scriptInventory.length,
+      },
+      keyframes: keyframes.map((k) => ({
+        name: k.name,
+        blockChars: k.block.length,
+        block:
+          k.block.length > 12000
+            ? `${k.block.slice(0, 12000)}\n/* …truncated… */\n`
+            : k.block,
+      })),
+      motionLinesSample: motionLines.slice(0, 800),
+      motionLinesTotal: motionLines.length,
+    };
+    await writeFile(
+      join(outDir, "motion-summary.json"),
+      JSON.stringify(motionSummary, null, 2),
+      "utf8",
+    );
+    /** @type {Record<string, unknown>} */
+    const meta = {
+      sourceUrl: url,
+      generatedAt: new Date().toISOString(),
+      viewport: { width: vw, height: vh },
+      waitUntil,
+      options: {
+        scrollFull: flags.has("scroll-full"),
+        wroteCssFiles: !flags.has("no-css-files"),
+      },
+      outputs: {
+        documentHtmlBytes: Buffer.byteLength(fullHtml, "utf8"),
+        bodyOuterHtmlBytes: bodyOuter ? Buffer.byteLength(bodyOuter, "utf8") : 0,
+        networkStylesheets: cssBodies.map((c) => ({ url: c.url, bytes: c.bytes })),
+      },
+      scripts: scriptInventory,
+    };
+    await writeFile(join(outDir, "capture-meta.json"), JSON.stringify(meta, null, 2), "utf8");
+    await writeFile(
+      join(outDir, "README.txt"),
+      [
+        "LaunchFrame page inspection capture",
+        "====================================",
+        `Source: ${url}`,
+        "",
+        "Files:",
+        "  document.html      — Full <html> outerHTML after JS (attach this for an agent)",
+        "  body-outer.html    — <body> outerHTML only (smaller)",
+        "  inline-styles.json — All inline <style> tag contents",
+        "  motion-summary.json— @keyframes + animation/transition-related lines",
+        "  capture-meta.json  — Viewport, stylesheet URLs, <script> inventory",
+        "  *.css              — Stylesheets observed on the network (unless --no-css-files)",
+        "",
+        "Notes:",
+        "  • Some sites lazy-load CSS; use --scroll-full to force more requests.",
+        "  • Cross-origin styles you cannot access via JS are still captured here if the browser downloaded them.",
+        "  • Motion inside bundled JS (not CSS) is not fully extracted—check script src in capture-meta.json.",
+        "",
+      ].join("\n"),
+      "utf8",
+    );
+    console.log(outDir);
+  } finally {
+    await browser.close();
+  }
+}
+await runCapture();

package/scripts/sync-agent-rules.sh CHANGED Viewed

@@ -1,88 +1,88 @@
-#!/usr/bin/env bash
-#
-# sync-agent-rules.sh — Generate AI agent config files from AGENTS.md
-#
-# AGENTS.md is the single source of truth. This script creates copies
-# for agents that don't read AGENTS.md natively (Cline, Continue,
-# Amazon Q, GitHub Copilot Chat).
-#
-# Usage:
-#   bash scripts/sync-agent-rules.sh
-#
-# Agents that DON'T need generated files (they read AGENTS.md natively):
-#   Codex CLI, OpenCode, Cursor, Windsurf, Copilot Coding Agent,
-#   Roo Code, Aider, Augment Code
-#
-# Agents with their own thin pointer files (created manually):
-#   Claude Code  → CLAUDE.md (@AGENTS.md import)
-#   Gemini CLI   → GEMINI.md (@AGENTS.md import)
-#   Cursor       → .cursor/rules/project.mdc (pointer)
-#   Windsurf     → .windsurfrules (pointer)
-#   Aider        → .aider.conf.yml (read: [AGENTS.md])
-set -euo pipefail
-REPO_ROOT="$(cd "$(dirname "$0")/.." && pwd)"
-SOURCE="$REPO_ROOT/AGENTS.md"
-if [[ ! -f "$SOURCE" ]]; then
-  echo "Error: AGENTS.md not found at $SOURCE" >&2
-  exit 1
-fi
-# Resolve @file imports (Claude Code syntax) into inline content.
-# Lines like "@docs/research/INSPECTION_GUIDE.md" become the file's contents.
-resolve_imports() {
-  while IFS= read -r line || [[ -n "$line" ]]; do
-    line="${line%$'\r'}"
-    if [[ "$line" =~ ^@(.+)$ ]]; then
-      local import_path="${BASH_REMATCH[1]}"
-      local resolved="$REPO_ROOT/$import_path"
-      if [[ -f "$resolved" ]]; then
-        cat "$resolved"
-        echo ""
-      else
-        echo "<!-- Import not found: $import_path -->"
-      fi
-    else
-      echo "$line"
-    fi
-  done < "$SOURCE"
-}
-RESOLVED_CONTENT="$(resolve_imports)"
-HEADER="<!-- AUTO-GENERATED from AGENTS.md — do not edit directly.
-     Run \`bash scripts/sync-agent-rules.sh\` to regenerate. -->"
-# Helper: write a generated file with header
-write_file() {
-  local target="$1"
-  local content="$2"
-  mkdir -p "$(dirname "$target")"
-  printf '%s\n\n%s\n' "$HEADER" "$content" > "$target"
-  echo "  ✓ $target"
-}
-echo "Syncing agent rules from AGENTS.md..."
-# GitHub Copilot Chat — .github/copilot-instructions.md
-write_file "$REPO_ROOT/.github/copilot-instructions.md" "$RESOLVED_CONTENT"
-# Cline / Roo Code — .clinerules
-write_file "$REPO_ROOT/.clinerules" "$RESOLVED_CONTENT"
-# Continue — .continue/rules/project.md
-CONTINUE_FRONTMATTER="---
-description: Project conventions for AI Website Clone Template
-alwaysApply: true
----"
-write_file "$REPO_ROOT/.continue/rules/project.md" "$CONTINUE_FRONTMATTER
-$RESOLVED_CONTENT"
-# Amazon Q Developer — .amazonq/rules/project.md
-write_file "$REPO_ROOT/.amazonq/rules/project.md" "$RESOLVED_CONTENT"
-echo ""
-echo "Done. Generated files are committed to the repo but sourced from AGENTS.md."
-echo "Edit AGENTS.md, then re-run this script to update all agent configs."
+#!/usr/bin/env bash
+#
+# sync-agent-rules.sh — Generate AI agent config files from AGENTS.md
+#
+# AGENTS.md is the single source of truth. This script creates copies
+# for agents that don't read AGENTS.md natively (Cline, Continue,
+# Amazon Q, GitHub Copilot Chat).
+#
+# Usage:
+#   bash scripts/sync-agent-rules.sh
+#
+# Agents that DON'T need generated files (they read AGENTS.md natively):
+#   Codex CLI, OpenCode, Cursor, Windsurf, Copilot Coding Agent,
+#   Roo Code, Aider, Augment Code
+#
+# Agents with their own thin pointer files (created manually):
+#   Claude Code  → CLAUDE.md (@AGENTS.md import)
+#   Gemini CLI   → GEMINI.md (@AGENTS.md import)
+#   Cursor       → .cursor/rules/project.mdc (pointer)
+#   Windsurf     → .windsurfrules (pointer)
+#   Aider        → .aider.conf.yml (read: [AGENTS.md])
+set -euo pipefail
+REPO_ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+SOURCE="$REPO_ROOT/AGENTS.md"
+if [[ ! -f "$SOURCE" ]]; then
+  echo "Error: AGENTS.md not found at $SOURCE" >&2
+  exit 1
+fi
+# Resolve @file imports (Claude Code syntax) into inline content.
+# Lines like "@docs/research/INSPECTION_GUIDE.md" become the file's contents.
+resolve_imports() {
+  while IFS= read -r line || [[ -n "$line" ]]; do
+    line="${line%$'\r'}"
+    if [[ "$line" =~ ^@(.+)$ ]]; then
+      local import_path="${BASH_REMATCH[1]}"
+      local resolved="$REPO_ROOT/$import_path"
+      if [[ -f "$resolved" ]]; then
+        cat "$resolved"
+        echo ""
+      else
+        echo "<!-- Import not found: $import_path -->"
+      fi
+    else
+      echo "$line"
+    fi
+  done < "$SOURCE"
+}
+RESOLVED_CONTENT="$(resolve_imports)"
+HEADER="<!-- AUTO-GENERATED from AGENTS.md — do not edit directly.
+     Run \`bash scripts/sync-agent-rules.sh\` to regenerate. -->"
+# Helper: write a generated file with header
+write_file() {
+  local target="$1"
+  local content="$2"
+  mkdir -p "$(dirname "$target")"
+  printf '%s\n\n%s\n' "$HEADER" "$content" > "$target"
+  echo "  ✓ $target"
+}
+echo "Syncing agent rules from AGENTS.md..."
+# GitHub Copilot Chat — .github/copilot-instructions.md
+write_file "$REPO_ROOT/.github/copilot-instructions.md" "$RESOLVED_CONTENT"
+# Cline / Roo Code — .clinerules
+write_file "$REPO_ROOT/.clinerules" "$RESOLVED_CONTENT"
+# Continue — .continue/rules/project.md
+CONTINUE_FRONTMATTER="---
+description: Project conventions for AI Website Clone Template
+alwaysApply: true
+---"
+write_file "$REPO_ROOT/.continue/rules/project.md" "$CONTINUE_FRONTMATTER
+$RESOLVED_CONTENT"
+# Amazon Q Developer — .amazonq/rules/project.md
+write_file "$REPO_ROOT/.amazonq/rules/project.md" "$RESOLVED_CONTENT"
+echo ""
+echo "Done. Generated files are committed to the repo but sourced from AGENTS.md."
+echo "Edit AGENTS.md, then re-run this script to update all agent configs."

package/tsconfig.json CHANGED Viewed

@@ -1,34 +1,34 @@
-{
-  "compilerOptions": {
-    "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts",
-    "**/*.mts"
-  ],
-  "exclude": ["node_modules"]
-}
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}