autokap 1.0.7 → 1.0.8

package/dist/status-bar.js

@@ -71,53 +71,62 @@ const DEFAULT_LAYOUTS = {
 // (macOS, Linux VPS, Docker) without requiring system font installation.
 // local() is tried first so the native SF Pro is used when available.
 import { SF_PRO_TEXT_REGULAR, SF_PRO_TEXT_SEMIBOLD, SF_PRO_DISPLAY_REGULAR, SF_PRO_DISPLAY_SEMIBOLD, } from './sf-pro-fonts.js';
-const SF_PRO_STYLE = `<style>
+import { SF_PRO_SYMBOLS } from './sf-pro-symbols.js';
+export const STATUS_BAR_FONT_CSS = `
 @font-face {
   font-family: 'SF Pro Text';
-  src: local('SF Pro Text'), local('.SFNSText'), local('SFProText-Regular'),
+  src: local('SF Pro Text'), local('SF Pro'), local('.SFNSText'), local('SFProText-Regular'),
        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'), local('SFProText-Semibold'),
+  src: local('SF Pro Text Semibold'), local('SF Pro'), local('.SFNSText-Semibold'), local('SFProText-Semibold'),
        url('${SF_PRO_TEXT_SEMIBOLD}') format('woff2');
   font-weight: 600;
   font-style: normal;
 }
 @font-face {
   font-family: 'SF Pro Display';
-  src: local('SF Pro Display'), local('.SFNSDisplay'), local('SFProDisplay-Regular'),
+  src: local('SF Pro Display'), local('SF Pro'), local('.SFNSDisplay'), local('SFProDisplay-Regular'),
        url('${SF_PRO_DISPLAY_REGULAR}') format('woff2');
   font-weight: 400;
   font-style: normal;
 }
 @font-face {
   font-family: 'SF Pro Display';
-  src: local('SF Pro Display Semibold'), local('.SFNSDisplay-Semibold'), local('SFProDisplay-Semibold'),
+  src: local('SF Pro Display Semibold'), local('SF Pro'), local('.SFNSDisplay-Semibold'), local('SFProDisplay-Semibold'),
        url('${SF_PRO_DISPLAY_SEMIBOLD}') format('woff2');
   font-weight: 600;
   font-style: normal;
 }
-</style>`;
+@font-face {
+  font-family: 'SF Pro Symbols';
+  src: url('${SF_PRO_SYMBOLS}') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+}
+`;
+const STATUS_BAR_FONT_STYLE_HTML = `<style>${STATUS_BAR_FONT_CSS}</style>`;
 // ── Main Generator ────────────────────────────────────────────────────
 export function generateStatusBarHtml(options) {
     const cfg = { ...DEFAULT_CONFIG, ...options.config };
     const layout = options.layout ?? DEFAULT_LAYOUTS[options.deviceType];
     const { width, height } = options;
     const color = cfg.colorScheme === 'dark' ? '#FFFFFF' : '#000000';
+    const fontStyles = options.includeFontStyles === false ? '' : STATUS_BAR_FONT_STYLE_HTML;
     const fontFamily = "'SF Pro Text','SF Pro Display','-apple-system',BlinkMacSystemFont,system-ui,sans-serif";
     if (options.deviceType === 'iphone-home-button') {
-        return SF_PRO_STYLE + buildIPhoneHomeButtonStatusBar(cfg, layout, width, height, color, fontFamily);
+        return fontStyles + buildIPhoneHomeButtonStatusBar(cfg, layout, width, height, color, fontFamily);
     }
     if (options.deviceType === 'iphone-dynamic-island' || options.deviceType === 'iphone-notch') {
-        return SF_PRO_STYLE + buildIPhoneStatusBar(cfg, layout, width, height, color, fontFamily);
+        return fontStyles + buildIPhoneStatusBar(cfg, layout, width, height, color, fontFamily);
     }
     if (options.deviceType === 'mac-notch') {
-        return SF_PRO_STYLE + buildMacMenuBar(cfg, layout, width, height, color, fontFamily);
+        return fontStyles + buildMacMenuBar(cfg, layout, width, height, color, fontFamily);
     }
-    return SF_PRO_STYLE + buildIPadStatusBar(cfg, layout, width, height, color, fontFamily);
+    return fontStyles + buildIPadStatusBar(cfg, layout, width, height, color, fontFamily);
 }
 // ── iPhone Status Bar ──────────────────────────────────────────────────
 function buildIPhoneStatusBar(cfg, layout, width, height, color, fontFamily) {
@@ -214,8 +223,9 @@ function buildMacMenuBar(cfg, layout, width, height, color, fontFamily) {
     const wifiSvg = renderWifi(cfg.wifiStrength, color, wifiW);
     const batterySvg = renderBattery(cfg.batteryLevel, cfg.batteryCharging, color, batteryW, cfg.colorScheme === 'dark');
     const batteryLabel = `<span style="font-size:${fontSize - 1}px;font-weight:400;color:${color};line-height:1;">${cfg.batteryLevel}%</span>`;
-    // SF Symbol icon helper — uses SF Pro font glyphs from Private Use Area
-    const sfIcon = (char, size = fontSize) => `<span style="font-family:'SF Pro','SF Pro Display',system-ui;font-size:${size}px;color:${color};line-height:1;">${char}</span>`;
+    // Deterministic subset font for macOS menu bar glyphs — SF Pro Symbols embeds
+    // the exact glyphs needed (Apple logo, search, CC, avatar) as a woff2 data URI.
+    const sfIcon = (char, size = fontSize) => `<span style="font-family:'SF Pro Symbols','SF Pro Text','SF Pro Display',system-ui;font-size:${size}px;color:${color};line-height:1;">${char}</span>`;
     // Apple logo — U+F8FF renders as  in SF Pro / Apple system fonts
     const appleLogo = sfIcon('\uF8FF', fontSize + 3);
     // SF Symbol characters (macOS Sequoia) — literal glyphs from SF Pro font
@@ -231,7 +241,9 @@ function buildMacMenuBar(cfg, layout, width, height, color, fontFamily) {
         : '';
     const timeLabel = `<span style="font-size:${fontSize}px;font-weight:500;color:${color};line-height:1;">${escapeHtml(cfg.time)}</span>`;
     // macOS right-side order: WiFi → Battery% BatteryIcon → Search → CC → Avatar → Date Time
-    return `<div style="position:relative;width:${width}px;height:${height}px;font-family:${fontFamily};-webkit-font-smoothing:antialiased;overflow:hidden;">
+    // macOS menu bar uses SF Pro Display (not Text) at 13px — matches native rendering
+    const macFontFamily = "'SF Pro Display','SF Pro Text','-apple-system',BlinkMacSystemFont,system-ui,sans-serif";
+    return `<div style="position:relative;width:${width}px;height:${height}px;font-family:${macFontFamily};-webkit-font-smoothing:antialiased;overflow:hidden;">
   <div style="position:absolute;left:${layout.leftInset}px;top:0;height:100%;display:flex;align-items:center;gap:${gap + 6}px;">
     ${appleLogo}
     ${appName}
@@ -299,7 +311,7 @@ function renderWifi(strength, color, size) {
     const h = size * (viewH / viewW);
     return `<svg width="${size}" height="${h}" viewBox="0 0 ${viewW} ${viewH}" fill="none" style="display:block;">${tiers.join('')}</svg>`;
 }
-function renderBattery(level, charging, color, size, isDark = false) {
+export function renderBattery(level, charging, color, size, isDark = false) {
     if (charging) {
         // Charging battery icon (from assets/icons/battery_charging.svg)
         // ViewBox: 35×16 — paths: 1,2=border, 3=nub, 4,5=inner fill, 6=bolt
@@ -333,4 +345,276 @@ function renderBattery(level, charging, color, size, isDark = false) {
 function escapeHtml(str) {
     return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 }
+// ── Pure SVG Generator (for sharp compositing — no Playwright) ────────
+// Produces a self-contained SVG string with embedded fonts that can be
+// rasterized by @resvg/resvg-js. The client-side HTML generator above
+// remains unchanged.
+/** Font CSS for embedding inside SVG <defs><style>. Uses only url() — no local() — because resvg doesn't support local font lookup. */
+const SVG_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; }
+@font-face { font-family: 'SF Pro Display'; src: url('${SF_PRO_DISPLAY_REGULAR}') format('woff2'); font-weight: 400; font-style: normal; }
+@font-face { font-family: 'SF Pro Display'; src: url('${SF_PRO_DISPLAY_SEMIBOLD}') format('woff2'); font-weight: 600; font-style: normal; }
+@font-face { font-family: 'SF Pro Symbols'; src: url('${SF_PRO_SYMBOLS}') format('woff2'); font-weight: 400; font-style: normal; }
+`;
+const SVG_FONT_DEFS = `<defs><style>${SVG_FONT_CSS}</style></defs>`;
+/**
+ * Generate a self-contained SVG string for the status bar.
+ * Used by the sharp compositing pipeline (no Playwright).
+ * The returned SVG includes embedded SF Pro fonts via @font-face data URIs.
+ */
+export function generateStatusBarSvg(options) {
+    const cfg = { ...DEFAULT_CONFIG, ...options.config };
+    const layout = options.layout ?? DEFAULT_LAYOUTS[options.deviceType];
+    const { width, height } = options;
+    const color = cfg.colorScheme === 'dark' ? '#FFFFFF' : '#000000';
+    const FF = "'SF Pro Text','SF Pro Display',system-ui,sans-serif";
+    let inner;
+    if (options.deviceType === 'iphone-home-button') {
+        inner = buildIPhoneHomeButtonSvg(cfg, layout, width, height, color, FF);
+    }
+    else if (options.deviceType === 'iphone-dynamic-island' || options.deviceType === 'iphone-notch') {
+        inner = buildIPhoneSvg(cfg, layout, width, height, color, FF);
+    }
+    else if (options.deviceType === 'mac-notch') {
+        inner = buildMacMenuBarSvg(cfg, layout, width, height, color, FF);
+    }
+    else {
+        inner = buildIPadSvg(cfg, layout, width, height, color, FF);
+    }
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">${SVG_FONT_DEFS}${inner}</svg>`;
+}
+// ── SVG icon fragment helpers ──────────────────────────────────────────
+// Return just <g> groups (no wrapping <svg>) for embedding in parent SVG.
+function signalBarsSvgFragment(strength, color, size) {
+    const viewW = 20;
+    const viewH = 13;
+    const w = size;
+    const h = size * (viewH / viewW);
+    const scale = w / viewW;
+    const paths = SIGNAL_BAR_PATHS.map((d, i) => {
+        const opacity = i < strength ? 1 : 0.25;
+        return `<path d="${d}" fill="${color}" opacity="${opacity}"/>`;
+    }).join('');
+    return { svg: `<g transform="scale(${scale})">${paths}</g>`, width: w, height: h };
+}
+function wifiSvgFragment(strength, color, size) {
+    const viewW = 18;
+    const viewH = 13;
+    const w = size;
+    const h = size * (viewH / viewW);
+    const scale = w / viewW;
+    const tiers = WIFI_TIER_PATHS.map((d, i) => {
+        const tierLevel = 3 - i;
+        const opacity = strength >= tierLevel ? 1 : 0.25;
+        return `<path d="${d}" fill="${color}" opacity="${opacity}"/>`;
+    }).join('');
+    return { svg: `<g transform="scale(${scale})">${tiers}</g>`, width: w, height: h };
+}
+function batterySvgFragment(level, charging, color, size, isDark) {
+    // Reuse the existing renderBattery which returns a complete <svg>.
+    // Extract just the inner content and wrap in a <g> with correct scaling.
+    const viewW = 35;
+    const viewH = 16;
+    const w = size;
+    const h = size * (viewH / viewW);
+    const scale = w / viewW;
+    // Build battery paths inline (same logic as renderBattery)
+    let paths;
+    if (charging) {
+        const chargingGreen = isDark ? '#0DF07D' : '#32CB58';
+        const chargingBorder = '#ADADB1';
+        const boltColor = color;
+        paths = `<path d="M17.332 13.9694L15.8203 15.8561H24.668C25.668 15.8561 26.582 15.778 27.4102 15.6217C28.2383 15.4576 28.9531 15.0748 29.5547 14.4733C30.1484 13.8795 30.5234 13.1725 30.6797 12.3522C30.8438 11.524 30.9258 10.61 30.9258 9.60998V6.2467C30.9258 5.2467 30.8438 4.33655 30.6797 3.51624C30.5234 2.68811 30.1484 1.97717 29.5547 1.38342C28.9531 0.78186 28.2383 0.402954 27.4102 0.246704C26.582 0.0826416 25.668 0.000610352 24.668 0.000610352H19.6992C19.7695 0.18811 19.8086 0.37561 19.8164 0.56311C19.8242 0.742798 19.8047 0.93811 19.7578 1.14905C19.7188 1.35999 19.6523 1.60608 19.5586 1.88733H24.9961C25.5977 1.88733 26.1875 1.94592 26.7656 2.06311C27.3516 2.17249 27.8203 2.40295 28.1719 2.75452C28.5312 3.11389 28.7656 3.58264 28.875 4.16077C28.9844 4.73108 29.0391 5.31702 29.0391 5.91858V9.92639C29.0391 10.5358 28.9844 11.1295 28.875 11.7076C28.7656 12.278 28.5312 12.7428 28.1719 13.1022C27.8203 13.4537 27.3516 13.6881 26.7656 13.8053C26.1875 13.9147 25.5977 13.9694 24.9961 13.9694H17.332Z" fill="${chargingBorder}"/>
+<path d="M13.5937 1.88672L15.1055 9.53674e-07L6.25781 1.72716e-06C5.25781 1.81458e-06 4.34375 0.0781269 3.51562 0.234377C2.6875 0.39844 1.97265 0.781252 1.37109 1.38281C0.777343 1.97656 0.402343 2.6836 0.246093 3.50391C0.0820302 4.33203 -9.27501e-07 5.2461 -8.40078e-07 6.2461L-5.46051e-07 9.60938C-4.58628e-07 10.6094 0.0820309 11.5195 0.246093 12.3398C0.402344 13.168 0.777344 13.8789 1.37109 14.4727C1.97266 15.0742 2.6875 15.4531 3.51562 15.6094C4.34375 15.7734 5.25781 15.8555 6.25781 15.8555L11.2266 15.8555C11.1562 15.668 11.1172 15.4805 11.1094 15.293C11.1016 15.1133 11.1211 14.918 11.168 14.707C11.207 14.4961 11.2734 14.25 11.3672 13.9688L5.92969 13.9688C5.32812 13.9688 4.73828 13.9102 4.16016 13.793C3.57422 13.6836 3.10547 13.4531 2.75391 13.1016C2.39453 12.7422 2.16016 12.2734 2.05078 11.6953C1.94141 11.125 1.88672 10.5391 1.88672 9.9375L1.88672 5.92969C1.88672 5.32031 1.94141 4.72656 2.05078 4.14844C2.16016 3.57813 2.39453 3.11328 2.75391 2.75391C3.10547 2.40235 3.57422 2.16797 4.16016 2.05078C4.73828 1.94141 5.32812 1.88672 5.92969 1.88672L13.5937 1.88672Z" fill="${chargingBorder}"/>
+<path d="M32.5195 4.89905V10.9576C32.832 10.9342 33.1562 10.7975 33.4922 10.5475C33.8281 10.2897 34.1094 9.93811 34.3359 9.4928C34.5703 9.04749 34.6875 8.52405 34.6875 7.92249C34.6875 7.32874 34.5703 6.8092 34.3359 6.36389C34.1094 5.91858 33.8281 5.56702 33.4922 5.3092C33.1562 5.05139 32.832 4.91467 32.5195 4.89905Z" fill="${chargingBorder}"/>
+<path d="M4.32422 12.5162C4.58203 12.5787 4.91016 12.61 5.30859 12.61H12.1758L12.7969 10.9225H11.1328C10.5469 10.9225 10.043 10.7194 9.62109 10.3131C9.20703 9.90686 9 9.40686 9 8.81311C9 8.29749 9.17578 7.81702 9.52734 7.3717L12.8086 3.2467H5.34375C4.92969 3.2467 4.59375 3.28186 4.33594 3.35217C4.07812 3.41467 3.86719 3.52795 3.70312 3.69202C3.54688 3.85608 3.43359 4.06702 3.36328 4.32483C3.29297 4.57483 3.25781 4.90686 3.25781 5.32092V10.5592C3.25781 10.9655 3.29297 11.2936 3.36328 11.5436C3.43359 11.7936 3.54688 12.0006 3.70312 12.1647C3.86719 12.3287 4.07422 12.4459 4.32422 12.5162Z" fill="${chargingGreen}"/>
+<path d="M21.6914 8.48499L18.4102 12.61H25.6172C26.0234 12.61 26.3516 12.5787 26.6016 12.5162C26.8516 12.4459 27.0586 12.3287 27.2227 12.1647C27.5273 11.86 27.6797 11.3248 27.6797 10.5592V5.29749C27.6797 4.89124 27.6445 4.56311 27.5742 4.31311C27.5039 4.06311 27.3867 3.85608 27.2227 3.69202C27.0586 3.52795 26.8516 3.41467 26.6016 3.35217C26.3516 3.28186 26.0234 3.2467 25.6172 3.2467H19.043L18.4219 4.9342H20.0742C20.668 4.9342 21.1719 5.13733 21.5859 5.54358C22.0078 5.94983 22.2188 6.44983 22.2188 7.04358C22.2188 7.5592 22.043 8.03967 21.6914 8.48499Z" fill="${chargingGreen}"/>
+<path d="M10.7812 8.34432C10.6484 8.52401 10.582 8.68026 10.582 8.81307C10.582 8.96151 10.6328 9.0826 10.7344 9.17635C10.8438 9.2701 10.9727 9.31698 11.1211 9.31698H15.0938L12.9727 15.0123C12.8867 15.2623 12.8945 15.4654 12.9961 15.6217C13.1055 15.7779 13.2578 15.8599 13.4531 15.8678C13.6484 15.8678 13.8242 15.7701 13.9805 15.5748L20.4023 7.50057C20.5352 7.3287 20.6016 7.17635 20.6016 7.04354C20.6016 6.8951 20.5469 6.77401 20.4375 6.68026C20.3359 6.58651 20.2109 6.53963 20.0625 6.53963H16.0898L18.2109 0.844323C18.3047 0.594323 18.2969 0.391198 18.1875 0.234948C18.0781 0.0786978 17.9258 0.000572791 17.7305 0.000572791C17.543 -0.00723971 17.3672 0.0865103 17.2031 0.281823L10.7812 8.34432Z" fill="${boltColor}"/>`;
+    }
+    else {
+        const batteryBorder = '#ADADB1';
+        paths = `<path d="M12.8057 3.25098H19.042L19.043 3.24707H25.6172C26.0234 3.24707 26.3516 3.28223 26.6016 3.35254C26.8515 3.41504 27.0586 3.52834 27.2227 3.69238C27.3866 3.85642 27.5039 4.06357 27.5742 4.31348C27.6445 4.56343 27.6797 4.89179 27.6797 5.29785V10.5596C27.6796 11.325 27.5273 11.8604 27.2227 12.165C27.0586 12.329 26.8515 12.4463 26.6016 12.5166C26.3516 12.5791 26.0234 12.6104 25.6172 12.6104H5.30859C4.9102 12.6104 4.58202 12.5791 4.32422 12.5166C4.07431 12.4463 3.86716 12.329 3.70312 12.165C3.54695 12.0011 3.4336 11.7938 3.36328 11.5439C3.29299 11.294 3.25783 10.9657 3.25781 10.5596V5.32129C3.25781 4.90741 3.29303 4.57516 3.36328 4.3252C3.43357 4.06748 3.54697 3.85642 3.70312 3.69238C3.86717 3.52834 4.07816 3.41504 4.33594 3.35254C4.59375 3.28223 4.92969 3.24707 5.34375 3.24707H12.8086L12.8057 3.25098Z" fill="${color}"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.668 0.000976562C25.668 0.000976562 26.582 0.0830078 27.4102 0.24707C28.2383 0.403328 28.9531 0.782242 29.5547 1.38379C30.1483 1.9775 30.5235 2.68856 30.6797 3.5166C30.8437 4.33682 30.9258 5.24721 30.9258 6.24707V9.61035C30.9258 10.6102 30.8437 11.5245 30.6797 12.3525C30.5234 13.1727 30.1484 13.88 29.5547 14.4736C28.9532 15.0751 28.2382 15.458 27.4102 15.6221C26.582 15.7783 25.6679 15.8564 24.668 15.8564L10.5156 15.8574V15.8555H6.25781C5.25781 15.8555 4.34375 15.7734 3.51562 15.6094C2.6875 15.4531 1.97266 15.0742 1.37109 14.4727C0.777344 13.8789 0.402344 13.168 0.246094 12.3398C0.0820312 11.5195 9.34357e-08 10.6094 0 9.60938V6.24609C-6.73586e-08 5.24609 0.0820313 4.33203 0.246094 3.50391C0.402344 2.68359 0.777344 1.97656 1.37109 1.38281C1.97266 0.78125 2.6875 0.398438 3.51562 0.234375C4.34375 0.078125 5.25781 1.64241e-07 6.25781 0L24.668 0.000976562ZM5.92969 1.88672C5.32813 1.88672 4.73828 1.94141 4.16016 2.05078C3.57422 2.16797 3.10547 2.40234 2.75391 2.75391C2.39453 3.11328 2.16016 3.57813 2.05078 4.14844C1.94141 4.72656 1.88672 5.32031 1.88672 5.92969V9.9375C1.88672 10.5391 1.94141 11.125 2.05078 11.6953C2.16016 12.2734 2.39453 12.7422 2.75391 13.1016C3.10547 13.4531 3.57422 13.6836 4.16016 13.793C4.73828 13.9102 5.32813 13.9687 5.92969 13.9688L24.9961 13.9697C25.5976 13.9697 26.1875 13.915 26.7656 13.8057C27.3515 13.6885 27.8203 13.454 28.1719 13.1025C28.5312 12.7432 28.7656 12.2782 28.875 11.708C28.9844 11.13 29.039 10.536 29.0391 9.92676V5.91895C29.0391 5.3175 28.9843 4.73134 28.875 4.16113C28.7656 3.5831 28.5311 3.11423 28.1719 2.75488C27.8203 2.40333 27.3515 2.17286 26.7656 2.06348C26.1875 1.94629 25.5977 1.8877 24.9961 1.8877L13 1.88867V1.88672H5.92969Z" fill="${batteryBorder}"/>
+<path d="M32.5195 4.89941C32.832 4.91504 33.1563 5.05176 33.4922 5.30957C33.828 5.56737 34.1094 5.91902 34.3359 6.36426C34.5702 6.80951 34.6875 7.32923 34.6875 7.92285C34.6875 8.52426 34.5703 9.04794 34.3359 9.49316C34.1094 9.93834 33.8281 10.2901 33.4922 10.5479C33.1563 10.7978 32.832 10.9346 32.5195 10.958V4.89941Z" fill="${batteryBorder}"/>`;
+    }
+    return { svg: `<g transform="scale(${scale})">${paths}</g>`, width: w, height: h };
+}
+// ── SVG layout builders (no HTML, no CSS flexbox) ─────────────────────
+/** Approximate text width for SF Pro at a given font size.
+ *  Average character width is ~0.55em for SF Pro (measured).
+ *  This is a conservative estimate — used only for right-alignment. */
+function estimateTextWidth(text, fontSize, weight = 400) {
+    const avgCharWidth = weight >= 600 ? 0.58 : 0.53;
+    return text.length * fontSize * avgCharWidth;
+}
+function svgText(text, x, y, fontSize, color, opts = {}) {
+    const { weight = 400, letterSpacing, anchor = 'start', fontFamily } = opts;
+    const ls = letterSpacing != null ? ` letter-spacing="${letterSpacing}"` : '';
+    const ff = fontFamily ? ` font-family="${fontFamily}"` : '';
+    return `<text x="${x}" y="${y}" font-size="${fontSize}" font-weight="${weight}" fill="${color}" dominant-baseline="central" text-anchor="${anchor}"${ls}${ff}>${escapeHtml(text)}</text>`;
+}
+// iPhone Dynamic Island / Notch — time left, icons right
+function buildIPhoneSvg(cfg, layout, width, height, color, fontFamily) {
+    const cy = height / 2;
+    const gap = layout.iconGap;
+    const { signal: signalW, wifi: wifiW, battery: batteryW } = layout.iconSize;
+    // Left: time
+    const timeText = svgText(cfg.time, layout.leftInset, cy, layout.fontSize.time, color, { weight: 600, letterSpacing: -0.4, fontFamily });
+    // Right group: [signal] [networkType?] [wifi] [battery] — right-aligned from (width - rightInset)
+    const signal = signalBarsSvgFragment(cfg.signalStrength, color, signalW);
+    const wifi = wifiSvgFragment(cfg.wifiStrength, color, wifiW);
+    const battery = batterySvgFragment(cfg.batteryLevel, cfg.batteryCharging, color, batteryW, cfg.colorScheme === 'dark');
+    const networkLabelWidth = cfg.showNetworkType
+        ? estimateTextWidth(cfg.networkType, layout.fontSize.networkType, 600)
+        : 0;
+    // Compute total right group width
+    const items = [signal.width];
+    if (cfg.showNetworkType)
+        items.push(networkLabelWidth);
+    items.push(wifi.width, battery.width);
+    const totalRightWidth = items.reduce((a, b) => a + b, 0) + (items.length - 1) * gap;
+    let x = width - layout.rightInset - totalRightWidth;
+    let rightGroup = `<g transform="translate(${x},${cy - signal.height / 2})">${signal.svg}</g>`;
+    x += signal.width + gap;
+    if (cfg.showNetworkType) {
+        rightGroup += svgText(cfg.networkType, x, cy, layout.fontSize.networkType, color, { weight: 600, letterSpacing: 0.2, fontFamily });
+        x += networkLabelWidth + gap;
+    }
+    rightGroup += `<g transform="translate(${x},${cy - wifi.height / 2})">${wifi.svg}</g>`;
+    x += wifi.width + gap;
+    rightGroup += `<g transform="translate(${x},${cy - battery.height / 2})">${battery.svg}</g>`;
+    return `<g font-family="${fontFamily}">${timeText}${rightGroup}</g>`;
+}
+// iPhone Home Button — signal+carrier+wifi left, time center, battery right
+function buildIPhoneHomeButtonSvg(cfg, layout, width, height, color, fontFamily) {
+    const cy = height / 2;
+    const gap = layout.iconGap;
+    const labelSize = layout.fontSize.networkType;
+    const { signal: signalW, wifi: wifiW, battery: batteryW } = layout.iconSize;
+    const signal = signalBarsSvgFragment(cfg.signalStrength, color, signalW);
+    const wifi = wifiSvgFragment(cfg.wifiStrength, color, wifiW);
+    const battery = batterySvgFragment(cfg.batteryLevel, cfg.batteryCharging, color, batteryW, cfg.colorScheme === 'dark');
+    // Left group: signal + carrier + networkBadge? + wifi
+    let x = layout.leftInset;
+    let leftGroup = `<g transform="translate(${x},${cy - signal.height / 2})">${signal.svg}</g>`;
+    x += signal.width + gap;
+    leftGroup += svgText(cfg.carrierName, x, cy, labelSize, color, { fontFamily });
+    x += Math.min(80, estimateTextWidth(cfg.carrierName, labelSize)) + gap;
+    if (cfg.showNetworkType) {
+        leftGroup += svgText(cfg.networkType, x, cy, labelSize - 1, color, { weight: 600, fontFamily });
+        x += estimateTextWidth(cfg.networkType, labelSize - 1, 600) + gap;
+    }
+    leftGroup += `<g transform="translate(${x},${cy - wifi.height / 2})">${wifi.svg}</g>`;
+    // Center: time
+    const centerText = svgText(cfg.time, width / 2, cy, layout.fontSize.time, color, { weight: 600, letterSpacing: -0.4, anchor: 'middle', fontFamily });
+    // Right group: batteryPct? + battery
+    const batteryPctWidth = cfg.showBatteryPercentage ? estimateTextWidth(`${cfg.batteryLevel}%`, labelSize) : 0;
+    const rightTotalWidth = (cfg.showBatteryPercentage ? batteryPctWidth + gap : 0) + battery.width;
+    let rx = width - layout.rightInset - rightTotalWidth;
+    let rightGroup = '';
+    if (cfg.showBatteryPercentage) {
+        rightGroup += svgText(`${cfg.batteryLevel}%`, rx, cy, labelSize, color, { fontFamily });
+        rx += batteryPctWidth + gap;
+    }
+    rightGroup += `<g transform="translate(${rx},${cy - battery.height / 2})">${battery.svg}</g>`;
+    return `<g font-family="${fontFamily}">${leftGroup}${centerText}${rightGroup}</g>`;
+}
+// iPad — time+date left, icons right
+function buildIPadSvg(cfg, layout, width, height, color, fontFamily) {
+    const cy = height / 2;
+    const gap = layout.iconGap;
+    const { signal: signalW, wifi: wifiW, battery: batteryW } = layout.iconSize;
+    // Left: time + date
+    let leftGroup = svgText(cfg.time, layout.leftInset, cy, layout.fontSize.time, color, { letterSpacing: -0.4, fontFamily });
+    if (cfg.date) {
+        const timeWidth = estimateTextWidth(cfg.time, layout.fontSize.time);
+        leftGroup += svgText(cfg.date, layout.leftInset + timeWidth + 16, cy, layout.fontSize.time, color, { letterSpacing: -0.4, fontFamily });
+    }
+    // Right: signal + wifi + batteryLabel + battery
+    const signal = signalBarsSvgFragment(cfg.signalStrength, color, signalW);
+    const wifi = wifiSvgFragment(cfg.wifiStrength, color, wifiW);
+    const battery = batterySvgFragment(cfg.batteryLevel, cfg.batteryCharging, color, batteryW, cfg.colorScheme === 'dark');
+    const batteryLabelW = estimateTextWidth(`${cfg.batteryLevel}%`, layout.fontSize.networkType);
+    const rightItems = [signal.width, wifi.width, batteryLabelW, battery.width];
+    const totalRight = rightItems.reduce((a, b) => a + b, 0) + (rightItems.length - 1) * gap;
+    let x = width - layout.rightInset - totalRight;
+    let rightGroup = `<g transform="translate(${x},${cy - signal.height / 2})">${signal.svg}</g>`;
+    x += signal.width + gap;
+    rightGroup += `<g transform="translate(${x},${cy - wifi.height / 2})">${wifi.svg}</g>`;
+    x += wifi.width + gap;
+    rightGroup += svgText(`${cfg.batteryLevel}%`, x, cy, layout.fontSize.networkType, color, { fontFamily });
+    x += batteryLabelW + gap;
+    rightGroup += `<g transform="translate(${x},${cy - battery.height / 2})">${battery.svg}</g>`;
+    return `<g font-family="${fontFamily}">${leftGroup}${rightGroup}</g>`;
+}
+// macOS Menu Bar — apple+app+menus left, wifi+battery+icons+date+time right
+function buildMacMenuBarSvg(cfg, layout, width, height, color, _fontFamily) {
+    const fontSize = layout.fontSize.time;
+    const cy = height / 2;
+    const gap = layout.iconGap;
+    const { wifi: wifiW, battery: batteryW } = layout.iconSize;
+    const macFF = "'SF Pro Display','SF Pro Text',system-ui,sans-serif";
+    const symbolsFF = "'SF Pro Symbols','SF Pro Text','SF Pro Display',system-ui,sans-serif";
+    // Left group: Apple logo + app name + menu items
+    let lx = layout.leftInset;
+    const bigGap = gap + 6;
+    const menuGap = gap + 10;
+    // Apple logo (U+F8FF)
+    let leftGroup = svgText('\uF8FF', lx, cy, fontSize + 3, color, { fontFamily: symbolsFF });
+    lx += estimateTextWidth('\uF8FF', fontSize + 3) + bigGap;
+    // App name (bold)
+    leftGroup += svgText(cfg.menuBarApp, lx, cy, fontSize, color, { weight: 700, fontFamily: macFF });
+    lx += estimateTextWidth(cfg.menuBarApp, fontSize, 700) + bigGap;
+    // Menu items
+    for (const item of cfg.menuBarItems) {
+        leftGroup += svgText(item, lx, cy, fontSize, color, { fontFamily: macFF });
+        lx += estimateTextWidth(item, fontSize) + menuGap;
+    }
+    // Right group: wifi + battery + search + CC + avatar + date + time
+    const wifi = wifiSvgFragment(cfg.wifiStrength, color, wifiW);
+    const battery = batterySvgFragment(cfg.batteryLevel, cfg.batteryCharging, color, batteryW, cfg.colorScheme === 'dark');
+    const batteryLabelW = cfg.showBatteryPercentage ? estimateTextWidth(`${cfg.batteryLevel}%`, fontSize - 1) : 0;
+    const smallGap = gap + 2;
+    // Symbol icons
+    const searchW = estimateTextWidth('􀊫', fontSize);
+    const ccW = estimateTextWidth('􀜊', fontSize);
+    const avatarW = estimateTextWidth('􀉭', fontSize);
+    const dateW = cfg.date ? estimateTextWidth(cfg.date, fontSize, 500) : 0;
+    const timeW = estimateTextWidth(cfg.time, fontSize, 500);
+    const rightItems = [
+        wifi.width, // wifi
+        (cfg.showBatteryPercentage ? batteryLabelW + 3 : 0) + battery.width, // battery group
+        searchW, ccW, avatarW, // symbol icons
+    ];
+    if (cfg.date)
+        rightItems.push(dateW);
+    rightItems.push(timeW);
+    const totalRight = rightItems.reduce((a, b) => a + b, 0) + (rightItems.length - 1) * smallGap;
+    let rx = width - layout.rightInset - totalRight;
+    // wifi
+    let rightGroup = `<g transform="translate(${rx},${cy - wifi.height / 2})">${wifi.svg}</g>`;
+    rx += wifi.width + smallGap;
+    // battery group: pct + icon
+    if (cfg.showBatteryPercentage) {
+        rightGroup += svgText(`${cfg.batteryLevel}%`, rx, cy, fontSize - 1, color, { fontFamily: macFF });
+        rx += batteryLabelW + 3;
+    }
+    rightGroup += `<g transform="translate(${rx},${cy - battery.height / 2})">${battery.svg}</g>`;
+    rx += battery.width + smallGap;
+    // search, CC, avatar
+    rightGroup += svgText('􀊫', rx, cy, fontSize, color, { fontFamily: symbolsFF });
+    rx += searchW + smallGap;
+    rightGroup += svgText('􀜊', rx, cy, fontSize, color, { fontFamily: symbolsFF });
+    rx += ccW + smallGap;
+    rightGroup += svgText('􀉭', rx, cy, fontSize, color, { fontFamily: symbolsFF });
+    rx += avatarW + smallGap;
+    // date + time
+    if (cfg.date) {
+        rightGroup += svgText(cfg.date, rx, cy, fontSize, color, { weight: 500, fontFamily: macFF });
+        rx += dateW + smallGap;
+    }
+    rightGroup += svgText(cfg.time, rx, cy, fontSize, color, { weight: 500, fontFamily: macFF });
+    return `<g font-family="${macFF}">${leftGroup}${rightGroup}</g>`;
+}
 //# sourceMappingURL=status-bar.js.map

package/dist/svg-browser-bar.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Native SVG Chrome browser bar generator (no Playwright).
+ *
+ * Mirrors `generateBrowserBarHtml` in src/browser-bar.ts pixel for pixel.
+ * The original wraps an inline `<svg>` in a CSS-scaled `<div>` with HTML
+ * overlays for the page title, URL, and favicon. This module produces a
+ * single self-contained SVG at the final output pixel dimensions, with text
+ * rendered as native `<path>` via fontkit and an optional embedded favicon
+ * as `<image href="data:...">`.
+ */
+import type { BrowserBarConfig } from './browser-bar.js';
+export interface BrowserBarSvgOptions {
+    config: BrowserBarConfig;
+    /** Logical width (CSS pixels). */
+    width: number;
+    /** Logical height (CSS pixels). */
+    height: number;
+    /**
+     * Output pixel scale. The SVG's `viewBox` is set to the internal Chrome
+     * reference coordinate system; the SVG's `width`/`height` attributes are
+     * set to logical * pixelScale so librsvg rasterizes at output resolution.
+     */
+    pixelScale?: number;
+    /**
+     * Optional pre-fetched favicon, encoded as a `data:image/...;base64,...`
+     * URI. The caller is responsible for fetching the URL and converting it
+     * (mockup.ts handles this in the Sharp pipeline). When absent, the default
+     * grey globe icon is used.
+     */
+    tabIconDataUri?: string;
+}
+/** Generate a complete `<svg>` document for the Chrome browser bar. */
+export declare function generateBrowserBarSvg(opts: BrowserBarSvgOptions): string;

package/dist/svg-browser-bar.js

@@ -0,0 +1,206 @@
+/**
+ * Native SVG Chrome browser bar generator (no Playwright).
+ *
+ * Mirrors `generateBrowserBarHtml` in src/browser-bar.ts pixel for pixel.
+ * The original wraps an inline `<svg>` in a CSS-scaled `<div>` with HTML
+ * overlays for the page title, URL, and favicon. This module produces a
+ * single self-contained SVG at the final output pixel dimensions, with text
+ * rendered as native `<path>` via fontkit and an optional embedded favicon
+ * as `<image href="data:...">`.
+ */
+import { layoutText, measureText, } from './svg-text.js';
+// ── Reference geometry (matches src/browser-bar.ts) ────────────────────
+const REF_W = 2160;
+const REF_H = 129;
+const TAB_OVERFLOW_MR = 51;
+const ADDR_BAR_ML = 174;
+const ADDR_BAR_MR = 126;
+const PROFILE_MR = 102;
+const EAR_R_MR = 16.5;
+// Title text box (matches the HTML overlay div)
+const TITLE_LEFT = 187;
+const TITLE_TOP = 15;
+const TITLE_WIDTH = 260;
+const TITLE_HEIGHT = 30;
+const TITLE_FONT_SIZE = 18;
+// URL text box
+const URL_TOP = 69;
+const URL_HEIGHT = 51;
+const URL_FONT_SIZE = 19.5;
+const URL_LEFT_OFFSET = 58; // from ADDR_BAR_ML
+const URL_RIGHT_INSET = 18; // matches the HTML right calculation
+const FAVICON_LEFT = 152;
+const FAVICON_TOP = 18;
+const FAVICON_BOX = 24;
+const FAVICON_INNER = 21;
+const TITLE_FONT = 'text-regular';
+const URL_FONT = 'text-regular';
+/** Generate a complete `<svg>` document for the Chrome browser bar. */
+export function generateBrowserBarSvg(opts) {
+    const { width, height, config } = opts;
+    const ps = opts.pixelScale ?? 1;
+    const isDark = config.colorScheme === 'dark';
+    const title = config.pageTitle || 'New Tab';
+    const rawUrl = config.url || 'example.com';
+    const url = rawUrl.replace(/^https?:\/\//, '').replace(/\/$/, '');
+    // Derived layout: scale + dynamic right-anchored elements at the reference
+    // viewBox (the final SVG width is set on the outer <svg> element so the
+    // browser/librsvg renders at the requested pixel size).
+    const s = height / REF_H;
+    const iw = Math.round(width / s); // internal width at reference scale
+    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;
+    const dx = iw - REF_W;
+    // Color tokens (mirror the HTML)
+    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 strip + traffic lights + tab shape ─────────────────────────
+    const tabStrip = `
+<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>`;
+    const bottomEars = `
+<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 (back, forward, reload, address bar pill, sliders icon) ─
+    const 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>`;
+    const toolbarBorder = `<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)"/>`;
+    // ── Title text (centered vertically in TITLE_HEIGHT box) ────────────
+    const titleEllipsized = ellipsizeText(title, TITLE_FONT, TITLE_FONT_SIZE, TITLE_WIDTH);
+    const titleMeasure = measureText({ text: titleEllipsized, fontId: TITLE_FONT, fontSize: TITLE_FONT_SIZE });
+    const titleBaselineY = TITLE_TOP + (TITLE_HEIGHT + TITLE_FONT_SIZE * 0.7) / 2;
+    const titleLayout = layoutText({
+        text: titleEllipsized,
+        fontId: TITLE_FONT,
+        fontSize: TITLE_FONT_SIZE,
+        x: TITLE_LEFT,
+        baselineY: titleBaselineY,
+    });
+    void titleMeasure;
+    const titleSvg = `<path d="${titleLayout.pathData}" fill="${textColor}"/>`;
+    // ── URL text (vertically centered in URL_HEIGHT box) ────────────────
+    const urlLeft = ADDR_BAR_ML + URL_LEFT_OFFSET;
+    const urlBoxWidth = ADDR_BAR_ML + addrBarW - URL_RIGHT_INSET - urlLeft;
+    const urlEllipsized = ellipsizeText(url, URL_FONT, URL_FONT_SIZE, urlBoxWidth);
+    const urlBaselineY = URL_TOP + (URL_HEIGHT + URL_FONT_SIZE * 0.7) / 2;
+    const urlLayout = layoutText({
+        text: urlEllipsized,
+        fontId: URL_FONT,
+        fontSize: URL_FONT_SIZE,
+        x: urlLeft,
+        baselineY: urlBaselineY,
+    });
+    const urlSvg = `<path d="${urlLayout.pathData}" fill="${textSec}"/>`;
+    // ── Favicon (embedded image or default globe) ───────────────────────
+    let faviconSvg;
+    const innerOffset = (FAVICON_BOX - FAVICON_INNER) / 2;
+    if (opts.tabIconDataUri) {
+        // <image> with data URI — librsvg supports this. The original HTML uses
+        // border-radius:4px + object-fit:contain on a 21×21 img. SVG <image>
+        // honors preserveAspectRatio (default xMidYMid meet ≈ contain) and we
+        // clip to a rounded rect via clipPath.
+        faviconSvg = `<g clip-path="url(#bb_clip_favicon)"><image href="${escapeAttr(opts.tabIconDataUri)}" x="${FAVICON_LEFT + innerOffset}" y="${FAVICON_TOP + innerOffset}" width="${FAVICON_INNER}" height="${FAVICON_INNER}" preserveAspectRatio="xMidYMid meet"/></g>`;
+    }
+    else {
+        // Default grey globe (matches the HTML fallback exactly)
+        const cx = FAVICON_LEFT + FAVICON_BOX / 2;
+        const cy = FAVICON_TOP + FAVICON_BOX / 2;
+        faviconSvg = `<g transform="translate(${cx - 10.5},${cy - 10.5}) scale(${21 / 16})"><circle cx="8" cy="8" r="6.5" fill="none" stroke="${iconActive}" stroke-width="1.2"/><ellipse cx="8" cy="8" rx="3" ry="6.5" fill="none" stroke="${iconActive}" stroke-width="1.2"/><line x1="1.5" y1="8" x2="14.5" y2="8" stroke="${iconActive}" stroke-width="1.2"/></g>`;
+    }
+    // ── <defs> ──────────────────────────────────────────────────────────
+    const 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>
+  <clipPath id="bb_clip_favicon">
+    <rect x="${FAVICON_LEFT + innerOffset}" y="${FAVICON_TOP + innerOffset}" width="${FAVICON_INNER}" height="${FAVICON_INNER}" rx="4" ry="4"/>
+  </clipPath>
+</defs>`;
+    const outW = Math.round(width * ps);
+    const outH = Math.round(height * ps);
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${outW}" height="${outH}" viewBox="0 0 ${iw} ${REF_H}" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
+${tabStrip}
+${bottomEars}
+${toolbar}
+${toolbarBorder}
+${faviconSvg}
+${titleSvg}
+${urlSvg}
+${defs}
+</svg>`;
+}
+// ── Helpers ────────────────────────────────────────────────────────────
+function ellipsizeText(text, fontId, fontSize, maxW) {
+    if (maxW <= 0)
+        return '';
+    const measured = measureText({ text, fontId, fontSize });
+    if (measured.width <= maxW)
+        return text;
+    let lo = 0;
+    let hi = text.length;
+    while (lo < hi) {
+        const mid = (lo + hi + 1) >> 1;
+        const candidate = `${text.slice(0, mid)}…`;
+        if (measureText({ text: candidate, fontId, fontSize }).width <= maxW) {
+            lo = mid;
+        }
+        else {
+            hi = mid - 1;
+        }
+    }
+    return lo === 0 ? '…' : `${text.slice(0, lo)}…`;
+}
+function escapeAttr(s) {
+    return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+}
+//# sourceMappingURL=svg-browser-bar.js.map