ZacharyZhang-NY/Ely-GPUI-Components
1
1 Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity
Files
cb6c78b90cd073aa96558e7b61ef106f36ab323d
Ely-GPUI-Components/tasks/ch21-30.md
T
ZacharyZhang-NY 04f88812dc Media · Audio and controls: player, waveform, spectrum, volume, speed, transport and playlist 
AudioPlayer sets a song's cover, title and artist over a scrubber with
the time played and left, the transport and the volume. AudioWaveform
draws peaks gathered to the bars that fit, dark as far as it has played,
and seeks by press, drag and keys, with the time tip the scrubber shares.
AudioSpectrum shows levels by pitch. VolumeControl mutes from its speaker,
and moving its slider while muted unmutes. PlaybackSpeedControl picks from
a menu. MediaControls holds shuffle, back, play, forward and repeat.
Playlist builds on SelectableList: the song under way is lit with moving
bars, and Enter or a double press plays another.

The video player's bar now rests while the stage itself holds focus, a
key it takes wakes the bar, and a press on a resting bar only wakes it.
2026-09-26 18:32:45 -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