autokap 1.0.7 → 1.0.8

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

@@ -0,0 +1,36 @@
+/**
+ * Native SVG status bar generator (no Playwright).
+ *
+ * Mirrors `generateStatusBarHtml` in src/status-bar.ts pixel for pixel, but
+ * emits a self-contained SVG document instead of HTML/CSS. The SVG is meant
+ * to be rasterized via Sharp inside applyDeviceFrameSharp.
+ *
+ * Layout strategy:
+ *   - Each status bar variant translates its flexbox layout into explicit
+ *     positioning math: text widths come from svg-text.measureText, icons
+ *     have known viewBox dimensions.
+ *   - Icons are inlined as `<path>` elements re-using the exact same path
+ *     data Apple ships in iOS status bar SVG assets (signal/wifi/battery).
+ *   - Text is converted to native `<path>` via svg-text.layoutText so the
+ *     SVG is fully self-contained and font-installation independent.
+ */
+import type { StatusBarConfig, StatusBarLayout, StatusBarDeviceType } from './status-bar.js';
+export interface StatusBarSvgOptions {
+    config: StatusBarConfig;
+    /** Logical width (CSS pixels). Matches the screen rect's logical width. */
+    width: number;
+    /** Logical height (CSS pixels). Matches the status-bar logical height. */
+    height: number;
+    scale: number;
+    deviceType: StatusBarDeviceType;
+    layout?: StatusBarLayout;
+    /**
+     * Output pixel scale. The SVG's `viewBox` is set to logical coordinates so
+     * the layout math is identical to the Playwright HTML pipeline; the SVG's
+     * `width`/`height` attributes are set to logical * pixelScale so librsvg
+     * rasterizes at the requested output resolution. Defaults to 1.
+     */
+    pixelScale?: number;
+}
+/** Generate a complete `<svg>` document for the requested status bar variant. */
+export declare function generateStatusBarSvg(opts: StatusBarSvgOptions): string;

package/dist/svg-status-bar.js

