Fix Inspector mobile safe areas and preview scaling

[muxammadreza]

Summary

• separate device, host, and explicit safe-area values in Inspector state
• derive the effective safe area per edge while preserving explicit URL/manual override precedence
• scale fullscreen device preview frames to fit the available host stage without changing the simulated viewport

Problem

Named device presets currently write one shared safeAreaInsets value. The host safe-area effect then exits for non-custom presets, so selecting a mobile device replaces the host chrome insets. For example, an iPhone 15 preview reports its 34 px bottom device inset instead of preserving ChatGPT's 150 px fullscreen bottom inset.

Fullscreen device frames can also extend beyond the visible preview stage. Host chrome may then overlap the iframe's interactive area and receive pointer hit tests intended for controls near the bottom of the simulated viewport.

Behavior before and after

Before:

• safe-area state had a single owner
• named device presets disabled host safe-area updates
• an iPhone 15 preview used device insets instead of the union of device and host constraints
• oversized fullscreen frames could extend beneath host chrome

After:

• Inspector tracks deviceSafeArea, hostSafeArea, and an optional explicit safeAreaOverride
• precedence is URL override, then manual override, then max(deviceInset, hostInset) independently for every edge
• iPhone 15 + ChatGPT fullscreen resolves to 59 / 0 / 150 / 0 (top / right / bottom / left)
• iPhone 15 + Claude fullscreen resolves to 59 / 16 / 138 / 16
• host insets continue to react when the host or display mode changes, including after unrelated preset fields are customized
• fullscreen frames are visually scaled to fit the preview stage while the iframe and hostContext.containerDimensions retain the original simulated dimensions

Testing

• pnpm --filter sunpeak exec vitest run (575 passed)
• pnpm --filter sunpeak typecheck
• pnpm --filter sunpeak build
• targeted ESLint for all six changed source/test files

Generic regression coverage includes ChatGPT and Claude safe-area composition, URL/stored preference precedence, iPhone 15, iPhone SE and iPad scaling, and separation of stage geometry from the iframe viewport.