autokap 1.0.6 → 1.0.8

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

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

package/dist/svg-browser-bar.js

@@ -0,0 +1,206 @@
+/**
+ * Native SVG Chrome browser bar generator (no Playwright).
+ *
+ * Mirrors `generateBrowserBarHtml` in src/browser-bar.ts pixel for pixel.
+ * The original wraps an inline `<svg>` in a CSS-scaled `<div>` with HTML
+ * overlays for the page title, URL, and favicon. This module produces a
+ * single self-contained SVG at the final output pixel dimensions, with text
+ * rendered as native `<path>` via fontkit and an optional embedded favicon
+ * as `<image href="data:...">`.
+ */
+import { layoutText, measureText, } from './svg-text.js';
+// ── Reference geometry (matches src/browser-bar.ts) ────────────────────
+const REF_W = 2160;
+const REF_H = 129;
+const TAB_OVERFLOW_MR = 51;
+const ADDR_BAR_ML = 174;
+const ADDR_BAR_MR = 126;
+const PROFILE_MR = 102;
+const EAR_R_MR = 16.5;
+// Title text box (matches the HTML overlay div)
+const TITLE_LEFT = 187;
+const TITLE_TOP = 15;
+const TITLE_WIDTH = 260;
+const TITLE_HEIGHT = 30;
+const TITLE_FONT_SIZE = 18;
+// URL text box
+const URL_TOP = 69;
+const URL_HEIGHT = 51;
+const URL_FONT_SIZE = 19.5;
+const URL_LEFT_OFFSET = 58; // from ADDR_BAR_ML
+const URL_RIGHT_INSET = 18; // matches the HTML right calculation
+const FAVICON_LEFT = 152;
+const FAVICON_TOP = 18;
+const FAVICON_BOX = 24;
+const FAVICON_INNER = 21;
+const TITLE_FONT = 'text-regular';
+const URL_FONT = 'text-regular';
+/** Generate a complete `<svg>` document for the Chrome browser bar. */
+export function generateBrowserBarSvg(opts) {
+    const { width, height, config } = opts;
+    const ps = opts.pixelScale ?? 1;
+    const isDark = config.colorScheme === 'dark';
+    const title = config.pageTitle || 'New Tab';
+    const rawUrl = config.url || 'example.com';
+    const url = rawUrl.replace(/^https?:\/\//, '').replace(/\/$/, '');
+    // Derived layout: scale + dynamic right-anchored elements at the reference
+    // viewBox (the final SVG width is set on the outer <svg> element so the
+    // browser/librsvg renders at the requested pixel size).
+    const s = height / REF_H;
+    const iw = Math.round(width / s); // internal width at reference scale
+    const tabOverflowX = iw - TAB_OVERFLOW_MR;
+    const addrBarW = iw - ADDR_BAR_ML - ADDR_BAR_MR;
+    const profileX = iw - PROFILE_MR;
+    const earRX = iw - EAR_R_MR;
+    const dx = iw - REF_W;
+    // Color tokens (mirror the HTML)
+    const tabStripBg = isDark ? '#1F2020' : '#DEDEDE';
+    const tabBg = isDark ? '#3C3C3C' : '#FFFFFF';
+    const toolbarBg = isDark ? '#3C3C3C' : '#FFFFFF';
+    const addrBarBg = isDark ? '#282828' : '#F1F1F1';
+    const addrIconBg = isDark ? '#3C3C3C' : '#FFFFFF';
+    const borderColor = isDark ? '#454746' : '#CFCFCF';
+    const textColor = isDark ? '#E3E3E3' : '#1D1D1D';
+    const textSec = isDark ? '#C7C7C7' : '#5F6368';
+    const iconActive = isDark ? '#C7C7C7' : '#5F6368';
+    const iconDis = isDark ? '#7B7B7B' : '#BBBFC4';
+    // ── Tab strip + traffic lights + tab shape ─────────────────────────
+    const tabStrip = `
+<g>
+  <rect width="${iw}" height="60" fill="${tabStripBg}"/>
+  <circle cx="40.5" cy="30.75" r="9" fill="#EC6A5E"/>
+  <circle cx="40.5" cy="30.75" r="8.25" stroke="#1F1F1F" stroke-opacity="0.06" stroke-width="1.5"/>
+  <circle cx="70.5" cy="30.75" r="9" fill="#F4BF4F"/>
+  <circle cx="70.5" cy="30.75" r="8.25" stroke="#1F1F1F" stroke-opacity="0.06" stroke-width="1.5"/>
+  <circle cx="100.5" cy="30.75" r="9" fill="#61C554"/>
+  <circle cx="100.5" cy="30.75" r="8.25" stroke="#1F1F1F" stroke-opacity="0.06" stroke-width="1.5"/>
+  <path d="M120 60C129.941 60 138 51.9411 138 42V60H120Z" fill="${tabBg}"/>
+  <path d="M138 24C138 15.7157 144.716 9 153 9H471C479.284 9 486 15.7157 486 24V60H138V24Z" fill="${tabBg}"/>
+  <path d="M457.668 35.5689L456.431 34.3314L460.762 30.0001L456.431 25.6689L457.668 24.4314L461.999 28.7626L466.331 24.4314L467.568 25.6689L463.237 30.0001L467.568 34.3314L466.331 35.5689L461.999 31.2376L457.668 35.5689Z" fill="${textColor}"/>
+  <path d="M504 60C494.059 60 486 51.9411 486 42V60H504Z" fill="${tabBg}"/>
+  <path d="M513.327 31.1749H506.877V28.8249H513.327V22.3499H515.677V28.8249H522.152V31.1749H515.677V37.6249H513.327V31.1749Z" fill="${iconActive}"/>
+  <rect x="${tabOverflowX}" y="9" width="42" height="42" rx="15" fill="${tabBg}"/>
+  <path d="M${tabOverflowX + 21} 33.95L${tabOverflowX + 14.4} 27.35L${tabOverflowX + 16.07} 25.675L${tabOverflowX + 21} 30.625L${tabOverflowX + 25.92} 25.7L${tabOverflowX + 27.6} 27.375L${tabOverflowX + 21} 33.95Z" fill="${textColor}"/>
+</g>`;
+    const bottomEars = `
+<path d="M16.5 60C7.3873 60 0 67.3873 0 76.5V60H16.5Z" fill="${tabStripBg}"/>
+<path d="M${earRX} 60C${earRX + 9.11} 60 ${iw} 67.3873 ${iw} 76.5V60H${earRX}Z" fill="${tabStripBg}"/>`;
+    // ── Toolbar (back, forward, reload, address bar pill, sliders icon) ─
+    const toolbar = `
+<g clip-path="url(#bb_clip_toolbar)">
+  <path d="M0 76C0 67.1634 7.16344 60 16 60H${iw - 16}C${iw - 7.16} 60 ${iw} 67.1634 ${iw} 76V129H0V76Z" fill="${toolbarBg}"/>
+  <path d="M28.3125 95.625L34.5938 101.906L33 103.5L24 94.5L33 85.5L34.5938 87.0938L28.3125 93.375H42V95.625H28.3125Z" fill="${iconDis}"/>
+  <path d="M91.6875 95.625L85.4062 101.906L87 103.5L96 94.5L87 85.5L85.4062 87.0938L91.6875 93.375H78V95.625H91.6875Z" fill="${iconDis}"/>
+  <path d="M141 103.5C138.5 103.5 136.375 102.625 134.625 100.875C132.875 99.125 132 97 132 94.5C132 92 132.875 89.875 134.625 88.125C136.375 86.375 138.5 85.5 141 85.5C142.354 85.5 143.609 85.7812 144.766 86.3438C145.922 86.9062 146.917 87.6562 147.75 88.5938V85.5H150V93H142.5V90.75H146.594C145.99 89.8333 145.198 89.1042 144.219 88.5625C143.24 88.0208 142.167 87.75 141 87.75C139.125 87.75 137.531 88.4062 136.219 89.7188C134.906 91.0312 134.25 92.625 134.25 94.5C134.25 96.375 134.906 97.9688 136.219 99.2812C137.531 100.594 139.125 101.25 141 101.25C142.75 101.25 144.25 100.672 145.5 99.5156C146.75 98.3594 147.469 96.9375 147.656 95.25H149.969C149.781 97.5833 148.833 99.5417 147.125 101.125C145.417 102.708 143.375 103.5 141 103.5Z" fill="${iconActive}"/>
+  <rect x="${ADDR_BAR_ML}" y="69" width="${addrBarW}" height="51" rx="25.5" fill="${addrBarBg}"/>
+  <rect x="${ADDR_BAR_ML + 7.5}" y="76.5" width="36" height="36" rx="18" fill="${addrIconBg}"/>
+  <g transform="translate(${ADDR_BAR_ML + 16.5},${76.5 + 9}) scale(1.5)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 6.70898C10.8806 6.70898 11.9998 7.82848 12 9.20898C12 10.5897 10.8807 11.709 9.5 11.709C8.11929 11.709 7 10.5897 7 9.20898C7.00024 7.82848 8.11944 6.70898 9.5 6.70898ZM9.5 8.20898C8.94786 8.20898 8.50024 8.6569 8.5 9.20898C8.5 9.76127 8.94772 10.209 9.5 10.209C10.0523 10.209 10.5 9.76127 10.5 9.20898C10.4998 8.6569 10.0521 8.20898 9.5 8.20898Z" fill="${iconActive}"/>
+    <path d="M6 10H0V8.5H6V10Z" fill="${iconActive}"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 0C3.88071 0 5 1.11929 5 2.5C5 3.88071 3.88071 5 2.5 5C1.11929 5 0 3.88071 0 2.5C0 1.11929 1.11929 0 2.5 0ZM2.5 1.5C1.94772 1.5 1.5 1.94772 1.5 2.5C1.5 3.05228 1.94772 3.5 2.5 3.5C3.05228 3.5 3.5 3.05228 3.5 2.5C3.5 1.94772 3.05228 1.5 2.5 1.5Z" fill="${iconActive}"/>
+    <path d="M12 3.20898H6V1.70898H12V3.20898Z" fill="${iconActive}"/>
+  </g>
+  <path transform="translate(${dx},0)" d="M1994 100.344L1998 97.9688L2002.03 100.344L2000.97 95.8438L2004.44 92.875L1999.84 92.4688L1998 88.1875L1996.16 92.4688L1991.56 92.875L1995.06 95.8438L1994 100.344ZM1990.59 105L1992.56 96.6875L1986 91.0938L1994.62 90.3438L1998 82.5L2001.38 90.375L2010 91.0938L2003.44 96.6875L2005.41 105L1998 100.594L1990.59 105Z" fill="${iconActive}"/>
+  <rect x="${profileX}" y="79.5" width="30" height="30" rx="15" fill="url(#bb_profile_grad)"/>
+  <rect x="${profileX + 0.75}" y="80.25" width="28.5" height="28.5" rx="14.25" stroke="#1F1F1F" stroke-opacity="0.06" stroke-width="1.5"/>
+  <path transform="translate(${dx},0)" d="M2127 105.404C2126.38 105.404 2125.85 105.183 2125.41 104.743C2124.97 104.302 2124.75 103.773 2124.75 103.154C2124.75 102.535 2124.97 102.005 2125.41 101.565C2125.85 101.124 2126.38 100.904 2127 100.904C2127.62 100.904 2128.15 101.124 2128.59 101.565C2129.03 102.005 2129.25 102.535 2129.25 103.154C2129.25 103.773 2129.03 104.302 2128.59 104.743C2128.15 105.183 2127.62 105.404 2127 105.404ZM2127 96.7499C2126.38 96.7499 2125.85 96.5296 2125.41 96.089C2124.97 95.6484 2124.75 95.1187 2124.75 94.5C2124.75 93.8812 2124.97 93.3516 2125.41 92.9109C2125.85 92.4703 2126.38 92.25 2127 92.25C2127.62 92.25 2128.15 92.4703 2128.59 92.9109C2129.03 93.3516 2129.25 93.8812 2129.25 94.5C2129.25 95.1187 2129.03 95.6484 2128.59 96.089C2128.15 96.5296 2127.62 96.7499 2127 96.7499ZM2127 88.0961C2126.38 88.0961 2125.85 87.8758 2125.41 87.4351C2124.97 86.9945 2124.75 86.4649 2124.75 85.8461C2124.75 85.2274 2124.97 84.6977 2125.41 84.2571C2125.85 83.8165 2126.38 83.5962 2127 83.5962C2127.62 83.5962 2128.15 83.8165 2128.59 84.2571C2129.03 84.6977 2129.25 85.2274 2129.25 85.8461C2129.25 86.4649 2129.03 86.9945 2128.59 87.4351C2128.15 87.8758 2127.62 88.0961 2127 88.0961Z" fill="${iconActive}"/>
+</g>`;
+    const toolbarBorder = `<path d="M0 60H${iw}H0M${iw} 130.5H0V127.5H${iw}V130.5ZM${iw} 127.5M0 129V60V129M0 129M${iw} 60V129V60" fill="${borderColor}" mask="url(#bb_mask_toolbar)"/>`;
+    // ── Title text (centered vertically in TITLE_HEIGHT box) ────────────
+    const titleEllipsized = ellipsizeText(title, TITLE_FONT, TITLE_FONT_SIZE, TITLE_WIDTH);
+    const titleMeasure = measureText({ text: titleEllipsized, fontId: TITLE_FONT, fontSize: TITLE_FONT_SIZE });
+    const titleBaselineY = TITLE_TOP + (TITLE_HEIGHT + TITLE_FONT_SIZE * 0.7) / 2;
+    const titleLayout = layoutText({
+        text: titleEllipsized,
+        fontId: TITLE_FONT,
+        fontSize: TITLE_FONT_SIZE,
+        x: TITLE_LEFT,
+        baselineY: titleBaselineY,
+    });
+    void titleMeasure;
+    const titleSvg = `<path d="${titleLayout.pathData}" fill="${textColor}"/>`;
+    // ── URL text (vertically centered in URL_HEIGHT box) ────────────────
+    const urlLeft = ADDR_BAR_ML + URL_LEFT_OFFSET;
+    const urlBoxWidth = ADDR_BAR_ML + addrBarW - URL_RIGHT_INSET - urlLeft;
+    const urlEllipsized = ellipsizeText(url, URL_FONT, URL_FONT_SIZE, urlBoxWidth);
+    const urlBaselineY = URL_TOP + (URL_HEIGHT + URL_FONT_SIZE * 0.7) / 2;
+    const urlLayout = layoutText({
+        text: urlEllipsized,
+        fontId: URL_FONT,
+        fontSize: URL_FONT_SIZE,
+        x: urlLeft,
+        baselineY: urlBaselineY,
+    });
+    const urlSvg = `<path d="${urlLayout.pathData}" fill="${textSec}"/>`;
+    // ── Favicon (embedded image or default globe) ───────────────────────
+    let faviconSvg;
+    const innerOffset = (FAVICON_BOX - FAVICON_INNER) / 2;
+    if (opts.tabIconDataUri) {
+        // <image> with data URI — librsvg supports this. The original HTML uses
+        // border-radius:4px + object-fit:contain on a 21×21 img. SVG <image>
+        // honors preserveAspectRatio (default xMidYMid meet ≈ contain) and we
+        // clip to a rounded rect via clipPath.
+        faviconSvg = `<g clip-path="url(#bb_clip_favicon)"><image href="${escapeAttr(opts.tabIconDataUri)}" x="${FAVICON_LEFT + innerOffset}" y="${FAVICON_TOP + innerOffset}" width="${FAVICON_INNER}" height="${FAVICON_INNER}" preserveAspectRatio="xMidYMid meet"/></g>`;
+    }
+    else {
+        // Default grey globe (matches the HTML fallback exactly)
+        const cx = FAVICON_LEFT + FAVICON_BOX / 2;
+        const cy = FAVICON_TOP + FAVICON_BOX / 2;
+        faviconSvg = `<g transform="translate(${cx - 10.5},${cy - 10.5}) scale(${21 / 16})"><circle cx="8" cy="8" r="6.5" fill="none" stroke="${iconActive}" stroke-width="1.2"/><ellipse cx="8" cy="8" rx="3" ry="6.5" fill="none" stroke="${iconActive}" stroke-width="1.2"/><line x1="1.5" y1="8" x2="14.5" y2="8" stroke="${iconActive}" stroke-width="1.2"/></g>`;
+    }
+    // ── <defs> ──────────────────────────────────────────────────────────
+    const defs = `
+<defs>
+  <linearGradient id="bb_profile_grad" x1="${profileX + 15}" y1="109.5" x2="${profileX + 15}" y2="79.5" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#D5D8E4"/>
+    <stop offset="0.45" stop-color="#D1CAD6"/>
+    <stop offset="1" stop-color="#B7BAD1"/>
+  </linearGradient>
+  <mask id="bb_mask_toolbar" fill="white">
+    <path d="M0 76C0 67.1634 7.16344 60 16 60H${iw - 16}C${iw - 7.16} 60 ${iw} 67.1634 ${iw} 76V129H0V76Z"/>
+  </mask>
+  <clipPath id="bb_clip_toolbar">
+    <path d="M0 76C0 67.1634 7.16344 60 16 60H${iw - 16}C${iw - 7.16} 60 ${iw} 67.1634 ${iw} 76V129H0V76Z"/>
+  </clipPath>
+  <clipPath id="bb_clip_favicon">
+    <rect x="${FAVICON_LEFT + innerOffset}" y="${FAVICON_TOP + innerOffset}" width="${FAVICON_INNER}" height="${FAVICON_INNER}" rx="4" ry="4"/>
+  </clipPath>
+</defs>`;
+    const outW = Math.round(width * ps);
+    const outH = Math.round(height * ps);
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${outW}" height="${outH}" viewBox="0 0 ${iw} ${REF_H}" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
+${tabStrip}
+${bottomEars}
+${toolbar}
+${toolbarBorder}
+${faviconSvg}
+${titleSvg}
+${urlSvg}
+${defs}
+</svg>`;
+}
+// ── Helpers ────────────────────────────────────────────────────────────
+function ellipsizeText(text, fontId, fontSize, maxW) {
+    if (maxW <= 0)
+        return '';
+    const measured = measureText({ text, fontId, fontSize });
+    if (measured.width <= maxW)
+        return text;
+    let lo = 0;
+    let hi = text.length;
+    while (lo < hi) {
+        const mid = (lo + hi + 1) >> 1;
+        const candidate = `${text.slice(0, mid)}…`;
+        if (measureText({ text: candidate, fontId, fontSize }).width <= maxW) {
+            lo = mid;
+        }
+        else {
+            hi = mid - 1;
+        }
+    }
+    return lo === 0 ? '…' : `${text.slice(0, lo)}…`;
+}
+function escapeAttr(s) {
+    return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+}
+//# sourceMappingURL=svg-browser-bar.js.map

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;