autokap 1.9.1 → 1.9.2

package/dist/mockup.d.ts

@@ -204,18 +204,27 @@ export interface MockupOptions {
         height: number;
     };
 }
+/**
+ * Status bar default: shown only on phone mockups. Tablet, laptop, and browser
+ * categories default to off (browser is additionally excluded at render time).
+ * An explicit user choice (`mockupOptions.showStatusBar`) always overrides this.
+ */
+export declare function defaultShowStatusBar(category: DeviceCategory): boolean;
 /**
  * Resolve the two per-variant frame decisions shared by both render paths (CLI direct-upload
  * framing and the cloud legacy-multipart route): a variant's own `mockupOptions` wins, falling
  * back to the viewport-inferred orientation and the deprecated program-level `applyStatusBar`.
  * Pure + exported so the precedence is tested once instead of in two duplicated call sites.
+ *
+ * `showStatusBar` is left `undefined` when neither the variant nor the legacy fallback set it,
+ * so `applyDeviceFrame` can apply the category-aware default (phones on, everything else off).
  */
 export declare function resolveVariantFrameOptions(mockupOptions: MockupOptions | undefined, fallback: {
     orientation?: MockupOrientation;
     showStatusBar?: boolean;
 }): {
     orientation?: MockupOrientation;
-    showStatusBar: boolean;
+    showStatusBar?: boolean;
 };
 export interface ResolvedDeviceFrameDescriptor {
     id: string;

package/dist/mockup.js

@@ -17,21 +17,33 @@ function getSupabaseMockupConfig() {
         serviceKey: process.env.SUPABASE_SERVICE_ROLE_KEY,
     };
 }
