autokap 1.0.6 → 1.0.8

package/dist/status-bar.js

@@ -0,0 +1,620 @@
+// ── Status Bar HTML Generator ─────────────────────────────────────────
+// Pure function — works in both server (Playwright) and client (React) contexts.
+// SF Pro fonts are embedded as base64 data URIs (see sf-pro-fonts.ts).
+//
+// Icon shapes and positioning measured pixel-by-pixel from Apple's native
+// iOS status bar reference PNG (402×62 @ 1x for iPhone 16 Pro Dynamic Island).
+const DEFAULT_CONFIG = {
+    time: '9:41',
+    date: 'Sat 1 Mar',
+    menuBarApp: 'Safari',
+    menuBarItems: ['File', 'Edit', 'View', 'History', 'Bookmarks', 'Window', 'Help'],
+    signalStrength: 4,
+    showNetworkType: false,
+    networkType: '5G',
+    wifiStrength: 3,
+    batteryLevel: 100,
+    batteryCharging: false,
+    showBatteryPercentage: true,
+    colorScheme: 'light',
+    carrierName: 'Carrier',
+    autoLocale: true,
+};
+// Measured from Apple's native status bar assets (pixel-level analysis)
+// Reference PNG: 402×62 @ 1x for iPhone 16 Pro Dynamic Island
+// Time "9:41": cap height 13px → SF Pro font-size 17px (semibold, -0.4 tracking)
+// Signal: x:288-307, 4 bars, 4px wide, 2px gap, heights [5,8,11,13]
+// WiFi: x:315-331, 17px wide × 13px tall, filled fan with 3 tiers + gaps
+// Battery: x:339-366, body 25px × 13px, nub 3px, total 28px
+const DEFAULT_LAYOUTS = {
+    'iphone-dynamic-island': {
+        leftInset: 56,
+        rightInset: 36,
+        centerGap: { left: 128, right: 274 },
+        fontSize: { time: 17, networkType: 13 },
+        iconSize: { signal: 20, wifi: 18, battery: 28 },
+        iconGap: 7,
+    },
+    'iphone-notch': {
+        leftInset: 56,
+        rightInset: 36,
+        centerGap: { left: 128, right: 274 },
+        fontSize: { time: 17, networkType: 13 },
+        iconSize: { signal: 20, wifi: 18, battery: 28 },
+        iconGap: 7,
+    },
+    'iphone-home-button': {
+        leftInset: 6,
+        rightInset: 6,
+        fontSize: { time: 14, networkType: 14 },
+        iconSize: { signal: 16, wifi: 14, battery: 24 },
+        iconGap: 4,
+    },
+    'ipad': {
+        leftInset: 24,
+        rightInset: 24,
+        fontSize: { time: 15, networkType: 11 },
+        iconSize: { signal: 17, wifi: 15, battery: 25 },
+        iconGap: 6,
+    },
+    'mac-notch': {
+        leftInset: 12,
+        rightInset: 12,
+        centerGap: { left: 700, right: 936 },
+        fontSize: { time: 13, networkType: 11 },
+        iconSize: { signal: 0, wifi: 14, battery: 22 },
+        iconGap: 8,
+    },
+};
+// ── SF Pro Font Face ──────────────────────────────────────────────────
+// Subset woff2 fonts embedded as base64 data URIs so they work on any OS
+// (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';
+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('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('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('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('SF Pro'), local('.SFNSDisplay-Semibold'), local('SFProDisplay-Semibold'),
+       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 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 fontStyles + buildIPhoneHomeButtonStatusBar(cfg, layout, width, height, color, fontFamily);
+    }
+    if (options.deviceType === 'iphone-dynamic-island' || options.deviceType === 'iphone-notch') {
+        return fontStyles + buildIPhoneStatusBar(cfg, layout, width, height, color, fontFamily);
+    }
+    if (options.deviceType === 'mac-notch') {
+        return fontStyles + buildMacMenuBar(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) {
+    const timeSize = layout.fontSize.time;
+    const networkSize = layout.fontSize.networkType;
+    const gap = layout.iconGap;
+    const { signal: signalW, wifi: wifiW, battery: batteryW } = layout.iconSize;
+    const signalSvg = renderSignalBars(cfg.signalStrength, color, signalW);
+    const wifiSvg = renderWifi(cfg.wifiStrength, color, wifiW);
+    const batterySvg = renderBattery(cfg.batteryLevel, cfg.batteryCharging, color, batteryW, cfg.colorScheme === 'dark');
+    const networkLabel = cfg.showNetworkType
+        ? `<span style="font-size:${networkSize}px;font-weight:600;letter-spacing:0.2px;color:${color};line-height:1;">${escapeHtml(cfg.networkType)}</span>`
+        : '';
+    return `<div style="position:relative;width:${width}px;height:${height}px;font-family:${fontFamily};-webkit-font-smoothing:antialiased;overflow:hidden;">
+  <div style="position:absolute;left:${layout.leftInset}px;top:0;height:100%;display:flex;align-items:center;">
+    <span style="font-size:${timeSize}px;font-weight:600;letter-spacing:-0.4px;color:${color};line-height:1;">${escapeHtml(cfg.time)}</span>
+  </div>
+  <div style="position:absolute;right:${layout.rightInset}px;top:0;height:100%;display:flex;align-items:center;gap:${gap}px;">
+    ${signalSvg}
+    ${networkLabel}
+    ${wifiSvg}
+    ${batterySvg}
+  </div>
+</div>`;
+}
+// ── iPhone Home Button Status Bar (SE / 8 / classic layout) ───────────
+// Authentic iOS ≤ 15 classic status bar:
+//   Left:   signal bars  ·  carrier name (clipped if long)  ·  Wi-Fi fan
+//   Center: time (semibold, perfectly centered)
+//   Right:  battery %  ·  battery icon
+function buildIPhoneHomeButtonStatusBar(cfg, layout, width, height, color, fontFamily) {
+    const timeSize = layout.fontSize.time;
+    const labelSize = layout.fontSize.networkType;
+    const gap = layout.iconGap;
+    const { signal: signalW, wifi: wifiW, battery: batteryW } = layout.iconSize;
+    const signalSvg = renderSignalBars(cfg.signalStrength, color, signalW);
+    const wifiSvg = renderWifi(cfg.wifiStrength, color, wifiW);
+    const batterySvg = renderBattery(cfg.batteryLevel, cfg.batteryCharging, color, batteryW, cfg.colorScheme === 'dark');
+    // Carrier label — classic iOS shows "Carrier" or "Orange" etc., NOT "5G"
+    const carrierLabel = `<span style="font-size:${labelSize}px;font-weight:400;color:${color};line-height:1;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${escapeHtml(cfg.carrierName)}</span>`;
+    // Network type badge (LTE / 4G / 5G) shown after carrier when enabled
+    const networkBadge = cfg.showNetworkType
+        ? `<span style="font-size:${labelSize - 1}px;font-weight:600;color:${color};line-height:1;">${escapeHtml(cfg.networkType)}</span>`
+        : '';
+    const batteryPct = cfg.showBatteryPercentage
+        ? `<span style="font-size:${labelSize}px;font-weight:400;color:${color};line-height:1;">${cfg.batteryLevel}%</span>`
+        : '';
+    return `<div style="position:relative;width:${width}px;height:${height}px;font-family:${fontFamily};-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}px;">
+    ${signalSvg}
+    ${carrierLabel}
+    ${networkBadge}
+    ${wifiSvg}
+  </div>
+  <div style="position:absolute;left:50%;top:0;height:100%;transform:translateX(-50%);display:flex;align-items:center;">
+    <span style="font-size:${timeSize}px;font-weight:600;letter-spacing:-0.4px;color:${color};line-height:1;">${escapeHtml(cfg.time)}</span>
+  </div>
+  <div style="position:absolute;right:${layout.rightInset}px;top:0;height:100%;display:flex;align-items:center;gap:${gap}px;">
+    ${batteryPct}
+    ${batterySvg}
+  </div>
+</div>`;
+}
+// ── iPad Status Bar ────────────────────────────────────────────────────
+function buildIPadStatusBar(cfg, layout, width, height, color, fontFamily) {
+    const timeSize = layout.fontSize.time;
+    const gap = layout.iconGap;
+    const { signal: signalW, wifi: wifiW, battery: batteryW } = layout.iconSize;
+    const signalSvg = renderSignalBars(cfg.signalStrength, color, signalW);
+    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:${layout.fontSize.networkType}px;font-weight:400;color:${color};line-height:1;">${cfg.batteryLevel}%</span>`;
+    const dateLabel = cfg.date
+        ? `<span style="font-size:${timeSize}px;font-weight:400;letter-spacing:-0.4px;color:${color};line-height:1;margin-left:16px;">${escapeHtml(cfg.date)}</span>`
+        : '';
+    return `<div style="position:relative;width:${width}px;height:${height}px;font-family:${fontFamily};-webkit-font-smoothing:antialiased;overflow:hidden;">
+  <div style="position:absolute;left:${layout.leftInset}px;top:0;height:100%;display:flex;align-items:center;">
+    <span style="font-size:${timeSize}px;font-weight:400;letter-spacing:-0.4px;color:${color};line-height:1;">${escapeHtml(cfg.time)}</span>
+    ${dateLabel}
+  </div>
+  <div style="position:absolute;right:${layout.rightInset}px;top:0;height:100%;display:flex;align-items:center;gap:${gap}px;">
+    ${signalSvg}
+    ${wifiSvg}
+    ${batteryLabel}
+    ${batterySvg}
+  </div>
+</div>`;
+}
+// ── macOS Menu Bar ────────────────────────────────────────────────────
+function buildMacMenuBar(cfg, layout, width, height, color, fontFamily) {
+    const fontSize = layout.fontSize.time;
+    const gap = layout.iconGap;
+    const { wifi: wifiW, battery: batteryW } = layout.iconSize;
+    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>`;
+    // 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
+    const searchIcon = sfIcon('􀊫'); // magnifyingglass
+    const ccIcon = sfIcon('􀜊'); // control center (switch.2)
+    const avatarIcon = sfIcon('􀉭'); // person.crop.circle
+    // App name (bold) + menu items (regular weight)
+    const appName = `<span style="font-size:${fontSize}px;font-weight:700;color:${color};line-height:1;">${escapeHtml(cfg.menuBarApp)}</span>`;
+    const menuItems = cfg.menuBarItems.map(item => `<span style="font-size:${fontSize}px;font-weight:400;color:${color};line-height:1;">${item}</span>`).join('');
+    // Date + time for right side
+    const dateTime = cfg.date
+        ? `<span style="font-size:${fontSize}px;font-weight:500;color:${color};line-height:1;">${escapeHtml(cfg.date)}</span>`
+        : '';
+    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
+    // 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}
+    <div style="display:flex;align-items:center;gap:${gap + 10}px;">
+      ${menuItems}
+    </div>
+  </div>
+  <div style="position:absolute;right:${layout.rightInset}px;top:0;height:100%;display:flex;align-items:center;gap:${gap + 2}px;">
+    ${wifiSvg}
+    <div style="display:flex;align-items:center;gap:3px;">
+      ${cfg.showBatteryPercentage ? batteryLabel : ''}
+      ${batterySvg}
+    </div>
+    ${searchIcon}
+    ${ccIcon}
+    ${avatarIcon}
+    ${dateTime}
+    ${timeLabel}
+  </div>
+</div>`;
+}
+// ── SVG Icon Renderers ─────────────────────────────────────────────────
+// Paths extracted from native Apple iOS status bar SVG assets.
+// Signal: 20×13 viewBox, 4 rounded bars
+// WiFi:   18×13 viewBox, 3 tiers (outer arc, inner arc, dot)
+// Battery: 28×13 viewBox, outline + nub + fill
+// Native signal bar paths (from Cellular Connection.svg)
+// Each bar is an individual path, ordered left→right (shortest→tallest)
+const SIGNAL_BAR_PATHS = [
+    'M2.13333 7.53962H1.06667C0.477563 7.53962 0 8.06421 0 8.71132V11.0547C0 11.7018 0.477563 12.2264 1.06667 12.2264H2.13333C2.72244 12.2264 3.2 11.7018 3.2 11.0547V8.71132C3.2 8.06421 2.72244 7.53962 2.13333 7.53962Z',
+    'M7.43411 5.09433H6.36745C5.77834 5.09433 5.30078 5.62652 5.30078 6.28301V11.0377C5.30078 11.6942 5.77834 12.2264 6.36745 12.2264H7.43411C8.02322 12.2264 8.50078 11.6942 8.50078 11.0377V6.28301C8.50078 5.62652 8.02322 5.09433 7.43411 5.09433Z',
+    'M11.7659 2.44528H12.8326C13.4217 2.44528 13.8992 2.97078 13.8992 3.61902V11.0527C13.8992 11.7009 13.4217 12.2264 12.8326 12.2264H11.7659C11.1768 12.2264 10.6992 11.7009 10.6992 11.0527V3.61902C10.6992 2.97078 11.1768 2.44528 11.7659 2.44528Z',
+    'M19.2 1.14623C19.2 0.513183 18.7224 0 18.1333 0H17.0667C16.4776 0 16 0.513183 16 1.14623V11.0802C16 11.7132 16.4776 12.2264 17.0667 12.2264H18.1333C18.7224 12.2264 19.2 11.7132 19.2 11.0802V1.14623Z',
+];
+// Native WiFi paths (from Wifi.svg) — 3 tiers, outer→inner→dot
+const WIFI_TIER_PATHS = [
+    // Tier 3 (outer arc)
+    'M8.5713 2.46628C11.0584 2.46639 13.4504 3.38847 15.2529 5.04195C15.3887 5.1696 15.6056 5.16799 15.7393 5.03834L17.0368 3.77487C17.1045 3.70911 17.1422 3.62004 17.1417 3.52735C17.1411 3.43467 17.1023 3.34603 17.0338 3.28104C12.3028 -1.09368 4.83907 -1.09368 0.108056 3.28104C0.039524 3.34598 0.000639766 3.4346 7.82398e-06 3.52728C-0.000624118 3.61996 0.0370483 3.70906 0.104689 3.77487L1.40255 5.03834C1.53615 5.16819 1.75327 5.1698 1.88893 5.04195C3.69167 3.38836 6.08395 2.46628 8.5713 2.46628Z',
+    // Tier 2 (inner arc)
+    'M8.56795 6.68656C9.92527 6.68647 11.2341 7.19821 12.2403 8.12234C12.3763 8.2535 12.5907 8.25065 12.7234 8.11593L14.0106 6.79663C14.0784 6.72742 14.1161 6.63355 14.1151 6.536C14.1141 6.43844 14.0746 6.34536 14.0054 6.27757C10.9416 3.38672 6.19688 3.38672 3.13305 6.27757C3.06384 6.34536 3.02435 6.43849 3.02345 6.53607C3.02254 6.63366 3.06028 6.72752 3.12822 6.79663L4.41513 8.11593C4.54778 8.25065 4.76215 8.2535 4.89823 8.12234C5.90368 7.19882 7.21152 6.68713 8.56795 6.68656Z',
+    // Tier 1 (dot)
+    'M11.0924 9.48011C11.0943 9.58546 11.0572 9.68703 10.9899 9.76084L8.81327 12.2156C8.74946 12.2877 8.66247 12.3283 8.5717 12.3283C8.48093 12.3283 8.39394 12.2877 8.33013 12.2156L6.1531 9.76084C6.08585 9.68697 6.04886 9.58537 6.05085 9.48002C6.05284 9.37467 6.09365 9.27491 6.16364 9.20429C7.55374 7.8904 9.58966 7.8904 10.9798 9.20429C11.0497 9.27497 11.0904 9.37476 11.0924 9.48011Z',
+];
+function renderSignalBars(strength, color, size) {
+    // Native viewBox: 20×13 (from Cellular Connection.svg)
+    const viewW = 20; // native: 19.2 rounded to 20
+    const viewH = 13;
+    const paths = SIGNAL_BAR_PATHS.map((d, i) => {
+        const opacity = i < strength ? 1 : 0.25;
+        return `<path d="${d}" fill="${color}" opacity="${opacity}"/>`;
+    });
+    const h = size * (viewH / viewW);
+    return `<svg width="${size}" height="${h}" viewBox="0 0 ${viewW} ${viewH}" fill="none" style="display:block;">${paths.join('')}</svg>`;
+}
+function renderWifi(strength, color, size) {
+    // Native viewBox: 18×13 (from Wifi.svg)
+    const viewW = 18;
+    const viewH = 13;
+    // Tiers are ordered outer→inner→dot, mapped to strength 3→2→1
+    const tiers = WIFI_TIER_PATHS.map((d, i) => {
+        const tierLevel = 3 - i; // 3, 2, 1
+        const opacity = strength >= tierLevel ? 1 : 0.25;
+        return `<path d="${d}" fill="${color}" opacity="${opacity}"/>`;
+    });
+    const h = size * (viewH / viewW);
+    return `<svg width="${size}" height="${h}" viewBox="0 0 ${viewW} ${viewH}" fill="none" style="display:block;">${tiers.join('')}</svg>`;
+}
+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
+        const chargingGreen = isDark ? '#0DF07D' : '#32CB58';
+        const chargingBorder = '#ADADB1';
+        const boltColor = color; // black on light, white on dark
+        const w = size;
+        const h = size * (16 / 35);
+        return `<svg width="${w}" height="${h}" viewBox="0 0 35 16" fill="none" style="display:block;">
+      <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}"/>
+    </svg>`;
+    }
+    // Non-charging battery icon (from assets/icons/battery.svg)
+    // ViewBox: 35×16 — paths: 1=inner fill, 2=border (evenodd), 3=nub
+    const batteryBorder = '#ADADB1';
+    const fillColor = color;
+    const w = size;
+    const h = size * (16 / 35);
+    return `<svg width="${w}" height="${h}" viewBox="0 0 35 16" fill="none" style="display:block;">
+    <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="${fillColor}"/>
+    <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}"/>
+  </svg>`;
+}
+// ── Utilities ──────────────────────────────────────────────────────────
+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