@vobs/devtools-ui 1.1.0 → 1.2.0

package/dist/panel.js

@@ -0,0 +1,3183 @@
+import 'axios';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// packages/reactivity/src/debug.ts
+var activeDebugHooks = null;
+var signalNames = /* @__PURE__ */ new WeakMap();
+function hasDebugHooks() {
+  return activeDebugHooks !== null;
+}
+__name(hasDebugHooks, "hasDebugHooks");
+function setSignalDebugName(signal, name) {
+  signalNames.set(signal, name);
+  invokeDebug("signalNamed", signal, name);
+}
+__name(setSignalDebugName, "setSignalDebugName");
+function invokeDebug(name, ...args) {
+  return;
+}
+__name(invokeDebug, "invokeDebug");
+
+// packages/reactivity/src/owner.ts
+var currentOwner = null;
+var nextOwnerId = 1;
+var ownerNames = /* @__PURE__ */ new WeakMap();
+function createOwner() {
+  const parent = currentOwner;
+  let disposed = parent?.disposed ?? false;
+  const children = [];
+  const cleanups = [];
+  const errorHandlers = /* @__PURE__ */ new Set();
+  const owner = {
+    id: `owner-${nextOwnerId++}`,
+    parent,
+    children,
+    depth: (parent?.depth ?? -1) + 1,
+    get disposed() {
+      return disposed;
+    },
+    run(fn) {
+      if (disposed) throw new Error("Vobs: \u5DF2\u9500\u6BC1\u7684 Owner \u4E0D\u80FD\u7EE7\u7EED\u8FD0\u884C");
+      const previous = currentOwner;
+      currentOwner = owner;
+      try {
+        return fn();
+      } finally {
+        currentOwner = previous;
+      }
+    },
+    addCleanup(cleanup) {
+      if (disposed) {
+        cleanup();
+        return;
+      }
+      cleanups.push(cleanup);
+    },
+    onDispose(cleanup) {
+      owner.addCleanup(cleanup);
+    },
+    onError(handler) {
+      errorHandlers.add(handler);
+      const remove = /* @__PURE__ */ __name(() => errorHandlers.delete(handler), "remove");
+      owner.addCleanup(remove);
+      return remove;
+    },
+    handleError(error) {
+      for (const handler of [...errorHandlers].reverse()) {
+        try {
+          handler(error);
+          return true;
+        } catch (handlerError) {
+          return parent?.handleError(handlerError) ?? false;
+        }
+      }
+      return parent?.handleError(error) ?? false;
+    },
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      for (const child of [...children]) child.dispose();
+      children.length = 0;
+      let firstError;
+      for (let index = cleanups.length - 1; index >= 0; index--) {
+        try {
+          cleanups[index]();
+        } catch (error) {
+          firstError ?? (firstError = error);
+        }
+      }
+      cleanups.length = 0;
+      if (parent) {
+        const index = parent.children.indexOf(owner);
+        if (index >= 0) parent.children.splice(index, 1);
+      }
+      if (firstError) throw firstError;
+    }
+  };
+  if (parent && !parent.disposed) parent.children.push(owner);
+  return owner;
+}
+__name(createOwner, "createOwner");
+function setOwnerDebugName(owner, name) {
+  ownerNames.set(owner, name);
+}
+__name(setOwnerDebugName, "setOwnerDebugName");
+function getCurrentOwner() {
+  return currentOwner;
+}
+__name(getCurrentOwner, "getCurrentOwner");
+function onDispose(cleanup) {
+  const owner = getCurrentOwner();
+  if (!owner) throw new Error("Vobs: onDispose \u5FC5\u987B\u5728 Owner \u4F5C\u7528\u57DF\u5185\u8C03\u7528");
+  owner.onDispose(cleanup);
+}
+__name(onDispose, "onDispose");
+
+// packages/reactivity/src/signal.ts
+var currentSubscriber = null;
+function getCurrentSubscriber() {
+  return currentSubscriber;
+}
+__name(getCurrentSubscriber, "getCurrentSubscriber");
+function setCurrentSubscriber(subscriber) {
+  currentSubscriber = subscriber;
+}
+__name(setCurrentSubscriber, "setCurrentSubscriber");
+function trackDependency(dependency) {
+  if (!currentSubscriber || currentSubscriber.disposed) return;
+  !currentSubscriber.dependencies.has(dependency);
+  currentSubscriber.dependencies.add(dependency);
+}
+__name(trackDependency, "trackDependency");
+function state(initialValue, debugName) {
+  let value = initialValue;
+  let disposed = false;
+  const subscribers = /* @__PURE__ */ new Set();
+  const signalInstance = {
+    get value() {
+      const subscriber = getCurrentSubscriber();
+      if (subscriber && !subscriber.disposed) {
+        subscribers.add(subscriber);
+        trackDependency(signalInstance);
+      }
+      return value;
+    },
+    set value(nextValue) {
+      if (disposed || Object.is(value, nextValue)) return;
+      value = nextValue;
+      for (const subscriber of [...subscribers]) subscriber.notify();
+    },
+    unsubscribe(subscriber) {
+      subscribers.delete(subscriber);
+    },
+    // 与 `.value =` 赋值同一条路径：判等短路、debug hook、notify 全部一致。
+    // 以闭包实现，可安全地作为回调直接传递（无 this 绑定问题）。
+    set(next) {
+      signalInstance.value = next;
+    },
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      subscribers.clear();
+    }
+  };
+  const owner = getCurrentOwner();
+  owner?.addCleanup(signalInstance.dispose);
+  if (debugName?.trim()) setSignalDebugName(signalInstance, debugName.trim());
+  return signalInstance;
+}
+__name(state, "state");
+
+// packages/reactivity/src/scheduler.ts
+var _Scheduler = class _Scheduler {
+  constructor() {
+    this.dirtyEffects = /* @__PURE__ */ new Set();
+    this.lowPriorityEffects = /* @__PURE__ */ new Set();
+    // flush 不可重入（flushing 标志保证），缓冲数组可在轮次间安全复用，避免每轮分配。
+    this.normalBuffer = [];
+    this.lowBuffer = [];
+    this.flushing = false;
+    this.scheduled = false;
+    this.batchDepth = 0;
+  }
+  schedule(effect2) {
+    if (effect2.disposed) return;
+    this.dirtyEffects.add(effect2);
+    this.lowPriorityEffects.delete(effect2);
+    this.ensureScheduled();
+  }
+  /** Queue an effect behind normal updates while preserving deterministic order. */
+  scheduleLow(effect2) {
+    if (effect2.disposed) return;
+    if (!this.dirtyEffects.has(effect2)) this.lowPriorityEffects.add(effect2);
+    this.ensureScheduled();
+  }
+  ensureScheduled() {
+    if (this.batchDepth === 0 && !this.flushing && !this.scheduled) {
+      this.scheduled = true;
+      queueMicrotask(() => {
+        this.scheduled = false;
+        this.flush();
+      });
+    }
+  }
+  remove(effect2) {
+    this.dirtyEffects.delete(effect2);
+    this.lowPriorityEffects.delete(effect2);
+  }
+  batch(fn) {
+    this.batchDepth++;
+    try {
+      return fn();
+    } finally {
+      this.batchDepth--;
+      if (this.batchDepth === 0) this.flush();
+    }
+  }
+  flush() {
+    if (this.flushing || this.batchDepth > 0) return;
+    this.flushing = true;
+    let rounds = 0;
+    let firstError;
+    let hasError = false;
+    try {
+      while (this.dirtyEffects.size > 0 || this.lowPriorityEffects.size > 0) {
+        if (++rounds > 100) {
+          this.dirtyEffects.clear();
+          this.lowPriorityEffects.clear();
+          throw new Error("Vobs: \u54CD\u5E94\u5F0F\u66F4\u65B0\u8D85\u8FC7 100 \u8F6E\uFF0C\u53EF\u80FD\u5B58\u5728\u5FAA\u73AF\u4F9D\u8D56");
+        }
+        this.collectRunnable(this.dirtyEffects, this.normalBuffer);
+        this.collectRunnable(this.lowPriorityEffects, this.lowBuffer);
+        sortEffects(this.normalBuffer);
+        sortEffects(this.lowBuffer);
+        for (const effect2 of this.normalBuffer) {
+          try {
+            effect2.run();
+          } catch (error) {
+            if (!hasError) {
+              firstError = error;
+              hasError = true;
+            }
+          }
+        }
+        for (const effect2 of this.lowBuffer) {
+          try {
+            effect2.run();
+          } catch (error) {
+            if (!hasError) {
+              firstError = error;
+              hasError = true;
+            }
+          }
+        }
+        this.normalBuffer.length = 0;
+        this.lowBuffer.length = 0;
+      }
+    } finally {
+      this.normalBuffer.length = 0;
+      this.lowBuffer.length = 0;
+      this.flushing = false;
+    }
+    if (hasError) throw firstError;
+  }
+  /** 收集未 disposed 的 effect 并清空源集合；run() 期间新调度的 effect 留给下一轮。 */
+  collectRunnable(source, target) {
+    for (const effect2 of source) {
+      if (!effect2.disposed) target.push(effect2);
+    }
+    source.clear();
+  }
+};
+__name(_Scheduler, "Scheduler");
+var Scheduler = _Scheduler;
+function sortEffects(effects) {
+  if (effects.length > 1) {
+    effects.sort((a, b) => b.depth - a.depth || a.order - b.order);
+  }
+}
+__name(sortEffects, "sortEffects");
+var scheduler = new Scheduler();
+
+// packages/reactivity/src/effect.ts
+var nextEffectOrder = 1;
+function cleanupDependencies(subscriber) {
+  for (const dependency of subscriber.dependencies) {
+    dependency.unsubscribe(subscriber);
+  }
+  subscriber.dependencies.clear();
+}
+__name(cleanupDependencies, "cleanupDependencies");
+function effect(callback) {
+  const owner = getCurrentOwner();
+  let cleanup;
+  let dirty = true;
+  let disposed = false;
+  const eff = {
+    order: nextEffectOrder++,
+    depth: owner?.depth ?? 0,
+    dependencies: /* @__PURE__ */ new Set(),
+    get disposed() {
+      return disposed;
+    },
+    notify() {
+      if (disposed || dirty) return;
+      dirty = true;
+      scheduler.schedule(eff);
+    },
+    run() {
+      if (disposed || !dirty) return;
+      dirty = false;
+      const previousCleanup = cleanup;
+      cleanup = void 0;
+      let cleanupError;
+      if (previousCleanup) {
+        try {
+          previousCleanup();
+        } catch (error) {
+          const handled2 = owner?.handleError(error) ?? false;
+          if (!handled2) cleanupError = error;
+        }
+      }
+      cleanupDependencies(eff);
+      const previous = getCurrentSubscriber();
+      setCurrentSubscriber(eff);
+      let thrown;
+      let handled = false;
+      try {
+        const result = owner ? owner.run(callback) : callback();
+        cleanup = typeof result === "function" ? result : void 0;
+      } catch (error) {
+        thrown = error;
+        handled = owner?.handleError(error) ?? false;
+        if (!handled) throw error;
+      } finally {
+        setCurrentSubscriber(previous);
+      }
+      if (cleanupError && !thrown) throw cleanupError;
+    },
+    scheduleLow() {
+      if (disposed || dirty) return;
+      dirty = true;
+      scheduler.scheduleLow(eff);
+    },
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      dirty = false;
+      scheduler.remove(eff);
+      const previousCleanup = cleanup;
+      cleanup = void 0;
+      let cleanupError;
+      if (previousCleanup) {
+        try {
+          previousCleanup();
+        } catch (error) {
+          const handled = owner?.handleError(error) ?? false;
+          if (!handled) cleanupError = error;
+        }
+      }
+      cleanupDependencies(eff);
+      if (cleanupError) throw cleanupError;
+    }
+  };
+  owner?.addCleanup(eff.dispose);
+  eff.run();
+  return eff;
+}
+__name(effect, "effect");
+
+// packages/runtime/src/debug.ts
+var activeRuntimeDebugHooks = null;
+function getRuntimeDebugHooks() {
+  return activeRuntimeDebugHooks;
+}
+__name(getRuntimeDebugHooks, "getRuntimeDebugHooks");
+function invokeRuntimeDebug(name, ...args) {
+  return;
+}
+__name(invokeRuntimeDebug, "invokeRuntimeDebug");
+function readDebugValue(read) {
+  try {
+    return read();
+  } catch {
+    return "[Uninspectable]";
+  }
+}
+__name(readDebugValue, "readDebugValue");
+function describeDebugNode(node) {
+  if (!node || typeof node !== "object") return "node";
+  const value = node;
+  const name = typeof value.tagName === "string" ? value.tagName.toLowerCase() : typeof value.nodeName === "string" ? value.nodeName.toLowerCase() : "node";
+  const id = typeof value.id === "string" && value.id ? `#${value.id}` : "";
+  const className = typeof value.className === "string" && value.className ? `.${value.className.trim().split(/\s+/).filter(Boolean).join(".")}` : "";
+  return `${name}${id}${className}`;
+}
+__name(describeDebugNode, "describeDebugNode");
+
+// packages/runtime/src/hmr.ts
+var globalTarget = globalThis;
+var hmrGlobal = globalTarget.__VOBS_HMR__ ?? { modules: /* @__PURE__ */ new Map() };
+globalTarget.__VOBS_HMR__ = hmrGlobal;
+function registerHmrInstance(moduleId, instance) {
+  const instances = getModule(moduleId).instances;
+  instances.add(instance);
+  return () => instances.delete(instance);
+}
+__name(registerHmrInstance, "registerHmrInstance");
+function markHmrInstanceMounted(node, parent) {
+  const instance = hmrInstances.get(node);
+  if (instance) instance.parent = parent;
+}
+__name(markHmrInstanceMounted, "markHmrInstanceMounted");
+function getModule(moduleId) {
+  let module = hmrGlobal.modules.get(moduleId);
+  if (!module) {
+    module = { components: /* @__PURE__ */ new Map(), state: /* @__PURE__ */ new Map(), instances: /* @__PURE__ */ new Set() };
+    hmrGlobal.modules.set(moduleId, module);
+  }
+  return module;
+}
+__name(getModule, "getModule");
+var hmrInstances = /* @__PURE__ */ new WeakMap();
+function associateHmrInstance(node, instance) {
+  hmrInstances.set(node, instance);
+}
+__name(associateHmrInstance, "associateHmrInstance");
+var nodeOwners = /* @__PURE__ */ new WeakMap();
+var eventBindings = /* @__PURE__ */ new WeakMap();
+function getRenderer() {
+  {
+    throw new Error("\u6E32\u67D3\u5668\u672A\u521D\u59CB\u5316");
+  }
+}
+__name(getRenderer, "getRenderer");
+function createText(content) {
+  return getRenderer().createText(content);
+}
+__name(createText, "createText");
+function createElement(tag) {
+  return getRenderer().createElement(tag);
+}
+__name(createElement, "createElement");
+function createComment(content) {
+  return getRenderer().createComment(content);
+}
+__name(createComment, "createComment");
+function insertBefore(parent, child, anchor) {
+  if (isVobsFragment(child)) {
+    child.mount(parent, isVobsFragment(anchor) ? anchor.start : anchor);
+    return;
+  }
+  getRenderer().insertBefore(parent, child, isVobsFragment(anchor) ? anchor.start : anchor);
+  markHmrInstanceMounted(child, parent);
+}
+__name(insertBefore, "insertBefore");
+function removeChild(parent, child) {
+  disposeNodeOwner(child);
+  if (isVobsFragment(child)) {
+    child.unmount(parent);
+    return;
+  }
+  getRenderer().removeChild(parent, child);
+}
+__name(removeChild, "removeChild");
+function setTextContent(node, content) {
+  getRenderer().setTextContent(node, content);
+}
+__name(setTextContent, "setTextContent");
+function setProperty(node, key, value) {
+  getRenderer().setProperty(node, key, value);
+}
+__name(setProperty, "setProperty");
+function setAttribute(node, key, value) {
+  getRenderer().setAttribute(node, key, value);
+}
+__name(setAttribute, "setAttribute");
+function addEventListener(node, event, handler) {
+  const renderer = getRenderer();
+  const owner = getCurrentOwner();
+  let bindings = eventBindings.get(node);
+  if (!bindings) {
+    bindings = /* @__PURE__ */ new Map();
+    eventBindings.set(node, bindings);
+  }
+  const previous = bindings.get(event);
+  if (previous && previous.original === handler && previous.owner === owner) return;
+  if (previous) renderer.removeEventListener(node, event, previous.handler);
+  const listener = owner ? (reason) => {
+    try {
+      owner.run(() => handler(reason));
+    } catch (error) {
+      const handled = owner.handleError(error);
+      invokeRuntimeDebug("error", {
+        error,
+        owner,
+        phase: "event",
+        handled,
+        recovery: handled ? "handled" : "propagated"
+      });
+      if (!handled) throw error;
+    }
+  } : handler;
+  const binding = { handler: listener, owner, original: handler };
+  bindings.set(event, binding);
+  renderer.addEventListener(node, event, listener);
+  owner?.onDispose(() => {
+    if (bindings?.get(event) !== binding) return;
+    bindings.delete(event);
+    renderer.removeEventListener(node, event, listener);
+  });
+}
+__name(addEventListener, "addEventListener");
+function createComponent(component, props, source) {
+  const owner = createOwner();
+  const componentName = component.displayName || component.name || "anonymous";
+  setOwnerDebugName(owner, source ? `${componentName} (${source.file}:${source.line}:${source.column})` : componentName);
+  owner.onError((reason) => {
+    attachSourceLocation(reason, source);
+    attachComponentContext(reason, componentName, owner.id);
+    throw reason;
+  });
+  let node;
+  try {
+    node = owner.run(() => component(props));
+  } catch (error) {
+    owner.dispose();
+    attachSourceLocation(error, source);
+    attachComponentContext(error, componentName, owner.id);
+    throw error;
+  }
+  associateNodeOwner(node, owner);
+  const hmrKey = component.hmrKey;
+  if (hmrKey) {
+    const instance = {
+      node,
+      parent: null,
+      refresh() {
+        const previous = instance.node;
+        const next = owner.run(() => component(props));
+        if (instance.parent && !isVobsFragment(previous) && !isVobsFragment(next)) {
+          getRenderer().insertBefore(instance.parent, next, previous);
+          getRenderer().removeChild(instance.parent, previous);
+        }
+        nodeOwners.delete(previous);
+        nodeOwners.set(next, owner);
+        associateHmrInstance(next, instance);
+        instance.node = next;
+      }
+    };
+    associateHmrInstance(node, instance);
+    const separator = hmrKey.lastIndexOf(":");
+    const moduleId = separator < 0 ? hmrKey : hmrKey.slice(0, separator);
+    const cleanup = registerHmrInstance(moduleId, instance);
+    owner.onDispose(cleanup);
+  }
+  return node;
+}
+__name(createComponent, "createComponent");
+function attachSourceLocation(reason, source) {
+  if (!source || (!reason || typeof reason !== "object" && typeof reason !== "function")) return;
+  const error = reason;
+  if (error.vobsSource) return;
+  try {
+    Object.defineProperty(error, "vobsSource", {
+      configurable: true,
+      enumerable: false,
+      value: source,
+      writable: false
+    });
+  } catch {
+  }
+}
+__name(attachSourceLocation, "attachSourceLocation");
+function attachComponentContext(reason, component, ownerId) {
+  if (!reason || typeof reason !== "object" && typeof reason !== "function") return;
+  const error = reason;
+  try {
+    if (!error.vobsComponent) Object.defineProperty(error, "vobsComponent", { configurable: true, enumerable: false, value: component, writable: false });
+    if (!error.vobsOwnerId) Object.defineProperty(error, "vobsOwnerId", { configurable: true, enumerable: false, value: ownerId, writable: false });
+  } catch {
+  }
+}
+__name(attachComponentContext, "attachComponentContext");
+function createBlock(factory) {
+  const owner = createOwner();
+  setOwnerDebugName(owner, "dynamic");
+  let node;
+  try {
+    node = owner.run(factory);
+  } catch (error) {
+    owner.dispose();
+    throw error;
+  }
+  if (!node) {
+    owner.dispose();
+    return null;
+  }
+  associateNodeOwner(node, owner);
+  return node;
+}
+__name(createBlock, "createBlock");
+function associateNodeOwner(node, owner) {
+  nodeOwners.set(node, owner);
+}
+__name(associateNodeOwner, "associateNodeOwner");
+function disposeNodeOwner(node) {
+  const owner = nodeOwners.get(node);
+  if (!owner) return;
+  nodeOwners.delete(node);
+  owner.dispose();
+}
+__name(disposeNodeOwner, "disposeNodeOwner");
+
+// packages/runtime/src/fragment.ts
+function createFragment(factory) {
+  const start = createComment("vobs:fragment:start");
+  const end = createComment("vobs:fragment:end");
+  let parent = null;
+  let initialized = false;
+  const owner = getCurrentOwner();
+  const fragment = {
+    kind: "vobs-fragment",
+    start,
+    end,
+    mount(nextParent, anchor) {
+      if (parent && parent !== nextParent) {
+        throw new Error("Vobs Fragment: \u4E0D\u80FD\u8DE8\u7236\u8282\u70B9\u79FB\u52A8 Fragment");
+      }
+      if (initialized) {
+        moveRange(nextParent, start, end, anchor);
+        return;
+      }
+      const renderer = getRenderer();
+      renderer.insertBefore(nextParent, start, anchor);
+      renderer.insertBefore(nextParent, end, anchor);
+      parent = nextParent;
+      initialized = true;
+      if (owner) owner.run(() => factory(nextParent, end));
+      else factory(nextParent, end);
+    },
+    unmount(nextParent) {
+      if (!initialized || parent !== nextParent) {
+        throw new Error("Vobs Fragment: Fragment \u4E0D\u5C5E\u4E8E\u6307\u5B9A\u7236\u8282\u70B9");
+      }
+      const renderer = getRenderer();
+      let current = renderer.nextSibling(start);
+      while (current && current !== end) {
+        const next = renderer.nextSibling(current);
+        renderer.removeChild(nextParent, current);
+        current = next;
+      }
+      renderer.removeChild(nextParent, start);
+      renderer.removeChild(nextParent, end);
+      parent = null;
+      initialized = false;
+    }
+  };
+  return fragment;
+}
+__name(createFragment, "createFragment");
+function isVobsFragment(value) {
+  return Boolean(value) && typeof value === "object" && value.kind === "vobs-fragment";
+}
+__name(isVobsFragment, "isVobsFragment");
+function moveRange(parent, start, end, anchor) {
+  const renderer = getRenderer();
+  const nodes = [start];
+  let current = renderer.nextSibling(start);
+  while (current) {
+    nodes.push(current);
+    if (current === end) break;
+    current = renderer.nextSibling(current);
+  }
+  if (nodes[nodes.length - 1] !== end) {
+    throw new Error("Vobs Fragment: \u627E\u4E0D\u5230\u7ED3\u675F\u951A\u70B9");
+  }
+  for (const node of nodes) renderer.insertBefore(parent, node, anchor);
+}
+__name(moveRange, "moveRange");
+
+// packages/runtime/src/dynamic.ts
+function insertDynamic(parent, anchor, factory) {
+  const marker = createComment("vobs:dynamic");
+  insertBefore(parent, marker, anchor);
+  let current = null;
+  effect(() => {
+    const next = createBlock(factory);
+    if (next === current) return;
+    if (current) removeChild(parent, current);
+    current = next;
+    if (current) insertBefore(parent, current, marker);
+  });
+}
+__name(insertDynamic, "insertDynamic");
+
+// packages/vobs/src/context.ts
+var ownerProviders = /* @__PURE__ */ new WeakMap();
+function inject(key, fallback) {
+  const owner = getCurrentOwner();
+  const value = owner ? injectFromOwner(owner, key) : void 0;
+  return value === void 0 ? fallback : value;
+}
+__name(inject, "inject");
+function injectFromOwner(owner, key) {
+  let current = owner;
+  while (current) {
+    const providers = ownerProviders.get(current);
+    if (providers?.has(key)) return providers.get(key);
+    current = current.parent;
+  }
+  return void 0;
+}
+__name(injectFromOwner, "injectFromOwner");
+
+// packages/vobs/src/app.ts
+function createInjectionKey(description) {
+  return Symbol(description);
+}
+__name(createInjectionKey, "createInjectionKey");
+var HTTP_KEY = createInjectionKey("vobs.http");
+var activeDevTools = null;
+function getDevTools() {
+  return activeDevTools;
+}
+__name(getDevTools, "getDevTools");
+
+// packages/ui/src/utils.ts
+function classNames(...values) {
+  return values.flatMap((value) => typeof value === "string" ? value.trim().split(/\s+/u) : []).filter(Boolean).join(" ");
+}
+__name(classNames, "classNames");
+function readProp(props, name, fallback) {
+  const value = Reflect.get(props, name);
+  return value === void 0 ? fallback : value;
+}
+__name(readProp, "readProp");
+function hasProp(props, name) {
+  return name in props;
+}
+__name(hasProp, "hasProp");
+function bindClassList(root, props, readBaseClasses) {
+  effect(() => {
+    setAttribute(root, "class", classNames(
+      ...readBaseClasses(),
+      readString(props, "class"),
+      readString(props, "className")
+    ));
+  });
+}
+__name(bindClassList, "bindClassList");
+function bindCommonAttributes(root, props, skip = [], options = {}) {
+  const ignored = new Set(skip);
+  ignored.add("class");
+  ignored.add("className");
+  ignored.add("children");
+  ignored.add("style");
+  effect(() => {
+    const next = /* @__PURE__ */ new Map();
+    for (const name of Object.keys(props)) {
+      if (ignored.has(name) || name.startsWith("on")) continue;
+      if (!isCommonAttribute(name)) continue;
+      if (options.includeDataAria === false && (name.startsWith("aria-") || name.startsWith("data-"))) continue;
+      const value = Reflect.get(props, name);
+      const normalized = normalizeAttribute(name, value);
+      if (normalized !== void 0) next.set(normalized.name, normalized.value);
+    }
+    const managed = getManagedAttributes(root);
+    for (const name of managed) {
+      if (!next.has(name)) removeAttribute(root, name);
+    }
+    for (const [name, value] of next) setAttribute(root, name, value);
+    setManagedAttributes(root, next.keys());
+  });
+}
+__name(bindCommonAttributes, "bindCommonAttributes");
+function bindUserStyle(root, props) {
+  bindStyle(root, props, () => "");
+}
+__name(bindUserStyle, "bindUserStyle");
+function bindStyle(root, props, createStyle) {
+  effect(() => {
+    const userStyle = readString(props, "style");
+    const internalStyle = createStyle();
+    const style = [internalStyle, userStyle].filter(Boolean).join("; ");
+    if (style) setAttribute(root, "style", style);
+    else removeAttribute(root, "style");
+  });
+}
+__name(bindStyle, "bindStyle");
+function bindTextContent(node, read) {
+  effect(() => {
+    setTextContent(node, String(read() ?? ""));
+  });
+}
+__name(bindTextContent, "bindTextContent");
+function bindPropertyValue(node, name, read) {
+  effect(() => setProperty(node, name, read()));
+}
+__name(bindPropertyValue, "bindPropertyValue");
+function listen(root, event, props, propName, disabled) {
+  addEventListener(root, event, (reason) => {
+    if (disabled?.()) return;
+    const handler = Reflect.get(props, propName);
+    if (typeof handler === "function") handler(reason);
+  });
+}
+__name(listen, "listen");
+function mountSlot(parent, props, propName) {
+  insertDynamic(parent, null, () => resolveSlot(Reflect.get(props, propName)));
+}
+__name(mountSlot, "mountSlot");
+function resolveSlot(value) {
+  const resolved = typeof value === "function" ? value() : value;
+  if (resolved === void 0 || resolved === null || resolved === false) return null;
+  if (typeof resolved === "string" || typeof resolved === "number") return createText(String(resolved));
+  if (Array.isArray(resolved)) {
+    const children = resolved;
+    return createFragment((parent, anchor) => {
+      for (const child of children) {
+        const node = resolveSlot(child);
+        if (node) insertBefore(parent, node, anchor);
+      }
+    });
+  }
+  return resolved;
+}
+__name(resolveSlot, "resolveSlot");
+function setOptionalAttribute(node, name, value) {
+  if (value === void 0 || value === null || value === false || value === "") {
+    removeAttribute(node, name);
+    return;
+  }
+  setAttribute(node, name, String(value));
+}
+__name(setOptionalAttribute, "setOptionalAttribute");
+function setOptionalProperty(node, name, value) {
+  if (value === void 0 || value === null) return;
+  setProperty(node, name, value);
+}
+__name(setOptionalProperty, "setOptionalProperty");
+function readString(props, name) {
+  const value = Reflect.get(props, name);
+  return typeof value === "string" ? value : void 0;
+}
+__name(readString, "readString");
+function isCommonAttribute(name) {
+  return name === "id" || name === "title" || name === "role" || name === "tabIndex" || name.startsWith("aria-") || name.startsWith("data-");
+}
+__name(isCommonAttribute, "isCommonAttribute");
+function normalizeAttribute(name, value) {
+  if (value === void 0 || value === null) return void 0;
+  if (value === false && !name.startsWith("aria-") && !name.startsWith("data-")) return void 0;
+  return { name: name === "tabIndex" ? "tabindex" : name, value: String(value) };
+}
+__name(normalizeAttribute, "normalizeAttribute");
+var managedAttributes = /* @__PURE__ */ new WeakMap();
+function getManagedAttributes(node) {
+  return managedAttributes.get(node) ?? /* @__PURE__ */ new Set();
+}
+__name(getManagedAttributes, "getManagedAttributes");
+function setManagedAttributes(node, names) {
+  managedAttributes.set(node, new Set(names));
+}
+__name(setManagedAttributes, "setManagedAttributes");
+function removeAttribute(node, name) {
+  const candidate = node;
+  candidate.removeAttribute?.(name);
+}
+__name(removeAttribute, "removeAttribute");
+
+// packages/ui/src/button.ts
+function Button(props = {}) {
+  const root = createElement("button");
+  bindClassList(root, props, () => [
+    "vui-btn",
+    `vui-btn--${readProp(props, "variant", "primary")}`,
+    `vui-btn--${readProp(props, "size", "md")}`,
+    readProp(props, "iconOnly", false) ? "vui-btn--icon" : void 0
+  ]);
+  bindCommonAttributes(root, props, [
+    "variant",
+    "size",
+    "type",
+    "disabled",
+    "loading",
+    "iconOnly",
+    "icon",
+    "onClick"
+  ]);
+  effect(() => {
+    const disabled = readProp(props, "disabled", false) || readProp(props, "loading", false);
+    setOptionalProperty(root, "disabled", disabled);
+    setOptionalAttribute(root, "type", readProp(props, "type", "button"));
+    setOptionalAttribute(root, "aria-disabled", disabled ? "true" : void 0);
+    setOptionalAttribute(root, "aria-busy", readProp(props, "loading", false) ? "true" : void 0);
+  });
+  listen(root, "click", props, "onClick", () => readProp(props, "disabled", false) || readProp(props, "loading", false));
+  if (hasProp(props, "icon")) mountSlot(root, props, "icon");
+  if (hasProp(props, "children")) mountSlot(root, props, "children");
+  return root;
+}
+__name(Button, "Button");
+
+// packages/ui/src/forms.ts
+function bindSignalProp(props) {
+  const value = readProp(props, "bind", void 0);
+  return value && typeof value === "object" && "value" in value ? value : void 0;
+}
+__name(bindSignalProp, "bindSignalProp");
+function Select(props = {}) {
+  const root = createElement("select");
+  bindClassList(root, props, () => ["vui-select"]);
+  bindCommonAttributes(root, props, [
+    "name",
+    "value",
+    "disabled",
+    "required",
+    "multiple",
+    "size",
+    "onChange"
+  ]);
+  effect(() => {
+    setOptionalAttribute(root, "name", readProp(props, "name", void 0));
+    setOptionalProperty(root, "disabled", readProp(props, "disabled", false));
+    setOptionalProperty(root, "required", readProp(props, "required", false));
+    setOptionalProperty(root, "multiple", readProp(props, "multiple", false));
+    setOptionalAttribute(root, "size", readProp(props, "size", void 0));
+  });
+  if (hasProp(props, "children")) mountSlot(root, props, "children");
+  const bind = bindSignalProp(props);
+  if (bind) {
+    bindPropertyValue(root, "value", () => String(bind.value ?? ""));
+    listen(root, "change", { onChange: /* @__PURE__ */ __name((event) => {
+      bind.value = event.target.value;
+    }, "onChange") }, "onChange", () => readProp(props, "disabled", false));
+  } else if (hasProp(props, "value")) {
+    bindPropertyValue(root, "value", () => readProp(props, "value", void 0) ?? "");
+  }
+  listen(root, "change", props, "onChange", () => readProp(props, "disabled", false));
+  return root;
+}
+__name(Select, "Select");
+
+// packages/ui/src/card.ts
+function Card(props = {}) {
+  const root = createElement("div");
+  bindClassList(root, props, () => ["vui-card"]);
+  bindCommonAttributes(root, props, ["title", "description"]);
+  bindUserStyle(root, props);
+  if (hasProp(props, "title")) {
+    const title = createElement("div");
+    const text = createText("");
+    setAttribute(title, "class", "vui-card__title");
+    bindTextContent(text, () => readProp(props, "title", ""));
+    insertBefore(title, text, null);
+    insertBefore(root, title, null);
+  }
+  if (hasProp(props, "description")) {
+    const description = createElement("p");
+    const text = createText("");
+    setAttribute(description, "class", "vui-card__desc");
+    bindTextContent(text, () => readProp(props, "description", ""));
+    insertBefore(description, text, null);
+    insertBefore(root, description, null);
+  }
+  if (hasProp(props, "children")) mountSlot(root, props, "children");
+  return root;
+}
+__name(Card, "Card");
+
+// packages/ui/src/tag.ts
+function Tag(props = {}) {
+  const root = createElement("span");
+  bindClassList(root, props, () => [
+    "vui-tag",
+    readProp(props, "tone", "default") === "default" ? void 0 : `vui-tag--${readProp(props, "tone", "default")}`
+  ]);
+  bindCommonAttributes(root, props, ["tone"]);
+  bindUserStyle(root, props);
+  if (hasProp(props, "children")) mountSlot(root, props, "children");
+  return root;
+}
+__name(Tag, "Tag");
+
+// packages/ui/src/alert.ts
+function Alert(props = {}) {
+  const root = createElement("div");
+  bindClassList(root, props, () => [
+    "vui-alert",
+    `vui-alert--${readProp(props, "tone", "info")}`
+  ]);
+  bindCommonAttributes(root, props, ["tone", "title", "description", "icon", "role"]);
+  bindUserStyle(root, props);
+  setAttribute(root, "role", "alert");
+  if (hasProp(props, "icon")) {
+    const icon = createElement("span");
+    setAttribute(icon, "class", "vui-alert__icon");
+    mountSlot(icon, props, "icon");
+    insertBefore(root, icon, null);
+  }
+  const content = createElement("div");
+  if (hasProp(props, "title")) {
+    const title = createElement("div");
+    const text = createText("");
+    setAttribute(title, "class", "vui-alert__title");
+    bindTextContent(text, () => readProp(props, "title", ""));
+    insertBefore(title, text, null);
+    insertBefore(content, title, null);
+  }
+  if (hasProp(props, "description")) {
+    const description = createElement("div");
+    const text = createText("");
+    setAttribute(description, "class", "vui-alert__desc");
+    bindTextContent(text, () => readProp(props, "description", ""));
+    insertBefore(description, text, null);
+    insertBefore(content, description, null);
+  }
+  if (hasProp(props, "children")) mountSlot(content, props, "children");
+  insertBefore(root, content, null);
+  return root;
+}
+__name(Alert, "Alert");
+
+// packages/ui/src/tabs.ts
+function Tabs(props) {
+  const root = createElement("div");
+  const tablist = createElement("div");
+  const panel = createElement("div");
+  const internalValue = state(void 0);
+  bindClassList(root, props, () => ["vui-tabs-root"]);
+  bindCommonAttributes(root, props, ["items", "value", "variant", "onChange"]);
+  setAttribute(tablist, "role", "tablist");
+  effect(() => {
+    const variant = readProp(props, "variant", "default");
+    setAttribute(tablist, "class", `vui-tabs${variant === "filled" ? " vui-tabs--filled" : ""}`);
+  });
+  setAttribute(panel, "class", "vui-tabs__panel");
+  insertDynamic(tablist, null, () => createTabButtons(props, internalValue));
+  insertDynamic(panel, null, () => {
+    const item = activeItem(readProp(props, "items", []), activeId(props, internalValue));
+    return item?.content === void 0 ? null : resolveSlot(item.content);
+  });
+  insertBefore(root, tablist, null);
+  insertBefore(root, panel, null);
+  if (hasProp(props, "children")) mountSlot(root, props, "children");
+  return root;
+}
+__name(Tabs, "Tabs");
+function createTabButtons(props, internalValue) {
+  const items = readProp(props, "items", []);
+  const selected = activeId(props, internalValue);
+  return createFragment((parent, anchor) => {
+    for (const item of items) {
+      const button = createElement("button");
+      const isActive = item.id === selected;
+      setAttribute(button, "class", `vui-tab${isActive ? " is-active" : ""}`);
+      setAttribute(button, "role", "tab");
+      setAttribute(button, "type", "button");
+      setAttribute(button, "aria-selected", isActive ? "true" : "false");
+      setAttribute(button, "data-tab-id", item.id);
+      if (item.disabled === true) {
+        setAttribute(button, "aria-disabled", "true");
+        setProperty(button, "disabled", true);
+      }
+      insertBefore(button, createText(item.label), null);
+      addEventListener(button, "click", () => {
+        if (item.disabled === true) return;
+        if (readProp(props, "value", void 0) === void 0) internalValue.value = item.id;
+        const onChange = readProp(props, "onChange", void 0);
+        if (typeof onChange === "function") onChange(item.id);
+      });
+      insertBefore(parent, button, anchor);
+    }
+  });
+}
+__name(createTabButtons, "createTabButtons");
+function activeId(props, internalValue) {
+  const controlled = readProp(props, "value", void 0);
+  if (controlled !== void 0) return controlled;
+  if (internalValue.value !== void 0) return internalValue.value;
+  return readProp(props, "items", []).find((item) => item.disabled !== true)?.id;
+}
+__name(activeId, "activeId");
+function activeItem(items, id) {
+  return items.find((item) => item.id === id);
+}
+__name(activeItem, "activeItem");
+
+// packages/icon-core/src/index.ts
+function createSvgIconNode(source, props = {}, options = {}) {
+  const root = createElement("span");
+  effect(() => {
+    updateSvgIconNode(root, typeof source === "function" ? source() : source, props, options);
+  });
+  return root;
+}
+__name(createSvgIconNode, "createSvgIconNode");
+function updateSvgIconNode(root, definition, props, options) {
+  const size = readProp2(props, "size", void 0);
+  const width = readProp2(props, "width", size);
+  const height = readProp2(props, "height", size);
+  const normalizedWidth = normalizeSvgLength(width);
+  const normalizedHeight = normalizeSvgLength(height);
+  const userClass = [
+    readProp2(props, "class", void 0),
+    readProp2(props, "className", void 0)
+  ].filter(hasText).join(" ");
+  const className = [options.class, options.className, userClass].filter(hasText).join(" ");
+  setAttribute(root, "class", className);
+  const internalStyle = size === void 0 ? "" : `width: ${normalizeCssLength(size)}; height: ${normalizeCssLength(size)}`;
+  const userStyle = readProp2(props, "style", void 0);
+  const style = [internalStyle, userStyle].filter(hasText).join("; ");
+  setOptionalAttribute2(root, "style", style || void 0);
+  const managedAttributes2 = /* @__PURE__ */ new Map();
+  for (const name of Object.keys(props)) {
+    if (name === "class" || name === "className" || name === "style" || name === "children") continue;
+    if (!name.startsWith("aria-") && !name.startsWith("data-") && !["id", "title", "role", "tabIndex"].includes(name)) continue;
+    const value = Reflect.get(props, name);
+    if (value === void 0 || value === null || value === false) continue;
+    managedAttributes2.set(name === "tabIndex" ? "tabindex" : name, String(value));
+  }
+  for (const [name, value] of managedAttributes2) setAttribute(root, name, value);
+  clearStaleAttributes(root, managedAttributes2);
+  const title = readProp2(props, "title", void 0);
+  const ariaLabel = Reflect.get(props, "aria-label");
+  const decorative = readProp2(props, "decorative", title === void 0 && ariaLabel === void 0);
+  setOptionalAttribute2(root, "aria-hidden", decorative ? "true" : void 0);
+  setOptionalAttribute2(root, "aria-label", ariaLabel === void 0 ? title : void 0);
+  setOptionalAttribute2(root, "data-icon-name", options.dataIconName ?? definition?.name);
+  setOptionalAttribute2(root, "color", readProp2(props, "color", void 0));
+  if (!definition) {
+    setProperty(root, "innerHTML", "");
+    return;
+  }
+  const svgAttributes = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: definition.viewBox ?? "0 0 24 24",
+    ...options.defaultSvgAttributes,
+    ...definition.attributes,
+    ...normalizedWidth === void 0 ? {} : { width: normalizedWidth },
+    ...normalizedHeight === void 0 ? {} : { height: normalizedHeight },
+    ...readProp2(props, "color", void 0) === void 0 ? {} : { color: readProp2(props, "color", void 0) },
+    ...readProp2(props, "stroke", void 0) === void 0 ? {} : { stroke: readProp2(props, "stroke", void 0) },
+    ...readProp2(props, "fill", void 0) === void 0 ? {} : { fill: readProp2(props, "fill", void 0) },
+    ...readProp2(props, "strokeWidth", void 0) === void 0 ? {} : { "stroke-width": readProp2(props, "strokeWidth", void 0) }
+  };
+  const markup = Object.entries(svgAttributes).filter(([, value]) => value !== void 0).map(([name, value]) => `${name}="${escapeXml(String(value))}"`).join(" ");
+  const titleMarkup = title === void 0 ? "" : `<title>${escapeXml(title)}</title>`;
+  setProperty(root, "innerHTML", `<svg ${markup} aria-hidden="true">${titleMarkup}${definition.body}</svg>`);
+}
+__name(updateSvgIconNode, "updateSvgIconNode");
+function readProp2(props, name, fallback) {
+  const value = Reflect.get(props, name);
+  return value === void 0 ? fallback : value;
+}
+__name(readProp2, "readProp");
+function hasText(value) {
+  return value !== void 0 && value.trim() !== "";
+}
+__name(hasText, "hasText");
+function normalizeSvgLength(value) {
+  if (value === void 0) return void 0;
+  return typeof value === "number" ? String(value) : value;
+}
+__name(normalizeSvgLength, "normalizeSvgLength");
+function normalizeCssLength(value) {
+  return typeof value === "number" || /^\d+(?:\.\d+)?$/u.test(value) ? `${value}px` : value;
+}
+__name(normalizeCssLength, "normalizeCssLength");
+function setOptionalAttribute2(node, name, value) {
+  if (value === void 0 || value === null || value === false || value === "") {
+    node.removeAttribute(name);
+    return;
+  }
+  setAttribute(node, name, String(value));
+}
+__name(setOptionalAttribute2, "setOptionalAttribute");
+function clearStaleAttributes(node, next) {
+  const previous = node.__vobsIconAttributes ?? /* @__PURE__ */ new Set();
+  for (const name of previous) {
+    if (!next.has(name)) node.removeAttribute(name);
+  }
+  node.__vobsIconAttributes = new Set(next.keys());
+}
+__name(clearStaleAttributes, "clearStaleAttributes");
+function escapeXml(value) {
+  return value.replace(/&/gu, "&amp;").replace(/</gu, "&lt;").replace(/>/gu, "&gt;").replace(/"/gu, "&quot;");
+}
+__name(escapeXml, "escapeXml");
+
+// packages/ui/src/icon.ts
+function Icon(props = {}) {
+  const root = createSvgIconNode(() => {
+    const definition = resolveIcon(
+      readProp(props, "icon", void 0) ?? readProp(props, "name", void 0)
+    );
+    if (!definition) {
+      if (hasProp(props, "children")) return void 0;
+      throw new Error("Vobs UI: Icon requires a registered `name` or an `icon` definition");
+    }
+    return iconDefinitionToSvg(definition);
+  }, props, {
+    class: "vui-icon icon",
+    defaultSvgAttributes: {
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": 2,
+      "stroke-linecap": "butt",
+      "stroke-linejoin": "miter"
+    }
+  });
+  if (hasProp(props, "children")) mountSlot(root, props, "children");
+  return root;
+}
+__name(Icon, "Icon");
+function iconDefinitionToSvg(definition) {
+  return {
+    name: definition.name,
+    body: definition.path,
+    viewBox: definition.viewBox
+  };
+}
+__name(iconDefinitionToSvg, "iconDefinitionToSvg");
+var VUI_ICON_PATHS = {
+  search: '<circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>',
+  check: '<polyline points="4 12 10 18 20 6"/>',
+  x: '<line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/>',
+  plus: '<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>',
+  minus: '<line x1="5" y1="12" x2="19" y2="12"/>',
+  "chevron-right": '<polyline points="9 6 15 12 9 18"/>',
+  "chevron-down": '<polyline points="6 9 12 15 18 9"/>',
+  "chevron-up": '<polyline points="6 15 12 9 18 15"/>',
+  "chevron-left": '<polyline points="15 6 9 12 15 18"/>',
+  "arrow-left": '<line x1="20" y1="12" x2="4" y2="12"/><polyline points="10 6 4 12 10 18"/>',
+  "arrow-right": '<line x1="4" y1="12" x2="20" y2="12"/><polyline points="14 6 20 12 14 18"/>',
+  "arrow-up": '<line x1="12" y1="20" x2="12" y2="4"/><polyline points="6 10 12 4 18 10"/>',
+  "arrow-down": '<line x1="12" y1="4" x2="12" y2="20"/><polyline points="6 14 12 20 18 14"/>',
+  atom: '<circle cx="12" cy="12" r="2"/><ellipse cx="12" cy="12" rx="10" ry="4"/><ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(60 12 12)"/><ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(120 12 12)"/>',
+  globe: '<circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/>',
+  "arrow-expand": '<polyline points="14 4 20 4 20 10"/><line x1="14" y1="10" x2="20" y2="4"/><polyline points="10 20 4 20 4 14"/><line x1="10" y1="14" x2="4" y2="20"/>',
+  "arrow-minimize": '<polyline points="20 4 14 10 20 10"/><line x1="14" y1="10" x2="14" y2="4"/><polyline points="4 20 10 14 4 14"/><line x1="10" y1="14" x2="10" y2="20"/>',
+  "check-circle": '<circle cx="12" cy="12" r="9"/><polyline points="8 12 11 15 16 9"/>',
+  "alert-circle": '<circle cx="12" cy="12" r="9"/><line x1="12" y1="8" x2="12" y2="13"/><line x1="12" y1="16" x2="12" y2="16.01"/>',
+  "alert-triangle": '<path d="M12 3 22 20 2 20 Z"/><line x1="12" y1="10" x2="12" y2="15"/><line x1="12" y1="18" x2="12" y2="18.01"/>',
+  info: '<circle cx="12" cy="12" r="9"/><line x1="12" y1="11" x2="12" y2="16"/><line x1="12" y1="8" x2="12" y2="8.01"/>',
+  home: '<polygon points="3 11 12 3 21 11 21 21 14 21 14 14 10 14 10 21 3 21 3 11"/>',
+  user: '<path d="M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1"/><circle cx="12" cy="8" r="4"/>',
+  settings: '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/>',
+  menu: '<line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/>',
+  "more-h": '<circle cx="5" cy="12" r="1.5" fill="currentColor"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/><circle cx="19" cy="12" r="1.5" fill="currentColor"/>',
+  calendar: '<rect x="3" y="5" width="18" height="16"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="8" y1="3" x2="8" y2="7"/><line x1="16" y1="3" x2="16" y2="7"/>',
+  filter: '<polygon points="3 4 21 4 14 12 14 20 10 18 10 12 3 4"/>',
+  sort: '<path d="M8 20V4"/><polyline points="4 8 8 4 12 8"/><path d="M16 4v16"/><polyline points="12 16 16 20 20 16"/>',
+  edit: '<path d="M4 20h4l10-10-4-4L4 16v4z"/><path d="M14 6l4 4"/>',
+  trash: '<polyline points="4 6 20 6"/><path d="M6 6v14h12V6"/><path d="M9 6V4h6v2"/><line x1="10" y1="10" x2="10" y2="17"/><line x1="14" y1="10" x2="14" y2="17"/>',
+  download: '<path d="M12 3v12"/><polyline points="7 10 12 15 17 10"/><line x1="3" y1="21" x2="21" y2="21"/>',
+  upload: '<path d="M12 21V6"/><polyline points="7 11 12 6 17 11"/><line x1="3" y1="21" x2="21" y2="21"/>',
+  pause: '<line x1="9" y1="5" x2="9" y2="19"/><line x1="15" y1="5" x2="15" y2="19"/>',
+  play: '<polygon points="8 5 19 12 8 19 8 5"/>',
+  refresh: '<polyline points="21 4 21 10 15 10"/><polyline points="3 20 3 14 9 14"/><path d="M20.5 9A9 9 0 0 0 5 5.5L3 7M3.5 15A9 9 0 0 0 19 18.5L21 17"/>',
+  bell: '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 8 3 8H3s3-1 3-8z"/><path d="M10 21a2 2 0 0 0 4 0"/>',
+  folder: '<path d="M3 6h6l2 3h10v10H3z"/>',
+  code: '<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>',
+  sparkles: '<path d="M12 3l1.8 4.2L18 9l-4.2 1.8L12 15l-1.8-4.2L6 9l4.2-1.8L12 3z"/><path d="M19 14l1 2.2 2.2 1-2.2 1L19 20.4l-1-2.2-2.2-1 2.2-1L19 14z"/>',
+  zap: '<polygon points="13 2 4 14 12 14 11 22 20 10 12 10 13 2"/>',
+  sun: '<circle cx="12" cy="12" r="4"/><line x1="12" y1="2" x2="12" y2="5"/><line x1="12" y1="19" x2="12" y2="22"/><line x1="2" y1="12" x2="5" y2="12"/><line x1="19" y1="12" x2="22" y2="12"/><line x1="4.6" y1="4.6" x2="6.7" y2="6.7"/><line x1="17.3" y1="17.3" x2="19.4" y2="19.4"/><line x1="4.6" y1="19.4" x2="6.7" y2="17.3"/><line x1="17.3" y1="6.7" x2="19.4" y2="4.6"/>',
+  moon: '<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/>',
+  terminal: '<polyline points="4 7 9 12 4 17"/><line x1="12" y1="17" x2="20" y2="17"/>'
+};
+var iconRegistry = new Map(
+  Object.entries(VUI_ICON_PATHS).map(([name, path]) => [name, { name, path }])
+);
+function resolveIcon(icon) {
+  return typeof icon === "string" ? iconRegistry.get(icon) : icon;
+}
+__name(resolveIcon, "resolveIcon");
+
+// packages/devtools-ui/src/panel.tsx
+var EMPTY_SNAPSHOT = {
+  api: null,
+  tree: [],
+  signals: [],
+  effects: [],
+  updates: [],
+  lifecycle: [],
+  network: [],
+  errors: [],
+  metrics: null,
+  performanceEntries: [],
+  memory: null,
+  router: null,
+  routerContext: null
+};
+var PANEL_REFRESH_EVENTS = ["signal-update", "update", "lifecycle", "network-request", "router", "error", "collection", "collection-cleared"];
+function readDevToolsSnapshot(api = getDevTools()) {
+  return readDevToolsSnapshotWithRouter(api, null);
+}
+__name(readDevToolsSnapshot, "readDevToolsSnapshot");
+function readDevToolsSnapshotWithRouter(api, router) {
+  if (!api) return { ...EMPTY_SNAPSHOT, router: router?.devtools ?? null };
+  return {
+    api,
+    tree: api.getComponentTree(),
+    signals: api.getSignals(),
+    effects: api.getEffects(),
+    updates: api.getUpdates(),
+    lifecycle: api.getLifecycleEvents(),
+    network: api.getNetworkRequests(),
+    errors: api.getErrors(),
+    metrics: api.getPerformanceMetrics(),
+    performanceEntries: api.getPerformanceEntries(),
+    memory: api.takeMemorySnapshot(),
+    router: router?.devtools ?? null,
+    routerContext: api.getRouterContext()
+  };
+}
+__name(readDevToolsSnapshotWithRouter, "readDevToolsSnapshotWithRouter");
+function DevToolsPanel(props = {}) {
+  const refreshCount = state(0);
+  const activeSection = state("updates");
+  const activeAdvancedSection = state("signals");
+  const activeRouterTab = state("context");
+  const activeUpdatesTab = state("updates");
+  const activeComponentsTab = state("tree");
+  const activeRouteView = state("tree");
+  const activeTimelineFilter = state("all");
+  const networkSelection = state(null);
+  const networkSourceFilter = state("all");
+  const networkStatusFilter = state("all");
+  const networkDetailTab = state("overview");
+  const networkTesterOpen = state(false);
+  const networkTesterRevision = state(0);
+  const networkTesterRun = state({ status: "idle" });
+  const networkTesterTab = state("params");
+  let networkTesterDraft = createRequestTesterDraft();
+  const selection = state(null);
+  const query = props.query ?? state("");
+  const http = props.http ?? inject(HTTP_KEY) ?? null;
+  let refreshInvalidating = false;
+  const notifyRefresh = /* @__PURE__ */ __name(() => {
+    if (refreshInvalidating) return;
+    refreshInvalidating = true;
+    refreshCount.value++;
+    queueMicrotask(() => {
+      refreshInvalidating = false;
+    });
+  }, "notifyRefresh");
+  queueMicrotask(notifyRefresh);
+  const api = resolveApi(props);
+  if (api) {
+    const stops = PANEL_REFRESH_EVENTS.map((event) => api.subscribe(event, notifyRefresh));
+    onDispose(() => {
+      for (const stop of stops) stop();
+    });
+  }
+  const router = props.router ?? null;
+  if (router) {
+    const detachRouter = api?.attachRouter(router);
+    const stopNavigationStart = router.devtools.subscribe("navigation:start", notifyRefresh);
+    const stopNavigation = router.devtools.subscribe("navigation:end", notifyRefresh);
+    const stopRouteUpdate = router.devtools.subscribe("route:update", notifyRefresh);
+    const stopRouteError = router.devtools.subscribe("error", notifyRefresh);
+    onDispose(() => {
+      stopNavigationStart();
+      stopNavigation();
+      stopRouteUpdate();
+      stopRouteError();
+      detachRouter?.();
+    });
+  }
+  const toolbarPlacement = props.toolbarPlacement ?? "content";
+  return /* @__PURE__ */ React.createElement("div", { class: "vobs-devtools-shell" }, /* @__PURE__ */ React.createElement("aside", { class: "vobs-devtools-shell__rail", "aria-label": "DevTools sections" }, /* @__PURE__ */ React.createElement("div", { class: "vobs-devtools-shell__mark" }, /* @__PURE__ */ React.createElement(Icon, { name: "code" })), /* @__PURE__ */ React.createElement(SectionNav, { activeSection })), /* @__PURE__ */ React.createElement("section", { class: "vobs-devtools-shell__main" }, /* @__PURE__ */ React.createElement("div", { class: "vobs-devtools-shell__content" }, toolbarPlacement === "content" ? /* @__PURE__ */ React.createElement(DevToolsToolbar, { api, query }) : null, /* @__PURE__ */ React.createElement(DevToolsContent, { refreshCount, activeSection, activeAdvancedSection, activeRouterTab, activeUpdatesTab, activeComponentsTab, activeRouteView, router, api, http, selection, query, networkSelection, networkSourceFilter, networkStatusFilter, networkDetailTab, networkTesterOpen, networkTesterRevision, networkTesterRun, networkTesterDraft, networkTesterTab }))), /* @__PURE__ */ React.createElement(ActivityRail, { refreshCount, router, api, selection, activeSection, activeFilter: activeTimelineFilter }));
+}
+__name(DevToolsPanel, "DevToolsPanel");
+function DevToolsToolbar(props) {
+  const refreshCount = state(0);
+  if (props.api) {
+    const stops = ["collection", "collection-cleared"].map((event) => props.api.subscribe(event, () => {
+      refreshCount.value++;
+    }));
+    onDispose(() => {
+      for (const stop of stops) stop();
+    });
+  }
+  return createFragment((parent, anchor) => {
+    const toolbar = createElement("div");
+    setAttribute(toolbar, "class", "vobs-devtools-collection-toolbar vobs-devtools-collection-toolbar--header");
+    const search = createElement("input");
+    setAttribute(search, "class", "vobs-devtools-search vobs-devtools-header-search");
+    setAttribute(search, "type", "search");
+    setAttribute(search, "placeholder", "Search diagnostics");
+    effect(() => {
+      const next = props.query.value;
+      if (search.value !== next) setProperty(search, "value", next);
+    });
+    search.addEventListener("input", () => {
+      props.query.value = search.value;
+    });
+    insertBefore(toolbar, search, null);
+    const actions = createElement("div");
+    setAttribute(actions, "class", "vobs-devtools-collection-toolbar__actions");
+    insertBefore(toolbar, actions, null);
+    insertBefore(parent, toolbar, anchor);
+    insertDynamic(actions, null, () => {
+      void refreshCount.value;
+      if (!props.api) return null;
+      const paused = props.api.getCollectionState().paused;
+      return createFragment((actionParent, actionAnchor) => {
+        insertBefore(actionParent, createComponent(Button, {
+          variant: paused ? "warning" : "secondary",
+          iconOnly: true,
+          icon: createComponent(Icon, { name: paused ? "play" : "pause" }),
+          "aria-label": paused ? "Resume collection" : "Pause collection",
+          title: paused ? "Resume collection" : "Pause collection",
+          onClick: /* @__PURE__ */ __name(() => props.api?.setCollectionPaused(!paused), "onClick")
+        }), actionAnchor);
+        insertBefore(actionParent, createComponent(Button, {
+          variant: "danger-subtle",
+          iconOnly: true,
+          icon: createComponent(Icon, { name: "trash" }),
+          "aria-label": "Clear diagnostics",
+          title: "Clear diagnostics",
+          onClick: /* @__PURE__ */ __name(() => {
+            props.api?.clearUpdates();
+            props.api?.clearNetworkRequests();
+            props.api?.clearErrors();
+            props.api?.clearLifecycleEvents();
+          }, "onClick")
+        }), actionAnchor);
+        const exportDiagnostics = /* @__PURE__ */ __name(() => {
+          const data = JSON.stringify(props.api?.exportDiagnostics(), null, 2);
+          if (typeof document === "undefined" || typeof URL === "undefined" || typeof URL.createObjectURL !== "function" || typeof URL.revokeObjectURL !== "function" || typeof Blob === "undefined") return;
+          const link = document.createElement("a");
+          link.href = URL.createObjectURL(new Blob([data], { type: "application/json" }));
+          link.download = `vobs-devtools-${(/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-")}.json`;
+          link.click();
+          URL.revokeObjectURL(link.href);
+        }, "exportDiagnostics");
+        insertBefore(actionParent, createComponent(Button, {
+          variant: "ghost",
+          iconOnly: true,
+          icon: createComponent(Icon, { name: "download" }),
+          "aria-label": "Export diagnostics",
+          title: "Export diagnostics",
+          onClick: exportDiagnostics
+        }), actionAnchor);
+        const importInput = createElement("input");
+        setAttribute(importInput, "type", "file");
+        setAttribute(importInput, "accept", "application/json,.json");
+        setAttribute(importInput, "aria-label", "Import diagnostics");
+        setAttribute(importInput, "hidden", "");
+        importInput.addEventListener("change", () => {
+          const file = importInput.files?.[0];
+          if (!file) return;
+          void file.text().then((text) => props.api?.importDiagnostics(JSON.parse(text))).catch((error) => props.api?.reportError("global", error));
+        });
+        insertBefore(actionParent, importInput, actionAnchor);
+        insertBefore(actionParent, createComponent(Button, {
+          variant: "ghost",
+          iconOnly: true,
+          icon: createComponent(Icon, { name: "upload" }),
+          "aria-label": "Import diagnostics",
+          title: "Import diagnostics",
+          onClick: /* @__PURE__ */ __name(() => importInput.click(), "onClick")
+        }), actionAnchor);
+        if (props.onToggleMaximize) insertBefore(actionParent, createComponent(Button, {
+          variant: "ghost",
+          iconOnly: true,
+          icon: createComponent(Icon, { name: props.maximized ? "arrow-minimize" : "arrow-expand" }),
+          "aria-label": props.maximized ? "Restore DevTools" : "Maximize DevTools",
+          title: props.maximized ? "Restore DevTools" : "Maximize DevTools",
+          onClick: props.onToggleMaximize
+        }), actionAnchor);
+      });
+    });
+  });
+}
+__name(DevToolsToolbar, "DevToolsToolbar");
+function createRequestTesterDraft(url = "") {
+  return { url, method: "GET", params: [{ key: "", value: "" }], headers: [{ key: "", value: "" }], body: "" };
+}
+__name(createRequestTesterDraft, "createRequestTesterDraft");
+var TIMELINE_FILTER_OPTIONS = [
+  { value: "all", label: "All events" },
+  { value: "update", label: "Updates" },
+  { value: "request", label: "Requests" },
+  { value: "navigation", label: "Navigation" },
+  { value: "error", label: "Errors" }
+];
+function resolveApi(props) {
+  return props.api === void 0 ? getDevTools() : props.api;
+}
+__name(resolveApi, "resolveApi");
+function DevToolsContent(props) {
+  return createFragment((parent, anchor) => {
+    insertDynamic(parent, anchor, () => {
+      void props.refreshCount.value;
+      void props.activeSection.value;
+      void props.activeRouterTab.value;
+      void props.activeUpdatesTab.value;
+      void props.activeComponentsTab.value;
+      void props.activeRouteView.value;
+      void props.query.value;
+      void props.networkSelection.value;
+      void props.networkSourceFilter.value;
+      void props.networkStatusFilter.value;
+      void props.networkDetailTab.value;
+      void props.networkTesterOpen.value;
+      void props.networkTesterRevision.value;
+      void props.networkTesterRun.value;
+      void props.networkTesterTab.value;
+      const selected = props.selection.value;
+      const snapshot = readDevToolsSnapshotWithRouter(props.api, props.router);
+      return renderDevToolsContent(snapshot, props.activeSection.value, props.router, props.activeRouterTab, props.activeUpdatesTab, props.activeComponentsTab, selected, focusSelection(props.activeSection, props.selection), props.query.value, props.activeAdvancedSection, props.activeRouteView, props.networkSelection, props.networkSourceFilter, props.networkStatusFilter, props.networkDetailTab, props.query, props.http, props.networkTesterOpen, props.networkTesterRevision, props.networkTesterRun, props.networkTesterDraft, props.networkTesterTab);
+    });
+  });
+}
+__name(DevToolsContent, "DevToolsContent");
+function ActivityRail(props) {
+  return createFragment((parent, anchor) => {
+    insertDynamic(parent, anchor, () => {
+      void props.refreshCount.value;
+      const filter = props.activeFilter.value;
+      const selected = props.selection.value;
+      const snapshot = readDevToolsSnapshotWithRouter(props.api, props.router);
+      const updates = [...snapshot.updates].reverse().slice(0, 8);
+      const timeline = collectActivityTimeline(snapshot, props.router, filter);
+      return renderActivityRail(updates, timeline, snapshot.api, selected, filter, (next) => {
+        props.activeFilter.value = next;
+      }, focusSelection(props.activeSection, props.selection));
+    });
+  });
+}
+__name(ActivityRail, "ActivityRail");
+function focusSelection(activeSection, selection) {
+  return (section, next) => {
+    selection.value = next;
+    activeSection.value = section;
+  };
+}
+__name(focusSelection, "focusSelection");
+function SectionNav(props) {
+  return createFragment((parent, anchor) => {
+    insertDynamic(parent, anchor, () => {
+      const selected = props.activeSection.value;
+      return createFragment((navParent, navAnchor) => {
+        for (const section of ["updates", "components", "advanced", "network", "errors", "router"]) {
+          const label = section === "components" ? "comp..." : section === "advanced" ? "adv..." : section;
+          const button = createElement("button");
+          setAttribute(button, "class", `vobs-devtools-shell__nav-item${selected === section ? " is-active" : ""}`);
+          setAttribute(button, "type", "button");
+          const accessibleLabel = section === "advanced" ? "Advanced" : section;
+          setAttribute(button, "aria-label", accessibleLabel);
+          setAttribute(button, "title", accessibleLabel);
+          setAttribute(button, "aria-pressed", selected === section ? "true" : "false");
+          insertBefore(button, createComponent(Icon, { name: section === "router" ? "folder" : section === "components" ? "code" : section === "advanced" ? "atom" : section === "network" ? "globe" : section === "errors" ? "alert-triangle" : "refresh" }), null);
+          insertBefore(button, createElementText(label), null);
+          button.addEventListener("click", () => {
+            props.activeSection.value = section;
+          });
+          insertBefore(navParent, button, navAnchor);
+        }
+      });
+    });
+  });
+}
+__name(SectionNav, "SectionNav");
+function collectActivityTimeline(snapshot, router, filter = "all") {
+  const items = snapshot.updates.map((update) => ({
+    kind: "update",
+    timestamp: update.timestamp,
+    title: snapshot.api?.getSignal(update.signalId) ? displaySignalName(snapshot.api.getSignal(update.signalId)) : displayDebugName(update.signalName),
+    detail: `${formatDebugSource(snapshot.api?.getSignal(update.signalId)?.component ?? "unknown")} \xB7 ${update.duration.toFixed(2)} ms \xB7 ${update.effects.length} effects`,
+    icon: "zap",
+    update
+  }));
+  for (const request of snapshot.network) {
+    items.push({
+      kind: "request",
+      timestamp: request.startedAt,
+      title: `${request.method} ${request.url}`,
+      detail: `${request.source ?? "http"} \xB7 ${request.status}${request.duration === void 0 ? "" : ` \xB7 ${request.duration} ms`}`,
+      icon: "download"
+    });
+  }
+  for (const request of snapshot.routerContext?.dataRequests ?? []) {
+    items.push({
+      kind: "request",
+      timestamp: request.startedAt ?? Date.now(),
+      title: `${request.kind} \xB7 ${request.key}`,
+      detail: `${request.status}${request.route ? ` \xB7 ${request.route}` : ""}`,
+      icon: "folder"
+    });
+  }
+  for (const trace of router?.devtools.getNavigationHistory() ?? []) {
+    items.push({
+      kind: "navigation",
+      timestamp: trace.endedAt,
+      title: `Navigation ${trace.to}`,
+      detail: `${trace.status} \xB7 ${trace.duration.toFixed(2)} ms`,
+      icon: "arrow-right"
+    });
+  }
+  for (const error of snapshot.errors) {
+    items.push({
+      kind: "error",
+      timestamp: error.lastOccurredAt,
+      title: `${error.phase} \xB7 ${error.message}`,
+      detail: error.route ?? error.component,
+      icon: "alert-triangle"
+    });
+  }
+  return items.filter((item) => filter === "all" || item.kind === filter).sort((left, right) => right.timestamp - left.timestamp).slice(0, 12);
+}
+__name(collectActivityTimeline, "collectActivityTimeline");
+function renderActivityRail(updates, timeline, api, selection, filter, onFilterChange, onFocus) {
+  const root = createElement("aside");
+  setAttribute(root, "class", "vobs-devtools-shell__activity");
+  const header = createElement("div");
+  setAttribute(header, "class", "vobs-devtools-shell__activity-header");
+  const title = createElement("div");
+  setAttribute(title, "class", "vobs-devtools-shell__activity-title");
+  insertBefore(title, createElementText("Timeline"), null);
+  insertBefore(header, title, null);
+  insertBefore(header, createComponent(Select, {
+    class: "vobs-devtools-timeline-filter",
+    value: filter,
+    "aria-label": "Filter timeline events",
+    onChange: /* @__PURE__ */ __name((event) => {
+      const next = event.target.value;
+      if (isTimelineFilter(next)) onFilterChange(next);
+    }, "onChange"),
+    children: /* @__PURE__ */ __name(() => createFragment((parent, anchor) => {
+      for (const option of TIMELINE_FILTER_OPTIONS) {
+        const optionNode = createElement("option");
+        setAttribute(optionNode, "value", option.value);
+        insertBefore(optionNode, createText(option.label), null);
+        insertBefore(parent, optionNode, anchor);
+      }
+    }), "children")
+  }), null);
+  insertBefore(root, header, null);
+  const subtitle = createElement("div");
+  setAttribute(subtitle, "class", "vobs-devtools-shell__activity-subtitle");
+  insertBefore(subtitle, createElementText(`${timeline.length} shown \xB7 ${updates.length} updates`), null);
+  insertBefore(root, subtitle, null);
+  const list = createElement("div");
+  setAttribute(list, "class", "vobs-devtools-activity-list");
+  for (const entry of timeline) {
+    const update = entry.update;
+    const activityItem = createElement("div");
+    setAttribute(activityItem, "class", `vobs-devtools-activity-item${update && selection?.type === "update" && selection.id === update.id ? " is-selected" : ""}`);
+    if (update) activityItem.addEventListener("click", () => onFocus("updates", { type: "update", id: update.id }));
+    const dot = createElement("span");
+    setAttribute(dot, "class", "vobs-devtools-activity-item__dot");
+    insertBefore(dot, createComponent(Icon, { name: entry.icon }), null);
+    const body = createElement("div");
+    setAttribute(body, "class", "vobs-devtools-activity-item__body");
+    const name = createElement("span");
+    setAttribute(name, "class", "vobs-devtools-activity-item__name");
+    const signal = update ? api?.getSignal(update.signalId) : void 0;
+    insertBefore(name, createElementText(entry.title), null);
+    const detail = createElement("span");
+    insertBefore(detail, createElementText(entry.detail ?? (update ? `${formatDebugSource(signal?.component ?? "unknown")} \xB7 ${update.duration.toFixed(2)} ms \xB7 ${update.effects.length} effects` : "")), null);
+    insertBefore(body, name, null);
+    insertBefore(body, detail, null);
+    insertBefore(activityItem, dot, null);
+    insertBefore(activityItem, body, null);
+    insertBefore(list, activityItem, null);
+  }
+  if (timeline.length === 0) {
+    const empty = createElement("span");
+    setAttribute(empty, "class", "vobs-devtools-muted");
+    insertBefore(empty, createElementText(filter === "all" ? "No recent events." : `No ${timelineFilterLabel(filter).toLowerCase()} events.`), null);
+    insertBefore(list, empty, null);
+  }
+  insertBefore(root, list, null);
+  return root;
+}
+__name(renderActivityRail, "renderActivityRail");
+function isTimelineFilter(value) {
+  return TIMELINE_FILTER_OPTIONS.some((option) => option.value === value);
+}
+__name(isTimelineFilter, "isTimelineFilter");
+function timelineFilterLabel(filter) {
+  return TIMELINE_FILTER_OPTIONS.find((option) => option.value === filter)?.label ?? "All events";
+}
+__name(timelineFilterLabel, "timelineFilterLabel");
+function createElementText(value) {
+  return createText(value);
+}
+__name(createElementText, "createElementText");
+function renderDevToolsContent(snapshot, section = "updates", router = null, activeRouterTab, activeUpdatesTab, activeComponentsTab, selection = null, onFocus = () => void 0, query = "", activeAdvancedSection, activeRouteView, networkSelection, networkSourceFilter, networkStatusFilter, networkDetailTab, queryState, http, networkTesterOpen, networkTesterRevision, networkTesterRun, networkTesterDraft, networkTesterTab) {
+  if (!snapshot.api) {
+    return createComponent(Alert, {
+      description: "Enable the devtools plugin to inspect the runtime."
+    });
+  }
+  return renderFocusedSection(snapshot, section, router, activeRouterTab, activeUpdatesTab, activeComponentsTab, selection, onFocus, query, activeAdvancedSection, activeRouteView, networkSelection, networkSourceFilter, networkStatusFilter, networkDetailTab, queryState, http, networkTesterOpen, networkTesterRevision, networkTesterRun, networkTesterDraft, networkTesterTab);
+}
+__name(renderDevToolsContent, "renderDevToolsContent");
+function renderFocusedSection(snapshot, section, router, activeRouterTab, activeUpdatesTab, activeComponentsTab, selection = null, onFocus = () => void 0, query = "", activeAdvancedSection, activeRouteView, networkSelection, networkSourceFilter, networkStatusFilter, networkDetailTab, queryState, http, networkTesterOpen, networkTesterRevision, networkTesterRun, networkTesterDraft, networkTesterTab) {
+  if (section === "router") return renderRouterSection(router, activeRouterTab, activeRouteView);
+  if (section === "updates") return renderUpdatesSection(snapshot, activeUpdatesTab, query, selection, onFocus);
+  if (section === "components") return renderComponentsSection(snapshot, activeComponentsTab, query, selection, onFocus);
+  if (section === "network") return createComponent(Card, {
+    children: /* @__PURE__ */ __name(() => renderUnifiedNetworkRequests(snapshot.network, snapshot.routerContext?.dataRequests ?? [], query, selection, onFocus, networkSelection, networkSourceFilter, networkStatusFilter, networkDetailTab, snapshot.api, queryState, http, networkTesterOpen, networkTesterRevision, networkTesterRun, networkTesterDraft, snapshot.routerContext?.route, networkTesterTab), "children")
+  });
+  if (section === "errors") return createComponent(Card, {
+    description: `${snapshot.errors.length} retained unique errors`,
+    children: /* @__PURE__ */ __name(() => renderErrors(filterErrors(snapshot.errors, query), selection, onFocus), "children")
+  });
+  if (section === "advanced") return renderAdvancedSection(snapshot, activeAdvancedSection, query);
+  const list = createElement("div");
+  setAttribute(list, "class", "vobs-devtools-list");
+  let title = "Recent updates";
+  let description = `${snapshot.updates.length} retained traces`;
+  return createComponent(Card, { title, description, children: /* @__PURE__ */ __name(() => list, "children") });
+}
+__name(renderFocusedSection, "renderFocusedSection");
+function renderComponentsSection(snapshot, activeTab, query = "", selection = null, onFocus = () => void 0) {
+  const tabs = createComponent(Tabs, {
+    class: "vobs-devtools-router-tabs",
+    variant: "filled",
+    items: [
+      { id: "tree", label: "Component tree", content: /* @__PURE__ */ __name(() => renderComponentTree(snapshot, query, selection, onFocus), "content") },
+      { id: "lifecycle", label: "Lifecycle timeline", content: /* @__PURE__ */ __name(() => createComponent(Card, {
+        class: "vobs-devtools-lifecycle-card",
+        description: `${snapshot.lifecycle.length} retained runtime events`,
+        children: /* @__PURE__ */ __name(() => renderLifecycleTimeline(snapshot.lifecycle, (section, next) => {
+          onFocus(section, next);
+          if (section === "components" && activeTab) activeTab.value = "tree";
+        }), "children")
+      }), "content") }
+    ],
+    get value() {
+      return activeTab?.value ?? "tree";
+    },
+    onChange: /* @__PURE__ */ __name((id) => {
+      if (activeTab && isComponentsPanelTab(id)) activeTab.value = id;
+    }, "onChange")
+  });
+  const root = createElement("div");
+  setAttribute(root, "class", "vobs-devtools-components-tabs-wrap");
+  insertBefore(root, tabs, null);
+  return root;
+}
+__name(renderComponentsSection, "renderComponentsSection");
+function renderComponentTree(snapshot, query, selection, onFocus) {
+  const componentTree = filterComponentTree(snapshot.tree, query);
+  const list = createElement("div");
+  setAttribute(list, "class", "vobs-devtools-list");
+  for (const node of componentTree) insertBefore(list, renderComponentSummary(node, snapshot, selection, onFocus), null);
+  if (componentTree.length === 0) appendMuted(list, query ? "No components match the search." : "No components recorded.");
+  return createComponent(Card, {
+    class: "vobs-devtools-component-tree-card",
+    description: `Component tree ${snapshot.memory?.ownerCount ?? 0} active owners`,
+    children: /* @__PURE__ */ __name(() => list, "children")
+  });
+}
+__name(renderComponentTree, "renderComponentTree");
+function isComponentsPanelTab(value) {
+  return value === "tree" || value === "lifecycle";
+}
+__name(isComponentsPanelTab, "isComponentsPanelTab");
+function renderUpdatesSection(snapshot, activeTab, query = "", selection = null, onFocus = () => void 0) {
+  const tabs = createComponent(Tabs, {
+    class: "vobs-devtools-router-tabs",
+    variant: "filled",
+    items: [
+      { id: "performance", label: "Performance", content: /* @__PURE__ */ __name(() => renderPerformanceMetrics(snapshot.metrics), "content") },
+      { id: "slow", label: "Slow items", content: /* @__PURE__ */ __name(() => renderSlowItems(snapshot.performanceEntries), "content") },
+      { id: "updates", label: `Updates${snapshot.updates.length ? ` (${snapshot.updates.length})` : ""}`, content: /* @__PURE__ */ __name(() => renderUpdatesList(snapshot, query, selection, onFocus), "content") }
+    ],
+    get value() {
+      return activeTab?.value ?? "updates";
+    },
+    onChange: /* @__PURE__ */ __name((id) => {
+      if (activeTab && isUpdatesPanelTab(id)) activeTab.value = id;
+    }, "onChange")
+  });
+  const root = createElement("div");
+  setAttribute(root, "class", "vobs-devtools-updates-tabs-wrap");
+  insertBefore(root, tabs, null);
+  return root;
+}
+__name(renderUpdatesSection, "renderUpdatesSection");
+function isUpdatesPanelTab(value) {
+  return value === "performance" || value === "slow" || value === "updates";
+}
+__name(isUpdatesPanelTab, "isUpdatesPanelTab");
+function renderUpdatesList(snapshot, query, selection, onFocus) {
+  const list = createElement("div");
+  setAttribute(list, "class", "vobs-devtools-list");
+  for (const update of [...snapshot.updates].reverse().filter((update2) => matchesQuery(query, update2.signalName, update2.signalId, update2.status, formatValue(update2.previousValue), formatValue(update2.nextValue))).slice(0, 50)) {
+    insertBefore(list, renderUpdateRow(update, snapshot.api, selection, onFocus), null);
+  }
+  if (snapshot.updates.length === 0) appendMuted(list, "Interact with the playground to record updates.");
+  return createComponent(Card, {
+    class: "vobs-devtools-updates-card",
+    children: /* @__PURE__ */ __name(() => list, "children")
+  });
+}
+__name(renderUpdatesList, "renderUpdatesList");
+function renderAdvancedSection(snapshot, activeSection, query = "") {
+  const tabs = createComponent(Tabs, {
+    class: "vobs-devtools-advanced-tabs",
+    variant: "filled",
+    items: [
+      { id: "signals", label: "Signals", content: /* @__PURE__ */ __name(() => renderSignalsInspector(snapshot, query), "content") },
+      { id: "effects", label: "Effects", content: /* @__PURE__ */ __name(() => renderEffectsInspector(snapshot, query), "content") }
+    ],
+    get value() {
+      return activeSection?.value ?? "signals";
+    },
+    onChange: /* @__PURE__ */ __name((id) => {
+      if (activeSection) activeSection.value = id;
+    }, "onChange")
+  });
+  const root = createElement("div");
+  setAttribute(root, "class", "vobs-devtools-advanced");
+  insertBefore(root, tabs, null);
+  return root;
+}
+__name(renderAdvancedSection, "renderAdvancedSection");
+function renderSignalsInspector(snapshot, query) {
+  const list = createElement("div");
+  setAttribute(list, "class", "vobs-devtools-list");
+  const signals = snapshot.signals.filter((signal) => matchesQuery(query, signal.name, signal.component, formatValue(signal.value))).slice(0, 50);
+  for (const signal of signals) insertBefore(list, renderSignalInspector(signal, snapshot.api), null);
+  if (signals.length === 0) appendMuted(list, query ? "No signals match the search." : "No signals recorded.");
+  return list;
+}
+__name(renderSignalsInspector, "renderSignalsInspector");
+function renderEffectsInspector(snapshot, query) {
+  const list = createElement("div");
+  setAttribute(list, "class", "vobs-devtools-list");
+  const effects = snapshot.effects.filter((effect2) => matchesQuery(query, effect2.name, effect2.component, effect2.id)).slice(0, 50);
+  for (const effect2 of effects) insertBefore(list, renderEffectRow(effect2), null);
+  if (effects.length === 0) appendMuted(list, query ? "No effects match the search." : "No effects recorded.");
+  return list;
+}
+__name(renderEffectsInspector, "renderEffectsInspector");
+function renderPerformanceMetrics(metrics) {
+  if (!metrics) {
+    return createComponent(Card, { description: "Performance: Lightweight slow-path summary for the retained diagnostics.", children: /* @__PURE__ */ __name(() => {
+      const root = createElement("div");
+      appendMuted(root, "No performance data available.");
+      return root;
+    }, "children") });
+  }
+  const metricsGrid = createElement("div");
+  setAttribute(metricsGrid, "class", "vobs-devtools-performance-metrics");
+  appendMetric(metricsGrid, "Slow updates", metrics.slowUpdateCount);
+  appendMetric(metricsGrid, "Slow effects", metrics.slowEffectCount);
+  appendMetric(metricsGrid, "Slow requests", metrics.slowRequestCount);
+  appendMetric(metricsGrid, "Max update", `${metrics.maxUpdateDuration.toFixed(2)} ms`);
+  appendMetric(metricsGrid, "Max effect", `${metrics.maxEffectDuration.toFixed(2)} ms`);
+  appendMetric(metricsGrid, "Max request", `${metrics.maxRequestDuration.toFixed(2)} ms`);
+  return createComponent(Card, {
+    class: "vobs-devtools-performance-card",
+    description: "Lightweight slow-path summary for the retained diagnostics.",
+    children: /* @__PURE__ */ __name(() => metricsGrid, "children")
+  });
+}
+__name(renderPerformanceMetrics, "renderPerformanceMetrics");
+function renderSlowItems(entries) {
+  const slowEntries = entries.filter((entry) => entry.duration >= 16).slice(0, 8);
+  const slowList = createElement("div");
+  setAttribute(slowList, "class", "vobs-devtools-performance-slow-list");
+  for (const entry of slowEntries) {
+    const item = createElement("div");
+    setAttribute(item, "class", "vobs-devtools-performance-slow-item");
+    appendText(item, entry.kind, "vobs-devtools-muted");
+    appendText(item, formatPerformanceLabel(entry), "vobs-devtools-list__name");
+    appendText(item, `${entry.duration.toFixed(2)} ms`, "vobs-devtools-code");
+    insertBefore(slowList, item, null);
+  }
+  if (slowEntries.length === 0) appendMuted(slowList, "No slow items recorded.");
+  return createComponent(Card, {
+    class: "vobs-devtools-performance-slow-card",
+    description: slowEntries.length ? `${slowEntries.length} retained item${slowEntries.length === 1 ? "" : "s"} at or above 16 ms.` : void 0,
+    children: /* @__PURE__ */ __name(() => slowList, "children")
+  });
+}
+__name(renderSlowItems, "renderSlowItems");
+function formatPerformanceLabel(entry) {
+  if (entry.kind === "request") return entry.label;
+  const formatted = formatDebugLocation(entry.label);
+  const openParen = formatted.indexOf("(");
+  const closeParen = openParen >= 0 ? formatted.indexOf(")", openParen) : -1;
+  if (openParen < 0 || closeParen < 0) return stripDebugLocation(entry.label);
+  const componentName = formatted.slice(0, openParen).trim();
+  const source = formatted.slice(openParen + 1, closeParen);
+  const fileName = source.split("/").pop() ?? source;
+  const suffix = formatted.slice(closeParen + 1).trim();
+  return [componentName, fileName, suffix].filter(Boolean).join(" ");
+}
+__name(formatPerformanceLabel, "formatPerformanceLabel");
+function appendMetric(parent, label, value) {
+  const row = createElement("div");
+  setAttribute(row, "class", "vobs-devtools-performance-item");
+  appendText(row, label, "vobs-devtools-muted");
+  appendText(row, String(value), "vobs-devtools-list__name");
+  insertBefore(parent, row, null);
+}
+__name(appendMetric, "appendMetric");
+function renderRouterSection(router, activeRouterTab, activeRouteView) {
+  if (!router) return createComponent(Alert, { tone: "warning", title: "Router unavailable", description: "Pass a Router instance to inspect route activity." });
+  const devtools = router.devtools;
+  const root = createElement("div");
+  setAttribute(root, "class", "vobs-devtools-router");
+  const current = devtools.getCurrentRoute();
+  const state2 = devtools.getNavigationState();
+  const metrics = devtools.getPerformanceMetrics();
+  const activeRequests = devtools.getDataRequests().filter((request) => request.route === current.fullPath || request.key.startsWith(`${current.fullPath}#`));
+  const activeErrors = devtools.getErrors().filter((error) => error.route === current.fullPath);
+  const toolbar = createElement("div");
+  setAttribute(toolbar, "class", "vobs-devtools-panel__toolbar");
+  insertBefore(toolbar, createComponent(Button, { variant: "secondary", icon: createComponent(Icon, { name: "refresh" }), children: /* @__PURE__ */ __name(() => "Revalidate current route", "children"), onClick: /* @__PURE__ */ __name(() => {
+    void devtools.revalidate(current.fullPath);
+  }, "onClick") }), null);
+  const tabs = createComponent(Tabs, {
+    class: "vobs-devtools-router-tabs",
+    variant: "filled",
+    items: [
+      { id: "context", label: "Context", content: /* @__PURE__ */ __name(() => createRouterContextPanel(current, state2), "content") },
+      { id: "requests", label: `Requests${activeRequests.length ? ` (${activeRequests.length})` : ""}`, content: /* @__PURE__ */ __name(() => createComponent(Card, { title: `Data requests for ${current.path}`, description: "Loader, action and fetcher traces for the active route.", children: /* @__PURE__ */ __name(() => renderDataRequests(activeRequests), "children") }), "content") },
+      { id: "errors", label: `Errors${activeErrors.length ? ` (${activeErrors.length})` : ""}`, content: /* @__PURE__ */ __name(() => createComponent(Card, { title: `Errors for ${current.path}`, description: `${activeErrors.length} errors captured for the active route.`, children: /* @__PURE__ */ __name(() => renderRouterErrors(activeErrors), "children") }), "content") },
+      { id: "history", label: "History", content: /* @__PURE__ */ __name(() => createComponent(Card, { title: "Navigation history", description: `${metrics.navigationCount} recorded navigations \xB7 ${metrics.averageNavigationDuration.toFixed(2)} ms average`, children: /* @__PURE__ */ __name(() => renderNavigationHistory(devtools.getNavigationHistory(), router), "children") }), "content") },
+      { id: "routes", label: "Route map", content: /* @__PURE__ */ __name(() => createComponent(Card, {
+        title: "Route map",
+        description: "All registered routes and their source locations.",
+        children: /* @__PURE__ */ __name(() => renderRouteMap(devtools.getRouteTree(), router, activeRouteView), "children")
+      }), "content") }
+    ],
+    get value() {
+      return activeRouterTab?.value ?? "context";
+    },
+    onChange: /* @__PURE__ */ __name((id) => {
+      if (activeRouterTab) activeRouterTab.value = id;
+    }, "onChange")
+  });
+  const tabsWrap = createElement("div");
+  setAttribute(tabsWrap, "class", "vobs-devtools-router-tabs-wrap");
+  insertBefore(tabsWrap, tabs, null);
+  insertBefore(tabsWrap, toolbar, null);
+  insertBefore(root, tabsWrap, null);
+  return root;
+}
+__name(renderRouterSection, "renderRouterSection");
+function createRouterContextPanel(current, state2) {
+  return createFragment((parent, anchor) => {
+    insertBefore(parent, createComponent(Card, { title: "Active route", children: /* @__PURE__ */ __name(() => renderRouterLocation(current, state2), "children") }), anchor);
+    insertBefore(parent, createComponent(Card, { title: "Matched route structure", children: /* @__PURE__ */ __name(() => renderMatchedRoutes(current.matched), "children") }), anchor);
+  });
+}
+__name(createRouterContextPanel, "createRouterContextPanel");
+function renderDataRequests(requests) {
+  const root = createElement("div");
+  setAttribute(root, "class", "vobs-devtools-list");
+  for (const request of [...requests].reverse().slice(0, 30)) {
+    const row = createElement("details");
+    setAttribute(row, "class", "vobs-devtools-list__row");
+    const summary = createElement("summary");
+    appendText(summary, `${request.kind} \xB7 ${request.key}`, "vobs-devtools-list__name");
+    insertBefore(summary, createComponent(Tag, { tone: request.status === "success" ? "success" : request.status === "error" ? "danger" : "warning", children: /* @__PURE__ */ __name(() => request.status, "children") }), null);
+    appendText(summary, request.duration === void 0 ? "running" : `${request.duration.toFixed(2)} ms`);
+    insertBefore(row, summary, null);
+    if (request.error) appendText(row, request.error);
+    if (request.status === "success" && request.result !== void 0) insertBefore(row, renderInspectableValue("Result", request.result), null);
+    insertBefore(root, row, null);
+  }
+  if (requests.length === 0) appendMuted(root, "No data requests recorded.");
+  return root;
+}
+__name(renderDataRequests, "renderDataRequests");
+function renderRouterErrors(errors) {
+  const root = createElement("div");
+  setAttribute(root, "class", "vobs-devtools-list");
+  for (const error of [...errors].reverse().slice(0, 30)) {
+    const row = createElement("details");
+    setAttribute(row, "class", "vobs-devtools-list__row vobs-devtools-error-row");
+    const summary = createElement("summary");
+    appendText(summary, `${error.phase} \xB7 ${error.route}`, "vobs-devtools-list__name");
+    appendText(summary, error.message);
+    insertBefore(row, summary, null);
+    if (error.stack) appendText(row, error.stack, "vobs-devtools-code");
+    insertBefore(root, row, null);
+  }
+  if (errors.length === 0) appendMuted(root, "No route errors recorded.");
+  return root;
+}
+__name(renderRouterErrors, "renderRouterErrors");
+function renderRouterLocation(route, state2) {
+  const root = createElement("div");
+  setAttribute(root, "class", "vobs-devtools-list");
+  const statusRow = createElement("div");
+  setAttribute(statusRow, "class", "vobs-devtools-list__row");
+  appendText(statusRow, route.fullPath, "vobs-devtools-list__name");
+  insertBefore(statusRow, createComponent(Tag, { tone: state2.status === "error" ? "danger" : state2.status === "loading" ? "warning" : "success", children: /* @__PURE__ */ __name(() => state2.status, "children") }), null);
+  if (state2.status === "loading") appendText(statusRow, `to ${state2.to}`);
+  if (state2.error) appendText(statusRow, state2.error);
+  insertBefore(root, statusRow, null);
+  insertBefore(root, renderInspectableValue("Params", route.params), null);
+  insertBefore(root, renderInspectableValue("Query", route.query), null);
+  insertBefore(root, renderInspectableValue("Meta", route.meta), null);
+  appendText(root, `outlet ${route.matched.map((record) => record.path ?? "(layout)").join("  >  ")}`);
+  return root;
+}
+__name(renderRouterLocation, "renderRouterLocation");
+function renderMatchedRoutes(records) {
+  const root = createElement("div");
+  setAttribute(root, "class", "vobs-devtools-route-tree");
+  records.forEach((record, index) => {
+    const row = createElement("div");
+    setAttribute(row, "class", "vobs-devtools-route-node");
+    setAttribute(row, "style", `--route-depth: ${index}`);
+    appendText(row, record.path ?? "(layout)", "vobs-devtools-list__name");
+    appendText(row, routeComponentName(record));
+    if (record.source) appendText(row, record.source, "vobs-devtools-code");
+    if (record.loader) insertBefore(row, createComponent(Tag, { tone: "neutral-strong", children: /* @__PURE__ */ __name(() => "loader", "children") }), null);
+    if (record.action) insertBefore(row, createComponent(Tag, { tone: "neutral-strong", children: /* @__PURE__ */ __name(() => "action", "children") }), null);
+    insertBefore(root, row, null);
+  });
+  if (records.length === 0) appendMuted(root, "No matched route records.");
+  return root;
+}
+__name(renderMatchedRoutes, "renderMatchedRoutes");
+function renderRouteMap(nodes, router, activeRouteView) {
+  const tree = createElement("div");
+  setAttribute(tree, "class", "vobs-devtools-route-tree");
+  const controls = createElement("div");
+  setAttribute(controls, "class", "vobs-devtools-route-view-toggle");
+  for (const mode of ["tree", "list"]) {
+    const button = createElement("button");
+    setAttribute(button, "class", `vobs-devtools-control${(activeRouteView?.value ?? "tree") === mode ? " is-active" : ""}`);
+    setAttribute(button, "type", "button");
+    setAttribute(button, "aria-pressed", (activeRouteView?.value ?? "tree") === mode ? "true" : "false");
+    insertBefore(button, createText(mode === "tree" ? "Tree" : "List"), null);
+    button.addEventListener("click", () => {
+      if (activeRouteView) activeRouteView.value = mode;
+    });
+    insertBefore(controls, button, null);
+  }
+  insertBefore(tree, controls, null);
+  const currentPath = router.currentRoute.value.path;
+  if ((activeRouteView?.value ?? "tree") === "list") {
+    for (const node of flattenRouteNodes(nodes)) appendRouteConfigNode(tree, node, 0, router, currentPath);
+  } else {
+    for (const node of nodes) appendRouteConfigNode(tree, node, 0, router, currentPath);
+  }
+  return tree;
+}
+__name(renderRouteMap, "renderRouteMap");
+function flattenRouteNodes(nodes) {
+  const result = [];
+  const visit = /* @__PURE__ */ __name((node) => {
+    result.push({ ...node, children: [] });
+    for (const child of node.children) visit(child);
+  }, "visit");
+  for (const node of nodes) visit(node);
+  return result;
+}
+__name(flattenRouteNodes, "flattenRouteNodes");
+function appendRouteConfigNode(parent, node, depth, router, currentPath) {
+  const concrete = node.children.length === 0 && !node.path.includes(":") && !node.path.includes("*");
+  const row = createElement(concrete ? "button" : "div");
+  setAttribute(row, "class", `vobs-devtools-route-node${concrete && node.path === currentPath ? " is-active" : ""}`);
+  setAttribute(row, "style", `--route-depth: ${depth}`);
+  appendText(row, node.path, "vobs-devtools-list__name");
+  appendText(row, node.component);
+  if (node.source) appendText(row, node.source, "vobs-devtools-code");
+  if (concrete) {
+    setAttribute(row, "type", "button");
+    setAttribute(row, "title", `Navigate to ${node.path}`);
+    row.addEventListener("click", () => {
+      void router.push(node.path);
+    });
+  }
+  insertBefore(parent, row, null);
+  for (const child of node.children) appendRouteConfigNode(parent, child, depth + 1, router, currentPath);
+}
+__name(appendRouteConfigNode, "appendRouteConfigNode");
+function routeComponentName(record) {
+  const definition = record.component;
+  if (!definition) return "Route";
+  if (typeof definition === "function") return definition.name || "Anonymous";
+  return "lazy(...)";
+}
+__name(routeComponentName, "routeComponentName");
+function renderNavigationHistory(history, router) {
+  const root = createElement("div");
+  setAttribute(root, "class", "vobs-devtools-list");
+  for (const trace of [...history].reverse().slice(0, 30)) {
+    const row = createElement("button");
+    setAttribute(row, "class", "vobs-devtools-list__row");
+    setAttribute(row, "type", "button");
+    setAttribute(row, "title", `Replay ${trace.to}`);
+    appendText(row, `${trace.from}  \u2192  ${trace.to}`, "vobs-devtools-list__name");
+    insertBefore(row, createComponent(Tag, { tone: trace.status === "success" ? "success" : trace.status === "error" ? "danger" : "warning", children: /* @__PURE__ */ __name(() => trace.status, "children") }), null);
+    appendText(row, `${trace.duration.toFixed(2)} ms \xB7 ${trace.source}`);
+    row.addEventListener("click", () => {
+      void router.push(trace.to);
+    });
+    insertBefore(root, row, null);
+  }
+  if (history.length === 0) appendMuted(root, "No navigation history recorded.");
+  return root;
+}
+__name(renderNavigationHistory, "renderNavigationHistory");
+function appendMuted(parent, value) {
+  const node = createElement("span");
+  setAttribute(node, "class", "vobs-devtools-muted");
+  insertBefore(node, createText(value), null);
+  insertBefore(parent, node, null);
+}
+__name(appendMuted, "appendMuted");
+function renderSignalInspector(signal, api) {
+  const row = createElement("details");
+  setAttribute(row, "class", "vobs-devtools-list__row vobs-devtools-signal-row");
+  const summary = createElement("summary");
+  appendText(summary, displaySignalName(signal), "vobs-devtools-list__name");
+  appendText(summary, previewValue(signal.value), "vobs-devtools-code");
+  insertBefore(summary, createComponent(Tag, { tone: "neutral-strong", children: /* @__PURE__ */ __name(() => `${signal.subscribers} subscribers`, "children") }), null);
+  insertBefore(row, summary, null);
+  if (!api) return row;
+  const dependencies = api.getDependencies(signal.id);
+  const dependents = api.getDependents(signal.id);
+  insertBefore(row, renderInspectableValue("Current value", signal.value), null);
+  appendText(row, `${dependencies.length} dependencies \xB7 ${dependents.length} dependents`, "vobs-devtools-muted");
+  if (api.canMutate() && signal.kind !== "memo") insertBefore(row, renderSignalMutationControl(signal, api), null);
+  return row;
+}
+__name(renderSignalInspector, "renderSignalInspector");
+function renderSignalMutationControl(signal, api) {
+  const root = createElement("div");
+  setAttribute(root, "class", "vobs-devtools-mutation-control");
+  appendText(root, "Debug-only value edit (may trigger effects and requests).", "vobs-devtools-muted");
+  const input = createElement("input");
+  setAttribute(input, "class", "vobs-devtools-search");
+  setAttribute(input, "type", "text");
+  setAttribute(input, "aria-label", `Edit ${signal.name}`);
+  setProperty(input, "value", formatValue(signal.value));
+  const button = createElement("button");
+  setAttribute(button, "class", "vobs-devtools-control");
+  setAttribute(button, "type", "button");
+  insertBefore(button, createText("Apply debug value"), null);
+  button.addEventListener("click", (event) => {
+    event.stopPropagation();
+    const raw = input.value;
+    let value = raw;
+    try {
+      value = JSON.parse(raw);
+    } catch {
+    }
+    api.setSignalValue(signal.id, value);
+  });
+  insertBefore(root, input, null);
+  insertBefore(root, button, null);
+  return root;
+}
+__name(renderSignalMutationControl, "renderSignalMutationControl");
+function renderEffectRow(effect2) {
+  const row = createElement("details");
+  setAttribute(row, "class", "vobs-devtools-list__row");
+  const summary = createElement("summary");
+  const component = formatDebugLocation(effect2.component);
+  appendText(summary, effect2.name || `${debugComponentName(component)} effect`, "vobs-devtools-list__name");
+  appendText(summary, formatDebugSource(component));
+  insertBefore(summary, createComponent(Tag, { tone: effect2.status === "success" || effect2.status === "idle" ? "success" : effect2.status === "error" ? "danger" : "warning", children: /* @__PURE__ */ __name(() => effect2.status, "children") }), null);
+  appendText(summary, `${effect2.executionCount} runs`);
+  insertBefore(row, summary, null);
+  appendText(row, `${effect2.dependencies.length} dependencies`, "vobs-devtools-muted");
+  if (effect2.lastExecutionTime > 0) appendText(row, `last execution ${effect2.lastDuration?.toFixed(2) ?? "0.00"} ms \xB7 ${effect2.lastRunStatus ?? "unknown"} \xB7 ${effect2.lastDomUpdates ?? 0} DOM updates`, "vobs-devtools-muted");
+  if (effect2.lastUpdateId) appendText(row, `last update ${effect2.lastUpdateId}`, "vobs-devtools-code");
+  if (effect2.lastError) appendText(row, `${effect2.lastError.name}: ${effect2.lastError.message}`, "vobs-devtools-error");
+  return row;
+}
+__name(renderEffectRow, "renderEffectRow");
+function renderUpdateRow(update, api, selection = null, onFocus = () => void 0) {
+  const row = createElement("details");
+  const selected = selection?.type === "update" && selection.id === update.id;
+  setAttribute(row, "class", `vobs-devtools-update-row${selected ? " is-selected" : ""}`);
+  if (selected) setProperty(row, "open", true);
+  const summary = createElement("summary");
+  summary.addEventListener("click", () => onFocus("updates", { type: "update", id: update.id }));
+  const signal = api?.getSignal(update.signalId);
+  appendText(summary, signal ? displaySignalName(signal) : displayDebugName(update.signalName), "vobs-devtools-list__name");
+  appendText(summary, formatDebugSource(signal?.component ?? "unknown"), "vobs-devtools-update-row__source");
+  appendText(summary, `${update.duration.toFixed(2)} ms`);
+  insertBefore(summary, createComponent(Tag, { tone: update.duration >= 16 ? "warning" : "neutral-strong", children: /* @__PURE__ */ __name(() => `${update.effects.length} effects`, "children") }), null);
+  insertBefore(row, summary, null);
+  insertBefore(row, renderValuePair("Value changed", update.previousValue, update.nextValue), null);
+  appendText(row, `status ${update.status} \xB7 ${update.affectedSignals.length} signals \xB7 ${update.affectedEffects.length} effects`, "vobs-devtools-muted");
+  if (update.error) appendText(row, `${update.error.name}: ${update.error.message}`, "vobs-devtools-error");
+  if (update.effects.length === 0) appendText(row, "No effects executed.", "vobs-devtools-muted");
+  for (const effect2 of update.effects) {
+    insertBefore(row, renderEffectExecution(effect2), null);
+    if (effect2.error) appendText(row, `${effect2.error.name}: ${effect2.error.message}`, "vobs-devtools-error");
+  }
+  for (const domUpdate of update.domUpdates) {
+    const operation = domUpdate.key ? `${domUpdate.operation}.${domUpdate.key}` : domUpdate.operation;
+    const mutation = createElement("div");
+    setAttribute(mutation, "class", "vobs-devtools-dom-update");
+    appendText(mutation, operation, "vobs-devtools-list__name");
+    appendText(mutation, domUpdate.target, "vobs-devtools-muted");
+    if (domUpdate.previousValue !== void 0 || domUpdate.nextValue !== void 0) {
+      insertBefore(mutation, renderValuePair("", domUpdate.previousValue, domUpdate.nextValue), null);
+    }
+    insertBefore(row, mutation, null);
+  }
+  return row;
+}
+__name(renderUpdateRow, "renderUpdateRow");
+function renderEffectExecution(effect2) {
+  const root = createElement("div");
+  setAttribute(root, "class", "vobs-devtools-effect-execution");
+  appendText(root, effect2.effectId, "vobs-devtools-code");
+  appendText(root, `${formatDebugSource(effect2.component)} \xB7 ${effect2.duration.toFixed(2)} ms \xB7 ${effect2.domUpdates} DOM updates \xB7 ${effect2.status ?? "success"}`);
+  return root;
+}
+__name(renderEffectExecution, "renderEffectExecution");
+function appendUpdateLinks(parent, ids, onFocus) {
+  if (ids.length === 0) {
+    appendText(parent, " none", "vobs-devtools-muted");
+    return;
+  }
+  for (const id of ids) {
+    const button = createElement("button");
+    setAttribute(button, "class", "vobs-devtools-link");
+    setAttribute(button, "type", "button");
+    button.addEventListener("click", (event) => {
+      event.stopPropagation();
+      onFocus("updates", { type: "update", id });
+    });
+    insertBefore(button, createText(id), null);
+    insertBefore(parent, button, null);
+  }
+}
+__name(appendUpdateLinks, "appendUpdateLinks");
+function renderLifecycleTimeline(events, onFocus) {
+  const root = createElement("div");
+  setAttribute(root, "class", "vobs-devtools-lifecycle-list");
+  for (const event of [...events].reverse().slice(0, 40)) {
+    const selection = lifecycleSelection(event);
+    const row = createElement(selection?.type === "component" ? "button" : "div");
+    setAttribute(row, "class", "vobs-devtools-lifecycle-row");
+    if (selection?.type === "component") setAttribute(row, "type", "button");
+    appendText(row, event.type, "vobs-devtools-list__name");
+    appendText(row, event.name ?? event.targetId);
+    appendText(row, event.status ?? "", "vobs-devtools-muted");
+    if (selection?.type === "component") row.addEventListener("click", () => onFocus("components", selection));
+    insertBefore(root, row, null);
+  }
+  if (events.length === 0) appendMuted(root, "No lifecycle events recorded.");
+  return root;
+}
+__name(renderLifecycleTimeline, "renderLifecycleTimeline");
+function renderUnifiedNetworkRequests(requests, routerRequests, query, selection, onFocus, networkSelection, sourceFilter, statusFilter, detailTab, api, queryState, http, testerOpen, testerRevision, testerRun, testerDraft, currentRoute, testerTab) {
+  const root = createElement("div");
+  setAttribute(root, "class", "vobs-devtools-network-inspector");
+  const activeSource = sourceFilter?.value ?? "all";
+  const activeStatus = statusFilter?.value ?? "all";
+  const entries = [
+    ...requests.map((request) => ({
+      key: `http:${request.id}`,
+      source: request.source === "ssr" ? "ssr" : "http",
+      method: request.method,
+      url: request.url,
+      status: request.status,
+      duration: request.duration,
+      startedAt: request.startedAt,
+      endedAt: request.endedAt,
+      request
+    })),
+    ...routerRequests.map((request) => ({
+      key: `router:${request.id}`,
+      source: "router",
+      method: request.kind,
+      url: request.key,
+      status: request.status,
+      duration: request.duration,
+      startedAt: request.startedAt,
+      endedAt: request.endedAt,
+      routerRequest: request
+    }))
+  ].filter((entry) => (activeSource === "all" || entry.source === activeSource) && (activeStatus === "all" || entry.status === activeStatus) && matchesQuery(query, entry.method, entry.url, entry.status, entry.source, entry.request?.responseStatus, entry.request?.route, entry.routerRequest?.route)).sort((left, right) => (right.startedAt ?? 0) - (left.startedAt ?? 0));
+  const selectedKey = (selection?.type === "request" ? `http:${selection.id}` : networkSelection?.value) ?? entries[0]?.key;
+  const selected = entries.find((entry) => entry.key === selectedKey) ?? entries[0];
+  const controls = createElement("div");
+  setAttribute(controls, "class", "vobs-devtools-network-toolbar");
+  appendText(controls, "Search", "vobs-devtools-network-toolbar__label");
+  const search = createElement("input");
+  setAttribute(search, "class", "vobs-devtools-search vobs-devtools-network-toolbar__search");
+  setAttribute(search, "type", "search");
+  setAttribute(search, "placeholder", "Search requests");
+  setProperty(search, "value", query);
+  search.addEventListener("change", () => {
+    if (queryState) queryState.value = search.value;
+  });
+  insertBefore(controls, search, null);
+  insertBefore(controls, createNetworkFilterSelect("Source", activeSource, [
+    ["all", "All sources"],
+    ["http", "HTTP"],
+    ["router", "Router"],
+    ["ssr", "SSR"]
+  ], (value) => {
+    if (sourceFilter) sourceFilter.value = value;
+  }), null);
+  insertBefore(controls, createNetworkFilterSelect("Status", activeStatus, [
+    ["all", "All statuses"],
+    ["loading", "Loading"],
+    ["success", "Success"],
+    ["error", "Error"],
+    ["cancelled", "Cancelled"]
+  ], (value) => {
+    if (statusFilter) statusFilter.value = value;
+  }), null);
+  if (api) insertBefore(controls, createComponent(Button, {
+    variant: "ghost",
+    children: /* @__PURE__ */ __name(() => "Clear", "children"),
+    onClick: /* @__PURE__ */ __name(() => api.clearNetworkRequests(), "onClick")
+  }), null);
+  if (testerOpen && testerDraft) insertBefore(controls, createComponent(Button, {
+    variant: "ghost",
+    iconOnly: true,
+    icon: createComponent(Icon, { name: "settings" }),
+    "aria-label": "Open Request Tester",
+    title: "Open Request Tester",
+    onClick: /* @__PURE__ */ __name(() => {
+      if (!testerDraft.url) testerDraft.url = selected?.url ?? currentRoute ?? "";
+      testerOpen.value = true;
+      testerRevision && testerRevision.value++;
+    }, "onClick")
+  }), null);
+  insertBefore(root, controls, null);
+  const panes = createElement("div");
+  setAttribute(panes, "class", "vobs-devtools-network-panes");
+  const listPane = createElement("section");
+  setAttribute(listPane, "class", "vobs-devtools-network-list-pane");
+  setAttribute(listPane, "aria-label", "Network requests");
+  const requestList = createElement("div");
+  setAttribute(requestList, "class", "vobs-devtools-network-request-list");
+  setAttribute(requestList, "role", "list");
+  for (const entry of entries) {
+    const row = createElement("button");
+    const isSelected = selectedKey === entry.key;
+    setAttribute(row, "class", `vobs-devtools-network-request${isSelected ? " is-selected" : ""}`);
+    setAttribute(row, "type", "button");
+    setAttribute(row, "role", "listitem");
+    setAttribute(row, "aria-pressed", isSelected ? "true" : "false");
+    row.addEventListener("click", () => {
+      networkSelection && (networkSelection.value = entry.key);
+      if (entry.request) onFocus("network", { type: "request", id: entry.request.id });
+      if (detailTab) detailTab.value = "overview";
+    });
+    const pathLine = createElement("span");
+    setAttribute(pathLine, "class", "vobs-devtools-network-request__path-line");
+    appendText(pathLine, entry.url, "vobs-devtools-network-request__url");
+    if (entry.request?.test) insertBefore(pathLine, createComponent(Tag, { tone: "warning", children: /* @__PURE__ */ __name(() => "TEST", "children") }), null);
+    insertBefore(pathLine, createComponent(Tag, { tone: entry.status === "success" ? "success" : entry.status === "error" || entry.status === "cancelled" ? "danger" : "warning", children: /* @__PURE__ */ __name(() => entry.request?.responseStatus ? `${entry.status} ${entry.request.responseStatus}` : entry.status, "children") }), null);
+    insertBefore(row, pathLine, null);
+    const meta = createElement("span");
+    setAttribute(meta, "class", "vobs-devtools-network-request__meta");
+    appendText(meta, entry.duration === void 0 ? "Running" : `${entry.duration.toFixed(0)} ms`);
+    appendText(meta, `ID ${entry.request?.id ?? entry.routerRequest?.id}`, "vobs-devtools-code");
+    insertBefore(row, meta, null);
+    insertBefore(requestList, row, null);
+  }
+  insertBefore(listPane, requestList, null);
+  if (entries.length === 0) appendMuted(listPane, query || activeSource !== "all" || activeStatus !== "all" ? "No requests match the current filters." : "No requests recorded.");
+  insertBefore(panes, listPane, null);
+  const detailPane = createElement("section");
+  setAttribute(detailPane, "class", "vobs-devtools-network-detail-pane");
+  setAttribute(detailPane, "aria-label", "Selected network request");
+  if (selected) insertBefore(detailPane, renderNetworkDetail(selected, detailTab?.value ?? "overview", (tab) => {
+    if (detailTab) detailTab.value = tab;
+  }), null);
+  else appendMuted(detailPane, "Select a request to inspect its details.");
+  insertBefore(panes, detailPane, null);
+  insertBefore(root, panes, null);
+  if (testerOpen?.value && testerDraft) insertBefore(root, renderRequestTester(testerDraft, (run) => {
+    if (testerRun) testerRun.value = run;
+    testerRevision && testerRevision.value++;
+  }, testerRun?.value ?? { status: "idle" }, testerTab?.value ?? "params", selected, http, () => {
+    testerOpen.value = false;
+  }, (tab) => {
+    if (testerTab) testerTab.value = tab;
+    testerRevision && testerRevision.value++;
+  }), null);
+  return root;
+}
+__name(renderUnifiedNetworkRequests, "renderUnifiedNetworkRequests");
+function createNetworkFilterSelect(label, value, options, onChange) {
+  const select = createElement("select");
+  setAttribute(select, "class", "vobs-devtools-network-toolbar__select");
+  setAttribute(select, "aria-label", label);
+  setProperty(select, "value", value);
+  for (const [optionValue, optionLabel] of options) {
+    const option = createElement("option");
+    setAttribute(option, "value", optionValue);
+    insertBefore(option, createText(optionLabel), null);
+    insertBefore(select, option, null);
+  }
+  setProperty(select, "value", value);
+  select.addEventListener("change", (event) => onChange(event.target.value));
+  return select;
+}
+__name(createNetworkFilterSelect, "createNetworkFilterSelect");
+function renderRequestTester(draft, onRunChange, run, activeTab, selected, http, onClose, onTabChange) {
+  const drawer = createElement("aside");
+  setAttribute(drawer, "class", "vobs-devtools-request-tester");
+  setAttribute(drawer, "aria-label", "Request Tester");
+  const heading = createElement("div");
+  setAttribute(heading, "class", "vobs-devtools-request-tester__heading");
+  appendText(heading, "Request Tester", "vobs-devtools-request-tester__title");
+  const headingActions = createElement("div");
+  setAttribute(headingActions, "class", "vobs-devtools-request-tester__heading-actions");
+  insertBefore(headingActions, createComponent(Button, {
+    variant: "ghost",
+    disabled: !selected,
+    children: /* @__PURE__ */ __name(() => "Use selected request", "children"),
+    onClick: /* @__PURE__ */ __name(() => {
+      if (!selected) return;
+      applyNetworkEntryToTesterDraft(selected, draft);
+      onRunChange({ status: "idle" });
+    }, "onClick")
+  }), null);
+  insertBefore(headingActions, createComponent(Button, {
+    variant: "ghost",
+    iconOnly: true,
+    icon: createComponent(Icon, { name: "x" }),
+    "aria-label": "Close Request Tester",
+    title: "Close Request Tester",
+    onClick: onClose
+  }), null);
+  insertBefore(heading, headingActions, null);
+  insertBefore(drawer, heading, null);
+  const requestLine = createElement("div");
+  setAttribute(requestLine, "class", "vobs-devtools-request-tester__request-line");
+  insertBefore(requestLine, createTesterInput("url", draft.url, (value) => {
+    draft.url = value;
+  }), null);
+  insertBefore(requestLine, createTesterMethodSelect(draft.method, (value) => {
+    draft.method = value;
+    onRunChange({ status: run.status, message: run.message });
+  }), null);
+  insertBefore(requestLine, createComponent(Button, {
+    variant: "brand",
+    iconOnly: true,
+    icon: createComponent(Icon, { name: "play" }),
+    loading: run.status === "running",
+    disabled: run.status === "running",
+    "aria-label": run.status === "running" ? "Running request" : "Start request",
+    title: run.status === "running" ? "Running request" : "Start request",
+    onClick: /* @__PURE__ */ __name(() => {
+      void executeRequestTester(http, draft, onRunChange);
+    }, "onClick")
+  }), null);
+  insertBefore(drawer, requestLine, null);
+  const tabs = createElement("div");
+  setAttribute(tabs, "class", "vobs-devtools-request-tester__tabs");
+  const tabLabels = [["params", "Params"], ["headers", "Headers"], ["body", "Body"]];
+  for (const [tab, label] of tabLabels) {
+    const button = createElement("button");
+    setAttribute(button, "class", `vobs-devtools-request-tester__tab${activeTab === tab ? " is-active" : ""}`);
+    setAttribute(button, "type", "button");
+    setAttribute(button, "aria-selected", activeTab === tab ? "true" : "false");
+    appendText(button, label);
+    button.addEventListener("click", () => onTabChange(tab));
+    insertBefore(tabs, button, null);
+  }
+  insertBefore(drawer, tabs, null);
+  if (activeTab === "params") insertBefore(drawer, renderTesterParamGroup("Params", draft.params, "parameter", onRunChange), null);
+  if (activeTab === "headers") insertBefore(drawer, renderTesterParamGroup("Headers", draft.headers, "header", onRunChange), null);
+  if (activeTab === "body") {
+    const bodyLabel = createElement("label");
+    setAttribute(bodyLabel, "class", "vobs-devtools-request-tester__field");
+    appendText(bodyLabel, "Body");
+    const body = createElement("textarea");
+    setAttribute(body, "class", "vobs-devtools-request-tester__textarea");
+    setAttribute(body, "rows", "8");
+    setAttribute(body, "placeholder", '{ "key": "value" }');
+    setProperty(body, "value", draft.body);
+    body.addEventListener("change", () => {
+      draft.body = body.value;
+    });
+    insertBefore(bodyLabel, body, null);
+    insertBefore(drawer, bodyLabel, null);
+  }
+  const footer = createElement("div");
+  setAttribute(footer, "class", "vobs-devtools-request-tester__footer");
+  if (run.message) appendText(footer, run.message, `vobs-devtools-request-tester__status${run.status === "error" ? " is-error" : run.status === "success" ? " is-success" : ""}`);
+  insertBefore(drawer, footer, null);
+  return drawer;
+}
+__name(renderRequestTester, "renderRequestTester");
+function applyNetworkEntryToTesterDraft(entry, draft) {
+  const request = entry.request;
+  const rawUrl = request?.url ?? entry.url;
+  let url = rawUrl;
+  let params = [];
+  try {
+    const parsed = new URL(rawUrl, typeof window !== "undefined" ? window.location.href : "http://localhost/");
+    url = `${parsed.origin === "http://localhost" && rawUrl.startsWith("/") ? "" : parsed.origin}${parsed.pathname}${parsed.hash}`;
+    params = [...parsed.searchParams.entries()].map(([key, value]) => ({ key, value }));
+  } catch {
+  }
+  draft.url = url;
+  draft.method = isHTTPMethod(request?.method ?? entry.method) ? request?.method ?? entry.method : "GET";
+  draft.params = params.length > 0 ? params : [{ key: "", value: "" }];
+  draft.headers = request ? Object.entries(request.headers).map(([key, value]) => ({ key, value })) : [{ key: "", value: "" }];
+  const body = request?.requestBody;
+  draft.body = body === void 0 || body === null || body === "" ? "" : typeof body === "string" ? body : JSON.stringify(body, null, 2);
+}
+__name(applyNetworkEntryToTesterDraft, "applyNetworkEntryToTesterDraft");
+function isHTTPMethod(value) {
+  return ["DELETE", "GET", "HEAD", "OPTIONS", "PATCH", "POST", "PUT"].includes(value);
+}
+__name(isHTTPMethod, "isHTTPMethod");
+function createTesterInput(name, value, onChange) {
+  const input = createElement("input");
+  setAttribute(input, "class", "vobs-devtools-request-tester__input");
+  setAttribute(input, "name", name);
+  setAttribute(input, "type", "text");
+  setProperty(input, "value", value);
+  input.addEventListener("change", () => onChange(input.value));
+  return input;
+}
+__name(createTesterInput, "createTesterInput");
+function createTesterMethodSelect(value, onChange) {
+  const select = createElement("select");
+  setAttribute(select, "class", "vobs-devtools-request-tester__select");
+  for (const method of ["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"]) {
+    const option = createElement("option");
+    setAttribute(option, "value", method);
+    if (method === value) setAttribute(option, "selected", "");
+    insertBefore(option, createText(method), null);
+    insertBefore(select, option, null);
+  }
+  select.addEventListener("change", () => onChange(select.value));
+  return select;
+}
+__name(createTesterMethodSelect, "createTesterMethodSelect");
+function renderTesterParamGroup(label, params, singular, onChange) {
+  const group = createElement("section");
+  setAttribute(group, "class", "vobs-devtools-request-tester__group");
+  const title = createElement("div");
+  setAttribute(title, "class", "vobs-devtools-request-tester__group-title");
+  appendText(title, label);
+  const add = createElement("button");
+  setAttribute(add, "class", "vobs-devtools-request-tester__add");
+  setAttribute(add, "type", "button");
+  appendText(add, "+");
+  setAttribute(add, "aria-label", `Add ${label}`);
+  setAttribute(add, "title", `Add ${label}`);
+  add.addEventListener("click", () => {
+    params.push({ key: "", value: "" });
+    onChange({ status: "idle" });
+  });
+  insertBefore(title, add, null);
+  insertBefore(group, title, null);
+  for (let index = 0; index < params.length; index++) {
+    const param = params[index];
+    const row = createElement("div");
+    setAttribute(row, "class", "vobs-devtools-request-tester__param");
+    insertBefore(row, createTesterInput(`${singular}-key-${index}`, param.key, (value) => {
+      param.key = value;
+    }), null);
+    insertBefore(row, createTesterInput(`${singular}-value-${index}`, param.value, (value) => {
+      param.value = value;
+    }), null);
+    const remove = createElement("button");
+    setAttribute(remove, "class", "vobs-devtools-request-tester__remove");
+    setAttribute(remove, "type", "button");
+    setAttribute(remove, "aria-label", `Remove ${label} row ${index + 1}`);
+    setAttribute(remove, "title", `Remove ${label} row ${index + 1}`);
+    insertBefore(remove, createComponent(Icon, { name: "trash" }), null);
+    remove.addEventListener("click", () => {
+      params.splice(index, 1);
+      if (params.length === 0) params.push({ key: "", value: "" });
+      onChange({ status: "idle" });
+    });
+    insertBefore(row, remove, null);
+    insertBefore(group, row, null);
+  }
+  return group;
+}
+__name(renderTesterParamGroup, "renderTesterParamGroup");
+async function executeRequestTester(http, draft, onRunChange) {
+  if (!http) {
+    onRunChange({ status: "error", message: "HTTP client is unavailable." });
+    return;
+  }
+  const url = draft.url.trim();
+  if (!url) {
+    onRunChange({ status: "error", message: "Enter a request URL." });
+    return;
+  }
+  const params = {};
+  for (const param of draft.params) if (param.key.trim()) params[param.key.trim()] = param.value;
+  const headers = {};
+  for (const header of draft.headers) if (header.key.trim()) headers[header.key.trim()] = header.value;
+  let body;
+  if (!["GET", "HEAD", "DELETE"].includes(draft.method) && draft.body.trim()) {
+    try {
+      body = JSON.parse(draft.body);
+    } catch {
+      onRunChange({ status: "error", message: "Body must be valid JSON." });
+      return;
+    }
+  }
+  onRunChange({ status: "running", message: void 0 });
+  try {
+    await http.request({
+      url,
+      method: draft.method,
+      params: Object.keys(params).length > 0 ? params : void 0,
+      headers: Object.keys(headers).length > 0 ? headers : void 0,
+      body,
+      debugContext: { route: url, test: true }
+    });
+    onRunChange({ status: "success", message: "Request completed." });
+  } catch (error) {
+    onRunChange({ status: "error", message: error instanceof Error ? error.message : String(error) });
+  }
+}
+__name(executeRequestTester, "executeRequestTester");
+function renderNetworkDetail(entry, activeTab, onTabChange) {
+  const root = createElement("section");
+  setAttribute(root, "class", "vobs-devtools-network-detail");
+  const request = entry.request;
+  const routerRequest = entry.routerRequest;
+  const heading = createElement("div");
+  setAttribute(heading, "class", "vobs-devtools-network-detail__heading");
+  appendText(heading, `${entry.method} ${entry.url}`, "vobs-devtools-network-detail__title");
+  if (request?.test) insertBefore(heading, createComponent(Tag, { tone: "warning", children: /* @__PURE__ */ __name(() => "TEST", "children") }), null);
+  insertBefore(heading, createComponent(Tag, { tone: entry.status === "success" ? "success" : entry.status === "error" || entry.status === "cancelled" ? "danger" : "warning", children: /* @__PURE__ */ __name(() => request?.responseStatus ? `${entry.status} ${request.responseStatus}` : entry.status, "children") }), null);
+  if (entry.duration !== void 0) appendText(heading, `${entry.duration.toFixed(0)} ms`, "vobs-devtools-network-detail__duration");
+  insertBefore(root, heading, null);
+  const tabs = createElement("div");
+  setAttribute(tabs, "class", "vobs-devtools-network-detail__tabs");
+  const tabLabels = [["overview", "Overview"], ["headers", "Headers"], ["payload", "Payload"], ["response", "Response"], ["timing", "Timing"], ["context", "Context"]];
+  for (const [tab, label] of tabLabels) {
+    const button = createElement("button");
+    setAttribute(button, "type", "button");
+    setAttribute(button, "class", `vobs-devtools-network-detail__tab${activeTab === tab ? " is-active" : ""}`);
+    setAttribute(button, "aria-selected", activeTab === tab ? "true" : "false");
+    appendText(button, label);
+    button.addEventListener("click", () => onTabChange(tab));
+    insertBefore(tabs, button, null);
+  }
+  insertBefore(root, tabs, null);
+  const content = createElement("div");
+  setAttribute(content, "class", "vobs-devtools-network-detail__content");
+  if (activeTab === "overview") {
+    appendNetworkField(content, "Source", entry.source.toUpperCase());
+    appendNetworkField(content, "Method / Type", entry.method);
+    appendNetworkField(content, "Request key", entry.url, "code");
+    appendNetworkField(content, "Status", entry.status);
+    if (request?.error || routerRequest?.error) appendText(content, request ? `${request.error?.name}: ${request.error?.message}` : routerRequest.error, "vobs-devtools-error");
+  } else if (activeTab === "headers") {
+    if (request && Object.keys(request.headers).length > 0) insertBefore(content, renderValueTree("Headers", request.headers, false), null);
+    else appendMuted(content, "No captured headers for this request.");
+  } else if (activeTab === "payload") {
+    const payload = request?.requestBody;
+    if (payload !== void 0) insertBefore(content, renderValueTree("Request body", payload, false), null);
+    else appendMuted(content, "No request payload captured.");
+  } else if (activeTab === "response") {
+    const response = request?.responseBody ?? routerRequest?.result;
+    if (response !== void 0) insertBefore(content, renderValueTree("Response", response, false), null);
+    else appendMuted(content, routerRequest?.error ?? "No response body captured.");
+  } else if (activeTab === "timing") {
+    if (entry.startedAt !== void 0) appendNetworkField(content, "Started at", formatNetworkTimestamp(entry.startedAt));
+    if (entry.endedAt !== void 0) appendNetworkField(content, "Ended at", formatNetworkTimestamp(entry.endedAt));
+    appendNetworkField(content, "Duration", entry.duration === void 0 ? "Running" : `${entry.duration.toFixed(2)} ms`);
+    if (request) appendNetworkField(content, "Attempts", `${request.attempt + 1} (${request.retries} retries)`);
+  } else {
+    appendNetworkField(content, "Environment", request?.environment ?? routerRequest?.environment ?? "client");
+    if (request?.route ?? routerRequest?.route) appendNetworkField(content, "Route", request?.route ?? routerRequest?.route ?? "", "code");
+    if (request?.navigationId ?? routerRequest?.navigationId) appendNetworkField(content, "Navigation ID", String(request?.navigationId ?? routerRequest?.navigationId), "code");
+    if (request?.dataRequestId !== void 0) appendNetworkField(content, "Data request ID", String(request.dataRequestId), "code");
+    if (routerRequest?.trigger) appendNetworkField(content, "Trigger", routerRequest.trigger);
+    appendNetworkField(content, "Request ID", String(request?.id ?? routerRequest?.id), "code");
+  }
+  insertBefore(root, content, null);
+  return root;
+}
+__name(renderNetworkDetail, "renderNetworkDetail");
+function appendNetworkField(parent, label, value, valueKind) {
+  const field = createElement("div");
+  setAttribute(field, "class", "vobs-devtools-network-detail__field");
+  appendText(field, label, "vobs-devtools-network-detail__label");
+  appendText(field, value, `vobs-devtools-network-detail__value${valueKind ? ` vobs-devtools-${valueKind}` : ""}`);
+  insertBefore(parent, field, null);
+}
+__name(appendNetworkField, "appendNetworkField");
+function formatNetworkTimestamp(value) {
+  const epoch = value > 1e11 ? value : typeof performance !== "undefined" ? performance.timeOrigin + value : Date.now();
+  return new Date(epoch).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+}
+__name(formatNetworkTimestamp, "formatNetworkTimestamp");
+function matchesQuery(query, ...values) {
+  const needle = query.trim().toLowerCase();
+  if (!needle) return true;
+  return values.some((value) => String(value ?? "").toLowerCase().includes(needle));
+}
+__name(matchesQuery, "matchesQuery");
+function filterErrors(errors, query) {
+  return errors.filter((error) => matchesQuery(query, error.phase, error.phases, error.origin, error.code, error.name, error.message, error.component, error.route, error.id, error.effectId, error.requestId));
+}
+__name(filterErrors, "filterErrors");
+function filterComponentTree(nodes, query) {
+  if (!query.trim()) return nodes;
+  return nodes.flatMap((node) => {
+    const children = filterComponentTree(node.children, query);
+    if (!matchesQuery(query, node.name, node.id) && children.length === 0) return [];
+    return [{ ...node, children }];
+  });
+}
+__name(filterComponentTree, "filterComponentTree");
+function renderErrors(errors, selection, onFocus) {
+  const root = createElement("div");
+  setAttribute(root, "class", "vobs-devtools-error-list");
+  for (const error of [...errors].reverse()) {
+    const row = createElement("details");
+    const selected = selection?.type === "error" && selection.id === error.id;
+    setAttribute(row, "class", `vobs-devtools-list__row vobs-devtools-error-item${selected ? " is-selected" : ""}`);
+    if (selected) setProperty(row, "open", true);
+    row.addEventListener("click", (event) => {
+      event.stopPropagation();
+      onFocus("errors", { type: "error", id: error.id });
+    });
+    const summary = createElement("summary");
+    appendText(summary, formatErrorSummary(error), "vobs-devtools-list__name");
+    appendText(summary, error.message, "vobs-devtools-error-item__message");
+    insertBefore(summary, createComponent(Tag, { tone: error.origin === "framework" ? "danger" : error.origin === "usage" ? "warning" : "neutral-strong", children: /* @__PURE__ */ __name(() => error.origin, "children") }), null);
+    insertBefore(summary, createComponent(Tag, { tone: "danger", children: /* @__PURE__ */ __name(() => `${error.count}\xD7`, "children") }), null);
+    insertBefore(row, summary, null);
+    const details = createElement("div");
+    setAttribute(details, "class", "vobs-devtools-error-item__details");
+    appendErrorField(details, "Phase", error.phases.length > 1 ? error.phases.join(" / ") : error.phase);
+    appendErrorField(details, "Occurred", `first ${new Date(error.firstOccurredAt).toLocaleString()} \xB7 last ${new Date(error.lastOccurredAt).toLocaleString()}`, "muted");
+    if (error.code) appendErrorField(details, "Code", error.code, "code");
+    if (error.component) appendErrorField(details, "Component", displayErrorComponent(error.component));
+    if (error.ownerId) appendErrorField(details, "Owner", error.ownerId, "code");
+    appendErrorField(details, "Status", `${error.handled ? "handled" : "propagated"} \xB7 ${error.recovery}`, "muted");
+    if (error.hint) appendErrorField(details, "Hint", error.hint, "muted", true);
+    if (error.cause) appendErrorField(details, "Cause", error.cause, "muted", true);
+    if (error.fix) appendErrorField(details, "Fix", error.fix, "muted", true);
+    if (error.source) appendErrorField(details, "Source", formatDebugLocation(error.source), "code", true);
+    if (error.updateId) appendErrorLinkField(details, "Update", error.updateId, "updates", { type: "update", id: error.updateId }, onFocus);
+    if (error.effectId) appendErrorField(details, "Effect", error.effectId, "code");
+    if (error.requestId !== void 0) appendErrorLinkField(details, "Request", String(error.requestId), "network", { type: "request", id: error.requestId }, onFocus);
+    if (error.navigationId !== void 0) appendErrorField(details, "Navigation", String(error.navigationId), "code");
+    if (error.route) appendErrorField(details, "Route", error.route, "code");
+    if (error.hydration) {
+      appendErrorField(details, "Expected", error.hydration.expected, "code", true);
+      appendErrorField(details, "Actual", error.hydration.actual, "code", true);
+      appendErrorField(details, "DOM path", error.hydration.path, "code");
+    }
+    if (error.stack) appendErrorStack(details, error.stack, error.name, error.message);
+    insertBefore(row, details, null);
+    insertBefore(root, row, null);
+  }
+  if (errors.length === 0) appendMuted(root, "No errors recorded.");
+  return root;
+}
+__name(renderErrors, "renderErrors");
+function appendContextLink(parent, label, section, selection, onFocus) {
+  const button = createElement("button");
+  setAttribute(button, "class", "vobs-devtools-link");
+  setAttribute(button, "type", "button");
+  button.addEventListener("click", (event) => {
+    event.stopPropagation();
+    onFocus(section, selection);
+  });
+  insertBefore(button, createText(label), null);
+  insertBefore(parent, button, null);
+}
+__name(appendContextLink, "appendContextLink");
+function appendErrorField(parent, label, value, valueKind, wide = false) {
+  const field = createElement("div");
+  setAttribute(field, "class", `vobs-devtools-error-item__field${wide ? " vobs-devtools-error-item__field--wide" : ""}`);
+  appendText(field, label, "vobs-devtools-error-item__label");
+  appendText(field, value, `vobs-devtools-error-item__value${valueKind ? ` vobs-devtools-${valueKind}` : ""}`);
+  insertBefore(parent, field, null);
+}
+__name(appendErrorField, "appendErrorField");
+function appendErrorLinkField(parent, label, value, section, selection, onFocus) {
+  const field = createElement("div");
+  setAttribute(field, "class", "vobs-devtools-error-item__field");
+  appendText(field, label, "vobs-devtools-error-item__label");
+  const valueNode = createElement("span");
+  setAttribute(valueNode, "class", "vobs-devtools-error-item__value");
+  appendContextLink(valueNode, value, section, selection, onFocus);
+  insertBefore(field, valueNode, null);
+  insertBefore(parent, field, null);
+}
+__name(appendErrorLinkField, "appendErrorLinkField");
+function appendErrorStack(parent, value, name, message) {
+  const stack = createElement("div");
+  setAttribute(stack, "class", "vobs-devtools-error-item__stack");
+  appendText(stack, "Stack trace", "vobs-devtools-error-item__label");
+  const code = createElement("pre");
+  setAttribute(code, "class", "vobs-devtools-error-item__stack-code vobs-devtools-code");
+  insertBefore(code, createText(formatDebugStack(value, name, message)), null);
+  insertBefore(stack, code, null);
+  insertBefore(parent, stack, null);
+}
+__name(appendErrorStack, "appendErrorStack");
+function formatErrorSummary(error) {
+  const phase = error.phases.length > 1 ? error.phases.join(" / ") : error.phase;
+  return error.name === "Error" ? phase : `${phase} \xB7 ${error.name}`;
+}
+__name(formatErrorSummary, "formatErrorSummary");
+function lifecycleSelection(event) {
+  if (event.type.startsWith("owner-")) return { type: "component", id: event.targetId };
+  if (event.type.startsWith("signal-") || event.type.startsWith("memo-")) return { type: "signal", id: event.targetId };
+  if (event.type.startsWith("effect-")) return { type: "effect", id: event.targetId };
+  return null;
+}
+__name(lifecycleSelection, "lifecycleSelection");
+function displaySignalName(signal) {
+  if (!signal.name.startsWith("signal-")) return stripDebugLocation(signal.name);
+  const component = formatDebugLocation(signal.component);
+  return component === "unknown" ? "runtime state" : `${debugComponentName(component)} state`;
+}
+__name(displaySignalName, "displaySignalName");
+function displayDebugName(name) {
+  return name.startsWith("signal-") ? "runtime state" : stripDebugLocation(name);
+}
+__name(displayDebugName, "displayDebugName");
+function debugComponentName(value) {
+  const separator = value.indexOf(" (");
+  return separator > 0 ? value.slice(0, separator) : value;
+}
+__name(debugComponentName, "debugComponentName");
+function displayErrorComponent(value) {
+  return debugComponentName(formatDebugLocation(value));
+}
+__name(displayErrorComponent, "displayErrorComponent");
+function appendText(parent, value, className) {
+  const node = createElement("span");
+  if (className) setAttribute(node, "class", className);
+  insertBefore(node, createText(value), null);
+  insertBefore(parent, node, null);
+}
+__name(appendText, "appendText");
+function formatDebugLocation(value) {
+  const normalized = value.replaceAll("\\", "/");
+  const lower = normalized.toLowerCase();
+  const sourceIndex = lower.startsWith("src/") ? 0 : lower.indexOf("/src/") + 1;
+  if (sourceIndex <= 0 && !lower.startsWith("src/")) return normalized;
+  const sourcePath = normalized.slice(sourceIndex);
+  const openParen = normalized.lastIndexOf("(", sourceIndex);
+  return openParen >= 0 ? `${normalized.slice(0, openParen + 1)}${sourcePath}` : sourcePath;
+}
+__name(formatDebugLocation, "formatDebugLocation");
+function formatDebugStack(value, name, message) {
+  const lines = value.split(/\r?\n/).map(formatDebugStackLine);
+  const first = lines[0]?.trim();
+  const header = `${name}: ${message}`;
+  if (lines.length > 1 && (first === header || first?.startsWith(`${header} `))) return lines.slice(1).join("\n");
+  return lines.join("\n");
+}
+__name(formatDebugStack, "formatDebugStack");
+function formatDebugStackLine(value) {
+  const normalized = value.replaceAll("\\", "/");
+  const lower = normalized.toLowerCase();
+  const sourceIndex = lower.startsWith("src/") ? 0 : lower.indexOf("/src/") + 1;
+  if (sourceIndex < 0) return normalized;
+  if (sourceIndex === 0) return normalized;
+  const prefixBeforeLocation = normalized.slice(0, sourceIndex);
+  const openParen = prefixBeforeLocation.lastIndexOf("(");
+  const openBracket = prefixBeforeLocation.lastIndexOf("[");
+  const opening = Math.max(openParen, openBracket);
+  if (opening >= 0) return `${normalized.slice(0, opening + 1)}${normalized.slice(sourceIndex)}`;
+  const at = prefixBeforeLocation.lastIndexOf("at ");
+  return at >= 0 ? `${normalized.slice(0, at + 3)}${normalized.slice(sourceIndex)}` : normalized.slice(sourceIndex);
+}
+__name(formatDebugStackLine, "formatDebugStackLine");
+function formatDebugSource(value) {
+  const location = formatDebugLocation(value);
+  const openParen = location.indexOf("(");
+  if (openParen < 0) return location;
+  const closeParen = location.indexOf(")", openParen);
+  return closeParen < 0 ? location : location.slice(openParen + 1, closeParen);
+}
+__name(formatDebugSource, "formatDebugSource");
+function stripDebugLocation(value) {
+  const normalized = value.replaceAll("\\", "/");
+  const lower = normalized.toLowerCase();
+  const sourceIndex = lower.startsWith("src/") ? 0 : lower.indexOf("/src/") + 1;
+  if (sourceIndex <= 0 && !lower.startsWith("src/")) return normalized;
+  const openParen = normalized.lastIndexOf("(", sourceIndex);
+  if (openParen < 0) return normalized;
+  const closeParen = normalized.indexOf(")", sourceIndex);
+  if (closeParen < 0) return normalized;
+  return `${normalized.slice(0, openParen)}${normalized.slice(closeParen + 1)}`.trim();
+}
+__name(stripDebugLocation, "stripDebugLocation");
+function renderComponentSummary(node, snapshot, selection, onFocus) {
+  const row = createElement("details");
+  const selected = selection?.type === "component" && selection.id === node.id;
+  setAttribute(row, "class", `vobs-devtools-list__row vobs-devtools-component-row${selected ? " is-selected" : ""}`);
+  if (selected) setProperty(row, "open", true);
+  row.addEventListener("click", (event) => {
+    event.stopPropagation();
+    onFocus("components", { type: "component", id: node.id });
+  });
+  const summary = createElement("summary");
+  appendText(summary, formatDebugLocation(node.name), "vobs-devtools-list__name");
+  insertBefore(summary, createComponent(Tag, { tone: node.mounted ? "success" : "neutral-strong", children: /* @__PURE__ */ __name(() => `${node.signals.length} signals`, "children") }), null);
+  insertBefore(summary, createComponent(Tag, { tone: "neutral-strong", children: /* @__PURE__ */ __name(() => `${node.effects.length} effects`, "children") }), null);
+  appendText(summary, `${node.recentUpdates.length} updates \xB7 ${node.domUpdates} DOM`, "vobs-devtools-muted");
+  insertBefore(row, summary, null);
+  appendText(row, `Component ID: ${node.id}`, "vobs-devtools-code");
+  appendText(row, "Recent updates:", "vobs-devtools-code");
+  appendUpdateLinks(row, node.recentUpdates, onFocus);
+  if (node.domUpdates > 0) {
+    appendText(row, "DOM results:", "vobs-devtools-code");
+    for (const updateId of node.recentUpdates) {
+      const update = snapshot.updates.find((item) => item.id === updateId);
+      for (const domUpdate of update?.domUpdates ?? []) {
+        const operation = domUpdate.key ? `${domUpdate.operation}.${domUpdate.key}` : domUpdate.operation;
+        appendText(row, `${operation} ${domUpdate.target}`, "vobs-devtools-muted");
+      }
+    }
+  }
+  if (node.children.length > 0) {
+    appendText(row, "Children:", "vobs-devtools-code");
+    for (const child of node.children) insertBefore(row, renderComponentSummary(child, snapshot, selection, onFocus), null);
+  }
+  return row;
+}
+__name(renderComponentSummary, "renderComponentSummary");
+function formatValue(value) {
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value) ?? String(value);
+  } catch {
+    return String(value);
+  }
+}
+__name(formatValue, "formatValue");
+function renderValuePair(label, previousValue, nextValue) {
+  const root = createElement("div");
+  setAttribute(root, "class", `vobs-devtools-value-pair${label ? "" : " vobs-devtools-value-pair--compact"}`);
+  const distinctMode = state(Boolean(label));
+  root.addEventListener("click", (event) => event.stopPropagation());
+  root.addEventListener("pointerdown", (event) => event.stopPropagation());
+  if (label) {
+    const title = createElement("div");
+    setAttribute(title, "class", "vobs-devtools-value-pair__title");
+    appendText(title, label);
+    const toggle = createElement("button");
+    setAttribute(toggle, "class", "vobs-devtools-distinct-toggle is-active");
+    setAttribute(toggle, "type", "button");
+    setAttribute(toggle, "aria-pressed", "true");
+    setAttribute(toggle, "title", "Show only values that changed");
+    insertBefore(toggle, createText("distinct"), null);
+    toggle.addEventListener("click", (event) => {
+      event.stopPropagation();
+      const enabled = !distinctMode.value;
+      distinctMode.value = enabled;
+      setAttribute(toggle, "class", `vobs-devtools-distinct-toggle${enabled ? " is-active" : ""}`);
+      setAttribute(toggle, "aria-pressed", enabled ? "true" : "false");
+      setAttribute(toggle, "title", enabled ? "Show only values that changed" : "Show complete values");
+    });
+    insertBefore(title, toggle, null);
+    insertBefore(root, title, null);
+  }
+  insertDynamic(root, null, () => {
+    const distinct = distinctMode.value;
+    const difference = distinct ? createDistinctValuePair(previousValue, nextValue) : null;
+    const before = difference?.before ?? { value: previousValue, hasDifference: true };
+    const after = difference?.after ?? { value: nextValue, hasDifference: true };
+    return createFragment((parent, anchor) => {
+      insertBefore(parent, renderValueTree("Before", before.value, Boolean(label), distinct && !before.hasDifference ? "No differing fields" : void 0), anchor);
+      insertBefore(parent, renderValueTree("After", after.value, Boolean(label), distinct && !after.hasDifference ? "No differing fields" : void 0), anchor);
+    });
+  });
+  return root;
+}
+__name(renderValuePair, "renderValuePair");
+function renderValueTree(label, value, expanded, emptyMessage) {
+  const root = createElement("section");
+  setAttribute(root, "class", "vobs-devtools-value-inspector");
+  root.addEventListener("click", (event) => event.stopPropagation());
+  root.addEventListener("pointerdown", (event) => event.stopPropagation());
+  if (hasExpandableEntries(value)) {
+    const controls = createElement("div");
+    setAttribute(controls, "class", "vobs-devtools-value-inspector__controls");
+    insertBefore(controls, createComponent(Button, {
+      variant: "ghost",
+      iconOnly: true,
+      icon: createComponent(Icon, { name: "plus" }),
+      "aria-label": `Expand all ${label} values`,
+      title: `Expand all ${label} values`,
+      onClick: /* @__PURE__ */ __name((event) => {
+        event.stopPropagation();
+        for (const node of root.querySelectorAll(".vobs-devtools-value-tree")) setAttribute(node, "data-expanded", "true");
+      }, "onClick")
+    }), null);
+    insertBefore(controls, createComponent(Button, {
+      variant: "ghost",
+      iconOnly: true,
+      icon: createComponent(Icon, { name: "minus" }),
+      "aria-label": `Collapse all ${label} values`,
+      title: `Collapse all ${label} values`,
+      onClick: /* @__PURE__ */ __name((event) => {
+        event.stopPropagation();
+        for (const node of root.querySelectorAll(".vobs-devtools-value-tree")) setAttribute(node, "data-expanded", "false");
+      }, "onClick")
+    }), null);
+    insertBefore(root, controls, null);
+  }
+  const tree = createElement("div");
+  setAttribute(tree, "class", "vobs-devtools-value-tree-root");
+  setAttribute(tree, "role", "tree");
+  setAttribute(tree, "aria-label", `${label} value`);
+  if (emptyMessage) appendText(tree, emptyMessage, "vobs-devtools-value-tree__empty");
+  else insertBefore(tree, renderInspectableValue(label, value, expanded), null);
+  insertBefore(root, tree, null);
+  return root;
+}
+__name(renderValueTree, "renderValueTree");
+var MISSING_VALUE = Symbol("missing diagnostic value");
+function createDistinctValuePair(before, after) {
+  return projectDistinctValues(before, after);
+}
+__name(createDistinctValuePair, "createDistinctValuePair");
+function projectDistinctValues(before, after) {
+  if (areValuesEqual(before, after)) {
+    return {
+      before: { value: before, hasDifference: false },
+      after: { value: after, hasDifference: false }
+    };
+  }
+  if (!isExpandableValue(before) || !isExpandableValue(after)) {
+    return {
+      before: { value: before, hasDifference: true },
+      after: { value: after, hasDifference: true }
+    };
+  }
+  if (Array.isArray(before) && Array.isArray(after)) {
+    const beforeProjection = new Array(before.length);
+    const afterProjection = new Array(after.length);
+    for (let index = 0; index < Math.max(before.length, after.length); index++) {
+      const child = projectDistinctValues(
+        index in before ? before[index] : MISSING_VALUE,
+        index in after ? after[index] : MISSING_VALUE
+      );
+      if (child.before.value !== MISSING_VALUE) beforeProjection[index] = child.before.value;
+      if (child.after.value !== MISSING_VALUE) afterProjection[index] = child.after.value;
+    }
+    return {
+      before: { value: beforeProjection, hasDifference: valueEntries(beforeProjection).length > 0 },
+      after: { value: afterProjection, hasDifference: valueEntries(afterProjection).length > 0 }
+    };
+  }
+  if (!Array.isArray(before) && !Array.isArray(after)) {
+    const beforeProjection = {};
+    const afterProjection = {};
+    const beforeObject = before;
+    const afterObject = after;
+    const keys = /* @__PURE__ */ new Set([...Object.keys(beforeObject), ...Object.keys(afterObject)]);
+    for (const key of keys) {
+      const child = projectDistinctValues(
+        Object.prototype.hasOwnProperty.call(beforeObject, key) ? beforeObject[key] : MISSING_VALUE,
+        Object.prototype.hasOwnProperty.call(afterObject, key) ? afterObject[key] : MISSING_VALUE
+      );
+      if (child.before.value !== MISSING_VALUE) beforeProjection[key] = child.before.value;
+      if (child.after.value !== MISSING_VALUE) afterProjection[key] = child.after.value;
+    }
+    return {
+      before: { value: beforeProjection, hasDifference: Object.keys(beforeProjection).length > 0 },
+      after: { value: afterProjection, hasDifference: Object.keys(afterProjection).length > 0 }
+    };
+  }
+  return {
+    before: { value: before, hasDifference: true },
+    after: { value: after, hasDifference: true }
+  };
+}
+__name(projectDistinctValues, "projectDistinctValues");
+function areValuesEqual(before, after, seen = /* @__PURE__ */ new WeakMap()) {
+  if (Object.is(before, after)) return true;
+  if (!isExpandableValue(before) || !isExpandableValue(after)) return false;
+  if (Array.isArray(before) !== Array.isArray(after)) return false;
+  if (Object.prototype.toString.call(before) !== Object.prototype.toString.call(after)) return false;
+  const previousPairs = seen.get(before);
+  if (previousPairs?.has(after)) return true;
+  if (previousPairs) previousPairs.add(after);
+  else seen.set(before, new WeakSet([after]));
+  const beforeKeys = Object.keys(before);
+  const afterKeys = Object.keys(after);
+  if (beforeKeys.length !== afterKeys.length) return false;
+  const beforeObject = before;
+  const afterObject = after;
+  return beforeKeys.every((key) => Object.prototype.hasOwnProperty.call(afterObject, key) && areValuesEqual(beforeObject[key], afterObject[key], seen));
+}
+__name(areValuesEqual, "areValuesEqual");
+function renderInspectableValue(label, value, expanded = false, ancestors = []) {
+  if (!hasExpandableEntries(value) || ancestors.includes(value)) {
+    const row = createElement("div");
+    setAttribute(row, "class", "vobs-devtools-value-tree__leaf");
+    setAttribute(row, "role", "treeitem");
+    appendText(row, label, "vobs-devtools-value-field__label");
+    appendText(row, ancestors.includes(value) ? "[Circular]" : previewValue(value), "vobs-devtools-code");
+    return row;
+  }
+  const root = createElement("div");
+  setAttribute(root, "class", "vobs-devtools-value-tree");
+  setAttribute(root, "role", "treeitem");
+  setAttribute(root, "data-expanded", expanded ? "true" : "false");
+  const summary = createElement("button");
+  setAttribute(summary, "class", "vobs-devtools-value-tree__summary");
+  setAttribute(summary, "type", "button");
+  setAttribute(summary, "aria-expanded", expanded ? "true" : "false");
+  setAttribute(summary, "title", `Expand ${label}`);
+  const toggleExpanded = /* @__PURE__ */ __name(() => {
+    const expanded2 = root.getAttribute("data-expanded") !== "true";
+    setAttribute(root, "data-expanded", expanded2 ? "true" : "false");
+    setAttribute(summary, "aria-expanded", expanded2 ? "true" : "false");
+    setAttribute(summary, "title", `${expanded2 ? "Collapse" : "Expand"} ${label}`);
+  }, "toggleExpanded");
+  summary.addEventListener("pointerdown", (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    toggleExpanded();
+  });
+  summary.addEventListener("keydown", (event) => {
+    const keyboardEvent = event;
+    if (keyboardEvent.key !== "Enter" && keyboardEvent.key !== " ") return;
+    event.preventDefault();
+    event.stopPropagation();
+    toggleExpanded();
+  });
+  appendText(summary, label, "vobs-devtools-value-field__label");
+  appendText(summary, previewValue(value), "vobs-devtools-code");
+  insertBefore(root, summary, null);
+  const children = createElement("div");
+  setAttribute(children, "class", "vobs-devtools-value-tree__children");
+  setAttribute(children, "role", "group");
+  for (const [key, child] of valueEntries(value)) {
+    insertBefore(children, renderInspectableValue(key, child, false, [...ancestors, value]), null);
+  }
+  insertBefore(root, children, null);
+  return root;
+}
+__name(renderInspectableValue, "renderInspectableValue");
+function isExpandableValue(value) {
+  return typeof value === "object" && value !== null;
+}
+__name(isExpandableValue, "isExpandableValue");
+function hasExpandableEntries(value) {
+  return isExpandableValue(value) && valueEntries(value).length > 0;
+}
+__name(hasExpandableEntries, "hasExpandableEntries");
+function valueEntries(value) {
+  if (Array.isArray(value)) return value.slice(0, 100).map((item, index) => [`[${index}]`, item]);
+  return Object.entries(value).slice(0, 100);
+}
+__name(valueEntries, "valueEntries");
+function previewValue(value) {
+  if (value === void 0) return "undefined";
+  if (value === null) return "null";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean" || typeof value === "bigint") return String(value);
+  if (Array.isArray(value)) return `Array (${value.length} items)`;
+  if (typeof value === "object") return `Object (${Object.keys(value).length} fields)`;
+  return String(value);
+}
+__name(previewValue, "previewValue");
+
+export { DevToolsPanel, DevToolsToolbar, readDevToolsSnapshot };
+//# sourceMappingURL=panel.js.map
+//# sourceMappingURL=panel.js.map