@agent-native/creative-context 0.5.12 → 0.6.2

package/dist/connectors/rendered-page.js

@@ -1,4 +1,5 @@
 import { randomUUID } from "node:crypto";
+import { existsSync } from "node:fs";
 import { isBlockedExtensionUrlWithDns, ssrfSafeFetch, } from "@agent-native/core/extensions/url-safety";
 import { extractStaticWebsiteContext, rankColorSamples, readBoundedResponseBytes, } from "@agent-native/core/ingestion";
 import { normalizeWhitespace } from "./normalize.js";
@@ -12,6 +13,36 @@ const MAX_TYPOGRAPHY = 100;
 const MAX_SPACING = 100;
 const MAX_RADII = 64;
 const MAX_CSS_VARIABLES = 128;
+const MAX_COMPONENT_STYLES = 24;
+const FONT_READY_TIMEOUT_MS = 4_000;
+const MAX_BROWSER_RESOURCE_BYTES = 12 * 1024 * 1024;
+const MAX_BROWSER_RESOURCE_COUNT = 400;
+const MAX_BROWSER_RESOURCE_BYTES_TOTAL = 64 * 1024 * 1024;
+const BROWSER_RESOURCE_TIMEOUT_MS = 15_000;
+const BROWSER_REQUEST_HEADERS = new Set([
+    "accept",
+    "accept-language",
+    "if-modified-since",
+    "if-none-match",
+    "origin",
+    "range",
+    "referer",
+    "user-agent",
+]);
+const BROWSER_RESPONSE_HEADERS = new Set([
+    "connection",
+    "content-encoding",
+    "content-length",
+    "keep-alive",
+    "proxy-authenticate",
+    "proxy-authorization",
+    "set-cookie",
+    "set-cookie2",
+    "te",
+    "trailer",
+    "transfer-encoding",
+    "upgrade",
+]);
 export class LayeredRenderedPageProvider {
     #requestBuilderBrowserConnection;
     #loadPlaywright;
@@ -37,7 +68,7 @@ export class LayeredRenderedPageProvider {
                 const connection = await this.#requestBuilderBrowserConnection({
                     sessionId: `creative-context-${randomUUID()}`,
                 });
-                const wsUrl = stringValue(connection.wsUrl);
+                const wsUrl = typeof connection.wsUrl === "string" ? connection.wsUrl.trim() : "";
                 if (!wsUrl)
                     throw new Error("Builder Browser did not return wsUrl.");
                 return await renderWithPlaywright(playwright, request, warnings, "builder-browser", wsUrl);
@@ -75,40 +106,80 @@ export class LayeredRenderedPageProvider {
         return renderStatic(request, warnings, this.#staticFetch);
     }
 }
