DesktopDialog

Side-effect-free alert, confirm, and prompt intents for a desktop controller.

All components · Theme builder · Implementation source

Live preview

Native actions require a desktop host. This browser preview shows the shipped surface with host actions disabled.

Install

Shell

netscript ui:add desktop-dialog

Usage and examples

The preview runs this JSX with the installed components. Import any composed primitives from your UI directory.

TypeScript

import { useState } from 'preact/hooks';
import { DesktopDialog } from '@app/components/ui/desktop-dialog.tsx';

export function Example() {
  const [value, setValue] = useState('standard');
  const [open, setOpen] = useState(false);
  const [notice, report] = useState('');
  return (<><div><DesktopDialog disabled message="Delete this order?" /></div><p role="status">{notice}</p></>);
}

Props

Generated from native deno doc --json --private over the shipped implementation. Compound component props retain their owning interface; native attributes pass through where declared.

Owner	Prop	Type	Optional	Description
`DesktopDialogProps`	`message`	`string`	No	Dialog message passed to the native controller.
`DesktopDialogProps`	`defaultValue`	`string`	Yes	Initial prompt value when the prompt action is chosen.
`DesktopDialogProps`	`onRequest`	`(request: DesktopDialogRequest) => void`	Yes	Receives a request; rendering never invokes a native dialog itself.
`DesktopDialogProps`	`disabled`	`boolean`	Yes	Disable requests when no desktop controller is active.
`DesktopDialogProps`	`class`	`string`	Yes	Additional root class name.

TypeScript

type DesktopDialogKind = "alert" | "confirm" | "prompt"

Keyboard

Key	Action
`Tab/Shift+Tab`	Cycle focus within modal
`Escape`	Dismiss and restore trigger focus

Tokens

Semantic contract roles: accent/default, accent/fg.

CSS custom properties referenced directly: --ns-accent, --ns-accent-fg, --ns-border, --ns-border-width, --ns-card, --ns-card-padding, --ns-control-height-sm, --ns-control-padding-x-sm, --ns-ease-fast, --ns-fg, --ns-focus-ring-offset, --ns-focus-ring-width, --ns-font-sans, --ns-leading-body, --ns-leading-small, --ns-leading-strong, --ns-muted-fg, --ns-primary, --ns-primary-fg, --ns-primary-hover, --ns-primary-stroke, --ns-radius-card, --ns-radius-control, --ns-radius-lg, --ns-radius-md, --ns-ring, --ns-space-1, --ns-space-2, --ns-space-3, --ns-space-4, --ns-stack-gap, --ns-state-disabled-opacity, --ns-state-pressed-opacity, --ns-surface, --ns-text-body, --ns-text-sm, --ns-text-small, --ns-text-strong, --ns-tracking-body, --ns-tracking-small, --ns-tracking-strong, --ns-weight-body, --ns-weight-small, --ns-weight-strong.

Contract and compatibility

Accessibility pattern: WAI-ARIA guidance

Native DOM attributes pass through where the implementation accepts them.
Compatibility values describe already-shipped headless or Utility state hooks. They are separate from the settled canonical design vocabulary and must be retained by styles serving these public APIs.

Design contract values marked planned are not implementation props. The props above describe what ships today.