autokap 1.0.6 → 1.0.8

package/dist/status-bar-render.js

@@ -0,0 +1,410 @@
+/**
+ * Status bar PNG renderer — uses satori (CSS flexbox engine) + resvg for
+ * pixel-perfect parity with the HTML status bar used on the client.
+ *
+ * The layout code mirrors generateStatusBarHtml() from status-bar.ts exactly:
+ * same flex containers, gaps, font sizes, and icon dimensions. satori measures
+ * text widths using the actual SF Pro font metrics (via opentype.js), so
+ * spacing is identical to what a browser produces.
+ *
+ * Fonts are decompressed from woff2 → TTF on first use (wawoff2) and cached.
+ */
+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';
+let fontCache = null;
+async function getSatoriFonts() {
+    if (fontCache)
+        return fontCache;
+    const { decompress } = await import('wawoff2');
+    async function decompressFont(base64DataUri) {
+        const raw = base64DataUri.replace(/^data:font\/woff2;base64,/, '');
+        const woff2 = Buffer.from(raw, 'base64');
+        const ttf = await decompress(woff2);
+        return ttf.buffer.slice(ttf.byteOffset, ttf.byteOffset + ttf.byteLength);
+    }
+    // SF Pro subset fonts may be variable fonts (fvar table). opentype.js
+    // (used by satori) crashes on some fvar entries. We strip the fvar
+    // table from the decompressed TTF to work around this.
+    async function decompressFontSafe(base64DataUri) {
+        const data = await decompressFont(base64DataUri);
+        return stripFvarTable(data);
+    }
+    fontCache = [
+        { name: 'SF Pro Text', data: await decompressFontSafe(SF_PRO_TEXT_REGULAR), weight: 400, style: 'normal' },
+        { name: 'SF Pro Text', data: await decompressFontSafe(SF_PRO_TEXT_SEMIBOLD), weight: 600, style: 'normal' },
+        { name: 'SF Pro Display', data: await decompressFontSafe(SF_PRO_DISPLAY_REGULAR), weight: 400, style: 'normal' },
+        { name: 'SF Pro Display', data: await decompressFontSafe(SF_PRO_DISPLAY_SEMIBOLD), weight: 600, style: 'normal' },
+        { name: 'SF Pro Symbols', data: await decompressFontSafe(SF_PRO_SYMBOLS), weight: 400, style: 'normal' },
+    ];
+    return fontCache;
+}
+/**
+ * Strip the 'fvar' (and related 'gvar', 'STAT') tables from an sfnt font.
+ * opentype.js crashes on variable font fvar tables with missing name entries.
+ * Removing fvar makes the font static, which is fine for our fixed-weight subsets.
+ */
+function stripFvarTable(data) {
+    const view = new DataView(data);
+    // sfnt header: sfVersion(4) + numTables(2) + searchRange(2) + entrySelector(2) + rangeShift(2)
+    const numTables = view.getUint16(4);
+    const RECORD_SIZE = 16; // Each table record: tag(4) + checksum(4) + offset(4) + length(4)
+    const headerSize = 12;
+    // Collect table records, filtering out fvar/gvar/STAT
+    const tagsToStrip = new Set(['fvar', 'gvar', 'STAT']);
+    const keptRecords = [];
+    for (let i = 0; i < numTables; i++) {
+        const recordOffset = headerSize + i * RECORD_SIZE;
+        const tagBytes = new Uint8Array(data, recordOffset, 4);
+        const tag = String.fromCharCode(...tagBytes);
+        if (!tagsToStrip.has(tag)) {
+            keptRecords.push({
+                tag,
+                checksum: view.getUint32(recordOffset + 4),
+                offset: view.getUint32(recordOffset + 8),
+                length: view.getUint32(recordOffset + 12),
+            });
+        }
+    }
+    if (keptRecords.length === numTables)
+        return data; // Nothing to strip
+    // Rebuild the font: header + new table records + table data
+    const newNumTables = keptRecords.length;
+    const newHeaderSize = 12 + newNumTables * RECORD_SIZE;
+    // Compute total size
+    let totalSize = newHeaderSize;
+    for (const rec of keptRecords) {
+        // Align to 4 bytes
+        totalSize = (totalSize + 3) & ~3;
+        totalSize += rec.length;
+    }
+    const out = new ArrayBuffer(totalSize);
+    const outView = new DataView(out);
+    const outBytes = new Uint8Array(out);
+    // Copy sfnt version
+    outView.setUint32(0, view.getUint32(0));
+    outView.setUint16(4, newNumTables);
+    // Compute search params
+    const entrySelector = Math.floor(Math.log2(newNumTables));
+    const searchRange = (1 << entrySelector) * 16;
+    const rangeShift = newNumTables * 16 - searchRange;
+    outView.setUint16(6, searchRange);
+    outView.setUint16(8, entrySelector);
+    outView.setUint16(10, rangeShift);
+    // Write table records and data
+    let dataOffset = newHeaderSize;
+    for (let i = 0; i < keptRecords.length; i++) {
+        const rec = keptRecords[i];
+        const recordPos = 12 + i * RECORD_SIZE;
+        // Align data offset
+        dataOffset = (dataOffset + 3) & ~3;
+        // Write record
+        for (let j = 0; j < 4; j++)
+            outBytes[recordPos + j] = rec.tag.charCodeAt(j);
+        outView.setUint32(recordPos + 4, rec.checksum);
+        outView.setUint32(recordPos + 8, dataOffset);
+        outView.setUint32(recordPos + 12, rec.length);
+        // Copy table data
+        outBytes.set(new Uint8Array(data, rec.offset, rec.length), dataOffset);
+        dataOffset += rec.length;
+    }
+    return out;
+}
+// ── SVG icon helpers ────────────────────────────────────────────────────
+// Convert inline SVG strings to data URI <img> elements for satori.
+function svgToImg(svgString, width, height) {
+    // Clean up multi-line SVGs — satori's img handler works best with compact SVGs.
+    // Also ensure xmlns is present for standalone SVG rendering.
+    let clean = svgString.replace(/\n\s*/g, ' ').trim();
+    if (!clean.includes('xmlns=')) {
+        clean = clean.replace('<svg ', '<svg xmlns="http://www.w3.org/2000/svg" ');
+    }
+    const encoded = Buffer.from(clean).toString('base64');
+    return {
+        type: 'img',
+        props: {
+            src: `data:image/svg+xml;base64,${encoded}`,
+            width,
+            height,
+            style: { display: 'block' },
+        },
+    };
+}
+// ── Icon SVG generators (same paths as status-bar.ts) ────────────────────
+// Imported from status-bar.ts — these are the same SVG path constants
+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 makeSignalSvg(strength, color, size) {
+    const viewW = 20, viewH = 13;
+    const h = size * (viewH / viewW);
+    const paths = SIGNAL_BAR_PATHS.map((d, i) => `<path d="${d}" fill="${color}" opacity="${i < strength ? 1 : 0.25}"/>`).join('');
+    return `<svg width="${size}" height="${h}" viewBox="0 0 ${viewW} ${viewH}" fill="none" xmlns="http://www.w3.org/2000/svg">${paths}</svg>`;
+}
+function makeWifiSvg(strength, color, size) {
+    const viewW = 18, viewH = 13;
+    const h = size * (viewH / viewW);
+    const tiers = WIFI_TIER_PATHS.map((d, i) => `<path d="${d}" fill="${color}" opacity="${strength >= (3 - i) ? 1 : 0.25}"/>`).join('');
+    return `<svg width="${size}" height="${h}" viewBox="0 0 ${viewW} ${viewH}" fill="none" xmlns="http://www.w3.org/2000/svg">${tiers}</svg>`;
+}
+// Reuse the existing renderBattery from status-bar.ts (it already returns a full <svg> string)
+import { renderBattery as renderBatteryIcon } from './status-bar.js';
+// ── Satori element builders ─────────────────────────────────────────────
+// Mirror the exact HTML structure from generateStatusBarHtml() but as
+// satori-compatible element trees.
+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,
+    },
+};
+function textNode(text, fontSize, color, opts = {}) {
+    const { weight = 400, letterSpacing, fontFamily, maxWidth } = opts;
+    const style = {
+        fontSize,
+        fontWeight: weight,
+        color,
+        lineHeight: 1,
+        whiteSpace: 'nowrap',
+    };
+    if (letterSpacing != null)
+        style.letterSpacing = letterSpacing;
+    if (fontFamily)
+        style.fontFamily = fontFamily;
+    if (maxWidth) {
+        style.maxWidth = maxWidth;
+        style.overflow = 'hidden';
+        style.textOverflow = 'ellipsis';
+    }
+    return { type: 'span', props: { style, children: text } };
+}
+function flexRow(children, style = {}) {
+    const filtered = children.filter(Boolean);
+    return {
+        type: 'div',
+        props: {
+            style: { display: 'flex', alignItems: 'center', ...style },
+            children: filtered,
+        },
+    };
+}
+function buildIPhoneElement(cfg, layout, width, height, color, fontFamily) {
+    const gap = layout.iconGap;
+    const { signal: signalW, wifi: wifiW, battery: batteryW } = layout.iconSize;
+    const signalH = signalW * (13 / 20);
+    const wifiH = wifiW * (13 / 18);
+    const batteryH = batteryW * (16 / 35);
+    const leftGroup = flexRow([
+        textNode(cfg.time, layout.fontSize.time, color, { weight: 600, letterSpacing: -0.4 }),
+    ], { position: 'absolute', left: layout.leftInset, top: 0, height: '100%' });
+    const rightChildren = [
+        svgToImg(makeSignalSvg(cfg.signalStrength, color, signalW), signalW, signalH),
+        cfg.showNetworkType && textNode(cfg.networkType, layout.fontSize.networkType, color, { weight: 600, letterSpacing: 0.2 }),
+        svgToImg(makeWifiSvg(cfg.wifiStrength, color, wifiW), wifiW, wifiH),
+        svgToImg(renderBatteryIcon(cfg.batteryLevel, cfg.batteryCharging, color, batteryW, cfg.colorScheme === 'dark'), batteryW, batteryH),
+    ];
+    const rightGroup = flexRow(rightChildren, {
+        position: 'absolute', right: layout.rightInset, top: 0, height: '100%', gap,
+    });
+    return {
+        type: 'div',
+        props: {
+            style: {
+                position: 'relative', width, height, fontFamily,
+                display: 'flex', overflow: 'hidden',
+            },
+            children: [leftGroup, rightGroup],
+        },
+    };
+}
+function buildIPhoneHomeButtonElement(cfg, layout, width, height, color, fontFamily) {
+    const gap = layout.iconGap;
+    const labelSize = layout.fontSize.networkType;
+    const { signal: signalW, wifi: wifiW, battery: batteryW } = layout.iconSize;
+    const signalH = signalW * (13 / 20);
+    const wifiH = wifiW * (13 / 18);
+    const batteryH = batteryW * (16 / 35);
+    const leftGroup = flexRow([
+        svgToImg(makeSignalSvg(cfg.signalStrength, color, signalW), signalW, signalH),
+        textNode(cfg.carrierName, labelSize, color, { maxWidth: 80 }),
+        cfg.showNetworkType && textNode(cfg.networkType, labelSize - 1, color, { weight: 600 }),
+        svgToImg(makeWifiSvg(cfg.wifiStrength, color, wifiW), wifiW, wifiH),
+    ], { position: 'absolute', left: layout.leftInset, top: 0, height: '100%', gap });
+    const centerGroup = flexRow([
+        textNode(cfg.time, layout.fontSize.time, color, { weight: 600, letterSpacing: -0.4 }),
+    ], { position: 'absolute', left: '50%', top: 0, height: '100%', transform: 'translateX(-50%)' });
+    const rightGroup = flexRow([
+        cfg.showBatteryPercentage && textNode(`${cfg.batteryLevel}%`, labelSize, color),
+        svgToImg(renderBatteryIcon(cfg.batteryLevel, cfg.batteryCharging, color, batteryW, cfg.colorScheme === 'dark'), batteryW, batteryH),
+    ], { position: 'absolute', right: layout.rightInset, top: 0, height: '100%', gap });
+    return {
+        type: 'div',
+        props: {
+            style: { position: 'relative', width, height, fontFamily, display: 'flex', overflow: 'hidden' },
+            children: [leftGroup, centerGroup, rightGroup],
+        },
+    };
+}
+function buildIPadElement(cfg, layout, width, height, color, fontFamily) {
+    const gap = layout.iconGap;
+    const { signal: signalW, wifi: wifiW, battery: batteryW } = layout.iconSize;
+    const signalH = signalW * (13 / 20);
+    const wifiH = wifiW * (13 / 18);
+    const batteryH = batteryW * (16 / 35);
+    const leftChildren = [
+        textNode(cfg.time, layout.fontSize.time, color, { letterSpacing: -0.4 }),
+        !!cfg.date && {
+            type: 'span',
+            props: {
+                style: { fontSize: layout.fontSize.time, fontWeight: 400, color, lineHeight: 1, letterSpacing: -0.4, marginLeft: 16 },
+                children: cfg.date,
+            },
+        },
+    ];
+    const leftGroup = flexRow(leftChildren, {
+        position: 'absolute', left: layout.leftInset, top: 0, height: '100%',
+    });
+    const rightGroup = flexRow([
+        svgToImg(makeSignalSvg(cfg.signalStrength, color, signalW), signalW, signalH),
+        svgToImg(makeWifiSvg(cfg.wifiStrength, color, wifiW), wifiW, wifiH),
+        textNode(`${cfg.batteryLevel}%`, layout.fontSize.networkType, color),
+        svgToImg(renderBatteryIcon(cfg.batteryLevel, cfg.batteryCharging, color, batteryW, cfg.colorScheme === 'dark'), batteryW, batteryH),
+    ], { position: 'absolute', right: layout.rightInset, top: 0, height: '100%', gap });
+    return {
+        type: 'div',
+        props: {
+            style: { position: 'relative', width, height, fontFamily, display: 'flex', overflow: 'hidden' },
+            children: [leftGroup, rightGroup],
+        },
+    };
+}
+function buildMacMenuBarElement(cfg, layout, width, height, color) {
+    const fontSize = layout.fontSize.time;
+    const gap = layout.iconGap;
+    const { wifi: wifiW, battery: batteryW } = layout.iconSize;
+    const wifiH = wifiW * (13 / 18);
+    const batteryH = batteryW * (16 / 35);
+    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";
+    const menuItemNodes = cfg.menuBarItems.map(item => textNode(item, fontSize, color));
+    const leftGroup = flexRow([
+        textNode('\uF8FF', fontSize + 3, color, { fontFamily: symbolsFF }),
+        textNode(cfg.menuBarApp, fontSize, color, { weight: 700 }),
+        flexRow(menuItemNodes, { gap: gap + 10 }),
+    ], { position: 'absolute', left: layout.leftInset, top: 0, height: '100%', gap: gap + 6 });
+    const batteryGroup = flexRow([
+        cfg.showBatteryPercentage && textNode(`${cfg.batteryLevel}%`, fontSize - 1, color),
+        svgToImg(renderBatteryIcon(cfg.batteryLevel, cfg.batteryCharging, color, batteryW, cfg.colorScheme === 'dark'), batteryW, batteryH),
+    ], { gap: 3 });
+    const rightGroup = flexRow([
+        svgToImg(makeWifiSvg(cfg.wifiStrength, color, wifiW), wifiW, wifiH),
+        batteryGroup,
+        textNode('􀊫', fontSize, color, { fontFamily: symbolsFF }),
+        textNode('􀜊', fontSize, color, { fontFamily: symbolsFF }),
+        textNode('􀉭', fontSize, color, { fontFamily: symbolsFF }),
+        cfg.date ? textNode(cfg.date, fontSize, color, { weight: 500 }) : false,
+        textNode(cfg.time, fontSize, color, { weight: 500 }),
+    ], { position: 'absolute', right: layout.rightInset, top: 0, height: '100%', gap: gap + 2 });
+    return {
+        type: 'div',
+        props: {
+            style: { position: 'relative', width, height, fontFamily: macFF, display: 'flex', overflow: 'hidden' },
+            children: [leftGroup, rightGroup],
+        },
+    };
+}
+// ── Public API ────────────────────────────────────────────────────────────
+/**
+ * Render the status bar to a PNG buffer using satori (CSS flexbox) + resvg.
+ * Produces pixel-perfect output matching the HTML status bar on the client.
+ *
+ * @param options  Same options as generateStatusBarHtml()
+ * @param targetWidth  Physical pixel width for the output PNG (e.g. logical × outputScale)
+ */
+export async function renderStatusBarBuffer(options, targetWidth) {
+    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 fontFamily = "'SF Pro Text','SF Pro Display',system-ui,sans-serif";
+    let element;
+    if (options.deviceType === 'iphone-home-button') {
+        element = buildIPhoneHomeButtonElement(cfg, layout, width, height, color, fontFamily);
+    }
+    else if (options.deviceType === 'iphone-dynamic-island' || options.deviceType === 'iphone-notch') {
+        element = buildIPhoneElement(cfg, layout, width, height, color, fontFamily);
+    }
+    else if (options.deviceType === 'mac-notch') {
+        element = buildMacMenuBarElement(cfg, layout, width, height, color);
+    }
+    else {
+        element = buildIPadElement(cfg, layout, width, height, color, fontFamily);
+    }
+    const fonts = await getSatoriFonts();
+    const satori = (await import('satori')).default;
+    const svg = await satori(element, {
+        width,
+        height,
+        fonts: fonts,
+    });
+    // Rasterize at target width (scales up for HiDPI)
+    const { Resvg } = await import('@resvg/resvg-js');
+    const resvg = new Resvg(svg, {
+        fitTo: { mode: 'width', value: targetWidth },
+    });
+    const rendered = resvg.render();
+    return Buffer.from(rendered.asPng());
+}
+//# sourceMappingURL=status-bar-render.js.map

