ZacharyZhang-NY/Ely-GPUI-Components
1
1 Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity
Files
29f1c8f4679e0e15d9b9543f1009875dbe9a8dfa
Ely-GPUI-Components/tasks/ch01-10.md
T
ZacharyZhang-NYandClaude Opus 5.5 d7272e88bd Port · Parity: every page matches gpui 0.2.2's; the rules re-tested 
Every page and scripted state was shot with gpui 0.2.2 and with the
port, light and dark, full width and at 280px, judged pair by pair by
agents with skeptics, and every page's log diffed. What differed is
fixed, each with a test that fails without it where the test platform
can show it:

- The gallery's harness takes posted mouse moves (gpui_macos listens
  to a tracking area), posts each drag move twice (it no longer
  replays a held drag), and waits three frames before each shot.
- Rolling digits: a block column, so taffy 0.13 lends the cell no
  baseline, and a line of whole device pixels, since gpui snaps each
  length on its own. DescriptionList's row aligns ends.
- Margins that taffy 0.13 collapses through a plain block: the
  drawer's pull and snap, the stagger and transition rise, the dialog
  and palette rises, the fullscreen dialog's slide.
- An Input keeps room to type in a squeezed row; the field rows drop
  w_full, whose reason was taffy 0.9's.

AGENTS.md's rules that named gpui 0.2.2 or taffy 0.9 were re-tested
against both sources and rewritten, and new ones say what the port
changed. TASKS.md's tags follow: what the new gpui makes possible is
prove. Captions, doc comments and README say what holds now.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-29 10:39:55 -04:00

14 KiB
Raw Blame History

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 — prove: gpui builds an AccessKit tree on macOS, Windows and Linux, not the web, from elements with an id and a role; a box that draws nothing, with an aria_label, must reach the macOS tree with its label
  • 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 — prove: on macOS cx.show_system_notification posts only from an app bundle; unbundled, as cargo run starts it, gpui logs and drops the call, so Ely must check the bundle identifier and fail loud. A bundled gallery must post one and hand its response to the owner through on_system_notification_response
  • 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 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
Reference in new issue View Git Blame Copy Permalink