@praxisjs/devtools 0.2.33 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @praxisjs/devtools
 
+## 0.3.0
+
+### Minor Changes
+
+- 75115a9: DevTools: a Performance panel and `profiler` that record signal writes, effect runs and computed recomputations with their cost, grouped by the component that created each effect; `@Debug({ log, break })`, reactive observation of accessor fields (props included), promise-aware method timing, `@Trace({ slow })`, inert decorators in production builds, and a faster registry. Core exposes the observer hooks the profiler uses (`setReactiveObserver`, `setCurrentOwner`, `getEffectOwner` in `@praxisjs/core/internal`), which cost one null check while no observer is installed; the runtime marks the rendering component as the owner of the effects it creates.
+
+### Patch Changes
+
+- 75115a9: Published packages no longer contain their tests: package builds compile `src` without `src/**/__tests__` (through a `tsconfig.build.json`), and each package's `files` leaves test sources and stale compiled tests out of the tarball. `pnpm typecheck` still type-checks the tests.
+- 75115a9: Smaller production bundles. The framework and feature packages are marked `"sideEffects": false`, so bundlers leave out the modules an app does not use (`For`/`Index` and `selector()` were kept in every bundle by their shape keepers). `@praxisjs/core`'s graph gates its observer instrumentation on a boolean that minifiers fold away when no observer is ever installed. `@praxisjs/runtime` passes `Index`'s positional update to the list view, so `For`-only apps leave it out, and builds its event prop table from camel-case names. `@praxisjs/devtools` is built one file per module and its decorators check `process.env.NODE_ENV` inline, so `@Trace`/`@Debug` in production code no longer bundle the registry and the panel. `@praxisjs/vite-plugin` serves TypeScript's decorator helpers and the claimed fields' helper from one virtual module (`virtual:praxisjs/decorators`) instead of writing them into every decorated file, and replaces the identical copies `tsc` wrote into ES module libraries.
+- Updated dependencies [75115a9]
+- Updated dependencies [75115a9]
+- Updated dependencies [75115a9]
+- Updated dependencies [75115a9]
+- Updated dependencies [75115a9]
+- Updated dependencies [75115a9]
+- Updated dependencies [75115a9]
+- Updated dependencies [75115a9]
+- Updated dependencies [75115a9]
+- Updated dependencies [75115a9]
+- Updated dependencies [75115a9]
+- Updated dependencies [75115a9]
+- Updated dependencies [75115a9]
+- Updated dependencies [75115a9]
+- Updated dependencies [75115a9]
+- Updated dependencies [75115a9]
+  - @praxisjs/decorators@2.0.0
+  - @praxisjs/runtime@0.8.0
+  - @praxisjs/core@2.3.0
+  - @praxisjs/jsx@0.8.0
+  - @praxisjs/shared@0.3.2
+
+## 0.2.34
+
+### Patch Changes
+
+- Updated dependencies [7720b22]
+  - @praxisjs/runtime@0.7.1
+  - @praxisjs/jsx@0.7.7
+
 ## 0.2.33
 
 ### Patch Changes

package/assets/uno.generated.css

@@ -53,12 +53,15 @@
 .z-10{z-index:10;}
 .grid{display:grid;}
 .grid-cols-\[1\.2fr_0\.8fr_1fr_auto\]{grid-template-columns:1.2fr 0.8fr 1fr auto;}
+.grid-cols-\[1\.4fr_0\.6fr_0\.8fr_0\.8fr\]{grid-template-columns:1.4fr 0.6fr 0.8fr 0.8fr;}
+.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
 .m6{margin:1.5rem;}
 .mx-1{margin-left:0.25rem;margin-right:0.25rem;}
 .mr-\[2px\]{margin-right:2px;}
 .ms{margin-inline-start:1rem;}
 .mt-1{margin-top:0.25rem;}
 .box-border{box-sizing:border-box;}
+.inline{display:inline;}
 .inline-block{display:inline-block;}
 .h-\[13px\]{height:13px;}
 .h-\[22px\]{height:22px;}
@@ -108,6 +111,7 @@
 .gap-1{gap:0.25rem;}
 .gap-2{gap:0.5rem;}
 .gap-3{gap:0.75rem;}
