# cutebook

Web components for AT Protocol guestbooks. Sign and display guestbook entries stored in user repositories, indexed via Constellation.

Demo: https://guestbook.nkp.pet/

## Installation

```bash
npm install cutebook
```

Peer dependencies:

```bash
npm install @atcute/client @atcute/oauth-browser-client @atcute/identity-resolver
```

## Quick Start

The simplest way to use the components is with the auto-register entry point:

```ts
import { configureGuestbook } from 'cutebook/register';

configureGuestbook({
  oauth: {
    clientId: 'https://your-app.com/client-metadata.json',
    redirectUri: 'https://your-app.com/',
    scope: 'atproto transition:generic',
  },
});
```

Then use the custom elements in your HTML:

```html
<guestbook-sign did="did:plc:your-did-here"></guestbook-sign>
<guestbook-display did="did:plc:your-did-here" limit="50"></guestbook-display>
```

## Manual Registration

If you need more control over element registration:

```ts
import { 
  GuestbookSignElement, 
  GuestbookDisplayElement, 
  configureGuestbook 
} from 'cutebook';

configureGuestbook({
  oauth: {
    clientId: 'https://your-app.com/client-metadata.json',
    redirectUri: 'https://your-app.com/',
    scope: 'atproto transition:generic',
  },
});

customElements.define('my-guestbook-sign', GuestbookSignElement);
customElements.define('my-guestbook-display', GuestbookDisplayElement);
```

## Components

### guestbook-sign

A form component that handles OAuth authentication and record creation.

| Attribute | Description |
|-----------|-------------|
| `did` | The DID of the guestbook owner (required) |

Dispatches a `sign-created` event with `{ uri, cid }` when a signature is successfully created.

### guestbook-display

Displays guestbook signatures by querying Constellation for backlinks.

| Attribute | Description |
|-----------|-------------|
| `did` | The DID of the guestbook owner (required) |
| `limit` | Maximum number of entries to display (default: 50) |

Call `.refresh()` on the element to reload signatures.

## Lexicon

Signatures use the `pet.nkp.guestbook.sign` record type:

```json
{
  "$type": "pet.nkp.guestbook.sign",
  "subject": "did:plc:guestbook-owner",
  "message": "Your message here",
  "createdAt": "2024-01-01T00:00:00.000Z"
}
```

## Development

```bash
npm run dev          # Run demo app
npm run build        # Build library
npm run build:demo   # Build demo app
npm run check        # Type check
```

## Credits

Handle typeahead powered by [actor-typeahead](https://tangled.org/jakelazaroff.com/actor-typeahead) by Jake Lazaroff.

## License

MIT