@praxisjs/devtools 0.1.0

package/dist/index.js

@@ -0,0 +1,1051 @@
+import { jsxs as d, jsx as n } from "@praxisjs/jsx/jsx-runtime";
+import { signal as b, effect as P, onMount as C, onUnmount as I, peek as U } from "@praxisjs/core";
+import { render as j } from "@praxisjs/runtime";
+const N = "data:image/svg+xml,%3csvg%20width='1024'%20height='1024'%20viewBox='0%200%201024%201024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M605.411%20445.66L641.322%20498.293L641.342%20498.278L697.538%20578.57L742.673%20512.806L512.5%20178.878L281.327%20512.806L512.5%20848.182L603.519%20715.561L650.559%20782.134L512.701%20983L187%20510.478L512.701%2040L837%20510.478L698.206%20712.709L668.895%20671.104L604.033%20578.775L512%20712.504L373.199%20511.5L512.233%20309.092L584.13%20414.469L536.746%20480.456L513.69%20445.66L466.305%20511.5L512.166%20577.425L556.48%20513.91L605.411%20445.66Z'%20fill='url(%23paint0_linear_3024_20)'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_3024_20'%20x1='512'%20y1='40'%20x2='512'%20y2='983'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%239B76FF'%20stop-opacity='0.86'/%3e%3cstop%20offset='1'%20stop-color='%232D246B'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e", F = '*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }:host{all:initial;display:block;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}input::placeholder{color:#6f6a8f}input:focus{outline:none;box-shadow:0 0 0 2px #9b90e64d}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#9b90e633;border-radius:2px}::-webkit-scrollbar-thumb:hover{background:#9b90e666}.container{width:100%}@media(min-width:640px){.container{max-width:640px}}@media(min-width:768px){.container{max-width:768px}}@media(min-width:1024px){.container{max-width:1024px}}@media(min-width:1280px){.container{max-width:1280px}}@media(min-width:1536px){.container{max-width:1536px}}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.bottom-0{bottom:0}.bottom-5{bottom:1.25rem}.left-0{left:0}.right-0{right:0}.right-5{right:1.25rem}.top-0{top:0}.top-full{top:100%}.z-\\[2147483647\\]{z-index:2147483647}.z-10{z-index:10}.grid{display:grid}.grid-cols-\\[1\\.2fr_0\\.8fr_1fr_auto\\]{grid-template-columns:1.2fr .8fr 1fr auto}.m6{margin:1.5rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.mr-\\[2px\\]{margin-right:2px}.ms{margin-inline-start:1rem}.mt-1{margin-top:.25rem}.box-border{box-sizing:border-box}.inline-block{display:inline-block}.h-\\[13px\\]{height:13px}.h-\\[22px\\]{height:22px}.h-\\[2px\\]{height:2px}.h-\\[32px\\]{height:32px}.h-\\[6px\\]{height:6px}.h-1{height:.25rem}.h-10{height:2.5rem}.h-3{height:.75rem}.h-7{height:1.75rem}.h-full{height:100%}.h-screen{height:100vh}.max-w-\\[200px\\]{max-width:200px}.min-w-0{min-width:0}.w-\\[13px\\]{width:13px}.w-\\[22px\\]{width:22px}.w-\\[2px\\]{width:2px}.w-\\[6px\\]{width:6px}.w-1{width:.25rem}.w-10{width:2.5rem}.w-12{width:3rem}.w-4{width:1rem}.w-full{width:100%}.w-px{width:1px}.flex{display:flex}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.cursor-\\[ew-resize\\]{cursor:ew-resize}.cursor-\\[ns-resize\\]{cursor:ns-resize}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;user-select:none}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-\\[2px\\]{gap:2px}.gap-\\[3px\\]{gap:3px}.gap-\\[6px\\]{gap:6px}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-border{--un-border-opacity:.25;border-color:rgba(155,144,230,var(--un-border-opacity))}.border-warn{--un-border-opacity:1;border-color:rgb(217 119 6 / var(--un-border-opacity))}.hover\\:border-accent:hover{--un-border-opacity:1;border-color:rgb(155 144 230 / var(--un-border-opacity))}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-r{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.bg-\\[rgba\\(124\\,109\\,214\\,0\\.14\\)\\]{--un-bg-opacity:.14;background-color:rgba(124,109,214,var(--un-bg-opacity))}.bg-\\[rgba\\(14\\,165\\,122\\,0\\.14\\)\\]{--un-bg-opacity:.14;background-color:rgba(14,165,122,var(--un-bg-opacity))}.bg-\\[rgba\\(155\\,144\\,230\\,0\\.14\\)\\]{--un-bg-opacity:.14;background-color:rgba(155,144,230,var(--un-bg-opacity))}.bg-\\[rgba\\(217\\,119\\,6\\,0\\.14\\)\\]{--un-bg-opacity:.14;background-color:rgba(217,119,6,var(--un-bg-opacity))}.bg-\\[rgba\\(220\\,38\\,38\\,0\\.14\\)\\]{--un-bg-opacity:.14;background-color:rgba(220,38,38,var(--un-bg-opacity))}.bg-\\[rgba\\(74\\,222\\,128\\,0\\.12\\)\\]{--un-bg-opacity:.12;background-color:rgba(74,222,128,var(--un-bg-opacity))}.bg-accent{--un-bg-opacity:1;background-color:rgb(155 144 230 / var(--un-bg-opacity))}.bg-bg{--un-bg-opacity:1;background-color:rgb(15 13 23 / var(--un-bg-opacity))}.bg-border{--un-bg-opacity:.25;background-color:rgba(155,144,230,var(--un-bg-opacity))}.bg-header{--un-bg-opacity:1;background-color:rgb(22 19 38 / var(--un-bg-opacity))}.bg-input,.bg-section{--un-bg-opacity:1;background-color:rgb(27 24 48 / var(--un-bg-opacity))}.bg-selected{--un-bg-opacity:1;background-color:rgb(34 30 61 / var(--un-bg-opacity))}.bg-soft{--un-bg-opacity:.18;background-color:rgba(155,144,230,var(--un-bg-opacity))}.bg-subtle{--un-bg-opacity:1;background-color:rgb(111 106 143 / var(--un-bg-opacity))}.bg-success{--un-bg-opacity:1;background-color:rgb(14 165 122 / var(--un-bg-opacity))}.bg-transparent{background-color:transparent}.hover\\:bg-accent:hover{--un-bg-opacity:1;background-color:rgb(155 144 230 / var(--un-bg-opacity))}.hover\\:bg-section:hover{--un-bg-opacity:1;background-color:rgb(27 24 48 / var(--un-bg-opacity))}.hover\\:bg-soft:hover{--un-bg-opacity:.18;background-color:rgba(155,144,230,var(--un-bg-opacity))}.p-1{padding:.25rem}.px{padding-left:1rem;padding-right:1rem}.px-\\[6px\\]{padding-left:6px;padding-right:6px}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-\\[2px\\]{padding-top:2px;padding-bottom:2px}.py-\\[3px\\]{padding-top:3px;padding-bottom:3px}.py-\\[4px\\]{padding-top:4px;padding-bottom:4px}.py-\\[5px\\]{padding-top:5px;padding-bottom:5px}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pl-\\[10px\\]{padding-left:10px}.pl-\\[56px\\]{padding-left:56px}.pl-1{padding-left:.25rem}.pr-\\[14px\\]{padding-right:14px}.pr-3{padding-right:.75rem}.text-center{text-align:center}.text-right{text-align:right}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.text-\\[12px\\]{font-size:12px}.text-\\[20px\\]{font-size:20px}.text-\\[9px\\]{font-size:9px}.text-\\[\\#0ea57a\\]{--un-text-opacity:1;color:rgb(14 165 122 / var(--un-text-opacity))}.text-\\[\\#4ade80\\]{--un-text-opacity:1;color:rgb(74 222 128 / var(--un-text-opacity))}.text-\\[\\#7c6dd6\\]{--un-text-opacity:1;color:rgb(124 109 214 / var(--un-text-opacity))}.text-\\[\\#9b90e6\\],.text-accent{--un-text-opacity:1;color:rgb(155 144 230 / var(--un-text-opacity))}.text-\\[\\#d97706\\],.text-warn{--un-text-opacity:1;color:rgb(217 119 6 / var(--un-text-opacity))}.text-\\[\\#dc2626\\]{--un-text-opacity:1;color:rgb(220 38 38 / var(--un-text-opacity))}.text-muted{--un-text-opacity:1;color:rgb(199 195 230 / var(--un-text-opacity))}.text-subtle{--un-text-opacity:1;color:rgb(111 106 143 / var(--un-text-opacity))}.text-text,.hover\\:text-text:hover{--un-text-opacity:1;color:rgb(244 242 255 / var(--un-text-opacity))}.color-white{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity))}.hover\\:color-muted:hover{--un-text-opacity:1;color:rgb(199 195 230 / var(--un-text-opacity))}.font-bold{font-weight:700}.font-semibold{font-weight:600}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.tracking-\\[0\\.07em\\]{letter-spacing:.07em}.tracking-\\[0\\.12em\\]{letter-spacing:.12em}.tracking-widest{letter-spacing:.1em}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.uppercase{text-transform:uppercase}.tabular-nums{--un-numeric-spacing:tabular-nums;font-variant-numeric:var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)}.shadow{--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.shadow-\\[0_8px_32px_rgba\\(0\\,0\\,0\\,0\\.7\\)\\]{--un-shadow:0 8px 32px var(--un-shadow-color, rgba(0, 0, 0, .7));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.shadow-lg{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.hover\\:shadow-\\[0_8px_32px_rgba\\(56\\,189\\,248\\,0\\.1\\)\\]:hover{--un-shadow:0 8px 32px var(--un-shadow-color, rgba(56, 189, 248, .1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.filter{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-100{transition-duration:.1s}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}';
+class O {
+  constructor() {
+    this.handlers = /* @__PURE__ */ new Map();
+  }
+  on(e, o) {
+    return this.handlers.has(e) || this.handlers.set(e, /* @__PURE__ */ new Set()), this.handlers.get(e).add(o), () => this.handlers.get(e)?.delete(o);
+  }
+  emit(e, o) {
+    this.handlers.get(e)?.forEach((r) => {
+      r(o);
+    });
+  }
+}
+const H = 200;
+let W = 0;
+function T() {
+  return `v${(++W).toString()}_${Date.now().toString(36)}`;
+}
+const f = class f {
+  constructor() {
+    this.bus = new O(), this.instanceIds = /* @__PURE__ */ new WeakMap(), this.signals = /* @__PURE__ */ new Map(), this.components = /* @__PURE__ */ new Map(), this.timeline = [];
+  }
+  static get instance() {
+    return f._instance ??= new f(), f._instance;
+  }
+  getInstanceId(e) {
+    return this.instanceIds.has(e) || this.instanceIds.set(e, T()), this.instanceIds.get(e);
+  }
+  registerSignal(e, o, r, i) {
+    const a = this.getInstanceId(e), l = `${a}:${o}`, s = {
+      id: l,
+      label: o,
+      componentId: a,
+      componentName: i,
+      value: r,
+      history: [{ value: r, timestamp: Date.now() }],
+      changedAt: Date.now()
+    };
+    this.signals.set(l, s), this.bus.emit("signal:registered", s);
+  }
+  updateSignal(e, o, r, i) {
+    const l = `${this.getInstanceId(e)}:${o}`, s = this.signals.get(l);
+    if (!s) return;
+    const u = [
+      ...s.history,
+      { value: r, timestamp: Date.now() }
+    ].slice(-20), c = {
+      ...s,
+      value: r,
+      history: u,
+      changedAt: Date.now()
+    };
+    this.signals.set(l, c), this.bus.emit("signal:changed", { entry: c, oldValue: i }), this.pushTimeline({
+      type: "signal:change",
+      label: `${s.componentName}.${o}`,
+      data: { old: i, new: r, signalId: l }
+    });
+  }
+  registerComponent(e, o) {
+    const r = this.getInstanceId(e), i = {
+      id: r,
+      name: o,
+      renderCount: 0,
+      lastRenderDuration: 0,
+      mountedAt: Date.now(),
+      status: "mounted",
+      lifecycle: []
+    };
+    this.components.set(r, i), this.bus.emit("component:registered", i);
+  }
+  recordRender(e, o) {
+    const r = this.getInstanceId(e), i = this.components.get(r);
+    i && (i.renderCount++, i.lastRenderDuration = o, this.bus.emit("component:render", { ...i }), this.pushTimeline({
+      type: "component:render",
+      label: `<${i.name}>`,
+      data: {
+        componentId: r,
+        duration: +o.toFixed(3),
+        renderCount: i.renderCount
+      }
+    }));
+  }
+  recordLifecycle(e, o) {
+    const r = this.getInstanceId(e), i = this.components.get(r);
+    if (!i) return;
+    const a = { hook: o, timestamp: Date.now() };
+    i.lifecycle.push(a), this.bus.emit("lifecycle", { componentId: r, name: i.name, hook: o });
+    const l = o === "onUnmount" ? "component:unmount" : o === "onBeforeMount" ? "component:mount" : "lifecycle";
+    if (this.pushTimeline({
+      type: l,
+      label: `<${i.name}>.${o}`,
+      data: { componentId: r, hook: o }
+    }), o === "onUnmount") {
+      i.status = "unmounted", this.bus.emit("component:unmount", { ...i }), this.components.delete(r);
+      for (const [s, u] of this.signals)
+        u.componentId === r && this.signals.delete(s);
+    }
+  }
+  recordMethodCall(e, o, r, i, a, l) {
+    const s = this.getInstanceId(e);
+    this.pushTimeline({
+      type: "method:call",
+      label: `${l}.${o}()`,
+      data: {
+        componentId: s,
+        args: r,
+        result: i,
+        duration: +a.toFixed(3)
+      }
+    });
+  }
+  getSignals() {
+    return [...this.signals.values()];
+  }
+  getComponents() {
+    return [...this.components.values()];
+  }
+  getTimeline() {
+    return [...this.timeline];
+  }
+  getSignalsByComponent(e) {
+    return this.getSignals().filter((o) => o.componentId === e);
+  }
+  pushTimeline(e) {
+    const o = {
+      id: T(),
+      timestamp: Date.now(),
+      ...e
+    };
+    this.timeline.push(o), this.timeline.length > H && this.timeline.shift(), this.bus.emit("timeline:push", o);
+  }
+};
+f._instance = null;
+let g = f;
+function z({ message: t }) {
+  return /* @__PURE__ */ d("div", { class: "flex flex-col items-center justify-center gap-2 py-12", children: [
+    /* @__PURE__ */ n("span", { class: "text-subtle text-[20px] leading-none select-none font-mono", children: "—" }),
+    /* @__PURE__ */ n("p", { class: "text-subtle text-[11px] text-center leading-relaxed max-w-[200px]", children: t })
+  ] });
+}
+function A({
+  children: t,
+  width: e = "280px"
+}) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      class: "shrink-0 border-l border-border flex flex-col overflow-hidden",
+      style: { width: e },
+      children: t
+    }
+  );
+}
+function M(t) {
+  if (t === null) return "null";
+  if (t === void 0) return "undefined";
+  if (typeof t == "string") return `"${t}"`;
+  if (typeof t == "object")
+    try {
+      return JSON.stringify(t);
+    } catch {
+      return "[object]";
+    }
+  return String(t);
+}
+function v({
+  k: t,
+  v: e,
+  signal: o
+}) {
+  return /* @__PURE__ */ d("div", { class: "flex justify-between items-center px-3 py-2 border-b border-border gap-3", children: [
+    /* @__PURE__ */ n(
+      "span",
+      {
+        class: `text-[11px] font-mono shrink-0 ${o ? "text-accent" : "text-muted"}`,
+        children: t
+      }
+    ),
+    /* @__PURE__ */ n("span", { class: "text-[11px] text-text font-mono truncate text-right", children: e })
+  ] });
+}
+function k({
+  label: t,
+  children: e
+}) {
+  return /* @__PURE__ */ d("div", { class: "border-b border-border", children: [
+    /* @__PURE__ */ n("div", { class: "px-3 py-[4px] text-[9px] text-subtle font-bold tracking-[0.12em] uppercase bg-section border-b border-border", children: t }),
+    e
+  ] });
+}
+function R({ status: t }) {
+  return /* @__PURE__ */ n(
+    "span",
+    {
+      class: `inline-block w-[6px] h-[6px] rounded-full shrink-0 ${t === "mounted" ? "bg-success" : "bg-subtle"}`,
+      style: t === "mounted" ? { boxShadow: "0 0 6px rgba(14,165,122,0.7)" } : void 0
+    }
+  );
+}
+function G({
+  entry: t,
+  signals: e
+}) {
+  return /* @__PURE__ */ d(A, { children: [
+    /* @__PURE__ */ d("div", { class: "px-3 py-2 border-b border-border flex items-center gap-2 bg-bg shrink-0", children: [
+      /* @__PURE__ */ n(R, { status: t.status }),
+      /* @__PURE__ */ d("span", { class: "text-accent font-mono text-[11px] font-semibold truncate pl-1", children: [
+        "<",
+        t.name,
+        ">"
+      ] })
+    ] }),
+    /* @__PURE__ */ d("div", { class: "flex-1 overflow-y-auto", children: [
+      /* @__PURE__ */ d(k, { label: "Stats", children: [
+        /* @__PURE__ */ n(v, { k: "renders", v: String(t.renderCount) }),
+        /* @__PURE__ */ n(
+          v,
+          {
+            k: "last render",
+            v: `${t.lastRenderDuration.toFixed(3)}ms`
+          }
+        ),
+        /* @__PURE__ */ n(v, { k: "status", v: t.status })
+      ] }),
+      e.length > 0 && /* @__PURE__ */ n(k, { label: "State", children: e.map((o) => /* @__PURE__ */ n(
+        v,
+        {
+          k: o.label,
+          v: M(o.value),
+          signal: !0
+        },
+        o.id
+      )) }),
+      t.lifecycle.length > 0 && /* @__PURE__ */ n(k, { label: "Lifecycle", children: [...t.lifecycle].reverse().slice(0, 20).map((o, r) => /* @__PURE__ */ d(
+        "div",
+        {
+          class: "px-3 py-2 flex justify-between items-center border-b border-border",
+          children: [
+            /* @__PURE__ */ n("span", { class: "text-[11px] text-text font-mono", children: o.hook }),
+            /* @__PURE__ */ n("span", { class: "text-[10px] text-subtle tabular-nums", children: new Date(o.timestamp).toLocaleTimeString() })
+          ]
+        },
+        String(r)
+      )) })
+    ] })
+  ] });
+}
+function X({
+  entry: t,
+  selected: e,
+  onClick: o
+}) {
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      onClick: o,
+      class: () => `relative flex items-center gap-2 px-3 py-2 cursor-pointer border-b border-border transition-colors duration-100 ${e() ? "bg-selected" : "hover:bg-section"}`,
+      children: [
+        () => e() && /* @__PURE__ */ n("span", { class: "absolute left-0 top-0 bottom-0 w-[2px] bg-accent rounded-r" }),
+        /* @__PURE__ */ n(R, { status: t.status }),
+        /* @__PURE__ */ d("span", { class: "text-accent font-mono text-[11px] flex-1 truncate pl-1", children: [
+          "<",
+          t.name,
+          ">"
+        ] }),
+        /* @__PURE__ */ d("span", { class: "text-muted text-[11px] tabular-nums", children: [
+          "×",
+          t.renderCount
+        ] }),
+        /* @__PURE__ */ d(
+          "span",
+          {
+            class: `text-[10px] tabular-nums w-12 text-right ${t.lastRenderDuration > 16 ? "text-warn" : "text-subtle"}`,
+            children: [
+              t.lastRenderDuration.toFixed(1),
+              "ms"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function Y({ registry: t }) {
+  const e = b(t.getComponents()), o = b(null), r = b([]), i = P(() => {
+    const l = o();
+    r.set(l ? t.getSignalsByComponent(l) : []);
+  });
+  let a = [];
+  return C(() => {
+    const l = () => {
+      e.set(t.getComponents());
+      const s = U(o);
+      s && r.set(t.getSignalsByComponent(s));
+    };
+    a = [
+      "component:registered",
+      "component:render",
+      "component:unmount",
+      "lifecycle",
+      "signal:registered",
+      "signal:changed"
+    ].map((s) => t.bus.on(s, l));
+  }), I(() => {
+    i(), a.forEach((l) => {
+      l();
+    });
+  }), /* @__PURE__ */ d("div", { class: "flex h-full overflow-hidden", children: [
+    /* @__PURE__ */ d("div", { class: "flex-1 flex flex-col overflow-hidden min-w-0", children: [
+      /* @__PURE__ */ d("div", { class: "flex items-center px-3 h-7 text-[9px] text-subtle font-bold tracking-[0.12em] uppercase border-b border-border bg-section gap-2 shrink-0", children: [
+        /* @__PURE__ */ n("span", { class: "flex-1", children: "Component" }),
+        /* @__PURE__ */ n("span", { children: "Renders" }),
+        /* @__PURE__ */ n("span", { class: "w-12 text-right", children: "Last" })
+      ] }),
+      /* @__PURE__ */ n("div", { class: "flex-1 overflow-y-auto", children: () => e().length === 0 ? /* @__PURE__ */ n(z, { message: "No components tracked. Add @Trace() to component classes." }) : e().map((l) => /* @__PURE__ */ n(
+        X,
+        {
+          entry: l,
+          selected: () => o() === l.id,
+          onClick: () => {
+            o.update((s) => s === l.id ? null : l.id);
+          }
+        },
+        l.id
+      )) })
+    ] }),
+    () => {
+      const l = o(), s = l ? e().find((u) => u.id === l) ?? null : null;
+      return s ? /* @__PURE__ */ n(G, { entry: s, signals: r() }) : null;
+    }
+  ] });
+}
+const J = {
+  id: "components",
+  label: "Components",
+  component: Y
+};
+function q({
+  placeholder: t,
+  onInput: e
+}) {
+  return /* @__PURE__ */ n(
+    "input",
+    {
+      type: "text",
+      placeholder: t,
+      class: "w-full bg-input border border-border rounded-lg text-text text-[11px] px-3 py-[5px] outline-none box-border transition-shadow duration-150",
+      onInput: (o) => {
+        e(o.target.value);
+      }
+    }
+  );
+}
+function K({
+  label: t,
+  children: e
+}) {
+  return /* @__PURE__ */ d("div", { class: "border-b border-border", children: [
+    /* @__PURE__ */ n("div", { class: "px-3 py-[4px] text-[9px] text-subtle font-bold tracking-[0.12em] uppercase bg-section border-b border-border", children: t }),
+    e
+  ] });
+}
+function L(t, e) {
+  const o = e ? ` ${e}` : "", r = Date.now() - t;
+  return r < 1e3 ? `${r.toString()}ms${o}` : r < 6e4 ? `${(r / 1e3).toFixed(1)}s${o}` : `${Math.floor(r / 6e4).toString()}m${o}`;
+}
+function Z({ entry: t }) {
+  return /* @__PURE__ */ n(A, { width: "260px", children: /* @__PURE__ */ n(K, { label: "History", children: /* @__PURE__ */ d("div", { class: "overflow-y-auto", children: [
+    [...t.history].reverse().map((e, o) => /* @__PURE__ */ d(
+      "div",
+      {
+        class: "px-3 py-2 border-b border-border flex justify-between items-center gap-3",
+        children: [
+          /* @__PURE__ */ n("span", { class: "font-mono text-[11px] text-text truncate", children: M(e.value) }),
+          /* @__PURE__ */ n("span", { class: "text-[10px] text-subtle shrink-0 tabular-nums", children: L(e.timestamp, "ago") })
+        ]
+      },
+      String(o)
+    )),
+    t.history.length === 0 && /* @__PURE__ */ n("p", { class: "px-3 py-6 text-[11px] text-subtle text-center", children: "No history yet." })
+  ] }) }) });
+}
+function Q({
+  entry: t,
+  selected: e,
+  onClick: o
+}) {
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      onClick: o,
+      class: `relative grid grid-cols-[1.2fr_0.8fr_1fr_auto] items-center px-3 py-2 cursor-pointer border-b border-border transition-colors duration-100 ${e ? "bg-selected" : "hover:bg-section"}`,
+      children: [
+        e && /* @__PURE__ */ n("span", { class: "absolute left-0 top-0 bottom-0 w-[2px] bg-accent rounded-r" }),
+        /* @__PURE__ */ n("span", { class: "text-accent font-mono text-[11px] truncate pl-1", children: t.label }),
+        /* @__PURE__ */ n("span", { class: "text-muted text-[11px] truncate", children: t.componentName }),
+        /* @__PURE__ */ n("span", { class: "text-text font-mono text-[11px] truncate", children: M(t.value) }),
+        /* @__PURE__ */ n("span", { class: "text-subtle text-[10px] text-right tabular-nums", children: L(t.changedAt, "ago") })
+      ]
+    }
+  );
+}
+function V({ registry: t }) {
+  const e = b(t.getSignals()), o = b(""), r = b(null);
+  let i = [];
+  return C(() => {
+    i = [
+      t.bus.on("signal:registered", () => {
+        e.set(t.getSignals());
+      }),
+      t.bus.on("signal:changed", () => {
+        e.set(t.getSignals());
+      })
+    ];
+  }), I(() => {
+    i.forEach((a) => {
+      a();
+    });
+  }), /* @__PURE__ */ d("div", { class: "flex h-full overflow-hidden", children: [
+    /* @__PURE__ */ d("div", { class: "flex-1 flex flex-col overflow-hidden min-w-0", children: [
+      /* @__PURE__ */ n("div", { class: "px-3 py-2 border-b border-border bg-bg shrink-0", children: /* @__PURE__ */ n(
+        q,
+        {
+          placeholder: "Search signals…",
+          onInput: (a) => {
+            o.set(a);
+          }
+        }
+      ) }),
+      /* @__PURE__ */ d("div", { class: "grid grid-cols-[1.2fr_0.8fr_1fr_auto] items-center px-3 h-7 text-[9px] text-subtle font-bold tracking-[0.12em] uppercase border-b border-border bg-section gap-2 shrink-0", children: [
+        /* @__PURE__ */ n("span", { children: "Signal" }),
+        /* @__PURE__ */ n("span", { children: "Component" }),
+        /* @__PURE__ */ n("span", { children: "Value" }),
+        /* @__PURE__ */ n("span", { children: "Age" })
+      ] }),
+      /* @__PURE__ */ n("div", { class: "flex-1 overflow-y-auto", children: () => {
+        const a = o().toLowerCase(), l = a === "" ? e() : e().filter(
+          (s) => s.label.toLowerCase().includes(a) || s.componentName.toLowerCase().includes(a)
+        );
+        return l.length === 0 ? /* @__PURE__ */ n(
+          z,
+          {
+            message: e().length === 0 ? "No signals tracked. Add @Debug() on top of @State() properties." : "No signals match your search."
+          }
+        ) : l.map((s) => /* @__PURE__ */ n(
+          Q,
+          {
+            entry: s,
+            selected: r() === s.id,
+            onClick: () => {
+              r.update((u) => u === s.id ? null : s.id);
+            }
+          },
+          s.id
+        ));
+      } })
+    ] }),
+    () => {
+      const a = r(), l = a ? e().find((s) => s.id === a) ?? null : null;
+      return l ? /* @__PURE__ */ n(Z, { entry: l }) : null;
+    }
+  ] });
+}
+const ee = {
+  id: "signals",
+  label: "Signals",
+  component: V
+}, te = {
+  "signal:change": { label: "signal", cls: "text-[#9b90e6] bg-[rgba(155,144,230,0.14)]" },
+  "component:render": { label: "render", cls: "text-[#4ade80] bg-[rgba(74,222,128,0.12)]" },
+  "component:mount": { label: "mount", cls: "text-[#0ea57a] bg-[rgba(14,165,122,0.14)]" },
+  "component:unmount": { label: "unmount", cls: "text-[#dc2626] bg-[rgba(220,38,38,0.14)]" },
+  lifecycle: { label: "lifecycle", cls: "text-[#d97706] bg-[rgba(217,119,6,0.14)]" },
+  "method:call": { label: "method", cls: "text-[#7c6dd6] bg-[rgba(124,109,214,0.14)]" }
+}, ne = [
+  { value: "all", label: "All" },
+  { value: "signal:change", label: "Signals" },
+  { value: "component:render", label: "Renders" },
+  { value: "component:mount", label: "Mount" },
+  { value: "lifecycle", label: "Lifecycle" },
+  { value: "method:call", label: "Methods" }
+];
+function oe({ type: t }) {
+  const e = te[t];
+  return /* @__PURE__ */ n(
+    "span",
+    {
+      class: `text-[9px] px-[6px] py-[2px] rounded font-bold uppercase tracking-[0.07em] shrink-0 ${e.cls}`,
+      children: e.label
+    }
+  );
+}
+function re({ entry: t }) {
+  const e = b(!1), o = Object.keys(t.data).length > 0;
+  return /* @__PURE__ */ d("div", { class: "border-b border-border", children: [
+    /* @__PURE__ */ d(
+      "div",
+      {
+        onClick: () => {
+          o && e.update((r) => !r);
+        },
+        class: `flex items-center gap-2 px-3 py-2 transition-colors duration-100 ${o ? "cursor-pointer hover:bg-section" : "cursor-default"}`,
+        children: [
+          /* @__PURE__ */ n("span", { class: "text-subtle text-[10px] w-10 shrink-0 text-right tabular-nums font-mono", children: L(t.timestamp) }),
+          /* @__PURE__ */ n(oe, { type: t.type }),
+          /* @__PURE__ */ n("span", { class: "flex-1 text-text font-mono text-[11px] truncate", children: t.label }),
+          o && /* @__PURE__ */ n("span", { class: "text-subtle text-[11px] shrink-0 w-4 text-center", children: () => e() ? "▾" : "▸" })
+        ]
+      }
+    ),
+    () => e() && o ? /* @__PURE__ */ n("div", { class: "px-3 py-2 pl-[56px] font-mono text-[11px] bg-section border-t border-border", children: Object.entries(t.data).map(([r, i]) => /* @__PURE__ */ d("div", { class: "flex gap-3 py-[3px]", children: [
+      /* @__PURE__ */ d("span", { class: "text-accent shrink-0", children: [
+        r,
+        ":"
+      ] }),
+      /* @__PURE__ */ n("span", { class: "text-muted truncate", children: typeof i == "object" ? JSON.stringify(i) : String(i) })
+    ] }, r)) }) : null
+  ] });
+}
+function ie({ registry: t }) {
+  const e = b(t.getTimeline()), o = b("all"), r = b(!1);
+  let i = [];
+  return C(() => {
+    i = [
+      t.bus.on("timeline:push", () => {
+        r() || e.set(t.getTimeline());
+      })
+    ];
+  }), I(() => {
+    i.forEach((a) => {
+      a();
+    });
+  }), /* @__PURE__ */ d("div", { class: "flex flex-col h-full overflow-hidden", children: [
+    /* @__PURE__ */ d("div", { class: "flex items-center gap-[3px] px-2 py-2 border-b border-border bg-bg shrink-0 flex-wrap", children: [
+      ne.map((a) => /* @__PURE__ */ n(
+        "button",
+        {
+          onClick: () => {
+            o.set(a.value);
+          },
+          class: () => o() === a.value ? "text-[11px] px-2 py-[3px] rounded cursor-pointer font-sans bg-soft text-accent font-semibold" : "text-[11px] px-2 py-[3px] rounded cursor-pointer font-sans text-muted hover:text-text hover:bg-section transition-colors duration-150",
+          children: a.label
+        },
+        a.value
+      )),
+      /* @__PURE__ */ n("div", { class: "flex-1" }),
+      /* @__PURE__ */ n(
+        "button",
+        {
+          onClick: () => {
+            r() && e.set(t.getTimeline()), r.update((a) => !a);
+          },
+          class: () => `text-[11px] px-2 py-[3px] rounded cursor-pointer font-sans border border-border transition-colors duration-150 ${r() ? "text-warn border-warn" : "text-muted hover:text-text"}`,
+          children: () => r() ? "Resume" : "Pause"
+        }
+      ),
+      /* @__PURE__ */ n(
+        "button",
+        {
+          onClick: () => {
+            e.set([]);
+          },
+          class: "text-[11px] px-2 py-[3px] rounded cursor-pointer font-sans border border-border text-muted hover:text-text transition-colors duration-150",
+          children: "Clear"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ n("div", { class: "flex-1 overflow-y-auto", children: () => {
+      const a = o(), l = a === "all" ? e() : e().filter(
+        (s) => s.type === a || a === "component:mount" && s.type === "component:unmount"
+      );
+      return l.length === 0 ? /* @__PURE__ */ n(z, { message: "No events yet. Interact with your app to see the timeline." }) : [...l].reverse().map((s) => /* @__PURE__ */ n(re, { entry: s }, s.id));
+    } })
+  ] });
+}
+const se = {
+  id: "timeline",
+  label: "Timeline",
+  component: ie
+}, ae = '*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}';
+function le() {
+  return /* @__PURE__ */ d(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: "lucide lucide-ellipsis-vertical-icon lucide-ellipsis-vertical",
+      children: [
+        /* @__PURE__ */ n("circle", { cx: "12", cy: "12", r: "1" }),
+        /* @__PURE__ */ n("circle", { cx: "12", cy: "5", r: "1" }),
+        /* @__PURE__ */ n("circle", { cx: "12", cy: "19", r: "1" })
+      ]
+    }
+  );
+}
+function ce() {
+  return /* @__PURE__ */ d(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: "lucide lucide-panel-bottom-icon lucide-panel-bottom",
+      children: [
+        /* @__PURE__ */ n("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+        /* @__PURE__ */ n("path", { d: "M3 15h18" })
+      ]
+    }
+  );
+}
+function de() {
+  return /* @__PURE__ */ d(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: "lucide lucide-panel-left-icon lucide-panel-left",
+      children: [
+        /* @__PURE__ */ n("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+        /* @__PURE__ */ n("path", { d: "M9 3v18" })
+      ]
+    }
+  );
+}
+function ue() {
+  return /* @__PURE__ */ d(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: "lucide lucide-panel-right-icon lucide-panel-right",
+      children: [
+        /* @__PURE__ */ n("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+        /* @__PURE__ */ n("path", { d: "M15 3v18" })
+      ]
+    }
+  );
+}
+function pe() {
+  return /* @__PURE__ */ d(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: "lucide lucide-panel-top-icon lucide-panel-top",
+      children: [
+        /* @__PURE__ */ n("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+        /* @__PURE__ */ n("path", { d: "M3 9h18" })
+      ]
+    }
+  );
+}
+function he() {
+  return /* @__PURE__ */ d(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: "lucide lucide-x-icon lucide-x",
+      children: [
+        /* @__PURE__ */ n("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ n("path", { d: "m6 6 12 12" })
+      ]
+    }
+  );
+}
+function S({
+  title: t,
+  active: e,
+  icon: o,
+  onClick: r
+}) {
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      title: t,
+      onClick: r,
+      class: () => `w-[22px] h-[22px] flex items-center justify-center rounded-md text-[11px] cursor-pointer transition-colors duration-150 ${(typeof e == "function" ? e() : e) ? "text-accent bg-soft color-white" : "text-subtle hover:color-muted hover:bg-section"}`,
+      children: /* @__PURE__ */ n(o, {})
+    }
+  );
+}
+const _ = 180, be = 300, E = 240, ge = 380, xe = {
+  bottom: ce,
+  top: pe,
+  left: de,
+  right: ue
+};
+function me({ plugins: t, registry: e, onClose: o }) {
+  const r = b(t[0]?.id ?? ""), i = b("bottom"), a = b(!1), l = b(be), s = b(ge);
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      class: () => {
+        const c = i();
+        return c === "top" ? "flex flex-col-reverse fixed top-0 left-0 w-full z-[2147483647]" : c === "left" ? "flex flex-row-reverse fixed left-0 top-0 h-screen z-[2147483647]" : c === "right" ? "flex fixed right-0 top-0 h-screen z-[2147483647]" : "flex flex-col fixed bottom-0 left-0 w-full z-[2147483647]";
+      },
+      children: [
+        /* @__PURE__ */ n(
+          "div",
+          {
+            class: () => {
+              const c = i();
+              return c === "bottom" || c === "top" ? "h-1 cursor-[ns-resize] bg-transparent hover:bg-accent transition-colors duration-200" : "w-1 cursor-[ew-resize] bg-transparent hover:bg-accent transition-colors duration-200";
+            },
+            onMouseDown: (c) => {
+              c.preventDefault();
+              const h = c.clientX, p = c.clientY, x = i(), m = x === "bottom" || x === "top" ? l() : s(), D = (w) => {
+                const y = i();
+                y === "bottom" ? l.set(
+                  Math.max(
+                    _,
+                    Math.min(
+                      window.innerHeight * 0.85,
+                      m + (p - w.clientY)
+                    )
+                  )
+                ) : y === "top" ? l.set(
+                  Math.max(
+                    _,
+                    Math.min(
+                      window.innerHeight * 0.85,
+                      m + (w.clientY - p)
+                    )
+                  )
+                ) : y === "left" ? s.set(
+                  Math.max(
+                    E,
+                    Math.min(
+                      window.innerWidth * 0.6,
+                      m + (w.clientX - h)
+                    )
+                  )
+                ) : s.set(
+                  Math.max(
+                    E,
+                    Math.min(
+                      window.innerWidth * 0.6,
+                      m + (h - w.clientX)
+                    )
+                  )
+                );
+              }, $ = () => {
+                document.removeEventListener("mousemove", D), document.removeEventListener("mouseup", $);
+              };
+              document.addEventListener("mousemove", D), document.addEventListener("mouseup", $);
+            }
+          }
+        ),
+        /* @__PURE__ */ n(
+          "div",
+          {
+            class: () => {
+              const c = i();
+              return c === "top" ? "w-full h-full bg-bg border-b border-border" : c === "left" ? "w-full h-full bg-bg border-r border-border" : c === "right" ? "w-full h-full bg-bg border-l border-border" : "w-full h-full bg-bg border-t border-border";
+            },
+            style: () => {
+              const c = i();
+              return c === "bottom" || c === "top" ? { height: `${l().toString()}px` } : { width: `${s().toString()}px` };
+            },
+            children: /* @__PURE__ */ d("div", { class: "flex flex-col flex-1 w-full h-full overflow-hidden", children: [
+              /* @__PURE__ */ d("div", { class: "flex h-10 items-stretch border-b border-border bg-header shrink-0 px-2 gap-[2px]", children: [
+                /* @__PURE__ */ d("div", { class: "flex items-center gap-[6px] pr-3 mr-[2px] border-r border-border shrink-0", children: [
+                  /* @__PURE__ */ n("img", { class: "h-[13px] w-[13px]", src: N }),
+                  /* @__PURE__ */ n("span", { class: "text-[10px] font-bold text-accent tracking-widest uppercase", children: "praxisjs" })
+                ] }),
+                /* @__PURE__ */ n("div", { class: "flex items-stretch flex-1", children: t.map((c) => /* @__PURE__ */ d(
+                  "button",
+                  {
+                    class: () => r() === c.id ? "relative flex items-center px-3 text-[11px] font-semibold text-accent cursor-pointer" : "flex items-center px-3 text-[11px] text-muted cursor-pointer hover:text-text transition-colors duration-150",
+                    onClick: () => {
+                      r.set(c.id);
+                    },
+                    children: [
+                      c.label,
+                      () => r() === c.id ? /* @__PURE__ */ n("span", { class: "absolute bottom-0 left-0 right-0 h-[2px] bg-accent" }) : null
+                    ]
+                  },
+                  c.id
+                )) }),
+                /* @__PURE__ */ d("div", { class: "flex items-center gap-[2px] shrink-0", children: [
+                  /* @__PURE__ */ d("div", { class: "relative", children: [
+                    /* @__PURE__ */ n(
+                      S,
+                      {
+                        title: "Dock position",
+                        icon: le,
+                        active: () => a(),
+                        onClick: () => {
+                          a.set(!a());
+                        }
+                      }
+                    ),
+                    () => a() ? /* @__PURE__ */ n("div", { class: "absolute right-0 top-full mt-1 flex gap-[2px] bg-bg border border-border rounded-md shadow-lg p-1 z-10", children: ["bottom", "top", "left", "right"].map(
+                      (c) => /* @__PURE__ */ n(
+                        S,
+                        {
+                          title: `Dock ${c}`,
+                          active: () => i() === c,
+                          icon: xe[c],
+                          onClick: () => {
+                            i.set(c), a.set(!1);
+                          }
+                        },
+                        c
+                      )
+                    ) }) : null
+                  ] }),
+                  /* @__PURE__ */ n("div", { class: "w-px h-3 bg-border mx-1" }),
+                  /* @__PURE__ */ n(S, { title: "Close", icon: he, onClick: o })
+                ] })
+              ] }),
+              /* @__PURE__ */ n("div", { class: "flex-1 overflow-hidden flex flex-col", children: () => {
+                const h = t.find((p) => p.id === r())?.component;
+                return h ? /* @__PURE__ */ n(h, { registry: e }) : null;
+              } })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+const fe = [
+  ee,
+  J,
+  se
+];
+function B({
+  plugins: t,
+  registry: e
+}) {
+  const o = b(!1);
+  return /* @__PURE__ */ n("div", { children: () => o() ? /* @__PURE__ */ n(
+    me,
+    {
+      plugins: t,
+      registry: e,
+      onClose: () => {
+        o.set(!1);
+      }
+    }
+  ) : /* @__PURE__ */ d(
+    "button",
+    {
+      onClick: () => {
+        o.set(!0);
+      },
+      class: "fixed bottom-5 right-5 z-[2147483647] flex items-center gap-1 pl-[10px] pr-[14px] h-[32px] rounded-xl font-sans font-semibold text-[12px] text-accent bg-header border border-border cursor-pointer select-none shadow-[0_8px_32px_rgba(0,0,0,0.7)] transition-all duration-200 hover:border-accent hover:bg-soft hover:shadow-[0_8px_32px_rgba(56,189,248,0.1)]",
+      children: [
+        /* @__PURE__ */ n("img", { class: "h-[13px] w-[13px]", src: N }),
+        /* @__PURE__ */ n("span", { class: "text-[10px] font-bold text-accent tracking-widest uppercase", children: "devtools" })
+      ]
+    }
+  ) });
+}
+const Se = {
+  plugins: [...fe],
+  host: null,
+  cleanup: null,
+  init(t = {}) {
+    if (this.host) return;
+    t.plugins && (this.plugins = t.plugins), this.plugins.forEach((a) => a.setup?.(g.instance));
+    const e = document.createElement("div");
+    e.id = "praxisjs-devtools", document.body.appendChild(e), this.host = e;
+    const o = e.attachShadow({ mode: "open" }), r = document.createElement("style");
+    r.textContent = ae + F, o.appendChild(r);
+    const i = document.createElement("div");
+    o.appendChild(i), this.cleanup = j(
+      /* @__PURE__ */ n(B, { plugins: this.plugins, registry: g.instance }),
+      i
+    );
+  },
+  registerPlugin(t) {
+    this.plugins.find((e) => e.id === t.id) || (t.setup?.(g.instance), this.plugins.push(t), this.remount());
+  },
+  get registry() {
+    return g.instance;
+  },
+  remount() {
+    if (!this.host) return;
+    const e = this.host.shadowRoot.querySelector("div:last-child");
+    this.cleanup?.(), this.cleanup = j(
+      /* @__PURE__ */ n(B, { plugins: this.plugins, registry: g.instance }),
+      e
+    );
+  }
+};
+function we(t) {
+  return typeof t == "function" && typeof t.subscribe == "function" && !("set" in t);
+}
+function Ce(t = {}) {
+  return function(e, o, r) {
+    const i = e.constructor.name, a = t.label ?? o;
+    if (r && typeof r.value == "function") {
+      const u = r.value;
+      r.value = function(...c) {
+        const h = performance.now();
+        let p, x = !1;
+        try {
+          p = u.apply(this, c);
+        } catch (m) {
+          throw x = !0, p = m, m;
+        } finally {
+          const m = performance.now() - h;
+          g.instance.recordMethodCall(
+            this,
+            a,
+            c,
+            x ? `throw ${String(p)}` : p,
+            m,
+            i
+          );
+        }
+        return p;
+      };
+      return;
+    }
+    const l = Object.getOwnPropertyDescriptor(e, o);
+    if (l?.get && l.set) {
+      const u = l.get.bind(l), c = l.set.bind(l), h = /* @__PURE__ */ new WeakSet();
+      Object.defineProperty(e, o, {
+        get() {
+          return u.call(this);
+        },
+        set(p) {
+          if (!h.has(this))
+            h.add(this), c.call(this, p), g.instance.registerSignal(
+              this,
+              a,
+              p,
+              i
+            );
+          else {
+            const x = u.call(this);
+            c.call(this, p), g.instance.updateSignal(this, a, p, x);
+          }
+        },
+        enumerable: !0,
+        configurable: !0
+      });
+      return;
+    }
+    const s = /* @__PURE__ */ new WeakMap();
+    Object.defineProperty(e, o, {
+      get() {
+        return s.get(this)?.computed;
+      },
+      set(u) {
+        if (s.get(this)?.unsub(), !we(u)) {
+          console.warn(
+            `[PraxisJS DevTools] @Debug() on "${i}.${o}": expected a computed() value but got ${typeof u}. Skipping.`
+          );
+          return;
+        }
+        let c = !0, h = u();
+        const p = u.subscribe((x) => {
+          if (c) {
+            c = !1;
+            return;
+          }
+          g.instance.updateSignal(this, a, x, h), h = x;
+        });
+        s.set(this, { computed: u, unsub: p }), g.instance.registerSignal(this, a, h, i);
+      },
+      enumerable: !0,
+      configurable: !0
+    });
+  };
+}
+function Ie() {
+  return function(t) {
+    const e = t.name, o = g.instance, r = t.prototype, i = r.render;
+    i && (r.render = function(...s) {
+      const u = performance.now(), c = i.call(this, ...s), h = performance.now() - u;
+      return o.recordRender(this, h), c;
+    });
+    const a = r.onBeforeMount;
+    r.onBeforeMount = function(...s) {
+      return o.registerComponent(this, e), o.recordLifecycle(this, "onBeforeMount"), a?.call(this, ...s);
+    };
+    const l = [
+      "onMount",
+      "onUnmount",
+      "onBeforeUpdate",
+      "onUpdate",
+      "onAfterUpdate"
+    ];
+    for (const s of l) {
+      const u = r[s];
+      r[s] = function(...c) {
+        return o.recordLifecycle(this, s), u?.call(this, ...c);
+      };
+    }
+    return t;
+  };
+}
+export {
+  J as ComponentsPlugin,
+  Ce as Debug,
+  Se as DevTools,
+  g as Registry,
+  ee as SignalsPlugin,
+  se as TimelinePlugin,
+  Ie as Trace
+};