@praxisjs/devtools 0.2.3 → 0.2.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @praxisjs/devtools
 
+## 0.2.4
+
+### Patch Changes
+
+- 9fa8dd1: fix(devtools): guard against undefined `entry` in `TimelineRow`
+
+  `entry` is typed as `TimelineEntry | undefined`, but `render()` accessed `entry.data` unconditionally, which would throw at runtime when no entry is provided. Added an early `null` return guard and a local `const entry = this.entry` binding that also fixes bare `entry` references in JSX that were missing the `this.` prefix.
+
+- Updated dependencies [fe39901]
+- Updated dependencies [fe39901]
+  - @praxisjs/decorators@0.4.2
+  - @praxisjs/core@0.4.1
+  - @praxisjs/runtime@0.2.3
+  - @praxisjs/jsx@0.3.2
+
 ## 0.2.3
 
 ### Patch Changes

package/dist/index.js

@@ -1,33 +1,33 @@
-var Yt = Object.create;
+var Tt = Object.create;
 var pe = Object.defineProperty;
-var Jt = Object.getOwnPropertyDescriptor;
-var Ae = (r, t) => (t = Symbol[r]) ? t : /* @__PURE__ */ Symbol.for("Symbol." + r), J = (r) => {
+var qt = Object.getOwnPropertyDescriptor;
+var Ae = (r, t) => (t = Symbol[r]) ? t : /* @__PURE__ */ Symbol.for("Symbol." + r), q = (r) => {
   throw TypeError(r);
 };
 var Be = (r, t, e) => t in r ? pe(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
 var Ue = (r, t) => pe(r, "name", { value: t, configurable: !0 });
-var b = (r) => [, , , Yt(r?.[Ae("metadata")] ?? null)], He = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], Y = (r) => r !== void 0 && typeof r != "function" ? J("Function expected") : r, qt = (r, t, e, n, i) => ({ kind: He[r], name: t, metadata: n, addInitializer: (a) => e._ ? J("Already initialized") : i.push(Y(a || null)) }), Xt = (r, t) => Be(t, Ae("metadata"), r[3]), s = (r, t, e, n) => {
+var b = (r) => [, , , Tt(r?.[Ae("metadata")] ?? null)], He = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], T = (r) => r !== void 0 && typeof r != "function" ? q("Function expected") : r, Xt = (r, t, e, n, i) => ({ kind: He[r], name: t, metadata: n, addInitializer: (a) => e._ ? q("Already initialized") : i.push(T(a || null)) }), Kt = (r, t) => Be(t, Ae("metadata"), r[3]), s = (r, t, e, n) => {
   for (var i = 0, a = r[t >> 1], c = a && a.length; i < c; i++) t & 1 ? a[i].call(e) : n = a[i].call(e, n);
   return n;
 }, l = (r, t, e, n, i, a) => {
-  var c, p, g, h, f, u = t & 7, k = !!(t & 8), z = !!(t & 16), j = u > 3 ? r.length + 1 : u ? k ? 1 : 2 : 0, F = He[u + 5], W = u > 3 && (r[j - 1] = []), Wt = r[j] || (r[j] = []), $ = u && (!z && !k && (i = i.prototype), u < 5 && (u > 3 || !z) && Jt(u < 4 ? i : { get [e]() {
+  var c, p, g, h, w, u = t & 7, k = !!(t & 8), z = !!(t & 16), j = u > 3 ? r.length + 1 : u ? k ? 1 : 2 : 0, A = He[u + 5], R = u > 3 && (r[j - 1] = []), Rt = r[j] || (r[j] = []), $ = u && (!z && !k && (i = i.prototype), u < 5 && (u > 3 || !z) && qt(u < 4 ? i : { get [e]() {
     return Oe(this, a);
   }, set [e](M) {
     return Fe(this, a, M);
   } }, e));
   u ? z && u < 4 && Ue(a, (u > 2 ? "set " : u > 1 ? "get " : "") + e) : Ue(i, e);
   for (var de = n.length - 1; de >= 0; de--)
-    h = qt(u, e, g = {}, r[3], Wt), u && (h.static = k, h.private = z, f = h.access = { has: z ? (M) => Kt(i, M) : (M) => e in M }, u ^ 3 && (f.get = z ? (M) => (u ^ 1 ? Oe : Zt)(M, i, u ^ 4 ? a : $.get) : (M) => M[e]), u > 2 && (f.set = z ? (M, ue) => Fe(M, i, ue, u ^ 4 ? a : $.set) : (M, ue) => M[e] = ue)), p = (0, n[de])(u ? u < 4 ? z ? a : $[F] : u > 4 ? void 0 : { get: $.get, set: $.set } : i, h), g._ = 1, u ^ 4 || p === void 0 ? Y(p) && (u > 4 ? W.unshift(p) : u ? z ? a = p : $[F] = p : i = p) : typeof p != "object" || p === null ? J("Object expected") : (Y(c = p.get) && ($.get = c), Y(c = p.set) && ($.set = c), Y(c = p.init) && W.unshift(c));
-  return u || Xt(r, i), $ && pe(i, e, $), z ? u ^ 4 ? a : $ : i;
-}, w = (r, t, e) => Be(r, typeof t != "symbol" ? t + "" : t, e), he = (r, t, e) => t.has(r) || J("Cannot " + e), Kt = (r, t) => Object(t) !== t ? J('Cannot use the "in" operator on this value') : r.has(t), Oe = (r, t, e) => (he(r, t, "read from private field"), e ? e.call(r) : t.get(r));
-var Fe = (r, t, e, n) => (he(r, t, "write to private field"), n ? n.call(r, e) : t.set(r, e), e), Zt = (r, t, e) => (he(r, t, "access private method"), e);
+    h = Xt(u, e, g = {}, r[3], Rt), u && (h.static = k, h.private = z, w = h.access = { has: z ? (M) => Zt(i, M) : (M) => e in M }, u ^ 3 && (w.get = z ? (M) => (u ^ 1 ? Oe : Qt)(M, i, u ^ 4 ? a : $.get) : (M) => M[e]), u > 2 && (w.set = z ? (M, ue) => Fe(M, i, ue, u ^ 4 ? a : $.set) : (M, ue) => M[e] = ue)), p = (0, n[de])(u ? u < 4 ? z ? a : $[A] : u > 4 ? void 0 : { get: $.get, set: $.set } : i, h), g._ = 1, u ^ 4 || p === void 0 ? T(p) && (u > 4 ? R.unshift(p) : u ? z ? a = p : $[A] = p : i = p) : typeof p != "object" || p === null ? q("Object expected") : (T(c = p.get) && ($.get = c), T(c = p.set) && ($.set = c), T(c = p.init) && R.unshift(c));
+  return u || Kt(r, i), $ && pe(i, e, $), z ? u ^ 4 ? a : $ : i;
+}, f = (r, t, e) => Be(r, typeof t != "symbol" ? t + "" : t, e), he = (r, t, e) => t.has(r) || q("Cannot " + e), Zt = (r, t) => Object(t) !== t ? q('Cannot use the "in" operator on this value') : r.has(t), Oe = (r, t, e) => (he(r, t, "read from private field"), e ? e.call(r) : t.get(r));
+var Fe = (r, t, e, n) => (he(r, t, "write to private field"), n ? n.call(r, e) : t.set(r, e), e), Qt = (r, t, e) => (he(r, t, "access private method"), e);
 import { jsxs as d, jsx as o } from "@praxisjs/jsx/jsx-runtime";
-import { StatelessComponent as y, StatefulComponent as T } from "@praxisjs/core";
-import { Component as m, State as C, Prop as ce, Emit as Qt } from "@praxisjs/decorators";
+import { StatelessComponent as y, StatefulComponent as J } from "@praxisjs/core";
+import { Component as m, State as C, Prop as Z, Emit as Vt } from "@praxisjs/decorators";
 import { render as Ge } from "@praxisjs/runtime";
-import { computed as Vt } from "@praxisjs/core/internal";
-const Tt = "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", Pt = '*,: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 en {
+import { computed as Pt } from "@praxisjs/core/internal";
+const Jt = "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", en = '*,: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 tn {
   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);
@@ -38,23 +38,23 @@ class en {
     });
   }
 }
