{ "name": "DialogHost", "package": "@magicblocksai/ui", "file": "packages/ui/src/components/DialogHost.tsx", "chapterTag": "08 Feedback & Overlays", "chapter": "09-feedback-and-overlays.html", "sectionId": "dialog-host", "elName": "DialogHost", "demoUrl": "https://brand.magicblocks.ai/components/09-feedback-and-overlays#dialog-host", "hasLiveDemo": false, "description": "DialogHost — listens to the singleton `dialogStore` and renders\n``s for each open `confirm()` / `alert()` / `prompt()` call.\nMount once at the app root, alongside ``.", "useClient": true, "interactivity": "interactive", "namedExports": [ { "name": "DialogHost", "isPrincipal": true, "isType": false }, { "name": "confirm", "isPrincipal": false, "isType": false }, { "name": "alert", "isPrincipal": false, "isType": false }, { "name": "prompt", "isPrincipal": false, "isType": false }, { "name": "useConfirm", "isPrincipal": false, "isType": false }, { "name": "dialogStore", "isPrincipal": false, "isType": false }, { "name": "DialogHostProps", "isPrincipal": false, "isType": true }, { "name": "ConfirmApi", "isPrincipal": false, "isType": false }, { "name": "ConfirmOptions", "isPrincipal": false, "isType": false }, { "name": "AlertOptions", "isPrincipal": false, "isType": false }, { "name": "PromptOptions", "isPrincipal": false, "isType": false }, { "name": "DialogRecord", "isPrincipal": false, "isType": false }, { "name": "DialogKind", "isPrincipal": false, "isType": false }, { "name": "DialogTone", "isPrincipal": false, "isType": true }, { "name": "DialogStoreEvent", "isPrincipal": false, "isType": false }, { "name": "ConfirmRecord", "isPrincipal": false, "isType": false }, { "name": "AlertRecord", "isPrincipal": false, "isType": false }, { "name": "PromptRecord", "isPrincipal": false, "isType": false } ], "importStatement": "import { DialogHost } from \"@magicblocksai/ui\";", "props": [ { "name": "defaultConfirmLabel", "optional": true, "type": "string", "doc": "Default confirm-button label when none is provided in `options`. Default `\"Confirm\"`." }, { "name": "defaultCancelLabel", "optional": true, "type": "string", "doc": "Default cancel-button label when none is provided in `options`. Default `\"Cancel\"`." }, { "name": "defaultAlertLabel", "optional": true, "type": "string", "doc": "Default dismiss label for `alert(...)`. Default `\"OK\"`." } ], "classesUsed": [ "alert", "dialog-body", "dialog-host", "dialog-input", "input" ], "examples": { "react": "// app/layout.tsx\n \n {children}\n \n \n ", "html": "
\n
\n
\n
\n
\n

Delete this segment?

\n \n
\n
\n

Members stay in your contact list. The segment definition is removed.

\n
\n
\n \n \n
\n
\n
\n
", "css": ".alert {\n display: flex; gap: var(--s-3);\n padding: var(--s-4);\n background: var(--bg-paper);\n border: 1px solid var(--hair);\n border-left: 3px solid var(--success);\n border-radius: var(--r-md);\n}\n\n.dialog-body {\n font: 400 14.5px/1.6 var(--f-body);\n color: var(--fg-soft);\n margin: 0 0 var(--s-3);\n}\n\n.dialog-host { display: contents; }\n\n.dialog-input {\n width: 100%;\n margin-top: var(--s-2);\n}\n\n.input {\n display: block; width: 100%;\n font: 400 14.5px/1.4 var(--f-body);\n color: var(--fg);\n background: var(--bg-paper);\n border: 1px solid var(--hair);\n border-radius: var(--r-sm);\n padding: 10px 14px;\n transition: border-color var(--dur-2) var(--ease),\n box-shadow var(--dur-2) var(--ease);\n appearance: none; -webkit-appearance: none; -moz-appearance: none;\n}" } }