+.gap-px{gap:1px;}
 .overflow-hidden{overflow:hidden;}
 .overflow-y-auto{overflow-y:auto;}
 .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@@ -168,6 +172,7 @@
 .text-\[10px\]{font-size:10px;}
 .text-\[11px\]{font-size:11px;}
 .text-\[12px\]{font-size:12px;}
+.text-\[13px\]{font-size:13px;}
 .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)) /* #0ea57a */;}

package/dist/assets/logo.svg.js

@@ -0,0 +1,4 @@
+//#region assets/logo.svg
+var e = "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";
+//#endregion
+export { e as default };

package/dist/assets/tailwind-v4.css.js

@@ -0,0 +1,4 @@
+//#region ../../../node_modules/.pnpm/@unocss+reset@66.6.7/node_modules/@unocss/reset/tailwind-v4.css?inline
+var e = "*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}";
+//#endregion
+export { e as default };

package/dist/assets/uno.generated.css.js

@@ -0,0 +1,4 @@
+//#region assets/uno.generated.css?inline
+var e = "*,:before,:after,::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 #0000;--un-ring-shadow:0 0 #0000;--un-shadow-inset: ;--un-shadow:0 0 #0000;--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:#93c5fd80;--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }:host{all:initial;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;display:block}*{box-sizing:border-box}input::placeholder{color:#6f6a8f}input:focus{outline:none;box-shadow:0 0 0 2px #9b90e64d}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#9b90e633;border-radius:2px}::-webkit-scrollbar-thumb:hover{background:#9b90e666}.container{width:100%}@media (width>=640px){.container{max-width:640px}}@media (width>=768px){.container{max-width:768px}}@media (width>=1024px){.container{max-width:1024px}}@media (width>=1280px){.container{max-width:1280px}}@media (width>=1536px){.container{max-width:1536px}}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.bottom-0{bottom:0}.bottom-5{bottom:1.25rem}.left-0{left:0}.right-0{right:0}.right-5{right:1.25rem}.top-0{top:0}.top-full{top:100%}.z-\\[2147483647\\]{z-index:2147483647}.z-10{z-index:10}.grid{display:grid}.grid-cols-\\[1\\.2fr_0\\.8fr_1fr_auto\\]{grid-template-columns:1.2fr .8fr 1fr auto}.grid-cols-\\[1\\.4fr_0\\.6fr_0\\.8fr_0\\.8fr\\]{grid-template-columns:1.4fr .6fr .8fr .8fr}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.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{display:inline}.inline-block{display:inline-block}.h-\\[13px\\]{height:13px}.h-\\[22px\\]{height:22px}.h-\\[2px\\]{height:2px}.h-\\[32px\\]{height:32px}.h-\\[6px\\]{height:6px}.h-1,.h1{height:.25rem}.h-10{height:2.5rem}.h-3,.h3{height:.75rem}.h-7{height:1.75rem}.h-full{height:100%}.h-screen{height:100vh}.h2{height:.5rem}.max-w-\\[200px\\]{max-width:200px}.min-w-0{min-width:0}.w-\\[13px\\]{width:13px}.w-\\[22px\\]{width:22px}.w-\\[2px\\]{width:2px}.w-\\[6px\\]{width:6px}.w-1{width:.25rem}.w-10{width:2.5rem}.w-12{width:3rem}.w-4{width:1rem}.w-full{width:100%}.w-px{width:1px}.flex{display:flex}.flex-1{flex:1}.shrink-0{flex-shrink:0}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.cursor-\\[ew-resize\\]{cursor:ew-resize}.cursor-\\[ns-resize\\]{cursor:ns-resize}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;user-select:none}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-\\[2px\\]{gap:2px}.gap-\\[3px\\]{gap:3px}.gap-\\[6px\\]{gap:6px}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-px{gap:1px}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.b,.border{border-width:1px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-border{--un-border-opacity:.25;border-color:rgba(155, 144, 230, var(--un-border-opacity))}.border-warn{--un-border-opacity:1;border-color:rgb(217 119 6/var(--un-border-opacity))}.hover\\:border-accent:hover{--un-border-opacity:1;border-color:rgb(155 144 230/var(--un-border-opacity))}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-r{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.bg-\\[rgba\\(124\\,109\\,214\\,0\\.14\\)\\]{--un-bg-opacity:.14;background-color:rgba(124, 109, 214, var(--un-bg-opacity)) }.bg-\\[rgba\\(14\\,165\\,122\\,0\\.14\\)\\]{--un-bg-opacity:.14;background-color:rgba(14, 165, 122, var(--un-bg-opacity)) }.bg-\\[rgba\\(155\\,144\\,230\\,0\\.14\\)\\]{--un-bg-opacity:.14;background-color:rgba(155, 144, 230, var(--un-bg-opacity)) }.bg-\\[rgba\\(217\\,119\\,6\\,0\\.14\\)\\]{--un-bg-opacity:.14;background-color:rgba(217, 119, 6, var(--un-bg-opacity)) }.bg-\\[rgba\\(220\\,38\\,38\\,0\\.14\\)\\]{--un-bg-opacity:.14;background-color:rgba(220, 38, 38, var(--un-bg-opacity)) }.bg-\\[rgba\\(74\\,222\\,128\\,0\\.12\\)\\]{--un-bg-opacity:.12;background-color:rgba(74, 222, 128, var(--un-bg-opacity)) }.bg-accent{--un-bg-opacity:1;background-color:rgb(155 144 230/var(--un-bg-opacity)) }.bg-bg{--un-bg-opacity:1;background-color:rgb(15 13 23/var(--un-bg-opacity)) }.bg-border{--un-bg-opacity:.25;background-color:rgba(155, 144, 230, var(--un-bg-opacity)) }.bg-header{--un-bg-opacity:1;background-color:rgb(22 19 38/var(--un-bg-opacity)) }.bg-input,.bg-section{--un-bg-opacity:1;background-color:rgb(27 24 48/var(--un-bg-opacity)) }.bg-selected{--un-bg-opacity:1;background-color:rgb(34 30 61/var(--un-bg-opacity)) }.bg-soft{--un-bg-opacity:.18;background-color:rgba(155, 144, 230, var(--un-bg-opacity)) }.bg-subtle{--un-bg-opacity:1;background-color:rgb(111 106 143/var(--un-bg-opacity)) }.bg-success{--un-bg-opacity:1;background-color:rgb(14 165 122/var(--un-bg-opacity)) }.bg-transparent{background-color:#0000}.hover\\:bg-accent:hover{--un-bg-opacity:1;background-color:rgb(155 144 230/var(--un-bg-opacity)) }.hover\\:bg-section:hover{--un-bg-opacity:1;background-color:rgb(27 24 48/var(--un-bg-opacity)) }.hover\\:bg-soft:hover{--un-bg-opacity:.18;background-color:rgba(155, 144, 230, var(--un-bg-opacity)) }.p-1{padding:.25rem}.px{padding-left:1rem;padding-right:1rem}.px-\\[6px\\]{padding-left:6px;padding-right:6px}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-\\[2px\\]{padding-top:2px;padding-bottom:2px}.py-\\[3px\\]{padding-top:3px;padding-bottom:3px}.py-\\[4px\\]{padding-top:4px;padding-bottom:4px}.py-\\[5px\\]{padding-top:5px;padding-bottom:5px}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pl-\\[10px\\]{padding-left:10px}.pl-\\[56px\\]{padding-left:56px}.pl-1{padding-left:.25rem}.pr-\\[14px\\]{padding-right:14px}.pr-3{padding-right:.75rem}.text-center{text-align:center}.text-right{text-align:right}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.text-\\[12px\\]{font-size:12px}.text-\\[13px\\]{font-size:13px}.text-\\[20px\\]{font-size:20px}.text-\\[9px\\]{font-size:9px}.text-\\[\\#0ea57a\\]{--un-text-opacity:1;color:rgb(14 165 122/var(--un-text-opacity)) }.text-\\[\\#4ade80\\]{--un-text-opacity:1;color:rgb(74 222 128/var(--un-text-opacity)) }.text-\\[\\#7c6dd6\\]{--un-text-opacity:1;color:rgb(124 109 214/var(--un-text-opacity)) }.text-\\[\\#9b90e6\\],.text-accent{--un-text-opacity:1;color:rgb(155 144 230/var(--un-text-opacity)) }.text-\\[\\#d97706\\],.text-warn{--un-text-opacity:1;color:rgb(217 119 6/var(--un-text-opacity)) }.text-\\[\\#dc2626\\]{--un-text-opacity:1;color:rgb(220 38 38/var(--un-text-opacity)) }.text-muted{--un-text-opacity:1;color:rgb(199 195 230/var(--un-text-opacity)) }.text-subtle{--un-text-opacity:1;color:rgb(111 106 143/var(--un-text-opacity)) }.text-text,.hover\\:text-text:hover{--un-text-opacity:1;color:rgb(244 242 255/var(--un-text-opacity)) }.color-white{--un-text-opacity:1;color:rgb(255 255 255/var(--un-text-opacity)) }.hover\\:color-muted:hover{--un-text-opacity:1;color:rgb(199 195 230/var(--un-text-opacity)) }.font-bold{font-weight:700}.font-semibold{font-weight:600}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.tracking-\\[0\\.07em\\]{letter-spacing:.07em}.tracking-\\[0\\.12em\\]{letter-spacing:.12em}.tracking-widest{letter-spacing:.1em}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.uppercase{text-transform:uppercase}.tabular-nums{--un-numeric-spacing:tabular-nums;font-variant-numeric:var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)}.tab{tab-size:4}.shadow{--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color,#0000001a),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color,#0000001a);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}.shadow-\\[0_8px_32px_rgba\\(0\\,0\\,0\\,0\\.7\\)\\]{--un-shadow:0 8px 32px var(--un-shadow-color,#000000b3);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}.shadow-lg{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color,#0000001a),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color,#0000001a);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}.hover\\:shadow-\\[0_8px_32px_rgba\\(56\\,189\\,248\\,0\\.1\\)\\]:hover{--un-shadow:0 8px 32px var(--un-shadow-color,#38bdf81a);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}.outline-none{outline-offset:2px;outline:2px solid #0000}.filter{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-shadow{transition-property:box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-100{transition-duration:.1s}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}";
+//#endregion
+export { e as default };

