@praxisjs/devtools 0.1.1 → 0.2.1

package/dist/index.js

@@ -1,115 +1,141 @@
-import { jsxs as d, jsx as n } from "@praxisjs/jsx/jsx-runtime";
-import { signal as b, effect as P, onMount as C, onUnmount as I, peek as U } from "@praxisjs/core";
-import { render as j } from "@praxisjs/runtime";
-const N = "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", F = '*,:before,:after{--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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--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: }::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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--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;display:block;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}*{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:transparent}::-webkit-scrollbar-thumb{background:#9b90e633;border-radius:2px}::-webkit-scrollbar-thumb:hover{background:#9b90e666}.container{width:100%}@media(min-width:640px){.container{max-width:640px}}@media(min-width:768px){.container{max-width:768px}}@media(min-width:1024px){.container{max-width:1024px}}@media(min-width:1280px){.container{max-width:1280px}}@media(min-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{height:.25rem}.h-10{height:2.5rem}.h-3{height:.75rem}.h-7{height:1.75rem}.h-full{height:100%}.h-screen{height:100vh}.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 1 0%}.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{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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:transparent}.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)}.shadow{--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / .1));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, rgba(0, 0, 0, .7));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, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / .1));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, rgba(56, 189, 248, .1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.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-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-100{transition-duration:.1s}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}';
-class O {
-  constructor() {
-    this.handlers = /* @__PURE__ */ new Map();
-  }
-  on(e, o) {
-    return this.handlers.has(e) || this.handlers.set(e, /* @__PURE__ */ new Set()), this.handlers.get(e).add(o), () => this.handlers.get(e)?.delete(o);
+var Bt = Object.create;
+var pe = Object.defineProperty;
+var Ht = Object.getOwnPropertyDescriptor;
+var Ae = (r, t) => (t = Symbol[r]) ? t : /* @__PURE__ */ Symbol.for("Symbol." + r), J = (r) => {
+  throw TypeError(r);
+};
+var Fe = (r, t, e) => t in r ? pe(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var Ne = (r, t) => pe(r, "name", { value: t, configurable: !0 });
+var b = (r) => [, , , Bt(r?.[Ae("metadata")] ?? null)], Be = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], Y = (r) => r !== void 0 && typeof r != "function" ? J("Function expected") : r, Gt = (r, t, e, n, i) => ({ kind: Be[r], name: t, metadata: n, addInitializer: (s) => e._ ? J("Already initialized") : i.push(Y(s || null)) }), Tt = (r, t) => Fe(t, Ae("metadata"), r[3]), a = (r, t, e, n) => {
+  for (var i = 0, s = r[t >> 1], l = s && s.length; i < l; i++) t & 1 ? s[i].call(e) : n = s[i].call(e, n);
+  return n;
+}, d = (r, t, e, n, i, s) => {
+  var l, p, g, h, m, u = t & 7, k = !!(t & 8), z = !!(t & 16), _ = u > 3 ? r.length + 1 : u ? k ? 1 : 2 : 0, U = Be[u + 5], W = u > 3 && (r[_ - 1] = []), Ft = r[_] || (r[_] = []), L = u && (!z && !k && (i = i.prototype), u < 5 && (u > 3 || !z) && Ht(u < 4 ? i : { get [e]() {
+    return Ue(this, s);
+  }, set [e](C) {
+    return Oe(this, s, C);
+  } }, e));
+  u ? z && u < 4 && Ne(s, (u > 2 ? "set " : u > 1 ? "get " : "") + e) : Ne(i, e);
+  for (var ce = n.length - 1; ce >= 0; ce--)
+    h = Gt(u, e, g = {}, r[3], Ft), u && (h.static = k, h.private = z, m = h.access = { has: z ? (C) => Rt(i, C) : (C) => e in C }, u ^ 3 && (m.get = z ? (C) => (u ^ 1 ? Ue : Wt)(C, i, u ^ 4 ? s : L.get) : (C) => C[e]), u > 2 && (m.set = z ? (C, de) => Oe(C, i, de, u ^ 4 ? s : L.set) : (C, de) => C[e] = de)), p = (0, n[ce])(u ? u < 4 ? z ? s : L[U] : u > 4 ? void 0 : { get: L.get, set: L.set } : i, h), g._ = 1, u ^ 4 || p === void 0 ? Y(p) && (u > 4 ? W.unshift(p) : u ? z ? s = p : L[U] = p : i = p) : typeof p != "object" || p === null ? J("Object expected") : (Y(l = p.get) && (L.get = l), Y(l = p.set) && (L.set = l), Y(l = p.init) && W.unshift(l));
+  return u || Tt(r, i), L && pe(i, e, L), z ? u ^ 4 ? s : L : i;
+}, f = (r, t, e) => Fe(r, typeof t != "symbol" ? t + "" : t, e), ue = (r, t, e) => t.has(r) || J("Cannot " + e), Rt = (r, t) => Object(t) !== t ? J('Cannot use the "in" operator on this value') : r.has(t), Ue = (r, t, e) => (ue(r, t, "read from private field"), e ? e.call(r) : t.get(r));
+var Oe = (r, t, e, n) => (ue(r, t, "write to private field"), n ? n.call(r, e) : t.set(r, e), e), Wt = (r, t, e) => (ue(r, t, "access private method"), e);
+import { jsxs as c, jsx as o } from "@praxisjs/jsx/jsx-runtime";
+import { StatelessComponent as w, StatefulComponent as R } from "@praxisjs/core";
+import { Component as x, State as M } from "@praxisjs/decorators";
+import { render as He } from "@praxisjs/runtime";
+import { computed as Yt } from "@praxisjs/core/internal";
+const At = "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", Jt = '*,:before,:after{--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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--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: }::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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--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;display:block;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}*{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:transparent}::-webkit-scrollbar-thumb{background:#9b90e633;border-radius:2px}::-webkit-scrollbar-thumb:hover{background:#9b90e666}.container{width:100%}@media(min-width:640px){.container{max-width:640px}}@media(min-width:768px){.container{max-width:768px}}@media(min-width:1024px){.container{max-width:1024px}}@media(min-width:1280px){.container{max-width:1280px}}@media(min-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{height:.25rem}.h-10{height:2.5rem}.h-3{height:.75rem}.h-7{height:1.75rem}.h-full{height:100%}.h-screen{height:100vh}.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 1 0%}.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{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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:transparent}.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)}.shadow{--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / .1));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, rgba(0, 0, 0, .7));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, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / .1));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, rgba(56, 189, 248, .1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.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-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-100{transition-duration:.1s}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}';
+class qt {
+  handlers = /* @__PURE__ */ new Map();
+  on(t, e) {
+    return this.handlers.has(t) || this.handlers.set(t, /* @__PURE__ */ new Set()), this.handlers.get(t).add(e), () => this.handlers.get(t)?.delete(e);
   }
-  emit(e, o) {
-    this.handlers.get(e)?.forEach((r) => {
-      r(o);
+  emit(t, e) {
+    this.handlers.get(t)?.forEach((n) => {
+      n(e);
     });
   }
 }
-const H = 200;
-let W = 0;
-function T() {
-  return `v${(++W).toString()}_${Date.now().toString(36)}`;
+const Xt = 200;
+let Kt = 0;
+function Ge() {
+  return `v${(++Kt).toString()}_${Date.now().toString(36)}`;
 }
-const f = class f {
-  constructor() {
-    this.bus = new O(), this.instanceIds = /* @__PURE__ */ new WeakMap(), this.signals = /* @__PURE__ */ new Map(), this.components = /* @__PURE__ */ new Map(), this.timeline = [];
-  }
+class v {
+  static _instance = null;
   static get instance() {
-    return f._instance ??= new f(), f._instance;
+    return v._instance ??= new v(), v._instance;
   }
-  getInstanceId(e) {
-    return this.instanceIds.has(e) || this.instanceIds.set(e, T()), this.instanceIds.get(e);
+  bus = new qt();
+  instanceIds = /* @__PURE__ */ new WeakMap();
+  signals = /* @__PURE__ */ new Map();
+  components = /* @__PURE__ */ new Map();
+  timeline = [];
+  getInstanceId(t) {
+    return this.instanceIds.has(t) || this.instanceIds.set(t, Ge()), this.instanceIds.get(t);
   }
-  registerSignal(e, o, r, i) {
-    const a = this.getInstanceId(e), l = `${a}:${o}`, s = {
+  registerSignal(t, e, n, i) {
+    const s = this.getInstanceId(t), l = `${s}:${e}`, p = {
       id: l,
-      label: o,
-      componentId: a,
+      label: e,
+      componentId: s,
       componentName: i,
-      value: r,
-      history: [{ value: r, timestamp: Date.now() }],
+      value: n,
+      history: [{ value: n, timestamp: Date.now() }],
       changedAt: Date.now()
     };
-    this.signals.set(l, s), this.bus.emit("signal:registered", s);
+    this.signals.set(l, p), this.bus.emit("signal:registered", p);
   }
-  updateSignal(e, o, r, i) {
-    const l = `${this.getInstanceId(e)}:${o}`, s = this.signals.get(l);
-    if (!s) return;
-    const u = [
-      ...s.history,
-      { value: r, timestamp: Date.now() }
-    ].slice(-20), c = {
-      ...s,
-      value: r,
-      history: u,
+  updateSignal(t, e, n, i) {
+    const l = `${this.getInstanceId(t)}:${e}`, p = this.signals.get(l);
+    if (!p) return;
+    const g = [
+      ...p.history,
+      { value: n, timestamp: Date.now() }
+    ].slice(-20), h = {
+      ...p,
+      value: n,
+      history: g,
       changedAt: Date.now()
     };
-    this.signals.set(l, c), this.bus.emit("signal:changed", { entry: c, oldValue: i }), this.pushTimeline({
+    this.signals.set(l, h), this.bus.emit("signal:changed", { entry: h, oldValue: i }), this.pushTimeline({
       type: "signal:change",
-      label: `${s.componentName}.${o}`,
-      data: { old: i, new: r, signalId: l }
+      label: `${p.componentName}.${e}`,
+      data: { old: i, new: n, signalId: l }
     });
   }
-  registerComponent(e, o) {
-    const r = this.getInstanceId(e), i = {
-      id: r,
-      name: o,
+  registerComponent(t, e) {
+    const n = this.getInstanceId(t), i = {
+      id: n,
+      name: e,
       renderCount: 0,
       lastRenderDuration: 0,
       mountedAt: Date.now(),
       status: "mounted",
       lifecycle: []
     };
-    this.components.set(r, i), this.bus.emit("component:registered", i);
+    this.components.set(n, i), this.bus.emit("component:registered", i);
   }
-  recordRender(e, o) {
-    const r = this.getInstanceId(e), i = this.components.get(r);
-    i && (i.renderCount++, i.lastRenderDuration = o, this.bus.emit("component:render", { ...i }), this.pushTimeline({
+  recordRender(t, e) {
+    const n = this.getInstanceId(t), i = this.components.get(n);
+    i && (i.renderCount++, i.lastRenderDuration = e, this.bus.emit("component:render", { ...i }), this.pushTimeline({
       type: "component:render",
       label: `<${i.name}>`,
       data: {
-        componentId: r,
-        duration: +o.toFixed(3),
+        componentId: n,
+        duration: +e.toFixed(3),
         renderCount: i.renderCount
       }
     }));
   }
-  recordLifecycle(e, o) {
-    const r = this.getInstanceId(e), i = this.components.get(r);
+  recordLifecycle(t, e) {
+    const n = this.getInstanceId(t), i = this.components.get(n);
     if (!i) return;
-    const a = { hook: o, timestamp: Date.now() };
-    i.lifecycle.push(a), this.bus.emit("lifecycle", { componentId: r, name: i.name, hook: o });
-    const l = o === "onUnmount" ? "component:unmount" : o === "onBeforeMount" ? "component:mount" : "lifecycle";
+    const s = { hook: e, timestamp: Date.now() };
+    i.lifecycle.push(s), this.bus.emit("lifecycle", { componentId: n, name: i.name, hook: e });
+    const l = e === "onUnmount" ? "component:unmount" : e === "onBeforeMount" ? "component:mount" : "lifecycle";
     if (this.pushTimeline({
       type: l,
-      label: `<${i.name}>.${o}`,
-      data: { componentId: r, hook: o }
-    }), o === "onUnmount") {
-      i.status = "unmounted", this.bus.emit("component:unmount", { ...i }), this.components.delete(r);
-      for (const [s, u] of this.signals)
-        u.componentId === r && this.signals.delete(s);
+      label: `<${i.name}>.${e}`,
+      data: { componentId: n, hook: e }
+    }), e === "onUnmount") {
+      i.status = "unmounted", this.bus.emit("component:unmount", { ...i }), this.components.delete(n);
+      for (const [p, g] of this.signals)
+        g.componentId === n && this.signals.delete(p);
     }
   }
-  recordMethodCall(e, o, r, i, a, l) {
-    const s = this.getInstanceId(e);
+  recordMethodCall(t, e, n, i, s, l) {
+    const p = this.getInstanceId(t);
     this.pushTimeline({
       type: "method:call",
-      label: `${l}.${o}()`,
+      label: `${l}.${e}()`,
       data: {
-        componentId: s,
-        args: r,
+        componentId: p,
+        args: n,
         result: i,
-        duration: +a.toFixed(3)
+        duration: +s.toFixed(3)
       }
     });
   }
@@ -122,361 +148,421 @@ const f = class f {
   getTimeline() {
     return [...this.timeline];
   }
-  getSignalsByComponent(e) {
-    return this.getSignals().filter((o) => o.componentId === e);
+  getSignalsByComponent(t) {
+    return this.getSignals().filter((e) => e.componentId === t);
   }
-  pushTimeline(e) {
-    const o = {
-      id: T(),
+  pushTimeline(t) {
+    const e = {
+      id: Ge(),
       timestamp: Date.now(),
-      ...e
+      ...t
     };
-    this.timeline.push(o), this.timeline.length > H && this.timeline.shift(), this.bus.emit("timeline:push", o);
+    this.timeline.push(e), this.timeline.length > Xt && this.timeline.shift(), this.bus.emit("timeline:push", e);
   }
-};
-f._instance = null;
-let g = f;
-function z({ message: t }) {
-  return /* @__PURE__ */ d("div", { class: "flex flex-col items-center justify-center gap-2 py-12", children: [
-    /* @__PURE__ */ n("span", { class: "text-subtle text-[20px] leading-none select-none font-mono", children: "—" }),
-    /* @__PURE__ */ n("p", { class: "text-subtle text-[11px] text-center leading-relaxed max-w-[200px]", children: t })
-  ] });
 }
-function A({
-  children: t,
-  width: e = "280px"
-}) {
-  return /* @__PURE__ */ n(
-    "div",
-    {
-      class: "shrink-0 border-l border-border flex flex-col overflow-hidden",
-      style: { width: e },
-      children: t
-    }
-  );
+var Ye, he, an;
+Ye = [x()];
+class H extends (an = w) {
+  render() {
+    return /* @__PURE__ */ c("div", { class: "flex flex-col items-center justify-center gap-2 py-12", children: [
+      /* @__PURE__ */ o("span", { class: "text-subtle text-[20px] leading-none select-none font-mono", children: "—" }),
+      /* @__PURE__ */ o("p", { class: "text-subtle text-[11px] text-center leading-relaxed max-w-[200px]", children: this.props.message })
+    ] });
+  }
 }
-function M(t) {
-  if (t === null) return "null";
-  if (t === void 0) return "undefined";
-  if (typeof t == "string") return `"${t}"`;
-  if (typeof t == "object")
+he = b(an), H = d(he, 0, "EmptyState", Ye, H), a(he, 1, H);
+var Je, ge, ln;
+Je = [x()];
+class X extends (ln = w) {
+  render() {
+    const { children: t, width: e = "280px" } = this.props;
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        class: "shrink-0 border-l border-border flex flex-col overflow-hidden",
+        style: { width: e },
+        children: t
+      }
+    );
+  }
+}
+ge = b(ln), X = d(ge, 0, "SidePanel", Je, X), a(ge, 1, X);
+function Ee(r) {
+  if (r === null) return "null";
+  if (r === void 0) return "undefined";
+  if (typeof r == "string") return `"${r}"`;
+  if (typeof r == "object")
     try {
-      return JSON.stringify(t);
+      return JSON.stringify(r);
     } catch {
       return "[object]";
     }
-  return String(t);
+  return String(r);
+}
+var qe, be, cn;
+qe = [x()];
+class N extends (cn = w) {
+  render() {
+    const { k: t, v: e, signal: n } = this.props;
+    return /* @__PURE__ */ c("div", { class: "flex justify-between items-center px-3 py-2 border-b border-border gap-3", children: [
+      /* @__PURE__ */ o(
+        "span",
+        {
+          class: `text-[11px] font-mono shrink-0 ${n ? "text-accent" : "text-muted"}`,
+          children: t
+        }
+      ),
+      /* @__PURE__ */ o("span", { class: "text-[11px] text-text font-mono truncate text-right", children: e })
+    ] });
+  }
+}
+be = b(cn), N = d(be, 0, "DetailRow", qe, N), a(be, 1, N);
+var Xe, xe, dn;
+Xe = [x()];
+class G extends (dn = w) {
+  render() {
+    return /* @__PURE__ */ c("div", { class: "border-b border-border", children: [
+      /* @__PURE__ */ o("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
+    ] });
+  }
 }
-function v({
-  k: t,
-  v: e,
-  signal: o
-}) {
-  return /* @__PURE__ */ d("div", { class: "flex justify-between items-center px-3 py-2 border-b border-border gap-3", children: [
-    /* @__PURE__ */ n(
+xe = b(dn), G = d(xe, 0, "DetailSection", Xe, G), a(xe, 1, G);
+var Ke, me, pn;
+Ke = [x()];
+class K extends (pn = w) {
+  render() {
+    const { status: t } = this.props;
+    return /* @__PURE__ */ o(
       "span",
       {
-        class: `text-[11px] font-mono shrink-0 ${o ? "text-accent" : "text-muted"}`,
-        children: t
+        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
       }
-    ),
-    /* @__PURE__ */ n("span", { class: "text-[11px] text-text font-mono truncate text-right", children: e })
-  ] });
-}
-function k({
-  label: t,
-  children: e
-}) {
-  return /* @__PURE__ */ d("div", { class: "border-b border-border", children: [
-    /* @__PURE__ */ n("div", { class: "px-3 py-[4px] text-[9px] text-subtle font-bold tracking-[0.12em] uppercase bg-section border-b border-border", children: t }),
-    e
-  ] });
-}
-function R({ status: t }) {
-  return /* @__PURE__ */ n(
-    "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
-    }
-  );
-}
-function G({
-  entry: t,
-  signals: e
-}) {
-  return /* @__PURE__ */ d(A, { children: [
-    /* @__PURE__ */ d("div", { class: "px-3 py-2 border-b border-border flex items-center gap-2 bg-bg shrink-0", children: [
-      /* @__PURE__ */ n(R, { status: t.status }),
-      /* @__PURE__ */ d("span", { class: "text-accent font-mono text-[11px] font-semibold truncate pl-1", children: [
-        "<",
-        t.name,
-        ">"
-      ] })
-    ] }),
-    /* @__PURE__ */ d("div", { class: "flex-1 overflow-y-auto", children: [
-      /* @__PURE__ */ d(k, { label: "Stats", children: [
-        /* @__PURE__ */ n(v, { k: "renders", v: String(t.renderCount) }),
-        /* @__PURE__ */ n(
-          v,
-          {
-            k: "last render",
-            v: `${t.lastRenderDuration.toFixed(3)}ms`
-          }
-        ),
-        /* @__PURE__ */ n(v, { k: "status", v: t.status })
-      ] }),
-      e.length > 0 && /* @__PURE__ */ n(k, { label: "State", children: e.map((o) => /* @__PURE__ */ n(
-        v,
-        {
-          k: o.label,
-          v: M(o.value),
-          signal: !0
-        },
-        o.id
-      )) }),
-      t.lifecycle.length > 0 && /* @__PURE__ */ n(k, { label: "Lifecycle", children: [...t.lifecycle].reverse().slice(0, 20).map((o, r) => /* @__PURE__ */ d(
-        "div",
-        {
-          class: "px-3 py-2 flex justify-between items-center border-b border-border",
-          children: [
-            /* @__PURE__ */ n("span", { class: "text-[11px] text-text font-mono", children: o.hook }),
-            /* @__PURE__ */ n("span", { class: "text-[10px] text-subtle tabular-nums", children: new Date(o.timestamp).toLocaleTimeString() })
-          ]
-        },
-        String(r)
-      )) })
-    ] })
-  ] });
+    );
+  }
 }
-function X({
-  entry: t,
-  selected: e,
-  onClick: o
-}) {
-  return /* @__PURE__ */ d(
-    "div",
-    {
-      onClick: o,
-      class: () => `relative flex items-center gap-2 px-3 py-2 cursor-pointer border-b border-border transition-colors duration-100 ${e() ? "bg-selected" : "hover:bg-section"}`,
-      children: [
-        () => e() && /* @__PURE__ */ n("span", { class: "absolute left-0 top-0 bottom-0 w-[2px] bg-accent rounded-r" }),
-        /* @__PURE__ */ n(R, { status: t.status }),
-        /* @__PURE__ */ d("span", { class: "text-accent font-mono text-[11px] flex-1 truncate pl-1", children: [
+me = b(pn), K = d(me, 0, "StatusDot", Ke, K), a(me, 1, K);
+var Ze, fe, un;
+Ze = [x()];
+class Z extends (un = w) {
+  render() {
+    const { entry: t, signals: e } = this.props;
+    return /* @__PURE__ */ c(X, { children: [
+      /* @__PURE__ */ c("div", { class: "px-3 py-2 border-b border-border flex items-center gap-2 bg-bg shrink-0", children: [
+        /* @__PURE__ */ o(K, { status: t.status }),
+        /* @__PURE__ */ c("span", { class: "text-accent font-mono text-[11px] font-semibold truncate pl-1", children: [
           "<",
           t.name,
           ">"
+        ] })
+      ] }),
+      /* @__PURE__ */ c("div", { class: "flex-1 overflow-y-auto", children: [
+        /* @__PURE__ */ c(G, { label: "Stats", children: [
+          /* @__PURE__ */ o(N, { k: "renders", v: String(t.renderCount) }),
+          /* @__PURE__ */ o(
+            N,
+            {
+              k: "last render",
+              v: `${t.lastRenderDuration.toFixed(3)}ms`
+            }
+          ),
+          /* @__PURE__ */ o(N, { k: "status", v: t.status })
         ] }),
-        /* @__PURE__ */ d("span", { class: "text-muted text-[11px] tabular-nums", children: [
-          "×",
-          t.renderCount
-        ] }),
-        /* @__PURE__ */ d(
-          "span",
+        e.length > 0 && /* @__PURE__ */ o(G, { label: "State", children: e.map((n) => /* @__PURE__ */ o(
+          N,
           {
-            class: `text-[10px] tabular-nums w-12 text-right ${t.lastRenderDuration > 16 ? "text-warn" : "text-subtle"}`,
+            k: n.label,
+            v: Ee(n.value),
+            signal: !0
+          },
+          n.id
+        )) }),
+        t.lifecycle.length > 0 && /* @__PURE__ */ o(G, { label: "Lifecycle", children: [...t.lifecycle].reverse().slice(0, 20).map((n, i) => /* @__PURE__ */ c(
+          "div",
+          {
+            class: "px-3 py-2 flex justify-between items-center border-b border-border",
             children: [
-              t.lastRenderDuration.toFixed(1),
-              "ms"
+              /* @__PURE__ */ o("span", { class: "text-[11px] text-text font-mono", children: n.hook }),
+              /* @__PURE__ */ o("span", { class: "text-[10px] text-subtle tabular-nums", children: new Date(n.timestamp).toLocaleTimeString() })
             ]
-          }
-        )
-      ]
-    }
-  );
+          },
+          String(i)
+        )) })
+      ] })
+    ] });
+  }
+}
+fe = b(un), Z = d(fe, 0, "ComponentDetail", Ze, Z), a(fe, 1, Z);
+var Qe, we, hn;
+Qe = [x()];
+class Q extends (hn = w) {
+  render() {
+    const { entry: t, selected: e, onClick: n } = this.props;
+    return /* @__PURE__ */ c(
+      "div",
+      {
+        onClick: n,
+        class: () => `relative flex items-center gap-2 px-3 py-2 cursor-pointer border-b border-border transition-colors duration-100 ${e() ? "bg-selected" : "hover:bg-section"}`,
+        children: [
+          () => e() && /* @__PURE__ */ o("span", { class: "absolute left-0 top-0 bottom-0 w-[2px] bg-accent rounded-r" }),
+          /* @__PURE__ */ o(K, { status: t.status }),
+          /* @__PURE__ */ c("span", { class: "text-accent font-mono text-[11px] flex-1 truncate pl-1", children: [
+            "<",
+            t.name,
+            ">"
+          ] }),
+          /* @__PURE__ */ c("span", { class: "text-muted text-[11px] tabular-nums", children: [
+            "×",
+            t.renderCount
+          ] }),
+          /* @__PURE__ */ c(
+            "span",
+            {
+              class: `text-[10px] tabular-nums w-12 text-right ${t.lastRenderDuration > 16 ? "text-warn" : "text-subtle"}`,
+              children: [
+                t.lastRenderDuration.toFixed(1),
+                "ms"
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
 }
-function Y({ registry: t }) {
-  const e = b(t.getComponents()), o = b(null), r = b([]), i = P(() => {
-    const l = o();
-    r.set(l ? t.getSignalsByComponent(l) : []);
-  });
-  let a = [];
-  return C(() => {
-    const l = () => {
-      e.set(t.getComponents());
-      const s = U(o);
-      s && r.set(t.getSignalsByComponent(s));
+we = b(hn), Q = d(we, 0, "ComponentRow", Qe, Q), a(we, 1, Q);
+var Pe, Ve, et, tt, $;
+tt = [x()];
+class F extends (et = R, Ve = [M()], Pe = [M()], et) {
+  constructor() {
+    super(...arguments);
+    f(this, "components", a($, 8, this, [])), a($, 11, this);
+    f(this, "selectedId", a($, 12, this, null)), a($, 15, this);
+    f(this, "_handlers", []);
+  }
+  get registry() {
+    return this.props.registry;
+  }
+  onMount() {
+    this.components = this.registry.getComponents();
+    const e = () => {
+      this.components = this.registry.getComponents();
     };
-    a = [
+    this._handlers = [
       "component:registered",
       "component:render",
       "component:unmount",
       "lifecycle",
       "signal:registered",
       "signal:changed"
-    ].map((s) => t.bus.on(s, l));
-  }), I(() => {
-    i(), a.forEach((l) => {
-      l();
+    ].map((n) => this.registry.bus.on(n, e));
+  }
+  onUnmount() {
+    this._handlers.forEach((e) => {
+      e();
     });
-  }), /* @__PURE__ */ d("div", { class: "flex h-full overflow-hidden", children: [
-    /* @__PURE__ */ d("div", { class: "flex-1 flex flex-col overflow-hidden min-w-0", children: [
-      /* @__PURE__ */ d("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__ */ n("span", { class: "flex-1", children: "Component" }),
-        /* @__PURE__ */ n("span", { children: "Renders" }),
-        /* @__PURE__ */ n("span", { class: "w-12 text-right", children: "Last" })
+  }
+  render() {
+    const { registry: e } = this;
+    return /* @__PURE__ */ c("div", { class: "flex h-full overflow-hidden", children: [
+      /* @__PURE__ */ c("div", { class: "flex-1 flex flex-col overflow-hidden min-w-0", children: [
+        /* @__PURE__ */ c("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__ */ o("span", { class: "flex-1", children: "Component" }),
+          /* @__PURE__ */ o("span", { children: "Renders" }),
+          /* @__PURE__ */ o("span", { class: "w-12 text-right", children: "Last" })
+        ] }),
+        /* @__PURE__ */ o("div", { class: "flex-1 overflow-y-auto", children: () => this.components.length === 0 ? /* @__PURE__ */ o(H, { message: "No components tracked. Add @Trace() to component classes." }) : this.components.map((n) => /* @__PURE__ */ o(
+          Q,
+          {
+            entry: n,
+            selected: () => this.selectedId === n.id,
+            onClick: () => {
+              this.selectedId = this.selectedId === n.id ? null : n.id;
+            }
+          },
+          n.id
+        )) })
       ] }),
-      /* @__PURE__ */ n("div", { class: "flex-1 overflow-y-auto", children: () => e().length === 0 ? /* @__PURE__ */ n(z, { message: "No components tracked. Add @Trace() to component classes." }) : e().map((l) => /* @__PURE__ */ n(
-        X,
-        {
-          entry: l,
-          selected: () => o() === l.id,
-          onClick: () => {
-            o.update((s) => s === l.id ? null : l.id);
-          }
-        },
-        l.id
-      )) })
-    ] }),
-    () => {
-      const l = o(), s = l ? e().find((u) => u.id === l) ?? null : null;
-      return s ? /* @__PURE__ */ n(G, { entry: s, signals: r() }) : null;
-    }
-  ] });
+      () => {
+        const n = this.selectedId, i = n ? this.components.find((l) => l.id === n) ?? null : null, s = n ? e.getSignalsByComponent(n) : [];
+        return i ? /* @__PURE__ */ o(Z, { entry: i, signals: s }) : null;
+      }
+    ] });
+  }
 }
-const J = {
+$ = b(et), d($, 5, "components", Ve, F), d($, 5, "selectedId", Pe, F), F = d($, 0, "ComponentsTab", tt, F), a($, 1, F);
+const Zt = {
   id: "components",
   label: "Components",
-  component: Y
+  component: F
 };
-function q({
-  placeholder: t,
-  onInput: e
-}) {
-  return /* @__PURE__ */ n(
-    "input",
-    {
-      type: "text",
-      placeholder: t,
-      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: (o) => {
-        e(o.target.value);
+var nt, ye, gn;
+nt = [x()];
+class P extends (gn = w) {
+  render() {
+    const { placeholder: t, onInput: e } = this.props;
+    return /* @__PURE__ */ o(
+      "input",
+      {
+        type: "text",
+        placeholder: t,
+        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: (n) => {
+          e(n.target.value);
+        }
       }
-    }
-  );
+    );
+  }
 }
-function K({
-  label: t,
-  children: e
-}) {
-  return /* @__PURE__ */ d("div", { class: "border-b border-border", children: [
-    /* @__PURE__ */ n("div", { class: "px-3 py-[4px] text-[9px] text-subtle font-bold tracking-[0.12em] uppercase bg-section border-b border-border", children: t }),
-    e
-  ] });
+ye = b(gn), P = d(ye, 0, "SearchInput", nt, P), a(ye, 1, P);
+var rt, ve, bn;
+rt = [x()];
+class V extends (bn = w) {
+  render() {
+    return /* @__PURE__ */ c("div", { class: "border-b border-border", children: [
+      /* @__PURE__ */ o("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
+    ] });
+  }
+}
+ve = b(bn), V = d(ve, 0, "PanelSection", rt, V), a(ve, 1, V);
+function De(r, t) {
+  const e = t ? ` ${t}` : "", n = Date.now() - r;
+  return n < 1e3 ? `${n.toString()}ms${e}` : n < 6e4 ? `${(n / 1e3).toFixed(1)}s${e}` : `${Math.floor(n / 6e4).toString()}m${e}`;
 }
-function L(t, e) {
-  const o = e ? ` ${e}` : "", r = Date.now() - t;
-  return r < 1e3 ? `${r.toString()}ms${o}` : r < 6e4 ? `${(r / 1e3).toFixed(1)}s${o}` : `${Math.floor(r / 6e4).toString()}m${o}`;
+var ot, ke, xn;
+ot = [x()];
+class ee extends (xn = w) {
+  render() {
+    const { entry: t } = this.props;
+    return /* @__PURE__ */ o(X, { width: "260px", children: /* @__PURE__ */ o(V, { label: "History", children: /* @__PURE__ */ c("div", { class: "overflow-y-auto", children: [
+      [...t.history].reverse().map((e, n) => /* @__PURE__ */ c(
+        "div",
+        {
+          class: "px-3 py-2 border-b border-border flex justify-between items-center gap-3",
+          children: [
+            /* @__PURE__ */ o("span", { class: "font-mono text-[11px] text-text truncate", children: Ee(e.value) }),
+            /* @__PURE__ */ o("span", { class: "text-[10px] text-subtle shrink-0 tabular-nums", children: De(e.timestamp, "ago") })
+          ]
+        },
+        String(n)
+      )),
+      t.history.length === 0 && /* @__PURE__ */ o("p", { class: "px-3 py-6 text-[11px] text-subtle text-center", children: "No history yet." })
+    ] }) }) });
+  }
 }
-function Z({ entry: t }) {
-  return /* @__PURE__ */ n(A, { width: "260px", children: /* @__PURE__ */ n(K, { label: "History", children: /* @__PURE__ */ d("div", { class: "overflow-y-auto", children: [
-    [...t.history].reverse().map((e, o) => /* @__PURE__ */ d(
+ke = b(xn), ee = d(ke, 0, "SignalDetail", ot, ee), a(ke, 1, ee);
+var it, ze, mn;
+it = [x()];
+class te extends (mn = w) {
+  render() {
+    const { entry: t, selected: e, onClick: n } = this.props;
+    return /* @__PURE__ */ c(
       "div",
       {
-        class: "px-3 py-2 border-b border-border flex justify-between items-center gap-3",
+        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 ${e ? "bg-selected" : "hover:bg-section"}`,
         children: [
-          /* @__PURE__ */ n("span", { class: "font-mono text-[11px] text-text truncate", children: M(e.value) }),
-          /* @__PURE__ */ n("span", { class: "text-[10px] text-subtle shrink-0 tabular-nums", children: L(e.timestamp, "ago") })
+          e && /* @__PURE__ */ o("span", { class: "absolute left-0 top-0 bottom-0 w-[2px] bg-accent rounded-r" }),
+          /* @__PURE__ */ o("span", { class: "text-accent font-mono text-[11px] truncate pl-1", children: t.label }),
+          /* @__PURE__ */ o("span", { class: "text-muted text-[11px] truncate", children: t.componentName }),
+          /* @__PURE__ */ o("span", { class: "text-text font-mono text-[11px] truncate", children: Ee(t.value) }),
+          /* @__PURE__ */ o("span", { class: "text-subtle text-[10px] text-right tabular-nums", children: De(t.changedAt, "ago") })
         ]
-      },
-      String(o)
-    )),
-    t.history.length === 0 && /* @__PURE__ */ n("p", { class: "px-3 py-6 text-[11px] text-subtle text-center", children: "No history yet." })
-  ] }) }) });
-}
-function Q({
-  entry: t,
-  selected: e,
-  onClick: o
-}) {
-  return /* @__PURE__ */ d(
-    "div",
-    {
-      onClick: o,
-      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 ${e ? "bg-selected" : "hover:bg-section"}`,
-      children: [
-        e && /* @__PURE__ */ n("span", { class: "absolute left-0 top-0 bottom-0 w-[2px] bg-accent rounded-r" }),
-        /* @__PURE__ */ n("span", { class: "text-accent font-mono text-[11px] truncate pl-1", children: t.label }),
-        /* @__PURE__ */ n("span", { class: "text-muted text-[11px] truncate", children: t.componentName }),
-        /* @__PURE__ */ n("span", { class: "text-text font-mono text-[11px] truncate", children: M(t.value) }),
-        /* @__PURE__ */ n("span", { class: "text-subtle text-[10px] text-right tabular-nums", children: L(t.changedAt, "ago") })
-      ]
-    }
-  );
+      }
+    );
+  }
 }
-function V({ registry: t }) {
-  const e = b(t.getSignals()), o = b(""), r = b(null);
-  let i = [];
-  return C(() => {
-    i = [
-      t.bus.on("signal:registered", () => {
-        e.set(t.getSignals());
+ze = b(mn), te = d(ze, 0, "SignalRow", it, te), a(ze, 1, te);
+var st, at, lt, ct, dt, S;
+dt = [x()];
+class E extends (ct = R, lt = [M()], at = [M()], st = [M()], ct) {
+  constructor() {
+    super(...arguments);
+    f(this, "signals", a(S, 8, this, [])), a(S, 11, this);
+    f(this, "search", a(S, 12, this, "")), a(S, 15, this);
+    f(this, "selectedId", a(S, 16, this, null)), a(S, 19, this);
+    f(this, "_handlers", []);
+  }
+  get registry() {
+    return this.props.registry;
+  }
+  onMount() {
+    this.signals = this.registry.getSignals(), this._handlers = [
+      this.registry.bus.on("signal:registered", () => {
+        this.signals = this.registry.getSignals();
       }),
-      t.bus.on("signal:changed", () => {
-        e.set(t.getSignals());
+      this.registry.bus.on("signal:changed", () => {
+        this.signals = this.registry.getSignals();
       })
     ];
-  }), I(() => {
-    i.forEach((a) => {
-      a();
+  }
+  onUnmount() {
+    this._handlers.forEach((e) => {
+      e();
     });
-  }), /* @__PURE__ */ d("div", { class: "flex h-full overflow-hidden", children: [
-    /* @__PURE__ */ d("div", { class: "flex-1 flex flex-col overflow-hidden min-w-0", children: [
-      /* @__PURE__ */ n("div", { class: "px-3 py-2 border-b border-border bg-bg shrink-0", children: /* @__PURE__ */ n(
-        q,
-        {
-          placeholder: "Search signals…",
-          onInput: (a) => {
-            o.set(a);
-          }
-        }
-      ) }),
-      /* @__PURE__ */ d("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__ */ n("span", { children: "Signal" }),
-        /* @__PURE__ */ n("span", { children: "Component" }),
-        /* @__PURE__ */ n("span", { children: "Value" }),
-        /* @__PURE__ */ n("span", { children: "Age" })
-      ] }),
-      /* @__PURE__ */ n("div", { class: "flex-1 overflow-y-auto", children: () => {
-        const a = o().toLowerCase(), l = a === "" ? e() : e().filter(
-          (s) => s.label.toLowerCase().includes(a) || s.componentName.toLowerCase().includes(a)
-        );
-        return l.length === 0 ? /* @__PURE__ */ n(
-          z,
+  }
+  render() {
+    return /* @__PURE__ */ c("div", { class: "flex h-full overflow-hidden", children: [
+      /* @__PURE__ */ c("div", { class: "flex-1 flex flex-col overflow-hidden min-w-0", children: [
+        /* @__PURE__ */ o("div", { class: "px-3 py-2 border-b border-border bg-bg shrink-0", children: /* @__PURE__ */ o(
+          P,
           {
-            message: e().length === 0 ? "No signals tracked. Add @Debug() on top of @State() properties." : "No signals match your search."
+            placeholder: "Search signals…",
+            onInput: (e) => {
+              this.search = e;
+            }
           }
-        ) : l.map((s) => /* @__PURE__ */ n(
-          Q,
-          {
-            entry: s,
-            selected: r() === s.id,
-            onClick: () => {
-              r.update((u) => u === s.id ? null : s.id);
+        ) }),
+        /* @__PURE__ */ c("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__ */ o("span", { children: "Signal" }),
+          /* @__PURE__ */ o("span", { children: "Component" }),
+          /* @__PURE__ */ o("span", { children: "Value" }),
+          /* @__PURE__ */ o("span", { children: "Age" })
+        ] }),
+        /* @__PURE__ */ o("div", { class: "flex-1 overflow-y-auto", children: () => {
+          const e = this.search.toLowerCase(), n = e === "" ? this.signals : this.signals.filter(
+            (i) => i.label.toLowerCase().includes(e) || i.componentName.toLowerCase().includes(e)
+          );
+          return n.length === 0 ? /* @__PURE__ */ o(
+            H,
+            {
+              message: this.signals.length === 0 ? "No signals tracked. Add @Debug() on top of @State() properties." : "No signals match your search."
             }
-          },
-          s.id
-        ));
-      } })
-    ] }),
-    () => {
-      const a = r(), l = a ? e().find((s) => s.id === a) ?? null : null;
-      return l ? /* @__PURE__ */ n(Z, { entry: l }) : null;
-    }
-  ] });
+          ) : n.map((i) => /* @__PURE__ */ o(
+            te,
+            {
+              entry: i,
+              selected: this.selectedId === i.id,
+              onClick: () => {
+                this.selectedId = this.selectedId === i.id ? null : i.id;
+              }
+            },
+            i.id
+          ));
+        } })
+      ] }),
+      () => {
+        const e = this.selectedId, n = e ? this.signals.find((i) => i.id === e) ?? null : null;
+        return n ? /* @__PURE__ */ o(ee, { entry: n }) : null;
+      }
+    ] });
+  }
 }
-const ee = {
+S = b(ct), d(S, 5, "signals", lt, E), d(S, 5, "search", at, E), d(S, 5, "selectedId", st, E), E = d(S, 0, "SignalsTab", dt, E), a(S, 1, E);
+const Qt = {
   id: "signals",
   label: "Signals",
-  component: V
-}, te = {
+  component: E
+}, Pt = {
   "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)]" }
-}, ne = [
+}, Vt = [
   { value: "all", label: "All" },
   { value: "signal:change", label: "Signals" },
   { value: "component:render", label: "Renders" },
@@ -484,568 +570,676 @@ const ee = {
   { value: "lifecycle", label: "Lifecycle" },
   { value: "method:call", label: "Methods" }
 ];
-function oe({ type: t }) {
-  const e = te[t];
-  return /* @__PURE__ */ n(
-    "span",
-    {
-      class: `text-[9px] px-[6px] py-[2px] rounded font-bold uppercase tracking-[0.07em] shrink-0 ${e.cls}`,
-      children: e.label
-    }
-  );
-}
-function re({ entry: t }) {
-  const e = b(!1), o = Object.keys(t.data).length > 0;
-  return /* @__PURE__ */ d("div", { class: "border-b border-border", children: [
-    /* @__PURE__ */ d(
-      "div",
+var pt, Me, fn;
+pt = [x()];
+class ne extends (fn = w) {
+  render() {
+    const t = Pt[this.props.type];
+    return /* @__PURE__ */ o(
+      "span",
       {
-        onClick: () => {
-          o && e.update((r) => !r);
-        },
-        class: `flex items-center gap-2 px-3 py-2 transition-colors duration-100 ${o ? "cursor-pointer hover:bg-section" : "cursor-default"}`,
-        children: [
-          /* @__PURE__ */ n("span", { class: "text-subtle text-[10px] w-10 shrink-0 text-right tabular-nums font-mono", children: L(t.timestamp) }),
-          /* @__PURE__ */ n(oe, { type: t.type }),
-          /* @__PURE__ */ n("span", { class: "flex-1 text-text font-mono text-[11px] truncate", children: t.label }),
-          o && /* @__PURE__ */ n("span", { class: "text-subtle text-[11px] shrink-0 w-4 text-center", children: () => e() ? "▾" : "▸" })
-        ]
+        class: `text-[9px] px-[6px] py-[2px] rounded font-bold uppercase tracking-[0.07em] shrink-0 ${t.cls}`,
+        children: t.label
       }
-    ),
-    () => e() && o ? /* @__PURE__ */ n("div", { class: "px-3 py-2 pl-[56px] font-mono text-[11px] bg-section border-t border-border", children: Object.entries(t.data).map(([r, i]) => /* @__PURE__ */ d("div", { class: "flex gap-3 py-[3px]", children: [
-      /* @__PURE__ */ d("span", { class: "text-accent shrink-0", children: [
-        r,
-        ":"
-      ] }),
-      /* @__PURE__ */ n("span", { class: "text-muted truncate", children: typeof i == "object" ? JSON.stringify(i) : String(i) })
-    ] }, r)) }) : null
-  ] });
+    );
+  }
 }
-function ie({ registry: t }) {
-  const e = b(t.getTimeline()), o = b("all"), r = b(!1);
-  let i = [];
-  return C(() => {
-    i = [
-      t.bus.on("timeline:push", () => {
-        r() || e.set(t.getTimeline());
-      })
-    ];
-  }), I(() => {
-    i.forEach((a) => {
-      a();
-    });
-  }), /* @__PURE__ */ d("div", { class: "flex flex-col h-full overflow-hidden", children: [
-    /* @__PURE__ */ d("div", { class: "flex items-center gap-[3px] px-2 py-2 border-b border-border bg-bg shrink-0 flex-wrap", children: [
-      ne.map((a) => /* @__PURE__ */ n(
-        "button",
-        {
-          onClick: () => {
-            o.set(a.value);
-          },
-          class: () => o() === a.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: a.label
-        },
-        a.value
-      )),
-      /* @__PURE__ */ n("div", { class: "flex-1" }),
-      /* @__PURE__ */ n(
-        "button",
+Me = b(fn), ne = d(Me, 0, "Badge", pt, ne), a(Me, 1, ne);
+var ut, ht, gt, O;
+gt = [x()];
+class q extends (ht = R, ut = [M()], ht) {
+  constructor() {
+    super(...arguments);
+    f(this, "open", a(O, 8, this, !1)), a(O, 11, this);
+  }
+  render() {
+    const { entry: e } = this.props, n = Object.keys(e.data).length > 0;
+    return /* @__PURE__ */ c("div", { class: "border-b border-border", children: [
+      /* @__PURE__ */ c(
+        "div",
         {
           onClick: () => {
-            r() && e.set(t.getTimeline()), r.update((a) => !a);
+            n && (this.open = !this.open);
           },
-          class: () => `text-[11px] px-2 py-[3px] rounded cursor-pointer font-sans border border-border transition-colors duration-150 ${r() ? "text-warn border-warn" : "text-muted hover:text-text"}`,
-          children: () => r() ? "Resume" : "Pause"
+          class: `flex items-center gap-2 px-3 py-2 transition-colors duration-100 ${n ? "cursor-pointer hover:bg-section" : "cursor-default"}`,
+          children: [
+            /* @__PURE__ */ o("span", { class: "text-subtle text-[10px] w-10 shrink-0 text-right tabular-nums font-mono", children: De(e.timestamp) }),
+            /* @__PURE__ */ o(ne, { type: e.type }),
+            /* @__PURE__ */ o("span", { class: "flex-1 text-text font-mono text-[11px] truncate", children: e.label }),
+            n && /* @__PURE__ */ o("span", { class: "text-subtle text-[11px] shrink-0 w-4 text-center", children: () => this.open ? "▾" : "▸" })
+          ]
         }
       ),
-      /* @__PURE__ */ n(
-        "button",
-        {
-          onClick: () => {
-            e.set([]);
+      () => this.open && n ? /* @__PURE__ */ o("div", { class: "px-3 py-2 pl-[56px] font-mono text-[11px] bg-section border-t border-border", children: Object.entries(e.data).map(([i, s]) => /* @__PURE__ */ c("div", { class: "flex gap-3 py-[3px]", children: [
+        /* @__PURE__ */ c("span", { class: "text-accent shrink-0", children: [
+          i,
+          ":"
+        ] }),
+        /* @__PURE__ */ o("span", { class: "text-muted truncate", children: typeof s == "object" ? JSON.stringify(s) : String(s) })
+      ] }, i)) }) : null
+    ] });
+  }
+}
+O = b(ht), d(O, 5, "open", ut, q), q = d(O, 0, "TimelineRow", gt, q), a(O, 1, q);
+var bt, xt, mt, ft, wt, I;
+wt = [x()];
+class D extends (ft = R, mt = [M()], xt = [M()], bt = [M()], ft) {
+  constructor() {
+    super(...arguments);
+    f(this, "entries", a(I, 8, this, [])), a(I, 11, this);
+    f(this, "filter", a(I, 12, this, "all")), a(I, 15, this);
+    f(this, "paused", a(I, 16, this, !1)), a(I, 19, this);
+    f(this, "_handlers", []);
+  }
+  get registry() {
+    return this.props.registry;
+  }
+  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__ */ c("div", { class: "flex flex-col h-full overflow-hidden", children: [
+      /* @__PURE__ */ c("div", { class: "flex items-center gap-[3px] px-2 py-2 border-b border-border bg-bg shrink-0 flex-wrap", children: [
+        Vt.map((e) => /* @__PURE__ */ o(
+          "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
           },
-          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__ */ n("div", { class: "flex-1 overflow-y-auto", children: () => {
-      const a = o(), l = a === "all" ? e() : e().filter(
-        (s) => s.type === a || a === "component:mount" && s.type === "component:unmount"
-      );
-      return l.length === 0 ? /* @__PURE__ */ n(z, { message: "No events yet. Interact with your app to see the timeline." }) : [...l].reverse().map((s) => /* @__PURE__ */ n(re, { entry: s }, s.id));
-    } })
-  ] });
+          e.value
+        )),
+        /* @__PURE__ */ o("div", { class: "flex-1" }),
+        /* @__PURE__ */ o(
+          "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__ */ o(
+          "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__ */ o("div", { class: "flex-1 overflow-y-auto", children: () => {
+        const e = this.filter, n = e === "all" ? this.entries : this.entries.filter(
+          (i) => i.type === e || e === "component:mount" && i.type === "component:unmount"
+        );
+        return n.length === 0 ? /* @__PURE__ */ o(H, { message: "No events yet. Interact with your app to see the timeline." }) : [...n].reverse().map((i) => /* @__PURE__ */ o(q, { entry: i }, i.id));
+      } })
+    ] });
+  }
 }
-const se = {
+I = b(ft), d(I, 5, "entries", mt, D), d(I, 5, "filter", xt, D), d(I, 5, "paused", bt, D), D = d(I, 0, "TimelineTab", wt, D), a(I, 1, D);
+const en = {
   id: "timeline",
   label: "Timeline",
-  component: ie
-}, ae = '*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}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{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}: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,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-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]),::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}';
-function le() {
-  return /* @__PURE__ */ d(
-    "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__ */ n("circle", { cx: "12", cy: "12", r: "1" }),
-        /* @__PURE__ */ n("circle", { cx: "12", cy: "5", r: "1" }),
-        /* @__PURE__ */ n("circle", { cx: "12", cy: "19", r: "1" })
-      ]
-    }
-  );
+  component: D
+}, tn = '*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}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{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}: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,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-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]),::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}';
+var yt, Ce, wn;
+yt = [x()];
+class re extends (wn = w) {
+  render() {
+    return /* @__PURE__ */ c(
+      "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__ */ o("circle", { cx: "12", cy: "12", r: "1" }),
+          /* @__PURE__ */ o("circle", { cx: "12", cy: "5", r: "1" }),
+          /* @__PURE__ */ o("circle", { cx: "12", cy: "19", r: "1" })
+        ]
+      }
+    );
+  }
 }
-function ce() {
-  return /* @__PURE__ */ d(
-    "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__ */ n("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
-        /* @__PURE__ */ n("path", { d: "M3 15h18" })
-      ]
-    }
-  );
+Ce = b(wn), re = d(Ce, 0, "EllipsisVerticalIcon", yt, re), a(Ce, 1, re);
+var vt, Se, yn;
+vt = [x()];
+class oe extends (yn = w) {
+  render() {
+    return /* @__PURE__ */ c(
+      "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__ */ o("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+          /* @__PURE__ */ o("path", { d: "M3 15h18" })
+        ]
+      }
+    );
+  }
 }
-function de() {
-  return /* @__PURE__ */ d(
-    "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__ */ n("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
-        /* @__PURE__ */ n("path", { d: "M9 3v18" })
-      ]
-    }
-  );
+Se = b(yn), oe = d(Se, 0, "PanelBottomIcon", vt, oe), a(Se, 1, oe);
+var kt, Ie, vn;
+kt = [x()];
+class ie extends (vn = w) {
+  render() {
+    return /* @__PURE__ */ c(
+      "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__ */ o("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+          /* @__PURE__ */ o("path", { d: "M9 3v18" })
+        ]
+      }
+    );
+  }
 }
-function ue() {
-  return /* @__PURE__ */ d(
-    "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__ */ n("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
-        /* @__PURE__ */ n("path", { d: "M15 3v18" })
-      ]
-    }
-  );
+Ie = b(vn), ie = d(Ie, 0, "PanelLeftIcon", kt, ie), a(Ie, 1, ie);
+var zt, Le, kn;
+zt = [x()];
+class se extends (kn = w) {
+  render() {
+    return /* @__PURE__ */ c(
+      "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__ */ o("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+          /* @__PURE__ */ o("path", { d: "M15 3v18" })
+        ]
+      }
+    );
+  }
 }
-function pe() {
-  return /* @__PURE__ */ d(
-    "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__ */ n("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
-        /* @__PURE__ */ n("path", { d: "M3 9h18" })
-      ]
-    }
-  );
+Le = b(kn), se = d(Le, 0, "PanelRightIcon", zt, se), a(Le, 1, se);
+var Mt, _e, zn;
+Mt = [x()];
+class ae extends (zn = w) {
+  render() {
+    return /* @__PURE__ */ c(
+      "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__ */ o("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+          /* @__PURE__ */ o("path", { d: "M3 9h18" })
+        ]
+      }
+    );
+  }
 }
-function he() {
-  return /* @__PURE__ */ d(
-    "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__ */ n("path", { d: "M18 6 6 18" }),
-        /* @__PURE__ */ n("path", { d: "m6 6 12 12" })
-      ]
-    }
-  );
+_e = b(zn), ae = d(_e, 0, "PanelTopIcon", Mt, ae), a(_e, 1, ae);
+var Ct, $e, Mn;
+Ct = [x()];
+class le extends (Mn = w) {
+  render() {
+    return /* @__PURE__ */ c(
+      "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__ */ o("path", { d: "M18 6 6 18" }),
+          /* @__PURE__ */ o("path", { d: "m6 6 12 12" })
+        ]
+      }
+    );
+  }
 }
-function S({
-  title: t,
-  active: e,
-  icon: o,
-  onClick: r
-}) {
-  return /* @__PURE__ */ n(
-    "button",
-    {
-      title: t,
-      onClick: r,
-      class: () => `w-[22px] h-[22px] flex items-center justify-center rounded-md text-[11px] cursor-pointer transition-colors duration-150 ${(typeof e == "function" ? e() : e) ? "text-accent bg-soft color-white" : "text-subtle hover:color-muted hover:bg-section"}`,
-      children: /* @__PURE__ */ n(o, {})
-    }
-  );
+$e = b(Mn), le = d($e, 0, "XIcon", Ct, le), a($e, 1, le);
+var St, je, Cn;
+St = [x()];
+class T extends (Cn = w) {
+  render() {
+    const { title: t, active: e, icon: n, onClick: i } = this.props;
+    return /* @__PURE__ */ o(
+      "button",
+      {
+        title: t,
+        onClick: i,
+        class: () => `w-[22px] h-[22px] flex items-center justify-center rounded-md text-[11px] cursor-pointer transition-colors duration-150 ${(typeof e == "function" ? e() : e) ? "text-accent bg-soft color-white" : "text-subtle hover:color-muted hover:bg-section"}`,
+        children: /* @__PURE__ */ o(n, {})
+      }
+    );
+  }
 }
-const _ = 180, be = 300, E = 240, ge = 380, xe = {
-  bottom: ce,
-  top: pe,
-  left: de,
-  right: ue
+je = b(Cn), T = d(je, 0, "IconButton", St, T), a(je, 1, T);
+const Te = 180, nn = 300, Re = 240, rn = 380, on = {
+  bottom: oe,
+  top: ae,
+  left: ie,
+  right: se
 };
-function me({ plugins: t, registry: e, onClose: o }) {
-  const r = b(t[0]?.id ?? ""), i = b("bottom"), a = b(!1), l = b(be), s = b(ge);
-  return /* @__PURE__ */ d(
-    "div",
-    {
-      class: () => {
-        const c = i();
-        return c === "top" ? "flex flex-col-reverse fixed top-0 left-0 w-full z-[2147483647]" : c === "left" ? "flex flex-row-reverse fixed left-0 top-0 h-screen z-[2147483647]" : c === "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__ */ n(
-          "div",
-          {
-            class: () => {
-              const c = i();
-              return c === "bottom" || c === "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: (c) => {
-              c.preventDefault();
-              const h = c.clientX, p = c.clientY, x = i(), m = x === "bottom" || x === "top" ? l() : s(), D = (w) => {
-                const y = i();
-                y === "bottom" ? l.set(
-                  Math.max(
-                    _,
-                    Math.min(
-                      window.innerHeight * 0.85,
-                      m + (p - w.clientY)
-                    )
-                  )
-                ) : y === "top" ? l.set(
-                  Math.max(
-                    _,
-                    Math.min(
-                      window.innerHeight * 0.85,
-                      m + (w.clientY - p)
-                    )
-                  )
-                ) : y === "left" ? s.set(
-                  Math.max(
-                    E,
-                    Math.min(
-                      window.innerWidth * 0.6,
-                      m + (w.clientX - h)
-                    )
-                  )
-                ) : s.set(
-                  Math.max(
-                    E,
-                    Math.min(
-                      window.innerWidth * 0.6,
-                      m + (h - w.clientX)
-                    )
-                  )
-                );
-              }, $ = () => {
-                document.removeEventListener("mousemove", D), document.removeEventListener("mouseup", $);
-              };
-              document.addEventListener("mousemove", D), document.addEventListener("mouseup", $);
+var It, Lt, _t, $t, jt, Et, Dt, y;
+Dt = [x()];
+class j extends (Et = R, jt = [M()], $t = [M()], _t = [M()], Lt = [M()], It = [M()], Et) {
+  constructor() {
+    super(...arguments);
+    f(this, "activeTab", a(y, 8, this, "")), a(y, 11, this);
+    f(this, "dock", a(y, 12, this, "bottom")), a(y, 15, this);
+    f(this, "dockMenuOpen", a(y, 16, this, !1)), a(y, 19, this);
+    f(this, "bottomSize", a(y, 20, this, nn)), a(y, 23, this);
+    f(this, "vertSize", a(y, 24, this, rn)), a(y, 27, this);
+  }
+  get p() {
+    return this.props;
+  }
+  onBeforeMount() {
+    this.activeTab = this.p.plugins[0]?.id ?? "";
+  }
+  handleMouseDown(e) {
+    e.preventDefault();
+    const n = e.clientX, i = e.clientY, s = this.dock, l = s === "bottom" || s === "top" ? this.bottomSize : this.vertSize, p = (h) => {
+      const m = this.dock;
+      m === "bottom" ? this.bottomSize = Math.max(
+        Te,
+        Math.min(
+          window.innerHeight * 0.85,
+          l + (i - h.clientY)
+        )
+      ) : m === "top" ? this.bottomSize = Math.max(
+        Te,
+        Math.min(
+          window.innerHeight * 0.85,
+          l + (h.clientY - i)
+        )
+      ) : m === "left" ? this.vertSize = Math.max(
+        Re,
+        Math.min(
+          window.innerWidth * 0.6,
+          l + (h.clientX - n)
+        )
+      ) : this.vertSize = Math.max(
+        Re,
+        Math.min(
+          window.innerWidth * 0.6,
+          l + (n - h.clientX)
+        )
+      );
+    }, g = () => {
+      document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", g);
+    };
+    document.addEventListener("mousemove", p), document.addEventListener("mouseup", g);
+  }
+  render() {
+    const { plugins: e, registry: n, onClose: i } = this.p;
+    return /* @__PURE__ */ c(
+      "div",
+      {
+        class: () => {
+          const s = this.dock;
+          return s === "top" ? "flex flex-col-reverse fixed top-0 left-0 w-full z-[2147483647]" : s === "left" ? "flex flex-row-reverse fixed left-0 top-0 h-screen z-[2147483647]" : s === "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__ */ o(
+            "div",
+            {
+              class: () => {
+                const s = this.dock;
+                return s === "bottom" || s === "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: (s) => {
+                this.handleMouseDown(s);
+              }
             }
-          }
-        ),
-        /* @__PURE__ */ n(
-          "div",
-          {
-            class: () => {
-              const c = i();
-              return c === "top" ? "w-full h-full bg-bg border-b border-border" : c === "left" ? "w-full h-full bg-bg border-r border-border" : c === "right" ? "w-full h-full bg-bg border-l border-border" : "w-full h-full bg-bg border-t border-border";
-            },
-            style: () => {
-              const c = i();
-              return c === "bottom" || c === "top" ? { height: `${l().toString()}px` } : { width: `${s().toString()}px` };
-            },
-            children: /* @__PURE__ */ d("div", { class: "flex flex-col flex-1 w-full h-full overflow-hidden", children: [
-              /* @__PURE__ */ d("div", { class: "flex h-10 items-stretch border-b border-border bg-header shrink-0 px-2 gap-[2px]", children: [
-                /* @__PURE__ */ d("div", { class: "flex items-center gap-[6px] pr-3 mr-[2px] border-r border-border shrink-0", children: [
-                  /* @__PURE__ */ n("img", { class: "h-[13px] w-[13px]", src: N }),
-                  /* @__PURE__ */ n("span", { class: "text-[10px] font-bold text-accent tracking-widest uppercase", children: "praxisjs" })
-                ] }),
-                /* @__PURE__ */ n("div", { class: "flex items-stretch flex-1", children: t.map((c) => /* @__PURE__ */ d(
-                  "button",
-                  {
-                    class: () => r() === c.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: () => {
-                      r.set(c.id);
+          ),
+          /* @__PURE__ */ o(
+            "div",
+            {
+              class: () => {
+                const s = this.dock;
+                return s === "top" ? "w-full h-full bg-bg border-b border-border" : s === "left" ? "w-full h-full bg-bg border-r border-border" : s === "right" ? "w-full h-full bg-bg border-l border-border" : "w-full h-full bg-bg border-t border-border";
+              },
+              style: () => {
+                const s = this.dock;
+                return s === "bottom" || s === "top" ? { height: `${this.bottomSize.toString()}px` } : { width: `${this.vertSize.toString()}px` };
+              },
+              children: /* @__PURE__ */ c("div", { class: "flex flex-col flex-1 w-full h-full overflow-hidden", children: [
+                /* @__PURE__ */ c("div", { class: "flex h-10 items-stretch border-b border-border bg-header shrink-0 px-2 gap-[2px]", children: [
+                  /* @__PURE__ */ c("div", { class: "flex items-center gap-[6px] pr-3 mr-[2px] border-r border-border shrink-0", children: [
+                    /* @__PURE__ */ o("img", { class: "h-[13px] w-[13px]", src: At }),
+                    /* @__PURE__ */ o("span", { class: "text-[10px] font-bold text-accent tracking-widest uppercase", children: "praxisjs" })
+                  ] }),
+                  /* @__PURE__ */ o("div", { class: "flex items-stretch flex-1", children: e.map((s) => /* @__PURE__ */ c(
+                    "button",
+                    {
+                      class: () => this.activeTab === s.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 = s.id;
+                      },
+                      children: [
+                        s.label,
+                        () => this.activeTab === s.id ? /* @__PURE__ */ o("span", { class: "absolute bottom-0 left-0 right-0 h-[2px] bg-accent" }) : null
+                      ]
                     },
-                    children: [
-                      c.label,
-                      () => r() === c.id ? /* @__PURE__ */ n("span", { class: "absolute bottom-0 left-0 right-0 h-[2px] bg-accent" }) : null
-                    ]
-                  },
-                  c.id
-                )) }),
-                /* @__PURE__ */ d("div", { class: "flex items-center gap-[2px] shrink-0", children: [
-                  /* @__PURE__ */ d("div", { class: "relative", children: [
-                    /* @__PURE__ */ n(
-                      S,
-                      {
-                        title: "Dock position",
-                        icon: le,
-                        active: () => a(),
-                        onClick: () => {
-                          a.set(!a());
-                        }
-                      }
-                    ),
-                    () => a() ? /* @__PURE__ */ n("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(
-                      (c) => /* @__PURE__ */ n(
-                        S,
+                    s.id
+                  )) }),
+                  /* @__PURE__ */ c("div", { class: "flex items-center gap-[2px] shrink-0", children: [
+                    /* @__PURE__ */ c("div", { class: "relative", children: [
+                      /* @__PURE__ */ o(
+                        T,
                         {
-                          title: `Dock ${c}`,
-                          active: () => i() === c,
-                          icon: xe[c],
+                          title: "Dock position",
+                          icon: re,
+                          active: () => this.dockMenuOpen,
                           onClick: () => {
-                            i.set(c), a.set(!1);
+                            this.dockMenuOpen = !this.dockMenuOpen;
                           }
-                        },
-                        c
-                      )
-                    ) }) : null
-                  ] }),
-                  /* @__PURE__ */ n("div", { class: "w-px h-3 bg-border mx-1" }),
-                  /* @__PURE__ */ n(S, { title: "Close", icon: he, onClick: o })
-                ] })
-              ] }),
-              /* @__PURE__ */ n("div", { class: "flex-1 overflow-hidden flex flex-col", children: () => {
-                const h = t.find((p) => p.id === r())?.component;
-                return h ? /* @__PURE__ */ n(h, { registry: e }) : null;
-              } })
-            ] })
-          }
-        )
-      ]
-    }
-  );
+                        }
+                      ),
+                      () => this.dockMenuOpen ? /* @__PURE__ */ o("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(
+                        (s) => /* @__PURE__ */ o(
+                          T,
+                          {
+                            title: `Dock ${s}`,
+                            active: () => this.dock === s,
+                            icon: on[s],
+                            onClick: () => {
+                              this.dock = s, this.dockMenuOpen = !1;
+                            }
+                          },
+                          s
+                        )
+                      ) }) : null
+                    ] }),
+                    /* @__PURE__ */ o("div", { class: "w-px h-3 bg-border mx-1" }),
+                    /* @__PURE__ */ o(T, { title: "Close", icon: le, onClick: i })
+                  ] })
+                ] }),
+                /* @__PURE__ */ o("div", { class: "flex-1 overflow-hidden flex flex-col", children: () => {
+                  const l = e.find((p) => p.id === this.activeTab)?.component;
+                  return l ? /* @__PURE__ */ o(l, { registry: n }) : null;
+                } })
+              ] })
+            }
+          )
+        ]
+      }
+    );
+  }
 }
-const fe = [
-  ee,
-  J,
-  se
+y = b(Et), d(y, 5, "activeTab", jt, j), d(y, 5, "dock", $t, j), d(y, 5, "dockMenuOpen", _t, j), d(y, 5, "bottomSize", Lt, j), d(y, 5, "vertSize", It, j), j = d(y, 0, "Panel", Dt, j), a(y, 1, j);
+const sn = [
+  Qt,
+  Zt,
+  en
 ];
-function B({
-  plugins: t,
-  registry: e
-}) {
-  const o = b(!1);
-  return /* @__PURE__ */ n("div", { children: () => o() ? /* @__PURE__ */ n(
-    me,
-    {
-      plugins: t,
-      registry: e,
-      onClose: () => {
-        o.set(!1);
+var Nt, Ut, Ot, A;
+Ot = [x()];
+class B extends (Ut = R, Nt = [M()], Ut) {
+  constructor() {
+    super(...arguments);
+    f(this, "open", a(A, 8, this, !1)), a(A, 11, this);
+  }
+  get p() {
+    return this.props;
+  }
+  render() {
+    const { plugins: e, registry: n } = this.p;
+    return /* @__PURE__ */ o("div", { children: () => this.open ? /* @__PURE__ */ o(
+      j,
+      {
+        plugins: e,
+        registry: n,
+        onClose: () => {
+          this.open = !1;
+        }
       }
-    }
-  ) : /* @__PURE__ */ d(
-    "button",
-    {
-      onClick: () => {
-        o.set(!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__ */ n("img", { class: "h-[13px] w-[13px]", src: N }),
-        /* @__PURE__ */ n("span", { class: "text-[10px] font-bold text-accent tracking-widest uppercase", children: "devtools" })
-      ]
-    }
-  ) });
+    ) : /* @__PURE__ */ c(
+      "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__ */ o("img", { class: "h-[13px] w-[13px]", src: At }),
+          /* @__PURE__ */ o("span", { class: "text-[10px] font-bold text-accent tracking-widest uppercase", children: "devtools" })
+        ]
+      }
+    ) });
+  }
 }
-const Se = {
-  plugins: [...fe],
+A = b(Ut), d(A, 5, "open", Nt, B), B = d(A, 0, "DevToolsApp", Ot, B), a(A, 1, B);
+const En = {
+  plugins: [...sn],
   host: null,
   cleanup: null,
-  init(t = {}) {
+  init(r = {}) {
     if (this.host) return;
-    t.plugins && (this.plugins = t.plugins), this.plugins.forEach((a) => a.setup?.(g.instance));
-    const e = document.createElement("div");
-    e.id = "praxisjs-devtools", document.body.appendChild(e), this.host = e;
-    const o = e.attachShadow({ mode: "open" }), r = document.createElement("style");
-    r.textContent = ae + F, o.appendChild(r);
+    r.plugins && (this.plugins = r.plugins), this.plugins.forEach((s) => s.setup?.(v.instance));
+    const t = document.createElement("div");
+    t.id = "praxisjs-devtools", document.body.appendChild(t), this.host = t;
+    const e = t.attachShadow({ mode: "open" }), n = document.createElement("style");
+    n.textContent = tn + Jt, e.appendChild(n);
     const i = document.createElement("div");
-    o.appendChild(i), this.cleanup = j(
-      /* @__PURE__ */ n(B, { plugins: this.plugins, registry: g.instance }),
+    e.appendChild(i), this.cleanup = He(
+      () => /* @__PURE__ */ o(B, { plugins: this.plugins, registry: v.instance }),
       i
     );
   },
-  registerPlugin(t) {
-    this.plugins.find((e) => e.id === t.id) || (t.setup?.(g.instance), this.plugins.push(t), this.remount());
+  registerPlugin(r) {
+    this.plugins.find((t) => t.id === r.id) || (r.setup?.(v.instance), this.plugins.push(r), this.remount());
   },
   get registry() {
-    return g.instance;
+    return v.instance;
   },
   remount() {
     if (!this.host) return;
-    const e = this.host.shadowRoot.querySelector("div:last-child");
-    this.cleanup?.(), this.cleanup = j(
-      /* @__PURE__ */ n(B, { plugins: this.plugins, registry: g.instance }),
-      e
+    const t = this.host.shadowRoot.querySelector("div:last-child");
+    this.cleanup?.(), this.cleanup = He(
+      () => /* @__PURE__ */ o(B, { plugins: this.plugins, registry: v.instance }),
+      t
     );
   }
 };
-function we(t) {
-  return typeof t == "function" && typeof t.subscribe == "function" && !("set" in t);
+function We(r) {
+  return typeof r == "function" && typeof r.subscribe == "function" && !("set" in r);
 }
-function Ce(t = {}) {
-  return function(e, o, r) {
-    const i = e.constructor.name, a = t.label ?? o;
-    if (r && typeof r.value == "function") {
-      const u = r.value;
-      r.value = function(...c) {
-        const h = performance.now();
-        let p, x = !1;
+function Dn(r = {}) {
+  return function(e, n) {
+    const i = r.label ?? n.name;
+    if (n.kind === "method") {
+      const s = e;
+      return function(...l) {
+        const p = this.constructor.name, g = performance.now();
+        let h, m = !1;
         try {
-          p = u.apply(this, c);
-        } catch (m) {
-          throw x = !0, p = m, m;
+          h = s.apply(this, l);
+        } catch (u) {
+          throw m = !0, h = u, u;
         } finally {
-          const m = performance.now() - h;
-          g.instance.recordMethodCall(
+          const u = performance.now() - g;
+          v.instance.recordMethodCall(
             this,
-            a,
-            c,
-            x ? `throw ${String(p)}` : p,
-            m,
-            i
+            i,
+            l,
+            m ? `throw ${String(h)}` : h,
+            u,
+            p
           );
         }
-        return p;
+        return h;
       };
+    }
+    if (n.kind === "getter") {
+      const s = e;
+      n.addInitializer(function() {
+        const l = this, p = l.constructor.name;
+        queueMicrotask(() => {
+          const g = Yt(() => s.call(l));
+          let h = !0, m = g();
+          v.instance.registerSignal(l, i, m, p), g.subscribe((u) => {
+            if (h) {
+              h = !1;
+              return;
+            }
+            v.instance.updateSignal(l, i, u, m), m = u;
+          });
+        });
+      });
       return;
     }
-    const l = Object.getOwnPropertyDescriptor(e, o);
-    if (l?.get && l.set) {
-      const u = l.get.bind(l), c = l.set.bind(l), h = /* @__PURE__ */ new WeakSet();
-      Object.defineProperty(e, o, {
+    n.addInitializer(function() {
+      const s = this, l = n.name, p = s.constructor.name, g = Object.getOwnPropertyDescriptor(s, l);
+      if (g?.get && g.set) {
+        const k = g.get, z = g.set;
+        v.instance.registerSignal(
+          s,
+          i,
+          k.call(s),
+          p
+        ), Object.defineProperty(s, l, {
+          get() {
+            return k.call(this);
+          },
+          set(_) {
+            const U = k.call(this);
+            z.call(this, _), v.instance.updateSignal(this, i, _, U);
+          },
+          enumerable: !0,
+          configurable: !0
+        });
+        return;
+      }
+      const h = s[l];
+      if (Reflect.deleteProperty(s, l), !We(h)) {
+        h !== void 0 && console.warn(
+          `[PraxisJS DevTools] @Debug() on "${p}.${l}": expected a computed() value but got ${typeof h}. Skipping.`
+        ), s[l] = h;
+        return;
+      }
+      let m;
+      function u(k) {
+        let z = !0, _ = k();
+        const U = k.subscribe((W) => {
+          if (z) {
+            z = !1;
+            return;
+          }
+          v.instance.updateSignal(s, i, W, _), _ = W;
+        });
+        return v.instance.registerSignal(s, i, _, p), U;
+      }
+      m = { computed: h, unsub: u(h) }, Object.defineProperty(s, l, {
         get() {
-          return u.call(this);
+          return m.computed;
         },
-        set(p) {
-          if (!h.has(this))
-            h.add(this), c.call(this, p), g.instance.registerSignal(
-              this,
-              a,
-              p,
-              i
+        set(k) {
+          if (m.unsub(), !We(k)) {
+            console.warn(
+              `[PraxisJS DevTools] @Debug() on "${p}.${l}": expected a computed() value but got ${typeof k}. Skipping.`
             );
-          else {
-            const x = u.call(this);
-            c.call(this, p), g.instance.updateSignal(this, a, p, x);
+            return;
           }
+          m = { computed: k, unsub: u(k) };
         },
         enumerable: !0,
         configurable: !0
       });
-      return;
-    }
-    const s = /* @__PURE__ */ new WeakMap();
-    Object.defineProperty(e, o, {
-      get() {
-        return s.get(this)?.computed;
-      },
-      set(u) {
-        if (s.get(this)?.unsub(), !we(u)) {
-          console.warn(
-            `[PraxisJS DevTools] @Debug() on "${i}.${o}": expected a computed() value but got ${typeof u}. Skipping.`
-          );
-          return;
-        }
-        let c = !0, h = u();
-        const p = u.subscribe((x) => {
-          if (c) {
-            c = !1;
-            return;
-          }
-          g.instance.updateSignal(this, a, x, h), h = x;
-        });
-        s.set(this, { computed: u, unsub: p }), g.instance.registerSignal(this, a, h, i);
-      },
-      enumerable: !0,
-      configurable: !0
     });
   };
 }
-function Ie() {
-  return function(t) {
-    const e = t.name, o = g.instance, r = t.prototype, i = r.render;
-    i && (r.render = function(...s) {
-      const u = performance.now(), c = i.call(this, ...s), h = performance.now() - u;
-      return o.recordRender(this, h), c;
+function Nn() {
+  return function(r, t) {
+    const e = r.name, n = v.instance, i = r.prototype, s = i.render;
+    s && (i.render = function(...g) {
+      const h = performance.now(), m = s.call(this, ...g), u = performance.now() - h;
+      return n.recordRender(this, u), m;
     });
-    const a = r.onBeforeMount;
-    r.onBeforeMount = function(...s) {
-      return o.registerComponent(this, e), o.recordLifecycle(this, "onBeforeMount"), a?.call(this, ...s);
+    const l = i.onBeforeMount;
+    i.onBeforeMount = function(...g) {
+      return n.registerComponent(this, e), n.recordLifecycle(this, "onBeforeMount"), l?.call(this, ...g);
     };
-    const l = [
+    const p = [
       "onMount",
       "onUnmount",
       "onBeforeUpdate",
       "onUpdate",
       "onAfterUpdate"
     ];
-    for (const s of l) {
-      const u = r[s];
-      r[s] = function(...c) {
-        return o.recordLifecycle(this, s), u?.call(this, ...c);
+    for (const g of p) {
+      const h = i[g];
+      i[g] = function(...m) {
+        return n.recordLifecycle(this, g), h?.call(this, ...m);
       };
     }
-    return t;
+    return r;
   };
 }
 export {
-  J as ComponentsPlugin,
-  Ce as Debug,
-  Se as DevTools,
-  g as Registry,
-  ee as SignalsPlugin,
-  se as TimelinePlugin,
-  Ie as Trace
+  Zt as ComponentsPlugin,
+  Dn as Debug,
+  En as DevTools,
+  v as Registry,
+  Qt as SignalsPlugin,
+  en as TimelinePlugin,
+  Nn as Trace
 };