what-devtools 0.12.3 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "what-devtools",
-  "version": "0.12.3",
+  "version": "0.13.0",
   "description": "Dev tools for What Framework — signal inspector, component tree, effect graph",
   "type": "module",
   "main": "src/index.js",
@@ -20,7 +20,7 @@
     "inspector"
   ],
   "peerDependencies": {
-    "what-core": "^0.12.3"
+    "what-core": "^0.13.0"
   },
   "author": "ZVN DEV (https://zvndev.com)",
   "license": "MIT",

package/src/DevPanel.jsx

@@ -19,7 +19,7 @@
  * Works WITHOUT MCP devtools connected.
  */
 
-import { signal, effect, onCleanup } from 'what-core';
+import { signal, onCleanup } from 'what-core';
 import { subscribe, getSnapshot, getErrors, installDevTools, _suppressDevtools } from './index.js';
 
 export function DevPanel() {
@@ -111,11 +111,10 @@ function DevPanelBody() {
 
   // --- Tab: Overview ---
   const renderOverview = () => {
-    const data = snapshot();
-    const health = getHealth();
-    const errs = recentErrors();
-    const recentErrs = errs.slice(-3).reverse();
-
+    // Everything below reads snapshot()/getHealth()/recentErrors() inside a
+    // thunk so it stays reactive. Four eager copies used to be taken here and
+    // then shadowed; had anything rendered them directly it would have frozen
+    // at first paint.
     return (
       <div style="padding:12px;">
         {/* Health indicator */}

package/src/index.js

@@ -141,9 +141,11 @@ export function safeSerialize(value, depth = 0, seen) {
 
   // DOM nodes
   if (typeof Node !== 'undefined' && value instanceof Node) {
+    // id/className live on Element, not Node; a text or comment node has neither.
+    const el = /** @type {Element} */ (/** @type {unknown} */ (value));
     const tag = value.nodeName?.toLowerCase() || 'node';
-    const id = value.id ? `#${value.id}` : '';
-    const cls = value.className ? `.${String(value.className).split(' ')[0]}` : '';
+    const id = el.id ? `#${el.id}` : '';
+    const cls = el.className ? `.${String(el.className).split(' ')[0]}` : '';
     return `[DOM: <${tag}${id}${cls}>]`;
   }