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 → typography::Ellipsis; gpui's .truncate() holds only in a block of fixed width
• 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 (T08b): 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 → menus::SplitButton (T08a): its dropdown is a Menu
• DropdownButton / MenuButton → menus::DropdownMenu (T08a)
• 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 → lists::TreeSelect (T13b): forms cannot import lists
• 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 → forms::UploadList, built with Loading & Motion (T11b): its rows are ProgressBars
• ImageUpload — preview, crop → lands with Media (T26): its crop is the ImageCropper
• AvatarUpload → forms::AvatarUpload, built with Data Display (T12a): 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 → overlays::Tour (T09b): its steps are Spotlights

T08a Menus · Menu & hosts — src/menus

• Menu / MenuItem / MenuGroup / MenuSeparator → menus::Menu (group, separator), menus::MenuItem
• SubMenu → menus::MenuItem::submenu
• CheckboxMenuItem → menus::MenuItem::check
• RadioMenuItem → menus::MenuItem::radio
• MenuItemShortcut → menus::MenuItem::keys
• MenuItemIcon → menus::MenuItem::icon
• ContextMenu → menus::ContextMenu
• DropdownMenu → menus::DropdownMenu; also T05 DropdownButton / MenuButton, and SplitButton as menus::SplitButton
• OverflowMenu → menus::OverflowMenu

T08b Menus · Bar, search & pie

• MenuBar Menu → menus::MenuBar; also T04 MenuBar: the native menus, drawn in the window
• MegaMenu → navigation::NavigationMenu: each entry opens a panel of links with a line of detail
• SearchableMenu → menus::SearchableMenu
• PieMenu / RadialMenu → menus::PieMenu, menus::PieItem

T09a Overlays · Popovers & dialogs — src/overlays

• Tooltip → primitives::Tooltip
• Popover → overlays::Popover
• HoverCard → overlays::HoverCard
• Dialog / Modal → overlays::Dialog
• AlertDialog → overlays::AlertDialog
• ConfirmDialog → overlays::ConfirmDialog
• PromptDialog → overlays::PromptDialog
• FullscreenDialog → overlays::Dialog::fullscreen
• Sheet → layout::Sheet
• Drawer → layout::Drawer

T09b Overlays · Guides & floats

• Lightbox → overlays::Lightbox, overlays::Slide
• Spotlight / Coachmark → overlays::Spotlight; also T07c Tour / Onboarding and T37 WelcomeTour as overlays::Tour
• FloatingToolbar → overlays::FloatingToolbar
• Callout / Peek → overlays::Peek
• DropdownPanel → overlays::Popover
• InlinePopup → overlays::Popover with the Link variant
• ToastViewport → lands with Feedback (T10): it holds Toasts

T10a Feedback · Messages — src/feedback

• Toast — success, error, warning, info, action, undo; also T09b ToastViewport → feedback::Toast, feedback::Toaster, feedback::ToastViewport
• Notification → feedback::Notification
• NotificationCenter → feedback::NotificationCenter; also T10b EmptyState, which it shows when empty
• Alert → feedback::Alert
• Banner → feedback::Banner
• Callout / Admonition → feedback::Callout
• InlineMessage → feedback::InlineMessage
• StatusMessage → feedback::StatusMessage
• Snackbar → feedback::Toast
• UndoToast → feedback::Toast

T10b Feedback · States

• ErrorView → feedback::ErrorView
• ErrorBoundary — renders and logs a Result error; never catches panics → feedback::ErrorBoundary
• NotFound / 404 → feedback::ErrorView::not_found
• NoPermission / 403 → feedback::ErrorView::no_permission
• Maintenance → feedback::ErrorView::maintenance
• Offline → feedback::ErrorView::offline
• EmptyState → feedback::EmptyState, built with T10a
• Result → feedback::ResultView; a plain Result would shadow std's
• ConfirmationCard → feedback::ConfirmationCard
• SavingIndicator → feedback::SavingIndicator
• SyncStatus → feedback::SyncStatus
• ConnectionStatus → feedback::ConnectionStatus; its dot is shell::OfflineIndicator's
• Countdown → feedback::Countdown
• Timer → feedback::Timer