@praxisjs/devtools 0.2.34 → 0.3.0

package/dist/plugins/components/components/component-detail.js

@@ -0,0 +1,53 @@
+import { SidePanel as e } from "../../../ui/shared/side-panel.js";
+import { formatValue as t } from "../../../utils/format-value.js";
+import { DetailRow as n } from "./detail-row.js";
+import { DetailSection as r } from "./detail-section.js";
+import { StatusDot as i } from "./status-dot.js";
+import { _$element as a, _$html as o, _$insert as s, _$insertOnly as c, _$scope as l, _$template as u } from "@praxisjs/runtime";
+import { jsx as d, jsxs as f } from "@praxisjs/jsx/jsx-runtime";
+import { StatelessComponent as p } from "@praxisjs/core";
+import { Component as m } from "@praxisjs/decorators";
+//#region src/plugins/components/components/component-detail.tsx
+var h = /* @__PURE__ */ u(() => a("div", { class: "px-3 py-2 border-b border-border flex items-center gap-2 bg-bg shrink-0" }, [a("span", { class: "text-accent font-mono text-[11px] font-semibold truncate pl-1" }, ["<", ">"])])), g = /* @__PURE__ */ o("<div class=\"flex-1 overflow-y-auto\">"), _ = /* @__PURE__ */ o("<div class=\"px-3 py-2 flex justify-between items-center border-b border-border\"><span class=\"text-[11px] text-text font-mono\"></span><span class=\"text-[10px] text-subtle tabular-nums\">"), v = @m() class extends p {
+	render() {
+		let { entry: a, signals: o } = this.props;
+		return /* @__PURE__ */ f(e, { children: [((e) => {
+			let t = h(), n = t.firstChild, r = n.firstChild.nextSibling;
+			return s(t, /* @__PURE__ */ d(i, { status: a.status }), n, e), s(n, a.name, r, e), t;
+		})(l()), ((e) => {
+			let i = g();
+			return s(i, /* @__PURE__ */ f(r, {
+				label: "Stats",
+				children: [
+					/* @__PURE__ */ d(n, {
+						k: "renders",
+						v: String(a.renderCount)
+					}),
+					/* @__PURE__ */ d(n, {
+						k: "last render",
+						v: `${a.lastRenderDuration.toFixed(3)}ms`
+					}),
+					/* @__PURE__ */ d(n, {
+						k: "status",
+						v: a.status
+					})
+				]
+			}), null, e), s(i, o.length > 0 && /* @__PURE__ */ d(r, {
+				label: "State",
+				children: o.map((e) => /* @__PURE__ */ d(n, {
+					k: e.label,
+					v: t(e.value),
+					signal: !0
+				}, e.id))
+			}), null, e), s(i, a.lifecycle.length > 0 && /* @__PURE__ */ d(r, {
+				label: "Lifecycle",
+				children: [...a.lifecycle].reverse().slice(0, 20).map((e, t) => {
+					let n = l(), r = _(), i = r.firstChild, a = i.nextSibling;
+					return c(i, e.hook, n), c(a, new Date(e.timestamp).toLocaleTimeString(), n), r;
+				})
+			}), null, e), i;
+		})(l())] });
+	}
+};
+//#endregion
+export { v as ComponentDetail };

package/dist/plugins/components/components/component-row.js

