# DesktopNotification

Side-effect-free native notification preview and explicit host request control.

[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-notification.tsx)

## Live preview

[Open live desktop-notification preview](https://rickylabs.github.io/netscript/assets/fresh-ui/preview/?component=desktop-notification&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-notification
```

## 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 { DesktopNotification } from '@app/components/ui/desktop-notification.tsx';

export function Example() {
  const [value, setValue] = useState('standard');
  const [open, setOpen] = useState(false);
  const [notice, report] = useState('');
  return (<><div><DesktopNotification disabled notification={ {title:"Order shipped",body:"SO–10480 is on its way"} } /></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 |
| --- | --- | --- | --- | --- |
| `DesktopNotificationProps` | `notification` | `DesktopNotificationRequest` | No | Notification options passed unchanged to the desktop controller. |
| `DesktopNotificationProps` | `onRequest` | `(notification: DesktopNotificationRequest) => void` | Yes | Receives the request after an explicit user action. |
| `DesktopNotificationProps` | `disabled` | `boolean` | Yes | Disable requests when notifications are unavailable. |
| `DesktopNotificationProps` | `class` | `string` | Yes | Additional root class name. |

## Keyboard

| Key | Action |
| --- | --- |
| `Tab/Shift+Tab` | Move between native controls |
| `Enter/Space` | Activate focused button; links use Enter |

## Tokens

Semantic contract roles: `space/stack/gap`, `text/muted`.

CSS custom properties referenced directly: `--ns-accent`, `--ns-border`, `--ns-border-width`, `--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`, `--ns-muted-fg`, `--ns-radius-card`, `--ns-radius-control`, `--ns-radius-input`, `--ns-radius-lg`, `--ns-radius-md`, `--ns-ring`, `--ns-selected`, `--ns-shadow-sm`, `--ns-size-avatar-md`, `--ns-space-1`, `--ns-space-10`, `--ns-space-2`, `--ns-space-3`, `--ns-space-4`, `--ns-state-disabled-opacity`, `--ns-surface`, `--ns-surface-raised`, `--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: native buttons and links

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