Skip to content
MIZU.

SIG—08 Signature system

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.

Live — this one is real

Scenario

Enter splits a line, Tab and Shift+Tab restructure, Alt+↑↓ moves a branch, ⌘/Ctrl+Enter marks done, ⌘/Ctrl+↑↓ folds, Alt+→ focuses on an item (or click its diamond).

  • Done.
  • Collapsed, 3 items hidden.

Enter adds a line, Tab and Shift Tab change level, Alt with arrows moves a line, Control or Command with Enter marks it done, Control or Command with arrows folds it, Alt Right focuses on it and Alt Left steps back out.

onItemsChange → Markdown
- Week one — make it boring
  - [x] Name one owner for the migration
  - Rehearse the rollback on staging
    - Time it with a stopwatch
    - Write down every manual step
  - Freeze the schema
- Week two — rehearse in public
  - Load test against the new schema
  - Status page copy reviewed by support
  - Dry run with the on-call rotation
- Launch day
  - Flag on for 5% · watch error budget
  - Everyone else at 14:00 if quiet

Usage

tsx
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} />;
}

This code, running — no configuration beyond the data

  • Done.

Enter adds a line, Tab and Shift Tab change level, Alt with arrows moves a line, Control or Command with Enter marks it done, Control or Command with arrows folds it, Alt Right focuses on it and Alt Left steps back out.

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

Source & setup

Add this component to your project with the shadcn CLI. The command copies its source and styles into your configured UI directory.

sh
npx shadcn@latest add 0xuser64bit/mizu/outliner

For npm imports, import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Requires React and Motion.

Inspect signature/Outliner.tsx

Source is included in the npm package under src/signature/Outliner.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
labelstring—Accessible name and the root of the location trail.
items / defaultItems / onItemsChangeOutlineItem[]—A tree of id, text, done, collapsed and children. Every edit returns a fresh tree.
placeholderstring"Write a line…"Prompt for the first line.
createId() => string—Id factory for new lines; defaults to a random id.

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.

Works alongside

ChronicleTrendChartWaveformPlane