diff --git a/3DEditor/CMakeLists.txt b/3DEditor/CMakeLists.txt
index bd87d17e..011cd85d 100644
--- a/3DEditor/CMakeLists.txt
+++ b/3DEditor/CMakeLists.txt
@@ -11,7 +11,7 @@ file(GLOB HEADERS "./public/*.hpp" "./public/*/*.hpp")
 add_library(${PROJECT_NAME} STATIC ${SOURCES} ${HEADERS})
 
 target_include_directories(${PROJECT_NAME} PUBLIC ./public/ ${BINDINGS_INCLUDE} ./ext/)
-target_link_libraries(${PROJECT_NAME} PUBLIC Widgets RasterRender RayTracer)
+target_link_libraries(${PROJECT_NAME} PUBLIC WidgetsApp RasterRender RayTracer)
 target_link_libraries(${PROJECT_NAME} PRIVATE ${BINDINGS_LIBS})
 
 ### -------------------------- Applications  --------------------------  ###
diff --git a/3DEditor/applications/Entry.cpp b/3DEditor/applications/Entry.cpp
index ae402ecc..7028b72d 100644
--- a/3DEditor/applications/Entry.cpp
+++ b/3DEditor/applications/Entry.cpp
@@ -1,31 +1,27 @@
-
 #include "EditorWidget.hpp"
 
 #include "WidgetApplication.hpp"
-#include "RootWidget.hpp"
 
 using namespace tp;
 
-class EditorGUI : public WidgetApplication {
+class EditorApplication : public ui::WidgetApplication {
 public:
-	EditorGUI() :
-		mEditor(application().gpu()) {
-		auto canvas = &this->canvas();
-		mGui = new EditorWidget(canvas, &mEditor);
-
+	EditorApplication() :
+		mEditor(gpu()),
+		mGui(canvas(), mEditor) {
 		mEditor.loadDefaults();
-
+		mGui.buildMenus(menuBar());
 		setRoot(mGui);
 	}
 
-	~EditorGUI() override { delete mGui; }
+	~EditorApplication() override { clearRoot(); }
 
 private:
 	Editor mEditor;
-	EditorWidget* mGui;
+	EditorWidget mGui;
 };
 
 int main() {
-	EditorGUI gui;
-	gui.run();
+	EditorApplication application;
+	application.run();
 }
diff --git a/3DEditor/private/EditorWidget.cpp b/3DEditor/private/EditorWidget.cpp
new file mode 100644
index 00000000..62aab4c0
--- /dev/null
+++ b/3DEditor/private/EditorWidget.cpp
@@ -0,0 +1,154 @@
+#include "EditorWidget.hpp"
+
+#include "BoxLayout.hpp"
+#include "Canvas.hpp"
+#include "Event.hpp"
+#include "Theme.hpp"
+
+using namespace tp;
+using namespace tp::ui;
+
+namespace {
+	constexpr halnf kOrbitSpeed = 3;
+	constexpr halnf kControlsWidth = 240;
+}
+
+EditorViewport::EditorViewport(Canvas& canvas, Editor& editor) :
+	mEditor(editor),
+	mCanvas(canvas),
+	mRasterImage(canvas.createImageFromRenderTarget(editor.rasterTargetId())) {
+	setDebugName("3d viewport");
+	setSizing(AxisSizing::fill(), AxisSizing::fill());
+	startTicking();
+}
+
+EditorViewport::~EditorViewport() {
+	mCanvas.deleteImage(mRasterImage);
+	mCanvas.deleteImage(mPathImage);
+}
+
+bool EditorViewport::acceptsDrag(PointerButton button) const { return button == PointerButton::Left; }
+
+void EditorViewport::onEvent(Event& event) {
+	if (event.type() == Event::Type::Click && mNavigation == Navigation::Select) {
+		mEditor.selectObject(toNormalized(event.position()) * -1);
+		event.accept();
+		return;
+	}
+
+	const Dragged* drag = event.drag();
+	if (!drag || drag->button != PointerButton::Left) return;
+	if (drag->phase == DragPhase::Moved || drag->phase == DragPhase::Started) navigate(event.position(), drag->delta);
+	event.accept();
+}
+
+void EditorViewport::navigate(Vec2F localPoint, Vec2F delta) {
+	const Vec2F extent = size();
+	if (extent.x <= 0 || extent.y <= 0) return;
+
+	switch (mNavigation) {
+		case Navigation::Orbit: mEditor.navigationOrbit(delta / extent * kOrbitSpeed); break;
+		case Navigation::Pan: mEditor.navigationPan(toNormalized(localPoint - delta), toNormalized(localPoint)); break;
+		case Navigation::Zoom: mEditor.navigationZoom(1 + delta.y / extent.y); break;
+		case Navigation::Select: mEditor.selectObject(toNormalized(localPoint) * -1); break;
+	}
+	requestPaint();
+}
+
+Vec2F EditorViewport::toNormalized(Vec2F localPoint) const { return ((localPoint / size()) - 0.5f) * 2; }
+
+void EditorViewport::onTick(halnf) {
+	// The scene animates and the renderer follows the viewport size, so the view repaints every frame.
+	mEditor.setViewportSize(size());
+	requestPaint();
+	startTicking();
+}
+
+void EditorViewport::paint(Canvas& canvas) {
+	if (mEditor.renderType() == Editor::RenderType::PATH_TRACER) {
+		syncPathImage(canvas);
+		canvas.drawImage(localRect(), mPathImage, kImageAngle);
+		return;
+	}
+	mEditor.renderRaster();
+	// Note: resizing recreates the target images, so the Canvas image is pointed at them every frame.
+	canvas.updateImageFromRenderTarget(mRasterImage, mEditor.rasterTargetId());
+	canvas.drawImage(localRect(), mRasterImage, kImageAngle);
+}
+
+void EditorViewport::syncPathImage(Canvas& canvas) {
+	const auto size = mEditor.pathImageSize();
+	const auto* pixels = (const unsigned char*) mEditor.pathImage().data();
+	if (mPathImage.isValid() && size == mPathImageSize) {
+		canvas.updateImageRGBA(mPathImage, pixels);
+		return;
+	}
+	canvas.deleteImage(mPathImage);
+	mPathImage = size.x && size.y ? canvas.createImageFromMemoryRGBA((int) size.x, (int) size.y, pixels) : ImageHandle();
+	mPathImageSize = size;
+}
+
+EditorWidget::EditorWidget(Canvas& canvas, Editor& editor) :
+	mEditor(editor),
+	mViewport(canvas, editor) {
+	setDebugName("3d editor");
+	setSizing(AxisSizing::fill(), AxisSizing::fill());
+	emplaceLayout<ColumnLayout>();
+
+	mPathTrace.setOnActivate([this]() {
+		mEditor.renderPathFrame();
+		mEditor.setRenderType(Editor::RenderType::PATH_TRACER);
+	});
+	mRaster.setOnActivate([this]() { mEditor.setRenderType(Editor::RenderType::RASTER); });
+	mDenoise.setOnActivate([this]() { mEditor.denoisePathRenderBuffers(); });
+	mReset.setOnActivate([this]() { mEditor.navigationReset(); });
+
+	mControls.emplaceLayout<ColumnLayout>(6).setPadding(Insets::uniform(10));
+	for (Button* button : { &mPathTrace, &mRaster, &mDenoise, &mReset }) {
+		button->setSizing(AxisSizing::fill(), AxisSizing::fit());
+		mControls.addChild(*button);
+	}
+
+	mControlsPanel.setContent(&mControls);
+	mControlsPanel.setDockedLength(kControlsWidth);
+	mDock.setSizing(AxisSizing::fill(), AxisSizing::fill());
+	mDock.setCenter(&mViewport);
+	mDock.addPanel(mControlsPanel);
+	mDock.openPanel(mControlsPanel);
+	addChild(mDock);
+
+	startTicking();
+}
+
+void EditorWidget::buildMenus(MenuBar& menuBar) {
+	mRenderMenu.addItem("Path Tracer", [this]() { mPathTrace.activate(); });
+	mRenderMenu.addItem("Raster", [this]() { mRaster.activate(); });
+	mRenderMenu.addItem("Denoise", [this]() { mDenoise.activate(); });
+
+	using Navigation = EditorViewport::Navigation;
+	const auto navigationToggle = [this](const char* text, Navigation navigation) {
+		mNavigationMenu.addToggle(
+			text,
+			[this, navigation]() { return mViewport.navigation() == navigation; },
+			[this, navigation]() { mViewport.setNavigation(navigation); }
+		);
+	};
+	navigationToggle("Select", Navigation::Select);
+	navigationToggle("Orbit", Navigation::Orbit);
+	navigationToggle("Pan", Navigation::Pan);
+	navigationToggle("Zoom", Navigation::Zoom);
+	mNavigationMenu.addItem("Reset", [this]() { mEditor.navigationReset(); });
+
+	menuBar.addMenu("Render", mRenderMenu);
+	menuBar.addMenu("Navigation", mNavigationMenu);
+}
+
+void EditorWidget::onTick(halnf) {
+	// Note: the demo spins the selected object a little every frame.
+	if (Object* object = mEditor.getActiveObject()) {
+		auto rotator = object->mTopology.Basis.rotatorDir({ 1, 1, 1 }, 0.1);
+		object->mTopology.Basis = rotator * object->mTopology.Basis;
+	}
+	mEditor.getScene()->updateCache();
+	startTicking();
+}
diff --git a/3DEditor/public/EditorWidget.hpp b/3DEditor/public/EditorWidget.hpp
index 6a225605..a6b7d6d6 100644
--- a/3DEditor/public/EditorWidget.hpp
+++ b/3DEditor/public/EditorWidget.hpp
@@ -1,175 +1,70 @@
-#include "Widget.hpp"
-#include "DockWidget.hpp"
+#pragma once
 
+#include "Docking.hpp"
 #include "Editor.hpp"
-#include "FloatingWidget.hpp"
+#include "Menus.hpp"
+#include "Button.hpp"
+#include "Widget.hpp"
 
 namespace tp {
 
-	class ViewportWidget : public Widget {
+	// Shows the editor's raster or path-traced image and turns drags on it into camera navigation or picking.
+	class EditorViewport : public ui::Widget {
 	public:
-		ViewportWidget(Canvas& canvas, Editor& editor) :
-			mEditor(editor),
-			mCanvas(canvas),
-			mRasterImage(canvas.createImageFromRenderTarget(editor.rasterTargetId())) {}
+		enum class Navigation { Select, Orbit, Pan, Zoom };
 
-		~ViewportWidget() override {
-			mCanvas.deleteImage(mRasterImage);
-			mCanvas.deleteImage(mPathImage);
-		}
+		EditorViewport(Canvas& canvas, Editor& editor);
+		~EditorViewport() override;
 
-		void process(const InputView& events) override { mEditor.setViewportSize(getAreaT().size); }
+		void setNavigation(Navigation navigation) { mNavigation = navigation; }
+		[[nodiscard]] Navigation navigation() const { return mNavigation; }
 
-		void draw(Canvas& canvas) override {
-			if (mEditor.renderType() == Editor::RenderType::PATH_TRACER) {
-				syncPathImage(canvas);
-				canvas.drawImage(getArea().relative(), mPathImage, kImageAngle);
-				return;
-			}
-			mEditor.renderRaster();
-			// Note: resizing recreates the target images, so the Canvas image is pointed at them every frame.
-			canvas.updateImageFromRenderTarget(mRasterImage, mEditor.rasterTargetId());
-			canvas.drawImage(getArea().relative(), mRasterImage, kImageAngle);
-		}
+	protected:
+		void onEvent(ui::Event& event) override;
+		[[nodiscard]] bool acceptsDrag(PointerButton button) const override;
+		void paint(Canvas& canvas) override;
+		void onTick(halnf deltaMs) override;
 
 	private:
 		// Note: both images store row 0 at the camera's bottom edge (y = -1); a half turn shows them upright.
 		static constexpr halnf kImageAngle = (halnf) PI;
 
-		void syncPathImage(Canvas& canvas) {
-			const auto size = mEditor.pathImageSize();
-			const auto* pixels = (const unsigned char*) mEditor.pathImage().data();
-			if (mPathImage.isValid() && size == mPathImageSize) {
-				canvas.updateImageRGBA(mPathImage, pixels);
-				return;
-			}
-			canvas.deleteImage(mPathImage);
-			mPathImage = size.x && size.y ? canvas.createImageFromMemoryRGBA((int) size.x, (int) size.y, pixels) : ImageHandle();
-			mPathImageSize = size;
-		}
+		void navigate(Vec2F localPoint, Vec2F delta);
+		[[nodiscard]] Vec2F toNormalized(Vec2F localPoint) const;
+		void syncPathImage(Canvas& canvas);
 
 		Editor& mEditor;
 		Canvas& mCanvas;
 		ImageHandle mRasterImage;
 		ImageHandle mPathImage;
 		Vec2<uint4> mPathImageSize = { 0, 0 };
+		Navigation mNavigation = Navigation::Orbit;
 	};
 
-	class EditorWidget : public DockWidget {
+	// The 3D editor window content: the viewport in the middle and a docked panel with render and navigation controls.
+	class EditorWidget : public ui::Widget {
 	public:
-		EditorWidget(Canvas* canvas, Editor* editor) :
-			mViewport(*canvas, *editor) {
-			mEditor = editor;
+		EditorWidget(Canvas& canvas, Editor& editor);
 
-			mPanel.setText("Controls");
-			mPanel.addToMenu(&mNavigationMenu);
-			mPanel.addToMenu(&mRenderMenu);
+		void buildMenus(ui::MenuBar& menuBar);
 
-			dockWidget(&mPanel, DockLayout::RIGHT);
-			setCenterWidget(&mViewport);
+		[[nodiscard]] EditorViewport& viewport() { return mViewport; }
+		[[nodiscard]] ui::DockPanel& controlsPanel() { return mControlsPanel; }
 
-			// Render
-			{
-				mRenderPathTracer.setText("Render with Path Tracer");
-				mRenderRaster.setText("Render with Raster");
-				mRenderDeNoise.setText("Denoise (IntelOpenImage)");
+	protected:
+		void onTick(halnf deltaMs) override;
 
-				mRenderMenu.addToMenu(&mRenderPathTracer);
-				mRenderMenu.addToMenu(&mRenderRaster);
-				mRenderMenu.addToMenu(&mRenderDeNoise);
-
-				mRenderMenu.setText("Render");
-			}
-
-			// Navigation
-			{
-				mNavigationPan.setText("Pan");
-				mNavigationOrbit.setText("Orbit");
-				mNavigationZoom.setText("Zoom");
-				mNavigationReset.setText("Reset");
-				mNavigationSelect.setText("Select");
-
-				mNavigationMenu.addToMenu(&mNavigationPan);
-				mNavigationMenu.addToMenu(&mNavigationOrbit);
-				mNavigationMenu.addToMenu(&mNavigationZoom);
-				mNavigationMenu.addToMenu(&mNavigationReset);
-				mNavigationMenu.addToMenu(&mNavigationSelect);
-
-				mNavigationMenu.setText("Navigation");
-			}
-
-			mRenderPathTracer.setAction([this]() {
-				mEditor->renderPathFrame();
-				mEditor->setRenderType(Editor::RenderType::PATH_TRACER);
-			});
-
-			mRenderRaster.setAction( [this]() { mEditor->setRenderType(Editor::RenderType::RASTER); });
-			mRenderDeNoise.setAction( [this]() { mEditor->denoisePathRenderBuffers(); });
-			mNavigationOrbit.setAction( [this]() { mNavigationType = ORBIT; });
-			mNavigationPan.setAction( [this]() { mNavigationType = PAN; });
-			mNavigationZoom.setAction( [this](){ mNavigationType = ZOOM; });
-			mNavigationSelect.setAction( [this](){ mNavigationType = SELECT; });
-			mNavigationReset.setAction( [this]() { mEditor->navigationReset(); });
-		}
-
-		void process(const InputView& events) override {
-			DockWidget::process(events);
-
-			if (auto obj = mEditor->getActiveObject()) { // dummy rotate active object
-				auto rotator = obj->mTopology.Basis.rotatorDir({1, 1, 1}, 0.1);
-				obj->mTopology.Basis = rotator * obj->mTopology.Basis;
-			}
-
-			mEditor->getScene()->updateCache();
-
-			const auto& activeArea = mViewport.getArea();
-
-			auto pointer = events.getPointer();
-			auto pointerPrev = events.getPointerPrev();
-			auto pointerRelative = (((pointer - activeArea.pos) / activeArea.size) - 0.5f) * 2;
-
-			if (activeArea.isInside(pointer) && events.isDown(PointerButton::Left)) {
-				switch (mNavigationType) {
-					case ORBIT: mEditor->navigationOrbit(events.getPointerDelta() / activeArea.size * 3); break;
-
-					case PAN:
-						{
-							auto prevPointerRelative = (((pointerPrev - activeArea.pos) / activeArea.size) - 0.5f) * 2;
-							mEditor->navigationPan(prevPointerRelative, pointerRelative);
-						}
-						break;
-
-					case ZOOM: mEditor->navigationZoom(1 + (events.getPointerDelta().y / activeArea.size.y)); break;
-					case SELECT: mEditor->selectObject(pointerRelative * -1); break;
-				}
-			}
-		}
-
-		void draw(Canvas& canvas) override { canvas.rect(getArea().relative(), mBaseColor); }
-
-	public:
-		Editor* mEditor = nullptr;
-
-		ViewportWidget mViewport;
-
-		FloatingMenu mPanel;
-
-		// Controls
-		FloatingMenu mRenderMenu;
-		ButtonWidget mRenderPathTracer;
-		ButtonWidget mRenderRaster;
-		ButtonWidget mRenderDeNoise;
-
-		// Navigation
-		enum NavigationType { SELECT, ORBIT, PAN, ZOOM } mNavigationType = ORBIT;
-
-		FloatingMenu mNavigationMenu;
-		ButtonWidget mNavigationPan;
-		ButtonWidget mNavigationOrbit;
-		ButtonWidget mNavigationZoom;
-		ButtonWidget mNavigationReset;
-		ButtonWidget mNavigationSelect;
-
-		RGBA mBaseColor;
+	private:
+		Editor& mEditor;
+		EditorViewport mViewport;
+		ui::DockArea mDock;
+		ui::DockPanel mControlsPanel{ "Controls", ui::DockSide::Right };
+		ui::Widget mControls;
+		ui::Button mPathTrace{ "Render with Path Tracer" };
+		ui::Button mRaster{ "Render with Raster" };
+		ui::Button mDenoise{ "Denoise (IntelOpenImage)" };
+		ui::Button mReset{ "Reset camera" };
+		ui::Menu mRenderMenu;
+		ui::Menu mNavigationMenu;
 	};
-}
\ No newline at end of file
+}
diff --git a/LibraryViewer/private/GUI.cpp b/LibraryViewer/private/GUI.cpp
index 9be95bdf..6ab7ac26 100644
--- a/LibraryViewer/private/GUI.cpp
+++ b/LibraryViewer/private/GUI.cpp
@@ -4,6 +4,7 @@
 #include "Canvas.hpp"
 #include "StackLayout.hpp"
 #include "Event.hpp"
+#include "Glyph.hpp"
 #include "Theme.hpp"
 
 #include <algorithm>
@@ -13,9 +14,6 @@ using namespace tp;
 using namespace tp::ui;
 
 namespace {
-	constexpr halnf kTrackHeight = 70;
-	constexpr halnf kArtSize = 60;
-	constexpr halnf kPlayingMarkWidth = 3;
 	constexpr halnf kSearchWidth = 280;
 	constexpr halnf kMillisecondsPerSecond = 1000;
 	constexpr halnf kInfoCoverMaxSize = 240;
@@ -32,58 +30,6 @@ namespace {
 	}
 }
 
-TrackWidget::TrackWidget(const Track& track) :
-	mTrack(track) {
-	setDebugName("track: " + track.mName);
-	setSizing(AxisSizing::fill(), AxisSizing::fixed(kTrackHeight));
-}
-
-void TrackWidget::setSelected(bool selected) {
-	mSelected = selected;
-	refreshVisualState();
-}
-
-void TrackWidget::setPlaying(bool playing) {
-	if (playing == mPlaying) return;
-	mPlaying = playing;
-	requestPaint();
-}
-
-Extent TrackWidget::measureContent(Axis axis, halnf) const {
-	if (axis == Axis::Vertical) return Extent::rigid(kTrackHeight);
-	return Extent::shrinkable(textWidth(mTrack.mName, theme().metrics.fontSize) + kArtSize + 20, kArtSize + 20);
-}
-
-void TrackWidget::paint(Canvas& canvas) {
-	const Theme& style = theme();
-	const halnf margin = (kTrackHeight - kArtSize) / 2;
-
-	canvas.rect(localRect(), background(), style.metrics.cornerRadius);
-	canvas.rect(
-		makeRect(margin, margin, kArtSize, kArtSize), style.palette.controlPressed, style.metrics.cornerRadius
-	);
-	if (mPlaying) {
-		canvas.rect(makeRect(0, margin, kPlayingMarkWidth, kArtSize), style.palette.text, kPlayingMarkWidth / 2);
-	}
-
-	const halnf textLeft = kArtSize + margin * 3;
-	const halnf textWidthValue = size().x - textLeft - margin;
-	canvas.text(
-		mTrack.mName, makeRect(textLeft, margin, textWidthValue, kArtSize / 2), TextStyle{ 15, style.palette.text, TextAlign::leftCenter() }
-	);
-	canvas.text(
-		mTrack.mArtist,
-		makeRect(textLeft, margin + kArtSize / 2, textWidthValue, kArtSize / 2),
-		TextStyle{ 12, style.palette.mutedText, TextAlign::leftCenter() }
-	);
-}
-
-RGBA TrackWidget::backgroundTarget() const {
-	if (mSelected) return theme().palette.controlPressed;
-	if (isHovered()) return theme().palette.controlHovered;
-	return { 0, 0, 0, 0 };
-}
-
 TrackInfoView::TrackInfoView() {
 	setDebugName("track info");
 	setSizing(AxisSizing::fill(), AxisSizing::fill());
@@ -94,11 +40,22 @@ TrackInfoView::TrackInfoView() {
 	state.setFontSize(theme().metrics.smallFontSize);
 	title.setFontSize(kInfoTitleSize);
 	artist.setTone(Label::Tone::Muted);
-	details.setTone(Label::Tone::Muted);
-	details.setFontSize(theme().metrics.smallFontSize);
-	for (Label* label : { &state, &title, &artist, &details })
+	for (Label* label : { &state, &title, &artist })
 		label->setSizing(AxisSizing::fill(), AxisSizing::fit());
 
+	// Every row reads the shown track, so refreshing the list after showing a track fills them all.
+	const auto field = [this](std::function<std::string(const Track&)> read) {
+		return [this, read = std::move(read)]() { return mTrack ? read(*mTrack) : std::string(); };
+	};
+	details.addValue("Album", field([](const Track& track) { return track.mAlbum; }));
+	details.addValue("Genre", field([](const Track& track) { return track.mGenre; }));
+	details.addValue("Year", field([](const Track& track) { return track.mYear > 0 ? std::to_string(track.mYear) : std::string("-"); }));
+	details.addValue("Length", field([](const Track& track) { return formatDuration((halnf) track.mTotalTime / kMillisecondsPerSecond); }));
+	details.addValue("Plays", field([](const Track& track) { return std::to_string(track.mPlayCount); }));
+	details.addValue("Loved", field([](const Track& track) { return std::string(track.mLoved ? "yes" : "no"); }));
+	details.addValue("File", field([](const Track& track) { return std::string(track.mExists ? "on disk" : "missing"); }));
+	details.addValue("Added", field([](const Track& track) { return track.mDateAdded; }));
+
 	mColumn.setSizing(AxisSizing::fill(), AxisSizing::fit());
 	mColumn.emplaceLayout<ColumnLayout>(6).setPadding(Insets::uniform(12));
 	mColumn.addChild(cover);
@@ -115,27 +72,18 @@ TrackInfoView::TrackInfoView() {
 
 void TrackInfoView::showTrack(const Track* track, bool playing) {
 	mTrack = track;
+	details.setVisible(track != nullptr);
+	details.refresh();
 	if (!track) {
 		state.setText("");
 		title.setText("No track selected");
 		artist.setText("Select a track to see its details");
-		details.setText("");
 		return;
 	}
 
 	state.setText(playing ? "NOW PLAYING" : "SELECTED");
 	title.setText(track->mName);
 	artist.setText(track->mArtist);
-
-	std::string text = "Album: " + track->mAlbum;
-	text += "\nGenre: " + track->mGenre;
-	if (track->mYear > 0) text += "\nYear: " + std::to_string(track->mYear);
-	text += "\nLength: " + formatDuration((halnf) track->mTotalTime / kMillisecondsPerSecond);
-	text += "\nPlays: " + std::to_string(track->mPlayCount);
-	text += "\nLoved: " + std::string(track->mLoved ? "yes" : "no");
-	text += "\nFile: " + std::string(track->mExists ? "on disk" : "missing");
-	text += "\nAdded: " + track->mDateAdded;
-	details.setText(text);
 }
 
 bool TrackFilter::accepts(const Track& track) const {
@@ -185,14 +133,19 @@ LibraryWidget::LibraryWidget(Library& library, PlaybackDevice& device) :
 	mFilterBar.addChild(files);
 	mFilterBar.addChild(count);
 
-	mTrackList.emplaceLayout<ColumnLayout>(4).setPadding(Insets::uniform(8));
-	mScroll.setContent(&mTrackList);
-	mScroll.setSizing(AxisSizing::fill(), AxisSizing::fill());
+	mTracks.setDensity(ListRow::Density::Comfortable);
+	mTracks.setEmptyText("No tracks match the filter");
+	mTracks.setOnSelectionChanged([this]() {
+		if (mTracks.current()) select(*mTracks.current());
+	});
+	mTracks.setOnActivated([this](size_t index) {
+		if (index < mVisible.size()) play(*mVisible[index]);
+	});
 
 	mBrowser.setSizing(AxisSizing::fill(), AxisSizing::fill());
 	mBrowser.emplaceLayout<ColumnLayout>();
 	mBrowser.addChild(mFilterBar);
-	mBrowser.addChild(mScroll);
+	mBrowser.addChild(mTracks);
 
 	infoPanel.setContent(&info);
 	infoPanel.setDockedLength(kInfoPanelWidth);
@@ -235,39 +188,41 @@ void LibraryWidget::buildMenus(MenuBar& menuBar) {
 }
 
 void LibraryWidget::rebuildTracks() {
-	mTrackList.removeAllChildren();
-	mTracks.clear();
-	mVisible.clear();
 	mSelected = nullptr;
-
-	for (Track& track : mLibrary.mTraks) {
-		auto widget = std::make_unique<TrackWidget>(track);
-		TrackWidget* raw = widget.get();
-		widget->setOnClicked([this, raw](const Event& click) {
-			select(*raw);
-			if (click.clickCount() == 2) play(raw->track());
-		});
-		mTracks.push_back(std::move(widget));
-	}
-
+	mTracks.clearSelection();
 	applyFilter();
 }
 
 void LibraryWidget::applyFilter() {
-	mTrackList.removeAllChildren();
 	mVisible.clear();
-	for (auto& track : mTracks) {
-		if (!mFilter.accepts(track->track())) continue;
-		mTrackList.addChild(*track);
-		mVisible.push_back(track.get());
+	for (const Track& track : mLibrary.mTraks) {
+		if (mFilter.accepts(track)) mVisible.push_back(&track);
 	}
-	count.setText(std::to_string(mVisible.size()) + " of " + std::to_string(mTracks.size()) + " tracks");
+
+	ListView::Model model;
+	model.count = mVisible.size();
+	model.fill = [this](size_t index, ListRow& row) {
+		const Track& track = *mVisible[index];
+		row.setTitle(track.mName);
+		row.setSubtitle(track.mArtist);
+		// The playing track is marked with the play glyph; the others keep the room so titles line up.
+		row.setLeading(&track == mPlaying ? ListRow::Leading::glyphOf(Glyph::Play) : ListRow::Leading::space());
+		row.setMuted(!track.mExists);
+	};
+	mTracks.setModel(std::move(model));
+
+	// The selection follows the selected track through filtering.
+	mTracks.clearSelection();
+	for (size_t index = 0; index < mVisible.size(); index++) {
+		if (mVisible[index] == mSelected) mTracks.select(index);
+	}
+	count.setText(std::to_string(mVisible.size()) + " of " + std::to_string(mLibrary.mTraks.size()) + " tracks");
 }
 
-void LibraryWidget::select(TrackWidget& widget) {
-	for (auto& track : mTracks)
-		track->setSelected(track.get() == &widget);
-	mSelected = &widget.track();
+void LibraryWidget::select(size_t index) {
+	if (index >= mVisible.size()) return;
+	mSelected = mVisible[index];
+	if (mTracks.current() != index) mTracks.select(index);
 	refreshInfo();
 }
 
@@ -292,14 +247,14 @@ void LibraryWidget::play(const Track& track) {
 	};
 	player.setTrack(&mNowPlaying);
 	player.setPlaying(true);
-	refreshPlayingMarks();
+	mTracks.refresh();
 	refreshInfo();
 }
 
 void LibraryWidget::togglePlaying() {
 	if (!mPlaying) {
 		if (mSelected) play(*mSelected);
-		else if (!mVisible.empty()) play(mVisible.front()->track());
+		else if (!mVisible.empty()) play(*mVisible.front());
 		return;
 	}
 
@@ -316,22 +271,18 @@ void LibraryWidget::playAdjacent(int direction) {
 	long index = -1;
 	if (mPlaying) {
 		for (size_t position = 0; position < mVisible.size(); position++) {
-			if (&mVisible[position]->track() == mPlaying) index = (long) position;
+			if (mVisible[position] == mPlaying) index = (long) position;
 		}
 	}
 	const long size = (long) mVisible.size();
 	const long target = index < 0 ? 0 : ((index + direction) % size + size) % size;
-	select(*mVisible[(size_t) target]);
-	play(mVisible[(size_t) target]->track());
-}
-
-void LibraryWidget::refreshPlayingMarks() {
-	for (auto& track : mTracks)
-		track->setPlaying(&track->track() == mPlaying);
+	select((size_t) target);
+	play(*mVisible[(size_t) target]);
 }
 
 void LibraryWidget::onEvent(Event& event) {
 	if (event.type() != Event::Type::KeyDown || !event.isKey(Key::Space)) return;
+	// Space plays or pauses anywhere but in the search field, where it is a space.
 	if (search.hasKeyboardFocus()) return;
 
 	togglePlaying();
diff --git a/LibraryViewer/public/GUI.hpp b/LibraryViewer/public/GUI.hpp
index d81176aa..81ae4155 100644
--- a/LibraryViewer/public/GUI.hpp
+++ b/LibraryViewer/public/GUI.hpp
@@ -7,6 +7,8 @@
 #include "Control.hpp"
 #include "Docking.hpp"
 #include "MediaControls.hpp"
+#include "ListView.hpp"
+#include "PropertyList.hpp"
 #include "Menus.hpp"
 #include "TextField.hpp"
 #include "Toggles.hpp"
@@ -17,27 +19,6 @@
 
 namespace tp {
 
-	class TrackWidget : public ui::Control {
-	public:
-		explicit TrackWidget(const Track& track);
-
-		[[nodiscard]] const Track& track() const { return mTrack; }
-
-		void setSelected(bool selected);
-		void setPlaying(bool playing);
-		[[nodiscard]] bool isPlaying() const { return mPlaying; }
-
-	protected:
-		[[nodiscard]] ui::Extent measureContent(ui::Axis axis, halnf crossLength) const override;
-		void paint(Canvas& canvas) override;
-		[[nodiscard]] RGBA backgroundTarget() const override;
-
-	private:
-		const Track& mTrack;
-		bool mSelected = false;
-		bool mPlaying = false;
-	};
-
 	enum class ExistenceFilter { All, Existing, Missing };
 
 	struct TrackFilter {
@@ -91,7 +72,8 @@ namespace tp {
 		ui::Label state;
 		ui::Label title;
 		ui::Label artist;
-		ui::Label details;
+		// Album, genre, year, length, plays, loved, file and date added, one row each.
+		ui::PropertyList details;
 
 	private:
 		const Track* mTrack = nullptr;
@@ -113,8 +95,10 @@ namespace tp {
 
 		[[nodiscard]] const Track* selectedTrack() const { return mSelected; }
 		[[nodiscard]] const Track* playingTrack() const { return mPlaying; }
-		[[nodiscard]] const std::vector<TrackWidget*>& visibleTracks() const { return mVisible; }
-		[[nodiscard]] ui::ScrollView& scroll() { return mScroll; }
+		// The tracks the filter lets through, in list order.
+		[[nodiscard]] const std::vector<const Track*>& visibleTracks() const { return mVisible; }
+		// The track list: click selects, double click or Enter plays, arrows and typing a title move.
+		[[nodiscard]] ui::ListView& tracks() { return mTracks; }
 
 		ui::TextField search;
 		ui::Checkbox lovedOnly{ "Loved only" };
@@ -133,8 +117,7 @@ namespace tp {
 		void onTick(halnf deltaMs) override;
 
 	private:
-		void select(TrackWidget& widget);
-		void refreshPlayingMarks();
+		void select(size_t index);
 		void refreshInfo();
 
 		Library& mLibrary;
@@ -142,10 +125,8 @@ namespace tp {
 
 		ui::Panel mFilterBar{ ui::Panel::Surface::None };
 		ui::Widget mBrowser;
-		ui::ScrollView mScroll;
-		ui::Widget mTrackList;
-		std::vector<std::unique_ptr<TrackWidget>> mTracks;
-		std::vector<TrackWidget*> mVisible;
+		ui::ListView mTracks;
+		std::vector<const Track*> mVisible;
 		ui::NowPlaying mNowPlaying;
 
 		const Track* mSelected = nullptr;
diff --git a/LibraryViewer/tests/LibraryViewTests.cpp b/LibraryViewer/tests/LibraryViewTests.cpp
index 1254b42e..d53d3555 100644
--- a/LibraryViewer/tests/LibraryViewTests.cpp
+++ b/LibraryViewer/tests/LibraryViewTests.cpp
@@ -62,7 +62,13 @@ namespace {
 			driver = std::make_unique<UiDriver>(*view, Vec2F(1100.0f, 700.0f));
 		}
 
-		TrackWidget& row(size_t index) { return *view->visibleTracks()[index]; }
+		ListRow& row(size_t index) { return view->tracks().row(index); }
+		const Track& track(size_t index) { return *view->visibleTracks()[index]; }
+		// The playing track's row leads with the play glyph.
+		bool showsPlaying(size_t index) {
+			const ListRow::Leading& leading = row(index).leading();
+			return leading.kind == ListRow::Leading::Kind::Glyph && leading.glyph == Glyph::Play;
+		}
 	};
 }
 
@@ -74,12 +80,12 @@ SUITE(LibraryFilters) {
 		scene.driver->click(scene.view->search);
 		scene.driver->type("don");
 		CHECK_EQUAL(1u, scene.view->visibleTracks().size());
-		CHECK_EQUAL("No Idea", scene.row(0).track().mName);
+		CHECK_EQUAL("No Idea", scene.track(0).mName);
 
 		scene.driver->key(Key::A, KeyModifiers::controlOnly());
 		scene.driver->type("album 4");
 		CHECK_EQUAL(1u, scene.view->visibleTracks().size());
-		CHECK_EQUAL("GATTI", scene.row(0).track().mName);
+		CHECK_EQUAL("GATTI", scene.track(0).mName);
 	}
 
 	TEST(LovedAndFileFiltersCombine) {
@@ -90,7 +96,7 @@ SUITE(LibraryFilters) {
 		scene.driver->click(scene.view->files);
 		scene.driver->click(*scene.view->files.menu().items()[1]);
 		CHECK_EQUAL(1u, scene.view->visibleTracks().size());
-		CHECK_EQUAL("Jumpsuit", scene.row(0).track().mName);
+		CHECK_EQUAL("Jumpsuit", scene.track(0).mName);
 		CHECK_EQUAL("1 of 4 tracks", scene.view->count.text());
 	}
 }
@@ -99,7 +105,7 @@ SUITE(LibraryPlayback) {
 	TEST(DoubleClickPlaysTrackInPlayerBar) {
 		LibraryScene scene;
 		scene.driver->click(scene.row(1));
-		CHECK(scene.view->selectedTrack() == &scene.row(1).track());
+		CHECK(scene.view->selectedTrack() == &scene.track(1));
 		CHECK(scene.view->playingTrack() == nullptr);
 
 		const Vec2F center = scene.driver->centerOf(scene.row(1));
@@ -110,8 +116,8 @@ SUITE(LibraryPlayback) {
 		CHECK_EQUAL("Mystery Lady", scene.view->player.title.text());
 		CHECK_CLOSE(200, scene.view->player.seek.duration(), 0.01f);
 		CHECK(scene.view->player.isPlaying());
-		CHECK(scene.row(1).isPlaying());
-		CHECK(!scene.row(0).isPlaying());
+		CHECK(scene.showsPlaying(1));
+		CHECK(!scene.showsPlaying(0));
 	}
 
 	TEST(PlayButtonStartsSelectionThenPauses) {
@@ -204,7 +210,7 @@ SUITE(LibraryLayoutInFrame) {
 		CHECK_CLOSE(900, player.pos.y + player.size.y, 0.5f);
 		CHECK_CLOSE(1500, player.size.x, 0.5f);
 
-		const RectF list = view.scroll().windowRect();
+		const RectF list = view.tracks().windowRect();
 		const RectF center = view.dock.centerRect();
 		CHECK_CLOSE(player.pos.y, list.pos.y + list.size.y, 0.5f);
 		CHECK_CLOSE(view.dock.windowPosition().x + center.pos.x + center.size.x, list.pos.x + list.size.x, 0.5f);
@@ -230,13 +236,39 @@ SUITE(LibraryLayoutInFrame) {
 		CHECK_EQUAL(4u, view.visibleTracks().size());
 
 		const RectF player = view.player.windowRect();
-		const RectF list = view.scroll().windowRect();
+		const RectF list = view.tracks().windowRect();
 		CHECK_CLOSE(900, player.pos.y + player.size.y, 0.5f);
 		CHECK_CLOSE(1500, player.size.x, 0.5f);
 		CHECK_CLOSE(player.pos.y, list.pos.y + list.size.y, 0.5f);
 	}
 }
 
+SUITE(LibraryKeyboard) {
+	TEST(ArrowsSelectAndEnterPlays) {
+		LibraryScene scene;
+		scene.driver->click(scene.row(0));
+
+		scene.driver->key(Key::Down);
+		CHECK(scene.view->selectedTrack() == &scene.track(1));
+		scene.driver->key(Key::Enter);
+		CHECK_EQUAL(2u, scene.device.playing);
+		CHECK(scene.showsPlaying(1));
+	}
+
+	TEST(SelectionSurvivesFiltering) {
+		LibraryScene scene;
+		scene.driver->click(scene.row(3));
+		REQUIRE CHECK(scene.view->selectedTrack() != nullptr);
+		const Track* selected = scene.view->selectedTrack();
+
+		scene.driver->click(scene.view->search);
+		scene.driver->type("gat");
+		REQUIRE CHECK_EQUAL(1u, scene.view->visibleTracks().size());
+		CHECK(scene.view->selectedTrack() == selected);
+		CHECK(scene.view->tracks().current() == std::optional<size_t>(0));
+	}
+}
+
 SUITE(LibraryInfoPanel) {
 	TEST(InfoPanelIsDockedOpenOnTheRight) {
 		LibraryScene scene;
@@ -252,13 +284,14 @@ SUITE(LibraryInfoPanel) {
 		LibraryScene scene;
 		scene.driver->click(scene.row(0));
 		TrackInfoView& info = scene.view->info;
-		CHECK(info.track() == &scene.row(0).track());
+		CHECK(info.track() == &scene.track(0));
 		CHECK_EQUAL("SELECTED", info.state.text());
 		CHECK_EQUAL("Jumpsuit", info.title.text());
 		CHECK_EQUAL("twenty one pilots", info.artist.text());
-		CHECK(info.details.text().find("Album: Album 1") != std::string::npos);
-		CHECK(info.details.text().find("Length: 3:20") != std::string::npos);
-		CHECK(info.details.text().find("Loved: yes") != std::string::npos);
+		const auto value = [&info](const std::string& name) { return static_cast<Label*>(info.details.editor(name))->text(); };
+		CHECK_EQUAL("Album 1", value("Album"));
+		CHECK_EQUAL("3:20", value("Length"));
+		CHECK_EQUAL("yes", value("Loved"));
 		CHECK(scene.driver->paint().hasText("Jumpsuit"));
 	}
 
diff --git a/Sketch3D/CMakeLists.txt b/Sketch3D/CMakeLists.txt
index c2da2f12..1c18e6da 100644
--- a/Sketch3D/CMakeLists.txt
+++ b/Sketch3D/CMakeLists.txt
@@ -31,7 +31,7 @@ target_link_libraries(${PROJECT_NAME} PUBLIC Math Containers RasterRender)
 
 # The widgets of the sketch application.
 add_library(${PROJECT_NAME}Gui STATIC ./private/SketchGUI.cpp ./public/SketchGUI.hpp)
-target_link_libraries(${PROJECT_NAME}Gui PUBLIC ${PROJECT_NAME} Widgets)
+target_link_libraries(${PROJECT_NAME}Gui PUBLIC ${PROJECT_NAME} WidgetsApp)
 
 ### -------------------------- Applications  --------------------------  ###
 add_executable(Sketch3DApp ./applications/Entry.cpp)
diff --git a/Sketch3D/applications/Entry.cpp b/Sketch3D/applications/Entry.cpp
index a3edc1f3..45590dc0 100644
--- a/Sketch3D/applications/Entry.cpp
+++ b/Sketch3D/applications/Entry.cpp
@@ -1,28 +1,25 @@
-
-#include "WidgetApplication.hpp"
-
-#include "Sketch3D.hpp"
 #include "SketchGUI.hpp"
+#include "WidgetApplication.hpp"
 
 using namespace tp;
 
-class Sketch3DApplication : public WidgetApplication {
+class Sketch3DApplication : public ui::WidgetApplication {
 public:
 	Sketch3DApplication() {
-		setRoot(&mGui);
-
-		mGui.createRenderWidget(application().gpu(), &canvas(), { 2560, 1440 });
+		mGui.createRenderWidget(gpu(), canvas(), { 2560, 1440 });
 		mGui.setProject(&mSketch);
+		mGui.buildMenus(menuBar());
+		setRoot(mGui);
 	}
 
+	~Sketch3DApplication() override { clearRoot(); }
+
 private:
-	SketchGUI mGui;
 	Project mSketch;
+	SketchGUI mGui;
 };
 
-void runApp() {
-	Sketch3DApplication app;
-	app.run();
+int main() {
+	Sketch3DApplication application;
+	application.run();
 }
-
-int main() { runApp(); }
diff --git a/Sketch3D/private/SketchGUI.cpp b/Sketch3D/private/SketchGUI.cpp
index ad2e31c7..d68229e3 100644
--- a/Sketch3D/private/SketchGUI.cpp
+++ b/Sketch3D/private/SketchGUI.cpp
@@ -1,181 +1,154 @@
 #include "SketchGUI.hpp"
-#include "SimpleLayouts.hpp"
+
+#include "BoxLayout.hpp"
+#include "Canvas.hpp"
+#include "Event.hpp"
+#include "Label.hpp"
 
 using namespace tp;
+using namespace tp::ui;
 
-SketchRenderWidget::SketchRenderWidget(GpuDevice& gpu, Canvas& canvas, Vec2F renderResolution) :
-	mRenderer(gpu, { (uint4) renderResolution.x, (uint4) renderResolution.y }) {
-	mImage = canvas.createImageFromRenderTarget(mRenderer.target().registryId());
-	mCanvas = &canvas;
-
-	setSizePolicy(SizePolicy::Expanding, SizePolicy::Expanding);
+namespace {
+	constexpr halnf kControlsWidth = 280;
+	constexpr halnf kBrushSizeScale = 0.2f;
+	constexpr halnf kMinimumBrushSize = 0.001f;
 }
 
-SketchRenderWidget::~SketchRenderWidget() { mCanvas->deleteImage(mImage); }
-
-void SketchRenderWidget::draw(Canvas& canvas) {
-	auto area = getArea().relative();
-	if (mProject) {
-		mRenderer.renderToTexture(mProject, area.size);
-		// Note: resizing recreates the target images, so the Canvas image is pointed at them every frame.
-		canvas.updateImageFromRenderTarget(mImage, mRenderer.target().registryId());
-		canvas.drawImage(area, mImage, 0, 1, 12);
-	}
+SketchViewport::SketchViewport(GpuDevice& gpu, Canvas& canvas, Vec2F renderResolution) :
+	mRenderer(gpu, { (uint4) renderResolution.x, (uint4) renderResolution.y }),
+	mCanvas(canvas),
+	mImage(canvas.createImageFromRenderTarget(mRenderer.target().registryId())) {
+	setDebugName("sketch viewport");
+	setSizing(AxisSizing::fill(), AxisSizing::fill());
+	startTicking();
 }
 
-void SketchRenderWidget::setProject(Project* project) { mProject = project; }
+SketchViewport::~SketchViewport() { mCanvas.deleteImage(mImage); }
 
-void SketchViewportWidget::setProject(Project* project) {
+void SketchViewport::setProject(Project* project) {
 	mProject = project;
-	mProject->mBackgroundColor = { 0.13f, 0.13f, 0.13f, 0.8f };
+	if (mProject) mProject->mBackgroundColor = { 0.13f, 0.13f, 0.13f, 0.8f };
 }
 
-void SketchViewportWidget::setColor(const RGBA& color) {
-	((PencilBrush*) mProject->mBrushes.get("pencil"))->mCol = color;
-}
+bool SketchViewport::acceptsDrag(PointerButton button) const { return button == PointerButton::Left; }
 
-void SketchViewportWidget::setRenderWidget(SketchRenderWidget* widget) { addChild(widget); }
+Vec2F SketchViewport::toNormalized(Vec2F localPoint) const { return ((localPoint / size()) - 0.5f) * 2.0f; }
 
-void SketchViewportWidget::process(const InputView& events) {
+halnf SketchViewport::ratio() const { return size().x > 0 ? size().y / size().x : 1; }
+
+void SketchViewport::onEvent(Event& event) {
 	if (!mProject) return;
 
-	auto area = getArea().relative();
-	Vec2F pointer = events.getPointer();
-	auto crs = events.getPointer();
+	if (event.type() == Event::Type::PointerMove && !event.drag()) {
+		// Note: hovering feeds pressure-free samples so the brush shows where the next stroke starts.
+		mProject->sample(0, ratio(), toNormalized(event.position()));
+		requestPaint();
+		return;
+	}
+	if (event.drag()) {
+		dragged(event);
+		event.accept();
+	}
+}
 
-	if (!area.isInside(events.getPointer())) return;
+void SketchViewport::dragged(const Event& event) {
+	const Dragged& drag = *event.drag();
+	if (drag.button != PointerButton::Left) return;
 
-	crs.x /= area.z;
-	crs.y /= area.w;
-	crs = (crs - 0.5) * 2;
+	const Vec2F point = toNormalized(event.position());
+	const Vec2F previous = toNormalized(event.position() - drag.delta);
+	mProject->mCamera.setRatio(ratio());
 
-	if (events.isPressed(PointerButton::Left)) {
-		mAction = true;
-		lockFocus();
-
-	} else if (events.isReleased(PointerButton::Left)) {
-		mAction = false;
-		freeFocus();
+	if (drag.phase == DragPhase::Finished || drag.phase == DragPhase::Cancelled) {
+		mProject->sample(0, ratio(), point);
+		requestPaint();
+		return;
 	}
 
-	mProject->mCamera.setRatio(area.w / area.z);
-
-	if (mAction) {
-		Vec2F relativePos = ((pointer / area.size) - 0.5f) * 2.f;
-		Vec2F relativePosPrev = ((mActionPosAbsolutePrev / area.size) - 0.5f) * 2.f;
-		Vec2F relativeDelta = relativePos - relativePosPrev;
-
-		if (events.isDown(Key::LeftShift)) {
-			mProject->mCamera.move(relativePos, relativePosPrev);
-		} else if (events.isDown(Key::LeftAlt)) {
-			mProject->mCamera.rotate(-relativeDelta.x * halnf(PI), -relativeDelta.y * halnf(PI));
-		} else if (events.isDown(Key::LeftControl)) {
-			halnf factor = pointer.y / mActionPosAbsolutePrev.y;
-			mProject->mCamera.zoom(factor);
-		} else {
-			mProject->sample(events.getPointerPressure(), area.w / area.z, crs);
-		}
-
+	const KeyModifiers& modifiers = event.modifiers();
+	if (modifiers.shift) {
+		mProject->mCamera.move(point, previous);
+	} else if (modifiers.alt) {
+		const Vec2F delta = point - previous;
+		mProject->mCamera.rotate(-delta.x * halnf(PI), -delta.y * halnf(PI));
+	} else if (modifiers.control) {
+		const halnf before = event.position().y - drag.delta.y;
+		if (before != 0) mProject->mCamera.zoom(event.position().y / before);
 	} else {
-		mProject->sample(0, area.w / area.z, crs);
+		mProject->sample(event.sample().pressure, ratio(), point);
+	}
+	requestPaint();
+}
+
+void SketchViewport::onTick(halnf) {
+	// The stroke renderer follows the viewport size, so the view repaints every frame.
+	requestPaint();
+	startTicking();
+}
+
+void SketchViewport::paint(Canvas& canvas) {
+	if (!mProject) return;
+	mRenderer.renderToTexture(mProject, size());
+	// Note: resizing recreates the target images, so the Canvas image is pointed at them every frame.
+	canvas.updateImageFromRenderTarget(mImage, mRenderer.target().registryId());
+	canvas.drawImage(localRect(), mImage, 0, 1, kImageRounding);
+}
+
+SketchGUI::SketchGUI() {
+	setDebugName("sketch 3d");
+	setSizing(AxisSizing::fill(), AxisSizing::fill());
+	emplaceLayout<ColumnLayout>();
+
+	mColor.setOnChanged([this](const RGBA&) { applyBrush(); });
+	mBrushSize.setOnChanged([this](halnf) { applyBrush(); });
+	mPencil.setOnActivate([this]() {
+		if (mProject) mProject->setPencil();
+	});
+	mEraser.setOnActivate([this]() {
+		if (mProject) mProject->setEraser();
+	});
+
+	mControls.emplaceLayout<ColumnLayout>(8).setPadding(Insets::uniform(10));
+	mControls.addChild(mColor);
+	mControls.addChild(mBrushSize);
+	for (Button* button : { &mPencil, &mEraser }) {
+		button->setSizing(AxisSizing::fill(), AxisSizing::fit());
+		mControls.addChild(*button);
 	}
 
-	mActionPosAbsolutePrev = pointer;
+	mControlsPanel.setContent(&mControls);
+	mControlsPanel.setDockedLength(kControlsWidth);
+	mDock.setSizing(AxisSizing::fill(), AxisSizing::fill());
+	mDock.addPanel(mControlsPanel);
+	addChild(mDock);
 }
 
-SketchViewportWidget::SketchViewportWidget() {
-	setLayout(new ToolBarLayout(this));
-}
-
-void SketchViewportWidget::setToolbarWidget(Widget* widget) {
-	addChild(widget);
-	widget->bringToFront();
-}
-
-ToolbarWidget::ToolbarWidget() {
-	setDirection(false);
-
-	addToToolbar(&mFileHover);
-	addToToolbar(&mPencilHover);
-	addToToolbar(&mViewHover);
-
-	mFileHover.setText("File");
-	mViewHover.setText("View");
-	mPencilHover.setText("Brush");
-}
-
-void ToolbarWidget::addToToolbar(Widget* button) {
-	button->getLayout()->setMinSize({60, 30});
-	getContainer()->addChild(button);
-}
-
-SketchGUI::SketchGUI() :
-	DockWidget() {
-
-	setCenterWidget(&mViewport);
-	dockWidget(&mPanel, DockLayout::RIGHT);
-	toggleWidgetVisibility(DockLayout::RIGHT);
-
-	mPanel.addToMenu(&mControls);
-	mPanel.setText("Controls");
-	mPanel.setArea({ 110, 110, 300, 500 });
-
-	mControls.setText("Tools");
-	mControls.addToMenu(&mSelectPencil);
-	mControls.addToMenu(&mSelectEraser);
-	mControls.setArea({ 0, 0, 300, 400 });
-
-	// brush
-	{
-		auto popup = mToolbar.mPencilHover.getPopup();
-		popup->addChild(&mColorPicker);
-		popup->addChild(&mBrushSizeSlider);
-
-		mColorPicker.setArea({10, 10, 300, 300});
-	}
-
-	// view
-	{
-		auto popup = mToolbar.mViewHover.getPopup();
-		popup->addChild(&mToggleSidePanel);
-
-		mToggleSidePanel.setText("Toggle Panel");
-		mToggleSidePanel.setAction([this](){
-			toggleWidgetVisibility(getSide(&mPanel));
-		});
-	}
-
-	mSelectPencil.setAction([this](){ mProject->setPencil(); });
-	mSelectPencil.setText("Pencil");
-
-	mSelectEraser.setAction([this](){ mProject->setEraser(); });
-	mSelectEraser.setText("Eraser TODO");
-}
-
-void SketchGUI::createRenderWidget(GpuDevice& gpu, Canvas* canvas, const Vec2F& renderResolution) {
-	mRenderWidget = new SketchRenderWidget(gpu, *canvas, renderResolution);
-
-	mViewport.setRenderWidget(mRenderWidget);
-	mViewport.setToolbarWidget(&mToolbar);
+void SketchGUI::createRenderWidget(GpuDevice& gpu, Canvas& canvas, const Vec2F& renderResolution) {
+	mViewport = std::make_unique<SketchViewport>(gpu, canvas, renderResolution);
+	mViewport->setProject(mProject);
+	mDock.setCenter(mViewport.get());
 }
 
 void SketchGUI::setProject(Project* project) {
 	mProject = project;
-	mViewport.setProject(project);
-	if (mRenderWidget) mRenderWidget->setProject(project);
+	if (mViewport) mViewport->setProject(project);
+	applyBrush();
 }
 
-SketchGUI::~SketchGUI() { delete mRenderWidget; }
-
-void SketchGUI::process(const InputView& events) {
-	DockWidget::process(events);
+void SketchGUI::buildMenus(MenuBar& menuBar) {
+	mBrushMenu.addItem("Pencil", [this]() { mPencil.activate(); });
+	mBrushMenu.addItem("Eraser", [this]() { mEraser.activate(); });
+	mViewMenu.addToggle(
+		"Controls panel", [this]() { return mControlsPanel.isOpen(); }, [this]() { mDock.togglePanel(mControlsPanel); }
+	);
+	menuBar.addMenu("Brush", mBrushMenu);
+	menuBar.addMenu("View", mViewMenu);
+}
 
+void SketchGUI::applyBrush() {
 	if (!mProject) return;
-
-	auto pencil = dynamic_cast<PencilBrush*>(mProject->mBrushes.get("pencil"));
-
-	pencil->mCol = mColorPicker.color();
-	pencil->mSize = mBrushSizeSlider.val() * 0.2f + 0.001f;
+	auto* pencil = dynamic_cast<PencilBrush*>(mProject->mBrushes.get("pencil"));
+	if (!pencil) return;
+	pencil->mCol = mColor.color();
+	pencil->mSize = mBrushSize.value() * kBrushSizeScale + kMinimumBrushSize;
 }
-
-void SketchGUI::draw(Canvas& canvas) { canvas.rect(getArea().relative(), mBackgroundColor, mRounding); }
diff --git a/Sketch3D/public/SketchGUI.hpp b/Sketch3D/public/SketchGUI.hpp
index 5b8e521c..701f0fa6 100644
--- a/Sketch3D/public/SketchGUI.hpp
+++ b/Sketch3D/public/SketchGUI.hpp
@@ -1,95 +1,70 @@
 #pragma once
 
+#include "Button.hpp"
+#include "Docking.hpp"
+#include "Menus.hpp"
 #include "Sketch3D.hpp"
+#include "Slider.hpp"
+#include "Views.hpp"
 #include "Widget.hpp"
-#include "DockWidget.hpp"
-#include "FloatingWidget.hpp"
-#include "ColorPickerWidget.hpp"
+
+#include <memory>
 
 namespace tp {
 
-	class SketchRenderWidget : public Widget {
+	// Renders the project's strokes and turns pointer drags into strokes or camera moves:
+	// Shift moves the camera, Alt rotates it, Control zooms, plain drags draw with the active brush.
+	class SketchViewport : public ui::Widget {
 	public:
-		SketchRenderWidget(GpuDevice& gpu, Canvas& canvas, Vec2F renderResolution);
-		~SketchRenderWidget() override;
+		SketchViewport(GpuDevice& gpu, Canvas& canvas, Vec2F renderResolution);
+		~SketchViewport() override;
 
-		void draw(Canvas& canvas) override;
 		void setProject(Project* project);
 
+	protected:
+		void onEvent(ui::Event& event) override;
+		[[nodiscard]] bool acceptsDrag(PointerButton button) const override;
+		void paint(Canvas& canvas) override;
+		void onTick(halnf deltaMs) override;
+
 	private:
+		static constexpr halnf kImageRounding = 12;
+
+		[[nodiscard]] Vec2F toNormalized(Vec2F localPoint) const;
+		[[nodiscard]] halnf ratio() const;
+		void dragged(const ui::Event& event);
+
 		Renderer mRenderer;
-		Project* mProject = nullptr;
+		Canvas& mCanvas;
 		ImageHandle mImage;
-		Canvas* mCanvas = nullptr;
-	};
-
-	class SketchViewportWidget : public Widget {
-	public:
-		SketchViewportWidget();
-
-		void setProject(Project* project);
-		void setColor(const RGBA& color);
-
-		void setRenderWidget(SketchRenderWidget* widget);
-		void setToolbarWidget(Widget* widget);
-
-		void process(const InputView& events) override;
-		[[nodiscard]] bool processesEvents() const override { return true; }
-
-	private:
 		Project* mProject = nullptr;
-
-	public:
-		Vec2F mActionPosAbsolutePrev = { 0, 0 };
-		bool mAction = false;
 	};
 
-
-	class ToolbarWidget : public ScrollableWidget {
-	public:
-		ToolbarWidget();
-
-	private:
-		void addToToolbar(Widget* button);
-
-	public:
-		HoverPopupTriggerWidget mFileHover;
-		HoverPopupTriggerWidget mPencilHover;
-		HoverPopupTriggerWidget mViewHover;
-	};
-
-	class SketchGUI : public DockWidget {
+	// The sketch window content: the viewport and a docked controls panel with the brush and tool choice.
+	class SketchGUI : public ui::Widget {
 	public:
 		SketchGUI();
-		void createRenderWidget(GpuDevice& gpu, Canvas* canvas, const Vec2F& renderResolution);
-		void setProject(Project* project);
-		~SketchGUI() override;
 
-		void process(const InputView& events) override;
-		void draw(Canvas& canvas) override;
+		void createRenderWidget(GpuDevice& gpu, Canvas& canvas, const Vec2F& renderResolution);
+		void setProject(Project* project);
+		void buildMenus(ui::MenuBar& menuBar);
+
+		[[nodiscard]] ui::DockPanel& controlsPanel() { return mControlsPanel; }
 
 	private:
+		void applyBrush();
+
 		Project* mProject = nullptr;
+		std::unique_ptr<SketchViewport> mViewport;
 
-		SketchViewportWidget mViewport;
-		ToolbarWidget mToolbar;
-
-		SketchRenderWidget* mRenderWidget = nullptr;
-
-		FloatingMenu mPanel;
-
-		RGBPickerWidget mColorPicker;
-
-		ButtonWidget mToggleSidePanel;
-
-		ButtonWidget mSelectPencil;
-		ButtonWidget mSelectEraser;
-
-		SliderWidget mBrushSizeSlider;
-
-		FloatingMenu mControls;
-
-		RGBA mBackgroundColor;
-		halnf mRounding = 0;
+		ui::DockArea mDock;
+		ui::DockPanel mControlsPanel{ "Controls", ui::DockSide::Right };
+		ui::Widget mControls;
+		ui::ColorWheel mColor;
+		ui::Slider mBrushSize{ 0, 1, 0.05f };
+		ui::Button mPencil{ "Pencil" };
+		ui::Button mEraser{ "Eraser" };
+		ui::Menu mViewMenu;
+		ui::Menu mBrushMenu;
 	};
 }
diff --git a/Widgets/examples/Gallery.cpp b/Widgets/examples/Gallery.cpp
index 55aad527..b4eedb11 100644
--- a/Widgets/examples/Gallery.cpp
+++ b/Widgets/examples/Gallery.cpp
@@ -917,6 +917,164 @@ void NodesPage::refreshStatus() {
 	);
 }
 
+FormsPage::FormsPage() {
+	setDebugName("forms page");
+	ColumnLayout& layout = emplaceLayout<ColumnLayout>(kPageSpacing);
+	layout.setPadding(Insets::uniform(16));
+
+	contacts = {
+		{ "Ada Lovelace", "Analyst", 80, true, 0 },
+		{ "Grace Hopper", "Compiler lead", 90, true, 1 },
+		{ "Alan Turing", "Researcher", 70, false, 0 },
+		{ "Barbara Liskov", "Architect", 60, false, 1 },
+		{ "Edsger Dijkstra", "Reviewer", 40, false, 2 },
+		{ "Margaret Hamilton", "Flight software", 95, true, 2 },
+	};
+
+	// Commands: the menu shows their labels, shortcut text and state, and the keyboard runs them.
+	commands.define(Command::Star, { "Star", [this] {
+		if (Contact* contact = current()) contact->starred = !contact->starred;
+		refreshList();
+	}, [this] { return current() != nullptr; }, [this] { return current() && current()->starred; } });
+	commands.define(Command::Remove, { "Remove", [this] {
+		if (!list.current()) return;
+		contacts.erase(contacts.begin() + (std::ptrdiff_t) *list.current());
+		refreshList();
+	}, [this] { return current() != nullptr; }, {} });
+	commands.define(Command::ShowArchived, { "Show archived", [this] { showArchived = !showArchived; }, {}, [this] { return showArchived; } });
+	commands.shortcuts().bind(ctrl(Key::S), Command::Star);
+	commands.shortcuts().bind(plain(Key::Delete), Command::Remove);
+	actions.add(MenuEntry::command(commands, Command::Star));
+	actions.add(MenuEntry::command(commands, Command::Remove));
+	actions.addSeparator();
+	actions.add(MenuEntry::command(commands, Command::ShowArchived));
+	actionsButton.setPopupContent(&actions);
+
+	density.addSegment("Compact", Density::Compact);
+	density.addSegment("Regular", Density::Regular);
+	density.addSegment("Comfortable", Density::Comfortable);
+	density.setValue(Density::Regular);
+	density.setOnChanged([this](const Density& value) {
+		list.setDensity(value == Density::Compact ? ListRow::Density::Compact : value == Density::Regular ? ListRow::Density::Regular : ListRow::Density::Comfortable);
+	});
+
+	mToolbar.setSizing(AxisSizing::fill(), AxisSizing::fit());
+	mToolbar.emplaceLayout<RowLayout>(8).setCrossAlign(CrossAlign::Center);
+	mToolbar.addChild(actionsButton);
+	mToolbar.addChild(density);
+	filterHint.setTone(Label::Tone::Muted);
+	mToolbar.addChild(filterHint);
+
+	list.setEmptyText("No contacts left. Restart the gallery to bring them back.");
+	list.setOnSelectionChanged([this] { details.refresh(); });
+	mListPanel.setContent(&list);
+	mListPanel.setSizing(AxisSizing::fill(), AxisSizing::fill());
+
+	// The form edits whichever contact is current; each row is bound once.
+	const auto field = [this](auto read, auto fallback) {
+		return [this, read, fallback]() { return current() ? read(*current()) : fallback; };
+	};
+	details.addValue("Name", field([](const Contact& contact) { return contact.name; }, std::string("-")));
+	details.addText("Role", field([](const Contact& contact) { return contact.role; }, std::string()), [this](const std::string& role) {
+		if (current()) current()->role = role;
+	});
+	details.addSlider("Priority", 0, 100, field([](const Contact& contact) { return contact.priority; }, 0.0f), [this](halnf value) {
+		if (current()) current()->priority = value;
+	});
+	details.addCheckbox("Starred", field([](const Contact& contact) { return contact.starred; }, false), [this](bool starred) {
+		if (current()) current()->starred = starred;
+	});
+	details.addChoice("Team", { "Research", "Platform", "Flight" }, field([](const Contact& contact) { return contact.team; }, 0L), [this](long team) {
+		if (current()) current()->team = team;
+	});
+	details.setOnEdited([this] { refreshList(); });
+	mDetailsPanel.setContent(&details);
+	mDetailsPanel.setSizing(AxisSizing::fixed(320), AxisSizing::fill());
+
+	mColumns.setSizing(AxisSizing::fill(), AxisSizing::fill());
+	mColumns.emplaceLayout<RowLayout>(kPageSpacing);
+	mColumns.addChild(mListPanel);
+	mColumns.addChild(mDetailsPanel);
+
+	status.setTone(Label::Tone::Muted);
+	addChild(mToolbar);
+	addChild(mColumns);
+	addChild(status);
+	refreshList();
+}
+
+FormsPage::Contact* FormsPage::current() {
+	return list.current() && *list.current() < contacts.size() ? &contacts[*list.current()] : nullptr;
+}
+
+void FormsPage::refreshList() {
+	ListView::Model model;
+	model.count = contacts.size();
+	model.fill = [this](size_t index, ListRow& row) {
+		const Contact& contact = contacts[index];
+		row.setTitle(contact.name);
+		row.setSubtitle(contact.role);
+		row.setLeading(contact.starred ? ListRow::Leading::glyphOf(Glyph::Check) : ListRow::Leading::space());
+		row.setTrailing(ListRow::Trailing::textOf(std::to_string((int) contact.priority)));
+	};
+	list.setModel(std::move(model));
+	details.refresh();
+	status.setText(std::to_string(contacts.size()) + " contacts, " + std::to_string(list.selection().selected().size()) + " selected");
+}
+
+PanelsPage::PanelsPage() {
+	setDebugName("panels page");
+	ColumnLayout& layout = emplaceLayout<ColumnLayout>(kPageSpacing);
+	layout.setPadding(Insets::uniform(16));
+
+	// A titled panel with header actions; the body owns the notes it adds.
+	addNote.setTooltip("Add a note");
+	clearNotes.setTooltip("Clear the notes");
+	notes.addHeaderAction(addNote);
+	notes.addHeaderAction(clearNotes);
+	notes.setSizing(AxisSizing::fill(), AxisSizing::fill());
+	notes.setBodyGap(4);
+	noteCount.setTone(Label::Tone::Muted);
+	notes.footer().addChild(noteCount);
+	const auto countNotes = [this] {
+		noteCount.setText(std::to_string(notes.body().ownedChildCount()) + " notes");
+	};
+	addNote.setOnActivate([this, countNotes] {
+		notes.body().emplaceChild<Label>("Note " + std::to_string(notes.body().ownedChildCount() + 1));
+		countNotes();
+	});
+	clearNotes.setOnActivate([this, countNotes] {
+		notes.body().clearOwnedChildren();
+		countNotes();
+	});
+	countNotes();
+
+	// A titled panel whose body scrolls.
+	log.setSizing(AxisSizing::fill(), AxisSizing::fill());
+	log.setScrollsBody(true);
+	for (int entry = 1; entry <= 40; entry++)
+		log.body().emplaceChild<Label>("Event " + std::to_string(entry) + ": something happened").setTone(Label::Tone::Muted);
+
+	mRow.setSizing(AxisSizing::fill(), AxisSizing::fill());
+	mRow.emplaceLayout<RowLayout>(kPageSpacing);
+	mRow.addChild(notes);
+	mRow.addChild(log);
+
+	// A dialog is a titled panel with modality: content in the body, choices in the footer.
+	dialogName.setText("Background");
+	dialog.body().addChild(dialogName);
+	dialog.addButton("Rename", [this] { status.setText("Renamed to " + dialogName.text()); }, true);
+	dialog.addCancelButton();
+	openDialog.setOnActivate([this] {
+		if (ui()) dialog.open(*ui(), &openDialog);
+	});
+	status.setTone(Label::Tone::Muted);
+
+	addChild(mRow);
+	addChild(openDialog);
+	addChild(status);
+}
+
 Gallery::Gallery() :
 	Panel(Surface::Window) {
 	setDebugName("gallery");
@@ -941,6 +1099,8 @@ Gallery::Gallery() :
 	tabs.addTab("Kanban", kanbanPage);
 	tabs.addTab("Markdown", markdownPage);
 	tabs.addTab("Carousel", carouselPage);
+	tabs.addTab("Forms", formsPage);
+	tabs.addTab("Panels", panelsPage);
 
 	statusBar.setTone(Label::Tone::Muted);
 	statusBar.setText("ready");
diff --git a/Widgets/examples/Gallery.hpp b/Widgets/examples/Gallery.hpp
index ed2efabb..22471f30 100644
--- a/Widgets/examples/Gallery.hpp
+++ b/Widgets/examples/Gallery.hpp
@@ -7,6 +7,10 @@
 #include "Docking.hpp"
 #include "FloatingPanel.hpp"
 #include "KanbanBoard.hpp"
+#include "ListView.hpp"
+#include "PropertyList.hpp"
+#include "SegmentedControl.hpp"
+#include "TitledPanel.hpp"
 #include "Label.hpp"
 #include "MarkdownEditor.hpp"
 #include "Menus.hpp"
@@ -340,6 +344,65 @@ namespace tp::ui::gallery {
 		bool mOpenedFile = false;
 	};
 
+	// The shared list, form and choice components: a ListView of contacts with keyboard navigation and an empty
+	// state, a PropertyList editing the selected contact, a SegmentedControl choosing the list density, and a menu
+	// whose entries are commands.
+	class FormsPage : public Widget {
+	public:
+		enum class Density { Compact, Regular, Comfortable };
+		enum class Command { Star, Remove, ShowArchived };
+
+		struct Contact {
+			std::string name;
+			std::string role;
+			halnf priority = 50;
+			bool starred = false;
+			long team = 0;
+		};
+
+		FormsPage();
+
+		[[nodiscard]] Contact* current();
+		void refreshList();
+
+		std::vector<Contact> contacts;
+		bool showArchived = false;
+		Commands<Command> commands;
+		Menu actions;
+		PopupButton actionsButton{ "Actions" };
+		SegmentedControl<Density> density;
+		Label filterHint{ "Type in the list to jump to a name; Shift+arrows select a range." };
+		ListView list{ ListView::Mode::Multiple };
+		PropertyList details;
+		Label status;
+
+	private:
+		Widget mToolbar;
+		Widget mColumns;
+		TitledPanel mListPanel{ "Contacts", Panel::Surface::Raised };
+		TitledPanel mDetailsPanel{ "Details", Panel::Surface::Raised };
+	};
+
+	// TitledPanel and its relatives side by side: a plain titled panel with header actions and a footer, a
+	// scrolling panel, and a dialog opened from a button.
+	class PanelsPage : public Widget {
+	public:
+		PanelsPage();
+
+		TitledPanel notes{ "Notes" };
+		GlyphButton addNote{ Glyph::Plus };
+		GlyphButton clearNotes{ Glyph::Close };
+		Label noteCount;
+		TitledPanel log{ "Activity log" };
+		Button openDialog{ "Open dialog" };
+		Dialog dialog{ "Rename layer" };
+		TextField dialogName;
+		Label status;
+
+	private:
+		Widget mRow;
+	};
+
 	class Gallery : public Panel {
 	public:
 		Gallery();
@@ -369,6 +432,8 @@ namespace tp::ui::gallery {
 		TreePage treePage;
 		KanbanPage kanbanPage;
 		MarkdownPage markdownPage;
+		FormsPage formsPage;
+		PanelsPage panelsPage;
 
 		enum class Action { New, Open, Quit, NextTab };
 		ShortcutMap<Action> shortcuts;
diff --git a/Widgets/examples/ThemeEditor.cpp b/Widgets/examples/ThemeEditor.cpp
index 9e30c943..e7e76639 100644
--- a/Widgets/examples/ThemeEditor.cpp
+++ b/Widgets/examples/ThemeEditor.cpp
@@ -11,7 +11,6 @@ using namespace tp;
 using namespace tp::ui;
 
 namespace {
-	constexpr halnf kSwatchSize = 18;
 	constexpr halnf kColorColumnWidth = 300;
 	constexpr halnf kEditorColumnWidth = 300;
 
@@ -102,69 +101,27 @@ std::string tp::ui::themeSource(const Theme& theme) {
 	return source;
 }
 
-ColorSwatch::ColorSwatch() { setDebugName("color swatch"); }
-
-void ColorSwatch::setColor(const RGBA& color) {
-	mColor = color;
-	requestPaint();
-}
-
-Extent ColorSwatch::measureContent(Axis, halnf) const { return Extent::rigid(kSwatchSize); }
-
-void ColorSwatch::paint(Canvas& painter) {
-	const RectF box = localRect();
-	const halnf radius = theme().metrics.indicatorCornerRadius;
-	const halnf half = box.size.x / 2;
-	painter.rect(box, { 1, 1, 1, 1 }, radius);
-	painter.rect(makeRect(0, 0, half, half), { 0.75f, 0.75f, 0.75f, 1 }, radius / 2);
-	painter.rect(makeRect(half, half, half, half), { 0.75f, 0.75f, 0.75f, 1 }, radius / 2);
-	painter.rect(box, mColor, radius);
-	painter.outline(box, theme().palette.controlBorder, theme().metrics.indicatorCornerRadius);
-}
-
-ThemeColorRow::ThemeColorRow(const ThemeColorField& field) :
-	mField(field) {
-	setDebugName(std::string("theme color: ") + field.name);
-	setSizing(AxisSizing::fill(), AxisSizing::fit());
-	emplaceLayout<RowLayout>(6).setCrossAlign(CrossAlign::Center);
-
-	name.setText(field.name);
-	name.setStyle(Button::Style::Flat);
-	name.setSizing(AxisSizing::fill(), AxisSizing::fit());
-	hex.setTone(Label::Tone::Muted);
-
-	addChild(swatch);
-	addChild(name);
-	addChild(hex);
-}
-
-void ThemeColorRow::refresh(const Theme& theme) {
-	const RGBA& color = theme.palette.*mField.member;
-	swatch.setColor(color);
-	hex.setText(colorHex(color));
-}
-
-void ThemeColorRow::setSelected(bool selected) { name.setSelected(selected); }
-
 ThemeEditorPage::ThemeEditorPage() {
 	setDebugName("theme editor page");
 	RowLayout& layout = emplaceLayout<RowLayout>(16);
 	layout.setPadding(Insets::uniform(16));
 
-	colorList.setSizing(AxisSizing::fill(), AxisSizing::fit());
-	colorList.emplaceLayout<ColumnLayout>(1);
-	for (size_t index = 0; index < themeColorFields().size(); index++) {
-		colorRows.push_back(std::make_unique<ThemeColorRow>(themeColorFields()[index]));
-		colorRows.back()->name.setOnActivate([this, index]() { selectColor(index); });
-		colorRows.back()->swatch.setOnActivate([this, index]() { selectColor(index); });
-		colorList.addChild(*colorRows.back());
-	}
-	colorScroll.setContent(&colorList);
-	colorScroll.setSizing(AxisSizing::fill(), AxisSizing::fill());
+	ListView::Model model;
+	model.count = themeColorFields().size();
+	model.fill = [this](size_t index, ListRow& row) {
+		const RGBA& color = editedTheme().palette.*themeColorFields()[index].member;
+		row.setTitle(themeColorFields()[index].name);
+		row.setLeading(ListRow::Leading::swatch(color));
+		row.setTrailing(ListRow::Trailing::textOf(colorHex(color)));
+	};
+	colors.setModel(std::move(model));
+	colors.setOnSelectionChanged([this]() {
+		if (colors.current() && *colors.current() != mSelected) selectColor(*colors.current());
+	});
 
 	mColorColumn.setSizing(AxisSizing::fixed(kColorColumnWidth), AxisSizing::fill());
 	mColorColumn.emplaceLayout<ColumnLayout>(6);
-	mColorColumn.addChild(colorScroll);
+	mColorColumn.addChild(colors);
 
 	wheel.setSizing(AxisSizing::fill(), AxisSizing::fixed(200));
 	wheel.setOnChanged([this](const RGBA& color) {
@@ -186,18 +143,21 @@ ThemeEditorPage::ThemeEditorPage() {
 	mEditorColumn.addChild(alpha);
 	mEditorColumn.addChild(mSeparator);
 
+	PropertyList::SliderOptions whole;
+	whole.format = [](halnf value) { return std::to_string((int) std::lround(value)); };
+	whole.step = 1;
 	for (const ThemeMetricField& field : themeMetricFields()) {
-		metricSliders.push_back(std::make_unique<LabeledSlider>(field.name, field.minimum, field.maximum, 0));
-		LabeledSlider& slider = *metricSliders.back();
-		slider.setSizing(AxisSizing::fill(), AxisSizing::fit());
-		slider.setValueFormatter([](halnf value) { return std::to_string((int) std::lround(value)); });
-		slider.slider().setStep(1);
 		halnf Metrics::* member = field.member;
-		slider.setOnChanged([this, member](halnf value) {
-			edit([member, value](Theme& theme) { theme.metrics.*member = value; });
-		});
-		mEditorColumn.addChild(slider);
+		metrics.addSlider(
+			field.name,
+			field.minimum,
+			field.maximum,
+			[this, member]() { return editedTheme().metrics.*member; },
+			[this, member](halnf value) { edit([member, value](Theme& theme) { theme.metrics.*member = value; }); },
+			whole
+		);
 	}
+	mEditorColumn.addChild(metrics);
 
 	accentPreset.setTooltip("Accent preset");
 	accentPreset.setOnSelected([this](long index) {
@@ -237,7 +197,7 @@ void ThemeEditorPage::onThemeChanged() {
 }
 
 void ThemeEditorPage::selectColor(size_t index) {
-	if (index >= colorRows.size()) return;
+	if (index >= themeColorFields().size()) return;
 	mSelected = index;
 	refreshEditors();
 }
@@ -255,10 +215,8 @@ void ThemeEditorPage::refreshEditors() {
 	const Theme theme = editedTheme();
 	mRefreshing = true;
 
-	for (size_t index = 0; index < colorRows.size(); index++) {
-		colorRows[index]->refresh(theme);
-		colorRows[index]->setSelected(index == mSelected);
-	}
+	colors.refresh();
+	if (colors.current() != mSelected) colors.select(mSelected);
 
 	const ThemeColorField& field = themeColorFields()[mSelected];
 	const RGBA& color = theme.palette.*field.member;
@@ -266,8 +224,7 @@ void ThemeEditorPage::refreshEditors() {
 	wheel.setColor(color);
 	alpha.setValue(color.a);
 
-	for (size_t index = 0; index < metricSliders.size(); index++)
-		metricSliders[index]->setValue(theme.metrics.*themeMetricFields()[index].member);
+	metrics.refresh();
 
 	mRefreshing = false;
 }
diff --git a/Widgets/examples/ThemeEditor.hpp b/Widgets/examples/ThemeEditor.hpp
index ce8848b0..6b86d452 100644
--- a/Widgets/examples/ThemeEditor.hpp
+++ b/Widgets/examples/ThemeEditor.hpp
@@ -4,7 +4,9 @@
 #include "Button.hpp"
 #include "Containers.hpp"
 #include "Label.hpp"
+#include "ListView.hpp"
 #include "Menus.hpp"
+#include "PropertyList.hpp"
 #include "Slider.hpp"
 #include "Theme.hpp"
 #include "Views.hpp"
@@ -32,36 +34,6 @@ namespace tp::ui {
 	std::string colorHex(const RGBA& color);
 	std::string themeSource(const Theme& theme);
 
-	class ColorSwatch : public Control {
-	public:
-		ColorSwatch();
-
-		void setColor(const RGBA& color);
-		[[nodiscard]] const RGBA& color() const { return mColor; }
-
-	protected:
-		[[nodiscard]] Extent measureContent(Axis axis, halnf crossLength) const override;
-		void paint(Canvas& painter) override;
-
-	private:
-		RGBA mColor;
-	};
-
-	class ThemeColorRow : public Widget {
-	public:
-		explicit ThemeColorRow(const ThemeColorField& field);
-
-		void refresh(const Theme& theme);
-		void setSelected(bool selected);
-
-		ColorSwatch swatch;
-		Button name;
-		Label hex;
-
-	private:
-		const ThemeColorField& mField;
-	};
-
 	class ThemeEditorPage : public Widget {
 	public:
 		ThemeEditorPage();
@@ -70,14 +42,14 @@ namespace tp::ui {
 		void selectColor(size_t index);
 		[[nodiscard]] Theme editedTheme() const;
 
-		ScrollView colorScroll;
-		Widget colorList;
-		std::vector<std::unique_ptr<ThemeColorRow>> colorRows;
+		// The palette colors: a swatch, the name and the hex value per row; the current row is the edited color.
+		ListView colors;
 
 		Label editingTitle;
 		ColorWheel wheel;
 		LabeledSlider alpha{ "Alpha", 0, 1, 1 };
-		std::vector<std::unique_ptr<LabeledSlider>> metricSliders;
+		// One slider per metric, bound to the live theme.
+		PropertyList metrics;
 		Dropdown accentPreset{ { "Blue", "Purple", "Green", "Orange", "Pink" } };
 		Button reset{ "Reset to standard" };
 		Button copySource{ "Copy as C++" };
diff --git a/Widgets/src/components/chrome/private/Dialog.cpp b/Widgets/src/components/chrome/private/Dialog.cpp
index effc22ab..d77fd50a 100644
--- a/Widgets/src/components/chrome/private/Dialog.cpp
+++ b/Widgets/src/components/chrome/private/Dialog.cpp
@@ -9,61 +9,54 @@ using namespace tp::ui;
 
 namespace {
 	constexpr halnf kDialogWidth = 360;
+	constexpr halnf kDialogPadding = 16;
+	constexpr halnf kDialogGap = 10;
+	constexpr halnf kDialogBodyGap = 8;
 }
 
 Dialog::Dialog(std::string title) :
-	Panel(Surface::Raised),
-	mTitle(std::move(title)) {
+	TitledPanel(std::move(title), Surface::Raised) {
 	setDebugName("dialog");
 	setBorder(true);
 	setSizing(AxisSizing::fixed(kDialogWidth), AxisSizing::fit());
-	emplaceLayout<ColumnLayout>(10).setPadding(Insets::uniform(16));
+	// A dialog spaces its parts more than a docked panel: the title, message, content and buttons each breathe.
+	static_cast<ColumnLayout*>(layout())->setGap(kDialogGap);
+	layout()->setPadding(Insets::uniform(kDialogPadding));
+	header().layout()->setPadding(Insets());
+	setBodyPadding(Insets());
+	setBodyGap(kDialogBodyGap);
+	body().setSizing(AxisSizing::fill(), AxisSizing::fit());
 
-	mTitle.setFontSize(Theme::standard().metrics.fontSize + 2);
-	mTitle.setWrap(true);
-	mTitle.setSizing(AxisSizing::fill(), AxisSizing::fit());
+	titleLabel().setFontSize(Theme::standard().metrics.fontSize + 2);
+	titleLabel().setWrap(true);
 	mMessage.setWrap(true);
 	mMessage.setSizing(AxisSizing::fill(), AxisSizing::fit());
 	mMessage.setTone(Label::Tone::Muted);
 	mMessage.setVisible(false);
-
-	mBody.setSizing(AxisSizing::fill(), AxisSizing::fit());
-	mBody.emplaceLayout<ColumnLayout>(8);
-
-	mButtonRow.setSizing(AxisSizing::fill(), AxisSizing::fit());
-	mButtonRow.emplaceLayout<RowLayout>(6);
-	mButtonSpacer.setSizing(AxisSizing::fill(), AxisSizing::fixed(1));
-	mButtonRow.addChild(mButtonSpacer);
-
-	addChild(mTitle);
-	addChild(mMessage);
-	addChild(mBody);
-	addChild(mButtonRow);
+	body().addChild(mMessage);
+	footer();
 }
 
 Dialog::~Dialog() { close(); }
 
-void Dialog::setTitle(std::string title) { mTitle.setText(std::move(title)); }
-
 void Dialog::setMessage(std::string message) {
 	mMessage.setVisible(!message.empty());
 	mMessage.setText(std::move(message));
 }
 
 Button& Dialog::addButton(std::string text, std::function<void()> action, bool isDefault) {
-	auto button = std::make_unique<Button>(std::move(text));
-	button->setOnActivate([this, action]() {
+	// The button row owns the buttons.
+	Button& button = footer().emplaceChild<Button>(std::move(text));
+	button.setOnActivate([this, action]() {
 		close();
 		if (action) action();
 	});
 	if (isDefault) {
-		button->setStyle(Button::Style::Accent);
-		mDefault = button.get();
+		button.setStyle(Button::Style::Accent);
+		mDefault = &button;
 	}
-
-	mButtonRow.addChild(*button);
-	mButtons.push_back(std::move(button));
-	return *mButtons.back();
+	mButtons.push_back(&button);
+	return button;
 }
 
 Button& Dialog::addCancelButton(std::string text) {
diff --git a/Widgets/src/components/chrome/private/Menus.cpp b/Widgets/src/components/chrome/private/Menus.cpp
index bab89b4a..3983c233 100644
--- a/Widgets/src/components/chrome/private/Menus.cpp
+++ b/Widgets/src/components/chrome/private/Menus.cpp
@@ -1,5 +1,6 @@
 #include "Menus.hpp"
 #include "Canvas.hpp"
+#include "Glyph.hpp"
 #include "ComponentSizes.hpp"
 
 #include <algorithm>
@@ -13,8 +14,9 @@ using namespace tp;
 using namespace tp::ui;
 
 namespace {
-	constexpr halnf kSubmenuArrowWidth = 16;
-	constexpr halnf kWindowDragThreshold = 4;
+	// Room the dropdown keeps at its right for its chevron, and the chevron's size.
+	constexpr halnf kDropdownChevronRoom = 16;
+	constexpr halnf kDropdownChevronSide = 8;
 
 	PopupOptions menuPopupOptions(Placement placement, halnf gap) {
 		PopupOptions options;
@@ -134,73 +136,23 @@ MenuItem::MenuItem(Menu& menu, MenuEntry entry) :
 	mMenu(menu),
 	mEntry(std::move(entry)) {
 	setDebugName("menu item: " + mEntry.text);
-	setSizing(AxisSizing::fill(), AxisSizing::fit());
+	setDensity(Density::Compact);
+	if (!mEntry.shortcut.empty()) setTrailing(Trailing::textOf(mEntry.shortcut));
+	if (mEntry.kind == MenuEntry::Kind::Submenu) setTrailing(Trailing::chevron());
+	setMuted(mEntry.muted);
 	refresh();
 }
 
 void MenuItem::refresh() {
 	if (mEntry.isEnabled) setEnabled(mEntry.isEnabled());
+	setTitle(mEntry.dynamicText ? mEntry.dynamicText() : mEntry.text);
 
-	std::string text = mEntry.dynamicText ? mEntry.dynamicText() : mEntry.text;
-	if (text != mText) {
-		mText = std::move(text);
-		requestLayout();
-	}
-	requestPaint();
-}
-
-Extent MenuItem::measureContent(Axis axis, halnf) const {
-	const Metrics& metrics = theme().metrics;
-
-	if (axis == Axis::Vertical) return Extent::rigid(sizes::menuItemHeight);
-
-	halnf width = metrics.controlPadding.total(Axis::Horizontal) + metrics.indicatorSize + metrics.spacing;
-	width += textWidth(mText, metrics.fontSize);
-	if (!mEntry.shortcut.empty()) width += metrics.spacing * 4 + textWidth(mEntry.shortcut, metrics.smallFontSize);
-	if (mEntry.kind == MenuEntry::Kind::Submenu) width += kSubmenuArrowWidth;
-	return Extent::natural(width);
-}
-
-void MenuItem::paint(Canvas& painter) {
-	const Theme& style = theme();
-	const RectF content = style.metrics.controlPadding.shrink(localRect());
-	RGBA textColor = isEffectivelyEnabled() ? style.palette.text : style.palette.disabledText;
-	if (mEntry.muted && isEffectivelyEnabled()) textColor = style.palette.mutedText;
-
-	painter.rect(localRect(), background(), style.metrics.cornerRadius);
-
+	// Every item keeps room for a mark, so titles line up: a check when checked, else the icon, else empty.
 	const bool checked = mEntry.isChecked && mEntry.isChecked();
-	if (mEntry.icon.isValid() && !checked) {
-		const halnf side = style.metrics.indicatorSize * 1.25f;
-		const RectF slot = makeRect(content.pos.x - side * 0.1f, (size().y - side) / 2, side, side);
-		painter.drawImage(slot, mEntry.icon);
-	}
-	if (checked) {
-		const halnf unit = style.metrics.indicatorSize;
-		const Vec2F origin = { content.pos.x, (size().y - unit) / 2 };
-		painter.polyline(
-			{ origin + Vec2F(unit * 0.2f, unit * 0.52f),
-				origin + Vec2F(unit * 0.42f, unit * 0.74f),
-				origin + Vec2F(unit * 0.82f, unit * 0.28f) },
-			textColor,
-			1.5f
-		);
-	}
-
-	const halnf textLeft = content.pos.x + style.metrics.indicatorSize + style.metrics.spacing;
-	const RectF textBox = makeRect(textLeft, 0, size().x - textLeft, size().y);
-	painter.text(mText, textBox, TextStyle{ style.metrics.fontSize, textColor, TextAlign::leftCenter() });
-
-	if (!mEntry.shortcut.empty()) {
-		const halnf right = mEntry.kind == MenuEntry::Kind::Submenu ? kSubmenuArrowWidth : 0;
-		const RectF shortcutBox = makeRect(content.pos.x, 0, content.size.x - right, size().y);
-		painter.text(mEntry.shortcut, shortcutBox, TextStyle{ style.metrics.smallFontSize, style.palette.mutedText, TextAlign::rightCenter() });
-	}
-
-	if (mEntry.kind == MenuEntry::Kind::Submenu) {
-		const Vec2F tip = { size().x - 10, size().y / 2 };
-		painter.polyline({ tip + Vec2F(-3.0f, -4.0f), tip, tip + Vec2F(-3.0f, 4.0f) }, style.palette.mutedText, 1.5f);
-	}
+	if (checked) setLeading(Leading::check());
+	else if (mEntry.icon.isValid()) setLeading(Leading::imageOf(mEntry.icon));
+	else setLeading(Leading::space());
+	requestPaint();
 }
 
 void MenuItem::onActivated() {
@@ -230,11 +182,11 @@ void MenuItem::onHoverChanged() {
 }
 
 RGBA MenuItem::backgroundTarget() const {
+	// A menu row highlights while hovered, keyboard-current or showing its open submenu; it is never "pressed".
 	const Palette& palette = theme().palette;
 	const bool submenuOpen = mEntry.kind == MenuEntry::Kind::Submenu && mEntry.submenu->isOpen();
-
-	if (isEffectivelyEnabled() && (isHovered() || submenuOpen)) return palette.menuHighlight;
-	return { palette.menuHighlight.r, palette.menuHighlight.g, palette.menuHighlight.b, 0 };
+	if (isEffectivelyEnabled() && (isHovered() || isHighlighted() || submenuOpen)) return palette.menuHighlight;
+	return Palette::faded(palette.menuHighlight, 0);
 }
 
 Placement MenuItem::submenuSide(const RectF& menuRect) const {
@@ -278,9 +230,9 @@ Menu::~Menu() {
 }
 
 MenuItem& Menu::add(MenuEntry entry) {
-	mItems.push_back(std::make_unique<MenuItem>(*this, std::move(entry)));
-	mColumn.addChild(*mItems.back());
-	return *mItems.back();
+	MenuItem& item = mColumn.emplaceChild<MenuItem>(*this, std::move(entry));
+	mItems.push_back(&item);
+	return item;
 }
 
 MenuItem& Menu::addItem(std::string text, std::function<void()> action, std::string shortcut) {
@@ -292,8 +244,7 @@ MenuItem& Menu::addToggle(std::string text, std::function<bool()> isChecked, std
 }
 
 void Menu::addSeparator() {
-	mSeparators.push_back(std::make_unique<Separator>());
-	mColumn.addChild(*mSeparators.back());
+	mColumn.emplaceChild<Separator>();
 }
 
 MenuItem& Menu::addSubmenu(std::string text, Menu& submenu) { return add(MenuEntry::nested(std::move(text), submenu)); }
@@ -301,7 +252,7 @@ MenuItem& Menu::addSubmenu(std::string text, Menu& submenu) { return add(MenuEnt
 void Menu::clear() {
 	mColumn.removeAllChildren();
 	mItems.clear();
-	mSeparators.clear();
+	mCurrent.reset();
 }
 
 std::vector<const MenuItem*> Menu::itemsWithSeparators() const {
@@ -334,6 +285,133 @@ void Menu::openAt(Widget& owner, const RectF& anchor, Placement placement) {
 	owner.ui()->openPopup(request);
 }
 
+void Menu::onAttached() {
+	Panel::onAttached();
+	// However the menu was opened (openAt, a popup button, a submenu item), as an open popup it shows the current
+	// text, enabled and checked state of its entries and takes the keyboard.
+	if (!ui() || !ui()->isPopupOpen(*this)) return;
+	refresh();
+	takeKeyboard();
+}
+
+void Menu::takeKeyboard() {
+	// An open menu has the keyboard, like a native menu; the previous focus comes back when it closes.
+	Ui* host = ui();
+	if (!host) return;
+	Widget* focused = host->keyboardFocus();
+	if (focused != this) mFocusBeforeOpen = focused;
+	host->setKeyboardFocus(this);
+	// Opened from the keyboard, the first item is current at once; opened by pointer, none is until a key moves.
+	setCurrentItem(nullptr);
+	if (!host->isKeyboardNavigating()) return;
+	const std::optional<size_t> first = ListNavigator::step(navigationItems(), std::nullopt, Key::Down);
+	if (first) setCurrentItem(mItems[*first]);
+}
+
+void Menu::onDetached() {
+	// However the menu closed (an item, Escape, a press outside), the keyboard goes back where it was when it opened,
+	// unless something else took it meanwhile.
+	Ui* host = ui();
+	Widget* restore = mFocusBeforeOpen;
+	mFocusBeforeOpen = nullptr;
+	if (host && host->keyboardFocus() == this && restore && restore->ui() && !isSelfOrAncestorOf(*restore)) {
+		host->setKeyboardFocus(restore);
+	}
+	Panel::onDetached();
+	setCurrentItem(nullptr);
+}
+
+Menu* Menu::parentMenu() const {
+	Widget* owner = ui() ? ui()->popupOwnerOf(*this) : nullptr;
+	for (Widget* current = owner; current; current = current->parent()) {
+		if (auto* menu = dynamic_cast<Menu*>(current)) return menu;
+	}
+	return nullptr;
+}
+
+MenuItem* Menu::currentItem() const { return mCurrent && *mCurrent < mItems.size() ? mItems[*mCurrent] : nullptr; }
+
+void Menu::setCurrentItem(MenuItem* item) {
+	std::optional<size_t> next;
+	for (size_t index = 0; index < mItems.size(); index++) {
+		if (mItems[index] == item) next = index;
+	}
+	if (next == mCurrent) return;
+	if (MenuItem* previous = currentItem()) previous->setHighlighted(false);
+	mCurrent = next;
+	if (MenuItem* current = currentItem()) {
+		current->setHighlighted(true);
+		const RectF rect = current->rect();
+		mScroll.revealRange(rect.pos.y, rect.size.y);
+	}
+}
+
+ListNavigator::Items Menu::navigationItems() const {
+	ListNavigator::Items items;
+	items.count = mItems.size();
+	items.isAvailable = [this](size_t index) { return mItems[index]->isEffectivelyEnabled(); };
+	items.text = [this](size_t index) { return mItems[index]->title(); };
+	return items;
+}
+
+bool Menu::handleKey(Event& event) {
+	if (event.type() == Event::Type::TextInput) {
+		const halnf now = ui() ? ui()->clockMs() : 0;
+		const std::optional<size_t> found = mNavigator.typeAhead(navigationItems(), mCurrent, event.text(), now);
+		if (found) setCurrentItem(mItems[*found]);
+		return found.has_value();
+	}
+	if (event.type() != Event::Type::KeyDown) return false;
+	const std::optional<Key> key = event.key();
+	if (!key) return false;
+
+	MenuItem* current = currentItem();
+	switch (*key) {
+		case Key::Enter:
+		case Key::KeypadEnter:
+		case Key::Space:
+			if (current && current->isEffectivelyEnabled()) current->activate();
+			return true;
+		case Key::Right:
+			if (current && current->entry().kind == MenuEntry::Kind::Submenu) {
+				current->openSubmenu();
+				return true;
+			}
+			return false;
+		case Key::Left:
+			// Left closes a submenu and gives the keyboard back to the menu it came from.
+			if (Menu* parent = parentMenu()) {
+				closeMenu();
+				if (parent->ui()) parent->ui()->setKeyboardFocus(parent);
+				return true;
+			}
+			return false;
+		default: break;
+	}
+
+	// Menus wrap at the ends, like native menus.
+	const std::optional<size_t> next = ListNavigator::step(navigationItems(), mCurrent, *key, 10, true);
+	if (!next) return *key == Key::Up || *key == Key::Down;
+	setCurrentItem(mItems[*next]);
+	return true;
+}
+
+void Menu::onEvent(Event& event) {
+	if (handleKey(event)) event.accept();
+}
+
+void Menu::filterDescendantEvent(Event& event) {
+	if ((event.type() == Event::Type::KeyDown || event.type() == Event::Type::TextInput) && handleKey(event)) {
+		event.accept();
+	}
+	// The pointer and the keyboard share one current item: hovering a row makes it current.
+	if (event.type() == Event::Type::PointerMove) {
+		for (const auto& item : mItems) {
+			if (item->isSelfOrAncestorOf(*event.target()) && item->isEffectivelyEnabled()) setCurrentItem(item);
+		}
+	}
+}
+
 void Menu::closeMenu() {
 	if (ui()) ui()->closePopup(*this);
 }
@@ -348,6 +426,8 @@ namespace {
 	constexpr halnf kCenterMargin = 3;
 }
 
+// A row whose titles give way to the overflow button when the bar is too narrow (RowLayout overflow), plus an optional
+// center widget kept in the middle of the bar, over the drag space.
 class MenuBar::MenuBarLayout : public RowLayout {
 public:
 	explicit MenuBarLayout(MenuBar& bar) :
@@ -363,25 +443,26 @@ protected:
 		if (axis == Axis::Vertical) {
 			center.minimum += kCenterMargin * 2;
 			center.preferred += kCenterMargin * 2;
-		}
-		if (axis == Axis::Vertical)
 			return {
 				std::max(row.minimum, center.minimum), std::max(row.preferred, center.preferred), row.maximum, row.grow
 			};
+		}
 		return { row.minimum + center.minimum, row.preferred + center.preferred, row.maximum, row.grow };
 	}
 
 	void arrangeChildren(LayoutContext& context, const RectF& contentArea) override {
-		mBar.showTitles(fittingTitles(context, contentArea));
 		if (!mBar.mCenter) {
 			RowLayout::arrangeChildren(context, contentArea);
 			return;
 		}
+		// Note: the center's minimum width is held back from the row, so titles overflow before they cover it.
+		const halnf reserved = context.measure(*mBar.mCenter, Axis::Horizontal, contentArea.size.y).minimum + gap();
 		LayoutContext row = context.without(*mBar.mCenter);
-		RowLayout::arrangeChildren(row, contentArea);
+		RowLayout::arrangeChildren(row, makeRect(contentArea.pos, { contentArea.size.x - reserved, contentArea.size.y }));
 		placeCenter(context, contentArea);
 	}
 
+private:
 	void placeCenter(LayoutContext& context, const RectF& area) const {
 		Widget& center = *mBar.mCenter;
 		const RectF space = mBar.mDragSpace.rect();
@@ -393,35 +474,6 @@ protected:
 		context.place(center, makeRect(left, area.pos.y + (area.size.y - height) / 2, width, height));
 	}
 
-private:
-	[[nodiscard]] halnf widthOf(const LayoutContext& context, const Widget& widget, halnf height) const {
-		return context.measure(widget, Axis::Horizontal, height).preferred;
-	}
-
-	[[nodiscard]] size_t fittingTitles(const LayoutContext& context, const RectF& area) const {
-		const halnf height = area.size.y;
-		halnf controls = mBar.mWindowControls.isVisible() ? widthOf(context, mBar.mWindowControls, height) : 0;
-		if (mBar.mTrailing && mBar.mTrailing->isVisible()) controls += widthOf(context, *mBar.mTrailing, height) + gap();
-		halnf total = controls + centerWidth(context, height);
-		for (const auto& title : mBar.mTitles)
-			total += widthOf(context, *title, height) + gap();
-		if (total <= area.size.x) return mBar.mTitles.size();
-
-		halnf used = controls + centerWidth(context, height) + widthOf(context, mBar.mOverflow, height) + gap();
-		size_t count = 0;
-		for (const auto& title : mBar.mTitles) {
-			used += widthOf(context, *title, height) + gap();
-			if (used > area.size.x) break;
-			count++;
-		}
-		return count;
-	}
-
-	[[nodiscard]] halnf centerWidth(const LayoutContext& context, halnf height) const {
-		if (!mBar.mCenter) return 0;
-		return context.measure(*mBar.mCenter, Axis::Horizontal, height).minimum + gap();
-	}
-
 	MenuBar& mBar;
 };
 
@@ -429,7 +481,9 @@ MenuBar::MenuBar() :
 	Panel(Surface::None) {
 	setDebugName("menu bar");
 	setSizing(AxisSizing::fill(), AxisSizing::fit());
-	emplaceLayout<MenuBarLayout>(*this).setPadding(Insets::symmetric(4, 2));
+	MenuBarLayout& layout = emplaceLayout<MenuBarLayout>(*this);
+	layout.setPadding(Insets::symmetric(4, 2));
+	layout.setOnOverflowChanged([this](size_t shown) { titlesOverflowed(shown); });
 
 	mDragSpace.setDebugName("menu bar drag space");
 	mDragSpace.setSizing(AxisSizing::fill(), AxisSizing::fill());
@@ -445,76 +499,49 @@ MenuBar::MenuBar() :
 	addChild(mWindowControls);
 }
 
-void MenuBar::showTitles(size_t count) {
-	if (count == mShownTitles && mOverflow.isVisible() == (count < mTitles.size())) return;
-	mShownTitles = count;
-	for (size_t index = 0; index < mTitles.size(); index++)
-		mTitles[index]->setVisible(index < count);
-	mOverflow.setVisible(count < mTitles.size());
+void MenuBar::titlesOverflowed(size_t shown) {
+	mShownTitles = shown;
 	mOverflowMenu.clear();
-	for (size_t index = count; index < mTitles.size(); index++)
+	for (size_t index = shown; index < mTitles.size(); index++)
 		mOverflowMenu.addSubmenu(mTitles[index]->text(), *mMenus[index]);
 }
 
+void MenuBar::refreshOverflowRun() {
+	// Titles are the first children; the overflow button follows them and is not part of the run.
+	static_cast<RowLayout*>(layout())->setOverflow(0, mTitles.size(), &mOverflow);
+}
+
+bool MenuBar::acceptsDrag(PointerButton button) const {
+	WindowHost* host = ui() ? ui()->windowHost() : nullptr;
+	return button == PointerButton::Left && host && host->canMoveWindow();
+}
+
 void MenuBar::onEvent(Event& event) {
 	WindowHost* host = ui() ? ui()->windowHost() : nullptr;
 	if (!host || !host->canMoveWindow()) return;
 
-	if (mMovePending) {
-		handlePendingMove(event, *host);
-		return;
-	}
-
-	if (event.type() == Event::Type::PointerDown && isDragSurface(event.target())) handleDragSurfacePress(event, *host);
-}
-
-void MenuBar::handleDragSurfacePress(Event& event, WindowHost& host) {
-	if (event.button() == PointerButton::Right) {
-		host.showWindowMenu(event.windowPosition());
+	if (const Dragged* drag = event.drag()) {
+		// The router recognised a drag that started on the bar itself; moving the window takes it from here.
+		if (drag->phase == DragPhase::Started && isDragSurface(event.target())) {
+			if (ui()) ui()->cancelDrag();
+			host->beginWindowMove();
+		}
 		event.accept();
 		return;
 	}
 
-	if (event.button() != PointerButton::Left) return;
-	event.accept();
-
-	if (event.clickCount() == 2) {
-		host.toggleMaximizeWindow();
+	if (event.type() != Event::Type::PointerDown || !isDragSurface(event.target())) return;
+	if (event.button() == PointerButton::Right) {
+		host->showWindowMenu(event.windowPosition());
+		event.accept();
 		return;
 	}
-
-	mMovePending = true;
-	mMovePressPoint = event.windowPosition();
-	ui()->capturePointer(*this);
-}
-
-void MenuBar::handlePendingMove(Event& event, WindowHost& host) {
-	switch (event.type()) {
-		case Event::Type::PointerMove:
-			{
-				const Vec2F offset = event.windowPosition() - mMovePressPoint;
-				if (offset.x * offset.x + offset.y * offset.y < kWindowDragThreshold * kWindowDragThreshold) return;
-
-				cancelPendingMove();
-				host.beginWindowMove();
-				event.accept();
-				return;
-			}
-
-		case Event::Type::PointerUp:
-			cancelPendingMove();
-			event.accept();
-			return;
-
-		default: return;
+	if (event.button() == PointerButton::Left && event.clickCount() == 2) {
+		host->toggleMaximizeWindow();
+		event.accept();
 	}
 }
 
-void MenuBar::cancelPendingMove() {
-	mMovePending = false;
-	if (ui()) ui()->releasePointer(*this);
-}
-
 MenuIconButton::MenuIconButton() {
 	setDebugName("menu icon button");
 	setStyle(Style::Flat);
@@ -523,15 +550,7 @@ MenuIconButton::MenuIconButton() {
 
 void MenuIconButton::paintIcon(Canvas& painter, const RectF& box) {
 	const RGBA color = isHovered() ? theme().palette.text : theme().palette.mutedText;
-	const halnf thickness = 1.6f;
-	const halnf width = box.size.x * 0.8f;
-	const halnf left = box.pos.x + (box.size.x - width) / 2;
-	const halnf spacing = box.size.y * 0.3f;
-	const halnf middle = box.pos.y + box.size.y / 2;
-	for (int row = -1; row <= 1; row++) {
-		const halnf y = middle + halnf(row) * spacing;
-		painter.line(Vec2F(left, y), Vec2F(left + width, y), color, thickness);
-	}
+	paintGlyph(painter, Glyph::Menu, glyphBox(box, std::min(box.size.x, box.size.y) * 0.8f), color, theme());
 }
 
 bool MenuBar::isDragSurface(const Widget* target) const { return target == this || target == &mDragSpace; }
@@ -566,7 +585,7 @@ void MenuBar::removeMenu(Menu& menu) {
 	mMenus.erase(found);
 	mShownTitles = mTitles.size();
 	mOverflowMenu.clear();
-	requestLayout();
+	refreshOverflowRun();
 }
 
 void MenuBar::setTrailingWidget(Widget* widget) {
@@ -578,8 +597,9 @@ void MenuBar::setTrailingWidget(Widget* widget) {
 }
 
 PopupButton& MenuBar::insertMenu(size_t index, std::string title, Menu& menu) {
-	mTitles.insert(mTitles.begin() + (std::ptrdiff_t) index, std::make_unique<PopupButton>(std::move(title)));
-	PopupButton& button = *mTitles[index];
+	// The bar owns its titles; they come first among its children, in menu order.
+	PopupButton& button = emplaceChildAt<PopupButton>(index, std::move(title));
+	mTitles.insert(mTitles.begin() + (std::ptrdiff_t) index, &button);
 
 	button.setStyle(Button::Style::Flat);
 	button.setPopupContent(&menu);
@@ -592,14 +612,14 @@ PopupButton& MenuBar::insertMenu(size_t index, std::string title, Menu& menu) {
 	});
 
 	mMenus.insert(mMenus.begin() + (std::ptrdiff_t) index, &menu);
-	insertChild(index, button);
 	mShownTitles = mTitles.size();
+	refreshOverflowRun();
 	return button;
 }
 
 void MenuBar::onTitleHovered(PopupButton& title) {
 	for (const auto& other : mTitles) {
-		if (other.get() == &title || !other->isPopupOpen()) continue;
+		if (other == &title || !other->isPopupOpen()) continue;
 
 		other->closePopup();
 		title.openPopupFromHover();
@@ -643,7 +663,7 @@ Extent Dropdown::measureContent(Axis axis, halnf crossLength) const {
 		if (width > widest) widest = width;
 	}
 
-	extent.preferred = widest + theme().metrics.controlPadding.total(Axis::Horizontal) + kSubmenuArrowWidth;
+	extent.preferred = widest + theme().metrics.controlPadding.total(Axis::Horizontal) + kDropdownChevronRoom;
 	return extent;
 }
 
@@ -656,15 +676,11 @@ void Dropdown::paint(Canvas& painter) {
 	painter.rect(localRect(), background(), radius);
 	painter.outline(localRect(), border, radius);
 
-	const RectF textBox = makeRect(content.pos, { content.size.x - kSubmenuArrowWidth, content.size.y });
+	const RectF textBox = makeRect(content.pos, Vec2F(content.size.x - kDropdownChevronRoom, content.size.y));
 	painter.text(selectedText(), textBox, TextStyle{ style.metrics.fontSize, style.palette.text, TextAlign::leftCenter() });
 
-	const Vec2F chevron = { content.pos.x + content.size.x - kSubmenuArrowWidth / 2, size().y / 2 + 1.5f };
-	painter.polyline(
-		{ chevron + Vec2F(-4.0f, -2.5f), chevron + Vec2F(0.0f, 1.5f), chevron + Vec2F(4.0f, -2.5f) },
-		style.palette.mutedText,
-		1.5f
-	);
+	const RectF chevronRoom = makeRect(content.pos.x + content.size.x - kDropdownChevronRoom, 0, kDropdownChevronRoom, size().y);
+	paintGlyph(painter, Glyph::ChevronDown, glyphBox(chevronRoom, kDropdownChevronSide), style.palette.mutedText, style);
 }
 
 void Dropdown::onActivated() {
diff --git a/Widgets/src/components/chrome/private/PromptDialog.cpp b/Widgets/src/components/chrome/private/PromptDialog.cpp
new file mode 100644
index 00000000..44fcfb59
--- /dev/null
+++ b/Widgets/src/components/chrome/private/PromptDialog.cpp
@@ -0,0 +1,37 @@
+#include "PromptDialog.hpp"
+
+#include "Ui.hpp"
+
+using namespace tp;
+using namespace tp::ui;
+
+PromptDialog::PromptDialog(std::string title, std::string confirm) :
+	Dialog(std::move(title)) {
+	setDebugName("prompt dialog");
+	mInput.setSizing(AxisSizing::fill(), AxisSizing::fit());
+	// Enter in the field submits it, which confirms; the field also commits on focus loss, but that does not submit,
+	// so a click on Cancel (which commits by focus) does not also confirm.
+	mInput.setOnSubmitted([this](const std::string&) {
+		if (isOpen()) accept();
+	});
+	body().addChild(mInput);
+
+	addButton(
+		std::move(confirm),
+		[this]() {
+			if (mOnConfirm) mOnConfirm(mInput.text());
+		},
+		true
+	);
+	addCancelButton();
+}
+
+void PromptDialog::show(
+	Ui& ui, const std::string& suggestion, std::function<void(const std::string&)> onConfirm, Widget* owner
+) {
+	mOnConfirm = std::move(onConfirm);
+	mInput.setText(suggestion);
+	open(ui, owner);
+	ui.setKeyboardFocus(&mInput);
+	mInput.selectAll();
+}
diff --git a/Widgets/src/components/chrome/private/WindowControls.cpp b/Widgets/src/components/chrome/private/WindowControls.cpp
index 81642655..e81905f1 100644
--- a/Widgets/src/components/chrome/private/WindowControls.cpp
+++ b/Widgets/src/components/chrome/private/WindowControls.cpp
@@ -1,5 +1,4 @@
 #include "WindowControls.hpp"
-#include "Canvas.hpp"
 #include "ComponentSizes.hpp"
 
 #include "BoxLayout.hpp"
@@ -11,13 +10,8 @@ using namespace tp;
 using namespace tp::ui;
 
 namespace {
-	constexpr halnf kGlyphHalfSize = 4.5f;
-	constexpr halnf kGlyphThickness = 1.2f;
-	constexpr halnf kRestoreOffset = 2;
 	constexpr halnf kControlsGap = 2;
 
-	RGBA withAlpha(const RGBA& color, halnf alpha) { return { color.r, color.g, color.b, alpha }; }
-
 	const char* debugNameOf(WindowButton::Kind kind) {
 		switch (kind) {
 			case WindowButton::Kind::Minimize: return "minimize button";
@@ -26,80 +20,44 @@ namespace {
 		}
 		return "window button";
 	}
+
+	Glyph glyphOf(WindowButton::Kind kind) {
+		switch (kind) {
+			case WindowButton::Kind::Minimize: return Glyph::Minus;
+			case WindowButton::Kind::Maximize: return Glyph::Maximize;
+			case WindowButton::Kind::Close: return Glyph::Close;
+		}
+		return Glyph::Close;
+	}
 }
 
 WindowButton::WindowButton(Kind kind) :
+	GlyphButton(glyphOf(kind)),
 	mKind(kind) {
-	setStyle(Style::Flat);
 	setDebugName(debugNameOf(kind));
 }
 
 Extent WindowButton::measureContent(Axis axis, halnf) const {
-	const Theme& style = theme();
 	return Extent::rigid(axis == Axis::Horizontal ? sizes::windowButtonWidth : sizes::iconButtonSize);
 }
 
-RGBA WindowButton::backgroundTarget() const {
+GlyphButton::GlyphColors WindowButton::interactionColors() const {
 	const Palette& palette = theme().palette;
+	if (mKind != Kind::Close) return GlyphButton::interactionColors();
 
-	if (mKind == Kind::Close) {
-		if (isPressed()) return palette.windowClosePressed;
-		if (isHovered()) return palette.windowCloseHovered;
-		return withAlpha(palette.windowCloseHovered, 0);
-	}
-
-	if (isPressed()) return palette.controlPressed;
-	if (isHovered()) return palette.controlHovered;
-	return withAlpha(palette.controlHovered, 0);
+	return { InteractionColors::highlight(palette.windowCloseHovered, palette.windowClosePressed),
+					 palette.mutedText,
+					 palette.onWindowClose };
 }
 
-void WindowButton::paint(Canvas& painter) {
-	const Theme& style = theme();
-	const bool closeHighlighted = mKind == Kind::Close && (isHovered() || isPressed());
-	const RGBA glyph = closeHighlighted ? style.palette.onWindowClose
-										 : isHovered()    ? style.palette.text
-																			: style.palette.mutedText;
-
-	painter.rect(localRect(), background(), style.metrics.cornerRadius);
-	paintGlyph(painter, localRect().center(), glyph);
+bool WindowButton::isWindowMaximized() const {
+	const WindowHost* host = ui() ? ui()->windowHost() : nullptr;
+	return host && host->isWindowMaximized();
 }
 
-void WindowButton::paintGlyph(Canvas& painter, Vec2F center, const RGBA& color) const {
-	const Vec2F half = { kGlyphHalfSize, kGlyphHalfSize };
-
-	switch (mKind) {
-		case Kind::Minimize:
-			painter.line(center + Vec2F(-kGlyphHalfSize, 0.0f), center + Vec2F(kGlyphHalfSize, 0.0f), color, kGlyphThickness);
-			return;
-
-		case Kind::Maximize:
-			{
-				const WindowHost* host = ui() ? ui()->windowHost() : nullptr;
-				const bool maximized = host && host->isWindowMaximized();
-				const RectF box = makeRect(center - half, half * 2.0f);
-
-				if (!maximized) {
-					painter.outline(box, color, 2, kGlyphThickness);
-					return;
-				}
-
-				const Vec2F shift = { kRestoreOffset, -kRestoreOffset };
-				painter.outline(translated(insetRect(box, 1), shift), color, 2, kGlyphThickness);
-				painter.rect(insetRect(box, 1), background(), 2);
-				painter.outline(insetRect(box, 1), color, 2, kGlyphThickness);
-				return;
-			}
-
-		case Kind::Close:
-			painter.line(center - half, center + half, color, kGlyphThickness);
-			painter.line(
-				center + Vec2F(-kGlyphHalfSize, kGlyphHalfSize),
-				center + Vec2F(kGlyphHalfSize, -kGlyphHalfSize),
-				color,
-				kGlyphThickness
-			);
-			return;
-	}
+Glyph WindowButton::displayedGlyph() const {
+	if (mKind == Kind::Maximize && isWindowMaximized()) return Glyph::Restore;
+	return GlyphButton::displayedGlyph();
 }
 
 void WindowButton::onActivated() {
diff --git a/Widgets/src/components/chrome/public/Dialog.hpp b/Widgets/src/components/chrome/public/Dialog.hpp
index ff505889..95b4a1f3 100644
--- a/Widgets/src/components/chrome/public/Dialog.hpp
+++ b/Widgets/src/components/chrome/public/Dialog.hpp
@@ -3,6 +3,7 @@
 #include "Button.hpp"
 #include "Containers.hpp"
 #include "Label.hpp"
+#include "TitledPanel.hpp"
 
 #include <functional>
 #include <memory>
@@ -11,21 +12,18 @@
 
 namespace tp::ui {
 
-	class Dialog : public Panel {
+	// A modal titled panel: a wrapping title, an optional message, a body for any content, and buttons in the footer.
+	class Dialog : public TitledPanel {
 	public:
 		explicit Dialog(std::string title = {});
 		~Dialog() override;
 
-		void setTitle(std::string title);
 		void setMessage(std::string message);
-		[[nodiscard]] const std::string& title() const { return mTitle.text(); }
 		[[nodiscard]] const std::string& message() const { return mMessage.text(); }
 
-		[[nodiscard]] Widget& body() { return mBody; }
-
 		Button& addButton(std::string text, std::function<void()> action, bool isDefault = false);
 		Button& addCancelButton(std::string text = "Cancel");
-		[[nodiscard]] const std::vector<std::unique_ptr<Button>>& buttons() const { return mButtons; }
+		[[nodiscard]] const std::vector<Button*>& buttons() const { return mButtons; }
 		void setOnCancel(std::function<void()> onCancel) { mOnCancel = std::move(onCancel); }
 
 		void open(Ui& ui, Widget* owner = nullptr);
@@ -39,12 +37,9 @@ namespace tp::ui {
 		void onEvent(Event& event) override;
 
 	private:
-		Label mTitle;
 		Label mMessage;
-		Widget mBody;
-		Widget mButtonRow;
-		Spacer mButtonSpacer;
-		std::vector<std::unique_ptr<Button>> mButtons;
+		// The buttons in order; the button row owns them.
+		std::vector<Button*> mButtons;
 		Button* mDefault = nullptr;
 		std::function<void()> mOnCancel;
 	};
diff --git a/Widgets/src/components/chrome/public/Menus.hpp b/Widgets/src/components/chrome/public/Menus.hpp
index 53b2300d..9e9a8b7a 100644
--- a/Widgets/src/components/chrome/public/Menus.hpp
+++ b/Widgets/src/components/chrome/public/Menus.hpp
@@ -1,12 +1,16 @@
 #pragma once
 
 #include "Button.hpp"
+#include "Commands.hpp"
+#include "ListNavigator.hpp"
+#include "ListRow.hpp"
 #include "WindowControls.hpp"
 #include "Containers.hpp"
 #include "Popup.hpp"
 
 #include <functional>
 #include <memory>
+#include <optional>
 #include <string>
 #include <vector>
 
@@ -65,34 +69,47 @@ namespace tp::ui {
 		Menu* submenu = nullptr;
 
 		static MenuEntry item(std::string text, std::function<void()> action, std::string shortcut = {});
+		// An entry that shows and runs a command: its label, shortcut text, enabled and checked state come from the
+		// registry each time the menu opens, so the menu never keeps its own copy. A checkable command becomes a toggle.
+		template <typename Id>
+		static MenuEntry command(Commands<Id>& commands, Id id) {
+			MenuEntry entry;
+			entry.kind = commands.isCheckable(id) ? Kind::Toggle : Kind::Action;
+			entry.text = commands.label(id);
+			entry.shortcut = commands.shortcutText(id);
+			entry.action = [&commands, id]() { commands.run(id); };
+			entry.isEnabled = [&commands, id]() { return commands.isEnabled(id); };
+			if (commands.isCheckable(id)) entry.isChecked = [&commands, id]() { return commands.isChecked(id); };
+			entry.dynamicText = [&commands, id]() { return commands.label(id); };
+			return entry;
+		}
 		static MenuEntry toggle(std::string text, std::function<bool()> isChecked, std::function<void()> action);
 		static MenuEntry separator();
 		static MenuEntry nested(std::string text, Menu& menu);
 	};
 
-	class MenuItem : public Control {
+	// One entry of a menu shown as a compact list row: the check or icon leads, the shortcut or submenu chevron trails.
+	class MenuItem : public ListRow {
 	public:
 		MenuItem(Menu& menu, MenuEntry entry);
 
 		[[nodiscard]] const MenuEntry& entry() const { return mEntry; }
-		[[nodiscard]] const std::string& text() const { return mText; }
+		[[nodiscard]] const std::string& text() const { return title(); }
 
+		// Reads the entry's dynamic text, enabled and checked state again.
 		void refresh();
+		void openSubmenu();
 
 	protected:
-		[[nodiscard]] Extent measureContent(Axis axis, halnf crossLength) const override;
-		void paint(Canvas& painter) override;
 		void onActivated() override;
 		void onHoverChanged() override;
 		[[nodiscard]] RGBA backgroundTarget() const override;
 
 	private:
-		void openSubmenu();
 		[[nodiscard]] Placement submenuSide(const RectF& menuRect) const;
 
 		Menu& mMenu;
 		MenuEntry mEntry;
-		std::string mText;
 	};
 
 	class Menu : public Panel {
@@ -107,7 +124,7 @@ namespace tp::ui {
 		MenuItem& addSubmenu(std::string text, Menu& submenu);
 		void clear();
 
-		[[nodiscard]] const std::vector<std::unique_ptr<MenuItem>>& items() const { return mItems; }
+		[[nodiscard]] const std::vector<MenuItem*>& items() const { return mItems; }
 		[[nodiscard]] std::vector<const MenuItem*> itemsWithSeparators() const;
 		void notifyItemActivated() const {
 			if (mOnItemActivated) mOnItemActivated();
@@ -121,17 +138,36 @@ namespace tp::ui {
 		void closeMenu();
 		[[nodiscard]] bool isOpen() const;
 
+		// The keyboard-current item (Up/Down, Home/End, typing a title), or none.
+		[[nodiscard]] MenuItem* currentItem() const;
+		void setCurrentItem(MenuItem* item);
+
+	protected:
+		[[nodiscard]] bool acceptsKeyboardFocus() const override { return true; }
+		void onEvent(Event& event) override;
+		void filterDescendantEvent(Event& event) override;
+		void onAttached() override;
+		void onDetached() override;
+
 	private:
 		friend class MenuItem;
 
 		void closeChain();
+		bool handleKey(Event& event);
+		[[nodiscard]] ListNavigator::Items navigationItems() const;
+		void takeKeyboard();
+		[[nodiscard]] Menu* parentMenu() const;
 
 		ScrollView mScroll;
 		Widget mColumn;
-		std::vector<std::unique_ptr<MenuItem>> mItems;
-		std::vector<std::unique_ptr<Separator>> mSeparators;
+		// The items in order; the column owns them and the separators between them.
+		std::vector<MenuItem*> mItems;
 		std::function<void()> mOnItemActivated;
 		std::function<void(Menu&)> mOnOpen;
+		ListNavigator mNavigator;
+		std::optional<size_t> mCurrent;
+		// The widget that had the keyboard before the menu took it, given back when the menu closes.
+		Widget* mFocusBeforeOpen = nullptr;
 	};
 
 	class MenuIconButton : public PopupButton {
@@ -154,7 +190,7 @@ namespace tp::ui {
 		void setTrailingWidget(Widget* widget);
 		[[nodiscard]] Widget* trailingWidget() const { return mTrailing; }
 		[[nodiscard]] Widget* centerWidget() const { return mCenter; }
-		[[nodiscard]] const std::vector<std::unique_ptr<PopupButton>>& titles() const { return mTitles; }
+		[[nodiscard]] const std::vector<PopupButton*>& titles() const { return mTitles; }
 		[[nodiscard]] WindowControls& windowControls() { return mWindowControls; }
 		[[nodiscard]] PopupButton& overflowButton() { return mOverflow; }
 		[[nodiscard]] Menu& overflowMenu() { return mOverflowMenu; }
@@ -162,22 +198,20 @@ namespace tp::ui {
 
 	protected:
 		void onEvent(Event& event) override;
+		[[nodiscard]] bool acceptsDrag(PointerButton button) const override;
 
 	private:
 		class MenuBarLayout;
 		friend class MenuBarLayout;
 
 		PopupButton& insertMenu(size_t index, std::string title, Menu& menu);
-		void showTitles(size_t count);
+		void titlesOverflowed(size_t shown);
+		void refreshOverflowRun();
 		void onTitleHovered(PopupButton& title);
 		[[nodiscard]] bool isDragSurface(const Widget* target) const;
-		void handleDragSurfacePress(Event& event, WindowHost& host);
-		void handlePendingMove(Event& event, WindowHost& host);
-		void cancelPendingMove();
 
-		std::vector<std::unique_ptr<PopupButton>> mTitles;
-		bool mMovePending = false;
-		Vec2F mMovePressPoint = { 0, 0 };
+		// The menu titles in order; the bar owns them.
+		std::vector<PopupButton*> mTitles;
 		Spacer mDragSpace;
 		Widget* mCenter = nullptr;
 		Widget* mTrailing = nullptr;
diff --git a/Widgets/src/components/chrome/public/PromptDialog.hpp b/Widgets/src/components/chrome/public/PromptDialog.hpp
new file mode 100644
index 00000000..f0b1d409
--- /dev/null
+++ b/Widgets/src/components/chrome/public/PromptDialog.hpp
@@ -0,0 +1,31 @@
+#pragma once
+
+#include "Dialog.hpp"
+#include "TextField.hpp"
+
+#include <functional>
+#include <string>
+
+namespace tp::ui {
+
+	// A dialog that asks for one line of text: rename a layer, save a sketch, name a skill. The field is focused and
+	// selected when the dialog opens, Enter confirms, Escape cancels, and the confirm button calls the callback with the
+	// text. Callers that validate the text (non-empty, no separators) keep their own check outside.
+	//   PromptDialog prompt{ "Rename layer", "Rename" };
+	//   prompt.input().setMaximumLength(24);
+	//   prompt.show(ui, "Layer 1", [&](const std::string& name) { rename(name); });
+	class PromptDialog : public Dialog {
+	public:
+		explicit PromptDialog(std::string title = {}, std::string confirm = "OK");
+
+		[[nodiscard]] TextField& input() { return mInput; }
+
+		// Fills the field with the suggestion, focuses and selects it, then opens. confirm receives the text the user
+		// confirmed (an empty string when they cancelled, since no callback runs then).
+		void show(Ui& ui, const std::string& suggestion, std::function<void(const std::string&)> onConfirm, Widget* owner = nullptr);
+
+	private:
+		TextField mInput;
+		std::function<void(const std::string&)> mOnConfirm;
+	};
+}
diff --git a/Widgets/src/components/chrome/public/WindowControls.hpp b/Widgets/src/components/chrome/public/WindowControls.hpp
index cf1ffab0..7d742169 100644
--- a/Widgets/src/components/chrome/public/WindowControls.hpp
+++ b/Widgets/src/components/chrome/public/WindowControls.hpp
@@ -5,7 +5,8 @@
 
 namespace tp::ui {
 
-	class WindowButton : public Button {
+	// A title-bar button that minimizes, maximizes or closes the window of the Ui it is shown in.
+	class WindowButton : public GlyphButton {
 	public:
 		enum class Kind { Minimize, Maximize, Close };
 
@@ -15,12 +16,12 @@ namespace tp::ui {
 
 	protected:
 		[[nodiscard]] Extent measureContent(Axis axis, halnf crossLength) const override;
-		void paint(Canvas& painter) override;
-		[[nodiscard]] RGBA backgroundTarget() const override;
+		[[nodiscard]] GlyphColors interactionColors() const override;
+		[[nodiscard]] Glyph displayedGlyph() const override;
 		void onActivated() override;
 
 	private:
-		void paintGlyph(Canvas& painter, Vec2F center, const RGBA& color) const;
+		[[nodiscard]] bool isWindowMaximized() const;
 
 		Kind mKind;
 	};
diff --git a/Widgets/src/components/chrome/tests/MenuTests.cpp b/Widgets/src/components/chrome/tests/MenuTests.cpp
index 06f4fa82..a0e628b4 100644
--- a/Widgets/src/components/chrome/tests/MenuTests.cpp
+++ b/Widgets/src/components/chrome/tests/MenuTests.cpp
@@ -19,7 +19,7 @@ using namespace tp::ui::testing;
 namespace {
 	MenuItem* findItem(Menu& menu, const std::string& text) {
 		for (const auto& item : menu.items()) {
-			if (item->entry().text == text) return item.get();
+			if (item->entry().text == text) return item;
 		}
 		return nullptr;
 	}
@@ -49,7 +49,6 @@ SUITE(PopupButtonWidget) {
 		UiDriver driver(root, { 300, 200 });
 		driver.recording().addImageFile("icon.png", { 16, 16 });
 		entry.icon = driver.ui().canvas()->createImageFromFile("icon.png");
-		std::printf("icon valid=%d\n", entry.icon.isValid());
 		MenuItem& withIcon = menu.add(std::move(entry));
 		menu.addItem("Plain", {});
 
@@ -59,7 +58,6 @@ SUITE(PopupButtonWidget) {
 				images++;
 				CHECK(command.rect.pos.x < withIcon.windowRect().pos.x + withIcon.windowRect().size.x / 3);
 			}
-		fprintf(stderr, "images=%d total=%zu\n", images, driver.paint().commands().size());
 		CHECK_EQUAL(1, images);
 	}
 
@@ -618,3 +616,168 @@ SUITE(MenuRefresh) {
 		CHECK_EQUAL(5u, history.items().size());
 	}
 }
+
+SUITE(MenuKeyboard) {
+	struct Scene {
+		Widget root;
+		PopupButton file{ "File" };
+		Menu menu;
+		Menu recent;
+		std::vector<std::string> ran;
+
+		Scene() {
+			root.emplaceLayout<ColumnLayout>().setCrossAlign(CrossAlign::Start);
+			menu.addItem("New", [this]() { ran.push_back("New"); });
+			menu.addItem("Open", [this]() { ran.push_back("Open"); });
+			MenuItem& disabled = menu.addItem("Revert", [this]() { ran.push_back("Revert"); });
+			disabled.setEnabled(false);
+			menu.addSeparator();
+			menu.addSubmenu("Recent", recent);
+			recent.addItem("one.txt", [this]() { ran.push_back("one.txt"); });
+			recent.addItem("two.txt", [this]() { ran.push_back("two.txt"); });
+			file.setPopupContent(&menu);
+			root.addChild(file);
+		}
+	};
+
+	TEST(ArrowsMoveThroughEnabledItemsAndEnterRunsOne) {
+		Scene scene;
+		UiDriver driver(scene.root, { 600, 400 });
+		driver.click(scene.file);
+		REQUIRE CHECK(scene.menu.isOpen());
+		CHECK(driver.ui().keyboardFocus() == &scene.menu);
+
+		driver.key(Key::Down);
+		CHECK(scene.menu.currentItem() == findItem(scene.menu, "New"));
+		driver.key(Key::Down);
+		driver.key(Key::Down);
+		// "Revert" is disabled and the separator is not an item, so Down lands on "Recent".
+		CHECK(scene.menu.currentItem() == findItem(scene.menu, "Recent"));
+		driver.key(Key::Down);
+		CHECK(scene.menu.currentItem() == findItem(scene.menu, "New"));
+
+		driver.key(Key::Down);
+		driver.key(Key::Enter);
+		CHECK((scene.ran == std::vector<std::string>{ "Open" }));
+		CHECK(!scene.menu.isOpen());
+	}
+
+	TEST(RightOpensASubmenuAndLeftComesBack) {
+		Scene scene;
+		UiDriver driver(scene.root, { 600, 400 });
+		driver.click(scene.file);
+		driver.key(Key::End);
+		CHECK(scene.menu.currentItem() == findItem(scene.menu, "Recent"));
+
+		// Opened from the keyboard, the submenu starts on its first item.
+		driver.key(Key::Right);
+		REQUIRE CHECK(scene.recent.isOpen());
+		CHECK(driver.ui().keyboardFocus() == &scene.recent);
+		CHECK(scene.recent.currentItem() == findItem(scene.recent, "one.txt"));
+
+		driver.key(Key::Left);
+		CHECK(!scene.recent.isOpen());
+		CHECK(scene.menu.isOpen());
+		CHECK(driver.ui().keyboardFocus() == &scene.menu);
+
+		driver.key(Key::Right);
+		driver.key(Key::Down);
+		driver.key(Key::Enter);
+		CHECK((scene.ran == std::vector<std::string>{ "two.txt" }));
+		CHECK(!scene.menu.isOpen());
+	}
+
+	TEST(TypingATitleMakesItCurrent) {
+		Scene scene;
+		UiDriver driver(scene.root, { 600, 400 });
+		driver.click(scene.file);
+
+		driver.type("o");
+		CHECK(scene.menu.currentItem() == findItem(scene.menu, "Open"));
+	}
+
+	TEST(HoverAndKeyboardShareTheCurrentItem) {
+		Scene scene;
+		UiDriver driver(scene.root, { 600, 400 });
+		driver.click(scene.file);
+
+		driver.moveTo(findItem(scene.menu, "Open")->windowRect().center());
+		CHECK(scene.menu.currentItem() == findItem(scene.menu, "Open"));
+		driver.key(Key::Up);
+		CHECK(scene.menu.currentItem() == findItem(scene.menu, "New"));
+	}
+
+	TEST(ClosingGivesTheKeyboardBack) {
+		Scene scene;
+		TextField field;
+		scene.root.addChild(field);
+		UiDriver driver(scene.root, { 600, 400 });
+		driver.click(field);
+		REQUIRE CHECK(driver.ui().keyboardFocus() == &field);
+
+		scene.menu.openAt(scene.file, scene.file.windowRect(), Placement::Below);
+		CHECK(driver.ui().keyboardFocus() == &scene.menu);
+		driver.key(Key::Escape);
+		CHECK(!scene.menu.isOpen());
+		CHECK(driver.ui().keyboardFocus() == &field);
+	}
+
+	TEST(DropdownOptionsArePickedWithTheKeyboard) {
+		Widget root;
+		root.emplaceLayout<ColumnLayout>().setCrossAlign(CrossAlign::Start);
+		Dropdown dropdown{ { "Normal", "Multiply", "Screen" } };
+		root.addChild(dropdown);
+		UiDriver driver(root, { 600, 400 });
+
+		driver.click(dropdown);
+		driver.key(Key::Down);
+		driver.key(Key::Down);
+		driver.key(Key::Down);
+		driver.key(Key::Enter);
+
+		CHECK_EQUAL(2, dropdown.selectedIndex());
+		CHECK(!dropdown.isPopupOpen());
+	}
+}
+
+SUITE(MenuCommands) {
+	enum class Edit { Undo, Grid };
+
+	TEST(CommandEntriesReadTheRegistryEachTimeTheMenuOpens) {
+		Widget root;
+		root.emplaceLayout<ColumnLayout>().setCrossAlign(CrossAlign::Start);
+		PopupButton title{ "Edit" };
+		Menu menu;
+		Commands<Edit> commands;
+		int undone = 0;
+		bool canUndo = false;
+		bool grid = false;
+		commands.define(Edit::Undo, { "Undo", [&undone]() { undone++; }, [&canUndo]() { return canUndo; }, {} });
+		commands.define(Edit::Grid, { "Show Grid", [&grid]() { grid = !grid; }, {}, [&grid]() { return grid; } });
+		commands.shortcuts().bind(ctrl(Key::Z), Edit::Undo);
+		menu.add(MenuEntry::command(commands, Edit::Undo));
+		menu.add(MenuEntry::command(commands, Edit::Grid));
+		title.setPopupContent(&menu);
+		root.addChild(title);
+		UiDriver driver(root, { 600, 400 });
+
+		driver.click(title);
+		MenuItem& undo = *findItem(menu, "Undo");
+		CHECK(!undo.isEffectivelyEnabled());
+		CHECK(driver.paint().hasText(commands.shortcutText(Edit::Undo)));
+		driver.key(Key::Escape);
+
+		canUndo = true;
+		driver.click(title);
+		CHECK(undo.isEffectivelyEnabled());
+		driver.click(undo);
+		CHECK_EQUAL(1, undone);
+
+		driver.click(title);
+		CHECK(findItem(menu, "Show Grid")->entry().kind == MenuEntry::Kind::Toggle);
+		driver.click(*findItem(menu, "Show Grid"));
+		CHECK(grid);
+		driver.click(title);
+		CHECK(findItem(menu, "Show Grid")->leading().kind == ListRow::Leading::Kind::Check);
+	}
+}
diff --git a/Widgets/src/components/chrome/tests/PromptDialogTests.cpp b/Widgets/src/components/chrome/tests/PromptDialogTests.cpp
new file mode 100644
index 00000000..8e4ffccd
--- /dev/null
+++ b/Widgets/src/components/chrome/tests/PromptDialogTests.cpp
@@ -0,0 +1,72 @@
+#include "PromptDialog.hpp"
+#include "Ui.hpp"
+#include "BoxLayout.hpp"
+#include "UiDriver.hpp"
+
+#include "UnitTest++/UnitTest++.h"
+
+using namespace tp;
+using namespace tp::ui;
+using namespace tp::ui::testing;
+
+namespace {
+	struct Scene {
+		Widget root;
+		Button open{ "Rename" };
+		PromptDialog prompt{ "Rename layer", "Rename" };
+		std::string confirmed;
+
+		Scene() {
+			root.emplaceLayout<ColumnLayout>().setCrossAlign(CrossAlign::Start);
+			open.setOnActivate([this] {
+				if (open.ui()) prompt.show(*open.ui(), "Layer 1", [this](const std::string& name) { confirmed = name; });
+			});
+			root.addChild(open);
+		}
+	};
+}
+
+SUITE(PromptDialog) {
+	TEST(OpensFocusedAndSelectedWithTheSuggestion) {
+		Scene scene;
+		UiDriver driver(scene.root, { 400, 300 });
+		driver.click(scene.open);
+
+		REQUIRE CHECK(scene.prompt.isOpen());
+		CHECK(driver.ui().keyboardFocus() == &scene.prompt.input());
+		CHECK_EQUAL("Layer 1", scene.prompt.input().text());
+
+		// The suggestion is selected, so typing replaces it whole rather than appending.
+		driver.type("x");
+		CHECK_EQUAL("x", scene.prompt.input().text());
+		driver.key(Key::Escape);
+		CHECK(!scene.prompt.isOpen());
+	}
+
+	TEST(EnterConfirmsWithTheText) {
+		Scene scene;
+		UiDriver driver(scene.root, { 400, 300 });
+		driver.click(scene.open);
+		driver.type("Background");
+		driver.key(Key::Enter);
+
+		CHECK_EQUAL("Background", scene.confirmed);
+		CHECK(!scene.prompt.isOpen());
+	}
+
+	TEST(ConfirmButtonRunsTheCallbackAndCancelDoesNot) {
+		Scene scene;
+		UiDriver driver(scene.root, { 400, 300 });
+		driver.click(scene.open);
+		driver.type("Ink");
+		driver.click(*scene.prompt.buttons().front());
+		CHECK_EQUAL("Ink", scene.confirmed);
+		CHECK(!scene.prompt.isOpen());
+
+		driver.click(scene.open);
+		driver.type("Tossed");
+		driver.click(*scene.prompt.buttons().back());
+		CHECK(!scene.prompt.isOpen());
+		CHECK_EQUAL("Ink", scene.confirmed);
+	}
+}
diff --git a/Widgets/src/components/chrome/tests/WindowChromeTests.cpp b/Widgets/src/components/chrome/tests/WindowChromeTests.cpp
index 21b137ed..70810a2d 100644
--- a/Widgets/src/components/chrome/tests/WindowChromeTests.cpp
+++ b/Widgets/src/components/chrome/tests/WindowChromeTests.cpp
@@ -59,6 +59,51 @@ namespace {
 }
 
 SUITE(WindowControlButtons) {
+	TEST(ButtonsDrawTheCoreGlyphs) {
+		HostedChrome chrome;
+		WindowControls& controls = chrome.scene.bar.windowControls();
+
+		CHECK(controls.minimizeButton().glyph() == Glyph::Minus);
+		CHECK(controls.maximizeButton().glyph() == Glyph::Maximize);
+		CHECK(controls.closeButton().glyph() == Glyph::Close);
+	}
+
+	TEST(MaximizeButtonShowsRestoreWhileTheWindowIsMaximized) {
+		HostedChrome chrome;
+		WindowButton& maximize = chrome.scene.bar.windowControls().maximizeButton();
+		const auto outlines = [&chrome]() {
+			size_t count = 0;
+			for (const CanvasCommand& command : chrome.driver.paint().commands()) {
+				count += command.kind == CanvasCommand::Kind::Outline ? 1 : 0;
+			}
+			return count;
+		};
+		const size_t windowed = outlines();
+
+		chrome.driver.click(maximize);
+		REQUIRE CHECK(chrome.scene.host.maximized);
+
+		bool drewRestoreFrame = false;
+		for (const CanvasCommand& command : chrome.driver.paint().commands()) {
+			drewRestoreFrame |= command.kind == CanvasCommand::Kind::Polyline && command.points.size() == 5;
+		}
+		CHECK(drewRestoreFrame);
+		CHECK_EQUAL(windowed, outlines());
+	}
+
+	TEST(CloseButtonFadesToTheWindowCloseColorOnHover) {
+		HostedChrome chrome;
+		WindowButton& close = chrome.scene.bar.windowControls().closeButton();
+		const RGBA hovered = chrome.driver.ui().theme().palette.windowCloseHovered;
+
+		CHECK_CLOSE(0, close.visual().color().a, 0.01f);
+		chrome.driver.moveTo(close);
+		chrome.driver.settle();
+
+		CHECK_CLOSE(hovered.r, close.visual().color().r, 0.01f);
+		CHECK_CLOSE(1, close.visual().reveal(), 0.01f);
+	}
+
 	TEST(ControlsStayHiddenWithoutWindowHost) {
 		ChromeScene scene;
 		UiDriver driver(scene.root);
diff --git a/Widgets/src/components/controls/private/Breadcrumb.cpp b/Widgets/src/components/controls/private/Breadcrumb.cpp
index 70c00746..06dd7689 100644
--- a/Widgets/src/components/controls/private/Breadcrumb.cpp
+++ b/Widgets/src/components/controls/private/Breadcrumb.cpp
@@ -37,24 +37,19 @@ Breadcrumb::Breadcrumb() {
 }
 
 void Breadcrumb::setParts(const std::vector<std::string>& parts) {
-	mRow.removeAllChildren();
+	// The row owns its parts and separators, so clearing it destroys them.
+	mRow.clearOwnedChildren();
 	mParts.clear();
-	mSeparators.clear();
 
 	for (size_t index = 0; index < parts.size(); index++) {
-		if (index > 0) {
-			mSeparators.push_back(std::make_unique<Label>(kSeparator));
-			mSeparators.back()->setTone(Label::Tone::Muted);
-			mRow.addChild(*mSeparators.back());
-		}
+		if (index > 0) mRow.emplaceChild<Label>(kSeparator).setTone(Label::Tone::Muted);
 
 		const bool current = index + 1 == parts.size();
-		mParts.push_back(std::make_unique<BreadcrumbPart>(parts[index], current));
-		BreadcrumbPart& part = *mParts.back();
+		BreadcrumbPart& part = mRow.emplaceChild<BreadcrumbPart>(parts[index], current);
+		mParts.push_back(&part);
 		part.setOnActivate([this, index]() {
 			if (mOnPartChosen) mOnPartChosen(index);
 		});
-		mRow.addChild(part);
 	}
 	requestLayout();
 }
diff --git a/Widgets/src/components/controls/private/Button.cpp b/Widgets/src/components/controls/private/Button.cpp
index 83ff1ac0..d4a7ef0f 100644
--- a/Widgets/src/components/controls/private/Button.cpp
+++ b/Widgets/src/components/controls/private/Button.cpp
@@ -163,72 +163,51 @@ halnf Button::labelFontSize() const {
 }
 
 namespace {
-	constexpr halnf kChevronHalfHeight = 5;
-	constexpr halnf kChevronDepth = 3;
-	constexpr halnf kGlyphStroke = 1.5f;
-
-	const char* glyphDebugName(GlyphButton::Glyph glyph) {
-		switch (glyph) {
-			case GlyphButton::Glyph::Options: return "options button";
-			case GlyphButton::Glyph::Hide: return "hide button";
-			case GlyphButton::Glyph::Previous: return "previous button";
-			case GlyphButton::Glyph::Next: return "next button";
-			case GlyphButton::Glyph::Up: return "up button";
-		}
-		return "glyph button";
-	}
+	constexpr halnf kGlyphSide = 10;
 }
 
 GlyphButton::GlyphButton(Glyph glyph) :
 	mGlyph(glyph) {
 	setStyle(Style::Flat);
-	setDebugName(glyphDebugName(glyph));
+	setDebugName("glyph button");
 }
 
+void GlyphButton::setGlyph(Glyph glyph) { assign(mGlyph, glyph, Affects::Paint); }
+
 Extent GlyphButton::measureContent(Axis, halnf) const { return Extent::rigid(sizes::iconButtonSize); }
 
+GlyphButton::GlyphColors GlyphButton::interactionColors() const {
+	const Palette& palette = theme().palette;
+	return { InteractionColors::highlight(palette.controlHovered, palette.controlPressed), palette.mutedText, palette.text };
+}
+
+void GlyphButton::onAttached() {
+	Button::onAttached();
+	mColors = interactionColors();
+	mVisual.setColors(mColors.surface);
+	mVisual.finish();
+}
+
+void GlyphButton::refreshVisualState() {
+	mColors = interactionColors();
+	mVisual.setColors(mColors.surface);
+	if (mVisual.refresh()) startTicking();
+	requestPaint();
+}
+
+void GlyphButton::onTick(halnf deltaMs) {
+	if (!mVisual.advance(deltaMs)) stopTicking();
+	requestPaint();
+}
+
+RGBA GlyphButton::glyphColor() const {
+	if (!isEffectivelyEnabled()) return theme().palette.disabledText;
+	return Palette::mix(mColors.glyphAtRest, mColors.glyphRevealed, mVisual.reveal());
+}
+
 void GlyphButton::paint(Canvas& painter) {
 	const Theme& style = theme();
-	RGBA color = isHovered() && isEffectivelyEnabled() ? style.palette.text : style.palette.mutedText;
-	if (!isEffectivelyEnabled()) color = style.palette.disabledText;
-	const Vec2F center = localRect().center();
 
-	painter.rect(localRect(), background(), style.metrics.cornerRadius);
-
-	switch (mGlyph) {
-		case Glyph::Hide: painter.line(center - Vec2F(5.0f, 0.0f), center + Vec2F(5.0f, 0.0f), color, kGlyphStroke); return;
-		case Glyph::Previous: paintChevron(painter, -1, color); return;
-		case Glyph::Next: paintChevron(painter, 1, color); return;
-		case Glyph::Up: paintUpChevron(painter, color); return;
-		case Glyph::Options:
-			for (halnf offset : { -5.0f, 0.0f, 5.0f })
-				painter.circle(center + Vec2F(0.0f, offset), 1.5f, color);
-			return;
-	}
-}
-
-void GlyphButton::paintChevron(Canvas& painter, halnf direction, const RGBA& color) const {
-	const Vec2F center = localRect().center();
-	const Vec2F tip = center + Vec2F(direction * kChevronDepth, 0.0f);
-	const Vec2F back = center - Vec2F(direction * kChevronDepth, 0.0f);
-	painter.polyline(
-		{ back - Vec2F(0.0f, kChevronHalfHeight), tip, back + Vec2F(0.0f, kChevronHalfHeight) }, color, kGlyphStroke
-	);
-}
-
-void GlyphButton::paintUpChevron(Canvas& painter, const RGBA& color) const {
-	const Vec2F center = localRect().center();
-	const Vec2F tip = center - Vec2F(0.0f, kChevronDepth);
-	const Vec2F back = center + Vec2F(0.0f, kChevronDepth);
-	painter.polyline(
-		{ back - Vec2F(kChevronHalfHeight, 0.0f), tip, back + Vec2F(kChevronHalfHeight, 0.0f) }, color, kGlyphStroke
-	);
-}
-
-RGBA GlyphButton::backgroundTarget() const {
-	const Palette& palette = theme().palette;
-	const RGBA hovered = palette.controlHovered;
-	if (isPressed()) return palette.controlPressed;
-	if (isHovered()) return hovered;
-	return { hovered.r, hovered.g, hovered.b, 0 };
+	painter.rect(localRect(), mVisual.color(), style.metrics.cornerRadius);
+	paintGlyph(painter, displayedGlyph(), glyphBox(localRect(), kGlyphSide), glyphColor(), style);
 }
diff --git a/Widgets/src/components/controls/private/Collapsible.cpp b/Widgets/src/components/controls/private/Collapsible.cpp
index 6f4837ba..b2fb3a51 100644
--- a/Widgets/src/components/controls/private/Collapsible.cpp
+++ b/Widgets/src/components/controls/private/Collapsible.cpp
@@ -1,5 +1,6 @@
 #include "Collapsible.hpp"
 #include "Canvas.hpp"
+#include "Glyph.hpp"
 
 #include "BoxLayout.hpp"
 #include "Layout.hpp"
@@ -22,17 +23,23 @@ CollapsibleHeader::CollapsibleHeader(std::string title) :
 	mTitle(std::move(title)) {
 	setDebugName("collapsible header");
 	setSizing(AxisSizing::fill(), AxisSizing::fit());
+	// The header paints its chevron, title and summary itself; a row keeps room for them and puts an action at the end.
+	RowLayout& row = emplaceLayout<RowLayout>();
+	row.setCrossAlign(CrossAlign::Center);
+	addChild(mPainted);
 }
 
 void CollapsibleHeader::setTitle(std::string title) {
 	if (title == mTitle) return;
 	mTitle = std::move(title);
-	requestLayout();
+	mPainted.requestLayout();
 }
 
 void CollapsibleHeader::setSummary(std::string summary) {
 	if (summary == mSummary) return;
 	mSummary = std::move(summary);
+	// The summary takes room in the header, so a longer one can push the title's room.
+	mPainted.requestLayout();
 	requestPaint();
 }
 
@@ -45,47 +52,23 @@ void CollapsibleHeader::setExpanded(bool expanded, bool animated) {
 	}
 }
 
-class CollapsibleHeader::HeaderLayout : public Layout {
-public:
-	explicit HeaderLayout(CollapsibleHeader& header) :
-		mHeader(header) {}
-
-protected:
-	[[nodiscard]] Extent measureChildren(const LayoutContext& context, Axis axis, halnf crossLength) const override {
-		Widget& action = *mHeader.mAction;
-		const Extent own = mHeader.measureContent(axis, crossLength);
-		const Extent child = context.measure(action, axis, crossLength);
-		if (axis == Axis::Vertical) return Extent::natural(std::max(own.preferred, child.preferred));
-		return Extent::shrinkable(own.preferred + child.preferred);
-	}
-
-	void arrangeChildren(LayoutContext& context, const RectF& area) override {
-		Widget& action = *mHeader.mAction;
-		const halnf width = context.measure(action, Axis::Horizontal, area.size.y).preferred;
-		const halnf height = std::min(area.size.y, context.measure(action, Axis::Vertical, width).preferred);
-		context.place(
-			action, makeRect(area.pos.x + area.size.x - width, area.pos.y + (area.size.y - height) / 2, width, height)
-		);
-	}
-
-private:
-	CollapsibleHeader& mHeader;
-};
-
 void CollapsibleHeader::setAction(Widget* action) {
 	if (mAction) removeChild(*mAction);
 	mAction = action;
-	if (!action) {
-		setLayout(nullptr);
-		return;
-	}
-	addChild(*action);
-	setLayout(std::make_unique<HeaderLayout>(*this));
+	if (action) addChild(*action);
 }
 
 halnf CollapsibleHeader::actionWidth() const { return mAction ? mAction->size().x : 0; }
 
-Extent CollapsibleHeader::measureContent(Axis axis, halnf) const {
+PaintedRoom::PaintedRoom(const CollapsibleHeader& header) :
+	mHeader(header) {
+	setDebugName("collapsible header text");
+	setSizing(AxisSizing::fill(), AxisSizing::fit());
+}
+
+Extent PaintedRoom::measureContent(Axis axis, halnf) const { return mHeader.paintedExtent(axis); }
+
+Extent CollapsibleHeader::paintedExtent(Axis axis) const {
 	const Metrics& metrics = theme().metrics;
 	if (axis == Axis::Vertical) return Extent::natural(metrics.controlHeight);
 	const halnf summary = mSummary.empty() ? 0 : textWidth(mSummary, metrics.smallFontSize) + 12;
@@ -108,20 +91,9 @@ void CollapsibleHeader::paint(Canvas& painter) {
 	if (showsFocusRing())
 		painter.outline(insetRect(localRect(), -2), style.palette.focusRing, metrics.cornerRadius + 2, 2);
 
-	const Vec2F center = { kChevronWidth / 2 + 2, size().y / 2 };
-	const halnf angle = mTurn.value() * kPi / 2;
-	const halnf cosine = std::cos(angle);
-	const halnf sine = std::sin(angle);
-	auto turned = [&](Vec2F point) {
-		return center + Vec2F(point.x * cosine - point.y * sine, point.x * sine + point.y * cosine);
-	};
-	painter.polyline(
-		{ turned(Vec2F(-kChevronHalf / 2, -kChevronHalf)),
-			turned(Vec2F(kChevronHalf / 2, 0.0f)),
-			turned(Vec2F(-kChevronHalf / 2, kChevronHalf)) },
-		style.palette.mutedText,
-		1.5f
-	);
+	// The chevron turns from pointing right (closed) to pointing down (open) as the section opens.
+	const RectF chevron = glyphBox(makeRect(2, 0, kChevronWidth, size().y), kChevronHalf * 2);
+	paintGlyph(painter, Glyph::ChevronRight, chevron, style.palette.mutedText, style, mTurn.value() * kPi / 2);
 
 	const RectF textBox = makeRect(
 		kChevronWidth + 4, 0, size().x - kChevronWidth - 4 - metrics.controlPadding.right - actionWidth(), size().y
@@ -131,66 +103,36 @@ void CollapsibleHeader::paint(Canvas& painter) {
 		painter.text(mSummary, textBox, TextStyle{ metrics.smallFontSize, style.palette.mutedText, TextAlign::rightCenter() });
 }
 
-class Collapsible::SectionLayout : public Layout {
+// Shows the bottom of the body through a window whose height is the body's height times how far the section is open,
+// so the body slides out from under the header.
+class Collapsible::RevealLayout : public Layout {
 public:
-	explicit SectionLayout(Collapsible& section) :
+	explicit RevealLayout(Collapsible& section) :
 		mSection(section) {}
 
 protected:
 	[[nodiscard]] Extent measureChildren(const LayoutContext& context, Axis axis, halnf crossLength) const override {
-		const Extent header = context.measure(mSection.mHeader, axis, crossLength);
-		if (!mSection.mReveal.isVisible()) return header;
-
 		const Extent body = context.measure(mSection.mBody, axis, crossLength);
-		if (axis == Axis::Horizontal) {
-			return { std::max(header.minimum, body.minimum), std::max(header.preferred, body.preferred), kUnbounded, 0 };
-		}
-		return Extent::rigid(header.preferred + revealed(body.preferred));
+		if (axis == Axis::Horizontal) return body;
+		return Extent::rigid(std::round(body.preferred * std::clamp(mSection.mOpen.value(), 0.0f, 1.0f)));
 	}
 
 	void arrangeChildren(LayoutContext& context, const RectF& area) override {
-		const halnf headerHeight = context.measure(mSection.mHeader, Axis::Vertical, area.size.x).preferred;
-		context.place(mSection.mHeader, makeRect(area.pos.x, area.pos.y, area.size.x, headerHeight));
-		if (!mSection.mReveal.isVisible()) return;
-
-		const halnf bodyHeight = context.measure(mSection.mBody, Axis::Vertical, area.size.x).preferred;
-		const halnf shown = revealed(bodyHeight);
-		context.place(mSection.mReveal, makeRect(area.pos.x, area.pos.y + headerHeight, area.size.x, shown));
+		const halnf height = context.measure(mSection.mBody, Axis::Vertical, area.size.x).preferred;
+		context.place(mSection.mBody, makeRect(area.pos.x, area.pos.y + area.size.y - height, area.size.x, height));
 	}
 
 private:
-	[[nodiscard]] halnf revealed(halnf bodyHeight) const {
-		return std::round(bodyHeight * std::clamp(mSection.mOpen.value(), 0.0f, 1.0f));
-	}
-
 	Collapsible& mSection;
 };
 
-class CollapsibleRevealLayout : public Layout {
-public:
-	explicit CollapsibleRevealLayout(Widget& body) :
-		mBody(body) {}
-
-protected:
-	[[nodiscard]] Extent measureChildren(const LayoutContext& context, Axis axis, halnf crossLength) const override {
-		return context.measure(mBody, axis, crossLength);
-	}
-
-	void arrangeChildren(LayoutContext& context, const RectF& area) override {
-		const halnf height = context.measure(mBody, Axis::Vertical, area.size.x).preferred;
-		context.place(mBody, makeRect(area.pos.x, area.pos.y + area.size.y - height, area.size.x, height));
-	}
-
-private:
-	Widget& mBody;
-};
-
 Collapsible::Collapsible(std::string title) :
 	mHeader(std::move(title)) {
 	setDebugName("collapsible");
 	setSizing(AxisSizing::fill(), AxisSizing::fit());
 	setClipsChildren(true);
-	setLayout(std::make_unique<SectionLayout>(*this));
+	// The header is placed first but is the last child, so it paints and takes hits over the body sliding out.
+	emplaceLayout<ColumnLayout>(0).setReversed(true);
 	mHeader.setGeometryAnimated(false);
 	setGeometryAnimated(false);
 
@@ -203,7 +145,7 @@ Collapsible::Collapsible(std::string title) :
 	mReveal.setSizing(AxisSizing::fill(), AxisSizing::fit());
 	mReveal.setGeometryAnimated(false);
 	mReveal.setClipsChildren(true);
-	mReveal.setLayout(std::make_unique<CollapsibleRevealLayout>(mBody));
+	mReveal.setLayout(std::make_unique<RevealLayout>(*this));
 	mReveal.addChild(mBody);
 	mReveal.setVisible(false);
 
@@ -227,6 +169,7 @@ void Collapsible::setExpanded(bool expanded, bool animated) {
 		mOpen.jumpTo(target);
 		mReveal.setVisible(expanded);
 	}
+	mReveal.requestLayout();
 	requestLayout();
 	if (mOnToggled) mOnToggled(expanded);
 }
@@ -235,6 +178,7 @@ void Collapsible::finishTransitions() {
 	if (!mOpen.isAnimating()) return;
 	mOpen.finish();
 	if (!mExpanded) mReveal.setVisible(false);
+	mReveal.requestLayout();
 	requestLayout();
 }
 
@@ -244,6 +188,7 @@ void Collapsible::onTick(halnf deltaMs) {
 		stopTicking();
 		if (!mExpanded) mReveal.setVisible(false);
 	}
+	mReveal.requestLayout();
 	requestLayout();
 	requestPaint();
 }
diff --git a/Widgets/src/components/controls/private/Containers.cpp b/Widgets/src/components/controls/private/Containers.cpp
index 6694f3f2..40ecca97 100644
--- a/Widgets/src/components/controls/private/Containers.cpp
+++ b/Widgets/src/components/controls/private/Containers.cpp
@@ -1,6 +1,7 @@
 #include "Containers.hpp"
 #include "Canvas.hpp"
 #include "ComponentSizes.hpp"
+#include "Elevation.hpp"
 #include "ScrollPhysics.hpp"
 
 #include "Event.hpp"
@@ -45,10 +46,14 @@ void Panel::setBorder(bool border) {
 	requestPaint();
 }
 
+void Panel::setElevated(bool elevated) { assign(mElevated, elevated, Affects::Paint); }
+
 void Panel::paint(Canvas& painter) {
 	const Theme& style = theme();
 	const halnf radius = mCornerRadius >= 0 ? mCornerRadius : style.metrics.cornerRadius;
 
+	if (isElevated()) paintElevationShadow(painter, localRect(), radius, style);
+
 	switch (mSurface) {
 		case Surface::None: break;
 		case Surface::Window:
@@ -100,53 +105,6 @@ Spacer::Spacer(halnf length) {
 	setSizing(AxisSizing::fixed(length), AxisSizing::fixed(length));
 }
 
-class ScrollView::ScrollLayout : public Layout {
-public:
-	explicit ScrollLayout(ScrollView& view) :
-		mView(view) {}
-
-protected:
-	[[nodiscard]] Extent measureChildren(const LayoutContext& context, Axis axis, halnf crossLength) const override {
-		if (!mView.mContent || !mView.mContent->isVisible()) return {};
-
-		Extent extent = context.measure(*mView.mContent, axis, crossLength);
-		if (axis == mView.mScrollAxis) extent.minimum = 0;
-		return extent;
-	}
-
-	void arrangeChildren(LayoutContext& context, const RectF& contentArea) override {
-		const Axis scroll = mView.mScrollAxis;
-		const Axis cross = crossAxis(scroll);
-
-		if (mView.mContent && mView.mContent->isVisible()) {
-			const halnf crossLength = lengthAlong(contentArea, cross);
-			const halnf contentLength = context.measure(*mView.mContent, scroll, crossLength).preferred;
-
-			mView.mContentLength = std::max(contentLength, lengthAlong(contentArea, scroll));
-			mView.keepOffsetInRange();
-
-			RectF rect;
-			setSpanAlong(
-				rect,
-				scroll,
-				startAlong(contentArea, scroll) - mView.mOffset.value() + mView.stretchOffset(),
-				mView.mContentLength
-			);
-			setSpanAlong(rect, cross, startAlong(contentArea, cross), crossLength);
-			context.place(*mView.mContent, rect);
-		}
-
-		const halnf thickness = sizes::scrollBar::thickness;
-		RectF bar = contentArea;
-		setSpanAlong(bar, cross, startAlong(contentArea, cross) + lengthAlong(contentArea, cross) - thickness, thickness);
-		mView.mScrollBar.setVisible(mView.mShowsScrollBar && mView.isScrollable());
-		if (mView.mScrollBar.isVisible()) context.place(mView.mScrollBar, bar);
-	}
-
-private:
-	ScrollView& mView;
-};
-
 ScrollBar::ScrollBar(ScrollView& view) :
 	mView(view) {
 	setDebugName("scroll bar");
@@ -154,7 +112,6 @@ ScrollBar::ScrollBar(ScrollView& view) :
 }
 
 RectF ScrollBar::trackRect() const {
-	const Metrics& metrics = theme().metrics;
 	const Axis axis = mView.scrollAxis();
 	const Axis cross = crossAxis(axis);
 	const halnf thickness = sizes::scrollBar::trackThickness;
@@ -198,48 +155,51 @@ void ScrollBar::flash(halnf durationMs) {
 	refreshReveal();
 }
 
+void ScrollBar::grab(halnf pointerAlong, bool animate) {
+	const Axis axis = mView.scrollAxis();
+	const RectF thumb = thumbRect();
+	const bool onThumb = pointerAlong >= startAlong(thumb, axis) && pointerAlong <= startAlong(thumb, axis) + lengthAlong(thumb, axis);
+	// A press on the track centers the thumb under the pointer; a press on the thumb keeps where it was taken.
+	mGrabOffset = onThumb ? pointerAlong - startAlong(thumb, axis) : lengthAlong(thumb, axis) / 2;
+	if (onThumb) return;
+	if (animate) mView.scrollTo(offsetForThumbAt(pointerAlong));
+	else mView.jumpTo(offsetForThumbAt(pointerAlong));
+}
+
 void ScrollBar::onEvent(Event& event) {
 	const Axis axis = mView.scrollAxis();
 
-	switch (event.type()) {
-		case Event::Type::PointerDown:
-			{
-				if (event.button() != PointerButton::Left) return;
-				const RectF thumb = thumbRect();
-				const halnf pointer = along(event.position(), axis);
-				const bool onThumb =
-					pointer >= startAlong(thumb, axis) && pointer <= startAlong(thumb, axis) + lengthAlong(thumb, axis);
-
-				mGrabOffset = onThumb ? pointer - startAlong(thumb, axis) : lengthAlong(thumb, axis) / 2;
-				mDragging = true;
-				ui()->capturePointer(*this);
-				if (!onThumb) mView.scrollTo(offsetForThumbAt(pointer));
-				break;
-			}
-
-		case Event::Type::PointerMove:
-			if (!mDragging) return;
-			mView.jumpTo(offsetForThumbAt(along(event.position(), axis)));
-			break;
-
-		case Event::Type::PointerUp:
-			if (!mDragging || event.button() != PointerButton::Left) return;
-			mDragging = false;
-			ui()->releasePointer(*this);
-			break;
-
-		default: return;
+	if (event.type() == Event::Type::PointerDown && event.button() == PointerButton::Left) {
+		grab(along(event.position(), axis), true);
+		mDragging = true;
+		refreshReveal();
+		event.accept();
+		return;
 	}
 
-	event.accept();
+	if (event.type() == Event::Type::PointerUp && event.button() == PointerButton::Left && mDragging) {
+		mDragging = false;
+		refreshReveal();
+		event.accept();
+		return;
+	}
+
+	const Dragged* drag = event.drag();
+	if (!drag || drag->button != PointerButton::Left) return;
+	if (drag->phase == DragPhase::Started || drag->phase == DragPhase::Moved) {
+		mDragging = true;
+		mView.jumpTo(offsetForThumbAt(along(event.position(), axis)));
+	} else {
+		mDragging = false;
+	}
 	refreshReveal();
+	event.accept();
 }
 
-void ScrollBar::onHoverChanged() { refreshReveal(); }
-
 void ScrollBar::refreshReveal() {
-	mReveal.animateTo(isHovered() || mDragging || mFlashMs > 0 ? 1.0f : 0.0f);
-	startTicking();
+	mVisual.setRevealHeld(mDragging || mFlashMs > 0);
+	if (mVisual.refresh() || mFlashMs > 0) startTicking();
+	requestPaint();
 }
 
 void ScrollBar::onTick(halnf deltaMs) {
@@ -248,12 +208,13 @@ void ScrollBar::onTick(halnf deltaMs) {
 		if (mFlashMs <= 0) refreshReveal();
 	}
 
-	if (!mReveal.advance(deltaMs) && mFlashMs <= 0) stopTicking();
+	const bool revealing = mVisual.advance(deltaMs);
+	if (!revealing && mFlashMs <= 0) stopTicking();
 	requestPaint();
 }
 
 void ScrollBar::paint(Canvas& painter) {
-	const halnf reveal = clampLength(mReveal.value(), 0, 1);
+	const halnf reveal = clampLength(mVisual.reveal(), 0, 1);
 	if (reveal <= 0.01f) return;
 
 	const Axis cross = crossAxis(mView.scrollAxis());
@@ -274,209 +235,61 @@ void ScrollBar::paint(Canvas& painter) {
 	painter.rect(thumb, { muted.r, muted.g, muted.b, active ? 0.65f : 0.45f }, lengthAlong(thumb, cross) / 2);
 }
 
+namespace {
+	ViewportPolicy scrollPolicy(Axis axis) {
+		ViewportPolicy policy = axis == Axis::Horizontal ? ViewportPolicy::horizontalStrip() : ViewportPolicy::verticalList();
+		policy.motion = ViewportPolicy::ScrollMotion::Animated;
+		return policy;
+	}
+}
+
 ScrollView::ScrollView(Axis scrollAxis) :
-	mScrollAxis(scrollAxis),
-	mOffset(0, Motion::quick()) {
+	Viewport(scrollPolicy(scrollAxis)),
+	mScrollAxis(scrollAxis) {
 	setDebugName("scroll view");
-	setClipsChildren(true);
-	setLayout(std::make_unique<ScrollLayout>(*this));
 	addChild(mScrollBar);
 }
 
-void ScrollView::setContent(Widget* content) {
-	if (mContent) removeChild(*mContent);
-
-	mContent = content;
-	if (mContent) {
-		insertChild(0, *mContent);
-		mContent->setGeometryAnimated(false);
-	}
-	scrollTo(0);
+Vec2F ScrollView::alongAxis(halnf length) const {
+	Vec2F vector = { 0, 0 };
+	along(vector, mScrollAxis) = length;
+	return vector;
 }
 
-void ScrollView::scrollTo(halnf offset) {
-	mOffset.animateTo(clampLength(offset, 0, maximumOffset()));
-	if (isScrollable() && mShowsScrollBar) mScrollBar.flash(kShowAfterScrollMs);
-	startTicking();
+halnf ScrollView::contentLength() const {
+	return content() ? std::max(lengthAlong(content()->targetRect(), mScrollAxis), viewportLength()) : viewportLength();
 }
 
-void ScrollView::jumpTo(halnf offset) {
-	mOffset.jumpTo(clampLength(offset, 0, maximumOffset()));
-	applyOffset();
+void ScrollView::setWheelStep(halnf step) {
+	ViewportPolicy changed = policy();
+	changed.wheelStep = step;
+	setPolicy(changed);
 }
 
-void ScrollView::scrollBy(halnf delta) { scrollTo(mOffset.target() + delta); }
-
-halnf ScrollView::maximumOffset() const {
-	const halnf overflow = mContentLength - viewportLength();
-	return overflow > 0 ? overflow : 0;
+void ScrollView::revealRange(halnf start, halnf length, std::optional<halnf> margin) {
+	scrollTo(revealOffsetFor(start, length, margin));
 }
 
-Extent ScrollView::measureContent(Axis, halnf) const { return {}; }
-
-void ScrollView::onEvent(Event& event) {
-	if (event.type() == Event::Type::Wheel) {
-		if (!isScrollable() || event.scrollDelta().y == 0) return;
-		scrollBy(-event.scrollDelta().y * mWheelStep);
-		event.accept();
-		return;
-	}
-	trackDrag(event);
+halnf ScrollView::revealOffsetFor(halnf start, halnf length, std::optional<halnf> margin) const {
+	RectF range = makeRect(0, 0, 0, 0);
+	setSpanAlong(range, mScrollAxis, start, length);
+	return along(revealOffset(range, margin), mScrollAxis);
 }
 
-void ScrollView::filterDescendantEvent(Event& event) { trackDrag(event); }
-
-bool ScrollView::startsDrag(const Event& event) const {
-	return event.type() == Event::Type::PointerDown && event.button() == PointerButton::Left && ui() &&
-				 ui()->isTouchMode() && isScrollable() && !mScrollBar.isDragging();
+void ScrollView::arrangeOverlays(LayoutContext& context, const RectF& area) {
+	const Axis cross = crossAxis(mScrollAxis);
+	const halnf thickness = sizes::scrollBar::thickness;
+	RectF bar = area;
+	setSpanAlong(bar, cross, startAlong(area, cross) + lengthAlong(area, cross) - thickness, thickness);
+	mScrollBar.setVisible(mShowsScrollBar && isScrollable());
+	if (mScrollBar.isVisible()) context.place(mScrollBar, bar);
 }
 
-void ScrollView::trackDrag(Event& event) {
-	if (startsDrag(event)) {
-		const bool catching = mFling.isActive() || mStartStretch.isActive() || mEndStretch.isActive();
-		mFling.stop();
-		mFlingVelocity = 0;
-		mStartStretch.pull(0);
-		mEndStretch.pull(0);
-		mDragPending = true;
-		mDragging = catching;
-		mDragStart = event.windowPosition();
-		mDragStartOffset = mOffset.value();
-		mLastDragAlong = 0;
-		mDragSamples.clear();
-		rememberDragSample(event.sample().timeMs);
-		if (catching) {
-			ui()->capturePointer(*this);
-			event.accept();
-		}
-		return;
-	}
-	if (!mDragPending) return;
-
-	if (event.type() == Event::Type::PointerMove) {
-		const Widget* holder = ui()->pointerCapture();
-		if (!mDragging && holder && holder != this) {
-			mDragPending = false;
-			return;
-		}
-		const halnf moved = along(event.windowPosition() - mDragStart, mScrollAxis);
-		if (!mDragging && std::abs(moved) < kDragThreshold) return;
-		if (!mDragging) {
-			mDragging = true;
-			ui()->capturePointer(*this);
-		}
-		dragBy(mLastDragAlong - moved);
-		mLastDragAlong = moved;
-		rememberDragSample(event.sample().timeMs);
-		event.accept();
-	} else if (event.type() == Event::Type::PointerUp && event.button() == PointerButton::Left) {
-		mDragPending = false;
-		if (!mDragging) return;
-		mDragging = false;
-		ui()->releasePointer(*this);
-		event.accept();
-		const halnf velocity = averageDragVelocity(event.sample().timeMs);
-		const bool stretched = mStartStretch.isActive() || mEndStretch.isActive();
-		mStartStretch.release();
-		mEndStretch.release();
-		if (stretched) {
-			// The stretch absorbs the release, it does not fling.
-			(velocity < 0 ? mStartStretch : mEndStretch).absorb(velocity);
-		} else if (std::abs(velocity) >= kFlingMinimumSpeed) {
-			mFling.start(mOffset.value(), velocity * 1000.0f, 0, maximumOffset());
-			mFlingVelocity = velocity;
-		}
-		startTicking();
-	}
-}
-
-void ScrollView::rememberDragSample(uint4 timeMs) {
-	if (!mDragSamples.empty() && mDragSamples.back().timeMs == timeMs) {
-		mDragSamples.back().offset = mOffset.value();
-		return;
-	}
-	mDragSamples.push_back({ timeMs, mOffset.value() });
-	while (mDragSamples.size() > 2 && timeMs - mDragSamples[1].timeMs > kFlingRecentMs)
-		mDragSamples.erase(mDragSamples.begin());
-}
-
-void ScrollView::dragBy(halnf delta) {
-	halnf remaining = delta;
-	if (remaining < 0 && mEndStretch.distance() > 0) remaining -= mEndStretch.pull(remaining);
-	if (remaining > 0 && mStartStretch.distance() > 0) remaining += mStartStretch.pull(-remaining);
-	const halnf target = mOffset.value() + remaining;
-	const halnf limit = maximumOffset();
-	if (target < 0) {
-		mOffset.jumpTo(0);
-		mStartStretch.setLength(viewportLength());
-		mStartStretch.pull(-target);
-	} else if (target > limit) {
-		mOffset.jumpTo(limit);
-		mEndStretch.setLength(viewportLength());
-		mEndStretch.pull(target - limit);
-	} else {
-		mOffset.jumpTo(target);
-	}
-	applyOffset();
-}
-
-halnf ScrollView::stretchOffset() const { return mStartStretch.visualOffset() - mEndStretch.visualOffset(); }
-
-halnf ScrollView::averageDragVelocity(uint4 nowMs) const { return averageVelocity(mDragSamples, nowMs); }
-
-halnf ScrollView::averageVelocity(const std::vector<DragSample>& samples, uint4 nowMs) {
-	if (samples.size() < 2) return 0;
-	const DragSample& newest = samples.back();
-	if (nowMs - newest.timeMs >= kFlingRecentMs) return 0;
-	size_t first = samples.size() - 1;
-	while (first > 0 && newest.timeMs - samples[first - 1].timeMs <= kFlingRecentMs)
-		first--;
-	if (first == samples.size() - 1) first--;
-	const DragSample& oldest = samples[first];
-	if (newest.timeMs <= oldest.timeMs) return 0;
-	return (newest.offset - oldest.offset) / (halnf) (newest.timeMs - oldest.timeMs);
-}
-
-void ScrollView::onTick(halnf deltaMs) {
-	bool moving = false;
-	if (mFling.isActive()) {
-		moving = mFling.advance(deltaMs);
-		mOffset.jumpTo(mFling.position());
-		mFlingVelocity = mFling.velocity() / 1000.0f;
-		if (!moving) {
-			const halnf impact = mFling.velocity();
-			mFlingVelocity = 0;
-			if (mFling.hitEdge() && impact != 0) {
-				StretchEffect& edge = impact < 0 ? mStartStretch : mEndStretch;
-				edge.setLength(viewportLength());
-				edge.absorb(impact);
-			}
-		}
-		moving = true;
-	} else if (mStartStretch.isActive() || mEndStretch.isActive()) {
-		const bool start = mStartStretch.advance(deltaMs);
-		const bool end = mEndStretch.advance(deltaMs);
-		moving = start || end;
-	} else {
-		moving = mOffset.advance(deltaMs);
-	}
-	applyOffset();
-	if (!moving) stopTicking();
-}
-
-halnf ScrollView::viewportLength() const { return lengthAlong(localRect(), mScrollAxis); }
-
-void ScrollView::keepOffsetInRange() {
-	const halnf limit = maximumOffset();
-	if (mOffset.target() > limit) mOffset.animateTo(limit);
-	if (mOffset.value() > limit) mOffset.jumpTo(limit);
-}
-
-void ScrollView::applyOffset() {
-	const halnf current = mOffset.value();
-	const bool moved = current != mReportedOffset;
+void ScrollView::offsetChanged() {
+	const halnf current = currentOffset();
+	if (current == mReportedOffset) return;
 	mReportedOffset = current;
-	if (moved && mOnScrolled) mOnScrolled(current);
-	requestLayout();
-	requestPaint();
+	// Note: the bar shows briefly whenever the content moves, by wheel, glide, fling or a program.
+	if (isScrollable() && mShowsScrollBar && !mScrollBar.isDragging()) mScrollBar.flash(kShowAfterScrollMs);
+	if (mOnScrolled) mOnScrolled(current);
 }
diff --git a/Widgets/src/components/controls/private/ResizeHandle.cpp b/Widgets/src/components/controls/private/ResizeHandle.cpp
index 59a0a3f9..13f86def 100644
--- a/Widgets/src/components/controls/private/ResizeHandle.cpp
+++ b/Widgets/src/components/controls/private/ResizeHandle.cpp
@@ -31,30 +31,30 @@ RectF ResizeHandle::lineRect() const {
 }
 
 void ResizeHandle::onEvent(Event& event) {
-	switch (event.type()) {
-		case Event::Type::PointerDown:
-			if (event.button() != PointerButton::Left) return;
-			mDragging = true;
-			mGrabOffset = along(event.position(), mDragAxis) - lengthAlong(localRect(), mDragAxis) / 2;
-			ui()->capturePointer(*this);
-			if (mOnStarted) mOnStarted();
-			break;
-
-		case Event::Type::PointerMove:
-			if (!mDragging) return;
-			if (mOnDragged) mOnDragged(along(event.windowPosition(), mDragAxis) - mGrabOffset);
-			break;
-
-		case Event::Type::PointerUp:
-			if (!mDragging || event.button() != PointerButton::Left) return;
-			mDragging = false;
-			ui()->releasePointer(*this);
-			if (mOnFinished) mOnFinished();
-			break;
-
-		default: return;
+	if (event.type() == Event::Type::PointerDown && event.button() == PointerButton::Left) {
+		// Where the handle was taken, so the resized edge does not jump to the pointer.
+		mGrabOffset = along(event.position(), mDragAxis) - lengthAlong(localRect(), mDragAxis) / 2;
+		event.accept();
+		return;
 	}
 
+	const Dragged* drag = event.drag();
+	if (!drag || drag->button != PointerButton::Left) return;
+
+	switch (drag->phase) {
+		case DragPhase::Started:
+			mDragging = true;
+			if (mOnStarted) mOnStarted();
+			[[fallthrough]];
+		case DragPhase::Moved:
+			if (mOnDragged) mOnDragged(along(event.windowPosition(), mDragAxis) - mGrabOffset);
+			break;
+		case DragPhase::Finished:
+		case DragPhase::Cancelled:
+			mDragging = false;
+			if (mOnFinished) mOnFinished();
+			break;
+	}
 	event.accept();
 	refreshReveal();
 }
@@ -62,20 +62,18 @@ void ResizeHandle::onEvent(Event& event) {
 void ResizeHandle::onHoverChanged() { refreshReveal(); }
 
 void ResizeHandle::refreshReveal() {
-	const halnf target = isHovered() || mDragging ? 1.0f : 0.0f;
-	if (mReveal.target() == target && !mReveal.isAnimating()) return;
-
-	mReveal.animateTo(target);
-	startTicking();
+	mVisual.setRevealHeld(mDragging);
+	if (mVisual.refresh()) startTicking();
+	requestPaint();
 }
 
 void ResizeHandle::onTick(halnf deltaMs) {
-	if (!mReveal.advance(deltaMs)) stopTicking();
+	if (!mVisual.advance(deltaMs)) stopTicking();
 	requestPaint();
 }
 
 void ResizeHandle::paint(Canvas& painter) {
-	const halnf reveal = mReveal.value();
+	const halnf reveal = mVisual.reveal();
 	if (reveal <= 0.01f) return;
 
 	const Palette& palette = theme().palette;
diff --git a/Widgets/src/components/controls/private/SegmentedControl.cpp b/Widgets/src/components/controls/private/SegmentedControl.cpp
new file mode 100644
index 00000000..d78766ff
--- /dev/null
+++ b/Widgets/src/components/controls/private/SegmentedControl.cpp
@@ -0,0 +1,100 @@
+#include "SegmentedControl.hpp"
+
+#include "BoxLayout.hpp"
+#include "Event.hpp"
+#include "Ui.hpp"
+
+#include <numeric>
+
+using namespace tp;
+using namespace tp::ui;
+
+namespace {
+	constexpr halnf kSegmentGap = 2;
+}
+
+SegmentedControlBase::SegmentedControlBase(Mode mode) :
+	mSelection(mode) {
+	setDebugName("segmented control");
+	setSizing(AxisSizing::fit(), AxisSizing::fit());
+	emplaceLayout<RowLayout>(kSegmentGap);
+	mSelection.setOnChanged([this]() {
+		refreshButtons();
+		if (mUserChange && mOnIndexChanged) mOnIndexChanged();
+	});
+}
+
+Button& SegmentedControlBase::addButton(std::string text) {
+	std::unique_ptr<Button> button = mFactory ? mFactory(std::move(text)) : std::make_unique<Button>(std::move(text));
+	button->setStyle(mButtonStyle);
+	Button* raw = button.get();
+	button->setOnActivate([this, raw]() {
+		// Note: the index is looked up on activation, so removing an earlier segment keeps this one correct.
+		for (size_t index = 0; index < mButtons.size(); index++) {
+			if (mButtons[index].get() == raw) clicked(index);
+		}
+	});
+	addChild(*button);
+	mButtons.push_back(std::move(button));
+	refreshButtons();
+	return *mButtons.back();
+}
+
+void SegmentedControlBase::removeButton(size_t index) {
+	if (index >= mButtons.size()) return;
+
+	const std::optional<size_t> chosen = mSelection.current();
+	removeChild(*mButtons[index]);
+	mButtons.erase(mButtons.begin() + (std::ptrdiff_t) index);
+	// The choice follows its segment; removing the chosen segment leaves no choice until the owner picks one.
+	if (!chosen || *chosen == index) mSelection.clear();
+	else if (*chosen > index) mSelection.select(*chosen - 1);
+	refreshButtons();
+}
+
+void SegmentedControlBase::setButtonStyle(Button::Style style) {
+	mButtonStyle = style;
+	for (auto& button : mButtons)
+		button->setStyle(style);
+}
+
+void SegmentedControlBase::selectIndex(size_t index) {
+	if (index < mButtons.size()) mSelection.select(index);
+}
+
+std::vector<size_t> SegmentedControlBase::order() const {
+	std::vector<size_t> indices(mButtons.size());
+	std::iota(indices.begin(), indices.end(), 0);
+	return indices;
+}
+
+void SegmentedControlBase::clicked(size_t index) {
+	const KeyModifiers modifiers = ui() ? ui()->modifiers() : KeyModifiers{};
+	mUserChange = true;
+	// Note: in single mode a click on the chosen segment keeps it chosen; there is always one choice.
+	if (mSelection.mode() == Mode::Single) mSelection.select(index);
+	else mSelection.click(index, modifiers, order());
+	mUserChange = false;
+}
+
+void SegmentedControlBase::onEvent(Event& event) {
+	if (event.type() != Event::Type::KeyDown || mButtons.empty()) return;
+
+	const size_t current = mSelection.current().value_or(0);
+	size_t next = current;
+	if (event.isKey(Key::Left) || event.isKey(Key::Up)) next = current == 0 ? mButtons.size() - 1 : current - 1;
+	else if (event.isKey(Key::Right) || event.isKey(Key::Down)) next = (current + 1) % mButtons.size();
+	else if (event.isKey(Key::Home)) next = 0;
+	else if (event.isKey(Key::End)) next = mButtons.size() - 1;
+	else return;
+
+	mUserChange = true;
+	mSelection.select(next);
+	mUserChange = false;
+	event.accept();
+}
+
+void SegmentedControlBase::refreshButtons() {
+	for (size_t index = 0; index < mButtons.size(); index++)
+		mButtons[index]->setSelected(mSelection.isSelected(index));
+}
diff --git a/Widgets/src/components/controls/private/Slider.cpp b/Widgets/src/components/controls/private/Slider.cpp
index 0521cc38..29aa6545 100644
--- a/Widgets/src/components/controls/private/Slider.cpp
+++ b/Widgets/src/components/controls/private/Slider.cpp
@@ -134,28 +134,36 @@ Extent Slider::measureContent(Axis axis, halnf) const {
 	return Extent::natural(sizes::slider::handleSize + 4);
 }
 
+void Slider::setDragging(bool dragging) {
+	if (dragging == mDragging) return;
+	mDragging = dragging;
+	if (mOnDragging) mOnDragging(dragging);
+}
+
 void Slider::onEvent(Event& event) {
+	if (const Dragged* drag = event.drag()) {
+		if (drag->button != PointerButton::Left) return;
+		// The press already moved the value; the router's drag follows the pointer from there.
+		const bool ongoing = drag->phase == DragPhase::Started || drag->phase == DragPhase::Moved;
+		setDragging(ongoing);
+		if (ongoing) changeValue(valueAt(event.position()));
+		event.accept();
+		refreshVisualState();
+		return;
+	}
+
 	switch (event.type()) {
 		case Event::Type::PointerDown:
 			if (event.button() != PointerButton::Left) return;
-			mDragging = true;
-			ui()->capturePointer(*this);
-			if (mOnDragging) mOnDragging(true);
-			changeValue(valueAt(event.position()));
-			event.accept();
-			break;
-
-		case Event::Type::PointerMove:
-			if (!mDragging) return;
+			setDragging(true);
 			changeValue(valueAt(event.position()));
 			event.accept();
 			break;
 
 		case Event::Type::PointerUp:
-			if (!mDragging || event.button() != PointerButton::Left) return;
-			mDragging = false;
-			ui()->releasePointer(*this);
-			if (mOnDragging) mOnDragging(false);
+			// A press that never became a drag ends here; a drag ends in its Finished phase, delivered right after.
+			if (!mDragging || event.button() != PointerButton::Left || (ui() && ui()->isDragging())) return;
+			setDragging(false);
 			event.accept();
 			break;
 
diff --git a/Widgets/src/components/controls/private/TextArea.cpp b/Widgets/src/components/controls/private/TextArea.cpp
index 969c3acd..27972da1 100644
--- a/Widgets/src/components/controls/private/TextArea.cpp
+++ b/Widgets/src/components/controls/private/TextArea.cpp
@@ -1,4 +1,6 @@
 #include "TextArea.hpp"
+
+#include "BoxLayout.hpp"
 #include "Canvas.hpp"
 
 #include "Event.hpp"
@@ -17,30 +19,22 @@ namespace {
 	constexpr halnf kBlinkPeriodMs = 1060;
 	constexpr halnf kCaretWidth = 1.5f;
 	constexpr halnf kHandleThickness = 8;
+	constexpr halnf kMinimumWidth = 40;
 	constexpr halnf kTextInset = 8;
 
 	bool isSpace(char character) { return character == ' '; }
 }
 
-class TextArea::AreaLayout : public Layout {
+// The scroller over the resize handle; after placing them the area keeps the caret in view if its height changed.
+class TextArea::AreaLayout : public ColumnLayout {
 public:
 	explicit AreaLayout(TextArea& area) :
 		mArea(area) {}
 
 protected:
-	[[nodiscard]] Extent measureChildren(const LayoutContext&, Axis axis, halnf) const override {
-		if (axis == Axis::Vertical && mArea.mFillsHeight)
-			return Extent::shrinkable(mArea.mMinimumHeight, mArea.mMinimumHeight);
-		if (axis == Axis::Vertical) return Extent::rigid(mArea.mBoxHeight);
-		return { 40, 200, kUnbounded, 0 };
-	}
-
 	void arrangeChildren(LayoutContext& context, const RectF& contentArea) override {
-		context.place(mArea.mScroll, contentArea);
-		const halnf top = contentArea.pos.y + contentArea.size.y - kHandleThickness;
-		const halnf handleThickness = mArea.mFillsHeight ? 0 : kHandleThickness;
-		context.place(mArea.mHandle, makeRect(contentArea.pos.x, top, contentArea.size.x, handleThickness));
-		mArea.viewportArranged(contentArea.size.y);
+		ColumnLayout::arrangeChildren(context, contentArea);
+		mArea.viewportArranged(mArea.mScroll.targetRect().size.y);
 	}
 
 private:
@@ -351,10 +345,7 @@ void TextAreaEditor::onEvent(Event& event) {
 			mPreferredX = -1;
 			mEditor.pointerDown(event, positionAt(event.position()));
 			break;
-		case Event::Type::PointerMove:
-			mEditor.pointerMove(event, positionAt(event.position()));
-			break;
-		case Event::Type::PointerUp: mEditor.pointerUp(event); break;
+		case Event::Type::Drag: mEditor.drag(event, positionAt(event.position())); break;
 		case Event::Type::KeyDown: mEditor.key(event); break;
 		case Event::Type::TextInput: mEditor.text(event); break;
 		default: return;
@@ -415,6 +406,8 @@ TextArea::TextArea(std::string text) {
 	mScroll.setContent(&mEditor);
 	mScroll.setWheelStep(theme().metrics.lineHeight * 3);
 
+	mScroll.setSizing(AxisSizing::fill(), AxisSizing::fill());
+	mHandle.setSizing(AxisSizing::fill(), AxisSizing::fixed(kHandleThickness));
 	mHandle.setCursor(CursorShape::ResizeVertical);
 	mHandle.setOnDragStarted([this] {
 		mDragStartHeight = mBoxHeight;
@@ -440,7 +433,11 @@ void TextArea::setBoxHeight(halnf height) {
 	applyBoxHeight();
 }
 
-void TextArea::applyBoxHeight() { requestLayout(); }
+void TextArea::applyBoxHeight() {
+	// The area's own sizing is its height: the box height the user dragged to, or filling its parent.
+	const AxisSizing height = mFillsHeight ? AxisSizing::fill().atLeast(mMinimumHeight) : AxisSizing::fixed(mBoxHeight);
+	setSizing(AxisSizing::fill().atLeast(kMinimumWidth), height);
+}
 
 void TextArea::setFontScale(halnf scale) {
 	mEditor.setFontScale(scale);
@@ -452,8 +449,7 @@ void TextArea::setFillsHeight(bool fills) {
 
 	mFillsHeight = fills;
 	mHandle.setVisible(!fills);
-	setSizing(AxisSizing::fill(), fills ? AxisSizing::fill() : AxisSizing::fit());
-	requestLayout();
+	applyBoxHeight();
 }
 
 void TextArea::viewportArranged(halnf height) {
@@ -468,22 +464,13 @@ void TextArea::onTick(halnf) {
 	revealCaret();
 }
 
-halnf TextArea::caretRevealOffset(halnf viewportHeight) const {
-	const RectF caret = mEditor.caretRect();
-	const halnf top = caret.pos.y - kTextInset / 2;
-	const halnf bottom = caret.pos.y + caret.size.y + kTextInset / 2;
-	const halnf offset = mScroll.offset();
-
-	if (top < offset) return top;
-	if (bottom > offset + viewportHeight) return bottom - viewportHeight;
-	return offset;
-}
-
 void TextArea::revealCaret() {
 	if (ui()) ui()->updateLayout();
 	if (!mScroll.size().y) return;
 
-	mScroll.jumpTo(caretRevealOffset(mScroll.size().y));
+	// The caret follows typing at once, with the text inset as its margin so the line it is on shows whole.
+	const RectF caret = mEditor.caretRect();
+	mScroll.jumpTo(mScroll.revealOffsetFor(caret.pos.y, caret.size.y, kTextInset / 2));
 }
 
 void TextArea::setFillsWithWindowColor(bool window) {
diff --git a/Widgets/src/components/controls/private/TextEditor.cpp b/Widgets/src/components/controls/private/TextEditor.cpp
index 5c3542b1..ea83af1f 100644
--- a/Widgets/src/components/controls/private/TextEditor.cpp
+++ b/Widgets/src/components/controls/private/TextEditor.cpp
@@ -52,28 +52,21 @@ void TextEditor::pointerDown(Event& event, size_t position) {
 	} else {
 		setCaret(position, event.modifiers().shift);
 	}
+	// Only a single plain press selects by dragging; a focusing press selected everything and keeps it.
 	mDragging = event.clickCount() == 1 && !focusPress;
 	mFocusedByPress = false;
-	if (mHost.ui()) {
-		// The editor may be a grandchild of the pressed widget (a scroll view's content), so the
-		// router's focus walk cannot reach it; focus the host explicitly.
-		mHost.ui()->setKeyboardFocus(&mHost);
-		mHost.ui()->capturePointer(mHost);
-	}
+	// The editor may be a grandchild of the pressed widget (a scroll view's content), so the router's focus walk
+	// cannot reach it; focus the host explicitly.
+	if (mHost.ui()) mHost.ui()->setKeyboardFocus(&mHost);
 	caretMoved();
 	event.accept();
 }
 
-void TextEditor::pointerMove(Event& event, size_t position) {
-	if (!mDragging) return;
-	setCaret(position, true);
-	event.accept();
-}
-
-void TextEditor::pointerUp(Event& event) {
-	if (event.button() != PointerButton::Left || !mDragging) return;
-	mDragging = false;
-	if (mHost.ui()) mHost.ui()->releasePointer(mHost);
+void TextEditor::drag(Event& event, size_t position) {
+	const Dragged* dragged = event.drag();
+	if (!dragged || dragged->button != PointerButton::Left || !mDragging) return;
+	if (dragged->phase == DragPhase::Finished || dragged->phase == DragPhase::Cancelled) mDragging = false;
+	else setCaret(position, true);
 	event.accept();
 }
 
@@ -121,8 +114,12 @@ void TextEditor::key(Event& event) {
 		case Key::Delete: eraseForward(control); break;
 		case Key::Enter:
 		case Key::KeypadEnter:
-			if (control || mSingleLine) commit();
-			else insert("\n");
+			if (control || mSingleLine) {
+				commit();
+				if (mOnSubmitted) mOnSubmitted(mBuffer.text());
+			} else {
+				insert("\n");
+			}
 			break;
 		case Key::Escape:
 			// Focusing elsewhere commits; the area only drops the focus, the field commits through it.
@@ -188,7 +185,10 @@ void TextEditor::focusChanged() {
 	mFocused = focused;
 	mFocusedByPress = focused && mHost.ui() && mHost.ui()->isButtonDown(PointerButton::Left);
 	updateTextInputArea();
-	caretMoved();
+	// Focus only restarts the blink: the caret has not moved, so its owner must not scroll to it (a press that focuses
+	// moves the caret right after, and that move is what reveals).
+	mBlinkMs = 0;
+	mHost.requestPaint();
 	if (focused) {
 		if (mOnEditingStarted) mOnEditingStarted();
 		return;
diff --git a/Widgets/src/components/controls/private/TextField.cpp b/Widgets/src/components/controls/private/TextField.cpp
index 25e257be..a870398a 100644
--- a/Widgets/src/components/controls/private/TextField.cpp
+++ b/Widgets/src/components/controls/private/TextField.cpp
@@ -1,5 +1,6 @@
 #include "TextField.hpp"
 #include "Canvas.hpp"
+#include "Glyph.hpp"
 
 #include <algorithm>
 
@@ -62,11 +63,7 @@ void TextField::onEvent(Event& event) {
 			mEditor.pointerDown(event, positionAt(event.position().x));
 			break;
 
-		case Event::Type::PointerMove:
-			mEditor.pointerMove(event, positionAt(event.position().x));
-			break;
-
-		case Event::Type::PointerUp: mEditor.pointerUp(event); break;
+		case Event::Type::Drag: mEditor.drag(event, positionAt(event.position().x)); break;
 
 		case Event::Type::KeyDown: mEditor.key(event); break;
 
@@ -171,11 +168,8 @@ StepButton::StepButton(int direction) :
 }
 
 void StepButton::paintIcon(Canvas& painter, const RectF& box) {
-	const Vec2F center = box.pos + box.size / 2.0f;
-	const halnf half = std::min(box.size.x, box.size.y) / 2;
 	const RGBA color = isEffectivelyEnabled() ? theme().palette.text : theme().palette.mutedText;
-	painter.line(center - Vec2F(half, 0.0f), center + Vec2F(half, 0.0f), color, kStepIconStroke);
-	if (mDirection > 0) painter.line(center - Vec2F(0.0f, half), center + Vec2F(0.0f, half), color, kStepIconStroke);
+	paintGlyph(painter, mDirection > 0 ? Glyph::Plus : Glyph::Minus, box, color, kStepIconStroke);
 }
 
 NumberField::NumberField(halnf minimum, halnf maximum, halnf value, halnf step) :
diff --git a/Widgets/src/components/controls/private/TitledPanel.cpp b/Widgets/src/components/controls/private/TitledPanel.cpp
new file mode 100644
index 00000000..2a1fd3bb
--- /dev/null
+++ b/Widgets/src/components/controls/private/TitledPanel.cpp
@@ -0,0 +1,130 @@
+#include "TitledPanel.hpp"
+
+#include "BoxLayout.hpp"
+
+#include <algorithm>
+#include <memory>
+
+using namespace tp;
+using namespace tp::ui;
+
+namespace {
+	constexpr halnf kHeaderGap = 2;
+	constexpr halnf kFooterGap = 6;
+	const Insets kHeaderPadding = Insets::symmetric(8, 1);
+	const Insets kBodyPadding = Insets::uniform(6);
+}
+
+// Header, body and footer in a column; the corner widget, if any, sits over the bottom-right corner.
+class TitledPanel::TitledLayout : public ColumnLayout {
+public:
+	explicit TitledLayout(TitledPanel& panel) :
+		mPanel(panel) {}
+
+protected:
+	[[nodiscard]] Extent measureChildren(const LayoutContext& context, Axis axis, halnf crossLength) const override {
+		return mPanel.mCorner ? ColumnLayout::measureChildren(context.without(*mPanel.mCorner), axis, crossLength)
+													: ColumnLayout::measureChildren(context, axis, crossLength);
+	}
+
+	void arrangeChildren(LayoutContext& context, const RectF& area) override {
+		if (!mPanel.mCorner) {
+			ColumnLayout::arrangeChildren(context, area);
+			return;
+		}
+		LayoutContext column = context.without(*mPanel.mCorner);
+		ColumnLayout::arrangeChildren(column, area);
+		if (!mPanel.mCorner->isVisible()) return;
+		const Vec2F size = { context.measure(*mPanel.mCorner, Axis::Horizontal, kUnbounded).preferred,
+												 context.measure(*mPanel.mCorner, Axis::Vertical, kUnbounded).preferred };
+		context.place(*mPanel.mCorner, makeRect(area.pos + area.size - size, size));
+	}
+
+private:
+	TitledPanel& mPanel;
+};
+
+TitledPanel::TitledPanel(std::string title, Surface surface) :
+	Panel(surface),
+	mTitle(std::move(title)) {
+	setDebugName("titled panel");
+	setLayout(std::make_unique<TitledLayout>(*this));
+
+	mHeader.setDebugName("panel header");
+	mHeader.setSizing(AxisSizing::fill(), AxisSizing::fit());
+	RowLayout& headerRow = mHeader.emplaceLayout<RowLayout>(kHeaderGap);
+	headerRow.setPadding(kHeaderPadding);
+	headerRow.setCrossAlign(CrossAlign::Center);
+	mTitle.setSizing(AxisSizing::fill(), AxisSizing::fit());
+	mHeader.addChild(mTitle);
+
+	mBody.setDebugName("panel body");
+	mBody.setSizing(AxisSizing::fill(), AxisSizing::fill());
+	mBody.emplaceLayout<ColumnLayout>(0).setPadding(kBodyPadding);
+
+	mFooter.setDebugName("panel footer");
+	mFooter.setSizing(AxisSizing::fill(), AxisSizing::fit());
+	mFooter.emplaceLayout<RowLayout>(kFooterGap);
+	// The spacer pushes the footer's buttons to the right, where dialogs keep them.
+	mFooterSpacer.setSizing(AxisSizing::fill(), AxisSizing::fixed(1));
+	mFooter.addChild(mFooterSpacer);
+	mFooter.setVisible(false);
+
+	addChild(mHeader);
+	addChild(mBody);
+	addChild(mFooter);
+}
+
+Widget& TitledPanel::footer() {
+	mFooter.setVisible(true);
+	return mFooter;
+}
+
+void TitledPanel::setLeadingHeader(Widget* widget) {
+	if (mLeading) mHeader.removeChild(*mLeading);
+	mLeading = widget;
+	if (widget) mHeader.insertChild(0, *widget);
+}
+
+void TitledPanel::addHeaderAction(Widget& action) { mHeader.addChild(action); }
+
+void TitledPanel::removeHeaderAction(Widget& action) {
+	if (action.parent() == &mHeader && &action != &mTitle) mHeader.removeChild(action);
+}
+
+void TitledPanel::setContent(Widget* content) {
+	if (content == mContent) return;
+	if (mContent && mContent->parent() == &mBody) mBody.removeChild(*mContent);
+	mContent = content;
+	if (content) mBody.addChild(*content);
+}
+
+void TitledPanel::setBodyPadding(Insets padding) { mBody.layout()->setPadding(padding); }
+
+void TitledPanel::setScrollsBody(bool scrolls) {
+	if (scrolls == scrollsBody()) return;
+	// The body keeps its place between header and footer; scrolling puts a scroller there with the body inside.
+	const AxisSizing width = mBody.sizing().horizontal;
+	if (scrolls) {
+		const size_t index = (size_t) (std::find(children().begin(), children().end(), &mBody) - children().begin());
+		removeChild(mBody);
+		mBody.setSizing(AxisSizing::fill(), AxisSizing::fit());
+		mBodyScroll.setSizing(width, AxisSizing::fill());
+		mBodyScroll.setContent(&mBody);
+		insertChild(index, mBodyScroll);
+		return;
+	}
+	const size_t index = (size_t) (std::find(children().begin(), children().end(), &mBodyScroll) - children().begin());
+	mBodyScroll.setContent(nullptr);
+	removeChild(mBodyScroll);
+	mBody.setSizing(mBodyScroll.sizing().horizontal, AxisSizing::fill());
+	insertChild(index, mBody);
+}
+
+void TitledPanel::setCornerWidget(Widget* widget) {
+	if (mCorner) removeChild(*mCorner);
+	mCorner = widget;
+	if (widget) addChild(*widget);
+}
+
+void TitledPanel::setBodyGap(halnf gap) { static_cast<ColumnLayout*>(mBody.layout())->setGap(gap); }
diff --git a/Widgets/src/components/controls/private/Toggles.cpp b/Widgets/src/components/controls/private/Toggles.cpp
index 7f079f49..c1458f7f 100644
--- a/Widgets/src/components/controls/private/Toggles.cpp
+++ b/Widgets/src/components/controls/private/Toggles.cpp
@@ -1,6 +1,7 @@
 #include "Toggles.hpp"
 #include "Canvas.hpp"
 
+#include "Glyph.hpp"
 #include "Theme.hpp"
 
 #include <algorithm>
@@ -9,9 +10,10 @@ using namespace tp;
 using namespace tp::ui;
 
 namespace {
+	constexpr halnf kCheckMarkFraction = 0.55f;
+
 	RGBA mix(const RGBA& from, const RGBA& to, halnf amount) { return Palette::mix(from, to, amount); }
 
-	RGBA withAlpha(const RGBA& color, halnf alpha) { return { color.r, color.g, color.b, color.a * alpha }; }
 }
 
 ToggleControl::ToggleControl(std::string text) :
@@ -78,18 +80,12 @@ void Checkbox::paintIndicator(Canvas& painter, const RectF& box, halnf checkedAm
 
 	if (showsFocusRing()) painter.outline(insetRect(box, -3), palette.focusRing, radius + 3, 2);
 	painter.rect(box, mix(uncheckedFill, checkedFill, checkedAmount), radius);
-	painter.outline(box, withAlpha(uncheckedBorder, 1 - checkedAmount), radius);
+	painter.outline(box, Palette::faded(uncheckedBorder, 1 - checkedAmount), radius);
 
 	if (checkedAmount <= 0.01f) return;
 
-	const Vec2F origin = box.pos;
-	const halnf unit = box.size.x;
-	const halnf grow = 0.6f + 0.4f * checkedAmount;
-	const Vec2F center = box.center();
-	const auto point = [&](halnf x, halnf y) { return center + (origin + Vec2F(unit * x, unit * y) - center) * grow; };
-	painter.polyline(
-		{ point(0.27f, 0.52f), point(0.44f, 0.68f), point(0.74f, 0.35f) }, withAlpha(palette.onToggle, checkedAmount), 2
-	);
+	const halnf markSide = box.size.x * kCheckMarkFraction * (0.6f + 0.4f * checkedAmount);
+	paintGlyph(painter, Glyph::Check, glyphBox(box, markSide), Palette::faded(palette.onToggle, checkedAmount), theme());
 }
 
 Switch::Switch(std::string text) :
@@ -134,7 +130,7 @@ void RadioButton::paintIndicator(Canvas& painter, const RectF& box, halnf checke
 
 	if (showsFocusRing()) painter.circleOutline(center, radius + 3, palette.focusRing, 2);
 	painter.circle(center, radius, mix(uncheckedFill, checkedFill, checkedAmount));
-	painter.circleOutline(center, radius, withAlpha(uncheckedBorder, 1 - checkedAmount));
+	painter.circleOutline(center, radius, Palette::faded(uncheckedBorder, 1 - checkedAmount));
 
 	if (checkedAmount > 0.01f) painter.circle(center, radius * 0.4f * checkedAmount, palette.onToggle);
 }
@@ -144,6 +140,10 @@ void RadioButton::onActivated() {
 	else setChecked(true);
 }
 
+RadioGroup::RadioGroup() {
+	mSelection.setOnChanged([this]() { refreshButtons(); });
+}
+
 RadioGroup::~RadioGroup() {
 	for (RadioButton* button : mButtons)
 		button->mGroup = nullptr;
@@ -154,32 +154,44 @@ void RadioGroup::add(RadioButton& button) {
 
 	button.mGroup = this;
 	mButtons.push_back(&button);
+	// A button that was checked before joining becomes the group's choice.
+	if (button.isChecked()) mSelection.select(mButtons.size() - 1);
+	else refreshButtons();
 }
 
 void RadioGroup::remove(RadioButton& button) {
-	mButtons.erase(std::remove(mButtons.begin(), mButtons.end(), &button), mButtons.end());
+	const auto found = std::find(mButtons.begin(), mButtons.end(), &button);
+	if (found == mButtons.end()) return;
+
+	const size_t index = (size_t) (found - mButtons.begin());
+	const std::optional<size_t> chosen = mSelection.current();
+	mButtons.erase(found);
 	button.mGroup = nullptr;
+	// Note: indices after the removed button shift down, so the choice follows its button.
+	if (!chosen || *chosen == index) mSelection.clear();
+	else if (*chosen > index) mSelection.select(*chosen - 1);
 }
 
 void RadioGroup::select(RadioButton& button) {
 	if (button.mGroup != this) return;
-	if (button.isChecked()) return;
+	const auto found = std::find(mButtons.begin(), mButtons.end(), &button);
+	const size_t index = (size_t) (found - mButtons.begin());
+	if (mSelection.isSelected(index)) return;
 
-	for (RadioButton* other : mButtons)
-		other->setChecked(other == &button);
-	if (mOnChanged) mOnChanged((size_t) selectedIndex());
+	mSelection.select(index);
+	if (mOnChanged) mOnChanged(index);
+}
+
+void RadioGroup::refreshButtons() {
+	for (size_t index = 0; index < mButtons.size(); index++)
+		mButtons[index]->setChecked(mSelection.isSelected(index));
 }
 
 void RadioGroup::selectIndex(size_t index) {
 	if (index < mButtons.size()) select(*mButtons[index]);
 }
 
-long RadioGroup::selectedIndex() const {
-	for (size_t index = 0; index < mButtons.size(); index++) {
-		if (mButtons[index]->isChecked()) return (long) index;
-	}
-	return -1;
-}
+long RadioGroup::selectedIndex() const { return mSelection.current() ? (long) *mSelection.current() : -1; }
 
 RadioButton* RadioGroup::selected() const {
 	const long index = selectedIndex();
diff --git a/Widgets/src/components/controls/public/Breadcrumb.hpp b/Widgets/src/components/controls/public/Breadcrumb.hpp
index 80b649ac..7f5095b3 100644
--- a/Widgets/src/components/controls/public/Breadcrumb.hpp
+++ b/Widgets/src/components/controls/public/Breadcrumb.hpp
@@ -37,8 +37,8 @@ namespace tp::ui {
 	private:
 		ScrollView mScroll{ Axis::Horizontal };
 		Widget mRow;
-		std::vector<std::unique_ptr<BreadcrumbPart>> mParts;
-		std::vector<std::unique_ptr<Label>> mSeparators;
+		// The parts in order; the row owns them and the separators between them.
+		std::vector<BreadcrumbPart*> mParts;
 		std::function<void(size_t)> mOnPartChosen;
 	};
 }
diff --git a/Widgets/src/components/controls/public/Button.hpp b/Widgets/src/components/controls/public/Button.hpp
index 4044b9a4..8cf3b6c7 100644
--- a/Widgets/src/components/controls/public/Button.hpp
+++ b/Widgets/src/components/controls/public/Button.hpp
@@ -1,7 +1,9 @@
 #pragma once
 
-#include "Control.hpp"
 #include "CanvasTypes.hpp"
+#include "Control.hpp"
+#include "Glyph.hpp"
+#include "InteractionVisual.hpp"
 
 #include <optional>
 #include <string>
@@ -68,23 +70,38 @@ namespace tp::ui {
 		std::optional<RGBA> mFill;
 	};
 
+	// A small flat button showing one core glyph, for toolbar and header actions: GlyphButton close{ Glyph::Close }.
+	// Its surface and glyph fade with an InteractionVisual; subclasses choose other colors through interactionColors().
 	class GlyphButton : public Button {
 	public:
-		enum class Glyph { Options, Hide, Previous, Next, Up };
-
 		explicit GlyphButton(Glyph glyph);
 
+		void setGlyph(Glyph glyph);
 		[[nodiscard]] Glyph glyph() const { return mGlyph; }
+		[[nodiscard]] const InteractionVisual& visual() const { return mVisual; }
 
 	protected:
+		struct GlyphColors {
+			InteractionColors surface;
+			RGBA glyphAtRest;
+			RGBA glyphRevealed;
+		};
+
 		[[nodiscard]] Extent measureContent(Axis axis, halnf crossLength) const override;
 		void paint(Canvas& painter) override;
-		[[nodiscard]] RGBA backgroundTarget() const override;
+		void onTick(halnf deltaMs) override;
+		void onAttached() override;
+		void refreshVisualState() override;
+
+		[[nodiscard]] virtual GlyphColors interactionColors() const;
+		// The glyph painted now; a subclass may follow outside state (the maximize button shows Restore when maximized).
+		[[nodiscard]] virtual Glyph displayedGlyph() const { return mGlyph; }
 
 	private:
-		void paintChevron(Canvas& painter, halnf direction, const RGBA& color) const;
-		void paintUpChevron(Canvas& painter, const RGBA& color) const;
+		[[nodiscard]] RGBA glyphColor() const;
 
 		Glyph mGlyph;
+		GlyphColors mColors;
+		InteractionVisual mVisual{ *this };
 	};
 }
diff --git a/Widgets/src/components/controls/public/Collapsible.hpp b/Widgets/src/components/controls/public/Collapsible.hpp
index 894df1f0..18488d2a 100644
--- a/Widgets/src/components/controls/public/Collapsible.hpp
+++ b/Widgets/src/components/controls/public/Collapsible.hpp
@@ -8,6 +8,21 @@
 
 namespace tp::ui {
 
+	class CollapsibleHeader;
+
+	// The room in a header for what it paints itself (chevron, title, summary): measured from that text, never hit.
+	class PaintedRoom : public Widget {
+	public:
+		explicit PaintedRoom(const CollapsibleHeader& header);
+
+	protected:
+		[[nodiscard]] Extent measureContent(Axis axis, halnf crossLength) const override;
+		[[nodiscard]] bool hitTest(Vec2F) const override { return false; }
+
+	private:
+		const CollapsibleHeader& mHeader;
+	};
+
 	class CollapsibleHeader : public Control {
 	public:
 		explicit CollapsibleHeader(std::string title);
@@ -22,17 +37,18 @@ namespace tp::ui {
 		[[nodiscard]] Widget* action() const { return mAction; }
 
 	protected:
-		[[nodiscard]] Extent measureContent(Axis axis, halnf crossLength) const override;
 		void paint(Canvas& painter) override;
 		[[nodiscard]] RGBA backgroundTarget() const override;
 
 	private:
-		class HeaderLayout;
-		friend class HeaderLayout;
+		friend class PaintedRoom;
 
+		[[nodiscard]] Extent paintedExtent(Axis axis) const;
 		[[nodiscard]] halnf actionWidth() const;
 
 		std::string mTitle;
+		// Holds the room the header paints its chevron, title and summary in, before the action.
+		PaintedRoom mPainted{ *this };
 		std::string mSummary;
 		Widget* mAction = nullptr;
 		AnimatedFloat mTurn{ 0 };
@@ -60,8 +76,8 @@ namespace tp::ui {
 		void finishTransitions() override;
 
 	private:
-		class SectionLayout;
-		friend class SectionLayout;
+		class RevealLayout;
+		friend class RevealLayout;
 
 		CollapsibleHeader mHeader;
 		Widget mReveal;
diff --git a/Widgets/src/components/controls/public/Containers.hpp b/Widgets/src/components/controls/public/Containers.hpp
index faac76e5..473eb503 100644
--- a/Widgets/src/components/controls/public/Containers.hpp
+++ b/Widgets/src/components/controls/public/Containers.hpp
@@ -1,13 +1,19 @@
 #pragma once
 
-#include <functional>
-#include <vector>
-#include "ScrollPhysics.hpp"
 #include "Animation.hpp"
+#include "InteractionVisual.hpp"
+#include "ScrollPhysics.hpp"
+#include "Viewport.hpp"
 #include "Widget.hpp"
 
+#include <functional>
+#include <optional>
+#include <vector>
+
 namespace tp::ui {
 
+	// A container painting one theme surface behind its children. Raised surfaces sit above their neighbours and cast
+	// the theme's elevation shadow unless setElevated(false) keeps them flat (rows inside a list, inline art).
 	class Panel : public Widget {
 	public:
 		enum class Surface { None, Window, Base, Raised };
@@ -15,8 +21,11 @@ namespace tp::ui {
 		explicit Panel(Surface surface = Surface::Base);
 
 		void setSurface(Surface surface);
+		[[nodiscard]] Surface surface() const { return mSurface; }
 		void setCornerRadius(halnf radius);
 		void setBorder(bool border);
+		void setElevated(bool elevated);
+		[[nodiscard]] bool isElevated() const { return mElevated && mSurface == Surface::Raised; }
 		[[nodiscard]] halnf effectiveCornerRadius() const;
 
 	protected:
@@ -26,6 +35,7 @@ namespace tp::ui {
 		Surface mSurface;
 		halnf mCornerRadius = -1;
 		bool mBorder = false;
+		bool mElevated = true;
 	};
 
 	class Separator : public Widget {
@@ -52,11 +62,13 @@ namespace tp::ui {
 
 	class ScrollView;
 
+	// The bar beside a scroll view: a thin track that appears while hovered, dragged or briefly after scrolling. The
+	// thumb follows router drags; clicking the track scrolls there and keeps the thumb under the pointer.
 	class ScrollBar : public Widget {
 	public:
 		explicit ScrollBar(ScrollView& view);
 
-		[[nodiscard]] halnf revealAmount() const { return mReveal.value(); }
+		[[nodiscard]] halnf revealAmount() const { return mVisual.reveal(); }
 		[[nodiscard]] bool isDragging() const { return mDragging; }
 		[[nodiscard]] RectF trackRect() const;
 		[[nodiscard]] RectF thumbRect() const;
@@ -65,41 +77,46 @@ namespace tp::ui {
 
 	protected:
 		void onEvent(Event& event) override;
-		void onHoverChanged() override;
+		[[nodiscard]] bool acceptsDrag(PointerButton button) const override { return button == PointerButton::Left; }
+		void onHoverChanged() override { refreshReveal(); }
 		void onTick(halnf deltaMs) override;
 		void paint(Canvas& painter) override;
 
 	private:
 		[[nodiscard]] halnf offsetForThumbAt(halnf pointerAlong) const;
+		void grab(halnf pointerAlong, bool animate);
 		void refreshReveal();
 
 		ScrollView& mView;
+		InteractionVisual mVisual{ *this };
 		bool mDragging = false;
 		halnf mGrabOffset = 0;
 		halnf mFlashMs = 0;
-		AnimatedFloat mReveal{ 0, Motion::fluid() };
 	};
 
-	class ScrollView : public Widget {
+	// A Viewport that scrolls along one axis, with a scroll bar. Wheel notches glide; touchpad, touch drags, flings and
+	// edge stretch come from the Viewport, the same in every scroller; Shift+wheel and horizontal scroll reach a
+	// horizontal ScrollView too.
+	class ScrollView : public Viewport {
 	public:
-		struct DragSample {
-			uint4 timeMs;
-			halnf offset;
-		};
-
 		explicit ScrollView(Axis scrollAxis = Axis::Vertical);
 
-		void setContent(Widget* content);
-		[[nodiscard]] Widget* content() const { return mContent; }
+		void scrollTo(halnf offset) { Viewport::scrollTo(alongAxis(offset)); }
+		void scrollBy(halnf delta) { Viewport::scrollBy(alongAxis(delta)); }
+		void jumpTo(halnf offset) { Viewport::jumpTo(alongAxis(offset)); }
+		// Where the view is heading (the end of a glide or fling).
+		[[nodiscard]] halnf offset() const { return along(targetOffset(), mScrollAxis); }
+		// Where the view is now.
+		[[nodiscard]] halnf currentOffset() const { return along(Viewport::offset(), mScrollAxis); }
+		[[nodiscard]] halnf maximumOffset() const { return along(Viewport::maximumOffset(), mScrollAxis); }
+		[[nodiscard]] halnf contentLength() const;
+		[[nodiscard]] bool isScrollable() const { return Viewport::isScrollable(mScrollAxis); }
+		// Reveals a range along the scroll axis, in content coordinates, with the theme's reveal margin by default.
+		void revealRange(halnf start, halnf length, std::optional<halnf> margin = std::nullopt);
+		// The offset that reveals a range along the scroll axis, without moving.
+		[[nodiscard]] halnf revealOffsetFor(halnf start, halnf length, std::optional<halnf> margin = std::nullopt) const;
 
-		void scrollTo(halnf offset);
-		void scrollBy(halnf delta);
-		[[nodiscard]] halnf offset() const { return mOffset.target(); }
-		[[nodiscard]] halnf maximumOffset() const;
-		[[nodiscard]] halnf contentLength() const { return mContentLength; }
-		[[nodiscard]] bool isScrollable() const { return maximumOffset() > 0; }
-
-		void setWheelStep(halnf step) { mWheelStep = step; }
+		void setWheelStep(halnf step);
 		void setOnScrolled(std::function<void(halnf offset)> callback) { mOnScrolled = std::move(callback); }
 		void setShowsScrollBar(bool shows) {
 			mShowsScrollBar = shows;
@@ -107,60 +124,28 @@ namespace tp::ui {
 		}
 
 		[[nodiscard]] Axis scrollAxis() const { return mScrollAxis; }
-		[[nodiscard]] halnf viewportLength() const;
-		[[nodiscard]] halnf currentOffset() const { return mOffset.value(); }
-		[[nodiscard]] bool isBouncing() const { return mStartStretch.isActive() || mEndStretch.isActive(); }
-		[[nodiscard]] halnf stretchOffset() const;
-		[[nodiscard]] const StretchEffect& startStretch() const { return mStartStretch; }
-		[[nodiscard]] const StretchEffect& endStretch() const { return mEndStretch; }
-		[[nodiscard]] const FlingSpline& fling() const { return mFling; }
-		void jumpTo(halnf offset);
+		[[nodiscard]] halnf viewportLength() const { return lengthAlong(localRect(), mScrollAxis); }
+		[[nodiscard]] bool isBouncing() const { return isStretched(); }
+		[[nodiscard]] halnf stretchOffset() const { return along(stretch(), mScrollAxis); }
+		[[nodiscard]] const StretchEffect& startStretch() const { return Viewport::startStretch(mScrollAxis); }
+		[[nodiscard]] const StretchEffect& endStretch() const { return Viewport::endStretch(mScrollAxis); }
+		[[nodiscard]] const FlingSpline& fling() const { return Viewport::fling(mScrollAxis); }
+		[[nodiscard]] halnf flingVelocity() const { return Viewport::flingVelocity(mScrollAxis); }
 
 		[[nodiscard]] ScrollBar& scrollBar() { return mScrollBar; }
 		[[nodiscard]] halnf scrollBarReveal() const { return mScrollBar.revealAmount(); }
-		[[nodiscard]] halnf flingVelocity() const { return mFlingVelocity; }
-		[[nodiscard]] static halnf averageVelocity(const std::vector<DragSample>& samples, uint4 nowMs);
 
 	protected:
-		[[nodiscard]] Extent measureContent(Axis axis, halnf crossLength) const override;
-		void onEvent(Event& event) override;
-		void filterDescendantEvent(Event& event) override;
-		void onTick(halnf deltaMs) override;
+		void arrangeOverlays(LayoutContext& context, const RectF& area) override;
+		void offsetChanged() override;
 
 	private:
-		class ScrollLayout;
-		friend class ScrollBar;
-
-		static constexpr halnf kDragThreshold = 8;
-		static constexpr halnf kFlingMinimumSpeed = 0.1f;
-		static constexpr halnf kFlingRecentMs = 100;
-
-		void keepOffsetInRange();
-		void applyOffset();
-		void trackDrag(Event& event);
-		void dragBy(halnf delta);
-		void rememberDragSample(uint4 timeMs);
-		[[nodiscard]] halnf averageDragVelocity(uint4 nowMs) const;
-		[[nodiscard]] bool startsDrag(const Event& event) const;
+		[[nodiscard]] Vec2F alongAxis(halnf length) const;
 
 		Axis mScrollAxis;
-		Widget* mContent = nullptr;
 		ScrollBar mScrollBar{ *this };
-		AnimatedFloat mOffset;
-		halnf mContentLength = 0;
-		halnf mWheelStep = 48;
 		std::function<void(halnf)> mOnScrolled;
 		halnf mReportedOffset = 0;
 		bool mShowsScrollBar = true;
-		bool mDragPending = false;
-		bool mDragging = false;
-		Vec2F mDragStart = { 0, 0 };
-		halnf mDragStartOffset = 0;
-		std::vector<DragSample> mDragSamples;
-		halnf mFlingVelocity = 0;
-		halnf mLastDragAlong = 0;
-		FlingSpline mFling;
-		StretchEffect mStartStretch;
-		StretchEffect mEndStretch;
 	};
 }
diff --git a/Widgets/src/components/controls/public/ResizeHandle.hpp b/Widgets/src/components/controls/public/ResizeHandle.hpp
index d8a0db99..98d4fcd1 100644
--- a/Widgets/src/components/controls/public/ResizeHandle.hpp
+++ b/Widgets/src/components/controls/public/ResizeHandle.hpp
@@ -1,12 +1,14 @@
 #pragma once
 
-#include "Animation.hpp"
+#include "InteractionVisual.hpp"
 #include "Widget.hpp"
 
 #include <functional>
 
 namespace tp::ui {
 
+	// A thin bar that resizes something along one axis: it reveals its line while hovered or dragged, and reports the
+	// window coordinate of its center while the router drags it (so a press that does not move is not a resize).
 	class ResizeHandle : public Widget {
 	public:
 		explicit ResizeHandle(Axis dragAxis);
@@ -17,12 +19,13 @@ namespace tp::ui {
 
 		[[nodiscard]] Axis dragAxis() const { return mDragAxis; }
 		[[nodiscard]] bool isDragging() const { return mDragging; }
-		[[nodiscard]] halnf revealAmount() const { return mReveal.value(); }
+		[[nodiscard]] halnf revealAmount() const { return mVisual.reveal(); }
 
 		[[nodiscard]] RectF lineRect() const;
 
 	protected:
 		void onEvent(Event& event) override;
+		[[nodiscard]] bool acceptsDrag(PointerButton button) const override { return button == PointerButton::Left; }
 		void onHoverChanged() override;
 		void onTick(halnf deltaMs) override;
 		void paint(Canvas& painter) override;
@@ -33,7 +36,7 @@ namespace tp::ui {
 		Axis mDragAxis;
 		bool mDragging = false;
 		halnf mGrabOffset = 0;
-		AnimatedFloat mReveal{ 0, Motion::quick() };
+		InteractionVisual mVisual{ *this };
 
 		std::function<void()> mOnStarted;
 		std::function<void(halnf)> mOnDragged;
diff --git a/Widgets/src/components/controls/public/SegmentedControl.hpp b/Widgets/src/components/controls/public/SegmentedControl.hpp
new file mode 100644
index 00000000..04a42aa6
--- /dev/null
+++ b/Widgets/src/components/controls/public/SegmentedControl.hpp
@@ -0,0 +1,103 @@
+#pragma once
+
+#include "Button.hpp"
+#include "SelectionModel.hpp"
+
+#include <functional>
+#include <memory>
+#include <string>
+#include <vector>
+
+namespace tp::ui {
+
+	// A row of buttons where one (or, in multiple mode, several) is selected: tool pickers, view modes, tab strips.
+	// The choice is a SelectionModel over the segment indices; arrows move the choice, Control/Shift clicks extend it in
+	// multiple mode. SegmentedControl<Mode> view; view.addSegment("Editor", Mode::Editor); view.setValue(Mode::Split);
+	class SegmentedControlBase : public Widget {
+	public:
+		using Mode = SelectionModel<size_t>::Mode;
+
+		explicit SegmentedControlBase(Mode mode = Mode::Single);
+
+		[[nodiscard]] size_t segmentCount() const { return mButtons.size(); }
+		[[nodiscard]] Button& segment(size_t index) { return *mButtons[index]; }
+		[[nodiscard]] const Button& segment(size_t index) const { return *mButtons[index]; }
+		[[nodiscard]] const SelectionModel<size_t>& selection() const { return mSelection; }
+
+		void selectIndex(size_t index);
+		[[nodiscard]] std::optional<size_t> selectedIndex() const { return mSelection.current(); }
+		[[nodiscard]] bool isIndexSelected(size_t index) const { return mSelection.isSelected(index); }
+
+		void setButtonStyle(Button::Style style);
+		// Segments are plain buttons unless a factory makes them (e.g. a tab strip with its own selected look).
+		void setButtonFactory(std::function<std::unique_ptr<Button>(std::string text)> factory) {
+			mFactory = std::move(factory);
+		}
+		// Called with the changed selection after a user choice; not called by selectIndex.
+		void setOnIndexChanged(std::function<void()> callback) { mOnIndexChanged = std::move(callback); }
+
+	protected:
+		Button& addButton(std::string text);
+		void removeButton(size_t index);
+		void onEvent(Event& event) override;
+		[[nodiscard]] bool acceptsKeyboardFocus() const override { return true; }
+
+	private:
+		void clicked(size_t index);
+		void refreshButtons();
+		[[nodiscard]] std::vector<size_t> order() const;
+
+		SelectionModel<size_t> mSelection;
+		std::vector<std::unique_ptr<Button>> mButtons;
+		Button::Style mButtonStyle = Button::Style::Tab;
+		std::function<std::unique_ptr<Button>(std::string)> mFactory;
+		bool mUserChange = false;
+		std::function<void()> mOnIndexChanged;
+	};
+
+	template <typename Value>
+	class SegmentedControl : public SegmentedControlBase {
+	public:
+		explicit SegmentedControl(Mode mode = Mode::Single) :
+			SegmentedControlBase(mode) {
+			setOnIndexChanged([this]() {
+				if (mOnChanged && selectedIndex()) mOnChanged(mValues[*selectedIndex()]);
+			});
+		}
+
+		Button& addSegment(std::string text, Value value) {
+			mValues.push_back(value);
+			return addButton(std::move(text));
+		}
+
+		void removeSegmentAt(size_t index) {
+			if (index >= mValues.size()) return;
+			mValues.erase(mValues.begin() + (std::ptrdiff_t) index);
+			removeButton(index);
+		}
+		void setSegmentValue(size_t index, Value value) {
+			if (index < mValues.size()) mValues[index] = std::move(value);
+		}
+
+		void setValue(const Value& value) {
+			for (size_t index = 0; index < mValues.size(); index++) {
+				if (mValues[index] == value) selectIndex(index);
+			}
+		}
+		[[nodiscard]] std::optional<Value> value() const {
+			return selectedIndex() ? std::optional<Value>(mValues[*selectedIndex()]) : std::nullopt;
+		}
+		[[nodiscard]] std::vector<Value> values() const {
+			std::vector<Value> chosen;
+			for (size_t index : selection().selected())
+				chosen.push_back(mValues[index]);
+			return chosen;
+		}
+
+		void setOnChanged(std::function<void(const Value&)> callback) { mOnChanged = std::move(callback); }
+
+	private:
+		std::vector<Value> mValues;
+		std::function<void(const Value&)> mOnChanged;
+	};
+}
diff --git a/Widgets/src/components/controls/public/Slider.hpp b/Widgets/src/components/controls/public/Slider.hpp
index d74a324a..d50db384 100644
--- a/Widgets/src/components/controls/public/Slider.hpp
+++ b/Widgets/src/components/controls/public/Slider.hpp
@@ -49,6 +49,7 @@ namespace tp::ui {
 	protected:
 		[[nodiscard]] Extent measureContent(Axis axis, halnf crossLength) const override;
 		void onEvent(Event& event) override;
+		[[nodiscard]] bool acceptsDrag(PointerButton button) const override { return button == PointerButton::Left; }
 		void paint(Canvas& painter) override;
 		void refreshVisualState() override;
 
@@ -70,6 +71,8 @@ namespace tp::ui {
 		halnf mStep = 0;
 		Scale mScale = Scale::Linear;
 		Axis mOrientation = Axis::Horizontal;
+		void setDragging(bool dragging);
+
 		bool mDragging = false;
 		AnimatedFloat mHandleReveal{ 0 };
 		std::function<void(halnf)> mOnChanged;
diff --git a/Widgets/src/components/controls/public/TextArea.hpp b/Widgets/src/components/controls/public/TextArea.hpp
index 931f4190..02c644cd 100644
--- a/Widgets/src/components/controls/public/TextArea.hpp
+++ b/Widgets/src/components/controls/public/TextArea.hpp
@@ -68,6 +68,7 @@ namespace tp::ui {
 	protected:
 		[[nodiscard]] Extent measureContent(Axis axis, halnf crossLength) const override;
 		void onEvent(Event& event) override;
+		[[nodiscard]] bool acceptsDrag(PointerButton button) const override { return button == PointerButton::Left; }
 		void paint(Canvas& painter) override;
 		void onTick(halnf deltaMs) override;
 		void onKeyboardFocusChanged() override {
@@ -164,7 +165,6 @@ namespace tp::ui {
 		void revealCaret();
 		void applyBoxHeight();
 		void viewportArranged(halnf height);
-		[[nodiscard]] halnf caretRevealOffset(halnf viewportHeight) const;
 
 		ScrollView mScroll{ Axis::Vertical };
 		TextAreaEditor mEditor;
diff --git a/Widgets/src/components/controls/public/TextEditor.hpp b/Widgets/src/components/controls/public/TextEditor.hpp
index eeb6324d..b7443e57 100644
--- a/Widgets/src/components/controls/public/TextEditor.hpp
+++ b/Widgets/src/components/controls/public/TextEditor.hpp
@@ -38,6 +38,9 @@ namespace tp::ui {
 		// Internal: fires when the text changed, for presentation state (layout, highlights). Not the user callback.
 		void setOnEditApplied(std::function<void()> callback) { mOnApplied = std::move(callback); }
 		void setOnCommitted(std::function<void(const std::string&)> callback) { mOnCommitted = std::move(callback); }
+		// Fired only when Enter submits a single-line editor, not when it commits by losing focus: a dialog's field
+		// uses it to confirm, so a click on Cancel (which commits by focus) does not also submit.
+		void setOnSubmitted(std::function<void(const std::string&)> callback) { mOnSubmitted = std::move(callback); }
 		void setOnCaretMoved(std::function<void()> callback) { mOnCaretMoved = std::move(callback); }
 		void setOnEditingStarted(std::function<void()> callback) { mOnEditingStarted = std::move(callback); }
 		void setPasteHandler(std::function<bool()> handler) { mPasteHandler = std::move(handler); }
@@ -51,8 +54,9 @@ namespace tp::ui {
 		void setLineSelector(std::function<void(size_t position)> selector) { mLineSelector = std::move(selector); }
 
 		void pointerDown(Event& event, size_t position);
-		void pointerMove(Event& event, size_t position);
-		void pointerUp(Event& event);
+		// A router drag that started from a press on the text extends the selection to where the pointer is.
+		void drag(Event& event, size_t position);
+		[[nodiscard]] bool selectsByDragging() const { return mDragging; }
 		void key(Event& event);
 		void text(Event& event);
 		// Returns whether the editor wants to keep ticking (blink while focused).
@@ -102,6 +106,7 @@ namespace tp::ui {
 		std::function<void(const std::string&)> mOnEdited;
 		std::function<void()> mOnApplied;
 		std::function<void(const std::string&)> mOnCommitted;
+		std::function<void(const std::string&)> mOnSubmitted;
 		std::function<void()> mOnCaretMoved;
 		std::function<void()> mOnEditingStarted;
 		std::function<bool()> mPasteHandler;
diff --git a/Widgets/src/components/controls/public/TextField.hpp b/Widgets/src/components/controls/public/TextField.hpp
index afe2eb87..66daacbc 100644
--- a/Widgets/src/components/controls/public/TextField.hpp
+++ b/Widgets/src/components/controls/public/TextField.hpp
@@ -35,12 +35,16 @@ namespace tp::ui {
 		void setOnCommitted(std::function<void(const std::string&)> onCommitted) {
 			mEditor.setOnCommitted(std::move(onCommitted));
 		}
+		void setOnSubmitted(std::function<void(const std::string&)> onSubmitted) {
+			mEditor.setOnSubmitted(std::move(onSubmitted));
+		}
 
 		[[nodiscard]] bool isEditing() const { return mEditor.isEditing(); }
 
 	protected:
 		[[nodiscard]] Extent measureContent(Axis axis, halnf crossLength) const override;
 		void onEvent(Event& event) override;
+		[[nodiscard]] bool acceptsDrag(PointerButton button) const override { return button == PointerButton::Left; }
 		void paint(Canvas& painter) override;
 		void onTick(halnf deltaMs) override {
 			Control::onTick(deltaMs);
diff --git a/Widgets/src/components/controls/public/TitledPanel.hpp b/Widgets/src/components/controls/public/TitledPanel.hpp
new file mode 100644
index 00000000..7908e24c
--- /dev/null
+++ b/Widgets/src/components/controls/public/TitledPanel.hpp
@@ -0,0 +1,68 @@
+#pragma once
+
+#include "Containers.hpp"
+#include "Label.hpp"
+
+#include <string>
+
+namespace tp::ui {
+
+	// A panel with a header (a leading slot, the title, trailing actions), a body and an optional footer, stacked in a
+	// column. Dialogs, dock and floating panels and stack pages are titled panels with behaviour added; they all take
+	// content the same way:
+	//   panel.setContent(&view);            // one widget fills the body
+	//   panel.body().addChild(row);         // or several, stacked
+	//   panel.addHeaderAction(closeButton); // trailing header buttons, in order
+	class TitledPanel : public Panel {
+	public:
+		explicit TitledPanel(std::string title = {}, Surface surface = Surface::Raised);
+
+		void setTitle(std::string title) { mTitle.setText(std::move(title)); }
+		[[nodiscard]] const std::string& title() const { return mTitle.text(); }
+		[[nodiscard]] Label& titleLabel() { return mTitle; }
+		[[nodiscard]] const Label& titleLabel() const { return mTitle; }
+
+		[[nodiscard]] Widget& header() { return mHeader; }
+		[[nodiscard]] const Widget& header() const { return mHeader; }
+		[[nodiscard]] Widget& body() { return mBody; }
+		// Buttons along the bottom (a dialog's choices); hidden until something is added.
+		[[nodiscard]] Widget& footer();
+
+		// Shown before the title (a back button, an icon); null removes it.
+		void setLeadingHeader(Widget* widget);
+		[[nodiscard]] Widget* leadingHeader() const { return mLeading; }
+		// Added after the title and the previous actions.
+		void addHeaderAction(Widget& action);
+		void removeHeaderAction(Widget& action);
+		void setHeaderShown(bool shown) { mHeader.setVisible(shown); }
+
+		// Replaces the body's content with one widget (or none).
+		void setContent(Widget* content);
+		[[nodiscard]] Widget* content() const { return mContent; }
+
+		// The space around the body's content, and between stacked body children.
+		void setBodyPadding(Insets padding);
+		void setBodyGap(halnf gap);
+
+		// A widget drawn over the panel's bottom-right corner at its own size (a resize grip); null removes it.
+		void setCornerWidget(Widget* widget);
+
+		// Whether the body scrolls when its content is taller than the panel (pages of settings, long forms).
+		void setScrollsBody(bool scrolls);
+		[[nodiscard]] bool scrollsBody() const { return mBodyScroll.content() == &mBody; }
+		[[nodiscard]] ScrollView& bodyScroller() { return mBodyScroll; }
+
+	private:
+		class TitledLayout;
+
+		Widget mHeader;
+		Widget* mLeading = nullptr;
+		Label mTitle;
+		Widget mBody;
+		ScrollView mBodyScroll;
+		Widget mFooter;
+		Spacer mFooterSpacer;
+		Widget* mContent = nullptr;
+		Widget* mCorner = nullptr;
+	};
+}
diff --git a/Widgets/src/components/controls/public/Toggles.hpp b/Widgets/src/components/controls/public/Toggles.hpp
index a91c387a..28f01eaa 100644
--- a/Widgets/src/components/controls/public/Toggles.hpp
+++ b/Widgets/src/components/controls/public/Toggles.hpp
@@ -1,6 +1,7 @@
 #pragma once
 
 #include "Control.hpp"
+#include "SelectionModel.hpp"
 
 #include <string>
 #include <vector>
@@ -74,9 +75,10 @@ namespace tp::ui {
 		RadioGroup* mGroup = nullptr;
 	};
 
+	// Radio buttons sharing one choice: the same single-selection model as SegmentedControl, shown as radio buttons.
 	class RadioGroup {
 	public:
-		RadioGroup() = default;
+		RadioGroup();
 		~RadioGroup();
 
 		RadioGroup(const RadioGroup&) = delete;
@@ -92,8 +94,13 @@ namespace tp::ui {
 
 		void setOnChanged(std::function<void(size_t)> onChanged) { mOnChanged = std::move(onChanged); }
 
+		[[nodiscard]] const SelectionModel<size_t>& selection() const { return mSelection; }
+
 	private:
+		void refreshButtons();
+
 		std::vector<RadioButton*> mButtons;
+		SelectionModel<size_t> mSelection{ SelectionModel<size_t>::Mode::Single };
 		std::function<void(size_t)> mOnChanged;
 	};
 }
diff --git a/Widgets/src/components/controls/tests/SegmentedControlTests.cpp b/Widgets/src/components/controls/tests/SegmentedControlTests.cpp
new file mode 100644
index 00000000..6d69dbe7
--- /dev/null
+++ b/Widgets/src/components/controls/tests/SegmentedControlTests.cpp
@@ -0,0 +1,154 @@
+#include "BoxLayout.hpp"
+#include "SegmentedControl.hpp"
+#include "Toggles.hpp"
+#include "Ui.hpp"
+#include "UiDriver.hpp"
+
+#include "UnitTest++/UnitTest++.h"
+
+#include <vector>
+
+using namespace tp;
+using namespace tp::ui;
+using namespace tp::ui::testing;
+
+namespace {
+	enum class ViewMode { Editor, Split, Preview };
+
+	struct SegmentScene {
+		Widget root;
+		SegmentedControl<ViewMode> modes;
+		std::vector<ViewMode> changes;
+
+		explicit SegmentScene(SegmentedControlBase::Mode mode = SegmentedControlBase::Mode::Single) :
+			modes(mode) {
+			root.emplaceLayout<ColumnLayout>().setCrossAlign(CrossAlign::Start);
+			modes.addSegment("Editor", ViewMode::Editor);
+			modes.addSegment("Split", ViewMode::Split);
+			modes.addSegment("Preview", ViewMode::Preview);
+			modes.setOnChanged([this](const ViewMode& value) { changes.push_back(value); });
+			root.addChild(modes);
+		}
+	};
+}
+
+SUITE(SegmentedControl) {
+	TEST(ClickingASegmentChoosesItAndReportsTheValue) {
+		SegmentScene scene;
+		scene.modes.setValue(ViewMode::Editor);
+		UiDriver driver(scene.root, { 400, 100 });
+
+		driver.click(scene.modes.segment(2));
+
+		CHECK(scene.modes.value() == ViewMode::Preview);
+		CHECK(scene.modes.segment(2).isSelected());
+		CHECK(!scene.modes.segment(0).isSelected());
+		REQUIRE CHECK_EQUAL(1u, scene.changes.size());
+		CHECK(scene.changes[0] == ViewMode::Preview);
+	}
+
+	TEST(SettingTheValueIsNotReportedAsAUserChange) {
+		SegmentScene scene;
+		UiDriver driver(scene.root, { 400, 100 });
+
+		scene.modes.setValue(ViewMode::Split);
+
+		CHECK(scene.modes.segment(1).isSelected());
+		CHECK(scene.changes.empty());
+	}
+
+	TEST(ClickingTheChosenSegmentKeepsItChosen) {
+		SegmentScene scene;
+		scene.modes.setValue(ViewMode::Split);
+		UiDriver driver(scene.root, { 400, 100 });
+
+		driver.click(scene.modes.segment(1));
+
+		CHECK(scene.modes.value() == ViewMode::Split);
+		CHECK(scene.changes.empty());
+	}
+
+	TEST(ArrowKeysMoveTheChoiceAndWrap) {
+		SegmentScene scene;
+		scene.modes.setValue(ViewMode::Editor);
+		UiDriver driver(scene.root, { 400, 100 });
+		driver.click(scene.modes.segment(0));
+
+		driver.key(Key::Right);
+		CHECK(scene.modes.value() == ViewMode::Split);
+		driver.key(Key::Left);
+		driver.key(Key::Left);
+		CHECK(scene.modes.value() == ViewMode::Preview);
+		driver.key(Key::Home);
+		CHECK(scene.modes.value() == ViewMode::Editor);
+		CHECK_EQUAL(4u, scene.changes.size());
+	}
+
+	TEST(MultipleModeTogglesWithControl) {
+		SegmentScene scene(SegmentedControlBase::Mode::Multiple);
+		UiDriver driver(scene.root, { 400, 100 });
+
+		driver.click(scene.modes.segment(0));
+		driver.click(scene.modes.segment(2), KeyModifiers::controlOnly());
+
+		const std::vector<ViewMode> chosen = scene.modes.values();
+		REQUIRE CHECK_EQUAL(2u, chosen.size());
+		CHECK(scene.modes.segment(0).isSelected());
+		CHECK(!scene.modes.segment(1).isSelected());
+		CHECK(scene.modes.segment(2).isSelected());
+	}
+}
+
+SUITE(RadioGroupSelection) {
+	TEST(RadioGroupIsASingleChoice) {
+		Widget root;
+		root.emplaceLayout<ColumnLayout>().setCrossAlign(CrossAlign::Start);
+		RadioButton first("First");
+		RadioButton second("Second");
+		RadioGroup group;
+		group.add(first);
+		group.add(second);
+		root.addChild(first);
+		root.addChild(second);
+		std::vector<size_t> changes;
+		group.setOnChanged([&changes](size_t index) { changes.push_back(index); });
+		UiDriver driver(root, { 300, 200 });
+
+		driver.click(second);
+		CHECK(second.isChecked() && !first.isChecked());
+		CHECK_EQUAL(1, group.selectedIndex());
+		CHECK(group.selection().isSelected(1));
+
+		driver.click(first);
+		CHECK(first.isChecked() && !second.isChecked());
+		CHECK((changes == std::vector<size_t>{ 1, 0 }));
+	}
+
+	TEST(RemovingAButtonKeepsTheChoiceOnItsButton) {
+		RadioButton first("First");
+		RadioButton second("Second");
+		RadioButton third("Third");
+		RadioGroup group;
+		group.add(first);
+		group.add(second);
+		group.add(third);
+		group.selectIndex(2);
+
+		group.remove(first);
+
+		CHECK_EQUAL(1, group.selectedIndex());
+		CHECK(group.selected() == &third);
+	}
+
+	TEST(PreCheckedButtonBecomesTheChoice) {
+		RadioButton first("First");
+		RadioButton second("Second");
+		second.setChecked(true);
+		RadioGroup group;
+		group.add(first);
+		group.add(second);
+
+		CHECK_EQUAL(1, group.selectedIndex());
+		CHECK(!first.isChecked());
+	}
+}
diff --git a/Widgets/src/components/controls/tests/TitledPanelTests.cpp b/Widgets/src/components/controls/tests/TitledPanelTests.cpp
new file mode 100644
index 00000000..74b8b8b2
--- /dev/null
+++ b/Widgets/src/components/controls/tests/TitledPanelTests.cpp
@@ -0,0 +1,94 @@
+#include "BoxLayout.hpp"
+#include "Button.hpp"
+#include "Dialog.hpp"
+#include "Docking.hpp"
+#include "FloatingPanel.hpp"
+#include "Probes.hpp"
+#include "StackLayout.hpp"
+#include "TitledPanel.hpp"
+#include "Ui.hpp"
+#include "UiDriver.hpp"
+
+#include "UnitTest++/UnitTest++.h"
+
+using namespace tp;
+using namespace tp::ui;
+using namespace tp::ui::testing;
+
+SUITE(TitledPanel) {
+	TEST(HeaderSitsAboveTheBodyWithActionsAfterTheTitle) {
+		Widget root;
+		root.emplaceLayout<StackLayout>();
+		TitledPanel panel("Layers");
+		Button add("+");
+		Button close("x");
+		Box content({ 100, 300 });
+		panel.addHeaderAction(add);
+		panel.addHeaderAction(close);
+		panel.setContent(&content);
+		root.addChild(panel);
+		UiDriver driver(root, { 400, 400 });
+
+		const RectF header = panel.header().windowRect();
+		CHECK(content.windowRect().pos.y >= header.pos.y + header.size.y - 0.5f);
+		CHECK(add.windowRect().pos.x > panel.titleLabel().windowRect().pos.x);
+		CHECK(close.windowRect().pos.x > add.windowRect().pos.x);
+		CHECK(driver.paint().hasText("Layers"));
+	}
+
+	TEST(SetContentReplacesTheBodyContent) {
+		TitledPanel panel("Info");
+		Box first({ 10, 10 });
+		Box second({ 10, 10 });
+		panel.setContent(&first);
+		panel.setContent(&second);
+
+		CHECK(first.parent() == nullptr);
+		CHECK(second.parent() == &panel.body());
+		CHECK(panel.content() == &second);
+		panel.setContent(nullptr);
+		CHECK(second.parent() == nullptr);
+	}
+
+	TEST(TheFooterAppearsOnceSomethingIsAddedToIt) {
+		Widget root;
+		root.emplaceLayout<StackLayout>();
+		TitledPanel panel("Save?");
+		root.addChild(panel);
+		UiDriver driver(root, { 400, 300 });
+
+		Button ok("OK");
+		panel.footer().addChild(ok);
+		driver.layout();
+		CHECK(ok.isVisible());
+		CHECK(ok.windowRect().pos.y > panel.header().windowRect().pos.y);
+	}
+
+	TEST(AScrollingBodyScrollsItsContent) {
+		Widget root;
+		root.emplaceLayout<StackLayout>();
+		TitledPanel panel("Long");
+		Box tall({ 100, 2000 });
+		panel.setContent(&tall);
+		panel.setScrollsBody(true);
+		root.addChild(panel);
+		UiDriver driver(root, { 300, 300 });
+
+		CHECK(panel.bodyScroller().isScrollable());
+		driver.moveTo(panel.bodyScroller().windowRect().center());
+		driver.wheel({ 0, -2 });
+		driver.settle();
+		CHECK(panel.bodyScroller().offset() > 0);
+	}
+
+	TEST(DialogsDockPanelsAndFloatingPanelsAreTitledPanels) {
+		Dialog dialog("Delete?");
+		DockPanel dock("Layers");
+		FloatingPanel floating("Brush");
+		const TitledPanel* panels[] = { &dialog, &dock, &floating };
+		for (const TitledPanel* panel : panels)
+			CHECK(!panel->title().empty());
+		CHECK(dock.optionsButton().parent() == &dock.header());
+		CHECK(dialog.message().empty());
+	}
+}
diff --git a/Widgets/src/components/debug/tests/DebugToolsTests.cpp b/Widgets/src/components/debug/tests/DebugToolsTests.cpp
index ac3aedca..8d43bd60 100644
--- a/Widgets/src/components/debug/tests/DebugToolsTests.cpp
+++ b/Widgets/src/components/debug/tests/DebugToolsTests.cpp
@@ -19,7 +19,7 @@ namespace {
 
 	MenuItem* itemNamed(Menu& menu, const std::string& text) {
 		for (const auto& item : menu.items()) {
-			if (item->entry().text == text) return item.get();
+			if (item->entry().text == text) return item;
 		}
 		return nullptr;
 	}
diff --git a/Widgets/src/components/docking/private/Docking.cpp b/Widgets/src/components/docking/private/Docking.cpp
index b5d6403a..514c26c7 100644
--- a/Widgets/src/components/docking/private/Docking.cpp
+++ b/Widgets/src/components/docking/private/Docking.cpp
@@ -1,5 +1,6 @@
 #include "Docking.hpp"
 #include "Canvas.hpp"
+#include "Glyph.hpp"
 #include "ComponentSizes.hpp"
 
 #include "BoxLayout.hpp"
@@ -16,9 +17,10 @@ using namespace tp;
 using namespace tp::ui;
 
 namespace {
-	constexpr halnf kDragThreshold = 4;
 	constexpr halnf kEdgeGrip = 6;
 	constexpr halnf kCornerGrip = 16;
+	constexpr halnf kCornerGlyph = 8;
+	constexpr halnf kCornerInset = 5;
 	constexpr halnf kMinimumDockedLength = 80;
 	constexpr halnf kMaximumDockedFraction = 0.85f;
 	constexpr halnf kDropZoneFraction = 0.3f;
@@ -43,7 +45,6 @@ namespace {
 		return value;
 	}
 
-	RGBA withAlpha(const RGBA& color, halnf alpha) { return { color.r, color.g, color.b, alpha }; }
 }
 
 StripeButton::StripeButton(std::string title, ImageHandle icon) :
@@ -122,57 +123,14 @@ RGBA OptionsButton::backgroundTarget() const {
 	const Palette& palette = theme().palette;
 	if (isPopupOpen() || isPressed()) return palette.controlPressed;
 	if (isHovered()) return palette.controlHovered;
-	return withAlpha(palette.controlHovered, 0);
+	return Palette::faded(palette.controlHovered, 0);
 }
 
-class DockPanel::PanelLayout : public Layout {
-public:
-	explicit PanelLayout(DockPanel& panel) :
-		mPanel(panel) {}
-
-protected:
-	[[nodiscard]] Extent measureChildren(const LayoutContext& context, Axis axis, halnf crossLength) const override {
-		Extent header = context.measure(mPanel.mHeader, axis, crossLength);
-		Extent body = context.measure(mPanel.mBody, axis, crossLength);
-		if (axis == Axis::Horizontal)
-			return { std::max(header.minimum, body.minimum), std::max(header.preferred, body.preferred) };
-		return { header.minimum + body.minimum, header.preferred + body.preferred };
-	}
-
-	void arrangeChildren(LayoutContext& context, const RectF& contentArea) override {
-		const halnf headerHeight = context.measure(mPanel.mHeader, Axis::Vertical, contentArea.size.x).preferred;
-		context.place(mPanel.mHeader, makeRect(contentArea.pos, Vec2F(contentArea.size.x, headerHeight)));
-		context.place(
-			mPanel.mBody,
-			makeRect(
-				contentArea.pos.x, contentArea.pos.y + headerHeight, contentArea.size.x, contentArea.size.y - headerHeight
-			)
-		);
-
-		if (!mPanel.mCornerGrip.isVisible()) return;
-		const Vec2F corner = contentArea.pos + contentArea.size;
-		context.place(
-			mPanel.mCornerGrip, makeRect(corner - Vec2F(kCornerGrip, kCornerGrip), Vec2F(kCornerGrip, kCornerGrip))
-		);
-	}
-
-private:
-	DockPanel& mPanel;
-};
-
 DockPanel::DockPanel(std::string title, DockSide side) :
-	Panel(Surface::Base),
-	mSide(side),
-	mTitle(std::move(title)) {
-	setDebugName("dock panel: " + mTitle.text());
+	TitledPanel(std::move(title), Surface::Base),
+	mSide(side) {
+	setDebugName("dock panel: " + this->title());
 	setVisible(false);
-	setLayout(std::make_unique<PanelLayout>(*this));
-
-	BoxLayout& headerLayout = mHeader.emplaceLayout<RowLayout>(2);
-	headerLayout.setPadding(Insets::symmetric(8, 1));
-	headerLayout.setCrossAlign(CrossAlign::Center);
-	mHeader.setSizing(AxisSizing::fill(), AxisSizing::fit());
-	mTitle.setSizing(AxisSizing::fill(), AxisSizing::fit());
 
 	mHideButton.setTooltip("Hide");
 	mHideButton.setOnActivate([this]() {
@@ -180,16 +138,9 @@ DockPanel::DockPanel(std::string title, DockSide side) :
 	});
 	buildOptionsMenu();
 
-	mHeader.addChild(mTitle);
-	mHeader.addChild(mOptionsButton);
-	mHeader.addChild(mHideButton);
-
-	mBody.setSizing(AxisSizing::fill(), AxisSizing::fill());
-	mBody.emplaceLayout<StackLayout>().setPadding(Insets::uniform(6));
-
-	addChild(mHeader);
-	addChild(mBody);
-	addChild(mCornerGrip);
+	addHeaderAction(mOptionsButton);
+	addHeaderAction(mHideButton);
+	setCornerWidget(&mCornerGrip);
 	refreshChrome();
 }
 
@@ -197,13 +148,6 @@ DockPanel::~DockPanel() {
 	if (mArea) mArea->removePanel(*this);
 }
 
-void DockPanel::setContent(Widget* content) {
-	if (mContent) mBody.removeChild(*mContent);
-
-	mContent = content;
-	if (mContent) mBody.addChild(*mContent);
-}
-
 void DockPanel::setDockedLength(halnf length) {
 	mDockedLength = length > kMinimumDockedLength ? length : kMinimumDockedLength;
 	if (parent()) parent()->requestLayout();
@@ -218,30 +162,37 @@ void DockPanel::setFloatingRect(const RectF& rect) {
 
 RectF DockPanel::resizeGripRect() const { return mCornerGrip.rect(); }
 
+bool DockPanel::acceptsDrag(PointerButton button) const {
+	return button == PointerButton::Left && mArea && mHeaderPressed;
+}
+
 void DockPanel::onEvent(Event& event) {
-	switch (event.type()) {
-		case Event::Type::PointerDown:
-			{
-				if (event.button() != PointerButton::Left || !mArea) return;
-
-				if (!contains(headerRect(), event.position())) return;
-				beginInteraction(Interaction::PendingDrag, event);
-				break;
-			}
-
-		case Event::Type::PointerMove:
-			if (mInteraction == Interaction::None) return;
-			updateInteraction(event);
-			break;
-
-		case Event::Type::PointerUp:
-			if (mInteraction == Interaction::None) return;
-			endInteraction(event);
-			break;
-
-		default: return;
+	if (event.type() == Event::Type::PointerDown && event.button() == PointerButton::Left) {
+		// Only a press on the header can drag the panel; where it was taken keeps the panel under the pointer.
+		mHeaderPressed = mArea && contains(headerRect(), event.position());
+		if (mHeaderPressed) mGrabOffset = event.position();
+		return;
 	}
 
+	const Dragged* drag = event.drag();
+	if (!drag || drag->button != PointerButton::Left || !mArea) return;
+
+	switch (drag->phase) {
+		case DragPhase::Started:
+			mDragging = true;
+			refreshChrome();
+			mArea->panelDragStarted(*this);
+			mArea->panelDragged(*this, event.windowPosition());
+			break;
+		case DragPhase::Moved: mArea->panelDragged(*this, event.windowPosition()); break;
+		case DragPhase::Finished:
+		case DragPhase::Cancelled:
+			mDragging = false;
+			mHeaderPressed = false;
+			refreshChrome();
+			mArea->panelDragEnded(*this, event.windowPosition());
+			break;
+	}
 	event.accept();
 	requestPaint();
 }
@@ -261,31 +212,34 @@ DockPanel::CornerGrip::CornerGrip(DockPanel& panel) :
 	setSizing(AxisSizing::fixed(kCornerGrip), AxisSizing::fixed(kCornerGrip));
 }
 
+bool DockPanel::CornerGrip::acceptsDrag(PointerButton button) const {
+	return button == PointerButton::Left && mPanel.mArea;
+}
+
 void DockPanel::CornerGrip::onEvent(Event& event) {
-	switch (event.type()) {
-		case Event::Type::PointerDown:
-			if (event.button() != PointerButton::Left || !mPanel.mArea) return;
-			mDragging = true;
-			mGrabOffset = event.position() - size();
-			ui()->capturePointer(*this);
-			mPanel.mArea->beginDirectResize(mPanel);
-			break;
-
-		case Event::Type::PointerMove:
-			if (!mDragging) return;
-			mPanel.mArea->floatResized(mPanel, mPanel.mArea->toLocal(event.windowPosition() - mGrabOffset));
-			break;
-
-		case Event::Type::PointerUp:
-			if (!mDragging || event.button() != PointerButton::Left) return;
-			mDragging = false;
-			ui()->releasePointer(*this);
-			mPanel.mArea->endDirectResize(mPanel);
-			break;
-
-		default: return;
+	if (event.type() == Event::Type::PointerDown && event.button() == PointerButton::Left) {
+		mGrabOffset = event.position() - size();
+		event.accept();
+		return;
 	}
 
+	const Dragged* drag = event.drag();
+	if (!drag || drag->button != PointerButton::Left || !mPanel.mArea) return;
+
+	switch (drag->phase) {
+		case DragPhase::Started:
+			mDragging = true;
+			mPanel.mArea->beginDirectResize(mPanel);
+			[[fallthrough]];
+		case DragPhase::Moved:
+			mPanel.mArea->floatResized(mPanel, mPanel.mArea->toLocal(event.windowPosition() - mGrabOffset));
+			break;
+		case DragPhase::Finished:
+		case DragPhase::Cancelled:
+			mDragging = false;
+			mPanel.mArea->endDirectResize(mPanel);
+			break;
+	}
 	event.accept();
 	refreshReveal();
 }
@@ -293,25 +247,25 @@ void DockPanel::CornerGrip::onEvent(Event& event) {
 void DockPanel::CornerGrip::onHoverChanged() { refreshReveal(); }
 
 void DockPanel::CornerGrip::refreshReveal() {
-	mReveal.animateTo(isHovered() || mDragging ? 1.0f : 0.0f);
-	startTicking();
+	mVisual.setRevealHeld(mDragging);
+	if (mVisual.refresh()) startTicking();
+	requestPaint();
 }
 
 void DockPanel::CornerGrip::onTick(halnf deltaMs) {
-	if (!mReveal.advance(deltaMs)) stopTicking();
+	if (!mVisual.advance(deltaMs)) stopTicking();
 	requestPaint();
 }
 
 void DockPanel::CornerGrip::paint(Canvas& painter) {
-	const halnf reveal = mReveal.value();
+	const halnf reveal = mVisual.reveal();
 	if (reveal <= 0.01f) return;
 
 	const Palette& palette = theme().palette;
 	const RGBA base = mDragging ? palette.text : palette.mutedText;
-	const Vec2F corner = size() - Vec2F(5.0f, 5.0f);
-	painter.polyline(
-		{ corner - Vec2F(8.0f, 0.0f), corner, corner - Vec2F(0.0f, 8.0f) }, withAlpha(base, base.a * reveal), 1.5f
-	);
+	// The grip is the bottom-right corner of a box: a chevron pointing down-right, inset from the panel corner.
+	const RectF box = makeRect(size() - Vec2F(kCornerGlyph + kCornerInset, kCornerGlyph + kCornerInset), Vec2F(kCornerGlyph, kCornerGlyph));
+	paintGlyph(painter, Glyph::ResizeCorner, box, Palette::faded(base, reveal), theme());
 }
 
 void DockPanel::buildOptionsMenu() {
@@ -373,37 +327,6 @@ void DockPanel::refreshChrome() {
 	setCornerRadius(detached ? theme().metrics.popupCornerRadius : theme().metrics.surfaceCornerRadius);
 }
 
-void DockPanel::beginInteraction(Interaction interaction, const Event& event) {
-	mInteraction = interaction;
-	mPressPosition = event.windowPosition();
-	mGrabOffset = event.position();
-	ui()->capturePointer(*this);
-}
-
-void DockPanel::updateInteraction(const Event& event) {
-	if (mInteraction == Interaction::PendingDrag) {
-		if ((event.windowPosition() - mPressPosition).length() < kDragThreshold) return;
-
-		mInteraction = Interaction::Dragging;
-		mDragging = true;
-		refreshChrome();
-		mArea->panelDragStarted(*this);
-	}
-
-	mArea->panelDragged(*this, event.windowPosition());
-}
-
-void DockPanel::endInteraction(const Event& event) {
-	const Interaction finished = mInteraction;
-
-	mInteraction = Interaction::None;
-	mDragging = false;
-	refreshChrome();
-	ui()->releasePointer(*this);
-
-	if (finished == Interaction::Dragging) mArea->panelDragEnded(*this, event.windowPosition());
-}
-
 class DockArea::DockLayout : public Layout {
 public:
 	explicit DockLayout(DockArea& area) :
@@ -609,16 +532,16 @@ void DockArea::paintOverlay(Canvas& painter) {
 	for (DockSide side : { DockSide::Left, DockSide::Right, DockSide::Bottom }) {
 		if (indexOf(side) == mDropSide) continue;
 		const RectF target = dropTarget(side);
-		painter.rect(target, withAlpha(palette.text, 0.08f), radius);
-		painter.outline(target, withAlpha(palette.mutedText, 0.6f), radius);
+		painter.rect(target, Palette::faded(palette.text, 0.08f), radius);
+		painter.outline(target, Palette::faded(palette.mutedText, 0.6f), radius);
 	}
 
 	const halnf opacity = mDropPreviewOpacity.value();
 	if (opacity <= 0.01f) return;
 
 	const RectF preview = mDropPreview.value();
-	painter.rect(preview, withAlpha(palette.text, 0.10f * opacity), radius);
-	painter.outline(preview, withAlpha(palette.mutedText, 0.9f * opacity), radius, 1.5f);
+	painter.rect(preview, Palette::faded(palette.text, 0.10f * opacity), radius);
+	painter.outline(preview, Palette::faded(palette.mutedText, 0.9f * opacity), radius, 1.5f);
 }
 
 void DockArea::onTick(halnf deltaMs) {
diff --git a/Widgets/src/components/docking/private/FloatingPanel.cpp b/Widgets/src/components/docking/private/FloatingPanel.cpp
index a28de5ca..e0b3793c 100644
--- a/Widgets/src/components/docking/private/FloatingPanel.cpp
+++ b/Widgets/src/components/docking/private/FloatingPanel.cpp
@@ -15,86 +15,58 @@ namespace {
 }
 
 FloatingPanel::FloatingPanel(std::string title) :
-	Panel(Surface::Raised),
-	mTitle(std::move(title)) {
+	TitledPanel(std::move(title), Surface::Raised) {
 	setDebugName("floating panel");
 	setBorder(true);
-
-	emplaceLayout<ColumnLayout>(0);
-
-	mTitleBar.setSizing(AxisSizing::fill(), AxisSizing::fixed(Theme::standard().metrics.controlHeight));
-	mTitleBar.emplaceLayout<RowLayout>().setPadding(Insets::symmetric(8, 0));
-	mTitle.setSizing(AxisSizing::fill(), AxisSizing::fill());
-	mTitleBar.addChild(mTitle);
-
-	mBody.setSizing(AxisSizing::fill(), AxisSizing::fill());
-	mBody.emplaceLayout<StackLayout>().setPadding(Insets::uniform(6));
-
-	addChild(mTitleBar);
-	addChild(mBody);
+	// The header is the handle the panel moves by, so it keeps a full control height.
+	header().setSizing(AxisSizing::fill(), AxisSizing::fixed(Theme::standard().metrics.controlHeight));
 	applySize();
 }
 
-void FloatingPanel::setContent(Widget* content) {
-	if (mContent) mBody.removeChild(*mContent);
-
-	mContent = content;
-	if (mContent) mBody.addChild(*mContent);
-}
-
 void FloatingPanel::setPanelSize(Vec2F size) {
 	mPanelSize = { size.x > mMinimumSize.x ? size.x : mMinimumSize.x, size.y > mMinimumSize.y ? size.y : mMinimumSize.y };
 	applySize();
 }
 
-RectF FloatingPanel::titleBarRect() const { return mTitleBar.rect(); }
+RectF FloatingPanel::titleBarRect() const { return header().rect(); }
 
 RectF FloatingPanel::resizeGripRect() const {
 	return makeRect(size().x - kGripSize, size().y - kGripSize, kGripSize, kGripSize);
 }
 
 void FloatingPanel::onEvent(Event& event) {
-	switch (event.type()) {
-		case Event::Type::PointerDown:
-			{
-				if (event.button() != PointerButton::Left) return;
+	if (event.type() == Event::Type::PointerDown && event.button() == PointerButton::Left) {
+		// A press raises the panel and remembers which part was taken; moving starts once the router sees a drag.
+		const Vec2F local = event.position();
+		if (contains(resizeGripRect(), local)) mPressedPart = Interaction::Resizing;
+		else if (contains(titleBarRect(), local)) mPressedPart = Interaction::Moving;
+		else return;
 
-				const Vec2F local = event.position();
-				if (contains(resizeGripRect(), local)) mInteraction = Interaction::Resizing;
-				else if (contains(titleBarRect(), local)) mInteraction = Interaction::Moving;
-				else return;
-
-				mGrabOffset = mInteraction == Interaction::Moving ? local : local - size();
-				bringToFront();
-				ui()->capturePointer(*this);
-				event.accept();
-				break;
-			}
-
-		case Event::Type::PointerMove:
-			{
-				if (mInteraction == Interaction::None || !parent()) return;
-
-				const Vec2F inParent = event.windowPosition() - parent()->windowPosition();
-				if (mInteraction == Interaction::Moving) requestPosition(inParent - mGrabOffset);
-				else setPanelSize(event.position() - mGrabOffset);
-				event.accept();
-				break;
-			}
-
-		case Event::Type::PointerUp:
-			if (mInteraction == Interaction::None) return;
-			mInteraction = Interaction::None;
-			ui()->releasePointer(*this);
-			event.accept();
-			break;
-
-		default: return;
+		mGrabOffset = mPressedPart == Interaction::Moving ? local : local - size();
+		bringToFront();
+		event.accept();
+		return;
 	}
 
+	const Dragged* drag = event.drag();
+	if (!drag || drag->button != PointerButton::Left) return;
+
+	if (drag->phase == DragPhase::Started) mInteraction = mPressedPart;
+	if (drag->phase == DragPhase::Finished || drag->phase == DragPhase::Cancelled) {
+		mInteraction = Interaction::None;
+	} else if (mInteraction != Interaction::None && parent()) {
+		const Vec2F inParent = event.windowPosition() - parent()->windowPosition();
+		if (mInteraction == Interaction::Moving) requestPosition(inParent - mGrabOffset);
+		else setPanelSize(event.position() - mGrabOffset);
+	}
+	event.accept();
 	requestPaint();
 }
 
+bool FloatingPanel::acceptsDrag(PointerButton button) const {
+	return button == PointerButton::Left && mPressedPart != Interaction::None;
+}
+
 void FloatingPanel::paintOverlay(Canvas& painter) {
 	const Theme& style = theme();
 	const RectF grip = resizeGripRect();
diff --git a/Widgets/src/components/docking/public/Docking.hpp b/Widgets/src/components/docking/public/Docking.hpp
index 77602857..03d59a92 100644
--- a/Widgets/src/components/docking/public/Docking.hpp
+++ b/Widgets/src/components/docking/public/Docking.hpp
@@ -1,10 +1,13 @@
 #pragma once
 
+#include "InteractionVisual.hpp"
+
 #include "Animation.hpp"
 #include "Button.hpp"
 #include "Containers.hpp"
 #include "Label.hpp"
 #include "Menus.hpp"
+#include "TitledPanel.hpp"
 #include "ResizeHandle.hpp"
 
 #include <memory>
@@ -43,20 +46,18 @@ namespace tp::ui {
 		[[nodiscard]] RGBA backgroundTarget() const override;
 	};
 
-	class DockPanel : public Panel {
+	// A titled panel a DockArea docks at a side, overlays (unpinned) or floats; its header has the options menu and a
+	// hide button and drags the panel, and a floating panel resizes from its corner grip.
+	class DockPanel : public TitledPanel {
 	public:
 		enum class ViewMode { Docked, Undocked, Float };
 
 		explicit DockPanel(std::string title, DockSide side = DockSide::Left);
 		~DockPanel() override;
 
-		void setContent(Widget* content);
-		[[nodiscard]] Widget* content() const { return mContent; }
-
 		void setIcon(ImageHandle icon) { mIcon = icon; }
 		[[nodiscard]] ImageHandle icon() const { return mIcon; }
 
-		[[nodiscard]] const std::string& title() const { return mTitle.text(); }
 		[[nodiscard]] DockSide side() const { return mSide; }
 		[[nodiscard]] ViewMode viewMode() const { return mViewMode; }
 		[[nodiscard]] bool isOpen() const { return mOpen; }
@@ -71,25 +72,25 @@ namespace tp::ui {
 		[[nodiscard]] PopupButton& optionsButton() { return mOptionsButton; }
 		[[nodiscard]] Menu& optionsMenu() { return mOptionsMenu; }
 		[[nodiscard]] Button& hideButton() { return mHideButton; }
-		[[nodiscard]] RectF headerRect() const { return mHeader.rect(); }
+		[[nodiscard]] RectF headerRect() const { return header().rect(); }
 		[[nodiscard]] RectF resizeGripRect() const;
 		[[nodiscard]] Widget& cornerGrip() { return mCornerGrip; }
 
 	protected:
 		void onEvent(Event& event) override;
+		[[nodiscard]] bool acceptsDrag(PointerButton button) const override;
 		void paint(Canvas& painter) override;
 		void paintOverlay(Canvas& painter) override;
 		void onActiveWithinChanged() override;
 
 	private:
-		class PanelLayout;
-
 		class CornerGrip : public Widget {
 		public:
 			explicit CornerGrip(DockPanel& panel);
 
 		protected:
 			void onEvent(Event& event) override;
+			[[nodiscard]] bool acceptsDrag(PointerButton button) const override;
 			void onHoverChanged() override;
 			void onTick(halnf deltaMs) override;
 			void paint(Canvas& painter) override;
@@ -100,18 +101,13 @@ namespace tp::ui {
 			DockPanel& mPanel;
 			bool mDragging = false;
 			Vec2F mGrabOffset = { 0, 0 };
-			AnimatedFloat mReveal{ 0, Motion::quick() };
+			InteractionVisual mVisual{ *this };
 		};
 
 		friend class DockArea;
 
-		enum class Interaction { None, PendingDrag, Dragging };
-
 		void buildOptionsMenu();
 		void refreshChrome();
-		void beginInteraction(Interaction interaction, const Event& event);
-		void updateInteraction(const Event& event);
-		void endInteraction(const Event& event);
 
 		DockArea* mArea = nullptr;
 		DockSide mSide;
@@ -123,19 +119,15 @@ namespace tp::ui {
 		halnf mDockedLength = 260;
 		RectF mFloatingRect = makeRect(120, 120, 280, 320);
 
-		Interaction mInteraction = Interaction::None;
+		// Whether the last press landed on the header, which is the only part that drags the panel.
+		bool mHeaderPressed = false;
 		Vec2F mGrabOffset = { 0, 0 };
-		Vec2F mPressPosition = { 0, 0 };
 
-		Widget mHeader;
-		Label mTitle;
 		OptionsButton mOptionsButton;
-		GlyphButton mHideButton{ GlyphButton::Glyph::Hide };
+		GlyphButton mHideButton{ Glyph::Minus };
 		Menu mOptionsMenu;
 		Menu mViewModeMenu;
 		Menu mMoveToMenu;
-		Widget mBody;
-		Widget* mContent = nullptr;
 		CornerGrip mCornerGrip{ *this };
 		std::function<void(bool)> mOnOpenChanged;
 	};
diff --git a/Widgets/src/components/docking/public/FloatingPanel.hpp b/Widgets/src/components/docking/public/FloatingPanel.hpp
index 02484161..80e488db 100644
--- a/Widgets/src/components/docking/public/FloatingPanel.hpp
+++ b/Widgets/src/components/docking/public/FloatingPanel.hpp
@@ -1,22 +1,16 @@
 #pragma once
 
-#include "Containers.hpp"
-#include "Label.hpp"
+#include "TitledPanel.hpp"
 
 #include <string>
 
 namespace tp::ui {
 
-	class FloatingPanel : public Panel {
+	// A titled panel the user moves by its header and resizes by its corner, inside its parent.
+	class FloatingPanel : public TitledPanel {
 	public:
 		explicit FloatingPanel(std::string title = {});
 
-		void setTitle(std::string title) { mTitle.setText(std::move(title)); }
-		[[nodiscard]] const std::string& title() const { return mTitle.text(); }
-
-		void setContent(Widget* content);
-		[[nodiscard]] Widget* content() const { return mContent; }
-
 		void setPanelSize(Vec2F size);
 		[[nodiscard]] Vec2F panelSize() const { return mPanelSize; }
 		void setMinimumPanelSize(Vec2F size) { mMinimumSize = size; }
@@ -29,6 +23,7 @@ namespace tp::ui {
 
 	protected:
 		void onEvent(Event& event) override;
+		[[nodiscard]] bool acceptsDrag(PointerButton button) const override;
 		void paintOverlay(Canvas& painter) override;
 
 	private:
@@ -36,15 +31,12 @@ namespace tp::ui {
 
 		void applySize();
 
-		Label mTitle;
-		Widget mTitleBar;
-		Widget mBody;
-		Widget* mContent = nullptr;
-
 		Vec2F mPanelSize = { 240, 200 };
 		Vec2F mMinimumSize = { 120, 80 };
 
 		Interaction mInteraction = Interaction::None;
 		Vec2F mGrabOffset = { 0, 0 };
+		// The part the last press landed on; a drag that starts from it moves or resizes the panel.
+		Interaction mPressedPart = Interaction::None;
 	};
 }
diff --git a/Widgets/src/components/files/private/DocumentFolderPanel.cpp b/Widgets/src/components/files/private/DocumentFolderPanel.cpp
new file mode 100644
index 00000000..8cdb2eb5
--- /dev/null
+++ b/Widgets/src/components/files/private/DocumentFolderPanel.cpp
@@ -0,0 +1,124 @@
+#include "DocumentFolderPanel.hpp"
+
+#include "BoxLayout.hpp"
+
+using namespace tp;
+using namespace tp::ui;
+
+namespace {
+	constexpr halnf kPadding = 10;
+	constexpr halnf kGap = 8;
+	constexpr const char* kMarkdownExtension = ".md";
+
+	bool isMarkdownFile(const std::string& path) {
+		const std::string extension = kMarkdownExtension;
+		return path.size() >= extension.size() && path.compare(path.size() - extension.size(), extension.size(), extension) == 0;
+	}
+
+	void mutedHint(Label& label) {
+		label.setTone(Label::Tone::Muted);
+		label.setSizing(AxisSizing::fill(), AxisSizing::fit());
+	}
+}
+
+DocumentFolderPanel::DocumentFolderPanel(std::string rootDirectory, std::string libraryTitle, FileSystem& files) :
+	browser(files),
+	mFiles(files),
+	mRoot(std::move(rootDirectory)),
+	mTitle(std::move(libraryTitle)) {
+	setDebugName("document folder panel");
+	setSizing(AxisSizing::fill(), AxisSizing::fill());
+	emplaceLayout<ColumnLayout>();
+
+	mDocumentTitle = [](const std::string& path) { return fileName(parentPath(path)) + "/" + fileName(path); };
+
+	mPages.setSizing(AxisSizing::fill(), AxisSizing::fill());
+	mPages.setPagePadding(Insets::uniform(kPadding));
+	mPages.setPageHeadersShown(false);
+	mPages.setOnPageShown([this](StackPage&) {
+		if (mPages.depth() == 1) document.setMarkdown(std::string());
+	});
+
+	browser.setSizing(AxisSizing::fill(), AxisSizing::fill());
+	browser.setExtensions({ kMarkdownExtension });
+	browser.setRootDirectory(mRoot);
+	browser.onFileOpened = [this](const std::string& path) { openDocument(path); };
+
+	mutedHint(hint);
+	hint.setVisible(false);
+	mLibraryPage.setSizing(AxisSizing::fill(), AxisSizing::fill());
+	mLibraryPage.emplaceLayout<ColumnLayout>(kGap);
+	mLibraryPage.addChild(hint);
+	mLibraryPage.addChild(browser);
+
+	document.setMode(MarkdownEditor::Mode::Split);
+	document.setOnChanged([this](const std::string& text) { saveDocument(text); });
+	mutedHint(documentStatus);
+	documentStatus.setVisible(false);
+	mDocumentPage.setSizing(AxisSizing::fill(), AxisSizing::fill());
+	mDocumentPage.emplaceLayout<ColumnLayout>(kGap);
+	mDocumentPage.addChild(documentStatus);
+	mDocumentPage.addChild(document);
+
+	addChild(mPages);
+
+	// The library title is what the root page is called; the constructor needs it, so the root page is built lazily.
+	showLibrary();
+	refresh();
+}
+
+void DocumentFolderPanel::setLibraryHint(std::string text) {
+	hint.setVisible(!text.empty());
+	hint.setText(std::move(text));
+}
+
+void DocumentFolderPanel::setDocumentMode(MarkdownEditor::Mode mode) {
+	mMode = mode;
+	document.setMode(mode);
+}
+
+void DocumentFolderPanel::setPageHeadersShown(bool shown) { mPages.setPageHeadersShown(shown); }
+
+void DocumentFolderPanel::setDocumentTitle(std::function<std::string(const std::string& path)> title) {
+	mDocumentTitle = std::move(title);
+}
+
+void DocumentFolderPanel::showLibrary() {
+	mPages.clear();
+	mDocument.clear();
+	document.setMarkdown(std::string());
+	StackPage& root = mPages.push(mTitle, mLibraryPage);
+	root.setScrollsContent(false);
+	root.header().setVisible(false);
+}
+
+void DocumentFolderPanel::refresh() { browser.setDirectory(browser.directory().empty() ? mRoot : browser.directory()); }
+
+bool DocumentFolderPanel::openDocument(const std::string& path) {
+	if (!isMarkdownFile(path)) return false;
+
+	const std::optional<std::string> text = mFiles.readText(path);
+	documentStatus.setVisible(!text);
+	documentStatus.setText(text ? std::string() : "Can't read " + path);
+	document.setBaseDirectory(parentPath(path));
+	document.setMarkdown(text.value_or(std::string()));
+	document.setMode(mMode);
+	mDocument = path;
+
+	StackPage& page = mPages.push(mDocumentTitle(path), mDocumentPage);
+	page.setScrollsContent(false);
+	page.header().setVisible(true);
+
+	if (onDocumentOpened) onDocumentOpened(path);
+	return true;
+}
+
+void DocumentFolderPanel::saveDocument(const std::string& text) {
+	if (mDocument.empty()) return;
+	if (mFiles.writeText(mDocument, text)) {
+		documentStatus.setVisible(false);
+		return;
+	}
+	documentStatus.setText("Can't save " + mDocument);
+	documentStatus.setVisible(true);
+}
diff --git a/Widgets/src/components/files/private/FileBrowser.cpp b/Widgets/src/components/files/private/FileBrowser.cpp
index 3ca41836..9180f627 100644
--- a/Widgets/src/components/files/private/FileBrowser.cpp
+++ b/Widgets/src/components/files/private/FileBrowser.cpp
@@ -19,8 +19,6 @@ using namespace tp::ui;
 namespace {
 	constexpr halnf kBrowserHeight = 300;
 	constexpr halnf kFileDialogWidth = 520;
-	constexpr halnf kRowHeight = 26;
-	constexpr halnf kKindWidth = 18;
 
 	class LocalFileSystem : public FileSystem {
 	public:
@@ -149,63 +147,6 @@ std::string tp::ui::describeSize(uint64_t bytes) {
 	return text;
 }
 
-FileRow::FileRow(const FileEntry& entry, std::function<void(FileRow&)> onSelect, std::function<void(FileRow&)> onOpen) :
-	Button(entry.name),
-	mEntry(entry),
-	mOnSelect(std::move(onSelect)),
-	mOnOpen(std::move(onOpen)) {
-	setDebugName("file row: " + entry.name);
-	setStyle(Style::Flat);
-	setSizing(AxisSizing::fill(), AxisSizing::fixed(kRowHeight));
-}
-
-void FileRow::onEvent(Event& event) {
-	if (event.type() == Event::Type::Click && event.button() == PointerButton::Left) {
-		event.accept();
-		if (mOnSelect) mOnSelect(*this);
-		if (event.clickCount() >= 2 && mOnOpen) mOnOpen(*this);
-		return;
-	}
-	if (event.type() == Event::Type::KeyDown && event.isKey(Key::Enter)) {
-		event.accept();
-		if (mOnOpen) mOnOpen(*this);
-		return;
-	}
-	Button::onEvent(event);
-}
-
-void FileRow::paint(Canvas& painter) {
-	const Theme& style = theme();
-	const RectF area = localRect();
-	painter.rect(area, background(), style.metrics.cornerRadius);
-	if (showsFocusRing()) painter.outline(area, style.palette.focusRing, style.metrics.cornerRadius, 2);
-
-	const halnf fontSize = style.metrics.fontSize;
-	const RGBA muted = style.palette.mutedText;
-	const halnf pad = style.metrics.controlPadding.left;
-
-	const RectF kind = makeRect(pad, 0, kKindWidth, area.size.y);
-	if (mEntry.isDirectory) {
-		const halnf top = area.size.y * 0.5f - 5;
-		painter.rect(makeRect(kind.pos.x, top - 2, 7, 3), muted, 1);
-		painter.outline(makeRect(kind.pos.x, top, 14, 10), muted, 2, 1.25f);
-	} else {
-		const halnf top = area.size.y * 0.5f - 7;
-		painter.outline(makeRect(kind.pos.x + 2, top, 10, 14), muted, 1.5f, 1.25f);
-	}
-
-	const std::string size = mEntry.isDirectory ? std::string() : describeSize(mEntry.size);
-	const halnf sizeWidth = size.empty() ? 0 : textWidth(size, fontSize) + pad;
-	const halnf nameLeft = kind.pos.x + kKindWidth + pad * 0.5f;
-	painter.text(
-		mEntry.name,
-		makeRect(nameLeft, 0, area.size.x - nameLeft - sizeWidth - pad, area.size.y),
-		TextStyle{ fontSize, isSelected() ? style.palette.text : (mEntry.isHidden() ? muted : style.palette.text), TextAlign::leftCenter() }
-	);
-	if (!size.empty())
-		painter.text(size, makeRect(area.size.x - sizeWidth - pad, 0, sizeWidth, area.size.y), TextStyle{ fontSize, muted, TextAlign::rightCenter() });
-}
-
 FileBrowser::FileBrowser(FileSystem& fileSystem) :
 	mFileSystem(fileSystem) {
 	setDebugName("file browser");
@@ -223,14 +164,16 @@ FileBrowser::FileBrowser(FileSystem& fileSystem) :
 	mHeader.addChild(up);
 	mHeader.addChild(path);
 
-	mList.setSizing(AxisSizing::fill(), AxisSizing::fit());
-	mList.emplaceLayout<ColumnLayout>(1);
-	mEmpty.setTone(Label::Tone::Muted);
-	scroll.setSizing(AxisSizing::fill(), AxisSizing::fill());
-	scroll.setContent(&mList);
+	list.setEmptyText("This folder is empty");
+	list.setOnSelectionChanged([this]() {
+		if (list.current() && *list.current() < mListed.size()) select(mListed[*list.current()].name);
+	});
+	list.setOnActivated([this](size_t index) {
+		if (index < mListed.size()) open(mListed[index]);
+	});
 
 	addChild(mHeader);
-	addChild(scroll);
+	addChild(list);
 }
 
 bool FileBrowser::setDirectory(const std::string& directory) {
@@ -249,7 +192,7 @@ bool FileBrowser::setDirectory(const std::string& directory) {
 	refreshPath();
 	up.setEnabled(!isAtRoot());
 	rebuildRows();
-	if (changed) scroll.jumpTo(0);
+	if (changed) list.scroller().jumpTo(0);
 	if (changed && onDirectoryChanged) onDirectoryChanged(mDirectory);
 	return true;
 }
@@ -338,36 +281,49 @@ bool FileBrowser::isListed(const FileEntry& entry) const {
 }
 
 void FileBrowser::rebuildRows() {
-	mList.removeAllChildren();
-	mRows.clear();
+	mListed.clear();
 	for (const FileEntry& entry : mEntries) {
-		if (!isListed(entry)) continue;
-		auto row = std::make_unique<FileRow>(
-			entry, [this](FileRow& chosen) { select(chosen.entry().name); }, [this](FileRow& chosen) { open(chosen.entry()); }
-		);
-		row->setSelected(entry.name == mSelected);
-		mList.addChild(*row);
-		mRows.push_back(std::move(row));
+		if (isListed(entry)) mListed.push_back(entry);
 	}
-	if (mRows.empty()) mList.addChild(mEmpty);
+
+	ListView::Model model;
+	model.count = mListed.size();
+	model.fill = [this](size_t index, ListRow& row) {
+		const FileEntry& entry = mListed[index];
+		row.setTitle(entry.name);
+		row.setLeading(ListRow::Leading::glyphOf(entry.isDirectory ? Glyph::Folder : Glyph::File));
+		row.setTrailing(entry.isDirectory ? ListRow::Trailing::none() : ListRow::Trailing::textOf(describeSize(entry.size)));
+		row.setMuted(entry.isHidden());
+		row.setDebugName("file row: " + entry.name);
+	};
+	list.setModel(std::move(model));
+	const std::optional<size_t> selectedIndex = listedIndex(mSelected);
+	if (selectedIndex) list.select(*selectedIndex);
+	else list.clearSelection();
 }
 
-FileRow* FileBrowser::row(const std::string& name) const {
-	for (const auto& row : mRows) {
-		if (row->entry().name == name) return row.get();
+std::optional<size_t> FileBrowser::listedIndex(const std::string& name) const {
+	for (size_t index = 0; index < mListed.size(); index++) {
+		if (mListed[index].name == name) return index;
 	}
-	return nullptr;
+	return std::nullopt;
+}
+
+ListRow* FileBrowser::row(const std::string& name) {
+	const std::optional<size_t> index = listedIndex(name);
+	return index ? &list.row(*index) : nullptr;
 }
 
 const FileEntry* FileBrowser::selected() const {
-	const FileRow* found = row(mSelected);
-	return found ? &found->entry() : nullptr;
+	const std::optional<size_t> index = listedIndex(mSelected);
+	return index ? &mListed[*index] : nullptr;
 }
 
 void FileBrowser::select(const std::string& name) {
+	if (name == mSelected && list.current() == listedIndex(name)) return;
 	mSelected = name;
-	for (const auto& row : mRows)
-		row->setSelected(row->entry().name == name);
+	const std::optional<size_t> index = listedIndex(name);
+	if (index && list.current() != index) list.select(*index);
 	const FileEntry* entry = selected();
 	if (entry && onSelected) onSelected(*entry);
 }
@@ -439,7 +395,8 @@ void FileDialog::filterDescendantEvent(Event& event) {
 void FileDialog::onEvent(Event& event) {
 	if (event.type() != Event::Type::KeyDown) return;
 	if (!event.isKey(Key::Enter) && !event.isKey(Key::KeypadEnter)) return;
-	if (ui() && dynamic_cast<FileRow*>(ui()->keyboardFocus())) return;
+	// Enter in the file list opens the current entry; elsewhere in the dialog it confirms.
+	if (ui() && ui()->keyboardFocus() && browser.list.isSelfOrAncestorOf(*ui()->keyboardFocus())) return;
 	event.accept();
 	confirm();
 }
diff --git a/Widgets/src/components/files/public/DocumentFolderPanel.hpp b/Widgets/src/components/files/public/DocumentFolderPanel.hpp
new file mode 100644
index 00000000..52f44212
--- /dev/null
+++ b/Widgets/src/components/files/public/DocumentFolderPanel.hpp
@@ -0,0 +1,62 @@
+#pragma once
+
+#include "FileBrowser.hpp"
+#include "Label.hpp"
+#include "MarkdownEditor.hpp"
+#include "PageStack.hpp"
+
+#include <functional>
+#include <string>
+
+namespace tp::ui {
+
+	// A folder of markdown documents: a file browser over the folder and an editor for the file chosen. Opening a
+	// markdown file switches to the editor page, loads it and writes edits back to disk as they happen. The shared
+	// half of a skills library and a task workspace; each adds only its own behaviour (creating a skill, picking a
+	// task's workspace).
+	class DocumentFolderPanel : public Widget {
+	public:
+		explicit DocumentFolderPanel(std::string rootDirectory, std::string libraryTitle, FileSystem& files = FileSystem::local());
+
+		void refresh();
+		// Shows the folder again and drops the open document.
+		void showLibrary();
+		// Loads a markdown file and opens its editor page; returns whether it opened.
+		bool openDocument(const std::string& path);
+
+		// An optional hint shown above the browser (a workspace panel shows one when no workspace is set).
+		void setLibraryHint(std::string hint);
+		void setDocumentMode(MarkdownEditor::Mode mode);
+		void setPageHeadersShown(bool shown);
+		// How the editor page is titled for a path; defaults to "folder/name".
+		void setDocumentTitle(std::function<std::string(const std::string& path)> title);
+
+		[[nodiscard]] const std::string& openedDocument() const { return mDocument; }
+		[[nodiscard]] const std::string& rootDirectory() const { return mRoot; }
+		[[nodiscard]] PageStack& pages() { return mPages; }
+
+		// Called after a document opened (in addition to switching pages).
+		std::function<void(const std::string& path)> onDocumentOpened;
+
+		FileBrowser browser;
+		Label hint;
+		MarkdownEditor document;
+		Label documentStatus;
+
+	protected:
+		// Writes the text back to the open document; sets the status on failure. Overridable, rarely needed.
+		virtual void saveDocument(const std::string& text);
+
+		FileSystem& mFiles;
+		std::string mRoot;
+		std::string mTitle;
+		std::string mDocument;
+		MarkdownEditor::Mode mMode = MarkdownEditor::Mode::Split;
+
+	private:
+		std::function<std::string(const std::string&)> mDocumentTitle;
+		PageStack mPages;
+		Widget mLibraryPage;
+		Widget mDocumentPage;
+	};
+}
diff --git a/Widgets/src/components/files/public/FileBrowser.hpp b/Widgets/src/components/files/public/FileBrowser.hpp
index e57b32f1..e9daa7a0 100644
--- a/Widgets/src/components/files/public/FileBrowser.hpp
+++ b/Widgets/src/components/files/public/FileBrowser.hpp
@@ -1,6 +1,7 @@
 #pragma once
 
 #include "Breadcrumb.hpp"
+#include "ListView.hpp"
 #include "Button.hpp"
 #include "Containers.hpp"
 #include "Dialog.hpp"
@@ -47,22 +48,6 @@ namespace tp::ui {
 	[[nodiscard]] std::string fileName(const std::string& path);
 	[[nodiscard]] std::string describeSize(uint64_t bytes);
 
-	class FileRow : public Button {
-	public:
-		FileRow(const FileEntry& entry, std::function<void(FileRow&)> onSelect, std::function<void(FileRow&)> onOpen);
-
-		[[nodiscard]] const FileEntry& entry() const { return mEntry; }
-
-	protected:
-		void onEvent(Event& event) override;
-		void paint(Canvas& painter) override;
-
-	private:
-		FileEntry mEntry;
-		std::function<void(FileRow&)> mOnSelect;
-		std::function<void(FileRow&)> mOnOpen;
-	};
-
 	class FileBrowser : public Widget {
 	public:
 		explicit FileBrowser(FileSystem& fileSystem = FileSystem::local());
@@ -81,8 +66,10 @@ namespace tp::ui {
 		[[nodiscard]] bool showsHidden() const { return mShowsHidden; }
 
 		[[nodiscard]] const std::vector<FileEntry>& entries() const { return mEntries; }
-		[[nodiscard]] const std::vector<std::unique_ptr<FileRow>>& rows() const { return mRows; }
-		[[nodiscard]] FileRow* row(const std::string& name) const;
+		// The entries shown, in list order (hidden and filtered entries left out).
+		[[nodiscard]] const std::vector<FileEntry>& listed() const { return mListed; }
+		// The row showing an entry, or null when it is not listed.
+		[[nodiscard]] ListRow* row(const std::string& name);
 		[[nodiscard]] const FileEntry* selected() const;
 		void select(const std::string& name);
 
@@ -91,9 +78,10 @@ namespace tp::ui {
 
 		[[nodiscard]] std::vector<std::string> pathDirectories() const;
 
-		GlyphButton up{ GlyphButton::Glyph::Up };
+		GlyphButton up{ Glyph::ChevronUp };
 		Breadcrumb path;
-		ScrollView scroll;
+		// The entries: click selects, double click or Enter opens, arrows and typing move.
+		ListView list;
 
 		std::function<void(const FileEntry&)> onSelected;
 		std::function<void(const std::string& path)> onFileOpened;
@@ -107,6 +95,7 @@ namespace tp::ui {
 		[[nodiscard]] bool isAtRoot() const;
 		[[nodiscard]] bool isInsideRoot(const std::string& directory) const;
 		void rebuildRows();
+		[[nodiscard]] std::optional<size_t> listedIndex(const std::string& name) const;
 		void refreshPath();
 		void open(const FileEntry& entry);
 
@@ -118,11 +107,9 @@ namespace tp::ui {
 		bool mShowsFiles = true;
 		bool mShowsHidden = false;
 		std::vector<FileEntry> mEntries;
-		std::vector<std::unique_ptr<FileRow>> mRows;
+		std::vector<FileEntry> mListed;
 		std::string mSelected;
 		Widget mHeader;
-		Widget mList;
-		Label mEmpty{ "This folder is empty" };
 	};
 
 	class FileDialog : public Dialog {
diff --git a/Widgets/src/components/files/tests/DocumentFolderPanelTests.cpp b/Widgets/src/components/files/tests/DocumentFolderPanelTests.cpp
new file mode 100644
index 00000000..029159b6
--- /dev/null
+++ b/Widgets/src/components/files/tests/DocumentFolderPanelTests.cpp
@@ -0,0 +1,82 @@
+#include "DocumentFolderPanel.hpp"
+#include "MemoryFileSystem.hpp"
+#include "BoxLayout.hpp"
+#include "Ui.hpp"
+#include "UiDriver.hpp"
+
+#include "UnitTest++/UnitTest++.h"
+
+using namespace tp;
+using namespace tp::ui;
+using namespace tp::ui::testing;
+
+namespace {
+	MemoryFileSystem sampleFiles() {
+		MemoryFileSystem files("/home/ilya/skills");
+		files.addTextFile("/home/ilya/skills/self-host.md", "# Self-host\nDocs.");
+		files.addTextFile("/home/ilya/skills/report.md", "# Report\nMore.");
+		files.addTextFile("/home/ilya/skills/README.md", "Index.");
+		return files;
+	}
+}
+
+SUITE(DocumentFolderPanel) {
+	TEST(StartsOnTheLibraryAndOpensADocumentOnDoubleClick) {
+		MemoryFileSystem files = sampleFiles();
+		Widget root;
+		DocumentFolderPanel panel("/home/ilya/skills", "Skills", files);
+		std::string opened;
+		panel.onDocumentOpened = [&](const std::string& path) { opened = path; };
+		root.emplaceLayout<ColumnLayout>();
+		root.addChild(panel);
+		UiDriver driver(root, { 800, 600 });
+
+		CHECK_EQUAL(1u, panel.pages().depth());
+		CHECK_EQUAL("Skills", panel.pages().currentPage().title());
+		CHECK_EQUAL("Index.", files.readText("/home/ilya/skills/README.md").value_or(""));
+
+		driver.click(*panel.browser.row("self-host.md"));
+		driver.click(*panel.browser.row("self-host.md"));
+		CHECK_EQUAL("/home/ilya/skills/self-host.md", opened);
+		CHECK_EQUAL("/home/ilya/skills/self-host.md", panel.openedDocument());
+		CHECK_EQUAL(2u, panel.pages().depth());
+		CHECK(driver.paint().hasText("# Self-host"));
+	}
+
+	TEST(EditsAreWrittenBackToDisk) {
+		MemoryFileSystem files = sampleFiles();
+		Widget root;
+		DocumentFolderPanel panel("/home/ilya/skills", "Skills", files);
+		root.emplaceLayout<ColumnLayout>();
+		root.addChild(panel);
+		UiDriver driver(root, { 800, 600 });
+
+		driver.click(*panel.browser.row("report.md"));
+		driver.click(*panel.browser.row("report.md"));
+		REQUIRE CHECK_EQUAL(2u, panel.pages().depth());
+
+		// Editing the source writes the whole document back to disk through the panel.
+		driver.click(panel.document.sourceArea().windowPosition() + Vec2F(20.0f, 20.0f));
+		driver.key(Key::A, KeyModifiers::controlOnly());
+		driver.type("# Changed");
+		driver.settle();
+		CHECK_EQUAL("# Changed", files.readText("/home/ilya/skills/report.md").value_or(""));
+
+		panel.showLibrary();
+		CHECK_EQUAL(1u, panel.pages().depth());
+		CHECK(panel.openedDocument().empty());
+	}
+
+	TEST(UnreadableFilesReportItAndKeepTheEditorEmpty) {
+		MemoryFileSystem files = sampleFiles();
+		Widget root;
+		DocumentFolderPanel panel("/home/ilya/skills", "Skills", files);
+		root.emplaceLayout<ColumnLayout>();
+		root.addChild(panel);
+		UiDriver driver(root, { 800, 600 });
+
+		panel.openDocument("/home/ilya/skills/missing.md");
+		CHECK(panel.documentStatus.isVisible());
+		CHECK_EQUAL("Can't read /home/ilya/skills/missing.md", panel.documentStatus.text());
+	}
+}
diff --git a/Widgets/src/components/files/tests/FileBrowserTests.cpp b/Widgets/src/components/files/tests/FileBrowserTests.cpp
index 9813abaf..18c26bb3 100644
--- a/Widgets/src/components/files/tests/FileBrowserTests.cpp
+++ b/Widgets/src/components/files/tests/FileBrowserTests.cpp
@@ -29,8 +29,8 @@ namespace {
 
 	std::vector<std::string> rowNames(const FileBrowser& browser) {
 		std::vector<std::string> names;
-		for (const auto& row : browser.rows())
-			names.push_back(row->entry().name);
+		for (const FileEntry& entry : browser.listed())
+			names.push_back(entry.name);
 		return names;
 	}
 
@@ -116,7 +116,7 @@ SUITE(FileBrowser) {
 		CHECK(scene.browser.path.part(2).fontFace() == FontFace::Bold);
 		CHECK(scene.browser.path.part(1).fontFace() == FontFace::Regular);
 		CHECK(scene.browser.up.text().empty());
-		CHECK(scene.browser.up.glyph() == GlyphButton::Glyph::Up);
+		CHECK(scene.browser.up.glyph() == Glyph::ChevronUp);
 
 		driver.click(scene.browser.path.part(1));
 		CHECK_EQUAL("/home/ilya", scene.browser.directory());
@@ -145,7 +145,7 @@ SUITE(FileBrowser) {
 		driver.click(*scene.browser.row("notes.txt"));
 		REQUIRE CHECK(scene.browser.selected() != nullptr);
 		CHECK_EQUAL("notes.txt", scene.browser.selected()->name);
-		CHECK(scene.browser.row("notes.txt")->isSelected());
+		CHECK(scene.browser.row("notes.txt")->isHighlighted());
 
 		driver.advance(1000);
 		doubleClick(driver, *scene.browser.row("Pictures"));
@@ -154,6 +154,29 @@ SUITE(FileBrowser) {
 		CHECK(scene.browser.selected() == nullptr);
 	}
 
+	TEST(ArrowsAndEnterBrowseWithoutAPointer) {
+		BrowserScene scene;
+		UiDriver driver(scene.root, { 600, 400 });
+		std::string opened;
+		scene.browser.onFileOpened = [&](const std::string& path) { opened = path; };
+		const std::vector<std::string> names = rowNames(scene.browser);
+		driver.click(*scene.browser.row(names[0]));
+
+		// Directories come first; the keyboard walks the same order the rows show.
+		driver.key(Key::Down);
+		REQUIRE CHECK(scene.browser.selected() != nullptr);
+		CHECK_EQUAL(names[1], scene.browser.selected()->name);
+
+		driver.type("s");
+		REQUIRE CHECK(scene.browser.selected() != nullptr);
+		CHECK(scene.browser.selected()->name[0] == 's');
+		driver.advance(1000);
+		driver.type("sk");
+		CHECK_EQUAL("sketch.png", scene.browser.selected()->name);
+		driver.key(Key::Enter);
+		CHECK_EQUAL("/home/ilya/sketch.png", opened);
+	}
+
 	TEST(DoubleClickOnAFileReportsItsPath) {
 		BrowserScene scene;
 		UiDriver driver(scene.root, { 600, 400 });
@@ -190,7 +213,7 @@ SUITE(FileBrowser) {
 		UiDriver driver(scene.root, { 600, 400 });
 		scene.browser.setDirectory("/home/ilya/Pictures");
 		driver.settle();
-		CHECK(scene.browser.rows().empty());
+		CHECK(scene.browser.listed().empty());
 		CHECK(driver.paint().hasText("This folder is empty"));
 	}
 
diff --git a/Widgets/src/components/kanban/private/KanbanBoard.cpp b/Widgets/src/components/kanban/private/KanbanBoard.cpp
index b0bcfa3a..f910c209 100644
--- a/Widgets/src/components/kanban/private/KanbanBoard.cpp
+++ b/Widgets/src/components/kanban/private/KanbanBoard.cpp
@@ -1,4 +1,6 @@
 #include "KanbanBoard.hpp"
+#include "ReorderSession.hpp"
+#include "Elevation.hpp"
 #include "Canvas.hpp"
 
 #include "BoxLayout.hpp"
@@ -24,30 +26,13 @@ namespace {
 	constexpr halnf kColumnPadding = 8;
 	constexpr halnf kBoardPadding = 10;
 	constexpr halnf kHeaderAccentHeight = 3;
-	constexpr halnf kLiftedShadowOffset = 4;
-	constexpr halnf kAutoScrollEdge = 40;
-	constexpr halnf kAutoScrollSpeed = 0.8f;
 
-	RGBA withAlpha(RGBA color, halnf alpha) {
-		color.a *= alpha;
-		return color;
-	}
-
-	bool movedPast(Vec2F from, Vec2F to, halnf threshold) {
-		return std::fabs(to.x - from.x) >= threshold || std::fabs(to.y - from.y) >= threshold;
-	}
-
-	halnf edgeSpeed(halnf pointer, halnf start, halnf end) {
-		if (end - start < kAutoScrollEdge * 3) return 0;
-		if (pointer < start + kAutoScrollEdge) return -(start + kAutoScrollEdge - pointer) / kAutoScrollEdge;
-		if (pointer > end - kAutoScrollEdge) return (pointer - (end - kAutoScrollEdge)) / kAutoScrollEdge;
-		return 0;
-	}
 }
 
 KanbanCard::KanbanCard(KanbanItemId id) :
 	mId(id) {
 	setDebugName("kanban card #" + std::to_string(id));
+	onThemeChanged();
 	setSizing(AxisSizing::fill(), AxisSizing::fit());
 	emplaceLayout<ColumnLayout>(kCardLineGap)
 		.setPadding({ kCardPadding + kCardAccentInset, kCardPadding, kCardPadding + kCardBadgeRadius * 2, kCardPadding });
@@ -108,13 +93,28 @@ void KanbanCard::setSelected(bool selected) {
 	requestPaint();
 }
 
+void KanbanCard::onThemeChanged() {
+	const Palette& palette = theme().palette;
+	mVisual.setColors({ palette.raisedSurface, palette.controlHovered, palette.controlPressed, palette.raisedSurface });
+	mVisual.finish();
+	requestPaint();
+}
+
+void KanbanCard::refreshVisual() {
+	if (mVisual.refresh()) startTicking();
+	requestPaint();
+}
+
+void KanbanCard::onTick(halnf deltaMs) {
+	if (!mVisual.advance(deltaMs)) stopTicking();
+	requestPaint();
+}
+
 void KanbanCard::paint(Canvas& painter) {
 	const Theme& style = theme();
 	const RectF rect = localRect();
 
-	painter.rect(
-		rect, isHovered() ? style.palette.controlHovered : style.palette.raisedSurface, style.metrics.cornerRadius
-	);
+	painter.rect(rect, mVisual.color(), style.metrics.cornerRadius);
 	if (mAccent) {
 		const RectF strip =
 			makeRect(kCardAccentInset, kCardAccentInset, kCardAccentWidth, rect.size.y - kCardAccentInset * 2);
@@ -131,75 +131,61 @@ void KanbanCard::paintOverlay(Canvas& painter) {
 	painter.outline(localRect(), style.palette.accent, style.metrics.cornerRadius, 2);
 }
 
-class KanbanCardStack::CardLayout : public Layout {
+// The cards in a column, in child order with the placeholder spacer among them; after placing them it starts the
+// landing glide of cards that came from elsewhere.
+class KanbanCardStack::LandingLayout : public ColumnLayout {
 public:
-	explicit CardLayout(KanbanCardStack& stack) :
+	explicit LandingLayout(KanbanCardStack& stack) :
+		ColumnLayout(kCardGap),
 		mStack(stack) {}
 
 protected:
-	[[nodiscard]] Extent measureChildren(const LayoutContext& context, Axis axis, halnf crossLength) const override {
-		if (axis == Axis::Horizontal) return Extent::shrinkable(0);
-
-		halnf total = 0;
-		size_t slots = 0;
-		for (const KanbanCard* card : mStack.mCards) {
-			if (!isArranged(context, *card)) continue;
-			total += context.measure(*card, axis, crossLength).preferred;
-			slots++;
-		}
-		if (mStack.mPlaceholderIndex) {
-			total += mStack.mPlaceholderHeight;
-			slots++;
-		}
-		if (slots > 1) total += kCardGap * halnf(slots - 1);
-		return Extent::rigid(total);
-	}
-
 	void arrangeChildren(LayoutContext& context, const RectF& area) override {
-		halnf y = area.pos.y;
-		size_t slot = 0;
-		mStack.mPlaceholderRect = makeRect(0, 0, 0, 0);
-
-		const auto placePlaceholderAt = [&](size_t index) {
-			if (mStack.mPlaceholderIndex != index) return;
-			mStack.mPlaceholderRect = makeRect(area.pos.x, y, area.size.x, mStack.mPlaceholderHeight);
-			y += mStack.mPlaceholderHeight + kCardGap;
-		};
-
-		for (KanbanCard* card : mStack.mCards) {
-			if (!isArranged(context, *card)) continue;
-			placePlaceholderAt(slot);
-			const halnf height = context.measure(*card, Axis::Vertical, area.size.x).preferred;
-			context.place(*card, makeRect(area.pos.x, y, area.size.x, height));
-			land(*card);
-			y += height + kCardGap;
-			slot++;
-		}
-		placePlaceholderAt(slot);
+		ColumnLayout::arrangeChildren(context, area);
+		mStack.onArranged();
 	}
 
 private:
-	[[nodiscard]] static bool isArranged(const LayoutContext& context, const KanbanCard& card) {
-		const auto& children = context.children();
-		return std::find(children.begin(), children.end(), &card) != children.end();
-	}
-
-	void land(KanbanCard& card) {
-		const auto landing = mStack.mLandings.find(&card);
-		if (landing == mStack.mLandings.end()) return;
-
-		const RectF from = makeRect(landing->second.pos - mStack.windowPosition(), landing->second.size);
-		mStack.mLandings.erase(landing);
-		card.animateGeometryFrom(from);
-	}
-
 	KanbanCardStack& mStack;
 };
 
 KanbanCardStack::KanbanCardStack() {
 	setDebugName("kanban card stack");
 	setSizing(AxisSizing::fill(), AxisSizing::fit());
-	setLayout(std::make_unique<CardLayout>(*this));
+	setLayout(std::make_unique<LandingLayout>(*this));
+	mPlaceholder.setDebugName("kanban placeholder");
+	mPlaceholder.setVisible(false);
+	addChild(mPlaceholder);
+}
+
+void KanbanCardStack::arrangeChildren() {
+	// Children in display order: the cards still in the stack, with the placeholder at its slot among them. A card
+	// that is already a child is only moved when its position changes, so it keeps its placement and can glide.
+	std::vector<Widget*> order;
+	for (KanbanCard* card : mCards) {
+		// A lifted card belongs to the board until it is dropped; it is not pulled back here.
+		if (!card->parent() || card->parent() == this) order.push_back(card);
+	}
+	if (mPlaceholderIndex) order.insert(order.begin() + (std::ptrdiff_t) std::min(*mPlaceholderIndex, order.size()), &mPlaceholder);
+	else order.push_back(&mPlaceholder);
+
+	for (size_t index = 0; index < order.size(); index++) {
+		const bool inPlace = index < children().size() && children()[index] == order[index];
+		if (!inPlace) insertChild(index, *order[index]);
+	}
+}
+
+void KanbanCardStack::onArranged() {
+	// Cards that arrived from somewhere else (a drop, a model change) glide from where they were.
+	for (auto landing = mLandings.begin(); landing != mLandings.end();) {
+		KanbanCard& card = *landing->first;
+		if (card.parent() != this) {
+			++landing;
+			continue;
+		}
+		card.animateGeometryFrom(makeRect(landing->second.pos - windowPosition(), landing->second.size));
+		landing = mLandings.erase(landing);
+	}
 }
 
 void KanbanCardStack::setCards(
@@ -209,11 +195,11 @@ void KanbanCardStack::setCards(
 		if (std::find(cards.begin(), cards.end(), card) == cards.end() && card->parent() == this) removeChild(*card);
 	}
 	for (KanbanCard* card : cards) {
-		if (card->parent() != this) addChild(*card);
 		const auto landing = landings.find(card);
 		if (landing != landings.end()) mLandings[card] = landing->second;
 	}
 	mCards = cards;
+	arrangeChildren();
 	requestLayout();
 }
 
@@ -221,6 +207,7 @@ void KanbanCardStack::removeCard(KanbanCard& card) {
 	mCards.erase(std::remove(mCards.begin(), mCards.end(), &card), mCards.end());
 	mLandings.erase(&card);
 	if (card.parent() == this) removeChild(card);
+	arrangeChildren();
 	requestLayout();
 }
 
@@ -228,6 +215,9 @@ void KanbanCardStack::setPlaceholder(std::optional<size_t> index, halnf height)
 	if (mPlaceholderIndex == index && mPlaceholderHeight == height) return;
 	mPlaceholderIndex = index;
 	mPlaceholderHeight = height;
+	mPlaceholder.setSizing(AxisSizing::fill(), AxisSizing::fixed(height));
+	mPlaceholder.setVisible(index.has_value());
+	arrangeChildren();
 	requestLayout();
 	requestPaint();
 }
@@ -238,22 +228,27 @@ std::optional<size_t> KanbanCardStack::indexOf(const KanbanCard& card) const {
 	return size_t(position - mCards.begin());
 }
 
-size_t KanbanCardStack::insertionIndexAt(halnf windowY) const {
-	size_t index = 0;
+ReorderLane KanbanCardStack::lane() const {
+	// The cards still in the stack (a lifted card has left it), in window coordinates.
+	ReorderLane lane;
+	lane.axis = Axis::Vertical;
+	lane.area = windowRect();
 	for (const KanbanCard* card : mCards) {
-		if (card->parent() != this) continue;
-		const RectF rect = card->windowRect();
-		if (windowY < rect.pos.y + rect.size.y / 2) return index;
-		index++;
+		if (card->parent() == this) lane.items.push_back(card->windowRect());
 	}
-	return index;
+	return lane;
+}
+
+size_t KanbanCardStack::insertionIndexAt(halnf windowY) const {
+	return ReorderSession::slotIn(lane(), Vec2F(windowRect().center().x, windowY));
 }
 
 void KanbanCardStack::paint(Canvas& painter) {
 	if (!mPlaceholderIndex) return;
 	const Theme& style = theme();
-	painter.rect(mPlaceholderRect, withAlpha(style.palette.accent, 0.12f), style.metrics.cornerRadius);
-	painter.outline(mPlaceholderRect, style.palette.focusRing, style.metrics.cornerRadius, 1.5f);
+	const RectF slot = mPlaceholder.rect();
+	painter.rect(slot, Palette::faded(style.palette.accent, 0.12f), style.metrics.cornerRadius);
+	painter.outline(slot, style.palette.focusRing, style.metrics.cornerRadius, 1.5f);
 }
 
 KanbanColumnView::KanbanColumnView(const KanbanColumn& column) :
@@ -317,58 +312,6 @@ void KanbanColumnView::paint(Canvas& painter) {
 	if (mDropState == DropState::Refused) painter.outline(rect, style.palette.windowCloseHovered, radius, 2);
 }
 
-class KanbanBoard::StripLayout : public Layout {
-public:
-	explicit StripLayout(KanbanBoard& board) :
-		mBoard(board) {}
-
-protected:
-	[[nodiscard]] Extent measureChildren(const LayoutContext& context, Axis axis, halnf) const override {
-		const size_t count = context.children().size() + (mBoard.columnGapSlot() ? 1 : 0);
-		if (axis == Axis::Vertical) return Extent::shrinkable(0);
-		return Extent::shrinkable(stripLength(count, mBoard.mMinimumColumnWidth), 0);
-	}
-
-	void arrangeChildren(LayoutContext& context, const RectF& area) override {
-		const std::optional<size_t> gap = mBoard.columnGapSlot();
-		const size_t count = context.children().size() + (gap ? 1 : 0);
-		if (count == 0) return;
-
-		const halnf gaps = kColumnGap * halnf(count - 1);
-		const halnf share = (area.size.x - gaps) / halnf(count);
-		const halnf width = std::clamp(share, mBoard.mMinimumColumnWidth, mBoard.mMaximumColumnWidth);
-		halnf x = area.pos.x;
-		for (size_t slot = 0; slot < count; slot++) {
-			const bool isGap = gap == slot;
-			const size_t child = gap && slot > *gap ? slot - 1 : slot;
-			const RectF rect = makeRect(x, area.pos.y, width, area.size.y);
-			x += width + kColumnGap;
-			if (isGap) {
-				mBoard.mColumnGapRect = rect;
-				continue;
-			}
-			Widget& column = *context.children()[child];
-			context.place(column, rect);
-			land(column);
-		}
-	}
-
-private:
-	void land(Widget& column) {
-		const std::optional<Landing> landing = mBoard.mColumnLanding;
-		if (!landing || landing->widget != &column) return;
-		mBoard.mColumnLanding.reset();
-		column.animateGeometryFrom(translated(landing->from, mBoard.mColumnStrip.windowPosition() * -1.0f));
-	}
-
-	[[nodiscard]] static halnf stripLength(size_t count, halnf width) {
-		if (count == 0) return 0;
-		return width * halnf(count) + kColumnGap * halnf(count - 1);
-	}
-
-	KanbanBoard& mBoard;
-};
-
 class KanbanBoard::BoardLayout : public Layout {
 public:
 	explicit BoardLayout(KanbanBoard& board) :
@@ -404,9 +347,12 @@ KanbanBoard::KanbanBoard(const KanbanModel& model) :
 	setClipsChildren(true);
 	setLayout(std::make_unique<BoardLayout>(*this));
 
+	// The columns share the strip's width equally within the width range; when they do not fit they keep the minimum
+	// and the strip scrolls. While a column is lifted, a spacer of its width holds its slot.
 	mColumnStrip.setDebugName("kanban columns");
-	mColumnStrip.setLayout(std::make_unique<StripLayout>(*this));
-	mColumnStrip.layout()->setPadding(Insets::uniform(kBoardPadding));
+	mColumnStrip.emplaceLayout<RowLayout>(kColumnGap).setPadding(Insets::uniform(kBoardPadding));
+	mColumnGap.setDebugName("kanban column gap");
+	mColumnGap.setVisible(false);
 	mColumnScroller.setWheelStep(kColumnWheelStep);
 	mColumnScroller.setContent(&mColumnStrip);
 	addChild(mColumnScroller);
@@ -439,7 +385,15 @@ void KanbanBoard::setCardHeight(std::optional<halnf> height) {
 void KanbanBoard::setColumnWidthRange(halnf minimum, halnf maximum) {
 	mMinimumColumnWidth = minimum;
 	mMaximumColumnWidth = std::max(minimum, maximum);
-	mColumnStrip.requestLayout();
+	for (auto& view : mColumnViews)
+		applyColumnWidth(*view);
+	applyColumnWidth(mColumnGap);
+}
+
+void KanbanBoard::applyColumnWidth(Widget& column) const {
+	// The minimum is also where the share starts, so a strip that is too narrow keeps every column at it and scrolls;
+	// wider strips share the room up to the maximum.
+	column.setSizing(AxisSizing::fill().atLeast(mMinimumColumnWidth).atMost(mMaximumColumnWidth), AxisSizing::fill());
 }
 
 void KanbanBoard::rebuildColumns() {
@@ -450,8 +404,11 @@ void KanbanBoard::rebuildColumns() {
 
 	for (const KanbanColumn& column : mColumns) {
 		mColumnViews.push_back(std::make_unique<KanbanColumnView>(column));
+		applyColumnWidth(*mColumnViews.back());
 		mColumnStrip.addChild(*mColumnViews.back());
 	}
+	applyColumnWidth(mColumnGap);
+	mColumnStrip.addChild(mColumnGap);
 	refreshOptionsMenus();
 }
 
@@ -633,20 +590,7 @@ std::optional<KanbanDropTarget> KanbanBoard::dropTarget() const {
 	return mDrag->target;
 }
 
-void KanbanBoard::onEvent(Event& event) {
-	if (event.type() == Event::Type::Wheel) {
-		scrollColumnsSideways(event);
-		return;
-	}
-	handlePointer(event);
-}
-
-void KanbanBoard::scrollColumnsSideways(Event& event) {
-	const halnf amount = event.scrollDelta().x;
-	if (amount == 0 || !mColumnScroller.isScrollable() || isFullViewShown()) return;
-	mColumnScroller.scrollBy(-amount * kColumnWheelStep);
-	event.accept();
-}
+void KanbanBoard::onEvent(Event& event) { handlePointer(event); }
 
 void KanbanBoard::filterDescendantEvent(Event& event) {
 	if (event.target() && mFrame.isSelfOrAncestorOf(*event.target())) return;
@@ -774,7 +718,18 @@ std::optional<KanbanItemId> KanbanBoard::firstCard() const {
 	return std::nullopt;
 }
 
+bool KanbanBoard::acceptsDrag(PointerButton button) const {
+	// With a mouse a pressed card or header drags at once; on touch only after a long press claims the drag, so a
+	// swipe scrolls the column instead.
+	return button == PointerButton::Left && mPress && !(ui() && ui()->isTouchMode());
+}
+
 void KanbanBoard::handlePointer(Event& event) {
+	if (const Dragged* drag = event.drag()) {
+		handleDrag(event, *drag);
+		return;
+	}
+
 	switch (event.type()) {
 		case Event::Type::PointerDown:
 			{
@@ -790,36 +745,12 @@ void KanbanBoard::handlePointer(Event& event) {
 		case Event::Type::LongPress:
 			if (!mPress || currentLift() || !ui() || !ui()->isTouchMode()) return;
 			mPress->held = true;
-			ui()->capturePointer(*this);
-			event.accept();
-			return;
-
-		case Event::Type::PointerMove:
-			if (currentLift()) {
-				updateDrag(event.windowPosition());
-				event.accept();
-				return;
-			}
-			if (!mPress || !movedPast(mPress->windowPoint, event.windowPosition(), kDragThreshold)) return;
-			if (ui() && ui()->isTouchMode() && !mPress->held) {
-				mPress.reset();
-				return;
-			}
-			if (mPress->card) beginDrag();
-			else beginColumnDrag();
-			updateDrag(event.windowPosition());
+			ui()->claimDrag(*this);
 			event.accept();
 			return;
 
 		case Event::Type::PointerUp:
-			if (event.button() != PointerButton::Left) return;
-			if (mDrag || mColumnDrag) {
-				if (mDrag) finishDrag(true);
-				else finishColumnDrag(true);
-				event.accept();
-				return;
-			}
-			if (mPress && mPress->held && ui()) ui()->releasePointer(*this);
+			if (event.button() != PointerButton::Left || currentLift()) return;
 			mPress.reset();
 			return;
 
@@ -829,6 +760,33 @@ void KanbanBoard::handlePointer(Event& event) {
 	}
 }
 
+void KanbanBoard::handleDrag(Event& event, const Dragged& drag) {
+	if (drag.button != PointerButton::Left) return;
+	switch (drag.phase) {
+		case DragPhase::Started:
+			if (!mPress || currentLift()) return;
+			if (mPress->card) beginDrag();
+			else beginColumnDrag();
+			if (!currentLift()) return;
+			updateDrag(event.windowPosition());
+			break;
+		case DragPhase::Moved:
+			if (!currentLift()) return;
+			updateDrag(event.windowPosition());
+			break;
+		case DragPhase::Finished:
+			if (mDrag) finishDrag(true);
+			else if (mColumnDrag) finishColumnDrag(true);
+			else return;
+			break;
+		case DragPhase::Cancelled:
+			if (!currentLift()) return;
+			cancelDrag();
+			break;
+	}
+	event.accept();
+}
+
 std::optional<size_t> KanbanBoard::columnHeaderAround(const Widget* target) const {
 	if (!target) return std::nullopt;
 	for (size_t column = 0; column < mColumnViews.size(); column++) {
@@ -853,7 +811,6 @@ KanbanBoard::Lift KanbanBoard::lift(Widget& widget, Vec2F windowPoint) {
 	addChild(widget);
 	if (ui()) {
 		lifted.focusBeforeLift = ui()->keyboardFocus();
-		ui()->capturePointer(*this);
 		ui()->setKeyboardFocus(this);
 	}
 	setCursor(CursorShape::Grabbing);
@@ -867,10 +824,7 @@ void KanbanBoard::drop(const Lift& lifted) {
 	setCursor(CursorShape::Default);
 	removeChild(*lifted.widget);
 	lifted.widget->setGeometryAnimated(true);
-	if (ui()) {
-		ui()->releasePointer(*this);
-		if (ui()->keyboardFocus() == this) ui()->setKeyboardFocus(lifted.focusBeforeLift);
-	}
+	if (ui() && ui()->keyboardFocus() == this) ui()->setKeyboardFocus(lifted.focusBeforeLift);
 }
 
 const KanbanBoard::Lift* KanbanBoard::currentLift() const {
@@ -906,7 +860,7 @@ void KanbanBoard::beginColumnDrag() {
 	drag.destination = column;
 	drag.lift = lift(*mColumnViews[column], mPress->windowPoint);
 	mColumnDrag = drag;
-	mColumnStrip.requestLayout();
+	placeColumnGap(columnGapSlot());
 }
 
 void KanbanBoard::updateDrag(Vec2F windowPoint) {
@@ -918,8 +872,14 @@ void KanbanBoard::updateDrag(Vec2F windowPoint) {
 	if (mColumnDrag) {
 		mColumnDrag->lift.pointer = windowPoint;
 		mColumnDrag->lift.position.x = windowPoint.x - mColumnDrag->lift.grabOffset.x - windowPosition().x;
+		const size_t before = mColumnDrag->destination;
 		mColumnDrag->destination = columnDestinationAt(mColumnDrag->lift.position.x + windowPosition().x);
-		mColumnStrip.requestLayout();
+		// The rule compares the lifted edge with where the other columns stand around the gap; when the gap moves they
+		// move, so lay out now and the next pointer event in the same frame does not read stale positions.
+		if (mColumnDrag->destination != before) {
+			placeColumnGap(columnGapSlot());
+			if (ui()) ui()->updateLayout();
+		}
 	}
 	requestLayout();
 	requestPaint();
@@ -948,6 +908,7 @@ void KanbanBoard::finishColumnDrag(bool commit) {
 	mColumnDrag.reset();
 	mSuppressNextClick = commit;
 	drop(drag.lift);
+	placeColumnGap(std::nullopt);
 	mColumnStrip.insertChild(drag.column, *drag.lift.widget);
 	mColumnLanding = Landing{ drag.lift.widget, landing };
 
@@ -956,8 +917,11 @@ void KanbanBoard::finishColumnDrag(bool commit) {
 
 void KanbanBoard::cancelDrag() {
 	mPress.reset();
+	const bool lifted = currentLift() != nullptr;
 	if (mDrag) finishDrag(false);
 	if (mColumnDrag) finishColumnDrag(false);
+	// Escape ends the router's drag too, so the release after it is not taken for a drop.
+	if (lifted && ui() && ui()->isDragging()) ui()->cancelDrag();
 }
 
 std::optional<size_t> KanbanBoard::columnDropIndex() const {
@@ -980,6 +944,25 @@ size_t KanbanBoard::columnDestinationAt(halnf liftedLeft) const {
 	return destination;
 }
 
+void KanbanBoard::placeColumnGap(std::optional<size_t> slot) {
+	// The gap is a spacer among the visible columns at the slot the lifted column would land in.
+	mColumnStrip.removeChild(mColumnGap);
+	mColumnGap.setVisible(slot.has_value());
+	size_t index = mColumnStrip.children().size();
+	if (slot) {
+		size_t visible = 0;
+		for (size_t child = 0; child < mColumnStrip.children().size(); child++) {
+			if (!mColumnStrip.children()[child]->isVisible()) continue;
+			if (visible == *slot) {
+				index = child;
+				break;
+			}
+			visible++;
+		}
+	}
+	mColumnStrip.insertChild(index, mColumnGap);
+}
+
 std::optional<size_t> KanbanBoard::columnGapSlot() const {
 	if (!mColumnDrag) return std::nullopt;
 	size_t visibleBefore = 0;
@@ -1005,25 +988,15 @@ void KanbanBoard::onTick(halnf deltaMs) {
 }
 
 void KanbanBoard::autoScroll(halnf deltaMs) {
+	// The viewports scroll themselves near their edges, the same as under a lifted list item: the column strip sideways,
+	// the card column under the pointer up and down.
 	const Vec2F pointer = currentLift()->pointer;
-	const RectF board = windowRect();
-	bool scrolled = false;
-
-	const halnf horizontal = edgeSpeed(pointer.x, board.pos.x, board.pos.x + board.size.x);
-	if (horizontal != 0 && mColumnScroller.isScrollable()) {
-		mColumnScroller.jumpTo(mColumnScroller.offset() + horizontal * kAutoScrollSpeed * deltaMs);
-		scrolled = true;
-	}
+	bool scrolled = mColumnScroller.autoScrollAt(mColumnScroller.toLocal(pointer), deltaMs);
 
 	const std::optional<size_t> column = mDrag ? columnAt(pointer.x) : std::nullopt;
 	if (column) {
 		ScrollView& scroller = mColumnViews[*column]->scroller();
-		const RectF area = scroller.windowRect();
-		const halnf vertical = edgeSpeed(pointer.y, area.pos.y, area.pos.y + area.size.y);
-		if (vertical != 0 && scroller.isScrollable()) {
-			scroller.jumpTo(scroller.offset() + vertical * kAutoScrollSpeed * deltaMs);
-			scrolled = true;
-		}
+		scrolled = scroller.autoScrollAt(scroller.toLocal(pointer), deltaMs) || scrolled;
 	}
 
 	if (scrolled) updateDrag(pointer);
@@ -1111,12 +1084,9 @@ void KanbanBoard::paintRaisedBackdrop(Canvas& painter, const RectF& childRect) {
 		return;
 	}
 	if (mColumnDrag) {
-		const RectF slot = translated(mColumnGapRect, mColumnStrip.windowPosition() - windowPosition());
+		const RectF slot = translated(mColumnGap.rect(), mColumnStrip.windowPosition() - windowPosition());
 		painter.outline(slot, style.palette.focusRing, style.metrics.surfaceCornerRadius);
 	}
-	painter.rect(
-		makeRect(childRect.pos.x + 2, childRect.pos.y + kLiftedShadowOffset, childRect.size.x, childRect.size.y),
-		style.palette.shadow,
-		style.metrics.cornerRadius
-	);
+	// A lifted card or column casts the theme elevation shadow, like a lifted list item.
+	paintElevationShadow(painter, childRect, style.metrics.cornerRadius, style);
 }
diff --git a/Widgets/src/components/kanban/public/KanbanBoard.hpp b/Widgets/src/components/kanban/public/KanbanBoard.hpp
index 9c06efc8..cea74fd6 100644
--- a/Widgets/src/components/kanban/public/KanbanBoard.hpp
+++ b/Widgets/src/components/kanban/public/KanbanBoard.hpp
@@ -2,10 +2,13 @@
 
 #include "Button.hpp"
 #include "Containers.hpp"
+#include "Event.hpp"
 #include "FullViewFrame.hpp"
 #include "InputCodes.hpp"
+#include "InteractionVisual.hpp"
 #include "Label.hpp"
 #include "Menus.hpp"
+#include "ReorderSession.hpp"
 #include "Widget.hpp"
 
 #include <cstdint>
@@ -77,15 +80,20 @@ namespace tp::ui {
 	protected:
 		void paint(Canvas& painter) override;
 		void paintOverlay(Canvas& painter) override;
-		void onHoverChanged() override { requestPaint(); }
+		void onHoverChanged() override { refreshVisual(); }
+		void onPressedChanged() override { refreshVisual(); }
+		void onThemeChanged() override;
+		void onTick(halnf deltaMs) override;
 
 	private:
 		friend class KanbanBoard;
 
 		void setSelected(bool selected);
+		void refreshVisual();
 		[[nodiscard]] size_t detailLinesFor(halnf height) const;
 
 		KanbanItemId mId;
+		InteractionVisual mVisual{ *this };
 		Label mTitle;
 		Label mDetail;
 		std::optional<RGBA> mAccent;
@@ -106,11 +114,19 @@ namespace tp::ui {
 
 	private:
 		friend class KanbanBoard;
-		class CardLayout;
+
+		class LandingLayout;
+
+		// Puts the cards and the placeholder in display order as children.
+		void arrangeChildren();
+		// Starts the landing glide of cards that came from elsewhere, once they are placed.
+		void onArranged();
 
 		void setCards(const std::vector<KanbanCard*>& cards, const std::unordered_map<KanbanCard*, RectF>& landings);
 		void removeCard(KanbanCard& card);
 		void setPlaceholder(std::optional<size_t> index, halnf height);
+		// The cards in the stack as a reorder lane, in window coordinates.
+		[[nodiscard]] ReorderLane lane() const;
 		[[nodiscard]] size_t insertionIndexAt(halnf windowY) const;
 		[[nodiscard]] std::optional<size_t> indexOf(const KanbanCard& card) const;
 
@@ -118,7 +134,8 @@ namespace tp::ui {
 		std::unordered_map<KanbanCard*, RectF> mLandings;
 		std::optional<size_t> mPlaceholderIndex;
 		halnf mPlaceholderHeight = 0;
-		RectF mPlaceholderRect = makeRect(0, 0, 0, 0);
+		// Holds the open slot among the cards while a card is dragged over the stack.
+		Spacer mPlaceholder;
 	};
 
 	class KanbanColumnView : public Widget {
@@ -149,7 +166,7 @@ namespace tp::ui {
 		Widget mHeader;
 		Label mTitle;
 		Label mCount;
-		GlyphButton mOptions{ GlyphButton::Glyph::Options };
+		GlyphButton mOptions{ Glyph::More };
 		Menu mOptionsMenu;
 		ScrollView mScroller{ Axis::Vertical };
 		KanbanCardStack mStack;
@@ -166,7 +183,6 @@ namespace tp::ui {
 		using CardFactory = std::function<std::unique_ptr<KanbanCard>(KanbanItemId)>;
 		using CardUpdater = std::function<void(KanbanCard&)>;
 
-		static constexpr halnf kDragThreshold = 5;
 		static constexpr halnf kColumnWheelStep = 60;
 
 		explicit KanbanBoard(const KanbanModel& model);
@@ -227,6 +243,7 @@ namespace tp::ui {
 
 	protected:
 		void onEvent(Event& event) override;
+		[[nodiscard]] bool acceptsDrag(PointerButton button) const override;
 		void filterDescendantEvent(Event& event) override;
 		void onTick(halnf deltaMs) override;
 		[[nodiscard]] Extent measureContent(Axis, halnf) const override { return {}; }
@@ -236,9 +253,7 @@ namespace tp::ui {
 
 	private:
 		class BoardLayout;
-		class StripLayout;
 		friend class BoardLayout;
-		friend class StripLayout;
 
 		struct Press {
 			KanbanCard* card = nullptr;
@@ -289,8 +304,8 @@ namespace tp::ui {
 		KanbanCard& cardFor(KanbanItemId id);
 		void updateCard(KanbanCard& card);
 
-		void scrollColumnsSideways(Event& event);
 		void handlePointer(Event& event);
+		void handleDrag(Event& event, const Dragged& drag);
 		void handleClick(Event& event);
 		void handleKey(Event& event);
 		[[nodiscard]] std::optional<KanbanItemId> neighbourOfSelection(Key key) const;
@@ -307,6 +322,8 @@ namespace tp::ui {
 		void finishColumnDrag(bool commit);
 		[[nodiscard]] size_t columnDestinationAt(halnf liftedLeft) const;
 		[[nodiscard]] std::optional<size_t> columnGapSlot() const;
+		void placeColumnGap(std::optional<size_t> slot);
+		void applyColumnWidth(Widget& column) const;
 		void autoScroll(halnf deltaMs);
 		void refreshOptionsMenus();
 		void showDropTarget(const std::optional<KanbanDropTarget>& target);
@@ -340,7 +357,8 @@ namespace tp::ui {
 		std::optional<Drag> mDrag;
 		std::optional<ColumnDrag> mColumnDrag;
 		std::optional<Landing> mColumnLanding;
-		RectF mColumnGapRect = makeRect(0, 0, 0, 0);
+		// Holds the lifted column's slot in the strip while it is dragged.
+		Spacer mColumnGap;
 		bool mSuppressNextClick = false;
 
 		FullViewFrame mFrame;
diff --git a/Widgets/src/components/kanban/tests/KanbanBoardTests.cpp b/Widgets/src/components/kanban/tests/KanbanBoardTests.cpp
index 96d68136..a50db070 100644
--- a/Widgets/src/components/kanban/tests/KanbanBoardTests.cpp
+++ b/Widgets/src/components/kanban/tests/KanbanBoardTests.cpp
@@ -93,7 +93,7 @@ namespace {
 
 		std::vector<std::string> menuTitles(size_t column) {
 			std::vector<std::string> titles;
-			for (const std::unique_ptr<MenuItem>& item : board.columnView(column).optionsMenu().items())
+			for (const MenuItem* item : board.columnView(column).optionsMenu().items())
 				titles.push_back(item->text());
 			return titles;
 		}
@@ -487,7 +487,15 @@ SUITE(KanbanBoard) {
 		driver.moveTo(scene.centerOfColumn(1));
 		driver.wheel({-3, 0});
 		driver.settle();
-		CHECK(scene.board.columnScroller().offset() > 0);
+		const halnf afterSwipe = scene.board.columnScroller().offset();
+		CHECK(afterSwipe > 0);
+
+		// Shift+wheel over a column that cannot scroll its cards also moves the strip sideways (it did not before).
+		driver.moveTo(scene.centerOfColumn(2));
+		driver.withModifiers(KeyModifiers::shiftOnly());
+		driver.wheel({ 0, -1 });
+		driver.settle();
+		CHECK(scene.board.columnScroller().offset() > afterSwipe);
 	}
 }
 
@@ -608,12 +616,14 @@ SUITE(KanbanColumnMove) {
 		driver.settle();
 
 		REQUIRE CHECK_EQUAL(2u, *scene.board.columnDropIndex());
+		// The slot is the width of the lifted column, right after the last column (pixel snapping may round it).
 		const RectF slot = scene.board.columnView(2).windowRect();
-		const RectF expected = makeRect(slot.pos.x + slot.size.x + 10, slot.pos.y, slot.size.x, slot.size.y);
+		const halnf liftedWidth = scene.board.columnView(0).windowRect().size.x;
+		const RectF expected = makeRect(slot.pos.x + slot.size.x + 10, slot.pos.y, liftedWidth, slot.size.y);
 		bool outlined = false;
 		for (const CanvasCommand& command : driver.paint().commands()) {
-			const bool sameRect = std::fabs(command.rect.pos.x - expected.pos.x) < 0.5f &&
-														std::fabs(command.rect.size.x - expected.size.x) < 0.5f;
+			const bool sameRect = std::fabs(command.rect.pos.x - expected.pos.x) < 1.0f &&
+														std::fabs(command.rect.size.x - expected.size.x) < 1.0f;
 			outlined |= command.kind == CanvasCommand::Kind::Outline && sameRect;
 		}
 		CHECK(outlined);
diff --git a/Widgets/src/components/markdown/private/MarkdownEditor.cpp b/Widgets/src/components/markdown/private/MarkdownEditor.cpp
index 44e317d8..d8f8996c 100644
--- a/Widgets/src/components/markdown/private/MarkdownEditor.cpp
+++ b/Widgets/src/components/markdown/private/MarkdownEditor.cpp
@@ -170,16 +170,12 @@ MarkdownEditor::MarkdownEditor() {
 
 	mToolbar.setSizing(AxisSizing::fill(), AxisSizing::fit());
 	mToolbar.emplaceLayout<RowLayout>(4).setCrossAlign(CrossAlign::Center);
-	for (Button* button : { &mEditorButton, &mSplitButton, &mPreviewButton }) {
-		button->setStyle(Button::Style::Tab);
-		mToolbar.addChild(*button);
-	}
-	mEditorButton.setTooltip("Show only the source");
-	mSplitButton.setTooltip("Source and preview side by side");
-	mPreviewButton.setTooltip("Show only the rendered document");
-	mEditorButton.setOnActivate([this] { setMode(Mode::Editor); });
-	mSplitButton.setOnActivate([this] { setMode(Mode::Split); });
-	mPreviewButton.setOnActivate([this] { setMode(Mode::Preview); });
+	mModes.addSegment("Editor", Mode::Editor).setTooltip("Show only the source");
+	mModes.addSegment("Split", Mode::Split).setTooltip("Source and preview side by side");
+	mModes.addSegment("Preview", Mode::Preview).setTooltip("Show only the rendered document");
+	mModes.setValue(mMode);
+	mModes.setOnChanged([this](const Mode& mode) { setMode(mode); });
+	mToolbar.addChild(mModes);
 	mToolbarSpacer.setSizing(AxisSizing::fill(), AxisSizing::fixed(1));
 	mToolbar.addChild(mToolbarSpacer);
 	mStatus.setTone(Label::Tone::Muted);
@@ -230,13 +226,7 @@ MarkdownEditor::MarkdownEditor() {
 	refreshStatus();
 }
 
-Button& MarkdownEditor::modeButton(Mode mode) {
-	switch (mode) {
-		case Mode::Editor: return mEditorButton;
-		case Mode::Preview: return mPreviewButton;
-		default: return mSplitButton;
-	}
-}
+Button& MarkdownEditor::modeButton(Mode mode) { return mModes.segment((size_t) mode); }
 
 void MarkdownEditor::setMarkdown(std::string source) {
 	mSourceArea.setText(source);
@@ -252,9 +242,7 @@ void MarkdownEditor::setMode(Mode mode) {
 }
 
 void MarkdownEditor::applyMode() {
-	mEditorButton.setSelected(mMode == Mode::Editor);
-	mSplitButton.setSelected(mMode == Mode::Split);
-	mPreviewButton.setSelected(mMode == Mode::Preview);
+	mModes.setValue(mMode);
 
 	mSourcePane.setVisible(mMode != Mode::Preview);
 	mPreviewPane.setVisible(mMode != Mode::Editor);
diff --git a/Widgets/src/components/markdown/private/MarkdownView.cpp b/Widgets/src/components/markdown/private/MarkdownView.cpp
index f7bea340..f4ec4f8d 100644
--- a/Widgets/src/components/markdown/private/MarkdownView.cpp
+++ b/Widgets/src/components/markdown/private/MarkdownView.cpp
@@ -4,6 +4,7 @@
 
 #include "BoxLayout.hpp"
 #include "Event.hpp"
+#include "StackLayout.hpp"
 #include "Theme.hpp"
 #include "Ui.hpp"
 
@@ -61,109 +62,6 @@ namespace {
 		return titled;
 	}
 
-	class TableLayout : public Layout {
-	public:
-		explicit TableLayout(size_t columns) :
-			mColumns(std::max<size_t>(columns, 1)) {}
-
-	protected:
-		[[nodiscard]] Extent measureChildren(const LayoutContext& context, Axis axis, halnf crossLength) const override {
-			if (axis == Axis::Horizontal) {
-				halnf preferred = 0;
-				halnf minimum = 0;
-				for (size_t column = 0; column < mColumns; column++) {
-					const Extent widest = widestIn(context, column);
-					preferred += widest.preferred;
-					minimum += widest.minimum;
-				}
-				const halnf gaps = kTableGap * (halnf) (mColumns - 1);
-				return Extent::shrinkable(preferred + gaps, minimum + gaps);
-			}
-
-			const std::vector<halnf> widths = columnWidths(context, crossLength);
-			halnf height = 0;
-			for (size_t row = 0; row < rowCount(context); row++)
-				height += rowHeight(context, row, widths) + (row > 0 ? kTableGap : 0);
-			return Extent::natural(height);
-		}
-
-		void arrangeChildren(LayoutContext& context, const RectF& contentArea) override {
-			const std::vector<halnf> widths = columnWidths(context, contentArea.size.x);
-			halnf y = contentArea.pos.y;
-			for (size_t row = 0; row < rowCount(context); row++) {
-				const halnf height = rowHeight(context, row, widths);
-				halnf x = contentArea.pos.x;
-				for (size_t column = 0; column < mColumns; column++) {
-					Widget* cell = cellAt(context, row, column);
-					if (cell) context.place(*cell, makeRect(x, y, widths[column], height));
-					x += widths[column] + kTableGap;
-				}
-				y += height + kTableGap;
-			}
-		}
-
-	private:
-		[[nodiscard]] size_t rowCount(const LayoutContext& context) const {
-			return (context.children().size() + mColumns - 1) / mColumns;
-		}
-
-		[[nodiscard]] Widget* cellAt(const LayoutContext& context, size_t row, size_t column) const {
-			const size_t index = row * mColumns + column;
-			return index < context.children().size() ? context.children()[index] : nullptr;
-		}
-
-		[[nodiscard]] Extent widestIn(const LayoutContext& context, size_t column) const {
-			Extent widest = { 0, 0, kUnbounded, 0 };
-			for (size_t row = 0; row < rowCount(context); row++) {
-				const Widget* cell = cellAt(context, row, column);
-				if (!cell) continue;
-				const Extent extent = context.measure(*cell, Axis::Horizontal, kUnbounded);
-				widest.preferred = std::max(widest.preferred, extent.preferred);
-				widest.minimum = std::max(widest.minimum, extent.minimum);
-			}
-			return widest;
-		}
-
-		[[nodiscard]] std::vector<halnf> columnWidths(const LayoutContext& context, halnf available) const {
-			std::vector<halnf> preferred(mColumns);
-			std::vector<halnf> minimum(mColumns);
-			halnf preferredTotal = 0;
-			halnf minimumTotal = 0;
-			for (size_t column = 0; column < mColumns; column++) {
-				const Extent extent = widestIn(context, column);
-				preferred[column] = extent.preferred;
-				minimum[column] = extent.minimum;
-				preferredTotal += extent.preferred;
-				minimumTotal += extent.minimum;
-			}
-
-			const halnf usable = available - kTableGap * (halnf) (mColumns - 1);
-			if (available >= kUnbounded || usable >= preferredTotal) {
-				const halnf extra = available >= kUnbounded ? 0 : (usable - preferredTotal) / (halnf) mColumns;
-				for (halnf& width : preferred)
-					width += extra;
-				return preferred;
-			}
-
-			const halnf slack = preferredTotal - minimumTotal;
-			const halnf share = slack > 0 ? std::max(0.0f, usable - minimumTotal) / slack : 0;
-			std::vector<halnf> widths(mColumns);
-			for (size_t column = 0; column < mColumns; column++)
-				widths[column] = minimum[column] + (preferred[column] - minimum[column]) * share;
-			return widths;
-		}
-
-		[[nodiscard]] halnf rowHeight(const LayoutContext& context, size_t row, const std::vector<halnf>& widths) const {
-			halnf height = 0;
-			for (size_t column = 0; column < mColumns; column++) {
-				const Widget* cell = cellAt(context, row, column);
-				if (cell) height = std::max(height, context.measure(*cell, Axis::Vertical, widths[column]).preferred);
-			}
-			return height;
-		}
-
-		size_t mColumns;
-	};
 }
 
 MarkdownBlockWidget::MarkdownBlockWidget(const Block& block, Surface surface) :
@@ -357,8 +255,6 @@ void MarkdownView::setStyle(const MarkdownStyle& style) {
 
 void MarkdownView::rebuild() {
 	removeAllChildren();
-	mRetired = std::move(mOwned);
-	mOwned.clear();
 	mTopBlocks.clear();
 
 	for (const Block& block : mDocument.blocks()) {
@@ -372,7 +268,6 @@ void MarkdownView::rebuild() {
 
 void MarkdownView::onTick(halnf) {
 	stopTicking();
-	mRetired.clear();
 
 	if (!mPendingTaskToggle) return;
 	const size_t offset = *mPendingTaskToggle;
@@ -391,8 +286,7 @@ void MarkdownView::requestTaskToggle(size_t taskMarkOffset) {
 Widget& MarkdownView::build(const Block& block, Widget& parent, size_t depth) {
 	const auto surface =
 		block.kind == BlockKind::Table ? MarkdownBlockWidget::Surface::None : MarkdownBlockWidget::Surface::Automatic;
-	auto& owner = own<MarkdownBlockWidget>(block, surface);
-	parent.addChild(owner);
+	auto& owner = parent.emplaceChild<MarkdownBlockWidget>(block, surface);
 	const Theme& style = theme();
 
 	switch (block.kind) {
@@ -428,12 +322,11 @@ Widget& MarkdownView::build(const Block& block, Widget& parent, size_t depth) {
 		case BlockKind::Admonition:
 			{
 				owner.emplaceLayout<ColumnLayout>(6).setPadding({ mStyle.quoteIndent, 8, 10, 8 });
-				auto& title = own<RichText>();
+				auto& title = owner.emplaceChild<RichText>();
 				title.setFontSize(scaledFontSize(1));
 				title.setSpans(
 					{ { titleCase(block.admonitionType), FontFace::Bold, admonitionColor(style.palette, block.admonitionType) } }
 				);
-				owner.addChild(title);
 				buildChildren(block, owner, depth);
 				break;
 			}
@@ -447,8 +340,7 @@ Widget& MarkdownView::build(const Block& block, Widget& parent, size_t depth) {
 		case BlockKind::Table:
 			{
 				owner.emplaceLayout<RowLayout>();
-				auto& grid = own<MarkdownBlockWidget>(block, MarkdownBlockWidget::Surface::TableGrid);
-				owner.addChild(grid);
+				auto& grid = owner.emplaceChild<MarkdownBlockWidget>(block, MarkdownBlockWidget::Surface::TableGrid);
 				buildTable(block, grid);
 				break;
 			}
@@ -483,40 +375,36 @@ void MarkdownView::buildList(const Block& list, Widget& owner, size_t depth) {
 void MarkdownView::buildListItem(
 	const Block& item, const std::optional<unsigned>& number, Widget& owner, size_t depth
 ) {
-	auto& row = own<MarkdownBlockWidget>(item);
+	auto& row = owner.emplaceChild<MarkdownBlockWidget>(item);
 	row.emplaceLayout<RowLayout>(kMarkerGap).setCrossAlign(CrossAlign::Start);
-	owner.addChild(row);
 
 	if (item.taskChecked) {
-		auto& box = own<Checkbox>();
+		auto& box = row.emplaceChild<Checkbox>();
 		box.setChecked(*item.taskChecked);
 		box.setTooltip("Toggle task");
 		const size_t offset = item.taskMarkOffset;
 		box.setOnChanged([this, offset](bool) { requestTaskToggle(offset); });
-		row.addChild(box);
 	} else {
 		const halnf markerWidth = mStyle.listIndent * mFontScale - kMarkerGap;
 		if (number) {
-			auto& numeral = own<RichText>();
+			auto& numeral = row.emplaceChild<RichText>();
 			numeral.setFontSize(scaledFontSize(1));
 			numeral.setSizing(AxisSizing::fixed(markerWidth), AxisSizing::fit());
 			numeral.setAlignment(TextAlign::rightCenter());
 			numeral.setBaseColor(theme().palette.mutedText);
 			numeral.setSpans({ { std::to_string(*number) + "." } });
-			row.addChild(numeral);
 		} else {
 			const ListMarker::Shape shapes[] = { ListMarker::Shape::Disc,
 																					 ListMarker::Shape::Circle,
 																					 ListMarker::Shape::Square };
 			const halnf lineHeight = std::round(theme().metrics.lineHeight * mFontScale * 1.15f);
-			row.addChild(own<ListMarker>(shapes[depth % 3], markerWidth, lineHeight));
+			row.emplaceChild<ListMarker>(shapes[depth % 3], markerWidth, lineHeight);
 		}
 	}
 
-	auto& body = own<Widget>();
+	auto& body = row.emplaceChild<Widget>();
 	body.setSizing(AxisSizing::fill(), AxisSizing::fit());
 	body.emplaceLayout<ColumnLayout>(kListGap);
-	row.addChild(body);
 
 	bool hasContent = false;
 	if (!item.runs.empty()) {
@@ -539,24 +427,25 @@ void MarkdownView::buildListItem(
 
 void MarkdownView::buildTable(const Block& table, Widget& owner) {
 	const size_t columns = table.children.empty() ? 1 : table.children.front().children.size();
-	owner.setLayout(std::make_unique<TableLayout>(columns));
-	owner.layout()->setPadding(Insets::uniform(1));
+	// Every column is as wide as its widest cell; when the table is too narrow, the columns shrink towards their cells'
+	// minimum widths in proportion to their slack.
+	GridLayout& grid = owner.emplaceLayout<GridLayout>(std::max<size_t>(columns, 1), kTableGap);
+	grid.setColumnWidths(std::vector<AxisSizing>(std::max<size_t>(columns, 1), AxisSizing::fit()));
+	grid.setPadding(Insets::uniform(1));
 	owner.setSizing(AxisSizing::fit(), AxisSizing::fit());
 
 	for (const Block& row : table.children) {
 		for (size_t column = 0; column < columns; column++) {
 			if (column >= row.children.size()) {
-				auto& filler = own<MarkdownBlockWidget>(row);
-				owner.addChild(filler);
+				owner.emplaceChild<MarkdownBlockWidget>(row);
 				continue;
 			}
 
 			const Block& cell = row.children[column];
-			auto& cellWidget = own<MarkdownBlockWidget>(cell);
+			auto& cellWidget = owner.emplaceChild<MarkdownBlockWidget>(cell);
 			cellWidget.emplaceLayout<ColumnLayout>().setPadding(
 				Insets::symmetric(mStyle.cellPadding + 2, mStyle.cellPadding / 2 + 1)
 			);
-			owner.addChild(cellWidget);
 			RichText& text = addText(cellWidget, cell, 1, row.headerRow ? FontFace::Bold : FontFace::Regular);
 			text.setAlignment(textAlignFor(cell.align));
 		}
@@ -564,7 +453,7 @@ void MarkdownView::buildTable(const Block& table, Widget& owner) {
 }
 
 RichText& MarkdownView::addText(Widget& owner, const Block& block, halnf fontScale, FontFace baseFace) {
-	auto& text = own<RichText>();
+	auto& text = owner.emplaceChild<RichText>();
 	text.setFontSize(scaledFontSize(fontScale));
 	text.setLineSpacing(fontScale > 1.2f ? 1.05f : 1.15f);
 	text.setSpans(spansOf(block, baseFace));
@@ -574,12 +463,11 @@ RichText& MarkdownView::addText(Widget& owner, const Block& block, halnf fontSca
 	text.setOnSourceActivated([this](size_t offset) {
 		if (mOnSource) mOnSource(offset);
 	});
-	owner.addChild(text);
 	return text;
 }
 
 RichText& MarkdownView::addCode(Widget& owner, const Block& block) {
-	auto& text = own<RichText>();
+	auto& text = owner.emplaceChild<RichText>();
 	text.setFontSize(scaledFontSize(1));
 	std::vector<TextSpan> spans;
 	size_t start = 0;
@@ -598,7 +486,6 @@ RichText& MarkdownView::addCode(Widget& owner, const Block& block) {
 	text.setOnSourceActivated([this](size_t offset) {
 		if (mOnSource) mOnSource(offset);
 	});
-	owner.addChild(text);
 	return text;
 }
 
@@ -627,11 +514,10 @@ void MarkdownView::addImages(Widget& owner, const Block& block) {
 	for (const Block& child : block.children) {
 		if (child.kind != BlockKind::Image) continue;
 
-		auto& image = own<MarkdownImage>(resolveImagePath(child.imageSource), child.imageAlt, child.source.begin);
+		auto& image = owner.emplaceChild<MarkdownImage>(resolveImagePath(child.imageSource), child.imageAlt, child.source.begin);
 		image.setOnActivated([this](size_t offset) {
 			if (mOnSource) mOnSource(offset);
 		});
-		owner.addChild(image);
 	}
 }
 
@@ -654,27 +540,31 @@ std::vector<TextSpan> MarkdownView::spansOf(const Block& block, FontFace baseFac
 	return spans;
 }
 
+namespace {
+	template <typename Type>
+	void collect(const Widget& widget, std::vector<Type*>& found) {
+		for (Widget* child : widget.children()) {
+			if (auto* match = dynamic_cast<Type*>(child)) found.push_back(match);
+			collect(*child, found);
+		}
+	}
+}
+
 std::vector<RichText*> MarkdownView::textWidgets() const {
 	std::vector<RichText*> texts;
-	for (const auto& widget : mOwned) {
-		if (auto* text = dynamic_cast<RichText*>(widget.get())) texts.push_back(text);
-	}
+	collect(*this, texts);
 	return texts;
 }
 
 std::vector<MarkdownImage*> MarkdownView::images() const {
 	std::vector<MarkdownImage*> found;
-	for (const auto& widget : mOwned) {
-		if (auto* image = dynamic_cast<MarkdownImage*>(widget.get())) found.push_back(image);
-	}
+	collect(*this, found);
 	return found;
 }
 
 std::vector<Checkbox*> MarkdownView::taskBoxes() const {
 	std::vector<Checkbox*> boxes;
-	for (const auto& widget : mOwned) {
-		if (auto* box = dynamic_cast<Checkbox*>(widget.get())) boxes.push_back(box);
-	}
+	collect(*this, boxes);
 	return boxes;
 }
 
diff --git a/Widgets/src/components/markdown/public/MarkdownEditor.hpp b/Widgets/src/components/markdown/public/MarkdownEditor.hpp
index 35b9cfb2..456b07d4 100644
--- a/Widgets/src/components/markdown/public/MarkdownEditor.hpp
+++ b/Widgets/src/components/markdown/public/MarkdownEditor.hpp
@@ -1,6 +1,7 @@
 #pragma once
 
 #include "Button.hpp"
+#include "SegmentedControl.hpp"
 #include "Containers.hpp"
 #include "Label.hpp"
 #include "MarkdownView.hpp"
@@ -91,9 +92,7 @@ namespace tp::ui {
 
 		Mode mMode = Mode::Split;
 		Panel mToolbar{ Panel::Surface::None };
-		Button mEditorButton{ "Editor" };
-		Button mSplitButton{ "Split" };
-		Button mPreviewButton{ "Preview" };
+		SegmentedControl<Mode> mModes;
 		Spacer mToolbarSpacer;
 		Label mStatus;
 
diff --git a/Widgets/src/components/markdown/public/MarkdownView.hpp b/Widgets/src/components/markdown/public/MarkdownView.hpp
index 42c9ec2d..360d5afb 100644
--- a/Widgets/src/components/markdown/public/MarkdownView.hpp
+++ b/Widgets/src/components/markdown/public/MarkdownView.hpp
@@ -134,20 +134,10 @@ namespace tp::ui {
 		[[nodiscard]] std::vector<TextSpan> spansOf(const markdown::Block& block, FontFace baseFace) const;
 		void requestTaskToggle(size_t taskMarkOffset);
 
-		template <typename Type, typename... Arguments>
-		Type& own(Arguments&&... arguments) {
-			auto widget = std::make_unique<Type>(std::forward<Arguments>(arguments)...);
-			Type& reference = *widget;
-			mOwned.push_back(std::move(widget));
-			return reference;
-		}
-
 		markdown::MarkdownDocument mDocument;
 		MarkdownStyle mStyle;
 		std::string mBaseDirectory;
 		halnf mFontScale = 1;
-		std::vector<std::unique_ptr<Widget>> mOwned;
-		std::vector<std::unique_ptr<Widget>> mRetired;
 		std::vector<MarkdownBlockWidget*> mTopBlocks;
 		std::optional<size_t> mPendingTaskToggle;
 
diff --git a/Widgets/src/components/markdown/tests/MarkdownViewTests.cpp b/Widgets/src/components/markdown/tests/MarkdownViewTests.cpp
index 1226325a..3e633f2e 100644
--- a/Widgets/src/components/markdown/tests/MarkdownViewTests.cpp
+++ b/Widgets/src/components/markdown/tests/MarkdownViewTests.cpp
@@ -194,6 +194,21 @@ SUITE(MarkdownViewWidget) {
 		CHECK(painter.findText("1")->rect.pos.x > painter.findText("22")->rect.pos.x);
 	}
 
+	TEST(RebuildingReplacesTheOwnedBlocks) {
+		ViewScene scene("first\n\nsecond");
+		UiDriver driver(scene.root);
+		CHECK_EQUAL(2u, scene.view.topBlocks().size());
+		CHECK_EQUAL(2u, scene.view.ownedChildCount());
+
+		scene.view.setMarkdown("only one");
+		driver.settle();
+
+		// The previous blocks are destroyed with their owner, so no stale text is found or painted.
+		CHECK_EQUAL(1u, scene.view.ownedChildCount());
+		CHECK_EQUAL(1u, scene.view.textWidgets().size());
+		CHECK(!driver.paint().hasText("first"));
+	}
+
 	TEST(LinksReportTheirTargetWhenClicked) {
 		ViewScene scene("go to [site](https://example.com) now");
 		std::string activated;
diff --git a/Widgets/src/components/media/private/MediaControls.cpp b/Widgets/src/components/media/private/MediaControls.cpp
index b35c6081..0a6ab91f 100644
--- a/Widgets/src/components/media/private/MediaControls.cpp
+++ b/Widgets/src/components/media/private/MediaControls.cpp
@@ -23,13 +23,6 @@ namespace {
 	constexpr halnf kSeekKeyStepSeconds = 5;
 	constexpr halnf kVolumeSliderWidth = 96;
 
-	std::vector<Vec2F> triangle(Vec2F center, halnf size, bool pointsRight) {
-		const halnf half = size / 2;
-		const halnf direction = pointsRight ? 1.0f : -1.0f;
-		return { center + Vec2F(-half * 0.8f * direction, -half),
-						 center + Vec2F(-half * 0.8f * direction, half),
-						 center + Vec2F(half * direction, 0.0f) };
-	}
 }
 
 std::string tp::ui::formatDuration(halnf seconds) {
@@ -78,68 +71,9 @@ void TransportButton::paint(Canvas& painter) {
 
 	RGBA glyphColor = mPrimary ? style.palette.onToggle : style.palette.text;
 	if (!isEffectivelyEnabled()) glyphColor = style.palette.disabledText;
-	paintGlyph(painter, box.center(), box.size.x * 0.36f, glyphColor);
+	tp::ui::paintGlyph(painter, mGlyph, glyphBox(box, box.size.x * 0.4f), glyphColor, style);
 }
 
-void TransportButton::paintGlyph(Canvas& painter, Vec2F center, halnf size, const RGBA& color) const {
-	const halnf half = size / 2;
-
-	switch (mGlyph) {
-		case Glyph::Play: painter.polygon(triangle(center + Vec2F(size * 0.08f, 0.0f), size, true), color); return;
-
-		case Glyph::Pause:
-			{
-				const halnf bar = size * 0.32f;
-				painter.rect(makeRect(center.x - half * 0.8f, center.y - half, bar, size), color, bar / 3);
-				painter.rect(makeRect(center.x + half * 0.8f - bar, center.y - half, bar, size), color, bar / 3);
-				return;
-			}
-
-		case Glyph::Previous:
-		case Glyph::Next:
-			{
-				const bool next = mGlyph == Glyph::Next;
-				const halnf bar = size * 0.16f;
-				const halnf barX = next ? center.x + half - bar : center.x - half;
-				painter.polygon(triangle(center + Vec2F(next ? -bar : bar, 0.0f), size * 0.85f, next), color);
-				painter.rect(makeRect(barX, center.y - half, bar, size), color, bar / 2);
-				return;
-			}
-
-		case Glyph::Volume:
-		case Glyph::Muted:
-			{
-				const halnf body = size * 0.3f;
-				const halnf left = center.x - half;
-				painter.polygon(
-					{ { left, center.y - body / 2 },
-						{ left + body, center.y - body / 2 },
-						{ left + body * 2, center.y - half },
-						{ left + body * 2, center.y + half },
-						{ left + body, center.y + body / 2 },
-						{ left, center.y + body / 2 } },
-					color
-				);
-				const halnf waveX = left + body * 2.4f;
-				if (mGlyph == Glyph::Muted) {
-					painter.line({ waveX, center.y - body }, { waveX + body * 1.6f, center.y + body }, color, 1.5f);
-					painter.line({ waveX, center.y + body }, { waveX + body * 1.6f, center.y - body }, color, 1.5f);
-					return;
-				}
-				painter.polyline(
-					{ { waveX, center.y - body }, { waveX + body * 0.7f, center.y }, { waveX, center.y + body } }, color, 1.5f
-				);
-				painter.polyline(
-					{ { waveX + body * 0.8f, center.y - half * 0.9f },
-						{ waveX + body * 1.7f, center.y },
-						{ waveX + body * 0.8f, center.y + half * 0.9f } },
-					color,
-					1.5f
-				);
-				return;
-			}
-	}
-}
 
 SeekBar::SeekBar() {
 	setDebugName("seek bar");
@@ -190,32 +124,63 @@ void SeekBar::seekBy(halnf seconds) {
 	if (mOnSeek) mOnSeek(mPosition);
 }
 
+void SeekBar::onHoverChanged() {
+	Control::onHoverChanged();
+	refreshReveal();
+}
+
+void SeekBar::refreshReveal() {
+	mVisual.setRevealHeld(mScrubbing);
+	if (mVisual.refresh()) startTicking();
+	requestPaint();
+}
+
+void SeekBar::onTick(halnf deltaMs) {
+	Control::onTick(deltaMs);
+	if (!mVisual.advance(deltaMs) && !isTransitioning()) stopTicking();
+	requestPaint();
+}
+
+void SeekBar::finishScrub() {
+	mScrubbing = false;
+	refreshReveal();
+	setPosition(mScrubPosition);
+	if (mOnSeek) mOnSeek(mPosition);
+}
+
 void SeekBar::onEvent(Event& event) {
 	if (!isEffectivelyEnabled()) return;
 
+	if (const Dragged* drag = event.drag()) {
+		if (drag->button != PointerButton::Left) return;
+		if (drag->phase == DragPhase::Cancelled) {
+			// Escape puts the playhead back where it was; nothing is sought.
+			mScrubbing = false;
+		} else if (drag->phase == DragPhase::Finished) {
+			finishScrub();
+		} else {
+			mScrubbing = true;
+			mScrubPosition = positionAt(event.position().x);
+		}
+		refreshReveal();
+		event.accept();
+		return;
+	}
+
 	switch (event.type()) {
 		case Event::Type::PointerDown:
 			if (event.button() != PointerButton::Left) return;
 			mScrubbing = true;
 			mScrubPosition = positionAt(event.position().x);
-			if (ui()) ui()->capturePointer(*this);
-			requestPaint();
-			event.accept();
-			return;
-
-		case Event::Type::PointerMove:
-			if (!mScrubbing) return;
-			mScrubPosition = positionAt(event.position().x);
 			requestPaint();
 			event.accept();
 			return;
 
 		case Event::Type::PointerUp:
-			if (!mScrubbing || event.button() != PointerButton::Left) return;
-			mScrubbing = false;
-			if (ui()) ui()->releasePointer(*this);
-			setPosition(mScrubPosition);
-			if (mOnSeek) mOnSeek(mPosition);
+			// A click without a drag seeks to where it was pressed; a drag finishes in its Finished phase, which the
+			// router delivers right after this release.
+			if (!mScrubbing || event.button() != PointerButton::Left || (ui() && ui()->isDragging())) return;
+			finishScrub();
 			event.accept();
 			return;
 
@@ -253,8 +218,10 @@ void SeekBar::paint(Canvas& painter) {
 		painter.rect(makeRect(track.pos, { track.size.x * shown, track.size.y }), style.palette.sliderFill, radius);
 	}
 
-	if (!known || !(isHovered() || mScrubbing || showsFocusRing())) return;
-	const halnf handleRadius = sizes::slider::handleSize / 2;
+	// The handle grows in while hovered or scrubbed, and stays for keyboard focus.
+	const halnf reveal = showsFocusRing() ? 1.0f : mVisual.reveal();
+	if (!known || reveal <= 0.01f) return;
+	const halnf handleRadius = sizes::slider::handleSize / 2 * reveal;
 	const Vec2F handle = { track.pos.x + track.size.x * shown, size().y / 2 };
 	if (showsFocusRing()) painter.circleOutline(handle, handleRadius + 3, style.palette.focusRing, 2);
 	painter.circle(handle, handleRadius, style.palette.text);
@@ -270,7 +237,7 @@ VolumeControl::VolumeControl() {
 	mSlider.setSizing(AxisSizing::fixed(kVolumeSliderWidth), AxisSizing::fit());
 	mSlider.setOnChanged([this](halnf) {
 		mMuted = false;
-		mMute.setGlyph(TransportButton::Glyph::Volume);
+		mMute.setGlyph(Glyph::Volume);
 		notify();
 	});
 
@@ -282,7 +249,7 @@ void VolumeControl::setVolume(halnf volume) { mSlider.setValue(std::clamp(volume
 
 void VolumeControl::setMuted(bool muted) {
 	mMuted = muted;
-	mMute.setGlyph(muted ? TransportButton::Glyph::Muted : TransportButton::Glyph::Volume);
+	mMute.setGlyph(muted ? Glyph::Muted : Glyph::Volume);
 	mMute.setTooltip(muted ? "Unmute" : "Mute");
 	notify();
 }
@@ -373,6 +340,6 @@ void PlayerBar::setTrack(const NowPlaying* track) {
 
 void PlayerBar::setPlaying(bool playing) {
 	mPlaying = playing;
-	playPause.setGlyph(playing ? TransportButton::Glyph::Pause : TransportButton::Glyph::Play);
+	playPause.setGlyph(playing ? Glyph::Pause : Glyph::Play);
 	playPause.setTooltip(playing ? "Pause" : "Play");
 }
diff --git a/Widgets/src/components/media/public/MediaControls.hpp b/Widgets/src/components/media/public/MediaControls.hpp
index 558cd40f..8e6aed4a 100644
--- a/Widgets/src/components/media/public/MediaControls.hpp
+++ b/Widgets/src/components/media/public/MediaControls.hpp
@@ -1,5 +1,8 @@
 #pragma once
 
+#include "Glyph.hpp"
+#include "InteractionVisual.hpp"
+
 #include "Button.hpp"
 #include "Containers.hpp"
 #include "Control.hpp"
@@ -13,8 +16,7 @@ namespace tp::ui {
 
 	class TransportButton : public Button {
 	public:
-		enum class Glyph { Play, Pause, Previous, Next, Volume, Muted };
-
+		// The transport symbols are core glyphs: Play, Pause, SkipPrevious, SkipNext, Volume, Muted.
 		explicit TransportButton(Glyph glyph, bool primary = false);
 
 		void setGlyph(Glyph glyph);
@@ -27,7 +29,6 @@ namespace tp::ui {
 		[[nodiscard]] RGBA backgroundTarget() const override;
 
 	private:
-		void paintGlyph(Canvas& painter, Vec2F center, halnf size, const RGBA& color) const;
 
 		Glyph mGlyph;
 		bool mPrimary;
@@ -57,6 +58,9 @@ namespace tp::ui {
 	protected:
 		[[nodiscard]] Extent measureContent(Axis axis, halnf crossLength) const override;
 		void onEvent(Event& event) override;
+		[[nodiscard]] bool acceptsDrag(PointerButton button) const override { return button == PointerButton::Left; }
+		void onHoverChanged() override;
+		void onTick(halnf deltaMs) override;
 		void paint(Canvas& painter) override;
 
 	private:
@@ -67,8 +71,12 @@ namespace tp::ui {
 		halnf mDuration = 0;
 		halnf mPosition = 0;
 		halnf mBuffered = 0;
+		void refreshReveal();
+		void finishScrub();
+
 		halnf mScrubPosition = 0;
 		bool mScrubbing = false;
+		InteractionVisual mVisual{ *this };
 		std::function<void(halnf)> mOnSeek;
 	};
 
@@ -89,7 +97,7 @@ namespace tp::ui {
 	private:
 		void notify();
 
-		TransportButton mMute{ TransportButton::Glyph::Volume };
+		TransportButton mMute{ Glyph::Volume };
 		Slider mSlider{ 0, 1, 1 };
 		bool mMuted = false;
 		std::function<void(halnf)> mOnChanged;
@@ -126,9 +134,9 @@ namespace tp::ui {
 		Panel art{ Surface::Raised };
 		Label title;
 		Label artist;
-		TransportButton previous{ TransportButton::Glyph::Previous };
-		TransportButton playPause{ TransportButton::Glyph::Play, true };
-		TransportButton next{ TransportButton::Glyph::Next };
+		TransportButton previous{ Glyph::SkipPrevious };
+		TransportButton playPause{ Glyph::Play, true };
+		TransportButton next{ Glyph::SkipNext };
 		SeekBar seek;
 		VolumeControl volume;
 
diff --git a/Widgets/src/components/media/tests/MediaControlsTests.cpp b/Widgets/src/components/media/tests/MediaControlsTests.cpp
index e8481278..0651395b 100644
--- a/Widgets/src/components/media/tests/MediaControlsTests.cpp
+++ b/Widgets/src/components/media/tests/MediaControlsTests.cpp
@@ -43,8 +43,8 @@ SUITE(TransportButtons) {
 	TEST(GlyphsPaintAsShapesAndPrimaryIsLight) {
 		Widget root;
 		root.emplaceLayout<RowLayout>();
-		TransportButton play(TransportButton::Glyph::Play, true);
-		TransportButton next(TransportButton::Glyph::Next);
+		TransportButton play(Glyph::Play, true);
+		TransportButton next(Glyph::SkipNext);
 		root.addChild(play);
 		root.addChild(next);
 		UiDriver driver(root);
@@ -147,7 +147,7 @@ SUITE(VolumeControlBehaviour) {
 		driver.click(volume.muteButton());
 		CHECK(volume.isMuted());
 		CHECK_CLOSE(0, reported, 0.001f);
-		CHECK(volume.muteButton().glyph() == TransportButton::Glyph::Muted);
+		CHECK(volume.muteButton().glyph() == Glyph::Muted);
 
 		driver.click(volume.muteButton());
 		CHECK(!volume.isMuted());
@@ -195,7 +195,7 @@ SUITE(PlayerBarBehaviour) {
 		CHECK_EQUAL(1, previous);
 
 		scene.bar.setPlaying(true);
-		CHECK(scene.bar.playPause.glyph() == TransportButton::Glyph::Pause);
+		CHECK(scene.bar.playPause.glyph() == Glyph::Pause);
 		CHECK_EQUAL("Pause", scene.bar.playPause.tooltip());
 	}
 
diff --git a/Widgets/src/components/nodes/private/GraphGeometry.cpp b/Widgets/src/components/nodes/private/GraphGeometry.cpp
new file mode 100644
index 00000000..ecf157c5
--- /dev/null
+++ b/Widgets/src/components/nodes/private/GraphGeometry.cpp
@@ -0,0 +1,81 @@
+#include "GraphGeometry.hpp"
+
+#include "Canvas.hpp"
+#include "Theme.hpp"
+
+#include <algorithm>
+#include <cmath>
+
+using namespace tp;
+using namespace tp::ui;
+
+namespace {
+	constexpr halnf kMarqueeFill = 0.12f;
+	constexpr halnf kMarqueeOutline = 0.8f;
+	constexpr halnf kMarqueeOutlineWidth = 1;
+
+	halnf distanceToSegment(Vec2F point, Vec2F start, Vec2F end) {
+		const Vec2F along = end - start;
+		const halnf lengthSquared = along.x * along.x + along.y * along.y;
+		halnf t = 0;
+		if (lengthSquared > 0) {
+			const Vec2F offset = point - start;
+			t = std::clamp((offset.x * along.x + offset.y * along.y) / lengthSquared, 0.0f, 1.0f);
+		}
+		const Vec2F closest = start + along * t;
+		const Vec2F difference = point - closest;
+		return std::sqrt(difference.x * difference.x + difference.y * difference.y);
+	}
+}
+
+std::vector<Vec2F> graph::linkPoints(Vec2F from, Vec2F to, const LinkShape& shape) {
+	const halnf bend = std::max(std::abs(to.x - from.x) * 0.5f, shape.minimumBend);
+	const Vec2F controlFrom = from + Vec2F(bend, 0.0f);
+	const Vec2F controlTo = to - Vec2F(bend, 0.0f);
+	const int segments = std::max(shape.segments, 1);
+
+	std::vector<Vec2F> points;
+	points.reserve((size_t) segments + 1);
+	for (int step = 0; step <= segments; step++) {
+		const halnf t = halnf(step) / halnf(segments);
+		const halnf u = 1 - t;
+		points.push_back(from * (u * u * u) + controlFrom * (3 * u * u * t) + controlTo * (3 * u * t * t) + to * (t * t * t));
+	}
+	return points;
+}
+
+void graph::paintLink(Canvas& canvas, Vec2F from, Vec2F to, const LinkShape& shape, const RGBA& color, halnf thickness) {
+	canvas.polyline(linkPoints(from, to, shape), color, thickness);
+}
+
+halnf graph::distanceToLink(Vec2F point, const std::vector<Vec2F>& link) {
+	halnf nearest = 1.0e9f;
+	for (size_t index = 1; index < link.size(); index++)
+		nearest = std::min(nearest, distanceToSegment(point, link[index - 1], link[index]));
+	return nearest;
+}
+
+std::optional<size_t> graph::nearestWithin(const std::vector<Vec2F>& positions, Vec2F point, halnf reach) {
+	std::optional<size_t> nearest;
+	halnf best = reach;
+	for (size_t index = 0; index < positions.size(); index++) {
+		const Vec2F difference = positions[index] - point;
+		const halnf distance = std::sqrt(difference.x * difference.x + difference.y * difference.y);
+		if (distance > best) continue;
+		best = distance;
+		nearest = index;
+	}
+	return nearest;
+}
+
+RectF graph::marquee(Vec2F press, Vec2F pointer) {
+	const Vec2F low = { std::min(press.x, pointer.x), std::min(press.y, pointer.y) };
+	const Vec2F high = { std::max(press.x, pointer.x), std::max(press.y, pointer.y) };
+	return makeRect(low, high - low);
+}
+
+void graph::paintMarquee(Canvas& canvas, const RectF& box, const Theme& theme) {
+	const halnf radius = theme.metrics.indicatorCornerRadius;
+	canvas.rect(box, Palette::faded(theme.palette.accent, kMarqueeFill), radius);
+	canvas.outline(box, Palette::faded(theme.palette.accent, kMarqueeOutline), radius, kMarqueeOutlineWidth);
+}
diff --git a/Widgets/src/components/nodes/private/NodeEditor.cpp b/Widgets/src/components/nodes/private/NodeEditor.cpp
index 16f81afa..829924e3 100644
--- a/Widgets/src/components/nodes/private/NodeEditor.cpp
+++ b/Widgets/src/components/nodes/private/NodeEditor.cpp
@@ -1,4 +1,5 @@
 #include "NodeEditor.hpp"
+#include "GraphGeometry.hpp"
 #include "Canvas.hpp"
 
 #include "Event.hpp"
@@ -16,6 +17,7 @@ using namespace tp::ui;
 namespace {
 	constexpr int kLinkSegments = 24;
 	constexpr int kSimplifiedLinkSegments = 8;
+	constexpr halnf kLinkBend = 40;
 	constexpr halnf kCullMargin = 16;
 	constexpr halnf kMinimumShortTitleSize = 7;
 	constexpr halnf kShortTitleFontSize = 22;
@@ -27,20 +29,7 @@ namespace {
 		return std::sqrt(difference.x * difference.x + difference.y * difference.y);
 	}
 
-	halnf distanceToSegment(Vec2F point, Vec2F start, Vec2F end) {
-		const Vec2F segment = end - start;
-		const halnf lengthSquared = segment.x * segment.x + segment.y * segment.y;
-		if (lengthSquared <= 0) return distance(point, start);
-		const Vec2F toPoint = point - start;
-		const halnf t = std::clamp((toPoint.x * segment.x + toPoint.y * segment.y) / lengthSquared, 0.0f, 1.0f);
-		return distance(point, start + segment * t);
-	}
 
-	RectF normalized(Vec2F first, Vec2F second) {
-		const Vec2F low = { std::min(first.x, second.x), std::min(first.y, second.y) };
-		const Vec2F high = { std::max(first.x, second.x), std::max(first.y, second.y) };
-		return makeRect(low, high - low);
-	}
 
 	RectF boundingRect(const RectF& first, const RectF& second) {
 		const Vec2F low = { std::min(first.pos.x, second.pos.x), std::min(first.pos.y, second.pos.y) };
@@ -57,26 +46,57 @@ NodeEditor::NodeEditor(NodeGraph& graph) :
 	setDebugName("node editor");
 	setClipsChildren(true);
 	setSizing(AxisSizing::fill(), AxisSizing::fill());
-	bindDefaultShortcuts();
+	defineCommands();
 }
 
-void NodeEditor::bindDefaultShortcuts() {
-	mShortcuts.bind(ctrl(Key::C), Command::Copy);
-	mShortcuts.bind(ctrl(Key::X), Command::Cut);
-	mShortcuts.bind(ctrl(Key::V), Command::Paste);
-	mShortcuts.bind(ctrl(Key::D), Command::Duplicate);
-	mShortcuts.bind(ctrl(Key::A), Command::SelectAll);
-	mShortcuts.bind(plain(Key::Delete), Command::Delete);
-	mShortcuts.bind(plain(Key::Backspace), Command::Delete);
-	mShortcuts.bind(plain(Key::Home), Command::FrameAll);
+void NodeEditor::defineCommands() {
+	const auto hasSelection = [this]() { return !mSelection.empty(); };
+	const auto hasNodes = [this]() { return !mGraph.nodes().empty(); };
+	const auto done = [this]() { requestPaint(); };
+
+	mCommands.define(Command::Copy, { "Copy", [this, done]() { copySelection(); done(); }, hasSelection, {} });
+	mCommands.define(Command::Cut, { "Cut", [this, done]() {
+		copySelection();
+		deleteSelection();
+		done();
+	}, hasSelection, {} });
+	mCommands.define(Command::Paste, { "Paste", [this, done]() {
+		pasteClipboard(mStyle.pasteOffset * halnf(++mPasteCount));
+		done();
+	}, [this]() { return hasClipboard(); }, {} });
+	mCommands.define(Command::Duplicate, { "Duplicate", [this, done]() {
+		copySelection();
+		pasteClipboard(mStyle.pasteOffset);
+		done();
+	}, hasSelection, {} });
+	mCommands.define(Command::Delete, { "Delete", [this, done]() { deleteSelection(); done(); }, [this]() {
+		return !mSelection.empty() || mSelectedLink.has_value();
+	}, {} });
+	mCommands.define(Command::SelectAll, { "Select All", [this, done]() {
+		std::vector<NodeId> all;
+		for (const Node& node : mGraph.nodes())
+			if (isShown(node.id)) all.push_back(node.id);
+		select(all);
+		done();
+	}, hasNodes, {} });
+	mCommands.define(Command::FrameAll, { "Frame All", [this, done]() { frameAll(); done(); }, hasNodes, {} });
+
+	ShortcutMap<Command>& shortcuts = mCommands.shortcuts();
+	shortcuts.bind(ctrl(Key::C), Command::Copy);
+	shortcuts.bind(ctrl(Key::X), Command::Cut);
+	shortcuts.bind(ctrl(Key::V), Command::Paste);
+	shortcuts.bind(ctrl(Key::D), Command::Duplicate);
+	shortcuts.bind(ctrl(Key::A), Command::SelectAll);
+	shortcuts.bind(plain(Key::Delete), Command::Delete);
+	shortcuts.bind(plain(Key::Backspace), Command::Delete);
+	shortcuts.bind(plain(Key::Home), Command::FrameAll);
 }
 
-bool NodeEditor::isSelected(NodeId id) const {
-	return std::find(mSelection.begin(), mSelection.end(), id) != mSelection.end();
-}
+bool NodeEditor::isSelected(NodeId id) const { return mSelection.isSelected(id); }
 
 void NodeEditor::select(const std::vector<NodeId>& ids) {
-	mSelection = ids;
+	if (ids.empty()) mSelection.clear();
+	else mSelection.assign(ids, ids.back());
 	mSelectedLink.reset();
 	selectionChanged();
 }
@@ -94,36 +114,10 @@ void NodeEditor::selectionChanged() {
 	if (mOnSelectionChanged) mOnSelectionChanged();
 }
 
-void NodeEditor::execute(Command command) {
-	switch (command) {
-		case Command::Copy: copySelection(); break;
-		case Command::Cut:
-			copySelection();
-			deleteSelection();
-			break;
-		case Command::Paste: pasteClipboard(mStyle.pasteOffset * halnf(++mPasteCount)); break;
-		case Command::Duplicate:
-			copySelection();
-			pasteClipboard(mStyle.pasteOffset);
-			break;
-		case Command::Delete: deleteSelection(); break;
-		case Command::SelectAll:
-			{
-				std::vector<NodeId> all;
-				for (const Node& node : mGraph.nodes())
-					if (isShown(node.id)) all.push_back(node.id);
-				select(all);
-				break;
-			}
-		case Command::FrameAll: frameAll(); break;
-	}
-	requestPaint();
-}
-
 void NodeEditor::copySelection() {
 	if (mSelection.empty()) return;
 
-	mClipboard = mGraph.extract(mSelection);
+	mClipboard = mGraph.extract(mSelection.selected());
 	mPasteCount = 0;
 }
 
@@ -140,7 +134,11 @@ void NodeEditor::deleteSelection() {
 		if (mGraph.hasLink(*mSelectedLink)) mGraph.disconnect(*mSelectedLink);
 		mSelectedLink.reset();
 	}
-	if (!mSelection.empty()) mGraph.removeNodes(std::exchange(mSelection, {}));
+	if (!mSelection.empty()) {
+		const std::vector<NodeId> removed = mSelection.selected();
+		mSelection.clear();
+		mGraph.removeNodes(removed);
+	}
 	selectionChanged();
 }
 
@@ -220,9 +218,9 @@ void NodeEditor::setNodeFilter(std::function<bool(NodeId)> filter) {
 
 void NodeEditor::refreshNodeFilter() {
 	std::vector<NodeId> shown;
-	for (NodeId id : mSelection)
+	for (NodeId id : mSelection.selected())
 		if (isShown(id)) shown.push_back(id);
-	if (shown != mSelection || (mSelectedLink && !isShown(*mSelectedLink))) select(shown);
+	if (shown != mSelection.selected() || (mSelectedLink && !isShown(*mSelectedLink))) select(shown);
 	requestPaint();
 }
 
@@ -343,13 +341,11 @@ std::optional<Link> NodeEditor::linkAt(Vec2F graphPoint) const {
 	halnf closestDistance = tolerance;
 	for (const Link& link : mGraph.links()) {
 		if (!isShown(link)) continue;
-		const std::vector<Vec2F> points = linkCurvePoints(toLocal(portPosition(link.from)), toLocal(portPosition(link.to)));
-		for (size_t step = 1; step < points.size(); step++) {
-			const halnf d = distanceToSegment(local, points[step - 1], points[step]);
-			if (d <= closestDistance) {
-				closestDistance = d;
-				closest = link;
-			}
+		const std::vector<Vec2F> points = graph::linkPoints(toLocal(portPosition(link.from)), toLocal(portPosition(link.to)), linkShape());
+		const halnf distance = graph::distanceToLink(local, points);
+		if (distance <= closestDistance) {
+			closestDistance = distance;
+			closest = link;
 		}
 	}
 	return closest;
@@ -474,23 +470,19 @@ void NodeEditor::refreshHoverCursor(Vec2F graphPoint) {
 }
 
 void NodeEditor::pressOnNode(NodeId id, bool additive) {
-	if (additive && isSelected(id)) {
-		std::vector<NodeId> remaining = mSelection;
-		std::erase(remaining, id);
-		select(remaining);
-		return;
-	}
-
+	// An additive press toggles the node; taking it out of the selection does not start a move.
 	if (additive) {
-		std::vector<NodeId> extended = mSelection;
-		extended.push_back(id);
-		select(extended);
+		const bool wasSelected = isSelected(id);
+		mSelection.toggle(id);
+		mSelectedLink.reset();
+		selectionChanged();
+		if (wasSelected) return;
 	} else if (!isSelected(id)) {
 		select({ id });
 	}
 
 	mMoveStart.clear();
-	for (NodeId selected : mSelection) {
+	for (NodeId selected : mSelection.selected()) {
 		mGraph.bringToFront(selected);
 		mMoveStart.emplace_back(selected, mGraph.findNode(selected)->position);
 	}
@@ -600,7 +592,7 @@ void NodeEditor::finishLink() {
 
 void NodeEditor::finishMarquee(bool additive) {
 	const RectF area = marqueeRect();
-	std::vector<NodeId> picked = additive ? mSelection : std::vector<NodeId>{};
+	std::vector<NodeId> picked = additive ? mSelection.selected() : std::vector<NodeId>{};
 
 	for (const Node& node : mGraph.nodes()) {
 		if (!isShown(node.id)) continue;
@@ -613,7 +605,7 @@ void NodeEditor::finishMarquee(bool additive) {
 
 bool NodeEditor::isMarqueeVisible() const { return mGesture == Gesture::Marquee && mDraggedPastThreshold; }
 
-RectF NodeEditor::marqueeRect() const { return normalized(mPressGraphPoint, mPointerGraphPoint); }
+RectF NodeEditor::marqueeRect() const { return graph::marquee(mPressGraphPoint, mPointerGraphPoint); }
 
 void NodeEditor::handleGesture(Event& event) {
 	const TouchGesture* gesture = event.gesture();
@@ -628,13 +620,7 @@ void NodeEditor::handleWheel(Event& event) {
 	event.accept();
 }
 
-void NodeEditor::handleKey(Event& event) {
-	const ShortcutMap<Command>::Binding* binding = mShortcuts.find(event);
-	if (!binding) return;
-
-	execute(binding->command);
-	event.accept();
-}
+void NodeEditor::handleKey(Event& event) { mCommands.handle(event); }
 
 NodeEditor::NodePresentation NodeEditor::present(const Node& node) const {
 	if (mPresenter) return mPresenter(node);
@@ -654,7 +640,7 @@ bool NodeEditor::isVisibleOnScreen(const Node& node) const {
 }
 
 bool NodeEditor::isVisibleOnScreen(const Link& link) const {
-	const RectF span = normalized(toLocal(portPosition(link.from)), toLocal(portPosition(link.to)));
+	const RectF span = graph::marquee(toLocal(portPosition(link.from)), toLocal(portPosition(link.to)));
 	const halnf bend = std::max(span.size.x * 0.5f, 40.0f * zoom());
 	return overlaps(insetRect(localRect(), -kCullMargin), insetRect(span, -bend));
 }
@@ -709,26 +695,14 @@ void NodeEditor::paintLinks(Canvas& painter) const {
 	else paintLink(painter, pointer, anchor, color, mStyle.linkThickness);
 }
 
-std::vector<Vec2F> NodeEditor::linkCurvePoints(Vec2F from, Vec2F to) const {
-	const halnf bend = std::max(std::abs(to.x - from.x) * 0.5f, 40.0f * zoom());
-	const Vec2F controlFrom = from + Vec2F(bend, 0.0f);
-	const Vec2F controlTo = to - Vec2F(bend, 0.0f);
-
-	const int segments = detail() == Detail::Full ? kLinkSegments : kSimplifiedLinkSegments;
-	std::vector<Vec2F> points;
-	points.reserve(size_t(segments) + 1);
-	for (int step = 0; step <= segments; step++) {
-		const halnf t = halnf(step) / halnf(segments);
-		const halnf u = 1 - t;
-		points.push_back(
-			from * (u * u * u) + controlFrom * (3 * u * u * t) + controlTo * (3 * u * t * t) + to * (t * t * t)
-		);
-	}
-	return points;
+graph::LinkShape NodeEditor::linkShape() const {
+	// Node links leave their ports further out than tree links (nodes are wide), scaled with the zoom, and use fewer
+	// segments when the nodes are only outlines.
+	return { kLinkBend * zoom(), detail() == Detail::Full ? kLinkSegments : kSimplifiedLinkSegments };
 }
 
 void NodeEditor::paintLink(Canvas& painter, Vec2F from, Vec2F to, const RGBA& color, halnf thickness) const {
-	painter.polyline(linkCurvePoints(from, to), color, thickness * std::max(zoom(), 0.5f));
+	graph::paintLink(painter, from, to, linkShape(), color, thickness * std::max(zoom(), 0.5f));
 }
 
 void NodeEditor::paintNode(Canvas& painter, const Node& node) const {
@@ -927,10 +901,5 @@ void NodeEditor::paintPortLabels(Canvas& painter, const Node& node, PortDirectio
 
 void NodeEditor::paintMarquee(Canvas& painter) const {
 	const RectF area = marqueeRect();
-	const RectF local = makeRect(toLocal(area.pos), area.size * zoom());
-	RGBA fill = theme().palette.accent;
-	fill.a = 0.15f;
-
-	painter.rect(local, fill, theme().metrics.indicatorCornerRadius);
-	painter.outline(local, theme().palette.accent, theme().metrics.indicatorCornerRadius, 1);
+	graph::paintMarquee(painter, makeRect(toLocal(area.pos), area.size * zoom()), theme());
 }
diff --git a/Widgets/src/components/nodes/private/TreeView.cpp b/Widgets/src/components/nodes/private/TreeView.cpp
index 4493656d..b79bd530 100644
--- a/Widgets/src/components/nodes/private/TreeView.cpp
+++ b/Widgets/src/components/nodes/private/TreeView.cpp
@@ -1,4 +1,5 @@
 #include "TreeView.hpp"
+#include "GraphGeometry.hpp"
 #include "Canvas.hpp"
 
 #include "BoxLayout.hpp"
@@ -31,6 +32,7 @@ namespace tp::ui {
 
 namespace {
 	constexpr int kCurveSegments = 16;
+	constexpr halnf kLinkBend = 16;
 	constexpr halnf kLabelSize = 20;
 	constexpr halnf kMinimumLabelSize = 7;
 	constexpr halnf kContentPadding = 8;
@@ -55,11 +57,6 @@ namespace {
 
 	Vec2F mix(Vec2F from, Vec2F to, halnf t) { return from + (to - from) * t; }
 
-	RGBA withAlpha(RGBA color, halnf alpha) {
-		color.a *= alpha;
-		return color;
-	}
-
 	void paintFitted(
 		Canvas& painter, const std::string& text, const RectF& box, halnf size, TextAlign align, const RGBA& color
 	) {
@@ -148,7 +145,7 @@ void TreeCard::paint(Canvas& painter) {
 			insetRect(rect, 6),
 			kLabelSize,
 			TextAlign::centered(),
-			withAlpha(style.palette.onAccent, (1 - mDetail) * mOpacity)
+			Palette::faded(style.palette.onAccent, (1 - mDetail) * mOpacity)
 		);
 	}
 
@@ -159,7 +156,7 @@ void TreeCard::paint(Canvas& painter) {
 		const halnf pulse = mBadgePulsing ? 0.55f + 0.45f * std::sin(mClockMs / 260.0f) : 1.0f;
 		const halnf dotRadius = 4 * scale;
 		const Vec2F dot = { rect.size.x - 11 * scale, mDetail > 0.5f ? header / 2 : 10 * scale };
-		if (dotRadius >= 1) painter.circle(dot, dotRadius, withAlpha(*mBadge, pulse * badgeOpacity * mOpacity));
+		if (dotRadius >= 1) painter.circle(dot, dotRadius, Palette::faded(*mBadge, pulse * badgeOpacity * mOpacity));
 	}
 }
 
@@ -167,27 +164,27 @@ void TreeCard::paintHeaderedBody(Canvas& painter, const RectF& rect, halnf radiu
 	const Theme& style = theme();
 	const halnf header = std::min(kHeaderHeight, rect.size.y);
 
-	painter.rect(rect, withAlpha(accent(), mOpacity), radius);
+	painter.rect(rect, Palette::faded(accent(), mOpacity), radius);
 	if (mDetail <= 0.001f) return;
 
 	const RectF body = makeRect(0, header, rect.size.x, rect.size.y - header);
-	painter.rect(body, withAlpha(style.palette.raisedSurface, mDetail * mOpacity), radius);
+	painter.rect(body, Palette::faded(style.palette.raisedSurface, mDetail * mOpacity), radius);
 	const halnf badgeSpace = mBadge ? 16.0f : 0.0f;
 	const RectF titleBox = makeRect(10, 0, rect.size.x - 20 - badgeSpace, header);
 	paintFitted(
-		painter, mTitle, titleBox, style.metrics.fontSize, TextAlign::leftCenter(), withAlpha(style.palette.onAccent, mDetail * mOpacity)
+		painter, mTitle, titleBox, style.metrics.fontSize, TextAlign::leftCenter(), Palette::faded(style.palette.onAccent, mDetail * mOpacity)
 	);
 }
 
 void TreeCard::paintPlainBody(Canvas& painter, const RectF& rect, halnf radius) {
 	const Theme& style = theme();
 
-	painter.rect(rect, withAlpha(Palette::mix(accent(), style.palette.raisedSurface, mDetail), mOpacity), radius);
+	painter.rect(rect, Palette::faded(Palette::mix(accent(), style.palette.raisedSurface, mDetail), mOpacity), radius);
 	if (mDetail <= 0.001f) return;
 
 	const halnf inset = std::min(kPlainAccentInset, rect.size.y / 4);
 	const RectF strip = makeRect(inset, inset, kPlainAccentWidth, std::max(0.0f, rect.size.y - inset * 2));
-	painter.rect(strip, withAlpha(accent(), mDetail * mOpacity), kPlainAccentWidth / 2);
+	painter.rect(strip, Palette::faded(accent(), mDetail * mOpacity), kPlainAccentWidth / 2);
 }
 
 void TreeCard::paintOverlay(Canvas& painter) {
@@ -200,17 +197,17 @@ void TreeCard::paintOverlay(Canvas& painter) {
 		painter.text(
 			"+" + std::to_string(mHidden),
 			corner,
-			TextStyle{ style.metrics.smallFontSize - 1, withAlpha(style.palette.onAccent, mStack * mOpacity * (1 - mDetail * 0.4f)), TextAlign::rightCenter() }
+			TextStyle{ style.metrics.smallFontSize - 1, Palette::faded(style.palette.onAccent, mStack * mOpacity * (1 - mDetail * 0.4f)), TextAlign::rightCenter() }
 		);
 	}
 	const halnf stroke = std::max(1.0f, 2.0f * scale);
 	if (mSelected) {
-		painter.outline(rect, withAlpha(style.palette.accent, mOpacity), radius, mCurrent ? stroke * 1.25f : stroke);
+		painter.outline(rect, Palette::faded(style.palette.accent, mOpacity), radius, mCurrent ? stroke * 1.25f : stroke);
 		const halnf ring = 3 * scale;
 		if (mCurrent && ring >= 1)
-			painter.outline(insetRect(rect, -ring), withAlpha(style.palette.accent, 0.35f * mOpacity), radius + ring, 1);
+			painter.outline(insetRect(rect, -ring), Palette::faded(style.palette.accent, 0.35f * mOpacity), radius + ring, 1);
 	} else if (mHover > 0.001f)
-		painter.outline(rect, withAlpha(style.palette.text, mHover * 0.7f * mOpacity), radius, stroke * 0.75f);
+		painter.outline(rect, Palette::faded(style.palette.text, mHover * 0.7f * mOpacity), radius, stroke * 0.75f);
 }
 
 TreeView::TreeView(const TreeModel& model) :
@@ -256,8 +253,7 @@ void TreeView::modelChanged() {
 	mExpansion.retain(mStructure);
 	if (first) mExpansion.openTo(mStructure, std::nullopt, mStructure.height());
 
-	std::erase_if(mSelected, [this](TreeItemId id) { return !mStructure.indexOf(id); });
-	if (mSelection && !mSelected.contains(*mSelection)) mSelection.reset();
+	mSelection.retain([this](const TreeItemId& id) { return mStructure.indexOf(id).has_value(); });
 	if (mHovered && !mStructure.indexOf(*mHovered)) mHovered.reset();
 	if (mTugged && !mStructure.indexOf(*mTugged)) mTugged.reset();
 	if (mPivot && !mStructure.indexOf(*mPivot)) mPivot.reset();
@@ -275,7 +271,7 @@ void TreeView::modelChanged() {
 	syncCards();
 	repack();
 	syncItems(!ui());
-	if (mSelection) pivotOn(mSelection, size() / 2.0f, true);
+	if (mSelection.current()) pivotOn(mSelection.current(), size() / 2.0f, true);
 	viewChanged();
 }
 
@@ -412,7 +408,7 @@ void TreeView::arrangeCards(LayoutContext& context, const RectF& area) {
 		const bool resized = !mFitPending && !(area.size == mLastSize);
 		mLastSize = area.size;
 		if (mFitPending) fitInitially(area.size);
-		else if (resized && mSelection) pivotOn(mSelection, area.size / 2.0f, false);
+		else if (resized && mSelection.current()) pivotOn(mSelection.current(), area.size / 2.0f, false);
 	}
 	updateRects();
 	const halnf detail = detailAmount();
@@ -441,8 +437,8 @@ void TreeView::arrangeCards(LayoutContext& context, const RectF& area) {
 		card->mHidden = item.descendants;
 		card->mDetail = detail;
 		card->mOpacity = opacity;
-		card->mSelected = mSelected.contains(card->id());
-		card->mCurrent = mSelection == card->id();
+		card->mSelected = mSelection.isSelected(card->id());
+		card->mCurrent = mSelection.current() == card->id();
 		const auto hover = mHover.find(card->id());
 		card->mHover = hover == mHover.end() ? 0 : hover->second.value();
 		card->content().setVisible(detail >= kContentShownDetail && isInteractive(*index));
@@ -574,8 +570,8 @@ void TreeView::frame(bool animated) {
 		requestLayout();
 		return;
 	}
-	if (mSelection) {
-		pivotOn(mSelection, mLastSize / 2.0f, animated);
+	if (mSelection.current()) {
+		pivotOn(mSelection.current(), mLastSize / 2.0f, animated);
 		return;
 	}
 	const Vec2F available = mLastSize - Vec2F(mStyle.frameMargin, mStyle.frameMargin) * 2.0f;
@@ -621,7 +617,7 @@ void TreeView::openTo(std::optional<TreeItemId> scope, size_t depth) {
 }
 
 std::optional<TreeView::Configuration> TreeView::neighbour(int direction) const {
-	const std::optional<size_t> root = scopeIndex(mSelection);
+	const std::optional<size_t> root = scopeIndex(mSelection.current());
 	Configuration next{ mExpansion };
 	if (direction > 0) {
 		const size_t open = mExpansion.openDepth(mStructure, root);
@@ -661,13 +657,13 @@ void TreeView::commit(const Configuration& configuration, halnf preview) {
 	const bool opened = mCandidateDirectionCommitted > 0;
 	mExpansion = configuration.expansion;
 	retarget(false);
-	if (opened && mSelection) followSubtree(*mSelection);
+	if (opened && mSelection.current()) followSubtree(*mSelection.current());
 }
 
 void TreeView::scaleAround(Vec2F local, halnf value) {
 	const halnf after = clampScale(value);
-	if (mSelection && mStructure.indexOf(*mSelection)) {
-		if (!mPivot || *mPivot != *mSelection || mPivotWorld) pivotOn(mSelection, std::nullopt, false);
+	if (mSelection.current() && mStructure.indexOf(*mSelection.current())) {
+		if (!mPivot || *mPivot != *mSelection.current() || mPivotWorld) pivotOn(mSelection.current(), std::nullopt, false);
 	} else if (!mPivotWorld || length(mPivotScreen.target() - local) > mStyle.dragThreshold) pivotOnPoint(local);
 	mScale.animateTo(after);
 	viewChanged();
@@ -765,7 +761,7 @@ halnf TreeView::fullViewScale() const {
 }
 
 std::optional<TreeItemId> TreeView::fullViewCandidate(Vec2F local) const {
-	if (mSelection && mStructure.indexOf(*mSelection)) return mSelection;
+	if (mSelection.current() && mStructure.indexOf(*mSelection.current())) return mSelection.current();
 	if (const std::optional<TreeItemId> under = itemAt(local)) return under;
 	if (const std::optional<size_t> nearest = nearestShown(local)) return mStructure.items()[*nearest].id;
 	return std::nullopt;
@@ -831,7 +827,7 @@ void TreeView::enterFullView(TreeItemId id, bool animated) {
 	mFullStep.stop();
 	mFullSettling.reset();
 	mFull = id;
-	if (mSelection != id) {
+	if (mSelection.current() != id) {
 		select(id);
 		if (mOnSelected) mOnSelected(id);
 		selectionChanged();
@@ -883,7 +879,7 @@ void TreeView::pull(Vec2F local, halnf amount) {
 		mCandidateDirection = direction;
 		mLevelStep.stop();
 		repack();
-		if (mSelection) pivotOn(mSelection, std::nullopt, false);
+		if (mSelection.current()) pivotOn(mSelection.current(), std::nullopt, false);
 		else if (const std::optional<size_t> anchor = nearestShown(local))
 			pivotOn(mStructure.items()[*anchor].id, std::nullopt, false);
 	}
@@ -910,21 +906,32 @@ void TreeView::releasePull() {
 }
 
 std::vector<TreeItemId> TreeView::selectedItems() const {
+	// In tree order, whatever order they were selected in.
 	std::vector<TreeItemId> ids;
 	for (const TreeStructure::Item& item : mStructure.items())
-		if (mSelected.contains(item.id)) ids.push_back(item.id);
+		if (mSelection.isSelected(item.id)) ids.push_back(item.id);
+	return ids;
+}
+
+std::vector<TreeItemId> TreeView::treeOrder() const {
+	std::vector<TreeItemId> ids;
+	for (const TreeStructure::Item& item : mStructure.items())
+		ids.push_back(item.id);
 	return ids;
 }
 
 void TreeView::setSelection(const std::vector<TreeItemId>& ids, std::optional<TreeItemId> current) {
-	std::unordered_set<TreeItemId> selected;
+	std::vector<TreeItemId> known;
 	for (TreeItemId id : ids)
-		if (mStructure.indexOf(id)) selected.insert(id);
-	if (current && !selected.contains(*current)) current.reset();
-	if (selected == mSelected && current == mSelection) return;
-	const bool moved = current != mSelection;
-	mSelected = std::move(selected);
-	mSelection = current;
+		if (mStructure.indexOf(id)) known.push_back(id);
+	if (current && std::find(known.begin(), known.end(), *current) == known.end()) current.reset();
+	const std::optional<TreeItemId> before = mSelection.current();
+	const std::vector<TreeItemId> selectedBefore = selectedItems();
+	if (known.empty()) mSelection.clear();
+	else mSelection.assign(known, current);
+	if (mSelection.current() == before && selectedItems() == selectedBefore) return;
+	const bool moved = mSelection.current() != before;
+	current = mSelection.current();
 	if (moved && current) {
 		reveal(*current);
 		if (mLastSize.x > 0) pivotOn(current, mLastSize / 2.0f, true);
@@ -949,11 +956,7 @@ void TreeView::select(std::optional<TreeItemId> id) {
 }
 
 void TreeView::selectAll() {
-	std::vector<TreeItemId> ids;
-	for (const TreeStructure::Item& item : mStructure.items())
-		ids.push_back(item.id);
-	mSelected = std::unordered_set<TreeItemId>(ids.begin(), ids.end());
-	if (!mSelection && !ids.empty()) mSelection = ids.front();
+	mSelection.selectAll(treeOrder());
 	requestLayout();
 	requestPaint();
 	selectionChanged();
@@ -969,46 +972,48 @@ void TreeView::selectionChanged() {
 }
 
 void TreeView::selectByUser(TreeItemId id) {
-	const bool changed = mSelected.size() != 1 || !mSelected.contains(id) || mSelection != id;
+	const bool changed = mSelection.selected().size() != 1 || !mSelection.isSelected(id) || mSelection.current() != id;
 	select(id);
 	if (mOnSelected) mOnSelected(id);
 	if (changed) selectionChanged();
 }
 
 void TreeView::toggleByUser(TreeItemId id) {
-	std::vector<TreeItemId> ids = selectedItems();
-	std::optional<TreeItemId> current = mSelection;
-	if (mSelected.contains(id)) {
-		std::erase(ids, id);
-		if (current == id) current = ids.empty() ? std::nullopt : std::optional(ids.back());
-	} else {
-		ids.push_back(id);
-		current = id;
+	const std::optional<TreeItemId> before = mSelection.current();
+	mSelection.toggle(id);
+	const std::optional<TreeItemId> current = mSelection.current();
+	if (current && current != before) {
+		reveal(*current);
+		if (mLastSize.x > 0) pivotOn(current, mLastSize / 2.0f, true);
 	}
-	setSelection(ids, current);
+	requestLayout();
+	requestPaint();
 	if (current && mOnSelected) mOnSelected(*current);
 	selectionChanged();
 }
 
 std::optional<RectF> TreeView::selectionBox() const {
 	if (mGesture != Gesture::Box || !mDragged) return std::nullopt;
-	const Vec2F low = { std::min(mPressLocal.x, mBoxCorner.x), std::min(mPressLocal.y, mBoxCorner.y) };
-	const Vec2F high = { std::max(mPressLocal.x, mBoxCorner.x), std::max(mPressLocal.y, mBoxCorner.y) };
-	return makeRect(low, high - low);
+	return graph::marquee(mPressLocal, mBoxCorner);
 }
 
 void TreeView::updateBox(Vec2F local) {
 	mBoxCorner = local;
 	const std::optional<RectF> box = selectionBox();
 	if (!box) return;
-	std::unordered_set<TreeItemId> selected = mBoxBase;
-	for (size_t item = 0; item < mRects.size(); item++)
-		if (isInteractive(item) && overlaps(*box, mRects[item])) selected.insert(mStructure.items()[item].id);
-	std::optional<TreeItemId> current = mSelection;
-	if (current && !selected.contains(*current)) current.reset();
-	if (!current && !selected.empty()) current = *selected.begin();
-	mSelected = std::move(selected);
-	mSelection = current;
+	std::vector<TreeItemId> selected = mBoxBase;
+	for (size_t item = 0; item < mRects.size(); item++) {
+		const TreeItemId id = mStructure.items()[item].id;
+		if (isInteractive(item) && overlaps(*box, mRects[item]) && std::find(selected.begin(), selected.end(), id) == selected.end()) {
+			selected.push_back(id);
+		}
+	}
+	// The current item stays current while the box covers it, else the first boxed item becomes current.
+	std::optional<TreeItemId> current = mSelection.current();
+	if (current && std::find(selected.begin(), selected.end(), *current) == selected.end()) current.reset();
+	if (!current && !selected.empty()) current = selected.front();
+	if (selected.empty()) mSelection.clear();
+	else mSelection.assign(std::move(selected), current);
 	requestLayout();
 	requestPaint();
 }
@@ -1052,19 +1057,18 @@ std::optional<TreeItemId> TreeView::itemAt(Vec2F local) const {
 std::optional<TreeView::PortHit> TreeView::portAt(Vec2F local) const {
 	if (isFullViewShown()) return std::nullopt;
 	if (portVisibility(mStyle.layout.card.y * scale()) < 0.5f) return std::nullopt;
-	std::optional<PortHit> nearest;
-	halnf best = mStyle.portHitRadius;
+	std::vector<PortHit> ports;
+	std::vector<Vec2F> positions;
 	for (size_t item = 0; item < mRects.size(); item++) {
 		if (!isInteractive(item)) continue;
 		const TreeItemId id = mStructure.items()[item].id;
 		for (Port port : { Port::Parent, Port::Children }) {
-			const halnf distance = length(*portPosition(id, port) - local);
-			if (distance > best) continue;
-			best = distance;
-			nearest = PortHit{ id, port };
+			ports.push_back({ id, port });
+			positions.push_back(*portPosition(id, port));
 		}
 	}
-	return nearest;
+	const std::optional<size_t> nearest = graph::nearestWithin(positions, local, mStyle.portHitRadius);
+	return nearest ? std::optional<PortHit>(ports[*nearest]) : std::nullopt;
 }
 
 size_t TreeView::hiddenDescendants(TreeItemId id) const {
@@ -1154,13 +1158,13 @@ void TreeView::onEvent(Event& event) {
 				const std::optional<Key> key = event.key();
 				if (mFull) break;
 				if (key == Key::Delete || key == Key::Backspace) {
-					if (mSelected.empty() || !mOnDeleteRequested) break;
+					if (mSelection.empty() || !mOnDeleteRequested) break;
 					requestDelete();
 					event.accept();
 					break;
 				}
 				if (key == Key::Escape) {
-					if (mSelected.empty()) break;
+					if (mSelection.empty()) break;
 					select(std::nullopt);
 					selectionChanged();
 					event.accept();
@@ -1172,8 +1176,8 @@ void TreeView::onEvent(Event& event) {
 					break;
 				}
 				if (key == Key::Enter || key == Key::Space) {
-					if (!mSelection) break;
-					setOpen(*mSelection, !mExpansion.isOpen(*mSelection));
+					if (!mSelection.current()) break;
+					setOpen(*mSelection.current(), !mExpansion.isOpen(*mSelection.current()));
 					event.accept();
 					break;
 				}
@@ -1216,7 +1220,7 @@ void TreeView::pressAt(Event& event, Vec2F local) {
 			toggleByUser(*item);
 			return;
 		}
-		mPressedSelected = mSelection == item && mSelected.size() == 1;
+		mPressedSelected = mSelection.current() == item && mSelection.selected().size() == 1;
 		if (!mPressedSelected) selectByUser(*item);
 		mTugged = item;
 		mTug.jumpTo({ 0, 0 });
@@ -1224,7 +1228,7 @@ void TreeView::pressAt(Event& event, Vec2F local) {
 		return;
 	}
 
-	mBoxBase = toggling ? mSelected : std::unordered_set<TreeItemId>{};
+	mBoxBase = toggling ? selectedItems() : std::vector<TreeItemId>{};
 	mBoxCorner = local;
 	mPendingGesture = Gesture::Box;
 }
@@ -1303,13 +1307,12 @@ void TreeView::dragAt(Event& event, Vec2F local) {
 }
 
 void TreeView::clickAt(Event& event, Vec2F local) {
-	fprintf(stderr, "clickAt pending=%d selected=%zu boxBase=%zu mods=%d%d local=%g,%g\n", (int) mPendingGesture, mSelected.size(), mBoxBase.size(), event.modifiers().control, event.modifiers().shift, local.x, local.y);
 	event.accept();
-	if (mPendingGesture == Gesture::Tug && mPressedSelected && mSelection) {
-		setOpen(*mSelection, !mExpansion.isOpen(*mSelection));
+	if (mPendingGesture == Gesture::Tug && mPressedSelected && mSelection.current()) {
+		setOpen(*mSelection.current(), !mExpansion.isOpen(*mSelection.current()));
 	}
 	if (mPendingGesture == Gesture::Box) {
-		if (mBoxBase.empty() && !mSelected.empty()) {
+		if (mBoxBase.empty() && !mSelection.empty()) {
 			select(std::nullopt);
 			selectionChanged();
 		}
@@ -1363,8 +1366,8 @@ void TreeView::onHoverChanged() {
 }
 
 void TreeView::moveSelection(Key key) {
-	if (!mSelection) return;
-	const std::optional<size_t> index = mStructure.indexOf(*mSelection);
+	if (!mSelection.current()) return;
+	const std::optional<size_t> index = mStructure.indexOf(*mSelection.current());
 	if (!index) return;
 	const TreeStructure::Item& item = mStructure.items()[*index];
 	const std::vector<size_t>& siblings =
@@ -1436,26 +1439,14 @@ void TreeView::paintStacks(Canvas& painter) const {
 		const RGBA color = Palette::mix(card->accent(), theme().palette.window, 0.45f);
 		painter.rect(
 			translated(rect, { offset, offset }),
-			withAlpha(color, card->mStack * card->mOpacity),
+			Palette::faded(color, card->mStack * card->mOpacity),
 			std::min(kCardRadius, rect.size.y / 2)
 		);
 	}
 }
 
 void TreeView::paintCurve(Canvas& painter, Vec2F from, Vec2F to, const RGBA& color, halnf thickness) const {
-	const halnf bend = std::max(std::abs(to.x - from.x) * 0.5f, 16.0f);
-	const Vec2F controlFrom = from + Vec2F(bend, 0.0f);
-	const Vec2F controlTo = to - Vec2F(bend, 0.0f);
-	std::vector<Vec2F> points;
-	points.reserve(kCurveSegments + 1);
-	for (int step = 0; step <= kCurveSegments; step++) {
-		const halnf t = halnf(step) / kCurveSegments;
-		const halnf u = 1 - t;
-		points.push_back(
-			from * (u * u * u) + controlFrom * (3 * u * u * t) + controlTo * (3 * u * t * t) + to * (t * t * t)
-		);
-	}
-	painter.polyline(points, color, thickness);
+	graph::paintLink(painter, from, to, { kLinkBend, kCurveSegments }, color, thickness);
 }
 
 void TreeView::paintLinks(Canvas& painter) const {
@@ -1470,11 +1461,11 @@ void TreeView::paintLinks(Canvas& painter) const {
 		const Vec2F from = { parent.pos.x + parent.size.x, parent.pos.y + parent.size.y / 2 };
 		const Vec2F to = { child.pos.x, child.pos.y + child.size.y / 2 };
 		if (!overlaps(visible, boundsOf({ from, to }))) continue;
-		const bool related = mSelected.contains(entry.id) || mSelected.contains(mStructure.items()[entry.parent].id);
-		const halnf alpha = opacity * (related || mSelected.empty() ? 0.9f : 0.45f);
+		const bool related = mSelection.isSelected(entry.id) || mSelection.isSelected(mStructure.items()[entry.parent].id);
+		const halnf alpha = opacity * (related || mSelection.empty() ? 0.9f : 0.45f);
 		const RGBA color = related ? style.palette.text : style.palette.mutedText;
 		const halnf thickness = mStyle.linkThickness * std::max(0.6f, decorationScale(child.size.y));
-		paintCurve(painter, from, to, withAlpha(color, alpha), thickness * (related ? 1.6f : 1.0f));
+		paintCurve(painter, from, to, Palette::faded(color, alpha), thickness * (related ? 1.6f : 1.0f));
 	}
 
 	for (const auto& [fromId, toId] : mModel.crossLinks()) {
@@ -1483,12 +1474,12 @@ void TreeView::paintLinks(Canvas& painter) const {
 		if (!from || !to || !isInteractive(*from) || !isInteractive(*to)) continue;
 		const RectF first = mRects[*from];
 		const RectF second = mRects[*to];
-		const bool related = mSelected.contains(fromId) || mSelected.contains(toId);
+		const bool related = mSelection.isSelected(fromId) || mSelection.isSelected(toId);
 		paintCurve(
 			painter,
 			{ first.pos.x + first.size.x, first.pos.y + first.size.y * 0.75f },
 			{ second.pos.x, second.pos.y + second.size.y * 0.75f },
-			withAlpha(style.palette.warningText, related || mSelected.empty() ? 0.8f : 0.35f),
+			Palette::faded(style.palette.warningText, related || mSelection.empty() ? 0.8f : 0.35f),
 			mStyle.linkThickness
 		);
 	}
@@ -1507,14 +1498,11 @@ void TreeView::paintOverlay(Canvas& painter) {
 		for (Port port : { Port::Parent, Port::Children }) {
 			const Vec2F center = *portPosition(id, port);
 			if (!contains(visible, center)) continue;
-			painter.circle(center, portRadius, withAlpha(style.palette.window, ports));
-			painter.circleOutline(center, portRadius, withAlpha(style.palette.mutedText, ports), 1.5f * ports);
+			painter.circle(center, portRadius, Palette::faded(style.palette.window, ports));
+			painter.circleOutline(center, portRadius, Palette::faded(style.palette.mutedText, ports), 1.5f * ports);
 		}
 	}
-	if (const std::optional<RectF> box = selectionBox()) {
-		painter.rect(*box, withAlpha(style.palette.accent, 0.12f), 2);
-		painter.outline(*box, withAlpha(style.palette.accent, 0.8f), 2, 1);
-	}
+	if (const std::optional<RectF> box = selectionBox()) graph::paintMarquee(painter, *box, style);
 	if (!mLink) return;
 
 	const Vec2F anchor = *portPosition(mLink->from.item, mLink->from.port);
diff --git a/Widgets/src/components/nodes/public/GraphGeometry.hpp b/Widgets/src/components/nodes/public/GraphGeometry.hpp
new file mode 100644
index 00000000..485f873e
--- /dev/null
+++ b/Widgets/src/components/nodes/public/GraphGeometry.hpp
@@ -0,0 +1,41 @@
+#pragma once
+
+#include "CanvasTypes.hpp"
+#include "Geometry.hpp"
+
+#include <optional>
+#include <vector>
+
+namespace tp {
+	class Canvas;
+}
+
+namespace tp::ui {
+
+	struct Theme;
+
+	// The drawing and hit-testing node views share: links are horizontal S-curves from an output on the right of one
+	// card to an input on the left of another, ports are round handles, and a marquee is the dragged selection box.
+	namespace graph {
+		// How far a link's control points reach out of its ends, in view pixels: half the horizontal distance, never
+		// less than minimumBend so short or backward links still leave their ports sideways.
+		struct LinkShape {
+			halnf minimumBend = 16;
+			int segments = 24;
+		};
+
+		// The polyline approximating a link from one port to another, in the same coordinates as the ports.
+		[[nodiscard]] std::vector<Vec2F> linkPoints(Vec2F from, Vec2F to, const LinkShape& shape);
+		void paintLink(Canvas& canvas, Vec2F from, Vec2F to, const LinkShape& shape, const RGBA& color, halnf thickness);
+		// The distance from a point to a link's polyline.
+		[[nodiscard]] halnf distanceToLink(Vec2F point, const std::vector<Vec2F>& link);
+
+		// The index of the nearest position within reach, among ports given by position.
+		[[nodiscard]] std::optional<size_t> nearestWithin(const std::vector<Vec2F>& positions, Vec2F point, halnf reach);
+
+		// The box spanned by a press point and the pointer, in either order.
+		[[nodiscard]] RectF marquee(Vec2F press, Vec2F pointer);
+		// The selection box look, shared by every view that drags one.
+		void paintMarquee(Canvas& canvas, const RectF& box, const Theme& theme);
+	}
+}
diff --git a/Widgets/src/components/nodes/public/NodeEditor.hpp b/Widgets/src/components/nodes/public/NodeEditor.hpp
index 22aa797e..2e8b7f8e 100644
--- a/Widgets/src/components/nodes/public/NodeEditor.hpp
+++ b/Widgets/src/components/nodes/public/NodeEditor.hpp
@@ -2,6 +2,9 @@
 
 #include "Animation.hpp"
 #include "NodeGraph.hpp"
+#include "Commands.hpp"
+#include "GraphGeometry.hpp"
+#include "SelectionModel.hpp"
 #include "Shortcut.hpp"
 #include "Widget.hpp"
 
@@ -79,7 +82,7 @@ namespace tp::ui {
 		[[nodiscard]] bool isShown(NodeId id) const { return !mNodeFilter || mNodeFilter(id); }
 		[[nodiscard]] bool isShown(const Link& link) const { return isShown(link.from.node) && isShown(link.to.node); }
 
-		[[nodiscard]] const std::vector<NodeId>& selection() const { return mSelection; }
+		[[nodiscard]] const std::vector<NodeId>& selection() const { return mSelection.selected(); }
 		[[nodiscard]] bool isSelected(NodeId id) const;
 		void select(const std::vector<NodeId>& ids);
 		void clearSelection() { select({}); }
@@ -88,8 +91,11 @@ namespace tp::ui {
 		[[nodiscard]] bool isSelected(const Link& link) const;
 		void selectLink(const Link& link);
 
-		void execute(Command command);
-		[[nodiscard]] ShortcutMap<Command>& shortcuts() { return mShortcuts; }
+		// Runs a command if it is available now (Copy needs a selection, Paste a clipboard).
+		void execute(Command command) { mCommands.run(command); }
+		// The editor's commands: labels, shortcuts and availability for menus (MenuEntry::command) and the keyboard.
+		[[nodiscard]] Commands<Command>& commands() { return mCommands; }
+		[[nodiscard]] ShortcutMap<Command>& shortcuts() { return mCommands.shortcuts(); }
 		[[nodiscard]] bool hasClipboard() const { return !mClipboard.isEmpty(); }
 
 		[[nodiscard]] Vec2F pan() const { return mPan.value(); }
@@ -153,7 +159,7 @@ namespace tp::ui {
 			std::optional<PortRef> hovered;
 		};
 
-		void bindDefaultShortcuts();
+		void defineCommands();
 		[[nodiscard]] std::optional<std::pair<Vec2F, halnf>> framingView() const;
 		void viewChanged();
 		void holdZoomAnchor(bool zooming);
@@ -183,7 +189,7 @@ namespace tp::ui {
 
 		void paintLinks(Canvas& painter) const;
 		void paintLink(Canvas& painter, Vec2F from, Vec2F to, const RGBA& color, halnf thickness) const;
-		[[nodiscard]] std::vector<Vec2F> linkCurvePoints(Vec2F from, Vec2F to) const;
+		[[nodiscard]] graph::LinkShape linkShape() const;
 		void paintNode(Canvas& painter, const Node& node) const;
 		void paintSimplifiedNode(Canvas& painter, const Node& node, const NodePresentation& presentation) const;
 		void paintTextLine(Canvas& painter, const RectF& box, halnf textWidth, const RGBA& color) const;
@@ -209,9 +215,10 @@ namespace tp::ui {
 		std::function<void()> mOnEmptyDoubleClicked;
 		size_t mPaintedNodes = 0;
 		bool mFramePending = false;
-		ShortcutMap<Command> mShortcuts;
+		Commands<Command> mCommands;
 
-		std::vector<NodeId> mSelection;
+		// The selected nodes, the same model the tree view and lists use; a selected link is separate (one at a time).
+		SelectionModel<NodeId> mSelection{ SelectionModel<NodeId>::Mode::Multiple };
 		std::optional<Link> mSelectedLink;
 		NodeGraphFragment mClipboard;
 		ualni mPasteCount = 0;
diff --git a/Widgets/src/components/nodes/public/TreeView.hpp b/Widgets/src/components/nodes/public/TreeView.hpp
index 8aa60324..e51ff280 100644
--- a/Widgets/src/components/nodes/public/TreeView.hpp
+++ b/Widgets/src/components/nodes/public/TreeView.hpp
@@ -5,6 +5,7 @@
 #include "InputCodes.hpp"
 #include "Layout.hpp"
 #include "ScrollPhysics.hpp"
+#include "SelectionModel.hpp"
 #include "TreeLayout.hpp"
 #include "Widget.hpp"
 
@@ -143,9 +144,9 @@ namespace tp::ui {
 		void modelChanged();
 		void refreshCards();
 
-		[[nodiscard]] std::optional<TreeItemId> selection() const { return mSelection; }
+		[[nodiscard]] std::optional<TreeItemId> selection() const { return mSelection.current(); }
 		[[nodiscard]] std::vector<TreeItemId> selectedItems() const;
-		[[nodiscard]] bool isSelected(TreeItemId id) const { return mSelected.contains(id); }
+		[[nodiscard]] bool isSelected(TreeItemId id) const { return mSelection.isSelected(id); }
 		void select(std::optional<TreeItemId> id);
 		void setSelection(const std::vector<TreeItemId>& ids, std::optional<TreeItemId> current);
 		void selectAll();
@@ -277,6 +278,7 @@ namespace tp::ui {
 		void toggleByUser(TreeItemId id);
 		void updateBox(Vec2F local);
 		void selectionChanged();
+		[[nodiscard]] std::vector<TreeItemId> treeOrder() const;
 		void reveal(TreeItemId id);
 		void moveSelection(Key key);
 
@@ -321,9 +323,10 @@ namespace tp::ui {
 		std::optional<Vec2F> mPivotWorld;
 		AnimatedVec2 mPivotScreen{ Vec2F(0.0f, 0.0f), Motion::smooth(), 0.1f };
 
-		std::optional<TreeItemId> mSelection;
-		std::unordered_set<TreeItemId> mSelected;
-		std::unordered_set<TreeItemId> mBoxBase;
+		// The selected items and the current one (the one the camera follows and keys move from).
+		SelectionModel<TreeItemId> mSelection{ SelectionModel<TreeItemId>::Mode::Multiple };
+		// What a box drag adds to: the selection when it started with Control or Shift, else nothing.
+		std::vector<TreeItemId> mBoxBase;
 		std::optional<TreeItemId> mHovered;
 		std::unordered_map<TreeItemId, AnimatedFloat> mHover;
 
diff --git a/Widgets/src/components/nodes/tests/GraphGeometryTests.cpp b/Widgets/src/components/nodes/tests/GraphGeometryTests.cpp
new file mode 100644
index 00000000..54455278
--- /dev/null
+++ b/Widgets/src/components/nodes/tests/GraphGeometryTests.cpp
@@ -0,0 +1,47 @@
+#include "GraphGeometry.hpp"
+
+#include "UnitTest++/UnitTest++.h"
+
+using namespace tp;
+using namespace tp::ui;
+
+SUITE(GraphGeometry) {
+	TEST(LinksStartAndEndAtTheirPortsAndLeaveThemSideways) {
+		const graph::LinkShape shape{ 16, 20 };
+		const std::vector<Vec2F> points = graph::linkPoints({ 0, 0 }, { 100, 50 }, shape);
+		REQUIRE CHECK_EQUAL(21u, points.size());
+		CHECK_CLOSE(0, points.front().x, 0.001f);
+		CHECK_CLOSE(50, points.back().y, 0.001f);
+		// Leaving the output, the curve heads right before it bends down.
+		CHECK(points[1].x > points[0].x);
+		CHECK(points[1].y - points[0].y < points[1].x - points[0].x);
+	}
+
+	TEST(BackwardLinksStillBendOutByTheMinimum) {
+		const graph::LinkShape shape{ 40, 24 };
+		const std::vector<Vec2F> points = graph::linkPoints({ 100, 0 }, { 0, 0 }, shape);
+		halnf rightmost = 0;
+		for (const Vec2F& point : points)
+			rightmost = std::max(rightmost, point.x);
+		CHECK(rightmost > 100);
+	}
+
+	TEST(DistanceToALinkMeasuresToItsCurve) {
+		const std::vector<Vec2F> straight = graph::linkPoints({ 0, 0 }, { 100, 0 }, { 16, 10 });
+		CHECK_CLOSE(5, graph::distanceToLink({ 50, 5 }, straight), 0.01f);
+		CHECK(graph::distanceToLink({ 50, 40 }, straight) > 30);
+	}
+
+	TEST(NearestPortWithinReach) {
+		const std::vector<Vec2F> ports = { { 0, 0 }, { 20, 0 }, { 40, 0 } };
+		CHECK(graph::nearestWithin(ports, { 18, 2 }, 5) == std::optional<size_t>(1));
+		CHECK(!graph::nearestWithin(ports, { 10, 10 }, 5));
+	}
+
+	TEST(MarqueeIsTheSameWhicheverWayItIsDragged) {
+		const RectF forward = graph::marquee({ 10, 20 }, { 50, 60 });
+		const RectF backward = graph::marquee({ 50, 60 }, { 10, 20 });
+		CHECK_CLOSE(forward.pos.x, backward.pos.x, 0.001f);
+		CHECK_CLOSE(40, backward.size.y, 0.001f);
+	}
+}
diff --git a/Widgets/src/components/tests/GalleryAppTests.cpp b/Widgets/src/components/tests/GalleryAppTests.cpp
index da287f35..e1975b39 100644
--- a/Widgets/src/components/tests/GalleryAppTests.cpp
+++ b/Widgets/src/components/tests/GalleryAppTests.cpp
@@ -702,3 +702,50 @@ SUITE(GalleryFilesPage) {
 		CHECK_EQUAL("Chose " + page.browser.directory(), page.status.text());
 	}
 }
+
+SUITE(GalleryFormsAndPanels) {
+	size_t tabNamed(Gallery& gallery, const std::string& name) {
+		for (size_t tab = 0; tab < gallery.tabs.tabCount(); tab++) {
+			if (gallery.tabs.tabButton(tab).text() == name) return tab;
+		}
+		return gallery.tabs.tabCount();
+	}
+
+	TEST(FormsPageEditsTheCurrentContactThroughTheList) {
+		Gallery gallery;
+		UiDriver driver(gallery, { 1200, 800 });
+		REQUIRE CHECK(tabNamed(gallery, "Forms") < gallery.tabs.tabCount());
+		driver.click(gallery.tabs.tabButton(tabNamed(gallery, "Forms")));
+		FormsPage& page = gallery.formsPage;
+
+		driver.click(page.list.row(1));
+		driver.key(Key::Down);
+		REQUIRE CHECK(page.current() != nullptr);
+		CHECK_EQUAL("Alan Turing", page.current()->name);
+		CHECK(driver.paint().hasText("Alan Turing"));
+
+		driver.click(*page.details.editor("Starred"));
+		CHECK(page.current()->starred);
+		page.commands.run(FormsPage::Command::Remove);
+		CHECK_EQUAL(5u, page.contacts.size());
+	}
+
+	TEST(PanelsPageNotesAndDialogWork) {
+		Gallery gallery;
+		UiDriver driver(gallery, { 1200, 800 });
+		REQUIRE CHECK(tabNamed(gallery, "Panels") < gallery.tabs.tabCount());
+		driver.click(gallery.tabs.tabButton(tabNamed(gallery, "Panels")));
+		PanelsPage& page = gallery.panelsPage;
+
+		driver.click(page.addNote);
+		driver.click(page.addNote);
+		CHECK_EQUAL("2 notes", page.noteCount.text());
+		driver.click(page.clearNotes);
+		CHECK_EQUAL("0 notes", page.noteCount.text());
+
+		driver.click(page.openDialog);
+		REQUIRE CHECK(page.dialog.isOpen());
+		driver.click(*page.dialog.buttons().front());
+		CHECK_EQUAL("Renamed to Background", page.status.text());
+	}
+}
diff --git a/Widgets/src/components/tests/LayoutTests.cpp b/Widgets/src/components/tests/LayoutTests.cpp
index 09c09e40..a68f8ac9 100644
--- a/Widgets/src/components/tests/LayoutTests.cpp
+++ b/Widgets/src/components/tests/LayoutTests.cpp
@@ -381,6 +381,113 @@ SUITE(OtherLayouts) {
 		checkRect(makeRect(110, 0, 100, 40), cells[1].rect());
 		checkRect(makeRect(0, 50, 100, 30), cells[2].rect());
 	}
+
+	TEST(GridColumnWidthsFitLabelsAndFillTheRest) {
+		Widget root;
+		root.emplaceLayout<GridLayout>(1, 10).setColumnWidths({ AxisSizing::fit(), AxisSizing::fill() });
+		Box cells[4] = { Box({ 40, 20 }), Box({ 10, 20 }), Box({ 70, 20 }), Box({ 10, 30 }) };
+		for (Box& cell : cells)
+			root.addChild(cell);
+
+		UiDriver driver(root, { 300, 200 });
+
+		// The label column is as wide as its widest label, the text column takes everything else.
+		checkRect(makeRect(0, 0, 70, 20), cells[0].rect());
+		checkRect(makeRect(80, 0, 220, 20), cells[1].rect());
+		checkRect(makeRect(0, 30, 70, 30), cells[2].rect());
+		checkRect(makeRect(80, 30, 220, 30), cells[3].rect());
+	}
+
+	TEST(GridFixedAndWeightedColumns) {
+		Widget root;
+		root.emplaceLayout<GridLayout>(1).setColumnWidths(
+			{ AxisSizing::fixed(50), AxisSizing::fill(1), AxisSizing::fill(3) }
+		);
+		Box cells[3] = { Box({ 10, 10 }), Box({ 10, 10 }), Box({ 10, 10 }) };
+		for (Box& cell : cells)
+			root.addChild(cell);
+
+		UiDriver driver(root, { 250, 100 });
+
+		// Like rows and columns, fill columns start at their content (10 each) and share the leftover 180 by weight 1:3.
+		checkRect(makeRect(0, 0, 50, 10), cells[0].rect());
+		checkRect(makeRect(50, 0, 55, 10), cells[1].rect());
+		checkRect(makeRect(105, 0, 145, 10), cells[2].rect());
+	}
+
+	TEST(GridMeasuresTheSumOfItsColumns) {
+		Widget root;
+		root.emplaceLayout<ColumnLayout>().setCrossAlign(CrossAlign::Start);
+		Widget table;
+		table.emplaceLayout<GridLayout>(1, 5).setColumnWidths({ AxisSizing::fit(), AxisSizing::fit() });
+		Box cells[2] = { Box({ 30, 10 }), Box({ 45, 10 }) };
+		for (Box& cell : cells)
+			table.addChild(cell);
+		root.addChild(table);
+
+		UiDriver driver(root, { 400, 100 });
+
+		CHECK_CLOSE(30 + 5 + 45, table.rect().size.x, 0.01f);
+	}
+
+	TEST(RowOverflowCutsTheRunFromItsEndAndShowsTheIndicator) {
+		Widget root;
+		RowLayout& row = root.emplaceLayout<RowLayout>();
+		Box items[4] = { Box({ 50, 10 }), Box({ 50, 10 }), Box({ 50, 10 }), Box({ 50, 10 }) };
+		Box more({ 20, 10 });
+		Box trailing({ 30, 10 });
+		for (Box& item : items)
+			root.addChild(item);
+		root.addChild(more);
+		root.addChild(trailing);
+		size_t reported = 99;
+		row.setOverflow(0, 4, &more);
+		row.setOnOverflowChanged([&reported](size_t shown) { reported = shown; });
+
+		// 200 for the run + 30 trailing do not fit 160: with the indicator (20) and trailing (30), two items fit.
+		UiDriver driver(root, { 160, 40 });
+		CHECK_EQUAL(2u, row.shownOverflowItems());
+		CHECK_EQUAL(2u, reported);
+		CHECK(items[1].isVisible());
+		CHECK(!items[2].isVisible() && !items[3].isVisible());
+		CHECK(more.isVisible());
+		CHECK(trailing.rect().pos.x + trailing.rect().size.x <= 160.01f);
+
+		driver.resize({ 400, 40 });
+		driver.layout();
+		CHECK_EQUAL(4u, row.shownOverflowItems());
+		CHECK(items[3].isVisible());
+		CHECK(!more.isVisible());
+	}
+
+	TEST(RowWithoutOverflowKeepsEveryChild) {
+		Widget root;
+		root.emplaceLayout<RowLayout>();
+		Box items[3] = { Box({ 80, 10 }), Box({ 80, 10 }), Box({ 80, 10 }) };
+		for (Box& item : items)
+			root.addChild(item);
+
+		UiDriver driver(root, { 100, 40 });
+
+		for (Box& item : items)
+			CHECK(item.isVisible());
+	}
+
+	TEST(ClearingColumnWidthsRestoresEqualColumns) {
+		Widget root;
+		GridLayout& grid = root.emplaceLayout<GridLayout>(1);
+		grid.setColumnWidths({ AxisSizing::fixed(20), AxisSizing::fill() });
+		grid.setColumnWidths({});
+		Box cells[2] = { Box({ 10, 10 }), Box({ 10, 10 }) };
+		for (Box& cell : cells)
+			root.addChild(cell);
+
+		UiDriver driver(root, { 200, 100 });
+
+		CHECK_EQUAL(2u, grid.columnWidths().empty() ? 2u : 0u);
+		checkRect(makeRect(0, 0, 100, 10), cells[0].rect());
+		checkRect(makeRect(100, 0, 100, 10), cells[1].rect());
+	}
 }
 
 SUITE(IncrementalLayout) {
diff --git a/Widgets/src/components/tests/ThemeEditorTests.cpp b/Widgets/src/components/tests/ThemeEditorTests.cpp
index 78e2d9a3..be23bba9 100644
--- a/Widgets/src/components/tests/ThemeEditorTests.cpp
+++ b/Widgets/src/components/tests/ThemeEditorTests.cpp
@@ -61,9 +61,9 @@ SUITE(ThemeEditorPage) {
 	TEST(TabShowsEveryColorWithSwatchAndHex) {
 		ThemeScene scene;
 		CHECK_EQUAL("Theme", scene.gallery.tabs.tabButton(kThemeTab).text());
-		CHECK_EQUAL(themeColorFields().size(), scene.page.colorRows.size());
+		CHECK_EQUAL(themeColorFields().size(), scene.page.colors.count());
 		CHECK_EQUAL("Editing window", scene.page.editingTitle.text());
-		CHECK_EQUAL(colorHex(Theme::standard().palette.window), scene.page.colorRows[0]->hex.text());
+		CHECK_EQUAL(colorHex(Theme::standard().palette.window), scene.page.colors.row(0).trailing().text);
 		CHECK(scene.driver.paint().hasText("accent"));
 	}
 
@@ -73,11 +73,13 @@ SUITE(ThemeEditorPage) {
 		scene.page.selectColor(scrim);
 		CHECK_EQUAL("Editing scrim", scene.page.editingTitle.text());
 		CHECK_CLOSE(Theme::standard().palette.scrim.a, scene.page.alpha.value(), 0.001f);
-		CHECK(scene.page.colorRows[scrim]->name.isSelected());
-		CHECK(!scene.page.colorRows[0]->name.isSelected());
+		CHECK(scene.page.colors.row(scrim).isHighlighted());
+		CHECK(!scene.page.colors.row(0).isHighlighted());
 
-		scene.driver.click(scene.page.colorRows[0]->name);
+		scene.driver.click(scene.page.colors.row(0));
 		CHECK_EQUAL(0u, scene.page.selectedColor());
+		scene.driver.key(Key::Down);
+		CHECK_EQUAL(1u, scene.page.selectedColor());
 	}
 
 	TEST(WheelAndAlphaEditTheLiveTheme) {
@@ -90,7 +92,7 @@ SUITE(ThemeEditorPage) {
 		scene.driver.click(wheel.center());
 		const RGBA edited = scene.driver.ui().theme().palette.text;
 		CHECK(!(edited == Theme::standard().palette.text));
-		CHECK_EQUAL(colorHex(edited), scene.page.colorRows[text]->hex.text());
+		CHECK_EQUAL(colorHex(edited), scene.page.colors.row(text).trailing().text);
 
 		scene.driver.settle(); scene.driver.click((scene.page.alpha.slider()).windowPointForValue(0.5f));
 		CHECK_CLOSE(0.5f, scene.driver.ui().theme().palette.text.a, 0.03f);
@@ -99,7 +101,7 @@ SUITE(ThemeEditorPage) {
 
 	TEST(MetricSlidersEditTheLiveTheme) {
 		ThemeScene scene;
-		LabeledSlider& corner = *scene.page.metricSliders[1];
+		LabeledSlider& corner = static_cast<LabeledSlider&>(*scene.page.metrics.editor("cornerRadius"));
 		CHECK_CLOSE(Theme::standard().metrics.cornerRadius, corner.value(), 0.001f);
 
 		scene.driver.settle(); scene.driver.click((corner.slider()).windowPointForValue(2));
diff --git a/Widgets/src/components/tests/WidgetTests.cpp b/Widgets/src/components/tests/WidgetTests.cpp
index f2441fd1..9b361ced 100644
--- a/Widgets/src/components/tests/WidgetTests.cpp
+++ b/Widgets/src/components/tests/WidgetTests.cpp
@@ -85,6 +85,40 @@ SUITE(LabelWidget) {
 }
 
 SUITE(ButtonWidget) {
+	TEST(GlyphButtonPaintsItsGlyphInsideTheButton) {
+		GlyphButton button(Glyph::ChevronRight);
+		Column scene(button);
+		UiDriver driver(scene.root);
+
+		const CanvasCommand* chevron = nullptr;
+		for (const CanvasCommand& command : driver.paint().commands()) {
+			if (command.kind == CanvasCommand::Kind::Polyline) chevron = &command;
+		}
+		REQUIRE CHECK(chevron != nullptr);
+		const RectF bounds = button.windowRect();
+		CHECK(chevron->rect.pos.x >= bounds.pos.x && chevron->rect.pos.x + chevron->rect.size.x <= bounds.pos.x + bounds.size.x);
+		CHECK_CLOSE(driver.ui().theme().metrics.glyphStroke, chevron->width, 0.001f);
+	}
+
+	TEST(GlyphButtonGlyphBrightensWhileHovered) {
+		GlyphButton button(Glyph::Close);
+		Column scene(button);
+		UiDriver driver(scene.root);
+		const Palette& palette = driver.ui().theme().palette;
+		const auto glyphColor = [&driver]() {
+			for (const CanvasCommand& command : driver.paint().commands()) {
+				if (command.kind == CanvasCommand::Kind::Line) return command.color;
+			}
+			return RGBA{};
+		};
+
+		CHECK_CLOSE(palette.mutedText.r, glyphColor().r, 0.01f);
+		driver.moveTo(button);
+		driver.settle();
+		CHECK_CLOSE(palette.text.r, glyphColor().r, 0.01f);
+		CHECK_CLOSE(palette.controlHovered.r, button.visual().color().r, 0.01f);
+	}
+
 	TEST(ClickInvokesActionOnce) {
 		int clicks = 0;
 		Button button("Press", [&clicks]() { clicks++; });
@@ -286,7 +320,7 @@ SUITE(SliderWidget) {
 		CHECK_EQUAL(3u, ticks);
 	}
 
-	TEST(DraggingSetsValueAndCapturesPointer) {
+	TEST(DraggingSetsValueAndKeepsFollowingThePointer) {
 		Slider slider(0, 100, 0);
 		std::vector<halnf> changes;
 		slider.setOnChanged([&changes](halnf value) { changes.push_back(value); });
@@ -299,9 +333,10 @@ SUITE(SliderWidget) {
 		driver.moveTo({ rect.pos.x + inset, rect.center().y });
 		driver.press();
 		CHECK(slider.isDragging());
-		CHECK(driver.ui().pointerCapture() == &slider);
 
+		// The router's drag keeps delivering to the slider once the pointer leaves it.
 		driver.moveTo({ rect.pos.x + rect.size.x / 2, rect.center().y + 200 });
+		CHECK(driver.ui().pointerCapture() == &slider);
 		CHECK_CLOSE(50, slider.value(), 1);
 
 		driver.moveTo({ rect.pos.x + rect.size.x + 500, rect.center().y });
@@ -435,9 +470,50 @@ SUITE(StructuralWidgets) {
 		Column scene(panel);
 		UiDriver driver(scene.root);
 
-		const auto& commands = driver.paint().commands();
-		REQUIRE CHECK(!commands.empty());
-		CHECK_CLOSE(driver.ui().theme().palette.raisedSurface.r, commands.front().color.r, 0.001f);
+		const CanvasCommand* surface = nullptr;
+		for (const CanvasCommand& command : driver.paint().commands()) {
+			if (!surface && command.kind == CanvasCommand::Kind::Rect) surface = &command;
+		}
+		REQUIRE CHECK(surface != nullptr);
+		CHECK_CLOSE(driver.ui().theme().palette.raisedSurface.r, surface->color.r, 0.001f);
+	}
+
+	TEST(RaisedPanelCastsTheThemeShadowBelowItsSurface) {
+		Panel panel(Panel::Surface::Raised);
+		panel.setSizing(AxisSizing::fixed(100), AxisSizing::fixed(50));
+		Column scene(panel);
+		UiDriver driver(scene.root);
+		const Theme& style = driver.ui().theme();
+
+		const std::vector<CanvasCommand>& commands = driver.paint().commands();
+		const auto shadow = std::find_if(commands.begin(), commands.end(), [](const CanvasCommand& command) {
+			return command.kind == CanvasCommand::Kind::Path;
+		});
+		const auto surface = std::find_if(commands.begin(), commands.end(), [&](const CanvasCommand& command) {
+			return command.kind == CanvasCommand::Kind::Rect && command.color == style.palette.raisedSurface;
+		});
+		REQUIRE CHECK(shadow != commands.end());
+		REQUIRE CHECK(surface != commands.end());
+		CHECK(shadow < surface);
+		CHECK(shadow->color == style.palette.shadow);
+		CHECK_CLOSE(panel.windowRect().pos.y + style.metrics.elevation, shadow->rect.pos.y, 0.5f);
+	}
+
+	TEST(FlatOrUnraisedPanelsCastNoShadow) {
+		Panel flat(Panel::Surface::Raised);
+		flat.setElevated(false);
+		Panel base(Panel::Surface::Base);
+		for (Panel* panel : { &flat, &base }) {
+			panel->setSizing(AxisSizing::fixed(100), AxisSizing::fixed(50));
+		}
+		Column scene(flat, base);
+		UiDriver driver(scene.root);
+
+		for (const CanvasCommand& command : driver.paint().commands()) {
+			CHECK(command.kind != CanvasCommand::Kind::Path);
+		}
+		CHECK(!flat.isElevated());
+		CHECK(!base.isElevated());
 	}
 }
 
@@ -756,18 +832,6 @@ SUITE(ScrollViewWidget) {
 		CHECK_CLOSE(50.0f, scene.scroll.currentOffset(), 0.5f);
 	}
 
-	TEST(FlingUsesTheAverageSpeedOfTheLastHundredMilliseconds) {
-		using Sample = ScrollView::DragSample;
-		const std::vector<Sample> steady = { { 0, 0 }, { 20, 20 }, { 40, 40 }, { 60, 60 }, { 80, 80 } };
-		CHECK_CLOSE(1.0f, ScrollView::averageVelocity(steady, 80), 1e-4f);
-		const std::vector<Sample> jitter = { { 0, 0 }, { 20, 20 }, { 40, 40 }, { 60, 60 }, { 80, 80 }, { 82, 100 } };
-		CHECK_CLOSE(100.0f / 82.0f, ScrollView::averageVelocity(jitter, 82), 1e-3f);
-		const std::vector<Sample> old = { { 0, 0 }, { 50, 100 }, { 200, 120 }, { 250, 220 } };
-		CHECK_CLOSE(2.0f, ScrollView::averageVelocity(old, 250), 1e-4f);
-		CHECK_CLOSE(0.0f, ScrollView::averageVelocity(old, 400), 1e-6f);
-		CHECK_CLOSE(0.0f, ScrollView::averageVelocity({ { 10, 5 } }, 10), 1e-6f);
-	}
-
 	TEST(ASuddenLastMoveDoesNotDominateTheFling) {
 		ScrollScene scene;
 		UiDriver driver(scene.root, { 200, 300 });
@@ -1058,6 +1122,66 @@ SUITE(ScrollViewWidget) {
 		CHECK_CLOSE(100, scene.scroll.offset(), 0.01f);
 	}
 
+	TEST(HorizontalScrollViewTakesHorizontalWheelAndTrackpad) {
+		Widget root;
+		root.emplaceLayout<StackLayout>();
+		ScrollView strip{ Axis::Horizontal };
+		Box wide({ 1000, 40 });
+		strip.setContent(&wide);
+		root.addChild(strip);
+		UiDriver driver(root, { 200, 40 });
+		driver.moveTo({ 100, 20 });
+
+		// Before the Viewport, a horizontal scroller read only the vertical wheel amount.
+		driver.wheel({ -1, 0 });
+		driver.settle();
+		const halnf afterNotch = strip.offset();
+		CHECK(afterNotch > 0);
+
+		driver.wheel({ -0.5f, 0.0f }, ScrollSource::Touchpad);
+		driver.settle();
+		CHECK(strip.offset() > afterNotch);
+
+		driver.wheel({ 0, -1 });
+		driver.settle();
+		CHECK(strip.offset() > afterNotch + 1);
+	}
+
+	TEST(ShiftWheelScrollsAVerticalScrollViewsHorizontalParent) {
+		Widget root;
+		root.emplaceLayout<StackLayout>();
+		ScrollView outer{ Axis::Horizontal };
+		Widget page;
+		page.setSizing(AxisSizing::fixed(1000), AxisSizing::fill());
+		page.emplaceLayout<StackLayout>();
+		ScrollView inner;
+		Box tall({ 100, 2000 });
+		inner.setContent(&tall);
+		page.addChild(inner);
+		outer.setContent(&page);
+		root.addChild(outer);
+		UiDriver driver(root, { 200, 300 });
+		driver.moveTo({ 100, 150 });
+
+		driver.withModifiers(KeyModifiers::shiftOnly());
+		driver.wheel({ 0, -1 });
+		driver.settle();
+
+		CHECK(outer.offset() > 0);
+		CHECK_CLOSE(0, inner.offset(), 0.01f);
+	}
+
+	TEST(RevealRangeUsesTheThemeMargin) {
+		ScrollScene scene;
+		UiDriver driver(scene.root, { 200, 300 });
+		const halnf margin = driver.ui().theme().interaction.revealMargin;
+
+		scene.scroll.revealRange(600, 50);
+		driver.settle();
+
+		CHECK_CLOSE(600 + 50 + margin - 300, scene.scroll.offset(), 0.5f);
+	}
+
 	TEST(ContentIsClippedToViewport) {
 		ScrollScene scene;
 		UiDriver driver(scene.root, { 200, 300 });
@@ -1219,7 +1343,7 @@ SUITE(CarouselTabViewWidget) {
 
 		void trackpad(halnf horizontal) {
 			driver.moveTo(pages[0].parent()->parent()->windowRect().center());
-			driver.wheel({ horizontal, 0.0f });
+			driver.wheel({ horizontal, 0.0f }, ScrollSource::Touchpad);
 		}
 
 		[[nodiscard]] bool shows(size_t index) { return driver.paint().hasText(pages[index].text()); }
@@ -1278,8 +1402,10 @@ SUITE(CarouselTabViewWidget) {
 	TEST(SelectionFrameSlidesBetweenTabsWithThePages) {
 		CarouselScene scene;
 		scene.driver.setAutoSettle(false);
-		const RectF first = scene.tabs.tabButton(0).rect();
-		const RectF second = scene.tabs.tabButton(1).rect();
+		// The indicator is painted by the tab bar, so it is in the bar's frame, like the strip of tab buttons.
+		const Vec2F strip = scene.tabs.tabStrip().rect().pos;
+		const RectF first = translated(scene.tabs.tabButton(0).rect(), strip);
+		const RectF second = translated(scene.tabs.tabButton(1).rect(), strip);
 		CHECK_CLOSE(first.pos.x, scene.tabs.selectionIndicatorRect().pos.x, 0.5f);
 
 		scene.tabs.showNext();
@@ -1307,18 +1433,31 @@ SUITE(CarouselTabViewWidget) {
 		driver.moveTo(scroller.windowRect().center());
 		driver.wheel({0, -1});
 		driver.settle();
-		CHECK(scroller.offset() > 0);
+		const halnf afterVertical = scroller.offset();
+		CHECK(afterVertical > 0);
 		CHECK_EQUAL(0, tabs.currentIndex());
 
+		// A horizontal scroller now takes horizontal scrolling too, so the page stays while it can scroll.
 		driver.wheel({-1, 0});
 		driver.settle();
-		CHECK_EQUAL(1, tabs.currentIndex());
+		CHECK(scroller.offset() > afterVertical);
+		CHECK_EQUAL(0, tabs.currentIndex());
 
+		// A page that does not scroll sideways lets horizontal and Shift+wheel scrolling turn the pages.
+		tabs.setCurrentIndex(1);
+		driver.settle();
 		driver.moveTo(plain.windowRect().center());
 		driver.withModifiers(KeyModifiers::shiftOnly());
 		driver.wheel({ 0, -1 });
 		driver.settle();
 		CHECK_EQUAL(0, tabs.currentIndex());
+
+		tabs.setCurrentIndex(1);
+		driver.settle();
+		driver.moveTo(plain.windowRect().center());
+		driver.wheel({ -1, 0 });
+		driver.settle();
+		CHECK_EQUAL(0, tabs.currentIndex());
 	}
 
 	TEST(TheSmallestSwipeMovesThePagesRightAway) {
@@ -1335,6 +1474,25 @@ SUITE(CarouselTabViewWidget) {
 		CHECK(scene.pages[1].parent()->isVisible());
 	}
 
+	TEST(AWholeTrackpadStepPullsAndAMouseNotchTurnsAPage) {
+		// The old carousel told them apart by whether the amount was a whole number, so a touchpad step of exactly 1
+		// turned a whole page. The event now says where the scroll came from.
+		CarouselScene scene;
+		scene.driver.setAutoSettle(false);
+
+		scene.trackpad(-1.0f);
+		scene.driver.advance(16);
+		CHECK(scene.tabs.isPulling());
+		CHECK_EQUAL(0, scene.tabs.currentIndex());
+		scene.driver.settle();
+
+		scene.driver.moveTo(scene.pages[0].parent()->parent()->windowRect().center());
+		scene.driver.wheel({ -1, 0 });
+		CHECK(!scene.tabs.isPulling());
+		scene.driver.settle();
+		CHECK_EQUAL(1, scene.tabs.currentIndex());
+	}
+
 	TEST(ASmallSwipeResistsAndSpringsBackWithoutOvershoot) {
 		CarouselScene scene;
 		scene.driver.setAutoSettle(false);
diff --git a/Widgets/src/components/views/private/ColorPicker.cpp b/Widgets/src/components/views/private/ColorPicker.cpp
index b94fb0fd..e13ea9f9 100644
--- a/Widgets/src/components/views/private/ColorPicker.cpp
+++ b/Widgets/src/components/views/private/ColorPicker.cpp
@@ -1,5 +1,6 @@
 #include "ColorPicker.hpp"
 #include "Canvas.hpp"
+#include "Glyph.hpp"
 
 #include "BoxLayout.hpp"
 #include "StackLayout.hpp"
@@ -43,15 +44,29 @@ void ColorCell::paint(Canvas& painter) {
 	if (mKind == Kind::Add) {
 		painter.rect(cell, background(), kCellRadius);
 		painter.outline(cell, palette.controlBorder, kCellRadius, 1);
-		const Vec2F center = cell.center();
-		painter.line(center - Vec2F(kPlusArm, 0.0f), center + Vec2F(kPlusArm, 0.0f), palette.text, 1.5f);
-		painter.line(center - Vec2F(0.0f, kPlusArm), center + Vec2F(0.0f, kPlusArm), palette.text, 1.5f);
+		paintGlyph(painter, Glyph::Plus, glyphBox(cell, kPlusArm * 2), palette.text, theme());
 		return;
 	}
 
 	painter.rect(cell, mColor, kCellRadius);
-	if (mSelected) painter.outline(insetRect(cell, 1), palette.text, kCellRadius, 2);
-	else if (isHovered()) painter.outline(cell, palette.mutedText, kCellRadius, 1);
+	if (mSelected) {
+		painter.outline(insetRect(cell, 1), palette.text, kCellRadius, 2);
+		return;
+	}
+	const halnf reveal = mVisual.reveal();
+	if (reveal > 0.01f) painter.outline(cell, Palette::faded(palette.mutedText, reveal), kCellRadius, 1);
+}
+
+void ColorCell::onHoverChanged() {
+	Control::onHoverChanged();
+	if (mVisual.refresh()) startTicking();
+	requestPaint();
+}
+
+void ColorCell::onTick(halnf deltaMs) {
+	Control::onTick(deltaMs);
+	if (!mVisual.advance(deltaMs) && !isTransitioning()) stopTicking();
+	requestPaint();
 }
 
 ColorPickerButton::ColorPickerButton() {
@@ -99,14 +114,15 @@ void ColorPickerButton::buildNewColorPopup() {
 }
 
 void ColorPickerButton::rebuildCells() {
-	mGrid.removeAllChildren();
+	// The grid owns the swatches; the add cell is a member and stays last.
+	mGrid.clearOwnedChildren();
+	mGrid.removeChild(mAddCell);
 	mSwatches.clear();
 
 	for (const RGBA& color : mPalette) {
-		auto cell = std::make_unique<ColorCell>(ColorCell::Kind::Swatch, color);
-		cell->setOnActivate([this, color] { pick(color); });
-		mGrid.addChild(*cell);
-		mSwatches.push_back(std::move(cell));
+		ColorCell& cell = mGrid.emplaceChild<ColorCell>(ColorCell::Kind::Swatch, color);
+		cell.setOnActivate([this, color] { pick(color); });
+		mSwatches.push_back(&cell);
 	}
 	mGrid.addChild(mAddCell);
 	refreshSelection();
@@ -169,7 +185,7 @@ void ColorPickerButton::pick(const RGBA& color) {
 }
 
 void ColorPickerButton::refreshSelection() {
-	for (const std::unique_ptr<ColorCell>& cell : mSwatches)
+	for (ColorCell* cell : mSwatches)
 		cell->setSelected(mColor && *mColor == cell->color());
 }
 
diff --git a/Widgets/src/components/views/private/ListRow.cpp b/Widgets/src/components/views/private/ListRow.cpp
new file mode 100644
index 00000000..5fbdf86c
--- /dev/null
+++ b/Widgets/src/components/views/private/ListRow.cpp
@@ -0,0 +1,199 @@
+#include "ListRow.hpp"
+
+#include "Canvas.hpp"
+#include "ComponentSizes.hpp"
+#include "Theme.hpp"
+
+#include <algorithm>
+
+using namespace tp;
+using namespace tp::ui;
+
+namespace {
+	constexpr halnf kSubtitleGap = 2;
+	constexpr halnf kChevronSide = 9;
+	constexpr halnf kSwitchWidthFactor = 1.9f;
+	constexpr halnf kSwitchKnobInset = 3;
+	constexpr halnf kTrailingGap = 4;
+
+	halnf densityFactor(ListRow::Density density) {
+		switch (density) {
+			case ListRow::Density::Compact: return 1.0f;
+			case ListRow::Density::Regular: return 1.25f;
+			case ListRow::Density::Comfortable: return 1.6f;
+		}
+		return 1.0f;
+	}
+}
+
+ListRow::ListRow(std::string title) :
+	mTitle(std::move(title)) {
+	setDebugName("list row: " + mTitle);
+	setSizing(AxisSizing::fill(), AxisSizing::fit());
+}
+
+void ListRow::setTitle(std::string title) {
+	if (title == mTitle) return;
+	mTitle = std::move(title);
+	requestLayout();
+}
+
+void ListRow::setSubtitle(std::string subtitle) {
+	if (subtitle == mSubtitle) return;
+	mSubtitle = std::move(subtitle);
+	requestLayout();
+}
+
+void ListRow::setLeading(Leading leading) {
+	mLeading = std::move(leading);
+	requestLayout();
+}
+
+void ListRow::setTrailing(Trailing trailing) {
+	mTrailing = std::move(trailing);
+	requestLayout();
+}
+
+void ListRow::setDensity(Density density) {
+	if (density == mDensity) return;
+	mDensity = density;
+	requestLayout();
+}
+
+void ListRow::setMuted(bool muted) {
+	if (muted == mMuted) return;
+	mMuted = muted;
+	requestPaint();
+}
+
+void ListRow::setSelected(bool selected) {
+	if (selected == mSelected) return;
+	mSelected = selected;
+	refreshVisualState();
+}
+
+void ListRow::setHighlighted(bool highlighted) {
+	if (highlighted == mHighlighted) return;
+	mHighlighted = highlighted;
+	refreshVisualState();
+}
+
+halnf ListRow::heightFor(Density density, bool hasSubtitle) {
+	const Metrics metrics;
+	halnf height = sizes::menuItemHeight * densityFactor(density);
+	if (hasSubtitle) height += metrics.lineHeight * 0.85f + kSubtitleGap;
+	return height;
+}
+
+halnf ListRow::leadingWidth() const {
+	if (mLeading.kind == Leading::Kind::None) return 0;
+	return theme().metrics.indicatorSize + theme().metrics.spacing;
+}
+
+halnf ListRow::trailingWidth() const {
+	const Metrics& metrics = theme().metrics;
+	switch (mTrailing.kind) {
+		case Trailing::Kind::None: return 0;
+		case Trailing::Kind::Text: return textWidth(mTrailing.text, metrics.smallFontSize) + metrics.spacing * 4;
+		case Trailing::Kind::Chevron: return kChevronSide + metrics.spacing * 2;
+		case Trailing::Kind::Switch: return metrics.indicatorSize * kSwitchWidthFactor + metrics.spacing * 2;
+	}
+	return 0;
+}
+
+Extent ListRow::measureContent(Axis axis, halnf) const {
+	const Metrics& metrics = theme().metrics;
+	if (axis == Axis::Vertical) return Extent::rigid(heightFor(mDensity, !mSubtitle.empty()));
+
+	const halnf text = std::max(textWidth(mTitle, metrics.fontSize), textWidth(mSubtitle, metrics.smallFontSize));
+	return Extent::natural(metrics.controlPadding.total(Axis::Horizontal) + leadingWidth() + text + trailingWidth());
+}
+
+RGBA ListRow::backgroundTarget() const {
+	const Palette& palette = theme().palette;
+	const RGBA clear = Palette::faded(palette.menuHighlight, 0);
+	if (!isEffectivelyEnabled()) return mSelected ? Palette::faded(palette.neutralSelection, 0.5f) : clear;
+	if (isPressed()) return palette.controlPressed;
+	if (mSelected) return palette.neutralSelection;
+	if (mHighlighted || isHovered()) return palette.menuHighlight;
+	return clear;
+}
+
+void ListRow::paint(Canvas& painter) {
+	const Theme& style = theme();
+	const Metrics& metrics = style.metrics;
+	const RectF area = localRect();
+	painter.rect(area, background(), metrics.cornerRadius);
+	if (showsFocusRing()) painter.outline(area, style.palette.focusRing, metrics.cornerRadius, 2);
+
+	const RectF content = metrics.controlPadding.shrink(area);
+	RGBA titleColor = isEffectivelyEnabled() ? style.palette.text : style.palette.disabledText;
+	if (mMuted && isEffectivelyEnabled()) titleColor = style.palette.mutedText;
+
+	const halnf leading = leadingWidth();
+	if (leading > 0) {
+		const RectF box = makeRect(content.pos.x, 0, metrics.indicatorSize, area.size.y);
+		paintLeading(painter, box, titleColor);
+	}
+
+	const halnf trailing = trailingWidth();
+	const halnf textLeft = content.pos.x + leading;
+	const halnf textWidth = std::max(0.0f, content.pos.x + content.size.x - trailing - textLeft);
+	if (mSubtitle.empty()) {
+		painter.text(mTitle, makeRect(textLeft, 0, textWidth, area.size.y), TextStyle{ metrics.fontSize, titleColor, TextAlign::leftCenter() });
+	} else {
+		// Title and subtitle stack around the middle of the row.
+		const halnf subtitleHeight = metrics.lineHeight * 0.85f;
+		const halnf top = (area.size.y - metrics.lineHeight - kSubtitleGap - subtitleHeight) / 2;
+		painter.text(mTitle, makeRect(textLeft, top, textWidth, metrics.lineHeight), TextStyle{ metrics.fontSize, titleColor, TextAlign::leftCenter() });
+		painter.text(
+			mSubtitle,
+			makeRect(textLeft, top + metrics.lineHeight + kSubtitleGap, textWidth, subtitleHeight),
+			TextStyle{ metrics.smallFontSize, style.palette.mutedText, TextAlign::leftCenter() }
+		);
+	}
+
+	if (trailing > 0) paintTrailing(painter, makeRect(content.pos.x + content.size.x - trailing + kTrailingGap, 0, trailing - kTrailingGap, area.size.y));
+}
+
+void ListRow::paintLeading(Canvas& painter, const RectF& box, const RGBA& color) const {
+	const Theme& style = theme();
+	const RectF square = glyphBox(box, style.metrics.indicatorSize);
+	switch (mLeading.kind) {
+		case Leading::Kind::None:
+		case Leading::Kind::Space: return;
+		case Leading::Kind::Glyph: paintGlyph(painter, mLeading.glyph, glyphBox(box, style.metrics.indicatorSize * 0.8f), style.palette.mutedText, style); return;
+		case Leading::Kind::Check: paintGlyph(painter, Glyph::Check, glyphBox(box, style.metrics.indicatorSize * 0.7f), color, style); return;
+		case Leading::Kind::Image: painter.drawImage(square, mLeading.image); return;
+		case Leading::Kind::Swatch:
+			painter.rect(glyphBox(box, style.metrics.indicatorSize * 0.85f), mLeading.color, style.metrics.indicatorCornerRadius);
+			return;
+	}
+}
+
+void ListRow::paintTrailing(Canvas& painter, const RectF& box) const {
+	const Theme& style = theme();
+	const Metrics& metrics = style.metrics;
+	const halnf middle = box.pos.y + box.size.y / 2;
+	const halnf right = box.pos.x + box.size.x;
+
+	switch (mTrailing.kind) {
+		case Trailing::Kind::None: return;
+		case Trailing::Kind::Text:
+			painter.text(mTrailing.text, box, TextStyle{ metrics.smallFontSize, style.palette.mutedText, TextAlign::rightCenter() });
+			return;
+		case Trailing::Kind::Chevron:
+			paintGlyph(painter, Glyph::ChevronRight, makeRect(right - kChevronSide, middle - kChevronSide / 2, kChevronSide, kChevronSide), style.palette.mutedText, style);
+			return;
+		case Trailing::Kind::Switch:
+			{
+				const halnf height = metrics.indicatorSize;
+				const halnf width = height * kSwitchWidthFactor;
+				const RectF track = makeRect(right - width, middle - height / 2, width, height);
+				painter.rect(track, mTrailing.on ? style.palette.toggleOn : style.palette.track, height / 2);
+				const Vec2F knob = { mTrailing.on ? track.pos.x + width - height / 2 : track.pos.x + height / 2, middle };
+				painter.circle(knob, height / 2 - kSwitchKnobInset, mTrailing.on ? style.palette.onToggle : style.palette.mutedText);
+				return;
+			}
+	}
+}
diff --git a/Widgets/src/components/views/private/ListView.cpp b/Widgets/src/components/views/private/ListView.cpp
new file mode 100644
index 00000000..9b4f7e40
--- /dev/null
+++ b/Widgets/src/components/views/private/ListView.cpp
@@ -0,0 +1,192 @@
+#include "ListView.hpp"
+
+#include "BoxLayout.hpp"
+#include "Event.hpp"
+#include "StackLayout.hpp"
+#include "Ui.hpp"
+
+#include <numeric>
+
+using namespace tp;
+using namespace tp::ui;
+
+namespace {
+	constexpr halnf kRowGap = 1;
+	constexpr halnf kListPadding = 4;
+
+	// Rows that are children of the list's column; their index is their position among the rows.
+	ListRow* rowAround(const Widget* target, const Widget& column) {
+		for (const Widget* current = target; current && current != &column; current = current->parent()) {
+			if (current->parent() == &column) return dynamic_cast<ListRow*>(const_cast<Widget*>(current));
+		}
+		return nullptr;
+	}
+}
+
+ListView::ListView(Mode mode) :
+	mSelection(mode) {
+	setDebugName("list view");
+	setSizing(AxisSizing::fill(), AxisSizing::fill());
+	emplaceLayout<StackLayout>();
+
+	mColumn.setDebugName("list rows");
+	mColumn.setSizing(AxisSizing::fill(), AxisSizing::fit());
+	mColumn.emplaceLayout<ColumnLayout>(kRowGap).setPadding(Insets::uniform(kListPadding));
+	mScroll.setSizing(AxisSizing::fill(), AxisSizing::fill());
+	mScroll.setContent(&mColumn);
+	addChild(mScroll);
+
+	mEmpty.setTone(Label::Tone::Muted);
+	mEmpty.setDebugName("list empty state");
+	mEmpty.setVisible(false);
+	addChild(mEmpty);
+
+	mSelection.setOnChanged([this]() {
+		refreshRowStates();
+		if (mOnSelectionChanged) mOnSelectionChanged();
+	});
+}
+
+void ListView::setFitsContent(bool fits) {
+	setSizing(AxisSizing::fill(), fits ? AxisSizing::fit() : AxisSizing::fill());
+	mScroll.setSizing(AxisSizing::fill(), fits ? AxisSizing::fit() : AxisSizing::fill());
+}
+
+void ListView::setDensity(ListRow::Density density) {
+	mDensity = density;
+	for (ListRow* row : mRows)
+		row->setDensity(density);
+}
+
+void ListView::setModel(Model model) {
+	mModel = std::move(model);
+	// Items that no longer exist leave the selection.
+	mSelection.retain([this](const size_t& index) { return index < mModel.count; });
+	rebuildRows();
+}
+
+void ListView::refresh() {
+	for (size_t index = 0; index < mRows.size(); index++) {
+		if (mModel.fill) mModel.fill(index, *mRows[index]);
+		mRows[index]->setEnabled(!mModel.isEnabled || mModel.isEnabled(index));
+	}
+	refreshRowStates();
+}
+
+void ListView::rebuildRows() {
+	// Rows are reused: only the difference in count is created or destroyed.
+	while (mRows.size() > mModel.count) {
+		mColumn.removeChild(*mRows.back());
+		mRows.pop_back();
+	}
+	while (mRows.size() < mModel.count) {
+		ListRow& row = mColumn.emplaceChild<ListRow>();
+		row.setDensity(mDensity);
+		row.setOnClicked([this, &row](const Event& event) {
+			for (size_t index = 0; index < mRows.size(); index++) {
+				if (mRows[index] == &row) rowClicked(index, event);
+			}
+		});
+		mRows.push_back(&row);
+	}
+	mEmpty.setVisible(mModel.count == 0);
+	mScroll.setVisible(mModel.count > 0);
+	refresh();
+}
+
+void ListView::refreshRowStates() {
+	for (size_t index = 0; index < mRows.size(); index++) {
+		mRows[index]->setSelected(mSelection.mode() == Mode::Multiple ? mSelection.isSelected(index) : false);
+		mRows[index]->setHighlighted(mSelection.current() == index);
+	}
+}
+
+std::vector<size_t> ListView::order() const {
+	std::vector<size_t> indices(mModel.count);
+	std::iota(indices.begin(), indices.end(), 0);
+	return indices;
+}
+
+void ListView::select(size_t index) {
+	if (index >= mModel.count) return;
+	mSelection.select(index);
+	revealCurrent();
+}
+
+void ListView::rowClicked(size_t index, const Event& event) {
+	if (index >= mModel.count) return;
+	if (mSelection.mode() == Mode::Multiple) mSelection.click(index, event.modifiers(), order());
+	else mSelection.select(index);
+	if (mActivatesOnClick || event.clickCount() >= 2) activate(index);
+}
+
+void ListView::activate(size_t index) {
+	if (index >= mModel.count || (mModel.isEnabled && !mModel.isEnabled(index))) return;
+	if (mOnActivated) mOnActivated(index);
+}
+
+void ListView::revealCurrent() {
+	const std::optional<size_t> current = mSelection.current();
+	if (!current || *current >= mRows.size()) return;
+	if (ui()) ui()->updateLayout();
+	const RectF rect = mRows[*current]->rect();
+	mScroll.revealRange(rect.pos.y, rect.size.y);
+}
+
+ListNavigator::Items ListView::navigationItems() const {
+	ListNavigator::Items items;
+	items.count = mModel.count;
+	items.isAvailable = [this](size_t index) { return !mModel.isEnabled || mModel.isEnabled(index); };
+	items.text = [this](size_t index) { return index < mRows.size() ? mRows[index]->title() : std::string(); };
+	return items;
+}
+
+size_t ListView::pageSize() const {
+	const halnf rowHeight = ListRow::heightFor(mDensity, false) + kRowGap;
+	return std::max<size_t>(1, (size_t) (mScroll.viewportLength() / rowHeight) - 1);
+}
+
+bool ListView::handleKey(Event& event) {
+	if (mModel.count == 0) return false;
+
+	if (event.type() == Event::Type::TextInput) {
+		const halnf now = ui() ? ui()->clockMs() : 0;
+		const std::optional<size_t> found = mNavigator.typeAhead(navigationItems(), current(), event.text(), now);
+		if (!found) return false;
+		select(*found);
+		return true;
+	}
+	if (event.type() != Event::Type::KeyDown) return false;
+
+	const std::optional<Key> key = event.key();
+	if (!key) return false;
+	if ((*key == Key::Enter || *key == Key::KeypadEnter) && current()) {
+		activate(*current());
+		return true;
+	}
+	if (*key == Key::Space && current() && mSelection.mode() == Mode::Multiple) {
+		mSelection.toggle(*current());
+		return true;
+	}
+
+	const std::optional<size_t> next = ListNavigator::step(navigationItems(), current(), *key, pageSize());
+	if (!next) {
+		// Arrows at an end are still the list's keys, so focus does not wander.
+		return *key == Key::Up || *key == Key::Down || *key == Key::Home || *key == Key::End;
+	}
+	if (event.modifiers().shift && mSelection.mode() == Mode::Multiple) mSelection.extendTo(*next, order());
+	else select(*next);
+	revealCurrent();
+	return true;
+}
+
+void ListView::onEvent(Event& event) {
+	if (handleKey(event)) event.accept();
+}
+
+void ListView::filterDescendantEvent(Event& event) {
+	// Keys reach the list even when a row has keyboard focus.
+	if ((event.type() == Event::Type::KeyDown || event.type() == Event::Type::TextInput) && rowAround(event.target(), mColumn)) {
+		if (handleKey(event)) event.accept();
+	}
+}
diff --git a/Widgets/src/components/views/private/PageStack.cpp b/Widgets/src/components/views/private/PageStack.cpp
index c820e72a..0d164d71 100644
--- a/Widgets/src/components/views/private/PageStack.cpp
+++ b/Widgets/src/components/views/private/PageStack.cpp
@@ -9,75 +9,46 @@ using namespace tp::ui;
 
 namespace {
 	constexpr halnf kHeaderGap = 12;
+	constexpr halnf kBodyGap = 16;
 	constexpr halnf kForward = 1.0f;
 	constexpr halnf kBackward = -0.3f;
 }
 
 StackPage::StackPage(PageStack& stack, std::string title) :
-	mStack(stack),
-	mTitle(std::move(title)) {
-	setDebugName("stack page: " + mTitle.text());
+	TitledPanel(std::move(title), Surface::None),
+	mStack(stack) {
+	setDebugName("stack page: " + this->title());
 	setSizing(AxisSizing::fill(), AxisSizing::fill());
-	emplaceLayout<ColumnLayout>(kHeaderGap).setCrossAlign(CrossAlign::Center);
+	static_cast<ColumnLayout*>(layout())->setGap(kHeaderGap);
+	static_cast<ColumnLayout*>(layout())->setCrossAlign(CrossAlign::Center);
 
-	mHeader.setDebugName("stack page header");
-	mHeader.setSizing(AxisSizing::fill(), AxisSizing::fit());
-	mHeader.emplaceLayout<RowLayout>(kHeaderGap).setCrossAlign(CrossAlign::Center);
+	// The header leads with the back button; the title sits at the right, across from it.
+	header().setDebugName("stack page header");
+	header().layout()->setPadding(Insets());
+	static_cast<RowLayout*>(header().layout())->setGap(kHeaderGap);
 	mBack.setStyle(Button::Style::Flat);
 	mBack.setOnActivate([this]() { mStack.back(); });
-	mTitle.setSizing(AxisSizing::fill(), AxisSizing::fit());
-	mTitle.setAlignment(TextAlign::rightCenter());
-	mHeader.addChild(mBack);
-	mHeader.addChild(mTitle);
+	titleLabel().setAlignment(TextAlign::rightCenter());
+	setLeadingHeader(&mBack);
 
-	mBody.setDebugName("stack page body");
-	mBody.setSizing(AxisSizing::fill(), AxisSizing::fit());
-	mBody.emplaceLayout<ColumnLayout>(16).setPadding(Insets::symmetric(0, 4));
-	mScroll.setSizing(AxisSizing::fill(), AxisSizing::fill());
-	mScroll.setContent(&mBody);
-
-	addChild(mHeader);
-	addChild(mScroll);
-}
-
-AxisSizing StackPage::horizontalSizing() const {
-	return mMaximumWidth > 0 ? AxisSizing::fill().atMost(mMaximumWidth) : AxisSizing::fill();
+	body().setDebugName("stack page body");
+	setBodyPadding(Insets::symmetric(0, 4));
+	setBodyGap(kBodyGap);
+	setScrollsBody(true);
 }
 
 void StackPage::setMaximumWidth(halnf width) {
-	mMaximumWidth = width;
-	mHeader.setSizing(horizontalSizing(), AxisSizing::fit());
-	mScroll.setSizing(horizontalSizing(), AxisSizing::fill());
-	if (!mScrollsContent) mBody.setSizing(horizontalSizing(), AxisSizing::fill());
-}
-
-void StackPage::setScrollsContent(bool scrolls) {
-	if (scrolls == mScrollsContent) return;
-	mScrollsContent = scrolls;
-
-	if (scrolls) {
-		removeChild(mBody);
-		mBody.setSizing(AxisSizing::fill(), AxisSizing::fit());
-		mScroll.setContent(&mBody);
-		addChild(mScroll);
-		return;
-	}
-
-	mScroll.setContent(nullptr);
-	removeChild(mScroll);
-	mBody.setSizing(horizontalSizing(), AxisSizing::fill());
-	addChild(mBody);
+	const AxisSizing horizontal = width > 0 ? AxisSizing::fill().atMost(width) : AxisSizing::fill();
+	header().setSizing(horizontal, AxisSizing::fit());
+	if (scrollsBody()) bodyScroller().setSizing(horizontal, AxisSizing::fill());
+	else body().setSizing(horizontal, AxisSizing::fill());
 }
 
 void StackPage::setHeaderContent(Widget* content) {
-	mHeader.removeAllChildren();
-	mHeader.addChild(mBack);
-	mHeader.addChild(content ? *content : static_cast<Widget&>(mTitle));
-}
-
-void StackPage::setContent(Widget& content) {
-	mBody.removeAllChildren();
-	mBody.addChild(content);
+	if (mHeaderContent) removeHeaderAction(*mHeaderContent);
+	mHeaderContent = content;
+	titleLabel().setVisible(content == nullptr);
+	if (content) addHeaderAction(*content);
 }
 
 PageStack::PageStack(Surface surface) :
@@ -121,7 +92,7 @@ StackPage& PageStack::push(std::string title) {
 
 StackPage& PageStack::push(std::string title, Widget& content) {
 	StackPage& page = push(std::move(title));
-	page.setContent(content);
+	page.setContent(&content);
 	return page;
 }
 
diff --git a/Widgets/src/components/views/private/PropertyList.cpp b/Widgets/src/components/views/private/PropertyList.cpp
new file mode 100644
index 00000000..8b61b4d2
--- /dev/null
+++ b/Widgets/src/components/views/private/PropertyList.cpp
@@ -0,0 +1,135 @@
+#include "PropertyList.hpp"
+
+#include "BoxLayout.hpp"
+#include "Containers.hpp"
+#include "StackLayout.hpp"
+
+using namespace tp;
+using namespace tp::ui;
+
+namespace {
+	constexpr halnf kRowGap = 6;
+	constexpr ualni kColumns = 2;
+}
+
+PropertyList::PropertyList() {
+	setDebugName("property list");
+	setSizing(AxisSizing::fill(), AxisSizing::fit());
+	// Names in a column as wide as the longest name, editors in the rest.
+	GridLayout& grid = emplaceLayout<GridLayout>(kColumns, kRowGap);
+	grid.setColumnWidths({ AxisSizing::fit(), AxisSizing::fill() });
+}
+
+void PropertyList::addName(const std::string& name, bool labelled) {
+	// The name cell comes first in the row; controls that show their own name (a checkbox, a labelled slider) leave it
+	// empty so the editor still lines up with the others.
+	if (labelled) emplaceChild<Label>(name).setTone(Label::Tone::Muted);
+	else emplaceChild<Spacer>(0.0f);
+}
+
+Widget& PropertyList::bind(std::string name, Widget& editor, std::function<void()> pull) {
+	editor.setSizing(AxisSizing::fill(), editor.sizing().vertical);
+	mRows.push_back({ std::move(name), &editor, std::move(pull) });
+	return editor;
+}
+
+void PropertyList::edited() {
+	if (mOnEdited) mOnEdited();
+}
+
+Label& PropertyList::addValue(std::string name, TextGetter value) {
+	addName(name, true);
+	Label& label = emplaceChild<Label>();
+	label.setWrap(true);
+	bind(std::move(name), label, [&label, value = std::move(value)]() { label.setText(value()); });
+	return label;
+}
+
+LabeledSlider& PropertyList::addSlider(std::string name, halnf minimum, halnf maximum, NumberGetter get, NumberSetter set) {
+	return addSlider(std::move(name), minimum, maximum, std::move(get), std::move(set), SliderOptions());
+}
+
+LabeledSlider& PropertyList::addSlider(
+	std::string name, halnf minimum, halnf maximum, NumberGetter get, NumberSetter set, SliderOptions options
+) {
+	// The slider shows its own name and value above the track.
+	addName(name, false);
+	LabeledSlider& slider = emplaceChild<LabeledSlider>(name, minimum, maximum, minimum);
+	if (options.format) slider.setValueFormatter(options.format);
+	if (options.step > 0) slider.slider().setStep(options.step);
+	slider.setScale(options.scale);
+	slider.setOnChanged([this, set = std::move(set)](halnf value) {
+		if (mPulling) return;
+		set(value);
+		edited();
+	});
+	bind(std::move(name), slider, [&slider, get = std::move(get)]() { slider.setValue(get()); });
+	return slider;
+}
+
+Checkbox& PropertyList::addCheckbox(std::string name, std::function<bool()> get, std::function<void(bool)> set) {
+	addName(name, false);
+	Checkbox& box = emplaceChild<Checkbox>(name);
+	box.setOnChanged([this, set = std::move(set)](bool checked) {
+		if (mPulling) return;
+		set(checked);
+		edited();
+	});
+	bind(std::move(name), box, [&box, get = std::move(get)]() { box.setChecked(get()); });
+	return box;
+}
+
+Dropdown& PropertyList::addChoice(
+	std::string name, std::vector<std::string> options, std::function<long()> get, std::function<void(long)> set
+) {
+	addName(name, true);
+	Dropdown& choice = emplaceChild<Dropdown>(std::move(options));
+	choice.setOnSelected([this, set = std::move(set)](long index) {
+		if (mPulling) return;
+		set(index);
+		edited();
+	});
+	bind(std::move(name), choice, [&choice, get = std::move(get)]() { choice.setSelectedIndex(get()); });
+	return choice;
+}
+
+TextField& PropertyList::addText(std::string name, TextGetter get, std::function<void(const std::string&)> set) {
+	addName(name, true);
+	TextField& field = emplaceChild<TextField>();
+	field.setOnCommitted([this, set = std::move(set)](const std::string& text) {
+		if (mPulling) return;
+		set(text);
+		edited();
+	});
+	bind(std::move(name), field, [&field, get = std::move(get)]() {
+		// A field being edited keeps what the user is typing.
+		if (!field.isEditing()) field.setText(get());
+	});
+	return field;
+}
+
+Widget& PropertyList::addCustom(std::string name, Widget& editor, std::function<void()> pull) {
+	addName(name, true);
+	addChild(editor);
+	return bind(std::move(name), editor, std::move(pull));
+}
+
+void PropertyList::addSeparator() {
+	emplaceChild<Separator>();
+	emplaceChild<Separator>();
+}
+
+void PropertyList::refresh() {
+	mPulling = true;
+	for (const Row& row : mRows) {
+		if (row.pull) row.pull();
+	}
+	mPulling = false;
+}
+
+Widget* PropertyList::editor(const std::string& name) const {
+	for (const Row& row : mRows) {
+		if (row.name == name) return row.editor;
+	}
+	return nullptr;
+}
diff --git a/Widgets/src/components/views/private/ReorderableList.cpp b/Widgets/src/components/views/private/ReorderableList.cpp
index a0d858f8..4e470b0d 100644
--- a/Widgets/src/components/views/private/ReorderableList.cpp
+++ b/Widgets/src/components/views/private/ReorderableList.cpp
@@ -1,9 +1,13 @@
 #include "ReorderableList.hpp"
 #include "Canvas.hpp"
 
+#include "Elevation.hpp"
+#include "Event.hpp"
+#include "Glyph.hpp"
 #include "Layout.hpp"
 #include "Theme.hpp"
 #include "Ui.hpp"
+#include "Viewport.hpp"
 
 #include <algorithm>
 #include <cmath>
@@ -12,12 +16,12 @@ using namespace tp;
 using namespace tp::ui;
 
 namespace {
-	constexpr halnf kGripDotRadius = 1.3f;
-	constexpr halnf kGripDotSpacing = 4;
-	constexpr halnf kIndicatorThickness = 2;
-	constexpr halnf kLiftedShadowOffset = 3;
+	constexpr halnf kGripGlyphSize = 10;
+	constexpr halnf kOutlineThickness = 3;
 }
 
+// Places the items top to bottom. While an item is lifted, the others take the order the ReorderSession's slot gives
+// and the lifted one sits where the pointer holds it.
 class ReorderableList::ListLayout : public Layout {
 public:
 	explicit ListLayout(ReorderableList& list) :
@@ -50,17 +54,18 @@ protected:
 		std::vector<size_t> order(items.size());
 		for (size_t index = 0; index < items.size(); index++)
 			order[index] = index;
-		if (mList.mDragging) {
-			order.erase(order.begin() + (std::ptrdiff_t) mList.mDragged);
-			order.insert(order.begin() + (std::ptrdiff_t) mList.mDrop, mList.mDragged);
+		if (mList.isDragging()) {
+			const size_t dragged = mList.mSession->origin().index;
+			order.erase(order.begin() + (std::ptrdiff_t) dragged);
+			order.insert(order.begin() + (std::ptrdiff_t) mList.mDrop, dragged);
 		}
 
 		halnf y = area.pos.y;
 		for (const size_t index : order) {
 			Widget& item = *items[index];
 			const halnf height = context.measure(item, Axis::Vertical, itemWidth).preferred;
-			const halnf top = mList.mDragging && index == mList.mDragged ? mList.mDragY : y;
-			context.place(item, makeRect(area.pos.x, top, itemWidth, height));
+			const bool lifted = mList.isDragging() && index == mList.mSession->origin().index;
+			context.place(item, makeRect(area.pos.x, lifted ? mList.mDragY : y, itemWidth, height));
 			y += height + mList.mGap;
 		}
 	}
@@ -89,11 +94,8 @@ void ReorderableList::addItem(Widget& item) {
 
 void ReorderableList::clearItems() {
 	cancelDrag();
-	if (mPressed || mHeld) {
-		if (ui()) ui()->releasePointer(*this);
-		mPressed = false;
-		mHeld = false;
-	}
+	mPressedIndex.reset();
+	mHeld = false;
 	mHoveredGrip = -1;
 	removeAllChildren();
 	mItems.clear();
@@ -110,16 +112,22 @@ bool ReorderableList::isOnGrip(Vec2F localPoint, size_t index) const { return co
 
 bool ReorderableList::hitTest(Vec2F localPoint) const { return contains(localRect(), localPoint); }
 
+bool ReorderableList::acceptsDrag(PointerButton button) const {
+	// In grip mode any row drags (vertically), in long-press mode only after the hold claims the drag.
+	return button == PointerButton::Left && mPressedIndex && usesGrips();
+}
+
 void ReorderableList::onEvent(Event& event) {
-	if (event.type() == Event::Type::PointerMove && !mPressed && !mDragging) updateGripHover(event.position());
-	handlePointer(event);
+	if (event.type() == Event::Type::PointerMove && !mPressedIndex && !isDragging()) updateGripHover(event.position());
+	handlePress(event);
+	handleDrag(event);
 }
 
 void ReorderableList::filterDescendantEvent(Event& event) {
-	if (!mPressed && !mDragging && hasNestedListAround(event.target())) return;
-	if (event.type() == Event::Type::PointerMove && !mPressed && !mDragging)
+	if (!mPressedIndex && !isDragging() && hasNestedListAround(event.target())) return;
+	if (event.type() == Event::Type::PointerMove && !mPressedIndex && !isDragging())
 		updateGripHover(toLocal(event.windowPosition()));
-	handlePointer(event);
+	handlePress(event);
 }
 
 bool ReorderableList::hasNestedListAround(const Widget* target) const {
@@ -143,81 +151,50 @@ void ReorderableList::updateGripHover(Vec2F localPoint) {
 	requestPaint();
 }
 
-void ReorderableList::handlePointer(Event& event) {
+void ReorderableList::handlePress(Event& event) {
 	switch (event.type()) {
 		case Event::Type::PointerDown:
 			{
-				if (event.button() != PointerButton::Left || mDragging) return;
+				if (event.button() != PointerButton::Left || isDragging()) return;
 				const Vec2F local = toLocal(event.windowPosition());
 				const long index = itemIndexAt(local);
 				if (index < 0) return;
 
-				mPressed = true;
-				mHeld = false;
+				// In grip mode a press drags once the router sees a vertical drag; otherwise a long press must lift the item.
 				mPressedIndex = (size_t) index;
+				mHeld = false;
 				mPressLocalY = local.y;
 				mPressedOnGrip = usesGrips() && isOnGrip(local, (size_t) index);
-				mPressPoint = event.windowPosition();
-				if (mPressedOnGrip) {
-					if (ui()) ui()->capturePointer(*this);
-					event.accept();
-				}
+				if (mPressedOnGrip) event.accept();
 				return;
 			}
 
-		case Event::Type::PointerMove:
+		case Event::Type::LongPress:
 			{
-				if (!mPressed) return;
-				const Vec2F offset = event.windowPosition() - mPressPoint;
-				const bool moved = std::fabs(offset.x) >= kDragThreshold || std::fabs(offset.y) >= kDragThreshold;
-				if (mPressedIndex >= mItems.size()) {
-					mPressed = false;
-					return;
-				}
-				if (!mDragging && mHeld && moved) {
-					beginDrag(event.windowPosition());
-					updateDrag(event.windowPosition());
-					event.accept();
-					return;
-				}
-				if (!mDragging && !usesGrips()) return;
-				if (!mDragging) {
-					const bool vertical = std::fabs(offset.y) >= kDragThreshold && std::fabs(offset.y) >= std::fabs(offset.x);
-					if (!vertical) return;
-					beginDrag(event.windowPosition());
-				}
-				updateDrag(event.windowPosition());
+				if (mDragMode == DragMode::Grip || !mPressedIndex || isDragging() || *mPressedIndex >= mItems.size()) return;
+				if (mDragMode == DragMode::None && !mOnHeld) return;
+				mHeld = true;
+				// The held item, not the scroller around it, follows the pointer from here.
+				if (mDragMode == DragMode::LongPress && ui()) ui()->claimDrag(*this);
 				event.accept();
 				return;
 			}
 
 		case Event::Type::PointerUp:
-			if (event.button() != PointerButton::Left || !mPressed) return;
-			mPressed = false;
-			if (!mDragging) {
-				if (mPressedOnGrip && ui()) ui()->releasePointer(*this);
-				if (mHeld && ui()) ui()->releasePointer(*this);
-				if (mHeld) {
-					mHeld = false;
-					event.accept();
-					if (mOnHeld && mPressedIndex < mItems.size()) mOnHeld(mPressedIndex);
-				}
+			{
+				if (event.button() != PointerButton::Left || isDragging()) return;
+				const std::optional<size_t> pressed = mPressedIndex;
+				const bool held = mHeld;
+				mPressedIndex.reset();
+				mHeld = false;
+				if (!held || !pressed) return;
+				event.accept();
+				if (mOnHeld && *pressed < mItems.size()) mOnHeld(*pressed);
 				return;
 			}
-			finishDrag();
-			event.accept();
-			return;
-
-		case Event::Type::LongPress:
-			if (mDragMode == DragMode::Grip || !mPressed || mDragging || mPressedIndex >= mItems.size()) return;
-			if (mDragMode == DragMode::None && !mOnHeld) return;
-			mHeld = true;
-			if (ui()) ui()->capturePointer(*this);
-			event.accept();
-			return;
 
 		case Event::Type::KeyDown:
-			if (!mDragging || !event.isKey(Key::Escape)) return;
+			if (!isDragging() || !event.isKey(Key::Escape)) return;
 			cancelDrag();
 			event.accept();
 			return;
@@ -226,41 +203,117 @@ void ReorderableList::handlePointer(Event& event) {
 	}
 }
 
-void ReorderableList::beginDrag(Vec2F windowPoint) {
-	mDragging = true;
-	mHoveredGrip = -1;
-	mDragged = mPressedIndex;
-	mDrop = mPressedIndex;
+void ReorderableList::handleDrag(Event& event) {
+	const Dragged* drag = event.drag();
+	if (!drag || drag->button != PointerButton::Left) return;
 
-	const RectF item = mItems[mDragged]->targetRect();
-	mGrabOffset = mPressLocalY - item.pos.y;
+	switch (drag->phase) {
+		case DragPhase::Started:
+			if (!mPressedIndex || *mPressedIndex >= mItems.size()) {
+				mPressedIndex.reset();
+				return;
+			}
+			// Without grips, only a held item lifts: a plain press stays a click or a scroll.
+			if (!usesGrips() && !mHeld) return;
+			// In grip mode only vertical movement lifts, so a sideways swipe does not reorder.
+			if (usesGrips() && std::fabs(drag->delta.y) < std::fabs(drag->delta.x)) {
+				mPressedIndex.reset();
+				if (ui()) ui()->cancelDrag();
+				return;
+			}
+			beginDrag();
+			updateDrag(event.windowPosition());
+			break;
+		case DragPhase::Moved:
+			if (!isDragging()) return;
+			updateDrag(event.windowPosition());
+			break;
+		case DragPhase::Finished:
+			if (!isDragging()) return;
+			finishDrag();
+			break;
+		case DragPhase::Cancelled:
+			if (!isDragging()) return;
+			cancelDrag();
+			break;
+	}
+	event.accept();
+}
+
+void ReorderableList::beginDrag() {
+	const size_t dragged = *mPressedIndex;
+	const RectF item = mItems[dragged]->targetRect();
+	mSession.emplace(ReorderSlot{ 0, dragged }, Vec2F(0.0f, mPressLocalY - item.pos.y));
+	mDrop = dragged;
+	mHoveredGrip = -1;
 	mDragY = item.pos.y;
 	mListHeight = size().y;
-	mItems[mDragged]->setGeometryAnimated(false);
+	mItems[dragged]->setGeometryAnimated(false);
 
 	if (ui()) {
-		ui()->capturePointer(*this);
 		mFocusBeforeDrag = ui()->keyboardFocus();
 		ui()->setKeyboardFocus(this);
 	}
 	setCursor(CursorShape::Grabbing);
+	startTicking();
 	requestLayout();
 }
 
+ReorderLane ReorderableList::laneWithoutDragged() const {
+	// The other items where they were before the lift, in window coordinates; the session decides the slot from them.
+	ReorderLane lane;
+	lane.axis = Axis::Vertical;
+	lane.area = windowRect();
+	const Vec2F origin = windowPosition();
+	halnf top = 0;
+	for (size_t index = 0; index < mItems.size(); index++) {
+		const halnf height = itemHeight(index);
+		if (index != mSession->origin().index) lane.items.push_back(makeRect(origin.x, origin.y + top, size().x, height));
+		top += height + mGap;
+	}
+	return lane;
+}
+
 void ReorderableList::updateDrag(Vec2F windowPoint) {
+	mPointer = windowPoint;
+	const size_t dragged = mSession->origin().index;
+	const halnf height = itemHeight(dragged);
 	const halnf pointer = toLocal(windowPoint).y;
-	const halnf limit = std::max(0.0f, mListHeight - itemHeight(mDragged));
-	mDragY = std::clamp(pointer - mGrabOffset, 0.0f, limit);
+	const halnf limit = std::max(0.0f, mListHeight - height);
+	mDragY = std::clamp(pointer - mSession->grabOffset().y, 0.0f, limit);
+
+	// The session's lifted-rect rule: a neighbour makes room once the lifted item's edge passes its middle.
+	const RectF lifted = makeRect(windowPosition() + Vec2F(0.0f, mDragY), { size().x, height });
+	mSession->updateLifted(lifted, { laneWithoutDragged() });
 	mDropTarget = dropTargetAt(pointer);
-	mDrop = mDropTarget >= 0 ? mDragged : slotFor(mDragY, mDragY + itemHeight(mDragged));
+	mDrop = mDropTarget >= 0 || !mSession->target() ? dragged : mSession->target()->index;
 	requestLayout();
 	requestPaint();
 }
 
+void ReorderableList::onTick(halnf deltaMs) {
+	if (!isDragging()) {
+		stopTicking();
+		return;
+	}
+	// Near the edge of the scroller around the list, keep scrolling so off-screen slots can be reached.
+	if (Viewport* view = scroller()) {
+		if (view->autoScrollAt(view->toLocal(mPointer), deltaMs)) updateDrag(mPointer);
+	}
+}
+
+Viewport* ReorderableList::scroller() const {
+	for (Widget* current = parent(); current; current = current->parent()) {
+		if (auto* view = dynamic_cast<Viewport*>(current)) return view;
+	}
+	return nullptr;
+}
+
 void ReorderableList::finishDrag() {
-	const size_t from = mDragged;
+	const size_t from = mSession->origin().index;
 	const size_t to = mDrop;
 	const long target = mDropTarget;
+	const RectF lifted = mItems[from]->rect();
 
 	endDragging();
 	if (target >= 0) {
@@ -272,6 +325,8 @@ void ReorderableList::finishDrag() {
 	Widget* moved = mItems[from];
 	mItems.erase(mItems.begin() + (std::ptrdiff_t) from);
 	mItems.insert(mItems.begin() + (std::ptrdiff_t) to, moved);
+	// The item glides from where it was dropped into its slot, like a card landing on the board.
+	moved->animateGeometryFrom(lifted);
 	requestLayout();
 	requestPaint();
 
@@ -279,25 +334,26 @@ void ReorderableList::finishDrag() {
 }
 
 void ReorderableList::cancelDrag() {
-	if (!mDragging) {
-		mPressed = false;
-		return;
-	}
+	mPressedIndex.reset();
+	mHeld = false;
+	if (!isDragging()) return;
 
-	mPressed = false;
+	const RectF lifted = mItems[mSession->origin().index]->rect();
+	Widget* item = mItems[mSession->origin().index];
 	endDragging();
+	item->animateGeometryFrom(lifted);
+	if (ui() && ui()->isDragging()) ui()->cancelDrag();
 	requestLayout();
 	requestPaint();
 }
 
 void ReorderableList::endDragging() {
-	mDragging = false;
+	mItems[mSession->origin().index]->setGeometryAnimated(true);
+	mSession.reset();
+	mPressedIndex.reset();
+	mHeld = false;
 	mDropTarget = -1;
-	mItems[mDragged]->setGeometryAnimated(true);
-	if (ui()) {
-		ui()->releasePointer(*this);
-		if (ui()->keyboardFocus() == this) ui()->setKeyboardFocus(mFocusBeforeDrag);
-	}
+	if (ui() && ui()->keyboardFocus() == this) ui()->setKeyboardFocus(mFocusBeforeDrag);
 	mFocusBeforeDrag = nullptr;
 	setCursor(CursorShape::Default);
 }
@@ -314,86 +370,59 @@ halnf ReorderableList::itemHeight(size_t index) const { return mItems[index]->ta
 
 long ReorderableList::dropTargetAt(halnf pointerY) const {
 	if (!mCanAcceptDrop) return -1;
+	const size_t dragged = mSession->origin().index;
 	for (size_t index = 0; index < mItems.size(); index++) {
-		if (index == mDragged) continue;
+		if (index == dragged) continue;
 		const RectF rect = mItems[index]->targetRect();
 		const halnf inset = rect.size.y * 0.25f;
 		const bool overMiddle = pointerY >= rect.pos.y + inset && pointerY <= rect.pos.y + rect.size.y - inset;
-		if (overMiddle && mCanAcceptDrop(mDragged, index)) return (long) index;
+		if (overMiddle && mCanAcceptDrop(dragged, index)) return (long) index;
 	}
 	return -1;
 }
 
-size_t ReorderableList::slotFor(halnf draggedTop, halnf draggedBottom) const {
-	size_t slot = mDragged;
-	halnf top = 0;
-	for (size_t index = 0; index < mItems.size(); index++) {
-		const halnf height = itemHeight(index);
-		const halnf center = top + height / 2;
-		if (index < mDragged && draggedTop < center) slot--;
-		if (index > mDragged && draggedBottom > center) slot++;
-		top += height + mGap;
-	}
-	return slot;
-}
-
 void ReorderableList::paint(Canvas& painter) {
 	const Theme& style = theme();
 
 	for (size_t index = 0; index < mItems.size() && usesGrips(); index++) {
-		if (mDragging && index == mDragged) continue;
+		if (isDragging() && index == mSession->origin().index) continue;
 		const RectF grip = gripRect(index);
-		const bool highlighted = !mDragging && mHoveredGrip == (long) index;
+		const bool highlighted = !isDragging() && mHoveredGrip == (long) index;
 		if (highlighted) painter.rect(grip, style.palette.controlHovered, style.metrics.indicatorCornerRadius);
-		paintGrip(painter, grip, highlighted ? style.palette.text : style.palette.disabledText);
+		paintGlyph(
+			painter, Glyph::Grip, glyphBox(grip, kGripGlyphSize), highlighted ? style.palette.text : style.palette.disabledText, style
+		);
 	}
 
-	if (!mDragging) return;
+	if (!isDragging()) return;
 
 	if (mDropTarget >= 0) {
 		const RectF target = mItems[(size_t) mDropTarget]->rect();
-		painter.outline(target, style.palette.accent, style.metrics.cornerRadius, 3);
+		painter.outline(target, style.palette.accent, style.metrics.cornerRadius, kOutlineThickness);
 		return;
 	}
 
+	const size_t dragged = mSession->origin().index;
 	halnf slotTop = 0;
 	size_t slot = 0;
 	for (size_t index = 0; index < mItems.size() && slot < mDrop; index++) {
-		if (index == mDragged) continue;
+		if (index == dragged) continue;
 		slotTop += itemHeight(index) + mGap;
 		slot++;
 	}
-	const halnf height = itemHeight(mDragged);
 	painter.outline(
-		makeRect(0, slotTop, size().x - gripWidth(), height), style.palette.focusRing, style.metrics.cornerRadius
+		makeRect(0, slotTop, size().x - gripWidth(), itemHeight(dragged)), style.palette.focusRing, style.metrics.cornerRadius
 	);
 }
 
-const Widget* ReorderableList::raisedChild() const { return mDragging ? mItems[mDragged] : nullptr; }
+const Widget* ReorderableList::raisedChild() const { return isDragging() ? mItems[mSession->origin().index] : nullptr; }
 
 void ReorderableList::paintRaisedBackdrop(Canvas& painter, const RectF& childRect) {
+	// The lifted item has the same look as a lifted card: the theme's elevation shadow on a raised surface.
 	const Theme& style = theme();
 	const RectF lifted = makeRect(0, childRect.pos.y, size().x, childRect.size.y);
-
-	painter.rect(
-		makeRect(lifted.pos.x, lifted.pos.y + kLiftedShadowOffset, lifted.size.x, lifted.size.y),
-		style.palette.shadow,
-		style.metrics.cornerRadius
-	);
+	paintElevationShadow(painter, lifted, style.metrics.cornerRadius, style);
 	painter.rect(lifted, style.palette.raisedSurface, style.metrics.cornerRadius);
 	painter.outline(lifted, style.palette.controlBorder, style.metrics.cornerRadius);
-	if (usesGrips()) paintGrip(painter, gripRectFor(lifted), style.palette.text);
-}
-
-void ReorderableList::paintGrip(Canvas& painter, const RectF& row, const RGBA& color) const {
-	const Vec2F center = row.center();
-	for (int line = -1; line <= 1; line++) {
-		for (int column = 0; column < 2; column++) {
-			painter.circle(
-				{ center.x + ((halnf) column - 0.5f) * kGripDotSpacing, center.y + (halnf) line * kGripDotSpacing },
-				kGripDotRadius,
-				color
-			);
-		}
-	}
+	if (usesGrips()) paintGlyph(painter, Glyph::Grip, glyphBox(gripRectFor(lifted), kGripGlyphSize), style.palette.text, style);
 }
diff --git a/Widgets/src/components/views/private/SearchField.cpp b/Widgets/src/components/views/private/SearchField.cpp
index 5faa26e1..21415110 100644
--- a/Widgets/src/components/views/private/SearchField.cpp
+++ b/Widgets/src/components/views/private/SearchField.cpp
@@ -10,58 +10,6 @@
 using namespace tp;
 using namespace tp::ui;
 
-namespace {
-	constexpr halnf kRowPadding = 8;
-	constexpr halnf kDetailGap = 2;
-}
-
-SearchResultRow::SearchResultRow(SearchField& field, size_t index, SearchResult result) :
-	mField(field),
-	mIndex(index),
-	mResult(std::move(result)) {
-	setDebugName("search result: " + mResult.title);
-	setSizing(AxisSizing::fill(), AxisSizing::fit());
-	setEnabled(mResult.enabled);
-}
-
-void SearchResultRow::setHighlighted(bool highlighted) {
-	if (highlighted == mHighlighted) return;
-	mHighlighted = highlighted;
-	requestPaint();
-}
-
-Extent SearchResultRow::measureContent(Axis axis, halnf) const {
-	const Metrics& metrics = theme().metrics;
-	if (axis == Axis::Vertical) {
-		halnf height = metrics.lineHeight + kRowPadding;
-		if (!mResult.detail.empty()) height += metrics.lineHeight * 0.85f + kDetailGap;
-		return Extent::rigid(height);
-	}
-	const halnf widest =
-		std::max(textWidth(mResult.title, metrics.fontSize), textWidth(mResult.detail, metrics.smallFontSize));
-	return Extent::natural(widest + kRowPadding * 2);
-}
-
-void SearchResultRow::paint(Canvas& painter) {
-	const Theme& style = theme();
-	const Metrics& metrics = style.metrics;
-	painter.rect(localRect(), background(), metrics.cornerRadius);
-
-	const RGBA titleColor = isEffectivelyEnabled() ? style.palette.text : style.palette.disabledText;
-	const halnf width = size().x - kRowPadding * 2;
-	painter.text(mResult.title, makeRect(kRowPadding, kRowPadding / 2, width, metrics.lineHeight), TextStyle{ metrics.fontSize, titleColor, TextAlign::leftCenter() });
-	if (mResult.detail.empty()) return;
-
-	painter.text(mResult.detail, makeRect(kRowPadding, kRowPadding / 2 + metrics.lineHeight + kDetailGap, width, metrics.lineHeight), TextStyle{ metrics.smallFontSize, style.palette.mutedText, TextAlign::leftCenter() });
-}
-
-void SearchResultRow::onActivated() { mField.choose(mIndex); }
-
-RGBA SearchResultRow::backgroundTarget() const {
-	if (mHighlighted && isEffectivelyEnabled()) return theme().palette.menuHighlight;
-	return Control::backgroundTarget();
-}
-
 SearchField::SearchField() {
 	setDebugName("search field");
 	setSizing(AxisSizing::fill(), AxisSizing::fit());
@@ -70,7 +18,12 @@ SearchField::SearchField() {
 
 	mDropdown.setDebugName("search results");
 	mDropdown.setBorder(true);
-	mDropdown.emplaceLayout<ColumnLayout>(0).setPadding(Insets::uniform(4));
+	mDropdown.emplaceLayout<StackLayout>();
+	mList.setFitsContent(true);
+	mList.setShowsScrollBar(false);
+	mList.setActivatesOnClick(true);
+	mList.setOnActivated([this](size_t index) { choose(index); });
+	mDropdown.addChild(mList);
 	mInput.setOnEdited([this](const std::string&) { refreshResults(); });
 	mInput.setOnEditingStarted([this]() { refreshResults(); });
 }
@@ -89,25 +42,31 @@ void SearchField::focus() {
 }
 
 void SearchField::refreshResults() {
-	std::vector<SearchResult> results = mQuery ? mQuery(mInput.text()) : std::vector<SearchResult>{};
-	if (results.size() > mMaximumResults) results.resize(mMaximumResults);
+	mResults = mQuery ? mQuery(mInput.text()) : std::vector<SearchResult>{};
+	if (mResults.size() > mMaximumResults) mResults.resize(mMaximumResults);
 
-	mDropdown.removeAllChildren();
-	mRows.clear();
-	for (size_t index = 0; index < results.size(); index++) {
-		mRows.push_back(std::make_unique<SearchResultRow>(*this, index, std::move(results[index])));
-		mDropdown.addChild(*mRows.back());
+	ListView::Model model;
+	model.count = mResults.size();
+	model.fill = [this](size_t index, ListRow& row) {
+		row.setTitle(mResults[index].title);
+		row.setSubtitle(mResults[index].detail);
+	};
+	model.isEnabled = [this](size_t index) { return mResults[index].enabled; };
+	mList.setModel(std::move(model));
+	// The first result that can be chosen is current, so Enter chooses it at once.
+	mList.clearSelection();
+	for (size_t index = 0; index < mResults.size(); index++) {
+		if (!mResults[index].enabled) continue;
+		mList.select(index);
+		break;
 	}
-	mHighlighted = nextEnabled(-1, 1);
-	for (size_t index = 0; index < mRows.size(); index++)
-		mRows[index]->setHighlighted(long(index) == mHighlighted);
 
-	if (mRows.empty()) hideResults();
+	if (mResults.empty()) hideResults();
 	else showResults();
 }
 
 void SearchField::showResults() {
-	if (mRows.empty() || !ui()) return;
+	if (mResults.empty() || !ui()) return;
 
 	ui()->updateLayout();
 	const halnf width = std::max(windowRect().size.x, mMinimumResultsWidth);
@@ -131,24 +90,8 @@ void SearchField::hideResults() {
 	if (isShowingResults()) ui()->closePopup(mDropdown);
 }
 
-long SearchField::nextEnabled(long from, int step) const {
-	for (long index = from + step; index >= 0 && index < long(mRows.size()); index += step) {
-		if (mRows[size_t(index)]->result().enabled) return index;
-	}
-	return from >= 0 && from < long(mRows.size()) ? from : -1;
-}
-
-void SearchField::moveHighlight(int step) {
-	const long next = nextEnabled(mHighlighted, step);
-	if (next < 0) return;
-
-	if (mHighlighted >= 0) mRows[size_t(mHighlighted)]->setHighlighted(false);
-	mHighlighted = next;
-	mRows[size_t(mHighlighted)]->setHighlighted(true);
-}
-
 void SearchField::choose(size_t index) {
-	if (index >= mRows.size() || !mRows[index]->result().enabled) return;
+	if (index >= mResults.size() || !mResults[index].enabled) return;
 
 	hideResults();
 	if (mOnChosen) mOnChosen(index);
@@ -157,18 +100,13 @@ void SearchField::choose(size_t index) {
 void SearchField::filterDescendantEvent(Event& event) {
 	if (event.type() != Event::Type::KeyDown || !isShowingResults()) return;
 
-	const std::optional<Key> pressed = event.key();
-	if (!pressed) return;
-
-	switch (*pressed) {
-		case Key::Down: moveHighlight(1); break;
-		case Key::Up: moveHighlight(-1); break;
-		case Key::Enter:
-		case Key::KeypadEnter:
-			if (mHighlighted >= 0) choose(size_t(mHighlighted));
-			break;
-		case Key::Escape: hideResults(); break;
-		default: return;
+	// The field keeps the keyboard; the results list moves and chooses with the same keys as any list.
+	if (event.isKey(Key::Escape)) {
+		hideResults();
+		event.accept();
+		return;
 	}
-	event.accept();
+	const bool listKey = event.isKey(Key::Up) || event.isKey(Key::Down) || event.isKey(Key::Enter) ||
+											 event.isKey(Key::KeypadEnter) || event.isKey(Key::PageUp) || event.isKey(Key::PageDown);
+	if (listKey && mList.handleKey(event)) event.accept();
 }
diff --git a/Widgets/src/components/views/private/SettingsView.cpp b/Widgets/src/components/views/private/SettingsView.cpp
index 17efc79f..b684392e 100644
--- a/Widgets/src/components/views/private/SettingsView.cpp
+++ b/Widgets/src/components/views/private/SettingsView.cpp
@@ -10,10 +10,7 @@ using namespace tp;
 using namespace tp::ui;
 
 namespace {
-	constexpr halnf kRowHeightFactor = 1.6f;
-	constexpr halnf kChevronWidth = 24;
 	constexpr halnf kPageWidth = 760;
-	constexpr halnf kSwitchWidthFactor = 1.9f;
 	constexpr halnf kPagePadding = 16;
 
 	class SettingsSection : public Panel {
@@ -33,68 +30,20 @@ SettingsRow::SettingsRow(SettingsView& view, Menu& menu, const MenuItem& item) :
 	mMenu(menu),
 	mEntry(item.entry()) {
 	setDebugName("settings row: " + mEntry.text);
-	setSizing(AxisSizing::fill(), AxisSizing::fit());
+	setDensity(Density::Comfortable);
+	setMuted(mEntry.muted);
 	refresh();
 }
 
 void SettingsRow::refresh() {
 	if (mEntry.isEnabled) setEnabled(mEntry.isEnabled());
-	std::string text = mEntry.dynamicText ? mEntry.dynamicText() : mEntry.text;
-	if (text != mText) {
-		mText = std::move(text);
-		requestLayout();
-	}
+	setTitle(mEntry.dynamicText ? mEntry.dynamicText() : mEntry.text);
+	if (mEntry.kind == MenuEntry::Kind::Submenu) setTrailing(Trailing::chevron());
+	else if (mEntry.kind == MenuEntry::Kind::Toggle) setTrailing(Trailing::toggle(mEntry.isChecked && mEntry.isChecked()));
+	else if (!mEntry.shortcut.empty()) setTrailing(Trailing::textOf(mEntry.shortcut));
 	requestPaint();
 }
 
-Extent SettingsRow::measureContent(Axis axis, halnf) const {
-	const Metrics& metrics = theme().metrics;
-	if (axis == Axis::Vertical) return Extent::rigid(sizes::menuItemHeight * kRowHeightFactor);
-	return Extent::natural(
-		metrics.controlPadding.total(Axis::Horizontal) + textWidth(mText, metrics.fontSize) + kChevronWidth * 2
-	);
-}
-
-void SettingsRow::paint(Canvas& painter) {
-	const Theme& style = theme();
-	const RectF content = style.metrics.controlPadding.shrink(localRect());
-	RGBA textColor = isEffectivelyEnabled() ? style.palette.text : style.palette.disabledText;
-	if (mEntry.muted && isEffectivelyEnabled()) textColor = style.palette.mutedText;
-
-	painter.rect(localRect(), background(), style.metrics.cornerRadius);
-	painter.text(
-		mText, makeRect(content.pos.x, 0, content.size.x, size().y), TextStyle{ style.metrics.fontSize, textColor, TextAlign::leftCenter() }
-	);
-
-	const halnf middle = size().y / 2;
-	const halnf right = content.pos.x + content.size.x;
-	if (mEntry.kind == MenuEntry::Kind::Submenu) {
-		const Vec2F tip = { right - 4, middle };
-		painter.polyline({ tip + Vec2F(-5.0f, -7.0f), tip, tip + Vec2F(-5.0f, 7.0f) }, style.palette.mutedText, 2);
-		return;
-	}
-
-	if (mEntry.kind == MenuEntry::Kind::Toggle) {
-		const bool on = mEntry.isChecked && mEntry.isChecked();
-		const halnf height = style.metrics.indicatorSize;
-		const halnf width = height * kSwitchWidthFactor;
-		const RectF track = makeRect(right - width, middle - height / 2, width, height);
-		painter.rect(track, on ? style.palette.toggleOn : style.palette.track, height / 2);
-		const halnf knob = height / 2 - 3;
-		const Vec2F center = { on ? track.pos.x + width - height / 2 : track.pos.x + height / 2, middle };
-		painter.circle(center, knob, on ? style.palette.onToggle : style.palette.mutedText);
-		return;
-	}
-
-	if (!mEntry.shortcut.empty()) {
-		painter.text(
-			mEntry.shortcut,
-			makeRect(content.pos.x, 0, content.size.x, size().y),
-			TextStyle{ style.metrics.smallFontSize, style.palette.mutedText, TextAlign::rightCenter() }
-		);
-	}
-}
-
 void SettingsRow::onActivated() { mView.activated(mMenu, mEntry); }
 
 SettingsPage::SettingsPage(SettingsView& view, std::string title) :
@@ -104,15 +53,14 @@ SettingsPage::SettingsPage(SettingsView& view, std::string title) :
 }
 
 SettingsRow* SettingsPage::row(const std::string& text) const {
-	for (const auto& row : mRows)
-		if (row->text() == text) return row.get();
+	for (SettingsRow* row : mRows)
+		if (row->text() == text) return row;
 	return nullptr;
 }
 
 void SettingsPage::clear() {
+	// Removing the body's children destroys the sections it owns, and their rows with them.
 	clearContent();
-	for (const auto& section : mSections)
-		section->removeAllChildren();
 	mRows.clear();
 	mSections.clear();
 	mMenu = nullptr;
@@ -130,12 +78,10 @@ void SettingsPage::showMenu(Menu& menu) {
 			continue;
 		}
 		if (!section) {
-			mSections.push_back(std::make_unique<SettingsSection>());
-			section = mSections.back().get();
-			body().addChild(*section);
+			section = &body().emplaceChild<SettingsSection>();
+			mSections.push_back(section);
 		}
-		mRows.push_back(std::make_unique<SettingsRow>(mView, menu, *item));
-		section->addChild(*mRows.back());
+		mRows.push_back(&section->emplaceChild<SettingsRow>(mView, menu, *item));
 	}
 }
 
@@ -149,7 +95,7 @@ void SettingsPage::refresh() {
 }
 
 void SettingsPage::refreshRows() {
-	for (const auto& row : mRows)
+	for (SettingsRow* row : mRows)
 		row->refresh();
 }
 
diff --git a/Widgets/src/components/views/private/Views.cpp b/Widgets/src/components/views/private/Views.cpp
index 0b184c8c..ef3823aa 100644
--- a/Widgets/src/components/views/private/Views.cpp
+++ b/Widgets/src/components/views/private/Views.cpp
@@ -16,6 +16,8 @@ using namespace tp;
 using namespace tp::ui;
 
 namespace {
+	// Room left beside a revealed tab so the neighbouring tab peeks in and shows the strip scrolls further.
+	constexpr halnf kTabRevealMargin = 24;
 	constexpr halnf kTabBodyGap = 12;
 	constexpr halnf kCarouselBodyGap = 6;
 	constexpr halnf kCarouselHeaderInset = 6;
@@ -227,6 +229,13 @@ TabView::TabView(Style style) :
 	else mTabBar = std::make_unique<Panel>(Panel::Surface::None);
 	mTabBar->setSizing(AxisSizing::fit(), AxisSizing::fit());
 	mTabBar->emplaceLayout<RowLayout>(2).setPadding(Insets::symmetric(4, 2));
+	if (style == Style::Carousel) {
+		mStrip.setButtonFactory([](std::string text) { return std::make_unique<CarouselTabButton>(std::move(text)); });
+	}
+	mStrip.setOnIndexChanged([this]() {
+		if (mStrip.selectedIndex()) setCurrentIndex(*mStrip.selectedIndex());
+	});
+	mTabBar->addChild(mStrip);
 	mTabScroller.setSizing(AxisSizing::fill(), AxisSizing::fit());
 	mTabScroller.setWheelStep(40);
 	mTabScroller.setShowsScrollBar(false);
@@ -245,6 +254,9 @@ void TabView::setTabAlignment(TabAlignment alignment) {
 	mTabAlignment = alignment;
 	auto* row = dynamic_cast<RowLayout*>(mTabBar->layout());
 	if (row) row->setMainAlign(alignment == TabAlignment::Center ? MainAlign::Center : MainAlign::Start);
+	auto* strip = dynamic_cast<RowLayout*>(mStrip.layout());
+	if (strip) strip->setMainAlign(alignment == TabAlignment::Center ? MainAlign::Center : MainAlign::Start);
+	mStrip.setSizing(alignment == TabAlignment::Center ? AxisSizing::fill() : AxisSizing::fit(), AxisSizing::fit());
 	mTabBar->setSizing(alignment == TabAlignment::Center ? AxisSizing::fill() : AxisSizing::fit(), AxisSizing::fit());
 }
 
@@ -274,20 +286,8 @@ void TabView::buildCarouselHeader() {
 	addChild(mHeader);
 }
 
-std::unique_ptr<Button> TabView::makeTabButton(std::string title, size_t index) {
-	auto activate = [this, index]() { setCurrentIndex(index); };
-	std::unique_ptr<Button> button;
-	if (mStyle == Style::Carousel) button = std::make_unique<CarouselTabButton>(std::move(title), activate);
-	else button = std::make_unique<Button>(std::move(title), activate);
-	button->setStyle(Button::Style::Tab);
-	return button;
-}
-
 void TabView::addTab(std::string title, Widget& page) {
-	const size_t index = mTabs.size();
-
-	std::unique_ptr<Button> button = makeTabButton(std::move(title), index);
-	mTabBar->addChild(*button);
+	mStrip.addSegment(std::move(title), mTabs.size());
 
 	std::unique_ptr<Widget> slot;
 	if (mStyle == Style::Carousel) {
@@ -299,7 +299,7 @@ void TabView::addTab(std::string title, Widget& page) {
 		slot->addChild(page);
 	}
 
-	mTabs.push_back({ std::move(button), &page, std::move(slot) });
+	mTabs.push_back({ &page, std::move(slot) });
 	Widget& pageHolder = holder(mTabs.back());
 	pageHolder.setVisible(false);
 	mPageArea.addChild(pageHolder);
@@ -314,16 +314,14 @@ void TabView::removeTab(Widget& page) {
 
 	finishTransitions();
 	const long removedIndex = (long) (position - mTabs.begin());
-	mTabBar->removeChild(*position->button);
+	mStrip.removeSegmentAt((size_t) removedIndex);
+	for (size_t index = 0; index < mStrip.segmentCount(); index++)
+		mStrip.setSegmentValue(index, index);
 	mPageArea.removeChild(holder(*position));
 	if (position->slot) position->slot->removeChild(page);
 	page.setVisible(true);
 	mTabs.erase(position);
 
-	for (size_t index = 0; index < mTabs.size(); index++) {
-		mTabs[index].button->setOnActivate([this, index]() { setCurrentIndex(index); });
-	}
-
 	if (mTabs.empty()) {
 		mCurrent = -1;
 		return;
@@ -336,13 +334,9 @@ void TabView::removeTab(Widget& page) {
 
 void TabView::revealTab(size_t index) {
 	if (index >= mTabs.size() || !mTabScroller.isScrollable()) return;
-	const RectF tab = mTabs[index].button->rect();
-	const halnf view = mTabScroller.viewportLength();
-	const halnf offset = mTabScroller.offset();
-	const halnf start = tab.pos.x;
-	const halnf margin = 24;
-	if (start - margin < offset) mTabScroller.scrollTo(start - margin);
-	else if (start + tab.size.x + margin > offset + view) mTabScroller.scrollTo(start + tab.size.x + margin - view);
+	// The tab's rect in the tab bar, which is the scroller's content.
+	const RectF tab = translated(mStrip.segment(index).rect(), mStrip.rect().pos);
+	mTabScroller.revealRange(tab.pos.x, tab.size.x, kTabRevealMargin);
 }
 
 void TabView::setCurrentIndex(size_t index) {
@@ -419,8 +413,7 @@ void TabView::currentChanged(size_t index) {
 	if ((long) index == mCurrent) return;
 
 	mCurrent = (long) index;
-	for (size_t tab = 0; tab < mTabs.size(); tab++)
-		mTabs[tab].button->setSelected(tab == index);
+	mStrip.selectIndex(index);
 	revealTab(index);
 
 	if (mOnChanged) mOnChanged(index);
@@ -450,8 +443,8 @@ std::vector<TabView::Indicator> TabView::indicators() const {
 	const halnf fraction = position - base;
 	const size_t from = cyclicIndex((long) base);
 	const size_t to = cyclicIndex((long) base + 1);
-	const RectF fromRect = mTabs[from].button->rect();
-	const RectF toRect = mTabs[to].button->rect();
+	const RectF fromRect = translated(mStrip.segment(from).rect(), mStrip.rect().pos);
+	const RectF toRect = translated(mStrip.segment(to).rect(), mStrip.rect().pos);
 
 	if (fraction <= kPositionEpsilon) return { { fromRect, 1 } };
 	if (fraction >= 1 - kPositionEpsilon) return { { toRect, 1 } };
@@ -512,9 +505,9 @@ bool TabView::handleWheel(const Event& event) {
 	if (amount == 0 && event.modifiers().shift) amount = event.scrollDelta().y;
 	if (amount == 0) return false;
 
-	const bool mouseNotch = amount == std::round(amount);
-	if (mouseNotch) scrollBy(-std::lround(amount));
-	else pull(-amount * kPagesPerTrackpadUnit);
+	// A touchpad scrolls continuously and pulls the pages along; a wheel notch turns whole pages.
+	if (event.isTouchpadScroll()) pull(-amount * kPagesPerTrackpadUnit);
+	else scrollBy(amount < 0 ? 1 : -1);
 	return true;
 }
 
@@ -535,34 +528,33 @@ RGBA ColorWheel::color() const {
 
 Extent ColorWheel::measureContent(Axis, halnf) const { return { 80, 180, kUnbounded, 0 }; }
 
-void ColorWheel::onEvent(Event& event) {
-	switch (event.type()) {
-		case Event::Type::PointerDown:
-			if (event.button() != PointerButton::Left) return;
-			mDragTarget = targetAt(event.position());
-			if (mDragTarget == DragTarget::None) return;
-			ui()->capturePointer(*this);
-			pickAt(event.position());
-			event.accept();
-			break;
-
-		case Event::Type::PointerMove:
-			if (mDragTarget == DragTarget::None) return;
-			pickAt(event.position());
-			event.accept();
-			break;
-
-		case Event::Type::PointerUp:
-			if (mDragTarget == DragTarget::None) return;
-			mDragTarget = DragTarget::None;
-			ui()->releasePointer(*this);
-			event.accept();
-			break;
-
-		default: return;
+namespace {
+	// The pick interaction of the color pickers: a press picks where it lands (if it lands on a part), a router drag
+	// keeps picking, and the release ends it. Returns whether the event was handled.
+	template <typename Target, typename TargetAt, typename Pick>
+	bool followPick(Event& event, Target& target, TargetAt targetAt, Pick pick) {
+		if (event.type() == Event::Type::PointerDown && event.button() == PointerButton::Left) {
+			target = targetAt(event.position());
+			if (target == Target::None) return false;
+			pick(event.position());
+			return true;
+		}
+		const Dragged* drag = event.drag();
+		if (!drag || target == Target::None) return false;
+		if (drag->phase == DragPhase::Started || drag->phase == DragPhase::Moved) pick(event.position());
+		else target = Target::None;
+		return true;
 	}
 }
 
+void ColorWheel::onEvent(Event& event) {
+	const bool handled = followPick(
+		event, mDragTarget, [this](Vec2F point) { return targetAt(point); }, [this](Vec2F point) { pickAt(point); }
+	);
+	if (event.type() == Event::Type::PointerUp && !(ui() && ui()->isDragging())) mDragTarget = DragTarget::None;
+	if (handled) event.accept();
+}
+
 void ColorWheel::paint(Canvas& painter) {
 	constexpr int4 kHueSegments = 6;
 	const RectF rect = wheelRect();
@@ -662,35 +654,20 @@ Vec2F ColorSquare::windowPointForHue(halnf hueRadians) const {
 	return windowRect().pos + strip.pos + Vec2F{ strip.size.x * hueRadians / kTwoPi, strip.size.y / 2 };
 }
 
-void ColorSquare::onEvent(Event& event) {
-	switch (event.type()) {
-		case Event::Type::PointerDown:
-			if (event.button() != PointerButton::Left) return;
-			if (contains(makeRect(squareRect().pos - Vec2F{ 1, 1 }, squareRect().size + Vec2F{ 2, 2 }), event.position()))
-				mDragTarget = DragTarget::Square;
-			else if (contains(makeRect(hueRect().pos - Vec2F{ 1, 1 }, hueRect().size + Vec2F{ 2, 2 }), event.position()))
-				mDragTarget = DragTarget::Hue;
-			else return;
-			ui()->capturePointer(*this);
-			pickAt(event.position());
-			event.accept();
-			break;
-
-		case Event::Type::PointerMove:
-			if (mDragTarget == DragTarget::None) return;
-			pickAt(event.position());
-			event.accept();
-			break;
-
-		case Event::Type::PointerUp:
-			if (mDragTarget == DragTarget::None) return;
-			mDragTarget = DragTarget::None;
-			ui()->releasePointer(*this);
-			event.accept();
-			break;
-
-		default: return;
+ColorSquare::DragTarget ColorSquare::targetAt(Vec2F localPoint) const {
+	if (contains(makeRect(squareRect().pos - Vec2F{ 1, 1 }, squareRect().size + Vec2F{ 2, 2 }), localPoint)) {
+		return DragTarget::Square;
 	}
+	if (contains(makeRect(hueRect().pos - Vec2F{ 1, 1 }, hueRect().size + Vec2F{ 2, 2 }), localPoint)) return DragTarget::Hue;
+	return DragTarget::None;
+}
+
+void ColorSquare::onEvent(Event& event) {
+	const bool handled = followPick(
+		event, mDragTarget, [this](Vec2F point) { return targetAt(point); }, [this](Vec2F point) { pickAt(point); }
+	);
+	if (event.type() == Event::Type::PointerUp && !(ui() && ui()->isDragging())) mDragTarget = DragTarget::None;
+	if (handled) event.accept();
 }
 
 void ColorSquare::pickAt(Vec2F localPoint) {
diff --git a/Widgets/src/components/views/public/ColorPicker.hpp b/Widgets/src/components/views/public/ColorPicker.hpp
index af5d7075..acf4cb63 100644
--- a/Widgets/src/components/views/public/ColorPicker.hpp
+++ b/Widgets/src/components/views/public/ColorPicker.hpp
@@ -1,5 +1,7 @@
 #pragma once
 
+#include "InteractionVisual.hpp"
+
 #include "Containers.hpp"
 #include "Control.hpp"
 #include "Menus.hpp"
@@ -28,11 +30,15 @@ namespace tp::ui {
 	protected:
 		[[nodiscard]] Extent measureContent(Axis axis, halnf crossLength) const override;
 		void paint(Canvas& painter) override;
+		void onHoverChanged() override;
+		void onTick(halnf deltaMs) override;
 
 	private:
 		Kind mKind;
 		RGBA mColor;
 		bool mSelected = false;
+		// The hover outline of a swatch fades in and out.
+		InteractionVisual mVisual{ *this };
 	};
 
 	class ColorPickerButton : public PopupButton {
@@ -78,7 +84,8 @@ namespace tp::ui {
 
 		Panel mPopup{ Panel::Surface::Raised };
 		Widget mGrid;
-		std::vector<std::unique_ptr<ColorCell>> mSwatches;
+		// The swatches in palette order; the grid owns them.
+		std::vector<ColorCell*> mSwatches;
 		ColorCell mAddCell{ ColorCell::Kind::Add };
 
 		Panel mNewColorPopup{ Panel::Surface::Raised };
diff --git a/Widgets/src/components/views/public/ListRow.hpp b/Widgets/src/components/views/public/ListRow.hpp
new file mode 100644
index 00000000..463b38af
--- /dev/null
+++ b/Widgets/src/components/views/public/ListRow.hpp
@@ -0,0 +1,97 @@
+#pragma once
+
+#include "CanvasTypes.hpp"
+#include "Control.hpp"
+#include "Glyph.hpp"
+
+#include <optional>
+#include <string>
+#include <variant>
+
+namespace tp::ui {
+
+	// One row of a list: a leading mark, a title with an optional subtitle, and trailing content. File rows, search
+	// results, menu items, settings rows and application lists are configurations of it, so they share one size, one
+	// hover/selection look and one set of offsets.
+	class ListRow : public Control {
+	public:
+		// What sits before the title.
+		struct Leading {
+			enum class Kind { None, Space, Glyph, Check, Image, Swatch };
+
+			Kind kind = Kind::None;
+			Glyph glyph = Glyph::File;
+			ImageHandle image;
+			RGBA color;
+
+			static Leading none() { return {}; }
+			// Empty room of a mark, so titles line up with rows that have one (an unchecked menu toggle).
+			static Leading space() { return { Kind::Space }; }
+			static Leading glyphOf(Glyph glyph) { return { Kind::Glyph, glyph }; }
+			static Leading check() { return { Kind::Check }; }
+			static Leading imageOf(ImageHandle image) { return { Kind::Image, Glyph::File, image }; }
+			static Leading swatch(RGBA color) { return { Kind::Swatch, Glyph::File, {}, color }; }
+		};
+
+		// What sits after the title.
+		struct Trailing {
+			enum class Kind { None, Text, Chevron, Switch };
+
+			Kind kind = Kind::None;
+			std::string text;
+			bool on = false;
+
+			static Trailing none() { return {}; }
+			// Muted right-aligned text: a size, a shortcut, a count.
+			static Trailing textOf(std::string text) { return { Kind::Text, std::move(text) }; }
+			// A chevron: the row opens something (a submenu, a page).
+			static Trailing chevron() { return { Kind::Chevron }; }
+			static Trailing toggle(bool on) { return { Kind::Switch, {}, on }; }
+		};
+
+		// How dense the row is: menu rows are compact, list and settings rows taller.
+		enum class Density { Compact, Regular, Comfortable };
+
+		explicit ListRow(std::string title = {});
+
+		void setTitle(std::string title);
+		[[nodiscard]] const std::string& title() const { return mTitle; }
+		void setSubtitle(std::string subtitle);
+		[[nodiscard]] const std::string& subtitle() const { return mSubtitle; }
+		void setLeading(Leading leading);
+		[[nodiscard]] const Leading& leading() const { return mLeading; }
+		void setTrailing(Trailing trailing);
+		[[nodiscard]] const Trailing& trailing() const { return mTrailing; }
+		void setDensity(Density density);
+		// Muted rows show their title in the muted text color (hidden files, secondary entries).
+		void setMuted(bool muted);
+
+		// Selected rows keep the selection color; highlighted rows show the keyboard-current or hovered color.
+		void setSelected(bool selected);
+		[[nodiscard]] bool isSelected() const { return mSelected; }
+		void setHighlighted(bool highlighted);
+		[[nodiscard]] bool isHighlighted() const { return mHighlighted; }
+
+		[[nodiscard]] static halnf heightFor(Density density, bool hasSubtitle);
+
+	protected:
+		[[nodiscard]] Extent measureContent(Axis axis, halnf crossLength) const override;
+		void paint(Canvas& painter) override;
+		[[nodiscard]] RGBA backgroundTarget() const override;
+
+	private:
+		[[nodiscard]] halnf leadingWidth() const;
+		[[nodiscard]] halnf trailingWidth() const;
+		void paintLeading(Canvas& painter, const RectF& box, const RGBA& color) const;
+		void paintTrailing(Canvas& painter, const RectF& box) const;
+
+		std::string mTitle;
+		std::string mSubtitle;
+		Leading mLeading;
+		Trailing mTrailing;
+		Density mDensity = Density::Regular;
+		bool mMuted = false;
+		bool mSelected = false;
+		bool mHighlighted = false;
+	};
+}
diff --git a/Widgets/src/components/views/public/ListView.hpp b/Widgets/src/components/views/public/ListView.hpp
new file mode 100644
index 00000000..6cd42474
--- /dev/null
+++ b/Widgets/src/components/views/public/ListView.hpp
@@ -0,0 +1,90 @@
+#pragma once
+
+#include "Containers.hpp"
+#include "Label.hpp"
+#include "ListNavigator.hpp"
+#include "ListRow.hpp"
+#include "SelectionModel.hpp"
+
+#include <functional>
+#include <optional>
+#include <string>
+#include <vector>
+
+namespace tp::ui {
+
+	// A scrolling list of rows over any number of items. The owner says how many items there are and fills a ListRow for
+	// each; the list keeps the rows (reusing them when the items change), the selection, the keyboard (Up/Down, Home/End,
+	// PageUp/PageDown, Enter activates, Space toggles in multiple mode, typing jumps to a title) and an empty state.
+	//   list.setModel({ count, [](size_t index, ListRow& row) { row.setTitle(...); } });
+	class ListView : public Widget {
+	public:
+		struct Model {
+			size_t count = 0;
+			// Fills a row for an item; called for every item when the model is set and on refresh().
+			std::function<void(size_t index, ListRow& row)> fill;
+			// Whether an item can be chosen; all can when unset.
+			std::function<bool(size_t index)> isEnabled;
+		};
+
+		using Mode = SelectionModel<size_t>::Mode;
+
+		explicit ListView(Mode mode = Mode::Single);
+
+		void setModel(Model model);
+		// Fills every row again from the model, keeping the selection.
+		void refresh();
+		[[nodiscard]] size_t count() const { return mModel.count; }
+		[[nodiscard]] ListRow& row(size_t index) { return *mRows[index]; }
+
+		void setEmptyText(std::string text) { mEmpty.setText(std::move(text)); }
+		[[nodiscard]] Label& emptyLabel() { return mEmpty; }
+		void setDensity(ListRow::Density density);
+		void setShowsScrollBar(bool shows) { mScroll.setShowsScrollBar(shows); }
+		// Whether the list grows with its rows (a popup) or fills its parent and scrolls (a panel).
+		void setFitsContent(bool fits);
+
+		[[nodiscard]] SelectionModel<size_t>& selection() { return mSelection; }
+		[[nodiscard]] std::optional<size_t> current() const { return mSelection.current(); }
+		// Makes an item current and selected and scrolls it into view.
+		void select(size_t index);
+		void clearSelection() { mSelection.clear(); }
+
+		// Called when an item is activated: a click, Enter, or a double click when activation needs one.
+		void setOnActivated(std::function<void(size_t index)> callback) { mOnActivated = std::move(callback); }
+		void setOnSelectionChanged(std::function<void()> callback) { mOnSelectionChanged = std::move(callback); }
+		// With a single-click list (menus, results) a click activates; otherwise a click selects and a double click opens.
+		void setActivatesOnClick(bool activates) { mActivatesOnClick = activates; }
+		// The list handles navigation keys even when another widget (a search field) keeps the keyboard.
+		bool handleKey(Event& event);
+
+		[[nodiscard]] ScrollView& scroller() { return mScroll; }
+
+	protected:
+		[[nodiscard]] bool acceptsKeyboardFocus() const override { return true; }
+		void onEvent(Event& event) override;
+		void filterDescendantEvent(Event& event) override;
+
+	private:
+		void rebuildRows();
+		void refreshRowStates();
+		void rowClicked(size_t index, const Event& event);
+		void activate(size_t index);
+		void revealCurrent();
+		[[nodiscard]] ListNavigator::Items navigationItems() const;
+		[[nodiscard]] std::vector<size_t> order() const;
+		[[nodiscard]] size_t pageSize() const;
+
+		Model mModel;
+		SelectionModel<size_t> mSelection;
+		ListNavigator mNavigator;
+		ScrollView mScroll;
+		Widget mColumn;
+		Label mEmpty;
+		std::vector<ListRow*> mRows;
+		ListRow::Density mDensity = ListRow::Density::Regular;
+		bool mActivatesOnClick = false;
+		std::function<void(size_t)> mOnActivated;
+		std::function<void()> mOnSelectionChanged;
+	};
+}
diff --git a/Widgets/src/components/views/public/PageStack.hpp b/Widgets/src/components/views/public/PageStack.hpp
index 467622a2..da9e0ac6 100644
--- a/Widgets/src/components/views/public/PageStack.hpp
+++ b/Widgets/src/components/views/public/PageStack.hpp
@@ -3,6 +3,7 @@
 #include "Button.hpp"
 #include "Containers.hpp"
 #include "Label.hpp"
+#include "TitledPanel.hpp"
 
 #include <functional>
 #include <memory>
@@ -13,35 +14,24 @@ namespace tp::ui {
 
 	class PageStack;
 
-	class StackPage : public Widget {
+	// One page of a PageStack: a titled panel whose header leads with a back button and whose body scrolls.
+	class StackPage : public TitledPanel {
 	public:
 		StackPage(PageStack& stack, std::string title);
 
-		[[nodiscard]] const std::string& title() const { return mTitle.text(); }
-		void setTitle(std::string title) { mTitle.setText(std::move(title)); }
-		[[nodiscard]] Widget& header() { return mHeader; }
-		[[nodiscard]] Widget& body() { return mBody; }
 		[[nodiscard]] Button& backButton() { return mBack; }
-		[[nodiscard]] const Label& titleLabel() const { return mTitle; }
 
 		void setMaximumWidth(halnf width);
-		void setContent(Widget& content);
-		void setScrollsContent(bool scrolls);
-		[[nodiscard]] bool scrollsContent() const { return mScrollsContent; }
+		void setScrollsContent(bool scrolls) { setScrollsBody(scrolls); }
+		[[nodiscard]] bool scrollsContent() const { return scrollsBody(); }
+		// Shows a widget in the header in place of the title (a search field); null brings the title back.
 		void setHeaderContent(Widget* content);
-		void clearContent() { mBody.removeAllChildren(); }
+		void clearContent() { body().removeAllChildren(); }
 
 	private:
-		[[nodiscard]] AxisSizing horizontalSizing() const;
-
 		PageStack& mStack;
-		halnf mMaximumWidth = 0;
-		bool mScrollsContent = true;
-		Widget mHeader;
 		Button mBack{ "Back" };
-		Label mTitle;
-		ScrollView mScroll;
-		Widget mBody;
+		Widget* mHeaderContent = nullptr;
 	};
 
 	class PageStack : public Panel {
diff --git a/Widgets/src/components/views/public/PropertyList.hpp b/Widgets/src/components/views/public/PropertyList.hpp
new file mode 100644
index 00000000..80032192
--- /dev/null
+++ b/Widgets/src/components/views/public/PropertyList.hpp
@@ -0,0 +1,77 @@
+#pragma once
+
+#include "Label.hpp"
+#include "Menus.hpp"
+#include "Slider.hpp"
+#include "TextField.hpp"
+#include "Toggles.hpp"
+
+#include <functional>
+#include <memory>
+#include <string>
+#include <vector>
+
+namespace tp::ui {
+
+	// A form over a model: rows of a name and an editor, each bound once to a getter and a setter. refresh() pulls every
+	// value from the model into its editor; editing pushes the value back through its setter. The model stays the
+	// owner of the data, and pulling never runs a setter.
+	//   form.addValue("Album", [&] { return track.album; });
+	//   form.addSlider("Size", 1, 100, [&] { return brush.size; }, [&](halnf size) { brush.size = size; });
+	//   form.refresh();
+	class PropertyList : public Widget {
+	public:
+		using TextGetter = std::function<std::string()>;
+		using NumberGetter = std::function<halnf()>;
+		using NumberSetter = std::function<void(halnf)>;
+
+		struct SliderOptions {
+			std::function<std::string(halnf)> format;
+			halnf step = 0;
+			Slider::Scale scale = Slider::Scale::Linear;
+		};
+
+		PropertyList();
+
+		// A read-only "name: value" row.
+		Label& addValue(std::string name, TextGetter value);
+		LabeledSlider& addSlider(std::string name, halnf minimum, halnf maximum, NumberGetter get, NumberSetter set);
+		LabeledSlider& addSlider(
+			std::string name, halnf minimum, halnf maximum, NumberGetter get, NumberSetter set, SliderOptions options
+		);
+		Checkbox& addCheckbox(std::string name, std::function<bool()> get, std::function<void(bool)> set);
+		Dropdown& addChoice(std::string name, std::vector<std::string> options, std::function<long()> get, std::function<void(long)> set);
+		// A text editor that pushes its text when it is committed (Enter or focus leaving).
+		TextField& addText(std::string name, TextGetter get, std::function<void(const std::string&)> set);
+		// A row with any editor; refresh calls pull, the editor's own callbacks push.
+		Widget& addCustom(std::string name, Widget& editor, std::function<void()> pull = {});
+		void addSeparator();
+
+		// Pulls every value from the model into its editor.
+		void refresh();
+		// Called after any edit made through the list (to refresh summaries, previews or other rows).
+		void setOnEdited(std::function<void()> callback) { mOnEdited = std::move(callback); }
+
+		[[nodiscard]] size_t rowCount() const { return mRows.size(); }
+		[[nodiscard]] const std::string& name(size_t row) const { return mRows[row].name; }
+		[[nodiscard]] Widget& editor(size_t row) const { return *mRows[row].editor; }
+		// The row with a name, or null.
+		[[nodiscard]] Widget* editor(const std::string& name) const;
+
+	private:
+		struct Row {
+			std::string name;
+			Widget* editor = nullptr;
+			std::function<void()> pull;
+		};
+
+		void addName(const std::string& name, bool labelled);
+		Widget& bind(std::string name, Widget& editor, std::function<void()> pull);
+		void edited();
+
+		std::vector<Row> mRows;
+		// Pulling sets editors, which call their change callbacks; those must not write the value back.
+		bool mPulling = false;
+		std::function<void()> mOnEdited;
+	};
+}
diff --git a/Widgets/src/components/views/public/ReorderableList.hpp b/Widgets/src/components/views/public/ReorderableList.hpp
index 5bc52717..506a81cb 100644
--- a/Widgets/src/components/views/public/ReorderableList.hpp
+++ b/Widgets/src/components/views/public/ReorderableList.hpp
@@ -1,18 +1,24 @@
 #pragma once
 
+#include "ReorderSession.hpp"
 #include "Widget.hpp"
 
 #include <functional>
+#include <optional>
 #include <vector>
 
 namespace tp::ui {
 
+	class Viewport;
+
+	// A column of items the user can reorder by dragging (from a grip, or anywhere after a long press). The lifted item
+	// follows the pointer with the theme elevation, the others make room by the ReorderSession midpoint rule, the
+	// nearest scroller scrolls when the pointer nears its edge, and the item glides into its slot when dropped.
 	class ReorderableList : public Widget {
 	public:
 		enum class DragMode { Grip, LongPress, None };
 
 		static constexpr halnf kGripWidth = 14;
-		static constexpr halnf kDragThreshold = 5;
 
 		explicit ReorderableList(halnf gap = 2);
 
@@ -31,11 +37,11 @@ namespace tp::ui {
 		}
 		void setDragMode(DragMode mode);
 		[[nodiscard]] DragMode dragMode() const { return mDragMode; }
-		[[nodiscard]] long dropTarget() const { return mDragging ? mDropTarget : -1; }
+		[[nodiscard]] long dropTarget() const { return isDragging() ? mDropTarget : -1; }
 
-		[[nodiscard]] bool isDragging() const { return mDragging; }
-		[[nodiscard]] long draggedIndex() const { return mDragging ? (long) mDragged : -1; }
-		[[nodiscard]] long dropIndex() const { return mDragging ? (long) mDrop : -1; }
+		[[nodiscard]] bool isDragging() const { return mSession.has_value(); }
+		[[nodiscard]] long draggedIndex() const { return isDragging() ? (long) mSession->origin().index : -1; }
+		[[nodiscard]] long dropIndex() const { return isDragging() ? (long) mDrop : -1; }
 		[[nodiscard]] RectF gripRect(size_t index) const;
 
 		void cancelDrag();
@@ -44,30 +50,33 @@ namespace tp::ui {
 		void onEvent(Event& event) override;
 		void onHoverChanged() override;
 		void filterDescendantEvent(Event& event) override;
+		void onTick(halnf deltaMs) override;
 		void paint(Canvas& painter) override;
 		[[nodiscard]] const Widget* raisedChild() const override;
 		void paintRaisedBackdrop(Canvas& painter, const RectF& childRect) override;
 		[[nodiscard]] bool hitTest(Vec2F localPoint) const override;
-		[[nodiscard]] bool acceptsKeyboardFocus() const override { return mDragging; }
+		[[nodiscard]] bool acceptsDrag(PointerButton button) const override;
+		[[nodiscard]] bool acceptsKeyboardFocus() const override { return isDragging(); }
 
 	private:
 		class ListLayout;
 		friend class ListLayout;
 
-		void handlePointer(Event& event);
+		void handlePress(Event& event);
+		void handleDrag(Event& event);
 		void updateGripHover(Vec2F localPoint);
-		void paintGrip(Canvas& painter, const RectF& grip, const RGBA& color) const;
 		[[nodiscard]] RectF gripRectFor(const RectF& row) const;
 		[[nodiscard]] bool isOnGrip(Vec2F localPoint, size_t index) const;
 		[[nodiscard]] bool hasNestedListAround(const Widget* target) const;
-		void beginDrag(Vec2F windowPoint);
+		void beginDrag();
 		void updateDrag(Vec2F windowPoint);
 		void finishDrag();
 		void endDragging();
 		[[nodiscard]] long itemIndexAt(Vec2F localPoint) const;
-		[[nodiscard]] size_t slotFor(halnf draggedTop, halnf draggedBottom) const;
+		[[nodiscard]] ReorderLane laneWithoutDragged() const;
 		[[nodiscard]] halnf itemHeight(size_t index) const;
 		[[nodiscard]] long dropTargetAt(halnf pointerY) const;
+		[[nodiscard]] Viewport* scroller() const;
 		[[nodiscard]] bool usesGrips() const { return mDragMode == DragMode::Grip; }
 		[[nodiscard]] halnf gripWidth() const { return usesGrips() ? kGripWidth : 0; }
 
@@ -77,22 +86,21 @@ namespace tp::ui {
 		std::function<void(size_t, size_t)> mOnDroppedOnto;
 		std::function<bool(size_t, size_t)> mCanAcceptDrop;
 		std::function<void(size_t)> mOnHeld;
-		bool mHeld = false;
 		DragMode mDragMode = DragMode::Grip;
-		long mDropTarget = -1;
 
-		bool mPressed = false;
-		bool mDragging = false;
+		// The press that may become a drag: which item, and whether it was on the grip or held long enough.
+		std::optional<size_t> mPressedIndex;
 		bool mPressedOnGrip = false;
-		size_t mPressedIndex = 0;
-		size_t mDragged = 0;
-		size_t mDrop = 0;
-		Vec2F mPressPoint = { 0, 0 };
-		halnf mGrabOffset = 0;
+		bool mHeld = false;
 		halnf mPressLocalY = 0;
-		halnf mListHeight = 0;
-		Widget* mFocusBeforeDrag = nullptr;
+
+		std::optional<ReorderSession> mSession;
+		size_t mDrop = 0;
+		long mDropTarget = -1;
 		halnf mDragY = 0;
+		halnf mListHeight = 0;
+		Vec2F mPointer = { 0, 0 };
+		Widget* mFocusBeforeDrag = nullptr;
 		long mHoveredGrip = -1;
 	};
 }
diff --git a/Widgets/src/components/views/public/SearchField.hpp b/Widgets/src/components/views/public/SearchField.hpp
index 2b7b9dc3..46aeae5b 100644
--- a/Widgets/src/components/views/public/SearchField.hpp
+++ b/Widgets/src/components/views/public/SearchField.hpp
@@ -1,7 +1,7 @@
 #pragma once
 
 #include "Containers.hpp"
-#include "Control.hpp"
+#include "ListView.hpp"
 #include "TextField.hpp"
 
 #include <functional>
@@ -17,29 +17,6 @@ namespace tp::ui {
 		bool enabled = true;
 	};
 
-	class SearchField;
-
-	class SearchResultRow : public Control {
-	public:
-		SearchResultRow(SearchField& field, size_t index, SearchResult result);
-
-		[[nodiscard]] const SearchResult& result() const { return mResult; }
-		void setHighlighted(bool highlighted);
-		[[nodiscard]] bool isHighlighted() const { return mHighlighted; }
-
-	protected:
-		[[nodiscard]] Extent measureContent(Axis axis, halnf crossLength) const override;
-		void paint(Canvas& painter) override;
-		void onActivated() override;
-		[[nodiscard]] RGBA backgroundTarget() const override;
-
-	private:
-		SearchField& mField;
-		size_t mIndex;
-		SearchResult mResult;
-		bool mHighlighted = false;
-	};
-
 	class SearchField : public Widget {
 	public:
 		static constexpr size_t kDefaultMaximumResults = 8;
@@ -56,8 +33,12 @@ namespace tp::ui {
 
 		[[nodiscard]] TextField& input() { return mInput; }
 		[[nodiscard]] bool isShowingResults() const;
-		[[nodiscard]] const std::vector<std::unique_ptr<SearchResultRow>>& rows() const { return mRows; }
-		[[nodiscard]] long highlighted() const { return mHighlighted; }
+		[[nodiscard]] const std::vector<SearchResult>& results() const { return mResults; }
+		[[nodiscard]] const Panel& resultsPanel() const { return mDropdown; }
+		// The row showing a result, for tests and custom looks.
+		[[nodiscard]] ListRow& row(size_t index) { return mList.row(index); }
+		// The keyboard-current result, or -1.
+		[[nodiscard]] long highlighted() const { return mList.current() ? (long) *mList.current() : -1; }
 
 		void setText(const std::string& text);
 		void showResults();
@@ -68,20 +49,17 @@ namespace tp::ui {
 		void filterDescendantEvent(Event& event) override;
 
 	private:
-		friend class SearchResultRow;
-
 		void refreshResults();
-		void moveHighlight(int step);
 		void choose(size_t index);
-		[[nodiscard]] long nextEnabled(long from, int step) const;
 
 		TextField mInput;
+		// The results popup: a list that keeps no keyboard focus, so typing continues in the field.
 		Panel mDropdown{ Panel::Surface::Raised };
-		std::vector<std::unique_ptr<SearchResultRow>> mRows;
+		ListView mList;
+		std::vector<SearchResult> mResults;
 		std::function<std::vector<SearchResult>(const std::string&)> mQuery;
 		std::function<void(size_t)> mOnChosen;
 		size_t mMaximumResults = kDefaultMaximumResults;
 		halnf mMinimumResultsWidth = 0;
-		long mHighlighted = -1;
 	};
 }
diff --git a/Widgets/src/components/views/public/SettingsView.hpp b/Widgets/src/components/views/public/SettingsView.hpp
index 1db863f9..7419b644 100644
--- a/Widgets/src/components/views/public/SettingsView.hpp
+++ b/Widgets/src/components/views/public/SettingsView.hpp
@@ -15,24 +15,23 @@ namespace tp::ui {
 
 	class SettingsView;
 
-	class SettingsRow : public Control {
+	// One menu entry shown as a settings row: a comfortable list row with a chevron for a submenu, a switch for a toggle
+	// and the shortcut as trailing text.
+	class SettingsRow : public ListRow {
 	public:
 		SettingsRow(SettingsView& view, Menu& menu, const MenuItem& item);
 
 		[[nodiscard]] const MenuEntry& entry() const { return mEntry; }
-		[[nodiscard]] const std::string& text() const { return mText; }
+		[[nodiscard]] const std::string& text() const { return title(); }
 		void refresh();
 
 	protected:
-		[[nodiscard]] Extent measureContent(Axis axis, halnf crossLength) const override;
-		void paint(Canvas& painter) override;
 		void onActivated() override;
 
 	private:
 		SettingsView& mView;
 		Menu& mMenu;
 		const MenuEntry& mEntry;
-		std::string mText;
 	};
 
 	class SettingsPage : public StackPage {
@@ -40,7 +39,7 @@ namespace tp::ui {
 		SettingsPage(SettingsView& view, std::string title);
 
 		[[nodiscard]] Menu* menu() const { return mMenu; }
-		[[nodiscard]] const std::vector<std::unique_ptr<SettingsRow>>& rows() const { return mRows; }
+		[[nodiscard]] const std::vector<SettingsRow*>& rows() const { return mRows; }
 		[[nodiscard]] SettingsRow* row(const std::string& text) const;
 
 		void showMenu(Menu& menu);
@@ -53,8 +52,9 @@ namespace tp::ui {
 
 		SettingsView& mView;
 		Menu* mMenu = nullptr;
-		std::vector<std::unique_ptr<SettingsRow>> mRows;
-		std::vector<std::unique_ptr<Widget>> mSections;
+		// The rows in order; the sections own them, and the page body owns the sections.
+		std::vector<SettingsRow*> mRows;
+		std::vector<Widget*> mSections;
 	};
 
 	class SettingsView : public PageStack {
diff --git a/Widgets/src/components/views/public/Views.hpp b/Widgets/src/components/views/public/Views.hpp
index 3b287f37..fde36c16 100644
--- a/Widgets/src/components/views/public/Views.hpp
+++ b/Widgets/src/components/views/public/Views.hpp
@@ -2,6 +2,7 @@
 
 #include "Animation.hpp"
 #include "Button.hpp"
+#include "SegmentedControl.hpp"
 #include "Containers.hpp"
 #include "ResizeHandle.hpp"
 #include "ScrollPhysics.hpp"
@@ -60,7 +61,8 @@ namespace tp::ui {
 		void setCurrentIndex(size_t index);
 		[[nodiscard]] long currentIndex() const { return mCurrent; }
 		[[nodiscard]] size_t tabCount() const { return mTabs.size(); }
-		[[nodiscard]] Button& tabButton(size_t index) { return *mTabs[index].button; }
+		[[nodiscard]] Button& tabButton(size_t index) { return mStrip.segment(index); }
+		[[nodiscard]] SegmentedControl<size_t>& tabStrip() { return mStrip; }
 		[[nodiscard]] ScrollView& tabScroller() { return mTabScroller; }
 		void revealTab(size_t index);
 
@@ -92,7 +94,6 @@ namespace tp::ui {
 		class CarouselTabButton;
 
 		struct Tab {
-			std::unique_ptr<Button> button;
 			Widget* page;
 			std::unique_ptr<Widget> slot;
 		};
@@ -109,7 +110,6 @@ namespace tp::ui {
 
 		void buildTabsHeader();
 		void buildCarouselHeader();
-		[[nodiscard]] std::unique_ptr<Button> makeTabButton(std::string title, size_t index);
 		[[nodiscard]] Widget& holder(const Tab& tab) const { return tab.slot ? *tab.slot : *tab.page; }
 		[[nodiscard]] size_t cyclicIndex(long index) const;
 		[[nodiscard]] bool slides() const { return mStyle == Style::Carousel && ui() != nullptr; }
@@ -126,10 +126,12 @@ namespace tp::ui {
 		Style mStyle;
 		TabAlignment mTabAlignment = TabAlignment::Start;
 		std::unique_ptr<Panel> mTabBar;
+		// The tab buttons: one segment per tab, its value the tab's index (renumbered when a tab is removed).
+		SegmentedControl<size_t> mStrip;
 		ScrollView mTabScroller{ Axis::Horizontal };
 		Widget mHeader;
-		GlyphButton mPrevious{ GlyphButton::Glyph::Previous };
-		GlyphButton mNext{ GlyphButton::Glyph::Next };
+		GlyphButton mPrevious{ Glyph::ChevronLeft };
+		GlyphButton mNext{ Glyph::ChevronRight };
 		Panel mPageArea;
 		std::vector<Tab> mTabs;
 		long mCurrent = -1;
@@ -194,11 +196,13 @@ namespace tp::ui {
 	protected:
 		[[nodiscard]] Extent measureContent(Axis axis, halnf crossLength) const override;
 		void onEvent(Event& event) override;
+		[[nodiscard]] bool acceptsDrag(PointerButton button) const override { return button == PointerButton::Left; }
 		void paint(Canvas& painter) override;
 
 	private:
 		enum class DragTarget { None, Square, Hue };
 
+		[[nodiscard]] DragTarget targetAt(Vec2F localPoint) const;
 		void pickAt(Vec2F localPoint);
 
 		HSV mHsv;
@@ -222,6 +226,7 @@ namespace tp::ui {
 	protected:
 		[[nodiscard]] Extent measureContent(Axis axis, halnf crossLength) const override;
 		void onEvent(Event& event) override;
+		[[nodiscard]] bool acceptsDrag(PointerButton button) const override { return button == PointerButton::Left; }
 		void paint(Canvas& painter) override;
 
 	private:
diff --git a/Widgets/src/components/views/tests/ListViewTests.cpp b/Widgets/src/components/views/tests/ListViewTests.cpp
new file mode 100644
index 00000000..fa0c4cdc
--- /dev/null
+++ b/Widgets/src/components/views/tests/ListViewTests.cpp
@@ -0,0 +1,191 @@
+#include "ListView.hpp"
+#include "BoxLayout.hpp"
+#include "StackLayout.hpp"
+#include "Ui.hpp"
+#include "UiDriver.hpp"
+
+#include "UnitTest++/UnitTest++.h"
+
+#include <string>
+#include <vector>
+
+using namespace tp;
+using namespace tp::ui;
+using namespace tp::ui::testing;
+
+namespace {
+	const std::vector<std::string> kNames = { "Alpha", "Bravo", "Charlie", "Delta", "Echo", "Foxtrot", "Golf", "Hotel" };
+
+	struct ListScene {
+		Widget root;
+		ListView list;
+		std::vector<std::string> names = kNames;
+		std::vector<size_t> activated;
+
+		explicit ListScene(ListView::Mode mode = ListView::Mode::Single) :
+			list(mode) {
+			root.emplaceLayout<StackLayout>();
+			setNames(names);
+			list.setOnActivated([this](size_t index) { activated.push_back(index); });
+			root.addChild(list);
+		}
+
+		void setNames(std::vector<std::string> next, std::function<bool(size_t)> isEnabled = {}) {
+			names = std::move(next);
+			list.setModel({ names.size(), [this](size_t index, ListRow& row) { row.setTitle(names[index]); }, std::move(isEnabled) });
+		}
+	};
+}
+
+SUITE(ListView) {
+	TEST(RowsAreFilledFromTheModelAndReused) {
+		ListScene scene;
+		UiDriver driver(scene.root, { 300, 400 });
+		REQUIRE CHECK_EQUAL(kNames.size(), scene.list.count());
+		CHECK_EQUAL(std::string("Charlie"), scene.list.row(2).title());
+		ListRow* first = &scene.list.row(0);
+
+		scene.setNames({ "One", "Two" });
+		CHECK_EQUAL(2u, scene.list.count());
+		CHECK(first == &scene.list.row(0));
+		CHECK_EQUAL(std::string("One"), scene.list.row(0).title());
+	}
+
+	TEST(ArrowsMoveTheCurrentRowAndEnterActivatesIt) {
+		ListScene scene;
+		UiDriver driver(scene.root, { 300, 400 });
+		driver.click(scene.list.row(1));
+		CHECK(scene.list.current() == std::optional<size_t>(1));
+		CHECK(scene.list.row(1).isHighlighted());
+
+		driver.key(Key::Down);
+		driver.key(Key::Down);
+		CHECK(scene.list.current() == std::optional<size_t>(3));
+		driver.key(Key::End);
+		CHECK(scene.list.current() == std::optional<size_t>(7));
+		driver.key(Key::Home);
+		CHECK(scene.list.current() == std::optional<size_t>(0));
+		driver.key(Key::Enter);
+		CHECK((scene.activated == std::vector<size_t>{ 0 }));
+	}
+
+	TEST(DisabledItemsAreSkipped) {
+		ListScene scene;
+		scene.setNames(kNames, [](size_t index) { return index != 1; });
+		UiDriver driver(scene.root, { 300, 400 });
+		driver.click(scene.list.row(0));
+
+		driver.key(Key::Down);
+		CHECK(scene.list.current() == std::optional<size_t>(2));
+		CHECK(!scene.list.row(1).isEffectivelyEnabled());
+	}
+
+	TEST(TypingJumpsToATitle) {
+		ListScene scene;
+		UiDriver driver(scene.root, { 300, 400 });
+		driver.click(scene.list.row(0));
+
+		driver.type("e");
+		CHECK(scene.list.current() == std::optional<size_t>(4));
+		driver.advance(1000);
+		driver.type("g");
+		CHECK(scene.list.current() == std::optional<size_t>(6));
+	}
+
+	TEST(DoubleClickActivatesASelectingList) {
+		ListScene scene;
+		UiDriver driver(scene.root, { 300, 400 });
+		driver.click(scene.list.row(2));
+		CHECK(scene.activated.empty());
+		driver.advance(100);
+		driver.click(scene.list.row(2));
+		CHECK((scene.activated == std::vector<size_t>{ 2 }));
+	}
+
+	TEST(SingleClickListsActivateOnClick) {
+		ListScene scene;
+		scene.list.setActivatesOnClick(true);
+		UiDriver driver(scene.root, { 300, 400 });
+		driver.click(scene.list.row(3));
+		CHECK((scene.activated == std::vector<size_t>{ 3 }));
+	}
+
+	TEST(MultipleModeExtendsWithShiftAndTogglesWithSpaceAndControl) {
+		ListScene scene(ListView::Mode::Multiple);
+		UiDriver driver(scene.root, { 300, 400 });
+		driver.click(scene.list.row(1));
+		driver.key(Key::Down, KeyModifiers::shiftOnly());
+		driver.key(Key::Down, KeyModifiers::shiftOnly());
+		CHECK((scene.list.selection().selected() == std::vector<size_t>{ 1, 2, 3 }));
+		CHECK(scene.list.row(2).isSelected());
+
+		driver.key(Key::Space);
+		CHECK(!scene.list.selection().isSelected(3));
+		driver.click(scene.list.row(6), KeyModifiers::controlOnly());
+		CHECK(scene.list.selection().isSelected(6));
+		CHECK(scene.list.selection().isSelected(1));
+	}
+
+	TEST(MovingTheCurrentRowScrollsItIntoView) {
+		ListScene scene;
+		std::vector<std::string> many;
+		for (int index = 0; index < 60; index++)
+			many.push_back("Item " + std::to_string(index));
+		scene.setNames(many);
+		UiDriver driver(scene.root, { 300, 200 });
+		driver.click(scene.list.row(0));
+
+		driver.key(Key::End);
+		driver.settle();
+		const RectF last = scene.list.row(59).windowRect();
+		CHECK(last.pos.y + last.size.y <= 200.5f);
+		CHECK(scene.list.scroller().offset() > 0);
+
+		driver.key(Key::PageUp);
+		CHECK(*scene.list.current() < 59);
+	}
+
+	TEST(AnEmptyListShowsItsEmptyState) {
+		ListScene scene;
+		scene.list.setEmptyText("Nothing here");
+		scene.setNames({});
+		UiDriver driver(scene.root, { 300, 200 });
+
+		CHECK(scene.list.emptyLabel().isVisible());
+		CHECK(driver.paint().hasText("Nothing here"));
+
+		scene.setNames({ "Back" });
+		driver.layout();
+		CHECK(!scene.list.emptyLabel().isVisible());
+	}
+
+	TEST(ShrinkingTheModelDropsVanishedItemsFromTheSelection) {
+		ListScene scene;
+		UiDriver driver(scene.root, { 300, 400 });
+		driver.click(scene.list.row(6));
+
+		scene.setNames({ "One", "Two" });
+		CHECK(!scene.list.current());
+	}
+}
+
+SUITE(ListRow) {
+	TEST(RowsShowTheirPartsAndGrowForASubtitle) {
+		Widget root;
+		root.emplaceLayout<ColumnLayout>();
+		ListRow row("Report.pdf");
+		row.setLeading(ListRow::Leading::glyphOf(Glyph::File));
+		row.setTrailing(ListRow::Trailing::textOf("12 KB"));
+		root.addChild(row);
+		UiDriver driver(root, { 300, 100 });
+		const halnf plain = row.size().y;
+
+		CHECK(driver.paint().hasText("Report.pdf"));
+		CHECK(driver.paint().hasText("12 KB"));
+
+		row.setSubtitle("Yesterday");
+		driver.layout();
+		CHECK(row.size().y > plain);
+		CHECK(driver.paint().hasText("Yesterday"));
+	}
+}
diff --git a/Widgets/src/components/views/tests/PageStackTests.cpp b/Widgets/src/components/views/tests/PageStackTests.cpp
index 66aa15d9..e678390c 100644
--- a/Widgets/src/components/views/tests/PageStackTests.cpp
+++ b/Widgets/src/components/views/tests/PageStackTests.cpp
@@ -120,7 +120,7 @@ SUITE(PageStackNavigation) {
 		driver.settle();
 
 		Button inside{ "inside" };
-		scene.stack.currentPage().setContent(inside);
+		scene.stack.currentPage().setContent(&inside);
 		driver.settle();
 		driver.click(inside);
 		driver.key(Key::Escape);
@@ -139,7 +139,8 @@ SUITE(PageStackHeader) {
 		driver.settle();
 
 		CHECK(path.parent() == &scene.stack.currentPage().header());
-		CHECK(scene.stack.currentPage().titleLabel().parent() == nullptr);
+		CHECK(!scene.stack.currentPage().titleLabel().isVisible());
+		CHECK(!driver.paint().hasText("Child"));
 
 		scene.stack.back();
 		driver.settle();
@@ -147,7 +148,7 @@ SUITE(PageStackHeader) {
 
 		scene.stack.setHeaderContent(nullptr);
 		CHECK(path.parent() == nullptr);
-		CHECK(scene.stack.currentPage().titleLabel().parent() == &scene.stack.currentPage().header());
+		CHECK(scene.stack.currentPage().titleLabel().isVisible());
 	}
 }
 
@@ -196,8 +197,8 @@ SUITE(SearchFieldResults) {
 
 		scene.type(driver, "Alph");
 		REQUIRE CHECK(scene.search.isShowingResults());
-		REQUIRE CHECK_EQUAL(2u, scene.search.rows().size());
-		CHECK_EQUAL("Alpha", scene.search.rows()[0]->result().title);
+		REQUIRE CHECK_EQUAL(2u, scene.search.results().size());
+		CHECK_EQUAL("Alpha", scene.search.results()[0].title);
 		CHECK(scene.search.input().isEditing());
 
 		scene.search.setText("zzz");
@@ -228,8 +229,8 @@ SUITE(SearchFieldResults) {
 		driver.settle();
 
 		CHECK_EQUAL("Alphab", scene.search.input().text());
-		REQUIRE CHECK_EQUAL(1u, scene.search.rows().size());
-		CHECK_EQUAL("Alphabet", scene.search.rows()[0]->result().title);
+		REQUIRE CHECK_EQUAL(1u, scene.search.results().size());
+		CHECK_EQUAL("Alphabet", scene.search.results()[0].title);
 	}
 
 	TEST(DisabledResultsAreSkippedAndCannotBeChosen) {
@@ -241,10 +242,10 @@ SUITE(SearchFieldResults) {
 		CHECK_EQUAL(1, scene.search.highlighted());
 		driver.key(Key::Up);
 		CHECK_EQUAL(1, scene.search.highlighted());
-		driver.click(*scene.search.rows()[0]);
+		driver.click(scene.search.row(0));
 		CHECK(scene.chosen.empty());
 
-		driver.click(*scene.search.rows()[1]);
+		driver.click(scene.search.row(1));
 		CHECK(scene.chosen == std::vector<size_t>{ 1 });
 	}
 
@@ -269,7 +270,7 @@ SUITE(SearchFieldResults) {
 		scene.search.focus();
 		driver.settle();
 		REQUIRE CHECK(scene.search.isShowingResults());
-		CHECK_EQUAL("Create: new", scene.search.rows()[0]->result().title);
+		CHECK_EQUAL("Create: new", scene.search.results()[0].title);
 		CHECK(scene.search.input().isEditing());
 	}
 
@@ -287,7 +288,7 @@ SUITE(SearchFieldResults) {
 		driver.settle();
 		REQUIRE CHECK(search.isShowingResults());
 		const RectF field = search.windowRect();
-		const RectF results = search.rows()[0]->parent()->windowRect();
+		const RectF results = search.resultsPanel().windowRect();
 		CHECK_CLOSE(400.0f, results.size.x, 0.5f);
 		CHECK_CLOSE(field.center().x, results.center().x, 0.5f);
 	}
@@ -297,6 +298,6 @@ SUITE(SearchFieldResults) {
 		scene.search.setMaximumResults(2);
 		UiDriver driver(scene.root, { 800, 600 });
 		scene.type(driver, "a");
-		CHECK_EQUAL(2u, scene.search.rows().size());
+		CHECK_EQUAL(2u, scene.search.results().size());
 	}
 }
diff --git a/Widgets/src/components/views/tests/PropertyListTests.cpp b/Widgets/src/components/views/tests/PropertyListTests.cpp
new file mode 100644
index 00000000..1dd308a2
--- /dev/null
+++ b/Widgets/src/components/views/tests/PropertyListTests.cpp
@@ -0,0 +1,85 @@
+#include "BoxLayout.hpp"
+#include "PropertyList.hpp"
+#include "Ui.hpp"
+#include "UiDriver.hpp"
+
+#include "UnitTest++/UnitTest++.h"
+
+#include <string>
+
+using namespace tp;
+using namespace tp::ui;
+using namespace tp::ui::testing;
+
+namespace {
+	struct Brush {
+		halnf size = 10;
+		bool pressure = true;
+		long blend = 0;
+		std::string name = "Pencil";
+	};
+
+	struct FormScene {
+		Widget root;
+		PropertyList form;
+		Brush brush;
+		int edits = 0;
+
+		FormScene() {
+			root.emplaceLayout<ColumnLayout>();
+			form.addValue("Kind", [this] { return brush.name + " brush"; });
+			form.addSlider("Size", 1, 100, [this] { return brush.size; }, [this](halnf size) { brush.size = size; });
+			form.addCheckbox("Pressure", [this] { return brush.pressure; }, [this](bool on) { brush.pressure = on; });
+			form.addChoice("Blend", { "Normal", "Multiply" }, [this] { return brush.blend; }, [this](long index) { brush.blend = index; });
+			form.addText("Name", [this] { return brush.name; }, [this](const std::string& name) { brush.name = name; });
+			form.setOnEdited([this] { edits++; });
+			form.refresh();
+			root.addChild(form);
+		}
+	};
+}
+
+SUITE(PropertyList) {
+	TEST(RefreshPullsEveryValueWithoutWritingBack) {
+		FormScene scene;
+		UiDriver driver(scene.root, { 400, 400 });
+		CHECK(driver.paint().hasText("Pencil brush"));
+		CHECK_CLOSE(10, static_cast<LabeledSlider&>(*scene.form.editor("Size")).value(), 0.01f);
+
+		scene.brush.size = 40;
+		scene.brush.pressure = false;
+		scene.brush.blend = 1;
+		scene.form.refresh();
+
+		CHECK_CLOSE(40, static_cast<LabeledSlider&>(*scene.form.editor("Size")).value(), 0.01f);
+		CHECK(!static_cast<Checkbox&>(*scene.form.editor("Pressure")).isChecked());
+		CHECK_EQUAL(1, static_cast<Dropdown&>(*scene.form.editor("Blend")).selectedIndex());
+		CHECK_EQUAL(0, scene.edits);
+	}
+
+	TEST(EditingPushesThroughTheSetter) {
+		FormScene scene;
+		UiDriver driver(scene.root, { 400, 400 });
+
+		driver.click(*scene.form.editor("Pressure"));
+		CHECK(!scene.brush.pressure);
+		CHECK_EQUAL(1, scene.edits);
+
+		driver.click(*scene.form.editor("Name"));
+		driver.key(Key::A, KeyModifiers::controlOnly());
+		driver.type("Ink");
+		driver.key(Key::Enter);
+		CHECK_EQUAL("Ink", scene.brush.name);
+		scene.form.refresh();
+		CHECK(driver.paint().hasText("Ink brush"));
+	}
+
+	TEST(NamesLineUpInOneColumn) {
+		FormScene scene;
+		UiDriver driver(scene.root, { 400, 400 });
+		const halnf blendLeft = scene.form.editor("Blend")->windowRect().pos.x;
+		const halnf nameLeft = scene.form.editor("Name")->windowRect().pos.x;
+		CHECK_CLOSE(blendLeft, nameLeft, 0.5f);
+		CHECK_EQUAL(5u, scene.form.rowCount());
+	}
+}
diff --git a/Widgets/src/components/views/tests/ReorderableListTests.cpp b/Widgets/src/components/views/tests/ReorderableListTests.cpp
index 17dfe913..e5c9c798 100644
--- a/Widgets/src/components/views/tests/ReorderableListTests.cpp
+++ b/Widgets/src/components/views/tests/ReorderableListTests.cpp
@@ -476,3 +476,89 @@ SUITE(ReorderableListLongPress) {
 		CHECK_EQUAL("0123", scene.orderText());
 	}
 }
+
+SUITE(ReorderableListSession) {
+	struct ScrolledList {
+		Widget root;
+		ScrollView scroll;
+		Widget page;
+		ReorderableList list;
+		std::vector<std::unique_ptr<Button>> rows;
+		std::vector<std::pair<size_t, size_t>> moves;
+
+		ScrolledList() {
+			root.emplaceLayout<StackLayout>();
+			for (size_t index = 0; index < 20; index++) {
+				rows.push_back(std::make_unique<Button>("Row " + std::to_string(index)));
+				rows.back()->setSizing(AxisSizing::fill(), AxisSizing::fixed(40));
+				list.addItem(*rows.back());
+			}
+			list.setOnMoved([this](size_t from, size_t to) { moves.push_back({ from, to }); });
+			// The list leaves room for the scroll bar, so its grips are not under the bar.
+			page.emplaceLayout<StackLayout>().setPadding(Insets{ 0, 0, 16, 0 });
+			page.addChild(list);
+			scroll.setContent(&page);
+			root.addChild(scroll);
+		}
+	};
+
+	TEST(HoldingALiftedItemNearTheEdgeScrollsToFurtherSlots) {
+		ScrolledList scene;
+		UiDriver driver(scene.root, { 200, 200 });
+		driver.setAutoSettle(false);
+		const Vec2F grip = scene.list.windowPosition() + scene.list.gripRect(0).center();
+
+		driver.moveTo(grip);
+		driver.press();
+		driver.moveTo(grip + Vec2F(0.0f, 10.0f));
+		driver.moveTo(Vec2F(grip.x, 195.0f));
+		for (int frame = 0; frame < 60; frame++)
+			driver.advance(16);
+
+		CHECK(scene.scroll.currentOffset() > 40);
+		CHECK(scene.list.dropIndex() > 4);
+		driver.release();
+		driver.settle();
+		REQUIRE CHECK_EQUAL(1u, scene.moves.size());
+		CHECK(scene.moves[0].second > 4);
+	}
+
+	TEST(DroppedItemGlidesIntoItsSlot) {
+		ListScene scene;
+		UiDriver driver(scene.root);
+		driver.setAutoSettle(false);
+		const Vec2F grip = scene.gripCenter(0);
+
+		driver.moveTo(grip);
+		driver.press();
+		driver.moveTo(grip + Vec2F(0.0f, 10.0f));
+		driver.moveTo(grip + Vec2F(0.0f, 40.0f));
+		driver.release();
+		driver.advance(16);
+
+		// Mid-glide the item is between where it was dropped and its slot, then it settles exactly in the slot.
+		const halnf slotTop = scene.rows[1]->targetRect().pos.y;
+		CHECK(std::abs(scene.rows[0]->rect().pos.y - slotTop) > 0.5f);
+		driver.settle();
+		CHECK_CLOSE(scene.rows[0]->targetRect().pos.y, scene.rows[0]->rect().pos.y, 0.5f);
+		CHECK_EQUAL("1023", scene.orderText());
+	}
+
+	TEST(TheLiftedItemCastsTheThemeElevationShadow) {
+		ListScene scene;
+		UiDriver driver(scene.root);
+		const Vec2F grip = scene.gripCenter(1);
+		driver.moveTo(grip);
+		driver.press();
+		driver.moveTo(grip + Vec2F(0.0f, 10.0f));
+
+		// The elevation shadow is a box gradient fading from the theme shadow color to transparent.
+		const RGBA shadowColor = driver.ui().theme().palette.shadow;
+		bool shadow = false;
+		for (const CanvasCommand& command : driver.paint().commands()) {
+			shadow = shadow || (command.kind == CanvasCommand::Kind::Path && command.color == shadowColor && command.endColor.a == 0);
+		}
+		CHECK(shadow);
+		driver.release();
+	}
+}
diff --git a/Widgets/src/core/private/Elevation.cpp b/Widgets/src/core/private/Elevation.cpp
new file mode 100644
index 00000000..d723d7c4
--- /dev/null
+++ b/Widgets/src/core/private/Elevation.cpp
@@ -0,0 +1,32 @@
+#include "Elevation.hpp"
+
+#include "Canvas.hpp"
+#include "Theme.hpp"
+
+using namespace tp;
+using namespace tp::ui;
+
+namespace {
+	RectF shadowCaster(const RectF& surface, const Theme& theme) {
+		return translated(surface, Vec2F(0.0f, theme.metrics.elevation));
+	}
+}
+
+RectF tp::ui::elevationShadowBounds(const RectF& surface, const Theme& theme) {
+	return insetRect(shadowCaster(surface, theme), -theme.metrics.shadowBlur);
+}
+
+void tp::ui::paintElevationShadow(Canvas& canvas, const RectF& surface, halnf cornerRadius, const Theme& theme) {
+	const RGBA& shadow = theme.palette.shadow;
+	const Canvas::BoxGradient gradient = {
+		.box = shadowCaster(surface, theme),
+		.radius = cornerRadius,
+		.feather = theme.metrics.shadowBlur,
+		.innerColor = shadow,
+		.outerColor = { shadow.r, shadow.g, shadow.b, 0 },
+	};
+
+	canvas.beginPath();
+	canvas.addPathRect(elevationShadowBounds(surface, theme));
+	canvas.fillPath(gradient);
+}
diff --git a/Widgets/src/core/private/Glyph.cpp b/Widgets/src/core/private/Glyph.cpp
new file mode 100644
index 00000000..8dcdc070
--- /dev/null
+++ b/Widgets/src/core/private/Glyph.cpp
@@ -0,0 +1,194 @@
+#include "Glyph.hpp"
+
+#include "Canvas.hpp"
+#include "Theme.hpp"
+
+#include <algorithm>
+#include <cmath>
+
+using namespace tp;
+using namespace tp::ui;
+
+namespace {
+	constexpr halnf kChevronNear = 0.25f;
+	constexpr halnf kChevronFar = 0.75f;
+	constexpr halnf kDotRadiusFraction = 0.1f;
+
+	// Maps unit coordinates (0..1 on both axes) into the square a glyph is drawn in.
+	class UnitSquare {
+	public:
+		explicit UnitSquare(const RectF& square, halnf turn = 0) :
+			mSquare(square),
+			mCosine(std::cos(turn)),
+			mSine(std::sin(turn)) {}
+
+		[[nodiscard]] Vec2F at(halnf x, halnf y) const {
+			// Turned around the middle of the square, so a turn keeps the glyph in its box.
+			const halnf dx = (x - 0.5f) * mSquare.size.x;
+			const halnf dy = (y - 0.5f) * mSquare.size.y;
+			const Vec2F center = { mSquare.pos.x + mSquare.size.x / 2, mSquare.pos.y + mSquare.size.y / 2 };
+			return { center.x + dx * mCosine - dy * mSine, center.y + dx * mSine + dy * mCosine };
+		}
+
+		[[nodiscard]] RectF rect(halnf x, halnf y, halnf width, halnf height) const {
+			return makeRect(at(x, y), { mSquare.size.x * width, mSquare.size.y * height });
+		}
+
+		[[nodiscard]] halnf side() const { return mSquare.size.x; }
+
+	private:
+		RectF mSquare;
+		halnf mCosine;
+		halnf mSine;
+	};
+
+	void paintChevron(Canvas& canvas, const UnitSquare& unit, Glyph glyph, const RGBA& color, halnf stroke) {
+		switch (glyph) {
+			case Glyph::ChevronRight:
+				canvas.polyline({ unit.at(kChevronNear, 0), unit.at(kChevronFar, 0.5f), unit.at(kChevronNear, 1) }, color, stroke);
+				return;
+			case Glyph::ChevronLeft:
+				canvas.polyline({ unit.at(kChevronFar, 0), unit.at(kChevronNear, 0.5f), unit.at(kChevronFar, 1) }, color, stroke);
+				return;
+			case Glyph::ChevronUp:
+				canvas.polyline({ unit.at(0, kChevronFar), unit.at(0.5f, kChevronNear), unit.at(1, kChevronFar) }, color, stroke);
+				return;
+			default:
+				canvas.polyline({ unit.at(0, kChevronNear), unit.at(0.5f, kChevronFar), unit.at(1, kChevronNear) }, color, stroke);
+				return;
+		}
+	}
+
+	void paintSkip(Canvas& canvas, const UnitSquare& unit, bool forward, const RGBA& color) {
+		const halnf bar = 0.16f;
+		if (forward) {
+			canvas.polygon({ unit.at(0, 0), unit.at(1 - bar, 0.5f), unit.at(0, 1) }, color);
+			canvas.rect(unit.rect(1 - bar, 0, bar, 1), color, unit.side() * bar / 2);
+			return;
+		}
+		canvas.polygon({ unit.at(1, 0), unit.at(bar, 0.5f), unit.at(1, 1) }, color);
+		canvas.rect(unit.rect(0, 0, bar, 1), color, unit.side() * bar / 2);
+	}
+
+	void paintDots(Canvas& canvas, const UnitSquare& unit, const std::initializer_list<Vec2F>& centers, const RGBA& color) {
+		const halnf radius = unit.side() * kDotRadiusFraction;
+		for (const Vec2F& center : centers) {
+			canvas.circle(unit.at(center.x, center.y), radius, color);
+		}
+	}
+
+	// A speaker with sound waves, or crossed out when muted.
+	void paintSpeaker(Canvas& canvas, const UnitSquare& unit, bool muted, const RGBA& color, halnf stroke) {
+		canvas.polygon(
+			{ unit.at(0, 0.35f), unit.at(0.25f, 0.35f), unit.at(0.5f, 0.05f), unit.at(0.5f, 0.95f), unit.at(0.25f, 0.65f), unit.at(0, 0.65f) },
+			color
+		);
+		if (muted) {
+			canvas.line(unit.at(0.62f, 0.3f), unit.at(1, 0.7f), color, stroke);
+			canvas.line(unit.at(0.62f, 0.7f), unit.at(1, 0.3f), color, stroke);
+			return;
+		}
+		canvas.polyline({ unit.at(0.62f, 0.3f), unit.at(0.74f, 0.5f), unit.at(0.62f, 0.7f) }, color, stroke);
+		canvas.polyline({ unit.at(0.78f, 0.1f), unit.at(0.98f, 0.5f), unit.at(0.78f, 0.9f) }, color, stroke);
+	}
+
+	void paintRestore(Canvas& canvas, const UnitSquare& unit, const RGBA& color, halnf stroke) {
+		const halnf behind = 0.25f;
+		const halnf corner = unit.side() * 0.15f;
+		canvas.polyline(
+			{ unit.at(behind, behind), unit.at(behind, 0), unit.at(1, 0), unit.at(1, 1 - behind), unit.at(1 - behind, 1 - behind) },
+			color,
+			stroke
+		);
+		canvas.outline(unit.rect(0, behind, 1 - behind, 1 - behind), color, corner, stroke);
+	}
+}
+
+RectF tp::ui::glyphBox(const RectF& area, halnf side) {
+	const Vec2F center = area.center();
+	return makeRect(center.x - side / 2, center.y - side / 2, side, side);
+}
+
+void tp::ui::paintGlyph(Canvas& canvas, Glyph glyph, const RectF& box, const RGBA& color, const Theme& theme) {
+	paintGlyph(canvas, glyph, box, color, theme.metrics.glyphStroke);
+}
+
+void tp::ui::paintGlyph(Canvas& canvas, Glyph glyph, const RectF& box, const RGBA& color, const Theme& theme, halnf turn) {
+	paintTurnedGlyph(canvas, glyph, box, color, theme.metrics.glyphStroke, turn);
+}
+
+void tp::ui::paintGlyph(Canvas& canvas, Glyph glyph, const RectF& box, const RGBA& color, halnf stroke) {
+	paintTurnedGlyph(canvas, glyph, box, color, stroke, 0);
+}
+
+void tp::ui::paintTurnedGlyph(Canvas& canvas, Glyph glyph, const RectF& box, const RGBA& color, halnf stroke, halnf turn) {
+	const halnf fitted = std::min(box.size.x, box.size.y);
+	const halnf side = std::max(fitted - stroke, 0.0f);
+	const UnitSquare unit(glyphBox(box, side), turn);
+
+	switch (glyph) {
+		case Glyph::ChevronRight:
+		case Glyph::ChevronLeft:
+		case Glyph::ChevronUp:
+		case Glyph::ChevronDown: paintChevron(canvas, unit, glyph, color, stroke); return;
+
+		case Glyph::Check:
+			canvas.polyline({ unit.at(0.08f, 0.55f), unit.at(0.38f, 0.85f), unit.at(0.92f, 0.2f) }, color, stroke);
+			return;
+
+		case Glyph::Plus:
+			canvas.line(unit.at(0, 0.5f), unit.at(1, 0.5f), color, stroke);
+			canvas.line(unit.at(0.5f, 0), unit.at(0.5f, 1), color, stroke);
+			return;
+
+		case Glyph::Minus: canvas.line(unit.at(0, 0.5f), unit.at(1, 0.5f), color, stroke); return;
+
+		case Glyph::Close:
+			canvas.line(unit.at(0, 0), unit.at(1, 1), color, stroke);
+			canvas.line(unit.at(0, 1), unit.at(1, 0), color, stroke);
+			return;
+
+		case Glyph::Play: canvas.polygon({ unit.at(0.12f, 0), unit.at(0.95f, 0.5f), unit.at(0.12f, 1) }, color); return;
+
+		case Glyph::Pause:
+			canvas.rect(unit.rect(0.1f, 0, 0.3f, 1), color, unit.side() * 0.1f);
+			canvas.rect(unit.rect(0.6f, 0, 0.3f, 1), color, unit.side() * 0.1f);
+			return;
+
+		case Glyph::SkipPrevious: paintSkip(canvas, unit, false, color); return;
+		case Glyph::SkipNext: paintSkip(canvas, unit, true, color); return;
+
+		case Glyph::Folder:
+			canvas.rect(unit.rect(0, 0.1f, 0.45f, 0.2f), color, unit.side() * 0.05f);
+			canvas.outline(unit.rect(0, 0.25f, 1, 0.65f), color, unit.side() * 0.12f, stroke);
+			return;
+
+		case Glyph::File: canvas.outline(unit.rect(0.15f, 0, 0.7f, 1), color, unit.side() * 0.1f, stroke); return;
+
+		case Glyph::Grip:
+			paintDots(canvas, unit, { { 0.3f, 0.15f }, { 0.7f, 0.15f }, { 0.3f, 0.5f }, { 0.7f, 0.5f }, { 0.3f, 0.85f }, { 0.7f, 0.85f } }, color);
+			return;
+
+		case Glyph::Search:
+			canvas.circleOutline(unit.at(0.4f, 0.4f), unit.side() * 0.4f, color, stroke);
+			canvas.line(unit.at(0.7f, 0.7f), unit.at(1, 1), color, stroke);
+			return;
+
+		case Glyph::Menu:
+			for (halnf y : { 0.15f, 0.5f, 0.85f }) {
+				canvas.line(unit.at(0, y), unit.at(1, y), color, stroke);
+			}
+			return;
+
+		case Glyph::More: paintDots(canvas, unit, { { 0.5f, 0.12f }, { 0.5f, 0.5f }, { 0.5f, 0.88f } }, color); return;
+
+		case Glyph::Maximize: canvas.outline(unit.rect(0, 0, 1, 1), color, unit.side() * 0.2f, stroke); return;
+
+		case Glyph::Restore: paintRestore(canvas, unit, color, stroke); return;
+
+		case Glyph::Volume: paintSpeaker(canvas, unit, false, color, stroke); return;
+		case Glyph::Muted: paintSpeaker(canvas, unit, true, color, stroke); return;
+
+		case Glyph::ResizeCorner: canvas.polyline({ unit.at(0, 1), unit.at(1, 1), unit.at(1, 0) }, color, stroke); return;
+	}
+}
diff --git a/Widgets/src/core/private/InputRouter.cpp b/Widgets/src/core/private/InputRouter.cpp
index 37a41265..6758cbb3 100644
--- a/Widgets/src/core/private/InputRouter.cpp
+++ b/Widgets/src/core/private/InputRouter.cpp
@@ -94,6 +94,9 @@ void InputRouter::capture(Widget& widget) {
 		mPress.reset();
 		updatePressed();
 	}
+	// A widget that captures the pointer takes it over: a drag an ancestor armed but has not started yet is dropped,
+	// so a held list item moves instead of the scroller around it panning.
+	if (mDrag && !mDrag->started && mDrag->widget != &widget) mDrag.reset();
 }
 
 void InputRouter::updatePressed() {
@@ -123,7 +126,17 @@ void InputRouter::forget(const Widget& widget) {
 	}
 
 	if (mPress && detaches(mPress->widget)) mPress.reset();
-	if (mDrag && detaches(mDrag->widget)) mDrag.reset();
+	// A drag whose widget is hidden or detached is cancelled, not dropped silently, so the widget can end what the drag
+	// started (a pan, a lifted item); a widget that is gone receives nothing, since cancel bubbles from it.
+	if (mDrag && detaches(mDrag->widget)) {
+		const DragState drag = *mDrag;
+		mDrag.reset();
+		if (mCapture == drag.widget) mCapture = nullptr;
+		if (drag.started) {
+			Event cancelled = makeEvent(Dragged{ DragPhase::Cancelled, drag.button, drag.start, { 0, 0 } }, drag.last);
+			deliverDrag(cancelled, *drag.widget);
+		}
+	}
 	if (detaches(mCapture)) mCapture = nullptr;
 	if (detaches(mGestureTarget)) mGestureTarget = nullptr;
 
@@ -241,14 +254,22 @@ void InputRouter::followDrag(Vec2F position) {
 		mCapture = drag.widget;
 
 		Event started = makeEvent(Dragged{ DragPhase::Started, drag.button, drag.start, position - drag.start }, position);
-		bubble(started, drag.widget);
+		deliverDrag(started, *drag.widget);
 		drag.last = position;
 		if (!mDrag) return;
 	}
 
 	Event moved = makeEvent(Dragged{ DragPhase::Moved, drag.button, drag.start, position - drag.last }, position);
 	drag.last = position;
-	bubble(moved, drag.widget);
+	deliverDrag(moved, *drag.widget);
+}
+
+void InputRouter::deliverDrag(Event& event, Widget& widget) {
+	// The drag belongs to the widget that accepted it: its phases go to it alone, so an ancestor's event filter cannot
+	// swallow the end of a pan or a lifted item and leave it stuck.
+	if (isBlockedByModal(&widget)) return;
+	event.mTarget = &widget;
+	deliverTo(event, widget, &widget);
 }
 
 void InputRouter::finishDrag(DragPhase phase) {
@@ -259,11 +280,20 @@ void InputRouter::finishDrag(DragPhase phase) {
 	if (!drag.started) return;
 
 	Event finished = makeEvent(Dragged{ phase, drag.button, drag.start, { 0, 0 } }, drag.last);
-	bubble(finished, drag.widget);
+	deliverDrag(finished, *drag.widget);
 }
 
 void InputRouter::cancelDrag() { finishDrag(DragPhase::Cancelled); }
 
+bool InputRouter::claimDrag(Widget& widget) {
+	if (mDrag && mDrag->started) return mDrag->widget == &widget;
+	const std::optional<PointerButton> button =
+		isButtonDown(PointerButton::Left) ? std::optional<PointerButton>(PointerButton::Left) : std::nullopt;
+	if (!button || !mPointer) return false;
+	mDrag = DragState{ &widget, *button, *mPointer, *mPointer, false };
+	return true;
+}
+
 void InputRouter::countClick(PointerButton button, Vec2F position) {
 	const Interaction& interaction = mUi.theme().interaction;
 	const bool nearby = mLastPress && distanceSquared(mLastPress->windowPosition, position) <=
diff --git a/Widgets/src/core/private/InputRouter.hpp b/Widgets/src/core/private/InputRouter.hpp
index ae85e68e..b6bcc861 100644
--- a/Widgets/src/core/private/InputRouter.hpp
+++ b/Widgets/src/core/private/InputRouter.hpp
@@ -23,6 +23,7 @@ namespace tp::ui {
 
 		void dispatch(const InputEvent& input);
 		void advanceClock(halnf deltaMs);
+		[[nodiscard]] halnf clockMs() const { return mClockMs; }
 		[[nodiscard]] bool isWaitingForLongPress() const { return mLongPress.has_value(); }
 		void refreshHover();
 		void refreshCursor() { applyCursor(); }
@@ -47,6 +48,9 @@ namespace tp::ui {
 		[[nodiscard]] bool isDragging() const { return mDrag.has_value() && mDrag->started; }
 
 		void cancelDrag();
+		// Hands the current press to a widget as a drag (for example after a long press lifted an item): any drag an
+		// ancestor armed is dropped, and moves past the slop from where the pointer is now start the widget's drag.
+		bool claimDrag(Widget& widget);
 
 		[[nodiscard]] Widget* widgetAt(Vec2F windowPoint) const;
 
@@ -88,6 +92,7 @@ namespace tp::ui {
 		void countClick(PointerButton button, Vec2F position);
 		void followDrag(Vec2F position);
 		void finishDrag(DragPhase phase);
+		void deliverDrag(Event& event, Widget& widget);
 		[[nodiscard]] halnf dragSlop() const;
 		void fireLongPress();
 		void applyCursor();
diff --git a/Widgets/src/core/private/InteractionVisual.cpp b/Widgets/src/core/private/InteractionVisual.cpp
new file mode 100644
index 00000000..ed4532a5
--- /dev/null
+++ b/Widgets/src/core/private/InteractionVisual.cpp
@@ -0,0 +1,65 @@
+#include "InteractionVisual.hpp"
+
+#include "Theme.hpp"
+#include "Widget.hpp"
+
+#include <algorithm>
+
+using namespace tp;
+using namespace tp::ui;
+
+namespace {
+	RGBA transparent(const RGBA& color) { return { color.r, color.g, color.b, 0 }; }
+}
+
+InteractionColors InteractionColors::highlight(const RGBA& hovered, const RGBA& pressed) {
+	return { transparent(hovered), hovered, pressed, transparent(hovered) };
+}
+
+InteractionVisual::InteractionVisual(const Widget& owner, const InteractionColors& colors) :
+	mOwner(owner),
+	mColors(colors),
+	mColor(colors.rest),
+	mReveal(0) {}
+
+void InteractionVisual::setColors(const InteractionColors& colors) { mColors = colors; }
+
+void InteractionVisual::setRevealHeld(bool held) { mRevealHeld = held; }
+
+bool InteractionVisual::refresh() {
+	followThemeMotion();
+	mColor.animateTo(colorForState());
+	mReveal.animateTo(revealForState());
+	return isAnimating();
+}
+
+void InteractionVisual::finish() {
+	mColor.jumpTo(colorForState());
+	mReveal.jumpTo(revealForState());
+}
+
+bool InteractionVisual::advance(halnf deltaMs) {
+	const bool colorMoving = mColor.advance(deltaMs);
+	const bool revealMoving = mReveal.advance(deltaMs);
+	return colorMoving || revealMoving;
+}
+
+halnf InteractionVisual::reveal() const { return std::clamp(mReveal.value(), 0.0f, 1.0f); }
+
+RGBA InteractionVisual::colorForState() const {
+	if (!mOwner.isEffectivelyEnabled()) return mColors.disabled;
+	if (mOwner.isPressed()) return mColors.pressed;
+	if (mOwner.isHovered()) return mColors.hovered;
+	return mColors.rest;
+}
+
+halnf InteractionVisual::revealForState() const {
+	const bool engaged = mOwner.isEffectivelyEnabled() && (mOwner.isHovered() || mOwner.isPressed());
+	return engaged || mRevealHeld ? 1.0f : 0.0f;
+}
+
+void InteractionVisual::followThemeMotion() {
+	const SpringParameters motion = SpringParameters::criticallyDamped(mOwner.theme().interaction.surfaceResponseMs);
+	mColor.setParameters(motion);
+	mReveal.setParameters(motion);
+}
diff --git a/Widgets/src/core/private/Layout.cpp b/Widgets/src/core/private/Layout.cpp
index faddcbc3..33d8e284 100644
--- a/Widgets/src/core/private/Layout.cpp
+++ b/Widgets/src/core/private/Layout.cpp
@@ -3,6 +3,7 @@
 #include "LayoutEngine.hpp"
 #include "Widget.hpp"
 
+#include <algorithm>
 #include <vector>
 
 using namespace tp;
@@ -22,6 +23,14 @@ LayoutContext LayoutContext::without(const Widget& child) const {
 	return context;
 }
 
+LayoutContext LayoutContext::without(const std::vector<const Widget*>& children) const {
+	LayoutContext context = *this;
+	std::erase_if(context.mVisibleChildren, [&children](const Widget* child) {
+		return std::find(children.begin(), children.end(), child) != children.end();
+	});
+	return context;
+}
+
 Extent LayoutContext::measure(const Widget& child, Axis axis, halnf crossLength) const {
 	return mEngine.measure(child, axis, crossLength);
 }
diff --git a/Widgets/src/core/private/ListNavigator.cpp b/Widgets/src/core/private/ListNavigator.cpp
new file mode 100644
index 00000000..7cdc6901
--- /dev/null
+++ b/Widgets/src/core/private/ListNavigator.cpp
@@ -0,0 +1,85 @@
+#include "ListNavigator.hpp"
+
+#include <algorithm>
+#include <cctype>
+
+using namespace tp;
+using namespace tp::ui;
+
+namespace {
+	bool available(const ListNavigator::Items& items, size_t index) {
+		return index < items.count && (!items.isAvailable || items.isAvailable(index));
+	}
+
+	// The first available item from `from` walking by `direction`, staying inside the list.
+	std::optional<size_t> firstAvailable(const ListNavigator::Items& items, long from, int direction) {
+		for (long index = from; index >= 0 && index < (long) items.count; index += direction) {
+			if (available(items, (size_t) index)) return (size_t) index;
+		}
+		return std::nullopt;
+	}
+
+	std::string lowered(std::string text) {
+		std::transform(text.begin(), text.end(), text.begin(), [](unsigned char letter) { return (char) std::tolower(letter); });
+		return text;
+	}
+}
+
+std::optional<size_t> ListNavigator::step(
+	const Items& items, std::optional<size_t> current, Key key, size_t pageSize, bool wraps
+) {
+	if (items.count == 0) return std::nullopt;
+	const long last = (long) items.count - 1;
+	const long page = (long) std::max<size_t>(pageSize, 1);
+
+	switch (key) {
+		case Key::Home: return firstAvailable(items, 0, 1);
+		case Key::End: return firstAvailable(items, last, -1);
+
+		case Key::Down:
+		case Key::Up:
+			{
+				const int direction = key == Key::Down ? 1 : -1;
+				// With nothing current, Down starts at the top and Up at the bottom.
+				if (!current) return firstAvailable(items, direction > 0 ? 0 : last, direction);
+				std::optional<size_t> next = firstAvailable(items, (long) *current + direction, direction);
+				if (!next && wraps) next = firstAvailable(items, direction > 0 ? 0 : last, direction);
+				return next;
+			}
+
+		case Key::PageDown:
+		case Key::PageUp:
+			{
+				const int direction = key == Key::PageDown ? 1 : -1;
+				const long start = current ? (long) *current : (direction > 0 ? -1 : last + 1);
+				const long target = std::clamp(start + direction * page, 0L, last);
+				// Land on the item a page away, or the nearest available one before it.
+				std::optional<size_t> next = firstAvailable(items, target, -direction);
+				if (next && current && (long) *next * direction <= (long) *current * direction) next = std::nullopt;
+				return next ? next : firstAvailable(items, target, direction);
+			}
+
+		default: return std::nullopt;
+	}
+}
+
+std::optional<size_t> ListNavigator::typeAhead(
+	const Items& items, std::optional<size_t> current, const std::string& typed, halnf nowMs
+) {
+	if (!items.text || typed.empty() || items.count == 0) return std::nullopt;
+
+	const bool continuing = nowMs - mLastTypedMs < kTypeAheadResetMs;
+	mLastTypedMs = nowMs;
+	const std::string letter = lowered(typed);
+	// Repeating one letter cycles through the items starting with it; other letters extend the prefix.
+	const bool repeats = continuing && mPrefix == letter;
+	mPrefix = continuing && !repeats ? mPrefix + letter : letter;
+
+	const size_t start = current ? *current + (continuing && !repeats ? 0 : 1) : 0;
+	for (size_t offset = 0; offset < items.count; offset++) {
+		const size_t index = (start + offset) % items.count;
+		if (!available(items, index)) continue;
+		if (lowered(items.text(index)).rfind(mPrefix, 0) == 0) return index;
+	}
+	return std::nullopt;
+}
diff --git a/Widgets/src/core/private/ReorderSession.cpp b/Widgets/src/core/private/ReorderSession.cpp
index 8a3de94d..0bacd509 100644
--- a/Widgets/src/core/private/ReorderSession.cpp
+++ b/Widgets/src/core/private/ReorderSession.cpp
@@ -1,5 +1,7 @@
 #include "ReorderSession.hpp"
 
+#include <algorithm>
+
 using namespace tp;
 using namespace tp::ui;
 
@@ -18,6 +20,38 @@ size_t ReorderSession::slotIn(const ReorderLane& lane, Vec2F windowPointer) {
 	return lane.items.size();
 }
 
+size_t ReorderSession::slotFor(const ReorderLane& lane, const RectF& lifted, std::optional<size_t> originIndex) {
+	if (!originIndex) return slotIn(lane, lifted.center());
+
+	const halnf start = startAlong(lifted, lane.axis);
+	const halnf end = start + lengthAlong(lifted, lane.axis);
+	size_t slot = std::min(*originIndex, lane.items.size());
+	for (size_t index = 0; index < lane.items.size(); index++) {
+		const RectF& item = lane.items[index];
+		const halnf middle = startAlong(item, lane.axis) + lengthAlong(item, lane.axis) / 2;
+		// Items that were before the lifted one give way when its start passes their middle, items after when its end does.
+		if (index < *originIndex && start < middle) slot--;
+		if (index >= *originIndex && end > middle) slot++;
+	}
+	return slot;
+}
+
+bool ReorderSession::updateLifted(const RectF& lifted, const std::vector<ReorderLane>& lanes) {
+	mPointer = lifted.pos + mGrabOffset;
+
+	std::optional<ReorderSlot> next;
+	for (size_t lane = 0; lane < lanes.size(); lane++) {
+		if (!contains(lanes[lane].area, lifted.center())) continue;
+		const std::optional<size_t> origin = lane == mOrigin.lane ? std::optional<size_t>(mOrigin.index) : std::nullopt;
+		next = ReorderSlot{ lane, slotFor(lanes[lane], lifted, origin) };
+		break;
+	}
+
+	if (next == mTarget) return false;
+	mTarget = next;
+	return true;
+}
+
 bool ReorderSession::update(Vec2F windowPointer, const std::vector<ReorderLane>& lanes) {
 	mPointer = windowPointer;
 
diff --git a/Widgets/src/core/private/Theme.cpp b/Widgets/src/core/private/Theme.cpp
index 775a88a1..1c41d52b 100644
--- a/Widgets/src/core/private/Theme.cpp
+++ b/Widgets/src/core/private/Theme.cpp
@@ -42,6 +42,7 @@ void Metrics::forEachLength(Visitor&& visit) {
 												 &spacing,
 												 &popupGap,
 												 &elevation,
+												 &shadowBlur,
 												 &glyphStroke }) {
 		visit(*length);
 	}
diff --git a/Widgets/src/core/private/Ui.cpp b/Widgets/src/core/private/Ui.cpp
index bb3a0009..88daf334 100644
--- a/Widgets/src/core/private/Ui.cpp
+++ b/Widgets/src/core/private/Ui.cpp
@@ -143,6 +143,8 @@ void Ui::dispatch(const InputState& frame) {
 		dispatch(input);
 }
 
+halnf Ui::clockMs() const { return mInput->clockMs(); }
+
 void Ui::advance(halnf deltaMs) {
 	mInput->advanceClock(deltaMs > 0 ? deltaMs : 0);
 	deltaMs = deltaMs < kMaximumFrameDeltaMs ? deltaMs : kMaximumFrameDeltaMs;
@@ -275,6 +277,11 @@ const RectF* Ui::popupAnchorOf(const Widget& content) const {
 	return &mPopups->entries()[*index].request.anchor;
 }
 
+Widget* Ui::popupOwnerOf(const Widget& content) const {
+	const std::optional<size_t> index = mPopups->indexOf(content);
+	return index ? mPopups->entries()[*index].request.owner : nullptr;
+}
+
 ualni Ui::openPopupCount() const { return mPopups->entries().size(); }
 
 void Ui::setWindowHost(WindowHost* host) {
@@ -319,6 +326,8 @@ bool Ui::isDragging() const { return mInput->isDragging(); }
 
 void Ui::cancelDrag() { mInput->cancelDrag(); }
 
+bool Ui::claimDrag(Widget& widget) { return mInput->claimDrag(widget); }
+
 Widget* Ui::widgetAt(Vec2F windowPoint) const { return mInput->widgetAt(windowPoint); }
 
 Widget* Ui::openTooltip() const { return mTooltips->bubble(); }
diff --git a/Widgets/src/core/private/Viewport.cpp b/Widgets/src/core/private/Viewport.cpp
index b25af677..fe136b2b 100644
--- a/Widgets/src/core/private/Viewport.cpp
+++ b/Widgets/src/core/private/Viewport.cpp
@@ -51,11 +51,21 @@ public:
 
 protected:
 	[[nodiscard]] Extent measureChildren(const LayoutContext& context, Axis axis, halnf crossLength) const override {
-		if (!mViewport.mContent || mViewport.scrolls(axis)) return Extent::shrinkable(0);
-		return context.measure(*mViewport.mContent, axis, crossLength);
+		if (!mViewport.mContent || !mViewport.mContent->isVisible()) return Extent::shrinkable(0);
+		// Along a scrolling axis the viewport would like to show all of its content but can shrink to nothing: what does
+		// not fit scrolls. A popup menu sized to fit its items is as tall as them until the window is too short.
+		Extent extent = context.measure(*mViewport.mContent, axis, crossLength);
+		if (mViewport.scrolls(axis)) extent.minimum = 0;
+		return extent;
 	}
 
 	void arrangeChildren(LayoutContext& context, const RectF& area) override {
+		arrangeContent(context, area);
+		mViewport.arrangeOverlays(context, area);
+	}
+
+private:
+	void arrangeContent(LayoutContext& context, const RectF& area) {
 		Widget* content = mViewport.mContent;
 		if (!content || !content->isVisible()) return;
 
@@ -67,11 +77,10 @@ protected:
 		if (mViewport.scrolls(Axis::Vertical)) {
 			size.y = std::max(area.size.y, context.measure(*content, Axis::Vertical, size.x).preferred);
 		}
-		context.place(*content, makeRect(area.pos - mViewport.mOffset, size));
+		context.place(*content, makeRect(area.pos - mViewport.mOffset + mViewport.stretch(), size));
 		mViewport.applyOffset(mViewport.mOffset, false);
 	}
 
-private:
 	Viewport& mViewport;
 };
 
@@ -94,7 +103,12 @@ void Viewport::setContent(Widget* content) {
 	if (mContent == content) return;
 	if (mContent) removeChild(*mContent);
 	mContent = content;
-	if (mContent) addChild(*mContent);
+	// The content is the bottom child, so overlays a subclass adds (a scroll bar) stay above it for painting and hits.
+	if (mContent) {
+		insertChild(0, *mContent);
+		mContent->setGeometryAnimated(false);
+	}
+	stopMotion();
 	mOffset = { 0, 0 };
 	requestLayout();
 }
@@ -117,11 +131,40 @@ bool Viewport::isScrollable(Axis axis) const {
 
 bool Viewport::isMoving() const {
 	for (const AxisMotion& motion : mMotion) {
-		if (motion.fling.isActive() || motion.stretch.isActive()) return true;
+		if (motion.fling.isActive() || motion.gliding) return true;
+	}
+	return isStretched();
+}
+
+bool Viewport::isStretched() const {
+	for (const AxisMotion& motion : mMotion) {
+		if (motion.startStretch.isActive() || motion.endStretch.isActive()) return true;
 	}
 	return false;
 }
 
+bool Viewport::isFlinging() const {
+	for (const AxisMotion& motion : mMotion) {
+		if (motion.fling.isActive()) return true;
+	}
+	return false;
+}
+
+halnf Viewport::flingVelocity(Axis axis) const {
+	const FlingSpline& fling = mMotion[indexOf(axis)].fling;
+	return fling.isActive() ? fling.velocity() / 1000.0f : 0;
+}
+
+Vec2F Viewport::targetOffset() const {
+	Vec2F target = mOffset;
+	for (Axis axis : kAxes) {
+		const AxisMotion& motion = mMotion[indexOf(axis)];
+		if (motion.gliding) along(target, axis) = motion.glide.target();
+		else if (motion.fling.isActive()) along(target, axis) = motion.fling.finalPosition();
+	}
+	return target;
+}
+
 Vec2F Viewport::clamped(Vec2F offset) const {
 	if (mPolicy.bounds == ViewportPolicy::Bounds::Free) {
 		return { scrolls(Axis::Horizontal) ? offset.x : 0, scrolls(Axis::Vertical) ? offset.y : 0 };
@@ -136,9 +179,10 @@ void Viewport::applyOffset(Vec2F offset, bool allowOverscroll) {
 		for (Axis axis : kAxes) {
 			const halnf beyond = along(offset, axis) - along(limited, axis);
 			if (beyond == 0 || !scrolls(axis)) continue;
-			StretchEffect& stretch = mMotion[indexOf(axis)].stretch;
+			StretchEffect& stretch = beyond < 0 ? mMotion[indexOf(axis)].startStretch : mMotion[indexOf(axis)].endStretch;
 			stretch.setLength(lengthAlong(localRect(), axis));
 			stretch.pull(std::abs(beyond));
+			requestLayout();
 			startTicking();
 		}
 	}
@@ -150,22 +194,47 @@ void Viewport::applyOffset(Vec2F offset, bool allowOverscroll) {
 }
 
 void Viewport::viewChanged() {
+	offsetChanged();
 	requestPaint();
 	if (mOnViewChanged) mOnViewChanged();
 }
 
 void Viewport::scrollTo(Vec2F offset) {
+	if (mPolicy.motion == ViewportPolicy::ScrollMotion::Animated) {
+		glideTo(offset);
+		return;
+	}
+	jumpTo(offset);
+}
+
+void Viewport::jumpTo(Vec2F offset) {
 	stopMotion();
 	applyOffset(offset, false);
 }
 
-void Viewport::scrollBy(Vec2F delta) { scrollTo(mOffset + delta); }
+void Viewport::glideTo(Vec2F offset) {
+	const Vec2F target = clamped(offset);
+	for (Axis axis : kAxes) {
+		AxisMotion& motion = mMotion[indexOf(axis)];
+		motion.fling.stop();
+		if (!scrolls(axis)) continue;
+		if (!motion.gliding) motion.glide.jumpTo(along(mOffset, axis));
+		motion.glide.animateTo(along(target, axis));
+		motion.gliding = true;
+	}
+	startTicking();
+}
+
+void Viewport::scrollBy(Vec2F delta) { scrollTo(targetOffset() + delta); }
 
 void Viewport::stopMotion() {
 	for (AxisMotion& motion : mMotion) {
 		motion.fling.stop();
-		motion.stretch.finish();
+		motion.gliding = false;
+		motion.startStretch.finish();
+		motion.endStretch.finish();
 	}
+	requestLayout();
 }
 
 void Viewport::setZoom(halnf zoom) { zoomAround(size() / 2.0f, zoom / mZoom); }
@@ -184,8 +253,12 @@ void Viewport::zoomAround(Vec2F viewPoint, halnf factor) {
 }
 
 void Viewport::reveal(const RectF& contentRect, std::optional<halnf> requestedMargin) {
+	scrollTo(revealOffset(contentRect, requestedMargin));
+}
+
+Vec2F Viewport::revealOffset(const RectF& contentRect, std::optional<halnf> requestedMargin) const {
 	const halnf margin = requestedMargin.value_or(theme().interaction.revealMargin);
-	Vec2F target = mOffset;
+	Vec2F target = targetOffset();
 	const Vec2F view = size();
 	for (Axis axis : kAxes) {
 		if (!scrolls(axis)) continue;
@@ -195,7 +268,7 @@ void Viewport::reveal(const RectF& contentRect, std::optional<halnf> requestedMa
 		if (start < offset) offset = start;
 		else if (end > offset + along(view, axis)) offset = end - along(view, axis);
 	}
-	scrollTo(target);
+	return target;
 }
 
 bool Viewport::autoScrollAt(Vec2F viewPoint, halnf deltaMs) {
@@ -217,7 +290,8 @@ bool Viewport::autoScrollAt(Vec2F viewPoint, halnf deltaMs) {
 Vec2F Viewport::stretch() const {
 	Vec2F result = { 0, 0 };
 	for (Axis axis : kAxes) {
-		along(result, axis) = mMotion[indexOf(axis)].stretch.visualOffset();
+		const AxisMotion& motion = mMotion[indexOf(axis)];
+		along(result, axis) = motion.startStretch.visualOffset() - motion.endStretch.visualOffset();
 	}
 	return result;
 }
@@ -229,12 +303,7 @@ bool Viewport::hitTest(Vec2F) const { return true; }
 void Viewport::onEvent(Event& event) {
 	switch (event.type()) {
 		case Event::Type::Wheel: handleWheel(event); break;
-		case Event::Type::WheelEnd:
-			for (AxisMotion& motion : mMotion) {
-				motion.stretch.release();
-			}
-			startTicking();
-			break;
+		case Event::Type::WheelEnd: releaseStretches({ 0, 0 }); break;
 		case Event::Type::Gesture: handleGesture(event); break;
 		case Event::Type::Drag: handleDrag(event); break;
 		default: break;
@@ -268,9 +337,15 @@ void Viewport::handleWheel(Event& event) {
 	}
 	if (delta == Vec2F(0, 0)) return;
 
-	const Vec2F before = mOffset;
+	const Vec2F before = targetOffset();
+	if (!event.isTouchpadScroll() && mPolicy.motion == ViewportPolicy::ScrollMotion::Animated) {
+		glideTo(before + delta);
+		if (!(before == targetOffset())) event.accept();
+		return;
+	}
 	for (AxisMotion& motion : mMotion) {
 		motion.fling.stop();
+		motion.gliding = false;
 	}
 	applyOffset(mOffset + delta, event.isTouchpadScroll());
 	if (!(before == mOffset) || event.isTouchpadScroll()) event.accept();
@@ -286,12 +361,7 @@ void Viewport::handleGesture(Event& event) {
 		}
 		if (!(gesture->pan == Vec2F(0, 0))) applyOffset(mOffset - gesture->pan, true);
 	}
-	if (gesture->phase == GesturePhase::End) {
-		for (AxisMotion& motion : mMotion) {
-			motion.stretch.release();
-		}
-		startTicking();
-	}
+	if (gesture->phase == GesturePhase::End) releaseStretches({ 0, 0 });
 	event.accept();
 }
 
@@ -309,45 +379,87 @@ void Viewport::handleDrag(Event& event) {
 
 	switch (drag->phase) {
 		case DragPhase::Started:
-			stopMotion();
+			for (AxisMotion& motion : mMotion) {
+				motion.fling.stop();
+				motion.gliding = false;
+			}
 			mPanning = true;
 			mSamples.clear();
+			mSamples.push_back({ mClockMs, mOffset });
 			[[fallthrough]];
 		case DragPhase::Moved:
-			applyOffset(mOffset - drag->delta, true);
+			pan(drag->delta * -1.0f);
 			mSamples.push_back({ mClockMs, mOffset });
 			startTicking();
 			break;
 		case DragPhase::Finished:
 			mPanning = false;
-			for (AxisMotion& motion : mMotion) {
-				motion.stretch.release();
-			}
-			startFling(dragVelocity());
+			releaseStretches(dragVelocity());
 			break;
 		case DragPhase::Cancelled:
 			mPanning = false;
-			for (AxisMotion& motion : mMotion) {
-				motion.stretch.release();
-			}
+			releaseStretches({ 0, 0 });
 			break;
 	}
 	event.accept();
 }
 
-Vec2F Viewport::dragVelocity() const {
-	if (mSamples.size() < 2) return { 0, 0 };
-	const Sample& last = mSamples.back();
-	const Sample* first = &mSamples.front();
-	for (const Sample& sample : mSamples) {
-		if (last.timeMs - sample.timeMs <= kVelocityWindowMs) {
-			first = &sample;
-			break;
+void Viewport::pan(Vec2F delta) {
+	// A pulled stretch gives back first: moving back toward the content shrinks the overscroll before it scrolls.
+	Vec2F remaining = delta;
+	for (Axis axis : kAxes) {
+		if (!scrolls(axis)) continue;
+		AxisMotion& motion = mMotion[indexOf(axis)];
+		halnf& left = along(remaining, axis);
+		if (left > 0 && motion.startStretch.distance() > 0) left += motion.startStretch.pull(-left);
+		if (left < 0 && motion.endStretch.distance() > 0) left -= motion.endStretch.pull(left);
+	}
+	requestLayout();
+	applyOffset(mOffset + remaining, true);
+}
+
+void Viewport::releaseStretches(Vec2F velocityPerSecond) {
+	for (Axis axis : kAxes) {
+		AxisMotion& motion = mMotion[indexOf(axis)];
+		const bool stretched = motion.startStretch.isPulling() || motion.endStretch.isPulling() ||
+													 motion.startStretch.isActive() || motion.endStretch.isActive();
+		motion.startStretch.release();
+		motion.endStretch.release();
+		const halnf velocity = along(velocityPerSecond, axis);
+		if (stretched) {
+			// The stretch absorbs the release instead of flinging, so a pulled list springs back rather than flies.
+			if (velocity != 0) (velocity < 0 ? motion.startStretch : motion.endStretch).absorb(velocity);
+			along(velocityPerSecond, axis) = 0;
 		}
 	}
-	const halnf elapsed = last.timeMs - first->timeMs;
-	if (elapsed <= 0) return { 0, 0 };
-	return (last.offset - first->offset) * (1000.0f / elapsed);
+	startFling(velocityPerSecond);
+	startTicking();
+}
+
+halnf Viewport::averageVelocity(const std::vector<std::pair<halnf, halnf>>& samples, halnf nowMs) {
+	if (samples.size() < 2) return 0;
+	const auto& newest = samples.back();
+	// Note: a pointer that held still before release flings nothing.
+	if (nowMs - newest.first >= kVelocityWindowMs) return 0;
+	size_t first = samples.size() - 1;
+	while (first > 0 && newest.first - samples[first - 1].first <= kVelocityWindowMs)
+		first--;
+	if (first == samples.size() - 1) first--;
+	const auto& oldest = samples[first];
+	if (newest.first <= oldest.first) return 0;
+	return (newest.second - oldest.second) / (newest.first - oldest.first);
+}
+
+Vec2F Viewport::dragVelocity() const {
+	Vec2F velocity = { 0, 0 };
+	for (Axis axis : kAxes) {
+		std::vector<std::pair<halnf, halnf>> samples;
+		for (const Sample& sample : mSamples) {
+			samples.emplace_back(sample.timeMs, along(sample.offset, axis));
+		}
+		along(velocity, axis) = averageVelocity(samples, mClockMs) * 1000.0f;
+	}
+	return velocity;
 }
 
 void Viewport::startFling(Vec2F velocityPerSecond) {
@@ -370,11 +482,26 @@ void Viewport::onTick(halnf deltaMs) {
 	for (Axis axis : kAxes) {
 		AxisMotion& motion = mMotion[indexOf(axis)];
 		if (motion.fling.isActive()) {
-			active |= motion.fling.advance(deltaMs);
+			const bool moving = motion.fling.advance(deltaMs);
 			along(offset, axis) = motion.fling.position();
+			// A fling that runs into an edge hands its speed to that edge's stretch, which bounces back.
+			if (!moving && motion.fling.hitEdge() && motion.fling.velocity() != 0 &&
+					mPolicy.overscroll == ViewportPolicy::Overscroll::Stretch) {
+				StretchEffect& edge = motion.fling.velocity() < 0 ? motion.startStretch : motion.endStretch;
+				edge.setLength(lengthAlong(localRect(), axis));
+				edge.absorb(motion.fling.velocity());
+			}
+			active = true;
+		} else if (motion.gliding) {
+			motion.gliding = motion.glide.advance(deltaMs);
+			along(offset, axis) = motion.glide.value();
+			active = true;
 		}
-		if (motion.stretch.isActive()) {
-			active |= motion.stretch.advance(deltaMs);
+		if (motion.startStretch.isActive() || motion.endStretch.isActive()) {
+			const bool start = motion.startStretch.advance(deltaMs);
+			const bool end = motion.endStretch.advance(deltaMs);
+			active |= start || end;
+			requestLayout();
 			requestPaint();
 		}
 	}
diff --git a/Widgets/src/core/private/Widget.cpp b/Widgets/src/core/private/Widget.cpp
index 537da1f7..615fbef4 100644
--- a/Widgets/src/core/private/Widget.cpp
+++ b/Widgets/src/core/private/Widget.cpp
@@ -71,6 +71,11 @@ void Widget::adoptChild(std::unique_ptr<Widget> child) {
 	mOwnedChildren.push_back(std::move(child));
 }
 
+void Widget::adoptChildAt(size_t index, std::unique_ptr<Widget> child) {
+	insertChild(index, *child);
+	mOwnedChildren.push_back(std::move(child));
+}
+
 void Widget::clearOwnedChildren() {
 	while (!mOwnedChildren.empty())
 		removeChild(*mOwnedChildren.back());
diff --git a/Widgets/src/core/public/Commands.hpp b/Widgets/src/core/public/Commands.hpp
index 069e3b83..579cc865 100644
--- a/Widgets/src/core/public/Commands.hpp
+++ b/Widgets/src/core/public/Commands.hpp
@@ -37,6 +37,12 @@ namespace tp::ui {
 			return definition && definition->action && (!definition->enabled || definition->enabled());
 		}
 
+		// Whether the command has an on/off state (a menu shows it as a toggle).
+		[[nodiscard]] bool isCheckable(Id id) const {
+			const Definition* definition = find(id);
+			return definition && definition->checked;
+		}
+
 		[[nodiscard]] bool isChecked(Id id) const {
 			const Definition* definition = find(id);
 			return definition && definition->checked && definition->checked();
diff --git a/Widgets/src/core/public/Elevation.hpp b/Widgets/src/core/public/Elevation.hpp
new file mode 100644
index 00000000..3b61e93c
--- /dev/null
+++ b/Widgets/src/core/public/Elevation.hpp
@@ -0,0 +1,19 @@
+#pragma once
+
+#include "Geometry.hpp"
+
+namespace tp {
+	class Canvas;
+}
+
+namespace tp::ui {
+
+	struct Theme;
+
+	// Paints the theme's drop shadow under a surface lifted above its neighbours (raised panels, lifted list items,
+	// popups); call it before painting the surface itself: paintElevationShadow(canvas, localRect(), radius, theme()).
+	void paintElevationShadow(Canvas& canvas, const RectF& surface, halnf cornerRadius, const Theme& theme);
+
+	// The area paintElevationShadow draws into, so an owner can keep it inside its paint overhang or clip.
+	[[nodiscard]] RectF elevationShadowBounds(const RectF& surface, const Theme& theme);
+}
diff --git a/Widgets/src/core/public/Glyph.hpp b/Widgets/src/core/public/Glyph.hpp
new file mode 100644
index 00000000..90db3a32
--- /dev/null
+++ b/Widgets/src/core/public/Glyph.hpp
@@ -0,0 +1,62 @@
+#pragma once
+
+#include "Geometry.hpp"
+
+namespace tp {
+	class Canvas;
+}
+
+namespace tp::ui {
+
+	struct Theme;
+
+	// The small symbols widgets draw instead of images: chevrons, marks, transport and window symbols, file icons.
+	// Every glyph is drawn inside the largest square centered in the given box, so one box size gives one look.
+	enum class Glyph {
+		ChevronRight,
+		ChevronLeft,
+		ChevronUp,
+		ChevronDown,
+		Check,
+		Plus,
+		Minus,
+		Close,
+		Play,
+		Pause,
+		SkipPrevious,
+		SkipNext,
+		Folder,
+		File,
+		Grip,
+		Search,
+		Menu,
+		More,
+		Maximize,
+		Restore,
+		Volume,
+		Muted,
+		// The bottom-right corner of a box: a resize grip.
+		ResizeCorner,
+	};
+
+	inline constexpr Glyph kAllGlyphs[] = {
+		Glyph::ChevronRight, Glyph::ChevronLeft, Glyph::ChevronUp, Glyph::ChevronDown, Glyph::Check,
+		Glyph::Plus,         Glyph::Minus,       Glyph::Close,     Glyph::Play,        Glyph::Pause,
+		Glyph::SkipPrevious, Glyph::SkipNext,    Glyph::Folder,    Glyph::File,        Glyph::Grip,
+		Glyph::Search,       Glyph::Menu,        Glyph::More,      Glyph::Maximize,    Glyph::Restore,
+		Glyph::Volume,       Glyph::Muted,       Glyph::ResizeCorner,
+	};
+
+	// Draws a glyph with the theme's glyph stroke: paintGlyph(canvas, Glyph::ChevronRight, glyphBox(localRect(), 12), color, theme()).
+	void paintGlyph(Canvas& canvas, Glyph glyph, const RectF& box, const RGBA& color, const Theme& theme);
+	// Same with an explicit line width, for glyphs drawn at a zoom.
+	void paintGlyph(Canvas& canvas, Glyph glyph, const RectF& box, const RGBA& color, halnf stroke);
+	// Turned by an angle in radians around the box center (clockwise on screen): a chevron that turns as it opens.
+	void paintGlyph(Canvas& canvas, Glyph glyph, const RectF& box, const RGBA& color, const Theme& theme, halnf turn);
+
+	// The general form: an explicit line width and a turn.
+	void paintTurnedGlyph(Canvas& canvas, Glyph glyph, const RectF& box, const RGBA& color, halnf stroke, halnf turn);
+
+	// A square of the given side centered in an area; the usual box to hand to paintGlyph.
+	[[nodiscard]] RectF glyphBox(const RectF& area, halnf side);
+}
diff --git a/Widgets/src/core/public/InteractionVisual.hpp b/Widgets/src/core/public/InteractionVisual.hpp
new file mode 100644
index 00000000..148ed1a0
--- /dev/null
+++ b/Widgets/src/core/public/InteractionVisual.hpp
@@ -0,0 +1,57 @@
+#pragma once
+
+#include "Animation.hpp"
+
+namespace tp::ui {
+
+	class Widget;
+
+	// The colors a surface shows in each pointer state.
+	struct InteractionColors {
+		RGBA rest;
+		RGBA hovered;
+		RGBA pressed;
+		RGBA disabled;
+
+		// The same color in every state, fading in from transparent: the usual flat hover highlight.
+		static InteractionColors highlight(const RGBA& hovered, const RGBA& pressed);
+	};
+
+	// Animated hover/press/disabled color and hover reveal amount that any widget can hold as a member. The owner calls
+	// refresh() when its state changes (hover, press, enable, colors) and starts ticking when it returns true, then
+	// advances it in onTick: `if (mVisual.refresh()) startTicking();` / `if (!mVisual.advance(deltaMs)) stopTicking();`.
+	class InteractionVisual {
+	public:
+		explicit InteractionVisual(const Widget& owner, const InteractionColors& colors = {});
+
+		void setColors(const InteractionColors& colors);
+		[[nodiscard]] const InteractionColors& colors() const { return mColors; }
+
+		// Keeps the reveal at 1 while held, for reasons other than hover (a drag in progress, a flash after scrolling).
+		void setRevealHeld(bool held);
+
+		// Retargets the animations to the owner's current state; returns whether they now need ticking.
+		bool refresh();
+		// Shows the current state at once, for example when the owner is attached.
+		void finish();
+		// Steps the animations; returns whether they are still moving.
+		bool advance(halnf deltaMs);
+		[[nodiscard]] bool isAnimating() const { return mColor.isAnimating() || mReveal.isAnimating(); }
+
+		[[nodiscard]] RGBA color() const { return mColor.value(); }
+		[[nodiscard]] RGBA targetColor() const { return mColor.target(); }
+		// 0 when the pointer is away, 1 while it hovers or presses the owner or the reveal is held.
+		[[nodiscard]] halnf reveal() const;
+
+	private:
+		[[nodiscard]] RGBA colorForState() const;
+		[[nodiscard]] halnf revealForState() const;
+		void followThemeMotion();
+
+		const Widget& mOwner;
+		InteractionColors mColors;
+		bool mRevealHeld = false;
+		AnimatedColor mColor;
+		AnimatedFloat mReveal;
+	};
+}
diff --git a/Widgets/src/core/public/Layout.hpp b/Widgets/src/core/public/Layout.hpp
index 221db6e8..f4f15818 100644
--- a/Widgets/src/core/public/Layout.hpp
+++ b/Widgets/src/core/public/Layout.hpp
@@ -19,6 +19,7 @@ namespace tp::ui {
 		[[nodiscard]] Extent measure(const Widget& child, Axis axis, halnf crossLength) const;
 		void place(Widget& child, const RectF& rect) const;
 		[[nodiscard]] LayoutContext without(const Widget& child) const;
+		[[nodiscard]] LayoutContext without(const std::vector<const Widget*>& children) const;
 
 	private:
 		LayoutEngine& mEngine;
diff --git a/Widgets/src/core/public/ListNavigator.hpp b/Widgets/src/core/public/ListNavigator.hpp
new file mode 100644
index 00000000..1066f286
--- /dev/null
+++ b/Widgets/src/core/public/ListNavigator.hpp
@@ -0,0 +1,40 @@
+#pragma once
+
+#include "Geometry.hpp"
+#include "InputCodes.hpp"
+
+#include <functional>
+#include <optional>
+#include <string>
+
+namespace tp::ui {
+
+	// Keyboard movement through a list of items, some of which cannot be chosen (disabled rows, separators): arrows,
+	// Home/End, page steps and type-ahead. Lists, menus, dropdowns and search results all move the same way.
+	class ListNavigator {
+	public:
+		struct Items {
+			size_t count = 0;
+			// Whether an item can become current; all can when unset.
+			std::function<bool(size_t)> isAvailable;
+			// The text type-ahead matches; type-ahead is off when unset.
+			std::function<std::string(size_t)> text;
+		};
+
+		// The item a key moves to from the current one, or nothing when the key does not move (or there is nowhere to go).
+		// pageSize is how many items a page step skips. Up/Down stop at the ends unless wrapping is on.
+		[[nodiscard]] static std::optional<size_t> step(
+			const Items& items, std::optional<size_t> current, Key key, size_t pageSize = 10, bool wraps = false
+		);
+
+		// Collects typed characters for a short while and returns the first available item whose text starts with them,
+		// starting after the current item (typing the same letter again cycles through items starting with it).
+		std::optional<size_t> typeAhead(const Items& items, std::optional<size_t> current, const std::string& typed, halnf nowMs);
+
+		static constexpr halnf kTypeAheadResetMs = 800;
+
+	private:
+		std::string mPrefix;
+		halnf mLastTypedMs = -kTypeAheadResetMs;
+	};
+}
diff --git a/Widgets/src/core/public/ReorderSession.hpp b/Widgets/src/core/public/ReorderSession.hpp
index 9356f9e5..03cba0eb 100644
--- a/Widgets/src/core/public/ReorderSession.hpp
+++ b/Widgets/src/core/public/ReorderSession.hpp
@@ -22,8 +22,10 @@ namespace tp::ui {
 		[[nodiscard]] bool operator==(const ReorderSlot& other) const = default;
 	};
 
-	// The rules of lifting an item and dropping it somewhere else: which lane the pointer is over and where among its
-	// items the item would land (before the first item whose middle the pointer has not passed).
+	// The rules of lifting an item and dropping it somewhere else: which lane the item is over and where among its items
+	// it would land. By pointer: before the first item whose middle the pointer has not passed. By the lifted item's
+	// rect: in its own lane a neighbour makes room once the lifted item's leading edge passes the neighbour's middle
+	// (so a tall item does not jump early); in another lane its middle decides, like the pointer.
 	class ReorderSession {
 	public:
 		ReorderSession(ReorderSlot origin, Vec2F grabOffset);
@@ -38,8 +40,13 @@ namespace tp::ui {
 
 		// Follows the pointer over the lanes; returns whether the target changed.
 		bool update(Vec2F windowPointer, const std::vector<ReorderLane>& lanes);
+		// Follows the lifted item's rect (window coordinates) over the lanes; returns whether the target changed.
+		bool updateLifted(const RectF& lifted, const std::vector<ReorderLane>& lanes);
 
 		[[nodiscard]] static size_t slotIn(const ReorderLane& lane, Vec2F windowPointer);
+		// The slot of a lifted rect in a lane; originIndex is where it was lifted from when this is its own lane, whose
+		// items are then at the positions they had before the lift (the lifted item's place left empty).
+		[[nodiscard]] static size_t slotFor(const ReorderLane& lane, const RectF& lifted, std::optional<size_t> originIndex);
 
 	private:
 		ReorderSlot mOrigin;
diff --git a/Widgets/src/core/public/Theme.hpp b/Widgets/src/core/public/Theme.hpp
index d434e7a0..5a1a4118 100644
--- a/Widgets/src/core/public/Theme.hpp
+++ b/Widgets/src/core/public/Theme.hpp
@@ -46,6 +46,8 @@ namespace tp::ui {
 
 		void setAccent(const RGBA& accent);
 		static RGBA mix(const RGBA& from, const RGBA& to, halnf amount);
+		// The color with its own alpha scaled by an opacity (0 transparent, 1 unchanged), for fading painted parts.
+		static RGBA faded(const RGBA& color, halnf opacity) { return { color.r, color.g, color.b, color.a * opacity }; }
 	};
 
 	// The sizes every widget shares. Sizes that belong to one kind of widget (slider ticks, scroll bars, menu rows) live
@@ -70,8 +72,9 @@ namespace tp::ui {
 		Insets popupPadding = Insets::uniform(5);
 		Insets tooltipPadding = Insets::symmetric(8, 5);
 
-		// Lifted items, popups and floating panels: how far the shadow falls.
+		// Lifted items, popups and raised panels: how far the shadow falls, and how soft its edge is.
 		halnf elevation = 4;
+		halnf shadowBlur = 8;
 		// Line width of drawn glyphs such as chevrons and check marks.
 		halnf glyphStroke = 1.5f;
 
@@ -97,6 +100,8 @@ namespace tp::ui {
 		halnf wheelZoomFactor = 1.15f;
 		// Space kept around an item scrolled into view.
 		halnf revealMargin = 8;
+		// How fast hover, press and reveal visuals follow the pointer (see InteractionVisual).
+		halnf surfaceResponseMs = 160;
 
 		[[nodiscard]] Interaction scaled(halnf factor) const;
 	};
diff --git a/Widgets/src/core/public/Ui.hpp b/Widgets/src/core/public/Ui.hpp
index 7ec3b978..90af0efc 100644
--- a/Widgets/src/core/public/Ui.hpp
+++ b/Widgets/src/core/public/Ui.hpp
@@ -75,6 +75,8 @@ namespace tp::ui {
 		// Delivers every event of a frame in order.
 		void dispatch(const InputState& frame);
 		void advance(halnf deltaMs);
+		// Milliseconds the Ui has advanced since it was made: the one clock for timing input (type-ahead, long presses).
+		[[nodiscard]] halnf clockMs() const;
 		void updateLayout();
 		void paint(Canvas& canvas);
 		[[nodiscard]] bool needsFrame() const;
@@ -93,6 +95,8 @@ namespace tp::ui {
 		void closeAllPopups();
 		[[nodiscard]] bool isPopupOpen(const Widget& content) const;
 		[[nodiscard]] const RectF* popupAnchorOf(const Widget& content) const;
+		// The widget that opened a popup (a menu title, an item with a submenu), or null.
+		[[nodiscard]] Widget* popupOwnerOf(const Widget& content) const;
 		[[nodiscard]] ualni openPopupCount() const;
 
 		void capturePointer(Widget& widget);
@@ -112,6 +116,8 @@ namespace tp::ui {
 		[[nodiscard]] const KeyModifiers& modifiers() const;
 		[[nodiscard]] bool isDragging() const;
 		void cancelDrag();
+		// Makes the held press a drag of this widget from where the pointer is now; returns whether it could.
+		bool claimDrag(Widget& widget);
 		[[nodiscard]] Widget* widgetAt(Vec2F windowPoint) const;
 
 		[[nodiscard]] Widget* openTooltip() const;
diff --git a/Widgets/src/core/public/Viewport.hpp b/Widgets/src/core/public/Viewport.hpp
index 41ed79f2..7e709b47 100644
--- a/Widgets/src/core/public/Viewport.hpp
+++ b/Widgets/src/core/public/Viewport.hpp
@@ -1,5 +1,6 @@
 #pragma once
 
+#include "Animation.hpp"
 #include "ScrollPhysics.hpp"
 #include "Widget.hpp"
 
@@ -10,9 +11,13 @@
 
 namespace tp::ui {
 
+	class LayoutContext;
+
 	// What a viewport lets the user do with its content.
 	struct ViewportPolicy {
 		enum class Inertia { None, Fling };
+		// How wheel notches and scrollTo move the view: at once, or with a short glide.
+		enum class ScrollMotion { Instant, Animated };
 		enum class Overscroll { Clamp, Stretch };
 		enum class Bounds { Content, Free };
 
@@ -26,6 +31,7 @@ namespace tp::ui {
 		// Which pointer buttons pan by dragging the content; touch always pans.
 		std::vector<PointerButton> panButtons;
 		Inertia inertia = Inertia::Fling;
+		ScrollMotion motion = ScrollMotion::Instant;
 		Overscroll overscroll = Overscroll::Stretch;
 		// Content keeps the offset inside the content bounds, Free lets it go anywhere (canvases).
 		Bounds bounds = Bounds::Content;
@@ -60,12 +66,18 @@ namespace tp::ui {
 		[[nodiscard]] bool isScrollable(Axis axis) const;
 		[[nodiscard]] bool isMoving() const;
 
+		// Moves the view, gliding when the policy animates; jumpTo always moves at once.
 		void scrollTo(Vec2F offset);
 		void scrollBy(Vec2F delta);
+		void jumpTo(Vec2F offset);
+		// Where the view is heading: the end of a glide or fling, or the current offset.
+		[[nodiscard]] Vec2F targetOffset() const;
 		void zoomAround(Vec2F viewPoint, halnf factor);
 		void setZoom(halnf zoom);
 		// Scrolls the least needed to show a content-space rect, with the theme's reveal margin unless one is given.
 		void reveal(const RectF& contentRect, std::optional<halnf> margin = std::nullopt);
+		// The offset reveal would scroll to, without moving.
+		[[nodiscard]] Vec2F revealOffset(const RectF& contentRect, std::optional<halnf> margin = std::nullopt) const;
 		// Scrolls toward a view point near an edge while something is dragged over it; call every tick.
 		bool autoScrollAt(Vec2F viewPoint, halnf deltaMs);
 		void stopMotion();
@@ -73,8 +85,22 @@ namespace tp::ui {
 		[[nodiscard]] Vec2F toContent(Vec2F viewPoint) const { return (viewPoint + mOffset) / mZoom; }
 		[[nodiscard]] Vec2F toView(Vec2F contentPoint) const { return contentPoint * mZoom - mOffset; }
 
-		// Visual overscroll of the stretch effect, in view pixels.
+		// Visual overscroll of the stretch effect, in view pixels: positive pulls the content away from its start edge.
 		[[nodiscard]] Vec2F stretch() const;
+		[[nodiscard]] bool isStretched() const;
+		[[nodiscard]] bool isFlinging() const;
+		[[nodiscard]] bool isPanning() const { return mPanning; }
+		// The fling velocity along an axis in pixels per millisecond, 0 when not flinging.
+		[[nodiscard]] halnf flingVelocity(Axis axis) const;
+		[[nodiscard]] const FlingSpline& fling(Axis axis) const { return mMotion[axis == Axis::Horizontal ? 0 : 1].fling; }
+		[[nodiscard]] const StretchEffect& startStretch(Axis axis) const {
+			return mMotion[axis == Axis::Horizontal ? 0 : 1].startStretch;
+		}
+		[[nodiscard]] const StretchEffect& endStretch(Axis axis) const {
+			return mMotion[axis == Axis::Horizontal ? 0 : 1].endStretch;
+		}
+		// Average speed over the last 100 ms of samples (time ms, offset px), in px/ms; 0 when the pointer held still.
+		[[nodiscard]] static halnf averageVelocity(const std::vector<std::pair<halnf, halnf>>& samples, halnf nowMs);
 
 		void setOnViewChanged(std::function<void()> callback) { mOnViewChanged = std::move(callback); }
 
@@ -82,6 +108,11 @@ namespace tp::ui {
 		static constexpr halnf kAutoScrollSpeed = 0.9f;
 
 	protected:
+		// Subclasses that add children besides the content (a scroll bar) place them here, after the content.
+		virtual void arrangeOverlays(LayoutContext& context, const RectF& area) {}
+		// Called whenever the offset changes, before the view-changed callback.
+		virtual void offsetChanged() {}
+
 		[[nodiscard]] Extent measureContent(Axis axis, halnf crossLength) const override;
 		void onEvent(Event& event) override;
 		void filterDescendantEvent(Event& event) override;
@@ -95,7 +126,11 @@ namespace tp::ui {
 
 		struct AxisMotion {
 			FlingSpline fling;
-			StretchEffect stretch;
+			// Overscroll at the start edge (pulled past 0) and the end edge (pulled past the maximum).
+			StretchEffect startStretch;
+			StretchEffect endStretch;
+			AnimatedFloat glide{ 0, Motion::quick() };
+			bool gliding = false;
 		};
 
 		struct Sample {
@@ -104,6 +139,9 @@ namespace tp::ui {
 		};
 
 		void handleWheel(Event& event);
+		void pan(Vec2F delta);
+		void releaseStretches(Vec2F velocityPerSecond);
+		void glideTo(Vec2F offset);
 		void handleGesture(Event& event);
 		void handleDrag(Event& event);
 		void startFling(Vec2F velocityPerSecond);
diff --git a/Widgets/src/core/public/Widget.hpp b/Widgets/src/core/public/Widget.hpp
index 8a887580..7988e10e 100644
--- a/Widgets/src/core/public/Widget.hpp
+++ b/Widgets/src/core/public/Widget.hpp
@@ -46,6 +46,14 @@ namespace tp::ui {
 			adoptChild(std::move(child));
 			return reference;
 		}
+		// Same, inserted at a position among the children.
+		template <typename WidgetType, typename... Arguments>
+		WidgetType& emplaceChildAt(size_t index, Arguments&&... arguments) {
+			auto child = std::make_unique<WidgetType>(std::forward<Arguments>(arguments)...);
+			WidgetType& reference = *child;
+			adoptChildAt(index, std::move(child));
+			return reference;
+		}
 		// Removes and destroys every owned child; borrowed children stay.
 		void clearOwnedChildren();
 		[[nodiscard]] size_t ownedChildCount() const { return mOwnedChildren.size(); }
@@ -188,6 +196,7 @@ namespace tp::ui {
 
 		Widget* mParent = nullptr;
 		void adoptChild(std::unique_ptr<Widget> child);
+		void adoptChildAt(size_t index, std::unique_ptr<Widget> child);
 
 		std::vector<Widget*> mChildren;
 		std::vector<std::unique_ptr<Widget>> mOwnedChildren;
diff --git a/Widgets/src/layouts/private/BoxLayout.cpp b/Widgets/src/layouts/private/BoxLayout.cpp
index b310d936..591df7a4 100644
--- a/Widgets/src/layouts/private/BoxLayout.cpp
+++ b/Widgets/src/layouts/private/BoxLayout.cpp
@@ -1,6 +1,9 @@
 #include "BoxLayout.hpp"
 
 #include "SpaceDistribution.hpp"
+#include "Widget.hpp"
+
+#include <algorithm>
 
 using namespace tp;
 using namespace tp::ui;
@@ -24,6 +27,11 @@ void BoxLayout::setMainAlign(MainAlign align) {
 	invalidate();
 }
 
+void BoxLayout::setReversed(bool reversed) {
+	mReversed = reversed;
+	invalidate();
+}
+
 Extent BoxLayout::measureChildren(const LayoutContext& context, Axis axis, halnf crossLength) const {
 	return axis == mAxis ? measureMainAxis(context, crossLength) : measureCrossAxis(context, crossLength);
 }
@@ -71,8 +79,9 @@ Extent BoxLayout::measureCrossAxis(const LayoutContext& context, halnf mainLengt
 }
 
 void BoxLayout::arrangeChildren(LayoutContext& context, const RectF& contentArea) {
-	const auto& children = context.children();
+	std::vector<Widget*> children = context.children();
 	if (children.empty()) return;
+	if (mReversed) std::reverse(children.begin(), children.end());
 
 	const Axis cross = crossAxis(mAxis);
 	const halnf available = lengthAlong(contentArea, mAxis) - totalGap(context);
@@ -139,3 +148,92 @@ halnf BoxLayout::crossStartFor(halnf length, halnf available) const {
 	}
 	return 0;
 }
+
+void RowLayout::setOverflow(size_t first, size_t count, Widget* indicator) {
+	mOverflowFirst = first;
+	mOverflowCount = count;
+	mIndicator = indicator;
+	invalidate();
+}
+
+void RowLayout::clearOverflow() { setOverflow(0, 0, nullptr); }
+
+std::vector<Widget*> RowLayout::overflowRun(const LayoutContext& context) const {
+	// Note: the run is counted in the owner's children (hidden ones included), since cut items are hidden.
+	const std::vector<Widget*>& all = context.owner().children();
+	std::vector<Widget*> run;
+	for (size_t index = mOverflowFirst; index < mOverflowFirst + mOverflowCount && index < all.size(); index++) {
+		run.push_back(all[index]);
+	}
+	return run;
+}
+
+Extent RowLayout::measureChildren(const LayoutContext& context, Axis axis, halnf crossLength) const {
+	if (!overflows() || axis != Axis::Horizontal) return BoxLayout::measureChildren(context, axis, crossLength);
+
+	// The row can shrink down to the children outside the run plus the indicator: the run is what gives way.
+	Extent extent = BoxLayout::measureChildren(context, axis, crossLength);
+	halnf runMinimum = 0;
+	for (const Widget* item : overflowRun(context)) {
+		if (item->isVisible()) runMinimum += context.measure(*item, Axis::Horizontal, crossLength).minimum + gap();
+	}
+	const halnf indicator = mIndicator ? context.measure(*mIndicator, Axis::Horizontal, crossLength).preferred + gap() : 0;
+	extent.minimum = std::max(0.0f, extent.minimum - runMinimum) + (mIndicator && !mIndicator->isVisible() ? indicator : 0);
+	return extent;
+}
+
+size_t RowLayout::fittingItems(const LayoutContext& context, const RectF& contentArea) const {
+	const halnf height = contentArea.size.y;
+	const auto widthOf = [&](const Widget& widget) {
+		return context.measure(widget, Axis::Horizontal, height).minimum + gap();
+	};
+	const std::vector<Widget*> run = overflowRun(context);
+
+	// Everything that is not cut: children outside the run, which keep at least their minimum width.
+	halnf fixed = 0;
+	const std::vector<Widget*>& all = context.owner().children();
+	for (size_t index = 0; index < all.size(); index++) {
+		const bool inRun = index >= mOverflowFirst && index < mOverflowFirst + mOverflowCount;
+		if (inRun || all[index] == mIndicator || !all[index]->isVisible()) continue;
+		fixed += widthOf(*all[index]);
+	}
+
+	halnf total = fixed;
+	for (const Widget* item : run) {
+		total += context.measure(*item, Axis::Horizontal, height).preferred + gap();
+	}
+	if (total <= contentArea.size.x + gap()) return run.size();
+
+	halnf used = fixed + (mIndicator ? context.measure(*mIndicator, Axis::Horizontal, height).preferred + gap() : 0);
+	size_t count = 0;
+	for (const Widget* item : run) {
+		used += context.measure(*item, Axis::Horizontal, height).preferred + gap();
+		if (used > contentArea.size.x + gap()) break;
+		count++;
+	}
+	return count;
+}
+
+void RowLayout::arrangeChildren(LayoutContext& context, const RectF& contentArea) {
+	if (overflows()) {
+		const size_t shown = fittingItems(context, contentArea);
+		const std::vector<Widget*> run = overflowRun(context);
+		const bool changed = shown != mShownOverflowItems;
+		mShownOverflowItems = shown;
+
+		// Note: visibility only changes when the fit changes, so arranging the same width twice settles.
+		for (size_t index = 0; index < run.size(); index++) {
+			if (run[index]->isVisible() != (index < shown)) run[index]->setVisible(index < shown);
+		}
+		if (mIndicator && mIndicator->isVisible() != (shown < run.size())) mIndicator->setVisible(shown < run.size());
+		if (changed && mOnOverflowChanged) mOnOverflowChanged(shown);
+
+		// Note: setVisible only takes effect in the next layout context, so the cut children are left out here too.
+		std::vector<const Widget*> cut(run.begin() + (std::ptrdiff_t) shown, run.end());
+		if (mIndicator && shown == run.size()) cut.push_back(mIndicator);
+		LayoutContext visible = context.without(cut);
+		BoxLayout::arrangeChildren(visible, contentArea);
+		return;
+	}
+	BoxLayout::arrangeChildren(context, contentArea);
+}
diff --git a/Widgets/src/layouts/private/StackLayout.cpp b/Widgets/src/layouts/private/StackLayout.cpp
index d75b0e0c..6f260722 100644
--- a/Widgets/src/layouts/private/StackLayout.cpp
+++ b/Widgets/src/layouts/private/StackLayout.cpp
@@ -2,6 +2,7 @@
 
 #include <algorithm>
 
+#include "SpaceDistribution.hpp"
 #include "Widget.hpp"
 
 using namespace tp;
@@ -68,6 +69,7 @@ GridLayout::GridLayout(ualni columns, halnf gap) :
 
 void GridLayout::setColumns(ualni columns) {
 	mColumns = columns > 0 ? columns : 1;
+	mColumnWidths.clear();
 	invalidate();
 }
 
@@ -81,50 +83,65 @@ void GridLayout::setCellSize(std::optional<Vec2F> cellSize) {
 	invalidate();
 }
 
+void GridLayout::setColumnWidths(std::vector<AxisSizing> widths) {
+	if (!widths.empty()) mColumns = widths.size();
+	mColumnWidths = std::move(widths);
+	invalidate();
+}
+
 Extent GridLayout::measureChildren(const LayoutContext& context, Axis axis, halnf crossLength) const {
 	if (mCellSize) {
 		const ualni lines = axis == Axis::Horizontal ? std::min<ualni>(mColumns, context.children().size()) : rowCount(context);
 		const halnf cell = axis == Axis::Horizontal ? mCellSize->x : mCellSize->y;
-		return Extent::rigid(lines == 0 ? 0 : cell * (halnf) lines + mGap * (halnf) (lines - 1));
+		return Extent::rigid(lines == 0 ? 0 : cell * (halnf) lines + totalGap(lines));
 	}
 
 	if (axis == Axis::Horizontal) {
-		const Extent widest = largestOf(context, Axis::Horizontal, kUnbounded);
-		const halnf gaps = mGap * (halnf) (mColumns - 1);
-		return { widest.minimum * (halnf) mColumns + gaps, widest.preferred * (halnf) mColumns + gaps, kUnbounded, 0 };
+		Extent total = { totalGap(mColumns), totalGap(mColumns), kUnbounded, 0 };
+		for (ualni column = 0; column < mColumns; column++) {
+			const Extent extent = columnExtent(context, column);
+			total.minimum += extent.minimum;
+			total.preferred += extent.preferred;
+		}
+		return total;
 	}
 
-	const halnf cellWidth = crossLength < kUnbounded ? columnWidth(crossLength) : kUnbounded;
+	const std::vector<halnf> widths = widthsWithin(context, crossLength);
 	const ualni rows = rowCount(context);
 
-	halnf height = rows > 1 ? mGap * (halnf) (rows - 1) : 0;
-	for (ualni row = 0; row < rows; row++)
-		height += rowHeight(context, row, cellWidth);
-	return { height, height, kUnbounded, 0 };
+	halnf height = totalGap(rows);
+	for (ualni row = 0; row < rows; row++) {
+		height += rowHeight(context, row, widths);
+	}
+	return Extent::natural(height);
 }
 
 void GridLayout::arrangeChildren(LayoutContext& context, const RectF& contentArea) {
-	if (mCellSize) {
-		for (ualni index = 0; index < context.children().size(); index++) {
-			const halnf left = contentArea.pos.x + (mCellSize->x + mGap) * (halnf) (index % mColumns);
-			const halnf top = contentArea.pos.y + (mCellSize->y + mGap) * (halnf) (index / mColumns);
-			context.place(*context.children()[index], makeRect({ left, top }, *mCellSize));
-		}
+	if (!mCellSize) {
+		arrangeCells(context, contentArea);
 		return;
 	}
 
-	const halnf cellWidth = columnWidth(contentArea.size.x);
+	for (ualni index = 0; index < context.children().size(); index++) {
+		const halnf left = contentArea.pos.x + (mCellSize->x + mGap) * (halnf) (index % mColumns);
+		const halnf top = contentArea.pos.y + (mCellSize->y + mGap) * (halnf) (index / mColumns);
+		context.place(*context.children()[index], makeRect({ left, top }, *mCellSize));
+	}
+}
+
+void GridLayout::arrangeCells(LayoutContext& context, const RectF& contentArea) {
+	const std::vector<halnf> widths = widthsWithin(context, contentArea.size.x);
 	halnf top = contentArea.pos.y;
 
 	for (ualni row = 0; row < rowCount(context); row++) {
-		const halnf height = rowHeight(context, row, cellWidth);
+		const halnf height = rowHeight(context, row, widths);
+		halnf left = contentArea.pos.x;
 
 		for (ualni column = 0; column < mColumns; column++) {
-			const ualni index = row * mColumns + column;
-			if (index >= context.children().size()) break;
-
-			const halnf left = contentArea.pos.x + (cellWidth + mGap) * (halnf) column;
-			context.place(*context.children()[index], { left, top, cellWidth, height });
+			if (Widget* cell = cellAt(context, row, column)) {
+				context.place(*cell, { left, top, widths[column], height });
+			}
+			left += widths[column] + mGap;
 		}
 
 		top += height + mGap;
@@ -135,19 +152,61 @@ ualni GridLayout::rowCount(const LayoutContext& context) const {
 	return (context.children().size() + mColumns - 1) / mColumns;
 }
 
-halnf GridLayout::columnWidth(halnf availableWidth) const {
-	const halnf width = (availableWidth - mGap * (halnf) (mColumns - 1)) / (halnf) mColumns;
-	return width > 0 ? width : 0;
+Widget* GridLayout::cellAt(const LayoutContext& context, ualni row, ualni column) const {
+	const ualni index = row * mColumns + column;
+	return index < context.children().size() ? context.children()[index] : nullptr;
 }
 
-halnf GridLayout::rowHeight(const LayoutContext& context, ualni row, halnf cellWidth) const {
+halnf GridLayout::totalGap(ualni lines) const { return lines > 1 ? mGap * (halnf) (lines - 1) : 0; }
+
+Extent GridLayout::columnExtent(const LayoutContext& context, ualni column) const {
+	const ualni firstColumn = mColumnWidths.empty() ? 0 : column;
+	const ualni lastColumn = mColumnWidths.empty() ? mColumns - 1 : column;
+
+	Extent widest = { 0, 0, kUnbounded, 0 };
+	for (ualni row = 0; row < rowCount(context); row++) {
+		for (ualni cellColumn = firstColumn; cellColumn <= lastColumn; cellColumn++) {
+			const Widget* cell = cellAt(context, row, cellColumn);
+			if (!cell) continue;
+
+			const Extent extent = context.measure(*cell, Axis::Horizontal, kUnbounded);
+			widest.minimum = std::max(widest.minimum, extent.minimum);
+			widest.preferred = std::max(widest.preferred, extent.preferred);
+		}
+	}
+
+	if (mColumnWidths.empty()) return widest;
+	return mColumnWidths[column].resolve(widest);
+}
+
+std::vector<halnf> GridLayout::widthsWithin(const LayoutContext& context, halnf availableWidth) const {
+	if (mColumnWidths.empty()) {
+		const halnf equal = availableWidth < kUnbounded ? (availableWidth - totalGap(mColumns)) / (halnf) mColumns : kUnbounded;
+		return std::vector<halnf>(mColumns, std::max(equal, 0.0f));
+	}
+
+	std::vector<Extent> extents;
+	for (ualni column = 0; column < mColumns; column++) {
+		extents.push_back(columnExtent(context, column));
+	}
+
+	if (availableWidth >= kUnbounded) {
+		std::vector<halnf> preferred;
+		for (const Extent& extent : extents) {
+			preferred.push_back(extent.preferred);
+		}
+		return preferred;
+	}
+	return distributeSpace(extents, availableWidth - totalGap(mColumns));
+}
+
+halnf GridLayout::rowHeight(const LayoutContext& context, ualni row, const std::vector<halnf>& widths) const {
 	halnf height = 0;
 	for (ualni column = 0; column < mColumns; column++) {
-		const ualni index = row * mColumns + column;
-		if (index >= context.children().size()) break;
+		const Widget* cell = cellAt(context, row, column);
+		if (!cell) continue;
 
-		const halnf childHeight = context.measure(*context.children()[index], Axis::Vertical, cellWidth).preferred;
-		if (childHeight > height) height = childHeight;
+		height = std::max(height, context.measure(*cell, Axis::Vertical, widths[column]).preferred);
 	}
 	return height;
 }
diff --git a/Widgets/src/layouts/public/BoxLayout.hpp b/Widgets/src/layouts/public/BoxLayout.hpp
index 32da8e44..8f95625f 100644
--- a/Widgets/src/layouts/public/BoxLayout.hpp
+++ b/Widgets/src/layouts/public/BoxLayout.hpp
@@ -2,6 +2,9 @@
 
 #include "Layout.hpp"
 
+#include <functional>
+#include <vector>
+
 namespace tp::ui {
 
 	enum class CrossAlign { Stretch, Start, Center, End };
@@ -14,6 +17,9 @@ namespace tp::ui {
 		void setGap(halnf gap);
 		void setCrossAlign(CrossAlign align);
 		void setMainAlign(MainAlign align);
+		// Places children from the last to the first. Child order is also paint and hit order, so a reversed column keeps
+		// its first-placed child (a header) above the ones after it (a body sliding out from under it).
+		void setReversed(bool reversed);
 
 		[[nodiscard]] Axis axis() const { return mAxis; }
 		[[nodiscard]] halnf gap() const { return mGap; }
@@ -33,12 +39,39 @@ namespace tp::ui {
 		halnf mGap;
 		CrossAlign mCrossAlign = CrossAlign::Stretch;
 		MainAlign mMainAlign = MainAlign::Start;
+		bool mReversed = false;
 	};
 
+	// A row of children. With overflow enabled, a run of children may be cut from its end when the row is too narrow (a
+	// menu bar's titles, a toolbar's buttons): they are not shown and an optional indicator child takes their place.
 	class RowLayout : public BoxLayout {
 	public:
 		explicit RowLayout(halnf gap = 0) :
 			BoxLayout(Axis::Horizontal, gap) {}
+
+		// Children [first, first + count) in child order may be cut from the end of that run to fit. The indicator (a
+		// "more" button) is shown only when something was cut and takes part in the fit; it must not be in the run.
+		void setOverflow(size_t first, size_t count, Widget* indicator = nullptr);
+		void clearOverflow();
+		// How many children of the run were shown at the last arrange.
+		[[nodiscard]] size_t shownOverflowItems() const { return mShownOverflowItems; }
+		// Called after an arrange that changed how many children of the run are shown.
+		void setOnOverflowChanged(std::function<void(size_t shown)> callback) { mOnOverflowChanged = std::move(callback); }
+
+	protected:
+		[[nodiscard]] Extent measureChildren(const LayoutContext& context, Axis axis, halnf crossLength) const override;
+		void arrangeChildren(LayoutContext& context, const RectF& contentArea) override;
+
+	private:
+		[[nodiscard]] bool overflows() const { return mOverflowCount > 0; }
+		[[nodiscard]] std::vector<Widget*> overflowRun(const LayoutContext& context) const;
+		[[nodiscard]] size_t fittingItems(const LayoutContext& context, const RectF& contentArea) const;
+
+		size_t mOverflowFirst = 0;
+		size_t mOverflowCount = 0;
+		Widget* mIndicator = nullptr;
+		size_t mShownOverflowItems = 0;
+		std::function<void(size_t)> mOnOverflowChanged;
 	};
 
 	class ColumnLayout : public BoxLayout {
diff --git a/Widgets/src/layouts/public/StackLayout.hpp b/Widgets/src/layouts/public/StackLayout.hpp
index 39979101..6b34ecd9 100644
--- a/Widgets/src/layouts/public/StackLayout.hpp
+++ b/Widgets/src/layouts/public/StackLayout.hpp
@@ -3,6 +3,7 @@
 #include "Layout.hpp"
 
 #include <optional>
+#include <vector>
 
 namespace tp::ui {
 
@@ -18,6 +19,8 @@ namespace tp::ui {
 		void arrangeChildren(LayoutContext& context, const RectF& contentArea) override;
 	};
 
+	// Children fill rows of `columns` cells, left to right. Columns are equally wide by default; setColumnWidths gives each
+	// column its own sizing (a table: fit columns for labels, a fill column for text), setCellSize makes every cell rigid.
 	class GridLayout : public Layout {
 	public:
 		explicit GridLayout(ualni columns, halnf gap = 0);
@@ -27,17 +30,28 @@ namespace tp::ui {
 		void setCellSize(std::optional<Vec2F> cellSize);
 		[[nodiscard]] const std::optional<Vec2F>& cellSize() const { return mCellSize; }
 
+		// One sizing per column; also sets the column count. A column's content is its widest cell; fit columns keep it,
+		// fixed columns ignore it, fill columns share the leftover width by weight, and every column shrinks towards its
+		// widest cell minimum when space runs out. An empty list restores equal columns.
+		void setColumnWidths(std::vector<AxisSizing> widths);
+		[[nodiscard]] const std::vector<AxisSizing>& columnWidths() const { return mColumnWidths; }
+
 	protected:
 		[[nodiscard]] Extent measureChildren(const LayoutContext& context, Axis axis, halnf crossLength) const override;
 		void arrangeChildren(LayoutContext& context, const RectF& contentArea) override;
 
 	private:
 		[[nodiscard]] ualni rowCount(const LayoutContext& context) const;
-		[[nodiscard]] halnf columnWidth(halnf availableWidth) const;
-		[[nodiscard]] halnf rowHeight(const LayoutContext& context, ualni row, halnf cellWidth) const;
+		[[nodiscard]] Widget* cellAt(const LayoutContext& context, ualni row, ualni column) const;
+		[[nodiscard]] Extent columnExtent(const LayoutContext& context, ualni column) const;
+		[[nodiscard]] std::vector<halnf> widthsWithin(const LayoutContext& context, halnf availableWidth) const;
+		[[nodiscard]] halnf rowHeight(const LayoutContext& context, ualni row, const std::vector<halnf>& widths) const;
+		[[nodiscard]] halnf totalGap(ualni lines) const;
+		void arrangeCells(LayoutContext& context, const RectF& contentArea);
 
 		ualni mColumns;
 		halnf mGap;
 		std::optional<Vec2F> mCellSize;
+		std::vector<AxisSizing> mColumnWidths;
 	};
 }
diff --git a/Widgets/tests/GlyphTests.cpp b/Widgets/tests/GlyphTests.cpp
new file mode 100644
index 00000000..960f8291
--- /dev/null
+++ b/Widgets/tests/GlyphTests.cpp
@@ -0,0 +1,125 @@
+#include "Canvas.hpp"
+#include "Glyph.hpp"
+#include "RecordingCanvasBackend.hpp"
+#include "Theme.hpp"
+
+#include "UnitTest++/UnitTest++.h"
+
+#include <memory>
+
+using namespace tp;
+using namespace tp::ui;
+
+namespace {
+	constexpr halnf kTolerance = 0.01f;
+
+	class RecordingCanvas {
+	public:
+		RecordingCanvas() {
+			auto backend = std::make_unique<RecordingCanvasBackend>();
+			mRecording = backend.get();
+			mCanvas = std::make_unique<Canvas>(std::move(backend));
+			mCanvas->beginFrame();
+		}
+
+		[[nodiscard]] Canvas& canvas() { return *mCanvas; }
+		[[nodiscard]] const std::vector<CanvasCommand>& commands() const { return mRecording->commands(); }
+		void clear() { mRecording->clear(); }
+
+	private:
+		RecordingCanvasBackend* mRecording = nullptr;
+		std::unique_ptr<Canvas> mCanvas;
+	};
+
+	bool inside(const RectF& inner, const RectF& outer) {
+		return inner.pos.x >= outer.pos.x - kTolerance && inner.pos.y >= outer.pos.y - kTolerance &&
+					 inner.pos.x + inner.size.x <= outer.pos.x + outer.size.x + kTolerance &&
+					 inner.pos.y + inner.size.y <= outer.pos.y + outer.size.y + kTolerance;
+	}
+
+	bool drawsStrokes(const CanvasCommand& command) {
+		return command.kind == CanvasCommand::Kind::Line || command.kind == CanvasCommand::Kind::Polyline ||
+					 command.kind == CanvasCommand::Kind::Outline || command.kind == CanvasCommand::Kind::CircleOutline;
+	}
+}
+
+SUITE(Glyphs) {
+	TEST(EveryGlyphPaintsInsideItsBox) {
+		RecordingCanvas recording;
+		const RectF box = makeRect(30, 40, 16, 16);
+		const RGBA color = { 1, 0, 0, 1 };
+
+		for (Glyph glyph : kAllGlyphs) {
+			recording.clear();
+			paintGlyph(recording.canvas(), glyph, box, color, Theme::standard());
+
+			CHECK(!recording.commands().empty());
+			for (const CanvasCommand& command : recording.commands()) {
+				CHECK(inside(command.rect, box));
+				CHECK(command.color == color);
+			}
+		}
+	}
+
+	TEST(AWideBoxDrawsASquareGlyphInItsMiddle) {
+		RecordingCanvas recording;
+		const RectF wide = makeRect(0, 0, 100, 10);
+
+		paintGlyph(recording.canvas(), Glyph::Close, wide, { 1, 1, 1, 1 }, Theme::standard());
+
+		for (const CanvasCommand& command : recording.commands()) {
+			CHECK(command.rect.pos.x >= 45 - kTolerance);
+			CHECK(command.rect.pos.x + command.rect.size.x <= 55 + kTolerance);
+		}
+	}
+
+	TEST(StrokeWidthScalesWithTheTheme) {
+		const Theme large = Theme::standard().scaled(2);
+		RecordingCanvas recording;
+
+		paintGlyph(recording.canvas(), Glyph::ChevronRight, makeRect(0, 0, 20, 20), { 1, 1, 1, 1 }, large);
+
+		REQUIRE CHECK_EQUAL(1u, recording.commands().size());
+		CHECK(drawsStrokes(recording.commands().front()));
+		CHECK_CLOSE(Theme::standard().metrics.glyphStroke * 2, recording.commands().front().width, kTolerance);
+	}
+
+	TEST(ChevronsPointTheWayTheyAreNamed) {
+		RecordingCanvas recording;
+		const RectF box = makeRect(0, 0, 20, 20);
+		const auto tipOf = [&](Glyph glyph) {
+			recording.clear();
+			paintGlyph(recording.canvas(), glyph, box, { 1, 1, 1, 1 }, 1.0f);
+			return recording.commands().front().points[1];
+		};
+
+		CHECK(tipOf(Glyph::ChevronRight).x > 10);
+		CHECK(tipOf(Glyph::ChevronLeft).x < 10);
+		CHECK(tipOf(Glyph::ChevronUp).y < 10);
+		CHECK(tipOf(Glyph::ChevronDown).y > 10);
+	}
+
+	TEST(GlyphBoxIsCenteredInTheArea) {
+		const RectF square = glyphBox(makeRect(10, 20, 40, 30), 10);
+
+		CHECK_CLOSE(25, square.pos.x, kTolerance);
+		CHECK_CLOSE(30, square.pos.y, kTolerance);
+		CHECK_CLOSE(10, square.size.x, kTolerance);
+		CHECK_CLOSE(10, square.size.y, kTolerance);
+	}
+}
+
+SUITE(TurnedGlyphs) {
+	TEST(AQuarterTurnPointsAChevronDown) {
+		RecordingCanvas recording;
+		Theme theme;
+		const RectF box = makeRect(0, 0, 20, 20);
+		paintGlyph(recording.canvas(), Glyph::ChevronRight, box, { 1, 1, 1, 1 }, theme, 3.14159265f / 2);
+		REQUIRE CHECK(!recording.commands().empty());
+		const CanvasCommand& chevron = recording.commands().back();
+		REQUIRE CHECK_EQUAL(3u, chevron.points.size());
+		// Turned a quarter, the tip of a right chevron is at the bottom and its ends are level above it.
+		CHECK(chevron.points[1].y > chevron.points[0].y);
+		CHECK_CLOSE(chevron.points[0].y, chevron.points[2].y, 0.01f);
+	}
+}
diff --git a/Widgets/tests/InteractionModelTests.cpp b/Widgets/tests/InteractionModelTests.cpp
index b76f6eb4..28fcc5fc 100644
--- a/Widgets/tests/InteractionModelTests.cpp
+++ b/Widgets/tests/InteractionModelTests.cpp
@@ -63,6 +63,31 @@ SUITE(ReorderSession) {
 		CHECK(!session.moved());
 	}
 
+	TEST(LiftedRectMakesRoomWhenItsLeadingEdgePassesANeighboursMiddle) {
+		// Item 1 (height 20) lifted out of three items of 20: the others stay where they were, at 0 and 40.
+		ReorderLane lane;
+		lane.area = makeRect(0, 0, 100, 1000);
+		lane.items = { makeRect(0, 0, 100, 20), makeRect(0, 40, 100, 20) };
+		CHECK_EQUAL(1u, ReorderSession::slotFor(lane, makeRect(0, 15, 50, 20), 1));
+		CHECK_EQUAL(1u, ReorderSession::slotFor(lane, makeRect(0, 10, 50, 20), 1));
+		CHECK_EQUAL(0u, ReorderSession::slotFor(lane, makeRect(0, 9, 50, 20), 1));
+		CHECK_EQUAL(1u, ReorderSession::slotFor(lane, makeRect(0, 30, 50, 20), 1));
+		CHECK_EQUAL(2u, ReorderSession::slotFor(lane, makeRect(0, 31, 50, 20), 1));
+		// In another lane the middle decides.
+		CHECK_EQUAL(1u, ReorderSession::slotFor(lane, makeRect(0, 12, 50, 20), std::nullopt));
+	}
+
+	TEST(UpdateLiftedPicksTheLaneUnderTheItemsMiddle) {
+		const std::vector<ReorderLane> lanes = { verticalLane(0, { 20, 20 }), verticalLane(200, { 20 }) };
+		ReorderSession session({ 0, 0 }, { 5, 5 });
+
+		CHECK(session.updateLifted(makeRect(200, 15, 50, 20), lanes));
+		REQUIRE CHECK(session.target());
+		CHECK_EQUAL(1u, session.target()->lane);
+		CHECK_EQUAL(1u, session.target()->index);
+		CHECK_CLOSE(205, session.pointer().x, 0.01f);
+	}
+
 	TEST(LiftedItemFollowsThePointerByItsGrabOffset) {
 		ReorderSession session({ 0, 0 }, { 5, 7 });
 		session.update({ 50, 60 }, {});
diff --git a/Widgets/tests/InteractionVisualTests.cpp b/Widgets/tests/InteractionVisualTests.cpp
new file mode 100644
index 00000000..bed86f9c
--- /dev/null
+++ b/Widgets/tests/InteractionVisualTests.cpp
@@ -0,0 +1,145 @@
+#include "InteractionVisual.hpp"
+#include "Probes.hpp"
+#include "StackLayout.hpp"
+#include "Theme.hpp"
+#include "UiDriver.hpp"
+
+#include "UnitTest++/UnitTest++.h"
+
+using namespace tp;
+using namespace tp::ui;
+using namespace tp::ui::testing;
+
+namespace {
+	constexpr halnf kTolerance = 0.01f;
+
+	const InteractionColors kColors = {
+		.rest = { 0.1f, 0.1f, 0.1f, 1 },
+		.hovered = { 0.5f, 0.5f, 0.5f, 1 },
+		.pressed = { 0.9f, 0.9f, 0.9f, 1 },
+		.disabled = { 0.2f, 0.0f, 0.0f, 1 },
+	};
+
+	// A plain widget (not a Control) that shows a hover surface through InteractionVisual.
+	class HoverSurface : public Box {
+	public:
+		HoverSurface() :
+			Box({ 60, 40 }, "hover surface") {}
+
+		InteractionVisual visual{ *this, kColors };
+
+	protected:
+		void onEvent(Event& event) override { event.accept(); }
+		void onHoverChanged() override { refreshVisual(); }
+		void onPressedChanged() override { refreshVisual(); }
+		void onTick(halnf deltaMs) override {
+			if (!visual.advance(deltaMs)) stopTicking();
+		}
+
+	private:
+		void refreshVisual() {
+			if (visual.refresh()) startTicking();
+		}
+	};
+
+	struct Scene {
+		Widget root;
+		HoverSurface surface;
+
+		Scene() {
+			root.emplaceLayout<FreeLayout>();
+			root.addChild(surface);
+		}
+	};
+
+	bool sameColor(const RGBA& first, const RGBA& second) {
+		return std::abs(first.r - second.r) < kTolerance && std::abs(first.g - second.g) < kTolerance &&
+					 std::abs(first.b - second.b) < kTolerance && std::abs(first.a - second.a) < kTolerance;
+	}
+}
+
+SUITE(InteractionVisual) {
+	TEST(RestsUntilThePointerArrives) {
+		Scene scene;
+		UiDriver driver(scene.root, { 200, 200 });
+
+		CHECK(sameColor(kColors.rest, scene.surface.visual.color()));
+		CHECK_CLOSE(0, scene.surface.visual.reveal(), kTolerance);
+	}
+
+	TEST(HoverAnimatesTowardsTheHoveredColorAndRevealsFully) {
+		Scene scene;
+		UiDriver driver(scene.root, { 200, 200 });
+		driver.setAutoSettle(false);
+
+		driver.moveTo(scene.surface);
+		CHECK(sameColor(kColors.hovered, scene.surface.visual.targetColor()));
+		CHECK(scene.surface.visual.isAnimating());
+
+		driver.settle();
+		CHECK(sameColor(kColors.hovered, scene.surface.visual.color()));
+		CHECK_CLOSE(1, scene.surface.visual.reveal(), kTolerance);
+	}
+
+	TEST(PressWinsOverHoverAndLeavingFadesBack) {
+		Scene scene;
+		UiDriver driver(scene.root, { 200, 200 });
+
+		driver.moveTo(scene.surface);
+		driver.press();
+		driver.settle();
+		CHECK(sameColor(kColors.pressed, scene.surface.visual.color()));
+
+		driver.release();
+		driver.leave();
+		driver.settle();
+		CHECK(sameColor(kColors.rest, scene.surface.visual.color()));
+		CHECK_CLOSE(0, scene.surface.visual.reveal(), kTolerance);
+	}
+
+	TEST(DisabledOwnersShowTheDisabledColorWithoutReveal) {
+		Scene scene;
+		UiDriver driver(scene.root, { 200, 200 });
+		scene.surface.setEnabled(false);
+
+		scene.surface.visual.finish();
+
+		CHECK(sameColor(kColors.disabled, scene.surface.visual.color()));
+		CHECK_CLOSE(0, scene.surface.visual.reveal(), kTolerance);
+	}
+
+	TEST(HeldRevealStaysWithoutHover) {
+		Scene scene;
+		UiDriver driver(scene.root, { 200, 200 });
+
+		scene.surface.visual.setRevealHeld(true);
+		scene.surface.visual.finish();
+		CHECK_CLOSE(1, scene.surface.visual.reveal(), kTolerance);
+
+		scene.surface.visual.setRevealHeld(false);
+		scene.surface.visual.finish();
+		CHECK_CLOSE(0, scene.surface.visual.reveal(), kTolerance);
+	}
+
+	TEST(TheThemeMotionDecidesHowLongTheFadeTakes) {
+		Theme slow = Theme::standard();
+		slow.interaction.surfaceResponseMs = 2000;
+		Scene scene;
+		UiDriver driver(scene.root, { 200, 200 }, slow);
+		driver.setAutoSettle(false);
+
+		driver.moveTo(scene.surface);
+		driver.advance(160);
+
+		CHECK(scene.surface.visual.reveal() < 0.5f);
+	}
+
+	TEST(HighlightColorsFadeInFromTransparent) {
+		const RGBA hovered = { 0.3f, 0.4f, 0.5f, 1 };
+		const InteractionColors colors = InteractionColors::highlight(hovered, { 0.6f, 0.6f, 0.6f, 1 });
+
+		CHECK_CLOSE(0, colors.rest.a, kTolerance);
+		CHECK_CLOSE(hovered.r, colors.rest.r, kTolerance);
+		CHECK(sameColor(hovered, colors.hovered));
+	}
+}
diff --git a/Widgets/tests/ListNavigatorTests.cpp b/Widgets/tests/ListNavigatorTests.cpp
new file mode 100644
index 00000000..1c168eb0
--- /dev/null
+++ b/Widgets/tests/ListNavigatorTests.cpp
@@ -0,0 +1,71 @@
+#include "ListNavigator.hpp"
+
+#include "UnitTest++/UnitTest++.h"
+
+#include <string>
+#include <vector>
+
+using namespace tp;
+using namespace tp::ui;
+
+namespace {
+	// Five items; the one at index 2 cannot be chosen (a separator or a disabled row).
+	ListNavigator::Items fruit() {
+		static const std::vector<std::string> names = { "Apple", "Apricot", "-", "Banana", "Blueberry" };
+		ListNavigator::Items items;
+		items.count = names.size();
+		items.isAvailable = [](size_t index) { return index != 2; };
+		items.text = [](size_t index) { return names[index]; };
+		return items;
+	}
+}
+
+SUITE(ListNavigator) {
+	TEST(ArrowsSkipUnavailableItemsAndStopAtTheEnds) {
+		const ListNavigator::Items items = fruit();
+		CHECK(ListNavigator::step(items, 1, Key::Down) == std::optional<size_t>(3));
+		CHECK(ListNavigator::step(items, 3, Key::Up) == std::optional<size_t>(1));
+		CHECK(!ListNavigator::step(items, 4, Key::Down));
+		CHECK(!ListNavigator::step(items, 0, Key::Up));
+	}
+
+	TEST(ArrowsWrapWhenAsked) {
+		const ListNavigator::Items items = fruit();
+		CHECK(ListNavigator::step(items, 4, Key::Down, 10, true) == std::optional<size_t>(0));
+		CHECK(ListNavigator::step(items, 0, Key::Up, 10, true) == std::optional<size_t>(4));
+	}
+
+	TEST(WithNothingCurrentDownStartsAtTheTopAndUpAtTheBottom) {
+		const ListNavigator::Items items = fruit();
+		CHECK(ListNavigator::step(items, std::nullopt, Key::Down) == std::optional<size_t>(0));
+		CHECK(ListNavigator::step(items, std::nullopt, Key::Up) == std::optional<size_t>(4));
+	}
+
+	TEST(HomeEndAndPagesReachAvailableItems) {
+		const ListNavigator::Items items = fruit();
+		CHECK(ListNavigator::step(items, 3, Key::Home) == std::optional<size_t>(0));
+		CHECK(ListNavigator::step(items, 0, Key::End) == std::optional<size_t>(4));
+		CHECK(ListNavigator::step(items, 0, Key::PageDown, 2) == std::optional<size_t>(1));
+		CHECK(ListNavigator::step(items, 0, Key::PageDown, 3) == std::optional<size_t>(3));
+		CHECK(ListNavigator::step(items, 4, Key::PageUp, 2) == std::optional<size_t>(3));
+		CHECK(ListNavigator::step(items, 1, Key::PageDown, 100) == std::optional<size_t>(4));
+	}
+
+	TEST(OtherKeysDoNotMove) {
+		CHECK(!ListNavigator::step(fruit(), 0, Key::Enter));
+		CHECK(!ListNavigator::step({}, std::nullopt, Key::Down));
+	}
+
+	TEST(TypeAheadMatchesPrefixesAndCyclesOnARepeatedLetter) {
+		const ListNavigator::Items items = fruit();
+		ListNavigator navigator;
+
+		CHECK(navigator.typeAhead(items, std::nullopt, "b", 0) == std::optional<size_t>(3));
+		CHECK(navigator.typeAhead(items, 3, "l", 100) == std::optional<size_t>(4));
+
+		// After a pause typing starts a new prefix; repeating a letter steps to the next item with it.
+		CHECK(navigator.typeAhead(items, 4, "a", 2000) == std::optional<size_t>(0));
+		CHECK(navigator.typeAhead(items, 0, "a", 2100) == std::optional<size_t>(1));
+		CHECK(!navigator.typeAhead(items, 1, "z", 4000));
+	}
+}
diff --git a/Widgets/tests/ViewportTests.cpp b/Widgets/tests/ViewportTests.cpp
index 25f9fb3f..6728646c 100644
--- a/Widgets/tests/ViewportTests.cpp
+++ b/Widgets/tests/ViewportTests.cpp
@@ -244,6 +244,18 @@ SUITE(Viewport) {
 		CHECK(canvas.offset().x > 0);
 	}
 
+	TEST(FlingUsesTheAverageSpeedOfTheLastHundredMilliseconds) {
+		using Samples = std::vector<std::pair<halnf, halnf>>;
+		const Samples steady = { { 0, 0 }, { 20, 20 }, { 40, 40 }, { 60, 60 }, { 80, 80 } };
+		CHECK_CLOSE(1.0f, Viewport::averageVelocity(steady, 80), 1e-4f);
+		const Samples jitter = { { 0, 0 }, { 20, 20 }, { 40, 40 }, { 60, 60 }, { 80, 80 }, { 82, 100 } };
+		CHECK_CLOSE(100.0f / 82.0f, Viewport::averageVelocity(jitter, 82), 1e-3f);
+		const Samples old = { { 0, 0 }, { 50, 100 }, { 200, 120 }, { 250, 220 } };
+		CHECK_CLOSE(2.0f, Viewport::averageVelocity(old, 250), 1e-4f);
+		CHECK_CLOSE(0.0f, Viewport::averageVelocity(old, 400), 1e-6f);
+		CHECK_CLOSE(0.0f, Viewport::averageVelocity({ { 10, 5 } }, 10), 1e-6f);
+	}
+
 	TEST(ViewChangesAreReported) {
 		ListScene scene;
 		int changes = 0;