package/dist/core/event-bus.js

@@ -0,0 +1,21 @@
+//#region src/core/event-bus.ts
+var e = class {
+	handlers = /* @__PURE__ */ new Map();
+	on(e, t) {
+		return this.handlers.has(e) || this.handlers.set(e, /* @__PURE__ */ new Set()), this.handlers.get(e).add(t), () => this.handlers.get(e)?.delete(t);
+	}
+	emit(e, t) {
+		let n = this.handlers.get(e);
+		if (!n) return;
+		let r = [];
+		for (let e of n) try {
+			e(t);
+		} catch (e) {
+			r.push(e);
+		}
+		if (r.length === 1) throw r[0];
+		if (r.length > 1) throw AggregateError(r, "Multiple event handler errors");
+	}
+};
+//#endregion
+export { e as EventBus };

package/dist/core/profiler.js

@@ -0,0 +1,79 @@
+import { EventBus as e } from "./event-bus.js";
+import { setReactiveObserver as t } from "@praxisjs/core/internal";
+//#region src/core/profiler.ts
+var n = "(no component)", r = class {
+	bus = new e();
+	recording = !1;
+	startedAt = 0;
+	stoppedAt = 0;
+	writes = 0;
+	effectRuns = 0;
+	effectMs = 0;
+	computeRuns = 0;
+	computeMs = 0;
+	byOwner = /* @__PURE__ */ new Map();
+	previous = null;
+	notifyScheduled = !1;
+	mutedDepth = 0;
+	get isRecording() {
+		return this.recording;
+	}
+	muted(e) {
+		this.mutedDepth++;
+		try {
+			return e();
+		} finally {
+			this.mutedDepth--;
+		}
+	}
+	start() {
+		this.recording || (this.reset(), this.recording = !0, this.startedAt = performance.now(), this.previous = t(this), this.changed());
+	}
+	stop() {
+		this.recording && (this.recording = !1, this.stoppedAt = performance.now(), t(this.previous), this.previous = null, this.changed());
+	}
+	reset() {
+		this.writes = 0, this.effectRuns = 0, this.effectMs = 0, this.computeRuns = 0, this.computeMs = 0, this.byOwner.clear(), this.startedAt = this.stoppedAt = performance.now(), this.changed();
+	}
+	write(e) {
+		this.mutedDepth > 0 || (this.writes++, this.changed());
+	}
+	compute(e, t) {
+		this.mutedDepth > 0 || (this.computeRuns++, this.computeMs += t, this.changed());
+	}
+	effect(e, t, r) {
+		if (this.mutedDepth > 0) return;
+		this.effectRuns++, this.effectMs += t;
+		let i = this.byOwner.get(r);
+		i === void 0 && (i = {
+			name: r === void 0 ? n : r.constructor.name,
+			effectRuns: 0,
+			effectMs: 0,
+			maxMs: 0
+		}, this.byOwner.set(r, i)), i.effectRuns++, i.effectMs += t, t > i.maxMs && (i.maxMs = t), this.changed();
+	}
+	snapshot() {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of this.byOwner.values()) {
+			let n = e.get(t.name);
+			n === void 0 ? e.set(t.name, { ...t }) : (n.effectRuns += t.effectRuns, n.effectMs += t.effectMs, n.maxMs = Math.max(n.maxMs, t.maxMs));
+		}
+		return {
+			recording: this.recording,
+			duration: (this.recording ? performance.now() : this.stoppedAt) - this.startedAt,
+			writes: this.writes,
+			effectRuns: this.effectRuns,
+			effectMs: this.effectMs,
+			computeRuns: this.computeRuns,
+			computeMs: this.computeMs,
+			owners: [...e.values()].sort((e, t) => t.effectMs - e.effectMs || t.effectRuns - e.effectRuns)
+		};
+	}
+	changed() {
+		this.notifyScheduled || (this.notifyScheduled = !0, setTimeout(() => {
+			this.notifyScheduled = !1, this.bus.emit("profile:changed", null);
+		}, 0));
+	}
+};
+//#endregion
+export { r as Profiler };

