@praxisjs/devtools 0.2.4 → 0.2.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @praxisjs/devtools
 
+## 0.2.5
+
+### Patch Changes
+
+- 00119ca: Regenerate UnoCSS bundle
+- Updated dependencies [ea59035]
+- Updated dependencies [d11a10a]
+  - @praxisjs/decorators@0.4.3
+  - @praxisjs/core@0.4.2
+  - @praxisjs/runtime@0.2.4
+  - @praxisjs/jsx@0.3.3
+
 ## 0.2.4
 
 ### Patch Changes

package/assets/uno.generated.css

@@ -65,12 +65,14 @@
 .h-\[2px\]{height:2px;}
 .h-\[32px\]{height:32px;}
 .h-\[6px\]{height:6px;}
-.h-1{height:0.25rem;}
+.h-1,
+.h1{height:0.25rem;}
 .h-10{height:2.5rem;}
 .h-3{height:0.75rem;}
 .h-7{height:1.75rem;}
 .h-full{height:100%;}
 .h-screen{height:100vh;}
+.h2{height:0.5rem;}
 .max-w-\[200px\]{max-width:200px;}
 .min-w-0{min-width:0;}
 .w-\[13px\]{width:13px;}
@@ -108,6 +110,7 @@
 .overflow-hidden{overflow:hidden;}
 .overflow-y-auto{overflow-y:auto;}
 .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.b,
 .border{border-width:1px;}
 .border-b{border-bottom-width:1px;}
 .border-l{border-left-width:1px;}

package/dist/index.js

