ZacharyZhang-NY
6a9ce8a2c3
- markdown read with pulldown-cmark: marks for live styling, blocks, links, words - forms::Highlight gains weight, slant and strike; measure and paint share runs - Inter Italic embedded, so emphasis reads slanted - forms::mention's popup and keys become Suggestions, shared with the editors - RichTextEditor with FixedFormatToolbar, the floating toolbar, LinkEditor, @ and : suggestions, WordCount and ReadingTime - MarkdownEditor: visual (a pressed block opens as source), source, split - BlockEditor: prose, lists, to-dos, quotes, callouts, toggles, code, math, diagrams the app draws, dividers, tables that grow and merge, pictures to resize and align, cards for video and pages, columns, synced text; slash menu, markdown shortcuts, handles that drag and open a menu, one undo for all - TodoItem and Checklist - icons: heading-1..3, workflow, merge - gallery: the Documents page with scripted states
8.8 KiB
8.8 KiB
Chapters 21–30
T21a Documents · Editing — src/documents
- RichTextEditor
- MarkdownEditor — visual, source, split
- BlockEditor
- Block types — paragraph, heading, list, todo, quote, code, divider, table, image, video, embed, math, callout, toggle, columns, synced; video and embed open as cards the app plays or shows
- BlockHandle → the block editor's handle, a
menus::OverflowMenuthat drags its block - SlashMenu →
/inBlockEditor - FloatingFormatToolbar →
overlays::FloatingToolbar - FixedFormatToolbar
- LinkEditor
- MentionMenu →
@inRichTextEditorandBlockEditor;forms::MentionInputin a field - EmojiAutocomplete → a colon and two letters in
RichTextEditorandBlockEditor - TableEditor → the block editor's table: rows and columns added and removed, cells merged across
- ImageEditorBlock → the block editor's picture: resized by its edges, aligned, captioned
- MathEditor / LatexBlock → the block editor's math block over
typography::Latex - MermaidBlock / DiagramBlock — host renders the SVG →
BlockEditor::diagrams - CodeBlockEditor → the block editor's code block
- TodoItem / Checklist
- PlaceholderText → each kind's hint in
BlockEditor - WordCount / CharacterCount →
WordCount, withlimitfor characters - ReadingTime
T21b Documents · Reading
- MarkdownRenderer
- DocumentViewer — host pages
- PDFViewer — host pages; thumbnails, search, zoom, notes
- EpubReader — host chapters
- OfficePreview — host pages
- PageThumbnailList
- TableOfContents →
navigation::TableOfContents - DocumentOutline →
navigation::TableOfContents - Footnote
- Glossary / TooltipTerm
- ReadingProgress
- FocusMode / ZenMode
- PrintPreview — host pages
T21c Documents · Knowledge
- PageTree
- Backlinks
- GraphView →
charts::NetworkGraph - PageCover / PageIcon
- PageProperties
- DatabaseView — table, board, gallery, calendar, timeline
- TemplatePicker
- TrashBin
- VersionHistory
- PageHistoryDiff
- Favorites / Pinned
T22 Collaboration — src/collab
- PresenceAvatars
- RemoteCursor
- RemoteSelection
- CommentThread
- CommentBubble / CommentMarker
- CommentSidebar
- Reply / ReactionPicker
- Reactions
- Annotation / Highlight
- SuggestionMode
- TrackChanges
- ShareDialog
- PermissionSelect
- InviteInput
- AccessList
- ActivityLog →
data_display::ActivityFeed - FollowMode
- LiveIndicator
T23a AI Chat · Messages — src/chat
- ChatContainer
- MessageList — virtualized, stick to bottom, new-message hint
- MessageBubble — user, assistant, system, error
- MessageAvatar
- MessageHeader
- MessageFooter
- StreamingText
- StreamingMarkdown
- StreamingCursor
- CodeBlock — language, copy, download, run, fold, apply
- MathBlock →
typography::Latex - TableBlock →
documents::MarkdownRenderer - MermaidRenderer →
documents::MermaidBlock - ImageMessage / ImageGrid
- FileMessage
- AudioMessage
- VideoMessage — host frames
- LinkPreviewCard
- QuoteReply
- MessageActions
- MessageEditor
- BranchNavigator
- RegenerateButton
- StopGeneratingButton
- ContinueButton
- ErrorMessage / RetryMessage
- RateLimitNotice
- FeedbackForm
- ScrollToBottomButton
- DateSeparator
- ThinkingBlock / ReasoningPanel
- ThinkingIndicator
- ThinkingDuration
T23b AI Chat · Citations
- CitationBadge / InlineCitation
- SourceCard
- SourceList / SourcesPanel
- SearchProgress
- WebResultCard
- DocumentChunkPreview
T23c AI Chat · Input
- PromptInput / Composer
- AttachmentButton
- AttachmentChip / AttachmentPreview
- PasteImagePreview
- DragDropOverlay
- VoiceInputButton
- VoiceWaveform / RecordingIndicator
- SlashCommandMenu →
documents::SlashMenu - PromptTemplateMenu
- ContextMentionMenu
- ContextChips
- ModelSelector
- ModeSelector
- ToolToggleMenu
- TemperatureSlider / ParameterPanel
- SystemPromptEditor
- TokenCounter
- ContextWindowMeter
- CostEstimator
- SendButton
- InputHint
T23d AI Chat · Conversations
- ConversationList
- ConversationItem
- ConversationSearch
- NewChatButton
- FolderList / ProjectList
- ProjectKnowledgePanel
- SharedConversationView
- ConversationExport
T23e AI Chat · Welcome
- WelcomeScreen / Greeting
- SuggestionChips / StarterPrompts
- PromptLibrary
- FollowUpSuggestions
- CapabilityCards
T24 Agent — src/agent
- ToolCallCard
- ToolCallGroup
- ToolApprovalDialog
- PermissionPrompt
- AgentStepList / TaskTimeline
- AgentPlan / TodoList
- AgentStatus
- AgentProgress
- SubAgentTree
- FileChangeCard
- MultiFileDiff Review
- CommandExecutionCard
- BrowserPreview / ScreenshotStream — host frames
- ComputerUseViewer — host frames
- ArtifactPanel
- ArtifactVersionSwitcher
- LivePreview — host content
- SandboxStatus
- MCPServerList / ConnectorList
- ToolRegistry Panel
- MemoryPanel
- CheckpointList / Rewind
- InterruptButton
- HumanInputRequest
- TokenUsageChart
- CostBreakdown
- TraceViewer
- EvalResultTable
T25 Generative — src/generative
- ImageGenerationPanel
- GenerationQueue
- GenerationGrid
- VariationPicker
- PromptEnhancer
- NegativePromptInput
- StylePresetPicker
- SeedInput
- AspectRatioPicker
- InpaintCanvas
- MaskBrush
- ImageCompare →
data_display::BeforeAfter - AudioGenerationPlayer
- VideoGenerationTimeline
- TTSVoicePicker
- ModelCard
- ModelDownloadManager
- ModelStatus
- HardwareMonitor
- FineTuneJobCard
- DatasetViewer
- EmbeddingVisualizer — 2D, 3D projection
- PromptPlayground
- PromptDiff / PromptVersionHistory
- ABCompareView
T26 Media — src/media
- ImageViewer — zoom, pan, rotate, fit
- ImageCropper — also T06e ImageUpload
- ImageAnnotator
- ImageThumbnail
- Lightbox / Gallery Viewer →
overlays::Lightbox - VideoPlayer — host frames
- VideoTimeline / Scrubber
- VideoThumbnailStrip
- AudioPlayer — host playback
- AudioWaveform
- AudioSpectrum / Visualizer
- VolumeControl
- PlaybackSpeedControl
- MediaControls
- Playlist
- SubtitleEditor
- ScreenRecorderControls
- CameraPreview — host frames
- MicLevelMeter
- DeviceSelector
- 3DModelViewer — host frames, orbit input
T27 Files — src/files
- FileExplorer — list, icons, columns
- FileGrid
- FileList
- FileItem
- FileIcon
- FilePreview / QuickLook
- FileBreadcrumb / PathBar →
navigation::Breadcrumb - FolderTree →
lists::FileTree - FileContextMenu →
menus::ContextMenu - RenameInline →
forms::InlineEdit - DragDropFiles →
forms::DropZone - FileOperationProgress
- TransferQueue
- DownloadManager
- StorageUsage →
data_display::UsageBar - RecentFiles
- Favorites / Bookmarks →
documents::Favorites - FileSearch
- DuplicateFinder
- ArchiveViewer — host entries
- HexViewer →
debug::HexViewer
T28 Messaging — src/messaging
- ChannelList / ChatList
- ChannelItem
- DirectMessageItem
- MessageThread
- ThreadPanel
- ChatMessage
- UnreadDivider
- MessageReactions →
collab::Reactions - ReadReceipt
- TypingIndicator →
motion::TypingIndicator - MemberList
- UserProfileCard
- OnlineStatus
- StatusSetter
- VoiceCallBar
- VideoCallGrid — host frames
- ScreenShareView — host frames
- CallControls
- ParticipantTile
- IncomingCallDialog
- StickerPicker
- GifPicker — host images
- PinnedMessages
- ChannelHeader
- HuddleIndicator
T29 Mail — src/mail
- MailboxList / FolderList
- MailList
- MailItem
- MailReader
- MailComposer
- RecipientInput
- MailThreadView
- QuotedText
- SignatureEditor
- LabelPicker
- SnoozePicker
- ScheduleSend
- InboxZeroState
T30 Calendar — src/calendar
- CalendarMonthView
- CalendarWeekView
- CalendarDayView
- AgendaView
- YearView
- MiniCalendar →
forms::Calendar - EventCard / EventChip
- EventEditor
- EventPopover
- TimeGrid — drag to create, resize
- AllDayRow
- CurrentTimeIndicator
- RecurrenceEditor
- AvailabilityPicker
- TimezoneOverlay
- ReminderPicker
- AttendeeList