sootsim 0.1.83 → 0.1.84

package/src/screenshots/frame-compose.ts

@@ -0,0 +1,438 @@
+import { BEZEL_PADDING, SIDE_BUTTON_RESERVE } from 'sootsim-engine/ios/chrome-metrics'
+import { getDevice, type DeviceModel } from 'sootsim-engine/settings'
+
+const LEGACY_FRAME_RADIUS = 52
+const LEGACY_SIDE_BEZEL = 18
+const LEGACY_TOP_BEZEL = 42
+const LEGACY_BOTTOM_BEZEL = 96
+const LEGACY_HOME_BUTTON_SIZE = 54
+const LEGACY_HOME_BUTTON_RING = 1.5
+const METALLIC_RING_SHADOW =
+  'inset 0 0 0 0.5px #000, inset 0 0 0 2px #757575, inset 0 0 0 5px #212121'
+const FRAME_OUTLINE_BLEED = 1
+
+type FrameButtonLayout = {
+  side: 'left' | 'right'
+  top: number
+  height: number
+  width: number
+}
+
+type LegacyHomeButtonLayout = {
+  top: number
+  left: number
+  size: number
+  ring: number
+}
+
+export interface FramedScreenshotLayout {
+  model: DeviceModel
+  renderScale: number
+  outerWidth: number
+  outerHeight: number
+  logicalOuterWidth: number
+  logicalOuterHeight: number
+  logicalFrameWidth: number
+  logicalFrameHeight: number
+  logicalFrameLeft: number
+  logicalFrameTop: number
+  logicalScreenWidth: number
+  logicalScreenHeight: number
+  logicalScreenLeft: number
+  logicalScreenTop: number
+  logicalScreenRadius: number
+  logicalFrameRadius: number
+  frameBackground: string
+  frameOutline: string
+  metallicRingShadow: string | null
+  buttons: FrameButtonLayout[]
+  legacyHomeButton: LegacyHomeButtonLayout | null
+  showHomeIndicator: boolean
+  logicalHomeIndicatorStripHeight: number
+}
+
+// Exact shell device frame layout for still exports.
+// Mirrors DeviceFrame's bezel/button geometry while intentionally excluding:
+// - the electron simulator top bar
+// - the browser rail / gutter
+// The screen bitmap itself still comes from the raw bridge screenshot.
+export function getFramedScreenshotLayout(model: DeviceModel): FramedScreenshotLayout {
+  const spec = getDevice(model)
+  const renderScale = spec.scale
+  const isLegacyHardware =
+    !spec.dynamicIsland && spec.homeIndicatorHeight === 0 && spec.cornerRadius === 0
+  const logicalScreenWidth = spec.width
+  const logicalScreenHeight = spec.height
+  const logicalFrameWidth = isLegacyHardware
+    ? spec.width + LEGACY_SIDE_BEZEL * 2
+    : spec.width + BEZEL_PADDING * 2
+  const logicalFrameHeight = isLegacyHardware
+    ? spec.height + LEGACY_TOP_BEZEL + LEGACY_BOTTOM_BEZEL
+    : spec.height + BEZEL_PADDING * 2
+  const logicalFrameLeft = SIDE_BUTTON_RESERVE
+  const logicalFrameTop = FRAME_OUTLINE_BLEED
+  const logicalOuterWidth = logicalFrameWidth + logicalFrameLeft * 2
+  const logicalOuterHeight = logicalFrameHeight + FRAME_OUTLINE_BLEED * 2
+  const logicalScreenLeft =
+    logicalFrameLeft + (isLegacyHardware ? LEGACY_SIDE_BEZEL : BEZEL_PADDING)
+  const logicalScreenTop = isLegacyHardware ? LEGACY_TOP_BEZEL : BEZEL_PADDING
+  const logicalFrameRadius = isLegacyHardware
+    ? LEGACY_FRAME_RADIUS
+    : spec.cornerRadius + BEZEL_PADDING
+  const buttons: FrameButtonLayout[] = [
+    {
+      side: 'right',
+      top: spec.hardwareButtons.lock.top,
+      height: spec.hardwareButtons.lock.height,
+      width: spec.hardwareButtons.width,
+    },
+    {
+      side: 'left',
+      top: spec.hardwareButtons.ringToggle.top,
+      height: spec.hardwareButtons.ringToggle.height,
+      width: spec.hardwareButtons.width,
+    },
+    {
+      side: 'left',
+      top: spec.hardwareButtons.volumeUp.top,
+      height: spec.hardwareButtons.volumeUp.height,
+      width: spec.hardwareButtons.width,
+    },
+    {
+      side: 'left',
+      top: spec.hardwareButtons.volumeDown.top,
+      height: spec.hardwareButtons.volumeDown.height,
+      width: spec.hardwareButtons.width,
+    },
+  ]
+
+  return {
+    model,
+    renderScale,
+    outerWidth: Math.round(logicalOuterWidth * renderScale),
+    outerHeight: Math.round(logicalOuterHeight * renderScale),
+    logicalOuterWidth,
+    logicalOuterHeight,
+    logicalFrameWidth,
+    logicalFrameHeight,
+    logicalFrameLeft,
+    logicalFrameTop,
+    logicalScreenWidth,
+    logicalScreenHeight,
+    logicalScreenLeft,
+    logicalScreenTop,
+    logicalScreenRadius: isLegacyHardware ? 0 : spec.cornerRadius,
+    logicalFrameRadius,
+    frameBackground: isLegacyHardware
+      ? 'linear-gradient(180deg, #1b1c20 0%, #0f1012 42%, #050608 100%)'
+      : '#000000',
+    frameOutline: isLegacyHardware ? '0 0 0 1px #1f2125' : '0 0 0 1px #333',
+    metallicRingShadow: isLegacyHardware ? null : METALLIC_RING_SHADOW,
+    buttons,
+    legacyHomeButton: isLegacyHardware
+      ? {
+          top:
+            LEGACY_TOP_BEZEL +
+            spec.height +
+            (LEGACY_BOTTOM_BEZEL - LEGACY_HOME_BUTTON_SIZE) / 2,
+          left: spec.width / 2 - LEGACY_HOME_BUTTON_SIZE / 2 + LEGACY_SIDE_BEZEL,
+          size: LEGACY_HOME_BUTTON_SIZE,
+          ring: LEGACY_HOME_BUTTON_RING,
+        }
+      : null,
+    showHomeIndicator: spec.homeIndicatorHeight > 0,
+    logicalHomeIndicatorStripHeight: spec.homeIndicatorHeight,
+  }
+}
+
+function renderSideButtonHtml(button: FrameButtonLayout): string {
+  const isRight = button.side === 'right'
+  const clip = isRight ? 'inset(-3px -3px -3px 0)' : 'inset(-3px 0 -3px -3px)'
+  return `
+      <div
+        aria-hidden="true"
+        style="
+          position:absolute;
+          ${isRight ? `right:-${button.width}px;` : `left:-${button.width}px;`}
+          top:${button.top}px;
+          width:${button.width}px;
+          height:${button.height}px;
+          background-color:#212121;
+          border-top-left-radius:${isRight ? 0 : 1.5}px;
+          border-bottom-left-radius:${isRight ? 0 : 1.5}px;
+          border-top-right-radius:${isRight ? 1.5 : 0}px;
+          border-bottom-right-radius:${isRight ? 1.5 : 0}px;
+          box-shadow:
+            inset 0 0.5px 0 #616161,
+            inset 0 -0.5px 0 #3F3F3F,
+            ${isRight ? 'inset -0.5px 0 0 #3F3F3F,' : 'inset 0.5px 0 0 #3F3F3F,'}
+            0 0 0 0.5px #676767,
+            0 0 0 1.5px #000;
+          clip-path:${clip};
+          pointer-events:none;
+          z-index:2;
+        "
+      ></div>
+    `
+}
+
+function renderFrameHtml(
+  layout: FramedScreenshotLayout,
+  rawImageDataUrl: string,
+): string {
+  const buttonsHtml = layout.buttons.map(renderSideButtonHtml).join('')
+
+  const ringHtml = layout.metallicRingShadow
+    ? `
+      <div
+        aria-hidden="true"
+        style="
+          position:absolute;
+          inset:0;
+          border-radius:${layout.logicalFrameRadius}px;
+          box-shadow:${layout.metallicRingShadow};
+          pointer-events:none;
+          z-index:10;
+        "
+      ></div>
+    `
+    : ''
+
+  const legacyHomeButtonHtml = layout.legacyHomeButton
+    ? `
+      <div
+        aria-hidden="true"
+        style="
+          position:absolute;
+          top:${layout.legacyHomeButton.top}px;
+          left:${layout.legacyHomeButton.left}px;
+          width:${layout.legacyHomeButton.size}px;
+          height:${layout.legacyHomeButton.size}px;
+          border-radius:50%;
+          background:
+            radial-gradient(circle at 35% 32%, rgba(62,64,68,0.35) 0%, rgba(17,18,20,0.98) 72%, rgba(8,9,11,1) 100%);
+          box-shadow:
+            inset 0 0 0 1px rgba(255,255,255,0.06),
+            inset 0 0 0 ${layout.legacyHomeButton.ring}px rgba(184,192,204,0.45),
+            0 0 0 1px rgba(0,0,0,0.5);
+          z-index:3;
+          pointer-events:none;
+          display:flex;
+          align-items:center;
+          justify-content:center;
+        "
+      >
+        <div
+          style="
+            width:16px;
+            height:16px;
+            border-radius:4px;
+            box-shadow:inset 0 0 0 1.5px rgba(188,194,202,0.5);
+          "
+        ></div>
+      </div>
+    `
+    : ''
+
+  const homeIndicatorHtml = layout.showHomeIndicator
+    ? `
+      <div
+        aria-hidden="true"
+        style="
+          position:absolute;
+          left:0;
+          right:0;
+          bottom:4px;
+          height:${layout.logicalHomeIndicatorStripHeight}px;
+          display:flex;
+          align-items:center;
+          justify-content:center;
+          pointer-events:none;
+          z-index:10;
+        "
+      >
+        <div
+          style="
+            width:134px;
+            height:5px;
+            border-radius:2.5px;
+            background-color:rgb(150, 150, 150);
+            opacity:0.5;
+          "
+        ></div>
+      </div>
+    `
+    : ''
+
+  return `<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      html, body {
+        margin: 0;
+        width: ${layout.outerWidth}px;
+        height: ${layout.outerHeight}px;
+        background: transparent;
+      }
+      body {
+        overflow: hidden;
+      }
+      img {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="frame-export-root"
+      style="
+        position:relative;
+        width:${layout.outerWidth}px;
+        height:${layout.outerHeight}px;
+        overflow:hidden;
+        background:transparent;
+      "
+    >
+      <div
+        id="frame-scale-layer"
+        style="
+          position:absolute;
+          top:0;
+          left:0;
+          width:${layout.logicalOuterWidth}px;
+          height:${layout.logicalOuterHeight}px;
+          transform:scale(${layout.renderScale});
+          transform-origin:top left;
+          overflow:visible;
+        "
+      >
+        <div
+          id="frame"
+          style="
+          position:absolute;
+          top:${layout.logicalFrameTop}px;
+          left:${layout.logicalFrameLeft}px;
+          width:${layout.logicalFrameWidth}px;
+          height:${layout.logicalFrameHeight}px;
+            border-radius:${layout.logicalFrameRadius}px;
+            box-sizing:border-box;
+            overflow:visible;
+            background:${layout.frameBackground};
+            box-shadow:${layout.frameOutline};
+          "
+        >
+          ${buttonsHtml}
+          ${ringHtml}
+          ${legacyHomeButtonHtml}
+          <div
+            id="screen"
+            style="
+              position:absolute;
+              top:${layout.logicalScreenTop}px;
+              left:${layout.logicalScreenLeft - layout.logicalFrameLeft}px;
+              width:${layout.logicalScreenWidth}px;
+              height:${layout.logicalScreenHeight}px;
+              border-radius:${layout.logicalScreenRadius}px;
+              overflow:hidden;
+              background:#000;
+            "
+          >
+            <img src="${rawImageDataUrl}" alt="" />
+            ${homeIndicatorHtml}
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>`
+}
+
+export async function composeFramedScreenshot(
+  rawPng: Buffer,
+  model: DeviceModel,
+): Promise<Buffer> {
+  const { chromium } = await import('playwright')
+  const browser = await chromium.launch({ headless: true })
+  try {
+    const composer = await createFramedScreenshotComposer(browser)
+    try {
+      return await composer.compose(rawPng, model)
+    } finally {
+      await composer.close()
+    }
+  } finally {
+    await browser.close()
+  }
+}
+
+type BrowserLike = {
+  newContext: (opts: {
+    viewport: { width: number; height: number }
+    deviceScaleFactor: number
+  }) => Promise<{
+    newPage: () => Promise<{
+      setContent: (html: string, opts: { waitUntil: 'load' }) => Promise<void>
+      waitForTimeout: (ms: number) => Promise<void>
+      screenshot: (opts: {
+        type: 'png'
+        clip: { x: number; y: number; width: number; height: number }
+        omitBackground: true
+      }) => Promise<Buffer>
+    }>
+    close: () => Promise<void>
+  }>
+}
+
+type CachedFramePage = {
+  layout: FramedScreenshotLayout
+  context: Awaited<ReturnType<BrowserLike['newContext']>>
+  page: Awaited<ReturnType<Awaited<ReturnType<BrowserLike['newContext']>>['newPage']>>
+}
+
+export async function createFramedScreenshotComposer(browser: BrowserLike) {
+  const cache = new Map<DeviceModel, CachedFramePage>()
+
+  async function getCachedPage(model: DeviceModel): Promise<CachedFramePage> {
+    const existing = cache.get(model)
+    if (existing) return existing
+    const layout = getFramedScreenshotLayout(model)
+    const context = await browser.newContext({
+      viewport: { width: layout.outerWidth, height: layout.outerHeight },
+      deviceScaleFactor: 1,
+    })
+    const page = await context.newPage()
+    const created = { layout, context, page }
+    cache.set(model, created)
+    return created
+  }
+
+  return {
+    async compose(rawPng: Buffer, model: DeviceModel): Promise<Buffer> {
+      const cached = await getCachedPage(model)
+      const rawImageDataUrl = `data:image/png;base64,${rawPng.toString('base64')}`
+      await cached.page.setContent(renderFrameHtml(cached.layout, rawImageDataUrl), {
+        waitUntil: 'load',
+      })
+      await cached.page.waitForTimeout(20)
+      return (await cached.page.screenshot({
+        type: 'png',
+        clip: {
+          x: 0,
+          y: 0,
+          width: cached.layout.outerWidth,
+          height: cached.layout.outerHeight,
+        },
+        omitBackground: true,
+      })) as Buffer
+    },
+    async close(): Promise<void> {
+      for (const entry of cache.values()) {
+        await entry.context.close()
+      }
+      cache.clear()
+    },
+  }
+}