package/dist/core/registry.js

@@ -0,0 +1,147 @@
+import { EventBus as e } from "./event-bus.js";
+import { Profiler as t } from "./profiler.js";
+//#region src/core/registry.ts
+var n = 20, r = 200, i = 0;
+function a() {
+	return `v${(++i).toString()}_${Date.now().toString(36)}`;
+}
+var o = class i {
+	static _instance = null;
+	static get instance() {
+		return i._instance ??= new i(), i._instance;
+	}
+	bus = new e();
+	profiler = new t();
+	instanceIds = /* @__PURE__ */ new WeakMap();
+	signals = /* @__PURE__ */ new Map();
+	signalsByComponent = /* @__PURE__ */ new Map();
+	components = /* @__PURE__ */ new Map();
+	timeline = [];
+	getInstanceId(e) {
+		return this.instanceIds.has(e) || this.instanceIds.set(e, a()), this.instanceIds.get(e);
+	}
+	registerSignal(e, t, n, r) {
+		let i = this.getInstanceId(e), a = `${i}:${t}`, o = {
+			id: a,
+			label: t,
+			componentId: i,
+			componentName: r,
+			value: n,
+			history: [{
+				value: n,
+				timestamp: Date.now()
+			}],
+			changedAt: Date.now()
+		};
+		this.signals.set(a, o);
+		let s = this.signalsByComponent.get(i);
+		s === void 0 && (s = /* @__PURE__ */ new Set(), this.signalsByComponent.set(i, s)), s.add(a), this.bus.emit("signal:registered", o);
+	}
+	updateSignal(e, t, r, i) {
+		let a = `${this.getInstanceId(e)}:${t}`, o = this.signals.get(a);
+		if (!o) return;
+		let s = Date.now();
+		o.history.push({
+			value: r,
+			timestamp: s
+		}), o.history.length > n && o.history.shift(), o.value = r, o.changedAt = s, this.bus.emit("signal:changed", {
+			entry: o,
+			oldValue: i
+		}), this.pushTimeline({
+			type: "signal:change",
+			label: `${o.componentName}.${t}`,
+			data: {
+				old: i,
+				new: r,
+				signalId: a
+			}
+		});
+	}
+	registerComponent(e, t) {
+		let n = this.getInstanceId(e), r = {
+			id: n,
+			name: t,
+			renderCount: 0,
+			lastRenderDuration: 0,
+			mountedAt: Date.now(),
+			status: "mounted",
+			lifecycle: []
+		};
+		this.components.set(n, r), this.bus.emit("component:registered", r);
+	}
+	recordRender(e, t) {
+		let n = this.getInstanceId(e), r = this.components.get(n);
+		r && (r.renderCount++, r.lastRenderDuration = t, this.bus.emit("component:render", { ...r }), this.pushTimeline({
+			type: "component:render",
+			label: `<${r.name}>`,
+			data: {
+				componentId: n,
+				duration: +t.toFixed(3),
+				renderCount: r.renderCount
+			}
+		}));
+	}
+	recordLifecycle(e, t) {
+		let n = this.getInstanceId(e), r = this.components.get(n);
+		if (!r) return;
+		let i = {
+			hook: t,
+			timestamp: Date.now()
+		};
+		r.lifecycle.push(i), this.bus.emit("lifecycle", {
+			componentId: n,
+			name: r.name,
+			hook: t
+		});
+		let a = t === "onUnmount" ? "component:unmount" : t === "onBeforeMount" ? "component:mount" : "lifecycle";
+		if (this.pushTimeline({
+			type: a,
+			label: `<${r.name}>.${t}`,
+			data: {
+				componentId: n,
+				hook: t
+			}
+		}), t === "onUnmount") {
+			r.status = "unmounted", this.bus.emit("component:unmount", { ...r }), this.components.delete(n);
+			for (let e of this.signalsByComponent.get(n) ?? []) this.signals.delete(e);
+			this.signalsByComponent.delete(n);
+		}
+	}
+	recordMethodCall(e, t, n, r, i, a) {
+		let o = this.getInstanceId(e);
+		this.pushTimeline({
+			type: "method:call",
+			label: `${a}.${t}()`,
+			data: {
+				componentId: o,
+				args: n,
+				result: r,
+				duration: +i.toFixed(3)
+			}
+		});
+	}
+	getSignals() {
+		return [...this.signals.values()];
+	}
+	getComponents() {
+		return [...this.components.values()];
+	}
+	getTimeline() {
+		return [...this.timeline];
+	}
+	getSignalsByComponent(e) {
+		let t = [];
+		for (let n of this.signalsByComponent.get(e) ?? []) t.push(this.signals.get(n));
+		return t;
+	}
+	pushTimeline(e) {
+		let t = {
+			id: a(),
+			timestamp: Date.now(),
+			...e
+		};
+		this.timeline.push(t), this.timeline.length > r && this.timeline.shift(), this.bus.emit("timeline:push", t);
+	}
+};
+//#endregion
+export { o as Registry };

