@preact/signals-devtools-ui 0.2.0 → 0.4.0

package/src/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/src/types.ts

@@ -4,6 +4,7 @@
 export type {
 	SignalUpdate,
 	SignalDisposed,
+	DependencyInfo,
 	Settings,
 	ConnectionStatus,
 	ConnectionStatusType,
@@ -16,7 +17,7 @@ export type {
 export interface GraphNode {
 	id: string;
 	name: string;
-	type: "signal" | "computed" | "effect";
+	type: "signal" | "computed" | "effect" | "component";
 	x: number;
 	y: number;
 	depth: number;