[rdlabo]

Summary

Add a Native UI Extension demo under Index that projects an ordinary Web element into an app-local SwiftUI Now Playing view. The toggle switches between Web and native rendering while preserving playback state. Native rendering uses the Web element's frame and works with both ordinary tabs and Vertical Bars on supported iOS versions.

This PR is stacked on #276 and targets feat/native-ui-extensions. All feature code stays in the demo application; no separate npm package, Capacitor plugin, or player-specific shared shell API is added.

Implementation

• Pair a framework-independent Web renderer and DOM reader with a local SwiftUI view. Both consume data-title, data-artist, and data-playing; actions return to the Web-owned state.
• Use default element projection. Applications can explicitly choose tab-accessory separately; this sample does not require it.
• Keep controls within device and Vertical Bars safe areas. Separate playback from tap/swipe-to-open, and provide a Web modal with a top-left Close button.
• Organize the demo into interactive steps, shared-state explanation, and app-local setup instructions with documentation links.
• Replace the initial artwork and player styling with a compact capsule and locally drawn artwork.

Validation

• Production demo build, iOS simulator build, repository formatting, and demo lint.
• Angular/Vitest: 53 tests passed for the Web renderer/state changes.
• Browser: 5 tests passed, covering playback isolation, navigation persistence, modal synchronization, swipe/keyboard opening, toggle fallback, and left/right rail safe areas.
• iOS simulator: both ordinary-tab and Vertical Bars tests passed, covering Web/native button alignment, toggle transitions, playback synchronization, and modal/swipe restoration.
• Final demo layout and modal controls verified with browser tests and deployed to the simulator.

UI example only: no audio engine is started and elapsed time is fixed. See docs/native-mini-player.md for integration details.

[devin-ai-integration]

Devin Review found 1 potential issue.

[rdlabo]

/devin レビューして

[devin-ai-integration]

View Devin session

[devin-ai-integration]

レビュー結果

修正必須の新規指摘はありません。 feat/native-ui-extensions を基点に、最新 head 38dd66dc の差分を確認しました。

• Web が状態を保持し、SwiftUI が既存の Web ボタンを NativeUIActions.activate() で呼び出す構成で、状態管理やモーダル表示を二重実装していません。テーマ本体にプレーヤー固有 API を追加せず、アプリ内に閉じている点も妥当です。
• 前回の「Vertical Bars と Web プレーヤーの重なり」は、左右の resolved safe area を使う修正と左右それぞれの回帰テスト追加を確認し、既存スレッドを解決しました。
• Web レンダラーのテキスト代入、属性同期、イベント・Observer の破棄、非表示・再表示時の状態保持も確認しました。

今回の検証

• ルートの build（TypeScript チェック含む）・Prettier、demo の lint・production build：成功。
• Angular/Vitest：13 ファイル・53 テスト成功（追加された mini-player テストを含む）。
• demo の npm ci は既存 lockfile の不足（chokidar/readdirp）で失敗するため、lockfile を変更せず npm install --no-save --package-lock=false --ignore-scripts --legacy-peer-deps で依存を導入して検証しました。依存定義は本 PR の変更対象外です。

ブラウザー E2E と iOS Simulator は今回未実行です。SwiftUI 側はコードレビューのみで、PR 本文にある Simulator 結果をこちらで再検証したものではありません。また、現在の対象ブランチでは PR CI が起動しておらず、チェックは 0 件です。

コード変更・push は行っていません。

Written by Devin