@@ -0,0 +1,22 @@
+import { StatusDot as e } from "./status-dot.js";
+import { _$className as t, _$element as n, _$event as r, _$html as i, _$insert as a, _$onEvent as o, _$prop as s, _$reactive as c, _$scope as l, _$template as u } from "@praxisjs/runtime";
+import { jsx as d } from "@praxisjs/jsx/jsx-runtime";
+import { StatelessComponent as f } from "@praxisjs/core";
+import { Component as p } from "@praxisjs/decorators";
+//#region src/plugins/components/components/component-row.tsx
+var m = /* @__PURE__ */ r("onClick"), h = /* @__PURE__ */ u(() => n("div", null, [
+	0,
+	n("span", { class: "text-accent font-mono text-[11px] flex-1 truncate pl-1" }, ["<", ">"]),
+	n("span", { class: "text-muted text-[11px] tabular-nums" }, ["×"]),
+	n("span", null, ["ms"])
+])), g = /* @__PURE__ */ i("<span class=\"absolute left-0 top-0 bottom-0 w-[2px] bg-accent rounded-r\">"), _ = @p() class extends f {
+	render() {
+		let { entry: n, selected: r, onClick: i } = this.props;
+		{
+			let u = l(), f = h(), p = f.firstChild, _ = p.nextSibling, v = _.nextSibling, y = v.nextSibling, b = _.firstChild.nextSibling, x = y.firstChild;
+			return c(p, () => r() && g(), u), a(f, /* @__PURE__ */ d(e, { status: n.status }), _, u), a(_, n.name, b, u), a(v, n.renderCount, null, u), a(y, n.lastRenderDuration.toFixed(1), x, u), s(y, "class", `text-[10px] tabular-nums w-12 text-right ${n.lastRenderDuration > 16 ? "text-warn" : "text-subtle"}`, u), o(f, m, i, u), t(f, () => `relative flex items-center gap-2 px-3 py-2 cursor-pointer border-b border-border transition-colors duration-100 ${r() ? "bg-selected" : "hover:bg-section"}`, u), f;
+		}
+	}
+};
+//#endregion
+export { _ as ComponentRow };

package/dist/plugins/components/components/detail-row.js

@@ -0,0 +1,15 @@
+import { _$html as e, _$insertOnly as t, _$prop as n, _$scope as r } from "@praxisjs/runtime";
+import { StatelessComponent as i } from "@praxisjs/core";
+import { Component as a } from "@praxisjs/decorators";
+//#region src/plugins/components/components/detail-row.tsx
+var o = /* @__PURE__ */ e("<div class=\"flex justify-between items-center px-3 py-2 border-b border-border gap-3\"><span></span><span class=\"text-[11px] text-text font-mono truncate text-right\">"), s = @a() class extends i {
+	render() {
+		let { k: e, v: i, signal: a } = this.props;
+		{
+			let s = r(), c = o(), l = c.firstChild, u = l.nextSibling;
+			return t(l, e, s), n(l, "class", `text-[11px] font-mono shrink-0 ${a ? "text-accent" : "text-muted"}`, s), t(u, i, s), c;
+		}
+	}
+};
+//#endregion
+export { s as DetailRow };

package/dist/plugins/components/components/detail-section.js

@@ -0,0 +1,14 @@
+import { _$html as e, _$insert as t, _$insertOnly as n, _$scope as r } from "@praxisjs/runtime";
+import { StatelessComponent as i } from "@praxisjs/core";
+import { Component as a } from "@praxisjs/decorators";
+//#region src/plugins/components/components/detail-section.tsx
+var o = /* @__PURE__ */ e("<div class=\"border-b border-border\"><div class=\"px-3 py-[4px] text-[9px] text-subtle font-bold tracking-[0.12em] uppercase bg-section border-b border-border\">"), s = @a() class extends i {
+	render() {
+		{
+			let e = r(), i = o(), a = i.firstChild;
+			return n(a, this.props.label, e), t(i, this.props.children, null, e), i;
+		}
+	}
+};
+//#endregion
+export { s as DetailSection };

package/dist/plugins/components/components/status-dot.js

@@ -0,0 +1,15 @@
+import { jsx as e } from "@praxisjs/jsx/jsx-runtime";
+import { StatelessComponent as t } from "@praxisjs/core";
+import { Component as n } from "@praxisjs/decorators";
+//#region src/plugins/components/components/status-dot.tsx
+var r = @n() class extends t {
+	render() {
+		let { status: t } = this.props;
+		return /* @__PURE__ */ e("span", {
+			class: `inline-block w-[6px] h-[6px] rounded-full shrink-0 ${t === "mounted" ? "bg-success" : "bg-subtle"}`,
+			style: t === "mounted" ? { boxShadow: "0 0 6px rgba(14,165,122,0.7)" } : void 0
+		});
+	}
+};
+//#endregion
+export { r as StatusDot };

package/dist/plugins/components/components-tab.js

