# EditorLayout

> The frame of a document editor: a sticky action bar (back, title, save status, Preview, the primary action), a main column held to a ~680px writing measure, and a properties sidebar that becomes a full-screen sheet behind a "Settings" button on a narrow screen.

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

Renders the bar, the writing column and the sidebar. The sidebar is one `popover`
element: beside the column on a wide container and a full-screen sheet when narrow,
so the sheet opens and closes with no script.

## Examples

```tsx
<EditorLayout
	back={{ href: "/posts", label: "Posts" }}
	title="Designing a calmer editor"
	status={<SaveStatus id="post-status" labels={…} />}
	preview={<LinkButton href={previewUrl} variant="ghost" size="sm">Preview</LinkButton>}
	primary={<Button size="sm" disabled={!hasChanges}>Publish</Button>}
	sidebar={<PropertyList>…</PropertyList>}
	form="post-form"
	labels={{ settings: "Settings", closeSettings: "Close settings", sidebar: "Post settings" }}
>
	<PostBody />
</EditorLayout>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `back?` | `{ href: string; label: string }` | Where the back arrow leads, and its accessible name, such as "Posts". |
| `title` | `RemixNode` | The document's name in the bar, such as its title and type. |
| `status?` | `RemixNode` | The persistence signal, usually a `SaveStatus`. |
| `preview?` | `RemixNode` | A Preview link or button, before the primary action. |
| `primary?` | `RemixNode` | The publication action, such as a Publish button whose label carries its state. |
| `sidebar?` | `RemixNode` | The document's properties: status, slug, author, tags. |
| `form?` | `string` | The `id` of the document's form, which ⌘S/Ctrl+S submits while focus is in it or in no other form, saving the way the form's own submit does. |
| `labels` | `Labels` |  |

Also accepts everything in `Omit<TagProps<"div">, "title">`.