Function runLayoutAudit

packages/cli/src/commands/layout.ts:223–309

(
  projectDir: string,
  opts: {
    samples: number;
    at?: number[];
    atTransitions: boolean;
    maxTransitionSamples?: number;
    timeout: number;
    tolerance: number;
    motion?: MotionSpec;
  },
)

}

async function runLayoutAudit(
  projectDir: string,
  opts: {
    samples: number;
    at?: number[];
    atTransitions: boolean;
    maxTransitionSamples?: number;
    timeout: number;
    tolerance: number;
    motion?: MotionSpec;
  },
): Promise<LayoutAuditResult> {
  const { ensureBrowser } = await import("../browser/manager.js");
  const puppeteer = await import("puppeteer-core");
  const html = await bundleProjectHtml(projectDir);
  const server = await serveStaticProjectHtml(
    projectDir,
    html,
    "Failed to bind local layout audit server",
  );
  let chromeBrowser: import("puppeteer-core").Browser | undefined;

  try {
    const browser = await ensureBrowser();
    chromeBrowser = await puppeteer.default.launch({
      headless: true,
      executablePath: browser.executablePath,
      args: [
        "--no-sandbox",
        "--disable-gpu",
        "--disable-dev-shm-usage",
        "--enable-webgl",
        "--use-gl=angle",
        "--use-angle=swiftshader",
      ],
    });

    const page = await chromeBrowser.newPage();
    await page.setViewport({ width: 1920, height: 1080 });
    await page.goto(server.url, { waitUntil: "domcontentloaded", timeout: 10000 });
    await alignViewportToComposition(page, server.url);
    await page
      .waitForFunction(() => !!(window as unknown as { __timelines?: unknown }).__timelines, {
        timeout: opts.timeout,
      })
      .catch(() => {});
    await waitForFonts(page, 750);
    await new Promise((resolveSettle) => setTimeout(resolveSettle, 250));

    const duration = await getCompositionDuration(page);
    const baseSamples = buildLayoutSampleTimes({ duration, samples: opts.samples, at: opts.at });
    let transitionSamples: number[] = [];
    let transitionSamplesDropped = 0;
    if (opts.atTransitions) {
      const boundaries = await collectTweenBoundaries(page);
      const transitions = buildTransitionSampleTimes({
        duration,
        boundaries,