dialogModule

import { dialogModule } from '@atheory-ai/kitsune-ui'

shell.modules = [dialogModule(), /* others */]

What it does

Registers two command handlers:

dialog.open — finds a <kit-dialog> matching the payload.target id and calls show().
dialog.close — finds the same dialog and calls close().

Together with <kit-dialog>, this turns dialog management into a declarative concern:

<kit-button meta-command="dialog.open" meta-prop-target="confirm">Open</kit-button>

<kit-dialog id="confirm">
  <h2>Are you sure?</h2>
  <kit-button meta-command="dialog.close" meta-prop-target="confirm">Cancel</kit-button>
</kit-dialog>

No JavaScript handlers needed.

Options

type DialogModuleOptions = {
  root?: ParentNode | (() => ParentNode | null | undefined)
}

root — restrict the search to a specific subtree. Defaults to document. Useful for shadow DOM or for multi-shell pages.

dialogModule({ root: document.getElementById('app') })

Or as a function for late binding:

dialogModule({ root: () => myShell.shadowRoot })

Command shapes

`dialog.open`

{
  type: 'dialog.open',
  payload: { target: 'my-dialog-id' }
}

Returns:

{ ok: true, value: { opened: boolean, target: string } }

opened: false means the target was not found.

`dialog.close`

{
  type: 'dialog.close',
  payload: { target: 'my-dialog-id' }
}

Returns:

{ ok: true, value: { closed: boolean, target: string } }

Diagnostics

The module emits the standard command diagnostics (command.handler_registered, command.dispatched, command.handled). The shell’s debug module surfaces them in the console.

Custom dialog rendering

If you have custom modal components that aren’t <kit-dialog>, write your own module:

const myDialogModule = defineKitModule({
  name: 'my-dialogs',
  commands: {
    'dialog.open': (cmd) => myDialogManager.open(String(cmd.payload?.target)),
    'dialog.close': (cmd) => myDialogManager.close(String(cmd.payload?.target)),
  },
})

You can install one or the other — but only the last-registered handler wins for each command type.