[maui-labs docs] Comet: document .NET 11 Preview 7 upgrade, Yoga layout API, and DevFlow agent integration
- Dominant language
- No language data
- Stars
- 282
- Forks
- 265
- Avg merge
- 2d 2h
- Merged PRs (30d)
- 19
Description
## Source PR
**PR**: https://github.com/dotnet/maui-labs/pull/325
**Title**: feat(comet): upgrade Comet to .NET 11 Preview 7
**Author**: @davidortinau
**Merged**: 2026-09-04
---
## Summary of Changes
PR #325 upgrades the Comet experimental MVU framework to target .NET 11 Preview 7 and introduces several user-facing features:
1. **SDK requirement bump** — Comet now requires the .NET 11 Preview 7 SDK (`11.0.100-preview.7.26381.103` or later patch). The previous target was an earlier .NET 11 preview.
2. **New `UseYogaLayout` property** — opt-in Yoga (Facebook's cross-platform layout engine) on both the iOS (`SwiftUIBackendRoot`) and Android (`ComposeBackendRoot`) backends. Default is `false` (native layout unchanged).
3. **Yoga container padding** — when `UseYogaLayout` is `true`, `Padding` on container views is handled by the Yoga engine (not native `.padding()`) and is reflected immediately.
4. **Reactive reflow** — Yoga layout now re-runs automatically after each reactive flush, so content whose size changes (e.g. a bound label) is re-measured and re-arranged without manual intervention.
5. **In-app screenshot endpoint** — `SwiftUIBackendRoot.CreateController` now registers a `ScreenshotProvider` with `CometDevRegistry`, enabling `GET /api/v1/ui/screenshot` over the DevFlow agent on iOS (works over USB with `iproxy`, no Developer Disk Image required).
6. **`ComposeDevAgentHost` for Android** — new public API in `Comet.Platform.Compose` to start the DevFlow agent and enable real `MotionEvent` drag injection on Android.
---
## Documentation Pages Affected
- `docs/developer-tools/devflow/` — add or update a page covering Comet-specific DevFlow agent integration
- If a Comet product page exists in the docs (e.g. under a `docs/comet/` or `docs/experimental/` section), update:
- System requirements table (minimum .NET 11 Preview 7 SDK)
- `UseYogaLayout` property documentation for both `SwiftUIBackendRoot` and `ComposeBackendRoot`
- A "Yoga layout" conceptual section
---
## Suggested Changes
### 1. System Requirements
Update the Comet requirements table to:
| Requirement | Value |
|-------------|-------|
| .NET SDK | 11.0.100-preview.7 or later |
| iOS minimum | 17.0 |
| Mac Catalyst minimum | 17.0 |
| macOS minimum | 14.0 |
| Android minimum | API 24 |
### 2. Yoga Layout section (new)
Add under a "Layout" heading in the Comet conceptual docs:
````markdown
## Yoga Layout Engine
Comet supports an optional Yoga-powered layout pass that computes absolute frames in C# before the native render, giving consistent cross-platform layout semantics.
### Enabling on iOS / Mac Catalyst
```csharp
var backendRoot = new SwiftUIBackendRoot(services)
{
UseYogaLayout = true // default: false
};
```
When `UseYogaLayout` is `true`:
- The `Comet.Layout.Yoga` engine measures each node and assigns absolute pixel frames.
- `Padding` on container views is honoured by Yoga (the native `.padding()` modifier is not applied in absolute mode).
- Layout re-runs automatically after every reactive flush, so views bound to reactive state resize and reflow without extra code.
### Enabling on Android
```csharp
var backendRoot = new ComposeBackendRoot(context)
{
UseYogaLayout = true // default: false
};
```
The Compose backend measures leaf nodes synchronously via `android.graphics.Paint` (equivalent to SwiftUI's `sizeThatFits`) and positions children using `Modifier.AbsoluteOffset + .Size` inside a `Box`.
### When to use
Use `UseYogaLayout = true` when:
- You need pixel-identical layout on both platforms.
- You rely on `Padding` on container views.
- You have reactive content whose intrinsic size changes at runtime (e.g., a label whose text is bound to state).
Leave it `false` (the default) to use each platform's native layout (SwiftUI stacks / Compose Column and Row), which is simpler and performs better for most cases.
````
### 3. DevFlow agent integration (new or update existing DevFlow/Comet section)
````markdown
## DevFlow Integration
Comet apps can be inspected and automated using the [MAUI DevFlow agent](../devflow/index.md).
### iOS (SwiftUI backend)
`SwiftUIBackendRoot.CreateController` automatically registers a screenshot provider with the DevFlow agent when it is running. No extra code is needed — start the DevFlow agent via the standard NuGet package and the in-app `/api/v1/ui/screenshot` endpoint works over USB:
```bash
iproxy 9224 9223 # tunnel device port 9223 to Mac port 9224
curl (localhost/redacted) -o screenshot.png
```
### Android (Compose backend)
Call `ComposeDevAgentHost.Start(activity)` in your `MainActivity.OnCreate` **before** materializing the root view:
```csharp
protected override void OnCreate(Bundle? savedInstanceState)
{
base.OnCreate(savedInstanceState);
// Start DevFlow agent on fixed port 9223 (adb forward tcp:9223 tcp:9223)
Comet.Platform.Compose.ComposeDevAgentHost.Start(this);
// Then materialize the Comet root view
var root = new ComposeBackendRoot(this);
// …
}
```
Features available via the agent on Android:
- Visual tree inspection (`/api/v1/ui/tree`)
- Semantic tap / fill / clear / focus
- Real `MotionEvent` drag injection (exercises the Compose gesture pipeline — velocity, swipe-to-dismiss, flings)
> **Note**: Screenshots on Android use `adb screencap` or the probe's PixelCopy route; the screenshot endpoint is not yet served by `ComposeDevAgentHost`.
````
> Generated by [PR Documentation Check](https://github.com/dotnet/maui-labs/actions/runs/33885939213) for issue #325 · [◷](https://github.com/search?q=repo%3Adotnet%2Fdocs-maui+is%3Aissue+%22gh-aw-workflow-call-id%3A+dotnet%2Fmaui-labs%2Fpr-docs-check%22&type=issues)
Contributor guide
Research direction
Read PR #325 first, then inspect docs/developer-tools/devflow/ and any existing Comet or experimental documentation page. Update the requirements, Yoga layout behavior, and iOS/Android DevFlow integration using the issue details. Done means the relevant pages document .NET 11 Preview 7, UseYogaLayout, and the platform-specific agent capabilities without leaving the Comet features undocumented.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, csharp, ios
- Domain
- devtools, documentation, mobile-dev
- Issue type
- Documentation
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 72/100