ZacharyZhang-NY/Ely-GPUI-Components
1
1 Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity
Files
9872adc5e9bbbb210ec1fbb45ec1e371b0862495
Ely-GPUI-Components/tasks/ch21-30.md
T
ZacharyZhang-NYandClaude Opus 5.5 7f1cfe8c3d Media · Capture and devices: recorder, camera, mic meter, device choice and 3D model viewer 
ScreenRecorderControls holds a recording in one pill: Record, then a live
dot and the time it has run beside pause or resume and stop, with mic and
camera toggles. CameraPreview shows host frames in the camera's shape, or
the camera off. MicLevelMeter lights segments up to the level, amber and
red near the top, with tones shared from data_display. DeviceSelector
picks a microphone, camera or speaker through Select, which may now be
empty while shut. ModelViewer shows the host's frame for an orbit that a
drag, the arrows, Command-scroll, + and - and a reset move; the orbit is
seeded from the host so fast drags add up. The gallery draws a stone
torus per orbit and frees each replaced frame.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-26 19:05:23 -04:00

12 KiB
Raw Blame History

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::OverflowMenu that drags its block
  • SlashMenu → / in BlockEditor
  • FloatingFormatToolbar → overlays::FloatingToolbar
  • FixedFormatToolbar
  • LinkEditor
  • MentionMenu → @ in RichTextEditor and BlockEditor; forms::MentionInput in a field
  • EmojiAutocomplete → a colon and two letters in RichTextEditor and BlockEditor
  • 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, with limit for characters
  • ReadingTime

T21b Documents · Reading

  • MarkdownRenderer
  • DocumentViewer — host pages
  • PDFViewer — host pages; thumbnails, search, zoom, notes → documents::DocumentViewer with thumbnails, find (an editor::FindWidget) and notes
  • EpubReader — host chapters
  • OfficePreview — host pages → documents::DocumentViewer
  • PageThumbnailList
  • TableOfContents → navigation::TableOfContents; MarkdownRenderer::sections and outline feed it
  • DocumentOutline → navigation::TableOfContents
  • Footnote
  • Glossary / TooltipTerm
  • ReadingProgress
  • FocusMode / ZenMode → documents::ZenMode
  • PrintPreview — host pages

T21c Documents · Knowledge

  • PageTree → lists::Tree, a page's emoji leading its label
  • Backlinks
  • GraphView → charts::NetworkGraph
  • PageCover / PageIcon
  • PageProperties → data_display::PropertyGrid
  • DatabaseView — table, board, gallery, calendar, timeline → lands with Project (T31): its board is the KanbanBoard, its calendar the CalendarMonthView (T30)
  • TemplatePicker
  • TrashBin
  • VersionHistory
  • PageHistoryDiff
  • Favorites / Pinned → documents::Favorites

T22 Collaboration — src/collab

  • PresenceAvatars
  • RemoteCursor → over a forms::TextInput, placed where its offset sits as the field paints
  • RemoteSelection → over a forms::TextInput, from TextInput::bounds_for_range
  • CommentThread
  • CommentBubble / CommentMarker → collab::CommentMarker, its thread in an overlays::Popover
  • CommentSidebar
  • Reply / ReactionPicker
  • Reactions
  • Annotation / Highlight → collab::AnnotatedText; a plain mark is typography::Highlight
  • SuggestionMode → edits become suggestions through collab::suggested
  • TrackChanges
  • ShareDialog → with collab::LinkAccess for who the link lets in
  • PermissionSelect
  • InviteInput → a forms::TagInput that checks each address
  • 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 → the host draws the SVG; chat::ImageMessage shows it
  • ImageMessage / ImageGrid
  • FileMessage
  • AudioMessage
  • VideoMessage — host frames
  • LinkPreviewCard
  • QuoteReply
  • MessageActions
  • MessageEditor
  • BranchNavigator
  • RegenerateButton → chat::regenerate_button
  • StopGeneratingButton → chat::stop_button
  • ContinueButton → chat::continue_button
  • ErrorMessage / RetryMessage → chat::ErrorMessage, over feedback::Alert
  • RateLimitNotice
  • FeedbackForm
  • ScrollToBottomButton
  • DateSeparator
  • ThinkingBlock / ReasoningPanel → chat::ThinkingBlock
  • ThinkingIndicator
  • ThinkingDuration

T23b AI Chat · Citations

  • CitationBadge / InlineCitation → chat::CitationBadge, set after the words it cites
  • SourceCard
  • SourceList / SourcesPanel → chat::SourceList
  • SearchProgress
  • WebResultCard
  • DocumentChunkPreview

