page-editor-01
A Notion-style document page with comments beside the text — outline rail, comment highlights, a comment margin or popover, and version history.
Last updated
Kitchen circuit
The kitchen runs on its own circuit. Use a 25 A breaker for the cooker and keep the panel labelled.
Isolate the supply before opening the panel.
Wiring
Brown to L, blue to N, green-yellow to earth.
Cable sizes
- Cooker: 6 mm²
- Sockets: 2.5 mm²
Sign-off
Ask Bo to check the RCD before the inspection.
What it is
A document page. The header holds the breadcrumb, the save state ("Saved" / "Saving…"), who else
is editing (AvatarGroup of PersonAvatars), the open-comment count, the version history button
and a ⋯ menu. An outline rail (from TextEdit's onOutlineChange, hidden on narrow screens)
jumps to headings with scrollToHeading. The page is a TextEdit variant="document" with comment
highlights (annotations); selecting text offers Comment. On wide screens the threads sit
beside the text in a CommentMargin; below that the active thread opens in a CommentPopover.
The history button opens a Sheet with a VersionList, a DiffView against the page as it is
now, and "Restore this version". It is a block: you pull it once with shadcn add, and then
you own it. Sample state only.
Install
npx shadcn@latest add @vegastack/page-editor-01This installs the block's own files plus the components it composes: app-shell, avatar,
breadcrumb, button, comment-margin, comments, diff-view, dropdown-menu,
person-avatar, sheet, text-edit, use-media-query, version-list.
Preview
Kitchen circuit
The kitchen runs on its own circuit. Use a 25 A breaker for the cooker and keep the panel labelled.
Isolate the supply before opening the panel.
Wiring
Brown to L, blue to N, green-yellow to earth.
Cable sizes
- Cooker: 6 mm²
- Sockets: 2.5 mm²
Sign-off
Ask Bo to check the RCD before the inspection.
Anatomy
- Header:
Breadcrumb, the save state (role="status"),AvatarGroup, the comment count button, the history button, aDropdownMenu. - Outline rail: headings from
onOutlineChange, each a ghostButtoncallinghandleRef.scrollToHeading. - Page:
TextEditwithannotations,activeAnnotationId,onAnnotationClick,onCreateAnnotation,onAnnotationsLayout,autosave. - Comments:
CommentMarginofCommentThreads atmin-width: 80rem, elseCommentPopover. - History:
Sheet›VersionList+DiffView, "Restore this version" in the footer.
Files
| File | Registry type | Target |
|---|---|---|
page-editor-01/components/page-editor.tsx | registry:component | app/page-editor-01/components/page-editor.tsx |
page-editor-01/page.tsx | registry:page | app/page-editor-01/page.tsx |
Do / Don't
issue-detail-01
An issue page in the Linear style — status and title, a Notion-style description, comments, and a Properties rail.
notifications-01
The Regent Inbox — a sheet on the Inbox component with Mark all read, a More menu, All | Unread chips, day groups, rich rows, action chips and infinite scroll.