# DesktopDialog

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

[All components](https://rickylabs.github.io/netscript/design-system/components/) · [Theme builder](https://rickylabs.github.io/netscript/create/) · [Implementation source](https://github.com/rickylabs/netscript/blob/main/packages/fresh-ui/registry/components/ui/desktop-dialog.tsx)

## Live preview

[Open live desktop-dialog preview](https://rickylabs.github.io/netscript/assets/fresh-ui/preview/?component=desktop-dialog&theme=studio-utility)

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

## Install

```bash
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.

```tsx
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](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)

- 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.