-async function renderWithPlaywright(playwright, request, warnings, method, wsUrl) {
+export async function renderWithPlaywright(playwright, request, warnings, method, wsUrl) {
     const browser = wsUrl
         ? await playwright.chromium.connectOverCDP(wsUrl)
-        : await playwright.chromium.launch({ headless: true });
+        : await launchChromium(playwright.chromium);
+    let isolatedContext;
     try {
-        const context = browser.contexts()[0] ?? (await browser.newContext());
-        const page = context.pages()[0] ?? (await context.newPage());
-        await installNavigationGuard(page);
+        // Never reuse a connected browser's ambient context: it can carry cookies,
+        // extensions, or tabs from another workflow. The safe proxy below is only
+        // useful when the page itself is isolated from that state.
+        if (!browser.newContext) {
+            throw new Error("Browser did not provide isolated context support.");
+        }
+        isolatedContext = await browser.newContext();
+        const page = await isolatedContext.newPage();
+        const getFinalNavigationUrl = await installNavigationGuard(page, request, warnings);
         await page.setViewportSize({ width: 1440, height: 900 });
         await page.goto(request.url, {
             timeout: boundedTimeout(request.timeoutMs),
             waitUntil: request.waitUntil ?? "domcontentloaded",
         });
-        const finalUrl = page.url();
+        await page
+            .waitForLoadState?.("load", {
+            timeout: Math.min(8_000, boundedTimeout(request.timeoutMs)),
+        })
+            .catch((error) => {
+            warnings.push(`Browser load stabilization unavailable: ${errorMessage(error)}`);
+        });
+        // React hydration, CSS-in-JS insertion, and web fonts commonly finish just
+        // after `load`. Give those layers a bounded chance to settle, then capture
+        // the computed cascade rather than the server HTML.
+        await page
+            .waitForLoadState?.("networkidle", { timeout: 4_000 })
+            .catch((error) => {
+            warnings.push(`Browser network-idle stabilization unavailable: ${errorMessage(error)}`);
+        });
+        await waitForFontReadiness(page, Math.min(FONT_READY_TIMEOUT_MS, boundedTimeout(request.timeoutMs))).catch((error) => {
+            warnings.push(`Browser font readiness unavailable: ${errorMessage(error)}`);
+        });
+        await new Promise((resolve) => setTimeout(resolve, 150));
+        await page.evaluate(dismissConsentOverlays).catch(() => undefined);
+        const finalUrl = getFinalNavigationUrl() ?? page.url();
         await assertPublicBrowserUrl(finalUrl);
         const [title, text, desktopScreenshot, extraction] = await Promise.all([
-            page.title().catch(() => ""),
+            page.title().catch((error) => {
+                warnings.push(`Browser title extraction unavailable: ${errorMessage(error)}`);
+                return "";
+            }),
             page
                 .locator("body")
                 .innerText()
-                .catch(() => ""),
+                .catch((error) => {
+                warnings.push(`Browser text extraction unavailable: ${errorMessage(error)}`);
+                return "";
+            }),
             page
                 .screenshot({ type: "png", fullPage: false })
                 .then(boundedScreenshot)
-                .catch(() => undefined),
-            page
-                .evaluate(captureRenderedWebsiteContext)
-                .catch(() => emptyExtraction()),
+                .catch((error) => {
+                warnings.push(`Desktop screenshot unavailable: ${errorMessage(error)}`);
+                return undefined;
+            }),
+            page.evaluate(captureRenderedWebsiteContext).catch((error) => {
+                warnings.push(`Browser style extraction unavailable: ${errorMessage(error)}`);
+                return emptyExtraction();
+            }),
         ]);
         await page.setViewportSize({ width: 390, height: 844 });
         const mobileScreenshot = await page
             .screenshot({ type: "png", fullPage: false })
             .then(boundedScreenshot)
-            .catch(() => undefined);
+            .catch((error) => {
+            warnings.push(`Mobile screenshot unavailable: ${errorMessage(error)}`);
+            return undefined;
+        });
         const unboundedText = normalizeWhitespace(text);
         const textTruncated = unboundedText.length > MAX_RENDERED_TEXT_CHARS;
         const normalizedText = unboundedText.slice(0, MAX_RENDERED_TEXT_CHARS);
@@ -173,21 +244,76 @@ async function renderWithPlaywright(playwright, request, warnings, method, wsUrl
         };
     }
     finally {
+        await isolatedContext?.close?.().catch((error) => {
+            warnings.push(`Browser context cleanup unavailable: ${errorMessage(error)}`);
+        });
         await browser.close().catch(() => undefined);
     }
 }
-async function installNavigationGuard(page) {
+async function waitForFontReadiness(page, timeoutMs) {
+    let timeout;
+    try {
+        await Promise.race([
+            page.evaluate(async () => {
+                if (document.fonts?.ready)
+                    await document.fonts.ready;
+            }),
+            new Promise((_, reject) => {
+                timeout = setTimeout(() => {
+                    reject(new Error(`font readiness timed out after ${timeoutMs}ms`));
+                }, timeoutMs);
+            }),
+        ]);
+    }
+    finally {
+        if (timeout !== undefined)
+            clearTimeout(timeout);
+    }
+}
+async function installNavigationGuard(page, renderRequest, warnings) {
+    let finalNavigationUrl;
+    let resourceCount = 0;
+    let resourceBytes = 0;
+    let reservedResourceBytes = 0;
+    const bodyBudgetWaiters = [];
+    let resourceLimitWarningAdded = false;
+    let blockedResourceWarningAdded = false;
+    let failedResourceWarningAdded = false;
+    const reserveBodyBudget = async () => {
+        while (reservedResourceBytes + MAX_BROWSER_RESOURCE_BYTES >
+            MAX_BROWSER_RESOURCE_BYTES_TOTAL) {
+            await new Promise((resolve) => {
+                bodyBudgetWaiters.push(resolve);
+            });
+        }
+        reservedResourceBytes += MAX_BROWSER_RESOURCE_BYTES;
+        let released = false;
+        return () => {
+            if (released)
+                return;
+            released = true;
+            reservedResourceBytes -= MAX_BROWSER_RESOURCE_BYTES;
+            bodyBudgetWaiters.shift()?.();
+        };
+    };
+    const addWarning = (value) => {
+        if (!warnings.includes(value))
+            warnings.push(value);
+    };
     await page.route("**/*", async (route) => {
-        const request = route.request();
+        const browserRequest = route.request();
         let parsed;
         try {
-            parsed = new URL(request.url());
+            parsed = new URL(browserRequest.url());
         }
         catch {
+            // coercion-ok: an absent optional package means the next compatible probe should run.
             await route.abort("blockedbyclient");
             return;
         }
-        if (parsed.protocol === "data:" || parsed.protocol === "blob:") {
+        if (parsed.protocol === "about:" ||
+            parsed.protocol === "data:" ||
+            parsed.protocol === "blob:") {
             await route.continue();
             return;
         }
@@ -195,15 +321,237 @@ async function installNavigationGuard(page) {
             await route.abort("blockedbyclient");
             return;
         }
+        const method = (browserRequest.method?.() ?? "GET").toUpperCase();
+        if (method !== "GET" && method !== "HEAD") {
+            await route.abort("blockedbyclient");
+            if (!resourceLimitWarningAdded) {
+                resourceLimitWarningAdded = true;
+                addWarning("Browser blocked a non-read-only resource request during extraction.");
+            }
+            return;
+        }
+        if (resourceCount >= MAX_BROWSER_RESOURCE_COUNT) {
+            await route.abort("blockedbyclient");
+            if (!resourceLimitWarningAdded) {
+                resourceLimitWarningAdded = true;
+                addWarning(`Browser resource budget reached (${MAX_BROWSER_RESOURCE_COUNT} requests).`);
+            }
+            return;
+        }
+        // Reserve the request slot before the first await. Browser route handlers
+        // overlap, so incrementing only after the proxy response arrives lets a
+        // burst of requests all pass the limit check.
+        resourceCount += 1;
+        let bodyBudgetRelease;
+        let committedBytes = 0;
+        let fulfilled = false;
         try {
             await assertPublicBrowserUrl(parsed.href);
+            const response = await ssrfSafeFetch(parsed.href, {
+                method,
+                headers: browserRequestHeaders(browserRequest),
+                signal: AbortSignal.timeout(Math.min(BROWSER_RESOURCE_TIMEOUT_MS, boundedTimeout(renderRequest.timeoutMs))),
+            }, { maxRedirects: 5 });
+            bodyBudgetRelease = await reserveBodyBudget();
+            const body = await readBoundedResponseBytes(response, MAX_BROWSER_RESOURCE_BYTES);
+            bodyBudgetRelease();
+            bodyBudgetRelease = undefined;
+            if (resourceBytes + body.byteLength > MAX_BROWSER_RESOURCE_BYTES_TOTAL) {
+                await route.abort("blockedbyclient");
+                if (!resourceLimitWarningAdded) {
+                    resourceLimitWarningAdded = true;
+                    addWarning(`Browser resource budget reached (${MAX_BROWSER_RESOURCE_BYTES_TOTAL} bytes).`);
+                }
+                return;
+            }
+            resourceBytes += body.byteLength;
+            committedBytes = body.byteLength;
+            if (browserRequest.isNavigationRequest()) {
+                finalNavigationUrl = response.url || parsed.href;
+            }
+            await route.fulfill({
+                status: response.status,
+                headers: browserResponseHeaders(response),
+                body: Buffer.from(body),
+            });
+            fulfilled = true;
         }
-        catch {
+        catch (error) {
+            if (committedBytes > 0) {
+                resourceBytes -= committedBytes;
+                committedBytes = 0;
+            }
             await route.abort("blockedbyclient");
-            return;
+            if (isSsrfError(error)) {
+                if (!blockedResourceWarningAdded) {
+                    blockedResourceWarningAdded = true;
+                    addWarning("Some browser resources were blocked by the SSRF safety policy.");
+                }
+            }
+            else if (!failedResourceWarningAdded) {
+                failedResourceWarningAdded = true;
+                addWarning("Some browser resources could not be fetched through the safe network proxy.");
+            }
+        }
+        finally {
+            bodyBudgetRelease?.();
+            if (!fulfilled)
+                resourceCount -= 1;
+        }
+    });
+    return () => finalNavigationUrl;
+}
+function browserRequestHeaders(request) {
+    const source = request.headers?.() ?? {};
+    return Object.fromEntries(Object.entries(source).filter(([name, value]) => {
+        return BROWSER_REQUEST_HEADERS.has(name.toLowerCase()) && Boolean(value);
+    }));
+}
+function browserResponseHeaders(response) {
+    const headers = {};
+    response.headers.forEach((value, name) => {
+        if (!BROWSER_RESPONSE_HEADERS.has(name.toLowerCase())) {
+            headers[name] = value;
         }
-        await route.continue();
     });
+    return headers;
+}
+function isSsrfError(error) {
+    return /ssrf blocked|private\/internal|connect blocked/i.test(errorMessage(error));
+}
+const SYSTEM_CHROME_EXECUTABLES = [
+    "/usr/bin/google-chrome-stable",
+    "/usr/bin/google-chrome",
+    "/usr/bin/chromium",
+    "/usr/bin/chromium-browser",
+];
+async function launchChromium(chromium) {
+    const launchOptions = {
+        headless: true,
+        args: ["--no-sandbox", "--disable-dev-shm-usage"],
+    };
+    let missingBrowserError;
+    try {
+        return await chromium.launch(launchOptions);
+    }
+    catch (error) {
+        if (!isMissingBrowserError(error))
+            throw error;
+        missingBrowserError = error;
+    }
+    const serverlessChromium = await loadOptionalServerlessChromium();
+    if (serverlessChromium) {
+        try {
+            const executablePath = await serverlessChromium.executablePath();
+            if (executablePath) {
+                return await chromium.launch({
+                    ...launchOptions,
+                    args: [...launchOptions.args, ...(serverlessChromium.args ?? [])],
+                    executablePath,
+                });
+            }
+        }
+        catch (error) {
+            if (!isMissingBrowserError(error))
+                throw error;
+            missingBrowserError = error;
+        }
+    }
+    for (const executablePath of SYSTEM_CHROME_EXECUTABLES) {
+        if (!existsSync(executablePath))
+            continue;
+        try {
+            return await chromium.launch({ ...launchOptions, executablePath });
+        }
+        catch {
+            continue;
+        }
+    }
+    if (missingBrowserError) {
+        throw missingBrowserError;
+    }
+    throw new Error("No Chromium executable is available for browser extraction.");
+}
+async function loadOptionalServerlessChromium() {
+    const specifier = "@sparticuz/chromium";
+    try {
+        const module = (await import(/* @vite-ignore */ specifier));
+        const chromium = module.default ?? module;
+        return typeof chromium.executablePath === "function"
+            ? chromium
+            : null;
+    }
+    catch {
+        // coercion-ok: this optional capability is absent in non-serverless installs.
+        return null;
+    }
+}
+/*
+ * Kept separate from Playwright loading so a deployment can omit the large
+ * serverless Chromium package and still use Builder Browser or system Chrome.
+ */
+async function loadOptionalPlaywright() {
+    for (const specifier of [
+        "playwright",
+        "@playwright/test",
+        "playwright-core",
+    ]) {
+        try {
+            const module = (await import(
+            /* @vite-ignore */ specifier));
+            for (const candidate of [module.default, module]) {
+                if (typeof candidate?.chromium?.launch === "function") {
+                    return candidate;
+                }
+            }
+            // coercion-ok: an absent optional package means the next compatible probe should run.
+        }
+        catch {
+            // Try the next compatible browser package before falling back to HTML.
+        }
+    }
+    // coercion-ok: browser packages are optional in non-Node runtimes.
+    return null;
+}
+async function defaultBuilderBrowserRequest(input) {
+    const server = (await import("@agent-native/core/server"));
+    if (!server.requestBuilderBrowserConnection) {
+        throw new Error("@agent-native/core/server does not export requestBuilderBrowserConnection.");
+    }
+    return server.requestBuilderBrowserConnection(input);
+}
+function isMissingBrowserError(error) {
+    const message = error instanceof Error ? error.message : String(error);
+    return /Executable doesn't exist|playwright install|browser.*not found|chromium.*not found/i.test(message);
+}
+/** Close common consent banners without accepting tracking or changing page data. */
+function dismissConsentOverlays() {
+    const selectors = [
+        '[aria-label*="reject" i]',
+        '[aria-label*="decline" i]',
+        '[aria-label*="close" i]',
+        '[data-testid*="reject" i]',
+        '[data-testid*="decline" i]',
+        '[data-testid*="close" i]',
+        'button[id*="reject" i]',
+        'button[id*="decline" i]',
+        'button[class*="reject" i]',
+        'button[class*="decline" i]',
+    ];
+    for (const selector of selectors) {
+        const element = document.querySelector(selector);
+        if (!element)
+            continue;
+        const rect = element.getBoundingClientRect();
+        const style = getComputedStyle(element);
+        if (rect.width > 0 &&
+            rect.height > 0 &&
+            style.visibility !== "hidden" &&
+            style.display !== "none") {
+            element.click();
+            return;
+        }
+    }
 }
 async function renderStatic(request, warnings, fetcher) {
     const response = await fetcher(request.url, {
@@ -264,22 +612,6 @@ async function assertPublicBrowserUrl(value) {
         throw new Error("SSRF blocked: website resolved to a private/internal host.");
     }
 }
-async function defaultBuilderBrowserRequest(input) {
-    const server = (await import("@agent-native/core/server"));
-    if (!server.requestBuilderBrowserConnection) {
-        throw new Error("@agent-native/core/server does not export requestBuilderBrowserConnection.");
-    }
-    return server.requestBuilderBrowserConnection(input);
-}
-async function loadOptionalPlaywright() {
-    const specifier = "playwright";
-    try {
-        return (await import(specifier));
-    }
-    catch {
-        return null;
-    }
-}
 function captureRenderedWebsiteContext() {
     const MAX_ASSETS = 500;
     const MAX_LINKS = 500;
@@ -287,15 +619,148 @@ function captureRenderedWebsiteContext() {
     const MAX_TYPE_STYLES = 100;
     const MAX_SPACING_VALUES = 100;
     const MAX_RADIUS_VALUES = 64;
+    const MAX_SHADOWS = 32;
+    const MAX_BACKGROUNDS = 32;
     const MAX_VARIABLES = 128;
     const MAX_TEXT = 2_000_000;
+    const MAX_COMPONENT_STYLES = 24;
     const assets = new Map();
     const links = new Set();
     const colors = [];
     const typography = new Map();
     const spacing = new Set();
     const radii = new Set();
+    const shadows = new Set();
+    const backgrounds = new Set();
+    const components = [];
     const cssVariables = {};
+    const semanticColors = {};
+    const isOpaque = (value) => {
+        const normalized = value.trim().toLowerCase();
+        if (!normalized || normalized === "transparent")
+            return false;
+        const functionBody = normalized.match(/^[a-z-]+\((.*)\)$/)?.[1];
+        if (!functionBody)
+            return true;
+        const alphaValue = functionBody.includes("/")
+            ? functionBody.split("/").at(-1)?.trim()
+            : functionBody.split(",").length === 4
+                ? functionBody.split(",").at(-1)?.trim()
+                : undefined;
+        if (!alphaValue)
+            return true;
+        const alpha = alphaValue.endsWith("%")
+            ? Number.parseFloat(alphaValue) / 100
+            : Number.parseFloat(alphaValue);
+        return Number.isNaN(alpha) || alpha > 0.02;
+    };
+    const addColor = (value) => {
+        if (colors.length >= MAX_COLOR_VALUES || !isOpaque(value))
+            return;
+        const normalized = value.trim();
+        if (!colors.includes(normalized))
+            colors.push(normalized);
+    };
+    const visible = (element) => {
+        const style = getComputedStyle(element);
+        const rect = element.getBoundingClientRect();
+        return (rect.width > 0 &&
+            rect.height > 0 &&
+            style.display !== "none" &&
+            style.visibility !== "hidden" &&
+            Number(style.opacity || 1) > 0.02);
+    };
+    const firstVisible = (selector) => Array.from(document.querySelectorAll(selector)).find(visible);
+    const opaqueValue = (value) => isOpaque(value) ? value.trim() : undefined;
+    const recordComputedStyle = (element, role) => {
+        const style = getComputedStyle(element);
+        const values = [
+            style.color,
+            style.backgroundColor,
+            style.borderTopColor,
+            style.borderRightColor,
+            style.borderBottomColor,
+            style.borderLeftColor,
+        ];
+        values.forEach(addColor);
+        if (style.boxShadow && style.boxShadow !== "none") {
+            if (shadows.size < MAX_SHADOWS)
+                shadows.add(style.boxShadow);
+        }
+        if (style.backgroundImage && style.backgroundImage !== "none") {
+            if (backgrounds.size < MAX_BACKGROUNDS) {
+                backgrounds.add(style.backgroundImage);
+            }
+        }
+        for (const value of [
+            style.marginTop,
+            style.marginRight,
+            style.marginBottom,
+            style.marginLeft,
+            style.paddingTop,
+            style.paddingRight,
+            style.paddingBottom,
+            style.paddingLeft,
+            style.gap,
+            style.rowGap,
+            style.columnGap,
+        ]) {
+            if (spacing.size < MAX_SPACING_VALUES &&
+                value &&
+                value !== "0px" &&
+                value !== "normal") {
+                spacing.add(value);
+            }
+        }
+        for (const value of [
+            style.borderTopLeftRadius,
+            style.borderTopRightRadius,
+            style.borderBottomRightRadius,
+            style.borderBottomLeftRadius,
+        ]) {
+            if (radii.size < MAX_RADIUS_VALUES && value && value !== "0px") {
+                radii.add(value);
+            }
+        }
+        const type = {
+            family: style.fontFamily,
+            size: style.fontSize,
+            weight: style.fontWeight,
+            lineHeight: style.lineHeight,
+            letterSpacing: style.letterSpacing,
+        };
+        if (typography.size < MAX_TYPE_STYLES && type.family) {
+            typography.set(JSON.stringify(type), type);
+        }
+        if (!role || components.length >= MAX_COMPONENT_STYLES)
+            return style;
+        components.push({
+            role,
+            fontFamily: style.fontFamily,
+            fontSize: style.fontSize,
+            fontWeight: style.fontWeight,
+            lineHeight: style.lineHeight,
+            letterSpacing: style.letterSpacing,
+            color: opaqueValue(style.color),
+            backgroundColor: opaqueValue(style.backgroundColor),
+            backgroundImage: style.backgroundImage !== "none" ? style.backgroundImage : undefined,
+            border: style.borderStyle !== "none" && style.borderWidth !== "0px"
+                ? style.border
+                : undefined,
+            borderRadius: style.borderTopLeftRadius !== "0px" ? style.borderRadius : undefined,
+            boxShadow: style.boxShadow !== "none" ? style.boxShadow : undefined,
+            padding: style.padding !== "0px" ? style.padding : undefined,
+            gap: style.gap !== "normal" ? style.gap : undefined,
+            textTransform: style.textTransform !== "none" ? style.textTransform : undefined,
+        });
+        return style;
+    };
+    const styleFor = (selector, role) => {
+        const element = firstVisible(selector);
+        if (!element)
+            return undefined;
+        return recordComputedStyle(element, role);
+    };
     const addAsset = (raw, kind, role) => {
         if (!raw || assets.size >= MAX_ASSETS)
             return;
@@ -374,52 +839,67 @@ function captureRenderedWebsiteContext() {
             }
         }
     }
-    const elements = Array.from(document.querySelectorAll("body *")).slice(0, 500);
+    const bodyStyle = document.body
+        ? recordComputedStyle(document.body)
+        : undefined;
+    const rootBackground = opaqueValue(rootStyle.backgroundColor);
+    const bodyBackground = bodyStyle
+        ? opaqueValue(bodyStyle.backgroundColor)
+        : undefined;
+    const headingStyle = styleFor("h1, h2, h3", "heading");
+    const textStyle = styleFor("p, li, label, body", "body");
+    const buttonStyle = styleFor('button, [role="button"], input[type="submit"], a[class*="button" i], a[class*="cta" i]', "button");
+    const linkStyle = styleFor("a[href]", "link");
+    const cardStyle = styleFor('article, [class*="card" i], [class*="panel" i], [class*="surface" i], section', "card");
+    styleFor("input, textarea, select", "input");
+    styleFor("nav, header", "nav");
+    styleFor('main, [class*="hero" i]', "hero");
+    const setSemantic = (role, value) => {
+        if (value)
+            semanticColors[role] = value;
+    };
+    setSemantic("background", bodyBackground ?? rootBackground);
+    setSemantic("surface", cardStyle ? opaqueValue(cardStyle.backgroundColor) : undefined);
+    setSemantic("text", textStyle ? opaqueValue(textStyle.color) : undefined);
+    const mutedElement = firstVisible("small, figcaption, [class*='muted' i]");
+    setSemantic("textMuted", mutedElement
+        ? opaqueValue(getComputedStyle(mutedElement).color)
+        : undefined);
+    setSemantic("accent", linkStyle
+        ? opaqueValue(linkStyle.color)
+        : buttonStyle
+            ? opaqueValue(buttonStyle.backgroundColor)
+            : undefined);
+    setSemantic("primary", buttonStyle
+        ? (opaqueValue(buttonStyle.backgroundColor) ??
+            opaqueValue(buttonStyle.color))
+        : colors[0]);
+    setSemantic("secondary", semanticColors.surface ?? colors[1] ?? semanticColors.background);
+    const layoutElement = firstVisible("main, [role='main'], body > div");
+    const layoutStyle = layoutElement
+        ? getComputedStyle(layoutElement)
+        : undefined;
+    const layoutRect = layoutElement?.getBoundingClientRect();
+    const layout = {
+        contentWidth: layoutStyle?.maxWidth && layoutStyle.maxWidth !== "none"
+            ? layoutStyle.maxWidth
+            : layoutRect && layoutRect.width > 0
+                ? `${Math.round(layoutRect.width)}px`
+                : undefined,
+        pagePadding: bodyStyle?.padding && bodyStyle.padding !== "0px"
+            ? bodyStyle.padding
+            : undefined,
+        sectionGap: firstVisible("section, article") &&
+            getComputedStyle(firstVisible("section, article")).gap !== "normal" &&
+            getComputedStyle(firstVisible("section, article")).gap !== "0px"
+            ? getComputedStyle(firstVisible("section, article")).gap
+            : undefined,
+    };
+    const elements = Array.from(document.querySelectorAll("body *"))
+        .filter(visible)
+        .slice(0, 700);
     for (const element of elements) {
-        const style = getComputedStyle(element);
-        if (colors.length < MAX_COLOR_VALUES) {
-            colors.push(style.color, style.backgroundColor, style.borderTopColor, style.borderRightColor, style.borderBottomColor, style.borderLeftColor);
-        }
-        const type = {
-            family: style.fontFamily,
-            size: style.fontSize,
-            weight: style.fontWeight,
-            lineHeight: style.lineHeight,
-            letterSpacing: style.letterSpacing,
-        };
-        if (typography.size < MAX_TYPE_STYLES) {
-            typography.set(JSON.stringify(type), type);
-        }
-        for (const value of [
-            style.marginTop,
-            style.marginRight,
-            style.marginBottom,
-            style.marginLeft,
-            style.paddingTop,
-            style.paddingRight,
-            style.paddingBottom,
-            style.paddingLeft,
-            style.gap,
-            style.rowGap,
-            style.columnGap,
-        ]) {
-            if (spacing.size < MAX_SPACING_VALUES &&
-                value &&
-                value !== "0px" &&
-                value !== "normal") {
-                spacing.add(value);
-            }
-        }
-        for (const value of [
-            style.borderTopLeftRadius,
-            style.borderTopRightRadius,
-            style.borderBottomRightRadius,
-            style.borderBottomLeftRadius,
-        ]) {
-            if (radii.size < MAX_RADIUS_VALUES && value && value !== "0px") {
-                radii.add(value);
-            }
-        }
+        recordComputedStyle(element);
     }
     return {
         title: document.title,
@@ -432,10 +912,21 @@ function captureRenderedWebsiteContext() {
             spacing: [...spacing],
             radii: [...radii],
             cssVariables,
+            semanticColors,
+            shadows: [...shadows],
+            backgrounds: [...backgrounds],
+            components,
+            layout,
         },
     };
 }
 export function boundWebsiteExtraction(extraction) {
+    const boundedComponents = extraction.designTokens.components
+        ?.slice(0, MAX_COMPONENT_STYLES)
+        .map((component) => Object.fromEntries(Object.entries(component).map(([key, value]) => [
+        key,
+        typeof value === "string" ? value.slice(0, 500) : value,
+    ])));
     return {
         title: normalizeWhitespace(extraction.title).slice(0, 500),
         text: normalizeWhitespace(extraction.text).slice(0, MAX_RENDERED_TEXT_CHARS),
@@ -454,6 +945,35 @@ export function boundWebsiteExtraction(extraction) {
             cssVariables: Object.fromEntries(Object.entries(extraction.designTokens.cssVariables)
                 .slice(0, MAX_CSS_VARIABLES)
                 .map(([name, value]) => [name.slice(0, 500), value.slice(0, 4_096)])),
+            ...(extraction.designTokens.semanticColors
+                ? {
+                    semanticColors: Object.fromEntries(Object.entries(extraction.designTokens.semanticColors)
+                        .filter(([, value]) => typeof value === "string" && value)
+                        .map(([name, value]) => [name, value.slice(0, 200)])),
+                }
+                : {}),
+            ...(extraction.designTokens.shadows
+                ? {
+                    shadows: extraction.designTokens.shadows
+                        .slice(0, 32)
+                        .map((value) => value.slice(0, 500)),
+                }
+                : {}),
+            ...(extraction.designTokens.backgrounds
+                ? {
+                    backgrounds: extraction.designTokens.backgrounds
+                        .slice(0, 32)
+                        .map((value) => value.slice(0, 500)),
+                }
+                : {}),
+            ...(boundedComponents ? { components: boundedComponents } : {}),
+            ...(extraction.designTokens.layout
+                ? {
+                    layout: Object.fromEntries(Object.entries(extraction.designTokens.layout)
+                        .filter(([, value]) => typeof value === "string" && value)
+                        .map(([name, value]) => [name, value.slice(0, 200)])),
+                }
+                : {}),
         },
     };
 }
@@ -495,9 +1015,6 @@ function boundedTimeout(value) {
 function boundedScreenshot(value) {
     return value.byteLength <= MAX_SCREENSHOT_BYTES ? value : undefined;
 }
-function stringValue(value) {
-    return typeof value === "string" && value.trim() ? value.trim() : undefined;
-}
 function errorMessage(error) {
     return error instanceof Error ? error.message : String(error);
 }