diff --git a/src/lib/components/ResizablePanel.svelte b/src/lib/components/ResizablePanel.svelte
index 0f428449..a7af2989 100644
--- a/src/lib/components/ResizablePanel.svelte
+++ b/src/lib/components/ResizablePanel.svelte
@@ -26,6 +26,17 @@
 		toolbar?: import('svelte').Snippet;
 		footer?: import('svelte').Snippet;
 		children?: import('svelte').Snippet;
+		/** Optional second column rendered next to the main content. When set
+		 *  AND `rightColumnActive` is true, the panel body splits into two
+		 *  columns; otherwise the panel layout is unchanged. */
+		rightColumn?: import('svelte').Snippet;
+		/** Controls whether the right column is currently rendered. Lets the
+		 *  parent define the snippet up front but defer the layout split until
+		 *  there's something to show (so the column doesn't eat panel width
+		 *  while empty). Defaults to true when a `rightColumn` is supplied. */
+		rightColumnActive?: boolean;
+		/** Width of the right column in px. */
+		rightColumnWidth?: number;
 	}
 
 	let {
@@ -46,9 +57,14 @@
 		actions,
 		toolbar,
 		footer,
-		children
+		children,
+		rightColumn,
+		rightColumnActive = true,
+		rightColumnWidth = 320
 	}: Props = $props();
 
