# Outliner

A keyboard-first outline: Enter splits, Tab restructures, whole branches move and fold, and any item can be zoomed into until it becomes the title.

- Family: Signature, imported from `mizu-ui` or `mizu-ui/signature`
- Docs: https://mizu.user64bit.world/components/outliner
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/signature/Outliner.tsx

## Usage

```tsx
"use client";

import { useState } from "react";
import { Outliner, type OutlineItem } from "mizu-ui";

export function Example() {
  const [items, setItems] = useState<OutlineItem[]>([
    {
      id: "a",
      text: "Plan the launch",
      children: [
        { id: "b", text: "Name an owner", done: true },
        { id: "c", text: "Rehearse the rollback" },
      ],
    },
    { id: "d", text: "Write the announcement" },
  ]);
  return <Outliner label="Launch" items={items} onItemsChange={setItems} />;
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/outliner
```

## Props

- `label`: `string`. Accessible name and the root of the location trail.
- `items / defaultItems / onItemsChange`: `OutlineItem[]`. A tree of id, text, done, collapsed and children. Every edit returns a fresh tree.
- `placeholder`: `string` (default `"Write a line…"`). Prompt for the first line.
- `createId`: `() => string`. Id factory for new lines; defaults to a random id.

## Keyboard

- Enter · Shift + Enter: New line (splits at the caret) · line break
- Tab · Shift + Tab: Indent · outdent with descendants
- Alt + ↑ ↓: Move the branch among its siblings
- ⌘/Ctrl + Enter: Mark done
- ⌘/Ctrl + ↑ ↓: Fold or unfold
- Alt + → ←: Focus on the item · step back out
- Backspace: At the start: merge with the line above

## Accessibility

Each line is a labelled text field that states its level and position; done and folded states are described. Every structural command is a key chord with an announcement. The location trail is a navigation landmark; focusing into an item moves focus to its first line.

## Motion

Lines slide to their new level or place, open and close in height, and a focused item's text grows into the page title through a shared layout transition; stepping out reverses it. The active thread is traced in accent. Reduced motion changes structure instantly.