@praxisjs/devtools 0.1.1 → 0.2.0

package/src/plugins/signals/signals-tab.tsx

@@ -1,7 +1,9 @@
 import { EmptyState } from "@shared/empty-state";
 import { SearchInput } from "@shared/search-input";
 
-import { signal, onMount, onUnmount } from "@praxisjs/core";
+import { StatefulComponent } from "@praxisjs/core";
+import { Component, State } from "@praxisjs/decorators";
+
 
 import { SignalDetail } from "./components/signal-detail";
 import { SignalRow } from "./components/signal-row";
@@ -9,91 +11,102 @@ import { SignalRow } from "./components/signal-row";
 import type { Registry } from "@core/registry";
 import type { SignalEntry } from "@core/types";
 
-export function SignalsTab({ registry }: { registry: Registry }) {
-  const signals = signal<SignalEntry[]>(registry.getSignals());
-  const search = signal("");
-  const selectedId = signal<string | null>(null);
+@Component()
+export class SignalsTab extends StatefulComponent {
+  @State() signals: SignalEntry[] = [];
+  @State() search = "";
+  @State() selectedId: string | null = null;
+
+  private _handlers: Array<() => void> = [];
+
+  private get registry() {
+    return this.props.registry as Registry;
+  }
+
+  onMount() {
+    this.signals = this.registry.getSignals();
 
-  let handlers: Array<() => void> = [];
-  onMount(() => {
-    handlers = [
-      registry.bus.on("signal:registered", () => {
-        signals.set(registry.getSignals());
+    this._handlers = [
+      this.registry.bus.on("signal:registered", () => {
+        this.signals = this.registry.getSignals();
       }),
-      registry.bus.on("signal:changed", () => {
-        signals.set(registry.getSignals());
+      this.registry.bus.on("signal:changed", () => {
+        this.signals = this.registry.getSignals();
       }),
     ];
-  });
-
-  onUnmount(() => {
-    handlers.forEach((off) => {
-      off();
-    });
-  });
-
-  return (
-    <div class="flex h-full overflow-hidden">
-      <div class="flex-1 flex flex-col overflow-hidden min-w-0">
-        <div class="px-3 py-2 border-b border-border bg-bg shrink-0">
-          <SearchInput
-            placeholder="Search signals…"
-            onInput={(v) => {
-              search.set(v);
-            }}
-          />
-        </div>
+  }
 
-        <div class="grid grid-cols-[1.2fr_0.8fr_1fr_auto] items-center px-3 h-7 text-[9px] text-subtle font-bold tracking-[0.12em] uppercase border-b border-border bg-section gap-2 shrink-0">
-          <span>Signal</span>
-          <span>Component</span>
-          <span>Value</span>
-          <span>Age</span>
-        </div>
+  onUnmount() {
+    this._handlers.forEach((off) => { off(); });
+  }
 
-        <div class="flex-1 overflow-y-auto">
-          {() => {
-            const q = search().toLowerCase();
-            const filtered =
-              q === ""
-                ? signals()
-                : signals().filter(
-                    (s) =>
-                      s.label.toLowerCase().includes(q) ||
-                      s.componentName.toLowerCase().includes(q),
-                  );
-
-            if (filtered.length === 0) {
-              return (
-                <EmptyState
-                  message={
-                    signals().length === 0
-                      ? "No signals tracked. Add @Debug() on top of @State() properties."
-                      : "No signals match your search."
-                  }
+  render() {
+    return (
+      <div class="flex h-full overflow-hidden">
+        <div class="flex-1 flex flex-col overflow-hidden min-w-0">
+          <div class="px-3 py-2 border-b border-border bg-bg shrink-0">
+            <SearchInput
+              placeholder="Search signals…"
+              onInput={(v) => {
+                this.search = v;
+              }}
+            />
+          </div>
+
+          <div class="grid grid-cols-[1.2fr_0.8fr_1fr_auto] items-center px-3 h-7 text-[9px] text-subtle font-bold tracking-[0.12em] uppercase border-b border-border bg-section gap-2 shrink-0">
+            <span>Signal</span>
+            <span>Component</span>
+            <span>Value</span>
+            <span>Age</span>
+          </div>
+
+          <div class="flex-1 overflow-y-auto">
+            {() => {
+              const q = this.search.toLowerCase();
+              const filtered =
+                q === ""
+                  ? this.signals
+                  : this.signals.filter(
+                      (s) =>
+                        s.label.toLowerCase().includes(q) ||
+                        s.componentName.toLowerCase().includes(q),
+                    );
+
+              if (filtered.length === 0) {
+                return (
+                  <EmptyState
+                    message={
+                      this.signals.length === 0
+                        ? "No signals tracked. Add @Debug() on top of @State() properties."
+                        : "No signals match your search."
+                    }
+                  />
+                );
+              }
+
+              return filtered.map((s) => (
+                <SignalRow
+                  key={s.id}
+                  entry={s}
+                  selected={this.selectedId === s.id}
+                  onClick={() => {
+                    this.selectedId =
+                      this.selectedId === s.id ? null : s.id;
+                  }}
                 />
-              );
-            }
-
-            return filtered.map((s) => (
-              <SignalRow
-                key={s.id}
-                entry={s}
-                selected={selectedId() === s.id}
-                onClick={() => {
-                  selectedId.update((id) => (id === s.id ? null : s.id));
-                }}
-              />
-            ));
-          }}
+              ));
+            }}
+          </div>
         </div>
-      </div>
 
-      {() => {
-        const id = selectedId();
-        const entry = id ? (signals().find((s) => s.id === id) ?? null) : null;
-        return entry ? <SignalDetail entry={entry} /> : null;
-      }}
-    </div>
-  );
+        {() => {
+          const id = this.selectedId;
+          const entry = id
+            ? (this.signals.find((s) => s.id === id) ?? null)
+            : null;
+          return entry ? <SignalDetail entry={entry} /> : null;
+        }}
+      </div>
+    );
+  }
 }

package/src/plugins/timeline/components/badge.tsx

@@ -1,14 +1,20 @@
+import { StatelessComponent } from "@praxisjs/core";
+import { Component } from "@praxisjs/decorators";
+
 import { TYPE_META } from "../constants";
 
 import type { TimelineEventType } from "@core/types";
 
-export function Badge({ type }: { type: TimelineEventType }) {
-  const meta = TYPE_META[type];
-  return (
-    <span
-      class={`text-[9px] px-[6px] py-[2px] rounded font-bold uppercase tracking-[0.07em] shrink-0 ${meta.cls}`}
-    >
-      {meta.label}
-    </span>
-  );
+@Component()
+export class Badge extends StatelessComponent<{ type: TimelineEventType }> {
+  render() {
+    const meta = TYPE_META[this.props.type];
+    return (
+      <span
+        class={`text-[9px] px-[6px] py-[2px] rounded font-bold uppercase tracking-[0.07em] shrink-0 ${meta.cls}`}
+      >
+        {meta.label}
+      </span>
+    );
+  }
 }

package/src/plugins/timeline/components/timeline-row.tsx

@@ -1,55 +1,62 @@
 import { time } from "@utils/format-time";
 
-import { signal } from "@praxisjs/core";
+import { StatefulComponent } from "@praxisjs/core";
+import { Component, State } from "@praxisjs/decorators";
+
 
 import { Badge } from "./badge";
 
 import type { TimelineEntry } from "@core/types";
 
-export function TimelineRow({ entry }: { entry: TimelineEntry }) {
-  const open = signal(false);
-  const hasData = Object.keys(entry.data).length > 0;
-
-  return (
-    <div class="border-b border-border">
-      <div
-        onClick={() => {
-          if (hasData) open.update((v) => !v);
-        }}
-        class={`flex items-center gap-2 px-3 py-2 transition-colors duration-100 ${
-          hasData ? "cursor-pointer hover:bg-section" : "cursor-default"
-        }`}
-      >
-        <span class="text-subtle text-[10px] w-10 shrink-0 text-right tabular-nums font-mono">
-          {time(entry.timestamp)}
-        </span>
-        <Badge type={entry.type} />
-        <span class="flex-1 text-text font-mono text-[11px] truncate">
-          {entry.label}
-        </span>
-        {hasData && (
-          <span class="text-subtle text-[11px] shrink-0 w-4 text-center">
-            {() => (open() ? "▾" : "▸")}
+@Component()
+export class TimelineRow extends StatefulComponent {
+  @State() open = false;
+
+  render() {
+    const { entry } = this.props as { entry: TimelineEntry };
+    const hasData = Object.keys(entry.data).length > 0;
+
+    return (
+      <div class="border-b border-border">
+        <div
+          onClick={() => {
+            if (hasData) this.open = !this.open;
+          }}
+          class={`flex items-center gap-2 px-3 py-2 transition-colors duration-100 ${
+            hasData ? "cursor-pointer hover:bg-section" : "cursor-default"
+          }`}
+        >
+          <span class="text-subtle text-[10px] w-10 shrink-0 text-right tabular-nums font-mono">
+            {time(entry.timestamp)}
           </span>
-        )}
-      </div>
+          <Badge type={entry.type} />
+          <span class="flex-1 text-text font-mono text-[11px] truncate">
+            {entry.label}
+          </span>
+          {hasData && (
+            <span class="text-subtle text-[11px] shrink-0 w-4 text-center">
+              {() => (this.open ? "▾" : "▸")}
+            </span>
+          )}
+        </div>
 
-      {() =>
-        open() && hasData ? (
-          <div class="px-3 py-2 pl-[56px] font-mono text-[11px] bg-section border-t border-border">
-            {Object.entries(entry.data).map(([k, v]) => (
-              <div key={k} class="flex gap-3 py-[3px]">
-                <span class="text-accent shrink-0">{k}:</span>
-                <span class="text-muted truncate">
-                  {typeof v === "object"
-                    ? JSON.stringify(v)
-                    : String(v as unknown)}
-                </span>
-              </div>
-            ))}
-          </div>
-        ) : null
-      }
-    </div>
-  );
+        {() =>
+          this.open && hasData ? (
+            <div class="px-3 py-2 pl-[56px] font-mono text-[11px] bg-section border-t border-border">
+              {Object.entries(entry.data).map(([k, v]) => (
+                <div key={k} class="flex gap-3 py-[3px]">
+                  <span class="text-accent shrink-0">{k}:</span>
+                  <span class="text-muted truncate">
+                    {typeof v === "object"
+                      ? JSON.stringify(v)
+                      : String(v as unknown)}
+                  </span>
+                </div>
+              ))}
+            </div>
+          ) : null
+        }
+      </div>
+    );
+  }
 }

package/src/plugins/timeline/timeline-tab.tsx

@@ -1,6 +1,8 @@
 import { EmptyState } from "@shared/empty-state";
 
-import { signal, onMount, onUnmount } from "@praxisjs/core";
+import { StatefulComponent } from "@praxisjs/core";
+import { Component, State } from "@praxisjs/decorators";
+
 
 import { TimelineRow } from "./components/timeline-row";
 import { FILTERS, type Filter } from "./constants";
@@ -8,94 +10,105 @@ import { FILTERS, type Filter } from "./constants";
 import type { Registry } from "@core/registry";
 import type { TimelineEntry } from "@core/types";
 
-export function TimelineTab({ registry }: { registry: Registry }) {
-  const entries = signal<TimelineEntry[]>(registry.getTimeline());
-  const filter = signal<Filter>("all");
-  const paused = signal(false);
+@Component()
+export class TimelineTab extends StatefulComponent {
+  @State() entries: TimelineEntry[] = [];
+  @State() filter: Filter = "all";
+  @State() paused = false;
+
+  private _handlers: Array<() => void> = [];
+
+  private get registry() {
+    return this.props.registry as Registry;
+  }
 
-  let handlers: Array<() => void> = [];
-  onMount(() => {
-    handlers = [
-      registry.bus.on("timeline:push", () => {
-        if (!paused()) entries.set(registry.getTimeline());
+  onMount() {
+    this.entries = this.registry.getTimeline();
+
+    this._handlers = [
+      this.registry.bus.on("timeline:push", () => {
+        if (!this.paused) this.entries = this.registry.getTimeline();
       }),
     ];
-  });
-
-  onUnmount(() => {
-    handlers.forEach((off) => {
-      off();
-    });
-  });
-
-  return (
-    <div class="flex flex-col h-full overflow-hidden">
-      <div class="flex items-center gap-[3px] px-2 py-2 border-b border-border bg-bg shrink-0 flex-wrap">
-        {FILTERS.map((f) => (
+  }
+
+  onUnmount() {
+    this._handlers.forEach((off) => { off(); });
+  }
+
+  render() {
+    return (
+      <div class="flex flex-col h-full overflow-hidden">
+        <div class="flex items-center gap-[3px] px-2 py-2 border-b border-border bg-bg shrink-0 flex-wrap">
+          {FILTERS.map((f) => (
+            <button
+              key={f.value}
+              onClick={() => {
+                this.filter = f.value;
+              }}
+              class={() =>
+                this.filter === f.value
+                  ? "text-[11px] px-2 py-[3px] rounded cursor-pointer font-sans bg-soft text-accent font-semibold"
+                  : "text-[11px] px-2 py-[3px] rounded cursor-pointer font-sans text-muted hover:text-text hover:bg-section transition-colors duration-150"
+              }
+            >
+              {f.label}
+            </button>
+          ))}
+
+          <div class="flex-1" />
+
           <button
-            key={f.value}
             onClick={() => {
-              filter.set(f.value);
+              if (this.paused) this.entries = this.registry.getTimeline();
+              this.paused = !this.paused;
             }}
             class={() =>
-              filter() === f.value
-                ? "text-[11px] px-2 py-[3px] rounded cursor-pointer font-sans bg-soft text-accent font-semibold"
-                : "text-[11px] px-2 py-[3px] rounded cursor-pointer font-sans text-muted hover:text-text hover:bg-section transition-colors duration-150"
+              `text-[11px] px-2 py-[3px] rounded cursor-pointer font-sans border border-border transition-colors duration-150 ${
+                this.paused
+                  ? "text-warn border-warn"
+                  : "text-muted hover:text-text"
+              }`
             }
           >
-            {f.label}
+            {() => (this.paused ? "Resume" : "Pause")}
           </button>
-        ))}
 
-        <div class="flex-1" />
+          <button
+            onClick={() => {
+              this.entries = [];
+            }}
+            class="text-[11px] px-2 py-[3px] rounded cursor-pointer font-sans border border-border text-muted hover:text-text transition-colors duration-150"
+          >
+            Clear
+          </button>
+        </div>
 
-        <button
-          onClick={() => {
-            if (paused()) entries.set(registry.getTimeline());
-            paused.update((v) => !v);
-          }}
-          class={() =>
-            `text-[11px] px-2 py-[3px] rounded cursor-pointer font-sans border border-border transition-colors duration-150 ${
-              paused() ? "text-warn border-warn" : "text-muted hover:text-text"
-            }`
-          }
-        >
-          {() => (paused() ? "Resume" : "Pause")}
-        </button>
-
-        <button
-          onClick={() => {
-            entries.set([]);
-          }}
-          class="text-[11px] px-2 py-[3px] rounded cursor-pointer font-sans border border-border text-muted hover:text-text transition-colors duration-150"
-        >
-          Clear
-        </button>
-      </div>
+        <div class="flex-1 overflow-y-auto">
+          {() => {
+            const f = this.filter;
+            const filtered =
+              f === "all"
+                ? this.entries
+                : this.entries.filter(
+                    (e) =>
+                      e.type === f ||
+                      (f === "component:mount" &&
+                        e.type === "component:unmount"),
+                  );
+
+            if (filtered.length === 0) {
+              return (
+                <EmptyState message="No events yet. Interact with your app to see the timeline." />
+              );
+            }
 
-      <div class="flex-1 overflow-y-auto">
-        {() => {
-          const f = filter();
-          const filtered =
-            f === "all"
-              ? entries()
-              : entries().filter(
-                  (e) =>
-                    e.type === f ||
-                    (f === "component:mount" && e.type === "component:unmount"),
-                );
-
-          if (filtered.length === 0) {
-            return (
-              <EmptyState message="No events yet. Interact with your app to see the timeline." />
-            );
-          }
-
-          return [...filtered]
-            .reverse()
-            .map((e) => <TimelineRow key={e.id} entry={e} />);
-        }}
+            return [...filtered]
+              .reverse()
+              .map((e) => <TimelineRow key={e.id} entry={e} />);
+          }}
+        </div>
       </div>
-    </div>
-  );
+    );
+  }
 }

package/src/plugins/types.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent } from "@praxisjs/shared";
+import type { ComponentElement } from "@praxisjs/shared";
 
 import type { Registry } from "@core/registry";
 
@@ -6,5 +6,5 @@ export interface DevtoolsPlugin {
   id: string;
   label: string;
   setup?: (registry: Registry) => void;
-  component: FunctionComponent<{ registry: Registry }>;
+  component: ComponentElement;
 }

package/src/ui/dev-tools.tsx

@@ -6,7 +6,8 @@ import { SignalsPlugin } from "@plugins/signals";
 import { TimelinePlugin } from "@plugins/timeline";
 import unoReset from "@unocss/reset/tailwind-v4.css?inline";
 
-import { signal } from "@praxisjs/core";
+import { StatefulComponent } from "@praxisjs/core";
+import { Component, State } from "@praxisjs/decorators";
 import { render } from "@praxisjs/runtime";
 
 import { Panel } from "./panel";
@@ -23,42 +24,47 @@ export interface DevToolsOptions {
   plugins?: DevtoolsPlugin[];
 }
 
-function DevToolsApp({
-  plugins,
-  registry,
-}: {
-  plugins: DevtoolsPlugin[];
-  registry: Registry;
-}) {
-  const open = signal(false);
-
-  return (
-    <div>
-      {() =>
-        open() ? (
-          <Panel
-            plugins={plugins}
-            registry={registry}
-            onClose={() => {
-              open.set(false);
-            }}
-          />
-        ) : (
-          <button
-            onClick={() => {
-              open.set(true);
-            }}
-            class="fixed bottom-5 right-5 z-[2147483647] flex items-center gap-1 pl-[10px] pr-[14px] h-[32px] rounded-xl font-sans font-semibold text-[12px] text-accent bg-header border border-border cursor-pointer select-none shadow-[0_8px_32px_rgba(0,0,0,0.7)] transition-all duration-200 hover:border-accent hover:bg-soft hover:shadow-[0_8px_32px_rgba(56,189,248,0.1)]"
-          >
-            <img class="h-[13px] w-[13px]" src={logo} />
-            <span class="text-[10px] font-bold text-accent tracking-widest uppercase">
-              devtools
-            </span>
-          </button>
-        )
-      }
-    </div>
-  );
+@Component()
+class DevToolsApp extends StatefulComponent {
+  @State() open = false;
+
+  private get p() {
+    return this.props as unknown as {
+      plugins: DevtoolsPlugin[];
+      registry: Registry;
+    };
+  }
+
+  render() {
+    const { plugins, registry } = this.p;
+    return (
+      <div>
+        {() =>
+          this.open ? (
+            <Panel
+              plugins={plugins}
+              registry={registry}
+              onClose={() => {
+                this.open = false;
+              }}
+            />
+          ) : (
+            <button
+              onClick={() => {
+                this.open = true;
+              }}
+              class="fixed bottom-5 right-5 z-[2147483647] flex items-center gap-1 pl-[10px] pr-[14px] h-[32px] rounded-xl font-sans font-semibold text-[12px] text-accent bg-header border border-border cursor-pointer select-none shadow-[0_8px_32px_rgba(0,0,0,0.7)] transition-all duration-200 hover:border-accent hover:bg-soft hover:shadow-[0_8px_32px_rgba(56,189,248,0.1)]"
+            >
+              <img class="h-[13px] w-[13px]" src={logo} />
+              <span class="text-[10px] font-bold text-accent tracking-widest uppercase">
+                devtools
+              </span>
+            </button>
+          )
+        }
+      </div>
+    );
+  }
 }
 
 export const DevTools = {
@@ -90,7 +96,7 @@ export const DevTools = {
     shadow.appendChild(container);
 
     this.cleanup = render(
-      <DevToolsApp plugins={this.plugins} registry={Registry.instance} />,
+      () => <DevToolsApp plugins={this.plugins} registry={Registry.instance} />,
       container,
     );
   },
@@ -114,7 +120,7 @@ export const DevTools = {
 
     this.cleanup?.();
     this.cleanup = render(
-      <DevToolsApp plugins={this.plugins} registry={Registry.instance} />,
+      () => <DevToolsApp plugins={this.plugins} registry={Registry.instance} />,
       container,
     );
   },