@preact/signals-devtools-ui 0.3.0 → 0.4.1

package/package.json

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

package/src/components/Graph.tsx

@@ -212,7 +212,8 @@ export function GraphVisualization() {
 			if (!update.signalId) continue;
 			if (!showDisposed && disposed.has(update.signalId)) continue;
 
-			const type: "signal" | "computed" | "effect" = update.signalType;
+			const type: "signal" | "computed" | "effect" | "component" =
+				update.signalType;
 
 			if (!nodes.has(update.signalId)) {
 				nodes.set(update.signalId, {
@@ -424,6 +425,9 @@ export function GraphVisualization() {
 				case "effect":
 					lines.push(`  ${id}([${name}])`);
 					break;
+				case "component":
+					lines.push(`  ${id}{{${name}}}`);
+					break;
 			}
 		});
 
@@ -489,7 +493,7 @@ export function GraphVisualization() {
 							refY="3"
 							orient="auto"
 						>
-							<polygon points="0 0, 8 3, 0 6" fill="#94a3b8" />
+							<polygon points="0 0, 8 3, 0 6" className="graph-arrowhead" />
 						</marker>
 					</defs>
 
@@ -635,26 +639,21 @@ export function GraphVisualization() {
 
 				<div className="graph-legend">
 					<div className="legend-item">
-						<div
-							className="legend-color"
-							style={{ backgroundColor: "#2196f3" }}
-						></div>
+						<div className="legend-color signal"></div>
 						<span>Signal</span>
 					</div>
 					<div className="legend-item">
-						<div
-							className="legend-color"
-							style={{ backgroundColor: "#ff9800" }}
-						></div>
+						<div className="legend-color computed"></div>
 						<span>Computed</span>
 					</div>
 					<div className="legend-item">
-						<div
-							className="legend-color"
-							style={{ backgroundColor: "#4caf50" }}
-						></div>
+						<div className="legend-color effect"></div>
 						<span>Effect</span>
 					</div>
+					<div className="legend-item">
+						<div className="legend-color component"></div>
+						<span>Component</span>
+					</div>
 				</div>
 			</div>
 		</div>

package/src/components/Header.tsx

@@ -1,9 +1,22 @@
 import { StatusIndicator } from "./StatusIndicator";
 import { Button } from "./Button";
 import { getContext } from "../context";
+import type { ThemeMode } from "../context";
+
+const themeLabels: Record<ThemeMode, string> = {
+	auto: "Auto",
+	light: "Light",
+	dark: "Dark",
+};
+
+const themeIcons: Record<ThemeMode, string> = {
+	auto: "\u25D1",
+	light: "\u2600",
+	dark: "\u263E",
+};
 
 export function Header() {
-	const { connectionStore, updatesStore } = getContext();
+	const { connectionStore, updatesStore, themeStore } = getContext();
 
 	const onTogglePause = () => {
 		updatesStore.isPaused.value = !updatesStore.isPaused.value;
@@ -23,6 +36,13 @@ export function Header() {
 				/>
 			</div>
 			<div className="header-controls">
+				<button
+					className="theme-toggle"
+					onClick={themeStore.toggleTheme}
+					title={`Theme: ${themeLabels[themeStore.theme]}`}
+				>
+					{themeIcons[themeStore.theme]} {themeLabels[themeStore.theme]}
+				</button>
 				{onClear && <Button onClick={onClear}>Clear</Button>}
 				{onTogglePause && (
 					<Button onClick={onTogglePause} active={updatesStore.isPaused.value}>

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

@@ -1,4 +1,4 @@
-import { signal, computed } from "@preact/signals";
+import { signal, computed, effect } from "@preact/signals";
 import type {
 	DevToolsAdapter,
 	ConnectionStatus,
@@ -8,11 +8,14 @@ import type {
 	DependencyInfo,
 } from "@preact/signals-devtools-adapter";
 
+export type ThemeMode = "auto" | "light" | "dark";
+
 export interface DevToolsContext {
 	adapter: DevToolsAdapter;
 	connectionStore: ReturnType<typeof createConnectionStore>;
 	updatesStore: ReturnType<typeof createUpdatesStore>;
 	settingsStore: ReturnType<typeof createSettingsStore>;
+	themeStore: ReturnType<typeof createThemeStore>;
 }
 
 let currentContext: DevToolsContext | null = null;
@@ -65,8 +68,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;
@@ -325,16 +328,85 @@ export function createSettingsStore(adapter: DevToolsAdapter) {
 	};
 }
 
+const THEME_STORAGE_KEY = "signals-devtools-theme";
+
+export function createThemeStore() {
+	const stored = (() => {
+		try {
+			const val = localStorage.getItem(THEME_STORAGE_KEY);
+			if (val === "light" || val === "dark" || val === "auto") return val;
+		} catch {
+			// localStorage unavailable
+		}
+		return "auto" as ThemeMode;
+	})();
+
+	const theme = signal<ThemeMode>(stored);
+
+	const mediaQuery =
+		typeof window !== "undefined"
+			? window.matchMedia("(prefers-color-scheme: dark)")
+			: null;
+	const systemIsDark = signal(mediaQuery?.matches ?? false);
+
+	if (mediaQuery) {
+		const handler = (e: MediaQueryListEvent) => {
+			systemIsDark.value = e.matches;
+		};
+		mediaQuery.addEventListener("change", handler);
+	}
+
+	const resolvedTheme = computed<"light" | "dark">(() =>
+		theme.value === "auto"
+			? systemIsDark.value
+				? "dark"
+				: "light"
+			: theme.value
+	);
+
+	// Apply data-theme attribute to the devtools container
+	effect(() => {
+		const resolved = resolvedTheme.value;
+		const el = document.querySelector(".signals-devtools");
+		if (el instanceof HTMLElement) {
+			el.dataset.theme = resolved;
+		}
+	});
+
+	const toggleTheme = () => {
+		const order: ThemeMode[] = ["auto", "light", "dark"];
+		const idx = order.indexOf(theme.value);
+		theme.value = order[(idx + 1) % order.length];
+		try {
+			localStorage.setItem(THEME_STORAGE_KEY, theme.value);
+		} catch {
+			// localStorage unavailable
+		}
+	};
+
+	return {
+		get theme() {
+			return theme.value;
+		},
+		get resolvedTheme() {
+			return resolvedTheme.value;
+		},
+		toggleTheme,
+	};
+}
+
 export function initDevTools(adapter: DevToolsAdapter): DevToolsContext {
 	const settingsStore = createSettingsStore(adapter);
 	const updatesStore = createUpdatesStore(adapter, settingsStore);
 	const connectionStore = createConnectionStore(adapter);
+	const themeStore = createThemeStore();
 
 	currentContext = {
 		adapter,
 		connectionStore,
 		updatesStore,
 		settingsStore,
+		themeStore,
 	};
 
 	return currentContext;