@preact/signals-devtools-ui 0.1.0

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@preact/signals-devtools-ui",
+  "version": "0.1.0",
+  "license": "MIT",
+  "description": "DevTools UI components for @preact/signals",
+  "keywords": [
+    "preact",
+    "signals",
+    "devtools",
+    "ui"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/preactjs/signals",
+    "directory": "packages/devtools-ui"
+  },
+  "bugs": "https://github.com/preactjs/signals/issues",
+  "homepage": "https://preactjs.com",
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/preact"
+  },
+  "amdName": "preactSignalsDevtoolsUI",
+  "main": "dist/devtools-ui.js",
+  "module": "dist/devtools-ui.module.js",
+  "unpkg": "dist/devtools-ui.min.js",
+  "types": "dist/devtools-ui.d.ts",
+  "source": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/devtools-ui.d.ts",
+      "browser": "./dist/devtools-ui.module.js",
+      "import": "./dist/devtools-ui.mjs",
+      "require": "./dist/devtools-ui.js"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "mangle": "../../mangle.json",
+  "files": [
+    "src",
+    "dist",
+    "CHANGELOG.md",
+    "LICENSE",
+    "README.md"
+  ],
+  "dependencies": {
+    "@preact/signals-devtools-adapter": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.19.103",
+    "@vitest/browser": "^3.2.4",
+    "playwright": "^1.53.1",
+    "preact": "^10.26.9",
+    "typescript": "~5.8.3",
+    "vite": "^6.3.5",
+    "vitest": "^3.2.4",
+    "@preact/signals": "2.6.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": false
+  },
+  "scripts": {
+    "test": "vitest run"
+  }
+}

package/src/DevToolsPanel.tsx

@@ -0,0 +1,107 @@
+import { render } from "preact";
+import { useSignal } from "@preact/signals";
+import type { DevToolsAdapter } from "@preact/signals-devtools-adapter";
+import { EmptyState } from "./components/EmptyState";
+import { Header } from "./components/Header";
+import { SettingsPanel } from "./components/SettingsPanel";
+import { GraphVisualization } from "./components/Graph";
+import { UpdatesContainer } from "./components/UpdatesContainer";
+import { initDevTools, destroyDevTools, getContext } from "./context";
+
+export interface DevToolsPanelProps {
+	/** Hide the header (useful for embedded contexts) */
+	hideHeader?: boolean;
+	/** Initial tab to show */
+	initialTab?: "updates" | "graph";
+}
+
+export function DevToolsPanel({
+	hideHeader = false,
+	initialTab = "updates",
+}: DevToolsPanelProps = {}) {
+	const { connectionStore } = getContext();
+	const activeTab = useSignal<"updates" | "graph">(initialTab);
+
+	return (
+		<div id="app" className="signals-devtools">
+			{!hideHeader && <Header />}
+
+			<SettingsPanel />
+
+			<main className="main-content">
+				<div className="tabs">
+					<button
+						className={`tab ${activeTab.value === "updates" ? "active" : ""}`}
+						onClick={() => (activeTab.value = "updates")}
+					>
+						Updates
+					</button>
+					<button
+						className={`tab ${activeTab.value === "graph" ? "active" : ""}`}
+						onClick={() => (activeTab.value = "graph")}
+					>
+						Dependency Graph
+					</button>
+				</div>
+				<div className="tab-content">
+					{!connectionStore.isConnected ? (
+						<EmptyState onRefresh={connectionStore.refreshConnection} />
+					) : (
+						<>
+							{activeTab.value === "updates" && <UpdatesContainer />}
+							{activeTab.value === "graph" && <GraphVisualization />}
+						</>
+					)}
+				</div>
+			</main>
+		</div>
+	);
+}
+
+export interface MountOptions extends DevToolsPanelProps {
+	/** The adapter to use for communication */
+	adapter: DevToolsAdapter;
+	/** The container element to render into */
+	container: HTMLElement;
+}
+
+/**
+ * Mount the DevTools UI into a container element.
+ *
+ * @example
+ * ```tsx
+ * import { mount } from "@preact/signals-devtools-ui";
+ * import { createDirectAdapter } from "@preact/signals-devtools-adapter";
+ *
+ * const adapter = createDirectAdapter();
+ *
+ * const unmount = await mount({
+ *   adapter,
+ *   container: document.getElementById("devtools")!,
+ * });
+ *
+ * // Later, to cleanup:
+ * unmount();
+ * ```
+ */
+export async function mount(options: MountOptions): Promise<() => void> {
+	const { adapter, container, ...panelProps } = options;
+
+	// Initialize context with adapter
+	initDevTools(adapter);
+
+	// Connect the adapter
+	await adapter.connect();
+
+	// Clear existing content
+	container.innerHTML = "";
+
+	// Render the panel
+	render(<DevToolsPanel {...panelProps} />, container);
+
+	// Return cleanup function
+	return () => {
+		render(null, container);
+		destroyDevTools();
+	};
+}

package/src/components/Button.tsx

@@ -0,0 +1,31 @@
+import type { ComponentChildren } from "preact";
+
+interface ButtonProps {
+	onClick: () => void;
+	className?: string;
+	disabled?: boolean;
+	children: ComponentChildren;
+	variant?: "primary" | "secondary";
+	active?: boolean;
+}
+
+export function Button({
+	onClick,
+	className = "",
+	disabled = false,
+	children,
+	variant = "secondary",
+	active = false,
+}: ButtonProps) {
+	const baseClass = "btn";
+	const variantClass = variant === "primary" ? "btn-primary" : "btn-secondary";
+	const activeClass = active ? "active" : "";
+	const combinedClassName =
+		`${baseClass} ${variantClass} ${activeClass} ${className}`.trim();
+
+	return (
+		<button onClick={onClick} className={combinedClassName} disabled={disabled}>
+			{children}
+		</button>
+	);
+}

package/src/components/EmptyState.tsx

@@ -0,0 +1,29 @@
+import { Button } from "./Button";
+
+interface EmptyStateProps {
+	onRefresh: () => void;
+	title?: string;
+	description?: string;
+	buttonText?: string;
+}
+
+export function EmptyState({
+	onRefresh,
+	title = "No Signals Detected",
+	description = "Make sure your application is using @preact/signals-debug package.",
+	buttonText = "Refresh Detection",
+}: EmptyStateProps) {
+	return (
+		<div className="empty-state">
+			<div className="empty-state-content">
+				<h2>{title}</h2>
+				<p>{description}</p>
+				<div className="empty-state-actions">
+					<Button onClick={onRefresh} variant="primary">
+						{buttonText}
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}