+/**
+ * Status bar default: shown only on phone mockups. Tablet, laptop, and browser
+ * categories default to off (browser is additionally excluded at render time).
+ * An explicit user choice (`mockupOptions.showStatusBar`) always overrides this.
+ */
+export function defaultShowStatusBar(category) {
+    return category === 'phone';
+}
 /**
  * Resolve the two per-variant frame decisions shared by both render paths (CLI direct-upload
  * framing and the cloud legacy-multipart route): a variant's own `mockupOptions` wins, falling
  * back to the viewport-inferred orientation and the deprecated program-level `applyStatusBar`.
  * Pure + exported so the precedence is tested once instead of in two duplicated call sites.
+ *
+ * `showStatusBar` is left `undefined` when neither the variant nor the legacy fallback set it,
+ * so `applyDeviceFrame` can apply the category-aware default (phones on, everything else off).
  */
 export function resolveVariantFrameOptions(mockupOptions, fallback) {
     return {
         orientation: mockupOptions?.orientation ?? fallback.orientation,
-        showStatusBar: mockupOptions?.showStatusBar ?? fallback.showStatusBar ?? false,
+        showStatusBar: mockupOptions?.showStatusBar ?? fallback.showStatusBar,
     };
 }
 const DEFAULT_MOCKUP_OPTIONS = {
     orientation: 'portrait',
     outputScale: 2,
+    // Placeholder only — applyDeviceFrame re-resolves this per device category (see defaultShowStatusBar).
     showStatusBar: true,
     showSafeAreaTop: true,
     showSafeAreaBottom: true,
@@ -523,6 +535,9 @@ export async function applyDeviceFrame(screenshot, deviceId, options) {
     if (!config)
         throw new Error(`Unknown device frame: ${deviceId}`);
     const opts = { ...DEFAULT_MOCKUP_OPTIONS, ...options };
+    // Status bar defaults to on for phones only; tablet/laptop/browser default to off.
+    // An explicit user choice wins; browser is additionally excluded at render time below.
+    opts.showStatusBar = options?.showStatusBar ?? defaultShowStatusBar(config.category);
     const requestedOrientation = opts.orientation ?? 'portrait';
     // Normalize against supported orientations so stale extra configs in Supabase
     // do not override landscape-only desktop/tablet/browser frames.

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

@@ -1,10 +1,18 @@
 /**
- * Safari macOS browser bar — uses the Figma-exported asset directly.
+ * Safari macOS browser bar — RECONSTRUCTED layout (not a stretched asset).
  *
- * Reference SVG: assets/frames/Safari tool bar.svg (1299×88, single-row toolbar).
- * The asset is embedded as a string constant via `safari-toolbar-asset.ts`
- * (auto-generated). All icons are baked as paths — only the URL inside
- * the address pill is dynamic.
+ * The Figma export (1280×52 visible toolbar) used to be drawn with
+ * `preserveAspectRatio="none"` on a FIXED viewBox, so any target width whose
+ * aspect ratio differed from 1280:52 horizontally squished every icon — worse
+ * the wider the mockup got. This now mirrors the Chrome generator
+ * (`browser-bar.ts`): a height-driven UNIFORM scale + a DYNAMIC-width viewBox,
+ * with the toolbar's icon GLYPHS reused verbatim from the asset but re-anchored
+ *   - left group  (traffic lights, sidebar, back/forward) pinned left,
+ *   - right group (share, open, new tab, tab overview) pinned right via `dx`,
+ *   - center address pill: dynamic width, centered, inner icons follow its edges.
+ * Only the container and pill backgrounds are redrawn; the Figma blur/blend
+ * layers are dropped (resvg ignores them anyway and they are invisible on the
+ * white/dark toolbar). Colors and glyph shapes are preserved from the asset.
  *
  * Two outputs:
  *  - HTML (Playwright preview / React) — inline SVG inside a scaled wrapper

package/dist/safari-browser-bar.js

@@ -1,17 +1,25 @@
 /**
- * Safari macOS browser bar — uses the Figma-exported asset directly.
+ * Safari macOS browser bar — RECONSTRUCTED layout (not a stretched asset).
  *
- * Reference SVG: assets/frames/Safari tool bar.svg (1299×88, single-row toolbar).
- * The asset is embedded as a string constant via `safari-toolbar-asset.ts`
- * (auto-generated). All icons are baked as paths — only the URL inside
- * the address pill is dynamic.
+ * The Figma export (1280×52 visible toolbar) used to be drawn with
+ * `preserveAspectRatio="none"` on a FIXED viewBox, so any target width whose
+ * aspect ratio differed from 1280:52 horizontally squished every icon — worse
+ * the wider the mockup got. This now mirrors the Chrome generator
+ * (`browser-bar.ts`): a height-driven UNIFORM scale + a DYNAMIC-width viewBox,
+ * with the toolbar's icon GLYPHS reused verbatim from the asset but re-anchored
+ *   - left group  (traffic lights, sidebar, back/forward) pinned left,
+ *   - right group (share, open, new tab, tab overview) pinned right via `dx`,
+ *   - center address pill: dynamic width, centered, inner icons follow its edges.
+ * Only the container and pill backgrounds are redrawn; the Figma blur/blend
+ * layers are dropped (resvg ignores them anyway and they are invisible on the
+ * white/dark toolbar). Colors and glyph shapes are preserved from the asset.
  *
  * Two outputs:
  *  - HTML (Playwright preview / React) — inline SVG inside a scaled wrapper
  *  - SVG (sharp / resvg server compositing)
  */
 import { SF_PRO_TEXT_REGULAR, SF_PRO_TEXT_SEMIBOLD, } from './sf-pro-fonts.js';
-import { SAFARI_TOOLBAR_SVG, SAFARI_TOOLBAR_VIEWBOX, SAFARI_URL_PILL, } from './safari-toolbar-asset.js';
+import { SAFARI_TOOLBAR_SVG, SAFARI_TOOLBAR_VIEWBOX, SAFARI_TOOLBAR_REF_W, SAFARI_TOOLBAR_REF_H, SAFARI_URL_PILL, } from './safari-toolbar-asset.js';
 // ── Fonts ────────────────────────────────────────────────────────────────
 const FONT_CSS_HTML = `<style>
 @font-face{font-family:'SF Pro Text';src:local('SF Pro Text'),local('.SFNSText'),url('${SF_PRO_TEXT_REGULAR}') format('woff2');font-weight:400;font-style:normal}
@@ -19,12 +27,71 @@ const FONT_CSS_HTML = `<style>
 </style>`;
 // SVG output: fonts are NOT embedded inline. Resvg-js 2.6.2 does not honor
 // `@font-face url(data:font/woff2;base64,…)` declarations inside SVG style
-// blocks; fonts must instead be supplied via `font.fontFiles` to the Resvg
-// constructor. The browser-bar pipeline (mockup.ts::rasterizeSvg) loads SF
-// Pro Text from disk via `sf-pro-resvg-fonts.ts`. The `font-family` hint on
-// the URL <text> element below remains for any consumer that DOES honor
-// CSS @font-face (a future Resvg release, a different SVG renderer, etc.).
+// blocks; fonts are supplied via `font.fontFiles` to the Resvg constructor by
+// `mockup.ts::rasterizeSvg` (see `sf-pro-resvg-fonts.ts`). The `font-family`
+// hint on the URL <text> element remains for renderers that DO honor it.
 const FF = "'SF Pro Text',-apple-system,BlinkMacSystemFont,system-ui,sans-serif";
+// ── Reference geometry (asset coordinate space, original 88-tall viewBox) ──
+// The cropped viewBox is `0 18 1280 52`; pills/glyphs keep their native y so
+// the vertical layout is identical to the asset — only X is reflowed.
+const REF_W = SAFARI_TOOLBAR_REF_W; // 1280
+const REF_H = SAFARI_TOOLBAR_REF_H; // 52
+const VB_Y = SAFARI_TOOLBAR_VIEWBOX.y; // 18
+const PILL_Y = SAFARI_URL_PILL.y; // 26
+const PILL_H = SAFARI_URL_PILL.height; // 36
+const PILL_RX = 18;
+const SIDEBAR_PILL = { x: 95, w: 54 };
+const NAV_PILL = { x: 163, w: 67 };
+const RIGHT_PILL = { x: 1134, w: 139 };
+const REF_URL_PILL = { x: SAFARI_URL_PILL.x, w: SAFARI_URL_PILL.width }; // 447 / 385
+// macOS traffic lights (cx derived from x + r), y=37 d=14 → cy=44 r=7.
+const TRAFFIC = [
+    { x: 17, color: '#FF736A' },
+    { x: 40, color: '#FEBC2E' },
+    { x: 63, color: '#19C332' },
+];
+// End of the fixed left cluster (back/forward pill right edge).
+const LEFT_BOUND = NAV_PILL.x + NAV_PILL.w; // 230
+// Horizontal breathing room between the address pill and the side clusters.
+const PILL_GAP = 28;
+// ── Icon glyph extraction (reuse the asset's vector paths verbatim) ────────
+// We pull only the icon glyphs (specific fills) out of the baked asset and
+// drop the pill-background / blur / blend layers, which we redraw ourselves.
+const ICON_FILLS = new Set(['#4C4C4C', '#808080', '#C6C6C6', '#E6E6E6']);
+// Light → dark recolor for the reused glyphs (mirrors the asset's dark intent).
+const DARK_ICON = {
+    '#4C4C4C': '#E4E4E4',
+    '#808080': '#8E8E93',
+    '#C6C6C6': '#6E6E73',
+    '#E6E6E6': '#4A4A4C',
+};
+let cachedGlyphs = null;
+function assetGlyphs() {
+    if (cachedGlyphs)
+        return cachedGlyphs;
+    const glyphs = [];
+    const tagRe = /<path\b[^>]*?\/>/g;
+    let m;
+    while ((m = tagRe.exec(SAFARI_TOOLBAR_SVG)) !== null) {
+        const tag = m[0];
+        const dM = tag.match(/\sd="([^"]+)"/);
+        const fM = tag.match(/\sfill="([^"]+)"/);
+        if (!dM || !fM || !ICON_FILLS.has(fM[1]))
+            continue;
+        const xM = dM[1].match(/M\s*(-?[\d.]+)/);
+        glyphs.push({ d: dM[1], fill: fM[1], x0: xM ? parseFloat(xM[1]) : 0 });
+    }
+    cachedGlyphs = glyphs;
+    return glyphs;
+}
+const r = (n) => Math.round(n * 100) / 100;
+function emitGlyph(g, isDark, tx = 0) {
+    if (!g)
+        return '';
+    const fill = isDark ? (DARK_ICON[g.fill] ?? g.fill) : g.fill;
+    const t = tx ? ` transform="translate(${r(tx)} 0)"` : '';
+    return `<path d="${g.d}" fill="${fill}"${t}/>`;
+}
 // ── Helpers ──────────────────────────────────────────────────────────────
 function escText(s) {
     return s
@@ -36,62 +103,76 @@ function escText(s) {
 function cleanUrl(raw) {
     return (raw || 'apple.com').replace(/^https?:\/\//, '').replace(/\/$/, '');
 }
-/** Build the URL <text> overlay placed inside the address pill. */
-function urlTextSvg(url, color) {
-    const cx = SAFARI_URL_PILL.x + SAFARI_URL_PILL.width / 2;
-    const cy = SAFARI_URL_PILL.y + SAFARI_URL_PILL.height / 2;
-    return `<text x="${cx}" y="${cy}" font-family="${FF}" font-size="14" font-weight="510" fill="${color}" text-anchor="middle" dominant-baseline="central">${escText(url)}</text>`;
-}
-/**
- * Strip the asset's outer `<svg ...>` opening tag so we can re-emit it with
- * our own width/height/viewBox, then append a URL text element before `</svg>`.
- */
-function buildSafariSvgInner(url, isDark) {
-    // Asset begins with `<svg width="1299" height="88" viewBox="0 0 1299 88" fill="none" xmlns="...">`
-    // Drop everything up to the end of that opening tag.
-    const openEnd = SAFARI_TOOLBAR_SVG.indexOf('>');
-    const closeStart = SAFARI_TOOLBAR_SVG.lastIndexOf('</svg>');
-    let inner = SAFARI_TOOLBAR_SVG.slice(openEnd + 1, closeStart);
-    if (isDark) {
-        // Minimal dark-mode token swap — keeps the asset usable until a dedicated
-        // dark variant ships. Hardcoded colors map to Safari's dark palette.
-        inner = inner
-            .replace(/fill="white"/g, 'fill="#2C2C2E"')
-            .replace(/fill="#FFFFFF"/gi, 'fill="#2C2C2E"')
-            .replace(/fill="#F7F7F7"/gi, 'fill="#3A3A3C"')
-            .replace(/fill="#4C4C4C"/gi, 'fill="#E4E4E4"')
-            .replace(/fill="#808080"/gi, 'fill="#8E8E93"')
-            .replace(/fill="#C6C6C6"/gi, 'fill="#6E6E73"')
-            .replace(/fill="#E6E6E6"/gi, 'fill="#4A4A4C"');
-    }
+// ── Core: reflowed toolbar SVG at the requested pixel dimensions ───────────
+function buildSafariBarSvg(svgW, svgH, isDark, url) {
+    // Uniform scale driven by height; the viewBox width grows with the target so
+    // icons never stretch — only spacing and the address pill width adapt.
+    const s = svgH / REF_H;
+    const iw = Math.max(REF_W, Math.round(svgW / s));
+    const dx = iw - REF_W; // right-cluster shift
+    // Address pill: centered, dynamic width, clamped so it never collides with
+    // the fixed side clusters.
+    const rightBound = RIGHT_PILL.x + dx; // left edge of the right cluster
+    const maxPillW = Math.max(120, (rightBound - PILL_GAP) - (LEFT_BOUND + PILL_GAP));
+    let pillW = Math.min(720, Math.max(360, Math.round(iw * 0.36)));
+    pillW = Math.min(pillW, maxPillW);
+    let pillX = Math.round(iw / 2 - pillW / 2);
+    pillX = Math.max(LEFT_BOUND + PILL_GAP, Math.min(pillX, rightBound - PILL_GAP - pillW));
+    const pillRight = pillX + pillW;
+    // Tokens
+    const barBg = isDark ? '#2C2C2E' : '#FFFFFF';
+    const pillBg = isDark ? '#3A3A3C' : '#F0F0F0';
+    const border = isDark ? '#1F1F22' : '#E4E4E4';
     const urlColor = isDark ? '#E4E4E4' : '#4C4C4C';
-    return inner + urlTextSvg(url, urlColor);
+    const gl = assetGlyphs();
+    const leftGlyphs = gl.filter(g => g.x0 < 240);
+    const readerGlyph = gl.find(g => g.fill === '#808080' && g.x0 < 640);
+    const reloadGlyph = gl.find(g => g.fill === '#808080' && g.x0 >= 640);
+    const rightGlyphs = gl.filter(g => g.x0 >= 1000);
+    const cy = PILL_Y + PILL_H / 2; // 44
+    const trafficLights = TRAFFIC.map(t => `<circle cx="${t.x + 7}" cy="${cy}" r="7" fill="${t.color}"/>`
+        + `<circle cx="${t.x + 7}" cy="${cy}" r="6.75" fill="none" stroke="#000000" stroke-opacity="0.1" stroke-width="0.5"/>`).join('');
+    const pill = (x, w) => `<rect x="${r(x)}" y="${PILL_Y}" width="${r(w)}" height="${PILL_H}" rx="${PILL_RX}" fill="${pillBg}"/>`;
+    const leftLayer = leftGlyphs.map(g => emitGlyph(g, isDark)).join('');
+    const rightLayer = rightGlyphs.map(g => emitGlyph(g, isDark, dx)).join('');
+    const body = [
+        // Toolbar background (top corners are rounded by the wrapper's clip).
+        `<rect x="0" y="${VB_Y}" width="${iw}" height="${REF_H + 1}" fill="${barBg}"/>`,
+        // Bottom hairline separator.
+        `<rect x="0" y="${VB_Y + REF_H - 0.5}" width="${iw}" height="0.5" fill="${border}"/>`,
+        // Pill backgrounds
+        pill(SIDEBAR_PILL.x, SIDEBAR_PILL.w),
+        pill(NAV_PILL.x, NAV_PILL.w),
+        pill(pillX, pillW),
+        pill(RIGHT_PILL.x + dx, RIGHT_PILL.w),
+        // Glyphs
+        trafficLights,
+        leftLayer,
+        emitGlyph(readerGlyph, isDark, pillX - REF_URL_PILL.x),
+        emitGlyph(reloadGlyph, isDark, pillRight - (REF_URL_PILL.x + REF_URL_PILL.w)),
+        rightLayer,
+        // URL text (centered in the address pill)
+        `<text x="${r(pillX + pillW / 2)}" y="${cy}" font-family="${FF}" font-size="14" font-weight="510" fill="${urlColor}" text-anchor="middle" dominant-baseline="central">${escText(url)}</text>`,
+    ].join('\n');
+    return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${svgW}" height="${svgH}" viewBox="0 ${VB_Y} ${iw} ${REF_H}" preserveAspectRatio="none" fill="none">
+${body}
+</svg>`;
 }
 // ── Generator (HTML, for Playwright client preview) ──────────────────────
 export function generateSafariBrowserBarHtml(options) {
     const { config, width, height, pixelScale = 1 } = options;
     const url = cleanUrl(config.url);
     const isDark = config.colorScheme === 'dark';
-    const inner = buildSafariSvgInner(url, isDark);
-    // The asset's reference is 1299×88. We render it at the target width×height
-    // by setting the SVG width/height directly — viewBox handles the scaling.
-    // pixelScale lets the server multiply for high-DPI raster output.
     const w = width * pixelScale;
     const h = height * pixelScale;
-    const vb = SAFARI_TOOLBAR_VIEWBOX;
-    return `${FONT_CSS_HTML}<div style="width:${w}px;height:${h}px;position:relative;overflow:hidden;line-height:0;font-size:0">
-<svg width="${w}" height="${h}" viewBox="${vb.x} ${vb.y} ${vb.width} ${vb.height}" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" fill="none" style="display:block">${inner}</svg>
-</div>`;
+    const svg = buildSafariBarSvg(w, h, isDark, url);
+    return `${FONT_CSS_HTML}<div style="width:${w}px;height:${h}px;position:relative;overflow:hidden;line-height:0;font-size:0">${svg}</div>`;
 }
 // ── Generator (SVG, for sharp / resvg server compositing) ────────────────
 export function generateSafariBrowserBarSvg(options) {
     const { config, width, height } = options;
     const url = cleanUrl(config.url);
     const isDark = config.colorScheme === 'dark';
-    const inner = buildSafariSvgInner(url, isDark);
-    const vb = SAFARI_TOOLBAR_VIEWBOX;
-    return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${width}" height="${height}" viewBox="${vb.x} ${vb.y} ${vb.width} ${vb.height}" preserveAspectRatio="none" fill="none">
-${inner}
-</svg>`;
+    return buildSafariBarSvg(width, height, isDark, url);
 }
 //# sourceMappingURL=safari-browser-bar.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autokap",
-  "version": "1.9.1",
+  "version": "1.9.2",
   "description": "AI-powered CLI tool for capturing clean screenshots of websites",
   "type": "module",
   "main": "./dist/index.js",