Connect dialog

Create the connection on your server first. Its saved intent already contains the domain and every DNS record your product needs. The dialog reads that intent; it does not ask the customer to define DNS records.

Use the high-level singleton for the common case:

import { createDomain0Client, domain0 } from 'domain0'

const client = createDomain0Client({
  baseUrl: '/api/domain0/',
  token: accessToken,
})

const controller = await domain0.connectDomain({
  client,
  connectionId,
  applicationName: 'Acme Cloud',
  onSuccess: ({ connection }) => {
    console.log(connection.intent.domain)
  },
})

connectDomain() mounts into document.body, opens immediately, traps focus, restores focus on close, and replaces any previously active singleton flow.

What the dialog owns

• Provider detection and selection.
• Provider authorization through the best verified record-scoped method.
• Reading the current DNS configuration and applying safe requested changes.
• One explicit confirmation only when an existing record must be replaced or removed.
• Propagation progress and verified success.

The default journey advances automatically after provider authorization. It does not ask the customer to review newly created records or click a separate apply button. Guided manual records are a fallback only when the selected provider has no verified automatic method for this connection, or when the application explicitly forces manual mode.

Lifecycle

await domain0.load()
await domain0.connectDomain({ client, connectionId })

domain0.close()   // close the active dialog
domain0.destroy() // close and remove its DOM root

Create an isolated lifecycle when two independent host surfaces must not share the singleton:

import { createDomain0 } from 'domain0'

const domainSetup = createDomain0()
await domainSetup.connectDomain({ client, connectionId, target: container })

Inline presentation

Use the lower-level UI entry point to render inside a surface you own:

import { mountDomain0Connect } from 'domain0/ui'

const controller = mountDomain0Connect({
  target: document.querySelector('#domain-setup')!,
  client,
  connectionId,
  presentation: 'inline',
  triggerHidden: true,
})

await controller.open()

Inline mode has no backdrop, focus trap, or focus stealing.