@@ -0,0 +1,54 @@
+import { EmptyState as e } from "../../ui/shared/empty-state.js";
+import { ComponentDetail as t } from "./components/component-detail.js";
+import { ComponentRow as n } from "./components/component-row.js";
+import { _$html as r, _$reactive as i, _$reactiveOnly as a, _$scope as o } from "@praxisjs/runtime";
+import { jsx as s } from "@praxisjs/jsx/jsx-runtime";
+import { StatefulComponent as c } from "@praxisjs/core";
+import { Component as l, Prop as u, State as d } from "@praxisjs/decorators";
+//#region src/plugins/components/components-tab.tsx
+var f = /* @__PURE__ */ r("<div class=\"flex h-full overflow-hidden\"><div class=\"flex-1 flex flex-col overflow-hidden min-w-0\"><div class=\"flex 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 class=flex-1>Component</span><span>Renders</span><span class=\"w-12 text-right\">Last</span></div><div class=\"flex-1 overflow-y-auto\"></div></div><!---->"), p = @l() class extends c {
+	@d() components = [];
+	@d() selectedId = null;
+	@u() registry;
+	_handlers = [];
+	onMount() {
+		this.components = this.registry.getComponents();
+		let e = () => {
+			this.components = this.registry.getComponents();
+		};
+		this._handlers = [
+			"component:registered",
+			"component:render",
+			"component:unmount",
+			"lifecycle",
+			"signal:registered",
+			"signal:changed"
+		].map((t) => this.registry.bus.on(t, e));
+	}
+	onUnmount() {
+		this._handlers.forEach((e) => {
+			e();
+		});
+	}
+	render() {
+		let { registry: r } = this;
+		{
+			let c = o(), l = f(), u = l.firstChild, d = u.nextSibling, p = u.firstChild.nextSibling;
+			return a(p, () => this.components.length === 0 ? /* @__PURE__ */ s(e, { message: "No components tracked. Add @Trace() to component classes." }) : this.components.map((e) => /* @__PURE__ */ s(n, {
+				entry: e,
+				selected: () => this.selectedId === e.id,
+				onClick: () => {
+					this.selectedId = this.selectedId === e.id ? null : e.id;
+				}
+			}, e.id)), c), i(d, () => {
+				let e = this.selectedId, n = e ? this.components.find((t) => t.id === e) ?? null : null, i = e ? r.getSignalsByComponent(e) : [];
+				return n ? /* @__PURE__ */ s(t, {
+					entry: n,
+					signals: i
+				}) : null;
+			}, c), l;
+		}
+	}
+};
+//#endregion
+export { p as ComponentsTab };

package/dist/plugins/components/index.js

@@ -0,0 +1,9 @@
+import { ComponentsTab as e } from "./components-tab.js";
+//#region src/plugins/components/index.ts
+var t = {
+	id: "components",
+	label: "Components",
+	component: e
+};
+//#endregion
+export { t as ComponentsPlugin };

package/dist/plugins/performance/index.js

@@ -0,0 +1,9 @@
+import { PerformanceTab as e } from "./performance-tab.js";
+//#region src/plugins/performance/index.ts
+var t = {
+	id: "performance",
+	label: "Performance",
+	component: e
+};
+//#endregion
+export { t as PerformancePlugin };

package/dist/plugins/performance/performance-tab.js

