Ely-GPUI-Components/tasks/ch01-10.md

Chapters 1–10

T01 Primitives — src/primitives

• Box / View — native div()
• Text — native: strings and StyledText are elements
• Icon (T00)
• IconSet / IconRegistry (T00)
• Svg — native svg()
• Image — loading, failed, placeholder over img()
• Canvas — native canvas()
• Divider / Separator
• Spacer — native div().flex_1()
• Portal — native deferred(anchored())
• Overlay / Backdrop
• Slot — native impl IntoElement params and ParentElement
• Show / When — native .when() / .when_some()
• For / Each — native .children(iter)
• Fragment — native: children take iterators
• VisuallyHidden — blocked: gpui 0.2.2 has no accessibility tree
• FocusRing
• FocusScope / FocusTrap
• ClickOutside — native on_mouse_down_out
• HoverArea — native on_hover / .hover()
• Pressable — press state, long press
• KeyboardHandler — native on_key_down / on_action
• Measure
• ResizeObserver → primitives::Measure
• IntersectionObserver
• Clipboard — native write_to_clipboard / read_from_clipboard
• Tooltip Trigger — owns Tooltip: delay, follow mouse, rich content

T02 Typography — src/typography

• Heading (H1–H6)
• Title / Subtitle
• Paragraph
• Label
• Caption
• Overline
• Code
• Kbd — ⌘ / Ctrl by platform
• KbdCombo
• Blockquote
• Highlight / Mark
• Truncate — native .truncate()
• LineClamp — native .line_clamp(n)
• MiddleEllipsis
• EllipsisTooltip
• Link
• ExternalLink
• RelativeTime
• DateTimeText
• NumberText
• CurrencyText
• PercentText
• FileSizeText
• DurationText
• PluralText
• CopyableText
• SelectableText — prove: selection over StyledText layout
• Emoji — shortcodes
• Latex / MathInline — prove: TeX subset
• AnimatedNumber
• Typewriter
• GradientText — per-glyph tonal ramp
• ShimmerText

T03 Layout — src/layout

• Stack / HStack / VStack
• Flex — native .flex()
• Grid / GridItem — native .grid(), .col_span()
• SimpleGrid
• Masonry
• Center — native .flex().items_center().justify_center()
• Container
• AspectRatio
• Inset / Padding — native .p_*()
• Wrap — native .flex_wrap()
• Absolute / Positioned — native .absolute()
• Layer / ZStack
• ScrollArea
• Scrollbar
• ScrollShadow
• ScrollToTop
• StickyHeader
• SplitPane — horizontal, vertical, nested
• ResizablePanel / ResizablePanelGroup → layout::SplitPane
• ResizeHandle
• Collapsible
• Accordion / AccordionItem
• Card / CardHeader / CardBody / CardFooter
• Panel / PanelHeader
• Section / SectionHeader
• Group / Fieldset
• Frame
• Well
• Sidebar
• Drawer
• Sheet
• Page / PageHeader / PageContent
• AppShell
• MasterDetail
• ThreeColumnLayout → layout::SplitPane
• Dock / DockPanel
• DockZone / DropIndicator
• FloatingPanel
• Pane / PaneGroup
• Workspace — versioned layout snapshot
• Viewport

T04 Window & Shell — src/shell

• TitleBar
• WindowControls — macOS, Windows, Linux
• TrafficLights → shell::WindowControls
• WindowDragRegion — shell::drag_region: native drag area, Linux move, double-click zoom
• WindowResizeBorder — shell::ResizeBorder: client decorations only; macOS and Windows resize natively
• MenuBar → menus::MenuBar (T08): the NativeMenu definitions, drawn in the window
• NativeMenu — native cx.set_menus()
• Toolbar / ToolbarGroup / ToolbarSeparator
• StatusBar / StatusBarItem
• ActivityBar
• NavigationRail → shell::ActivityBar
• TabBar
• SplashScreen
• AboutDialog
• TrayIcon / TrayMenu — macOS NSStatusItem; other systems get an error
• DockBadge — macOS dock tile; other systems get an error
• JumpList — native cx.set_dock_menu()
• SystemNotification — blocked: an unbundled app has no notification center; gpui 0.2.2 has no API
• MultiWindow Manager
• WindowSwitcher
• QuickLauncher → navigation::QuickLauncher (T07c): a SearchPalette in an always-on-top window
• MiniWindow / CompactMode
• AlwaysOnTop — native WindowKind::PopUp
• PictureInPicture → shell::MiniWindow at a screen corner; the host supplies the view
• UpdateBanner / UpdateDialog
• CrashReporter
• OfflineIndicator
• ZoomControl

