peachsim 0.1.527

package/src/screenshots/frame-compose.ts

@@ -0,0 +1,514 @@
+import {
+  LEGACY_BOTTOM_BEZEL,
+  LEGACY_FRAME_RADIUS,
+  LEGACY_HOME_BUTTON_RING,
+  LEGACY_HOME_BUTTON_SIZE,
+  LEGACY_SIDE_BEZEL,
+  LEGACY_TOP_BEZEL,
+  HINGE_BARREL_BACKGROUND,
+  HINGE_BARREL_SHADOW,
+  HOUSING_RAIL_COLOR,
+  HOUSING_RAIL_OUTLINE,
+  SIDE_BUTTON_RESERVE,
+} from 'sootsim-engine/ios/chrome-metrics'
+import {
+  cornerRadii,
+  formatCornerRadii,
+  getDevice,
+  resolveDeviceFrameGeometry,
+  type CornerRadii,
+  type DeviceModel,
+} from 'sootsim-engine/settings'
+import { launchReapedChrome } from '../../../../scripts/lib/reap-browser'
+
+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: CornerRadii
+  logicalFrameRadius: CornerRadii
+  // light rail around a black glass ring; null draws one black body
+  housing: ReturnType<typeof resolveDeviceFrameGeometry>['housing']
+  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
+  // legacy = home-button iPhone (SE). the canvas workspace also has no island /
+  // home indicator / corner radius, but no status bar, so gate on statusBar > 0
+  // to keep it out of the SE shell (mirrors DeviceFrame.isLegacyHardware).
+  const isLegacyHardware =
+    spec.statusBarHeight > 0 &&
+    !spec.dynamicIsland &&
+    spec.homeIndicatorHeight === 0 &&
+    // home-button iphones have a square display, so any corner reads 0
+    spec.cornerRadius.topLeft === 0
+  const logicalScreenWidth = spec.width
+  const logicalScreenHeight = spec.height
+  const modernGeometry = resolveDeviceFrameGeometry(spec)
+  const housing = isLegacyHardware ? null : modernGeometry.housing
+  const logicalFrameWidth = isLegacyHardware
+    ? spec.width + LEGACY_SIDE_BEZEL * 2
+    : modernGeometry.frameWidth
+  const logicalFrameHeight = isLegacyHardware
+    ? spec.height + LEGACY_TOP_BEZEL + LEGACY_BOTTOM_BEZEL
+    : modernGeometry.frameHeight
+  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 : modernGeometry.screenLeft)
+  const logicalScreenTop = isLegacyHardware ? LEGACY_TOP_BEZEL : modernGeometry.screenTop
+  const logicalFrameRadius = isLegacyHardware
+    ? cornerRadii(LEGACY_FRAME_RADIUS)
+    : modernGeometry.frameRadius
+  const buttons: FrameButtonLayout[] = [
+    {
+      side: spec.hardwareButtons.lock.side,
+      top: spec.hardwareButtons.lock.top,
+      height: spec.hardwareButtons.lock.height,
+      width: spec.hardwareButtons.width,
+    },
+    {
+      side: spec.hardwareButtons.ringToggle.side,
+      top: spec.hardwareButtons.ringToggle.top,
+      height: spec.hardwareButtons.ringToggle.height,
+      width: spec.hardwareButtons.width,
+    },
+    {
+      side: spec.hardwareButtons.volumeUp.side,
+      top: spec.hardwareButtons.volumeUp.top,
+      height: spec.hardwareButtons.volumeUp.height,
+      width: spec.hardwareButtons.width,
+    },
+    {
+      side: spec.hardwareButtons.volumeDown.side,
+      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 ? cornerRadii(0) : modernGeometry.screenRadius,
+    logicalFrameRadius,
+    housing,
+    frameBackground: isLegacyHardware
+      ? 'linear-gradient(180deg, #1b1c20 0%, #0f1012 42%, #050608 100%)'
+      : housing
+        ? HOUSING_RAIL_COLOR
+        : '#000000',
+    frameOutline: isLegacyHardware
+      ? '0 0 0 1px #1f2125'
+      : housing
+        ? HOUSING_RAIL_OUTLINE
+        : '0 0 0 1px #333',
+    metallicRingShadow: isLegacyHardware || housing ? 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:${formatCornerRadii(layout.logicalFrameRadius)};
+          box-shadow:${layout.metallicRingShadow};
+          pointer-events:none;
+          z-index:10;
+        "
+      ></div>
+    `
+    : ''
+
+  // black glass ring inside the rail, then the hinge barrel over the leading
+  // rail. the ring carries no z-index so the screen div after it paints on top.
+  const housingHtml = layout.housing
+    ? `
+      <div
+        aria-hidden="true"
+        style="
+          position:absolute;
+          top:${layout.housing.rail.top}px;
+          right:${layout.housing.rail.right}px;
+          bottom:${layout.housing.rail.bottom}px;
+          left:${layout.housing.rail.left}px;
+          border-radius:${formatCornerRadii(layout.housing.glassRadius)};
+          background:#000000;
+          pointer-events:none;
+        "
+      ></div>
+      ${
+        layout.housing.hingeBarrel
+          ? `
+      <div
+        aria-hidden="true"
+        style="
+          position:absolute;
+          top:${layout.housing.hingeBarrel.endInset}px;
+          bottom:${layout.housing.hingeBarrel.endInset}px;
+          left:0;
+          width:${layout.housing.hingeBarrel.width}px;
+          border-radius:${layout.housing.hingeBarrel.width / 2}px 0 0 ${layout.housing.hingeBarrel.width / 2}px;
+          background:${HINGE_BARREL_BACKGROUND};
+          box-shadow:${HINGE_BARREL_SHADOW};
+          pointer-events:none;
+          z-index:11;
+        "
+      ></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:${formatCornerRadii(layout.logicalFrameRadius)};
+            box-sizing:border-box;
+            overflow:visible;
+            background:${layout.frameBackground};
+            box-shadow:${layout.frameOutline};
+          "
+        >
+          ${buttonsHtml}
+          ${ringHtml}
+          ${housingHtml}
+          ${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:${formatCornerRadii(layout.logicalScreenRadius)};
+              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 launchReapedChrome((options) => chromium.launch(options), {
+    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()
+    },
+  }
+}