T23c AI Chat · Input

  • PromptInput / Composer → chat::PromptInput
  • AttachmentButton
  • AttachmentChip / AttachmentPreview → chat::AttachmentChip, a picture's thumbnail or a file's icon
  • PasteImagePreview → a pasted picture as an AttachmentChip
  • DragDropOverlay
  • VoiceInputButton
  • VoiceWaveform / RecordingIndicator → chat::VoiceWaveform, a red dot and the time with the bars
  • SlashCommandMenu → / at the start of chat::PromptInput, over forms::Suggestions
  • PromptTemplateMenu → menus::DropdownMenu of saved prompts
  • ContextMentionMenu → @ in chat::PromptInput
  • ContextChips
  • ModelSelector → forms::Select, a note on each model
  • ModeSelector → buttons::SegmentedControl
  • ToolToggleMenu → menus::DropdownMenu with check rows
  • TemperatureSlider / ParameterPanel → chat::ParameterPanel
  • SystemPromptEditor
  • TokenCounter
  • ContextWindowMeter → data_display::UsageBar
  • CostEstimator
  • SendButton
  • InputHint

T23d AI Chat · Conversations

  • ConversationList
  • ConversationItem
  • ConversationSearch → forms::SearchInput over chat::ConversationList::query
  • NewChatButton → chat::new_chat_button, a buttons::Button
  • FolderList / ProjectList → chat::ProjectList
  • ProjectKnowledgePanel
  • SharedConversationView
  • ConversationExport

T23e AI Chat · Welcome

  • WelcomeScreen / Greeting → chat::WelcomeScreen, a greeting for the hour
  • SuggestionChips / StarterPrompts → chat::SuggestionChips
  • PromptLibrary → documents::TemplatePicker over saved prompts
  • FollowUpSuggestions
  • CapabilityCards

T24a Agent · Tool calls — src/agent

  • ToolCallCard
  • ToolCallGroup
  • ToolApprovalDialog
  • PermissionPrompt

T24b Agent · Progress

  • AgentStepList / TaskTimeline → agent::AgentStepList, over data_display::Timeline
  • AgentPlan / TodoList → agent::AgentPlan, marks that pop in as items finish
  • AgentStatus
  • AgentProgress
  • SubAgentTree → lists::Tree, a node per agent with its state as note and tone

T24c Agent · Changes

  • FileChangeCard
  • MultiFileDiff Review → agent::MultiFileDiffReview, verdicts as collab::Decision
  • CommandExecutionCard → terminal::CommandBlock

T24d Agent · Previews

  • BrowserPreview / ScreenshotStream — host frames → agent::BrowserPreview, the frames so far along its foot
  • ComputerUseViewer — host frames
  • ArtifactPanel
  • ArtifactVersionSwitcher → chat::BranchNavigator, in agent::ArtifactPanel
  • LivePreview — host content

T24e Agent · Environment

  • SandboxStatus
  • MCPServerList / ConnectorList → agent::McpServerList
  • ToolRegistry Panel → agent::ToolRegistry
  • MemoryPanel
  • CheckpointList / Rewind → agent::CheckpointList, Rewind on each point but the current

T24f Agent · Control and cost

  • InterruptButton → chat::stop_button
  • HumanInputRequest
  • TokenUsageChart → charts::BarChart (stacked)
  • CostBreakdown
  • TraceViewer → debug::TimelineProfiler (a track per depth)
  • EvalResultTable → tables::DataTable (Tag and Progress cells)

T25a Generative · Prompt and settings — src/generative

  • ImageGenerationPanel → forms::Form of the fields below; Cmd-Enter generates
  • PromptEnhancer
  • NegativePromptInput → forms::TagInput
  • StylePresetPicker
  • SeedInput
  • AspectRatioPicker

T25b Generative · Queue and results

  • GenerationQueue
  • GenerationGrid
  • VariationPicker
  • ImageCompare → data_display::BeforeAfter
  • ABCompareView

T25c Generative · Canvas

  • InpaintCanvas
  • MaskBrush

T25d Generative · Sound and motion

  • AudioGenerationPlayer
  • VideoGenerationTimeline
  • TTSVoicePicker

T25e Generative · Models

  • ModelCard
  • ModelDownloadManager
  • ModelStatus
  • HardwareMonitor
  • FineTuneJobCard

T25f Generative · Data and prompts

  • DatasetViewer → tables::DataTable, with row detail
  • EmbeddingVisualizer — 2D, 3D projection
  • PromptPlayground
  • PromptDiff / PromptVersionHistory

T26a Media · Images — src/media

  • ImageViewer — zoom, pan, rotate, fit
  • ImageThumbnail
  • Lightbox / Gallery Viewer → overlays::Lightbox

T26b Media · Crop and annotate

  • ImageCropper — also T06e ImageUpload
  • ImageAnnotator

T26c Media · Video

  • VideoPlayer — host frames
  • VideoTimeline / Scrubber
  • VideoThumbnailStrip
  • SubtitleEditor

T26d Media · Audio and controls

  • AudioPlayer — host playback
  • AudioWaveform
  • AudioSpectrum / Visualizer
  • VolumeControl
  • PlaybackSpeedControl
  • MediaControls
  • Playlist

T26e Media · Capture and devices

  • 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
Reference in new issue View Git Blame Copy Permalink