[aerodeval]

An app that has its own settings page can show the Cloud Settings panels inside it, instead of opening a second dialog on top. openCloudSettings and mountCloudSettings take a target element. The runtime appends the custom element to it and renders the panels without the dialog: no backdrop, no frame, no close button, filling the element's height.

With one panel, the sidebar and the phone panel selector are not shown, so the host's own navigation stays the only one. With several panels, the sidebar shows inside the element. Without target, nothing changes.

• cloud-sdk: target?: HTMLElement on CloudSettingsOptions, README section.
• in-app-embed: the sidebar, phone selector, and panels move to CloudSettingsBody.vue. The dialog still uses SettingsDialog, unchanged. Inline wraps the same body in a TabsRoot. mountCloudSettings appends to target and marks the element inline. :host([inline]) fills its container.
• A second mount finds the first through the saved host, so a target in a shadow root is replaced, not duplicated. Inline close does not move focus. The host page owns focus.
• dashboard/e2e: inline with one panel (no dialog, no tabs, no phone selector, focus stays put on close), inline with two panels in a shadow root (sidebar and phone selector show, a second mount replaces the first, a popup replaces the inline UI), and the popup does not get the inline attributes.
• cloud-sdk/tests/embed.html: a "Mount Billing inline" button for trying it with sample data.

Inline in a host modal

Helpdesk mounts the panel inside its own reka modal. The Cloud UI is in a shadow root, and reka's layer and focus checks look only at the light DOM. Without fixes, Tab skipped the panel, Esc closed the Cloud dialog and the Helpdesk modal together, Cloud menus closed on the click that opened them, and a click outside a Cloud menu did not close it. For an inline mount, the runtime now:

• puts the element in the tab order, so Tab moves into the panel.
• sets overlay-open on the element while a Cloud menu or dialog is open. The host ignores its modal close while this attribute exists. The README shows the one-line guard.
• turns off pointer events on the element while a modal Cloud layer is open, so the host modal does not take the click.
• closes the top Cloud layer with Esc when a pointerdown lands outside every Cloud layer.

All of this is in trackInline in runtime.ts, and it stops on close. The popup does not use it.

The SDK release is a separate commit.

First use: a Frappe Cloud tab in Helpdesk's settings modal (frappe/helpdesk#3940 adds the trial card that opens the dialog today).

Before

Manage billing in Helpdesk opens the Cloud Settings dialog over the app.

After

The same panel mounted inline in Helpdesk's settings modal, under a Frappe Cloud group.