package/dist/decorators/debug.js

@@ -0,0 +1,126 @@
+import { Registry as e } from "../core/registry.js";
+import { computed as t, effect as n, untrack as r } from "@praxisjs/core/internal";
+import { createFieldDecorator as i, createGetterObserverDecorator as a, createMethodDecorator as o } from "@praxisjs/decorators";
+//#region src/decorators/debug.ts
+function s(e) {
+	return typeof e == "function" && typeof e.subscribe == "function" && !("set" in e);
+}
+function c(e) {
+	return e.constructor.name;
+}
+function l(e) {
+	return (typeof e == "object" || typeof e == "function") && e !== null && typeof e.then == "function";
+}
+function u(e) {
+	let { log: t, break: n } = e;
+	return !t && !n ? null : (e, i, a) => {
+		r(() => {
+			if (t === "trace" ? console.trace(`[PraxisJS] ${e}`, i, a) : t && console.log(`[PraxisJS] ${e}`, i, a), n === !0 || typeof n == "function" && n(i, a)) debugger;
+		});
+	};
+}
+function d(d = {}) {
+	if (process.env.NODE_ENV === "production") return (() => void 0);
+	let f = u(d);
+	return function(u, p) {
+		let m = d.label ?? p.name;
+		if (p.kind === "method") {
+			let t = u;
+			o({ wrap(n, r, i) {
+				return function(...n) {
+					let r = c(this);
+					f?.(`${r}.${m}()`, n, void 0);
+					let i = performance.now(), a = (t) => {
+						e.instance.recordMethodCall(this, m, n, t, performance.now() - i, r);
+					}, o;
+					try {
+						o = t.apply(this, n);
+					} catch (e) {
+						throw a(`throw ${String(e)}`), e;
+					}
+					return l(o) ? o.then((e) => {
+						a(e);
+					}, (e) => {
+						a(`reject ${String(e)}`);
+					}) : a(o), o;
+				};
+			} })(t, p);
+			return;
+		}
+		if (p.kind === "getter") {
+			let n = u;
+			a({ observe(n, r, i) {
+				let a = c(r);
+				queueMicrotask(() => {
+					let i = t(() => n.call(r)), o = !0, s = i();
+					e.instance.registerSignal(r, m, s, a), i.subscribe((t) => {
+						if (o) {
+							o = !1;
+							return;
+						}
+						e.instance.updateSignal(r, m, t, s), f?.(`${a}.${m}`, t, s), s = t;
+					});
+				});
+			} })(n, p);
+			return;
+		}
+		i({ bind(t, i, a) {
+			let o = c(t);
+			if (Object.getOwnPropertyDescriptor(t, i)?.get !== void 0) {
+				let a = () => t[i], s, c = !0;
+				return { onUnmount: n(() => {
+					let n = a();
+					if (c) {
+						c = !1, s = n, r(() => {
+							e.instance.registerSignal(t, m, n, o);
+						});
+						return;
+					}
+					if (Object.is(n, s)) return;
+					let i = s;
+					s = n, r(() => {
+						e.instance.updateSignal(t, m, n, i);
+					}), f?.(`${o}.${m}`, n, i);
+				}) };
+			}
+			let l = a;
+			if (!s(l)) return l !== void 0 && console.warn(`[PraxisJS DevTools] @Debug() on "${o}.${i}": expected a computed() value but got ${typeof l}. Skipping.`), {};
+			let u;
+			function d(n) {
+				let r = !0, i = n(), a = n.subscribe((n) => {
+					if (r) {
+						r = !1;
+						return;
+					}
+					e.instance.updateSignal(t, m, n, i), f?.(`${o}.${m}`, n, i), i = n;
+				});
+				return e.instance.registerSignal(t, m, i, o), a;
+			}
+			return u = {
+				computed: l,
+				unsub: d(l)
+			}, {
+				descriptor: {
+					get() {
+						return u.computed;
+					},
+					set(e) {
+						if (u.unsub(), !s(e)) {
+							console.warn(`[PraxisJS DevTools] @Debug() on "${o}.${i}": expected a computed() value but got ${typeof e}. Skipping.`);
+							return;
+						}
+						u = {
+							computed: e,
+							unsub: d(e)
+						};
+					}
+				},
+				onUnmount() {
+					u.unsub();
+				}
+			};
+		} })(void 0, p);
+	};
+}
+//#endregion
+export { d as Debug };