@@ -0,0 +1,62 @@
+import { EmptyState as e } from "../../ui/shared/empty-state.js";
+import { For as t, _$className as n, _$event as r, _$html as i, _$insertOnly as a, _$onEvent as o, _$prop as s, _$reactiveOnly as c, _$scope as l } from "@praxisjs/runtime";
+import { jsx as u } from "@praxisjs/jsx/jsx-runtime";
+import { StatefulComponent as d } from "@praxisjs/core";
+import { Component as f, Prop as p, State as m } from "@praxisjs/decorators";
+//#region src/plugins/performance/performance-tab.tsx
+var h = /* @__PURE__ */ r("onClick"), g = /* @__PURE__ */ i("<div class=\"flex flex-col h-full overflow-hidden\"><div class=\"flex items-center gap-[6px] px-2 py-2 border-b border-border bg-bg shrink-0\"><button></button><button>Reset</button><div class=flex-1></div><span class=\"text-[10px] text-subtle font-mono\"></span></div><div class=\"grid grid-cols-4 gap-px bg-border border-b border-border shrink-0\"></div><div class=\"grid grid-cols-[1.4fr_0.6fr_0.8fr_0.8fr] 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>Component</span><span>Runs</span><span>Time</span><span>Slowest</span></div><div class=\"flex-1 overflow-y-auto\">"), _ = /* @__PURE__ */ i("<div class=\"bg-bg px-3 py-2\"><div class=\"text-[9px] text-subtle font-bold tracking-[0.12em] uppercase\"></div><div class=\"text-[13px] text-text font-mono\">"), v = /* @__PURE__ */ i("<div class=\"grid grid-cols-[1.4fr_0.6fr_0.8fr_0.8fr] items-center px-3 h-7 text-[11px] border-b border-border gap-2 font-mono\"><span class=\"text-accent truncate\"></span><span class=text-text></span><span class=text-text></span><span class=text-muted>"), y = "text-[11px] px-2 py-[3px] rounded cursor-pointer font-sans border border-border text-muted hover:text-text transition-colors duration-150";
+function b(e) {
+	return `${e.toFixed(e < 10 ? 2 : 1)} ms`;
+}
+var x = @f() class extends d {
+	@m() snapshot = null;
+	@p() registry;
+	_off = null;
+	onMount() {
+		let { profiler: e } = this.registry;
+		this.refresh(), this._off = e.bus.on("profile:changed", () => {
+			this.refresh();
+		});
+	}
+	onUnmount() {
+		this._off?.();
+	}
+	refresh() {
+		let { profiler: e } = this.registry;
+		e.muted(() => {
+			this.snapshot = e.snapshot();
+		});
+	}
+	render() {
+		let { profiler: r } = this.registry;
+		{
+			let i = l(), d = g(), f = d.firstChild, p = f.nextSibling, m = p.nextSibling.nextSibling, x = f.firstChild, S = x.nextSibling, C = S.nextSibling.nextSibling;
+			return c(x, () => this.snapshot?.recording ? "Stop" : "Record", i), n(x, () => `${y} ${this.snapshot?.recording ? "text-warn border-warn" : ""}`, i), o(x, h, () => {
+				r.isRecording ? r.stop() : r.start();
+			}, i), s(S, "class", y, i), o(S, h, () => {
+				r.reset();
+			}, i), c(C, () => this.snapshot ? `${(this.snapshot.duration / 1e3).toFixed(1)} s` : "", i), c(p, () => {
+				let e = this.snapshot;
+				return (e ? [
+					["Writes", String(e.writes)],
+					["Effect runs", String(e.effectRuns)],
+					["Effect time", b(e.effectMs)],
+					["Computed runs", `${String(e.computeRuns)} · ${b(e.computeMs)}`]
+				] : []).map(([e, t]) => {
+					let n = l(), r = _(), i = r.firstChild, o = i.nextSibling;
+					return a(i, e, n), a(o, t, n), r;
+				});
+			}, i), a(m, /* @__PURE__ */ u(t, {
+				each: () => this.snapshot?.owners ?? [],
+				by: "name",
+				fallback: /* @__PURE__ */ u(e, { message: "Press Record, use your app, then Stop. Bindings and effects are grouped by the component that created them." }),
+				children: (e) => {
+					let t = l(), n = v(), r = n.firstChild, i = r.nextSibling, a = i.nextSibling, o = a.nextSibling;
+					return c(r, () => e().name, t), c(i, () => String(e().effectRuns), t), c(a, () => b(e().effectMs), t), c(o, () => b(e().maxMs), t), n;
+				}
+			}), i), d;
+		}
+	}
+};
+//#endregion
+export { x as PerformanceTab };

package/dist/plugins/signals/components/signal-detail.js

@@ -0,0 +1,29 @@
+import { SidePanel as e } from "../../../ui/shared/side-panel.js";
+import { formatValue as t } from "../../../utils/format-value.js";
+import { PanelSection as n } from "../../../ui/shared/panel-section.js";
+import { time as r } from "../../../utils/format-time.js";
+import { _$html as i, _$insert as a, _$insertOnly as o, _$scope as s } from "@praxisjs/runtime";
+import { jsx as c } from "@praxisjs/jsx/jsx-runtime";
+import { StatelessComponent as l } from "@praxisjs/core";
+import { Component as u } from "@praxisjs/decorators";
+//#region src/plugins/signals/components/signal-detail.tsx
+var d = /* @__PURE__ */ i("<div class=overflow-y-auto>"), f = /* @__PURE__ */ i("<div class=\"px-3 py-2 border-b border-border flex justify-between items-center gap-3\"><span class=\"font-mono text-[11px] text-text truncate\"></span><span class=\"text-[10px] text-subtle shrink-0 tabular-nums\">"), p = /* @__PURE__ */ i("<p class=\"px-3 py-6 text-[11px] text-subtle text-center\">No history yet."), m = @u() class extends l {
+	render() {
+		let { entry: i } = this.props;
+		return /* @__PURE__ */ c(e, {
+			width: "260px",
+			children: /* @__PURE__ */ c(n, {
+				label: "History",
+				children: ((e) => {
+					let n = d();
+					return a(n, [...i.history].reverse().map((e, n) => {
+						let i = s(), a = f(), c = a.firstChild, l = c.nextSibling;
+						return o(c, t(e.value), i), o(l, r(e.timestamp, "ago"), i), a;
+					}), null, e), a(n, i.history.length === 0 && p(), null, e), n;
+				})(s())
+			})
+		});
+	}
+};
+//#endregion
+export { m as SignalDetail };

