@praxisjs/devtools 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# @praxisjs/devtools
+
+## 0.1.0
+
+### Minor Changes
+
+- aaf7dab: Initial beta release
+
+### Patch Changes
+
+- Updated dependencies [aaf7dab]
+  - @praxisjs/core@0.1.0
+  - @praxisjs/jsx@0.1.0
+  - @praxisjs/runtime@0.1.0
+  - @praxisjs/shared@0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026-present Mateus Martins
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/assets/logo.svg

@@ -0,0 +1,9 @@
+<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M605.411 445.66L641.322 498.293L641.342 498.278L697.538 578.57L742.673 512.806L512.5 178.878L281.327 512.806L512.5 848.182L603.519 715.561L650.559 782.134L512.701 983L187 510.478L512.701 40L837 510.478L698.206 712.709L668.895 671.104L604.033 578.775L512 712.504L373.199 511.5L512.233 309.092L584.13 414.469L536.746 480.456L513.69 445.66L466.305 511.5L512.166 577.425L556.48 513.91L605.411 445.66Z" fill="url(#paint0_linear_3024_20)"/>
+<defs>
+<linearGradient id="paint0_linear_3024_20" x1="512" y1="40" x2="512" y2="983" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9B76FF" stop-opacity="0.86"/>
+<stop offset="1" stop-color="#2D246B"/>
+</linearGradient>
+</defs>
+</svg>

package/assets/uno.generated.css

@@ -0,0 +1,205 @@
+/* layer: preflights */
+*,::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 / 0.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 / 0.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 rgba(155,144,230,0.3);
+        }
+
+        ::-webkit-scrollbar { width: 4px; height: 4px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb {
+          background: rgba(155,144,230,0.2);
+          border-radius: 2px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+          background: rgba(155,144,230,0.4);
+        }
+      
+/* layer: shortcuts */
+.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;}
+}
+/* layer: default */
+.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 0.8fr 1fr auto;}
+.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-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: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;}
+.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:0.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:0.25rem;}
+.gap-2{gap:0.5rem;}
+.gap-3{gap:0.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:0.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:0.25rem;}
+.rounded-full{border-radius:9999px;}
+.rounded-lg{border-radius:0.5rem;}
+.rounded-md{border-radius:0.375rem;}
+.rounded-xl{border-radius:0.75rem;}
+.rounded-r{border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem;}
+.bg-\[rgba\(124\,109\,214\,0\.14\)\]{--un-bg-opacity:0.14;background-color:rgba(124, 109, 214, var(--un-bg-opacity)) /* rgba(124,109,214,0.14) */;}
+.bg-\[rgba\(14\,165\,122\,0\.14\)\]{--un-bg-opacity:0.14;background-color:rgba(14, 165, 122, var(--un-bg-opacity)) /* rgba(14,165,122,0.14) */;}
+.bg-\[rgba\(155\,144\,230\,0\.14\)\]{--un-bg-opacity:0.14;background-color:rgba(155, 144, 230, var(--un-bg-opacity)) /* rgba(155,144,230,0.14) */;}
+.bg-\[rgba\(217\,119\,6\,0\.14\)\]{--un-bg-opacity:0.14;background-color:rgba(217, 119, 6, var(--un-bg-opacity)) /* rgba(217,119,6,0.14) */;}
+.bg-\[rgba\(220\,38\,38\,0\.14\)\]{--un-bg-opacity:0.14;background-color:rgba(220, 38, 38, var(--un-bg-opacity)) /* rgba(220,38,38,0.14) */;}
+.bg-\[rgba\(74\,222\,128\,0\.12\)\]{--un-bg-opacity:0.12;background-color:rgba(74, 222, 128, var(--un-bg-opacity)) /* rgba(74,222,128,0.12) */;}
+.bg-accent{--un-bg-opacity:1;background-color:rgb(155 144 230 / var(--un-bg-opacity)) /* #9b90e6 */;}
+.bg-bg{--un-bg-opacity:1;background-color:rgb(15 13 23 / var(--un-bg-opacity)) /* #0f0d17 */;}
+.bg-border{--un-bg-opacity:0.25;background-color:rgba(155, 144, 230, var(--un-bg-opacity)) /* rgba(155,144,230,0.25) */;}
+.bg-header{--un-bg-opacity:1;background-color:rgb(22 19 38 / var(--un-bg-opacity)) /* #161326 */;}
+.bg-input,
+.bg-section{--un-bg-opacity:1;background-color:rgb(27 24 48 / var(--un-bg-opacity)) /* #1b1830 */;}
+.bg-selected{--un-bg-opacity:1;background-color:rgb(34 30 61 / var(--un-bg-opacity)) /* #221e3d */;}
+.bg-soft{--un-bg-opacity:0.18;background-color:rgba(155, 144, 230, var(--un-bg-opacity)) /* rgba(155,144,230,0.18) */;}
+.bg-subtle{--un-bg-opacity:1;background-color:rgb(111 106 143 / var(--un-bg-opacity)) /* #6f6a8f */;}
+.bg-success{--un-bg-opacity:1;background-color:rgb(14 165 122 / var(--un-bg-opacity)) /* #0ea57a */;}
+.bg-transparent{background-color:transparent /* transparent */;}
+.hover\:bg-accent:hover{--un-bg-opacity:1;background-color:rgb(155 144 230 / var(--un-bg-opacity)) /* #9b90e6 */;}
+.hover\:bg-section:hover{--un-bg-opacity:1;background-color:rgb(27 24 48 / var(--un-bg-opacity)) /* #1b1830 */;}
+.hover\:bg-soft:hover{--un-bg-opacity:0.18;background-color:rgba(155, 144, 230, var(--un-bg-opacity)) /* rgba(155,144,230,0.18) */;}
+.p-1{padding:0.25rem;}
+.px{padding-left:1rem;padding-right:1rem;}
+.px-\[6px\]{padding-left:6px;padding-right:6px;}
+.px-2{padding-left:0.5rem;padding-right:0.5rem;}
+.px-3{padding-left:0.75rem;padding-right:0.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:0.5rem;padding-bottom:0.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:0.25rem;}
+.pr-\[14px\]{padding-right:14px;}
+.pr-3{padding-right:0.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)) /* #0ea57a */;}
+.text-\[\#4ade80\]{--un-text-opacity:1;color:rgb(74 222 128 / var(--un-text-opacity)) /* #4ade80 */;}
+.text-\[\#7c6dd6\]{--un-text-opacity:1;color:rgb(124 109 214 / var(--un-text-opacity)) /* #7c6dd6 */;}
+.text-\[\#9b90e6\],
+.text-accent{--un-text-opacity:1;color:rgb(155 144 230 / var(--un-text-opacity)) /* #9b90e6 */;}
+.text-\[\#d97706\],
+.text-warn{--un-text-opacity:1;color:rgb(217 119 6 / var(--un-text-opacity)) /* #d97706 */;}
+.text-\[\#dc2626\]{--un-text-opacity:1;color:rgb(220 38 38 / var(--un-text-opacity)) /* #dc2626 */;}
+.text-muted{--un-text-opacity:1;color:rgb(199 195 230 / var(--un-text-opacity)) /* #c7c3e6 */;}
+.text-subtle{--un-text-opacity:1;color:rgb(111 106 143 / var(--un-text-opacity)) /* #6f6a8f */;}
+.text-text{--un-text-opacity:1;color:rgb(244 242 255 / var(--un-text-opacity)) /* #f4f2ff */;}
+.hover\:text-text:hover{--un-text-opacity:1;color:rgb(244 242 255 / var(--un-text-opacity)) /* #f4f2ff */;}
+.color-white{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity)) /* #fff */;}
+.hover\:color-muted:hover{--un-text-opacity:1;color:rgb(199 195 230 / var(--un-text-opacity)) /* #c7c3e6 */;}
+.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:0.07em;}
+.tracking-\[0\.12em\]{letter-spacing:0.12em;}
+.tracking-widest{letter-spacing:0.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 / 0.1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 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, 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 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 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, 0.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(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.duration-100{transition-duration:100ms;}
+.duration-150{transition-duration:150ms;}
+.duration-200{transition-duration:200ms;}

package/dist/index.d.ts

@@ -0,0 +1,135 @@
+import { FunctionComponent } from '@praxisjs/shared';
+
+declare type AnyConstructor = new (...args: any[]) => any;
+
+export declare interface ComponentEntry {
+    id: string;
+    name: string;
+    renderCount: number;
+    lastRenderDuration: number;
+    mountedAt: number;
+    status: 'mounted' | 'unmounted';
+    lifecycle: LifecycleEvent[];
+}
+
+export declare const ComponentsPlugin: DevtoolsPlugin;
+
+/**
+ * Tracks state, computed values, and methods in the devtools panel.
+ *
+ * On @State() properties (stacked):
+ *   @Debug()
+ *   @State() count = 0;
+ *
+ * On computed class fields:
+ *   @Debug()
+ *   doubled = computed(() => this.count * 2);
+ *
+ * On methods:
+ *   @Debug()
+ *   increment() { ... }
+ */
+export declare function Debug(options?: DebugOptions): (target: object, key: string, descriptor?: PropertyDescriptor) => void;
+
+export declare interface DebugOptions {
+    label?: string;
+}
+
+export declare const DevTools: {
+    plugins: DevtoolsPlugin[];
+    host: HTMLElement | null;
+    cleanup: (() => void) | null;
+    init(options?: DevToolsOptions): void;
+    registerPlugin(plugin: DevtoolsPlugin): void;
+    readonly registry: Registry;
+    remount(): void;
+};
+
+export declare interface DevToolsOptions {
+    plugins?: DevtoolsPlugin[];
+}
+
+export declare interface DevtoolsPlugin {
+    id: string;
+    label: string;
+    setup?: (registry: Registry) => void;
+    component: FunctionComponent<{
+        registry: Registry;
+    }>;
+}
+
+declare class EventBus {
+    private readonly handlers;
+    on<T = unknown>(event: string, handler: Handler<T>): () => void;
+    emit(event: string, payload: unknown): void;
+}
+
+declare type Handler<T = unknown> = (payload: T) => void;
+
+export declare interface HistoryEntry {
+    value: unknown;
+    timestamp: number;
+}
+
+export declare interface LifecycleEvent {
+    hook: string;
+    timestamp: number;
+}
+
+export declare class Registry {
+    private static _instance;
+    static get instance(): Registry;
+    readonly bus: EventBus;
+    private readonly instanceIds;
+    private readonly signals;
+    private readonly components;
+    private readonly timeline;
+    private getInstanceId;
+    registerSignal(instance: object, key: string, value: unknown, componentName: string): void;
+    updateSignal(instance: object, key: string, newValue: unknown, oldValue: unknown): void;
+    registerComponent(instance: object, name: string): void;
+    recordRender(instance: object, duration: number): void;
+    recordLifecycle(instance: object, hook: string): void;
+    recordMethodCall(instance: object, method: string, args: unknown[], result: unknown, duration: number, componentName: string): void;
+    getSignals(): SignalEntry[];
+    getComponents(): ComponentEntry[];
+    getTimeline(): TimelineEntry[];
+    getSignalsByComponent(componentId: string): SignalEntry[];
+    private pushTimeline;
+}
+
+export declare interface SignalEntry {
+    id: string;
+    label: string;
+    componentId: string;
+    componentName: string;
+    value: unknown;
+    history: HistoryEntry[];
+    changedAt: number;
+}
+
+export declare const SignalsPlugin: DevtoolsPlugin;
+
+export declare interface TimelineEntry {
+    id: string;
+    type: TimelineEventType;
+    label: string;
+    timestamp: number;
+    data: Record<string, unknown>;
+}
+
+export declare type TimelineEventType = 'signal:change' | 'component:render' | 'component:mount' | 'component:unmount' | 'lifecycle' | 'method:call';
+
+export declare const TimelinePlugin: DevtoolsPlugin;
+
+/**
+ * Instruments a component class to report renders and lifecycle events
+ * to the devtools panel.
+ *
+ * @Trace()
+ * @Component()
+ * class MyComponent extends BaseComponent { ... }
+ */
+export declare function Trace(): <T extends AnyConstructor>(constructor: T) => T;
+
+export { }