T05 Buttons & Actions — src/buttons

• Button (T00)
• IconButton (T00)
• ButtonGroup
• SplitButton → lands with Menus (T08): its dropdown is a Menu
• DropdownButton / MenuButton → menus::DropdownMenu (T08)
• ToggleButton
• ToggleGroup
• SegmentedControl
• FloatingActionButton
• LoadingButton → buttons::Button loading state, lands with Spinner (T11)
• ConfirmButton — hold or click twice
• HoldToConfirm → buttons::ConfirmButton
• CopyButton
• ShareButton
• CloseButton
• BackButton
• MoreButton
• ActionBar
• BulkActionBar
• ActionSheet
• QuickActions
• ShortcutHint → buttons::Button::shortcut

T06a Forms · Text — src/forms

• Input / TextField
• TextArea → forms::TextInput::multi_line
• PasswordInput
• SearchInput
• NumberInput
• ScrubInput
• CurrencyInput → forms::NumberInput::currency
• PercentInput → forms::NumberInput::percent
• UnitInput
• EmailInput
• UrlInput
• PhoneInput
• MaskedInput
• PinInput / OTPInput
• InlineEdit / EditableText
• InputGroup / InputAddon
• ClearableInput → forms::Input::clearable
• AutoResizeInput → forms::TextInput::multi_line
• MentionInput
• HashtagInput → forms::MentionInput with #
• TagInput / TokenInput
• KeyValueInput
• ListInput
• PathInput — native dialog via prompt_for_paths
• RegexInput
• ExpressionInput
• HotkeyInput / ShortcutRecorder

T06b Forms · Selection

• Checkbox
• CheckboxGroup
• CheckboxCard
• Radio / RadioGroup
• RadioCard
• Switch / Toggle
• Select
• NativeSelect — blocked: gpui 0.2.2 has no native popup menu
• Combobox
• Autocomplete → forms::Combobox::free
• MultiSelect
• CascadeSelect / Cascader
• TreeSelect → lands with Lists & Trees (T13): its list is a Tree
• TransferList
• ListBox
• ChoiceChips / FilterChips
• Rating
• Slider
• RangeSlider
• VerticalSlider → forms::Slider::vertical
• Knob / Dial
• Stepper

T06c Forms · Date & Time

• Calendar
• DatePicker
• DateRangePicker
• TimePicker
• DateTimePicker
• MonthPicker / YearPicker / QuarterPicker
• WeekPicker
• RelativeDatePicker
• TimezoneSelect
• DurationPicker
• CronEditor

T06d Forms · Color

• ColorPicker — HSV, RGB, HEX, alpha → forms::ColorPicker
• ColorSwatch → forms::ColorSwatch
• ColorPalette → forms::ColorPalette
• EyeDropper — proved: NSColorSampler; sRGB read tested (read_srgb), the sampler draws out of process → forms::EyeDropper
• GradientEditor → forms::GradientEditor

T06e Forms · Files

• FilePicker / FileInput → forms::FileInput
• FolderPicker → forms::PathInput::directories (T06a)
• DropZone → forms::DropZone
• UploadList → lands with Loading & Motion (T11): its rows are ProgressBars
• ImageUpload — preview, crop → lands with Media (T26): its crop is the ImageCropper
• AvatarUpload → lands with Data Display (T12): it is an Avatar you replace

T06f Forms · Other

