@vobs/devtools-ui 1.2.0 → 1.2.2

package/dist/panel.cjs

@@ -1,1285 +1,37 @@
-'use strict';
-
-require('axios');
-
+var __VOBS_CJS_FILE_URL = require("url").pathToFileURL(__filename).href;
+"use strict";
 var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 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();
-  }
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
-__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;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  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"/>'
+  return to;
 };
-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");
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // packages/devtools-ui/src/panel.tsx
+var panel_exports = {};
+__export(panel_exports, {
+  DevToolsPanel: () => DevToolsPanel,
+  DevToolsToolbar: () => DevToolsToolbar,
+  readDevToolsSnapshot: () => readDevToolsSnapshot
+});
+module.exports = __toCommonJS(panel_exports);
+var import_devtools = require("@vobs/devtools");
+var import_http = require("@vobs/http");
+var import_reactivity = require("@vobs/reactivity");
+var import_vobs = require("@vobs/vobs");
+var import_ui = require("@vobs/ui");
 var EMPTY_SNAPSHOT = {
   api: null,
   tree: [],
@@ -1296,7 +48,7 @@ var EMPTY_SNAPSHOT = {
   routerContext: null
 };
 var PANEL_REFRESH_EVENTS = ["signal-update", "update", "lifecycle", "network-request", "router", "error", "collection", "collection-cleared"];
-function readDevToolsSnapshot(api = getDevTools()) {
+function readDevToolsSnapshot(api = (0, import_devtools.getDevTools)()) {
   return readDevToolsSnapshotWithRouter(api, null);
 }
 __name(readDevToolsSnapshot, "readDevToolsSnapshot");
@@ -1320,26 +72,26 @@ function readDevToolsSnapshotWithRouter(api, router) {
 }
 __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");
+  const refreshCount = (0, import_vobs.state)(0);
+  const activeSection = (0, import_vobs.state)("updates");
+  const activeAdvancedSection = (0, import_vobs.state)("signals");
+  const activeRouterTab = (0, import_vobs.state)("context");
+  const activeUpdatesTab = (0, import_vobs.state)("updates");
+  const activeComponentsTab = (0, import_vobs.state)("tree");
+  const activeRouteView = (0, import_vobs.state)("tree");
+  const activeTimelineFilter = (0, import_vobs.state)("all");
+  const networkSelection = (0, import_vobs.state)(null);
+  const networkSourceFilter = (0, import_vobs.state)("all");
+  const networkStatusFilter = (0, import_vobs.state)("all");
+  const networkDetailTab = (0, import_vobs.state)("overview");
+  const networkTesterOpen = (0, import_vobs.state)(false);
+  const networkTesterRevision = (0, import_vobs.state)(0);
+  const networkTesterRun = (0, import_vobs.state)({ status: "idle" });
+  const networkTesterTab = (0, import_vobs.state)("params");
   let networkTesterDraft = createRequestTesterDraft();
-  const selection = state(null);
-  const query = props.query ?? state("");
-  const http = props.http ?? inject(HTTP_KEY) ?? null;
+  const selection = (0, import_vobs.state)(null);
+  const query = props.query ?? (0, import_vobs.state)("");
+  const http = props.http ?? (0, import_vobs.inject)(import_http.HTTP_KEY) ?? null;
   let refreshInvalidating = false;
   const notifyRefresh = /* @__PURE__ */ __name(() => {
     if (refreshInvalidating) return;
@@ -1353,7 +105,7 @@ function DevToolsPanel(props = {}) {
   const api = resolveApi(props);
   if (api) {
     const stops = PANEL_REFRESH_EVENTS.map((event) => api.subscribe(event, notifyRefresh));
-    onDispose(() => {
+    (0, import_vobs.onDispose)(() => {
       for (const stop of stops) stop();
     });
   }
@@ -1364,7 +116,7 @@ function DevToolsPanel(props = {}) {
     const stopNavigation = router.devtools.subscribe("navigation:end", notifyRefresh);
     const stopRouteUpdate = router.devtools.subscribe("route:update", notifyRefresh);
     const stopRouteError = router.devtools.subscribe("error", notifyRefresh);
-    onDispose(() => {
+    (0, import_vobs.onDispose)(() => {
       stopNavigationStart();
       stopNavigation();
       stopRouteUpdate();
@@ -1373,55 +125,55 @@ function DevToolsPanel(props = {}) {
     });
   }
   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 }));
+  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(import_ui.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);
+  const refreshCount = (0, import_vobs.state)(0);
   if (props.api) {
     const stops = ["collection", "collection-cleared"].map((event) => props.api.subscribe(event, () => {
       refreshCount.value++;
     }));
-    onDispose(() => {
+    (0, import_vobs.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(() => {
+  return (0, import_vobs.createFragment)((parent, anchor) => {
+    const toolbar = (0, import_vobs.createElement)("div");
+    (0, import_vobs.setAttribute)(toolbar, "class", "vobs-devtools-collection-toolbar vobs-devtools-collection-toolbar--header");
+    const search = (0, import_vobs.createElement)("input");
+    (0, import_vobs.setAttribute)(search, "class", "vobs-devtools-search vobs-devtools-header-search");
+    (0, import_vobs.setAttribute)(search, "type", "search");
+    (0, import_vobs.setAttribute)(search, "placeholder", "Search diagnostics");
+    (0, import_reactivity.effect)(() => {
       const next = props.query.value;
-      if (search.value !== next) setProperty(search, "value", next);
+      if (search.value !== next) (0, import_vobs.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, () => {
+    (0, import_vobs.insertBefore)(toolbar, search, null);
+    const actions = (0, import_vobs.createElement)("div");
+    (0, import_vobs.setAttribute)(actions, "class", "vobs-devtools-collection-toolbar__actions");
+    (0, import_vobs.insertBefore)(toolbar, actions, null);
+    (0, import_vobs.insertBefore)(parent, toolbar, anchor);
+    (0, import_vobs.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, {
+      return (0, import_vobs.createFragment)((actionParent, actionAnchor) => {
+        (0, import_vobs.insertBefore)(actionParent, (0, import_vobs.createComponent)(import_ui.Button, {
           variant: paused ? "warning" : "secondary",
           iconOnly: true,
-          icon: createComponent(Icon, { name: paused ? "play" : "pause" }),
+          icon: (0, import_vobs.createComponent)(import_ui.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, {
+        (0, import_vobs.insertBefore)(actionParent, (0, import_vobs.createComponent)(import_ui.Button, {
           variant: "danger-subtle",
           iconOnly: true,
-          icon: createComponent(Icon, { name: "trash" }),
+          icon: (0, import_vobs.createComponent)(import_ui.Icon, { name: "trash" }),
           "aria-label": "Clear diagnostics",
           title: "Clear diagnostics",
           onClick: /* @__PURE__ */ __name(() => {
@@ -1440,37 +192,37 @@ function DevToolsToolbar(props) {
           link.click();
           URL.revokeObjectURL(link.href);
         }, "exportDiagnostics");
-        insertBefore(actionParent, createComponent(Button, {
+        (0, import_vobs.insertBefore)(actionParent, (0, import_vobs.createComponent)(import_ui.Button, {
           variant: "ghost",
           iconOnly: true,
-          icon: createComponent(Icon, { name: "download" }),
+          icon: (0, import_vobs.createComponent)(import_ui.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", "");
+        const importInput = (0, import_vobs.createElement)("input");
+        (0, import_vobs.setAttribute)(importInput, "type", "file");
+        (0, import_vobs.setAttribute)(importInput, "accept", "application/json,.json");
+        (0, import_vobs.setAttribute)(importInput, "aria-label", "Import diagnostics");
+        (0, import_vobs.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, {
+        (0, import_vobs.insertBefore)(actionParent, importInput, actionAnchor);
+        (0, import_vobs.insertBefore)(actionParent, (0, import_vobs.createComponent)(import_ui.Button, {
           variant: "ghost",
           iconOnly: true,
-          icon: createComponent(Icon, { name: "upload" }),
+          icon: (0, import_vobs.createComponent)(import_ui.Icon, { name: "upload" }),
           "aria-label": "Import diagnostics",
           title: "Import diagnostics",
           onClick: /* @__PURE__ */ __name(() => importInput.click(), "onClick")
         }), actionAnchor);
-        if (props.onToggleMaximize) insertBefore(actionParent, createComponent(Button, {
+        if (props.onToggleMaximize) (0, import_vobs.insertBefore)(actionParent, (0, import_vobs.createComponent)(import_ui.Button, {
           variant: "ghost",
           iconOnly: true,
-          icon: createComponent(Icon, { name: props.maximized ? "arrow-minimize" : "arrow-expand" }),
+          icon: (0, import_vobs.createComponent)(import_ui.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
@@ -1492,12 +244,12 @@ var TIMELINE_FILTER_OPTIONS = [
   { value: "error", label: "Errors" }
 ];
 function resolveApi(props) {
-  return props.api === void 0 ? getDevTools() : props.api;
+  return props.api === void 0 ? (0, import_devtools.getDevTools)() : props.api;
 }
 __name(resolveApi, "resolveApi");
 function DevToolsContent(props) {
-  return createFragment((parent, anchor) => {
-    insertDynamic(parent, anchor, () => {
+  return (0, import_vobs.createFragment)((parent, anchor) => {
+    (0, import_vobs.insertDynamic)(parent, anchor, () => {
       void props.refreshCount.value;
       void props.activeSection.value;
       void props.activeRouterTab.value;
@@ -1521,8 +273,8 @@ function DevToolsContent(props) {
 }
 __name(DevToolsContent, "DevToolsContent");
 function ActivityRail(props) {
-  return createFragment((parent, anchor) => {
-    insertDynamic(parent, anchor, () => {
+  return (0, import_vobs.createFragment)((parent, anchor) => {
+    (0, import_vobs.insertDynamic)(parent, anchor, () => {
       void props.refreshCount.value;
       const filter = props.activeFilter.value;
       const selected = props.selection.value;
@@ -1544,25 +296,25 @@ function focusSelection(activeSection, selection) {
 }
 __name(focusSelection, "focusSelection");
 function SectionNav(props) {
-  return createFragment((parent, anchor) => {
-    insertDynamic(parent, anchor, () => {
+  return (0, import_vobs.createFragment)((parent, anchor) => {
+    (0, import_vobs.insertDynamic)(parent, anchor, () => {
       const selected = props.activeSection.value;
-      return createFragment((navParent, navAnchor) => {
+      return (0, import_vobs.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 button = (0, import_vobs.createElement)("button");
+          (0, import_vobs.setAttribute)(button, "class", `vobs-devtools-shell__nav-item${selected === section ? " is-active" : ""}`);
+          (0, import_vobs.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);
+          (0, import_vobs.setAttribute)(button, "aria-label", accessibleLabel);
+          (0, import_vobs.setAttribute)(button, "title", accessibleLabel);
+          (0, import_vobs.setAttribute)(button, "aria-pressed", selected === section ? "true" : "false");
+          (0, import_vobs.insertBefore)(button, (0, import_vobs.createComponent)(import_ui.Icon, { name: section === "router" ? "folder" : section === "components" ? "code" : section === "advanced" ? "atom" : section === "network" ? "globe" : section === "errors" ? "alert-triangle" : "refresh" }), null);
+          (0, import_vobs.insertBefore)(button, createElementText(label), null);
           button.addEventListener("click", () => {
             props.activeSection.value = section;
           });
-          insertBefore(navParent, button, navAnchor);
+          (0, import_vobs.insertBefore)(navParent, button, navAnchor);
         }
       });
     });
@@ -1618,15 +370,15 @@ function collectActivityTimeline(snapshot, router, filter = "all") {
 }
 __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, {
+  const root = (0, import_vobs.createElement)("aside");
+  (0, import_vobs.setAttribute)(root, "class", "vobs-devtools-shell__activity");
+  const header = (0, import_vobs.createElement)("div");
+  (0, import_vobs.setAttribute)(header, "class", "vobs-devtools-shell__activity-header");
+  const title = (0, import_vobs.createElement)("div");
+  (0, import_vobs.setAttribute)(title, "class", "vobs-devtools-shell__activity-title");
+  (0, import_vobs.insertBefore)(title, createElementText("Timeline"), null);
+  (0, import_vobs.insertBefore)(header, title, null);
+  (0, import_vobs.insertBefore)(header, (0, import_vobs.createComponent)(import_ui.Select, {
     class: "vobs-devtools-timeline-filter",
     value: filter,
     "aria-label": "Filter timeline events",
@@ -1634,51 +386,51 @@ function renderActivityRail(updates, timeline, api, selection, filter, onFilterC
       const next = event.target.value;
       if (isTimelineFilter(next)) onFilterChange(next);
     }, "onChange"),
-    children: /* @__PURE__ */ __name(() => createFragment((parent, anchor) => {
+    children: /* @__PURE__ */ __name(() => (0, import_vobs.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);
+        const optionNode = (0, import_vobs.createElement)("option");
+        (0, import_vobs.setAttribute)(optionNode, "value", option.value);
+        (0, import_vobs.insertBefore)(optionNode, (0, import_vobs.createText)(option.label), null);
+        (0, import_vobs.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");
+  (0, import_vobs.insertBefore)(root, header, null);
+  const subtitle = (0, import_vobs.createElement)("div");
+  (0, import_vobs.setAttribute)(subtitle, "class", "vobs-devtools-shell__activity-subtitle");
+  (0, import_vobs.insertBefore)(subtitle, createElementText(`${timeline.length} shown \xB7 ${updates.length} updates`), null);
+  (0, import_vobs.insertBefore)(root, subtitle, null);
+  const list = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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" : ""}`);
+    const activityItem = (0, import_vobs.createElement)("div");
+    (0, import_vobs.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 dot = (0, import_vobs.createElement)("span");
+    (0, import_vobs.setAttribute)(dot, "class", "vobs-devtools-activity-item__dot");
+    (0, import_vobs.insertBefore)(dot, (0, import_vobs.createComponent)(import_ui.Icon, { name: entry.icon }), null);
+    const body = (0, import_vobs.createElement)("div");
+    (0, import_vobs.setAttribute)(body, "class", "vobs-devtools-activity-item__body");
+    const name = (0, import_vobs.createElement)("span");
+    (0, import_vobs.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);
+    (0, import_vobs.insertBefore)(name, createElementText(entry.title), null);
+    const detail = (0, import_vobs.createElement)("span");
+    (0, import_vobs.insertBefore)(detail, createElementText(entry.detail ?? (update ? `${formatDebugSource(signal?.component ?? "unknown")} \xB7 ${update.duration.toFixed(2)} ms \xB7 ${update.effects.length} effects` : "")), null);
+    (0, import_vobs.insertBefore)(body, name, null);
+    (0, import_vobs.insertBefore)(body, detail, null);
+    (0, import_vobs.insertBefore)(activityItem, dot, null);
+    (0, import_vobs.insertBefore)(activityItem, body, null);
+    (0, import_vobs.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);
+    const empty = (0, import_vobs.createElement)("span");
+    (0, import_vobs.setAttribute)(empty, "class", "vobs-devtools-muted");
+    (0, import_vobs.insertBefore)(empty, createElementText(filter === "all" ? "No recent events." : `No ${timelineFilterLabel(filter).toLowerCase()} events.`), null);
+    (0, import_vobs.insertBefore)(list, empty, null);
   }
-  insertBefore(root, list, null);
+  (0, import_vobs.insertBefore)(root, list, null);
   return root;
 }
 __name(renderActivityRail, "renderActivityRail");
@@ -1691,12 +443,12 @@ function timelineFilterLabel(filter) {
 }
 __name(timelineFilterLabel, "timelineFilterLabel");
 function createElementText(value) {
-  return createText(value);
+  return (0, import_vobs.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, {
+    return (0, import_vobs.createComponent)(import_ui.Alert, {
       description: "Enable the devtools plugin to inspect the runtime."
     });
   }
@@ -1707,28 +459,28 @@ function renderFocusedSection(snapshot, section, router, activeRouterTab, active
   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, {
+  if (section === "network") return (0, import_vobs.createComponent)(import_ui.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, {
+  if (section === "errors") return (0, import_vobs.createComponent)(import_ui.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");
+  const list = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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") });
+  return (0, import_vobs.createComponent)(import_ui.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, {
+  const tabs = (0, import_vobs.createComponent)(import_ui.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, {
+      { id: "lifecycle", label: "Lifecycle timeline", content: /* @__PURE__ */ __name(() => (0, import_vobs.createComponent)(import_ui.Card, {
         class: "vobs-devtools-lifecycle-card",
         description: `${snapshot.lifecycle.length} retained runtime events`,
         children: /* @__PURE__ */ __name(() => renderLifecycleTimeline(snapshot.lifecycle, (section, next) => {
@@ -1744,19 +496,19 @@ function renderComponentsSection(snapshot, activeTab, query = "", selection = nu
       if (activeTab && isComponentsPanelTab(id)) activeTab.value = id;
     }, "onChange")
   });
-  const root = createElement("div");
-  setAttribute(root, "class", "vobs-devtools-components-tabs-wrap");
-  insertBefore(root, tabs, null);
+  const root = (0, import_vobs.createElement)("div");
+  (0, import_vobs.setAttribute)(root, "class", "vobs-devtools-components-tabs-wrap");
+  (0, import_vobs.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);
+  const list = (0, import_vobs.createElement)("div");
+  (0, import_vobs.setAttribute)(list, "class", "vobs-devtools-list");
+  for (const node of componentTree) (0, import_vobs.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, {
+  return (0, import_vobs.createComponent)(import_ui.Card, {
     class: "vobs-devtools-component-tree-card",
     description: `Component tree ${snapshot.memory?.ownerCount ?? 0} active owners`,
     children: /* @__PURE__ */ __name(() => list, "children")
@@ -1768,7 +520,7 @@ function isComponentsPanelTab(value) {
 }
 __name(isComponentsPanelTab, "isComponentsPanelTab");
 function renderUpdatesSection(snapshot, activeTab, query = "", selection = null, onFocus = () => void 0) {
-  const tabs = createComponent(Tabs, {
+  const tabs = (0, import_vobs.createComponent)(import_ui.Tabs, {
     class: "vobs-devtools-router-tabs",
     variant: "filled",
     items: [
@@ -1783,9 +535,9 @@ function renderUpdatesSection(snapshot, activeTab, query = "", selection = null,
       if (activeTab && isUpdatesPanelTab(id)) activeTab.value = id;
     }, "onChange")
   });
-  const root = createElement("div");
-  setAttribute(root, "class", "vobs-devtools-updates-tabs-wrap");
-  insertBefore(root, tabs, null);
+  const root = (0, import_vobs.createElement)("div");
+  (0, import_vobs.setAttribute)(root, "class", "vobs-devtools-updates-tabs-wrap");
+  (0, import_vobs.insertBefore)(root, tabs, null);
   return root;
 }
 __name(renderUpdatesSection, "renderUpdatesSection");
@@ -1794,20 +546,20 @@ function isUpdatesPanelTab(value) {
 }
 __name(isUpdatesPanelTab, "isUpdatesPanelTab");
 function renderUpdatesList(snapshot, query, selection, onFocus) {
-  const list = createElement("div");
-  setAttribute(list, "class", "vobs-devtools-list");
+  const list = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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);
+    (0, import_vobs.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, {
+  return (0, import_vobs.createComponent)(import_ui.Card, {
     class: "vobs-devtools-updates-card",
     children: /* @__PURE__ */ __name(() => list, "children")
   });
 }
 __name(renderUpdatesList, "renderUpdatesList");
 function renderAdvancedSection(snapshot, activeSection, query = "") {
-  const tabs = createComponent(Tabs, {
+  const tabs = (0, import_vobs.createComponent)(import_ui.Tabs, {
     class: "vobs-devtools-advanced-tabs",
     variant: "filled",
     items: [
@@ -1821,47 +573,47 @@ function renderAdvancedSection(snapshot, activeSection, query = "") {
       if (activeSection) activeSection.value = id;
     }, "onChange")
   });
-  const root = createElement("div");
-  setAttribute(root, "class", "vobs-devtools-advanced");
-  insertBefore(root, tabs, null);
+  const root = (0, import_vobs.createElement)("div");
+  (0, import_vobs.setAttribute)(root, "class", "vobs-devtools-advanced");
+  (0, import_vobs.insertBefore)(root, tabs, null);
   return root;
 }
 __name(renderAdvancedSection, "renderAdvancedSection");
 function renderSignalsInspector(snapshot, query) {
-  const list = createElement("div");
-  setAttribute(list, "class", "vobs-devtools-list");
+  const list = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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);
+  for (const signal of signals) (0, import_vobs.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 list = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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);
+  for (const effect2 of effects) (0, import_vobs.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");
+    return (0, import_vobs.createComponent)(import_ui.Card, { description: "Performance: Lightweight slow-path summary for the retained diagnostics.", children: /* @__PURE__ */ __name(() => {
+      const root = (0, import_vobs.createElement)("div");
       appendMuted(root, "No performance data available.");
       return root;
     }, "children") });
   }
-  const metricsGrid = createElement("div");
-  setAttribute(metricsGrid, "class", "vobs-devtools-performance-metrics");
+  const metricsGrid = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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, {
+  return (0, import_vobs.createComponent)(import_ui.Card, {
     class: "vobs-devtools-performance-card",
     description: "Lightweight slow-path summary for the retained diagnostics.",
     children: /* @__PURE__ */ __name(() => metricsGrid, "children")
@@ -1870,18 +622,18 @@ function renderPerformanceMetrics(metrics) {
 __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");
+  const slowList = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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");
+    const item = (0, import_vobs.createElement)("div");
+    (0, import_vobs.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);
+    (0, import_vobs.insertBefore)(slowList, item, null);
   }
   if (slowEntries.length === 0) appendMuted(slowList, "No slow items recorded.");
-  return createComponent(Card, {
+  return (0, import_vobs.createComponent)(import_ui.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")
@@ -1902,37 +654,37 @@ function formatPerformanceLabel(entry) {
 }
 __name(formatPerformanceLabel, "formatPerformanceLabel");
 function appendMetric(parent, label, value) {
-  const row = createElement("div");
-  setAttribute(row, "class", "vobs-devtools-performance-item");
+  const row = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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);
+  (0, import_vobs.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." });
+  if (!router) return (0, import_vobs.createComponent)(import_ui.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 root = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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(() => {
+  const toolbar = (0, import_vobs.createElement)("div");
+  (0, import_vobs.setAttribute)(toolbar, "class", "vobs-devtools-panel__toolbar");
+  (0, import_vobs.insertBefore)(toolbar, (0, import_vobs.createComponent)(import_ui.Button, { variant: "secondary", icon: (0, import_vobs.createComponent)(import_ui.Icon, { name: "refresh" }), children: /* @__PURE__ */ __name(() => "Revalidate current route", "children"), onClick: /* @__PURE__ */ __name(() => {
     void devtools.revalidate(current.fullPath);
   }, "onClick") }), null);
-  const tabs = createComponent(Tabs, {
+  const tabs = (0, import_vobs.createComponent)(import_ui.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, {
+      { id: "requests", label: `Requests${activeRequests.length ? ` (${activeRequests.length})` : ""}`, content: /* @__PURE__ */ __name(() => (0, import_vobs.createComponent)(import_ui.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(() => (0, import_vobs.createComponent)(import_ui.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(() => (0, import_vobs.createComponent)(import_ui.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(() => (0, import_vobs.createComponent)(import_ui.Card, {
         title: "Route map",
         description: "All registered routes and their source locations.",
         children: /* @__PURE__ */ __name(() => renderRouteMap(devtools.getRouteTree(), router, activeRouteView), "children")
@@ -1945,109 +697,109 @@ function renderRouterSection(router, activeRouterTab, activeRouteView) {
       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);
+  const tabsWrap = (0, import_vobs.createElement)("div");
+  (0, import_vobs.setAttribute)(tabsWrap, "class", "vobs-devtools-router-tabs-wrap");
+  (0, import_vobs.insertBefore)(tabsWrap, tabs, null);
+  (0, import_vobs.insertBefore)(tabsWrap, toolbar, null);
+  (0, import_vobs.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);
+  return (0, import_vobs.createFragment)((parent, anchor) => {
+    (0, import_vobs.insertBefore)(parent, (0, import_vobs.createComponent)(import_ui.Card, { title: "Active route", children: /* @__PURE__ */ __name(() => renderRouterLocation(current, state2), "children") }), anchor);
+    (0, import_vobs.insertBefore)(parent, (0, import_vobs.createComponent)(import_ui.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");
+  const root = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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");
+    const row = (0, import_vobs.createElement)("details");
+    (0, import_vobs.setAttribute)(row, "class", "vobs-devtools-list__row");
+    const summary = (0, import_vobs.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);
+    (0, import_vobs.insertBefore)(summary, (0, import_vobs.createComponent)(import_ui.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);
+    (0, import_vobs.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 (request.status === "success" && request.result !== void 0) (0, import_vobs.insertBefore)(row, renderInspectableValue("Result", request.result), null);
+    (0, import_vobs.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");
+  const root = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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");
+    const row = (0, import_vobs.createElement)("details");
+    (0, import_vobs.setAttribute)(row, "class", "vobs-devtools-list__row vobs-devtools-error-row");
+    const summary = (0, import_vobs.createElement)("summary");
     appendText(summary, `${error.phase} \xB7 ${error.route}`, "vobs-devtools-list__name");
     appendText(summary, error.message);
-    insertBefore(row, summary, null);
+    (0, import_vobs.insertBefore)(row, summary, null);
     if (error.stack) appendText(row, error.stack, "vobs-devtools-code");
-    insertBefore(root, row, null);
+    (0, import_vobs.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");
+  const root = (0, import_vobs.createElement)("div");
+  (0, import_vobs.setAttribute)(root, "class", "vobs-devtools-list");
+  const statusRow = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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);
+  (0, import_vobs.insertBefore)(statusRow, (0, import_vobs.createComponent)(import_ui.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);
+  (0, import_vobs.insertBefore)(root, statusRow, null);
+  (0, import_vobs.insertBefore)(root, renderInspectableValue("Params", route.params), null);
+  (0, import_vobs.insertBefore)(root, renderInspectableValue("Query", route.query), null);
+  (0, import_vobs.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");
+  const root = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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}`);
+    const row = (0, import_vobs.createElement)("div");
+    (0, import_vobs.setAttribute)(row, "class", "vobs-devtools-route-node");
+    (0, import_vobs.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 (record.loader) (0, import_vobs.insertBefore)(row, (0, import_vobs.createComponent)(import_ui.Tag, { tone: "neutral-strong", children: /* @__PURE__ */ __name(() => "loader", "children") }), null);
+    if (record.action) (0, import_vobs.insertBefore)(row, (0, import_vobs.createComponent)(import_ui.Tag, { tone: "neutral-strong", children: /* @__PURE__ */ __name(() => "action", "children") }), null);
+    (0, import_vobs.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");
+  const tree = (0, import_vobs.createElement)("div");
+  (0, import_vobs.setAttribute)(tree, "class", "vobs-devtools-route-tree");
+  const controls = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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);
+    const button = (0, import_vobs.createElement)("button");
+    (0, import_vobs.setAttribute)(button, "class", `vobs-devtools-control${(activeRouteView?.value ?? "tree") === mode ? " is-active" : ""}`);
+    (0, import_vobs.setAttribute)(button, "type", "button");
+    (0, import_vobs.setAttribute)(button, "aria-pressed", (activeRouteView?.value ?? "tree") === mode ? "true" : "false");
+    (0, import_vobs.insertBefore)(button, (0, import_vobs.createText)(mode === "tree" ? "Tree" : "List"), null);
     button.addEventListener("click", () => {
       if (activeRouteView) activeRouteView.value = mode;
     });
-    insertBefore(controls, button, null);
+    (0, import_vobs.insertBefore)(controls, button, null);
   }
-  insertBefore(tree, controls, null);
+  (0, import_vobs.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);
@@ -2069,20 +821,20 @@ function flattenRouteNodes(nodes) {
 __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}`);
+  const row = (0, import_vobs.createElement)(concrete ? "button" : "div");
+  (0, import_vobs.setAttribute)(row, "class", `vobs-devtools-route-node${concrete && node.path === currentPath ? " is-active" : ""}`);
+  (0, import_vobs.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}`);
+    (0, import_vobs.setAttribute)(row, "type", "button");
+    (0, import_vobs.setAttribute)(row, "title", `Navigate to ${node.path}`);
     row.addEventListener("click", () => {
       void router.push(node.path);
     });
   }
-  insertBefore(parent, row, null);
+  (0, import_vobs.insertBefore)(parent, row, null);
   for (const child of node.children) appendRouteConfigNode(parent, child, depth + 1, router, currentPath);
 }
 __name(appendRouteConfigNode, "appendRouteConfigNode");
@@ -2094,62 +846,62 @@ function routeComponentName(record) {
 }
 __name(routeComponentName, "routeComponentName");
 function renderNavigationHistory(history, router) {
-  const root = createElement("div");
-  setAttribute(root, "class", "vobs-devtools-list");
+  const root = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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}`);
+    const row = (0, import_vobs.createElement)("button");
+    (0, import_vobs.setAttribute)(row, "class", "vobs-devtools-list__row");
+    (0, import_vobs.setAttribute)(row, "type", "button");
+    (0, import_vobs.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);
+    (0, import_vobs.insertBefore)(row, (0, import_vobs.createComponent)(import_ui.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);
+    (0, import_vobs.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);
+  const node = (0, import_vobs.createElement)("span");
+  (0, import_vobs.setAttribute)(node, "class", "vobs-devtools-muted");
+  (0, import_vobs.insertBefore)(node, (0, import_vobs.createText)(value), null);
+  (0, import_vobs.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");
+  const row = (0, import_vobs.createElement)("details");
+  (0, import_vobs.setAttribute)(row, "class", "vobs-devtools-list__row vobs-devtools-signal-row");
+  const summary = (0, import_vobs.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);
+  (0, import_vobs.insertBefore)(summary, (0, import_vobs.createComponent)(import_ui.Tag, { tone: "neutral-strong", children: /* @__PURE__ */ __name(() => `${signal.subscribers} subscribers`, "children") }), null);
+  (0, import_vobs.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);
+  (0, import_vobs.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);
+  if (api.canMutate() && signal.kind !== "memo") (0, import_vobs.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");
+  const root = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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);
+  const input = (0, import_vobs.createElement)("input");
+  (0, import_vobs.setAttribute)(input, "class", "vobs-devtools-search");
+  (0, import_vobs.setAttribute)(input, "type", "text");
+  (0, import_vobs.setAttribute)(input, "aria-label", `Edit ${signal.name}`);
+  (0, import_vobs.setProperty)(input, "value", formatValue(signal.value));
+  const button = (0, import_vobs.createElement)("button");
+  (0, import_vobs.setAttribute)(button, "class", "vobs-devtools-control");
+  (0, import_vobs.setAttribute)(button, "type", "button");
+  (0, import_vobs.insertBefore)(button, (0, import_vobs.createText)("Apply debug value"), null);
   button.addEventListener("click", (event) => {
     event.stopPropagation();
     const raw = input.value;
@@ -2160,21 +912,21 @@ function renderSignalMutationControl(signal, api) {
     }
     api.setSignalValue(signal.id, value);
   });
-  insertBefore(root, input, null);
-  insertBefore(root, button, null);
+  (0, import_vobs.insertBefore)(root, input, null);
+  (0, import_vobs.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 row = (0, import_vobs.createElement)("details");
+  (0, import_vobs.setAttribute)(row, "class", "vobs-devtools-list__row");
+  const summary = (0, import_vobs.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);
+  (0, import_vobs.insertBefore)(summary, (0, import_vobs.createComponent)(import_ui.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);
+  (0, import_vobs.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");
@@ -2183,43 +935,43 @@ function renderEffectRow(effect2) {
 }
 __name(renderEffectRow, "renderEffectRow");
 function renderUpdateRow(update, api, selection = null, onFocus = () => void 0) {
-  const row = createElement("details");
+  const row = (0, import_vobs.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");
+  (0, import_vobs.setAttribute)(row, "class", `vobs-devtools-update-row${selected ? " is-selected" : ""}`);
+  if (selected) (0, import_vobs.setProperty)(row, "open", true);
+  const summary = (0, import_vobs.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);
+  (0, import_vobs.insertBefore)(summary, (0, import_vobs.createComponent)(import_ui.Tag, { tone: update.duration >= 16 ? "warning" : "neutral-strong", children: /* @__PURE__ */ __name(() => `${update.effects.length} effects`, "children") }), null);
+  (0, import_vobs.insertBefore)(row, summary, null);
+  (0, import_vobs.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);
+    (0, import_vobs.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");
+    const mutation = (0, import_vobs.createElement)("div");
+    (0, import_vobs.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);
+      (0, import_vobs.insertBefore)(mutation, renderValuePair("", domUpdate.previousValue, domUpdate.nextValue), null);
     }
-    insertBefore(row, mutation, null);
+    (0, import_vobs.insertBefore)(row, mutation, null);
   }
   return row;
 }
 __name(renderUpdateRow, "renderUpdateRow");
 function renderEffectExecution(effect2) {
-  const root = createElement("div");
-  setAttribute(root, "class", "vobs-devtools-effect-execution");
+  const root = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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;
@@ -2231,39 +983,39 @@ function appendUpdateLinks(parent, ids, onFocus) {
     return;
   }
   for (const id of ids) {
-    const button = createElement("button");
-    setAttribute(button, "class", "vobs-devtools-link");
-    setAttribute(button, "type", "button");
+    const button = (0, import_vobs.createElement)("button");
+    (0, import_vobs.setAttribute)(button, "class", "vobs-devtools-link");
+    (0, import_vobs.setAttribute)(button, "type", "button");
     button.addEventListener("click", (event) => {
       event.stopPropagation();
       onFocus("updates", { type: "update", id });
     });
-    insertBefore(button, createText(id), null);
-    insertBefore(parent, button, null);
+    (0, import_vobs.insertBefore)(button, (0, import_vobs.createText)(id), null);
+    (0, import_vobs.insertBefore)(parent, button, null);
   }
 }
 __name(appendUpdateLinks, "appendUpdateLinks");
 function renderLifecycleTimeline(events, onFocus) {
-  const root = createElement("div");
-  setAttribute(root, "class", "vobs-devtools-lifecycle-list");
+  const root = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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");
+    const row = (0, import_vobs.createElement)(selection?.type === "component" ? "button" : "div");
+    (0, import_vobs.setAttribute)(row, "class", "vobs-devtools-lifecycle-row");
+    if (selection?.type === "component") (0, import_vobs.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);
+    (0, import_vobs.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 root = (0, import_vobs.createElement)("div");
+  (0, import_vobs.setAttribute)(root, "class", "vobs-devtools-network-inspector");
   const activeSource = sourceFilter?.value ?? "all";
   const activeStatus = statusFilter?.value ?? "all";
   const entries = [
@@ -2292,19 +1044,19 @@ function renderUnifiedNetworkRequests(requests, routerRequests, query, selection
   ].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");
+  const controls = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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);
+  const search = (0, import_vobs.createElement)("input");
+  (0, import_vobs.setAttribute)(search, "class", "vobs-devtools-search vobs-devtools-network-toolbar__search");
+  (0, import_vobs.setAttribute)(search, "type", "search");
+  (0, import_vobs.setAttribute)(search, "placeholder", "Search requests");
+  (0, import_vobs.setProperty)(search, "value", query);
   search.addEventListener("change", () => {
     if (queryState) queryState.value = search.value;
   });
-  insertBefore(controls, search, null);
-  insertBefore(controls, createNetworkFilterSelect("Source", activeSource, [
+  (0, import_vobs.insertBefore)(controls, search, null);
+  (0, import_vobs.insertBefore)(controls, createNetworkFilterSelect("Source", activeSource, [
     ["all", "All sources"],
     ["http", "HTTP"],
     ["router", "Router"],
@@ -2312,7 +1064,7 @@ function renderUnifiedNetworkRequests(requests, routerRequests, query, selection
   ], (value) => {
     if (sourceFilter) sourceFilter.value = value;
   }), null);
-  insertBefore(controls, createNetworkFilterSelect("Status", activeStatus, [
+  (0, import_vobs.insertBefore)(controls, createNetworkFilterSelect("Status", activeStatus, [
     ["all", "All statuses"],
     ["loading", "Loading"],
     ["success", "Success"],
@@ -2321,15 +1073,15 @@ function renderUnifiedNetworkRequests(requests, routerRequests, query, selection
   ], (value) => {
     if (statusFilter) statusFilter.value = value;
   }), null);
-  if (api) insertBefore(controls, createComponent(Button, {
+  if (api) (0, import_vobs.insertBefore)(controls, (0, import_vobs.createComponent)(import_ui.Button, {
     variant: "ghost",
     children: /* @__PURE__ */ __name(() => "Clear", "children"),
     onClick: /* @__PURE__ */ __name(() => api.clearNetworkRequests(), "onClick")
   }), null);
-  if (testerOpen && testerDraft) insertBefore(controls, createComponent(Button, {
+  if (testerOpen && testerDraft) (0, import_vobs.insertBefore)(controls, (0, import_vobs.createComponent)(import_ui.Button, {
     variant: "ghost",
     iconOnly: true,
-    icon: createComponent(Icon, { name: "settings" }),
+    icon: (0, import_vobs.createComponent)(import_ui.Icon, { name: "settings" }),
     "aria-label": "Open Request Tester",
     title: "Open Request Tester",
     onClick: /* @__PURE__ */ __name(() => {
@@ -2338,53 +1090,53 @@ function renderUnifiedNetworkRequests(requests, routerRequests, query, selection
       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");
+  (0, import_vobs.insertBefore)(root, controls, null);
+  const panes = (0, import_vobs.createElement)("div");
+  (0, import_vobs.setAttribute)(panes, "class", "vobs-devtools-network-panes");
+  const listPane = (0, import_vobs.createElement)("section");
+  (0, import_vobs.setAttribute)(listPane, "class", "vobs-devtools-network-list-pane");
+  (0, import_vobs.setAttribute)(listPane, "aria-label", "Network requests");
+  const requestList = (0, import_vobs.createElement)("div");
+  (0, import_vobs.setAttribute)(requestList, "class", "vobs-devtools-network-request-list");
+  (0, import_vobs.setAttribute)(requestList, "role", "list");
   for (const entry of entries) {
-    const row = createElement("button");
+    const row = (0, import_vobs.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");
+    (0, import_vobs.setAttribute)(row, "class", `vobs-devtools-network-request${isSelected ? " is-selected" : ""}`);
+    (0, import_vobs.setAttribute)(row, "type", "button");
+    (0, import_vobs.setAttribute)(row, "role", "listitem");
+    (0, import_vobs.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");
+    const pathLine = (0, import_vobs.createElement)("span");
+    (0, import_vobs.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");
+    if (entry.request?.test) (0, import_vobs.insertBefore)(pathLine, (0, import_vobs.createComponent)(import_ui.Tag, { tone: "warning", children: /* @__PURE__ */ __name(() => "TEST", "children") }), null);
+    (0, import_vobs.insertBefore)(pathLine, (0, import_vobs.createComponent)(import_ui.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);
+    (0, import_vobs.insertBefore)(row, pathLine, null);
+    const meta = (0, import_vobs.createElement)("span");
+    (0, import_vobs.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);
+    (0, import_vobs.insertBefore)(row, meta, null);
+    (0, import_vobs.insertBefore)(requestList, row, null);
   }
-  insertBefore(listPane, requestList, null);
+  (0, import_vobs.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) => {
+  (0, import_vobs.insertBefore)(panes, listPane, null);
+  const detailPane = (0, import_vobs.createElement)("section");
+  (0, import_vobs.setAttribute)(detailPane, "class", "vobs-devtools-network-detail-pane");
+  (0, import_vobs.setAttribute)(detailPane, "aria-label", "Selected network request");
+  if (selected) (0, import_vobs.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) => {
+  (0, import_vobs.insertBefore)(panes, detailPane, null);
+  (0, import_vobs.insertBefore)(root, panes, null);
+  if (testerOpen?.value && testerDraft) (0, import_vobs.insertBefore)(root, renderRequestTester(testerDraft, (run) => {
     if (testerRun) testerRun.value = run;
     testerRevision && testerRevision.value++;
   }, testerRun?.value ?? { status: "idle" }, testerTab?.value ?? "params", selected, http, () => {
@@ -2397,31 +1149,31 @@ function renderUnifiedNetworkRequests(requests, routerRequests, query, selection
 }
 __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);
+  const select = (0, import_vobs.createElement)("select");
+  (0, import_vobs.setAttribute)(select, "class", "vobs-devtools-network-toolbar__select");
+  (0, import_vobs.setAttribute)(select, "aria-label", label);
+  (0, import_vobs.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);
+    const option = (0, import_vobs.createElement)("option");
+    (0, import_vobs.setAttribute)(option, "value", optionValue);
+    (0, import_vobs.insertBefore)(option, (0, import_vobs.createText)(optionLabel), null);
+    (0, import_vobs.insertBefore)(select, option, null);
   }
-  setProperty(select, "value", value);
+  (0, import_vobs.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");
+  const drawer = (0, import_vobs.createElement)("aside");
+  (0, import_vobs.setAttribute)(drawer, "class", "vobs-devtools-request-tester");
+  (0, import_vobs.setAttribute)(drawer, "aria-label", "Request Tester");
+  const heading = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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, {
+  const headingActions = (0, import_vobs.createElement)("div");
+  (0, import_vobs.setAttribute)(headingActions, "class", "vobs-devtools-request-tester__heading-actions");
+  (0, import_vobs.insertBefore)(headingActions, (0, import_vobs.createComponent)(import_ui.Button, {
     variant: "ghost",
     disabled: !selected,
     children: /* @__PURE__ */ __name(() => "Use selected request", "children"),
@@ -2431,29 +1183,29 @@ function renderRequestTester(draft, onRunChange, run, activeTab, selected, http,
       onRunChange({ status: "idle" });
     }, "onClick")
   }), null);
-  insertBefore(headingActions, createComponent(Button, {
+  (0, import_vobs.insertBefore)(headingActions, (0, import_vobs.createComponent)(import_ui.Button, {
     variant: "ghost",
     iconOnly: true,
-    icon: createComponent(Icon, { name: "x" }),
+    icon: (0, import_vobs.createComponent)(import_ui.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) => {
+  (0, import_vobs.insertBefore)(heading, headingActions, null);
+  (0, import_vobs.insertBefore)(drawer, heading, null);
+  const requestLine = (0, import_vobs.createElement)("div");
+  (0, import_vobs.setAttribute)(requestLine, "class", "vobs-devtools-request-tester__request-line");
+  (0, import_vobs.insertBefore)(requestLine, createTesterInput("url", draft.url, (value) => {
     draft.url = value;
   }), null);
-  insertBefore(requestLine, createTesterMethodSelect(draft.method, (value) => {
+  (0, import_vobs.insertBefore)(requestLine, createTesterMethodSelect(draft.method, (value) => {
     draft.method = value;
     onRunChange({ status: run.status, message: run.message });
   }), null);
-  insertBefore(requestLine, createComponent(Button, {
+  (0, import_vobs.insertBefore)(requestLine, (0, import_vobs.createComponent)(import_ui.Button, {
     variant: "brand",
     iconOnly: true,
-    icon: createComponent(Icon, { name: "play" }),
+    icon: (0, import_vobs.createComponent)(import_ui.Icon, { name: "play" }),
     loading: run.status === "running",
     disabled: run.status === "running",
     "aria-label": run.status === "running" ? "Running request" : "Start request",
@@ -2462,41 +1214,41 @@ function renderRequestTester(draft, onRunChange, run, activeTab, selected, http,
       void executeRequestTester(http, draft, onRunChange);
     }, "onClick")
   }), null);
-  insertBefore(drawer, requestLine, null);
-  const tabs = createElement("div");
-  setAttribute(tabs, "class", "vobs-devtools-request-tester__tabs");
+  (0, import_vobs.insertBefore)(drawer, requestLine, null);
+  const tabs = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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");
+    const button = (0, import_vobs.createElement)("button");
+    (0, import_vobs.setAttribute)(button, "class", `vobs-devtools-request-tester__tab${activeTab === tab ? " is-active" : ""}`);
+    (0, import_vobs.setAttribute)(button, "type", "button");
+    (0, import_vobs.setAttribute)(button, "aria-selected", activeTab === tab ? "true" : "false");
     appendText(button, label);
     button.addEventListener("click", () => onTabChange(tab));
-    insertBefore(tabs, button, null);
+    (0, import_vobs.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);
+  (0, import_vobs.insertBefore)(drawer, tabs, null);
+  if (activeTab === "params") (0, import_vobs.insertBefore)(drawer, renderTesterParamGroup("Params", draft.params, "parameter", onRunChange), null);
+  if (activeTab === "headers") (0, import_vobs.insertBefore)(drawer, renderTesterParamGroup("Headers", draft.headers, "header", onRunChange), null);
   if (activeTab === "body") {
-    const bodyLabel = createElement("label");
-    setAttribute(bodyLabel, "class", "vobs-devtools-request-tester__field");
+    const bodyLabel = (0, import_vobs.createElement)("label");
+    (0, import_vobs.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);
+    const body = (0, import_vobs.createElement)("textarea");
+    (0, import_vobs.setAttribute)(body, "class", "vobs-devtools-request-tester__textarea");
+    (0, import_vobs.setAttribute)(body, "rows", "8");
+    (0, import_vobs.setAttribute)(body, "placeholder", '{ "key": "value" }');
+    (0, import_vobs.setProperty)(body, "value", draft.body);
     body.addEventListener("change", () => {
       draft.body = body.value;
     });
-    insertBefore(bodyLabel, body, null);
-    insertBefore(drawer, bodyLabel, null);
+    (0, import_vobs.insertBefore)(bodyLabel, body, null);
+    (0, import_vobs.insertBefore)(drawer, bodyLabel, null);
   }
-  const footer = createElement("div");
-  setAttribute(footer, "class", "vobs-devtools-request-tester__footer");
+  const footer = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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);
+  (0, import_vobs.insertBefore)(drawer, footer, null);
   return drawer;
 }
 __name(renderRequestTester, "renderRequestTester");
@@ -2524,70 +1276,70 @@ function isHTTPMethod(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);
+  const input = (0, import_vobs.createElement)("input");
+  (0, import_vobs.setAttribute)(input, "class", "vobs-devtools-request-tester__input");
+  (0, import_vobs.setAttribute)(input, "name", name);
+  (0, import_vobs.setAttribute)(input, "type", "text");
+  (0, import_vobs.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");
+  const select = (0, import_vobs.createElement)("select");
+  (0, import_vobs.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);
+    const option = (0, import_vobs.createElement)("option");
+    (0, import_vobs.setAttribute)(option, "value", method);
+    if (method === value) (0, import_vobs.setAttribute)(option, "selected", "");
+    (0, import_vobs.insertBefore)(option, (0, import_vobs.createText)(method), null);
+    (0, import_vobs.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");
+  const group = (0, import_vobs.createElement)("section");
+  (0, import_vobs.setAttribute)(group, "class", "vobs-devtools-request-tester__group");
+  const title = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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");
+  const add = (0, import_vobs.createElement)("button");
+  (0, import_vobs.setAttribute)(add, "class", "vobs-devtools-request-tester__add");
+  (0, import_vobs.setAttribute)(add, "type", "button");
   appendText(add, "+");
-  setAttribute(add, "aria-label", `Add ${label}`);
-  setAttribute(add, "title", `Add ${label}`);
+  (0, import_vobs.setAttribute)(add, "aria-label", `Add ${label}`);
+  (0, import_vobs.setAttribute)(add, "title", `Add ${label}`);
   add.addEventListener("click", () => {
     params.push({ key: "", value: "" });
     onChange({ status: "idle" });
   });
-  insertBefore(title, add, null);
-  insertBefore(group, title, null);
+  (0, import_vobs.insertBefore)(title, add, null);
+  (0, import_vobs.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) => {
+    const row = (0, import_vobs.createElement)("div");
+    (0, import_vobs.setAttribute)(row, "class", "vobs-devtools-request-tester__param");
+    (0, import_vobs.insertBefore)(row, createTesterInput(`${singular}-key-${index}`, param.key, (value) => {
       param.key = value;
     }), null);
-    insertBefore(row, createTesterInput(`${singular}-value-${index}`, param.value, (value) => {
+    (0, import_vobs.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);
+    const remove = (0, import_vobs.createElement)("button");
+    (0, import_vobs.setAttribute)(remove, "class", "vobs-devtools-request-tester__remove");
+    (0, import_vobs.setAttribute)(remove, "type", "button");
+    (0, import_vobs.setAttribute)(remove, "aria-label", `Remove ${label} row ${index + 1}`);
+    (0, import_vobs.setAttribute)(remove, "title", `Remove ${label} row ${index + 1}`);
+    (0, import_vobs.insertBefore)(remove, (0, import_vobs.createComponent)(import_ui.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);
+    (0, import_vobs.insertBefore)(row, remove, null);
+    (0, import_vobs.insertBefore)(group, row, null);
   }
   return group;
 }
@@ -2632,32 +1384,32 @@ async function executeRequestTester(http, draft, onRunChange) {
 }
 __name(executeRequestTester, "executeRequestTester");
 function renderNetworkDetail(entry, activeTab, onTabChange) {
-  const root = createElement("section");
-  setAttribute(root, "class", "vobs-devtools-network-detail");
+  const root = (0, import_vobs.createElement)("section");
+  (0, import_vobs.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");
+  const heading = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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 (request?.test) (0, import_vobs.insertBefore)(heading, (0, import_vobs.createComponent)(import_ui.Tag, { tone: "warning", children: /* @__PURE__ */ __name(() => "TEST", "children") }), null);
+  (0, import_vobs.insertBefore)(heading, (0, import_vobs.createComponent)(import_ui.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");
+  (0, import_vobs.insertBefore)(root, heading, null);
+  const tabs = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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");
+    const button = (0, import_vobs.createElement)("button");
+    (0, import_vobs.setAttribute)(button, "type", "button");
+    (0, import_vobs.setAttribute)(button, "class", `vobs-devtools-network-detail__tab${activeTab === tab ? " is-active" : ""}`);
+    (0, import_vobs.setAttribute)(button, "aria-selected", activeTab === tab ? "true" : "false");
     appendText(button, label);
     button.addEventListener("click", () => onTabChange(tab));
-    insertBefore(tabs, button, null);
+    (0, import_vobs.insertBefore)(tabs, button, null);
   }
-  insertBefore(root, tabs, null);
-  const content = createElement("div");
-  setAttribute(content, "class", "vobs-devtools-network-detail__content");
+  (0, import_vobs.insertBefore)(root, tabs, null);
+  const content = (0, import_vobs.createElement)("div");
+  (0, import_vobs.setAttribute)(content, "class", "vobs-devtools-network-detail__content");
   if (activeTab === "overview") {
     appendNetworkField(content, "Source", entry.source.toUpperCase());
     appendNetworkField(content, "Method / Type", entry.method);
@@ -2665,15 +1417,15 @@ function renderNetworkDetail(entry, activeTab, onTabChange) {
     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);
+    if (request && Object.keys(request.headers).length > 0) (0, import_vobs.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);
+    if (payload !== void 0) (0, import_vobs.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);
+    if (response !== void 0) (0, import_vobs.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));
@@ -2688,16 +1440,16 @@ function renderNetworkDetail(entry, activeTab, onTabChange) {
     if (routerRequest?.trigger) appendNetworkField(content, "Trigger", routerRequest.trigger);
     appendNetworkField(content, "Request ID", String(request?.id ?? routerRequest?.id), "code");
   }
-  insertBefore(root, content, null);
+  (0, import_vobs.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");
+  const field = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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);
+  (0, import_vobs.insertBefore)(parent, field, null);
 }
 __name(appendNetworkField, "appendNetworkField");
 function formatNetworkTimestamp(value) {
@@ -2725,25 +1477,25 @@ function filterComponentTree(nodes, query) {
 }
 __name(filterComponentTree, "filterComponentTree");
 function renderErrors(errors, selection, onFocus) {
-  const root = createElement("div");
-  setAttribute(root, "class", "vobs-devtools-error-list");
+  const root = (0, import_vobs.createElement)("div");
+  (0, import_vobs.setAttribute)(root, "class", "vobs-devtools-error-list");
   for (const error of [...errors].reverse()) {
-    const row = createElement("details");
+    const row = (0, import_vobs.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);
+    (0, import_vobs.setAttribute)(row, "class", `vobs-devtools-list__row vobs-devtools-error-item${selected ? " is-selected" : ""}`);
+    if (selected) (0, import_vobs.setProperty)(row, "open", true);
     row.addEventListener("click", (event) => {
       event.stopPropagation();
       onFocus("errors", { type: "error", id: error.id });
     });
-    const summary = createElement("summary");
+    const summary = (0, import_vobs.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");
+    (0, import_vobs.insertBefore)(summary, (0, import_vobs.createComponent)(import_ui.Tag, { tone: error.origin === "framework" ? "danger" : error.origin === "usage" ? "warning" : "neutral-strong", children: /* @__PURE__ */ __name(() => error.origin, "children") }), null);
+    (0, import_vobs.insertBefore)(summary, (0, import_vobs.createComponent)(import_ui.Tag, { tone: "danger", children: /* @__PURE__ */ __name(() => `${error.count}\xD7`, "children") }), null);
+    (0, import_vobs.insertBefore)(row, summary, null);
+    const details = (0, import_vobs.createElement)("div");
+    (0, import_vobs.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");
@@ -2765,53 +1517,53 @@ function renderErrors(errors, selection, onFocus) {
       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);
+    (0, import_vobs.insertBefore)(row, details, null);
+    (0, import_vobs.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");
+  const button = (0, import_vobs.createElement)("button");
+  (0, import_vobs.setAttribute)(button, "class", "vobs-devtools-link");
+  (0, import_vobs.setAttribute)(button, "type", "button");
   button.addEventListener("click", (event) => {
     event.stopPropagation();
     onFocus(section, selection);
   });
-  insertBefore(button, createText(label), null);
-  insertBefore(parent, button, null);
+  (0, import_vobs.insertBefore)(button, (0, import_vobs.createText)(label), null);
+  (0, import_vobs.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" : ""}`);
+  const field = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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);
+  (0, import_vobs.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");
+  const field = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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");
+  const valueNode = (0, import_vobs.createElement)("span");
+  (0, import_vobs.setAttribute)(valueNode, "class", "vobs-devtools-error-item__value");
   appendContextLink(valueNode, value, section, selection, onFocus);
-  insertBefore(field, valueNode, null);
-  insertBefore(parent, field, null);
+  (0, import_vobs.insertBefore)(field, valueNode, null);
+  (0, import_vobs.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");
+  const stack = (0, import_vobs.createElement)("div");
+  (0, import_vobs.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);
+  const code = (0, import_vobs.createElement)("pre");
+  (0, import_vobs.setAttribute)(code, "class", "vobs-devtools-error-item__stack-code vobs-devtools-code");
+  (0, import_vobs.insertBefore)(code, (0, import_vobs.createText)(formatDebugStack(value, name, message)), null);
+  (0, import_vobs.insertBefore)(stack, code, null);
+  (0, import_vobs.insertBefore)(parent, stack, null);
 }
 __name(appendErrorStack, "appendErrorStack");
 function formatErrorSummary(error) {
@@ -2846,10 +1598,10 @@ function displayErrorComponent(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);
+  const node = (0, import_vobs.createElement)("span");
+  if (className) (0, import_vobs.setAttribute)(node, "class", className);
+  (0, import_vobs.insertBefore)(node, (0, import_vobs.createText)(value), null);
+  (0, import_vobs.insertBefore)(parent, node, null);
 }
 __name(appendText, "appendText");
 function formatDebugLocation(value) {
@@ -2906,20 +1658,20 @@ function stripDebugLocation(value) {
 }
 __name(stripDebugLocation, "stripDebugLocation");
 function renderComponentSummary(node, snapshot, selection, onFocus) {
-  const row = createElement("details");
+  const row = (0, import_vobs.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);
+  (0, import_vobs.setAttribute)(row, "class", `vobs-devtools-list__row vobs-devtools-component-row${selected ? " is-selected" : ""}`);
+  if (selected) (0, import_vobs.setProperty)(row, "open", true);
   row.addEventListener("click", (event) => {
     event.stopPropagation();
     onFocus("components", { type: "component", id: node.id });
   });
-  const summary = createElement("summary");
+  const summary = (0, import_vobs.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);
+  (0, import_vobs.insertBefore)(summary, (0, import_vobs.createComponent)(import_ui.Tag, { tone: node.mounted ? "success" : "neutral-strong", children: /* @__PURE__ */ __name(() => `${node.signals.length} signals`, "children") }), null);
+  (0, import_vobs.insertBefore)(summary, (0, import_vobs.createComponent)(import_ui.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);
+  (0, import_vobs.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);
@@ -2935,7 +1687,7 @@ function renderComponentSummary(node, snapshot, selection, onFocus) {
   }
   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);
+    for (const child of node.children) (0, import_vobs.insertBefore)(row, renderComponentSummary(child, snapshot, selection, onFocus), null);
   }
   return row;
 }
@@ -2950,84 +1702,84 @@ function formatValue(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));
+  const root = (0, import_vobs.createElement)("div");
+  (0, import_vobs.setAttribute)(root, "class", `vobs-devtools-value-pair${label ? "" : " vobs-devtools-value-pair--compact"}`);
+  const distinctMode = (0, import_vobs.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");
+    const title = (0, import_vobs.createElement)("div");
+    (0, import_vobs.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);
+    const toggle = (0, import_vobs.createElement)("button");
+    (0, import_vobs.setAttribute)(toggle, "class", "vobs-devtools-distinct-toggle is-active");
+    (0, import_vobs.setAttribute)(toggle, "type", "button");
+    (0, import_vobs.setAttribute)(toggle, "aria-pressed", "true");
+    (0, import_vobs.setAttribute)(toggle, "title", "Show only values that changed");
+    (0, import_vobs.insertBefore)(toggle, (0, import_vobs.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");
+      (0, import_vobs.setAttribute)(toggle, "class", `vobs-devtools-distinct-toggle${enabled ? " is-active" : ""}`);
+      (0, import_vobs.setAttribute)(toggle, "aria-pressed", enabled ? "true" : "false");
+      (0, import_vobs.setAttribute)(toggle, "title", enabled ? "Show only values that changed" : "Show complete values");
     });
-    insertBefore(title, toggle, null);
-    insertBefore(root, title, null);
+    (0, import_vobs.insertBefore)(title, toggle, null);
+    (0, import_vobs.insertBefore)(root, title, null);
   }
-  insertDynamic(root, null, () => {
+  (0, import_vobs.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 (0, import_vobs.createFragment)((parent, anchor) => {
+      (0, import_vobs.insertBefore)(parent, renderValueTree("Before", before.value, Boolean(label), distinct && !before.hasDifference ? "No differing fields" : void 0), anchor);
+      (0, import_vobs.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");
+  const root = (0, import_vobs.createElement)("section");
+  (0, import_vobs.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, {
+    const controls = (0, import_vobs.createElement)("div");
+    (0, import_vobs.setAttribute)(controls, "class", "vobs-devtools-value-inspector__controls");
+    (0, import_vobs.insertBefore)(controls, (0, import_vobs.createComponent)(import_ui.Button, {
       variant: "ghost",
       iconOnly: true,
-      icon: createComponent(Icon, { name: "plus" }),
+      icon: (0, import_vobs.createComponent)(import_ui.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");
+        for (const node of root.querySelectorAll(".vobs-devtools-value-tree")) (0, import_vobs.setAttribute)(node, "data-expanded", "true");
       }, "onClick")
     }), null);
-    insertBefore(controls, createComponent(Button, {
+    (0, import_vobs.insertBefore)(controls, (0, import_vobs.createComponent)(import_ui.Button, {
       variant: "ghost",
       iconOnly: true,
-      icon: createComponent(Icon, { name: "minus" }),
+      icon: (0, import_vobs.createComponent)(import_ui.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");
+        for (const node of root.querySelectorAll(".vobs-devtools-value-tree")) (0, import_vobs.setAttribute)(node, "data-expanded", "false");
       }, "onClick")
     }), null);
-    insertBefore(root, controls, null);
+    (0, import_vobs.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`);
+  const tree = (0, import_vobs.createElement)("div");
+  (0, import_vobs.setAttribute)(tree, "class", "vobs-devtools-value-tree-root");
+  (0, import_vobs.setAttribute)(tree, "role", "tree");
+  (0, import_vobs.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);
+  else (0, import_vobs.insertBefore)(tree, renderInspectableValue(label, value, expanded), null);
+  (0, import_vobs.insertBefore)(root, tree, null);
   return root;
 }
 __name(renderValueTree, "renderValueTree");
@@ -3109,27 +1861,27 @@ function areValuesEqual(before, after, seen = /* @__PURE__ */ new WeakMap()) {
 __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");
+    const row = (0, import_vobs.createElement)("div");
+    (0, import_vobs.setAttribute)(row, "class", "vobs-devtools-value-tree__leaf");
+    (0, import_vobs.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 root = (0, import_vobs.createElement)("div");
+  (0, import_vobs.setAttribute)(root, "class", "vobs-devtools-value-tree");
+  (0, import_vobs.setAttribute)(root, "role", "treeitem");
+  (0, import_vobs.setAttribute)(root, "data-expanded", expanded ? "true" : "false");
+  const summary = (0, import_vobs.createElement)("button");
+  (0, import_vobs.setAttribute)(summary, "class", "vobs-devtools-value-tree__summary");
+  (0, import_vobs.setAttribute)(summary, "type", "button");
+  (0, import_vobs.setAttribute)(summary, "aria-expanded", expanded ? "true" : "false");
+  (0, import_vobs.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}`);
+    (0, import_vobs.setAttribute)(root, "data-expanded", expanded2 ? "true" : "false");
+    (0, import_vobs.setAttribute)(summary, "aria-expanded", expanded2 ? "true" : "false");
+    (0, import_vobs.setAttribute)(summary, "title", `${expanded2 ? "Collapse" : "Expand"} ${label}`);
   }, "toggleExpanded");
   summary.addEventListener("pointerdown", (event) => {
     event.preventDefault();
@@ -3145,14 +1897,14 @@ function renderInspectableValue(label, value, expanded = false, ancestors = [])
   });
   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");
+  (0, import_vobs.insertBefore)(root, summary, null);
+  const children = (0, import_vobs.createElement)("div");
+  (0, import_vobs.setAttribute)(children, "class", "vobs-devtools-value-tree__children");
+  (0, import_vobs.setAttribute)(children, "role", "group");
   for (const [key, child] of valueEntries(value)) {
-    insertBefore(children, renderInspectableValue(key, child, false, [...ancestors, value]), null);
+    (0, import_vobs.insertBefore)(children, renderInspectableValue(key, child, false, [...ancestors, value]), null);
   }
-  insertBefore(root, children, null);
+  (0, import_vobs.insertBefore)(root, children, null);
   return root;
 }
 __name(renderInspectableValue, "renderInspectableValue");
@@ -3179,9 +1931,10 @@ function previewValue(value) {
   return String(value);
 }
 __name(previewValue, "previewValue");
-
-exports.DevToolsPanel = DevToolsPanel;
-exports.DevToolsToolbar = DevToolsToolbar;
-exports.readDevToolsSnapshot = readDevToolsSnapshot;
-//# sourceMappingURL=panel.cjs.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DevToolsPanel,
+  DevToolsToolbar,
+  readDevToolsSnapshot
+});
 //# sourceMappingURL=panel.cjs.map