Skip to content

fix(frame,devices): restore cutout chrome — continuous screen, circular notch, iOS-only HI - #39

Open
lbb00 wants to merge 5 commits into
mainfrom
fix/cutout-chrome-restore
Open

lbb00 wants to merge 5 commits into
mainfrom
fix/cutout-chrome-restore

Conversation

@lbb00

@lbb00 lbb00 commented Oct 29, 2026 •

Copy link
Copy Markdown
Collaborator

Summary

Screen-fidelity follow-up for device cutouts and chrome. Rebases onto main (including #42 CI/deps). Keeps profile geometry citeable; paints continuous screen corners and circular Face ID notches; draws the Home Indicator on iOS presets only.

What changed

@devicekit/devices

  • iOS ScreenCorners fractions stored as 47.33 / 53.33 where measured (was truncated).
  • iPhone Duo: outer hinge corners 8; inner landscape safe area right 84 / bottom 34.
  • Face ID notch: per-family bottomRadius / cited topRadius (X/XS/11 Pro ear 6); uncalibrated ears stay unset.
  • Android cutout audit (Pixel 5 / 9 Pro Fold centerX; Pixel 9/10 Pro Ø; S20+/Ultra holes; Pixel 3 XL notch; cite-only elsewhere).
  • Classic honesty: drop unmeasured Pixel 8; document Galaxy S24 Ultra FHD+ window; Pixel 9 Pro status/safe insets called out.
  • Validation / verified-preset tests for radius buckets and cutout ⇒ explicit radius guards.

@devicekit/frame

  • Continuous screen + matching outer body chrome via Figma ξ≈0.6 clip-path (Chromium corner-shape: squircle kept as progressive enhancement).
  • Face ID notch paint: circular clip-path ears + bottom fillets (notch-continuous-path); no Figma ξ on the notch.
  • Home indicator: iOS-only — hidden for every non-iOS preset.
  • Cutout assertions aligned with circular notch paint (data-notch-curve=circular, right-edge punch-hole icon budget skip).

Screen QA

  • packages/frame/screen-qa Vite harness rendering every DEVICES preset.
  • scripts/shot-all-devices.mjs — headless Chrome screenshots of all devices.
  • scripts/audit-non-ios-home-indicator.mjs — asserts no iOS-style HI on non-iOS presets.
  • Regenerated docs/device-pages.md for the profile updates.

Test plan

  • pnpm install --frozen-lockfile
  • pnpm format:check
  • pnpm run check:device-pages
  • pnpm lint (exit 0; one pre-existing React refs warning in react/index.tsx)
  • pnpm check-types
  • pnpm test — devices 866, frame 424, scripts 9 — all pass
  • pnpm --filter @devicekit/frame demo:build
  • CI green on the updated PR head after force-push
  • Spot-check a Face ID notch, a punch-hole Android, and a non-iOS bottom safe-area device in the demo / screen-qa

Notes

Grok Bot added 5 commits October 30, 2026 18:52
…id cutouts

- iOS ScreenCorners fractions; Duo outer hinge 8; Duo inner landscape safe 84/34
- Face ID notch bottomRadius / cited topRadius (X/XS/11 Pro ear 6); uncalibrated ears unset
- Android geometry + cutout audit (Pixel 5/9/10 Pro, Fold, S20+/Ultra, 3 XL, …)
- Classic honesty (drop unmeasured Pixel 8); validation / verified-preset tests
- Screen + body Figma ξ≈0.6 clip-path (kill PNG white bleed / square chrome)
- Face ID notch circular clip-path ears + bottom fillets (no ξ on notch)
- Home indicator pill rendered for iOS presets only
- packages/frame/screen-qa Vite page rendering every DEVICES preset
- scripts/shot-all-devices.mjs headless screenshots
- scripts/audit-non-ios-home-indicator.mjs asserts no HI on non-iOS
- Expect paint width = body + 2·ear and data-notch-curve=circular
- Skip right-ear icon budget for right-edge punch holes (centerX ≳ 0.9)
- Reformat iOS/Android presets for oxfmt from main
- Regenerate docs/device-pages.md for radius/cutout updates
- Drop unused imports / Array constructor lint nits in QA scripts
@lbb00
lbb00 force-pushed the fix/cutout-chrome-restore branch from 79e5052 to b5bd587 Compare October 30, 2026 10:55
@lbb00 lbb00 changed the title fix: cutout/chrome restore — continuous screen, Face ID notch, Android cutouts fix(frame,devices): restore cutout chrome — continuous screen, circular notch, iOS-only HI Oct 30, 2026
@lbb00 lbb00 closed this Oct 30, 2026
@lbb00
lbb00 deleted the fix/cutout-chrome-restore branch October 30, 2026 10:58
@lbb00
lbb00 restored the fix/cutout-chrome-restore branch October 30, 2026 10:58
@lbb00 lbb00 reopened this Oct 30, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant