import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";

# Plannar Editor

A comprehensive MDX renderer with state binding playgrounds.

## Features

- **GitHub Flavored Markdown** via `remark-gfm`
- **Syntax highlighting** via `rehype-pretty-code`
- **Auto-linked headings** via `rehype-autolink-headings`
- **shadcn/ui** components in playgrounds

### Code Example

```ts
function hello(name: string): string {
  return `Hello, ${name}!`;
}
```

### GFM Table

| Feature | Status |
| ------- | ------ |
| GFM     | ✓      |
| Code    | ✓      |
| State   | ✓      |

## Playground

Native `<input>` with `bind="text:'Hello world'"` auto-wires `value` + `onChange`:

<Playground>
  <input
    bind="text:'Hello world'"
    placeholder="Type something..."
    className="h-8 w-full rounded-lg border border-input bg-transparent px-2.5 py-1 text-sm"
  />
  <p>You typed: {text}</p>
</Playground>

`<Button>` with `bind="count:0"` creates state only — you wire `onClick` manually:

<Playground>
  <Button bind="count:0" onClick={() => setCount(count + 1)} variant="outline">
    Clicked {count} times
  </Button>
</Playground>

`<Checkbox>` with `bind="checked:true"` auto-wires `checked` + `onCheckedChange`:

<Playground>
  <label>
    <Checkbox bind="checked:true" /> Toggle me ({String(checked)})
  </label>
</Playground>

Number `<input>` with `bind="amount:10"` auto-wires `value` + `onChange`:

<Playground>
  <input
    type="number"
    bind="amount:10"
    className="h-8 w-full rounded-lg border border-input bg-transparent px-2.5 py-1 text-sm"
  />
  <p>Amount: {amount}</p>
</Playground>