@@ -26,7 +26,7 @@ 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 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}';
+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,.h1{height:.25rem}.h-10{height:2.5rem}.h-3{height:.75rem}.h-7{height:1.75rem}.h-full{height:100%}.h-screen{height:100vh}.h2{height:.5rem}.max-w-\\[200px\\]{max-width:200px}.min-w-0{min-width:0}.w-\\[13px\\]{width:13px}.w-\\[22px\\]{width:22px}.w-\\[2px\\]{width:2px}.w-\\[6px\\]{width:6px}.w-1{width:.25rem}.w-10{width:2.5rem}.w-12{width:3rem}.w-4{width:1rem}.w-full{width:100%}.w-px{width:1px}.flex{display:flex}.flex-1{flex:1 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}.b,.border{border-width:1px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-border{--un-border-opacity:.25;border-color:rgba(155,144,230,var(--un-border-opacity))}.border-warn{--un-border-opacity:1;border-color:rgb(217 119 6 / var(--un-border-opacity))}.hover\\:border-accent:hover{--un-border-opacity:1;border-color:rgb(155 144 230 / var(--un-border-opacity))}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-r{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.bg-\\[rgba\\(124\\,109\\,214\\,0\\.14\\)\\]{--un-bg-opacity:.14;background-color:rgba(124,109,214,var(--un-bg-opacity))}.bg-\\[rgba\\(14\\,165\\,122\\,0\\.14\\)\\]{--un-bg-opacity:.14;background-color:rgba(14,165,122,var(--un-bg-opacity))}.bg-\\[rgba\\(155\\,144\\,230\\,0\\.14\\)\\]{--un-bg-opacity:.14;background-color:rgba(155,144,230,var(--un-bg-opacity))}.bg-\\[rgba\\(217\\,119\\,6\\,0\\.14\\)\\]{--un-bg-opacity:.14;background-color:rgba(217,119,6,var(--un-bg-opacity))}.bg-\\[rgba\\(220\\,38\\,38\\,0\\.14\\)\\]{--un-bg-opacity:.14;background-color:rgba(220,38,38,var(--un-bg-opacity))}.bg-\\[rgba\\(74\\,222\\,128\\,0\\.12\\)\\]{--un-bg-opacity:.12;background-color:rgba(74,222,128,var(--un-bg-opacity))}.bg-accent{--un-bg-opacity:1;background-color:rgb(155 144 230 / var(--un-bg-opacity))}.bg-bg{--un-bg-opacity:1;background-color:rgb(15 13 23 / var(--un-bg-opacity))}.bg-border{--un-bg-opacity:.25;background-color:rgba(155,144,230,var(--un-bg-opacity))}.bg-header{--un-bg-opacity:1;background-color:rgb(22 19 38 / var(--un-bg-opacity))}.bg-input,.bg-section{--un-bg-opacity:1;background-color:rgb(27 24 48 / var(--un-bg-opacity))}.bg-selected{--un-bg-opacity:1;background-color:rgb(34 30 61 / var(--un-bg-opacity))}.bg-soft{--un-bg-opacity:.18;background-color:rgba(155,144,230,var(--un-bg-opacity))}.bg-subtle{--un-bg-opacity:1;background-color:rgb(111 106 143 / var(--un-bg-opacity))}.bg-success{--un-bg-opacity:1;background-color:rgb(14 165 122 / var(--un-bg-opacity))}.bg-transparent{background-color: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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisjs/devtools",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -12,11 +12,11 @@
   },
   "dependencies": {
     "@unocss/reset": "^66.6.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"
+    "@praxisjs/core": "0.4.2",
+    "@praxisjs/decorators": "0.4.3",
+    "@praxisjs/jsx": "0.3.3",
+    "@praxisjs/shared": "0.2.0",
+    "@praxisjs/runtime": "0.2.4"
   },
   "devDependencies": {
     "@types/node": "^25.3.0",

package/src/__tests__/debug.test.ts

@@ -0,0 +1,262 @@
+import { beforeEach, describe, it, expect, vi } from "vitest";
+
+import { computed, signal } from "@praxisjs/core/internal";
+
+import { Registry } from "../core/registry";
+import { Debug } from "../decorators/debug";
+
+beforeEach(() => {
+  (Registry as unknown as { _instance: Registry | null })._instance = null;
+});
+
+// ── Method decorator ──────────────────────────────────────────────────────────
+
+describe("Debug — method decorator", () => {
+  it("records a method:call timeline entry", () => {
+    const ctx = { kind: "method" as const, name: "doWork" } as ClassMethodDecoratorContext;
+    const original = vi.fn((_x: unknown) => "result");
+
+    const wrapped = Debug()(original as never, ctx) as (...args: unknown[]) => unknown;
+
+    class Comp { constructor() {} }
+    const instance = new Comp();
+    const registry = Registry.instance;
+    registry.registerComponent(instance, "Comp");
+
+    wrapped.call(instance, 42);
+
+    const entry = registry.getTimeline().find((t) => t.type === "method:call");
+    expect(entry).toBeDefined();
+    expect(entry?.label).toContain("doWork");
+    expect(entry?.data.args).toEqual([42]);
+    expect(entry?.data.result).toBe("result");
+  });
+
+  it("records throw result when method throws", () => {
+    const ctx = { kind: "method" as const, name: "boom" } as ClassMethodDecoratorContext;
+    const original = () => { throw new Error("fail"); };
+
+    const wrapped = Debug()(original as never, ctx) as () => void;
+
+    class Comp {}
+    const instance = new Comp();
+    Registry.instance.registerComponent(instance, "Comp");
+
+    expect(() => wrapped.call(instance)).toThrow("fail");
+
+    const entry = Registry.instance.getTimeline().find((t) => t.type === "method:call");
+    expect(entry?.data.result).toContain("throw");
+  });
+
+  it("uses custom label from options", () => {
+    const ctx = { kind: "method" as const, name: "internal" } as ClassMethodDecoratorContext;
+    const original = vi.fn(() => undefined);
+
+    const wrapped = Debug({ label: "myLabel" })(original as never, ctx) as () => void;
+
+    class Comp {}
+    const instance = new Comp();
+    Registry.instance.registerComponent(instance, "Comp");
+    wrapped.call(instance);
+
+    const entry = Registry.instance.getTimeline().find((t) => t.type === "method:call");
+    expect(entry?.label).toContain("myLabel");
+  });
+});
+
+// ── Field decorator (wrapping @State getter/setter) ───────────────────────────
+
+describe("Debug — field decorator wrapping @State", () => {
+  it("registers signal and tracks updates", () => {
+    const registry = Registry.instance;
+    const instance = { count: 0 } as Record<string, unknown>;
+
+    // Simulate what @State() does: install a getter/setter on the instance
+    const s = signal(0);
+    Object.defineProperty(instance, "count", {
+      get() { return s(); },
+      set(v: number) { s.set(v); },
+      enumerable: true,
+      configurable: true,
+    });
+
+    const initializers: Array<(this: unknown) => void> = [];
+    const ctx = {
+      kind: "field" as const,
+      name: "count",
+      addInitializer(fn: (this: unknown) => void) { initializers.push(fn); },
+    } as ClassFieldDecoratorContext;
+
+    Debug()(undefined, ctx);
+    initializers.forEach((fn) => fn.call(instance));
+
+    const signals = registry.getSignals();
+    expect(signals.length).toBeGreaterThan(0);
+    expect(signals[0].label).toBe("count");
+    expect(signals[0].value).toBe(0);
+
+    // Read the property through the getter (covers the get() function body)
+    const readValue = (instance as Record<string, unknown>).count;
+    expect(readValue).toBe(0);
+
+    // Trigger update through the wrapped setter
+    (instance as Record<string, unknown>).count = 10;
+
+    // The set through the defined property calls updateSignal
+    expect(registry.getSignals()[0].value).toBe(10);
+  });
+});
+
+// ── Field decorator (computed field) ─────────────────────────────────────────
+
+describe("Debug — field decorator with computed value", () => {
+  it("registers computed signal and tracks updates", () => {
+    const registry = Registry.instance;
+    const src = signal(1);
+    const c = computed(() => src() * 2);
+
+    const instance = { doubled: c } as Record<string, unknown>;
+
+    const initializers: Array<(this: unknown) => void> = [];
+    const ctx = {
+      kind: "field" as const,
+      name: "doubled",
+      addInitializer(fn: (this: unknown) => void) { initializers.push(fn); },
+    } as ClassFieldDecoratorContext;
+
+    Debug()(undefined, ctx);
+    initializers.forEach((fn) => fn.call(instance));
+
+    const signals = registry.getSignals();
+    expect(signals.length).toBeGreaterThan(0);
+    expect(signals[0].label).toBe("doubled");
+    expect(signals[0].value).toBe(2);
+
+    src.set(5);
+    expect(registry.getSignals()[0].value).toBe(10);
+  });
+
+  it("warns when field value is not a computed and not undefined", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const instance = { myField: "not-computed" } as Record<string, unknown>;
+
+    const initializers: Array<(this: unknown) => void> = [];
+    const ctx = {
+      kind: "field" as const,
+      name: "myField",
+      addInitializer(fn: (this: unknown) => void) { initializers.push(fn); },
+    } as ClassFieldDecoratorContext;
+
+    Debug()(undefined, ctx);
+    initializers.forEach((fn) => fn.call(instance));
+
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining("[PraxisJS DevTools]"));
+    warn.mockRestore();
+  });
+
+  it("warns when computed field is replaced with non-computed value via setter", () => {
+    const registry = Registry.instance;
+    const src = signal(1);
+    const c = computed(() => src() * 2);
+
+    const instance = { doubled: c } as Record<string, unknown>;
+
+    const initializers: Array<(this: unknown) => void> = [];
+    const ctx = {
+      kind: "field" as const,
+      name: "doubled",
+      addInitializer(fn: (this: unknown) => void) { initializers.push(fn); },
+    } as ClassFieldDecoratorContext;
+
+    Debug()(undefined, ctx);
+    initializers.forEach((fn) => fn.call(instance));
+
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    // Set a non-computed value through the property setter
+    (instance as Record<string, unknown>).doubled = "not-a-computed";
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining("[PraxisJS DevTools]"));
+    warn.mockRestore();
+
+    void registry;
+  });
+
+  it("updates slot when computed field is replaced with a new computed", () => {
+    const registry = Registry.instance;
+    const src = signal(1);
+    const c1 = computed(() => src() * 2);
+    const c2 = computed(() => src() * 10);
+
+    const instance = { doubled: c1 } as Record<string, unknown>;
+
+    const initializers: Array<(this: unknown) => void> = [];
+    const ctx = {
+      kind: "field" as const,
+      name: "doubled",
+      addInitializer(fn: (this: unknown) => void) { initializers.push(fn); },
+    } as ClassFieldDecoratorContext;
+
+    Debug()(undefined, ctx);
+    initializers.forEach((fn) => fn.call(instance));
+
+    // Replace with new computed
+    (instance as Record<string, unknown>).doubled = c2;
+
+    // The getter should now return c2
+    const newComputed = (instance as Record<string, unknown>).doubled;
+    expect(typeof newComputed).toBe("function");
+
+    void registry;
+  });
+
+  it("does not warn when field value is undefined", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const instance = { myUndef: undefined } as Record<string, unknown>;
+
+    const initializers: Array<(this: unknown) => void> = [];
+    const ctx = {
+      kind: "field" as const,
+      name: "myUndef",
+      addInitializer(fn: (this: unknown) => void) { initializers.push(fn); },
+    } as ClassFieldDecoratorContext;
+
+    Debug()(undefined, ctx);
+    initializers.forEach((fn) => fn.call(instance));
+
+    expect(warn).not.toHaveBeenCalled();
+    warn.mockRestore();
+  });
+});
+
+// ── Getter decorator ──────────────────────────────────────────────────────────
+
+describe("Debug — getter decorator", () => {
+  it("returns undefined (void) for getter kind", async () => {
+    const initializers: Array<(this: unknown) => void> = [];
+    const ctx = {
+      kind: "getter" as const,
+      name: "myGetter",
+      addInitializer(fn: (this: unknown) => void) { initializers.push(fn); },
+    } as ClassGetterDecoratorContext;
+
+    const src = signal(3);
+    const result = Debug()(() => src() * 2 as unknown as never, ctx);
+    expect(result).toBeUndefined();
+
+    // Run the initializer on a fake instance
+    const instance = { myGetter: computed(() => src() * 2) };
+    initializers.forEach((fn) => fn.call(instance));
+
+    // Wait for queueMicrotask
+    await new Promise<void>((r) => setTimeout(r, 0));
+
+    const signals = Registry.instance.getSignals();
+    expect(signals.length).toBeGreaterThan(0);
+
+    // Update src to trigger the subscribe callback (covers the updateSignal path)
+    const signalsBefore = Registry.instance.getSignals()[0]?.value;
+    src.set(10);
+    // The computed updates: src() * 2 = 20
+    await new Promise<void>((r) => setTimeout(r, 0));
+    expect(signalsBefore).toBe(6); // 3 * 2 = 6
+  });
+});

