gui/components/DialogHost

Renders the app's in-app dialogs (the Promise-based replacement for native alert/confirm/prompt).

Mounted ONCE at the app root, inside the i18n boundary, it subscribes to the lib/dialog.js external store and shows the active request (queue[0]) as an accessible modal — reusing the existing .modal / .modal-overlay / .modal-actions styling so it looks native to the app. Resolving the pending promise (via settle) follows the native contract: confirm → boolean, prompt → string|null, alert → undefined.

Accessibility: role="dialog" + aria-modal, labelled by its title (or the message), Escape and backdrop cancel, Enter accepts, Tab is trapped within the modal, and focus moves to the input (prompt) or the accept button on open and is restored to the previously-focused element on close.

Description:

  • Renders the app's in-app dialogs (the Promise-based replacement for native alert/confirm/prompt).

    Mounted ONCE at the app root, inside the i18n boundary, it subscribes to the lib/dialog.js external store and shows the active request (queue[0]) as an accessible modal — reusing the existing .modal / .modal-overlay / .modal-actions styling so it looks native to the app. Resolving the pending promise (via settle) follows the native contract: confirm → boolean, prompt → string|null, alert → undefined.

    Accessibility: role="dialog" + aria-modal, labelled by its title (or the message), Escape and backdrop cancel, Enter accepts, Tab is trapped within the modal, and focus moves to the input (prompt) or the accept button on open and is restored to the previously-focused element on close.

Source:

(require("gui/components/DialogHost"))() → {JSX.Element|null}

Description:

  • The dialog host. Takes no props; reads the active dialog from the lib/dialog.js store.

Source:
Returns:

The active modal (via a portal), or null when the queue is empty.

Type
JSX.Element | null

Methods

(inner) focusable()

Description:

  • Focusable elements inside el, in tab order.

Source: