@preact/signals-devtools-ui 0.2.0 → 0.4.0

package/dist/styles.css

@@ -7,7 +7,8 @@
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   font-size: 13px;
   line-height: 1.4;
   color: #333;
@@ -54,10 +55,10 @@ body {
 }
 
 .divider {
-	width: 100%;
-	height: 2px;
-	background: #e0e0e0;
-	margin: 8px 0;
+  width: 100%;
+  height: 2px;
+  background: #e0e0e0;
+  margin: 8px 0;
 }
 
 .status-indicator {
@@ -86,8 +87,13 @@ body {
 }
 
 @keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
 }
 
 .header-controls {
@@ -151,9 +157,8 @@ body {
   background: white;
   border: 1px solid #d0d0d0;
   border-radius: 8px;
-  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
   z-index: 1000;
-  max-height: 400px;
   overflow-y: auto;
 }
 
@@ -315,16 +320,40 @@ body {
   border-left: 4px solid #ff9800;
 }
 
+.update-item.component {
+  border-left: 4px solid #4caf50;
+  background-color: #f8fff8;
+}
+
+.update-type-badge {
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 3px;
+  background: #e0e0e0;
+  color: #666;
+  margin-left: 8px;
+}
+
+.update-item.component .update-type-badge {
+  background: #e8f5e9;
+  color: #2e7d32;
+}
+
+.update-item.effect .update-type-badge {
+  background: #fff3e0;
+  color: #e65100;
+}
+
 .component-name-header {
-	margin-right: 8px;
+  margin-right: 8px;
 }
 
 .component-list {
-	list-style: none;
-	display: flex;
-	padding: 0;
-	margin: 0;
-	font-family: monospace;
+  list-style: none;
+  display: flex;
+  padding: 0;
+  margin: 0;
+  font-family: monospace;
   background: #f8f9fa;
   padding: 4px 6px;
   border-radius: 3px;
@@ -346,6 +375,10 @@ body {
   margin-bottom: 4px;
 }
 
+.signals-devtools {
+  position: relative;
+}
+
 .update-count {
   display: inline-block;
   padding: 0 6px;
@@ -436,8 +469,7 @@ body {
   position: relative;
   background:
     linear-gradient(90deg, #e5e7eb 1px, transparent 1px),
-    linear-gradient(180deg, #e5e7eb 1px, transparent 1px),
-    #f8fafc;
+    linear-gradient(180deg, #e5e7eb 1px, transparent 1px), #f8fafc;
   background-size: 40px 40px;
   overflow: hidden;
   user-select: none;
@@ -469,7 +501,7 @@ body {
   font-size: 12px;
   font-weight: 500;
   cursor: pointer;
-  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
   transition: all 0.15s ease;
 }
 
@@ -477,7 +509,7 @@ body {
 .graph-export-button:hover {
   background: #fff;
   border-color: #cbd5e1;
-  box-shadow: 0 4px 8px rgba(0,0,0,0.12);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
   transform: translateY(-1px);
 }
 
@@ -499,7 +531,7 @@ body {
   background: white;
   border: 1px solid #e0e0e0;
   border-radius: 4px;
-  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
   overflow: hidden;
   min-width: 180px;
 }
@@ -539,21 +571,23 @@ body {
   font-size: 11px;
   font-weight: 600;
   font-family: monospace;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   min-width: 48px;
   text-align: center;
 }
 
 .graph-node {
   cursor: pointer;
-  transition: transform 0.15s ease, filter 0.15s ease;
+  transition:
+    transform 0.15s ease,
+    filter 0.15s ease;
   stroke: #fff;
   stroke-width: 2.5;
-  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.15));
+  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.15));
 }
 
 .graph-node-group.hovered .graph-node {
-  filter: brightness(1.15) drop-shadow(0 4px 12px rgba(0,0,0,0.25));
+  filter: brightness(1.15) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
   stroke-width: 3;
 }
 
@@ -577,7 +611,9 @@ body {
   stroke: #94a3b8;
   stroke-width: 2;
   fill: none;
-  transition: stroke 0.2s, stroke-width 0.2s;
+  transition:
+    stroke 0.2s,
+    stroke-width 0.2s;
 }
 
 .graph-link.highlighted {
@@ -592,7 +628,7 @@ body {
   font-size: 12px;
   font-weight: 600;
   pointer-events: none;
-  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
   letter-spacing: 0.2px;
 }
 
@@ -604,7 +640,7 @@ body {
   padding: 10px 14px;
   border-radius: 8px;
   font-size: 12px;
-  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
   z-index: 1000;
   pointer-events: none;
   transform: translateY(-50%);
@@ -676,7 +712,7 @@ body {
   border-radius: 8px;
   padding: 14px 16px;
   font-size: 12px;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }
 
 .legend-item {
@@ -694,7 +730,7 @@ body {
   width: 14px;
   height: 14px;
   border-radius: 50%;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
 }
 
 .component-boundary {
@@ -730,7 +766,7 @@ body {
   border-radius: 4px;
   font-size: 13px;
   font-weight: 500;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   z-index: 1000;
   animation: slideInFade 0.3s ease-out;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preact/signals-devtools-ui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "license": "MIT",
   "description": "DevTools UI components for @preact/signals",
   "keywords": [
@@ -44,7 +44,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@preact/signals-devtools-adapter": "0.2.0"
+    "@preact/signals-devtools-adapter": "0.4.0"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",
@@ -54,9 +54,10 @@
     "typescript": "~5.8.3",
     "vite": "^7.0.0",
     "vitest": "^4.0.17",
-    "@preact/signals": "2.6.1"
+    "@preact/signals": "2.7.0"
   },
   "publishConfig": {
+    "access": "public",
     "provenance": true
   },
   "scripts": {

package/src/DevToolsPanel.tsx

@@ -23,7 +23,7 @@ export function DevToolsPanel({
 	const activeTab = useSignal<"updates" | "graph">(initialTab);
 
 	return (
-		<div id="app" className="signals-devtools">
+		<div className="signals-devtools">
 			{!hideHeader && <Header />}
 
 			<SettingsPanel />

package/src/components/Graph.tsx

@@ -24,7 +24,6 @@ export function GraphVisualization() {
 	const containerRef = useRef<HTMLDivElement>(null);
 	const exportMenuRef = useRef<HTMLDivElement>(null);
 
-	// Pan and zoom state using signals
 	const panOffset = useSignal({ x: 0, y: 0 });
 	const zoom = useSignal(1);
 	const isPanning = useSignal(false);
@@ -51,7 +50,150 @@ export function GraphVisualization() {
 		};
 	}, []);
 
-	// Build graph data from updates signal using a computed
+	// Improved topological sort with proper layering
+	const computeNodeLayers = (
+		nodes: Map<string, GraphNode>,
+		links: GraphLink[]
+	): Map<string, number> => {
+		const layers = new Map<string, number>();
+		const adjacency = new Map<string, Set<string>>();
+		const inDegree = new Map<string, number>();
+
+		// Initialize adjacency list and in-degrees
+		nodes.forEach((_, id) => {
+			adjacency.set(id, new Set());
+			inDegree.set(id, 0);
+		});
+
+		// Build adjacency list and calculate in-degrees
+		links.forEach(link => {
+			adjacency.get(link.source)?.add(link.target);
+			inDegree.set(link.target, (inDegree.get(link.target) || 0) + 1);
+		});
+
+		// BFS-based layering (Kahn's algorithm with layers)
+		const queue: string[] = [];
+
+		// Start with nodes that have no dependencies (in-degree = 0)
+		nodes.forEach((_, id) => {
+			if (inDegree.get(id) === 0) {
+				queue.push(id);
+				layers.set(id, 0);
+			}
+		});
+
+		while (queue.length > 0) {
+			const nodeId = queue.shift()!;
+			const currentLayer = layers.get(nodeId)!;
+
+			// Process all nodes that depend on this node
+			adjacency.get(nodeId)?.forEach(targetId => {
+				// Update target's layer to be at least one more than current
+				const targetLayer = layers.get(targetId) ?? 0;
+				layers.set(targetId, Math.max(targetLayer, currentLayer + 1));
+
+				// Decrease in-degree and add to queue if all dependencies processed
+				const newInDegree = (inDegree.get(targetId) || 0) - 1;
+				inDegree.set(targetId, newInDegree);
+
+				if (newInDegree === 0) {
+					queue.push(targetId);
+				}
+			});
+		}
+
+		return layers;
+	};
+
+	// Reduce edge crossings within layers using barycenter heuristic
+	const minimizeCrossings = (
+		nodesByLayer: Map<number, GraphNode[]>,
+		links: GraphLink[]
+	): void => {
+		const layers = Array.from(nodesByLayer.keys()).sort((a, b) => a - b);
+
+		// Build adjacency maps for quick lookup
+		const targets = new Map<string, string[]>();
+		const sources = new Map<string, string[]>();
+
+		links.forEach(link => {
+			if (!targets.has(link.source)) targets.set(link.source, []);
+			if (!sources.has(link.target)) sources.set(link.target, []);
+			targets.get(link.source)!.push(link.target);
+			sources.get(link.target)!.push(link.source);
+		});
+
+		// Create position maps for quick lookup
+		const nodePositions = new Map<string, number>();
+
+		// Multiple passes to reduce crossings
+		for (let pass = 0; pass < 4; pass++) {
+			// Forward pass: order based on predecessors
+			for (let i = 0; i < layers.length; i++) {
+				const layer = layers[i];
+				const nodes = nodesByLayer.get(layer)!;
+
+				// Update position map for current layer
+				nodes.forEach((node, idx) => {
+					nodePositions.set(node.id, idx);
+				});
+
+				if (i === 0) continue; // Skip first layer
+
+				// Calculate barycenter for each node based on predecessors
+				const barycenters = nodes.map(node => {
+					const preds = sources.get(node.id) || [];
+					if (preds.length === 0) return 0;
+
+					const sum = preds.reduce((acc, predId) => {
+						return acc + (nodePositions.get(predId) ?? 0);
+					}, 0);
+					return sum / preds.length;
+				});
+
+				// Sort nodes by barycenter
+				const sorted = nodes
+					.map((node, idx) => ({ node, barycenter: barycenters[idx] }))
+					.sort((a, b) => a.barycenter - b.barycenter)
+					.map(item => item.node);
+
+				nodesByLayer.set(layer, sorted);
+			}
+
+			// Backward pass: order based on successors
+			for (let i = layers.length - 1; i >= 0; i--) {
+				const layer = layers[i];
+				const nodes = nodesByLayer.get(layer)!;
+
+				// Update position map for current layer
+				nodes.forEach((node, idx) => {
+					nodePositions.set(node.id, idx);
+				});
+
+				if (i === layers.length - 1) continue; // Skip last layer
+
+				// Calculate barycenter for each node based on successors
+				const barycenters = nodes.map(node => {
+					const succs = targets.get(node.id) || [];
+					if (succs.length === 0) return 0;
+
+					const sum = succs.reduce((acc, succId) => {
+						return acc + (nodePositions.get(succId) ?? 0);
+					}, 0);
+					return sum / succs.length;
+				});
+
+				// Sort nodes by barycenter
+				const sorted = nodes
+					.map((node, idx) => ({ node, barycenter: barycenters[idx] }))
+					.sort((a, b) => a.barycenter - b.barycenter)
+					.map(item => item.node);
+
+				nodesByLayer.set(layer, sorted);
+			}
+		}
+	};
+
 	const graphData = useComputed<GraphData>(() => {
 		const rawUpdates = updates.value;
 		const disposed = disposedSignalIds.value;
@@ -62,19 +204,16 @@ export function GraphVisualization() {
 		const nodes = new Map<string, GraphNode>();
 		const links = new Map<string, GraphLink>();
 
-		// Process updates to build graph structure
 		const signalUpdates = rawUpdates.filter(
 			update => update.type !== "divider"
 		) as SignalUpdate[];
 
 		for (const update of signalUpdates) {
 			if (!update.signalId) continue;
-
-			// Skip disposed signals unless showDisposed is enabled
 			if (!showDisposed && disposed.has(update.signalId)) continue;
 
-			const type: "signal" | "computed" | "effect" = update.signalType;
-			const currentDepth = update.depth || 0;
+			const type: "signal" | "computed" | "effect" | "component" =
+				update.signalType;
 
 			if (!nodes.has(update.signalId)) {
 				nodes.set(update.signalId, {
@@ -83,12 +222,35 @@ export function GraphVisualization() {
 					type,
 					x: 0,
 					y: 0,
-					depth: currentDepth,
+					depth: 0, // Will be recalculated
 				});
 			}
 
-			if (update.subscribedTo) {
-				// Also skip links to/from disposed signals
+			if (update.allDependencies && update.allDependencies.length > 0) {
+				for (const dep of update.allDependencies) {
+					const sourceDisposed = !showDisposed && disposed.has(dep.id);
+					if (sourceDisposed) continue;
+
+					if (!nodes.has(dep.id)) {
+						nodes.set(dep.id, {
+							id: dep.id,
+							name: dep.name,
+							type: dep.type,
+							x: 0,
+							y: 0,
+							depth: 0,
+						});
+					}
+
+					const linkKey = `${dep.id}->${update.signalId}`;
+					if (!links.has(linkKey)) {
+						links.set(linkKey, {
+							source: dep.id,
+							target: update.signalId,
+						});
+					}
+				}
+			} else if (update.subscribedTo) {
 				const sourceDisposed =
 					!showDisposed && disposed.has(update.subscribedTo);
 				if (sourceDisposed) continue;
@@ -103,41 +265,50 @@ export function GraphVisualization() {
 			}
 		}
 
-		// Simple depth-based layout
-		const allNodes = Array.from(nodes.values());
-		const nodeSpacing = 120;
-		const depthSpacing = 250;
-		const startX = 100;
-		const startY = 80;
+		const allLinks = Array.from(links.values());
+
+		// Compute proper layers using topological sort
+		const nodeLayers = computeNodeLayers(nodes, allLinks);
+
+		// Update node depths based on computed layers
+		nodes.forEach((node, id) => {
+			node.depth = nodeLayers.get(id) ?? 0;
+		});
 
-		// Group nodes by depth
-		const nodesByDepth = new Map<number, GraphNode[]>();
-		allNodes.forEach(node => {
-			if (!nodesByDepth.has(node.depth)) {
-				nodesByDepth.set(node.depth, []);
+		// Group nodes by layer
+		const nodesByLayer = new Map<number, GraphNode[]>();
+		nodes.forEach(node => {
+			if (!nodesByLayer.has(node.depth)) {
+				nodesByLayer.set(node.depth, []);
 			}
-			nodesByDepth.get(node.depth)!.push(node);
+			nodesByLayer.get(node.depth)!.push(node);
 		});
 
-		// Layout nodes by depth, centering each depth level vertically
-		const maxDepth = Math.max(...allNodes.map(n => n.depth));
-		nodesByDepth.forEach((depthNodes, depth) => {
-			const depthHeight = (depthNodes.length - 1) * nodeSpacing;
-			const depthStartY = startY + maxDepth * 100 - depthHeight / 2;
+		// Minimize edge crossings
+		minimizeCrossings(nodesByLayer, allLinks);
+
+		// Layout nodes with proper spacing
+		const nodeSpacing = 120;
+		const layerSpacing = 250;
+		const startX = 100;
+		const startY = 80;
 
-			depthNodes.forEach((node, index) => {
-				node.x = startX + depth * depthSpacing;
-				node.y = depthStartY + index * nodeSpacing;
+		nodesByLayer.forEach((layerNodes, layer) => {
+			const layerHeight = (layerNodes.length - 1) * nodeSpacing;
+			const layerStartY = startY - layerHeight / 2;
+
+			layerNodes.forEach((node, index) => {
+				node.x = startX + layer * layerSpacing;
+				node.y = layerStartY + index * nodeSpacing + nodesByLayer.size * 50;
 			});
 		});
 
 		return {
-			nodes: allNodes,
-			links: Array.from(links.values()),
+			nodes: Array.from(nodes.values()),
+			links: allLinks,
 		};
 	});
 
-	// Mouse event handlers for panning
 	const handleMouseDown = (e: MouseEvent) => {
 		if (e.button !== 0) return;
 		isPanning.value = true;
@@ -169,7 +340,6 @@ export function GraphVisualization() {
 		const mouseX = e.clientX - rect.left;
 		const mouseY = e.clientY - rect.top;
 
-		// Smoother zoom: smaller delta for less aggressive scrolling
 		const delta = e.deltaY > 0 ? 0.96 : 1.04;
 		const newZoom = Math.min(Math.max(0.1, zoom.value * delta), 5);
 
@@ -194,16 +364,14 @@ export function GraphVisualization() {
 	const mermaidIdPattern = /[^a-zA-Z0-9]/g;
 	const computeMermaidId = (id: string) => id.replace(mermaidIdPattern, "_");
 
-	// Calculate node radius based on name length
 	const getNodeRadius = (node: GraphNode) => {
 		const baseRadius = 30;
-		const charWidth = 6.5; // Approximate width per character
+		const charWidth = 6.5;
 		const padding = 16;
 		const textWidth = node.name.length * charWidth + padding;
 		return Math.max(baseRadius, Math.min(textWidth / 2, 70));
 	};
 
-	// Handle node hover for tooltip
 	const handleNodeMouseEnter = (node: GraphNode, e: MouseEvent) => {
 		hoveredNode.value = node;
 		const container = containerRef.current;
@@ -257,6 +425,9 @@ export function GraphVisualization() {
 				case "effect":
 					lines.push(`  ${id}([${name}])`);
 					break;
+				case "component":
+					lines.push(`  ${id}{{${name}}}`);
+					break;
 			}
 		});
 
@@ -344,7 +515,7 @@ export function GraphVisualization() {
 								const targetRadius = getNodeRadius(targetNode);
 								const sourceX = sourceNode.x + sourceRadius;
 								const sourceY = sourceNode.y;
-								const targetX = targetNode.x - targetRadius - 8; // Extra space for arrow
+								const targetX = targetNode.x - targetRadius - 8;
 								const targetY = targetNode.y;
 
 								const midX = sourceX + (targetX - sourceX) * 0.5;
@@ -365,7 +536,6 @@ export function GraphVisualization() {
 						<g className="nodes">
 							{graphData.value.nodes.map(node => {
 								const radius = getNodeRadius(node);
-								// Calculate max chars based on radius
 								const maxChars = Math.floor((radius * 2 - 16) / 6.5);
 								const displayName =
 									node.name.length > maxChars
@@ -489,6 +659,13 @@ export function GraphVisualization() {
 						></div>
 						<span>Effect</span>
 					</div>
+					<div className="legend-item">
+						<div
+							className="legend-color"
+							style={{ backgroundColor: "#9c27b0" }}
+						></div>
+						<span>Component</span>
+					</div>
 				</div>
 			</div>
 		</div>

package/src/components/UpdateItem.tsx

@@ -31,14 +31,17 @@ export function UpdateItem({ update, count, firstUpdate }: UpdateItemProps) {
 		</span>
 	);
 
-	if (update.type === "effect") {
+	if (update.type === "effect" || update.type === "component") {
+		const icon = update.type === "component" ? "🔄" : "↪️";
+		const label = update.type === "component" ? "Component render" : "Effect";
 		return (
 			<div className={`update-item ${update.type}`}>
 				<div className="update-header">
 					<span className="signal-name">
-						↪️ {update.signalName}
+						{icon} {update.signalName}
 						{countLabel}
 					</span>
+					<span className="update-type-badge">{label}</span>
 					<span className="update-time">{time}</span>
 				</div>
 			</div>

package/src/context.ts

@@ -5,6 +5,7 @@ import type {
 	ConnectionStatusType,
 	Settings,
 	SignalDisposed,
+	DependencyInfo,
 } from "@preact/signals-devtools-adapter";
 
 export interface DevToolsContext {
@@ -64,8 +65,8 @@ export function createConnectionStore(adapter: DevToolsAdapter) {
 }
 
 export interface SignalUpdate {
-	type: "update" | "effect";
-	signalType: "signal" | "computed" | "effect";
+	type: "update" | "effect" | "component";
+	signalType: "signal" | "computed" | "effect" | "component";
 	signalName: string;
 	signalId?: string;
 	prevValue?: any;
@@ -74,6 +75,8 @@ export interface SignalUpdate {
 	receivedAt: number;
 	depth?: number;
 	subscribedTo?: string;
+	/** All dependencies this computed/effect currently depends on (with rich info) */
+	allDependencies?: DependencyInfo[];
 }
 
 export type Divider = { type: "divider" };