package/dist/decorators/trace.js

@@ -0,0 +1,45 @@
+import { Registry as e } from "../core/registry.js";
+import { ClassBehavior as t, createClassDecorator as n } from "@praxisjs/decorators";
+//#region src/decorators/trace.ts
+var r = [
+	"onBeforeUpdate",
+	"onUpdate",
+	"onAfterUpdate"
+], i = class extends t {
+	slow;
+	constructor(e) {
+		super(), this.slow = e;
+	}
+	create(t) {
+		let n = e.instance, r = this.slow;
+		return {
+			onMount() {
+				n.recordLifecycle(t, "onMount");
+			},
+			onUnmount() {
+				n.recordLifecycle(t, "onUnmount");
+			},
+			render(e) {
+				let i = performance.now(), a = e(), o = performance.now() - i;
+				return n.recordRender(t, o), r !== void 0 && o > r && console.warn(`[PraxisJS DevTools] <${t.constructor.name}> rendered in ${o.toFixed(1)} ms (over ${String(r)} ms).`), a;
+			}
+		};
+	}
+	initialize(t, n) {
+		let i = n.name, a = e.instance, o = t.prototype, s = o.onBeforeMount;
+		o.onBeforeMount = function(...e) {
+			return a.registerComponent(this, i), a.recordLifecycle(this, "onBeforeMount"), s?.call(this, ...e);
+		};
+		for (let e of r) {
+			let t = o[e];
+			o[e] = function(...n) {
+				return a.recordLifecycle(this, e), t?.call(this, ...n);
+			};
+		}
+	}
+}, a;
+function o(e = {}) {
+	return process.env.NODE_ENV === "production" ? (e, t) => e : n(e.slow === void 0 ? a ??= new i(void 0) : new i(e.slow));
+}
+//#endregion
+export { o as Trace };