package/src/__tests__/event-bus.test.ts

@@ -0,0 +1,76 @@
+import { describe, it, expect, vi } from "vitest";
+
+import { EventBus } from "../core/event-bus";
+
+describe("EventBus", () => {
+  it("calls registered handler when event is emitted", () => {
+    const bus = new EventBus();
+    const handler = vi.fn();
+    bus.on("test", handler);
+    bus.emit("test", "payload");
+    expect(handler).toHaveBeenCalledWith("payload");
+  });
+
+  it("calls multiple handlers for the same event", () => {
+    const bus = new EventBus();
+    const h1 = vi.fn();
+    const h2 = vi.fn();
+    bus.on("event", h1);
+    bus.on("event", h2);
+    bus.emit("event", 42);
+    expect(h1).toHaveBeenCalledWith(42);
+    expect(h2).toHaveBeenCalledWith(42);
+  });
+
+  it("does not call handlers for different events", () => {
+    const bus = new EventBus();
+    const handler = vi.fn();
+    bus.on("a", handler);
+    bus.emit("b", "data");
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it("does not throw when emitting to an event with no handlers", () => {
+    const bus = new EventBus();
+    expect(() => bus.emit("no-listeners", null)).not.toThrow();
+  });
+
+  it("unsubscribe function removes the handler", () => {
+    const bus = new EventBus();
+    const handler = vi.fn();
+    const unsub = bus.on("event", handler);
+    unsub();
+    bus.emit("event", "data");
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it("unsubscribing one handler does not affect others", () => {
+    const bus = new EventBus();
+    const h1 = vi.fn();
+    const h2 = vi.fn();
+    const unsub = bus.on("event", h1);
+    bus.on("event", h2);
+    unsub();
+    bus.emit("event", "data");
+    expect(h1).not.toHaveBeenCalled();
+    expect(h2).toHaveBeenCalledWith("data");
+  });
+
+  it("passes payload correctly to handler", () => {
+    const bus = new EventBus();
+    const handler = vi.fn();
+    const payload = { key: "value", nested: { n: 1 } };
+    bus.on("event", handler);
+    bus.emit("event", payload);
+    expect(handler).toHaveBeenCalledWith(payload);
+  });
+
+  it("each EventBus instance is independent", () => {
+    const bus1 = new EventBus();
+    const bus2 = new EventBus();
+    const handler = vi.fn();
+    bus1.on("event", handler);
+    bus2.emit("event", "data");
+    expect(handler).not.toHaveBeenCalled();
+  });
+});

package/src/__tests__/format-time.test.ts

@@ -0,0 +1,52 @@
+import { beforeEach, afterEach, describe, it, expect, vi } from "vitest";
+
+import { time } from "../utils/format-time";
+
+describe("time", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("formats diff < 1000ms as milliseconds", () => {
+    // Date.now() = 1000, ts = 1000 - diff
+    vi.setSystemTime(1000);
+    expect(time(1000 - 500)).toBe("500ms");   // diff = 500
+    expect(time(1000 - 999)).toBe("999ms");   // diff = 999
+    expect(time(1000)).toBe("0ms");           // diff = 0
+  });
+
+  it("formats diff >= 1000ms and < 60000ms as seconds", () => {
+    vi.setSystemTime(10_000);
+    expect(time(0)).toBe("10.0s");            // diff = 10_000ms
+
+    vi.setSystemTime(5_500);
+    expect(time(0)).toBe("5.5s");             // diff = 5_500ms
+  });
+
+  it("formats diff >= 60000ms as minutes", () => {
+    vi.setSystemTime(120_000);
+    expect(time(0)).toBe("2m");               // diff = 120_000ms
+
+    vi.setSystemTime(90_000);
+    expect(time(0)).toBe("1m");               // diff = 90_000ms (1.5m → floor = 1)
+  });
+
+  it("appends prefix when provided", () => {
+    vi.setSystemTime(500);
+    expect(time(0, "ago")).toBe("500ms ago");
+  });
+
+  it("has no prefix when not provided", () => {
+    vi.setSystemTime(500);
+    expect(time(0)).toBe("500ms");
+  });
+
+  it("diff = 0ms renders as '0ms'", () => {
+    vi.setSystemTime(100);
+    expect(time(100)).toBe("0ms");
+  });
+});

package/src/__tests__/format-value.test.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from "vitest";
+
+import { formatValue } from "../utils/format-value";
+
+describe("formatValue", () => {
+  it("formats null", () => {
+    expect(formatValue(null)).toBe("null");
+  });
+
+  it("formats undefined", () => {
+    expect(formatValue(undefined)).toBe("undefined");
+  });
+
+  it("wraps strings in double quotes", () => {
+    expect(formatValue("hello")).toBe('"hello"');
+    expect(formatValue("")).toBe('""');
+  });
+
+  it("formats numbers via String()", () => {
+    expect(formatValue(42)).toBe("42");
+    expect(formatValue(3.14)).toBe("3.14");
+    expect(formatValue(0)).toBe("0");
+    expect(formatValue(-1)).toBe("-1");
+  });
+
+  it("formats booleans via String()", () => {
+    expect(formatValue(true)).toBe("true");
+    expect(formatValue(false)).toBe("false");
+  });
+
+  it("JSON-stringifies plain objects", () => {
+    expect(formatValue({ a: 1 })).toBe('{"a":1}');
+    expect(formatValue({})).toBe("{}");
+  });
+
+  it("JSON-stringifies arrays", () => {
+    expect(formatValue([1, 2, 3])).toBe("[1,2,3]");
+    expect(formatValue([])).toBe("[]");
+  });
+
+  it("returns '[object]' for circular references", () => {
+    const obj: Record<string, unknown> = {};
+    obj.self = obj;
+    expect(formatValue(obj)).toBe("[object]");
+  });
+});

package/src/__tests__/registry.test.ts

@@ -0,0 +1,331 @@
+import { beforeEach, describe, it, expect, vi } from "vitest";
+
+import { Registry } from "../core/registry";
+
+// Reset singleton before each test to keep tests isolated
+beforeEach(() => {
+  (Registry as unknown as { _instance: Registry | null })._instance = null;
+});
+
+describe("Registry singleton", () => {
+  it("returns the same instance on subsequent accesses", () => {
+    const a = Registry.instance;
+    const b = Registry.instance;
+    expect(a).toBe(b);
+  });
+
+  it("creates a fresh instance after reset", () => {
+    const first = Registry.instance;
+    (Registry as unknown as { _instance: Registry | null })._instance = null;
+    const second = Registry.instance;
+    expect(first).not.toBe(second);
+  });
+});
+
+describe("Registry.registerSignal", () => {
+  it("stores the signal and emits 'signal:registered'", () => {
+    const registry = Registry.instance;
+    const handler = vi.fn();
+    registry.bus.on("signal:registered", handler);
+
+    const instance = {};
+    registry.registerSignal(instance, "count", 0, "Counter");
+
+    const signals = registry.getSignals();
+    expect(signals).toHaveLength(1);
+    expect(signals[0].label).toBe("count");
+    expect(signals[0].value).toBe(0);
+    expect(signals[0].componentName).toBe("Counter");
+    expect(handler).toHaveBeenCalledOnce();
+  });
+
+  it("builds the signal id as componentId:key", () => {
+    const registry = Registry.instance;
+    const instance = {};
+    registry.registerSignal(instance, "name", "Alice", "MyComp");
+    const signal = registry.getSignals()[0];
+    expect(signal.id).toMatch(/:.+/);
+    expect(signal.id.endsWith(":name")).toBe(true);
+  });
+
+  it("initialises history with the initial value", () => {
+    const registry = Registry.instance;
+    registry.registerSignal({}, "x", 42, "Comp");
+    const signal = registry.getSignals()[0];
+    expect(signal.history).toHaveLength(1);
+    expect(signal.history[0].value).toBe(42);
+  });
+});
+
+describe("Registry.updateSignal", () => {
+  it("updates the value and appends to history", () => {
+    const registry = Registry.instance;
+    const instance = {};
+    registry.registerSignal(instance, "count", 0, "Counter");
+    registry.updateSignal(instance, "count", 1, 0);
+
+    const signal = registry.getSignals()[0];
+    expect(signal.value).toBe(1);
+    expect(signal.history).toHaveLength(2);
+    expect(signal.history[1].value).toBe(1);
+  });
+
+  it("emits 'signal:changed' with old and new value", () => {
+    const registry = Registry.instance;
+    const handler = vi.fn();
+    registry.bus.on("signal:changed", handler);
+
+    const instance = {};
+    registry.registerSignal(instance, "val", "old", "Comp");
+    registry.updateSignal(instance, "val", "new", "old");
+
+    expect(handler).toHaveBeenCalledOnce();
+    const payload = handler.mock.calls[0][0] as { entry: { value: unknown }; oldValue: unknown };
+    expect(payload.entry.value).toBe("new");
+    expect(payload.oldValue).toBe("old");
+  });
+
+  it("caps history at 20 entries", () => {
+    const registry = Registry.instance;
+    const instance = {};
+    registry.registerSignal(instance, "n", 0, "Comp");
+    for (let i = 1; i <= 25; i++) {
+      registry.updateSignal(instance, "n", i, i - 1);
+    }
+    const signal = registry.getSignals()[0];
+    expect(signal.history.length).toBe(20);
+  });
+
+  it("does nothing when the signal does not exist", () => {
+    const registry = Registry.instance;
+    const handler = vi.fn();
+    registry.bus.on("signal:changed", handler);
+    registry.updateSignal({}, "missing", 1, 0);
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it("pushes a 'signal:change' timeline entry", () => {
+    const registry = Registry.instance;
+    const instance = {};
+    registry.registerSignal(instance, "x", 0, "Comp");
+    registry.updateSignal(instance, "x", 5, 0);
+    const timeline = registry.getTimeline();
+    const entry = timeline.find((t) => t.type === "signal:change");
+    expect(entry).toBeDefined();
+    expect(entry?.data.new).toBe(5);
+    expect(entry?.data.old).toBe(0);
+  });
+});
+
+describe("Registry.registerComponent", () => {
+  it("stores the component and emits 'component:registered'", () => {
+    const registry = Registry.instance;
+    const handler = vi.fn();
+    registry.bus.on("component:registered", handler);
+
+    const instance = {};
+    registry.registerComponent(instance, "MyComp");
+
+    const components = registry.getComponents();
+    expect(components).toHaveLength(1);
+    expect(components[0].name).toBe("MyComp");
+    expect(components[0].renderCount).toBe(0);
+    expect(components[0].status).toBe("mounted");
+    expect(handler).toHaveBeenCalledOnce();
+  });
+});
+
+describe("Registry.recordRender", () => {
+  it("increments renderCount and emits 'component:render'", () => {
+    const registry = Registry.instance;
+    const handler = vi.fn();
+    registry.bus.on("component:render", handler);
+
+    const instance = {};
+    registry.registerComponent(instance, "App");
+    registry.recordRender(instance, 5.2);
+
+    const comp = registry.getComponents()[0];
+    expect(comp.renderCount).toBe(1);
+    expect(comp.lastRenderDuration).toBe(5.2);
+    expect(handler).toHaveBeenCalledOnce();
+  });
+
+  it("accumulates renderCount across multiple renders", () => {
+    const registry = Registry.instance;
+    const instance = {};
+    registry.registerComponent(instance, "App");
+    registry.recordRender(instance, 1);
+    registry.recordRender(instance, 2);
+    registry.recordRender(instance, 3);
+    expect(registry.getComponents()[0].renderCount).toBe(3);
+  });
+
+  it("does nothing when the component does not exist", () => {
+    const registry = Registry.instance;
+    const handler = vi.fn();
+    registry.bus.on("component:render", handler);
+    registry.recordRender({}, 1);
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it("pushes a 'component:render' timeline entry", () => {
+    const registry = Registry.instance;
+    const instance = {};
+    registry.registerComponent(instance, "App");
+    registry.recordRender(instance, 3.5);
+    const entry = registry.getTimeline().find((t) => t.type === "component:render");
+    expect(entry).toBeDefined();
+    expect(entry?.data.duration).toBe(3.5);
+  });
+});
+
+describe("Registry.recordLifecycle", () => {
+  it("records a lifecycle event and emits 'lifecycle'", () => {
+    const registry = Registry.instance;
+    const handler = vi.fn();
+    registry.bus.on("lifecycle", handler);
+
+    const instance = {};
+    registry.registerComponent(instance, "Comp");
+    registry.recordLifecycle(instance, "onMount");
+
+    expect(handler).toHaveBeenCalledOnce();
+    const payload = handler.mock.calls[0][0] as { hook: string; name: string };
+    expect(payload.hook).toBe("onMount");
+    expect(payload.name).toBe("Comp");
+  });
+
+  it("removes component and its signals on 'onUnmount'", () => {
+    const registry = Registry.instance;
+    const instance = {};
+    registry.registerComponent(instance, "Comp");
+    registry.registerSignal(instance, "val", 1, "Comp");
+
+    expect(registry.getComponents()).toHaveLength(1);
+    expect(registry.getSignals()).toHaveLength(1);
+
+    registry.recordLifecycle(instance, "onUnmount");
+
+    expect(registry.getComponents()).toHaveLength(0);
+    expect(registry.getSignals()).toHaveLength(0);
+  });
+
+  it("emits 'component:unmount' on onUnmount", () => {
+    const registry = Registry.instance;
+    const handler = vi.fn();
+    registry.bus.on("component:unmount", handler);
+
+    const instance = {};
+    registry.registerComponent(instance, "Comp");
+    registry.recordLifecycle(instance, "onUnmount");
+
+    expect(handler).toHaveBeenCalledOnce();
+  });
+
+  it("maps onBeforeMount hook to 'component:mount' timeline type", () => {
+    const registry = Registry.instance;
+    const instance = {};
+    registry.registerComponent(instance, "Comp");
+    registry.recordLifecycle(instance, "onBeforeMount");
+    const entry = registry.getTimeline().find((t) => t.type === "component:mount");
+    expect(entry).toBeDefined();
+  });
+
+  it("maps onUnmount hook to 'component:unmount' timeline type", () => {
+    const registry = Registry.instance;
+    const instance = {};
+    registry.registerComponent(instance, "Comp");
+    registry.recordLifecycle(instance, "onUnmount");
+    const entry = registry.getTimeline().find((t) => t.type === "component:unmount");
+    expect(entry).toBeDefined();
+  });
+
+  it("maps other hooks to 'lifecycle' timeline type", () => {
+    const registry = Registry.instance;
+    const instance = {};
+    registry.registerComponent(instance, "Comp");
+    registry.recordLifecycle(instance, "onUpdate");
+    const entry = registry.getTimeline().find((t) => t.type === "lifecycle");
+    expect(entry).toBeDefined();
+  });
+
+  it("does nothing when the component does not exist", () => {
+    const registry = Registry.instance;
+    const handler = vi.fn();
+    registry.bus.on("lifecycle", handler);
+    registry.recordLifecycle({}, "onMount");
+    expect(handler).not.toHaveBeenCalled();
+  });
+});
+
+describe("Registry.recordMethodCall", () => {
+  it("pushes a 'method:call' timeline entry", () => {
+    const registry = Registry.instance;
+    const timelineHandler = vi.fn();
+    registry.bus.on("timeline:push", timelineHandler);
+
+    const instance = {};
+    registry.recordMethodCall(instance, "doSomething", [1, 2], "result", 3.14, "MyComp");
+
+    const entry = registry.getTimeline().find((t) => t.type === "method:call");
+    expect(entry).toBeDefined();
+    expect(entry?.label).toBe("MyComp.doSomething()");
+    expect(entry?.data.args).toEqual([1, 2]);
+    expect(entry?.data.result).toBe("result");
+    expect(entry?.data.duration).toBe(3.14);
+    expect(timelineHandler).toHaveBeenCalledOnce();
+  });
+});
+
+describe("Registry.getSignalsByComponent", () => {
+  it("returns only signals belonging to the given component", () => {
+    const registry = Registry.instance;
+    const inst1 = {};
+    const inst2 = {};
+    registry.registerComponent(inst1, "Comp1");
+    registry.registerComponent(inst2, "Comp2");
+    registry.registerSignal(inst1, "a", 1, "Comp1");
+    registry.registerSignal(inst2, "b", 2, "Comp2");
+
+    const comp1Id = registry.getComponents().find((c) => c.name === "Comp1")!.id;
+    const signals = registry.getSignalsByComponent(comp1Id);
+    expect(signals).toHaveLength(1);
+    expect(signals[0].label).toBe("a");
+  });
+});
+
+describe("Registry.recordLifecycle — onUnmount cross-component isolation", () => {
+  it("only removes signals belonging to the unmounted component", () => {
+    const registry = Registry.instance;
+    const inst1 = {};
+    const inst2 = {};
+    registry.registerComponent(inst1, "Comp1");
+    registry.registerComponent(inst2, "Comp2");
+    registry.registerSignal(inst1, "a", 1, "Comp1");
+    registry.registerSignal(inst2, "b", 2, "Comp2");
+
+    registry.recordLifecycle(inst1, "onUnmount");
+
+    // inst1's signal is gone, inst2's signal remains
+    const remaining = registry.getSignals();
+    expect(remaining).toHaveLength(1);
+    expect(remaining[0].label).toBe("b");
+  });
+});
+
+describe("Registry timeline cap", () => {
+  it("caps timeline at 200 entries", () => {
+    const registry = Registry.instance;
+    const instance = {};
+    registry.registerComponent(instance, "Comp");
+
+    // Each updateSignal pushes one timeline entry (plus the registerSignal = 0 entries)
+    registry.registerSignal(instance, "val", 0, "Comp");
+    for (let i = 1; i <= 210; i++) {
+      registry.updateSignal(instance, "val", i, i - 1);
+    }
+
+    expect(registry.getTimeline().length).toBe(200);
+  });
+});

package/src/__tests__/trace.test.ts

@@ -0,0 +1,149 @@
+import { beforeEach, describe, it, expect, vi } from "vitest";
+
+import { Registry } from "../core/registry";
+import { Trace } from "../decorators/trace";
+
+// Reset the Registry singleton before each test
+beforeEach(() => {
+  (Registry as unknown as { _instance: Registry | null })._instance = null;
+});
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyConstructor = new (...args: any[]) => any;
+
+function applyTrace<T extends AnyConstructor>(cls: T): T {
+  return Trace()(cls, {} as ClassDecoratorContext);
+}
+
+// ── Trace decorator ───────────────────────────────────────────────────────────
+
+describe("Trace — render()", () => {
+  it("records a render event after calling render()", () => {
+    class MyComp {
+      render() { return "html"; }
+    }
+    const Traced = applyTrace(MyComp);
+    const instance = new Traced() as { render: () => string };
+
+    const registry = Registry.instance;
+    registry.registerComponent(instance, "MyComp");
+
+    instance.render();
+
+    const renders = registry.getTimeline().filter((e) => e.type === "component:render");
+    expect(renders).toHaveLength(1);
+    expect(renders[0].label).toBe("<MyComp>");
+  });
+
+  it("returns the original render result", () => {
+    class Box {
+      render() { return "<div>box</div>"; }
+    }
+    const Traced = applyTrace(Box);
+    const instance = new Traced() as { render: () => string };
+
+    Registry.instance.registerComponent(instance, "Box");
+    expect(instance.render()).toBe("<div>box</div>");
+  });
+
+  it("wraps render even when it takes arguments", () => {
+    class Comp {
+      render(ctx: string) { return ctx; }
+    }
+    const Traced = applyTrace(Comp);
+    const instance = new Traced() as { render: (ctx: string) => string };
+
+    Registry.instance.registerComponent(instance, "Comp");
+    const result = instance.render("ctx-arg");
+    expect(result).toBe("ctx-arg");
+  });
+
+  it("does not wrap render when the class has no render method", () => {
+    class NoRender {}
+    const Traced = applyTrace(NoRender);
+    const instance = new Traced() as Record<string, unknown>;
+    expect(instance.render).toBeUndefined();
+  });
+});
+
+describe("Trace — onBeforeMount()", () => {
+  it("registers the component in the registry on onBeforeMount", () => {
+    class Widget {
+      onBeforeMount() {}
+    }
+    const Traced = applyTrace(Widget);
+    const instance = new Traced() as { onBeforeMount: () => void };
+
+    const registry = Registry.instance;
+    instance.onBeforeMount();
+
+    const components = registry.getComponents();
+    expect(components).toHaveLength(1);
+    expect(components[0].name).toBe("Widget");
+  });
+
+  it("calls the original onBeforeMount when it exists", () => {
+    const originalSpy = vi.fn();
+    class Panel {
+      onBeforeMount() { originalSpy(); }
+    }
+    const Traced = applyTrace(Panel);
+    const instance = new Traced() as { onBeforeMount: () => void };
+
+    instance.onBeforeMount();
+    expect(originalSpy).toHaveBeenCalled();
+  });
+
+  it("records a component:mount timeline event on onBeforeMount", () => {
+    class App {
+      onBeforeMount() {}
+    }
+    const Traced = applyTrace(App);
+    const instance = new Traced() as { onBeforeMount: () => void };
+
+    instance.onBeforeMount();
+
+    const mounts = Registry.instance.getTimeline().filter((e) => e.type === "component:mount");
+    expect(mounts).toHaveLength(1);
+  });
+});
+
+describe("Trace — lifecycle hooks", () => {
+  const hooks = ["onMount", "onUnmount", "onBeforeUpdate", "onUpdate", "onAfterUpdate"] as const;
+
+  for (const hook of hooks) {
+    it(`wraps ${hook} and records the lifecycle event`, () => {
+      class Comp {
+        onBeforeMount() {}
+      }
+      const Traced = applyTrace(Comp);
+      const instance = new Traced() as unknown as Record<string, () => void>;
+
+      // Register the component first via onBeforeMount
+      instance.onBeforeMount();
+
+      instance[hook]?.();
+
+      const events = Registry.instance.getTimeline().filter(
+        (e) => e.data.hook === hook,
+      );
+      expect(events.length).toBeGreaterThanOrEqual(1);
+    });
+
+    it(`${hook}: calls original implementation if it exists`, () => {
+      const spy = vi.fn();
+      class Comp {
+        onBeforeMount() {}
+      }
+      (Comp.prototype as unknown as Record<string, unknown>)[hook] = spy;
+      const Traced = applyTrace(Comp);
+      const instance = new Traced() as unknown as Record<string, () => void>;
+
+      instance.onBeforeMount();
+      instance[hook]?.();
+      expect(spy).toHaveBeenCalled();
+    });
+  }
+});