autokap 1.0.6 → 1.0.8

package/dist/browser-bar.js

@@ -0,0 +1,284 @@
+/**
+ * Browser bar — dispatches between coded browser chrome styles (Chrome, Safari, …).
+ *
+ * Chrome: pixel-perfect from toolbar4.svg (ref 2160×129, two-row layout).
+ * Safari: ref 1500×52, single-row toolbar with SF Pro Symbols icons.
+ *
+ * Dynamic content (page title, URL, favicon) overlaid as HTML.
+ * SF Pro embedded fonts for cross-OS rendering.
+ */
+import { SF_PRO_TEXT_REGULAR, SF_PRO_TEXT_SEMIBOLD, } from './sf-pro-fonts.js';
+import { generateSafariBrowserBarHtml, generateSafariBrowserBarSvg, } from './safari-browser-bar.js';
+// ── Dispatcher ───────────────────────────────────────────────────────────
+export function generateBrowserBarHtml(options) {
+    return options.config.style === 'safari'
+        ? generateSafariBrowserBarHtml(options)
+        : generateChromeBrowserBarHtml(options);
+}
+export function generateBrowserBarSvg(options) {
+    return options.config.style === 'safari'
+        ? generateSafariBrowserBarSvg(options)
+        : generateChromeBrowserBarSvg(options);
+}
+// ── SF Pro ───────────────────────────────────────────────────────────────
+const SF = `<style>
+@font-face{font-family:'SF Pro Text';src:local('SF Pro Text'),local('.SFNSText'),url('${SF_PRO_TEXT_REGULAR}') format('woff2');font-weight:400;font-style:normal}
+@font-face{font-family:'SF Pro Text';src:local('SF Pro Text Semibold'),local('.SFNSText-Semibold'),url('${SF_PRO_TEXT_SEMIBOLD}') format('woff2');font-weight:600;font-style:normal}
+</style>`;
+const FF = "'SF Pro Text',-apple-system,BlinkMacSystemFont,system-ui,sans-serif";
+// ── Reference ────────────────────────────────────────────────────────────
+const REF_W = 2160;
+const REF_H = 129; // SVG viewBox height (includes 1.5px bottom border)
+// Right margins (distance from right edge at ref width 2160)
+const TAB_OVERFLOW_MR = 51; // tab overflow rect x=2109 → margin 51
+const ADDR_BAR_ML = 174; // address bar left x (was 234 with home icon)
+const ADDR_BAR_MR = 126; // address bar right margin (2160-2034)
+const PROFILE_MR = 102; // profile rect x=2058 → margin 102
+const EAR_R_MR = 16.5; // right ear margin
+// ── Chrome generator (HTML) ──────────────────────────────────────────────
+export function generateChromeBrowserBarHtml(options) {
+    const { config, width, height, pixelScale = 1 } = options;
+    const title = esc(config.pageTitle || 'New Tab');
+    const rawUrl = config.url || 'example.com';
+    const url = esc(rawUrl.replace(/^https?:\/\//, '').replace(/\/$/, ''));
+    const icon = config.tabIconUrl;
+    const isDark = config.colorScheme === 'dark';
+    // Scale: fit reference height into target height
+    const s = height / REF_H;
+    const iw = Math.round(width / s); // internal width at reference scale
+    const ts = s * pixelScale;
+    // Dynamic right-anchored positions
+    const dx = iw - REF_W; // offset for right-anchored elements
+    const tabOverflowX = iw - TAB_OVERFLOW_MR;
+    const addrBarW = iw - ADDR_BAR_ML - ADDR_BAR_MR;
+    const profileX = iw - PROFILE_MR;
+    const earRX = iw - EAR_R_MR;
+    // Color tokens: light ↔ dark
+    const tabStripBg = isDark ? '#1F2020' : '#DEDEDE';
+    const tabBg = isDark ? '#3C3C3C' : '#FFFFFF';
+    const toolbarBg = isDark ? '#3C3C3C' : '#FFFFFF';
+    const addrBarBg = isDark ? '#282828' : '#F1F1F1';
+    const addrIconBg = isDark ? '#3C3C3C' : '#FFFFFF';
+    const borderColor = isDark ? '#454746' : '#CFCFCF';
+    const textColor = isDark ? '#E3E3E3' : '#1D1D1D';
+    const textSec = isDark ? '#C7C7C7' : '#5F6368';
+    const iconActive = isDark ? '#C7C7C7' : '#5F6368';
+    const iconDis = isDark ? '#7B7B7B' : '#BBBFC4';
+    // Tab favicon overlay — aligned with close X center (y=30, icon 24px → top=18)
+    const tabFaviconOverlay = icon
+        ? `<div style="position:absolute;left:152px;top:18px;width:24px;height:24px;display:flex;align-items:center;justify-content:center"><img src="${attr(icon)}" style="width:21px;height:21px;border-radius:4px;object-fit:contain" alt=""></div>`
+        : `<div style="position:absolute;left:152px;top:18px;width:24px;height:24px;display:flex;align-items:center;justify-content:center"><svg width="21" height="21" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="${iconActive}" stroke-width="1.2"/><ellipse cx="8" cy="8" rx="3" ry="6.5" stroke="${iconActive}" stroke-width="1.2"/><line x1="1.5" y1="8" x2="14.5" y2="8" stroke="${iconActive}" stroke-width="1.2"/></svg></div>`;
+    return `${SF}<div style="width:${iw}px;height:${REF_H}px;position:relative;transform:scale(${ts});transform-origin:top left;font-family:${FF};overflow:hidden">
+<svg width="${iw}" height="${REF_H}" viewBox="0 0 ${iw} ${REF_H}" fill="none" xmlns="http://www.w3.org/2000/svg">
+<!-- TAB STRIP -->
+<g>
+<rect width="${iw}" height="60" fill="${tabStripBg}"/>
+<!-- Traffic lights -->
+<circle cx="40.5" cy="30.75" r="9" fill="#EC6A5E"/>
+<circle cx="40.5" cy="30.75" r="8.25" stroke="#1F1F1F" stroke-opacity="0.06" stroke-width="1.5"/>
+<circle cx="70.5" cy="30.75" r="9" fill="#F4BF4F"/>
+<circle cx="70.5" cy="30.75" r="8.25" stroke="#1F1F1F" stroke-opacity="0.06" stroke-width="1.5"/>
+<circle cx="100.5" cy="30.75" r="9" fill="#61C554"/>
+<circle cx="100.5" cy="30.75" r="8.25" stroke="#1F1F1F" stroke-opacity="0.06" stroke-width="1.5"/>
+<!-- Left ear -->
+<path d="M120 60C129.941 60 138 51.9411 138 42V60H120Z" fill="${tabBg}"/>
+<!-- Active tab -->
+<path d="M138 24C138 15.7157 144.716 9 153 9H471C479.284 9 486 15.7157 486 24V60H138V24Z" fill="${tabBg}"/>
+<!-- Close X -->
+<path d="M457.668 35.5689L456.431 34.3314L460.762 30.0001L456.431 25.6689L457.668 24.4314L461.999 28.7626L466.331 24.4314L467.568 25.6689L463.237 30.0001L467.568 34.3314L466.331 35.5689L461.999 31.2376L457.668 35.5689Z" fill="${textColor}"/>
+<!-- Right ear -->
+<path d="M504 60C494.059 60 486 51.9411 486 42V60H504Z" fill="${tabBg}"/>
+<!-- New tab + -->
+<path d="M513.327 31.1749H506.877V28.8249H513.327V22.3499H515.677V28.8249H522.152V31.1749H515.677V37.6249H513.327V31.1749Z" fill="${iconActive}"/>
+<!-- Tab overflow (right-anchored) -->
+<rect x="${tabOverflowX}" y="9" width="42" height="42" rx="15" fill="${tabBg}"/>
+<path d="M${tabOverflowX + 21} 33.95L${tabOverflowX + 14.4} 27.35L${tabOverflowX + 16.07} 25.675L${tabOverflowX + 21} 30.625L${tabOverflowX + 25.92} 25.7L${tabOverflowX + 27.6} 27.375L${tabOverflowX + 21} 33.95Z" fill="${textColor}"/>
+</g>
+<!-- BOTTOM EARS -->
+<path d="M16.5 60C7.3873 60 0 67.3873 0 76.5V60H16.5Z" fill="${tabStripBg}"/>
+<path d="M${earRX} 60C${earRX + 9.11} 60 ${iw} 67.3873 ${iw} 76.5V60H${earRX}Z" fill="${tabStripBg}"/>
+<!-- TOOLBAR -->
+<g clip-path="url(#bb_clip_toolbar)">
+<path d="M0 76C0 67.1634 7.16344 60 16 60H${iw - 16}C${iw - 7.16} 60 ${iw} 67.1634 ${iw} 76V129H0V76Z" fill="${toolbarBg}"/>
+<!-- Back arrow -->
+<path d="M28.3125 95.625L34.5938 101.906L33 103.5L24 94.5L33 85.5L34.5938 87.0938L28.3125 93.375H42V95.625H28.3125Z" fill="${iconDis}"/>
+<!-- Forward arrow -->
+<path d="M91.6875 95.625L85.4062 101.906L87 103.5L96 94.5L87 85.5L85.4062 87.0938L91.6875 93.375H78V95.625H91.6875Z" fill="${iconDis}"/>
+<!-- Reload -->
+<path d="M141 103.5C138.5 103.5 136.375 102.625 134.625 100.875C132.875 99.125 132 97 132 94.5C132 92 132.875 89.875 134.625 88.125C136.375 86.375 138.5 85.5 141 85.5C142.354 85.5 143.609 85.7812 144.766 86.3438C145.922 86.9062 146.917 87.6562 147.75 88.5938V85.5H150V93H142.5V90.75H146.594C145.99 89.8333 145.198 89.1042 144.219 88.5625C143.24 88.0208 142.167 87.75 141 87.75C139.125 87.75 137.531 88.4062 136.219 89.7188C134.906 91.0312 134.25 92.625 134.25 94.5C134.25 96.375 134.906 97.9688 136.219 99.2812C137.531 100.594 139.125 101.25 141 101.25C142.75 101.25 144.25 100.672 145.5 99.5156C146.75 98.3594 147.469 96.9375 147.656 95.25H149.969C149.781 97.5833 148.833 99.5417 147.125 101.125C145.417 102.708 143.375 103.5 141 103.5Z" fill="${iconActive}"/>
+<!-- Address bar pill (dynamic width) -->
+<rect x="${ADDR_BAR_ML}" y="69" width="${addrBarW}" height="51" rx="25.5" fill="${addrBarBg}"/>
+<!-- Site icon circle -->
+<rect x="${ADDR_BAR_ML + 7.5}" y="76.5" width="36" height="36" rx="18" fill="${addrIconBg}"/>
+<!-- Control center / sliders icon (from Union.svg, scaled to 18×18 and centered in the 36×36 circle) -->
+<g transform="translate(${ADDR_BAR_ML + 16.5},${76.5 + 9}) scale(1.5)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 6.70898C10.8806 6.70898 11.9998 7.82848 12 9.20898C12 10.5897 10.8807 11.709 9.5 11.709C8.11929 11.709 7 10.5897 7 9.20898C7.00024 7.82848 8.11944 6.70898 9.5 6.70898ZM9.5 8.20898C8.94786 8.20898 8.50024 8.6569 8.5 9.20898C8.5 9.76127 8.94772 10.209 9.5 10.209C10.0523 10.209 10.5 9.76127 10.5 9.20898C10.4998 8.6569 10.0521 8.20898 9.5 8.20898Z" fill="${iconActive}"/>
+<path d="M6 10H0V8.5H6V10Z" fill="${iconActive}"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 0C3.88071 0 5 1.11929 5 2.5C5 3.88071 3.88071 5 2.5 5C1.11929 5 0 3.88071 0 2.5C0 1.11929 1.11929 0 2.5 0ZM2.5 1.5C1.94772 1.5 1.5 1.94772 1.5 2.5C1.5 3.05228 1.94772 3.5 2.5 3.5C3.05228 3.5 3.5 3.05228 3.5 2.5C3.5 1.94772 3.05228 1.5 2.5 1.5Z" fill="${iconActive}"/>
+<path d="M12 3.20898H6V1.70898H12V3.20898Z" fill="${iconActive}"/>
+</g>
+<!-- Star (right-anchored) -->
+<path transform="translate(${dx},0)" d="M1994 100.344L1998 97.9688L2002.03 100.344L2000.97 95.8438L2004.44 92.875L1999.84 92.4688L1998 88.1875L1996.16 92.4688L1991.56 92.875L1995.06 95.8438L1994 100.344ZM1990.59 105L1992.56 96.6875L1986 91.0938L1994.62 90.3438L1998 82.5L2001.38 90.375L2010 91.0938L2003.44 96.6875L2005.41 105L1998 100.594L1990.59 105Z" fill="${iconActive}"/>
+<!-- Profile avatar (right-anchored) -->
+<rect x="${profileX}" y="79.5" width="30" height="30" rx="15" fill="url(#bb_profile_grad)"/>
+<rect x="${profileX + 0.75}" y="80.25" width="28.5" height="28.5" rx="14.25" stroke="#1F1F1F" stroke-opacity="0.06" stroke-width="1.5"/>
+<!-- Extensions dots (right-anchored) -->
+<path transform="translate(${dx},0)" d="M2127 105.404C2126.38 105.404 2125.85 105.183 2125.41 104.743C2124.97 104.302 2124.75 103.773 2124.75 103.154C2124.75 102.535 2124.97 102.005 2125.41 101.565C2125.85 101.124 2126.38 100.904 2127 100.904C2127.62 100.904 2128.15 101.124 2128.59 101.565C2129.03 102.005 2129.25 102.535 2129.25 103.154C2129.25 103.773 2129.03 104.302 2128.59 104.743C2128.15 105.183 2127.62 105.404 2127 105.404ZM2127 96.7499C2126.38 96.7499 2125.85 96.5296 2125.41 96.089C2124.97 95.6484 2124.75 95.1187 2124.75 94.5C2124.75 93.8812 2124.97 93.3516 2125.41 92.9109C2125.85 92.4703 2126.38 92.25 2127 92.25C2127.62 92.25 2128.15 92.4703 2128.59 92.9109C2129.03 93.3516 2129.25 93.8812 2129.25 94.5C2129.25 95.1187 2129.03 95.6484 2128.59 96.089C2128.15 96.5296 2127.62 96.7499 2127 96.7499ZM2127 88.0961C2126.38 88.0961 2125.85 87.8758 2125.41 87.4351C2124.97 86.9945 2124.75 86.4649 2124.75 85.8461C2124.75 85.2274 2124.97 84.6977 2125.41 84.2571C2125.85 83.8165 2126.38 83.5962 2127 83.5962C2127.62 83.5962 2128.15 83.8165 2128.59 84.2571C2129.03 84.6977 2129.25 85.2274 2129.25 85.8461C2129.25 86.4649 2129.03 86.9945 2128.59 87.4351C2128.15 87.8758 2127.62 88.0961 2127 88.0961Z" fill="${iconActive}"/>
+</g>
+<!-- TOOLBAR BORDER -->
+<path d="M0 60H${iw}H0M${iw} 130.5H0V127.5H${iw}V130.5ZM${iw} 127.5M0 129V60V129M0 129M${iw} 60V129V60" fill="${borderColor}" mask="url(#bb_mask_toolbar)"/>
+<!-- DEFS -->
+<defs>
+<linearGradient id="bb_profile_grad" x1="${profileX + 15}" y1="109.5" x2="${profileX + 15}" y2="79.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D5D8E4"/><stop offset="0.45" stop-color="#D1CAD6"/><stop offset="1" stop-color="#B7BAD1"/>
+</linearGradient>
+<mask id="bb_mask_toolbar" fill="white">
+<path d="M0 76C0 67.1634 7.16344 60 16 60H${iw - 16}C${iw - 7.16} 60 ${iw} 67.1634 ${iw} 76V129H0V76Z"/>
+</mask>
+<clipPath id="bb_clip_toolbar">
+<path d="M0 76C0 67.1634 7.16344 60 16 60H${iw - 16}C${iw - 7.16} 60 ${iw} 67.1634 ${iw} 76V129H0V76Z"/>
+</clipPath>
+</defs>
+</svg>
+<!-- DYNAMIC OVERLAYS -->
+${tabFaviconOverlay}
+<div style="position:absolute;left:187px;top:15px;width:260px;height:30px;display:flex;align-items:center;overflow:hidden;-webkit-mask-image:linear-gradient(to right,#000 85%,transparent 100%);mask-image:linear-gradient(to right,#000 85%,transparent 100%)"><span style="font-size:18px;font-weight:400;color:${textColor};white-space:nowrap;line-height:30px">${title}</span></div>
+<div style="position:absolute;left:${ADDR_BAR_ML + 58}px;top:69px;right:${iw - (ADDR_BAR_ML + addrBarW - 18)}px;height:51px;display:flex;align-items:center;overflow:hidden"><span style="font-size:19.5px;font-weight:400;color:${textSec};white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:30px">${url}</span></div>
+</div>`;
+}
+// ── Helpers ───────────────────────────────────────────────────────────────
+function esc(s) {
+    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+function attr(s) {
+    return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+}
+// ── Chrome generator (SVG, for sharp compositing — no Playwright) ──────
+// Produces a self-contained SVG string rasterizable by @resvg/resvg-js.
+/** SF Pro font CSS for embedding inside SVG <defs><style>. No local() — resvg only supports url(). */
+const SVG_BB_FONT_CSS = `
+@font-face{font-family:'SF Pro Text';src:url('${SF_PRO_TEXT_REGULAR}') format('woff2');font-weight:400;font-style:normal}
+@font-face{font-family:'SF Pro Text';src:url('${SF_PRO_TEXT_SEMIBOLD}') format('woff2');font-weight:600;font-style:normal}
+`;
+const SVG_BB_FF = "'SF Pro Text',system-ui,sans-serif";
+/**
+ * Generate a self-contained SVG string for the Chrome browser bar.
+ * Used by the sharp compositing pipeline (no Playwright).
+ * Returns an SVG at the target width×height with embedded fonts.
+ */
+export function generateChromeBrowserBarSvg(options) {
+    const { config, width, height } = options;
+    const title = esc(config.pageTitle || 'New Tab');
+    const rawUrl = config.url || 'example.com';
+    const url = esc(rawUrl.replace(/^https?:\/\//, '').replace(/\/$/, ''));
+    const icon = config.tabIconUrl;
+    const isDark = config.colorScheme === 'dark';
+    // Scale: fit reference height into target height
+    const s = height / REF_H;
+    const iw = Math.round(width / s);
+    // Dynamic right-anchored positions
+    const dx = iw - REF_W;
+    const tabOverflowX = iw - TAB_OVERFLOW_MR;
+    const addrBarW = iw - ADDR_BAR_ML - ADDR_BAR_MR;
+    const profileX = iw - PROFILE_MR;
+    const earRX = iw - EAR_R_MR;
+    // Color tokens
+    const tabStripBg = isDark ? '#1F2020' : '#DEDEDE';
+    const tabBg = isDark ? '#3C3C3C' : '#FFFFFF';
+    const toolbarBg = isDark ? '#3C3C3C' : '#FFFFFF';
+    const addrBarBg = isDark ? '#282828' : '#F1F1F1';
+    const addrIconBg = isDark ? '#3C3C3C' : '#FFFFFF';
+    const borderColor = isDark ? '#454746' : '#CFCFCF';
+    const textColor = isDark ? '#E3E3E3' : '#1D1D1D';
+    const textSec = isDark ? '#C7C7C7' : '#5F6368';
+    const iconActive = isDark ? '#C7C7C7' : '#5F6368';
+    const iconDis = isDark ? '#7B7B7B' : '#BBBFC4';
+    // Tab favicon — inline SVG globe fallback (no <img> in pure SVG)
+    const tabFavicon = icon
+        ? `<image href="${attr(icon)}" x="153.5" y="19.5" width="21" height="21" preserveAspectRatio="xMidYMid meet"/>`
+        : `<g transform="translate(152,18)"><svg width="24" height="24" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="${iconActive}" stroke-width="1.2"/><ellipse cx="8" cy="8" rx="3" ry="6.5" stroke="${iconActive}" stroke-width="1.2"/><line x1="1.5" y1="8" x2="14.5" y2="8" stroke="${iconActive}" stroke-width="1.2"/></svg></g>`;
+    // Page title — clipPath with gradient mask for fade-out
+    const titleClipId = 'bb_svg_title_clip';
+    const titleMaskId = 'bb_svg_title_mask';
+    const titleGradId = 'bb_svg_title_grad';
+    const titleX = 187;
+    const titleY = 15;
+    const titleW = 260;
+    const titleH = 30;
+    // URL in address bar
+    const urlX = ADDR_BAR_ML + 58;
+    const urlW = addrBarW - 58 - 18;
+    const urlClipId = 'bb_svg_url_clip';
+    // Build the full SVG at reference dimensions, then use viewBox to scale.
+    // fill="none" is critical — without it, elements that only define stroke
+    // (e.g. traffic light border circles) inherit the default fill="black"
+    // and hide the colored circles underneath.
+    return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${width}" height="${height}" viewBox="0 0 ${iw} ${REF_H}" fill="none">
+<defs>
+<style>${SVG_BB_FONT_CSS}</style>
+<linearGradient id="bb_profile_grad" x1="${profileX + 15}" y1="109.5" x2="${profileX + 15}" y2="79.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D5D8E4"/><stop offset="0.45" stop-color="#D1CAD6"/><stop offset="1" stop-color="#B7BAD1"/>
+</linearGradient>
+<mask id="bb_mask_toolbar" fill="white">
+<path d="M0 76C0 67.1634 7.16344 60 16 60H${iw - 16}C${iw - 7.16} 60 ${iw} 67.1634 ${iw} 76V129H0V76Z"/>
+</mask>
+<clipPath id="bb_clip_toolbar">
+<path d="M0 76C0 67.1634 7.16344 60 16 60H${iw - 16}C${iw - 7.16} 60 ${iw} 67.1634 ${iw} 76V129H0V76Z"/>
+</clipPath>
+<clipPath id="${titleClipId}"><rect x="${titleX}" y="${titleY}" width="${titleW}" height="${titleH}"/></clipPath>
+<linearGradient id="${titleGradId}" x1="${titleX}" y1="0" x2="${titleX + titleW}" y2="0" gradientUnits="userSpaceOnUse">
+<stop offset="0.85" stop-color="white"/><stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<mask id="${titleMaskId}"><rect x="${titleX}" y="${titleY}" width="${titleW}" height="${titleH}" fill="url(#${titleGradId})"/></mask>
+<clipPath id="${urlClipId}"><rect x="${urlX}" y="69" width="${urlW}" height="51"/></clipPath>
+</defs>
+<!-- TAB STRIP -->
+<g>
+<rect width="${iw}" height="60" fill="${tabStripBg}"/>
+<circle cx="40.5" cy="30.75" r="9" fill="#EC6A5E"/>
+<circle cx="40.5" cy="30.75" r="8.25" stroke="#1F1F1F" stroke-opacity="0.06" stroke-width="1.5"/>
+<circle cx="70.5" cy="30.75" r="9" fill="#F4BF4F"/>
+<circle cx="70.5" cy="30.75" r="8.25" stroke="#1F1F1F" stroke-opacity="0.06" stroke-width="1.5"/>
+<circle cx="100.5" cy="30.75" r="9" fill="#61C554"/>
+<circle cx="100.5" cy="30.75" r="8.25" stroke="#1F1F1F" stroke-opacity="0.06" stroke-width="1.5"/>
+<path d="M120 60C129.941 60 138 51.9411 138 42V60H120Z" fill="${tabBg}"/>
+<path d="M138 24C138 15.7157 144.716 9 153 9H471C479.284 9 486 15.7157 486 24V60H138V24Z" fill="${tabBg}"/>
+<path d="M457.668 35.5689L456.431 34.3314L460.762 30.0001L456.431 25.6689L457.668 24.4314L461.999 28.7626L466.331 24.4314L467.568 25.6689L463.237 30.0001L467.568 34.3314L466.331 35.5689L461.999 31.2376L457.668 35.5689Z" fill="${textColor}"/>
+<path d="M504 60C494.059 60 486 51.9411 486 42V60H504Z" fill="${tabBg}"/>
+<path d="M513.327 31.1749H506.877V28.8249H513.327V22.3499H515.677V28.8249H522.152V31.1749H515.677V37.6249H513.327V31.1749Z" fill="${iconActive}"/>
+<rect x="${tabOverflowX}" y="9" width="42" height="42" rx="15" fill="${tabBg}"/>
+<path d="M${tabOverflowX + 21} 33.95L${tabOverflowX + 14.4} 27.35L${tabOverflowX + 16.07} 25.675L${tabOverflowX + 21} 30.625L${tabOverflowX + 25.92} 25.7L${tabOverflowX + 27.6} 27.375L${tabOverflowX + 21} 33.95Z" fill="${textColor}"/>
+</g>
+<!-- BOTTOM EARS -->
+<path d="M16.5 60C7.3873 60 0 67.3873 0 76.5V60H16.5Z" fill="${tabStripBg}"/>
+<path d="M${earRX} 60C${earRX + 9.11} 60 ${iw} 67.3873 ${iw} 76.5V60H${earRX}Z" fill="${tabStripBg}"/>
+<!-- TOOLBAR -->
+<g clip-path="url(#bb_clip_toolbar)">
+<path d="M0 76C0 67.1634 7.16344 60 16 60H${iw - 16}C${iw - 7.16} 60 ${iw} 67.1634 ${iw} 76V129H0V76Z" fill="${toolbarBg}"/>
+<path d="M28.3125 95.625L34.5938 101.906L33 103.5L24 94.5L33 85.5L34.5938 87.0938L28.3125 93.375H42V95.625H28.3125Z" fill="${iconDis}"/>
+<path d="M91.6875 95.625L85.4062 101.906L87 103.5L96 94.5L87 85.5L85.4062 87.0938L91.6875 93.375H78V95.625H91.6875Z" fill="${iconDis}"/>
+<path d="M141 103.5C138.5 103.5 136.375 102.625 134.625 100.875C132.875 99.125 132 97 132 94.5C132 92 132.875 89.875 134.625 88.125C136.375 86.375 138.5 85.5 141 85.5C142.354 85.5 143.609 85.7812 144.766 86.3438C145.922 86.9062 146.917 87.6562 147.75 88.5938V85.5H150V93H142.5V90.75H146.594C145.99 89.8333 145.198 89.1042 144.219 88.5625C143.24 88.0208 142.167 87.75 141 87.75C139.125 87.75 137.531 88.4062 136.219 89.7188C134.906 91.0312 134.25 92.625 134.25 94.5C134.25 96.375 134.906 97.9688 136.219 99.2812C137.531 100.594 139.125 101.25 141 101.25C142.75 101.25 144.25 100.672 145.5 99.5156C146.75 98.3594 147.469 96.9375 147.656 95.25H149.969C149.781 97.5833 148.833 99.5417 147.125 101.125C145.417 102.708 143.375 103.5 141 103.5Z" fill="${iconActive}"/>
+<rect x="${ADDR_BAR_ML}" y="69" width="${addrBarW}" height="51" rx="25.5" fill="${addrBarBg}"/>
+<rect x="${ADDR_BAR_ML + 7.5}" y="76.5" width="36" height="36" rx="18" fill="${addrIconBg}"/>
+<g transform="translate(${ADDR_BAR_ML + 16.5},${76.5 + 9}) scale(1.5)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 6.70898C10.8806 6.70898 11.9998 7.82848 12 9.20898C12 10.5897 10.8807 11.709 9.5 11.709C8.11929 11.709 7 10.5897 7 9.20898C7.00024 7.82848 8.11944 6.70898 9.5 6.70898ZM9.5 8.20898C8.94786 8.20898 8.50024 8.6569 8.5 9.20898C8.5 9.76127 8.94772 10.209 9.5 10.209C10.0523 10.209 10.5 9.76127 10.5 9.20898C10.4998 8.6569 10.0521 8.20898 9.5 8.20898Z" fill="${iconActive}"/>
+<path d="M6 10H0V8.5H6V10Z" fill="${iconActive}"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 0C3.88071 0 5 1.11929 5 2.5C5 3.88071 3.88071 5 2.5 5C1.11929 5 0 3.88071 0 2.5C0 1.11929 1.11929 0 2.5 0ZM2.5 1.5C1.94772 1.5 1.5 1.94772 1.5 2.5C1.5 3.05228 1.94772 3.5 2.5 3.5C3.05228 3.5 3.5 3.05228 3.5 2.5C3.5 1.94772 3.05228 1.5 2.5 1.5Z" fill="${iconActive}"/>
+<path d="M12 3.20898H6V1.70898H12V3.20898Z" fill="${iconActive}"/>
+</g>
+<path transform="translate(${dx},0)" d="M1994 100.344L1998 97.9688L2002.03 100.344L2000.97 95.8438L2004.44 92.875L1999.84 92.4688L1998 88.1875L1996.16 92.4688L1991.56 92.875L1995.06 95.8438L1994 100.344ZM1990.59 105L1992.56 96.6875L1986 91.0938L1994.62 90.3438L1998 82.5L2001.38 90.375L2010 91.0938L2003.44 96.6875L2005.41 105L1998 100.594L1990.59 105Z" fill="${iconActive}"/>
+<rect x="${profileX}" y="79.5" width="30" height="30" rx="15" fill="url(#bb_profile_grad)"/>
+<rect x="${profileX + 0.75}" y="80.25" width="28.5" height="28.5" rx="14.25" stroke="#1F1F1F" stroke-opacity="0.06" stroke-width="1.5"/>
+<path transform="translate(${dx},0)" d="M2127 105.404C2126.38 105.404 2125.85 105.183 2125.41 104.743C2124.97 104.302 2124.75 103.773 2124.75 103.154C2124.75 102.535 2124.97 102.005 2125.41 101.565C2125.85 101.124 2126.38 100.904 2127 100.904C2127.62 100.904 2128.15 101.124 2128.59 101.565C2129.03 102.005 2129.25 102.535 2129.25 103.154C2129.25 103.773 2129.03 104.302 2128.59 104.743C2128.15 105.183 2127.62 105.404 2127 105.404ZM2127 96.7499C2126.38 96.7499 2125.85 96.5296 2125.41 96.089C2124.97 95.6484 2124.75 95.1187 2124.75 94.5C2124.75 93.8812 2124.97 93.3516 2125.41 92.9109C2125.85 92.4703 2126.38 92.25 2127 92.25C2127.62 92.25 2128.15 92.4703 2128.59 92.9109C2129.03 93.3516 2129.25 93.8812 2129.25 94.5C2129.25 95.1187 2129.03 95.6484 2128.59 96.089C2128.15 96.5296 2127.62 96.7499 2127 96.7499ZM2127 88.0961C2126.38 88.0961 2125.85 87.8758 2125.41 87.4351C2124.97 86.9945 2124.75 86.4649 2124.75 85.8461C2124.75 85.2274 2124.97 84.6977 2125.41 84.2571C2125.85 83.8165 2126.38 83.5962 2127 83.5962C2127.62 83.5962 2128.15 83.8165 2128.59 84.2571C2129.03 84.6977 2129.25 85.2274 2129.25 85.8461C2129.25 86.4649 2129.03 86.9945 2128.59 87.4351C2128.15 87.8758 2127.62 88.0961 2127 88.0961Z" fill="${iconActive}"/>
+</g>
+<!-- TOOLBAR BORDER -->
+<path d="M0 60H${iw}H0M${iw} 130.5H0V127.5H${iw}V130.5ZM${iw} 127.5M0 129V60V129M0 129M${iw} 60V129V60" fill="${borderColor}" mask="url(#bb_mask_toolbar)"/>
+<!-- DYNAMIC TEXT OVERLAYS -->
+${tabFavicon}
+<text mask="url(#${titleMaskId})" x="${titleX}" y="${titleY + titleH / 2 + 1}" font-family="${SVG_BB_FF}" font-size="18" font-weight="400" fill="${textColor}" dominant-baseline="central">${title}</text>
+<g clip-path="url(#${urlClipId})">
+<text x="${urlX}" y="${69 + 51 / 2 + 1}" font-family="${SVG_BB_FF}" font-size="19.5" font-weight="400" fill="${textSec}" dominant-baseline="central">${url}</text>
+</g>
+</svg>`;
+}
+//# sourceMappingURL=browser-bar.js.map

package/dist/browser-pool.d.ts

@@ -27,6 +27,13 @@ declare class BrowserPool {
     releaseContext(context: BrowserContext): Promise<void>;
     private ensureBrowser;
     private launchBrowser;
+    /** Read-only snapshot of pool state for monitoring. */
+    getStats(): {
+        activeContexts: number;
+        queueLength: number;
+        captureCount: number;
+        maxConcurrent: number;
+    };
     private restartBrowser;
 }
 /** Shared browser pool for server-side (web API) captures. */

package/dist/browser-pool.js

@@ -1,11 +1,12 @@
 import { chromium } from 'playwright';
 /** Chromium flags for server-side headless operation (used by pool and standalone launches). */
 export const CHROMIUM_ARGS = [
-    // Required on VPS/Docker (Chromium won't run as root without this)
-    '--no-sandbox',
-    '--disable-setuid-sandbox',
-    // Use /tmp instead of /dev/shm — critical on VPS with limited shared memory
-    '--disable-dev-shm-usage',
+    // Linux/Docker-only: required when running Chromium as root or with limited /dev/shm
+    ...(process.platform === 'linux' ? [
+        '--no-sandbox',
+        '--disable-setuid-sandbox',
+        '--disable-dev-shm-usage',
+    ] : []),
     // No GPU on headless servers
     '--disable-gpu',
     '--disable-gpu-sandbox',
@@ -107,6 +108,15 @@ class BrowserPool {
             this.browser = null;
         });
     }
+    /** Read-only snapshot of pool state for monitoring. */
+    getStats() {
+        return {
+            activeContexts: this.activeContexts,
+            queueLength: this.queue.length,
+            captureCount: this.captureCount,
+            maxConcurrent: MAX_CONCURRENT,
+        };
+    }
     async restartBrowser() {
         const old = this.browser;
         this.browser = null;

package/dist/browser-utils.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Standalone utility functions extracted from browser.ts.
+ * These have no class dependencies and can be safely imported anywhere.
+ */
+import type { OutscaleConfig } from './types.js';
+export declare function normalizeViewportDimension(value: number): number;
+export declare function normalizeDeviceScaleFactor(value?: number): number;
+export declare function resolveRecordedVideoSize(viewport: {
+    width: number;
+    height: number;
+}): {
+    width: number;
+    height: number;
+};
+/**
+ * Map a BCP-47 language tag to a Playwright-compatible locale string.
+ */
+export declare function langToLocale(lang: string): string;
+export declare function escapeCssAttributeValue(value: string): string;
+export declare function escapeCssIdentifier(value: string): string;
+export declare function withHelperTimeout<T>(label: string, timeoutMs: number | undefined, work: () => Promise<T>): Promise<T>;
+export declare function formatUrlForSummary(rawUrl: string): string;
+export declare function resolveEffectivePadding(config: OutscaleConfig, bbox: {
+    width: number;
+    height: number;
+}): {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};

package/dist/browser-utils.js

@@ -0,0 +1,97 @@
+/**
+ * Standalone utility functions extracted from browser.ts.
+ * These have no class dependencies and can be safely imported anywhere.
+ */
+// -- Viewport & device utilities --
+export function normalizeViewportDimension(value) {
+    if (!Number.isFinite(value))
+        return 1;
+    return Math.max(1, Math.round(value));
+}
+export function normalizeDeviceScaleFactor(value) {
+    if (!Number.isFinite(value))
+        return 2;
+    return Math.max(0.5, Math.min(4, Number(value)));
+}
+export function resolveRecordedVideoSize(viewport) {
+    const width = Math.max(2, Math.round(viewport.width)) & ~1;
+    const height = Math.max(2, Math.round(viewport.height)) & ~1;
+    return { width, height };
+}
+// -- Locale --
+/**
+ * Map a BCP-47 language tag to a Playwright-compatible locale string.
+ */
+export function langToLocale(lang) {
+    if (!lang)
+        return 'en-US';
+    if (lang.includes('-') || lang.includes('_'))
+        return lang;
+    const map = {
+        en: 'en-US', fr: 'fr-FR', de: 'de-DE', es: 'es-ES',
+        it: 'it-IT', pt: 'pt-PT', nl: 'nl-NL', ja: 'ja-JP',
+        zh: 'zh-CN', ko: 'ko-KR', ar: 'ar-SA', ru: 'ru-RU',
+        pl: 'pl-PL', sv: 'sv-SE', da: 'da-DK', fi: 'fi-FI',
+        no: 'nb-NO', tr: 'tr-TR', cs: 'cs-CZ', hu: 'hu-HU',
+    };
+    return map[lang] ?? lang;
+}
+// -- CSS utilities --
+export function escapeCssAttributeValue(value) {
+    return value
+        .replace(/\\/g, '\\\\')
+        .replace(/"/g, '\\"');
+}
+export function escapeCssIdentifier(value) {
+    return value.replace(/(^-?\d)|[^a-zA-Z0-9_-]/g, (match) => `\\${match}`);
+}
+// -- Timeout utility --
+export async function withHelperTimeout(label, timeoutMs, work) {
+    if (!timeoutMs || timeoutMs <= 0) {
+        return work();
+    }
+    let timer = null;
+    try {
+        return await Promise.race([
+            work(),
+            new Promise((_, reject) => {
+                timer = setTimeout(() => reject(new Error(`${label} timed out after ${timeoutMs}ms`)), timeoutMs);
+            }),
+        ]);
+    }
+    finally {
+        if (timer)
+            clearTimeout(timer);
+    }
+}
+// -- URL formatting --
+export function formatUrlForSummary(rawUrl) {
+    try {
+        const url = new URL(rawUrl);
+        return `${url.pathname || '/'}${url.search}${url.hash}` || rawUrl;
+    }
+    catch {
+        return rawUrl;
+    }
+}
+// -- Padding resolution --
+export function resolveEffectivePadding(config, bbox) {
+    let top = 0, right = 0, bottom = 0, left = 0;
+    if (config.paddingPercent != null) {
+        top = bottom = (config.paddingPercent / 100) * bbox.height;
+        left = right = (config.paddingPercent / 100) * bbox.width;
+    }
+    if (config.padding != null) {
+        top = right = bottom = left = config.padding;
+    }
+    if (config.paddingTop != null)
+        top = config.paddingTop;
+    if (config.paddingRight != null)
+        right = config.paddingRight;
+    if (config.paddingBottom != null)
+        bottom = config.paddingBottom;
+    if (config.paddingLeft != null)
+        left = config.paddingLeft;
+    return { top, right, bottom, left };
+}
+//# sourceMappingURL=browser-utils.js.map

package/dist/browser.d.ts

@@ -1,5 +1,5 @@
 import { type BrowserContext, type Page } from 'playwright';
-import type { BrowserOptions, BrowserSessionStorageState, BrowserStorageState, InteractiveElement, ObservedRequest, OutscaleConfig, PageState, PageStateLite, ResolvedMock, SelectorValidationResult, VideoPageSignals } from './types.js';
+import type { AKNode, AKNodeRuntimeIndexEntry, AKTree, BrowserOptions, BrowserSessionStorageState, BrowserStorageState, InteractiveElement, ObservedRequest, OutscaleConfig, PageState, PageStateLite, ResolvedMock, SelectorValidationResult, VideoPageSignals } from './types.js';
 export interface SelectorCaptureError {
     error: 'no_match' | 'ambiguous' | 'invisible' | 'zero_size';
     errorMessage: string;
@@ -46,6 +46,13 @@ export interface BrowserObservation {
     expandedCount: number;
     loadingIndicatorCount: number;
     textSample: string;
+    surfaceSignature: string;
+    primarySurface: string;
+    overlaySurface: string | null;
+    navigationSurface: string;
+    configurationSurface: string | null;
+    hasBlockingOverlay: boolean;
+    strongSurfaceSignature: string;
 }
 export interface BrowserReaction {
     before: BrowserObservation;
@@ -67,6 +74,22 @@ export interface BrowserVideoVerificationBundle extends BrowserVerificationBundl
     interactiveElements: InteractiveElement[];
     scrollInfo: PageState['scrollInfo'];
 }
+export interface BrowserSelectorProbe {
+    tag: string;
+    role: string;
+    href: string | null;
+    label: string;
+    inputType: string | null;
+    ariaExpanded?: string | null;
+    ariaControls?: string | null;
+    ariaHasPopup?: string | null;
+}
+export interface BrowserStorageHintWriteParams {
+    storageName: 'localStorage' | 'sessionStorage';
+    key: string;
+    candidate: string;
+    kind: 'locale' | 'theme';
+}
 export declare function describeObservationChange(before: BrowserObservation, after: BrowserObservation): BrowserReaction;
 export declare class Browser {
     private options;
@@ -74,6 +97,7 @@ export declare class Browser {
     private context;
     private page;
     private elementMap;
+    private akNodeIndex;
     private poolContext;
     constructor(options: BrowserOptions);
     /**
@@ -101,6 +125,12 @@ export declare class Browser {
      */
     closeContext(): Promise<void>;
     launch(): Promise<void>;
+    /** Wires debug-only lifecycle listeners on the page/context/browser to surface
+     *  navigations, console errors, page crashes, and unexpected closures.
+     *  No-op when debug logging is disabled. */
+    private attachDebugLifecycleListeners;
+    recreateContext(options?: Partial<Pick<BrowserOptions, 'viewport' | 'deviceScaleFactor' | 'lang' | 'colorScheme' | 'storageState'>>): Promise<void>;
+    setDeviceScaleFactor(deviceScaleFactor: number): Promise<void>;
     addCookies(cookies: Array<{
         name: string;
         value: string;
@@ -133,6 +163,19 @@ export declare class Browser {
      * Returns clean indented HTML-like text, budget-capped at ~4000 chars.
      */
     getSimplifiedDOM(): Promise<string>;
+    private mapRawNodeType;
+    private convertRawNode;
+    private shouldCollapseNode;
+    private collapseNode;
+    private collectFingerprintEntries;
+    private assignFingerprints;
+    private applyTraitAnnotations;
+    private findFirstPattern;
+    private flattenNodes;
+    private annotateSemanticPatterns;
+    private computeOverlays;
+    private normalizeRawSnapshot;
+    getAKTree(): Promise<AKTree>;
     getPageState(opts?: {
         skipAnnotation?: boolean;
     }): Promise<PageState>;
@@ -140,6 +183,12 @@ export declare class Browser {
     getPageStateLite(): Promise<PageStateLite>;
     exportStorageState(): Promise<BrowserStorageState>;
     exportSessionStorage(): Promise<BrowserSessionStorageState>;
+    reloadCurrentPage(options?: {
+        waitUntil?: 'load' | 'domcontentloaded' | 'networkidle' | 'commit';
+        timeout?: number;
+    }): Promise<void>;
+    writeStorageHintCandidate(params: BrowserStorageHintWriteParams): Promise<boolean>;
+    probeSelector(selector: string): Promise<BrowserSelectorProbe | null>;
     prepareSessionStorage(bundle: BrowserSessionStorageState | undefined, options?: {
         replace?: boolean;
     }): Promise<void>;
@@ -164,6 +213,7 @@ export declare class Browser {
     }): Promise<BrowserReaction>;
     private computeVisibilityState;
     private getVisiblePoint;
+    private runClickHitTest;
     private withResolvedLocator;
     private measureElement;
     private ensureElementInView;
@@ -189,7 +239,12 @@ export declare class Browser {
     clickBySelector(selector: string, options?: {
         force?: boolean;
     }): Promise<void>;
+    private resolveActivationTarget;
+    private activateSelectorTarget;
     clickByCoordinates(x: number, y: number): Promise<void>;
+    private buildElementSnapshotFromAKEntry;
+    private activateAKNodeEntry;
+    private clickAKNodeEntryByBounds;
     typeText(text: string, options?: {
         index?: number;
         selector?: string;
@@ -203,6 +258,10 @@ export declare class Browser {
         optionIndex?: number;
     }): Promise<void>;
     scroll(direction: string, amount?: number, selector?: string): Promise<void>;
+    centerNodeInView(centerNodeId: string, options?: {
+        containerNodeId?: string;
+        offset?: number;
+    }): Promise<void>;
     pressKey(key: string): Promise<void>;
     searchText(query: string): Promise<Array<{
         tag: string;
@@ -241,6 +300,21 @@ export declare class Browser {
         width: number;
         height: number;
     }, outscale?: OutscaleConfig | number): Promise<Buffer>;
+    resolveAKNode(nodeId: string, options?: {
+        reparse?: boolean;
+    }): Promise<AKNodeRuntimeIndexEntry | null>;
+    tapNode(nodeId: string, options?: {
+        force?: boolean;
+    }): Promise<void>;
+    typeIntoNode(nodeId: string, text: string, options?: {
+        clearFirst?: boolean;
+    }): Promise<void>;
+    captureNode(nodeId?: string): Promise<Buffer>;
+    focusTree(query: import('./types.js').FocusQuery): Promise<{
+        tree: AKTree;
+        serialized: string;
+        matches: AKNode[];
+    }>;
     wait(ms: number): Promise<void>;
     /**
      * Force-load all lazy-loaded images on the page before element capture.
@@ -275,5 +349,6 @@ export declare class Browser {
     clearRouteInterception(): Promise<void>;
     private ensurePage;
     private ensureContext;
+    private buildContextOptions;
 }
 export {};