Pages
The Notion-style document mode — page tree, block editor, embedded data tables, and planning canvases.
Pages is the writing surface. It's a left-sidebar tree of Notion-style documents with a centered block editor.
Layout
CanvasPagesCard renders:
- Left sidebar — page tree with title, search, new-page button, draggable tree items, and a page count badge.
- Center — the
PageEditorrendered flat on the canvas background (no card wrapper) with the page icon and title at the top, then the blocks.
The page tree
Pages are nested via parent_id. The sidebar's tree supports:
- Search across page titles
- Drag-and-drop reorder — before, after, or nest-as-child (drop indicators show as a purple line)
- Inline new page button
- Lucide icons per page (via the shared
IconPicker) PageTreeDropdownin the breadcrumb for quick jumps without expanding the sidebar
The block editor
Type / to open the slash command palette. The 17 block types include:
- Text — paragraph, h1, h2, h3, bulleted, numbered, quote, callout, divider, code, image
- Interactive — todo (checkbox), toggle (collapsible)
- Layout — columns (multi-column container)
- Embed — markdown (live preview), table (live data table), inline page link
Drag the grip handle to reorder blocks. Empty blocks show placeholder text only when focused — keeps the page visually clean.
Embedded data tables
/table opens a table picker (search across all your data tables). Pick
one and a TableBlock is inserted. It renders the table with the same
column-type-aware cells as the Data mode (select pills, status badges,
email, date, multi-tag) and has a refresh button + change table
button.
This is how you write a page that references live data without copy-pasting.
Planning canvas
A page can attach a planning canvas — a text-centric React Flow board
with Text, Task, Group, and Link nodes plus the shared
Condition and Note nodes. It renders as an inline preview above
the page blocks; clicking opens the full-screen PlanningEditor.
Use it for project plans, research outlines, dependency maps — anything where the structure is more important than the prose.
Auto-save
Block edits update local state immediately and debounce-persist the full blocks JSONB to Supabase after 800 ms. You see "Saving..." → "Saved" indicators in the page header.