package/dist/icons/ellipsis-vertical.js

@@ -0,0 +1,38 @@
+import { _$element as e, _$template as t } from "@praxisjs/runtime";
+import { StatelessComponent as n } from "@praxisjs/core";
+import { Component as r } from "@praxisjs/decorators";
+//#region src/icons/ellipsis-vertical.tsx
+var i = /* @__PURE__ */ t(() => e("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round",
+	class: "lucide lucide-ellipsis-vertical-icon lucide-ellipsis-vertical"
+}, [
+	e("circle", {
+		cx: "12",
+		cy: "12",
+		r: "1"
+	}, null),
+	e("circle", {
+		cx: "12",
+		cy: "5",
+		r: "1"
+	}, null),
+	e("circle", {
+		cx: "12",
+		cy: "19",
+		r: "1"
+	}, null)
+])), a = @r() class extends n {
+	render() {
+		return i();
+	}
+};
+//#endregion
+export { a as EllipsisVerticalIcon };

package/dist/icons/panel-bottom.js

@@ -0,0 +1,28 @@
+import { _$element as e, _$template as t } from "@praxisjs/runtime";
+import { StatelessComponent as n } from "@praxisjs/core";
+import { Component as r } from "@praxisjs/decorators";
+//#region src/icons/panel-bottom.tsx
+var i = /* @__PURE__ */ t(() => e("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round",
+	class: "lucide lucide-panel-bottom-icon lucide-panel-bottom"
+}, [e("rect", {
+	width: "18",
+	height: "18",
+	x: "3",
+	y: "3",
+	rx: "2"
+}, null), e("path", { d: "M3 15h18" }, null)])), a = @r() class extends n {
+	render() {
+		return i();
+	}
+};
+//#endregion
+export { a as PanelBottomIcon };