• SignaturePad → forms::SignaturePad
• CodeInput → forms::CodeInput, colored by code_highlights
• JsonInput → forms::JsonInput, colored by json_highlights
• FontPicker → forms::FontPicker
• IconPicker → forms::IconPicker
• EmojiPicker → forms::EmojiPicker
• LanguageSelect → forms::Combobox::languages
• CountrySelect → forms::Combobox::countries
• CurrencySelect → forms::Combobox::currencies

T06g Forms · Structure

• Form → forms::Form, Cmd-Enter submits
• FormField → forms::FormField
• FormLabel — required mark, help tip → forms::FormLabel
• FormDescription / HelperText → typography::Caption, placed by FormField::description
• FormError / ValidationMessage → forms::FormError
• FormSection → forms::FormSection
• FormActions → buttons::ActionBar
• FieldArray → forms::FieldArray; ListInput and KeyValueInput use it
• InlineForm → forms::InlineForm
• WizardForm / MultiStepForm → lands with Navigation (T07): its frame is the Wizard
• DirtyIndicator → forms::DirtyIndicator

T07a Navigation · Tabs & paths — src/navigation

• Tabs — top, left, bottom → navigation::Tabs
• EditorTabs → navigation::EditorTabs
• TabOverflowMenu → navigation::TabOverflowMenu
• Breadcrumb → navigation::Breadcrumb
• Pagination → navigation::Pagination
• LoadMore → lands with Loading (T11a): its busy state is a Spinner
• Stepper / Steps / Wizard → navigation::Steps, navigation::Wizard; also T06g WizardForm

T07b Navigation · Places

• Sidebar Navigation / NavItem / NavGroup → navigation::NavItem, navigation::NavGroup
• NavigationMenu → navigation::NavigationMenu
• ActivityBar Item → shell::ActivityBar
• BackForwardNavigation → navigation::BackForwardNavigation
• History Navigation → navigation::BackForwardNavigation
• Anchor / TableOfContents → navigation::Anchor, navigation::TableOfContents
• JumpTo / GoToLine → navigation::GoToLine

T07c Navigation · Palettes & tour

• CommandPalette → navigation::CommandPalette
• QuickOpen → navigation::QuickOpen
• QuickSwitcher → navigation::QuickSwitcher
• SearchPalette → navigation::SearchPalette
• SpotlightSearch → navigation::SearchPalette; T04 QuickLauncher opens it always on top
• Tour / Onboarding → lands with Overlays (T09): its steps are Coachmarks

T08 Menus — src/menus

• Menu / MenuItem / MenuGroup / MenuSeparator
• SubMenu
• CheckboxMenuItem
• RadioMenuItem
• MenuItemShortcut
• MenuItemIcon
• ContextMenu
• DropdownMenu — also T05 DropdownButton / MenuButton and SplitButton
• MenuBar Menu — menus::MenuBar, also T04 MenuBar: the native menus, drawn in the window
• OverflowMenu
• MegaMenu
• SearchableMenu
• PieMenu / RadialMenu

T09 Overlays — src/overlays

• Tooltip → primitives::Tooltip
• Popover
• HoverCard
• Dialog / Modal
• AlertDialog
• ConfirmDialog
• PromptDialog
• FullscreenDialog
• Sheet → layout::Sheet
• Drawer → layout::Drawer
• Lightbox
• Spotlight / Coachmark — also T07c Tour / Onboarding and T37 WelcomeTour
• FloatingToolbar
• Callout / Peek
• DropdownPanel → overlays::Popover
• InlinePopup → overlays::Popover
• ToastViewport

T10 Feedback — src/feedback

• Toast — success, error, warning, info, action, undo
• Notification
• NotificationCenter
• Alert
• Banner
• Callout / Admonition
• InlineMessage
• StatusMessage
• Snackbar → feedback::Toast
• UndoToast → feedback::Toast
• ErrorView
• ErrorBoundary — renders and logs a Result error; never catches panics
• NotFound / 404 → feedback::ErrorView
• NoPermission / 403 → feedback::ErrorView
• Maintenance → feedback::ErrorView
• Offline → feedback::ErrorView
• EmptyState
• Result
• ConfirmationCard
• SavingIndicator
• SyncStatus
• ConnectionStatus
• Countdown
• Timer