@praxisjs/devtools 0.2.34 → 0.3.0

package/dist/index.js

@@ -1,1157 +1,10 @@
-import { StatefulComponent as e, StatelessComponent as t } from "@praxisjs/core";
-import { ClassBehavior as n, Component as r, Emit as i, Prop as a, State as o, createClassDecorator as s, createFieldDecorator as c, createGetterObserverDecorator as l, createMethodDecorator as u } from "@praxisjs/decorators";
-import { jsx as d, jsxs as f } from "@praxisjs/jsx/jsx-runtime";
-import { render as p } from "@praxisjs/runtime";
-import { computed as ee } from "@praxisjs/core/internal";
-//#region assets/logo.svg
-var m = "data:image/svg+xml,%3csvg%20width='1024'%20height='1024'%20viewBox='0%200%201024%201024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M605.411%20445.66L641.322%20498.293L641.342%20498.278L697.538%20578.57L742.673%20512.806L512.5%20178.878L281.327%20512.806L512.5%20848.182L603.519%20715.561L650.559%20782.134L512.701%20983L187%20510.478L512.701%2040L837%20510.478L698.206%20712.709L668.895%20671.104L604.033%20578.775L512%20712.504L373.199%20511.5L512.233%20309.092L584.13%20414.469L536.746%20480.456L513.69%20445.66L466.305%20511.5L512.166%20577.425L556.48%20513.91L605.411%20445.66Z'%20fill='url(%23paint0_linear_3024_20)'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_3024_20'%20x1='512'%20y1='40'%20x2='512'%20y2='983'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%239B76FF'%20stop-opacity='0.86'/%3e%3cstop%20offset='1'%20stop-color='%232D246B'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e", h = "*,:before,:after,::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 #0000;--un-ring-shadow:0 0 #0000;--un-shadow-inset: ;--un-shadow:0 0 #0000;--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:#93c5fd80;--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }:host{all:initial;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;display:block}*{box-sizing:border-box}input::placeholder{color:#6f6a8f}input:focus{outline:none;box-shadow:0 0 0 2px #9b90e64d}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#9b90e633;border-radius:2px}::-webkit-scrollbar-thumb:hover{background:#9b90e666}.container{width:100%}@media (width>=640px){.container{max-width:640px}}@media (width>=768px){.container{max-width:768px}}@media (width>=1024px){.container{max-width:1024px}}@media (width>=1280px){.container{max-width:1280px}}@media (width>=1536px){.container{max-width:1536px}}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.bottom-0{bottom:0}.bottom-5{bottom:1.25rem}.left-0{left:0}.right-0{right:0}.right-5{right:1.25rem}.top-0{top:0}.top-full{top:100%}.z-\\[2147483647\\]{z-index:2147483647}.z-10{z-index:10}.grid{display:grid}.grid-cols-\\[1\\.2fr_0\\.8fr_1fr_auto\\]{grid-template-columns:1.2fr .8fr 1fr auto}.m6{margin:1.5rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.mr-\\[2px\\]{margin-right:2px}.ms{margin-inline-start:1rem}.mt-1{margin-top:.25rem}.box-border{box-sizing:border-box}.inline-block{display:inline-block}.h-\\[13px\\]{height:13px}.h-\\[22px\\]{height:22px}.h-\\[2px\\]{height:2px}.h-\\[32px\\]{height:32px}.h-\\[6px\\]{height:6px}.h-1,.h1{height:.25rem}.h-10{height:2.5rem}.h-3,.h3{height:.75rem}.h-7{height:1.75rem}.h-full{height:100%}.h-screen{height:100vh}.h2{height:.5rem}.max-w-\\[200px\\]{max-width:200px}.min-w-0{min-width:0}.w-\\[13px\\]{width:13px}.w-\\[22px\\]{width:22px}.w-\\[2px\\]{width:2px}.w-\\[6px\\]{width:6px}.w-1{width:.25rem}.w-10{width:2.5rem}.w-12{width:3rem}.w-4{width:1rem}.w-full{width:100%}.w-px{width:1px}.flex{display:flex}.flex-1{flex:1}.shrink-0{flex-shrink:0}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.cursor-\\[ew-resize\\]{cursor:ew-resize}.cursor-\\[ns-resize\\]{cursor:ns-resize}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;user-select:none}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-\\[2px\\]{gap:2px}.gap-\\[3px\\]{gap:3px}.gap-\\[6px\\]{gap:6px}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.b,.border{border-width:1px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-border{--un-border-opacity:.25;border-color:rgba(155, 144, 230, var(--un-border-opacity))}.border-warn{--un-border-opacity:1;border-color:rgb(217 119 6/var(--un-border-opacity))}.hover\\:border-accent:hover{--un-border-opacity:1;border-color:rgb(155 144 230/var(--un-border-opacity))}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-r{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.bg-\\[rgba\\(124\\,109\\,214\\,0\\.14\\)\\]{--un-bg-opacity:.14;background-color:rgba(124, 109, 214, var(--un-bg-opacity)) }.bg-\\[rgba\\(14\\,165\\,122\\,0\\.14\\)\\]{--un-bg-opacity:.14;background-color:rgba(14, 165, 122, var(--un-bg-opacity)) }.bg-\\[rgba\\(155\\,144\\,230\\,0\\.14\\)\\]{--un-bg-opacity:.14;background-color:rgba(155, 144, 230, var(--un-bg-opacity)) }.bg-\\[rgba\\(217\\,119\\,6\\,0\\.14\\)\\]{--un-bg-opacity:.14;background-color:rgba(217, 119, 6, var(--un-bg-opacity)) }.bg-\\[rgba\\(220\\,38\\,38\\,0\\.14\\)\\]{--un-bg-opacity:.14;background-color:rgba(220, 38, 38, var(--un-bg-opacity)) }.bg-\\[rgba\\(74\\,222\\,128\\,0\\.12\\)\\]{--un-bg-opacity:.12;background-color:rgba(74, 222, 128, var(--un-bg-opacity)) }.bg-accent{--un-bg-opacity:1;background-color:rgb(155 144 230/var(--un-bg-opacity)) }.bg-bg{--un-bg-opacity:1;background-color:rgb(15 13 23/var(--un-bg-opacity)) }.bg-border{--un-bg-opacity:.25;background-color:rgba(155, 144, 230, var(--un-bg-opacity)) }.bg-header{--un-bg-opacity:1;background-color:rgb(22 19 38/var(--un-bg-opacity)) }.bg-input,.bg-section{--un-bg-opacity:1;background-color:rgb(27 24 48/var(--un-bg-opacity)) }.bg-selected{--un-bg-opacity:1;background-color:rgb(34 30 61/var(--un-bg-opacity)) }.bg-soft{--un-bg-opacity:.18;background-color:rgba(155, 144, 230, var(--un-bg-opacity)) }.bg-subtle{--un-bg-opacity:1;background-color:rgb(111 106 143/var(--un-bg-opacity)) }.bg-success{--un-bg-opacity:1;background-color:rgb(14 165 122/var(--un-bg-opacity)) }.bg-transparent{background-color:#0000}.hover\\:bg-accent:hover{--un-bg-opacity:1;background-color:rgb(155 144 230/var(--un-bg-opacity)) }.hover\\:bg-section:hover{--un-bg-opacity:1;background-color:rgb(27 24 48/var(--un-bg-opacity)) }.hover\\:bg-soft:hover{--un-bg-opacity:.18;background-color:rgba(155, 144, 230, var(--un-bg-opacity)) }.p-1{padding:.25rem}.px{padding-left:1rem;padding-right:1rem}.px-\\[6px\\]{padding-left:6px;padding-right:6px}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-\\[2px\\]{padding-top:2px;padding-bottom:2px}.py-\\[3px\\]{padding-top:3px;padding-bottom:3px}.py-\\[4px\\]{padding-top:4px;padding-bottom:4px}.py-\\[5px\\]{padding-top:5px;padding-bottom:5px}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pl-\\[10px\\]{padding-left:10px}.pl-\\[56px\\]{padding-left:56px}.pl-1{padding-left:.25rem}.pr-\\[14px\\]{padding-right:14px}.pr-3{padding-right:.75rem}.text-center{text-align:center}.text-right{text-align:right}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.text-\\[12px\\]{font-size:12px}.text-\\[20px\\]{font-size:20px}.text-\\[9px\\]{font-size:9px}.text-\\[\\#0ea57a\\]{--un-text-opacity:1;color:rgb(14 165 122/var(--un-text-opacity)) }.text-\\[\\#4ade80\\]{--un-text-opacity:1;color:rgb(74 222 128/var(--un-text-opacity)) }.text-\\[\\#7c6dd6\\]{--un-text-opacity:1;color:rgb(124 109 214/var(--un-text-opacity)) }.text-\\[\\#9b90e6\\],.text-accent{--un-text-opacity:1;color:rgb(155 144 230/var(--un-text-opacity)) }.text-\\[\\#d97706\\],.text-warn{--un-text-opacity:1;color:rgb(217 119 6/var(--un-text-opacity)) }.text-\\[\\#dc2626\\]{--un-text-opacity:1;color:rgb(220 38 38/var(--un-text-opacity)) }.text-muted{--un-text-opacity:1;color:rgb(199 195 230/var(--un-text-opacity)) }.text-subtle{--un-text-opacity:1;color:rgb(111 106 143/var(--un-text-opacity)) }.text-text,.hover\\:text-text:hover{--un-text-opacity:1;color:rgb(244 242 255/var(--un-text-opacity)) }.color-white{--un-text-opacity:1;color:rgb(255 255 255/var(--un-text-opacity)) }.hover\\:color-muted:hover{--un-text-opacity:1;color:rgb(199 195 230/var(--un-text-opacity)) }.font-bold{font-weight:700}.font-semibold{font-weight:600}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.tracking-\\[0\\.07em\\]{letter-spacing:.07em}.tracking-\\[0\\.12em\\]{letter-spacing:.12em}.tracking-widest{letter-spacing:.1em}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.uppercase{text-transform:uppercase}.tabular-nums{--un-numeric-spacing:tabular-nums;font-variant-numeric:var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)}.tab{tab-size:4}.shadow{--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color,#0000001a),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color,#0000001a);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}.shadow-\\[0_8px_32px_rgba\\(0\\,0\\,0\\,0\\.7\\)\\]{--un-shadow:0 8px 32px var(--un-shadow-color,#000000b3);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}.shadow-lg{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color,#0000001a),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color,#0000001a);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}.hover\\:shadow-\\[0_8px_32px_rgba\\(56\\,189\\,248\\,0\\.1\\)\\]:hover{--un-shadow:0 8px 32px var(--un-shadow-color,#38bdf81a);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}.outline-none{outline-offset:2px;outline:2px solid #0000}.filter{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-shadow{transition-property:box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-100{transition-duration:.1s}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}", g = class {
-	handlers = /* @__PURE__ */ new Map();
-	on(e, t) {
-		return this.handlers.has(e) || this.handlers.set(e, /* @__PURE__ */ new Set()), this.handlers.get(e).add(t), () => this.handlers.get(e)?.delete(t);
-	}
-	emit(e, t) {
-		let n = this.handlers.get(e);
-		if (!n) return;
-		let r = [];
-		for (let e of n) try {
-			e(t);
-		} catch (e) {
-			r.push(e);
-		}
-		if (r.length === 1) throw r[0];
-		if (r.length > 1) throw AggregateError(r, "Multiple event handler errors");
-	}
-}, _ = 200, v = 0;
-function y() {
-	return `v${(++v).toString()}_${Date.now().toString(36)}`;
-}
-var b = class e {
-	static _instance = null;
-	static get instance() {
-		return e._instance ??= new e(), e._instance;
-	}
-	bus = new g();
-	instanceIds = /* @__PURE__ */ new WeakMap();
-	signals = /* @__PURE__ */ new Map();
-	components = /* @__PURE__ */ new Map();
-	timeline = [];
-	getInstanceId(e) {
-		return this.instanceIds.has(e) || this.instanceIds.set(e, y()), this.instanceIds.get(e);
-	}
-	registerSignal(e, t, n, r) {
-		let i = this.getInstanceId(e), a = `${i}:${t}`, o = {
-			id: a,
-			label: t,
-			componentId: i,
-			componentName: r,
-			value: n,
-			history: [{
-				value: n,
-				timestamp: Date.now()
-			}],
-			changedAt: Date.now()
-		};
-		this.signals.set(a, o), this.bus.emit("signal:registered", o);
-	}
-	updateSignal(e, t, n, r) {
-		let i = `${this.getInstanceId(e)}:${t}`, a = this.signals.get(i);
-		if (!a) return;
-		let o = [...a.history, {
-			value: n,
-			timestamp: Date.now()
-		}].slice(-20), s = {
-			...a,
-			value: n,
-			history: o,
-			changedAt: Date.now()
-		};
-		this.signals.set(i, s), this.bus.emit("signal:changed", {
-			entry: s,
-			oldValue: r
-		}), this.pushTimeline({
-			type: "signal:change",
-			label: `${a.componentName}.${t}`,
-			data: {
-				old: r,
-				new: n,
-				signalId: i
-			}
-		});
-	}
-	registerComponent(e, t) {
-		let n = this.getInstanceId(e), r = {
-			id: n,
-			name: t,
-			renderCount: 0,
-			lastRenderDuration: 0,
-			mountedAt: Date.now(),
-			status: "mounted",
-			lifecycle: []
-		};
-		this.components.set(n, r), this.bus.emit("component:registered", r);
-	}
-	recordRender(e, t) {
-		let n = this.getInstanceId(e), r = this.components.get(n);
-		r && (r.renderCount++, r.lastRenderDuration = t, this.bus.emit("component:render", { ...r }), this.pushTimeline({
-			type: "component:render",
-			label: `<${r.name}>`,
-			data: {
-				componentId: n,
-				duration: +t.toFixed(3),
-				renderCount: r.renderCount
-			}
-		}));
-	}
-	recordLifecycle(e, t) {
-		let n = this.getInstanceId(e), r = this.components.get(n);
-		if (!r) return;
-		let i = {
-			hook: t,
-			timestamp: Date.now()
-		};
-		r.lifecycle.push(i), this.bus.emit("lifecycle", {
-			componentId: n,
-			name: r.name,
-			hook: t
-		});
-		let a = t === "onUnmount" ? "component:unmount" : t === "onBeforeMount" ? "component:mount" : "lifecycle";
-		if (this.pushTimeline({
-			type: a,
-			label: `<${r.name}>.${t}`,
-			data: {
-				componentId: n,
-				hook: t
-			}
-		}), t === "onUnmount") {
-			r.status = "unmounted", this.bus.emit("component:unmount", { ...r }), this.components.delete(n);
-			for (let [e, t] of this.signals) t.componentId === n && this.signals.delete(e);
-		}
-	}
-	recordMethodCall(e, t, n, r, i, a) {
-		let o = this.getInstanceId(e);
-		this.pushTimeline({
-			type: "method:call",
-			label: `${a}.${t}()`,
-			data: {
-				componentId: o,
-				args: n,
-				result: r,
-				duration: +i.toFixed(3)
-			}
-		});
-	}
-	getSignals() {
-		return [...this.signals.values()];
-	}
-	getComponents() {
-		return [...this.components.values()];
-	}
-	getTimeline() {
-		return [...this.timeline];
-	}
-	getSignalsByComponent(e) {
-		return this.getSignals().filter((t) => t.componentId === e);
-	}
-	pushTimeline(e) {
-		let t = {
-			id: y(),
-			timestamp: Date.now(),
-			...e
-		};
-		this.timeline.push(t), this.timeline.length > _ && this.timeline.shift(), this.bus.emit("timeline:push", t);
-	}
-}, x = @r() class extends t {
-	render() {
-		return /* @__PURE__ */ f("div", {
-			class: "flex flex-col items-center justify-center gap-2 py-12",
-			children: [/* @__PURE__ */ d("span", {
-				class: "text-subtle text-[20px] leading-none select-none font-mono",
-				children: "—"
-			}), /* @__PURE__ */ d("p", {
-				class: "text-subtle text-[11px] text-center leading-relaxed max-w-[200px]",
-				children: this.props.message
-			})]
-		});
-	}
-}, S = @r() class extends t {
-	render() {
-		let { children: e, width: t = "280px" } = this.props;
-		return /* @__PURE__ */ d("div", {
-			class: "shrink-0 border-l border-border flex flex-col overflow-hidden",
-			style: { width: t },
-			children: e
-		});
-	}
-};
-//#endregion
-//#region src/utils/format-value.ts
-function C(e) {
-	if (e === null) return "null";
-	if (e === void 0) return "undefined";
-	if (typeof e == "string") return `"${e}"`;
-	if (typeof e == "object") try {
-		return JSON.stringify(e);
-	} catch {
-		return "[object]";
-	}
-	return String(e);
-}
-//#endregion
-//#region src/plugins/components/components/detail-row.tsx
-var w = @r() class extends t {
-	render() {
-		let { k: e, v: t, signal: n } = this.props;
-		return /* @__PURE__ */ f("div", {
-			class: "flex justify-between items-center px-3 py-2 border-b border-border gap-3",
-			children: [/* @__PURE__ */ d("span", {
-				class: `text-[11px] font-mono shrink-0 ${n ? "text-accent" : "text-muted"}`,
-				children: e
-			}), /* @__PURE__ */ d("span", {
-				class: "text-[11px] text-text font-mono truncate text-right",
-				children: t
-			})]
-		});
-	}
-}, T = @r() class extends t {
-	render() {
-		return /* @__PURE__ */ f("div", {
-			class: "border-b border-border",
-			children: [/* @__PURE__ */ d("div", {
-				class: "px-3 py-[4px] text-[9px] text-subtle font-bold tracking-[0.12em] uppercase bg-section border-b border-border",
-				children: this.props.label
-			}), this.props.children]
-		});
-	}
-}, E = @r() class extends t {
-	render() {
-		let { status: e } = this.props;
-		return /* @__PURE__ */ d("span", {
-			class: `inline-block w-[6px] h-[6px] rounded-full shrink-0 ${e === "mounted" ? "bg-success" : "bg-subtle"}`,
-			style: e === "mounted" ? { boxShadow: "0 0 6px rgba(14,165,122,0.7)" } : void 0
-		});
-	}
-}, te = @r() class extends t {
-	render() {
-		let { entry: e, signals: t } = this.props;
-		return /* @__PURE__ */ f(S, { children: [/* @__PURE__ */ f("div", {
-			class: "px-3 py-2 border-b border-border flex items-center gap-2 bg-bg shrink-0",
-			children: [/* @__PURE__ */ d(E, { status: e.status }), /* @__PURE__ */ f("span", {
-				class: "text-accent font-mono text-[11px] font-semibold truncate pl-1",
-				children: [
-					"<",
-					e.name,
-					">"
-				]
-			})]
-		}), /* @__PURE__ */ f("div", {
-			class: "flex-1 overflow-y-auto",
-			children: [
-				/* @__PURE__ */ f(T, {
-					label: "Stats",
-					children: [
-						/* @__PURE__ */ d(w, {
-							k: "renders",
-							v: String(e.renderCount)
-						}),
-						/* @__PURE__ */ d(w, {
-							k: "last render",
-							v: `${e.lastRenderDuration.toFixed(3)}ms`
-						}),
-						/* @__PURE__ */ d(w, {
-							k: "status",
-							v: e.status
-						})
-					]
-				}),
-				t.length > 0 && /* @__PURE__ */ d(T, {
-					label: "State",
-					children: t.map((e) => /* @__PURE__ */ d(w, {
-						k: e.label,
-						v: C(e.value),
-						signal: !0
-					}, e.id))
-				}),
-				e.lifecycle.length > 0 && /* @__PURE__ */ d(T, {
-					label: "Lifecycle",
-					children: [...e.lifecycle].reverse().slice(0, 20).map((e, t) => /* @__PURE__ */ f("div", {
-						class: "px-3 py-2 flex justify-between items-center border-b border-border",
-						children: [/* @__PURE__ */ d("span", {
-							class: "text-[11px] text-text font-mono",
-							children: e.hook
-						}), /* @__PURE__ */ d("span", {
-							class: "text-[10px] text-subtle tabular-nums",
-							children: new Date(e.timestamp).toLocaleTimeString()
-						})]
-					}, String(t)))
-				})
-			]
-		})] });
-	}
-}, ne = @r() class extends t {
-	render() {
-		let { entry: e, selected: t, onClick: n } = this.props;
-		return /* @__PURE__ */ f("div", {
-			onClick: n,
-			class: () => `relative flex items-center gap-2 px-3 py-2 cursor-pointer border-b border-border transition-colors duration-100 ${t() ? "bg-selected" : "hover:bg-section"}`,
-			children: [
-				() => t() && /* @__PURE__ */ d("span", { class: "absolute left-0 top-0 bottom-0 w-[2px] bg-accent rounded-r" }),
-				/* @__PURE__ */ d(E, { status: e.status }),
-				/* @__PURE__ */ f("span", {
-					class: "text-accent font-mono text-[11px] flex-1 truncate pl-1",
-					children: [
-						"<",
-						e.name,
-						">"
-					]
-				}),
-				/* @__PURE__ */ f("span", {
-					class: "text-muted text-[11px] tabular-nums",
-					children: ["×", e.renderCount]
-				}),
-				/* @__PURE__ */ f("span", {
-					class: `text-[10px] tabular-nums w-12 text-right ${e.lastRenderDuration > 16 ? "text-warn" : "text-subtle"}`,
-					children: [e.lastRenderDuration.toFixed(1), "ms"]
-				})
-			]
-		});
-	}
-}, D = {
-	id: "components",
-	label: "Components",
-	component: @r() class extends e {
-		@o() components = [];
-		@o() selectedId = null;
-		@a() 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: e } = this;
-			return /* @__PURE__ */ f("div", {
-				class: "flex h-full overflow-hidden",
-				children: [/* @__PURE__ */ f("div", {
-					class: "flex-1 flex flex-col overflow-hidden min-w-0",
-					children: [/* @__PURE__ */ f("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",
-						children: [
-							/* @__PURE__ */ d("span", {
-								class: "flex-1",
-								children: "Component"
-							}),
-							/* @__PURE__ */ d("span", { children: "Renders" }),
-							/* @__PURE__ */ d("span", {
-								class: "w-12 text-right",
-								children: "Last"
-							})
-						]
-					}), /* @__PURE__ */ d("div", {
-						class: "flex-1 overflow-y-auto",
-						children: () => this.components.length === 0 ? /* @__PURE__ */ d(x, { message: "No components tracked. Add @Trace() to component classes." }) : this.components.map((e) => /* @__PURE__ */ d(ne, {
-							entry: e,
-							selected: () => this.selectedId === e.id,
-							onClick: () => {
-								this.selectedId = this.selectedId === e.id ? null : e.id;
-							}
-						}, e.id))
-					})]
-				}), () => {
-					let t = this.selectedId, n = t ? this.components.find((e) => e.id === t) ?? null : null, r = t ? e.getSignalsByComponent(t) : [];
-					return n ? /* @__PURE__ */ d(te, {
-						entry: n,
-						signals: r
-					}) : null;
-				}]
-			});
-		}
-	}
-}, O = @r() class extends t {
-	render() {
-		let { placeholder: e, onInput: t } = this.props;
-		return /* @__PURE__ */ d("input", {
-			type: "text",
-			placeholder: e,
-			class: "w-full bg-input border border-border rounded-lg text-text text-[11px] px-3 py-[5px] outline-none box-border transition-shadow duration-150",
-			onInput: (e) => {
-				t(e.target.value);
-			}
-		});
-	}
-}, k = @r() class extends t {
-	render() {
-		return /* @__PURE__ */ f("div", {
-			class: "border-b border-border",
-			children: [/* @__PURE__ */ d("div", {
-				class: "px-3 py-[4px] text-[9px] text-subtle font-bold tracking-[0.12em] uppercase bg-section border-b border-border",
-				children: this.props.label
-			}), this.props.children]
-		});
-	}
-};
-//#endregion
-//#region src/utils/format-time.ts
-function A(e, t) {
-	let n = t ? ` ${t}` : "", r = Date.now() - e;
-	return r < 1e3 ? `${r.toString()}ms${n}` : r < 6e4 ? `${(r / 1e3).toFixed(1)}s${n}` : `${Math.floor(r / 6e4).toString()}m${n}`;
-}
-//#endregion
-//#region src/plugins/signals/components/signal-detail.tsx
-var j = @r() class extends t {
-	render() {
-		let { entry: e } = this.props;
-		return /* @__PURE__ */ d(S, {
-			width: "260px",
-			children: /* @__PURE__ */ d(k, {
-				label: "History",
-				children: /* @__PURE__ */ f("div", {
-					class: "overflow-y-auto",
-					children: [[...e.history].reverse().map((e, t) => /* @__PURE__ */ f("div", {
-						class: "px-3 py-2 border-b border-border flex justify-between items-center gap-3",
-						children: [/* @__PURE__ */ d("span", {
-							class: "font-mono text-[11px] text-text truncate",
-							children: C(e.value)
-						}), /* @__PURE__ */ d("span", {
-							class: "text-[10px] text-subtle shrink-0 tabular-nums",
-							children: A(e.timestamp, "ago")
-						})]
-					}, String(t))), e.history.length === 0 && /* @__PURE__ */ d("p", {
-						class: "px-3 py-6 text-[11px] text-subtle text-center",
-						children: "No history yet."
-					})]
-				})
-			})
-		});
-	}
-}, M = @r() class extends t {
-	render() {
-		let { entry: e, selected: t, onClick: n } = this.props;
-		return /* @__PURE__ */ f("div", {
-			onClick: n,
-			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 ${t ? "bg-selected" : "hover:bg-section"}`,
-			children: [
-				t && /* @__PURE__ */ d("span", { class: "absolute left-0 top-0 bottom-0 w-[2px] bg-accent rounded-r" }),
-				/* @__PURE__ */ d("span", {
-					class: "text-accent font-mono text-[11px] truncate pl-1",
-					children: e.label
-				}),
-				/* @__PURE__ */ d("span", {
-					class: "text-muted text-[11px] truncate",
-					children: e.componentName
-				}),
-				/* @__PURE__ */ d("span", {
-					class: "text-text font-mono text-[11px] truncate",
-					children: C(e.value)
-				}),
-				/* @__PURE__ */ d("span", {
-					class: "text-subtle text-[10px] text-right tabular-nums",
-					children: A(e.changedAt, "ago")
-				})
-			]
-		});
-	}
-}, N = {
-	id: "signals",
-	label: "Signals",
-	component: @r() class extends e {
-		@o() signals = [];
-		@o() search = "";
-		@o() selectedId = null;
-		@a() 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() {
-			return /* @__PURE__ */ f("div", {
-				class: "flex h-full overflow-hidden",
-				children: [/* @__PURE__ */ f("div", {
-					class: "flex-1 flex flex-col overflow-hidden min-w-0",
-					children: [
-						/* @__PURE__ */ d("div", {
-							class: "px-3 py-2 border-b border-border bg-bg shrink-0",
-							children: /* @__PURE__ */ d(O, {
-								placeholder: "Search signals…",
-								onInput: (e) => {
-									this.search = e;
-								}
-							})
-						}),
-						/* @__PURE__ */ f("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",
-							children: [
-								/* @__PURE__ */ d("span", { children: "Signal" }),
-								/* @__PURE__ */ d("span", { children: "Component" }),
-								/* @__PURE__ */ d("span", { children: "Value" }),
-								/* @__PURE__ */ d("span", { children: "Age" })
-							]
-						}),
-						/* @__PURE__ */ d("div", {
-							class: "flex-1 overflow-y-auto",
-							children: () => {
-								let e = this.search.toLowerCase(), t = e === "" ? this.signals : this.signals.filter((t) => t.label.toLowerCase().includes(e) || t.componentName.toLowerCase().includes(e));
-								return t.length === 0 ? /* @__PURE__ */ d(x, { message: this.signals.length === 0 ? "No signals tracked. Add @Debug() on top of @State() properties." : "No signals match your search." }) : t.map((e) => /* @__PURE__ */ d(M, {
-									entry: e,
-									selected: this.selectedId === e.id,
-									onClick: () => {
-										this.selectedId = this.selectedId === e.id ? null : e.id;
-									}
-								}, e.id));
-							}
-						})
-					]
-				}), () => {
-					let e = this.selectedId, t = e ? this.signals.find((t) => t.id === e) ?? null : null;
-					return t ? /* @__PURE__ */ d(j, { entry: t }) : null;
-				}]
-			});
-		}
-	}
-}, P = {
-	"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)]"
-	}
-}, F = [
-	{
-		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"
-	}
-], I = @r() class extends t {
-	render() {
-		let e = P[this.props.type];
-		return /* @__PURE__ */ d("span", {
-			class: `text-[9px] px-[6px] py-[2px] rounded font-bold uppercase tracking-[0.07em] shrink-0 ${e.cls}`,
-			children: e.label
-		});
-	}
-}, L = @r() class extends e {
-	@o() open = !1;
-	@a() entry;
-	render() {
-		let e = this.entry;
-		if (!e) return null;
-		let t = Object.keys(e.data).length > 0;
-		return /* @__PURE__ */ f("div", {
-			class: "border-b border-border",
-			children: [/* @__PURE__ */ f("div", {
-				onClick: () => {
-					t && (this.open = !this.open);
-				},
-				class: `flex items-center gap-2 px-3 py-2 transition-colors duration-100 ${t ? "cursor-pointer hover:bg-section" : "cursor-default"}`,
-				children: [
-					/* @__PURE__ */ d("span", {
-						class: "text-subtle text-[10px] w-10 shrink-0 text-right tabular-nums font-mono",
-						children: A(e.timestamp)
-					}),
-					/* @__PURE__ */ d(I, { type: e.type }),
-					/* @__PURE__ */ d("span", {
-						class: "flex-1 text-text font-mono text-[11px] truncate",
-						children: e.label
-					}),
-					t && /* @__PURE__ */ d("span", {
-						class: "text-subtle text-[11px] shrink-0 w-4 text-center",
-						children: () => this.open ? "▾" : "▸"
-					})
-				]
-			}), () => this.open && t ? /* @__PURE__ */ d("div", {
-				class: "px-3 py-2 pl-[56px] font-mono text-[11px] bg-section border-t border-border",
-				children: Object.entries(e.data).map(([e, t]) => /* @__PURE__ */ f("div", {
-					class: "flex gap-3 py-[3px]",
-					children: [/* @__PURE__ */ f("span", {
-						class: "text-accent shrink-0",
-						children: [e, ":"]
-					}), /* @__PURE__ */ d("span", {
-						class: "text-muted truncate",
-						children: typeof t == "object" ? JSON.stringify(t) : String(t)
-					})]
-				}, e))
-			}) : null]
-		});
-	}
-}, R = {
-	id: "timeline",
-	label: "Timeline",
-	component: @r() class extends e {
-		@o() entries = [];
-		@o() filter = "all";
-		@o() paused = !1;
-		@a() 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() {
-			return /* @__PURE__ */ f("div", {
-				class: "flex flex-col h-full overflow-hidden",
-				children: [/* @__PURE__ */ f("div", {
-					class: "flex items-center gap-[3px] px-2 py-2 border-b border-border bg-bg shrink-0 flex-wrap",
-					children: [
-						F.map((e) => /* @__PURE__ */ d("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)),
-						/* @__PURE__ */ d("div", { class: "flex-1" }),
-						/* @__PURE__ */ d("button", {
-							onClick: () => {
-								this.paused && (this.entries = this.registry.getTimeline()), this.paused = !this.paused;
-							},
-							class: () => `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"}`,
-							children: () => this.paused ? "Resume" : "Pause"
-						}),
-						/* @__PURE__ */ d("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",
-							children: "Clear"
-						})
-					]
-				}), /* @__PURE__ */ d("div", {
-					class: "flex-1 overflow-y-auto",
-					children: () => {
-						let e = this.filter, t = e === "all" ? this.entries : this.entries.filter((t) => t.type === e || e === "component:mount" && t.type === "component:unmount");
-						return t.length === 0 ? /* @__PURE__ */ d(x, { message: "No events yet. Interact with your app to see the timeline." }) : [...t].reverse().map((e) => /* @__PURE__ */ d(L, { entry: e }, e.id));
-					}
-				})]
-			});
-		}
-	}
-}, z = "*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}", B = @r() class extends t {
-	render() {
-		return /* @__PURE__ */ f("svg", {
-			xmlns: "http://www.w3.org/2000/svg",
-			width: "24",
-			height: "24",
-			viewBox: "0 0 24 24",
-			fill: "none",
-			stroke: "currentColor",
-			"stroke-width": "2",
-			"stroke-linecap": "round",
-			"stroke-linejoin": "round",
-			class: "lucide lucide-ellipsis-vertical-icon lucide-ellipsis-vertical",
-			children: [
-				/* @__PURE__ */ d("circle", {
-					cx: "12",
-					cy: "12",
-					r: "1"
-				}),
-				/* @__PURE__ */ d("circle", {
-					cx: "12",
-					cy: "5",
-					r: "1"
-				}),
-				/* @__PURE__ */ d("circle", {
-					cx: "12",
-					cy: "19",
-					r: "1"
-				})
-			]
-		});
-	}
-}, V = @r() class extends t {
-	render() {
-		return /* @__PURE__ */ f("svg", {
-			xmlns: "http://www.w3.org/2000/svg",
-			width: "24",
-			height: "24",
-			viewBox: "0 0 24 24",
-			fill: "none",
-			stroke: "currentColor",
-			"stroke-width": "2",
-			"stroke-linecap": "round",
-			"stroke-linejoin": "round",
-			class: "lucide lucide-panel-bottom-icon lucide-panel-bottom",
-			children: [/* @__PURE__ */ d("rect", {
-				width: "18",
-				height: "18",
-				x: "3",
-				y: "3",
-				rx: "2"
-			}), /* @__PURE__ */ d("path", { d: "M3 15h18" })]
-		});
-	}
-}, H = @r() class extends t {
-	render() {
-		return /* @__PURE__ */ f("svg", {
-			xmlns: "http://www.w3.org/2000/svg",
-			width: "24",
-			height: "24",
-			viewBox: "0 0 24 24",
-			fill: "none",
-			stroke: "currentColor",
-			"stroke-width": "2",
-			"stroke-linecap": "round",
-			"stroke-linejoin": "round",
-			class: "lucide lucide-panel-left-icon lucide-panel-left",
-			children: [/* @__PURE__ */ d("rect", {
-				width: "18",
-				height: "18",
-				x: "3",
-				y: "3",
-				rx: "2"
-			}), /* @__PURE__ */ d("path", { d: "M9 3v18" })]
-		});
-	}
-}, U = @r() class extends t {
-	render() {
-		return /* @__PURE__ */ f("svg", {
-			xmlns: "http://www.w3.org/2000/svg",
-			width: "24",
-			height: "24",
-			viewBox: "0 0 24 24",
-			fill: "none",
-			stroke: "currentColor",
-			"stroke-width": "2",
-			"stroke-linecap": "round",
-			"stroke-linejoin": "round",
-			class: "lucide lucide-panel-right-icon lucide-panel-right",
-			children: [/* @__PURE__ */ d("rect", {
-				width: "18",
-				height: "18",
-				x: "3",
-				y: "3",
-				rx: "2"
-			}), /* @__PURE__ */ d("path", { d: "M15 3v18" })]
-		});
-	}
-}, re = @r() class extends t {
-	render() {
-		return /* @__PURE__ */ f("svg", {
-			xmlns: "http://www.w3.org/2000/svg",
-			width: "24",
-			height: "24",
-			viewBox: "0 0 24 24",
-			fill: "none",
-			stroke: "currentColor",
-			"stroke-width": "2",
-			"stroke-linecap": "round",
-			"stroke-linejoin": "round",
-			class: "lucide lucide-panel-top-icon lucide-panel-top",
-			children: [/* @__PURE__ */ d("rect", {
-				width: "18",
-				height: "18",
-				x: "3",
-				y: "3",
-				rx: "2"
-			}), /* @__PURE__ */ d("path", { d: "M3 9h18" })]
-		});
-	}
-}, W = @r() class extends t {
-	render() {
-		return /* @__PURE__ */ f("svg", {
-			xmlns: "http://www.w3.org/2000/svg",
-			width: "24",
-			height: "24",
-			viewBox: "0 0 24 24",
-			fill: "none",
-			stroke: "currentColor",
-			"stroke-width": "2",
-			"stroke-linecap": "round",
-			"stroke-linejoin": "round",
-			class: "lucide lucide-x-icon lucide-x",
-			children: [/* @__PURE__ */ d("path", { d: "M18 6 6 18" }), /* @__PURE__ */ d("path", { d: "m6 6 12 12" })]
-		});
-	}
-}, G = @r() class extends t {
-	render() {
-		let { title: e, active: t, icon: n, onClick: r } = this.props;
-		return /* @__PURE__ */ d("button", {
-			title: e,
-			onClick: r,
-			class: () => `w-[22px] h-[22px] flex items-center justify-center rounded-md text-[11px] cursor-pointer transition-colors duration-150 ${(typeof t == "function" ? t() : t) ? "text-accent bg-soft color-white" : "text-subtle hover:color-muted hover:bg-section"}`,
-			children: /* @__PURE__ */ d(n, {})
-		});
-	}
-}, K = 180, q = 300, J = 240, Y = 380, X = {
-	bottom: V,
-	top: re,
-	left: H,
-	right: U
-}, ie = @r() class extends e {
-	@o() activeTab = "";
-	@o() dock = "bottom";
-	@o() dockMenuOpen = !1;
-	@o() bottomSize = q;
-	@o() vertSize = Y;
-	@a() plugins = [];
-	@a() registry;
-	@i("onClose") handleClose() {}
-	onMount() {
-		this.plugins.length > 0 && (this.activeTab = this.plugins[0].id);
-	}
-	handleMouseDown(e) {
-		e.preventDefault();
-		let t = e.clientX, n = e.clientY, r = this.dock, i = r === "bottom" || r === "top" ? this.bottomSize : this.vertSize, a = (e) => {
-			let r = this.dock;
-			r === "bottom" ? this.bottomSize = Math.max(K, Math.min(window.innerHeight * .85, i + (n - e.clientY))) : r === "top" ? this.bottomSize = Math.max(K, Math.min(window.innerHeight * .85, i + (e.clientY - n))) : r === "left" ? this.vertSize = Math.max(J, Math.min(window.innerWidth * .6, i + (e.clientX - t))) : this.vertSize = Math.max(J, Math.min(window.innerWidth * .6, i + (t - e.clientX)));
-		}, o = () => {
-			document.removeEventListener("mousemove", a), document.removeEventListener("mouseup", o);
-		};
-		document.addEventListener("mousemove", a), document.addEventListener("mouseup", o);
-	}
-	render() {
-		return /* @__PURE__ */ f("div", {
-			class: () => {
-				let e = this.dock;
-				return e === "top" ? "flex flex-col-reverse fixed top-0 left-0 w-full z-[2147483647]" : e === "left" ? "flex flex-row-reverse fixed left-0 top-0 h-screen z-[2147483647]" : e === "right" ? "flex fixed right-0 top-0 h-screen z-[2147483647]" : "flex flex-col fixed bottom-0 left-0 w-full z-[2147483647]";
-			},
-			children: [/* @__PURE__ */ d("div", {
-				class: () => {
-					let e = this.dock;
-					return e === "bottom" || e === "top" ? "h-1 cursor-[ns-resize] bg-transparent hover:bg-accent transition-colors duration-200" : "w-1 cursor-[ew-resize] bg-transparent hover:bg-accent transition-colors duration-200";
-				},
-				onMouseDown: (e) => {
-					this.handleMouseDown(e);
-				}
-			}), /* @__PURE__ */ d("div", {
-				class: () => {
-					let e = this.dock;
-					return e === "top" ? "w-full h-full bg-bg border-b border-border" : e === "left" ? "w-full h-full bg-bg border-r border-border" : e === "right" ? "w-full h-full bg-bg border-l border-border" : "w-full h-full bg-bg border-t border-border";
-				},
-				style: () => {
-					let e = this.dock;
-					return e === "bottom" || e === "top" ? { height: `${this.bottomSize.toString()}px` } : { width: `${this.vertSize.toString()}px` };
-				},
-				children: /* @__PURE__ */ f("div", {
-					class: "flex flex-col flex-1 w-full h-full overflow-hidden",
-					children: [/* @__PURE__ */ f("div", {
-						class: "flex h-10 items-stretch border-b border-border bg-header shrink-0 px-2 gap-[2px]",
-						children: [
-							/* @__PURE__ */ f("div", {
-								class: "flex items-center gap-[6px] pr-3 mr-[2px] border-r border-border shrink-0",
-								children: [/* @__PURE__ */ d("img", {
-									class: "h-[13px] w-[13px]",
-									src: m
-								}), /* @__PURE__ */ d("span", {
-									class: "text-[10px] font-bold text-accent tracking-widest uppercase",
-									children: "praxisjs"
-								})]
-							}),
-							/* @__PURE__ */ d("div", {
-								class: "flex items-stretch flex-1",
-								children: () => this.plugins.map((e) => /* @__PURE__ */ f("button", {
-									class: () => this.activeTab === e.id ? "relative flex items-center px-3 text-[11px] font-semibold text-accent cursor-pointer" : "flex items-center px-3 text-[11px] text-muted cursor-pointer hover:text-text transition-colors duration-150",
-									onClick: () => {
-										this.activeTab = e.id;
-									},
-									children: [e.label, () => this.activeTab === e.id ? /* @__PURE__ */ d("span", { class: "absolute bottom-0 left-0 right-0 h-[2px] bg-accent" }) : null]
-								}, e.id))
-							}),
-							/* @__PURE__ */ f("div", {
-								class: "flex items-center gap-[2px] shrink-0",
-								children: [
-									/* @__PURE__ */ f("div", {
-										class: "relative",
-										children: [/* @__PURE__ */ d(G, {
-											title: "Dock position",
-											icon: B,
-											active: () => this.dockMenuOpen,
-											onClick: () => {
-												this.dockMenuOpen = !this.dockMenuOpen;
-											}
-										}), () => this.dockMenuOpen ? /* @__PURE__ */ d("div", {
-											class: "absolute right-0 top-full mt-1 flex gap-[2px] bg-bg border border-border rounded-md shadow-lg p-1 z-10",
-											children: [
-												"bottom",
-												"top",
-												"left",
-												"right"
-											].map((e) => /* @__PURE__ */ d(G, {
-												title: `Dock ${e}`,
-												active: () => this.dock === e,
-												icon: X[e],
-												onClick: () => {
-													this.dock = e, this.dockMenuOpen = !1;
-												}
-											}, e))
-										}) : null]
-									}),
-									/* @__PURE__ */ d("div", { class: "w-px h-3 bg-border mx-1" }),
-									/* @__PURE__ */ d(G, {
-										title: "Close",
-										icon: W,
-										onClick: () => {
-											this.handleClose();
-										}
-									})
-								]
-							})
-						]
-					}), /* @__PURE__ */ d("div", {
-						class: "flex-1 overflow-hidden flex flex-col",
-						children: () => {
-							let e = this.plugins.find((e) => e.id === this.activeTab)?.component;
-							return e ? /* @__PURE__ */ d(e, { registry: this.registry }) : null;
-						}
-					})]
-				})
-			})]
-		});
-	}
-}, ae = [
-	N,
-	D,
-	R
-], Z = @r() class extends e {
-	@o() open = !1;
-	@a() plugins = [];
-	@a() registry;
-	render() {
-		return /* @__PURE__ */ d("div", { children: () => this.open ? /* @__PURE__ */ d(ie, {
-			plugins: this.plugins,
-			registry: this.registry,
-			onClose: () => {
-				this.open = !1;
-			}
-		}) : /* @__PURE__ */ f("button", {
-			onClick: () => {
-				this.open = !0;
-			},
-			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)]",
-			children: [/* @__PURE__ */ d("img", {
-				class: "h-[13px] w-[13px]",
-				src: m
-			}), /* @__PURE__ */ d("span", {
-				class: "text-[10px] font-bold text-accent tracking-widest uppercase",
-				children: "devtools"
-			})]
-		}) });
-	}
-}, oe = {
-	plugins: [...ae],
-	host: null,
-	cleanup: null,
-	init(e = {}) {
-		if (this.host) return;
-		e.plugins && (this.plugins = e.plugins), this.plugins.forEach((e) => e.setup?.(b.instance));
-		let t = document.createElement("div");
-		t.id = "praxisjs-devtools", document.body.appendChild(t), this.host = t;
-		let n = t.attachShadow({ mode: "open" }), r = document.createElement("style");
-		r.textContent = z + h, n.appendChild(r);
-		let i = document.createElement("div");
-		n.appendChild(i), this.cleanup = p(() => /* @__PURE__ */ d(Z, {
-			plugins: this.plugins,
-			registry: b.instance
-		}), i);
-	},
-	registerPlugin(e) {
-		this.plugins.find((t) => t.id === e.id) || (e.setup?.(b.instance), this.plugins.push(e), this.remount());
-	},
-	get registry() {
-		return b.instance;
-	},
-	remount() {
-		if (!this.host) return;
-		let e = this.host.shadowRoot.querySelector("div:last-child");
-		this.cleanup?.(), this.cleanup = p(() => /* @__PURE__ */ d(Z, {
-			plugins: this.plugins,
-			registry: b.instance
-		}), e);
-	}
-};
-//#endregion
-//#region src/decorators/debug.ts
-function Q(e) {
-	return typeof e == "function" && typeof e.subscribe == "function" && !("set" in e);
-}
-function $(e = {}) {
-	return function(t, n) {
-		let r = e.label ?? n.name;
-		if (n.kind === "method") {
-			let e = t;
-			u({ wrap(t, n, i) {
-				return function(...t) {
-					let n = this.constructor.name, i = performance.now(), a, o = !1;
-					try {
-						a = e.apply(this, t);
-					} catch (e) {
-						throw o = !0, a = e, e;
-					} finally {
-						let e = performance.now() - i;
-						b.instance.recordMethodCall(this, r, t, o ? `throw ${String(a)}` : a, e, n);
-					}
-					return a;
-				};
-			} })(e, n);
-			return;
-		}
-		if (n.kind === "getter") {
-			let e = t;
-			l({ observe(e, t, n) {
-				let i = t.constructor.name;
-				queueMicrotask(() => {
-					let n = ee(() => e.call(t)), a = !0, o = n();
-					b.instance.registerSignal(t, r, o, i), n.subscribe((e) => {
-						if (a) {
-							a = !1;
-							return;
-						}
-						b.instance.updateSignal(t, r, e, o), o = e;
-					});
-				});
-			} })(e, n);
-			return;
-		}
-		c({ bind(e, t, n) {
-			let i = e.constructor.name, a = Object.getOwnPropertyDescriptor(e, t);
-			if (a?.get && a.set) {
-				let t = a.get, n = a.set;
-				return b.instance.registerSignal(e, r, t.call(e), i), { descriptor: {
-					get() {
-						return t.call(this);
-					},
-					set(e) {
-						let i = t.call(this);
-						n.call(this, e), b.instance.updateSignal(this, r, e, i);
-					}
-				} };
-			}
-			let o = n;
-			if (!Q(o)) return o !== void 0 && console.warn(`[PraxisJS DevTools] @Debug() on "${i}.${t}": expected a computed() value but got ${typeof o}. Skipping.`), {};
-			let s;
-			function c(t) {
-				let n = !0, a = t(), o = t.subscribe((t) => {
-					if (n) {
-						n = !1;
-						return;
-					}
-					b.instance.updateSignal(e, r, t, a), a = t;
-				});
-				return b.instance.registerSignal(e, r, a, i), o;
-			}
-			return s = {
-				computed: o,
-				unsub: c(o)
-			}, { descriptor: {
-				get() {
-					return s.computed;
-				},
-				set(e) {
-					if (s.unsub(), !Q(e)) {
-						console.warn(`[PraxisJS DevTools] @Debug() on "${i}.${t}": expected a computed() value but got ${typeof e}. Skipping.`);
-						return;
-					}
-					s = {
-						computed: e,
-						unsub: c(e)
-					};
-				}
-			} };
-		} })(void 0, n);
-	};
-}
-//#endregion
-//#region src/decorators/trace.ts
-var se = [
-	"onBeforeUpdate",
-	"onUpdate",
-	"onAfterUpdate"
-], ce = new class extends n {
-	create(e) {
-		let t = b.instance;
-		return {
-			onMount() {
-				t.recordLifecycle(e, "onMount");
-			},
-			onUnmount() {
-				t.recordLifecycle(e, "onUnmount");
-			},
-			render(n) {
-				let r = performance.now(), i = n(), a = performance.now() - r;
-				return t.recordRender(e, a), i;
-			}
-		};
-	}
-	initialize(e, t) {
-		let n = t.name, r = b.instance, i = e.prototype, a = i.onBeforeMount;
-		i.onBeforeMount = function(...e) {
-			return r.registerComponent(this, n), r.recordLifecycle(this, "onBeforeMount"), a?.call(this, ...e);
-		};
-		for (let e of se) {
-			let t = i[e];
-			i[e] = function(...n) {
-				return r.recordLifecycle(this, e), t?.call(this, ...n);
-			};
-		}
-	}
-}();
-function le() {
-	return s(ce);
-}
-//#endregion
-export { D as ComponentsPlugin, $ as Debug, oe as DevTools, b as Registry, N as SignalsPlugin, R as TimelinePlugin, le as Trace };
+import { Profiler as e } from "./core/profiler.js";
+import { Registry as t } from "./core/registry.js";
+import { ComponentsPlugin as n } from "./plugins/components/index.js";
+import { PerformancePlugin as r } from "./plugins/performance/index.js";
+import { SignalsPlugin as i } from "./plugins/signals/index.js";
+import { TimelinePlugin as a } from "./plugins/timeline/index.js";
+import { DevTools as o } from "./ui/dev-tools.js";
+import { Debug as s } from "./decorators/debug.js";
+import { Trace as c } from "./decorators/trace.js";
+export { n as ComponentsPlugin, s as Debug, o as DevTools, r as PerformancePlugin, e as Profiler, t as Registry, i as SignalsPlugin, a as TimelinePlugin, c as Trace };