## Outline Editor (S—421)

A nested outliner: Enter adds a bullet, Tab indents, Shift+Tab outdents, and parents fold to hide their children.

- URL: https://sundaeui.dev/components/outline-editor
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/outline-editor.json`
- Tags: tree, keyboard, outline, editor, notes, bullets

Bullets with children get a fold toggle and a count of what is hidden. Backspace on an empty bullet removes it and returns to the one above.
Alt with the arrow keys moves a bullet up or down; touch users get indent, outdent and move buttons for the focused row.

### Usage

```tsx
import { OutlineEditor } from '@/components/sundae/outline-editor'

<OutlineEditor />
```

### Props

- `defaultItems` (`Item[]`): Starting bullets with depth.
- `onChange` (`(items: Item[]) => void`): Called on every edit.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Note apps, meeting agendas, planning tools.

### When not to use

- Rich documents with headings and media: use a full editor.

### Accessibility

- The outline is a list; each bullet input is named by its depth.
- Fold toggles are buttons with expanded state.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- Enter: New bullet
- Tab / Shift+Tab: Indent / outdent
- Alt + Up/Down: Move bullet
- Backspace on empty: Delete bullet