# DetailSheet

> A non-modal side sheet showing one record whose open state lives in the URL: the server renders it when the page's query names a record, Close is a link back to the list, and the list behind stays interactive.

```ts
import { DetailSheet } from "@sdxc/ui/app";
```

Renders an `<aside>` named by its heading over the viewport, passing the pointer through
to the page, with the panel docked to its inline end at `--ui-app-detail-sheet-width`, or
a bottom sheet below 40rem. Never a modal; destructive actions confirm in the app's flow.

## Examples

```tsx
{selected ? (
	<DetailSheet
		id="monitor"
		title={selected.name}
		closeHref="/monitors#monitor-42"
		permalink={`/monitors/${selected.id}`}
		position={{ index: 3, total: 84, previousHref: "/monitors?pane=41", nextHref: "/monitors?pane=43" }}
		labels={labels}
	>
		<PropertyList>…</PropertyList>
	</DetailSheet>
) : null}
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `id` | `string` | The sheet's id; its heading takes `${id}-title`. |
| `title` | `RemixNode` | The record's name, in the sheet's heading. |
| `description?` | `RemixNode` | A line under the title: an id, a status, a host. |
| `closeHref` | `string` | The list URL without the record open. Close and Esc follow it. |
| `permalink?` | `string` | The URL a teammate can open this record at; shows the copy button. |
| `position?` | `Position` | Shows `n / N` with previous/next links and their keys. |
| `actions?` | `RemixNode` | Extra header controls, placed before the navigation. |
| `footer?` | `RemixNode` | Pinned under the body: the record's own actions. |
| `keys?` | `DetailSheetKeyScope` | Where Esc, k/j and ↑/↓ answer: `"page"` document-wide with focus moved into the sheet on open, `"sheet"` only while focus is inside it. |
| `inset?` | `boolean` | Floats the sheet off the viewport edges as a rounded card. |
| `labels` | `Labels` |  |
| `children?` | `RemixNode` | The record's detail: a `PropertyList`, a `Timeline`, notes. |

Also accepts everything in `Omit<TagProps<"aside">, "id" | "title">`.