@preact/signals-devtools-ui 0.4.0 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preact/signals-devtools-ui",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "license": "MIT",
   "description": "DevTools UI components for @preact/signals",
   "keywords": [
@@ -54,7 +54,7 @@
     "typescript": "~5.8.3",
     "vite": "^7.0.0",
     "vitest": "^4.0.17",
-    "@preact/signals": "2.7.0"
+    "@preact/signals": "2.8.1"
   },
   "publishConfig": {
     "access": "public",

package/src/DevToolsPanel.tsx

@@ -44,7 +44,7 @@ export function DevToolsPanel({
 					</button>
 				</div>
 				<div className="tab-content">
-					{!connectionStore.isConnected ? (
+					{!connectionStore.isConnected.value ? (
 						<EmptyState onRefresh={connectionStore.refreshConnection} />
 					) : (
 						<>

package/src/components/Graph.tsx

@@ -197,7 +197,7 @@ export function GraphVisualization() {
 	const graphData = useComputed<GraphData>(() => {
 		const rawUpdates = updates.value;
 		const disposed = disposedSignalIds.value;
-		const showDisposed = settingsStore.showDisposedSignals;
+		const showDisposed = settingsStore.showDisposedSignals.value;
 
 		if (!rawUpdates || rawUpdates.length === 0) return { nodes: [], links: [] };
 
@@ -493,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>
 
@@ -639,31 +639,19 @@ 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"
-							style={{ backgroundColor: "#9c27b0" }}
-						></div>
+						<div className="legend-color component"></div>
 						<span>Component</span>
 					</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;
@@ -18,11 +31,19 @@ export function Header() {
 			<div className="header-title">
 				<h1>Signals</h1>
 				<StatusIndicator
-					status={connectionStore.status}
-					message={connectionStore.message}
+					status={connectionStore.status.value}
+					message={connectionStore.message.value}
 				/>
 			</div>
 			<div className="header-controls">
+				<button
+					className="theme-toggle"
+					onClick={themeStore.toggleTheme}
+					title={`Theme: ${themeLabels[themeStore.theme.value]}`}
+				>
+					{themeIcons[themeStore.theme.value]}{" "}
+					{themeLabels[themeStore.theme.value]}
+				</button>
 				{onClear && <Button onClick={onClear}>Clear</Button>}
 				{onTogglePause && (
 					<Button onClick={onTogglePause} active={updatesStore.isPaused.value}>

package/src/components/SettingsPanel.tsx

@@ -9,12 +9,11 @@ export function SettingsPanel() {
 	const popover = useRef<HTMLDivElement>(null);
 
 	const onApply = settingsStore.applySettings;
-	const settings = settingsStore.settings;
 
-	const localSettings = useSignal<Settings>(settings);
+	const localSettings = useSignal<Settings>(settingsStore.settings.value);
 
 	useSignalEffect(() => {
-		localSettings.value = settingsStore.settings;
+		localSettings.value = settingsStore.settings.value;
 	});
 
 	const handleApply = () => {
@@ -132,7 +131,7 @@ export function SettingsPanel() {
 					<label>
 						<input
 							type="checkbox"
-							checked={settingsStore.showDisposedSignals}
+							checked={settingsStore.showDisposedSignals.value}
 							onChange={() => settingsStore.toggleShowDisposedSignals()}
 						/>
 						Show disposed signals in graph

package/src/context.ts

@@ -1,18 +1,25 @@
-import { signal, computed } from "@preact/signals";
-import type {
-	DevToolsAdapter,
-	ConnectionStatus,
-	ConnectionStatusType,
-	Settings,
-	SignalDisposed,
-	DependencyInfo,
-} from "@preact/signals-devtools-adapter";
+import type { DevToolsAdapter } from "@preact/signals-devtools-adapter";
+import { ConnectionModel } from "./models/ConnectionModel";
+import { SettingsModel } from "./models/SettingsModel";
+import { ThemeModel } from "./models/ThemeModel";
+import { UpdatesModel } from "./models/UpdatesModel";
+
+export { ConnectionModel, SettingsModel, ThemeModel, UpdatesModel };
+export type {
+	SignalUpdate,
+	Divider,
+	UpdateTreeNode,
+	UpdateTreeNodeSingle,
+	UpdateTreeNodeGroup,
+} from "./models/UpdatesModel";
+export type { ThemeMode } from "./models/ThemeModel";
 
 export interface DevToolsContext {
 	adapter: DevToolsAdapter;
-	connectionStore: ReturnType<typeof createConnectionStore>;
-	updatesStore: ReturnType<typeof createUpdatesStore>;
-	settingsStore: ReturnType<typeof createSettingsStore>;
+	connectionStore: InstanceType<typeof ConnectionModel>;
+	updatesStore: InstanceType<typeof UpdatesModel>;
+	settingsStore: InstanceType<typeof SettingsModel>;
+	themeStore: InstanceType<typeof ThemeModel>;
 }
 
 let currentContext: DevToolsContext | null = null;
@@ -26,315 +33,18 @@ export function getContext(): DevToolsContext {
 	return currentContext;
 }
 
-export function createConnectionStore(adapter: DevToolsAdapter) {
-	const status = signal<ConnectionStatusType>("connecting");
-	const message = signal<string>("Connecting...");
-	const isConnected = signal(false);
-
-	// Listen to adapter events
-	adapter.on(
-		"connectionStatusChanged",
-		(connectionStatus: ConnectionStatus) => {
-			status.value = connectionStatus.status;
-			message.value = connectionStatus.message;
-		}
-	);
-
-	adapter.on("signalsAvailable", (available: boolean) => {
-		isConnected.value = available;
-	});
-
-	const refreshConnection = () => {
-		status.value = "connecting";
-		message.value = "Connecting...";
-		adapter.requestState();
-	};
-
-	return {
-		get status() {
-			return status.value;
-		},
-		get message() {
-			return message.value;
-		},
-		get isConnected() {
-			return isConnected.value;
-		},
-		refreshConnection,
-	};
-}
-
-export interface SignalUpdate {
-	type: "update" | "effect" | "component";
-	signalType: "signal" | "computed" | "effect" | "component";
-	signalName: string;
-	signalId?: string;
-	prevValue?: any;
-	newValue?: any;
-	timestamp?: number;
-	receivedAt: number;
-	depth?: number;
-	subscribedTo?: string;
-	/** All dependencies this computed/effect currently depends on (with rich info) */
-	allDependencies?: DependencyInfo[];
-}
-
-export type Divider = { type: "divider" };
-
-export interface UpdateTreeNodeBase {
-	id: string;
-	update: SignalUpdate;
-	children: UpdateTreeNode[];
-	depth: number;
-	hasChildren: boolean;
-}
-
-export interface UpdateTreeNodeSingle extends UpdateTreeNodeBase {
-	type: "single";
-}
-
-export interface UpdateTreeNodeGroup extends UpdateTreeNodeBase {
-	type: "group";
-	count: number;
-	firstUpdate: SignalUpdate;
-	firstChildren: UpdateTreeNode[];
-}
-
-export type UpdateTreeNode = UpdateTreeNodeGroup | UpdateTreeNodeSingle;
-
-const nodesAreEqual = (a: UpdateTreeNode, b: UpdateTreeNode): boolean => {
-	return (
-		a.update.signalId === b.update.signalId &&
-		a.children.length === b.children.length &&
-		a.children.every((child, index) => nodesAreEqual(child, b.children[index]))
-	);
-};
-
-const collapseTree = (nodes: UpdateTreeNodeSingle[]): UpdateTreeNode[] => {
-	const tree: UpdateTreeNode[] = [];
-	let lastNode: UpdateTreeNode | undefined;
-
-	for (const node of nodes) {
-		if (lastNode && nodesAreEqual(lastNode, node)) {
-			if (lastNode.type !== "group") {
-				tree.pop();
-				lastNode = {
-					...lastNode,
-					type: "group",
-					count: 2,
-					firstUpdate: node.update,
-					firstChildren: node.children,
-				};
-				tree.push(lastNode);
-			} else {
-				lastNode.count++;
-				lastNode.firstUpdate = node.update;
-				lastNode.firstChildren = node.children;
-			}
-			continue;
-		}
-		tree.push(node);
-		lastNode = node;
-	}
-
-	return tree;
-};
-
-export function createUpdatesStore(
-	adapter: DevToolsAdapter,
-	settingsStore: ReturnType<typeof createSettingsStore>
-) {
-	const updates = signal<(SignalUpdate | Divider)[]>([]);
-	const isPaused = signal<boolean>(false);
-	const disposedSignalIds = signal<Set<string>>(new Set());
-
-	const addUpdate = (
-		update: SignalUpdate | Divider | Array<SignalUpdate | Divider>
-	) => {
-		if (Array.isArray(update)) {
-			update.forEach(item => {
-				if (item.type !== "divider") item.receivedAt = Date.now();
-			});
-		} else if (update.type === "update") {
-			update.receivedAt = Date.now();
-		}
-		updates.value = [
-			...updates.value,
-			...(Array.isArray(update) ? update : [update]),
-		];
-	};
-
-	const addDisposal = (disposal: SignalDisposed | SignalDisposed[]) => {
-		const disposals = Array.isArray(disposal) ? disposal : [disposal];
-		const newDisposed = new Set(disposedSignalIds.value);
-		for (const d of disposals) {
-			if (d.signalId) {
-				newDisposed.add(d.signalId);
-			}
-		}
-		disposedSignalIds.value = newDisposed;
-	};
-
-	const hasUpdates = computed(() => updates.value.length > 0);
-
-	const signalCounts = computed(() => {
-		const counts = new Map<string, number>();
-		updates.value.forEach(update => {
-			if (update.type === "divider") return;
-			const signalName = update.signalName || "Unknown";
-			counts.set(signalName, (counts.get(signalName) || 0) + 1);
-		});
-		return counts;
-	});
-
-	const updateTree = computed(() => {
-		const buildTree = (
-			updates: (SignalUpdate | Divider)[]
-		): UpdateTreeNodeSingle[] => {
-			const tree: UpdateTreeNodeSingle[] = [];
-			const stack: UpdateTreeNodeSingle[] = [];
-
-			const recentUpdates = updates.slice(-100).reverse();
-
-			for (let i = 0; i < recentUpdates.length; i++) {
-				const item = recentUpdates[i];
-
-				if (item.type === "divider") {
-					continue;
-				}
-
-				const update = item as SignalUpdate;
-				const depth = update.depth || 0;
-
-				const nodeId = `${update.signalName}-${update.receivedAt}-${i}`;
-
-				const node: UpdateTreeNodeSingle = {
-					type: "single",
-					id: nodeId,
-					update,
-					children: [],
-					depth,
-					hasChildren: false,
-				};
-
-				while (stack.length > 0 && stack[stack.length - 1].depth >= depth) {
-					stack.pop();
-				}
-
-				if (stack.length === 0) {
-					tree.push(node);
-				} else {
-					const parent = stack[stack.length - 1];
-					parent.children.push(node);
-					parent.hasChildren = true;
-				}
-
-				stack.push(node);
-			}
-
-			return tree;
-		};
-
-		return buildTree(updates.value);
-	});
-
-	const clearUpdates = () => {
-		updates.value = [];
-		disposedSignalIds.value = new Set();
-	};
-
-	// Listen to adapter events
-	adapter.on("signalUpdate", (signalUpdates: SignalUpdate[]) => {
-		if (isPaused.value) return;
-
-		const updatesArray: Array<SignalUpdate | Divider> = [
-			...signalUpdates,
-		].reverse();
-		updatesArray.push({ type: "divider" });
-
-		addUpdate(updatesArray);
-	});
-
-	// Listen to disposal events
-	adapter.on("signalDisposed", (disposals: SignalDisposed[]) => {
-		if (isPaused.value) return;
-		addDisposal(disposals);
-	});
-
-	const collapsedUpdateTree = computed(() => {
-		const updateTreeValue = updateTree.value;
-		if (settingsStore.settings.grouped) {
-			return collapseTree(updateTreeValue);
-		}
-		return updateTreeValue;
-	});
-
-	return {
-		updates,
-		updateTree,
-		collapsedUpdateTree,
-		totalUpdates: computed(() => Object.keys(updateTree.value).length),
-		signalCounts,
-		disposedSignalIds,
-		addUpdate,
-		clearUpdates,
-		hasUpdates,
-		isPaused,
-	};
-}
-
-export function createSettingsStore(adapter: DevToolsAdapter) {
-	const settings = signal<Settings>({
-		enabled: true,
-		grouped: true,
-		consoleLogging: true,
-		maxUpdatesPerSecond: 60,
-		filterPatterns: [],
-	});
-
-	const showDisposedSignals = signal<boolean>(false);
-
-	const applySettings = (newSettings: Settings) => {
-		settings.value = newSettings;
-		adapter.sendConfig(newSettings);
-	};
-
-	const toggleShowDisposedSignals = () => {
-		showDisposedSignals.value = !showDisposedSignals.value;
-	};
-
-	// Listen to adapter events
-	adapter.on("configReceived", (config: { settings?: Settings }) => {
-		if (config.settings) {
-			settings.value = config.settings;
-		}
-	});
-
-	return {
-		get settings() {
-			return settings.value;
-		},
-		get showDisposedSignals() {
-			return showDisposedSignals.value;
-		},
-		set settings(newSettings: Settings) {
-			settings.value = newSettings;
-		},
-		applySettings,
-		toggleShowDisposedSignals,
-	};
-}
-
 export function initDevTools(adapter: DevToolsAdapter): DevToolsContext {
-	const settingsStore = createSettingsStore(adapter);
-	const updatesStore = createUpdatesStore(adapter, settingsStore);
-	const connectionStore = createConnectionStore(adapter);
+	const settingsStore = new SettingsModel(adapter);
+	const updatesStore = new UpdatesModel(adapter, settingsStore);
+	const connectionStore = new ConnectionModel(adapter);
+	const themeStore = new ThemeModel();
 
 	currentContext = {
 		adapter,
 		connectionStore,
 		updatesStore,
 		settingsStore,
+		themeStore,
 	};
 
 	return currentContext;
@@ -342,6 +52,10 @@ export function initDevTools(adapter: DevToolsAdapter): DevToolsContext {
 
 export function destroyDevTools(): void {
 	if (currentContext) {
+		currentContext.connectionStore[Symbol.dispose]();
+		currentContext.updatesStore[Symbol.dispose]();
+		currentContext.settingsStore[Symbol.dispose]();
+		currentContext.themeStore[Symbol.dispose]();
 		currentContext.adapter.disconnect();
 		currentContext = null;
 	}

package/src/index.ts

@@ -11,9 +11,9 @@ export {
 	initDevTools,
 	destroyDevTools,
 	getContext,
-	createConnectionStore,
-	createUpdatesStore,
-	createSettingsStore,
+	ConnectionModel,
+	UpdatesModel,
+	SettingsModel,
 	type DevToolsContext,
 	type SignalUpdate,
 	type UpdateTreeNode,

package/src/models/ConnectionModel.ts

@@ -0,0 +1,38 @@
+import { signal, createModel } from "@preact/signals";
+import type {
+	DevToolsAdapter,
+	ConnectionStatus,
+	ConnectionStatusType,
+} from "@preact/signals-devtools-adapter";
+
+export const ConnectionModel = createModel((adapter: DevToolsAdapter) => {
+	const status = signal<ConnectionStatusType>("connecting");
+	const message = signal<string>("Connecting...");
+	const isConnected = signal(false);
+
+	// Listen to adapter events
+	adapter.on(
+		"connectionStatusChanged",
+		(connectionStatus: ConnectionStatus) => {
+			status.value = connectionStatus.status;
+			message.value = connectionStatus.message;
+		}
+	);
+
+	adapter.on("signalsAvailable", (available: boolean) => {
+		isConnected.value = available;
+	});
+
+	const refreshConnection = () => {
+		status.value = "connecting";
+		message.value = "Connecting...";
+		adapter.requestState();
+	};
+
+	return {
+		status,
+		message,
+		isConnected,
+		refreshConnection,
+	};
+});

package/src/models/SettingsModel.ts

@@ -0,0 +1,40 @@
+import { signal, createModel } from "@preact/signals";
+import type {
+	DevToolsAdapter,
+	Settings,
+} from "@preact/signals-devtools-adapter";
+
+export const SettingsModel = createModel((adapter: DevToolsAdapter) => {
+	const settings = signal<Settings>({
+		enabled: true,
+		grouped: true,
+		consoleLogging: true,
+		maxUpdatesPerSecond: 60,
+		filterPatterns: [],
+	});
+
+	const showDisposedSignals = signal<boolean>(false);
+
+	const applySettings = (newSettings: Settings) => {
+		settings.value = newSettings;
+		adapter.sendConfig(newSettings);
+	};
+
+	const toggleShowDisposedSignals = () => {
+		showDisposedSignals.value = !showDisposedSignals.value;
+	};
+
+	// Listen to adapter events
+	adapter.on("configReceived", (config: { settings?: Settings }) => {
+		if (config.settings) {
+			settings.value = config.settings;
+		}
+	});
+
+	return {
+		settings,
+		showDisposedSignals,
+		applySettings,
+		toggleShowDisposedSignals,
+	};
+});

package/src/models/ThemeModel.ts

@@ -0,0 +1,70 @@
+import { signal, computed, effect, createModel } from "@preact/signals";
+
+export type ThemeMode = "auto" | "light" | "dark";
+
+const THEME_STORAGE_KEY = "signals-devtools-theme";
+
+export const ThemeModel = createModel(() => {
+	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);
+
+	effect(() => {
+		if (!mediaQuery) return;
+
+		const handler = (e: MediaQueryListEvent) => {
+			systemIsDark.value = e.matches;
+		};
+
+		mediaQuery.addEventListener("change", handler);
+		return () => mediaQuery.removeEventListener("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 {
+		theme,
+		resolvedTheme,
+		toggleTheme,
+	};
+});