# Bluesky Post Creator

## Example

```svelte
<script lang="ts">
	import { BlueskyPostCreator, type BlueskyPostContent } from '@foxui/all';

	let content: BlueskyPostContent = $state({ text: '', facets: [] });
</script>

<div class="not-prose flex w-full flex-col gap-4">
	<BlueskyPostCreator
		bind:content
		class="border-base-300 dark:border-base-700 rounded-2xl border p-4"
	/>

	{#if content.text}
		<details class="text-base-500 text-xs">
			<summary class="cursor-pointer">Output</summary>
			<pre class="bg-base-100 dark:bg-base-800 mt-2 overflow-x-auto rounded-xl p-3">{JSON.stringify(content, null, 2)}</pre>
		</details>
	{/if}
</div>
```

## Documentation

## Usage

```svelte
<script lang="ts">
	import { BlueskyPostCreator, type BlueskyPostContent } from '@foxui/social';

	let content: BlueskyPostContent = $state({ text: '', facets: [] });
</script>

<BlueskyPostCreator
	bind:content
	placeholder="What's on your mind?"
	maxLength={300}
/>
```

## Features

- **@mentions** - Type `@` followed by at least 2 characters to search for Bluesky handles. Select from the popup to insert a mention with the user's DID.
- **Links** - URLs are automatically detected and linked.
- **#hashtags** - Type `#tag` and hashtags are automatically detected in the output facets.
- **Character count** - Shows remaining characters with color indicators (amber < 20, red when over limit).

## Output

The `content` bindable returns a `BlueskyPostContent` object:

```typescript
{
	text: string;        // Plain text of the post
	facets: BlueskyFacet[];  // Byte-indexed facets for mentions, links, and tags
}
```

Each facet has the Bluesky AT Protocol format with `index.byteStart`, `index.byteEnd`, and `features` array containing the facet type (`#mention`, `#link`, or `#tag`).

## API Reference

### BlueskyPostCreator
A Bluesky post composition editor with support for @mentions (with handle search), auto-linked URLs, and #hashtags. Outputs Bluesky-compatible text + facets.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| content | `{ text: string; facets: BlueskyFacet[] }` | `-` | The post content with plain text and byte-indexed facets for mentions, links, and tags. (bindable) |
| placeholder | `string` | `"What's on your mind?"` | Placeholder text shown when the editor is empty. |
| maxLength | `number` | `300` | Maximum character count. A counter is displayed that changes color as the limit approaches. |
| onupdate | `(content: BlueskyPostContent) => void` | `-` | Callback invoked whenever the post content changes. |
| host | `string` | `'https://public.api.bsky.app'` | Custom AT Protocol API host for handle search. Defaults to the public Bluesky API. |
| editor | `Readable<Editor>` | `-` | The underlying tiptap editor instance (svelte-tiptap store). (bindable) |
| ref | `HTMLDivElement` | `-` | Reference to the container element. (bindable) |
| class | `string` | `-` | Additional CSS classes for the container. |