+	const showRightColumn = $derived(!!rightColumn && rightColumnActive);
+
 	// Calculate dynamic max height for bottom panels (viewport - nav bar - gaps)
 	function getEffectiveMaxHeight(): number {
 		if (maxHeight !== undefined) {
@@ -228,8 +244,15 @@
 			{@render toolbar()}
 		</div>
 	{/if}
-	<div class="panel-content">
-		{@render children?.()}
+	<div class="panel-body" class:split={showRightColumn}>
+		<div class="panel-content">
+			{@render children?.()}
+		</div>
+		{#if showRightColumn}
+			<div class="panel-right" style="width: {rightColumnWidth}px;">
+				{@render rightColumn!()}
+			</div>
+		{/if}
 	</div>
 	{#if footer}
 		<div class="panel-footer">
@@ -342,6 +365,20 @@
 		border-bottom: 1px solid var(--border);
 	}
 
+	/* When the panel has no second column, panel-body is layout-transparent,
+	 * so children sit in resizable-panel's column flex exactly like before. */
+	.panel-body {
+		display: contents;
+	}
+
+	.panel-body.split {
+		display: flex;
+		flex-direction: row;
+		flex: 1;
+		min-height: 0;
+		overflow: hidden;
+	}
+
 	.panel-content {
 		display: flex;
 		flex-direction: column;
@@ -350,6 +387,21 @@
 		min-height: 0;
 	}
 
+	.panel-body.split .panel-content {
+		min-width: 0;
+	}
+
+	.panel-right {
+		flex-shrink: 0;
+		width: 320px;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		border-left: 1px solid var(--border);
+		background: var(--surface);
+	}
+
 	.panel-footer {
 		flex-shrink: 0;
 		background: var(--surface-raised);
diff --git a/src/lib/components/dialogs/shared/DocumentationSection.svelte b/src/lib/components/dialogs/shared/DocumentationSection.svelte
index 6573a5f8..93c87d26 100644
--- a/src/lib/components/dialogs/shared/DocumentationSection.svelte
+++ b/src/lib/components/dialogs/shared/DocumentationSection.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { slide } from 'svelte/transition';
-	import { onDestroy } from 'svelte';
+	import { onDestroy, untrack } from 'svelte';
 	import {
 		renderDocstring,
 		transformDefinitionListsToTables,
@@ -17,11 +17,16 @@
 		docstring?: string | undefined;
 		// Pre-rendered HTML (display directly)
 		docstringHtml?: string | undefined;
+		// When true, render the docs immediately and hide the toggle button.
+		alwaysExpanded?: boolean;
 	}
 
-	let { docstring, docstringHtml }: Props = $props();
+	let { docstring, docstringHtml, alwaysExpanded = false }: Props = $props();
 
-	let expanded = $state(false);
+	// alwaysExpanded is a static prop in practice; capture once for the
+	// initial expanded state. Subsequent changes are handled by the reset
+	// effect below.
+	let expanded = $state(untrack(() => alwaysExpanded));
 	let renderedDocs = $state<string>('');
 	let loading = $state(false);
 	let container: HTMLDivElement | undefined = $state();
@@ -29,25 +34,32 @@
 	// Check if we have any documentation to show
 	const hasDocumentation = $derived(!!docstring || !!docstringHtml);
 
+	// Generation counter: each loadDocs invocation gets a unique id; if a
+	// newer load starts while an older one is still in flight, the older
+	// resolution must not overwrite the newer's result.
+	let loadGen = 0;
+
+	async function loadDocs() {
+		if (renderedDocs) return;
+		const html = docstringHtml || docstring;
+		if (!html) return;
+		const gen = ++loadGen;
+		loading = true;
+		try {
+			const result = await renderDocstring(html);
+			if (gen !== loadGen) return; // superseded by a newer load
+			renderedDocs = result;
+		} catch (e) {
+			if (gen !== loadGen) return;
+			console.error('Failed to render docstring:', e);
+			renderedDocs = '<p class="docs-error">Failed to render documentation.</p>';
+		}
+		if (gen === loadGen) loading = false;
+	}
+
 	async function toggle() {
 		expanded = !expanded;
-
-		// Load and render if expanding and not already loaded
-		if (expanded && !renderedDocs) {
-			const html = docstringHtml || docstring;
-			if (!html) return;
-
-			loading = true;
-			try {
-				// renderDocstring handles both raw docstrings and pre-rendered HTML
-				// It applies KaTeX rendering to any .math elements
-				renderedDocs = await renderDocstring(html);
-			} catch (e) {
-				console.error('Failed to render docstring:', e);
-				renderedDocs = '<p class="docs-error">Failed to render documentation.</p>';
-			}
-			loading = false;
-		}
+		if (expanded) await loadDocs();
 	}
 
 	// Apply DOM transformations after rendered HTML is inserted
@@ -69,15 +81,21 @@
 		}
 	});
 
-	// Reset state when docstring changes
+	// Reset state when docstring changes. In alwaysExpanded mode the toggle
+	// state stays true and we re-load the new content. The loadDocs call
+	// must be untracked — it reads renderedDocs internally, and without
+	// untrack the subsequent write to renderedDocs would re-trigger this
+	// effect in an infinite loop.
 	$effect(() => {
-		// Track both props
 		const _ = docstring || docstringHtml;
 		if (_) {
-			// Reset when content changes
 			cleanupCodeBlocks();
 			renderedDocs = '';
-			expanded = false;
+			if (alwaysExpanded) {
+				untrack(() => loadDocs());
+			} else {
+				expanded = false;
+			}
 		}
 	});
 
@@ -92,21 +110,33 @@
 </svelte:head>
 
 {#if hasDocumentation}
-	<div class="docs-section">
-		<button class="docs-toggle" onclick={toggle}>
-			<span class="toggle-icon" class:expanded>
-				<Icon name="chevron-right" size={12} />
-			</span>
-			Documentation
-		</button>
+	<div class="docs-section" class:always-expanded={alwaysExpanded}>
+		{#if !alwaysExpanded}
+			<button class="docs-toggle" onclick={toggle}>
+				<span class="toggle-icon" class:expanded>
+					<Icon name="chevron-right" size={12} />
+				</span>
+				Documentation
+			</button>
+		{/if}
 		{#if expanded}
-			<div class="docs-content" transition:slide={{ duration: 200 }} bind:this={container}>
-				{#if loading}
-					<div class="docs-loading">Loading documentation...</div>
-				{:else}
-					{@html renderedDocs}
-				{/if}
-			</div>
+			{#if alwaysExpanded}
+				<div class="docs-content" bind:this={container}>
+					{#if loading}
+						<div class="docs-loading">Loading documentation...</div>
+					{:else}
+						{@html renderedDocs}
+					{/if}
+				</div>
+			{:else}
+				<div class="docs-content" transition:slide={{ duration: 200 }} bind:this={container}>
+					{#if loading}
+						<div class="docs-loading">Loading documentation...</div>
+					{:else}
+						{@html renderedDocs}
+					{/if}
+				</div>
+			{/if}
 		{/if}
 	</div>
 {/if}
@@ -122,6 +152,14 @@
 		padding-right: var(--space-md);
 	}
 
+	/* Always-expanded uses no border / no negative margins so it can sit
+	 * inside the detail column without bleeding past container edges. */
+	.docs-section.always-expanded {
+		border-top: none;
+		padding: 0;
+		margin: 0;
+	}
+
 	.docs-toggle {
 		display: flex;
 		align-items: center;
diff --git a/src/lib/components/icons/BlockIcon.svelte b/src/lib/components/icons/BlockIcon.svelte
index a5a7ad66..fab0d8a7 100644
--- a/src/lib/components/icons/BlockIcon.svelte
+++ b/src/lib/components/icons/BlockIcon.svelte
@@ -57,7 +57,7 @@
 		{:else if def.kind === 'surface'}
 			<IconSurface fn={def.fn} rows={def.rows} cols={def.cols} />
 		{:else if def.kind === 'math'}
-			<IconMath latex={def.latex} fit={def.fit} />
+			<IconMath latex={def.latex} />
 		{:else if def.kind === 'glyph'}
 			<IconGlyph text={def.text} size={def.size} />
 		{:else if def.kind === 'svg' && svgRaw}
diff --git a/src/lib/components/icons/blocks/registry.ts b/src/lib/components/icons/blocks/registry.ts
index 03ce0c53..169988bb 100644
--- a/src/lib/components/icons/blocks/registry.ts
+++ b/src/lib/components/icons/blocks/registry.ts
@@ -18,7 +18,7 @@ export type IconDef =
 	| { kind: 'plot'; samples: () => Sample[]; xRange?: [number, number]; yRange?: [number, number]; axes?: AxesMode; markers?: boolean; decoration?: 'arrow-up' | 'arrow-down' }
 	| { kind: 'scope'; samples: () => Sample[]; samples2?: () => Sample[]; yRange?: [number, number]; gridX?: number; gridY?: number }
 	| { kind: 'surface'; fn?: (u: number, v: number) => number; rows?: number; cols?: number }
-	| { kind: 'math'; latex: string; fit?: number }
+	| { kind: 'math'; latex: string }
 	| { kind: 'glyph'; text: string; size?: number }
 	| { kind: 'svg'; name: string };
 
diff --git a/src/lib/components/panels/EventsPanel.svelte b/src/lib/components/panels/EventsPanel.svelte
index eb2acd0f..ddf292ea 100644
--- a/src/lib/components/panels/EventsPanel.svelte
+++ b/src/lib/components/panels/EventsPanel.svelte
@@ -1,18 +1,20 @@
 <script lang="ts">
+	import { onDestroy } from 'svelte';
 	import { eventRegistry, eventRegistryVersion } from '$lib/events/registry';
 	import type { EventTypeDefinition, EventInstance } from '$lib/events/types';
 	import { eventStore } from '$lib/stores/events';
 	import { graphStore } from '$lib/stores/graph';
 	import { historyStore } from '$lib/stores/history';
 	import { screenToFlow } from '$lib/stores/viewActions';
-	import { tooltip } from '$lib/components/Tooltip.svelte';
 	import EventPreview from '$lib/components/nodes/EventPreview.svelte';
 
 	interface Props {
 		onAddEvent?: (type: string) => void;
+		ondetailvisible?: (visible: boolean) => void;
+		onhoveritem?: (item: EventTypeDefinition | null) => void;
 	}
 
-	let { onAddEvent }: Props = $props();
+	let { onAddEvent, ondetailvisible, onhoveritem }: Props = $props();
 
 	// Re-derive event types whenever the registry changes (runtime install/uninstall)
 	let registryTick = $state(0);
@@ -31,6 +33,106 @@
 	// Track drag state to prevent click after drag
 	let isDragging = $state(false);
 
+	// Hover-detail state — same pattern as NodeLibrary.
+	const HOVER_OPEN_DELAY = 250;
+	const HOVER_SWITCH_DELAY = 200;
+	const HOVER_CLOSE_DELAY = 120;
+	let hoveredItem = $state<EventTypeDefinition | null>(null);
+	let hoverOpenTimer: ReturnType<typeof setTimeout> | null = null;
+	let hoverSwitchTimer: ReturnType<typeof setTimeout> | null = null;
+	let hoverCloseTimer: ReturnType<typeof setTimeout> | null = null;
+
+	function clearHoverTimers() {
+		if (hoverOpenTimer !== null) {
+			clearTimeout(hoverOpenTimer);
+			hoverOpenTimer = null;
+		}
+		if (hoverSwitchTimer !== null) {
+			clearTimeout(hoverSwitchTimer);
+			hoverSwitchTimer = null;
+		}
+		if (hoverCloseTimer !== null) {
+			clearTimeout(hoverCloseTimer);
+			hoverCloseTimer = null;
+		}
+	}
+
+	onDestroy(clearHoverTimers);
+
+	function handleMouseEnter(item: EventTypeDefinition) {
+		if (hoverCloseTimer !== null) {
+			clearTimeout(hoverCloseTimer);
+			hoverCloseTimer = null;
+		}
+		if (hoveredItem === item) {
+			if (hoverSwitchTimer !== null) {
+				clearTimeout(hoverSwitchTimer);
+				hoverSwitchTimer = null;
+			}
+			return;
+		}
+		if (hoveredItem !== null) {
+			if (hoverSwitchTimer !== null) clearTimeout(hoverSwitchTimer);
+			hoverSwitchTimer = setTimeout(() => {
+				hoverSwitchTimer = null;
+				hoveredItem = item;
+				onhoveritem?.(item);
+			}, HOVER_SWITCH_DELAY);
+			return;
+		}
+		if (hoverOpenTimer !== null) clearTimeout(hoverOpenTimer);
+		hoverOpenTimer = setTimeout(() => {
+			hoverOpenTimer = null;
+			hoveredItem = item;
+			onhoveritem?.(item);
+			ondetailvisible?.(true);
+		}, HOVER_OPEN_DELAY);
+	}
+
+	function handleMouseLeave() {
+		if (hoverOpenTimer !== null) {
+			clearTimeout(hoverOpenTimer);
+			hoverOpenTimer = null;
+		}
+		if (hoverSwitchTimer !== null) {
+			clearTimeout(hoverSwitchTimer);
+			hoverSwitchTimer = null;
+		}
+		if (hoveredItem === null) return;
+		if (hoverCloseTimer !== null) clearTimeout(hoverCloseTimer);
+		hoverCloseTimer = setTimeout(() => {
+			hoverCloseTimer = null;
+			hoveredItem = null;
+			onhoveritem?.(null);
+			ondetailvisible?.(false);
+		}, HOVER_CLOSE_DELAY);
+	}
+
+	function hideDetailNow() {
+		clearHoverTimers();
+		const wasShown = hoveredItem !== null;
+		hoveredItem = null;
+		if (wasShown) {
+			onhoveritem?.(null);
+			ondetailvisible?.(false);
+		}
+	}
+
+	export function keepDetailAlive() {
+		if (hoverCloseTimer !== null) {
+			clearTimeout(hoverCloseTimer);
+			hoverCloseTimer = null;
+		}
+		if (hoverSwitchTimer !== null) {
+			clearTimeout(hoverSwitchTimer);
+			hoverSwitchTimer = null;
+		}
+	}
+
+	export function dismissDetail() {
+		handleMouseLeave();
+	}
+
 	/**
 	 * Add an event at the current level (root or subsystem)
 	 */
@@ -58,6 +160,7 @@
 
 	// Handle drag start
 	function handleDragStart(event: DragEvent, eventType: EventTypeDefinition) {
+		hideDetailNow();
 		isDragging = true;
 		if (event.dataTransfer) {
 			event.dataTransfer.setData('application/pathview-event', eventType.type);
@@ -75,6 +178,7 @@
 	// Handle click to add event
 	function handleEventClick(eventType: EventTypeDefinition) {
 		if (isDragging) return;
+		hideDetailNow();
 		if (onAddEvent) {
 			onAddEvent(eventType.type);
 		} else {
@@ -92,10 +196,11 @@
 				<button
 					class="event-tile"
 					draggable={true}
+					onmouseenter={() => handleMouseEnter(eventType)}
+					onmouseleave={handleMouseLeave}
 					ondragstart={(e) => handleDragStart(e, eventType)}
 					ondragend={handleDragEnd}
 					onclick={() => handleEventClick(eventType)}
-					use:tooltip={eventType.description}
 				>
 					<EventPreview event={eventType} />
 				</button>
@@ -103,9 +208,6 @@
 		</div>
 	</div>
 
-	<div class="footer">
-		Click or drag to add
-	</div>
 </div>
 
 <style>
@@ -151,12 +253,4 @@
 		cursor: grabbing;
 	}
 
-	.footer {
-		flex-shrink: 0;
-		padding: var(--space-sm) var(--space-md);
-		background: var(--surface-raised);
-		border-top: 1px solid var(--border);
-		font-size: 10px;
-		color: var(--text-disabled);
-	}
 </style>
diff --git a/src/lib/components/panels/NodeLibrary.svelte b/src/lib/components/panels/NodeLibrary.svelte
index 506b5cef..ecf0fd3c 100644
--- a/src/lib/components/panels/NodeLibrary.svelte
+++ b/src/lib/components/panels/NodeLibrary.svelte
@@ -1,15 +1,22 @@
 <script lang="ts">
+	import { onDestroy } from 'svelte';
 	import { nodeRegistry, blockConfig, registryVersion, type NodeCategory, type NodeTypeDefinition } from '$lib/nodes';
 	import { NODE_TYPES } from '$lib/constants/nodeTypes';
 	import NodePreview from '$lib/components/nodes/NodePreview.svelte';
 	import Icon from '$lib/components/icons/Icon.svelte';
-	import { tooltip } from '$lib/components/Tooltip.svelte';
 	interface Props {
 		onAddNode?: (type: string) => void;
 		focusSearch?: boolean;
+		/** Notifies the parent whenever the detail visibility flips, so it
+		 *  can grow the surrounding ResizablePanel by the detail-column
+		 *  width. */
+		ondetailvisible?: (visible: boolean) => void;
+		/** Reports the currently hovered item (or null when none), so the
+		 *  parent can render the detail column content on its own. */
+		onhoveritem?: (item: NodeTypeDefinition | null) => void;
 	}
 
-	let { onAddNode, focusSearch = false }: Props = $props();
+	let { onAddNode, focusSearch = false, ondetailvisible, onhoveritem }: Props = $props();
 
 	// Registry change counter — read it inside derived blocks so they re-run
 	// whenever a toolbox install/uninstall mutates the registry.
@@ -28,7 +35,36 @@
 
 	// Drag preview - rendered off-screen, used as drag image
 	let dragPreviewNode = $state<NodeTypeDefinition | null>(null);
-	let dragPreviewElement: HTMLDivElement;
+	let dragPreviewElement = $state<HTMLDivElement | undefined>(undefined);
+
+	// Hover-detail state. The detail content lives in a second column inside
+	// the library panel itself. We delay both opening and closing so that
+	// brushing past tiles on the way to the detail column doesn't flicker
+	// through every block in between.
+	const HOVER_OPEN_DELAY = 250;
+	const HOVER_SWITCH_DELAY = 200;
+	const HOVER_CLOSE_DELAY = 120;
+	let hoveredItem = $state<NodeTypeDefinition | null>(null);
+	let hoverOpenTimer: ReturnType<typeof setTimeout> | null = null;
+	let hoverSwitchTimer: ReturnType<typeof setTimeout> | null = null;
+	let hoverCloseTimer: ReturnType<typeof setTimeout> | null = null;
+
+	function clearHoverTimers() {
+		if (hoverOpenTimer !== null) {
+			clearTimeout(hoverOpenTimer);
+			hoverOpenTimer = null;
+		}
+		if (hoverSwitchTimer !== null) {
+			clearTimeout(hoverSwitchTimer);
+			hoverSwitchTimer = null;
+		}
+		if (hoverCloseTimer !== null) {
+			clearTimeout(hoverCloseTimer);
+			hoverCloseTimer = null;
+		}
+	}
+
+	onDestroy(clearHoverTimers);
 
 	// Collapsed categories
 	let collapsedCategories = $state<Set<string>>(new Set());
@@ -90,13 +126,107 @@
 		return result;
 	});
 
-	// Handle mouse enter to prepare drag preview
+	// Handle mouse enter to prepare drag preview and schedule detail open.
 	function handleMouseEnter(node: NodeTypeDefinition) {
 		dragPreviewNode = node;
+		scheduleShowDetail(node);
+	}
+
+	function handleMouseLeave() {
+		scheduleHideDetail();
+	}
+
+	function scheduleShowDetail(node: NodeTypeDefinition) {
+		// Cancel pending close — we're hovering something again.
+		if (hoverCloseTimer !== null) {
+			clearTimeout(hoverCloseTimer);
+			hoverCloseTimer = null;
+		}
+		// Already showing this exact item — drop any in-flight switch so
+		// it doesn't replace us with itself.
+		if (hoveredItem === node) {
+			if (hoverSwitchTimer !== null) {
+				clearTimeout(hoverSwitchTimer);
+				hoverSwitchTimer = null;
+			}
+			return;
+		}
+		// Detail is open on a different item: schedule a switch. Brushing
+		// past tiles on the way to the detail column won't flip content
+		// because the cursor leaves before this timer fires.
+		if (hoveredItem !== null) {
+			if (hoverSwitchTimer !== null) clearTimeout(hoverSwitchTimer);
+			hoverSwitchTimer = setTimeout(() => {
+				hoverSwitchTimer = null;
+				hoveredItem = node;
+				onhoveritem?.(node);
+			}, HOVER_SWITCH_DELAY);
+			return;
+		}
+		// First-time open: wait a moment so brushing past tiles doesn't
+		// flash a detail.
+		if (hoverOpenTimer !== null) clearTimeout(hoverOpenTimer);
+		hoverOpenTimer = setTimeout(() => {
+			hoverOpenTimer = null;
+			hoveredItem = node;
+			onhoveritem?.(node);
+			ondetailvisible?.(true);
+		}, HOVER_OPEN_DELAY);
+	}
+
+	function scheduleHideDetail() {
+		// Cancel pending open / switch — user moved off before we'd commit.
+		if (hoverOpenTimer !== null) {
+			clearTimeout(hoverOpenTimer);
+			hoverOpenTimer = null;
+		}
+		if (hoverSwitchTimer !== null) {
+			clearTimeout(hoverSwitchTimer);
+			hoverSwitchTimer = null;
+		}
+		if (hoveredItem === null) return;
+		if (hoverCloseTimer !== null) clearTimeout(hoverCloseTimer);
+		hoverCloseTimer = setTimeout(() => {
+			hoverCloseTimer = null;
+			hoveredItem = null;
+			onhoveritem?.(null);
+			ondetailvisible?.(false);
+		}, HOVER_CLOSE_DELAY);
+	}
+
+	function hideDetailNow() {
+		clearHoverTimers();
+		const wasShown = hoveredItem !== null;
+		hoveredItem = null;
+		if (wasShown) {
+			onhoveritem?.(null);
+			ondetailvisible?.(false);
+		}
+	}
+
+	/** Called from the parent when the cursor enters the detail column —
+	 *  cancel any pending dismiss / switch so the column stays open and
+	 *  doesn't swap content from a transient last-tile hover. */
+	export function keepDetailAlive() {
+		if (hoverCloseTimer !== null) {
+			clearTimeout(hoverCloseTimer);
+			hoverCloseTimer = null;
+		}
+		if (hoverSwitchTimer !== null) {
+			clearTimeout(hoverSwitchTimer);
+			hoverSwitchTimer = null;
+		}
+	}
+
+	/** Called from the parent when the cursor leaves the detail column —
+	 *  schedule the same delayed dismiss as a tile mouseleave. */
+	export function dismissDetail() {
+		scheduleHideDetail();
 	}
 
 	// Handle drag start
 	function handleDragStart(event: DragEvent, nodeType: NodeTypeDefinition) {
+		hideDetailNow();
 		isDragging = true;
 		if (event.dataTransfer) {
 			event.dataTransfer.setData('application/pathview-node', nodeType.type);
@@ -126,6 +256,7 @@
 	// Handle click to add node (only if not dragging)
 	function handleNodeClick(node: NodeTypeDefinition) {
 		if (isDragging) return;
+		hideDetailNow();
 		if (onAddNode) {
 			onAddNode(node.type);
 		}
@@ -218,10 +349,10 @@
 								class:selected={isSelected(node)}
 								draggable="true"
 								onmouseenter={() => handleMouseEnter(node)}
+								onmouseleave={handleMouseLeave}
 								ondragstart={(e) => handleDragStart(e, node)}
 								ondragend={handleDragEnd}
 								onclick={() => handleNodeClick(node)}
-								use:tooltip={node.description}
 							>
 								<NodePreview {node} />
 							</button>
@@ -237,11 +368,6 @@
 		{/each}
 	</div>
 
-	<div class="footer">
-		<span>Click or drag to add</span>
-		<span>↑↓ Enter</span>
-	</div>
-
 	<!-- Hidden drag preview container (rendered off-screen, used as drag image) -->
 	<div class="drag-preview-container" aria-hidden="true">
 		{#if dragPreviewNode}
@@ -401,17 +527,6 @@
 		color: var(--text-disabled);
 	}
 
-	.footer {
-		flex-shrink: 0;
-		display: flex;
-		justify-content: space-between;
-		padding: var(--space-sm) var(--space-md);
-		background: var(--surface-raised);
-		border-top: 1px solid var(--border);
-		font-size: 10px;
-		color: var(--text-disabled);
-	}
-
 	/* Hidden container for drag preview image */
 	.drag-preview-container {
 		position: fixed;
diff --git a/src/lib/components/panels/library-detail/CanvasBlockPreview.svelte b/src/lib/components/panels/library-detail/CanvasBlockPreview.svelte
new file mode 100644
index 00000000..371dc82f
--- /dev/null
+++ b/src/lib/components/panels/library-detail/CanvasBlockPreview.svelte
@@ -0,0 +1,142 @@
+<script lang="ts">
+	import type { NodeTypeDefinition } from '$lib/nodes/types';
+	import { getShapeCssClass, isSubsystem } from '$lib/nodes/shapes';
+	import { calculateNodeDimensions, getPortPositionCalc } from '$lib/constants/dimensions';
+
+	interface Props {
+		node: NodeTypeDefinition;
+	}
+
+	let { node }: Props = $props();
+
+	const inputCount = $derived(node.ports?.inputs?.length ?? 0);
+	const outputCount = $derived(node.ports?.outputs?.length ?? 0);
+
+	const shapeClass = $derived(getShapeCssClass(node));
+	const isSubsystemType = $derived(isSubsystem(node) || node.category === 'Subsystem');
+	const dimensions = $derived(
+		calculateNodeDimensions(node.name, inputCount, outputCount, 0, 0, undefined, null, false)
+	);
+</script>
+
+<div
+	class="cbp-node {shapeClass}"
+	class:subsystem-type={isSubsystemType}
+	style="width: {dimensions.width}px; height: {dimensions.height}px;"
+>
+	<div class="cbp-content">
+		<span class="cbp-name">{node.name}</span>
+	</div>
+
+	{#each Array(inputCount) as _, i}
+		<div class="cbp-handle cbp-handle-input" style="top: {getPortPositionCalc(i, inputCount)};"></div>
+	{/each}
+	{#each Array(outputCount) as _, i}
+		<div class="cbp-handle cbp-handle-output" style="top: {getPortPositionCalc(i, outputCount)};"></div>
+	{/each}
+</div>
+
+<style>
+	.cbp-node {
+		position: relative;
+		background: var(--surface-raised);
+		border: 1px solid var(--edge);
+		font-size: 10px;
+		--node-radius: 8px;
+	}
+
+	/* Mirror BaseNode shape variants. */
+	.cbp-node.shape-pill {
+		--node-radius: 20px;
+		border-radius: var(--node-radius);
+	}
+	.cbp-node.shape-rect {
+		--node-radius: 4px;
+		border-radius: var(--node-radius);
+	}
+	.cbp-node.shape-circle {
+		--node-radius: 16px;
+		border-radius: var(--node-radius);
+	}
+	.cbp-node.shape-mixed {
+		--node-radius: 12px;
+		border-radius: 12px 4px 12px 4px;
+	}
+	.cbp-node.shape-default {
+		--node-radius: 8px;
+		border-radius: var(--node-radius);
+	}
+
+	.cbp-node.subsystem-type {
+		border-style: dashed;
+	}
+
+	.cbp-content {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0 var(--space-sm);
+	}
+
+	.cbp-name {
+		font-size: 10px;
+		color: var(--text-muted);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	/* Handle: hollow rounded-pentagon, 10x8, anchored at edge.
+	 * Paths copied verbatim from BaseNode for visual parity. */
+	.cbp-handle {
+		position: absolute;
+		width: 10px;
+		height: 8px;
+		transform: translateY(-50%);
+		pointer-events: none;
+	}
+
+	.cbp-handle-input {
+		left: -5px;
+	}
+
+	.cbp-handle-output {
+		right: -5px;
+	}
+
+	.cbp-handle::before,
+	.cbp-handle::after {
+		content: '';
+		position: absolute;
+	}
+
+	.cbp-handle::before {
+		inset: 0;
+		background: var(--edge);
+	}
+
+	.cbp-handle::after {
+		inset: 1px;
+		background: var(--surface-raised);
+	}
+
+	/* Input handle: arrow pointing INTO the block (left → right).
+	 * Same path as BaseNode rotation 0. */
+	.cbp-handle-input::before {
+		clip-path: path('M 1.00 0.00 L 5.00 0.00 Q 6.00 0.00 6.71 0.71 L 9.29 3.29 Q 10.00 4.00 9.29 4.71 L 6.71 7.29 Q 6.00 8.00 5.00 8.00 L 1.00 8.00 Q 0.00 8.00 0.00 7.00 L 0.00 1.00 Q 0.00 0.00 1.00 0.00 Z');
+	}
+	.cbp-handle-input::after {
+		clip-path: path('M 0.80 0.00 L 3.79 0.00 Q 4.59 0.00 5.15 0.57 L 7.02 2.43 Q 7.59 3.00 7.02 3.57 L 5.15 5.43 Q 4.59 6.00 3.79 6.00 L 0.80 6.00 Q 0.00 6.00 0.00 5.20 L 0.00 0.80 Q 0.00 0.00 0.80 0.00 Z');
+	}
+
+	/* Output handle: arrow pointing OUT of the block (left → right, same orientation,
+	 * but anchored on the right edge so the tip points away from the block). */
+	.cbp-handle-output::before {
+		clip-path: path('M 1.00 0.00 L 5.00 0.00 Q 6.00 0.00 6.71 0.71 L 9.29 3.29 Q 10.00 4.00 9.29 4.71 L 6.71 7.29 Q 6.00 8.00 5.00 8.00 L 1.00 8.00 Q 0.00 8.00 0.00 7.00 L 0.00 1.00 Q 0.00 0.00 1.00 0.00 Z');
+	}
+	.cbp-handle-output::after {
+		clip-path: path('M 0.80 0.00 L 3.79 0.00 Q 4.59 0.00 5.15 0.57 L 7.02 2.43 Q 7.59 3.00 7.02 3.57 L 5.15 5.43 Q 4.59 6.00 3.79 6.00 L 0.80 6.00 Q 0.00 6.00 0.00 5.20 L 0.00 0.80 Q 0.00 0.00 0.80 0.00 Z');
+	}
+</style>
diff --git a/src/lib/components/panels/library-detail/EventDetail.svelte b/src/lib/components/panels/library-detail/EventDetail.svelte
new file mode 100644
index 00000000..9cc90ade
--- /dev/null
+++ b/src/lib/components/panels/library-detail/EventDetail.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+	import type { EventTypeDefinition } from '$lib/events/types';
+	import { eventRegistry, BUILTIN_EVENT_SOURCE } from '$lib/events/registry';
+	import { toolboxes } from '$lib/toolbox/store';
+	import type { ToolboxConfig } from '$lib/toolbox/types';
+	import EventPreview from '$lib/components/nodes/EventPreview.svelte';
+	import DocumentationSection from '$lib/components/dialogs/shared/DocumentationSection.svelte';
+
+	interface Props {
+		event: EventTypeDefinition;
+	}
+
+	let { event }: Props = $props();
+
+	let installedToolboxes = $state<ToolboxConfig[]>([]);
+	toolboxes.subscribe((list) => (installedToolboxes = list));
+
+	const toolbox = $derived.by(() => {
+		const id = eventRegistry.getSource(event.type);
+		if (!id || id === BUILTIN_EVENT_SOURCE) return undefined;
+		return installedToolboxes.find((t) => t.id === id);
+	});
+
+	const toolboxLabel = $derived(
+		toolbox ? `${toolbox.displayName}${toolbox.installedVersion ? ` v${toolbox.installedVersion}` : ''}` : null
+	);
+</script>
+
+<div class="detail-root">
+	<div class="detail-section">
+		<div class="section-title">
+			<span class="title-text">{event.name}</span>
+			{#if toolboxLabel}
+				<span class="title-meta">({toolboxLabel})</span>
+			{/if}
+		</div>
+		<div class="detail-preview">
+			<EventPreview {event} />
+		</div>
+	</div>
+
+	<div class="detail-docs">
+		<DocumentationSection docstringHtml={event.docstringHtml} alwaysExpanded />
+	</div>
+</div>
+
+<style>
+	.detail-root {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-height: 0;
+		min-width: 0;
+		overflow: hidden;
+	}
+
+	.detail-section {
+		flex-shrink: 0;
+		padding: var(--space-md);
+		border-bottom: 1px solid var(--border);
+	}
+
+	.section-title {
+		display: flex;
+		align-items: baseline;
+		gap: var(--space-sm);
+		font-size: 10px;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+		color: var(--text-muted);
+		margin-bottom: var(--space-sm);
+	}
+
+	.title-text {
+		flex-shrink: 0;
+	}
+
+	.title-meta {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-weight: 400;
+		color: var(--text-disabled);
+	}
+
+	.detail-preview {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--space-lg) 0;
+	}
+
+	.detail-docs {
+		flex: 1;
+		min-height: 0;
+		overflow-y: auto;
+		padding: var(--space-md);
+		font-size: 11px;
+	}
+</style>
diff --git a/src/lib/components/panels/library-detail/NodeBlockDetail.svelte b/src/lib/components/panels/library-detail/NodeBlockDetail.svelte
new file mode 100644
index 00000000..31cb11e9
--- /dev/null
+++ b/src/lib/components/panels/library-detail/NodeBlockDetail.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+	import type { NodeTypeDefinition } from '$lib/nodes/types';
+	import { nodeRegistry, BUILTIN_SOURCE } from '$lib/nodes/registry';
+	import { toolboxes } from '$lib/toolbox/store';
+	import type { ToolboxConfig } from '$lib/toolbox/types';
+	import CanvasBlockPreview from './CanvasBlockPreview.svelte';
+	import DocumentationSection from '$lib/components/dialogs/shared/DocumentationSection.svelte';
+
+	interface Props {
+		node: NodeTypeDefinition;
+	}
+
+	let { node }: Props = $props();
+
+	let installedToolboxes = $state<ToolboxConfig[]>([]);
+	toolboxes.subscribe((list) => (installedToolboxes = list));
+
+	const toolbox = $derived.by(() => {
+		const id = nodeRegistry.getSource(node.type);
+		if (!id || id === BUILTIN_SOURCE) return undefined;
+		return installedToolboxes.find((t) => t.id === id);
+	});
+
+	const toolboxLabel = $derived(
+		toolbox ? `${toolbox.displayName}${toolbox.installedVersion ? ` v${toolbox.installedVersion}` : ''}` : null
+	);
+</script>
+
+<div class="detail-root">
+	<div class="detail-section">
+		<div class="section-title">
+			<span class="title-text">{node.name}</span>
+			{#if toolboxLabel}
+				<span class="title-meta">({toolboxLabel})</span>
+			{/if}
+		</div>
+		<div class="detail-preview">
+			<CanvasBlockPreview {node} />
+		</div>
+	</div>
+
+	<div class="detail-docs">
+		<DocumentationSection docstring={node.docstring} alwaysExpanded />
+	</div>
+</div>
+
+<style>
+	.detail-root {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-height: 0;
+		min-width: 0;
+		overflow: hidden;
+	}
+
+	.detail-section {
+		flex-shrink: 0;
+		padding: var(--space-md);
+		border-bottom: 1px solid var(--border);
+	}
+
+	.section-title {
+		display: flex;
+		align-items: baseline;
+		gap: var(--space-sm);
+		font-size: 10px;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+		color: var(--text-muted);
+		margin-bottom: var(--space-sm);
+	}
+
+	.title-text {
+		flex-shrink: 0;
+	}
+
+	.title-meta {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-weight: 400;
+		color: var(--text-disabled);
+	}
+
+	.detail-preview {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--space-lg) 0;
+	}
+
+	.detail-docs {
+		flex: 1;
+		min-height: 0;
+		overflow-y: auto;
+		padding: var(--space-md);
+		font-size: 11px;
+	}
+</style>
diff --git a/src/lib/tours/scripts/simulation.ts b/src/lib/tours/scripts/simulation.ts
index cbdce098..f093d48b 100644
--- a/src/lib/tours/scripts/simulation.ts
+++ b/src/lib/tours/scripts/simulation.ts
@@ -79,6 +79,7 @@ export const simulationTour: TourScript = {
 					<li><strong>Schedule</strong> — fire at fixed times</li>
 					<li><strong>ZeroCrossing</strong> — trigger when a signal crosses a threshold</li>
 					<li><strong>Condition</strong> — trigger when a Python expression turns true</li>
+					<li>Hover any event for a detail panel with preview and full documentation</li>
 				</ul>
 				<p>Each event can modify block parameters or call user code. The bouncing-ball demo uses an event for the floor collision.</p>
 			`
diff --git a/src/lib/tours/scripts/start.ts b/src/lib/tours/scripts/start.ts
index 303aec05..af73aaa1 100644
--- a/src/lib/tours/scripts/start.ts
+++ b/src/lib/tours/scripts/start.ts
@@ -50,7 +50,7 @@ export const startTour: TourScript = {
 				<ul>
 					<li>Search by name across all categories</li>
 					<li>Drag onto canvas, or click to add at center</li>
-					<li>Hover any block for a preview tooltip</li>
+					<li>Hover any block for a detail panel with preview and full documentation</li>
 					<li>Categories collapse for cleaner navigation</li>
 				</ul>
 			`,
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4e2c4928..775ebb34 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -14,6 +14,8 @@
 	import CodeEditor from '$lib/components/panels/CodeEditor.svelte';
 	import NodeLibrary from '$lib/components/panels/NodeLibrary.svelte';
 	import EventsPanel from '$lib/components/panels/EventsPanel.svelte';
+	import NodeBlockDetail from '$lib/components/panels/library-detail/NodeBlockDetail.svelte';
+	import EventDetail from '$lib/components/panels/library-detail/EventDetail.svelte';
 	import SubsystemTree from '$lib/components/panels/SubsystemTree.svelte';
 	import ToolboxManagerDialog from '$lib/components/dialogs/ToolboxManagerDialog.svelte';
 	import { bootstrapToolboxes, type ToolboxConfig } from '$lib/toolbox';
@@ -210,6 +212,15 @@
 	let codeEditorWidth = $state(400);
 	const propertiesPanelWidth = 310; // Fixed width, not resizable
 
+	// Library detail-column hover state. When the user hovers a tile, the
+	// library panel grows by DETAIL_COLUMN_WIDTH and renders a detail view
+	// of the hovered block.
+	const DETAIL_COLUMN_WIDTH = 400;
+	let nodeLibraryDetailVisible = $state(false);
+	let eventsPanelDetailVisible = $state(false);
+	let nodeLibraryHoveredItem = $state<import('$lib/nodes/types').NodeTypeDefinition | null>(null);
+	let eventsPanelHoveredItem = $state<import('$lib/events/types').EventTypeDefinition | null>(null);
+
 	// Track window size for fitView padding calculation
 	let windowWidth = $state(typeof window !== 'undefined' ? window.innerWidth : 1920);
 	let windowHeight = $state(typeof window !== 'undefined' ? window.innerHeight : 1080);
@@ -407,8 +418,17 @@
 
 	// References for focus management
 	let nodeLibraryRef = $state<NodeLibrary | undefined>(undefined);
+	let eventsPanelRef = $state<EventsPanel | undefined>(undefined);
 	let codeEditorRef = $state<CodeEditor | undefined>(undefined);
 
+	// Effective width = base width + detail-column when expanded.
+	const nodeLibraryEffectiveWidth = $derived(
+		nodeLibraryDetailVisible ? nodeLibraryWidth + DETAIL_COLUMN_WIDTH : nodeLibraryWidth
+	);
+	const eventsPanelEffectiveWidth = $derived(
+		eventsPanelDetailVisible ? eventsPanelWidth + DETAIL_COLUMN_WIDTH : eventsPanelWidth
+	);
+
 	let exportDialogOpen = $state(false);
 	let showKeyboardShortcuts = $state(false);
 	let toolboxManagerOpen = $state(false);
@@ -1344,13 +1364,19 @@
 	{#if showNodeLibrary}
 		<ResizablePanel
 			position="left"
-			width={nodeLibraryWidth}
+			width={nodeLibraryEffectiveWidth}
 			minWidth={280}
-			maxWidth={500}
+			maxWidth={500 + DETAIL_COLUMN_WIDTH}
 			bottomOffset={leftPanelBottomOffset()}
 			title="Blocks"
+			rightColumnActive={nodeLibraryDetailVisible}
+			rightColumnWidth={DETAIL_COLUMN_WIDTH}
 			onClose={() => showNodeLibrary = false}
-			onWidthChange={(w) => nodeLibraryWidth = Math.min(500, Math.max(280, w))}
+			onWidthChange={(w) =>
+				(nodeLibraryWidth = Math.min(
+					500,
+					Math.max(280, w - (nodeLibraryDetailVisible ? DETAIL_COLUMN_WIDTH : 0))
+				))}
 		>
 			{#snippet actions()}
 				<button
@@ -1363,10 +1389,30 @@
 					<Icon name="box" size={16} />
 				</button>
 			{/snippet}
+			{#snippet rightColumn()}
+				{#if nodeLibraryHoveredItem}
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						class="detail-hover-wrap"
+						onmouseenter={() => nodeLibraryRef?.keepDetailAlive()}
+						onmouseleave={() => nodeLibraryRef?.dismissDetail()}
+					>
+						<NodeBlockDetail node={nodeLibraryHoveredItem} />
+					</div>
+				{/if}
+			{/snippet}
+			{#snippet footer()}
+				<div class="library-footer">
+					<span>Click or drag to add</span>
+					<span>↑↓ Enter</span>
+				</div>
+			{/snippet}
 			<NodeLibrary
 				bind:this={nodeLibraryRef}
 				onAddNode={handleAddNode}
 				focusSearch={true}
+				ondetailvisible={(v) => (nodeLibraryDetailVisible = v)}
+				onhoveritem={(item) => (nodeLibraryHoveredItem = item)}
 			/>
 		</ResizablePanel>
 	{/if}
@@ -1375,15 +1421,42 @@
 	{#if showEventsPanel}
 		<ResizablePanel
 			position="left"
-			width={eventsPanelWidth}
+			width={eventsPanelEffectiveWidth}
 			minWidth={200}
-			maxWidth={400}
+			maxWidth={400 + DETAIL_COLUMN_WIDTH}
 			bottomOffset={leftPanelBottomOffset()}
 			title="Events"
+			rightColumnActive={eventsPanelDetailVisible}
+			rightColumnWidth={DETAIL_COLUMN_WIDTH}
 			onClose={() => showEventsPanel = false}
-			onWidthChange={(w) => eventsPanelWidth = Math.min(400, Math.max(200, w))}
+			onWidthChange={(w) =>
+				(eventsPanelWidth = Math.min(
+					400,
+					Math.max(200, w - (eventsPanelDetailVisible ? DETAIL_COLUMN_WIDTH : 0))
+				))}
 		>
-			<EventsPanel />
+			{#snippet rightColumn()}
+				{#if eventsPanelHoveredItem}
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						class="detail-hover-wrap"
+						onmouseenter={() => eventsPanelRef?.keepDetailAlive()}
+						onmouseleave={() => eventsPanelRef?.dismissDetail()}
+					>
+						<EventDetail event={eventsPanelHoveredItem} />
+					</div>
+				{/if}
+			{/snippet}
+			{#snippet footer()}
+				<div class="library-footer">
+					<span>Click or drag to add</span>
+				</div>
+			{/snippet}
+			<EventsPanel
+				bind:this={eventsPanelRef}
+				ondetailvisible={(v) => (eventsPanelDetailVisible = v)}
+				onhoveritem={(item) => (eventsPanelHoveredItem = item)}
+			/>
 		</ResizablePanel>
 	{/if}
 
@@ -1775,6 +1848,26 @@
 		padding: var(--space-md);
 	}
 
+	/* Wraps the library detail-column content so a single mouseenter /
+	 * mouseleave pair manages the hover lifecycle from the parent. */
+	.detail-hover-wrap {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-height: 0;
+	}
+
+	/* Footer for the library panels. Lives in ResizablePanel's footer slot
+	 * so it spans both columns when the detail panel is open. */
+	.library-footer {
+		display: flex;
+		justify-content: space-between;
+		gap: var(--space-md);
+		padding: var(--space-sm) var(--space-md);
+		font-size: 10px;
+		color: var(--text-disabled);
+	}
+
 	/* Header tabs for results panel - pill style matching breadcrumb */
 	.header-tabs {
 		display: flex;