peachsim 0.1.2179 → 0.1.2182

package/src/expo-swift-host.ts

@@ -1999,7 +1999,16 @@ function targetSettings(units: ExpoSwiftSourceUnit[]) {
   return settings
 }
 
-function expoEntry(units: ExpoSwiftSourceUnit[]): string {
+function oneSDKStamp(oneSDK: ExpoSwiftPreparationOptions['oneSDK']): string {
+  if (!oneSDK) return ''
+  const hash = createHash('sha256')
+  for (const files of [oneSDK.targets, oneSDK.entry])
+    for (const [name, source] of [...files].sort(([a], [b]) => a.localeCompare(b)))
+      hash.update(`${name}\0${source}\0`)
+  return hash.digest('hex')
+}
+
+function expoEntry(units: ExpoSwiftSourceUnit[], oneSDK = false): string {
   // an Objective-C bridge module registers with no Swift of its own
   const namespaces = [...new Set(units.map((unit) => unit.namespace))]
     .filter((namespace) => namespace !== 'PeachExpoApp')
@@ -2015,7 +2024,11 @@ function expoEntry(units: ExpoSwiftSourceUnit[]): string {
     subscribers.length + handlers.length > 0
       ? `; PeachExpoRuntime.registerDelegates(subscribers: [${subscribers.join(', ')}], handlers: [${handlers.join(', ')}])`
       : ''
-  return `import SwiftUI\ninternal import ExpoModulesCore\n${bridgeModules.length ? 'import React\n' : ''}${namespaces.map((namespace) => `import ${namespace}`).join('\n')}\n\n@main struct PeachExpoApp: PeachPackage {\n  init() { MainActor.assumeIsolated { PeachExpoRuntime.register([${units.flatMap((unit) => unit.classes).join(', ')}])${delegates}${bridgeModules.length ? `; RCTModuleHost.register([${bridgeModules.join(', ')}])` : ''} } }\n  func view(props: JSON) -> PeachExpoNativeView { PeachExpoNativeView(props: props) }\n}\n\n@_expose(wasm, "peach_expo_call")\n@_cdecl("peach_expo_call")\n@MainActor public func peachExpoCall(_ payload: UnsafePointer<UInt8>?, _ length: Int32) -> UnsafeMutablePointer<UInt8>? {\n  PeachExpoRuntime.dispatch(payload, length)\n}\n`
+  // a One SDK host component marks its view; every other view is an Expo view
+  const view = oneSDK
+    ? '@ViewBuilder func view(props: JSON) -> some View {\n    if props["oneSDKHost"] != nil { OneSDKUIKitHost(props: props) } else { PeachExpoNativeView(props: props) }\n  }'
+    : 'func view(props: JSON) -> PeachExpoNativeView { PeachExpoNativeView(props: props) }'
+  return `import SwiftUI\ninternal import ExpoModulesCore\n${bridgeModules.length ? 'import React\n' : ''}${oneSDK ? 'import One\nimport OneSDKBindings\n' : ''}${namespaces.map((namespace) => `import ${namespace}`).join('\n')}\n\n@main struct PeachExpoApp: PeachPackage {\n  init() { MainActor.assumeIsolated { PeachExpoRuntime.register([${units.flatMap((unit) => unit.classes).join(', ')}])${delegates}${bridgeModules.length ? `; RCTModuleHost.register([${bridgeModules.join(', ')}])` : ''} } }\n  ${view}\n}\n\n@_expose(wasm, "peach_expo_call")\n@_cdecl("peach_expo_call")\n@MainActor public func peachExpoCall(_ payload: UnsafePointer<UInt8>?, _ length: Int32) -> UnsafeMutablePointer<UInt8>? {\n  PeachExpoRuntime.dispatch(payload, length)\n}\n`
 }
 
 // a compile outlives its client: a dropped open leaves the work running so the
@@ -2153,7 +2166,7 @@ export async function compileExpoSwiftModules(
   installSwiftInputTrace()
   let key: string
   try {
-    key = `${await discoveryKey(root, options.installedWorkspace, true, options.iosTarget, options.moduleRoot)}\0${options.only?.join(',') ?? ''}`
+    key = `${await discoveryKey(root, options.installedWorkspace, true, options.iosTarget, options.moduleRoot)}\0${options.only?.join(',') ?? ''}\0${oneSDKStamp(options.oneSDK)}`
   } catch {
     return compileExpoSwiftModulesTraced(root, base, publishArtifact, options)
   }
@@ -2406,11 +2419,23 @@ async function compileExpoSwiftModulesTraced(
             throw new Error(`conflicting Expo Swift binary source ${name}`)
           files[name] = source
         }
-      files[EXPO_SWIFT_ENTRY] = expoEntry(linked)
+      const settings = targetSettings(linked)
+      if (options.oneSDK) {
+        for (const [name, source] of options.oneSDK.targets) files[name] = source
+        for (const [name, source] of options.oneSDK.entry)
+          files[`Sources/PeachExpoApp/${name}`] = source
+        settings.set('OneSDKBindings', {
+          languageMode: 5,
+          mainActorIsolation: false,
+          swiftFlags: ['-suppress-warnings'],
+          dependencies: [{ kind: 'target', name: 'One' }],
+        })
+      }
+      files[EXPO_SWIFT_ENTRY] = expoEntry(linked, options.oneSDK !== undefined)
       files['Package.swift'] = expoManifest(
         files,
         linked.map((unit) => generations.get(unit) ?? '').join(','),
-        targetSettings(linked),
+        settings,
       )
       const provider = linked.some((unit) => unit.reactNativeProvider)
         ? reactProvider
@@ -2648,7 +2673,11 @@ async function compileExpoSwiftModulesTraced(
       stamps.set(unit, stamp)
       candidates.push(unit)
     }
-    const preparedKey = expoSwiftPreparedKey(base, units, reactProviderStamp)
+    const preparedKey = expoSwiftPreparedKey(
+      base,
+      units,
+      reactProviderStamp + oneSDKStamp(options.oneSDK),
+    )
     if (!publishArtifact) {
       const prepared = preparedExpoSwift.get(preparedKey)
       if (prepared) {

package/src/expo-widgets-bundle.ts

@@ -5,6 +5,7 @@ import path from 'node:path'
 import { promisify } from 'node:util'
 import { stageExpoWidgetAssets } from './expo-widget-assets'
 import { compiledModuleRequestHandler } from './nitro-bundle'
+import { withSwiftRootLock } from './swift-root-lock'
 import type { ExpoWidgetExtension } from '../../peach-engine/src/render-worker/expo-widgetContract'
 
 export const EXPO_WIDGETS_ROUTE = '/__peach/expo-widgets'
@@ -29,18 +30,21 @@ export async function buildExpoWidgetsBundle(
   // output path. 58 reads an optional platform and output and otherwise writes
   // the same package bundle, so one root argument covers both.
   const packageDir = path.dirname(manifest)
-  await promisify(execFile)(
-    process.env.NODE_BINARY || 'node',
-    [path.join(packageDir, 'scripts/build-bundle.mjs'), appRoot],
-    { cwd: appRoot, maxBuffer: 16 * 1024 * 1024 },
+  const runtimeBundle = await withSwiftRootLock(
+    path.join(await fs.realpath(packageDir), 'bundle'),
+    async () => {
+      await promisify(execFile)(
+        process.env.NODE_BINARY || 'node',
+        [path.join(packageDir, 'scripts/build-bundle.mjs'), appRoot],
+        { cwd: appRoot, maxBuffer: 16 * 1024 * 1024 },
+      )
+      return fs.readFile(path.join(packageDir, 'bundle/build/ExpoWidgets.bundle'), 'utf8')
+    },
   )
   const catalog = await stageExpoWidgetAssets(appRoot, origin)
   return {
     metadata: {
-      runtimeBundle: await fs.readFile(
-        path.join(packageDir, 'bundle/build/ExpoWidgets.bundle'),
-        'utf8',
-      ),
+      runtimeBundle,
       images: catalog?.images ?? {},
     },
   }

package/src/expoSwiftContract.ts

@@ -5,6 +5,7 @@ import {
 import { isRecord } from './is-record'
 import { isNativeAppIdentity, type NativeAppIdentity } from './native-app-identity'
 import { isSwiftResourcePath } from './swiftContract'
+import type { OneSDKLinkSources } from './one-sdk-bundle'
 import type {
   SwiftNativeTarget,
   SwiftHeaderAliases,
@@ -19,6 +20,8 @@ export interface ExpoSwiftPreparationOptions {
   moduleRoot?: string
   // compile only these Swift modules and the modules they import
   only?: readonly string[]
+  // the app's One SDK, linked into the same executable: one process per app
+  oneSDK?: Pick<OneSDKLinkSources, 'targets' | 'entry'>
 }
 
 export interface ExpoSwiftSourceOptions {

package/src/kotlin-host.ts

@@ -131,7 +131,11 @@ function entrySource(ids: string[]): string {
     '',
     '@OptIn(kotlin.js.ExperimentalJsExport::class)',
     '@JsExport',
-    'fun peachSetAndroidBuildInfo(model: String, release: String, apiLevel: Int) = Build.setDevice(model, release, apiLevel)',
+    'fun peachSetAndroidDeviceInfo(model: String, release: String, apiLevel: Int, locale: String, timeZone: String) {',
+    '    Build.setDevice(model, release, apiLevel)',
+    '    java.util.Locale.setDefault(java.util.Locale.forLanguageTag(locale))',
+    '    java.util.TimeZone.setDevice(timeZone)',
+    '}',
     '',
     '@OptIn(kotlin.js.ExperimentalJsExport::class, kotlinx.coroutines.DelicateCoroutinesApi::class)',
     '@JsExport',
@@ -726,8 +730,12 @@ export async function expoKotlinArtifact(
     '    ))',
     '}',
     '',
-    '@JsExport fun peachSetAndroidBuildInfo(model: String, release: String, apiLevel: Int) =',
+    '@JsExport fun peachSetAndroidDeviceInfo(model: String, release: String, apiLevel: Int, locale: String, timeZone: String) {',
     '    android.os.Build.setDevice(model, release, apiLevel)',
+    '    java.util.Locale.setDefault(java.util.Locale.forLanguageTag(locale))',
+    '    java.util.TimeZone.setDevice(timeZone)',
+    '    PeachExpoRuntime.configureProcessLocale(locale)',
+    '}',
     '',
     '@JsExport fun peachExpoListen(notify: () -> Unit) {',
     '    registered',

package/src/native-bundles.ts

@@ -47,17 +47,37 @@ export async function buildNativeBundles(
   configuration: 'Debug' | 'Release',
 ): Promise<NativeBundles> {
   return getRuntimePlatformAdapter(platform).select<() => Promise<NativeBundles>>({
-    ios: async () => ({
-      oneSDK: await (await import('./one-sdk-bundle')).buildOneSDKBundle(projectRoot),
-      expoSwift: await (
+    ios: async () => {
+      const { appOneSDKLinkSources, buildOneSDKBundle } = await import('./one-sdk-bundle')
+      // on iOS an app is one process: its One SDK links into the Expo executable
+      // when the app has one, and its process serves both
+      const oneSDK = await appOneSDKLinkSources(projectRoot)
+      const expoSwift = await (
         await import('./expo-swift-bundle')
-      ).buildExpoSwiftBundle(projectRoot),
-      nitro: await (
-        await import('./nitro-bundle')
-      ).buildNitroBundle(projectRoot, configuration),
-      turbo: await (await import('./turbo-bundle')).buildTurboBundle(projectRoot),
-      expoKotlin: null,
-    }),
+      ).buildExpoSwiftBundle(projectRoot, oneSDK ?? undefined)
+      const linked = oneSDK && expoSwift?.metadata.modules[0]
+      return {
+        oneSDK: linked
+          ? {
+              metadata: {
+                url: linked.url,
+                hash: linked.hash,
+                icuUrl: linked.icuUrl,
+                rootId: `${linked.rootId.split('/')[0]}/OneSDK`,
+                bundleFiles: linked.bundleFiles ?? {},
+                modules: oneSDK.modules,
+              },
+              assets: [],
+            }
+          : await buildOneSDKBundle(projectRoot),
+        expoSwift,
+        nitro: await (
+          await import('./nitro-bundle')
+        ).buildNitroBundle(projectRoot, configuration),
+        turbo: await (await import('./turbo-bundle')).buildTurboBundle(projectRoot),
+        expoKotlin: null,
+      }
+    },
     android: async () => ({
       oneSDK: null,
       expoSwift: null,

package/src/one-sdk/source.ts

@@ -30,12 +30,13 @@ extension OneNativeComposable {
 }
 `
 
-export const oneSDKApp = String.raw`import SwiftUI
+// the view a One SDK host component mounts, in whichever executable links the
+// app's One SDK
+export const oneSDKHost = String.raw`import SwiftUI
 @_spi(Peach) import UIKit
 import One
-import OneSDKBindings
 
-private struct UIKitHost: UIViewRepresentable {
+struct OneSDKUIKitHost: UIViewRepresentable {
   let props: JSON
   func makeUIView(context: Context) -> OneNativeUIKitHostView { OneNativeUIKitHostView() }
   func updateUIView(_ view: OneNativeUIKitHostView, context: Context) {
@@ -47,10 +48,15 @@ private struct UIKitHost: UIViewRepresentable {
   }
   static func dismantleUIView(_ view: OneNativeUIKitHostView, coordinator: Coordinator) { view.reset() }
 }
+`
+
+export const oneSDKApp = String.raw`import SwiftUI
+import One
+import OneSDKBindings
 
 @main
 struct SDKGuest: PeachPackage {
-  func view(props: JSON) -> some View { UIKitHost(props: props) }
+  func view(props: JSON) -> some View { OneSDKUIKitHost(props: props) }
 }
 `
 

package/src/one-sdk-bundle.ts

@@ -4,7 +4,7 @@ import path from 'node:path'
 import { prepareExpoNativeProject } from './expo-native-workspace'
 import { compiledModuleAssets, compiledModuleRequestHandler } from './nitro-bundle'
 import { selectOneSDK } from './one-sdk-preparation'
-import { oneSDKApp, oneSDKModule, oneSDKTransport } from './one-sdk/source'
+import { oneSDKApp, oneSDKHost, oneSDKModule, oneSDKTransport } from './one-sdk/source'
 import { ONE_SDK_SOURCE_DIRECTORY, readOneSDKSourceManifest } from './oneSdkContract'
 import { syncSwiftTree } from './swift-compile'
 import { resolveSwiftModule } from './swift-distribution'
@@ -24,12 +24,19 @@ export async function compileOneSDKApp(
   return compilePreparedOneSDKApp(appRoot, prepared.app, origin, moduleRootOverride)
 }
 
-export async function compilePreparedOneSDKApp(
+// the One and OneSDKBindings targets an executable links for the app's One SDK
+// imports, the host view and transport its executable target adds, and the
+// module names the bundle registers
+export interface OneSDKLinkSources {
+  targets: Map<string, string>
+  entry: Map<string, string>
+  modules: string[]
+}
+
+export async function oneSDKLinkSources(
   appRoot: string,
   preparedRoot: string,
-  origin: string,
-  moduleRootOverride?: string,
-) {
+): Promise<OneSDKLinkSources> {
   const selected = await selectOneSDK(appRoot)
   if (!selected) throw new Error('prepared app has no One SDK imports')
   const { one, frameworks } = selected
@@ -47,6 +54,47 @@ export async function compilePreparedOneSDKApp(
     throw new Error(
       'prepared One SDK sources differ from the installed facades or app imports',
     )
+  const targets = new Map<string, string>()
+  targets.set('Sources/One/One.swift', oneSDKModule)
+  for (const source of [
+    'SDK/OneSDKRuntime.swift',
+    'OneNativeUIKitHostView.swift',
+    'OneNativeContent.swift',
+    'OneNativeAccessibility.swift',
+    'SDKViews/OneNativeViewsTable.swift',
+  ])
+    targets.set(
+      `Sources/One/${path.basename(source)}`,
+      fs.readFileSync(path.join(one, 'ios', source), 'utf8'),
+    )
+  for (const name of generated.files)
+    targets.set(
+      `Sources/OneSDKBindings/${name}`,
+      fs.readFileSync(path.join(sourceRoot, name), 'utf8'),
+    )
+  return {
+    targets,
+    entry: new Map([
+      ['OneSDKHost.swift', oneSDKHost],
+      ['OneSDKTransport.swift', oneSDKTransport],
+    ]),
+    modules: frameworks.map((name) => `${name}_${generated.generation}`),
+  }
+}
+
+// the app's One SDK sources, when it imports One's SDK
+export async function appOneSDKLinkSources(appRoot: string) {
+  if (!(await selectOneSDK(appRoot))) return null
+  return oneSDKLinkSources(appRoot, (await prepareExpoNativeProject(appRoot)).app)
+}
+
+export async function compilePreparedOneSDKApp(
+  appRoot: string,
+  preparedRoot: string,
+  origin: string,
+  moduleRootOverride?: string,
+) {
+  const sources = await oneSDKLinkSources(appRoot, preparedRoot)
   const moduleRoot = moduleRootOverride ?? (await resolveSwiftModule()).root
   const packagePath = path.join(
     swiftCacheDir(),
@@ -66,25 +114,9 @@ let package = Package(name: "OneSDKGuest", targets: [
 ])
 `,
   )
-  files.set('Sources/One/One.swift', oneSDKModule)
-  for (const source of [
-    'SDK/OneSDKRuntime.swift',
-    'OneNativeUIKitHostView.swift',
-    'OneNativeContent.swift',
-    'OneNativeAccessibility.swift',
-    'SDKViews/OneNativeViewsTable.swift',
-  ])
-    files.set(
-      `Sources/One/${path.basename(source)}`,
-      fs.readFileSync(path.join(one, 'ios', source), 'utf8'),
-    )
-  for (const name of generated.files)
-    files.set(
-      `Sources/OneSDKBindings/${name}`,
-      fs.readFileSync(path.join(sourceRoot, name), 'utf8'),
-    )
+  for (const [name, source] of sources.targets) files.set(name, source)
+  for (const [name, source] of sources.entry) files.set(`Sources/App/${name}`, source)
   files.set('Sources/App/App.swift', oneSDKApp)
-  files.set('Sources/App/Transport.swift', oneSDKTransport)
   fs.mkdirSync(packagePath, { recursive: true })
   syncSwiftTree(
     packagePath,
@@ -92,6 +124,7 @@ let package = Package(name: "OneSDKGuest", targets: [
   )
   const project = projectFor(packagePath)
   project.oneModule = false
+  project.optimize = true
   const artifact = await artifactFor(project, 'Sources/App/App.swift', moduleRoot)
   const metadata: OneSDKCompilation = {
     url: `${origin}/__peach/swift/${artifact.hash}.wasm`,
@@ -99,7 +132,7 @@ let package = Package(name: "OneSDKGuest", targets: [
     icuUrl: icuUrl(origin, artifact),
     rootId: `one-sdk-${artifact.hash.slice(0, 16)}`,
     bundleFiles: artifact.package.bundleFiles.files,
-    modules: frameworks.map((name) => `${name}_${generated.generation}`),
+    modules: sources.modules,
   }
   return { metadata, artifact }
 }

package/src/screenshots/frame-compose.ts

@@ -2,9 +2,8 @@ import { launchProvisionedPlaywright } from '../../cli/drivers/playwright-provis
 import { getCliRuntime } from '../cli-runtime.ts'
 import { cornerRadii, type CornerRadii, type DeviceModel } from '../device-catalog.ts'
 import type { HousingLayer } from '#peach-cli-contract/ios/duo-housing'
+import type { FramePaintSpec } from '#peach-cli-contract/ios/frame-paint'
 
-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 = {
@@ -40,9 +39,7 @@ export interface FramedScreenshotLayout {
   logicalFrameRadius: CornerRadii
   // folding body art, painted before the screen; null draws one black body
   housingLayers: HousingLayer[] | null
-  frameBackground: string
   frameOutline: string
-  metallicRingShadow: string | null
   buttons: FrameButtonLayout[]
   legacyHomeButton: LegacyHomeButtonLayout | null
   showHomeIndicator: boolean
@@ -149,17 +146,11 @@ export function getFramedScreenshotLayout(model: DeviceModel): FramedScreenshotL
     housingLayers,
     // the housing paints its own body layer, shadow included: its frame box is
     // wider than the body, because the hinge barrel protrudes past the spine.
-    frameBackground: isLegacyHardware
-      ? 'linear-gradient(180deg, #1b1c20 0%, #0f1012 42%, #050608 100%)'
-      : housingLayers
-        ? 'transparent'
-        : '#000000',
     frameOutline: isLegacyHardware
       ? '0 0 0 1px #1f2125'
       : housingLayers
         ? 'none'
         : '0 0 0 1px #333',
-    metallicRingShadow: isLegacyHardware || housingLayers ? null : METALLIC_RING_SHADOW,
     buttons,
     legacyHomeButton: isLegacyHardware
       ? {
@@ -182,69 +173,22 @@ export function getFramedScreenshotLayout(model: DeviceModel): FramedScreenshotL
   }
 }
 
-function renderSideButtonHtml(button: FrameButtonLayout): string {
-  const isRight = button.side === 'right'
-  const isBottom = button.side === 'bottom'
-  const horizontal = button.side === 'top' || isBottom
-  const clip = horizontal
-    ? isBottom
-      ? 'inset(0 -3px -3px -3px)'
-      : 'inset(-3px -3px 0 -3px)'
-    : isRight
-      ? 'inset(-3px -3px -3px 0)'
-      : 'inset(-3px 0 -3px -3px)'
-  return `
-      <div
-        aria-hidden="true"
-        style="
-          position:absolute;
-          ${
-            horizontal
-              ? `left:${button.top}px;${isBottom ? `bottom:-${button.width}px;` : `top:-${button.width}px;`}`
-              : `${isRight ? `right:-${button.width}px;` : `left:-${button.width}px;`}top:${button.top}px;`
-          }
-          width:${horizontal ? button.height : button.width}px;
-          height:${horizontal ? button.width : button.height}px;
-          background-color:#212121;
-          border-top-left-radius:${isRight || isBottom ? 0 : 1.5}px;
-          border-bottom-left-radius:${isRight || button.side === 'top' ? 0 : 1.5}px;
-          border-top-right-radius:${button.side === 'left' || isBottom ? 0 : 1.5}px;
-          border-bottom-right-radius:${button.side === 'left' || button.side === 'top' ? 0 : 1.5}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:${getCliRuntime().settings_devices.formatCornerRadii(layout.logicalFrameRadius)};
-          box-shadow:${layout.metallicRingShadow};
-          pointer-events:none;
-          z-index:10;
-        "
-      ></div>
-    `
-    : ''
+  const painter = getCliRuntime().ios_frame_svg
+  const paintSpec = {
+    width: layout.logicalFrameWidth,
+    height: layout.logicalFrameHeight,
+    radii: layout.logicalFrameRadius,
+    body: layout.legacyHomeButton ? 'legacy' : layout.housingLayers ? null : 'solid',
+    ring: layout.legacyHomeButton || layout.housingLayers ? null : painter.METALLIC_RING,
+    buttons: layout.buttons
+      .filter((button) => button.height > 0)
+      .map((button) => ({ ...button, hover: 0 })),
+    home: layout.legacyHomeButton,
+  } satisfies FramePaintSpec
 
   // the folding body's rail, glass ring, corner art, and hinge barrel. no
   // z-index, so the screen div after it paints on top.
@@ -252,42 +196,6 @@ function renderFrameHtml(
     .map(getCliRuntime().ios_duo_housing.housingLayerHtml)
     .join('')
 
-  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
@@ -374,14 +282,11 @@ function renderFrameHtml(
             border-radius:${layout.housingLayers ? '0' : getCliRuntime().settings_devices.formatCornerRadii(layout.logicalFrameRadius)};
             box-sizing:border-box;
             overflow:visible;
-            background:${layout.frameBackground};
             box-shadow:${layout.frameOutline};
           "
         >
-          ${buttonsHtml}
-          ${ringHtml}
+          ${painter.frameSvg(paintSpec)}
           ${housingHtml}
-          ${legacyHomeButtonHtml}
           <div
             id="screen"
             style="