package/src/screenshots/orchestrate.ts

@@ -0,0 +1,244 @@
+import { mkdirSync, readFileSync, writeFileSync } from 'fs'
+import { tmpdir } from 'os'
+import path from 'path'
+import { runFlowPlayback } from '../../cli/commands/flow'
+import {
+  composeMarketingScreenshots,
+  type MarketingBrowserLike,
+  type ComposeResult,
+  type ComposeSlideSource,
+} from './compose'
+import { createFramedScreenshotComposer } from './frame-compose'
+import { loadScreenshotsPlan, type NormalizedScreenshotsPlan } from './schema'
+
+export interface RunScreenshotsOverrides {
+  appTarget?: string | null
+  deviceModel?: string | null
+  simId?: string | null
+  captureOnly?: boolean
+  composeOnly?: boolean
+}
+
+export interface CaptureResult {
+  manifestPath: string
+  rawDir: string
+  framedDir: string
+  rawFiles: string[]
+  framedFiles: string[]
+}
+
+export interface ScreenshotsRunResult {
+  plan: NormalizedScreenshotsPlan
+  capture: CaptureResult
+  compose: ComposeResult | null
+}
+
+function resolveCapturePathMode(plan: NormalizedScreenshotsPlan): 'plan' | 'flow' {
+  if (plan.capture.pathMode === 'plan' || plan.capture.pathMode === 'flow') {
+    return plan.capture.pathMode
+  }
+  return plan.capture.fromDir ? 'flow' : 'plan'
+}
+
+export function buildCaptureFlowArgs(
+  plan: NormalizedScreenshotsPlan,
+  overrides: RunScreenshotsOverrides,
+): string[] {
+  if (!plan.capture.flowPath) {
+    throw new Error('capture flow path is required to build flow args')
+  }
+  const args = [plan.capture.flowPath]
+  const pathMode = resolveCapturePathMode(plan)
+  args.push('--screenshots', plan.capture.rawDir)
+  if (pathMode === 'flow') {
+    args.push('--screenshot-paths', 'flow')
+  }
+  const appTarget = overrides.appTarget ?? plan.appTarget
+  const deviceModel = overrides.deviceModel ?? plan.deviceModel
+  const simId = overrides.simId ?? plan.capture.simId
+  if (appTarget) args.push('--url', appTarget)
+  if (deviceModel) args.push('--device', deviceModel)
+  if (simId) args.push('--sim', simId)
+  if (plan.capture.openInNewSim) args.push('--new')
+  return args
+}
+
+function resolveSlideRawPath(
+  plan: NormalizedScreenshotsPlan,
+  screenshot: string,
+): string {
+  return path.isAbsolute(screenshot)
+    ? screenshot
+    : path.join(plan.capture.rawDir, screenshot)
+}
+
+function resolveCaptureManifestPath(plan: NormalizedScreenshotsPlan): string {
+  return path.join(plan.capture.outDir, 'manifest.json')
+}
+
+async function runCaptureStage(
+  plan: NormalizedScreenshotsPlan,
+  overrides: RunScreenshotsOverrides,
+): Promise<void> {
+  if (!plan.capture.flowPath) return
+  mkdirSync(plan.capture.rawDir, { recursive: true })
+  const args = buildCaptureFlowArgs(plan, overrides)
+  const exitCode = await runFlowPlayback(args)
+  if (exitCode !== 0) {
+    throw new Error(`flow capture failed with exit code ${exitCode}`)
+  }
+}
+
+async function buildFramedSources(
+  plan: NormalizedScreenshotsPlan,
+  browserOverride?: MarketingBrowserLike,
+): Promise<Map<string, string>> {
+  const sources = new Map<string, string>()
+  mkdirSync(plan.capture.framedDir, { recursive: true })
+  const browser =
+    browserOverride ??
+    (await (async () => {
+      const { chromium } = await import('playwright')
+      return chromium.launch({ headless: true })
+    })())
+  try {
+    const composer = await createFramedScreenshotComposer(browser)
+    try {
+      for (const slide of plan.compose.slides) {
+        const rawPath = resolveSlideRawPath(plan, slide.screenshot)
+        const rawBuffer = readFileSync(rawPath)
+        const framedBuffer = await composer.compose(rawBuffer, plan.compose.frame.style)
+        const framedPath = path.join(plan.capture.framedDir, `${slide.assetKey}.png`)
+        writeFileSync(framedPath, framedBuffer)
+        sources.set(slide.id, framedPath)
+      }
+    } finally {
+      await composer.close()
+    }
+  } finally {
+    if (!browserOverride && typeof browser.close === 'function') {
+      await browser.close()
+    }
+  }
+  return sources
+}
+
+function writeCaptureManifest(
+  plan: NormalizedScreenshotsPlan,
+  framedSources: Map<string, string>,
+  effectiveDeviceModel: string | null,
+): CaptureResult {
+  const rawFiles: string[] = []
+  const framedFiles: string[] = []
+  mkdirSync(plan.capture.outDir, { recursive: true })
+  const manifestPath = resolveCaptureManifestPath(plan)
+  const slides = plan.compose.slides.map((slide) => {
+    const rawPath = resolveSlideRawPath(plan, slide.screenshot)
+    const framedPath = framedSources.get(slide.id) ?? null
+    rawFiles.push(rawPath)
+    if (framedPath) framedFiles.push(framedPath)
+    return {
+      id: slide.id,
+      screenshot: slide.screenshot,
+      rawPath,
+      framedPath,
+    }
+  })
+  writeFileSync(
+    manifestPath,
+    JSON.stringify(
+      {
+        generatedAt: new Date().toISOString(),
+        deviceModel: effectiveDeviceModel,
+        mode: plan.capture.mode,
+        rawDir: plan.capture.rawDir,
+        framedDir: plan.capture.framedDir,
+        slides,
+      },
+      null,
+      2,
+    ),
+  )
+  return {
+    manifestPath,
+    rawDir: plan.capture.rawDir,
+    framedDir: plan.capture.framedDir,
+    rawFiles,
+    framedFiles,
+  }
+}
+
+function resolveComposeSources(
+  plan: NormalizedScreenshotsPlan,
+  framedSources: Map<string, string>,
+): ComposeSlideSource[] {
+  return plan.compose.slides.map((slide) => ({
+    slide,
+    imagePath:
+      plan.compose.frame.show === true
+        ? (framedSources.get(slide.id) ?? resolveSlideRawPath(plan, slide.screenshot))
+        : resolveSlideRawPath(plan, slide.screenshot),
+  }))
+}
+
+export async function runScreenshotsPlan(
+  planPath: string,
+  overrides: RunScreenshotsOverrides = {},
+): Promise<ScreenshotsRunResult> {
+  const plan = loadScreenshotsPlan(planPath)
+  const effectiveDeviceModel = overrides.deviceModel ?? plan.deviceModel
+  if (!overrides.composeOnly) {
+    await runCaptureStage(plan, overrides)
+  }
+  const needsFramedSources =
+    plan.capture.mode !== 'raw' ||
+    (!overrides.captureOnly && plan.compose.frame.show === true)
+  const needsSharedBrowser = needsFramedSources || !overrides.captureOnly
+  const sharedBrowser = needsSharedBrowser
+    ? await (async () => {
+        const { chromium } = await import('playwright')
+        return chromium.launch({ headless: true })
+      })()
+    : null
+  try {
+    const framedSources = needsFramedSources
+      ? await buildFramedSources(plan, sharedBrowser ?? undefined)
+      : new Map()
+    const capture = writeCaptureManifest(plan, framedSources, effectiveDeviceModel)
+
+    if (overrides.captureOnly) {
+      return { plan, capture, compose: null }
+    }
+
+    const composeSources = resolveComposeSources(plan, framedSources)
+    const compose = await composeMarketingScreenshots(
+      plan.compose,
+      composeSources,
+      sharedBrowser ?? undefined,
+    )
+    return { plan, capture, compose }
+  } finally {
+    if (sharedBrowser && typeof sharedBrowser.close === 'function') {
+      await sharedBrowser.close()
+    }
+  }
+}
+
+export async function runScreenshotsPlanFromExistingRaw(
+  planPath: string,
+  rawDir: string,
+): Promise<ScreenshotsRunResult> {
+  const plan = loadScreenshotsPlan(planPath)
+  plan.capture.rawDir = rawDir
+  plan.capture.flowPath = null
+  plan.capture.fromDir = rawDir
+  const framedDir = path.join(tmpdir(), 'sootsim-screenshots-framed')
+  plan.capture.framedDir = framedDir
+  const framedSources = await buildFramedSources(plan)
+  const capture = writeCaptureManifest(plan, framedSources, plan.deviceModel)
+  const compose = await composeMarketingScreenshots(
+    plan.compose,
+    resolveComposeSources(plan, framedSources),
+  )
+  return { plan, capture, compose }
+}