-const tn = 200;
-let nn = 0;
-function Re() {
-  return `v${(++nn).toString()}_${Date.now().toString(36)}`;
+const nn = 200;
+let rn = 0;
+function We() {
+  return `v${(++rn).toString()}_${Date.now().toString(36)}`;
 }
 class v {
   static _instance = null;
   static get instance() {
     return v._instance ??= new v(), v._instance;
   }
-  bus = new en();
+  bus = new tn();
   instanceIds = /* @__PURE__ */ new WeakMap();
   signals = /* @__PURE__ */ new Map();
   components = /* @__PURE__ */ new Map();
   timeline = [];
   getInstanceId(t) {
-    return this.instanceIds.has(t) || this.instanceIds.set(t, Re()), this.instanceIds.get(t);
+    return this.instanceIds.has(t) || this.instanceIds.set(t, We()), this.instanceIds.get(t);
   }
   registerSignal(t, e, n, i) {
     const a = this.getInstanceId(t), c = `${a}:${e}`, p = {
@@ -153,16 +153,16 @@ class v {
   }
   pushTimeline(t) {
     const e = {
-      id: Re(),
+      id: We(),
       timestamp: Date.now(),
       ...t
     };
-    this.timeline.push(e), this.timeline.length > tn && this.timeline.shift(), this.bus.emit("timeline:push", e);
+    this.timeline.push(e), this.timeline.length > nn && this.timeline.shift(), this.bus.emit("timeline:push", e);
   }
 }
-var Je, ge, gn;
-Je = [m()];
-class H extends (gn = y) {
+var Te, ge, bn;
+Te = [m()];
+class G extends (bn = y) {
   render() {
     return /* @__PURE__ */ d("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: "—" }),
@@ -170,10 +170,10 @@ class H extends (gn = y) {
     ] });
   }
 }
-ge = b(gn), H = l(ge, 0, "EmptyState", Je, H), s(ge, 1, H);
-var qe, be, bn;
+ge = b(bn), G = l(ge, 0, "EmptyState", Te, G), s(ge, 1, G);
+var qe, be, xn;
 qe = [m()];
-class X extends (bn = y) {
+class X extends (xn = y) {
   render() {
     const { children: t, width: e = "280px" } = this.props;
     return /* @__PURE__ */ o(
@@ -186,7 +186,7 @@ class X extends (bn = y) {
     );
   }
 }
-be = b(bn), X = l(be, 0, "SidePanel", qe, X), s(be, 1, X);
+be = b(xn), X = l(be, 0, "SidePanel", qe, X), s(be, 1, X);
 function Ne(r) {
   if (r === null) return "null";
   if (r === void 0) return "undefined";
@@ -199,9 +199,9 @@ function Ne(r) {
     }
   return String(r);
 }
-var Xe, xe, xn;
+var Xe, xe, mn;
 Xe = [m()];
-class O extends (xn = y) {
+class F extends (mn = y) {
   render() {
     const { k: t, v: e, signal: n } = this.props;
     return /* @__PURE__ */ d("div", { class: "flex justify-between items-center px-3 py-2 border-b border-border gap-3", children: [
@@ -216,10 +216,10 @@ class O extends (xn = y) {
     ] });
   }
 }
-xe = b(xn), O = l(xe, 0, "DetailRow", Xe, O), s(xe, 1, O);
-var Ke, me, mn;
+xe = b(mn), F = l(xe, 0, "DetailRow", Xe, F), s(xe, 1, F);
+var Ke, me, fn;
 Ke = [m()];
-class G extends (mn = y) {
+class W extends (fn = y) {
   render() {
     return /* @__PURE__ */ d("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 }),
@@ -227,10 +227,10 @@ class G extends (mn = y) {
     ] });
   }
 }
-me = b(mn), G = l(me, 0, "DetailSection", Ke, G), s(me, 1, G);
-var Ze, fe, fn;
+me = b(fn), W = l(me, 0, "DetailSection", Ke, W), s(me, 1, W);
+var Ze, fe, wn;
 Ze = [m()];
-class K extends (fn = y) {
+class K extends (wn = y) {
   render() {
     const { status: t } = this.props;
     return /* @__PURE__ */ o(
@@ -242,10 +242,10 @@ class K extends (fn = y) {
     );
   }
 }
-fe = b(fn), K = l(fe, 0, "StatusDot", Ze, K), s(fe, 1, K);
-var Qe, we, wn;
+fe = b(wn), K = l(fe, 0, "StatusDot", Ze, K), s(fe, 1, K);
+var Qe, we, yn;
 Qe = [m()];
-class Z extends (wn = y) {
+class Q extends (yn = y) {
   render() {
     const { entry: t, signals: e } = this.props;
     return /* @__PURE__ */ d(X, { children: [
@@ -258,19 +258,19 @@ class Z extends (wn = y) {
         ] })
       ] }),
       /* @__PURE__ */ d("div", { class: "flex-1 overflow-y-auto", children: [
-        /* @__PURE__ */ d(G, { label: "Stats", children: [
-          /* @__PURE__ */ o(O, { k: "renders", v: String(t.renderCount) }),
+        /* @__PURE__ */ d(W, { label: "Stats", children: [
+          /* @__PURE__ */ o(F, { k: "renders", v: String(t.renderCount) }),
           /* @__PURE__ */ o(
-            O,
+            F,
             {
               k: "last render",
               v: `${t.lastRenderDuration.toFixed(3)}ms`
             }
           ),
-          /* @__PURE__ */ o(O, { k: "status", v: t.status })
+          /* @__PURE__ */ o(F, { k: "status", v: t.status })
         ] }),
-        e.length > 0 && /* @__PURE__ */ o(G, { label: "State", children: e.map((n) => /* @__PURE__ */ o(
-          O,
+        e.length > 0 && /* @__PURE__ */ o(W, { label: "State", children: e.map((n) => /* @__PURE__ */ o(
+          F,
           {
             k: n.label,
             v: Ne(n.value),
@@ -278,7 +278,7 @@ class Z extends (wn = y) {
           },
           n.id
         )) }),
-        t.lifecycle.length > 0 && /* @__PURE__ */ o(G, { label: "Lifecycle", children: [...t.lifecycle].reverse().slice(0, 20).map((n, i) => /* @__PURE__ */ d(
+        t.lifecycle.length > 0 && /* @__PURE__ */ o(W, { label: "Lifecycle", children: [...t.lifecycle].reverse().slice(0, 20).map((n, i) => /* @__PURE__ */ d(
           "div",
           {
             class: "px-3 py-2 flex justify-between items-center border-b border-border",
@@ -293,10 +293,10 @@ class Z extends (wn = y) {
     ] });
   }
 }
-we = b(wn), Z = l(we, 0, "ComponentDetail", Qe, Z), s(we, 1, Z);
-var Ve, ye, yn;
+we = b(yn), Q = l(we, 0, "ComponentDetail", Qe, Q), s(we, 1, Q);
+var Ve, ye, vn;
 Ve = [m()];
-class Q extends (yn = y) {
+class V extends (vn = y) {
   render() {
     const { entry: t, selected: e, onClick: n } = this.props;
     return /* @__PURE__ */ d(
@@ -331,15 +331,15 @@ class Q extends (yn = y) {
     );
   }
 }
-ye = b(yn), Q = l(ye, 0, "ComponentRow", Ve, Q), s(ye, 1, Q);
+ye = b(vn), V = l(ye, 0, "ComponentRow", Ve, V), s(ye, 1, V);
 var Pe, et, tt, nt, E;
 nt = [m()];
-class B extends (tt = T, et = [C()], Pe = [C()], tt) {
+class B extends (tt = J, et = [C()], Pe = [C()], tt) {
   constructor() {
     super(...arguments);
-    w(this, "components", s(E, 8, this, [])), s(E, 11, this);
-    w(this, "selectedId", s(E, 12, this, null)), s(E, 15, this);
-    w(this, "_handlers", []);
+    f(this, "components", s(E, 8, this, [])), s(E, 11, this);
+    f(this, "selectedId", s(E, 12, this, null)), s(E, 15, this);
+    f(this, "_handlers", []);
   }
   get registry() {
     return this.props.registry;
@@ -372,8 +372,8 @@ class B extends (tt = T, et = [C()], Pe = [C()], tt) {
           /* @__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,
+        /* @__PURE__ */ o("div", { class: "flex-1 overflow-y-auto", children: () => this.components.length === 0 ? /* @__PURE__ */ o(G, { message: "No components tracked. Add @Trace() to component classes." }) : this.components.map((n) => /* @__PURE__ */ o(
+          V,
           {
             entry: n,
             selected: () => this.selectedId === n.id,
@@ -386,20 +386,20 @@ class B extends (tt = T, et = [C()], Pe = [C()], tt) {
       ] }),
       () => {
         const n = this.selectedId, i = n ? this.components.find((c) => c.id === n) ?? null : null, a = n ? e.getSignalsByComponent(n) : [];
-        return i ? /* @__PURE__ */ o(Z, { entry: i, signals: a }) : null;
+        return i ? /* @__PURE__ */ o(Q, { entry: i, signals: a }) : null;
       }
     ] });
   }
 }
 E = b(tt), l(E, 5, "components", et, B), l(E, 5, "selectedId", Pe, B), B = l(E, 0, "ComponentsTab", nt, B), s(E, 1, B);
-const rn = {
+const on = {
   id: "components",
   label: "Components",
   component: B
 };
-var rt, ve, vn;
+var rt, ve, kn;
 rt = [m()];
-class V extends (vn = y) {
+class P extends (kn = y) {
   render() {
     const { placeholder: t, onInput: e } = this.props;
     return /* @__PURE__ */ o(
@@ -415,10 +415,10 @@ class V extends (vn = y) {
     );
   }
 }
-ve = b(vn), V = l(ve, 0, "SearchInput", rt, V), s(ve, 1, V);
-var ot, ke, kn;
+ve = b(kn), P = l(ve, 0, "SearchInput", rt, P), s(ve, 1, P);
+var ot, ke, zn;
 ot = [m()];
-class P extends (kn = y) {
+class ee extends (zn = y) {
   render() {
     return /* @__PURE__ */ d("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 }),
@@ -426,17 +426,17 @@ class P extends (kn = y) {
     ] });
   }
 }
-ke = b(kn), P = l(ke, 0, "PanelSection", ot, P), s(ke, 1, P);
+ke = b(zn), ee = l(ke, 0, "PanelSection", ot, ee), s(ke, 1, ee);
 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}`;
 }
-var it, ze, zn;
+var it, ze, Cn;
 it = [m()];
-class ee extends (zn = y) {
+class te extends (Cn = y) {
   render() {
     const { entry: t } = this.props;
-    return /* @__PURE__ */ o(X, { width: "260px", children: /* @__PURE__ */ o(P, { label: "History", children: /* @__PURE__ */ d("div", { class: "overflow-y-auto", children: [
+    return /* @__PURE__ */ o(X, { width: "260px", children: /* @__PURE__ */ o(ee, { label: "History", children: /* @__PURE__ */ d("div", { class: "overflow-y-auto", children: [
       [...t.history].reverse().map((e, n) => /* @__PURE__ */ d(
         "div",
         {
@@ -452,10 +452,10 @@ class ee extends (zn = y) {
     ] }) }) });
   }
 }
-ze = b(zn), ee = l(ze, 0, "SignalDetail", it, ee), s(ze, 1, ee);
-var st, Ce, Cn;
+ze = b(Cn), te = l(ze, 0, "SignalDetail", it, te), s(ze, 1, te);
+var st, Ce, Mn;
 st = [m()];
-class te extends (Cn = y) {
+class ne extends (Mn = y) {
   render() {
     const { entry: t, selected: e, onClick: n } = this.props;
     return /* @__PURE__ */ d(
@@ -474,16 +474,16 @@ class te extends (Cn = y) {
     );
   }
 }
-Ce = b(Cn), te = l(Ce, 0, "SignalRow", st, te), s(Ce, 1, te);
+Ce = b(Mn), ne = l(Ce, 0, "SignalRow", st, ne), s(Ce, 1, ne);
 var at, lt, ct, dt, ut, S;
 ut = [m()];
-class D extends (dt = T, ct = [C()], lt = [C()], at = [C()], dt) {
+class U extends (dt = J, ct = [C()], lt = [C()], at = [C()], dt) {
   constructor() {
     super(...arguments);
-    w(this, "signals", s(S, 8, this, [])), s(S, 11, this);
-    w(this, "search", s(S, 12, this, "")), s(S, 15, this);
-    w(this, "selectedId", s(S, 16, this, null)), s(S, 19, this);
-    w(this, "_handlers", []);
+    f(this, "signals", s(S, 8, this, [])), s(S, 11, this);
+    f(this, "search", s(S, 12, this, "")), s(S, 15, this);
+    f(this, "selectedId", s(S, 16, this, null)), s(S, 19, this);
+    f(this, "_handlers", []);
   }
   get registry() {
     return this.props.registry;
@@ -507,7 +507,7 @@ class D extends (dt = T, ct = [C()], lt = [C()], at = [C()], dt) {
     return /* @__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__ */ o("div", { class: "px-3 py-2 border-b border-border bg-bg shrink-0", children: /* @__PURE__ */ o(
-          V,
+          P,
           {
             placeholder: "Search signals…",
             onInput: (e) => {
@@ -526,12 +526,12 @@ class D extends (dt = T, ct = [C()], lt = [C()], at = [C()], dt) {
             (i) => i.label.toLowerCase().includes(e) || i.componentName.toLowerCase().includes(e)
           );
           return n.length === 0 ? /* @__PURE__ */ o(
-            H,
+            G,
             {
               message: this.signals.length === 0 ? "No signals tracked. Add @Debug() on top of @State() properties." : "No signals match your search."
             }
           ) : n.map((i) => /* @__PURE__ */ o(
-            te,
+            ne,
             {
               entry: i,
               selected: this.selectedId === i.id,
@@ -545,24 +545,24 @@ class D extends (dt = T, ct = [C()], lt = [C()], at = [C()], dt) {
       ] }),
       () => {
         const e = this.selectedId, n = e ? this.signals.find((i) => i.id === e) ?? null : null;
-        return n ? /* @__PURE__ */ o(ee, { entry: n }) : null;
+        return n ? /* @__PURE__ */ o(te, { entry: n }) : null;
       }
     ] });
   }
 }
-S = b(dt), l(S, 5, "signals", ct, D), l(S, 5, "search", lt, D), l(S, 5, "selectedId", at, D), D = l(S, 0, "SignalsTab", ut, D), s(S, 1, D);
-const on = {
+S = b(dt), l(S, 5, "signals", ct, U), l(S, 5, "search", lt, U), l(S, 5, "selectedId", at, U), U = l(S, 0, "SignalsTab", ut, U), s(S, 1, U);
+const sn = {
   id: "signals",
   label: "Signals",
-  component: D
-}, sn = {
+  component: U
+}, an = {
   "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)]" }
-}, an = [
+}, ln = [
   { value: "all", label: "All" },
   { value: "signal:change", label: "Signals" },
   { value: "component:render", label: "Renders" },
@@ -570,11 +570,11 @@ const on = {
   { value: "lifecycle", label: "Lifecycle" },
   { value: "method:call", label: "Methods" }
 ];
-var pt, Me, Mn;
+var pt, Me, Sn;
 pt = [m()];
-class ne extends (Mn = y) {
+class re extends (Sn = y) {
   render() {
-    const t = sn[this.props.type];
+    const t = an[this.props.type];
     return /* @__PURE__ */ o(
       "span",
       {
@@ -584,16 +584,19 @@ class ne extends (Mn = y) {
     );
   }
 }
-Me = b(Mn), ne = l(Me, 0, "Badge", pt, ne), s(Me, 1, ne);
-var ht, gt, bt, A;
-bt = [m()];
-class q extends (gt = T, ht = [C()], gt) {
+Me = b(Sn), re = l(Me, 0, "Badge", pt, re), s(Me, 1, re);
+var ht, gt, bt, xt, N;
+xt = [m()];
+class H extends (bt = J, gt = [C()], ht = [Z()], bt) {
   constructor() {
     super(...arguments);
-    w(this, "open", s(A, 8, this, !1)), s(A, 11, this);
+    f(this, "open", s(N, 8, this, !1)), s(N, 11, this);
+    f(this, "entry", s(N, 12, this)), s(N, 15, this);
   }
   render() {
-    const { entry: e } = this.props, n = Object.keys(e.data).length > 0;
+    const e = this.entry;
+    if (!e) return null;
+    const n = Object.keys(e.data).length > 0;
     return /* @__PURE__ */ d("div", { class: "border-b border-border", children: [
       /* @__PURE__ */ d(
         "div",
@@ -604,7 +607,7 @@ class q extends (gt = T, ht = [C()], gt) {
           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(re, { 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 ? "▾" : "▸" })
           ]
@@ -620,16 +623,16 @@ class q extends (gt = T, ht = [C()], gt) {
     ] });
   }
 }
-A = b(gt), l(A, 5, "open", ht, q), q = l(A, 0, "TimelineRow", bt, q), s(A, 1, q);
-var xt, mt, ft, wt, yt, I;
-yt = [m()];
-class U extends (wt = T, ft = [C()], mt = [C()], xt = [C()], wt) {
+N = b(bt), l(N, 5, "open", gt, H), l(N, 5, "entry", ht, H), H = l(N, 0, "TimelineRow", xt, H), s(N, 1, H);
+var mt, ft, wt, yt, vt, I;
+vt = [m()];
+class O extends (yt = J, wt = [C()], ft = [C()], mt = [C()], yt) {
   constructor() {
     super(...arguments);
-    w(this, "entries", s(I, 8, this, [])), s(I, 11, this);
-    w(this, "filter", s(I, 12, this, "all")), s(I, 15, this);
-    w(this, "paused", s(I, 16, this, !1)), s(I, 19, this);
-    w(this, "_handlers", []);
+    f(this, "entries", s(I, 8, this, [])), s(I, 11, this);
+    f(this, "filter", s(I, 12, this, "all")), s(I, 15, this);
+    f(this, "paused", s(I, 16, this, !1)), s(I, 19, this);
+    f(this, "_handlers", []);
   }
   get registry() {
     return this.props.registry;
@@ -649,7 +652,7 @@ class U extends (wt = T, ft = [C()], mt = [C()], xt = [C()], wt) {
   render() {
     return /* @__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: [
-        an.map((e) => /* @__PURE__ */ o(
+        ln.map((e) => /* @__PURE__ */ o(
           "button",
           {
             onClick: () => {
@@ -686,20 +689,20 @@ class U extends (wt = T, ft = [C()], mt = [C()], xt = [C()], wt) {
         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));
+        return n.length === 0 ? /* @__PURE__ */ o(G, { message: "No events yet. Interact with your app to see the timeline." }) : [...n].reverse().map((i) => /* @__PURE__ */ o(H, { entry: i }, i.id));
       } })
     ] });
   }
 }
-I = b(wt), l(I, 5, "entries", ft, U), l(I, 5, "filter", mt, U), l(I, 5, "paused", xt, U), U = l(I, 0, "TimelineTab", yt, U), s(I, 1, U);
-const ln = {
+I = b(yt), l(I, 5, "entries", wt, O), l(I, 5, "filter", ft, O), l(I, 5, "paused", mt, O), O = l(I, 0, "TimelineTab", vt, O), s(I, 1, O);
+const cn = {
   id: "timeline",
   label: "Timeline",
-  component: U
-}, cn = '*,: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 vt, Se, Sn;
-vt = [m()];
-class re extends (Sn = y) {
+  component: O
+}, dn = '*,: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 kt, Se, In;
+kt = [m()];
+class oe extends (In = y) {
   render() {
     return /* @__PURE__ */ d(
       "svg",
@@ -723,10 +726,10 @@ class re extends (Sn = y) {
     );
   }
 }
-Se = b(Sn), re = l(Se, 0, "EllipsisVerticalIcon", vt, re), s(Se, 1, re);
-var kt, Ie, In;
-kt = [m()];
-class oe extends (In = y) {
+Se = b(In), oe = l(Se, 0, "EllipsisVerticalIcon", kt, oe), s(Se, 1, oe);
+var zt, Ie, Ln;
+zt = [m()];
+class ie extends (Ln = y) {
   render() {
     return /* @__PURE__ */ d(
       "svg",
@@ -749,10 +752,10 @@ class oe extends (In = y) {
     );
   }
 }
-Ie = b(In), oe = l(Ie, 0, "PanelBottomIcon", kt, oe), s(Ie, 1, oe);
-var zt, Le, Ln;
-zt = [m()];
-class ie extends (Ln = y) {
+Ie = b(Ln), ie = l(Ie, 0, "PanelBottomIcon", zt, ie), s(Ie, 1, ie);
+var Ct, Le, _n;
+Ct = [m()];
+class se extends (_n = y) {
   render() {
     return /* @__PURE__ */ d(
       "svg",
@@ -775,10 +778,10 @@ class ie extends (Ln = y) {
     );
   }
 }
-Le = b(Ln), ie = l(Le, 0, "PanelLeftIcon", zt, ie), s(Le, 1, ie);
-var Ct, _e, _n;
-Ct = [m()];
-class se extends (_n = y) {
+Le = b(_n), se = l(Le, 0, "PanelLeftIcon", Ct, se), s(Le, 1, se);
+var Mt, _e, $n;
+Mt = [m()];
+class ae extends ($n = y) {
   render() {
     return /* @__PURE__ */ d(
       "svg",
@@ -801,10 +804,10 @@ class se extends (_n = y) {
     );
   }
 }
-_e = b(_n), se = l(_e, 0, "PanelRightIcon", Ct, se), s(_e, 1, se);
-var Mt, $e, $n;
-Mt = [m()];
-class ae extends ($n = y) {
+_e = b($n), ae = l(_e, 0, "PanelRightIcon", Mt, ae), s(_e, 1, ae);
+var St, $e, jn;
+St = [m()];
+class le extends (jn = y) {
   render() {
     return /* @__PURE__ */ d(
       "svg",
@@ -827,10 +830,10 @@ class ae extends ($n = y) {
     );
   }
 }
-$e = b($n), ae = l($e, 0, "PanelTopIcon", Mt, ae), s($e, 1, ae);
-var St, je, jn;
-St = [m()];
-class le extends (jn = y) {
+$e = b(jn), le = l($e, 0, "PanelTopIcon", St, le), s($e, 1, le);
+var It, je, En;
+It = [m()];
+class ce extends (En = y) {
   render() {
     return /* @__PURE__ */ d(
       "svg",
@@ -853,10 +856,10 @@ class le extends (jn = y) {
     );
   }
 }
-je = b(jn), le = l(je, 0, "XIcon", St, le), s(je, 1, le);
-var It, Ee, En;
-It = [m()];
-class R extends (En = y) {
+je = b(En), ce = l(je, 0, "XIcon", It, ce), s(je, 1, ce);
+var Lt, Ee, Nn;
+Lt = [m()];
+class Y extends (Nn = y) {
   render() {
     const { title: t, active: e, icon: n, onClick: i } = this.props;
     return /* @__PURE__ */ o(
@@ -870,26 +873,26 @@ class R extends (En = y) {
     );
   }
 }
-Ee = b(En), R = l(Ee, 0, "IconButton", It, R), s(Ee, 1, R);
-const Te = 180, dn = 300, We = 240, un = 380, pn = {
-  bottom: oe,
-  top: ae,
-  left: ie,
-  right: se
+Ee = b(Nn), Y = l(Ee, 0, "IconButton", Lt, Y), s(Ee, 1, Y);
+const Ye = 180, un = 300, Je = 240, pn = 380, hn = {
+  bottom: ie,
+  top: le,
+  left: se,
+  right: ae
 };
-var Lt, _t, $t, jt, Et, Nt, Dt, Ut, Ot, Ft, x;
-Ft = [m()];
-class _ extends (Ot = T, Ut = [C()], Dt = [C()], Nt = [C()], Et = [C()], jt = [C()], $t = [ce()], _t = [ce()], Lt = [Qt("onClose")], Ot) {
+var _t, $t, jt, Et, Nt, Dt, Ut, Ot, Ft, At, x;
+At = [m()];
+class _ extends (Ft = J, Ot = [C()], Ut = [C()], Dt = [C()], Nt = [C()], Et = [C()], jt = [Z()], $t = [Z()], _t = [Vt("onClose")], Ft) {
   constructor() {
     super(...arguments);
     s(x, 5, this);
-    w(this, "activeTab", s(x, 8, this, "")), s(x, 11, this);
-    w(this, "dock", s(x, 12, this, "bottom")), s(x, 15, this);
-    w(this, "dockMenuOpen", s(x, 16, this, !1)), s(x, 19, this);
-    w(this, "bottomSize", s(x, 20, this, dn)), s(x, 23, this);
-    w(this, "vertSize", s(x, 24, this, un)), s(x, 27, this);
-    w(this, "plugins", s(x, 28, this, [])), s(x, 31, this);
-    w(this, "registry", s(x, 32, this)), s(x, 35, this);
+    f(this, "activeTab", s(x, 8, this, "")), s(x, 11, this);
+    f(this, "dock", s(x, 12, this, "bottom")), s(x, 15, this);
+    f(this, "dockMenuOpen", s(x, 16, this, !1)), s(x, 19, this);
+    f(this, "bottomSize", s(x, 20, this, un)), s(x, 23, this);
+    f(this, "vertSize", s(x, 24, this, pn)), s(x, 27, this);
+    f(this, "plugins", s(x, 28, this, [])), s(x, 31, this);
+    f(this, "registry", s(x, 32, this)), s(x, 35, this);
   }
   handleClose() {
   }
@@ -899,24 +902,24 @@ class _ extends (Ot = T, Ut = [C()], Dt = [C()], Nt = [C()], Et = [C()], jt = [C
   handleMouseDown(e) {
     e.preventDefault();
     const n = e.clientX, i = e.clientY, a = this.dock, c = a === "bottom" || a === "top" ? this.bottomSize : this.vertSize, p = (h) => {
-      const f = this.dock;
-      f === "bottom" ? this.bottomSize = Math.max(
-        Te,
+      const w = this.dock;
+      w === "bottom" ? this.bottomSize = Math.max(
+        Ye,
         Math.min(
           window.innerHeight * 0.85,
           c + (i - h.clientY)
         )
-      ) : f === "top" ? this.bottomSize = Math.max(
-        Te,
+      ) : w === "top" ? this.bottomSize = Math.max(
+        Ye,
         Math.min(
           window.innerHeight * 0.85,
           c + (h.clientY - i)
         )
-      ) : f === "left" ? this.vertSize = Math.max(
-        We,
+      ) : w === "left" ? this.vertSize = Math.max(
+        Je,
         Math.min(window.innerWidth * 0.6, c + (h.clientX - n))
       ) : this.vertSize = Math.max(
-        We,
+        Je,
         Math.min(window.innerWidth * 0.6, c + (n - h.clientX))
       );
     }, g = () => {
@@ -959,7 +962,7 @@ class _ extends (Ot = T, Ut = [C()], Dt = [C()], Nt = [C()], Et = [C()], jt = [C
               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__ */ o("img", { class: "h-[13px] w-[13px]", src: Tt }),
+                    /* @__PURE__ */ o("img", { class: "h-[13px] w-[13px]", src: Jt }),
                     /* @__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: () => this.plugins.map((e) => /* @__PURE__ */ d(
@@ -979,10 +982,10 @@ class _ extends (Ot = T, Ut = [C()], Dt = [C()], Nt = [C()], Et = [C()], jt = [C
                   /* @__PURE__ */ d("div", { class: "flex items-center gap-[2px] shrink-0", children: [
                     /* @__PURE__ */ d("div", { class: "relative", children: [
                       /* @__PURE__ */ o(
-                        R,
+                        Y,
                         {
                           title: "Dock position",
-                          icon: re,
+                          icon: oe,
                           active: () => this.dockMenuOpen,
                           onClick: () => {
                             this.dockMenuOpen = !this.dockMenuOpen;
@@ -991,11 +994,11 @@ class _ extends (Ot = T, Ut = [C()], Dt = [C()], Nt = [C()], Et = [C()], jt = [C
                       ),
                       () => 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(
                         (e) => /* @__PURE__ */ o(
-                          R,
+                          Y,
                           {
                             title: `Dock ${e}`,
                             active: () => this.dock === e,
-                            icon: pn[e],
+                            icon: hn[e],
                             onClick: () => {
                               this.dock = e, this.dockMenuOpen = !1;
                             }
@@ -1006,10 +1009,10 @@ class _ extends (Ot = T, Ut = [C()], Dt = [C()], Nt = [C()], Et = [C()], jt = [C
                     ] }),
                     /* @__PURE__ */ o("div", { class: "w-px h-3 bg-border mx-1" }),
                     /* @__PURE__ */ o(
-                      R,
+                      Y,
                       {
                         title: "Close",
-                        icon: le,
+                        icon: ce,
                         onClick: () => {
                           this.handleClose();
                         }
@@ -1031,20 +1034,20 @@ class _ extends (Ot = T, Ut = [C()], Dt = [C()], Nt = [C()], Et = [C()], jt = [C
     );
   }
 }
-x = b(Ot), l(x, 1, "handleClose", Lt, _), l(x, 5, "activeTab", Ut, _), l(x, 5, "dock", Dt, _), l(x, 5, "dockMenuOpen", Nt, _), l(x, 5, "bottomSize", Et, _), l(x, 5, "vertSize", jt, _), l(x, 5, "plugins", $t, _), l(x, 5, "registry", _t, _), _ = l(x, 0, "Panel", Ft, _), s(x, 1, _);
-const hn = [
+x = b(Ft), l(x, 1, "handleClose", _t, _), l(x, 5, "activeTab", Ot, _), l(x, 5, "dock", Ut, _), l(x, 5, "dockMenuOpen", Dt, _), l(x, 5, "bottomSize", Nt, _), l(x, 5, "vertSize", Et, _), l(x, 5, "plugins", jt, _), l(x, 5, "registry", $t, _), _ = l(x, 0, "Panel", At, _), s(x, 1, _);
+const gn = [
+  sn,
   on,
-  rn,
-  ln
+  cn
 ];
-var At, Bt, Ht, Gt, Rt, L;
-Rt = [m()];
-class N extends (Gt = T, Ht = [C()], Bt = [ce()], At = [ce()], Gt) {
+var Bt, Ht, Gt, Wt, Yt, L;
+Yt = [m()];
+class D extends (Wt = J, Gt = [C()], Ht = [Z()], Bt = [Z()], Wt) {
   constructor() {
     super(...arguments);
-    w(this, "open", s(L, 8, this, !1)), s(L, 11, this);
-    w(this, "plugins", s(L, 12, this, [])), s(L, 15, this);
-    w(this, "registry", s(L, 16, this)), s(L, 19, this);
+    f(this, "open", s(L, 8, this, !1)), s(L, 11, this);
+    f(this, "plugins", s(L, 12, this, [])), s(L, 15, this);
+    f(this, "registry", s(L, 16, this)), s(L, 19, this);
   }
   render() {
     return /* @__PURE__ */ o("div", { children: () => this.open ? /* @__PURE__ */ o(
@@ -1064,16 +1067,16 @@ class N extends (Gt = T, Ht = [C()], Bt = [ce()], At = [ce()], Gt) {
         },
         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: Tt }),
+          /* @__PURE__ */ o("img", { class: "h-[13px] w-[13px]", src: Jt }),
           /* @__PURE__ */ o("span", { class: "text-[10px] font-bold text-accent tracking-widest uppercase", children: "devtools" })
         ]
       }
     ) });
   }
 }
-L = b(Gt), l(L, 5, "open", Ht, N), l(L, 5, "plugins", Bt, N), l(L, 5, "registry", At, N), N = l(L, 0, "DevToolsApp", Rt, N), s(L, 1, N);
-const Bn = {
-  plugins: [...hn],
+L = b(Wt), l(L, 5, "open", Gt, D), l(L, 5, "plugins", Ht, D), l(L, 5, "registry", Bt, D), D = l(L, 0, "DevToolsApp", Yt, D), s(L, 1, D);
+const Hn = {
+  plugins: [...gn],
   host: null,
   cleanup: null,
   init(r = {}) {
@@ -1082,10 +1085,10 @@ const Bn = {
     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 = cn + Pt, e.appendChild(n);
+    n.textContent = dn + en, e.appendChild(n);
     const i = document.createElement("div");
     e.appendChild(i), this.cleanup = Ge(
-      () => /* @__PURE__ */ o(N, { plugins: this.plugins, registry: v.instance }),
+      () => /* @__PURE__ */ o(D, { plugins: this.plugins, registry: v.instance }),
       i
     );
   },
@@ -1099,33 +1102,33 @@ const Bn = {
     if (!this.host) return;
     const t = this.host.shadowRoot.querySelector("div:last-child");
     this.cleanup?.(), this.cleanup = Ge(
-      () => /* @__PURE__ */ o(N, { plugins: this.plugins, registry: v.instance }),
+      () => /* @__PURE__ */ o(D, { plugins: this.plugins, registry: v.instance }),
       t
     );
   }
 };
-function Ye(r) {
+function Re(r) {
   return typeof r == "function" && typeof r.subscribe == "function" && !("set" in r);
 }
-function Hn(r = {}) {
+function Gn(r = {}) {
   return function(e, n) {
     const i = r.label ?? n.name;
     if (n.kind === "method") {
       const a = e;
       return function(...c) {
         const p = this.constructor.name, g = performance.now();
-        let h, f = !1;
+        let h, w = !1;
         try {
           h = a.apply(this, c);
         } catch (u) {
-          throw f = !0, h = u, u;
+          throw w = !0, h = u, u;
         } finally {
           const u = performance.now() - g;
           v.instance.recordMethodCall(
             this,
             i,
             c,
-            f ? `throw ${String(h)}` : h,
+            w ? `throw ${String(h)}` : h,
             u,
             p
           );
@@ -1138,14 +1141,14 @@ function Hn(r = {}) {
       n.addInitializer(function() {
         const c = this, p = c.constructor.name;
         queueMicrotask(() => {
-          const g = Vt(() => a.call(c));
-          let h = !0, f = g();
-          v.instance.registerSignal(c, i, f, p), g.subscribe((u) => {
+          const g = Pt(() => a.call(c));
+          let h = !0, w = g();
+          v.instance.registerSignal(c, i, w, p), g.subscribe((u) => {
             if (h) {
               h = !1;
               return;
             }
-            v.instance.updateSignal(c, i, u, f), f = u;
+            v.instance.updateSignal(c, i, u, w), w = u;
           });
         });
       });
@@ -1165,8 +1168,8 @@ function Hn(r = {}) {
             return k.call(this);
           },
           set(j) {
-            const F = k.call(this);
-            z.call(this, j), v.instance.updateSignal(this, i, j, F);
+            const A = k.call(this);
+            z.call(this, j), v.instance.updateSignal(this, i, j, A);
           },
           enumerable: !0,
           configurable: !0
@@ -1174,36 +1177,36 @@ function Hn(r = {}) {
         return;
       }
       const h = a[c];
-      if (Reflect.deleteProperty(a, c), !Ye(h)) {
+      if (Reflect.deleteProperty(a, c), !Re(h)) {
         h !== void 0 && console.warn(
           `[PraxisJS DevTools] @Debug() on "${p}.${c}": expected a computed() value but got ${typeof h}. Skipping.`
         ), a[c] = h;
         return;
       }
-      let f;
+      let w;
       function u(k) {
         let z = !0, j = k();
-        const F = k.subscribe((W) => {
+        const A = k.subscribe((R) => {
           if (z) {
             z = !1;
             return;
           }
-          v.instance.updateSignal(a, i, W, j), j = W;
+          v.instance.updateSignal(a, i, R, j), j = R;
         });
-        return v.instance.registerSignal(a, i, j, p), F;
+        return v.instance.registerSignal(a, i, j, p), A;
       }
-      f = { computed: h, unsub: u(h) }, Object.defineProperty(a, c, {
+      w = { computed: h, unsub: u(h) }, Object.defineProperty(a, c, {
         get() {
-          return f.computed;
+          return w.computed;
         },
         set(k) {
-          if (f.unsub(), !Ye(k)) {
+          if (w.unsub(), !Re(k)) {
             console.warn(
               `[PraxisJS DevTools] @Debug() on "${p}.${c}": expected a computed() value but got ${typeof k}. Skipping.`
             );
             return;
           }
-          f = { computed: k, unsub: u(k) };
+          w = { computed: k, unsub: u(k) };
         },
         enumerable: !0,
         configurable: !0
@@ -1211,12 +1214,12 @@ function Hn(r = {}) {
     });
   };
 }
-function Gn() {
+function Wn() {
   return function(r, t) {
     const e = r.name, n = v.instance, i = r.prototype, a = i.render;
     a && (i.render = function(...g) {
-      const h = performance.now(), f = a.call(this, ...g), u = performance.now() - h;
-      return n.recordRender(this, u), f;
+      const h = performance.now(), w = a.call(this, ...g), u = performance.now() - h;
+      return n.recordRender(this, u), w;
     });
     const c = i.onBeforeMount;
     i.onBeforeMount = function(...g) {
@@ -1231,19 +1234,19 @@ function Gn() {
     ];
     for (const g of p) {
       const h = i[g];
-      i[g] = function(...f) {
-        return n.recordLifecycle(this, g), h?.call(this, ...f);
+      i[g] = function(...w) {
+        return n.recordLifecycle(this, g), h?.call(this, ...w);
       };
     }
     return r;
   };
 }
 export {
-  rn as ComponentsPlugin,
-  Hn as Debug,
-  Bn as DevTools,
+  on as ComponentsPlugin,
+  Gn as Debug,
+  Hn as DevTools,
   v as Registry,
-  on as SignalsPlugin,
-  ln as TimelinePlugin,
-  Gn as Trace
+  sn as SignalsPlugin,
+  cn as TimelinePlugin,
+  Wn as Trace
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisjs/devtools",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -12,10 +12,10 @@
   },
   "dependencies": {
     "@unocss/reset": "^66.6.2",
-    "@praxisjs/core": "0.4.0",
-    "@praxisjs/decorators": "0.4.1",
-    "@praxisjs/jsx": "0.3.1",
-    "@praxisjs/runtime": "0.2.2",
+    "@praxisjs/core": "0.4.1",
+    "@praxisjs/decorators": "0.4.2",
+    "@praxisjs/jsx": "0.3.2",
+    "@praxisjs/runtime": "0.2.3",
     "@praxisjs/shared": "0.2.0"
   },
   "devDependencies": {

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

@@ -1,8 +1,7 @@
 import { time } from "@utils/format-time";
 
 import { StatefulComponent } from "@praxisjs/core";
-import { Component, State } from "@praxisjs/decorators";
-
+import { Component, Prop, State } from "@praxisjs/decorators";
 
 import { Badge } from "./badge";
 
@@ -11,9 +10,12 @@ import type { TimelineEntry } from "@core/types";
 @Component()
 export class TimelineRow extends StatefulComponent {
   @State() open = false;
+  @Prop() entry: TimelineEntry | undefined;
 
   render() {
-    const { entry } = this.props as { entry: TimelineEntry };
+    const entry = this.entry;
+    if (!entry) return null;
+
     const hasData = Object.keys(entry.data).length > 0;
 
     return (