package/dist/plugins/signals/components/signal-row.js

@@ -0,0 +1,17 @@
+import { formatValue as e } from "../../../utils/format-value.js";
+import { time as t } from "../../../utils/format-time.js";
+import { _$event as n, _$html as r, _$insert as i, _$insertOnly as a, _$onEvent as o, _$prop as s, _$scope as c } from "@praxisjs/runtime";
+import { StatelessComponent as l } from "@praxisjs/core";
+import { Component as u } from "@praxisjs/decorators";
+//#region src/plugins/signals/components/signal-row.tsx
+var d = /* @__PURE__ */ n("onClick"), f = /* @__PURE__ */ r("<div><span class=\"text-accent font-mono text-[11px] truncate pl-1\"></span><span class=\"text-muted text-[11px] truncate\"></span><span class=\"text-text font-mono text-[11px] truncate\"></span><span class=\"text-subtle text-[10px] text-right tabular-nums\">"), p = /* @__PURE__ */ r("<span class=\"absolute left-0 top-0 bottom-0 w-[2px] bg-accent rounded-r\">"), m = @u() class extends l {
+	render() {
+		let { entry: n, selected: r, onClick: l } = this.props;
+		{
+			let u = c(), m = f(), h = m.firstChild, g = h.nextSibling, _ = g.nextSibling, v = _.nextSibling;
+			return i(m, r && p(), h, u), a(h, n.label, u), a(g, n.componentName, u), a(_, e(n.value), u), a(v, t(n.changedAt, "ago"), u), o(m, d, l, u), s(m, "class", `relative grid grid-cols-[1.2fr_0.8fr_1fr_auto] items-center px-3 py-2 cursor-pointer border-b border-border transition-colors duration-100 ${r ? "bg-selected" : "hover:bg-section"}`, u), m;
+		}
+	}
+};
+//#endregion
+export { m as SignalRow };

package/dist/plugins/signals/index.js

@@ -0,0 +1,9 @@
+import { SignalsTab as e } from "./signals-tab.js";
+//#region src/plugins/signals/index.ts
+var t = {
+	id: "signals",
+	label: "Signals",
+	component: e
+};
+//#endregion
+export { t as SignalsPlugin };

package/dist/plugins/signals/signals-tab.js

