rnxsim 0.1.505 → 0.1.507

package/scripts/dev-server-scanner.ts

@@ -21,6 +21,7 @@ import { realpathSync } from 'node:fs'
 import { resolve } from 'node:path'
 import {
   buildLoopbackProbeBaseUrl,
+  isLoopbackHost,
   LOOPBACK_PROBE_HOSTNAMES,
   normalizeHostname,
 } from '../src/backend-origin.ts'
@@ -624,24 +625,35 @@ function applyManifest(
     if (launchUrl && !result.patched && !isDirectOneBundleUrl(result.bundleUrl)) {
       result.bundleUrl = withRuntimeConfig(result.port, launchUrl, result.cwd)
     }
-    const rawIconUrl =
-      client.iconUrl || client.ios?.iconUrl || client.icon || client.ios?.icon
-    if (rawIconUrl) {
-      result.iconPath = rawIconUrl
-      if (buildIconProxyUrl) {
-        if (rawIconUrl.startsWith('http')) {
-          result.iconUrl = buildIconProxyUrl(rawIconUrl)
+    const localIcon = client.icon || client.ios?.icon
+    const remoteIcon = client.iconUrl || client.ios?.iconUrl
+    const rawIcon = localIcon || remoteIcon
+    if (rawIcon) {
+      result.iconPath = rawIcon
+      let resolvedIconUrl: string | undefined
+      if (rawIcon.startsWith('http://') || rawIcon.startsWith('https://')) {
+        let isLoopback = false
+        try {
+          const parsed = new URL(rawIcon)
+          isLoopback = isLoopbackHost(parsed.hostname)
+        } catch {}
+        if (buildIconProxyUrl) {
+          if (isLoopback) {
+            resolvedIconUrl = buildIconProxyUrl(rawIcon)
+          }
         } else {
-          const cleanPath = rawIconUrl.replace(/^\.\//, '')
-          result.iconUrl = buildIconProxyUrl(
-            `${buildLoopbackProbeBaseUrl('http:', manifestRes.hostname, result.port)}/assets/${cleanPath}`,
-          )
+          resolvedIconUrl = rawIcon
         }
       } else {
-        // no proxy requested — use the raw URL
-        result.iconUrl = rawIconUrl.startsWith('http')
-          ? rawIconUrl
-          : `${buildLoopbackProbeBaseUrl('http:', manifestRes.hostname, result.port)}/assets/${rawIconUrl.replace(/^\.\//, '')}`
+        const cleanPath = rawIcon.replace(/^\.?\//, '')
+        const assetPath = cleanPath.startsWith('assets/')
+          ? `/${cleanPath}`
+          : `/assets/${cleanPath}`
+        const localUrl = `${buildLoopbackProbeBaseUrl('http:', manifestRes.hostname, result.port)}${assetPath}`
+        resolvedIconUrl = buildIconProxyUrl ? buildIconProxyUrl(localUrl) : localUrl
+      }
+      if (resolvedIconUrl) {
+        result.iconUrl = resolvedIconUrl
       }
     }
   } catch {}
@@ -651,12 +663,17 @@ function applyManifest(
 export function __applyManifestForTests(
   result: DiscoveredServer,
   manifestBody: string,
+  buildIconProxyUrl?: (externalUrl: string) => string,
 ): DiscoveredServer {
-  return applyManifest(result, {
-    statusCode: 200,
-    body: manifestBody,
-    hostname: new URL(result.bundleUrl).hostname,
-  })
+  return applyManifest(
+    result,
+    {
+      statusCode: 200,
+      body: manifestBody,
+      hostname: new URL(result.bundleUrl).hostname,
+    },
+    buildIconProxyUrl,
+  )
 }
 
 // ── name/icon enrichment ────────────────────────────────────────────────────

package/src/screenshots/frame-compose.ts

@@ -5,11 +5,18 @@ import {
   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'
@@ -47,8 +54,10 @@ export interface FramedScreenshotLayout {
   logicalScreenHeight: number
   logicalScreenLeft: number
   logicalScreenTop: number
-  logicalScreenRadius: number
-  logicalFrameRadius: 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
@@ -73,10 +82,12 @@ export function getFramedScreenshotLayout(model: DeviceModel): FramedScreenshotL
     spec.statusBarHeight > 0 &&
     !spec.dynamicIsland &&
     spec.homeIndicatorHeight === 0 &&
-    spec.cornerRadius === 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
@@ -91,7 +102,7 @@ export function getFramedScreenshotLayout(model: DeviceModel): FramedScreenshotL
     logicalFrameLeft + (isLegacyHardware ? LEGACY_SIDE_BEZEL : modernGeometry.screenLeft)
   const logicalScreenTop = isLegacyHardware ? LEGACY_TOP_BEZEL : modernGeometry.screenTop
   const logicalFrameRadius = isLegacyHardware
-    ? LEGACY_FRAME_RADIUS
+    ? cornerRadii(LEGACY_FRAME_RADIUS)
     : modernGeometry.frameRadius
   const buttons: FrameButtonLayout[] = [
     {
@@ -135,13 +146,20 @@ export function getFramedScreenshotLayout(model: DeviceModel): FramedScreenshotL
     logicalScreenHeight,
     logicalScreenLeft,
     logicalScreenTop,
-    logicalScreenRadius: isLegacyHardware ? 0 : modernGeometry.screenRadius,
+    logicalScreenRadius: isLegacyHardware ? cornerRadii(0) : modernGeometry.screenRadius,
     logicalFrameRadius,
+    housing,
     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,
+      : 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
       ? {
@@ -203,7 +221,7 @@ function renderFrameHtml(
         style="
           position:absolute;
           inset:0;
-          border-radius:${layout.logicalFrameRadius}px;
+          border-radius:${formatCornerRadii(layout.logicalFrameRadius)};
           box-shadow:${layout.metallicRingShadow};
           pointer-events:none;
           z-index:10;
@@ -212,6 +230,47 @@ function renderFrameHtml(
     `
     : ''
 
+  // 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
@@ -331,7 +390,7 @@ function renderFrameHtml(
           left:${layout.logicalFrameLeft}px;
           width:${layout.logicalFrameWidth}px;
           height:${layout.logicalFrameHeight}px;
-            border-radius:${layout.logicalFrameRadius}px;
+            border-radius:${formatCornerRadii(layout.logicalFrameRadius)};
             box-sizing:border-box;
             overflow:visible;
             background:${layout.frameBackground};
@@ -340,6 +399,7 @@ function renderFrameHtml(
         >
           ${buttonsHtml}
           ${ringHtml}
+          ${housingHtml}
           ${legacyHomeButtonHtml}
           <div
             id="screen"
@@ -349,7 +409,7 @@ function renderFrameHtml(
               left:${layout.logicalScreenLeft - layout.logicalFrameLeft}px;
               width:${layout.logicalScreenWidth}px;
               height:${layout.logicalScreenHeight}px;
-              border-radius:${layout.logicalScreenRadius}px;
+              border-radius:${formatCornerRadii(layout.logicalScreenRadius)};
               overflow:hidden;
               background:#000;
             "