# Managed copy — `@sonordev/site-kit/website/slots`

Let the owner edit a site's words in Sonor without a deploy, while you keep
the markup. Wrap the copy you'd like managed; the text in your code is the
fallback, so the page renders exactly as written until someone edits it, and
whenever Sonor can't be reached.

```tsx
import { ManagedSlot, ManagedRichText, ManagedLink, ManagedList } from '@sonordev/site-kit/website/slots'

<h1 className="hero-title">
  <ManagedSlot id="home-hero-headline" page="/">
    New homes in Springfield and beyond
  </ManagedSlot>
</h1>
```

Every managed region shows up in Sonor under **Website → Content** the first
time a page renders it. There's no schema to define.

## Four kinds of copy

| Component           | For                             | The owner edits                        |
| ------------------- | ------------------------------- | -------------------------------------- |
| `<ManagedSlot>`     | a headline, tagline, label      | plain text                             |
| `<ManagedRichText>` | an intro, an about section      | paragraphs, bold, italic, links, lists |
| `<ManagedLink>`     | a call to action                | its label and where it goes            |
| `<ManagedList>`     | services, team, FAQs, a gallery | items: title, body, link, image        |

### `ManagedRichText`

```tsx
<div className="prose">
  <ManagedRichText id="about-intro" page="/about">
    {`We've built homes here since **1998**.\n\n- Custom builds\n- Remodels`}
  </ManagedRichText>
</div>
```

A string child is read as the same rich-text subset the owner edits, so the
fallback and the managed copy render alike. It renders `<p>`, `<ul>`, `<ol>`,
`<strong>`, `<em>`, `<a>` and `<br>`, and nothing else: managed copy is
parsed into elements, never inserted as HTML.

The subset: blank-line paragraphs, single newlines as line breaks,
`**bold**`, `*italic*`, `[a link](https://…)`, and `-` or `1.` lists.

### `ManagedLink`

```tsx
<ManagedLink id="home-hero-cta" href="/contact" label="Get a free quote">
  {({ href, label }) => <Link href={href} className="btn">{label}</Link>}
</ManagedLink>
```

Without a render function it draws a plain `<a>` with your `className`.
Managed links may point to `https:`, `http:`, `mailto:`, `tel:`, a `#anchor`
or a `/path`.

### `ManagedList`

```tsx
<ManagedList id="home-services" items={SERVICES}>
  {(items) => (
    <ul className="grid">
      {items.map((s) => (
        <li key={s.title}>
          <a href={s.href}>{s.title}</a>
          <p>{s.body}</p>
        </li>
      ))}
    </ul>
  )}
</ManagedList>
```

Each item may have a `title`, a plain-text `body`, an `href` and an
`image: { src, alt, width?, height? }` (https only). Up to 50 items.

## Props every component takes

| Prop         |                                                                                                                                                               |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `id`         | stable, lowercase, page-scoped by convention: `home-hero-headline`                                                                                            |
| `page`       | the route it renders on (`"/pricing"`), a literal; Sonor ties the copy to that page's analytics                                                               |
| `site`       | the host, on a multi-site project (defaults to `NEXT_PUBLIC_SITE_URL`)                                                                                        |
| `revalidate` | seconds before a cached value is checked again (default 300); with [Live updates](https://sonor.dev/site-kit/live-updates) installed, edits don't wait for it |

## How it stays fast and safe

- **Static.** Copy resolves in the server render with a cached fetch, so a
  page using it stays prerendered. Nothing ships to the browser.
- **Fallback first.** No key, no network, a bad response, or content of a
  different kind than the code now renders: the fallback shows. It never
  breaks a build or a page.
- **Signed.** Sonor signs every value with your project key and site-kit
  refuses anything that doesn't verify.
- **Live in seconds.** Publishing in Sonor calls the site's revalidation
  route, so the change shows without waiting for the next check. It's one
  file, shared with the rest of site-kit (see [Live updates](https://sonor.dev/site-kit/live-updates)):

```ts
// app/api/seo-revalidate/route.ts
export { POST } from '@sonordev/site-kit/revalidate'
```

Without it, a published edit shows once the cached copy ages out (the
`revalidate` window, five minutes by default).

## Edit on page

In Sonor, Website → Content → **Edit on page** opens the live site with its
managed copy outlined. Click any of it to edit it in a side panel. Text, rich
text and links show the change on the page as you type, before you publish.
Links on the page take you to its other pages, still in edit mode.

The site needs nothing beyond site-kit 7.1: no login, no secret, no extra
route. It works like this:

- Sonor frames the page with `?sonor_edit=1`. For any other visitor the
  page is unchanged; the overlay is a separate chunk that only loads when
  Sonor frames the page.
- The overlay finds the copy by its visible text, so your markup and CSS are
  exactly what you wrote (no wrapper elements, no attributes).
- The page only reports what it found and what was clicked. The edit itself
  is saved by Sonor with the signed-in person's own account.
- It needs Sonor's dashboard to be allowed to frame the site, which
  `securityHeaders` does by default. A site that sets its own
  `frame-ancestors` should use `DEFAULT_FRAME_ANCESTORS`.

## Lists with photos

A list item can carry an image (`{ src, alt, width, height }`). In Sonor,
**Upload photo** on a list item stores it with the project's files and fills
in its size, so the page can reserve the space. A gallery is a list:

```tsx
<ManagedList id="gallery" items={[]}>
  {(items) => (
    <ul className="gallery">
      {items.map((item, i) =>
        item.image ? (
          <li key={item.image.src}>
            <img src={item.image.src} alt={item.image.alt} width={item.image.width} height={item.image.height} loading={i < 3 ? 'eager' : 'lazy'} />
            {item.title && <p>{item.title}</p>}
          </li>
        ) : null,
      )}
    </ul>
  )}
</ManagedList>
```

## Drafts and history

Edits in Sonor can be saved as drafts and published when they're ready.
Every publish is kept, so any earlier version can be restored. Signal can
propose copy too; proposals wait for approval in Sonor unless the project
lets it publish on its own.

## Using it without a component

```ts
import { getSlot } from '@sonordev/site-kit/website/slots'

const slot = await getSlot('home-services', { type: 'list' })
// slot?.value → { items: [...] }, or null (render your fallback)
```