🔤 adds debugging

docs/components/examples/signals/debugging-console.js

@@ -0,0 +1,20 @@
+import { S } from "deka-dom-el/signals";
+
+// Debugging a derived signal
+const name = S('Alice');
+const greeting = S(() => {
+  console.log('Computing greeting...');
+  return 'Hello, ' + name.get();
+});
+
+// Monitor the derived signal
+S.on(greeting, value => console.log('Greeting changed to:', value));
+
+// Later update the dependency
+name.set('Bob'); // Should trigger computation and listener
+
+// Console output:
+// Computing greeting...
+// Greeting changed to: Hello, Alice
+// Computing greeting...
+// Greeting changed to: Hello, Bob

docs/components/examples/signals/debugging-dom.js

@@ -0,0 +1,35 @@
+import { el, assign } from "deka-dom-el";
+import { S } from "deka-dom-el/signals";
+
+// Create a component with reactive elements
+function ReactiveCounter() {
+  const count = S(0);
+  
+  // Elements created with el() have data-dde attribute
+  const counter = el('div', { 
+    id: 'counter',
+    // This element will have __dde_reactive property
+    textContent: count 
+  });
+  
+  const incrementBtn = el('button', {
+    textContent: 'Increment',
+    onclick: () => count.set(count.get() + 1)
+  });
+  
+  // Dynamic section with __dde_signal property
+  const counterInfo = S.el(count, value => 
+    el('p', `Current count is ${value}`)
+  );
+  
+  return el('div').append(
+    counter,
+    incrementBtn,
+    counterInfo
+  );
+}
+
+// In DevTools console:
+// document.querySelectorAll('[data-dde]'); // Find all elements created with deka-dom-el
+// const counter = document.querySelector('#counter');
+// console.log(counter.__dde_reactive); // See reactive bindings