package/dist/icons/panel-left.js

@@ -0,0 +1,28 @@
+import { _$element as e, _$template as t } from "@praxisjs/runtime";
+import { StatelessComponent as n } from "@praxisjs/core";
+import { Component as r } from "@praxisjs/decorators";
+//#region src/icons/panel-left.tsx
+var i = /* @__PURE__ */ t(() => e("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round",
+	class: "lucide lucide-panel-left-icon lucide-panel-left"
+}, [e("rect", {
+	width: "18",
+	height: "18",
+	x: "3",
+	y: "3",
+	rx: "2"
+}, null), e("path", { d: "M9 3v18" }, null)])), a = @r() class extends n {
+	render() {
+		return i();
+	}
+};
+//#endregion
+export { a as PanelLeftIcon };

package/dist/icons/panel-right.js

@@ -0,0 +1,28 @@
+import { _$element as e, _$template as t } from "@praxisjs/runtime";
+import { StatelessComponent as n } from "@praxisjs/core";
+import { Component as r } from "@praxisjs/decorators";
+//#region src/icons/panel-right.tsx
+var i = /* @__PURE__ */ t(() => e("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round",
+	class: "lucide lucide-panel-right-icon lucide-panel-right"
+}, [e("rect", {
+	width: "18",
+	height: "18",
+	x: "3",
+	y: "3",
+	rx: "2"
+}, null), e("path", { d: "M15 3v18" }, null)])), a = @r() class extends n {
+	render() {
+		return i();
+	}
+};
+//#endregion
+export { a as PanelRightIcon };