@@ -0,0 +1,53 @@
+import { EmptyState as e } from "../../ui/shared/empty-state.js";
+import { SearchInput as t } from "../../ui/shared/search-input.js";
+import { SignalDetail as n } from "./components/signal-detail.js";
+import { SignalRow as r } from "./components/signal-row.js";
+import { _$html as i, _$insertOnly as a, _$reactive as o, _$reactiveOnly as s, _$scope as c } from "@praxisjs/runtime";
+import { jsx as l } from "@praxisjs/jsx/jsx-runtime";
+import { StatefulComponent as u } from "@praxisjs/core";
+import { Component as d, Prop as f, State as p } from "@praxisjs/decorators";
+//#region src/plugins/signals/signals-tab.tsx
+var m = /* @__PURE__ */ i("<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\"></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\"></div></div><!---->"), h = @d() class extends u {
+	@p() signals = [];
+	@p() search = "";
+	@p() selectedId = null;
+	@f() registry;
+	_handlers = [];
+	onMount() {
+		this.signals = this.registry.getSignals(), this._handlers = [this.registry.bus.on("signal:registered", () => {
+			this.signals = this.registry.getSignals();
+		}), this.registry.bus.on("signal:changed", () => {
+			this.signals = this.registry.getSignals();
+		})];
+	}
+	onUnmount() {
+		this._handlers.forEach((e) => {
+			e();
+		});
+	}
+	render() {
+		{
+			let i = c(), u = m(), d = u.firstChild, f = d.nextSibling, p = d.firstChild, h = p.nextSibling.nextSibling;
+			return a(p, /* @__PURE__ */ l(t, {
+				placeholder: "Search signals…",
+				onInput: (e) => {
+					this.search = e;
+				}
+			}), i), s(h, () => {
+				let t = this.search.toLowerCase(), n = t === "" ? this.signals : this.signals.filter((e) => e.label.toLowerCase().includes(t) || e.componentName.toLowerCase().includes(t));
+				return n.length === 0 ? /* @__PURE__ */ l(e, { message: this.signals.length === 0 ? "No signals tracked. Add @Debug() on top of @State() properties." : "No signals match your search." }) : n.map((e) => /* @__PURE__ */ l(r, {
+					entry: e,
+					selected: this.selectedId === e.id,
+					onClick: () => {
+						this.selectedId = this.selectedId === e.id ? null : e.id;
+					}
+				}, e.id));
+			}, i), o(f, () => {
+				let e = this.selectedId, t = e ? this.signals.find((t) => t.id === e) ?? null : null;
+				return t ? /* @__PURE__ */ l(n, { entry: t }) : null;
+			}, i), u;
+		}
+	}
+};
+//#endregion
+export { h as SignalsTab };

package/dist/plugins/timeline/components/badge.js

@@ -0,0 +1,16 @@
+import { TYPE_META as e } from "../constants.js";
+import { jsx as t } from "@praxisjs/jsx/jsx-runtime";
+import { StatelessComponent as n } from "@praxisjs/core";
+import { Component as r } from "@praxisjs/decorators";
+//#region src/plugins/timeline/components/badge.tsx
+var i = @r() class extends n {
+	render() {
+		let n = e[this.props.type];
+		return /* @__PURE__ */ t("span", {
+			class: `text-[9px] px-[6px] py-[2px] rounded font-bold uppercase tracking-[0.07em] shrink-0 ${n.cls}`,
+			children: n.label
+		});
+	}
+};
+//#endregion
+export { i as Badge };

package/dist/plugins/timeline/components/timeline-row.js

@@ -0,0 +1,33 @@
+import { time as e } from "../../../utils/format-time.js";
+import { Badge as t } from "./badge.js";
+import { _$event as n, _$html as r, _$insert as i, _$insertOnly as a, _$onEvent as o, _$prop as s, _$reactive as c, _$reactiveOnly as l, _$scope as u } from "@praxisjs/runtime";
+import { jsx as d } from "@praxisjs/jsx/jsx-runtime";
+import { StatefulComponent as f } from "@praxisjs/core";
+import { Component as p, Prop as m, State as h } from "@praxisjs/decorators";
+//#region src/plugins/timeline/components/timeline-row.tsx
+var g = /* @__PURE__ */ n("onClick"), _ = /* @__PURE__ */ r("<div class=\"border-b border-border\"><div><span class=\"text-subtle text-[10px] w-10 shrink-0 text-right tabular-nums font-mono\"></span><span class=\"flex-1 text-text font-mono text-[11px] truncate\"></span></div><!---->"), v = /* @__PURE__ */ r("<span class=\"text-subtle text-[11px] shrink-0 w-4 text-center\">"), y = /* @__PURE__ */ r("<div class=\"px-3 py-2 pl-[56px] font-mono text-[11px] bg-section border-t border-border\">"), b = /* @__PURE__ */ r("<div class=\"flex gap-3 py-[3px]\"><span class=\"text-accent shrink-0\">:</span><span class=\"text-muted truncate\">"), x = @p() class extends f {
+	@h() open = !1;
+	@m() entry;
+	render() {
+		let n = this.entry;
+		if (!n) return null;
+		let r = Object.keys(n.data).length > 0;
+		{
+			let f = u(), p = _(), m = p.firstChild, h = m.nextSibling, x = m.firstChild, S = x.nextSibling;
+			return a(x, e(n.timestamp), f), i(m, /* @__PURE__ */ d(t, { type: n.type }), S, f), a(S, n.label, f), i(m, r && ((e) => {
+				let t = v();
+				return l(t, () => this.open ? "▾" : "▸", e), t;
+			})(u()), null, f), o(m, g, () => {
+				r && (this.open = !this.open);
+			}, f), s(m, "class", `flex items-center gap-2 px-3 py-2 transition-colors duration-100 ${r ? "cursor-pointer hover:bg-section" : "cursor-default"}`, f), c(h, () => this.open && r ? ((e) => {
+				let t = y();
+				return a(t, Object.entries(n.data).map(([e, t]) => {
+					let n = u(), r = b(), o = r.firstChild, s = o.nextSibling, c = o.firstChild;
+					return i(o, e, c, n), a(s, typeof t == "object" ? JSON.stringify(t) : String(t), n), r;
+				}), e), t;
+			})(u()) : null, f), p;
+		}
+	}
+};
+//#endregion
+export { x as TimelineRow };