@@ -0,0 +1,597 @@
+/**
+ * Native SVG status bar generator (no Playwright).
+ *
+ * Mirrors `generateStatusBarHtml` in src/status-bar.ts pixel for pixel, but
+ * emits a self-contained SVG document instead of HTML/CSS. The SVG is meant
+ * to be rasterized via Sharp inside applyDeviceFrameSharp.
+ *
+ * Layout strategy:
+ *   - Each status bar variant translates its flexbox layout into explicit
+ *     positioning math: text widths come from svg-text.measureText, icons
+ *     have known viewBox dimensions.
+ *   - Icons are inlined as `<path>` elements re-using the exact same path
+ *     data Apple ships in iOS status bar SVG assets (signal/wifi/battery).
+ *   - Text is converted to native `<path>` via svg-text.layoutText so the
+ *     SVG is fully self-contained and font-installation independent.
+ */
+import { layoutText, measureText, baselineForCenteredText, } from './svg-text.js';
+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,
+};
+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,
+    },
+};
+/** Generate a complete `<svg>` document for the requested status bar variant. */
+export function generateStatusBarSvg(opts) {
+    const cfg = { ...DEFAULT_CONFIG, ...opts.config };
+    const layout = opts.layout ?? DEFAULT_LAYOUTS[opts.deviceType];
+    const { width, height, deviceType } = opts;
+    const ps = opts.pixelScale ?? 1;
+    const color = cfg.colorScheme === 'dark' ? '#FFFFFF' : '#000000';
+    let body = '';
+    switch (deviceType) {
+        case 'iphone-dynamic-island':
+        case 'iphone-notch':
+            body = buildIPhoneStatusBar(cfg, layout, width, height, color);
+            break;
+        case 'iphone-home-button':
+            body = buildIPhoneHomeButtonStatusBar(cfg, layout, width, height, color);
+            break;
+        case 'ipad':
+            body = buildIPadStatusBar(cfg, layout, width, height, color);
+            break;
+        case 'mac-notch':
+            body = buildMacMenuBar(cfg, layout, width, height, color);
+            break;
+    }
+    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 ${width} ${height}" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">${body}</svg>`;
+}
+// ── iPhone Status Bar (notch / dynamic island) ─────────────────────────
+function buildIPhoneStatusBar(cfg, layout, width, height, color) {
+    const timeSize = layout.fontSize.time;
+    const networkSize = layout.fontSize.networkType;
+    const gap = layout.iconGap;
+    const { signal: signalW, wifi: wifiW, battery: batteryW } = layout.iconSize;
+    const isDark = cfg.colorScheme === 'dark';
+    // Time on the left.
+    const timeBaseline = baselineForCenteredText(0, height, 'text-semibold', timeSize);
+    const timeText = layoutText({
+        text: cfg.time,
+        fontId: 'text-semibold',
+        fontSize: timeSize,
+        x: layout.leftInset,
+        baselineY: timeBaseline,
+        letterSpacing: -0.4,
+    });
+    const timePath = `<path d="${timeText.pathData}" fill="${color}"/>`;
+    // Right side: signal · network? · wifi · battery — laid out from RIGHT.
+    // We compute total width and place items left-to-right starting at the
+    // calculated left edge. Vertical centering uses the icon viewBox aspect.
+    const items = [];
+    // Signal
+    const signalH = signalW * (13 / 20);
+    items.push({
+        width: signalW,
+        render: (x) => renderSignalSvg(cfg.signalStrength, color, signalW, x, (height - signalH) / 2),
+    });
+    // Network type label (optional)
+    if (cfg.showNetworkType) {
+        const m = measureText({
+            text: cfg.networkType,
+            fontId: 'text-semibold',
+            fontSize: networkSize,
+            letterSpacing: 0.2,
+        });
+        items.push({
+            width: m.width,
+            render: (x) => {
+                const baseline = baselineForCenteredText(0, height, 'text-semibold', networkSize);
+                const t = layoutText({
+                    text: cfg.networkType,
+                    fontId: 'text-semibold',
+                    fontSize: networkSize,
+                    x,
+                    baselineY: baseline,
+                    letterSpacing: 0.2,
+                });
+                return `<path d="${t.pathData}" fill="${color}"/>`;
+            },
+        });
+    }
+    // WiFi
+    const wifiH = wifiW * (13 / 18);
+    items.push({
+        width: wifiW,
+        render: (x) => renderWifiSvg(cfg.wifiStrength, color, wifiW, x, (height - wifiH) / 2),
+    });
+    // Battery
+    const batteryH = batteryW * (16 / 35);
+    items.push({
+        width: batteryW,
+        render: (x) => renderBatterySvg(cfg.batteryLevel, cfg.batteryCharging, color, batteryW, x, (height - batteryH) / 2, isDark),
+    });
+    const totalRightW = items.reduce((sum, it, i) => sum + it.width + (i > 0 ? gap : 0), 0);
+    let cursorX = width - layout.rightInset - totalRightW;
+    let rightSvg = '';
+    for (let i = 0; i < items.length; i++) {
+        if (i > 0)
+            cursorX += gap;
+        rightSvg += items[i].render(cursorX);
+        cursorX += items[i].width;
+    }
+    return `${timePath}${rightSvg}`;
+}
+// ── iPhone Home Button Status Bar ──────────────────────────────────────
+function buildIPhoneHomeButtonStatusBar(cfg, layout, width, height, color) {
+    const timeSize = layout.fontSize.time;
+    const labelSize = layout.fontSize.networkType;
+    const gap = layout.iconGap;
+    const { signal: signalW, wifi: wifiW, battery: batteryW } = layout.iconSize;
+    const isDark = cfg.colorScheme === 'dark';
+    let svg = '';
+    // ── LEFT: signal · carrier · network? · wifi ──
+    const signalH = signalW * (13 / 20);
+    const wifiH = wifiW * (13 / 18);
+    let lx = layout.leftInset;
+    svg += renderSignalSvg(cfg.signalStrength, color, signalW, lx, (height - signalH) / 2);
+    lx += signalW + gap;
+    // Carrier label (max-width:80px, ellipsized if needed)
+    const carrierBaseline = baselineForCenteredText(0, height, 'text-regular', labelSize);
+    const carrier = ellipsizeText(cfg.carrierName, 'text-regular', labelSize, 80);
+    const carrierLayout = layoutText({
+        text: carrier,
+        fontId: 'text-regular',
+        fontSize: labelSize,
+        x: lx,
+        baselineY: carrierBaseline,
+    });
+    svg += `<path d="${carrierLayout.pathData}" fill="${color}"/>`;
+    lx += carrierLayout.width + gap;
+    // Network badge (optional, semibold, 1px smaller)
+    if (cfg.showNetworkType) {
+        const badgeSize = labelSize - 1;
+        const badgeBaseline = baselineForCenteredText(0, height, 'text-semibold', badgeSize);
+        const badge = layoutText({
+            text: cfg.networkType,
+            fontId: 'text-semibold',
+            fontSize: badgeSize,
+            x: lx,
+            baselineY: badgeBaseline,
+        });
+        svg += `<path d="${badge.pathData}" fill="${color}"/>`;
+        lx += badge.width + gap;
+    }
+    svg += renderWifiSvg(cfg.wifiStrength, color, wifiW, lx, (height - wifiH) / 2);
+    // ── CENTER: time (semibold) ──
+    const timeMeasure = measureText({
+        text: cfg.time,
+        fontId: 'text-semibold',
+        fontSize: timeSize,
+        letterSpacing: -0.4,
+    });
+    const timeBaseline = baselineForCenteredText(0, height, 'text-semibold', timeSize);
+    const timeLayout = layoutText({
+        text: cfg.time,
+        fontId: 'text-semibold',
+        fontSize: timeSize,
+        x: (width - timeMeasure.width) / 2,
+        baselineY: timeBaseline,
+        letterSpacing: -0.4,
+    });
+    svg += `<path d="${timeLayout.pathData}" fill="${color}"/>`;
+    // ── RIGHT: batteryPct · battery icon ──
+    const batteryH = batteryW * (16 / 35);
+    const items = [];
+    if (cfg.showBatteryPercentage) {
+        const text = `${cfg.batteryLevel}%`;
+        const m = measureText({ text, fontId: 'text-regular', fontSize: labelSize });
+        items.push({
+            width: m.width,
+            render: (x) => {
+                const baseline = baselineForCenteredText(0, height, 'text-regular', labelSize);
+                const t = layoutText({
+                    text,
+                    fontId: 'text-regular',
+                    fontSize: labelSize,
+                    x,
+                    baselineY: baseline,
+                });
+                return `<path d="${t.pathData}" fill="${color}"/>`;
+            },
+        });
+    }
+    items.push({
+        width: batteryW,
+        render: (x) => renderBatterySvg(cfg.batteryLevel, cfg.batteryCharging, color, batteryW, x, (height - batteryH) / 2, isDark),
+    });
+    const totalRightW = items.reduce((sum, it, i) => sum + it.width + (i > 0 ? gap : 0), 0);
+    let rx = width - layout.rightInset - totalRightW;
+    for (let i = 0; i < items.length; i++) {
+        if (i > 0)
+            rx += gap;
+        svg += items[i].render(rx);
+        rx += items[i].width;
+    }
+    return svg;
+}
+// ── iPad Status Bar ────────────────────────────────────────────────────
+function buildIPadStatusBar(cfg, layout, width, height, color) {
+    const timeSize = layout.fontSize.time;
+    const labelSize = layout.fontSize.networkType;
+    const gap = layout.iconGap;
+    const { signal: signalW, wifi: wifiW, battery: batteryW } = layout.iconSize;
+    const isDark = cfg.colorScheme === 'dark';
+    let svg = '';
+    // LEFT: time · 16px gap · date
+    const timeBaseline = baselineForCenteredText(0, height, 'text-regular', timeSize);
+    const timeLayout = layoutText({
+        text: cfg.time,
+        fontId: 'text-regular',
+        fontSize: timeSize,
+        x: layout.leftInset,
+        baselineY: timeBaseline,
+        letterSpacing: -0.4,
+    });
+    svg += `<path d="${timeLayout.pathData}" fill="${color}"/>`;
+    if (cfg.date) {
+        const dateLayout = layoutText({
+            text: cfg.date,
+            fontId: 'text-regular',
+            fontSize: timeSize,
+            x: layout.leftInset + timeLayout.width + 16,
+            baselineY: timeBaseline,
+            letterSpacing: -0.4,
+        });
+        svg += `<path d="${dateLayout.pathData}" fill="${color}"/>`;
+    }
+    // RIGHT: signal · wifi · battery% · battery
+    const signalH = signalW * (13 / 20);
+    const wifiH = wifiW * (13 / 18);
+    const batteryH = batteryW * (16 / 35);
+    const items = [];
+    items.push({
+        width: signalW,
+        render: (x) => renderSignalSvg(cfg.signalStrength, color, signalW, x, (height - signalH) / 2),
+    });
+    items.push({
+        width: wifiW,
+        render: (x) => renderWifiSvg(cfg.wifiStrength, color, wifiW, x, (height - wifiH) / 2),
+    });
+    const pctText = `${cfg.batteryLevel}%`;
+    const pctMeasure = measureText({ text: pctText, fontId: 'text-regular', fontSize: labelSize });
+    items.push({
+        width: pctMeasure.width,
+        render: (x) => {
+            const baseline = baselineForCenteredText(0, height, 'text-regular', labelSize);
+            const t = layoutText({
+                text: pctText,
+                fontId: 'text-regular',
+                fontSize: labelSize,
+                x,
+                baselineY: baseline,
+            });
+            return `<path d="${t.pathData}" fill="${color}"/>`;
+        },
+    });
+    items.push({
+        width: batteryW,
+        render: (x) => renderBatterySvg(cfg.batteryLevel, cfg.batteryCharging, color, batteryW, x, (height - batteryH) / 2, isDark),
+    });
+    const totalRightW = items.reduce((sum, it, i) => sum + it.width + (i > 0 ? gap : 0), 0);
+    let rx = width - layout.rightInset - totalRightW;
+    for (let i = 0; i < items.length; i++) {
+        if (i > 0)
+            rx += gap;
+        svg += items[i].render(rx);
+        rx += items[i].width;
+    }
+    return svg;
+}
+// ── macOS Menu Bar ─────────────────────────────────────────────────────
+function buildMacMenuBar(cfg, layout, width, height, color) {
+    const fontSize = layout.fontSize.time;
+    const gap = layout.iconGap;
+    const { wifi: wifiW, battery: batteryW } = layout.iconSize;
+    const isDark = cfg.colorScheme === 'dark';
+    // Mac uses SF Pro Display, not Text.
+    const baseFontId = 'display-regular';
+    const boldFontId = 'display-semibold';
+    const baseline = baselineForCenteredText(0, height, baseFontId, fontSize);
+    const boldBaseline = baselineForCenteredText(0, height, boldFontId, fontSize);
+    let svg = '';
+    // ── LEFT: 􀣺 (apple) · App · Menu items ──
+    // Apple logo: SF Pro Symbols, ~3px larger than text
+    const appleSize = fontSize + 3;
+    const appleBaseline = baselineForCenteredText(0, height, 'symbols', appleSize);
+    let lx = layout.leftInset;
+    const appleLayout = layoutText({
+        text: '\uF8FF',
+        fontId: 'symbols',
+        fontSize: appleSize,
+        x: lx,
+        baselineY: appleBaseline,
+    });
+    svg += `<path d="${appleLayout.pathData}" fill="${color}"/>`;
+    lx += appleLayout.width + (gap + 6);
+    // App name (bold)
+    const appLayout = layoutText({
+        text: cfg.menuBarApp,
+        fontId: boldFontId,
+        fontSize,
+        x: lx,
+        baselineY: boldBaseline,
+    });
+    svg += `<path d="${appLayout.pathData}" fill="${color}"/>`;
+    lx += appLayout.width + (gap + 6);
+    // Menu items (regular, gap+10 between items per the HTML inner flex)
+    const itemGap = gap + 10;
+    for (let i = 0; i < cfg.menuBarItems.length; i++) {
+        const item = cfg.menuBarItems[i];
+        const itemLayout = layoutText({
+            text: item,
+            fontId: baseFontId,
+            fontSize,
+            x: lx,
+            baselineY: baseline,
+        });
+        svg += `<path d="${itemLayout.pathData}" fill="${color}"/>`;
+        lx += itemLayout.width + (i < cfg.menuBarItems.length - 1 ? itemGap : 0);
+    }
+    // ── RIGHT: wifi · [batt% batt] · search · cc · avatar · date · time ──
+    const wifiH = wifiW * (13 / 18);
+    const batteryH = batteryW * (16 / 35);
+    // Each item knows its own width and how to render at a given x.
+    const rightItems = [];
+    rightItems.push({
+        width: wifiW,
+        render: (x) => renderWifiSvg(cfg.wifiStrength, color, wifiW, x, (height - wifiH) / 2),
+    });
+    // Battery cluster: pct text + icon, separated by 3px (matches the HTML
+    // inner flex `gap:3px`).
+    const battPctText = `${cfg.batteryLevel}%`;
+    const battSize = fontSize - 1;
+    const pctMeasure = measureText({ text: battPctText, fontId: baseFontId, fontSize: battSize });
+    const battBaseline = baselineForCenteredText(0, height, baseFontId, battSize);
+    const battClusterW = (cfg.showBatteryPercentage ? pctMeasure.width + 3 : 0) + batteryW;
+    rightItems.push({
+        width: battClusterW,
+        render: (x) => {
+            let s = '';
+            if (cfg.showBatteryPercentage) {
+                const t = layoutText({
+                    text: battPctText,
+                    fontId: baseFontId,
+                    fontSize: battSize,
+                    x,
+                    baselineY: battBaseline,
+                });
+                s += `<path d="${t.pathData}" fill="${color}"/>`;
+                x += pctMeasure.width + 3;
+            }
+            s += renderBatterySvg(cfg.batteryLevel, cfg.batteryCharging, color, batteryW, x, (height - batteryH) / 2, isDark);
+            return s;
+        },
+    });
+    // SF Symbols: search · cc · avatar
+    const symbolBaseline = baselineForCenteredText(0, height, 'symbols', fontSize);
+    const symbolList = [
+        { text: '\u{1002AB}' }, // search
+        { text: '\u{10070A}' }, // control center
+        { text: '\u{10026D}' }, // avatar
+    ];
+    for (const sym of symbolList) {
+        const m = measureText({ text: sym.text, fontId: 'symbols', fontSize });
+        rightItems.push({
+            width: m.width,
+            render: (x) => {
+                const t = layoutText({
+                    text: sym.text,
+                    fontId: 'symbols',
+                    fontSize,
+                    x,
+                    baselineY: symbolBaseline,
+                });
+                return `<path d="${t.pathData}" fill="${color}"/>`;
+            },
+        });
+    }
+    // Date + time (medium weight in the HTML — we approximate with semibold
+    // since our font subset only ships regular/semibold). At 13px the visual
+    // delta vs. true medium is imperceptible.
+    if (cfg.date) {
+        const dateBaseline = baselineForCenteredText(0, height, boldFontId, fontSize);
+        const dateMeasure = measureText({ text: cfg.date, fontId: boldFontId, fontSize });
+        rightItems.push({
+            width: dateMeasure.width,
+            render: (x) => {
+                const t = layoutText({
+                    text: cfg.date,
+                    fontId: boldFontId,
+                    fontSize,
+                    x,
+                    baselineY: dateBaseline,
+                });
+                return `<path d="${t.pathData}" fill="${color}"/>`;
+            },
+        });
+    }
+    const timeBaseline = baselineForCenteredText(0, height, boldFontId, fontSize);
+    const timeMeasure = measureText({ text: cfg.time, fontId: boldFontId, fontSize });
+    rightItems.push({
+        width: timeMeasure.width,
+        render: (x) => {
+            const t = layoutText({
+                text: cfg.time,
+                fontId: boldFontId,
+                fontSize,
+                x,
+                baselineY: timeBaseline,
+            });
+            return `<path d="${t.pathData}" fill="${color}"/>`;
+        },
+    });
+    const rightGap = gap + 2;
+    const totalRightW = rightItems.reduce((sum, it, i) => sum + it.width + (i > 0 ? rightGap : 0), 0);
+    let rx = width - layout.rightInset - totalRightW;
+    for (let i = 0; i < rightItems.length; i++) {
+        if (i > 0)
+            rx += rightGap;
+        svg += rightItems[i].render(rx);
+        rx += rightItems[i].width;
+    }
+    return svg;
+}
+// ── Icon SVG generators ────────────────────────────────────────────────
+//
+// These mirror the SVG output of status-bar.ts's renderSignalBars / renderWifi
+// / renderBattery, but emit a `<g transform="...">` so the icon can be placed
+// at any (x, y) inside the parent SVG instead of being a top-level `<svg>`.
+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',
+];
+const WIFI_TIER_PATHS = [
+    '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',
+    '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',
+    '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 renderSignalSvg(strength, color, size, x, y) {
+    const viewW = 20;
+    const viewH = 13;
+    const scale = size / 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 `<g transform="translate(${fmt(x)},${fmt(y)}) scale(${fmt(scale)})">${paths}</g>`;
+}
+function renderWifiSvg(strength, color, size, x, y) {
+    const viewW = 18;
+    const viewH = 13;
+    const scale = size / 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 `<g transform="translate(${fmt(x)},${fmt(y)}) scale(${fmt(scale)})">${tiers}</g>`;
+}
+function renderBatterySvg(level, charging, color, size, x, y, isDark) {
+    const viewW = 35;
+    const viewH = 16;
+    const scale = size / viewW;
+    if (charging) {
+        const chargingGreen = isDark ? '#0DF07D' : '#32CB58';
+        const chargingBorder = '#ADADB1';
+        const boltColor = color;
+        const inner = `
+      <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}"/>
+    `;
+        return `<g transform="translate(${fmt(x)},${fmt(y)}) scale(${fmt(scale)})">${inner}</g>`;
+    }
+    // Non-charging: outline + nub + level fill.
+    const batteryBorder = '#ADADB1';
+    // The native asset's "fill" path covers the entire interior; we clip it
+    // horizontally based on level by using a `clipPath` on a `<g>` so we don't
+    // touch the path data. The native rendering shows the bar reaching the
+    // right inner edge at 100%, with the standard apple battery curve.
+    // Native left/right inner padding is ~3.26 (matches the path geometry).
+    const innerLeft = 3.258;
+    const innerWidth = 24.422; // 27.68 - 3.258 ≈ inner cavity
+    const fillW = innerWidth * Math.max(0, Math.min(1, level / 100));
+    const fillRect = level > 0
+        ? `<rect x="${fmt(innerLeft)}" y="3.247" width="${fmt(fillW)}" height="9.363" rx="${fmt(2.05)}" ry="${fmt(2.05)}" fill="${color}"/>`
+        : '';
+    const inner = `
+    <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}"/>
+    ${fillRect}
+  `;
+    return `<g transform="translate(${fmt(x)},${fmt(y)}) scale(${fmt(scale)})">${inner}</g>`;
+}
+// ── Helpers ────────────────────────────────────────────────────────────
+/**
+ * Crude monospace ellipsis: shrink the text until measured width fits in
+ * `maxW`. Used for the iPhone home-button carrier label.
+ */
+function ellipsizeText(text, fontId, fontSize, maxW) {
+    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 fmt(n) {
+    return Number.isInteger(n) ? String(n) : (Math.round(n * 1000) / 1000).toString();
+}
+//# sourceMappingURL=svg-status-bar.js.map