package/dist/status-bar.d.ts

@@ -0,0 +1,53 @@
+export interface StatusBarConfig {
+    time?: string;
+    date?: string;
+    menuBarApp?: string;
+    menuBarItems?: string[];
+    signalStrength?: number;
+    showNetworkType?: boolean;
+    networkType?: string;
+    wifiStrength?: number;
+    batteryLevel?: number;
+    batteryCharging?: boolean;
+    showBatteryPercentage?: boolean;
+    colorScheme?: 'light' | 'dark';
+    carrierName?: string;
+    autoLocale?: boolean;
+}
+export interface StatusBarLayout {
+    leftInset: number;
+    rightInset: number;
+    centerGap?: {
+        left: number;
+        right: number;
+    };
+    fontSize: {
+        time: number;
+        networkType: number;
+    };
+    iconSize: {
+        signal: number;
+        wifi: number;
+        battery: number;
+    };
+    iconGap: number;
+}
+export type StatusBarDeviceType = 'iphone-dynamic-island' | 'iphone-notch' | 'iphone-home-button' | 'ipad' | 'mac-notch';
+export interface StatusBarRenderOptions {
+    config: StatusBarConfig;
+    width: number;
+    height: number;
+    scale: number;
+    deviceType: StatusBarDeviceType;
+    layout?: StatusBarLayout;
+    includeFontStyles?: boolean;
+}
+export declare const STATUS_BAR_FONT_CSS: string;
+export declare function generateStatusBarHtml(options: StatusBarRenderOptions): string;
+export declare function renderBattery(level: number, charging: boolean, color: string, size: number, isDark?: boolean): string;
+/**
+ * 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 declare function generateStatusBarSvg(options: StatusBarRenderOptions): string;