package/dist/plugins/timeline/constants.js

@@ -0,0 +1,54 @@
+//#region src/plugins/timeline/constants.ts
+var e = {
+	"signal:change": {
+		label: "signal",
+		cls: "text-[#9b90e6] bg-[rgba(155,144,230,0.14)]"
+	},
+	"component:render": {
+		label: "render",
+		cls: "text-[#4ade80] bg-[rgba(74,222,128,0.12)]"
+	},
+	"component:mount": {
+		label: "mount",
+		cls: "text-[#0ea57a] bg-[rgba(14,165,122,0.14)]"
+	},
+	"component:unmount": {
+		label: "unmount",
+		cls: "text-[#dc2626] bg-[rgba(220,38,38,0.14)]"
+	},
+	lifecycle: {
+		label: "lifecycle",
+		cls: "text-[#d97706] bg-[rgba(217,119,6,0.14)]"
+	},
+	"method:call": {
+		label: "method",
+		cls: "text-[#7c6dd6] bg-[rgba(124,109,214,0.14)]"
+	}
+}, t = [
+	{
+		value: "all",
+		label: "All"
+	},
+	{
+		value: "signal:change",
+		label: "Signals"
+	},
+	{
+		value: "component:render",
+		label: "Renders"
+	},
+	{
+		value: "component:mount",
+		label: "Mount"
+	},
+	{
+		value: "lifecycle",
+		label: "Lifecycle"
+	},
+	{
+		value: "method:call",
+		label: "Methods"
+	}
+];
+//#endregion
+export { t as FILTERS, e as TYPE_META };

package/dist/plugins/timeline/index.js

@@ -0,0 +1,9 @@
+import { TimelineTab as e } from "./timeline-tab.js";
+//#region src/plugins/timeline/index.ts
+var t = {
+	id: "timeline",
+	label: "Timeline",
+	component: e
+};
+//#endregion
+export { t as TimelinePlugin };

package/dist/plugins/timeline/timeline-tab.js

@@ -0,0 +1,46 @@
+import { EmptyState as e } from "../../ui/shared/empty-state.js";
+import { FILTERS as t } from "./constants.js";
+import { TimelineRow as n } from "./components/timeline-row.js";
+import { _$className as r, _$event as i, _$html as a, _$insert as o, _$onEvent as s, _$reactiveOnly as c, _$scope as l } from "@praxisjs/runtime";
+import { jsx as u } from "@praxisjs/jsx/jsx-runtime";
+import { StatefulComponent as d } from "@praxisjs/core";
+import { Component as f, Prop as p, State as m } from "@praxisjs/decorators";
+//#region src/plugins/timeline/timeline-tab.tsx
+var h = /* @__PURE__ */ i("onClick"), g = /* @__PURE__ */ a("<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\"><div class=flex-1></div><button></button><button 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\">"), _ = @f() class extends d {
+	@m() entries = [];
+	@m() filter = "all";
+	@m() paused = !1;
+	@p() registry;
+	_handlers = [];
+	onMount() {
+		this.entries = this.registry.getTimeline(), this._handlers = [this.registry.bus.on("timeline:push", () => {
+			this.paused || (this.entries = this.registry.getTimeline());
+		})];
+	}
+	onUnmount() {
+		this._handlers.forEach((e) => {
+			e();
+		});
+	}
+	render() {
+		{
+			let i = l(), a = g(), d = a.firstChild, f = d.nextSibling, p = d.firstChild, m = p.nextSibling, _ = m.nextSibling;
+			return o(d, t.map((e) => /* @__PURE__ */ u("button", {
+				onClick: () => {
+					this.filter = e.value;
+				},
+				class: () => this.filter === e.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",
+				children: e.label
+			}, e.value)), p, i), c(m, () => this.paused ? "Resume" : "Pause", i), s(m, h, () => {
+				this.paused && (this.entries = this.registry.getTimeline()), this.paused = !this.paused;
+			}, i), r(m, () => `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"}`, i), s(_, h, () => {
+				this.entries = [];
+			}, i), c(f, () => {
+				let t = this.filter, r = t === "all" ? this.entries : this.entries.filter((e) => e.type === t || t === "component:mount" && e.type === "component:unmount");
+				return r.length === 0 ? /* @__PURE__ */ u(e, { message: "No events yet. Interact with your app to see the timeline." }) : [...r].reverse().map((e) => /* @__PURE__ */ u(n, { entry: e }, e.id));
+			}, i), a;
+		}
+	}
+};
+//#endregion
+export { _ as TimelineTab };

package/dist/ui/dev-tools.js

@@ -0,0 +1,74 @@
+import e from "../assets/logo.svg.js";
+import t from "../assets/uno.generated.css.js";
+import { Registry as n } from "../core/registry.js";
+import { ComponentsPlugin as r } from "../plugins/components/index.js";
+import { PerformancePlugin as i } from "../plugins/performance/index.js";
+import { SignalsPlugin as a } from "../plugins/signals/index.js";
+import { TimelinePlugin as o } from "../plugins/timeline/index.js";
+import s from "../assets/tailwind-v4.css.js";
+import { Panel as c } from "./panel.js";
+import { _$event as l, _$html as u, _$onEvent as d, _$prop as f, _$reactiveOnly as p, _$scope as m, render as h } from "@praxisjs/runtime";
+import { jsx as g } from "@praxisjs/jsx/jsx-runtime";
+import { StatefulComponent as _ } from "@praxisjs/core";
+import { Component as v, Prop as y, State as b } from "@praxisjs/decorators";
+//#region src/ui/dev-tools.tsx
+var x = /* @__PURE__ */ l("onClick"), S = /* @__PURE__ */ u("<div>"), C = /* @__PURE__ */ u("<button 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]\"><span class=\"text-[10px] font-bold text-accent tracking-widest uppercase\">devtools"), w = [
+	a,
+	r,
+	o,
+	i
+], T = @v() class extends _ {
+	@b() open = !1;
+	@y() plugins = [];
+	@y() registry;
+	render() {
+		{
+			let t = m(), n = S();
+			return p(n, () => this.open ? /* @__PURE__ */ g(c, {
+				plugins: this.plugins,
+				registry: this.registry,
+				onClose: () => {
+					this.open = !1;
+				}
+			}) : ((t) => {
+				let n = C(), r = n.firstChild;
+				return f(r, "src", e, t), d(n, x, () => {
+					this.open = !0;
+				}, t), n;
+			})(m()), t), n;
+		}
+	}
+}, E = {
+	plugins: [...w],
+	host: null,
+	cleanup: null,
+	init(e = {}) {
+		if (this.host) return;
+		e.plugins && (this.plugins = e.plugins), this.plugins.forEach((e) => e.setup?.(n.instance)), globalThis.__PRAXIS_DEVTOOLS__ = n.instance;
+		let r = document.createElement("div");
+		r.id = "praxisjs-devtools", document.body.appendChild(r), this.host = r;
+		let i = r.attachShadow({ mode: "open" }), a = document.createElement("style");
+		a.textContent = s + t, i.appendChild(a);
+		let o = document.createElement("div");
+		i.appendChild(o), this.cleanup = h(() => /* @__PURE__ */ g(T, {
+			plugins: this.plugins,
+			registry: n.instance
+		}), o);
+	},
+	registerPlugin(e) {
+		this.plugins.find((t) => t.id === e.id) || (e.setup?.(n.instance), this.plugins.push(e), this.remount());
+	},
+	get registry() {
+		return n.instance;
+	},
+	remount() {
+		if (!this.host) return;
+		let e = this.host.shadowRoot.querySelector("div:last-child");
+		this.cleanup?.(), this.cleanup = h(() => /* @__PURE__ */ g(T, {
+			plugins: this.plugins,
+			registry: n.instance
+		}), e);
+	}
+};
+//#endregion
+export { E as DevTools };